@10yun/cv-mobile-ui 0.5.44 → 0.5.46

package/uview-plus/components/u-select/style.css

@@ -5,11 +5,13 @@
   display: flex;
   justify-content: space-between;
   /* #ifdef H5 */
-  /* #endif */
 }
 .u-select__content .u-select__label:hover {
   cursor: pointer;
 }
+.u-select__content .u-select__label {
+  /* #endif */
+}
 .u-select__content .u-select__text {
   margin-right: 2px;
 }
@@ -31,15 +33,19 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  /* #ifdef H5 */
-  /* #endif */
 }
 .u-select__content .u-select__options .u-select__options_item:hover {
   background-color: #f7f7f7;
 }
+.u-select__content .u-select__options .u-select__options_item {
+  /* #ifdef H5 */
+}
 .u-select__content .u-select__options .u-select__options_item:hover {
   cursor: pointer;
 }
 .u-select__content .u-select__options .u-select__options_item .u-select__item_text:hover {
   cursor: pointer;
+}
+.u-select__content .u-select__options .u-select__options_item {
+  /* #endif */
 }

package/uview-plus/components/u-short-video/style.css

@@ -0,0 +1,117 @@
+.u-short-video {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+}
+.u-short-video__header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  background-color: rgba(255, 255, 255, 0.05);
+  opacity: 1;
+}
+.u-short-video__header__menu, .u-short-video__header__search {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.u-short-video__header__tabs {
+  flex: 1;
+  margin: 0 10px;
+}
+.u-short-video__content {
+  width: 100%;
+  height: 100%;
+}
+.u-short-video__content__item {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.u-short-video__content__video {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.u-short-video__content__video__speed {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 20px;
+  padding: 5px 10px;
+  display: flex;
+  align-items: center;
+}
+.u-short-video__content__video__speed .speed-text {
+  color: #fff;
+  font-size: 12px;
+  margin-right: 4px;
+}
+.u-short-video__content__author {
+  position: absolute;
+  left: 15px;
+  bottom: 100px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 10;
+}
+.u-short-video__content__author__info {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.u-short-video__content__author__name {
+  color: #eee;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+.u-short-video__content__author__desc {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+}
+.u-short-video__content__author__follow {
+  margin-left: 15px;
+}
+.u-short-video__content__actions {
+  position: absolute;
+  right: 15px;
+  bottom: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 10;
+}
+.u-short-video__content__actions__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+  color: #fff;
+}
+.u-short-video__content__actions__text {
+  color: #fff;
+  font-size: 12px;
+  margin-top: 5px;
+}
+.u-short-video__footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+}

package/uview-plus/components/u-short-video/style.scss

@@ -0,0 +1,138 @@
+.u-short-video {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+
+  &__header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 15px;
+    background-color: rgba(255, 255, 255, 0.05);
+    opacity: 1;
+
+    &__menu,
+    &__search {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+    }
+
+    &__tabs {
+      flex: 1;
+      margin: 0 10px;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    height: 100%;
+
+    &__item {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+
+    &__video {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      &__speed {
+        position: absolute;
+        top: 15px;
+        right: 15px;
+        z-index: 10;
+        background-color: rgba(0, 0, 0, 0.3);
+        border-radius: 20px;
+        padding: 5px 10px;
+        display: flex;
+        align-items: center;
+
+        .speed-text {
+          color: #fff;
+          font-size: 12px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &__author {
+      position: absolute;
+      left: 15px;
+      bottom: 100px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      z-index: 10;
+
+      &__info {
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      &__name {
+        color: #eee;
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      &__desc {
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 14px;
+      }
+
+      &__follow {
+        margin-left: 15px;
+      }
+    }
+
+    &__actions {
+      position: absolute;
+      right: 15px;
+      bottom: 100px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      z-index: 10;
+
+      &__item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 20px;
+        color: #fff;
+      }
+
+      &__text {
+        color: #fff;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  &__footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+
+  &__progress {
+  }
+}

package/uview-plus/components/u-short-video/u-short-video.vue

@@ -0,0 +1,296 @@
+<template>
+  <view class="u-short-video">
+    <!-- 顶部导航区域 -->
+    <view class="u-short-video__header">
+      <slot name="menu">
+        <view class="u-short-video__header__menu">
+          <up-icon name="grid" size="24"></up-icon>
+        </view>
+      </slot>
+      <up-tabs
+        :list="tabsList"
+        :current="currentTab"
+        lineColor="#ddd"
+        :activeStyle="{
+          color: '#ddd',
+          fontWeight: 400,
+          transform: 'scale(1)'
+        }"
+        :inactiveStyle="{
+          color: '#bbb',
+          transform: 'scale(1)'
+        }"
+        @change="handleTabChange"
+        class="u-short-video__header__tabs"
+      ></up-tabs>
+      <slot name="search">
+        <view class="u-short-video__header__search">
+          <up-icon name="search" size="24"></up-icon>
+        </view>
+      </slot>
+    </view>
+    <!-- 视频内容区域 -->
+    <swiper
+      :vertical="true"
+      :autoplay="false"
+      @change="handleSwiperChange"
+      :current="currentVideo"
+      class="u-short-video__content"
+    >
+      <swiper-item v-for="(item, index) in videoList" :key="index">
+        <view class="u-short-video__content__item">
+          <!-- 视频播放区域 -->
+          <view class="u-short-video__content__video">
+            <video
+              :id="'video-' + index"
+              :src="item.videoUrl"
+              :autoplay="index === currentVideo"
+              :controls="false"
+              :show-fullscreen-btn="false"
+              :show-play-btn="false"
+              :show-center-play-btn="false"
+              :enable-progress-gesture="true"
+              :loop="true"
+              :playback-rate="item.playbackRate || 1.0"
+              @play="onVideoPlay"
+              @pause="onVideoPause"
+              @ended="onVideoEnded"
+              @timeupdate="onTimeUpdate"
+              @loadedmetadata="onLoadedMetadata"
+              style="width: 100%; height: 100%"
+            ></video>
+            <!-- 倍速设置按钮 -->
+            <!-- <view class="u-short-video__content__video__speed" @click="showSpeedOptions(index)">
+							<text class="speed-text">{{ item.playbackRate || 1.0 }}x</text>
+							<up-icon name="arrow-down" size="12" color="#fff"></up-icon>
+						</view> -->
+          </view>
+          <!-- 作者信息 -->
+          <view class="u-short-video__content__author">
+            <view class="u-short-video__content__author__avatar">
+              <up-avatar :src="item.author.avatar" size="50px"></up-avatar>
+            </view>
+            <view class="u-short-video__content__author__info">
+              <text class="u-short-video__content__author__name">{{ item.author.name }}</text>
+              <text class="u-short-video__content__author__desc">{{ item.author.desc }}</text>
+            </view>
+            <view class="u-short-video__content__author__follow">
+              <up-button type="primary" size="mini">关注</up-button>
+            </view>
+          </view>
+          <!-- 右侧操作区域 -->
+          <view class="u-short-video__content__actions">
+            <slot name="actions" :item="item" :index="index">
+              <view class="u-short-video__content__actions__item" @click="handleLike(item, index)">
+                <up-icon color="#eee" :name="item.isLiked ? 'thumb-up-fill' : 'thumb-up'" size="32px"></up-icon>
+                <text class="u-short-video__content__actions__text">{{ item.likeCount }}</text>
+              </view>
+              <view class="u-short-video__content__actions__item" @click="handleComment(item, index)">
+                <up-icon color="#eee" name="chat" size="32px"></up-icon>
+                <text class="u-short-video__content__actions__text">{{ item.commentCount }}</text>
+              </view>
+              <view class="u-short-video__content__actions__item" @click="handleShare(item, index)">
+                <up-icon color="#eee" name="share" size="32px"></up-icon>
+                <text class="u-short-video__content__actions__text">{{ item.shareCount }}</text>
+              </view>
+              <view class="u-short-video__content__actions__item" @click="handleCollect(item, index)">
+                <up-icon color="#eee" :name="item.isCollected ? 'bookmark-fill' : 'bookmark'" size="32px"></up-icon>
+                <text class="u-short-video__content__actions__text">{{ item.collectCount }}</text>
+              </view>
+            </slot>
+          </view>
+        </view>
+      </swiper-item>
+    </swiper>
+    <!-- 倍速选择弹窗 -->
+    <up-action-sheet
+      :show="showSpeedSheet"
+      :actions="speedOptions"
+      title="播放速度"
+      @close="showSpeedSheet = false"
+      @select="selectSpeed"
+    ></up-action-sheet>
+    <!-- 底部导航栏 -->
+    <view class="u-short-video__footer">
+      <!-- 进度条 -->
+      <view class="u-short-video__progress" style="z-index: 999">
+        <up-slider
+          :value="videoList[currentVideo]?.progress"
+          :min="0"
+          :max="100"
+          :step="1"
+          :show-value="false"
+          :innerStyle="{ padding: 0 }"
+          activeColor="rgba(255,255,255,0.32)"
+          inactive-color="rgba(255,255,255,0.3)"
+          block-size="6px"
+          block-color="rgba(255,255,255,0.5)"
+          height="1px"
+          @changing="onProgressChanging"
+          @change="onProgressChange"
+        ></up-slider>
+      </view>
+      <slot name="tabbar">
+        <up-tabbar
+          :fixed="true"
+          :placeholder="true"
+          :safeAreaInsetBottom="true"
+          borderColor="rgba(255,255,255,0.25) !important"
+          backgroundColor="rgba(255,255,255,0.05)"
+        >
+          <up-tabbar-item @click="goNext" text="首页" icon="home"></up-tabbar-item>
+          <up-tabbar-item text="放映厅" icon="photo"></up-tabbar-item>
+          <up-tabbar-item text="直播" icon="play-right"></up-tabbar-item>
+          <up-tabbar-item text="我的" icon="account"></up-tabbar-item>
+        </up-tabbar>
+      </slot>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'u-short-video',
+  props: {
+    // tabs标签列表
+    tabsList: {
+      type: Array,
+      default: () => [{ name: '推荐' }, { name: '关注' }, { name: '朋友' }, { name: '本地' }]
+    },
+    // 视频列表数据
+    videoList: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的tab索引
+    currentTab: {
+      type: Number,
+      default: 0
+    },
+    // 当前播放的视频索引
+    currentVideo: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      progressValue: 0,
+      showSpeedSheet: false,
+      currentSpeedVideoIndex: 0,
+      speedOptions: [
+        { name: '0.5x', value: 0.5 },
+        { name: '0.75x', value: 0.75 },
+        { name: '1.0x', value: 1.0 },
+        { name: '1.25x', value: 1.25 },
+        { name: '1.5x', value: 1.5 },
+        { name: '2.0x', value: 2.0 }
+      ]
+    };
+  },
+  methods: {
+    // 处理tab切换
+    handleTabChange(index) {
+      this.$emit('tabChange', index);
+    },
+    // 处理swiper切换
+    handleSwiperChange(e) {
+      const currentIndex = e.detail.current;
+      // 暂停当前播放的视频
+      this.pauseCurrentVideo();
+      // 播放新切换到的视频
+      this.$nextTick(() => {
+        this.playVideo(currentIndex);
+      });
+      this.$emit('videoChange', currentIndex);
+    },
+    // 处理点赞
+    handleLike(item, index) {
+      this.$emit('like', { item, index });
+    },
+    // 处理评论
+    handleComment(item, index) {
+      this.$emit('comment', { item, index });
+    },
+    // 处理分享
+    handleShare(item, index) {
+      this.$emit('share', { item, index });
+    },
+    // 处理收藏
+    handleCollect(item, index) {
+      this.$emit('collect', { item, index });
+    },
+    // 进度条拖动中
+    onProgressChanging(value) {
+      // 更新当前视频的进度值
+      if (this.videoList[this.currentVideo]) {
+        this.videoList[this.currentVideo]['progressValue'] = value.detail.value;
+      }
+      this.$emit('progressChanging', {
+        progress: value.detail.value,
+        index: this.currentVideo
+      });
+    },
+    // 进度条值改变
+    onProgressChange(value) {
+      // 更新当前视频的进度值
+      if (this.videoList[this.currentVideo]) {
+        this.$set(this.videoList[this.currentVideo], 'progressValue', value.detail.value);
+      }
+      this.$emit('progressChange', {
+        progress: value.detail.value,
+        index: this.currentVideo
+      });
+    },
+    // 显示倍速选项
+    showSpeedOptions(index) {
+      this.currentSpeedVideoIndex = index;
+      this.showSpeedSheet = true;
+    },
+    // 选择倍速
+    selectSpeed(action) {
+      const videoContext = uni.createVideoContext('video-' + this.currentSpeedVideoIndex, this);
+      videoContext.playbackRate(action.value);
+      // 更新视频倍速数据
+      this.$set(this.videoList[this.currentSpeedVideoIndex], 'playbackRate', action.value);
+      this.showSpeedSheet = false;
+    },
+    // 播放指定索引的视频
+    playVideo(index) {
+      const videoContext = uni.createVideoContext('video-' + index, this);
+      videoContext.play();
+    },
+    // 暂停当前视频
+    pauseCurrentVideo() {
+      const videoContext = uni.createVideoContext('video-' + this.currentVideo, this);
+      videoContext.pause();
+    },
+    // 视频播放事件
+    onVideoPlay(e) {
+      this.$emit('videoPlay', { index: this.currentVideo, event: e });
+    },
+    // 视频暂停事件
+    onVideoPause(e) {
+      this.$emit('videoPause', { index: this.currentVideo, event: e });
+    },
+    // 视频结束事件
+    onVideoEnded(e) {
+      this.$emit('videoEnded', { index: this.currentVideo, event: e });
+    },
+    // 视频时间更新事件
+    onTimeUpdate(e) {
+      const progress = (e.detail.currentTime / e.detail.duration) * 100;
+      if (this.videoList[this.currentVideo]) {
+        this.$set(this.videoList[this.currentVideo], 'progress', progress);
+      }
+      this.$emit('timeUpdate', { index: this.currentVideo, event: e });
+    },
+    // 视频元数据加载完成事件
+    onLoadedMetadata(e) {
+      this.$emit('loadedMetadata', { index: this.currentVideo, event: e });
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-signature/style.css

@@ -0,0 +1,70 @@
+.u-signature {
+  display: flex;
+  flex-direction: column;
+}
+.u-signature__canvas-wrap {
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.u-signature__canvas {
+  width: 100%;
+  height: 100%;
+}
+.u-signature__toolbar {
+  margin-top: 5px;
+  background-color: #fff;
+}
+.u-signature__toolbar-icons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1px 0;
+  border-radius: 4px;
+}
+.u-signature__toolbar-icon {
+  padding: 5px;
+}
+.u-signature__brush-settings, .u-signature__color-settings {
+  margin-top: 15px;
+  padding: 1px;
+  border-radius: 4px;
+}
+.u-signature__progress-label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #999;
+}
+.u-signature__color-picker {
+  margin-bottom: 10px;
+}
+.u-signature__color-label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #999;
+}
+.u-signature__colors {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.u-signature__color-item {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid #f0f0f0;
+  cursor: pointer;
+}
+.u-signature__color-item--active {
+  border-color: #2979ff;
+  transform: scale(1.1);
+}
+.u-signature__actions {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: center;
+}