### Verify Environment and Install Dependencies

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/index.md

Commands to verify Node.js installation, install pnpm globally, and install project dependencies. pnpm is strictly recommended for dependency management.

```bash
# Verify Node.js and npm
npm -v
node -v

# Install pnpm globally
npm install -g pnpm

# Install project dependencies
pnpm i
```

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

### Install and Run Node.js Test Server (Bash)

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/other/server.md

This snippet shows how to navigate to the test server directory, install its dependencies using Yarn, and start the server. Ensure you have Node.js and Yarn installed before executing these commands.

```bash
cd ./test/server

# 安装依赖
yarn

# 运行服务
yarn start
```

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

### Setup and Initialize i18n Instance

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/dep/i18n.md

Configures the i18n instance during application startup, supporting both local and remote language data loading.

```typescript
export async function setupI18n(app: App) {
  const options = await createI18nOptions();
  i18n = createI18n(options) as I18n;
  app.use(i18n);
}

async function createI18nOptions(): Promise<I18nOptions> {
  const locale = localeStore.getLocale;
  const defaultLocal = await import(`./lang/${locale}.ts`);
  const message = defaultLocal.default?.message ?? {};

  return {
    legacy: false,
    locale,
    fallbackLocale: fallback,
    messages: { [locale]: message },
    availableLocales: availableLocales,
    sync: true,
    silentTranslationWarn: true,
    missingWarn: false,
    silentFallbackWarn: true,
  };
}
```

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

### Project NPM Scripts

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/index.md

A collection of scripts defined in package.json for development, building, linting, and maintenance tasks. These scripts facilitate common workflows such as starting the dev server, building for production, and running code quality checks.

```json
"scripts": {
  "bootstrap": "pnpm install",
  "build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build",
  "build:analyze": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build --mode analyze",
  "build:docker": "vite build --mode docker",
  "build:no-cache": "pnpm clean:cache && npm run build",
  "build:test": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build --mode test",
  "commit": "czg",
  "dev": "pnpm vite",
  "preinstall": "npx only-allow pnpm",
  "postinstall": "turbo run stub",
  "lint": "turbo run lint",
  "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
  "lint:prettier": "prettier --write .",
  "lint:stylelint": "stylelint \"**/*.{vue,css,less,scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
  "prepare": "husky install",
  "preview": "npm run build && vite preview",
  "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
  "serve": "npm run dev",
  "test:gzip": "npx http-server dist --cors --gzip -c-1",
  "type:check": "vue-tsc --noEmit --skipLibCheck"
}
```

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

### Clone Project Repository

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/index.md

Commands to clone the Vue Vben Admin source code from GitHub or Gitee. Ensure the file path does not contain spaces or non-ASCII characters to avoid installation errors.

```bash
# Clone from GitHub
git clone https://github.com/vbenjs/vue-vben-admin.git

# Clone from Gitee
git clone https://gitee.com/annsion/vue-vben-admin.git
```

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

### Modal Inner Component Setup with useModalInner in Vue

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/modal.md

Illustrates the setup for a modal's internal component using the `useModalInner` hook. This example shows how to register the modal within itself and access internal control functions like `closeModal` and `setModalProps`.

```vue
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="Modal Title"
    :helpMessage="['提示1', '提示2']"
  >
    <a-button type="primary" @click="closeModal" class="mr-2">从内部关闭弹窗</a-button>

    <a-button type="primary" @click="setModalProps">从内部修改title</a-button>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  export default defineComponent({
    components: { BasicModal },
    setup() {
      const [register, { closeModal, setModalProps }] = useModalInner();
      return {
        register,
        closeModal,
        setModalProps: () => {
          setModalProps({ title: 'Modal New Title' });
        },
      };
    },
  });
</script>
```

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

### Vue Loading Component Usage Example

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/loading.md

Demonstrates how to use the Loading component in a Vue.js application. It shows how to control the loading state, tip text, and positioning (fullscreen or container-relative) using component props and local state management. The example utilizes Vue's Composition API.

