企业官网建设流程全解析

在完成病人端、医生端和管理员端的静态原型界面之后，我继续对前端部分进行了工程化改造。这次改造的重点不是单纯把页面搬到 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.js

Vue 项目的入口文件是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 id="app"></div> <script type="module" 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());

同时，系统定义了一个本地存储 key：

const 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

通过这部分逻辑，前端原型已经具备了基础的多角色权限控制流程。

九、动态设置页面标题

除了登录拦截和角色判断，我还在路由中加入了afterEach：

router.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?family=Noto+Sans+SC:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"); @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-for="message in messages" :key="message.content" :class="['message', message.role]" > <div class="bubble"> <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 项目基础上完善病人端、医生端和管理员端的功能，为后端接口联调和最终项目演示做好准备。