👣 制定开发规则

kicc-ui/.eslintrc.js

@@ -97,5 +97,25 @@ module.exports = defineConfig({
       'endTag': 'never',
       'selfClosingTag': 'never'
     }],
+    'vue/this-in-template': ['error', 'never'],
+    'vue/component-tags-order': ['error', {
+      'order': [ [ 'script', 'template' ], 'style' ]
+    }],
+    'vue/attributes-order': ['error', {
+      'order': [
+        'DEFINITION',
+        'LIST_RENDERING',
+        'CONDITIONALS',
+        'RENDER_MODIFIERS',
+        'GLOBAL',
+        ['UNIQUE', 'SLOT'],
+        'TWO_WAY_BINDING',
+        'OTHER_DIRECTIVES',
+        'OTHER_ATTR',
+        'EVENTS',
+        'CONTENT'
+      ],
+      'alphabetical': false
+    }],
   }
 });

kicc-ui/src/components/Application/src/AppDarkModeToggle.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
     <div :class="`${prefixCls}-inner`"/>
-    <SvgIcon size="14" name="sun" />
-    <SvgIcon size="14" name="moon" />
+    <SvgIcon size="14" name="sun"/>
+    <SvgIcon size="14" name="moon"/>
   </div>
 </template>
 <script lang="ts" setup>

kicc-ui/src/components/Application/src/AppLocalePicker.vue

@@ -4,11 +4,11 @@
     :trigger="['click']"
     :dropMenuList="localeList"
     :selectedKeys="selectedKeys"
-    @menuEvent="handleMenuEvent"
     overlayClassName="app-locale-picker-overlay"
+    @menuEvent="handleMenuEvent"
   >
     <span class="cursor-pointer flex items-center">
-      <Icon icon="ion:language" />
+      <Icon icon="ion:language"/>
       <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
     </span>
   </Dropdown>

kicc-ui/src/components/Application/src/AppLogo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="anticon" :class="getAppLogoClass" @click="goHome">
     <img src="../../../assets/images/logo.svg">
-    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
+    <div v-show="showTitle" class="ml-2 truncate md:opacity-100" :class="getTitleClass">
       {{ title }}
     </div>
   </div>

kicc-ui/src/components/Application/src/search/AppSearchFooter.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="`${prefixCls}`">
-    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined"/>
     <span>{{ t('component.app.toSearch') }}</span>
-    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
-    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-down-outline" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline"/>
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-down-outline"/>
     <span>{{ t('component.app.toNavigate') }}</span>
-    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="mdi:keyboard-esc" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="mdi:keyboard-esc"/>
     <span>{{ t('common.closeText') }}</span>
   </div>
 </template>

kicc-ui/src/components/Application/src/search/AppSearchKeyItem.vue

@@ -1,6 +1,6 @@
 <template>
   <span :class="$attrs.class">
-    <Icon :icon="icon" />
+    <Icon :icon="icon"/>
   </span>
 </template>
 <script lang="ts" setup>

kicc-ui/src/components/Application/src/search/AppSearchModal.vue

@@ -1,18 +1,18 @@
 <template>
   <Teleport to="body">
     <transition name="zoom-fade" mode="out-in">
-      <div :class="getClass" @click.stop v-if="visible">
-        <div :class="`${prefixCls}-content`" v-click-outside="handleClose">
+      <div v-if="visible" :class="getClass" @click.stop>
+        <div v-click-outside="handleClose" :class="`${prefixCls}-content`">
           <div :class="`${prefixCls}-input__wrapper`">
             <a-input
+              ref="inputRef"
               :class="`${prefixCls}-input`"
               :placeholder="t('common.searchText')"
-              ref="inputRef"
               allow-clear
               @change="handleSearch"
             >
               <template #prefix>
-                <SearchOutlined />
+                <SearchOutlined/>
               </template>
             </a-input>
             <span :class="`${prefixCls}-cancel`" @click="handleClose">
@@ -20,37 +20,37 @@
             </span>
           </div>
 
-          <div :class="`${prefixCls}-not-data`" v-show="getIsNotData">
+          <div v-show="getIsNotData" :class="`${prefixCls}-not-data`">
             {{ t('component.app.searchNotData') }}
           </div>
 
-          <ul :class="`${prefixCls}-list`" v-show="!getIsNotData" ref="scrollWrap">
+          <ul v-show="!getIsNotData" ref="scrollWrap" :class="`${prefixCls}-list`">
             <li
-              :ref="setRefs(index)"
               v-for="(item, index) in searchResult"
+              :ref="setRefs(index)"
               :key="item.path"
               :data-index="index"
