fix: source ip input & backend version style

Zephyruso · Feb 11, 2025 · 2f918c9 · 2f918c9
1 parent e1d9d90
commit 2f918c9
Show file tree

Hide file tree

Showing 17 changed files with 46 additions and 38 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -55,6 +55,10 @@
   scrollbar-width: none; /* Firefox */
 }
 
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+
 .tippy-box {
   @apply z-[9999] bg-neutral text-neutral-content shadow-md;
 }

diff --git a/src/components/common/BackendVersion.vue b/src/components/common/BackendVersion.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="flex items-center gap-1">
-    {{ $t('version') }}
     <img
       :src="isSingBox ? SingBoxLogo : MetacubexLogo"
       class="h-4 w-4 rounded-sm"

diff --git a/src/components/common/DialogWrapper.vue b/src/components/common/DialogWrapper.vue
@@ -10,7 +10,7 @@
           <XMarkIcon class="h-4 w-4" />
         </button>
       </form>
-      <div class="max-h-[90vh] overflow-y-auto p-4 max-md:max-h-[70vh]">
+      <div class="max-h-[90vh] overflow-y-auto p-4 scrollbar-thin max-md:max-h-[70vh]">
         <slot></slot>
       </div>
     </div>

diff --git a/src/components/common/TextInput.vue b/src/components/common/TextInput.vue
@@ -8,7 +8,7 @@
     <input
       v-model="inputValue"
       type="text"
-      class="input input-sm join-item input-bordered w-full"
+      :class="['input input-sm join-item input-bordered w-full', { 'pr-6': clearable }]"
       :placeholder="placeholder || ''"
       :name="name || ''"
       :autocomplete="autocomplete || ''"

diff --git a/src/components/connections/ConnectionDetails.vue b/src/components/connections/ConnectionDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <DialogWrapper v-model="connectionDetailModalShow">
     <VueJsonPretty :data="infoConn" />
-    <div class="mt-2 h-10 text-sm">
+    <div class="mt-2 min-h-10 text-sm">
       <template v-if="details">
         {{ $t('connectionIP') }} {{ details?.ip }}
         <div class="flex gap-3">

