feat(projects): add switch-lang, add look-forward

.vscode/settings.json

@@ -8,6 +8,7 @@
     "EDITMSG",
     "espree",
     "execa",
+    "heroicons",
     "hexcode",
     "iconify",
     "INDEXEDDB",

package.json

@@ -25,7 +25,7 @@
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
     "@vueuse/core": "10.5.0",
-    "ant-design-vue": "4.0.3",
+    "ant-design-vue": "4.0.6",
     "lodash-es": "4.17.21",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
@@ -35,19 +35,19 @@
   },
   "devDependencies": {
     "@elegant-router/vue": "0.2.3",
-    "@iconify-json/heroicons": "1.1.12",
+    "@iconify-json/heroicons": "1.1.13",
     "@iconify-json/ic": "1.1.14",
     "@iconify-json/icon-park-outline": "1.1.12",
-    "@iconify-json/line-md": "1.1.32",
+    "@iconify-json/line-md": "1.1.33",
     "@iconify-json/logos": "1.1.37",
-    "@iconify-json/material-symbols": "1.1.59",
+    "@iconify-json/material-symbols": "1.1.60",
     "@iconify-json/ph": "1.1.6",
     "@iconify-json/tabler": "1.1.95",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
-    "@types/lodash-es": "4.17.9",
-    "@types/node": "20.8.5",
-    "@types/nprogress": "0.2.1",
+    "@types/lodash-es": "4.17.10",
+    "@types/node": "20.8.7",
+    "@types/nprogress": "0.2.2",
     "@unocss/preset-icons": "0.56.5",
     "@unocss/preset-uno": "0.56.5",
     "@unocss/transformer-directives": "0.56.5",
@@ -61,9 +61,9 @@
     "simple-git-hooks": "2.9.0",
     "typescript": "5.2.2",
     "unocss-preset-scrollbar": "0.3.0",
-    "unplugin-icons": "0.17.0",
+    "unplugin-icons": "0.17.1",
     "unplugin-vue-components": "0.25.2",
-    "vite": "4.4.11",
+    "vite": "4.5.0",
     "vite-plugin-progress": "^0.0.7",
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-vue-devtools": "1.0.0-rc.5",

packages/docs/package.json

@@ -7,6 +7,6 @@
     "serve": "vitepress serve"
   },
   "devDependencies": {
-    "vitepress": "1.0.0-rc.21"
+    "vitepress": "1.0.0-rc.22"
   }
 }

packages/eslint-config/configs/vue.js

@@ -28,7 +28,7 @@ module.exports = {
     'vue/multi-word-component-names': [
       'error',
       {
-        ignores: ['index', 'App']
+        ignores: ['index', 'App', '[id]']
       }
     ]
   }

packages/eslint-config/package.json

@@ -7,9 +7,9 @@
     "./vue": "./configs/vue.js"
   },
   "devDependencies": {
-    "@types/eslint": "8.44.4",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@types/eslint": "8.44.6",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/parser": "6.8.0",
     "eslint": "8.51.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-typescript": "3.6.1",

packages/scripts/package.json

@@ -15,13 +15,13 @@
     "sa": "./bin.cjs"
   },
   "devDependencies": {
-    "c12": "1.4.2",
+    "c12": "1.5.1",
     "cac": "6.7.14",
     "consola": "3.2.3",
     "enquirer": "2.4.1",
     "execa": "8.0.1",
     "jiti": "1.20.0",
-    "lint-staged": "14.0.1",
+    "lint-staged": "15.0.2",
     "npm-check-updates": "16.14.6",
     "rimraf": "5.0.5"
   }

packages/utils/package.json

@@ -17,6 +17,6 @@
     "localforage": "1.10.0"
   },
   "devDependencies": {
-    "@types/crypto-js": "4.1.2"
+    "@types/crypto-js": "4.1.3"
   }
 }

src/components/custom/look-forward.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LookForward'
+});
+</script>
+
+<template>
+  <div class="flex-vertical-center gap-24px min-h-520px wh-full overflow-hidden">
+    <div class="flex text-400px text-primary">
+      <SvgIcon local-icon="expectation" />
+    </div>
+    <h3 class="text-28px font-500 text-primary">{{ $t('common.lookForward') }}</h3>
+  </div>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-header/components/switch-lang.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { setLocale } from '@/locales';
+import { localStg } from '@/utils/storage';
+
+defineOptions({
+  name: 'SwitchLang'
+});
+
+const locale = ref<App.I18n.LangType>(localStg.get('lang') || 'zh-CN');
+
+type LocaleOption = {
+  label: string;
+  key: App.I18n.LangType;
+};
+
+const options: LocaleOption[] = [
+  {
+    label: '中文',
+    key: 'zh-CN'
+  },
+  {
+    label: 'English',
+    key: 'en'
+  }
+];
+
+function handleSelect(e: MenuInfo) {
+  const key = e.key as App.I18n.LangType;
+  locale.value = key;
+  setLocale(key);
+  localStg.set('lang', key);
+}
+</script>
+
+<template>
+  <ADropdown placement="bottom">
+    <AButton type="text" class="h-full">
+      <div class="flex-y-center">
+        <SvgIcon icon="heroicons:language" class="text-icon" />
+      </div>
+    </AButton>
+    <template #overlay>
+      <AMenu :selected-keys="[locale]" @click="handleSelect">
+        <AMenuItem v-for="option in options" :key="option.key">
+          {{ option.label }}
+        </AMenuItem>
+      </AMenu>
+    </template>
+  </ADropdown>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-header/components/user-avatar.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { $t } from '@/locales';
+
 defineOptions({
   name: 'UserAvatar'
 });
 </script>
 
 <template>
