feat(projects): add page: about

src/locales/langs/en-us.ts

@@ -110,6 +110,7 @@ const local: App.I18n.Schema = {
     500: 'Server Error',
     home: 'Home',
     'user-center': 'User Center',
+    about: 'About',
     manage: 'System Manage',
     manage_user: 'User Manage',
     'manage_user-detail': 'User Detail',
@@ -166,6 +167,19 @@ const local: App.I18n.Schema = {
       bindWeChat: {
         title: 'Bind WeChat'
       }
+    },
+    about: {
+      title: 'About',
+      introduction: `Soybean Admin is an elegant and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. Soybean Admin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.`,
+      projectInfo: {
+        title: 'Project Info',
+        version: 'Version',
+        latestBuildTime: 'Latest Build Time',
+        githubLink: 'Github Link',
+        previewLink: 'Preview Link'
+      },
+      prdDep: 'Production Dependency',
+      devDep: 'Development Dependency'
     }
   },
   form: {

src/locales/langs/zh-cn.ts

@@ -110,6 +110,7 @@ const local: App.I18n.Schema = {
     500: '服务器错误',
     home: '首页',
     'user-center': '个人中心',
+    about: '关于',
     manage: '系统管理',
     manage_user: '用户管理',
     'manage_user-detail': '用户详情',
@@ -166,6 +167,19 @@ const local: App.I18n.Schema = {
       bindWeChat: {
         title: '绑定微信'
       }
+    },
+    about: {
+      title: '关于',
+      introduction: `Soybean Admin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。Soybean Admin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
+      projectInfo: {
+        title: '项目信息',
+        version: '版本',
+        latestBuildTime: '最新构建时间',
+        githubLink: 'Github 地址',
+        previewLink: '预览地址'
+      },
+      prdDep: '生产依赖',
+      devDep: '开发依赖'
     }
   },
   form: {

src/router/elegant/imports.ts

@@ -19,6 +19,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   404: () => import("@/views/_builtin/404/index.vue"),
   500: () => import("@/views/_builtin/500/index.vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
+  about: () => import("@/views/about/index.vue"),
   home: () => import("@/views/home/index.vue"),
   manage_role: () => import("@/views/manage/role/index.vue"),
   manage_route: () => import("@/views/manage/route/index.vue"),

src/router/elegant/routes.ts

@@ -36,6 +36,17 @@ export const generatedRoutes: GeneratedRoute[] = [
       constant: true
     }
   },
+  {
+    name: 'about',
+    path: '/about',
+    component: 'layout.base$view.about',
+    meta: {
+      title: 'about',
+      i18nKey: 'route.about',
+      icon: 'fluent:book-information-24-regular',
+      order: 10
+    }
+  },
   {
     name: 'home',
     path: '/home',

src/router/elegant/transform.ts

@@ -146,6 +146,7 @@ const routeMap: RouteMap = {
   "403": "/403",
   "404": "/404",
   "500": "/500",
+  "about": "/about",
   "home": "/home",
   "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
   "manage": "/manage",

src/typings/app.d.ts

@@ -356,6 +356,19 @@ declare namespace App {
             title: string;
           };
         };
+        about: {
+          title: string;
+          introduction: string;
+          projectInfo: {
+            title: string;
+            version: string;
+            latestBuildTime: string;
+            githubLink: string;
+            previewLink: string;
+          };
+          prdDep: string;
+          devDep: string;
+        };
       };
       form: {
         userName: FormMsg;

src/typings/components.d.ts

@@ -27,6 +27,8 @@ declare module 'vue' {
     NCalendar: typeof import('naive-ui')['NCalendar']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
@@ -45,6 +47,7 @@ declare module 'vue' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
     NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']

src/typings/elegant-router.d.ts

@@ -20,6 +20,7 @@ declare module "@elegant-router/types" {
     "403": "/403";
     "404": "/404";
     "500": "/500";
+    "about": "/about";
     "home": "/home";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
     "manage": "/manage";
@@ -68,6 +69,7 @@ declare module "@elegant-router/types" {
     | "403"
     | "404"
     | "500"
+    | "about"
     | "home"
     | "login"
     | "manage"
@@ -93,6 +95,7 @@ declare module "@elegant-router/types" {
     | "404"
     | "500"
     | "login"
+    | "about"
     | "home"
     | "manage_role"
     | "manage_route"

src/views/about/index.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import pkg from '~/package.json';
+
+interface PkgJson {
+  name: string;
+  version: string;
+  dependencies: PkgVersionInfo[];
+  devDependencies: PkgVersionInfo[];
+}
+
+interface PkgVersionInfo {
+  name: string;
+  version: string;
+}
+
+const { name, version, dependencies, devDependencies } = pkg;
+
+function transformVersionData(tuple: [string, string]): PkgVersionInfo {
+  const [$name, $version] = tuple;
+  return {
+    name: $name,
+    version: $version
+  };
+}
+
+const pkgJson: PkgJson = {
+  name,
+  version,
+  dependencies: Object.entries(dependencies).map(item => transformVersionData(item)),
+  devDependencies: Object.entries(devDependencies).map(item => transformVersionData(item))
+};
+
+const latestBuildTime = BUILD_TIME;
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <NCard :title="$t('page.about.title')" :bordered="false" size="large" class="card-wrapper">
+      <p>{{ $t('page.about.introduction') }}</p>
+    </NCard>
+    <NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="large" class="card-wrapper">
+      <NDescriptions label-placement="left" bordered size="small" :column="2">
+        <NDescriptionsItem :label="$t('page.about.projectInfo.version')">
+          <NTag type="primary">{{ pkgJson.version }}</NTag>
+        </NDescriptionsItem>
+        <NDescriptionsItem :label="$t('page.about.projectInfo.latestBuildTime')">
+          <NTag type="primary">{{ latestBuildTime }}</NTag>
+        </NDescriptionsItem>
+        <NDescriptionsItem :label="$t('page.about.projectInfo.githubLink')">
+          <a class="text-primary" :href="pkg.homepage" target="_blank" rel="noopener noreferrer">
+            {{ $t('page.about.projectInfo.githubLink') }}
+          </a>
+        </NDescriptionsItem>
+        <NDescriptionsItem :label="$t('page.about.projectInfo.previewLink')">
+          <a class="text-primary" :href="pkg.website" target="_blank" rel="noopener noreferrer">
+            {{ $t('page.about.projectInfo.previewLink') }}
+          </a>
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NCard>
+    <NCard :title="$t('page.about.prdDep')" :bordered="false" size="large" class="card-wrapper">
+      <NDescriptions label-placement="left" bordered size="small">
+        <NDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
+          {{ item.version }}
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NCard>
+    <NCard :title="$t('page.about.devDep')" :bordered="false" size="large" class="card-wrapper">
+      <NDescriptions label-placement="left" bordered size="small">
+        <NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
+          {{ item.version }}
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NCard>
+  </NSpace>
+</template>
+
+<style scoped></style>