### Vue ArtSearchBar Full Example with Props, Events, and Slots

Source: https://www.artd.pro/docs/zh/guide/components/art-search-bar

A comprehensive example of the ArtSearchBar component in a Vue application. It includes data binding, item configuration, validation rules, event handlers for search and reset, and custom slot usage. This example illustrates advanced features and integration.

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

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

### Installing Offline Icon Packages (Bash)

Source: https://www.artd.pro/docs/zh/guide/essentials/icon

Provides bash commands to install offline icon packages for Iconify. It shows how to install the essential Remix Icon package and optional packages for other icon sets, as well as a command to install all available icon sets.

```bash
# Install Remix Icon (system required)
pnpm add -D @iconify-json/ri

# Install other icon sets (optional)
pnpm add -D @iconify-json/svg-spinners
pnpm add -D @iconify-json/line-md

# Or install all icon sets at once (large size, not recommended)
pnpm add -D @iconify/json
```

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

### Basic useTable Usage with Vue 3

Source: https://www.artd.pro/docs/zh/guide/hooks/use-table

Basic example demonstrating how to set up useTable composable with a simple configuration. Shows template structure with ArtTable component and script setup with minimal configuration including API function, pagination, and column definitions.

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

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

### Plain Text - Vite Dependency Optimization Prompt

Source: https://www.artd.pro/docs/zh/guide/must-read

Example log message from the Vite development server indicating that new dependencies have been optimized. This often occurs when using specific modules or styles from component libraries for the first time.

```plaintext
[vite] new dependencies optimized: element-plus/es/components/tooltip/style/index
```

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

### Project Structure for Internationalization

Source: https://www.artd.pro/docs/zh/guide/in-depth/locale

This structure outlines the organization of language files within the project. It includes a configuration file and a directory for locale messages, with separate JSON files for each language.

```bash
├── language
│   ├── index.ts      // Configuration file
│   └── locales       // Language pack directory
│       ├── zh.json   // Chinese pack
│       └── en.json   // English pack
```

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

### Basic Table Setup

Source: https://www.artd.pro/docs/zh/guide/hooks/use-table

Initializes a basic table with data fetching capabilities using the useTable composable. It requires an API function and a columns factory for basic data display.

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

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

### HTML: Responsive Design with Tailwind Prefixes

Source: https://www.artd.pro/docs/zh/guide/essentials/theme

Illustrates how to implement responsive design using Tailwind CSS's utility prefixes. Examples show adjusting text size for different screen sizes and changing layout direction from column to row.

```html
<!-- 移动端优先 -->
<div class="text-sm md:text-base lg:text-lg">响应式文字大小</div>

<!-- 不同屏幕下的布局 -->
<div class="flex-col md:flex-row">响应式布局</div>
```

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

### ArtSearchBar Dynamic Configuration Update JavaScript

Source: https://www.artd.pro/docs/zh/guide/components/art-search-bar

Demonstrates updating the configuration of a form item dynamically. This example shows how to change properties like the label or placeholder of an existing form item by updating its reference.

```javascript
const userNameItem = ref({
  label: "用户名",
  key: "name",
  type: "input",
  placeholder: "请输入用户名",
});

// 动态修改配置
const updateUserNameConfig = () => {
  userNameItem.value = {
    ...userNameItem.value,
    label: "昵称",
    placeholder: "请输入昵称",
  };
};
```

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

### Advanced useTable Configuration with TypeScript

Source: https://www.artd.pro/docs/zh/guide/hooks/use-table

Comprehensive example showing advanced useTable setup including data transformation, caching configuration, debouncing, lifecycle hooks, search functionality, and CRUD operations with different refresh strategies. Demonstrates full API with type safety and error handling.

