### Teek Design Vue3 - Getting Started Guide

Source: https://vue3-design-docs.teek.top/guide

Provides an introduction to Teek's technology and background, instructions for downloading, installing, and running Teek, and an overview of the project's directory structure.

```markdown
# 指南 
## 开始指南 
介绍：介绍 Teek 的技术、背景。
快速开始：介绍如何下载、安装、运行 Teek。
目录结构：介绍 Teek 的目录结构，让开发者对项目结构有一个清晰的认知。
```

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

### Install Iconify Ant Design Icons

Source: https://vue3-design-docs.teek.top/guide/05.basic/35

Installs the Ant Design icon set from Iconify using pnpm.

```bash
pnpm add @iconify-icons/ant-design
```

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

### Vue3 ProTable Usage Examples

Source: https://vue3-design-docs.teek.top/ecosystem/components/01.pro-table/01

Provides code examples demonstrating how to use the Vue3 ProTable component's attributes and events in both template and setup contexts. This includes examples for handling selection and other common interactions.

```HTML
<ProTable :stripe="true" :border="true" :fit="false" />
```

```TypeScript
const handleSelect = (selection: any[], row: any) => {
  console.log(selection, row);
};
const handleSelectAll = (selection: any[]) => {
  console.log(selection);
};
```

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

### Example Route with Roles

Source: https://vue3-design-docs.teek.top/structure/01

An example of a route configuration object, demonstrating how to specify roles for access control using the `meta.roles` property.

```javascript
const permissionRoutes = {
  path: "/role",
  component: () => import("@/views/permission/rolePermission.vue"),
  name: "RolePermission",
  meta: {
    title: "权限编辑",
    roles: ["admin"],
  },
};
```

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

### Example Backend Route Structure

Source: https://vue3-design-docs.teek.top/structure/01

An example of how routes might be structured when received from a backend API.

```json
[
  {
    "menuUrl": "/components",
    "menuCode": "Components",
    "menuName": "组件",
    "parentMenuCode": "", // 代表一级菜单
    "imageIcon": "Opportunity",
    "sel": 1
  },
  {
    "menuUrl": "message",
    "menuCode": "MessageDemo",
    "pagePath": "/components/message/index",
    "menuName": "消息组件",
    "parentMenuCode": "Components", // 和上面的 menuCode 关联
    "imageIcon": "StarFilled",
    "sel": 2
  }
]
```

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

### Example Usage of Icon Component with Size

Source: https://vue3-design-docs.teek.top/guide/05.basic/35

Demonstrates using the Icon component with a specified size prop.

```vue
<Icon icon="IF-icon-dagouyouquan" :size="200" />
```

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

### Install Iconify Icons Package

Source: https://vue3-design-docs.teek.top/guide/05.basic/35

Command to install Iconify icons as a package using pnpm. The package name follows the convention '@iconify-icons/{name}' or '@iconify/icons-{name}'.

```sh
pnpm add @iconify-icons/ant-design -d
```

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

### Manual Ref Import Example

Source: https://vue3-design-docs.teek.top/guide/10.advanced/15

Shows the traditional way of importing `ref` from Vue, contrasted with the auto-import feature.

```vue
<script setup lang="ts" name="App">
import { ref } from "vue";
const isOpen = ref(true);
</script>
```

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

### Using Iconify Icons from Package

Source: https://vue3-design-docs.teek.top/guide/05.basic/35

Demonstrates how to import and use an Iconify icon directly from an installed package with the Teek Icon component.

```vue
<script setup>
import Upload from "@iconify-icons/ant-design/upload";
</script>
<Icon :icon="Upload" />
```

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

### Syncing Latest Code

Source: https://vue3-design-docs.teek.top/guide/40.develop/05

Provides the Git commands to synchronize your local repository with the latest changes from the upstream Teek Design Vue3 repository.

```sh
# Add the main repository to remote
git remote add upstream https://github.com/Kele-Bingtang/teek-design-vue3.git
# Fetch the latest code from the main repository
git fetch upstream
# Switch to the dev branch
git checkout dev
# Merge the main repository's code
git merge upstream/dev
```

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

### Project Structure and Configuration Files

Source: https://vue3-design-docs.teek.top/guide/01.start/10

