From e076abe759271909584f12b8357916db7ff7211b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Fri, 22 May 2026 12:34:11 +0800 Subject: [PATCH 1/9] =?UTF-8?q?ui=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend-web/docs/浅红色ui修改.md | 310 ++++++++++++++++++ .../src/strategy-components/Header.tsx | 188 +++++++---- frontend-web/src/styles/globals.css | 5 +- 3 files changed, 433 insertions(+), 70 deletions(-) create mode 100644 frontend-web/docs/浅红色ui修改.md diff --git a/frontend-web/docs/浅红色ui修改.md b/frontend-web/docs/浅红色ui修改.md new file mode 100644 index 00000000..f2cdb310 --- /dev/null +++ b/frontend-web/docs/浅红色ui修改.md @@ -0,0 +1,310 @@ +# 浅色红色 UI 规范对齐 — 实施计划 + +> 依据:`H:\页面设计\UI设计规范\浅色红色设计规范-前端用.pdf`(共 104 页) +> 范围:**仅对齐 Light 模式(红色主题)**,**不改动图表部分** + +--- + +## ⚠️ 重要约束(必读) + +### 1. 主题切换必须保留 +项目使用 `next-themes` 实现 Light/Dark 切换: + +- `:root` → Light 模式(红色品牌,对应本规范) +- `.dark` → Dark 模式(蓝色品牌,**不在本次范围内**) +- 切换组件入口:`src/components/theme-provider.tsx` + +**所有改动只能动 `:root` 块和 light-only 选择器,禁止动 `.dark` 块和 `dark:` 前缀样式。** + +### 2. 不动图表 +本次跳过 `chart-1` ~ `chart-5` 颜色变量和所有图表组件。 + +### 3. 同一 token 双模式都用时如何改 +若变量同时被 light/dark 使用(如 `--radius`、按钮 `h-*`、`--primary-foreground`),改动后需在 Dark 模式下回归检查,确保没有破坏。 + +--- + +## 改动总目标对照 + +| 类别 | UI 规范 | 现状 | 差异 | +|------|--------|------|------| +| 主品牌红 | `#F5222D` | `#d92121` (`oklch(0.52 0.19 27)`) | 偏差 | +| 深色品牌 | `#CF1322` / `#A8071A` | 未使用 | 缺失 | +| 圆角-按钮 | 2px | 12px (`--radius: 0.75rem`) | 严重偏大 | +| 圆角-卡片 | 4px | 12px | 严重偏大 | +| 按钮高度(正常)| 32px | 36px (`h-9`) | 偏大 4px | +| 按钮高度(小)| 24px | 32px (`h-8`) | 偏大 8px | +| 输入框高度 | 32px | 36px (`h-9`) | 偏大 4px | +| 中文字体 | NotoSansSChinese | 系统字体 | 未引入 | +| 数字字体 | D-DIN | 系统字体 | 未引入 | +| 间距体系 | 8px 基准(4/8/12/16/24/32/40/56)| Tailwind 默认 | 基本一致 | + +--- + +## 分步实施计划 + +### Step 1 — 颜色变量对齐(Light 模式) + +**文件**:`src/styles/globals.css` +**只动 `:root` 块(第 242-277 行),保持 `.dark` 块原样** + +#### 1.1 主色映射 + +| 角色 | 规范值 | 用途 | +|------|--------|------| +| 主色 | `#F5222D` | `--primary`、`--ring`、`--sidebar-primary` | +| 主色 hover | `#CF1322` | 按钮 hover 状态(新增辅助变量) | +| 主色 active | `#A8071A` | 按钮按下状态 | +| 主色淡 1 | `#FEEDED` | `--accent`(极淡红,背景) | +| 主色淡 2 | `#FDDADC` | hover bg、tag 背景 | +| 主色淡 3 | `#FCB5B9` | 浅边框、selected 态 | +| 危险色 | `#F5222D` | `--destructive` | + +#### 1.2 新增工程变量(建议加在 `:root` 内) + +```css +/* 红色主题阶梯色(规范色板)*/ +--brand-50: #FEFAFA; +--brand-100: #FEF6F6; +--brand-200: #FEEDED; +--brand-300: #FDDADC; +--brand-400: #FCB5B9; +--brand-500: #FA9196; +--brand-600: #F86C73; +--brand-700: #F74750; +--brand-800: #F5222D; /* ← 主色 */ +--brand-900: #CF1322; /* ← hover */ +--brand-950: #A8071A; /* ← active */ + +/* 辅色(规范)*/ +--accent-orange: #FF9900; +--accent-green: #2FD69A; +--accent-cyan: #45C3F3; +``` + +#### 1.3 `--workspace-brand` 同步 + +`:root` 内:`--workspace-brand: #F5222D;`(从 `#d92121` 改) +`.dark` 内:**不动**(保持 `#3b82f6` 蓝色) + +#### 1.4 验收 +- 切到 Light 模式:所有按钮、链接、选中态使用规范红 +- 切到 Dark 模式:依然是原蓝色品牌(无变化) + +--- + +### Step 2 — 圆角规范化 + +**文件**:`src/styles/globals.css`(`--radius` 是全局变量,light/dark 共用) + +#### 2.1 改动方案(推荐) + +按规范:按钮 2px、卡片/页面框 4px。但当前许多组件依赖 `rounded-md` / `rounded-lg`,全局把 `--radius` 改成 4px 会引起视觉跳变。 + +**采用细粒度策略:** + +```css +:root { + --radius: 0.25rem; /* 4px → 卡片/页面框 */ +} + +@theme inline { + --radius-sm: 2px; /* 按钮、tag */ + --radius-md: calc(var(--radius) - 1px); /* 3px → 输入框 */ + --radius-lg: var(--radius); /* 4px → 卡片 */ + --radius-xl: calc(var(--radius) + 4px); /* 8px → 弹窗 */ + --radius-2xl: calc(var(--radius) + 8px); /* 12px → 大卡片 */ +} +``` + +#### 2.2 例外保留(设计感样式) +以下组件**圆角不改**,保持设计稿原貌: +- `.workspace-user-bubble`(聊天气泡,圆角 `1.6rem 1.6rem 0.5rem 1.6rem`) +- `.workspace-assistant-card`(圆角 `1.75rem`) +- `.gemini-gradient-border`(圆角 `1.5rem`) + +#### 2.3 验收 +- 普通按钮变为近直角(2px) +- 卡片维持温和圆角(4px) +- 聊天气泡、AI 卡片不变形 + +--- + +### Step 3 — 按钮组件尺寸对齐 + +**文件**:`src/components/ui/button.tsx` + +#### 3.1 改 size 变体(规范:小 24px / 正常 32px) + +| size | 规范 | 当前 | 改后 | +|------|------|------|------| +| `sm` | 24px | h-8 (32px) | `h-6 px-2 text-xs` | +| `default` | 32px | h-9 (36px) | `h-8 px-3 text-sm` | +| `lg` | — | h-10 (40px) | 保留 `h-10`(用于 Banner/登录场景)| + +#### 3.2 圆角 +- 默认按钮:`rounded-sm`(2px) + +#### 3.3 主按钮配色 +- bg:`bg-primary` +- hover:`hover:bg-[var(--brand-900)]`(深红 `#CF1322`) +- active:`active:bg-[var(--brand-950)]`(更深 `#A8071A`) +- disabled:`disabled:opacity-50`(保留) + +#### 3.4 次要按钮 / 文本按钮 +- 次要按钮(`outline` variant):边框 `border-primary`,文字 `text-primary` +- 文本按钮(`ghost` variant):仅文字色 `text-primary`,hover 背景 `--brand-200` + +#### 3.5 验收 +检查所有调用 ` - {/* 右侧 - 用户信息和通知 */} -
- {/* 主题切换按钮 */} - + - {/* 通知 */} - - - {/* 分隔线 */} -
- - {/* 用户信息 */} - -
- + +
+
+

