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

- 添加pinia状态管理库和Tabbar组件
- 导入新的组件和模块
- 更新页面布局和样式
- 删除无用的文件和代码

src/pages/index/index.vue

@@ -1,30 +1,18 @@
 <template>
-  <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">
-        {{ title }}
-      </p>
-      <WdButton @click="onClick">Increment</WdButton>
-      <Tabbar current-name="home" />
+  <page-wrapper>
+    <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>
+      </div>
     </div>
-
-  </div>
+  </page-wrapper>
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from '@/stores/user';
-import { computed } from 'vue';
-
-import Tabbar from '@/components/Tabbar.vue';
-
-const user = useUserStore()
-
-const onClick = () => {
-  user.count++
-}
-
-const title = computed(() => `Counter: ${user.count}`)
+import pageWrapper from '@/components/page-wrapper.vue';
 </script>
 
 <style>

src/pages/login/index.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { useConfig } from '@/composables/useConfig';
+import { reactive, ref } from 'vue';
+import { useToast } from 'wot-design-uni';
+
+const toast = useToast()
+const config = useConfig()
+
+const model = reactive<{
+  email: string
+  password: string
+  remember: boolean
+}>({
+  email: '',
+  password: '',
+  remember: false
+})
+
+const form = ref()
+
+const handleSubmit = () => {
+  form.value.validate()
+    .then(({ valid, errors }: { valid: boolean; errors: any }) => {
+      if (valid) {
+        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' })
+        })
+          .then(res => res.json())
+          .then(res => {
+            toast.info({
+              msg: res.token
+            })
+          })
+          .catch(err => {
+            toast.error({
+              msg: err || '登录失败，未知错误'
+            })
+          })
+      }
+    })
+    .catch((error: any) => {
+      console.log(error, 'error')
+    })
+}
+</script>
+
+<template>
+  <div>
+    <wd-form ref="form" class="p-4" :model="model">
+      <wd-cell-group border>
+        <wd-input label="邮箱" label-width="100px" prop="email" clearable v-model="model.email" placeholder="请输入邮箱"
+          :rules="[{ required: true, message: '请填写邮箱' }]" />
+        <wd-input label="密码" label-width="100px" prop="password" show-password clearable v-model="model.password"
+          placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
+      </wd-cell-group>
+      <view class="p-4">
+        <wd-button type="primary" size="large" @click="handleSubmit" block>登录</wd-button>
+      </view>
+    </wd-form>
+    <wd-toast />
+  </div>
+</template>
+
+<style scoped></style>

src/pages/my/index.vue

@@ -1,12 +1,21 @@
 <script lang="ts" setup>
-import Tabbar from '@/components/Tabbar.vue';
+import pageWrapper from '@/components/page-wrapper.vue';
 </script>
 
 <template>
-  <div>
-    <h1>我的页面</h1>
-    <Tabbar current-name="my" />
-  </div>
+  <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" />
+      </WdCellGroup>
+      <div class="px-4">
+        <wd-button plain hairline type="error">退出账号</wd-button>
+      </div>
+    </div>
+  </page-wrapper>
 </template>
 
 <style scoped>