From d98966a5b056ce13929f4a169d4ff68e06f5cb8c Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Mon, 6 Jan 2025 09:04:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84ui=E7=BB=84=E4=BB=B6=E6=B3=A8?=
 =?UTF-8?q?=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/composer/ui/ArrayEditor.vue   | 83 ++++++++++----------
 src/components/composer/ui/BorderLabel.vue   |  7 ++
 src/components/composer/ui/ControlInput.vue  |  7 ++
 src/components/composer/ui/DictEditor.vue    | 41 +++++++---
 src/components/composer/ui/NumberInput.vue   |  8 ++
 src/components/composer/ui/VariableInput.vue | 16 ++++
 6 files changed, 107 insertions(+), 55 deletions(-)

diff --git a/src/components/composer/ui/ArrayEditor.vue b/src/components/composer/ui/ArrayEditor.vue
index fd12d91..2409c14 100644
--- a/src/components/composer/ui/ArrayEditor.vue
+++ b/src/components/composer/ui/ArrayEditor.vue
@@ -1,20 +1,6 @@
 <template>
   <div class="array-editor">
     <div v-for="(item, index) in items" :key="index" class="row items-center">
-      <!-- 如果传入options.keys，则生成多键对象
-        示例：
-        options: {
-          keys: ['name', 'age', 'email']
-        }
-          生成数据结构示例：
-          [
-            {
-              name: { value: "张三", isString: true, __varInputVal__: true },
-              age: { value: "18", isString: false, __varInputVal__: true },
-              email: { value: "zhangsan@example.com", isString: true, __varInputVal__: true }
-            }
-          ]
-      -->
       <template v-if="options?.keys">
         <div
           v-for="key in options.keys"
@@ -31,12 +17,6 @@
       </template>
       <template v-else>
         <div class="col">
-          <!-- 如果传入options.items，则生成下拉选择
-            示例：
-            options: {
-              items: ['选项1', '选项2', '选项3']
-            }
-          -->
           <template v-if="options?.items">
             <q-select
               :model-value="item.value"
@@ -57,14 +37,6 @@
               </template>
             </q-select>
           </template>
-          <!-- 不传options情况下，生成单值对象
-            生成数据结构示例：
-            [
-              "张三",
-              "李四",
-              "王五"
-            ]
-          -->
           <template v-else>
             <VariableInput
               :model-value="item"
@@ -122,6 +94,47 @@
 </template>
 
 <script>
+/**
+ * 数组编辑器组件
+ * @description 支持单值数组和多键对象数组的编辑
+ *
+ * @property {Array} modelValue - 绑定的数组值
+ * @property {String} label - 输入框标签
+ * @property {String} icon - 输入框图标
+ * @property {Object} options - 配置选项
+ * @property {String[]} [options.keys] - 多键对象模式的键名列表
+ * @property {String[]} [options.items] - 下拉选择模式的选项列表
+ *
+ * @example
+ * // 基础数组
+ * [
+ *   {
+ *     value: "张三",
+ *     isString: true,
+ *     __varInputVal__: true
+ *   }
+ * ]
+ *
+ * // 多键对象数组
+ * options.keys = ['name', 'age', 'email']
+ * [
+ *   {
+ *     name: { value: "张三", isString: true, __varInputVal__: true },
+ *     age: { value: "18", isString: false, __varInputVal__: true },
+ *     email: { value: "zhangsan@example.com", isString: true, __varInputVal__: true }
+ *   }
+ * ]
+ *
+ * // 下拉选择模式
+ * options.items = ['选项1', '选项2', '选项3']
+ * [
+ *   {
+ *     value: "选项1",
+ *     isString: true,
+ *     __varInputVal__: true
+ *   }
+ * ]
+ */
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/ui/VariableInput.vue";
 
