liuwenxin/PayrollManagementSystem
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 菜单图标与视觉设计系统落地

Browse Source 
- 引入 @element-plus/icons-vue 官方图标库，菜单项按模块配图标，消除
  纯文字导航的辨识成本（新增依赖已评估：Element Plus 官方同源维护）
- AppMenu/BasicLayout/router 同步：图标渲染、菜单结构与路由 meta 对齐
- index.css 视觉系统化：品牌色、语义三色（ok/warn/danger 及其 wash 层次）、
  形体与材质（圆角、缓动、阴影、等宽字体）统一为 CSS 变量，并覆盖
  Element Plus 主色
- 登录页、业务页、结算页、工作台、审批页等视图随新变量适配

验证：pnpm type-check 与 pnpm build 均通过；后端接口契约未变。

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
liuwenxinandClaude Code committed 2026-10-22 19:45:54 +08:00
1 parent f88857e026
commit e61800dcdc
34 files changed
+3960 -2041
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/views/calc/ledger/index.vue
+96 -50
View File
@@ -70,7 +70,20 @@ async function submitRecalc(): Promise<void> {
<template>
<div class="page">
<el-form inline class="filters" @submit.prevent>
<!-- 页面头：标题 + 一句口径说明（台账是核算事实的固化点）+ 签名水线 -->
<div class="page-head">
<h1 class="page-title">绩效台账</h1>
<p class="page-desc">
每笔回款只核算一次；重算作废旧版本、按当前参数落新版本并留痕，展开行可看当次核算的参数快照
</p>
<span class="waterline"></span>
</div>
<!--
.filter-bar 直接挂在 el-form 上（去掉 inline）：el-form 不是 flex 透明容器，
外面再包一层 div 会让 el-form-item 丢掉 gap 排版，筛选条退化成竖排。
-->
<el-form class="filter-bar" @submit.prevent>
<el-form-item label="归属月">
<el-input
v-model="filters.settlement_month"
@@ -93,57 +106,90 @@ async function submitRecalc(): Promise<void> {
<el-option label="仅历史版本" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<div class="filter-bar__actions">
<el-button type="primary" @click="search">查询</el-button>
<el-button @click="resetFilters">重置</el-button>
</el-form-item>
</div>
</el-form>
<el-table v-loading="loading" :data="records" stripe>
<el-table-column type="expand">
<template #default="{ row }">
<pre class="snapshot">{{ JSON.stringify(row.snapshot_json ?? {}, null, 2) }}</pre>
</template>
</el-table-column>
<el-table-column prop="settlement_month" label="归属月" width="90" />
<el-table-column prop="business_no" label="业务编号" min-width="150" />
<el-table-column prop="personnel_name" label="归属人员" width="100" />
<el-table-column prop="role_code" label="岗位" width="110" />
<el-table-column prop="receipt_date" label="回款日" width="100" />
<el-table-column prop="payment_days" label="天数" width="70" />
<el-table-column prop="rate_text" label="计提比例" min-width="90" />
<el-table-column prop="converted_profit" label="折算毛利" min-width="100" />
<el-table-column prop="performance_amount" label="绩效金额" min-width="100" />
<el-table-column prop="payable_amount" label="应付绩效" min-width="100" />
<el-table-column label="版本" width="80">
<template #default="{ row }">
v{{ row.calc_version }}
<el-tag v-if="row.is_active === 0" size="small" type="info" disable-transitions>
已替代
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="90" fixed="right" align="center">
<template #default="{ row }">
<el-button
v-if="row.is_active === 1 && row.calc_type === 1"
link
type="primary"
@click="openRecalc(row)"
>
重算
</el-button>
</template>
</el-table-column>
</el-table>
<div class="card">
<el-table
v-loading="loading"
:data="records"
stripe
empty-text="台账还没有核算行 —— 换个归属月看看，或先在回款管理里登记回款后再核算"
>
<el-table-column type="expand">
<template #default="{ row }">
<pre class="snapshot">{{ JSON.stringify(row.snapshot_json ?? {}, null, 2) }}</pre>
</template>
</el-table-column>
<el-table-column prop="settlement_month" label="归属月" width="90" />
<el-table-column label="业务编号" min-width="150">
<template #default="{ row }">
<span class="cell-code">{{ row.business_no }}</span>
</template>
</el-table-column>
<el-table-column prop="personnel_name" label="归属人员" width="100" />
<el-table-column prop="role_code" label="岗位" width="110" />
<el-table-column prop="receipt_date" label="回款日" width="100" />
<el-table-column label="天数" width="70" align="right">
<template #default="{ row }">
<span class="cell-num">{{ row.payment_days }}</span>
</template>
</el-table-column>
<el-table-column label="计提比例" min-width="90" align="right">
<template #default="{ row }">
<span class="cell-num">{{ row.rate_text }}</span>
</template>
</el-table-column>
<el-table-column label="折算毛利" min-width="100" align="right">
<template #default="{ row }">
<span class="cell-num">{{ row.converted_profit }}</span>
</template>
</el-table-column>
<el-table-column label="绩效金额" min-width="100" align="right">
<template #default="{ row }">
<span class="cell-num">{{ row.performance_amount }}</span>
</template>
</el-table-column>
<el-table-column label="应付绩效" min-width="100" align="right">
<template #default="{ row }">
<span class="cell-num">{{ row.payable_amount }}</span>
</template>
</el-table-column>
<el-table-column label="版本" width="100">
<template #default="{ row }">
<span class="cell-code">v{{ row.calc_version }}</span>
<!-- 历史版本用中性 pill：被替代不是异常，只是不再是生效版本 -->
<span v-if="row.is_active === 0" class="ys-pill">已替代</span>
</template>
</el-table-column>
<el-table-column label="操作" width="90" fixed="right" align="center">
<template #default="{ row }">
<el-button
v-if="row.is_active === 1 && row.calc_type === 1"
link
type="primary"
@click="openRecalc(row)"
>
重算
</el-button>
</template>
</el-table-column>
</el-table>
<AppPagination
:total="total"
:page-num="pageNum"
:page-size="pageSize"
@page-change="onPageChange"
@size-change="onSizeChange"
/>
<!-- 分页落进 card-foot：与表体同一张卡，卡底微渐变收边 -->
<div class="card-foot">
<AppPagination
:total="total"
:page-num="pageNum"
:page-size="pageSize"
@page-change="onPageChange"
@size-change="onSizeChange"
/>
</div>
</div>
<el-dialog v-model="recalcVisible" title="重算确认" width="460px">
<p class="recalc-warn">
@@ -166,9 +212,8 @@ async function submitRecalc(): Promise<void> {
</template>
<style scoped>
.filters {
margin-bottom: 4px;
}
/* 筛选条（.filter-bar）、卡片与表尾（.card/.card-foot）的皮肤来自全局 index.css，
此处只保留本页特有的快照块与重算提示 */
.snapshot {
margin: 0;
@@ -186,4 +231,5 @@ async function submitRecalc(): Promise<void> {
font-size: 12px;
color: var(--ys-ink-3);
}
</style>