RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
guochunsi
2026-02-05 15:35:46 +08:00
parent 51e3e72bd1
commit 94b5b8b7ab
6 changed files with 352 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/SearchForm/index.vue
View File

@@ -1,27 +1,31 @@
<template>
<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle }">
<div class="search-form__wrap" :class="{ 'search-form__wrap--with-title': filterTitle && props.showFilterTitle }">
<div class="search-form__bar">
<div class="search-form-container">
<el-form :model="formModel" ref="formRef" :inline="true" @keyup.enter="handleKeyupEnter" :label-width="labelWidth">
<!-- 筛选 + 展开更多 放在同一表单项内，保证垂直对齐 -->
<el-form-item v-if="filterTitle || hasCollapsibleItems" class="search-form__left-group">
<el-form-item v-if="(filterTitle && props.showFilterTitle) || hasCollapsibleItems" class="search-form__left-group">
<div class="search-form__left-inner">
<span v-if="filterTitle" class="search-form__title">
<span v-if="filterTitle && props.showFilterTitle" class="search-form__title" :style="{ marginRight: hasCollapsibleItems ? '12px' : '0' }">
<el-icon class="search-form__title-icon"><Search /></el-icon>
{{ filterTitle }}
</span>
<el-button
v-if="hasCollapsibleItems"
link
type="primary"
class="toggle-btn"
@click="toggleExpand"
round
>
<el-icon style="margin-right: 4px">
<ArrowUp v-if="isExpanded" />
<ArrowDown v-else />
<el-icon
class="toggle-btn__icon"
:class="{ 'toggle-btn__icon--expanded': isExpanded }"
>
<CaretBottom />
</el-icon>
{{ isExpanded ? '收起' : '展开更多' }}
<span class="toggle-btn__text">
{{ isExpanded ? '收起筛选' : '更多筛选' }}
</span>
</el-button>
</div>
</el-form-item>
@@ -44,7 +48,7 @@
<script setup lang="ts" name="search-form">
import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
import { CaretBottom, Search } from '@element-plus/icons-vue';
const props = defineProps({
/**
@@ -52,7 +56,14 @@ const props = defineProps({
*/
filterTitle: {
type: String,
default: '',
default: '筛选',
},
/**
* 是否显示筛选标题文案（仅控制左侧「筛选」文字和图标）
*/
showFilterTitle: {
type: Boolean,
default: false,
},
/**
* 表单数据模型
@@ -227,7 +238,6 @@ defineExpose({
gap: 6px;
flex-shrink: 0;
padding-right: 12px;
margin-right: 12px;
height: 32px;
line-height: 32px;
font-size: 14px;
@@ -261,13 +271,29 @@ defineExpose({
align-items: center;
}
.search-form__left-inner :deep(.toggle-btn__icon) {
transition: transform 0.25s ease;
}
.search-form__left-inner :deep(.toggle-btn__icon--expanded) {
transform: rotate(180deg);
}
.search-form__left-inner :deep(.toggle-btn) {
font-size: 14px;
font-weight: 500;
height: 32px;
padding: 0 12px;
display: inline-flex;
align-items: center;
border-radius: 6px;
font-weight: 500;
// 默认态直接使用 hover 的视觉样式
color: var(--el-color-primary);
background-color: var(--el-fill-color-lighter);
border: 1px solid var(--el-color-primary-light-7);
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
&:hover {
background-color: var(--el-fill-color-light);
border-color: var(--el-color-primary);
color: var(--el-color-primary);
}
}
:deep(.el-form-item:not(:has(.el-button))) {