fix: 🐛 修复手机打开深色模式，导致看不清

src/composables/useTheme.ts

@@ -1,180 +1,181 @@
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
+import type { ConfigProviderThemeVars } from "wot-design-uni";
 
 // 定义主题色选项
 export interface ThemeColorOption {
-  name: string
-  value: string
-  primary: string
+  name: string;
+  value: string;
+  primary: string;
 }
 
 // 预定义的主题色选项
 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' },
-]
+  { 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" },
+];
 
 // 主题状态store
-const useThemeStore = defineStore('theme', {
+const useThemeStore = defineStore("theme", {
   state: () => ({
-    theme: 'light' as 'light' | 'dark',
+    theme: "light" as "light" | "dark",
     followSystem: false, // 是否跟随系统主题
-    hasUserSet: false, // 用户是否手动设置过主题
+    hasUserSet: true, // 用户是否手动设置过主题
     currentThemeColor: themeColorOptions[0] as ThemeColorOption,
     showThemeColorSheet: false,
     themeVars: {
-      darkBackground: '#0f0f0f',
-      darkBackground2: '#1a1a1a',
-      darkBackground3: '#242424',
-      darkBackground4: '#2f2f2f',
-      darkBackground5: '#3d3d3d',
-      darkBackground6: '#4a4a4a',
-      darkBackground7: '#606060',
-      darkColor: '#ffffff',
-      darkColor2: '#e0e0e0',
-      darkColor3: '#a0a0a0',
+      darkBackground: "#0f0f0f",
+      darkBackground2: "#1a1a1a",
+      darkBackground3: "#242424",
+      darkBackground4: "#2f2f2f",
+      darkBackground5: "#3d3d3d",
+      darkBackground6: "#4a4a4a",
+      darkBackground7: "#606060",
+      darkColor: "#ffffff",
+      darkColor2: "#e0e0e0",
+      darkColor3: "#a0a0a0",
       colorTheme: themeColorOptions[0].primary,
     } as ConfigProviderThemeVars,
   }),
 
   getters: {
-    isDark: state => state.theme === 'dark',
+    isDark: (state) => state.theme === "dark",
   },
   actions: {
     /* 手动切换主题 */
-    toggleTheme(mode?: 'light' | 'dark') {
-      this.theme = mode || (this.theme === 'light' ? 'dark' : 'light')
-      this.hasUserSet = true // 标记用户已手动设置
-      this.followSystem = false // 不再跟随系统
-      this.setNavigationBarColor()
+    toggleTheme(mode?: "light" | "dark") {
+      this.theme = mode || (this.theme === "light" ? "dark" : "light");
+      this.hasUserSet = true; // 标记用户已手动设置
+      this.followSystem = false; // 不再跟随系统
+      this.setNavigationBarColor();
     },
 
     /* 设置是否跟随系统主题 */
     setFollowSystem(follow: boolean) {
-      this.followSystem = follow
+      console.log(follow, "  跟随系统");
+
+      this.followSystem = follow;
       if (follow) {
-        this.hasUserSet = false
-        this.initTheme() // 重新获取系统主题
+        this.hasUserSet = false;
+        this.initTheme(); // 重新获取系统主题
       }
     },
 
     /* 设置导航栏颜色 */
     setNavigationBarColor() {
       uni.setNavigationBarColor({
-        frontColor: this.theme === 'light' ? '#000000' : '#ffffff',
-        backgroundColor: this.theme === 'light' ? '#ffffff' : '#000000',
-      })
+        frontColor: this.theme === "light" ? "#000000" : "#ffffff",
+        backgroundColor: this.theme === "light" ? "#ffffff" : "#000000",
+      });
     },
 
     /* 设置主题色 */
     setCurrentThemeColor(color: ThemeColorOption) {
-      this.currentThemeColor = color
-      this.themeVars.colorTheme = color.primary
+      this.currentThemeColor = color;
+      this.themeVars.colorTheme = color.primary;
     },
 
     /* 获取系统主题 */
-    getSystemTheme(): 'light' | 'dark' {
+    getSystemTheme(): "light" | "dark" {
       try {
         // #ifdef MP-WEIXIN
         // 微信小程序使用 getAppBaseInfo
-        const appBaseInfo = uni.getAppBaseInfo()
+        const appBaseInfo = uni.getAppBaseInfo();
         if (appBaseInfo && appBaseInfo.theme) {
-          return appBaseInfo.theme as 'light' | 'dark'
+          return appBaseInfo.theme as "light" | "dark";
         }
         // #endif
 
         // #ifndef MP-WEIXIN
         // 其他平台使用 getSystemInfoSync
-        const systemInfo = uni.getSystemInfoSync()
+        const systemInfo = uni.getSystemInfoSync();
         if (systemInfo && systemInfo.theme) {
-          return systemInfo.theme as 'light' | 'dark'
+          return systemInfo.theme as "light" | "dark";
         }
         // #endif
+      } catch (error) {
+        console.warn("获取系统主题失败:", error);
       }
-      catch (error) {
-        console.warn('获取系统主题失败:', error)
-      }
-      return 'light' // 默认返回 light
+      return "light"; // 默认返回 light
     },
 
     /* 初始化主题 */
     initTheme() {
       // 如果用户已手动设置且不跟随系统，保持当前主题
       if (this.hasUserSet && !this.followSystem) {
-        console.log('使用用户设置的主题:', this.theme)
-        this.setNavigationBarColor()
-        return
+        console.log("使用用户设置的主题:", this.theme);
+        this.theme = "light";
+        this.setNavigationBarColor();
+        return;
       }
 
       // 获取系统主题
-      const systemTheme = this.getSystemTheme()
+      const systemTheme = this.getSystemTheme();
 
       // 如果是首次启动或跟随系统，使用系统主题
       if (!this.hasUserSet || this.followSystem) {
-        this.theme = systemTheme
+        this.theme = systemTheme;
         if (!this.hasUserSet) {
-          this.followSystem = true
-          console.log('首次启动，使用系统主题:', this.theme)
-        }
-        else {
-          console.log('跟随系统主题:', this.theme)
+          this.followSystem = true;
+          console.log("首次启动，使用系统主题:", this.theme);
+        } else {
+          console.log("跟随系统主题:", this.theme);
         }
       }
 
-      this.setNavigationBarColor()
+      this.setNavigationBarColor();
     },
   },
-})
+});
 
 export function useTheme() {
-  const store = useThemeStore()
-  const showThemeColorSheet = ref(false)
+  const store = useThemeStore();
+  const showThemeColorSheet = ref(false);
 
   /* 切换暗黑模式 */
-  function toggleTheme(mode?: 'light' | 'dark') {
-    store.toggleTheme(mode)
+  function toggleTheme(mode?: "light" | "dark") {
+    store.toggleTheme(mode);
   }
 
   /* 打开主题色选择 */
   function openThemeColorPicker() {
-    showThemeColorSheet.value = true
+    showThemeColorSheet.value = true;
   }
 
   /* 关闭主题色选择 */
   function closeThemeColorPicker() {
-    showThemeColorSheet.value = false
+    showThemeColorSheet.value = false;
   }
 
   /* 选择主题色 */
   function selectThemeColor(option: ThemeColorOption) {
-    store.setCurrentThemeColor(option)
-    closeThemeColorPicker()
+    store.setCurrentThemeColor(option);
+    closeThemeColorPicker();
   }
 
   /* 初始化theme */
   function initTheme() {
-    store.initTheme()
+    store.initTheme();
   }
 
   onBeforeMount(() => {
-    initTheme()
+    initTheme();
     if (CommonUtil.isFunction(uni.onThemeChange)) {
       uni.onThemeChange((res) => {
-        toggleTheme(res.theme)
-      })
+        toggleTheme(res.theme);
+      });
     }
-  })
+  });
 
   onUnmounted(() => {
     if (CommonUtil.isFunction(uni.offThemeChange)) {
       uni.offThemeChange((res) => {
-        toggleTheme(res.theme)
-      })
+        toggleTheme(res.theme);
+      });
     }
