### Install Dependencies and Run Dev Server

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/README.md

Clone the repository, install dependencies using yarn, and start the development server with npm run dev.

```bash
# 克隆本仓库
$ git clone https://github.com/kailong321200875/vue-element-plus-admin-doc.git

# 安装依赖
$ yarn

# 启动开发服务器
$ npm run dev
```

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

### Search Component Configuration

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/search.md

This example demonstrates the basic setup of the Search component, including schema, layout, button positioning, and loading states. It also shows how to register the component and handle search and reset events.

```vue
<template>
  <ContentWrap :title="t('searchDemo.search')" :message="t('searchDemo.searchDes')">
    <Search
      :schema="schema"
      :is-col="isGrid"
      :layout="layout"
      :button-position="buttonPosition"
      :search-loading="searchLoading"
      :reset-loading="resetLoading"
      show-expand
      expand-field="field6"
      @search="handleSearch"
      @reset="handleSearch"
      @register="searchRegister"
    />
  </ContentWrap>
</template>
```

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

### Start Development Server

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/index.md

Run this command in the project's root directory to start the local development server.

```bash
pnpm run dev
```

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

### Descriptions Component Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/descriptions.md

This example demonstrates how to use the Descriptions component with custom data and schema. It showcases the basic setup for displaying key-value pairs.

```APIDOC
## Descriptions Component Usage

### Description
This example demonstrates how to use the Descriptions component with custom data and schema. It showcases the basic setup for displaying key-value pairs.

### Method
Component Usage

### Endpoint
N/A (Component)

### Parameters
#### Props
- **title** (string) - Optional - The title for the descriptions.
- **message** (string) - Optional - A message to display with the descriptions.
- **collapse** (boolean) - Optional - Whether to show the expand/collapse button. Defaults to true.
- **schema** (DescriptionsSchema[]) - Optional - The layout structure data for the descriptions. Defaults to [].
- **data** (Recordable) - Optional - The data to be displayed in the descriptions. Defaults to {}.

### Schema Properties
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```vue
<script setup lang="tsx">
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { reactive } from 'vue' 

const data = reactive({
  username: 'chenkl',
  nickName: '梦似花落。',
  age: 26,
  phone: '13655971xxxx',
  email: '502431556@qq.com',
  addr: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的地址',
  sex: '男',
  certy: '3505831994xxxxxxxx'
})

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'username',
    label: 'username'
  },
  {
    field: 'nickName',
    label: 'nickName'
  },
  {
    field: 'phone',
    label: 'phone'
  },
  {
    field: 'email',
    label: 'email'
  },
  {
    field: 'addr',
    label: 'addr',
    span: 24
  }
])
</script>

<template>
  <Descriptions
    title="descriptions"
    message="message"
    :data="data"
    :schema="schema"
  />
</template>
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

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

### Install Project Dependencies

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/index.md

Install all project dependencies using Pnpm. This command should be run in the project's root directory.

```bash
# 安装依赖
pnpm i
```

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

### Verify Node.js and npm Installation

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/index.md

Check if Node.js and npm are installed correctly by verifying their versions.

```bash
# 验证 npm 是否安装成功
npm -v

# 验证 node 是否安装成功
node -v
```

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

### Search Component Button Examples

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/search.md

These examples show different button configurations for the Search component, including changing position and triggering actions like getting dynamic options or deleting/restoring radio selections.

```vue
<ElButton @click="changePosition('left')">
  {{ t('searchDemo.bottom') }} {{ t('searchDemo.position') }}-{{ t('searchDemo.left') }}
</ElButton>
<ElButton @click="changePosition('center')">
  {{ t('searchDemo.bottom') }} {{ t('searchDemo.position') }}-{{ t('searchDemo.center') }}
</ElButton>
<ElButton @click="changePosition('right')">
  {{ t('searchDemo.bottom') }} {{ t('searchDemo.position') }}-{{ t('searchDemo.right') }}
</ElButton>
<ElButton @click="getDictOne">
  {{ t('formDemo.select') }} {{ t('searchDemo.dynamicOptions') }}
</ElButton>
<ElButton @click="delRadio">{{ t('searchDemo.deleteRadio') }}</ElButton>
<ElButton @click="restoreRadio">{{ t('searchDemo.restoreRadio') }}</ElButton>
<ElButton @click="setValue">{{ t('formDemo.setValue') }}</ElButton>

<ElButton @click="changeSearchLoading">
  {{ t('searchDemo.search') }} {{ t('searchDemo.loading') }}
</ElButton>
<ElButton @click="changeResetLoading">
  {{ t('searchDemo.reset') }} {{ t('searchDemo.loading') }}
</ElButton>
```

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

