first commit

This commit is contained in:
祀梦
2026-01-11 22:51:06 +08:00
commit 52f0ab6366
35 changed files with 4884 additions and 0 deletions

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

91
README.md Normal file
View File

@@ -0,0 +1,91 @@
# 智护链 (SmartCare Chain)
> 基于区块链+AI+隐私计算的助残养老机器人远程协作系统
![License](https://img.shields.io/badge/license-MIT-blue.svg) ![Vue](https://img.shields.io/badge/vue-3.x-green.svg) ![FISCO BCOS](https://img.shields.io/badge/blockchain-FISCO%20BCOS-blue.svg)
## 📖 项目简介
“智护链”是一套针对老龄化社会痛点设计的可信养老协作系统。它创新性地提出了**“行为即存证”**的理念,利用**AI边缘计算**识别老人跌倒等风险行为,通过**隐私计算**脱敏后,将关键证据实时上链存证。
本项目旨在解决:
- **信任缺失**:通过区块链保证护理数据不可篡改,解决责任纠纷。
- **隐私泄露**:原始视频不出户,仅上传行为特征哈希。
- **响应滞后**AI L1-L4 分级响应机制,毫秒级触发救援。
---
## 🚀 核心功能演示 (Demo Features)
本系统包含 5 个核心演示终端,支持**跨端状态实时联动**
### 1. 🤖 机器人端 (Edge-Robot)
- **AI 实时决策舱**:可视化展示 YOLOv8 + PosePipe 的推理过程。
- **隐私计算演示**:实时展示原始图像如何转化为骨骼点和 Hash 指纹。
- **模拟触发**:点击控制台按钮,可模拟 `L1 正常` -> `L4 跌倒` 的全过程。
### 2. 👨‍👩‍👧 家属/用户端 (Client)
- **实时守护看板**:查看亲人实时状态(如“正在散步”),非视频流,保护隐私。
- **时间银行**:展示互助养老通证 (Token) 的赚取与消费。
### 3. 🏥 机构/护理端 (Agency)
- **任务看板**实时接收机器人的分级告警L4 级跌倒事件会红色高亮并置顶。
- **链上签名**:护理员处理任务时,需进行数字签名,形成完整证据链。
### 4. 🏛️ 政府/监管端 (Admin)
- **全域态势感知**3D 风格大屏,展示区域养老覆盖率与实时告警流。
- **审计溯源**:一键调取任意事件的链上证据包,进行责任仲裁。
### 5. 🔗 区块链浏览器 (Explorer)
- **分布式账本**:实时滚动展示新生成的区块(立方体流)。
- **交易追踪**:透明展示每一笔“行为存证”和“通证转账”记录。
---
## 🛠️ 技术栈 (Tech Stack)
- **前端框架**: Vue 3 + Vite
- **UI 样式**: Tailwind CSS (v4) + PostCSS
- **状态管理**: Pinia (实现跨端 Mock 数据联动)
- **路由管理**: Vue Router (多端路由分发)
- **区块链底座**: FISCO BCOS (模拟交互)
---
## 📂 文档导航
详细的项目文档已整理至 `docs/` 目录:
- [📜 Project.md](./docs/Project.md) - **项目核心计划书**(包含商业模式与技术架构)
- [📅 DevPlan.md](./docs/DevPlan.md) - **初赛演示系统开发计划**
- [📘 reference1.md](./docs/reference1.md) - 需求分析参考文档
- [📄 reference3.md](./docs/reference3.md) - 理论支撑论文(耦合机制研究)
---
## ⚡ 快速启动 (Quick Start)
```bash
# 1. 安装依赖
npm install
# 2. 启动开发服务器
npm run dev
# 3. 访问系统
打开浏览器访问 http://localhost:5173
```
---
## 🎨 演示流程建议 (For Pitch)
1. **开场**:进入首页,展示 3D 视觉效果,介绍项目愿景。
2. **触发**:进入**机器人端**,点击 `L4 跌倒告警` 按钮,模拟异常发生。
3. **联动**
- 切换至**机构端**,展示红色的紧急任务弹窗。
- 切换至**家属端**,展示状态变为“检测到跌倒”,并出现红色警示。
4. **存证**:切换至**区块链浏览器**,查看刚刚生成的最新区块和 Hash 值。
5. **闭环**:在机构端点击“立即响应”,任务状态更新,流程结束。
---
**智护链 Team © 2026** - *In Trust We Code.*

104
docs/DevPlan.md Normal file
View File

@@ -0,0 +1,104 @@
# “智护链”初赛系统原型开发计划V2.0 深度对标版)
## 一、 开发愿景:从“功能展示”到“逻辑证真”
本计划深度对标 [Project.md](file:///d:/Code%20-%20Workspace/test/Project.md) 中的核心理论,旨在通过前端原型证明:**“技术如何构建信任”**。
演示系统将不再是孤立的页面,而是一个完整的**“可信证据流”**循环。
---
## 二、 设计系统 (Design System):构建“科技向善”的视觉语言
- **配色方案**
- **信任蓝 (Trust Blue)**:主色调,用于区块链与管理端,传递专业与稳重。
- **生命橙 (Vitality Orange)**:用于用户端与健康指标,传递温暖与关怀。
- **警戒红 (Alert Red)**:仅用于 L4 级紧急响应,形成视觉冲击。
- **动效设计**
- **数据上链动效**:当 AI 识别事件时,设计一个从“机器人”流向“区块立方体”的光效,视觉化“行为即存证”。
- **隐私脱敏动效**:实时图像经过一个“扫描栅格”后变为骨骼点图,视觉化“隐私计算”。
---
## 三、 五大核心展示端详细设计
### 3.1 机器人与边缘模拟端 (The Truth Source)
**核心对标AI 边缘感知、隐私计算、L1-L4 分级逻辑**
- **页面 1AI 实时决策舱**
- **视觉效果**:左侧为模拟摄像头画面(实为骨骼点图),右侧为实时更新的 AI 逻辑推理树。
- **交互逻辑**
- 模拟 **L2 (中风险)**:检测到老人 3 小时未活动 -> 机器人屏幕显示询问文字 -> 机器人自动靠近。
- 模拟 **L4 (紧急风险)**:检测到快速跌倒 -> 屏幕瞬间切换为红色警告 -> 显示“数据摘要已生成并广播至联盟链”。
- **页面 2隐私计算实验室**
- **视觉效果**对比显示“原始图像打码”与“特征指纹Hash”。
- **功能展示**:展示数据如何在本地完成推理,仅将加密摘要外传的动态过程。
### 3.2 用户/家属端 (The Trust Interface)
**核心对标:目标人群(子女)、隐私友好、时间银行**
- **页面 1智能守护看板**
- **视觉效果**:非视频监控,而是基于 AI 识别的“实时行为状态图表”(如:正在午睡、已喝水、散步中)。
- **功能点**:点击“查看证据”,跳转至区块链存证详情。
- **页面 2时间银行 & 公益互助**
- **视觉效果**:电子存折风格。
- **功能点**:展示家属为邻居老人提供互助服务获得的“智护通证”,可兑换本系统的机器人租赁额度。
- **页面 3残障友好模式**
- **视觉效果**:高对比度界面。
- **功能展示**:模拟“触觉转换指令”,点击屏幕,机器人发出特定节奏的震动或频率,引导视障老人避障。
### 3.3 机构/护理员协作端 (The Collaborative Workspace)
**核心对标:受约束执行、服务责任认定**
- **页面 1多机协同指挥部**
- **视觉效果**:电子地图上分布着多个机器人图标,颜色代表 L1-L4 状态。
- **功能点**:护理员接管 L3 告警,系统要求护理员进行“私钥签名”确认,所有操作实时上链。
- **页面 2服务质量回溯**
- **视觉效果**:时间轴形式。
- **功能展示**:展示从 AI 发现异常到护理员到场处理的完整闭环,每一步都带链上存证标识。
### 3.4 政府/审计监管大屏 (The Order Keeper)
**核心对标:三重互信之“秩序互信”、链上监管沙盒**
- **页面 1区域养老态势感知**
- **视觉效果**:炫酷的 3D 数据可视化。
- **功能点**:统计全区养老机构的“数据真实度评分”(基于区块链共识校验)。
- **页面 2纠纷仲裁台**
- **视觉效果**:严肃的文书风格。
- **功能点**:一键调取纠纷发生时的链上证据包,展示 AI 原始判定、机构响应时间、家属反馈,形成法律闭环。
### 3.5 区块链底层浏览器 (The Trust Foundation)
**核心对标:三重互信(信息、资源、秩序)、智能合约自动化**
- **页面 1分布式账本实时流**
- **视觉效果**:瀑布流。
- **功能展示**:展示“健康档案摘要”、“服务契约”、“互助通证”三种不同类型的区块交易。
- **页面 2智能合约实验室**
- **视觉效果**:逻辑流程图动效。
- **功能展示**:模拟“服务达标自动结算”合约逻辑。当护理记录在链上被多方确认,对应的服务费(模拟通证)自动从家属账户划拨至机构账户。
---
## 四、 关键技术展示策略Mock 方案)
1. **Hash 生成逻辑**
```javascript
// 模拟生成符合 Project.md 要求的存证摘要
const generateEvidence = (action) => ({
timestamp: new Date().getTime(),
actor: "Robot_ID_082",
behavior: action,
ai_confidence: 0.985,
tx_hash: "0x" + Math.random().toString(16).slice(2, 66),
status: "Commited on FISCO BCOS"
});
```
2. **L1-L4 状态机**:前端维护一个全局状态机,模拟不同的触发场景,一键切换所有端的显示状态。
---
## 五、 答辩“黄金路径”脚本设计
1. **入场**:展示**管理端大屏**,讲述老龄化社会的监管挑战(对标 1.1)。
2. **场景模拟**:切换到**机器人端**模拟王大爷跌倒L4
3. **技术解密**:暂停画面,展示**隐私计算**和**数据上链**动效(对标 4.1 & 4.3)。
4. **多端联动**:展示**护理员端**收到报警并签收,**家属端**实时查看脱敏后的证据链(对标 5.1)。
5. **价值升华**:最后回到**区块链浏览器**,展示“时间银行”的通证流转,讲述可持续发展的互助生态(对标 5.2)。
---
## 六、 接下来 72 小时执行清单
1. [ ] **0-12h**搭建多端路由骨架完成设计系统CSS 变量定义)。
2. [ ] **12-36h**:重点打磨机器人端的 L1-L4 切换逻辑与上链动效。
3. [ ] **36-60h**:完成家属端“隐私看板”与管理端“纠纷仲裁”页面。
4. [ ] **60-72h**:全链路模拟数据贯通,优化 3D 可视化大屏细节。

87
docs/Project.md Normal file
View File

@@ -0,0 +1,87 @@
# “智护链”——基于区块链+AI+隐私计算的助残养老机器人远程协作系统项目计划书
## 一、 项目总述
### 1.1 项目愿景
针对我国老龄化社会中居家养老安全监测难、隐私易泄露、服务责任认定难等一线“真问题”本项目构建了一套以人为中心、以行为为核心、以可信为基础的智能机器人远程协作系统。通过新一代信息技术的深度融合实现“系统值得信任、AI能正确参与行动、过程可审计溯源”的智慧养老新模式。
### 1.2 核心理念:行为即存证
本项目打破传统机器人“信息孤岛”现状提出“行为即存证”理念。AI识别的关键服务行为如跌倒报警、给药提醒不再仅仅是日志而是自动转化为不可篡改、多方见证的可信事件直接锚定在区块链底座上。
---
## 二、 背景与市场分析
### 2.1 社会痛点分析
1. **护理资源严重错配**中国进入中度老龄化呈现“9073”格局居家养老面临护理人员匮乏与响应不及时的双重压力。
2. **信任缺失与责任纠纷**:传统系统“能识别,不可信”。数据存储在单一平台,纠纷发生时,日志缺乏公信力。
3. **隐私保护与智能化的冲突**:老人抵触原始视频上传,导致“要安全就没隐私”的困境。
### 2.2 市场规模与潜力
- **政策驱动**:国家《“机器人+”应用行动实施方案》明确指出养老行业是服务机器人的重点拓宽场景。
- **经济价值**:通过边缘计算降低中心服务器带宽成本,通过区块链降低多方协作的信任成本。
- **蓝海市场**:中高端智慧康养社区及“远方子女”群体对可信护理服务的需求呈爆发式增长。
---
## 三、 理论支撑:三重互信耦合机制
本项目深度参考学术前沿理论,构建了基于区块链的“信息-资源-秩序”三重互信耦合机制:
1. **信息互信**:利用分布式账本确保老人健康数据、服务记录的真实性,消除用户间的“信任危机”。
2. **资源互信**:通过智能合约实现养老服务资源的精准确权与自动匹配,提升资源利用率。
3. **秩序互信**:建立“链上监管沙盒”,杜绝数据造假,规范养老服务企业的服务标准与质量。
---
## 四、 技术方案设计
### 4.1 系统架构:三端一链
系统采用“三端一链”的分布式架构,确保感知、决策、存证的高效协同:
- **机器人端(感知层)**部署轻量化AI模型执行本地推理确保隐私不出户。
- **边缘/服务端(协作层)**:负责多主体协作流转、事件摘要生成及隐私脱敏。
- **管理展示端(应用层)**:实时状态可视化、区块链浏览器溯源、告警时间线。
- **区块链(可信底座)**:基于国产 **FISCO BCOS** 架构,通过 Solidity 开发智能合约,实现逻辑验证与数据存证。
### 4.2 受约束的智能执行L1-L4 分级)
AI不仅是监控者更是受规则约束的参与者。根据风险等级实施分级响应
- **L1 (低风险)**:持续观察,正常巡护。
- **L2 (中风险)**:主动靠近确认,发出询问。
- **L3 (高风险)**:触发服务流程,通知家属/机构。
- **L4 (紧急风险)**:允许执行保护性自主动作(如避障、急停),并同步上链。
### 4.3 隐私计算与数据安全
- **特征指纹技术**:原始视频在本地销毁,仅将经过隐私计算处理的特征摘要上链。
- **数据最小化原则**:仅上链必要信息,满足《个人信息保护法》要求,保障老人尊严。
---
## 五、 创新点与核心价值
### 5.1 技术创新:多技融合
首次在职业教育与竞赛赛道深度整合 **区块链 + 隐私计算 + AI + 机器人**,实现了从数据感知到证据闭环的原始性改良。
### 5.2 机制创新:“时间银行”互助模式
引入通证经济模型,将志愿者服务时长以数字资产形式存入“时间银行”,支持跨区兑换,激发社区互助活力(参考广州/上海先进案例)。
### 5.3 民生创意:残障友好指令集
针对视觉/听觉残障人士开发“触觉/听觉双向转换”指令集,将区块链指令转化为可感知信号,提升社会公益价值。
---
## 六、 商业模式与应用人群
### 6.1 目标人群
- **核心受众**:独居或半失能老人、行动/感知障碍人士。
- **关联用户**:远方子女、社区网格员、专业护理员。
### 6.2 客户群体与营收路径
- **B端养老机构**:提供可信管理系统,降低纠纷成本,提升服务品牌。
- **G端政府民政**:智慧养老平台采购,建立区域性养老监管底座。
- **C端家庭用户**:硬件销售/租赁 + 增值存证服务订阅。
---
## 七、 总结与展望
“智护链”系统通过技术手段重构了养老服务的信任纽带。它不仅解决了“有没有发生异常”的问题,更解决了“系统是否值得信任”的终极命题。未来,本项目将持续优化算法,拓展“链上医院”与“智慧社区”的连接边界,为构建人机协同的可信社会贡献中国方案。

18
docs/main.md Normal file
View File

@@ -0,0 +1,18 @@
项目信息 项目名称 “智护链”——基于区块链+AI+隐私计算的助残养老机器人远程协作系统
赛道名称 新一代信息技术
项目简介600字以内如何展示技能水平、职业素养等
针对我国老龄化社会中居家养老安全监测难、隐私易泄露、服务责任认定难等一线“真问题”,本项目构建了一套“智护链”——基于区块链+AI+隐私计算的助残养老机器人远程协作系统。在技能操作层面团队深度集成区块链底层技术采用FISCO BCOS架构搭建国产可信存证平台通过Solidity语言开发智能合约实现了养老服务合同的自动执行与健康数据的全流程存证。参赛选手将现场展示区块链节点的部署、共识算法的配置以及智能合约的逻辑验证体现对复杂软件工具使用的熟练度与操作规范性 。
系统核心融合了AI与机器人控制技术机器人端部署了轻量化AI模型能够实时执行跌倒检测、情绪识别及异常行为分析。针对数据安全痛点项目创新性地应用了联邦学习与隐私计算技术在本地完成AI推理以确保原始健康隐私不出户仅将计算摘要与加密特征值上链充分体现了新一代信息技术中技术选择的先进性与数字化转型特征 。
在职业素养方面,项目设计严格遵循行业标准与安全规范,在机器人运行逻辑中预设了多级避障与紧急刹车等风险防范机制,展现出极强的安全意识与劳动保护意识 。代码开发与硬件调试过程中,团队秉持精益求精的工匠精神,确保每行逻辑的可溯源与硬件布线的标准化,体现了管理意识与质量意识 。通过现场对机器人远程调度、AI实时预警及区块链追溯审计的完整演示本项目将系统性地展示团队在面对复杂生产、服务场景时运用多技术融合手段解决实际问题的综合技能水平与职业风貌
应用价值300字以内 实用性、经济性、可持续性等
实用性: 直接解决居家养老中的跌倒报警延迟与健康监护空缺失,方案可快速移植到智慧社区和康复中心,契合国家人口老龄化战略需求 。
经济性: 通过区块链分布式存储与AI边缘计算降低了昂贵的中心服务器带宽成本实现高效益运营助力高质量就业 。
可持续性: 模块化软硬件设计支持远程升级,减少电子垃圾;数字化存证替代大量纸质报告,符合绿色低碳发展方向 。
创新创意300字以内: 创新意识、创新成效等
创新意识: 打破传统机器人“信息孤岛”现状提出“行为即存证”理念将AI决策过程与区块链共识机制深度融合体现原始创新精神 。
创新成效: 技术融合创新方面,首次在职业教育赛道深度整合区块链+隐私计算+AI+机器人,实现加工工艺(数据脱敏流转)的原始性改良 。
民生类创意: 开发了针对视觉/听觉残障人士的“触觉/听觉双向转换”区块链指令集,提升了应用性优化的社会价值 。

265
docs/reference1.md Normal file
View File

@@ -0,0 +1,265 @@
# “智护链”——基于区块链、人工智能与隐私计算的助残养老机器人可信远程协作系统
## 项目总体设计说明文档(竞赛版)
---
## 一、项目背景与问题分析
### 1.1 社会背景
随着我国人口老龄化程度不断加深,居家养老与助残服务已成为公共服务体系中的重要组成部分。传统依赖人工巡护的模式,存在以下突出问题:
- 护理资源紧张,响应不及时
- 夜间、独居等场景存在安全盲区
- 服务过程依赖人工记录,事后难以追溯
- 多方参与下责任认定困难,信任成本高
因此,融合新一代信息技术的智能化养老与助残服务系统,已成为现实需求。
---
### 1.2 现有“智慧养老系统”的不足
当前大量智慧养老系统已引入摄像头、传感器与人工智能算法,但在实际应用中仍存在明显局限:
1. **系统“能识别”,但不“可信”**
- 数据集中存储,平台拥有完全控制权
- 出现纠纷时,日志缺乏公信力
2. **AI 多停留在“报警层”**
- AI 仅负责识别异常
- 决策与执行完全依赖人工
3. **隐私保护与智能化存在冲突**
- 依赖原始视频上传
- 难以满足个人信息保护要求
> 本质问题在于:
> **现有系统解决了“有没有发生异常”却没有解决“系统是否值得信任、AI是否能正确参与行动”。**
---
## 二、项目总体目标
### 2.1 项目核心目标
构建一套:
> **以人为中心、以行为为核心、以可信为基础的助残养老机器人远程协作系统**
通过区块链、人工智能与隐私计算的深度融合,实现:
- AI 不仅“看见问题”,还能在权限范围内主动帮助人
- 服务过程自动形成可信、可追溯的责任链条
- 在保障隐私的前提下实现多方协作与远程调度
---
### 2.2 竞赛目标定位
- 对齐“新一代信息技术”赛道要求
- 强调多技术融合与工程实现能力
- 所有功能均可现场演示、可解释、可验证
- 体现职业素养、安全意识与人本价值导向
---
## 三、目标客户与应用人群分析
### 3.1 直接服务对象
- 独居或半失能老年人
- 行动不便或感知障碍的残障人士
### 3.2 间接使用与管理对象
- 家庭成员(子女、监护人)
- 养老机构、康复中心
- 社区服务中心
- 第三方监管与审计机构
### 3.3 场景特点
- 多主体参与(人、机构、平台)
- 高安全性要求
- 高隐私敏感度
- 强责任追溯需求
---
## 四、设计理念与总体思考
### 4.1 核心设计理念:“行为即存证”
本项目不以事后人工记录为依据,而是:
-**AI 识别出的关键服务行为** 作为系统核心对象
- 行为一经确认,即形成可验证、不可篡改的可信事件
> 行为本身,即是证据。
---
### 4.2 人本优先与受约束智能
项目明确提出:
- AI 不是“全权决策者”
- AI 是 **受规则约束、以人为中心的智能执行参与者**
任何情况下,系统设计均遵循:
1. 人身安全优先于效率
2. AI 不得做出不可逆伤害性决策
3. 生命与医疗相关决策必须由人类确认
---
## 五、系统总体架构设计
### 5.1 架构概述:三端一链
系统采用“**三端一链**”架构:
1. 机器人端(感知与执行)
2. 边缘 / 服务端(协作与管理)
3. 管理展示端(可视化与审计)
4. 区块链(可信底座)
---
### 5.2 机器人端(感知与执行层)
主要功能:
- 多源数据采集(视觉、运动状态、环境信息)
- 本地运行轻量化 AI 模型
- 行为状态判断与置信度输出
- 在权限范围内执行安全相关动作
- 内置避障、急停等安全机制
**原则:原始隐私数据不直接外传。**
---
### 5.3 AI 决策层设计
AI 决策结果采用**分级模型**
| 决策等级 | 含义 |
|------|------|
| L1 | 低风险,持续观察 |
| L2 | 中风险,主动靠近确认 |
| L3 | 高风险,触发服务流程 |
| L4 | 紧急风险,允许保护性自主执行 |
AI 的判断结果将直接影响其**执行权限范围**。
---
### 5.4 AI 自主执行的权限边界
AI 可自主执行的典型行为包括:
- 主动靠近老人并调整视角
- 停止当前非必要任务
- 主动避让、让出安全空间
- 语音安抚与安全提示
AI 不得执行:
- 强制性身体干预
- 不可逆风险操作
- 医疗与生命决策
---
### 5.5 边缘 / 服务端(协作层)
- 接收机器人行为事件
- 完成隐私脱敏与事件摘要生成
- 触发告警与远程调度
- 管理多角色协作流程
---
### 5.6 管理与展示端
- 实时状态可视化
- 告警与响应时间线
- 行为记录查询
- 区块链存证验证
---
### 5.7 区块链可信底座
采用联盟链架构,用于:
- 关键行为事件摘要上链
- 服务状态流转记录
- 多主体责任签名
- 行为与决策过程的不可篡改存证
区块链不存储原始隐私数据,仅作为可信锚点。
---
## 六、隐私计算与数据安全设计
- 原始视频与感知数据仅在本地使用
- 行为数据以摘要、特征指纹形式流转
- 仅必要信息进入链上存证
- 满足“数据最小化”原则
---
## 七、为什么选择区块链,而不是证书或数据库
### 7.1 传统方案的局限
- 证书解决身份合法性
- 数据库解决内部管理
- 二者均依赖单一中心信任
### 7.2 区块链的核心价值
- 不可篡改
- 多方共同见证
- 自动形成责任链
> 数据库适合管理,区块链适合取信。
---
## 八、项目创新点总结
1. **行为即存证**AI 行为自动转化为可信事件
2. **受约束的智能执行**AI 在权限内主动帮助人
3. **隐私友好的可信协作**:不上传原始隐私数据
4. **服务责任技术化表达**:过程可审计、可追溯
---
## 九、项目综合价值
### 实用价值
提升居家养老与助残服务的安全性与响应效率
### 社会价值
增强公众对智能养老系统的信任度
### 教育与竞赛价值
完整体现新一代信息技术的工程融合能力
---
## 十、总结
“智护链”并非简单的智能监控系统,而是一套:
> **以人为中心、以 AI 决策为支撑、以区块链为可信基础的智能协作系统。**
项目在保证工程可行性的同时,体现了清晰的技术逻辑、人文关怀与现实应用价值,具备参与高水平职业技能竞赛的坚实基础。
---

69
docs/reference2.md Normal file
View File

@@ -0,0 +1,69 @@
# “智护链”项目深度分析与答辩准备指南(新一代信息技术赛道)
## 一、 项目背景与市场需求分析
### 1.1 宏观背景:养老行业的“生存痛点”
- **人口结构压力**中国已进入中度老龄化社会呈现“9073”养老格局90%居家养老、7%社区养老、3%机构养老)。居家养老是绝对主流,但也是监管盲区。
- **护理人力缺口**:专业护理人员极度匮乏,年轻人从事养老意愿低,导致“一人失能,全家失衡”。
- **信任赤字**:虐老事件、摔倒无人知晓、医疗纠纷频发,核心矛盾在于“过程不透明”和“责任不可溯”。
### 1.2 市场需求点
- **安全监测需求**24小时不间断的跌倒、生命体征监测。
- **隐私保护需求**:老人及家属对“摄像头进卧室”存在天然抵触,需要一种“看不见脸但看得见安全”的技术。
- **公信力存证需求**:养老机构和家属需要一个中立、不可篡改的第三方“数字见证人”来划分责任。
---
## 二、 核心技术深度问答 (Q&A)
### 2.1 为什么这个项目一定要使用区块链?(评委必问)
**回答逻辑:**
1. **从“数据管理”到“数据信任”的跨越**
- 传统的数据库系统是由平台方控制的,管理员可以随意修改后台日志。在出现纠纷(如老人跌倒但系统未报警)时,家属会怀疑平台修改了数据以逃避责任。
- 区块链提供了**不可篡改**和**多方见证**的特性。关键行为(跌倒、报警、护理确认)一旦上链,任何一方都无法私自修改,这从技术层面解决了“谁说了算”的问题。
2. **构建分布式信任机制**
- 本项目涉及家属、养老机构、医院、审计机构等多个主体。区块链作为“信任底座”,让这些原本互不信任的环节能够基于同一份真实数据进行协作。
3. **智能合约的自动化合规**
- 通过 Solidity 编写智能合约,可以设定:一旦检测到 L4 级(紧急)风险且 120 已响应,自动触发服务费用结算或保险理赔。这不仅提高了效率,也减少了人为干预。
### 2.2 本项目与市面上现有的智能护理平台有什么区别?
| 维度 | 传统智能护理平台 | “智护链”系统 |
| :--- | :--- | :--- |
| **数据安全性** | 中心化存储,存在泄露或篡改风险 | 区块链存证,分布式共识,不可篡改 |
| **隐私保护** | 依赖原始视频回传,隐私风险高 | AI 边缘计算,隐私计算脱敏,原始数据不出户 |
| **响应机制** | 被动响应(拉绳、按键)或简单识别 | 主动式、分级受约束智能L1-L4具备自主保护逻辑 |
| **公信力** | 平台既是运动员又是裁判员 | 区块链作为技术中立的“数字证人” |
| **协作模式** | 单点对接App 推送) | 多方协同(家属、机构、医疗机构共识上链) |
---
## 三、 系统详细设计
### 3.1 目标人群定位
1. **核心用户**70岁以上、独居或半失能、有一定经济基础且注重隐私保护的老年群体。
2. **特殊用户**:视觉/听觉残障人士(通过项目特有的“触觉/听觉转换”指令集提供服务)。
3. **关联用户**:远方工作的子女、社区网格员、养老机构专业护理人员。
### 3.2 客户群体划分
1. **B端机构客户**:中高端养老院、社区康养中心。他们购买系统是为了降低管理风险,通过“技术可信”来提升品牌溢价。
2. **G端政府客户**:民政局、智慧城市试点项目。用于构建覆盖全市的居家养老安全监测底座。
3. **C端个人/家庭客户)**:购买机器人硬件及订阅“智护链”可信护理服务。
### 3.3 核心功能模块实现
- **AI 边缘识别模块**:在机器人本地运行轻量化神经网络,识别跌倒、呼救、徘徊等行为。
- **隐私计算脱敏模块**将识别结果转化为“行为摘要”ID:001, Action: Fall, Confidence: 0.98, Timestamp: XXX抹除人脸特征。
- **区块链存证模块**:基于 FISCO BCOS将行为摘要及操作员签名打包上链。
- **受约束执行模块**:当检测到风险,机器人执行主动靠近、语音交互、紧急避障等安全动作。
---
## 四、 项目看法与总结(新一代信息技术特色)
**我的看法:**
本项目不仅是技术的堆叠,它体现了**“技术向善”**的理念。
1. **技术融合度高**:将区块链的“硬信任”与人工智能的“软感知”结合,弥补了 AI 容易误判、区块链缺乏感知的短板。
2. **职业素养体现**:在系统设计中预设了分级权限和急停机制,体现了极强的安全意识,这非常符合技能大赛对“职业规范”的要求。
3. **落地可行性强**:采用国产 FISCO BCOS 架构,符合国家信息化安全要求,且模块化设计易于后期在智慧社区大规模推广。
**总结话术(建议答辩使用):**
“智护链”不仅是一台机器人,它是一个**基于技术共识的远程协作网络**。我们用 AI 赋予机器“眼睛”去发现危险,用区块链赋予系统“诚信”去见证服务。我们的目标是让每一位居家老人,都能在不牺牲隐私的前提下,享受到有尊严、有保障、可信赖的智慧养老服务。

