perf: 主题优化

daidaibg · Apr 2, 2024 · 04ae8a7 · 04ae8a7
1 parent 251b9b3
commit 04ae8a7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 31 deletions.
diff --git a/packages/assets/theme/buttton.scss b/packages/assets/theme/buttton.scss
@@ -48,7 +48,7 @@ button,
   z-index: 1;
 }
 
-.#{$prefix-button}:not(.t-is-disabled):not(.t-button--ghost) {
+.#{$prefix-button}:not(.yh-is-disabled):not(.yh-button--ghost) {
   --ripple-color: var(--yh-bg-color-container-active);
 }
 
@@ -123,7 +123,7 @@ button,
   --ripple-color: var(--yh-bg-color-container-active);
 }
 
-/* 文字按钮 默认主题*/
+/************************ 文字按钮 默认主题*************************************/
 .#{$prefix-button}--variant-text.#{$prefix-button}--theme-default.yh-is-disabled {
   color: var(--yh-text-color-disabled);
 }
@@ -143,17 +143,18 @@ button,
   }
 }
 
-/* 虚线按钮 描边按钮 基础 */
+/************************* 虚线按钮、描边按钮 基础 **************************/
 
 .#{$prefix-button}--variant-dashed,
 .#{$prefix-button}--variant-outline {
   color: var(--yh-text-color-primary);
   background-color: var(--yh-bg-color-specialcomponent);
   border-color: var(--yh-border-level-2-color);
   &:hover ,&:focus-visible{
-    color: var(--yh-text-color-primary);
+    color:var(--yh-brand-color-hover);
     background-color: var(--yh-bg-color-specialcomponent);
-    border-color: var(--yh-border-level-2-color);
+    border-color: var(--yh-brand-color-hover);;
+
   }
   &.yh-is-disabled {
     color: var(--yh-text-color-disabled);
@@ -191,7 +192,7 @@ button,
   }
 }
 
-/************************************************* button variant-default 默认主题 ******************************************************************************/
+/************************************************* button variant-default 默认主题  base形状******************************************************************************/
 .#{$prefix-button}--variant-base {
   &.#{$prefix-button}--theme-default {
     background-color: var(--yh-bg-color-component);

diff --git a/packages/assets/theme/modules/button.css b/packages/assets/theme/modules/button.css
@@ -201,6 +201,23 @@ button,
 }
 
 /* 线框按钮 默认主题*/
+.yh-button--variant-outline.yh-button--theme-default,
+.yh-button--variant-dashed.yh-button--theme-default {
+  color: var(--yh-brand-color);
+  border-color: var(--yh-brand-color);
+}
+
+.yh-button--variant-outline.yh-button--theme-default:hover,
+.yh-button--variant-dashed.yh-button--theme-default:hover,
+.yh-button--variant-outline.yh-button--theme-default:focus-visible,
+.yh-button--variant-dashed.yh-button--theme-default:focus-visible {
+  border-color: var(--yh-brand-color-hover);
+  background-color: var(--yh-bg-color-specialcomponent);
+  color: var(--yh-brand-color-hover);
+}
+
+
+
 
 /***********************************button variant-base & theme-primary  主要颜色********************************************************************/
 .yh-button--variant-base.yh-button--theme-primary {

diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
@@ -1,27 +1,20 @@
 // default/primary/danger/warning/success
-import type {PropType} from "vue"
+import type { PropType } from "vue";
 
-export const buttonVariants = [
-  'base',
-  'outline',
-  'dashed',
-  'text',
-  '',
-] as const
+export const buttonVariants = ["base", "outline", "dashed", "text", ""] as const;
 export const ButtonProps = {
   theme: {
-    type: String,
+    type: String as PropType<"default" | "primary" | "danger" | "warning" | "success" | string>,
     default: "default",
   },
   //按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text
   variant: {
-    type: String,
-    values:buttonVariants,
+    type: String as PropType<"base" | "outline" | "dashed" | "text">,
+    values: buttonVariants,
     default: "base",
   },
-  // // small/medium/large
   size: {
-    type: String,
+    type: String as PropType<"small" | "medium" | "large">,
     default: () => "medium",
   },
   disabled: {
@@ -48,11 +41,7 @@ export const ButtonProps = {
   },
   //按钮类型 原生属性
   type: {
-    type: String as PropType<"button" | "submit" | "reset"|undefined>,
+    type: String as PropType<"button" | "submit" | "reset" | undefined>,
     default: () => "button",
-  }
-
-} as const
-
-
-
+  },
+} as const;
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
@@ -19,11 +19,7 @@
     ref="btnRef"
   >
     <!-- v-bind="$attrs" -->
-    <div
-      class="yh-icons-loading"
-      style="margin-right: 6px"
-      v-if="loading"
-    ></div>
+    <div class="yh-icons-loading" style="margin-right: 6px" v-if="loading"></div>
     <span class="yh-button__text">
       <slot></slot>
     </span>