“关于”页面VUE3代码分析

一、代码整体逻辑

代码是一个基于 Vue 3 和 TypeScript 的组件，使用了 Naive UI 组件库。它的主要功能是展示项目信息，包括项目版本、构建时间、GitHub 链接、预览链接以及项目的依赖项（包括生产依赖和开发依赖）。代码分为逻辑部分（<script setup>）、模板部分（<template>）和样式部分（<style>）。

代码实现了一个关于页面，展示了项目的基本信息、依赖项等。它使用了 Vue 3 的组合式 API 和 TypeScript，结合 Naive UI 组件库，实现了响应式布局和国际化支持。代码结构清晰，功能完整，适合在现代前端项目中使用。

二、逐行解读

逻辑部分（<script setup>）

<script setup lang="ts">

• 使用 Vue 3 的 <script setup> 语法，这是一种更简洁的组合式 API 语法，适用于单文件组件。

• lang="ts" 表示使用 TypeScript 编写。

import { computed } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import pkg from '~/package.json';

• 导入 Vue 的 computed 函数，用于创建计算属性。

• 导入 $t 函数，用于国际化（i18n）翻译。

• 导入 useAppStore，这是一个 Vuex 或 Pinia 的 store，用于管理应用状态。

• 导入 pkg，这是项目的 package.json 文件，包含项目元数据。

const appStore = useAppStore();

• 调用 useAppStore 获取应用状态。

const column = computed(() => (appStore.isMobile ? 1 : 2));

• 创建一个计算属性 column，根据应用状态中的 isMobile 属性决定描述列表（NDescriptions）的列数。如果是移动设备，则使用 1 列，否则使用 2 列。

interface PkgJson {
  name: string;
  version: string;
  dependencies: PkgVersionInfo[];
  devDependencies: PkgVersionInfo[];
}

interface PkgVersionInfo {
  name: string;
  version: string;
}

• 定义两个接口 PkgJson 和 PkgVersionInfo，用于描述 package.json 文件的结构和依赖项的结构。

const { name, version, dependencies, devDependencies } = pkg;

• 从 pkg 中解构出 name、version、dependencies 和 devDependencies。

function transformVersionData(tuple: [string, string]): PkgVersionInfo {
  const [$name, $version] = tuple;
  return {
    name: $name,
    version: $version
  };
}

• 定义一个函数 transformVersionData，用于将依赖项的键值对转换为 PkgVersionInfo 对象。

const pkgJson: PkgJson = {
  name,
  version,
  dependencies: Object.entries(dependencies).map(item => transformVersionData(item)),
  devDependencies: Object.entries(devDependencies).map(item => transformVersionData(item))
};

• 创建一个 pkgJson 对象，符合 PkgJson 接口的结构。将 dependencies 和 devDependencies 转换为数组形式。

const latestBuildTime = BUILD_TIME;

• 定义 latestBuildTime 变量，用于存储项目的最新构建时间。BUILD_TIME 可能是一个环境变量或在构建过程中注入的值。

模板部分（<template>）

模板的大量数据，是从web/src/locales/langs/zh-cn.ts中来的：

<template>
  <NSpace vertical :size="16">

• 使用 Naive UI 的 NSpace 组件，设置为垂直布局，间距为 16px。

    <NCard :title="$t('page.about.title')" :bordered="false" size="small" segmented class="card-wrapper">
      <p>{{ $t('page.about.introduction') }}</p>
    </NCard>

• 使用 NCard 组件创建一个卡片，标题为国际化翻译后的“关于”页面标题。

• 卡片内容是一个段落，显示国际化翻译后的介绍文本。

    <NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" segmented class="card-wrapper">
      <NDescriptions label-placement="left" bordered size="small" :column="column">

• 创建另一个卡片，标题为国际化翻译后的“项目信息”标题。

• 在卡片中使用 NDescriptions 组件创建一个描述列表，标签位置为左侧，有边框，大小为小，列数由 column 计算属性决定。

        <NDescriptionsItem :label="$t('page.about.projectInfo.version')">
          <NTag type="primary">{{ pkgJson.version }}</NTag>
        </NDescriptionsItem>

• 使用 NDescriptionsItem 组件创建一个描述项，标签为国际化翻译后的“版本”。

• 内容是一个 NTag 标签，类型为“主要”，显示项目的版本号。

• NDescriptionsItem 是 Naive UI 框架中的一个组件，用于在描述列表（NDescriptions）中定义每个列表项。它通常与 NDescriptions 组件配合使用，用于展示一组键值对的数据，比如用户信息、项目详情等。
  以下是 NDescriptionsItem 的一些主要用途和属性：
  展示键值对数据：NDescriptionsItem 用于展示描述列表中的每个数据项，通常以键值对的形式展示。
  自定义标签和内容：可以自定义每个列表项的标签和内容，使数据展示更加灵活。

        <NDescriptionsItem :label="$t('page.about.projectInfo.latestBuildTime')">
          <NTag type="primary">{{ latestBuildTime }}</NTag>
        </NDescriptionsItem>

• 创建另一个描述项，标签为国际化翻译后的“最新构建时间”。

• 内容是一个 NTag 标签，显示项目的最新构建时间。

        <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>

• 创建一个描述项，标签为国际化翻译后的“GitHub 链接”。

• 内容是一个链接，指向项目的 GitHub 页面，使用 pkg.homepage 作为链接地址。

        <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>

• 创建一个描述项，标签为国际化翻译后的“预览链接”。

• 内容是一个链接，指向项目的预览页面，使用 pkg.website 作为链接地址。

      </NDescriptions>
    </NCard>

• 关闭描述列表和卡片。

    <NCard :title="$t('page.about.prdDep')" :bordered="false" size="small" segmented class="card-wrapper">
      <NDescriptions label-placement="left" bordered size="small" :column="column">

• 创建一个卡片，标题为国际化翻译后的“生产依赖”。

• 在卡片中使用描述列表组件。

        <NDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
          {{ item.version }}
        </NDescriptionsItem>

• 使用 v-for 循环渲染生产依赖项。

• 每个依赖项作为一个描述项，标签为依赖项的名称，内容为依赖项的版本号。

      </NDescriptions>
    </NCard>

• 关闭描述列表和卡片。

    <NCard :title="$t('page.about.devDep')" :bordered="false" size="small" segmented class="card-wrapper">
      <NDescriptions label-placement="left" bordered size="small" :column="column">

• 创建一个卡片，标题为国际化翻译后的“开发依赖”。

• 在卡片中使用描述列表组件。

        <NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
          {{ item.version }}
        </NDescriptionsItem>

• 使用 v-for 循环渲染开发依赖项。

• 每个依赖项作为一个描述项，标签为依赖项的名称，内容为依赖项的版本号。

      </NDescriptions>
    </NCard>

• 关闭描述列表和卡片。

  </NSpace>
</template>

• 关闭 NSpace 组件。

样式部分（<style>）

<style scoped></style>

• 定义一个空的样式部分，scoped 表示这些样式仅适用于当前组件。