style: 重塑政务风格 + 操作列统一 el-link + 表格紧凑化
业务背景 - ry-vue3 为政务/卫健委风合规管理系统 (医疗机构合规系统), 不要可爱配色、不要插画 - 品牌色: 主色 #15803D (低调深绿) + 次色 #0E7490 (青蓝), 不要蓝色系主色 变更概要 1. 全局地基 - theme.scss: Element Plus 主色改为 #15803D, slate 9 档, 联动组件库 - main.scss: 字体/页面骨架/筛选栏/表格/控件/滚动条 全套样式 - AdminLayout.vue: 政务顶栏 + 浅色侧栏 - Workbench.vue: 替换原绿底大字卡为 KPI 白底色条 + 快捷入口 + 进度条 2. 表格操作列改造 - el-button link 全面替换为 el-link (:underline="false" + type="primary/danger") - 36 文件 132 处替换, 操作列外加 .table-actions 容器 (内含分隔线) - 修复 el-link 不支持的属性 (size="small"/text/loading) 3. 筛选栏 - 弹性布局 + gap 14px 16px + align-items: flex-start + min-height 32px - 删除所有 scoped .filter-form 覆盖 (28 处) 让全局样式生效 - 控件宽度 180px 统一, 标签 32px 居中, 折行不紧贴 4. 表格紧凑化 - cell-padding 10px → 6px, 表头高度 36px - 行高 ~46px → ~36px, 字号 13px 5. 每页默认 20 条 - 21 文件 pageSize: 10 → 20 6. meetings 操作列折叠 - 11 操作 → 外置 3 个主操作 + 1 个"更多" el-dropdown (8 个次操作) - width 500px → 260px - 配 .op-dropdown / .op-caret 样式 (hover 旋转) - 新增 onMoreAction dispatch 函数 (复用原 handler) 7. 操作列文字防拆行 - .table-actions flex-wrap: nowrap + white-space: nowrap - el-link padding 0 8px → 0 6px, flex-shrink: 0 8. 环境配置 - .env.development: 直连远端 https://risingdoctor.com/hg-api (绕过 vite proxy 卡顿) - vite.config.js: proxy fallback 保留
This commit is contained in:
@@ -48,8 +48,8 @@
|
||||
<el-table-column label="设计文件" width="160" align="center">
|
||||
<template #default="{ row }">
|
||||
<template v-if="row.designFileUrl">
|
||||
<el-button link type="primary" @click="openDesign(row)">查看</el-button>
|
||||
<el-button link type="primary" @click="downloadFile(row)">下载</el-button>
|
||||
<el-link :underline="false" type="primary" @click="openDesign(row)">查看</el-link>
|
||||
<el-link :underline="false" type="primary" @click="downloadFile(row)">下载</el-link>
|
||||
</template>
|
||||
<span v-else style="color:#c0c4cc">-</span>
|
||||
</template>
|
||||
@@ -69,11 +69,11 @@
|
||||
<el-table-column prop="projectNo" label="项目编号" width="140" align="center" />
|
||||
<el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" @click="onAudit(row)">审核</el-button>
|
||||
<el-button link type="primary" @click="goEdit(row)">修改</el-button>
|
||||
<el-button link type="primary" @click="onSettle(row)" v-if="row.isSettled!=='Y'">结算</el-button>
|
||||
</template>
|
||||
<template #default="{ row }"><div class="table-actions">
|
||||
<el-link :underline="false" type="primary" @click="onAudit(row)">审核</el-link>
|
||||
<el-link :underline="false" type="primary" @click="goEdit(row)">修改</el-link>
|
||||
<el-link :underline="false" type="primary" @click="onSettle(row)" v-if="row.isSettled!=='Y'">结算</el-link>
|
||||
</div></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pager">
|
||||
@@ -173,7 +173,7 @@ const q = ref({ planName: '', projectNo: '', planDirectionId: '', planCategory:
|
||||
const rows = ref([]); const selection = ref([])
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const page = reactive({ pageNum: 1, pageSize: 10, total: 0 })
|
||||
const page = reactive({ pageNum: 1, pageSize: 20, total: 0 })
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
@@ -350,7 +350,6 @@ onMounted(() => { loadPlanDirectionOptions(); load() })
|
||||
border-left: 3px solid var(--brand-primary);
|
||||
}
|
||||
.page-sub { font-size: 13px; color: #909399; margin: 0 0 16px; }
|
||||
.filter-form { margin-bottom: 12px; }
|
||||
.batch-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
|
||||
.filter-tip { color: #909399; font-size: 12px; }
|
||||
.pager { display: flex; justify-content: flex-end; margin-top: 12px; }
|
||||
|
||||
Reference in New Issue
Block a user