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" :modal="false"
> >
<div class="container-form"> <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 --> <!-- 这里是插槽,用于渲染传入的 el-form-item -->
<slot /> <slot />
</el-form> </el-form>
@@ -41,7 +41,7 @@ export default {
width: { width: {
type: String, type: String,
required: false, required: false,
default: '30%' default: '40%'
}, },
fullscreen: { fullscreen: {
type: Boolean, type: Boolean,
@@ -18,7 +18,7 @@
:modal="false" :modal="false"
> >
<div class="container-form"> <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 --> <!-- 这里是插槽,用于渲染传入的 el-form-item -->
<slot /> <slot />
</el-form> </el-form>
@@ -44,7 +44,7 @@ export default {
width: { width: {
type: String, type: String,
required: false, required: false,
default: '30%' default: '40%'
}, },
model: { model: {
type: Object, type: Object,
@@ -11,10 +11,10 @@
type="primary" type="primary"
icon="el-icon-camera" icon="el-icon-camera"
:loading="capturing" :loading="capturing"
size="small" size="mini"
@click="capture" @click="capture"
> >
截图并下载 截屏
</el-button> </el-button>
</div> </div>
<div id="elementIdSelector" style="padding: 15px"> <div id="elementIdSelector" style="padding: 15px">
@@ -12,12 +12,15 @@
label-position="right" label-position="right"
label-width="90px" label-width="90px"
:disabled="disabled" :disabled="disabled"
size="mini"
> >
<!-- 通过 <template v-slot:suffix> 插槽前置查询条件 -->
<slot name="suffix" /> <slot name="suffix" />
<el-form-item> <el-form-item>
<el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button> <el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
<el-button @click="onFormReset('searchForm')">重置</el-button> <el-button @click="onFormReset('searchForm')">重置</el-button>
</el-form-item> </el-form-item>
<!-- 通过 <template v-slot:operation> 插槽后置操作按钮 -->
<slot name="operation" /> <slot name="operation" />
</el-form> </el-form>
</template> </template>
@@ -5,7 +5,7 @@
* @created 2025-08-20 * @created 2025-08-20
--> -->
<template> <template>
<div class="overflow-panel" :style="{height: height}"> <div class="overflow-panel" :style="{width: '100%', height: height, maxHeight: height}">
<slot /> <slot />
</div> </div>
</template> </template>