```typescript
<script setup lang="ts">
import { useTable, CacheInvalidationStrategy } from "@/composables/useTable";

const {
  // 数据相关
  data,
  loading,
  error,
  hasData,

  // 分页相关
  pagination,
  handleSizeChange,
  handleCurrentChange,

  // 搜索相关
  searchParams,
  resetSearchParams,

  // 数据操作
  getData,
  getDataDebounced,
  clearData,

  // 刷新策略
  refreshData,
  refreshSoft,
  refreshCreate,
  refreshUpdate,
  refreshRemove,

  // 缓存控制
  cacheInfo,
  clearCache,
  clearExpiredCache,

  // 列配置
  columns,
  columnChecks,
  addColumn,
  removeColumn,
  toggleColumn,
} = useTable<UserListItem>({
  // 核心配置
  core: {
    apiFn: UserService.fetchGetUserList,
    apiParams: {
      current: 1,
      size: 20,
      name: "",
      status: "",
    },
    excludeParams: ["daterange"],
    immediate: true,
    columnsFactory: () => [
      { prop: "name", label: "姓名", sortable: true },
      { prop: "email", label: "邮箱" },
      { prop: "status", label: "状态", useSlot: true },
    ],
  },

  // 数据处理
  transform: {
    dataTransformer: (records) => {
      return records.map((item) => ({
        ...item,
        statusText: item.status === 1 ? "激活" : "禁用",
      }));
    },
  },

  // 性能优化
  performance: {
    enableCache: true,
    cacheTime: 5 * 60 * 1000, // 5分钟
    debounceTime: 300,
    maxCacheSize: 100,
  },

  // 生命周期钩子
  hooks: {
    onSuccess: (data, response) => {
      console.log("数据加载成功:", data.length);
    },
    onError: (error) => {
      console.error("加载失败:", error.message);
    },
    onCacheHit: (data, response) => {
      console.log("缓存命中:", data.length);
    },
  },
});

// 搜索功能
const handleSearch = () => {
  Object.assign(searchParams, {
    name: "John",
    status: 1,
  });
  getData();
};

// CRUD 操作后的刷新
const handleAdd = () => {
  // 新增后回到第一页
  refreshCreate();
};

const handleEdit = () => {
  // 编辑后保持当前页
  refreshUpdate();
};

const handleDelete = () => {
  // 删除后智能处理页码
  refreshRemove();
};
</script>
```

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

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

Source: https://www.artd.pro/docs/zh/guide/in-depth/permission

Example of defining menu structure in `asyncRoutes.ts` used by the backend control mode. This structure is mirrored by the data returned from the backend. Front-end dynamically registers routes based on this data.

```typescript
[
  {
    id: 4,
    path: "/system",
    name: "System",
    component: "/index/index",
    meta: {
      title: "menus.system.title",
      icon: "ri:user-3-line",
      keepAlive: false,
    },
    children: [
      {
        id: 41,
        path: "user",
        name: "User",
        component: "/system/user",
        meta: {
          title: "menus.system.user",
          keepAlive: true,
        },
      },
      {
        id: 42,
        path: "role",
        name: "Role",
        component: "/system/role",
        meta: {
          title: "menus.system.role",
          keepAlive: true,
        },
      },
    ],
  },
]
```

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

### Using Iconfont Unicode (HTML)

Source: https://www.artd.pro/docs/zh/guide/essentials/icon

Example of how to use an icon from the Iconfont library by its Unicode value. This method involves using an `<i>` tag with the `iconfont-sys` class and the specific Unicode character.

```html
<i class="iconfont-sys">&#xe649;</i>
```

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

### Create New Page Component - Vue

Source: https://www.artd.pro/docs/zh/guide/essentials/route

Create a new Vue single-file component in the /src/views/ directory structure. The example creates a page at /src/views/safeguard/Server.vue with a page-content class that automatically fills remaining screen height.

```vue
<template>
  <div class="page-content">
    <h1>test page</h1>
  </div>
</template>
```

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

### Project Management and Automation Commands

Source: https://www.artd.pro/docs/zh/guide/project/standard