Overview of the project's directory structure and key configuration files. This includes mock data, Pinia for state management, routing, global TypeScript types, and business logic views. It also details configuration files for editors, environment variables, Git, Prettier, Stylelint, versioning, commit linting, ESLint, HTML entry point, license, package management, PostCSS, README, TypeScript, and Vite.

```en
├── mock
├── pinia
├── router
├── types
└── views

├── .editorconfig
├── .env
├── .env.development
├── .env.production
├── .env.test
├── .eslintrc-globals
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── .stylelintignore
├── .stylelintrc.js
├── .versionrc
├── CHANGELOG.md
├── commitlint.config.js
├── eslint.config.js
├── index.html
├── LICENSE
├── package.json
├── postcss.config.js
├── README.md
├── tsconfig.json
└── vite.config.ts
```

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

### Teek Design Vue3 Introduction

Source: https://vue3-design-docs.teek.top/guide/01.start/01

Introduction to Teek, a backend management system solution built with Vue3, TypeScript, Vite, and ElementPlus. It highlights the project's goal of providing a best-practice framework for enterprise development, emphasizing its modern tech stack, efficient development experience, and integration with Pinia and ElementPlus.

```Markdown
# 介绍 
## 关于 Teek 
Teek 是一个基于 Vue3、TypeScript、Vite、ElementPlus 构建的颜值强大、功能丰富、开箱即用的中后台管理系统解决方案，专为开发者打造。它不仅是一个前端框架，更是一整套企业级开发的最佳实践集合。无论您是想要快速搭建管理系统原型，还是构建复杂的企业应用，Teek 都能为您提供强有力的支持。
Teek 采用 `Vue3 Composition API` 设计模式，结合 `TypeScript` 强类型系统，确保代码质量和开发效率。通过 Vite 构建工具，项目拥有极快的冷启动和热更新速度，显著提升开发体验。基于现代化的前端技术栈，Teek 还集成了 `Pinia` 状态管理库，替代传统的 `Vuex`，提供更简洁高效的 `API`。
此外，Teek 集成 `ElementPlus` UI 组件库，继承了其成熟的设计理念和丰富的组件体系，并进行了现代化 UI 升级，丰富用户界面。
```

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

### Vue 3 ProFormSteps Example

Source: https://vue3-design-docs.teek.top/ecosystem/components/25

A Vue 3 script setup example demonstrating the usage of the ProFormSteps component. It defines the form structure for multiple steps, including input fields, validation rules, and custom slot content. The `next` function handles step transitions and logs form data.

```vue
<script lang="ts" setup>
import type { FormStepColumn } from "@/components/pro/form-steps";
import { ref } from "vue";
import { ProFormSteps } from "@/components/pro/form-steps";
const active = ref(1);
const stepForm = ref<FormStepColumn[]>([
  {
    title: "第一步",
    form: {
      modelValue: {},
      columns: [
        { label: "名称", prop: "name", tooltip: "名称最多显示6个字符" },
        {
          label: "状态",
          prop: "status",
          el: "el-select",
          options: [
            { label: "未解决", value: "0" },
            { label: "已解决", value: "1" },
            { label: "解决中", value: "2" },
            { label: "失败", value: "3" },
          ],
        },
      ],
      elFormProps: {
        rules: {
          name: [{ required: true, message: "请输入名称" }],
        },
      },
    },
  },
  {
    title: "第二步",
    form: {
      modelValue: {},
      columns: [
        { label: "标签", prop: "tag" },
        { label: "执行进度", prop: "progress" },
        { label: "评分", width: 200, prop: "rate", el: "el-rate" },
        { label: "是否显示", width: 100, prop: "switch", el: "el-switch" },
      ],
      elFormProps: {
        labelWidth: "100",
        rules: {
          tag: [{ required: true, message: "请输入标签" }],
          progress: [{ required: true, message: "请输入执行进度" }],
        },
      },
    },
  },
  {
    title: "第三步",
    form: {
      modelValue: {},
      columns: [
        { label: "时间", prop: "time", el: "el-date-picker" },
        {
          label: "要求",
          prop: "demand",
          el: "el-checkbox",
          options: [
            { label: "四六级", value: "0" },
            { label: "计算机二级证书", value: "1" },
            { label: "普通话证书", value: "2" },
          ],
        },
        { label: "奖励", prop: "price" },
        { label: "提成", prop: "percentage" },
        {
          label: "说明",
          prop: "desc",
          el: "el-input",
          elProps: {
            type: "textarea",
            maxlength: 10,
            showWordLimit: true,
            autosize: { minRows: 2, maxRows: 4 },
          },
        },
      ],
      elFormProps: {
        rules: {
          time: [{ required: true, trigger: "change", message: "请选择时间" }],
          demand: [{ required: true, trigger: "change", message: "请选择要求" }],
        },
      },
    },
  },
]);
const next = (actives: number, currentModel: Record<string, any>, allModel: Record<string, any>) => {
  active.value = actives;
  console.log(actives, currentModel, allModel, stepForm.value);
};
</script>
<template>
  <ProFormSteps v-model="active" :columns="stepForm" @next="next" :space="100" direction="vertical">
    <template #step-1>
      <h3>自定义第一步内容</h3>
    </template>
  </ProFormSteps>
</template>
```

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