### Install Pnpm Globally

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/index.md

Install Pnpm globally using npm if it's not already installed. This is the recommended package manager for the project.

```bash
# 全局安装 pnpm
npm i -g pnpm

# 验证
pnpm -v
```

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

### Using createImageViewer to Open Image Previews

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/image-viewer.md

Import and use the `createImageViewer` function to display a list of images. This example shows how to trigger the preview with a button click.

```vue
<script setup lang="ts">
import { createImageViewer } from '@/components/ImageViewer'
import { ElButton } from 'element-plus'

const open = () => {
  createImageViewer({
    urlList: [
      'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',
      'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',
      'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',
      'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',
      'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',
      'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'
    ]
  })
}
</script>

<template>
  <ElButton type="primary" @click="open">预览</ElButton>
</template>

```

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

### Basic Form Usage with Schema

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/form.md

Demonstrates the basic setup of the Form component using a reactive schema definition. Ensure Form and FormSchema are imported.

```vue
<script setup lang="ts">
import { Form, FormSchema } from '@/components/Form'
import { reactive } from 'vue'

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: 'input',
    component: 'Input'
  }
])
</script>

<template>
  <Form :schema="schema" />
</template>

```

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

### Basic Table Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/table.md

Demonstrates the fundamental setup of the Table component with predefined columns and data. Ensure the Table and TableColumn components are imported.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { Table, TableColumn } from '@/components/Table'

const columns = reactive<TableColumn[]>([
  {
    field: 'title',
    label: 'title'
  },
  {
    field: 'author',
    label: 'author'
  }
])

const data = reactive([
  {
    title: 'title1',
    author: 'author1'
  },
  {
    title: 'title2',
    author: 'author2'
  },
  {
    title: 'title3',
    author: 'author3'
  }
])
</script>

<template>
  <Table :columns="columns" :data="data" />
</template>

```

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

### Qrcode Component Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/qrcode.md

Basic usage example of the Qrcode component. Import it and use it with the 'text' prop to display a QR code.

```APIDOC
## Qrcode Component

### Description

A Vue component that generates QR codes based on provided text or data.

### Props

- **tag** (string) - Optional - The HTML tag to use for rendering the QR code (e.g., 'canvas' or 'img'). Defaults to 'canvas'.
- **text** (string | Array) - Required - The content to be encoded in the QR code.
- **options** (QRCodeRenderersOptions) - Optional - Configuration options for the underlying qrcode.js library.
- **width** (number) - Optional - The width of the QR code in pixels. Defaults to 200.
- **logo** (QrcodeLogo | string) - Optional - A logo to be embedded in the center of the QR code.
- **disabled** (boolean) - Optional - Whether the QR code is considered expired or disabled. Defaults to false.
- **disabledText** (string) - Optional - Text to display when the QR code is disabled.

### Events

- **done** - Emitted after the QR code has been successfully generated. No specific callback parameters.
- **click** - Emitted when the QR code is clicked.
- **disabled-click** - Emitted when the QR code is clicked while in a disabled state.
```

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

### Basic Usage of Descriptions Component

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/descriptions.md

This example demonstrates the basic usage of the Descriptions component with custom data and schema. It requires importing the Descriptions and DescriptionsSchema types and using reactive data.

```vue
<script setup lang="tsx">
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { reactive } from 'vue'

const data = reactive({
  username: 'chenkl',
  nickName: '梦似花落。',
  age: 26,
  phone: '13655971xxxx',
  email: '502431556@qq.com',
  addr: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的地址',
  sex: '男',
  certy: '3505831994xxxxxxxx'
})

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'username',
    label: 'username'
  },
  {
    field: 'nickName',
    label: 'nickName'
  },
  {
    field: 'phone',
    label: 'phone'
  },
  {
    field: 'email',
    label: 'email'
  },
  {
    field: 'addr',
    label: 'addr',
    span: 24
  }
])
</script>

<template>
  <Descriptions
    title="descriptions"
    message="message"
    :data="data"
    :schema="schema"
  />
