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-13 17:28:55 +08:00
1 parent 985b42cafb
commit 5e3dccc88b
25 files changed
+931 -543
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/_hooks/useSelectable.ts
+47
View File
@@ -0,0 +1,47 @@
import type { Ref } from 'vue'
import { ref } from 'vue'
export interface UseSelectableProps<T> {
modelValue: T[]
multiple?: boolean
options?: Record<string, any>[]
valueField?: string
}
export function useSelectable<T>(
props: UseSelectableProps<T>,
onChange?: (selectedValues: T[], selectedOptions?: Record<string, any>[]) => void,
) {
const valueField = props.valueField || 'value'
// 修复：使用泛型参数明确指定 ref 的类型
const selectedValues = ref<T[]>(props.modelValue) as Ref<T[]>
const updateValue = (option: Record<string, any>, checked: boolean) => {
const val = option[valueField] as T
let newValues: T[]
if (props.multiple) {
newValues = checked
? selectedValues.value.includes(val)
? [...selectedValues.value]
: [...selectedValues.value, val]
: selectedValues.value.filter(v => v !== val)
}
else {
newValues = checked ? [val] : []
}
selectedValues.value = newValues
// 如果有 options，返回完整对象数组
const selectedOptions = props.options?.filter(opt => newValues.includes(opt[valueField]))
onChange?.(newValues, selectedOptions)
}
return {
selectedValues,
updateValue,
}
}
code/base-project/base-vue/packages/ao-design/src/_styles/_variables.scss
+1 -1
View File
@@ -66,7 +66,7 @@ $text-color-anti: var(--ao-text-color-anti); // 色彩-文字-反色
$text-color-link: var(--ao-text-color-link); // 色彩-文字-链接
$border-radius: 2px;
$stroke-color: var(--ao-stroke-color); // 分割线（内容区域之间的分隔，如列表、面板内部）
$separator-color: var(--ao-separator-color); // 分割线（内容区域之间的分隔，如列表、面板内部）
$border-color: var(--ao-border-color); // 组件边框（Input、Select、Card 等容器的外部边框）
$bg-color-control: var(
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_dark.scss
+1 -1
View File
@@ -56,7 +56,7 @@
--ao-text-color-link: #4582e6; /* 链接文字 */
--ao-text-color-watermark: rgba(255, 255, 255, 10%); /* 水印 / 背景文字 */
--ao-stroke-color: #393939; // 分割线
--ao-separator-color: #393939; // 分割线
--ao-border-color: #5e5e5e; // 边框
--ao-bg-color-control: transparent; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_font.scss
-70
View File
@@ -1,70 +0,0 @@
// 字体相关token
:root {
// 字体family token
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
// 字体大小 token
--td-font-size-link-small: 12px;
--td-font-size-link-medium: 14px;
--td-font-size-link-large: 16px;
--td-font-size-mark-small: 12px;
--td-font-size-mark-medium: 14px;
--td-font-size-body-small: 12px;
--td-font-size-body-medium: 13px;
--td-font-size-body-large: 1px;
--td-font-size-title-small: 14px;
--td-font-size-title-medium: 16px;
--td-font-size-title-large: 18px;
--td-font-size-title-extraLarge: 20px;
--td-font-size-headline-small: 24px;
--td-font-size-headline-medium: 28px;
--td-font-size-headline-large: 36px;
--td-font-size-display-medium: 48px;
--td-font-size-display-large: 64px;
// 字体行高 token
--td-line-height-link-small: 20px;
--td-line-height-link-medium: 22px;
--td-line-height-link-large: 24px;
--td-line-height-mark-small: 20px;
--td-line-height-mark-medium: 22px;
--td-line-height-body-small: 20px;
--td-line-height-body-medium: 22px;
--td-line-height-body-large: 24px;
--td-line-height-title-small: 22px;
--td-line-height-title-medium: 24px;
--td-line-height-title-large: 26px;
--td-line-height-title-extraLarge: 28px;
--td-line-height-headline-small: 32px;
--td-line-height-headline-medium: 36px;
--td-line-height-headline-large: 44px;
--td-line-height-display-medium: 56px;
--td-line-height-display-large: 72px;
// font token
--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
var(--td-font-family);
--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
--td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
var(--td-font-family);
--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
var(--td-font-family);
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
var(--td-font-family);
--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
var(--td-font-family);
--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
var(--td-font-family);
--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
var(--td-font-family);
}
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_light.scss
+1 -1
View File
@@ -57,7 +57,7 @@
--ao-text-color-link: #003cab; /* 链接文字 */
--ao-text-color-watermark: rgba(0, 0, 0, 10%); /* 水印 / 背景文字 */
--ao-stroke-color: #e8e8e8; // 分割线
--ao-separator-color: #e8e8e8; // 分割线
--ao-border-color: #ddd; // 边框
--ao-bg-color-control: #fff; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_radius.scss
-10
View File
@@ -1,10 +0,0 @@
// border-radius相关 token
:root {
--td-radius-small: 2px;
--td-radius-default: 3px;
--td-radius-medium: 6px;
--td-radius-large: 9px;
--td-radius-extraLarge: 12px;
--td-radius-round: 999px;
--td-radius-circle: 50%;
}
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_size.scss
-19
View File
@@ -1,19 +0,0 @@
// size/margin/padding相关 token
:root {
--td-size-2: 2px;
--td-size-4: 4px;
--td-size-6: 6px;
--td-size-8: 8px;
--td-size-12: 12px;
--td-size-16: 16px;
--td-size-20: 20px;
--td-size-24: 24px;
--td-size-28: 28px;
--td-size-32: 32px;
--td-size-36: 36px;
--td-size-40: 40px;
--td-size-48: 48px;
--td-size-56: 56px;
--td-size-64: 64px;
--td-size-72: 72px;
}
code/base-project/base-vue/packages/ao-design/src/components.ts
+3
View File
@@ -6,6 +6,9 @@ export { default as Icon } from './icon'
export { default as Input } from './input'
export { default as Popconfirm } from './popconfirm'
export { default as Popup } from './popup'
export { default as Radio } from './radio'
export { default as Separator } from './separator'
export { default as Space } from './space'
export { default as Spin } from './spin'
export { default as Tag } from './tag'
export { default as TagGroup } from './tag-group'
code/base-project/base-vue/packages/ao-design/src/index.scss
+3
View File
@@ -13,3 +13,6 @@
@use './tooltip/index.scss' as *;
@use './tag/index.scss' as *;
@use './tag-group/index.scss' as *;
@use './space/index.scss' as *;
@use './separator/index.scss' as *;
@use './radio/index.scss' as *;
code/base-project/base-vue/packages/ao-design/src/popconfirm/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import type { PropType, VNode } from 'vue'
import { defineComponent, ref, watch } from 'vue'
import { defineComponent, ref } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Button from '../button/index'
import Icon from '../icon/index'
code/base-project/base-vue/packages/ao-design/src/radio/index.scss
+82
View File
@@ -0,0 +1,82 @@
@use '../_styles/_variables.scss' as *;
$radio-prefix: '#{$prefix}-radio';
.#{$radio-prefix} {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
user-select: none;
&-wrapper {
position: relative;
width: 16px;
height: 16px;
input[type='radio'] {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
z-index: 2;
}
& .#{$radio-prefix}-circle {
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 50%;
background-color: #fff;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
// 勾选圆点
input[type='radio']:checked + .#{$radio-prefix}-circle::after {
content: '';
width: 8px;
height: 8px;
background-color: #1890ff;
border-radius: 50%;
display: block;
animation: scaleIn 0.2s ease forwards;
box-shadow: 0 0 6px #1890ff33; // #33 = 20% 透明度
}
}
&-content {
display: flex;
flex-direction: column;
}
&-disabled {
cursor: not-allowed;
opacity: 0.5;
}
&-clicked {
.#{$radio-prefix}-circle {
transform: scale(0.9);
transition: transform 0.15s ease;
}
}
}
@keyframes scaleIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
code/base-project/base-vue/packages/ao-design/src/radio/index.tsx
+71
View File
@@ -0,0 +1,71 @@
import { computed, defineComponent, ref } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
export default defineComponent({
name: 'AnimatedRadio',
props: {
modelValue: {
type: [String, Number, Boolean],
default: null,
},
value: {
type: [String, Number, Boolean],
required: true,
},
disabled: {
type: Boolean,
default: false,
},
class: {
type: [String, Array, Object],
default: '',
},
style: {
type: Object,
default: () => ({}),
},
},
emits: ['update:modelValue'],
setup(props, { slots, emit }) {
const prefixCls = getPrefixCls('radio')
const isClicked = ref(false)
const checked = computed(() => props.modelValue === props.value)
const handleChange = () => {
if (!props.disabled) {
emit('update:modelValue', props.value)
// 播放点击动画
isClicked.value = true
setTimeout(() => (isClicked.value = false), 300)
}
}
return () => (
<label
class={[
prefixCls,
props.class,
checked.value ? `${prefixCls}-checked` : '',
props.disabled ? `${prefixCls}-disabled` : '',
isClicked.value ? `${prefixCls}-clicked` : '',
]}
style={{ ...props.style }}
>
<div class={`${prefixCls}-wrapper`}>
<input
type="radio"
value={props.value}
checked={checked.value}
disabled={props.disabled}
onChange={handleChange}
/>
<span class={`${prefixCls}-circle`} />
</div>
<div class={`${prefixCls}-content`}>
{slots.default ? slots.default() : null}
</div>
</label>
)
},
})
code/base-project/base-vue/packages/ao-design/src/separator/demo.vue
+55
View File
@@ -0,0 +1,55 @@
<script setup lang="ts">
</script>
<template>
<div style="padding:20px; max-width:600px;">
<h3>1. 简单水平分割线</h3>
<ASeparator />
<h3>2. 垂直分割线</h3>
<div style="display:flex; align-items:center; gap:16px;">
<span>左</span>
<ASeparator layout="vertical" />
<span>右</span>
</div>
<h3>3. 虚线分割线</h3>
<ASeparator dashed />
<div style="display:flex; align-items:center; gap:16px; margin-top:8px;">
<span>左</span>
<ASeparator layout="vertical" dashed />
<span>右</span>
</div>
<h3>4. 水平分割线带文字</h3>
<ASeparator content="分割文字" align="center" />
<ASeparator content="左侧文字" align="left" />
<ASeparator content="右侧文字" align="right" />
<h3>5. 使用插槽自定义内容</h3>
<ASeparator>
<strong style="color:red">自定义内容</strong>
</ASeparator>
<h3>6. 配合 ASpace 使用 separator</h3>
<ASpace size="middle" separator>
<div style="width:60px;height:40px;background:#eee;">
A
</div>
<div style="width:60px;height:40px;background:#ccc;">
B
</div>
<div style="width:60px;height:40px;background:#aaa;">
C
</div>
</ASpace>
<h3>7. 带自定义 margin</h3>
<ASeparator :margin="12" />
<div style="display:flex; align-items:center; gap:16px; margin-top:8px;">
<span>左</span>
<ASeparator layout="vertical" :margin="[0, 8]" />
<span>右</span>
</div>
</div>
</template>
code/base-project/base-vue/packages/ao-design/src/separator/index.scss
+78
View File
@@ -0,0 +1,78 @@
@use '../_styles/_variables.scss' as *;
@use 'sass:color';
$separator-prefix: '#{$prefix}-separator';
.#{$separator-prefix} {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: $text-color-base;
box-sizing: border-box;
&.#{$separator-prefix}-layout-horizontal {
width: 100%;
display: flex;
border-top: 1px solid $separator-color;
margin: 6px 0;
align-self: center;
}
&.#{$separator-prefix}-layout-vertical {
border-top: 0;
display: inline-block;
height: 0.9em;
vertical-align: middle;
border-left: 1px solid $separator-color;
margin: 0 4px;
}
&.#{$separator-prefix}-dashed {
// 水平虚线
&.#{$separator-prefix}-layout-horizontal {
border-top-style: dashed;
}
// 垂直虚线
&.#{$separator-prefix}-layout-vertical {
border-left-style: dashed;
}
}
&.#{$separator-prefix}-text {
display: flex;
white-space: nowrap;
align-items: center;
border-top: 0;
&::before,
&::after {
content: '';
width: 50%;
border-top: 1px solid $separator-color;
}
}
& .#{$separator-prefix}-text-inner:not(:empty) {
padding: 0 1em;
display: inline-block;
}
&.#{$separator-prefix}-text-left {
&::before {
width: 10%;
}
&::after {
width: 90%;
}
}
&.#{$separator-prefix}-text-right {
&::before {
width: 90%;
}
&::after {
width: 10%;
}
}
}
code/base-project/base-vue/packages/ao-design/src/separator/index.tsx
+86
View File
@@ -0,0 +1,86 @@
import type { PropType, VNode } from 'vue'
import { defineComponent } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
export default defineComponent({
name: 'Separator',
props: {
layout: {
type: String as PropType<'horizontal' | 'vertical'>,
default: 'horizontal',
},
dashed: {
type: Boolean,
default: false,
},
align: {
type: String as PropType<'left' | 'right' | 'center'>,
default: 'center',
},
margin: {
type: [Number, Array] as any,
default: null,
},
content: {
type: [String, Object, Function] as unknown as () => string | VNode | (() => VNode),
default: '',
},
class: {
type: [String, Array, Object],
default: '',
},
style: {
type: Object,
default: () => ({}),
},
},
emits: [],
setup(props, { slots }) {
const prefixCls = getPrefixCls('separator')
// 根据 props.margin 生成样式
const marginStyle = () => {
if (props.margin == null)
return {}
if (typeof props.margin === 'number') {
return props.layout === 'horizontal'
? { margin: `${props.margin}px 0` }
: { margin: `0 ${props.margin}px` }
}
if (Array.isArray(props.margin)) {
return { margin: props.margin.map(v => `${v}px`).join(' ') }
}
return {}
}
// 渲染文字或默认插槽
const renderContent = (content: string | VNode | (() => VNode)) => {
if (slots.default)
return slots.default()
if (typeof content === 'function')
return content()
if (typeof content === 'string')
return <span class={`${prefixCls}-content`}>{content}</span>
return content
}
const isHorizontal = props.layout === 'horizontal'
const hasContent = !!(slots.default?.().length || props.content)
return () => (
<div
class={[
prefixCls,
`${prefixCls}-layout-${props.layout}`,
props.dashed ? `${prefixCls}-dashed` : '',
isHorizontal && hasContent ? `${prefixCls}-text` : '',
isHorizontal && hasContent ? `${prefixCls}-text-${props.align}` : '',
props.class,
]}
style={{ ...marginStyle(), ...props.style }}
>
{isHorizontal ? <span class={`${prefixCls}-text-inner`}>{renderContent(props.content)}</span> : null}
</div>
)
},
})
code/base-project/base-vue/packages/ao-design/src/space/demo.vue
+52
View File
@@ -0,0 +1,52 @@
<script setup lang="ts">
</script>
<template>
<h3>水平 wrap + 不同间距 + align</h3>
<ASpace wrap :size="[10, 20]" align="start" style="width: 300px; border:1px solid #ccc;">
<div style="width:120px;height:40px;background:#eee;">
1
</div>
<div style="width:120px;height:40px;background:#ccc;">
2
</div>
<div style="width:120px;height:40px;background:#aaa;">
3
</div>
<div style="width:120px;height:40px;background:#f0f;">
4
</div>
</ASpace>
<h3>垂直排列 + align</h3>
<ASpace :size="[20, 10]" style="border:1px solid #ccc;" separator>
<div style="width:120px;height:40px;background:#eee;">
1
</div>
<div style="width:120px;height:40px;background:#ccc;">
2
</div>
<div style="width:120px;height:40px;background:#aaa;">
3
</div>
</ASpace>
<h3>默认 small/middle/large 间距</h3>
<ASpace size="small" align="baseline">
<div style="width:60px;height:40px;background:#eee;">
A
</div>
<div style="width:60px;height:40px;background:#ccc;">
B
</div>
<div style="width:60px;height:40px;background:#aaa;">
C
</div>
</ASpace>
<div>
<AButton>测试</AButton>
<ASeparator layout="vertical" />
<AButton>测试</AButton>
</div>
</template>
code/base-project/base-vue/packages/ao-design/src/space/index.scss
+33
View File
@@ -0,0 +1,33 @@
@use '../_styles/_variables.scss' as *;
@use 'sass:color';
$space-prefix: '#{$prefix}-space';
.#{$space-prefix} {
display: inline-flex;
&.#{$space-prefix}-direction-horizontal {
flex-direction: row;
}
&.#{$space-prefix}-direction-vertical {
flex-direction: column;
}
&.#{$space-prefix}-align-start {
align-items: flex-start;
}
&.#{$space-prefix}-align-end {
align-items: flex-end;
}
&.#{$space-prefix}-align-center {
align-items: center;
}
&.#{$space-prefix}-align-baseline {
align-items: baseline;
}
&.#{$space-prefix}-wrap {
flex-wrap: wrap;
}
}
code/base-project/base-vue/packages/ao-design/src/space/index.tsx
+75
View File
@@ -0,0 +1,75 @@
import type { PropType, VNode } from 'vue'
import { defineComponent } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Separator from '../separator/index'
const sizeMap = {
small: 8,
middle: 16,
large: 24,
}
export default defineComponent({
name: 'ASpace',
props: {
size: {
type: [String, Number, Array] as PropType<'small' | 'middle' | 'large' | number | [number, number]>,
default: 'middle',
},
direction: {
type: String as () => 'horizontal' | 'vertical',
default: 'horizontal',
},
align: {
type: String as () => 'start' | 'center' | 'end' | 'baseline',
default: 'center',
},
wrap: { type: Boolean, default: false },
separator: { type: Boolean, default: false },
class: { type: [String, Array, Object], default: '' },
style: { type: Object, default: () => ({}) },
},
setup(props, { slots }) {
const prefixCls = getPrefixCls('space')
const getGap = (): [number, number] => {
if (Array.isArray(props.size))
return props.size
if (typeof props.size === 'string' && sizeMap[props.size as keyof typeof sizeMap]) {
const val = sizeMap[props.size as keyof typeof sizeMap]
return [val, val]
}
return [props.size as number, props.size as number]
}
return () => {
const [rowGap, colGap] = getGap()
const isHorizontal = props.direction === 'horizontal'
const children = slots.default?.() || []
const items: VNode[] = []
children.forEach((child, index) => {
items.push(child)
if (props.separator && index < children.length - 1) {
items.push(
<Separator
layout={isHorizontal ? 'vertical' : 'horizontal'}
/>,
)
}
})
return (
<div
class={[prefixCls, props.class, `${prefixCls}-align-${props.align}`, `${prefixCls}-direction-${props.direction}`, props.wrap && `${prefixCls}-wrap`]}
style={{
gap: isHorizontal ? `${rowGap}px ${colGap}px` : `${rowGap}px`,
...props.style,
}}
>
{items}
</div>
)
}
},
})
code/base-project/base-vue/packages/ao-design/src/tag-group/demo.vue
+101
View File
@@ -0,0 +1,101 @@
<script setup lang="ts">
import { ref } from 'vue'
interface TagOption {
label: string
value: string | number
}
const tagOptions: TagOption[] = [
{ label: '标签1', value: 1 },
{ label: '标签2', value: 2 },
{ label: '标签3', value: 3 },
]
const customOptions: TagOption[] = [
{ label: '成功', value: 'success' },
{ label: '警告', value: 'warning' },
{ label: '错误', value: 'error' },
]
// 多选示例
const multiSelected = ref<(string | number)[]>([1, 2])
function handleMultiChange(selectedOptions: TagOption[]) {
console.log('多选 change:', selectedOptions)
}
// 单选示例
const singleSelected = ref<(string | number)[]>([2])
function handleSingleChange(selectedOptions: TagOption[]) {
console.log('单选 change:', selectedOptions)
}
// slot 渲染示例
const slotSelected = ref<(string | number)[]>(['b'])
// 自定义样式示例
const customSelected = ref<(string | number)[]>(['success'])
function handleCustomChange(selectedOptions: TagOption[]) {
console.log('自定义样式 change:', selectedOptions)
}
</script>
<template>
<div style="padding: 20px;">
<h2>ATagGroup 使用示例</h2>
<!-- 1. 多选 options 渲染 -->
<section style="margin-bottom: 20px;">
<h3>多选 - Options 渲染</h3>
<ATagGroup
v-model="multiSelected"
:options="tagOptions"
multiple
@change="handleMultiChange"
/>
<p>选中值: {{ multiSelected }}</p>
</section>
<!-- 2. 单选 options 渲染 -->
<section style="margin-bottom: 20px;">
<h3>单选 - Options 渲染</h3>
<ATagGroup
v-model="singleSelected"
:options="tagOptions"
:multiple="false"
@change="handleSingleChange"
/>
<p>选中值: {{ singleSelected }}</p>
</section>
<!-- 3. Slot 渲染 -->
<section style="margin-bottom: 20px;">
<h3>Slot 渲染</h3>
<ATagGroup v-model="slotSelected">
<ATag value="a">
自定义A
</ATag>
<ATag value="b" checked>
自定义B
</ATag>
<ATag value="c" disabled>
自定义C
</ATag>
</ATagGroup>
<p>选中值: {{ slotSelected }}</p>
</section>
<!-- 4. 自定义 checkedProps / uncheckedProps -->
<section>
<h3>自定义样式</h3>
<ATagGroup
v-model="customSelected"
:options="customOptions"
:checked-props="{ type: 'solid', status: 'success' }"
:unchecked-props="{ type: 'solid', status: 'default' }"
@change="handleCustomChange"
/>
<p>选中值: {{ customSelected }}</p>
</section>
</div>
</template>
code/base-project/base-vue/packages/ao-design/src/tag-group/index.tsx
+48 -78
View File
@@ -1,113 +1,83 @@
import type { PropType, VNode } from 'vue'
import { cloneVNode, defineComponent, ref, watch } from 'vue'
import { cloneVNode, defineComponent } from 'vue'
import { useSelectable } from '../_hooks/useSelectable'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Tag from '../tag/index'
interface TagOption {
label?: string
value: string | number
disabled?: boolean
[key: string]: any
}
export default defineComponent({
name: 'TagGroup',
name: 'ATagGroup',
props: {
modelValue: { type: Array as PropType<(string | number)[]>, default: () => [] },
multiple: { type: Boolean, default: true },
options: {
type: Array as PropType<Array<{ label: string, value: string | number }>>,
default: () => [],
},
checkedProps: {
type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
default: () => ({
type: 'solid',
status: 'primary',
}),
},
uncheckedProps: {
type: Object as PropType<{ type?: 'solid' | 'light' | 'outline' | 'outline-light', status?: 'primary' | 'danger' | 'warning' | 'success' | 'default' }>,
default: () => ({
type: 'solid',
status: 'default',
}),
},
options: { type: Array as PropType<TagOption[]>, default: () => [] },
labelField: { type: String, default: 'label' },
valueField: { type: String, default: 'value' },
checkedProps: { type: Object as PropType<Record<string, any>>, default: () => ({ type: 'solid', status: 'primary' }) },
uncheckedProps: { type: Object as PropType<Record<string, any>>, default: () => ({ type: 'solid', status: 'default' }) },
class: { type: [String, Array, Object], default: '' },
style: { type: Object, default: () => ({}) },
},
emits: ['update:modelValue', 'change'],
setup(props, { slots, emit }) {
const prefixCls = getPrefixCls('tag-group')
const selectedValues = ref<(string | number)[]>([...props.modelValue])
// 外部 v-model 更新时同步内部值
watch(
() => props.modelValue,
(val) => {
selectedValues.value = [...val]
const { selectedValues, updateValue } = useSelectable(
{
modelValue: props.modelValue,
multiple: props.multiple,
options: props.options,
valueField: props.valueField,
},
(newVal, selectedOptions) => {
emit('update:modelValue', newVal)
emit('change', selectedOptions)
},
)
const updateValue = (value: string | number, checked: boolean) => {
let newValues = [...selectedValues.value]
if (props.multiple) {
if (checked) {
if (!newValues.includes(value))
newValues.push(value)
}
else {
newValues = newValues.filter(v => v !== value)
}
}
else {
// 单选：checked 为 true → 只保留当前值
newValues = checked ? [value] : []
}
selectedValues.value = newValues
emit('update:modelValue', newValues)
emit('change', newValues)
}
const renderTag = (value: string | number, label?: string, vnode?: VNode) => {
const checked = selectedValues.value.includes(value)
const renderTag = (option: TagOption, vnode?: VNode) => {
const val = option[props.valueField]
const checked = selectedValues.value.includes(val)
const baseProps = {
'key': value,
value,
'key': val,
'value': val,
checked,
'checkable': true,
'checkedProps': props.checkedProps,
'uncheckedProps': props.uncheckedProps,
'onUpdate:checked': (val: boolean) => updateValue(value, val),
}
if (vnode) {
return cloneVNode(vnode, baseProps)
}
else {
return (
<Tag {...baseProps}>
{label}
</Tag>
)
'disabled': option.disabled,
'onUpdate:checked': (valChecked: boolean) => updateValue(option, valChecked),
}
return vnode ? cloneVNode(vnode, baseProps) : <Tag {...baseProps}>{option[props.labelField]}</Tag>
}
// slot 渲染
const renderOptionsTags = () => props.options.map(opt => renderTag(opt))
const renderSlotTags = () => {
const slotNodes = slots.default?.() || []
return slotNodes.map((vnode: VNode) => {
if ((vnode.type as any)?.name === 'Tag') {
const value = (vnode.props as any)?.value
return renderTag(value, undefined, vnode)
// 判断 vnode.type 是否等于 Tag 组件本身
if (vnode.type === Tag) {
const vnodeProps = vnode.props || {}
const option = {
value: vnodeProps.value,
label: vnodeProps.label ?? vnodeProps.value,
disabled: vnodeProps.disabled,
}
return renderTag(option, vnode)
}
return vnode
})
}
// options 渲染
const renderOptionTags = () =>
props.options.map(opt => renderTag(opt.value, opt.label))
return () => (
<div class={[prefixCls, props.class]} style={{ ...props.style }}>
{props.options.length ? renderOptionTags() : renderSlotTags()}
</div>
)
return () => {
const children = props.options.length ? renderOptionsTags() : renderSlotTags()
return <div class={[prefixCls, props.class]} style={props.style}>{children}</div>
}
},
})
code/base-project/base-vue/packages/ao-design/src/tag/demo.vue
+101
View File
@@ -4,6 +4,7 @@
<template>
<div class="demo">
<!-- 正常态 -->
<div class="row">
<ATag size="small">
small
@@ -102,6 +103,106 @@
outline-light
</ATag>
</div>
<!-- 禁用态 -->
<div class="row">
<ATag size="small" disabled>
small
</ATag>
<ATag size="medium" disabled>
medium
</ATag>
<ATag size="large" disabled>
large
</ATag>
</div>
<div class="row">
<ATag shape="round" disabled>
round
</ATag>
<ATag shape="mark" disabled>
mark
</ATag>
<ATag shape="square" disabled>
square
</ATag>
</div>
<div class="row">
<ATag type="solid" disabled>
solid
</ATag>
<ATag type="light" disabled>
light
</ATag>
<ATag type="outline" disabled>
outline
</ATag>
<ATag type="outline-light" disabled>
outline-light
</ATag>
</div>
<div class="row">
<ATag type="solid" status="primary" disabled>
solid
</ATag>
<ATag type="light" status="primary" disabled>
light
</ATag>
<ATag type="outline" status="primary" disabled>
outline
</ATag>
<ATag type="outline-light" status="primary" disabled>
outline-light
</ATag>
</div>
<div class="row">
<ATag type="solid" status="danger" disabled>
solid
</ATag>
<ATag type="light" status="danger" disabled>
light
</ATag>
<ATag type="outline" status="danger" disabled>
outline
</ATag>
<ATag type="outline-light" status="danger" disabled>
outline-light
</ATag>
</div>
<div class="row">
<ATag type="solid" status="warning" disabled>
solid
</ATag>
<ATag type="light" status="warning" disabled>
light
</ATag>
<ATag type="outline" status="warning" disabled>
outline
</ATag>
<ATag type="outline-light" status="warning" disabled>
outline-light
</ATag>
</div>
<div class="row">
<ATag type="solid" status="success" disabled>
solid
</ATag>
<ATag type="light" status="success" disabled>
light
</ATag>
<ATag type="outline" status="success" disabled>
outline
</ATag>
<ATag type="outline-light" status="success" disabled>
outline-light
</ATag>
</div>
</div>
</template>
code/base-project/base-vue/packages/ao-design/src/tag/index.scss
+25 -43
View File
@@ -16,75 +16,57 @@ $tag-prefix: '#{$prefix}-tag';
border-radius: $border-color;
font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
&-size-large {
&.#{$tag-prefix}-size-large {
padding: 0 8px;
height: 24px;
font-size: 13px;
}
&-size-medium {
&.#{$tag-prefix}-size-medium {
padding: 0 6px;
height: 22px;
font-size: 12px;
}
&-size-small {
&.#{$tag-prefix}-size-small {
padding: 0 4px;
height: 20px;
font-size: 12px;
}
&-shape-round {
&.#{$tag-prefix}-shape-round {
border-radius: 12px;
}
&-shape-mark {
border-radius: 0px 12px 12px 0;
&.#{$tag-prefix}-shape-mark {
border-radius: 0 12px 12px 0;
}
&-icon {
&.#{$tag-prefix}-icon {
margin-right: 4px;
}
&-close {
&.#{$tag-prefix}-close {
margin-left: 4px;
cursor: pointer;
transition: filter 0.2s cubic-bezier(0.38, 0, 0.24, 1);
color: currentColor;
filter: brightness(1.2); /* 比父色亮 20% */
filter: brightness(1.2);
&:hover {
filter: brightness(0.8); /* 比父色暗 20% */
filter: brightness(0.8);
}
}
&-check {
&.#{$tag-prefix}-check {
cursor: pointer;
user-select: none;
transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
&-disabled {
cursor: default;
&.#{$tag-prefix}-disabled {
cursor: not-allowed;
opacity: 0.5;
}
&-check.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-default {
background-color: $default-color-disabled;
color: $text-color-disabled;
}
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-primary {
background-color: $primary-color-disabled;
}
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-danger {
background-color: $danger-color-disabled;
}
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-warning {
background-color: $warning-color-disabled;
}
&-checked.#{$tag-prefix}-disabled.#{$tag-prefix}-type-solid.#{$tag-prefix}-status-success {
background-color: $success-color-disabled;
}
&-type-solid {
&.#{$tag-prefix}-type-solid {
&.#{$tag-prefix}-status-default {
color: $text-color-base;
background-color: $default-color;
@@ -107,7 +89,8 @@ $tag-prefix: '#{$prefix}-tag';
}
}
&-type-light {
// light 类型
&.#{$tag-prefix}-type-light {
&.#{$tag-prefix}-status-default {
color: $text-color-base;
background-color: $default-color-light;
@@ -130,35 +113,34 @@ $tag-prefix: '#{$prefix}-tag';
}
}
&-type-outline {
// outline 类型
&.#{$tag-prefix}-type-outline {
background-color: transparent;
&.#{$tag-prefix}-status-default {
color: $text-color-base;
background-color: transparent;
border-color: $default-color;
}
&.#{$tag-prefix}-status-primary {
color: $primary-color;
background-color: transparent;
border-color: $primary-color;
}
&.#{$tag-prefix}-status-success {
color: $success-color;
background-color: transparent;
border-color: $success-color;
}
&.#{$tag-prefix}-status-warning {
color: $warning-color;
background-color: transparent;
border-color: $warning-color;
}
&.#{$tag-prefix}-status-danger {
color: $danger-color;
background-color: transparent;
border-color: $danger-color;
}
}
&-type-outline-light {
// outline-light 类型
&.#{$tag-prefix}-type-outline-light {
&.#{$tag-prefix}-status-default {
color: $text-color-base;
background-color: $default-color-light;