wip: 临时提交

src/layouts/default.vue

@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from "wot-design-uni";
+import { useTheme } from "@/composables/useTheme";
 
-const themeVars = reactive<ConfigProviderThemeVars>({
-  colorTheme: "#FF5454",
-  tabsNavLineBgColor: "red",
-  navbarColor: "#ffffff",
-});
+const { theme, themeVars } = useTheme();
 </script>
 
 <script lang="ts">
@@ -20,8 +16,10 @@ export default {
 
 <template>
   <wd-config-provider
+    :theme="theme"
     :theme-vars="themeVars"
     custom-style="background-color: #f5f5f5;min-height: 100vh"
+    :class="{ 'wot-theme-dark': theme === 'dark' }"
   >
     <slot />
     <wd-notify />
@@ -30,3 +28,11 @@ export default {
     <privacy-popup />
   </wd-config-provider>
 </template>
+
+<style lang="scss" scoped>
+/* 暗黑模式样式 */
+.wot-theme-dark {
+  color: #f5f5f5 !important;
+  background-color: #1a1a1a !important;
+}
+</style>

src/layouts/tabbar.vue

@@ -8,7 +8,8 @@
  * 记得注释
 -->
 <script lang="ts" setup>
-import { ref, computed, onMounted, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick, onUnmounted } from "vue";
+import { onShow } from "@dcloudio/uni-app";
 import { useTheme } from "@/composables/useTheme";
 
 // 定义 TabbarItem 接口
@@ -26,7 +27,7 @@ const tabbarItems = ref<TabbarItem[]>([
   { name: "mine", value: null, active: false, title: "我的", icon: "user" },
 ]);
 
-const { themeVars } = useTheme();
+const { theme, themeVars } = useTheme();
 
 // 计算属性
 const tabbarList = computed(() => tabbarItems.value);
@@ -43,6 +44,7 @@ const getTabbarItemValue = (name: string) => {
 };
 
 const setTabbarItemActive = (name: string) => {
+  console.log(`设置 tabbar 激活状态: ${name}`);
   tabbarItems.value.forEach((item) => {
     if (item.name === name) {
       item.active = true;
@@ -52,7 +54,35 @@ const setTabbarItemActive = (name: string) => {
   });
 };
 
+// 根据当前路由更新 tabbar 激活状态
+const updateTabbarByRoute = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 0) {
+    const currentPage = pages[pages.length - 1];
+    const route = currentPage.route;
+
+    console.log("=== Tabbar 路由更新 ===");
+    console.log("当前路由:", route);
+    console.log("当前激活的 tabbar:", activeTabbar.value.name);
+
+    // 根据当前路由设置活跃的 tabbar
+    if (route === "pages/index/index") {
+      console.log("设置首页为激活状态");
+      setTabbarItemActive("index");
+    } else if (route === "pages/mine/index") {
+      console.log("设置我的页面为激活状态");
+      setTabbarItemActive("mine");
+    } else {
+      console.log("非 tabbar 页面，保持当前状态");
+    }
+
+    console.log("更新后激活的 tabbar:", activeTabbar.value.name);
+    console.log("=== 更新完成 ===");
+  }
+};
+
 function handleTabbarChange({ value }: { value: string }) {
+  console.log(`用户点击 tabbar: ${value}`);
   setTabbarItemActive(value);
 
   // 根据 tabbar 项目导航到对应页面
@@ -67,29 +97,51 @@ function handleTabbarChange({ value }: { value: string }) {
   }
 }
 
+// 监听页面栈变化
+const currentRoute = ref("");
+
+const updateCurrentRoute = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 0) {
+    const currentPage = pages[pages.length - 1];
+    const newRoute = currentPage.route || "";
+
+    if (newRoute !== currentRoute.value) {
+      currentRoute.value = newRoute;
+      console.log("页面路由发生变化:", newRoute);
+      updateTabbarByRoute();
+    }
+  }
+};
+
 onMounted(() => {
   nextTick(() => {
-    // 获取当前页面路径
-    const pages = getCurrentPages();
-    if (pages.length > 0) {
-      const currentPage = pages[pages.length - 1];
-      const route = currentPage.route;
+    updateTabbarByRoute();
+    updateCurrentRoute();
+  });
 
-      // 根据当前路由设置活跃的 tabbar
-      if (route?.includes("pages/index/index")) {
-        setTabbarItemActive("index");
-      } else if (route?.includes("pages/mine/index")) {
-        setTabbarItemActive("mine");
-      }
-    }
+  // 监听页面发出的 tabbar 更新事件
+  uni.$on("updateTabbar", (tabName: string) => {
+    console.log("收到 tabbar 更新事件:", tabName);
+    setTabbarItemActive(tabName);
   });
 });
 
+// 页面显示时更新 tabbar 状态
 onShow(() => {
+  nextTick(() => {
+    updateCurrentRoute();
+  });
+
   // #ifdef APP-PLUS
   uni.hideTabBar();
   // #endif
 });
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  uni.$off("updateTabbar");
+});
 </script>
 
 <script lang="ts">
@@ -103,7 +155,12 @@ export default {
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars" custom-style="min-height: 100vh" theme="dark">
+  <wd-config-provider
+    :theme="theme"
+    :theme-vars="themeVars"
+    custom-style="min-height: 100vh"
+    :class="{ 'wot-theme-dark': theme === 'dark' }"
+  >
     <wd-navbar
       :title="activeTabbar.title"
       safe-area-inset-top
@@ -135,3 +192,21 @@ export default {
     <wd-message-box />
   </wd-config-provider>
 </template>
+
+<style lang="scss" scoped>
+/* 暗黑模式样式 */
+.wot-theme-dark {
+  color: #f5f5f5;
+  background-color: #1a1a1a;
+
+  :deep(.wd-navbar) {
+    color: #f5f5f5;
+    background-color: #2a2a2a;
+  }
+
+  :deep(.wd-tabbar) {
+    background-color: #2a2a2a;
+    border-top-color: #404040;
+  }
+}
+</style>