oxy-uni-ui 2.1.2 → 2.1.4

package/components/oxy-tag/index.scss

@@ -27,6 +27,23 @@
 @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;
@@ -68,10 +85,12 @@
   $roundRadius: map-get($sizeConfig, roundRadius);
   $markRadius: map-get($sizeConfig, markRadius);
 
-  font-size: $fontSize;
-  padding: $paddingY $paddingX;
-  min-height: $minHeight;
-  border-radius: $radius;
+  & {
+    font-size: $fontSize;
+    padding: $paddingY $paddingX;
+    min-height: $minHeight;
+    border-radius: $radius;
+  }
 
   &.is-round {
     padding: $paddingY $roundPaddingX;
@@ -306,7 +325,7 @@ $-tag-size-large-config: (
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-left: 12rpx;
+    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.size],
+  [
+    () => props.useIconSlot,
+    () => props.icon,
+    () => props.light,
+    () => props.plain,
+    () => props.dynamic,
+    () => props.round,
+    () => props.mark,
+    () => props.size
+  ],
   () => {
     computeTagClass()
   },
@@ -118,11 +129,15 @@ const textStyle = computed(() => {
   return objToStyle(textStyle)
 })
 
+/**
+ * 根据 tag 的 type、size、light、plain、round 等属性组合生成样式类名。
+ */
 function computeTagClass() {
-  const { type, size, 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

@@ -44,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

package/components/oxy-toast/types.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes, PropType, Ref } from 'vue'
 import { baseProps, makeStringProp } from '../common/props'
 import type { LoadingType } from '../oxy-loading/types'
 
@@ -10,6 +10,8 @@ export type ToastDirection = 'vertical' | 'horizontal' // 提示信息框的排
 
 export type ToastLoadingType = LoadingType // 提示信息加载状态类型
 
+export type ToastId = string
+
 export type ToastOptions = {
   msg?: string
   duration?: number
@@ -46,22 +48,31 @@ export type ToastOptions = {
 }
 
 export interface Toast {
+  // 当前 Toast 实例 id
+  id: ToastId
   // 打开Toast
-  show(toastOptions: ToastOptions | string): void
+  show(toastOptions: ToastOptions | string): ToastId
   // 成功提示
-  success(toastOptions: ToastOptions | string): void
+  success(toastOptions: ToastOptions | string): ToastId
   // 关闭提示
-  error(toastOptions: ToastOptions | string): void
+  error(toastOptions: ToastOptions | string): ToastId
   // 常规提示
-  info(toastOptions: ToastOptions | string): void
+  info(toastOptions: ToastOptions | string): ToastId
   // 警告提示
-  warning(toastOptions: ToastOptions | string): void
+  warning(toastOptions: ToastOptions | string): ToastId
   // 加载提示
-  loading(toastOptions: ToastOptions | string): void
+  loading(toastOptions: ToastOptions | string): ToastId
   // 关闭Toast
   close(): void
 }
 
+export type ToastProvide = {
+  /**
+   * toast 运行时选项，默认隐藏。
+   */
+  toastOption: Ref<ToastOptions>
+}
+
 export const toastProps = {
   ...baseProps,
   /**
@@ -127,9 +138,9 @@ export const toastProps = {
   /**
    * 位置
    * @type {'top' | 'middle-top' | 'middle' | 'bottom'}
-   * @default 'middle-top'
+   * @default 'middle'
    */
-  position: makeStringProp<ToastPositionType>('middle-top'),
+  position: makeStringProp<ToastPositionType>('middle'),
   /**
    * 层级
    * @type {number}

package/components/oxy-tooltip/index.scss

@@ -59,7 +59,7 @@
     right: -16rpx;
     top: -20rpx;
     transform: scale(0.5);
-    padding: 20rpx;
+    padding: $-spacing-20;
   }
 
   @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);

package/components/oxy-tooltip/oxy-tooltip.vue

@@ -27,7 +27,9 @@ export default {
   name: 'oxy-tooltip',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }

package/components/oxy-transition/index.scss

@@ -1,5 +1,7 @@
+@import '../common/abstracts/variable';
+
 .oxy-transition {
-  transition-timing-function: ease;
+  transition-timing-function: $-transition-timing-function-base;
 }
 
 .oxy-fade-enter,

package/components/oxy-transition/oxy-transition.vue

@@ -19,7 +19,9 @@ export default {
   name: 'oxy-transition',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -31,6 +33,10 @@ import { isObj, isPromise, pause } from '../common/util'
 import { transitionProps, type TransitionName } from './types'
 import { AbortablePromise } from '../common/AbortablePromise'
 
+/**
+ * 根据 name 属性生成进入/离开的 CSS 类名
+ * name 可以是单个字符串或数组，用于组合多个过渡效果
+ */
 const getClassNames = (name?: TransitionName | TransitionName[]) => {
   let enter: string = `${props.enterClass} ${props.enterActiveClass}`
   let enterTo: string = `${props.enterToClass} ${props.enterActiveClass}`
@@ -134,6 +140,10 @@ function handleAbortPromise() {
   leaveLifeCyclePromises.value = null
 }
 
+/**
+ * 进入动画：使用 AbortablePromise 管理生命周期
+ * before-enter → enter → (显示元素) → enter-to（触发 CSS transition）
+ */
 function enter() {
   enterPromise.value = new AbortablePromise(async (resolve) => {
     try {
@@ -163,6 +173,10 @@ function enter() {
     }
   })
 }
+/**
+ * 离开动画：等待进入动画完成后执行离开
+ * before-leave → leave → leave-to（触发 CSS transition）→ after-leave
+ */
 async function leave() {
   if (!enterPromise.value) {
     transitionEnded.value = false

package/components/oxy-tree/index.scss

@@ -29,15 +29,15 @@
     display: flex;
 
     :deep(.oxy-button) {
-      min-width: 120rpx;
+      min-width: $-tree-search-btn-min-width;
     }
 
     :deep(.oxy-tree__search-input) {
       flex: 1;
       background-color: $-tree-search-input-color;
-      padding: 16rpx 24rpx;
+      padding: $-spacing-4 $-spacing-24;
       border-radius: $-tree-search-input-radius;
-      margin-bottom: 20rpx;
+      margin-bottom: $-tree-search-btn-margin-bottom;
       margin-right: $-spacing-24;
 
       .oxy-input__icon {

package/components/oxy-tree/oxy-tree.vue

@@ -11,7 +11,7 @@
           v-model="searchValue"
           @confirm="handleFilter"
         />
-        <oxy-button :round="false" @click="handleFilter">筛选</oxy-button>
+        <oxy-button :round="false" @click="handleFilter">{{ translate('filterButton') }}</oxy-button>
       </view>
     </slot>
 
@@ -39,10 +39,9 @@
 
                 <!-- 兼容支付宝、微信小程序 -->
                 <view class="oxy-tree-node-toggle" @tap.stop="handleClickExpand(item)">
-                  <oxy-icon
-                    :name="expandedKeySet.has(item.key) ? 'chevron-down-circle' : 'chevron-right-circle'"
-                    custom-class="oxy-tree-node-icon"
-                  ></oxy-icon>
+                  <slot name="expand-icon" :node="item" :data="item.data" :expanded="expandedKeySet.has(item.key)">
+                    <oxy-icon :name="expandedKeySet.has(item.key) ? expandIcon : collapseIcon" custom-class="oxy-tree-node-icon"></oxy-icon>
+                  </slot>
                 </view>
                 <oxy-checkbox
                   v-if="showCheckbox"
@@ -77,7 +76,9 @@
 export default {
   name: 'oxy-tree',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -91,9 +92,11 @@ import { treeProps, type TreeExpose } from './types'
 import { isSetsEqual, useTreeMethods } from './utils'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
 import { withDefaultUnit, unitConvert, unitConvertWithDefault } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(treeProps)
+const { translate } = useTranslate('tree')
 const {
   modelValue,
   data,
@@ -181,6 +184,11 @@ const {
   backToTopThreshold: backToTopThreshold
 })
 
+/**
+ * 根据原始数据创建树结构。递归遍历构建 TreeNode，记录节点级别、是否叶子节点、展开状态等。
+ * @param data - 原始树数据
+ * @returns 含 treeNodeMap、levelTreeNodeMap、maxLevel、treeNodes 的树对象
+ */
 const createTree = (data: RawTreeNode[]) => {
   const treeNodeMap = new Map<string, TreeNode>()
   const levelTreeNodeMap = new Map<number, TreeNode[]>()
@@ -247,6 +255,12 @@ const toggleExpand = (node: TreeNode, flag: boolean) => {
     emit('node-collapse', node)
   }
 }
+/**
+ * 递归切换节点勾选状态。关联模式下同步更新所有子孙节点，并向上递归更新父节点状态。
+ * @param node - 当前节点
+ * @param flag - 是否选中
+ * @param isClick - 是否由点击触发（控制是否 emit node-check）
+ */
 const toggleChecked = (node: TreeNode, flag: boolean, isClick: boolean = false) => {
   if (!showCheckbox.value || !node || node.disabled) {
     return
@@ -293,6 +307,10 @@ const updateParentNode = (node: TreeNode) => {
   updateNode(node.parent)
   updateParentNode(node.parent)
 }
+/**
+ * 根据子节点状态更新当前节点的勾选/半选状态。
+ * 全选→checked，全不选→unchecked，部分选→indeterminate（半选）。
+ */
 const updateNode = (node: TreeNode | undefined) => {
   if (!node) return
   if (node.children?.every((item) => item.checked)) {
@@ -447,6 +465,11 @@ const filter = (query: string) => {
   }
 }
 
+/**
+ * 执行树节点过滤。遍历所有节点，匹配的节点及其祖先展开显示，不匹配的叶子节点和非匹配分支节点隐藏。
+ * @param query - 搜索关键词
+ * @returns 应展开的节点 key 集合
+ */
 const doFilter = (query: string) => {
   if (typeof props.filterMethod !== 'function') {
     return