Dialog/ui-preview.html at main · Info-Tech-org/Dialog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Info-Tech 语镜 · UI 预览</title>
  <style>
    :root {
      --bg-base: #f8f9fa;
      --surface: #ffffff;
      --text-primary: #1a1a1a;
      --text-secondary: #6b7280;
      --accent: #2563eb;
      --risk: #dc2626;
      --success: #16a34a;
      --warning: #d97706;
      --glass-bg: rgba(255, 255, 255, 0.72);
      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --space-sm: 12px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 32px;
      --space-2xl: 48px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
      --sidebar-width: 220px;
      --topbar-height: 56px;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: var(--font-sans);
      font-size: 15px;
      background: linear-gradient(160deg, #f0f4f8 0%, #e8eef4 50%, #f5f3f8 100%);
      color: var(--text-primary);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }
    .app-shell { display: flex; min-height: 100vh; }
    .sidebar {
      width: var(--sidebar-width);
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      border-right: 1px solid rgba(0,0,0,0.08);
      padding: var(--space-lg) 0;
    }
    .sidebar-logo {
      padding: var(--space-md) var(--space-lg) var(--space-lg);
      font-weight: 700;
      font-size: 18px;
      color: #eae8e1;
      background: #2b2a24;
      margin: 0 var(--space-sm);
      border-radius: var(--radius-md);
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      margin: 0 var(--space-sm);
      border-radius: var(--radius-md);
      color: var(--text-secondary);
      text-decoration: none;
    }
    .nav-item.active { background: rgba(37, 99, 235, 0.1); color: var(--accent); font-weight: 600; }
    .main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .topbar {
      height: var(--topbar-height);
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      padding: 0 var(--space-xl);
      font-size: 20px;
      font-weight: 600;
    }
    .main { flex: 1; padding: var(--space-xl); }
    .kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-lg);
      margin-bottom: var(--space-2xl);
    }
    .kpi-card {
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(0,0,0,0.08);
    }
    .kpi-value { font-size: 32px; font-weight: 700; }
    .kpi-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
    .banner {
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
      border: 1px solid rgba(0,0,0,0.08);
    }
    .banner h2 { font-size: 16px; margin-bottom: var(--space-sm); }
    .banner p { font-size: 14px; color: var(--text-secondary); }
    @media (max-width: 768px) {
      .kpis { grid-template-columns: repeat(2, 1fr); }
    }
  </style>
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="sidebar-logo">1NF0TECH 语镜</div>
      <a href="#" class="nav-item active">仪表盘</a>
      <a href="#" class="nav-item">会话列表</a>
      <a href="#" class="nav-item">上传</a>
      <a href="#" class="nav-item">实时监听</a>
      <a href="#" class="nav-item">设备管理</a>
      <a href="#" class="nav-item">复盘流</a>
    </aside>
    <div class="main-wrap">
      <header class="topbar">仪表盘</header>
      <main class="main">
        <div class="kpis">
          <div class="kpi-card"><div class="kpi-value">0</div><div class="kpi-label">会话总数</div></div>
          <div class="kpi-card"><div class="kpi-value">0</div><div class="kpi-label">含风险会话</div></div>
          <div class="kpi-card"><div class="kpi-value" style="color:var(--risk)">0</div><div class="kpi-label">风险片段总数</div></div>
          <div class="kpi-card"><div class="kpi-value">0</div><div class="kpi-label">已绑定设备</div></div>
        </div>
        <div class="banner">
          <h2>静态 UI 预览</h2>
          <p>此页为 fork 后快速查看界面风格用，无后端、无交互。完整功能请运行前端开发服务并配置后端。</p>
        </div>
      </main>
    </div>
  </div>
</body>
</html>