From cb17e8466e307bcd986e1bf0cdd9f54bce0b3189 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Mon, 26 Jan 2026 19:56:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=B9=B3=E9=93=BA=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 CuteFormDialog 和 CuteFormDrawer 组件添加 inline 属性支持平铺表单
- 调整 CuteFormDialog 宽度默认值从 40% 改为 30%
- 调整 CuteFormDrawer 宽度默认值从 40% 改为 30%
- 优化 CuteFormDialog 和 CuteFormDrawer 的滚动容器高度计算
- 为 CuteFormDialog、CuteFormDrawer 和 CutePreviewDrawer 组件添加 SCSS 样式支持
- 重构 CuteSectionTitle 组件，支持多级标题显示
- 为 CuteSectionTitle 组件添加 subTitle 和 thirdTitle 属性
- 调整 CuteHorizontalScrollBar 和 CuteVerticalScrollBar 组件属性必填性
- 在预览抽屉组件中添加内边距优化布局
---
 .../views/components/dev/CuteFormDialog.vue   | 40 ++++++++++++--
 .../views/components/dev/CuteFormDrawer.vue   | 42 +++++++++++++--
 .../dev/CuteHorizontalScrollBar.vue           |  2 +-
 .../components/dev/CutePreviewDrawer.vue      |  6 ++-
 .../views/components/dev/CuteSectionTitle.vue | 52 +++++++++++++++++--
 .../components/dev/CuteVerticalScrollBar.vue  |  2 +-
 .../views/componentsDemo/CuteOtherDemo.vue    |  5 ++
 7 files changed, 132 insertions(+), 17 deletions(-)

diff --git a/cutejava-front/src/views/components/dev/CuteFormDialog.vue b/cutejava-front/src/views/components/dev/CuteFormDialog.vue
index e9e89f1d..f37e6388 100644
--- a/cutejava-front/src/views/components/dev/CuteFormDialog.vue
+++ b/cutejava-front/src/views/components/dev/CuteFormDialog.vue
@@ -14,13 +14,13 @@
     :modal="false"
   >
     <div class="container-form">
-      <el-form ref="form" :model="model" :rules="rules">
+      <el-form ref="form" :model="model" :rules="rules" :inline="inline">
         <!-- 这里是插槽，用于渲染传入的 el-form-item -->
         <slot />
       </el-form>
     </div>
     <el-divider />
-    <div class="dialog-footer" style="padding-right: 30px;text-align: right">
+    <div class="dialog-footer">
       <el-button type="danger" @click="hidden">取 消</el-button>
       <!--<el-button @click="resetForm('form')">重 置</el-button>-->
       <el-button v-prevent-re-click type="primary" @click="submitForm('form')">提 交</el-button>
