refactor: 系统设置外观区精简——移除主题色/字体大小/界面密度/圆角风格，仅保留主题模式；修复 /login 与未知路径重定向死循环
This commit is contained in:
Logan.Li committed
1 parent
9103b13510
commit
f006464116
2 files changed
+3
-102
No files matched your search
@@ -114,6 +114,8 @@ export default function App() {
|
||||
// URL → 页面状态（直接输入/刷新/分享链接时恢复）
|
||||
useEffect(() => {
|
||||
const path = location.pathname.replace(/\/+$/, '') || '/';
|
||||
// 登录页不参与模块路由（否则与未登录跳转互相重定向形成死循环）
|
||||
if (path === '/login') return;
|
||||
const editorMatch = path.match(/^\/pipelines\/(\d+)/);
|
||||
if (editorMatch) {
|
||||
setActiveModule('pipelines');
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Palette, Monitor, Moon, Sun,
|
||||
Save, RotateCcw, CheckCircle2, Globe, Bell, Loader2, ExternalLink, ChevronDown, ChevronRight
|
||||
Save, RotateCcw, Globe, Bell, Loader2, ExternalLink, ChevronDown, ChevronRight
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
@@ -11,11 +11,6 @@ import WebhookManager from '@/components/settings/WebhookManager';
|
||||
|
||||
interface ThemeConfig {
|
||||
mode: 'light' | 'dark' | 'system';
|
||||
primaryColor: string;
|
||||
fontSize: 'small' | 'medium' | 'large';
|
||||
density: 'compact' | 'comfortable' | 'spacious';
|
||||
sidebarStyle: 'collapsed' | 'icons' | 'full';
|
||||
borderRadius: 'sharp' | 'soft' | 'round';
|
||||
}
|
||||
|
||||
interface NotificationConfig {
|
||||
@@ -28,11 +23,6 @@ interface NotificationConfig {
|
||||
|
||||
const defaultTheme: ThemeConfig = {
|
||||
mode: 'light',
|
||||
primaryColor: '#0969da',
|
||||
fontSize: 'medium',
|
||||
density: 'comfortable',
|
||||
sidebarStyle: 'full',
|
||||
borderRadius: 'soft',
|
||||
};
|
||||
|
||||
const defaultNotifications: NotificationConfig = {
|
||||
@@ -55,15 +45,6 @@ function safeParse<T extends object>(raw: unknown, fallback: T): T {
|
||||
}
|
||||
}
|
||||
|
||||
const colorOptions = [
|
||||
{ name: '蓝色', value: '#0969da', class: 'bg-[#0969da]' },
|
||||
{ name: '绿色', value: '#1a7f37', class: 'bg-[#1a7f37]' },
|
||||
{ name: '紫色', value: '#8250df', class: 'bg-[#8250df]' },
|
||||
{ name: '橙色', value: '#bc4c00', class: 'bg-[#bc4c00]' },
|
||||
{ name: '红色', value: '#cf222e', class: 'bg-[#cf222e]' },
|
||||
{ name: '青色', value: '#0e7c7b', class: 'bg-[#0e7c7b]' },
|
||||
];
|
||||
|
||||
// LLM 服务商预设（OpenAI 兼容接口）
|
||||
const LLM_PROVIDERS = [
|
||||
{ id: 'deepseek', label: 'DeepSeek', endpoint: 'https://api.deepseek.com/v1', model: 'deepseek-chat', keyUrl: 'https://platform.deepseek.com/api_keys' },
|
||||
@@ -365,88 +346,6 @@ export default function SystemSettings() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Primary color */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>主题色</label>
|
||||
<div className="flex items-center gap-2">
|
||||
{colorOptions.map(c => (
|
||||
<button key={c.value} onClick={() => setTheme(p => ({ ...p, primaryColor: c.value }))}
|
||||
className={`w-8 h-8 rounded-full ${c.class} flex items-center justify-center transition-transform hover:scale-110`}
|
||||
title={c.name}>
|
||||
{theme.primaryColor === c.value && <CheckCircle2 className="w-4 h-4 text-white" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Font size */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>字体大小</label>
|
||||
<div className="flex items-center gap-2">
|
||||
{[
|
||||
{ id: 'small', label: '小', size: '12px' },
|
||||
{ id: 'medium', label: '中', size: '14px' },
|
||||
{ id: 'large', label: '大', size: '16px' },
|
||||
].map(f => (
|
||||
<button key={f.id} onClick={() => setTheme(p => ({ ...p, fontSize: f.id as ThemeConfig['fontSize'] }))}
|
||||
className="flex-1 py-[7px] text-[12px] font-medium rounded-md border transition-colors text-center"
|
||||
style={{
|
||||
borderColor: theme.fontSize === f.id ? 'var(--accent-blue)' : 'var(--border-color-light)',
|
||||
background: theme.fontSize === f.id ? 'var(--accent-blue-light)' : 'transparent',
|
||||
color: theme.fontSize === f.id ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
||||
fontSize: f.size,
|
||||
}}>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Density */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>界面密度</label>
|
||||
<div className="flex items-center gap-2">
|
||||
{[
|
||||
{ id: 'compact', label: '紧凑' },
|
||||
{ id: 'comfortable', label: '舒适' },
|
||||
{ id: 'spacious', label: '宽松' },
|
||||
].map(d => (
|
||||
<button key={d.id} onClick={() => setTheme(p => ({ ...p, density: d.id as ThemeConfig['density'] }))}
|
||||
className="flex-1 py-[7px] text-[12px] font-medium rounded-md border transition-colors"
|
||||
style={{
|
||||
borderColor: theme.density === d.id ? 'var(--accent-blue)' : 'var(--border-color-light)',
|
||||
background: theme.density === d.id ? 'var(--accent-blue-light)' : 'transparent',
|
||||
color: theme.density === d.id ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
||||
}}>
|
||||
{d.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Border radius */}
|
||||
<div>
|
||||
<label className="block text-[12px] font-medium mb-2" style={{ color: 'var(--text-secondary)' }}>圆角风格</label>
|
||||
<div className="flex items-center gap-2">
|
||||
{[
|
||||
{ id: 'sharp', label: '直角', radius: '0px' },
|
||||
{ id: 'soft', label: '圆角', radius: '6px' },
|
||||
{ id: 'round', label: '大圆角', radius: '12px' },
|
||||
].map(r => (
|
||||
<button key={r.id} onClick={() => setTheme(p => ({ ...p, borderRadius: r.id as ThemeConfig['borderRadius'] }))}
|
||||
className="flex-1 py-[7px] text-[12px] font-medium border transition-colors"
|
||||
style={{
|
||||
borderColor: theme.borderRadius === r.id ? 'var(--accent-blue)' : 'var(--border-color-light)',
|
||||
background: theme.borderRadius === r.id ? 'var(--accent-blue-light)' : 'transparent',
|
||||
color: theme.borderRadius === r.id ? 'var(--accent-blue)' : 'var(--text-secondary)',
|
||||
borderRadius: r.radius,
|
||||
}}>
|
||||
{r.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user