👣 重构底层

kicc-ui/src/layouts/default/content/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[prefixCls, getLayoutContentMode]" v-loading="getOpenPageLoading && getPageLoading">
+  <div v-loading="getOpenPageLoading && getPageLoading" :class="[prefixCls, getLayoutContentMode]">
     <PageLayout/>
   </div>
 </template>

kicc-ui/src/layouts/default/footer/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
+  <Footer v-if="getShowLayoutFooter" ref="footerRef" :class="prefixCls">
     <div>Copyright &copy;2022 康来生物有限公司</div>
   </Footer>
 </template>

kicc-ui/src/layouts/default/header/MultipleHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
+  <div v-if="getIsShowPlaceholderDom" :style="getPlaceholderDomStyle"/>
   <div :style="getWrapStyle" :class="getClass">
     <LayoutHeader v-if="getShowInsetHeaderRef"/>
     <MultipleTabs v-if="getShowTabs"/>

kicc-ui/src/layouts/default/header/components/Breadcrumb.vue

@@ -2,7 +2,7 @@
   <div :class="[prefixCls, `${prefixCls}--${theme}`]">
     <a-breadcrumb :routes="routes">
       <template #itemRender="{ route, routes: routesMatched, paths }">
-        <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
+        <Icon v-if="getShowBreadCrumbIcon && getIcon(route)" :icon="getIcon(route)"/>
         <span v-if="!hasRedirect(routesMatched, route)">
           {{ t(route.name || route.meta.title) }}
         </span>

kicc-ui/src/layouts/default/header/components/lock/LockModal.vue

@@ -8,7 +8,7 @@
   >
     <div :class="`${prefixCls}__entry`">
       <div :class="`${prefixCls}__header`">
-        <img :src="avatar" :class="`${prefixCls}__header-img`" />
+        <img :src="avatar" :class="`${prefixCls}__header-img`">
         <p :class="`${prefixCls}__header-name`">
           {{ getNickName }}
         </p>
@@ -17,7 +17,11 @@
       <BasicForm @register="registerForm"/>
 
       <div :class="`${prefixCls}__footer`">
-        <a-button type="primary" block class="mt-2" @click="handleLock">
+        <a-button type="primary"
+                  block
+                  class="mt-2"
+                  @click="handleLock"
+        >
           {{ t('layout.header.lockScreenBtn') }}
         </a-button>
       </div>

kicc-ui/src/layouts/default/header/components/notify/NoticeList.vue

@@ -6,7 +6,6 @@
           <template #title>
             <div class="title">
               <a-typography-paragraph
-                @click="handleTitleClick(item)"
                 style="width: 100%; margin-bottom: 0 !important"
                 :style="{ cursor: isTitleClickable ? 'pointer' : '' }"
                 :delete="!!item.titleDelete"
@@ -16,8 +15,9 @@
                     : false
                 "
                 :content="item.title"
+                @click="handleTitleClick(item)"
               />
-              <div class="extra" v-if="item.extra">
+              <div v-if="item.extra" class="extra">
                 <a-tag class="tag" :color="item.color">
                   {{ item.extra }}
                 </a-tag>
@@ -32,7 +32,7 @@
 
           <template #description>
             <div>
-              <div class="description" v-if="item.description">
+              <div v-if="item.description" class="description">
                 <a-typography-paragraph
                   style="width: 100%; margin-bottom: 0 !important"
                   :ellipsis="

kicc-ui/src/layouts/default/header/components/notify/index.vue

@@ -13,8 +13,8 @@
                 <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
               </template>
               <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
-              <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
-              <NoticeList :list="item.list" v-else />
+              <NoticeList v-if="item.key === '1'" :list="item.list" @title-click="onNoticeClick"/>
+              <NoticeList v-else :list="item.list"/>
             </TabPane>
           </template>
         </Tabs>

kicc-ui/src/layouts/default/header/components/user-dropdown/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Dropdown placement="bottomLeft" :trigger="['click', 'hover']" :overlayClassName="`${prefixCls}-dropdown-overlay`">
     <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
