### Local Development Setup

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Installs dependencies and starts the development server for local development. Access the application at http://localhost:5173.

```bash
cd v4
pnpm install
npm run serve
```

--------------------------------

### Quick Start UI Framework Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for installing and using UI frameworks globally or on-demand, including CDN options.

```plaintext
/start/useUI/
  ├── install          (安装)
  ├── useGlobal        (全局导入)
  ├── useImport        (按需导入)
  └── cdn              (CDN 使用)
```

--------------------------------

### Quick Start Table Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for installing and using the Table component globally or on-demand, including CDN options.

```plaintext
/start/useTable/
  ├── install          (安装)
  ├── useGlobal        (全局导入)
  ├── useImport        (按需导入)
  └── cdn              (CDN 使用)
```

--------------------------------

### Quick Start Design Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for installing and using the Design component globally or on-demand, including CDN options.

```plaintext
/start/useDesign/
  ├── install          (安装)
  ├── useGlobal        (全局导入)
  ├── useImport        (按需导入)
  └── cdn              (CDN 使用)
```

--------------------------------

### Format Example Code with Oxfmt

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Uses Oxfmt to format example code. Configuration is managed via the .oxfmtrc.json file.

```bash
# 使用 Oxfmt 格式化示例代码
npm run oxfix:examples

# 配置文件: .oxfmtrc.json
```

--------------------------------

### 自动修复 TypeScript 问题

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

运行 `npm run esfix:examples` 命令来自动修复项目中可自动修复的 TypeScript 问题。

```bash
# 修复可自动修复的问题
npm run esfix:examples
```

--------------------------------

### Quick Start Other Page Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for various other quick start configurations like global settings, icons, themes, and internationalization.

```plaintext
/start/
  ├── globalConfig     (全局配置)
  ├── icons            (图标)
  ├── theme            (主题)
  ├── i18n             (国际化)
  ├── translate        (翻译)
  ├── z-index          (Z-index 管理)
  ├── permission       (权限)
  ├── freeDonation     (捐赠)
  └── joinSponsor      (赞助)
```

--------------------------------

### Quick Start Gantt Chart Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for installing and using the Gantt Chart component globally or on-demand, including CDN options.

```plaintext
/start/useGantt/
  ├── install          (安装)
  ├── useGlobal        (全局导入)
  ├── useImport        (按需导入)
  └── cdn              (CDN 使用)
```

--------------------------------

### Complete Navigation Menu Configuration

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

An example of a comprehensive navigation menu structure using the NavVO interface. It includes version switching links, demo sections, quick start guides, and component documentation.

```typescript
export const navConfigList: NavVO[] = [
  // 1. 版本切换链接
  {
    title: '切换 v4.x 旧版文档',
    linkUrl: '/v4_old',
    linkTarget: '_self'
  },
  
  // 2. 演示部分
  {
    i18nKey: 'app.aside.menu.demoTitle',
    isExpand: false,
    children: [
      { i18nKey: 'app.aside.menu.demoList', routerLink: { name: 'DemoListPreview' } },
      { i18nKey: 'app.aside.menu.demoProduct', routerLink: { name: 'DemoProductPreview' } },
      { i18nKey: 'app.aside.menu.demoRealTime', routerLink: { name: 'DemoRealTimeReview' } },
      // ...
    ]
  },
  
  // 3. 快速开始指南
  {
    i18nKey: 'app.aside.menu.guide',
    isExpand: true,
    children: [
      {
        i18nKey: 'app.aside.menu.fullInsrall',
        children: [
          { i18nKey: 'app.aside.menu.globalInstall', routerLink: { name: 'StartUIInstall' } },
          { i18nKey: 'app.aside.menu.lazyUseGlobal', routerLink: { name: 'StartUIUseGlobal' } },
          { i18nKey: 'app.aside.menu.lazyUseImport', routerLink: { name: 'StartUIUseImport' } },
          { i18nKey: 'app.aside.menu.useGlobalCDN', routerLink: { name: 'StartUICDN' } }
        ]
      },
      {
        i18nKey: 'app.aside.menu.useTableInsrall',
        children: [
          { i18nKey: 'app.aside.menu.globalInstall', routerLink: { name: 'StartTableInstall' } },
          // ...
        ]
      },
      // ...
    ]
  },
  
  // 4. 组件文档（Table 和 Grid）
  {
    i18nKey: 'app.aside.menu.tableTitle',
    children: [
      tableNavConfig  // 从 table.ts 导入的完整表格菜单配置
    ]
  }
]
```

--------------------------------

### Application Store Usage Example

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/核心模块API.md

Demonstrates how to use the application store to manage theme and language settings. Includes reading and updating state using the useAppStore hook.

