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

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

.npmrc

@@ -0,0 +1,4 @@
+// .npmrc
+public-hoist-pattern[]=@vue*
+// or
+// shamefully-hoist = true

components.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by vite-plugin-uni-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Tabbar: typeof import('./src/components/Tabbar.vue')['default']
+    WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
+    WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default']
+    WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default']
+  }
+}

package.json

@@ -60,7 +60,8 @@
     "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
     "pinia": "^2.2.2",
     "vue": "^3.4.21",
-    "vue-i18n": "^9.1.9"
+    "vue-i18n": "^9.1.9",
+    "wot-design-uni": "^1.3.10"
   },
   "devDependencies": {
     "@dcloudio/types": "^3.4.8",
@@ -68,9 +69,15 @@
     "@dcloudio/uni-cli-shared": "3.0.0-4020420240722002",
     "@dcloudio/uni-stacktracey": "3.0.0-4020420240722002",
     "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
+    "@uni-helper/vite-plugin-uni-components": "^0.1.0",
     "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.1.3",
+    "add": "^2.0.6",
+    "sass": "^1.78.0",
+    "sass-loader": "10",
     "typescript": "^4.9.4",
+    "uni-mini-router": "^0.1.6",
+    "uni-parse-pages": "^0.0.1",
     "unocss": "^0.62.3",
     "unocss-preset-weapp": "^0.62.2",
     "vite": "5.2.8",

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;

tsconfig.json

@@ -7,7 +7,7 @@
       "@/*": ["./src/*"]
     },
     "lib": ["esnext", "dom"],
-    "types": ["@dcloudio/types"]
+    "types": ["@dcloudio/types", "wot-design-uni/global"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

vite.config.ts

@@ -1,12 +1,18 @@
 import { defineConfig } from "vite";
 import uni from "@dcloudio/vite-plugin-uni";
 
+import Components from "@uni-helper/vite-plugin-uni-components";
+import { WotResolver } from "@uni-helper/vite-plugin-uni-components/resolvers";
+
 // https://vitejs.dev/config/
 export default defineConfig(async () => {
   const UnoCSS = await import("unocss/vite").then((i) => i.default);
 
   return {
     plugins: [
+      Components({
+        resolvers: [WotResolver()],
+      }),
       uni(),
       // https://github.com/unocss/unocss
       UnoCSS(),