👣 重构底层

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

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

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

@@ -50,10 +50,10 @@
 </script>
 
 <template>
-  <LayoutLockPage />
-  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
-  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
-  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
+  <LayoutLockPage/>
+  <BackTop v-if="getUseOpenBackTop" :target="getTarget"/>
+  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls"/>
+  <SessionTimeoutLogin v-if="getIsSessionTimeout"/>
 </template>
 
 <style lang="less">

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,8 +1,8 @@
 <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" />
+    <LayoutHeader v-if="getShowInsetHeaderRef"/>
+    <MultipleTabs v-if="getShowTabs"/>
   </div>
 </template>
 <script lang="ts">

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/FullScreen.vue

@@ -1,8 +1,8 @@
 <template>
   <Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5">
     <span @click="toggle">
-      <FullscreenOutlined v-if="!isFullscreen" />
-      <FullscreenExitOutlined v-else />
+      <FullscreenOutlined v-if="!isFullscreen"/>
+      <FullscreenExitOutlined v-else/>
     </span>
   </Tooltip>
 </template>

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

@@ -8,16 +8,20 @@
   >
     <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>
       </div>
 
-      <BasicForm @register="registerForm" />
+      <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>
@@ -26,13 +26,13 @@
           </template>
 
           <template #avatar>
-            <a-avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
+            <a-avatar v-if="item.avatar" class="avatar" :src="item.avatar"/>
             <span v-else> {{ item.avatar }}</span>
           </template>
 
           <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

@@ -2,7 +2,7 @@
   <div :class="prefixCls">
     <Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
       <Badge :count="count" dot :numberStyle="numberStyle">
-        <BellOutlined />
+        <BellOutlined/>
       </Badge>
       <template #content>
         <Tabs>
@@ -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/DropMenuItem.vue

@@ -1,7 +1,7 @@
 <template>
   <MenuItem :key="itemKey">
     <span class="flex items-center">
-      <Icon :icon="icon" class="mr-1" />
+      <Icon :icon="icon" class="mr-1"/>
       <span>{{ text }}</span>
     </span>
   </MenuItem>

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 }}
@@ -25,7 +25,7 @@
       </Menu>
     </template>
   </Dropdown>
-  <LockAction @register="register" />
+  <LockAction @register="register"/>
 </template>
 <script lang="ts">
   import { Dropdown, Menu } from 'ant-design-vue';

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

@@ -16,12 +16,12 @@
         :theme="getHeaderTheme"
         :sider="false"
       />
-      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
+      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme"/>
     </div>
     <!-- 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,11 +33,11 @@
 
     <!-- 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`" />
+      <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`"/>
 
-      <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
+      <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`"/>
 
       <AppLocalePicker
         v-if="getShowLocalePicker"
@@ -46,9 +46,9 @@
         :class="`${prefixCls}-action__item`"
       />
 
-      <UserDropDown :theme="getHeaderTheme" />
+      <UserDropDown :theme="getHeaderTheme"/>
 
-      <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
+      <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`"/>
     </div>
   </Header>
 </template>

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

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

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

@@ -1,17 +1,21 @@
 <template>
   <div :class="prefixCls">
     <a-button type="primary" block @click="handleCopy">
-      <CopyOutlined class="mr-2" />
+      <CopyOutlined class="mr-2"/>
       {{ t('layout.setting.copyBtn') }}
     </a-button>
 
-    <a-button color="warning" block @click="handleResetSetting" class="my-3">
-      <RedoOutlined class="mr-2" />
+    <a-button color="warning"
+              block
+              class="my-3"
+              @click="handleResetSetting"
+    >
+      <RedoOutlined class="mr-2"/>
       {{ t('common.resetText') }}
     </a-button>
 
     <a-button color="error" block @click="handleClearAndRedo">
-      <RedoOutlined class="mr-2" />
+      <RedoOutlined class="mr-2"/>
       {{ t('layout.setting.clearBtn') }}
     </a-button>
   </div>

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,8 +9,9 @@
           },
         ]"
         :style="{ background: color }"
+        @click="handleClick(color)"
       >
-        <CheckOutlined />
+        <CheckOutlined/>
       </span>
     </template>
   </div>

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/setting/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div @click="openDrawer(true)">
-    <Icon icon="ion:settings-outline" />
-    <SettingDrawer @register="register" />
+    <Icon icon="ion:settings-outline"/>
+    <SettingDrawer @register="register"/>
   </div>
 </template>
 <script lang="ts">

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,15 +14,15 @@
     :collapsed="getCollapsed"
     :collapsedWidth="getCollapsedWidth"
     :theme="getMenuTheme"
