帮助中心

rain

2025-04-01 82c5bf39cb8459373cc6f5e31c99a1fd063ed464

帮助中心

 package-lock.json

@@ -16,7 +16,7 @@
        "axios": "^0.21.1",
        "crypto-js": "^4.1.1",
        "dayjs": "^1.11.13",
        "element-plus": "^2.7.3",
        "element-plus": "^2.9.7",
        "js-base64": "^3.7.4",
        "js-cookie": "^3.0.0",
        "js-md5": "^0.7.3",
@@ -1592,9 +1592,9 @@
      }
    },
    "node_modules/element-plus": {
      "version": "2.7.3",
      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.7.3.tgz",
      "integrity": "sha512-OaqY1kQ2xzNyRFyge3fzM7jqMwux+464RBEqd+ybRV9xPiGxtgnj/sVK4iEbnKnzQIa9XK03DOIFzoToUhu1DA==",
      "version": "2.9.7",
      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.9.7.tgz",
      "integrity": "sha512-6vjZh5SXBncLhUwJGTVKS5oDljfgGMh6J4zVTeAZK3YdMUN76FgpvHkwwFXocpJpMbii6rDYU3sgie64FyPerQ==",
      "dependencies": {
        "@ctrl/tinycolor": "^3.4.1",
        "@element-plus/icons-vue": "^2.3.1",
@@ -1604,7 +1604,7 @@
        "@types/lodash-es": "^4.17.6",
        "@vueuse/core": "^9.1.0",
        "async-validator": "^4.2.5",
        "dayjs": "^1.11.3",
        "dayjs": "^1.11.13",
        "escape-html": "^1.0.3",
        "lodash": "^4.17.21",
        "lodash-es": "^4.17.21",

 package.json

@@ -17,7 +17,7 @@
    "axios": "^0.21.1",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.13",
    "element-plus": "^2.7.3",
    "element-plus": "^2.9.7",
    "js-base64": "^3.7.4",
    "js-cookie": "^3.0.0",
    "js-md5": "^0.7.3",

 src/page/index/top/index.vue

@@ -11,24 +11,15 @@
      <top-search class="top-bar__item" v-if="setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <!-- <div v-if="setting.color" class="top-bar__item">
        <top-color></top-color>
      </div>
      <div v-if="setting.theme" class="top-bar__item">
        <top-theme></top-theme>
      </div> -->
      <div v-if="setting.lock" class="top-bar__item">
        <top-lock></top-lock>
      </div>
      <!-- <div class="top-bar__item">
        <top-lang></top-lang>
      </div> -->
      <div class="top-bar__item">
        <top-qna></top-qna>
      </div>
      <div class="top-bar__item" v-if="setting.fullscreen">
        <top-full></top-full>
      </div>
      <!-- <div class="top-bar__item" v-if="setting.debug">
        <top-logs></top-logs>
      </div> -->
      <div class="top-user">
        <img class="top-bar__img" :src="userInfo.avatar" />
        <el-dropdown>
@@ -56,6 +47,7 @@
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import topLock from './top-lock.vue';
@@ -66,6 +58,7 @@
import topColor from './top-color.vue';
import topLang from './top-lang.vue';
import topFull from './top-full.vue';
import topQna from './top-qna.vue';
import topSetting from '../setting.vue';

export default {
@@ -78,6 +71,7 @@
    topColor,
    topLang,
    topFull,
    topQna,
    topSetting,
  },
  name: 'top',
@@ -85,7 +79,7 @@
    return {};
  },
  filters: {},
  created() { },
  created() {},
  computed: {
    ...mapGetters([
      'setting',
@@ -118,4 +112,57 @@
};
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.avue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.top-bar__left {
  flex: 0 0 auto;
}

.top-bar__title {
  flex: 1;
  display: flex;
  align-items: center;
}

.top-bar__right {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  height: 100%;
}

.top-bar__item {
  margin-right: 15px;
  display: inline-block !important;
}

.top-user {
  display: flex;
  align-items: center;
}

.top-bar__img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #606266;
}

.el-dropdown-link:hover {
  color: #409EFF;
}
</style>

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

New file
@@ -0,0 +1,130 @@
<template>
  <div class="top-qna" @mouseenter="disableTooltip" @mouseleave="enableTooltip">
    <el-tooltip :disabled="tooltipDisabled" content="帮助中心" placement="bottom">
      <el-icon @click="showHelp" class="help-icon">
        <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：智飞无人机是否支持夜间作业？</span>
          <span class="qa-text">
            A3：是的，大疆无人机支持夜间作业，部分型号配备了红外摄像头和夜视功能，能够在低光环境下进行高效作业。
          </span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </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>

<style lang="scss" scoped>
.top-qna {
  display: inline-block !important;
  padding: 5px;

  .help-icon {
    font-size: 20px !important;
    cursor: pointer;
    color: #FFFFFF; /* 白色 */
    display: inline-block !important;
    line-height: 1 !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>

 yarn.lock

@@ -641,7 +641,7 @@
    "es5-ext" "^0.10.50"
    "type" "^1.0.1"

"dayjs@^1.10.4", "dayjs@^1.11.13", "dayjs@^1.11.3":
"dayjs@^1.10.4", "dayjs@^1.11.13":
  "integrity" "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
  "resolved" "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz"
  "version" "1.11.13"
@@ -701,10 +701,10 @@
  "resolved" "https://registry.npmmirror.com/domify/-/domify-1.4.2.tgz"
  "version" "1.4.2"

"element-plus@^2.7.3", "element-plus@>=2.2.0":
  "integrity" "sha512-OaqY1kQ2xzNyRFyge3fzM7jqMwux+464RBEqd+ybRV9xPiGxtgnj/sVK4iEbnKnzQIa9XK03DOIFzoToUhu1DA=="
  "resolved" "https://registry.npmjs.org/element-plus/-/element-plus-2.7.3.tgz"
  "version" "2.7.3"
"element-plus@^2.9.7", "element-plus@>=2.2.0":
  "integrity" "sha512-6vjZh5SXBncLhUwJGTVKS5oDljfgGMh6J4zVTeAZK3YdMUN76FgpvHkwwFXocpJpMbii6rDYU3sgie64FyPerQ=="
  "resolved" "https://registry.npmjs.org/element-plus/-/element-plus-2.9.7.tgz"
  "version" "2.9.7"
  dependencies:
    "@ctrl/tinycolor" "^3.4.1"
    "@element-plus/icons-vue" "^2.3.1"
@@ -714,7 +714,7 @@
    "@types/lodash-es" "^4.17.6"
    "@vueuse/core" "^9.1.0"
    "async-validator" "^4.2.5"
    "dayjs" "^1.11.3"
    "dayjs" "^1.11.13"
    "escape-html" "^1.0.3"
    "lodash" "^4.17.21"
    "lodash-es" "^4.17.21"