oxy-uni-ui 1.1.0 → 1.2.0

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; // 文字颜色

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/useVirtualScroll.ts

@@ -0,0 +1,172 @@
+/**
+ * 虚拟滚动组合式函数 - 用于复用虚拟滚动逻辑
+ */
+
+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 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-corner/index.scss

@@ -14,6 +14,9 @@
     width: 80px;
     height: 80px;
     overflow: hidden;
+    @include when(round) {
+      border-top-right-radius: $-corner-radius;
+    }
     @include when(primary) {
       .oxy-corner__text {
         @include corner-type-style($-corner-color, $-corner-primary-bg);
@@ -23,6 +26,11 @@
           @include corner-type-style($-corner-primary-color, $-corner-horizontal-primary-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-primary-color, $-corner-embedded-primary-bg);
+        }
+      }
     }
     @include when(info) {
       .oxy-corner__text {
@@ -33,6 +41,11 @@
           @include corner-type-style($-corner-info-color, $-corner-horizontal-info-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-info-color, $-corner-embedded-info-bg);
+        }
+      }
     }
     @include when(success) {
       .oxy-corner__text {
@@ -43,6 +56,11 @@
           @include corner-type-style($-corner-success-color, $-corner-horizontal-success-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-success-color, $-corner-embedded-success-bg);
+        }
+      }
     }
     @include when(warning) {
       .oxy-corner__text {
@@ -53,6 +71,11 @@
           @include corner-type-style($-corner-warning-color, $-corner-horizontal-warning-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-warning-color, $-corner-embedded-warning-bg);
+        }
+      }
     }
     @include when(danger) {
       .oxy-corner__text {
@@ -63,12 +86,21 @@
           @include corner-type-style($-corner-danger-color, $-corner-horizontal-danger-bg);
         }
       }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-danger-color, $-corner-embedded-danger-bg);
+        }
+      }
     }
     &:not(.is-horizontal) {
       &.is-top-left{
         top: 0;
         left: 0;
         right: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-top-left-radius: $-corner-radius;
+        }
         .oxy-corner__text {
           transform: rotate(-45deg);
           top: 10px;
@@ -79,6 +111,10 @@
         bottom: 0;
         left: 0;
         top: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-bottom-left-radius: $-corner-radius;
+        }
         .oxy-corner__text {
           transform: rotate(-135deg);
           bottom: 10px;
@@ -94,6 +130,10 @@
         bottom: 0;
         right: 0;
         top: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: $-corner-radius;
+        }
         .oxy-corner__text {
           transform: rotate(135deg);
           bottom: 10px;
@@ -105,6 +145,62 @@
           }
         }
       }
+      &.is-embedded {
+        &.is-top-left{
+          &::after {
+            left: auto;
+            right: -6px;
+            bottom: 0;
+            transform: skewX(-30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            top: 0;
+            left: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 32px;
+            padding-left: 0;
+            padding-right: 12px;
+          }
+        }
+        &.is-bottom-left{
+          &::after {
+            left: auto;
+            right: -6px;
+            bottom: 0;
+            transform: skewX(30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            bottom: 0;
+            left: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 32px;
+            padding-left: 0;
+            padding-right: 12px;
+            > span{
+              transform: none;
+            }
+          }
+        }
+        &.is-bottom-right{
+          &::after {
+            left: -6px;
+            bottom: 0;
+            transform: skewX(-30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            bottom: 0;
+            right: 0;
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 32px;
+            > span{
+              transform: none;
+            }
+          }
+        }
+      }
       .oxy-corner__text {
         width: 106px;
         height: 32px;
@@ -134,5 +230,29 @@
         text-align: right;
       }
     }
+    &.is-embedded {
+      width: 106px;
+      height: 32px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: -6px;
+        bottom: 0;
+        width: 16px;
+        height: 32px;
+        background-color: #ffffff;
+        transform: skewX(30deg);
+      }
+      .oxy-corner__text {
+        right: 0;
+        top: 0;
+        transform: none;
+        padding-left: 12px;
+        box-sizing: border-box;
+        font-size: $-corner-embedded-font-size;
+        font-weight: $-corner-embedded-font-weight;
+        border-bottom-left-radius: 32px;
+      }
+    }
   }
-}
+}

package/components/oxy-corner/oxy-corner.vue