```vue
<template>
  <div class="p-5" ref="wrapEl" v-loading="loadingRef" loading-tip="加载中...">
    <a-button class="my-4 mr-4" type="primary" @click="openCompFullLoading">全屏 Loading</a-button>
    <a-button class="my-4" type="primary" @click="openCompAbsolute">容器内 Loading</a-button>
    <Loading :loading="loading" :absolute="absolute" :tip="tip" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref } from 'vue';
  import { Loading } from '/@/components/Loading';
  export default defineComponent({
    components: { Loading },
    setup() {
      const compState = reactive({
        absolute: false,
        loading: false,
        tip: '加载中...',
      });

      function openLoading(absolute: boolean) {
        compState.absolute = absolute;
        compState.loading = true;
        setTimeout(() => {
          compState.loading = false;
        }, 2000);
      }

      function openCompFullLoading() {
        openLoading(false);
      }

      function openCompAbsolute() {
        openLoading(true);
      }

      return {
        openCompFullLoading,
        openCompAbsolute,
        ...toRefs(compState),
      };
    },
  });
</script>
```

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

### Installing Iconify Dependencies

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/dep/icon.md

Provides the necessary commands to install the dependencies required for using Iconify icons, including the core Iconify package and purge-icons.

```bash
yarn add @iconify/iconify

yarn add @iconify/json @purge-icons/generated -D
```

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

### Make API Requests with Encapsulated HTTP Client

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/mock.md

Shows how to make API requests using the project's unified http client, `defHttp`. This example demonstrates defining an API endpoint, its parameters, and return type for the login functionality.

```typescript
import { defHttp } from '/@/utils/http/axios';
import { LoginParams, LoginResultModel } from './model/userModel';

enum Api {
  Login = '/login',
}

export function loginApi(params: LoginParams) {
  return defHttp.request<LoginResultModel>({
    url: Api.Login,
    method: 'POST',
    params,
  });
}
```

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

### Implement BasicTable with API Integration and Actions

Source: https://context7.com/vbenjs/vue-vben-admin-doc/llms.txt

This example demonstrates how to use the BasicTable component with a custom API fetcher, column definitions, and a TableAction component for row-specific operations. It includes configuration for search forms, pagination settings, and event handlers for CRUD operations.

```vue
<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="handleAdd">新增</a-button>
      <a-button @click="reload">刷新</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            { label: '编辑', onClick: handleEdit.bind(null, record) },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '确定删除吗？',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
          :dropDownActions="[
            { label: '详情', onClick: handleDetail.bind(null, record) },
          ]"
        />
      </template>
    </template>
  </BasicTable>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';

const columns: BasicColumn[] = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '姓名', dataIndex: 'name', width: 150 },
  { title: '地址', dataIndex: 'address', ellipsis: true },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    format: (text) => (text === 1 ? '启用' : '禁用'),
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
    sorter: true,
  },
];

export default defineComponent({
  components: { BasicTable, TableAction },
  setup() {
    const [registerTable, { reload, getSelectRows, setSelectedRowKeys, updateTableDataRecord }] = useTable({
      title: '用户列表',
      api: (params) => fetch('/api/users?' + new URLSearchParams(params)).then(res => res.json()),
      columns,
      bordered: true,
      showIndexColumn: true,
      rowKey: 'id',
      rowSelection: { type: 'checkbox' },
      useSearchForm: true,
      formConfig: {
        labelWidth: 80,
        schemas: [
          { field: 'name', label: '姓名', component: 'Input', colProps: { span: 6 } },
          { field: 'status', label: '状态', component: 'Select', colProps: { span: 6 },
            componentProps: { options: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 }] }
          },
        ],
      },
      fetchSetting: {
        pageField: 'page',
        sizeField: 'pageSize',
        listField: 'data.list',
        totalField: 'data.total',
      },
      actionColumn: { width: 200, title: '操作', dataIndex: 'action' },
    });

    function handleAdd() { console.log('新增'); }
    function handleEdit(record: any) { console.log('编辑:', record); }
    function handleDelete(record: any) { console.log('删除:', record.id); reload(); }
    function handleDetail(record: any) { console.log('详情:', record); }

    return { registerTable, reload, handleAdd, handleEdit, handleDelete, handleDetail };
  },
});
</script>
```

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

### Opening Modal with Data using useModal (TypeScript)

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/modal.md

Provides an example of how to open a modal and pass data to it using the `openModal` function from the `useModal` hook. The `data` parameter allows for initializing the modal's content or state.

```typescript
// true/false: 打开关闭弹窗
// data: 传递到子组件的数据
openModal(true, data);
```

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