```javascript
import { useAppStore } from '@/store'

export default {
  setup() {
    const appStore = useAppStore()
    
    // 读取状态
    const theme = appStore.theme
    const language = appStore.language
    
    // 调用方法
    appStore.setTheme('dark')
    appStore.setLanguage('zh-CN')
    
    return {
      appStore
    }
  }
}
```

--------------------------------

### Pinia Store State Update Example

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Demonstrates watching for state changes in a Pinia store and triggering actions.

```typescript
// 组件中
const appStore = useAppStore()

// watch 监听状态变化
watch(() => appStore.theme, (newTheme) => {
  // 主题变化时的处理
  console.log('Theme changed to:', newTheme)
})

// 调用 action
appStore.setTheme('dark')
  ↓
state.theme = 'dark'
  ↓
watch 回调触发
  ↓
组件使用主题相关样式重新渲染
```

--------------------------------

### NavVO Interface Usage Examples

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/类型定义.md

Illustrates how to use the NavVO interface to create different types of navigation menu items, including external links, internal routes, grouped menus with children, and enterprise-specific items. These examples are typically found in navigation configuration files.

```typescript
// 外部链接菜单项
const externalLink: NavVO = {
  title: '插件文档',
  linkUrl: 'https://plugins.vxeui.com',
  linkTarget: '_blank'
}
```

```typescript
// 内部路由菜单项
const routerItem: NavVO = {
  i18nKey: 'app.aside.menu.tableTitle',
  routerLink: { name: 'ComponentTableBaseBasic' }
}
```

```typescript
// 包含子菜单的分组
const groupMenu: NavVO = {
  i18nKey: 'app.aside.menu.guide',
  isExpand: true,
  children: [
    // ... 子菜单项
  ]
}
```

```typescript
// 企业级功能标记
const enterpriseItem: NavVO = {
  title: '高级功能',
  isEnterprise: true,
  routerLink: { name: 'EnterprisePreview', params: { previewCode: 'advanced' } }
}
```

--------------------------------

### Global Functionality Commands Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for global command functionalities, including API documentation and base examples for tables.

```plaintext
├── commands/
│   └── table/
│       ├── api          (命令 API)
│       └── base         (命令示例)
```

--------------------------------

### Global Functionality Menus Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for global menu functionalities, including API documentation and base examples for tables.

```plaintext
├── menus/
│   └── table/
│       ├── api          (菜单 API)
│       └── base         (菜单示例)
```

--------------------------------

### Create Documentation Page with PageLayout

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/页面组件API.md

Use PageLayout to structure your documentation pages. Include headings, paragraphs, and CodeRender components to display code examples.

```vue
<template>
  <PageLayout>
    <h1>表格基础</h1>
    <p>表格的基本用法示例</p>
    
    <CodeRender :code="code" />
  </PageLayout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageLayout from '@/components/PageLayout.vue'
import CodeRender from '@/components/CodeRender.vue'

const code = ref(`
<template>
  <vxe-table :data="tableData">
    <vxe-column field="id" title="ID"></vxe-column>
    <vxe-column field="name" title="名称"></vxe-column>
  </vxe-table>
</template>
`)
</script>
```

--------------------------------

### API Documentation Loading Flow

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Describes the sequence of events when loading API documentation, starting from route navigation to component mounting and data fetching.

```mermaid
graph TD
  A[路由导航到 /table/api]
  B[PageApi 组件挂载]
  C[调用 appStore.getComponentApiConf('table')]
  D[fetch(`/component-api/vxe-table-v4/api/vxe-table.json`)]
  E[响应返回 API 配置 JSON]
  F[解析并缓存到 store.compApiMaps['table']]
  G[组件使用缓存数据渲染 API 表格]
  H[下次访问相同 API，使用缓存，无需重新加载]
```

--------------------------------

### Global Functionality Formats Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for global formatting functionalities, including API documentation and base examples for tables.

```plaintext
/global/
├── formats/
│   └── table/
│       ├── api          (格式化 API)
│       └── base         (格式化示例)
```

--------------------------------

### PreCode Component Usage Examples

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/页面组件API.md

Demonstrates two ways to use the PreCode component for syntax highlighting: by providing encoded content via a prop or by using the default slot for inline code.

```vue
<!-- 方式 1: 使用 content 属性 -->
<PreCode 
  language="typescript" 
  :content="encodeURIComponent(codeString)"
/>
```

```vue
<!-- 方式 2: 使用插槽 -->
<PreCode language="javascript">
export const example = {
  name: 'example'
}
</PreCode>
```

--------------------------------

### Vite Build Output Structure

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Details the directory structure of the Vite build output, including the main index.html, compiled assets, and example files.