-      <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
+      <img :class="`${prefixCls}__header`" :src="getUserInfo.avatar">
       <span :class="`${prefixCls}__info hidden md:block`">
         <span :class="`${prefixCls}__name  `" class="truncate">
           {{ getUserInfo.nickName }}

kicc-ui/src/layouts/default/header/index.vue

@@ -21,7 +21,7 @@
     <!-- left end -->
 
     <!-- menu start -->
-    <div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile">
+    <div v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
       <LayoutMenu
         :isHorizontal="true"
         :theme="getHeaderTheme"
@@ -33,7 +33,7 @@
 
     <!-- action  -->
     <div :class="`${prefixCls}-action`">
-      <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
+      <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `"/>
 
       <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`"/>
 

kicc-ui/src/layouts/default/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout :class="prefixCls" v-bind="lockEvents">
     <LayoutFeatures/>
-    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
+    <LayoutHeader v-if="getShowFullHeaderRef" fixed/>
     <Layout :class="[layoutClass]">
       <LayoutSideBar v-if="getShowSidebar || getIsMobile"/>
       <Layout :class="`${prefixCls}-main`">

kicc-ui/src/layouts/default/setting/components/SelectItem.vue

@@ -4,10 +4,10 @@
     <Select
       v-bind="getBindValue"
       :class="`${prefixCls}-select`"
-      @change="handleChange"
       :disabled="disabled"
       size="small"
       :options="options"
+      @change="handleChange"
     />
   </div>
 </template>

kicc-ui/src/layouts/default/setting/components/SettingFooter.vue

@@ -5,7 +5,11 @@
       {{ t('layout.setting.copyBtn') }}
     </a-button>
 
-    <a-button color="warning" block @click="handleResetSetting" class="my-3">
+    <a-button color="warning"
+              block
+              class="my-3"
+              @click="handleResetSetting"
+    >
       <RedoOutlined class="mr-2"/>
       {{ t('common.resetText') }}
     </a-button>

kicc-ui/src/layouts/default/setting/components/SwitchItem.vue

@@ -3,10 +3,10 @@
     <span> {{ title }}</span>
     <Switch
       v-bind="getBindValue"
-      @change="handleChange"
       :disabled="disabled"
       :checkedChildren="t('layout.setting.on')"
       :unCheckedChildren="t('layout.setting.off')"
+      @change="handleChange"
     />
   </div>
 </template>

kicc-ui/src/layouts/default/setting/components/ThemeColorPicker.vue

@@ -2,7 +2,6 @@
   <div :class="prefixCls">
     <template v-for="color in colorList || []" :key="color">
       <span
-        @click="handleClick(color)"
         :class="[
           `${prefixCls}__item`,
           {
@@ -10,6 +9,7 @@
           },
         ]"
         :style="{ background: color }"
+        @click="handleClick(color)"
       >
         <CheckOutlined/>
       </span>

kicc-ui/src/layouts/default/setting/components/TypePicker.vue

@@ -3,7 +3,6 @@
     <template v-for="item in menuTypeList || []" :key="item.title">
       <Tooltip :title="item.title" placement="bottom">
         <div
-          @click="handler(item)"
           :class="[
             `${prefixCls}__item`,
             `${prefixCls}__item--${item.type}`,
@@ -11,8 +10,9 @@
               [`${prefixCls}__item--active`]: def === item.type,
             },
           ]"
+          @click="handler(item)"
         >
-          <div class="mix-sidebar"></div>
+          <div class="mix-sidebar"/>
         </div>
       </Tooltip>
     </template>

kicc-ui/src/layouts/default/sider/DragBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="getClass" :style="getDragBarStyle"></div>
+  <div :class="getClass" :style="getDragBarStyle"/>
 </template>
 <script lang="ts">
   import { defineComponent, computed, unref } from 'vue';

kicc-ui/src/layouts/default/sider/LayoutSider.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     v-if="getMenuFixed && !getIsMobile"
-    :style="getHiddenDomStyle"
     v-show="showClassSideBarRef"