@@ -41,7 +41,7 @@ export default {
     width: {
       type: String,
       required: false,
-      default: '40%'
+      default: '30%'
     },
     fullscreen: {
       type: Boolean,
@@ -57,6 +57,12 @@ export default {
       type: Object,
       required: true,
       default: null
+    },
+    // 是否平铺表单
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -90,16 +96,42 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .container-form {
   overflow-y: scroll; /* 启用滚动 */
   scrollbar-width: none; /* Firefox */
   padding-right: 20px;
   -ms-overflow-style: none; /* Internet Explorer 10+ */
+  max-height: calc(100vh - 200px); /* 调整高度以适应页头和底部按钮 */
 }
 
 .container-form::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera*/
 }
+
+.dialog-content-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-footer {
+  text-align: right;
+  border-top: 1px solid #ebeef5;
+  padding: 16px 0 0 0;
+  background-color: white;
+  margin-top: auto;
+}
+
+::v-deep(.el-dialog__body) {
+  padding: 20px 20px !important;
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+}
+
+::v-deep(.el-divider--horizontal) {
+  margin: 0 !important;
+}
 </style>
 
diff --git a/cutejava-front/src/views/components/dev/CuteFormDrawer.vue b/cutejava-front/src/views/components/dev/CuteFormDrawer.vue
index d09f6756..8a9ff73d 100644
--- a/cutejava-front/src/views/components/dev/CuteFormDrawer.vue
+++ b/cutejava-front/src/views/components/dev/CuteFormDrawer.vue
@@ -18,13 +18,13 @@
     :modal="false"
   >
     <div class="container-form">
-      <el-form ref="form" :model="model" :rules="rules">
+      <el-form ref="form" :model="model" :rules="rules" :inline="inline">
         <!-- 这里是插槽，用于渲染传入的 el-form-item -->
         <slot />
       </el-form>
     </div>
     <el-divider />
-    <div class="dialog-footer" style="padding-right: 30px;text-align: right">
+    <div class="dialog-footer">
       <el-button type="danger" @click="hidden">取 消</el-button>
       <el-button v-prevent-re-click type="primary" @click="submitForm('form')">提 交</el-button>
     </div>
@@ -44,7 +44,7 @@ export default {
     width: {
       type: String,
       required: false,
-      default: '40%'
+      default: '30%'
     },
     model: {
       type: Object,
@@ -55,6 +55,12 @@ export default {
       type: Object,
       required: true,
       default: null
+    },
+    // 是否平铺表单
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -88,11 +94,11 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .container-form {
   overflow-y: scroll; /* 启用滚动 */
   scrollbar-width: none; /* Firefox */
-  height: 85%;
+  height: calc(100% - 60px); /* 预留出底部按钮的空间 */
   padding-right: 20px;
   -ms-overflow-style: none; /* Internet Explorer 10+ */
 }
@@ -100,5 +106,31 @@ export default {
 .container-form::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera*/
 }
+
+.drawer-content-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.dialog-footer{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: right;
+  background-color: white;
+  border-top: 1px solid #ebeef5;
+  padding: 16px 20px;
+}
+
+::v-deep(.el-drawer__body) {
+  padding: 20px 20px !important;
+}
+
+::v-deep(.el-divider--horizontal) {
+  margin: 14px 0 !important;
+}
 </style>
 
diff --git a/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue b/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue
index bb052ffa..1bc2a778 100644
--- a/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue
+++ b/cutejava-front/src/views/components/dev/CuteHorizontalScrollBar.vue
@@ -17,7 +17,7 @@ export default {
   props: {
     width: {
       type: String,
-      required: true,
+      required: false,
       default: '1280px'
     }
   }
diff --git a/cutejava-front/src/views/components/dev/CutePreviewDrawer.vue b/cutejava-front/src/views/components/dev/CutePreviewDrawer.vue
index 4f7fb2e9..856e317d 100644
--- a/cutejava-front/src/views/components/dev/CutePreviewDrawer.vue
+++ b/cutejava-front/src/views/components/dev/CutePreviewDrawer.vue
@@ -18,7 +18,9 @@
     :modal="false"
   >
     <!-- 这里是插槽，用于渲染传入的组件 -->
-    <slot />
+    <div style="padding-left: 20px">
+      <slot />
+    </div>
   </el-drawer>
 </template>
 
@@ -61,7 +63,7 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .container-form {
   overflow-y: scroll; /* 启用滚动 */
   scrollbar-width: none; /* Firefox */
diff --git a/cutejava-front/src/views/components/dev/CuteSectionTitle.vue b/cutejava-front/src/views/components/dev/CuteSectionTitle.vue
index 803c2aee..2e2508be 100644
--- a/cutejava-front/src/views/components/dev/CuteSectionTitle.vue
+++ b/cutejava-front/src/views/components/dev/CuteSectionTitle.vue
@@ -7,10 +7,14 @@
 <template>
   <el-row>
     <el-col :span="12">
-      <h4>
-        <i class="el-icon-s-help" style="color: #409EFF;font-size: 18px" />
-        <i style="color: #303133;">{{ title }}</i>
-      </h4>
+      <div class="title-container">
+        <div class="main-title-line">
+          <i class="el-icon-platform-eleme" style="color: #409EFF;font-size: 18px" />
+          <i style="color: #303133;font-style: normal">{{ title }}</i>
+        </div>
+        <div v-if="subTitle" class="sub-title-with-icon-align">{{ subTitle }}</div>
+        <div v-if="thirdTitle" class="third-title-with-text-align">{{ thirdTitle }}</div>
+      </div>
     </el-col>
     <el-col :span="12" style="text-align: right;line-height: 64px;height: 64px;padding-right: 30px">
       <slot />
@@ -27,7 +31,47 @@ export default {
       type: String,
       required: true,
       default: '默认标题'
+    },
+    subTitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    thirdTitle: {
+      type: String,
+      required: false,
+      default: ''
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+.title-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.main-title-line {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  color: #303133;
+
+  i:first-child {
+    margin-right: 8px; // 图标与文字的间距
+  }
+}
+
+.sub-title-with-icon-align {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 8px;
+}
+
+.third-title-with-text-align {
+  font-size: 12px;
+  color: #909399;
+  margin-left: 26px;
+  margin-bottom: 0;
+}
+</style>
diff --git a/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue b/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
index 74a58290..85333c94 100644
--- a/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
+++ b/cutejava-front/src/views/components/dev/CuteVerticalScrollBar.vue
@@ -17,7 +17,7 @@ export default {
   props: {
     height: {
       type: String,
-      required: true,
+      required: false,
       default: '100px'
     }
   }
diff --git a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
index 4d5af594..c3ff7824 100644
--- a/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteOtherDemo.vue
@@ -46,6 +46,11 @@
       <el-button type="danger" size="mini">操作按钮2</el-button>
       <el-button type="danger" size="mini">操作按钮3</el-button>
     </cute-section-title>
+    <cute-section-title title="主标题" sub-title="副标题" third-title="三级标题">
+      <el-button type="danger" size="mini">操作按钮1</el-button>
+      <el-button type="danger" size="mini">操作按钮2</el-button>
+      <el-button type="danger" size="mini">操作按钮3</el-button>
+    </cute-section-title>
   </div>
 </template>