### Layout and Theme Configuration Example

Source: https://vue3-design-docs.teek.top/index

Provides a visual representation of layout and theme configuration options, including layout switching, page maximum width, document content maximum width, theme color selection, and spotlight feature toggles.

```Markdown
布局切换
页面最大宽度
90%
文档内容最大宽度
95%
主题色 
扩散
聚光灯
ONOFF
聚光灯样式
```

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

### ProForm Component Events

Source: https://vue3-design-docs.teek.top/ecosystem/components/05.pro-form/01

Details the events emitted by the ProForm component, such as registration, submission, reset, and form changes. Includes examples of how to handle these events in Vue templates and setup scripts.

```APIDOC
Events:

- register: Registers ProForm and ElForm component instances.
- submit: Triggered when the submit button is clicked and validation passes.
- reset: Triggered when the reset button is clicked.
- submitError: Triggered when the submit button is clicked and validation fails.
- change: Triggered when the form data changes.
- ...: Other extended properties, supports all ElForm Events.

Example:

Template:
```html
<ProForm @validate="handleValidate" />
```

Setup:
```typescript
const handleValidate = (prop: FormItemProp, isValid: boolean, message: string) => {
  console.log(dropdownItem);
};
```
```

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

### Teek Design Vue3 - Basic Guide

Source: https://vue3-design-docs.teek.top/guide

Covers Teek's layout configuration, environment variable configuration, layout components, routing configuration, styling, HTTP requests using Axios, custom directives, and icon features.

```markdown
## 基础指南 
配置：介绍 Teek 的布局配置，环境变量配置，布局配置可以使用 Teek 默认的配置，但是环境变量配置是开发者必须掌握的知识点，这是开发、打包、部署的核心配置。
布局：介绍 Teek 的多种布局，布局组件、布局衍生的常用功能。
路由：介绍 Teek 的路由配置，路由是项目的核心，承载所有布局的构建信息，开发者必须了解路由的配置。
样式：介绍 Teek 的样式开发语言、样式设计思路。
请求：介绍 Teek 的 http 请求，基于 Axios 封装了一套开箱即用的 http 请求。
打包构建：介绍 Teek 的环境打包配置，以及打包压缩功能。
指令：介绍 Teek 的 Vue 自定义指令。
图标：介绍 Teek 的图标内置功能以及如何使用。
```

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

### Vue3 Table Cell Editing Example

Source: https://vue3-design-docs.teek.top/ecosystem/components/01.pro-table/30

This example demonstrates how to configure a Vue.js table to allow inline editing of cells. It includes setup for different input types like select, rate, switch, and date pickers, along with custom buttons for actions like cancel, save, edit, and delete. The code also shows how to handle form changes and validate edits before saving.