### Drawer Inner Component Setup in Vue

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/drawer.md

Shows the setup for a drawer's internal content component using `BasicDrawer` and the `useDrawerInner` hook. It demonstrates how to register the drawer and use its internal methods like `closeDrawer`.

```vue
<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%">
    Drawer Info.
    <a-button type="primary" @click="closeDrawer">内部关闭drawer</a-button>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  export default defineComponent({
    components: { BasicDrawer },
    setup() {
      const [register, { closeDrawer }] = useDrawerInner();
      return { register, closeDrawer };
    },
  });
</script>
```

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

### Vue Modal Component Usage

Source: https://context7.com/vbenjs/vue-vben-admin-doc/llms.txt

Demonstrates how to use the custom BasicModal component for user information forms. It includes setup for BasicForm within the modal and handling form submission. The example also shows how to open and manage the modal from a parent component.

```vue
<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="用户信息"
    :helpMessage="['提示：请填写完整信息']"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form';

export default defineComponent({
  components: { BasicModal, BasicForm },
  emits: ['success'],
  setup(_, { emit }) {
    const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
      labelWidth: 100,
      schemas: [
        { field: 'name', label: '姓名', component: 'Input', required: true },
        { field: 'email', label: '邮箱', component: 'Input', rules: [{ type: 'email', message: '请输入正确的邮箱' }] },
      ],
      showActionButtonGroup: false,
    });

    const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
      resetFields();
      if (data?.record) {
        setFieldsValue(data.record);
      }
    });

    async function handleSubmit() {
      try {
        const values = await validate();
        setModalProps({ confirmLoading: true });
        // 模拟接口请求
        await new Promise(resolve => setTimeout(resolve, 1000));
        closeModal();
        emit('success', values);
      } finally {
        setModalProps({ confirmLoading: false });
      }
    }

    return { register, registerForm, handleSubmit };
  },
});
</script>

<!-- Page.vue - 使用弹窗 -->
<template>
  <div>
    <a-button @click="openModal(true, { record: null })">新增用户</a-button>
    <a-button @click="openModal(true, { record: { name: '张三', email: 'test@test.com' } })">编辑用户</a-button>
    <UserModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useModal } from '/@/components/Modal';
import UserModal from './UserModal.vue';

export default defineComponent({
  components: { UserModal },
  setup() {
    const [registerModal, { openModal, setModalProps }] = useModal();

    function handleSuccess(values: any) {
      console.log('保存成功:', values);
    }

    return { registerModal, openModal, handleSuccess };
  },
});
</script>
```

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

### Project Styles Directory Structure (Bash)

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/design.md

This bash snippet shows the directory structure for the project's design and style-related files. It includes directories for Ant Design overrides, color variables, public classes, theme configurations, transitions, and variables. The `config.less` file is automatically imported into every component.

```bash
.\n├── ant # ant design 一些样式覆盖\n├── color.less # 颜色\n├── index.less # 入口\n├── public.less # 公共类\n├── theme.less # 主题相关\n├── config.less  # 每个组件都会自动引入样式\n├── transition # 动画相关\n└── var # 变量\n
```

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

### CommitLint configuration and usage

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/dep/lint.md

Demonstrates how to disable commit message validation and provides an example of a correctly formatted commit message.

```bash
# To disable, comment out in .husky/commit-msg:
# npx --no-install commitlint --edit "$1"

# Example commit:
git commit -m 'feat(home): add home page'
```

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

### Use i18n Hook for Translation

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/dep/i18n.md

Demonstrates how to use the project-specific useI18n hook to retrieve translated strings in components.

```typescript
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();

const title = t('components.modal.title');
```

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

### Download QR Code with Vue

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/qrcode.md

This code demonstrates how to trigger the download of a generated QR code using the QrCode component's `download` method. It shows how to get a reference to the QrCode component instance and call its `download` method with a desired filename. This requires the `QrCodeActionType` for type hinting.

```vue
function download() {
  const qrEl = unref(qrRef);
  if (!qrEl) return;
  qrEl.download('文件名');
}
```

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

### Vue Usage Example for CodeEditor Component

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/code-editor.md

Demonstrates how to integrate and use the CodeEditor component within a Vue 3 application. It shows how to bind a value using v-model and set the code mode.

