1.9.1

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 1.9.1
+
+- 优化 `typeSctipt` 类型定义
+- 优化 `setup` 语法
+- 依赖升级
+
 ## 1.9.0
 
 - 新增 `BasicForm` 组件，支持 `setLoading`, `setSchema` 方法

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "author": {
     "name": "Ahjung",
     "email": "735878602@qq.com",
@@ -32,71 +32,71 @@
     "@vicons/ionicons5": "^0.12.0",
     "@vueup/vue-quill": "^1.2.0",
     "@vueuse/core": "^9.13.0",
-    "axios": "^1.4.0",
+    "axios": "^1.6.8",
     "blueimp-md5": "^2.19.0",
     "date-fns": "^2.30.0",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
     "element-resize-detector": "^1.2.4",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
-    "naive-ui": "^2.34.4",
-    "pinia": "^2.1.6",
-    "qs": "^6.11.2",
+    "naive-ui": "^2.38.1",
+    "pinia": "^2.1.7",
+    "qs": "^6.12.0",
     "vfonts": "^0.0.3",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
     "vue-types": "^4.2.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.0",
-    "@commitlint/config-conventional": "^17.7.0",
-    "@types/lodash": "^4.14.197",
-    "@types/node": "^18.17.4",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^18.19.31",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.4.21",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
-    "core-js": "^3.32.0",
+    "core-js": "^3.36.1",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.3.1",
-    "eslint": "^8.46.0",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-define-config": "1.12.0",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.24.1",
     "esno": "^0.16.3",
     "gh-pages": "^4.0.0",
     "husky": "^8.0.3",
-    "jest": "^29.6.2",
+    "jest": "^29.7.0",
     "less": "^4.2.0",
-    "less-loader": "^11.1.3",
-    "lint-staged": "^13.2.3",
-    "postcss": "^8.4.27",
+    "less-loader": "^11.1.4",
+    "lint-staged": "^13.3.0",
+    "postcss": "^8.4.38",
     "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
+    "pretty-quick": "^3.3.1",
     "rimraf": "^3.0.2",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.7.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.9.5",
     "unplugin-vue-components": "^0.22.12",
-    "vite": "^3.2.7",
+    "vite": "^3.2.10",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-html": "^3.2.2",
     "vite-plugin-mock": "^2.9.8",
     "vite-plugin-style-import": "^2.0.0",
     "vue-demi": "^0.13.11",
     "vue-draggable-next": "^2.2.1",
-    "vue-eslint-parser": "^9.3.1",
+    "vue-eslint-parser": "^9.4.2",
     "vuedraggable": "^4.1.0"
   },
   "lint-staged": {

src/App.vue

@@ -81,7 +81,3 @@
     document.removeEventListener('mousedown', timekeeping);
   });
 </script>
-
-<style lang="less">
-  @import 'styles/index.less';
-</style>

src/components/Upload/src/BasicUpload.vue

@@ -69,18 +69,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, reactive, computed, watch } from 'vue';
-import { EyeOutlined, DeleteOutlined, PlusOutlined } from '@vicons/antd';
-import { basicProps } from './props';
-import { useMessage, useDialog } from 'naive-ui';
-import { ResultEnum } from '@/enums/httpEnum';
-import componentSetting from '@/settings/componentSetting';
-import { useGlobSetting } from '@/hooks/setting';
-import { isString } from '@/utils/is';
+  import { defineComponent, toRefs, reactive, computed, watch } from 'vue';
+  import { EyeOutlined, DeleteOutlined, PlusOutlined } from '@vicons/antd';
+  import { basicProps } from './props';
+  import { useMessage, useDialog } from 'naive-ui';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import componentSetting from '@/settings/componentSetting';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { isString } from '@/utils/is';
 
-const globSetting = useGlobSetting();
+  const globSetting = useGlobSetting();
 
-export default defineComponent({
+  export default defineComponent({
     name: 'BasicUpload',
 
     components: { EyeOutlined, DeleteOutlined, PlusOutlined },
@@ -197,11 +197,11 @@ export default defineComponent({
         getCSSProperties,
       };
     },
-});
+  });
 </script>
 
 <style lang="less">
