From 3674f9171e73a3f2d69fca7ad1a4391ff9670d14 Mon Sep 17 00:00:00 2001 From: wangwei Date: Wed, 27 May 2026 10:30:35 +0800 Subject: [PATCH] =?UTF-8?q?Add=20Frontend=20=E5=A2=9E=E5=8A=A0=E4=B8=80?= =?UTF-8?q?=E5=B1=82=E6=B8=90=E5=8F=98=E8=83=8C=E6=99=AF=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 149 ------------------ .../src/components/common/ThemeToggle.tsx | 25 ++- frontend/src/contexts/ThemeContext.tsx | 50 ++++-- frontend/src/contexts/theme-context.ts | 3 +- frontend/src/pages/Perception/EventFeed.tsx | 6 +- frontend/src/styles/globals.css | 61 ++++++- frontend/src/types/theme.ts | 21 ++- 7 files changed, 137 insertions(+), 178 deletions(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index 184e0f7..0000000 --- a/README.md +++ /dev/null @@ -1,149 +0,0 @@ -# AI+合规智能中枢 - 法律法规文档解析入库 - -面向车企与工厂的合规智能平台，实现法规文档的解析、分块、嵌入和向量存储。 - -## MVP功能 - -本次实现的核心功能（最小可用版本）： - -- ✅ PDF/DOC/DOCX 文档解析（阿里云文档智能） -- ✅ 基于阿里云 `vector_chunks` 的统一切片 -- ✅ OpenAI 兼容 embedding（`text-embedding-v3`，1024维） -- ✅ Milvus 向量数据库存储与 dense-only 检索 -- ✅ FastAPI接口封装 - -## 项目结构 - -```text -AIRegulation-DocAnalysis-Demo/ -├── backend/ -│ ├── app/ -│ │ ├── api/ # FastAPI 接口层 -│ │ ├── application/ # 用例编排层 -│ │ ├── domain/ # 领域模型与稳定端口 -│ │ ├── infrastructure/ # MinIO / Milvus / 阿里云 / embedding / session 适配 -│ │ ├── shared/ # 组合根、配置无关 wiring 与横切支撑 -│ │ ├── config/ # 配置与日志 -│ │ ├── services/ # 迁移期 legacy façade，不是新增业务逻辑默认落点 -│ │ ├── workflows/ # 迁移期 legacy workflow，不是新增业务逻辑默认落点 -│ │ └── workers/ -│ ├── requirements.txt -│ └── main.py -├── frontend/ # Vite React 前端 -├── tests/ # 根级测试，导入 backend/app -├── docker/ -│ └── docker-compose.yml -├── pyproject.toml -└── .env.example -``` - -## 快速开始 - -### 1. 安装依赖 - -```bash -./dev.sh setup -``` - -### 2. 启动Milvus向量数据库 - -```bash -cd docker -docker-compose up -d -``` - -等待Milvus启动完成（约30秒）： -```bash -docker-compose logs -f milvus -``` - -### 3. 启动API服务 - -```bash -./dev.sh start api --foreground -``` - -访问API文档：http://localhost:8000/docs - -## API接口 - -## Backend Architecture - -- Backend 架构规范文档：`docs/architecture/backend-project-architecture.md` -- Backend 迁移 RFC：`docs/rfc/backend-api-parsing-embedding-migration-requirements.md` -- 后续 backend 新增功能、重构和技术替换必须同时满足 RFC 与架构文档。 -- `backend/app/services/*` 与 `backend/app/workflows/*` 当前属于迁移期遗留目录，除迁移或兼容修复外，不应继续承载新的业务编排。 - -### 上传文档 - -```bash -curl -X POST http://localhost:8000/api/v1/documents/upload \ - -F "file=@your_regulation.pdf" \ - -F "doc_name=GB 7258-2017" \ - -F "regulation_type=车辆安全" -``` - -### 检索法规 - -```bash -curl -X POST http://localhost:8000/api/v1/knowledge/search \ - -H "Content-Type: application/json" \ - -d '{"query": "机动车安全技术要求", "top_k": 10}' -``` - -## 技术栈 - -| 类别 | 技术 | -|------|------| -| 文档解析 | 阿里云文档智能 + python-docx | -| 分块策略 | 阿里云 `vector_chunks` | -| 嵌入模型 | `text-embedding-v3`（1024维 Dense） | -| 向量数据库 | Milvus 2.4（本地Docker部署） | -| 检索方式 | Dense-only 检索 | -| API框架 | FastAPI | - -## 配置 - -创建 `.env` 文件（参考 `.env.example`）： - -```env -# Milvus配置 -MILVUS_HOST=localhost -MILVUS_PORT=19530 - -# 阿里云文档解析 -ALIBABA_ACCESS_KEY_ID=your_aliyun_access_key_id -ALIBABA_ACCESS_KEY_SECRET=your_aliyun_access_key_secret -PARSER_BACKEND=aliyun -CHUNK_BACKEND=aliyun - -# embedding 配置 -EMBEDDING_MODEL=text-embedding-v3 -EMBEDDING_DIM=1024 -EMBEDDING_API_KEY=your_embedding_api_key_here - -# 分块配置 -CHUNK_SIZE=512 -``` - -## 后续迭代（不在本次MVP范围） - -- LLM摘要生成（当前上传主链路默认不生成） -- 文档上传UI界面 -- 混合检索问答功能 -- 法规变更监控与自动更新 - -## 解析产物 - -上传成功后，系统会把阿里云解析的中间结果持久化到 MinIO： - -- `artifacts/{doc_id}/layouts.json` -- `artifacts/{doc_id}/structure_nodes.json` -- `artifacts/{doc_id}/semantic_blocks.json` -- `artifacts/{doc_id}/vector_chunks.json` - -当前默认 Milvus collection 为 `regulations_dense_1024_v2`。 - -## 许可证 - -MIT License diff --git a/frontend/src/components/common/ThemeToggle.tsx b/frontend/src/components/common/ThemeToggle.tsx index 90f7d2d..affd997 100644 --- a/frontend/src/components/common/ThemeToggle.tsx +++ b/frontend/src/components/common/ThemeToggle.tsx @@ -1,11 +1,23 @@ import React from 'react'; -import { MoonStar, SunMedium } from 'lucide-react'; +import { Moon, Sun, SunMedium } from 'lucide-react'; import { useTheme } from '../../contexts'; import { Button } from '../shadcn/ui/button'; +const NEXT_LABELS: Record = { + dark: '过渡色模式', + dim: '亮色模式', + light: '暗色模式', +}; + export const ThemeToggle: React.FC = () => { - const { isDark, toggleTheme } = useTheme(); + const { themeMode, toggleTheme } = useTheme(); + + // Shows the NEXT state's icon: dark→SunMedium(dim next), dim→Sun(light next), light→Moon(dark next) + const Icon = + themeMode === 'dark' ? SunMedium : + themeMode === 'dim' ? Sun : + Moon; return ( ); }; diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx index b1e558d..3f4c46f 100644 --- a/frontend/src/contexts/ThemeContext.tsx +++ b/frontend/src/contexts/ThemeContext.tsx @@ -1,34 +1,58 @@ import React, { useEffect, useState, type ReactNode } from 'react'; -import { darkTheme, lightTheme } from '../types/theme'; +import { darkTheme, dimTheme, lightTheme, type ThemeMode } from '../types/theme'; import { ThemeContext } from './theme-context'; +const STORAGE_KEY = 'app-theme-mode'; + +function getInitialMode(): ThemeMode { + try { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === 'dark' || stored === 'dim' || stored === 'light') return stored; + } catch { + // ignore + } + return 'dark'; +} + +const THEME_MAP = { dark: darkTheme, dim: dimTheme, light: lightTheme }; +const BG_MAP: Record = { + dark: '#0a0a12', + dim: '#1e1b2e', + light: '#ffffff', +}; + interface ThemeProviderProps { children: ReactNode; } export const ThemeProvider: React.FC = ({ children }) => { - const [isDark, setIsDark] = useState(true); - const theme = isDark ? darkTheme : lightTheme; + const [themeMode, setThemeMode] = useState(getInitialMode); + const theme = THEME_MAP[themeMode]; + const isDark = themeMode === 'dark'; const toggleTheme = () => { - setIsDark((prev) => !prev); + setThemeMode((prev) => + prev === 'dark' ? 'dim' : prev === 'dim' ? 'light' : 'dark' + ); }; useEffect(() => { - document.documentElement.classList.toggle('dark', isDark); - document.body.classList.toggle('dark-mode', isDark); + const root = document.documentElement; + root.classList.remove('dark', 'dim'); + if (themeMode !== 'light') root.classList.add(themeMode); - if (isDark) { - document.body.style.background = '#0a0a12'; - return; + document.body.style.background = BG_MAP[themeMode]; + + try { + localStorage.setItem(STORAGE_KEY, themeMode); + } catch { + // ignore } - - document.body.style.background = '#ffffff'; - }, [isDark]); + }, [themeMode]); return ( - + {children} ); diff --git a/frontend/src/contexts/theme-context.ts b/frontend/src/contexts/theme-context.ts index 9f6d796..47a89e2 100644 --- a/frontend/src/contexts/theme-context.ts +++ b/frontend/src/contexts/theme-context.ts @@ -1,9 +1,10 @@ import { createContext } from 'react'; -import type { ThemeColors } from '../types/theme'; +import type { ThemeColors, ThemeMode } from '../types/theme'; export interface ThemeContextValue { isDark: boolean; + themeMode: ThemeMode; theme: ThemeColors; toggleTheme: () => void; } diff --git a/frontend/src/pages/Perception/EventFeed.tsx b/frontend/src/pages/Perception/EventFeed.tsx index 7cbc3c5..fae08f1 100644 --- a/frontend/src/pages/Perception/EventFeed.tsx +++ b/frontend/src/pages/Perception/EventFeed.tsx @@ -64,7 +64,7 @@ export const EventFeed: React.FC = ({ borderRadius: 10, position: 'relative', overflow: 'hidden', - boxShadow: !isDark ? '0 2px 6px rgba(226,0,116,0.05)' : 'none', + boxShadow: 'none', }}>
{label}
@@ -118,13 +118,13 @@ export const EventFeed: React.FC = ({ onClick={() => onSelect(evt.id)} style={{ padding: '14px 16px', - background: isSelected ? (isDark ? '#1e1e35' : '#fdf0f7') : theme.bgCard, + background: isSelected ? theme.bgHover : theme.bgCard, borderRadius: 10, border: `1px solid ${isSelected ? theme.accent : theme.border}`, borderLeft: `4px solid ${cfg.color}`, cursor: 'pointer', transition: 'all 0.15s ease', - boxShadow: isSelected ? `0 0 0 1px ${theme.accent}40` : (!isDark ? '0 1px 4px rgba(0,0,0,0.04)' : 'none'), + boxShadow: isSelected ? `0 0 0 1px ${theme.accent}40` : 'none', }} > {/* Source + Status row */} diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index 161144e..c052cf9 100644 --- a/frontend/src/styles/globals.css +++ b/frontend/src/styles/globals.css @@ -102,6 +102,49 @@ --sidebar-ring: rgba(226, 0, 116, 0.45); } +/* Dim mode — Indigo Dusk: deep navy-purple mid-tone between dark and light */ +.dim { + --t-bg: #1e1b2e; + --t-bg-card: #252237; + --t-bg-hover: #2d2945; + --t-bg-elevated: #292541; + --t-border: #3a3650; + --t-border-light: #504c6e; + --t-text: #f0eeff; + --t-text2: #b8b4d8; + --t-text3: #7a7698; + --t-green: #00c4a0; + --t-orange: #ff8820; + --t-accent-glow: rgba(226,0,116,0.14); + --t-pattern-opacity: 0.04; + --background: var(--t-bg); + --foreground: var(--t-text); + --card: var(--t-bg-card); + --card-foreground: var(--t-text); + --popover: var(--t-bg-card); + --popover-foreground: var(--t-text); + --primary: #e20074; + --primary-foreground: #ffffff; + --secondary: var(--t-bg-hover); + --secondary-foreground: var(--t-text); + --muted: var(--t-bg-hover); + --muted-foreground: var(--t-text3); + --accent: rgba(226, 0, 116, 0.12); + --accent-foreground: #f04090; + --destructive: #ff4444; + --border: var(--t-border); + --input: var(--t-border-light); + --ring: rgba(226, 0, 116, 0.40); + --sidebar: var(--t-bg-card); + --sidebar-foreground: var(--t-text); + --sidebar-primary: #e20074; + --sidebar-primary-foreground: #ffffff; + --sidebar-accent: var(--t-bg-hover); + --sidebar-accent-foreground: var(--t-text); + --sidebar-border: var(--t-border); + --sidebar-ring: rgba(226, 0, 116, 0.40); +} + /* Base styles */ * { box-sizing: border-box; @@ -130,6 +173,13 @@ body.dark-mode { background: #0a0a12; } +/* Dim mode body */ +.dim body, +body.dim-mode { + color: #f0eeff; + background: #1e1b2e; +} + /* Selection */ ::selection { background: rgba(226, 0, 116, 0.3); @@ -200,17 +250,22 @@ button, input { background: linear-gradient(180deg, #12121f, #0a0a12); } +/* Card gradient for dim mode */ +.dim .t-card-gradient { + background: linear-gradient(180deg, #e8e5f4, #f0eef8); +} + /* Card gradient for light mode */ -:not(.dark) .t-card-gradient { +:not(.dark):not(.dim) .t-card-gradient { background: linear-gradient(180deg, #ffffff, #fafafa); } /* Light mode shadow for cards */ -:not(.dark) .t-card-shadow { +:not(.dark):not(.dim) .t-card-shadow { box-shadow: 0 2px 8px rgba(226,0,116,0.04); } -:not(.dark) .t-card-shadow-lg { +:not(.dark):not(.dim) .t-card-shadow-lg { box-shadow: 0 4px 16px rgba(226,0,116,0.08); } diff --git a/frontend/src/types/theme.ts b/frontend/src/types/theme.ts index 7aa698c..be683f7 100644 --- a/frontend/src/types/theme.ts +++ b/frontend/src/types/theme.ts @@ -1,5 +1,5 @@ // Theme types -export type ThemeMode = 'dark' | 'light'; +export type ThemeMode = 'dark' | 'dim' | 'light'; export interface ThemeColors { bg: string; @@ -37,6 +37,25 @@ export const darkTheme: ThemeColors = { gradientAccent: 'linear-gradient(135deg, #e20074, #be0060)', }; +// Dim theme — Indigo Dusk: deep navy-purple mid-tone, clearly between dark and light +export const dimTheme: ThemeColors = { + bg: '#1e1b2e', + bgCard: '#252237', + bgHover: '#2d2945', + bgElevated: '#292541', + border: '#3a3650', + borderLight: '#504c6e', + text: '#f0eeff', + text2: '#b8b4d8', + text3: '#7a7698', + accent: '#e20074', + accentDark: '#be0060', + accentLight: '#f04090', + green: '#00c4a0', + orange: '#ff8820', + gradientAccent: 'linear-gradient(135deg, #e20074, #be0060)', +}; + export const lightTheme: ThemeColors = { bg: '#ffffff', bgCard: '#ffffff',