```vue
<template>
  <CodeEditor v-model:value="value" :mode="modeValue" />
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { CodeEditor } from '/@/components/CodeEditor';

  export default defineComponent({
    components: { CodeEditor },
    setup() {
      const modeValue = ref('application/json');
      const value = ref(''); // Initialize value if needed
      return { value, modeValue };
    },
  });
</script>
```

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

### Basic Modal Usage in Vue

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/modal.md

Demonstrates how to use the `BasicModal` component within a Vue single-file component. It highlights the use of `v-bind="$attrs"` to pass attributes to the `BasicModal` and includes example help messages.

```vue
<template>
  <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']">
    Modal Info.
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  export default defineComponent({
    components: { BasicModal },
    setup() {
      return {};
    },
  });
</script>
```

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

### ApiSelect and ApiTreeSelect in Vue Forms

Source: https://context7.com/vbenjs/vue-vben-admin-doc/llms.txt

Illustrates how to use ApiSelect and ApiTreeSelect components within a Vben Admin BasicForm. These components allow fetching dropdown and tree select options dynamically from backend APIs. The example shows configuration for API endpoints, result field mapping, label and value fields, immediate loading, and parameter passing.

```vue
<template>
  <BasicForm @register="register" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';

const schemas: FormSchema[] = [
  {
    field: 'category',
    component: 'ApiSelect',
    label: '分类',
    componentProps: {
      api: () => fetch('/api/categories').then(res => res.json()),
      resultField: 'data.list',
      labelField: 'name',
      valueField: 'id',
      immediate: true,
      params: { type: 'active' },
      numberToString: true,
      onChange: (value: any) => {
        console.log('选中分类:', value);
      },
    },
  },
  {
    field: 'department',
    component: 'ApiTreeSelect',
    label: '部门',
    componentProps: {
      api: () => fetch('/api/departments/tree').then(res => res.json()),
      resultField: 'data',
      immediate: true,
    },
  },
];

export default defineComponent({
  components: { BasicForm },
  setup() {
    const [register] = useForm({ schemas, labelWidth: 100 });
    return { register };
  },
});
</script>
```

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

### 环境变量配置示例 - Bash

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/settings.md

列出了不同环境下的 `.env` 文件及其加载规则。`.env` 文件在所有环境中加载，`.env.local` 被忽略，`.env.[mode]` 和 `.env.[mode].local` 只在指定模式下加载。

```bash
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
```

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

### 开发环境环境变量配置示例 - Bash

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/settings.md

展示了 `.env.development` 文件中用于开发环境的配置项，如是否开启 Mock 数据、资源公共路径、是否删除 Console.log、本地开发代理等。特别说明了 `VITE_PROXY` 环境变量在 v3.0.0 版本后的重构。

```bash
# 是否开启mock数据，关闭时需要自行对接后台接口
VITE_USE_MOCK=true
# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH=/
# 是否删除Console.log
VITE_DROP_CONSOLE=false
# 本地开发代理，可以解决跨域及多地址代理
# 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
# 可以有多个，注意多个不能换行，否则代理将会失效
VITE_PROXY=[["/api","http://localhost:3000"],["api1","http://localhost:3001"],["/upload","http://localhost:3001/upload"]]

# 接口地址
# 如果没有跨域问题，直接在这里配置即可
VITE_GLOB_API_URL=/api
# 文件上传接口  可选
VITE_GLOB_UPLOAD_URL=/upload
# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
VITE_GLOB_API_URL_PREFIX=
```

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

### 生产环境环境变量配置示例 - Bash

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/settings.md

列出了 `.env.production` 文件中用于生产环境的配置项，包括是否开启 Mock、接口地址、文件上传地址、是否删除 Console.log、资源公共路径、打包压缩配置等。

```bash
# 是否开启mock
VITE_USE_MOCK=true
# 接口地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_API_URL=/api
# 文件上传地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_UPLOAD_URL=/upload
# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
VITE_GLOB_API_URL_PREFIX=
# 是否删除Console.log
VITE_DROP_CONSOLE=true
# 资源公共路径,需要以 / 开头和结尾
VITE_PUBLIC_PATH=/
# 打包是否输出gz｜br文件
# 可选: gzip | brotli | none
# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
VITE_BUILD_COMPRESS = 'gzip'
# 打包是否压缩图片
VITE_USE_IMAGEMIN = false
# 打包是否开启pwa功能
VITE_USE_PWA = false
# 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本
VITE_LEGACY = false
```

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