</template>

```

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

### Example Git Commit with Conventional Commits

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/dep/lint.md

An example of a Git commit message following the conventional commit format.

```bash
git commit -m 'feat: add new component'
```

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

### Basic Qrcode Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/qrcode.md

Demonstrates the basic usage of the Qrcode component by rendering a QR code with specific text content. Ensure the component is imported correctly in your script setup.

```vue
<script setup lang="ts">
import { Qrcode } from '@/components/Qrcode'
</script>

<template>
  <Qrcode text="vue-element-plus-admin" />
</template>

```

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

### Basic Editor Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/editor.md

Demonstrates how to import and use the Editor component in a Vue setup. It shows how to bind content using v-model and handle content changes via the @change event.

```vue
<script setup lang="ts">
import { Editor } from '@/components/Editor'
import { ref} from 'vue'

const defaultHtml = ref('<p>hello <strong>world</strong></p>')

const change = (html: string) => {
  console.log(html)
}
</script>

<template>
  <Editor v-model="defaultHtml" ref="editorRef" @change="change" />
</template>

```

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

### UnoCSS Utility Class Example

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/design.md

An example of using UnoCSS utility classes for styling HTML elements. These classes provide a rapid way to apply styles directly in the markup.

```html
<div class="relative w-full h-full px-4"></div>

```

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

### Basic Icon Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/icon.md

Demonstrates how to use the Icon component to load local SVG icons by prefixing with 'svg-icon:' or load Iconify icons directly. No specific setup is required beyond importing the component.

```vue
<template>
  <!-- 加载本地 svg -->
  <Icon icon="svg-icon:peoples" />

  <!-- 加载 Iconify -->
  <Icon icon="ep:aim" />
</template>
```

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

### Create i18n Options with Remote Data

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/dep/i18n.md

Illustrates how to configure the i18n instance, including fetching language data remotely. This function is called during application setup to initialize i18n.

```typescript
const createI18nOptions = async (): Promise<I18nOptions> => {
  const localeStore = useLocaleStoreWithOut()
  const locale = localeStore.getCurrentLocale
  const localeMap = localeStore.getLocaleMap
  // 这里改为远程请求即可。
  const defaultLocal = await import(`../../locales/${locale.lang}.ts`)
  const message = defaultLocal.default ?? {}

  setHtmlPageLang(locale.lang)

  localeStore.setCurrentLocale({
    lang: locale.lang
    // elLocale: elLocal
  })

  return {
    legacy: false,
    locale: locale.lang,
    fallbackLocale: locale.lang,
    messages: {
      [locale.lang]: message
    },
    availableLocales: localeMap.map((v) => v.lang),
    sync: true,
    silentTranslationWarn: true,
    missingWarn: false,
    silentFallbackWarn: true
  }
}
```

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

### On-Demand Component Import

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/component.md

Import and use components like ElBacktop directly within the script setup of a Vue page. This is the default method for registering components.

```vue
<script setup lang="ts">
import { ElBacktop } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls, variables } = useDesign()

const prefixCls = getPrefixCls('backtop')
</script>

<template>
  <ElBacktop
    :class="`${prefixCls}-backtop`"
    :target="`.${variables.namespace}-layout-content-scrollbar .${variables.elNamespace}-scrollbar__wrap`"
  />
</template>

```

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

### Import Language Pack Dynamically

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/dep/i18n.md

Demonstrates how the project dynamically imports language files based on the current locale setting. This is typically used during the i18n setup.

```typescript
const defaultLocal = await import(`../../locales/${locale.lang}.ts`)
```

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

### Vue Component Using useClipboard

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/hooks/useClipboard.md

Demonstrates how to import and use the useClipboard hook within a Vue 3 component's script setup. Call the `copy` function with the content you wish to copy.

```vue
<script setup lang="ts">
import { useClipboard } from '@/hooks/web/useClipboard'

const { copy } = useClipboard()

copy('复制内容')
</script>

```

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

### Table with useTable Hook

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/table.md

Illustrates advanced table configuration using the useTable hook, which simplifies data fetching, pagination, and state management. This example includes custom column definitions with nested structures, formatters, and slots for actions.

```vue
<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { getTreeTableListApi } from '@/api/table'
import { reactive, unref } from 'vue'
import { ElTag, ElButton } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'