A collection of common pnpm commands used within the Art Design Pro project for code quality checks, formatting, and automation setup. These commands leverage tools like ESLint, Prettier, Stylelint, lint-staged, Husky, and Commitizen to streamline the development workflow.

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

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

### TypeScript: Theme Color Utility Functions

Source: https://www.artd.pro/docs/zh/guide/essentials/theme

Provides examples of using various color utility functions from `src/utils/ui/colors.ts`. These include conversions (hex to RGBA/RGB), transformations (lighten/darken), and blending colors.

```typescript
import {
  hexToRgba, // Hex 转 RGBA
  hexToRgb, // Hex 转 RGB
  rgbToHex, // RGB 转 Hex
  getLightColor, // 生成变浅的颜色
  getDarkColor, // 生成变深的颜色
  colourBlend, // 颜色混合
} from "@/utils/ui/colors";

// 生成变浅的颜色
const lightColor = getLightColor("#5D87FF", 0.3);

// 生成变深的颜色
const darkColor = getDarkColor("#5D87FF", 0.3);

// 颜色混合
const blendedColor = colourBlend("#5D87FF", "#FFFFFF", 0.5);
```

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

### TypeScript - Extending Table Pagination Configuration

Source: https://www.artd.pro/docs/zh/guide/must-read

Provides an example of how to extend the `recordFields` array in `tableConfig.ts` to include custom field names returned by the backend for list data.

```typescript
recordFields: ["list", "data", "records", "items", "yourCustomField"];
```

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

### Frontend Role-Based Routing Configuration (asyncRoutes.ts)

Source: https://www.artd.pro/docs/zh/guide/in-depth/permission

Example of defining routes in `asyncRoutes.ts` for the frontend control mode. Each route can specify allowed roles in its `meta.roles` field, restricting access to users with matching roles. Routes without `roles` are accessible to all users.

```typescript
[
  {
    id: 4,
    path: "/system",
    name: "System",
    component: "/index/index",
    meta: {
      title: "menus.system.title",
      icon: "ri:user-3-line",
      keepAlive: false,
    },
    children: [
      // 仅 R_SUPER 和 R_ADMIN 角色可访问
      {
        id: 41,
        path: "user",
        name: "User",
        component: "/system/user",
        meta: {
          title: "menus.system.user",
          keepAlive: true,
          roles: ["R_SUPER", "R_ADMIN"],
        },
      },
      // 未设置 roles，所有用户可访问
      {
        id: 42,
        path: "role",
        name: "Role",
        component: "/system/role",
        meta: {
          title: "menus.system.role",
          keepAlive: true,
        },
      },
    ],
  },
]
```

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

### Button Permissions with `hasAuth` Composable (Vue)

Source: https://www.artd.pro/docs/zh/guide/in-depth/permission

This example demonstrates how to implement button-level permissions using the `hasAuth` composable. It requires importing `useAuth` and checking permissions before rendering buttons. This method is applicable in both frontend and backend control modes.

```typescript
import { useAuth } from "@/composables/useAuth";
const { hasAuth } = useAuth();
```

```vue
<ElButton v-if="hasAuth('add')">添加</ElButton>
```

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

### ArtSearchBar Other Control Types JavaScript

Source: https://www.artd.pro/docs/zh/guide/components/art-search-bar

Provides examples for miscellaneous form controls supported by ArtSearchBar, including switches, radio button groups, checkbox groups, rating components, and sliders. It shows how to define options and configure specific behaviors.

```javascript
// 开关
{
  label: '是否启用',
  key: 'enabled',
  type: 'switch'
}

// 单选框组
{
  label: '性别',
  key: 'gender',
  type: 'radiogroup',
  props: {
    options: [
      { label: '男', value: '1' },
      { label: '女', value: '2' }
    ]
  }
}

// 复选框组
{
  label: '兴趣爱好',
  key: 'hobbies',
  type: 'checkboxgroup',
  props: {
    options: [
      { label: '读书', value: 'reading' },
      { label: '运动', value: 'sports' }
    ]
  }
}

// 评分
{
  label: '评分',
  key: 'rating',
  type: 'rate'
}

// 滑块
{
  label: '价格区间',
  key: 'priceRange',
  type: 'slider',
  props: {
    range: true,
    max: 1000
  }
}
```

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

