### Install pnpm Package Manager

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/quick-start

Installs the pnpm package manager globally, which is recommended for managing project dependencies. You can use either npm or yarn to install pnpm.

```bash
npm install -g pnpm
# 或者
yarn global add pnpm
```

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

### Install Project Dependencies with pnpm

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/quick-start

Installs all the necessary dependencies for the Art Design Pro project using the pnpm package manager. This command should be run in the root directory of the cloned project.

```bash
pnpm install
```

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

### Run Art Design Pro Development Server

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/quick-start

Starts the Art Design Pro development server using pnpm. The project will automatically open in your browser at http://localhost:3006 upon successful startup.

```bash
pnpm dev
```

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

### Install Project Dependencies Ignoring Scripts with pnpm

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/quick-start

Installs project dependencies using pnpm, bypassing any scripts defined in the package.json. This can be useful if certain scripts cause issues during installation.

```bash
pnpm install --ignore-scripts
```

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

### Clone Art Design Pro Repository from Gitee

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/quick-start

This command clones the Art Design Pro project source code from its Gitee repository. Ensure you have Git installed on your system.

```bash
git clone https://gitee.com/lingchen163/art-design-pro
```

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

### Complete Example

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

A full example demonstrating the usage of the ArtSearchBar component in a Vue application.

```APIDOC
## Complete Example

### Description
This example shows how to use the ArtSearchBar component with various configurations and event handlers.

### Request Example
```vue
<template>
  <div class="search-example">
    <ArtSearchBar
      ref="searchBarRef"
      v-model="formData"
      :items="formItems"
      :rules="rules"
      :defaultExpanded="true"
      :labelWidth="100"
      labelPosition="right"
      :span="6"
      :gutter="16"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #customSlot>
        <el-input
          v-model="formData.customSlot"
          placeholder="我是插槽渲染的组件"
        />
      </template>
    </ArtSearchBar>

    <div class="result">
      <h3>搜索结果：</h3>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchBarRef = ref()

const formData = ref({
  name: '',
  phone: '',
  status: '',
  dateRange: [],
  customSlot: ''
})