+ 张策略 +

+

+ 策略分析师 +

+
+ + + + ); }; diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css index e21e851a..7d67a7b9 100644 --- a/frontend-web/src/styles/globals.css +++ b/frontend-web/src/styles/globals.css @@ -240,8 +240,11 @@ } :root { - --workspace-brand: #d92121; + --workspace-brand: #f5222d; --workspace-brand-foreground: #ffffff; + --brand-200: #feeded; + --brand-900: #cf1322; + --brand-950: #a8071a; --radius: 0.75rem; --background: oklch(1 0 0); --foreground: oklch(0.22 0.02 25); From 19660e49d288a7c0519c94a47177e178b5f6b426 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Fri, 22 May 2026 14:56:59 +0800 Subject: [PATCH 2/9] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=99=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cankaoyangshi/.env.example | 9 - cankaoyangshi/README.md | 20 - cankaoyangshi/index.html | 13 - cankaoyangshi/metadata.json | 6 - cankaoyangshi/package.json | 35 - cankaoyangshi/src/App.tsx | 238 -- cankaoyangshi/src/index.css | 71 - cankaoyangshi/src/main.tsx | 10 - cankaoyangshi/tsconfig.json | 26 - cankaoyangshi/vite.config.ts | 22 - frontend-web/src/components/page-sidebar.tsx | 6 + frontend-web/src/contexts/ThemeContext.tsx | 8 +- frontend-web/src/pages/PageRoutes.tsx | 2 + frontend-web/src/pages/RoundtableRoutes.tsx | 16 + .../components/HighFidelityReport.tsx | 498 ++++ frontend-web/src/roundtable-planning/index.ts | 2 + .../pages/RoundtablePlanningPage.tsx | 2045 +++++++++++++++++ .../styles/roundtable-planning.css | 217 ++ 18 files changed, 2791 insertions(+), 453 deletions(-) delete mode 100644 cankaoyangshi/.env.example delete mode 100644 cankaoyangshi/README.md delete mode 100644 cankaoyangshi/index.html delete mode 100644 cankaoyangshi/metadata.json delete mode 100644 cankaoyangshi/package.json delete mode 100644 cankaoyangshi/src/App.tsx delete mode 100644 cankaoyangshi/src/index.css delete mode 100644 cankaoyangshi/src/main.tsx delete mode 100644 cankaoyangshi/tsconfig.json delete mode 100644 cankaoyangshi/vite.config.ts create mode 100644 frontend-web/src/pages/RoundtableRoutes.tsx create mode 100644 frontend-web/src/roundtable-planning/components/HighFidelityReport.tsx create mode 100644 frontend-web/src/roundtable-planning/index.ts create mode 100644 frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx create mode 100644 frontend-web/src/roundtable-planning/styles/roundtable-planning.css diff --git a/cankaoyangshi/.env.example b/cankaoyangshi/.env.example deleted file mode 100644 index 7a550fe7..00000000 --- a/cankaoyangshi/.env.example +++ /dev/null @@ -1,9 +0,0 @@ -# GEMINI_API_KEY: Required for Gemini AI API calls. -# AI Studio automatically injects this at runtime from user secrets. -# Users configure this via the Secrets panel in the AI Studio UI. -GEMINI_API_KEY="MY_GEMINI_API_KEY" - -# APP_URL: The URL where this applet is hosted. -# AI Studio automatically injects this at runtime with the Cloud Run service URL. -# Used for self-referential links, OAuth callbacks, and API endpoints. -APP_URL="MY_APP_URL" diff --git a/cankaoyangshi/README.md b/cankaoyangshi/README.md deleted file mode 100644 index 34585da4..00000000 --- a/cankaoyangshi/README.md +++ /dev/null @@ -1,20 +0,0 @@ -
-GHBanner -
- -# Run and deploy your AI Studio app - -This contains everything you need to run your app locally. - -View your app in AI Studio: https://ai.studio/apps/75261c35-a558-4ef8-9501-e8b7f9c98bfb - -## Run Locally - -**Prerequisites:** Node.js - - -1. Install dependencies: - `npm install` -2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key -3. Run the app: - `npm run dev` diff --git a/cankaoyangshi/index.html b/cankaoyangshi/index.html deleted file mode 100644 index 21dfe690..00000000 --- a/cankaoyangshi/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - My Google AI Studio App - - -
- - - - diff --git a/cankaoyangshi/metadata.json b/cankaoyangshi/metadata.json deleted file mode 100644 index 19d0a11c..00000000 --- a/cankaoyangshi/metadata.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Gemini Style Assistant", - "description": "A clean, modern AI assistant interface inspired by Google Gemini with centered search, suggestion pills, and a minimalist sidebar.", - "requestFramePermissions": [], - "majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"] -} diff --git a/cankaoyangshi/package.json b/cankaoyangshi/package.json deleted file mode 100644 index 9748aee3..00000000 --- a/cankaoyangshi/package.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "name": "react-example", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite --port=3000 --host=0.0.0.0", - "build": "vite build", - "preview": "vite preview", - "clean": "rm -rf dist server.js", - "lint": "tsc --noEmit" - }, - "dependencies": { - "@google/genai": "^1.29.0", - "@tailwindcss/vite": "^4.1.14", - "@vitejs/plugin-react": "^5.0.4", - "lucide-react": "^0.546.0", - "react": "^19.0.1", - "react-dom": "^19.0.1", - "vite": "^6.2.3", - "express": "^4.21.2", - "dotenv": "^17.2.3", - "motion": "^12.23.24" - }, - "devDependencies": { - "@types/node": "^22.14.0", - "autoprefixer": "^10.4.21", - "esbuild": "^0.25.0", - "tailwindcss": "^4.1.14", - "tsx": "^4.21.0", - "typescript": "~5.8.2", - "vite": "^6.2.3", - "@types/express": "^4.17.21" - } -} diff --git a/cankaoyangshi/src/App.tsx b/cankaoyangshi/src/App.tsx deleted file mode 100644 index 1cd7026f..00000000 --- a/cankaoyangshi/src/App.tsx +++ /dev/null @@ -1,238 +0,0 @@ -/** - * @license - * SPDX-License-Identifier: Apache-2.0 - */ - -import { useState } from 'react'; -import { motion, AnimatePresence } from 'motion/react'; -import { - MessageSquare, - Bot, - Wrench, - Brain, - ListChecks, - Settings, - Menu, - Mic, - Plus, - Sparkles, - ArrowRight, - User, - History, - LayoutGrid, - Languages, - Code2, - Music, - Database, - Search -} from 'lucide-react'; - -export default function App() { - const [sidebarOpen, setSidebarOpen] = useState(true); - - const navItems = [ - { icon: MessageSquare, label: '对话', active: true }, - { icon: Bot, label: '智能体' }, - { icon: Wrench, label: '技能' }, - { icon: Brain, label: '记忆' }, - { icon: ListChecks, label: '任务管理' }, - ]; - - const recentChats = [ - 'CM助手初次问候交谈', - 'Untitled', - 'Untitled', - 'Untitled', - '帮我写一个500字的文案', - '帮我生成一个写论文的实例', - ]; - - const suggestions = [ - { icon: Code2, label: 'Build an Android app', color: 'text-green-600', bg: 'bg-green-50' }, - { icon: Languages, label: 'Convert text to speech', color: 'text-blue-600', bg: 'bg-blue-50' }, - { icon: Music, label: 'Generate music', color: 'text-purple-600', bg: 'bg-purple-50' }, - { icon: Database, label: 'Add database and auth', color: 'text-cyan-600', bg: 'bg-cyan-50' }, - ]; - - return ( -
- {/* Sidebar */} - -
-
- - 新对话 -
-
- - - -
-
- - 设置和更多 -
-
-
- - {/* Main Content */} -
- {/* Top bar */} -
- - -
- -
- -
-
-
- - {/* Center Canvas */} -
- -
- -
-

- Build your ideas with Gemini -

- -
- - {/* Search/Input Area */} - -
-
-