feat: selectText

gkd-kit · Nov 20, 2024 · fa5ee3d · fa5ee3d
1 parent 98c7cab
commit fa5ee3d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git a/src/utils/node.ts b/src/utils/node.ts
@@ -16,8 +16,7 @@ const getShortName = (fullName: string): string => {
   return fullName.slice(lstIndex + 1);
 };
 
-// 递归算法，自动生成基于页面结构的选择器
-const getSelector = (
+export const getNodeSelectorText = (
   curNode: RawNode /* 当前节点 */,
   isFirst: boolean = true /* 调用时须省略 */,
   lastIndex: number = 1 /* 调用时须省略 */,
@@ -34,10 +33,12 @@ const getSelector = (
   if (curNode.idQf) {
     // 可以快速查询
     // （依赖页面结构而不是文本内容，只处理idQf的情况）
+    const key = curNode.attr.vid ? 'vid' : 'id';
+    const value = curNode.attr.vid || curNode.attr.id;
     if (isFirst) {
-      return '[id="' + curNode.attr.id + '"]';
+      return `[${key}="${value}"]`;
     } else {
-      return ' <' + lastIndex + ' [id="' + curNode.attr.id + '"]';
+      return ' <' + lastIndex + ` [${key}="${value}"]`;
     }
   }
   // 处理一般的递归情况
@@ -48,7 +49,7 @@ const getSelector = (
     return (
       '@' +
       getShortName(curNode.attr.name) +
-      getSelector(curNode.parent, false, curNode.attr.index + 1)
+      getNodeSelectorText(curNode.parent, false, curNode.attr.index + 1)
       /* 当前节点的index转序号后传递给下一层函数调用
        * 否则下一层函数不知道现在的节点是父节点的第几个儿子 */
     );
@@ -60,7 +61,7 @@ const getSelector = (
      * 所以说这里取子节点（也就是上一层函数的节点）的index */ +
     ' ' +
     getShortName(curNode.attr.name) +
-    getSelector(
+    getNodeSelectorText(
       curNode.parent,
       false,
       curNode.attr.index + 1,
@@ -85,7 +86,6 @@ export const listToTree = (nodes: RawNode[]) => {
     node.attr.depth = (node.parent?.attr?.depth ?? -1) + 1;
     node.attr._id ??= node.id;
     node.attr._pid ??= node.pid;
-    node.attr._selector ??= getSelector(node);
   });
   return nodes[0];
 };

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -60,7 +60,6 @@ export interface RawAttr {
   height: number;
   _id?: number;
   _pid?: number;
-  _selector?: string;
 }
 
 export interface Overview {

diff --git a/src/views/snapshot/AttrCard.vue b/src/views/snapshot/AttrCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import DraggableCard from '@/components/DraggableCard.vue';
+import { getNodeSelectorText } from '@/utils/node';
 import { buildEmptyFn, copy } from '@/utils/others';
 
 withDefaults(
@@ -88,13 +89,10 @@ const attrs = computed(() => {
     .flat();
 });
 
-const copyAttrx = (attrx: any): string => {
-  if (attrx.name == '_selector') {
-    copy(attrx.value);
-  } else {
-    copy(`${attrx.name}=${attrx.desc}`);
-  }
-};
+const selectText = computed(() => {
+  if (!focusNode.value) return '';
+  return getNodeSelectorText(focusNode.value);
+});
 </script>
 
 <template>
@@ -123,7 +121,7 @@ const copyAttrx = (attrx: any): string => {
       class="gkd_code"
       :themeOverrides="{
         thPaddingSmall: '1px 3px',
-        tdPaddingSmall: '1px 3px',
+        tdPaddingSmall: '0px 3px',
       }"
       ><thead>
         <tr :ref="onRef" cursor-move>
@@ -133,7 +131,7 @@ const copyAttrx = (attrx: any): string => {
       </thead>
       <NTbody>
         <NTr v-for="attrx in attrs" :key="attrx.name">
-          <NTd @click="copyAttrx(attrx)">
+          <NTd @click="copy(`${attrx.name}=${attrx.desc}`)">
             <div v-if="attrx.tip" flex justify-between items-center>
               <div>
                 {{ attrx.name }}
@@ -177,6 +175,29 @@ const copyAttrx = (attrx: any): string => {
             </NEllipsis>
           </NTd>
         </NTr>
+        <NTr>
+          <NTd colspan="2">
+            <div flex items-center h-24px px-2px>
+              <NTooltip>
+                <template #trigger>
+                  <NButton text @click="copy(selectText)">
+                    <template #icon>
+                      <NIcon size="20">
+                        <svg viewBox="0 0 24 24">
+                          <path
+                            fill="currentColor"
+                            d="M5 21V8.825Q4.125 8.5 3.563 7.738T3 6q0-1.25.875-2.125T6 3q1.25 0 2.125.875T9 6q0 .975-.562 1.738T7 8.825V19h4V3h8v12.175q.875.325 1.438 1.088T21 18q0 1.25-.875 2.125T18 21q-1.25 0-2.125-.875T15 18q0-.975.563-1.75T17 15.175V5h-4v16zM6 7q.425 0 .713-.288T7 6q0-.425-.288-.712T6 5q-.425 0-.712.288T5 6q0 .425.288.713T6 7m12 12q.425 0 .713-.288T19 18q0-.425-.288-.712T18 17q-.425 0-.712.288T17 18q0 .425.288.713T18 19m0-1"
+                          />
+                        </svg>
+                      </NIcon>
+                    </template>
+                  </NButton>
+                </template>
+                {{ selectText }}
+              </NTooltip>
+            </div>
+          </NTd>
+        </NTr>
       </NTbody>
     </NTable>
   </DraggableCard>