feat: switch for display now node & latency number in rule

Zephyruso · Feb 26, 2025 · cbe386e · cbe386e
1 parent 8a2eb32
commit cbe386e
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 7 deletions.
diff --git a/src/components/rules/RuleCard.vue b/src/components/rules/RuleCard.vue
@@ -21,15 +21,15 @@
         :name="rule.proxy"
         class="text-xs"
       />
-      <template v-if="proxyNode?.now">
+      <template v-if="proxyNode?.now && displayNowNodeInRule">
         <ArrowRightCircleIcon class="h-4 w-4" />
         <ProxyName
           :name="getNowProxyNodeName(rule.proxy)"
           class="text-xs"
         />
       </template>
       <span
-        v-if="latency !== NOT_CONNECTED"
+        v-if="latency !== NOT_CONNECTED && displayLatencyInRule"
         :class="latencyColor"
         class="ml-1 text-xs"
       >
@@ -44,6 +44,7 @@ import { NOT_CONNECTED } from '@/constant'
 import { getColorForLatency } from '@/helper'
 import { getLatencyByName, getNowProxyNodeName, proxyMap } from '@/store/proxies'
 import { ruleProviderList } from '@/store/rules'
+import { displayLatencyInRule, displayNowNodeInRule } from '@/store/settings'
 import type { Rule } from '@/types'
 import { ArrowRightCircleIcon } from '@heroicons/vue/24/outline'
 import { computed } from 'vue'

diff --git a/src/components/sidebar/LogsCtrl.tsx b/src/components/sidebar/LogsCtrl.tsx
@@ -1,5 +1,4 @@
 import { LOG_LEVEL } from '@/constant'
-import { isMiddleScreen } from '@/helper/utils'
 import { initLogs, isPaused, logFilter, logLevel, logs } from '@/store/logs'
 import { logRetentionLimit, logSearchHistory } from '@/store/settings'
 import { PauseIcon, PlayIcon, WrenchScrewdriverIcon, XMarkIcon } from '@heroicons/vue/24/outline'
@@ -115,7 +114,7 @@ export default defineComponent({
               {levelSelect}
               {searchInput}
             </div>
-            {!isMiddleScreen.value && <div class="flex-1"></div>}
+            <div class="flex-1"></div>
             {buttons}
           </div>
         )

diff --git a/src/components/sidebar/RulesCtrl.tsx b/src/components/sidebar/RulesCtrl.tsx
@@ -4,10 +4,12 @@ import { rulesTabShow } from '@/composables/rules'
 import { RULE_TAB_TYPE } from '@/constant'
 import { isMiddleScreen } from '@/helper/utils'
 import { fetchRules, ruleProviderList, rules, rulesFilter } from '@/store/rules'
-import { ArrowPathIcon } from '@heroicons/vue/24/outline'
+import { displayLatencyInRule, displayNowNodeInRule } from '@/store/settings'
+import { ArrowPathIcon, WrenchScrewdriverIcon } from '@heroicons/vue/24/outline'
 import { twMerge } from 'tailwind-merge'
 import { computed, defineComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import DialogWrapper from '../common/DialogWrapper.vue'
 import TextInput from '../common/TextInput.vue'
 
 export default defineComponent({
@@ -20,6 +22,7 @@ export default defineComponent({
   },
   setup(props) {
     const { t } = useI18n()
+    const settingsModel = ref(false)
     const isUpgrading = ref(false)
     const hasProviders = computed(() => {
       return ruleProviderList.value.length > 0
@@ -116,6 +119,37 @@ export default defineComponent({
         />
       )
 
+      const settingsModal = (
+        <>
+          <button
+            class={'btn btn-circle btn-sm'}
+            onClick={() => (settingsModel.value = true)}
+          >
+            <WrenchScrewdriverIcon class="h-4 w-4" />
+          </button>
+          <DialogWrapper v-model={settingsModel.value}>
+            <div class="flex flex-col gap-4 p-2 text-sm">
+              <div class="flex items-center gap-2">
+                {t('displaySelectedNode')}
+                <input
+                  class="toggle"
+                  type="checkbox"
+                  v-model={displayNowNodeInRule.value}
+                />
+              </div>
+              <div class="flex items-center gap-2">
+                {t('displayLatencyNumber')}
+                <input
+                  class="toggle"
+                  type="checkbox"
+                  v-model={displayLatencyInRule.value}
+                />
+              </div>
+            </div>
+          </DialogWrapper>
+        </>
+      )
+
       if (props.horizontal) {
         if (isMiddleScreen.value) {
           return (
@@ -126,7 +160,10 @@ export default defineComponent({
                   {upgradeAllIcon}
                 </div>
               )}
-              <div class="flex w-full gap-2">{searchInput}</div>
+              <div class="flex w-full gap-2">
+                {searchInput}
+                {settingsModal}
+              </div>
             </div>
           )
         }
@@ -136,6 +173,7 @@ export default defineComponent({
             {searchInput}
             <div class="flex-1"></div>
             {upgradeAllIcon}
+            {settingsModal}
           </div>
         )
       }
@@ -144,7 +182,12 @@ export default defineComponent({
         <div class="flex flex-col gap-2 p-2">
           {upgradeAll}
           {hasProviders.value && tabs}
-          {<div class="flex gap-2">{searchInput}</div>}
+          {
+            <div class="flex gap-2">
+              {searchInput}
+              {settingsModal}
+            </div>
+          }
         </div>
       )
     }

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -162,6 +162,8 @@ const en = {
   filteredTotal: 'Filtered Total',
   total: 'Total',
   aliveTotal: 'Alive / Total',
+  displaySelectedNode: 'Display Selected Node',
+  displayLatencyNumber: 'Display Latency',
 }
 
 export type LANG_MESSAGE = typeof en

diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
@@ -164,6 +164,8 @@ const ru: LANG_MESSAGE = {
   filteredTotal: 'Отфильтровано всего',
   total: 'Всего',
   aliveTotal: 'Живых / всего',
+  displaySelectedNode: 'Отображать выбранный узел',
+  displayLatencyNumber: 'Отображать задержку',
 }
 
 export default ru
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -162,6 +162,8 @@ const zh: LANG_MESSAGE = {
   filteredTotal: '过滤后总数',
   total: '总数',
   aliveTotal: '可用 / 总数',
+  displaySelectedNode: '显示选中节点',
+  displayLatencyNumber: '显示延迟数字',
 }
 
 export default zh
diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -140,6 +140,10 @@ export const sourceIPLabelList = useStorage<SourceIPLabel[]>('config/source-ip-l
     .map(([key, label]) => ({ key, label, id: uuid() }))
 })
 
+// rules
+export const displayNowNodeInRule = useStorage('config/display-now-node-in-rule', true)
+export const displayLatencyInRule = useStorage('config/display-latency-in-rule', true)
+
 // logs
 export const logRetentionLimit = useStorage<number>('config/log-retention-limit', 1000)
 export const logSearchHistory = useStorage<string[]>('config/log-search-history', [])