-              @mouseenter="handleMouseenter"
-              @click="handleEnter"
               :class="[
                 `${prefixCls}-list__item`,
                 {
                   [`${prefixCls}-list__item--active`]: activeIndex === index,
                 },
               ]"
+              @mouseenter="handleMouseenter"
+              @click="handleEnter"
             >
               <div :class="`${prefixCls}-list__item-icon`">
-                <Icon :icon="item.icon || 'mdi:form-select'" :size="20" />
+                <Icon :icon="item.icon || 'mdi:form-select'" :size="20"/>
               </div>
               <div :class="`${prefixCls}-list__item-text`">
                 {{ item.name }}
               </div>
               <div :class="`${prefixCls}-list__item-enter`">
-                <Icon icon="ant-design:enter-outlined" :size="20" />
+                <Icon icon="ant-design:enter-outlined" :size="20"/>
               </div>
             </li>
           </ul>
-          <AppSearchFooter />
+          <AppSearchFooter/>
         </div>
       </div>
     </transition>

kicc-ui/src/components/Basic/src/BasicArrow.vue

@@ -1,6 +1,6 @@
 <template>
   <span :class="getClass">
-    <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
+    <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle"/>
   </span>
 </template>
 <script lang="ts">

kicc-ui/src/components/Basic/src/BasicTitle.vue

@@ -1,7 +1,7 @@
 <template>
   <span :class="getClass">
     <slot/>
-    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
+    <BasicHelp v-if="helpMessage" :class="`${prefixCls}-help`" :text="helpMessage"/>
   </span>
 </template>
 <script lang="ts">

kicc-ui/src/components/Button/src/BasicButton.vue

@@ -1,9 +1,9 @@
 <template>
   <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
     <template #default>
-      <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
+      <Icon v-if="preIcon" :icon="preIcon" :size="iconSize"/>
       <slot/>
-      <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
+      <Icon v-if="postIcon" :icon="postIcon" :size="iconSize"/>
     </template>
   </Button>
 </template>

kicc-ui/src/components/Container/src/LazyContainer.vue

@@ -1,17 +1,17 @@
 <template>
   <transition-group
-    class="h-full w-full"
     v-bind="$attrs"
     ref="elRef"
+    class="h-full w-full"
     :name="transitionName"
     :tag="tag"
     mode="out-in"
   >
-    <div key="component" v-if="isInit">
+    <div v-if="isInit" key="component">
       <slot :loading="loading"/>
     </div>
-    <div key="skeleton" v-else>
-      <slot name="skeleton" v-if="$slots.skeleton"/>
+    <div v-else key="skeleton">
+      <slot v-if="$slots.skeleton" name="skeleton"/>
       <Skeleton v-else/>
     </div>
   </transition-group>

kicc-ui/src/components/Container/src/ScrollContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
-    <slot></slot>
+    <slot/>
   </Scrollbar>
 </template>
 

kicc-ui/src/components/Container/src/collapse/CollapseContainer.vue

@@ -15,13 +15,13 @@
 
     <div class="p-2">
       <CollapseTransition :enable="canExpan">
-        <Skeleton v-if="loading" :active="loading" />
-        <div :class="`${prefixCls}__body`" v-else v-show="show">
+        <Skeleton v-if="loading" :active="loading"/>
+        <div v-else v-show="show" :class="`${prefixCls}__body`">
           <slot/>
         </div>
       </CollapseTransition>
     </div>
-    <div :class="`${prefixCls}__footer`" v-if="$slots.footer">
+    <div v-if="$slots.footer" :class="`${prefixCls}__footer`">
       <slot name="footer"/>
     </div>
   </div>

kicc-ui/src/components/CountDown/src/CountButton.vue

@@ -1,5 +1,9 @@
 <template>
-  <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
+  <Button v-bind="$attrs"
+          :disabled="isStart"
+          :loading="loading"
+          @click="handleStart"
+  >
     {{ getButtonText }}
   </Button>
 </template>

kicc-ui/src/components/CountDown/src/CountdownInput.vue

@@ -1,10 +1,18 @@
 <template>
-  <a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
+  <a-input v-bind="$attrs"
+           :class="prefixCls"
+           :size="size"
+           :value="state"
+  >
     <template #addonAfter>
-      <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
+      <CountButton :size="size"
+                   :count="count"
+                   :value="state"
+                   :beforeStartFunc="sendCodeApi"
+      />
     </template>
-    <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
-      <slot :name="item" v-bind="data || {}"></slot>
+    <template v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')" #[item]="data">
+      <slot :name="item" v-bind="data || {}"/>
     </template>
   </a-input>
 </template>