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-hover-bgcolor: #f4f5f5;
$btn-active-bgcolor: #eceded; $btn-active-bgcolor: #eceded;
/* ====== 通用颜色交互函数 ====== */ /* ====== 通用颜色交互函数（新版写法） ====== */
@function color-hover($color, $amount: 8%) { @function color-hover($color, $amount: 8%) {
$l: color.lightness($color); $l: color.channel($color, 'lightness', $space: hsl);
@if $l > 50% { @if $l > 50% {
@return color.adjust($color, $lightness: -$amount); // 亮色：向暗靠近
@return color.scale($color, $lightness: -$amount);
} @else { } @else {
@return color.adjust($color, $lightness: $amount); // 暗色：向亮靠近
@return color.scale($color, $lightness: $amount);
} }
} }
@function color-active($color, $amount: 12%) { @function color-active($color, $amount: 12%) {
$l: color.lightness($color); $l: color.channel($color, 'lightness', $space: hsl);
@if $l > 50% { @if $l > 50% {
@return color.adjust($color, $lightness: -$amount); @return color.scale($color, $lightness: -$amount);
} @else { } @else {
@return color.adjust($color, $lightness: $amount); @return color.scale($color, $lightness: $amount);
} }
} }
@@ -31,12 +33,11 @@ $btn-active-bgcolor: #eceded;
gap: 4px; gap: 4px;
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
border-radius: 3px; border-radius: 2px;
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
font-weight: 600; font-weight: 500;
&-block { &-block {
width: 100%; width: 100%;
} }
@@ -96,7 +97,6 @@ $btn-active-bgcolor: #eceded;
/* ===== Outline 按钮 ===== */ /* ===== Outline 按钮 ===== */
&-outline { &-outline {
font-weight: 500;
background: transparent; background: transparent;
@each $status, @each $status,
@@ -124,7 +124,6 @@ $btn-active-bgcolor: #eceded;
/* ===== Dashed 按钮 ===== */ /* ===== Dashed 按钮 ===== */
&-dashed { &-dashed {
font-weight: 500;
background: transparent; background: transparent;
border: 1px dashed currentColor; border: 1px dashed currentColor;
@@ -153,7 +152,6 @@ $btn-active-bgcolor: #eceded;
/* ===== Text 按钮 ===== */ /* ===== Text 按钮 ===== */
&-text { &-text {
font-weight: 500;
background: transparent; background: transparent;
border: none; border: none;
@@ -185,14 +183,16 @@ $btn-active-bgcolor: #eceded;
padding: 0 12px; padding: 0 12px;
font-size: 12px; font-size: 12px;
} }
&-medium { &-medium {
height: 28px; height: 28px;
padding: 0 14px; padding: 0 14px;
font-size: 14px; font-size: 12px;
} }
&-large { &-large {
height: 32px; height: 32px;
padding: 0 16px; padding: 0 16px;
font-size: 14px; font-size: 13px;
} }
} }
code/base-project/base-vue/packages/ao-design/src/input/index.scss
+66 -2
View File
@@ -1,7 +1,71 @@
@use '../_styles/theme/index' as *; @use '../_styles/theme/index' as *;
@use 'sass:color';
$input-prefix: #{$prefix}-input; $input-prefix: #{$prefix}-input;
.#{$input-prefix} { .#{$input-prefix}-wrapper {
border-color: #d9d9d9; display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
border: 1px solid #d9d9d9;
border-radius: 2px;
background-color: #fff;
color: #000000d9;
transition:
border-color 0.2s,
box-shadow 0.2s;
&:hover:not(&-disabled) {
border-color: $primary-color;
}
&:focus-within:not(&-disabled) {
border-color: $primary-color;
box-shadow: 0 0 0 1px color.change($primary-color, $alpha: 0.1);
}
&-disabled {
color: #00000040;
background-color: #f5f5f5;
border-color: #d9d9d9;
cursor: not-allowed;
}
/* 尺寸变体 */
&-small {
height: 24px;
font-size: 12px;
}
&-medium {
height: 28px;
font-size: 14px;
}
&-large {
height: 32px;
font-size: 16px;
}
} }
.#{$input-prefix}-inner {
flex: 1;
border: none;
outline: none;
background: transparent;
width: 100%;
height: 100%;
font-family: inherit;
&::placeholder {
color: #00000040;
}
}
.#{$input-prefix}-icon {
display: flex;
align-items: center;
justify-content: center;
color: #00000040;
margin: 0 4px;
}
code/base-project/base-vue/packages/ao-design/src/input/index.tsx
+46 -9
View File
@@ -1,23 +1,60 @@
import { computed, defineComponent, ref } from 'vue' import type { PropType } from 'vue'
import { computed, defineComponent, h, ref } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls' import { getPrefixCls } from '../_utils/getPrefixCls'
import Icon from '../icon'
export default defineComponent({ export default defineComponent({
name: 'AInput', name: 'AInput',
setup() { props: {
size: {
type: String as PropType<'small' | 'medium' | 'large'>,
default: 'medium',
},
placeholder: String,
disabled: Boolean,
prefixIcon: String,
suffixIcon: String,
},
setup(props, { slots }) {
const inputRef = ref<HTMLInputElement | null>(null) const inputRef = ref<HTMLInputElement | null>(null)
// 使用统一前缀
const prefixCls = getPrefixCls('input') const prefixCls = getPrefixCls('input')
const cls = computed(() => [prefixCls])
const wrapperCls = computed(() => [
`${prefixCls}-wrapper`,
`${prefixCls}-wrapper-${props.size}`,
{ [`${prefixCls}-wrapper-disabled`]: props.disabled },
])
const iconSizeMap: Record<string, number> = { small: 12, medium: 14, large: 16 }
const renderIcon = (slot: any, iconProp?: string) => {
if (slot)
return typeof slot === 'function' ? slot() : slot
if (iconProp)
return h(Icon, { icon: iconProp, width: iconSizeMap[props.size], height: iconSizeMap[props.size] })
return null
}
return () => ( return () => (
<div class={`${prefixCls}-wrapper`} style={{ display: 'inline-block' }}> <div class={wrapperCls.value}>
{(slots.prefix || props.prefixIcon) && (
<span class={`${prefixCls}-icon`}>
{renderIcon(slots.prefix, props.prefixIcon)}
</span>
)}
<input <input
ref={inputRef} ref={inputRef}
class={cls.value} class={`${prefixCls}-inner`}
type="text" placeholder={props.placeholder}
placeholder="请输入" disabled={props.disabled}
/> />
{(slots.suffix || props.suffixIcon) && (
<span class={`${prefixCls}-icon`}>
{renderIcon(slots.suffix, props.suffixIcon)}
</span>
)}
</div> </div>
) )
}, },
code/base-project/base-vue/src/App.vue
+23 -107
View File
@@ -2,114 +2,30 @@
</script> </script>
<template> <template>
<!-- 状态按钮 (solid) --> <div style="display: flex; gap: 12px; flex-wrap: wrap; width: 300px;">
<div style="display: flex; gap: 8px; margin-bottom: 16px;"> <!-- small 输入框，使用 slot 图标 -->
<AButton status="normal"> <AInput size="small" placeholder="Small 输入框">
Normal <template #prefix>
</AButton> <AIcon icon="material-symbols:10k-outline" />
<AButton status="primary"> </template>
主按钮 <template #suffix>
</AButton> <AIcon icon="material-symbols:10k-outline" />
<AButton status="warning"> </template>
警告 </AInput>
</AButton>
<AButton status="danger">
危险
</AButton>
<AButton status="success">
成功
</AButton>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;"> <!-- medium 输入框，使用 prop 图标 -->
<AButton status="normal" type="outline"> <AInput
Normal size="medium"
</AButton> placeholder="Medium 输入框"
<AButton status="primary" type="outline"> prefix-icon="material-symbols:10k-outline"
主按钮 suffix-icon="material-symbols:10k-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;"> <!-- large 输入框，prefix 用 slot，suffix 用 prop -->
<AButton status="normal" type="dashed"> <AInput size="large" placeholder="Large 输入框" suffix-icon="material-symbols:10k-outline">
Normal <template #prefix>
</AButton> <AIcon icon="material-symbols:10k-outline" />
<AButton status="primary" type="dashed"> </template>
主按钮 </AInput>
</AButton>
<AButton status="warning" type="dashed">
警告
</AButton>
<AButton status="danger" type="dashed">
危险
</AButton>
<AButton status="success" type="dashed">
成功
</AButton>
</div> </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>
<AInput />
</template> </template>