oxy-uni-ui 1.1.0 → 1.2.3

package/components/common/abstracts/variable.scss

@@ -642,6 +642,7 @@ $-tag-close-color: var(--oxy-tag-close-color, $-tag-info-color) !default; // 关
 $-tag-close-active-color: var(--oxy-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色
 
 /* corner */
+$-corner-radius: var(--oxy-corner-radius, 12px) !default; // 圆角大小
 $-corner-font-size: var(--oxy-corner-fs, $-fs-secondary) !default; // 字号
 $-corner-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
 $-corner-color: var(--oxy-corner-color, $-color-white) !default; // 字体颜色
@@ -662,6 +663,13 @@ $-corner-horizontal-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-colo
 $-corner-horizontal-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'light' 'dark', #ffffff #b2ebcf, 0% 100%)) !default; // success 背景颜色
 $-corner-horizontal-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'light' 'dark', #ffffff #fcedd6, 0% 100%)) !default; // warning 背景颜色
 $-corner-horizontal-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'light' 'dark', #ffffff #ffd5d8, 0% 100%)) !default; // danger 背景颜色
+$-corner-embedded-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
+$-corner-embedded-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
+$-corner-embedded-primary-bg: var(--oxy-corner-primary-bg, #cceaff) !default; // 主背景颜色
+$-corner-embedded-info-bg: var(--oxy-corner-info-bg, #eef4fc) !default; // info 背景颜色
+$-corner-embedded-success-bg: var(--oxy-corner-success-bg, #b2ebcf) !default; // success 背景颜色
+$-corner-embedded-warning-bg: var(--oxy-corner-warning-bg, #fcedd6) !default; // warning 背景颜色
+$-corner-embedded-danger-bg: var(--oxy-corner-danger-bg, #ffd5d8) !default; // danger 背景颜色
 
 /* toast */
 $-toast-color: var(--oxy-toast-color, $-color-white) !default; // 文字颜色
@@ -968,6 +976,16 @@ $-text-error-color: var(--oxy-text-error-color, $-color-danger) !default;
 $-text-warning-color: var(--oxy-text-warning-color, $-color-warning) !default;
 $-text-success-color: var(--oxy-text-success-color, $-color-success) !default;
 
+/* link */
+$-link-info-color: var(--oxy-link-info-color, $-color-content) !default;
+$-link-primary-color: var(--oxy-link-primary-color, $-color-theme) !default;
+$-link-error-color: var(--oxy-link-error-color, $-color-danger) !default;
+$-link-warning-color: var(--oxy-link-warning-color, $-color-warning) !default;
+$-link-success-color: var(--oxy-link-success-color, $-color-success) !default;
+$-link-font-size-small: var(--oxy-link-font-size-small, $-fs-content) !default;
+$-link-font-size-medium: var(--oxy-link-font-size-medium, $-fs-title) !default;
+$-link-font-size-large: var(--oxy-link-font-size-large, $-fs-important) !default;
+
 /* video-preview */
 $-video-preview-bg: var(--oxy-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
 $-video-preview-close-color: var(--oxy-video-preview-close-color, #fff) !default; // 图标颜色
@@ -997,6 +1015,46 @@ $-signature-button-margin-left: var(--oxy-signature-button-margin-left, 8px) !de
 
 
 /* tree */
-$-tree-node-current-bg:var(--oxy-tree-node-current-bg, var(--oxy-color-theme, #4d80ef1a));
+$-tree-node-current-bg:var(--oxy-tree-node-current-bg, #4d80ef1a);
 $-tree-node-current-color:var(--oxy-tree-node-current-color, $-text-primary-color);
 $-tree-node-disabled-color:var(--oxy-tree-node-disabled-color, $-color-icon-disabled);
+$-tree-search-input-color:var(--oxy-tree-search-input-color, #f6f6f6);
+
+/* rich-text */
+$-rich-text-primary-color: var(--oxy-rich-text-primary-color, $-color-content);
+$-rich-text-title-color: var(--oxy-rich-text-title-color, $-color-title);
+$-rich-text-blockquote-border-color: var(--oxy-rich-text-blockquote-border-color, $-color-theme);
+$-rich-text-blockquote-color: var(--oxy-rich-text-blockquote-color, #555);
+$-rich-text-blockquote-bg: var(--oxy-rich-text-blockquote-bg, #f7f8fa);
+$-rich-text-list-color: var(--oxy-rich-text-list-color, #444);
+$-rich-text-a-color: var(--oxy-rich-text-a-color, $-color-theme);
+$-rich-text-strong-color: var(--oxy-rich-text-strong-color, #222);
+$-rich-text-em-color: var(--oxy-rich-text-em-color, #222);
+$-rich-text-hr-color: var(--oxy-rich-text-hr-color, #e5e6eb);
+$-rich-text-table-border-color: var(--oxy-rich-text-table-border-color, #e5e6eb);
+$-rich-text-table-head-bg: var(--oxy-rich-text-table-head-bg, #f7f8fa);
+$-rich-text-table-head-color: var(--oxy-rich-text-table-head-color, #333);
+$-rich-text-table-text-color: var(--oxy-rich-text-table-text-color, #444);
+$-rich-text-code-bg: var(--oxy-rich-text-code-bg, #2d2d2d);
+$-rich-text-code-color: var(--oxy-rich-text-code-color, #f8f8f2);
+$-rich-text-editable-border-color: var(--oxy-rich-text-editable-border-color, #e9e9e9);
+$-rich-text-toolbox-bg: var(--oxy-rich-text-toolbox-bg, #ededed);
+$-rich-text-popup-divider-color: var(--oxy-rich-text-popup-divider-color, gray);
+
+/* date-strip */
+$-date-strip-bg-color: var(--oxy-date-strip-bg-color, $-color-white);
+$-date-strip-height: var(--oxy-date-strip-height, 86px);
+$-date-strip-padding-x: var(--oxy-date-strip-padding-x, 0);
+$-date-strip-padding-y: var(--oxy-date-strip-padding-y, 8px);
+$-date-strip-font-size: var(--oxy-date-strip-font-size, 16px);
+$-date-strip-color: var(--oxy-date-strip-color, $-color-content);
+$-date-strip-prefix-color: var(--oxy-date-strip-prefix-color, $-font-gray-2);
+$-date-strip-prefix-font-size: var(--oxy-date-strip-prefix-font-size, 14px);
+$-date-strip-suffix-color: var(--oxy-date-strip-color, $-font-gray-2);
+$-date-strip-suffix-font-size: var(--oxy-date-strip-suffix-font-size, 14px);
+$-date-strip-active-color: var(--oxy-date-strip-active-color, $-color-theme);
+$-date-strip-square-radius: var(--oxy-date-strip-square-radius, 4px);
+$-date-strip-grid-width: var(--oxy-date-strip-grid-width, 50px);
+$-date-strip-grid-square-padding-x: var(--oxy-date-strip-grid-square-padding-x, 0);
+$-date-strip-grid-square-padding-y: var(--oxy-date-strip-grid-square-padding-y, 6px);
+$-date-strip-grid-circle-radius: var(--oxy-date-strip-grid-circle-radius, 50%);

package/components/common/path.ts

@@ -0,0 +1,9 @@
+/**
+ * 获取当前页面路径
+ * @returns 当前页面路径
+ */
+export function getCurrentPath() {
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  return currentPage?.route || ''
+}

package/components/common/util.ts

@@ -25,6 +25,39 @@ export function addUnit(num: number | string) {
   return Number.isNaN(Number(num)) ? `${num}` : `${num}px`
 }
 
+/**
+ * 单位转换函数，将字符串数字或带有单位的字符串转换为数字
+ * @param value 要转换的值，可以是字符串数字或带有单位的字符串
+ * @returns 转换后的数字，如果无法转换则返回0
+ */
+export function unitConvert(value: string | number | null | undefined, base: number = 0): number {
+  // 如果是字符串数字
+  if (isNumeric(value)) {
+    return Number(value)
+  }
+  // 如果有单位
+  if (isString(value)) {
+    const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+    const results = reg.exec(value)
+    if (!value || !results) {
+      return 0
+    }
+    const unit = results[3]
+    const _value = parseFloat(value)
+    if (unit === 'rpx') {
+      return uni.upx2px(_value)
+    }
+    if (unit === 'px') {
+      return _value * 1
+    }
+    if (unit == '%') {
+      return (_value / 100) * base
+    }
+    // 如果是其他单位，可以继续添加对应的转换逻辑
+  }
+  return 0
+}
+
 /**
  * @description 判断target是否对象
  * @param value
@@ -335,6 +368,15 @@ export function isNumber(value: any): value is number {
   return getType(value) === 'number'
 }
 
+/**
+ * 检查一个值是否为数字类型或表示数字的字符串
+ * @param value 要检查的值，可以是 string 类型或 number 类型
+ * @returns 如果值是数字类型或表示数字的字符串，则返回 true；否则返回 false
+ */
+export function isNumeric(value: any): boolean {
+  return /^(-)?\d+(\.\d+)?$/.test(value)
+}
+
 /**
  * 检查给定值是否为 Promise 对象。
  * @param {unknown} value 要检查的值

package/components/composables/index.ts

@@ -9,3 +9,4 @@ export { useRaf } from './useRaf'
 export { useTouch } from './useTouch'
 export { useTranslate } from './useTranslate'
 export { useUpload } from './useUpload'
+export { useVirtualScroll } from './useVirtualScroll'

package/components/composables/useGlobalLoading.ts

@@ -0,0 +1,42 @@
+import type { ToastOptions } from '../oxy-toast/types'
+import { deepMerge } from '../common/util'
+import { getCurrentPath } from '../common/path'
+
+import { defineStore } from 'pinia'
+
+interface GlobalLoading {
+  loadingOptions: ToastOptions
+  currentPage: string
+}
+
+const defaultOptions: ToastOptions = {
+  show: false
+}
+export const useGlobalLoading = defineStore('global-loading', {
+  state: (): GlobalLoading => ({
+    loadingOptions: defaultOptions,
+    currentPage: ''
+  }),
+  getters: {},
+  actions: {
+    // 加载提示
+    loading(option: ToastOptions | string) {
+      this.currentPage = getCurrentPath()
+      this.loadingOptions = deepMerge(
+        {
+          iconName: 'loading',
+          duration: 0,
+          cover: true,
+          position: 'middle',
+          show: true
+        },
+        typeof option === 'string' ? { msg: option } : option
+      ) as ToastOptions
+    },
+    // 关闭Toast
+    close() {
+      this.loadingOptions = defaultOptions
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useGlobalMessage.ts

@@ -0,0 +1,48 @@
+import type { MessageOptions, MessageResult } from '../oxy-message-box/types'
+import { deepMerge, isString } from '../common/util'
+import { defineStore } from 'pinia'
+import { getCurrentPath } from '../common/path'
+
+export type GlobalMessageOptions = MessageOptions & {
+  success?: (res: MessageResult) => void
+  fail?: (res: MessageResult) => void
+}
+
+interface GlobalMessage {
+  messageOptions: GlobalMessageOptions | null
+  currentPage: string
+}
+
+export const useGlobalMessage = defineStore('global-message', {
+  state: (): GlobalMessage => ({
+    messageOptions: null,
+    currentPage: ''
+  }),
+  actions: {
+    show(option: GlobalMessageOptions | string) {
+      this.currentPage = getCurrentPath()
+      this.messageOptions = {
+        ...(isString(option) ? { title: option } : option)
+      }
+    },
+    alert(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'alert' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = false
+      this.show(messageOptions)
+    },
+    confirm(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'confirm' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = true
+      this.show(messageOptions)
+    },
+    prompt(option: GlobalMessageOptions | string) {
+      const messageOptions = deepMerge({ type: 'prompt' }, isString(option) ? { title: option } : option) as MessageOptions
+      messageOptions.showCancelButton = true
+      this.show(messageOptions)
+    },
+    close() {
+      this.messageOptions = null
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useGlobalToast.ts

@@ -0,0 +1,84 @@
+import type { ToastOptions } from '../oxy-toast/types'
+import { deepMerge } from '../common/util'
+import { defineStore } from 'pinia'
+
+import { getCurrentPath } from '../common/path'
+
+interface GlobalToast {
+  toastOptions: ToastOptions
+  currentPage: string
+}
+
+const defaultOptions: ToastOptions = {
+  duration: 2000,
+  show: false
+}
+export const useGlobalToast = defineStore('global-toast', {
+  state: (): GlobalToast => ({
+    toastOptions: defaultOptions,
+    currentPage: ''
+  }),
+  getters: {},
+  actions: {
+    // 打开Toast
+    show(option: ToastOptions | string) {
+      this.currentPage = getCurrentPath()
+      const options = deepMerge(defaultOptions, typeof option === 'string' ? { msg: option } : option) as ToastOptions
+      this.toastOptions = deepMerge(options, {
+        show: true,
+        position: options.position || 'middle'
+      }) as ToastOptions
+    },
+    // 成功提示
+    success(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'success',
+            duration: 1500
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 关闭提示
+    error(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'error',
+            direction: 'vertical'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 常规提示
+    info(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'info'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 警告提示
+    warning(option: ToastOptions | string) {
+      this.show(
+        deepMerge(
+          {
+            iconName: 'warning'
+          },
+          typeof option === 'string' ? { msg: option } : option
+        ) as ToastOptions
+      )
+    },
+    // 关闭Toast
+    close() {
+      this.toastOptions = defaultOptions
+      this.currentPage = ''
+    }
+  }
+})

package/components/composables/useVirtualScroll.ts

@@ -0,0 +1,173 @@
+/**
+ * 虚拟滚动组合式函数 - 用于复用虚拟滚动逻辑
+ */
+
+import { ref, computed, watch, nextTick, type Ref } from 'vue'
+import { VirtualScrollEngine } from '../oxy-virtual-scroll/virtual-scroll'
+
+export interface UseVirtualScrollOptions {
+  data: Ref<any[]>
+  virtual: Ref<boolean>
+  height: Ref<string>
+  itemHeight: Ref<string>
+  idKey: Ref<string>
+  backToTopThreshold: Ref<string>
+}
+
+export interface UseVirtualScrollReturn {
+  // 响应式数据
+  scrollTop: Ref<number>
+  showBackTopBtn: Ref<boolean>
+  virtualData: Ref<any[]>
+  startIndex: Ref<number>
+  virtualOffsetY: Ref<number>
+  totalHeight: Ref<number>
+  displayData: Ref<any[]>
+
+  // 方法
+  initScrollData: () => void
+  initScrollEngine: () => void
+  updateVisibleData: () => void
+  scrollToTop: () => void
+  scrollToBottom: () => void
+  scrollToPosition: (position: number | string) => void
+  scrollToElement: (item: any) => void
+  scrollToElementById: (id: string | number) => void
+  onScroll: (scrollTopValue: number) => void
+}
+
+export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollReturn {
+  const { data, virtual, height, itemHeight, idKey, backToTopThreshold } = options
+
+  // 响应式数据
+  const scrollTop = ref<number>(0)
+  const _scrollTop = ref<number>(0)
+  const showBackTopBtn = ref<boolean>(false)
+  const virtualData = ref<any[]>([])
+  const startIndex = ref<number>(0)
+  const virtualOffsetY = ref<number>(0)
+  const virtualEngine = ref<any>(null)
+
+  // 计算属性
+  const displayData = computed<any[]>(() => data.value)
+
+  const totalHeight = computed(() => {
+    return displayData.value.length * parseFloat(itemHeight.value)
+  })
+
+  // 监听数据变化
+  watch(
+    () => data.value,
+    () => {
+      nextTick(initScrollData)
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
+
+  // 初始化滚动数据
+  function initScrollData() {
+    if (!virtual.value) {
+      // 非虚拟滚动模式：直接使用全部数据
+      virtualData.value = displayData.value
+      virtualOffsetY.value = 0
+      return
+    }
+
+    virtualEngine.value = new VirtualScrollEngine({
+      containerHeight: parseFloat(height.value),
+      itemHeight: parseFloat(itemHeight.value),
+      data: displayData.value
+    })
+    updateVisibleData()
+  }
+
+  // 初始化滚动引擎
+  function initScrollEngine() {
+    if (!virtual.value) return
+
+    virtualEngine.value = new VirtualScrollEngine({
+      containerHeight: parseFloat(height.value),
+      itemHeight: parseFloat(itemHeight.value),
+      data: displayData.value
+    })
+  }
+
+  // 更新可见数据
+  function updateVisibleData() {
+    if (!virtual.value) return // 非虚拟模式不处理
+
+    if (virtualEngine.value) {
+      const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(_scrollTop.value || 0)
+      virtualData.value = visibleData
+      virtualOffsetY.value = offsetY
+    }
+  }
+
+  // 滚动事件处理
+  function onScroll(scrollTopValue: number) {
+    _scrollTop.value = scrollTopValue
+    showBackTopBtn.value = scrollTopValue > parseFloat(backToTopThreshold.value)
+    updateVisibleData()
+  }
+
+  // 滚动到顶部
+  function scrollToTop() {
+    scrollTop.value = 0
+    nextTick(() => {
+      scrollTop.value = 0
+    })
+  }
+
+  // 滚动到底部
+  function scrollToBottom() {
+    scrollToPosition(totalHeight.value)
+  }
+
+  // 滚动到指定位置
+  function scrollToPosition(position: number | string) {
+    scrollTop.value = typeof position === 'number' ? position : parseFloat(position)
+  }
+
+  // 滚动到指定元素
+  function scrollToElement(item: any) {
+    const index = data.value.findIndex((o) => item[idKey.value] && o[idKey.value] && o[idKey.value] === item[idKey.value])
+    if (index > 0) {
+      const scrollDistance = parseFloat(itemHeight.value) * index
+      scrollToPosition(scrollDistance)
+    }
+  }
+
+  // 根据ID滚动到指定元素
+  function scrollToElementById(id: string | number) {
+    const index = data.value.findIndex((o) => id && o[idKey.value] && o[idKey.value] === id)
+    if (index > 0) {
+      const scrollDistance = parseFloat(itemHeight.value) * index
+      scrollToPosition(scrollDistance)
+    }
+  }
+
+  return {
+    // 响应式数据
+    scrollTop,
+    showBackTopBtn,
+    virtualData,
+    startIndex,
+    virtualOffsetY,
+    totalHeight,
+    displayData,
+
+    // 方法
+    initScrollData,
+    initScrollEngine,
+    updateVisibleData,
+    scrollToTop,
+    scrollToBottom,
+    scrollToPosition,
+    scrollToElement,
+    scrollToElementById,
+    onScroll
+  }
+}

package/components/oxy-cell/oxy-cell.vue

@@ -7,7 +7,7 @@
     @click="onClick"
   >
     <view :class="['oxy-cell__wrapper', vertical ? 'is-vertical' : '']">
-      <view v-if="showLeft" class="oxy-cell__left" :style="titleWidth ? 'min-width:' + titleWidth + ';max-width:' + titleWidth + ';' : ''">
+      <view v-if="showLeft" class="oxy-cell__left" :style="leftStyle">
         <text v-if="isRequired && markerSide === 'before'" class="oxy-cell__required oxy-cell__required--left">*</text>
         <!--左侧icon部位-->
         <slot name="icon">
@@ -65,7 +65,7 @@ import { useCell } from '../composables/useCell'
 import { useParent } from '../composables/useParent'
 import { FORM_KEY } from '../oxy-form/types'
 import { cellProps } from './types'
-import { isDef } from '../common/util'
+import { isDef, objToStyle } from '../common/util'
 
 const props = defineProps(cellProps)
 const emit = defineEmits(['click'])
@@ -116,6 +116,19 @@ const showLeft = computed(() => {
   return hasIcon || hasTitle || hasLabel
 })
 
+const leftStyle = computed(() => {
+  const leftStyle: Record<string, any> = {}
+  if (props.titleWidth) {
+    leftStyle['min-width'] = props.titleWidth
+    leftStyle['max-width'] = props.titleWidth
+  }
+  if (props.titlePercent) {
+    leftStyle['flex'] = 'none'
+    leftStyle['width'] = props.titlePercent
+  }
+  return objToStyle(leftStyle)
+})
+
 /**
  * @description 点击cell的handle
  */

package/components/oxy-cell/types.ts

@@ -53,6 +53,10 @@ export const cellProps = {
    * 设置左侧标题宽度
    */
   titleWidth: String,
+  /**
+   * 设置左侧标题占比
+   */
+  titlePercent: String,
   /**
    * 是否垂直居中，默认顶部居中
    */

package/components/oxy-checkbox/index.scss

@@ -73,7 +73,7 @@
   margin-bottom: $-checkbox-margin;
   font-size: 0;
   -webkit-tap-highlight-color: transparent;
-  line-height: 1.2;
+  // line-height: 1.2;
 
   @include when(last-child) {
     margin-bottom: 0;

package/components/oxy-checkbox/oxy-checkbox.vue

@@ -14,8 +14,8 @@
       :class="`oxy-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
       :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
     >
-      <oxy-icon custom-class="oxy-checkbox__indeterminate" name="decrease" />
-      <oxy-icon custom-class="oxy-checkbox__check" name="check-bold" />
+      <oxy-icon v-if="indeterminate" custom-class="oxy-checkbox__indeterminate" name="decrease" />
+      <oxy-icon v-else custom-class="oxy-checkbox__check" name="check-bold" />
     </view>
     <!--shape为button时只保留oxy-checkbox__label-->
     <view

package/components/oxy-col-picker/oxy-col-picker.vue

@@ -294,6 +294,9 @@ function showPicker() {
   const { disabled, readonly } = props
 
   if (disabled || readonly) return
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
   pickerShow.value = true
   lastPickerColSelected.value = pickerColSelected.value.slice(0)
   lastSelectList.value = selectList.value.slice(0)

package/components/oxy-col-picker/types.ts

@@ -152,7 +152,11 @@ export const colPickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 
 export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>