From 1a73d5bdc9d2c4ea8ce058df916e278f5d6e22d6 Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Thu, 4 Jan 2024 16:36:48 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_hooks/use-button/index.ts                |  8 +++---
 .../_hooks/use-message-work/index.ts          |  6 ++--
 packages/fighting-design/alert/src/alert.vue  |  4 +--
 packages/fighting-design/aside/src/aside.vue  |  4 +--
 .../avatar-group/src/avatar-group.vue         |  4 +--
 .../fighting-design/avatar/src/avatar.vue     | 10 +++----
 .../fighting-design/back-top/src/back-top.vue |  4 +--
 packages/fighting-design/badge/src/badge.vue  |  4 +--
 packages/fighting-design/box/src/box.vue      |  4 +--
 .../breadcrumb-item/src/breadcrumb-item.vue   |  4 +--
 .../fighting-design/button/src/button.vue     | 14 +++++-----
 .../fighting-design/calendar/src/calendar.vue |  4 +--
 packages/fighting-design/card/src/card.vue    |  4 +--
 .../checkbox-group/src/checkbox-group.vue     |  4 +--
 .../close-btn/src/close-btn.vue               |  6 ++--
 .../date-picker/src/date-picker.vue           |  8 +++---
 .../fighting-design/dialog/src/dialog.vue     |  4 +--
 .../fighting-design/divider/src/divider.vue   | 11 ++------
 .../fighting-design/drawer/src/drawer.vue     |  4 +--
 .../fighting-design/dropdown/src/dropdown.vue |  8 +++---
 packages/fighting-design/empty/src/empty.vue  |  4 +--
 .../expand-card/src/expand-card.vue           |  4 +--
 .../fighting-design/footer/src/footer.vue     |  4 +--
 .../form-item/src/form-item.vue               |  4 +--
 .../fighting-design/header/src/header.vue     |  4 +--
 packages/fighting-design/image/src/image.vue  | 10 +++----
 .../input-number/src/input-number.vue         | 26 ++++++++---------
 packages/fighting-design/input/src/input.vue  | 28 ++++++++-----------
 packages/fighting-design/link/src/link.vue    |  8 +++---
 .../list-item/src/list-item.vue               |  4 +--
 packages/fighting-design/list/src/list.vue    |  4 +--
 .../fighting-design/loading/src/loading.vue   |  6 ++--
 packages/fighting-design/main/src/main.vue    |  4 +--
 .../menu-item/src/menu-item.vue               |  4 +--
 .../fighting-design/message/src/message.vue   |  4 +--
 .../pagination/src/pagination.vue             | 21 +++-----------
 .../progress/components/line/index.vue        |  6 ++--
 .../radio-group/src/radio-group.vue           |  4 +--
 packages/fighting-design/radio/src/radio.vue  |  9 +-----
 packages/fighting-design/rate/src/rate.vue    |  2 +-
 .../fighting-design/ripple/src/ripple.vue     |  4 +--
 .../fighting-design/select/src/select.vue     | 16 +++++------
 .../fighting-design/skeleton/src/skeleton.vue |  4 +--
 .../fighting-design/slider/src/slider.vue     |  4 +--
 packages/fighting-design/space/src/space.vue  |  4 +--
 .../sticky-card/src/sticky-card.vue           |  4 +--
 .../fighting-design/svg-icon/src/svg-icon.vue | 10 ++-----
 packages/fighting-design/swap/src/swap.vue    |  2 +-
 .../fighting-design/switch/src/switch.vue     |  4 +--
 packages/fighting-design/table/src/table.vue  |  4 +--
 packages/fighting-design/tabs/src/tabs.vue    |  4 +--
 packages/fighting-design/tag/src/tag.vue      |  6 ++--
 packages/fighting-design/text/src/text.vue    |  4 +--
 .../fighting-design/textarea/src/textarea.vue | 16 +++++------
 .../time-picker/src/time-picker.vue           | 13 +++------
 .../toolbar-item/src/toolbar-item.vue         |  9 ++----
 .../fighting-design/toolbar/src/toolbar.vue   |  4 +--
 .../fighting-design/tooltip/src/tooltip.vue   |  4 +--
 .../fighting-design/up-load/src/up-load.vue   |  8 +++---
 59 files changed, 177 insertions(+), 226 deletions(-)

diff --git a/packages/fighting-design/_hooks/use-button/index.ts b/packages/fighting-design/_hooks/use-button/index.ts
index 652d66da93..48414a9edb 100644
--- a/packages/fighting-design/_hooks/use-button/index.ts
+++ b/packages/fighting-design/_hooks/use-button/index.ts
@@ -11,11 +11,11 @@ import type { ClassList } from '../../_interface'
  * useButton 返回值类型接口
  *
  * @param { Object } classList 类名列表
- * @param { Object } styleList 样式列表
+ * @param { Object } style 样式列表
  */
 export interface UseButtonReturn {
   classList: ComputedRef<ClassList>
-  styleList: ComputedRef<CSSProperties>
+  style: ComputedRef<CSSProperties>
 }
 
 /**
@@ -65,7 +65,7 @@ export const useButton = (prop: ButtonProps): UseButtonReturn => {
   })
 
   /** 样式列表 */
