refactor: migrate demo applications to playground (#4116)

* chore: detail adjustment * refactor: Migrate demo applications to playground * perf: logic optimization * chore: update docs * chore: update docs
2024-08-11 16:09:32 +08:00
parent 654bf90c0d
commit b464b87ac5
138 changed files with 3197 additions and 682 deletions
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -162,7 +162,11 @@ function nav(): DefaultTheme.NavItem[] {
          items: [
            {
              link: 'https://www.vben.pro',
-              text: 'Ant Design Vue 版本(默认)',
+              text: '演示版本',
+            },
+            {
+              link: 'https://ant.vben.pro',
+              text: 'Ant Design Vue 版本',
            },
            {
              link: 'https://naive.vben.pro',
@@ -250,6 +254,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
          text: '为什么选择我们?',
        },
        { link: 'introduction/quick-start', text: '快速开始' },
+        { link: 'introduction/thin', text: '精简版本' },
      ],
    },
    {
@@ -284,6 +289,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
      items: [
        { link: 'project/standard', text: '规范' },
        { link: 'project/cli', text: 'CLI' },
+        { link: 'project/dir', text: '目录说明' },
        { link: 'project/test', text: '单元测试' },
        { link: 'project/tailwindcss', text: 'Tailwind CSS' },
        { link: 'project/changeset', text: 'Changeset' },
--- a/docs/.vitepress/theme/components/vben-contributors.vue
+++ b/docs/.vitepress/theme/components/vben-contributors.vue
@@ -4,7 +4,10 @@
  <div class="vp-doc vben-contributors">
    <p>Contributors</p>
    <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-      <img src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
+      <img
+        alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false"
+      />
    </a>
  </div>
 </template>
--- a/docs/src/guide/essentials/development.md
+++ b/docs/src/guide/essentials/development.md
@@ -78,6 +78,8 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
    "dev:docs": "pnpm -F @vben/docs run dev",
    // 启动web-ele应用
    "dev:ele": "pnpm -F @vben/web-ele run dev",
+    // 启动演示应用
+    "dev:play": "pnpm -F @vben/playground run dev",
    // 启动web-naive应用
    "dev:naive": "pnpm -F @vben/web-naive run dev",
    // 格式化代码
--- a/docs/src/guide/essentials/server.md
+++ b/docs/src/guide/essentials/server.md
@@ -221,7 +221,7 @@ function createRequestClient(baseURL: string) {
    if (status >= 200 && status < 400 && code === 0) {
      return data;
    }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
  });
  return client;
 }
--- a/docs/src/guide/in-depth/locale.md
+++ b/docs/src/guide/in-depth/locale.md
@@ -198,7 +198,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
      locale = await import('dayjs/locale/en');
    }
  }
