wip: 临时提交

src/layouts/default.vue

@@ -1,4 +1,32 @@
+<script lang="ts" setup>
+import type { ConfigProviderThemeVars } from "wot-design-uni";
+
+const themeVars = reactive<ConfigProviderThemeVars>({
+  colorTheme: "#FF5454",
+  tabsNavLineBgColor: "red",
+  navbarColor: "#ffffff",
+});
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: "shared",
+  },
+};
+</script>
+
 <template>
-  <div>默认布局</div>
-  <slot></slot>
+  <wd-config-provider
+    :theme-vars="themeVars"
+    custom-style="background-color: #f5f5f5;min-height: 100vh"
+  >
+    <slot />
+    <wd-notify />
+    <wd-toast />
+    <wd-message-box />
+    <privacy-popup />
+  </wd-config-provider>
 </template>

src/layouts/tabbar.vue

@@ -8,26 +8,79 @@
  * 记得注释
 -->
 <script lang="ts" setup>
-import { useTabbar } from "@/composables/useTabbar";
-import { useTheme } from "@/composables/theme/theme";
+import { ref, computed, onMounted, nextTick } from "vue";
+import { useTheme } from "@/composables/useTheme";
 
-const router = useRouter();
+// 定义 TabbarItem 接口
+interface TabbarItem {
+  name: string;
+  value: number | null;
+  active: boolean;
+  title: string;
+  icon: string;
+}
 
-const route = useRoute();
+// 根据 pages.json 配置的 tabbar 项目
+const tabbarItems = ref<TabbarItem[]>([
+  { name: "index", value: null, active: true, title: "首页", icon: "home" },
+  { name: "mine", value: null, active: false, title: "我的", icon: "user" },
+]);
 
-const { themeVars, theme } = useTheme();
+const { themeVars } = useTheme();
 
-const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } = useTabbar();
+// 计算属性
+const tabbarList = computed(() => tabbarItems.value);
+
+const activeTabbar = computed(() => {
+  const item = tabbarItems.value.find((item) => item.active);
+  return item || tabbarItems.value[0];
+});
+
+// 方法
+const getTabbarItemValue = (name: string) => {
+  const item = tabbarItems.value.find((item) => item.name === name);
+  return item && item.value ? item.value : null;
+};
+
+const setTabbarItemActive = (name: string) => {
+  tabbarItems.value.forEach((item) => {
+    if (item.name === name) {
+      item.active = true;
+    } else {
+      item.active = false;
+    }
+  });
+};
 
 function handleTabbarChange({ value }: { value: string }) {
   setTabbarItemActive(value);
-  router.pushTab({ name: value });
+
+  // 根据 tabbar 项目导航到对应页面
+  if (value === "index") {
+    uni.switchTab({
+      url: "/pages/index/index",
+    });
+  } else if (value === "mine") {
+    uni.switchTab({
+      url: "/pages/mine/index",
+    });
+  }
 }
 
 onMounted(() => {
   nextTick(() => {
-    if (route.name && route.name !== activeTabbar.value.name) {
-      setTabbarItemActive(route.name);
+    // 获取当前页面路径
+    const pages = getCurrentPages();
+    if (pages.length > 0) {
+      const currentPage = pages[pages.length - 1];
+      const route = currentPage.route;
+
+      // 根据当前路由设置活跃的 tabbar
+      if (route?.includes("pages/index/index")) {
+        setTabbarItemActive("index");
+      } else if (route?.includes("pages/mine/index")) {
+        setTabbarItemActive("mine");
+      }
     }
   });
 });
@@ -50,7 +103,7 @@ export default {
 </script>
 
 <template>
-  <wd-config-provider :theme-vars="themeVars" custom-style="min-height: 100vh" :theme="theme">
+  <wd-config-provider :theme-vars="themeVars" custom-style="min-height: 100vh" theme="dark">
     <wd-navbar
       :title="activeTabbar.title"
       safe-area-inset-top