在完成病人端、医生端和管理员端的静态原型界面之后我继续对前端部分进行了工程化改造。这次改造的重点不是单纯把页面搬到 Vue 文件里而是把原来的静态页面、模拟数据、登录逻辑、路由控制和公共样式进行重新整理让项目从“静态展示页面”变成一个可以运行、可以维护、也方便后续接后端接口的 Vue 前端原型。这篇博客主要记录我这次前端改造的具体过程包括项目工程搭建、路由拆分、登录状态管理、模拟数据抽离、三端页面数据组织、接口服务层封装和样式迁移等内容。一、从静态原型到 Vue 工程最开始的原型更偏向静态页面展示。页面切换、消息追加、图片上传预览等功能主要通过原生 JavaScript 操作 DOM 实现。例如原来的页面中会先通过document.querySelectorAll获取所有导航按钮和页面区域然后通过点击事件手动切换不同端的显示状态const navTabs document.querySelectorAll(.nav-tab); const views document.querySelectorAll(.view); navTabs.forEach((tab) { tab.addEventListener(click, () { const target tab.dataset.viewTarget; navTabs.forEach((item) item.classList.toggle(active, item tab)); views.forEach((view) view.classList.toggle(active, view.id view-${target}) ); }); });这种方式在原型阶段比较方便能够快速实现病人端、医生端和管理员端之间的切换。但随着项目继续开发这种写法会遇到几个问题。首先页面切换逻辑和 DOM 结构耦合比较严重。每增加一个页面就要手动维护对应的 DOM 节点和 class 状态。其次数据和页面混在一起。例如问诊消息、患者信息、设备状态等内容如果直接写在 HTML 或 JavaScript 中后面修改起来比较麻烦。另外原生 DOM 操作不适合继续扩展登录状态、角色权限和接口请求逻辑。所以这次我将原来的静态原型改造成 Vue 3 项目把页面拆成组件把数据抽离出来把角色切换改造成路由跳转把登录状态交给统一的状态文件管理。二、项目基础配置改造后的项目名称为name: hospital-smart-platform项目使用的是 Vue 3 Vite依赖主要包括dependencies: { vue: ^3.5.13, vue-router: ^4.5.1 }开发依赖主要包括devDependencies: { vitejs/plugin-vue: ^5.2.3, vite: ^6.3.5 }同时在package.json中配置了三个常用命令scripts: { dev: vite, build: vite build, preview: vite preview }其中npm run dev 启动本地开发环境 npm run build 打包项目 npm run preview 预览打包结果这样项目就不再是单纯打开 HTML 文件运行而是变成了一个标准的前端工程项目。三、Vite 配置项目中的vite.config.js文件比较简洁主要引入了 Vue 插件并配置了开发服务器import { defineConfig } from vite; import vue from vitejs/plugin-vue; export default defineConfig({ plugins: [vue()], server: { host: 0.0.0.0, port: 5173, }, });这里的plugins: [vue()]表示让 Vite 支持 Vue 单文件组件也就是.vue文件。server.host设置为0.0.0.0这样本地开发时不仅可以通过本机访问也方便在局域网环境下用其他设备访问页面。port: 5173是 Vite 默认常见端口之一运行项目时可以通过类似下面的地址访问http://localhost:5173这个配置比较适合项目实训阶段进行本地开发和演示。四、入口文件 main.jsVue 项目的入口文件是src/main.js。它的作用是创建 Vue 应用实例引入根组件、路由和全局样式然后挂载到页面中的#app节点上import { createApp } from vue; import App from ./App.vue; import router from ./router; import ./styles/main.css; createApp(App).use(router).mount(#app);这段代码做了几件事第一引入 Vue 的createApp方法用来创建应用。第二引入根组件App.vue作为整个前端项目的最外层组件。第三引入router让项目支持多页面路由跳转。第四引入main.css统一加载全局样式。最后通过createApp(App).use(router).mount(#app);把整个 Vue 应用挂载到页面上。对应的index.html中只保留一个挂载点div idapp/div script typemodule src/src/main.js/script这样页面内容不再直接写在 HTML 中而是由 Vue 根据组件和路由动态渲染。五、页面路由拆分原来的静态原型中病人端、医生端和管理员端更像是一个页面中的三个区域通过 class 控制显示和隐藏。改造成 Vue 后我将它们拆成了真正的页面路由。目前项目中主要有四个路由/login 登录页 /patient 病人端 /doctor 医生端 /admin 管理员端在src/router/index.js中分别引入了四个页面组件import LoginView from ../views/LoginView.vue; import PatientView from ../views/PatientView.vue; import DoctorView from ../views/DoctorView.vue; import AdminView from ../views/AdminView.vue;然后通过 routes 数组配置页面const routes [ { path: /, redirect: /login, }, { path: /login, name: login, component: LoginView, meta: { title: 登录平台, public: true, viewKey: login, }, }, { path: /patient, name: patient, component: PatientView, meta: { title: 病人智能问诊界面, viewKey: patient, requiresAuth: true, role: patient, }, }, { path: /doctor, name: doctor, component: DoctorView, meta: { title: 医生多科室监督界面, viewKey: doctor, requiresAuth: true, role: doctor, }, }, { path: /admin, name: admin, component: AdminView, meta: { title: 管理员资源管理界面, viewKey: admin, requiresAuth: true, role: admin, }, }, ];这里我给每个路由都设置了meta信息。这个meta不只是页面说明还参与了后面的权限控制。例如requiresAuth: true表示这个页面需要登录后才能访问。role: patient表示这个页面只允许病人角色访问。这样路由不只是负责跳转页面还承担了一部分角色权限判断的基础信息。六、登录页与三类角色登录角色信息被单独抽离到了src/data/auth.js中。目前系统中定义了三个角色export const loginRoles [ { key: patient, label: 病人端, title: 患者智能问诊入口, subtitle: 上传主诉、补充检查资料并实时查看 Agent 生成的检查建议。, hint: 推荐用于演示患者与知识增强问诊 Agent 的交互流程。, account: patient_demo, password: 123456, }, { key: doctor, label: 医生端, title: 医生监督与接管入口, subtitle: 统一监督多科室患者会话、告警节点与人工干预任务。, hint: 推荐用于演示监督台、病例接管和多科室流程追踪。, account: doctor_demo, password: 123456, }, { key: admin, label: 管理员端, title: 院内资源调度入口, subtitle: 查看设备实时占用、负载压力和资源调度建议。, hint: 推荐用于演示院内检查设备与队列状态管理。, account: admin_demo, password: 123456, }, ];这样做的好处是登录页不用把角色信息写死在页面结构里而是通过数组进行渲染。每个角色都包含key角色标识用于路由跳转 label角色名称 title登录入口标题 subtitle角色功能说明 hint演示提示 account演示账号 password演示密码在页面上选择不同角色时可以展示对应的登录说明和默认演示账号。登录成功后就可以根据role.key跳转到对应页面。例如router.push(/${role.key});当role.key是patient时页面跳转到/patient当role.key是doctor时页面跳转到/doctor当role.key是admin时页面跳转到/admin这种写法比原来手动切换页面区域更加清晰也更符合多角色系统的实际开发方式。七、登录状态管理登录状态管理放在了src/stores/auth.js中。这个文件的核心是使用 Vue 的ref定义响应式登录状态export const currentSession ref(readSessionFromStorage());同时系统定义了一个本地存储 keyconst STORAGE_KEY hospital-platform-auth;登录状态会保存到浏览器的localStorage中。这样做的目的是用户登录后刷新页面系统仍然能够恢复当前登录状态而不是刷新一次就退出登录。读取本地登录信息的方法如下function readSessionFromStorage() { const raw window.localStorage.getItem(STORAGE_KEY); if (!raw) { return null; } try { return JSON.parse(raw); } catch { return null; } }这里还做了异常处理。如果本地存储中的内容不是合法 JSON就直接返回null避免页面报错。整个登录状态文件中封装了几个方法export function getSession() { return currentSession.value; } export function setSession(session) { window.localStorage.setItem(STORAGE_KEY, JSON.stringify(session)); currentSession.value session; } export function clearSession() { window.localStorage.removeItem(STORAGE_KEY); currentSession.value null; } export function isAuthenticated() { return Boolean(currentSession.value); }这几个方法的作用分别是getSession获取当前登录信息 setSession保存登录信息 clearSession清除登录信息 isAuthenticated判断是否已经登录之前我遇到过一个问题登录后顶部栏角色信息显示不正确。比如选择病人端登录后顶部栏仍然显示管理员端。造成这个问题的原因是登录状态没有统一放到响应式数据中管理。后来改成ref后页面就可以随着登录状态自动更新。八、路由守卫与权限控制为了让未登录用户不能直接访问三端页面我在路由中加入了beforeEach路由守卫。核心逻辑如下router.beforeEach((to) { if (to.meta.public) { if (to.name login isAuthenticated()) { const session getSession(); return /${session.role}; } return true; } if (to.meta.requiresAuth !isAuthenticated()) { return /login; } if (to.meta.role) { const session getSession(); if (!session || session.role ! to.meta.role) { return session ? /${session.role} : /login; } } return true; });这段守卫主要处理三种情况。第一如果访问的是公开页面也就是登录页并且用户已经登录就直接跳转到用户自己的角色页面。例如医生已经登录后再访问/login会自动跳转回/doctor第二如果访问的页面需要登录但当前没有登录就跳转回登录页。例如未登录时直接访问/admin系统会自动跳转到/login第三如果用户已经登录但访问了不属于自己角色的页面也会被重定向回自己的页面。例如病人登录后手动访问/doctor系统会判断当前 session 中的角色不是 doctor于是把用户送回/patient通过这部分逻辑前端原型已经具备了基础的多角色权限控制流程。九、动态设置页面标题除了登录拦截和角色判断我还在路由中加入了afterEachrouter.afterEach((to) { document.title to.meta.title || 医院智能辅助诊疗与资源调度平台; });这样每次页面跳转后浏览器标题都会根据当前页面自动变化。例如/login → 登录平台 /patient → 病人智能问诊界面 /doctor → 医生多科室监督界面 /admin → 管理员资源管理界面虽然这是一个比较小的细节但在演示系统时会让页面更加完整也更接近真实系统。十、模拟数据抽离原来的静态页面中很多模拟数据直接写在页面结构里。改造成 Vue 项目后我把三端页面需要使用的数据统一整理到了src/data/dashboard.js中。这个文件中主要导出了三个对象export const patientDashboard { ... }; export const doctorDashboard { ... }; export const adminDashboard { ... };这样病人端、医生端和管理员端的数据都集中管理页面组件只负责展示。十一、病人端数据设计病人端数据放在patientDashboard中主要包括overview页面总览信息 initialMessages初始问诊消息 summary问诊总结 plan检查计划例如病人端的总览中包含当前主诉、推荐检查路径、资源调度状态、问诊完成度和建议优先级overview: { title: 智能问诊与检查建议, lead: 当前会话已进入检查建议阶段系统正在根据症状、风险标签与院内资源可用情况生成下一步安排。, highlights: [ { label: 当前主诉, value: 胸闷 / 咳嗽 / 呼吸急促 }, { label: 推荐检查路径, value: 血常规 - 心电图 - 胸部 CT }, { label: 资源调度状态, value: 已匹配可用检查时段 }, ], progress: { label: 问诊完成度, value: 78, }, metrics: [ { label: 问诊轮次, value: 4 }, { label: 建议优先级, value: 中高 }, ], }病人端还定义了初始对话消息initialMessages: [ { role: agent, content: 您好我是医院辅助诊疗 Agent。请描述您目前最不舒服的症状持续了多久是否伴有发热、咳嗽或胸闷等情况。, }, { role: user, content: 最近两天胸口有点闷偶尔咳嗽今天上午开始感觉呼吸有点急。, }, ]这样病人端页面就可以通过循环渲染消息列表而不是把每一条消息都写死在页面中。检查计划也被整理成数组plan: [ { order: 01, title: 血常规, description: 预计等待 8 分钟检验科窗口 A }, { order: 02, title: 心电图, description: 设备 ECG-03 空闲建议即时检查 }, { order: 03, title: 胸部 CT, description: CT-02 预计 14:20 可接诊 }, ]这样的结构后续接后端接口时也比较方便。接口只要返回类似数组页面就可以继续使用原来的渲染逻辑。十二、医生端数据设计医生端数据放在doctorDashboard中主要用于展示医生监督台。医生端包含overview医生端概览 summaryCards统计卡片 filters科室筛选项 cases患者病例列表 timeline病例时间线 actions医生操作按钮 insight智能提示其中病例列表是医生端比较核心的数据。例如cases: [ { patientId: 患者 A102, tag: 需人工接管, tagTone: critical, description: Agent 判定存在低氧风险建议医生立即确认是否进入急诊绿色通道。, progress: 92, meta: [科室急诊, 当前阶段检查前复核, 最后更新2 分钟前], }, { patientId: 患者 B305, tag: 建议复核, tagTone: warning, description: 呼吸科 Agent 已完成问诊等待医生确认胸部 CT 与肺功能检查优先级。, progress: 74, meta: [科室呼吸内科, 当前阶段检查方案生成, 最后更新5 分钟前], }, ]这里每个病例都包含患者编号、状态标签、风险样式、描述、进度和元信息。这样医生端页面可以清晰展示哪些患者需要接管 哪些患者建议复核 哪些患者流程正常 每个病例处于什么阶段 最后一次更新时间医生端还加入了时间线数据timeline: [ { time: 09:14, title: Agent 收到主诉, description: 胸闷、气急、咳嗽两天 }, { time: 09:16, title: 知识库命中, description: 呼吸困难风险路径 急诊分流规则 }, { time: 09:18, title: 触发告警, description: 血氧指标缺失需医生复核风险等级 }, ]这部分主要用于展示 Agent 问诊过程中的关键节点让医生端不只是看到最终结果也能看到中间过程。十三、管理员端数据设计管理员端数据放在adminDashboard中主要用于展示院内检查资源调度状态。管理员端包含overview资源调度中心概览 summaryCards资源统计卡片 equipments设备列表 recommendations调度建议 loadOverview科室负载情况其中设备列表是管理员端的核心内容equipments: [ { name: CT-02, department: 影像中心, status: 排队中, statusTone: queue, queue: 6 人, usage: 89%, next: 14:20, }, { name: MRI-01, department: 影像中心, status: 使用中, statusTone: busy, queue: 3 人, usage: 93%, next: 15:05, }, { name: ECG-03, department: 心电诊断室, status: 空闲, statusTone: available, queue: 0 人, usage: 48%, next: 立即可用, }, ]这些数据可以展示每台设备的设备名称 所属科室 当前状态 排队人数 占用率 下一可用时间管理员端还定义了调度建议recommendations: [ { order: 01, title: 分流 CT 请求, description: 建议将 2 个普通胸部 CT 调整至 CT-03降低 CT-02 队列峰值。, }, { order: 02, title: 优先心电图检查, description: ECG-03 当前空闲可承接急诊心内病例检查需求。, }, ]这样管理员端不仅能展示资源状态还能展示系统生成的调度建议符合“院内资源调度平台”的功能定位。十四、接口服务层封装虽然目前项目使用的是本地模拟数据但我没有让页面直接依赖dashboard.js。我额外封装了一个服务文件platformService.js这个文件中引入三端 dashboard 数据import { adminDashboard, doctorDashboard, patientDashboard, } from ../data/dashboard;然后定义了一个clone方法function clone(data) { return JSON.parse(JSON.stringify(data)); }最后对外暴露三个异步方法export async function getPatientDashboard() { return Promise.resolve(clone(patientDashboard)); } export async function getDoctorDashboard() { return Promise.resolve(clone(doctorDashboard)); } export async function getAdminDashboard() { return Promise.resolve(clone(adminDashboard)); }这样做有一个很重要的好处页面层不需要关心数据到底来自本地文件还是后端接口。现在数据来自本地return Promise.resolve(clone(patientDashboard));以后接入后端时可以改成return request.get(/api/patient/dashboard);页面组件中的调用方式可以保持不变。这一步虽然看起来只是多封装了一层但它让项目后续扩展更加方便也更符合真实前端项目的组织方式。十五、样式迁移与统一管理样式部分我保留并整理了原来的视觉风格。项目中主要有两个样式文件styles.css src/styles/main.css其中styles.css保留了三端页面的大部分基础样式例如页面背景、侧边栏、顶部栏、卡片、表格、状态标签、进度条、消息气泡和响应式布局等。在样式变量中我统一定义了页面常用颜色:root { --bg: #eef7ff; --panel: rgba(255, 255, 255, 0.86); --text: #10233f; --muted: #667a96; --line: rgba(58, 121, 179, 0.14); --primary: #2a9fe8; --primary-deep: #1268b3; --accent: #31c8e6; --danger: #e0526e; --info: #4f7ff2; }这些变量控制了项目中的主要色彩。比如--primary和--primary-deep用于按钮、进度条和重点信息--accent用于在线状态和强调色--danger用于风险告警和维护状态--muted用于说明性文字。页面背景不是纯白色而是使用了浅蓝色渐变和局部光晕效果body { background: radial-gradient(circle at top left, rgba(127, 211, 255, 0.28), transparent 28%), radial-gradient(circle at 85% 8%, rgba(98, 160, 245, 0.2), transparent 24%), linear-gradient(180deg, #eaf6ff 0%, #f8fcff 100%); }这样页面整体不会显得过于单调也更接近医疗平台中常见的清爽、科技感界面。左侧侧边栏使用了深蓝色渐变背景.sidebar { background: linear-gradient(180deg, rgba(12, 45, 84, 0.96), rgba(9, 72, 116, 0.9)), radial-gradient(circle at top left, rgba(132, 219, 255, 0.22), transparent 32%); }左侧深色区域用于承载平台名称和导航信息右侧则是主要业务内容。这样的布局可以让三端页面看起来更加统一也能突出“智能辅助诊断与院内资源调度平台”的系统感。主体内容区域大量使用了白色半透明卡片.hero-card, .chat-window, .info-card, .board-card, .kanban-card, .detail-card, .resource-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(239, 249, 255, 0.86)); backdrop-filter: blur(18px); border-radius: var(--radius-xl); box-shadow: var(--shadow); }这种卡片样式让病人端的问诊区域、医生端的病例监督区域和管理员端的设备表格区域都保持了统一的视觉风格。在医生端和管理员端的重点卡片中我使用了青绿色到蓝色的渐变背景.board-card.emphasis, .resource-card.tall { background: linear-gradient(135deg, rgba(42, 159, 232, 0.92), rgba(18, 104, 179, 0.94)); color: #ffffff; }这类卡片主要用于展示页面最核心的信息例如医生端的“多科室患者问诊监督台”和管理员端的“院内检查资源实时调度中心”。通过深色渐变卡片可以让用户进入页面后第一眼看到当前端的核心功能。状态色方面我也根据业务含义进行了区分.status-text.available { color: #0f7f54; } .status-text.busy { color: #1268b3; } .status-text.queue { color: #9a5b00; } .status-text.maintain { color: #a01931; }在管理员端设备表格中不同状态对应不同颜色空闲绿色 使用中蓝色 排队中橙色 维护红色这样管理员在查看设备状态时可以快速区分哪些资源可用哪些资源正在排队哪些设备处于维护状态。在src/styles/main.css中我主要补充了 Vue 项目相关样式例如字体引入、路由选中效果、登录页样式等import url(https://fonts.googleapis.com/css2?familyNotoSansSC:wght400;500;600;700familySpaceGrotesk:wght500;700displayswap); import url(../../styles.css);其中路由选中状态适配了 Vue Router 的 class.router-link-active.nav-tab, .router-link-exact-active.nav-tab { transform: translateX(4px); border-color: rgba(131, 219, 255, 0.48); background: rgba(131, 219, 255, 0.14); }这样原来静态页面中的导航选中效果在改成 Vue Router 后仍然可以保留。十六、从手动 DOM 操作到数据驱动页面这次改造中我最大的感受是静态原型和 Vue 项目的开发思路不一样。原来的原生 JS 版本中很多操作是直接控制 DOM。例如chatMessages.appendChild(article); chatMessages.scrollTop chatMessages.scrollHeight;这种写法是“我创建一个元素然后把它插入页面”。而 Vue 更强调数据驱动。也就是说页面上显示什么不是直接操作 DOM而是修改数据让 Vue 根据数据自动更新页面。例如消息列表可以变成const messages ref([...initialMessages]);用户发送消息时只需要messages.value.push({ role: user, content: inputText, });页面中通过v-for渲染article v-formessage in messages :keymessage.content :class[message, message.role] div classbubble p{{ message.content }}/p /div /article这种方式后期更好维护也更适合和接口数据结合。十七、目前项目的运行流程现在整个项目的运行流程大致如下1. 浏览器访问项目 2. index.html 加载 src/main.js 3. main.js 创建 Vue 应用并注册 router 4. router 默认重定向到 /login 5. 用户在登录页选择角色并登录 6. 登录信息写入 localStorage 和 currentSession 7. 根据角色跳转到 /patient、/doctor 或 /admin 8. 路由守卫检查登录状态和角色权限 9. 页面通过 service 获取对应 dashboard 数据 10. 页面根据数据渲染三端界面这个流程已经比最初的静态页面完整很多。原来的页面重点是“展示效果”现在的项目已经开始具备真实前端应用的基本结构。十八、改造后的效果完成这次改造后项目主要有以下变化。第一三端页面真正拆开了。PatientView.vue DoctorView.vue AdminView.vue每个页面负责自己的业务内容互不影响。第二登录和路由流程更完整。用户不能随意访问任意页面必须先登录并且登录后只能进入自己角色对应的页面。第三数据结构更加清晰。病人端、医生端和管理员端的数据都放在dashboard.js中页面只负责渲染。第四服务层已经预留。虽然现在还是模拟数据但已经通过platformService.js进行异步封装为后续替换成真实接口提供了基础。第五样式得到了保留和统一。原来的风格、卡片布局、状态标签、表格和响应式设计都被迁移到了 Vue 项目中。十九、遇到的问题和解决方式1. 登录状态刷新后丢失一开始如果只把登录状态放在变量里页面刷新后状态就会丢失。后来我使用localStorage保存 session并在初始化时读取export const currentSession ref(readSessionFromStorage());这样刷新页面后仍然可以恢复登录状态。2. 顶部角色信息不同步之前出现过登录病人端或医生端后顶部栏仍然显示旧角色的问题。这个问题本质上是状态没有响应式更新。解决方式是将当前 session 定义为ref并且所有登录、退出逻辑都通过setSession和clearSession更新。3. 不同角色页面访问混乱如果没有角色判断病人登录后也可以直接访问/admin。所以我在路由meta中加入了角色字段role: admin再通过路由守卫判断当前 session 的 role 是否匹配。这样就能限制不同角色访问自己的页面。4. 静态数据后续不好替换如果页面直接 importdashboard.js以后接接口时每个页面都要改。所以我增加了platformService.js让页面通过服务方法获取数据。后续只需要改 service 层页面层不用大改。二十、后续优化方向目前项目已经完成了 Vue 版本的基础改造但还可以继续优化。第一接入后端接口。目前platformService.js返回的是本地模拟数据后续将替换为真实接口请求。第二完善病人端问诊交互。可以继续增加连续对话、文件上传、症状标签选择、检查报告预览等功能。第三扩展医生端病例详情。医生端可以增加患者详情页展示完整问诊记录、Agent 推理过程、检查建议依据和医生确认结果。第四增强管理员端图表展示。管理员端可以加入设备占用率图表、排队趋势图、科室负载柱状图等让资源调度过程更加直观。第五完善真实权限认证。目前权限控制主要是前端模拟后续将结合后端 token、用户角色、接口权限等实现更完整的登录认证。二十一、总结这次前端改造让我对 Vue 项目的工程化组织有了更深入的理解。最开始的静态页面更适合快速展示效果但随着项目功能变多原来的写法会逐渐暴露出维护困难、数据混乱、页面耦合高、权限流程缺失等问题。通过这次改造我主要完成了以下工作1. 使用 Vue 3 Vite 搭建前端工程 2. 将病人端、医生端、管理员端拆分为独立页面 3. 使用 Vue Router 管理 /login、/patient、/doctor、/admin 路由 4. 使用 meta 字段标记页面标题、登录要求和角色权限 5. 使用路由守卫实现未登录拦截和角色访问控制 6. 使用 ref localStorage 管理登录状态 7. 将三端模拟数据抽离到 dashboard.js 8. 使用 platformService.js 封装数据获取方法 9. 迁移并整理原有 CSS 样式 10. 保留原型视觉效果同时提升项目可维护性整体来看项目已经从一个静态 HTML/CSS/JS 原型升级成了一个基于 Vue 3 Vite 的前端工程化原型。这次改造也让我意识到前端开发不只是把页面做出来还要考虑项目结构、组件拆分、数据组织、状态管理、路由权限和后续扩展。尤其是这种多角色平台如果前期结构设计不清楚后面功能越多代码就越难维护。后续我会继续先制作一下登录界面并统一整体风格,然后在现有 Vue 项目基础上完善病人端、医生端和管理员端的功能为后端接口联调和最终项目演示做好准备。