### Button Permissions using `v-auth` Directive (Backend Mode)

Source: https://www.artd.pro/docs/zh/guide/in-depth/permission

Configuration example for the `v-auth` custom directive, used in backend control mode. The `authList` in route meta defines buttons with their `authMark`. The directive checks if the user has the required permission mark to display the button.

```typescript
[
  {
    id: 44,
    path: "menu",
    name: "Menus",
    component: "/system/menu",
    meta: {
      title: "menus.system.menu",
      keepAlive: true,
      authList: [
        { id: 441, title: "新增", authMark: "add" },
        { id: 442, title: "编辑", authMark: "edit" },
      ],
    },
  },
]
```

```vue
<ElButton v-auth="'add'">添加</ElButton>
```

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

### HTML: Best Practice - Leverage Utility Class Combinations

Source: https://www.artd.pro/docs/zh/guide/essentials/theme

Demonstrates the efficient use of pre-defined utility class combinations provided by the framework. It compares the recommended approach of using composite classes like `flex-cb` with redundantly writing out individual classes.

```html
<!-- ✅ 推荐 - 使用预定义的组合类 -->
<div class="flex-cb tad-300">
  <!-- ❌ 不推荐 - 重复写完整的类 -->
  <div
    class="flex items-center justify-between transition-all duration-300"
  ></div>
</div>
```

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

### Getting the Current Language in Vue

Source: https://www.artd.pro/docs/zh/guide/in-depth/locale

Shows how to retrieve the currently active language in a Vue component using the `useI18n` composable from vue-i18n. This is useful for conditional logic or displaying language-specific information.

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

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

### Configuring Multiple Languages in Vue

Source: https://www.artd.pro/docs/zh/guide/in-depth/locale

Provides a comprehensive example of how to configure vue-i18n for multiple languages. It involves creating an i18n instance, defining the default locale, enabling global injection, and merging 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, // Set language type
  legacy: false, // Must be false to support composition API;
  globalInjection: true, // Globally register $t method
  fallbackLocale: LanguageEnum.ZH, // Set fallback language
  messages: {
    en,
    zh,
  },
});

export default lang;
```

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

### TypeScript: Use useTheme Hook for Theme Switching

Source: https://www.artd.pro/docs/zh/guide/essentials/theme

Illustrates how to switch application themes using the `useTheme` hook. It imports necessary components and enums, then demonstrates switching to dark, light, and auto (system-following) themes.

```typescript
import { useTheme } from "@/hooks/core/useTheme";
import { SystemThemeEnum } from "@/enums/appEnum";

const { switchThemeStyles } = useTheme();

// 切换到暗色主题
switchThemeStyles(SystemThemeEnum.DARK);

// 切换到亮色主题
switchThemeStyles(SystemThemeEnum.LIGHT);

// 切换到自动模式（跟随系统）
switchThemeStyles(SystemThemeEnum.AUTO);
```

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

### Global System Configuration - TypeScript

Source: https://www.artd.pro/docs/zh/guide/essentials/settings

This TypeScript code block outlines global application configurations. It includes settings for system information (like name), system theme styles, available theme list options, menu layout preferences, menu theme styles, and primary system colors. These settings are defined in `src/config/index.ts`.

```typescript
const appConfig: SystemConfig = {
  // 系统信息
  systemInfo: {
    name: "Art Design Pro", // 系统名称
  },
  // 系统主题
  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",
    "#1D8FF",
    "#60C041",
    "#38C0FC",
    "#F9901F",
    "#FF80C8",
  ] as const,
};
```

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

### Vue ArtSearchBar Basic Configuration

Source: https://www.artd.pro/docs/zh/guide/components/art-search-bar

Demonstrates the basic usage of the ArtSearchBar component with model binding and item configuration. It showcases how to pass form data and item definitions to the component.

```vue
<ArtSearchBar
  v-model="formData"
  :items="formItems"
  label-position="top"
  :label-width="120"
