更新部分功能实现逻辑

2026-06-22 13:23:04 +08:00
parent 1e6230d412
commit faa09101a1
31 changed files with 4859 additions and 307 deletions
@@ -19,7 +19,7 @@
 | `src/stores/` | Pinia 状态管理，目前主要是登录态、菜单、权限和主题色。 |
 | `src/router/` | 路由配置和登录/权限守卫。 |
 | `src/components/` | 通用布局、侧边栏、顶部栏、统计卡片和工资结果表格。 |
-| `src/views/` | 登录、工作台、工资计算、计算记录、提成管理、统计报表、组织架构、员工维护、薪资维护、规则配置、用户管理、操作日志页面。 |
+| `src/views/` | 登录、工作台、实时考勤、月度核算、工资计算、计算记录、提成管理、统计报表、组织架构、员工维护、薪资维护、规则配置、用户管理、操作日志页面。 |
 | `src/assets/` | 全局样式和 UI 设计变量。 |

 ## 本地启动
@@ -55,7 +55,7 @@ http://127.0.0.1:5173/
 /static -> http://127.0.0.1:8000
 ```

-因此前端代码中可以直接请求 `/api/auth/login`、`/api/payroll/excel` 等路径，头像静态资源也可以直接访问 `/static/uploads/avatars/...`。
+因此前端代码中可以直接请求 `/api/auth/login`、`/api/attendance/realtime/today`、`/api/payroll/monthly/runs`、`/api/payroll/excel` 等路径，头像静态资源也可以直接访问 `/static/uploads/avatars/...`。

 如果部署时前端和后端不在同一个域名，可以复制 `.env.example` 为 `.env`，并设置：

@@ -90,6 +90,8 @@ VITE_DEV_PROXY_TARGET=http://127.0.0.1:8001
 | --- | --- | --- |
 | 登录 | `/login` | 用户登录入口。 |
 | 工作台 | `/dashboard` | 展示最近计算任务、统计卡片和趋势面板。 |
+| 实时考勤 | `/attendance/realtime` | 查看今日打卡、迟到、缺卡、请假、加班和本月薪资预估，可同步钉钉刷新。 |
+| 月度核算 | `/payroll/monthly` | 按工资月份完成 Excel 导入、钉钉同步计算、异常处理、锁定和导出。 |
 | 工资计算 | `/payroll` | 支持 Excel 导入和钉钉实时计算。 |
 | 计算记录 | `/payroll/jobs` | 支持按任务编号查询已落库工资结果。 |
 | 提成管理 | `/payroll/commissions` | 支持手工维护提成和 Excel 批量导入。 |
@@ -105,6 +107,8 @@ VITE_DEV_PROXY_TARGET=http://127.0.0.1:8001

 ## 个性化与个人资料

+实时考勤中的薪资金额是过程预估，最终工资以月度核算锁定结果为准。月度核算锁定后，本月工资不能重新计算，只保留导出。
+
 顶部栏提供两个常用入口：

 - 调色盘按钮：切换主题色，支持深海蓝、专业蓝、翡翠绿、勃艮第，选择结果保存在浏览器本地。
@@ -121,8 +125,8 @@ static/uploads/avatars
 | 角色 | 可见菜单和操作 |
 | --- | --- |
 | `superuser` | 拥有全部菜单和全部操作权限。 |
-| `manager` | 可进行工资计算、组织架构、员工维护、薪资维护、提成管理、规则配置、报表查看和操作日志查看。 |
-| `viewer` | 可查看计算记录、下载结果和统计报表。 |
+| `manager` | 可进行实时考勤同步、月度核算、工资计算、组织架构、员工维护、薪资维护、提成管理、规则配置、报表查看和操作日志查看。 |
+| `viewer` | 可查看实时考勤、计算记录、下载结果和统计报表。 |

 ## 构建

@@ -0,0 +1,68 @@
+import { apiFetch, buildApiUrl, getStoredToken } from "./http";
+import type { MonthlyPayrollDetailResponse, MonthlyPayrollRun } from "./types";
+
+export function listMonthlyRuns(month?: string): Promise<MonthlyPayrollRun[]> {
+  const query = month ? `?month=${encodeURIComponent(month)}` : "";
+  return apiFetch<MonthlyPayrollRun[]>(`/api/payroll/monthly/runs${query}`);
+}
+
+export function getMonthlyRun(runId: number): Promise<MonthlyPayrollDetailResponse> {
+  return apiFetch<MonthlyPayrollDetailResponse>(`/api/payroll/monthly/runs/${runId}`);
+}
+
+export function calculateMonthlyFromExcel(file: File, salaryMonth: string): Promise<MonthlyPayrollDetailResponse> {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("salary_month", salaryMonth);
+  formData.append("export_excel", "true");
+  return apiFetch<MonthlyPayrollDetailResponse>("/api/payroll/monthly/excel", {
+    method: "POST",
+    body: formData,
+  });
+}
+
+export function calculateMonthlyFromDingTalk(salaryMonth: string): Promise<MonthlyPayrollDetailResponse> {
+  return apiFetch<MonthlyPayrollDetailResponse>("/api/payroll/monthly/dingtalk", {
+    method: "POST",
+    body: JSON.stringify({
+      salary_month: salaryMonth,
+      source_type: "dingtalk",
+      export_excel: true,
+    }),
+  });
+}
+
+export function recalculateMonthlyRun(runId: number): Promise<MonthlyPayrollDetailResponse> {
+  return apiFetch<MonthlyPayrollDetailResponse>(`/api/payroll/monthly/runs/${runId}/recalculate`, {
+    method: "POST",
+  });
+}
+
+export function lockMonthlyRun(runId: number): Promise<MonthlyPayrollRun> {
+  return apiFetch<MonthlyPayrollRun>(`/api/payroll/monthly/runs/${runId}/lock`, {
+    method: "POST",
+  });
+}
+
+export async function exportMonthlyRun(runId: number): Promise<void> {
+  const headers = new Headers();
+  const token = getStoredToken();
+  if (token) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+
+  const response = await fetch(buildApiUrl(`/api/payroll/monthly/runs/${runId}/export`), { headers });
+  if (!response.ok) {
+    throw new Error("月度工资表导出失败");
+  }
+
+  const blob = await response.blob();
+  const objectUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = objectUrl;
+  anchor.download = `月度工资核算-${runId}.xlsx`;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(objectUrl);
+}
@@ -0,0 +1,16 @@
+import { apiFetch } from "./http";
+import type { RealtimeAttendanceResponse } from "./types";
+
+export function getTodayAttendance(date: string): Promise<RealtimeAttendanceResponse> {
+  return apiFetch<RealtimeAttendanceResponse>(`/api/attendance/realtime/today?date=${encodeURIComponent(date)}`);
+}
+
+export function syncRealtimeAttendance(date: string): Promise<RealtimeAttendanceResponse> {
+  return apiFetch<RealtimeAttendanceResponse>("/api/attendance/realtime/sync", {
+    method: "POST",
+    body: JSON.stringify({
+      attendance_date: date,
+      include_salary_preview: true,
+    }),
+  });
+}
@@ -376,3 +376,80 @@ export interface PayrollReportResponse {
    created_at: string;
  }>;
 }
+
+export interface RealtimeAttendanceSummary {
+  attendance_date: string;
+  employee_total: number;
+  checked_in_count: number;
+  unchecked_count: number;
+  late_count: number;
+  leave_count: number;
+  missing_card_count: number;
+  estimated_overtime_count: number;
+  estimated_net_total: number;
+}
+
+export interface TodayAttendanceItem {
+  employee_id: number | null;
+  employee_no: string;
+  employee_name: string;
+  department: string;
+  position: string;
+  first_punch: string;
+  last_punch: string;
+  attendance_status: string;
+  late_minutes: number;
+  missing_card_count: number;
+  leave_hours: number;
+  today_overtime_hours: number;
+  month_remaining_overtime_hours: number;
+  estimated_net_salary: number | null;
+  note: string;
+}
+
+export interface RealtimeAttendanceResponse {
+  sync_job_id: string | null;
+  synced_at: string | null;
+  summary: RealtimeAttendanceSummary;
+  items: TodayAttendanceItem[];
+}
+
+export interface MonthlyPayrollRun {
+  id: number;
+  salary_month: string;
+  source_type: string;
+  source_job_id: string;
+  status: "draft" | "calculated" | "reviewed" | "locked" | "failed" | string;
+  employee_count: number;
+  gross_total: number;
+  net_total: number;
+  deduction_total: number;
+  overtime_total: number;
+  locked_by: string;
+  locked_at: string | null;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface PayrollException {
+  id: number;
+  run_id: number | null;
+  sync_job_id: string | null;
+  employee_id: number | null;
+  employee_no: string;
+  employee_name: string;
+  salary_month: string;
+  exception_type: string;
+  severity: string;
+  message: string;
+  status: string;
+  created_at: string;
+  resolved_at: string | null;
+}
+
+export interface MonthlyPayrollDetailResponse {
+  run: MonthlyPayrollRun;
+  results: PayrollResult[];
+  exceptions: PayrollException[];
+}
@@ -1,50 +1,50 @@
 :root {
-  --surface: #f7f9fb;
-  --surface-soft: #eef2f6;
-  --surface-strong: #e3e8ee;
+  --surface: #f5f7fa;
+  --surface-soft: #eef2f7;
+  --surface-strong: #d9e1ec;
  --card: #ffffff;
-  --primary: #041627;
-  --primary-soft: #1a2b3c;
-  --text: #191c1e;
-  --muted: #5f6670;
-  --line: #d8dee6;
-  --line-soft: #edf1f5;
-  --blue: #0f62c6;
+  --primary: #22313f;
+  --primary-soft: #d3d7db;
+  --text: #1f2933;
+  --muted: #667381;
+  --line: #c7d0dc;
+  --line-soft: #f4f7fa;
+  --blue: #2563eb;
  --blue-soft: #e8f1ff;
  --green: #008c61;
  --green-soft: #ddf8ee;
  --red: #bd1e1e;
  --red-soft: #ffebe8;
  --shadow: 0 16px 32px rgba(4, 22, 39, 0.06);
-  --sidebar-bg: #f3f6f9;
-  --nav-text: #303842;
-  --nav-active-bg: #e1e6ec;
-  --topbar-bg: rgba(247, 249, 251, 0.94);
-  --search-bg: #f1f4f8;
-  --control-bg: #fbfcfe;
-  --secondary-bg: #e8edf2;
-  --secondary-hover-bg: #dde5ed;
-  --secondary-hover-border: #c6d0db;
-  --table-header-bg: #f5f7fa;
-  --table-row-hover-bg: #fafcff;
-  --modal-backdrop: rgba(4, 22, 39, 0.32);
-  --primary-rgb: 4, 22, 39;
-  --accent-rgb: 15, 98, 198;
+  --sidebar-bg: #ffffff;
+  --nav-text: #334155;
+  --nav-active-bg: #e8f0ff;
+  --topbar-bg: rgba(245, 247, 250, 0.94);
+  --search-bg: #f6f8fb;
+  --control-bg: #ffffff;
+  --secondary-bg: #eef2f7;
+  --secondary-hover-bg: #d9e1ec;
+  --secondary-hover-border: #acb8c7;
+  --table-header-bg: #f5f8fb;
+  --table-row-hover-bg: #f9fbff;
+  --modal-backdrop: rgba(34, 49, 63, 0.32);
+  --primary-rgb: 34, 49, 63;
+  --accent-rgb: 37, 99, 235;
  --app-font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
-  --radius-sm: 7px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --topbar-height: 72px;
-  --nav-height: 48px;
-  --control-height: 44px;
-  --base-font-size: 16px;
-  --page-padding: 32px;
-  --content-gap: 24px;
-  --panel-padding: 24px;
-  --table-cell-y: 18px;
-  --table-cell-x: 24px;
+  --radius-sm: 5px;
+  --radius-md: 7px;
+  --radius-lg: 10px;
+  --topbar-height: 64px;
+  --nav-height: 42px;
+  --control-height: 40px;
+  --base-font-size: 15px;
+  --page-padding: 24px;
+  --content-gap: 18px;
+  --panel-padding: 20px;
+  --table-cell-y: 12px;
+  --table-cell-x: 18px;
  --layout-sidebar-width: 280px;
  --layout-sidebar-offset: 280px;
  --collapsed-sidebar-width: 88px;
@@ -561,7 +561,7 @@ a {
 }

 .appearance-panel {
-  width: min(560px, calc(100vw - 20px));
+  width: min(480px, calc(100vw - 20px));
  max-height: 100vh;
  margin: 0;
  overflow-y: auto;
@@ -570,7 +570,7 @@ a {
  background: var(--card);
  box-shadow: 0 28px 70px rgba(var(--primary-rgb), 0.26);
  color: var(--text);
-  padding: 16px;
+  padding: 14px;
  transform: translateX(0);
  transition:
    opacity var(--motion-duration-fast) ease,
@@ -628,8 +628,19 @@ a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 14px;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.appearance-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.appearance-recommend {
+  min-height: 30px;
+  padding-inline: 9px;
 }

 .appearance-panel-header .icon-button {
@@ -649,7 +660,7 @@ a {
 }

 .appearance-panel-header h2 {
-  font-size: 18px;
+  font-size: 17px;
 }

 .appearance-panel-header p {
@@ -664,7 +675,7 @@ a {
 }

 .appearance-section + .appearance-section {
-  margin-top: 16px;
+  margin-top: 14px;
 }

 .appearance-section-head {
@@ -674,7 +685,7 @@ a {
 }

 .appearance-section-head h3 {
-  font-size: 16px;
+  font-size: 14px;
 }

 .appearance-reset {
@@ -701,7 +712,7 @@ a {

 .appearance-grid {
  display: grid;
-  gap: 10px;
+  gap: 8px;
 }

 .mode-grid,
@@ -712,7 +723,7 @@ a {
 }

 .color-preset-grid {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }

 .radius-grid {
@@ -734,7 +745,7 @@ a {
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  padding: 6px;
@@ -757,7 +768,7 @@ a {
 .appearance-choice strong,
 .color-preset-choice strong {
  color: var(--primary);
-  font-size: 13px;
+  font-size: 12px;
  line-height: 1.25;
 }

@@ -800,7 +811,7 @@ a {
 }

 .mode-preview {
-  height: 78px;
+  height: 66px;
  border: 1px solid var(--line);
 }

@@ -916,26 +927,102 @@ a {
 }

 .color-preset-choice {
-  min-height: 68px;
+  min-height: 74px;
  align-content: start;
-  background: transparent;
-  border-color: transparent;
-  padding: 0;
+  border-color: var(--line);
+  background: var(--card);
+  padding: 6px;
 }

 .color-preset-swatch {
+  position: relative;
  display: block;
-  height: 42px;
+  height: 44px;
+  overflow: hidden;
  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  background: linear-gradient(135deg, var(--preset-from), var(--preset-to));
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+  border-radius: var(--radius-md);
+  background: var(--preset-surface);
 }

 .color-preset-choice strong {
  text-align: center;
 }

+.preset-sidebar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  display: grid;
+  width: 34%;
+  align-content: start;
+  gap: 4px;
+  background: var(--preset-sidebar);
+  padding: 7px 6px;
+}
+
+.preset-sidebar b,
+.preset-main b {
+  display: block;
+  height: 4px;
+  border-radius: 999px;
+}
+
+.preset-sidebar b {
+  background: var(--preset-primary);
+  opacity: 0.7;
+}
+
+.preset-sidebar b:first-child {
+  width: 18px;
+}
+
+.preset-sidebar b:nth-child(2) {
+  width: 30px;
+  background: var(--preset-active);
+  opacity: 1;
+}
+
+.preset-sidebar b:nth-child(3) {
+  width: 22px;
+}
+
+.preset-main {
+  position: absolute;
+  inset: 6px 6px 6px 42%;
+  display: grid;
+  align-content: start;
+  gap: 5px;
+  border-radius: var(--radius-sm);
+  background: var(--preset-card);
+  padding: 7px;
+}
+
+.preset-main b {
+  background: var(--preset-primary);
+  opacity: 0.22;
+}
+
+.preset-main b:first-child {
+  width: 68%;
+}
+
+.preset-main b:nth-child(2) {
+  width: 88%;
+}
+
+.preset-main b:nth-child(3) {
+  width: 52%;
+}
+
+.preset-accent {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 22px;
+  height: 5px;
+  border-radius: 999px;
+  background: var(--preset-accent);
+}
+
 .font-choice {
  min-height: 54px;
  place-items: center;
@@ -1748,6 +1835,293 @@ a {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

+.compact-field {
+  min-width: 170px;
+}
+
+.compact-field span {
+  font-size: 12px;
+}
+
+.compact-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+  padding: 0 var(--panel-padding) var(--panel-padding);
+}
+
+.compact-stat {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  padding: 12px 14px;
+}
+
+.compact-stat span,
+.workflow-steps span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.compact-stat strong {
+  display: block;
+  margin-top: 6px;
+  color: var(--primary);
+  font-size: 19px;
+  line-height: 1.2;
+}
+
+.organization-summary-strip {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.04);
+  padding: 10px;
+}
+
+.organization-summary-strip div {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-height: 50px;
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  padding: 10px 12px;
+}
+
+.organization-summary-strip svg {
+  color: var(--blue);
+}
+
+.organization-summary-strip span,
+.organization-summary-strip small {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.organization-summary-strip strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--primary);
+  font-size: 18px;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.organization-tree-layout {
+  display: grid;
+  grid-template-columns: minmax(340px, 0.9fr) minmax(520px, 1.45fr);
+  gap: var(--content-gap);
+  align-items: start;
+}
+
+.organization-tree-panel,
+.organization-detail-panel {
+  min-height: 620px;
+}
+
+.organization-tree-tools,
+.organization-detail-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.link-button.muted {
+  color: var(--muted);
+}
+
+.compact-button {
+  min-height: 36px;
+  padding: 0 12px;
+  font-size: 13px;
+}
+
+.organization-tree {
+  display: grid;
+  align-content: start;
+  gap: 4px;
+  max-height: calc(100vh - 330px);
+  min-height: 520px;
+  overflow: auto;
+  padding: 12px;
+}
+
+.organization-tree-empty {
+  display: flex;
+  min-height: 240px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--muted);
+  font-weight: 800;
+}
+
+.tree-node {
+  display: grid;
+  grid-template-columns: 22px 32px minmax(0, 1fr) auto;
+  width: 100%;
+  min-height: 50px;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text);
+  padding: 7px 10px 7px calc(10px + (var(--tree-depth) * 20px));
+  text-align: left;
+  transition:
+    background 0.18s ease,
+    box-shadow 0.18s ease,
+    color 0.18s ease,
+    opacity 0.18s ease;
+}
+
+.tree-node:hover {
+  background: var(--surface);
+}
+
+.tree-node.is-selected {
+  background: var(--blue-soft);
+  box-shadow: inset 3px 0 0 var(--blue);
+}
+
+.tree-node.is-inactive {
+  opacity: 0.66;
+}
+
+.tree-toggle {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+}
+
+.tree-toggle:not(.is-placeholder):hover {
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--blue);
+}
+
+.tree-toggle.is-placeholder {
+  visibility: hidden;
+}
+
+.tree-node-icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border-radius: var(--radius-sm);
+  background: var(--surface-soft);
+  color: var(--primary);
+}
+
+.tree-node-position .tree-node-icon {
+  background: var(--green-soft);
+  color: var(--green);
+}
+
+.tree-node-main {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.tree-node-main strong,
+.tree-node-main small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-node-main strong {
+  color: var(--primary);
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.tree-node-main small {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.tree-node .status-chip {
+  min-height: 22px;
+  padding: 0 8px;
+  font-size: 11px;
+}
+
+.organization-detail-header {
+  align-items: flex-start;
+}
+
+.organization-node-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  border-bottom: 1px solid var(--line-soft);
+  background: var(--surface);
+  padding: 12px var(--panel-padding);
+}
+
+.organization-node-summary div {
+  min-width: 0;
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-md);
+  background: var(--card);
+  padding: 10px 12px;
+}
+
+.organization-node-summary span {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.organization-node-summary strong {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  margin-top: 5px;
+  color: var(--primary);
+  font-size: 14px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.organization-editor-form {
+  padding-top: 18px;
+}
+
+.workflow-steps {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+  padding: 0 var(--panel-padding) var(--panel-padding);
+}
+
+.workflow-steps span {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  padding: 9px 10px;
+  text-align: center;
+}
+
 .user-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -2049,14 +2423,14 @@ a {
 .login-screen {
  display: grid;
  min-height: 100vh;
-  grid-template-columns: minmax(420px, 42vw) minmax(0, 1fr);
+  grid-template-columns: minmax(400px, 40vw) minmax(0, 1fr);
  background: var(--surface);
 }

 .login-form-side {
  display: grid;
  place-items: center;
-  padding: 48px;
+  padding: 42px 48px;
 }

 .login-card {
@@ -2064,13 +2438,13 @@ a {
 }

 .login-brand {
-  margin-bottom: 28px;
+  margin-bottom: 24px;
 }

 .login-brand h1 {
-  margin: 22px 0 8px;
+  margin: 18px 0 7px;
  color: var(--primary);
-  font-size: 28px;
+  font-size: 26px;
  line-height: 1.2;
 }

@@ -2081,7 +2455,7 @@ a {

 .form-stack {
  display: grid;
-  gap: 18px;
+  gap: 16px;
 }

 .input-with-icon {
@@ -2118,9 +2492,9 @@ a {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
-  margin-top: 42px;
+  margin-top: 34px;
  border-top: 1px solid var(--line);
-  padding-top: 24px;
+  padding-top: 20px;
  color: var(--muted);
 }

@@ -2139,43 +2513,42 @@ a {
  display: grid;
  place-items: center;
  overflow: hidden;
-  background:
-    linear-gradient(135deg, rgba(var(--primary-rgb), 0.94), rgba(var(--accent-rgb), 0.86)),
-    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 74px),
-    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 74px);
-  color: white;
-  padding: 48px;
+  border-left: 1px solid var(--line);
+  background: var(--surface-soft);
+  color: var(--text);
+  padding: 44px;
 }

 .ledger-visual {
-  width: min(620px, 100%);
-  border: 1px solid rgba(255, 255, 255, 0.16);
+  width: min(560px, 100%);
+  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
-  background: rgba(255, 255, 255, 0.07);
-  padding: 48px;
-  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.24);
+  background: var(--card);
+  padding: 32px;
+  box-shadow: var(--shadow);
 }

 .ledger-visual h2 {
-  margin: 24px 0 18px;
-  font-size: 44px;
-  line-height: 1.18;
+  margin: 22px 0 14px;
+  color: var(--primary);
+  font-size: 31px;
+  line-height: 1.25;
 }

 .ledger-visual p {
  margin: 0;
-  color: rgba(255, 255, 255, 0.82);
-  font-size: 17px;
-  line-height: 1.7;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.65;
 }

 .visual-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--content-gap);
-  margin-top: 34px;
-  border-top: 1px solid rgba(255, 255, 255, 0.16);
-  padding-top: 28px;
+  gap: 18px;
+  margin-top: 28px;
+  border-top: 1px solid var(--line);
+  padding-top: 22px;
 }

 .visual-metrics strong,
@@ -2184,12 +2557,13 @@ a {
 }

 .visual-metrics strong {
-  font-size: 32px;
+  color: var(--primary);
+  font-size: 25px;
 }

 .visual-metrics span {
  margin-top: 4px;
-  color: rgba(255, 255, 255, 0.68);
+  color: var(--muted);
 }

 .security-line {
@@ -2199,7 +2573,7 @@ a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--muted);
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
 }
@@ -2212,7 +2586,7 @@ a {

@media (max-width: 1120px) {
  .appearance-panel {
-    width: min(540px, calc(100vw - 16px));
+    width: min(480px, calc(100vw - 16px));
    padding: 14px;
  }

@@ -2228,11 +2602,17 @@ a {
  .stats-grid,
  .dashboard-grid,
  .action-grid,
+  .compact-stats-grid,
  .form-grid,
+  .workflow-steps,
  .password-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

+  .organization-tree-layout {
+    grid-template-columns: 1fr;
+  }
+
  .login-screen {
    grid-template-columns: 1fr;
  }
@@ -2344,14 +2724,17 @@ a {
  }

  .stats-grid,
+  .organization-summary-strip,
  .dashboard-grid,
  .action-grid,
+  .compact-stats-grid,
  .form-grid,
  .user-form,
  .password-form,
  .search-form,
  .table-filter-bar,
-  .visual-metrics {
+  .visual-metrics,
+  .workflow-steps {
    grid-template-columns: 1fr;
  }

@@ -2379,6 +2762,24 @@ a {
  .page-header h1 {
    font-size: 27px;
  }
+
+  .organization-tree {
+    max-height: none;
+    min-height: 360px;
+  }
+
+  .organization-tree-panel,
+  .organization-detail-panel {
+    min-height: auto;
+  }
+
+  .organization-detail-actions {
+    justify-content: flex-start;
+  }
+
+  .organization-node-summary {
+    grid-template-columns: 1fr;
+  }
 }

@media (prefers-reduced-motion: reduce) {
@@ -26,13 +26,13 @@ const modeOptions: Array<{ name: ThemeMode; label: string }> = [
 ];

 const fontOptions: Array<{ name: FontChoice; label: string }> = [
-  { name: "auto", label: "Auto" },
-  { name: "sans", label: "Sans" },
-  { name: "serif", label: "Serif" },
+  { name: "auto", label: "系统" },
+  { name: "sans", label: "现代" },
+  { name: "serif", label: "宋体" },
 ];

 const radiusOptions: Array<{ name: RadiusChoice; label: string; previewRadius: string }> = [
-  { name: "auto", label: "Auto", previewRadius: "20px" },
+  { name: "auto", label: "默认", previewRadius: "20px" },
  { name: "0", label: "0", previewRadius: "0px" },
  { name: "0.3", label: "0.3", previewRadius: "8px" },
  { name: "0.5", label: "0.5", previewRadius: "14px" },
@@ -56,7 +56,7 @@ const sidebarOptions: Array<{ name: SidebarChoice; label: string }> = [
 const layoutOptions: Array<{ name: LayoutChoice; label: string }> = [
  { name: "default", label: "默认" },
  { name: "compact", label: "紧凑" },
-  { name: "fullscreen", label: "全屏布局" },
+  { name: "fullscreen", label: "全屏" },
 ];

 const contentWidthOptions: Array<{ name: ContentWidthChoice; label: string }> = [
@@ -70,12 +70,18 @@ const contentWidthOptions: Array<{ name: ContentWidthChoice; label: string }> =
    <aside class="appearance-panel" role="dialog" aria-label="外观设置">
      <header class="appearance-panel-header">
        <div>
-          <h2>外观</h2>
-          <p>主题、颜色与布局</p>
+          <h2>界面外观</h2>
+          <p>整套界面的颜色、字体和布局</p>
+        </div>
+        <div class="appearance-header-actions">
+          <button class="secondary-button appearance-recommend" type="button" @click="theme.resetAppearance">
+            <RotateCcw :size="16" aria-hidden="true" />
+            <span>推荐外观</span>
+          </button>
+          <button class="icon-button" type="button" title="关闭" @click="emit('close')">
+            <X :size="21" aria-hidden="true" />
+          </button>
        </div>
-        <button class="icon-button" type="button" title="关闭" @click="emit('close')">
-          <X :size="21" aria-hidden="true" />
-        </button>
      </header>

      <section class="appearance-section">
@@ -118,7 +124,7 @@ const contentWidthOptions: Array<{ name: ContentWidthChoice; label: string }> =

      <section class="appearance-section">
        <div class="appearance-section-head">
-          <h3>颜色预设</h3>
+          <h3>整套配色</h3>
          <button class="appearance-reset" type="button" title="恢复默认颜色" @click="theme.resetColor">
            <RotateCcw :size="17" aria-hidden="true" />
          </button>
@@ -129,11 +135,30 @@ const contentWidthOptions: Array<{ name: ContentWidthChoice; label: string }> =
            :key="item.name"
            class="color-preset-choice"
            :class="{ 'is-active': theme.current === item.name }"
-            :style="{ '--preset-from': item.gradient[0], '--preset-to': item.gradient[1] }"
+            :style="{
+              '--preset-surface': item.tokens.light.surface,
+              '--preset-sidebar': item.tokens.light.sidebarBg,
+              '--preset-active': item.tokens.light.navActiveBg,
+              '--preset-card': item.tokens.light.card,
+              '--preset-primary': item.tokens.light.primary,
+              '--preset-accent': item.tokens.light.accent,
+            }"
            type="button"
            @click="theme.setTheme(item.name)"
          >
-            <span class="color-preset-swatch" aria-hidden="true" />
+            <span class="color-preset-swatch" aria-hidden="true">
+              <i class="preset-sidebar">
+                <b />
+                <b />
+                <b />
+              </i>
+              <i class="preset-main">
+                <b />
+                <b />
+                <b />
+              </i>
+              <i class="preset-accent" />
+            </span>
            <strong>{{ item.label }}</strong>
            <span v-if="theme.current === item.name" class="choice-check" aria-hidden="true">
              <Check :size="18" />
@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";

 export type ThemeName =
+  | "enterprise"
  | "default"
  | "anthropic"
  | "mono"
@@ -103,26 +104,62 @@ const DENSITY_KEY = "financial-system-density";
 const SIDEBAR_KEY = "financial-system-sidebar";
 const LAYOUT_KEY = "financial-system-layout";
 const CONTENT_WIDTH_KEY = "financial-system-content-width";
+const APPEARANCE_VERSION_KEY = "financial-system-appearance-version";
+const CURRENT_APPEARANCE_VERSION = "2026-06-enterprise-clean";

-const DEFAULTS = {
-  theme: "anthropic" as ThemeName,
-  mode: "dark" as ThemeMode,
-  font: "serif" as FontChoice,
-  radius: "1" as RadiusChoice,
+export const DEFAULT_THEME_SETTINGS = {
+  theme: "enterprise" as ThemeName,
+  mode: "light" as ThemeMode,
+  font: "sans" as FontChoice,
+  radius: "0.3" as RadiusChoice,
  density: "compact" as DensityChoice,
-  sidebar: "floating" as SidebarChoice,
+  sidebar: "embedded" as SidebarChoice,
  layout: "default" as LayoutChoice,
  contentWidth: "full" as ContentWidthChoice,
 };

 const legacyThemeMap: Record<string, ThemeName> = {
-  navy: "anthropic",
+  navy: "enterprise",
  blue: "ocean",
  emerald: "forest",
  burgundy: "rose",
 };

+migrateLegacyAppearanceDefaults();
+
 const themeSeeds: ThemeSeed[] = [
+  {
+    name: "enterprise",
+    label: "企业清爽",
+    primary: "#22313f",
+    accent: "#2563eb",
+    soft: "#e8f0ff",
+    gradient: ["#22313f", "#2563eb"],
+    light: createLightSeed({
+      primary: "#22313f",
+      accent: "#2563eb",
+      soft: "#e8f0ff",
+      surface: "#f5f7fa",
+      surfaceSoft: "#eef2f7",
+      surfaceStrong: "#d9e1ec",
+      sidebarBg: "#ffffff",
+      navActiveBg: "#e8f0ff",
+    }),
+    dark: createDarkSeed({
+      primary: "#edf4ff",
+      primarySoft: "#b8cff8",
+      accent: "#7aa7ff",
+      accentSoft: "rgba(122, 167, 255, 0.18)",
+      surface: "#101418",
+      surfaceSoft: "#171d23",
+      surfaceStrong: "#26313c",
+      card: "#151a20",
+      sidebarBg: "#141a20",
+      navActiveBg: "#233750",
+      line: "#303b46",
+      lineSoft: "#242d36",
+    }),
+  },
  {
    name: "default",
    label: "默认",
@@ -467,13 +504,13 @@ export const themeOptions: ThemeOption[] = themeSeeds.map((seed) => ({
 export const useThemeStore = defineStore("theme", {
  state: () => ({
    current: readThemeName(),
-    mode: readSetting(THEME_MODE_KEY, DEFAULTS.mode, ["system", "light", "dark"] as const),
-    font: readSetting(FONT_KEY, DEFAULTS.font, ["auto", "sans", "serif"] as const),
-    radius: readSetting(RADIUS_KEY, DEFAULTS.radius, ["auto", "0", "0.3", "0.5", "0.75", "1"] as const),
-    density: readSetting(DENSITY_KEY, DEFAULTS.density, ["compact", "default", "comfortable", "large"] as const),
-    sidebar: readSetting(SIDEBAR_KEY, DEFAULTS.sidebar, ["embedded", "floating", "edge"] as const),
-    layout: readSetting(LAYOUT_KEY, DEFAULTS.layout, ["default", "compact", "fullscreen"] as const),
-    contentWidth: readSetting(CONTENT_WIDTH_KEY, DEFAULTS.contentWidth, ["full", "centered"] as const),
+    mode: readSetting(THEME_MODE_KEY, DEFAULT_THEME_SETTINGS.mode, ["system", "light", "dark"] as const),
+    font: readSetting(FONT_KEY, DEFAULT_THEME_SETTINGS.font, ["auto", "sans", "serif"] as const),
+    radius: readSetting(RADIUS_KEY, DEFAULT_THEME_SETTINGS.radius, ["auto", "0", "0.3", "0.5", "0.75", "1"] as const),
+    density: readSetting(DENSITY_KEY, DEFAULT_THEME_SETTINGS.density, ["compact", "default", "comfortable", "large"] as const),
+    sidebar: readSetting(SIDEBAR_KEY, DEFAULT_THEME_SETTINGS.sidebar, ["embedded", "floating", "edge"] as const),
+    layout: readSetting(LAYOUT_KEY, DEFAULT_THEME_SETTINGS.layout, ["default", "compact", "fullscreen"] as const),
+    contentWidth: readSetting(CONTENT_WIDTH_KEY, DEFAULT_THEME_SETTINGS.contentWidth, ["full", "centered"] as const),
  }),
  getters: {
    activeTheme: (state) => themeOptions.find((item) => item.name === state.current) || themeOptions[0],
@@ -579,36 +616,47 @@ export const useThemeStore = defineStore("theme", {
      this.applyTheme();
    },
    resetTheme(): void {
-      this.current = DEFAULTS.theme;
-      this.mode = DEFAULTS.mode;
+      this.current = DEFAULT_THEME_SETTINGS.theme;
+      this.mode = DEFAULT_THEME_SETTINGS.mode;
      this.applyTheme();
    },
    resetColor(): void {
-      this.current = DEFAULTS.theme;
+      this.current = DEFAULT_THEME_SETTINGS.theme;
      this.applyTheme();
    },
    resetFont(): void {
-      this.font = DEFAULTS.font;
+      this.font = DEFAULT_THEME_SETTINGS.font;
      this.applyTheme();
    },
    resetRadius(): void {
-      this.radius = DEFAULTS.radius;
+      this.radius = DEFAULT_THEME_SETTINGS.radius;
      this.applyTheme();
    },
    resetDensity(): void {
-      this.density = DEFAULTS.density;
+      this.density = DEFAULT_THEME_SETTINGS.density;
      this.applyTheme();
    },
    resetSidebar(): void {
-      this.sidebar = DEFAULTS.sidebar;
+      this.sidebar = DEFAULT_THEME_SETTINGS.sidebar;
      this.applyTheme();
    },
    resetLayout(): void {
-      this.layout = DEFAULTS.layout;
+      this.layout = DEFAULT_THEME_SETTINGS.layout;
      this.applyTheme();
    },
    resetContentWidth(): void {
-      this.contentWidth = DEFAULTS.contentWidth;
+      this.contentWidth = DEFAULT_THEME_SETTINGS.contentWidth;
+      this.applyTheme();
+    },
+    resetAppearance(): void {
+      this.current = DEFAULT_THEME_SETTINGS.theme;
+      this.mode = DEFAULT_THEME_SETTINGS.mode;
+      this.font = DEFAULT_THEME_SETTINGS.font;
+      this.radius = DEFAULT_THEME_SETTINGS.radius;
+      this.density = DEFAULT_THEME_SETTINGS.density;
+      this.sidebar = DEFAULT_THEME_SETTINGS.sidebar;
+      this.layout = DEFAULT_THEME_SETTINGS.layout;
+      this.contentWidth = DEFAULT_THEME_SETTINGS.contentWidth;
      this.applyTheme();
    },
  },
@@ -760,8 +808,8 @@ function layoutVariables(

 function readThemeName(): ThemeName {
  const stored = readRawSetting(THEME_KEY);
-  const migrated = stored ? legacyThemeMap[stored] || stored : DEFAULTS.theme;
-  return themeOptions.some((item) => item.name === migrated) ? (migrated as ThemeName) : DEFAULTS.theme;
+  const migrated = stored ? legacyThemeMap[stored] || stored : DEFAULT_THEME_SETTINGS.theme;
+  return themeOptions.some((item) => item.name === migrated) ? (migrated as ThemeName) : DEFAULT_THEME_SETTINGS.theme;
 }

 function readSetting<T extends readonly StoredSetting[]>(key: string, fallback: T[number], values: T): T[number] {
@@ -787,6 +835,53 @@ function persistSetting(key: string, value: string): void {
  }
 }

+function migrateLegacyAppearanceDefaults(): void {
+  try {
+    if (typeof localStorage === "undefined") {
+      return;
+    }
+    if (localStorage.getItem(APPEARANCE_VERSION_KEY) === CURRENT_APPEARANCE_VERSION) {
+      return;
+    }
+
+    const lookedLikeOldDefault = isLegacyDefaultAppearance(
+      localStorage.getItem(THEME_KEY),
+      localStorage.getItem(THEME_MODE_KEY),
+      localStorage.getItem(FONT_KEY),
+      localStorage.getItem(RADIUS_KEY),
+      localStorage.getItem(SIDEBAR_KEY),
+    );
+
+    if (lookedLikeOldDefault) {
+      localStorage.setItem(THEME_KEY, DEFAULT_THEME_SETTINGS.theme);
+      localStorage.setItem(THEME_MODE_KEY, DEFAULT_THEME_SETTINGS.mode);
+      localStorage.setItem(FONT_KEY, DEFAULT_THEME_SETTINGS.font);
+      localStorage.setItem(RADIUS_KEY, DEFAULT_THEME_SETTINGS.radius);
+      localStorage.setItem(DENSITY_KEY, DEFAULT_THEME_SETTINGS.density);
+      localStorage.setItem(SIDEBAR_KEY, DEFAULT_THEME_SETTINGS.sidebar);
+      localStorage.setItem(LAYOUT_KEY, DEFAULT_THEME_SETTINGS.layout);
+      localStorage.setItem(CONTENT_WIDTH_KEY, DEFAULT_THEME_SETTINGS.contentWidth);
+    }
+    localStorage.setItem(APPEARANCE_VERSION_KEY, CURRENT_APPEARANCE_VERSION);
+  } catch {
+    // Appearance migration is best-effort only.
+  }
+}
+
+export function isLegacyDefaultAppearance(
+  theme: string | null,
+  mode: string | null,
+  font: string | null,
+  radius: string | null,
+  sidebar: string | null,
+): boolean {
+  return (!theme || theme === "anthropic" || theme === "navy")
+    && (!mode || mode === "dark")
+    && (!font || font === "serif")
+    && (!radius || radius === "1")
+    && (!sidebar || sidebar === "floating");
+}
+
 function resolveThemeMode(mode: ThemeMode): "light" | "dark" {
  if (mode !== "system") {
    return mode;
@@ -1,5 +1,144 @@
 <script setup lang="ts">
-import { Calculator, FileSpreadsheet, LockKeyhole, Upload } from "@lucide/vue";
+import { Calculator, Download, FileSpreadsheet, Loader2, LockKeyhole, RefreshCw, Upload } from "@lucide/vue";
+import { computed, onMounted, ref } from "vue";
+
+import { ApiError } from "../api/http";
+import {
+  calculateMonthlyFromDingTalk,
+  calculateMonthlyFromExcel,
+  exportMonthlyRun,
+  getMonthlyRun,
+  listMonthlyRuns,
+  lockMonthlyRun,
+} from "../api/monthlyPayroll";
+import type { MonthlyPayrollDetailResponse, MonthlyPayrollRun } from "../api/types";
+import ResultsTable from "../components/ResultsTable.vue";
+import { useAuthStore } from "../stores/auth";
+
+const auth = useAuthStore();
+const selectedMonth = ref(new Date().toISOString().slice(0, 7));
+const runs = ref<MonthlyPayrollRun[]>([]);
+const detail = ref<MonthlyPayrollDetailResponse | null>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
+const loading = ref(false);
+const actionLoading = ref<"" | "excel" | "dingtalk" | "lock" | "export">("");
+const errorMessage = ref("");
+const successMessage = ref("");
+
+const activeRun = computed(() => detail.value?.run || runs.value[0] || null);
+const isLocked = computed(() => activeRun.value?.status === "locked");
+const canCalculate = computed(() => auth.hasPermission("monthly_payroll:calculate"));
+const canLock = computed(() => auth.hasPermission("monthly_payroll:lock"));
+const canExport = computed(() => auth.hasPermission("monthly_payroll:export"));
+const grossTotal = computed(() => money(activeRun.value?.gross_total || 0));
+const netTotal = computed(() => money(activeRun.value?.net_total || 0));
+const deductionTotal = computed(() => money(activeRun.value?.deduction_total || 0));
+
+onMounted(() => {
+  void loadRuns();
+});
+
+async function loadRuns(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    runs.value = await listMonthlyRuns(selectedMonth.value);
+    if (runs.value.length) {
+      detail.value = await getMonthlyRun(runs.value[0].id);
+    } else {
+      detail.value = null;
+    }
+  } catch (error) {
+    runs.value = [];
+    detail.value = null;
+    errorMessage.value = error instanceof ApiError ? error.message : "月度核算数据加载失败";
+  } finally {
+    loading.value = false;
+  }
+}
+
+function chooseExcel(): void {
+  fileInput.value?.click();
+}
+
+async function handleExcelChange(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file) {
+    return;
+  }
+  await runAction("excel", async () => {
+    detail.value = await calculateMonthlyFromExcel(file, selectedMonth.value);
+    successMessage.value = "Excel 已导入并完成月度核算";
+    await loadRuns();
+  });
+}
+
+async function calculateFromDingTalk(): Promise<void> {
+  await runAction("dingtalk", async () => {
+    detail.value = await calculateMonthlyFromDingTalk(selectedMonth.value);
+    successMessage.value = "钉钉考勤已同步并完成月度核算";
+    await loadRuns();
+  });
+}
+
+async function lockRun(): Promise<void> {
+  if (!activeRun.value || !window.confirm("锁定后本月工资不能重新计算，只能导出。确认锁定？")) {
+    return;
+  }
+  await runAction("lock", async () => {
+    await lockMonthlyRun(activeRun.value!.id);
+    detail.value = await getMonthlyRun(activeRun.value!.id);
+    successMessage.value = "本月工资已锁定";
+    await loadRuns();
+  });
+}
+
+async function exportRun(): Promise<void> {
+  if (!activeRun.value) {
+    return;
+  }
+  await runAction("export", async () => {
+    await exportMonthlyRun(activeRun.value!.id);
+    successMessage.value = "月度工资表已开始下载";
+  });
+}
+
+async function runAction(
+  action: "excel" | "dingtalk" | "lock" | "export",
+  executor: () => Promise<void>,
+): Promise<void> {
+  actionLoading.value = action;
+  errorMessage.value = "";
+  successMessage.value = "";
+  try {
+    await executor();
+  } catch (error) {
+    errorMessage.value = error instanceof ApiError ? error.message : "操作失败，请检查后重试";
+  } finally {
+    actionLoading.value = "";
+  }
+}
+
+function statusText(status: string | undefined): string {
+  const map: Record<string, string> = {
+    draft: "草稿",
+    calculated: "已计算",
+    reviewed: "已复核",
+    locked: "已锁定",
+    failed: "失败",
+  };
+  return status ? map[status] || status : "未开始";
+}
+
+function money(value: number): string {
+  return new Intl.NumberFormat("zh-CN", {
+    style: "currency",
+    currency: "CNY",
+    maximumFractionDigits: 2,
+  }).format(value);
+}
 </script>

 <template>
@@ -7,41 +146,131 @@ import { Calculator, FileSpreadsheet, LockKeyhole, Upload } from "@lucide/vue";
    <header class="page-header">
      <div>
        <h1>月度核算</h1>
-        <p>按工资月份完成导入、计算、复核、锁定和导出。</p>
+        <p>按工资月份完成导入、计算、异常处理、锁定和导出。</p>
      </div>
      <div class="header-actions">
-        <button class="secondary-button" type="button" disabled>
-          <Upload :size="18" aria-hidden="true" />
-          <span>导入 Excel</span>
-        </button>
-        <button class="primary-button" type="button" disabled>
-          <Calculator :size="18" aria-hidden="true" />
-          <span>同步并计算</span>
+        <label class="field compact-field">
+          <span>工资月份</span>
+          <input v-model="selectedMonth" type="month" @change="loadRuns" />
+        </label>
+        <button class="secondary-button" type="button" :disabled="loading" @click="loadRuns">
+          <Loader2 v-if="loading" class="spin" :size="18" aria-hidden="true" />
+          <RefreshCw v-else :size="18" aria-hidden="true" />
+          <span>刷新</span>
        </button>
      </div>
    </header>

+    <p v-if="errorMessage" class="form-error">{{ errorMessage }}</p>
+    <p v-if="successMessage" class="form-success">{{ successMessage }}</p>
+
    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>核算流程</h2>
          <p>数据导入 -> 考勤转换 -> 异常处理 -> 工资计算 -> 复核锁定</p>
        </div>
-        <span class="status-chip neutral">草稿</span>
+        <span class="status-chip" :class="isLocked ? 'green' : 'neutral'">{{ statusText(activeRun?.status) }}</span>
      </div>
-      <div class="empty-state">
-        <FileSpreadsheet :size="38" aria-hidden="true" />
-        <p>月度核算中心已接入菜单，下一阶段接入月度计算、异常清单和锁定逻辑。</p>
+
+      <div class="workflow-steps">
+        <span>1 数据导入</span>
+        <span>2 考勤转换</span>
+        <span>3 异常处理</span>
+        <span>4 工资计算</span>
+        <span>5 复核锁定</span>
+      </div>
+
+      <div class="compact-stats-grid">
+        <div class="compact-stat">
+          <span>员工数</span>
+          <strong>{{ activeRun?.employee_count || 0 }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>应发合计</span>
+          <strong>{{ grossTotal }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>实发合计</span>
+          <strong>{{ netTotal }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>扣款合计</span>
+          <strong>{{ deductionTotal }}</strong>
+        </div>
+      </div>
+
+      <div class="form-actions">
+        <button class="secondary-button" type="button" :disabled="!canCalculate || isLocked || actionLoading === 'excel'" @click="chooseExcel">
+          <Loader2 v-if="actionLoading === 'excel'" class="spin" :size="18" aria-hidden="true" />
+          <Upload v-else :size="18" aria-hidden="true" />
+          <span>导入 Excel</span>
+        </button>
+        <button class="primary-button" type="button" :disabled="!canCalculate || isLocked || actionLoading === 'dingtalk'" @click="calculateFromDingTalk">
+          <Loader2 v-if="actionLoading === 'dingtalk'" class="spin" :size="18" aria-hidden="true" />
+          <Calculator v-else :size="18" aria-hidden="true" />
+          <span>同步钉钉并计算</span>
+        </button>
+        <button class="secondary-button" type="button" :disabled="!activeRun || !canLock || isLocked || actionLoading === 'lock'" @click="lockRun">
+          <Loader2 v-if="actionLoading === 'lock'" class="spin" :size="18" aria-hidden="true" />
+          <LockKeyhole v-else :size="18" aria-hidden="true" />
+          <span>锁定工资</span>
+        </button>
+        <button class="secondary-button" type="button" :disabled="!activeRun || !canExport || actionLoading === 'export'" @click="exportRun">
+          <Loader2 v-if="actionLoading === 'export'" class="spin" :size="18" aria-hidden="true" />
+          <Download v-else :size="18" aria-hidden="true" />
+          <span>导出</span>
+        </button>
+        <input ref="fileInput" accept=".xlsx,.xls" hidden type="file" @change="handleExcelChange" />
+      </div>
+    </section>
+
+    <section v-if="detail?.exceptions.length" class="panel">
+      <div class="panel-header">
+        <div>
+          <h2>异常清单</h2>
+          <p>优先处理缺薪资档案、缺卡、迟到扣款和未匹配员工。</p>
+        </div>
+      </div>
+      <div class="table-wrap">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>员工</th>
+              <th>类型</th>
+              <th>级别</th>
+              <th>说明</th>
+              <th>状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in detail.exceptions" :key="item.id">
+              <td>
+                <strong>{{ item.employee_name || "-" }}</strong>
+                <span>{{ item.employee_no || "-" }}</span>
+              </td>
+              <td>{{ item.exception_type }}</td>
+              <td>{{ item.severity }}</td>
+              <td>{{ item.message }}</td>
+              <td>{{ item.status }}</td>
+            </tr>
+          </tbody>
+        </table>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <div>
-          <h2>锁定规则</h2>
-          <p>锁定后本月工资不可重新计算，仅允许导出。</p>
+          <h2>工资明细</h2>
+          <p>锁定后本月工资不能重新计算，只能导出。</p>
        </div>
-        <LockKeyhole :size="22" aria-hidden="true" />
+        <FileSpreadsheet :size="22" aria-hidden="true" />
+      </div>
+      <ResultsTable v-if="detail?.results.length" :results="detail.results" />
+      <div v-else class="empty-state">
+        <FileSpreadsheet :size="38" aria-hidden="true" />
+        <p>当前月份还没有核算结果，请导入 Excel 或同步钉钉并计算。</p>
      </div>
    </section>
  </div>
@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { Building2, GitBranch, Loader2, Pencil, Plus, RefreshCw, Save } from "@lucide/vue";
+import {
+  BriefcaseBusiness,
+  Building2,
+  ChevronDown,
+  ChevronRight,
+  FolderTree,
+  GitBranch,
+  Loader2,
+  Plus,
+  RefreshCw,
+  Save,
+} from "@lucide/vue";
 import { computed, onMounted, reactive, ref } from "vue";

 import {
@@ -12,7 +23,26 @@ import {
 } from "../api/organization";
 import { ApiError } from "../api/http";
 import type { DepartmentRecord, DepartmentRequest, PositionRecord, PositionRequest } from "../api/types";
-import StatCard from "../components/StatCard.vue";
+
+type OrganizationNodeType = "department" | "position";
+type DetailEditor = "department" | "position";
+
+interface OrganizationTreeNode {
+  key: string;
+  type: OrganizationNodeType;
+  id: number;
+  name: string;
+  code: string;
+  is_active: boolean;
+  parentId: number | null;
+  departmentId: number | null;
+  children: OrganizationTreeNode[];
+}
+
+interface OrganizationTreeRow {
+  node: OrganizationTreeNode;
+  depth: number;
+}

 const departments = ref<DepartmentRecord[]>([]);
 const positions = ref<PositionRecord[]>([]);
@@ -22,6 +52,10 @@ const savingPosition = ref(false);
 const editingDepartmentId = ref<number | null>(null);
 const editingPositionId = ref<number | null>(null);
 const editingPositionCode = ref("");
+const currentEditor = ref<DetailEditor>("department");
+const selectedNodeKey = ref("");
+const expandedDepartmentIds = ref<Set<number>>(new Set());
+const hasInitializedExpansion = ref(false);
 const errorMessage = ref("");
 const successMessage = ref("");

@@ -42,9 +76,122 @@ const positionForm = reactive<PositionRequest>({
  remark: "",
 });

-const activeDepartments = computed(() => departments.value.filter((item) => item.is_active));
-const activePositions = computed(() => positions.value.filter((item) => item.is_active));
-const positionRows = computed(() => positions.value);
+const sortedDepartments = computed(() => [...departments.value].sort(sortByOrderThenId));
+const sortedPositions = computed(() => [...positions.value].sort(sortByOrderThenId));
+const activeDepartments = computed(() => sortedDepartments.value.filter((item) => item.is_active));
+const activePositions = computed(() => sortedPositions.value.filter((item) => item.is_active));
+
+const organizationTree = computed<OrganizationTreeNode[]>(() => {
+  const departmentNodeMap = new Map<number, OrganizationTreeNode>();
+  const roots: OrganizationTreeNode[] = [];
+
+  for (const department of sortedDepartments.value) {
+    departmentNodeMap.set(department.id, {
+      key: departmentKey(department.id),
+      type: "department",
+      id: department.id,
+      name: department.name,
+      code: department.department_code,
+      is_active: department.is_active,
+      parentId: department.parent_id,
+      departmentId: department.id,
+      children: [],
+    });
+  }
+
+  for (const department of sortedDepartments.value) {
+    const node = departmentNodeMap.get(department.id);
+    if (!node) {
+      continue;
+    }
+    const parentNode = department.parent_id ? departmentNodeMap.get(department.parent_id) : null;
+    if (parentNode) {
+      parentNode.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  for (const position of sortedPositions.value) {
+    const parentNode = departmentNodeMap.get(position.department_id);
+    if (!parentNode) {
+      continue;
+    }
+    parentNode.children.push({
+      key: positionKey(position.id),
+      type: "position",
+      id: position.id,
+      name: position.name,
+      code: position.position_code,
+      is_active: position.is_active,
+      parentId: position.department_id,
+      departmentId: position.department_id,
+      children: [],
+    });
+  }
+
+  return roots;
+});
+
+const allTreeNodes = computed(() => flattenAllNodes(organizationTree.value));
+const selectedNode = computed(() => allTreeNodes.value.find((node) => node.key === selectedNodeKey.value) || null);
+const visibleTreeRows = computed<OrganizationTreeRow[]>(() => flattenVisibleNodes(organizationTree.value));
+
+const availableParentDepartments = computed(() => {
+  const excludedIds = editingDepartmentId.value ? descendantDepartmentIds(editingDepartmentId.value) : new Set<number>();
+  if (editingDepartmentId.value) {
+    excludedIds.add(editingDepartmentId.value);
+  }
+  return sortedDepartments.value.filter((department) => !excludedIds.has(department.id));
+});
+
+const actionDepartmentId = computed(() => {
+  if (selectedNode.value?.type === "department") {
+    return selectedNode.value.id;
+  }
+  if (selectedNode.value?.type === "position") {
+    return selectedNode.value.departmentId || 0;
+  }
+  if (editingDepartmentId.value) {
+    return editingDepartmentId.value;
+  }
+  return positionForm.department_id || departmentForm.parent_id || 0;
+});
+
+const selectedDepartment = computed(() => {
+  if (!actionDepartmentId.value) {
+    return null;
+  }
+  return departments.value.find((department) => department.id === actionDepartmentId.value) || null;
+});
+
+const selectedDepartmentChildren = computed(() => {
+  if (!actionDepartmentId.value) {
+    return [];
+  }
+  return sortedDepartments.value.filter((department) => department.parent_id === actionDepartmentId.value);
+});
+
+const selectedDepartmentPositions = computed(() => {
+  if (!actionDepartmentId.value) {
+    return [];
+  }
+  return sortedPositions.value.filter((position) => position.department_id === actionDepartmentId.value);
+});
+
+const detailTitle = computed(() => {
+  if (currentEditor.value === "department") {
+    return editingDepartmentId.value ? "部门详情" : "新增部门";
+  }
+  return editingPositionId.value ? "岗位详情" : "新增岗位";
+});
+
+const detailSubtitle = computed(() => {
+  if (currentEditor.value === "department") {
+    return editingDepartmentId.value ? "调整部门编码、父级和启用状态" : "新增部门时可直接指定上级部门";
+  }
+  return editingPositionId.value ? "调整岗位名称、所属部门和启用状态" : "新增岗位会挂到当前选中的部门下";
+});

 onMounted(loadData);

@@ -58,6 +205,8 @@ async function loadData(): Promise<void> {
    ]);
    departments.value = departmentRows;
    positions.value = positionRowsData;
+    reconcileExpandedDepartments(departmentRows);
+    syncSelectionAfterLoad();
  } catch (error) {
    errorMessage.value = error instanceof ApiError ? error.message : "组织架构加载失败";
  } finally {
@@ -70,14 +219,11 @@ async function submitDepartment(): Promise<void> {
  errorMessage.value = "";
  successMessage.value = "";
  try {
-    if (editingDepartmentId.value) {
-      await updateDepartment(editingDepartmentId.value, normalizedDepartment());
-      successMessage.value = "部门已更新";
-    } else {
-      await createDepartment(normalizedDepartment());
-      successMessage.value = "部门已新增";
-    }
-    resetDepartmentForm();
+    const department = editingDepartmentId.value
+      ? await updateDepartment(editingDepartmentId.value, normalizedDepartment())
+      : await createDepartment(normalizedDepartment());
+    selectedNodeKey.value = departmentKey(department.id);
+    successMessage.value = editingDepartmentId.value ? "部门已更新" : "部门已新增";
    await loadData();
  } catch (error) {
    errorMessage.value = error instanceof ApiError ? error.message : "部门保存失败";
@@ -95,14 +241,11 @@ async function submitPosition(): Promise<void> {
  errorMessage.value = "";
  successMessage.value = "";
  try {
-    if (editingPositionId.value) {
-      await updatePosition(editingPositionId.value, normalizedPosition());
-      successMessage.value = "岗位已更新";
-    } else {
-      await createPosition(normalizedPosition());
-      successMessage.value = "岗位已新增";
-    }
-    resetPositionForm();
+    const position = editingPositionId.value
+      ? await updatePosition(editingPositionId.value, normalizedPosition())
+      : await createPosition(normalizedPosition());
+    selectedNodeKey.value = positionKey(position.id);
+    successMessage.value = editingPositionId.value ? "岗位已更新" : "岗位已新增";
    await loadData();
  } catch (error) {
    errorMessage.value = error instanceof ApiError ? error.message : "岗位保存失败";
@@ -111,8 +254,27 @@ async function submitPosition(): Promise<void> {
  }
 }

-function editDepartment(department: DepartmentRecord): void {
+function selectTreeNode(node: OrganizationTreeNode): void {
+  if (node.type === "department") {
+    const department = departments.value.find((item) => item.id === node.id);
+    if (department) {
+      selectDepartment(department);
+    }
+    return;
+  }
+  const position = positions.value.find((item) => item.id === node.id);
+  if (position) {
+    selectPosition(position);
+  }
+}
+
+function selectDepartment(department: DepartmentRecord): void {
+  currentEditor.value = "department";
+  selectedNodeKey.value = departmentKey(department.id);
  editingDepartmentId.value = department.id;
+  editingPositionId.value = null;
+  editingPositionCode.value = "";
+  expandDepartmentPath(department.id);
  Object.assign(departmentForm, {
    parent_id: department.parent_id,
    department_code: department.department_code,
@@ -123,9 +285,13 @@ function editDepartment(department: DepartmentRecord): void {
  });
 }

-function editPosition(position: PositionRecord): void {
+function selectPosition(position: PositionRecord): void {
+  currentEditor.value = "position";
+  selectedNodeKey.value = positionKey(position.id);
  editingPositionId.value = position.id;
  editingPositionCode.value = position.position_code;
+  editingDepartmentId.value = null;
+  expandDepartmentPath(position.department_id);
  Object.assign(positionForm, {
    department_id: position.department_id,
    name: position.name,
@@ -135,6 +301,34 @@ function editPosition(position: PositionRecord): void {
  });
 }

+function startNewRootDepartment(): void {
+  currentEditor.value = "department";
+  selectedNodeKey.value = "new-department";
+  resetDepartmentForm();
+}
+
+function startNewChildDepartment(): void {
+  const parentId = actionDepartmentId.value;
+  currentEditor.value = "department";
+  selectedNodeKey.value = "new-child-department";
+  resetDepartmentForm();
+  departmentForm.parent_id = parentId || null;
+  if (parentId) {
+    expandDepartmentPath(parentId);
+  }
+}
+
+function startNewPosition(): void {
+  const departmentId = actionDepartmentId.value || activeDepartments.value[0]?.id || 0;
+  currentEditor.value = "position";
+  selectedNodeKey.value = "new-position";
+  resetPositionForm();
+  positionForm.department_id = departmentId;
+  if (departmentId) {
+    expandDepartmentPath(departmentId);
+  }
+}
+
 function resetDepartmentForm(): void {
  editingDepartmentId.value = null;
  Object.assign(departmentForm, {
@@ -159,6 +353,27 @@ function resetPositionForm(): void {
  });
 }

+function toggleDepartment(node: OrganizationTreeNode): void {
+  if (node.type !== "department") {
+    return;
+  }
+  const nextExpanded = new Set(expandedDepartmentIds.value);
+  if (nextExpanded.has(node.id)) {
+    nextExpanded.delete(node.id);
+  } else {
+    nextExpanded.add(node.id);
+  }
+  expandedDepartmentIds.value = nextExpanded;
+}
+
+function expandAllDepartments(): void {
+  expandedDepartmentIds.value = new Set(departments.value.map((department) => department.id));
+}
+
+function collapseAllDepartments(): void {
+  expandedDepartmentIds.value = new Set();
+}
+
 function normalizedDepartment(): DepartmentRequest {
  return {
    parent_id: departmentForm.parent_id || null,
@@ -173,6 +388,7 @@ function normalizedDepartment(): DepartmentRequest {
 function normalizedPosition(): PositionRequest {
  return {
    department_id: Number(positionForm.department_id),
+    position_code: editingPositionCode.value,
    name: positionForm.name.trim(),
    sort_order: Number(positionForm.sort_order || 0),
    is_active: positionForm.is_active,
@@ -180,11 +396,100 @@ function normalizedPosition(): PositionRequest {
  };
 }

-function departmentName(id: number | null): string {
-  if (!id) {
-    return "-";
+function syncSelectionAfterLoad(): void {
+  const node = allTreeNodes.value.find((item) => item.key === selectedNodeKey.value);
+  if (node) {
+    selectTreeNode(node);
+    return;
  }
-  return departments.value.find((item) => item.id === id)?.name || "-";
+  if (sortedDepartments.value.length > 0) {
+    selectDepartment(sortedDepartments.value[0]);
+  }
+}
+
+function reconcileExpandedDepartments(nextDepartments: DepartmentRecord[]): void {
+  const availableIds = new Set(nextDepartments.map((department) => department.id));
+  if (!hasInitializedExpansion.value) {
+    expandedDepartmentIds.value = new Set(availableIds);
+    hasInitializedExpansion.value = true;
+    return;
+  }
+  expandedDepartmentIds.value = new Set(
+    [...expandedDepartmentIds.value].filter((departmentId) => availableIds.has(departmentId)),
+  );
+}
+
+function flattenAllNodes(nodes: OrganizationTreeNode[]): OrganizationTreeNode[] {
+  return nodes.flatMap((node) => [node, ...flattenAllNodes(node.children)]);
+}
+
+function flattenVisibleNodes(nodes: OrganizationTreeNode[], depth = 0): OrganizationTreeRow[] {
+  const rows: OrganizationTreeRow[] = [];
+  for (const node of nodes) {
+    rows.push({ node, depth });
+    if (node.type === "department" && expandedDepartmentIds.value.has(node.id)) {
+      rows.push(...flattenVisibleNodes(node.children, depth + 1));
+    }
+  }
+  return rows;
+}
+
+function expandDepartmentPath(departmentId: number): void {
+  const nextExpanded = new Set(expandedDepartmentIds.value);
+  let current = departments.value.find((department) => department.id === departmentId) || null;
+  while (current) {
+    nextExpanded.add(current.id);
+    current = current.parent_id
+      ? departments.value.find((department) => department.id === current?.parent_id) || null
+      : null;
+  }
+  expandedDepartmentIds.value = nextExpanded;
+}
+
+function descendantDepartmentIds(departmentId: number): Set<number> {
+  const result = new Set<number>();
+  const collect = (parentId: number): void => {
+    for (const department of departments.value) {
+      if (department.parent_id === parentId) {
+        result.add(department.id);
+        collect(department.id);
+      }
+    }
+  };
+  collect(departmentId);
+  return result;
+}
+
+function departmentOptionLabel(department: DepartmentRecord): string {
+  return departmentPath(department.id).join(" / ");
+}
+
+function departmentPath(departmentId: number): string[] {
+  const path: string[] = [];
+  let current = departments.value.find((department) => department.id === departmentId) || null;
+  while (current) {
+    path.unshift(current.name);
+    current = current.parent_id
+      ? departments.value.find((department) => department.id === current?.parent_id) || null
+      : null;
+  }
+  return path;
+}
+
+function treeNodeStyle(depth: number): Record<string, string> {
+  return { "--tree-depth": String(depth) };
+}
+
+function departmentKey(id: number): string {
+  return `department-${id}`;
+}
+
+function positionKey(id: number): string {
+  return `position-${id}`;
+}
+
+function sortByOrderThenId<T extends { sort_order: number; id: number }>(left: T, right: T): number {
+  return left.sort_order - right.sort_order || left.id - right.id;
 }
 </script>

@@ -193,7 +498,7 @@ function departmentName(id: number | null): string {
    <header class="page-header">
      <div>
        <h1>组织架构</h1>
-        <p>维护部门上下级和部门下的岗位，员工维护会按这里的关系联动。</p>
+        <p>用树状关系维护部门上下级和部门下岗位，员工维护会按这里的关系联动。</p>
      </div>
      <button class="secondary-button" type="button" :disabled="loading" @click="loadData">
        <Loader2 v-if="loading" class="spin" :size="18" aria-hidden="true" />
@@ -202,23 +507,145 @@ function departmentName(id: number | null): string {
      </button>
    </header>

-    <section class="stats-grid">
-      <StatCard title="部门总数" :value="String(departments.length)" :icon="Building2" tone="blue" meta="含停用" />
-      <StatCard title="启用部门" :value="String(activeDepartments.length)" :icon="Building2" tone="green" meta="可选" />
-      <StatCard title="岗位总数" :value="String(positions.length)" :icon="GitBranch" tone="neutral" meta="含停用" />
-      <StatCard title="启用岗位" :value="String(activePositions.length)" :icon="GitBranch" tone="green" meta="员工可选" />
+    <section class="organization-summary-strip">
+      <div>
+        <Building2 :size="18" aria-hidden="true" />
+        <span>部门</span>
+        <strong>{{ departments.length }}</strong>
+        <small>{{ activeDepartments.length }} 个启用</small>
+      </div>
+      <div>
+        <GitBranch :size="18" aria-hidden="true" />
+        <span>岗位</span>
+        <strong>{{ positions.length }}</strong>
+        <small>{{ activePositions.length }} 个启用</small>
+      </div>
+      <div>
+        <FolderTree :size="18" aria-hidden="true" />
+        <span>当前部门</span>
+        <strong>{{ selectedDepartment?.name || "-" }}</strong>
+        <small>{{ selectedDepartmentPositions.length }} 个直属岗位</small>
+      </div>
    </section>

-    <section class="dashboard-grid">
-      <div class="panel">
+    <p v-if="errorMessage" class="form-error">{{ errorMessage }}</p>
+    <p v-if="successMessage" class="form-success">{{ successMessage }}</p>
+
+    <section class="organization-tree-layout">
+      <aside class="panel organization-tree-panel">
        <div class="panel-header">
          <div>
-            <h2>{{ editingDepartmentId ? "编辑部门" : "新增部门" }}</h2>
-            <p>部门可选择父级，形成上下级关系</p>
+            <h2>组织树</h2>
+            <p>{{ departments.length }} 个部门，{{ positions.length }} 个岗位</p>
+          </div>
+          <div class="organization-tree-tools">
+            <button class="link-button" type="button" @click="expandAllDepartments">展开</button>
+            <button class="link-button muted" type="button" @click="collapseAllDepartments">收起</button>
          </div>
-          <button class="secondary-button" type="button" @click="resetDepartmentForm">清空</button>
        </div>
-        <form class="form-grid compact-form" @submit.prevent="submitDepartment">
+
+        <div class="organization-tree" aria-label="组织架构树">
+          <div v-if="loading" class="organization-tree-empty">
+            <Loader2 class="spin" :size="18" aria-hidden="true" />
+            <span>正在加载组织架构</span>
+          </div>
+          <div v-else-if="visibleTreeRows.length === 0" class="organization-tree-empty">
+            <span>暂无组织架构，请先新增部门</span>
+          </div>
+          <button
+            v-for="row in visibleTreeRows"
+            v-else
+            :key="row.node.key"
+            class="tree-node"
+            :class="[
+              `tree-node-${row.node.type}`,
+              {
+                'is-selected': selectedNodeKey === row.node.key,
+                'is-inactive': !row.node.is_active,
+              },
+            ]"
+            :style="treeNodeStyle(row.depth)"
+            type="button"
+            @click="selectTreeNode(row.node)"
+          >
+            <span
+              v-if="row.node.type === 'department' && row.node.children.length"
+              class="tree-toggle"
+              role="button"
+              tabindex="-1"
+              @click.stop="toggleDepartment(row.node)"
+            >
+              <ChevronDown v-if="expandedDepartmentIds.has(row.node.id)" :size="15" aria-hidden="true" />
+              <ChevronRight v-else :size="15" aria-hidden="true" />
+            </span>
+            <span v-else class="tree-toggle is-placeholder" aria-hidden="true"></span>
+            <span class="tree-node-icon">
+              <Building2 v-if="row.node.type === 'department'" :size="16" aria-hidden="true" />
+              <BriefcaseBusiness v-else :size="16" aria-hidden="true" />
+            </span>
+            <span class="tree-node-main">
+              <strong>{{ row.node.name }}</strong>
+              <small>{{ row.node.code }}</small>
+            </span>
+            <span class="status-chip" :class="row.node.is_active ? 'green' : 'red'">
+              {{ row.node.is_active ? "启用" : "停用" }}
+            </span>
+          </button>
+        </div>
+      </aside>
+
+      <section class="panel organization-detail-panel">
+        <div class="panel-header organization-detail-header">
+          <div>
+            <h2>{{ detailTitle }}</h2>
+            <p>{{ detailSubtitle }}</p>
+          </div>
+          <div class="organization-detail-actions">
+            <button class="secondary-button compact-button" type="button" @click="startNewRootDepartment">
+              <Plus :size="16" aria-hidden="true" />
+              <span>新增部门</span>
+            </button>
+            <button
+              class="secondary-button compact-button"
+              type="button"
+              :disabled="!actionDepartmentId"
+              @click="startNewChildDepartment"
+            >
+              <Plus :size="16" aria-hidden="true" />
+              <span>新增下级</span>
+            </button>
+            <button
+              class="primary-button compact-button"
+              type="button"
+              :disabled="!actionDepartmentId && activeDepartments.length === 0"
+              @click="startNewPosition"
+            >
+              <Plus :size="16" aria-hidden="true" />
+              <span>新增岗位</span>
+            </button>
+          </div>
+        </div>
+
+        <div v-if="selectedDepartment" class="organization-node-summary">
+          <div>
+            <span>上级部门</span>
+            <strong>{{ selectedDepartment.parent_id ? departmentPath(selectedDepartment.parent_id).join(" / ") : "无上级" }}</strong>
+          </div>
+          <div>
+            <span>下级部门</span>
+            <strong>{{ selectedDepartmentChildren.length }} 个</strong>
+          </div>
+          <div>
+            <span>直属岗位</span>
+            <strong>{{ selectedDepartmentPositions.length }} 个</strong>
+          </div>
+        </div>
+
+        <form
+          v-if="currentEditor === 'department'"
+          class="form-grid compact-form organization-editor-form"
+          @submit.prevent="submitDepartment"
+        >
          <label class="field">
            <span>部门编码</span>
            <input v-model="departmentForm.department_code" required maxlength="64" type="text" />
@@ -230,13 +657,9 @@ function departmentName(id: number | null): string {
          <label class="field">
            <span>父级部门</span>
            <select v-model.number="departmentForm.parent_id">
-              <option :value="null">无父级</option>
-              <option
-                v-for="department in departments.filter((item) => item.id !== editingDepartmentId)"
-                :key="department.id"
-                :value="department.id"
-              >
-                {{ department.name }}
+              <option :value="null">无上级部门</option>
+              <option v-for="department in availableParentDepartments" :key="department.id" :value="department.id">
+                {{ departmentOptionLabel(department) }}
              </option>
            </select>
          </label>
@@ -255,29 +678,19 @@ function departmentName(id: number | null): string {
          <div class="form-actions align-right span-row">
            <button class="primary-button" type="submit" :disabled="savingDepartment">
              <Loader2 v-if="savingDepartment" class="spin" :size="18" aria-hidden="true" />
-              <Save v-else-if="editingDepartmentId" :size="18" aria-hidden="true" />
-              <Plus v-else :size="18" aria-hidden="true" />
-              <span>{{ savingDepartment ? "保存中" : editingDepartmentId ? "保存部门" : "新增部门" }}</span>
+              <Save v-else :size="18" aria-hidden="true" />
+              <span>{{ savingDepartment ? "保存中" : editingDepartmentId ? "保存部门" : "创建部门" }}</span>
            </button>
          </div>
        </form>
-      </div>

-      <div class="panel">
-        <div class="panel-header">
-          <div>
-            <h2>{{ editingPositionId ? "编辑岗位" : "新增岗位" }}</h2>
-            <p>岗位必须归属到一个部门</p>
-          </div>
-          <button class="secondary-button" type="button" @click="resetPositionForm">清空</button>
-        </div>
-        <form class="form-grid compact-form" @submit.prevent="submitPosition">
+        <form v-else class="form-grid compact-form organization-editor-form" @submit.prevent="submitPosition">
          <label class="field">
            <span>所属部门</span>
            <select v-model.number="positionForm.department_id" required>
              <option :value="0">请选择部门</option>
              <option v-for="department in activeDepartments" :key="department.id" :value="department.id">
-                {{ department.name }}
+                {{ departmentOptionLabel(department) }}
              </option>
            </select>
          </label>
@@ -304,96 +717,12 @@ function departmentName(id: number | null): string {
          <div class="form-actions align-right span-row">
            <button class="primary-button" type="submit" :disabled="savingPosition">
              <Loader2 v-if="savingPosition" class="spin" :size="18" aria-hidden="true" />
-              <Save v-else-if="editingPositionId" :size="18" aria-hidden="true" />
-              <Plus v-else :size="18" aria-hidden="true" />
-              <span>{{ savingPosition ? "保存中" : editingPositionId ? "保存岗位" : "新增岗位" }}</span>
+              <Save v-else :size="18" aria-hidden="true" />
+              <span>{{ savingPosition ? "保存中" : editingPositionId ? "保存岗位" : "创建岗位" }}</span>
            </button>
          </div>
        </form>
-      </div>
-    </section>
-
-    <p v-if="errorMessage" class="form-error">{{ errorMessage }}</p>
-    <p v-if="successMessage" class="form-success">{{ successMessage }}</p>
-
-    <section class="dashboard-grid">
-      <div class="panel table-panel">
-        <div class="panel-header">
-          <div>
-            <h2>部门列表</h2>
-            <p>{{ departments.length }} 个部门</p>
-          </div>
-        </div>
-        <div class="table-wrap">
-          <table class="data-table">
-            <thead>
-              <tr>
-                <th>部门</th>
-                <th>父级</th>
-                <th>排序</th>
-                <th>状态</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="department in departments" :key="department.id">
-                <td>
-                  <strong>{{ department.name }}</strong>
-                  <span>{{ department.department_code }}</span>
-                </td>
-                <td>{{ departmentName(department.parent_id) }}</td>
-                <td>{{ department.sort_order }}</td>
-                <td><span class="status-chip" :class="department.is_active ? 'green' : 'red'">{{ department.is_active ? "启用" : "停用" }}</span></td>
-                <td>
-                  <button class="link-button" type="button" @click="editDepartment(department)">
-                    <Pencil :size="15" aria-hidden="true" />
-                    <span>编辑</span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div class="panel table-panel">
-        <div class="panel-header">
-          <div>
-            <h2>岗位列表</h2>
-            <p>{{ positions.length }} 个岗位</p>
-          </div>
-        </div>
-        <div class="table-wrap">
-          <table class="data-table">
-            <thead>
-              <tr>
-                <th>岗位</th>
-                <th>部门</th>
-                <th>排序</th>
-                <th>状态</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="position in positionRows" :key="position.id">
-                <td>
-                  <strong>{{ position.name }}</strong>
-                  <span>{{ position.position_code }}</span>
-                </td>
-                <td>{{ position.department.name }}</td>
-                <td>{{ position.sort_order }}</td>
-                <td><span class="status-chip" :class="position.is_active ? 'green' : 'red'">{{ position.is_active ? "启用" : "停用" }}</span></td>
-                <td>
-                  <button class="link-button" type="button" @click="editPosition(position)">
-                    <Pencil :size="15" aria-hidden="true" />
-                    <span>编辑</span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
+      </section>
    </section>
  </div>
 </template>
@@ -1,5 +1,86 @@
 <script setup lang="ts">
-import { CalendarClock, CloudCog, RefreshCw } from "@lucide/vue";
+import { CalendarClock, CloudCog, Loader2, RefreshCw } from "@lucide/vue";
+import { computed, onMounted, ref } from "vue";
+
+import { ApiError } from "../api/http";
+import { getTodayAttendance, syncRealtimeAttendance } from "../api/realtimeAttendance";
+import type { RealtimeAttendanceResponse, TodayAttendanceItem } from "../api/types";
+import { useAuthStore } from "../stores/auth";
+
+const auth = useAuthStore();
+const selectedDate = ref(new Date().toISOString().slice(0, 10));
+const response = ref<RealtimeAttendanceResponse | null>(null);
+const loading = ref(false);
+const syncing = ref(false);
+const errorMessage = ref("");
+const successMessage = ref("");
+
+const summary = computed(() => response.value?.summary);
+const rows = computed(() => response.value?.items || []);
+const canSync = computed(() => auth.hasPermission("attendance:realtime:sync"));
+
+onMounted(() => {
+  void loadTodayAttendance();
+});
+
+async function loadTodayAttendance(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
+  try {
+    response.value = await getTodayAttendance(selectedDate.value);
+  } catch (error) {
+    errorMessage.value = error instanceof ApiError ? error.message : "实时考勤加载失败";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function syncDingTalk(): Promise<void> {
+  syncing.value = true;
+  errorMessage.value = "";
+  successMessage.value = "";
+  try {
+    response.value = await syncRealtimeAttendance(selectedDate.value);
+    successMessage.value = "钉钉考勤已同步，薪资预估已刷新";
+  } catch (error) {
+    const message = error instanceof ApiError ? error.message : "钉钉同步失败";
+    errorMessage.value = message.includes("dingtalk.app_key")
+      ? "钉钉配置缺失，请先在 config/app_settings.json 中配置 app_key 和 app_secret"
+      : message;
+  } finally {
+    syncing.value = false;
+  }
+}
+
+function statusText(status: string): string {
+  const map: Record<string, string> = {
+    present: "已打卡",
+    missing: "缺卡",
+    leave: "请假",
+    unchecked: "未打卡",
+    absent: "未打卡",
+  };
+  return map[status] || status || "-";
+}
+
+function money(value: number | null): string {
+  if (value === null) {
+    return "-";
+  }
+  return new Intl.NumberFormat("zh-CN", {
+    style: "currency",
+    currency: "CNY",
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+function numberText(value: number, unit = ""): string {
+  return `${Number(value || 0).toFixed(1)}${unit}`;
+}
+
+function rowKey(row: TodayAttendanceItem): string {
+  return row.employee_id ? String(row.employee_id) : `${row.employee_no}-${row.employee_name}`;
+}
 </script>

 <template>
@@ -10,28 +91,117 @@ import { CalendarClock, CloudCog, RefreshCw } from "@lucide/vue";
        <p>查看今日打卡状态，并预估本月薪资进度。</p>
      </div>
      <div class="header-actions">
-        <button class="secondary-button" type="button" disabled>
-          <RefreshCw :size="18" aria-hidden="true" />
+        <label class="field compact-field">
+          <span>考勤日期</span>
+          <input v-model="selectedDate" type="date" @change="loadTodayAttendance" />
+        </label>
+        <button class="secondary-button" type="button" :disabled="loading || syncing" @click="loadTodayAttendance">
+          <Loader2 v-if="loading" class="spin" :size="18" aria-hidden="true" />
+          <RefreshCw v-else :size="18" aria-hidden="true" />
          <span>刷新</span>
        </button>
-        <button class="primary-button" type="button" disabled>
-          <CloudCog :size="18" aria-hidden="true" />
-          <span>同步钉钉</span>
+        <button class="primary-button" type="button" :disabled="!canSync || syncing" @click="syncDingTalk">
+          <Loader2 v-if="syncing" class="spin" :size="18" aria-hidden="true" />
+          <CloudCog v-else :size="18" aria-hidden="true" />
+          <span>{{ syncing ? "同步中" : "同步钉钉" }}</span>
        </button>
      </div>
    </header>

+    <p v-if="errorMessage" class="form-error">{{ errorMessage }}</p>
+    <p v-if="successMessage" class="form-success">{{ successMessage }}</p>
+
    <section class="panel">
      <div class="panel-header">
        <div>
          <h2>今日考勤与薪资预估</h2>
          <p>预估金额，最终以月度核算锁定结果为准。</p>
        </div>
-        <span class="status-chip neutral">待接入</span>
+        <span class="status-chip" :class="response?.sync_job_id ? 'green' : 'neutral'">
+          {{ response?.sync_job_id ? "已同步" : "未同步" }}
+        </span>
      </div>
-      <div class="empty-state">
+
+      <div class="compact-stats-grid">
+        <div class="compact-stat">
+          <span>在职员工</span>
+          <strong>{{ summary?.employee_total || 0 }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>已打卡</span>
+          <strong>{{ summary?.checked_in_count || 0 }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>未打卡</span>
+          <strong>{{ summary?.unchecked_count || 0 }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>迟到</span>
+          <strong>{{ summary?.late_count || 0 }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>缺卡</span>
+          <strong>{{ summary?.missing_card_count || 0 }}</strong>
+        </div>
+        <div class="compact-stat">
+          <span>预估实发</span>
+          <strong>{{ money(summary?.estimated_net_total ?? 0) }}</strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="panel">
+      <div class="panel-header">
+        <div>
+          <h2>员工今日考勤</h2>
+          <p>{{ response?.synced_at ? `最近同步：${response.synced_at}` : "可先查看已入库数据，也可同步钉钉刷新。" }}</p>
+        </div>
+      </div>
+
+      <div v-if="!rows.length && !loading" class="empty-state">
        <CalendarClock :size="38" aria-hidden="true" />
-        <p>实时考勤看板已接入菜单，下一阶段接入钉钉同步和薪资预估数据。</p>
+        <p>当前日期暂无考勤数据，可点击同步钉钉拉取在职员工打卡记录。</p>
+      </div>
+
+      <div v-else class="table-wrap">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>员工</th>
+              <th>部门/岗位</th>
+              <th>上班</th>
+              <th>下班</th>
+              <th>状态</th>
+              <th>迟到</th>
+              <th>缺卡</th>
+              <th>请假</th>
+              <th>今日加班</th>
+              <th>本月剩余加班</th>
+              <th>预估实发</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in rows" :key="rowKey(row)">
+              <td>
+                <strong>{{ row.employee_name }}</strong>
+                <span>{{ row.employee_no || "-" }}</span>
+              </td>
+              <td>
+                <strong>{{ row.department || "-" }}</strong>
+                <span>{{ row.position || "-" }}</span>
+              </td>
+              <td>{{ row.first_punch || "-" }}</td>
+              <td>{{ row.last_punch || "-" }}</td>
+              <td>{{ statusText(row.attendance_status) }}</td>
+              <td>{{ row.late_minutes ? `${row.late_minutes} 分钟` : "-" }}</td>
+              <td>{{ row.missing_card_count || "-" }}</td>
+              <td>{{ numberText(row.leave_hours, "h") }}</td>
+              <td>{{ numberText(row.today_overtime_hours, "h") }}</td>
+              <td>{{ numberText(row.month_remaining_overtime_hours, "h") }}</td>
+              <td>{{ money(row.estimated_net_salary) }}</td>
+            </tr>
+          </tbody>
+        </table>
      </div>
    </section>
  </div>
@@ -0,0 +1,36 @@
+import {
+  DEFAULT_THEME_SETTINGS,
+  isLegacyDefaultAppearance,
+  themeOptions,
+} from "../src/stores/theme";
+
+assertEqual(DEFAULT_THEME_SETTINGS.theme, "enterprise");
+assertEqual(DEFAULT_THEME_SETTINGS.mode, "light");
+assertEqual(DEFAULT_THEME_SETTINGS.font, "sans");
+assertEqual(DEFAULT_THEME_SETTINGS.radius, "0.3");
+assertEqual(DEFAULT_THEME_SETTINGS.density, "compact");
+assertEqual(DEFAULT_THEME_SETTINGS.sidebar, "embedded");
+
+const enterprise = themeOptions.find((item) => item.name === "enterprise");
+if (!enterprise) {
+  throw new Error("缺少企业清爽主题");
+}
+
+assertEqual(enterprise.label, "企业清爽");
+assertEqual(enterprise.tokens.light.surface, "#f5f7fa");
+assertEqual(enterprise.tokens.light.sidebarBg, "#ffffff");
+assertEqual(enterprise.tokens.light.navActiveBg, "#e8f0ff");
+assertTruthy(isLegacyDefaultAppearance("anthropic", "dark", "serif", "1", "floating"));
+assertTruthy(isLegacyDefaultAppearance("navy", "dark", "serif", "1", "floating"));
+
+function assertEqual(actual: string, expected: string): void {
+  if (actual !== expected) {
+    throw new Error(`期望 ${expected}，实际 ${actual}`);
+  }
+}
+
+function assertTruthy(actual: boolean): void {
+  if (!actual) {
+    throw new Error("期望结果为 true");
+  }
+}
@@ -0,0 +1,41 @@
+declare const process: { cwd(): string };
+declare function require(name: string): {
+  readFileSync?: (path: string, encoding: string) => string;
+  join?: (...parts: string[]) => string;
+};
+
+const { readFileSync } = require("node:fs");
+const { join } = require("node:path");
+
+if (!readFileSync || !join) {
+  throw new Error("测试运行环境缺少文件读取能力");
+}
+
+const view = readFileSync(join(process.cwd(), "src/views/OrganizationView.vue"), "utf-8");
+const css = readFileSync(join(process.cwd(), "src/assets/styles.css"), "utf-8");
+
+assertIncludes(view, "organization-tree-layout");
+assertIncludes(view, "organization-tree");
+assertIncludes(view, "tree-node");
+assertIncludes(view, "selectedNode");
+assertIncludes(view, "部门详情");
+assertIncludes(view, "岗位详情");
+assertNotIncludes(view, "<h2>部门列表</h2>");
+assertNotIncludes(view, "<h2>岗位列表</h2>");
+
+assertIncludes(css, ".organization-tree-layout");
+assertIncludes(css, ".organization-tree-panel");
+assertIncludes(css, ".organization-detail-panel");
+assertIncludes(css, ".tree-node");
+
+function assertIncludes(content: string, expected: string): void {
+  if (!content.includes(expected)) {
+    throw new Error(`期望包含 ${expected}`);
+  }
+}
+
+function assertNotIncludes(content: string, unexpected: string): void {
+  if (content.includes(unexpected)) {
+    throw new Error(`不应包含 ${unexpected}`);
+  }
+}
@@ -0,0 +1,56 @@
+declare const process: { cwd(): string };
+declare function require(name: string): {
+  existsSync?: (path: string) => boolean;
+  readFileSync?: (path: string, encoding: string) => string;
+  join?: (...parts: string[]) => string;
+};
+
+const { existsSync, readFileSync } = require("node:fs");
+const { join } = require("node:path");
+
+if (!existsSync || !readFileSync || !join) {
+  throw new Error("测试运行环境缺少文件读取能力");
+}
+
+const root = process.cwd();
+const realtimeApiPath = join(root, "src/api/realtimeAttendance.ts");
+const monthlyApiPath = join(root, "src/api/monthlyPayroll.ts");
+const realtimeViewPath = join(root, "src/views/RealtimeAttendanceView.vue");
+const monthlyViewPath = join(root, "src/views/MonthlyPayrollView.vue");
+
+assertTruthy(existsSync(realtimeApiPath), "缺少实时考勤 API 客户端");
+assertTruthy(existsSync(monthlyApiPath), "缺少月度核算 API 客户端");
+
+const realtimeApi = readFileSync(realtimeApiPath, "utf-8");
+assertIncludes(realtimeApi, "/api/attendance/realtime/today");
+assertIncludes(realtimeApi, "/api/attendance/realtime/sync");
+
+const monthlyApi = readFileSync(monthlyApiPath, "utf-8");
+assertIncludes(monthlyApi, "/api/payroll/monthly/runs");
+
+const realtimeView = readFileSync(realtimeViewPath, "utf-8");
+assertNotIncludes(realtimeView, "待接入菜单");
+assertNotIncludes(realtimeView, "待接入钉钉同步");
+assertIncludes(realtimeView, "预估金额，最终以月度核算锁定结果为准");
+
+const monthlyView = readFileSync(monthlyViewPath, "utf-8");
+assertNotIncludes(monthlyView, "下一阶段接入");
+assertIncludes(monthlyView, "锁定后本月工资不能重新计算");
+
+function assertIncludes(content: string, expected: string): void {
+  if (!content.includes(expected)) {
+    throw new Error(`期望包含 ${expected}`);
+  }
+}
+
+function assertNotIncludes(content: string, unexpected: string): void {
+  if (content.includes(unexpected)) {
+    throw new Error(`不应包含 ${unexpected}`);
+  }
+}
+
+function assertTruthy(value: boolean, message: string): void {
+  if (!value) {
+    throw new Error(message);
+  }
+}
@@ -0,0 +1,51 @@
+declare const process: { cwd(): string };
+declare function require(name: string): {
+  readFileSync?: (path: string, encoding: string) => string;
+  join?: (...parts: string[]) => string;
+};
+
+const { readFileSync } = require("node:fs");
+const { join } = require("node:path");
+
+if (!readFileSync || !join) {
+  throw new Error("测试运行环境缺少文件读取能力");
+}
+
+const css = readFileSync(join(process.cwd(), "src/assets/styles.css"), "utf-8");
+
+const loginVisual = cssBlock(".login-visual");
+assertIncludes(loginVisual, "background: var(--surface-soft);");
+assertIncludes(loginVisual, "color: var(--text);");
+assertNotIncludes(loginVisual, "rgba(var(--primary-rgb), 0.94)");
+
+const ledgerVisual = cssBlock(".ledger-visual");
+assertIncludes(ledgerVisual, "background: var(--card);");
+assertIncludes(ledgerVisual, "padding: 32px;");
+
+const appearancePanel = cssBlock(".appearance-panel");
+assertIncludes(appearancePanel, "width: min(480px, calc(100vw - 20px));");
+
+function cssBlock(selector: string): string {
+  const pattern = new RegExp(`${escapeRegExp(selector)}\\s*\\{([\\s\\S]*?)\\n\\}`, "m");
+  const match = css.match(pattern);
+  if (!match) {
+    throw new Error(`缺少样式块 ${selector}`);
+  }
+  return match[1];
+}
+
+function assertIncludes(content: string, expected: string): void {
+  if (!content.includes(expected)) {
+    throw new Error(`期望包含 ${expected}`);
+  }
+}
+
+function assertNotIncludes(content: string, unexpected: string): void {
+  if (content.includes(unexpected)) {
+    throw new Error(`不应包含 ${unexpected}`);
+  }
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}