```vue
<script setup lang="ts">
import { setProp } from "@/components/pro/helper";
import type { TableColumn, TableScope } from "@/components/pro/table";
import { ProTable } from "@/components/pro/table";
import { ElMessage } from "element-plus";
import { ref } from "vue";
// 表格数据需要是 ref 响应式，这样才会触发表格的更新
const data = ref([
  { username: "张三", status: 0, rate: 3, switch: true, time: "2025-01-01" },
  { username: "李四", status: 1, rate: 3.5, switch: true, time: "2025-02-01" },
  { username: "王五", status: 2, rate: 4.5, switch: false, time: "2025-04-01" },
  { username: "孙六", status: 3, rate: 1, switch: false, time: "2025-05-01" },
]);
const columns: TableColumn[] = [
  { prop: "username", label: "用户姓名" },
  {
    prop: "status",
    label: "状态",
    el: "el-tag",
    width: 120,
    // 当存在 options，编辑组件默认为 el-select
    options: [
      { label: "未解决", value: 0, tagType: "info" },
      { label: "已解决", value: 1, tagType: "primary" },
      { label: "解决中", value: 2, tagType: "warning" },
      { label: "失败", value: 3, tagType: "danger" },
    ],
    editProps: {
      formItemProps: {
        rules: [{ required: true, trigger: "change", message: "请选择状态" }],
      },
    },
  },
  {
    prop: "rate",
    label: "评分",
    width: 200,
    editProps: {
      el: "el-rate",
      elProps: {
        allowHalf: true,
      },
    },
  },
  {
    prop: "switch",
    label: "开关",
    width: 100,
    editProps: {
      el: "el-switch",
      formItemProps: {
        required: true,
      },
    },
  },
  {
    label: "时间",
    prop: "time",
    editProps: {
      el: "el-date-picker",
      formItemProps: {
        required: true,
      },
    },
    width: 200,
  },
  {
    prop: "operation",
    label: "操作",
    width: 120,
    buttons: [
      {
        text: "取消编辑",
        code: "cancel",
        show: row => !!row._isCellEdit?.(["username", "status"]),
        elProps: {
          type: "warning",
        },
        onClick: async ({ row }) => {
          // 关闭当前行编辑
          row._closeCellEdit(["username", "status"], true);
          // _closeCellEdit 第二个参数为 true 时，等于调用该方法
          // row._resetCellData(["username", "status"]);
        },
      },
      {
        text: "保存",
        code: "save",
        elProps: {
          type: "primary",
        },
        show: row => !!row._isCellEdit?.(["username", "status"]),
        onClick: async ({ row }) => {
          // 校验成功再关闭编辑
          const isValid = await row._validateCellEdit();
          if (isValid) {
            row._closeCellEdit(["username", "status"]);
            // 这里可以调用接口进行保存
            ElMessage.success("保存成功：" + JSON.stringify(row._getData()));
          }
        },
      },
      {
        text: "编辑",
        code: "edit",
        elProps: {
          type: "primary",
        },
        show: row => !row._isCellEdit?.(["username", "status"]),
        onClick: ({ row }) => {
          // 指定当前行单元格可编辑
          row._openCellEdit(["username", "status"]);
        },
      },
      {
        text: "删除",
        code: "delete",
        elProps: {
          type: "danger",
        },
        confirm: true,
        show: row => !row._isCellEdit?.(["username", "status"]),
        onConfirm: ({ row }) => {
          data.value = data.value.filter(item => !row.username.includes(item.username));
        },
      },
    ],
  },
];
// 监听表单数据变化，修改表格数据
const handleFormChange = async (fromValue: unknown, prop: string, scope: TableScope) => {
  setProp(data.value[scope.rowIndex!], prop, fromValue);
};
</script>
<template>
  <ProTable :columns="columns" :data="data" init-native-row-field @form-change="handleFormChange" />
</template>
```

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

### Control Search Values with ProPage

Source: https://vue3-design-docs.teek.top/ecosystem/components/35

Demonstrates how to use the ProPage component to manually set, get, and clear search values. It includes examples of defining columns with various input types and custom renderers, and interacting with the ProPage instance via template refs.

