refactor: grid layout

MaaXYZ · Aug 9, 2023 · 8872279 · 8872279
1 parent 736859e
commit 8872279
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 45 deletions.
diff --git a/src/components/ActionEdit.vue b/src/components/ActionEdit.vue
@@ -10,6 +10,7 @@ import SingleStringEdit from '@/components/array/SingleStringEdit.vue'
 import ClearButton from '@/components/atomic/ClearButton.vue'
 import JsonEdit from '@/components/atomic/JsonEdit.vue'
 import TargetEdit from '@/components/task/TargetEdit.vue'
+import FormLayout from '@/layout/FormLayout.vue'
 
 const props = defineProps<{
   value: Task
@@ -34,14 +35,7 @@ const taskActValue = computed(() => props.value.action ?? 'DoNothing')
 </script>
 
 <template>
-  <div
-    class="grid items-center"
-    style="
-      grid-template-columns: max-content minmax(0, 1fr);
-      column-gap: 0.5rem;
-      row-gap: 1rem;
-    "
-  >
+  <FormLayout>
     <ClearButton
       propkey="action"
       :value="value.action ?? null"
@@ -167,5 +161,5 @@ const taskActValue = computed(() => props.value.action ?? 'DoNothing')
         @update:value="v => updateEditOn(edit, 'custom_action_param', v)"
       ></JsonEdit>
     </template>
-  </div>
+  </FormLayout>
 </template>
diff --git a/src/components/MiscEdit.vue b/src/components/MiscEdit.vue
@@ -7,6 +7,7 @@ import type { Task } from '@/types'
 import ArrayNavigateEdit from './task/ArrayNavigateEdit.vue'
 import ClearButton from '@/components/atomic/ClearButton.vue'
 import FreezeEdit from '@/components/task/FreezeEdit.vue'
+import FormLayout from '@/layout/FormLayout.vue'
 
 defineProps<{
   value: Task
@@ -15,14 +16,7 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    class="grid items-center"
-    style="
-      grid-template-columns: max-content minmax(0, 1fr);
-      column-gap: 0.5rem;
-      row-gap: 1rem;
-    "
-  >
+  <FormLayout>
     <ClearButton
       propkey="next"
       :value="value.next ?? null"
@@ -168,5 +162,5 @@ defineProps<{
         @update:value="v => updateEditOn(edit, 'notify', v)"
       ></NSwitch>
     </div>
-  </div>
+  </FormLayout>
 </template>
diff --git a/src/components/RecognizerEdit.vue b/src/components/RecognizerEdit.vue
@@ -11,6 +11,7 @@ import ArrayStringEdit from '@/components/array/ArrayStringEdit.vue'
 import ClearButton from '@/components/atomic/ClearButton.vue'
 import JsonEdit from '@/components/atomic/JsonEdit.vue'
 import RectEdit from '@/components/atomic/RectEdit.vue'
+import FormLayout from '@/layout/FormLayout.vue'
 
 const props = defineProps<{
   value: Task
@@ -31,14 +32,7 @@ const templMethodOptions = [1, 3, 5].map(x => ({
 </script>
 
 <template>
-  <div
-    class="grid items-center"
-    style="
-      grid-template-columns: max-content minmax(0, 1fr);
-      column-gap: 0.5rem;
-      row-gap: 1rem;
-    "
-  >
+  <FormLayout>
     <ClearButton
       propkey="recognition"
       :value="value.recognition ?? null"
@@ -211,5 +205,5 @@ const templMethodOptions = [1, 3, 5].map(x => ({
         @update:value="v => updateEditOn(edit, 'custom_recognizer_param', v)"
       ></JsonEdit>
     </template>
-  </div>
+  </FormLayout>
 </template>
diff --git a/src/components/TaskEdit.vue b/src/components/TaskEdit.vue
@@ -32,6 +32,7 @@ import ClearButton from '@/components/atomic/ClearButton.vue'
 import JsonEdit from '@/components/atomic/JsonEdit.vue'
 import ArrayNavigateEdit from '@/components/task/ArrayNavigateEdit.vue'
 import SingleNavigateEdit from '@/components/task/SingleNavigateEdit.vue'
+import FormLayout from '@/layout/FormLayout.vue'
 
 const props = defineProps<{
   name: string
@@ -206,14 +207,7 @@ function tryDelete() {
             <MiscEdit :value="value" :edit="edit"></MiscEdit>
           </NCollapseItem>
           <NCollapseItem title="引用" name="ref">
-            <div
-              class="grid items-center"
-              style="
-                grid-template-columns: max-content minmax(0, 1fr);
-                column-gap: 0.5rem;
-                row-gap: 1rem;
-              "
-            >
+            <FormLayout>
               <ClearButton propkey="<unknown>" :value="null" :edit="() => {}">
                 前序任务
               </ClearButton>
@@ -227,7 +221,7 @@ function tryDelete() {
                 array
                 readonly
               ></ArrayNavigateEdit>
-            </div>
+            </FormLayout>
           </NCollapseItem>
         </NCollapse>
       </div>

diff --git a/src/components/task/FreezeEdit.vue b/src/components/task/FreezeEdit.vue
@@ -10,6 +10,7 @@ import ClearButton from '@/components/atomic/ClearButton.vue'
 import FloatInput from '@/components/atomic/FloatInput.vue'
 import SwitchButton from '@/components/atomic/SwitchButton.vue'
 import TargetEdit from '@/components/task/TargetEdit.vue'
+import FormLayout from '@/layout/FormLayout.vue'
 
 type T = null | number | WaitFreezes
 
@@ -65,14 +66,7 @@ const templMethodOptions = [1, 3, 5].map(x => ({
         <DataObjectOutlined></DataObjectOutlined>
       </SwitchButton>
     </div>
-    <div
-      class="grid items-center"
-      style="
-        grid-template-columns: max-content minmax(0, 1fr);
-        column-gap: 0.5rem;
-        row-gap: 1rem;
-      "
-    >
+    <FormLayout>
       <template v-if="notObject">
         <NInputNumber
           :value="value as number | null"
@@ -135,6 +129,6 @@ const templMethodOptions = [1, 3, 5].map(x => ({
           placeholder="5"
         ></NSelect>
       </template>
-    </div>
+    </FormLayout>
   </div>
 </template>
diff --git a/src/layout/FormLayout.vue b/src/layout/FormLayout.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="mFormLayout">
+    <slot></slot>
+  </div>
+</template>
+
+<style>
+.mFormLayout {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  row-gap: 1rem;
+  column-gap: 0.5rem;
+  align-items: center;
+}
+</style>