-  dayjs.locale(locale);
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
 }
 ```

--- a/docs/src/guide/introduction/quick-start.md
+++ b/docs/src/guide/introduction/quick-start.md
@@ -72,11 +72,24 @@ pnpm install

 ### 运行项目

-执行以下命令即可运行项目:
+执行以下命运行项目:

 ```bash
 # 启动项目
 pnpm dev
 ```

+此时，你会看到类似如下的输出，选择你需要运行的项目：
+
+```bash
+│
+◆  Select the app you need to run [dev]:
+│  ● @vben/web-antd
+│  ○ @vben/web-ele
+│  ○ @vben/web-naive
+│  ○ @vben/docs
+│  ○ @vben/playground
+└
+```
+
 现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。
--- a/docs/src/guide/introduction/thin.md
+++ b/docs/src/guide/introduction/thin.md
@@ -0,0 +1,62 @@
+# 精简版本
+
+从 `5.0` 版本开始，我们不再提供精简的仓库或者分支。我们的目标是提供一个更加一致的开发体验，同时减少维护成本。在这里，我们将如何介绍自己的项目，如何去精简以及移除不需要的功能。
+
+## 应用精简
+
+首先，确认你需要的 `UI` 组件库版本，然后删除对应的应用，比如你选择使用 `Ant Design Vue`，那么你可以删除其他应用， 只需要删除下面两个文件夹即可：
+
+```bash
+apps/web-ele
+apps/web-native
+
+```
+
+::: tip
+
+如果项目没有内置你需要的 `UI` 组件库应用，你可以直接全部删除其他应用。然后自行新建应用即可。
+
+:::
+
+## 演示代码精简
+
+如果你不需要演示代码，你可以直接删除的`playground`文件夹。
+
+## 文档精简
+
+如果你不需要文档，你可以直接删除`docs`文件夹。
+
+## Mock 服务精简
+
+如果你不需要`Mock`服务，你可以直接删除`apps/backend-mock`文件夹。同时在你的应用下`.env.development`文件中删除`VITE_NITRO_MOCK`变量。
+
+```bash
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=false
+```
+
+## 安装依赖
+
+到这里，你已经完成了精简操作，接下来你可以安装依赖，并启动你的项目：
+
+```bash
+# 根目录下执行
+pnpm install
+
+```
+
+## 命令调整
+
+在精简后，你可能需要根据你的项目调整命令，在根目录下的`package.json`文件中，你可以调整`scripts`字段，移除你不需要的命令。
+
+```json
+{
+  "scripts": {
+    "dev:antd": "pnpm -F @vben/web-antd run dev",
+    "dev:docs": "pnpm -F @vben/docs run dev",
+    "dev:ele": "pnpm -F @vben/web-ele run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
+    "dev:naive": "pnpm -F @vben/web-naive run dev"
+  }
+}
+```
--- a/docs/src/guide/project/dir.md
+++ b/docs/src/guide/project/dir.md
@@ -0,0 +1,68 @@
+# 目录说明
+
+目录使用 Monorepo 管理，项目结构如下：
+
+```bash
+.
+├── Dockerfile # Docker 镜像构建文件
+├── README.md # 项目说明文档
+├── apps # 项目应用目录
+│   ├── backend-mock # 后端模拟服务应用
+│   ├── web-antd # 基于 Ant Design Vue 的前端应用
+│   ├── web-ele # 基于 Element Plus 的前端应用
+│   └── web-naive # 基于 Naive UI 的前端应用
+├── build-local-docker-image.sh # 本地构建 Docker 镜像脚本
+├── cspell.json # CSpell 配置文件
+├── docs # 项目文档目录
+├── eslint.config.mjs # ESLint 配置文件
+├── internal # 内部工具目录
+│   ├── lint-configs # 代码检查配置
+│   │   ├── commitlint-config # Commitlint 配置
+│   │   ├── eslint-config # ESLint 配置
+│   │   ├── prettier-config # Prettier 配置
+│   │   └── stylelint-config # Stylelint 配置
+│   ├── node-utils # Node.js 工具
+│   ├── tailwind-config # Tailwind 配置
+│   ├── tsconfig # 通用 tsconfig 配置
+│   └── vite-config # 通用Vite 配置
+├── package.json # 项目依赖配置
+├── packages # 项目包目录
+│   ├── @core # 核心包
+│   │   ├── base # 基础包
+│   │   │   ├── design # 设计相关
+│   │   │   ├── icons # 图标
+│   │   │   ├── shared # 共享
+│   │   │   └── typings # 类型定义
+│   │   ├── composables # 组合式 API
+│   │   ├── preferences # 偏好设置
+│   │   └── ui-kit # UI 组件集合
+│   │       ├── layout-ui # 布局 UI
+│   │       ├── menu-ui  # 菜单 UI
+│   │       ├── shadcn-ui # shadcn UI
+│   │       └── tabs-ui # 标签页 UI
+│   ├── constants # 常量
+│   ├── effects # 副作用相关包
+│   │   ├── access # 访问控制
+│   │   ├── chart-ui # 图表 UI
+│   │   ├── common-ui # 通用 UI
+│   │   ├── hooks # 组合式 API
+│   │   ├── layouts # 布局
+│   │   └── request # 请求
+│   ├── icons # 图标
+│   ├── locales # 国际化
+│   ├── preferences  # 偏好设置
+│   ├── stores # 状态管理
+│   ├── styles # 样式
+│   ├── types # 类型定义
+│   └── utils # 工具
+├── playground # 演示目录
+├── pnpm-lock.yaml # pnpm 锁定文件
+├── pnpm-workspace.yaml # pnpm 工作区配置文件
+├── scripts # 脚本目录
+│   ├── turbo-run # Turbo 运行脚本
+│   └── vsh # VSH 脚本
+├── stylelint.config.mjs # Stylelint 配置文件
+├── turbo.json # Turbo 配置文件
+├── vben-admin.code-workspace # VS Code 工作区配置文件
+└── vitest.config.ts # Vite 配置文件
+```