feat: 添加pinia状态管理库和Tabbar组件

添加pinia状态管理库和Tabbar组件，以支持应用的状态管理和底部导航栏功能。

src/components/TabBar.vue

@@ -1,13 +1,58 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { useRouter, useRoute } from 'uni-mini-router'
+import { onMounted, computed, watch } from 'vue';
 
+const props = defineProps({
+  currentName: {
+    type: String,
+    default: 'home'
+  }
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const activeTab = ref('home')
+
+onMounted(() => {
+  activeTab.value = props.currentName
+})
+
+watch(activeTab, (val) => {
+  router.pushTab({ name: val })
+})
+
+const nameLabelIconMap = {
+  home: {
+    title: '进度查看',
+    icon: 'dashboard'
+  },
+  progress: {
+    title: '进度管理',
+    icon: 'transfer'
+  },
+  my: {
+    title: '我的',
+    icon: 'user'
+  }
+}
+
+const tabList = computed(() => router.routes.map((route: { name: keyof typeof nameLabelIconMap }) => {
+  return {
+    name: route.name,
+    title: nameLabelIconMap[route.name].title,
+    icon: nameLabelIconMap[route.name].icon
+  }
+}))
 </script>
 
 <template>
   <div>
-    tabbar
+    <wd-tabbar v-model="activeTab" fixed safe-area-inset-bottom bordered placeholder>
+      <wd-tabbar-item v-for="(tab, i) in tabList" :name="tab.name" :title="tab.title" :icon="tab.icon" :key="i" />
+    </wd-tabbar>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/main.ts

@@ -1,6 +1,7 @@
 import { createSSRApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
+import router from "./router";
 
 import "uno.css";
 
@@ -9,6 +10,7 @@ export function createApp() {
   const app = createSSRApp(App);
 
   app.use(pinia);
+  app.use(router);
 
   return {
     app,

src/pages.json

@@ -1,16 +1,40 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [
 		{
+			"name": "home",
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "进度查看"
+			}
+		},
+		{
+			"name": "my",
+			"path": "pages/my/index",
+			"style": {
+				"navigationBarTitleText": "我的"
 			}
 		}
 	],
+	"tabBar": {
+		"custom": true,
+		"color": "#bfbfbf",
+		"selectedColor": "#0165FF",
+		"backgroundColor": "#ffffff",
+		"list": [
+			{
+				"pagePath": "pages/index/index",
+				"text": "进度查看"
+			},
+			{
+				"pagePath": "pages/my/index",
+				"text": "我的"
+			}
+		]
+	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+		"navigationBarTitleText": "XSH PPMP",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	}
-}
+}

src/pages/index/index.vue

@@ -5,15 +5,18 @@
       <p class="title text-red-500">
         {{ title }}
       </p>
-      <button @click="onClick">increment</button>
+      <WdButton @click="onClick">Increment</WdButton>
+      <Tabbar current-name="home" />
     </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
 import { useUserStore } from '@/stores/user';
 import { computed } from 'vue';
-import { ref } from 'vue'
+
+import Tabbar from '@/components/Tabbar.vue';
 
 const user = useUserStore()
 

src/pages/my/index.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import Tabbar from '@/components/Tabbar.vue';
+</script>
+
+<template>
+  <div>
+    <h1>我的页面</h1>
+    <Tabbar current-name="my" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/router/index.ts

@@ -0,0 +1,11 @@
+import { createRouter } from "uni-mini-router";
+// 导入pages.json
+import pagesJson from "../pages.json";
+// 引入uni-parse-pages
+import pagesJsonToRoutes from "uni-parse-pages";
+// 生成路由表
+const routes = pagesJsonToRoutes(pagesJson);
+const router = createRouter({
+  routes: [...routes], // 路由表信息
+});
+export default router;