/>
```

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

### Environment Variables - Switching Access Mode

Source: https://www.artd.pro/docs/zh/guide/must-read

Configuration for switching between frontend and backend modes for menu access control. This is set in the `.env` file using the `VITE_ACCESS_MODE` variable.

```env
# 权限模式【 frontend 前端模式 / backend 后端模式 】
VITE_ACCESS_MODE = backend
```

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

### TypeScript - Fetching Login Data and Error Handling

Source: https://www.artd.pro/docs/zh/guide/must-read

Demonstrates how to make an API request for login credentials and handle potential `HttpError` exceptions. The code shows extracting `token` and `refreshToken` and conditionally logging error codes.

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

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

### Using Translations in Vue Templates

Source: https://www.artd.pro/docs/zh/guide/in-depth/locale

Demonstrates how to display translated strings within Vue templates using the `$t` function provided by vue-i18n. This allows for dynamic content based on the selected language.

```html
<p>{{ $t('setting.color.title') }}</p>
```

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

### Extended Tailwind Other Utility Classes - HTML

Source: https://www.artd.pro/docs/zh/guide/essentials/theme

Provides an example of a custom Tailwind CSS utility class for changing the cursor to a pointer, commonly used for interactive elements like buttons or links.

```html
<div class="c-p"><!-- cursor-pointer --></div>
```

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

### HTML: Best Practice - Prefer Tailwind Utility Classes

Source: https://www.artd.pro/docs/zh/guide/essentials/theme

Contrasts the recommended approach of using Tailwind utility classes with the discouraged method of inline styles. It emphasizes maintainability and consistency by leveraging the framework's predefined classes.

```html
<!-- ✅ 推荐 -->
<div class="flex items-center gap-4 p-4 bg-box rounded-lg">
  <!-- ❌ 不推荐 -->
  <div style="display: flex; align-items: center; gap: 1rem;"></div>
</div>
```

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

### Search Table Configuration

Source: https://www.artd.pro/docs/zh/guide/hooks/use-table

Configures a table with search functionality. It allows defining initial search parameters and provides methods to get data and reset search parameters. A debounce time can be set for the search input.

```typescript
const { searchParams, getData, resetSearchParams } = useTable({
  core: {
    apiFn: fetchGetUserList,
    apiParams: { name: "", status: "" },
  },
  performance: {
    debounceTime: 500, // 搜索防抖
  },
});

// 搜索
const handleSearch = () => {
  Object.assign(searchParams, formData);
  getData();
};
```

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

### Styling Icons with Tailwind CSS Classes (Vue)

Source: https://www.artd.pro/docs/zh/guide/essentials/icon

Illustrates how to customize the appearance of icons rendered by the ArtSvgIcon component using Tailwind CSS utility classes. Examples cover controlling size and color, including theme-specific colors.

```vue
<!-- Size control -->
<ArtSvgIcon icon="ri:home-line" class="text-sm" />
<!-- Small -->
<ArtSvgIcon icon="ri:home-line" class="text-base" />
<!-- Default -->
<ArtSvgIcon icon="ri:home-line" class="text-2xl" />
<!-- Large -->
<ArtSvgIcon icon="ri:home-line" class="text-4xl" />
<!-- Extra large -->

<!-- Color control -->
<ArtSvgIcon icon="ri:heart-fill" class="text-red-500" />
<ArtSvgIcon icon="ri:star-fill" class="text-yellow-500" />
<ArtSvgIcon icon="ri:check-line" class="text-green-500" />
<ArtSvgIcon icon="ri:close-line" class="text-gray-500" />

