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

- 为 CuteFormDialog、CuteFormDrawer、CuteSearchForm 组件的 el-form 添加 size="mini" 属性
- 将 CuteFormDialog 和 CuteFormDrawer 的默认宽度从 30% 调整为 40%
- 将 CuteScreenShot 按钮的尺寸从 small 调整为 mini 并将文本从"截图并下载"改为"截屏"
- 为 CuteSearchForm 添加前后置插槽的注释说明
- 为 CuteVerticalScrollBar 设置固定宽度和最大高度样式
This commit is contained in:
2026-01-30 19:09:11 +08:00
parent 6a420244e3
commit de83e8a278
5 changed files with 74 additions and 71 deletions
@@ -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,
@@ -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,
@@ -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">
@@ -12,12 +12,15 @@
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>
@@ -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>