wui-components-v2 1.1.69 → 1.1.71

package/components/wui-system-settings/wui-system-settings.vue

@@ -1,144 +1,144 @@
-<script setup lang="ts">
-import { computed, defineOptions } from 'vue'
-import { useManualTheme } from '../../composables/useManualTheme'
-import { useLanguageStore } from '../../store/language'
-import type { LocaleOption, ThemeColorOption } from '../../composables/useManualTheme'
-import demoBlock from '../demo-block/demo-block.vue'
-
-defineOptions({
-  name: 'WuiSystemSettings',
-})
-const {
-  theme,
-  toggleTheme,
-  currentThemeColor,
-  showThemeColorSheet,
-  themeColorOptions,
-  openThemeColorPicker,
-  closeThemeColorPicker,
-  selectThemeColor,
-  LocaleOptions,
-  primary,
-  currentLocale,
-  showLanguageSheet,
-  openLanguagePicker,
-  closeLanguagePicker,
-  selectLanguage,
-} = useManualTheme()
-
-const languageStore = useLanguageStore()
-
-const isDark = computed({
-  get() {
-    return theme.value === 'dark'
-  },
-  set() {
-    toggleTheme()
-  },
-})
-
-// Cell / CellGroup 暗黑内联样式
-const settingsCellStyle = computed(() => ({
-  backgroundColor: isDark.value ? '#161616' : '#fff',
-  borderBottom: isDark.value ? '1px solid rgba(255,255,255,0.04)' : 'none',
-}))
-
-const settingsGroupStyle = computed(() => ({
-  backgroundColor: isDark.value ? '#111111' : 'transparent',
-  borderRadius: isDark.value ? '10px' : '0',
-}))
-// 处理主题色选择
-function handleThemeColorSelect(option: ThemeColorOption) {
-  selectThemeColor(option)
-}
-
-// 处理语言选择
-function handleLanguageSelect(option: LocaleOption) {
-  selectLanguage(option)
-}
-</script>
-
-<template>
-  <view class="settings-page" :style="{ backgroundColor: isDark ? '#1B1B1E' : '#F8F9FB' }">
-    <demo-block :title="languageStore.t('系统设置')" transparent>
-      <wd-cell-group border custom-class="rounded-2! overflow-hidden" :custom-style="settingsGroupStyle">
-        <wd-cell :title="languageStore.t('暗黑模式')" :custom-style="settingsCellStyle">
-          <wd-switch v-model="isDark" size="18px" />
-        </wd-cell>
-        <wd-cell
-          :title="languageStore.t('选择主题色')"
-          is-link
-          @click="openThemeColorPicker"
-          :custom-style="settingsCellStyle"
-        >
-          <view class="flex items-center justify-end gap-2">
-            <view class="h-4 w-4 rounded-full" :style="{ backgroundColor: currentThemeColor.primary }" />
-            <text :style="{ color: isDark ? '#e8e8e8' : '#333' }">{{ currentThemeColor.name }}</text>
-          </view>
-        </wd-cell>
-        <wd-cell
-          :title="languageStore.t('选择语言')"
-          is-link
-          @click="openLanguagePicker"
-          :custom-style="settingsCellStyle"
-        >
-          <view class="flex items-center justify-end gap-2">
-            <text :style="{ color: isDark ? '#e8e8e8' : '#333' }">{{ currentLocale.name }}</text>
-          </view>
-        </wd-cell>
-      </wd-cell-group>
-    </demo-block>
-    <!-- 主题色选择 ActionSheet -->
-    <wd-action-sheet
-      v-model="showThemeColorSheet"
-      :title="languageStore.t('选择主题色')"
-      :close-on-click-action="true"
-      @cancel="closeThemeColorPicker"
-    >
-      <view class="px-4 pb-4">
-        <view
-          v-for="option in themeColorOptions"
-          :key="option.value"
-          class="flex items-center justify-between border-b border-gray-100 py-3 last:border-b-0 dark:border-gray-700"
-          @click="handleThemeColorSelect(option)"
-        >
-          <view class="flex items-center gap-3">
-            <view
-              class="h-6 w-6 border-2 border-gray-200 rounded-full dark:border-gray-600"
-              :style="{ backgroundColor: option.primary }"
-            />
-            <text class="text-4 text-gray-800 dark:text-gray-200">
-              {{ option.name }}
-            </text>
-          </view>
-          <wd-icon v-if="currentThemeColor.value === option.value" name="check" :color="option.primary" size="20px" />
-        </view>
-      </view>
-      <wd-gap :height="50" />
-    </wd-action-sheet>
-    <!-- 语言选择选择 ActionSheet -->
-    <wd-action-sheet
-      v-model="showLanguageSheet"
-      :title="languageStore.t('选择语言')"
-      :close-on-click-action="true"
-      @cancel="closeLanguagePicker"
-    >
-      <view class="px-4 pb-4">
-        <view
-          v-for="option in LocaleOptions"
-          :key="option.value"
-          class="flex items-center justify-between border-b border-gray-100 py-3 last:border-b-0 dark:border-gray-700"
-          @click="handleLanguageSelect(option)"
-        >
-          <view class="flex items-center gap-3">
-            <text class="text-4 text-gray-800 dark:text-gray-200">
-              {{ option.name }}
-            </text>
-          </view>
-          <wd-icon v-if="currentLocale.value === option.value" name="check" :color="primary" size="20px" />
-        </view>
-      </view>
-      <wd-gap :height="50" />
-    </wd-action-sheet>
-  </view>
-</template>
+<script setup lang="ts">
+import { computed, defineOptions } from 'vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+import { useLanguageStore } from '../../store/language'
+import type { LocaleOption, ThemeColorOption } from '../../composables/useManualTheme'
+import demoBlock from '../demo-block/demo-block.vue'
+
+defineOptions({
+  name: 'WuiSystemSettings',
+})
+const {
+  theme,
+  toggleTheme,
+  currentThemeColor,
+  showThemeColorSheet,
+  themeColorOptions,
+  openThemeColorPicker,
+  closeThemeColorPicker,
+  selectThemeColor,
+  LocaleOptions,
+  primary,
+  currentLocale,
+  showLanguageSheet,
+  openLanguagePicker,
+  closeLanguagePicker,
+  selectLanguage,
+} = useManualTheme()
+
+const languageStore = useLanguageStore()
+
+const isDark = computed({
+  get() {
+    return theme.value === 'dark'
+  },
+  set() {
+    toggleTheme()
+  },
+})
+
+// Cell / CellGroup 暗黑内联样式
+const settingsCellStyle = computed(() => ({
+  backgroundColor: isDark.value ? '#161616' : '#fff',
+  borderBottom: isDark.value ? '1px solid rgba(255,255,255,0.04)' : 'none',
+}))
+
+const settingsGroupStyle = computed(() => ({
+  backgroundColor: isDark.value ? '#111111' : 'transparent',
+  borderRadius: isDark.value ? '10px' : '0',
+}))
+// 处理主题色选择
+function handleThemeColorSelect(option: ThemeColorOption) {
+  selectThemeColor(option)
+}
+
+// 处理语言选择
+function handleLanguageSelect(option: LocaleOption) {
+  selectLanguage(option)
+}
+</script>
+
+<template>
+  <view class="settings-page" :style="{ backgroundColor: isDark ? '#1B1B1E' : '#F8F9FB' }">
+    <demo-block :title="languageStore.t('系统设置')" transparent>
+      <wd-cell-group border custom-class="rounded-2! overflow-hidden" :custom-style="settingsGroupStyle">
+        <wd-cell :title="languageStore.t('暗黑模式')" :custom-style="settingsCellStyle">
+          <wd-switch v-model="isDark" size="18px" />
+        </wd-cell>
+        <wd-cell
+          :title="languageStore.t('选择主题色')"
+          is-link
+          @click="openThemeColorPicker"
+          :custom-style="settingsCellStyle"
+        >
+          <view class="flex items-center justify-end gap-2">
+            <view class="h-4 w-4 rounded-full" :style="{ backgroundColor: currentThemeColor.primary }" />
+            <text :style="{ color: isDark ? '#e8e8e8' : '#333' }">{{ currentThemeColor.name }}</text>
+          </view>
+        </wd-cell>
+        <wd-cell
+          :title="languageStore.t('选择语言')"
+          is-link
+          @click="openLanguagePicker"
+          :custom-style="settingsCellStyle"
+        >
+          <view class="flex items-center justify-end gap-2">
+            <text :style="{ color: isDark ? '#e8e8e8' : '#333' }">{{ currentLocale.name }}</text>
+          </view>
+        </wd-cell>
+      </wd-cell-group>
+    </demo-block>
+    <!-- 主题色选择 ActionSheet -->
+    <wd-action-sheet
+      v-model="showThemeColorSheet"
+      :title="languageStore.t('选择主题色')"
+      :close-on-click-action="true"
+      @cancel="closeThemeColorPicker"
+    >
+      <view class="px-4 pb-4">
+        <view
+          v-for="option in themeColorOptions"
+          :key="option.value"
+          class="flex items-center justify-between border-b border-gray-100 py-3 last:border-b-0 dark:border-gray-700"
+          @click="handleThemeColorSelect(option)"
+        >
+          <view class="flex items-center gap-3">
+            <view
+              class="h-6 w-6 border-2 border-gray-200 rounded-full dark:border-gray-600"
+              :style="{ backgroundColor: option.primary }"
+            />
+            <text class="text-4 text-gray-800 dark:text-gray-200">
+              {{ option.name }}
+            </text>
+          </view>
+          <wd-icon v-if="currentThemeColor.value === option.value" name="check" :color="option.primary" size="20px" />
+        </view>
+      </view>
+      <wd-gap :height="50" />
+    </wd-action-sheet>
+    <!-- 语言选择选择 ActionSheet -->
+    <wd-action-sheet
+      v-model="showLanguageSheet"
+      :title="languageStore.t('选择语言')"
+      :close-on-click-action="true"
+      @cancel="closeLanguagePicker"
+    >
+      <view class="px-4 pb-4">
+        <view
+          v-for="option in LocaleOptions"
+          :key="option.value"
+          class="flex items-center justify-between border-b border-gray-100 py-3 last:border-b-0 dark:border-gray-700"
+          @click="handleLanguageSelect(option)"
+        >
+          <view class="flex items-center gap-3">
+            <text class="text-4 text-gray-800 dark:text-gray-200">
+              {{ option.name }}
+            </text>
+          </view>
+          <wd-icon v-if="currentLocale.value === option.value" name="check" :color="primary" size="20px" />
+        </view>
+      </view>
+      <wd-gap :height="50" />
+    </wd-action-sheet>
+  </view>
+</template>

