From f1d291ec72524adeeb5ff0bb33108e8863715611 Mon Sep 17 00:00:00 2001
From: KuroSago <kurosago@outlook.com>
Date: Wed, 28 Aug 2024 20:39:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Iconify/index.vue       |  7 +--
 src/pages.json                         |  2 +-
 src/pages/about/index.vue              |  6 +-
 src/pages/demo/index.vue               | 12 +---
 src/pages/index/index.vue              |  7 +++
 src/pages/login/index.vue              | 83 +++++++-------------------
 src/pages/splashScreen/index.vue       | 41 +++++++++++--
 src/router/guard.ts                    | 13 ++--
 src/router/index.ts                    |  1 +
 src/stores/modules/system.ts           | 10 ++--
 src/stores/modules/user.ts             | 20 +++----
 src/theme/theme.ts                     | 14 ++---
 tailwind.config.js                     | 18 ------
 unocss.config.ts => tailwind.config.ts | 48 ++++-----------
 vite/plugins/build.unocss.config.ts    | 56 +++++------------
 15 files changed, 132 insertions(+), 206 deletions(-)
 delete mode 100644 tailwind.config.js
 rename unocss.config.ts => tailwind.config.ts (65%)

diff --git a/src/components/Iconify/index.vue b/src/components/Iconify/index.vue
index b5e8706..9b72a26 100644
--- a/src/components/Iconify/index.vue
+++ b/src/components/Iconify/index.vue
@@ -10,18 +10,18 @@
 interface Props {
   icon: string
   size?: string | number
-  color?: string
+  className?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'inherit',
-  color: 'inherit',
+  class: '',
 });
 
 const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
 </script>
 
 <template>
-  <text class="iconify-icon" :class="[props.icon]" />
+  <span class="iconify-icon " :class="[props.icon, props.className]" />
 </template>
 
 <style lang="scss" scoped>
@@ -29,6 +29,5 @@ const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.siz
   display: inline-block;
   line-height: 1;
   font-size: v-bind('iconSize');
-  color: v-bind('color');
 }
 </style>