const rules = {
  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

const formItems = [
  {
    label: '用户名',
    key: 'name',
    type: 'input',
    placeholder: '请输入用户名',
    props: { clearable: true }
  },
  {
    label: '手机号',
    key: 'phone',
    type: 'input',
    placeholder: '请输入手机号',
    props: { maxlength: 11 }
  },
  {
    label: '状态',
    key: 'status',
    type: 'select',
    props: {
      placeholder: '请选择状态',
      options: [
        { label: '启用', value: '1' },
        { label: '禁用', value: '0' }
      ]
    }
  },
  {
    label: '日期范围',
    key: 'dateRange',
    type: 'datetime',
    props: {
      type: 'daterange',
      rangeSeparator: '至',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD'
    }
  },
  {
    label: '自定义插槽',
    key: 'customSlot',
    type: 'input'
  }
]

const handleSearch = async () => {
  try {
    await searchBarRef.value.validate()
    console.log('搜索参数:', formData.value)
    // 执行搜索逻辑
  } catch (error) {
    console.log('表单验证失败')
  }
}

const handleReset = () => {
  console.log('重置表单')
}
</script>

<style scoped>
.search-example {
  padding: 20px;
}

.result {
  margin-top: 20px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.result pre {
  margin: 0;
  font-size: 12px;
}
</style>
```
```

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

### Setup Git Hooks with Husky

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/in-depth/script

Installs and configures Husky, a tool for managing Git hooks. This allows running scripts automatically before Git operations.

```bash
husky
```

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

### Start Development Server (Vite)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/in-depth/script

Starts the Vite development server and automatically opens the application in the default browser. This is useful for local development and debugging.

```bash
vite --open
```

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

### ArtSearchBar Vue Component Example

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

A comprehensive example demonstrating the usage of the ArtSearchBar component in a Vue.js application. It includes form data setup, validation rules, item configurations, event handling for search and reset, and a custom slot example. The example also shows how to use the component's methods like 'validate'.

```vue
<template>
  <div class="search-example">
    <ArtSearchBar
      ref="searchBarRef"
      v-model="formData"
      :items="formItems"
      :rules="rules"
      :defaultExpanded="true"
      :labelWidth="100"
      labelPosition="right"
      :span="6"
      :gutter="16"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #customSlot>
        <el-input 
          v-model="formData.customSlot" 
          placeholder="我是插槽渲染的组件" 
        />
      </template>
    </ArtSearchBar>

    <div class="result">
      <h3>搜索结果：</h3>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchBarRef = ref()

const formData = ref({
  name: '',
  phone: '',
  status: '',
  dateRange: [],
  customSlot: ''
})

const rules = {
  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

const formItems = [
  {
    label: '用户名',
    key: 'name',
    type: 'input',
    placeholder: '请输入用户名',
    props: { clearable: true }
  },
  {
    label: '手机号',
    key: 'phone',
    type: 'input',
    placeholder: '请输入手机号',
    props: { maxlength: 11 }
  },
  {
    label: '状态',
    key: 'status',
    type: 'select',
    props: {
      placeholder: '请选择状态',
      options: [
        { label: '启用', value: '1' },
        { label: '禁用', value: '0' }
      ]
    }
  },
  {
    label: '日期范围',
    key: 'dateRange',
    type: 'datetime',
    props: {
      type: 'daterange',
      rangeSeparator: '至',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD'
    }
  },
  {
    label: '自定义插槽',
    key: 'customSlot',
    type: 'input'
  }
]

const handleSearch = async () => {
  try {
    await searchBarRef.value.validate()
    console.log('搜索参数:', formData.value)
    // 执行搜索逻辑
  } catch (error) {
    console.log('表单验证失败')
  }
}

const handleReset = () => {
  console.log('重置表单')
}
</script>

<style scoped>
.search-example {
  padding: 20px;
}

.result {
  margin-top: 20px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.result pre {
  margin: 0;
  font-size: 12px;
}
</style>
```

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

### Clone Art Design Pro Repository

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/other/update

This command clones the Art Design Pro project from its GitHub repository. Ensure you have Git installed.

```bash
git clone https://github.com/Daymychen/art-design-pro
```

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

### Build Project with pnpm

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/build

Executes the build command for the project. This command compiles and bundles the application. Successful execution generates a 'dist' folder in the project root containing the built files.

```bash
pnpm build
```

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

### Push Code to Your Repository

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/other/update

Pushes the project's code to your specified Git repository. Ensure 'main' is replaced with your actual branch name.

```bash
# Push code to your own Git repository

# Note: main is the branch name, please replace it according to your actual branch

git push up main
```

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

### Nginx Configuration for Non-Root Directory

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/build

Configures Nginx to serve the application from a specific sub-directory. This is necessary when the application is not deployed at the root of the domain. It maps a location to the application's static files.

```bash
server {
  location /art-design-pro {
    alias  /usr/local/nginx/html/art-design-pro;
    index index.html index.htm;
  }
}
```

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

### Pull Latest Code from Your Repository (Optional)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/other/update

Pulls the latest updates from your own remote repository. Replace 'main' with your actual branch name.

```bash
# Pull updates from your own remote repository

git pull up main
```

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

### Sync Latest Code from Open-Source Project

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/other/update

Fetches the latest code from the official Art Design Pro open-source repository. It's recommended to run this periodically. Replace 'main' with the correct default branch name if it differs.

```bash
# Pull the latest code from the open-source repository (main is the default main branch, please modify as needed)

git pull origin main
```

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

### Basic Table Usage with useTable

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/hooks/use-table

Demonstrates the basic setup of the useTable hook for simple data display. It initializes the table with an API function and a column configuration.

```typescript
const { data, loading, pagination } = useTable({
  core: {
    apiFn: fetchGetUserList,
    columnsFactory: () => basicColumns,
  },
});
```

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

### Input Control Types for ArtSearchBar (JavaScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

Provides examples of different input control types supported by ArtSearchBar, including standard text inputs, number inputs with min/max validation, and multi-line text areas.

```javascript
// 普通输入框
{
  label: '用户名',
  key: 'name',
  type: 'input',
  placeholder: '请输入用户名'
}

// 数字输入框
{
  label: '年龄',
  key: 'age',
  type: 'number',
  props: {
    min: 0,
    max: 120
  }
}

// 多行文本
{
  label: '备注',
  key: 'remark',
  type: 'input',
  props: {
    type: 'textarea',
    rows: 3
  }
}
```

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

### Configure VITE_BASE_URL for Deployment

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/build

Sets the base URL for the application during production deployment. This is crucial for correctly referencing static assets. The value should reflect the deployment path.

```bash
# 根据自己存放的静态资源路径来更改配置
VITE_BASE_URL = /art-design-pro/
```

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

### Add Custom Git Repository as Remote

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/other/update

Adds your personal Git repository as a remote source, allowing you to push and pull changes. Replace '<your-git-url>' with your repository's URL and 'up' with your preferred remote name.

```bash
# Add remote source (up is a custom name, can be changed)

git remote add up <your-git-url>
```

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

### UseTable Basic Usage Example

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/hooks/use-table

Demonstrates the basic implementation of the useTable composable function for a Vue 3 table component. It shows how to integrate data fetching, column definitions, and pagination handling.

```vue
<template>
  <div>
    <!-- 表格组件 -->
    <ArtTable
      :loading="loading"
      :data="data"
      :columns="columns"
      :pagination="pagination"
      @pagination:size-change="handleSizeChange"
      @pagination:current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable } from "@/composables/useTable";
import { fetchGetUserList } from "@/api/system-manage";

const {
  data,
  loading,
  columns,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTable({
  core: {
    apiFn: fetchGetUserList,
    apiParams: {
      current: 1,
      size: 20,
    },
    columnsFactory: () => [
      { prop: "id", label: "ID" },
      { prop: "name", label: "姓名" },
      { prop: "email", label: "邮箱" },
    ],
  },
});
</script>
```

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

### Configure Multi-language Support (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/in-depth/locale

Provides a detailed example of configuring multi-language support using 'vue-i18n' in a Vue.js project. It covers creating the i18n instance, setting the locale, fallback locale, and registering language messages.

```typescript
import { createI18n } from "vue-i18n";
import en from "./en";
import zh from "./zh";
import { LanguageEnum } from "@/enums/appEnum";

const lang = createI18n({
  locale: LanguageEnum.ZH, // 设置语言类型
  legacy: false, // 如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  fallbackLocale: LanguageEnum.ZH, // 设置备用语言
  messages: {
    en,
    zh,
  },
});

export default lang;
```

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

### Preview Production Build (Vite)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/in-depth/script

Serves the built application locally, simulating a production environment. This allows for previewing the final build before deployment.

```bash
vite preview
```

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

### 开发环境环境变量配置 (.env.development)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/env-variables

开发环境环境变量仅适用于开发阶段，用于配置本地开发相关的设置，例如本地 API 地址、代理配置以及是否删除 console.log。

```bash
# 【开发】环境变量

# 网站地址前缀
VITE_BASE_URL = /

# API 请求基础路径（开发环境通常为代理前缀，如 /api ）
VITE_API_URL = /api

# 本地开发代理的目标后端地址（仅开发环境生效，用于解决跨域）
VITE_API_PROXY_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default

# Delete console
VITE_DROP_CONSOLE = false
```

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

### 通用环境变量配置 (.env)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/env-variables

通用环境变量适用于所有环境，通常用于配置全局性的信息，如版本号、端口号、基础 URL 和 API 地址前缀等。

```bash
# 【通用】环境变量

#  版本号
VITE_VERSION = 2.4.1.1

# 端口号
VITE_PORT = 3006

# 网站地址前缀
VITE_BASE_URL = /art-design-pro/

# API 地址前缀
VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default

# 权限模式（ frontend（前端） | backend（后端） ）
VITE_ACCESS_MODE = frontend

# 跨域请求时是否携带 Cookie（开启前需确保后端支持）
VITE_WITH_CREDENTIALS = false

# 是否打开路由信息
VITE_OPEN_ROUTE_INFO = false

# 锁屏加密密钥
VITE_LOCK_ENCRYPT_KEY = jfsfjk1938jfj
```

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

### Using Iconfont Font Class

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/icon

This snippet shows how to use an iconfont icon by applying its specific font class in HTML. The example uses `iconfont-sys` and `iconsys-gou` classes on an `<i>` tag.

```html
<i class="iconfont-sys iconsys-gou"></i>
```

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

### 执行项目精简脚本 (Bash)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/lite-version

该命令用于执行 Art Design Pro 项目的精简脚本，移除开发示例内容。执行时会提示用户确认，输入 'yes' 以开始清理。

```bash
pnpm clean:dev
```

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

### 生产环境环境变量配置 (.env.production)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/env-variables

生产环境环境变量仅适用于生产部署，用于配置生产环境的 API 地址、基础 URL 和是否删除 console.log 等。

```bash
# 【生产】环境变量

# 网站地址前缀
VITE_BASE_URL = /art-design-pro/

# API 地址前缀
VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default

# Delete console
VITE_DROP_CONSOLE = true
```

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

### Get Current Language (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/in-depth/locale

Shows how to retrieve the current language setting in a Vue.js application using the 'vue-i18n' library. It imports the 'useI18n' function to access the 'locale' property.

```typescript
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
```

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

### Data Transformation with dataTransformer

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/hooks/use-table

Demonstrates how to use `dataTransformer` to modify or format the data received from the API before it's displayed in the table. This example shows creating a `fullName` and `statusText` field.

```typescript
const { data } = useTable({
  core: {
    apiFn: fetchGetUserList,
  },
  transform: {
    dataTransformer: (records) => {
      return records.map((item) => ({
        ...item,
        fullName: `${item.firstName} ${item.lastName}`,
        statusText: item.status === 1 ? "激活" : "禁用",
      }));
    },
  },
});
```

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

### Notes on Usage

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

Important considerations when using the ArtSearchBar component.

```APIDOC
## Notes on Usage

### Description
Important guidelines for using the ArtSearchBar component effectively.

### Parameters
#### Path Parameters
1. **Form Item Keys**: Ensure that the `key` for each form item is unique for data binding and validation.
2. **Props to Element Plus**: The `props` attribute is directly passed to the corresponding Element Plus component. Refer to the Element Plus documentation for available properties.
3. **Validation Rules**: Form validation rule format is consistent with Element Plus Form components.
```

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

### ArtSearchBar Props

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

Configuration options for the ArtSearchBar component.

```APIDOC
## ArtSearchBar Props

### Description
Configuration props for the ArtSearchBar component.

### Parameters
#### Request Body
- **modelValue** (`Record<string, any>`) - Required - The form data object.
- **items** (`SearchFormItem[]`) - Required - An array of form item configurations.
- **span** (`number`) - Optional - The number of grid columns each form item occupies. Defaults to `6`.
- **gutter** (`number`) - Optional - The grid interval. Defaults to `12`.
- **labelPosition** (`'left' | 'right' | 'top'`) - Optional - The position of the label. Defaults to `'right'`.
- **labelWidth** (`string | number`) - Optional - The width of the label. Defaults to `'70px'`.
- **defaultExpanded** (`boolean`) - Optional - Whether the form is expanded by default. Defaults to `false`.
- **showExpand** (`boolean`) - Optional - Whether to display the expand/collapse button. Defaults to `true`.
- **showReset** (`boolean`) - Optional - Whether to display the reset button. Defaults to `true`.
- **showSearch** (`boolean`) - Optional - Whether to display the search button. Defaults to `true`.
- **disabledSearch** (`boolean`) - Optional - Whether to disable the search button. Defaults to `false`.
```

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

### 项目精简脚本实现 (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/lite-version

这是用于 Art Design Pro 项目的精简脚本的具体实现，以 TypeScript 编写。脚本用于清理演示页面、Mock 数据、多语言路由等内容。

```typescript
tsx scripts/clean-dev.ts
```

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

### Global Application Configuration (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/settings

This comprehensive TypeScript configuration object defines various application settings, including system information, Element Plus theme, system theme styles, theme lists, menu layout options, menu themes, dark menu styles, system primary colors, and default system settings.

```typescript
const appConfig: SystemConfig = {
  // 系统信息
  systemInfo: {
    name: "Art Design Pro", // 系统名称
  },
  // Element Plus 主题
  elementPlusTheme: {
    primary: "#5D87FF",
  },
  // 系统主题
  systemThemeStyles: {
    [SystemThemeEnum.LIGHT]: { className: "" },
    [SystemThemeEnum.DARK]: { className: SystemThemeEnum.DARK },
  },
  // 系统主题列表
  settingThemeList: [
    {
      name: "Light",
      theme: SystemThemeEnum.LIGHT,
      color: ["#fff", "#fff"],
      leftLineColor: "#EDEEF0",
      rightLineColor: "#EDEEF0",
      img: configImages.themeStyles.light,
    },
    {
      name: "Dark",
      theme: SystemThemeEnum.DARK,
      color: ["#22252A"],
      leftLineColor: "#3F4257",
      rightLineColor: "#3F4257",
      img: configImages.themeStyles.dark,
    },
    {
      name: "System",
      theme: SystemThemeEnum.AUTO,
      color: ["#fff", "#22252A"],
      leftLineColor: "#EDEEF0",
      rightLineColor: "#3F4257",
      img: configImages.themeStyles.system,
    },
  ],
  // 菜单布局列表
  menuLayoutList: [
    {
      name: "Left",
      value: MenuTypeEnum.LEFT,
      img: configImages.menuLayouts.vertical,
    },
    {
      name: "Top",
      value: MenuTypeEnum.TOP,
      img: configImages.menuLayouts.horizontal,
    },
    {
      name: "Mixed",
      value: MenuTypeEnum.TOP_LEFT,
      img: configImages.menuLayouts.mixed,
    },
    {
      name: "Dual Column",
      value: MenuTypeEnum.DUAL_MENU,
      img: configImages.menuLayouts.dualColumn,
    },
  ],
  // 菜单主题列表
  themeList: [
    {
      theme: MenuThemeEnum.DESIGN,
      background: "#FFFFFF",
      systemNameColor: "var(--art-text-gray-800)",
      iconColor: "#6B6B6B",
      textColor: "#29343D",
      textActiveColor: "#3F8CFF",
      iconActiveColor: "#333333",
      tabBarBackground: "#FAFBFC",
      systemBackground: "#FAFBFC",
      leftLineColor: "#EDEEF0",
      rightLineColor: "#EDEEF0",
      img: configImages.menuStyles.design,
    },
    {
      theme: MenuThemeEnum.DARK,
      background: "#191A23",
      systemNameColor: "#BABBBD",
      iconColor: "#BABBBD",
      textColor: "#BABBBD",
      textActiveColor: "#FFFFFF",
      iconActiveColor: "#FFFFFF",
      tabBarBackground: "#FFFFFF",
      systemBackground: "#F8F8F8",
      leftLineColor: "#3F4257",
      rightLineColor: "#EDEEF0",
      img: configImages.menuStyles.dark,
    },
    {
      theme: MenuThemeEnum.LIGHT,
      background: "#ffffff",
      systemNameColor: "#68758E",
      iconColor: "#6B6B6B",
      textColor: "#29343D",
      textActiveColor: "#3F8CFF",
      iconActiveColor: "#333333",
      tabBarBackground: "#FFFFFF",
      systemBackground: "#F8F8F8",
      leftLineColor: "#EDEEF0",
      rightLineColor: "#EDEEF0",
      img: configImages.menuStyles.light,
    },
  ],
  // 暗黑主题模式左侧菜单样式
  darkMenuStyles: [
    {
      theme: MenuThemeEnum.DARK,
      background: "#161618",
      systemNameColor: "#DDDDDD",
      iconColor: "#BABBBD",
      textColor: "rgba(#FFFFFF, 0.7)",
      textActiveColor: "",
      iconActiveColor: "#FFFFFF",
      tabBarBackground: "#FFFFFF",
      systemBackground: "#F8F8F8",
      leftLineColor: "#3F4257",
      rightLineColor: "#EDEEF0",
    },
  ],
  // 系统主色
  systemMainColor: [
    "#5D87FF",
    "#B48DF3",
    "#1D84FF",
    "#60C041",
    "#38C0FC",
    "#F9901F",
    "#FF80C8",
  ] as const,
  // 系统其他项默认配置
  systemSetting: {
    defaultMenuWidth: 240, // 菜单宽度
    defaultCustomRadius: "0.75", // 自定义圆角
    defaultTabStyle: "tab-default", // 标签样式
  },
};
```

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

### Handle Network Requests and Errors (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/must-read

Demonstrates how to make network requests using `fetchLogin` and handle potential `HttpError` exceptions. It shows how to access error codes for conditional logic.

```typescript
try {
  const { token, refreshToken } = await fetchLogin({
    userName: username,
    password,
  });
} catch (error) {
  if (error instanceof HttpError) {
    // 这里可以根据状态码进行不同的处理
    // console.log(error.code)
  }
}
```

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

### Configure System Name (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/settings

Globally replace the system name by updating the `systemInfo.name` property in the configuration file.

```typescript
const appConfig: SystemConfig = {
  systemInfo: {
    name: "Art Design Pro", // 系统名称
  },
};
```

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

### Project Commands for Linting and Formatting

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/project/standard

These commands facilitate common development tasks like checking JavaScript syntax, fixing errors, formatting code with Prettier, and linting styles with Stylelint. They are essential for maintaining code quality.

```bash
# 检查项目中的js语法
pnpm lint

# 修复项目中js语法错误
pnpm fix

# 使用 Prettier 格式化所有指定类型的文件。
pnpm lint:prettier

# 使用 Stylelint 检查和自动修复 CSS、SCSS 和 Vue 文件中的样式问题。
pnpm lint:stylelint

# 运行 lint-staged 仅检查暂存的文件，确保提交前代码质量。
pnpm lint:lint-staged

# 设置 Husky Git 钩子，用于在 Git 操作前运行脚本。
pnpm prepare

# 使用 Commitizen 规范化提交消息，确保提交格式一致。
pnpm commit
```

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

### Vite Configuration: vite.config.ts

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/project-introduce

Configuration file for Vite, a modern frontend build tool. It defines settings for development server, plugins, and production builds.

```typescript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      // Auto import functions from Vue API
      imports: [
        'vue',
        'vue-router',
        '@vueuse/core'
      ],
      // Auto import components from Element Plus
      resolvers: [
        ElementPlusResolver(),
      ],
      dts: path.resolve(__dirname, 'src/types/auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
      ],
      dts: path.resolve(__dirname, 'src/types/components.d.ts'),
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '@/assets/styles/variables.scss';`
      }
    }
  }
});
```

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

### CSS 主题主色使用 (Bash)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/theme

展示如何使用 `--main-color` 变量来应用不透明的主题主色，并提及了提供了9个不同透明度等级的主题色变量。

```bash
# 不透明的主色
color: var(--main-color);
```

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

### 配置静态路由

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/route

配置静态路由，通常用于不需要动态加载或权限控制的页面。支持配置路径、名称、组件导入和元数据。

```typescript
export const staticRoutes: AppRouteRecordRaw[] = [
  {
    path: "/test",
    name: "Test",
    component: () => import("@views/test/index.vue"),
    meta: { title: "测试页面", isHideTab: true, setTheme: true },
  },
];
```

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

### Define Menu Routes Structure (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/must-read

Illustrates the structure for defining menu routes, including layout components, meta information like titles and icons, and role-based access control. It highlights differences between backend and frontend role management.

```typescript
{
    name: 'Dashboard',
    path: '/dashboard',
    component: RoutesAlias.Layout,
    meta: {
      title: 'menus.dashboard.title',
      icon: '&#xe721;',
      roles: ['R_SUPER', 'R_ADMIN']
    },
    children: [
      {
        path: 'console',
        name: 'Console',
        component: RoutesAlias.Dashboard,
        meta: {
          title: 'menus.dashboard.console',
          keepAlive: false,
          fixedTab: true
        }
      },
    ]
  }
