From ae0ad2bd63cca39ad9ed6810b5a58212a16409b1 Mon Sep 17 00:00:00 2001 From: oneao Date: Sun, 14 Sep 2025 21:38:52 +0800 Subject: [PATCH] u --- .../packages/ao-design/src/_styles/index.scss | 1 - .../packages/ao-design/src/button/index.scss | 1 - .../packages/ao-design/src/drawer/index.scss | 1 - .../packages/ao-design/src/index.scss | 97 +++++++++++++++ .../packages/ao-design/src/input/index.scss | 1 - .../packages/ao-design/src/message/index.scss | 1 - .../ao-design/src/notification/index.scss | 1 - .../ao-design/src/popconfirm/index.scss | 1 - .../packages/ao-design/src/radio/context.ts | 12 ++ .../packages/ao-design/src/radio/index.scss | 115 +++++++++--------- .../packages/ao-design/src/radio/index.tsx | 71 ++++++----- .../ao-design/src/separator/index.scss | 1 - .../packages/ao-design/src/tag/index.scss | 1 - .../packages/ao-design/src/tag/index.tsx | 1 - .../ao-design/src/textarea/index.scss | 1 - code/base-project/base-vue/src/App.vue | 4 +- 16 files changed, 201 insertions(+), 109 deletions(-) create mode 100644 code/base-project/base-vue/packages/ao-design/src/radio/context.ts diff --git a/code/base-project/base-vue/packages/ao-design/src/_styles/index.scss b/code/base-project/base-vue/packages/ao-design/src/_styles/index.scss index e81ec056..55e3b730 100644 --- a/code/base-project/base-vue/packages/ao-design/src/_styles/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/_styles/index.scss @@ -1,2 +1 @@ @use './theme/index.scss' as *; - diff --git a/code/base-project/base-vue/packages/ao-design/src/button/index.scss b/code/base-project/base-vue/packages/ao-design/src/button/index.scss index d3eb9997..01b020ce 100644 --- a/code/base-project/base-vue/packages/ao-design/src/button/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/button/index.scss @@ -17,7 +17,6 @@ $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; diff --git a/code/base-project/base-vue/packages/ao-design/src/drawer/index.scss b/code/base-project/base-vue/packages/ao-design/src/drawer/index.scss index 3e884cab..58373f23 100644 --- a/code/base-project/base-vue/packages/ao-design/src/drawer/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/drawer/index.scss @@ -27,7 +27,6 @@ $drawer-prefix: '#{$prefix}-drawer'; background: #fff; display: flex; flex-direction: column; - font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; transition: transform 0.25s ease, opacity 0.25s ease; diff --git a/code/base-project/base-vue/packages/ao-design/src/index.scss b/code/base-project/base-vue/packages/ao-design/src/index.scss index 45d54ab6..17fb181b 100644 --- a/code/base-project/base-vue/packages/ao-design/src/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/index.scss @@ -1,4 +1,5 @@ @use './_styles/index.scss' as *; +@use './_styles/variables' as variables; @use './button/index.scss' as *; @use './input/index.scss' as *; @@ -16,3 +17,99 @@ @use './space/index.scss' as *; @use './separator/index.scss' as *; @use './radio/index.scss' as *; + +[class*='#{variables.$prefix}-'] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: + 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} diff --git a/code/base-project/base-vue/packages/ao-design/src/input/index.scss b/code/base-project/base-vue/packages/ao-design/src/input/index.scss index a201f97c..997e45fd 100644 --- a/code/base-project/base-vue/packages/ao-design/src/input/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/input/index.scss @@ -36,7 +36,6 @@ $input-prefix: #{$prefix}-input; background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; .#{$input-prefix}-inner { - font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; border: none; outline: none; diff --git a/code/base-project/base-vue/packages/ao-design/src/message/index.scss b/code/base-project/base-vue/packages/ao-design/src/message/index.scss index 95617d8c..91c9614a 100644 --- a/code/base-project/base-vue/packages/ao-design/src/message/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/message/index.scss @@ -23,7 +23,6 @@ $message-prefix: #{$prefix}-message; color: $text-color-base; box-shadow: $shadow-overlay; box-sizing: border-box; - font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; &-message { font-size: 14px; line-height: 1; diff --git a/code/base-project/base-vue/packages/ao-design/src/notification/index.scss b/code/base-project/base-vue/packages/ao-design/src/notification/index.scss index c9297603..c02d34d9 100644 --- a/code/base-project/base-vue/packages/ao-design/src/notification/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/notification/index.scss @@ -19,7 +19,6 @@ $notification-prefix: #{$prefix}-notification; color: $text-color-base; box-shadow: $shadow-overlay; box-sizing: border-box; - font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; outline: 0; border: 0; margin: 0; diff --git a/code/base-project/base-vue/packages/ao-design/src/popconfirm/index.scss b/code/base-project/base-vue/packages/ao-design/src/popconfirm/index.scss index c9cbb37d..87e65142 100644 --- a/code/base-project/base-vue/packages/ao-design/src/popconfirm/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/popconfirm/index.scss @@ -23,7 +23,6 @@ $popconfirm-prefix: '#{$prefix}-popconfirm'; vertical-align: top; max-width: 320px; color: $text-color-base; - font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; word-break: break-all; } diff --git a/code/base-project/base-vue/packages/ao-design/src/radio/context.ts b/code/base-project/base-vue/packages/ao-design/src/radio/context.ts new file mode 100644 index 00000000..ce29974f --- /dev/null +++ b/code/base-project/base-vue/packages/ao-design/src/radio/context.ts @@ -0,0 +1,12 @@ +import type { InjectionKey, Slots } from 'vue' + +export interface RadioGroupContext { + name: 'ArcoRadioGroup' + value: string | number | boolean + disabled: boolean + slots: Slots + handleChange: (value: string | number | boolean, e: Event) => void +} + +export const radioGroupKey: InjectionKey + = Symbol('RadioGroup') diff --git a/code/base-project/base-vue/packages/ao-design/src/radio/index.scss b/code/base-project/base-vue/packages/ao-design/src/radio/index.scss index 098a9a25..5a2dec06 100644 --- a/code/base-project/base-vue/packages/ao-design/src/radio/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/radio/index.scss @@ -3,80 +3,75 @@ $radio-prefix: '#{$prefix}-radio'; .#{$radio-prefix} { + color: $text-color-base; display: inline-flex; align-items: center; - gap: 8px; + position: relative; cursor: pointer; - font-size: 14px; user-select: none; - &-wrapper { - position: relative; - width: 16px; - height: 16px; + &:hover .#{$radio-prefix}-main .#{$radio-prefix}-inner { + border-color: $primary-color; + } - input[type='radio'] { - position: absolute; + &.#{$radio-prefix}-checked .#{$radio-prefix}-main .#{$radio-prefix}-inner { + border-color: $primary-color; + &::after { + transform: translate(-50%, -50%) scale(1); + background-color: $primary-color; + } + } + + .#{$radio-prefix}-main { + cursor: pointer; + display: inline-flex; + white-space: nowrap; + outline: 0; + + .#{$radio-prefix}-input { opacity: 0; - width: 100%; - height: 100%; + outline: 0; + position: absolute; + z-index: -1; margin: 0; - cursor: pointer; - z-index: 2; + width: 0; + height: 0; + box-sizing: border-box; } - & .#{$radio-prefix}-circle { - position: absolute; - top: 0; - left: 0; + .#{$radio-prefix}-inner { + border: 1px solid $border-color; + border-radius: 100%; 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% 透明度 + background-color: $bg-color-container; + position: relative; + display: inline-block; + cursor: pointer; + box-sizing: border-box; + outline: 0; + &::after { + box-sizing: border-box; + width: 8px; + height: 8px; + border-radius: 999px; + background-color: transparent; + content: ''; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0); + transition: + transform 0.15s ease-in, + background-color 0.15s ease-in; + } } } - &-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); + .#{$radio-prefix}-content { + font-size: 12px; + margin-left: 8px; + vertical-align: middle; + line-height: 1; } } diff --git a/code/base-project/base-vue/packages/ao-design/src/radio/index.tsx b/code/base-project/base-vue/packages/ao-design/src/radio/index.tsx index be1246e4..8826569e 100644 --- a/code/base-project/base-vue/packages/ao-design/src/radio/index.tsx +++ b/code/base-project/base-vue/packages/ao-design/src/radio/index.tsx @@ -1,70 +1,69 @@ -import { computed, defineComponent, ref } from 'vue' +import { defineComponent, inject } from 'vue' import { getPrefixCls } from '../_utils/getPrefixCls' +import { radioGroupKey } from './context' export default defineComponent({ - name: 'AnimatedRadio', + name: 'Radio', props: { - modelValue: { - type: [String, Number, Boolean], - default: null, + checked: { + type: Boolean, + default: false, }, value: { - type: [String, Number, Boolean], - required: true, + type: [String, Number], + required: false, }, disabled: { type: Boolean, default: false, }, - class: { - type: [String, Array, Object], - default: '', - }, - style: { - type: Object, - default: () => ({}), + // private + uninjectGroupContext: { + type: Boolean, + default: false, }, }, - emits: ['update:modelValue'], + emits: ['change', 'update:checked'], setup(props, { slots, emit }) { const prefixCls = getPrefixCls('radio') - const isClicked = ref(false) - const checked = computed(() => props.modelValue === props.value) + const radioGroupCtx = !props.uninjectGroupContext + ? inject(radioGroupKey, undefined) + : undefined - const handleChange = () => { - if (!props.disabled) { - emit('update:modelValue', props.value) - // 播放点击动画 - isClicked.value = true - setTimeout(() => (isClicked.value = false), 300) - } + const handleClick = () => { + if (props.disabled) + return + const newChecked = !props.checked + emit('update:checked', newChecked) + emit('change', { + value: props.value, + checked: newChecked, + }) } return () => ( ) }, diff --git a/code/base-project/base-vue/packages/ao-design/src/separator/index.scss b/code/base-project/base-vue/packages/ao-design/src/separator/index.scss index e51354b4..a674da70 100644 --- a/code/base-project/base-vue/packages/ao-design/src/separator/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/separator/index.scss @@ -8,7 +8,6 @@ $separator-prefix: '#{$prefix}-separator'; 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 { diff --git a/code/base-project/base-vue/packages/ao-design/src/tag/index.scss b/code/base-project/base-vue/packages/ao-design/src/tag/index.scss index 9a241e1b..b4f14683 100644 --- a/code/base-project/base-vue/packages/ao-design/src/tag/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/tag/index.scss @@ -14,7 +14,6 @@ $tag-prefix: '#{$prefix}-tag'; border: 1px solid transparent; white-space: nowrap; border-radius: $border-color; - font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; &.#{$tag-prefix}-size-large { padding: 0 8px; diff --git a/code/base-project/base-vue/packages/ao-design/src/tag/index.tsx b/code/base-project/base-vue/packages/ao-design/src/tag/index.tsx index 068ce1a9..93b26593 100644 --- a/code/base-project/base-vue/packages/ao-design/src/tag/index.tsx +++ b/code/base-project/base-vue/packages/ao-design/src/tag/index.tsx @@ -6,7 +6,6 @@ import Icon from '../icon/index' export default defineComponent({ name: 'Tag', props: { - shape: { type: String as PropType<'square' | 'round' | 'mark'>, default: 'square', diff --git a/code/base-project/base-vue/packages/ao-design/src/textarea/index.scss b/code/base-project/base-vue/packages/ao-design/src/textarea/index.scss index fbde152e..d22d6bda 100644 --- a/code/base-project/base-vue/packages/ao-design/src/textarea/index.scss +++ b/code/base-project/base-vue/packages/ao-design/src/textarea/index.scss @@ -12,7 +12,6 @@ $textarea-prefix: #{$prefix}-textarea; width: 100%; .#{$textarea-prefix}-inner { - font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 100%; width: 100%; display: flex; diff --git a/code/base-project/base-vue/src/App.vue b/code/base-project/base-vue/src/App.vue index 22a091cc..36902bad 100644 --- a/code/base-project/base-vue/src/App.vue +++ b/code/base-project/base-vue/src/App.vue @@ -3,8 +3,8 @@