fix(admin): tabs issues

components/layout/admin/Provider.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AdminRouteItem } from '@/composables/routes/admin'
+import { cloneDeep } from 'lodash-es'
 const routes = useAdminRoutes()
 
 export interface AdminContext {
@@ -13,22 +14,30 @@ const adminCtx = reactive<AdminContext>({
   routes: routes
 })
 
+const cachedRoutes = useState<AdminRouteItem[]>('admin_routes', () =>
+  cloneDeep(routes)
+)
 provide('adminCtx', readonly(adminCtx))
 provide('navigateToByKey', async (key: string | null) => {
-  const item = routes.find((item) => item.key === key)
+  const item = cachedRoutes.value.find((item) => item.key === key)
+  // console.log(item)
   if (item) {
     await navigateTo(item.route)
   }
 })
 
 watch(
-  () => route.path,
+  () => route.fullPath,
   (val) => {
-    const item = routes.find(
-      (item) => trimEnd(item.route, '/') === trimEnd(val, '/')
+    // console.log(val, route.path)
+    const index = routes.findIndex(
+      (item) => trimEnd(item.route, '/') === trimEnd(route.path, '/')
     )
-    if (item) {
-      adminCtx.active = item.key
+    // console.log(index, routes)
+    if (index > -1) {
+      adminCtx.active = cachedRoutes.value[index].key
+      cachedRoutes.value[index].route = val // update route
+      // console.log(val)
     }
   },
   {

components/layout/admin/Tabs.vue

@@ -14,6 +14,8 @@ if (!ctx) throw new Error('adminCtx is not provided')
 const navigateToByKey =
   inject<(key: string) => Promise<void>>('navigateToByKey')!
 
+const route = useRoute()
+
 const state = reactive({
   active: null as string | null,
   tabs: [] as Tab[]
@@ -54,6 +56,12 @@ watch(
 // watchEffect(() => console.log(state.tabs))
 
 const onClose = (tab: Tab) => {
+  if (state.tabs.length === 1) {
+    state.tabs = []
+    state.active = 'admin_dashboard'
+    return
+  }
+
   const index = state.tabs.findIndex((item) => item.key === tab.key)
   if (tab.key === state.active) {
     if (index > 0) {
@@ -87,7 +95,17 @@ const refreshing = ref(false)
 const refreshAll = async () => {
   refreshing.value = true
   try {
-    await refreshNuxtData()
+    console.log(route.fullPath)
+    await navigateTo(
+      {
+        path: route.path,
+        query: {
+          ...route.query,
+          refresh: Date.now()
+        }
+      },
+      { replace: true }
+    )
   } finally {
     refreshing.value = false
   }

components/layout/admin/header/Weather.client.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// const scriptURL =
+//   'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
+const config = {
+  CONFIG: {
+    modules: '01234',
+    background: '1',
+    tmpColor: 'FFFFFF',
+    tmpSize: '16',
+    cityColor: 'FFFFFF',
+    citySize: '16',
+    aqiColor: 'FFFFFF',
+    aqiSize: '16',
+    weatherIconSize: '24',
+    alertIconSize: '18',
+    padding: '10px 10px 10px 10px',
+    shadow: '1',
+    language: 'auto',
+    borderRadius: '15',
+    fixed: 'false',
+    vertical: 'top',
+    horizontal: 'left',
+    key: '1d61fb399b9d407fa576f612c6448e1b'
+  }
+}
+// const divRef = ref<HTMLDivElement | null>(null)
+
+// watch(
+//   () => divRef.value,
+//   async (div) => {
+//     if (div) {
+
+//     }
+//   }
+// )
+useHead({
+  script: [
+    {
+      src: 'https://widget.qweather.net/simple/static/js/he-simple.js?v=1.4.0',
+      async: true,
+      defer: true
+    }
+  ],
+  link: [
+    {
+      rel: 'stylesheet',
+      href: 'https://widget.qweather.net/simple/static/css/he-simple.css?v=1.4.0'
+    }
+  ]
+})
+
+onMounted(async () => {
+  console.log('loading weather script...')
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore ts(2339)
+  window.WIDGET = config
+  // await loadScript(scriptURL)
+})
+
+onUnmounted(() => {
+  // console.log('unloading weather script...')
+  // removeScript(scriptURL)
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore ts(2339)
+  delete window.WIDGET
+})
+</script>
+<template>
+  <div id="he-plugin-simple" ref="divRef"></div>
+</template>
+
+<style lang="scss">
+#he-plugin-simple,
+#weather-view-he {
+  @apply z-1000;
+}
+</style>

nuxt.config.ts

@@ -81,6 +81,7 @@ export default defineNuxtConfig({
   },
   antd: {},
   pwa: {
+    selfDestroying: true,
     registerType: 'autoUpdate',
     // registerWebManifestInRouteRules: true,
     manifest: {

pages/admin.vue

@@ -3,11 +3,12 @@ definePageMeta({
   middleware: ['auth', 'is-admin'],
   layout: 'admin'
 })
+// const route = useRoute()
 </script>
 
 <template>
   <div class="admin">
-    <NuxtPage :page-key="(route) => route.fullPath" />
+    <NuxtPage :keepalive="{}" />
   </div>
 </template>
 

utils/load-script.ts

@@ -1,6 +1,6 @@
 function createTag(src: string) {
   const script = document.createElement('script')
-  script.type = 'application/javascript'
+  script.type = 'text/javascript'
   // script.async = true
   script.src = src
   return script
@@ -42,7 +42,7 @@ export async function loadScript(src: string, e?: HTMLElement) {
   }
 
   script = createTag(src)
-  e ? e.appendChild(script) : document.body.appendChild(script)
+  e ? e.appendChild(script) : document.head.appendChild(script)
   const fn = await waitingLoaded(script)
   return fn
 }