docs: 优化组件文档

newdocs/docs/.vuepress/notes.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
  * @Date: 2025-04-23 20:26:48
- * @LastEditTime: 2025-05-07 20:49:08
+ * @LastEditTime: 2025-05-12 14:00:21
  * @Description: 笔记配置
  * Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved.  
  */
@@ -59,7 +59,7 @@ const proNote = defineNoteConfig({
     {
       text: '内置组件',
       collapsed: false,
-      items: ['table','querybuilder','columnsetting','components']
+      items: ['table','querybuilder','columnsetting','authselect','authform']
     },
     'printerplan',
     {

newdocs/docs/notes/pro/authform.md

@@ -0,0 +1,51 @@
+---
+title: 其他组件
+createTime: 2025/04/23 23:43:26
+permalink: /pro/authform/
+---
+
+OpenAuth.Pro封装了一些组件，方便开发使用，组件全部在`src\components`中定义。目前提供的三大核心组件关系如下：
+
+![20211230063538](http://img.openauth.net.cn/20211230063538.png)
+
+
+## 表单组件 auth-form
+
+根据定义动态渲染表单项，减少表单的开发。用法如下:
+```html
+<auth-form ref="dataForm" :edit-model="editModel" :form-fields="firstHeaderList" :data="firstTemp" :col-num="3"></auth-form>
+```
+
+当父组件需要使用表单里面的数据，进行提交操作时，参考以下代码：
+
+```javascript
+submit() {
+    // 保存提交
+    this.$refs['dataForm'].validate(() => {
+    let tempData = Object.assign({}, this.firstTemp)
+    api.add(tempData).then((resp) => {
+        ...
+        this.$notify({
+        title: '成功',
+        message: '提交成功',
+        type: 'success'
+        })
+    })
+    })
+}
+```
+
+该组件有以下几个参数：
+
+form-fields：表单属性定义。为一个`ColumnDefine`的数组。典型的值如下：
+
+```javascript
+    this.firstHeaderList = [
+    new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
+    new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
+    new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', ''),
+    ]
+```
+
+
+

newdocs/docs/notes/pro/authselect.md

@@ -0,0 +1,145 @@
+---
+title: 通用下拉组件
+createTime: 2025/05/12 10:24:28
+permalink: /pro/authselect/
+---
+
+通用下拉选择`AuthSelect`用于渲染和编辑字典结构和动态列表返回key-valuel格式的数据。该组件与其他组件的关系如下：
+![20211230063538](http://img.openauth.net.cn/20211230063538.png)
+
+## 基本用法
+
+下拉选择组件目前支持`静态字典数据`和`动态接口数据`两种模式。
+
+### 字典数据模式
+静态字典。根据【字典分类】模块的`分类标识`关键字获取，如：
+```vue
+<auth-select 
+  :isEdit="true" 
+  @change="handleChange" 
+  :data-source="'SYS_STATUS'" 
+  v-model="value">
+</auth-select>
+```
+
+### 动态接口模式
+动态列表。从指定Url获取value/label结构的数据进行渲染，如：
+```vue
+<auth-select 
+  :isEdit="true" 
+  @change="handleChange" 
+  :type="'dynamic'" 
+  :data-source="'/CategoryTypes/Load'" 
+  v-model="value">
+</auth-select>
+```
+
+### 直接传入数组
+
+```vue
+<auth-select 
+  :isEdit="true" 
+  @change="handleChange" 
+  :data-source="[{label: '选项1', value: '1'}, {label: '选项2', value: '2'}]" 
+  v-model="value">
+</auth-select>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 下拉框类型，`static`表示从数据字典加载，`dynamic`表示从接口获取 | String | `static` |
+| dataSource | 数据源，当type=='dynamic'时，该值为一个Url地址，该地址返回一个id/name结构的数组。当type=='static'或空时，该值为【字典分类】模块的`分类标识` | String/Number/Array | - |
+| value / v-model | 绑定值 | String/Number | `''` |
+| isEdit | 是否为编辑状态，`false`时显示文本 | Boolean | `true` |
+| disabled | 是否禁用 | Boolean | `false` |
+| size | 输入框尺寸 | String | `default` |
+| searchKey | 搜索参数，当`type`为`dynamic`时有效 | Object | `{}` |
+| defaultProps | 自定义选项的值和标签字段。如果该值为空，则v-model需要传字段id/name的数组 | Object | `{label: 'label', value: 'value'}` |
+
+### Events
+
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 选中值发生变化时触发 | 选中项的值 |
+| update:value | 更新v-model值 | 选中项的值 |
+
+## 示例
+
+### 基础用法 - 字典数据
+
+```vue
+<template>
+  <auth-select 
+    :isEdit="isEdit" 
+    @change="onChange" 
+    :data-source="'SYS_STATUS'" 
+    v-model="status">
+  </auth-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isEdit = ref(true)
+const status = ref('')
+
+const onChange = (val) => {
+  console.log('选中值：', val)
+}
+</script>
+```
+
+### 动态接口数据
+
+```vue
+<template>
+  <auth-select 
+    :isEdit="isEdit" 
+    @change="onChange" 
+    :type="'dynamic'" 
+    :data-source="'/CategoryTypes/Load'" 
+    :search-key="searchParams"
+    v-model="selectedValue">
+  </auth-select>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+const isEdit = ref(true)
+const selectedValue = ref('')
+const searchParams = reactive({
+  key: 'value',
+  otherParam: 'test'
+})
+
+const onChange = (val) => {
+  console.log('选中值：', val)
+}
+</script>
+```
+
+### 自定义字段名
+
+```vue
+<template>
+  <auth-select 
+    :isEdit="isEdit" 
+    :type="'dynamic'" 
+    :data-source="'/api/users'" 
+    :default-props="{label: 'username', value: 'id'}"
+    v-model="userId">
+  </auth-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isEdit = ref(true)
+const userId = ref('')
+</script>
+``` 

newdocs/docs/notes/pro/columnsetting.md

@@ -4,9 +4,7 @@ createTime: 2025/05/07 20:24:28
 permalink: /pro/columnsetting/
 ---
 
-## 功能简介
+列设置组件`ColumnSetting` 是一个用于表格列显示与顺序自定义的弹窗组件，支持列的拖拽排序、显示/隐藏切换，并将用户设置持久化到本地存储。用于配合框架el-table及[通用表格组件](./table.md)的列设置。
-
-`ColumnSetting` 是一个用于表格列显示与顺序自定义的弹窗组件，支持列的拖拽排序、显示/隐藏切换，并将用户设置持久化到本地存储。用于配合框架el-table及[通用表格组件](./table.md)的列设置。
 
 ![2025-05-07-20-24-28](http://img.openauth.net.cn/2025-05-07-20-24-28.png)
 

newdocs/docs/notes/pro/components.md

@@ -1,82 +0,0 @@
----
-title: 其他组件
-createTime: 2025/04/23 23:43:26
-permalink: /pro/components/
----
-
-OpenAuth.Pro封装了一些组件，方便开发使用，组件全部在`src\components`中定义。目前提供的三大核心组件关系如下：
-
-![20211230063538](http://img.openauth.net.cn/20211230063538.png)
-
-## 通用下拉选择 auth-select
-
-通用下拉选择`auth-select`组件是用于渲染和编辑字典结构和动态列表返回key-valuel数据的组件。用法如下：
-
-静态字典。根据【字典分类】模块的`分类标识`关键字获取，如：
-```html
-<auth-select :isEdit="isEdit" @change="change" :data-source="'SYS_STATUS'" v-model="val" size="small"></auth-select>
-```
-动态列表。从指定Url获取value/label结构的数据进行渲染，如：
-```html
-<auth-select :default-props="{label:'name', value:'id'}" :isEdit="isEdit" @change="change" :type="'dynamic'" :data-source="'/CategoryTypes/Load'" v-model="val" size="small"></auth-select>
-```
-
-该组件有以下几个参数：
-
-isEdit:是否编辑，如果为false则展示为label形式，如果为true则为编辑状态；
-
-type：选择类型。'dynamic'表示动态加载，空或'static'则从系统Category表中获取；
-
-data-source：数据源。当type=='dynamic'时，该值为一个Url地址，该地址返回一个id/name结构的数组。当type=='static'或空时，该值为【字典分类】模块的`分类标识`；
-
-default-props: 数据源提供的数据类型。默认情况下为id/name的数组。如果设置该值，则需要提供对应结构的数据，如：:default-props="{label:'tableName', value:'id'}"，则提供的数据格式如下：
-
-```javascript
-[
-    {id:'1',tableName:'category'},
-    {id:'2',tableName:'user'},
-    {id:'3',tableName:'module'},
-    ....
-]
-```
-
-## 表单组件 auth-form
-
-根据定义动态渲染表单项，减少表单的开发。用法如下:
-```html
-<auth-form ref="dataForm" :edit-model="editModel" :form-fields="firstHeaderList" :data="firstTemp" :col-num="3"></auth-form>
-```
-
-当父组件需要使用表单里面的数据，进行提交操作时，参考以下代码：
-
-```javascript
-submit() {
-    // 保存提交
-    this.$refs['dataForm'].validate(() => {
-    let tempData = Object.assign({}, this.firstTemp)
-    api.add(tempData).then((resp) => {
-        ...
-        this.$notify({
-        title: '成功',
-        message: '提交成功',
-        type: 'success'
-        })
-    })
-    })
-}
-```
-
-该组件有以下几个参数：
-
-form-fields：表单属性定义。为一个`ColumnDefine`的数组。典型的值如下：
-
-```javascript
-    this.firstHeaderList = [
-    new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
-    new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
-    new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', ''),
-    ]
-```
-
-
-

newdocs/docs/notes/pro/querybuilder.md

@@ -4,9 +4,7 @@ createTime: 2025/05/07 19:10:57
 permalink: /pro/querybuilder/
 ---
 
-## 组件简介
+自定义查询组件`QueryBuilder`是一个可复用的高级查询条件构建器组件，支持通过配置 columns 自动生成 SQL 查询条件。用于配合框架el-table及[通用表格组件](./table.md)的复杂筛选的场景，支持条件的增删、类型自动识别、SQL 片段生成与复制、条件本地缓存等功能。
-
-自定义查询组件是一个可复用的高级查询条件构建器组件，支持通过配置 columns 自动生成 SQL 查询条件。用于配合框架el-table及[通用表格组件](./table.md)的复杂筛选的场景，支持条件的增删、类型自动识别、SQL 片段生成与复制、条件本地缓存等功能。
 
 ![2025-05-07-19-20-48](http://img.openauth.net.cn/2025-05-07-19-20-48.png)
 

newdocs/docs/notes/pro/table.md

@@ -4,9 +4,7 @@ createTime: 2025/05/07 19:10:57
 permalink: /pro/table/
 ---
 
-## 组件简介
+通用表格组件`AuthTable` 是OpenAuth.Net框架的核心组件之一，支持自定义列模板、单选/多选、可编辑、导出 Excel 等功能。
-
-`AuthTable` 是一个通用表格组件，支持自定义列模板、单选/多选、可编辑、导出 Excel 等功能。
 
 ## 使用示例