package/components/wui-tabbar/wui-tabbar.vue

@@ -1,106 +1,106 @@
-<script lang="ts" setup>
-import { useRoute, useRouter } from 'uni-mini-router'
-import { defineOptions, defineProps, nextTick, onMounted } from 'vue'
-import { useManualTheme } from '../../composables/useManualTheme'
-import globalLoading from '../../components/global-loading/global-loading.vue'
-import globalToast from '../../components/global-toast/global-toast.vue'
-import globalMessage from '../../components/global-message/global-message.vue'
-import { useTabbar } from '../../composables/useTabbar'
-import type { TabbarItem } from '../../composables/useTabbar'
-
-defineOptions({
-  name: 'WuiTabbar',
-})
-const props = defineProps<Props>()
-// 定义 Props 类型
-interface Props {
-  tabbarItems: TabbarItem[]
-}
-const router = useRouter()
-
-const route = useRoute()
-
-const { themeVars, theme, currentThemeColor } = useManualTheme()
-
-const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } = useTabbar(props.tabbarItems)
-
-function handleTabbarChange({ value }: { value: string }) {
-  setTabbarItemActive(value)
-  router.pushTab({ name: value })
-}
-
-onMounted(() => {
-  // #ifdef APP-PLUS
-  uni.hideTabBar()
-  // #endif
-  nextTick(() => {
-    if (route.name && route.name !== activeTabbar.value.name) {
-      setTabbarItemActive(route.name)
-    }
-  })
-})
-</script>
-
-<script lang="ts">
-export default {
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: 'shared',
-  },
-}
-</script>
-
-<template>
-  <wd-config-provider :theme-vars="themeVars" :custom-class="`page-wraper ${theme}`" :theme="theme">
-    <slot />
-    <wd-tabbar
-      :model-value="activeTabbar.name"
-      bordered
-      safe-area-inset-bottom
-      placeholder
-      fixed
-      custom-class="z-14!"
-      :active-color="currentThemeColor.primary"
-      @change="handleTabbarChange"
-    >
-      <wd-tabbar-item
-        v-for="(item, index) in tabbarList"
-        :key="index"
-        :name="item.name"
-        :value="getTabbarItemValue(item.name)"
-        :title="item.title"
-        :icon="item.icon"
-      >
-        <!-- 使用 icon 插槽自定义图标 -->
-        <template v-if="item.activeIcon" #icon="{ active }">
-          <image :src="active ? item.activeIcon : item.inactiveIcon" class="custom-icon" />
-        </template>
-      </wd-tabbar-item>
-    </wd-tabbar>
-    <!-- #ifdef MP-WEIXIN -->
-    <privacy-popup />
-    <!-- #endif -->
-    <wd-notify />
-    <wd-toast />
-    <global-loading />
-    <global-toast />
-    <global-message />
-  </wd-config-provider>
-</template>
-
-<style lang="scss">
-.page-wraper {
-  min-height: calc(100vh - var(--window-top));
-  box-sizing: border-box;
-  background: #f8f9fb;
-}
-
-.wot-theme-dark.page-wraper {
-  background: #1b1b1e;
-}
-.custom-icon {
-  width: 52rpx;
-  height: 52rpx;
-}
-</style>
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'uni-mini-router'
+import { defineOptions, defineProps, nextTick, onMounted } from 'vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+import globalLoading from '../../components/global-loading/global-loading.vue'
+import globalToast from '../../components/global-toast/global-toast.vue'
+import globalMessage from '../../components/global-message/global-message.vue'
+import { useTabbar } from '../../composables/useTabbar'
+import type { TabbarItem } from '../../composables/useTabbar'
+
+defineOptions({
+  name: 'WuiTabbar',
+})
+const props = defineProps<Props>()
+// 定义 Props 类型
+interface Props {
+  tabbarItems: TabbarItem[]
+}
+const router = useRouter()
+
+const route = useRoute()
+
+const { themeVars, theme, currentThemeColor } = useManualTheme()
+
+const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } = useTabbar(props.tabbarItems)
+
+function handleTabbarChange({ value }: { value: string }) {
+  setTabbarItemActive(value)
+  router.pushTab({ name: value })
+}
+
+onMounted(() => {
+  // #ifdef APP-PLUS
+  uni.hideTabBar()
+  // #endif
+  nextTick(() => {
+    if (route.name && route.name !== activeTabbar.value.name) {
+      setTabbarItemActive(route.name)
+    }
+  })
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<template>
+  <wd-config-provider :theme-vars="themeVars" :custom-class="`page-wraper ${theme}`" :theme="theme">
+    <slot />
+    <wd-tabbar
+      :model-value="activeTabbar.name"
+      bordered
+      safe-area-inset-bottom
+      placeholder
+      fixed
+      custom-class="z-14!"
+      :active-color="currentThemeColor.primary"
+      @change="handleTabbarChange"
+    >
+      <wd-tabbar-item
+        v-for="(item, index) in tabbarList"
+        :key="index"
+        :name="item.name"
+        :value="getTabbarItemValue(item.name)"
+        :title="item.title"
+        :icon="item.icon"
+      >
+        <!-- 使用 icon 插槽自定义图标 -->
+        <template v-if="item.activeIcon" #icon="{ active }">
+          <image :src="active ? item.activeIcon : item.inactiveIcon" class="custom-icon" />
+        </template>
+      </wd-tabbar-item>
+    </wd-tabbar>
+    <!-- #ifdef MP-WEIXIN -->
+    <privacy-popup />
+    <!-- #endif -->
+    <wd-notify />
+    <wd-toast />
+    <global-loading />
+    <global-toast />
+    <global-message />
+  </wd-config-provider>
+</template>
+
+<style lang="scss">
+.page-wraper {
+  min-height: calc(100vh - var(--window-top));
+  box-sizing: border-box;
+  background: #f8f9fb;
+}
+
+.wot-theme-dark.page-wraper {
+  background: #1b1b1e;
+}
+.custom-icon {
+  width: 52rpx;
+  height: 52rpx;
+}
+</style>