```

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

### Configure Permission Control Mode (.env)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/in-depth/permission

Sets the permission control mode for the application. 'frontend' uses role identifiers, while 'backend' uses menu lists for control.

```env
# Permission control mode (frontend | backend)
VITE_ACCESS_MODE=frontend
```

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

### Configure Vite Compression (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/must-read

Shows how to configure Vite's compression plugin to reduce build output size. It specifies gzip compression, file extensions, and thresholds. Default project size is around 10MB (full) or 5MB (lite), with gzip further reducing it.

```typescript
viteCompression({
  verbose: false,
  disable: false,
  algorithm: 'gzip',
  ext: '.gz',
  threshold: 10240,
  deleteOriginFile: false,
})
```

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

### CSS 主题变量示例 (Bash)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/theme

展示如何使用 Art Design Pro 项目中定义的 CSS 变量来设置文字颜色、边框颜色、背景颜色和阴影。这些变量支持 Light 和 Dark 模式。

```bash
# 文字
color: var(--art-gray-100);
color: var(--art-gray-900);

# 边框
border: 1px solid var(--art-border-color);
border: 1px solid var(--art-border-dashed-color);

# 背景颜色（白色｜黑色）
background-color: var(--art-main-bg-color);

# 阴影
box-shadow: var(--art-box-shadow);
box-shadow: var(--art-box-shadow-xs);
box-shadow: var(--art-box-shadow-sm);
box-shadow: var(--art-box-shadow-lg);
```

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

### ArtSearchBar Methods

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

Methods available to programmatically interact with the ArtSearchBar component.

```APIDOC
## ArtSearchBar Methods

