index.vue
3.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
<PageWrapper title="关于">
<template #headerContent>
<div class="flex justify-between items-center">
<span class="flex-1">
<a :href="GITHUB_URL" target="_blank">{{ name }}</a>
是一个基于Vue3.0、Vite、 Ant-Design-Vue 、TypeScript
的后台解决方案，目标是为中大型项目开发,提供现成的开箱解决方案及丰富的示例,原则上不会限制任何代码用于商用。
</span>
</div>
</template>
<Description @register="infoRegister" />
<Description @register="register" class="my-4" />
<Description @register="registerDev" />
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, h } from 'vue';
import { Tag } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page';
import { Description, DescItem, useDescription } from '/@/components/Description/index';
import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
export default defineComponent({
name: 'AboutPage',
components: { Description, PageWrapper },
setup() {
const { pkg, lastBuildTime } = window.__APP_INFO__;
const { dependencies, devDependencies, name, version } = pkg;
const schema: DescItem[] = [];
const devSchema: DescItem[] = [];
const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
const infoSchema: DescItem[] = [
{
label: '版本',
field: 'version',
render: commonTagRender('blue'),
},
{
label: '最后编译时间',
field: 'lastBuildTime',
render: commonTagRender('blue'),
},
{
label: '文档地址',
field: 'doc',
render: commonLinkRender('文档地址'),
},
{
label: '预览地址',
field: 'preview',
render: commonLinkRender('预览地址'),
},
{
label: 'Github',
field: 'github',
render: commonLinkRender('Github'),
},
];
const infoData = {
version,
lastBuildTime,
doc: DOC_URL,
preview: SITE_URL,
github: GITHUB_URL,
};
Object.keys(dependencies).forEach((key) => {
schema.push({ field: key, label: key });
});
Object.keys(devDependencies).forEach((key) => {
devSchema.push({ field: key, label: key });
});
const [register] = useDescription({
title: '生产环境依赖',
data: dependencies,
schema: schema,
column: 3,
});
const [registerDev] = useDescription({
title: '开发环境依赖',
data: devDependencies,
schema: devSchema,
column: 3,
});
const [infoRegister] = useDescription({
title: '项目信息',
data: infoData,
schema: infoSchema,
column: 2,
});
return { register, registerDev, infoRegister, name, GITHUB_URL };
},
});
</script>