-    @breakpoint="onBreakpointChange"
     :trigger="getTrigger"
     v-bind="getTriggerAttr"
+    @breakpoint="onBreakpointChange"
   >
-    <template #trigger v-if="getShowTrigger">
-      <LayoutTrigger />
+    <template v-if="getShowTrigger" #trigger>
+      <LayoutTrigger/>
     </template>
-    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
-    <DragBar ref="dragBarRef" />
+    <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType"/>
+    <DragBar ref="dragBarRef"/>
   </Sider>
 </template>
 <script lang="ts">

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"
@@ -13,24 +13,24 @@
     ]"
     v-bind="getMenuEvents"
   >
-    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
+    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`"/>
 
-    <LayoutTrigger :class="`${prefixCls}-trigger`" />
+    <LayoutTrigger :class="`${prefixCls}-trigger`"/>
 
     <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 />
+          <SimpleMenuTag :item="item" collapseParent dot/>
           <Icon
             :class="`${prefixCls}-module__icon`"
             :size="getCollapsed ? 16 : 20"
@@ -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/sider/index.vue

@@ -8,10 +8,10 @@
     :visible="!getCollapsed"
     @close="handleClose"
   >
-    <Sider />
+    <Sider/>
   </Drawer>
-  <MixSider v-else-if="getIsMixSidebar" />
-  <Sider v-else />
+  <MixSider v-else-if="getIsMixSidebar"/>
+  <Sider v-else/>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';

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

@@ -1,6 +1,6 @@
 <template>
   <span :class="`${prefixCls}__extra-fold`" @click="handleFold">
-    <Icon :icon="getIcon" />
+    <Icon :icon="getIcon"/>
   </span>
 </template>
 <script lang="ts">

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

@@ -1,10 +1,10 @@
 <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">
-      <Icon icon="ion:chevron-down" />
+    <span v-else :class="`${prefixCls}__extra-quick`" @click="handleContext">
+      <Icon icon="ion:chevron-down"/>
     </span>
   </Dropdown>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <span :class="`${prefixCls}__extra-redo`" @click="handleRedo">
-    <RedoOutlined :spin="loading" />
+    <RedoOutlined :spin="loading"/>
   </span>
 </template>
 <script lang="ts">

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

@@ -13,15 +13,15 @@
       <template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
         <TabPane :closable="!(item && item.meta && item.meta.affix)">
           <template #tab>
-            <TabContent :tabItem="item" />
+            <TabContent :tabItem="item"/>
           </template>
         </TabPane>
       </template>
 
-      <template #tabBarExtraContent v-if="getShowRedo || getShowQuick">
-        <TabRedo v-if="getShowRedo" />
-        <TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
-        <FoldButton v-if="getShowFold" />
+      <template v-if="getShowRedo || getShowQuick" #tabBarExtraContent>
+        <TabRedo v-if="getShowRedo"/>
+        <TabContent v-if="getShowQuick" isExtra :tabItem="$route"/>
+        <FoldButton v-if="getShowFold"/>
       </template>
     </Tabs>
   </div>

kicc-ui/src/layouts/default/trigger/HeaderTrigger.vue

@@ -1,6 +1,6 @@
 <template>
   <span :class="[prefixCls, theme]" @click="toggleCollapsed">
-    <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else />
+    <MenuUnfoldOutlined v-if="getCollapsed"/> <MenuFoldOutlined v-else/>
   </span>
 </template>
 <script lang="ts">

kicc-ui/src/layouts/default/trigger/SiderTrigger.vue

@@ -1,7 +1,7 @@
 <template>
   <div @click.stop="toggleCollapsed">
-    <DoubleRightOutlined v-if="getCollapsed" />
-    <DoubleLeftOutlined v-else />
+    <DoubleRightOutlined v-if="getCollapsed"/>
+    <DoubleLeftOutlined v-else/>
   </div>
 </template>
 <script lang="ts">

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

@@ -1,6 +1,6 @@
 <template>
-  <SiderTrigger v-if="sider" />
-  <HeaderTrigger v-else :theme="theme" />
+  <SiderTrigger v-if="sider"/>
+  <HeaderTrigger v-else :theme="theme"/>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';

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>