feat(workbench): 首页对齐原型并重构趋势与待办数据口径

clinical-web/src/views/workbench/home/components/DocumentRankingPanel.vue

@@ -21,15 +21,30 @@ const periodOptions: Array<{ label: string; value: HomeRankingPeriod }> = [
 
 const rankColors = ['#0e6e8c', '#18a0c0', '#0f9d6c', '#d9821f', '#7a4dbb', '#d0534f']
 
-const maxCount = computed(() => Math.max(...props.rows.map((row) => row.signedCount), 1))
+/** 原型 svgHBar：mx = ceil(maxV * 1.15) —— 最长的一条也不顶满刻度 */
+const scaleMax = computed(() =>
+  Math.ceil(Math.max(...props.rows.map((row) => row.signedCount), 1) * 1.15),
+)
+
+/** X 轴刻度 0 / ¼ / ½ / ¾ / mx（原型按 mx 四等分取整） */
+const axisTicks = computed(() =>
+  [0, 1, 2, 3, 4].map((index) => Math.round((scaleMax.value * index) / 4)),
+)
 
 function getBarWidth(row: HomeDocumentRanking) {
-  return `${Math.max((row.signedCount / maxCount.value) * 100, 1.5)}%`
+  return `${Math.max((row.signedCount / scaleMax.value) * 100, 1.5)}%`
 }
 
 function getRankColor(index: number) {
   return rankColors[index % rankColors.length]
 }
+
+/** 原型柱体是「本色 → 本色 55% 透明」的横向渐变（stop-opacity 1 → .55） */
+function getBarBackground(index: number) {
+  const color = getRankColor(index)
+
+  return `linear-gradient(90deg, ${color}, ${color}8c)`
+}
 </script>
 
 <template>
@@ -65,7 +80,7 @@ function getRankColor(index: number) {
         <span class="ranking-bar-track">
           <span
             class="ranking-bar"
-            :style="{ width: getBarWidth(row), background: getRankColor(index) }"
+            :style="{ width: getBarWidth(row), background: getBarBackground(index) }"
           />
         </span>
         <strong class="ranking-count" :style="{ color: getRankColor(index) }">
@@ -73,15 +88,16 @@ function getRankColor(index: number) {
         </strong>
       </div>
       <div class="ranking-axis" aria-hidden="true">
-        <span>0</span>
-        <span>{{ Math.ceil(maxCount / 4) }}</span>
-        <span>{{ Math.ceil(maxCount / 2) }}</span>
-        <span>{{ Math.ceil((maxCount * 3) / 4) }}</span>
-        <span>{{ maxCount }}</span>
+        <span v-for="tick in axisTicks" :key="tick">{{ tick }}</span>
       </div>
     </div>
 
-    <div v-else class="ranking-empty">暂无排名数据</div>
+    <div v-else class="ranking-empty">
+      <div class="empty-icon" aria-hidden="true">📊</div>
+      <p>暂无排名数据</p>
+      <p class="empty-desc">文档被签署后将按近7/14/30天统计签署排名</p>
+      <button type="button" class="empty-action" @click="emit('manage')">前往文档库发布模板</button>
+    </div>
   </section>
 </template>
 
@@ -200,7 +216,6 @@ function getRankColor(index: number) {
   height: 100%;
   min-width: 2px;
   border-radius: 4px;
-  opacity: 0.82;
 }
 
 .ranking-count {
@@ -219,11 +234,41 @@ function getRankColor(index: number) {
 }
 
 .ranking-empty {
-  display: grid;
+  display: flex;
   min-height: 210px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   color: var(--mut);
   font-size: 13px;
-  place-items: center;
+  text-align: center;
+}
+
+.empty-icon {
+  margin-bottom: 8px;
+  font-size: 34px;
+  opacity: 0.5;
+}
+
+.empty-desc {
+  margin-top: 2px;
+  font-size: 12px;
+}
+
+/* 原型空态按钮是 ghost 款（btn gh sm），与趋势图空态的主色按钮不同 */
+.empty-action {
+  margin-top: 12px;
+  padding: 7px 16px;
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 700;
+  background: #fff;
+  border: 1px solid var(--brand);
+  border-radius: 7px;
+}
+
+.empty-action:hover {
+  background: var(--brand-l);
 }
 
 @media (max-width: 900px) {

clinical-web/src/views/workbench/home/components/HomeMetricCard.vue

@@ -132,6 +132,11 @@ const emit = defineEmits<{
   background: var(--warn-l);
 }
 
+.metric-icon--info {
+  color: var(--info);
+  background: var(--info-l);
+}
+
 .metric-icon--danger {
   color: var(--err);
   background: var(--err-l);

clinical-web/src/views/workbench/home/components/SigningTrendPanel.vue

@@ -1,37 +1,38 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import type { HomeRankingPeriod, HomeTrendPoint } from '../types'
+import type { HomeTrendPoint } from '../types'
 
 const props = defineProps<{
   points: HomeTrendPoint[]
-  period: HomeRankingPeriod
 }>()
 
+const emit = defineEmits<{
+  create: []
+}>()
+
+/*
+ * 几何照抄原型 svgLine()：四边留白 34、横向等分虚线（图上共 4 条）、
+ * **没有 Y 轴刻度数字**（数值直接标在点上）。
+ * viewBox 620×210 与原型 560×190 同为 2.95:1，缩放比例一致，所以只换 padding、不动 viewBox。
+ */
 const chartWidth = 620
 const chartHeight = 210
-const chartPadding = {
-  top: 16,
-  right: 18,
-  bottom: 34,
-  left: 42,
-}
+const chartPadding = 34
 
-const plotWidth = chartWidth - chartPadding.left - chartPadding.right
-const plotHeight = chartHeight - chartPadding.top - chartPadding.bottom
+const plotWidth = chartWidth - chartPadding * 2
+const plotHeight = chartHeight - chartPadding * 2
 
-const chartMax = computed(() => {
-  const highest = Math.max(...props.points.map((point) => point.value), 4)
-  return Math.ceil((highest * 1.2) / 4) * 4
-})
+/** 原型 max = Math.max(...data, 4) * 1.2；没有 Y 轴刻度就不需要取整到 4 的倍数 */
+const chartMax = computed(() => Math.max(...props.points.map((point) => point.value), 4) * 1.2)
 
 const chartPoints = computed(() => {
   const count = props.points.length
 
   return props.points.map((point, index) => ({
     ...point,
-    x: count > 1 ? chartPadding.left + (plotWidth * index) / (count - 1) : chartWidth / 2,
-    y: chartPadding.top + plotHeight - (point.value / chartMax.value) * plotHeight,
+    x: count > 1 ? chartPadding + (plotWidth * index) / (count - 1) : chartWidth / 2,
+    y: chartPadding + plotHeight - (point.value / chartMax.value) * plotHeight,
   }))
 })
 
@@ -50,70 +51,75 @@ const areaPath = computed(() => {
     return ''
   }
 
-  return `${linePath.value} L${lastPoint.x.toFixed(1)} ${chartPadding.top + plotHeight} L${firstPoint.x.toFixed(1)} ${chartPadding.top + plotHeight} Z`
+  const baseline = chartPadding + plotHeight
+
+  return `${linePath.value} L${lastPoint.x.toFixed(1)} ${baseline} L${firstPoint.x.toFixed(1)} ${baseline} Z`
 })
 
+/** 原型 4 条横向虚线的 y 值（等分，不含刻度数字） */
 const gridLines = computed(() =>
-  [0, 0.5, 1].map((ratio) => ({
-    y: chartPadding.top + plotHeight * ratio,
-    label: Math.round(chartMax.value * (1 - ratio)),
-  })),
+  [0, 1, 2, 3].map((index) => chartPadding + (plotHeight / 3) * index),
 )
+
+/**
+ * 是否真的有数据。
+ *
+ * 不能用 `points.length` 判：后端对一个没有任何签署记录的院区**照样返回整段 0 点**
+ * （2026-09-30 实测东院区 period=7 → 7 点全 0），按长度判会画出一条贴底的直线，
+ * 而原型在没有数据时显示的是「📈 暂无签署数据 + 发起入口」空态，同页的待办/排名也都是空态。
+ */
+const hasData = computed(() => props.points.some((point) => point.value > 0))
 </script>
 
 <template>
   <section class="home-panel trend-panel">
     <div class="panel-heading">
-      <h2>近{{ period }}天签署趋势</h2>
-      <span>单位：单</span>
+      <h2>近一周签署客户趋势</h2>
+      <span>单位：人次</span>
     </div>
 
-    <div v-if="points.length" class="trend-chart-wrap">
-      <svg
-        class="trend-chart"
-        viewBox="0 0 620 210"
-        role="img"
-        :aria-label="'近' + period + '天签署趋势图'"
-      >
+    <div v-if="hasData" class="trend-chart-wrap">
+      <svg class="trend-chart" viewBox="0 0 620 210" role="img" aria-label="近一周签署客户趋势图">
         <defs>
           <linearGradient id="home-trend-area" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0" stop-color="#0e6e8c" stop-opacity="0.22" />
-            <stop offset="1" stop-color="#0e6e8c" stop-opacity="0.02" />
+            <stop offset="0" stop-color="#1487a5" stop-opacity="0.28" />
+            <stop offset="1" stop-color="#1487a5" stop-opacity="0" />
           </linearGradient>
         </defs>
 
         <g class="trend-grid">
           <line
-            v-for="line in gridLines"
-            :key="line.y"
-            :x1="chartPadding.left"
-            :y1="line.y"
-            :x2="chartWidth - chartPadding.right"
-            :y2="line.y"
+            v-for="y in gridLines"
+            :key="y"
+            :x1="chartPadding"
+            :y1="y"
+            :x2="chartWidth - chartPadding"
+            :y2="y"
           />
-          <text
-            v-for="line in gridLines"
-            :key="`label-${line.y}`"
-            :x="chartPadding.left - 10"
-            :y="line.y + 4"
-            text-anchor="end"
-          >
-            {{ line.label }}
-          </text>
         </g>
 
         <path class="trend-area" :d="areaPath" />
         <path class="trend-line" :d="linePath" />
 
         <g v-for="point in chartPoints" :key="point.label" class="trend-point">
-          <circle :cx="point.x" :cy="point.y" r="4" />
+          <circle :cx="point.x" :cy="point.y" r="4.5" />
           <title>{{ point.label }}：{{ point.value }} 人次</title>
-          <text :x="point.x" :y="chartHeight - 9" text-anchor="middle">{{ point.label }}</text>
+          <text class="trend-point__value" :x="point.x" :y="point.y - 11" text-anchor="middle">
+            {{ point.value }}
+          </text>
+          <text class="trend-point__label" :x="point.x" :y="chartHeight - 12" text-anchor="middle">
+            {{ point.label }}
+          </text>
         </g>
       </svg>
     </div>
 
-    <div v-else class="trend-empty">暂无趋势数据</div>
+    <div v-else class="trend-empty">
+      <div class="empty-icon" aria-hidden="true">📈</div>
+      <p>暂无签署数据</p>
+      <p class="empty-desc">发起首个签署任务后，这里将展示近 7 日签署趋势</p>
+      <button type="button" class="empty-action" @click="emit('create')">＋ 发起签署任务</button>
+    </div>
   </section>
 </template>
 
@@ -159,16 +165,10 @@ const gridLines = computed(() =>
 }
 
 .trend-grid line {
-  stroke: #eef4f6;
+  stroke: #e6eef2;
   stroke-dasharray: 3 4;
 }
 
-.trend-grid text,
-.trend-point text {
-  fill: var(--mut);
-  font-size: 10px;
-}
-
 .trend-area {
   fill: url('#home-trend-area');
 }
@@ -178,24 +178,61 @@ const gridLines = computed(() =>
   stroke: var(--brand);
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-width: 2.5;
+  stroke-width: 2.6;
+}
+
+/* 数值直接标在点上（原型 svgLine 的 <text>，加粗深色），所以不需要 Y 轴刻度 */
+.trend-point__value {
+  fill: var(--brand-d);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.trend-point__label {
+  fill: var(--mut);
+  font-size: 11px;
 }
 
 .trend-point circle {
   fill: #fff;
   stroke: var(--brand);
-  stroke-width: 2;
-}
-
-.trend-point text {
-  dominant-baseline: auto;
+  stroke-width: 2.2;
 }
 
 .trend-empty {
-  display: grid;
-  min-height: 210px;
+  display: flex;
+  min-height: 208px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   color: var(--mut);
   font-size: 13px;
-  place-items: center;
+  text-align: center;
+}
+
+.empty-icon {
+  margin-bottom: 8px;
+  font-size: 34px;
+  opacity: 0.5;
+}
+
+.empty-desc {
+  margin-top: 2px;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.empty-action {
+  margin-top: 12px;
+  padding: 7px 16px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  background: var(--brand);
+  border-radius: 7px;
+}
+
+.empty-action:hover {
+  background: var(--brand-d);
 }
 </style>

clinical-web/src/views/workbench/home/components/TodoPanel.vue

@@ -147,18 +147,20 @@ function getHint(item: HomeTodoItem) {
 .todo-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  /* 原型 .titem 是 margin-bottom:10px */
+  gap: 10px;
 }
 
 .todo-item {
   display: block;
   width: 100%;
-  padding: 9px 11px;
+  /* 原型 .titem：padding 11px 13px + 圆角 10px */
+  padding: 11px 13px;
   color: var(--ink);
   text-align: left;
   background: #fff;
   border: 1px solid var(--line);
-  border-radius: 9px;
+  border-radius: 10px;
   transition:
     border-color 0.15s ease,
     background 0.15s ease;
@@ -195,8 +197,9 @@ function getHint(item: HomeTodoItem) {
 
 .todo-status {
   flex-shrink: 0;
-  padding: 2px 8px;
-  font-size: 11px;
+  /* 原型 .tag：padding 2px 10px / 11.5px / 圆角 20px */
+  padding: 2px 10px;
+  font-size: 11.5px;
   font-weight: 700;
   border-radius: 20px;
 }
@@ -227,15 +230,18 @@ function getHint(item: HomeTodoItem) {
   background: var(--ok-l);
 }
 
+/* 原型 .tg-void */
 .todo-status--muted {
-  color: var(--mut);
-  background: #eef3f5;
+  color: #8a9aa3;
+  background: #eceef0;
 }
 
 .todo-row--detail {
   margin-top: 5px;
+  gap: 12px;
+  flex-wrap: wrap;
   color: var(--mut);
-  font-size: 12px;
+  font-size: 12.5px;
 }
 
 .todo-document {
@@ -247,7 +253,6 @@ function getHint(item: HomeTodoItem) {
 
 .todo-hint {
   flex-shrink: 0;
-  margin-left: auto;
   white-space: nowrap;
 }
 

clinical-web/src/views/workbench/home/index.vue

@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router'
 import { getWorkbenchOverview } from '@/api/workbench/home'
 import type { WorkbenchCampus, WorkbenchOverviewResponse } from '@/api/workbench/types'
 import { useAppStore } from '@/stores/app'
+import { useLoginStore } from '@/stores/login'
 
 import DocumentRankingPanel from './components/DocumentRankingPanel.vue'
 import HomeMetricCard from './components/HomeMetricCard.vue'
@@ -22,11 +23,14 @@ import type {
 
 const router = useRouter()
 const appStore = useAppStore()
+const loginStore = useLoginStore()
 
 const loading = ref(true)
 const loadFailed = ref(false)
 const overview = ref<WorkbenchOverviewResponse | null>(null)
 const rankingPeriod = ref<HomeRankingPeriod>(14)
+/** 数据快照时间：原型在渲染时把当前时刻写进欢迎条，取到数据那一刻即为快照时刻 */
+const snapshotAt = ref<Date | null>(null)
 let overviewRequestId = 0
 
 const selectedCampus = computed<WorkbenchCampus>(() => appStore.selectedCampus)
@@ -56,8 +60,9 @@ const metrics = computed<HomeMetricCardData[]>(() => {
       key: 'pending',
       label: '待患者签署',
       value: summary?.pendingPatientSigning ?? 0,
-      tone: 'brand',
-      detail: '含手写板 / 短信 · 点击查看',
+      // 原型这张卡的图标是 --info-l 底 + #3a7bd5 笔画，不是品牌色
+      tone: 'info',
+      detail: '含手写板 / 短信链接 / Pad · 点击查看',
       detailTone: 'muted',
     },
     {
@@ -73,13 +78,73 @@ const metrics = computed<HomeMetricCardData[]>(() => {
       label: '可用文档模板（份）',
       value: summary?.availableTemplates ?? 0,
       tone: 'brand',
-      detail: `覆盖 ${summary?.coveredDepartments ?? 0} 个科室 · 点击查看`,
+      // 原型：没有可用模板时副文案换成引导去文档库，拼「覆盖 0 个科室」会读不通
+      detail: summary?.availableTemplates
+        ? `覆盖 ${summary?.coveredDepartments ?? 0} 个科室 · 点击查看`
+        : '暂无可用模板 · 去文档库发布',
       detailTone: 'muted',
     },
   ]
 })
 
-const trendPoints = computed<HomeTrendPoint[]>(() => overview.value?.trend ?? [])
+const WEEKDAY_LABELS = ['日', '一', '二', '三', '四', '五', '六']
+/** 按时段取问候语（原型 renderDash()）：到点为止的最后一档命中 */
+const HOUR_GREETINGS: Array<[number, string]> = [
+  [6, '凌晨好'],
+  [9, '早上好'],
+  [12, '上午好'],
+  [14, '中午好'],
+  [18, '下午好'],
+]
+
+function pad2(value: number) {
+  return String(value).padStart(2, '0')
+}
+
+const greeting = computed(() => {
+  const hour = new Date().getHours()
+  const prefix = HOUR_GREETINGS.find(([limit]) => hour < limit)?.[1] ?? '晚上好'
+
+  return `${prefix}，${loginStore.userName}`
+})
+
+/** 「2026-09-30 星期三 · 本部院区」——日期与当前院区一行 */
+const greetingDate = computed(() => {
+  const now = new Date()
+  const date = `${now.getFullYear()}-${pad2(now.getMonth() + 1)}-${pad2(now.getDate())}`
+  const campus = selectedCampus.value ? ` · ${selectedCampus.value}` : ''
+
+  return `${date} 星期${WEEKDAY_LABELS[now.getDay()]}${campus}`
+})
+
+/** 待办数 = 待患者签署 + 今日已超时（原型 wlTodoN） */
+const pendingTodoCount = computed(
+  () =>
+    (overview.value?.summary.pendingPatientSigning ?? 0) +
+    (overview.value?.summary.todayOverdue ?? 0),
+)
+
+/** 数据快照口径 MM-DD HH:MM（原型 fmtT()），未取到数据前保持原型占位 --:-- */
+const snapshotTime = computed(() => {
+  const at = snapshotAt.value
+
+  if (!at) {
+    return '--:--'
+  }
+
+  return `${pad2(at.getMonth() + 1)}-${pad2(at.getDate())} ${pad2(at.getHours())}:${pad2(at.getMinutes())}`
+})
+
+/**
+ * 原型趋势图固定「近一周」，与排名卡的 7/14/30 开关无关
+ * （原型里趋势的标题、x 轴都是近 7 日，只有 Top10 排名跟着时段按钮变）。
+ * 但后端 `period` 一个参数同时决定趋势与排名窗口（见 docs/workbench-home-api.md），
+ * 所以这里取返回窗口的**最后 7 天**：period=7 时就是全量，period=30 时仍是近一周。
+ */
+const HOME_TREND_DAYS = 7
+const trendPoints = computed<HomeTrendPoint[]>(() =>
+  (overview.value?.trend ?? []).slice(-HOME_TREND_DAYS),
+)
 const todoItems = computed<HomeTodoItem[]>(() => overview.value?.todos ?? [])
 const rankingRows = computed<HomeDocumentRanking[]>(() => overview.value?.documentRanking ?? [])
 
@@ -106,6 +171,7 @@ async function loadOverview() {
     }
 
     overview.value = nextOverview
+    snapshotAt.value = new Date()
   } catch {
     if (requestId !== overviewRequestId) {
       return
@@ -154,6 +220,11 @@ function handlePeriodChange(period: HomeRankingPeriod) {
   rankingPeriod.value = period
 }
 
+/** 趋势图空态的原型入口是「＋ 发起签署任务」（工作台 + 打开新增弹窗），仓库里只跳工作台 */
+function handleCreateTask() {
+  goToSigning()
+}
+
 function retryLoad() {
   void loadOverview()
 }
@@ -169,6 +240,20 @@ onMounted(() => {
 
 <template>
   <section class="home-page">
+    <div class="welcome">
+      <div>
+        <b class="welcome-greeting">{{ greeting }}</b>
+        <span class="welcome-date">{{ greetingDate }}</span>
+        <div class="welcome-todo">
+          今天有 <b>{{ pendingTodoCount }}</b> 件签署待办需要处理，祝工作顺利。
+        </div>
+      </div>
+      <span class="welcome-spacer" />
+      <span class="welcome-snapshot">
+        数据快照 <b>{{ snapshotTime }}</b> · 统计口径：签署完成时间（Asia/Shanghai）
+      </span>
+    </div>
+
     <div v-if="loading" class="home-loading" aria-label="正在加载首页">
       <div class="metric-loading-grid">
         <span v-for="index in 4" :key="index" />
@@ -197,7 +282,7 @@ onMounted(() => {
       </div>
 
       <div class="overview-grid">
-        <SigningTrendPanel :points="trendPoints" :period="rankingPeriod" />
+        <SigningTrendPanel :points="trendPoints" @create="handleCreateTask" />
         <TodoPanel :items="todoItems" @select="handleTodoSelect" @view-all="goToSigning()" />
       </div>
 
@@ -218,6 +303,55 @@ onMounted(() => {
   margin: 0 auto;
 }
 
+.welcome {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  padding: 14px 20px;
+  margin-bottom: 14px;
+  background: linear-gradient(120deg, #fff, #f2f9fb);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+}
+
+/*
+ * 原型 `.welcome b{font-size:16px}` 会把问候语、待办数、快照时刻一起放大 ——
+ * 这里是照抄，不做「只给问候语放大」的收敛，否则和原型并排比对不上。
+ */
+.welcome b {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.welcome-greeting {
+  color: var(--ink);
+}
+
+.welcome-date {
+  margin-left: 10px;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.welcome-todo {
+  margin-top: 2px;
+  color: var(--mut);
+  font-size: 12px;
+}
+
+.welcome-todo b {
+  color: var(--brand);
+}
+
+.welcome-spacer {
+  flex: 1;
+}
+
+.welcome-snapshot {
+  color: var(--mut);
+  font-size: 12px;
+}
+
 .metric-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));

clinical-web/src/views/workbench/home/types.ts

@@ -1,6 +1,6 @@
 import type { SigningMethod } from '@/api/workbench/types'
 
-export type HomeMetricTone = 'brand' | 'success' | 'warning' | 'danger'
+export type HomeMetricTone = 'brand' | 'success' | 'warning' | 'danger' | 'info'
 
 export type HomeMetricKey = 'todaySigned' | 'pending' | 'overdue' | 'templates'