alpha
/
buffer_platform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增主题切换功能;增加自选等模块

Browse Source
master^2
Lxy 2 weeks ago
parent 394901c4c7
commit fd64d43574
4 changed files with 2686 additions and 916 deletions
Show Stats Download Patch File Download Diff File

185
DESIGN.md
Unescape View File

@ -0,0 +1,185 @@
# Design System Inspired by Revolut
## 1. Visual Theme & Atmosphere
Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
The color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
**Key Characteristics:**
- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens
- Universal pill buttons (9999px radius) with generous padding (14px 32px)
- Inter for body text with positive letter-spacing (0.16px–0.24px)
- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
- Zero shadows detected — depth through color contrast only
- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
## 2. Color Palette & Roles
### Primary
- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text
- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface
- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface
### Brand / Interactive
- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue
- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent
- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue
### Semantic
- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive
- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent
- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states
- **Yellow** (`#b09000`): `--rui-color-yellow`, attention
- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive
- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success
- **Green Text** (`#006400`): `--website-color-green-text`, green text
- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational
- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent
- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text
### Neutral Scale
- **Mid Slate** (`#505a63`): Secondary text
- **Cool Gray** (`#8d969e`): Muted text, tertiary
- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers
## 3. Typography Rules
### Font Families
- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks
- **Body / UI**: `Inter` — standard system sans
- **Fallback**: `Arial` for specific button contexts
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
### Principles
- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.
## 4. Component Stylings
### Buttons
**Primary Dark Pill**
- Background: `#191c1f`
- Text: `#ffffff`
- Padding: 14px 32px
- Radius: 9999px (full pill)
- Hover: opacity 0.85
- Focus: `0 0 0 0.125rem` ring
**Secondary Light Pill**
- Background: `#f4f4f4`
- Text: `#000000`
- Padding: 14px 34px
- Radius: 9999px
- Hover: opacity 0.85
**Outlined Pill**
- Background: transparent
- Text: `#191c1f`
- Border: `2px solid #191c1f`
- Padding: 14px 32px
- Radius: 9999px
**Ghost on Dark**
- Background: `rgba(244, 244, 244, 0.1)`
- Text: `#f4f4f4`
- Border: `2px solid #f4f4f4`
- Padding: 14px 32px
- Radius: 9999px
### Cards & Containers
- Radius: 12px (small), 20px (cards)
- No shadows — flat surfaces with color contrast
- Dark and light section alternation
### Navigation
- Aeonik Pro 20px weight 500
- Clean header, hamburger toggle at 12px radius
- Pill CTAs right-aligned
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
- Large section spacing: 80px–120px
### Border Radius Scale
- Standard (12px): Navigation, small buttons
- Card (20px): Feature cards
- Pill (9999px): All buttons
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
| Focus | `0 0 0 0.125rem` ring | Accessibility focus |
**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
## 7. Do's and Don'ts
### Do
- Use Aeonik Pro weight 500 for all display headings
- Apply 9999px radius to all buttons — pill shape is universal
- Use generous button padding (14px 32px)
- Keep the palette to near-black + white for marketing surfaces
- Apply positive letter-spacing on Inter body text
### Don't
- Don't use shadows — Revolut is flat by design
- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
- Don't use small buttons — the generous padding is intentional
- Don't apply semantic colors to marketing surfaces — they're for the product
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <400px | Compact, single column |
| Mobile | 400–720px | Standard mobile |
| Tablet | 720–1024px | 2-column layouts |
| Desktop | 1024–1280px | Standard desktop |
| Large | 1280–1920px | Full layout |
## 9. Agent Prompt Guide
### Quick Color Reference
- Dark: Revolut Dark (`#191c1f`)
- Light: White (`#ffffff`)
- Surface: Light (`#f4f4f4`)
- Blue: Revolut Blue (`#494fdf`)
- Danger: Red (`#e23b4a`)
- Success: Teal (`#00a87e`)
### Example Component Prompts
- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
### Iteration Guide
1. Aeonik Pro 500 for headings — never bold
2. All buttons are pills (9999px) with generous padding
3. Zero shadows — flat is the Revolut identity
4. Near-black + white for marketing, semantic colors for product

