wui-components-v2 1.1.70 → 1.1.72

package/composables/useManualTheme.ts

@@ -1,179 +1,179 @@
-import { computed, onBeforeMount, onUnmounted, ref } from 'vue'
-import { onShow } from '@dcloudio/uni-app'
-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)
-    store.setNavigationBarColor()
-    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 }
+import { computed, onBeforeMount, onUnmounted, ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+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)
+    store.setNavigationBarColor()
+    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/useSectionMenus.ts

@@ -1,120 +1,120 @@
-import { onUnmounted, ref } from 'vue'
-import { fastmenu, menuCount } from '../api/menu'
-
-export interface MenuCount {
-  title: string
-  id: string
-  count: number
-  icon: string
-  pageType: string
-}
-export function useSectionMenus(isInterval: boolean = false) {
-  const messageBar = ref<MenuCount | null>(null)
-  const quickPanel = ref<MenuCount[]>([])
-  const rightSidebar01 = ref<MenuCount[]>([])
-  const rightSidebar02 = ref<MenuCount[]>([])
-  // 手动调用并启动定时器
-  let intervalId: ReturnType<typeof setInterval> | null = null
-
-  const getmenuCount = async (id: string) => {
-    try {
-      if (id) {
-        const res = await menuCount(id)
-        return res.count
-      }
-      return 0
-    }
-    catch (error) {
-      console.log(error)
-      return 0
-    }
-  }
-
-  // 组件卸载时清理定时器（可选）
-  onUnmounted(() => {
-    if (intervalId)
-      clearInterval(intervalId)
-  })
-
-  const updateMenuCounts = async () => {
-    try {
-      // 立即执行一次
-      if (messageBar.value?.id) {
-        const count = await getmenuCount(messageBar.value.id)
-        messageBar.value = { ...messageBar.value, count }
-      }
-
-      if (quickPanel.value.length > 0) {
-        quickPanel.value = await Promise.all(
-          quickPanel.value.map(async (item) => {
-            const count = await getmenuCount(item.id)
-            return { ...item, count }
-          }),
-        )
-      }
-
-      // 设置定时器，每隔 1000*60*2 秒执行一次
-      const intervalId = setInterval(async () => {
-        try {
-          if (messageBar.value?.id) {
-            const count = await getmenuCount(messageBar.value.id)
-            messageBar.value = { ...messageBar.value, count }
-          }
-
-          if (quickPanel.value.length > 0) {
-            quickPanel.value = await Promise.all(
-              quickPanel.value.map(async (item) => {
-                const count = await getmenuCount(item.id)
-                return { ...item, count }
-              }),
-            )
-          }
-        }
-        catch (error) {
-          console.log(error)
-        }
-      }, 1000 * 60 * 2)
-
-      // 返回定时器 ID，方便后续清理
-      return intervalId
-    }
-    catch (error) {
-      console.log(error)
-      return null
-    }
-  }
-
-  const getSectionMenu = async () => {
-    try {
-      const res = await fastmenu()
-      if (res.fastMenu) {
-        messageBar.value = res.fastMenu.MessageBar ? res.fastMenu.MessageBar[0] : null
-        quickPanel.value = res.fastMenu?.QuickPanel || []
-        rightSidebar01.value = res.fastMenu?.RightSidebar01 || []
-        rightSidebar02.value = res.fastMenu?.RightSidebar02 || []
-        // 清除之前的定时器（防止重复创建）
-        if (intervalId)
-          clearInterval(intervalId)
-        // 启动定时器
-        if (isInterval) {
-          intervalId = await updateMenuCounts()
-        }
-      }
-      else {
-        messageBar.value = null
-        quickPanel.value = []
-      }
-    }
-    catch (error) {
-      console.log(error)
-    }
-  }
-  getSectionMenu()
-
-  return {
-    messageBar,
-    quickPanel,
-    rightSidebar01,
-    rightSidebar02,
-  }
-}
+import { onUnmounted, ref } from 'vue'
+import { fastmenu, menuCount } from '../api/menu'
+
+export interface MenuCount {
+  title: string
+  id: string
+  count: number
+  icon: string
+  pageType: string
+}
+export function useSectionMenus(isInterval: boolean = false) {
+  const messageBar = ref<MenuCount | null>(null)
+  const quickPanel = ref<MenuCount[]>([])
+  const rightSidebar01 = ref<MenuCount[]>([])
+  const rightSidebar02 = ref<MenuCount[]>([])
+  // 手动调用并启动定时器
+  let intervalId: ReturnType<typeof setInterval> | null = null
+
+  const getmenuCount = async (id: string) => {
+    try {
+      if (id) {
+        const res = await menuCount(id)
+        return res.count
+      }
+      return 0
+    }
+    catch (error) {
+      console.log(error)
+      return 0
+    }
+  }
+
+  // 组件卸载时清理定时器（可选）
+  onUnmounted(() => {
+    if (intervalId)
+      clearInterval(intervalId)
+  })
+
+  const updateMenuCounts = async () => {
+    try {
+      // 立即执行一次
+      if (messageBar.value?.id) {
+        const count = await getmenuCount(messageBar.value.id)
+        messageBar.value = { ...messageBar.value, count }
+      }
+
+      if (quickPanel.value.length > 0) {
+        quickPanel.value = await Promise.all(
+          quickPanel.value.map(async (item) => {
+            const count = await getmenuCount(item.id)
+            return { ...item, count }
+          }),
+        )
+      }
+
+      // 设置定时器，每隔 1000*60*2 秒执行一次
+      const intervalId = setInterval(async () => {
+        try {
+          if (messageBar.value?.id) {
+            const count = await getmenuCount(messageBar.value.id)
+            messageBar.value = { ...messageBar.value, count }
+          }
+
+          if (quickPanel.value.length > 0) {
+            quickPanel.value = await Promise.all(
+              quickPanel.value.map(async (item) => {
+                const count = await getmenuCount(item.id)
+                return { ...item, count }
+              }),
+            )
+          }
+        }
+        catch (error) {
+          console.log(error)
+        }
+      }, 1000 * 60 * 2)
+
+      // 返回定时器 ID，方便后续清理
+      return intervalId
+    }
+    catch (error) {
+      console.log(error)
+      return null
+    }
+  }
+
+  const getSectionMenu = async () => {
+    try {
+      const res = await fastmenu()
+      if (res.fastMenu) {
+        messageBar.value = res.fastMenu.MessageBar ? res.fastMenu.MessageBar[0] : null
+        quickPanel.value = res.fastMenu?.QuickPanel || []
+        rightSidebar01.value = res.fastMenu?.RightSidebar01 || []
+        rightSidebar02.value = res.fastMenu?.RightSidebar02 || []
+        // 清除之前的定时器（防止重复创建）
+        if (intervalId)
+          clearInterval(intervalId)
+        // 启动定时器
+        if (isInterval) {
+          intervalId = await updateMenuCounts()
+        }
+      }
+      else {
+        messageBar.value = null
+        quickPanel.value = []
+      }
+    }
+    catch (error) {
+      console.log(error)
+    }
+  }
+  getSectionMenu()
+
+  return {
+    messageBar,
+    quickPanel,
+    rightSidebar01,
+    rightSidebar02,
+  }
+}