```text
dist/
├── index.html              # 主页面
├── assets/                 # 编译后的资源
│   ├── js/                # JavaScript 文件
│   ├── css/               # CSS 文件
│   └── images/            # 图片资源
└── example/               # 示例代码文件
    ├── js/               # 编译后的示例代码
    └── index.html        # 示例索引
```

--------------------------------

### VXE Table v4 Documentation Site Scripts

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

These NPM scripts manage dependencies, start a development server, build production versions, and perform full packaging for the v4 documentation site.

```bash
pnpm install --no-frozen-lockfile
```

```bash
vite
```

```bash
vue-tsc && vite build
```

```bash
npm run build && gulp build_examples && npm run oxfix:examples
```

```bash
eslint --fix --cache --ext .js,.jsx,.ts,.tsx,.vue dist/example/js/**
```

```bash
oxfmt dist/example/js/ --write
```

--------------------------------

### Navigation Configuration List

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/核心模块API.md

Defines the complete navigation menu configuration for the application, including demos, guides, and feature sections.

```typescript
export const navConfigList: NavVO[] = [...]
```

--------------------------------

### Global Functionality Renderer Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for global renderer functionalities, covering form, table, and form-design renderers with API and examples.

```plaintext
└── renderer/
    ├── form/
    │   ├── api          (表单渲染器 API)
    │   └── item/        (表单项渲染器)
    ├── table/
    │   ├── api          (表格渲染器 API)
    │   ├── default/     (默认渲染器)
    │   ├── edit/        (编辑渲染器)
    │   ├── expand/      (展开行渲染器)
    │   ├── toolbar/     (工具栏渲染器)
    │   ├── filter/      (筛选渲染器)
    │   └── empty/       (空数据渲染器)
    └── form-design/
        ├── api          (表单设计渲染器 API)
        └── widget/      (自定义组件)
```

--------------------------------

### Global Component Registration

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

Example of registering various VXE Table components as global components in a Vue application's main entry file.

```typescript
app.component('PreCode', PreCode)
app.component('CodeLight', CodeLight)
app.component('CodeList', CodeList)
app.component('CodeRender', CodeRender)
app.component('CodeUseVersion', CodeUseVersion)
app.component('ApiLink', ApiLink)
app.component('DemoUserSelectPulldown', DemoUserSelectPulldown)
app.component('DemoRoleSelectPulldown', DemoRoleSelectPulldown)
```

--------------------------------

### Vue Router Configuration

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Defines the basic setup for Vue Router, including importing necessary modules, defining routes, and creating the router instance with hash history.

```typescript
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [...]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

export default router
```

--------------------------------

### Code Caching for Loaded Examples

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Caches Promises of loaded code examples to avoid re-fetching.

```typescript
// 缓存已加载的代码示例
export const codeCacheMaps: Record<string, Promise<string>> = {}

// 首次加载时缓存
if (!codeCacheMaps[codeKey]) {
  codeCacheMaps[codeKey] = fetch(url).then(...)
}
// 再次使用时直接获取缓存
return codeCacheMaps[codeKey]
```

--------------------------------

### 编译和打包项目

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

运行 `npm run pack:all` 命令来执行项目的编译和打包操作。

```bash
npm run pack:all
```

--------------------------------

### Full Version Packaging

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Navigates to the root directory and packages all versions of the documentation. Generates a 'docs/' directory and a 'docs.zip' archive.

```bash
cd ..
npm run pack:all
```

--------------------------------

### 检查 SCSS 编译和开发模式启动

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

使用 `npm run build -- --mode development` 检查 SCSS 编译，并使用 `npm run serve` 在开发模式下启动项目。

```bash
# 检查 SCSS 编译
npm run build -- --mode development
```

```bash
# 使用开发模式启动
npm run serve
```

--------------------------------

### 更新环境变量

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

更新 `.env` 文件或通过命令行设置环境变量，例如更新时间戳 `VITE_APP_DATE_NOW` 和版本号 `VITE_APP_VXE_VERSION`。

```bash
VITE_APP_DATE_NOW=1234567890  # 更新时间戳
VITE_APP_VXE_VERSION=4        # 更新版本
```

--------------------------------

### Pinia Store Initialization (src/store/app.ts)

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Initializes the Pinia store by reading settings from local storage, applying themes, languages, and primary colors using VxeUI. It also defines the store's state and actions.