-.upload {
+  .upload {
     width: 100%;
     overflow: hidden;
 
@@ -307,5 +307,5 @@ export default defineComponent({
         }
       }
     }
-}
+  }
 </style>

src/layout/components/Header/index.vue

@@ -10,7 +10,7 @@
         <h2 v-show="!collapsed" class="title">{{ websiteConfig.title }}</h2>
       </div>
       <AsideMenu
-        v-model:collapsed="collapsed"
+        :collapsed="collapsed"
         v-model:location="getMenuLocation"
         :inverted="getInverted"
         mode="horizontal"
@@ -21,7 +21,7 @@
       <!-- 菜单收起 -->
       <div
         class="ml-1 layout-header-trigger layout-header-trigger-min"
-        @click="() => $emit('update:collapsed', !collapsed)"
+        @click="handleMenuCollapsed"
       >
         <n-icon size="18" v-if="collapsed">
           <MenuUnfoldOutlined />
@@ -101,12 +101,14 @@
       <div class="layout-header-trigger layout-header-trigger-min">
         <n-dropdown trigger="hover" @select="avatarSelect" :options="avatarOptions">
           <div class="avatar">
-            <n-avatar round>
-              {{ username }}
+            <n-avatar round :src="websiteConfig.logo">
+             
               <template #icon>
                 <UserOutlined />
               </template>
             </n-avatar>
+            <n-divider vertical />
+            <span>{{ username }}</span>
           </div>
         </n-dropdown>
       </div>
@@ -151,19 +153,18 @@
         type: Boolean,
       },
     },
-    setup(props) {
+    emits: ['update:collapsed'],
+    setup(props, { emit }) {
       const userStore = useUserStore();
       const useLockscreen = useScreenLockStore();
       const message = useMessage();
       const dialog = useDialog();
       const { navMode, navTheme, headerSetting, menuSetting, crumbsSetting } = useProjectSetting();
 
-      const { name } = userStore?.info || {};
-
       const drawerSetting = ref();
 
       const state = reactive({
-        username: name ?? '',
+        username: userStore?.info?.username ?? '',
         fullscreenIcon: 'FullscreenOutlined',
         navMode,
         navTheme,
@@ -323,6 +324,10 @@
         openDrawer();
       }
 
+      function handleMenuCollapsed() {
+        emit('update:collapsed', !props.collapsed);
+      }
+
       return {
         ...toRefs(state),
         iconList,
@@ -341,6 +346,7 @@
         getMenuLocation,
         mixMenu,
         websiteConfig,
+        handleMenuCollapsed,
       };
     },
   });

src/main.ts

@@ -1,4 +1,5 @@
 import './styles/tailwind.css';
+import './styles/index.less';
 import { createApp } from 'vue';
 import { setupNaiveDiscreteApi, setupNaive, setupDirectives } from '@/plugins';
 import App from './App.vue';

src/store/modules/user.ts

@@ -8,7 +8,7 @@ import { storage } from '@/utils/Storage';
 
 export type UserInfoType = {
   // TODO: add your own data
-  name: string;
+  username: string;
   email: string;
 };
 

src/styles/index.less

@@ -1 +1 @@
-@import 'transition/index.less';
+@import url('./transition/index.less');

src/views/comp/modal/index.vue

@@ -54,8 +54,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
   import { useMessage } from 'naive-ui';
   import { basicModal, useModal } from '@/components/Modal';
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
@@ -205,9 +205,6 @@
     },
   ];
 