const { tableRegister, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getTreeTableListApi({
      pageIndex: unref(currentPage),
      pageSize: unref(pageSize)
    })
    return {
      list: res.data.list,
      total: res.data.total
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState

const { t } = useI18n()

const columns = reactive<TableColumn[]>([
  {
    field: 'selection',
    type: 'selection'
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index'
  },
  {
    field: 'content',
    label: t('tableDemo.header'),
    children: [
      {
        field: 'title',
        label: t('tableDemo.title')
      },
      {
        field: 'author',
        label: t('tableDemo.author')
      },
      {
        field: 'display_time',
        label: t('tableDemo.displayTime')
      },
      {
        field: 'importance',
        label: t('tableDemo.importance'),
        formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
          return (
            <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
              {cellValue === 1
                ? t('tableDemo.important')
                : cellValue === 2
                ? t('tableDemo.good')
                : t('tableDemo.commonly')}
            </ElTag>
          )
        }
      },
      {
        field: 'pageviews',
        label: t('tableDemo.pageviews')
      }
    ]
  },
  {
    field: 'action',
    label: t('tableDemo.action'),
    slots: {
      default: (data) => {
        return (
          <ElButton type="primary" onClick={() => actionFn(data)}>
            {t('tableDemo.action')}
          </ElButton>
        )
      }
    }
  }
])

const actionFn = (data: TableSlotDefault) => {
  console.log(data)
}
</script>

<template>
  <ContentWrap :title="`${t('router.treeTable')} ${t('tableDemo.example')}`">
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>

</script>

<template>
  <Table
    v-model:pageSize="tableObject.pageSize"
    v-model:currentPage="tableObject.currentPage"
    :data="tableObject.tableList"
    :loading="tableObject.loading"
    :pagination="{
      total: tableObject.total
    }"
    @register="register"
  />
</template>

```

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

### Vue Component Using useTagsView

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/hooks/useTagsView.md

Demonstrates how to import and use the useTagsView hook within a Vue component to manage tags. Includes examples for closing all, left, right, other, and current tabs, as well as refreshing and setting titles.

```vue
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ElButton } from 'element-plus'
import { useTagsView } from '@/hooks/web/useTagsView'
import { useRouter } from 'vue-router'

const { push } = useRouter()

const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } = 
  useTagsView()

const closeAllTabs = () => {
  closeAll(() => {
    push('/dashboard/analysis')
  })
}

const closeLeftTabs = () => {
  closeLeft()
}

const closeRightTabs = () => {
  closeRight()
}

const closeOtherTabs = () => {
  closeOther()
}

const refresh = () => {
  refreshPage()
}

const closeCurrentTab = () => {
  closeCurrent(undefined, () => {
    push('/dashboard/analysis')
  })
}

const setTabTitle = () => {
  setTitle(new Date().getTime().toString())
}

const setAnalysisTitle = () => {
  setTitle(`分析页-${new Date().getTime().toString()}`, '/dashboard/analysis')
}
</script>

<template>
  <ContentWrap title="useTagsView">
    <ElButton type="primary" @click="closeAllTabs"> 关闭所有标签页 </ElButton>
    <ElButton type="primary" @click="closeLeftTabs"> 关闭左侧标签页 </ElButton>
    <ElButton type="primary" @click="closeRightTabs"> 关闭右侧标签页 </ElButton>
    <ElButton type="primary" @click="closeOtherTabs"> 关闭其他标签页 </ElButton>
    <ElButton type="primary" @click="closeCurrentTab"> 关闭当前标签页 </ElButton>
    <ElButton type="primary" @click="refresh"> 刷新当前标签页 </ElButton>
    <ElButton type="primary" @click="setTabTitle"> 修改当前标题 </ElButton>
    <ElButton type="primary" @click="setAnalysisTitle"> 修改分析页标题 </ElButton>
  </ContentWrap>
</template>

</script>
```

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

### Preview Built Project Locally

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/deploy.md

After building, use these commands to preview the project locally for development, testing, or production environments. Do not open the HTML files directly.

```bash
# 先打包在进行预览

# 预览开发环境
pnpm run serve:dev

# 预览测试环境
pnpm run serve:test

