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

- 为 CuteFormDialog 和 CuteFormDrawer 组件添加 inline 属性支持平铺表单
- 调整 CuteFormDialog 宽度默认值从 40% 改为 30%
- 调整 CuteFormDrawer 宽度默认值从 40% 改为 30%
- 优化 CuteFormDialog 和 CuteFormDrawer 的滚动容器高度计算
- 为 CuteFormDialog、CuteFormDrawer 和 CutePreviewDrawer 组件添加 SCSS 样式支持
- 重构 CuteSectionTitle 组件,支持多级标题显示
- 为 CuteSectionTitle 组件添加 subTitle 和 thirdTitle 属性
- 调整 CuteHorizontalScrollBar 和 CuteVerticalScrollBar 组件属性必填性
- 在预览抽屉组件中添加内边距优化布局
This commit is contained in:
2026-01-27 08:55:36 +08:00
parent af19abcf3e
commit cb17e8466e
7 changed files with 132 additions and 17 deletions
@@ -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>