```vue
<script setup lang="ts">
import type { PageColumn, ProPageInstance } from "@/components/pro/page";
import { ProPage } from "@/components/pro/page";
import { ElMessage } from "element-plus";
import { useTemplateRef } from "vue";
const proPageInstance = useTemplateRef<ProPageInstance>("proPageInstance");
const data = [
  { username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
  { username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
  { username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: PageColumn[] = [
  { prop: "username", label: "用户姓名", el: "copy", search: {} },
  {
    prop: "gender",
    label: "性别",
    el: "el-tag",
    elProps: (value: number) => {
      if (value === 1) return { type: "success" };
      return { type: "danger" };
    },
    options: async () => {
      return [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ];
    },
    search: {
      el: "el-select",
    },
  },
  {
    prop: "progress",
    label: "进度",
    el: "el-progress",
    tooltip: "学习进度",
    elSlots: {
      default: ({ value }) => value + "%",
    },
    search: {
      el: "el-input",
    },
  },
  {
    prop: "birthday",
    label: "生日",
    search: {
      el: "el-date-picker",
    },
  },
];
/**
 * 设置搜索值
 */
const setSearchParams = () => {
  proPageInstance.value?.setSearchParams({ username: "小明", gender: 1 });
};
/**
 * 获取搜索值
 */
const getSearchParams = () => {
  ElMessage.info(JSON.stringify(proPageInstance.value?.searchParams));
};
/**
 * 清空搜索值
 */
const clearSearchParams = () => {
  proPageInstance.value?.clearSearchParams();
};
</script>
<template>
  <div style="margin-bottom: 10px">
    <el-button @click="setSearchParams">设置搜索值</el-button>
    <el-button @click="getSearchParams">获取搜索值</el-button>
    <el-button @click="clearSearchParams">清空搜索值</el-button>
  </div>
  <ProPage ref="proPageInstance" :columns="columns" :data="data" />
</template>

```

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

### Teek Design Vue3 - Advanced Guide

Source: https://vue3-design-docs.teek.top/guide

Details Teek's internationalization rules, theme style configuration, permission control for routes, menus, and buttons, TS type files, pre-building for faster builds, and Vite configuration.

```markdown
## 进阶指南 
国际化：介绍 Teek 的国际化规则和配置，开发国际化项目需要了解这项功能。
主题样式：介绍 Teek 的主题样式配置，让开发者定制自己的项目样式。
权限管控：介绍 Teek 的权限管控功能，让开发者可以对路由、菜单和按钮进行粗细粒度的权限管控。
TS 类型：介绍 Teek 的 TS 类型文件，以及基于 TS API 封装的自定义 API。
预构建：介绍 Teek 的预构建功能，在第一次构建的时候进行缓存，从而加快在下一次构建的时间。
Vite 配置：介绍 Teek 的 `vite.Config.ts` 配置，以及一些常用的插件、代理、打包处理等功能。
```

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

### Vue 3 Element Plus Form Component Integration

Source: https://vue3-design-docs.teek.top/ecosystem/components/05.pro-form/10

Demonstrates the setup and usage of various Element Plus form components within a Vue 3 application using the Composition API. Includes examples for autocomplete, cascader, date pickers, sliders, switches, and more.

```typescript
import type { FormColumn } from "@/components/pro/form";
import { ref } from "vue";
import { ProForm } from "@/components/pro/form";

interface RestaurantItem {
  value: string;
  link: string;
}

interface Option {
  key: number;
  label: string;
  disabled: boolean;
}

const state = ref({
  autocomplete: "vue",
  cascader: ["0", "0-0", "0-0-0"],
  cascaderMultiple: [
    ["0", "0-0", "0-0-0"],
    ["0", "0-0", "0-0-1"],
    ["0", "0-0", "0-0-2"],
  ],
  checkbox: ["0"],
  colorPicker: "rgba(255, 69, 0, 0.68)",
  year: "2024",
  years: ["2024", "2005"],
  month: "2024-02",
  date: "2024-03-05",
  dates: ["2024-03-05", "2024-03-06"],
  datetime: "2024-03-19 00:00:00",
  week: "2024-03-19",
  datetimerange: ["2024-03-07 00:00:00", "2024-03-09 00:00:00"],
  daterange: ["2024-02-29", "2024-03-29"],
  monthrange: ["2024-03", "2024-05"],
  select: "0",
  selectMultiple: ["0", "1"],
  input: "单行文本",
  textarea: "多行文本",
  inputNumber: 4,
  rate: 3,
  switch: true,
  radio: "0",
  slider: 50,
  timePicker: "2024-03-18 09:55:31",
  timeSelect: "09:55:31",
  transfer: [1, 2, 3, 4, 5, 6],
  plusDatePicker: ["2024-03-18 09:55:31", "2024-03-20 09:55:31"],
  inputTag: ["tag", "tag1"],
  selectV2: "Option 1",
  selectV2Multiple: ["Option 1", "Option 2"],
  mention: "Fuphoenixes",
  segmented: "Mon",
  checkboxSelect: "option1",
  checkboxSelectMultiple: ["option1", "option2"],
  text: "我是一段文本",
});

const generateData = () => {
  const data: Option[] = [];
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    });
  }
  return data;
};

const restaurants = ref<RestaurantItem[]>([]);

const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

const loadAll = () => {
  return [
    { value: "vue", link: "https://github.com/vuejs/vue" },
    { value: "element", link: "https://github.com/ElemeFE/element" },
    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "vuex", link: "https://github.com/vuejs/vuex" },
    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
    { value: "babel", link: "https://github.com/babel/babel" },
  ];
};

restaurants.value = loadAll();

const cascaderOptions = [
  {
    value: "0",
    label: "陕西",
    children: [
      {
        value: "0-0",
        label: "西安",
        children: [
          { value: "0-0-0", label: "新城区" },
          { value: "0-0-1", label: "高新区" },
          { value: "0-0-2", label: "灞桥区" },
        ],
      },
    ],
  },
  {
    value: "1",
    label: "山西",
    children: [
      {
        value: "1-0",
        label: "太原",
        children: [

```

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