-  const styleList = computed((): CSSProperties => {
+  const style = computed((): CSSProperties => {
     const { color, fontColor, shadow, fontSize } = prop
 
     if (prop.color) {
@@ -90,6 +90,6 @@ export const useButton = (prop: ButtonProps): UseButtonReturn => {
 
   return {
     classList,
-    styleList
+    style
   }
 }
diff --git a/packages/fighting-design/_hooks/use-message-work/index.ts b/packages/fighting-design/_hooks/use-message-work/index.ts
index ade4e1810b..43ac602412 100644
--- a/packages/fighting-design/_hooks/use-message-work/index.ts
+++ b/packages/fighting-design/_hooks/use-message-work/index.ts
@@ -6,7 +6,7 @@ import type { ClassList } from '../../_interface'
 
 export interface UseMessageWorkReturn {
   classList: ComputedRef<ClassList>
-  styleList: ComputedRef<CSSProperties>
+  style: ComputedRef<CSSProperties>
   visible: Ref<boolean>
   isPosition: ComputedRef<boolean>
   offsetStyle: ComputedRef<CSSProperties>
@@ -44,7 +44,7 @@ export const useMessageWork = (
   const classList = classes(['type', 'placement', 'round'], `f-${name}`)
 
   /** 样式列表 */
-  const styleList = styles(['color', 'background', 'zIndex'], 'zIndex')
+  const style = styles(['color', 'background', 'zIndex'], 'zIndex')
 
   /**
    * 判断方位
@@ -120,7 +120,7 @@ export const useMessageWork = (
 
   return {
     classList,
-    styleList,
+    style,
     visible,
     isPosition,
     offsetStyle,
diff --git a/packages/fighting-design/alert/src/alert.vue b/packages/fighting-design/alert/src/alert.vue
index e06ccbe37c..f625920cd4 100644
--- a/packages/fighting-design/alert/src/alert.vue
+++ b/packages/fighting-design/alert/src/alert.vue
@@ -27,7 +27,7 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(['fontSize', 'color', 'background', 'titleSize', 'titleColor'])
+  const style = styles(['fontSize', 'color', 'background', 'titleSize', 'titleColor'])
 
   /**
    * 点击关闭按钮
@@ -52,7 +52,7 @@
 
 <template>
   <transition name="f-alert">
-    <div v-if="isShow" role="alert" :class="classList" :style="styleList">
+    <div v-if="isShow" role="alert" :class="classList" :style>
       <!-- 前缀 icon -->
       <f-svg-icon v-if="$slots.beforeIcon || beforeIcon" :icon="beforeIcon">
         <slot name="beforeIcon" />
diff --git a/packages/fighting-design/aside/src/aside.vue b/packages/fighting-design/aside/src/aside.vue
index 182f909353..6182e1afed 100644
--- a/packages/fighting-design/aside/src/aside.vue
+++ b/packages/fighting-design/aside/src/aside.vue
@@ -9,11 +9,11 @@
   const { styles } = useList(prop, 'aside')
 
   /** 样式列表 */
-  const styleList = styles(['width', 'padding', 'background'])
+  const style = styles(['width', 'padding', 'background'])
 </script>
 
 <template>
-  <aside class="f-aside" :style="styleList">
+  <aside class="f-aside" :style>
     <slot />
   </aside>
 </template>
diff --git a/packages/fighting-design/avatar-group/src/avatar-group.vue b/packages/fighting-design/avatar-group/src/avatar-group.vue
index a7e6635872..4e0c643abc 100644
--- a/packages/fighting-design/avatar-group/src/avatar-group.vue
+++ b/packages/fighting-design/avatar-group/src/avatar-group.vue
@@ -35,11 +35,11 @@
   onMounted(setZIndexStyle)
 
   /** 样式列表 */
-  const styleList = styles(['positionSize'])
+  const style = styles(['positionSize'])
 </script>
 
 <template>
-  <div ref="avatarGroupRef" role="group" class="f-avatar-group" :style="styleList">
+  <div ref="avatarGroupRef" role="group" class="f-avatar-group" :style>
     <slot />
   </div>
 </template>
diff --git a/packages/fighting-design/avatar/src/avatar.vue b/packages/fighting-design/avatar/src/avatar.vue
index bf5fff72c4..dcb3ca2f2e 100644
--- a/packages/fighting-design/avatar/src/avatar.vue
+++ b/packages/fighting-design/avatar/src/avatar.vue
@@ -50,7 +50,7 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(
+  const style = styles(
     [
       'background',
       'fontColor',
@@ -73,13 +73,13 @@
 </script>
 
 <template>
-  <div v-if="isSuccess" role="img" :class="classList" :style="styleList">
+  <div v-if="isSuccess" role="img" :class="classList" :style>
     <!-- 图标头像 -->
     <f-svg-icon
       v-if="$slots.icon || icon"
       :size="fontSize || 15"
       :color="fontColor"
-      :icon="icon"
+      :icon
     >
       <slot name="icon" />
     </f-svg-icon>
@@ -96,12 +96,12 @@
       class="f-avatar__img"
       src=""
       :style="isShowNode ? '' : 'visibility: hidden'"
-      :alt="alt"
+      :alt
     />
   </div>
 
   <!-- 加载失败的 -->
-  <div v-else class="f-avatar__error" :style="styleList">
+  <div v-else class="f-avatar__error" :style>
     <slot name="error">
       <span class="f-avatar__error-text">{{ alt || '加载失败' }}</span>
     </slot>
diff --git a/packages/fighting-design/back-top/src/back-top.vue b/packages/fighting-design/back-top/src/back-top.vue
index cf0439500c..1b057d00e0 100644
--- a/packages/fighting-design/back-top/src/back-top.vue
+++ b/packages/fighting-design/back-top/src/back-top.vue
@@ -127,7 +127,7 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['right', 'bottom', 'background', 'color', 'zIndex'], 'zIndex')
+  const style = styles(['right', 'bottom', 'background', 'color', 'zIndex'], 'zIndex')
 
   /** 类名列表 */
   const classList = classes(['round'], 'f-back-top')
@@ -135,7 +135,7 @@
 
 <template>
   <transition name="f-back-top">
-    <div v-show="visible" :class="classList" :style="styleList" @click.stop="handleClick">
+    <div v-show="visible" :class="classList" :style @click.stop="handleClick">
       <slot />
     </div>
   </transition>
diff --git a/packages/fighting-design/badge/src/badge.vue b/packages/fighting-design/badge/src/badge.vue
index 06b4bdfe56..1de167426b 100644
--- a/packages/fighting-design/badge/src/badge.vue
+++ b/packages/fighting-design/badge/src/badge.vue
@@ -14,7 +14,7 @@
   const classList = classes(['type', 'dot'], 'f-badge')
 
   /** 样式列表 */
-  const styleList = styles(['background', 'color'])
+  const style = styles(['background', 'color'])
 
   /** 展示的内容 */
   const content = computed((): string | number => {
@@ -48,7 +48,7 @@
 </script>
 
 <template>
-  <div :class="classList" :style="styleList">
+  <div :class="classList" :style>
     <slot />
 
     <transition name="f-badge">
diff --git a/packages/fighting-design/box/src/box.vue b/packages/fighting-design/box/src/box.vue
index 55f0ec2df7..5af2d0d894 100644
--- a/packages/fighting-design/box/src/box.vue
+++ b/packages/fighting-design/box/src/box.vue
@@ -9,11 +9,11 @@
   const { styles } = useList(prop, 'box')
 
   /** 样式列表 */
-  const styleList = styles(['padding', 'width', 'height', 'background', 'display'])
+  const style = styles(['padding', 'width', 'height', 'background', 'display'])
 </script>
 
 <template>
-  <div class="f-box" :role="role || 'none'" :style="styleList">
+  <div class="f-box" :role="role || 'none'" :style>
     <slot />
   </div>
 </template>
diff --git a/packages/fighting-design/breadcrumb-item/src/breadcrumb-item.vue b/packages/fighting-design/breadcrumb-item/src/breadcrumb-item.vue
index 1a86902220..88027f80fd 100644
--- a/packages/fighting-design/breadcrumb-item/src/breadcrumb-item.vue
+++ b/packages/fighting-design/breadcrumb-item/src/breadcrumb-item.vue
@@ -42,7 +42,7 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['fontColor', 'iconColor', 'fontSize'])
+  const style = styles(['fontColor', 'iconColor', 'fontSize'])
 
   /** 点击触发 */
   const handelClick = (): void => {
@@ -60,7 +60,7 @@
 </script>
 
 <template>
-  <div class="f-breadcrumb-item" :style="styleList" @click="handelClick">
+  <div class="f-breadcrumb-item" :style @click="handelClick">
     <span class="f-breadcrumb-item__text">
       <slot />
     </span>
diff --git a/packages/fighting-design/button/src/button.vue b/packages/fighting-design/button/src/button.vue
index c970dfc072..49cd001d13 100644
--- a/packages/fighting-design/button/src/button.vue
+++ b/packages/fighting-design/button/src/button.vue
@@ -13,7 +13,7 @@
 
   const { getType } = useGlobal(prop)
   const { run } = useRun()
-  const { classList, styleList } = useButton(prop)
+  const { classList, style } = useButton(prop)
 
   /** 元素节点 */
   const FButtonRef = ref<HTMLButtonElement | undefined>()
@@ -77,9 +77,9 @@
       role="link"
       tabindex="0"
       :class="classList"
-      :href="href"
-      :target="target"
-      :style="styleList"
+      :href
+      :target
+      :style
       @click="handleClick"
     >
       <f-svg-icon
@@ -102,10 +102,10 @@
       tabindex="0"
       :class="classList"
       :disabled="disabled || loading"
-      :autofocus="autofocus"
-      :name="name"
+      :autofocus
+      :name
       :type="nativeType"
-      :style="styleList"
+      :style
       @click="handleClick"
     >
       <f-svg-icon
diff --git a/packages/fighting-design/calendar/src/calendar.vue b/packages/fighting-design/calendar/src/calendar.vue
index 4d65633daa..f6be2d4f07 100644
--- a/packages/fighting-design/calendar/src/calendar.vue
+++ b/packages/fighting-design/calendar/src/calendar.vue
@@ -153,14 +153,14 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['borderColor', 'dayCellHeight', 'weekCellHeight'])
+  const style = styles(['borderColor', 'dayCellHeight', 'weekCellHeight'])
 
   /** 类名列表 */
   const classList = classes(['border'], 'f-calendar')
 </script>
 
 <template>
-  <div :class="classList" :style="styleList">
+  <div :class="classList" :style>
     <!-- 头部操作栏 -->
     <header v-if="showHeader" class="f-calendar__header">
       <!-- 上个月切换按钮 -->
diff --git a/packages/fighting-design/card/src/card.vue b/packages/fighting-design/card/src/card.vue
index 405c8c86b8..f080e155f0 100644
--- a/packages/fighting-design/card/src/card.vue
+++ b/packages/fighting-design/card/src/card.vue
@@ -18,7 +18,7 @@
   const classList = classes(['round', 'shadow'], 'f-card')
 
   /** 样式列表 */
-  const styleList = styles(['padding', 'borderColor', 'background', 'titleColor'])
+  const style = styles(['padding', 'borderColor', 'background', 'titleColor'])
 
   /** 点击关闭按钮关闭卡片 */
   const handelClose = (): void => {
@@ -29,7 +29,7 @@
 
 <template>
   <transition name="f-card">
-    <div v-if="isShow" :class="classList" :style="styleList">
+    <div v-if="isShow" :class="classList" :style>
       <!-- 头部 -->
       <header v-if="$slots.header || title" role="heading" class="f-card__header">
         <!-- 标题 -->
diff --git a/packages/fighting-design/checkbox-group/src/checkbox-group.vue b/packages/fighting-design/checkbox-group/src/checkbox-group.vue
index da33f0d2e2..6b32c65ef1 100644
--- a/packages/fighting-design/checkbox-group/src/checkbox-group.vue
+++ b/packages/fighting-design/checkbox-group/src/checkbox-group.vue
@@ -36,14 +36,14 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(['columnGap', 'rowGap'])
+  const style = styles(['columnGap', 'rowGap'])
 
   /** 类名列表 */
   const classList = classes(['background', 'vertical', 'size'], 'f-checkbox-group')
 </script>
 
 <template>
-  <div role="group" aria-label="checkbox-group" :class="classList" :style="styleList">
+  <div role="group" aria-label="checkbox-group" :class="classList" :style>
     <slot />
   </div>
 </template>
diff --git a/packages/fighting-design/close-btn/src/close-btn.vue b/packages/fighting-design/close-btn/src/close-btn.vue
index 76a3af0e39..47d848678e 100644
--- a/packages/fighting-design/close-btn/src/close-btn.vue
+++ b/packages/fighting-design/close-btn/src/close-btn.vue
@@ -25,12 +25,12 @@
   const classList = classes(['round', 'disabled'], 'f-close-btn')
 
   /** 样式列表 */
-  const styleList = styles(['color', 'hoverColor'])
+  const style = styles(['color', 'hoverColor'])
 </script>
 
 <template>
-  <div role="button" :class="classList" :style="styleList" @click="handleClick">
-    <f-svg-icon :size="size" :icon="icon">
+  <div role="button" :class="classList" :style @click="handleClick">
+    <f-svg-icon :size :icon="icon">
       <slot>
         <f-icon-cross />
       </slot>
diff --git a/packages/fighting-design/date-picker/src/date-picker.vue b/packages/fighting-design/date-picker/src/date-picker.vue
index e7f25b77c5..99a57996df 100644
--- a/packages/fighting-design/date-picker/src/date-picker.vue
+++ b/packages/fighting-design/date-picker/src/date-picker.vue
@@ -105,16 +105,16 @@
 
 <template>
   <div class="f-date-picker">
-    <f-trigger ref="triggerInstance" trigger="click" :disabled="disabled">
+    <f-trigger ref="triggerInstance" trigger="click" :disabled>
       <!-- 输入框 -->
       <f-input
         v-model="dateModelValue"
         autocomplete="off"
         readonly
-        :disabled="disabled"
+        :disabled
         :placeholder="placeholder || '请选择日期'"
-        :clear="clear"
-        :size="size"
+        :clear
+        :size
         :after-icon="FIconCalendar"
       />
 
diff --git a/packages/fighting-design/dialog/src/dialog.vue b/packages/fighting-design/dialog/src/dialog.vue
index 0ca83e5903..73883043f3 100644
--- a/packages/fighting-design/dialog/src/dialog.vue
+++ b/packages/fighting-design/dialog/src/dialog.vue
@@ -17,7 +17,7 @@
   const { handleOpen, handleOpenEnd, handleClose, handleCloseEnd } = useTransition(prop)
 
   /** 样式列表 */
-  const styleList = styles(
+  const style = styles(
     ['width', 'zIndex', 'maskBackground', 'maskOpacity'],
     ['maskOpacity', 'zIndex']
   )
@@ -41,7 +41,7 @@
         aria-modal="true"
         tabindex="-1"
         :class="classList"
-        :style="styleList"
+        :style
       >
         <!-- 遮罩层 -->
         <div v-if="showMask" class="f-dialog__mask" />
diff --git a/packages/fighting-design/divider/src/divider.vue b/packages/fighting-design/divider/src/divider.vue
index 80155ecf55..4c82d02a4f 100644
--- a/packages/fighting-design/divider/src/divider.vue
+++ b/packages/fighting-design/divider/src/divider.vue
@@ -12,18 +12,11 @@
   const classList = classes(['vertical', 'position'], 'f-divider')
 
   /** 类名列表 */
-  const styleList = styles([
-    'color',
-    'margin',
-    'background',
-    'fontColor',
-    'height',
-    'type'
-  ])
+  const style = styles(['color', 'margin', 'background', 'fontColor', 'height', 'type'])
 </script>
 
 <template>
-  <div role="separator" :class="classList" :style="styleList">
+  <div role="separator" :class="classList" :style>
     <span v-if="!vertical || !$slots.default" class="f-divider__text">
       <slot />
     </span>
diff --git a/packages/fighting-design/drawer/src/drawer.vue b/packages/fighting-design/drawer/src/drawer.vue
index 69f7be35a4..401c6b4b17 100644
--- a/packages/fighting-design/drawer/src/drawer.vue
+++ b/packages/fighting-design/drawer/src/drawer.vue
@@ -17,7 +17,7 @@
   const { handleOpen, handleOpenEnd, handleClose, handleCloseEnd } = useTransition(prop)
 
   /** 样式列表 */
-  const styleList = styles(
+  const style = styles(
     ['width', 'zIndex', 'maskBackground', 'maskOpacity'],
     ['zIndex', 'maskOpacity']
   )
@@ -41,7 +41,7 @@
         aria-modal="true"
         tabindex="-1"
         :class="classList"
-        :style="styleList"
+        :style
       >
         <!-- 遮罩层 -->
         <div v-if="showMask" class="f-drawer__mask" />
diff --git a/packages/fighting-design/dropdown/src/dropdown.vue b/packages/fighting-design/dropdown/src/dropdown.vue
index ebe53aa5bd..1a3e481960 100644
--- a/packages/fighting-design/dropdown/src/dropdown.vue
+++ b/packages/fighting-design/dropdown/src/dropdown.vue
@@ -11,10 +11,10 @@
   <div class="f-dropdown">
     <f-trigger
       :trigger="trigger"
-      :disabled="disabled"
-      :spacing="spacing"
-      :arrow="arrow"
-      :width="width"
+      :disabled
+      :spacing
+      :arrow
+      :width
       :enter-duration="enterDuration"
       :leave-duration="leaveDuration"
       :on-change="onChange"
diff --git a/packages/fighting-design/empty/src/empty.vue b/packages/fighting-design/empty/src/empty.vue
index e948d712c7..d17cf17f02 100644
--- a/packages/fighting-design/empty/src/empty.vue
+++ b/packages/fighting-design/empty/src/empty.vue
@@ -20,11 +20,11 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['contentColor', 'contentSize', 'background'])
+  const style = styles(['contentColor', 'contentSize', 'background'])
 </script>
 
 <template>
-  <div class="f-empty" :style="styleList">
+  <div class="f-empty" :style>
     <!-- 图片 -->
     <div class="f-empty__wrapper">
       <slot v-if="$slots.default" />
diff --git a/packages/fighting-design/expand-card/src/expand-card.vue b/packages/fighting-design/expand-card/src/expand-card.vue
index 1f7c7255d7..6553289707 100644
--- a/packages/fighting-design/expand-card/src/expand-card.vue
+++ b/packages/fighting-design/expand-card/src/expand-card.vue
@@ -76,11 +76,11 @@
   const classList = classes(['round', 'vertical'], 'f-expand-card')
 
   /** 样式列表 */
-  const styleList = styles(['width', 'height', 'color'])
+  const style = styles(['width', 'height', 'color'])
 </script>
 
 <template>
-  <div v-if="imageListArr.length" :class="classList" :style="styleList">
+  <div v-if="imageListArr.length" :class="classList" :style>
     <div
       v-for="(item, index) in imageListArr"
       :key="index"
diff --git a/packages/fighting-design/footer/src/footer.vue b/packages/fighting-design/footer/src/footer.vue
index ae1ec1297c..20b3275f7c 100644
--- a/packages/fighting-design/footer/src/footer.vue
+++ b/packages/fighting-design/footer/src/footer.vue
@@ -9,11 +9,11 @@
   const { styles } = useList(prop, 'footer')
 
   /** 样式列表 */
-  const styleList = styles(['height', 'padding'])
+  const style = styles(['height', 'padding'])
 </script>
 
 <template>
-  <footer class="f-footer" :style="styleList">
+  <footer class="f-footer" :style>
     <slot />
   </footer>
 </template>
diff --git a/packages/fighting-design/form-item/src/form-item.vue b/packages/fighting-design/form-item/src/form-item.vue
index b62698cc58..b745018b4a 100644
--- a/packages/fighting-design/form-item/src/form-item.vue
+++ b/packages/fighting-design/form-item/src/form-item.vue
@@ -30,7 +30,7 @@
   })
 
   /** 样式列表 */
-  const styleList = computed((): CSSProperties => {
+  const style = computed((): CSSProperties => {
     return {
       '--form-item-label-width': parentInject && sizeChange(parentInject.labelWidth)
     } as CSSProperties
@@ -48,7 +48,7 @@
 </script>
 
 <template>
-  <div :class="classList" :style="styleList">
+  <div :class="classList" :style>
     <label v-if="label" class="f-form-item__label">{{ label }}</label>
 
     <!-- 主要内容 -->
diff --git a/packages/fighting-design/header/src/header.vue b/packages/fighting-design/header/src/header.vue
index 68cffe8caa..fe8912072d 100644
--- a/packages/fighting-design/header/src/header.vue
+++ b/packages/fighting-design/header/src/header.vue
@@ -9,11 +9,11 @@
   const { styles } = useList(prop, 'header')
 
   /** 样式列表 */
-  const styleList = styles(['height', 'padding'])
+  const style = styles(['height', 'padding'])
 </script>
 
 <template>
-  <header role="banner" class="f-header" :style="styleList">
+  <header role="banner" class="f-header" :style>
     <slot />
   </header>
 </template>
diff --git a/packages/fighting-design/image/src/image.vue b/packages/fighting-design/image/src/image.vue
index c88b81c10c..75db8c01a9 100644
--- a/packages/fighting-design/image/src/image.vue
+++ b/packages/fighting-design/image/src/image.vue
@@ -17,21 +17,21 @@
   const classList = classes(['fit', 'select', 'block'], 'f-image')
 
   /** 样式列表 */
-  const styleList = styles(['width', 'height', 'round'])
+  const style = styles(['width', 'height', 'round'])
 </script>
 
 <template>
-  <div v-if="isSuccess" role="img" :class="classList" :style="styleList">
+  <div v-if="isSuccess" role="img" :class="classList" :style>
     <!-- 真正展示的图片 -->
     <img
       ref="imageEl"
       class="f-image__img"
       src=""
       :style="isShowNode ? '' : 'visibility: hidden'"
-      :draggable="draggable"
       :referrer-policy="referrerPolicy"
-      :alt="alt"
-      :title="title"
+      :draggabl
+      :alt
+      :title
     />
   </div>
 
diff --git a/packages/fighting-design/input-number/src/input-number.vue b/packages/fighting-design/input-number/src/input-number.vue
index e39030300e..16876f4d27 100644
--- a/packages/fighting-design/input-number/src/input-number.vue
+++ b/packages/fighting-design/input-number/src/input-number.vue
@@ -80,7 +80,7 @@
       v-if="model === 'button'"
       class="f-input-number__minus"
       :type="buttonType || 'primary'"
-      :size="size"
+      :size
       :disabled="disabled || minDisabled"
       :before-icon="FIconChevronLeft"
       :on-click="() => handleChangeVal('minus')"
@@ -90,15 +90,15 @@
       <f-input
         v-model="modelValue"
         type="number"
-        :max="max"
-        :min="min"
-        :disabled="disabled"
-        :readonly="readonly"
-        :autofocus="autofocus"
-        :name="name"
-        :size="size"
-        :clear="clear"
-        :placeholder="placeholder"
+        :max
+        :min
+        :disabled
+        :readonly
+        :autofocus
+        :name
+        :size
+        :clear
+        :placeholder
         :on-blur="onBlur"
         :on-focus="onFocus"
         :on-input="onInput"
@@ -111,14 +111,14 @@
           >
             <f-button
               :disabled="disabled || maxDisabled"
-              :size="size"
+              :size
               :type="buttonType || 'default'"
               :before-icon="FIconChevronUp"
               :onclick="() => handleChangeVal('plus')"
             />
             <f-button
               :disabled="disabled || minDisabled"
-              :size="size"
+              :size
               :type="buttonType || 'default'"
               :before-icon="FIconChevronDown"
               :on-click="() => handleChangeVal('minus')"
@@ -132,7 +132,7 @@
       v-if="model === 'button'"
       class="f-input-number__plus"
       :type="buttonType || 'primary'"
-      :size="size"
+      :size
       :disabled="disabled || maxDisabled"
       :before-icon="FIconChevronRight"
       :on-click="() => handleChangeVal('plus')"
diff --git a/packages/fighting-design/input/src/input.vue b/packages/fighting-design/input/src/input.vue
index 80eb743943..cda23fb395 100644
--- a/packages/fighting-design/input/src/input.vue
+++ b/packages/fighting-design/input/src/input.vue
@@ -72,20 +72,14 @@
   }
 
   /** 样式列表 */
-  const styleList = styles([
-    'placeholderColor',
-    'textColor',
-    'width',
-    'height',
-    'fontSize'
-  ])
+  const style = styles(['placeholderColor', 'textColor', 'width', 'height', 'fontSize'])
 
   /** 类名列表 */
   const classList = classes(['size', 'disabled', 'search'], 'f-input')
 </script>
 
 <template>
-  <div role="input" :class="classList" :style="styleList">
+  <div role="input" :class="classList" :style>
     <!-- 容器盒子 -->
     <div class="f-input__wrapper">
       <!-- 前缀插槽 -->
@@ -99,15 +93,15 @@
         v-model="modelValue"
         class="f-input__input"
         :type="inputType"
-        :max="max"
-        :min="min"
+        :max
+        :min
+        :disabled
+        :readonly
+        :autofocus
+        :name
+        :autocomplete
+        :placeholder
         :maxlength="maxLength"
-        :disabled="disabled"
-        :readonly="readonly"
-        :autofocus="autofocus"
-        :autocomplete="autocomplete"
-        :name="name"
-        :placeholder="placeholder"
         @input="handleInput"
         @change="handleChange"
         @keyup.enter="handleEnter"
@@ -146,7 +140,7 @@
     <!-- 搜索框 -->
     <div v-if="search" class="f-input__search" @click="handleSearch">
       <slot name="searchBtn">
-        <f-button type="primary" :size="size">{{ searchText }}</f-button>
+        <f-button type="primary" :size>{{ searchText }}</f-button>
       </slot>
     </div>
   </div>
diff --git a/packages/fighting-design/link/src/link.vue b/packages/fighting-design/link/src/link.vue
index 01e02bd88f..f6ef905571 100644
--- a/packages/fighting-design/link/src/link.vue
+++ b/packages/fighting-design/link/src/link.vue
@@ -33,17 +33,17 @@
   const classList = classes(['type', 'state', 'disabled', 'noCopy'], 'f-link')
 
   /** 样式列表 */
-  const styleList = styles(['size', 'color', 'hoverColor'])
+  const style = styles(['size', 'color', 'hoverColor'])
 </script>
 
 <template>
-  <div role="link" :class="classList" :style="styleList">
+  <div role="link" :class="classList" :style>
     <a class="f-link__a" :href="href" :target="target" @click="handleClick">
-      <f-svg-icon v-if="beforeIcon" :icon="beforeIcon" :size="size" />
+      <f-svg-icon v-if="beforeIcon" :icon="beforeIcon" :size />
 
       <slot />
 
-      <f-svg-icon v-if="afterIcon" :icon="afterIcon" :size="size" />
+      <f-svg-icon v-if="afterIcon" :icon="afterIcon" :size />
     </a>
   </div>
 </template>
diff --git a/packages/fighting-design/list-item/src/list-item.vue b/packages/fighting-design/list-item/src/list-item.vue
index 1cc5cc1299..de015f4584 100644
--- a/packages/fighting-design/list-item/src/list-item.vue
+++ b/packages/fighting-design/list-item/src/list-item.vue
@@ -22,11 +22,11 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(['textColor', 'borderColor', 'background'])
+  const style = styles(['textColor', 'borderColor', 'background'])
 </script>
 
 <template>
-  <li role="listitem" class="f-list-item" :style="styleList">
+  <li role="listitem" class="f-list-item" :style>
     <slot />
   </li>
 </template>
diff --git a/packages/fighting-design/list/src/list.vue b/packages/fighting-design/list/src/list.vue
index 9ac8f34614..0b81c7b431 100644
--- a/packages/fighting-design/list/src/list.vue
+++ b/packages/fighting-design/list/src/list.vue
@@ -12,14 +12,14 @@
   const { classes, styles } = useList(prop, 'list')
 
   /** 样式列表 */
-  const styleList = styles(['borderColor', 'maxHeight', 'zebraColor'])
+  const style = styles(['borderColor', 'maxHeight', 'zebraColor'])
 
   /** 类名列表 */
   const classList = classes(['zebra', 'center', 'size'], 'f-list')
 </script>
 
 <template>
-  <ul role="list" :class="classList" :style="styleList">
+  <ul role="list" :class="classList" :style>
     <header v-if="$slots.header" class="f-list__header">
       <slot name="header" />
     </header>
diff --git a/packages/fighting-design/loading/src/loading.vue b/packages/fighting-design/loading/src/loading.vue
index f993ef7da9..7fe9f5b0ad 100644
--- a/packages/fighting-design/loading/src/loading.vue
+++ b/packages/fighting-design/loading/src/loading.vue
@@ -11,15 +11,15 @@
   const { styles, classes } = useList(prop, 'loading')
 
   /** 样式列表 */
-  const styleList = styles(['background', 'color'])
+  const style = styles(['background', 'color'])
 
   /** 类名列表 */
   const classList = classes(['fullscreen'], 'f-loading')
 </script>
 
 <template>
-  <div v-if="visible" :class="classList" :style="styleList">
-    <f-svg-icon :size="20" class="f-loading__animation" :icon="icon">
+  <div v-if="visible" :class="classList" :style>
+    <f-svg-icon :size="20" class="f-loading__animation" :icon>
       <slot name="icon">
         <f-icon-loading-a />
       </slot>
diff --git a/packages/fighting-design/main/src/main.vue b/packages/fighting-design/main/src/main.vue
index bc6fa0cc09..8a10e12628 100644
--- a/packages/fighting-design/main/src/main.vue
+++ b/packages/fighting-design/main/src/main.vue
@@ -9,11 +9,11 @@
   const { styles } = useList(prop, 'main')
 
   /** 样式列表 */
-  const styleList = styles(['padding'])
+  const style = styles(['padding'])
 </script>
 
 <template>
-  <main role="main" class="f-main" :style="styleList">
+  <main role="main" class="f-main" :style>
     <slot />
   </main>
 </template>
diff --git a/packages/fighting-design/menu-item/src/menu-item.vue b/packages/fighting-design/menu-item/src/menu-item.vue
index 2a9a640b3b..8c3d9f3734 100644
--- a/packages/fighting-design/menu-item/src/menu-item.vue
+++ b/packages/fighting-design/menu-item/src/menu-item.vue
@@ -69,7 +69,7 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['fontSize', 'color'])
+  const style = styles(['fontSize', 'color'])
 </script>
 
 <template>
@@ -79,7 +79,7 @@
       'f-menu-item',
       { 'f-menu-item__active': isActive, 'f-menu-item__disabled': disabled }
     ]"
-    :style="styleList"
+    :style
     @click="handelClick"
   >
     <f-svg-icon v-if="icon" :icon="icon" />
diff --git a/packages/fighting-design/message/src/message.vue b/packages/fighting-design/message/src/message.vue
index ce0dee44e3..21b1014fcc 100644
--- a/packages/fighting-design/message/src/message.vue
+++ b/packages/fighting-design/message/src/message.vue
@@ -12,7 +12,7 @@
 
   const {
     classList,
-    styleList,
+    style,
     visible,
     isPosition,
     offsetStyle,
@@ -38,7 +38,7 @@
     <div
       v-show="visible"
       :class="classList"
-      :style="[offsetStyle, styleList]"
+      :style="[offsetStyle, style]"
       @mouseleave="startTime"
       @mouseenter="clearTimer"
     >
diff --git a/packages/fighting-design/pagination/src/pagination.vue b/packages/fighting-design/pagination/src/pagination.vue
index 7a88120a28..b3a10facae 100644
--- a/packages/fighting-design/pagination/src/pagination.vue
+++ b/packages/fighting-design/pagination/src/pagination.vue
@@ -47,12 +47,7 @@
   <div :class="classList">
     <!-- 下拉菜单选择每页大小 -->
     <template v-if="pageSelect && pageSelect.length">
-      <f-select
-        v-model="pagesLen"
-        :width="120"
-        :disabled="disabled"
-        :on-change="selectChange"
-      >
+      <f-select v-model="pagesLen" :width="120" :disabled :on-change="selectChange">
         <f-option
           v-for="item in pageSelect"
           :key="item"
@@ -63,11 +58,7 @@
     </template>
 
     <!-- 上一页按钮 -->
-    <button
-      class="f-pagination__button"
-      :disabled="disabled"
-      @click="handelTurnPages('prev')"
-    >
+    <button class="f-pagination__button" :disabled @click="handelTurnPages('prev')">
       <f-svg-icon :size="14" :icon="prevIcon || FIconChevronLeft" />
     </button>
 
@@ -125,11 +116,7 @@
     </div>
 
     <!-- 下一页按钮 -->
-    <button
-      class="f-pagination__button"
-      :disabled="disabled"
-      @click="handelTurnPages('next')"
-    >
+    <button class="f-pagination__button" :disabled @click="handelTurnPages('next')">
       <f-svg-icon :size="14" :icon="nextIcon || FIconChevronRight" />
     </button>
 
@@ -140,7 +127,7 @@
         placeholder="输入跳转的页数"
         class="f-pagination__jump"
         style="width: 80px"
-        :disabled="disabled"
+        :disabled
         :on-blur="handleInput"
         :on-enter="handleInput"
       />
diff --git a/packages/fighting-design/progress/components/line/index.vue b/packages/fighting-design/progress/components/line/index.vue
index 09cf16f2fd..cde2f2cce0 100644
--- a/packages/fighting-design/progress/components/line/index.vue
+++ b/packages/fighting-design/progress/components/line/index.vue
@@ -16,10 +16,10 @@
   const classList = classes(['type', 'stripe', 'state'], 'f-progress')
 
   /** 样式列表 */
-  const styleList = styles(['height', 'color', 'textColor', 'background'])
+  const style = styles(['height', 'color', 'textColor', 'background'])
 
   /* 进度条进度 */
-  const barStyleList = computed((): CSSProperties => {
+  const barstyle = computed((): CSSProperties => {
     return { '--progress-width': `${params.percent}%` } as const
   })
 </script>
@@ -28,7 +28,7 @@
   <div
     role="progressbar"
     :class="classList"
-    :style="[styleList, barStyleList]"
+    :style="[style, barstyle]"
     :aria-value="params.percent"
     :aria-valuemin="0"
     :aria-valuemax="100"
diff --git a/packages/fighting-design/radio-group/src/radio-group.vue b/packages/fighting-design/radio-group/src/radio-group.vue
index 61bff080e9..cd44f70312 100644
--- a/packages/fighting-design/radio-group/src/radio-group.vue
+++ b/packages/fighting-design/radio-group/src/radio-group.vue
@@ -29,7 +29,7 @@
   const classList = classes(['vertical', 'background', 'size'], 'f-radio-group')
 
   /** 样式列表 */
-  const styleList = styles(['columnGap', 'rowGap'])
+  const style = styles(['columnGap', 'rowGap'])
 
   // 注入依赖项
   provide<RadioGroundInject>(
@@ -42,7 +42,7 @@
 </script>
 
 <template>
-  <div role="radiogroup" :class="classList" :style="styleList">
+  <div role="radiogroup" :class="classList" :style>
     <slot />
   </div>
 </template>
diff --git a/packages/fighting-design/radio/src/radio.vue b/packages/fighting-design/radio/src/radio.vue
index 323b4fe67d..5de97e2602 100644
--- a/packages/fighting-design/radio/src/radio.vue
+++ b/packages/fighting-design/radio/src/radio.vue
@@ -60,14 +60,7 @@
 
 <template>
   <label role="radio" aria-checked="false" tabindex="0" :class="classList">
-    <input
-      v-model="keyword"
-      hidden
-      type="radio"
-      :value="label"
-      :disabled="disabled"
-      :name="name"
-    />
+    <input v-model="keyword" hidden type="radio" :value="label" :disabled :name />
     <!-- 小圆圈 -->
     <span v-if="!parentInject?.background" class="f-radio__circle" />
 
diff --git a/packages/fighting-design/rate/src/rate.vue b/packages/fighting-design/rate/src/rate.vue
index 2263d44afe..14a5ce9d86 100644
--- a/packages/fighting-design/rate/src/rate.vue
+++ b/packages/fighting-design/rate/src/rate.vue
@@ -74,7 +74,7 @@
         @click="handleClick(index + 1)"
       >
         <f-svg-icon
-          :size="size"
+          :size
           :icon="icon || FIconStarB"
           :color="starValue > index ? effectColor : invalidColor"
         />
diff --git a/packages/fighting-design/ripple/src/ripple.vue b/packages/fighting-design/ripple/src/ripple.vue
index 06ad58f693..aad84dba97 100644
--- a/packages/fighting-design/ripple/src/ripple.vue
+++ b/packages/fighting-design/ripple/src/ripple.vue
@@ -15,7 +15,7 @@
   const rippleRef = ref<HTMLElement>()
 
   /** 样式列表 */
-  const styleList = styles(['startOpacity', 'endOpacity'], false)
+  const style = styles(['startOpacity', 'endOpacity'], false)
 
   /**
    * 点击之后执行
@@ -45,7 +45,7 @@
 </script>
 
 <template>
-  <div ref="rippleRef" class="f-ripple" :style="styleList" @click="handleClick">
+  <div ref="rippleRef" class="f-ripple" :style @click="handleClick">
     <slot />
   </div>
 </template>
diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue
index 249f73fde0..c97e77a3a6 100644
--- a/packages/fighting-design/select/src/select.vue
+++ b/packages/fighting-design/select/src/select.vue
@@ -35,7 +35,7 @@
   /** 子节点的 lable 配置项参数 */
   const childrenLabels = ref<{ slot: string; show: boolean }[]>([])
   /** 样式列表 */
-  const styleList = styles(['width'])
+  const style = styles(['width'])
   /** 当前是否聚焦 */
   const isFocus = ref(false)
   /** 展开的内容元素 */
@@ -212,16 +212,16 @@
 </script>
 
 <template>
-  <div class="f-select" :style="styleList">
-    <f-dropdown trigger="click" :disabled="disabled" :width="width" :on-open="onOpen">
+  <div class="f-select" :style>
+    <f-dropdown trigger="click" :disabled :width :on-open="onOpen">
       <f-input
         v-model="keyword"
         :readonly="!filter"
-        :name="name"
-        :size="size"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :clear="clear"
+        :name
+        :size
+        :disabled
+        :placeholder
+        :clear
         :on-focus="() => (isFocus = true)"
         :on-blur="() => (isFocus = false)"
       >
diff --git a/packages/fighting-design/skeleton/src/skeleton.vue b/packages/fighting-design/skeleton/src/skeleton.vue
index 99e2c6454a..78ac42156f 100644
--- a/packages/fighting-design/skeleton/src/skeleton.vue
+++ b/packages/fighting-design/skeleton/src/skeleton.vue
@@ -28,7 +28,7 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(['rowGap'])
+  const style = styles(['rowGap'])
 
   /**
    * 如果 loading 为 true 展示骨架屏
@@ -48,7 +48,7 @@
 </script>
 
 <template>
-  <div v-if="isRender" role="section" :class="classList" :style="styleList">
+  <div v-if="isRender" role="section" :class="classList" :style>
     <div v-for="n in rows" :key="n" class="f-skeleton__item" />
   </div>
 
diff --git a/packages/fighting-design/slider/src/slider.vue b/packages/fighting-design/slider/src/slider.vue
index c1b93fb770..65ab5894a7 100644
--- a/packages/fighting-design/slider/src/slider.vue
+++ b/packages/fighting-design/slider/src/slider.vue
@@ -41,11 +41,11 @@
   const classList = classes(['disabled'], 'f-slider')
 
   /** 样式列表 */
-  const styleList = styles(['background', 'activeColor', 'width'])
+  const style = styles(['background', 'activeColor', 'width'])
 </script>
 
 <template>
-  <div ref="sliderEl" role="slider" :class="classList" :style="styleList">
+  <div ref="sliderEl" role="slider" :class="classList" :style>
     <div class="f-slider__road">
       <!-- 进度条 -->
       <div class="f-slider__selected" :style="`width: ${offset}%`" />
diff --git a/packages/fighting-design/space/src/space.vue b/packages/fighting-design/space/src/space.vue
index 346cee6880..91d31b479c 100644
--- a/packages/fighting-design/space/src/space.vue
+++ b/packages/fighting-design/space/src/space.vue
@@ -12,11 +12,11 @@
   const classList = classes(['spacing', 'nowrap', 'vertical'], 'f-space')
 
   /** 类名列表 */
-  const styleList = styles(['rowGap', 'columnGap'])
+  const style = styles(['rowGap', 'columnGap'])
 </script>
 
 <template>
-  <div v-if="$slots.default" role="none" :class="classList" :style="styleList">
+  <div v-if="$slots.default" role="none" :class="classList" :style>
     <slot />
   </div>
 </template>
diff --git a/packages/fighting-design/sticky-card/src/sticky-card.vue b/packages/fighting-design/sticky-card/src/sticky-card.vue
index 8d8950b8af..4ada9db25f 100644
--- a/packages/fighting-design/sticky-card/src/sticky-card.vue
+++ b/packages/fighting-design/sticky-card/src/sticky-card.vue
@@ -32,11 +32,11 @@
   })
 
   /** 样式列表 */
-  const styleList = styles(['borderColor'])
+  const style = styles(['borderColor'])
 </script>
 
 <template>
-  <div class="f-sticky-card" :style="styleList">
+  <div class="f-sticky-card" :style>
     <!-- 展示的内容 -->
     <div v-if="$slots.source" class="f-sticky-card__source">
       <slot name="source" />
diff --git a/packages/fighting-design/svg-icon/src/svg-icon.vue b/packages/fighting-design/svg-icon/src/svg-icon.vue
index 10a281cf33..b081f56f2b 100644
--- a/packages/fighting-design/svg-icon/src/svg-icon.vue
+++ b/packages/fighting-design/svg-icon/src/svg-icon.vue
@@ -19,17 +19,11 @@
   }
 
   /** 样式列表 */
-  const styleList = styles(['size', 'color'])
+  const style = styles(['size', 'color'])
 </script>
 
 <template>
-  <i
-    role="img"
-    class="f-svg-icon"
-    text-indent="middle"
-    :style="styleList"
-    @click="handleClick"
-  >
+  <i role="img" class="f-svg-icon" text-indent="middle" :style @click="handleClick">
     <component :is="icon" v-if="icon" />
     <slot v-else />
   </i>
diff --git a/packages/fighting-design/swap/src/swap.vue b/packages/fighting-design/swap/src/swap.vue
index 57427af5d3..fb5f894870 100644
--- a/packages/fighting-design/swap/src/swap.vue
+++ b/packages/fighting-design/swap/src/swap.vue
@@ -27,6 +27,6 @@
 
 <template>
   <div role="switch" :class="classList" @click="handelClick">
-    <f-svg-icon :icon="modelValue ? iconOn : iconOff" :size="size" />
+    <f-svg-icon :icon="modelValue ? iconOn : iconOff" :size />
   </div>
 </template>
diff --git a/packages/fighting-design/switch/src/switch.vue b/packages/fighting-design/switch/src/switch.vue
index aaeaef3a0b..676bcacca5 100644
--- a/packages/fighting-design/switch/src/switch.vue
+++ b/packages/fighting-design/switch/src/switch.vue
@@ -21,7 +21,7 @@
   }
 
   /** 样式列表 */
-  const styleList = styles(['closeColor', 'activeColor'])
+  const style = styles(['closeColor', 'activeColor'])
 
   /** 类名列表 */
   const classList = classes(['size', 'square'], 'f-switch__input')
@@ -31,7 +31,7 @@
   <div
     role="switch"
     :class="['f-switch', { 'f-switch__disabled': disabled || loading }]"
-    :style="styleList"
+    :style
   >
     <!-- 左侧文字描述 -->
     <span
diff --git a/packages/fighting-design/table/src/table.vue b/packages/fighting-design/table/src/table.vue
index 9b0c93ed81..c39ab5f0aa 100644
--- a/packages/fighting-design/table/src/table.vue
+++ b/packages/fighting-design/table/src/table.vue
@@ -49,7 +49,7 @@
   }
 
   /** 样式列表 */
-  const styleList = styles(['zebraColor', 'bgColor', 'headBgColor', 'height', 'width'])
+  const style = styles(['zebraColor', 'bgColor', 'headBgColor', 'height', 'width'])
 
   /** 类名列表 */
   const classList = classes(['border', 'zebra'], 'f-table')
@@ -118,7 +118,7 @@
 </script>
 
 <template>
-  <div role="table" :class="classList" :style="styleList">
+  <div role="table" :class="classList" :style>
     <!-- 主要容器 -->
     <div class="f-table__container">
       <!-- 内置数据驱动表格 -->
diff --git a/packages/fighting-design/tabs/src/tabs.vue b/packages/fighting-design/tabs/src/tabs.vue
index ae8dfe88b4..9146305df0 100644
--- a/packages/fighting-design/tabs/src/tabs.vue
+++ b/packages/fighting-design/tabs/src/tabs.vue
@@ -130,7 +130,7 @@
   const classList = classes(['position', 'type'], 'f-tabs')
 
   /** 样式列表 */
-  const styleList = styles(['justifyContent'])
+  const style = styles(['justifyContent'])
 
   /** 事件处理 */
   const trigger = computed((): 'click' | 'mouseenter' => {
@@ -139,7 +139,7 @@
 </script>
 
 <template>
-  <div role="tab" :class="classList" :style="styleList">
+  <div role="tab" :class="classList" :style>
     <!-- 头部内容 -->
     <div class="f-tabs__head">
       <!-- 前缀插槽 -->
diff --git a/packages/fighting-design/tag/src/tag.vue b/packages/fighting-design/tag/src/tag.vue
index 2a42be0a43..d064671804 100644
--- a/packages/fighting-design/tag/src/tag.vue
+++ b/packages/fighting-design/tag/src/tag.vue
@@ -13,10 +13,10 @@
   const { classes, styles } = useList(getProp(['size', 'type']), 'tag')
 
   /** 类名列表 */
-  const classList = classes(['simple', 'type', 'size', 'block', 'round', 'line'], 'f-tag')
+  const classs = classes(['simple', 'type', 'size', 'block', 'round', 'line'], 'f-tag')
 
   /** 样式列表 */
-  const styleList = styles(['color', 'background'])
+  const style = styles(['color', 'background'])
 
   /**
    * 点击关闭按钮
@@ -30,7 +30,7 @@
 
 <template>
   <transition name="f-tag" appear>
-    <div :class="classList" :style="styleList" @click="onClick">
+    <div :class="classs" :style @click="onClick">
       <!-- 之前的 icon -->
       <f-svg-icon v-if="beforeIcon" :icon="beforeIcon" />
 
diff --git a/packages/fighting-design/text/src/text.vue b/packages/fighting-design/text/src/text.vue
index dd21aa3b29..6786350e21 100644
--- a/packages/fighting-design/text/src/text.vue
+++ b/packages/fighting-design/text/src/text.vue
@@ -13,7 +13,7 @@
   const classList = classes(['type', 'block', 'bold', 'ellipsis', 'center'], 'f-text')
 
   /** 样式列表 */
-  const styleList = styles([
+  const style = styles([
     'color',
     'background',
     'decoration',
@@ -27,7 +27,7 @@
 </script>
 
 <template>
-  <p :class="classList" :style="styleList">
+  <p :class="classList" :style>
     <slot />
   </p>
 </template>
diff --git a/packages/fighting-design/textarea/src/textarea.vue b/packages/fighting-design/textarea/src/textarea.vue
index c2f63e6f9d..8ef2987432 100644
--- a/packages/fighting-design/textarea/src/textarea.vue
+++ b/packages/fighting-design/textarea/src/textarea.vue
@@ -26,7 +26,7 @@
   const classList = classes(['disabled', 'autoHeight'], 'f-textarea')
 
   /** 样式列表 */
-  const styleList = styles(['resize', 'fontSize'])
+  const style = styles(['resize', 'fontSize'])
 
   /** 改变高度 */
   const changeHeight = async (): Promise<void> => {
@@ -132,17 +132,17 @@
 </script>
 
 <template>
-  <div :class="classList" :style="styleList">
+  <div :class="classList" :style>
     <textarea
       ref="textareaRef"
       v-model="modelValue"
       class="f-textarea__textarea"
-      :rows="rows"
-      :disabled="disabled"
-      :readonly="readonly"
-      :autofocus="autofocus"
-      :placeholder="placeholder"
-      :name="name"
+      :rows
+      :disabled
+      :readonly
+      :autofocus
+      :placeholder
+      :name
       @input="_handleInput"
       @change="handleChange"
       @blur="onBlur"
diff --git a/packages/fighting-design/time-picker/src/time-picker.vue b/packages/fighting-design/time-picker/src/time-picker.vue
index 7186dacfcd..e564408876 100644
--- a/packages/fighting-design/time-picker/src/time-picker.vue
+++ b/packages/fighting-design/time-picker/src/time-picker.vue
@@ -133,20 +133,15 @@
 
 <template>
   <div class="f-time-picker">
-    <f-trigger
-      ref="triggerInstance"
-      trigger="click"
-      :disabled="disabled"
-      :on-open="scrollNow"
-    >
+    <f-trigger ref="triggerInstance" trigger="click" :disabled :on-open="scrollNow">
       <f-input
         v-model="dateModelValue"
         autocomplete="off"
         type="text"
         :placeholder="placeholder || '请选择时间'"
-        :disabled="disabled"
-        :size="size"
-        :clear="clear"
+        :disabled
+        :size
+        :clear
         :after-icon="FIconClockTime"
       />
 
diff --git a/packages/fighting-design/toolbar-item/src/toolbar-item.vue b/packages/fighting-design/toolbar-item/src/toolbar-item.vue
index e112bc7620..ae99ca89f8 100644
--- a/packages/fighting-design/toolbar-item/src/toolbar-item.vue
+++ b/packages/fighting-design/toolbar-item/src/toolbar-item.vue
@@ -21,19 +21,14 @@
   }
 
   /** 样式列表 */
-  const styleList = styles(['color'])
+  const style = styles(['color'])
 
   /** 唯一值 */
   const DATE_KEY: 'data-index' = TOOLBAR_INDEX
 </script>
 
 <template>
-  <span
-    :class="TOOLBAR_ITEM_CLASS_NAME"
-    :[DATE_KEY]="index"
-    :style="styleList"
-    @click="handleClick"
-  >
+  <span :class="TOOLBAR_ITEM_CLASS_NAME" :[DATE_KEY]="index" :style @click="handleClick">
     <f-svg-icon v-if="icon" :size="iconSize" :icon="icon" />
     <slot />
   </span>
diff --git a/packages/fighting-design/toolbar/src/toolbar.vue b/packages/fighting-design/toolbar/src/toolbar.vue
index 928ceb6216..9e165375ee 100644
--- a/packages/fighting-design/toolbar/src/toolbar.vue
+++ b/packages/fighting-design/toolbar/src/toolbar.vue
@@ -51,11 +51,11 @@
   const classList = classes(['size', 'round', 'fixed'], 'f-toolbar')
 
   /** 样式列表 */
-  const styleList = styles(['textColor', 'background', 'width', 'height'])
+  const style = styles(['textColor', 'background', 'width', 'height'])
 </script>
 
 <template>
-  <div role="toolbar" :class="classList" :style="styleList" @click="handleClick">
+  <div role="toolbar" :class="classList" :style @click="handleClick">
     <slot />
   </div>
 </template>
diff --git a/packages/fighting-design/tooltip/src/tooltip.vue b/packages/fighting-design/tooltip/src/tooltip.vue
index 081403486d..486c4e5604 100644
--- a/packages/fighting-design/tooltip/src/tooltip.vue
+++ b/packages/fighting-design/tooltip/src/tooltip.vue
@@ -15,7 +15,7 @@
   )
 
   /** 样式列表 */
-  const styleList = styles(['background', 'fontColor'])
+  const style = styles(['background', 'fontColor'])
 </script>
 
 <template>
@@ -24,7 +24,7 @@
     role="tooltip"
     :f-content="content"
     :class="classList"
-    :style="styleList"
+    :style
   >
     <slot />
   </div>
diff --git a/packages/fighting-design/up-load/src/up-load.vue b/packages/fighting-design/up-load/src/up-load.vue
index 77a73ea6eb..31506bef5c 100644
--- a/packages/fighting-design/up-load/src/up-load.vue
+++ b/packages/fighting-design/up-load/src/up-load.vue
@@ -159,10 +159,10 @@
       ref="inputRef"
       type="file"
       hidden
-      :name="name"
-      :disabled="disabled"
-      :accept="accept"
-      :multiple="multiple"
+      :name
+      :disabled
+      :accept
+      :multiple
       @change="handleChange"
     />
   </div>