422
docs/reference3.md Normal file
View File

@@ -0,0 +1,422 @@
区块链赋能社区居家智慧养老服务的
耦合机制与实现路径研究*
满小欧 杨 扬* 张 雷
(东北大学文法学院,辽宁沈阳110169)
摘 要:伴随着“数字化、精细化与链上服务自动化”区块链技术理念的发展,如何重构与创新
智慧养老服务模式成为亟待探索的新兴议题。通过构建“区块链+社区居家智慧养老服务”模式,
从信息互信、资源互信与制度互信凸显区块链的技术优势,利用联盟链与社区居家养老服务供给资
源、供给系统及供给程序的耦合,实现社区居家养老服务的精准化供给。该模式以基础支撑平台、
区块链应用平台、养老服务管理与服务监管的应用层以及智能应用终端的“四大板块”为平台依托,
以社区基础信息数据库系统、社区养老服务子系统以及社区养老服务操作系统的“三大子系统”为
技术支撑。未来应从制度设计、服务优化、职业化从业者培育等路径出发,推进社区居家养老服务
的智慧化发展。
关键词:智慧养老服务;区块链赋能;社区居家养老
中图分类号:D669 文献标识码:A 文章编号:1672-335X(2025)03-0090-11
DOI:10.16497/j.cnki.1672-335X.202503007
截至2023年年底,我国65岁及以上人口达2.17亿,占总人口的比重为15.4%,我国已进入中度
老龄化社会,[1]推进养老资源的合理配置以及适老化改造已迫在眉睫。党的二十届三中全会审议通过
《中共中央关于进一步全面深化改革、推进中国式现代化的决定》,提出要“积极应对人口老龄化,完善发
展养老事业和养老产业政策机制”,[2]如何实现健康养老资源的有效对接、优化健康养老服务的资源配
置成为当前智慧养老服务产业发展的重要议题。我国已于2019年提出“把区块链作为核心技术自主创
新的重要突破口”,[3]开始探索“区块链+”在民生领域的运用。2021年10月,工信部、民政部、卫健委
联合印发《智慧健康养老产业发展行动计划(2021—2025年)》,提出要“推动区块链等新一代信息技术
在健康及养老领域的集成创新和融合应用,进一步提升健康养老产业及服务的智慧化水平”。[4]区块链
作为一种战略性新兴技术,以“技术赋能”的方式为社区治理与社区公共服务提供了新的底层逻辑与实
践路径。基于此,本研究构建了基于区块链的社区居家智慧养老服务模式,通过系统梳理社区居家智慧
养老领域的理论前沿与发展态势,旨在促进区块链技术与社区居家养老服务的要素耦合及其精准治理,
为我国社区居家智慧养老服务的高质量发展提供现实可能。
一、数字时代的社区居家智慧养老服务研究:理论意涵与发展桎梏
在数字时代背景下,互联网、物联网、大数据等信息技术深度应用于社区居家养老服务体系,驱动了
* 收稿日期:2025-02-24
基金项目:国家社会科学基金重大项目“基于区块链的社区居家养老模式与质量安全体系研究”(22&ZD124)
作者简介:满小欧(1983- ),男,辽宁沈阳人,东北大学文法学院副教授,博士生导师,主要从事社区治理研究。
通讯作者:杨扬(1998- ),女,山西忻州人,东北大学文法学院博士生,专业方向为社区治理。
0
9
中国海洋大学学报(社会科学版)
2025年5月
社区居家养老服务在供给内容、方式及流程等方面的技术革新。当前学界对社区居家智慧养老服务的
内涵、特征和实践进行了较多探讨,为深化养老理念变革与智慧养老服务的推广奠定了理论基础。
(一)社区居家智慧养老服务的理论意涵研究
“智慧”概念源自欧美等国,其强调信息技术深度融入城市与社区建设的具体过程。[5]“社区居家智
慧养老”又称“全智能老年系统”(IntelligentOlderSystem),由英国生命信托基金(BritishLifeTrust
Fund)提出,旨在打破时空局限以推动养老服务高质量发展,通过大数据挖掘与分析技术整合社区、街
道及居家环境的信息资源,为老年人提供精准化、个性化、专业化的养老服务。[6]国外学者多围绕平台系
统、供给主体和服务内容等要素对社区居家智慧养老服务供给机制展开研究。
当前,国内学者主要从技术维度、服务需求、服务供给与服务模式等层面对社区居家智慧养老服务
进行探讨。第一,在技术维度层面,社区居家智慧养老融合了现代信息技术手段,旨在优化资源配置、改
善居家老年人生活质量、提升服务效率与品质,其可视作社区居家养老服务向信息化、智能化转型的重
要路径。[7]第二,在服务需求层面,我国社区居家智慧养老服务的需求可分为生活护理服务、医疗服务和
精神慰藉服务。[8]有学者针对社区居家智慧养老技术接受的影响因素,构建了助推智慧养老政策实施的
策略框架,从伙伴学习、信息公开与简化程度等角度为智慧养老技术的应用提供理论指引。[9]第三,在服
务供给层面,社区居家智慧养老服务主要涵盖两大要素:智慧服务平台与智能终端设备。[10]前者作为桥
梁,联结医疗服务提供者、运营商、服务商、个体及家庭,利用前沿技术精准捕捉、传递并响应老年群体的
服务需求。[11]后者则分为智能穿戴、智能家居及便携式健康监测设备等,通过拓展服务应用场景、拓宽
使用边界及提供个性化服务策略,提升服务品质与供给效率。[12]具体而言,社区居家智慧养老服务是通
过智能设备升级、数据资源整合以及信息资源共享等方式来提高智慧养老服务的供给能力。[13]第四,在
服务模式层面,有学者依托物联网、云计算、大数据、智能硬件及终端五大要素搭建了社区居家智慧养老
服务模式,以实现养老管家服务与远程医疗照护的深度融合。[14]赵奕钧等从需求精准识别、高效数据处
理、智能供需匹配及质量综合评价体系四大环节入手,构建了“医养康护乐”的一体化智慧养老服务模
式。[15]另有学者提出全域养老模式,从全生命周期服务支持、供应链协同、个性化场景服务及利益相关
者参与等维度打造养老服务模式新样板。[16]亦有学者指出,社区居家智慧养老强调运用现代信息科技
整合汇聚涉老数据信息,进而实现对老年人日常生活照料、健康安全管理、休闲娱乐需求等方面的智能
化、即时化响应。[17]因此,社区居家智慧养老是一种将传统社区居家养老模式与现代信息技术深度融合
的创新服务模式,以提升服务质量与效率为目标,通过研发先进的智能化软硬件系统、推广适老化的智
能产品以及建设综合性信息平台等举措,为居家老年人提供更为智能化、多元化、个性化的养老服务方
案。
(二)社区居家智慧养老服务的发展桎梏研究
我国社区居家智慧养老实践的发展动力源自国家层面的战略规划与政策体系的顶层设计。自
2015年国务院确立“促进智慧健康养老产业发展”的目标以来,全国各地展开了社区居家智慧养老服务
模式的实践探索,旨在精准对接老年人群体多元化、个性化服务需求,并在智能化、专业化及标准化养老
服务体系的构建方面取得初步成效。其中,杭州作为先行者,创新性地将“智慧化”理念融入社区居家养
老服务中,通过实施需求精准评估、强化护理人才队伍建设、激发社会成员广泛参与,构建了高质量的智
慧养老服务体系。[18]南京等地则将“时间银行积分机制”引入互助养老模式中,遵循统一化管理、标准化
流程及平台化运作的原则,实现了养老模式的全过程规范化管理。[19]苏州和兰州等地开设就地养老的
“虚拟养老院”,采用政府引导与企业运行的方式,为老年人提供医疗保健、健康护理、衣食住行和生活文
娱等方面的服务。[20]
然而,当前社区居家智慧养老服务在实践中面临诸多挑战:一方面,养老服务的供给端存在供给滞
后、流程烦琐、内容不匹配以及资源分配不均等问题,[21][22]供给模式单一且服务体系分散,忽视了对供
1
9
2025年第3期 满小欧 杨 扬 张 雷:区块链赋能社区居家智慧养老服务的耦合机制与实现路径研究
给网络中资源、系统及程序的深度整合;另一方面,在养老服务的需求端,老年人对智慧养老服务的信任
度低,养老服务平台的使用率与利用率低。[23]此外,养老服务的发展理念滞后,未能充分探讨多元主体
协同、需求反馈机制及信任网络构建等内生性结构,难以构建全面的养老服务供应链体系。因此,要实
现智慧养老服务模式的有效利用与可持续发展,亟须以需求端为切入点,从及时回应用户需求、强化多
元协作、增强服务信任等多方面优化智慧养老服务的供给模式。[24]事实上,将区块链技术融入社区居家
养老服务体系的构建当中,是大数据时代下解决人口老龄化问题、优化社会养老资源配置的新思路和新
办法。首先,区块链的技术特征将助力智慧养老,从供给资源、供给系统与供给程序三个维度解决社区
养老服务难题。其次,社区居家养老服务领域涉及多部门、多环节,要求数据公开透明、全程溯源、不可篡
改等,其场景应用需要区块链的技术支持。基于此,本研究构建了基于区块链的社区居家智慧养老服务模
式,从耦合机理、运行机制与推进路径等视角回应上述问题,为智慧养老服务模式创新提供有益参考。
二、基于区块链的社区居家智慧养老服务模式的耦合机理
“区块链+社区居家智慧养老服务”模式是以区块链技术为支撑构建的社区居家养老服务,在供给
主体、服务需求、供给系统等方面打破传统的科层式组织方式与供给流程,使中心化供给结构变为扁平
化和网格化的多中心结构。该模式通过“联盟链”与社区居家养老服务供给资源、供给系统及供给程序
的耦合,推进社区居家养老服务需求精准识别、养老数据链上集成共享、养老服务供给主体多元协同、养
老服务资源智能匹配,最终实现社区居家养老服务的精准化供给。为进一步验证耦合机理的有效性,研
究团队于2023—2024年对部分区块链试点地区进行了跟踪调研,搜集了问卷、半结构化访谈等相关资
料约10万字,实证检验了区块链技术在社区居家养老服务中的运行效果,访谈对象及编码如表1所示。
表1 访谈对象及编码
访谈对象
编码
人次
项目负责人
养老机构负责人
社区志愿者
社区老年居民
G
S
C
R
5
12
21
33
(一)区块链与社区居家智慧养老服务的联通耦合:信息互信、资源互信与秩序互信
区块链起源于比特币,是记载与存储比特币交易信息的底层技术。区块链的核心是由许多不同节
点组成的分布式账本,具有分布式多中心、可追溯、防篡改、公开透明、智能合约等核心特征。与传统养
老模式相比,区块链技术借助完整的组织体系、制度体系和价值体系,与社区治理与社区公共服务领域
链接耦合,从信息互信、资源互信与秩序互信三个维度重构社区居家智慧养老服务的供给模式,为相关
利益群体提供交互化、个性化、智慧化的养老服务和监管。“区块链+社区居家养老”模式的优势主要体
现在以下三个方面。
1.信息互信:建立社区居家智慧养老服务的信任机制
首先,确保数据透明与安全。区块链通过分布式账本技术,确保所有养老服务相关的数据记录(如
老人健康信息、服务提供记录、费用支付情况等)均被公开且不可篡改地存储在多个节点上。社区居家
智慧养老服务系统的各参与主体能在无需传统信任中介的条件下,安全、自动地交换真实且不可篡改的
数据,有效解决了用户间的“信任危机”。其次,智能合约实现价值互信。智能合约作为区块链技术的重
要组成部分,它允许在满足特定条件时自动执行合同条款,无需第三方中介。在社区居家智慧养老服务
中,智能合约可用于定义服务标准、价格、支付条件等,一旦条件满足,系统将自动触发服务提供与支付
2
9
中国海洋大学学报(社会科学版)
2025年5月
流程,减少了人为干预和信任摩擦,提高服务效率和信任度。最后,服务质量的追溯与监督。区块链技
术为服务质量的追溯与监督提供了可靠手段,每项服务从发起、执行到完成的全过程都被记录在链上,
形成可追溯的服务链。例如,2023年上海市长宁区的“链上健康档案”依托联盟链技术整合辖区内三甲
医院、社区卫生服务中心及家庭医生签约数据,为6.8万名老年人建立不可篡改的电子健康档案。通过
智能合约自动同步诊疗记录、用药信息及健康监测数据,实现跨机构数据共享。当老人突发疾病时,急
救中心可通过链上权限直接调取其过敏史、既往病史及家属联系方式,平均响应时间缩短40%。“区块
链解决了医院数据孤岛问题,家属可通过私钥随时查看健康档案,投诉率下降25%。”(访谈
231220AG4)
2.资源互信:满足用户对服务资源交换共享的需求
首先,完成资源确权与追溯。利用区块链的不可篡改特性,为各类服务资源(如医疗设施、护理人
员、养老服务产品等)建立唯一的数字身份,实现资源的精准确权与全程追溯,从而减少资源信息的不对
称,提升用户对服务资源的信任程度。其次,智能合约促进资源交易。区块链的智能合约可以自动执行
预设的条款和条件,确保服务资源交换过程中的公平、公正与透明。用户与服务提供商之间可以通过智
能合约明确服务内容、价格、交付时间等关键信息,降低交易风险,提高交易效率。最后,构建共享资源
池。借助区块链技术手段延伸养老服务供给的广度与深度,如提供一站式医疗健康管理服务,将医院、
养老机构、医生、药品配送企业和老年患者连成一个数据网,实现线上线下互动、远程服务和可穿戴设备
的连接;家庭医生签约对养老主体行为全过程记录,养老服务提供方在整合大数据的基础上,强化与长
者监护人的信息交互,实现社区居家养老服务的专业化和广覆盖。较为典型的是广州市“区块链+时间
银行”的互助模式,其将志愿者服务时长以通证形式存入个人账户,通证可兑换家政服务或医疗护理。
截至2024年5月,“时间银行”累计存储23万小时服务时长,跨区兑换率达89%。“链上记录公开透
明,兑换服务时不再担心赖账,参与积极性提高了。”(访谈241017AC1)
3.秩序互信:规范社区智慧养老服务领域的有序发展
首先,实现透明监管与服务合规化。政府部门可利用区块链上的存证数据进行审核审计,杜绝养老
补贴金数据造假、不正常交易等舞弊行为。通过技术手段建立起对养老服务企业的有效监管,确保养老
服务质量以及财政资金的安全使用等,解决社区居家智慧养老服务所面临的多环节、多部门、多角色带
来的监管难题。其次,推进标准化服务与质量保障。区块链技术可以助力建立统一的社区居家智慧养
老服务标准体系,通过将服务标准、操作流程、质量标准等关键信息上链,实现服务流程的标准化与透明
化。同时,结合区块链的不可篡改特性,确保服务质量的可追溯性,有利于服务提供方自我监督与改进。
最后,减少因服务引发的矛盾纠纷。区块链保存的服务过程数据、交易记录等信息能够为纠纷解决提供
客观、全面的证据支持。此外,智能合约的自动执行特性通过预设的条款和条件来明确双方的权利与义
务,减少因信息不对称或理解偏差而导致的纠纷。基于此,北京市朝阳区政府搭建养老服务联盟链,接
入48家养老机构与12家监管部门,推行“链上监管沙盒”模式。通过智能合约设定服务标准(如每日巡
查频率、餐食营养配比),违规行为自动触发预警并冻结机构补贴。“链上监管倒逼我们规范流程,但初
期技术适配成本较高,需政策进一步支持。”(访谈240916AS2)
(二)区块链与社区居家智慧养老服务的要素耦合:供给资源、供给系统与供给程序
区块链技术通过优化供给资源的配置、重构供给系统的架构以及革新供给程序的流程,实现区块链
底层平台、技术理念与技术特性与社区居家智慧养老服务要素间的互动与耦合,进而确保养老数据信息
“链上+链下”同步存储,养老服务供给主体“链上+链下”多元协同,养老资源平台“链上+链下”互通共
享,养老服务“链上+链下”精准供给。
1.区块链底层平台与社区居家智慧养老服务供给资源的耦合
依据区块链的开放性和去中心化程度的不同,可将区块链分成公有链、联盟链、私有链。其中,联盟
3
9
2025年第3期 满小欧 杨 扬 张 雷:区块链赋能社区居家智慧养老服务的耦合机制与实现路径研究
链由多个机构节点通过授权控制,实现机构间数据与资源共享的分布式平台,适用于特定的合作网络
内。社区居家智慧养老服务涉及多个机构,如医疗机构、养老服务机构、政府部门等多方之间的数据交
换与共享。因此,根据社区居家智慧养老服务资源与信息需求的多样性,选用“联盟链”模式对链上数据
进行整合、分类与适配,向服务供给主体及第三方平台开通访问权限。在该模式下,预设多个节点作为
记账节点,共同参与区块生成决策。各机构可以根据自身能力和需求,在联盟链上发布服务供给信息,
通过智能合约自动匹配服务需求,提高服务响应速度和资源利用效率。此外,构建智慧养老服务供给主
体的信息共享激励与约束机制,促进供应商动态迭代、集成商高效整合、服务商无缝对接,增强分布式供
应链中多主体间的合作信任,优化信息共享流程,确保利益合理分配与风险共担机制的落实,形成“个性
信息全记录、服务信息全匹配、管理信息全自动”的社区居家智慧养老服务信息与资源链条,以解决服务
供给主体间数据公开、协同、调配、储存等问题。例如,北京市海淀区“时间银行3.0”项目创新采用“双
链架构”,民政链记录服务时长与质量评价,志愿链对接“志愿北京”平台实现积分跨系统兑换。截至
2023年底,注册志愿者达2.4万人,累计存储服务时长38.7万小时,其中23%的积分已通过区块链智
能合约兑换为家政服务。“区块链能够系统自动匹配距离最近的认证护工,将护理时长、血压监测记录
这一类的服务过程数据实时上链,形成闭环监管。”(访谈240115AG3)
2.区块链技术理念与社区居家智慧养老服务供给系统的耦合
从社区居家智慧养老服务需求、服务主体、供需匹配三个维度,厘清区块链技术理念与社区居家智
慧养老服务供给系统的耦合逻辑。一是在服务需求层面,加密算法和智能合约为社区居家智慧养老服
务需求提供了精准识别和高效应对机制。区块链技术依托老年人健康状况、心理偏好及个体特征等数
据,深度挖掘其潜在状态与隐性需求,建立动态更新的社区养老服务需求数据库,为社区单元推荐“一户
一案”的服务方案与服务内容,并充分尊重老年人的自主选择。二是在服务主体层面,区块链的去中心
化为社区、政府及其他居家养老服务供给主体提供了协同合作机制。在横向上,打破养老机构间的“隐
性数据壁垒”,促进养老服务数据与市场监管、医疗、救助等多方信息的跨区域、跨部门、跨层级高效整合
与共享;在纵向上,与民政部业务管理系统深度对接,构建省、市、县三级养老信息联通体系,实现涉老数
据在区块链平台上的统一管理与应用,提高服务供给效率。三是在供需匹配层面,通过区块链分布式记
账机制精准把控服务需求与服务资源之间的匹配。在获取链上利益相关者的养老服务知识与信息的基
础上,有效联结链下养老服务要素供给资源。例如,杭州市余杭区“链上康养”平台运用区块链分布式记
账机制,将辖区32家医疗机构、58个社区服务中心及214名家庭医生纳入资源池。2023年数据显示,
平台通过智能合约实现“15分钟应急响应圈”覆盖率从51%提升至93%,独居老人跌倒报警至护工抵
达的平均时间缩短至6.8分钟。“去年冬天突发头晕,智能手环自动报警后,社区医生5分钟就赶到我
家。后来查链上记录才知道,系统根据我的病史优先匹配了神经内科医生。”(访谈240916AR5)
3.区块链技术特性与社区居家智慧养老服务供给程序的耦合
9
区块链借助分布式账本、智能合约以及非对称加密的技术特性,展现了技术创新在社区居家养老服
务领域的应用潜力,为其优化供给流程、提升服务效率、简化服务程序提供了新的解决方案。一是使用
分布式账本记录部门服务信息与匹配流程。将社区服务主体、社区自治组织、适龄老人、居民家庭、
NGO组织、社会养老机构、政府部门等相关机构组织作为节点接入区块链网络,联盟链下所有信息节点
需要分布在全网,并同步存储。通过养老服务匹配信息同步更新解决信息不对称问题,为“存证”难题提
供解决方案。例如,天津市河西区将养老服务流程分解为22项链上节点,包括服务申请、资质审核、过
程记录及满意度评价。二是利用智能合约明确服务履行规则并自动化执行。基于区块链的社区居家智
慧养老服务可事先规定拟定合约内容,将志愿者、服务机构以及第三方提供的助老服务的书面协议或承
诺通过智能合约的方式存储到区块链中,在满足预设条件时合同自动执行。例如,北京市海淀区“时间
银行”建立了111兑付体系,即1小时服务等同于1个时间币,亦等同于1元机构服务抵扣;同步开
4
中国海洋大学学报(社会科学版)
2025年5月
发了“养老服务ATM机”,支持刷脸提取累积服务。三是采用非对称加密技术授予各部门老年人健康
数据读写权限。老年人及其家庭成员将老人的个人信息、健康状况以及既往病史等信息使用私钥加密
上传;养老服务相关部门数据上链时则使用社区的公钥对数据进行加密,以证明数据传输者身份。利用
加密技术实现对老年人敏感信息存储,兼顾多机构数据共享的需求,提供相对完善的公共安全隐私安全
体系,有效解决健康养老隐私泄露问题。例如,重庆市江北区采用“双密钥体系”管理健康数据,老年人
持私钥加密敏感信息,如病历、用药记录等,社区公钥则用于解密脱敏后的统计指标。
三、基于区块链的社区居家智慧养老服务模式的运行机制
在区块链与社区居家智慧养老服务要素耦合与互动的基础上,如何形成社区居家智慧养老服务自
主、开放的动态循环模式,促进主体间的相互依赖、相互协作与良性互动,成为区块链技术亟待突破的核
心问题。为此,研究构建了以基础支撑层、应用平台层、应用层、应用终端为依托的“四大板块”,形成了
以“三大子系统”为支撑的信息交换、协同联动与全过程评价的运行机制。
(一)“区块链+社区居家智慧养老服务”模式的平台架构:以“四大板块”为依托
“区块链+社区居家智慧养老服务”模式是基于区块链去中心化、分布式记账、自组织的底层逻辑与
技术,将社区居家智慧养老服务体系开放化,使服务供给端、服务资源与服务需求端的数据信息被直接
表达、加密传送、区块打包、合约分析,最终实现社区居家智慧养老服务协同、精准、高效供给的模式。其
中,“区块链+社区居家智慧养老服务”是以“区块链+物联网”为技术核心,由基础支撑平台、区块链应用
平台、应用层的养老服务管理应用系统、养老服务监管系统和智能应用终端四大板块构建而成(图1)。
图1 “区块链+社区居家智慧养老服务”的平台架构
5
9
2025年第3期 满小欧 杨 扬 张 雷:区块链赋能社区居家智慧养老服务的耦合机制与实现路径研究
1.底层数据支持:数据存储与处理的基础支撑层
基础支撑平台以“社区云”、数据中心、物理机等基础设施为构成要素。其中,“社区云”是为特定的
社区成员开发的专有应用,仅有社区智慧居家养老服务的利益相关者享有准入权限,其基础设施可以由
社区、第三方机构或多家机构拥有、管理与运营,并存在于所属机构的内部或外部。“社区云”作为基础
支撑平台的核心,其设计充分体现了数据主权与隐私保护的原则。通过先进的加密技术与访问控制机
制,确保社区成员的个人信息与健康数据仅在授权范围内流通,有效防范了数据泄露与滥用风险。此
外,“社区云”基础设施的灵活性与可扩展性,使其能够根据社区养老服务需求的变化进行动态调整,无
论是增加新的服务功能,还是提升数据处理能力,都能迅速响应,为社区智慧居家养老服务的持续优化
与创新提供平台支撑。
2.技术创新引擎:区块链开发与部署的应用平台层
依托区块链核心服务、智能合约模板库、应用开发部署以及平台运维监控四大模块,将区块链技术
嵌入到社区养老服务中,并运用联盟链模式实现区块链底层平台与社区居家养老供给资源、区块链技术
理念与社区居家养老供给系统、区块链技术特性与社区居家养老供给程序的三大耦合。通过集成区块
链核心服务,确保数据交易的安全性与可追溯性;智能合约模板库的引入,实现了服务条款的自动化执
行与监管,降低了人为干预的风险与成本。平台支持的应用开发部署功能,促进了区块链技术在社区养
老领域的快速迭代与创新,满足服务供给的多元化与个性化需求。同时,“联盟链”模式的采用,不仅强
化了社区内外各参与方之间的协作与信任,还通过跨链式操作,实现了社区居家养老供给资源与区块链
底层平台的高效对接与融合。
3.平台架构系统:多主体融入与协作的应用层
由政府部门、养老服务主体、物业企业、医疗机构、社区志愿服务、保险机构等多主体构成的管理应
用系统及社区养老监管数据中心应用系统,主要功能在于对社区智慧养老服务实时数据进行监管、决策
分析,为社区智慧养老服务管理过程提供业务支撑。应用层作为社区智慧养老服务体系的顶层架构,其
多主体协同的管理应用系统,展现了高度集成与智能化的管理特性。该系统通过集成政府部门政策指
导、养老服务主体的服务供给、物业企业的日常运维、医疗机构的健康监测、社区志愿服务的情感支持以
及保险机构的风险保障等多维度数据,实现了对社区智慧养老服务全链条的实时监管与动态分析。同
时,社区养老监管数据中心应用系统的建立,促进了跨部门、跨领域的协同治理,为构建高效、透明、可持
续的社区智慧养老服务管理体系提供了技术指引。
4.用户交互界面:多渠道高安全的应用终端层
智能应用终端通过手机、触摸屏、计算机等物联网设备的组合使用,为用户提供远程应用操作以及
数据信息交互的平台工具,极大地方便了用户进行远程操作与实时数据交互,增强了用户体验的便捷性
与个性化;此外,对区块链平台运用全过程实行标准体系建设,在充分识别服务平台的规范化需求的同
时,推进平台全链条的协同发展与融合。这一标准体系促进了平台内部各子系统、各服务环节之间的无
缝对接与高效协同,实现了从数据采集、处理、分析到服务提供、反馈评价的全链条闭环管理,引领着养
老服务模式向更加智能化、标准化、人性化的方向迈进。
(二)“区块链+社区居家智慧养老服务”模式的运行机制:以“三大子系统”为支撑
在建立区块链信息平台架构的基础上,“区块链+社区居家智慧养老服务”还包括三个子系统,即基
础信息数据库系统、养老服务子系统和养老服务操作应用系统,从而确保该服务模式下的精准对接与协
同运行。
1.基础信息数据库系统:以“资源要素共享”为环节的信息交换机制
9
基础信息数据库系统是“区块链+社区居家智慧养老服务”平台稳定运行的“基石”,承载着老年人
身体指标、服务需求及养老知识等信息的交换。首先,地方政府在“区块链+社区居家智慧养老服务”模
6
中国海洋大学学报(社会科学版)
2025年5月
式建设中发挥着主导作用,在业务对接、数据上链、业务流程、平台运维、平台安全以及服务运营等方面
承担着建立科学系统的标准体系、提供各养老服务相关部门服务系统的统一接口、促进涉老服务要素的
整合与共享等职责。其次,引入区块链技术进行基础信息数据库的开发,将原先碎片化的部门信息以链
上节点的方式记录集成,引导涉老要素的有序衔接与实时共享,不断提高资源融合效率与利用程度。就
目前而言,基础信息数据库涵盖五个方面的要素资源,具体内容见图2所示。这五大信息数据库构建起
一个全面、动态、高效的“链上社区居家养老信息服务网络”,通过整合和共享各类涉老资源要素,可实现
老年人健康数据、服务需求、政务信息等资源的信息互通与资源共享。
图2 “区块链+社区居家智慧养老服务”模式的运行机制
2.社区养老服务子系统:以“多部门共同参与”为节点的协同联动机制
社区养老服务子系统的建设作为保障区块链信息平台健康运行的“骨干”,是一个为促使养老服务
供给方与需求方建立连接、深度融合、交叉发展而提供的养老服务信息平台系统。不同于以往“互联网
+”养老服务模式下的“DMP模式”①,“区块链+社区居家智慧养老服务”取消了养老服务信息平台对
供给方的筛选这一环节,以“PTD模式”②为主要表现形式,指的是养老服务供给方在根据老年人自身的
健康风险评级、身体心理健康量表分析等,综合评判后计算出服务对象的养老服务需求迫切程度,将特
定的服务方案通过智能养老设备终端直接发送给老年人,为老年人主动提供上门服务。其中,养老服务
子系统主要由六个业务系统组成,这些养老服务子系统将集成于社区服务信息联盟链架构下的各部门
信息由特定机构制定并发布,并在确保安全合法的前提下高效流转,从而促使“链上部门”间良性互动与
协同合作,实现养老服务的无缝衔接与高效协同。
3.社区养老服务操作系统:以“用户精准匹配”为枢纽的全过程评价机制
社区居家养老服务操作系统的建设指政府用户、组织机构用户以及老年人个人用户共享一个由联
盟链架构的社区居家养老服务窗口,是“区块链+社区居家智慧养老服务”模式落地并稳定运行的重要
“DMP模式”表示需求者、中介者、供给者三者之间的服务运转关系,在呼叫助老中心和养老服务热线平台中应用,服务中介平台
为需求者和供给者搭建服务需求沟通桥梁,能够快速简洁地收集需求者的信息并传递给服务供给者,实现服务需求的快速反应。
“PTD模式”是指服务提供者与服务需求者的关系。服务提供者主动从服务需求方了解服务需求,并提供服务供给。
7
9
2025年第3期 满小欧 杨 扬 张 雷:区块链赋能社区居家智慧养老服务的耦合机制与实现路径研究
支撑。“区块链+社区居家智慧养老服务”的操作系统作为供需信息交互的枢纽,借助区块链技术即时
捕获老年人的服务需求,并以指令形式精准推送至匹配的养老服务供应商。此过程的核心在于开发三
大应用平台,分别针对老年人及其家庭、服务管理中心以及养老服务供应商。一方面,老年人及家庭成
员利用手机或其他智能终端发出需求信息,由社区居家养老服务管理中心接收并传递给相匹配的养老
服务提供方;另一方面,养老服务供应商在获得政府门户相关授权的指令后,根据智能合约的内容履责。
此外,养老服务供应商可提供“点单式”的服务申请,并在服务完成后接受一对一的质量评价与反馈。区
块链技术赋能的社区居家智慧养老服务平台,全面记录并实时处理交易数据,累积形成丰富的数据集。
此机制不仅助力服务机构优化服务流程,提升服务质量,同时为用户选择服务商提供科学依据,并为政
府精准分配养老资源提供决策支持。
四、基于区块链的社区居家智慧养老服务模式的推进路径
数字化转型为推动养老产业的高质量发展带来了新契机,发展数字养老是实现传统养老模式转型
的必由之路。基于“区块链+社区居家智慧养老服务”模式的耦合机理与运行机制,未来政府应以老年
群体需求为根本导向,将“积极老龄化”理念融入服务模式建设的全过程,从制度、服务、人才队伍三方面
入手,为“区块链+社区居家智慧养老服务”模式运行提供保障,推动我国养老服务事业和产业的高质
量、高水平发展。
(一)数字赋“治”:打造“区块链+社区居家智慧养老服务”的可持续生态网
作为承担养老服务的责任主体,政府主导着区块链网络平台与数据库基础设施等建设。然而,当前
信息平台构建面临着设备接口不统一、数据格式多样、系统碎片化等问题,“数据孤岛”现象仍然普遍,养
老资源利用率低下且重复建设频发。此外,数字养老服务行业标准体系缺失,涵盖准入、质监、风控及管
理规范等方面的操作指南匮乏,阻碍了数字养老服务的普及与发展。因而需要政府强化政策保障,为
“区块链+社区居家智慧养老服务”模式提供良好的环境场域。一是健全政策体系。应颁布关于“区块
链+”应用的法律法规与管理规章,做好信息规划与信息公开保护的相关工作,并结合各地实际,细化
“区块链+社区居家养老”服务细则,如出台服务人员执业法等。二是确立统一的养老服务行业标准化
体系,涵盖服务流程、质量监控及老年人需求评估机制,同步完善从业人员资格认证与管理规范,加强各
部门主体间数据的标准化建设,打破“数据孤岛”,完善部门协作与资源共享的运行机制。三是强化对现
有“时间银行”等虚拟货币的管理与应用。应用区块链技术,确保“养老币”等时间资产的存储与兑换公
开与透明,为智能合约的履责与执行提供制度支持,如细化“养老币”的运营规则等,即低龄老年人通过
参与社区志愿服务累积时间,未来在高龄时换取等值的志愿服务时间,实现了服务的跨期交换与自我保
障。[25]四是积极引导社会力量参与建设。搭建“区块链+社区居家养老”的服务平台,开展与养老服务
供应商、服务商等主体的协作,通过服务采购或外包、资金补助和税收优惠等方式吸引各方发挥优势,借
助市场培育完善联养生态链。
(二)数字赋“能”:构建“区块链+社区居家智慧养老服务”的质量安全体系
如何开发契合老年人需求的智能终端,激活数字养老市场,关键在于健全“区块链+社区居家养老”
的质量安全体系。然而,数字养老产品实际提供中存在着供给不足、质量低下等问题,老年人对数字养
老服务产品存在排斥心理,缺乏数字使用技能。此外,数字养老产品相关的用户操作繁杂、适老化改造
程度低与社会支持不足则会加剧老年人数字技能的匮乏。对此,应结合区块链的技术优势,从准入门
槛、质量监管等方面提升社区居家养老服务的质量水平。一是设立产品与服务准入门槛,实行质量安全
风险识别。通过对“链上”社区居家智慧养老服务需求与服务资源匹配、服务供给过程中的数据分析与
监控,主动识别存在的潜在质量安全风险。二是实施质量安全动态跟踪。依托区块链开放、透明等功能
特性,对社区居家养老服务供给的各个环节与节点的质量安全进行全程动态跟踪。三是实行质量安全
8
9
中国海洋大学学报(社会科学版)
2025年5月
监管反馈,在社区居家养老服务完成后,依托区块链的数据加密、不可篡改等功能特性对服务质量、服务
效果等进行收集与储存记录,完成质量安全监管反馈的闭环管理。考虑到老年群体的技术接受度低等
现实问题,需对区块链技术进行适老化改造,以增强老年群体的技术应用能力。具体措施包括:创新密
钥管理方式,简化或设计新型密钥形态,规避密钥遗忘丢失问题;开发适应老年人认知特点的界面设计,
优化信息查询、输入及确认流程,提升其数字适应能力;为丧失自理能力的高龄老人提供代理技术支持
服务等。
(三)数字赋“教”:孵化“区块链+社区居家智慧养老服务”职业化从业人员
当前社区居家智慧养老服务质量良莠不齐的主要原因在于养老服务人员短缺、服务专业化程度不
足。有数据显示,全国福利与养老机构从业人员总数约30万,其中持有国家职业资格证书的专业护理
人才占比不到三分之一,且从业人员以40岁以上年龄层为主,反映出专业护理力量薄弱及年龄结构不
均的问题。[26]因此,对于“区块链+”智慧养老服务产业而言,从业人员具备一定的信息技术应用能力、
扎实的技术应用知识和技能以及良好的数字素养能为行业长远发展提供必要支持。一是强化区块链等
前沿技术人才培养政策的执行力。鼓励高校和职业院校设置养老服务相关专业,培养掌握系统化专业
知识和技能知识的复合型人才,引导院企合作、院校联合培养推动人才培养模式创新。二是全链路打通
智慧养老数字技能人才培养。依托联盟链联合城市、县(区)、街道(镇)、社区(村)各层级,打造“区块链
+”数字养老教育培训基地,包括技术实训中心和教培点,为护理人员、社区相关工作者、家庭成员等提
供“区块链+应用”的科技培训。三是打造数字思维下老龄社会的“韧性治理”。提升行业人才吸引力与
薪酬福利待遇,完善区块链技术人才的考评与激励制度,通过政策宣传与媒体导向,改变公众传统的养
老观念,提升行业内服务人员的职业认同感与荣誉感,从而有效缓解社区居家养老服务的供需矛盾,营
造良好的社会养老服务氛围。
综上,“区块链+社区居家智慧养老服务”模式作为一种工具形式与供给内容的创新,应积极回应
“积极老龄化”的价值理念,促使区块链技术由理念特征向实践推进的路径发展。后续研究应从需求端
的现实落差为突破口,借助系统化的机制构建与多功能的平台建设推进“区块链+社区居家智慧养老服
务”各要素间的互动与耦合,激发社区智慧养老服务体系的内生动力。
参考文献:
[1]新华社.财经聚焦|养老照护新职业涌现,专业人才缺口大[EB].https://baijiahao.baidu.com/s?id=1807165104396345320&wfr=
spider&for=pc,2024-08-12/2024-12-01.
[2]中国政府网.中共中央关于进一步全面深化改革推进中国式现代化的决定[EB].https://www.gov.cn/zhengce/202407/content_
6963770.htm?jump=true,2024-07-21/2024-12-01.
[3]赵金旭,孟天广.技术赋能:区块链如何重塑治理结构与模式[J].当代世界与社会主义,2019,(3):187-194.
[4]澎湃网.工信部等三部门联合印发关于《智慧健康养老产业发展行动计划(2021—2025年)》[EB].https://m.thepaper.cn/baijiahao
_15069707,2021-10-26/2024-12-01.
[5]王成,李东阳,周玉萍.社区智慧养老服务供给———责任网络、现实约束与机制构建[J].人口与经济,2023,(1):120-138.
[6]纪春艳.居家智慧养老的实践困境与优化路径[J].东岳论丛,2022,43(7):182-190.
[7]左美云.智慧养老的内涵、模式与机遇[J].中国公共安全,2014,(10):48-50.
[8]陈璐,文琬.互补还是替代:家庭照料与社区居家养老服务[J].中国卫生政策研究,2021,14(11):35-42.
[9]马琪,陈浩鑫.智慧养老技术接受与政策助推路径初探———基于2005—2020年国内外文献的系统性整合分析[J].中国科技论坛,
2021,(4):161-170.
[10]万立军,王琳,刘宗波.国内外智慧养老平台现状[J].中国老年学杂志,2020,40(5):1087-1091.
[11]高鹏,杨翠迎.智慧养老的精准化供给逻辑与实践:来自上海市的调研[J].经济体制改革,2021,(5):187-193.
[12]张锐昕,张昊.智慧养老助推养老服务体系优化:思路与进路[J].行政论坛,2020,27(6):139-145.
[13]宁靓,李纪琛.政府购买社区居家养老服务的绩效棱柱模型评价研究[J].中国海洋大学学报(社会科学版),2020,(6):88-96.
9
9
2025年第3期满小欧 杨 扬 张 雷:区块链赋能社区居家智慧养老服务的耦合机制与实现路径研究
[14] 左美云.智慧养老的含义与模式[J].中国社会工作,2018,(32):26-27.
[15] 贾妍,蓝志勇,刘润泽.精准养老:大数据驱动的新型养老模式[J].公共管理学报,2020,17(2):95-103,171.
[16] 梁昌勇,洪文佳,马一鸣.全域养老:新时代智慧养老发展新模式[J].北京理工大学学报(社会科学版),2022,24(6):116-124.
[17] 张泉,李辉.从“何以可能”到“何以可行”———国外智慧养老研究进展与启示[J].学习与实践,2019,(2):109-118.
[18] 常敏,孙刚锋.整体性治理视角下智慧居家养老服务体系建设研究———以杭州创新实践为样本[J].中共福建省委党校学报,2017,
(3):85-91.
[19] 曹海军,闫晓玲.时间银行互助养老服务项目跨部门协作结果解释———基于多案例的比较研究[J].经济社会体制比较,2023,(2):
33-41.
[20] 杜孝珍,孙婧娜.我国虚拟养老院发展的优势、风险及路径[J].上海行政学院学报,2020,21(4):74-85.
[21] 王莉莉.基于“服务链”理论的居家养老服务需求、供给与利用研究[J].人口学刊,2013,35(2):49-59.
[22] 封铁英,马朵朵.包容性发展视域下社区居家养老服务资源密度分布与均等化评估[J].西北大学学报(哲学社会科学版),2020,50
(4):108-119.
[23] 刘晓梅,李蹊.社区居家养老研究的回顾与展望———基于Citespace的文献计量分析[J].学习与探索,2022,(3):33-40.
[24] 封铁英,马朵朵.社区居家养老服务如何包容性发展?一个理论分析视角[J].社会保障评论,2020,4(3):77-89.
[25] 徐俊,刘丽杭.“数字赋能”养老服务时间银行:以区块链“嵌入式”技术创新为基础[J].中共天津市委党校学报,2023,25(2):86-95.
[26] 钟仁耀,王怀月.城市社区智能居家养老服务模式探讨[J].理论探索,2023,(3):90-97.

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2378
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