### Description
Methods to control the ArtSearchBar component programmatically.

### Parameters
#### Path Parameters
- **validate** - (`() => Promise<boolean>`) - Validates the form. Returns a promise that resolves to a boolean indicating validation success.
- **reset** - (`() => void`) - Resets the form to its initial state.
```

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

### 访问自定义环境变量 (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/env-variables

演示如何在项目代码中使用 `import.meta.env` 来访问以 `VITE_` 开头的自定义环境变量。需要确保环境变量已在 .env 文件中定义。

```typescript
console.log(import.meta.env.VITE_PROT);
```

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

### 静态路由配置示例 (TypeScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/route

配置项目中的静态路由，包括根路径重定向、登录、注册、忘记密码、异常页面（403, 404, 500）等。每个路由对象包含 path, name, component, 和 meta 等属性。

```typescript
export const staticRoutes: AppRouteRecordRaw[] = [
  {
    path: "/",
    redirect: HOME_PAGE,
  },
  {
    path: RoutesAlias.Login,
    name: "Login",
    component: () => import("@views/auth/login/index.vue"),
    meta: { title: "menus.login.title", isHideTab: true, setTheme: true },
  },
  {
    path: RoutesAlias.Register,
    name: "Register",
    component: () => import("@views/auth/register/index.vue"),
    meta: {
      title: "menus.register.title",
      isHideTab: true,
      noLogin: true,
      setTheme: true,
    },
  },
  {
    path: RoutesAlias.ForgetPassword,
    name: "ForgetPassword",
    component: () => import("@views/auth/forget-password/index.vue"),
    meta: {
      title: "menus.forgetPassword.title",
      isHideTab: true,
      noLogin: true,
      setTheme: true,
    },
  },
  {
    path: "/exception",
    component: Home,
    name: "Exception",
    meta: { title: "menus.exception.title" },
    children: [
      {
        path: RoutesAlias.Exception403,
        name: "Exception403",
        component: () => import("@views/exception/403/index.vue"),
        meta: { title: "403" },
      },
      {
        path: "/:catchAll(.*)",
        name: "Exception404",
        component: () => import("@views/exception/404/index.vue"),
        meta: { title: "404" },
      },
      {
        path: RoutesAlias.Exception500,
        name: "Exception500",
        component: () => import("@views/exception/500/index.vue"),
        meta: { title: "500" },
      },
    ],
  },
];
```

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

### Standard Git Commit Workflow

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/project/standard

This sequence demonstrates the basic steps for committing code changes using Git and pnpm commit, a tool that likely enforces commit message conventions. It ensures changes are staged and committed properly.

```bash
git add .
pnpm commit

