feat: add about page

internal/vite-config/src/config/application.ts

@@ -24,6 +24,7 @@ function defineApplicationConfig(options: DefineApplicationOptions = {}) {
       html: true,
       i18n: true,
       injectAppLoading: true,
+      injectMetadata: true,
       isBuild,
       license: true,
       mock: true,

internal/vite-config/src/config/library.ts

@@ -19,6 +19,7 @@ function defineLibraryConfig(options: DefineLibraryOptions = {}) {
     const plugins = await getLibraryConditionPlugins({
       dts: false,
       injectLibCss: true,
+      injectMetadata: true,
       isBuild,
       mode,
       ...(typeof library === 'function' ? library(config) : library),

internal/vite-config/src/plugins/index.ts

@@ -27,6 +27,7 @@ import viteVueDevTools from 'vite-plugin-vue-devtools';
 import { viteExtraAppConfigPlugin } from './extra-app-config';
 import { viteImportMapPlugin } from './importmap';
 import { viteInjectAppLoadingPlugin } from './inject-app-loading';
+import { viteMetadataPlugin } from './inject-metadata';
 import { viteLicensePlugin } from './license';
 
 /**
@@ -52,7 +53,7 @@ async function getConditionEstablishedPlugins(
 async function getCommonConditionPlugins(
   options: CommonPluginOptions,
 ): Promise<ConditionPlugin[]> {
-  const { devtools, isBuild, visualizer } = options;
+  const { devtools, injectMetadata, isBuild, visualizer } = options;
   return [
     {
       condition: true,
@@ -66,10 +67,15 @@ async function getCommonConditionPlugins(
         viteVueJsx(),
       ],
     },
+
     {
       condition: !isBuild && devtools,
       plugins: () => [viteVueDevTools()],
     },
+    {
+      condition: injectMetadata,
+      plugins: async () => [await viteMetadataPlugin()],
+    },
     {
       condition: isBuild && !!visualizer,
       plugins: () => [<PluginOption>viteVisualizerPlugin({

internal/vite-config/src/plugins/inject-metadata.ts

@@ -0,0 +1,87 @@
+import type { PluginOption } from 'vite';
+
+import { dateUtil, getPackages, readPackageJSON } from '@vben/node-utils';
+
+function resolvePackageVersion(
+  pkgsMeta: Record<string, string>,
+  name: string,
+  value: string,
+) {
+  if (value.includes('workspace')) {
+    return pkgsMeta[name];
+  }
+  return value;
+}
+
+async function resolveMonorepoDependencies() {
+  const { packages } = await getPackages();
+  const resultDevDependencies: Record<string, string> = {};
+  const resultDependencies: Record<string, string> = {};
+  const pkgsMeta: Record<string, string> = {};
+
+  for (const { packageJson } of packages) {
+    pkgsMeta[packageJson.name] = packageJson.version;
+  }
+
+  for (const { packageJson } of packages) {
+    const { dependencies = {}, devDependencies = {} } = packageJson;
+    for (const [key, value] of Object.entries(dependencies)) {
+      resultDependencies[key] = resolvePackageVersion(pkgsMeta, key, value);
+    }
+    for (const [key, value] of Object.entries(devDependencies)) {
+      resultDevDependencies[key] = resolvePackageVersion(pkgsMeta, key, value);
+    }
+  }
+  return {
+    dependencies: resultDependencies,
+    devDependencies: resultDevDependencies,
+  };
+}
+
+/**
+ * 用于注入项目信息
+ */
+async function viteMetadataPlugin(
+  root = process.cwd(),
+): Promise<PluginOption | undefined> {
+  const { author, description, homepage, license, repository, version } =
+    await readPackageJSON(root);
+
+  const buildTime = dateUtil().format('YYYY-MM-DD HH:mm:ss');
+
+  return {
+    async config() {
+      const { dependencies, devDependencies } =
+        await resolveMonorepoDependencies();
+      const repositoryUrl =
+        typeof repository === 'object' ? repository.url : repository;
+
+      const isAuthorObject = typeof author === 'object';
+      const authorName = isAuthorObject ? author.name : author;
+      const authorEmail = isAuthorObject ? author.email : null;
+      const authorUrl = isAuthorObject ? author.url : null;
+
+      return {
+        define: {
+          __VBEN_ADMIN_METADATA__: JSON.stringify({
+            authorEmail,
+            authorName,
+            authorUrl,
+            buildTime,
+            dependencies,
+            description,
+            devDependencies,
+            homepage,
+            license,
+            repositoryUrl,
+            version,
+          }),
+        },
+      };
+    },
+    enforce: 'post',
+    name: 'vite:inject-metadata',
+  };
+}
+
+export { viteMetadataPlugin };

internal/vite-config/src/plugins/license.ts

@@ -10,7 +10,7 @@ import { EOL } from 'node:os';
 import { dateUtil, readPackageJSON } from '@vben/node-utils';
 
 /**
- * 用于将配置文件抽离出来并注入到项目中
+ * 用于注入版权信息
  * @returns
  */
 
@@ -28,8 +28,7 @@ async function viteLicensePlugin(
     enforce: 'post',
     generateBundle: {
       handler: (_options: NormalizedOutputOptions, bundle: OutputBundle) => {
-        const date = dateUtil.format('YYYY-MM-DD ');
-
+        const date = dateUtil().format('YYYY-MM-DD ');
         const copyrightText = `/*!
   * Vben Admin Pro
   * Version: ${version}

internal/vite-config/src/typing.ts

@@ -42,6 +42,8 @@ interface CommonPluginOptions {
   devtools?: boolean;
   /** 环境变量 */
   env?: Record<string, any>;
+  /** 是否开启注入metadata */
+  injectMetadata: boolean;
   /** 是否构建模式 */
   isBuild?: boolean;
   /** 构建模式 */