@@ -143,14 +156,6 @@ export default defineComponent({
       type: String,
       default: "",
     },
-    /**
-     * 配置选项，支持两种模式：
-     * 1. 选项模式：通过 items 提供选项列表
-     *    数组的每个元素都可以从选项中选择值
-     *
-     * 2. 多键模式：通过 keys 定义每个数组元素包含的键
-     *    数组的每个元素都是一个对象，包含指定的键，每个键对应一个输入框
-     */
     options: {
       type: Object,
       default: null,
@@ -179,12 +184,6 @@ export default defineComponent({
     },
   },
   methods: {
-    /**
-     * 初始化数组项
-     * 1. 如果传入了初始值，直接使用
-     * 2. 如果配置了 keys，创建包含所有键的对象
-     * 3. 默认创建单值对象
-     */
     initializeItems() {
       if (this.modelValue.length) {
         return this.modelValue;
diff --git a/src/components/composer/ui/BorderLabel.vue b/src/components/composer/ui/BorderLabel.vue
index 1e6b538..d3b6c39 100644
--- a/src/components/composer/ui/BorderLabel.vue
+++ b/src/components/composer/ui/BorderLabel.vue
@@ -15,6 +15,13 @@
 </template>
 
 <script>
+/**
+ * 边框标签组件
+ * @description 对指定元素进行包裹，显示一个定位在左上角的标签，点击标签可以折叠/展开内容
+ *
+ * @property {Boolean} modelValue - 控制内容的展开/折叠状态
+ * @property {String} label - 标签文本
+ */
 export default {
   name: "BorderLabel",
   props: {
diff --git a/src/components/composer/ui/ControlInput.vue b/src/components/composer/ui/ControlInput.vue
index 3b0187e..912a78c 100644
--- a/src/components/composer/ui/ControlInput.vue
+++ b/src/components/composer/ui/ControlInput.vue
@@ -20,6 +20,13 @@
 <script>
 import { defineComponent } from "vue";
 
+/**
+ * 控制流程输入框组件
+ * @description 调整了样式的输入框组件
+ *
+ * @property {String|Number} modelValue - 输入框的值
+ * @property {String} label - 输入框前置标签文本
+ */
 export default defineComponent({
   name: "ControlInput",
   inheritAttrs: false,
diff --git a/src/components/composer/ui/DictEditor.vue b/src/components/composer/ui/DictEditor.vue
index f2d98c5..e7eb9f5 100644
--- a/src/components/composer/ui/DictEditor.vue
+++ b/src/components/composer/ui/DictEditor.vue
@@ -6,12 +6,6 @@
       class="row q-col-gutter-sm items-center"
     >
       <div class="col-4">
-        <!-- 如果传入options.items，则键值支持下拉选择
-        示例：
-        options: {
-          items: ['User-Agent', 'Content-Type', 'Accept']
-        }
-        -->
         <q-select
           v-if="options?.items"
           :model-value="item.key"
@@ -31,7 +25,6 @@
             <q-icon name="code" />
           </template>
         </q-select>
-        <!-- 不传options.items时，键值为非VariableInput的输入框 -->
         <q-input
           v-else
           :model-value="item.key"
@@ -46,7 +39,6 @@
         </q-input>
       </div>
       <div class="col">
-        <!-- 值使用VariableInput组件 -->
         <VariableInput
           :model-value="item.value"
           label="值"
@@ -105,6 +97,34 @@
 import { defineComponent } from "vue";
 import VariableInput from "components/composer/ui/VariableInput.vue";
 
+/**
+ * 字典编辑器组件
+ * @description 支持键值对编辑，键支持变量选择和字符串输入，值为VariableInput特有对象
+ *
+ * @property {Object} modelValue - 绑定的字典对象
+ * @property {Object} options - 配置选项
+ * @property {String[]} [options.items] - 键名的下拉选择选项
+ *
+ * @example
+ * // 基础字典对象
+ * {
+ *   key: {
+ *     value: "", // 输入框的值
+ *     isString: true, // 是否是字符串
+ *     __varInputVal__: true // 用于标识是变量输入框
+ *   }
+ * }
+ *
+ * // 下拉选择模式
+ * options.items = ['User-Agent', 'Content-Type', 'Accept']
+ * {
+ *   "User-Agent": {
+ *     value: "Mozilla/5.0",
+ *     isString: true,
+ *     __varInputVal__: true
+ *   }
+ * }
+ */
 export default defineComponent({
   name: "DictEditor",
   components: {
@@ -115,11 +135,6 @@ export default defineComponent({
       type: Object,
       required: true,
     },
-    /**
-     * 配置选项，支持：
-     *    选项模式：通过 items 提供选项列表
-     *    字典的每个键都可以从选项中选择值
-     */
     options: {
       type: Object,
       default: null,
diff --git a/src/components/composer/ui/NumberInput.vue b/src/components/composer/ui/NumberInput.vue
index 96ef632..4645d97 100644
--- a/src/components/composer/ui/NumberInput.vue
+++ b/src/components/composer/ui/NumberInput.vue
@@ -37,6 +37,14 @@
 <script>
 import { defineComponent } from "vue";
 
+/**
+ * 数字输入框组件
+ * @description 对加减按钮进行了美化的数字输入组件
+ *
+ * @property {Number} modelValue - 输入框的数值
+ * @property {String} label - 输入框标签
+ * @property {String} icon - 输入框图标
+ */
 export default defineComponent({
   name: "NumberInput",
   props: {
diff --git a/src/components/composer/ui/VariableInput.vue b/src/components/composer/ui/VariableInput.vue
index 2d42739..e3975dd 100644
--- a/src/components/composer/ui/VariableInput.vue
+++ b/src/components/composer/ui/VariableInput.vue
@@ -86,6 +86,22 @@
 <script>
 import { defineComponent, inject } from "vue";
 
+/**
+ * 变量输入框组件
+ * @description 支持变量选择和字符串输入的输入框组件
+ *
+ * @property {Object} modelValue - 输入框的值对象
+ * @property {String} label - 输入框标签
+ * @property {String} icon - 输入框图标
+ *
+ * @example
+ * // modelValue 对象格式
+ * {
+ *   value: "", // 输入框的值
+ *   isString: true, // 是否是字符串
+ *   __varInputVal__: true // 用于标识是变量输入框
+ * }
+ */
 export default defineComponent({
   name: "VariableInput",