-  export default defineComponent({
-    components: { basicModal, BasicForm },
-    setup() {
   const modalRef: any = ref(null);
   const message = useMessage();
 
@@ -217,11 +214,7 @@
 
   const [
     lightModalRegister,
-        {
-          openModal: lightOpenModal,
-          closeModal: lightCloseModal,
-          setSubLoading: lightSetSubLoading,
-        },
+    { openModal: lightOpenModal, closeModal: lightCloseModal, setSubLoading: lightSetSubLoading },
   ] = useModal({
     title: '确认对话框',
     showIcon: true,
@@ -240,12 +233,6 @@
     schemas,
   });
 
-      const state = reactive({
-        formValue: {
-          name: '小马哥',
-        },
-      });
-
   async function okModal() {
     const formRes = await submit();
     if (formRes) {
@@ -274,21 +261,6 @@
   function handleReset(values: Recordable) {
     console.log(values);
   }
-
-      return {
-        ...toRefs(state),
-        modalRef,
-        register,
-        modalRegister,
-        lightModalRegister,
-        handleReset,
-        showModal,
-        okModal,
-        lightOkModal,
-        showLightModal,
-      };
-    },
-  });
 </script>
 
 <style lang="less">

src/views/comp/table/editCell.vue

@@ -51,7 +51,7 @@
     actionRef.value.reload();
   }
 
-  function editEnd({ record, index, key, value }) {
+  function editEnd({ value }) {
     console.log(value);
   }
 </script>

src/views/comp/table/editRow.vue

@@ -106,7 +106,7 @@
     actionRef.value.reload();
   }
 
-  function editEnd({ record, index, key, value }) {
+  function editEnd({ value }) {
     console.log(value);
   }
 </script>

src/views/dashboard/console/components/FluxTrend.vue

@@ -1,16 +1,16 @@
 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { defineComponent, onMounted, ref, Ref } from 'vue';
+<script lang="ts" setup>
+  import { onMounted, ref, Ref } from 'vue';
 
   import { useECharts } from '@/hooks/web/useECharts';
 
   import { basicProps } from './props';
 
-  export default defineComponent({
-    props: basicProps,
-    setup() {
+  defineProps({
+    ...basicProps,
+  });
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
@@ -81,8 +81,8 @@
         {
           smooth: true,
           data: [
-                111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
-                22222, 11111, 4000, 2000, 500, 333, 222, 111,
+            111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222,
+            11111, 4000, 2000, 500, 333, 222, 111,
           ],
           type: 'line',
           areaStyle: {},
@@ -93,8 +93,8 @@
         {
           smooth: true,
           data: [
-                33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
-                390, 198, 60, 30, 22, 11,
+            33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
+            198, 60, 30, 22, 11,
           ],
           type: 'line',
           areaStyle: {},
@@ -105,7 +105,4 @@
       ],
     });
   });
-      return { chartRef };
-    },
-  });
 </script>

src/views/dashboard/console/components/VisiTab.vue

@@ -16,15 +16,7 @@
     </NRow>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import FluxTrend from './FluxTrend.vue';
   import VisitAmount from './VisitAmount.vue';
-
-  export default defineComponent({
-    components: { FluxTrend, VisitAmount },
-    setup() {
-      return {};
-    },
-  });
 </script>

src/views/dashboard/console/components/VisitAmount.vue

@@ -1,14 +1,15 @@
 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { defineComponent, onMounted, ref, Ref } from 'vue';
+<script lang="ts" setup>
+  import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '@/hooks/web/useECharts';
   import { basicProps } from './props';
 
-  export default defineComponent({
-    props: basicProps,
-    setup() {
+  defineProps({
+    ...basicProps,
+  });
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
@@ -55,7 +56,4 @@
       ],
     });
   });
-      return { chartRef };
-    },
-  });
 </script>

src/views/dashboard/console/console.vue

@@ -241,11 +241,38 @@
     SettingOutlined,
   } from '@vicons/antd';
 
+  interface InVisits {
+    dayVisits: number;
+    rise: number;
+    decline: number;
+    amount: number;
+  }
+
+  interface InSaleroom {
+    weekSaleroom: number;
+    amount: number;
+    degree: number;
+  }
+
+  interface InOrderLarge {
+    weekLarge: number;
+    rise: number;
+    decline: number;
+    amount: number;
+  }
+
+  interface InVolume {
+    weekLarge: number;
+    rise: number;
+    decline: number;
+    amount: number;
+  }
+
   const loading = ref(true);