# 预览生产环境
pnpm run serve:pro
```

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

### Build Project for Different Environments

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/deploy.md

Execute these commands to build the project for development, testing, or production environments. The output will be placed in corresponding 'dist-*' folders.

```bash
pnpm run build:dev ===> dist-dev
pnpm run build:test ===> dist-test
pnpm run build:pro ===> dist-pro
```

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

### Project Directory Structure

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/introduction.md

Overview of the project's file and directory organization.

```bash
. 
├── .github # github workflows 相关
├── .husky # husky 配置
├── .vscode # vscode 配置
├── mock # 自定义 mock 数据及配置
├── public # 静态资源
├── src # 项目代码
│   ├── api # api接口管理
|   |── axios # axios配置
│   ├── assets # 静态资源
│   ├── components # 公用组件
│   ├── constants # 存放常量
│   ├── hooks # 常用hooks
│   ├── layout # 布局组件
│   ├── locales # 语言文件
│   ├── plugins # 外部插件
│   ├── router # 路由配置
│   ├── store # 状态管理
│   ├── styles # 全局样式
│   ├── utils # 全局工具类
│   ├── views # 路由页面
│   ├── App.vue # 入口vue文件
│   ├── main.ts # 主入口文件
│   └── permission.ts # 路由拦截
├── types # 全局类型
├── .env.base # 本地开发环境 环境变量配置
├── .env.dev # 打包到开发环境 环境变量配置
├── .env.gitee # 针对 gitee 的环境变量 可忽略
├── .env.pro # 打包到生产环境 环境变量配置
├── .env.test # 打包到测试环境 环境变量配置
├── .eslintignore # eslint 跳过检测配置
├── .eslintrc.js # eslint 配置
├── .gitignore # git 跳过配置
├── .prettierignore # prettier 跳过检测配置
├── .stylelintignore # stylelint 跳过检测配置
├── .versionrc 自动生成版本号及更新记录配置
├── CHANGELOG.md # 更新记录
├── commitlint.config.js # git commit 提交规范配置
├── index.html # 入口页面
├── package.json
├── .postcssrc.js # postcss 配置
├── prettier.config.js # prettier 配置
├── README.md # 英文 README
├── README.zh-CN.md # 中文 README
├── stylelint.config.js # stylelint 配置
├── tsconfig.json # typescript 配置
├── vite.config.ts # vite 配置
└── uno.config.ts # unocss 配置

```

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

### Editor Component Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/editor.md

Example of how to use the Editor component in a Vue application, including v-model binding and event handling.

```APIDOC
## Editor Component Usage

### Description
This example demonstrates how to import and use the `Editor` component, bind its content using `v-model`, and handle the `change` event.

### Usage
```vue
<script setup lang="ts">
import { Editor } from '@/components/Editor'
import { ref} from 'vue'

const defaultHtml = ref('<p>hello <strong>world</strong></p>')

const change = (html: string) => {
  console.log(html)
}
</script>

<template>
  <Editor v-model="defaultHtml" ref="editorRef" @change="change" />
</template>
```
```

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

### Use CSS Prefix in Vue/TS

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/settings.md

Dynamically get the CSS prefix class in Vue or TypeScript components using the `useDesign` hook.

```typescript
import { useDesign } from '/@/hooks/web/useDesign'

const { prefixCls } = useDesign('app')

// prefixCls => v-app

```

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

### Basic CountTo Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/count-to.md

Import and use the CountTo component with basic start and end values. Ensure the component is correctly imported from '@/components/CountTo'.

```vue
<script setup lang="ts">
import { CountTo } from '@/components/CountTo'
</script>

<template>
  <CountTo :start-val="0" :end-val="35225" />
</template>

```

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

### Configure Multilingual Settings

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/settings.md

Set up language options and default locale. Uses `wsCache` for persistence.

```typescript
import { useCache } from '@/hooks/web/useCache'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'

const { wsCache } = useCache()

export const elLocaleMap = {
  'zh-CN': zhCn,
  en: en
}
export interface LocaleState {
  currentLocale: LocaleDropdownType
  localeMap: LocaleDropdownType[]
}

export const localeModules: LocaleState = {
  currentLocale: {
    lang: wsCache.get('lang') || 'zh-CN',
    elLocale: elLocaleMap[wsCache.get('lang') || 'zh-CN']
  },
  // 多语言
  localeMap: [
    {
      lang: 'zh-CN',
      name: '简体中文'
    },
    {
      lang: 'en',
      name: 'English'
    }
  ]
}

