@aquiferre/theme-kit 0.1.0 → 0.1.2

package/components.css

@@ -130,7 +130,7 @@
   }
 
   .table {
-    @apply min-w-full divide-y divide-border-primary;
+    @apply w-full divide-y divide-border-primary;
   }
 
   .table-header {
@@ -325,8 +325,36 @@
   }
 
   /* ========== Page Layout ========== */
+  .breadcrumb {
+    @apply mb-2;
+  }
+
+  .breadcrumb-list {
+    @apply flex items-center gap-2 text-sm flex-nowrap;
+  }
+
+  .breadcrumb-item {
+    @apply flex items-center;
+  }
+
+  .breadcrumb-link {
+    @apply text-text-tertiary hover:text-accent-primary transition-colors;
+  }
+
+  .breadcrumb-text {
+    @apply text-text-tertiary;
+  }
+
+  .breadcrumb-current {
+    @apply text-text-primary font-medium;
+  }
+
+  .breadcrumb-separator {
+    @apply mx-2 text-text-tertiary;
+  }
+
   .page-container {
-    @apply max-w-7xl mx-auto px-8 py-12;
+    @apply px-8 py-12;
   }
 
   .page-header {

package/index.ts

@@ -1 +1 @@
-export { useThemeStore, type ThemeMode } from './theme'
+export { useThemeStore, themeList, type ThemeMode, type ThemeInfo } from './theme'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquiferre/theme-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "type": "module",
   "main": "index.ts",

package/theme.ts

@@ -1,13 +1,49 @@
 import { defineStore } from 'pinia'
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 
 export type ThemeMode = 'light' | 'dark' | 'neutral'
 
+export interface ThemeInfo {
+  mode: ThemeMode
+  label: string
+  icon: string
+  description: string
+}
+
+/**
+ * 主题列表 (内置数据)
+ */
+export const themeList: ThemeInfo[] = [
+  {
+    mode: 'light',
+    label: '浅色模式',
+    icon: '☀️',
+    description: '明亮清晰的界面'
+  },
+  {
+    mode: 'dark',
+    label: '深色模式',
+    icon: '🌙',
+    description: '护眼科普的暗色主题'
+  },
+  {
+    mode: 'neutral',
+    label: '中性模式',
+    icon: '✨',
+    description: '低饱和度的柔和色调'
+  }
+]
+
 export const useThemeStore = defineStore('theme', () => {
   const theme = ref<ThemeMode>(
     (localStorage.getItem('theme') as ThemeMode) || 'dark'
   )
 
+  // 当前主题信息
+  const currentThemeInfo = computed<ThemeInfo | undefined>(() => 
+    themeList.find(t => t.mode === theme.value)
+  )
+
   function toggle() {
     const cycle: ThemeMode[] = ['light', 'dark', 'neutral']
     const idx = cycle.indexOf(theme.value)
@@ -43,10 +79,22 @@ export const useThemeStore = defineStore('theme', () => {
         theme.value = e.matches ? 'dark' : 'light'
       }
     })
+
+    // 监听其他 tab 的主题变化
+    window.addEventListener('storage', (event) => {
+      if (event.key === 'theme' && event.newValue) {
+        const newTheme = event.newValue as ThemeMode
+        if (['light', 'dark', 'neutral'].includes(newTheme)) {
+          theme.value = newTheme
+        }
+      }
+    })
   }
 
   return {
     theme,
+    themeList,
+    currentThemeInfo,
     toggle,
     setTheme,
     getSystemTheme,

package/variables.css

@@ -88,9 +88,9 @@
   --color-sidebar-active: #22222e;
   --color-sidebar-border: #2a2a36;
 
-  --color-input-bg: #f0f0f5;
-  --color-input-text: #1a1a2e;
-  --color-input-placeholder: #6a6a7a;
+  --color-input-bg: #1e1e28;
+  --color-input-text: #f0f0f5;
+  --color-input-placeholder: #7a7a8a;
 
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);