feat(views): add about page

package.json

@@ -1,7 +1,11 @@
 {
   "name": "vue3-antd-admin",
   "version": "0.1.4",
-  "private": true,
+  "author": {
+    "name": "buqiyuan",
+    "email": "1743369777@qq.com",
+    "url": "https://github.com/buqiyuan"
+  },
   "scripts": {
     "dev": "npm run serve",
     "serve": "vue-cli-service serve",
@@ -18,8 +22,8 @@
     "prepare": "husky install",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "postversion": "git push && git push origin --tags",
-    "test prod cors": "npx http-server dist --cors --gzip -P http://29135jo738.zicp.vip",
-    "test prod gzip": "npx http-server dist --cors --gzip -c-1"
+    "test:gzip": "npx http-server dist --cors --gzip -c-1",
+    "test:br": "npx http-server dist --cors --brotli -c-1"
   },
   "dependencies": {
     "@vueuse/core": "^7.5.4",
@@ -68,11 +72,11 @@
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.3.0",
+    "lint-staged": "^12.3.1",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
     "prettier": "^2.5.1",
-    "stylelint": "^14.2.0",
+    "stylelint": "^14.3.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^6.0.0",
@@ -81,10 +85,14 @@
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^4.5.5",
     "vue-cli-plugin-windicss": "^1.1.3",
-    "vue-eslint-parser": "^8.1.0"
+    "vue-eslint-parser": "^8.2.0"
   },
   "__npminstall_done": false,
-  "homepage": "git@buqiyuan.github.io/vue3-antd-admin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/buqiyuan/vue3-antd-admin"
+  },
+  "homepage": "https://buqiyuan.gitee.io/vue3-antd-admin",
   "keywords": [
     "vue",
     "ant-design-vue",

src/layout/header/index.vue

@@ -36,8 +36,11 @@
         <Avatar :src="userInfo.headImg" :alt="userInfo.name">{{ userInfo.name }}</Avatar>
         <template #overlay>
           <Menu>
-            <Menu.Item>
-              <div>个人中心</div>
+            <Menu.Item @click="$router.push({ name: 'account-about' })">
+              {{ $t('routes.account.about') }}
+            </Menu.Item>
+            <Menu.Item @click="$router.push({ name: 'account-settings' })">
+              {{ $t('routes.account.settings') }}
             </Menu.Item>
             <Menu.Divider />
             <Menu.Item>

src/layout/menu/menu.vue

@@ -52,7 +52,10 @@
       const targetMenu = getTargetMenuByActiveMenuName(meta.activeMenu);
       return targetMenu?.meta?.namePath ?? [meta?.activeMenu];
     }
-    return currentRoute.meta?.namePath ?? currentRoute.matched.slice(1).map((n) => n.name);
+
+    return meta?.hideInMenu
+      ? state?.openKeys || []
+      : currentRoute.meta?.namePath ?? currentRoute.matched.slice(1).map((n) => n.name);
   };
 
   const state = reactive({

src/locales/lang/en-US/routes/account.ts

@@ -0,0 +1,4 @@
+export default {
+  settings: 'settings',
+  about: 'about',
+};

src/locales/lang/zh-CN/routes/account.ts

@@ -0,0 +1,4 @@
+export default {
+  settings: '个人设置',
+  about: '关于',
+};

src/router/staticModules/account.ts

@@ -0,0 +1,33 @@
+import { type RouteRecordRaw } from 'vue-router';
+import RouterView from '@/layout/routerView/index.vue';
+import { t } from '@/hooks/useI18n';
+
+const moduleName = 'account';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/account',
+    component: RouterView,
+    redirect: '/account/settings',
+    meta: {
+      title: '个人中心',
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: 'settings',
+        name: `${moduleName}-settings`,
+        component: () => import('@/views/account/settings.vue'),
+        meta: { title: t('routes.account.settings'), hideInMenu: true },
+      },
+      {
+        path: 'about',
+        name: `${moduleName}-about`,
+        component: () => import('@/views/account/about.vue'),
+        meta: { title: t('routes.account.about'), hideInMenu: true },
+      },
+    ],
+  },
+];
+
+export default routes;

src/router/staticModules/index.ts

@@ -1,5 +1,6 @@
 import dashboard from './dashboard';
 import demos from './demos';
 import externaLink from './externa-link';
+import account from './account';
 
-export default [...dashboard, ...demos, ...externaLink];
+export default [...dashboard, ...demos, ...externaLink, ...account];

