+
+ )
+}
+
+// ── 自定义 URL ────────────────────────────────────────────────────────
+function UrlTab({ current, onSelect }: { current: string; onSelect: (url: string) => void }) {
+ const [url, setUrl] = useState(() => (current.startsWith('data:') ? '' : current))
+ const [imgError, setImgError] = useState(false)
+
+ const isValid = url.startsWith('http://') || url.startsWith('https://')
+
+ return (
+
+
+
+ {CATEGORIES.map((cat) => (
+
+ ))}
+
+ e.stopPropagation()}
+ >
+
+
+
+
+ {filtered.map((icon) => (
+
+
+
+
+ {icon.name}
+
+ ))}
+ {filtered.length === 0 && (
+
+ 无匹配图标
+ )}
+
+
+ )
+}
+
+// ── Emoji 标签页 ──────────────────────────────────────────────────────
+function EmojiTab({ onSelect }: { onSelect: (dataUrl: string) => void }) {
+ const [emoji, setEmoji] = useState('')
+
+ const svgUrl = emoji.trim() ? emojiToSVGDataURL(emoji.trim()) : ''
+
+ return (
+
+ { setUrl(e.target.value); setImgError(false) }}
+ />
+
+ {isValid && !imgError && (
+ 支持 PNG、JPG、SVG 等格式
+
+ 
setImgError(true)}
+ />
+ {url}
+
+ )}
+ {imgError && (
+ 图片加载失败，请检查 URL
+ )} + +
+
+ )
+}
+
+// ── 主组件 ────────────────────────────────────────────────────────────
+interface IconPickerProps {
+ value: string
+ onChange: (icon: string) => void
+}
+
+export function IconPicker({ value, onChange }: IconPickerProps) {
+ const [open, setOpen] = useState(false)
+ const [tab, setTab] = useState('preset')
+
+ const handleSelect = (url: string) => {
+ onChange(url)
+ setOpen(false)
+ }
+
+ const handleClear = (e: React.MouseEvent) => {
+ e.stopPropagation()
+ onChange('')
+ }
+
+ return (
+
+ setEmoji(e.target.value)}
+ />
+
+ {svgUrl && (
+ 输入 emoji，直接生成 SVG 图标
+
+ 
+
+
+ )}
+
+
+
+
+
+
+
+
+ 预设库
+ 自定义 URL
+ Emoji
+
+
+
+
+
+
+
+
+
+
+
+ {/* 当前值预览文字 */}
+ {value && (
+
+ )
+}
diff --git a/frontend/src/components/YamlEditor.tsx b/frontend/src/components/YamlEditor.tsx
index 7f75cca..dcf409f 100644
--- a/frontend/src/components/YamlEditor.tsx
+++ b/frontend/src/components/YamlEditor.tsx
@@ -37,9 +37,17 @@ export interface YamlEditorProps {
placeholder?: string
/** 编辑器最小高度，如 200px、300px */
minHeight?: string
+ /** 编辑器固定高度，设置后内容超出时滚动 */
+ height?: string
+ /** 编辑器最大高度，超出后滚动 */
+ maxHeight?: string
className?: string
readOnly?: boolean
highlightedLine?: number | null
+ /** 语言模式，默认 yaml；text 表示纯文本无语言扩展 */
+ language?: 'yaml' | 'text'
+ /** 长行自动换行，默认 false（水平滚动）；规则列表场景建议开启 */
+ lineWrapping?: boolean
}
/** YAML 语法高亮编辑区，主题随应用亮/暗/system 切换 */
@@ -47,13 +55,38 @@ export function YamlEditor({
value,
onChange,
placeholder,
- minHeight = '200px',
+ minHeight,
+ height,
+ maxHeight,
className,
readOnly = false,
highlightedLine = null,
+ language = 'yaml',
+ lineWrapping = false,
}: YamlEditorProps) {
+ const resolvedMinHeight = minHeight ?? (height ? undefined : '200px')
const isDark = useResolvedDark()
- const extensions: Extension[] = [yaml()]
+
+ // 用高优先级 theme 覆盖 CodeMirror 内置 light/dark 主题的固定背景色，使其与 app design token 一致
+ const appThemeExtension = EditorView.theme(
+ {
+ '&': { backgroundColor: 'hsl(var(--background))' },
+ '.cm-gutters': {
+ backgroundColor: 'hsl(var(--muted))',
+ borderRight: '1px solid hsl(var(--border))',
+ color: 'hsl(var(--muted-foreground))',
+ },
+ '.cm-activeLineGutter': { backgroundColor: 'hsl(var(--accent))' },
+ '.cm-activeLine': { backgroundColor: 'hsl(var(--accent) / 0.3)' },
+ },
+ { dark: isDark }
+ )
+
+ const extensions: Extension[] = [appThemeExtension, ...(language === 'yaml' ? [yaml()] : [])]
+
+ if (lineWrapping) {
+ extensions.push(EditorView.lineWrapping)
+ }
if (highlightedLine && highlightedLine > 0) {
const highlightTheme = EditorView.theme({
@@ -105,10 +138,16 @@ export function YamlEditor({
}
return (
-
+ 选择图标
+ {value && (
+
+ )}
+
+
+
+ {value.startsWith('data:image/svg+xml') ? 'Emoji（SVG）' : value.startsWith('data:') ? 'Emoji' : value}
+
+
+
+ )}
+ {!value && (
+ 点击左侧按钮选择图标
+ )}
+
+
{/* 顶部导航栏 */}
-
+
+ {breadcrumbItems.length > 0 && (
+
+ )}
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index c157953..5b64622 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,8 +1,9 @@
import { NavLink } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
-import { LayoutDashboard, Globe, Bot, Settings2, Link, Settings, FileCode2, BookOpen, Cloud } from 'lucide-react'
+import { LayoutDashboard, Globe, Bot, Settings2, Link, Settings, FileCode2, BookOpen, ShieldCheck, Users } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { useAuthStore } from '@/store/auth'
interface NavItem {
path: string
@@ -10,16 +11,53 @@ interface NavItem {
labelKey: string
}
-const navItems: NavItem[] = [
- { path: '/dashboard', icon: LayoutDashboard, labelKey: 'nav.dashboard' },
- { path: '/providers', icon: Globe, labelKey: 'nav.providers' },
- { path: '/custom-configs', icon: Settings2, labelKey: 'nav.customConfigs' },
- { path: '/config-templates', icon: FileCode2, labelKey: 'nav.configTemplates' },
- { path: '/rule-providers', icon: BookOpen, labelKey: 'nav.ruleProviders' },
- { path: '/hosted-rule-sets', icon: Cloud, labelKey: 'nav.hostedRuleSets' },
- { path: '/subscriptions', icon: Link, labelKey: 'nav.subscriptions' },
- { path: '/user-agents', icon: Bot, labelKey: 'nav.userAgents' },
- { path: '/settings', icon: Settings, labelKey: 'nav.settings' },
+interface NavGroup {
+ label?: string
+ labelKey?: string
+ items: NavItem[]
+ adminOnly?: boolean
+}
+
+const navGroups: NavGroup[] = [
+ {
+ items: [
+ { path: '/dashboard', icon: LayoutDashboard, labelKey: 'nav.dashboard' },
+ ],
+ },
+ {
+ labelKey: 'nav.groupSource',
+ items: [
+ { path: '/providers', icon: Globe, labelKey: 'nav.providers' },
+ { path: '/rule-sets', icon: BookOpen, labelKey: 'nav.ruleSets' },
+ ],
+ },
+ {
+ labelKey: 'nav.groupOrchestration',
+ items: [
+ { path: '/custom-configs', icon: Settings2, labelKey: 'nav.customConfigs' },
+ { path: '/config-templates', icon: FileCode2, labelKey: 'nav.configTemplates' },
+ ],
+ },
+ {
+ labelKey: 'nav.groupPublish',
+ items: [
+ { path: '/subscriptions', icon: Link, labelKey: 'nav.subscriptions' },
+ ],
+ },
+ {
+ items: [
+ { path: '/user-agents', icon: Bot, labelKey: 'nav.userAgents' },
+ { path: '/settings', icon: Settings, labelKey: 'nav.settings' },
+ ],
+ },
+ {
+ labelKey: 'nav.groupAdmin',
+ adminOnly: true,
+ items: [
+ { path: '/admin/users', icon: Users, labelKey: 'nav.adminUsers' },
+ { path: '/admin/settings', icon: ShieldCheck, labelKey: 'nav.adminSettings' },
+ ],
+ },
]
interface SidebarProps {
@@ -30,59 +68,86 @@ interface SidebarProps {
export function Sidebar({ onNavClick, collapsed = false, labelsVisible = !collapsed }: SidebarProps) {
const { t } = useTranslation()
+ const { user } = useAuthStore()
- const navContent = (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+