```typescript
// 1. 读取本地存储设置
const currTheme = localStorage.getItem('VXE_DOCS_THEME') || 'light'
const currPrimaryColor = localStorage.getItem('VXE_DOCS_PRIMARY_COLOR') || ''
const currComponentsSize = localStorage.getItem('VXE_DOCS_COMPONENTS_SIZE') || ''
const currLanguage = localStorage.getItem('VXE_DOCS_LANGUAGE') || 'zh-CN'

// 2. 应用主题
updateHighlightjsTheme(currTheme)
VxeUI.setTheme(currTheme)

// 3. 应用语言
VxeUI.setLanguage(currLanguage)

// 4. 应用主色彩
if (currPrimaryColor) {
  updatePrimaryColor(currPrimaryColor)
}

// 5. 更新 DOM 属性
document.documentElement.setAttribute('lang', currLanguage)
document.documentElement.setAttribute('vxe-docs-theme', currTheme)

// 6. 定义 Store
export const useAppStore = defineStore('app', {
  state() {
    return {
      // ... 初始状态
      theme: currTheme,
      language: currLanguage,
      primaryColor: currPrimaryColor,
      componentsSize: currComponentsSize,
      // ...
    }
  },
  actions: {
    // ... 操作方法
  }
})
```

--------------------------------

### Global Functionality Interceptor Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for global interceptor functionalities, including API documentation and base examples for tables.

```plaintext
├── interceptor/
│   └── table/
│       ├── api          (拦截器 API)
│       └── base         (拦截器示例)
```

--------------------------------

### Redirect and Default Routes Configuration

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

TypeScript configuration for redirecting unmatched routes to the 'StartTableInstall' page.

```typescript
{
  path: '/',
  redirect: { name: 'StartTableInstall' }
},
{
  path: '/:pathMatch(.*)*',
  redirect: { name: 'StartTableInstall' }
}
```

--------------------------------

### Vue Application Initialization (main.ts)

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Initializes the Vue application instance, registers global plugins like Vuex store, router, and i18n, and mounts the application to the DOM. It also handles asynchronous loading of internationalization messages.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import i18n from './i18n'

// 1. 创建应用实例
const app = createApp(App)

// 2. 注册全局插件
app.use(store)
app.use(router)
app.use(i18n)

// 3. 注册全局组件
app.component('PreCode', PreCode)
app.component('CodeLight', CodeLight)
// ... 更多全局组件

// 4. 异步加载国际化消息
fetch(`${import.meta.env.VITE_APP_RES_URL}/i18n/${i18n.global.locale}.json`)
  .then(res => res.json())
  .then(data => {
    i18n.global.setLocaleMessage(i18n.global.locale, data)
  })
  .then(() => {
    // 5. 挂载应用
    app.mount('#app')
  })
```

--------------------------------

### Vite Entry Point (index.html)

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

The main HTML file for a Vite-powered application. It sets up the basic document structure, links to stylesheets, and includes the main JavaScript entry point.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VXE Table 官方文档</title>
  <link id="hljsLink" rel="stylesheet" href="...">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>
```

--------------------------------

### Global Functionality Validators Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

Routes for global validator functionalities, covering both form and table validation with API and base examples.

```plaintext
├── validators/
│   ├── form/
│   │   ├── api          (表单验证 API)
│   │   └── base         (表单验证示例)
│   └── table/
│       ├── api          (表格验证 API)
│       └── base         (表格验证示例)
```

--------------------------------

### 获取组件 API 文档

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

通过 `useAppStore` 获取组件的 API 配置信息，并将其存储在 ref 中。该函数用于加载特定组件（如 'table'）的属性、方法、事件和插槽信息。

```typescript
import { useAppStore } from '@/store'
import { ref } from 'vue'

const appStore = useAppStore()
const apiData = ref(null)

async function loadTableAPI() {
  apiData.value = await appStore.getComponentApiConf('table')
  
  // apiData.value 结构:
  // {
  //   properties: [...],    // 属性列表
  //   methods: [...],       // 方法列表
  //   events: [...],        // 事件列表
  //   slots: [...]          // 插槽列表
  // }
}
```

--------------------------------

### Vue Router API Usage

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

Shows how to get router and route instances, perform navigation, and access current route information.

```typescript
// 获取路由实例
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 导航
router.push({ name: 'ComponentTableBaseBasic' })
router.push({ path: '/component/table/base/basic' })
router.replace({ name: 'StartTableInstall' })
router.go(-1)
router.back()

// 查询当前路由信息
route.name      // 当前路由名称
route.path      // 当前路径
route.params    // 路径参数
route.query     // 查询参数
route.hash      // URL hash
```

--------------------------------

### Package and Release

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Commands to package different versions of VXE Table for release.

```bash
npm run pack:v1               # 打包 v1 (编译 + 文档 + ZIP)
```

```bash
npm run pack:v2               # 打包 v2
```

```bash
npm run pack:v3               # 打包 v3
```

```bash
npm run pack:v4               # 打包 v4
```

```bash
npm run pack:all              # 打包全部版本
```