...

git push
```

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

### useTable - Basic Usage

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/hooks/use-table

Demonstrates the basic implementation of the `useTable` composable function for fetching and displaying user list data in a table.

```APIDOC
## useTable - Basic Usage

This example shows how to integrate the `useTable` composable for a simple table display of user data.

### Example Usage

```vue
<template>
  <div>
    <ArtTable
      :loading="loading"
      :data="data"
      :columns="columns"
      :pagination="pagination"
      @pagination:size-change="handleSizeChange"
      @pagination:current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable } from "@/composables/useTable";
import { fetchGetUserList } from "@/api/system-manage";

const {
  data,
  loading,
  columns,
  pagination,
  handleSizeChange,
  handleCurrentChange,
} = useTable({
  core: {
    apiFn: fetchGetUserList,
    apiParams: {
      current: 1,
      size: 20,
    },
    columnsFactory: () => [
      { prop: "id", label: "ID" },
      { prop: "name", label: "姓名" },
      { prop: "email", label: "邮箱" },
    ],
  },
});
</script>
```
```

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

### 注册多级路由

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/essentials/route

定义多级路由（菜单）的配置，包括父级路由和嵌套的子级路由。支持配置菜单标题、图标、缓存等元数据。

```typescript
export const asyncRoutes: MenuListType[] = [
  {
    name: "Form",
    path: "/form",
    component: RoutesAlias.Layout,
    meta: {
      title: "表单",
      icon: "&#xe721;",
      keepAlive: false,
    },
    children: [
      {
        path: "basic",
        name: "Basic",
        component: "/form/basic",
        meta: {
          title: "基础表单",
          keepAlive: true,
        },
      },
      {
        path: "step",
        name: "Step",
        component: "/form/step",
        meta: {
          title: "分步表单",
          keepAlive: true,
        },
      },
    ],
  },
];
```

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

### Select and Cascader Control Types for ArtSearchBar (JavaScript)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

Illustrates the configuration for select, cascader, and tree-select components within ArtSearchBar, showing how to define options and props for these selection controls.

```javascript
// 下拉选择
{
  label: '状态',
  key: 'status',
  type: 'select',
  props: {
    options: [
      { label: '启用', value: '1' },
      { label: '禁用', value: '0' }
    ]
  }
}