### 项目环境变量配置示例 - Bash

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/settings.md

提供了 `.env` 文件中常用环境变量的配置示例，包括端口号、网站标题、简称等。这些变量用于配置项目的基本信息和运行环境。

```bash
# 端口号
VITE_PORT=3100
# 网站标题
VITE_GLOB_APP_TITLE=vben admin
# 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符
VITE_GLOB_APP_SHORT_NAME=vben_admin
```

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

### Define Language Translation Modules

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/dep/i18n.md

Example structure for a language file that imports component-specific translations and external locale packages like Ant Design Vue.

```typescript
import { genMessage } from '../helper';
import antdLocale from 'ant-design-vue/es/locale/zh_CN';
import momentLocale from 'moment/dist/locale/zh-cn';

const modules = import.meta.globEager('./zh_CN/**/*.ts');
export default {
  message: {
    ...genMessage(modules, 'zh_CN'),
    antdLocale,
  },
  momentLocale,
  momentLocaleName: 'zh-cn',
};
```

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

### Vue Scoped Styles Example

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/design.md

This Vue template snippet illustrates the difference between global and scoped styles. Styles without the `scoped` attribute are compiled as global styles, potentially leading to conflicts. Adding the `scoped` attribute ensures that styles are encapsulated within the component.

```vue
<style></style>

<style scoped></style>

```

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

### Vue ScrollContainer Usage Example

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/scroll-container.md

This example demonstrates how to use the ScrollContainer component in a Vue.js application. It shows how to import the component, integrate it into a template, and control its scrolling behavior using methods like scrollTo and scrollBottom. The example also includes basic styling for the scrollable area.

```vue
<template>
  <div class="p-4">
    <div class="my-4">
      <a-button @click="scrollTo(100)">滚动到100px位置</a-button>
      <a-button @click="scrollTo(800)">滚动到800px位置</a-button>
      <a-button @click="scrollTo(0)">滚动到顶部</a-button>
      <a-button @click="scrollBottom()">滚动到底部</a-button>
    </div>
    <div class="scroll-wrap">
      <ScrollContainer ref="scrollRef">
        <ul>
          <template v-for="index in 100" :key="index">
            <li>{{ index }}</li>
          </template>
        </ul>
      </ScrollContainer>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
  export default defineComponent({
    components: { CollapseContainer, ScrollContainer },
    setup() {
      const scrollRef = ref<Nullable<ScrollActionType>>(null);
      const getScroll = () => {
        const scroll = unref(scrollRef);
        if (!scroll) {
          throw new Error('scroll is Null');
        }
        return scroll;
      };

      function scrollTo(top: number) {
        getScroll()?.scrollTo(top);
      }

      function scrollBottom() {
        getScroll()?.scrollBottom();
      }

      return {
        scrollTo,
        scrollRef,
        scrollBottom,
      };
    },
  });
</script>
<style lang="less" scoped>
  .scroll-wrap {
    width: 50%;
    height: 300px;
    background: #fff;
  }
</style>
```

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

### Git 多源仓库同步

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/other/faq.md

通过添加多个远程仓库源，开发者可以在维护公司私有代码的同时，同步开源项目的最新更新。

```bash
# 添加公司 git 源
git remote add up gitUrl

# 提交代码到公司仓库
git push up main

# 同步开源最新代码
git pull origin main
```

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

### Update Form Schema Example

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/form.md

Demonstrates how to update the form's schema configuration. This can be done for a single field or multiple fields simultaneously. The example shows updating component properties like `disabled` for specific fields.

```typescript
updateSchema({ field: 'filed', componentProps: { disabled: true } });
updateSchema([
  { field: 'filed', componentProps: { disabled: true } },
  { field: 'filed1', componentProps: { disabled: false } },
]);
```

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

### Using the Markdown Component in Vue

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/markdown.md

This snippet demonstrates how to integrate and use the Markdown component within a Vue.js application. It includes basic setup, v-model binding for content, and a function to toggle the dark theme of the editor. It requires the MarkDown component and Vue's setup functions.