--------------------------------

### Production Build Command

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Builds the v4 version of the project, outputting the production-ready files to the 'dist/' directory. Also includes commands for code checking and formatting.

```bash
cd v4
npm run build
npm run pack
```

--------------------------------

### Initialize Application Settings from LocalStorage

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/配置与环境.md

Shows the initialization process in store/app.ts, where saved settings from LocalStorage are read and applied to the application's theme, language, and component size. Ensure these settings are applied early in the application lifecycle.

```typescript
// 读取保存的设置
const currTheme = (localStorage.getItem('VXE_DOCS_THEME') || 'light') as 'dark' | 'light'
const currPrimaryColor = localStorage.getItem('VXE_DOCS_PRIMARY_COLOR') || ''
const currComponentsSize = (localStorage.getItem('VXE_DOCS_COMPONENTS_SIZE') || '') as VxeComponentSizeType
const currLanguage = (localStorage.getItem('VXE_DOCS_LANGUAGE') || 'zh-CN') as VxeGlobalI18nLocale

// 应用保存的主题
updateHighlightjsTheme(currTheme)
VxeUI.setLanguage(currLanguage)
VxeUI.setTheme(currTheme)

// 应用主色彩
if (currPrimaryColor) {
  updatePrimaryColor(currPrimaryColor)
}

// 更新 HTML 属性
document.documentElement.setAttribute('lang', currLanguage)
document.documentElement.setAttribute('vxe-docs-theme', currTheme)
```

--------------------------------

### Browser Access and Initial Load Flow

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Illustrates the sequence of events from browser access to the display of the documentation homepage.

```text
Browser访问 https://vxetable.cn
  ↓
加载 index.html
  ↓
加载并执行 main.ts
  ↓
初始化 Vue 应用
  ↓
路由匹配默认路由 '/'
  ↓
重定向到 '/start/useTable/install'
  ↓
异步加载对应组件
  ↓
从远程加载 i18n 消息
  ↓
页面渲染完成
  ↓
显示文档首页
```

--------------------------------

### SCSS Theme Switching Mechanism

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/配置与环境.md

Example of implementing theme switching using HTML attribute selectors in SCSS. Defines CSS variables for different themes.

```scss
// HTML 属性选择器主题
html[vxe-docs-theme="light"] {
  --primary-color: #409EFF;
}

html[vxe-docs-theme="dark"] {
  --primary-color: #66B1FF;
}
```

--------------------------------

### Gulp v4 Documentation Build Chain

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Outlines the steps for building v4 documentation, including copying build output, processing index.html, and copying to the final output directory.

```text
gulp build_v4_docs
  ├── copy_v4_temp         (复制构建输出到临时目录)
  ├── copy_v4_index        (处理 index.html)
  └── copy_v4_docs         (复制到最终输出目录)
```

--------------------------------

### Compile and Build

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Commands to compile and build different versions of VXE Table.

```bash
npm run build                  # 编译所有版本
```

```bash
npm run build:v1              # 编译 v1
```

```bash
npm run build:v2              # 编译 v2
```

```bash
npm run build:v3              # 编译 v3
```

```bash
npm run build:v4              # 编译 v4
```

```bash
npm run build:all             # 编译全部
```

--------------------------------

### Create Pinia Store

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/配置与环境.md

Initialize Pinia by calling `createPinia`. This instance will be used to manage your application's state.

```typescript
import { createPinia } from 'pinia'

const pinia = createPinia()
export default pinia
```

--------------------------------

### Configure Vue Router Redirects

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/配置与环境.md

Set up root path and unmatched path redirects in Vue Router to direct users to a specific route, such as an installation or welcome page.

```typescript
// 根路径重定向
{
  path: '/',
  redirect: { name: 'StartTableInstall' }
},
// 未匹配路径重定向
{
  path: '/:pathMatch(.*)*',
  redirect: { name: 'StartTableInstall' }
}
```

--------------------------------

### 预加载关键样式和字体

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

使用 `<link rel="preload">` 标签预加载关键的 CSS 样式和字体文件，以优化页面加载性能。

```html
<link rel="preload" href="/assets/main.css" as="style">
```

```html
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
```

--------------------------------

### PageHeader Event Handlers

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/页面组件API.md

Provides example implementations for handling theme, language, and primary color changes in the PageHeader component. These handlers interact with an app store to update application settings.

```typescript
// 主题切换
handleThemeChange(theme: 'dark' | 'light') {
  appStore.setTheme(theme)
}

// 语言切换
handleLanguageChange(language: VxeGlobalI18nLocale) {
  appStore.setLanguage(language)
}

// 主色彩更新
handlePrimaryColorChange(color: string) {
  appStore.setPrimaryColor(color)
}
```

