feat(projects): 分析页更新，添加关于页面

src/views/about/components/DevDependency/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <shadow-card class="p-18px !rounded-4px">
+    <h3 class="pb-18px text-16px font-semibold">开发环境依赖</h3>
+    <n-descriptions label-placement="left" bordered size="small">
+      <n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
+        {{ item.version }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </shadow-card>
+</template>
+
+<script setup lang="ts">
+import { NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { packageVersion } from '@/utils';
+
+const dependencies = packageVersion.devDependencies;
+</script>
+<style scoped></style>

src/views/about/components/ProDependency/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <shadow-card class="p-18px !rounded-4px">
+    <h3 class="pb-18px text-16px font-semibold">生产环境依赖</h3>
+    <n-descriptions label-placement="left" bordered size="small">
+      <n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
+        {{ item.version }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </shadow-card>
+</template>
+
+<script setup lang="ts">
+import { NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { packageVersion } from '@/utils';
+
+const { dependencies } = packageVersion;
+</script>
+<style scoped></style>

src/views/about/components/ProjectInfo/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <shadow-card class="p-18px !rounded-4px">
+    <h3 class="pb-18px text-16px font-semibold">项目信息</h3>
+    <n-descriptions label-placement="left" bordered size="small" :column="2">
+      <n-descriptions-item label="版本">
+        <n-tag type="primary">1.0.0</n-tag>
+      </n-descriptions-item>
+      <n-descriptions-item label="最后编译时间">
+        <n-tag type="primary">2021-11-04</n-tag>
+      </n-descriptions-item>
+      <n-descriptions-item label="Github地址">
+        <a class="g_text-primary" href="https://github.com/honghuangdc/soybean-admin" target="_blank">Github地址</a>
+      </n-descriptions-item>
+      <n-descriptions-item label="预览地址">
+        <a class="g_text-primary" href="https://soybean.pro" target="_blank">预览地址</a>
+      </n-descriptions-item>
+    </n-descriptions>
+  </shadow-card>
+</template>
+
+<script setup lang="ts">
+import { NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
+</script>
+<style scoped></style>

src/views/about/components/ProjectIntroduction/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <shadow-card class="h-120px p-18px !rounded-4px">
+    <h3 class="h-36px leading-36px text-26px font-bold">关于</h3>
+    <p class="leading-24px">
+      Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript
+      的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。
+    </p>
+  </shadow-card>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/views/about/components/index.ts

@@ -0,0 +1,6 @@
+import ProjectIntroduction from './ProjectIntroduction/index.vue';
+import ProjectInfo from './ProjectInfo/index.vue';
+import ProDependency from './ProDependency/index.vue';
+import DevDependency from './DevDependency/index.vue';
+
+export { ProjectIntroduction, ProjectInfo, ProDependency, DevDependency };

src/views/about/index.vue

@@ -1,6 +1,14 @@
 <template>
-  <div>关于</div>
+  <n-space :vertical="true" :size="16">
+    <project-introduction />
+    <project-info />
+    <pro-dependency />
+    <dev-dependency />
+  </n-space>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { NSpace } from 'naive-ui';
+import { ProjectIntroduction, ProjectInfo, ProDependency, DevDependency } from './components';
+</script>
 <style scoped></style>