feat: 为多个页面添加操作帮助功能,替换旧版静态资源文件
1. 新增PageHelp通用帮助组件,实现页面左下角悬浮帮助按钮 2. 为WMS、MES、工位终端多个业务页面接入帮助系统 3. 替换项目中旧的打包静态资源文件,更新资源引用路径 4. 新增各模块的帮助文档配置数据
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user