-  })
+  });
 
   return {
     theme: computed(() => store.theme),
@@ -190,5 +191,5 @@ export function useTheme() {
     openThemeColorPicker,
     closeThemeColorPicker,
     selectThemeColor,
-  }
+  };
 }

src/config/index.ts

@@ -4,8 +4,8 @@ const mapEnvVersion = {
    */
   // develop: "http://192.168.1.166:8080/jeecg-boot",
   // develop: "http://192.168.0.217:8080/jeecg-boot",
-  // develop: "https://api.qlapp.cn/jeecgboot",
-  develop: "http://192.168.0.11:8080/jeecg-boot",
+  develop: "https://api.qlapp.cn/jeecgboot",
+  // develop: "http://192.168.0.11:8080/jeecg-boot",
   /**
    * 	体验版
    */

src/layouts/default.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { themeVars, theme } = useTheme()
+const { themeVars, theme } = useTheme();
 </script>
 
 <script lang="ts">
@@ -7,14 +7,18 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <template>
   <!-- :theme-vars="themeVars" :theme="theme" :custom-class="`page-wraper ${theme}`"-->
-  <wd-config-provider>
+  <wd-config-provider
+    :theme-vars="themeVars"
+    :theme="theme"
+    :custom-class="`page-wraper ${theme}`"
+  >
     <slot />
     <wd-notify />
     <wd-message-box />

src/layouts/tabbar.vue

@@ -1,27 +1,28 @@
 <script lang="ts" setup>
-const router = useRouter()
+const router = useRouter();
 
-const route = useRoute()
+const route = useRoute();
 
-const { themeVars, theme } = useTheme()
+const { themeVars, theme } = useTheme();
 
-const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } = useTabbar()
+const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } =
+  useTabbar();
 
 function handleTabbarChange({ value }: { value: string }) {
-  setTabbarItemActive(value)
-  router.pushTab({ name: value })
+  setTabbarItemActive(value);
+  router.pushTab({ name: value });
 }
 
 onMounted(() => {
   // #ifdef APP-PLUS
-  uni.hideTabBar()
+  uni.hideTabBar();
   // #endif
   nextTick(() => {
     if (route.name && route.name !== activeTabbar.value.name) {
-      setTabbarItemActive(route.name)
+      setTabbarItemActive(route.name);
     }
-  })
-})
+  });
+});
 </script>
 
 <script lang="ts">
