feat(projects): 添加百度地图插件

.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
     defineEmits: 'readonly',
     defineExpose: 'readonly',
     withDefaults: 'readonly',
-    PROJECT_BUILD_TIME: 'readonly'
+    PROJECT_BUILD_TIME: 'readonly',
+    BMapGL: 'readonly'
   },
   parser: 'vue-eslint-parser',
   parserOptions: {

package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@antv/g2plot": "^2.3.39",
     "@better-scroll/core": "^2.4.2",
-    "@vueuse/core": "^6.7.6",
+    "@vueuse/core": "^6.8.0",
     "axios": "^0.24.0",
     "chroma-js": "^2.1.2",
     "clipboard": "^2.0.8",
@@ -37,12 +37,13 @@
   "devDependencies": {
     "@commitlint/cli": "^14.1.0",
     "@commitlint/config-conventional": "^14.1.0",
-    "@iconify/json": "^1.1.424",
+    "@iconify/json": "^1.1.425",
     "@iconify/vue": "^3.0.0",
+    "@types/bmapgl": "^0.0.4",
     "@types/chroma-js": "^2.1.3",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
     "@vitejs/plugin-vue": "^1.9.4",
     "@vue/compiler-sfc": "^3.2.21",
     "@vue/eslint-config-prettier": "^6.0.0",
@@ -51,8 +52,8 @@
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
     "dotenv": "^10.0.0",
-    "eslint": "^8.1.0",
-    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-prettier": "^4.0.0",
@@ -66,11 +67,11 @@
     "sass": "^1.43.4",
     "typescript": "^4.4.4",
     "unplugin-icons": "^0.12.18",
-    "unplugin-vue-components": "^0.17.1",
+    "unplugin-vue-components": "^0.17.2",
     "vite": "~2.5.10",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-windicss": "^1.5.1",
-    "vue-tsc": "^0.28.10",
+    "vue-tsc": "~0.28.10",
     "vueuc": "^0.4.15",
     "windicss": "^3.2.1"
   },

src/hooks/common/index.ts

@@ -7,6 +7,7 @@ import useRouteProps from './useRouteProps';
 import useBoolean from './useBoolean';
 import useLoading from './useLoading';
 import useScrollBehavior from './useScrollBehavior';
+import useScript from './useScript';
 
 export {
   useAppTitle,
@@ -17,5 +18,6 @@ export {
   useRouteProps,
   useBoolean,
   useLoading,
-  useScrollBehavior
+  useScrollBehavior,
+  useScript
 };

src/hooks/common/useRouterChange.ts

@@ -28,7 +28,7 @@ export default function useRouterChange(inSetup: boolean = true) {
    * @param module - 展示的登录模块
    * @param redirectUrl - 重定向地址
    */
-  function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl?: LoginRedirect) {
+  function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl: LoginRedirect = 'current') {
     const routeLocation: RouteLocationRaw = {
       path: EnumRoutePath.login,
       query: { module }

src/hooks/common/useScript.ts

@@ -0,0 +1,45 @@
+import { onUnmounted } from 'vue';
+import useLoading from './useLoading';
+import useBoolean from './useBoolean';
+
+export default function useScript(src: string) {
+  const { loading, startLoading, endLoading } = useLoading();
+  const { bool: isSuccess, setTrue: setIsSuccess, setFalse: setNotSuccess } = useBoolean();
+
+  let script: HTMLScriptElement;
+  function removeScript() {
+    if (script) {
+      script.remove();
+    }
+  }
+
+  function load() {
+    startLoading();
+    return new Promise((resolve, reject) => {
+      script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.onload = () => {
+        endLoading();
+        setIsSuccess();
+        resolve('');
+      };
+      script.onerror = err => {
+        endLoading();
+        setNotSuccess();
+        reject(err);
+      };
+      script.src = src;
+      document.head.appendChild(script);
+    });
+  }
+
+  onUnmounted(() => {
+    removeScript();
+  });
+
+  return {
+    loading,
+    isSuccess,
+    load
+  };
+}

src/settings/constant.ts

@@ -0,0 +1,2 @@
+/** 百度地图sdk地址 */
+export const BAIDU_MAP_SDK_URL = 'https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU';

src/settings/index.ts

@@ -1 +1,2 @@
 export * from './theme';
+export * from './constant';

src/typings/bmapgl.d.ts

@@ -0,0 +1 @@
+/// <reference types="bmapgl" />

src/views/component/editor/quill/index.vue

@@ -1,12 +1,12 @@
 <template>
-	<div>
-		<n-card title="富文本插件" class="shadow-sm rounded-16px">
-			<div ref="domRef" class="dark:bg-dark"></div>
-			<template #footer>
-				<github-link link="https://github.com/wangeditor-team/wangEditor" />
-			</template>
-		</n-card>
-	</div>
+  <div>
+    <n-card title="富文本插件" class="shadow-sm rounded-16px">
+      <div ref="domRef" class="dark:bg-dark"></div>
+      <template #footer>
+        <github-link link="https://github.com/wangeditor-team/wangEditor" />
+      </template>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -19,24 +19,26 @@ const editor = ref<WangEditor | null>(null);
 const domRef = ref<HTMLElement | null>(null);
 
 function renderWangEditor() {
-	editor.value = new WangEditor(domRef.value);
-	setEditorConfig();
-	editor.value.create();
+  editor.value = new WangEditor(domRef.value);
+  setEditorConfig();
+  editor.value.create();
 }
 
 function setEditorConfig() {
-	editor.value!.config.zIndex = 10;
+  editor.value!.config.zIndex = 10;
 }
 
 onMounted(() => {
-	renderWangEditor();
+  renderWangEditor();
 });
 </script>
 <style scoped>
-:deep(.w-e-text-container) {
-	background: inherit;
-}
 :deep(.w-e-toolbar) {
-	background: inherit !important;
+  background: inherit !important;
+  border-color: #999 !important;
+}
+:deep(.w-e-text-container) {
+  background: inherit;
+  border-color: #999 !important;
 }
 </style>

src/views/component/map/components/BaiduMap.vue

@@ -0,0 +1,27 @@
+<template>
+  <div ref="domRef" class="w-full h-full"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { BAIDU_MAP_SDK_URL } from '@/settings';
+import { useScript } from '@/hooks';
+
+const { load } = useScript(BAIDU_MAP_SDK_URL);
+
+const domRef = ref<HTMLDivElement | null>(null);
+
+async function renderBaiduMap() {
+  await load();
+  await nextTick();
+  const map = new BMapGL.Map(domRef.value!);
+  const point = new BMapGL.Point(116.404, 39.915);
+  map.centerAndZoom(point, 15);
+  map.enableScrollWheelZoom();
+}
+
+onMounted(() => {
+  renderBaiduMap();
+});
+</script>
+<style scoped></style>

src/views/component/map/components/GaodeMap.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>地图</div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/views/component/map/components/TencentMap.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>地图</div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>

src/views/component/map/components/index.ts

@@ -0,0 +1,5 @@
+import BaiduMap from './BaiduMap.vue';
+import GaodeMap from './GaodeMap.vue';
+import TencentMap from './TencentMap.vue';
+
+export { BaiduMap, GaodeMap, TencentMap };

src/views/component/map/index.vue

@@ -1,6 +1,30 @@
 <template>
-  <div>地图</div>
+  <div>
+    <n-card title="地图插件" class="h-full shadow-sm rounded-16px">
+      <n-tabs type="line" class="flex-col-stretch h-full" pane-class="flex-1-hidden">
+        <n-tab-pane v-for="item in maps" :key="item.id" :name="item.id" :tab="item.label">
+          <component :is="item.component" />
+        </n-tab-pane>
+      </n-tabs>
+    </n-card>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { NCard, NTabs, NTabPane } from 'naive-ui';
+import { BaiduMap, GaodeMap, TencentMap } from './components';
+
+interface Map {
+  id: string;
+  label: string;
+  component: Component;
+}
+
+const maps: Map[] = [
+  { id: 'baidu', label: '百度地图', component: BaiduMap },
+  { id: 'gaode', label: '高德地图', component: GaodeMap },
+  { id: 'tencent', label: '腾讯地图', component: TencentMap }
+];
+</script>
 <style scoped></style>