### Axios Instance Creation and Basic Usage

Source: https://vue3-design-docs.teek.top/guide/05.basic/40

Demonstrates how to create an Axios instance using Teek's `createRequest` function, setting the `baseURL` from environment variables. It also shows basic HTTP request methods like GET, POST, PUT, DELETE, and DOWNLOAD, including how to specify response types.

```ts
export const http = createRequest({
  options: {
    baseURL: import.meta.env.VITE_API_URL,
  },
});
```

```ts
import { http } from "@/common/http";
// 发送 GET 请求
const userData = await http.get("/user/1");
// 发送 POST 请求
const newUser = await defaultRequest.post("/user", { name: "John", age: 30 });
// 发送 PUT 请求
const updatedUser = await http.put("/user/1", { name: "John Doe", age: 31 });
// 发送 DELETE 请求
await http.delete("/user/1");
// 发送 DOWNLOAD 请求
await http.download("/user/1/avatar", "avatar.png");
// 完整写法
http.request({
  url: "/test",
  method: "post",
  data: {
    name: "Teek",
    age: 18,
  },
});
```

```ts
import http from "@/common/http";
interface User {
  name: string;
  age: number;
}
const userData = await http.get<User>("/user/1");
const userData = http.request<User>({
  url: "/test",
  method: "post",
  data: {
    name: "Teek",
    age: 18,
  },
});
```

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

### 克隆 Teek Design Vue3 精简版源码

Source: https://vue3-design-docs.teek.top/guide/01.start/05

提供了从 GitHub 和 Gitee 克隆 Teek Design Vue3 精简版前端代码（模板）的命令。

```sh
git clone https://github.com/Kele-Bingtang/teek-design-vue3-template.git
```

```sh
git clone https://gitee.com/kele-bingtang/teek-design-vue3-template.git
```

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

### 克隆 Teek Design Vue3 完整版源码

Source: https://vue3-design-docs.teek.top/guide/01.start/05

提供了从 GitHub 和 Gitee 克隆 Teek Design Vue3 完整版前端代码的命令。

```sh
git clone https://github.com/Kele-Bingtang/teek-design-vue3.git
```

```sh
git clone https://gitee.com/kele-bingtang/teek-design-vue3.git
```

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

### Install Iconify JSON Icons

Source: https://vue3-design-docs.teek.top/guide/05.basic/35

Command to install Iconify icons as JSON data using pnpm. The package name follows the convention '@iconify-json/{name}'.

```sh
pnpm add @iconify-json/ant-design -d
```

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

### Configuration Options

Source: https://vue3-design-docs.teek.top/guide/05.basic/40

Details the configuration options for creating request instances, setting up interceptors, and defining global handlers for loading, messages, errors, and token refresh.

