about.vue
4.95 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<script setup lang="ts">
import type { AboutProps, DescriptionItem } from './about';
import { h } from 'vue';
import {
VBEN_DOC_URL,
VBEN_GITHUB_URL,
VBEN_PREVIEW_URL,
} from '@vben/constants';
import { VbenRenderContent } from '@vben-core/shadcn-ui';
import { Page } from '../../components';
interface Props extends AboutProps {}
defineOptions({
name: 'AboutUI',
});
withDefaults(defineProps<Props>(), {
description:
'是一个现代化开箱即用的中后台解决方案，采用最新的技术栈，包括 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等前沿技术，代码规范严谨，提供丰富的配置选项，旨在为中大型项目的开发提供现成的开箱即用解决方案及丰富的示例，同时，它也是学习和深入前端技术的一个极佳示例。',
name: 'Vben Admin',
title: '关于项目',
});
declare global {
const __VBEN_ADMIN_METADATA__: {
authorEmail: string;
authorName: string;
authorUrl: string;
buildTime: string;
dependencies: Record<string, string>;
description: string;
devDependencies: Record<string, string>;
homepage: string;
license: string;
repositoryUrl: string;
version: string;
};
}
const renderLink = (href: string, text: string) =>
h(
'a',
{ href, target: '_blank', class: 'vben-link' },
{ default: () => text },
);
const {
authorEmail,
authorName,
authorUrl,
buildTime,
dependencies = {},
devDependencies = {},
homepage,
license,
version,
// vite inject-metadata 插件注入的全局变量
} = __VBEN_ADMIN_METADATA__ || {};
const vbenDescriptionItems: DescriptionItem[] = [
{
content: version,
title: '版本号',
},
{
content: license,
title: '开源许可协议',
},
{
content: buildTime,
title: '最后构建时间',
},
{
content: renderLink(homepage, '点击查看'),
title: '主页',
},
{
content: renderLink(VBEN_DOC_URL, '点击查看'),
title: '文档地址',
},
{
content: renderLink(VBEN_PREVIEW_URL, '点击查看'),
title: '预览地址',
},
{
content: renderLink(VBEN_GITHUB_URL, '点击查看'),
title: 'Github',
},
{
content: h('div', [
renderLink(authorUrl, `${authorName} `),
renderLink(`mailto:${authorEmail}`, authorEmail),
]),
title: '作者',
},
];
const dependenciesItems = Object.keys(dependencies).map((key) => ({
content: dependencies[key],
title: key,
}));
const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
content: devDependencies[key],
title: key,
}));
</script>
<template>
<Page :title="title">
<template #description>
<p class="text-foreground mt-3 text-sm leading-6">
<a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
{{ name }}
</a>
{{ description }}
</p>
</template>
<div class="card-box p-5">
<div>
<h5 class="text-foreground text-lg">基本信息</h5>
</div>
<div class="mt-4">
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<template v-for="item in vbenDescriptionItems" :key="item.title">
<div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
<dt class="text-foreground text-sm font-medium leading-6">
{{ item.title }}
</dt>
<dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
<VbenRenderContent :content="item.content" />
</dd>
</div>
</template>
</dl>
</div>
</div>
<div class="card-box mt-6 p-5">
<div>
<h5 class="text-foreground text-lg">生产环境依赖</h5>
</div>
<div class="mt-4">
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<template v-for="item in dependenciesItems" :key="item.title">
<div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
<dt class="text-foreground text-sm">
{{ item.title }}
</dt>
<dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
<VbenRenderContent :content="item.content" />
</dd>
</div>
</template>
</dl>
</div>
</div>
<div class="card-box mt-6 p-5">
<div>
<h5 class="text-foreground text-lg">开发环境依赖</h5>
</div>
<div class="mt-4">
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<template v-for="item in devDependenciesItems" :key="item.title">
<div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
<dt class="text-foreground text-sm">
{{ item.title }}
</dt>
<dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
<VbenRenderContent :content="item.content" />
</dd>
</div>
</template>
</dl>
</div>
</div>
</Page>
</template>