@shlinklab/platform-home

全要素检验结果互认质量管理平台首页组件。面向传统 Vue 2 项目交接，使用 Vue 2 Options API、ES6 JavaScript 和 Sass 实现。

安装

npm install @shlinklab/platform-home

宿主项目需要提供 Vue 2；Element UI 2.x 为兼容旧项目保留的可选 peer dependency。

直接引入组件

<template>
  <PlatformHome :config="platformHomeConfig" />
</template>

<script>
import PlatformHome from '@shlinklab/platform-home'
import '@shlinklab/platform-home/style.css'

export default {
  components: {
    PlatformHome,
  },
  data() {
    return {
      platformHomeConfig: {
        applications: [
          {
            id: 'clinical-project-research',
            name: '临床实验室检验项目调研系统',
            description: '中心循环调研辖区内各实验室的项目开展类型、检测量等信息，为拓展室间质评、互认项目提供数据支撑。',
            enabled: true,
            url: '/applications/clinical-project-research',
          },
          {
            id: 'mutual-recognition-evaluation',
            name: '互认质量综合评价系统',
            description: '实验室质量准入核查，量化评价项目质量，一键生成互认清单和报告证书。',
            enabled: false,
            url: '',
          },
          {
            id: 'external-quality-assessment',
            name: '室间质量评价系统',
            description: '遵照 ISO17043 要求设计，可组织常规 EQA、盲样 EQA、PBEQA、基质效应校正 EQA 等多种计划。',
            enabled: false,
            url: '',
          },
          {
            id: 'internal-quality-control',
            name: '室内质控监控与比对系统',
            description: '中心实时监控各实验室室内质控规范开展情况和精密度合格状态，组织室内质控室间比对。',
            enabled: true,
            url: '/applications/internal-quality-control',
          },
          {
            id: 'quality-indicator-management',
            name: '质量指标管理系统',
            description: '支持自定义质量指标和权重赋值，实现实验室综合量化评价；内置国家临检中心质量指标系统的便捷登录入口。',
            enabled: false,
            url: '',
          },
          {
            id: 'reference-interval-management',
            name: '参考区间管理系统',
            description: '系统采集各实验室参考区间并开展一致性比对，自动识别偏离统一参考区间的实验室。',
            enabled: false,
            url: '',
          },
          {
            id: 'public-hospital-performance',
            name: '公立医院绩效考核系统',
            description: '开展临床检验专业二级公立医院绩效考核。',
            enabled: false,
            url: '',
          },
          {
            id: 'online-education-assessment',
            name: '在线教育考核系统',
            description: '中心开展业务指导和人员培训考核，打破地域、时间限制，推动优质培训资源更加公平、可及。',
            enabled: false,
            url: '',
          },
          {
            id: 'on-site-inspection',
            name: '现场检查系统',
            description: '组织“双随机、一公开”的质量安全检查、生物安全检查等现场检查工作，实现中心与专家无纸化线上办公，数据自动统计。',
            enabled: true,
            url: '/applications/on-site-inspection',
          },
          {
            id: 'pcr-laboratory-review',
            name: 'PCR 实验室验收与评审系统',
            description: '组织 PCR 实验室技术现场或远程评审，实现全流程系统化运行，三方线上协作，提高工作效能。',
            enabled: false,
            url: '',
          },
          {
            id: 'iso17043-document-management',
            name: 'ISO17043 文件管理系统',
            description: '文件全流程线上受控，杜绝作废文件误用，导出评审佐证材料，满足 CNAS 现场评审资料核查要求。',
            enabled: false,
            url: '',
          },
          {
            id: 'personnel-qualification-management',
            name: '人员资质管理系统',
            description: '归集辖区检验人员职称、PCR 上岗证、学分、进修等全量资质，开展人才储备分析。',
            enabled: false,
            url: '',
          },
          {
            id: 'trainee-management',
            name: '进修生管理系统',
            description: '进修生招募、报名、通知、培训、授权、考核记录资料全部留存，节约沟通和管理成本。',
            enabled: false,
            url: '',
          },
          {
            id: 'meeting-organization-management',
            name: '会议组织管理系统',
            description: '会议报名、签到、考核、资料分享、开具发票全流程上线，全程留痕可追溯。',
            enabled: false,
            url: '',
          },
          {
            id: 'operations-command-screen',
            name: '业务中控大屏',
            description: '实时集中展示区域互认质量合格情况、室间质评、室内质控、培训、进修等数据，直观呈现区域检验质量全貌。',
            enabled: true,
            url: '/applications/operations-command-screen',
          },
          {
            id: 'one-click-assistance',
            name: '一键求助系统',
            description: '构建“失控发现→平台告警→实验室内部处置→远程求助→中心指导→闭环反馈”的完整业务闭环。',
            enabled: false,
            url: '',
          },
        ],
      },
    }
  },
}
</script>