-  <ADropdown>
+  <ADropdown placement="bottomRight">
     <AButton type="text" class="h-full">
       <div class="flex-y-center">
         <SvgIcon icon="ph:user-circle" class="text-icon-large" />
@@ -17,14 +19,14 @@ defineOptions({
         <AMenuItem>
           <div class="flex-y-center">
             <SvgIcon icon="ph:user-circle" class="text-icon" />
-            <span class="pl-8px">User Center</span>
+            <span class="pl-8px">{{ $t('common.userCenter') }}</span>
           </div>
         </AMenuItem>
-        <ADivider class="m-0!" />
+        <AMenuDivider />
         <AMenuItem>
           <div class="flex-y-center">
             <SvgIcon icon="ph:sign-out" class="text-icon" />
-            <span class="pl-8px">Logout</span>
+            <span class="pl-8px">{{ $t('common.logout') }}</span>
           </div>
         </AMenuItem>
       </AMenu>

src/layouts/modules/global-header/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useThemeStore } from '@/store/modules/theme';
 // import GlobalLogo from '../../components/global-logo.vue';
+import SwitchLang from './components/switch-lang.vue';
 import UserAvatar from './components/user-avatar.vue';
 
 const themeStore = useThemeStore();
@@ -16,6 +17,7 @@ defineOptions({
       <MenuToggler />
     </div>
     <div class="flex justify-end h-full">
+      <SwitchLang />
       <ColorSchemaSwitch
         :color-schema="themeStore.colorScheme"
         :is-dark="themeStore.darkMode"

src/locales/lang/en.ts

@@ -14,7 +14,10 @@ const local: App.I18n.Schema = {
     cancel: 'Cancel',
     pleaseCheckValue: 'Please check whether the value is valid',
     action: 'Action',
-    backToHome: 'Back to home'
+    backToHome: 'Back to home',
+    lookForward: 'Coming soon',
+    userCenter: 'User Center',
+    logout: 'Logout'
   }
 };
 

src/locales/lang/zh-CN.ts

@@ -14,7 +14,10 @@ const local: App.I18n.Schema = {
     cancel: '取消',
     pleaseCheckValue: '请检查输入的值是否合法',
     action: '操作',
-    backToHome: '返回首页'
+    backToHome: '返回首页',
+    lookForward: '敬请期待',
+    userCenter: '个人中心',
+    logout: '退出登录'
   }
 };
 

src/router/elegant/imports.ts

@@ -19,7 +19,9 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   404: () => import("@/views/_builtin/404/index.vue"),
   500: () => import("@/views/_builtin/500/index.vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
-  about: () => import("@/views/about/index.vue"),
+  home: () => import("@/views/home/index.vue"),
   "multi-menu_first_child": () => import("@/views/multi-menu/first_child/index.vue"),
   "multi-menu_second_child_home": () => import("@/views/multi-menu/second_child_home/index.vue"),
+  user_detail: () => import("@/views/user/detail/[id].vue"),
+  user_list: () => import("@/views/user/list/index.vue"),
 };

src/router/elegant/routes.ts

@@ -47,15 +47,15 @@ export const autoRoutes: ElegantRoute[] = [
     ]
   },
   {
-    path: '/about',
+    path: '/home',
     component: 'layout.base',
     children: [
       {
-        name: 'about',
+        name: 'home',
         path: '',
-        component: 'view.about',
+        component: 'view.home',
         meta: {
-          title: 'about'
+          title: 'home'
         }
       }
     ]
@@ -132,5 +132,34 @@ export const autoRoutes: ElegantRoute[] = [
         }
       }
     ]
+  },
+  {
+    name: 'user',
+    path: '/user',
+    component: 'layout.base',
+    redirect: {
+      name: 'user_list'
+    },
+    meta: {
+      title: 'user'
+    },
+    children: [
+      {
+        name: 'user_detail',
+        path: '/user/detail/:id',
+        component: 'view.user_detail',
+        meta: {
+          title: 'user_detail'
+        }
+      },
+      {
+        name: 'user_list',
+        path: '/user/list',
+        component: 'view.user_list',
+        meta: {
+          title: 'user_list'
+        }
+      }
+    ]
   }
 ];

src/router/routes/index.ts

@@ -8,7 +8,7 @@ const constantRoutes: CustomRoute[] = [
     name: 'root',
     path: '/',
     redirect: {
-      name: 'about'
+      name: 'home'
     }
   },
   {

src/typings/app.d.ts

@@ -89,6 +89,9 @@ declare namespace App {
         pleaseCheckValue: string;
         action: string;
         backToHome: string;
+        lookForward: string;
+        userCenter: string;
+        logout: string;
       };
     };
 

src/typings/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AppLoading: typeof import('./../components/common/app-loading.vue')['default']
     ColorSchemaSwitch: typeof import('./../components/common/color-schema-switch.vue')['default']
@@ -19,6 +20,7 @@ declare module 'vue' {
     HoverContainer: typeof import('./../components/common/hover-container.vue')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
     IconLocalLogoFill: typeof import('~icons/local/logo-fill')['default']
+    LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/custom/menu-toggler.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']