wui-components-v2 1.0.0

package/api/core/handlers.ts

@@ -0,0 +1,106 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-04-17 15:58:11
+ * @LastEditTime: 2025-06-15 21:47:22
+ * @LastEditors: weisheng
+ * @Description: Alova response and error handlers
+ * @FilePath: /wot-demo/src/api/core/handlers.ts
+ */
+import type { Method } from 'alova'
+import router from '@/router'
+
+// Custom error class for API errors
+export class ApiError extends Error {
+  code: number
+  data?: any
+
+  constructor(message: string, code: number, data?: any) {
+    super(message)
+    this.name = 'ApiError'
+    this.code = code
+    this.data = data
+  }
+}
+
+// Define a type for the expected API response structure
+interface ApiResponse {
+  code: number
+  msg?: string
+  data?: any
+  success?: boolean
+  total?: number
+  more?: boolean
+}
+
+// 处理成功的响应
+export async function handleAlovaResponse(
+  response: UniApp.RequestSuccessCallbackResult | UniApp.UploadFileSuccessCallbackResult | UniApp.DownloadSuccessData,
+) {
+  const globalToast = useGlobalToast()
+  // Extract status code and data from UniApp response
+  const { statusCode, data } = response as UniNamespace.RequestSuccessCallbackResult
+
+  // 处理401/403错误（如果不是在handleAlovaResponse中处理的）
+  if ((statusCode === 401 || statusCode === 403)) {
+    // 如果是未授权错误，清除用户信息并跳转到登录页
+    globalToast.error({ msg: '登录已过期，请重新登录！', duration: 500 })
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      router.replaceAll({ name: 'login' })
+    }, 500)
+
+    throw new ApiError('登录已过期，请重新登录！', statusCode, data)
+  }
+
+  // Handle HTTP error status codes
+  if (statusCode >= 400) {
+    globalToast.error(`请求失败，状态为: ${statusCode}`)
+    throw new ApiError(`请求失败，状态为: ${statusCode}`, statusCode, data)
+  }
+
+  // The data is already parsed by UniApp adapter
+  const json = data as ApiResponse
+  // Log response in development
+  if (import.meta.env.MODE === 'development') {
+    console.log('[Alova Response]', json)
+  }
+
+  // Return data for successful responses
+  return json
+}
+
+// 处理失败的响应
+export function handleAlovaError(error: any, method: Method) {
+  const globalToast = useGlobalToast()
+  // Log error in development
+  if (import.meta.env.MODE === 'development') {
+    console.error('[Alova Error]', error, method)
+  }
+
+  // 处理401/403错误（如果不是在handleAlovaResponse中处理的）
+  if (error instanceof ApiError && (error.code === 401 || error.code === 403)) {
+    // 如果是未授权错误，清除用户信息并跳转到登录页
+    globalToast.error({ msg: '登录已过期，请重新登录！', duration: 500 })
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      router.replaceAll({ name: 'login' })
+    }, 500)
+    throw new ApiError('登录已过期，请重新登录！', error.code, error.data)
+  }
+
+  // Handle different types of errors
+  if (error.name === 'NetworkError') {
+    globalToast.error('网络错误，请检查您的网络连接')
+  }
+  else if (error.name === 'TimeoutError') {
+    globalToast.error('请求超时，请重试')
+  }
+  else if (error instanceof ApiError) {
+    globalToast.error(error.message || '请求失败')
+  }
+  else {
+    globalToast.error('发生意外错误')
+  }
+
+  throw error
+}

package/api/core/instance.ts

