fix(miniprogram): 统一状态色映射,对齐设计系统色板
- 创建 utils/statusTag.ts 共享状态色工具(对齐 variables.scss) - doctor/consultation: 使用共享状态色替代 Tailwind 硬编码 - doctor/followup: 使用共享状态色替代 Tailwind 硬编码 - doctor/action-inbox: SCSS 状态点替换为设计系统变量 - doctor/index: SCSS 告警/搜索区替换为设计系统变量 - pkg-health/alerts: SCSS 严重度标签替换为设计系统变量
This commit is contained in:
@@ -142,10 +142,10 @@
|
|||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
&.completed { background: #52c41a; }
|
&.completed { background: $acc; }
|
||||||
&.in_progress { background: #faad14; }
|
&.in_progress { background: $wrn; }
|
||||||
&.pending { background: #d9d9d9; }
|
&.pending { background: $tx3; }
|
||||||
&.dismissed { background: #ff4d4f; }
|
&.dismissed { background: $dan; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.thread-content {
|
.thread-content {
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
type ThreadResponse,
|
type ThreadResponse,
|
||||||
} from '@/services/action-inbox';
|
} from '@/services/action-inbox';
|
||||||
import Loading from '@/components/Loading';
|
import Loading from '@/components/Loading';
|
||||||
|
import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
const TYPE_LABEL: Record<string, string> = {
|
const TYPE_LABEL: Record<string, string> = {
|
||||||
|
|||||||
@@ -4,14 +4,10 @@ import Taro from '@tarojs/taro';
|
|||||||
import * as doctorApi from '@/services/doctor';
|
import * as doctorApi from '@/services/doctor';
|
||||||
import Loading from '@/components/Loading';
|
import Loading from '@/components/Loading';
|
||||||
import EmptyState from '@/components/EmptyState';
|
import EmptyState from '@/components/EmptyState';
|
||||||
|
import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
|
||||||
|
import { formatDateTime } from '@/utils/date';
|
||||||
import './index.scss';
|
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 = [
|
const TABS = [
|
||||||
{ key: '', label: '全部' },
|
{ key: '', label: '全部' },
|
||||||
{ key: 'active', label: '进行中' },
|
{ key: 'active', label: '进行中' },
|
||||||
@@ -54,12 +50,7 @@ export default function ConsultationList() {
|
|||||||
|
|
||||||
const formatTime = (dateStr?: string | null) => {
|
const formatTime = (dateStr?: string | null) => {
|
||||||
if (!dateStr) return '';
|
if (!dateStr) return '';
|
||||||
const d = new Date(dateStr);
|
return formatDateTime(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' });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (loading && sessions.length === 0) return <Loading />;
|
if (loading && sessions.length === 0) return <Loading />;
|
||||||
@@ -83,7 +74,6 @@ export default function ConsultationList() {
|
|||||||
) : (
|
) : (
|
||||||
<View className='session-list'>
|
<View className='session-list'>
|
||||||
{sessions.map((s) => {
|
{sessions.map((s) => {
|
||||||
const st = STATUS_MAP[s.status] || { label: s.status, color: '#94a3b8' };
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
key={s.id}
|
key={s.id}
|
||||||
@@ -92,8 +82,8 @@ export default function ConsultationList() {
|
|||||||
>
|
>
|
||||||
<View className='session-card__top'>
|
<View className='session-card__top'>
|
||||||
<Text className='session-card__subject'>{s.subject || '在线咨询'}</Text>
|
<Text className='session-card__subject'>{s.subject || '在线咨询'}</Text>
|
||||||
<View className='session-card__status' style={`background: ${st.color}20; color: ${st.color}`}>
|
<View className='session-card__status' style={getStatusInlineStyle(s.status)}>
|
||||||
<Text className='session-card__status-text'>{st.label}</Text>
|
<Text className='session-card__status-text'>{getStatusLabel(s.status)}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className='session-card__info'>
|
<View className='session-card__info'>
|
||||||
|
|||||||
@@ -4,16 +4,9 @@ import Taro, { useRouter } from '@tarojs/taro';
|
|||||||
import * as doctorApi from '@/services/doctor';
|
import * as doctorApi from '@/services/doctor';
|
||||||
import Loading from '@/components/Loading';
|
import Loading from '@/components/Loading';
|
||||||
import EmptyState from '@/components/EmptyState';
|
import EmptyState from '@/components/EmptyState';
|
||||||
|
import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
|
||||||
import './index.scss';
|
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 = [
|
const TABS = [
|
||||||
{ key: '', label: '全部' },
|
{ key: '', label: '全部' },
|
||||||
{ key: 'pending', label: '待处理' },
|
{ key: 'pending', label: '待处理' },
|
||||||
@@ -91,7 +84,6 @@ export default function FollowUpList() {
|
|||||||
) : (
|
) : (
|
||||||
<View className='task-list'>
|
<View className='task-list'>
|
||||||
{tasks.map((task) => {
|
{tasks.map((task) => {
|
||||||
const st = STATUS_MAP[task.status] || { label: task.status, color: '#94a3b8' };
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
key={task.id}
|
key={task.id}
|
||||||
@@ -100,8 +92,8 @@ export default function FollowUpList() {
|
|||||||
>
|
>
|
||||||
<View className='task-card__header'>
|
<View className='task-card__header'>
|
||||||
<Text className='task-card__type'>{getTypeLabel(task.follow_up_type)}</Text>
|
<Text className='task-card__type'>{getTypeLabel(task.follow_up_type)}</Text>
|
||||||
<View className='task-card__status' style={`background: ${st.color}20; color: ${st.color}`}>
|
<View className='task-card__status' style={getStatusInlineStyle(task.status)}>
|
||||||
<Text>{st.label}</Text>
|
<Text>{getStatusLabel(task.status)}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<Text className='task-card__patient'>{task.patient_name || '未知患者'}</Text>
|
<Text className='task-card__patient'>{task.patient_name || '未知患者'}</Text>
|
||||||
|
|||||||
@@ -34,16 +34,16 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 16px 24px;
|
margin: 16px 24px;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
background: #FEF2F2;
|
background: $dan-l;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
border-left: 4px solid #EF4444;
|
border-left: 4px solid $dan;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__alert-icon {
|
&__alert-icon {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #EF4444;
|
background: $dan;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
@@ -56,12 +56,12 @@
|
|||||||
&__alert-text {
|
&__alert-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
color: #991B1B;
|
color: $dan;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__alert-link {
|
&__alert-link {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: #EF4444;
|
color: $dan;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -70,11 +70,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__search-input {
|
&__search-input {
|
||||||
background: #F1F5F9;
|
background: $surface-alt;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 16px 20px;
|
padding: 16px 20px;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
color: #94A3B8;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__section {
|
&__section {
|
||||||
|
|||||||
@@ -55,19 +55,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-info {
|
.alert-badge.sev-info {
|
||||||
background: #e6f7ff;
|
background: $bd-l;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-warning {
|
.alert-badge.sev-warning {
|
||||||
background: #fff7e6;
|
background: $wrn-l;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-critical {
|
.alert-badge.sev-critical {
|
||||||
background: #fff1f0;
|
background: $dan-l;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-urgent {
|
.alert-badge.sev-urgent {
|
||||||
background: #ff4d4f;
|
background: $dan;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge-text {
|
.alert-badge-text {
|
||||||
@@ -76,15 +76,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-info .alert-badge-text {
|
.alert-badge.sev-info .alert-badge-text {
|
||||||
color: #1890ff;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-warning .alert-badge-text {
|
.alert-badge.sev-warning .alert-badge-text {
|
||||||
color: #fa8c16;
|
color: $wrn;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-critical .alert-badge-text {
|
.alert-badge.sev-critical .alert-badge-text {
|
||||||
color: #f5222d;
|
color: $dan;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-badge.sev-urgent .alert-badge-text {
|
.alert-badge.sev-urgent .alert-badge-text {
|
||||||
|
|||||||
107
apps/miniprogram/src/utils/statusTag.ts
Normal file
107
apps/miniprogram/src/utils/statusTag.ts
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user