base-vue支持组件库支持前缀类名

code/base-project/base-vue/packages/ao-design/src/button/index.scss

@@ -1,95 +1,29 @@
-/* 基本按钮样式 */
-.btn {
-  height: 40px; /* 增大按钮高度 */
-  padding: 0 24px; /* 左右内边距增加 */
-  font-size: 14px;
-  font-weight: 500; /* 加粗字体 */
-  border-radius: 6px; /* 增大圆角 */
+@import '../_styles/theme/index.scss';
+
+// 按钮基础样式示例
+.#{$prefix}-btn {
+  padding: 6px 16px;
+  border-radius: 4px;
   border: 1px solid transparent;
   cursor: pointer;
-  transition: all 0.3s ease; /* 平滑过渡效果 */
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 默认阴影效果 */
-}
 
-/* 主色按钮 */
-.btn-primary {
-  background: $primary-color; /* 使用主题色 */
-  color: #fff;
-  border: 1px solid $primary-color; /* 与背景颜色一致的边框 */
-}
+  &-default {
+    background: #fff;
+    border-color: $border-color;
+    color: $text-secondary-color;
+  }
 
-.btn-primary:hover {
-  background: darken($primary-color, 10%); /* 悬停效果 */
-  border-color: darken($primary-color, 10%);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时阴影加重 */
-}
+  &-primary {
+    background: $primary-color;
+    color: #fff;
 
-/* 辅助色按钮 */
-.btn-secondary {
-  background: $secondary-color; /* 使用辅助色 */
-  color: #fff;
-  border: 1px solid $secondary-color; /* 边框颜色 */
-}
+    &:hover {
+      background: $primary-hover-color;
+    }
+  }
 
-.btn-secondary:hover {
-  background: darken($secondary-color, 10%);
-  border-color: darken($secondary-color, 10%);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
-}
-
-/* 成功色按钮 */
-.btn-success {
-  background: $success-color; /* 成功色 */
-  color: #fff;
-  border: 1px solid $success-color; /* 边框颜色 */
-}
-
-.btn-success:hover {
-  background: darken($success-color, 10%);
-  border-color: darken($success-color, 10%);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
-}
-
-/* 警告色按钮 */
-.btn-warning {
-  background: $warning-color; /* 警告色 */
-  color: #fff;
-  border: 1px solid $warning-color; /* 边框颜色 */
-}
-
-.btn-warning:hover {
-  background: darken($warning-color, 10%);
-  border-color: darken($warning-color, 10%);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
-}
-
-/* 危险色按钮 */
-.btn-danger {
-  background: $danger-color; /* 危险色 */
-  color: #fff;
-  border: 1px solid $danger-color; /* 边框颜色 */
-}
-
-.btn-danger:hover {
-  background: darken($danger-color, 10%);
-  border-color: darken($danger-color, 10%);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
-}
-
-/* 链接按钮 */
-.btn-link {
-  background: transparent;
-  color: $primary-color;
-  padding: 0 16px;
-  font-size: 14px;
-  font-weight: 500;
-  border: none;
-  text-decoration: none;
-}
-
-.btn-link:hover {
-  text-decoration: underline;
+  &-danger {
+    background: $danger-color;
+    color: #fff;
+  }
 }

code/base-project/base-vue/packages/ao-design/src/button/index.tsx

@@ -1,26 +1,14 @@
-import type { PropType } from 'vue'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
 
 export default defineComponent({
-  name: 'Button',
+  name: 'AButton',
   props: {
-    type: {
-      type: String as PropType<'primary' | 'secondary' | 'danger' | 'link'>,
-      default: 'primary',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    type: { type: String as () => 'primary' | 'danger' | 'default', default: 'default' },
   },
   setup(props, { slots }) {
-    const baseClass = 'btn'
-    const typeClass = `btn-${props.type}`
-
-    return () => (
-      <button class={`${baseClass} ${typeClass}`} disabled={props.disabled}>
-        {slots.default?.()}
-      </button>
-    )
+    const prefixCls = getPrefixCls('btn')
+    const cls = computed(() => [prefixCls, `${prefixCls}-${props.type}`])
+    return () => <button class={cls.value}>{slots.default?.()}</button>
   },
 })