// 级联选择器
{
  label: '地区',
  key: 'region',
  type: 'cascader',
  props: {
    options: cascaderOptions,
    props: { multiple: true }
  }
}

// 树选择器
{
  label: '部门',
  key: 'department',
  type: 'treeselect',
  props: {
    data: treeData,
    multiple: true,
    showCheckbox: true
  }
}
```

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

### useTable API Reference - Configuration Options

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/hooks/use-table

Detailed reference for the configuration options available for the `useTable` composable, categorized into core, transform, performance, and hooks.

```APIDOC
## useTable API Reference

### Configuration Options

#### core (Core Configuration)

| Parameter | Type | Default Value | Description |
|---|---|---|---|
| `apiFn` | `Function` | - | **Required**, API request function |
| `apiParams` | `Object` | `{}` | Default request parameters |
| `excludeParams` | `Array` | `[]` | Excluded parameter fields |
| `immediate` | `Boolean` | `true` | Whether to load data immediately |
| `columnsFactory` | `Function` | - | Column configuration factory function |
| `paginationKey` | `Object` | `{current: 'current', size: 'size'}` | Pagination field mapping |

#### transform (Data Transformation)

| Parameter | Type | Default Value | Description |
|---|---|---|---|
| `dataTransformer` | `Function` | - | Data transformation function |
| `responseAdapter` | `Function` | `defaultResponseAdapter` | Response data adapter |