diff --git a/src/components/overview/StatisticsStats.vue b/src/components/overview/StatisticsStats.vue
@@ -27,10 +27,10 @@ const classMap = {
     value: 'text-xl',
   },
   settings: {
-    list: 'grid w-full grid-cols-3 gap-1 rounded-lg bg-base-200/40 p-3',
+    list: 'grid w-full grid-cols-3 gap-1 rounded-lg bg-base-200/30 p-3',
     item: 'flex flex-col items-start',
-    label: 'text-sm text-base-content/70',
-    value: 'text-sm',
+    label: 'text-xs text-base-content/70',
+    value: 'text-base',
   },
   ctrl: {
     list: 'grid w-full grid-cols-2 gap-1 rounded-lg',

diff --git a/src/components/proxies/ProxyNodeGrid.vue b/src/components/proxies/ProxyNodeGrid.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid max-h-96 gap-2 overflow-y-auto overflow-x-hidden"
+    class="grid max-h-96 gap-2 overflow-y-auto overflow-x-hidden scrollbar-thin"
     :style="`grid-template-columns: repeat(auto-fill, minmax(${proxyCardSize === PROXY_CARD_SIZE.LARGE ? 150 : 138}px, 1fr));`"
   >
     <slot />
@@ -11,9 +11,3 @@
 import { PROXY_CARD_SIZE } from '@/config'
 import { proxyCardSize } from '@/store/settings'
 </script>
-
-<style scoped>
-.grid {
-  scrollbar-width: thin;
-}
-</style>
diff --git a/src/components/proxies/ProxyProvider.vue b/src/components/proxies/ProxyProvider.vue
@@ -5,6 +5,9 @@
         <div class="text-lg font-medium sm:text-xl">
           {{ proxyProvider.name }}
           <span class="text-sm"> ({{ sortedProxies.length }}) </span>
+          <span class="ml-2 text-sm text-base-content/60"
+            >{{ $t('updated') }} {{ fromNow(proxyProvider.updatedAt) }}</span
+          >
         </div>
         <div class="flex-1" />
         <div class="flex gap-2">
@@ -35,17 +38,15 @@
         :value="subscriptionInfo.percentage"
         max="100"
       />
-      <div class="flex flex-col text-base-content/80 sm:flex-row sm:gap-4">
-        <template v-if="subscriptionInfo">
-          <div class="text-sm">
-            {{ subscriptionInfo.used }} / {{ subscriptionInfo.total }} (
-            {{ subscriptionInfo.percentage }}% )
-          </div>
-          <div class="text-sm">
-            {{ subscriptionInfo.expirePrefix() }}: {{ subscriptionInfo.expireStr() }}
-          </div>
-        </template>
-        <div class="text-sm">{{ $t('updated') }} {{ fromNow(proxyProvider.updatedAt) }}</div>
+      <div
+        v-if="subscriptionInfo"
+        class="mb-2 flex flex-col justify-between text-sm text-base-content/60 md:flex-row md:gap-4"
+      >
+        <div>
+          {{ subscriptionInfo.used }} / {{ subscriptionInfo.total }} (
+          {{ subscriptionInfo.percentage }}% )
+        </div>
+        <div>{{ subscriptionInfo.expirePrefix() }}: {{ subscriptionInfo.expireStr() }}</div>
       </div>
     </template>
     <template v-slot:preview>

diff --git a/src/components/rules/RuleProvider.vue b/src/components/rules/RuleProvider.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="card w-full flex-row items-center gap-2 p-1 px-2 text-sm">
-    <div class="flex flex-1 flex-col sm:flex-row">
+    <div class="flex flex-1 flex-col gap-1 sm:flex-row">
       <div class="flex flex-1 items-center gap-2">
         <span>{{ index }}.</span>
         <span>{{ ruleProvider.name }}</span>
         <span class="badge badge-sm bg-base-200">
           {{ ruleProvider.ruleCount }}
         </span>
       </div>
-      <div class="flex gap-3 text-base-content/80">
+      <div class="flex gap-3 text-base-content/60">
         <span>{{ ruleProvider.behavior }}</span>
         <span>{{ ruleProvider.vehicleType }}</span>
         <span>{{ $t('updated') }} {{ fromNow(ruleProvider.updatedAt) }}</span>

diff --git a/src/components/settings/BackendSettings.vue b/src/components/settings/BackendSettings.vue
@@ -3,10 +3,10 @@
   <div class="card card-compact">
     <div class="card-title px-4 pt-4">
       {{ $t('backend') }}
+      <BackendVersion class="text-sm font-normal" />
     </div>
     <div class="card-body gap-4">
       <BackendSwitch />
-      <BackendVersion />
 
       <template v-if="!isSingBox && configs">
         <div class="divider"></div>

diff --git a/src/components/settings/DnsQuery.vue b/src/components/settings/DnsQuery.vue
@@ -3,6 +3,7 @@
     <TextInput
       v-model="form.name"
       placeholder="Domain Name"
+      :clearable="true"
     />
     <select
       v-model="form.type"

diff --git a/src/components/settings/SourceIPLabels.vue b/src/components/settings/SourceIPLabels.vue
@@ -6,9 +6,12 @@
       :key="ip"
       class="flex items-center gap-2"
     >
-      {{ ip }} <ArrowRightCircleIcon class="h-4 w-4" />
+      <TagIcon class="h-4 w-4 shrink-0" />
+      <span class="min-w-28 break-all">
+        {{ ip }}
+      </span>
       <TextInput
-        class="w-40 max-sm:flex-1"
+        class="w-40 min-w-24 max-sm:flex-1"
         v-model="sourceIPLabelMap[ip]"
       />
       <button
@@ -19,16 +22,17 @@
       </button>
     </div>
     <div class="flex w-full items-center gap-2">
-      <span class="shrink-0">IP </span>
       <TextInput
         class="w-36 flex-1 sm:max-w-40"
         v-model="newLabelForIP.ip"
         @click="handlerIPInputFocus"
+        placeholder="IP"
       />
       <ArrowRightCircleIcon class="h-4 w-4 shrink-0" />
       <TextInput
         class="w-24 sm:w-32"
         v-model="newLabelForIP.label"
+        :placeholder="$t('label')"
       />
       <button
         class="btn btn-circle btn-sm"
@@ -44,7 +48,12 @@
 import { useTooltip } from '@/helper/tooltip'
 import { connections } from '@/store/connections'
 import { sourceIPLabelMap } from '@/store/settings'
-import { ArrowRightCircleIcon, MinusCircleIcon, PlusCircleIcon } from '@heroicons/vue/24/outline'
+import {
+  ArrowRightCircleIcon,
+  MinusCircleIcon,
+  PlusCircleIcon,
+  TagIcon,
+} from '@heroicons/vue/24/outline'
 import { uniq } from 'lodash'
 import { computed, reactive } from 'vue'
 import TextInput from '../common/TextInput.vue'
@@ -82,7 +91,7 @@ const handlerIPInputFocus = (e: Event) => {
   })
 }
 const sourceIPs = computed(() => {
-  return Object.keys(sourceIPLabelMap.value)
+  return Object.keys(sourceIPLabelMap.value).sort()
 })
 
 const newLabelForIP = reactive({

diff --git a/src/components/settings/TableSettings.vue b/src/components/settings/TableSettings.vue
@@ -2,7 +2,7 @@
   <div>{{ $t('customTableColumns') }}</div>
   <div class="flex gap-4 rounded">
     <Draggable
-      class="flex flex-1 flex-col gap-2 bg-base-300 p-4"
+      class="flex flex-1 flex-col gap-2 bg-base-200 p-4"
       v-model="connectionTableColumns"
       group="list"
       :animation="150"

diff --git a/src/components/sidebar/CommonCtrl.vue b/src/components/sidebar/CommonCtrl.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col gap-2 p-2 text-sm">
     <StatisticsStats type="ctrl" />
-    <BackendVersion />
+    <div class="flex gap-2">
+      {{ $t('version') }}
+      <BackendVersion />
+    </div>
 
     <div class="flex">
       <button

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -46,7 +46,6 @@ const en = {
   customTableColumns: 'Custom Table Columns',
   customCardLines: 'Custom Card Lines',
   close: 'Close',
-  details: 'Details',
   theme: 'Theme',
   proxyProvider: 'Proxy Provider',
   ruleProvider: 'Rule Provider',

diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
@@ -48,7 +48,6 @@ const ru: LANG_MESSAGE = {
   customTableColumns: 'Пользовательские столбцы таблицы',
   customCardLines: 'Пользовательские строчки карточки',
   close: 'Закрыть',
-  details: 'Детали',
   theme: 'Тема',
   proxyProvider: 'Провайдер прокси',
   ruleProvider: 'Провайдер правил',

diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -48,7 +48,6 @@ const zh: LANG_MESSAGE = {
   customTableColumns: '自定义表格列',
   customCardLines: '自定义卡片行',
   close: '关闭',
-  details: '详情',
   theme: '主题',
   proxyProvider: '代理提供商',
   ruleProvider: '规则提供商',