feat(projects): add page: about

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>