feat: snapshot cards visibility control column

gkd-kit · Nov 4, 2024 · b132099 · b132099
1 parent e23b320
commit b132099
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 139 deletions.
diff --git a/src/views/snapshot/AttrCard.vue b/src/views/snapshot/AttrCard.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import DraggableCard from '@/components/DraggableCard.vue';
-import { copy } from '@/utils/others';
+import { buildEmptyFn, copy } from '@/utils/others';
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    onUpdateShow?: (data: boolean) => void;
+  }>(),
+  {
+    onUpdateShow: buildEmptyFn,
+  },
+);
 
 const { focusNode } = storeToRefs(useSnapshotStore());
 
@@ -70,8 +80,19 @@ const attrs = computed(() => {
     :initialValue="{ top: 40, right: 10 }"
     v-slot="{ onRef }"
     class="box-shadow-dim"
-    :show="Boolean(focusNode)"
+    :show="show && Boolean(focusNode)"
   >
+    <div absolute top-0 right-0 pt-4px pr-8px>
+      <NButton @click="onUpdateShow(!show)" text title="最小化">
+        <template #icon>
+          <NIcon>
+            <svg viewBox="0 0 24 24">
+              <path fill="currentColor" d="M6 13v-2h12v2z" />
+            </svg>
+          </NIcon>
+        </template>
+      </NButton>
+    </div>
     <NTable
       v-if="focusNode"
       size="small"

diff --git a/src/views/snapshot/RuleCard.vue b/src/views/snapshot/RuleCard.vue
@@ -1,14 +1,24 @@
 <script setup lang="ts">
 import DraggableCard from '@/components/DraggableCard.vue';
 import { getNodeLabel } from '@/utils/node';
+import { buildEmptyFn } from '@/utils/others';
 import { parseSelector, type GkdSelector } from '@/utils/selector';
 import { gkdWidth, vw } from '@/utils/size';
 import type { RawNode } from '@/utils/types';
 
+withDefaults(
+  defineProps<{
+    show: boolean;
+    onUpdateShow?: (data: boolean) => void;
+  }>(),
+  {
+    onUpdateShow: buildEmptyFn,
+  },
+);
+
 const snapshotStore = useSnapshotStore();
 const { rootNode, focusNode } = storeToRefs(snapshotStore);
 
-const tabShow = shallowRef(false);
 const text = shallowRef('');
 const lazyText = refDebounced(text, 500);
 
@@ -140,13 +150,13 @@ const targetNode = computed(() => {
     sizeDraggable
     v-slot="{ onRef }"
     class="z-2 box-shadow-dim"
-    :show="tabShow"
+    :show="show"
   >
     <div bg-white b-1px b-solid b-gray-200 rounded-4px p-8px>
       <div flex m-b-4px pr-4px>
         <div>测试规则</div>
         <div flex-1 cursor-move :ref="onRef"></div>
-        <NButton @click="tabShow = !tabShow" text title="最小化">
+        <NButton @click="onUpdateShow(!show)" text title="最小化">
           <template #icon>
             <NIcon>
               <svg viewBox="0 0 24 24">
@@ -183,38 +193,4 @@ const targetNode = computed(() => {
       </div>
     </div>
   </DraggableCard>
-  <DraggableCard
-    :initialValue="{
-      bottom: 56,
-      right: 16,
-    }"
-    :minWidth="300"
-    v-slot="{ onRef, moved }"
-    class="z-1 box-shadow-dim rounded-1/2 bg-white"
-    :show="!tabShow"
-  >
-    <div :ref="onRef">
-      <NButton
-        @click="
-          if (!moved) {
-            tabShow = !tabShow;
-          }
-        "
-        circle
-        size="large"
-        title="测试规则"
-      >
-        <template #icon>
-          <NIcon>
-            <svg viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M14.4 20L13 18.6l2.6-2.6l-2.6-2.6l1.4-1.4l2.6 2.6l2.6-2.6l1.4 1.4l-2.6 2.6l2.6 2.6l-1.4 1.4l-2.6-2.6zm1.975-9l-3.55-3.55l1.4-1.4l2.125 2.125l4.25-4.25L22 5.35zM2 17v-2h9v2zm0-8V7h9v2z"
-              />
-            </svg>
-          </NIcon>
-        </template>
-      </NButton>
-    </div>
-  </DraggableCard>
 </template>
diff --git a/src/views/snapshot/SearchCard.vue b/src/views/snapshot/SearchCard.vue
@@ -3,7 +3,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 { copy } from '@/utils/others';
+import { buildEmptyFn, copy } from '@/utils/others';
 import type { GkdSelector } from '@/utils/selector';
 import { parseSelector, wasmLoadTask } from '@/utils/selector';
 import { gkdWidth, vw } from '@/utils/size';
@@ -14,6 +14,16 @@ import dayjs from 'dayjs';
 import * as base64url from 'universal-base64url';
 import type { ShallowRef } from 'vue';
 
+withDefaults(
+  defineProps<{
+    show: boolean;
+    onUpdateShow?: (data: boolean) => void;
+  }>(),
+  {
+    onUpdateShow: buildEmptyFn,
+  },
+);
+
 const route = useRoute();
 const { snapshotImportId, snapshotImageId } = useStorageStore();
 
@@ -198,8 +208,6 @@ const shareResult = (result: SearchResult) => {
   }
   copy(importUrl.toString());
 };
-
-const tabShow = shallowRef(true);
 </script>
 <template>
   <DraggableCard
@@ -212,7 +220,7 @@ const tabShow = shallowRef(true);
     sizeDraggable
     v-slot="{ onRef }"
     class="z-1 box-shadow-dim"
-    :show="tabShow"
+    :show="show"
   >
     <div bg-white b-1px b-solid b-gray-200 rounded-4px p-8px>
       <div flex m-b-4px pr-4px>
@@ -223,7 +231,7 @@ const tabShow = shallowRef(true);
           </NSpace>
         </NRadioGroup>
         <div flex-1 cursor-move :ref="onRef"></div>
-        <NButton @click="tabShow = !tabShow" text title="最小化">
+        <NButton @click="onUpdateShow(!show)" text title="最小化">
           <template #icon>
             <NIcon>
               <svg viewBox="0 0 24 24">
@@ -412,38 +420,4 @@ const tabShow = shallowRef(true);
       </NCollapse>
     </div>
   </DraggableCard>
-  <DraggableCard
-    :initialValue="{
-      bottom: 8,
-      right: 16,
-    }"
-    :minWidth="300"
-    v-slot="{ onRef, moved }"
-    class="z-1 box-shadow-dim rounded-1/2 bg-white"
-    :show="!tabShow"
-  >
-    <div :ref="onRef">
-      <NButton
-        @click="
-          if (!moved) {
-            tabShow = !tabShow;
-          }
-        "
-        circle
-        size="large"
-        title="搜索面板"
-      >
-        <template #icon>
-          <NIcon>
-            <svg viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M2 19v-2h10v2zm0-5v-2h5v2zm0-5V7h5v2zm18.6 10l-3.85-3.85q-.6.425-1.312.638T14 16q-2.075 0-3.537-1.463T9 11t1.463-3.537T14 6t3.538 1.463T19 11q0 .725-.213 1.438t-.637 1.312L22 17.6zM14 14q1.25 0 2.125-.875T17 11t-.875-2.125T14 8t-2.125.875T11 11t.875 2.125T14 14"
-              />
-            </svg>
-          </NIcon>
-        </template>
-      </NButton>
-    </div>
-  </DraggableCard>
 </template>
diff --git a/src/views/snapshot/SnapshotPage.vue b/src/views/snapshot/SnapshotPage.vue
@@ -1,53 +1,118 @@
 <script lang="ts" setup>
-import ActionCard from '@/components/ActionCard.vue';
 import TrackDlg from '@/components/TrackDlg.vue';
-import { message, loadingBar } from '@/utils/discrete';
-import { delay } from '@/utils/others';
+import { loadingBar, message } from '@/utils/discrete';
 import AttrCard from './AttrCard.vue';
 import OverlapCard from './OverlapCard.vue';
 import RuleCard from './RuleCard.vue';
 import ScreenshotCard from './ScreenshotCard.vue';
 import SearchCard from './SearchCard.vue';
 import WindowCard from './WindowCard.vue';
 
-const router = useRouter();
-
 const snapshotStore = useSnapshotStore();
 const snapshotRefs = storeToRefs(snapshotStore);
 const { snapshot, rootNode, track, loading, redirected } = snapshotRefs;
 
-const onDelete = async () => {
-  message.success(`删除成功,即将回到首页`);
-  await delay(2000);
-  router.replace({
-    path: `/`,
-  });
-};
 watchEffect(() => {
   if (loading.value) {
     loadingBar.start();
   } else {
     loadingBar.finish();
   }
 });
+
+const searchShow = shallowRef(true);
+const ruleShow = shallowRef(false);
+const attrShow = shallowRef(true);
+
+const clickSettings = () => {
+  message.info('暂未实现');
+};
 </script>
 <template>
   <template v-if="snapshot && rootNode">
     <div h-full flex gap-5px p-5px box-border>
+      <div w-28px py-8px flex flex-col gap-16px>
+        <NButton text>
+          <template #icon>
+            <a href="/" title="首页" color="inherit">
+              <NIcon size="24">
+                <svg viewBox="0 0 32 32">
+                  <path
+                    d="M16.612 2.214a1.01 1.01 0 0 0-1.242 0L1 13.419l1.243 1.572L4 13.621V26a2.004 2.004 0 0 0 2 2h20a2.004 2.004 0 0 0 2-2V13.63L29.757 15L31 13.428zM18 26h-4v-8h4zm2 0v-8a2.002 2.002 0 0 0-2-2h-4a2.002 2.002 0 0 0-2 2v8H6V12.062l10-7.79l10 7.8V26z"
+                    fill="currentColor"
+                  ></path>
+                </svg>
+              </NIcon>
+            </a>
+          </template>
+        </NButton>
+        <NButton title="设置" @click="clickSettings" text>
+          <template #icon>
+            <NIcon size="24">
+              <svg viewBox="0 0 24 24">
+                <g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
+                  <path
+                    d="M12 8.25a3.75 3.75 0 1 0 0 7.5a3.75 3.75 0 0 0 0-7.5M9.75 12a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0"
+                  />
+                  <path
+                    d="M11.975 1.25c-.445 0-.816 0-1.12.02a2.8 2.8 0 0 0-.907.19a2.75 2.75 0 0 0-1.489 1.488c-.145.35-.184.72-.2 1.122a.87.87 0 0 1-.415.731a.87.87 0 0 1-.841-.005c-.356-.188-.696-.339-1.072-.389a2.75 2.75 0 0 0-2.033.545a2.8 2.8 0 0 0-.617.691c-.17.254-.356.575-.578.96l-.025.044c-.223.385-.408.706-.542.98c-.14.286-.25.568-.29.88a2.75 2.75 0 0 0 .544 2.033c.231.301.532.52.872.734a.87.87 0 0 1 .426.726a.87.87 0 0 1-.426.726c-.34.214-.64.433-.872.734a2.75 2.75 0 0 0-.545 2.033c.041.312.15.594.29.88c.135.274.32.595.543.98l.025.044c.222.385.408.706.578.96c.177.263.367.5.617.69a2.75 2.75 0 0 0 2.033.546c.376-.05.716-.2 1.072-.389a.87.87 0 0 1 .84-.005a.86.86 0 0 1 .417.731c.015.402.054.772.2 1.122a2.75 2.75 0 0 0 1.488 1.489c.29.12.59.167.907.188c.304.021.675.021 1.12.021h.05c.445 0 .816 0 1.12-.02c.318-.022.617-.069.907-.19a2.75 2.75 0 0 0 1.489-1.488c.145-.35.184-.72.2-1.122a.87.87 0 0 1 .415-.732a.87.87 0 0 1 .841.006c.356.188.696.339 1.072.388a2.75 2.75 0 0 0 2.033-.544c.25-.192.44-.428.617-.691c.17-.254.356-.575.578-.96l.025-.044c.223-.385.408-.706.542-.98c.14-.286.25-.569.29-.88a2.75 2.75 0 0 0-.544-2.033c-.231-.301-.532-.52-.872-.734a.87.87 0 0 1-.426-.726c0-.278.152-.554.426-.726c.34-.214.64-.433.872-.734a2.75 2.75 0 0 0 .545-2.033a2.8 2.8 0 0 0-.29-.88a18 18 0 0 0-.543-.98l-.025-.044a18 18 0 0 0-.578-.96a2.8 2.8 0 0 0-.617-.69a2.75 2.75 0 0 0-2.033-.546c-.376.05-.716.2-1.072.389a.87.87 0 0 1-.84.005a.87.87 0 0 1-.417-.731c-.015-.402-.054-.772-.2-1.122a2.75 2.75 0 0 0-1.488-1.489c-.29-.12-.59-.167-.907-.188c-.304-.021-.675-.021-1.12-.021zm-1.453 1.595c.077-.032.194-.061.435-.078c.247-.017.567-.017 1.043-.017s.796 0 1.043.017c.241.017.358.046.435.078c.307.127.55.37.677.677c.04.096.073.247.086.604c.03.792.439 1.555 1.165 1.974s1.591.392 2.292.022c.316-.167.463-.214.567-.227a1.25 1.25 0 0 1 .924.247c.066.051.15.138.285.338c.139.206.299.483.537.895s.397.69.506.912c.107.217.14.333.15.416a1.25 1.25 0 0 1-.247.924c-.064.083-.178.187-.48.377c-.672.422-1.128 1.158-1.128 1.996s.456 1.574 1.128 1.996c.302.19.416.294.48.377c.202.263.29.595.247.924c-.01.083-.044.2-.15.416c-.109.223-.268.5-.506.912s-.399.689-.537.895c-.135.2-.219.287-.285.338a1.25 1.25 0 0 1-.924.247c-.104-.013-.25-.06-.567-.227c-.7-.37-1.566-.398-2.292.021s-1.135 1.183-1.165 1.975c-.013.357-.046.508-.086.604a1.25 1.25 0 0 1-.677.677c-.077.032-.194.061-.435.078c-.247.017-.567.017-1.043.017s-.796 0-1.043-.017c-.241-.017-.358-.046-.435-.078a1.25 1.25 0 0 1-.677-.677c-.04-.096-.073-.247-.086-.604c-.03-.792-.439-1.555-1.165-1.974s-1.591-.392-2.292-.022c-.316.167-.463.214-.567.227a1.25 1.25 0 0 1-.924-.247c-.066-.051-.15-.138-.285-.338a17 17 0 0 1-.537-.895c-.238-.412-.397-.69-.506-.912c-.107-.217-.14-.333-.15-.416a1.25 1.25 0 0 1 .247-.924c.064-.083.178-.187.48-.377c.672-.422 1.128-1.158 1.128-1.996s-.456-1.574-1.128-1.996c-.302-.19-.416-.294-.48-.377a1.25 1.25 0 0 1-.247-.924c.01-.083.044-.2.15-.416c.109-.223.268-.5.506-.912s.399-.689.537-.895c.135-.2.219-.287.285-.338a1.25 1.25 0 0 1 .924-.247c.104.013.25.06.567.227c.7.37 1.566.398 2.292-.022c.726-.419 1.135-1.182 1.165-1.974c.013-.357.046-.508.086-.604c.127-.307.37-.55.677-.677"
+                  />
+                </g>
+              </svg>
+            </NIcon>
+          </template>
+        </NButton>
+        <div></div>
+        <NButton text title="搜索面板" @click="searchShow = !searchShow">
+          <template #icon>
+            <NIcon size="24">
+              <svg viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  d="M2 19v-2h10v2zm0-5v-2h5v2zm0-5V7h5v2zm18.6 10l-3.85-3.85q-.6.425-1.312.638T14 16q-2.075 0-3.537-1.463T9 11t1.463-3.537T14 6t3.538 1.463T19 11q0 .725-.213 1.438t-.637 1.312L22 17.6zM14 14q1.25 0 2.125-.875T17 11t-.875-2.125T14 8t-2.125.875T11 11t.875 2.125T14 14"
+                />
+              </svg>
+            </NIcon>
+          </template>
+        </NButton>
+        <NButton @click="ruleShow = !ruleShow" text title="测试规则">
+          <template #icon>
+            <NIcon size="24">
+              <svg viewBox="0 0 24 24">
+                <path
+                  fill="currentColor"
+                  d="M14.4 20L13 18.6l2.6-2.6l-2.6-2.6l1.4-1.4l2.6 2.6l2.6-2.6l1.4 1.4l-2.6 2.6l2.6 2.6l-1.4 1.4l-2.6-2.6zm1.975-9l-3.55-3.55l1.4-1.4l2.125 2.125l4.25-4.25L22 5.35zM2 17v-2h9v2zm0-8V7h9v2z"
+                />
+              </svg>
+            </NIcon>
+          </template>
+        </NButton>
+        <NButton @click="attrShow = !attrShow" text title="属性面板">
+          <template #icon>
+            <NIcon size="24">
+              <svg viewBox="0 0 24 24">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.5"
+                  d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12.001 2.5c4.478 0 6.717 0 8.108 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.717 0-8.109-1.391c-1.39-1.392-1.39-3.63-1.39-8.109M2.5 8h19M11 17h6M7 17h1m3-4h6M7 13h1"
+                  color="currentColor"
+                />
+              </svg>
+            </NIcon>
+          </template>
+        </NButton>
+      </div>
       <ScreenshotCard />
-      <WindowCard class="flex-1">
-        <ActionCard
-          :snapshot="snapshot"
-          @delete="onDelete"
-          :showPreview="false"
-        />
-      </WindowCard>
+      <WindowCard class="flex-1" />
     </div>
 
-    <SearchCard />
-    <AttrCard />
+    <SearchCard :show="searchShow" @updateShow="searchShow = $event" />
+    <RuleCard :show="ruleShow" @updateShow="ruleShow = $event" />
+    <AttrCard :show="attrShow" @updateShow="attrShow = $event" />
     <OverlapCard />
-    <RuleCard />
     <TrackDlg :track="track" @updateTrack="track = $event" />
   </template>
   <div v-else-if="!loading && !redirected" flex justify-center pt-80px>