From 77bb99b88cc3c9ce05f3381641ec77ca8b728cec Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Tue, 26 Nov 2024 17:14:11 +0800
Subject: [PATCH] fix: unify card style & pretty bytes

---
 src/components/connections/ConnectionCard.tsx |   4 +-
 .../connections/ConnectionTable.vue           | 188 +++++++++---------
 src/components/connections/TableSettings.vue  |   4 +-
 src/components/proxies/ProxyGroup.vue         |   4 +-
 src/components/proxies/ProxyProvider.vue      |   8 +-
 src/components/rules/RuleCard.vue             |   2 +-
 src/components/rules/RuleProvider.vue         |   4 +-
 src/components/sidebar/CommonCtrl.vue         |   2 +-
 src/components/sidebar/ConnectionCtrl.vue     |   2 +-
 src/components/sidebar/SpeedCharts.vue        |   1 -
 src/helper/index.ts                           |   2 +-
 src/views/ConnectionsPage.vue                 |   4 +-
 src/views/LogsPage.vue                        |   6 +-
 src/views/RulesPage.vue                       |   2 +-
 src/views/SettingsPage.vue                    |   6 +-
 15 files changed, 119 insertions(+), 120 deletions(-)

diff --git a/src/components/connections/ConnectionCard.tsx b/src/components/connections/ConnectionCard.tsx
index 0428a7cb..04850e2a 100644
--- a/src/components/connections/ConnectionCard.tsx
+++ b/src/components/connections/ConnectionCard.tsx
@@ -115,7 +115,7 @@ export default defineComponent<{
 
       if (isLargeScreen.value && compactConnectionCard.value) {
         return (
-          <div class="card w-full flex-row items-center justify-between gap-1 bg-base-100 px-2 py-1 shadow-xl">
+          <div class="card w-full flex-row items-center justify-between gap-1 rounded-xl bg-base-100 px-2 py-1 shadow-lg">
             {host}
             {chians}
             {connectionCompact}
@@ -128,7 +128,7 @@ export default defineComponent<{
         )
       } else {
         return (
-          <div class="card w-full gap-[1px] bg-base-100 px-2 py-[1px] shadow-xl">
+          <div class="card w-full gap-[1px] rounded-xl bg-base-100 px-2 py-[1px] shadow-lg">
             <div class="flex flex-row items-center gap-1 px-1">
               {host}
               {flex1}
diff --git a/src/components/connections/ConnectionTable.vue b/src/components/connections/ConnectionTable.vue
index 1c10f7b0..645185fb 100644
--- a/src/components/connections/ConnectionTable.vue
+++ b/src/components/connections/ConnectionTable.vue
@@ -1,114 +1,112 @@
 <template>
-  <div class="h-full w-full overflow-auto">
-    <table class="table table-zebra table-xs overflow-hidden shadow-md">
-      <thead class="sticky top-0 bg-base-100">
-        <tr
-          v-for="headerGroup in table.getHeaderGroups()"
-          :key="headerGroup.id"
+  <table class="table table-zebra table-xs overflow-hidden rounded-lg shadow-lg">
+    <thead class="bg-base-100">
+      <tr
+        v-for="headerGroup in table.getHeaderGroups()"
+        :key="headerGroup.id"
+      >
+        <th
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          :colSpan="header.colSpan"
+          :class="header.column.getCanSort() ? 'cursor-pointer select-none' : ''"
+          @click="header.column.getToggleSortingHandler()?.($event)"
         >
-          <th
-            v-for="header in headerGroup.headers"
-            :key="header.id"
-            :colSpan="header.colSpan"
-            :class="header.column.getCanSort() ? 'cursor-pointer select-none' : ''"
-            @click="header.column.getToggleSortingHandler()?.($event)"
-          >
-            <div class="flex items-center gap-1">
-              <button
-                v-if="header.column.getCanGroup()"
-                class="cursor-pointer"
-                @click.stop="() => header.column.getToggleGroupingHandler()()"
-              >
-                <MagnifyingGlassMinusIcon
-                  v-if="header.column.getIsGrouped()"
-                  class="h-4 w-4"
-                />
-                <MagnifyingGlassPlusIcon
-                  v-else
-                  class="h-4 w-4"
-                />
-              </button>
-              <FlexRender
-                v-if="!header.isPlaceholder"
-                :render="header.column.columnDef.header"
-                :props="header.getContext()"
-              >
-              </FlexRender>
-              <ArrowUpCircleIcon
+          <div class="flex items-center gap-1">
+            <button
+              v-if="header.column.getCanGroup()"
+              class="cursor-pointer"
+              @click.stop="() => header.column.getToggleGroupingHandler()()"
+            >
+              <MagnifyingGlassMinusIcon
+                v-if="header.column.getIsGrouped()"
                 class="h-4 w-4"
-                v-if="header.column.getIsSorted() === 'asc'"
               />
-              <ArrowDownCircleIcon
+              <MagnifyingGlassPlusIcon
+                v-else
                 class="h-4 w-4"
-                v-if="header.column.getIsSorted() === 'desc'"
               />
-            </div>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="row in table.getRowModel().rows"
-          :key="row.id"
-          class="h-9 hover:!bg-primary hover:text-primary-content"
+            </button>
+            <FlexRender
+              v-if="!header.isPlaceholder"
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            >
+            </FlexRender>
+            <ArrowUpCircleIcon
+              class="h-4 w-4"
+              v-if="header.column.getIsSorted() === 'asc'"
+            />
+            <ArrowDownCircleIcon
+              class="h-4 w-4"
+              v-if="header.column.getIsSorted() === 'desc'"
+            />
+          </div>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="row in table.getRowModel().rows"
+        :key="row.id"
+        class="h-9 hover:!bg-primary hover:text-primary-content"
+      >
+        <td
+          v-for="cell in row.getVisibleCells()"
+          :key="cell.id"
+          class="text-sm"
         >
-          <td
-            v-for="cell in row.getVisibleCells()"
-            :key="cell.id"
-            class="text-sm"
+          <div
+            :class="
+              twMerge(
+                'flex items-center gap-2 whitespace-nowrap',
+                [
+                  CONNECTIONS_TABLE_ACCESSOR_KEY.Download,
+                  CONNECTIONS_TABLE_ACCESSOR_KEY.DlSpeed,
+                  CONNECTIONS_TABLE_ACCESSOR_KEY.Upload,
+                  CONNECTIONS_TABLE_ACCESSOR_KEY.UlSpeed,
+                ].includes(cell.column.id as CONNECTIONS_TABLE_ACCESSOR_KEY) && 'w-14',
+              )
+            "
           >
-            <div
-              :class="
-                twMerge(
-                  'flex items-center gap-2 whitespace-nowrap',
-                  [
-                    CONNECTIONS_TABLE_ACCESSOR_KEY.Download,
-                    CONNECTIONS_TABLE_ACCESSOR_KEY.DlSpeed,
-                    CONNECTIONS_TABLE_ACCESSOR_KEY.Upload,
-                    CONNECTIONS_TABLE_ACCESSOR_KEY.UlSpeed,
-                  ].includes(cell.column.id as CONNECTIONS_TABLE_ACCESSOR_KEY) && 'w-14',
-                )
-              "
-            >
-              <template v-if="cell.column.getIsGrouped()">
-                <template v-if="row.getCanExpand()">
-                  <button
-                    @click="() => row.getToggleExpandedHandler()()"
-                    class="cursor-pointer"
-                  >
-                    <MagnifyingGlassMinusIcon
-                      v-if="row.getIsExpanded()"
-                      class="h-4 w-4"
-                    />
-                    <MagnifyingGlassPlusIcon
-                      v-else
-                      class="h-4 w-4"
-                    />
-                  </button>
-                  <FlexRender
-                    :render="cell.column.columnDef.cell"
-                    :props="cell.getContext()"
+            <template v-if="cell.column.getIsGrouped()">
+              <template v-if="row.getCanExpand()">
+                <button
+                  @click="() => row.getToggleExpandedHandler()()"
+                  class="cursor-pointer"
+                >
+                  <MagnifyingGlassMinusIcon
+                    v-if="row.getIsExpanded()"
+                    class="h-4 w-4"
                   />
-                  <div v-if="cell.column.getIsGrouped()">({{ row.subRows.length }})</div>
-                </template>
-              </template>
-              <template v-else-if="cell.getIsAggregated()">
+                  <MagnifyingGlassPlusIcon
+                    v-else
+                    class="h-4 w-4"
+                  />
+                </button>
                 <FlexRender
-                  :render="cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell"
+                  :render="cell.column.columnDef.cell"
                   :props="cell.getContext()"
                 />
+                <div v-if="cell.column.getIsGrouped()">({{ row.subRows.length }})</div>
               </template>
+            </template>
+            <template v-else-if="cell.getIsAggregated()">
               <FlexRender
-                v-else-if="!cell.getIsPlaceholder()"
-                :render="cell.column.columnDef.cell"
+                :render="cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell"
                 :props="cell.getContext()"
               />
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+            </template>
+            <FlexRender
+              v-else-if="!cell.getIsPlaceholder()"
+              :render="cell.column.columnDef.cell"
+              :props="cell.getContext()"
+            />
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/connections/TableSettings.vue b/src/components/connections/TableSettings.vue
index 65e70121..3cf9855e 100644
--- a/src/components/connections/TableSettings.vue
+++ b/src/components/connections/TableSettings.vue
@@ -10,7 +10,7 @@
       <div
         v-for="item in connectionTableColumns"
         :key="item"
-        class="flex cursor-move items-center rounded bg-neutral px-2 text-neutral-content shadow"
+        class="flex cursor-move items-center rounded bg-neutral px-2 text-neutral-content shadow-lg"
       >
         {{ $t(item) }}
       </div>
@@ -25,7 +25,7 @@
       <div
         v-for="item in restOfColumns"
         :key="item"
-        class="flex cursor-move items-center rounded bg-neutral px-2 text-neutral-content shadow"
+        class="flex cursor-move items-center rounded bg-neutral px-2 text-neutral-content shadow-lg"
       >
         {{ $t(item) }}
       </div>
diff --git a/src/components/proxies/ProxyGroup.vue b/src/components/proxies/ProxyGroup.vue
index f41e1fb7..00b9ba14 100644
--- a/src/components/proxies/ProxyGroup.vue
+++ b/src/components/proxies/ProxyGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="collapse collapse-arrow bg-base-100 shadow-md">
+  <div class="collapse collapse-arrow bg-base-100 shadow-lg">
     <div class="collapse-title">
       <div class="flex items-center gap-2">
         <div class="text-lg font-medium sm:text-xl">
@@ -23,7 +23,7 @@
         <div
           v-for="node in sortedProxies"
           :key="node"
-          class="flex h-4 w-4 items-center justify-center rounded-full shadow-sm"
+          class="flex h-4 w-4 items-center justify-center rounded-full shadow-lg"
           :class="getBgColor(getLatencyByName(node))"
         >
           <div
diff --git a/src/components/proxies/ProxyProvider.vue b/src/components/proxies/ProxyProvider.vue
index c86e551e..18163a80 100644
--- a/src/components/proxies/ProxyProvider.vue
+++ b/src/components/proxies/ProxyProvider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="collapse collapse-arrow bg-base-100 shadow-md">
+  <div class="collapse collapse-arrow bg-base-100 shadow-lg">
     <div class="collapse-title">
       <div class="flex items-center gap-2">
         <div class="text-lg font-medium sm:text-xl">
@@ -48,7 +48,7 @@
         <div
           v-for="node in sortedProxies"
           :key="node"
-          class="flex h-4 w-4 items-center justify-center rounded-full shadow-sm"
+          class="flex h-4 w-4 items-center justify-center rounded-full shadow-lg"
           :class="getBgColor(getLatencyByName(node))"
         ></div>
       </div>
@@ -129,8 +129,8 @@ watch(showCollapse, (value) => {
 const getSubscriptionsInfo = (subscriptionInfo: SubscriptionInfo) => {
   const { Download = 0, Upload = 0, Total = 0, Expire = 0 } = subscriptionInfo
 
-  const total = prettyBytesHelper(Total)
-  const used = prettyBytesHelper(Download + Upload)
+  const total = prettyBytesHelper(Total, { binary: true })
+  const used = prettyBytesHelper(Download + Upload, { binary: true })
   const percentage = toFinite((((Download + Upload) / Total) * 100).toFixed(2))
 
   const expirePrefix = () => {
diff --git a/src/components/rules/RuleCard.vue b/src/components/rules/RuleCard.vue
index bcdcb73c..59d260d1 100644
--- a/src/components/rules/RuleCard.vue
+++ b/src/components/rules/RuleCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl">
+  <div class="card w-full flex-row gap-1 rounded-xl bg-base-100 p-2 text-sm shadow-lg">
     <div class="w-20 text-primary">{{ rule.proxy }}</div>
     <div class="flex-1">{{ rule.payload }}</div>
   </div>
diff --git a/src/components/rules/RuleProvider.vue b/src/components/rules/RuleProvider.vue
index d3753a08..246b4e33 100644
--- a/src/components/rules/RuleProvider.vue
+++ b/src/components/rules/RuleProvider.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="card w-full flex-row items-center gap-1 bg-base-100 p-1 px-2 text-sm shadow-xl">
+    <div
+      class="card w-full flex-row items-center gap-1 rounded-xl bg-base-100 p-1 px-2 text-sm shadow-lg"
+    >
       <span class="w-48 flex-1 text-primary">
         {{ ruleProvider.name }} ({{ ruleProvider.ruleCount }})
       </span>
diff --git a/src/components/sidebar/CommonCtrl.vue b/src/components/sidebar/CommonCtrl.vue
index 2b7b3b73..83eeecb1 100644
--- a/src/components/sidebar/CommonCtrl.vue
+++ b/src/components/sidebar/CommonCtrl.vue
@@ -12,7 +12,7 @@
           prettyBytesHelper(uploadSpeedTotal)
         }}/s)
       </div>
-      <div>{{ $t('memoryUsage') }}: {{ prettyBytesHelper(memory) }}</div>
+      <div>{{ $t('memoryUsage') }}: {{ prettyBytesHelper(memory, { binary: true }) }}</div>
       <div class="flex gap-1">
         {{ $t('version') }}:
         {{ version }}
diff --git a/src/components/sidebar/ConnectionCtrl.vue b/src/components/sidebar/ConnectionCtrl.vue
index 3ff313bd..1395670d 100644
--- a/src/components/sidebar/ConnectionCtrl.vue
+++ b/src/components/sidebar/ConnectionCtrl.vue
@@ -20,7 +20,7 @@
     >
       {{ $t('sortBy') }}:
       <select
-        class="select select-bordered select-sm"
+        class="select select-bordered select-sm w-52"
         v-model="connectionSortType"
       >
         <option
diff --git a/src/components/sidebar/SpeedCharts.vue b/src/components/sidebar/SpeedCharts.vue
index c9363297..070375bd 100644
--- a/src/components/sidebar/SpeedCharts.vue
+++ b/src/components/sidebar/SpeedCharts.vue
@@ -68,7 +68,6 @@ onMounted(() => {
           formatter: (value: number) => {
             return `${prettyBytesHelper(value, {
               maximumFractionDigits: 1,
-              binary: false,
             })}/s`
           },
           color: color,
diff --git a/src/helper/index.ts b/src/helper/index.ts
index d65f2149..61b3640f 100644
--- a/src/helper/index.ts
+++ b/src/helper/index.ts
@@ -7,7 +7,7 @@ import { computed } from 'vue'
 
 export const prettyBytesHelper = (bytes: number, opts?: Options) => {
   return prettyBytes(bytes, {
-    binary: true,
+    binary: false,
     ...opts,
   })
 }
diff --git a/src/views/ConnectionsPage.vue b/src/views/ConnectionsPage.vue
index de3aa261..c855a25b 100644
--- a/src/views/ConnectionsPage.vue
+++ b/src/views/ConnectionsPage.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="h-full overflow-y-auto overflow-x-hidden p-2">
+  <div class="h-full overflow-auto p-2">
     <template v-if="useConnectionCard">
       <template v-if="!renderConnections.length">
-        <div class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl">
+        <div class="card w-full flex-row gap-1 rounded-xl bg-base-100 p-2 text-sm shadow-lg">
           {{ $t('noContent') }}
         </div>
       </template>
diff --git a/src/views/LogsPage.vue b/src/views/LogsPage.vue
index a4098d7d..a6aef43c 100644
--- a/src/views/LogsPage.vue
+++ b/src/views/LogsPage.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="flex h-full flex-col gap-[2px] overflow-y-auto overflow-x-hidden p-2">
+  <div class="flex h-full flex-col gap-1 overflow-y-auto overflow-x-hidden p-2">
     <template v-if="!renderLogs.length">
-      <div class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl">
+      <div class="card w-full flex-row gap-1 rounded-xl bg-base-100 p-2 text-sm shadow-lg">
         {{ $t('noContent') }}
       </div>
     </template>
     <div
       v-for="log in renderLogs"
       :key="log.seq"
-      class="card w-full flex-row gap-1 bg-base-100 p-2 text-sm shadow-xl"
+      class="card w-full flex-row gap-1 rounded-xl bg-base-100 p-2 text-sm shadow-lg"
     >
       <span>{{ log.seq }}</span>
       <span :class="textColorMapForType[log.type]">{{ log.type }}</span>
diff --git a/src/views/RulesPage.vue b/src/views/RulesPage.vue
index 22307c4f..22477108 100644
--- a/src/views/RulesPage.vue
+++ b/src/views/RulesPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-col gap-[2px] overflow-y-auto overflow-x-hidden p-2">
+  <div class="flex h-full flex-col gap-1 overflow-y-auto overflow-x-hidden p-2">
     <template v-if="rulesTabShow === RULE_TAB_TYPE.PROVIDER">
       <RuleProvider
         v-for="ruleProvider in ruleProviderList"
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index ffa63258..f38ca082 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1 overflow-y-auto p-2">
-    <div class="card card-compact shadow-md">
+    <div class="card card-compact bg-base-100 shadow-lg">
       <div class="card-title px-4 pt-4 text-primary">zashboard v{{ zashboardVersion }}</div>
       <div class="card-body gap-4">
         <div class="flex items-center gap-2">
@@ -42,7 +42,7 @@
         </div>
       </div>
     </div>
-    <div class="card card-compact shadow-md">
+    <div class="card card-compact bg-base-100 shadow-lg">
       <div class="card-title px-4 pt-4">
         {{ $t('proxies') }}
       </div>
@@ -81,7 +81,7 @@
         </div>
       </div>
     </div>
-    <div class="card card-compact shadow-md">
+    <div class="card card-compact bg-base-100 shadow-lg">
       <div class="card-title px-4 pt-4">
         {{ $t('connections') }}
       </div>