feat(miniprogram): 访客模式 + 长辈模式 + MCP 自动化脚本
访客模式: - 未登录用户可见首页(轮播图+健康资讯+登录引导)和"我的"页面 - 健康和消息 tab 显示 GuestGuard 登录拦截 - 登录页增加"暂不登录,先看看"跳过入口 - 401 拦截器增加 hasToken 检查,避免访客被重定向到登录页 - 退出登录后 reLaunch 到首页而非登录页 长辈模式: - 新增 stores/ui.ts 管理显示模式(标准/长辈) - 长辈模式放大字体 ×1.3、间距 ×1.2、按钮加大 - "我的 → 账号 → 长辈模式"切换页 - 设置持久化到 Storage 修复: - Health/Messages 页面 Hooks 顺序违规(条件 return 在 hooks 之间) 导致访客模式下页面白屏,所有 hooks 移到条件判断之前 工程: - scripts/mpsync.sh/ps1 自动清理残留 DevTools 进程 - project.config.json 默认关闭域名校验
This commit is contained in:
@@ -5,7 +5,7 @@ export default defineConfig(async (merge) => {
|
|||||||
const baseConfig = {
|
const baseConfig = {
|
||||||
projectName: 'hms-miniprogram',
|
projectName: 'hms-miniprogram',
|
||||||
date: '2026-4-23',
|
date: '2026-4-23',
|
||||||
designWidth: 750,
|
designWidth: 375,
|
||||||
deviceRatio: { 640: 2.34 / 2, 750: 1, 375: 2, 828: 1.81 / 2 },
|
deviceRatio: { 640: 2.34 / 2, 750: 1, 375: 2, 828: 1.81 / 2 },
|
||||||
sourceRoot: 'src',
|
sourceRoot: 'src',
|
||||||
outputRoot: 'dist',
|
outputRoot: 'dist',
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
"miniprogramRoot": "dist/",
|
"miniprogramRoot": "dist/",
|
||||||
"compileType": "miniprogram",
|
"compileType": "miniprogram",
|
||||||
"setting": {
|
"setting": {
|
||||||
"urlCheck": true,
|
"urlCheck": false,
|
||||||
"automationAudits": true,
|
"automationAudits": true,
|
||||||
"es6": false,
|
"es6": false,
|
||||||
"enhance": false,
|
"enhance": false,
|
||||||
@@ -11,6 +11,10 @@
|
|||||||
"postcss": false,
|
"postcss": false,
|
||||||
"minified": true,
|
"minified": true,
|
||||||
"bundle": false,
|
"bundle": false,
|
||||||
"minifyWXML": true
|
"minifyWXML": true,
|
||||||
}
|
"packNpmManually": false,
|
||||||
|
"packNpmRelationList": [],
|
||||||
|
"ignoreUploadUnusedFiles": true
|
||||||
|
},
|
||||||
|
"condition": {}
|
||||||
}
|
}
|
||||||
@@ -44,6 +44,7 @@ export default defineAppConfig({
|
|||||||
'dialysis-records/index', 'dialysis-records/detail/index',
|
'dialysis-records/index', 'dialysis-records/detail/index',
|
||||||
'dialysis-prescriptions/index', 'dialysis-prescriptions/detail/index',
|
'dialysis-prescriptions/index', 'dialysis-prescriptions/detail/index',
|
||||||
'consents/index', 'health-records/index', 'diagnoses/index',
|
'consents/index', 'health-records/index', 'diagnoses/index',
|
||||||
|
'elder-mode/index',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
@import './styles/variables.scss';
|
@import './styles/variables.scss';
|
||||||
|
@import './styles/elder-mode.scss';
|
||||||
|
|
||||||
page {
|
page {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC',
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC',
|
||||||
|
|||||||
@@ -3,13 +3,16 @@ import Taro from '@tarojs/taro';
|
|||||||
import ErrorBoundary from './components/ErrorBoundary';
|
import ErrorBoundary from './components/ErrorBoundary';
|
||||||
import { flushEvents } from './services/analytics';
|
import { flushEvents } from './services/analytics';
|
||||||
import { useAuthStore } from './stores/auth';
|
import { useAuthStore } from './stores/auth';
|
||||||
|
import { useUIStore } from './stores/ui';
|
||||||
import './app.scss';
|
import './app.scss';
|
||||||
|
|
||||||
function App({ children }: PropsWithChildren<Record<string, unknown>>) {
|
function App({ children }: PropsWithChildren<Record<string, unknown>>) {
|
||||||
const restoreAuth = useAuthStore((s) => s.restore);
|
const restoreAuth = useAuthStore((s) => s.restore);
|
||||||
|
const restoreUI = useUIStore((s) => s.restore);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
restoreAuth();
|
restoreAuth();
|
||||||
|
restoreUI();
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
flushEvents();
|
flushEvents();
|
||||||
}, 30000);
|
}, 30000);
|
||||||
|
|||||||
64
apps/miniprogram/src/components/GuestGuard/index.scss
Normal file
64
apps/miniprogram/src/components/GuestGuard/index.scss
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
@import '../../styles/variables.scss';
|
||||||
|
@import '../../styles/mixins.scss';
|
||||||
|
|
||||||
|
.guard-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: $bg;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guard-card {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guard-icon-wrap {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 40px;
|
||||||
|
background: $surface-alt;
|
||||||
|
@include flex-center;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guard-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
color: $tx3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guard-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $tx;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guard-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: $tx3;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guard-btn {
|
||||||
|
display: inline-block;
|
||||||
|
height: 48px;
|
||||||
|
padding: 0 32px;
|
||||||
|
background: $pri;
|
||||||
|
border-radius: $r-pill;
|
||||||
|
@include flex-center;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guard-btn-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
28
apps/miniprogram/src/components/GuestGuard/index.tsx
Normal file
28
apps/miniprogram/src/components/GuestGuard/index.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { View, Text } from '@tarojs/components';
|
||||||
|
import Taro from '@tarojs/taro';
|
||||||
|
import './index.scss';
|
||||||
|
|
||||||
|
interface GuestGuardProps {
|
||||||
|
title: string;
|
||||||
|
desc?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GuestGuard({ title, desc }: GuestGuardProps) {
|
||||||
|
return (
|
||||||
|
<View className='guard-page'>
|
||||||
|
<View className='guard-card'>
|
||||||
|
<View className='guard-icon-wrap'>
|
||||||
|
<Text className='guard-icon'>锁</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='guard-title'>{title}</Text>
|
||||||
|
{desc && <Text className='guard-desc'>{desc}</Text>}
|
||||||
|
<View
|
||||||
|
className='guard-btn'
|
||||||
|
onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}
|
||||||
|
>
|
||||||
|
<Text className='guard-btn-text'>立即登录</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -6,6 +6,7 @@ import { useAuthStore } from '../../stores/auth';
|
|||||||
import { inputVitalSign, getTrend, getHealthThresholds, findThreshold, DEFAULT_THRESHOLDS, type HealthThreshold } from '../../services/health';
|
import { inputVitalSign, getTrend, getHealthThresholds, findThreshold, DEFAULT_THRESHOLDS, type HealthThreshold } from '../../services/health';
|
||||||
import { listPendingSuggestions, type AiSuggestionItem } from '../../services/ai-analysis';
|
import { listPendingSuggestions, type AiSuggestionItem } from '../../services/ai-analysis';
|
||||||
import Loading from '../../components/Loading';
|
import Loading from '../../components/Loading';
|
||||||
|
import GuestGuard from '../../components/GuestGuard';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
type VitalType = 'blood_pressure' | 'heart_rate' | 'blood_sugar' | 'weight';
|
type VitalType = 'blood_pressure' | 'heart_rate' | 'blood_sugar' | 'weight';
|
||||||
@@ -40,7 +41,7 @@ interface TrendPoint {
|
|||||||
|
|
||||||
export default function Health() {
|
export default function Health() {
|
||||||
const { todaySummary, loading, refreshToday, getTrend: fetchTrend } = useHealthStore();
|
const { todaySummary, loading, refreshToday, getTrend: fetchTrend } = useHealthStore();
|
||||||
const { currentPatient } = useAuthStore();
|
const { user, currentPatient } = useAuthStore();
|
||||||
const [activeTab, setActiveTab] = useState<VitalType>('blood_pressure');
|
const [activeTab, setActiveTab] = useState<VitalType>('blood_pressure');
|
||||||
const [systolic, setSystolic] = useState('');
|
const [systolic, setSystolic] = useState('');
|
||||||
const [diastolic, setDiastolic] = useState('');
|
const [diastolic, setDiastolic] = useState('');
|
||||||
@@ -55,6 +56,7 @@ export default function Health() {
|
|||||||
const [thresholds, setThresholds] = useState<HealthThreshold[]>(DEFAULT_THRESHOLDS);
|
const [thresholds, setThresholds] = useState<HealthThreshold[]>(DEFAULT_THRESHOLDS);
|
||||||
|
|
||||||
useDidShow(() => {
|
useDidShow(() => {
|
||||||
|
if (!user) return;
|
||||||
refreshToday();
|
refreshToday();
|
||||||
loadTrend(activeTab);
|
loadTrend(activeTab);
|
||||||
loadAiSuggestions();
|
loadAiSuggestions();
|
||||||
@@ -62,11 +64,16 @@ export default function Health() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
usePullDownRefresh(() => {
|
usePullDownRefresh(() => {
|
||||||
|
if (!user) return;
|
||||||
Promise.all([refreshToday(true), loadTrend(activeTab), loadAiSuggestions()]).finally(() => {
|
Promise.all([refreshToday(true), loadTrend(activeTab), loadAiSuggestions()]).finally(() => {
|
||||||
Taro.stopPullDownRefresh();
|
Taro.stopPullDownRefresh();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return <GuestGuard title='请先登录' desc='登录后即可记录和查看健康数据' />;
|
||||||
|
}
|
||||||
|
|
||||||
const loadAiSuggestions = async () => {
|
const loadAiSuggestions = async () => {
|
||||||
try {
|
try {
|
||||||
const items = await listPendingSuggestions();
|
const items = await listPendingSuggestions();
|
||||||
@@ -273,7 +280,7 @@ export default function Health() {
|
|||||||
value={systolic}
|
value={systolic}
|
||||||
onInput={(e) => setSystolic(e.detail.value)}
|
onInput={(e) => setSystolic(e.detail.value)}
|
||||||
/>
|
/>
|
||||||
<Text className='input-label' style='margin-top:20px;'>舒张压(低压)</Text>
|
<Text className='input-label input-label--secondary'>舒张压(低压)</Text>
|
||||||
<Input
|
<Input
|
||||||
className='input-field'
|
className='input-field'
|
||||||
type='number'
|
type='number'
|
||||||
@@ -363,7 +370,7 @@ export default function Health() {
|
|||||||
const tv = getThresholdValue(activeTab, thresholds)!;
|
const tv = getThresholdValue(activeTab, thresholds)!;
|
||||||
const pct = Math.min(95, (tv / maxTrendValue) * 100);
|
const pct = Math.min(95, (tv / maxTrendValue) * 100);
|
||||||
return (
|
return (
|
||||||
<View className='trend-threshold-line' style={`bottom:${12 + pct * 1.08}px;`}>
|
<View className='trend-threshold-line' style={`bottom:${((12 + pct * 1.08) / 120 * 100).toFixed(1)}%;`}>
|
||||||
<Text className='trend-threshold-label'>{tv}</Text>
|
<Text className='trend-threshold-label'>{tv}</Text>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
@import '../../styles/variables.scss';
|
@import '../../styles/variables.scss';
|
||||||
@import '../../styles/mixins.scss';
|
@import '../../styles/mixins.scss';
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════
|
||||||
|
登录后首页
|
||||||
|
═══════════════════════════════════════ */
|
||||||
|
|
||||||
.home-page {
|
.home-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
@@ -8,12 +12,12 @@
|
|||||||
padding-bottom: calc(100px + env(safe-area-inset-bottom));
|
padding-bottom: calc(100px + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 区域 1:问候 + 日期 + 铃铛 ─── */
|
/* ─── 问候区 ─── */
|
||||||
.greeting-section {
|
.greeting-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.greeting-left {
|
.greeting-left {
|
||||||
@@ -21,7 +25,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.greeting-text {
|
.greeting-text {
|
||||||
font-size: 24px;
|
@include serif-number;
|
||||||
|
font-size: 26px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
display: block;
|
display: block;
|
||||||
@@ -35,8 +40,10 @@
|
|||||||
|
|
||||||
.greeting-bell {
|
.greeting-bell {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 40px;
|
width: 44px;
|
||||||
height: 40px;
|
height: 44px;
|
||||||
|
border-radius: 22px;
|
||||||
|
background: $pri-l;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
@@ -46,16 +53,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.greeting-bell-icon {
|
.greeting-bell-icon {
|
||||||
font-size: 22px;
|
font-size: 18px;
|
||||||
|
color: $pri-d;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 区域 2:今日体征完成度 ─── */
|
.greeting-bell-dot {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 6px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: $dan;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 今日体征进度 ─── */
|
||||||
.checkin-card {
|
.checkin-card {
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-md;
|
||||||
padding: 16px;
|
padding: 20px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
@@ -106,9 +124,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 区域 3:今日体征 2x2 ─── */
|
/* ─── 今日体征 2x2 ─── */
|
||||||
.vitals-section {
|
.vitals-section {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
@@ -136,37 +154,36 @@
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: $tx2;
|
color: $tx2;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vital-value-row {
|
.vital-value-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vital-value {
|
.vital-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 32px;
|
font-size: 30px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
line-height: 1.1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vital-unit {
|
.vital-unit {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
margin-left: 2px;
|
margin-left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vital-bottom {
|
.vital-bottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.vital-tag {
|
.vital-tag {
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: $r-pill;
|
border-radius: $r-pill;
|
||||||
@@ -189,103 +206,85 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 区域 4:今日待办 ─── */
|
/* ─── 智能提醒卡片 ─── */
|
||||||
.todo-section {
|
.reminder-card {
|
||||||
margin-bottom: 12px;
|
background: linear-gradient(135deg, $pri 0%, $pri-d 100%);
|
||||||
}
|
|
||||||
|
|
||||||
.todo-empty {
|
|
||||||
background: $card;
|
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 24px;
|
padding: 18px;
|
||||||
text-align: center;
|
margin-bottom: 16px;
|
||||||
box-shadow: $shadow-sm;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-empty-text {
|
.reminder-header {
|
||||||
font-size: 14px;
|
display: flex;
|
||||||
color: $tx2;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list {
|
.reminder-title {
|
||||||
background: $card;
|
font-size: 15px;
|
||||||
border-radius: $r;
|
font-weight: 600;
|
||||||
overflow: hidden;
|
color: #fff;
|
||||||
box-shadow: $shadow-sm;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-item {
|
.reminder-count {
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.7;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reminder-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
padding: 12px 16px;
|
padding: 8px 0;
|
||||||
border-bottom: 1px solid $bd;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: $bd-l;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-icon-wrap {
|
.reminder-item-border {
|
||||||
width: 36px;
|
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
height: 36px;
|
}
|
||||||
border-radius: 10px;
|
|
||||||
background: $pri-l;
|
.reminder-tag {
|
||||||
@include flex-center;
|
font-size: 10px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
font-weight: 500;
|
||||||
|
color: #fff;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-icon-char {
|
.reminder-text {
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $pri;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-title {
|
|
||||||
font-size: 15px;
|
|
||||||
color: $tx;
|
|
||||||
font-weight: 500;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.todo-sub {
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: $tx3;
|
flex: 1;
|
||||||
display: block;
|
color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-arrow {
|
.reminder-arrow {
|
||||||
font-size: 14px;
|
opacity: 0.5;
|
||||||
color: $tx3;
|
color: #fff;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 区域 5:快捷操作 ─── */
|
/* ─── 快捷操作 ─── */
|
||||||
.action-section {
|
.action-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-top: 16px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn {
|
.action-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@@ -296,6 +295,7 @@
|
|||||||
.action-primary {
|
.action-primary {
|
||||||
background: $pri;
|
background: $pri;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-outline {
|
.action-outline {
|
||||||
@@ -308,3 +308,166 @@
|
|||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ═══════════════════════════════════════
|
||||||
|
访客首页
|
||||||
|
═══════════════════════════════════════ */
|
||||||
|
|
||||||
|
.guest-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: $bg;
|
||||||
|
padding-bottom: calc(120px + env(safe-area-inset-bottom));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 轮播图 ─── */
|
||||||
|
.guest-swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
|
||||||
|
&--1 {
|
||||||
|
background: linear-gradient(135deg, $pri-d 0%, $pri 60%, $pri-l 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide:nth-child(2) .guest-slide-bg {
|
||||||
|
background: linear-gradient(135deg, $acc 0%, #3D5A40 60%, $acc-l 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide:nth-child(3) .guest-slide-bg {
|
||||||
|
background: linear-gradient(135deg, #8B6F4E 0%, $wrn 60%, $wrn-l 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide-title {
|
||||||
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide-desc {
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 健康资讯 ─── */
|
||||||
|
.guest-section {
|
||||||
|
padding: 24px 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-section-title {
|
||||||
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $tx;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-articles {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-article-card {
|
||||||
|
background: $card;
|
||||||
|
border-radius: $r;
|
||||||
|
padding: 16px 18px;
|
||||||
|
box-shadow: $shadow-sm;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-article-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $tx;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-article-summary {
|
||||||
|
font-size: 13px;
|
||||||
|
color: $tx3;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-empty {
|
||||||
|
padding: 40px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-empty-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $tx3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 底部登录引导 ─── */
|
||||||
|
.guest-login-prompt {
|
||||||
|
margin: 24px 24px 0;
|
||||||
|
background: $card;
|
||||||
|
border-radius: $r;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: $shadow-md;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-login-text {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 13px;
|
||||||
|
color: $tx2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-login-btn {
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 28px;
|
||||||
|
background: $pri;
|
||||||
|
border-radius: $r-pill;
|
||||||
|
@include flex-center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-login-btn-text {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { View, Text } from '@tarojs/components';
|
import { View, Text, Swiper, SwiperItem } from '@tarojs/components';
|
||||||
import { useState } from 'react';
|
import { useState, useCallback } from 'react';
|
||||||
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
|
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
|
||||||
import { useAuthStore } from '../../stores/auth';
|
import { useAuthStore } from '../../stores/auth';
|
||||||
|
import { useUIStore } from '../../stores/ui';
|
||||||
import { useHealthStore } from '../../stores/health';
|
import { useHealthStore } from '../../stores/health';
|
||||||
import ProgressRing from '../../components/ProgressRing';
|
import ProgressRing from '../../components/ProgressRing';
|
||||||
import Loading from '../../components/Loading';
|
import Loading from '../../components/Loading';
|
||||||
@@ -10,6 +11,7 @@ import * as appointmentApi from '@/services/appointment';
|
|||||||
import * as followupApi from '@/services/followup';
|
import * as followupApi from '@/services/followup';
|
||||||
import { listPendingSuggestions, type AiSuggestionItem } from '@/services/ai-analysis';
|
import { listPendingSuggestions, type AiSuggestionItem } from '@/services/ai-analysis';
|
||||||
import { notificationService } from '@/services/notification';
|
import { notificationService } from '@/services/notification';
|
||||||
|
import * as articleApi from '@/services/article';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
interface ReminderItem {
|
interface ReminderItem {
|
||||||
@@ -19,7 +21,103 @@ interface ReminderItem {
|
|||||||
tag: string;
|
tag: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Index() {
|
// ─── 访客首页 ───
|
||||||
|
|
||||||
|
const CAROUSEL_SLIDES = [
|
||||||
|
{ id: 'slide-1', title: '专业血透中心', desc: '三甲级医护团队全程守护' },
|
||||||
|
{ id: 'slide-2', title: '智慧健康管理', desc: 'AI 驱动个性化健康方案' },
|
||||||
|
{ id: 'slide-3', title: '温馨就医环境', desc: '舒适安全的治疗体验' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function GuestHome({ modeClass }: { modeClass: string }) {
|
||||||
|
const [articles, setArticles] = useState<articleApi.Article[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
useDidShow(() => {
|
||||||
|
loadArticles();
|
||||||
|
trackPageView('guest-home');
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadArticles = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await articleApi.listArticles({ page: 1, page_size: 4 });
|
||||||
|
setArticles(res.data || []);
|
||||||
|
} catch {
|
||||||
|
// 文章加载失败不阻塞
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className={`guest-page ${modeClass}`}>
|
||||||
|
{/* 轮播图 */}
|
||||||
|
<Swiper
|
||||||
|
className='guest-swiper'
|
||||||
|
indicatorDots
|
||||||
|
indicatorColor='rgba(255,255,255,0.4)'
|
||||||
|
indicatorActiveColor='#FFFFFF'
|
||||||
|
autoplay
|
||||||
|
circular
|
||||||
|
interval={4000}
|
||||||
|
duration={500}
|
||||||
|
>
|
||||||
|
{CAROUSEL_SLIDES.map((slide) => (
|
||||||
|
<SwiperItem key={slide.id}>
|
||||||
|
<View className='guest-slide'>
|
||||||
|
<View className='guest-slide-bg guest-slide-bg--1' />
|
||||||
|
<View className='guest-slide-content'>
|
||||||
|
<Text className='guest-slide-title'>{slide.title}</Text>
|
||||||
|
<Text className='guest-slide-desc'>{slide.desc}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</SwiperItem>
|
||||||
|
))}
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
|
{/* 健康资讯 */}
|
||||||
|
<View className='guest-section'>
|
||||||
|
<Text className='guest-section-title'>健康资讯</Text>
|
||||||
|
{loading ? (
|
||||||
|
<Loading />
|
||||||
|
) : articles.length > 0 ? (
|
||||||
|
<View className='guest-articles'>
|
||||||
|
{articles.map((a) => (
|
||||||
|
<View
|
||||||
|
key={a.id}
|
||||||
|
className='guest-article-card'
|
||||||
|
onClick={() => Taro.navigateTo({ url: `/pages/article/detail/index?id=${a.id}` })}
|
||||||
|
>
|
||||||
|
<Text className='guest-article-title'>{a.title}</Text>
|
||||||
|
{a.summary && <Text className='guest-article-summary'>{a.summary}</Text>}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View className='guest-empty'>
|
||||||
|
<Text className='guest-empty-text'>暂无文章</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* 底部登录引导 */}
|
||||||
|
<View className='guest-login-prompt'>
|
||||||
|
<Text className='guest-login-text'>登录后即可使用完整健康管理服务</Text>
|
||||||
|
<View
|
||||||
|
className='guest-login-btn'
|
||||||
|
onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}
|
||||||
|
>
|
||||||
|
<Text className='guest-login-btn-text'>立即登录</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 登录后首页 ───
|
||||||
|
|
||||||
|
function HomeDashboard({ modeClass }: { modeClass: string }) {
|
||||||
const { user, currentPatient } = useAuthStore();
|
const { user, currentPatient } = useAuthStore();
|
||||||
const { todaySummary, loading, refreshToday } = useHealthStore();
|
const { todaySummary, loading, refreshToday } = useHealthStore();
|
||||||
const [reminders, setReminders] = useState<ReminderItem[]>([]);
|
const [reminders, setReminders] = useState<ReminderItem[]>([]);
|
||||||
@@ -55,7 +153,6 @@ export default function Index() {
|
|||||||
setRemindersLoading(true);
|
setRemindersLoading(true);
|
||||||
try {
|
try {
|
||||||
const items: ReminderItem[] = [];
|
const items: ReminderItem[] = [];
|
||||||
|
|
||||||
const [apptRes, taskRes, suggestRes] = await Promise.allSettled([
|
const [apptRes, taskRes, suggestRes] = await Promise.allSettled([
|
||||||
appointmentApi.listAppointments(patientId, 1),
|
appointmentApi.listAppointments(patientId, 1),
|
||||||
followupApi.listTasks(patientId, 'pending'),
|
followupApi.listTasks(patientId, 'pending'),
|
||||||
@@ -64,15 +161,9 @@ export default function Index() {
|
|||||||
|
|
||||||
if (suggestRes.status === 'fulfilled') {
|
if (suggestRes.status === 'fulfilled') {
|
||||||
for (const s of suggestRes.value.data.slice(0, 1)) {
|
for (const s of suggestRes.value.data.slice(0, 1)) {
|
||||||
items.push({
|
items.push({ id: s.id, text: buildSuggestionText(s), type: 'ai', tag: 'AI 建议' });
|
||||||
id: s.id,
|
|
||||||
text: buildSuggestionText(s),
|
|
||||||
type: 'ai',
|
|
||||||
tag: 'AI 建议',
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (apptRes.status === 'fulfilled') {
|
if (apptRes.status === 'fulfilled') {
|
||||||
for (const a of apptRes.value.data.slice(0, 1)) {
|
for (const a of apptRes.value.data.slice(0, 1)) {
|
||||||
if (a.status === 'pending' || a.status === 'confirmed') {
|
if (a.status === 'pending' || a.status === 'confirmed') {
|
||||||
@@ -85,7 +176,6 @@ export default function Index() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (taskRes.status === 'fulfilled') {
|
if (taskRes.status === 'fulfilled') {
|
||||||
for (const t of taskRes.value.data.slice(0, 1)) {
|
for (const t of taskRes.value.data.slice(0, 1)) {
|
||||||
items.push({
|
items.push({
|
||||||
@@ -96,7 +186,6 @@ export default function Index() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setReminders(items.slice(0, 3));
|
setReminders(items.slice(0, 3));
|
||||||
} catch {
|
} catch {
|
||||||
setReminders([]);
|
setReminders([]);
|
||||||
@@ -110,12 +199,7 @@ export default function Index() {
|
|||||||
const displayName = user?.display_name || currentPatient?.name || '访客';
|
const displayName = user?.display_name || currentPatient?.name || '访客';
|
||||||
|
|
||||||
const summary = todaySummary || {};
|
const summary = todaySummary || {};
|
||||||
const indicators = [
|
const indicators = [!!summary.blood_pressure, !!summary.heart_rate, !!summary.blood_sugar, !!summary.weight];
|
||||||
!!summary.blood_pressure,
|
|
||||||
!!summary.heart_rate,
|
|
||||||
!!summary.blood_sugar,
|
|
||||||
!!summary.weight,
|
|
||||||
];
|
|
||||||
const completedCount = indicators.filter(Boolean).length;
|
const completedCount = indicators.filter(Boolean).length;
|
||||||
const progressPercent = Math.round((completedCount / 4) * 100);
|
const progressPercent = Math.round((completedCount / 4) * 100);
|
||||||
|
|
||||||
@@ -140,7 +224,7 @@ export default function Index() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='home-page'>
|
<View className={`home-page ${modeClass}`}>
|
||||||
{/* 问候区 */}
|
{/* 问候区 */}
|
||||||
<View className='greeting-section'>
|
<View className='greeting-section'>
|
||||||
<View className='greeting-left'>
|
<View className='greeting-left'>
|
||||||
@@ -149,20 +233,14 @@ export default function Index() {
|
|||||||
{new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'numeric', weekday: 'short' })}
|
{new Date().toLocaleDateString('zh-CN', { month: 'long', day: 'numeric', weekday: 'short' })}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View
|
<View className='greeting-bell' onClick={() => Taro.switchTab({ url: '/pages/messages/index' })}>
|
||||||
className='greeting-bell'
|
|
||||||
onClick={() => Taro.switchTab({ url: '/pages/messages/index' })}
|
|
||||||
>
|
|
||||||
<Text className='greeting-bell-icon'>消</Text>
|
<Text className='greeting-bell-icon'>消</Text>
|
||||||
{unreadCount > 0 && <View className='greeting-bell-dot' />}
|
{unreadCount > 0 && <View className='greeting-bell-dot' />}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 今日体征进度 */}
|
{/* 今日体征进度 */}
|
||||||
<View
|
<View className='checkin-card' onClick={() => Taro.switchTab({ url: '/pages/health/index' })}>
|
||||||
className='checkin-card'
|
|
||||||
onClick={() => Taro.switchTab({ url: '/pages/health/index' })}
|
|
||||||
>
|
|
||||||
<View className='checkin-left'>
|
<View className='checkin-left'>
|
||||||
<ProgressRing percent={progressPercent} />
|
<ProgressRing percent={progressPercent} />
|
||||||
</View>
|
</View>
|
||||||
@@ -172,10 +250,7 @@ export default function Index() {
|
|||||||
</Text>
|
</Text>
|
||||||
<View className='checkin-capsules'>
|
<View className='checkin-capsules'>
|
||||||
{indicatorCapsules.map((cap) => (
|
{indicatorCapsules.map((cap) => (
|
||||||
<Text
|
<Text key={cap.label} className={`capsule ${cap.done ? 'capsule-done' : 'capsule-pending'}`}>
|
||||||
key={cap.label}
|
|
||||||
className={`capsule ${cap.done ? 'capsule-done' : 'capsule-pending'}`}
|
|
||||||
>
|
|
||||||
{cap.done ? '✓ ' : ''}{cap.label}
|
{cap.done ? '✓ ' : ''}{cap.label}
|
||||||
</Text>
|
</Text>
|
||||||
))}
|
))}
|
||||||
@@ -226,11 +301,8 @@ export default function Index() {
|
|||||||
key={r.id}
|
key={r.id}
|
||||||
className={`reminder-item ${i > 0 ? 'reminder-item-border' : ''}`}
|
className={`reminder-item ${i > 0 ? 'reminder-item-border' : ''}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (r.type === 'appointment') {
|
if (r.type === 'appointment') Taro.navigateTo({ url: '/pages/appointment/index' });
|
||||||
Taro.navigateTo({ url: '/pages/appointment/index' });
|
else if (r.type === 'followup') Taro.navigateTo({ url: `/pages/followup/detail/index?id=${r.id}` });
|
||||||
} else if (r.type === 'followup') {
|
|
||||||
Taro.navigateTo({ url: `/pages/followup/detail/index?id=${r.id}` });
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text className='reminder-tag'>{r.tag}</Text>
|
<Text className='reminder-tag'>{r.tag}</Text>
|
||||||
@@ -243,16 +315,10 @@ export default function Index() {
|
|||||||
|
|
||||||
{/* 快捷操作 */}
|
{/* 快捷操作 */}
|
||||||
<View className='action-section'>
|
<View className='action-section'>
|
||||||
<View
|
<View className='action-btn action-primary' onClick={() => Taro.switchTab({ url: '/pages/health/index' })}>
|
||||||
className='action-btn action-primary'
|
|
||||||
onClick={() => Taro.switchTab({ url: '/pages/health/index' })}
|
|
||||||
>
|
|
||||||
<Text className='action-btn-text'>记录体征</Text>
|
<Text className='action-btn-text'>记录体征</Text>
|
||||||
</View>
|
</View>
|
||||||
<View
|
<View className='action-btn action-outline' onClick={() => Taro.navigateTo({ url: '/pages/appointment/create/index' })}>
|
||||||
className='action-btn action-outline'
|
|
||||||
onClick={() => Taro.navigateTo({ url: '/pages/appointment/create/index' })}
|
|
||||||
>
|
|
||||||
<Text className='action-btn-text'>预约挂号</Text>
|
<Text className='action-btn-text'>预约挂号</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
@@ -260,12 +326,21 @@ export default function Index() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── 首页入口:根据登录状态切换 ───
|
||||||
|
|
||||||
|
export default function Index() {
|
||||||
|
const user = useAuthStore((s) => s.user);
|
||||||
|
const mode = useUIStore((s) => s.mode);
|
||||||
|
const modeClass = mode === 'elder' ? 'elder-mode' : '';
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return <GuestHome modeClass={modeClass} />;
|
||||||
|
}
|
||||||
|
return <HomeDashboard modeClass={modeClass} />;
|
||||||
|
}
|
||||||
|
|
||||||
function buildSuggestionText(s: AiSuggestionItem): string {
|
function buildSuggestionText(s: AiSuggestionItem): string {
|
||||||
const riskMap: Record<string, string> = {
|
const riskMap: Record<string, string> = { high: '高风险', medium: '中风险', low: '低风险' };
|
||||||
high: '高风险',
|
|
||||||
medium: '中风险',
|
|
||||||
low: '低风险',
|
|
||||||
};
|
|
||||||
const typeMap: Record<string, string> = {
|
const typeMap: Record<string, string> = {
|
||||||
vital_sign_anomaly: '体征异常',
|
vital_sign_anomaly: '体征异常',
|
||||||
lab_result_anomaly: '化验异常',
|
lab_result_anomaly: '化验异常',
|
||||||
|
|||||||
@@ -136,3 +136,16 @@
|
|||||||
color: $pri;
|
color: $pri;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── 暂不登录 ─── */
|
||||||
|
.skip-row {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-btn {
|
||||||
|
font-size: 20px;
|
||||||
|
color: $tx3;
|
||||||
|
padding: 8px 16px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -102,6 +102,13 @@ export default function Login() {
|
|||||||
<Text className='agreement-link' onClick={() => Taro.navigateTo({ url: '/pages/legal/privacy-policy' })}>《隐私政策》</Text>
|
<Text className='agreement-link' onClick={() => Taro.navigateTo({ url: '/pages/legal/privacy-policy' })}>《隐私政策》</Text>
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
{/* 暂不登录 */}
|
||||||
|
<View className='skip-row'>
|
||||||
|
<Text className='skip-btn' onClick={() => Taro.reLaunch({ url: '/pages/index/index' })}>
|
||||||
|
暂不登录,先看看
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -4,6 +4,8 @@ import Taro, { useDidShow, useReachBottom } from '@tarojs/taro';
|
|||||||
import { listConsultations, ConsultationSession } from '../../services/consultation';
|
import { listConsultations, ConsultationSession } from '../../services/consultation';
|
||||||
import { notificationService } from '../../services/notification';
|
import { notificationService } from '../../services/notification';
|
||||||
import Loading from '../../components/Loading';
|
import Loading from '../../components/Loading';
|
||||||
|
import GuestGuard from '../../components/GuestGuard';
|
||||||
|
import { useAuthStore } from '../../stores/auth';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
type MsgTab = 'consultation' | 'notification';
|
type MsgTab = 'consultation' | 'notification';
|
||||||
@@ -14,9 +16,19 @@ interface NotificationItem {
|
|||||||
desc: string;
|
desc: string;
|
||||||
time: string;
|
time: string;
|
||||||
type: string;
|
type: string;
|
||||||
|
read?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const NOTIFY_ICONS: Record<string, { icon: string; bg: string; color: string }> = {
|
||||||
|
appointment: { icon: '约', bg: '#F0DDD4', color: '#C4623A' },
|
||||||
|
alert: { icon: '警', bg: '#FFF3E0', color: '#C4873A' },
|
||||||
|
followup: { icon: '随', bg: '#E8F0E8', color: '#5B7A5E' },
|
||||||
|
points: { icon: '分', bg: '#F0DDD4', color: '#C4623A' },
|
||||||
|
report: { icon: '报', bg: '#E8F0E8', color: '#5B7A5E' },
|
||||||
|
};
|
||||||
|
|
||||||
export default function Messages() {
|
export default function Messages() {
|
||||||
|
const user = useAuthStore((s) => s.user);
|
||||||
const [activeTab, setActiveTab] = useState<MsgTab>('consultation');
|
const [activeTab, setActiveTab] = useState<MsgTab>('consultation');
|
||||||
const [sessions, setSessions] = useState<ConsultationSession[]>([]);
|
const [sessions, setSessions] = useState<ConsultationSession[]>([]);
|
||||||
const [notifications, setNotifications] = useState<NotificationItem[]>([]);
|
const [notifications, setNotifications] = useState<NotificationItem[]>([]);
|
||||||
@@ -25,10 +37,6 @@ export default function Messages() {
|
|||||||
const [total, setTotal] = useState(0);
|
const [total, setTotal] = useState(0);
|
||||||
const loadingRef = useRef(false);
|
const loadingRef = useRef(false);
|
||||||
|
|
||||||
useDidShow(() => {
|
|
||||||
loadData(activeTab, 1, true);
|
|
||||||
});
|
|
||||||
|
|
||||||
const loadData = async (tab: MsgTab, pageNum: number = 1, isRefresh = false) => {
|
const loadData = async (tab: MsgTab, pageNum: number = 1, isRefresh = false) => {
|
||||||
if (loadingRef.current) return;
|
if (loadingRef.current) return;
|
||||||
loadingRef.current = true;
|
loadingRef.current = true;
|
||||||
@@ -65,6 +73,10 @@ export default function Messages() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useDidShow(() => {
|
||||||
|
if (user) loadData(activeTab, 1, true);
|
||||||
|
});
|
||||||
|
|
||||||
const handleTabChange = (tab: MsgTab) => {
|
const handleTabChange = (tab: MsgTab) => {
|
||||||
setActiveTab(tab);
|
setActiveTab(tab);
|
||||||
loadData(tab, 1, true);
|
loadData(tab, 1, true);
|
||||||
@@ -89,6 +101,12 @@ export default function Messages() {
|
|||||||
return dateStr.slice(0, 10);
|
return dateStr.slice(0, 10);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return <GuestGuard title='请先登录' desc='登录后即可查看消息和通知' />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const unreadConsultCount = sessions.filter((s) => s.unread_count_patient > 0).length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='messages-page'>
|
<View className='messages-page'>
|
||||||
{/* 页头 */}
|
{/* 页头 */}
|
||||||
@@ -96,87 +114,110 @@ export default function Messages() {
|
|||||||
<Text className='messages-title'>消息</Text>
|
<Text className='messages-title'>消息</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* Tab 切换 */}
|
{/* 分段控件 Tab */}
|
||||||
<View className='msg-tabs'>
|
<View className='msg-segment'>
|
||||||
<View
|
<View
|
||||||
className={`msg-tab ${activeTab === 'consultation' ? 'msg-tab-active' : ''}`}
|
className={`msg-segment-tab ${activeTab === 'consultation' ? 'msg-segment-active' : ''}`}
|
||||||
onClick={() => handleTabChange('consultation')}
|
onClick={() => handleTabChange('consultation')}
|
||||||
>
|
>
|
||||||
<Text className='msg-tab-text'>咨询</Text>
|
<Text className='msg-segment-text'>咨询</Text>
|
||||||
|
{unreadConsultCount > 0 && (
|
||||||
|
<View className='msg-segment-badge'>
|
||||||
|
<Text className='msg-segment-badge-text'>{unreadConsultCount}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
</View>
|
</View>
|
||||||
<View
|
<View
|
||||||
className={`msg-tab ${activeTab === 'notification' ? 'msg-tab-active' : ''}`}
|
className={`msg-segment-tab ${activeTab === 'notification' ? 'msg-segment-active' : ''}`}
|
||||||
onClick={() => handleTabChange('notification')}
|
onClick={() => handleTabChange('notification')}
|
||||||
>
|
>
|
||||||
<Text className='msg-tab-text'>通知</Text>
|
<Text className='msg-segment-text'>通知</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className='msg-tab-indicator'>
|
|
||||||
<View className={`msg-tab-bar ${activeTab === 'notification' ? 'msg-tab-bar-right' : ''}`} />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 咨询列表 */}
|
<View className='msg-content'>
|
||||||
{activeTab === 'consultation' && (
|
{/* 咨询列表 */}
|
||||||
<View className='msg-content'>
|
{activeTab === 'consultation' && (
|
||||||
{loading ? (
|
loading ? (
|
||||||
<Loading />
|
<Loading />
|
||||||
) : sessions.length === 0 ? (
|
) : sessions.length === 0 ? (
|
||||||
<View className='msg-empty'>
|
<View className='msg-empty'>
|
||||||
<Text className='msg-empty-text'>暂无咨询消息</Text>
|
<Text className='msg-empty-text'>暂无咨询消息</Text>
|
||||||
</View>
|
</View>
|
||||||
) : (
|
) : (
|
||||||
sessions.map((session) => (
|
<View className='msg-list'>
|
||||||
<View
|
{sessions.map((session) => {
|
||||||
key={session.id}
|
const doctorName = session.last_message?.slice(0, 1) || '医';
|
||||||
className='consult-card'
|
const hasUnread = session.unread_count_patient > 0;
|
||||||
onClick={() => Taro.navigateTo({ url: `/pages/consultation/detail/index?id=${session.id}` })}
|
return (
|
||||||
>
|
<View
|
||||||
<View className='consult-info'>
|
key={session.id}
|
||||||
<Text className='consult-doctor'>
|
className={`consult-card ${hasUnread ? '' : 'consult-card-muted'}`}
|
||||||
{session.consultation_type === 'online' ? '在线咨询' : '门诊咨询'}
|
onClick={() => Taro.navigateTo({ url: `/pages/consultation/detail/index?id=${session.id}` })}
|
||||||
</Text>
|
>
|
||||||
<Text className='consult-preview'>
|
<View className={`consult-avatar ${hasUnread ? 'consult-avatar-active' : ''}`}>
|
||||||
{session.last_message || session.subject || '暂无消息'}
|
<Text className='consult-avatar-char'>{doctorName}</Text>
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<View className='consult-meta'>
|
|
||||||
<Text className='consult-time'>{formatTime(session.last_message_at)}</Text>
|
|
||||||
{session.unread_count_patient > 0 && (
|
|
||||||
<View className='consult-badge'>
|
|
||||||
<Text className='consult-badge-text'>
|
|
||||||
{session.unread_count_patient > 99 ? '99+' : session.unread_count_patient}
|
|
||||||
</Text>
|
|
||||||
</View>
|
</View>
|
||||||
)}
|
<View className='consult-body'>
|
||||||
</View>
|
<View className='consult-row'>
|
||||||
</View>
|
<Text className='consult-doctor'>
|
||||||
))
|
{session.consultation_type === 'online' ? '在线咨询' : '门诊咨询'}
|
||||||
)}
|
</Text>
|
||||||
</View>
|
<Text className='consult-time'>{formatTime(session.last_message_at)}</Text>
|
||||||
)}
|
</View>
|
||||||
|
<View className='consult-row'>
|
||||||
|
<Text className='consult-preview'>
|
||||||
|
{session.last_message || session.subject || '暂无消息'}
|
||||||
|
</Text>
|
||||||
|
{hasUnread && (
|
||||||
|
<View className='consult-badge'>
|
||||||
|
<Text className='consult-badge-text'>
|
||||||
|
{session.unread_count_patient > 99 ? '99+' : session.unread_count_patient}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
{/* 通知列表 */}
|
{/* 通知列表 */}
|
||||||
{activeTab === 'notification' && (
|
{activeTab === 'notification' && (
|
||||||
<View className='msg-content'>
|
loading ? (
|
||||||
{loading ? (
|
|
||||||
<Loading />
|
<Loading />
|
||||||
) : notifications.length === 0 ? (
|
) : notifications.length === 0 ? (
|
||||||
<View className='msg-empty'>
|
<View className='msg-empty'>
|
||||||
<Text className='msg-empty-text'>暂无新通知</Text>
|
<Text className='msg-empty-text'>暂无新通知</Text>
|
||||||
</View>
|
</View>
|
||||||
) : (
|
) : (
|
||||||
notifications.map((n) => (
|
<View className='msg-list'>
|
||||||
<View key={n.id} className='notify-card'>
|
{notifications.map((n) => {
|
||||||
<View className='notify-info'>
|
const cfg = NOTIFY_ICONS[n.type] || NOTIFY_ICONS.report;
|
||||||
<Text className='notify-title'>{n.title}</Text>
|
const isUnread = !n.read;
|
||||||
<Text className='notify-desc'>{n.desc}</Text>
|
return (
|
||||||
</View>
|
<View key={n.id} className={`notify-card ${isUnread ? '' : 'notify-card-muted'}`}>
|
||||||
<Text className='notify-time'>{n.time}</Text>
|
<View className='notify-icon' style={`background:${cfg.bg};`}>
|
||||||
</View>
|
<Text className='notify-icon-char' style={`color:${cfg.color};`}>{cfg.icon}</Text>
|
||||||
))
|
</View>
|
||||||
)}
|
<View className='notify-body'>
|
||||||
</View>
|
<View className='notify-row'>
|
||||||
)}
|
<Text className={`notify-title ${isUnread ? 'notify-title-bold' : ''}`}>{n.title}</Text>
|
||||||
|
<Text className='notify-time'>{n.time}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='notify-desc'>{n.desc}</Text>
|
||||||
|
</View>
|
||||||
|
{isUnread && <View className='notify-dot' />}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
132
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss
Normal file
132
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
@import '../../../styles/variables.scss';
|
||||||
|
@import '../../../styles/mixins.scss';
|
||||||
|
|
||||||
|
.elder-mode-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: $bg;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-card {
|
||||||
|
background: $card;
|
||||||
|
border-radius: $r;
|
||||||
|
padding: 24px;
|
||||||
|
box-shadow: $shadow-md;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: $r-sm;
|
||||||
|
background: $acc-l;
|
||||||
|
@include flex-center;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $acc;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $tx;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: $tx3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px 0 0;
|
||||||
|
border-top: 1px solid $bd-l;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-status-text {
|
||||||
|
font-size: 15px;
|
||||||
|
color: $tx2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-switch {
|
||||||
|
width: 52px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
background: $bd;
|
||||||
|
position: relative;
|
||||||
|
transition: background 0.25s;
|
||||||
|
|
||||||
|
&--on {
|
||||||
|
background: $acc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-switch-thumb {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 13px;
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: 2px;
|
||||||
|
transition: transform 0.25s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
.elder-mode-switch--on & {
|
||||||
|
transform: translateX(22px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 效果预览 ─── */
|
||||||
|
.elder-mode-preview {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-preview-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $tx2;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-preview-card {
|
||||||
|
background: $card;
|
||||||
|
border-radius: $r;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: $shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-preview-sample {
|
||||||
|
font-size: 16px;
|
||||||
|
color: $tx;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
transition: font-size 0.25s;
|
||||||
|
|
||||||
|
&--large {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.elder-mode-preview-note {
|
||||||
|
font-size: 13px;
|
||||||
|
color: $tx3;
|
||||||
|
}
|
||||||
58
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.tsx
Normal file
58
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.tsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import { View, Text } from '@tarojs/components';
|
||||||
|
import Taro from '@tarojs/taro';
|
||||||
|
import { useUIStore } from '../../../stores/ui';
|
||||||
|
import './index.scss';
|
||||||
|
|
||||||
|
export default function ElderMode() {
|
||||||
|
const mode = useUIStore((s) => s.mode);
|
||||||
|
const setMode = useUIStore((s) => s.setMode);
|
||||||
|
const isElder = mode === 'elder';
|
||||||
|
|
||||||
|
const handleToggle = () => {
|
||||||
|
const next = isElder ? 'normal' : 'elder';
|
||||||
|
setMode(next);
|
||||||
|
Taro.showToast({
|
||||||
|
title: next === 'elder' ? '已开启长辈模式' : '已关闭长辈模式',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className='elder-mode-page'>
|
||||||
|
<View className='elder-mode-card'>
|
||||||
|
<View className='elder-mode-header'>
|
||||||
|
<Text className='elder-mode-icon'>老</Text>
|
||||||
|
<View className='elder-mode-info'>
|
||||||
|
<Text className='elder-mode-title'>长辈模式</Text>
|
||||||
|
<Text className='elder-mode-desc'>放大字体和按钮,更易阅读和操作</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className='elder-mode-status'>
|
||||||
|
<Text className='elder-mode-status-text'>
|
||||||
|
当前状态:{isElder ? '已开启' : '已关闭'}
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
className={`elder-mode-switch ${isElder ? 'elder-mode-switch--on' : ''}`}
|
||||||
|
onClick={handleToggle}
|
||||||
|
>
|
||||||
|
<View className='elder-mode-switch-thumb' />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className='elder-mode-preview'>
|
||||||
|
<Text className='elder-mode-preview-title'>效果预览</Text>
|
||||||
|
<View className='elder-mode-preview-card'>
|
||||||
|
<Text className={`elder-mode-preview-sample ${isElder ? 'elder-mode-preview-sample--large' : ''}`}>
|
||||||
|
{isElder ? '长辈模式字体示例' : '标准模式字体示例'}
|
||||||
|
</Text>
|
||||||
|
<Text className='elder-mode-preview-note'>
|
||||||
|
{isElder ? '字号放大 1.3 倍,间距放大 1.2 倍' : '正常字号和间距'}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
.profile-page {
|
.profile-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
padding: 20px 16px 100px;
|
padding: 20px 24px 100px;
|
||||||
padding-bottom: calc(100px + env(safe-area-inset-bottom));
|
padding-bottom: calc(100px + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -12,25 +12,28 @@
|
|||||||
.profile-user-card {
|
.profile-user-card {
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
padding: 16px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 14px;
|
gap: 16px;
|
||||||
box-shadow: $shadow-sm;
|
box-shadow: $shadow-md;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-avatar {
|
.profile-avatar {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
background: $pri-l;
|
background: linear-gradient(135deg, $pri-l 0%, $pri 100%);
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-avatar-icon {
|
.profile-avatar-char {
|
||||||
|
font-family: Georgia, 'Times New Roman', serif;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-user-info {
|
.profile-user-info {
|
||||||
@@ -39,6 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.profile-name {
|
.profile-name {
|
||||||
|
@include serif-number;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
@@ -51,11 +55,17 @@
|
|||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 积分 + 打卡并排 ─── */
|
.profile-arrow {
|
||||||
|
font-size: 16px;
|
||||||
|
color: $tx3;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── 积分 + 打卡 ─── */
|
||||||
.profile-stats-row {
|
.profile-stats-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card {
|
.stat-card {
|
||||||
@@ -69,10 +79,10 @@
|
|||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
@include serif-number;
|
@include serif-number;
|
||||||
font-size: 24px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 2px;
|
||||||
|
|
||||||
&.stat-pri {
|
&.stat-pri {
|
||||||
color: $pri;
|
color: $pri;
|
||||||
@@ -83,13 +93,31 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stat-unit {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: $tx3;
|
color: $tx3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── 菜单 ─── */
|
/* ─── 分组菜单 ─── */
|
||||||
.profile-menu {
|
.menu-group {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-group-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $tx2;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-group-card {
|
||||||
background: $card;
|
background: $card;
|
||||||
border-radius: $r;
|
border-radius: $r;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -100,22 +128,27 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
padding: 18px 16px;
|
padding: 14px 16px;
|
||||||
border-bottom: 1px solid $bd;
|
position: relative;
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: $bd-l;
|
background: $bd-l;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-divider {
|
||||||
|
position: absolute;
|
||||||
|
left: 66px;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: $bd-l;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
width: 40px;
|
width: 36px;
|
||||||
height: 40px;
|
height: 36px;
|
||||||
border-radius: 12px;
|
border-radius: $r-sm;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
@@ -133,15 +166,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon-text {
|
.menu-icon-text {
|
||||||
font-family: Georgia, Times New Roman, serif;
|
@include serif-number;
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: $pri-d;
|
|
||||||
|
&.menu-icon-text--pri {
|
||||||
|
color: $pri;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.menu-icon-text--acc {
|
||||||
|
color: $acc;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.menu-icon-text--tx3 {
|
||||||
|
color: $tx3;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-label {
|
.menu-label {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
color: $tx;
|
color: $tx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -153,8 +197,9 @@
|
|||||||
|
|
||||||
/* ─── 退出登录 ─── */
|
/* ─── 退出登录 ─── */
|
||||||
.profile-logout {
|
.profile-logout {
|
||||||
margin-top: 24px;
|
margin-top: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding: 16px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-text {
|
.logout-text {
|
||||||
|
|||||||
@@ -1,51 +1,96 @@
|
|||||||
import React from 'react';
|
|
||||||
import { View, Text } from '@tarojs/components';
|
import { View, Text } from '@tarojs/components';
|
||||||
import Taro, { useDidShow } from '@tarojs/taro';
|
import Taro, { useDidShow } from '@tarojs/taro';
|
||||||
import { useAuthStore } from '../../stores/auth';
|
import { useAuthStore } from '../../stores/auth';
|
||||||
import { usePointsStore } from '../../stores/points';
|
import { usePointsStore } from '../../stores/points';
|
||||||
|
import { useUIStore } from '../../stores/ui';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
const MENU_ITEMS = [
|
interface MenuItem {
|
||||||
{ label: '就诊人管理', icon: '家', bg: 'pri-l' },
|
label: string;
|
||||||
{ label: '我的报告', icon: '报', bg: 'acc-l' },
|
icon: string;
|
||||||
{ label: '健康记录', icon: '健', bg: 'pri-l' },
|
bg: string;
|
||||||
{ label: '诊断记录', icon: '诊', bg: 'acc-l' },
|
color: string;
|
||||||
{ label: '我的随访', icon: '随', bg: 'pri-l' },
|
path: string;
|
||||||
{ label: '我的预约', icon: '约', bg: 'acc-l' },
|
isSwitchTab?: boolean;
|
||||||
{ label: '用药记录', icon: '药', bg: 'pri-l' },
|
}
|
||||||
{ label: '透析记录', icon: '透', bg: 'acc-l' },
|
|
||||||
{ label: '知情同意', icon: '知', bg: 'pri-l' },
|
interface MenuGroup {
|
||||||
{ label: '线下活动', icon: '活', bg: 'acc-l' },
|
title: string;
|
||||||
{ label: '在线咨询', icon: '问', bg: 'pri-l' },
|
items: MenuItem[];
|
||||||
{ label: '设置', icon: '设', bg: 'surface-alt' },
|
}
|
||||||
|
|
||||||
|
const LOGGED_IN_GROUPS: MenuGroup[] = [
|
||||||
|
{
|
||||||
|
title: '健康管理',
|
||||||
|
items: [
|
||||||
|
{ label: '健康记录', icon: '健', bg: 'pri-l', color: 'pri', path: '/pages/pkg-profile/health-records/index' },
|
||||||
|
{ label: '我的报告', icon: '报', bg: 'acc-l', color: 'acc', path: '/pages/pkg-profile/reports/index' },
|
||||||
|
{ label: 'AI 分析', icon: '智', bg: 'pri-l', color: 'pri', path: '/pages/ai-report/list/index' },
|
||||||
|
{ label: '诊断记录', icon: '诊', bg: 'acc-l', color: 'acc', path: '/pages/pkg-profile/diagnoses/index' },
|
||||||
|
{ label: '用药记录', icon: '药', bg: 'pri-l', color: 'pri', path: '/pages/pkg-profile/medication/index' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '就诊服务',
|
||||||
|
items: [
|
||||||
|
{ label: '我的预约', icon: '约', bg: 'pri-l', color: 'pri', path: '/pages/appointment/index' },
|
||||||
|
{ label: '我的随访', icon: '随', bg: 'acc-l', color: 'acc', path: '/pages/pkg-profile/followups/index' },
|
||||||
|
{ label: '在线咨询', icon: '问', bg: 'pri-l', color: 'pri', path: '/pages/consultation/index' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '透析管理',
|
||||||
|
items: [
|
||||||
|
{ label: '透析记录', icon: '透', bg: 'pri-l', color: 'pri', path: '/pages/pkg-profile/dialysis-records/index' },
|
||||||
|
{ label: '透析处方', icon: '方', bg: 'acc-l', color: 'acc', path: '/pages/pkg-profile/dialysis-prescriptions/index' },
|
||||||
|
{ label: '知情同意', icon: '知', bg: 'pri-l', color: 'pri', path: '/pages/pkg-profile/consents/index' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '生活服务',
|
||||||
|
items: [
|
||||||
|
{ label: '积分商城', icon: '礼', bg: 'pri-l', color: 'pri', path: '/pages/mall/index', isSwitchTab: true },
|
||||||
|
{ label: '线下活动', icon: '活', bg: 'acc-l', color: 'acc', path: '/pages/events/index' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '账号',
|
||||||
|
items: [
|
||||||
|
{ label: '就诊人管理', icon: '家', bg: 'pri-l', color: 'pri', path: '/pages/pkg-profile/family/index' },
|
||||||
|
{ label: '长辈模式', icon: '老', bg: 'acc-l', color: 'acc', path: '/pages/pkg-profile/elder-mode/index' },
|
||||||
|
{ label: '设备同步', icon: '设', bg: 'surface-alt', color: 'tx3', path: '/pages/device-sync/index' },
|
||||||
|
{ label: '设置', icon: '齿', bg: 'surface-alt', color: 'tx3', path: '/pages/pkg-profile/settings/index' },
|
||||||
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const MENU_PATHS: Record<string, string> = {
|
const GUEST_GROUPS: MenuGroup[] = [
|
||||||
'就诊人管理': '/pages/pkg-profile/family/index',
|
{
|
||||||
'我的报告': '/pages/pkg-profile/reports/index',
|
title: '设置',
|
||||||
'健康记录': '/pages/pkg-profile/health-records/index',
|
items: [
|
||||||
'诊断记录': '/pages/pkg-profile/diagnoses/index',
|
{ label: '长辈模式', icon: '老', bg: 'acc-l', color: 'acc', path: '/pages/pkg-profile/elder-mode/index' },
|
||||||
'我的随访': '/pages/pkg-profile/followups/index',
|
{ label: '设置', icon: '齿', bg: 'surface-alt', color: 'tx3', path: '/pages/pkg-profile/settings/index' },
|
||||||
'我的预约': '/pages/appointment/index',
|
],
|
||||||
'用药记录': '/pages/pkg-profile/medication/index',
|
},
|
||||||
'透析记录': '/pages/pkg-profile/dialysis-records/index',
|
];
|
||||||
'知情同意': '/pages/pkg-profile/consents/index',
|
|
||||||
'线下活动': '/pages/events/index',
|
|
||||||
'在线咨询': '/pages/consultation/index',
|
|
||||||
'设置': '/pages/pkg-profile/settings/index',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Profile() {
|
export default function Profile() {
|
||||||
const { user, logout } = useAuthStore();
|
const { user, logout } = useAuthStore();
|
||||||
const { account: pointsAccount, checkinStatus: checkinInfo, refresh: refreshPoints } = usePointsStore();
|
const { account: pointsAccount, checkinStatus: checkinInfo, refresh: refreshPoints } = usePointsStore();
|
||||||
|
const mode = useUIStore((s) => s.mode);
|
||||||
|
const modeClass = mode === 'elder' ? 'elder-mode' : '';
|
||||||
|
const isGuest = !user;
|
||||||
|
|
||||||
useDidShow(() => {
|
useDidShow(() => {
|
||||||
refreshPoints();
|
if (!isGuest) refreshPoints();
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleMenuClick = (label: string) => {
|
const handleMenuClick = (item: MenuItem) => {
|
||||||
const path = MENU_PATHS[label];
|
if (item.isSwitchTab) {
|
||||||
if (path) Taro.navigateTo({ url: path });
|
Taro.switchTab({ url: item.path });
|
||||||
|
} else {
|
||||||
|
Taro.navigateTo({ url: item.path });
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
@@ -59,54 +104,84 @@ export default function Profile() {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const groups = isGuest ? GUEST_GROUPS : LOGGED_IN_GROUPS;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='profile-page'>
|
<View className={`profile-page ${modeClass}`}>
|
||||||
{/* 用户信息卡片 */}
|
{/* 用户信息卡片 */}
|
||||||
<View className='profile-user-card'>
|
{isGuest ? (
|
||||||
<View className='profile-avatar'>
|
<View className='profile-user-card' onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}>
|
||||||
<Text className='profile-avatar-icon'>
|
<View className='profile-avatar profile-avatar--guest'>
|
||||||
{(user?.display_name || '访').charAt(0)}
|
<Text className='profile-avatar-char'>?</Text>
|
||||||
</Text>
|
</View>
|
||||||
</View>
|
<View className='profile-user-info'>
|
||||||
<View className='profile-user-info'>
|
<Text className='profile-name'>未登录</Text>
|
||||||
<Text className='profile-name'>{user?.display_name || '未登录'}</Text>
|
<Text className='profile-phone'>点击登录,开启健康管理之旅</Text>
|
||||||
<Text className='profile-phone'>{user?.phone || ''}</Text>
|
</View>
|
||||||
</View>
|
<Text className='profile-arrow'>›</Text>
|
||||||
</View>
|
</View>
|
||||||
|
) : (
|
||||||
{/* 积分 + 打卡 — 两个独立卡片并排 */}
|
<>
|
||||||
<View className='profile-stats-row'>
|
<View className='profile-user-card'>
|
||||||
<View className='stat-card'>
|
<View className='profile-avatar'>
|
||||||
<Text className='stat-value stat-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
|
<Text className='profile-avatar-char'>{(user?.display_name || '访').charAt(0)}</Text>
|
||||||
<Text className='stat-label'>健康积分</Text>
|
</View>
|
||||||
</View>
|
<View className='profile-user-info'>
|
||||||
<View className='stat-card'>
|
<Text className='profile-name'>{user?.display_name || '访客'}</Text>
|
||||||
<Text className='stat-value stat-acc'>{checkinInfo?.consecutive_days ?? 0}天</Text>
|
<Text className='profile-phone'>
|
||||||
<Text className='stat-label'>连续打卡</Text>
|
{user?.phone ? `${user.phone.slice(0, 3)}****${user.phone.slice(-4)}` : ''}
|
||||||
</View>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
<Text className='profile-arrow'>›</Text>
|
||||||
{/* 菜单 */}
|
|
||||||
<View className='profile-menu'>
|
|
||||||
{MENU_ITEMS.map((item) => (
|
|
||||||
<View
|
|
||||||
className='menu-item'
|
|
||||||
key={item.label}
|
|
||||||
onClick={() => handleMenuClick(item.label)}
|
|
||||||
>
|
|
||||||
<View className={`menu-icon menu-icon--${item.bg}`}>
|
|
||||||
<Text className='menu-icon-text'>{item.icon}</Text>
|
|
||||||
</View>
|
|
||||||
<Text className='menu-label'>{item.label}</Text>
|
|
||||||
<Text className='menu-arrow'>›</Text>
|
|
||||||
</View>
|
</View>
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 退出登录 */}
|
{/* 积分 + 打卡 */}
|
||||||
<View className='profile-logout' onClick={handleLogout}>
|
<View className='profile-stats-row'>
|
||||||
<Text className='logout-text'>退出登录</Text>
|
<View className='stat-card'>
|
||||||
</View>
|
<Text className='stat-value stat-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
|
||||||
|
<Text className='stat-label'>健康积分</Text>
|
||||||
|
</View>
|
||||||
|
<View className='stat-card'>
|
||||||
|
<Text className='stat-value stat-acc'>{checkinInfo?.consecutive_days ?? 0}<Text className='stat-unit'>天</Text></Text>
|
||||||
|
<Text className='stat-label'>连续打卡</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 分组菜单 */}
|
||||||
|
{groups.map((group) => (
|
||||||
|
<View className='menu-group' key={group.title}>
|
||||||
|
<Text className='menu-group-title'>{group.title}</Text>
|
||||||
|
<View className='menu-group-card'>
|
||||||
|
{group.items.map((item, idx) => (
|
||||||
|
<View
|
||||||
|
className='menu-item'
|
||||||
|
key={item.label}
|
||||||
|
onClick={() => handleMenuClick(item)}
|
||||||
|
>
|
||||||
|
<View className={`menu-icon menu-icon--${item.bg}`}>
|
||||||
|
<Text className={`menu-icon-text menu-icon-text--${item.color}`}>{item.icon}</Text>
|
||||||
|
</View>
|
||||||
|
<Text className='menu-label'>{item.label}</Text>
|
||||||
|
{idx < group.items.length - 1 && <View className='menu-divider' />}
|
||||||
|
<Text className='menu-arrow'>›</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* 退出登录 / 登录 */}
|
||||||
|
{isGuest ? (
|
||||||
|
<View className='profile-logout' onClick={() => Taro.navigateTo({ url: '/pages/login/index' })}>
|
||||||
|
<Text className='logout-text logout-text--pri'>登录账号</Text>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View className='profile-logout' onClick={handleLogout}>
|
||||||
|
<Text className='logout-text'>退出登录</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -65,12 +65,12 @@ async function doRefresh(): Promise<boolean> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// --- Core request ---
|
// --- Core request ---
|
||||||
async function request<T>(method: string, path: string, data?: unknown): Promise<T> {
|
async function request<T>(method: string, path: string, data?: unknown, timeout?: number): Promise<T> {
|
||||||
const headers = await getHeaders();
|
const headers = await getHeaders();
|
||||||
const url = `${BASE_URL}${path}`;
|
const url = `${BASE_URL}${path}`;
|
||||||
let res: Taro.request.SuccessCallbackResult;
|
let res: Taro.request.SuccessCallbackResult;
|
||||||
try {
|
try {
|
||||||
res = await Taro.request({ url, method: method as any, data, header: headers, timeout: 15000 });
|
res = await Taro.request({ url, method: method as any, data, header: headers, timeout: timeout || 15000 });
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
const msg = err?.errMsg || '';
|
const msg = err?.errMsg || '';
|
||||||
if (msg.includes('timeout')) {
|
if (msg.includes('timeout')) {
|
||||||
@@ -82,12 +82,15 @@ async function request<T>(method: string, path: string, data?: unknown): Promise
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (res.statusCode === 401) {
|
if (res.statusCode === 401) {
|
||||||
const refreshed = await tryRefreshToken();
|
const hasToken = !!safeGet('access_token');
|
||||||
if (refreshed) return request<T>(method, path, data);
|
if (hasToken) {
|
||||||
const pages = Taro.getCurrentPages();
|
const refreshed = await tryRefreshToken();
|
||||||
const currentPath = pages[pages.length - 1]?.path || '';
|
if (refreshed) return request<T>(method, path, data);
|
||||||
if (!currentPath.includes('pages/login')) {
|
const pages = Taro.getCurrentPages();
|
||||||
Taro.reLaunch({ url: '/pages/login/index' });
|
const currentPath = pages[pages.length - 1]?.path || '';
|
||||||
|
if (!currentPath.includes('pages/login')) {
|
||||||
|
Taro.reLaunch({ url: '/pages/index/index' });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
throw new Error('登录已过期');
|
throw new Error('登录已过期');
|
||||||
}
|
}
|
||||||
@@ -172,3 +175,7 @@ export const api = {
|
|||||||
put: <T>(path: string, data?: unknown) => request<T>('PUT', path, data),
|
put: <T>(path: string, data?: unknown) => request<T>('PUT', path, data),
|
||||||
delete: <T>(path: string, data?: unknown) => request<T>('DELETE', path, data),
|
delete: <T>(path: string, data?: unknown) => request<T>('DELETE', path, data),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export async function requestWithTimeout<T>(method: string, path: string, data?: unknown, timeout?: number): Promise<T> {
|
||||||
|
return request<T>(method, path, data, timeout);
|
||||||
|
}
|
||||||
|
|||||||
@@ -166,6 +166,6 @@ export const useAuthStore = create<AuthState>((set, get) => ({
|
|||||||
Taro.removeStorageSync('analytics_queue');
|
Taro.removeStorageSync('analytics_queue');
|
||||||
Taro.removeStorageSync('edit_patient');
|
Taro.removeStorageSync('edit_patient');
|
||||||
set({ user: null, roles: [], currentPatient: null, patients: [] });
|
set({ user: null, roles: [], currentPatient: null, patients: [] });
|
||||||
Taro.redirectTo({ url: '/pages/login/index' });
|
Taro.reLaunch({ url: '/pages/index/index' });
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
37
apps/miniprogram/src/stores/ui.ts
Normal file
37
apps/miniprogram/src/stores/ui.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
import Taro from '@tarojs/taro';
|
||||||
|
|
||||||
|
type DisplayMode = 'normal' | 'elder';
|
||||||
|
|
||||||
|
interface UIState {
|
||||||
|
mode: DisplayMode;
|
||||||
|
toggle: () => void;
|
||||||
|
setMode: (mode: DisplayMode) => void;
|
||||||
|
restore: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'ui_display_mode';
|
||||||
|
|
||||||
|
export const useUIStore = create<UIState>((set, get) => ({
|
||||||
|
mode: 'normal',
|
||||||
|
|
||||||
|
toggle: () => {
|
||||||
|
const next = get().mode === 'normal' ? 'elder' : 'normal';
|
||||||
|
Taro.setStorageSync(STORAGE_KEY, next);
|
||||||
|
set({ mode: next });
|
||||||
|
},
|
||||||
|
|
||||||
|
setMode: (mode) => {
|
||||||
|
Taro.setStorageSync(STORAGE_KEY, mode);
|
||||||
|
set({ mode });
|
||||||
|
},
|
||||||
|
|
||||||
|
restore: () => {
|
||||||
|
try {
|
||||||
|
const saved = Taro.getStorageSync(STORAGE_KEY);
|
||||||
|
if (saved === 'elder' || saved === 'normal') {
|
||||||
|
set({ mode: saved });
|
||||||
|
}
|
||||||
|
} catch { /* storage 不可用时保持默认 */ }
|
||||||
|
},
|
||||||
|
}));
|
||||||
173
apps/miniprogram/src/styles/elder-mode.scss
Normal file
173
apps/miniprogram/src/styles/elder-mode.scss
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
// 长辈模式 CSS 覆写
|
||||||
|
// 字号 ×1.3 / 间距 ×1.2 / 按钮 48→60px
|
||||||
|
// 通过页面根 View 添加 .elder-mode class 激活
|
||||||
|
|
||||||
|
.elder-mode {
|
||||||
|
font-size: 36px; // 28 × 1.3
|
||||||
|
|
||||||
|
// ─── 全局触控放大 ───
|
||||||
|
.vital-card,
|
||||||
|
.checkin-card,
|
||||||
|
.reminder-item,
|
||||||
|
.menu-item,
|
||||||
|
.action-btn {
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn-text {
|
||||||
|
font-size: 22px; // 17 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 首页 ───
|
||||||
|
.greeting-text {
|
||||||
|
font-size: 34px; // 26 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkin-title {
|
||||||
|
font-size: 21px; // 16 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.vital-label {
|
||||||
|
font-size: 17px; // 13 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.vital-value {
|
||||||
|
font-size: 39px; // 30 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.vital-tag {
|
||||||
|
font-size: 14px; // 11 × 1.3
|
||||||
|
padding: 3px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capsule {
|
||||||
|
font-size: 14px; // 11 × 1.3
|
||||||
|
padding: 4px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reminder-title {
|
||||||
|
font-size: 20px; // 15 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.reminder-text {
|
||||||
|
font-size: 17px; // 13 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 34px; // 26 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 个人页 ───
|
||||||
|
.profile-name {
|
||||||
|
font-size: 29px; // 22 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 36px; // 28 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 17px; // 13 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-group-title {
|
||||||
|
font-size: 18px; // 14 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-label {
|
||||||
|
font-size: 20px; // 15 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon-text {
|
||||||
|
font-size: 21px; // 16 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-text {
|
||||||
|
font-size: 18px; // 14 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 访客首页 ───
|
||||||
|
.guest-slide-title {
|
||||||
|
font-size: 34px; // 26 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-slide-desc {
|
||||||
|
font-size: 21px; // 16 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-article-title {
|
||||||
|
font-size: 21px; // 16 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-article-summary {
|
||||||
|
font-size: 17px; // 13 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-login-btn {
|
||||||
|
height: 72px; // 56 × 1.3
|
||||||
|
font-size: 26px; // 20 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-institution-name {
|
||||||
|
font-size: 21px; // 16 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-institution-desc {
|
||||||
|
font-size: 17px; // 13 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 登录页 ───
|
||||||
|
.login-title {
|
||||||
|
font-size: 62px; // 48 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
font-size: 34px; // 26 × 1.3
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
height: 108px; // 96 × 1.13
|
||||||
|
font-size: 36px; // 32 × 1.13
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-btn {
|
||||||
|
font-size: 26px; // 20 × 1.3
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 间距放大 ×1.2 ───
|
||||||
|
.vitals-grid {
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkin-card {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reminder-card {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page,
|
||||||
|
.guest-page {
|
||||||
|
padding: 24px 28px 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-page {
|
||||||
|
padding: 24px 28px 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
padding: 17px 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
62
scripts/mpsync.ps1
Normal file
62
scripts/mpsync.ps1
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
# MPSync — auto clean stale DevTools + open automation port
|
||||||
|
# Usage: powershell -File scripts/mpsync.ps1 [-Build]
|
||||||
|
param([switch]$Build)
|
||||||
|
|
||||||
|
$Port = 9420
|
||||||
|
|
||||||
|
Write-Host "[MPSync] Step 1: Kill stale DevTools processes..." -ForegroundColor Cyan
|
||||||
|
$procs = Get-Process -Name "wechatdevtools" -ErrorAction SilentlyContinue
|
||||||
|
if ($null -ne $procs) {
|
||||||
|
Write-Host "[MPSync] Found $($procs.Count) stale processes, killing..." -ForegroundColor Yellow
|
||||||
|
Stop-Process -Name "wechatdevtools" -Force -ErrorAction SilentlyContinue
|
||||||
|
Start-Sleep -Seconds 5
|
||||||
|
$left = Get-Process -Name "wechatdevtools" -ErrorAction SilentlyContinue
|
||||||
|
if ($null -ne $left) {
|
||||||
|
Write-Host "[MPSync] Still $($left.Count) remaining, second attempt..." -ForegroundColor Yellow
|
||||||
|
Stop-Process -Name "wechatdevtools" -Force -ErrorAction SilentlyContinue
|
||||||
|
Start-Sleep -Seconds 3
|
||||||
|
}
|
||||||
|
Write-Host "[MPSync] Cleanup done" -ForegroundColor Green
|
||||||
|
} else {
|
||||||
|
Write-Host "[MPSync] No stale processes" -ForegroundColor Green
|
||||||
|
}
|
||||||
|
|
||||||
|
Start-Sleep -Seconds 2
|
||||||
|
|
||||||
|
# Optional build
|
||||||
|
if ($Build) {
|
||||||
|
Write-Host "[MPSync] Building miniprogram..." -ForegroundColor Cyan
|
||||||
|
Set-Location "G:\hms\apps\miniprogram"
|
||||||
|
pnpm build:weapp 2>&1 | Select-Object -Last 3
|
||||||
|
Write-Host "[MPSync] Build done" -ForegroundColor Green
|
||||||
|
}
|
||||||
|
|
||||||
|
# Open DevTools with project
|
||||||
|
$DevToolsExe = "D:\微信web开发者工具\微信web开发者工具.exe"
|
||||||
|
$DistPath = "G:\hms\apps\miniprogram\dist"
|
||||||
|
|
||||||
|
$running = Get-Process -Name "wechatdevtools" -ErrorAction SilentlyContinue
|
||||||
|
if ($null -eq $running) {
|
||||||
|
Write-Host "[MPSync] Starting DevTools..." -ForegroundColor Cyan
|
||||||
|
Start-Process $DevToolsExe -ArgumentList $DistPath
|
||||||
|
Write-Host "[MPSync] Waiting for DevTools to initialize..." -ForegroundColor Cyan
|
||||||
|
Start-Sleep -Seconds 15
|
||||||
|
} else {
|
||||||
|
Write-Host "[MPSync] DevTools already running ($($running.Count) processes)" -ForegroundColor Green
|
||||||
|
}
|
||||||
|
|
||||||
|
# Open automation port via CLI
|
||||||
|
Write-Host "[MPSync] Opening automation port $Port..." -ForegroundColor Cyan
|
||||||
|
$cliShort = (New-Object -ComObject Scripting.FileSystemObject).GetFile("D:\微信web开发者工具\cli.bat").ShortPath
|
||||||
|
$cliResult = & $cliShort auto --project $DistPath --auto-port $Port 2>&1
|
||||||
|
$cliResult | ForEach-Object { Write-Host $_ }
|
||||||
|
|
||||||
|
Start-Sleep -Seconds 3
|
||||||
|
|
||||||
|
# Verify port
|
||||||
|
$listener = Get-NetTCPConnection -LocalPort $Port -State Listen -ErrorAction SilentlyContinue
|
||||||
|
if ($null -ne $listener) {
|
||||||
|
Write-Host "[MPSync] Port $Port is listening - ready for MCP" -ForegroundColor Green
|
||||||
|
} else {
|
||||||
|
Write-Host "[MPSync] WARNING: Port $Port not listening yet" -ForegroundColor Yellow
|
||||||
|
}
|
||||||
77
scripts/mpsync.sh
Normal file
77
scripts/mpsync.sh
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# MPSync — 微信开发者工具 MCP 自动化前置脚本
|
||||||
|
# 清理残留进程 + 重新开启自动化端口
|
||||||
|
# 用法: bash scripts/mpsync.sh [-b|--build]
|
||||||
|
|
||||||
|
CLI="/d/微信web开发者工具/cli.bat"
|
||||||
|
DIST="G:/hms/apps/miniprogram/dist"
|
||||||
|
PORT=9420
|
||||||
|
|
||||||
|
RED='\033[0;31m'
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
YELLOW='\033[0;33m'
|
||||||
|
CYAN='\033[0;36m'
|
||||||
|
NC='\033[0m'
|
||||||
|
|
||||||
|
status() { echo -e "${CYAN}[MPSync]${NC} $1"; }
|
||||||
|
ok() { echo -e "${GREEN}[MPSync]${NC} $1"; }
|
||||||
|
warn() { echo -e "${YELLOW}[MPSync]${NC} $1"; }
|
||||||
|
|
||||||
|
# Step 1: Kill stale DevTools processes
|
||||||
|
status "Step 1: Killing stale DevTools processes..."
|
||||||
|
count=$(tasklist 2>/dev/null | grep -c "wechatdevtools.exe" | tr -d '\r\n' || echo "0")
|
||||||
|
if [ "$count" -gt 0 ]; then
|
||||||
|
warn "Found $count stale processes, killing..."
|
||||||
|
cmd.exe /C "taskkill /F /IM wechatdevtools.exe /T" > /dev/null 2>&1
|
||||||
|
sleep 5
|
||||||
|
|
||||||
|
count2=$(tasklist 2>/dev/null | grep -c "wechatdevtools.exe" | tr -d '\r\n' || echo "0")
|
||||||
|
if [ "$count2" -gt 0 ]; then
|
||||||
|
warn "Still $count2 remaining, second attempt..."
|
||||||
|
cmd.exe /C "taskkill /F /IM wechatdevtools.exe /T" > /dev/null 2>&1
|
||||||
|
sleep 3
|
||||||
|
fi
|
||||||
|
ok "Cleanup done"
|
||||||
|
else
|
||||||
|
ok "No stale processes"
|
||||||
|
fi
|
||||||
|
|
||||||
|
sleep 2
|
||||||
|
|
||||||
|
# Step 2: Optional build
|
||||||
|
if [ "$1" = "-b" ] || [ "$1" = "--build" ]; then
|
||||||
|
status "Building miniprogram..."
|
||||||
|
cd "G:/hms/apps/miniprogram" && pnpm build:weapp 2>&1 | tail -3
|
||||||
|
ok "Build done"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Step 3: Start DevTools if not running
|
||||||
|
running=$(tasklist 2>/dev/null | grep -c "wechatdevtools.exe" | tr -d '\r\n' || echo "0")
|
||||||
|
if [ "$running" -eq 0 ]; then
|
||||||
|
status "Starting DevTools..."
|
||||||
|
# 找到可执行文件
|
||||||
|
EXE=$(find "/d/微信web开发者工具" -maxdepth 1 -name "*.exe" 2>/dev/null | head -1)
|
||||||
|
if [ -n "$EXE" ]; then
|
||||||
|
"$EXE" "$DIST" &
|
||||||
|
status "Waiting for DevTools to initialize (15s)..."
|
||||||
|
sleep 15
|
||||||
|
else
|
||||||
|
warn "Cannot find DevTools exe, please open manually"
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
ok "DevTools already running ($running processes)"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Step 4: Open automation port
|
||||||
|
status "Opening automation port $PORT..."
|
||||||
|
"$CLI" auto --project "$DIST" --auto-port $PORT 2>&1
|
||||||
|
|
||||||
|
sleep 3
|
||||||
|
|
||||||
|
# Step 5: Verify
|
||||||
|
listening=$(netstat -ano 2>/dev/null | grep ":${PORT}.*LISTEN" | head -1)
|
||||||
|
if [ -n "$listening" ]; then
|
||||||
|
ok "Port $PORT is listening — ready for MCP"
|
||||||
|
else
|
||||||
|
warn "Port $PORT not listening yet, wait a moment..."
|
||||||
|
fi
|
||||||
Reference in New Issue
Block a user