feat: min search card

gkd-kit · Aug 23, 2024 · ffe1282 · ffe1282
1 parent abe46ce
commit ffe1282
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/src/components/DraggableCard.vue b/src/components/DraggableCard.vue
@@ -61,10 +61,12 @@ const currentStyle = computed(() => {
  * it will be PointerEvent when moving
  */
 let prevEv: PointerEvent | undefined = undefined;
+const moved = shallowRef(false);
 const startMove = (ev: PointerEvent) => {
   prevEv = ev;
   prevOffset.x = offset.x;
   prevOffset.y = offset.y;
+  moved.value = false;
 };
 const move = (ev: PointerEvent) => {
   if (!target.value || !prevEv) return;
@@ -74,6 +76,8 @@ const move = (ev: PointerEvent) => {
 
   offset.x = prevOffset.x + (isLeft ? dx : -dx);
   offset.y = prevOffset.y + (isTop ? dy : -dy);
+
+  moved.value = true;
 };
 const endMove = () => {
   prevEv = undefined;
@@ -155,7 +159,7 @@ const updateTarget = (arg: unknown) => {
       :style="[$attrs.style as string, currentStyle]"
       :class="$attrs.class"
     >
-      <slot :onRef="updateTarget"></slot>
+      <slot :onRef="updateTarget" :moved="moved"></slot>
 
       <template v-if="sizeDraggable">
         <div

diff --git a/src/views/snapshot/SearchCard.vue b/src/views/snapshot/SearchCard.vue
@@ -213,6 +213,8 @@ const shareResult = (result: SearchResult) => {
   }
   copy(importUrl.toString());
 };
+
+const tabShow = shallowRef(true);
 </script>
 <template>
   <DraggableCard
@@ -225,16 +227,26 @@ const shareResult = (result: SearchResult) => {
     sizeDraggable
     v-slot="{ onRef }"
     class="z-1 box-shadow-dim"
+    :show="tabShow"
   >
     <div bg-white b-1px b-solid b-gray-200 rounded-4px p-8px>
-      <div flex m-b-4px>
+      <div flex m-b-4px pr-4px>
         <NRadioGroup v-model:value="enableSearchBySelector">
           <NSpace>
             <NRadio :value="false"> 字符搜索 </NRadio>
             <NRadio :value="true"> 选择器查询 </NRadio>
           </NSpace>
         </NRadioGroup>
         <div flex-1 cursor-move :ref="onRef"></div>
+        <NButton @click="tabShow = !tabShow" text title="最小化">
+          <template #icon>
+            <NIcon>
+              <svg viewBox="0 0 24 24">
+                <path fill="currentColor" d="M6 13v-2h12v2z" />
+              </svg>
+            </NIcon>
+          </template>
+        </NButton>
       </div>
       <NInputGroup>
         <NInput
@@ -415,4 +427,38 @@ const shareResult = (result: SearchResult) => {
       </NCollapse>
     </div>
   </DraggableCard>
+  <DraggableCard
+    :initialValue="{
+      bottom: 32,
+      right: 32,
+    }"
+    :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>