```

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

### Basic Infotip Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/infotip.md

Demonstrates how to import and use the Infotip component with a title and a schema defining highlighted keywords and their associated labels.

```vue
<script setup lang="ts">
import { Infotip } from '@/components/Infotip'
</script>

<template>
  <Infotip
    title="推荐使用Iconify组件"
    :schema="[
      {
        label: 'Iconify组件基本包含所有的图标，你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。',
        keys: ['Iconify']
      },
      {
        label: '访问地址',
        keys: ['访问地址']
      }
    ]"
  />
</template>

```

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

### Vue Router Warning Example

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/fqa.md

This warning from Vue Router indicates no matching route was found. It is safe to ignore as it does not appear in production builds.

```javascript
[Vue Router warn]: No match found for location with path "/authorization/menu"

```

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

### Generate Component using Plop

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/dep/create-module.md

Run this command to initiate the Plop scaffolding process for generating a new component. You will be prompted to select 'component' and then enter the component name.

```shell
npm run p
```

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

### Base Environment Configuration (.env.base)

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/settings.md

Configuration for the local development environment. Sets NODE_ENV to development and defines base API path, build path, and application title.

```bash
# Environment
NODE_ENV = development

# API prefix
VITE_API_BASEPATH = base

# Build path
VITE_BASE_PATH = /

# Title
VITE_APP_TITLE = ElementAdmin
```

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

### Waterfall Component Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/waterfall.md

Example of how to use the Waterfall component in a Vue.js application. It demonstrates data fetching, loading states, and event handling for loading more items.

```APIDOC
## Waterfall Component

### Description
Displays data in a masonry layout. Requires data items to have a height field for correct positioning.

### Props

- **data** (Array) - The data to display. Each item must include a height field.
- **reset** (boolean) - Whether to re-layout on window resize. Defaults to `true`.
- **width** (number) - The width of each item. Defaults to `200`.
- **gap** (number) - The gap between items. Defaults to `20`.
- **loadingText** (string) - Text to display when loading. Defaults to `加载中...`.
- **loading** (boolean) - Indicates if the component is currently loading. Defaults to `false`.
- **end** (boolean) - Indicates if all data has been loaded. Defaults to `false`.
- **endText** (string) - Text to display when loading is finished. Defaults to `没有更多了`.
- **props** (object) - Aliases for data fields. Defaults to `{ src: 'src', height: 'height' }`.

### Events

- **loadMore**: Triggered when the user needs to load more data. No callback parameters.
```

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

### Basic Highlight Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/highlight.md

Demonstrates how to use the Highlight component to highlight specific keywords within a text. Ensure the component is imported correctly.

```vue
<script setup lang="ts">
import { Highlight } from '@/components/Highlight'
</script>

<template>
  <Highlight :keys="['十年前', '现在']">
    种一棵树最好的时间是十年前，其次就是现在。
  </Highlight>
</template>

```

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

### Project Style File Structure

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/design.md

This bash snippet shows the directory structure for style files in the project. 'variables.module.less' and 'var.css' are globally injected.

```bash
.\n├── index.less # 入口\n├── theme.less # 主题相关\n├── var.css  # css变量\n└── variables.module.less # less变量

```

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

### Accessing Environment Variables in Vue

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/settings.md

Demonstrates how to access environment variables prefixed with VITE_ within your Vue project code. Ensure variables start with 'VITE_' to be embedded.

```javascript
console.log(import.meta.env.VITE_APP_TITLE)
```

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

### Get Role Information in LoginForm

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/auth.md

This function fetches role information based on user credentials and dynamically generates routes. It supports both server-side and front-end defined dynamic routes.

```typescript
// 获取角色信息
const getRole = async () => {
  const formData = await getFormData<UserType>()
  const params = {
    roleName: formData.username
  }
  const res =
    appStore.getDynamicRouter && appStore.getServerDynamicRouter
      ? await getAdminRoleApi(params)
      : await getTestRoleApi(params)
  if (res) {
    const routers = res.data || []
    setStorage('roleRouters', routers)
    appStore.getDynamicRouter && appStore.getServerDynamicRouter
      ? await permissionStore.generateRoutes('server', routers).catch(() => {})
      : await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})

    permissionStore.getAddRouters.forEach((route) => {
      addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
    })
    permissionStore.setIsAddRouters(true)
    push({ path: redirect.value || permissionStore.addRouters[0].path })
  }
};
```

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

### Clone Project from GitHub

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/index.md

Use this command to clone the project repository from GitHub.

```bash
git clone https://github.com/kailong321200875/vue-element-plus-admin.git
```

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

### Basic Table Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/table.md

Demonstrates the fundamental way to use the Table component by passing columns and data directly.

```APIDOC
## Basic Table Usage