#### performance (Performance Optimization)

| Parameter | Type | Default Value | Description |
|---|---|---|---|
| `enableCache` | `Boolean` | `false` | Whether to enable cache |
| `cacheTime` | `Number` | `300000` | Cache time (milliseconds) |
| `debounceTime` | `Number` | `300` | Debounce delay (milliseconds) |
| `maxCacheSize` | `Number` | `50` | Maximum cache count |

#### hooks (Lifecycle Hooks)

| Parameter | Type | Description |
|---|---|---|
| `onSuccess` | `Function` | Callback for successful data loading |
| `onError` | `Function` | Callback for error handling |
| `onCacheHit` | `Function` | Callback for cache hit |
| `resetFormCallback` | `Function` | Callback for resetting form |
```

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

### SearchFormItem Configuration

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/components/art-search-bar

Defines the structure and properties for individual form items within ArtSearchBar.

```APIDOC
## SearchFormItem Configuration

### Description
Configuration options for individual form items.

### Parameters
#### Request Body
- **key** (`string`) - Required - Unique identifier for the form item.
- **label** (`string`) - Required - The label text for the form item.
- **type** (`string | (() => VNode)`) - Optional - The type of form item (e.g., 'input', 'select'). Defaults to `'input'`.
- **hidden** (`boolean`) - Optional - Whether to hide the form item. Defaults to `false`.
- **span** (`number`) - Optional - The number of grid columns this form item occupies.
- **labelWidth** (`string | number`) - Optional - The width of the label for this item.
- **placeholder** (`string`) - Optional - The placeholder text for the input.
- **props** (`Record<string, any>`) - Optional - Properties to be passed to the underlying component.
- **slots** (`Record<string, () => any>`) - Optional - Slot configurations for custom content.
```

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

### Backend Menu-Based Route Configuration (asyncRoutes.ts)

Source: https://www.lingchen.kim/art-design-pro/docs/zh/guide/in-depth/permission

Defines routes based on a menu structure provided by the backend. The structure includes menu items and their properties for dynamic routing.

```typescript
[
  {
    id: 4,
    path: "/system",
    name: "System",
    component: RoutesAlias.Layout,
    meta: {
      title: "menus.system.title",
      icon: "",
      keepAlive: false,
    },
    children: [
      {
        id: 41,
        path: "user",
        name: "User",
        component: RoutesAlias.User,
        meta: {
          title: "menus.system.user",
          keepAlive: true,
        },
      },
      {
        id: 42,
        path: "role",
        name: "Role",
        component: RoutesAlias.Role,
        meta: {
          title: "menus.system.role",
          keepAlive: true,
        },
      },
    ],
  },
];
```