feat(ui): add classic and modern interface styles (#915)

Author: Andreaseszhang

apps/electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proma/electron",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "description": "Proma next gen ai software with general agents - Electron App",
   "main": "dist/main.cjs",
   "author": {

apps/electron/src/main/ipc.ts

@@ -1445,8 +1445,12 @@ export function registerIpcHandlers(): void {
       }
 
       // 主题相关设置变化时，广播给所有窗口（跨窗口同步，如 Quick Task 面板）
-      if (updates.themeMode !== undefined || updates.themeStyle !== undefined) {
-        const payload = { themeMode: result.themeMode, themeStyle: result.themeStyle }
+      if (updates.themeMode !== undefined || updates.themeStyle !== undefined || updates.interfaceVariant !== undefined) {
+        const payload = {
+          themeMode: result.themeMode,
+          themeStyle: result.themeStyle,
+          interfaceVariant: result.interfaceVariant,
+        }
         BrowserWindow.getAllWindows().forEach((win) => {
           // 跳过发起者窗口，避免重复应用
           if (win.webContents.id !== event.sender.id) {

apps/electron/src/main/lib/settings-service.ts

@@ -7,7 +7,7 @@
 
 import { readFileSync, writeFileSync, existsSync } from 'node:fs'
 import { getSettingsPath } from './config-paths'
-import { DEFAULT_THEME_MODE } from '../../types'
+import { DEFAULT_INTERFACE_VARIANT, DEFAULT_THEME_MODE } from '../../types'
 import type { AppSettings } from '../../types'
 
 /**
@@ -21,6 +21,7 @@ export function getSettings(): AppSettings {
   if (!existsSync(filePath)) {
     return {
       themeMode: DEFAULT_THEME_MODE,
+      interfaceVariant: DEFAULT_INTERFACE_VARIANT,
       onboardingCompleted: false,
       environmentCheckSkipped: false,
       notificationsEnabled: true,
@@ -35,6 +36,7 @@ export function getSettings(): AppSettings {
     return {
       ...data,
       themeMode: data.themeMode || DEFAULT_THEME_MODE,
+      interfaceVariant: data.interfaceVariant || DEFAULT_INTERFACE_VARIANT,
       onboardingCompleted: data.onboardingCompleted ?? false,
       environmentCheckSkipped: data.environmentCheckSkipped ?? false,
       notificationsEnabled: data.notificationsEnabled ?? true,
@@ -45,6 +47,7 @@ export function getSettings(): AppSettings {
     console.error('[设置] 读取失败:', error)
     return {
       themeMode: DEFAULT_THEME_MODE,
+      interfaceVariant: DEFAULT_INTERFACE_VARIANT,
       onboardingCompleted: false,
       environmentCheckSkipped: false,
       notificationsEnabled: true,

apps/electron/src/preload/index.ts

@@ -328,7 +328,7 @@ export interface ElectronAPI {
   onSystemThemeChanged: (callback: (isDark: boolean) => void) => () => void
 
   /** 订阅用户手动切换主题事件（跨窗口同步，返回清理函数） */
-  onThemeSettingsChanged: (callback: (payload: { themeMode: string; themeStyle: string }) => void) => () => void
+  onThemeSettingsChanged: (callback: (payload: { themeMode: string; themeStyle: string; interfaceVariant?: string }) => void) => () => void
 
   // ===== Scratch Pad =====
 
@@ -1295,8 +1295,8 @@ const electronAPI: ElectronAPI = {
     return () => { ipcRenderer.removeListener(SETTINGS_IPC_CHANNELS.ON_SYSTEM_THEME_CHANGED, listener) }
   },
 
-  onThemeSettingsChanged: (callback: (payload: { themeMode: string; themeStyle: string }) => void) => {
-    const listener = (_: unknown, payload: { themeMode: string; themeStyle: string }): void => callback(payload)
+  onThemeSettingsChanged: (callback: (payload: { themeMode: string; themeStyle: string; interfaceVariant?: string }) => void) => {
+    const listener = (_: unknown, payload: { themeMode: string; themeStyle: string; interfaceVariant?: string }): void => callback(payload)
     ipcRenderer.on(SETTINGS_IPC_CHANNELS.ON_THEME_SETTINGS_CHANGED, listener)
     return () => { ipcRenderer.removeListener(SETTINGS_IPC_CHANNELS.ON_THEME_SETTINGS_CHANGED, listener) }
   },

apps/electron/src/renderer/atoms/theme.ts

@@ -11,11 +11,12 @@
  */
 
 import { atom } from 'jotai'
-import { THEME_STYLES, type ThemeMode, type ThemeStyle } from '../../types'
+import { DEFAULT_INTERFACE_VARIANT, THEME_STYLES, type InterfaceVariant, type ThemeMode, type ThemeStyle } from '../../types'
 
 /** localStorage 缓存键 */
 const THEME_CACHE_KEY = 'proma-theme-mode'
 const THEME_STYLE_CACHE_KEY = 'proma-theme-style'
+const INTERFACE_VARIANT_CACHE_KEY = 'proma-interface-variant'
 
 /**
  * 从 localStorage 读取缓存的主题模式
@@ -47,6 +48,21 @@ function getCachedThemeStyle(): ThemeStyle {
   return 'default'
 }
 
+/**
+ * 从 localStorage 读取缓存的界面风格
+ */
+function getCachedInterfaceVariant(): InterfaceVariant {
+  try {
+    const cached = localStorage.getItem(INTERFACE_VARIANT_CACHE_KEY)
+    if (cached === 'classic' || cached === 'modern') {
+      return cached
+    }
+  } catch {
+    // localStorage 不可用时忽略
+  }
+  return DEFAULT_INTERFACE_VARIANT
+}
+
 /**
  * 缓存主题模式到 localStorage
  */
@@ -69,12 +85,26 @@ function cacheThemeStyle(style: ThemeStyle): void {
   }
 }
 
+/**
+ * 缓存界面风格到 localStorage
+ */
+function cacheInterfaceVariant(variant: InterfaceVariant): void {
+  try {
+    localStorage.setItem(INTERFACE_VARIANT_CACHE_KEY, variant)
+  } catch {
+    // localStorage 不可用时忽略
+  }
+}
+
 /** 用户选择的主题模式 */
 export const themeModeAtom = atom<ThemeMode>(getCachedThemeMode())
 
 /** 用户选择的特殊风格 */
 export const themeStyleAtom = atom<ThemeStyle>(getCachedThemeStyle())
 
+/** 用户选择的界面风格 */
+export const interfaceVariantAtom = atom<InterfaceVariant>(getCachedInterfaceVariant())
+
 /** 系统当前是否为深色模式 */
 export const systemIsDarkAtom = atom<boolean>(true)
 
@@ -150,6 +180,28 @@ export function applyThemeToDOM(themeMode: ThemeMode, themeStyle: ThemeStyle = '
   }
 }
 
+/**
+ * 应用界面风格到 DOM
+ */
+export function applyInterfaceVariantToDOM(variant: InterfaceVariant = DEFAULT_INTERFACE_VARIANT): void {
+  const html = document.documentElement
+  const targetClass = variant === 'classic' ? 'ui-classic' : 'ui-modern'
+  const currentClass = html.classList.contains('ui-classic')
+    ? 'ui-classic'
+    : html.classList.contains('ui-modern')
+      ? 'ui-modern'
+      : null
+
+  if (currentClass === targetClass) {
+    return
+  }
+
+  if (currentClass) {
+    html.classList.remove(currentClass)
+  }
+  html.classList.add(targetClass)
+}
+
 /**
  * 初始化主题系统
  *
@@ -160,6 +212,7 @@ export async function initializeTheme(
   setThemeMode: (mode: ThemeMode) => void,
   setSystemIsDark: (isDark: boolean) => void,
   setThemeStyle?: (style: ThemeStyle) => void,
+  setInterfaceVariant?: (variant: InterfaceVariant) => void,
 ): Promise<() => void> {
   // 从主进程加载持久化设置
   const settings = await window.electronAPI.getSettings()
@@ -172,6 +225,12 @@ export async function initializeTheme(
     cacheThemeStyle(settings.themeStyle)
   }
 
+  const interfaceVariant = settings.interfaceVariant || DEFAULT_INTERFACE_VARIANT
+  if (setInterfaceVariant) {
+    setInterfaceVariant(interfaceVariant)
+  }
+  cacheInterfaceVariant(interfaceVariant)
+
   // 获取系统主题
   const isDark = await window.electronAPI.getSystemTheme()
   setSystemIsDark(isDark)
@@ -185,12 +244,17 @@ export async function initializeTheme(
   const cleanupThemeSettings = window.electronAPI.onThemeSettingsChanged((payload) => {
     const mode = payload.themeMode as ThemeMode
     const style = (payload.themeStyle || 'default') as ThemeStyle
+    const variant = (payload.interfaceVariant || DEFAULT_INTERFACE_VARIANT) as InterfaceVariant
     setThemeMode(mode)
     cacheThemeMode(mode)
     if (setThemeStyle) {
       setThemeStyle(style)
       cacheThemeStyle(style)
     }
+    if (setInterfaceVariant) {
+      setInterfaceVariant(variant)
+      cacheInterfaceVariant(variant)
+    }
   })
 
   return () => {
@@ -216,3 +280,11 @@ export async function updateThemeStyle(style: ThemeStyle): Promise<void> {
   cacheThemeStyle(style)
   await window.electronAPI.updateSettings({ themeStyle: style })
 }
+
+/**
+ * 更新界面风格并持久化
+ */
+export async function updateInterfaceVariant(variant: InterfaceVariant): Promise<void> {
+  cacheInterfaceVariant(variant)
+  await window.electronAPI.updateSettings({ interfaceVariant: variant })
+}

apps/electron/src/renderer/components/agent/SidePanel.tsx

@@ -34,6 +34,7 @@ import {
   fileBrowserAutoRevealAtom,
   agentSelectedWorktreeAtom,
 } from '@/atoms/agent-atoms'
+import { interfaceVariantAtom } from '@/atoms/theme'
 import { previewFileMapAtom } from '@/atoms/preview-atoms'
 import { useOpenPreview } from '@/components/diff/preview-opener'
 import { detectIsWindows } from '@/lib/platform'
@@ -393,11 +394,14 @@ export function SidePanel({ sessionId, sessionPath, activeTab, onTabChange, widt
   basePathsRef.current = [sessionPath, workspaceFilesPath, ...fileAccessPathsMemo].filter(Boolean) as string[]
   const hasSessionAttachedItems = attachedDirs.length > 0 || attachedFiles.length > 0
   const hasWorkspaceAttachedItems = wsAttachedDirs.length > 0 || wsAttachedFiles.length > 0
+  const interfaceVariant = useAtomValue(interfaceVariantAtom)
+  const isClassic = interfaceVariant === 'classic'
 
   return (
     <div
       className={cn(
-        'relative z-0 h-full flex-shrink-0 overflow-hidden titlebar-drag-region bg-content-area rounded-2xl shadow-xl dark:shadow-md',
+        'relative z-0 h-full flex-shrink-0 overflow-hidden titlebar-drag-region bg-content-area',
+        isClassic && 'rounded-2xl shadow-xl dark:shadow-md',
         shouldAnimate && 'transition-[width] duration-300 ease-in-out',
         isOpen ? '' : '!w-0',
       )}

apps/electron/src/renderer/components/app-shell/AppShell.tsx

@@ -16,6 +16,7 @@ import { appModeAtom } from '@/atoms/app-mode'
 import { agentSidePanelWidthAtom, currentAgentSessionIdAtom, currentSessionSidePanelOpenAtom } from '@/atoms/agent-atoms'
 import { automationFormAtom } from '@/atoms/automation-atoms'
 import { activeViewAtom } from '@/atoms/active-view'
+import { interfaceVariantAtom } from '@/atoms/theme'
 import { WindowControls } from '@/components/WindowControls'
 import { detectIsWindows } from '@/lib/platform'
 import { cn } from '@/lib/utils'
@@ -37,6 +38,8 @@ export function AppShell({ contextValue }: AppShellProps): React.ReactElement {
   const currentSessionId = useAtomValue(currentAgentSessionIdAtom)
   const isPanelOpen = useAtomValue(currentSessionSidePanelOpenAtom)
   const automationForm = useAtomValue(automationFormAtom)
+  const interfaceVariant = useAtomValue(interfaceVariantAtom)
+  const isClassic = interfaceVariant === 'classic'
   // 定时任务表单打开时隐藏右侧文件面板，让中间区域扩展到全宽（表单内含自己的右栏配置）
   const activeView = useAtomValue(activeViewAtom)
   const showRightPanel = appMode === 'agent' && !!currentSessionId && !automationForm.open && activeView !== 'automations' && activeView !== 'agent-skills'
@@ -99,24 +102,41 @@ export function AppShell({ contextValue }: AppShellProps): React.ReactElement {
       <WindowControls />
 
       <div className="shell-bg h-screen w-screen flex overflow-hidden bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-950 dark:to-zinc-900">
-        {/* 左侧边栏：可折叠，带圆角和内边距 */}
-        <div className="p-2 pr-0 relative z-[60] crt-sidebar">
+        {/* 左侧边栏：可折叠 */}
+        <div className={cn(isClassic ? 'p-2 pr-0' : '', 'relative z-[60] crt-sidebar')}>
           <LeftSidebar />
         </div>
+        {!isClassic && (
+          <div aria-hidden="true" className="relative z-[61] w-px flex-shrink-0 bg-border/80 dark:bg-border/70" />
+        )}
 
         {/* 中间容器：relative z-[60] 使其在 z-50 拖动区域之上 */}
-        <div className="flex-1 min-w-0 p-2 relative z-[60]">
+        <div className={cn('flex-1 min-w-0 relative z-[60]', isClassic && 'p-2')}>
           {/* 主内容区域（TabBar + TabContent） */}
           <MainArea />
         </div>
 
-        {/* 右侧边栏：Agent 文件面板，拖拽手柄在间距中间 */}
+        {/* 右侧边栏：Agent 文件面板 */}
         {showRightPanel && (
-          <div className={cn('relative z-[60] flex items-stretch transition-[padding] duration-300 ease-in-out crt-sidebar', isPanelOpen ? 'p-2 pl-0' : 'p-0')}>
-            {/* 拖拽手柄 — 绝对定位，居中于主区域和右侧面板的缝隙 */}
+          <div
+            className={cn(
+              'relative z-[60] flex items-stretch crt-sidebar',
+              isClassic
+                ? 'transition-[padding] duration-300 ease-in-out'
+                : '',
+              isClassic && (isPanelOpen ? 'p-2 pl-0' : 'p-0')
+            )}
+          >
+            {!isClassic && (
+              <div aria-hidden="true" className="pointer-events-none absolute left-0 top-0 bottom-0 z-10 w-px bg-border/80 dark:bg-border/70" />
+            )}
+            {/* 拖拽手柄 */}
             {isPanelOpen && (
               <div
-                className="absolute left-0 top-0 bottom-0 w-[8px] -translate-x-1/2 cursor-col-resize active:bg-primary/50 transition-colors z-10"
+                className={cn(
+                  'absolute left-0 top-0 bottom-0 w-[8px] -translate-x-1/2 cursor-col-resize active:bg-primary/50 transition-colors',
+                  isClassic ? 'z-10' : 'z-20'
+                )}
                 onMouseDown={handleMouseDown}
               />
             )}