### Description
This example shows how to use the `Table` component with predefined columns and data.

### Component Usage
```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { Table, TableColumn } from '@/components/Table'

const columns = reactive<TableColumn[]>([
  {
    field: 'title',
    label: 'title'
  },
  {
    field: 'author',
    label: 'author'
  }
])

const data = reactive([
  {
    title: 'title1',
    author: 'author1'
  },
  {
    title: 'title2',
    author: 'author2'
  },
  {
    title: 'title3',
    author: 'author3'
  }
])
</script>

<template>
  <Table :columns="columns" :data="data" />
</template>
```
```

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

### hasPermi Function Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/permission.md

Import and use the hasPermi function within your script to programmatically control element visibility, for example, using v-if. This offers more flexibility in complex conditional logic.

```ts
import { hasPermi } from '@/components/Permission'

```

```vue
<ElButton v-if="hasPermi('add')" type="primary"> Add </ElButton>

```

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

### createImageViewer

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/image-viewer.md

The `createImageViewer` function allows you to programmatically open an image preview instance. It accepts an options object to configure the preview's behavior and content.

```APIDOC
## createImageViewer

### Description
Creates and displays an image viewer instance.

### Parameters
#### Options Object
- **urlList** (`string[]`) - Required - The list of image URLs to display.
- **zIndex** (`number`) - Optional - The z-index for the image viewer.
- **initialIndex** (`number`) - Optional - The index of the image to display initially. Defaults to 1.
- **infinite** (`boolean`) - Optional - Whether to allow infinite looping through images. Defaults to true.
- **hideOnClickModal** (`boolean`) - Optional - Whether to close the viewer when clicking on the modal background. Defaults to false.
- **appendToBody** (`boolean`) - Optional - Whether to append the viewer to the body. Defaults to false.
- **show** (`boolean`) - Optional - Whether to initially show the image preview. Defaults to false.

### Usage Example
```javascript
import { createImageViewer } from '@/components/ImageViewer'

createImageViewer({
  urlList: [
    'url1.jpg',
    'url2.png'
  ],
  initialIndex: 0,
  zIndex: 9999
})
```
```

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

### Configure Vite for Preloading Modules

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/fqa.md

To prevent page reloads during route transitions caused by un-preloaded third-party modules, add them to `optimizeDeps.include` in `vite.config.ts`. This ensures modules are preloaded and bundled when the service starts.

```typescript
optimizeDeps.include

```

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

### Clone Project from Gitee

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/index.md

Use this command to clone the project repository from Gitee.

```bash
git clone https://gitee.com/kailong110120130/vue-element-plus-admin.git
```

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

### Highlight Component Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/highlight.md

Demonstrates how to import and use the Highlight component in a Vue application. The component accepts an array of strings for keywords to be highlighted and can be used with plain text content.

```APIDOC
## Highlight Component

### Description

The Highlight component is designed to wrap plain text and highlight specific keywords within it. It accepts an array of keywords to highlight and can be customized with various properties.

### Usage

Import the `Highlight` component and use it in your template. Pass an array of strings to the `keys` prop to specify which words to highlight.

```vue
<script setup lang="ts">
import { Highlight } from '@/components/Highlight'
</script>

<template>
  <Highlight :keys="['十年前', '现在']">
    种一棵树最好的时间是十年前，其次就是现在。
  </Highlight>
</template>
```

### Props

| Prop Name | Description | Type     | Accepted Values | Default Value      |
| --------- | ----------- | -------- | --------------- | ------------------ |
| `tag`     | The wrapper tag for the highlighted text. | `string` | -               | `span`             |
| `keys`    | An array of keywords to highlight. | `string[]` | -               | `[]`               |
| `color`   | The color to use for highlighting. | `string` | -               | `var(--el-color-primary)` |

### Events

