feat: 名称修改

罗广辉

2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9

 src/page/index/top/top-qna.vue

@@ -1,66 +1,86 @@
<template>
  <div class="top-qna" @mouseenter="disableTooltip" @mouseleave="enableTooltip">
    <el-tooltip :disabled="tooltipDisabled" content="帮助中心" placement="bottom">
      <el-icon @click="showHelp" class="help-icon">
  <div class="top-qna">
     <el-icon class="help-icon" color="#707070" size="17" @click="dropdownClick('guide')">
        <QuestionFilled />
      </el-icon>
    </el-tooltip>
    <el-dialog v-model="dialogVisible" title="帮助中心" width="30%" @close="closeDialog">
      <div class="dialog-content">
        <div class="qa-item">
          <span class="qa-title">Q1：智飞机场 2 支持哪些无人机？</span>
          <span class="qa-text">
            A1：智飞机场 2 仅支持 DJI Matrice 3D 系列无人机。
          </span>
        </div>
        <div class="qa-item">
          <span class="qa-title">Q2：智飞机场 2 如何应对意外断电？</span>
          <span class="qa-text">
            A2：若发生意外断电，机场仍可借助内置蓄电池独立工作超 5 小时，为飞行器预留充足的返航降落时间。
            断电后，机场不支持飞行器充电、空调、舱盖加热、风速计加热等功能，请及时排查故障。
          </span>
        </div>
        <div class="qa-item">
          <span class="qa-title">Q3：智飞机场 2 和第一代智飞机场有什么区别？</span>
          <span class="qa-text">
            A3：相对于第一代智飞机场，智飞机场 2 在体积、重量上大幅下降，不仅轻量化、易部署，
            且具备更强大的作业能力和云端智能功能，大幅降低了无人值守作业门槛，作业效率和质量也上升至全新高度。
          </span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">关闭</el-button>
        </span>
    <!-- <el-dropdown @command="dropdownClick">
      <el-icon class="help-icon" color="#707070" size="17">
        <QuestionFilled />
      </el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="guide">入门指南</el-dropdown-item>
          <el-dropdown-item command="systemupdate">系统更新</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dialog>
    </el-dropdown> -->
  </div>
</template>

<script>
export default {
  name: 'top-qna',
  data() {
    return {
      dialogVisible: false, // 确保初始值为 false
      tooltipDisabled: false, // 控制 tooltip 是否显示
    };
  },
  methods: {
    showHelp() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    disableTooltip() {
      this.tooltipDisabled = true; // 禁用 tooltip
    },
    enableTooltip() {
      this.tooltipDisabled = false; // 启用 tooltip
    },
  },
<script setup>
import { listDataAPI } from '@/api/helpCenter/helpCenter';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const systemupdateFilePath = ref(null);
const rumenPath = ref(null);
const fileData = ref([]);
const loading = ref(false);
const getlistDataAPI = async () => {
  loading.value = true;
  try {
    const res = await listDataAPI();
    if (res.data.code === 200 && res.data.data) {
      fileData.value = res.data.data;
      const systemUpdateItem = res.data.data.find(item => item.id === 4); //系统更新
      const rumenItem = res.data.data.find(item => item.id === 2); //入门指南

      if (systemUpdateItem) {
        systemupdateFilePath.value = systemUpdateItem.filePath;
      } else {
        console.warn('暂无系统更新');
      }

      if (rumenItem) {
        rumenPath.value = rumenItem.filePath;
      } else {
        console.warn('暂无入门指南');
      }
    } else {
      ElMessage.error('获取帮助数据失败');
    }
  } catch (error) {
    console.error('获取数据出错:', error);
    ElMessage.error('请求失败');
  } finally {
    loading.value = false;
  }
};
const dropdownClick = val => {
  if (loading.value) {
    ElMessage.warning('数据正在加载，请稍后');
    return;
  }

  if (val === 'guide') {
    if (!rumenPath.value) {
      ElMessage.warning('暂无入门指南文件');
      return;
    }

    window.open(rumenPath.value, '_blank');
  } else if (val === 'systemupdate') {
    if (!systemupdateFilePath.value) {
      ElMessage.warning('暂无系统更新文件');
      return;
    }
    window.open(systemupdateFilePath.value, '_blank');
  }
};

onMounted(() => {
  getlistDataAPI();
});
</script>

<style lang="scss" scoped>
@@ -70,57 +90,12 @@
  font-size: 18px;
  justify-content: center;
  cursor: pointer;
}

/* 优化弹出框样式 */
:deep(.el-dialog) {
  border-radius: 8px; /* 圆角边框 */
  overflow: visible; /* 防止内容溢出 */
  .el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #e8e8e8; /* 标题下边框 */
    .el-dialog__title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  .help-icon {
    width: 25px;
    height: 25px;
  }
  .el-dialog__body {
    padding: 20px;
    max-height: none; /* 取消高度限制 */
    overflow: visible; /* 取消滚动条 */
    word-wrap: break-word; /* 自动换行 */
    word-break: break-word; /* 防止长单词溢出 */
    white-space: normal; /* 确保文字自动换行 */
  }
  .el-dialog__footer {
    padding: 10px 20px;
    border-top: 1px solid #e8e8e8; /* 底部上边框 */
    text-align: right;
  }
}

/* 优化内容样式 */
.dialog-content {
  .qa-item {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #e8e8e8; /* 边框 */
    border-radius: 4px; /* 圆角 */
    background-color: #f9f9f9; /* 背景色 */
    .qa-title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      display: block; /* 确保换行 */
      margin-bottom: 5px;
    }
    .qa-text {
      font-size: 14px;
      color: #666;
      line-height: 1.6; /* 行间距 */
      display: block; /* 确保换行 */
    }
  .theme-white .el-dropdown {
    color: none !important;
  }
}
</style>