refactor: use setup

src/components/FormDesign/src/components/VFormDesign/components/ComponentProps.vue

@@ -1,22 +1,9 @@
 <!--
  * @Description: 组件属性控件
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import {
+import { Checkbox, Col, Empty, Form, FormItem, Select } from 'ant-design-vue'
-  Checkbox,
+import { computed, ref, watch } from 'vue'
-  Col,
-  Empty,
-  Form,
-  FormItem,
-  Input,
-  InputNumber,
-  RadioGroup,
-  Row,
-  Select,
-  Switch,
-} from 'ant-design-vue'
-import RadioButtonGroup from '/@/components/Form/src/components/RadioButtonGroup.vue'
-import { computed, defineComponent, ref, watch } from 'vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import {
   baseComponentAttrs,
@@ -28,35 +15,15 @@ import { formItemsForEach, remove } from '../../../utils'
 import type { IBaseFormAttrs } from '../config/formItemPropsConfig'
 import FormOptions from './FormOptions.vue'
 
-export default defineComponent({
+const { formConfig } = useFormDesignState()
-  name: 'ComponentProps',
-  components: {
-    FormOptions,
-    Empty,
-    Input,
-    Form,
-    FormItem,
-    Switch,
-    Checkbox,
-    Select,
-    InputNumber,
-    RadioGroup,
-    RadioButtonGroup,
-    Col,
-    Row,
-  },
-  setup() {
 // 让compuated属性自动更新
-
 const allOptions = ref([] as Omit<IBaseFormAttrs, 'tag'>[])
-    const showControlAttrs = (includes: string[] | undefined) => {
+function showControlAttrs(includes: string[] | undefined) {
   if (!includes)
     return true
   return includes.includes(formConfig.value.currentItem!.component)
 }
 
-    const { formConfig } = useFormDesignState()
-
 if (formConfig.value.currentItem) {
   formConfig.value.currentItem.componentProps
     = formConfig.value.currentItem.componentProps || {}
@@ -159,15 +126,6 @@ export default defineComponent({
       .map(({ label, field }) => ({ label: `${label}/${field}`, value: field }))
   )
 })
-    return {
-      formConfig,
-      showControlAttrs,
-      linkOptions,
-      controlOptions,
-      inputOptions,
-    }
-  },
-})
 </script>
 
 <template>
@@ -184,27 +142,20 @@ export default defineComponent({
 
             <div v-if="item.children">
               <component
-                v-bind="child.componentProps"
+                v-bind="child.componentProps" :is="child.component" v-for="(child, index) of item.children"
-                :is="child.component"
+                :key="index" v-model:value="formConfig.currentItem.componentProps[item.name][index]"
-                v-for="(child, index) of item.children"
-                :key="index"
-                v-model:value="formConfig.currentItem.componentProps[item.name][index]"
               />
             </div>
             <!--     如果不是数组，则正常处理属性值       -->
             <component
-              v-bind="item.componentProps"
+              v-bind="item.componentProps" :is="item.component" v-else
-              :is="item.component"
+              v-model:value="formConfig.currentItem.componentProps[item.name]" class="component-prop"
-              v-else
-              v-model:value="formConfig.currentItem.componentProps[item.name]"
-              class="component-prop"
             />
           </FormItem>
           <FormItem label="控制属性">
             <Col v-for="item in controlOptions" :key="item.name">
               <Checkbox
-                v-if="showControlAttrs(item.includes)"
+                v-if="showControlAttrs(item.includes)" v-bind="item.componentProps"
-                v-bind="item.componentProps"
                 v-model:checked="formConfig.currentItem.componentProps[item.name]"
               >
                 {{ item.label }}
@@ -213,16 +164,11 @@ export default defineComponent({
           </FormItem>
         </div>
         <FormItem label="关联字段">
-          <Select
+          <Select v-model:value="formConfig.currentItem.link" mode="multiple" :options="linkOptions" />
-            v-model:value="formConfig.currentItem.link"
-            mode="multiple"
-            :options="linkOptions"
-          />
         </FormItem>
 
         <FormItem
-          v-if="
+          v-if="[
-            [
             'Select',
             'CheckboxGroup',
             'RadioGroup',
@@ -230,8 +176,7 @@ export default defineComponent({
             'Cascader',
             'AutoComplete',
           ].includes(formConfig.currentItem.component)
-          "
+          " label="选项"
-          label="选项"
         >
           <FormOptions />
         </FormItem>

src/components/FormDesign/src/components/VFormDesign/components/FormItemColumnProps.vue

@@ -1,45 +1,20 @@
 <!--
  * @Description: 表单项属性
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue'
+import { Empty, Form, FormItem } from 'ant-design-vue'
-import { Checkbox, Empty, Form, FormItem, Input, Select, Slider, Switch } from 'ant-design-vue'
 import { isArray } from 'lodash-es'
 import { baseItemColumnProps } from '../config/formItemPropsConfig'
 
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
-import RuleProps from './RuleProps.vue'
 
-export default defineComponent({
-  name: 'FormItemProps',
-  components: {
-    RuleProps,
-    Empty,
-    Input,
-    Form,
-    FormItem,
-    Switch,
-    Checkbox,
-    Select,
-    Slider,
-  },
-  // props: {} as PropsOptions,
-
-  setup() {
 const { formConfig } = useFormDesignState()
-    const showProps = (exclude: string[] | undefined) => {
+function showProps(exclude: string[] | undefined) {
   if (!exclude)
     return true
 
   return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true
 }
-    return {
-      baseItemColumnProps,
-      formConfig,
-      showProps,
-    }
-  },
-})
 </script>
 
 <template>
@@ -50,11 +25,8 @@ export default defineComponent({
         <div v-for="item of baseItemColumnProps" :key="item.name">
           <FormItem v-if="showProps(item.exclude)" :label="item.label">
             <component
-              v-bind="item.componentProps"
+              v-bind="item.componentProps" :is="item.component" v-if="formConfig.currentItem.colProps"
-              :is="item.component"
+              v-model:value="formConfig.currentItem.colProps[item.name]" class="component-props"
-              v-if="formConfig.currentItem.colProps"
-              v-model:value="formConfig.currentItem.colProps[item.name]"
-              class="component-props"
             />
           </FormItem>
         </div>

src/components/FormDesign/src/components/VFormDesign/components/FormItemProps.vue

@@ -1,8 +1,8 @@
 <!--
  * @Description: 表单项属性，控件属性面板
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue'
+import { computed, watch } from 'vue'
 import {
   Checkbox,
   Col,
@@ -10,9 +10,6 @@ import {
   Form,
   FormItem,
   Input,
-  RadioGroup,
-  Select,
-  Slider,
   Switch,
 } from 'ant-design-vue'
 import { isArray } from 'lodash-es'
@@ -26,24 +23,6 @@ import {
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import RuleProps from './RuleProps.vue'
 
-export default defineComponent({
-  name: 'FormItemProps',
-  components: {
-    RuleProps,
-    Empty,
-    Input,
-    Form,
-    FormItem,
-    Switch,
-    Checkbox,
-    Select,
-    Slider,
-    Col,
-    RadioGroup,
-  },
-  // props: {} as PropsOptions,
-
-  setup() {
 const { formConfig } = useFormDesignState()
 
 watch(
@@ -59,7 +38,7 @@ export default defineComponent({
   },
   { deep: true, immediate: true },
 )
-    const showProps = (exclude: string[] | undefined) => {
+function showProps(exclude: string[] | undefined) {
   if (!exclude)
     return true
 
@@ -71,17 +50,6 @@ export default defineComponent({
     return showProps(item.exclude)
   })
 })
-
-    return {
-      baseFormItemProps,
-      advanceFormItemProps,
-      advanceFormItemColProps,
-      formConfig,
-      controlPropsList,
-      showProps,
-    }
-  },
-})
 </script>
 
 <template>

src/components/FormDesign/src/components/VFormDesign/components/FormNode.vue

@@ -1,42 +1,29 @@
 <!--
  * @Description: 拖拽节点控件
 -->
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue'
-import { defineComponent, reactive, toRefs } from 'vue'
 import type { IVFormComponent } from '../../../typings/v-form-component'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import VFormItem from '../../VFormItem/index.vue'
 import FormNodeOperate from './FormNodeOperate.vue'
 
-// import VFormItem from '../../VFormItem/vFormItem.vue';
+const props = defineProps(
-export default defineComponent({
+  { 
-  name: 'FormNode',
-  components: {
-    VFormItem,
-    FormNodeOperate,
-  },
-  props: {
     schema: {
       type: Object as PropType<IVFormComponent>,
       required: true,
     }, 
   },
-  setup(props) {
+  
+)
+
 const { formConfig, formDesignMethods } = useFormDesignState()
-    const state = reactive({})
 // 获取 formDesignMethods
-    const handleSelectItem = () => {
+function handleSelectItem() {
   // 调用 formDesignMethods
   formDesignMethods.handleSetSelectItem(props.schema)
 }
-    return {
-      ...toRefs(state),
-      handleSelectItem,
-      formConfig,
-    }
-  },
-})
 </script>
 
 <template>

src/components/FormDesign/src/components/VFormDesign/components/LayoutItem.vue

@@ -3,9 +3,9 @@
  * 千万不要在template下面的第一行加注释，因为这里拖动的第一个元素
 -->
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue'
-import { computed, defineComponent, reactive, toRefs } from 'vue'
+import { computed } from 'vue'
 import draggable from 'vuedraggable'
 import { Col, Row } from 'ant-design-vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
@@ -13,16 +13,8 @@ import type { IVFormComponent } from '../../../typings/v-form-component'
 import FormNode from './FormNode.vue'
 import FormNodeOperate from './FormNodeOperate.vue'
 
-export default defineComponent({
+const props = defineProps(
-  name: 'LayoutItem',
+  {
-  components: {
-    FormNode,
-    FormNodeOperate,
-    Draggable: draggable,
-    Row,
-    Col,
-  },
-  props: {
     schema: {
       type: Object as PropType<IVFormComponent>,
       required: true,
@@ -32,13 +24,13 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['dragStart', 'handleColAdd', 'handle-copy', 'handle-delete'],
+)
-  setup(props) {
+
-    const {
+const emit = defineEmits(['dragStart', 'handleColAdd', 'handle-copy', 'handle-delete'])
-      formDesignMethods: { handleSetSelectItem },
+
-      formConfig,
+const Draggable = draggable
-    } = useFormDesignState()
+
-    const state = reactive({})
+const { formDesignMethods: { handleSetSelectItem }, formConfig } = useFormDesignState()
 const colPropsComputed = computed(() => {
   const { colProps = {} } = props.schema
   return colProps
@@ -50,16 +42,6 @@ export default defineComponent({
 const layoutTag = computed(() => {
   return formConfig.value.layout === 'horizontal' ? 'Col' : 'div'
 })
-
-    return {
-      ...toRefs(state),
-      colPropsComputed,
-      handleSetSelectItem,
-      layoutTag,
-      list1,
-    }
-  },
-})
 </script>
 
 <template>
@@ -87,8 +69,8 @@ export default defineComponent({
                   class="drag-move"
                   :schema="element"
                   :current-item="currentItem"
-                  @handle-copy="$emit('handle-copy')"
+                  @handle-copy="emit('handle-copy')"
-                  @handle-delete="$emit('handle-delete')"
+                  @handle-delete="emit('handle-delete')"
                 />
               </template>
             </Draggable>
@@ -102,8 +84,8 @@ export default defineComponent({
       :key="schema.key"
       :schema="schema"
       :current-item="currentItem"
-      @handle-copy="$emit('handle-copy')"
+      @handle-copy="emit('handle-copy')"
-      @handle-delete="$emit('handle-delete')"
+      @handle-delete="emit('handle-delete')"
     />
   </Col>
 </template>

src/components/FormDesign/src/components/VFormDesign/components/PreviewCode.vue

@@ -1,16 +1,12 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive, ref, toRefs, unref } from 'vue'
+import { ref, unref } from 'vue'
 import { CodeEditor, MODE } from '@/components/CodeEditor'
 
 import { useCopyToClipboard } from '@/hooks/web/useCopyToClipboard'
 import { useMessage } from '@/hooks/web/useMessage'
 
-export default defineComponent({
+const props = defineProps(
-  name: 'PreviewCode',
+  {
-  components: {
-    CodeEditor,
-  },
-  props: {
     fileFormat: {
       type: String,
       default: 'json',
@@ -20,14 +16,11 @@ export default defineComponent({
       default: '',
     },
   },
-  setup(props) {
+)
-    const state = reactive({
-      open: false,
-    })
 
 const myEditor = ref(null)
 
-    const exportData = (data: string, fileName = `file.${props.fileFormat}`) => {
+function exportData(data: string, fileName = `file.${props.fileFormat}`) {
   let content = 'data:text/csv;charset=utf-8,'
   content += data
   const encodedUri = encodeURI(content)
@@ -37,13 +30,13 @@ export default defineComponent({
   actions.click()
 }
 
-    const handleExportJson = () => {
+function handleExportJson() {
   exportData(props.editorJson)
 }
 const { clipboardRef, copiedRef } = useCopyToClipboard()
 const { createMessage } = useMessage()
 
-    const handleCopyJson = () => {
+function handleCopyJson() {
   // 复制数据
   const value = props.editorJson
   if (!value) {
@@ -54,17 +47,6 @@ export default defineComponent({
   if (unref(copiedRef))
     createMessage.warning('复制成功！')
 }
-
-    return {
-      ...toRefs(state),
-      myEditor,
-      exportData,
-      handleCopyJson,
-      handleExportJson,
-      MODE,
-    }
-  },
-})
 </script>
 
 <template>

src/components/FormDesign/src/components/VFormDesign/modules/CollapseItem.vue

@@ -1,16 +1,13 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, reactive } from 'vue'
 import draggable from 'vuedraggable'
 import type { IVFormComponent } from '../../../typings/v-form-component'
 import { Icon } from '@/components/Icon'
 import { useDesign } from '@/hooks/web/useDesign'
 
-export default defineComponent({
+const props = defineProps(
-  name: 'CollapseItem',
+  {
-  components: { Draggable: draggable, Icon },
-  props: {
     list: {
-      type: [Array],
+      type: Array as unknown as any[],
       default: () => [],
     },
     handleListPush: {
@@ -18,24 +15,23 @@ export default defineComponent({
       default: null,
     },
   },
-  setup(props, { emit }) {
+)
+const emit = defineEmits(['start', 'add-attrs', 'handle-list-push'])
+const Draggable = draggable
+
 const { prefixCls } = useDesign('form-design-collapse-item')
 
-    const state = reactive({})
+function handleStart(e: any, list1: IVFormComponent[]) {
-    const handleStart = (e: any, list1: IVFormComponent[]) => {
   emit('start', list1[e.oldIndex].component)
 }
-    const handleAdd = (e: any) => {
+function handleAdd(e: any) {
   console.log(e)
 }
 // https://github.com/SortableJS/vue.draggable.next
 // https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/custom-clone.vue
-    const cloneItem = (one) => {
+function cloneItem(one) {
   return props.handleListPush(one)
 }
-    return { prefixCls, state, handleStart, handleAdd, cloneItem }
-  },
-})
 </script>
 
 <template>
@@ -57,8 +53,8 @@ export default defineComponent({
       <template #item="{ element, index }">
         <li
           class="bs-box text-ellipsis"
-          @dragstart="$emit('add-attrs', list, index)"
+          @dragstart="emit('add-attrs', list, index)"
-          @click="$emit('handle-list-push', element)"
+          @click="emit('handle-list-push', element)"
         >
           <!-- <svg v-if="element.icon.indexOf('icon-') > -1" class="icon" aria-hidden="true">
             <use :xlink:href="`#${element.icon}`" />

src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue

@@ -2,7 +2,7 @@
  * @Description: 中间表单布局面板
  * https://github.com/SortableJS/vue.draggable.next/issues/138
 -->
-<script lang="ts">
+<script lang="ts" setup>
 import draggable from 'vuedraggable'
 import { computed, defineComponent } from 'vue'
 import { cloneDeep } from 'lodash-es'
@@ -10,23 +10,17 @@ import { Empty, Form } from 'ant-design-vue'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
 import LayoutItem from '../components/LayoutItem.vue'
 
-export default defineComponent({
+const emit = defineEmits(['handleSetSelectItem'])
-  name: 'FormComponentPanel',
+
-  components: {
+const  Draggable = draggable
-    LayoutItem,
+
-    Draggable: draggable,
-    Form,
-    Empty,
-  },
-  emits: ['handleSetSelectItem'],
-  setup(_, { emit }) {
 const { formConfig } = useFormDesignState()
 
 /**
  * 拖拽完成事件
  * @param newIndex
  */
-    const addItem = ({ newIndex }: any) => {
+function addItem({ newIndex }: any) {
   formConfig.value.schemas = formConfig.value.schemas || []
 
   const schemas = formConfig.value.schemas
@@ -38,7 +32,7 @@ export default defineComponent({
  * 拖拽开始事件
  * @param e {Object} 事件对象
  */
-    const handleDragStart = (e: any) => {
+function handleDragStart(e: any) {
   emit('handleSetSelectItem', formConfig.value.schemas[e.oldIndex])
 }
 
@@ -48,15 +42,6 @@ export default defineComponent({
 const layoutTag = computed(() => {
   return formConfig.value.layout === 'horizontal' ? 'Col' : 'div'
 })
-
-    return {
-      addItem,
-      handleDragStart,
-      formConfig,
-      layoutTag,
-    }
-  },
-})
 </script>
 
 <template>

src/components/FormDesign/src/components/VFormDesign/modules/PropsPanel.vue

@@ -1,8 +1,8 @@
 <!--
  * @Description: 右侧属性配置面板
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue'
+import { computed } from 'vue'
 import { TabPane, Tabs } from 'ant-design-vue'
 import FormProps from '../components/FormProps.vue'
 import FormItemProps from '../components/FormItemProps.vue'
@@ -15,26 +15,12 @@ type ChangeTabKey = 1 | 2
 export interface IPropsPanel {
   changeTab: (key: ChangeTabKey) => void
 }
-export default defineComponent({
-  name: 'PropsPanel',
-  components: {
-    FormProps,
-    FormItemProps,
-    ComponentProps,
-    ComponentColumnProps,
-    Tabs,
-    TabPane,
-  },
-  setup() {
 const { formConfig } = useFormDesignState()
 const slotProps = computed(() => {
   return customComponents.find(
     item => item.component === formConfig.value.currentItem?.component,
   )
 })
-    return { formConfig, customComponents, slotProps }
-  },
-})
 </script>
 
 <template>

src/components/FormDesign/src/components/VFormDesign/modules/Toolbar.vue

@@ -1,8 +1,8 @@
 <!--
  * @Description: 工具栏
 -->
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, inject, reactive, toRefs } from 'vue'
+import { inject, reactive } from 'vue'
 import type { UseRefHistoryReturn } from '@vueuse/core'
 import { Divider, Tooltip } from 'ant-design-vue'
 import type { IFormConfig } from '../../../typings/v-form-component'
@@ -15,14 +15,6 @@ interface IToolbarsConfig {
   event: string
 }
 
-export default defineComponent({
-  name: 'OperatingArea',
-  components: {
-    Tooltip,
-    Icon,
-    Divider,
-  },
-  setup() {
 const state = reactive<{
   toolbarsConfigs: IToolbarsConfig[]
 }>({
@@ -68,9 +60,6 @@ export default defineComponent({
 const historyRef = inject('historyReturn') as UseRefHistoryReturn<IFormConfig, IFormConfig>
 
 const { undo, redo, canUndo, canRedo } = historyRef
-    return { ...toRefs(state), undo, redo, canUndo, canRedo }
-  },
-})
 </script>
 
 <template>
@@ -78,7 +67,7 @@ export default defineComponent({
     <!-- 头部操作按钮区域 start -->
     <!-- 操作左侧区域 start -->
     <div class="left-btn-box">
-      <Tooltip v-for="item in toolbarsConfigs" :key="item.icon" :title="item.title">
+      <Tooltip v-for="item in state.toolbarsConfigs" :key="item.icon" :title="item.title">
         <a class="toolbar-text" @click="$emit(item.event)">
           <Icon :icon="item.icon" />
         </a>

src/layouts/default/header/components/lock/LockModal.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { useDesign } from '@/hooks/web/useDesign'
 import { BasicForm, useForm } from '@/components/Form'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import { useUserStore } from '@/store/modules/user'
@@ -11,7 +10,6 @@ import headerImg from '@/assets/images/header.jpg'
 defineOptions({ name: 'LockModal' })
 
 const { t } = useI18n()
-const { prefixCls } = useDesign('header-lock-modal')
 const userStore = useUserStore()
 const lockStore = useLockStore()
 
@@ -52,18 +50,18 @@ const avatar = computed(() => {
 </script>
 
 <template>
-  <BasicModal :footer="null" width="25%" :title="t('layout.header.lockScreen')" v-bind="$attrs" :class="prefixCls" @register="register">
+  <BasicModal :footer="null" width="25%" :title="t('layout.header.lockScreen')" v-bind="$attrs" @register="register">
-    <div :class="`${prefixCls}__entry`">
+    <div class="relative rounded-10 px-8 pb-8 pt-30">
-      <div :class="`${prefixCls}__header`">
+      <div class="absolute left-[calc(50%-45px)] top-0 w-auto text-center">
-        <img :src="avatar" :class="`${prefixCls}__header-img`">
+        <img :src="avatar" class="w-18 rounded-50%">
-        <p :class="`${prefixCls}__header-name`">
+        <p class="mt-2">
           {{ getRealName }}
         </p>
       </div>
 
       <BasicForm @register="registerForm" />
 
-      <div :class="`${prefixCls}__footer`">
+      <div class="mt-4 text-center">
         <a-button type="primary" block class="mt-2" @click="handleLock">
           {{ t('layout.header.lockScreenBtn') }}
         </a-button>
@@ -71,38 +69,3 @@ const avatar = computed(() => {
     </div>
   </BasicModal>
 </template>
-
-<style lang="less">
-@prefix-cls: ~'@{namespace}-header-lock-modal';
-
-.@{prefix-cls} {
-  &__entry {
-    position: relative;
-    //height: 240px;
-    padding: 130px 30px 30px;
-    border-radius: 10px;
-  }
-
-  &__header {
-    position: absolute;
-    top: 0;
-    left: calc(50% - 45px);
-    width: auto;
-    text-align: center;
-
-    &-img {
-      width: 70px;
-      border-radius: 50%;
-    }
-
-    &-name {
-      margin-top: 5px;
-    }
-  }
-
-  &__footer {
-    margin-top: 16px;
-    text-align: center;
-  }
-}
-</style>

src/layouts/default/sider/MixSider.vue

@@ -1,7 +1,8 @@
-<script lang="ts">
+<script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue'
+import { computed, onMounted, ref, unref, watch } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
+import { onClickOutside } from '@vueuse/core'
 import LayoutTrigger from '../trigger/index.vue'
 import { useDragLine } from './useLayoutSider'
 import type { Menu } from '@/router/types'
@@ -16,24 +17,10 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useGo } from '@/hooks/web/usePage'
 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '@/enums/appEnum'
-import clickOutside from '@/directives/clickOutside'
 import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '@/router/menus'
 import { listenerRouteChange } from '@/logics/mitt/routeChange'
 
-export default defineComponent({
+const wrap = ref(null)
-  name: 'LayoutMixSider',
-  components: {
-    ScrollContainer,
-    AppLogo,
-    SimpleMenu,
-    Icon,
-    LayoutTrigger,
-    SimpleMenuTag,
-  },
-  directives: {
-    clickOutside,
-  },
-  setup() {
 const menuModules = ref<Menu[]>([])
 const activePath = ref('')
 const childrenMenus = ref<Menu[]>([])
@@ -235,38 +222,15 @@ export default defineComponent({
     openMenu.value = false
 }
 
-    return {
+onClickOutside(wrap, () => {
-      t,
+  handleClickOutside()
-      prefixCls,
-      menuModules,
-      handleModuleClick,
-      activePath,
-      childrenMenus,
-      getShowDragBar,
-      handleMenuClick,
-      getMenuStyle,
-      handleClickOutside,
-      sideRef,
-      dragBarRef,
-      title,
-      openMenu,
-      getMenuTheme,
-      getItemEvents,
-      getMenuEvents,
-      getDomStyle,
-      handleFixedMenu,
-      getMixSideFixed,
-      getWrapStyle,
-      getCollapsed,
-    }
-  },
 })
 </script>
 
 <template>
   <div :class="`${prefixCls}-dom`" :style="getDomStyle" />
   <div
-    v-click-outside="handleClickOutside"
+    ref="wrap"
     :style="getWrapStyle"
     :class="[
       prefixCls,