feat: 更新 LivePhoto 组件的指示器样式，添加纯 CSS 图标支持

Author: IceyWu

src/uni_modules/uni-ui-plus/components/livephoto/index.scss

@@ -122,34 +122,64 @@
   &__indicator-icon {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    gap: 8rpx;
   }
 
-  &__indicator-svg {
+  // 纯 CSS 图标 - 兼容所有平台
+  &__indicator-css {
+    position: relative;
+    width: 48rpx;
+    height: 48rpx;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-sizing: border-box;
-    padding: 0 2rpx;
-    
-    :global(svg) {
-      width: 32rpx;
-      height: 32rpx;
-      color: #ffffff;
-    }
-    
-    :global(.live-icon) {
-      color: #ffffff;
+    transform: scale(0.6); // 缩小到更小的显示尺寸
+  }
+
+  &__indicator-center {
+    position: absolute;
+    width: 8rpx;
+    height: 8rpx;
+    background-color: #ffffff;
+    border-radius: 50%;
+    z-index: 3;
+  }
+
+  &__indicator-inner-ring {
+    position: absolute;
+    width: 20rpx;
+    height: 20rpx;
+    border: 3rpx solid #ffffff; // 增加边框粗细
+    border-radius: 50%;
+    z-index: 2;
+  }
+
+  &__indicator-dots {
+    position: absolute;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  &__indicator-progress-dot {
+    position: absolute;
+    width: 5rpx; // 增加圆点大小
+    height: 5rpx; // 增加圆点大小
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    transition: background-color 0.3s ease-out;
+
+    &--active {
+      background-color: #ffffff;
     }
   }
 
   &__indicator-text {
     font-size: 24rpx;
     font-weight: 500;
     color: #ffffff;
+    letter-spacing: 0.5rpx;
     line-height: 1;
-    margin-left: 8rpx;
-    margin-right: 6rpx;
   }
 
   &__hint {

src/uni_modules/uni-ui-plus/components/livephoto/livephoto.vue

@@ -4,7 +4,6 @@ import { addUnit, isDef, objToStyle } from '../_utils'
 import UpImage from '../image/image.vue'
 import type { LivePhotoEmits, LivePhotoProps } from './livephoto'
 import { livePhotoProps } from './livephoto'
-import { liveIcon, createProgressLiveIcon } from './icons'
 
 // Props 定义
 const props = defineProps(livePhotoProps)
@@ -78,13 +77,21 @@ const rootClass = computed(() => {
   return `up-live-photo ${props.customClass}`
 })
 
-// 计算指示器图标
-const indicatorIcon = computed(() => {
-  if (isVideoLoading.value) {
-    return createProgressLiveIcon(videoLoadProgress.value)
+// 计算圆点位置
+function getDotPosition(index: number) {
+  const angle = (index * 30 - 90) * (Math.PI / 180) // 从顶部开始，转换为弧度
+  const radius = 20 // 圆点到中心的距离
+  const centerX = 24 // 容器中心 X (48/2)
+  const centerY = 24 // 容器中心 Y (48/2)
+
+  const x = centerX + radius * Math.cos(angle)
+  const y = centerY + radius * Math.sin(angle)
+
+  return {
+    left: `${x - 2.5}rpx`, // 减去圆点半径（5rpx/2）
+    top: `${y - 2.5}rpx` // 减去圆点半径（5rpx/2）
   }
-  return liveIcon
-})
+}
 
 // 监听视频源变化，重置加载状态
 watch(
@@ -410,9 +417,23 @@ export default {
     <!-- Live Photo 指示器 - 独立于交互层，避免动画影响 -->
     <view v-if="showIndicator" class="up-live-photo__indicator" :class="{ 'up-live-photo__indicator--active': isPressed }">
       <view class="up-live-photo__indicator-icon">
-        <!-- SVG 图标 -->
-        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
-        <view class="up-live-photo__indicator-svg" v-html="indicatorIcon"></view>
+        <!-- 纯 CSS 图标 - 兼容所有平台 -->
+        <view class="up-live-photo__indicator-css">
+          <!-- 中心圆点 -->
+          <view class="up-live-photo__indicator-center"></view>
+          <!-- 内圆环 -->
+          <view class="up-live-photo__indicator-inner-ring"></view>
+          <!-- 外围进度圆点 -->
+          <view class="up-live-photo__indicator-dots">
+            <view
+              v-for="(dot, index) in 12"
+              :key="index"
+              class="up-live-photo__indicator-progress-dot"
+              :class="{ 'up-live-photo__indicator-progress-dot--active': (isVideoLoading && index / 12 <= videoLoadProgress / 100) || isVideoLoaded }"
+              :style="getDotPosition(index)"
+            ></view>
+          </view>
+        </view>
         <!-- LIVE 文字 -->
         <text class="up-live-photo__indicator-text">LIVE</text>
       </view>