```APIDOC
### RequestConfigOptions
创建请求实例时的配置选项：
属性 | 类型 | 默认值 | 描述  
---|---|---|---
baseURL | `string` | `/` | 基础 URL  
timeout | `number` | `10000` | 超时时间（毫秒）  
withCredentials | `boolean` | `true` | 是否携带凭证  
... | 支持所有的 `InternalRequestConfig` 类型 | ... | ...  

### RequestInterceptors
请求拦截器配置：
属性 | 类型 | 描述  
---|---|---
onRequest |  `function` | 请求前处理  
onRequestError |  `function` | 请求错误处理  
onResponse | `function` | 响应处理  
onResponseError | `function` | 响应错误处理  

### GlobalHandlers
全局处理器配置：
属性 | 类型 | 描述  
---|---|---
showLoading |  `function` | 显示加载动画  
hideLoading |  `function` | 隐藏加载动画  
showMessage |  `function` | 消息提示  
logout |  `function` | 用户登出处理  
resolveError |  `function` | 错误处理  
refreshToken |  `function` | 刷新 Token  

### RequestInstanceConfig
请求实例配置（创建实例时使用）：
属性 | 类型 | 描述  
---|---|---
options | `RequestConfigOptions` | 请求配置选项  
interceptors | `RequestInterceptors` | 请求拦截器配置  
handlers | `GlobalHandlers` | 全局处理器配置  

### InternalRequestConfig
发送请求时的配置选项：
属性 | 类型 | 默认值 | 描述  
---|---|---|---
loading | `boolean` | `true` | 是否显示全局 loading  
cancel | `boolean` | `true` | 是否取消重复请求  
contentType | `string` | `json` | Content-Type 类型  
paramsType | `string` | `undefined` | GET 参数序列化类型  
responseReturn | `string` | `data` | 响应数据处理方式  
cache |  `object` | `undefined` | 缓存配置  
retry |  `object` | `undefined` | 重试配置  
```

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

### Vue 3 ProPage Data Fetching Example

Source: https://vue3-design-docs.teek.top/ecosystem/components/35

Demonstrates how to use the ProPage component to fetch and display data. It includes a mock API service, column definitions with custom rendering and search options, and callbacks for data transformation and error handling.

```vue
<script setup lang="ts">
import type { PageColumn } from "@/components/pro/page";
import { ProPage } from "@/components/pro/page";
// 模拟后端 API
const DataService = {
  getList: async (searchParams: Record<string, any>) => {
    console.log("搜索条件: ", searchParams);
    const data = [
      { username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
      { username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
      { username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
    ];
    return Promise.resolve({
      code: 200,
      message: "success",
      data,
    });
  },
};
const columns: PageColumn[] = [
  { prop: "username", label: "用户姓名", el: "copy", search: {} },
  {
    prop: "gender",
    label: "性别",
    el: "el-tag",
    elProps: (value: number) => {
      if (value === 1) return { type: "success" };
      return { type: "danger" };
    },
    options: async () => {
      return [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ];
    },
    search: {
      el: "el-select",
    },
  },
  {
    prop: "progress",
    label: "进度",
    el: "el-progress",
    tooltip: "学习进度",
    elSlots: {
      default: ({ value }) => value + "%",
    },
    search: {
      el: "el-input",
    },
  },
  {
    prop: "birthday",
    label: "生日",
    search: {
      el: "el-date-picker",
    },
  },
];
// 请求数据后的回调
const handleTransformData = (data: Record<string, any>[]) => {
  return [...data, { username: "赵六", gender: 2, progress: 80, birthday: "2023-04-01" }];
};
// 请求错误的回调
const handleRequestError = (error: unknown) => {
  console.log(error);
};
</script>
<template>
  <ProPage
    :columns="columns"
    :request-api="DataService.getList"
    :default-request-params="{ username: '张三' }"
    :request-error="handleRequestError"
    :transform-data="handleTransformData"
  />
</template>
```

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

### Caching Mechanism for GET Requests

Source: https://vue3-design-docs.teek.top/guide/05.basic/40

Enables caching for GET requests. Supports automatic cache key generation or custom keys. Cache can be cleared globally or by specific keys.