@@ -0,0 +1,60 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-04-10 18:02:00
+ * @LastEditTime: 2025-06-15 22:41:52
+ * @LastEditors: weisheng
+ * @Description: Alova instance configuration
+ * @FilePath: /wot-demo/src/api/core/instance.ts
+ */
+import { createAlova } from 'alova'
+import vueHook from 'alova/vue'
+import AdapterUniapp from '@alova/adapter-uniapp'
+import { handleAlovaError, handleAlovaResponse } from './handlers'
+
+export const alovaInstance = createAlova({
+  baseURL: import.meta.env.VITE_API_BASE_URL || 'https://petstore3.swagger.io/api/v3',
+  ...AdapterUniapp(),
+  statesHook: vueHook,
+  beforeRequest: (method) => {
+    // 为POST/PUT/PATCH请求添加内容类型
+    if (['POST', 'PUT', 'PATCH'].includes(method.type)) {
+      method.config.headers['Content-Type'] = 'application/json'
+    }
+
+    // 添加时间戳以防止缓存GET请求
+    if (method.type === 'GET' && CommonUtil.isObj(method.config.params)) {
+      method.config.params._t = Date.now()
+    }
+
+    // 开发中的日志请求
+    if (import.meta.env.MODE === 'development') {
+      console.log(`[Alova Request] ${method.type} ${method.url}`, method.data || method.config.params)
+      console.log(`[API Base URL] ${import.meta.env.VITE_API_BASE_URL}`)
+      console.log(`[Environment] ${import.meta.env.VITE_ENV_NAME}`)
+    }
+  },
+
+  // 响应处理程序
+  responded: {
+    // 成功处理程序
+    onSuccess: handleAlovaResponse,
+
+    // 错误处理程序
+    onError: handleAlovaError,
+
+    // 完整处理程序-成功或错误后运行
+    onComplete: async () => {
+      // Any cleanup or logging can be done here
+    },
+  },
+
+  // 我们将在钩子中使用中间件
+  // createAlova选项中不直接支持中间件
+
+  // 默认请求超时（10秒）
+  timeout: 60000,
+  // 设置为null即可全局关闭全部请求缓存
+  cacheFor: null,
+})
+
+export default alovaInstance

package/api/core/middleware.ts

@@ -0,0 +1,92 @@
+/**
+ * 延迟加载中间件
+ * 延迟显示加载状态，防止快速请求导致的闪烁
+ * @param delay 显示加载状态前的延迟时间（毫秒）
+ * @returns Alova 中间件
+ */
+export function createDelayLoadingMiddleware(delay = 300) {
+  return async (context: any, next: any) => {
+    context.controlLoading()
+
+    const { loading } = context.proxyStates
+
+    const timer = setTimeout(() => {
+      loading.v = true
+    }, delay)
+
+    await next()
+
+    loading.v = false
+    clearTimeout(timer)
+  }
+}
+
+/**
+ * 全局加载中间件
+ * 为所有请求显示全局加载指示器，支持延迟显示
+ *
+ * 使用示例：
+ * ```typescript
+ * // 1. 基本用法
+ * const { send: submit } = useRequest(method, {
+ *   middleware: createGlobalLoadingMiddleware()
+ * });
+ *
+ * // 2. 自定义延迟时间和加载文本
+ * const { send: submit } = useRequest(method, {
+ *   middleware: createGlobalLoadingMiddleware({
+ *     delay: 500,           // 延迟 500ms 显示加载指示器，防止闪烁
+ *     loadingText: '正在提交...', // 自定义加载文本
+ *   })
+ * });
+ * ```
+ *
+ * @param options 加载选项
+ * @param options.delay 显示加载指示器前的延迟时间（毫秒），默认 300ms
+ * @param options.loadingText 加载指示器显示的文本，默认为 'Loading...'
+ * @returns Alova 中间件
+ */
+export function createGlobalLoadingMiddleware(options: {
+  delay?: number
+  loadingText?: string
+} = {}) {
+  const {
+    delay = 0,
+    loadingText = 'Loading...',
+  } = options
+
+  return async (ctx: any, next: any) => {
+    // 自行控制loading
+    ctx.controlLoading()
+
+    const globalLoading = useGlobalLoading()
+    let timer: ReturnType<typeof setTimeout> | null = null
+
+    // 如果delay为0或未设置，直接显示loading
+    if (delay <= 0) {
+      globalLoading.loading(loadingText)
+    }
+    else {
+      // 延迟特定时间显示全局loading
+      timer = setTimeout(() => {
+        globalLoading.loading(loadingText)
+      }, delay)
+    }
+
+    try {
+      await next()
+    }
+    finally {
+      // 清除定时器并关闭loading
+      if (timer) {
+        clearTimeout(timer)
+      }
+      globalLoading.close()
+    }
+  }
+}
+
+// 导出延迟加载中间件作为默认中间件
+export const defaultMiddleware = createDelayLoadingMiddleware()
+
+export default defaultMiddleware