--------------------------------

### Gulp Full Documentation Build Chain

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Lists the various documentation build tasks included in the complete build process.

```text
gulp build_all_docs
  ├── build_other3_docs
  ├── build_other4_docs
  ├── build_v1_docs
  ├── build_v2_docs
  ├── build_v3_docs
  ├── build_v3_old_docs
  ├── build_v3d8_docs
  ├── build_v4_docs
  ├── build_v4_old_docs
  └── build_v4d6_docs
```

--------------------------------

### Initialize Vue Router

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Sets up the Vue Router instance, registers it with the application, and optionally defines navigation guards.

```typescript
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [...]
})

app.use(router)

router.beforeEach((to, from, next) => {
  next()
})
```

--------------------------------

### 部署文档到服务器

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

使用 `rsync` 命令将本地 `docs/` 目录下的构建产物同步上传到服务器的指定路径。

```bash
# 上传 docs/ 到服务器
rsync -avz docs/ server:/path/to/docs/
```

--------------------------------

### Get Specific Component API Configuration

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/核心模块API.md

Asynchronously retrieves the API configuration for a specific component. It loads the JSON configuration file for the given component API name from the resource base URL.

```typescript
const tableApiConf = await appStore.getComponentApiConf('table')
// 加载 ${resBaseUrl}/component-api/${packName}-v${version}/api/vxe-${apiName}.json
```

--------------------------------

### Dynamic Demo Module Loading

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/核心模块API.md

Uses Vite's `import.meta.glob` to dynamically import all Vue demonstration components from the '@/views/**/*.vue' path. Located in `src/common/modules.ts`.

```typescript
export const demoModules = import.meta.glob<Component>([
  '@/views/**/*.vue'
])
```

--------------------------------

### 更新 package.json 版本号

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

在发布新版本前，需要更新 `package.json` 文件中的 `version` 字段为新版本号。

```json
// package.json
"version": "新版本号"
```

--------------------------------

### Load Component API Configuration

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/页面组件API.md

This snippet shows the process of fetching component API configuration using a store. It's a crucial step before rendering API documentation.

```typescript
// 1. 调用 store 获取 API 配置
const apiConf = await appStore.getComponentApiConf(apiName)

// 2. 处理并展示 API 信息
// - 属性（Properties）
// - 方法（Methods）
// - 事件（Events）
// - 插槽（Slots）
```

--------------------------------

### Update Theme in Application

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Demonstrates how to update the application's theme by modifying DOM attributes, VxeUI, and local storage.

```javascript
document.documentElement.setAttribute('vxe-docs-theme', 'dark')
document.documentElement.style.setProperty('--xxx', newColor)
VxeUI.setTheme('dark')
localStorage.setItem('VXE_DOCS_THEME', 'dark')
```

--------------------------------

### Project Structure Overview

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/项目概览.md

This snippet outlines the directory structure of the VXE Table documentation project, highlighting the organization of source code, build scripts, and configuration files.

```tree
vxe-table-docs/
├── v4/                      # 主文档网站（v4 版本）
│   ├── src/                # 源代码目录
│   │   ├── main.ts         # 应用入口
│   │   ├── App.vue         # 根组件
│   │   ├── router/         # 路由配置
│   │   ├── store/          # Pinia 状态管理
│   │   ├── i18n/           # 国际化配置
│   │   ├── common/         # 共享工具函数
│   │   ├── components/     # UI 组件
│   │   ├── views/          # 页面组件
│   │   └── styles/         # 全局样式
│   └── package.json        # 项目配置
├── gulpfile.js             # 构建脚本
├── package.json            # 根项目配置
└── README.md               # 项目说明
```

--------------------------------

### Pinia Store API Usage

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

Demonstrates how to create, access state, computed properties, and call methods on a Pinia store.

```typescript
// 创建和使用 Store
const appStore = useAppStore()

// 访问状态
appStore.theme
appStore.language
appStore.primaryColor
appStore.componentsSize
appStore.pageLoading
appStore.apiBaseUrl
appStore.resBaseUrl
appStore.compApiMaps
appStore.pluginAppList

// 访问计算属性
appStore.utilCDNLib
appStore.vueCDNLib
appStore.tableCDNLib
appStore.uiCDNLib
appStore.designCDNLib
appStore.ganttCDNLib

// 调用方法
await appStore.setTheme('dark')
await appStore.setLanguage('en-US')
await appStore.setPrimaryColor('#409EFF')
await appStore.setComponentsSize('large')
await appStore.getComponentI18nJSON()
await appStore.updateComponentApiJSON()
await appStore.getComponentApiConf('table')
await appStore.getPluginAppList()
```

--------------------------------