| Event Name | Description              | Callback Parameters | |
| ---------- | ------------------------ | ------------------- | |
| `click`    | Triggered when a keyword is clicked. | `key: string`       |                   |
```

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

### Test Environment Configuration (.env.test)

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/settings.md

Configuration for the test environment. Sets NODE_ENV to production and defines API path, build path, debugger/console removal flags, sourcemap settings, and output directory.

```bash
# Environment
NODE_ENV = production

# API prefix
VITE_API_BASEPATH = test

# Build path
VITE_BASE_PATH = /dist-test/

# Whether to remove debugger
VITE_DROP_DEBUGGER = false

# Whether to remove console.log
VITE_DROP_CONSOLE = false

# Whether sourcemap
VITE_SOURCEMAP = true

# Output directory
VITE_OUT_DIR = dist-test
```

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

### Production Environment Configuration (.env.pro)

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/settings.md

Configuration for the production environment. Sets NODE_ENV to production and defines API path, build path, debugger/console removal flags, sourcemap settings, output directory, and application title. Debugger and console logs are removed for production builds.

```bash
# Environment
NODE_ENV = production

# API prefix
VITE_API_BASEPATH = pro

# Build path
VITE_BASE_PATH = /

# Whether to remove debugger
VITE_DROP_DEBUGGER = true

# Whether to remove console.log
VITE_DROP_CONSOLE = true

# Whether sourcemap
VITE_SOURCEMAP = false

# Output directory
VITE_OUT_DIR = dist-pro

# Title
VITE_APP_TITLE = ElementAdmin
```

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

### Basic Dialog Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/dialog.md

Demonstrates how to import and use the Dialog component in a Vue application. It shows how to control visibility with `v-model` and includes a custom footer slot.

```vue
<script setup lang="ts">
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { ref } from 'vue'

const dialogVisible = ref(false)
</script>

<template>
  <ElButton type="primary" @click="dialogVisible = !dialogVisible">
    open
  </ElButton>
  <Dialog v-model="dialogVisible" title="dialog">
    <div v-for="v in 10000" :key="v">{{ v }}</div>
    <template #footer>
      <el-button @click="dialogVisible = false">close</el-button>
    </template>
  </Dialog>
</template>

```

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

### Define API Request Functions

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/guide/mock.md

Define functions for various API requests including getting lists, saving data, and deleting items. It is recommended to define types for parameters and return values for easier validation and maintenance.

```typescript
import request from '@/axios'
import type { TableData } from './types'

export const getTableListApi = (params: any) => {
  return request.get({ url: '/example/list', params })
}

export const getTreeTableListApi = (params: any) => {
  return request.get({ url: '/example/treeList', params })
}

export const saveTableApi = (data: Partial<TableData>): Promise<IResponse> => {
  return request.post({ url: '/example/save', data })
}

export const getTableDetApi = (id: string): Promise<IResponse<TableData>> => {
  return request.get({ url: '/example/detail', params: { id } })
}

export const delTableListApi = (ids: string[] | number[]): Promise<IResponse> => {
  return request.post({ url: '/example/delete', data: { ids } })
}
```

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

### Infotip Component Usage

Source: https://github.com/kailong321200875/vue-element-plus-admin-doc/blob/master/components/infotip.md

Demonstrates how to import and use the Infotip component in a Vue application, including passing title and schema props.

```APIDOC
## Infotip Component

### Description
Displays a title and a list of information items, with support for highlighting specific keywords within the content. It is built upon the Highlight component.

### Props

- **title** (string) - Optional - The main title for the Infotip.
- **schema** (string[]/TipSchema[]) - Optional - An array of data objects defining the content and keywords to be displayed and highlighted. Each object typically contains a `label` (the text content) and `keys` (an array of keywords within the label to highlight).
- **showIndex** (boolean) - Optional - Whether to display an index number for each item in the schema. Defaults to `true`.
- **highlightColor** (string) - Optional - The color used for highlighting keywords. Defaults to the primary theme color (`var(--el-color-primary)`).

### Events

- **click** - Emitted when a highlighted keyword is clicked. The callback receives the clicked keyword as a string argument (`key`).

### Usage Example

```vue
<script setup lang="ts">
import { Infotip } from '@/components/Infotip'
</script>

<template>
  <Infotip
    title="推荐使用Iconify组件"
    :schema="[
      {
        label: 'Iconify组件基本包含所有的图标，你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。',
        keys: ['Iconify']
      },
      {
        label: '访问地址',
        keys: ['访问地址']
      }
    ]"
  />
</template>
```
```