```typescript
// 可以使用自己创建的 Axios 实例
import { http } from "@/common/http";
// 启用缓存的 GET 请求，内部自动生成缓存 key
const cachedData = await http.get("/user/profile", null, {
  cache: {
    enabled: true,
    ttl: 60000, // 缓存 1 分钟
  },
});
// 使用自定义缓存键
const cachedData2 = await http.get(
  "/user/list",
  { page: 1 },
  {
    cache: {
      enabled: true,
      key: "user_list_page_1",
    },
  }
);
// 清除缓存
http.clearCache(); // 清除所有缓存
http.clearCacheByKey("user_list_page_1"); // 清除特定缓存
```

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

### ProPage Basic Usage

Source: https://vue3-design-docs.teek.top/ecosystem/components/35

Demonstrates the basic usage of the ProPage component with sample data and column configurations. It shows how to define columns with properties like 'prop', 'label', 'el' (element type), 'elProps' for element-specific properties, 'options' for select data, and 'search' for search configurations.

```vue
<script setup lang="ts">
import type { PageColumn } from "@/components/pro/page";
import { ProPage } from "@/components/pro/page";
const data = [
  { username: "张三", gender: 1, progress: 20, birthday: "2023-01-01" },
  { username: "李四", gender: 2, progress: 40, birthday: "2023-02-01" },
  { username: "王五", gender: 1, progress: 60, birthday: "2023-03-01" },
];
const columns: PageColumn[] = [
  { prop: "username", label: "用户姓名", el: "copy", search: {} },
  {
    prop: "gender",
    label: "性别",
    el: "el-tag",
    elProps: (value: number) => {
      if (value === 1) return { type: "success" };
      return { type: "danger" };
    },
    options: async () => {
      return [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ];
    },
    search: {
      el: "el-select",
    },
  },
  {
    prop: "progress",
    label: "进度",
    el: "el-progress",
    tooltip: "学习进度",
    elSlots: {
      default: ({ value }) => value + "%",
    },
    search: {
      el: "el-input",
    },
  },
  {
    prop: "birthday",
    label: "生日",
    search: {
      el: "el-date-picker",
    },
  },
];
</script>
<template>
  <ProPage :columns="columns" :data="data" />
</template>
```

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

### Handle GET Array Parameters

Source: https://vue3-design-docs.teek.top/guide/05.basic/40

Details how to configure the `paramsType` option to handle array parameters in GET requests, supporting formats like `brackets`, `comma`, `indices`, and `repeat` for URL serialization.

```typescript
import { http } from "@/common/http";
http.get("/test", { arr: [1, 2, 3] }, { paramsType: "repeat" });
http.request({
  url: "https://vue3-design.teek.cn/test",
  method: "get",
  params: {
    arr: [1, 2, 3],
  },
  paramsType: "repeat",
});
```

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

### Example Route Configuration (TypeScript)

Source: https://vue3-design-docs.teek.top/structure/01

An example of a route configuration object (`RouterConfigRaw`) used within the `processRouteMeta` function. It demonstrates how to define a parent route with a meta title and a child route with its own meta title.

```typescript
const tableRoutes: RouterConfigRaw = {
  path: "/table",
  name: "Table",
  meta: { title: "表格" },
  children: [
    {
      path: "drag-table",
      name: "DragTable",
      component: () => import("@/views/table/dragTable/index.vue"),
      meta: { title: "表格拖拽" },
    },
  ],
};
```

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

### Vue 3 Project Structure Overview

Source: https://vue3-design-docs.teek.top/guide/01.start/10

This snippet details the top-level directory structure of a Vue 3 project, including configuration files, source code organization, and static assets.

```text
├─ .cursor
├─ .husky
├─ .vscode
├─ node
├─ public
│ └─ tinymce
├─ src
├─ common
├─ components
├─ composables
├─ layout
```

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

### Vue3 Route Internationalization Setup

Source: https://vue3-design-docs.teek.top/guide/05.basic/25.route/20

Demonstrates how to configure routes with internationalized titles for menus, breadcrumbs, and tags. It shows the basic setup for non-internationalized routes and how to enable internationalization using the `useI18n` meta property.

```typescript
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/home",
    name: "Home",
    component: import("@/views/home/index.vue"),
    meta: {
      title: "首页",
    },
  },
];
```

```typescript
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/home",
    name: "Home",
    component: import("@/views/home/index.vue"),
    meta: {
      useI18n: true,
    },
  },
];
```