From 72d9c18d84c76061fa4a9f09848ad8a761c8ce18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=88=BA=E8=9E=88?= <i@songe.li>
Date: Sun, 10 Nov 2024 14:26:55 +0800
Subject: [PATCH] refactor: introduce getNodeStyle function for consistent node
 styling across cards

---
 src/utils/node.ts                  | 11 ++++++++++-
 src/views/snapshot/OverlapCard.vue |  6 ++----
 src/views/snapshot/RuleCard.vue    |  6 ++----
 src/views/snapshot/SearchCard.vue  | 18 ++++++++----------
 src/views/snapshot/WindowCard.vue  |  8 ++++----
 5 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/utils/node.ts b/src/utils/node.ts
index 9e6a4de..956272f 100644
--- a/src/utils/node.ts
+++ b/src/utils/node.ts
@@ -146,7 +146,6 @@ const getLabelSuffix = (node: RawNode) => {
   return node.attr.text || node.attr.desc || node.attr.vid || node.attr.id;
 };
 const labelKey = Symbol(`labelKey`);
-const labelLimit = 20;
 export const getNodeLabel = (node: RawNode): string => {
   if (Reflect.has(node, labelKey)) {
     return Reflect.get(node, labelKey);
@@ -231,3 +230,13 @@ export const isRawNode = (node: any): node is RawNode => {
   }
   return false;
 };
+
+export const getNodeStyle = (node: RawNode, focusNode?: RawNode) => {
+  const qf = Boolean(node.idQf || node.textQf || node.quickFind);
+  const fontWeight = qf ? 'bold' : undefined;
+  const color = node.id === focusNode?.id ? '#00F' : undefined;
+  return {
+    fontWeight,
+    color,
+  };
+};
diff --git a/src/views/snapshot/OverlapCard.vue b/src/views/snapshot/OverlapCard.vue
index e9e2a92..9206ed8 100644
--- a/src/views/snapshot/OverlapCard.vue
+++ b/src/views/snapshot/OverlapCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DraggableCard from '@/components/DraggableCard.vue';
-import { getNodeLabel } from '@/utils/node';
+import { getNodeLabel, getNodeStyle } from '@/utils/node';
 
 const snapshotStore = useSnapshotStore();
 const { focusNode, overlapNodes, focusPosition } = storeToRefs(snapshotStore);
@@ -38,9 +38,7 @@ const left = _1vw * 25.5;
           :key="resultNode.id"
           @click="snapshotStore.updateFocusNode(resultNode)"
           size="small"
-          :style="{
-            color: resultNode === focusNode ? '#00F' : undefined,
-          }"
+          :style="getNodeStyle(resultNode, focusNode)"
         >
           {{ getNodeLabel(resultNode) }}
         </NButton>
diff --git a/src/views/snapshot/RuleCard.vue b/src/views/snapshot/RuleCard.vue
index bd2363d..a0bb2fe 100644
--- a/src/views/snapshot/RuleCard.vue
+++ b/src/views/snapshot/RuleCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DraggableCard from '@/components/DraggableCard.vue';
-import { getNodeLabel } from '@/utils/node';
+import { getNodeLabel, getNodeStyle } from '@/utils/node';
 import { buildEmptyFn } from '@/utils/others';
 import { parseSelector, type GkdSelector } from '@/utils/selector';
 import { gkdWidth, vw } from '@/utils/size';
@@ -184,9 +184,7 @@ const targetNode = computed(() => {
           v-else-if="targetNode"
           @click="snapshotStore.updateFocusNode(targetNode)"
           size="small"
-          :style="{
-            color: targetNode === focusNode ? '#00F' : undefined,
-          }"
+          :style="getNodeStyle(targetNode, focusNode)"
         >
           {{ getNodeLabel(targetNode) }}
         </NButton>
diff --git a/src/views/snapshot/SearchCard.vue b/src/views/snapshot/SearchCard.vue
index 330be49..4a927a6 100644
--- a/src/views/snapshot/SearchCard.vue
+++ b/src/views/snapshot/SearchCard.vue
@@ -2,7 +2,7 @@
 import DraggableCard from '@/components/DraggableCard.vue';
 import { message } from '@/utils/discrete';
 import { errorTry, errorWrap } from '@/utils/error';
-import { getAppInfo, getNodeLabel } from '@/utils/node';
+import { getAppInfo, getNodeLabel, getNodeStyle } from '@/utils/node';
 import { buildEmptyFn, copy } from '@/utils/others';
 import type { GkdSelector } from '@/utils/selector';
 import { parseSelector, wasmLoadTask } from '@/utils/selector';
@@ -371,9 +371,7 @@ const shareResult = (result: SearchResult) => {
                 :key="resultNode.id"
                 @click="updateFocusNode(resultNode)"
                 size="small"
-                :style="{
-                  color: resultNode === focusNode ? '#00F' : undefined,
-                }"
+                :style="getNodeStyle(resultNode, focusNode)"
               >
                 {{ getNodeLabel(resultNode) }}
               </NButton>
@@ -408,12 +406,12 @@ const shareResult = (result: SearchResult) => {
                     updateFocusNode(trackNodes[result.selector.targetIndex])
                   "
                   size="small"
-                  :style="{
-                    color:
-                      trackNodes[result.selector.targetIndex] === focusNode
-                        ? '#00F'
-                        : undefined,
-                  }"
+                  :style="
+                    getNodeStyle(
+                      trackNodes[result.selector.targetIndex],
+                      focusNode,
+                    )
+                  "
                 >
                   {{ getNodeLabel(trackNodes[result.selector.targetIndex]) }}
                 </NButton>
diff --git a/src/views/snapshot/WindowCard.vue b/src/views/snapshot/WindowCard.vue
index b752767..ed0b0ef 100644
--- a/src/views/snapshot/WindowCard.vue
+++ b/src/views/snapshot/WindowCard.vue
@@ -7,6 +7,7 @@ import {
   getDevice,
   getGkdAppInfo,
   getNodeLabel,
+  getNodeStyle,
 } from '@/utils/node';
 import { copy, delay } from '@/utils/others';
 import type { RawNode, Snapshot } from '@/utils/types';
@@ -71,16 +72,15 @@ const treeFilter = (pattern: string, node: RawNode) => {
 const treeNodeProps = (info: {
   option: RawNode;
 }): HTMLAttributes & Record<string, unknown> => {
-  const qf = info.option.idQf || info.option.textQf || info.option.quickFind;
+  const style = getNodeStyle(info.option, focusNode.value);
   return {
     onClick: () => {
       lastClickId = info.option.id;
       updateFocusNode(info.option);
     },
     style: {
-      '--n-node-text-color':
-        info.option.id == focusNode.value?.id ? `#00F` : undefined,
-      fontWeight: qf ? `bold` : undefined,
+      '--n-node-text-color': style.color,
+      ...style,
     },
     class: 'whitespace-nowrap',
     'data-node-id': String(info.option.id),