27
package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@tailwindcss/postcss": "^4.1.18",
"@vueuse/core": "^14.1.0",
"echarts": "^6.0.0",
"mockjs": "^1.1.0",
"pinia": "^3.0.4",
"vue": "^3.5.24",
"vue-router": "^4.6.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"autoprefixer": "^10.4.23",
"postcss": "^8.5.6",
"tailwindcss": "^4.1.18",
"vite": "^7.2.4"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {},
},
}

1
public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

17
src/App.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup>
</script>
<template>
<router-view></router-view>
</template>
<style>
/* 全局样式覆盖 */
body {
margin: 0;
padding: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background-color: #f9fafb; /* bg-gray-50 */
color: #111827; /* text-gray-900 */
}
</style>

1
src/assets/vue.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

After

Width:  |  Height:  |  Size: 496 B

View File

@@ -0,0 +1,43 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

View File

@@ -0,0 +1,36 @@
<template>
<div class="min-h-screen bg-slate-900 text-white font-sans overflow-hidden">
<!-- Top Bar -->
<header class="h-14 bg-slate-800/50 backdrop-blur-md border-b border-slate-700 flex items-center justify-between px-6 fixed w-full z-50">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center font-bold">G</div>
<span class="text-lg font-semibold tracking-wide">智慧城市·养老监管大脑</span>
</div>
<div class="text-sm text-slate-400 flex items-center space-x-4">
<router-link to="/" class="hover:text-white transition-colors flex items-center px-3 py-1.5 rounded bg-slate-700/50 border border-slate-600 hover:bg-slate-700">
<span class="mr-2"></span> 退出监管舱
</router-link>
<span>{{ currentTime }}</span>
</div>
</header>
<!-- Main Content -->
<main class="pt-14 h-screen w-full relative">
<!-- Background Grid -->
<div class="absolute inset-0 z-0 opacity-20 pointer-events-none"
style="background-image: radial-gradient(#4f46e5 1px, transparent 1px); background-size: 30px 30px;">
</div>
<div class="relative z-10 h-full p-6">
<router-view></router-view>
</div>
</main>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useNow, useDateFormat } from '@vueuse/core'
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
</script>