src/views/account/about.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <Card>
+      <Card.Meta title="关于">
+        <template #description>
+          <BlankLink :url="pkg.author.url" :text="pkg.name" />的前端项目是基于Vue3.x、Vue-CLI5.x、
+          Ant-Design-Vue3.x 、TypeScript4.x开发，
+          内置了动态路由、权限验证、并提供了常用的功能组件，帮助你快速搭建企业级中后台产品原型。
+          原则上不会限制任何代码用于商用。
+        </template>
+      </Card.Meta>
+    </Card>
+    <Card class="mt-3">
+      <Descriptions title="项目信息" :column="2" bordered>
+        <Descriptions.Item label="版本">
+          <Tag color="processing">{{ pkg.version }}</Tag>
+        </Descriptions.Item>
+        <Descriptions.Item label="最后编译时间">
+          <Tag color="processing">{{ lastBuildTime }}</Tag>
+        </Descriptions.Item>
+        <Descriptions.Item label="GitHub">
+          <BlankLink :url="pkg.repository.url" text="GitHub" />
+        </Descriptions.Item>
+        <Descriptions.Item label="预览地址">
+          <BlankLink :url="pkg.homepage" text="预览地址" />
+        </Descriptions.Item>
+      </Descriptions>
+    </Card>
+    <Card class="mt-3">
+      <Descriptions title="生产环境依赖" bordered>
+        <template v-for="(value, key) in pkg.dependencies" :key="key">
+          <Descriptions.Item :label="key">
+            <BlankLink :url="value.url" :text="value.version" />
+          </Descriptions.Item>
+        </template>
+      </Descriptions>
+    </Card>
+    <Card class="mt-3">
+      <Descriptions title="开发环境依赖" bordered>
+        <template v-for="(value, key) in pkg.devDependencies" :key="key">
+          <Descriptions.Item :label="key">
+            <BlankLink :url="value.url" :text="value.version" />
+          </Descriptions.Item>
+        </template>
+      </Descriptions>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { Descriptions, Card, Tag } from 'ant-design-vue';
+  const { pkg, lastBuildTime } = __APP_INFO__;
+
+  const BlankLink = ({ url = '', text }) => (
+    <a href={url.replace('git+', '')} target="_blank">
+      {text}
+    </a>
+  );
+</script>

src/views/account/settings.vue

@@ -0,0 +1 @@
+<template> <div> 个人中心 </div> </template>

types/global.d.ts

@@ -6,14 +6,18 @@ import type {
   FunctionalComponent,
   PropType as VuePropType,
 } from 'vue';
+import packageJSON from '../package.json';
+
+type DepInfo = {
+  url: string;
+  version: string;
+};
 
 declare global {
   const __APP_INFO__: {
-    pkg: {
-      name: string;
-      version: string;
-      dependencies: Recordable<string>;
-      devDependencies: Recordable<string>;
+    pkg: typeof packageJSON & {
+      dependencies: Record<string, DepInfo>;
+      devDependencies: Record<string, DepInfo>;
     };
     lastBuildTime: string;
   };

vue.config.js

@@ -1,18 +1,38 @@
 const { defineConfig } = require('@vue/cli-service');
+const webpack = require('webpack');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 // const CompressionPlugin = require('compression-webpack-plugin');
 // 去除console
+const dayjs = require('dayjs');
 const TerserPlugin = require('terser-webpack-plugin');
 const path = require('path');
 const resolve = (dir) => path.join(__dirname, dir); // 路径
+const pkg = require('./package.json');
 
-process.env.VUE_APP_VERSION = require('./package.json').version;
+process.env.VUE_APP_VERSION = pkg.version;
 
 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
 // const IS_DEV = ['development'].includes(process.env.NODE_ENV);
 
 // port = 8098 npm run dev OR npm run dev --port = 8098
 const port = process.env.port || process.env.npm_config_port || 8098; // dev port
+// 获取所有依赖地址
+['dependencies', 'devDependencies'].forEach((name) => {
+  Object.keys(pkg[name]).forEach((key) => {
+    const devPkg = require(`./node_modules/${key}/package.json`);
+    pkg[name][key] = {
+      url: devPkg.repository?.url || devPkg.repository || devPkg.homepage,
+      version: pkg[name][key],
+    };
+  });
+});
+
+const __APP_INFO__ = {
+  pkg,
+  lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+};
+
+process.env.VUE_APP_APP_INFO = JSON.stringify(__APP_INFO__);
 
 module.exports = defineConfig({
   // lintOnSave: false, //关闭eslint检查
@@ -53,6 +73,7 @@ module.exports = defineConfig({
 
     // 配置相关loader，支持修改，添加和替换相关的loader
     config.resolve.alias.set('@', resolve('src'));
+    config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js');
 
     // 打包分析
     if (IS_PROD) {
@@ -150,6 +171,13 @@ module.exports = defineConfig({
     };
     config.resolve.fallback = { path: require.resolve('path-browserify') };
 
+    config.plugins.push(
+      // 定义全局变量
+      new webpack.DefinePlugin({
+        __APP_INFO__: JSON.stringify(__APP_INFO__),
+      }),
+    );
+
     if (IS_PROD) {
       config.plugins.push(
         new TerserPlugin({