diff --git a/src/pages.json b/src/pages.json
index a5a9108..9190da2 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -20,7 +20,7 @@
       },
       "meta": {
         "tabBar": true,
-        "ignoreAuth": true
+        "ignoreAuth": false
       }
     },
     {
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index 01ea8cb..fc54f7a 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/modules/user';
 
 const router = useRouter();
 const userStore = useUserStore();
-const { loginOrNot, userInfo } = storeToRefs(userStore);
+const { isLogined, userInfo } = storeToRefs(userStore);
 
 function handleJump(url: string) {
   router.push(url);
@@ -18,7 +18,7 @@ function handleLoginOut() {
 
 <template>
   <view class="text-md pt-36 bg-primary">
-    <view v-if="loginOrNot" class="text-center">
+    <view v-if="isLogined" class="text-center">
       <image class="w-8 h-8" :src="userInfo?.avatar" />
       <view class="mt-2">
         {{ userInfo?.nickname }}
@@ -28,7 +28,7 @@ function handleLoginOut() {
       <BasicButton @click="handleJump('/pages/log/index?id=4345&title=log&word=关键词')">
         log
       </BasicButton>
-      <BasicButton v-if="loginOrNot" @click="handleLoginOut">
+      <BasicButton v-if="isLogined" @click="handleLoginOut">
         登出
       </BasicButton>
       <BasicButton v-else @click="handleJump('/pages/login/index')">
diff --git a/src/pages/demo/index.vue b/src/pages/demo/index.vue
index 7d0037f..7cb51d1 100644
--- a/src/pages/demo/index.vue
+++ b/src/pages/demo/index.vue
@@ -1,21 +1,13 @@
 <script lang="ts" setup>
-import Iconify from '@/components/Iconify/index.vue';
-
-const demo = ref('Demo');
 </script>
 
 <template>
   <view class="flex flex-col items-center justify-center pt-36 text-lg font-medium">
-    {{ demo }}
     <view class="mt-30px">
       iconify 组件
     </view>
-    <view class="mt-30px center flex flex-row gap-10px">
-      <Iconify icon="i-mdi-account-box" size="64" color="blue" />
-      <Iconify icon="i-mdi-account-box" size="48" color="orange" />
-      <Iconify icon="i-mdi-account-box" size="32" color="green" />
-      <Iconify icon="i-mdi-account-box" />
-      <Iconify icon="i-svg-spinners-12-dots-scale-rotate" />
+    <view class="mt-[30px] center flex flex-row gap-10px">
+      <Iconify icon="i-mdi-account-box" size="66" class="text-[#987622]" />
     </view>
   </view>
 </template>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 1caa986..c13a6c7 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import { getRandomIcon } from '@/utils/character';
 import { platform } from '@/utils/platform';
+import { useUserStore } from '@/stores/modules/user';
 
 const logo = getRandomIcon();
 const appTitle = 'uniapp-vue3';
+
+onMounted(async () => {
+  const userStore = useUserStore();
+  const { isLogined } = userStore;
+  console.log('isLogined ', isLogined);
+});
 </script>
 
 <template>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 72df7ae..19ec109 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -4,6 +4,7 @@ import { useUserStore } from '@/stores/modules/user';
 import { Toast } from '@/utils/uniapi/prompt';
 
 const pageQuery = ref<Record<string, any> | undefined>(undefined);
+
 onLoad((query) => {
   pageQuery.value = query;
 });
@@ -16,26 +17,27 @@ const form = reactive({
 });
 const userStore = useUserStore();
 
-function submit(e: any) {
-  userStore.login(e.detail.value).then(() => {
-    Toast('登录成功', { duration: 1500 });
-    setTimeout(() => {
-      if (unref(pageQuery)?.redirect) {
-        // 如果有存在redirect(重定向)参数，登录成功后直接跳转
-        const params = omit(unref(pageQuery), ['redirect', 'tabBar']);
-        if (unref(pageQuery)) {
-          // 这里replace方法无法跳转tabbar页面故改为replaceAll
-          // eslint-disable-next-line ts/no-unused-expressions
-          unref(pageQuery)?.tabBar === 'true'
-            ? router.replaceAll({ name: unref(pageQuery)?.redirect, params })
-            : router.replace({ name: unref(pageQuery)?.redirect, params });
-        }
-      } else {
-        // 不存在则返回上一页
-        router.back();
+async function submit(e: any) {
+  await userStore.login(e.detail.value);
+  Toast('登录成功', { duration: 1500 });
+  console.log('pageQuery', unref(pageQuery));
+  setTimeout(() => {
+    if (unref(pageQuery)?.redirect) {
+      // 如果有存在redirect(重定向)参数，登录成功后直接跳转
+      const params = omit(unref(pageQuery), ['redirect', 'tabBar']);
+      console.log('params', params);
+
+      if (unref(pageQuery)) {
+        // eslint-disable-next-line ts/no-unused-expressions
+        unref(pageQuery)?.tabBar === 'true'
+          ? router.replaceAll({ name: unref(pageQuery)?.redirect, params })
+          : router.replace({ name: unref(pageQuery)?.redirect, params });
       }
-    }, 1500);
-  });
+    } else {
+      // 不存在则返回上一页
+      router.back();
+    }
+  }, 1500);
 }
 </script>
 
@@ -63,48 +65,5 @@ function submit(e: any) {
 </template>
 
 <style lang="scss" scoped>
-.container {
-  margin: 0 auto;
-  width: 80%;
 
-  .title {
-    padding: 320rpx 0 32rpx 0;
-    text-align: center;
-  }
-
-  .form-wrap {
-    padding: 20rpx 24rpx;
-    box-shadow: 16rpx 16rpx 30rpx #e5e7eb;
-
-    .form {
-      .form-item {
-        display: flex;
-        height: 88rpx;
-        border-bottom: 2rpx solid #dbeafe;
-        align-items: center;
-
-        .form-label {
-          min-width: 96rpx;
-        }
-
-        .form-element {
-          flex-grow: 1;
-        }
-      }
-
-      .submit-btn {
-        margin-top: 44rpx;
-        border: 4rpx solid #bfdbfe;
-        background-color: #60a5fa;
-        border-radius: 8rpx;
-        font-size: 28rpx;
-        color: #ffffff;
-
-        :hover {
-          background-color: #3b82f6;
-        }
-      }
-    }
-  }
-}
 </style>
diff --git a/src/pages/splashScreen/index.vue b/src/pages/splashScreen/index.vue
index 88738e4..c6bda3a 100644
--- a/src/pages/splashScreen/index.vue
+++ b/src/pages/splashScreen/index.vue
@@ -17,17 +17,50 @@
 -->
 <script lang="ts" setup>
 import { useUserStore } from '@/stores/modules/user';
+import { useSystemInfoStore } from '@/stores/modules/system';
 
+const { changeThemeModel } = useSystemInfoStore();
+
+const router = useRouter();
 onMounted(async () => {
   const userStore = useUserStore();
-  const { loginOrNot } = userStore;
-  console.log('loginOrNot ', loginOrNot);
+  const { isLogined } = userStore;
+  console.log('isLogined ', isLogined);
   userStore.initUserInfo();
+
+  // 如果已经登录，跳转到首页
+  if (isLogined) {
+    router.pushTab({
+      name: 'Home',
+    });
+  } else {
+    router.replace({
+      name: 'Login',
+      params: {
+        redirect: 'Home',
+        tabBar: 'true',
+      },
+    });
+  }
 });
+
+// fuc : 切换主题
+function changeTheme() {
+  const { themeModel } = useSystemInfoStore();
+  changeThemeModel({
+    model: themeModel === 'DARK' ? 'LIGHT' : 'DARK',
+  });
+}
 </script>
 
 <template>
-  <view>
-    流转
+  <view class=" bg-primary">
+    <span class="text-#123">流转</span>
+
+    <button
+      @click="changeTheme"
+    >
+      4
+    </button>
   </view>
 </template>
diff --git a/src/router/guard.ts b/src/router/guard.ts
index 88971c8..de0940a 100644
--- a/src/router/guard.ts
+++ b/src/router/guard.ts
@@ -1,4 +1,5 @@
 import type { Router } from 'uni-mini-router/lib/interfaces';
+import { useUserStore } from '@/stores/modules/user';
 
 export function createRouterGuard(router: Router) {
   createBeforeEachGuard(router);
@@ -7,15 +8,15 @@ export function createRouterGuard(router: Router) {
 
 function createBeforeEachGuard(router: Router) {
   router.beforeEach((to, _, next) => {
-    const _isLogin = true;
+    const { isLogined } = useUserStore();
     if (to && to?.meta?.ignoreAuth) {
       // 如果目标路由忽略验证直接跳转
       next();
-    } else if (!_isLogin && to && to.name !== 'Login') {
+    } else if (!isLogined && to && to.name !== 'Login') {
       // 如果没有登录且目标路由不是登录页面则跳转到登录页面
       // 将目标路由和参数传入登录页面，登录成功后直接跳转到目标路由，优化体验
       next({ name: 'Login', params: { redirect: to.name!, ...to.query }, navType: 'push' });
-    } else if (_isLogin && to && to.name === 'Login') {
+    } else if (isLogined && to && to.name === 'Login') {
       // 如果已经登录且目标页面是登录页面则跳转至首页
       next({ name: 'Home', navType: 'replaceAll' });
     } else {
@@ -27,13 +28,13 @@ function createBeforeEachGuard(router: Router) {
 
 function createAfterEachGuard(router: Router) {
   router.afterEach((to) => {
+    const { isLogined } = useUserStore();
     if (to && to?.meta?.ignoreAuth)
       return;
-    const _isLogin = true;
-    if (!_isLogin && to && to.name !== 'Login') {
+    if (!isLogined && to && to.name !== 'Login') {
       // 如果没有登录且目标路由不是登录页面则跳转到登录页面
       router.push({ name: 'Login', params: { ...to.query } });
-    } else if (_isLogin && to && to.name === 'Login') {
+    } else if (isLogined && to && to.name === 'Login') {
       // 如果已经登录且目标页面是登录页面则跳转至首页
       router.replaceAll({ name: 'Home' });
     }
diff --git a/src/router/index.ts b/src/router/index.ts
index 55a004a..3383f8f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,6 +12,7 @@ const router = createRouter({
 
 export function setupRouter(app: App<Element>) {
   // Configure router guard
+  console.log('app ===', app);
   createRouterGuard(router);
   app.use(router);
 }
diff --git a/src/stores/modules/system.ts b/src/stores/modules/system.ts
index dcfbe8b..7d3a07b 100644
--- a/src/stores/modules/system.ts
+++ b/src/stores/modules/system.ts
@@ -2,9 +2,10 @@ import { THEME_MODEL } from '@/enums/UI';
 import type { ThemeCfg } from '@/model/theme';
 import { theme as _theme } from '@/theme/theme';
 
+type ThemeModelKey = keyof typeof THEME_MODEL;
 interface SystemInfo {
   theme: ThemeCfg
-  themeModel: THEME_MODEL
+  themeModel: ThemeModelKey
   systemInfo: UniApp.GetSystemInfoResult
 }
 
@@ -12,11 +13,10 @@ export const useSystemInfoStore = defineStore({
   id: 'system',
   state: (): SystemInfo => ({
     // 主题
-    // theme: <ThemeCfg>Object.assign(_theme.light),
     theme: <ThemeCfg>{ ..._theme.light },
 
     // 当前主题模式
-    themeModel: THEME_MODEL.LIGHT as THEME_MODEL,
+    themeModel: 'LIGHT',
 
     // 系统信息
     systemInfo: {
@@ -32,9 +32,9 @@ export const useSystemInfoStore = defineStore({
     },
 
     // 切换主题
-    changeThemeModel({ model = THEME_MODEL.DARK as THEME_MODEL }) {
+    changeThemeModel({ model }: { model: ThemeModelKey } = { model: 'DARK' }) {
       this.themeModel = model;
-      this.theme = { ..._theme[model] };
+      this.theme = { ..._theme[THEME_MODEL[model]] };
     },
   },
   persist: {
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
index 14600d8..25a0c76 100644
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -15,7 +15,7 @@ export const useUserStore = defineStore({
     userInfo: null,
   }),
   getters: {
-    loginOrNot: state => !!state.token,
+    isLogined: state => !!state.token,
   },
   actions: {
 
@@ -26,15 +26,15 @@ export const useUserStore = defineStore({
 
     // 登录
     async login(params: LoginParams) {
-      const { send: sendLogin } = useRequest(loginApi, { immediate: false });
-      try {
-        const res = await sendLogin(params);
-        this.token = res.token;
-        this.setToken(res.token);
-        await this.getUserInfo();
-      } catch (error) {
-        throw error;
-      }
+      this.setToken('res.token');
+      // const { send: sendLogin } = useRequest(loginApi, { immediate: false });
+      // try {
+      //   const res = await sendLogin(params);
+      //   this.setToken(res.token);
+      //   await this.getUserInfo();
+      // } catch (error) {
+      //   throw error;
+      // }
     },
 
     // 获取用户信息
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index d83b6b1..6ec1d88 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -7,10 +7,6 @@
  * 在本文件的各种定义主题中 key 名应当保持完全统一
  * 按照此格式书写的 key 名完全路径禁止有重叠,否则会引发 bug
  */
-// container {
-// // ThemeColor
-// '--source': '#00bdd4',
-// }
 
 /**
  * secondary ：通常用于表示次要的、补充的元素，例如按钮的边框颜色、图标的颜色等。
@@ -19,7 +15,12 @@
  * neutral ：通常用于表示中性的、不带有情感色彩的元素，例如背景色、文本颜色等。
  */
 
-export const theme = {
+import type { THEME_MODEL } from '@/enums/UI';
+import type { ThemeCfg } from '@/model/theme';
+
+export const theme: {
+  [key in THEME_MODEL]: ThemeCfg
+} = {
   light: {
     /* light */
 
@@ -94,7 +95,7 @@ export const theme = {
     /* dark */
 
     /* 颜色 */
-    '--colors-primary': '#FFE274',
+    '--colors-primary': '#123',
     '--colors-secondary': '#5A7767', // 次要
     '--colors-accent': '#FB9300', // 强调
 
@@ -185,7 +186,6 @@ export function buildTheme() {
   const extendList = [ExtendStyle.OPACITY];
 
   flattenedObj.forEach((_v: string, k: string) => {
-    // const [_, key, value] = k.match(/^--(.+?)-(.+)$/) || [0, 'key', 'value'];
     const [_, key, value] = k.match(/^--([^-]+)-(.+)$/) || [0, 'key', 'value'];
 
     if (extendList.includes(key as ExtendStyle)) {
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 99643e6..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
-import { isMp } from './build/platform';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
-  theme: {
-    extend: {},
-  },
-  corePlugins: {
-    // 小程序去使用 h5 的 preflight 和响应式 container 没有意义
-    preflight: !isMp,
-    container: !isMp,
-  },
-  plugins: [iconsPlugin({
-    collections: getIconCollections(['mdi', 'svg-spinners']),
-  })],
-};
diff --git a/unocss.config.ts b/tailwind.config.ts
similarity index 65%
rename from unocss.config.ts
rename to tailwind.config.ts
index 2e8fe2a..52f6321 100644
--- a/unocss.config.ts
+++ b/tailwind.config.ts
@@ -1,41 +1,17 @@
-/**
- * unocss defineConfig
- * @link unocss: https://github.com/unocss/unocss
- * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
- */
-import presetWeapp from 'unocss-preset-weapp';
-import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
-import { presetIcons } from 'unocss';
-
-import transformerDirectives from '@unocss/transformer-directives';
-
-const { presetWeappAttributify, transformerAttributify } = extractorAttributify();
+import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
+import { isMp } from './build/platform';
 
+/** @type {import('tailwindcss').Config} */
 export default {
-  presets: [
-    // https://github.com/MellowCo/unocss-preset-weapp
-    presetWeapp(),
-    // attributify autocomplete
-    presetWeappAttributify(),
-    presetIcons(),
-  ],
-  shortcuts: [
-    {
-      'border-base': 'border border-gray-500_10',
-      'center': 'flex justify-center items-center',
-    },
-  ],
-  transformers: [
-    transformerDirectives({
-      enforce: 'pre',
-    }),
-
-    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
-    transformerAttributify(),
-
-    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
-    transformerClass(),
-  ],
+  content: ['./public/index.html', './src/**/**.{html,js,ts,jsx,tsx,vue}'],
+  corePlugins: {
+    // 小程序去使用 h5 的 preflight 和响应式 container 没有意义
+    preflight: !isMp,
+    container: !isMp,
+  },
+  plugins: [iconsPlugin({
+    collections: getIconCollections(['mdi', 'svg-spinners']),
+  })],
   theme: {
     extend: {
       opacity: {
diff --git a/vite/plugins/build.unocss.config.ts b/vite/plugins/build.unocss.config.ts
index 135428f..114e9e5 100644
--- a/vite/plugins/build.unocss.config.ts
+++ b/vite/plugins/build.unocss.config.ts
@@ -2,9 +2,10 @@ import * as fs from 'node:fs';
 import { buildTheme } from '../../src/theme/theme';
 
 export default function buildThemeConfig() {
+  const fileName = './tailwind.config.ts';
   const _data = buildTheme();
   // 写入时会先清空文件
-  fs.writeFile('./unocss.config.ts', `${createFileByTemplate(_data)}`, (err: any) => {
+  fs.writeFile(fileName, `${createFileByTemplate(_data)}`, (err: any) => {
     if (err) {
       console.error(err);
     } else {
@@ -36,47 +37,22 @@ function flatten(obj: any, parentKey = ''): any {
 // 通过模版生成文件
 function createFileByTemplate(theme: any) {
   const fileString = `
-  /**
-   * unocss defineConfig
-   * @link unocss: https://github.com/unocss/unocss
-   * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
-   * */
-  import presetWeapp from 'unocss-preset-weapp'
-  import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
-  import { presetIcons } from 'unocss'
-
-  import transformerDirectives from '@unocss/transformer-directives'
-
-  const { presetWeappAttributify, transformerAttributify } = extractorAttributify()
+  import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
+  import { isMp } from './build/platform';
 
+  /** @type {import('tailwindcss').Config} */
   export default {
-    presets: [
-      // https://github.com/MellowCo/unocss-preset-weapp
-      presetWeapp(),
-      // attributify autocomplete
-      presetWeappAttributify(),
-      presetIcons(),
-    ],
-    shortcuts: [
-      {
-        'border-base': 'border border-gray-500_10',
-        'center': 'flex justify-center items-center',
-      },
-    ],
-    transformers: [
-      transformerDirectives({
-        enforce: 'pre',
-      }),
-
-      // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
-      transformerAttributify(),
-
-      // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
-      transformerClass(),
-    ],
-    theme: ${JSON.stringify(theme, null, 2)}
-  }
+    content: ['./public/index.html', './src/**/**.{html,js,ts,jsx,tsx,vue}'],
+    corePlugins: {
+      // 小程序去使用 h5 的 preflight 和响应式 container 没有意义
+      preflight: !isMp,
+      container: !isMp,
+    },
+    plugins: [iconsPlugin({
+      collections: getIconCollections(['mdi', 'svg-spinners']),
+    })],
+    theme: ${JSON.stringify(theme, null, 4)}
+  };
 `;
-
   return fileString;
 }