package/api/index.ts

@@ -0,0 +1,15 @@
+// 导入核心alova实例
+import alovaInstance from './core/instance'
+
+// 如果需要，导出alova实例以供直接使用
+export { alovaInstance }
+
+// 为特定API配置方法选项
+export const $$userConfigMap = withConfigType({})
+
+// 创建全局Apis对象
+const Apis = createApis(alovaInstance, $$userConfigMap)
+
+// 导出默认导出和命名导出以进行自动导入
+export default Apis
+export { Apis }

package/composables/types/theme.ts

@@ -0,0 +1,63 @@
+import type { ConfigProviderThemeVars } from 'wot-design-uni'
+
+/**
+ * 主题色选项接口
+ */
+export interface ThemeColorOption {
+  name: string
+  value: string
+  primary: string
+}
+
+/**
+ * 语言选项接口
+ */
+export interface LocaleOption {
+  name: string
+  value: string
+}
+
+/**
+ * 主题类型
+ */
+export type ThemeMode = 'light' | 'dark'
+
+/**
+ * 主题状态接口
+ */
+export interface ThemeState {
+  theme: ThemeMode
+  Locale: LocaleOption
+  followSystem: boolean
+  hasUserSet: boolean
+  currentThemeColor: ThemeColorOption
+  themeVars: ConfigProviderThemeVars
+}
+
+/**
+ * 系统主题状态接口（简化版）
+ */
+export interface SystemThemeState {
+  theme: ThemeMode
+  themeVars: ConfigProviderThemeVars
+}
+
+/**
+ * 预定义的主题色选项
+ */
+export const themeColorOptions: ThemeColorOption[] = [
+  { name: '默认蓝', value: 'blue', primary: '#4D7FFF' },
+  { name: '活力橙', value: 'orange', primary: '#FF7D00' },
+  { name: '薄荷绿', value: 'green', primary: '#07C160' },
+  { name: '樱花粉', value: 'pink', primary: '#FF69B4' },
+  { name: '紫罗兰', value: 'purple', primary: '#8A2BE2' },
+  { name: '朱砂红', value: 'red', primary: '#FF4757' },
+]
+
+/**
+ * 预定义的语言选项
+ */
+export const LocaleOptions: LocaleOption[] = [
+  { name: '简体中文', value: 'zh-CN' },
+  { name: 'English', value: 'en-US' },
+]

package/composables/useLocale.ts

@@ -0,0 +1,37 @@
+import { Locale } from 'wot-design-uni'
+// 引入英文语言包
+import enUS from 'wot-design-uni/locale/lang/en-US'
+// 引入中文语言包
+import zhCN from 'wot-design-uni/locale/lang/zh-CN'
+import { useManualThemeStore } from '../store/manualThemeStore'
+/**
+ * 简化版系统语言切换组合式API
+ *
+ */
+export function useLocale() {
+  const store = useManualThemeStore()
+  // 系统语言切换
+  function changeSystemLocale() {
+    console.log('系统语言切换为：', store.Locale.value)
+    switch (store.Locale.value) {
+      case 'en-US':
+        Locale.use('en-US', enUS)
+        break
+      default:
+        Locale.use('zh-CN', zhCN)
+        break
+    }
+  }
+
+  // 组件挂载前初始化系统语言
+  onBeforeMount(() => {
+    changeSystemLocale()
+  })
+
+  return {
+    // 状态（只读）
+    locale: computed(() => store.Locale),
+    // 方法
+    changeSystemLocale,
+  }
+}

