From 82c5bf39cb8459373cc6f5e31c99a1fd063ed464 Mon Sep 17 00:00:00 2001
From: rain <1679827795@qq.com>
Date: Tue, 01 Apr 2025 19:38:39 +0800
Subject: [PATCH] 帮助中心
---
package-lock.json | 10 +-
yarn.lock | 12 +-
package.json | 2
src/page/index/top/top-qna.vue | 130 ++++++++++++++++++++++++++++++++
src/page/index/top/index.vue | 75 +++++++++++++++---
5 files changed, 203 insertions(+), 26 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 22cc3d9..15521d3 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 3ae8478..ac506b3 100644
--- a/package.json
+++ b/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",
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 228618a..5f37bac 100644
--- a/src/page/index/top/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/page/index/top/top-qna.vue b/src/page/index/top/top-qna.vue
new file mode 100644
index 0000000..0f0968d
--- /dev/null
+++ b/src/page/index/top/top-qna.vue
@@ -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>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 03e512c..ad2140e 100644
--- a/yarn.lock
+++ b/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"
--
Gitblit v1.9.3