<!-- Theme colors -->
<ArtSvgIcon icon="ri:home-line" class="text-theme" />
<ArtSvgIcon icon="ri:user-line" class="text-primary" />
<ArtSvgIcon icon="ri:settings-line" class="text-secondary" />
```

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

### Configure Home Page Path (TypeScript)

Source: https://www.artd.pro/docs/zh/guide/essentials/route

Defines the path for the application's home page by setting the `HOME_PAGE_PATH` constant in `src/router/index.ts`. If left empty, the system defaults to the first valid path from the menu configuration.

```typescript
export const HOME_PAGE_PATH = "";
```

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

### HTML - Correct Root Element Structure for Transitions

Source: https://www.artd.pro/docs/zh/guide/must-read

Demonstrates the correct way to structure an HTML template for Vue components using the `<Transition>` component. All content, including comments, must be wrapped within a single root element to avoid issues.

```html
<template>
  <div>
    <!-- Comments placed inside the root element -->
    <div>Content 1</div>
    <span>Content 2</span>
  </div>
</template>

```

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

### Configure Access Control Mode (.env)

Source: https://www.artd.pro/docs/zh/guide/in-depth/permission

This snippet shows how to configure the permission control mode in the `.env` file. The `VITE_ACCESS_MODE` variable can be set to 'frontend' for client-side control or 'backend' for server-side control.

```env
# 权限控制模式（frontend | backend）
VITE_ACCESS_MODE=frontend
```

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

### ArtSearchBar Basic Usage Vue

Source: https://www.artd.pro/docs/zh/guide/components/art-search-bar

Demonstrates the fundamental implementation of the ArtSearchBar component in Vue. It includes setting up form data, defining form items with labels, keys, and types, and handling search and reset events.

```vue
<template>
  <ArtSearchBar
    v-model="formData"
    :items="formItems"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script setup>
const formData = ref({
  name: "",
  status: "",
});

const formItems = [
  {
    label: "用户名",
    key: "name",
    type: "input",
    placeholder: "请输入用户名",
  },
  {
    label: "状态",
    key: "status",
    type: "select",
    props: {
      options: [
        { label: "启用", value: "1" },
        { label: "禁用", value: "0" },
      ],
    },
  },
];

const handleSearch = () => {
  console.log("搜索参数:", formData.value);
};

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

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

### Configure Static Routes with Multiple Pages - TypeScript

Source: https://www.artd.pro/docs/zh/guide/essentials/route

Define static routes including authentication pages (login, register, forgot password) and error pages (403, 404, 500). Each route specifies a lazy-loaded component and metadata such as title and tab visibility. This configuration is stored in src/router/routes/staticRoutes.ts.

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

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

### CRUD Operations Table Setup

Source: https://www.artd.pro/docs/zh/guide/hooks/use-table

Sets up a table for full CRUD (Create, Read, Update, Delete) operations. It exposes specific refresh methods to handle data changes and maintain the correct table state after additions, edits, or deletions.

```typescript
const { refreshCreate, refreshUpdate, refreshRemove } = useTable({
  core: {
    apiFn: fetchGetUserList,
  },
});

// 新增用户后
const handleAddUser = async () => {
  await addUser(userData);
  refreshCreate(); // 回到第一页
};

// 编辑用户后
const handleEditUser = async () => {
  await updateUser(userData);
  refreshUpdate(); // 保持当前页
};

// 删除用户后
const handleDeleteUser = async () => {
  await deleteUser(userId);
  refreshRemove(); // 智能处理页码
};
```

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

### TypeScript - Vite Configuration for Dependency Optimization

Source: https://www.artd.pro/docs/zh/guide/must-read

Shows how to configure `optimizeDeps.include` in `vite.config.ts` to prevent unnecessary page refreshes during development. This is typically done when Vite pre-builds dependencies like component library styles.

```typescript
export default defineConfig({
  optimizeDeps: {
    include: [
      "element-plus/es/components/tooltip/style/index",
      "element-plus/es/components/message/style/index",
      // Add other dependencies based on console prompts
    ],
  },
});

```

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