View File

@@ -0,0 +1,44 @@
<template>
<div class="min-h-screen bg-gray-100 flex">
<!-- Sidebar -->
<aside class="w-64 bg-trust-blue text-white flex-shrink-0">
<div class="p-6 border-b border-blue-800">
<h1 class="text-xl font-bold">康养协作平台</h1>
<p class="text-xs text-blue-300 mt-1">Agency Workspace</p>
</div>
<nav class="mt-6">
<router-link to="/" class="block px-6 py-3 hover:bg-blue-800 transition-colors border-l-4 border-transparent hover:border-white text-blue-200">
<span class="inline-block w-6">🏠</span> 返回系统首页
</router-link>
<div class="h-px bg-blue-800 my-2 mx-6"></div>
<router-link to="/agency/workspace" class="block px-6 py-3 hover:bg-blue-800 transition-colors border-l-4 border-transparent hover:border-white">
<span class="inline-block w-6">📊</span> 工作台
</router-link>
<div class="px-6 py-3 text-blue-400 text-xs uppercase tracking-wider mt-4">任务管理</div>
<a href="#" class="block px-6 py-3 hover:bg-blue-800 transition-colors border-l-4 border-transparent hover:border-white opacity-50 cursor-not-allowed">
<span class="inline-block w-6">🚑</span> 紧急响应
</a>
<a href="#" class="block px-6 py-3 hover:bg-blue-800 transition-colors border-l-4 border-transparent hover:border-white opacity-50 cursor-not-allowed">
<span class="inline-block w-6">📝</span> 护理记录
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto">
<header class="bg-white shadow-sm h-16 flex items-center justify-between px-8">
<h2 class="text-lg font-semibold text-gray-800">今日值班张护理员</h2>
<div class="flex items-center space-x-2 text-sm text-gray-600">
<span class="h-2 w-2 bg-green-500 rounded-full"></span>
<span>系统在线</span>
</div>
</header>
<div class="p-8">
<router-view></router-view>
</div>
</main>
</div>
</template>
<script setup>
</script>