2151
app/static/futures_analysis.css
View File

File diff suppressed because it is too large Load Diff

428
app/static/futures_analysis.html
Unescape View File

@ -7,39 +7,57 @@
<link rel="stylesheet" href="/static/futures_analysis.css"> <link rel="stylesheet" href="/static/futures_analysis.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head> </head>
<body> <body class="theme-minimal">
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<div class="app-container"> <div class="app-container">
<!-- 顶部导航 --> <!-- 顶部导航 -->
<header class="top-nav"> <header class="top-nav">
<div class="nav-left"> <div class="nav-left">
<div class="logo"> <div class="logo">
<div class="logo-icon"><i class="fas fa-chart-line"></i></div> <div class="logo-icon">
<i class="fas fa-chart-line"></i>
<div class="logo-pulse"></div>
</div>
<div class="logo-text"> <div class="logo-text">
<span class="logo-title">期货智析</span> <span class="logo-title">期货智析</span>
<span class="logo-subtitle">智能期货期权分析系统</span> <span class="logo-subtitle">FUTURES INTELLIGENCE</span>
</div> </div>
</div> </div>
</div> </div>
<nav class="nav-center"> <nav class="nav-center">
<a href="#" class="nav-item" data-page="market">市场概览</a> <a href="#" class="nav-item active" data-page="analysis">
<a href="#" class="nav-item" data-page="events">热点事件</a> <span class="nav-icon"><i class="fas fa-microchip"></i></span>
<a href="#" class="nav-item active" data-page="analysis">品种分析</a> <span>品种分析</span>
<a href="#" class="nav-item" data-page="risk">风险提醒</a> </a>
<a href="#" class="nav-item" data-page="watched">
<span class="nav-icon"><i class="fas fa-star"></i></span>
<span>自选</span>
</a>
<a href="#" class="nav-item" data-page="market">
<span class="nav-icon"><i class="fas fa-globe"></i></span>
<span>市场概览</span>
</a>
<a href="#" class="nav-item" data-page="risk">
<span class="nav-icon"><i class="fas fa-shield-alt"></i></span>
<span>风险预警</span>
</a>
</nav> </nav>
<div class="nav-right"> <div class="nav-right">
<div class="datetime"> <div class="system-status">
<i class="far fa-clock"></i> <span class="status-dot"></span>
<span id="current-time">2026/03/14 16:07:52</span> <span class="status-text">LIVE</span>
</div> </div>
<a href="/static/ai_config.html" class="nav-icon-btn" title="AI配置"> <div class="datetime" id="current-time">--</div>
<i class="fas fa-robot"></i> <a href="/ai-config" class="nav-btn" title="AI配置">
<i class="fas fa-brain"></i>
</a> </a>
<div class="notification"> <button class="nav-btn theme-toggle" id="theme-toggle" title="切换主题">
<i class="far fa-bell"></i> <i class="fas fa-moon"></i>
<span class="badge">3</span> </button>
</div> <a href="/" class="nav-btn" title="返回首页">
<a href="/" class="nav-icon-btn" title="返回首页"> <i class="fas fa-th-large"></i>
<i class="fas fa-home"></i>
</a> </a>
</div> </div>
</header> </header>
@ -48,43 +66,94 @@
<main class="main-content"> <main class="main-content">
<!-- 品种列表视图 --> <!-- 品种列表视图 -->
<div id="list-view" class="view active"> <div id="list-view" class="view active">
<!-- 搜索和筛选栏 --> <!-- 搜索栏 -->
<div class="toolbar"> <div class="search-section">
<div class="search-box"> <div class="search-box">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<input type="text" id="search-input" placeholder="搜索品种名称或代码..."> <input type="text" id="search-input" placeholder="搜索品种名称或代码...">
<kbd>⌘K</kbd>
</div> </div>
<div class="view-toggle"> <div class="view-controls">
<button class="toggle-btn active" data-view="grid"><i class="fas fa-th"></i></button> <button class="view-btn active" data-view="grid" title="网格视图">
<button class="toggle-btn" data-view="list"><i class="fas fa-list"></i></button> <i class="fas fa-grid-2"></i>
<span>网格</span>
</button>
<button class="view-btn" data-view="list" title="列表视图">
<i class="fas fa-list"></i>
<span>列表</span>
</button>
</div> </div>
</div> </div>
<!-- 筛选栏 -->
<div class="filter-bar"> <div class="filter-bar">
<div class="filter-group"> <div class="filter-tabs">
<span class="filter-label">分类:</span> <button class="filter-tab active" data-category="all">
<button class="filter-btn active" data-category="all">全部</button> <span>全部</span>
<button class="filter-btn" data-category="energy">能源</button> <span class="filter-count" id="count-all">0</span>
<button class="filter-btn" data-category="metal">金属</button> </button>
<button class="filter-btn" data-category="agriculture">农产品</button> <button class="filter-tab" data-category="watched">
<button class="filter-btn" data-category="finance">金融</button> <i class="fas fa-star"></i>
<span>自选</span>
<span class="filter-count" id="count-watched">0</span>
</button>
<button class="filter-tab" data-category="energy">
<i class="fas fa-fire"></i>
<span>能源</span>
</button>
<button class="filter-tab" data-category="metal">
<i class="fas fa-cube"></i>
<span>金属</span>
</button>
<button class="filter-tab" data-category="agriculture">
<i class="fas fa-seedling"></i>
<span>农产品</span>
</button>
<button class="filter-tab" data-category="finance">
<i class="fas fa-chart-pie"></i>
<span>金融</span>
</button>
</div> </div>
<div class="sort-group"> <div class="sort-select">
<span class="filter-label">排序:</span> <select id="sort-select">
<select id="sort-select" class="sort-select">
<option value="success_rate">成功率</option>
<option value="trend_score">趋势评分</option> <option value="trend_score">趋势评分</option>
<option value="success_rate">成功率</option>
<option value="change_pct">涨跌幅</option> <option value="change_pct">涨跌幅</option>
<option value="name">名称</option> <option value="name">名称</option>
</select> </select>
</div> </div>
</div> </div>
<!-- 统计信息 --> <!-- 统计概览 -->
<div class="stats-bar"> <div class="stats-overview">
<span>共 <strong id="total-count">8</strong> 个品种</span> <div class="stat-card">
<span class="stat-up"><i class="fas fa-arrow-up"></i> <strong id="up-count">7</strong></span> <div class="stat-icon"><i class="fas fa-layer-group"></i></div>
<span class="stat-down"><i class="fas fa-arrow-down"></i> <strong id="down-count">1</strong></span> <div class="stat-info">
<span class="stat-value" id="total-count">0</span>
<span class="stat-label">监控品种</span>
</div>
</div>
<div class="stat-card up">
<div class="stat-icon"><i class="fas fa-arrow-trend-up"></i></div>
<div class="stat-info">
<span class="stat-value" id="up-count">0</span>
<span class="stat-label">上涨趋势</span>
</div>
</div>
<div class="stat-card down">
<div class="stat-icon"><i class="fas fa-arrow-trend-down"></i></div>
<div class="stat-info">
<span class="stat-value" id="down-count">0</span>
<span class="stat-label">下跌趋势</span>
</div>
</div>
<div class="stat-card neutral">
<div class="stat-icon"><i class="fas fa-arrows-left-right"></i></div>
<div class="stat-info">
<span class="stat-value" id="neutral-count">0</span>
<span class="stat-label">震荡整理</span>
</div>
</div>
</div> </div>
<!-- 品种卡片网格 --> <!-- 品种卡片网格 -->
@ -95,180 +164,201 @@
<!-- 详情分析视图 --> <!-- 详情分析视图 -->
<div id="detail-view" class="view"> <div id="detail-view" class="view">
<!-- 返回按钮和品种标题 --> <!-- 返回按钮 -->
<button class="back-btn" id="back-btn">
<i class="fas fa-arrow-left"></i>
<span>返回</span>
</button>
<!-- 品种标题区 -->
<div class="detail-header"> <div class="detail-header">
<button class="back-btn" id="back-btn"> <div class="header-left">
<i class="fas fa-arrow-left"></i> 返回列表 <div class="symbol-info">
</button> <span class="symbol-name" id="detail-name">--</span>
<div class="detail-title-bar"> <span class="symbol-code" id="detail-symbol">--</span>
<div class="price-info">
<span class="current-price" id="detail-price">¥2,150</span>
<span class="price-change up" id="detail-change">
<i class="fas fa-arrow-up"></i> +196.00 (+10.06%)
</span>
</div> </div>
<div class="quote-info"> <div class="price-main">
<span class="price-value" id="detail-price">--</span>
<span class="price-change" id="detail-change">--</span>
<div class="price-levels">
<span class="level-tag resistance" id="detail-r1">R1: --</span>
<span class="level-tag support" id="detail-s1">S1: --</span>
</div>
</div>
</div>
<div class="header-right">
<div class="quote-grid">
<div class="quote-item"> <div class="quote-item">
<span class="quote-label">开盘</span> <span class="quote-label">开盘</span>
<span class="quote-value" id="detail-open">1,960</span> <span class="quote-value" id="detail-open">--</span>
</div> </div>
<div class="quote-item"> <div class="quote-item">
<span class="quote-label">最高</span> <span class="quote-label">最高</span>
<span class="quote-value up" id="detail-high">2,200</span> <span class="quote-value up" id="detail-high">--</span>
</div> </div>
<div class="quote-item"> <div class="quote-item">
<span class="quote-label">最低</span> <span class="quote-label">最低</span>
<span class="quote-value down" id="detail-low">1,940</span> <span class="quote-value down" id="detail-low">--</span>
</div> </div>
<div class="quote-item"> <div class="quote-item">
<span class="quote-label">持仓量</span> <span class="quote-label">成交量</span>
<span class="quote-value" id="detail-volume">45,600</span> <span class="quote-value" id="detail-volume">--</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 周期选择 --> <!-- 周期选择 -->
<div class="period-selector"> <div class="period-bar">
<i class="far fa-clock"></i> <span class="period-label"><i class="fas fa-clock"></i> 周期</span>
<span class="period-label">周期选择</span> <div class="period-btns">
<button class="period-btn" data-period="5">5分钟</button> <button class="period-btn" data-period="5">5M</button>
<button class="period-btn active" data-period="15">15分钟</button> <button class="period-btn active" data-period="15">15M</button>
<button class="period-btn" data-period="30">30分钟</button> <button class="period-btn" data-period="30">30M</button>
<button class="period-btn" data-period="60">60分钟</button> <button class="period-btn" data-period="60">1H</button>
</div>
</div> </div>
<!-- 图表和侧边栏 --> <!-- 图表和侧边栏 -->
<div class="detail-body"> <div class="detail-body">
<!-- K线图表区 -->
<div class="chart-section"> <div class="chart-section">
<div id="kline-chart" class="kline-chart"></div> <!-- K线图表区 -->
<div class="chart-container">
<div class="chart-header">
<span class="chart-title">K线图</span>
<div class="chart-legend">
<span class="legend-item"><span class="legend-dot ma5"></span>MA5</span>
<span class="legend-item"><span class="legend-dot ma10"></span>MA10</span>
<span class="legend-item"><span class="legend-dot ma20"></span>MA20</span>
</div>
</div>
<div id="kline-chart" class="kline-chart"></div>
</div>
<!-- 历史分析记录 -->
<div class="history-container">
<div class="history-header">
<i class="fas fa-clock-rotate-left"></i>
<span>历史分析记录</span>
</div>
<div class="history-list" id="history-list">
<!-- 动态生成 -->
</div>
</div>
</div> </div>
<!-- 右侧分析面板 --> <!-- 右侧分析面板 -->
<div class="analysis-panel"> <div class="analysis-sidebar">
<!-- 交易建议 --> <!-- AI交易建议 -->
<div class="panel-card trade-suggestion"> <div class="panel-card suggestion-card" id="suggestion-card">
<div class="panel-title"> <div class="panel-header">
<i class="fas fa-bullseye"></i> <i class="fas fa-robot"></i>
<span>交易建议</span> <span>AI 交易建议</span>
<span class="panel-header-action"><i class="fas fa-expand"></i></span>
</div> </div>
<div class="suggestion-box up" id="suggestion-box"> <div class="suggestion-content">
<div class="suggestion-label">操作建议</div> <div class="suggestion-badge" id="suggestion-badge">--</div>
<div class="suggestion-action" id="suggestion-action">逢低做多</div> <div class="suggestion-reason" id="suggestion-reason">--</div>
<div class="suggestion-reason" id="suggestion-reason">涨停突破，地缘风险推升运价</div>
</div> </div>
<div class="suggestion-details"> <div class="trade-params">
<div class="detail-row"> <div class="param-row">
<span class="detail-label">建议入场</span> <span class="param-label">入场</span>
<span class="detail-value" id="entry-price">2,137.1</span> <span class="param-value" id="entry-price">--</span>
</div> </div>
<div class="detail-row"> <div class="param-row">
<span class="detail-label">目标价位</span> <span class="param-label">目标</span>
<span class="detail-value up" id="target-price">2,236</span> <span class="param-value up" id="target-price">--</span>
</div> </div>
<div class="detail-row"> <div class="param-row">
<span class="detail-label">止损价位</span> <span class="param-label">止损</span>
<span class="detail-value down" id="stop-loss">2,107</span> <span class="param-value down" id="stop-loss">--</span>
</div> </div>
<div class="detail-row"> <div class="param-row">
<span class="detail-label">风险等级</span> <span class="param-label">风险</span>
<span class="detail-value" id="risk-level">低</span> <span class="param-value" id="risk-level">--</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 技术指标 --> <!-- 技术指标 -->
<div class="panel-card tech-indicators"> <div class="panel-card indicators-card">
<div class="panel-title"> <div class="panel-header">
<i class="fas fa-wave-square"></i> <i class="fas fa-wave-pulse"></i>
<span>技术指标</span> <span>技术指标</span>
</div> </div>
<div class="indicators-grid"> <div class="indicators-grid">
<div class="indicator-item"> <div class="indicator-cell">
<div class="indicator-name">MACD</div> <span class="indicator-label">MACD</span>
<div class="indicator-value up" id="macd-signal">金叉</div> <span class="indicator-value" id="macd-signal">--</span>
<div class="indicator-detail" id="macd-detail">DIF: -0.0147</div> <span class="indicator-detail" id="macd-detail">--</span>
</div> </div>
<div class="indicator-item"> <div class="indicator-cell">
<div class="indicator-name">RSI</div> <span class="indicator-label">RSI</span>
<div class="indicator-value" id="rsi-value">47</div> <span class="indicator-value" id="rsi-value">--</span>
<div class="indicator-detail" id="rsi-status">正常</div> <span class="indicator-detail" id="rsi-status">--</span>
</div> </div>
<div class="indicator-item"> <div class="indicator-cell">
<div class="indicator-name">布林带</div> <span class="indicator-label">BOLL</span>
<div class="indicator-value" id="boll-signal">中轨</div> <span class="indicator-value" id="boll-signal">--</span>
<div class="indicator-detail" id="boll-detail">区间: 2086-2215</div> <span class="indicator-detail" id="boll-detail">--</span>
</div> </div>
<div class="indicator-item"> <div class="indicator-cell">
<div class="indicator-name">KDJ</div> <span class="indicator-label">KDJ</span>
<div class="indicator-value" id="kdj-signal">中性</div> <span class="indicator-value" id="kdj-signal">--</span>
<div class="indicator-detail" id="kdj-detail">K: 71 D: 87</div> <span class="indicator-detail" id="kdj-detail">--</span>
</div> </div>
</div> </div>
</div> </div>
<!-- 关键点位 --> <!-- 关键点位 -->
<div class="panel-card key-levels"> <div class="panel-card levels-card">
<div class="panel-title"> <div class="panel-header">
<i class="fas fa-chart-bar"></i> <i class="fas fa-crosshairs"></i>
<span>关键点位</span> <span>关键点位</span>
</div> </div>
<div class="levels-section"> <div class="levels-container">
<div class="levels-header resistance">压力位</div> <div class="level-group resistance">
<div class="level-row" id="resistance-1"> <span class="level-group-label">压力</span>
<span>压力 1</span> <div class="level-item" id="resistance-1"><span>R1</span><span>--</span></div>
<span class="level-value down">2,200</span> <div class="level-item" id="resistance-2"><span>R2</span><span>--</span></div>
</div> <div class="level-item" id="resistance-3"><span>R3</span><span>--</span></div>
<div class="level-row" id="resistance-2">
<span>压力 2</span>
<span class="level-value down">2,300</span>
</div> </div>
<div class="level-row" id="resistance-3"> <div class="level-divider"></div>
<span>压力 3</span> <div class="level-group support">
<span class="level-value down">2,400</span> <span class="level-group-label">支撑</span>
<div class="level-item" id="support-1"><span>S1</span><span>--</span></div>
<div class="level-item" id="support-2"><span>S2</span><span>--</span></div>
<div class="level-item" id="support-3"><span>S3</span><span>--</span></div>
</div> </div>
</div> </div>
<div class="levels-section"> </div>
<div class="levels-header support">支撑位</div>
<div class="level-row" id="support-1"> <!-- 多周期趋势 -->
<span>支撑 1</span> <div class="panel-card trends-card">
<span class="level-value up">2,000</span> <div class="panel-header">
</div> <i class="fas fa-timeline"></i>
<div class="level-row" id="support-2"> <span>多周期趋势</span>
<span>支撑 2</span> </div>
<span class="level-value up">1,900</span> <div class="trends-container" id="period-trends">
</div> <!-- 动态生成 -->
<div class="level-row" id="support-3">
<span>支撑 3</span>
<span class="level-value up">1,800</span>
</div>
</div> </div>
</div> </div>
<!-- 多周期一致性 --> <!-- 趋势评分 -->
<div class="panel-card multi-period"> <div class="panel-card score-card">
<div class="panel-title"> <div class="panel-header">
<i class="fas fa-bolt"></i> <i class="fas fa-gauge-high"></i>
<span>多周期一致性</span> <span>趋势评分</span>
</div> </div>
<div class="period-consistency" id="period-consistency"> <div class="score-display">
<div class="consistency-row"> <div class="score-ring">
<span class="period-name">5分钟</span> <svg viewBox="0 0 100 100">
<span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span> <circle class="score-bg" cx="50" cy="50" r="45"/>
</div> <circle class="score-fill" id="score-fill" cx="50" cy="50" r="45"/>
<div class="consistency-row"> </svg>
<span class="period-name">15分钟</span> <span class="score-value" id="trend-score">--</span>
<span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
</div>
<div class="consistency-row">
<span class="period-name">30分钟</span>
<span class="consistency-badge up"><i class="fas fa-arrow-up"></i> 上涨</span>
</div>
<div class="consistency-row">
<span class="period-name">60分钟</span>
<span class="consistency-badge neutral"><i class="fas fa-minus"></i> 震荡</span>
</div> </div>
<div class="score-label">综合评分</div>
</div> </div>
</div> </div>
</div> </div>
@ -277,6 +367,32 @@
</main> </main>
</div> </div>
<!-- AI建议详情对话框 -->
<div class="modal-overlay" id="suggestion-modal">
<div class="modal-content">
<div class="modal-header">
<h3><i class="fas fa-robot"></i> AI 交易建议详情</h3>
<button class="modal-close" onclick="closeModal('suggestion-modal')"><i class="fas fa-xmark"></i></button>
</div>
<div class="modal-body" id="suggestion-modal-body">
<!-- 动态生成 -->
</div>
</div>
</div>
<!-- 历史记录详情对话框 -->
<div class="modal-overlay" id="history-modal">
<div class="modal-content">
<div class="modal-header">
<h3><i class="fas fa-clock-rotate-left"></i> 分析记录详情</h3>
<button class="modal-close" onclick="closeModal('history-modal')"><i class="fas fa-xmark"></i></button>
</div>
<div class="modal-body" id="history-modal-body">
<!-- 动态生成 -->
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="/static/futures_analysis.js"></script> <script src="/static/futures_analysis.js"></script>
</body> </body>

838
app/static/futures_analysis.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save