package/composables/useManualTheme.ts

@@ -0,0 +1,175 @@
+import { useManualThemeStore } from '../store/manualThemeStore'
+import { useLocale } from './useLocale'
+import type { LocaleOption, ThemeColorOption, ThemeMode } from './types/theme'
+
+import { LocaleOptions, themeColorOptions } from './types/theme'
+
+/**
+ * 完整版主题管理组合式API
+ *
+ * 功能特性：
+ * - 支持手动切换暗黑模式
+ * - 支持主题色选择
+ * - 支持跟随系统主题
+ * - 自动同步导航栏颜色
+ * - 持久化用户设置
+ *
+ * 适用场景：
+ * - 需要用户手动控制主题的应用
+ * - 需要主题色自定义的应用
+ * - 需要完整主题管理功能的复杂应用
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useManualTheme } from '@/composables/useManualTheme'
+ *
+ * const {
+ *   theme,
+ *   isDark,
+ *   toggleTheme,
+ *   openThemeColorPicker,
+ *   currentThemeColor,
+ *   themeVars
+ * } = useManualTheme()
+ * </script>
+ *
+ * <template>
+ *   <wd-config-provider :theme-vars="themeVars">
+ *     <view :class="{ 'dark-mode': isDark }">
+ *       <wd-button @click="toggleTheme">切换主题</wd-button>
+ *       <wd-button @click="openThemeColorPicker">选择主题色</wd-button>
+ *     </view>
+ *   </wd-config-provider>
+ * </template>
+ * ```
+ */
+export function useManualTheme() {
+  const store = useManualThemeStore()
+  const showThemeColorSheet = ref(false)
+  const showLanguageSheet = ref(false)
+  const language = useLocale()
+  /**
+   * 切换暗黑模式
+   * @param mode 指定主题模式，不传则自动切换
+   */
+  function toggleTheme(mode?: ThemeMode) {
+    store.toggleTheme(mode)
+  }
+
+  /**
+   * 打开主题色选择器
+   */
+  function openThemeColorPicker() {
+    showThemeColorSheet.value = true
+  }
+
+  /**
+   * 关闭主题色选择器
+   */
+  function closeThemeColorPicker() {
+    showThemeColorSheet.value = false
+  }
+
+  /**
+   * 选择主题色
+   * @param option 主题色选项
+   */
+  function selectThemeColor(option: ThemeColorOption) {
+    store.setCurrentThemeColor(option)
+    closeThemeColorPicker()
+  }
+
+  /**
+   * 选择语言
+   *
+   */
+  function selectLanguage(option: LocaleOption) {
+    store.setLocale(option)
+    closeLanguagePicker()
+    language.changeSystemLocale()
+  }
+
+  /**
+   * 打开语言选择器
+   */
+  function openLanguagePicker() {
+    showLanguageSheet.value = true
+  }
+
+  /**
+   * 关闭语言选择器
+   */
+  function closeLanguagePicker() {
+    showLanguageSheet.value = false
+  }
+
+  /**
+   * 初始化主题
+   */
+  function initTheme() {
+    store.initTheme()
+  }
+
+  // 组件挂载前初始化主题
+  onBeforeMount(() => {
+    initTheme()
+
+    // 监听系统主题变化
+    if (typeof uni !== 'undefined' && uni.onThemeChange) {
+      uni.onThemeChange((res) => {
+        if (store.followSystem) {
+          toggleTheme(res.theme as ThemeMode)
+        }
+      })
+    }
+  })
+
+  // 页面显示时更新导航栏颜色，确保每次切换页面时导航栏颜色都是正确的
+  onShow(() => {
+    store.setNavigationBarColor()
+  })
+
+  // 组件卸载时清理监听
+  onUnmounted(() => {
+    if (typeof uni !== 'undefined' && uni.offThemeChange) {
+      uni.offThemeChange((res) => {
+        if (store.followSystem) {
+          toggleTheme(res.theme as ThemeMode)
+        }
+      })
+    }
+  })
+
+  return {
+    // 状态
+    theme: computed(() => store.theme),
+    primary: computed(() => store.themeVars.colorTheme),
+    isDark: computed(() => store.isDark),
+    followSystem: computed(() => store.followSystem),
+    hasUserSet: computed(() => store.hasUserSet),
+    currentThemeColor: computed(() => store.currentThemeColor),
+    currentLocale: computed(() => store.Locale),
+    themeVars: computed(() => store.themeVars),
+    showThemeColorSheet,
+    showLanguageSheet,
+    // 常量
+    themeColorOptions,
+    LocaleOptions,
+
+    // 方法
+    initTheme,
+    toggleTheme,
+    setFollowSystem: store.setFollowSystem,
+    openThemeColorPicker,
+    closeThemeColorPicker,
+    selectThemeColor,
+    openLanguagePicker,
+    closeLanguagePicker,
+    selectLanguage,
+  }
+}
+
+// 导出类型和常量供外部使用
+export type { ThemeColorOption, ThemeMode, LocaleOption }
+export { themeColorOptions }