@@ -29,19 +30,35 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <template>
   <!-- :theme-vars="themeVars" :custom-class="`page-wraper ${theme}`" :theme="theme" -->
-  <wd-config-provider>
+  <wd-config-provider
+    :theme-vars="themeVars"
+    :theme="theme"
+    :custom-class="`page-wraper ${theme}`"
+  >
     <slot />
-    <wd-tabbar :model-value="activeTabbar.name" placeholder bordered safe-area-inset-bottom fixed
-      @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" />
+    <wd-tabbar
+      :model-value="activeTabbar.name"
+      placeholder
+      bordered
+      safe-area-inset-bottom
+      fixed
+      @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"
+      />
     </wd-tabbar>
     <!-- #ifdef MP-WEIXIN -->
     <privacy-popup />

src/pages/index/index.vue

@@ -106,18 +106,33 @@ function getItemClass(path: string) {
 </script>
 
 <template>
-  <view class="h-screen box-border header" :style="{ paddingTop: `${statusBarHeight}px` }">
+  <view
+    class="h-screen box-border header"
+    :style="{ paddingTop: `${statusBarHeight}px` }"
+  >
     <view class="h-58rpx"></view>
     <view class="px-32rpx mt-48rpx" v-if="!token">
-      <view class="bg-white rounded-16rpx flex items-center justify-between py-20rpx px-24rpx">
+      <view
+        class="bg-white rounded-16rpx flex items-center justify-between py-20rpx px-24rpx"
+      >
         <view>您还未登录，快去登录吧！</view>
-        <commonbtn bg-color="#0074FF" @click="handleCommenPath('/pages/login/index')">去登录</commonbtn>
+        <commonbtn
+          bg-color="#0074FF"
+          @click="handleCommenPath('/pages/login/index')"
+          >去登录</commonbtn
+        >
       </view>
     </view>
     <view class="relative">
       <wd-drop-menu>
-        <wd-drop-menu-item :options="dept.list" v-model:model-value="orgCode" value-key="orgCode" label-key="departName"
-          :title="title" @change="useUserStore().setTitile" />
+        <wd-drop-menu-item
+          :options="dept.list"
+          v-model:model-value="orgCode"
+          value-key="orgCode"
+          label-key="departName"
+          :title="title"
+          @change="useUserStore().setTitile"
+        />
       </wd-drop-menu>
       <view class="absolute top-50% -translate-y-50% right-50rpx" v-if="token">
         <view class="flex items-center">
@@ -130,32 +145,54 @@ function getItemClass(path: string) {
     </view>
     <view class="px-32rpx">
       <view class="grid grid-cols-2 gap-3">
-        <view class="flex items-center px-40rpx header rounded-2xl h-162rpx" @click="handleCommenPath(item.route)"
-          v-for="item in topMenu" :class="getItemClass(item.route)" :key="item.id">
+        <view
+          class="flex items-center px-40rpx header rounded-2xl h-162rpx"
+          @click="handleCommenPath(item.route)"
+          v-for="item in topMenu"
+          :class="getItemClass(item.route)"
+          :key="item.id"
+        >
           <image :src="getIcon(item.route)" class="w-100rpx h-100rpx"></image>
-          <view class="text-32rpx font-semibold">{{ item.name }}</view>
+          <view class="text-32rpx font-semibold text-#000">{{
+            item.name
+          }}</view>
         </view>
       </view>
       <view class="mt-3" v-if="sysMsg">
-        <wd-notice-bar :text="sysMsg.map((it) => it.titile)" color="#000000" background-color="#fff" :delay="3"
-          direction="vertical" @click="handleCommenPath('/subPack/notification/index')">
+        <wd-notice-bar
+          :text="sysMsg.map((it) => it.titile)"
+          color="#000000"
+          background-color="#fff"
+          :delay="3"
+          direction="vertical"
+          @click="handleCommenPath('/subPack/notification/index')"
+        >
           <template #prefix>
-            <image src="@/static/index/msg.png" class="w-30rpx h-30rpx mr2"></image>
+            <image
+              src="@/static/index/msg.png"
+              class="w-30rpx h-30rpx mr2"
+            ></image>
           </template>
         </wd-notice-bar>
       </view>
       <view class="mt-3 rounded-2xl bg-white p-28rpx" v-if="StoreMenu">
         <view class="font-semibold text-32rpx">门店经营</view>
         <view class="grid grid-cols-4 gap-3 mt-3">
-          <view class="flex items-center justify-center flex-col" @click="handleCommenPath(item.route)"
-            v-for="item in StoreMenu" :key="item.id">
+          <view
+            class="flex items-center justify-center flex-col"
+            @click="handleCommenPath(item.route)"
+            v-for="item in StoreMenu"
+            :key="item.id"
+          >
             <image :src="getIcon(item.route)" class="w-52rpx h-52rpx"></image>
-            <view class="text-24rpx mt-3">{{
+            <view class="text-24rpx mt-3 text-[rgb(0,0,0,0.6)]">{{
               item.name
             }}</view>
           </view>
-          <button open-type="contact"
-            class="bg-transparent after:border-none after:h-full flex flex-col items-center justify-center p-l-0 pr-0">
+          <button
+            open-type="contact"
+            class="bg-transparent after:border-none after:h-full flex flex-col items-center justify-center p-l-0 pr-0"
+          >
             <image src="@/static/index/kf.png" class="w-52rpx h-52rpx"></image>
             <view class="text-24rpx text-[rgb(0,0,0,0.6)] mt-3">平台客服</view>
           </button>
@@ -165,14 +202,16 @@ function getItemClass(path: string) {
   </view>
 </template>
 
-<route lang="json">{
+<route lang="json">
+{
   "name": "home",
   "style": {
     "navigationBarTitleText": "首页",
     "navigationStyle": "custom",
     "disableScroll": true
   }
-}</route>
+}
+</route>
 
 <style scoped lang="scss">
 :deep(.wd-drop-menu__list) {