Skip to content

Commit b320ed8

Browse files
buqiyuanbuqiyuan
committed
feat(views): add about page
1 parent a1805e8 commit b320ed8

File tree

12 files changed

+226
-58
lines changed

12 files changed

+226
-58
lines changed

‎package.json

+15-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{
22
"name": "vue3-antd-admin",
33
"version": "0.1.4",
4-
"private": true,
4+
"author": {
5+
"name": "buqiyuan",
6+
"email": "1743369777@qq.com",
7+
"url": "https://github.com/buqiyuan"
8+
},
59
"scripts": {
610
"dev": "npm run serve",
711
"serve": "vue-cli-service serve",
@@ -18,8 +22,8 @@
1822
"prepare": "husky install",
1923
"version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
2024
"postversion": "git push && git push origin --tags",
21-
"test prod cors": "npx http-server dist --cors --gzip -P http://29135jo738.zicp.vip",
22-
"test prod gzip": "npx http-server dist --cors --gzip -c-1"
25+
"test:gzip": "npx http-server dist --cors --gzip -c-1",
26+
"test:br": "npx http-server dist --cors --brotli -c-1"
2327
},
2428
"dependencies": {
2529
"@vueuse/core": "^7.5.4",
@@ -68,11 +72,11 @@
6872
"husky": "^7.0.4",
6973
"less": "^4.1.2",
7074
"less-loader": "10.2.0",
71-
"lint-staged": "^12.3.0",
75+
"lint-staged": "^12.3.1",
7276
"path-browserify": "^1.0.1",
7377
"postcss-html": "^1.3.0",
7478
"prettier": "^2.5.1",
75-
"stylelint": "^14.2.0",
79+
"stylelint": "^14.3.0",
7680
"stylelint-config-html": "^1.0.0",
7781
"stylelint-config-prettier": "^9.0.3",
7882
"stylelint-config-recommended": "^6.0.0",
@@ -81,10 +85,14 @@
8185
"svg-sprite-loader": "^6.0.11",
8286
"typescript": "^4.5.5",
8387
"vue-cli-plugin-windicss": "^1.1.3",
84-
"vue-eslint-parser": "^8.1.0"
88+
"vue-eslint-parser": "^8.2.0"
8589
},
8690
"__npminstall_done": false,
87-
"homepage": "git@buqiyuan.github.io/vue3-antd-admin",
91+
"repository": {
92+
"type": "git",
93+
"url": "https://github.com/buqiyuan/vue3-antd-admin"
94+
},
95+
"homepage": "https://buqiyuan.gitee.io/vue3-antd-admin",
8896
"keywords": [
8997
"vue",
9098
"ant-design-vue",

‎src/layout/header/index.vue

+5-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,11 @@
3636
<Avatar :src="userInfo.headImg" :alt="userInfo.name">{{ userInfo.name }}</Avatar>
3737
<template #overlay>
3838
<Menu>
39-
<Menu.Item>
40-
<div>个人中心</div>
39+
<Menu.Item @click="$router.push({ name: 'account-about' })">
40+
{{ $t('routes.account.about') }}
41+
</Menu.Item>
42+
<Menu.Item @click="$router.push({ name: 'account-settings' })">
43+
{{ $t('routes.account.settings') }}
4144
</Menu.Item>
4245
<Menu.Divider />
4346
<Menu.Item>

‎src/layout/menu/menu.vue

+4-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@
5252
const targetMenu = getTargetMenuByActiveMenuName(meta.activeMenu);
5353
return targetMenu?.meta?.namePath ?? [meta?.activeMenu];
5454
}
55-
return currentRoute.meta?.namePath ?? currentRoute.matched.slice(1).map((n) => n.name);
55+
56+
return meta?.hideInMenu
57+
? state?.openKeys || []
58+
: currentRoute.meta?.namePath ?? currentRoute.matched.slice(1).map((n) => n.name);
5659
};
5760
5861
const state = reactive({

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
settings: 'settings',
3+
about: 'about',
4+
};

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export default {
2+
settings: '个人设置',
3+
about: '关于',
4+
};

‎src/router/staticModules/account.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { type RouteRecordRaw } from 'vue-router';
2+
import RouterView from '@/layout/routerView/index.vue';
3+
import { t } from '@/hooks/useI18n';
4+
5+
const moduleName = 'account';
6+
7+
const routes: Array<RouteRecordRaw> = [
8+
{
9+
path: '/account',
10+
component: RouterView,
11+
redirect: '/account/settings',
12+
meta: {
13+
title: '个人中心',
14+
hideInMenu: true,
15+
},
16+
children: [
17+
{
18+
path: 'settings',
19+
name: `${moduleName}-settings`,
20+
component: () => import('@/views/account/settings.vue'),
21+
meta: { title: t('routes.account.settings'), hideInMenu: true },
22+
},
23+
{
24+
path: 'about',
25+
name: `${moduleName}-about`,
26+
component: () => import('@/views/account/about.vue'),
27+
meta: { title: t('routes.account.about'), hideInMenu: true },
28+
},
29+
],
30+
},
31+
];
32+
33+
export default routes;

‎src/router/staticModules/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import dashboard from './dashboard';
22
import demos from './demos';
33
import externaLink from './externa-link';
4+
import account from './account';
45

5-
export default [...dashboard, ...demos, ...externaLink];
6+
export default [...dashboard, ...demos, ...externaLink, ...account];

‎src/views/account/about.vue

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div>
3+
<Card>
4+
<Card.Meta title="关于">
5+
<template #description>
6+
<BlankLink :url="pkg.author.url" :text="pkg.name" />的前端项目是基于Vue3.x、Vue-CLI5.x、
7+
Ant-Design-Vue3.x 、TypeScript4.x开发，
8+
内置了动态路由、权限验证、并提供了常用的功能组件，帮助你快速搭建企业级中后台产品原型。
9+
原则上不会限制任何代码用于商用。
10+
</template>
11+
</Card.Meta>
12+
</Card>
13+
<Card class="mt-3">
14+
<Descriptions title="项目信息" :column="2" bordered>
15+
<Descriptions.Item label="版本">
16+
<Tag color="processing">{{ pkg.version }}</Tag>
17+
</Descriptions.Item>
18+
<Descriptions.Item label="最后编译时间">
19+
<Tag color="processing">{{ lastBuildTime }}</Tag>
20+
</Descriptions.Item>
21+
<Descriptions.Item label="GitHub">
22+
<BlankLink :url="pkg.repository.url" text="GitHub" />
23+
</Descriptions.Item>
24+
<Descriptions.Item label="预览地址">
25+
<BlankLink :url="pkg.homepage" text="预览地址" />
26+
</Descriptions.Item>
27+
</Descriptions>
28+
</Card>
29+
<Card class="mt-3">
30+
<Descriptions title="生产环境依赖" bordered>
31+
<template v-for="(value, key) in pkg.dependencies" :key="key">
32+
<Descriptions.Item :label="key">
33+
<BlankLink :url="value.url" :text="value.version" />
34+
</Descriptions.Item>
35+
</template>
36+
</Descriptions>
37+
</Card>
38+
<Card class="mt-3">
39+
<Descriptions title="开发环境依赖" bordered>
40+
<template v-for="(value, key) in pkg.devDependencies" :key="key">
41+
<Descriptions.Item :label="key">
42+
<BlankLink :url="value.url" :text="value.version" />
43+
</Descriptions.Item>
44+
</template>
45+
</Descriptions>
46+
</Card>
47+
</div>
48+
</template>
49+
50+
<script setup lang="tsx">
51+
import { Descriptions, Card, Tag } from 'ant-design-vue';
52+
const { pkg, lastBuildTime } = __APP_INFO__;
53+
54+
const BlankLink = ({ url = '', text }) => (
55+
<a href={url.replace('git+', '')} target="_blank">
56+
{text}
57+
</a>
58+
);
59+
</script>

‎src/views/account/settings.vue

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<template> <div> 个人中心 </div> </template>

‎types/global.d.ts

+9-5
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@ import type {
66
FunctionalComponent,
77
PropType as VuePropType,
88
} from 'vue';
9+
import packageJSON from '../package.json';
10+
11+
type DepInfo = {
12+
url: string;
13+
version: string;
14+
};
915

1016
declare global {
1117
const __APP_INFO__: {
12-
pkg: {
13-
name: string;
14-
version: string;
15-
dependencies: Recordable<string>;
16-
devDependencies: Recordable<string>;
18+
pkg: typeof packageJSON & {
19+
dependencies: Record<string, DepInfo>;
20+
devDependencies: Record<string, DepInfo>;
1721
};
1822
lastBuildTime: string;
1923
};

‎vue.config.js

+29-1
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,38 @@
11
const { defineConfig } = require('@vue/cli-service');
2+
const webpack = require('webpack');
23
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
34
// const CompressionPlugin = require('compression-webpack-plugin');
45
// 去除console
6+
const dayjs = require('dayjs');
57
const TerserPlugin = require('terser-webpack-plugin');
68
const path = require('path');
79
const resolve = (dir) => path.join(__dirname, dir); // 路径
10+
const pkg = require('./package.json');
811

9-
process.env.VUE_APP_VERSION = require('./package.json').version;
12+
process.env.VUE_APP_VERSION = pkg.version;
1013

1114
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
1215
// const IS_DEV = ['development'].includes(process.env.NODE_ENV);
1316

1417
// port = 8098 npm run dev OR npm run dev --port = 8098
1518
const port = process.env.port || process.env.npm_config_port || 8098; // dev port
19+
// 获取所有依赖地址
20+
['dependencies', 'devDependencies'].forEach((name) => {
21+
Object.keys(pkg[name]).forEach((key) => {
22+
const devPkg = require(`./node_modules/${key}/package.json`);
23+
pkg[name][key] = {
24+
url: devPkg.repository?.url || devPkg.repository || devPkg.homepage,
25+
version: pkg[name][key],
26+
};
27+
});
28+
});
29+
30+
const __APP_INFO__ = {
31+
pkg,
32+
lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
33+
};
34+
35+
process.env.VUE_APP_APP_INFO = JSON.stringify(__APP_INFO__);
1636

1737
module.exports = defineConfig({
1838
// lintOnSave: false, //关闭eslint检查
@@ -53,6 +73,7 @@ module.exports = defineConfig({
5373

5474
// 配置相关loader，支持修改，添加和替换相关的loader
5575
config.resolve.alias.set('@', resolve('src'));
76+
config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js');
5677

5778
// 打包分析
5879
if (IS_PROD) {
@@ -150,6 +171,13 @@ module.exports = defineConfig({
150171
};
151172
config.resolve.fallback = { path: require.resolve('path-browserify') };
152173

174+
config.plugins.push(
175+
// 定义全局变量
176+
new webpack.DefinePlugin({
177+
__APP_INFO__: JSON.stringify(__APP_INFO__),
178+
}),
179+
);
180+
153181
if (IS_PROD) {
154182
config.plugins.push(
155183
new TerserPlugin({

0 commit comments

Comments
 (0)