oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-09-04 17:31:49 +08:00
1 parent 068fcb7649
commit 1a33497c5d
29 files changed
+889 -306
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-vue/packages/ao-design/src/button/demo.vue
+13 -14
View File
@@ -1,7 +1,6 @@
<template>
<!-- 状态按钮 (solid) -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal">
<div style="display: flex; gap: 8px;">
<AButton>
Normal
</AButton>
<AButton status="primary">
@@ -18,8 +17,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="outline">
<div style="display: flex; gap: 8px;">
<AButton type="outline">
Normal
</AButton>
<AButton status="primary" type="outline">
@@ -36,8 +35,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="dashed">
<div style="display: flex; gap: 8px;">
<AButton type="dashed">
Normal
</AButton>
<AButton status="primary" type="dashed">
@@ -54,8 +53,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="text">
<div style="display: flex; gap: 8px;">
<AButton type="text">
Normal
</AButton>
<AButton status="primary" type="text">
@@ -72,8 +71,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" disabled>
<div style="display: flex; gap: 8px;">
<AButton disabled>
禁用
</AButton>
<AButton status="primary" disabled>
@@ -90,8 +89,8 @@
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" loading>
<div style="display: flex; gap: 8px;">
<AButton loading>
loading
</AButton>
<AButton status="primary" loading>
@@ -107,7 +106,7 @@
loading
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<div style="display: flex; gap: 8px;">
<AButton status="primary" size="small">
small
</AButton>
code/base-project/base-vue/packages/ao-design/src/button/index.scss
+222 -17
View File
@@ -17,6 +17,7 @@ $btn-prefix: #{$prefix}-btn;
transition: all 0.2s ease;
font-weight: 500;
border: 1px solid transparent;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
&-small {
height: 24px;
@@ -64,47 +65,47 @@ $btn-prefix: #{$prefix}-btn;
}
&-solid {
&.#{$btn-prefix}-status-normal {
background: $bg-color-component;
color: $text-color-primary;
&.#{$btn-prefix}-status-default {
background: $default-color;
color: $text-color-base;
&:hover:enabled {
background: $bg-color-component-hover;
background: $default-color-hover;
}
&:active:enabled {
background: $bg-color-component-active;
background: $default-color-active;
}
}
&.#{$btn-prefix}-status-primary {
background: $primary;
color: $text-anti;
background: $primary-color;
color: $text-color-anti;
&:hover:enabled {
background: $primary-hover;
background: $primary-color-hover;
}
&:active:enabled {
background: $primary-active;
background: $primary-color-active;
}
}
&.#{$btn-prefix}-status-danger {
background: $danger;
color: $text-anti;
background: $danger-color;
color: $text-color-anti;
&:hover:enabled {
background: $danger-hover;
background: $danger-color-hover;
}
&:active:enabled {
background: $danger-active;
background: $danger-color-active;
}
}
&.#{$btn-prefix}-status-warning {
background: $danger;
color: $text-anti;
background: $warning-color;
color: $text-color-anti;
&:hover:enabled {
background: $danger-hover;
background: $warning-color-hover;
}
&:active:enabled {
background: $danger-active;
background: $warning-color-active;
}
}
&.#{$btn-prefix}-status-success {
@@ -118,4 +119,208 @@ $btn-prefix: #{$prefix}-btn;
}
}
}
&-outline {
&.#{$btn-prefix}-status-default {
background: $bg-color-control;
color: $text-color-base;
border-color: $border-color;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-primary {
background: $bg-color-control;
color: $primary-color;
border-color: $primary-color;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-danger {
background: $bg-color-control;
color: $danger-color;
border-color: $danger-color;
&:hover:enabled {
color: $danger-color-hover;
border-color: $danger-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-warning {
background: $bg-color-control;
color: $warning-color;
border-color: $warning-color;
&:hover:enabled {
color: $warning-color-hover;
border-color: $warning-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-success {
background: $bg-color-control;
color: $success-color;
border-color: $success-color;
&:hover:enabled {
color: $success-color-hover;
border-color: $success-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
}
&-dashed {
&.#{$btn-prefix}-status-default {
background: $bg-color-control;
color: $text-color-base;
border-color: $border-color;
border-style: dashed;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-primary {
background: $bg-color-control;
color: $primary-color;
border-color: $primary-color;
border-style: dashed;
&:hover:enabled {
color: $primary-color-hover;
border-color: $primary-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-danger {
background: $bg-color-control;
color: $danger-color;
border-color: $danger-color;
border-style: dashed;
&:hover:enabled {
color: $danger-color-hover;
border-color: $danger-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-warning {
background: $bg-color-control;
color: $warning-color;
border-color: $warning-color;
border-style: dashed;
&:hover:enabled {
color: $warning-color-hover;
border-color: $warning-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
&.#{$btn-prefix}-status-success {
background: $bg-color-control;
color: $success-color;
border-color: $success-color;
border-style: dashed;
&:hover:enabled {
color: $success-color-hover;
border-color: $success-color-hover;
}
&:active:enabled {
background: $default-color-hover;
}
}
}
&-text {
&.#{$btn-prefix}-status-default {
color: $text-color-base;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $text-color-base;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-primary {
color: $primary-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $primary-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-danger {
color: $danger-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $danger-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-warning {
color: $warning-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $warning-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
&.#{$btn-prefix}-status-success {
color: $success-color;
background-color: transparent;
border-color: transparent;
&:hover:enabled {
color: $success-color-hover;
background-color: $default-color-hover;
}
&:active:enabled {
background-color: $default-color-active;
}
}
}
}
code/base-project/base-vue/packages/ao-design/src/button/index.tsx
+2 -2
View File
@@ -11,8 +11,8 @@ export default defineComponent({
default: 'solid',
},
status: {
type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'normal',
default: 'normal',
type: String as () => 'primary' | 'danger' | 'warning' | 'success' | 'default',
default: 'default',
},
disabled: { type: Boolean, default: false },
loading: { type: Boolean, default: false },