```vue
<template>
  <div class="p-4">
    <a-button @click="toggleTheme" class="mb-2" type="primary">黑暗主题</a-button>
    <MarkDown v-model:value="value" ref="markDownRef" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';
  export default defineComponent({
    components: { MarkDown },
    setup() {
      const markDownRef = ref<Nullable<MarkDownActionType>>(null);
      const valueRef = ref(`
# title

# content
`);

      function toggleTheme() {
        const markDown = unref(markDownRef);
        if (!markDown) return;
        const vditor = markDown.getVditor();
        vditor.setTheme('dark');
      }
      return {
        value: valueRef,
        toggleTheme,
        markDownRef,
      };
    },
  });
</script>
```

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

### Configure Permission Mode and Route Meta

Source: https://context7.com/vbenjs/vue-vben-admin-doc/llms.txt

Shows how to configure the permission mode (ROUTE_MAPPING, ROLE, BACK) in project settings and define role-based access control within route meta information.

```typescript
// 权限模式配置 - src/settings/projectSetting.ts
const setting = {
  // ROUTE_MAPPING: 前端模式（菜单由路由生成）
  // ROLE: 前端模式（菜单路由分开）
  // BACK: 后端动态路由模式
  permissionMode: PermissionModeEnum.ROUTE_MAPPING,
};

// 路由权限配置
{
  path: 'auth-page',
  name: 'AuthPage',
  component: () => import('/@/views/demo/auth.vue'),
  meta: {
    title: '权限页面',
    roles: ['super', 'admin'], // 允许访问的角色
    ignoreAuth: false, // 是否忽略权限
  },
}
```

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

### Implement Internationalization and Locale Configuration

Source: https://context7.com/vbenjs/vue-vben-admin-doc/llms.txt

Demonstrates how to use the i18n hook for text translation and locale switching. Includes the structure for locale settings and language definition files.

```typescript
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();
const title = t('common.okText');

import { useLocale } from '/@/locales/useLocale';

const { changeLocale, getLocale } = useLocale();
changeLocale('en');

export const localeSetting: LocaleSetting = {
  showPicker: true,
  locale: 'zh_CN',
  fallback: 'zh_CN',
  availableLocales: ['zh_CN', 'en'],
};

export default {
  okText: '确定',
  cancelText: '取消',
  submitText: '提交',
};
```

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

### Change Application Locale Dynamically

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/dep/i18n.md

Utilizes the useLocale hook to programmatically switch the application language at runtime.

```typescript
import { useLocale } from '/@/locales/useLocale';

const { changeLocale } = useLocale();

changeLocale('en');
```

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

### Project Configuration Settings (JavaScript)

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/settings.md

Defines the main project configuration object, including settings for the UI, permissions, session timeout, theme, and various components like header, menu, and tabs. It also covers transition animations and keep-alive settings.

