wip: 完善部分示例

package.json

@@ -50,6 +50,7 @@
     "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-4010920240607001",
     "@dcloudio/uni-mp-weixin": "3.0.0-alpha-4010920240607001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4010920240607001",
+    "@multiavatar/multiavatar": "^1.0.7",
     "alova": "^2.21.3",
     "crypto-js": "^4.2.0",
     "lodash-es": "^4.17.21",
@@ -84,6 +85,7 @@
     "uni-read-pages-vite": "^0.0.6",
     "unocss": "^0.61.0",
     "unocss-preset-weapp": "^0.60.1",
+    "unplugin-auto-import": "^0.17.6",
     "unplugin-transform-class": "^0.5.3",
     "vite": "^5.3.1",
     "vite-plugin-restart": "^0.4.0"

src/mock/v1/modules/auth.ts

@@ -1,7 +1,9 @@
 import { defineMock } from '@alova/mock';
-import { join, sampleSize } from 'lodash-es';
+import { join, random, sampleSize } from 'lodash-es';
+import multiavatar from '@multiavatar/multiavatar';
 import { createMock } from '@/mock/utils';
 import { ResultEnum } from '@/enums/httpEnum';
+import { getRandomChsString } from '@/utils/character';
 
 function createRandomToken(len = 36 * 6) {
   const token = join(sampleSize('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ._-', len), '');
@@ -16,7 +18,23 @@ export const authMocks = defineMock({
       const token = createRandomToken();
       return createMock({ data: { token } });
     }
-    console.log('模拟登录');
     return createMock({ data: [], code: ResultEnum.FAIL, message: '邮箱或密码错误' });
   },
+  // 获取用户信息
+  '[GET]/api/users': () => {
+    const generateNicknames = getRandomChsString(random(2, 6));
+    const svgCode = multiavatar(generateNicknames);
+    const base64SVG = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+      svgCode,
+    )}`;
+
+    return createMock({
+      data: {
+        id: 1,
+        nickname: generateNicknames,
+        avatar: base64SVG,
+        email: 'uni-app@test.com',
+      },
+    });
+  },
 });

src/pages/index/index.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useRouter } from 'uni-mini-router';
-
 const router = useRouter();
+
 function onClick() {
-  console.log('click');
   router.push({ name: 'Login' });
 }
+function goLog() {
+  router.push({ name: 'Log' });
+}
 </script>
 
 <template>
@@ -15,6 +16,9 @@ function onClick() {
   <button @click="onClick">
     登录
   </button>
+  <button @click="goLog">
+    Log
+  </button>
 </template>
 
 <style lang="scss">

src/pages/log/index.vue

@@ -1,13 +1,18 @@
 <script lang="ts" setup>
-onLoad((query) => {
-  console.log('log onLoad query', query);
-});
+import { useUserStore } from '@/stores/modules/user';
+
+const userStore = useUserStore();
+// onLoad((query) => {
+//   console.log('log onLoad query', query);
+// });
 </script>
 
 <template>
-  <view style="line-height: 88rpx; text-align: center">
+  <view class="text-center">
     登录后访问log
   </view>
+  <image class="" :src="userStore.userInfo?.avatar" mode="aspectFit" lazy-load="false" binderror="" bindload="" />
+  <view>用户昵称：{{ userStore.userInfo?.nickname }}</view>
 </template>
 
 <style lang="scss" scoped></style>

src/pages/login/index.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useRouter } from 'uni-mini-router';
-import { reactive, ref, unref } from 'vue';
-import { onLoad } from '@dcloudio/uni-app';
 import { omit } from 'lodash-es';
 import { useUserStore } from '@/stores/modules/user';
 import { Toast } from '@/utils/uniapi/prompt';
@@ -20,7 +17,6 @@ const form = reactive({
 const userStore = useUserStore();
 
 function submit(e: any) {
-  console.log('====>userStore', userStore.user, userStore);
   userStore.login(e.detail.value).then(() => {
     Toast('登录成功', { duration: 1500 });
     setTimeout(() => {

src/services/api/user.ts

@@ -1,2 +1,13 @@
-// import { request } from '@/utils/http';
-export {};
+import { request } from '@/utils/http';
+import type { UserInfoModel } from '@/services/model/userModel';
+
+enum Api {
+  GET_USER_INFO = '/users',
+}
+
+/**
+ * 获取用户信息
+ */
+export function getUserInfoApi() {
+  return request.Get<UserInfoModel>(Api.GET_USER_INFO);
+}

src/services/model/userModel.d.ts

@@ -0,0 +1,18 @@
+export interface UserInfoModel {
+  /**
+   * 用户id
+   */
+  id?: number
+  /**
+   * 昵称
+   */
+  nickname?: string
+  /**
+   * 头像
+   */
+  avatar?: string
+  /**
+   * 邮箱
+   */
+  email?: string
+}

src/stores/modules/auth.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
 import { useRequest } from 'alova';
-import { computed, ref } from 'vue';
 import { getCache, removeCache, setCache } from '@/utils/cache';
 import { TOKEN_KEY } from '@/enums/cacheEnum';
 import { login as loginApi, logout as logoutApi } from '@/services/api/auth';

src/stores/modules/user.ts

@@ -1,25 +1,36 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { useRequest } from 'alova';
 import { useAuthStore } from './auth';
-
-interface UserState {
-  id?: string | number
-}
+import { getUserInfoApi } from '@/services/api/user';
+import type { UserInfoModel } from '@/services/model/userModel';
 
 export const useUserStore = defineStore('UserStore', () => {
-  const user = ref<UserState>({});
+  const userInfo = ref<UserInfoModel | null>(null);
 
   const authStore = useAuthStore();
+
+  const { send: _getUserInfo } = useRequest(getUserInfoApi, { initialData: null, immediate: false });
   async function login(params: LoginParams) {
     try {
       await authStore.login(params);
+      await getUserInfo();
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  // 获取用户信息
+  async function getUserInfo() {
+    try {
+      userInfo.value = await _getUserInfo();
     } catch (error) {
       console.log(error);
     }
   }
 
   return {
-    user,
+    userInfo,
     login,
+    getUserInfo,
   };
 });

src/utils/character.ts

@@ -0,0 +1,21 @@
+const CHS_RANGE_START = 0x4E00; // 简体中文编码范围开始
+const CHS_RANGE_END = 0x9FA5; // 简体中文编码范围结束
+
+// 生成随机简体中文字符的函数
+function getRandomChsChar() {
+  // 生成 CHS_RANGE_START 和 CHS_RANGE_END 之间的随机整数
+  const randomCharCode
+    = Math.floor(Math.random() * (CHS_RANGE_END - CHS_RANGE_START + 1)) + CHS_RANGE_START;
+
+  // 将随机整数转换为字符
+  return String.fromCharCode(randomCharCode);
+}
+
+// 生成指定长度的随机简体中文字符串
+export function getRandomChsString(length: number) {
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += getRandomChsChar();
+  }
+  return result;
+}

tsconfig.json

@@ -53,9 +53,7 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "vite.config.*",
-    "typings/*.ts",
-    "typings/*.d.ts",
-    "node_modules/.pnpm/unplugin-auto-import@0.16.7_rollup@4.18.0/node_modules/unplugin-auto-import/auto-imports.d.ts"
+    "typings/*.d.ts"
   ], // 指定要包含在编译中的文件匹配列表
   "exclude": []
 }

vite.config.ts

@@ -13,6 +13,7 @@ import UnoCSS from 'unocss/vite';
 import transformClass from 'unplugin-transform-class/vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 import ViteRestart from 'vite-plugin-restart';
+import AutoImport from 'unplugin-auto-import/vite';
 
 export default defineConfig(async ({ mode }) => {
   const root = process.cwd();
@@ -48,6 +49,25 @@ export default defineConfig(async ({ mode }) => {
     plugins: [
       // @ts-expect-error TODO uni() 会报错：uni is not a function,暂时使用此方式解决
       uni?.default(),
+      AutoImport({
+        include: [
+          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+          /\.vue$/,
+          /\.vue\?vue/, // .vue
+        ],
+        imports: [
+          'vue',
+          'uni-app',
+          'pinia',
+          {
+            'uni-mini-router': ['useRouter', 'useRoute'],
+          },
+        ],
+        dts: 'typings/auto-imports.d.ts',
+        eslintrc: {
+          enabled: true,
+        },
+      }),
       UnoCSS(),
       transformClass(),
       ViteRestart({