Add Frontend 增加一层渐变背景色

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

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 ? (
+      <Icon />
-        <SunMedium />
-      ) : (
-        <MoonStar />
-      )}
     </Button>
   );
 };

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 [themeMode, setThemeMode] = useState<ThemeMode>(getInitialMode);
-  const theme = isDark ? darkTheme : lightTheme;
+  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);
+    const root = document.documentElement;
-    document.body.classList.toggle('dark-mode', isDark);
+    root.classList.remove('dark', 'dim');
+    if (themeMode !== 'light') root.classList.add(themeMode);
 
-    if (isDark) {
+    document.body.style.background = BG_MAP[themeMode];
-      document.body.style.background = '#0a0a12';
+
-      return;
+    try {
+      localStorage.setItem(STORAGE_KEY, themeMode);
+    } catch {
+      // ignore
     }
-
+  }, [themeMode]);
-    document.body.style.background = '#ffffff';
-  }, [isDark]);
 
   return (
-    <ThemeContext.Provider value={{ isDark, theme, toggleTheme }}>
+    <ThemeContext.Provider value={{ isDark, themeMode, theme, toggleTheme }}>
       {children}
     </ThemeContext.Provider>
   );

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;
 }

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 */}

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);
 }
 

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