```javascript
// ! 改动后需要清空浏览器缓存
const setting: ProjectConfig = {
  // 是否显示SettingButton
  showSettingButton: true,

  // 是否显示主题切换按钮
  showDarkModeToggle: true,

  // 设置按钮位置 可选项
  // SettingButtonPositionEnum.AUTO: 自动选择
  // SettingButtonPositionEnum.HEADER: 位于头部
  // SettingButtonPositionEnum.FIXED: 固定在右侧
  settingButtonPosition: SettingButtonPositionEnum.AUTO,

  // 权限模式,默认前端角色权限模式
  // ROUTE_MAPPING: 前端模式（菜单由路由生成，默认）
  // ROLE：前端模式（菜单路由分开）
  permissionMode: PermissionModeEnum.ROUTE_MAPPING,
  // 权限缓存存放位置。默认存放于localStorage
  permissionCacheType: CacheTypeEnum.LOCAL,
  // 会话超时处理方案
  // SessionTimeoutProcessingEnum.ROUTE_JUMP: 路由跳转到登录页
  // SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗，覆盖当前页面
  sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
  // 项目主题色
  themeColor: primaryColor,
  // 网站灰色模式，用于可能悼念的日期开启
  grayMode: false,
  // 色弱模式
  colorWeak: false,
  // 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内
  fullContent: false,
  // 主题内容宽度
  contentMode: ContentEnum.FULL,
  // 是否显示logo
  showLogo: true,
  // 是否显示底部信息 copyright
  showFooter: true,
  // 头部配置
  headerSetting: {
    // 背景色
    bgColor: '#ffffff',
    // 固定头部
    fixed: true,
    // 是否显示顶部
    show: true,
    // 主题
    theme: MenuThemeEnum.LIGHT,
    // 开启锁屏功能
    useLockPage: true,
    // 显示全屏按钮
    showFullScreen: true,
    // 显示文档按钮
    showDoc: true,
    // 显示消息中心按钮
    showNotice: true,
    // 显示菜单搜索按钮
    showSearch: true,
  },
  // 菜单配置
  menuSetting: {
    // 背景色
    bgColor: '#273352',
    // 是否固定住菜单
    fixed: true,
    // 菜单折叠
    collapsed: false,
    // 折叠菜单时候是否显示菜单名
    collapsedShowTitle: false,
    // 是否可拖拽
    canDrag: true,
    // 是否显示
    show: true,
    // 菜单宽度
    menuWidth: 180,
    // 菜单模式
    mode: MenuModeEnum.INLINE,
    // 菜单类型
    type: MenuTypeEnum.SIDEBAR,
    // 菜单主题
    theme: MenuThemeEnum.DARK,
    // 分割菜单
    split: false,
    // 顶部菜单布局
    topMenuAlign: 'start',
    // 折叠触发器的位置
    trigger: TriggerEnum.HEADER,
    // 手风琴模式，只展示一个菜单
    accordion: true,
    // 在路由切换的时候关闭左侧混合菜单展开菜单
    closeMixSidebarOnChange: false,
    // 左侧混合菜单模块切换触发方式
    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
    // 是否固定左侧混合菜单
    mixSideFixed: false,
  },
  // 多标签
  multiTabsSetting: {
    // 刷新后是否保留已经打开的标签页
    cache: false,
    // 开启
    show: true,
    // 开启快速操作
    showQuick: true,
    // 是否可以拖拽
    canDrag: true,
    // 是否显示刷新按钮
    showRedo: true,
    // 是否显示折叠按钮
    showFold: true,
  },

  // 动画配置
  transitionSetting: {
    //  是否开启切换动画
    enable: true,
    // 动画名
    basicTransition: RouterTransitionEnum.FADE_SIDE,
    // 是否打开页面切换loading
    openPageLoading: true,
    // 是否打开页面切换顶部进度条
    openNProgress: false,
  },

  // 是否开启KeepAlive缓存  开发时候最好关闭,不然每次都需要清除缓存
  openKeepAlive: true,
  // 自动锁屏时间，为0不锁屏。 单位分钟 默认1个小时
  lockTime: 0,
  // 显示面包屑
  showBreadCrumb: true,
  // 显示面包屑图标
  showBreadCrumbIcon: false,
  // 是否使用全局错误捕获
  useErrorHandle: false,
  // 是否开启回到顶部
  useOpenBackTop: true,
  //  是否可以嵌入iframe页面
  canEmbedIFramePage: true,
  // 切换界面的时候是否删除未关闭的message及notify
  closeMessageOnSwitch: true,
  // 切换界面的时候是否取消已经发送但是未响应的http请求。
  // 如果开启,想对单独接口覆盖。可以在单独接口设置
  removeAllHttpPending: true,
};

```

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

### 获取全局设置 - TypeScript

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/guide/settings.md

演示了如何使用 `useGlobSetting` 函数从环境变量中获取全局配置项。该函数位于 `src/hooks/setting/index.ts`，用于读取项目全局设置。

```typescript
const {
  VITE_GLOB_APP_TITLE,
  VITE_GLOB_API_URL,
  VITE_GLOB_APP_SHORT_NAME,
  VITE_GLOB_API_URL_PREFIX,
  VITE_GLOB_UPLOAD_URL,
} = ENV;

export const useGlobSetting = (): SettingWrap => {
  // Take global configuration
  const glob: Readonly<GlobConfig> = {
    title: VITE_GLOB_APP_TITLE,
    apiUrl: VITE_GLOB_API_URL,
    shortName: VITE_GLOB_APP_SHORT_NAME,
    urlPrefix: VITE_GLOB_API_URL_PREFIX,
    uploadUrl: VITE_GLOB_UPLOAD_URL
  };
  return glob as Readonly<GlobConfig>;
};
```

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

### Configure Default Locale Settings

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/dep/i18n.md

