mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-04-24 23:47:17 +08:00
perf: 关于
This commit is contained in:
pan
parent
c36302bf50
commit
a63f991f1c
@ -32,6 +32,7 @@ menus:
|
||||
permission: Permission Manage
|
||||
permissionPage: Page Permission
|
||||
permissionButton: Button Permission
|
||||
hsAbout: About
|
||||
status:
|
||||
hsLoad: Loading...
|
||||
login:
|
||||
|
||||
@ -32,6 +32,7 @@ menus:
|
||||
permission: 权限管理
|
||||
permissionPage: 页面权限
|
||||
permissionButton: 按钮权限
|
||||
hsAbout: 关于
|
||||
status:
|
||||
hsLoad: 加载中...
|
||||
login:
|
||||
|
||||
10
src/main.ts
10
src/main.ts
@ -10,7 +10,7 @@ import { useElementPlus } from "@/plugins/elementPlus";
|
||||
import { injectResponsiveStorage } from "@/utils/responsive";
|
||||
|
||||
import Table from "@pureadmin/table";
|
||||
// import PureDescriptions from "@pureadmin/descriptions";
|
||||
import PureDescriptions from "@pureadmin/descriptions";
|
||||
|
||||
// 引入重置样式
|
||||
import "./style/reset.scss";
|
||||
@ -56,8 +56,12 @@ getPlatformConfig(app).then(async config => {
|
||||
app.use(router);
|
||||
await router.isReady();
|
||||
injectResponsiveStorage(app, config);
|
||||
app.use(MotionPlugin).use(useI18n).use(useElementPlus).use(Table);
|
||||
// .use(PureDescriptions)
|
||||
app
|
||||
.use(MotionPlugin)
|
||||
.use(useI18n)
|
||||
.use(useElementPlus)
|
||||
.use(Table)
|
||||
.use(PureDescriptions);
|
||||
// .use(useEcharts);
|
||||
app.mount("#app");
|
||||
});
|
||||
|
||||
45
src/router/enums.ts
Normal file
45
src/router/enums.ts
Normal file
@ -0,0 +1,45 @@
|
||||
// 完整版菜单比较多，将 rank 抽离出来，在此方便维护
|
||||
|
||||
const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
|
||||
components = 1,
|
||||
able = 2,
|
||||
table = 3,
|
||||
list = 4,
|
||||
result = 5,
|
||||
error = 6,
|
||||
frame = 7,
|
||||
nested = 8,
|
||||
permission = 9,
|
||||
system = 10,
|
||||
tabs = 11,
|
||||
about = 12,
|
||||
editor = 13,
|
||||
flowchart = 14,
|
||||
formdesign = 15,
|
||||
board = 16,
|
||||
ppt = 17,
|
||||
guide = 18,
|
||||
menuoverflow = 19;
|
||||
|
||||
export {
|
||||
home,
|
||||
components,
|
||||
able,
|
||||
table,
|
||||
list,
|
||||
result,
|
||||
error,
|
||||
frame,
|
||||
nested,
|
||||
permission,
|
||||
system,
|
||||
tabs,
|
||||
about,
|
||||
editor,
|
||||
flowchart,
|
||||
formdesign,
|
||||
board,
|
||||
ppt,
|
||||
guide,
|
||||
menuoverflow
|
||||
};
|
||||
22
src/router/modules/about.ts
Normal file
22
src/router/modules/about.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { about } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/about",
|
||||
redirect: "/about/index",
|
||||
meta: {
|
||||
icon: "ri:file-info-line",
|
||||
title: $t("menus.hsAbout"),
|
||||
rank: about
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/about/index",
|
||||
name: "About",
|
||||
component: () => import("@/views/about/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsAbout")
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user