From 0853e9591e8c3d0345ef01d96807238b51121b0e Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Wed, 4 Feb 2026 11:24:10 +0800
Subject: [PATCH] feat(vben5): Add system info component

---
 .../app-antd/src/api/core/useSystemInfoApi.ts |  21 ++
 apps/vben5/apps/app-antd/src/types/index.ts   |   1 +
 .../apps/app-antd/src/types/systemInfo.ts     |  21 ++
 .../app-antd/src/views/_core/about/app.vue    |  49 +++++
 .../src/components/loggings/LoggingDrawer.vue |  21 +-
 apps/vben5/packages/@abp/ui/package.json      |   1 +
 .../vben5/packages/@abp/ui/src/about/about.ts |  20 ++
 .../packages/@abp/ui/src/about/about.vue      | 193 ++++++++++++++++++
 .../vben5/packages/@abp/ui/src/about/index.ts |   1 +
 apps/vben5/packages/@abp/ui/src/index.ts      |   1 +
 10 files changed, 321 insertions(+), 8 deletions(-)
 create mode 100644 apps/vben5/apps/app-antd/src/api/core/useSystemInfoApi.ts
 create mode 100644 apps/vben5/apps/app-antd/src/types/index.ts
 create mode 100644 apps/vben5/apps/app-antd/src/types/systemInfo.ts
 create mode 100644 apps/vben5/apps/app-antd/src/views/_core/about/app.vue
 create mode 100644 apps/vben5/packages/@abp/ui/src/about/about.ts
 create mode 100644 apps/vben5/packages/@abp/ui/src/about/about.vue
 create mode 100644 apps/vben5/packages/@abp/ui/src/about/index.ts

diff --git a/apps/vben5/apps/app-antd/src/api/core/useSystemInfoApi.ts b/apps/vben5/apps/app-antd/src/api/core/useSystemInfoApi.ts
new file mode 100644
index 000000000..4477c81d7
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/api/core/useSystemInfoApi.ts
@@ -0,0 +1,21 @@
+import type { SystemInfo } from '#/types/systemInfo';
+
+import { useRequest } from '@abp/request';
+
+export function useSystemInfoApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 获取应用程序状态
+   */
+  function getSystemInfoApi(): Promise<SystemInfo> {
+    return request<SystemInfo>('/api/system-info', {
+      method: 'GET',
+    });
+  }
+
+  return {
+    cancel,
+    getSystemInfoApi,
+  };
+}
diff --git a/apps/vben5/apps/app-antd/src/types/index.ts b/apps/vben5/apps/app-antd/src/types/index.ts
new file mode 100644
index 000000000..4cc4e2b25
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/types/index.ts
@@ -0,0 +1 @@
+export * from './systemInfo';
diff --git a/apps/vben5/apps/app-antd/src/types/systemInfo.ts b/apps/vben5/apps/app-antd/src/types/systemInfo.ts
new file mode 100644
index 000000000..e69049e62
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/types/systemInfo.ts
@@ -0,0 +1,21 @@
+interface ComponentKey {
+  /** 组件名称 */
+  name: string;
+  /** 组件显示名称 */
+  displayName: string;
+}
+
+interface ComponentInfo {
+  /** 组件名称 */
+  name: string;
+  /** 组件名称集合 */
+  keys: ComponentKey[];
+  /** 组件状态集合 */
+  details: Record<string, any>;
+}
+
+interface SystemInfo {
+  components: ComponentInfo[];
+}
+
+export type { SystemInfo };
diff --git a/apps/vben5/apps/app-antd/src/views/_core/about/app.vue b/apps/vben5/apps/app-antd/src/views/_core/about/app.vue
new file mode 100644
index 000000000..9ce22f5b2
--- /dev/null
+++ b/apps/vben5/apps/app-antd/src/views/_core/about/app.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import { onMounted, ref } from 'vue';
+
+import { AbpAbout } from '@abp/ui';
+
+import { useSystemInfoApi } from '#/api/core/useSystemInfoApi';
+
+defineOptions({ name: 'AbpAbout' });
+
+interface AboutComponent {
+  content: Component | string;
+  title: string;
+}
+
+interface AboutItem {
+  items?: AboutComponent[];
+  title: string;
+}
+
+const aboutItems = ref<AboutItem[]>([]);
+const { getSystemInfoApi } = useSystemInfoApi();
+
+async function onInit() {
+  const items: AboutItem[] = [];
+  const res = await getSystemInfoApi();
+  res.components.forEach((component) => {
+    const components: AboutComponent[] = [];
+    component.keys.forEach((key) => {
+      components.push({
+        title: key.displayName,
+        content: component.details[key.name],
+      });
+    });
+    items.push({
+      title: component.name,
+      items: components,
+    });
+  });
+  aboutItems.value = items;
+}
+
+onMounted(onInit);
+</script>
+
+<template>
+  <AbpAbout :custom-items="aboutItems" />
+</template>
diff --git a/apps/vben5/packages/@abp/auditing/src/components/loggings/LoggingDrawer.vue b/apps/vben5/packages/@abp/auditing/src/components/loggings/LoggingDrawer.vue
index 577a59d4e..a61946deb 100644
--- a/apps/vben5/packages/@abp/auditing/src/components/loggings/LoggingDrawer.vue
+++ b/apps/vben5/packages/@abp/auditing/src/components/loggings/LoggingDrawer.vue
@@ -10,7 +10,7 @@ import { $t } from '@vben/locales';
 
 import { formatToDateTime } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