Defines the default language, fallback language, and available language options for the application.

```typescript
export const LOCALE: { [key: string]: LocaleType } = {
  ZH_CN: 'zh_CN',
  EN_US: 'en',
};

export const localeSetting: LocaleSetting = {
  showPicker: true,
  locale: LOCALE.ZH_CN,
  fallback: LOCALE.ZH_CN,
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};

export const localeList: DropMenu[] = [
  {
    text: '简体中文',
    event: 'zh_CN',
  },
  {
    text: 'English',
    event: 'en',
  },
];
```

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

### Row Selection Methods

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/table.md

Methods for managing row selection, including getting selected keys, rows, and clearing selections.

```APIDOC
## Row Selection Methods

### deleteSelectRowByKey

**Description**: Deselects a row by its key.

**Method**: `void`

**Endpoint**: N/A (Component Method)

### getSelectRowKeys

**Description**: Retrieves the keys of all currently selected rows.

**Method**: `() => string[]`

**Endpoint**: N/A (Component Method)

### getSelectRows

**Description**: Retrieves the data of all currently selected rows.

**Method**: `<T = Recordable>() => T[]`

**Endpoint**: N/A (Component Method)

### clearSelectedRowKeys

**Description**: Clears all currently selected rows.

**Method**: `void`

**Endpoint**: N/A (Component Method)

### setSelectedRowKeys

**Description**: Sets the selected rows based on an array of keys.

**Method**: `void`

**Endpoint**: N/A (Component Method)
```

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

### openDrawer Function Usage in TypeScript

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/drawer.md

Provides examples of using the `openDrawer` function from the `useDrawer` hook. It shows how to open/close the drawer and pass data to the drawer component.

```typescript
// true/false: 打开关闭弹窗
// data: 传递到子组件的数据
openDrawer(true, data);
```

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

### Initialize Table with useTable Hook

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/table.md

Shows the basic implementation of the useTable hook to register a table and access internal methods like setLoading.

```vue
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { demoListApi } from '/@/api/demo/table';
  export default defineComponent({
    components: { BasicTable },
    setup() {
      const [registerTable, { setLoading }] = useTable({
        api: demoListApi,
        columns: [],
      });
      return { registerTable };
    },
  });
</script>
```

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

### Implement ClickOutSide component in Vue

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/click-out-side.md

This example demonstrates how to wrap a target element with the ClickOutSide component. It uses the 'clickOutside' event to toggle the visibility state of the content.

```vue
<template>
  <div>
    <ClickOutSide @clickOutside="() => (showRef = false)">
      <div @click="() => (showRef = true)">
        {{ showRef ? '鼠标点击那部（点击边框外可以恢复）' : '点击该区域状态(初始状态)' }}
      </div>
    </ClickOutSide>
  </div>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { ClickOutSide } from '/@/components/ClickOutSide/';
  export default defineComponent({
    components: { ClickOutSide },
    setup() {
      const showRef = ref(false);
      return {
        showRef,
      };
    },
  });
</script>
```

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

### useDrawer Hook API in TypeScript

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/drawer.md

Shows the basic usage of the `useDrawer` hook in TypeScript. It demonstrates how to get the `register` function and control the drawer via `openDrawer` and `setDrawerProps`.

```typescript
const [register, { openDrawer, setDrawerProps }] = useDrawer();
```

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

### Implement BasicTable with Data Source and Toolbar

Source: https://github.com/vbenjs/vue-vben-admin-doc/blob/main/components/table.md

Demonstrates how to initialize a BasicTable component by passing columns and data arrays. It includes a toolbar slot for custom actions and configuration props like striped, bordered, and pagination settings.

```vue
<template>
  <div class="p-4">
    <BasicTable
      title="基础示例"
      titleHelpMessage="温馨提醒"
      :columns="columns"
      :dataSource="data"
      :canResize="canResize"
      :loading="loading"
      :striped="striped"
      :bordered="border"
      :pagination="{ pageSize: 20 }"
    >
      <template #toolbar>
        <a-button type="primary"> 操作按钮 </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { getBasicColumns, getBasicData } from './tableData';

  export default defineComponent({
    components: { BasicTable },
    setup() {
      return {
        columns: getBasicColumns(),
        data: getBasicData(),
      };
    },
  });
</script>
```