mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2026-01-11 16:10:41 +08:00
perf: 关于
This commit is contained in:
pan
106
src/views/about/columns.tsx
Normal file
106
src/views/about/columns.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
export function useColumns() {
|
||||
const { pkg, lastBuildTime } = __APP_INFO__;
|
||||
const { version, engines } = pkg;
|
||||
const columns = [
|
||||
{
|
||||
label: "当前版本",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<el-tag size="large" class="!text-base">
|
||||
{version}
|
||||
</el-tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "最后编译时间",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<el-tag size="large" class="!text-base">
|
||||
{lastBuildTime}
|
||||
</el-tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "推荐 node 版本",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<el-tag size="large" class="!text-base">
|
||||
{engines.node}
|
||||
</el-tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "推荐 pnpm 版本",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<el-tag size="large" class="!text-base">
|
||||
{engines.pnpm}
|
||||
</el-tag>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "完整版代码地址",
|
||||
className: "pure-version",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<a
|
||||
href="https://github.com/pure-admin/vue-pure-admin"
|
||||
target="_blank"
|
||||
>
|
||||
<span style="color: var(--el-color-primary)">完整版代码链接</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "精简版代码地址",
|
||||
className: "pure-version",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<a
|
||||
href="https://github.com/pure-admin/pure-admin-thin"
|
||||
target="_blank"
|
||||
>
|
||||
<span style="color: var(--el-color-primary)">精简版代码链接</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "文档地址",
|
||||
className: "pure-version",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<a
|
||||
href="https://yiming_chang.gitee.io/pure-admin-doc"
|
||||
target="_blank"
|
||||
>
|
||||
<span style="color: var(--el-color-primary)">文档链接</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "预览地址",
|
||||
className: "pure-version",
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<a
|
||||
href="https://yiming_chang.gitee.io/vue-pure-admin"
|
||||
target="_blank"
|
||||
>
|
||||
<span style="color: var(--el-color-primary)">预览链接</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return {
|
||||
columns
|
||||
};
|
||||
}
|
||||
162
src/views/about/index.vue
Normal file
162
src/views/about/index.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useColumns } from "./columns";
|
||||
|
||||
export interface schemaItem {
|
||||
field: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: "About"
|
||||
});
|
||||
|
||||
const { pkg } = __APP_INFO__;
|
||||
const { dependencies, devDependencies } = pkg;
|
||||
|
||||
const schema: schemaItem[] = [];
|
||||
const devSchema: schemaItem[] = [];
|
||||
|
||||
const { columns } = useColumns();
|
||||
|
||||
const words = [
|
||||
"@pureadmin/descriptions",
|
||||
"@pureadmin/table",
|
||||
"@pureadmin/utils",
|
||||
"@vueuse/core",
|
||||
"axios",
|
||||
"dayjs",
|
||||
"echarts",
|
||||
"vue",
|
||||
"element-plus",
|
||||
"pinia",
|
||||
"vue-i18n",
|
||||
"vue-router",
|
||||
"@iconify/vue",
|
||||
"@vitejs/plugin-vue",
|
||||
"@vitejs/plugin-vue-jsx",
|
||||
"eslint",
|
||||
"prettier",
|
||||
"sass",
|
||||
"stylelint",
|
||||
"tailwindcss",
|
||||
"typescript",
|
||||
"vite",
|
||||
"vue-tsc"
|
||||
];
|
||||
|
||||
const getMainLabel = computed(
|
||||
() => (label: string) => words.find(w => w === label) && "main-label"
|
||||
);
|
||||
|
||||
Object.keys(dependencies).forEach(key => {
|
||||
schema.push({ field: dependencies[key], label: key });
|
||||
});
|
||||
|
||||
Object.keys(devDependencies).forEach(key => {
|
||||
devSchema.push({ field: devDependencies[key], label: key });
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="mb-4 box-card" shadow="never">
|
||||
<span>
|
||||
vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。完全采用
|
||||
ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的
|
||||
Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss
|
||||
等主流技术开发。
|
||||
</span>
|
||||
</el-card>
|
||||
|
||||
<el-card class="m-4 box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">平台信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<PureDescriptions border :columns="columns" :column="4" />
|
||||
</el-card>
|
||||
|
||||
<el-card class="m-4 box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">生产环境依赖</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions border size="small" :column="6">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in schema"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:label-class-name="getMainLabel(item.label)"
|
||||
class-name="pure-version"
|
||||
label-align="right"
|
||||
>
|
||||
<a
|
||||
:href="'https://www.npmjs.com/package/' + item.label"
|
||||
target="_blank"
|
||||
>
|
||||
<span
|
||||
:class="getMainLabel(item.label)"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
{{ item.field }}
|
||||
</span>
|
||||
</a>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card class="m-4 box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">开发环境依赖</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions border size="small" :column="5">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in devSchema"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:label-class-name="getMainLabel(item.label)"
|
||||
class-name="pure-version"
|
||||
label-align="right"
|
||||
>
|
||||
<a
|
||||
:href="'https://www.npmjs.com/package/' + item.label"
|
||||
target="_blank"
|
||||
>
|
||||
<span
|
||||
:class="getMainLabel(item.label)"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
{{ item.field }}
|
||||
</span>
|
||||
</a>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.main-label) {
|
||||
font-size: 16px !important;
|
||||
color: var(--el-color-danger) !important;
|
||||
}
|
||||
|
||||
:deep(.pure-version) {
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user