-import { Descriptions, Tabs, Tag, Textarea } from 'ant-design-vue';
+import { Descriptions, Skeleton, Tabs, Tag, Textarea } from 'ant-design-vue';
 
 import { useLoggingsApi } from '../../api/useLoggingsApi';
 
@@ -25,7 +25,7 @@ const TabPane = Tabs.TabPane;
 const DescriptionsItem = Descriptions.Item;
 
 const activedTab = ref('basic');
-const logModel = ref<LogDto>({} as LogDto);
+const logModel = ref<Partial<LogDto>>({});
 
 const { getApi } = useLoggingsApi();
 const [Drawer, drawerApi] = useVbenDrawer({
@@ -83,7 +83,7 @@ const exceptionsGridOptions: VxeGridProps<LogExceptionDto> = {
   proxyConfig: {
     ajax: {
       query: () => {
-        return Promise.resolve(logModel.value.exceptions);
+        return Promise.resolve(logModel.value.exceptions ?? []);
       },
     },
     response: {
@@ -108,7 +108,8 @@ async function onGet(id: string) {
 <template>
   <Drawer>
     <div style="width: 800px">
-      <Tabs v-model="activedTab">
+      <Skeleton v-if="!logModel" />
+      <Tabs v-else v-model="activedTab">
         <TabPane key="basic" :tab="$t('AbpAuditLogging.Operation')">
           <Descriptions
             :colon="false"
@@ -121,8 +122,8 @@ async function onGet(id: string) {
               {{ formatToDateTime(logModel.timeStamp) }}
             </DescriptionsItem>
             <DescriptionsItem :label="$t('AbpAuditLogging.Level')">
-              <Tag :color="logLevelOptions[logModel.level]?.color">
-                {{ logLevelOptions[logModel.level]?.label }}
+              <Tag :color="logLevelOptions[logModel!.level!]?.color">
+                {{ logLevelOptions[logModel!.level!]?.label }}
               </Tag>
             </DescriptionsItem>
             <DescriptionsItem :label="$t('AbpAuditLogging.Message')" :span="2">
@@ -130,7 +131,11 @@ async function onGet(id: string) {
             </DescriptionsItem>
           </Descriptions>
         </TabPane>
-        <TabPane key="fields" :tab="$t('AbpAuditLogging.Fields')">
+        <TabPane
+          v-if="logModel.fields"
+          key="fields"
+          :tab="$t('AbpAuditLogging.Fields')"
+        >
           <Descriptions
             :colon="false"
             :column="1"
@@ -183,7 +188,7 @@ async function onGet(id: string) {
           </Descriptions>
         </TabPane>
         <TabPane
-          v-if="logModel.exceptions?.length > 0"
+          v-if="logModel.exceptions && logModel.exceptions.length > 0"
           key="exception"
           :tab="$t('AbpAuditLogging.Exceptions')"
         >
diff --git a/apps/vben5/packages/@abp/ui/package.json b/apps/vben5/packages/@abp/ui/package.json
index 7f7bf292c..d52811df9 100644
--- a/apps/vben5/packages/@abp/ui/package.json
+++ b/apps/vben5/packages/@abp/ui/package.json
@@ -27,6 +27,7 @@
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vben/common-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/locales": "workspace:*",
diff --git a/apps/vben5/packages/@abp/ui/src/about/about.ts b/apps/vben5/packages/@abp/ui/src/about/about.ts
new file mode 100644
index 000000000..eaf8f99fe
--- /dev/null
+++ b/apps/vben5/packages/@abp/ui/src/about/about.ts
@@ -0,0 +1,20 @@
+import type { Component } from 'vue';
+
+interface AboutProps {
+  customItems?: ExtraDescriptionItem[];
+  description?: string;
+  name?: string;
+  title?: string;
+}
+
+interface ExtraDescriptionItem {
+  items?: DescriptionItem[];
+  title: string;
+}
+
+interface DescriptionItem {
+  content: Component | string;
+  title: string;
+}
+
+export type { AboutProps, DescriptionItem };
diff --git a/apps/vben5/packages/@abp/ui/src/about/about.vue b/apps/vben5/packages/@abp/ui/src/about/about.vue
new file mode 100644
index 000000000..bf50d6e0e
--- /dev/null
+++ b/apps/vben5/packages/@abp/ui/src/about/about.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import type { AboutProps, DescriptionItem } from './about';
+
+import { h } from 'vue';
+
+import {
+  VBEN_DOC_URL,
+  VBEN_GITHUB_URL,
+  VBEN_PREVIEW_URL,
+} from '@vben/constants';
+
+import { VbenRenderContent } from '@vben-core/shadcn-ui';
+
+interface Props extends AboutProps {}
+
+defineOptions({
+  name: 'AboutUI',
+});
+
+withDefaults(defineProps<Props>(), {
+  description:
+    '是一个现代化开箱即用的中后台解决方案，采用最新的技术栈，包括 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等前沿技术，代码规范严谨，提供丰富的配置选项，旨在为中大型项目的开发提供现成的开箱即用解决方案及丰富的示例，同时，它也是学习和深入前端技术的一个极佳示例。',
+  name: 'Vben Admin',
+  title: '关于项目',
+});
+
+const renderLink = (href: string, text: string) =>
+  h(
+    'a',
+    { href, target: '_blank', class: 'vben-link' },
+    { default: () => text },
+  );
+
+const {
+  authorEmail,
+  authorName,
+  authorUrl,
+  buildTime,
+  dependencies = {},
+  devDependencies = {},
+  homepage,
+  license,
+  version,
+  // vite inject-metadata 插件注入的全局变量
+} = __VBEN_ADMIN_METADATA__ || {};
+
+const vbenDescriptionItems: DescriptionItem[] = [
+  {
+    content: version,
+    title: '版本号',
+  },
+  {
+    content: license,
+    title: '开源许可协议',
+  },
+  {
+    content: buildTime,
+    title: '最后构建时间',
+  },
+  {
+    content: renderLink(homepage, '点击查看'),
+    title: '主页',
+  },
+  {
+    content: renderLink(VBEN_DOC_URL, '点击查看'),
+    title: '文档地址',
+  },
+  {
+    content: renderLink(VBEN_PREVIEW_URL, '点击查看'),
+    title: '预览地址',
+  },
+  {
+    content: renderLink(VBEN_GITHUB_URL, '点击查看'),
+    title: 'Github',
+  },
+  {
+    content: h('div', [
+      renderLink(authorUrl, `${authorName}  `),
+      renderLink(`mailto:${authorEmail}`, authorEmail),
+    ]),
+    title: '作者',
+  },
+];
+
+const dependenciesItems = Object.keys(dependencies).map((key) => ({
+  content: dependencies[key],
+  title: key,
+}));
+
+const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
+  content: devDependencies[key],
+  title: key,
+}));
+</script>
+
+<template>
+  <Page :title="title">
+    <template #description>
+      <p class="text-foreground mt-3 text-sm leading-6">
+        <a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
+          {{ name }}
+        </a>
+        {{ description }}
+      </p>
+    </template>
+    <div class="card-box p-5">
+      <div>
+        <h5 class="text-foreground text-lg">基本信息</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in vbenDescriptionItems" :key="item.title">
+            <div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm font-medium leading-6">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+
+    <template v-if="customItems">
+      <div
+        v-for="customItem in customItems"
+        :key="customItem.title"
+        class="card-box mt-6 p-5"
+      >
+        <div>
+          <h5 class="text-foreground text-lg">{{ customItem.title }}</h5>
+        </div>
+        <div class="mt-4">
+          <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            <template v-for="item in customItem.items" :key="item.title">
+              <div
+                class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0"
+              >
+                <dt class="text-foreground text-sm">
+                  {{ item.title }}
+                </dt>
+                <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                  <VbenRenderContent :content="item.content" />
+                </dd>
+              </div>
+            </template>
+          </dl>
+        </div>
+      </div>
+    </template>
+
+    <div class="card-box mt-6 p-5">
+      <div>
+        <h5 class="text-foreground text-lg">生产环境依赖</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in dependenciesItems" :key="item.title">
+            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+    <div class="card-box mt-6 p-5">
+      <div>
+        <h5 class="text-foreground text-lg">开发环境依赖</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in devDependenciesItems" :key="item.title">
+            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/vben5/packages/@abp/ui/src/about/index.ts b/apps/vben5/packages/@abp/ui/src/about/index.ts
new file mode 100644
index 000000000..2635a6b2b
--- /dev/null
+++ b/apps/vben5/packages/@abp/ui/src/about/index.ts
@@ -0,0 +1 @@
+export { default as AbpAbout } from './about.vue';
diff --git a/apps/vben5/packages/@abp/ui/src/index.ts b/apps/vben5/packages/@abp/ui/src/index.ts
index b93f10eea..2e1c34408 100644
--- a/apps/vben5/packages/@abp/ui/src/index.ts
+++ b/apps/vben5/packages/@abp/ui/src/index.ts
@@ -1,2 +1,3 @@
+export * from './about';
 export * from './adapter/vxe-table';
 export * from './components';