refactor: 重构关于页面，整体更紧致，关键信息更突出

build/utils.ts

@@ -3,7 +3,13 @@ import { readdir, stat } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 import { sum, formatBytes } from "@pureadmin/utils";
-import { dependencies, devDependencies, name, version } from "../package.json";
+import {
+  name,
+  version,
+  engines,
+  dependencies,
+  devDependencies
+} from "../package.json";
 
 /** 启动`node`进程时所在工作目录的绝对路径 */
 const root: string = process.cwd();
@@ -35,9 +41,9 @@ const alias: Record<string, string> = {
   "@build": pathResolve()
 };
 
-/** 平台的名称、版本、依赖、最后构建时间 */
+/** 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示 */
 const __APP_INFO__ = {
-  pkg: { name, version, dependencies, devDependencies },
+  pkg: { name, version, engines, dependencies, devDependencies },
   lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
 };
 

src/components/ReIcon/src/offlineIcon.ts

@@ -27,6 +27,7 @@ import Lollipop from "@iconify-icons/ep/lollipop";
 import Monitor from "@iconify-icons/ep/monitor";
 import Tag from "@iconify-icons/ri/bookmark-2-line";
 import Table from "@iconify-icons/ri/table-line";
+import Info from "@iconify-icons/ri/file-info-line";
 addIcon("ubuntuFill", UbuntuFill);
 addIcon("menu", Menu);
 addIcon("edit", Edit);
@@ -49,3 +50,4 @@ addIcon("lollipop", Lollipop);
 addIcon("monitor", Monitor);
 addIcon("tag", Tag);
 addIcon("table", Table);
+addIcon("info", Info);

src/router/enums.ts

@@ -12,12 +12,12 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
   permission = 9,
   system = 10,
   tabs = 11,
-  formdesign = 12,
-  flowchart = 13,
-  ppt = 14,
-  editor = 15,
-  guide = 16,
-  about = 17,
+  about = 12,
+  formdesign = 13,
+  flowchart = 14,
+  ppt = 15,
+  editor = 16,
+  guide = 17,
   menuoverflow = 18;
 
 export {
@@ -33,11 +33,11 @@ export {
   permission,
   system,
   tabs,
+  about,
   formdesign,
   flowchart,
   ppt,
   editor,
   guide,
-  about,
   menuoverflow
 };

src/router/modules/about.ts

@@ -5,6 +5,7 @@ export default {
   path: "/about",
   redirect: "/about/index",
   meta: {
+    icon: "info",
     title: $t("menus.hsAbout"),
     rank: about
   },

src/router/modules/formdesign.ts

@@ -18,7 +18,7 @@ export default {
       meta: {
         title: $t("menus.hsFormDesign"),
         frameSrc:
-          "https://haixin-fang.github.io/starfish-vue3-lowcode/playground/index.html#/"
+          "https://haixin-fang.github.io/vue-form-design/playground/index.html"
       }
     }
   ]

src/views/about/columns.tsx

@@ -1,67 +1,99 @@
 export function useColumns() {
   const { pkg, lastBuildTime } = __APP_INFO__;
-  const { version } = pkg;
+  const { version, engines } = pkg;
   const columns = [
     {
-      label: "版本",
+      label: "当前版本",
       cellRenderer: () => {
-        return <el-tag size="small">{version}</el-tag>;
+        return (
+          <el-tag size="large" class="!text-base">
+            {version}
+          </el-tag>
+        );
       }
     },
     {
       label: "最后编译时间",
       cellRenderer: () => {
-        return <el-tag size="small">{lastBuildTime}</el-tag>;
+        return (
+          <el-tag size="large" class="!text-base">
+            {lastBuildTime}
+          </el-tag>
+        );
       }
     },
     {
-      label: "文档地址",
+      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://yiming_chang.gitee.io/pure-admin-doc"
+            href="https://github.com/pure-admin/vue-pure-admin"
             target="_blank"
           >
-            <span style="color: var(--el-color-primary)">文档地址</span>
+            <span style="color: var(--el-color-primary)">完整版代码链接</span>
           </a>
         );
       }
     },
     {
-      label: "预览地址",
+      label: "精简版代码地址",
+      className: "pure-version",
       cellRenderer: () => {
         return (
           <a
-            href="https://yiming_chang.gitee.io/vue-pure-admin"
+            href="https://github.com/pure-admin/pure-admin-thin"
             target="_blank"
           >
-            <span style="color: var(--el-color-primary)">预览地址</span>
+            <span style="color: var(--el-color-primary)">精简版代码链接</span>
           </a>
         );
       }
     },
     {
-      label: "Github",
+      label: "文档地址",
+      className: "pure-version",
       cellRenderer: () => {
         return (
           <a
-            href="https://github.com/pure-admin/vue-pure-admin"
+            href="https://yiming_chang.gitee.io/pure-admin-doc"
             target="_blank"
           >
-            <span style="color: var(--el-color-primary)">Github</span>
+            <span style="color: var(--el-color-primary)">文档链接</span>
           </a>
         );
       }
     },
     {
-      label: "精简版",
+      label: "预览地址",
+      className: "pure-version",
       cellRenderer: () => {
         return (
           <a
-            href="https://github.com/pure-admin/pure-admin-thin"
+            href="https://yiming_chang.gitee.io/vue-pure-admin"
             target="_blank"
           >
-            <span style="color: var(--el-color-primary)">精简版</span>
+            <span style="color: var(--el-color-primary)">预览链接</span>
           </a>
         );
       }

src/views/about/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { useColumns } from "./columns";
+
 export interface schemaItem {
   field: string;
   label: string;
@@ -17,6 +19,36 @@ 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 });
 });