package/composables/useTheme.ts

@@ -0,0 +1,73 @@
+import type { ThemeMode } from '@/composables/types/theme'
+
+/**
+ * 简化版系统主题管理组合式API
+ *
+ * 功能特性：
+ * - 仅跟随系统主题变化
+ * - 自动响应系统主题切换
+ * - 导航栏颜色通过 theme.json 自动处理
+ * - 轻量级，无额外功能
+ *
+ * 适用场景：
+ * - 只需要系统主题适应的简单应用
+ * - 不需要用户手动控制主题的应用
+ * - 追求轻量级主题管理的应用
+ *
+ * 注意事项：
+ * - 不支持手动切换主题
+ * - 不支持主题色自定义
+ * - 导航栏颜色依赖 theme.json 配置
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useTheme } from '@/composables/useTheme'
+ *
+ * const { theme, isDark, themeVars } = useTheme()
+ * </script>
+ *
+ * <template>
+ *   <wd-config-provider :theme-vars="themeVars">
+ *     <view :class="{ 'dark-mode': isDark }">
+ *       <text>当前主题: {{ theme }}</text>
+ *     </view>
+ *   </wd-config-provider>
+ * </template>
+ * ```
+ */
+export function useTheme() {
+  const store = useThemeStore()
+
+  // 组件挂载前初始化系统主题
+  onBeforeMount(() => {
+    store.initSystemTheme()
+    // 监听系统主题变化
+    if (typeof uni !== 'undefined' && uni.onThemeChange) {
+      uni.onThemeChange((res) => {
+        // 系统主题变化时自动更新，导航栏颜色由 theme.json 自动处理
+        store.setTheme(res.theme as ThemeMode)
+        console.log('系统主题已切换至:', res.theme)
+      })
+    }
+  })
+
+  // 组件卸载时清理监听
+  onUnmounted(() => {
+    if (typeof uni !== 'undefined' && uni.offThemeChange) {
+      uni.offThemeChange((res) => {
+        store.setTheme(res.theme as ThemeMode)
+      })
+    }
+  })
+
+  return {
+    // 状态（只读）
+    theme: computed(() => store.theme),
+    isDark: computed(() => store.isDark),
+    themeVars: computed(() => store.themeVars),
+  }
+}
+
+// 导出类型供外部使用
+export type { ThemeMode }

package/index.ts

