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-01 22:15:45 +08:00
1 parent 554fe2945f
commit 9a432e7ab2
5 files changed
+271 -133
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
+121
View File
@@ -0,0 +1,121 @@
<template>
<!-- 状态按钮 (solid) -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal">
Normal
</AButton>
<AButton status="primary">
主按钮
</AButton>
<AButton status="warning">
警告
</AButton>
<AButton status="danger">
危险
</AButton>
<AButton status="success">
成功
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="outline">
Normal
</AButton>
<AButton status="primary" type="outline">
主按钮
</AButton>
<AButton status="warning" type="outline">
警告
</AButton>
<AButton status="danger" type="outline">
危险
</AButton>
<AButton status="success" type="outline">
成功
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="dashed">
Normal
</AButton>
<AButton status="primary" type="dashed">
主按钮
</AButton>
<AButton status="warning" type="dashed">
警告
</AButton>
<AButton status="danger" type="dashed">
危险
</AButton>
<AButton status="success" type="dashed">
成功
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" type="text">
Normal
</AButton>
<AButton status="primary" type="text">
主按钮
</AButton>
<AButton status="warning" type="text">
警告
</AButton>
<AButton status="danger" type="text">
危险
</AButton>
<AButton status="success" type="text">
成功
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" disabled>
禁用
</AButton>
<AButton status="primary" disabled>
禁用
</AButton>
<AButton type="outline" disabled>
禁用
</AButton>
<AButton type="dashed" disabled>
禁用
</AButton>
<AButton type="text" disabled>
禁用
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="normal" loading>
loading
</AButton>
<AButton status="primary" loading>
loading
</AButton>
<AButton type="outline" loading>
loading
</AButton>
<AButton type="dashed" loading>
loading
</AButton>
<AButton type="text" loading>
loading
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<AButton status="primary" size="small">
small
</AButton>
<AButton status="primary" size="medium">
medium
</AButton>
<AButton status="primary" size="large">
large
</AButton>
</div>
</template>
code/base-project/base-vue/packages/ao-design/src/button/index.scss
+15 -15
View File
@@ -5,22 +5,24 @@ $btn-prefix: #{$prefix}-btn;
$btn-hover-bgcolor: #f4f5f5;
$btn-active-bgcolor: #eceded;
/* ====== 通用颜色交互函数 ====== */
/* ====== 通用颜色交互函数（新版写法） ====== */
@function color-hover($color, $amount: 8%) {
$l: color.lightness($color);
$l: color.channel($color, 'lightness', $space: hsl);
@if $l > 50% {
@return color.adjust($color, $lightness: -$amount);
// 亮色：向暗靠近
@return color.scale($color, $lightness: -$amount);
} @else {
@return color.adjust($color, $lightness: $amount);
// 暗色：向亮靠近
@return color.scale($color, $lightness: $amount);
}
}
@function color-active($color, $amount: 12%) {
$l: color.lightness($color);
$l: color.channel($color, 'lightness', $space: hsl);
@if $l > 50% {
@return color.adjust($color, $lightness: -$amount);
@return color.scale($color, $lightness: -$amount);
} @else {
@return color.adjust($color, $lightness: $amount);
@return color.scale($color, $lightness: $amount);
}
}
@@ -31,12 +33,11 @@ $btn-active-bgcolor: #eceded;
gap: 4px;
box-sizing: border-box;
user-select: none;
border-radius: 3px;
border-radius: 2px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 600;
font-weight: 500;
&-block {
width: 100%;
}
@@ -96,7 +97,6 @@ $btn-active-bgcolor: #eceded;
/* ===== Outline 按钮 ===== */
&-outline {
font-weight: 500;
background: transparent;
@each $status,
@@ -124,7 +124,6 @@ $btn-active-bgcolor: #eceded;
/* ===== Dashed 按钮 ===== */
&-dashed {
font-weight: 500;
background: transparent;
border: 1px dashed currentColor;
@@ -153,7 +152,6 @@ $btn-active-bgcolor: #eceded;
/* ===== Text 按钮 ===== */
&-text {
font-weight: 500;
background: transparent;
border: none;
@@ -185,14 +183,16 @@ $btn-active-bgcolor: #eceded;
padding: 0 12px;
font-size: 12px;
}
&-medium {
height: 28px;
padding: 0 14px;
font-size: 14px;
font-size: 12px;
}
&-large {
height: 32px;
padding: 0 16px;
font-size: 14px;
font-size: 13px;
}
}