From de83e8a27845335625127f2ae196d4c5cb7f4057 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Fri, 30 Jan 2026 19:09:11 +0800
Subject: [PATCH] =?UTF-8?q?style(components):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 CuteFormDialog、CuteFormDrawer、CuteSearchForm 组件的 el-form 添加 size="mini" 属性
- 将 CuteFormDialog 和 CuteFormDrawer 的默认宽度从 30% 调整为 40%
- 将 CuteScreenShot 按钮的尺寸从 small 调整为 mini 并将文本从"截图并下载"改为"截屏"
- 为 CuteSearchForm 添加前后置插槽的注释说明
- 为 CuteVerticalScrollBar 设置固定宽度和最大高度样式
---
 .../views/components/dev/CuteFormDialog.vue   |   4 +-
 .../views/components/dev/CuteFormDrawer.vue   |   4 +-
 .../views/components/dev/CuteScreenShot.vue   |   4 +-
 .../views/components/dev/CuteSearchForm.vue   | 131 +++++++++---------
 .../components/dev/CuteVerticalScrollBar.vue  |   2 +-
 5 files changed, 74 insertions(+), 71 deletions(-)

diff --git a/cutejava-front/src/views/components/dev/CuteFormDialog.vue b/cutejava-front/src/views/components/dev/CuteFormDialog.vue
index f37e6388..f338c096 100644
--- a/cutejava-front/src/views/components/dev/CuteFormDialog.vue
+++ b/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,
diff --git a/cutejava-front/src/views/components/dev/CuteFormDrawer.vue b/cutejava-front/src/views/components/dev/CuteFormDrawer.vue
index 8a9ff73d..e6b45a79 100644
--- a/cutejava-front/src/views/components/dev/CuteFormDrawer.vue
+++ b/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,
diff --git a/cutejava-front/src/views/components/dev/CuteScreenShot.vue b/cutejava-front/src/views/components/dev/CuteScreenShot.vue
index 974a63c5..21707210 100644
--- a/cutejava-front/src/views/components/dev/CuteScreenShot.vue
+++ b/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">
diff --git a/cutejava-front/src/views/components/dev/CuteSearchForm.vue b/cutejava-front/src/views/components/dev/CuteSearchForm.vue
index d13994c3..9ef87627 100644
--- a/cutejava-front/src/views/components/dev/CuteSearchForm.vue
+++ b/cutejava-front/src/views/components/dev/CuteSearchForm.vue
@@ -1,64 +1,67 @@
-<!--
- * 查询组件
- * @author odboy
- * @email tianjun@odboy.cn
- * @created 2025-08-20
- -->
-<template>
-  <el-form
-    ref="searchForm"
-    :inline="true"
-    :model.sync="model"
-    label-position="right"
-    label-width="90px"
-    :disabled="disabled"
-  >
-    <slot name="suffix" />
-    <el-form-item>
-      <el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
-      <el-button @click="onFormReset('searchForm')">重置</el-button>
-    </el-form-item>
-    <slot name="operation" />
-  </el-form>
-</template>
-
-<script>
-
-export default {
-  name: 'CuteSearchForm',
-  components: {},
-  props: {
-    model: {
-      type: Object,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  methods: {
-    onFormSubmit(formName) {
-      const that = this
-      that.$refs[formName].validate((valid) => {
-        if (valid) {
-          that.$emit('submit', that.model)
-        } else {
-          return false
-        }
-      })
-    },
-    onFormReset(formName) {
-      try {
-        this.$refs[formName].resetFields()
-        this.onFormSubmit(formName)
-        // this.$emit('reset')
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  }
-}
-</script>
-
+<!--
+ * 查询组件
+ * @author odboy
+ * @email tianjun@odboy.cn
+ * @created 2025-08-20
+ -->
+<template>
+  <el-form
+    ref="searchForm"
+    :inline="true"
+    :model.sync="model"
+    label-position="right"
+    label-width="90px"
+    :disabled="disabled"
+    size="mini"
+  >
+    <!-- 通过  <template v-slot:suffix> 插槽前置查询条件 -->
+    <slot name="suffix" />
+    <el-form-item>
+      <el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
+      <el-button @click="onFormReset('searchForm')">重置</el-button>
+    </el-form-item>
+    <!-- 通过  <template v-slot:operation> 插槽后置操作按钮 -->
+    <slot name="operation" />
+  </el-form>
+</template>
+
+<script>
+
+export default {
+  name: 'CuteSearchForm',
+  components: {},
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  methods: {
+    onFormSubmit(formName) {
+      const that = this
+      that.$refs[formName].validate((valid) => {
+        if (valid) {
+          that.$emit('submit', that.model)
+        } else {
+          return false
+        }
+      })
+    },
+    onFormReset(formName) {
+      try {
+        this.$refs[formName].resetFields()
+        this.onFormSubmit(formName)
+        // this.$emit('reset')
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+}
+</script>
+
diff --git a/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue b/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
index 85333c94..52bc6165 100644
--- a/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
+++ b/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>