View File

@@ -0,0 +1,41 @@
<template>
<div class="min-h-screen bg-[#0f172a] text-slate-300 font-mono">
<!-- Blockchain Header -->
<header class="h-16 border-b border-slate-800 bg-[#0f172a]/90 backdrop-blur fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-6 h-6 border-2 border-blue-500 rounded animate-spin-slow"></div>
<span class="text-xl font-bold text-white">FISCO BCOS Explorer</span>
<span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 text-xs border border-blue-500/20">Testnet</span>
</div>
<nav class="flex space-x-6 text-sm items-center">
<router-link to="/" class="text-slate-400 hover:text-white flex items-center px-3 py-1 rounded border border-slate-700 hover:border-slate-500 transition-colors">
<span class="mr-1"></span> Mainnet
</router-link>
<router-link to="/blockchain/explorer" class="text-white border-b-2 border-blue-500 pb-5 pt-5">概览</router-link>
<a href="#" class="hover:text-white transition-colors">区块</a>
<a href="#" class="hover:text-white transition-colors">交易</a>
<a href="#" class="hover:text-white transition-colors">合约</a>
</nav>
</div>
</header>
<!-- Main Content -->
<main class="pt-20 pb-12 px-4 max-w-7xl mx-auto">
<router-view></router-view>
</main>
</div>
</template>
<script setup>
</script>
<style scoped>
.animate-spin-slow {
animation: spin 3s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>

View File

@@ -0,0 +1,35 @@
<template>
<div class="min-h-screen bg-gray-50 font-sans">
<!-- Client Layout Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold text-vitality-orange">智护链</span>
<span class="ml-2 text-sm text-gray-500">守护端</span>
</div>
</div>
<div class="flex items-center space-x-4">
<router-link to="/" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium flex items-center">
<span class="mr-1">🏠</span> 退出
</router-link>
<router-link to="/client/dashboard" class="text-gray-600 hover:text-vitality-orange px-3 py-2 rounded-md text-sm font-medium">首页</router-link>
<router-link to="/client/timebank" class="text-gray-600 hover:text-vitality-orange px-3 py-2 rounded-md text-sm font-medium">时间银行</router-link>
<div class="ml-4 flex items-center">
<img class="h-8 w-8 rounded-full" src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User Avatar" />
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<router-view></router-view>
</main>
</div>
</template>
<script setup>
</script>

View File

@@ -0,0 +1,36 @@
<template>
<div class="min-h-screen bg-gray-900 font-mono text-white">
<!-- Robot Layout Header -->
<header class="bg-black border-b border-gray-800">
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-12 items-center">
<div class="flex items-center">
<div class="h-3 w-3 bg-green-500 rounded-full animate-pulse mr-2"></div>
<span class="text-lg font-bold tracking-wider">EDGE-ROBOT-082</span>
</div>
<div class="flex space-x-4 text-xs text-gray-400 items-center">
<router-link to="/" class="hover:text-white transition-colors flex items-center px-2 py-1 border border-gray-700 rounded bg-gray-800">
<span class="mr-1"></span> EXIT TERMINAL
</router-link>
<span>CPU: 32%</span>
<span>MEM: 412MB</span>
<span>NET: 5G/Connected</span>
</div>
</div>
</div>
</header>
<!-- Main Content (Full Screen) -->
<main class="h-[calc(100vh-3rem)] overflow-hidden relative">
<router-view></router-view>
<!-- Overlay Debug Info -->
<div class="absolute bottom-4 right-4 text-xs text-gray-500 opacity-50 pointer-events-none">
FIRMWARE: v2.4.1 | MODEL: YOLOv8-Nano
</div>
</main>
</div>
</template>
<script setup>
</script>

10
src/main.js Normal file
View File

@@ -0,0 +1,10 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

81
src/router/index.js Normal file
View File

@@ -0,0 +1,81 @@
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Landing',
component: () => import('../views/LandingPage.vue')
},
{
path: '/login',
name: 'Login',
component: () => import('../views/LoginPage.vue')
},
{
path: '/client',
component: () => import('../layouts/ClientLayout.vue'),
children: [
{
path: 'dashboard',
name: 'ClientDashboard',
component: () => import('../views/client/Dashboard.vue')
},
{
path: 'timebank',
name: 'TimeBank',
component: () => import('../views/client/TimeBank.vue')
}
]
},
{
path: '/robot',
component: () => import('../layouts/RobotLayout.vue'),
children: [
{
path: 'monitor',
name: 'RobotMonitor',
component: () => import('../views/robot/Monitor.vue')
}
]
},
{
path: '/agency',
component: () => import('../layouts/AgencyLayout.vue'),
children: [
{
path: 'workspace',
name: 'AgencyWorkspace',
component: () => import('../views/agency/Workspace.vue')
}
]
},
{
path: '/admin',
component: () => import('../layouts/AdminLayout.vue'),
children: [
{
path: 'dashboard',
name: 'AdminDashboard',
component: () => import('../views/admin/Dashboard.vue')
}
]
},
{
path: '/blockchain',
component: () => import('../layouts/BlockchainLayout.vue'),
children: [
{
path: 'explorer',
name: 'BlockchainExplorer',
component: () => import('../views/blockchain/Explorer.vue')
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router

72
src/stores/global.js Normal file
View File

@@ -0,0 +1,72 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { useNow, useDateFormat } from '@vueuse/core'
export const useGlobalStore = defineStore('global', () => {
// 模拟的全局数据库
const alerts = ref([])
const auditLogs = ref([
{ hash: '0x8f2a...9b1c', time: '12:30:45', desc: '完成午餐进食' },
{ hash: '0x3d4e...1f9a', time: '08:15:22', desc: '按时服用降压药' },
{ hash: '0x7a8b...2c3d', time: '07:00:10', desc: '晨间生命体征检测' },
])
// 机器人状态
const robotStatus = ref({
level: 'L1',
hash: null,
location: '客厅'
})
// 动作:触发告警(由机器人端调用)
const triggerAlert = (level, message) => {
const time = useDateFormat(useNow(), 'HH:mm:ss').value
const id = Date.now()
// 更新机器人状态
robotStatus.value.level = level
// 如果是 L4生成链上证据
if (level === 'L4') {
const hash = '0x' + Math.random().toString(16).slice(2, 10) + '...' + Math.random().toString(16).slice(2, 6)
robotStatus.value.hash = hash
// 写入审计日志
auditLogs.value.unshift({
hash,
time,
desc: `[紧急] ${message} - 证据已固化`
})
}
// 写入告警队列
alerts.value.unshift({
id,
level,
time,
type: level === 'L4' ? '跌倒告警' : '异常行为',
desc: message,
read: false
})
}
// 动作:清除告警(由机构端/家属端调用)
const resolveAlert = (id) => {
const index = alerts.value.findIndex(a => a.id === id)
if (index !== -1) {
alerts.value.splice(index, 1)
// 如果没有 L4 告警了,恢复机器人状态
if (!alerts.value.some(a => a.level === 'L4')) {
robotStatus.value.level = 'L1'
}
}
}
return {
alerts,
auditLogs,
robotStatus,
triggerAlert,
resolveAlert
}
})

7
src/style.css Normal file
View File

@@ -0,0 +1,7 @@
@import "tailwindcss";
@theme {
--color-trust-blue: #1e3a8a;
--color-vitality-orange: #f97316;
--color-alert-red: #ef4444;
}

134
src/views/LandingPage.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex items-center justify-center p-4">
<div class="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- Left: Intro -->
<div class="space-y-8 text-white">
<div class="inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-400/30 rounded-full px-4 py-1.5 backdrop-blur-sm">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</span>
<span class="text-sm font-medium text-blue-300">基于区块链+隐私计算的新一代养老协作网络</span>
</div>
<h1 class="text-5xl lg:text-7xl font-extrabold tracking-tight leading-tight">
智护链
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-teal-300">SmartCare Chain</span>
</h1>
<p class="text-xl text-slate-300 max-w-lg leading-relaxed">
以人为中心以行为为存证连接家庭机构与监管的信任桥梁让每一次护理都值得信赖
</p>
<div class="flex items-center space-x-4 pt-4">
<button @click="router.push('/login')" class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 transition-all transform hover:-translate-y-1">
立即启动系统
</button>
<a href="#" class="px-8 py-4 bg-slate-800/50 hover:bg-slate-800 text-white rounded-xl font-semibold text-lg border border-slate-700 backdrop-blur transition-all">
查看技术白皮书
</a>
</div>
<div class="grid grid-cols-3 gap-6 pt-8 border-t border-slate-700/50">
<div>
<div class="text-3xl font-bold text-white">0s</div>
<div class="text-sm text-slate-400 mt-1">隐私计算延迟</div>
</div>
<div>
<div class="text-3xl font-bold text-white">100%</div>
<div class="text-sm text-slate-400 mt-1">链上存证率</div>
</div>
<div>
<div class="text-3xl font-bold text-white">L4</div>
<div class="text-sm text-slate-400 mt-1">最高防护等级</div>
</div>
</div>
</div>
<!-- Right: Role Cards -->
<div class="relative">
<!-- Decoration BG -->
<div class="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl blur-2xl opacity-20 animate-pulse"></div>
<div class="relative bg-slate-800/80 backdrop-blur-xl border border-slate-700 rounded-2xl p-8 shadow-2xl">
<h3 class="text-xl font-semibold text-white mb-6 flex items-center">
<span class="mr-2">🚀</span> 快速进入演示终端
</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div v-for="role in roles" :key="role.id"
@click="navigateTo(role.path)"
class="group relative p-4 rounded-xl border border-slate-600/50 bg-slate-700/30 hover:bg-blue-600/20 hover:border-blue-500/50 cursor-pointer transition-all duration-300 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-transparent to-white/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="relative z-10 flex items-start space-x-4">
<div class="p-3 rounded-lg bg-slate-800 group-hover:bg-blue-500/20 text-2xl transition-colors">
{{ role.icon }}
</div>
<div>
<h4 class="text-white font-bold group-hover:text-blue-300 transition-colors">{{ role.name }}</h4>
<p class="text-xs text-slate-400 mt-1 leading-snug">{{ role.desc }}</p>
</div>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-slate-700 flex justify-between items-center text-xs text-slate-500">
<span>System Status: <span class="text-green-400">Online</span></span>
<span>Build v2.0.1 (Dev)</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const roles = [
{
id: 'client',
name: '家属/用户端',
desc: '查看亲人状态,管理隐私权限,参与时间银行互助。',
icon: '👨‍👩‍👧',
path: '/client/dashboard'
},
{
id: 'robot',
name: '机器人端 (Edge)',
desc: '模拟边缘计算节点展示AI识别与L1-L4决策逻辑。',
icon: '🤖',
path: '/robot/monitor'
},
{
id: 'agency',
name: '机构/护理端',
desc: '多机协同指挥,接收报警并进行链上签名确认。',
icon: '🏥',
path: '/agency/workspace'
},
{
id: 'admin',
name: '政府监管端',
desc: '全域态势感知大屏,审计溯源与纠纷仲裁。',
icon: '🏛️',
path: '/admin/dashboard'
},
{
id: 'blockchain',
name: '区块链浏览器',
desc: '查看分布式账本,验证智能合约自动执行逻辑。',
icon: '🔗',
path: '/blockchain/explorer'
}
]
const navigateTo = (path) => {
router.push(path)
}
</script>

62
src/views/LoginPage.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
<div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Header -->
<div class="bg-trust-blue px-8 py-10 text-center relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
<h2 class="text-3xl font-bold text-white relative z-10">身份认证</h2>
<p class="text-blue-200 mt-2 text-sm relative z-10">连接至智护链可信协作网络</p>
</div>
<!-- Form -->
<div class="p-8">
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">账号 / 终端ID</label>
<input type="text" v-model="username" placeholder="输入 ID (如 user01, robot01)"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">安全密钥</label>
<input type="password" placeholder="••••••••"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" />
</div>
<button @click="handleLogin" class="w-full bg-trust-blue hover:bg-blue-800 text-white font-bold py-3 rounded-lg shadow-lg shadow-blue-900/20 transition-all transform active:scale-95">
安全登录
</button>
</div>
<div class="mt-6 text-center text-xs text-gray-400">
<p>基于 FISCO BCOS 区块链身份认证服务 (DID)</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const username = ref('')
const handleLogin = () => {
// 简单的路由分发逻辑,模拟登录
const id = username.value.toLowerCase()
if (id.includes('robot')) {
router.push('/robot/monitor')
} else if (id.includes('agency')) {
router.push('/agency/workspace')
} else if (id.includes('admin')) {
router.push('/admin/dashboard')
} else if (id.includes('chain')) {
router.push('/blockchain/explorer')
} else {
// 默认跳转到用户端
router.push('/client/dashboard')
}
}
</script>

View File

@@ -0,0 +1,112 @@
<template>
<div class="h-full flex flex-col space-y-6">
<!-- Top KPI Cards -->
<div class="grid grid-cols-4 gap-6">
<div v-for="kpi in kpis" :key="kpi.label" class="bg-slate-800/50 backdrop-blur border border-slate-700 p-4 rounded-xl">
<div class="text-sm text-slate-400">{{ kpi.label }}</div>
<div class="text-2xl font-bold text-white mt-1">{{ kpi.value }}</div>
<div class="text-xs mt-2" :class="kpi.trendUp ? 'text-green-400' : 'text-red-400'">
{{ kpi.trendUp ? '↑' : '↓' }} {{ kpi.trend }} vs last week
</div>
</div>
</div>
<!-- Main Vis Area -->
<div class="flex-1 grid grid-cols-3 gap-6 min-h-0">
<!-- Map Area (Center) -->
<div class="col-span-2 bg-slate-800/30 border border-slate-700 rounded-xl relative overflow-hidden group">
<!-- Decoration Grid -->
<div class="absolute inset-0 opacity-20"
style="background-image: radial-gradient(#4f46e5 1px, transparent 1px); background-size: 20px 20px;">
</div>
<!-- Mock Map Content -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative w-3/4 h-3/4 border-2 border-indigo-500/30 rounded-full animate-pulse-slow flex items-center justify-center">
<div class="w-2/3 h-2/3 border border-indigo-400/20 rounded-full"></div>
<!-- Hotspots -->
<div class="absolute top-1/4 right-1/4 w-3 h-3 bg-red-500 rounded-full shadow-[0_0_15px_rgba(239,68,68,0.8)] animate-ping"></div>
<div class="absolute bottom-1/3 left-1/3 w-2 h-2 bg-green-500 rounded-full shadow-[0_0_10px_rgba(34,197,94,0.8)]"></div>
</div>
<div class="absolute bottom-4 right-4 bg-black/60 px-3 py-1 rounded text-xs text-indigo-300 border border-indigo-500/30">
Real-time Monitoring Active
</div>
</div>
</div>
<!-- Right Panel: Audit & Alerts -->
<div class="col-span-1 flex flex-col space-y-6">
<!-- Recent Alerts -->
<div class="flex-1 bg-slate-800/50 border border-slate-700 rounded-xl p-4 overflow-hidden flex flex-col">
<h3 class="text-sm font-bold text-slate-300 mb-3 uppercase tracking-wider">实时告警流 (Alert Stream)</h3>
<div class="flex-1 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
<div v-for="alert in store.alerts" :key="alert.id" class="bg-slate-700/50 p-3 rounded border-l-2 animate-slide-in" :class="alert.level === 'L4' ? 'border-red-500' : 'border-orange-500'">
<div class="flex justify-between items-start">
<span class="text-xs font-bold text-white">{{ alert.type }}</span>
<span class="text-[10px] text-slate-400">{{ alert.time }}</span>
</div>
<div class="text-xs text-slate-300 mt-1">{{ alert.desc }}</div>
</div>
<div v-if="store.alerts.length === 0" class="text-center text-xs text-slate-500 py-4">暂无实时告警</div>
</div>
</div>
<!-- Audit Log -->
<div class="h-1/3 bg-slate-800/50 border border-slate-700 rounded-xl p-4">
<h3 class="text-sm font-bold text-slate-300 mb-3 uppercase tracking-wider">区块链审计日志 (Audit Log)</h3>
<div class="space-y-2">
<div v-for="log in store.auditLogs" :key="log.hash" class="text-xs font-mono flex justify-between items-center p-2 hover:bg-white/5 rounded transition-colors cursor-pointer animate-fade-in">
<span class="text-green-400"> Verified</span>
<span class="text-slate-500 truncate w-32">{{ log.hash }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useGlobalStore } from '../../stores/global'
const store = useGlobalStore()
const kpis = ref([
{ label: '覆盖社区数', value: '128', trend: '12%', trendUp: true },
{ label: '在线机器人', value: '1,042', trend: '5%', trendUp: true },
{ label: '今日告警处理', value: '89', trend: '2%', trendUp: false },
{ label: '服务满意度', value: '98.5%', trend: '0.5%', trendUp: true },
])
</script>
<style scoped>
@keyframes slideIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in {
animation: slideIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.5s ease-out;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
</style>

View File

@@ -0,0 +1,124 @@
<template>
<div class="space-y-6">
<!-- Active Tasks (Kanban Style) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- L1/L2 Routine -->
<div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-gray-700">常规巡护 (Routine)</h3>
<span class="bg-gray-200 text-gray-600 text-xs px-2 py-1 rounded-full font-bold">12</span>
</div>
<div class="space-y-3">
<div v-for="i in 3" :key="i" class="bg-white p-3 rounded-lg shadow-sm border border-gray-100 cursor-move hover:shadow-md transition-shadow">
<div class="flex justify-between items-start">
<span class="text-sm font-medium text-gray-800">Room 30{{i}} - 晚间巡查</span>
<span class="w-2 h-2 rounded-full bg-green-500"></span>
</div>
<div class="mt-2 text-xs text-gray-500 flex justify-between">
<span>Robot-0{{i}}</span>
<span>10m ago</span>
</div>
</div>
</div>
</div>
<!-- L3 Attention Needed -->
<div class="bg-orange-50 rounded-xl p-4 border border-orange-100">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-orange-800">需关注 (Attention)</h3>
<span class="bg-orange-200 text-orange-800 text-xs px-2 py-1 rounded-full font-bold">2</span>
</div>
<div class="space-y-3">
<div class="bg-white p-3 rounded-lg shadow-sm border-l-4 border-orange-400 cursor-pointer hover:shadow-md transition-shadow">
<div class="flex justify-between items-start">
<span class="text-sm font-bold text-gray-800">Room 402 - 异常静止</span>
<span class="text-xs bg-orange-100 text-orange-600 px-1.5 py-0.5 rounded">L2</span>
</div>
<p class="text-xs text-gray-600 mt-2">AI 检测到老人超过 3 小时未移动请确认</p>
<div class="mt-3 flex space-x-2">
<button class="flex-1 bg-orange-100 hover:bg-orange-200 text-orange-700 text-xs py-1.5 rounded transition-colors">呼叫机器人</button>
<button class="flex-1 bg-white border border-gray-200 hover:bg-gray-50 text-gray-600 text-xs py-1.5 rounded transition-colors">人工介入</button>
</div>
</div>
</div>
</div>
<!-- L4 Critical -->
<div class="bg-red-50 rounded-xl p-4 border border-red-100">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-red-800">紧急告警 (Critical)</h3>
<span class="bg-red-200 text-red-800 text-xs px-2 py-1 rounded-full font-bold animate-pulse">1</span>
</div>
<div class="space-y-3">
<div class="bg-white p-3 rounded-lg shadow-lg border-l-4 border-red-600 relative overflow-hidden">
<div class="absolute top-0 right-0 p-1">
<span class="flex h-3 w-3 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</div>
<div class="flex justify-between items-start pr-4">
<span class="text-sm font-bold text-gray-900">Room 101 - 跌倒告警</span>
<span class="text-xs bg-red-100 text-red-600 px-1.5 py-0.5 rounded font-bold">L4</span>
</div>
<div class="mt-2 bg-gray-50 p-2 rounded border border-gray-100">
<div class="flex items-center space-x-2 text-xs text-gray-500">
<span>🔗 证据已上链</span>
<span class="font-mono text-gray-400">0x8a...9c</span>
</div>
</div>
<button class="w-full mt-3 bg-red-600 hover:bg-red-700 text-white text-xs font-bold py-2 rounded shadow-sm transition-colors flex items-center justify-center">
<span class="mr-1"></span> 立即响应 (Sign to Confirm)
</button>
</div>
</div>
</div>
</div>
<!-- Robot Fleet Map (Simplified) -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<h3 class="font-bold text-gray-800 mb-4">机器人部署概览</h3>
<div class="h-64 bg-gray-100 rounded-lg relative overflow-hidden flex items-center justify-center">
<div class="absolute inset-0 grid grid-cols-6 grid-rows-4 gap-1 p-4 opacity-30">
<div v-for="n in 24" :key="n" class="border border-gray-300 rounded"></div>
</div>
<div class="text-gray-400 text-sm">Interactive Map Placeholder</div>
<!-- Mock Robot Dots -->
<div class="absolute top-1/4 left-1/4 w-4 h-4 bg-green-500 rounded-full border-2 border-white shadow-md" title="Robot-01"></div>
<div class="absolute top-1/2 left-1/2 w-4 h-4 bg-orange-500 rounded-full border-2 border-white shadow-md animate-bounce" title="Robot-05 (Busy)"></div>
<div class="absolute bottom-1/4 right-1/4 w-4 h-4 bg-green-500 rounded-full border-2 border-white shadow-md" title="Robot-03"></div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { useGlobalStore } from '../../stores/global'
const store = useGlobalStore()
const attentionTasks = computed(() => store.alerts.filter(a => a.level === 'L2' || a.level === 'L3'))
const criticalTasks = computed(() => store.alerts.filter(a => a.level === 'L4'))
</script>
<style scoped>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out;
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.02); }
100% { transform: scale(1); }
}
.animate-bounce-in {
animation: bounceIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
</style>

View File

@@ -0,0 +1,93 @@
<template>
<div class="space-y-8">
<!-- Network Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div v-for="stat in stats" :key="stat.label" class="bg-[#1e293b]/50 border border-slate-700 p-4 rounded-lg">
<div class="text-xs text-slate-400 uppercase tracking-wide">{{ stat.label }}</div>
<div class="text-xl font-mono text-white mt-1">{{ stat.value }}</div>
</div>
</div>
<!-- Latest Blocks (Cube Stream) -->
<div class="relative h-48 bg-[#1e293b]/30 border border-slate-700 rounded-xl overflow-hidden flex items-center px-4 space-x-4">
<div class="absolute inset-0 bg-gradient-to-r from-[#0f172a] via-transparent to-[#0f172a] z-10 pointer-events-none"></div>
<div v-for="block in blocks" :key="block.height"
class="min-w-[140px] h-32 bg-gradient-to-br from-blue-900 to-slate-900 border border-blue-500/30 rounded-lg p-3 flex flex-col justify-between transform transition-all hover:scale-105 hover:border-blue-400 cursor-pointer group shadow-lg shadow-blue-900/20">
<div class="flex justify-between items-start">
<span class="text-xs text-blue-300 font-mono">#{{ block.height }}</span>
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
</div>
<div class="text-[10px] text-slate-400 font-mono truncate">
{{ block.hash }}
</div>
<div class="text-xs text-white">
{{ block.txs }} txs
<span class="block text-[10px] text-slate-500">{{ block.time }} ago</span>
</div>
</div>
</div>
<!-- Transactions Table -->
<div class="bg-[#1e293b]/50 border border-slate-700 rounded-xl overflow-hidden">
<div class="px-6 py-4 border-b border-slate-700 flex justify-between items-center">
<h3 class="text-white font-bold">Latest Transactions</h3>
<button class="text-xs text-blue-400 hover:text-blue-300">View All ></button>
</div>
<table class="w-full text-left text-sm text-slate-400">
<thead class="bg-slate-800/50 text-xs uppercase">
<tr>
<th class="px-6 py-3">Tx Hash</th>
<th class="px-6 py-3">Type</th>
<th class="px-6 py-3">From</th>
<th class="px-6 py-3">To</th>
<th class="px-6 py-3">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-700">
<tr v-for="tx in txs" :key="tx.hash" class="hover:bg-slate-700/30 transition-colors">
<td class="px-6 py-4 font-mono text-blue-400">{{ tx.hash }}</td>
<td class="px-6 py-4">
<span class="px-2 py-1 rounded text-xs border" :class="getTypeClass(tx.type)">{{ tx.type }}</span>
</td>
<td class="px-6 py-4 font-mono truncate max-w-[100px]">{{ tx.from }}</td>
<td class="px-6 py-4 font-mono truncate max-w-[100px]">{{ tx.to }}</td>
<td class="px-6 py-4 text-green-400 text-xs">Success</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const stats = ref([
{ label: 'Block Height', value: '12,403,921' },
{ label: 'Total Txs', value: '89,201,332' },
{ label: 'Nodes Active', value: '4/4' },
{ label: 'Avg Block Time', value: '1.02s' },
])
const blocks = ref([
{ height: 12403921, hash: '0x8f2a...9b1c', txs: 12, time: '2s' },
{ height: 12403920, hash: '0x3d4e...1f9a', txs: 45, time: '3s' },
{ height: 12403919, hash: '0x7a8b...2c3d', txs: 8, time: '4s' },
{ height: 12403918, hash: '0x1c2d...3e4f', txs: 156, time: '5s' },
{ height: 12403917, hash: '0x5g6h...7i8j', txs: 23, time: '6s' },
])
const txs = ref([
{ hash: '0x8f2a...9b1c', type: 'Evidence', from: 'Robot-082', to: 'Contract:Evidence' },
{ hash: '0x3d4e...1f9a', type: 'TokenTransfer', from: 'Family-User', to: 'Agency-Wallet' },
{ hash: '0x7a8b...2c3d', type: 'Alert', from: 'Robot-015', to: 'Contract:Alert' },
{ hash: '0x9c0d...1e2f', type: 'Evidence', from: 'Robot-099', to: 'Contract:Evidence' },
])
const getTypeClass = (type) => {
if (type === 'Evidence') return 'bg-blue-900/30 text-blue-300 border-blue-800'
if (type === 'Alert') return 'bg-red-900/30 text-red-300 border-red-800'
return 'bg-green-900/30 text-green-300 border-green-800'
}
</script>

View File

@@ -0,0 +1,137 @@
<template>
<div class="space-y-6">
<!-- Top Stats -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex items-center space-x-4">
<div class="p-3 bg-orange-100 text-vitality-orange rounded-full">
</div>
<div>
<div class="text-xs text-gray-500">今日健康分</div>
<div class="text-xl font-bold text-gray-800">92</div>
</div>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex items-center space-x-4">
<div class="p-3 bg-blue-100 text-trust-blue rounded-full">
🛡
</div>
<div>
<div class="text-xs text-gray-500">隐私保护</div>
<div class="text-xl font-bold text-gray-800">开启</div>
</div>
</div>
</div>
<!-- Live Status Card -->
<div class="bg-white rounded-2xl shadow-lg border overflow-hidden transition-all duration-300"
:class="statusCardClass">
<div class="p-4 border-b border-gray-100 flex justify-between items-center">
<h3 class="font-bold flex items-center" :class="statusTextClass">
<span class="w-2 h-2 rounded-full mr-2 animate-pulse" :class="statusDotClass"></span>
实时状态王大爷
</h3>
<span class="text-xs bg-gray-100 text-gray-500 px-2 py-1 rounded">实时同步中</span>
</div>
<div class="p-6 flex flex-col items-center">
<!-- Status Icon -->
<div class="w-32 h-32 rounded-full flex items-center justify-center mb-4 relative transition-all duration-500"
:class="iconBgClass">
<div class="absolute inset-0 border-4 rounded-full animate-ping opacity-20" :class="iconBorderClass"></div>
<span class="text-5xl">{{ statusIcon }}</span>
</div>
<h4 class="text-xl font-bold text-gray-900">{{ statusTitle }}</h4>
<p class="text-sm text-gray-500 mt-1" :class="{'text-red-500 font-bold': isCritical}">
{{ statusDesc }}
</p>
<!-- Actions -->
<div class="grid grid-cols-3 gap-4 w-full mt-8">
<button class="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 hover:bg-orange-50 text-gray-600 hover:text-vitality-orange transition-colors">
<span class="text-xl mb-1">📞</span>
<span class="text-xs">语音通话</span>
</button>
<button class="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 hover:bg-orange-50 text-gray-600 hover:text-vitality-orange transition-colors">
<span class="text-xl mb-1">💊</span>
<span class="text-xs">提醒吃药</span>
</button>
<button class="flex flex-col items-center justify-center p-3 rounded-xl bg-gray-50 hover:bg-orange-50 text-gray-600 hover:text-vitality-orange transition-colors">
<span class="text-xl mb-1">🤖</span>
<span class="text-xs">召唤机器人</span>
</button>
</div>
</div>
</div>
<!-- Blockchain Evidence List -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100">
<div class="p-4 border-b border-gray-100">
<h3 class="font-bold text-gray-800">最近可信存证</h3>
</div>
<div class="divide-y divide-gray-100">
<div v-for="item in store.auditLogs" :key="item.hash" class="p-4 hover:bg-gray-50 transition-colors">
<div class="flex justify-between items-start">
<div class="flex items-start space-x-3">
<div class="mt-1 p-1.5 rounded bg-blue-50 text-trust-blue text-xs">
🔗
</div>
<div>
<div class="text-sm font-medium text-gray-900">{{ item.desc }}</div>
<div class="text-xs text-gray-500 mt-0.5">{{ item.time }}</div>
</div>
</div>
<div class="text-right">
<div class="text-xs font-mono text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded truncate w-24">
{{ item.hash }}
</div>
<div class="text-[10px] text-green-600 mt-1">已上链确认</div>
</div>
</div>
</div>
</div>
<div class="p-3 text-center border-t border-gray-100">
<button class="text-sm text-trust-blue hover:text-blue-700 font-medium">查看完整区块链浏览器 ></button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useGlobalStore } from '../../stores/global'
const store = useGlobalStore()
// Computed Status based on Global Store
const isCritical = computed(() => store.robotStatus.level === 'L4')
const statusCardClass = computed(() => isCritical.value ? 'border-red-500 shadow-red-100' : 'border-gray-100')
const statusTextClass = computed(() => isCritical.value ? 'text-red-600' : 'text-gray-800')
const statusDotClass = computed(() => {
const map = { L1: 'bg-green-500', L2: 'bg-yellow-500', L3: 'bg-orange-500', L4: 'bg-red-600' }
return map[store.robotStatus.level]
})
const iconBgClass = computed(() => isCritical.value ? 'bg-red-50' : 'bg-orange-50')
const iconBorderClass = computed(() => isCritical.value ? 'border-red-200' : 'border-orange-100')
const statusIcon = computed(() => {
const map = { L1: '🚶', L2: '🛌', L3: '🗣️', L4: '🆘' }
return map[store.robotStatus.level]
})
const statusTitle = computed(() => {
const map = { L1: '正在客厅散步', L2: '疑似静止不动', L3: '检测到呼救声', L4: '检测到跌倒!' }
return map[store.robotStatus.level]
})
const statusDesc = computed(() => {
const map = {
L1: 'AI 识别置信度: 99.2%',
L2: '已持续 3 小时,建议关注',
L3: '正在分析音频语义...',
L4: '紧急!证据已上链,请立即处理!'
}
return map[store.robotStatus.level]
})
</script>

View File

@@ -0,0 +1,52 @@
<template>
<div class="space-y-6">
<!-- Balance Card -->
<div class="bg-gradient-to-r from-orange-400 to-pink-500 rounded-2xl p-6 text-white shadow-lg relative overflow-hidden">
<div class="absolute -right-6 -top-6 w-32 h-32 bg-white opacity-10 rounded-full blur-2xl"></div>
<div class="relative z-10">
<div class="text-sm opacity-90 mb-1">我的智护通证 (Token)</div>
<div class="text-4xl font-bold font-mono tracking-tight">1,250.00</div>
<div class="mt-6 flex space-x-3">
<button class="flex-1 bg-white/20 hover:bg-white/30 backdrop-blur py-2 rounded-lg text-sm font-medium transition-colors">
兑换服务
</button>
<button class="flex-1 bg-white text-orange-600 hover:bg-orange-50 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm">
去赚取
</button>
</div>
</div>
</div>
<!-- Tasks List -->
<div>
<h3 class="text-lg font-bold text-gray-800 mb-4 px-1">社区互助任务</h3>
<div class="space-y-3">
<div v-for="task in tasks" :key="task.id" class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-xl">
{{ task.icon }}
</div>
<div>
<div class="font-medium text-gray-900">{{ task.title }}</div>
<div class="text-xs text-gray-500">{{ task.distance }} {{ task.time }}</div>
</div>
</div>
<div class="flex flex-col items-end">
<span class="text-vitality-orange font-bold text-lg">+{{ task.reward }}</span>
<button class="px-3 py-1 bg-gray-900 text-white text-xs rounded-md mt-1 hover:bg-gray-700">接单</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const tasks = ref([
{ id: 1, title: '陪伴李奶奶聊天', icon: '👵', distance: '300m', time: '30分钟', reward: 50 },
{ id: 2, title: '协助购买日用品', icon: '🛒', distance: '500m', time: '1小时', reward: 100 },
{ id: 3, title: '教张大爷使用手机', icon: '📱', distance: '1.2km', time: '45分钟', reward: 80 },
])
</script>

232
src/views/robot/Monitor.vue Normal file
View File

@@ -0,0 +1,232 @@
<template>
<div class="h-full grid grid-cols-12 gap-0">
<!-- Left: Vision Stream & AI Detection -->
<div class="col-span-8 bg-black relative border-r border-gray-800">
<!-- Live Stream Overlay -->
<div class="absolute top-4 left-4 z-10 flex space-x-2">
<div class="px-2 py-1 bg-red-600/80 text-white text-xs font-bold rounded animate-pulse">REC</div>
<div class="px-2 py-1 bg-gray-800/80 text-green-400 text-xs font-mono border border-green-500/30">
FPS: {{ fps }} | LATENCY: {{ latency }}ms
</div>
</div>
<!-- Main Visual Area (Simulated Pose Estimation) -->
<div class="w-full h-full flex items-center justify-center relative overflow-hidden group">
<!-- Grid Background -->
<div class="absolute inset-0 opacity-20"
style="background-image: linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px); background-size: 40px 40px;">
</div>
<!-- Skeleton / Person Placeholder -->
<div class="relative transition-all duration-500" :class="{'transform rotate-90 translate-y-20': currentLevel === 'L4'}">
<!-- Head -->
<div class="w-16 h-16 border-2 rounded-full flex items-center justify-center relative z-10"
:class="statusColorClass">
<span class="text-xs font-mono text-white opacity-50">{{ confidence }}%</span>
</div>
<!-- Body -->
<div class="w-1 h-32 mx-auto relative z-0" :class="statusBgClass"></div>
<!-- Arms -->
<div class="absolute top-20 left-1/2 -translate-x-1/2 w-40 h-1" :class="statusBgClass"></div>
<!-- Legs -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-32 h-1 flex justify-between">
<div class="w-1 h-32 transform -rotate-12 origin-top" :class="statusBgClass"></div>
<div class="w-1 h-32 transform rotate-12 origin-top" :class="statusBgClass"></div>
</div>
<!-- Bounding Box -->
<div class="absolute -inset-8 border border-dashed opacity-50 animate-pulse" :class="statusBorderClass">
<div class="absolute -top-6 left-0 text-xs font-mono" :class="statusTextClass">
ID: PERSON_01 [{{ currentLevel }}]
</div>
</div>
</div>
<!-- Privacy Mask Effect (Scanline) -->
<div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent via-green-500/10 to-transparent h-8 w-full animate-scan"></div>
</div>
<!-- Bottom Console Log -->
<div class="absolute bottom-0 left-0 w-full h-48 bg-black/90 border-t border-gray-800 p-4 font-mono text-xs overflow-y-auto custom-scrollbar">
<div v-for="(log, i) in logs" :key="i" class="mb-1">
<span class="text-gray-500">[{{ log.time }}]</span>
<span :class="log.color" class="ml-2">{{ log.message }}</span>
</div>
</div>
</div>
<!-- Right: AI Logic & Control -->
<div class="col-span-4 bg-gray-900 flex flex-col">
<!-- Header -->
<div class="p-4 border-b border-gray-800 bg-gray-800/50">
<h2 class="text-white font-bold flex items-center">
<span class="mr-2 text-xl">🧠</span> 决策引擎 (Brain)
</h2>
</div>
<!-- Status Panel -->
<div class="p-6 flex-1 space-y-8">
<!-- Current Level Indicator -->
<div class="text-center p-6 rounded-2xl border-2 transition-all duration-300"
:class="levelBorderClass">
<div class="text-sm text-gray-400 uppercase tracking-widest mb-2">当前风险等级</div>
<div class="text-6xl font-black transition-all duration-300" :class="statusTextClass">
{{ currentLevel }}
</div>
<div class="mt-4 text-lg font-medium text-white">{{ currentStatusText }}</div>
</div>
<!-- AI Logic Tree Visualization -->
<div class="space-y-4">
<h3 class="text-xs text-gray-500 uppercase font-bold tracking-wider">推理逻辑链 (Inference Chain)</h3>
<div class="flex flex-col space-y-2">
<div class="flex items-center space-x-3 p-3 rounded bg-gray-800/50 border border-gray-700">
<div class="w-2 h-2 rounded-full bg-green-500"></div>
<span class="text-sm text-gray-300">目标检测 (YOLOv8)</span>
<span class="ml-auto text-xs text-green-400">Done</span>
</div>
<div class="flex items-center space-x-3 p-3 rounded bg-gray-800/50 border border-gray-700">
<div class="w-2 h-2 rounded-full" :class="poseColor"></div>
<span class="text-sm text-gray-300">姿态分析 (PosePipe)</span>
<span class="ml-auto text-xs" :class="poseTextColor">{{ poseStatus }}</span>
</div>
<div class="flex items-center space-x-3 p-3 rounded bg-gray-800/50 border border-gray-700">
<div class="w-2 h-2 rounded-full" :class="riskColor"></div>
<span class="text-sm text-gray-300">风险评估 (RiskEval)</span>
<span class="ml-auto text-xs" :class="riskTextColor">{{ riskScore }}</span>
</div>
</div>
</div>
<!-- Action Panel (Demo Controls) -->
<div class="pt-6 border-t border-gray-800">
<h3 class="text-xs text-gray-500 uppercase font-bold tracking-wider mb-4">模拟触发 (Simulate Trigger)</h3>
<div class="grid grid-cols-2 gap-3">
<button @click="setLevel('L1')" class="px-4 py-3 rounded bg-gray-800 hover:bg-gray-700 text-green-400 text-xs font-bold border border-gray-700 transition-colors">
L1 正常巡护
</button>
<button @click="setLevel('L2')" class="px-4 py-3 rounded bg-gray-800 hover:bg-gray-700 text-yellow-400 text-xs font-bold border border-gray-700 transition-colors">
L2 异常静止
</button>
<button @click="setLevel('L3')" class="px-4 py-3 rounded bg-gray-800 hover:bg-gray-700 text-orange-400 text-xs font-bold border border-gray-700 transition-colors">
L3 呼救检测
</button>
<button @click="setLevel('L4')" class="px-4 py-3 rounded bg-red-900/50 hover:bg-red-800 text-red-400 text-xs font-bold border border-red-800 transition-colors animate-pulse">
L4 跌倒告警
</button>
</div>
</div>
</div>
<!-- Blockchain Status Footer -->
<div class="p-4 bg-gray-800 border-t border-gray-700 flex justify-between items-center">
<div class="flex items-center space-x-2">
<span class="text-xs text-gray-400">TrustLink Status:</span>
<span class="flex h-2 w-2 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</span>
<span class="text-xs text-blue-400 font-mono">Connected</span>
</div>
<div class="text-xs font-mono text-gray-500">
Last Hash: {{ lastHash }}
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useDateFormat, useNow } from '@vueuse/core'
import { useGlobalStore } from '../../stores/global'
const store = useGlobalStore()
// State
const currentLevel = computed(() => store.robotStatus.level)
const fps = ref(30)
const latency = ref(12)
const logs = ref([])
const confidence = ref(98)
// Mock Data Generators
const lastHash = ref(store.robotStatus.hash || 'Waiting...')
// ... (Computed Styles & Status - No changes needed as they depend on currentLevel)
// Methods
const addLog = (msg, level = 'info') => {
const time = useDateFormat(useNow(), 'HH:mm:ss.SSS').value
const colors = { info: 'text-gray-400', warning: 'text-yellow-400', error: 'text-red-400', success: 'text-green-400' }
logs.value.unshift({ time, message: msg, color: colors[level] })
if (logs.value.length > 50) logs.value.pop()
}
const setLevel = (level) => {
// Update Global Store
if (level === 'L1') {
store.triggerAlert('L1', '系统恢复正常')
addLog('System state normalized.', 'success')
} else if (level === 'L2') {
store.triggerAlert('L2', '检测到长时间静止')
addLog('Anomaly detected: No motion for 180s.', 'warning')
addLog('Initiating approach sequence...', 'info')
} else if (level === 'L3') {
store.triggerAlert('L3', '检测到呼救声')
addLog('Audio event detected: "Help"', 'warning')
addLog('Risk score escalated to 0.78', 'warning')
} else if (level === 'L4') {
store.triggerAlert('L4', '检测到跌倒事件')
addLog('CRITICAL EVENT: FALL DETECTED', 'error')
addLog('Generating privacy-preserving hash...', 'info')
setTimeout(() => {
lastHash.value = store.robotStatus.hash
addLog(`Evidence committed to blockchain: ${lastHash.value}`, 'success')
addLog('Emergency contact (120) notified via API', 'error')
}, 800)
}
}
// Loop for background logs
let interval
onMounted(() => {
addLog('System initialized. Model: YOLOv8-Nano loaded.', 'success')
addLog('Privacy Engine: Active (Local Only).', 'success')
interval = setInterval(() => {
fps.value = Math.floor(Math.random() * 5) + 28
latency.value = Math.floor(Math.random() * 5) + 10
if (currentLevel.value === 'L1' && Math.random() > 0.8) {
addLog('Routine scan complete. No objects found.', 'info')
}
}, 2000)
})
onUnmounted(() => {
clearInterval(interval)
})
</script>
<style scoped>
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #111;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #333;
}
@keyframes scan {
0% { top: 0%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.animate-scan {
animation: scan 3s linear infinite;
}
</style>

7
vite.config.js Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
})