feat(ui): new design tokens

package.json

@@ -72,7 +72,6 @@
     "better-sqlite3-multiple-ciphers": "12.4.1",
     "cheerio": "^1.1.2",
     "compare-versions": "^6.1.1",
-    "dayjs": "^1.11.18",
     "diff": "^7.0.0",
     "electron-log": "^5.4.3",
     "electron-store": "^8.2.0",
@@ -174,6 +173,7 @@
     "vue-virtual-scroller": "^2.0.0-beta.8",
     "vuedraggable": "^4.1.0",
     "yaml": "^2.8.1",
+    "dayjs": "^1.11.18",
     "zod-to-json-schema": "^3.24.6"
   },
   "simple-git-hooks": {

src/main/presenter/tabPresenter.ts

@@ -122,7 +122,7 @@ export class TabPresenter implements ITabPresenter {
       }
     })
 
-    view.setBorderRadius(8)
+    view.setBorderRadius(0)
     view.setBackgroundColor('#00ffffff')
 
     // 加载内容
@@ -637,11 +637,11 @@ export class TabPresenter implements ITabPresenter {
     const { width, height } = window.getContentBounds()
 
     // 设置视图位置大小（留出顶部标签栏空间）
-    const TAB_BAR_HEIGHT = 40 // 标签栏高度，需要根据实际UI调整
+    const TAB_BAR_HEIGHT = 36 // 标签栏高度，需要根据实际UI调整
     view.setBounds({
-      x: 4,
+      x: 0,
       y: TAB_BAR_HEIGHT,
-      width: width - 8,
+      width: width,
       height: height - TAB_BAR_HEIGHT - 4
     })
   }

src/main/presenter/windowPresenter/index.ts

@@ -954,7 +954,7 @@ export class WindowPresenter implements IWindowPresenter {
 
     // 开发模式下可选开启 DevTools
     if (is.dev) {
-      // shellWindow.webContents.openDevTools({ mode: 'detach' });
+      shellWindow.webContents.openDevTools({ mode: 'detach' })
     }
 
     console.log(`Shell window ${windowId} created successfully.`)

src/renderer/shell/App.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="w-screen h-screen"
-    :class="[isMacOS ? 'bg-transparent' : themeStore.isDark ? 'bg-zinc-900' : 'bg-zinc-200']"
-  >
+  <div class="w-screen h-screen" :class="[isMacOS ? 'bg-transparent' : 'bg-card/50']">
     <AppBar />
     <main class="content-container">
       <!-- WebContentsView will be rendered here by the main process -->
@@ -14,9 +11,7 @@
 import AppBar from './components/AppBar.vue'
 import { ref, onMounted } from 'vue'
 import { usePresenter } from '@/composables/usePresenter'
-import { useThemeStore } from '@/stores/theme'
 const isMacOS = ref(false)
-const themeStore = useThemeStore()
 const devicePresenter = usePresenter('devicePresenter')
 // Shell component setup
 onMounted(() => {

src/renderer/shell/components/AppBar.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-row h-10" :dir="langStore.dir">
+  <div class="flex flex-row h-9" :dir="langStore.dir">
     <div
-      class="h-10 shrink-0 w-0 flex-1 flex select-none text-center text-sm font-medium flex-row items-center justify-start window-drag-region"
-      :class="['', isMacOS ? (isFullscreened ? 'pl-2 pr-2' : 'pl-20 pr-2') : 'px-2']"
+      class="h-9 shrink-0 w-0 flex-1 flex select-none text-center text-sm font-medium flex-row items-center justify-start window-drag-region"
+      :class="['', isMacOS ? (isFullscreened ? 'pr-2' : 'pl-20 pr-2') : '']"
     >
       <!-- App title/content in center -->
       <Button
@@ -23,12 +23,12 @@
       </Button>
       <div
         ref="tabContainerWrapper"
-        class="h-full flex flex-row items-center justify-start overflow-y-hidden overflow-x-auto scrollbar-hide"
+        class="h-full self-stretch inline-flex flex-row items-center justify-start overflow-y-hidden overflow-x-auto scrollbar-hide"
         @scroll="onTabContainerWrapperScroll"
       >
         <div
           ref="tabContainer"
-          class="h-full flex flex-row items-center justify-start gap-1 relative"
+          class="h-full flex flex-row items-center justify-start relative"
           @dragover="onTabContainerDragOver"
           @drop="onTabContainerDrop"
         >
@@ -91,7 +91,7 @@
       </Button> -->
     </div>
 
-    <div v-if="!isMacOS" class="flex h-10">
+    <div v-if="!isMacOS" class="flex h-9">
       <button
         class="inline-flex items-center justify-center h-full w-12 hover:bg-zinc-500/20"
         @click="minimizeWindow"

src/renderer/shell/components/app-bar/AppBarTabItem.vue

@@ -2,12 +2,8 @@
   <div
     ref="tabItem"
     draggable="true"
-    class="shrink-0 text-xs font-medium pl-2 pr-1 h-7 mt-0.5 rounded-md flex items-center justify-between transition-all duration-200 group"
-    :class="[
-      active
-        ? 'bg-white dark:bg-white/10 shadow-sm dark:shadow-[inset_0_0px_1px_0_rgba(255,255,255,0.3)]'
-        : 'bg-transparent text-secondary-foreground hover:bg-black/20 active:bg-zinc-900/20'
-    ]"
+    class="shrink-0 text-xs font-medium px-3 h-9 flex items-center justify-between transition-all duration-200 group border-l border-r"
+    :class="[active ? 'bg-bg-card' : '']"
     @dragstart="onDragStart"
     @click="onClick"
   >
@@ -16,7 +12,7 @@
     </div>
     <button
       class="ml-2 opacity-0 transition-opacity duration-200 rounded-full hover:bg-zinc-500/20 p-0.5"
-      :class="[size > 1 ? 'group-hover:opacity-100 ' : 'pointer-events-none cursor-default']"
+      :class="[size > 1 ? 'group-hover:opacity-100' : 'pointer-events-none cursor-default']"
       @click.stop="onClose"
     >
       <Icon icon="lucide:x" class="w-3 h-3" />

src/renderer/src/App.vue

@@ -306,7 +306,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="flex flex-col h-screen bg-container">
+  <div class="flex flex-col h-screen bg-bg-card">
     <div class="flex flex-row h-0 grow relative overflow-hidden px-px py-px" :dir="langStore.dir">
       <!-- Main content area -->