style(components): 统一表单组件样式和尺寸配置

- 为 CuteFormDialog、CuteFormDrawer、CuteSearchForm 组件的 el-form 添加 size="mini" 属性
- 将 CuteFormDialog 和 CuteFormDrawer 的默认宽度从 30% 调整为 40%
- 将 CuteScreenShot 按钮的尺寸从 small 调整为 mini 并将文本从"截图并下载"改为"截屏"
- 为 CuteSearchForm 添加前后置插槽的注释说明
- 为 CuteVerticalScrollBar 设置固定宽度和最大高度样式

cutejava-front/src/views/components/dev/CuteFormDialog.vue

@@ -14,7 +14,7 @@
     :modal="false"
   >
     <div class="container-form">
-      <el-form ref="form" :model="model" :rules="rules" :inline="inline">
+      <el-form ref="form" :model="model" :rules="rules" :inline="inline" size="mini">
         <!-- 这里是插槽，用于渲染传入的 el-form-item -->
         <slot />
       </el-form>
@@ -41,7 +41,7 @@ export default {
     width: {
       type: String,
       required: false,
-      default: '30%'
+      default: '40%'
     },
     fullscreen: {
       type: Boolean,

cutejava-front/src/views/components/dev/CuteFormDrawer.vue

@@ -18,7 +18,7 @@
     :modal="false"
   >
     <div class="container-form">
-      <el-form ref="form" :model="model" :rules="rules" :inline="inline">
+      <el-form ref="form" :model="model" :rules="rules" :inline="inline" size="mini">
         <!-- 这里是插槽，用于渲染传入的 el-form-item -->
         <slot />
       </el-form>
@@ -44,7 +44,7 @@ export default {
     width: {
       type: String,
       required: false,
-      default: '30%'
+      default: '40%'
     },
     model: {
       type: Object,

cutejava-front/src/views/components/dev/CuteScreenShot.vue

@@ -11,10 +11,10 @@
         type="primary"
         icon="el-icon-camera"
         :loading="capturing"
-        size="small"
+        size="mini"
         @click="capture"
       >
-        截图并下载
+        截屏
       </el-button>
     </div>
     <div id="elementIdSelector" style="padding: 15px">

cutejava-front/src/views/components/dev/CuteSearchForm.vue

@@ -1,64 +1,67 @@
-<!--
+<!--
- * 查询组件
+ * 查询组件
- * @author odboy
+ * @author odboy
- * @email tianjun@odboy.cn
+ * @email tianjun@odboy.cn
- * @created 2025-08-20
+ * @created 2025-08-20
- -->
+ -->
-<template>
+<template>
-  <el-form
+  <el-form
-    ref="searchForm"
+    ref="searchForm"
-    :inline="true"
+    :inline="true"
-    :model.sync="model"
+    :model.sync="model"
-    label-position="right"
+    label-position="right"
-    label-width="90px"
+    label-width="90px"
-    :disabled="disabled"
+    :disabled="disabled"
-  >
+    size="mini"
-    <slot name="suffix" />
+  >
-    <el-form-item>
+    <!-- 通过  <template v-slot:suffix> 插槽前置查询条件 -->
-      <el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
+    <slot name="suffix" />
-      <el-button @click="onFormReset('searchForm')">重置</el-button>
+    <el-form-item>
-    </el-form-item>
+      <el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
-    <slot name="operation" />
+      <el-button @click="onFormReset('searchForm')">重置</el-button>
-  </el-form>
+    </el-form-item>
-</template>
+    <!-- 通过  <template v-slot:operation> 插槽后置操作按钮 -->
-
+    <slot name="operation" />
-<script>
+  </el-form>
-
+</template>
-export default {
+
-  name: 'CuteSearchForm',
+<script>
-  components: {},
+
-  props: {
+export default {
-    model: {
+  name: 'CuteSearchForm',
-      type: Object,
+  components: {},
-      required: true
+  props: {
-    },
+    model: {
-    disabled: {
+      type: Object,
-      type: Boolean,
+      required: true
-      required: false,
+    },
-      default: false
+    disabled: {
-    }
+      type: Boolean,
-  },
+      required: false,
-  methods: {
+      default: false
-    onFormSubmit(formName) {
+    }
-      const that = this
+  },
-      that.$refs[formName].validate((valid) => {
+  methods: {
-        if (valid) {
+    onFormSubmit(formName) {
-          that.$emit('submit', that.model)
+      const that = this
-        } else {
+      that.$refs[formName].validate((valid) => {
-          return false
+        if (valid) {
-        }
+          that.$emit('submit', that.model)
-      })
+        } else {
-    },
+          return false
-    onFormReset(formName) {
+        }
-      try {
+      })
-        this.$refs[formName].resetFields()
+    },
-        this.onFormSubmit(formName)
+    onFormReset(formName) {
-        // this.$emit('reset')
+      try {
-      } catch (e) {
+        this.$refs[formName].resetFields()
-        console.error(e)
+        this.onFormSubmit(formName)
-      }
+        // this.$emit('reset')
-    }
+      } catch (e) {
-  }
+        console.error(e)
-}
+      }
-</script>
+    }
-
+  }
+}
+</script>
+

cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue

@@ -5,7 +5,7 @@
  * @created 2025-08-20
  -->
 <template>
-  <div class="overflow-panel" :style="{height: height}">
+  <div class="overflow-panel" :style="{width: '100%', height: height, maxHeight: height}">
     <slot />
   </div>
 </template>