fix: 修复标题空值报错,更新代理配置并补充ElMessage配置
补充ElMessage的ESLint全局声明与自动导入类型定义,解决编辑器无提示和lint校验错误 更新.env文件中的代理目标地址为https://juelin.onwall.cn/ 为页面标题赋值添加空值保护,避免因undefined导致的异常 重构info.vue的详情处理逻辑,统一页面标题设置流程
Showing
5 changed files
with
28 additions
and
10 deletions
| ... | @@ -2,9 +2,10 @@ | ... | @@ -2,9 +2,10 @@ |
| 2 | VITE_PORT = 8006 | 2 | VITE_PORT = 8006 |
| 3 | 3 | ||
| 4 | # 反向代理服务器地址 | 4 | # 反向代理服务器地址 |
| 5 | -VITE_PROXY_TARGET = https://oa-dev.onwall.cn | 5 | +# VITE_PROXY_TARGET = https://oa-dev.onwall.cn |
| 6 | # VITE_PROXY_TARGET = https://bm.jiqun.com | 6 | # VITE_PROXY_TARGET = https://bm.jiqun.com |
| 7 | # VITE_PROXY_TARGET = https://oa.onwall.cn | 7 | # VITE_PROXY_TARGET = https://oa.onwall.cn |
| 8 | +VITE_PROXY_TARGET = https://juelin.onwall.cn/ | ||
| 8 | 9 | ||
| 9 | # API请求前缀 | 10 | # API请求前缀 |
| 10 | VITE_PROXY_PREFIX = /srv/ | 11 | VITE_PROXY_PREFIX = /srv/ | ... | ... |
| ... | @@ -2,6 +2,7 @@ | ... | @@ -2,6 +2,7 @@ |
| 2 | export {} | 2 | export {} |
| 3 | declare global { | 3 | declare global { |
| 4 | const EffectScope: typeof import('vue')['EffectScope'] | 4 | const EffectScope: typeof import('vue')['EffectScope'] |
| 5 | + const ElMessage: typeof import('element-plus/es')['ElMessage'] | ||
| 5 | const computed: typeof import('vue')['computed'] | 6 | const computed: typeof import('vue')['computed'] |
| 6 | const createApp: typeof import('vue')['createApp'] | 7 | const createApp: typeof import('vue')['createApp'] |
| 7 | const customRef: typeof import('vue')['customRef'] | 8 | const customRef: typeof import('vue')['customRef'] | ... | ... |
| ... | @@ -116,11 +116,23 @@ const props = defineProps({ | ... | @@ -116,11 +116,23 @@ const props = defineProps({ |
| 116 | 116 | ||
| 117 | const page_details = ref({}); | 117 | const page_details = ref({}); |
| 118 | 118 | ||
| 119 | +const syncDocumentTitle = () => { | ||
| 120 | + if (page_details.value?.name) { | ||
| 121 | + document.title = page_details.value.name; | ||
| 122 | + } | ||
| 123 | +} | ||
| 124 | + | ||
| 125 | +const applyPageDetails = (details, extra = {}) => { | ||
| 126 | + if (!details) return; | ||
| 127 | + page_details.value = { ...details, ...extra }; | ||
| 128 | + syncDocumentTitle(); | ||
| 129 | +} | ||
| 130 | + | ||
| 119 | watch( | 131 | watch( |
| 120 | () => props.info, | 132 | () => props.info, |
| 121 | (v) => { | 133 | (v) => { |
| 122 | - if (v.details.length) { | 134 | + if (v?.details?.length) { |
| 123 | - page_details.value = { ...v.details[0], position: v.position, path: v.path }; | 135 | + applyPageDetails(v.details[0], { position: v.position, path: v.path }); |
| 124 | // 获取浏览器可视范围的高度 | 136 | // 获取浏览器可视范围的高度 |
| 125 | $('.info-page').height(props.height + 'px'); | 137 | $('.info-page').height(props.height + 'px'); |
| 126 | } | 138 | } |
| ... | @@ -191,14 +203,17 @@ const scrollTop = ref(0); | ... | @@ -191,14 +203,17 @@ const scrollTop = ref(0); |
| 191 | 203 | ||
| 192 | onMounted(async () => { | 204 | onMounted(async () => { |
| 193 | // 通过ID查询到标记点详情 | 205 | // 通过ID查询到标记点详情 |
| 194 | - if (!props.info) { | 206 | + if (!props.info?.details?.length) { |
| 195 | let id = $route.query.id; | 207 | let id = $route.query.id; |
| 196 | const { data } = await mapAPI({ i: id }); | 208 | const { data } = await mapAPI({ i: id }); |
| 197 | const raw_list = data.list[0].list; // 获取标记点列表 | 209 | const raw_list = data.list[0].list; // 获取标记点列表 |
| 198 | const marker_id = $route.query.marker_id; | 210 | const marker_id = $route.query.marker_id; |
| 199 | const current_marker = raw_list.filter(item => item.id == marker_id)[0]; | 211 | const current_marker = raw_list.filter(item => item.id == marker_id)[0]; |
| 200 | // | 212 | // |
| 201 | - page_details.value = { ...current_marker.details[0], position: current_marker.position, path: current_marker.path }; | 213 | + applyPageDetails(current_marker.details[0], { |
| 214 | + position: current_marker.position, | ||
| 215 | + path: current_marker.path | ||
| 216 | + }); | ||
| 202 | // 富文本转义, 分割线样式转换 | 217 | // 富文本转义, 分割线样式转换 |
| 203 | page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') | 218 | page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') |
| 204 | page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') | 219 | page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>') |
| ... | @@ -253,7 +268,7 @@ onMounted(async () => { | ... | @@ -253,7 +268,7 @@ onMounted(async () => { |
| 253 | }, 500); | 268 | }, 500); |
| 254 | } | 269 | } |
| 255 | // 地图标题 | 270 | // 地图标题 |
| 256 | - document.title = page_details.value.name; | 271 | + syncDocumentTitle(); |
| 257 | // 微信分享 | 272 | // 微信分享 |
| 258 | const shareData = { | 273 | const shareData = { |
| 259 | title: page_details.value.name, // 分享标题 | 274 | title: page_details.value.name, // 分享标题 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2023-05-19 14:54:27 | 2 | * @Date: 2023-05-19 14:54:27 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-08 14:51:23 | 4 | + * @LastEditTime: 2026-05-27 17:24:49 |
| 5 | * @FilePath: /map-demo/src/views/by/map.vue | 5 | * @FilePath: /map-demo/src/views/by/map.vue |
| 6 | * @Description: 公众地图主体页面 | 6 | * @Description: 公众地图主体页面 |
| 7 | --> | 7 | --> |
| ... | @@ -325,10 +325,10 @@ export default { | ... | @@ -325,10 +325,10 @@ export default { |
| 325 | } | 325 | } |
| 326 | } | 326 | } |
| 327 | // 地图标题 | 327 | // 地图标题 |
| 328 | - document.title = data.map.map_title; | 328 | + document.title = data.map.map_title ?? ''; |
| 329 | // 微信分享 | 329 | // 微信分享 |
| 330 | const shareData = { | 330 | const shareData = { |
| 331 | - title: data.map.map_title, // 分享标题 | 331 | + title: data.map.map_title ?? '', // 分享标题 |
| 332 | desc: '别院地图', // 分享描述 | 332 | desc: '别院地图', // 分享描述 |
| 333 | link: location.origin + location.pathname + location.hash, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致 | 333 | link: location.origin + location.pathname + location.hash, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致 |
| 334 | imgUrl: '', // 分享图标 | 334 | imgUrl: '', // 分享图标 |
| ... | @@ -360,7 +360,7 @@ export default { | ... | @@ -360,7 +360,7 @@ export default { |
| 360 | // 设置贴片地图 | 360 | // 设置贴片地图 |
| 361 | this.setTitleLayer(); | 361 | this.setTitleLayer(); |
| 362 | // 地图标题 | 362 | // 地图标题 |
| 363 | - document.title = data.map.map_title; | 363 | + document.title = data.map.map_title ?? ''; |
| 364 | // | 364 | // |
| 365 | // setTimeout(() => { | 365 | // setTimeout(() => { |
| 366 | // this.info_height = (0.5 * window.innerHeight); | 366 | // this.info_height = (0.5 * window.innerHeight); | ... | ... |
-
Please register or login to post a comment