@@ -29,24 +61,21 @@ Object.keys(devDependencies).forEach(key => {
 <template>
   <div>
     <el-card class="mb-4 box-card" shadow="never">
-      <template #header>
-        <div class="card-header">
-          <span class="font-medium">关于</span>
-        </div>
-      </template>
-      <span style="font-size: 15px">
-        Pure-Admin 是一个基于Vue3、Vite、TypeScript、Element-Plus
-        的中后台解决方案，它可以帮助您快速搭建企业级中后台，提供现成的开箱解决方案及丰富的示例。原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
+      <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>
+          <span class="font-medium">平台信息</span>
         </div>
       </template>
-      <PureDescriptions :columns="columns" border :column="3" align="left" />
+      <PureDescriptions border :columns="columns" :column="4" />
     </el-card>
 
     <el-card class="m-4 box-card" shadow="never">
@@ -55,19 +84,24 @@ Object.keys(devDependencies).forEach(key => {
           <span class="font-medium">生产环境依赖</span>
         </div>
       </template>
-      <el-descriptions border>
+      <el-descriptions border size="small" :column="6">
         <el-descriptions-item
           v-for="(item, index) in schema"
           :key="index"
           :label="item.label"
-          label-align="left"
-          align="left"
+          :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 style="color: var(--el-color-primary)">{{ item.field }}</span>
+            <span
+              :class="getMainLabel(item.label)"
+              style="color: var(--el-color-primary)"
+              >{{ item.field }}</span
+            >
           </a>
         </el-descriptions-item>
       </el-descriptions>
@@ -79,19 +113,24 @@ Object.keys(devDependencies).forEach(key => {
           <span class="font-medium">开发环境依赖</span>
         </div>
       </template>
-      <el-descriptions border>
+      <el-descriptions border size="small" :column="5">
         <el-descriptions-item
           v-for="(item, index) in devSchema"
           :key="index"
           :label="item.label"
-          label-align="left"
-          align="left"
+          :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 style="color: var(--el-color-primary)">{{ item.field }}</span>
+            <span
+              :class="getMainLabel(item.label)"
+              style="color: var(--el-color-primary)"
+              >{{ item.field }}</span
+            >
           </a>
         </el-descriptions-item>
       </el-descriptions>
@@ -100,6 +139,21 @@ Object.keys(devDependencies).forEach(key => {
 </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;
 }

src/views/flow-chart/index.vue

@@ -5,14 +5,11 @@ import "@logicflow/extension/lib/style/index.css";
 
 import LogicFlow from "@logicflow/core";
 import { ref, unref, onMounted } from "vue";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { BpmnNode } from "@/components/ReFlowChart/src/config";
 import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
 import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
 import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
 
-import SetUp from "@iconify-icons/ep/set-up";
-
 defineOptions({
   name: "FlowChart"
 });
@@ -71,9 +68,8 @@ onMounted(() => {
         <span class="font-medium">
           流程图组件，采用开源的
           <el-link
-            href="http://logic-flow.org/"
+            href="https://site.logic-flow.cn/docs/#/zh/guide/start"
             target="_blank"
-            :icon="useRenderIcon(SetUp)"
             style="margin: 0 4px 5px; font-size: 16px"
           >
             LogicFlow

types/global.d.ts

@@ -6,12 +6,16 @@ import type { TableColumns } from "@pureadmin/table";
  */
 declare global {
   /**
-   * 平台的名称、版本、依赖、最后构建时间的类型提示
+   * 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示
    */
   const __APP_INFO__: {
     pkg: {
       name: string;
       version: string;
+      engines: {
+        node: string;
+        pnpm: string;
+      };
       dependencies: Recordable<string>;
       devDependencies: Recordable<string>;
     };