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

- 添加pinia状态管理库和Tabbar组件
- 引入axios和fant-axios-adapter
- 在main.ts中使用pinia和persist插件
- 在App.vue中修改标题
- 在useUser.ts中添加logout方法
- 添加persist.ts文件
- 修改page-wrapper.vue和TabBar.vue中的代码
- 修改index.vue和login.vue中的代码

src/pages/index/index.vue

@@ -3,8 +3,8 @@
     <div class="content">
       <img class="logo" src="/static/logo.png" />
       <div class="flex flex-col items-center gap-4">
-        <p class="title text-red-500">
-          Welcome
+        <p class="title text-4xl text-neutral-300 font-bold">
+          XSH PPMS
         </p>
       </div>
     </div>

src/pages/login/index.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
-import { useConfig } from '@/composables/useConfig';
+import BussApi from '@/api/BussApi';
+import { useUser } from '@/stores/useUser';
+import { useRouter } from 'uni-mini-router';
 import { reactive, ref } from 'vue';
 import { useToast } from 'wot-design-uni';
 
+const router = useRouter()
 const toast = useToast()
-const config = useConfig()
+const user = useUser()
 
 const model = reactive<{
   email: string
@@ -13,7 +16,7 @@ const model = reactive<{
 }>({
   email: '',
   password: '',
-  remember: false
+  remember: true
 })
 
 const form = ref()
@@ -25,22 +28,27 @@ const handleSubmit = () => {
         toast.loading({
           msg: '登录中...'
         })
-        fetch(`${config.BASE_URL}/login`, {
-          method: 'POST',
-          headers: { 'content-type': 'application/x-www-form-urlencoded' },
-          body: new URLSearchParams({ email: 'root@cyqsd.cn', password: 'Abc123456', remember: 'false' })
+        BussApi.login({
+          email: model.email,
+          password: model.password,
+          remember: model.remember + '',
+        }).then(res => {
+          user.token = res.token
+          toast.loading({
+            msg: '加载资料...'
+          })
+          BussApi.profile(user.token).then(res => {
+            user.userinfo = res
+            toast.success({ msg: '登录成功' })
+            setTimeout(() => {
+              router.pushTab('/pages/index/index')
+            }, 1000)
+          }).catch(err => {
+            toast.error({ msg: err.message })
+          })
+        }).catch(err => {
+          toast.error({ msg: err.message })
         })
-          .then(res => res.json())
-          .then(res => {
-            toast.info({
-              msg: res.token
-            })
-          })
-          .catch(err => {
-            toast.error({
-              msg: err || '登录失败，未知错误'
-            })
-          })
       }
     })
     .catch((error: any) => {

src/pages/my/index.vue

@@ -1,23 +1,39 @@
 <script lang="ts" setup>
+import BussApi from '@/api/BussApi';
 import pageWrapper from '@/components/page-wrapper.vue';
+import { useUser } from '@/stores/useUser';
+import { useRouter } from 'uni-mini-router';
+import { onMounted } from 'vue';
+
+const router = useRouter()
+const user = useUser()
+
+const logout = () => {
+  user.logout()
+  router.replaceAll('/pages/login/index')
+}
+
+onMounted(() => {
+  BussApi.profile(user.token!).then(res => {
+    user.userinfo = res
+  })
+})
 </script>
 
 <template>
   <page-wrapper>
     <div class="p-4 flex flex-col gap-4">
       <WdCellGroup :border="true">
-        <WdCell title="用户名" value="test1" />
-        <WdCell title="单位" value="重庆眩生花科技有限公司" />
-        <WdCell title="角色" value="普通管理员" />
-        <WdCell title="手机" value="15023333333" />
+        <WdCell title="用户名" :value="user.userinfo?.username || '-'" />
+        <WdCell title="邮箱" :value="user.userinfo?.email || '-'" />
+        <WdCell title="单位" :value="user.userinfo?.department_id || '-'" />
+        <WdCell title="角色" :value="user.userinfo?.roles.join('') || '-'" />
       </WdCellGroup>
       <div class="px-4">
-        <wd-button plain hairline type="error">退出账号</wd-button>
+        <wd-button plain hairline block type="error" @click="logout">退出账号</wd-button>
       </div>
     </div>
   </page-wrapper>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>