bj_power/bj_power_workstation/frontend/src/components/PageHelp.vue

<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="520px" append-to-body class="ph-drawer">
      <div class="ph-inner">
        <div class="ph-banner">
          <div class="ph-banner-title">{{ data.title || '操作说明' }}</div>
          <div class="ph-banner-sub">界面整体说明</div>
        </div>
        <div class="ph-overview" v-if="data.overview">{{ data.overview }}</div>

        <div class="ph-legend">
          <span class="lg"><i class="ic lg-source"></i>来源：这个字段从哪来、谁操作</span>
          <span class="lg"><i class="ic lg-purpose"></i>用途：它起什么作用</span>
          <span class="lg"><i class="ic lg-fill"></i>怎么操作：具体怎么做</span>
        </div>

        <template v-if="data.sections && data.sections.length">
          <div v-for="(sec, si) in data.sections" :key="si" class="ph-section">
            <div class="ph-sec-title" v-if="sec.title">{{ sec.title }}</div>
            <div class="ph-sec-overview" v-if="sec.overview">{{ sec.overview }}</div>
            <div class="ph-field" v-for="(f, fi) in sec.fields" :key="fi">
              <div class="ph-fname">
                {{ f.name }}
                <span class="ph-fsource">{{ f.source }}</span>
              </div>
              <div class="ph-fpurpose">{{ f.purpose }}</div>
              <div class="ph-ffill">👉 {{ f.fill }}</div>
            </div>
          </div>
        </template>

        <div v-else class="ph-section">
          <template v-if="data.fields && data.fields.length">
            <div class="ph-field" v-for="(f, fi) in data.fields" :key="fi">
              <div class="ph-fname">
                {{ f.name }}
                <span class="ph-fsource">{{ f.source }}</span>
              </div>
              <div class="ph-fpurpose">{{ f.purpose }}</div>
              <div class="ph-ffill">👉 {{ f.fill }}</div>
            </div>
          </template>
          <el-empty v-else description="暂无说明" :image-size="70" />
        </div>
      </div>
    </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: 24px; bottom: 18px; z-index: 2050; }
.help-fab {
  width: 54px; height: 54px; background: #1668dc; color: #fff; font-weight: 700;
  font-size: 26px; box-shadow: 0 3px 10px rgba(22,50,79,.35);
  transition: transform .15s;
}
.help-fab:hover { background: #0e57c3; transform: scale(1.06); }

.ph-inner { padding: 0 6px 24px; }

.ph-banner {
  background: linear-gradient(120deg, #1668dc, #3a98f0);
  color: #fff; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
}
.ph-banner-title { font-size: 20px; font-weight: 700; }
.ph-banner-sub { font-size: 12px; opacity: .85; margin-top: 4px; }

.ph-overview {
  color: #3f536e; line-height: 1.8; font-size: 14px; margin-bottom: 16px;
  background: #f4f7fb; border: 1px solid #e4ecf5; border-radius: 8px;
  padding: 12px 14px; white-space: pre-line;
}

.ph-legend {
  display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px;
  padding: 10px 14px; background: #fafbfc; border: 1px dashed #d9e0e8; border-radius: 8px;
  font-size: 12px; color: #6b7785;
}
.ph-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.ph-legend .ic { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg-source { background: #8fa5f5; }
.lg-purpose { background: #22b07d; }
.lg-fill { background: #f5a623; }

.ph-section { margin-bottom: 18px; }
.ph-sec-title {
  font-size: 15px; font-weight: 700; color: #1b2a3a; margin: 0 0 4px;
  padding-left: 10px; border-left: 4px solid #1668dc; line-height: 1.4;
}
.ph-sec-overview { color: #7a8694; font-size: 13px; margin: 4px 0 10px; line-height: 1.7; }

.ph-field {
  background: #fff; border: 1px solid #eef1f6; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 8px;
}
.ph-fname {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: #1b2a3a; font-size: 14px;
}
.ph-fsource {
  font-weight: 400; font-size: 11px; color: #1668dc;
  background: #e8f1ff; border-radius: 4px; padding: 1px 8px;
}
.ph-fpurpose { color: #22b07d; font-size: 13px; line-height: 1.6; margin-top: 6px; }
.ph-fpurpose::before { content: '用途：'; font-weight: 600; color: #1b8d63; }
.ph-ffill { color: #8a5b00; font-size: 13px; line-height: 1.6; margin-top: 4px; }
.ph-ffill::before { content: '怎么操作：'; font-weight: 600; color: #8a5b00; }
</style>