update command

src/assets/css/style.css

@@ -3247,6 +3247,16 @@ select {
     padding-bottom: 0px;
   }
 
+  .md\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .md\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
   .md\:pl-4 {
     padding-left: 1rem;
   }
@@ -3296,6 +3306,10 @@ select {
     margin-top: 3rem;
   }
 
+  .lg\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -3343,6 +3357,16 @@ select {
     padding-right: 2rem;
   }
 
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .lg\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
   .lg\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;

src/components/CommandPalettes.vue

@@ -1,6 +1,6 @@
 <template>
     <TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
-        <Dialog as="div" class="relative z-10" @close="onClose">
+        <Dialog as="div" class="relative z-10" @close="command.closeCommand">
             <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
                 leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
                 <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
@@ -32,7 +32,7 @@
                                     <ul class="text-sm text-gray-700">
                                         <ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
                                             :key="menu.path" v-slot="{ active }">
-                                            <li @click="openMenu(menu)"
+                                            <li @click="command.openMenu(menu)"
                                                 :class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
                                                 <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
                                                     alt="icon"
@@ -97,9 +97,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
-import { DocumentTextIcon } from '@heroicons/vue/24/outline'
 import {
     Combobox,
     ComboboxInput,
@@ -110,14 +109,11 @@ import {
     TransitionChild,
     TransitionRoot,
 } from '@headlessui/vue'
-import { useRouter, type RouteRecordRaw } from 'vue-router'
+import { routes } from '@/router'
-import { routes, extractLeafRoutes } from '@/router'
 import { useCommandPalattesStore } from '@/stores/command'
 import { navigationIcon } from '@/utils/route'
 
 const command = useCommandPalattesStore()
-
-const route = useRouter()
 const recent = computed(() => query.value === '' ? command.readRecent() : [])
 const query = ref('')
 const filteredMenus = computed(() =>
@@ -125,7 +121,6 @@ const filteredMenus = computed(() =>
         ? []
         : command.searchRoutesByName(routes, query.value)
 )
-const onClose = () => command.open = false
 
 let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
 const onQueryChange = (value: string) => {
@@ -142,10 +137,4 @@ const onQueryChange = (value: string) => {
     }, 300);
 }
 
-const openMenu = (menu: RouteRecordRaw) => {
-    command.addRecent(menu)
-    route.push(menu.path)
-    onClose()
-}
-
 </script>

src/components/Pages/MenuProvider.vue

@@ -1,6 +1,6 @@
 <template>
-    <main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-4 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
+    <main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
-        <div v-if="route.path !== '/home'" class="pt-4 max-w-7xl">
+        <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
             <h1 class="text-xl font-medium md:text-3xl text-dark">{{ currentRouteName }}</h1>
         </div>
         <div class="mt-2 sm:mt-4 dx-viewport">

src/components/Pages/Welcome.vue

@@ -16,7 +16,7 @@
                     </h2>
                     <div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
                         :key="menu.path">
-                        <div @click="openMenu(menu)" class="group">
+                        <div @click="command.openMenu(menu)" class="group">
                             <div
                                 class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
                                 <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
@@ -63,17 +63,15 @@
 </template>
 
 <script setup lang="ts">
-import { readData, writeData } from '@/utils/storage'
 import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useCommandPalattesStore } from '@/stores/command'
 import { IconApp } from '@/utils/icons'
-import { useRouter, type RouteRecordRaw } from 'vue-router'
+import { type RouteRecordRaw } from 'vue-router'
 import { routes, extractLeafRoutes } from '@/router'
 import { navigationIcon } from '@/utils/route';
 
 const command = useCommandPalattesStore()
-const route = useRouter()
 const recent = computed(() => query.value === '' ? command.readRecent() : [])
 const query = ref('')
 
@@ -87,27 +85,5 @@ const filteredMenus = computed(() =>
         ? []
         : searchRoutesByName(routes, query.value)
 )
-const onClose = () => command.open = false
-
-let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
-const onQueryChange = (value: string) => {
-    if (debounceTimeout) {
-        clearTimeout(debounceTimeout);
-    }
-    debounceTimeout = setTimeout(() => {
-        // check if value is empty or only spaces
-        if (value.trim() === '') {
-            query.value = ''
-            return
-        }
-        query.value = value
-    }, 300);
-}
-
-const openMenu = (menu: RouteRecordRaw) => {
-    command.addRecent(menu)
-    route.push(menu.path)
-    onClose()
-}
 
 </script>

src/stores/command.ts

@@ -1,12 +1,14 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import type { RouteRecordRaw } from 'vue-router'
+import { useRouter, type RouteRecordRaw } from 'vue-router'
 import { readDataJson, writeDataJson } from '@/utils/storage'
 import { extractLeafRoutes } from '@/router'
+import { useMenuStore } from '@/stores/menu'
 
 export const useCommandPalattesStore = defineStore('command_palettes', () => {
     const open = ref(false)
-
+    const route = useRouter()
+    const menu = useMenuStore()
     const controlStatus = ref(false)
     const keyFStatus = ref(false)
 
@@ -82,6 +84,16 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
         return matchingRoutes
     }
 
+    const openMenu = (routeTarget: RouteRecordRaw) => {
+        addRecent(routeTarget)
+        route.push(routeTarget.path)
+        closeCommand()
+    }
+
+    const closeCommand = () => {
+        open.value = false
+    }
+
     return {
         open,
         showCommandPalettes,
@@ -91,6 +103,8 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
         addRecent,
         readRecent,
         searchRoutesByName,
-        searchRoutesPath
+        searchRoutesPath,
+        openMenu,
+        closeCommand
     }
 })