oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-tag/index.scss

@@ -27,15 +27,30 @@
 @mixin tag-type-style($normalColor, $normalBg) {
   background: $normalBg;
 
+  @include when(light) {
+    color: $normalColor;
+    background: transparent;
+    position: relative;
+    z-index: $-z-index-sticky;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: $normalBg;
+      opacity: $-tag-light-opacity;
+      border-radius: inherit;
+      z-index: -1;
+    }
+  }
+
   @include when(plain) {
     background: transparent;
     color: $normalColor;
     border-color: $normalColor;
-    padding: 12rpx 20rpx;
   }
 
   @include when(round) {
-    padding: 12rpx 24rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
     border-color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
@@ -43,12 +58,7 @@
   }
 
   @include when(mark) {
-    padding: 12rpx 20rpx;
     border-radius: $-tag-mark-radius;
-
-    @include when(plain) {
-      padding: 8rpx 20rpx;
-    }
   }
   @include when(active) {
     color: $-tag-primary-color;
@@ -56,6 +66,146 @@
   }
 }
 
+@mixin tag-size-style(
+  $sizeConfig
+) {
+  $fontSize: map-get($sizeConfig, fontSize);
+  $paddingY: map-get($sizeConfig, paddingY);
+  $paddingX: map-get($sizeConfig, paddingX);
+  $roundPaddingX: map-get($sizeConfig, roundPaddingX);
+  $plainPaddingY: map-get($sizeConfig, plainPaddingY);
+  $markPlainPaddingY: map-get($sizeConfig, markPlainPaddingY);
+  $minHeight: map-get($sizeConfig, minHeight);
+  $inputHeight: map-get($sizeConfig, inputHeight);
+  $iconGap: map-get($sizeConfig, iconGap);
+  $closeGap: map-get($sizeConfig, closeGap);
+  $dynamicMinWidth: map-get($sizeConfig, dynamicMinWidth);
+  $closeSize: map-get($sizeConfig, closeSize);
+  $radius: map-get($sizeConfig, radius);
+  $roundRadius: map-get($sizeConfig, roundRadius);
+  $markRadius: map-get($sizeConfig, markRadius);
+
+  & {
+    font-size: $fontSize;
+    padding: $paddingY $paddingX;
+    min-height: $minHeight;
+    border-radius: $radius;
+  }
+
+  &.is-round {
+    padding: $paddingY $roundPaddingX;
+    border-radius: $roundRadius;
+  }
+
+  &.is-plain {
+    padding: $plainPaddingY $paddingX;
+  }
+
+  &.is-mark {
+    padding: $paddingY $paddingX;
+    border-radius: $markRadius;
+
+    &.is-plain {
+      padding: $markPlainPaddingY $paddingX;
+    }
+  }
+
+  &.is-dynamic {
+    min-width: $dynamicMinWidth;
+  }
+
+  .oxy-tag__icon {
+    margin-right: $iconGap;
+    font-size: $fontSize;
+  }
+
+  .oxy-tag__add-text {
+    height: $inputHeight;
+    min-height: $inputHeight;
+    font-size: $fontSize;
+    line-height: $inputHeight;
+  }
+
+  .oxy-tag__close {
+    margin-left: $closeGap;
+    font-size: $closeSize;
+    width: $closeSize;
+    height: $closeSize;
+  }
+}
+
+$-tag-size-default-config: (
+  fontSize: $-tag-fs,
+  paddingY: 6rpx,
+  paddingX: 18rpx,
+  roundPaddingX: 22rpx,
+  plainPaddingY: 6rpx,
+  markPlainPaddingY: 4rpx,
+  minHeight: 46rpx,
+  inputHeight: 40rpx,
+  iconGap: 10rpx,
+  closeGap: 12rpx,
+  dynamicMinWidth: 148rpx,
+  closeSize: $-tag-close-size,
+  radius: $-tag-radius,
+  roundRadius: $-tag-round-radius,
+  markRadius: $-tag-mark-radius
+);
+
+$-tag-size-mini-config: (
+  fontSize: $-tag-mini-fs,
+  paddingY: 2rpx,
+  paddingX: 10rpx,
+  roundPaddingX: 12rpx,
+  plainPaddingY: 2rpx,
+  markPlainPaddingY: 2rpx,
+  minHeight: 28rpx,
+  inputHeight: 26rpx,
+  iconGap: 6rpx,
+  closeGap: 8rpx,
+  dynamicMinWidth: 116rpx,
+  closeSize: $-tag-mini-fs,
+  radius: $-tag-mini-radius,
+  roundRadius: $-tag-round-mini-radius,
+  markRadius: $-tag-mark-mini-radius
+);
+
+$-tag-size-small-config: (
+  fontSize: $-tag-small-fs,
+  paddingY: 4rpx,
+  paddingX: 14rpx,
+  roundPaddingX: 16rpx,
+  plainPaddingY: 4rpx,
+  markPlainPaddingY: 2rpx,
+  minHeight: 34rpx,
+  inputHeight: 30rpx,
+  iconGap: 8rpx,
+  closeGap: 10rpx,
+  dynamicMinWidth: 128rpx,
+  closeSize: $-tag-small-fs,
+  radius: $-tag-small-radius,
+  roundRadius: $-tag-round-small-radius,
+  markRadius: $-tag-mark-small-radius
+);
+
+$-tag-size-large-config: (
+  fontSize: $-tag-large-fs,
+  paddingY: 8rpx,
+  paddingX: 22rpx,
+  roundPaddingX: 26rpx,
+  plainPaddingY: 8rpx,
+  markPlainPaddingY: 6rpx,
+  minHeight: 54rpx,
+  inputHeight: 48rpx,
+  iconGap: 12rpx,
+  closeGap: 14rpx,
+  dynamicMinWidth: 164rpx,
+  closeSize: $-tag-small-fs,
+  radius: $-tag-large-radius,
+  roundRadius: $-tag-round-large-radius,
+  markRadius: $-tag-mark-large-radius
+);
+
 @include b(tag) {
   position: relative;
   font-size: $-tag-fs;
@@ -65,8 +215,8 @@
   max-width: 100%;
   box-sizing: border-box;
   color: $-tag-color;
-  padding: 12rpx 20rpx;
-  min-height: 64rpx;
+  padding: 6rpx 18rpx;
+  min-height: 46rpx;
   border: #{$-border-width-base} solid transparent;
   border-radius: $-tag-radius;
   transition: opacity $-transition-duration-base, color $-transition-duration-base, border-color $-transition-duration-base, background-color $-transition-duration-base;
@@ -89,14 +239,23 @@
   @include when(success) {
     @include tag-type-style($-tag-success-color, $-tag-success-bg);
   }
-  @include when(icon) {
-    padding: 12rpx 20rpx;
+  @include tag-size-style($-tag-size-default-config);
+  @include when(mini) {
+    @include tag-size-style($-tag-size-mini-config);
+  }
+
+  @include when(small) {
+    @include tag-size-style($-tag-size-small-config);
+  }
+
+  @include when(large) {
+    @include tag-size-style($-tag-size-large-config);
   }
 
   @include when(dynamic) {
     box-sizing: border-box;
     width: auto;
-    min-width: 176rpx;
+    min-width: 148rpx;
     justify-content: center;
     transition: color .3s, border-color .3s, background-color .3s;
 
@@ -127,7 +286,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-right: 12rpx;
+    margin-right: 10rpx;
     font-size: $-tag-fs;
     line-height: 1;
     vertical-align: middle;
@@ -145,11 +304,11 @@
   @include e(add-text) {
     width: 100%;
     min-width: 0;
-    height: 56rpx;
-    min-height: 56rpx;
+    height: 40rpx;
+    min-height: 40rpx;
     display: inline-block;
     font-size: $-tag-fs;
-    line-height: 56rpx;
+    line-height: 40rpx;
     vertical-align: middle;
     color: inherit;
     padding: 0;
@@ -166,7 +325,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-left: $-spacing-16;
+    margin-left: $-spacing-12;
     margin-right: 0;
     font-size: $-tag-close-size;
     width: $-tag-close-size;

package/components/oxy-tag/oxy-tag.vue

@@ -35,7 +35,9 @@ export default {
   name: 'oxy-tag',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -57,7 +59,16 @@ const dynamicValue = ref<string>('')
 const dynamicInput = ref<boolean>(false)
 
 watch(
-  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark],
+  [
+    () => props.useIconSlot,
+    () => props.icon,
+    () => props.light,
+    () => props.plain,
+    () => props.dynamic,
+    () => props.round,
+    () => props.mark,
+    () => props.size
+  ],
   () => {
     computeTagClass()
   },
@@ -76,6 +87,17 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => props.size,
+  (newValue) => {
+    if (!newValue) return
+    const size = ['mini', 'small', 'default', 'large']
+    if (size.indexOf(newValue) === -1) console.error(`size must be one of ${size.toString()}`)
+    computeTagClass()
+  },
+  { immediate: true }
+)
+
 watch(
   () => dynamicInput.value,
   () => {
@@ -107,10 +129,15 @@ const textStyle = computed(() => {
   return objToStyle(textStyle)
 })
 
+/**
+ * 根据 tag 的 type、size、light、plain、round 等属性组合生成样式类名。
+ */
 function computeTagClass() {
-  const { type, plain, round, mark, dynamic, icon, useIconSlot } = props
+  const { type, size, light, plain, round, mark, dynamic, icon, useIconSlot } = props
   let tagClassList: string[] = []
   type && tagClassList.push(`is-${type}`)
+  size && tagClassList.push(`is-${size}`)
+  light && tagClassList.push('is-light')
   plain && tagClassList.push('is-plain')
   round && tagClassList.push('is-round')
   mark && tagClassList.push('is-mark')

package/components/oxy-tag/types.ts

@@ -2,6 +2,7 @@ import type { ExtractPropTypes } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'
+export type TagSize = 'mini' | 'small' | 'default' | 'large'
 
 export const tagProps = {
   ...baseProps,
@@ -21,6 +22,14 @@ export const tagProps = {
    */
   type: makeStringProp<TagType>('default'),
 
+  /**
+   * 标签尺寸
+   * 类型：string
+   * 可选值：'mini' / 'small' / 'default' / 'large'
+   * 默认值：'default'
+   */
+  size: makeStringProp<TagSize>('default'),
+
   /**
    * 左侧图标
    * 类型：string
@@ -35,6 +44,13 @@ export const tagProps = {
    */
   closable: makeBooleanProp(false),
 
+  /**
+   * 浅色类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  light: makeBooleanProp(false),
+
   /**
    * 幽灵类型
    * 类型：boolean

package/components/oxy-text/oxy-text.vue

@@ -10,7 +10,9 @@
     <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
     <text>{{ props.toggleExpand && isTextOverflow && !expanded ? realText : formattedText }}</text>
     <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
-    <text v-if="props.toggleExpand && isTextOverflow" class="oxy-text__btn" @click.stop="handleToggle">{{ expanded ? '收起' : '展开' }}</text>
+    <text v-if="props.toggleExpand && isTextOverflow" class="oxy-text__btn" @click.stop="handleToggle">
+      {{ expanded ? translate('retract') : translate('expand') }}
+    </text>
   </text>
 </template>
 
@@ -18,7 +20,9 @@
 export default {
   name: 'oxy-text',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -31,10 +35,12 @@ import { isDef, objToStyle, uuid, getRect } from '../common/util'
 import { textProps } from './types'
 import dayjs from '../../dayjs'
 import OxyTooltip from '../oxy-tooltip/oxy-tooltip.vue'
+import { useTranslate } from '../composables/useTranslate'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(textProps)
 const emit = defineEmits(['click'])
+const { translate } = useTranslate('collapse')
 
 const { proxy } = getCurrentInstance() as any
 const textId = ref<string>(`oxy-text${uuid()}`)
@@ -147,6 +153,11 @@ const formattedText = computed(() => {
   return formatText(`${text}`, format, mode)
 })
 
+/**
+ * 文本格式化后检测溢出。
+ * toggleExpand/tooltip 模式下：计算实际行数（height/lineHeight），超行则截断文本。
+ * 截断时考虑中英文字符宽度差异（中文=1，英文=0.5）。
+ */
 watch(
   formattedText,
   (value) => {

package/components/oxy-textarea/index.scss

@@ -173,7 +173,7 @@
 
   @include e(suffix) {
     position: absolute;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     right: 0;
     top: 0;
     bottom: 0;
@@ -219,7 +219,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 2;
+    z-index: $-z-index-sticky;
     width: 100%;
     height: 100%;
   }
@@ -241,6 +241,7 @@
   }
 
   @include when(disabled) {
+    opacity: $-opacity-disabled;
 
     .oxy-textarea__inner {
       color: $-input-disabled-color;

package/components/oxy-textarea/oxy-textarea.vue

@@ -67,7 +67,9 @@
 export default {
   name: 'oxy-textarea',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -156,8 +158,8 @@ const showWordCount = computed(() => {
 
 // 表单校验错误信息
 const errorMessage = computed(() => {
-  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
-    return form.errorMessages[props.prop]
+  if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
+    return form.value.errorMessages[props.prop]
   } else {
     return ''
   }
@@ -166,8 +168,8 @@ const errorMessage = computed(() => {
 // 是否展示必填
 const isRequired = computed(() => {
   let formRequired = false
-  if (form && form.props.rules) {
-    const rules = form.props.rules
+  if (form.value && form.value.props.rules) {
+    const rules = form.value.props.rules
     for (const key in rules) {
       if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
         formRequired = rules[key].some((rule: FormItemRule) => rule.required)
@@ -245,6 +247,10 @@ async function handleClear() {
   emit('update:modelValue', inputValue.value)
   emit('clear')
 }
+/**
+ * 失焦处理：延迟 150ms 等待 clear 操作完成
+ * 避免清空时重复触发 blur + clear 的连锁反应
+ */
 async function handleBlur({ detail }: any) {
   // 等待150毫秒，clear执行完毕
   await pause(150)

package/components/oxy-toast/index.ts

@@ -1,11 +1,6 @@
-import { inject, provide, ref } from 'vue'
-import type { Toast, ToastOptions } from './types'
+import type { Toast, ToastId, ToastOptions } from './types'
 import { deepMerge } from '../common/util'
-
-/**
- * useToast 用到的key
- */
-const toastDefaultOptionKey = '__TOAST_OPTION__'
+import { createSharedState } from '../composables/useSharedState'
 
 // 默认模板
 export const defaultOptions: ToastOptions = {
@@ -13,16 +8,20 @@ export const defaultOptions: ToastOptions = {
   show: false
 }
 
-const None = Symbol('None')
+const {
+  getState: getToastOptions,
+  initState: initToastOptions,
+  removeState: removeToastOptions,
+  resolveScopeId: resolveToastScopeId,
+  resolveStateKey: resolveToastStateKey
+} = createSharedState<ToastOptions>(() => defaultOptions, { namespace: 'toast' })
+
+export { getToastOptions, initToastOptions, removeToastOptions, resolveToastScopeId, resolveToastStateKey }
 
 export function useToast(selector: string = ''): Toast {
-  const toastOptionKey = getToastOptionKey(selector)
-  const toastOption = inject(toastOptionKey, ref<ToastOptions | typeof None>(None)) // toast选项
-  if (toastOption.value === None) {
-    toastOption.value = defaultOptions
-    provide(toastOptionKey, toastOption)
-  }
   let timer: ReturnType<typeof setTimeout> | null = null
+  const scopeId = resolveToastScopeId()
+  const id = resolveToastStateKey(selector, scopeId)
 
   const createMethod = (toastOptions: ToastOptions) => {
     return (options: ToastOptions | string) => {
@@ -30,7 +29,8 @@ export function useToast(selector: string = ''): Toast {
     }
   }
 
-  const show = (option: ToastOptions | string) => {
+  const show = (option: ToastOptions | string): ToastId => {
+    const toastOption = initToastOptions(selector, scopeId)
     const options = deepMerge(defaultOptions, typeof option === 'string' ? { msg: option } : option) as ToastOptions
     toastOption.value = deepMerge(options, {
       show: true
@@ -43,6 +43,7 @@ export function useToast(selector: string = ''): Toast {
         close()
       }, options.duration)
     }
+    return resolveToastStateKey(selector, scopeId)
   }
 
   const loading = createMethod({
@@ -59,9 +60,13 @@ export function useToast(selector: string = ''): Toast {
   const info = createMethod({ iconName: 'info' })
 
   const close = () => {
-    toastOption.value = { show: false }
+    const toastOption = initToastOptions(selector, scopeId)
+    timer && clearTimeout(timer)
+    timer = null
+    toastOption.value = { ...defaultOptions, show: false }
   }
   return {
+    id,
     show,
     loading,
     success,
@@ -72,10 +77,6 @@ export function useToast(selector: string = ''): Toast {
   }
 }
 
-export const getToastOptionKey = (selector: string) => {
-  return selector ? `${toastDefaultOptionKey}${selector}` : toastDefaultOptionKey
-}
-
 export const toastIcon = {
   success() {
     return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#34D19D" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#34D19D"/><path d="M19 24l4 4 8-8" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'

package/components/oxy-toast/oxy-toast.vue

@@ -44,21 +44,24 @@ export default {
   name: 'oxy-toast',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
 </script>
 
 <script lang="ts" setup>
+import { onHide, onUnload } from '@dcloudio/uni-app'
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 
-import { computed, inject, onBeforeMount, ref, useSlots, watch, type CSSProperties } from 'vue'
+import { computed, onBeforeMount, onUnmounted, ref, useSlots, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
-import { defaultOptions, getToastOptionKey, toastIcon } from '.'
+import { initToastOptions, removeToastOptions, resolveToastScopeId, toastIcon } from '.'
 import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
 import { withDefaultUnit, isDef, isFunction, objToStyle } from '../common/util'
 
@@ -83,8 +86,8 @@ let opened: (() => void) | null = null
 
 let closed: (() => void) | null = null
 
-const toastOptionKey = getToastOptionKey(props.selector)
-const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
+const scopeId = resolveToastScopeId()
+const toastOption = initToastOptions(props.selector, scopeId)
 
 // 监听options变化展示
 watch(
@@ -128,7 +131,7 @@ const transitionStyle = computed(() => {
 })
 
 const hasCustomContent = computed(() => {
-  const slotNodes = slots.default?.()
+  const slotNodes = isFunction(slots.default) ? slots.default() : []
   return !!slotNodes?.length
 })
 
@@ -157,6 +160,19 @@ onBeforeMount(() => {
   buildSvg()
 })
 
+onHide(() => {
+  clearToastState()
+})
+
+onUnload(() => {
+  clearToastState()
+})
+
+onUnmounted(() => {
+  clearToastState()
+  removeToastOptions(props.selector, scopeId)
+})
+
 function handleAfterEnter() {
   if (isFunction(opened)) {
     opened()
@@ -176,6 +192,10 @@ function buildSvg() {
   svgStr.value = iconSvgStr
 }
 
+function clearToastState() {
+  toastOption.value = { ...toastOption.value, show: false }
+}
+
 /**
  * 重置toast选项值
  * @param option toast选项值
@@ -188,6 +208,11 @@ function reset(option: ToastOptions) {
   }
 }
 
+/**
+ * 合并 option 和 props 配置。option 优先级高于 props，用于动态更新 toast 展示状态。
+ * @param option - 通过 selector 共享的 toast 运行时选项
+ * @param props - 组件的 props 默认值
+ */
 function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
   iconName.value = isDef(option.iconName!) ? option.iconName! : props.iconName
   iconClass.value = isDef(option.iconClass!) ? option.iconClass! : props.iconClass