Add Frontend 增加一层渐变背景色

2026-05-27 10:30:35 +08:00
parent 30c7bda389
commit 3674f9171e
7 changed files with 137 additions and 178 deletions
--- a/README.md
+++ b/README.md
@@ -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
--- 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<string, string> = {
+  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 (
    <Button
@@ -13,13 +25,10 @@ export const ThemeToggle: React.FC = () => {
      variant="outline"
      size="icon-lg"
      className="rounded-xl border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground"
-      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      aria-label={`切换到${NEXT_LABELS[themeMode]}`}
+      title={`切换到${NEXT_LABELS[themeMode]}`}
    >
-      {isDark ? (
-        <SunMedium />
-      ) : (
-        <MoonStar />
-      )}
+      <Icon />
    </Button>
  );
 };
--- 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<ThemeMode, string> = {
+  dark:  '#0a0a12',
+  dim:   '#1e1b2e',
+  light: '#ffffff',
+};
+
 interface ThemeProviderProps {
  children: ReactNode;
 }

 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  const [isDark, setIsDark] = useState<boolean>(true);
-  const theme = isDark ? darkTheme : lightTheme;
+  const [themeMode, setThemeMode] = useState<ThemeMode>(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 (
-    <ThemeContext.Provider value={{ isDark, theme, toggleTheme }}>
+    <ThemeContext.Provider value={{ isDark, themeMode, theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
--- 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;
 }
--- a/frontend/src/pages/Perception/EventFeed.tsx
+++ b/frontend/src/pages/Perception/EventFeed.tsx
@@ -64,7 +64,7 @@ export const EventFeed: React.FC<EventFeedProps> = ({
              borderRadius: 10,
              position: 'relative',
              overflow: 'hidden',
-              boxShadow: !isDark ? '0 2px 6px rgba(226,0,116,0.05)' : 'none',
+              boxShadow: 'none',
            }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: color }} />
              <div className="mono" style={{ fontSize: 10, color: theme.text3, letterSpacing: '0.5px' }}>{label}</div>
@@ -118,13 +118,13 @@ export const EventFeed: React.FC<EventFeedProps> = ({
              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 */}
--- 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);
 }

--- 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',