From bf075380e17bfc4a70609c7b31da44c6f17149d4 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Thu, 18 Apr 2024 09:47:26 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/operate-drawer.vue      |  2 +-
 src/components/common/search-form.vue         | 67 +++++++++++++++++++
 src/typings/api.d.ts                          |  9 +--
 src/typings/components.d.ts                   |  2 +
 src/views/group-config/index.vue              | 15 +++--
 .../modules/groupConfig-operate-drawer.vue    | 22 ++----
 .../modules/groupConfig-search.vue            | 45 +++----------
 .../namepase/modules/namespace-search.vue     | 45 ++-----------
 .../modules/notify-recipient-search.vue       | 63 +++++------------
 .../scene/modules/notify-config-search.vue    | 57 ++++------------
 src/views/pods/index.vue                      |  8 +--
 src/views/pods/modules/pods-search.vue        | 45 ++-----------
 12 files changed, 142 insertions(+), 238 deletions(-)
 create mode 100644 src/components/common/search-form.vue

diff --git a/src/components/common/operate-drawer.vue b/src/components/common/operate-drawer.vue
index 6bbae7b..07914c5 100644
--- a/src/components/common/operate-drawer.vue
+++ b/src/components/common/operate-drawer.vue
@@ -3,7 +3,7 @@ import { computed, nextTick, onUnmounted, reactive, ref, watch } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 
 defineOptions({
-  name: 'NamespaceOperateDrawer'
+  name: 'OperateDrawer'
 });
 
 interface Props {
diff --git a/src/components/common/search-form.vue b/src/components/common/search-form.vue
new file mode 100644
index 0000000..ac5395f
--- /dev/null
+++ b/src/components/common/search-form.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { useNaiveForm } from '@/hooks/common/form';
+
+defineOptions({
+  name: 'SearchForm'
+});
+
+interface Props {
+  model: Record<string, any>;
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const appStore = useAppStore();
+
+const title = ref(appStore.isMobile ? $t('common.search') : undefined);
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
+    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
+      <NGrid responsive="screen" item-responsive>
+        <slot></slot>
+        <NFormItemGi span="24 m:12 m:6" class="pr-24px lg:p-t-0 md:p-t-16px">
+          <NSpace class="min-w-172px w-full" justify="end">
+            <NButton @click="reset">
+              <template #icon>
+                <icon-ic-round-refresh class="text-icon" />
+              </template>
+              {{ $t('common.reset') }}
+            </NButton>
+            <NButton type="primary" ghost @click="search">
+              <template #icon>
+                <icon-ic-round-search class="text-icon" />
+              </template>
+              {{ $t('common.search') }}
+            </NButton>
+          </NSpace>
+        </NFormItemGi>
+      </NGrid>
+    </NForm>
+  </NCard>
+</template>
+
+<style scoped></style>
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 9ea9704..92f383b 100644
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -483,6 +483,8 @@ declare namespace Api {
       groupName: string;
       /** 业务ID */
       businessId: string;
+      /** 业务名称 */
+      businessName?: string;
       /** 状态 */
       notifyStatus: string;
       /** 通知类型 */
@@ -514,12 +516,7 @@ declare namespace Api {
     >;
 
     /** notify-config list */
-    type NotifyConfigList = Common.PaginatingQueryRecord<
-      {
-        /** 业务名称 */
-        businessName: string;
-      } & NotifyConfig
-    >;
+    type NotifyConfigList = Common.PaginatingQueryRecord<NotifyConfig>;
   }
 
   /**
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index c4e950e..6b635d1 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -89,6 +89,8 @@ declare module 'vue' {
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Search: typeof import('../components/common/search-form.vue')['default']
+    SearchForm: typeof import('./../components/common/search-form.vue')['default']
     SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default']
     SvgIcon: typeof import('./../components/custom/svg-icon.vue')['default']
     SystemLogo: typeof import('./../components/common/system-logo.vue')['default']
diff --git a/src/views/group-config/index.vue b/src/views/group-config/index.vue
index 7781965..6494fe3 100644
--- a/src/views/group-config/index.vue
+++ b/src/views/group-config/index.vue
@@ -149,7 +149,13 @@ function edit(id: string) {
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <GroupConfigSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
-    <NCard :title="$t('page.groupConfig.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+    <NCard
+      :title="$t('page.groupConfig.title')"
+      :bordered="false"
+      size="small"
+      header-class="view-card-header"
+      class="sm:flex-1-hidden card-wrapper"
+    >
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="columnChecks"
@@ -164,7 +170,6 @@ function edit(id: string) {
         v-model:checked-row-keys="checkedRowKeys"
         :columns="columns"
         :data="data"
-        size="small"
         :flex-height="!appStore.isMobile"
         :scroll-x="962"
         :loading="loading"
@@ -183,8 +188,4 @@ function edit(id: string) {
   </div>
 </template>
 
-<style scoped>
-:deep(.n-card-header) {
-  --n-title-font-weight: 600 !important;
-}
-</style>
+<style scoped></style>
diff --git a/src/views/group-config/modules/groupConfig-operate-drawer.vue b/src/views/group-config/modules/groupConfig-operate-drawer.vue
index e03e1d2..f816d26 100644
--- a/src/views/group-config/modules/groupConfig-operate-drawer.vue
+++ b/src/views/group-config/modules/groupConfig-operate-drawer.vue
@@ -85,21 +85,13 @@ watch(visible, () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
-    <NDrawerContent :title="title" :native-scrollbar="false" closable>
-      <NForm ref="formRef" :model="model" :rules="rules">
-        <NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
-          <NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
-        </NFormItem>
-      </NForm>
-      <template #footer>
-        <NSpace :size="16">
-          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
-          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
-        </NSpace>
-      </template>
-    </NDrawerContent>
-  </NDrawer>
+  <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
+    <NForm ref="formRef" :model="model" :rules="rules">
+      <NFormItem :label="$t('page.groupConfig.namespaceId')" path="namespaceId">
+        <NInput v-model:value="model.namespaceId" :placeholder="$t('page.groupConfig.form.namespaceId')" />
+      </NFormItem>
+    </NForm>
+  </OperateDrawer>
 </template>
 
 <style scoped></style>
diff --git a/src/views/group-config/modules/groupConfig-search.vue b/src/views/group-config/modules/groupConfig-search.vue
index 044f648..ac11060 100644
--- a/src/views/group-config/modules/groupConfig-search.vue
+++ b/src/views/group-config/modules/groupConfig-search.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
-import { useNaiveForm } from '@/hooks/common/form';
 
 defineOptions({
   name: 'GroupConfigSearch'
@@ -13,51 +12,23 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-const { formRef, validate, restoreValidation } = useNaiveForm();
-
 const model = defineModel<Api.GroupConfig.GroupConfigSearchParams>('model', { required: true });
 
-async function reset() {
-  await restoreValidation();
+function reset() {
   emit('reset');
 }
 
-async function search() {
-  await validate();
+function search() {
   emit('search');
 }
 </script>
 
 <template>
-  <NCard :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
-      <NGrid responsive="screen" item-responsive>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.groupConfig.groupName')" path="userName" class="pr-24px">
-          <NInput v-model:value="model.groupName" :placeholder="$t('page.groupConfig.form.groupName')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 m:12" class="pr-24px">
-          <NSpace class="w-full" justify="end">
-            <NButton @click="reset">
-              <template #icon>
-                <icon-ic-round-refresh class="text-icon" />
-              </template>
-              {{ $t('common.reset') }}
-            </NButton>
-            <NButton type="primary" ghost @click="search">
-              <template #icon>
-                <icon-ic-round-search class="text-icon" />
-              </template>
-              {{ $t('common.search') }}
-            </NButton>
-          </NSpace>
-        </NFormItemGi>
-      </NGrid>
-    </NForm>
-  </NCard>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.groupConfig.groupName')" path="userName" class="pr-24px">
+      <NInput v-model:value="model.groupName" :placeholder="$t('page.groupConfig.form.groupName')" />
+    </NFormItemGi>
+  </SearchForm>
 </template>
 
-<style scoped>
-:deep(.n-card-header) {
-  --n-title-font-weight: 600 !important;
-}
-</style>
+<style scoped></style>
diff --git a/src/views/namepase/modules/namespace-search.vue b/src/views/namepase/modules/namespace-search.vue
index 65b6075..7d706a9 100644
--- a/src/views/namepase/modules/namespace-search.vue
+++ b/src/views/namepase/modules/namespace-search.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useNaiveForm } from '@/hooks/common/form';
 
 defineOptions({
   name: 'NamespaceSearch'
@@ -15,51 +12,23 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-const appStore = useAppStore();
-
-const title = ref(appStore.isMobile ? $t('common.search') : undefined);
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-
 const model = defineModel<Api.Namespace.NamespaceSearchParams>('model', { required: true });
 
-async function reset() {
-  await restoreValidation();
+function reset() {
   emit('reset');
 }
 
-async function search() {
-  await validate();
+function search() {
   emit('search');
 }
 </script>
 
 <template>
-  <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
-      <NGrid responsive="screen" item-responsive>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px">
-          <NInput v-model:value="model.keyword" :placeholder="$t('page.namespace.form.keyword')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 m:12" class="pr-24px">
-          <NSpace class="w-full" justify="end">
-            <NButton @click="reset">
-              <template #icon>
-                <icon-ic-round-refresh class="text-icon" />
-              </template>
-              {{ $t('common.reset') }}
-            </NButton>
-            <NButton type="primary" ghost @click="search">
-              <template #icon>
-                <icon-ic-round-search class="text-icon" />
-              </template>
-              {{ $t('common.search') }}
-            </NButton>
-          </NSpace>
-        </NFormItemGi>
-      </NGrid>
-    </NForm>
-  </NCard>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.namespace.keyword')" path="userName" class="pr-24px">
+      <NInput v-model:value="model.keyword" :placeholder="$t('page.namespace.form.keyword')" />
+    </NFormItemGi>
+  </SearchForm>
 </template>
 
 <style scoped></style>
diff --git a/src/views/notify/recipient/modules/notify-recipient-search.vue b/src/views/notify/recipient/modules/notify-recipient-search.vue
index e20f2ef..2b5d3cd 100644
--- a/src/views/notify/recipient/modules/notify-recipient-search.vue
+++ b/src/views/notify/recipient/modules/notify-recipient-search.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useNaiveForm } from '@/hooks/common/form';
+import SearchForm from '@/components/common/search-form.vue';
 
 defineOptions({
   name: 'NotifyRecipientSearch'
@@ -15,59 +13,32 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-const appStore = useAppStore();
-
-const title = ref(appStore.isMobile ? $t('common.search') : undefined);
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-
 const model = defineModel<Api.NotifyRecipient.NotifyRecipientParams>('model', { required: true });
 
-async function reset() {
-  await restoreValidation();
+function reset() {
   emit('reset');
 }
 
-async function search() {
-  await validate();
+function search() {
   emit('search');
 }
 </script>
 
 <template>
-  <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
-      <NGrid responsive="screen" item-responsive>
-        <NFormItemGi
-          span="24 s:12 m:6"
-          :label="$t('page.notifyRecipient.recipientName')"
-          path="userName"
-          class="pr-24px"
-        >
-          <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyRecipient.notifyType')" path="userName" class="pr-24px">
-          <NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.notifyType')" clearable />
-        </NFormItemGi>
-        <NFormItemGi span="24 m:12" class="pr-24px">
-          <NSpace class="w-full" justify="end">
-            <NButton @click="reset">
-              <template #icon>
-                <icon-ic-round-refresh class="text-icon" />
-              </template>
-              {{ $t('common.reset') }}
-            </NButton>
-            <NButton type="primary" ghost @click="search">
-              <template #icon>
-                <icon-ic-round-search class="text-icon" />
-              </template>
-              {{ $t('common.search') }}
-            </NButton>
-          </NSpace>
-        </NFormItemGi>
-      </NGrid>
-    </NForm>
-  </NCard>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi
+      span="24 s:12 m:6"
+      :label-width="100"
+      :label="$t('page.notifyRecipient.recipientName')"
+      path="userName"
+      class="pr-24px"
+    >
+      <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
+    </NFormItemGi>
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyRecipient.notifyType')" path="userName" class="pr-24px">
+      <NSelect v-model:value="model.notifyType" :placeholder="$t('page.notifyRecipient.notifyType')" clearable />
+    </NFormItemGi>
+  </SearchForm>
 </template>
 
 <style scoped></style>
diff --git a/src/views/notify/scene/modules/notify-config-search.vue b/src/views/notify/scene/modules/notify-config-search.vue
index a757ba7..0a7a78f 100644
--- a/src/views/notify/scene/modules/notify-config-search.vue
+++ b/src/views/notify/scene/modules/notify-config-search.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useNaiveForm } from '@/hooks/common/form';
 
 defineOptions({
   name: 'NotifyConfigSearch'
@@ -15,57 +12,29 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-const appStore = useAppStore();
-
-const title = ref(appStore.isMobile ? $t('common.search') : undefined);
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-
 const model = defineModel<Api.NotifyConfig.NotifySearchParams>('model', { required: true });
 
-async function reset() {
-  await restoreValidation();
+function reset() {
   emit('reset');
 }
 
-async function search() {
-  await validate();
+function search() {
   emit('search');
 }
 </script>
 
 <template>
-  <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" :show-feedback="appStore.isMobile">
-      <NGrid responsive="screen" item-responsive>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.groupName')" path="userName" class="pr-24px">
-          <NSelect v-model:value="model.groupName" :placeholder="$t('page.notifyConfig.groupName')" clearable />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyStatus')" path="userName" class="pr-24px">
-          <NSelect v-model:value="model.notifyStatus" :placeholder="$t('page.notifyConfig.notifyStatus')" clearable />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyScene')" path="userName" class="pr-24px">
-          <NSelect v-model:value="model.notifyScene" :placeholder="$t('page.notifyConfig.notifyScene')" clearable />
-        </NFormItemGi>
-        <NFormItemGi span="24 m:12" class="pr-24px">
-          <NSpace class="w-full" justify="end">
-            <NButton @click="reset">
-              <template #icon>
-                <icon-ic-round-refresh class="text-icon" />
-              </template>
-              {{ $t('common.reset') }}
-            </NButton>
-            <NButton type="primary" ghost @click="search">
-              <template #icon>
-                <icon-ic-round-search class="text-icon" />
-              </template>
-              {{ $t('common.search') }}
-            </NButton>
-          </NSpace>
-        </NFormItemGi>
-      </NGrid>
-    </NForm>
-  </NCard>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.groupName')" path="userName" class="pr-24px">
+      <NSelect v-model:value="model.groupName" :placeholder="$t('page.notifyConfig.groupName')" clearable />
+    </NFormItemGi>
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyStatus')" path="userName" class="pr-24px">
+      <NSelect v-model:value="model.notifyStatus" :placeholder="$t('page.notifyConfig.notifyStatus')" clearable />
+    </NFormItemGi>
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.notifyConfig.notifyScene')" path="userName" class="pr-24px">
+      <NSelect v-model:value="model.notifyScene" :placeholder="$t('page.notifyConfig.notifyScene')" clearable />
+    </NFormItemGi>
+  </SearchForm>
 </template>
 
 <style scoped></style>
diff --git a/src/views/pods/index.vue b/src/views/pods/index.vue
index 3d0265e..174a4c8 100644
--- a/src/views/pods/index.vue
+++ b/src/views/pods/index.vue
@@ -121,7 +121,7 @@ const { checkedRowKeys } = useTableOperate(data, getData);
       :title="$t('page.pods.title')"
       :bordered="false"
       size="small"
-      header-style="font-weight: 800;"
+      header-class="view-card-header"
       class="sm:flex-1-hidden card-wrapper"
     >
       <template #header-extra>
@@ -150,8 +150,4 @@ const { checkedRowKeys } = useTableOperate(data, getData);
   </div>
 </template>
 
-<style scoped>
-:deep(.n-card-header) {
-  --n-title-font-weight: 600 !important;
-}
-</style>
+<style scoped></style>
diff --git a/src/views/pods/modules/pods-search.vue b/src/views/pods/modules/pods-search.vue
index 0c656bb..5ed7aa7 100644
--- a/src/views/pods/modules/pods-search.vue
+++ b/src/views/pods/modules/pods-search.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useNaiveForm } from '@/hooks/common/form';
 
 defineOptions({
   name: 'PodsSearch'
@@ -15,51 +12,23 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-const appStore = useAppStore();
-
-const title = ref(appStore.isMobile ? $t('common.search') : undefined);
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-
 const model = defineModel<Api.Dashboard.DashboardPodsParams>('model', { required: true });
 
-async function reset() {
-  await restoreValidation();
+function reset() {
   emit('reset');
 }
 
-async function search() {
-  await validate();
+function search() {
   emit('search');
 }
 </script>
 
 <template>
-  <NCard :title="title" :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" label-placement="left" :label-width="60" :show-feedback="appStore.isMobile">
-      <NGrid responsive="screen" item-responsive>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px">
-          <NInput v-model:value="model.groupName" :placeholder="$t('page.pods.form.groupName')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 m:12" class="pr-24px">
-          <NSpace class="w-full">
-            <NButton @click="reset">
-              <template #icon>
-                <icon-ic-round-refresh class="text-icon" />
-              </template>
-              {{ $t('common.reset') }}
-            </NButton>
-            <NButton type="primary" ghost @click="search">
-              <template #icon>
-                <icon-ic-round-search class="text-icon" />
-              </template>
-              {{ $t('common.search') }}
-            </NButton>
-          </NSpace>
-        </NFormItemGi>
-      </NGrid>
-    </NForm>
-  </NCard>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.pods.groupName')" path="groupName" class="pr-24px">
+      <NInput v-model:value="model.groupName" :placeholder="$t('page.pods.form.groupName')" />
+    </NFormItemGi>
+  </SearchForm>
 </template>
 
 <style scoped></style>