-  const visits = ref<any>({});
-  const saleroom = ref<any>({});
-  const orderLarge = ref<any>({});
-  const volume = ref(<any>{});
+  const visits = ref({} as InVisits);
+  const saleroom = ref({} as InSaleroom);
+  const orderLarge = ref({} as InOrderLarge);
+  const volume = ref({} as InVolume);
 
   // 图标列表
   const iconList = [

src/views/form/stepForm/stepForm.vue

@@ -13,7 +13,7 @@
           <n-step title="完成转账" description="恭喜您，转账成功" />
         </n-steps>
         <step1 v-if="currentTab === 1" @next-step="nextStep" />
-        <step2 v-if="currentTab === 2" @next-step="nextStep" @prevStep="prevStep" />
+        <step2 v-if="currentTab === 2" @next-step="nextStep" @prev-step="prevStep" />
         <step3 v-if="currentTab === 3" @prev-step="prevStep" @finish="finish" />
       </n-space>
     </n-card>
@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-  import { defineComponent, ref } from 'vue';
+  import { ref } from 'vue';
   import step1 from './Step1.vue';
   import step2 from './Step2.vue';
   import step3 from './Step3.vue';

src/views/list/basicList/info.vue

@@ -3,7 +3,7 @@
     <div class="n-layout-page-header">
       <n-card :bordered="false" title="基础详情"> 基础详情，有时也用于显示只读信息。 </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
+    <n-card :bordered="false" class="mt-4 proCard" size="small" :segmented="{ content: true }">
       <n-descriptions label-placement="left" class="py-2">
         <n-descriptions-item>
           <template #label>收款人姓名</template>
@@ -21,14 +21,6 @@
   </div>
 </template>
 
-<script>
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    setup() {
-      return {};
-    },
-  });
-</script>
+<script lang="ts" setup></script>
 
 <style lang="less" scoped></style>

src/views/setting/system/BasicSetting.vue

@@ -53,8 +53,8 @@
   </n-grid>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, toRefs } from 'vue';
   import { useDialog, useMessage } from 'naive-ui';
 
   const rules = {
@@ -70,14 +70,11 @@
     },
   };
 
-  export default defineComponent({
-    setup() {
   const formRef: any = ref(null);
   const message = useMessage();
   const dialog = useDialog();
 
-      const state = reactive({
-        formValue: {
+  const formValue = ref({
     name: '',
     mobile: '',
     icpCode: '',
@@ -86,7 +83,6 @@
     closeText:
       '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
     systemOpen: true,
-        },
   });
 
   function systemOpenChange(value) {
@@ -100,7 +96,7 @@
           message.success('操作成功');
         },
         onNegativeClick: () => {
-              state.formValue.systemOpen = true;
+          formValue.value.systemOpen = true;
         },
       });
     }
@@ -119,15 +115,4 @@
   function resetForm() {
     formRef.value.restoreValidation();
   }
-
-      return {
-        formRef,
-        ...toRefs(state),
-        rules,
-        formSubmit,
-        resetForm,
-        systemOpenChange,
-      };
-    },
-  });
 </script>

src/views/setting/system/EmailSetting.vue

@@ -36,8 +36,8 @@
   </n-grid>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, toRefs } from 'vue';
   import { useMessage } from 'naive-ui';
 
   const rules = {
@@ -47,15 +47,12 @@
       trigger: 'blur',
     },
   };
-  export default defineComponent({
-    setup() {
+
   const formRef: any = ref(null);
   const message = useMessage();
 
-      const state = reactive({
-        formValue: {
+  const formValue = ref({
     originator: '',
-        },
   });
 
   function formSubmit() {
@@ -67,13 +64,4 @@
       }
     });
   }
-
-      return {
-        formRef,
-        ...toRefs(state),
-        rules,
-        formSubmit,
-      };
-    },
-  });
 </script>

src/views/setting/system/RevealSetting.vue

