fix(miniprogram): 统一状态色映射，对齐设计系统色板

- 创建 utils/statusTag.ts 共享状态色工具（对齐 variables.scss） - doctor/consultation: 使用共享状态色替代 Tailwind 硬编码 - doctor/followup: 使用共享状态色替代 Tailwind 硬编码 - doctor/action-inbox: SCSS 状态点替换为设计系统变量 - doctor/index: SCSS 告警/搜索区替换为设计系统变量 - pkg-health/alerts: SCSS 严重度标签替换为设计系统变量
2026-05-06 10:59:13 +08:00
parent 36275eb307
commit 4a95a83d6b
7 changed files with 134 additions and 44 deletions
--- a/apps/miniprogram/src/pages/doctor/action-inbox/index.scss
+++ b/apps/miniprogram/src/pages/doctor/action-inbox/index.scss
@@ -142,10 +142,10 @@
    margin-top: 4px;
    flex-shrink: 0;

-    &.completed { background: #52c41a; }
-    &.in_progress { background: #faad14; }
-    &.pending { background: #d9d9d9; }
-    &.dismissed { background: #ff4d4f; }
+    &.completed { background: $acc; }
+    &.in_progress { background: $wrn; }
+    &.pending { background: $tx3; }
+    &.dismissed { background: $dan; }
  }

  .thread-content {
--- a/apps/miniprogram/src/pages/doctor/action-inbox/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/action-inbox/index.tsx
@@ -8,6 +8,7 @@ import {
  type ThreadResponse,
 } from '@/services/action-inbox';
 import Loading from '@/components/Loading';
+import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
 import './index.scss';

 const TYPE_LABEL: Record<string, string> = {
--- a/apps/miniprogram/src/pages/doctor/consultation/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/consultation/index.tsx
@@ -4,14 +4,10 @@ import Taro from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
+import { formatDateTime } from '@/utils/date';
 import './index.scss';

-const STATUS_MAP: Record<string, { label: string; color: string }> = {
-  waiting: { label: '等待中', color: '#f59e0b' },
-  active: { label: '进行中', color: '#10b981' },
-  closed: { label: '已关闭', color: '#94a3b8' },
-};
-
 const TABS = [
  { key: '', label: '全部' },
  { key: 'active', label: '进行中' },
@@ -54,12 +50,7 @@ export default function ConsultationList() {

  const formatTime = (dateStr?: string | null) => {
    if (!dateStr) return '';
-    const d = new Date(dateStr);
-    const now = new Date();
-    if (d.toDateString() === now.toDateString()) {
-      return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-    }
-    return d.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' });
+    return formatDateTime(dateStr);
  };

  if (loading && sessions.length === 0) return <Loading />;
@@ -83,7 +74,6 @@ export default function ConsultationList() {
      ) : (
        <View className='session-list'>
          {sessions.map((s) => {
-            const st = STATUS_MAP[s.status] || { label: s.status, color: '#94a3b8' };
            return (
              <View
                key={s.id}
@@ -92,8 +82,8 @@ export default function ConsultationList() {
              >
                <View className='session-card__top'>
                  <Text className='session-card__subject'>{s.subject || '在线咨询'}</Text>
-                  <View className='session-card__status' style={`background: ${st.color}20; color: ${st.color}`}>
-                    <Text className='session-card__status-text'>{st.label}</Text>
+                  <View className='session-card__status' style={getStatusInlineStyle(s.status)}>
+                    <Text className='session-card__status-text'>{getStatusLabel(s.status)}</Text>
                  </View>
                </View>
                <View className='session-card__info'>
--- a/apps/miniprogram/src/pages/doctor/followup/index.tsx
+++ b/apps/miniprogram/src/pages/doctor/followup/index.tsx
@@ -4,16 +4,9 @@ import Taro, { useRouter } from '@tarojs/taro';
 import * as doctorApi from '@/services/doctor';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
+import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
 import './index.scss';

-const STATUS_MAP: Record<string, { label: string; color: string }> = {
-  pending: { label: '待处理', color: '#f59e0b' },
-  in_progress: { label: '进行中', color: '#0891b2' },
-  completed: { label: '已完成', color: '#10b981' },
-  overdue: { label: '已逾期', color: '#ef4444' },
-  cancelled: { label: '已取消', color: '#94a3b8' },
-};
-
 const TABS = [
  { key: '', label: '全部' },
  { key: 'pending', label: '待处理' },
@@ -91,7 +84,6 @@ export default function FollowUpList() {
      ) : (
        <View className='task-list'>
          {tasks.map((task) => {
-            const st = STATUS_MAP[task.status] || { label: task.status, color: '#94a3b8' };
            return (
              <View
                key={task.id}
@@ -100,8 +92,8 @@ export default function FollowUpList() {
              >
                <View className='task-card__header'>
                  <Text className='task-card__type'>{getTypeLabel(task.follow_up_type)}</Text>
-                  <View className='task-card__status' style={`background: ${st.color}20; color: ${st.color}`}>
-                    <Text>{st.label}</Text>
+                  <View className='task-card__status' style={getStatusInlineStyle(task.status)}>
+                    <Text>{getStatusLabel(task.status)}</Text>
                  </View>
                </View>
                <Text className='task-card__patient'>{task.patient_name || '未知患者'}</Text>
--- a/apps/miniprogram/src/pages/doctor/index.scss
+++ b/apps/miniprogram/src/pages/doctor/index.scss
@@ -34,16 +34,16 @@
    align-items: center;
    margin: 16px 24px;
    padding: 16px 20px;
-    background: #FEF2F2;
+    background: $dan-l;
    border-radius: $r;
-    border-left: 4px solid #EF4444;
+    border-left: 4px solid $dan;
  }

  &__alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
-    background: #EF4444;
+    background: $dan;
    color: #fff;
    text-align: center;
    line-height: 36px;
@@ -56,12 +56,12 @@
  &__alert-text {
    flex: 1;
    font-size: 26px;
-    color: #991B1B;
+    color: $dan;
  }

  &__alert-link {
    font-size: 24px;
-    color: #EF4444;
+    color: $dan;
    flex-shrink: 0;
  }

@@ -70,11 +70,11 @@
  }

  &__search-input {
-    background: #F1F5F9;
+    background: $surface-alt;
    border-radius: $r;
    padding: 16px 20px;
    font-size: 26px;
-    color: #94A3B8;
+    color: $tx3;
  }

  &__section {
--- a/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
@@ -55,19 +55,19 @@
 }

 .alert-badge.sev-info {
-  background: #e6f7ff;
+  background: $bd-l;
 }

 .alert-badge.sev-warning {
-  background: #fff7e6;
+  background: $wrn-l;
 }

 .alert-badge.sev-critical {
-  background: #fff1f0;
+  background: $dan-l;
 }

 .alert-badge.sev-urgent {
-  background: #ff4d4f;
+  background: $dan;
 }

 .alert-badge-text {
@@ -76,15 +76,15 @@
 }

 .alert-badge.sev-info .alert-badge-text {
-  color: #1890ff;
+  color: $tx3;
 }

 .alert-badge.sev-warning .alert-badge-text {
-  color: #fa8c16;
+  color: $wrn;
 }

 .alert-badge.sev-critical .alert-badge-text {
-  color: #f5222d;
+  color: $dan;
 }

 .alert-badge.sev-urgent .alert-badge-text {
--- a/apps/miniprogram/src/utils/statusTag.ts
+++ b/apps/miniprogram/src/utils/statusTag.ts
@@ -0,0 +1,107 @@
+/**
+ * 共享状态色映射 — 对齐设计系统 variables.scss
+ *
+ * 使用方式：
+ *   import { getStatusStyle } from '@/utils/statusTag';
+ *   <View style={getStatusStyle('pending')}>待确认</View>
+ */
+
+// 设计系统色板 (与 variables.scss 对齐)
+const COLORS = {
+  pri: '#C4623A',
+  priLight: '#F0DDD4',
+  acc: '#5B7A5E',
+  accLight: '#E8F0E8',
+  wrn: '#C4873A',
+  wrnLight: '#FFF3E0',
+  dan: '#B54A4A',
+  danLight: '#FDEAEA',
+  tx3: '#78716C',
+  neutralBg: '#F1F5F9',
+} as const;
+
+export interface StatusStyle {
+  background: string;
+  color: string;
+}
+
+// 统一状态色映射
+const STATUS_COLORS: Record<string, StatusStyle> = {
+  // 预约
+  pending:           { background: COLORS.wrnLight,    color: COLORS.wrn },
+  confirmed:         { background: COLORS.priLight,    color: COLORS.pri },
+  completed:         { background: COLORS.accLight,    color: COLORS.acc },
+  cancelled:         { background: COLORS.neutralBg,   color: COLORS.tx3 },
+  no_show:           { background: COLORS.danLight,    color: COLORS.dan },
+
+  // 随访
+  overdue:           { background: COLORS.danLight,    color: COLORS.dan },
+  in_progress:       { background: COLORS.priLight,    color: COLORS.pri },
+
+  // 咨询
+  waiting:           { background: COLORS.wrnLight,    color: COLORS.wrn },
+  active:            { background: COLORS.accLight,    color: COLORS.acc },
+  closed:            { background: COLORS.neutralBg,   color: COLORS.tx3 },
+
+  // 告警严重度
+  info:              { background: COLORS.neutralBg,   color: COLORS.tx3 },
+  warning:           { background: COLORS.wrnLight,    color: COLORS.wrn },
+  medium:            { background: COLORS.wrnLight,    color: COLORS.wrn },
+  critical:          { background: COLORS.danLight,    color: COLORS.dan },
+  high:              { background: COLORS.danLight,    color: COLORS.dan },
+  urgent:            { background: COLORS.danLight,    color: COLORS.dan },
+
+  // 告警状态
+  acknowledged:      { background: COLORS.priLight,    color: COLORS.pri },
+  resolved:          { background: COLORS.accLight,    color: COLORS.acc },
+  dismissed:         { background: COLORS.neutralBg,   color: COLORS.tx3 },
+
+  // 设备
+  online:            { background: COLORS.accLight,    color: COLORS.acc },
+  offline:           { background: COLORS.neutralBg,   color: COLORS.tx3 },
+  paired:            { background: COLORS.priLight,    color: COLORS.pri },
+  error:             { background: COLORS.danLight,    color: COLORS.dan },
+
+  // 通用
+  verified:          { background: COLORS.accLight,    color: COLORS.acc },
+  inactive:          { background: COLORS.neutralBg,   color: COLORS.tx3 },
+  deceased:          { background: COLORS.neutralBg,   color: COLORS.tx3 },
+  rejected:          { background: COLORS.danLight,    color: COLORS.dan },
+};
+
+const DEFAULT_STYLE: StatusStyle = { background: COLORS.neutralBg, color: COLORS.tx3 };
+
+/** 获取状态对应的样式（背景色+文字色） */
+export function getStatusStyle(status: string): StatusStyle {
+  return STATUS_COLORS[status] || DEFAULT_STYLE;
+}
+
+/** 获取带透明度的状态背景（用于行内 style） */
+export function getStatusInlineStyle(status: string): { background: string; color: string; borderRadius: string; padding: string; fontSize: string } {
+  const s = getStatusStyle(status);
+  return {
+    background: s.background,
+    color: s.color,
+    borderRadius: '6px',
+    padding: '2px 8px',
+    fontSize: '24px', // 小程序最小字号
+  };
+}
+
+// 统一状态标签文案
+const STATUS_LABELS: Record<string, string> = {
+  pending: '待确认', confirmed: '已确认', completed: '已完成',
+  cancelled: '已取消', no_show: '未到诊', overdue: '逾期',
+  in_progress: '进行中', waiting: '等待中', active: '进行中',
+  closed: '已关闭', info: '提示', warning: '警告',
+  medium: '中等', critical: '严重', high: '严重', urgent: '紧急',
+  acknowledged: '已确认', resolved: '已恢复', dismissed: '已忽略',
+  online: '在线', offline: '离线', paired: '已配对', error: '异常',
+  verified: '已认证', inactive: '停用', deceased: '已故',
+  rejected: '已拒绝',
+};
+
+/** 获取状态的中文标签 */
+export function getStatusLabel(status: string): string {
+  return STATUS_LABELS[status] || status;
+}