+ {{ type === 'color' && dark ? `dark-${record.name}` : record.name }}
+
+
+
+
+
+ {{ dark ? record.darkValue ?? record.value : record.value }}
+
+
+
+ {{ record.cssvar ? `--${record.name}` : '-' }}
+
+
+
+
+
+
+
diff --git a/packages/arco-vue-docs/docs/faq.en-US.md b/packages/arco-vue-docs/docs/faq.en-US.md
new file mode 100644
index 000000000..df9a67ce8
--- /dev/null
+++ b/packages/arco-vue-docs/docs/faq.en-US.md
@@ -0,0 +1,40 @@
+```yaml
+meta:
+ type: Developer Guide
+title: FAQ
+description: Frequently Asked Questions in the Use of the Component Library
+```
+
+## Controlled and Uncontrolled
+
+The concept of `controlled` is used in the Arco Design Vue component library, as the name suggests, the display state of the component will always be the same as the incoming value. We recommend using input components in controlled mode.
+
+At this time, you can modify the value of `model-value` through `two-way binding (v-model)` or `change` event to ensure the same value inside and outside the component.
+
+In controlled mode, if you want to control the displayed value, you can use the `change` event to handle it.
+
+If we don't want to control the value of the component, we can use the uncontrolled mode, in which case the value of the component will be maintained inside the component, and the initial value can be set by `default-value`. In uncontrolled mode, you can get the value of the component through the `change` event.
+
+pay attention:
+The `default-*` class attributes are used to set initial values in uncontrolled mode and do not affect subsequent states. When this value and the controlled value are used at the same time, the controlled value takes precedence.
+
+
+## Update At Scroll
+
+By default, the drop-down menu will follow the change of the window scroll bar to update the position. If the component containing the drop-down menu is placed in a scrollable container, there will be a problem that the drop-down menu does not update the position when the container is scrolled. At this time, you can use the trigger inside the component. configuration, will `updateAtScroll`
+Set to `true` to enable rolling update support.
+
+If there are many such scenes in the project, you can enable this property globally through the [ConfigProvider](/vue/component/config-provider) component.
+
+## The use of virtual lists
+
+Components that support setting up virtual lists [List](/vue/component/list) 、[Select](/vue/component/Select)、[Table](/vue/component/table)、[Tree](/vue/component/tree) set `virtual-list-props` Enable the virtual list function.
+
+The rendering of virtual list elements can be divided into two cases: **elements are highly fixed** and **elements are highly dynamic**.
+
+|Name|Description|Type|Default|version|
+|---|---|---|:---:|:---|
+|height|Viewable area height|`number \| string`|`-`||
+|fixedSize| Whether the elements in the list are of fixed size (height) |`boolean`|`false`|2.34.1|
+|estimatedSize| Estimated size (height) [this value is not valid when `fixedSize` is `true`], and if it is closer to the average size, the scroll bar length will look more accurate. It is recommended to allocate the average calculated by yourself. The default dynamic height will use the average of the first Section |`number`|`-`|2.34.1|
+|buffer| The number of elements mounted in advance outside the boundary of the viewport. (`Section = buffer * 3`) the default value is `10` (that is, Section defaults to 30). It is recommended to adjust the height of the list viewport. This value will affect performance. |`number`|`10`|2.34.1|
diff --git a/packages/arco-vue-docs/docs/faq.zh-CN.md b/packages/arco-vue-docs/docs/faq.zh-CN.md
new file mode 100644
index 000000000..66649756f
--- /dev/null
+++ b/packages/arco-vue-docs/docs/faq.zh-CN.md
@@ -0,0 +1,40 @@
+```yaml
+meta:
+ type: 开发指南
+title: 常见问题
+description: 组件库使用中的常见问题解答
+```
+
+## 受控与非受控
+
+Arco Design Vue 组件库中使用了 `受控` 的概念，正如其名，组件的显示状态将始终与传入值相同。我们推荐通过受控模式来使用输入组件。
+
+这时可以通过 `双向绑定（v-model）` 或者 `change` 事件来修改 `model-value` 的值，来保证组件内部与外部的值相同。
+
+在受控模式中，如果希望控制显示的值，可以使用 `change` 事件进行处理。
+
+如果我们不希望控制组件的值，可以使用非受控模式，此时组件的值将维护在组件内部，可以通过 `default-value` 来设置初始值。非受控模式下可以通过 `change` 事件来获取组件的值。
+
+特别注意：
+`default-*` 类属性用来设置非受控模式下的初始值，不会影响后续的状态。此值与受控值同时使用时，受控值优先生效。
+
+
+## 下拉菜单的滚动跟随
+
+下拉菜单默认会跟随 window 滚动条的变化更新位置，如果将包含下拉菜单的组件放置在一个可滚动的容器中，会出现容器滚动时下拉菜单没有更新位置的问题，此时可以通过组件内部的 trigger 配置，将 `updateAtScroll`
+设置为 `true` 开启滚动更新的支持。
+
+如果项目内此场景较多，可以通过 [ConfigProvider](/vue/component/config-provider) 组件全局开启此属性。
+
+## 虚拟列表的使用
+
+支持设置虚拟列表的组件 [List](/vue/component/list) 、[Select](/vue/component/Select)、[Table](/vue/component/table)、[Tree](/vue/component/tree) 设置 `virtual-list-props` 开启虚拟列表功能。
+
+虚拟列表元素的渲染分为 **元素高度固定**，**元素高度动态** 两种情况。
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|height|可视区域高度|`number \| string`|`-`||
+|fixedSize| 列表内元素是否为固定大小（高度）|`boolean`|`false`|2.34.1|
+|estimatedSize| 预估大小（高度）[当 `fixedSize` 为 `true` 时，此值无效]，如果它更接近平均大小，则滚动条长度看起来将更准确。建议分配自己计算的平均值。默认动态高度将使用首个 Section 的平均值|`number`|`-`|2.34.1|
+|buffer|视口边界外提前挂载的元素数量。（`Section = buffer * 3`）默认值为 `10`（也就是 Section 默认为 30）, 建议根据列表视口的高度做调整，此值太大会影响性能。|`number`|`10`|2.34.1|
diff --git a/packages/arco-vue-docs/docs/i18n.en-US.md b/packages/arco-vue-docs/docs/i18n.en-US.md
index 80c00df2c..7bf66dc91 100644
--- a/packages/arco-vue-docs/docs/i18n.en-US.md
+++ b/packages/arco-vue-docs/docs/i18n.en-US.md
@@ -5,7 +5,7 @@ title: Globalization
description: All component texts use Chinese by default, and other languages can be used by setting.
```
-*Auto translate by google.*
+_Auto translate by google._
Internationalization is achieved through the [ConfigProvider](/vue/component/config-provider) component.
@@ -24,17 +24,31 @@ import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
export default {
data() {
return {
- enUS
- }
- }
-}
+ enUS,
+ };
+ },
+};
```
## Supported regional languages
-|Language|Area code|
-|---|---|
-|Simple Chinese|zh-CN|
-|English (US)|en-US|
-|Japanese|ja-JP|
+| Language | Area code |
+| ------------------- | --------- |
+| Simple Chinese | zh-CN |
+| English (US) | en-US |
+| Japanese | ja-JP |
+| Traditional Chinese | zh-TW |
+| Portuguese | pt-PT |
+| Spanish | es-ES |
+| Indonesian | id-ID |
+| French, France | fr-FR |
+| German, Germany | de-DE |
+| Korean | ko-KR |
+| Italian, Italy | it-IT |
+| Thai | th-TH |
+| Melayu (Malaysia) | ms-MY |
+| Vietnamese | vi-VN |
+| Khmer (Cambodia) | km-KH |
+| Arabic (Egypt) | ar-EG |
+| Russian (Russia) | ru-RU |
diff --git a/packages/arco-vue-docs/docs/i18n.zh-CN.md b/packages/arco-vue-docs/docs/i18n.zh-CN.md
index 6709db315..f2cee6cce 100644
--- a/packages/arco-vue-docs/docs/i18n.zh-CN.md
+++ b/packages/arco-vue-docs/docs/i18n.zh-CN.md
@@ -22,17 +22,31 @@ import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
export default {
data() {
return {
- enUS
- }
- }
-}
+ enUS,
+ };
+ },
+};
```
## 支持的地区语言
-|语言|地区编码|
-|---|---|
-|简体中文|zh-CN|
-|英文|en-US|
-|日文|ja-JP|
+| 语言 | 地区编码 |
+| -------------------- | -------- |
+| 简体中文 | zh-CN |
+| 英文 | en-US |
+| 日文 | ja-JP |
+| 繁体中文（中国台湾） | zh-TW |
+| 葡萄牙语 | pt-PT |
+| 西班牙语 | es-ES |
+| 印度尼西亚语 | id-ID |
+| 法语（法国） | fr-FR |
+| 德语（德国） | de-DE |
+| 韩语 | ko-KR |
+| 意大利语(意大利) | it-IT |
+| 马来语(马来西亚) | ms-MY |
+| 泰语 | th-TH |
+| 越南语 | vi-VN |
+| 高棉语（柬埔寨） | km-KH |
+| 阿拉伯语（埃及） | ar-EG |
+| 俄语（俄罗斯） | ru-RU |
diff --git a/packages/arco-vue-docs/docs/pro/build.en-US.md b/packages/arco-vue-docs/docs/pro/build.en-US.md
index c8de2c2c3..120d357ae 100644
--- a/packages/arco-vue-docs/docs/pro/build.en-US.md
+++ b/packages/arco-vue-docs/docs/pro/build.en-US.md
@@ -43,4 +43,4 @@ export default defineConfig({
});
```
-For more specific configuration details, please refer to [vite](https://www.vitejs.net/)[Official Website](https://www.vitejs.net/).
+For more specific configuration details, please refer to [vite](https://vitejs.dev/)[Official Website](https://vitejs.dev/).
diff --git a/packages/arco-vue-docs/docs/pro/build.zh-CN.md b/packages/arco-vue-docs/docs/pro/build.zh-CN.md
index 4937cafc3..6de69afbd 100644
--- a/packages/arco-vue-docs/docs/pro/build.zh-CN.md
+++ b/packages/arco-vue-docs/docs/pro/build.zh-CN.md
@@ -41,4 +41,4 @@ export default defineConfig({
});
```
-更多具体配置详见[vite](https://www.vitejs.net/)[官网](https://www.vitejs.net/)。
+更多具体配置详见[vite](https://vitejs.dev/)[官网](https://vitejs.dev/)。
diff --git a/packages/arco-vue-docs/docs/pro/directory.en-US.md b/packages/arco-vue-docs/docs/pro/directory.en-US.md
index 50b7aa9ac..3b4347b55 100644
--- a/packages/arco-vue-docs/docs/pro/directory.en-US.md
+++ b/packages/arco-vue-docs/docs/pro/directory.en-US.md
@@ -36,4 +36,4 @@ description: The organizational structure of the project file.
└── tsconfig.json
```
-ps: Filter description
+ps: [Filter description](https://v3-migration.vuejs.org/breaking-changes/filters.html)
diff --git a/packages/arco-vue-docs/docs/pro/directory.zh-CN.md b/packages/arco-vue-docs/docs/pro/directory.zh-CN.md
index a83f7e8ca..ee884afef 100644
--- a/packages/arco-vue-docs/docs/pro/directory.zh-CN.md
+++ b/packages/arco-vue-docs/docs/pro/directory.zh-CN.md
@@ -34,4 +34,4 @@ description: 项目文件的组织结构
└── tsconfig.json
```
-ps： 过滤器说明
+ps：[过滤器说明](https://v3-migration.vuejs.org/breaking-changes/filters.html)
diff --git a/packages/arco-vue-docs/docs/pro/faq.en-US.md b/packages/arco-vue-docs/docs/pro/faq.en-US.md
new file mode 100644
index 000000000..21189579a
--- /dev/null
+++ b/packages/arco-vue-docs/docs/pro/faq.en-US.md
@@ -0,0 +1,120 @@
+```yaml
+meta:
+ type: Arco Pro
+title: FAQ
+description: Arco Design Pro Vue FAQ Collection
+```
+
+*Auto translate by google.*
+
+## Initialization
+
+### 1. Initialization of arco-cli failed
+
+
+
+If the dependency installation fails, go to the directory of the initialization project and execute the npm install or yarn install installation operation again.
+
+## Development
+
+### 1. How to set highlight for menu items?
+See [Routes and menu](/vue/docs/pro/routes-and-menu) for details
+
+### 2.Menu hides children
+See [Routes and menu](/vue/docs/pro/routes-and-menu) for details
+
+### 3.Configure first-level menu items
+
+Due to the architecture, configuring a single first-level menu item requires the cooperation of multiple menu configuration items. See [#85]([/vue/docs/pro/routes-and-menu](https://github.com/arco-design/arco-design-pro-vue/issues/85#issuecomment-1142289501)) for details
+
+### 4.Using jsx in Vue3
+
+详见 [babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)
+
+### 5.Cross-domain proxy
+See [vite configuration](https://cn.vitejs.dev/config/#server-open) for details
+
+### 6.Code cannot be pushed
+
+Because of the use of [husky](https://github.com/typicode/husky), the hook [normalizes](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.greljkmo14y0) the uploaded commit information check.
+
+Please follow the documentation for git commit information normalization.
+
+If you do not need this function, you can delete husky related files and corresponding scripts. (**Not recommended**)
+
+## Build
+
+### 1. Rollup failed to resolve import "XXXXXX/node_modules/@arco-design/web-vue/es/xxx-xxx/style/css.js”
+
+The error comes from loading the build plugin (config/plugin/styleImport.ts) on demand. There are several reasons for this problem.
+
+- The new version of the component library has added components.
+
+- The component itself is missing and not added.
+
+- The unplugin-vue-components dependency library version is too low.
+
+Solution please [move](https://github.com/arco-design/arco-design-pro-vue/issues/71).
+
+### 2. Executing build TS type error
+
+
+
+Reason for error:
+
+- There is a problem with the spelling itself.
+
+- The new version of the component library has made changes to the type declaration.
+
+Solution:
+
+- Follow the type hints to make changes.
+
+- Turn off vue-tsc checks. (**Not recommended**)
+
+```ts
+// package.json
+
+ "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts" // before fixing
+
+ "build": "vite build --config ./config/vite.config.prod.ts" // 修改后
+```
+
+### 3. Vue-tsc builds slowly
+
+- Reinstall vue-tsc to the latest version.
+
+```shell
+# npm
+npm install vue-tsc@latest
+# yarn
+yarn add vue-tsc@latest
+```
+
+- Turn off vue-tsc checks. (**Not recommended**)
+
+
+
+### 4. Preview the packaged project
+
+```shell
+# npm
+npm run preview
+# yarn
+yarn preview
+```
+**PS: The preview command will execute the build operation first in Pro.**
+
+## Deployment
+
+### 1. After the page is deployed successfully, refresh the 404 page
+
+[Moving to Vue Router](https://router.vuejs.org/guide/essentials/history-mode.html)
+
+## Other
+
+### 1. Can the developed projects be upgraded to the latest version?
+
+Arco Pro, as a project template, does not have the ability to smoothly upgrade to the latest version.
+
+If you need a new version capability, you can initialize a project and copy your business code into it, and then make the corresponding changes.
diff --git a/packages/arco-vue-docs/docs/pro/faq.zh-CN.md b/packages/arco-vue-docs/docs/pro/faq.zh-CN.md
new file mode 100644
index 000000000..6a6379141
--- /dev/null
+++ b/packages/arco-vue-docs/docs/pro/faq.zh-CN.md
@@ -0,0 +1,118 @@
+```yaml
+meta:
+ type: Arco Pro 最佳实践
+title: 常见问题
+description: Arco Design Pro Vue 常见问题合集
+```
+
+## 初始化
+
+### 一、arco-cli初始化失败
+
+
+
+依赖安装失败的问题，进入到初始化项目的目录，重新执行执行npm install 或 yarn install安装操作即可。
+
+## 开发相关
+
+### 一、菜单项如何设置高亮？
+详见 [路由和菜单](/vue/docs/pro/routes-and-menu)
+
+### 二、菜单隐藏子项
+详见 [路由和菜单](/vue/docs/pro/routes-and-menu)
+
+### 三、配置一级菜单项
+
+因为架构缘故，配置单独的一级菜单项，需要多个菜单配置项进行配合。详见 [#85]([/vue/docs/pro/routes-and-menu](https://github.com/arco-design/arco-design-pro-vue/issues/85#issuecomment-1142289501))
+
+### 四、Vue3 中使用 jsx 写法
+
+详见 [babel-plugin-jsx](https://github.com/vuejs/babel-plugin-jsx)
+
+### 五、跨域代理
+详见 [vite配置](https://cn.vitejs.dev/config/#server-open)
+
+### 六、代码无法提交
+
+因为使用了 [husky](https://github.com/typicode/husky) 的缘故，钩子对上传的commit信息进行[规范化](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.greljkmo14y0)校验。
+
+请按照文档进行git commit信息规范化。
+
+如果不需要该功能，可以删除掉husky相关文件和对应脚本。（**不推荐**）
+
+
+## 构建相关
+
+### 一. Rollup failed to resolve import "XXXXXX/node_modules/@arco-design/web-vue/es/xxx-xxx/style/css.js”
+
+报错源于按需加载构建插件(config/plugin/styleImport.ts)，该问题产生分别有以下几个原因
+
+- 新版组件库新增了组件。
+
+- 组件本身遗漏未进行添加。
+
+- unplugin-vue-components 依赖库版本过低。
+
+解决方法请 [移步](https://github.com/arco-design/arco-design-pro-vue/issues/71)。
+
+### 二、执行构建TS类型报错
+
+
+
+报错原因：
+
+- 写法本身存在问题。
+
+- 新版组件库对类型声明进行了变更修改。
+
+解决方法：
+
+- 按照类型提示进行修改。
+
+- 关闭vue-tsc检查。(**不推荐**)
+
+```ts
+// package.json
+
+ "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts" // 修改前
+
+ "build": "vite build --config ./config/vite.config.prod.ts" // 修改后
+```
+
+### 三、vue-tsc构建缓慢
+
+- 重新安装vue-tsc至最新版本。
+
+```shell
+# npm
+npm install vue-tsc@latest
+# yarn
+yarn add vue-tsc@latest
+```
+
+- 关闭vue-tsc检查。(**不推荐**)
+
+
+### 四、预览打包项目
+
+```shell
+# npm
+npm run preview
+# yarn
+yarn preview
+```
+**PS: 该预览命令在Pro中会先执行build操作。**
+
+## 部署相关
+
+### 一、页面部署成功后刷新出现404页面
+
+[移步 Vue Router](https://router.vuejs.org/guide/essentials/history-mode.html)
+
+## 其它
+
+### 一、已经开发的项目是否能够升级到最新版？
+
+Arco Pro作为一个项目模板，不具备平滑升级过渡到最新版本的能力。
+
+如需新版本能力，可以初始化一个项目后将自己的业务代码拷贝进去，在进行相应的更改即可。
diff --git a/packages/arco-vue-docs/docs/pro/npm-scripts.en-US.md b/packages/arco-vue-docs/docs/pro/npm-scripts.en-US.md
index e548fb4af..21f3770b0 100644
--- a/packages/arco-vue-docs/docs/pro/npm-scripts.en-US.md
+++ b/packages/arco-vue-docs/docs/pro/npm-scripts.en-US.md
@@ -12,6 +12,8 @@ description: package.json script presets convenient and practical commands
```
├── README.md
├── config
+│ ├── plugin # vite plugin
+│ ├── vite.config.base.ts # Basic Environment Configuration
│ ├── vite.config.dev.ts # Development environment configuration
│ ├── vite.config.prod.ts # Production environment configuration
└── package.json
@@ -39,12 +41,12 @@ The command invoked is as follows
npm run build
```
-The commands to be called are as follows. According to actual needs, please refer to [vite](https://www.vitejs.net/)[Official Website](https://www.vitejs.net/) for output configuration.
+The commands to be called are as follows. According to actual needs, please refer to [vite](https://vitejs.dev/)[Official Website](https://vitejs.dev/) for output configuration.
```json
{
"scripts": {
- "dev": "vite --config ./config/vite.config.dev.ts",
+ "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
}
}
```
diff --git a/packages/arco-vue-docs/docs/pro/npm-scripts.zh-CN.md b/packages/arco-vue-docs/docs/pro/npm-scripts.zh-CN.md
index 704a96a74..4d079346c 100644
--- a/packages/arco-vue-docs/docs/pro/npm-scripts.zh-CN.md
+++ b/packages/arco-vue-docs/docs/pro/npm-scripts.zh-CN.md
@@ -10,6 +10,8 @@ description: package.json script 预置方便实用的命令
```
├── README.md
├── config
+│ ├── plugin # vite插件
+│ ├── vite.config.base.ts # 基础环境配置
│ ├── vite.config.dev.ts # 开发环境配置
│ ├── vite.config.prod.ts # 生产环境配置
└── package.json
@@ -37,12 +39,12 @@ npm run dev
npm run build
```
-调用的命令如下，可以根据实际需要，查阅[vite](https://www.vitejs.net/)[官网](https://www.vitejs.net/)，进行输出配置。
+调用的命令如下，可以根据实际需要，查阅[vite](https://vitejs.dev/)[官网](https://vitejs.dev/)，进行输出配置。
```json
{
"scripts": {
- "dev": "vite --config ./config/vite.config.dev.ts",
+ "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
}
}
```
diff --git a/packages/arco-vue-docs/docs/pro/permission.en-US.md b/packages/arco-vue-docs/docs/pro/permission.en-US.md
index 09c6b4e78..879fcff50 100644
--- a/packages/arco-vue-docs/docs/pro/permission.en-US.md
+++ b/packages/arco-vue-docs/docs/pro/permission.en-US.md
@@ -12,12 +12,12 @@ The common front-end permission control in the middle and background can be roug
1. Menu permission control, manage permissions for a certain menu/page , you can see this page, otherwise it will show no permission.
-
+[//]: # ()
2. Menu permission control, manage permissions for a certain menu/page , you can see this page, otherwise it will show no permission.
-
+[//]: # ()
## Usage
@@ -70,7 +70,7 @@ Arco Design Pro encapsulates the `v-permission` directives . Can be used on comp
As follows, place the authorized role types in the array.
```vue
-
+
Delete
```
@@ -192,4 +192,4 @@ export default {
checkPermission(el, binding);
},
};
-```
\ No newline at end of file
+```
diff --git a/packages/arco-vue-docs/docs/pro/permission.zh-CN.md b/packages/arco-vue-docs/docs/pro/permission.zh-CN.md
index ea54b7015..e3c29510c 100644
--- a/packages/arco-vue-docs/docs/pro/permission.zh-CN.md
+++ b/packages/arco-vue-docs/docs/pro/permission.zh-CN.md
@@ -11,11 +11,11 @@ description: 权限控制是中后台场景非常常见的基础功能，在 v2.
1. 菜单权限控制，针对**某个菜单/页面**进行权限管理，有则能看到此页面，否则将展示无权限。
-
+[//]: # ()
2. **针对某页面中的某触发器**进行权限管理，例如对列表页的某一条数据进行删除操作。有权限情况下则展示删除按钮。
-
+[//]: # ()
## 使用
@@ -67,7 +67,7 @@ Arco Design Pro 封装了 `v-permission` 指令。可在组件或者原生元素
如下，将有权限的角色类型放置在数组中即可。
```vue
-
+
删除
```
diff --git a/packages/arco-vue-docs/docs/pro/routes-and-menu.en-US.md b/packages/arco-vue-docs/docs/pro/routes-and-menu.en-US.md
index 7405ada7a..044dd23aa 100644
--- a/packages/arco-vue-docs/docs/pro/routes-and-menu.en-US.md
+++ b/packages/arco-vue-docs/docs/pro/routes-and-menu.en-US.md
@@ -9,168 +9,76 @@ description: Route and menu generation
The routing is usually tied to the menu. In order to reduce the amount of maintenance, we directly generate the menu through the routing table.
-## Routing
+## Router
-First of all, you need to understand the routing table configuration
+First, you need to understand the configuration of the routing table. For basic routing configuration, please refer to the official documentation of [Vue-Router](https://router.vuejs.org/)
```ts
-import {createRouter, createWebHistory} from'vue-router';
-
-import Login from'./modules/login';
-import PageLayout from'@/layout/page-layout.vue';
-import appRoutes from'./modules';
-
-const router = createRouter({
- history: createWebHistory(),
- routes: [
- Login,
- {
- path:'/app',
- component: PageLayout,
- children: appRoutes,
- },
- ],
-});
-```
-
-example
-
- ```ts
-// In this example, the final path of the page is app/dashboard/workplace
+// In this example, the final path to the page is /dashboard/workplace
export default {
- path:'dashboard',
- name:'dashboard', // route name
+ path: 'dashboard',
+ name: 'dashboard',
component: () => import('@/views/dashboard/index.vue'),
meta: {
- locale:'menu.dashboard', // First level menu name (language pack key name)
- requiresAuth: true, // Whether authentication is required
- icon:'icon-dashboard', // menu configuration icon
+ locale: 'menu.dashboard',
+ requiresAuth: true,
+ icon: 'icon-dashboard',
},
children: [
{
- path:'workplace',
- name:'workplace',
+ path: 'workplace',
+ name: 'workplace',
component: () => import('@/views/dashboard/workplace/index.vue'),
meta: {
- locale:'menu.dashboard.workplace', // secondary menu name (language pack key name)
- requiresAuth: true, // Whether authentication is required
- roles: ['admin'], // role
- hideInMenu: false, // Hide menu items
+ locale: 'menu.dashboard.workplace',
+ requiresAuth: true,
+ roles: ['admin'],
+ hideInMenu: false,
},
},
],
};
```
-## menu
+Route `Meta` meta information
-The menu generation process can be found in the menu component:
+| Key | Description | Type | default|
+| ------------- | ------------- | -------------- | -------------- |
+roles | Configure the role that can access the page. If it does not match, it will be forbidden to access the routing page | string[]| - |
+requiresAuth | Whether login authentication is required | boolean| false |
+icon | Menu configuration icon | string| - |
+locale | First-level menu name (language pack key name) | string| - |
+hideInMenu | Whether to hide this item in the left menu | boolean| - |
+hideChildrenInMenu | Force single item to be displayed in left menu | boolean| - |
+activeMenu | If set name, the menu will be highlighted according to the name you set | string| - |
+order | Sort routing menu items. If this value is set, the higher the value, the higher the front. | number| - |
+noAffix | If set to true, the tabs will not be added to the tab-bar. | boolean| - |
+ignoreCache | If set to true the page will not be cached | boolean| - |
-- Get the routing tree with routing information through router.getRoutes().
+## Menu
- ```ts
-// components/menu/index.vue
-import { defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-export default defineComponent({
- setup() {
- const router = useRouter();
- const appRoute = computed(() => {
- return router
- .getRoutes()
- .find((el) => el.name === 'root') as RouteRecordNormalized;
- });
- ......
- },
-});
-```
+Front-end menu generation process:
-- The route tree obtained in the previous step is used for permission filtering to generate the menu tree for rendering.
-
-```tsx
-const menuTree = computed(() => {
- const copyRouter = JSON.parse(JSON.stringify(appRoute.value.children));
- function travel(_routes: RouteRecordRaw[], layer: number) {
- if (!_routes) return null;
- const collector: any = _routes.map((element) => {
- // no access
- if (!permission.accessRouter(element)) {
- return null;
- }
-
- // leaf node
- if (!element.children) {
- return element;
- }
-
- // Associated child node
- const subItem = travel(element.children, layer);
- if (subItem.length) {
- element.children = subItem;
- return element;
- }
- // the else logic
- if (layer > 1) {
- element.children = subItem;
- return element;
- }
- return null;
- });
- return collector.filter(Boolean);
- }
- return travel(copyRouter, 0);
-});
-```
+- Through the computed property of [appRoute](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L10), a routing tree with routing information is obtained.
-- Recursively generate menus by rendering the menu tree. (This example uses jsx syntax)
-
-```tsx
-const renderSubMenu = () => {
- function travel(_route: RouteRecordRaw[], nodes = []) {
- if (_route) {
- _route.forEach((element) => {
- // This is demo, modify nodes as needed
- const icon = element?.meta?.icon ? `<${element?.meta?.icon}/>` : ``;
- const subMenuItem = (
- h(compile(icon)),
- title: () => h(compile(t(element?.meta?.locale || ''))),
- }}
- >
- {element?.children?.map((elem) => {
- return (
- goto(elem)}>
- {t(elem?.meta?.locale || '')}
- {travel(elem.children ?? [])}
-
- );
- })}
-
- );
- nodes.push(subMenuItem as never);
- });
- }
- return nodes;
- }
- return travel(menuTree.value); // recursion menuTree
-};
-return () => (
-
- {renderSubMenu()}
-
-);
-```
+- Use the routing information obtained in the previous step to filter permissions to generate a menu [tree for rendering](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L23).
+
+- Recursively generate menus by [rendering]((https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/index.vue#L48)) the menu tree.
+
+Server menu generation process:
+
+- Add the [action](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/store/modules/app/index.ts#L47) of the api request to the Store to obtain the routing configuration of the server.
+
+- Add the action of the api request to the Store to obtain the routing configuration of the server.
+
+- Through the computed property of [appRoute](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L10), a routing tree with routing information is obtained.
+
+- Use the routing information obtained in the previous step to filter permissions to generate a menu [tree for rendering](https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/useMenuTree.ts#L23).
+
+- Recursively generate menus by [rendering]((https://github.com/arco-design/arco-design-pro-vue/blob/23a21ceb939e1e2334e8c3b0f1f8a8049503ad9d/arco-design-pro-vite/src/components/menu/index.vue#L48)) the menu tree.
+
+**Note: Compared with the local menu generation process, the server menu only has more interface requests and server routing configuration information storage steps.**
+**Individual companies may have corresponding authority management systems to generate corresponding server-side routing configuration information and store them for front-end interface retrieval. However, the overall situation is similar, as long as the routing configuration information returned by the back-end interface conforms to the above routing configuration specifications and can be correctly parsed by the front-end**
## Steps to add a new menu item
@@ -179,9 +87,7 @@ After understanding the routing and menu generation, you can configure a new men
- Add a monitor folder in views/dashboard and add index.vue to it
```ts
-
-import {defineComponent} from'vue';
-export default defineComponent({})
+
+```
### IconFontOptions
@@ -18,12 +36,16 @@ title:
|src|iconfont.cn 项目生成的在线 js 文件地址|`string`|`-`|
|extraProps|传递给内部 Icon 组件的额外属性|`object`|`-`|
+在 `src` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/ "_blank") 项目中的图标符号集，无需手动引入。
+见 [iconfont.cn](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code "_blank") 使用帮助: 查看如何生成 js 地址。
+
### `` Props
|Attribute|Description|Type|Default|
|---|---|---|:---:|
|type|图标类型|`string`|`-`|
|size|大小|`number` \| `string`|`-`|
+|rotate|旋转角度|`number`|`-`|
|spin|是否旋转|`boolean`|`false`|
---
@@ -31,7 +53,7 @@ title:
## en-US
Items from iconfont.cn can be added to the `type` of the `Icon` component.
-Call the tool method `Icon.addFromIconfontCn` exposed by the component library, and pass the code that exports the symbol in iconfont.cn into the src attribute to load the project icon library.
+Call the tool method `Icon.addFromIconfontCn` exposed by the component library, and pass the code that exports the symbol in [iconfont.cn](http://iconfont.cn/ "_blank") into the src attribute to load the project icon library.
The idea is to create a component that uses the `