### Set Primary Color in Application

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Illustrates setting a primary color, generating color variants, updating CSS variables, and persisting the choice in local storage.

```javascript
localStorage.setItem('VXE_DOCS_PRIMARY_COLOR', '#FF6B6B')
```

--------------------------------

### CI/CD Build Scripts

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Scripts for continuous integration and continuous deployment pipelines. Includes commands to compile all versions and generate final files.

```bash
npm run build:all
npm run pack:all
```

--------------------------------

### Component Documentation API Routes

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

API documentation routes for various components like Table, Grid, Colgroup, and Column.

```plaintext
/component/table/base/api              (Table API)
/component/grid/base/api               (Grid API)
/component/colgroup/base/api           (Colgroup API)
/component/column/base/api             (Column API)
```

--------------------------------

### 清理和重新构建项目

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

当遇到构建失败时，执行此命令序列来清理缓存、删除旧的构建产物和依赖，然后重新安装并构建项目。

```bash
# 1. 清理缓存
npm run clear_docs_temp
rm -rf dist/
rm -rf node_modules/
```

```bash
# 2. 重新安装依赖
pnpm install
```

```bash
# 3. 重新构建
npm run build
```

--------------------------------

### 动态 API 文档路由配置

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/路由和导航.md

配置一个动态路由，用于匹配以 ':name/api' 结尾的路径，并指向 DocsApi 组件。

```typescript
{
  path: ':name/api',
  name: 'DocsApi',
  component: () => import('@/views/api/DocsApi.vue')
}
```

--------------------------------

### Environment Variables for Application Information

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

Retrieve application details like title, package name, version, and build time using environment variables.

```typescript
// 应用信息
import.meta.env.VITE_APP_PAGE_TITLE           // 页面标题
import.meta.env.VITE_APP_PACKAGE_NAME         // 包名
import.meta.env.VITE_APP_VXE_VERSION          // VXE 版本
import.meta.env.VITE_APP_DATE_NOW             // 构建时间
```

--------------------------------

### Gulp Build Configuration for Ads

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/配置与环境.md

Configure whether to enable ads, sponsors, and force ad display within Gulp build tasks. Includes variables for ad wrapper ID, style, and sponsor ID.

```javascript
// gulpfile.js 中的配置
const enableAd = true                    // 启用广告
const enableSponsors = false             // 启用赞助商
const isForceAd = false                  // 强制显示广告

const adVariable = {
  VXE_AD_WRAPPER_ID: '...',             // 广告包装器 ID
  VXE_AD_WRAPPER_STYLE: '...',          // 广告包装器样式
  VXE_AD_SPONSOR_ID: '...',             // 赞助商 ID
  VXE_AD_WWADS_STYLE: '...'             // 广告样式
}
```

--------------------------------

### 检查 TypeScript 类型错误

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

使用 `vue-tsc --noEmit` 命令来检查项目中的 TypeScript 类型错误，而不进行编译。

```bash
# 检查 TypeScript 错误
vue-tsc --noEmit
```

--------------------------------

### Access and Modify Global State and Routing

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

Use this snippet to access the application store for theme and language settings, and to navigate to different routes. Ensure the store and router are properly imported.

```javascript
// 访问 Store
const { useAppStore } = await import('/src/store/app.ts')
const store = useAppStore()
console.log(store.theme)
console.log(store.language)

// 修改状态
store.setTheme('dark')
store.setLanguage('en-US')

// 访问路由
const { useRouter } = await import('vue-router')
const router = useRouter()
router.push({ name: 'ComponentTableBaseBasic' })
```

--------------------------------

### Set System Configuration

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/核心模块API.md

Sets the system configuration object, which may include details like preview versions, i18n versions, and specific framework version information.

```typescript
appStore.setSystemConfig({
  previewVersion: '1.0.0',
  i18nVersion: '1.0.0',
  v3Version: '4.0.0',
  v4Version: '4.7.0'
})
```

--------------------------------

### Fetch Plugin Application List

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/核心模块API.md

Asynchronously fetches the list of available plugin applications. This data is loaded from a dedicated JSON file and populates the `pluginAppList` state.

```typescript
await appStore.getPluginAppList()
// 加载 ${resBaseUrl}/component-api/vxe-plugin-app-list.json
// 填充 pluginAppList
```

--------------------------------

### Initialize Vue I18n

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Creates and configures the Vue I18n instance, loads initial messages, and registers it with the application.

```typescript
const i18n = createI18n({
  warnHtmlMessage: false,
  locale: '决定的语言',
  messages: {}
})

fetch(`/i18n/${locale}.json`)
  .then(res => res.json())
  .then(data => {
    i18n.global.setLocaleMessage(locale, data)
  })

app.use(i18n)
```