@@ -0,0 +1,25 @@
+import type { App } from 'vue'
+// import SystemSettings from './components/system-settings/system-settings.vue'
+// import { useLocale } from './composables/useLocale'
+// import { useManualTheme } from './composables/useManualTheme'
+// import request from './api'
+
+import test from './test.vue'
+
+const coms: any[] = [
+  test,
+]
+// 批量组件注册
+function install(Vue: App) {
+  coms.forEach((com) => {
+    Vue.component(com.name, com)
+  })
+}
+
+// export const coreFunctions = {
+//   useLocale,
+//   useManualTheme,
+//   request,
+// }
+
+export default install // 这个方法以后再使用的时候可以被vue.use调用

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "wui-components-v2",
+  "version": "1.0.0",
+  "description": "wui 组件库",
+  "author": "wgxshh",
+  "license": "MIT",
+  "main": "index.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/store/manualThemeStore.ts

@@ -0,0 +1,141 @@
+import { defineStore } from 'pinia'
+import type { LocaleOption, ThemeColorOption, ThemeMode, ThemeState } from '../composables/types/theme'
+import { LocaleOptions, themeColorOptions } from '../composables/types/theme'
+/**
+ * 完整版主题状态管理
+ * 支持手动切换主题、主题色选择、跟随系统主题等完整功能
+ */
+export const useManualThemeStore = defineStore('manualTheme', {
+  state: (): ThemeState => ({
+    theme: 'light',
+    followSystem: true, // 是否跟随系统主题
+    hasUserSet: false, // 用户是否手动设置过主题
+    currentThemeColor: themeColorOptions[0],
+    Locale: LocaleOptions[0],
+    themeVars: {
+      darkBackground: '#0f0f0f',
+      darkBackground2: '#1a1a1a',
+      darkBackground3: '#242424',
+      darkBackground4: '#2f2f2f',
+      darkBackground5: '#3d3d3d',
+      darkBackground6: '#4a4a4a',
+      darkBackground7: '#606060',
+      darkColor: '#ffffff',
+      darkColor2: '#e0e0e0',
+      darkColor3: '#a0a0a0',
+      colorTheme: themeColorOptions[0].primary,
+    },
+  }),
+
+  getters: {
+    isDark: state => state.theme === 'dark',
+  },
+
+  actions: {
+    /**
+     * 手动切换主题
+     * @param mode 指定主题模式，不传则自动切换
+     */
+    toggleTheme(mode?: ThemeMode) {
+      this.theme = mode || (this.theme === 'light' ? 'dark' : 'light')
+      this.hasUserSet = true // 标记用户已手动设置
+      this.followSystem = false // 不再跟随系统
+      this.setNavigationBarColor()
+    },
+
+    /**
+     * 设置是否跟随系统主题
+     * @param follow 是否跟随系统
+     */
+    setFollowSystem(follow: boolean) {
+      this.followSystem = follow
+      if (follow) {
+        this.hasUserSet = false
+        this.initTheme() // 重新获取系统主题
+      }
+    },
+
+    /**
+     * 设置导航栏颜色
+     */
+    setNavigationBarColor() {
+      uni.setNavigationBarColor({
+        frontColor: this.theme === 'light' ? '#000000' : '#ffffff',
+        backgroundColor: this.theme === 'light' ? '#ffffff' : '#000000',
+      })
+    },
+
+    /**
+     * 设置主题色
+     * @param color 主题色选项
+     */
+    setCurrentThemeColor(color: ThemeColorOption) {
+      this.currentThemeColor = color
+      this.themeVars.colorTheme = color.primary
+    },
+
+    /**
+     * 设置语言
+     */
+    setLocale(locale: LocaleOption) {
+      this.Locale = locale
+    },
+    /**
+     * 获取系统主题
+     * @returns 系统主题模式
+     */
+    getSystemTheme(): ThemeMode {
+      try {
+        // #ifdef MP-WEIXIN
+        // 微信小程序使用 getAppBaseInfo
+        const appBaseInfo = uni.getAppBaseInfo()
+        if (appBaseInfo && appBaseInfo.theme) {
+          return appBaseInfo.theme as ThemeMode
+        }
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        // 其他平台使用 getSystemInfoSync
+        const systemInfo = uni.getSystemInfoSync()
+        if (systemInfo && systemInfo.theme) {
+          return systemInfo.theme as ThemeMode
+        }
+        // #endif
+      }
+      catch (error) {
+        console.warn('获取系统主题失败:', error)
+      }
+      return 'light' // 默认返回 light
+    },
+
+    /**
+     * 初始化主题
+     */
+    initTheme() {
+      // 如果用户已手动设置且不跟随系统，保持当前主题
+      if (this.hasUserSet && !this.followSystem) {
+        console.log('使用用户设置的主题:', this.theme)
+        this.setNavigationBarColor()
+        return
+      }
+
+      // 获取系统主题
+      const systemTheme = this.getSystemTheme()
+
+      // 如果是首次启动或跟随系统，使用系统主题
+      if (!this.hasUserSet || this.followSystem) {
+        this.theme = systemTheme
+        if (!this.hasUserSet) {
+          this.followSystem = true
+          console.log('首次启动，使用系统主题:', this.theme)
+        }
+        else {
+          console.log('跟随系统主题:', this.theme)
+        }
+      }
+
+      this.setNavigationBarColor()
+    },
+
+  },
+})