@@ -30,7 +30,7 @@ const props = defineProps(cornerProps)
 const cornerClass = ref<string>('')
 
 watch(
-  [() => () => props.position, () => props.mode],
+  [() => () => props.position, () => props.mode, () => props.round],
   () => {
     computeCornerClass()
   },
@@ -53,11 +53,12 @@ const textClass = computed(() => {
 })
 
 function computeCornerClass() {
-  const { type, position, mode } = props
+  const { type, position, mode, round } = props
   let cornerClassList: string[] = []
   type && cornerClassList.push(`is-${type}`)
   position && cornerClassList.push(`is-${position}`)
   mode && cornerClassList.push(`is-${mode}`)
+  round && cornerClassList.push('is-round')
   cornerClass.value = cornerClassList.join(' ')
 }
 </script>

package/components/oxy-corner/types.ts

@@ -3,7 +3,7 @@ import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type CornerType = 'primary' | 'info' | 'success' | 'warning' | 'danger'
 export type CornerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-export type CornerMode = '' | 'horizontal'
+export type CornerMode = '' | 'horizontal' | 'embedded'
 
 export const cornerProps = {
   ...baseProps,
@@ -24,10 +24,17 @@ export const cornerProps = {
    */
   position: makeStringProp<CornerPosition>('top-right'),
 
+  /**
+   * 圆角类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  round: makeBooleanProp(false),
+
   /**
    * 角标模式
    * 类型：string
-   * 可选值：'horizontal'
+   * 可选值：'horizontal' / 'embedded'
    * 默认值：''
    */
   mode: makeStringProp<CornerMode>(''),

package/components/oxy-list/index.scss

@@ -1,4 +1,5 @@
 @import './../common/abstracts/_mixin.scss';
 @import './../common/abstracts/variable.scss';
-@include b(list) {
-}
+@import './../oxy-virtual-scroll/index.scss';
+
+@include b(list) {}

package/components/oxy-list/oxy-list.vue

@@ -1,38 +1,61 @@
 <template>
-  <view :class="['oxy-list', customClass]" :style="customStyle">
-    <oxy-virtual-scroll
-      ref="virtualScrollRef"
-      :is-virtual="virtual"
-      :data="data"
-      :height="height"
-      :item-height="itemHeight"
-      :id-key="idKey"
-      :show-back-to-top="showBackToTop"
-      :back-to-top-threshold="backToTopThreshold"
+  <view :class="['oxy-list', 'oxy-virtual-scroll', customClass]" :style="customStyle">
+    <!-- 滚动内容区域 -->
+    <scroll-view
+      v-if="data.length"
+      :style="{ height: height }"
+      class="oxy-virtual-scroll__view"
+      :scroll-y="true"
+      :scroll-x="scrollX"
+      :upper-threshold="upperThreshold"
+      :lower-threshold="lowerThreshold"
+      :scroll-top="scrollTop"
+      :scroll-left="scrollLeft"
+      :scroll-with-animation="scrollWithAnimation"
+      :enable-back-to-top="enableBackToTop"
+      :show-scrollbar="showScrollbar"
+      :refresher-enabled="refresherEnabled"
+      :refresher-threshold="refresherThreshold"
+      :refresher-default-style="refresherDefaultStyle"
+      :refresher-background="refresherBackground"
       :refresher-triggered="triggered"
-      v-bind="{ ...defaultscrollConfig, ...scrollConfig }"
-      @scroll-to-upper="onScrollToUpper"
-      @scroll-to-lower="onScrollToLower"
-      @scroll="onScroll"
+      :enable-flex="enableFlex"
+      :scroll-anchoring="scrollAnchoring"
+      @scroll="handleScroll"
+      @scrolltoupper="onScrollToUpper"
+      @scrolltolower="onScrollToLower"
       @refresherrefresh="onRefresh"
       @refresherrestore="onRestore"
       @refresherabort="onAbort"
     >
-      <template #item="{ item }">
-        <slot name="item" :item="item"></slot>
-      </template>
-      <template #bottom>
-        <oxy-loadmore
-          v-if="loadmoreState"
-          :state="loadmoreState"
-          :loading-text="loadingText"
-          :finished-text="finishedText"
-          :error-text="errorText"
-          :loading-props="loadingProps"
-          @reload="onReload"
-        />
-      </template>
-    </oxy-virtual-scroll>
+      <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
+        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+          <view v-for="(item, index) in virtualData" :key="index">
+            <slot name="item" :item="item" :index="startIndex + index"></slot>
+          </view>
+          <slot name="bottom">
+            <oxy-loadmore
+              v-if="loadmoreState"
+              :state="loadmoreState"
+              :loading-text="loadingText"
+              :finished-text="finishedText"
+              :error-text="errorText"
+              :loading-props="loadingProps"
+              @reload="onReload"
+            />
+          </slot>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view v-else>
+      <oxy-status-tip image="content" :tip="emptyText" />
+    </view>
+
+    <!-- 回到顶部按钮 -->
+    <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
+      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+    </view>
   </view>
 </template>
 
@@ -48,7 +71,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, toRefs } from 'vue'
 import { type ListExpose, listProps } from './types'
 import type {
   ScrollViewOnRefresherabortEvent,
@@ -56,18 +79,70 @@ import type {
   ScrollViewOnRefresherrestoreEvent,
   ScrollViewOnScrollEvent
 } from '@uni-helper/uni-app-types/index'
-import type { VirtualScrollInstance } from '../oxy-virtual-scroll/types'
+import { useVirtualScroll } from '../composables/useVirtualScroll'
 
 const props = defineProps(listProps)
 
 const emit = defineEmits(['scroll-to-lower', 'reload', 'scroll-to-upper', 'scroll', 'refresh', 'restore', 'abort'])
-const virtualScrollRef = ref<VirtualScrollInstance | null>(null)
 
 const defaultscrollConfig = {
-  refresherEnabled: true,
+  refresherEnabled: false,
   refresherThreshold: 60,
   scrollWithAnimation: false
-}
+} as const
+
+// 解构props用于组合式函数
+const {
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  showBackToTop,
+  backToTopThreshold,
+  scrollY,
+  scrollX,
+  upperThreshold,
+  lowerThreshold,
+  scrollLeft,
+  scrollWithAnimation,
+  enableBackToTop,
+  showScrollbar,
+  refresherEnabled,
+  refresherThreshold,
+  refresherDefaultStyle,
+  refresherBackground,
+  triggered,
+  enableFlex,
+  scrollAnchoring
+} = toRefs(props)
+
+// 使用虚拟滚动组合式函数
+const {
+  scrollTop,
+  showBackTopBtn,
+  virtualData,
+  startIndex,
+  virtualOffsetY,
+  totalHeight,
+  displayData,
+  initScrollData,
+  initScrollEngine,
+  updateVisibleData,
+  scrollToTop: virtualScrollToTop,
+  scrollToBottom: virtualScrollToBottom,
+  scrollToPosition: virtualScrollToPosition,
+  scrollToElement: virtualScrollToElement,
+  scrollToElementById: virtualScrollToElementById,
+  onScroll: handleVirtualScroll
+} = useVirtualScroll({
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  backToTopThreshold
+})
 
 const onScrollToLower = async () => {
   emit('scroll-to-lower')
@@ -78,7 +153,10 @@ const onScrollToUpper = async () => {
 const onReload = async () => {
   emit('reload')
 }
-const onScroll = async (event: ScrollViewOnScrollEvent) => {
+
+// 滚动事件处理
+const handleScroll = async (event: ScrollViewOnScrollEvent) => {
+  handleVirtualScroll(event.detail.scrollTop)
   emit('scroll', event)
 }
 
@@ -96,21 +174,24 @@ const onRestore = (e: ScrollViewOnRefresherrestoreEvent) => {
 const onAbort = (e: ScrollViewOnRefresherabortEvent) => {
   emit('abort', e)
 }
+
+// 滚动方法
 const scrollToTop = () => {
-  virtualScrollRef.value?.scrollToTop()
+  virtualScrollToTop()
 }
 const scrollToBottom = () => {
-  virtualScrollRef.value?.scrollToBottom()
+  virtualScrollToBottom()
 }
 const scrollToPosition = (position: number | string) => {
-  virtualScrollRef.value?.scrollToPosition(position)
+  virtualScrollToPosition(position)
 }
 const scrollToElement = (item: any) => {
-  virtualScrollRef.value?.scrollToElement(item)
+  virtualScrollToElement(item)
 }
 const scrollToElementById = (id: string | number) => {
-  virtualScrollRef.value?.scrollToElementById(id)
+  virtualScrollToElementById(id)
 }
+
 defineExpose<ListExpose>({
   scrollToTop,
   scrollToBottom,

package/components/oxy-list/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { makeBooleanProp } from '../common/props'
+import { makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 import { type LoadMoreState } from '../oxy-loadmore/types'
 import { type LoadingProps } from '../oxy-loading/types'
 import { virtualScrollProps } from '../oxy-virtual-scroll/types'
@@ -25,19 +25,7 @@ export const listProps = {
    * 加载中loading组件的属性
    * 参考loading组件
    */
-  loadingProps: Object as PropType<Partial<LoadingProps>>,
-  triggered: makeBooleanProp(false),
-  scrollConfig: {
-    type: Object as PropType<ScrollConfig>,
-    default: () => ({})
-  }
-}
-export type ScrollConfig = {
-  refresherEnabled: boolean
-  refresherThreshold: number
-  refresherBackground: string
-  animation: boolean
-  [key: string]: any
+  loadingProps: Object as PropType<Partial<LoadingProps>>
 }
 export type ListExpose = {
   scrollToTop: () => void