样式入口在包根目录提供真实的 style.css 文件，可兼容 Vite、Webpack 5 以及传统 Vue 2 项目常见的 Webpack 4。也可以直接引用编译后的样式文件：

import '@shlinklab/platform-home/dist/platform-home.css'

只引入应用场景内容

仅需要“应用场景总览”标题下方的应用列表、中心圆和连接线时，可以使用命名导出的 ApplicationOverviewContent。该组件不包含标题，也不包含整页上半部分；配置接口与 PlatformHome 相同。

背景图片通过 platformHomeBackground 单独导出，调用方可以按自己的页面结构决定是否使用：

<template>
  <section class="customer-apps" :style="backgroundStyle">
    <ApplicationOverviewContent :config="applicationsConfig" />
  </section>
</template>

<script>
import {
  ApplicationOverviewContent,
  platformHomeBackground,
} from '@shlinklab/platform-home'
import '@shlinklab/platform-home/style.css'

export default {
  components: {
    ApplicationOverviewContent,
  },
  data() {
    return {
      applicationsConfig: {
        applications: [
          {
            id: 'clinical-project-research',
            enabled: true,
            url: '/applications/clinical-project-research',
          },
        ],
      },
    }
  },
  computed: {
    backgroundStyle() {
      return {
        backgroundImage: `url(${platformHomeBackground})`,
      }
    },
  },
}
</script>

<style scoped>
.customer-apps {
  overflow-x: auto;
  padding: 48px 32px;
  background-color: #eaf5f9;
  background-position: center;
  background-size: cover;
}
</style>

ApplicationOverviewContent 内置 1280px 最小宽度，以保留应用卡片到中心圆的完整连接线；窄屏宿主可通过外层容器横向滚动查看。

作为 Vue 2 插件安装

默认导出的组件同时实现了 Vue 2 插件安装接口：

import Vue from 'vue'
import PlatformHome from '@shlinklab/platform-home'
import '@shlinklab/platform-home/style.css'

Vue.use(PlatformHome)

安装后可直接使用两个全局组件：

<PlatformHome :config="platformHomeConfig" />
<ApplicationOverviewContent :config="platformHomeConfig" />

配置接口

组件只需要一个 config 属性。上方示例已给出全部 16 个应用的默认配置；不传 config 时，组件也会使用这套内置默认值。

单个应用配置结构如下：

{
  applications: [
    {
      id: '系统稳定 ID',
      name: '系统名称',
      description: '系统功能描述',
      enabled: true,
      url: '/访问地址',
    },
  ],
}

• 可以直接复制完整默认配置，也可以只传需要修改的应用，applications 会按 id 局部覆盖内置默认值。
• name 和 description 默认使用组件内置文案，也可以由调用者按 id 局部覆盖。
• 系统排列由组件内置，调用者使用稳定 id 定位对应系统。
• 只有 enabled: true 且 url 为 HTTP(S) 或站内地址的入口可点击。
• 未启用、地址为空或危险协议的入口仍会展示，但不可访问。
• 配置对象支持 Vue 响应式更新。

需要读取默认配置或在宿主侧预处理配置时，可以使用命名导出：

import {
  defaultApplicationSystems,
  resolveApplicationSystems,
} from '@shlinklab/platform-home'