feat: 新增页签模式&地图错误修复&404问题修复 (#153)

* feat: 新增页签模式&地图错误修复 * fix: 修复404跳转问题 * fix: 检视意见修改
opentiny · Aug 9, 2024 · 1d44071 · 1d44071
1 parent 2429e9b
commit 1d44071
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 43 deletions.
diff --git a/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue b/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue
@@ -18,6 +18,9 @@
         </tiny-layout>
       </template>
       <tiny-layout class="layout-content">
+        <Tabs v-model="currentTabName" @click="onClick" with-close @close="onClose">
+          <tab-item v-for="(history,idx) of tabsHistory" :key="idx" :title="t(history.name)" :name="history.link"></tab-item>
+        </Tabs>
         <PageLayout />
       </tiny-layout>
       <template #footer>
@@ -58,7 +61,8 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch, onMounted } from 'vue';
+  import { ref, watch, onMounted, computed } from 'vue';
+  import {useI18n} from 'vue-i18n';
   import {
     Container as TinyContainer,
     Layout as TinyLayout,
@@ -72,11 +76,31 @@
   import Theme from '@/components/theme/index.vue';
   import Menu from '@/components/menu/index.vue';
   import { DefaultTheme } from '@/components/theme/type';
+  import {Tabs, TabItem} from '@opentiny/vue';
+  import {useTabStore} from '@/store';
+  import { useRouter } from 'vue-router';
   import PageLayout from './page-layout.vue';
   // 动态切换
+  const router = useRouter();
   const appStore = useAppStore();
   const changefooter = ref('#fff');
 
+  const {t} = useI18n();
+  const tabStore = useTabStore();
+
+  const tabsHistory = computed(() => tabStore.data);
+  const currentTabName = ref();
+  watch(()=>tabStore.current, ()=>{
+    currentTabName.value = tabStore.current?.link;
+  }, {deep: true, immediate: true});
+
+  const onClick = (tab: {name: string, link: string}) => {
+    router.replace(tab.name);
+  }
+  const onClose = (name:string) => {
+    tabStore.delByLink(name);
+  }
+
   // 切换简约模式，图标按钮
   const top = ref('10px');
 
@@ -196,6 +220,12 @@
    :deep(.tiny-tree-node__children > .tree-node-body) {
     padding-left: 50px;
    }
+   :deep(.tiny-tabs__content) {
+    display: none;
+   }
+   :deep(.tiny-tabs--top) {
+    padding: 0 16px;
+   }
   .theme-box {
     position: fixed;
     top: 88%;

diff --git a/packages/toolkits/pro/template/tinyvue/src/main.ts b/packages/toolkits/pro/template/tinyvue/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import * as echarts4 from 'echarts4';
+import {registerMap} from 'echarts';
 import { HwcClient } from '@opentiny/hwc-client';
 import globalComponents from '@/components';
 import router from './router';
@@ -12,12 +12,11 @@ import App from './App.vue';
 import '@/api/interceptor';
 import '@/assets/style/global.less';
 import config from '../hwc-exports.json';
-// eslint-disable-next-line import/extensions
-import 'echarts4/map/js/china.js';
 import chinaMap from './assets/chaina.json';
 
 if(import.meta.env.VITE_USE_MOCK) setupProdMockServer();
-echarts4.registerMap('china', chinaMap);
+
+registerMap('china', chinaMap as any);
 const app = createApp(App);
 
 // 增加华为云相关配置

diff --git a/packages/toolkits/pro/template/tinyvue/src/router/guard/index.ts b/packages/toolkits/pro/template/tinyvue/src/router/guard/index.ts
@@ -2,9 +2,11 @@ import type { Router } from 'vue-router';
 import { setRouteEmitter } from '@/utils/route-listener';
 import setupPermissionGuard from './permission';
 import {setupMenuGuard} from './menu';
+import { setupTabsGuard } from './tabs';
 
 function setupPageGuard(router: Router) {
   setupMenuGuard(router);
+  setupTabsGuard(router);
 }
 
 export default function createRouteGuard(router: Router) {

diff --git a/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts b/packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts
@@ -36,7 +36,11 @@ const toRoutes = (menus: ITreeNodeData[]) => {
       name: menu.label,
       path: menu.url,
       component: ()=>views[path](),
-      children: [...toRoutes(menu.children ?? [])]
+      children: [...toRoutes(menu.children ?? [])],
+      meta: {
+        locale: menu.locale,
+        requiresAuth: true,
+      }
     })
   }
   return router;

diff --git a/packages/toolkits/pro/template/tinyvue/src/router/guard/tabs.ts b/packages/toolkits/pro/template/tinyvue/src/router/guard/tabs.ts
@@ -0,0 +1,16 @@
+import { useTabStore } from "@/store";
+import { Router } from "vue-router";
+
+export const setupTabsGuard = (router:Router) => {
+  router.beforeEach((to, from, next) => {
+    const tabStore = useTabStore();
+    if (tabStore.has(to.meta.locale ?? '')) {
+      tabStore.set(to.meta.locale!);
+      next();
+      return;
+    }
+    tabStore.add({name: to.meta.locale!, link: to.fullPath});
+    tabStore.set(to.meta.locale!);
+    next();
+  })
+}
diff --git a/packages/toolkits/pro/template/tinyvue/src/store/index.ts b/packages/toolkits/pro/template/tinyvue/src/store/index.ts
@@ -2,8 +2,9 @@ import { createPinia } from 'pinia';
 import useAppStore from './modules/app';
 import useUserStore from './modules/user';
 import useTabBarStore from './modules/tab-bar';
+import { useTabStore } from './modules/tabs';
 
 const pinia = createPinia();
 
-export { useAppStore, useUserStore, useTabBarStore };
+export { useAppStore, useUserStore, useTabBarStore, useTabStore};
 export default pinia;
diff --git a/packages/toolkits/pro/template/tinyvue/src/store/modules/tabs.ts b/packages/toolkits/pro/template/tinyvue/src/store/modules/tabs.ts
@@ -0,0 +1,59 @@
+import { defineStore } from "pinia";
+
+type Tab = {
+  name: string;
+  link: string;
+}
+
+export const useTabStore = defineStore('tabs', {
+  state(){
+    return {
+      data: [] as Tab[],
+      current: {} as Tab,
+    }
+  },
+  actions: {
+    add(item: Tab) {
+      if (!item.name){
+        return {...item};
+      }
+      if (!this.has(item.name)){
+        this.data.push(item)
+      }
+      this.current = item;
+      return {...item};
+    },
+    set(name: string){
+      this.current = this.getByName(name)[0] ?? null;
+      return this.current;
+    },
+    has(name: string){
+      return this.data.some((tab) => tab.name === name)
+    },
+    getByName(name: string){
+      return this.data.filter((tab) => tab.name === name);
+    },
+    getByLink(link: string) {
+      return this.data.filter((tab) => tab.link === link);
+    },
+    delByLink(link: string){
+      if (this.data.length === 1){
+        return;
+      }
+      const idx = this.data.findIndex((tab) => tab.link === link);
+      if (idx === -1) {
+        return;
+      }
+      const hasNext = idx < this.data.length-1;
+      if (hasNext) {
+        this.current = this.data[idx+1];
+      } else {
+        const hasPrev = idx > 0;
+        if (hasPrev){
+          this.current = this.data[idx-1];
+        }
+      }
+      this.data.splice(idx, 1);
+    },
+  }
+})
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/region.vue b/packages/toolkits/pro/template/tinyvue/src/views/board/home/components/region.vue
@@ -18,40 +18,40 @@
   import RegionTable from './regiontable.vue';
 
   const data = [
-    { name: '北京', value: 350000 },
-    { name: '天津', value: 120000 },
-    { name: '上海', value: 300000 },
-    { name: '重庆', value: 92000 },
-    { name: '河北', value: 25000 },
-    { name: '河南', value: 20000 },
-    { name: '云南', value: 500 },
-    { name: '辽宁', value: 3050 },
-    { name: '黑龙江', value: 80000 },
-    { name: '湖南', value: 2000 },
-    { name: '安徽', value: 24580 },
-    { name: '山东', value: 40629 },
-    { name: '新疆', value: 36981 },
-    { name: '江苏', value: 13569 },
-    { name: '浙江', value: 24956 },
-    { name: '江西', value: 15194 },
-    { name: '湖北', value: 41398 },
-    { name: '广西', value: 41150 },
-    { name: '甘肃', value: 17630 },
-    { name: '山西', value: 27370 },
-    { name: '内蒙古', value: 27370 },
-    { name: '陕西', value: 97208 },
-    { name: '吉林', value: 88290 },
-    { name: '福建', value: 19978 },
-    { name: '贵州', value: 94485 },
-    { name: '广东', value: 89426 },
-    { name: '青海', value: 35484 },
-    { name: '西藏', value: 97413 },
-    { name: '四川', value: 54161 },
-    { name: '宁夏', value: 56515 },
-    { name: '海南', value: 54871 },
-    { name: '台湾', value: 48544 },
-    { name: '香港', value: 49474 },
-    { name: '澳门', value: 34594 },
+    { name: '北京市', value: 350000 },
+    { name: '天津市', value: 120000 },
+    { name: '上海市', value: 300000 },
+    { name: '重庆市', value: 92000 },
+    { name: '河北省', value: 25000 },
+    { name: '河南省', value: 20000 },
+    { name: '云南省', value: 500 },
+    { name: '辽宁省', value: 3050 },
+    { name: '黑龙江省', value: 80000 },
+    { name: '湖南省', value: 2000 },
+    { name: '安徽省', value: 24580 },
+    { name: '山东省', value: 40629 },
+    { name: '新疆维吾尔自治区', value: 36981 },
+    { name: '江苏省', value: 13569 },
+    { name: '浙江省', value: 24956 },
+    { name: '江西省', value: 15194 },
+    { name: '湖北省', value: 41398 },
+    { name: '广西壮族自治区', value: 41150 },
+    { name: '甘肃省', value: 17630 },
+    { name: '山西省', value: 27370 },
+    { name: '内蒙古自治区', value: 27370 },
+    { name: '陕西省', value: 97208 },
+    { name: '吉林省', value: 88290 },
+    { name: '福建省', value: 19978 },
+    { name: '贵州省', value: 94485 },
+    { name: '广东省', value: 89426 },
+    { name: '青海省', value: 35484 },
+    { name: '西藏自治区', value: 97413 },
+    { name: '四川省', value: 54161 },
+    { name: '宁夏回族自治区', value: 56515 },
+    { name: '海南省', value: 54871 },
+    { name: '台湾省', value: 48544 },
+    { name: '香港省', value: 49474 },
+    { name: '澳门特别行政区', value: 34594 },
   ];
 
   let echarts = inject<any>('echarts');
@@ -87,7 +87,6 @@
         top: '30px',
         itemStyle: {
           normal: {
-            areaColor: '#000',
             borderColor: 'skyblue',
             borderWidth: 1,
             shadowColor: '#ccc',

diff --git a/packages/toolkits/pro/template/tinyvue/src/views/not-found/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/not-found/index.vue
@@ -8,6 +8,17 @@
   import { useRouter } from 'vue-router';
 
   const router = useRouter();
+  const toPath = router.currentRoute.value.path;
+  console.log(router.currentRoute);
+  if(!router.currentRoute.value.query.final) {
+    router.push({
+      name:'redirect',
+      query: {
+        path: toPath,
+      }
+    })
+  }
+
   const back = () => {
     // warning： Go to the node that has the permission
     router.push({ name: 'Workplace' });

diff --git a/packages/toolkits/pro/template/tinyvue/src/views/redirect.vue b/packages/toolkits/pro/template/tinyvue/src/views/redirect.vue
@@ -7,5 +7,15 @@ import { useRouter } from 'vue-router';
 
 const router = useRouter();
 const route = router.currentRoute.value;
-router.replace({name: route.query.to?.toString() ?? 'Home'});
+if (route.query.path){
+  router.push({
+    path:route.query.path.toString(),
+    query: {
+      final: '1'
+    }
+  });
+} else {
+
+  router.push({name: route.query.to?.toString() ?? 'Home'});
+}
 </script>