@@ -88,8 +88,8 @@
   </n-grid>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, toRefs } from 'vue';
   import { useDialog, useMessage } from 'naive-ui';
 
   const rules = {
@@ -152,14 +152,11 @@
     },
   ];
 
-  export default defineComponent({
-    setup() {
   const formRef: any = ref(null);
   const message = useMessage();
   const dialog = useDialog();
 
-      const state = reactive({
-        formValue: {
+  const formValue = ref({
     bigWidth: '',
     bigHeight: '',
     smallWidth: '',
@@ -168,7 +165,6 @@
     pricePrecise: 1,
     isMarketPrice: true,
     pricePreciseNum: null,
-        },
   });
 
   function systemOpenChange(value) {
@@ -182,7 +178,7 @@
           message.success('操作成功');
         },
         onNegativeClick: () => {
-              state.formValue.systemOpen = true;
+          formValue.value.systemOpen = true;
         },
       });
     }
@@ -201,18 +197,4 @@
   function resetForm() {
     formRef.value.restoreValidation();
   }
-
-      return {
-        formRef,
-        ...toRefs(state),
-        pricePreciseList,
-        watermarkPlaceList,
-        pricePreciseNumList,
-        rules,
-        formSubmit,
-        resetForm,
-        systemOpenChange,
-      };
-    },
-  });
 </script>

src/views/setting/system/system.vue

@@ -25,8 +25,8 @@
     </n-grid>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { reactive, toRefs } from 'vue';
   import BasicSetting from './BasicSetting.vue';
   import RevealSetting from './RevealSetting.vue';
   import EmailSetting from './EmailSetting.vue';
@@ -48,9 +48,7 @@
       key: 3,
     },
   ];
-  export default defineComponent({
-    components: { BasicSetting, RevealSetting, EmailSetting },
-    setup() {
+
   const state = reactive({
     type: 1,
     typeTitle: '基本设置',
@@ -60,14 +58,6 @@
     state.type = e.key;
     state.typeTitle = e.name;
   }
-
-      return {
-        ...toRefs(state),
-        switchType,
-        typeTabList,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   .thing-cell {

src/views/system/menu/CreateDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
+  <n-drawer v-model:show="state.isDrawer" :width="width" :placement="state.placement">
     <n-drawer-content :title="title" closable>
       <n-form
         :model="formParams"
@@ -38,7 +38,7 @@
 
       <template #footer>
         <n-space>
-          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
+          <n-button type="primary" :loading="state.subLoading" @click="formSubmit">提交</n-button>
           <n-button @click="handleReset">重置</n-button>
         </n-space>
       </template>
@@ -46,8 +46,8 @@
   </n-drawer>
 </template>
 
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, toRefs } from 'vue';
   import { useMessage } from 'naive-ui';
 
   const rules = {
@@ -62,10 +62,8 @@
       trigger: 'blur',
     },
   };
-  export default defineComponent({
-    name: 'CreateDrawer',
-    components: {},
-    props: {
+
+  defineProps({
     title: {
       type: String,
       default: '添加顶级菜单',
@@ -74,8 +72,8 @@
       type: Number,
       default: 450,
     },
-    },
-    setup() {
+  });
+
   const message = useMessage();
   const formRef: any = ref(null);
   const defaultValueRef = () => ({
@@ -87,14 +85,11 @@
     path: '',
     hidden: false,
   });
-
+  const formParams = ref(defaultValueRef());
   const state = reactive({
     isDrawer: false,
     subLoading: false,
-        formParams: defaultValueRef(),
     placement: 'right' as const,
-        alertText:
-          '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
   });
 
   function openDrawer() {
@@ -119,18 +114,6 @@
 
   function handleReset() {
     formRef.value.restoreValidation();
-        state.formParams = Object.assign(state.formParams, defaultValueRef());
+    formParams.value = Object.assign(formParams.value, defaultValueRef());
   }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        rules,
-        formSubmit,
-        handleReset,
-        openDrawer,
-        closeDrawer,
-      };
-    },
-  });
 </script>