feat(components): 添加表单平铺功能并优化组件样式

- 为 CuteFormDialog 和 CuteFormDrawer 组件添加 inline 属性支持平铺表单
- 调整 CuteFormDialog 宽度默认值从 40% 改为 30%
- 调整 CuteFormDrawer 宽度默认值从 40% 改为 30%
- 优化 CuteFormDialog 和 CuteFormDrawer 的滚动容器高度计算
- 为 CuteFormDialog、CuteFormDrawer 和 CutePreviewDrawer 组件添加 SCSS 样式支持
- 重构 CuteSectionTitle 组件，支持多级标题显示
- 为 CuteSectionTitle 组件添加 subTitle 和 thirdTitle 属性
- 调整 CuteHorizontalScrollBar 和 CuteVerticalScrollBar 组件属性必填性
- 在预览抽屉组件中添加内边距优化布局

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>
 

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>
 

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

@@ -17,7 +17,7 @@ export default {
   props: {
     width: {
       type: String,
-      required: true,
+      required: false,
       default: '1280px'
     }
   }

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

@@ -18,7 +18,9 @@
     :modal="false"
   >
     <!-- 这里是插槽，用于渲染传入的组件 -->
+    <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 */

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

@@ -7,10 +7,14 @@
 <template>
   <el-row>
     <el-col :span="12">
-      <h4>
+      <div class="title-container">
-        <i class="el-icon-s-help" style="color: #409EFF;font-size: 18px" />
+        <div class="main-title-line">
-        <i style="color: #303133;">{{ title }}</i>
+          <i class="el-icon-platform-eleme" style="color: #409EFF;font-size: 18px" />
-      </h4>
+          <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>

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

@@ -17,7 +17,7 @@ export default {
   props: {
     height: {
       type: String,
-      required: true,
+      required: false,
       default: '100px'
     }
   }

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>