-  ></div>
+    :style="getHiddenDomStyle"
+  />
   <Sider
     v-show="showClassSideBarRef"
     ref="sideRef"
@@ -14,11 +14,11 @@
     :collapsed="getCollapsed"
     :collapsedWidth="getCollapsedWidth"
     :theme="getMenuTheme"
-    @breakpoint="onBreakpointChange"
     :trigger="getTrigger"
     v-bind="getTriggerAttr"
+    @breakpoint="onBreakpointChange"
   >
-    <template #trigger v-if="getShowTrigger">
+    <template v-if="getShowTrigger" #trigger>
       <LayoutTrigger/>
     </template>
     <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType"/>

kicc-ui/src/layouts/default/sider/MixSider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`${prefixCls}-dom`" :style="getDomStyle"></div>
+  <div :class="`${prefixCls}-dom`" :style="getDomStyle"/>
   <div
     v-click-outside="handleClickOutside"
     :style="getWrapStyle"
@@ -20,15 +20,15 @@
     <ScrollContainer>
       <ul :class="`${prefixCls}-module`">
         <li
+          v-for="item in menuModules"
+          v-bind="getItemEvents(item)"
+          :key="item.path"
           :class="[
             `${prefixCls}-module__item `,
             {
               [`${prefixCls}-module__item--active`]: item.path === activePath,
             },
           ]"
-          v-bind="getItemEvents(item)"
-          v-for="item in menuModules"
-          :key="item.path"
         >
           <SimpleMenuTag :item="item" collapseParent dot/>
           <Icon
@@ -43,7 +43,7 @@
       </ul>
     </ScrollContainer>
 
-    <div :class="`${prefixCls}-menu-list`" ref="sideRef" :style="getMenuStyle">
+    <div ref="sideRef" :class="`${prefixCls}-menu-list`" :style="getMenuStyle">
       <div
         v-show="openMenu"
         :class="[
@@ -71,9 +71,9 @@
       </ScrollContainer>
       <div
         v-show="getShowDragBar && openMenu"
-        :class="`${prefixCls}-drag-bar`"
         ref="dragBarRef"
-      ></div>
+        :class="`${prefixCls}-drag-bar`"
+      />
     </div>
   </div>
 </template>

kicc-ui/src/layouts/default/tabs/components/TabContent.vue

@@ -1,9 +1,9 @@
 <template>
   <Dropdown :dropMenuList="getDropMenuList" :trigger="getTrigger" @menuEvent="handleMenuEvent">
-    <div :class="`${prefixCls}__info`" @contextmenu="handleContext" v-if="getIsTabs">
+    <div v-if="getIsTabs" :class="`${prefixCls}__info`" @contextmenu="handleContext">
       <span class="ml-1">{{ getTitle }}</span>
     </div>
-    <span :class="`${prefixCls}__extra-quick`" v-else @click="handleContext">
+    <span v-else :class="`${prefixCls}__extra-quick`" @click="handleContext">
       <Icon icon="ion:chevron-down"/>
     </span>
   </Dropdown>

kicc-ui/src/layouts/default/tabs/index.vue

@@ -18,9 +18,9 @@
         </TabPane>
       </template>
 
-      <template #tabBarExtraContent v-if="getShowRedo || getShowQuick">
+      <template v-if="getShowRedo || getShowQuick" #tabBarExtraContent>
         <TabRedo v-if="getShowRedo"/>
-        <TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
+        <TabContent v-if="getShowQuick" isExtra :tabItem="$route"/>
         <FoldButton v-if="getShowFold"/>
       </template>
     </Tabs>

kicc-ui/src/layouts/page/index.vue

@@ -17,7 +17,7 @@
         <keep-alive v-if="openCache" :include="getCaches">
           <component :is="Component" :key="route.fullPath"/>
         </keep-alive>
-        <component v-else :is="Component" :key="route.fullPath"/>
+        <component :is="Component" v-else :key="route.fullPath"/>
       </transition>
     </template>
   </RouterView>