### Using Iconfont Font Class (HTML)

Source: https://www.artd.pro/docs/zh/guide/essentials/icon

Demonstrates how to use an icon from the Iconfont library via its font class. This involves applying both the base `iconfont-sys` class and a specific icon class to an `<i>` tag.

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

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

### ArtSearchBar Custom Slot Usage Vue

Source: https://www.artd.pro/docs/zh/guide/components/art-search-bar

Demonstrates using slots to render custom content within ArtSearchBar form items. This example shows how to define a slot and access item data and the model value for custom rendering, like a customized input field.

```vue
<template>
  <ArtSearchBar v-model="formData" :items="formItems">
    <template #customSlot="{ item, modelValue }">
      <el-input
        v-model="modelValue[item.key]"
        placeholder="我是插槽渲染的组件"
      />
    </template>
  </ArtSearchBar>
</template>

<script setup>
const formItems = [
  {
    label: "自定义插槽",
    key: "customSlot",
    type: "input", // 这里的type会被插槽覆盖
  },
];
</script>
```

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

### Common Environment Variables for All Environments (.env)

Source: https://www.artd.pro/docs/zh/guide/essentials/env-variables

Defines common environment variables applicable across all environments. These are typically used for general application settings like version, port, base URL, and access mode.

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

#  版本号
VITE_VERSION = 2.4.1.1

# 端口号
VITE_PORT = 3006

# 网站地址前缀
VITE_BASE_URL = /

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

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

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

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

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

### TypeScript - Frontend Menu Configuration with Roles

Source: https://www.artd.pro/docs/zh/guide/must-read

Shows the structure for menu items in frontend mode, where access is controlled by a `roles` array within the `meta` object. Only users with matching roles can access these menus.

```typescript
{
  name: 'Dashboard',
  path: '/dashboard',
  component: "/index/index",
  meta: {
    title: 'menus.dashboard.title',
    icon: 'ri:pie-chart-line',
    roles: ['R_SUPER', 'R_ADMIN'] // Only these roles can access
  }
}
```

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

### Configure Embedded Iframe Page (TypeScript)

Source: https://www.artd.pro/docs/zh/guide/essentials/route

Example of configuring a route to embed an external web page using an iframe. The `meta` object includes `link` for the external URL and `isIframe: true` to indicate it's an embedded page. 'component' is often left empty for iframe routes.

```typescript
{
  path: '/outside/iframe/elementui',
  name: 'ElementUI',
  component: '',
  meta: {
    title: 'menus.widgets.elementUI',
    keepAlive: false,
    link: 'https://element-plus.org/zh-CN/component/overview.html',
    isIframe: true
  }
}
```

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

### CSS: Best Practice - Use CSS Variables for Consistency

Source: https://www.artd.pro/docs/zh/guide/essentials/theme

Highlights the importance of using CSS variables for maintaining consistency and enabling theme adaptability. It shows the recommended use of variables like `--art-gray-900` versus hardcoded color values.

```css
/* ✅ 推荐 - 自动适配主题 */
.my-component {
  color: var(--art-gray-900);
  background: var(--default-box-color);
}

/* ❌ 不推荐 - 硬编码颜色 */
.my-component {
  color: #323251;
  background: #ffffff;
}
```

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

### Button Permissions using `v-roles` Directive

Source: https://www.artd.pro/docs/zh/guide/in-depth/permission

Example of using the `v-roles` custom directive to control button visibility based on user roles. The directive accepts a single role string or an array of roles, displaying the button only if the user possesses at least one of the specified roles.

```typescript
{
    "userId": "1",
    "userName": "Super",
    "roles": [
        "R_SUPER"
    ],
    "buttons": [
        "B_CODE1",
        "B_CODE2",
        "B_CODE3"
    ]
}
```

```vue
<el-button v-roles="['R_SUPER', 'R_ADMIN']">按钮</el-button>
<el-button v-roles="'R_ADMIN'">按钮</el-button>
```