package/store/themeStore.ts

@@ -0,0 +1,74 @@
+import { defineStore } from 'pinia'
+import type { SystemThemeState, ThemeMode } from '../composables/types/theme'
+import { themeColorOptions } from '../composables/types/theme'
+
+/**
+ * 简化版系统主题状态管理
+ * 仅支持跟随系统主题，不提供手动切换功能
+ * 导航栏颜色通过 theme.json 自动处理
+ */
+export const useThemeStore = defineStore('theme', {
+  state: (): SystemThemeState => ({
+    theme: 'light',
+    themeVars: {
+      darkBackground: '#0f0f0f',
+      darkBackground2: '#1a1a1a',
+      darkBackground3: '#242424',
+      darkBackground4: '#2f2f2f',
+      darkBackground5: '#3d3d3d',
+      darkBackground6: '#4a4a4a',
+      darkBackground7: '#606060',
+      darkColor: '#ffffff',
+      darkColor2: '#e0e0e0',
+      darkColor3: '#a0a0a0',
+      colorTheme: themeColorOptions[0].primary,
+    },
+  }),
+
+  getters: {
+    isDark: state => state.theme === 'dark',
+  },
+
+  actions: {
+    /**
+     * 获取系统主题
+     * @returns 系统主题模式
+     */
+    getSystemTheme(): ThemeMode {
+      // #ifdef MP-WEIXIN
+      // 微信小程序使用 getAppBaseInfo
+      const appBaseInfo = uni.getAppBaseInfo()
+      if (appBaseInfo && appBaseInfo.theme) {
+        return appBaseInfo.theme as ThemeMode
+      }
+      // #endif
+
+      // #ifndef MP-WEIXIN
+      // 其他平台使用 getSystemInfoSync
+      const systemInfo = uni.getSystemInfoSync()
+      if (systemInfo && systemInfo.theme) {
+        return systemInfo.theme as ThemeMode
+      }
+      // #endif
+
+      return 'light' // 默认返回 light
+    },
+
+    /**
+     * 设置主题（仅内部使用）
+     * @param theme 主题模式
+     */
+    setTheme(theme: ThemeMode) {
+      this.theme = theme
+    },
+
+    /**
+     * 初始化系统主题
+     */
+    initSystemTheme() {
+      const systemTheme = this.getSystemTheme()
+      this.theme = systemTheme
+      console.log('初始化系统主题:', this.theme)
+    },
+  },
+})

package/test.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <view>
+    sadsadsa
+  </view>
+</template>