From 02409bfbe15f22fc3b5dccadabfd860a660a49d9 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 11 Oct 2025 10:37:14 +0800
Subject: [PATCH] feat: 名称修改
---
src/page/index/top/top-qna.vue | 202 +++++++++++++++++++++-----------------------------
1 files changed, 86 insertions(+), 116 deletions(-)
diff --git a/src/page/index/top/top-qna.vue b/src/page/index/top/top-qna.vue
index 01d3209..18c4de6 100644
--- a/src/page/index/top/top-qna.vue
+++ b/src/page/index/top/top-qna.vue
@@ -1,131 +1,101 @@
<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>
.top-qna {
- display: inline-block !important;
- padding: 5px;
-
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ justify-content: center;
+ cursor: pointer;
.help-icon {
- font-size: 20px !important;
- cursor: pointer;
- color: #FFFFFF; /* 白色 */
- display: inline-block !important;
- line-height: 1 !important;
+ width: 25px;
+ height: 25px;
+ }
+ .theme-white .el-dropdown {
+ color: none !important;
}
}
-
-/* 优化弹出框样式 */
-: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;
- }
- }
- .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; /* 确保换行 */
- }
- }
-}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3