feat: 为多个页面添加操作帮助功能,替换旧版静态资源文件

1. 新增PageHelp通用帮助组件,实现页面左下角悬浮帮助按钮
2. 为WMS、MES、工位终端多个业务页面接入帮助系统
3. 替换项目中旧的打包静态资源文件,更新资源引用路径
4. 新增各模块的帮助文档配置数据
This commit is contained in:
SunYF
2026-08-28 17:23:44 +08:00
parent cbd55338f1
commit dd078038e2
93 changed files with 619 additions and 45 deletions
@@ -0,0 +1,54 @@
<template>
<!-- 页面右下角 "?" 帮助按钮点击弹出当前界面整体介绍 + 关键字段说明 -->
<div class="page-help">
<el-tooltip content="操作说明" placement="top">
<el-button class="help-fab" circle @click="open">?</el-button>
</el-tooltip>
<el-drawer v-model="show" :title="data.title || '操作说明'" size="480px" append-to-body>
<div class="ph-overview" v-if="data.overview">{{ data.overview }}</div>
<div v-if="data.sections && data.sections.length">
<div v-for="(sec, si) in data.sections" :key="si">
<h3 class="ph-sec-title">{{ sec.title }}</h3>
<p class="ph-sec-overview" v-if="sec.overview">{{ sec.overview }}</p>
<el-table :data="sec.fields" border size="small" class="ph-table">
<el-table-column prop="name" label="字段" width="120" />
<el-table-column prop="source" label="来源" width="80" />
<el-table-column prop="purpose" label="用途" min-width="110" show-overflow-tooltip />
<el-table-column prop="fill" label="怎么操作" min-width="130" show-overflow-tooltip />
</el-table>
</div>
</div>
<el-table v-else :data="data.fields" border size="small" class="ph-table">
<el-table-column prop="name" label="字段" width="120" />
<el-table-column prop="source" label="来源" width="80" />
<el-table-column prop="purpose" label="用途" min-width="110" show-overflow-tooltip />
<el-table-column prop="fill" label="怎么操作" min-width="130" show-overflow-tooltip />
</el-table>
</el-drawer>
</div>
</template>
<script setup>
import { ref } from 'vue'
defineProps({
data: { type: Object, default: () => ({ title: '操作说明', overview: '', fields: [] }) }
})
const show = ref(false)
function open() { show.value = true }
</script>
<style scoped>
.page-help { position: fixed; right: 20px; bottom: 20px; z-index: 2000; }
.help-fab { width: 58px; height: 58px; background: #1668dc; color: #fff; font-weight: 700;
font-size: 26px; box-shadow: 0 3px 10px rgba(22,50,79,.35); }
.help-fab:hover { background: #0e57c3; }
.ph-overview { color: #555; line-height: 1.7; margin-bottom: 14px; white-space: pre-line; }
.ph-sec-title { margin: 12px 0 4px; font-size: 15px; }
.ph-sec-overview { color: #777; margin: 4px 0 8px; line-height: 1.6; font-size: 13px; }
.ph-table :deep(.el-table__cell), .ph-table :deep(td.el-table__cell) { padding: 4px 6px; font-size: 12px; }
</style>