perf: 关于

locales/en.yaml

@@ -32,6 +32,7 @@ menus:
   permission: Permission Manage
   permissionPage: Page Permission
   permissionButton: Button Permission
+  hsAbout: About
 status:
   hsLoad: Loading...
 login:

locales/zh-CN.yaml

@@ -32,6 +32,7 @@ menus:
   permission: 权限管理
   permissionPage: 页面权限
   permissionButton: 按钮权限
+  hsAbout: 关于
 status:
   hsLoad: 加载中...
 login:

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);
+  app
-  // .use(PureDescriptions)
+    .use(MotionPlugin)
+    .use(useI18n)
+    .use(useElementPlus)
+    .use(Table)
+    .use(PureDescriptions);
   // .use(useEcharts);
   app.mount("#app");
 });

src/router/enums.ts

@@ -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
+};

src/router/modules/about.ts

@@ -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;

src/views/about/columns.tsx

@@ -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
+  };
+}

src/views/about/index.vue

@@ -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>