fix: manage hidden groups and other minor style

README.md

@@ -1,18 +1,20 @@
-# zashboard README
+# zashboard
 
-## 🌐 **Online**
+<img src="pc.png" height="350">   <img src="mobile.png" height="350">
+
+## **Online**
 You can access the online zashboard at the following link:
 - [Online zashboard](http://board.zash.run.place)
 
-## 📥 **Download**
+## **Download**
 For **Mihomo** users:
 The **Upgrade Dashboard** function utilizes the API from Mihomo core. Ensure you set the [configuration URL](https://wiki.metacubex.one/config/general/#_9) to the zashboard's URL.
 
 You can download the zashboard files here:
 - [dist.zip (7.64MB)](https://github.com/Zephyruso/zashboard/releases/latest/download/dist.zip) – Includes better font-loading experience.
 - [dist-cdn-fonts.zip (1.27MB)](https://github.com/Zephyruso/zashboard/releases/latest/download/dist-cdn-fonts.zip) – Optimized for devices with limited storage.
 
-## 🐳 **Docker Setup**
+## **Docker Setup**
 To run zashboard via Docker, use the following command:
 
 ```

src/components/common/DialogWrapper.vue

@@ -4,13 +4,15 @@
     class="modal"
     @close="isOpen = false"
   >
-    <div class="modal-box relative max-h-[90vh] overflow-hidden p-0 max-md:max-h-[70vh]">
+    <div class="modal-box relative max-h-[90dvh] overflow-hidden p-0 max-md:max-h-[70dvh]">
       <form method="dialog">
         <button class="btn btn-circle btn-ghost btn-xs absolute right-1 top-1 z-10 outline-none">
           <XMarkIcon class="h-4 w-4" />
         </button>
       </form>
-      <div :class="['max-h-[90vh] overflow-y-auto max-md:max-h-[70vh]', noPadding ? 'p-0' : 'p-4']">
+      <div
+        :class="['max-h-[90dvh] overflow-y-auto max-md:max-h-[70dvh]', noPadding ? 'p-0' : 'p-4']"
+      >
         <slot></slot>
       </div>
     </div>

src/components/connections/ConnectionDetails.vue

@@ -3,7 +3,7 @@
     v-model="connectionDetailModalShow"
     :no-padding="true"
   >
-    <div class="flex h-full max-h-[69vh] flex-col overflow-hidden py-4 md:max-h-[89vh]">
+    <div class="flex h-full max-h-[69dvh] flex-col overflow-hidden py-4 md:max-h-[89dvh]">
       <VueJsonPretty
         :data="infoConn"
         class="overflow-y-auto px-4"

src/components/connections/ConnectionTable.vue

@@ -112,19 +112,21 @@
             >
               <template v-if="cell.column.getIsGrouped()">
                 <template v-if="rows[virtualRow.index].getCanExpand()">
-                  <MagnifyingGlassMinusIcon
-                    v-if="rows[virtualRow.index].getIsExpanded()"
-                    class="-mt-1 mr-1 inline-block h-4 w-4"
-                  />
-                  <MagnifyingGlassPlusIcon
-                    v-else
-                    class="-mt-1 mr-1 inline-block h-4 w-4"
-                  />
-                  <FlexRender
-                    :render="cell.column.columnDef.cell"
-                    :props="cell.getContext()"
-                  />
-                  <span> ({{ rows[virtualRow.index].subRows.length }}) </span>
+                  <div class="flex items-center">
+                    <MagnifyingGlassMinusIcon
+                      v-if="rows[virtualRow.index].getIsExpanded()"
+                      class="mr-1 inline-block h-4 w-4"
+                    />
+                    <MagnifyingGlassPlusIcon
+                      v-else
+                      class="mr-1 inline-block h-4 w-4"
+                    />
+                    <FlexRender
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                    <span class="ml-1"> ({{ rows[virtualRow.index].subRows.length }}) </span>
+                  </div>
                 </template>
               </template>
               <FlexRender

src/components/proxies/ProxyGroup.vue

@@ -87,7 +87,13 @@ import { PROXY_TYPE } from '@/constant'
 import { prettyBytesHelper } from '@/helper'
 import { useTooltip } from '@/helper/tooltip'
 import { activeConnections } from '@/store/connections'
-import { hiddenGroupMap, proxyGroupLatencyTest, proxyMap, selectProxy } from '@/store/proxies'
+import {
+  getNowProxyNodeName,
+  hiddenGroupMap,
+  proxyGroupLatencyTest,
+  proxyMap,
+  selectProxy,
+} from '@/store/proxies'
 import { manageHiddenGroup } from '@/store/settings'
 import {
   ArrowRightCircleIcon,
@@ -136,10 +142,10 @@ const handlerGroupToggle = () => {
 
 const { showTip } = useTooltip()
 const tipForNow = (e: Event) => {
-  const nowNode = proxyMap.value[proxyGroup.value.now]
-  if (!nowNode || !nowNode.now) return
+  const nowNode = getNowProxyNodeName(props.name)
+  if (!nowNode || nowNode === proxyGroup.value.now) return
 
-  showTip(e, nowNode.now, {
+  showTip(e, nowNode, {
     delay: [500, 0],
   })
 }

src/components/proxies/ProxyGroupForMobile.vue

@@ -7,16 +7,19 @@
     <div
       v-if="activeMode"
       class="fixed inset-0 z-40 transition-all duration-200"
-      :class="modalMode && 'bg-black/50'"
+      :class="modalMode && 'bg-black/30'"
     ></div>
     <div
       class="card overflow-hidden will-change-[height,width,transform]"
       :class="[
         activeMode ? `fixed z-50` : 'absolute left-0 top-0 h-auto w-full',
-        modalMode && 'max-h-[50vh] w-[96vw]',
         transitionAll && 'transition-all duration-200',
       ]"
       :style="[
+        modalMode && {
+          'max-height': '50dvh',
+          width: 'calc(100vw - 1rem)',
+        },
         activeMode && {
           '--tw-bg-opacity': 1,
         },
@@ -44,7 +47,7 @@
           {{ proxyGroup.now }}
         </div>
 
-        <div class="flex h-4 justify-between gap-1">
+        <div class="flex h-4 items-center justify-between gap-1">
           <span class="text-xs text-base-content/60">
             {{ proxyGroup.type }} ({{ proxiesCount }})
           </span>
@@ -62,6 +65,7 @@
               class="h-3 w-3"
             />
           </button>
+          <div class="flex-1"></div>
           <LatencyTag
             :class="twMerge('z-10 bg-base-200/40 hover:shadow')"
             :loading="isLatencyTesting"

src/store/proxies.ts

@@ -211,7 +211,7 @@ const getIPv6FromExtra = (proxy: Proxy) => {
   return (last(ipv6History)?.delay ?? NOT_CONNECTED) > NOT_CONNECTED
 }
 
-const getNowProxyNodeName = (name: string) => {
+export const getNowProxyNodeName = (name: string) => {
   let node = proxyMap.value[name]
 
   if (!name || !node) {

src/store/settings.ts

@@ -16,7 +16,7 @@ import type { SourceIPLabel } from '@/types'
 import { useStorage } from '@vueuse/core'
 import { isEmpty } from 'lodash'
 import { v4 as uuid } from 'uuid'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 
 // global
 export const theme = useStorage<string>('config/theme', 'default')
@@ -84,7 +84,7 @@ export const minProxyCardWidth = useStorage<number>(
   'config/min-proxy-card-width',
   getMinCardWidth(proxyCardSize.value),
 )
-export const manageHiddenGroup = ref(false)
+export const manageHiddenGroup = useStorage('config/manage-hidden-group-mode', false)
 
 export const displayGlobalByMode = useStorage('config/display-global-by-mode', true)
 export const iconSize = useStorage('config/icon-size', 14)