--------------------------------

### LocalStorage Operations for User Preferences

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/配置与环境.md

Demonstrates how to read, save, and remove user preference settings like theme and primary color from LocalStorage. Use these operations to manage user-specific configurations.

```typescript
// 读取主题
const savedTheme = localStorage.getItem('VXE_DOCS_THEME') || 'light'

// 保存主题
localStorage.setItem('VXE_DOCS_THEME', 'dark')

// 读取主色彩
const primaryColor = localStorage.getItem('VXE_DOCS_PRIMARY_COLOR') || ''

// 保存主色彩
localStorage.setItem('VXE_DOCS_PRIMARY_COLOR', '#409EFF')

// 清除所有设置
localStorage.removeItem('VXE_DOCS_THEME')
localStorage.removeItem('VXE_DOCS_PRIMARY_COLOR')
localStorage.removeItem('VXE_DOCS_COMPONENTS_SIZE')
localStorage.removeItem('VXE_DOCS_LANGUAGE')
```

--------------------------------

### Plugin Application List Loading Flow

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Details the loading and processing of the plugin application list, used for populating dropdown menus with available plugins.

```mermaid
graph TD
  A[应用启动 或 访问插件相关页面]
  B[调用 appStore.getPluginAppList()]
  C[fetch(`/component-api/vxe-plugin-app-list.json`)]
  D[响应返回插件列表]
  E[遍历处理每个插件项：
  ├─ 保存原始数据 (code, uri, isEnterprise)
  ├─ 生成 value (kebab-case)
  └─ 翻译 label (国际化)]
  F[填充 store.pluginAppList]
  G[下拉菜单显示可用插件]
```

--------------------------------

### Store Methods for State Management

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

These methods are part of the Pinia store for managing application state, including loading, theme, primary color, component size, and language.

```typescript
setPageLoading(status: boolean): void
setTheme(name: 'dark' | 'light'): void
setPrimaryColor(color: string): void
setComponentsSize(size: VxeComponentSizeType): void
setLanguage(language: VxeGlobalI18nLocale): void
getComponentI18nJSON(): Promise<void>
updateComponentApiJSON(): Promise<void>
updateAllComponentApiJSON(): Promise<void>
getComponentApiConf(apiName: string): Promise<any[]>
getPluginAppList(): Promise<void>
readAuthMsgFlagVisible(): void
readTopMenuMsgFlagVisible(): void
setSystemConfig(conf: any): void
setVersionConfig(conf: any): void
```

--------------------------------

### VersionInfo 类型定义

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/页面组件API.md

定义了版本信息对象的结构，用于`VersionList`组件。包含版本号、显示标签、状态（最新、稳定、旧版）和对应的URL。

```typescript
interface VersionInfo {
  version: string       // 版本号
  label: string         // 显示标签
  status: 'latest' | 'stable' | 'old'  // 状态
  url: string          // 版本 URL
}
```

--------------------------------

### Route Exception Handling

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/应用生命周期.md

Configure a catch-all route to redirect unmatched paths to a default page, preventing 404 errors.

```typescript
// 未匹配的路由
{
  path: '/:pathMatch(.*)*',
  redirect: { name: 'StartTableInstall' }
}

// 重定向到默认页面
```

--------------------------------

### Store Management API

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/API索引.md

APIs for managing the application's state, including theme, primary color, component size, and language settings.

```APIDOC
## Store Management API

### Description
APIs for managing the application's state, including theme, primary color, component size, and language settings.

### Methods
- `setPageLoading(status: boolean): void`
- `setTheme(name: 'dark' | 'light'): void`
- `setPrimaryColor(color: string): void`
- `setComponentsSize(size: VxeComponentSizeType): void`
- `setLanguage(language: VxeGlobalI18nLocale): void`
- `getComponentI18nJSON(): Promise<void>`
- `updateComponentApiJSON(): Promise<void>`
- `updateAllComponentApiJSON(): Promise<void>`
- `getComponentApiConf(apiName: string): Promise<any[]>`
- `getPluginAppList(): Promise<void>`
- `readAuthMsgFlagVisible(): void`
- `readTopMenuMsgFlagVisible(): void`
- `setSystemConfig(conf: any): void`
- `setVersionConfig(conf: any): void`
```

--------------------------------

### Vite Key Build Options

Source: https://github.com/x-extends/vxe-table-docs/blob/main/_autodocs/构建和部署.md

Configures essential build options for Vite, including target ECMAScript version, minifier, source map generation, and Rollup output settings like manual chunking.

```javascript
{
  build: {
    target: 'ES2020',
    minify: 'terser',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: { ... }            // 手动代码分割
      }
    }
  }
}
```