Merge remote-tracking branch 'origin/dev' into dev

zxl

2025-06-04 ba5acc3cdefd33a4845b578015e2aae8b43f80d3

Merge remote-tracking branch 'origin/dev' into dev

 App.vue

@@ -255,9 +255,9 @@
    @font-face {
      font-family: 'iconfont';  /* Project id 4921691 */
      src: 
           url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.woff2?t=1748511781888') format('woff2'),
           url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.woff?t=1748511781888') format('woff'),
           url('//at.alicdn.com/t/c/font_4921691_s75bca4srg.ttf?t=1748511781888') format('truetype');
           url('//at.alicdn.com/t/c/font_4921691_nm6or3sic2.woff2?t=1748867592712') format('woff2'),
           url('//at.alicdn.com/t/c/font_4921691_nm6or3sic2.woff?t=1748867592712') format('woff'),
           url('//at.alicdn.com/t/c/font_4921691_nm6or3sic2.ttf?t=1748867592712') format('truetype');
    }
    .iconfont {
          /* font-family需要和自定义的相同 */

 api/common.js

@@ -45,6 +45,17 @@


/**
 * 获取文件访问地址
 */
 export function getFilePreviewUrl(fileKey) {
  return http.request({
    url: `${api.common}/lmk/file/preview`,
    method: Method.POST,
    data: {fileKey: fileKey}
  });
}

/**
 * 文件上传地址
 * @type {string}
 */

 api/user.js

New file
@@ -0,0 +1,65 @@
/**
 * 用户相关API
 */

import { http, Method } from "@/utils/request.js";




/**
 * 获取视频主页作者信息
 * 
 * @param params
 */
 export function getAuthorInfo(authorId) {
  return http.request({
    url: "/lmk/video/author-info/" + authorId,
    method: Method.GET,
    needToken: true
  });
}

/**
 * 获取视频主页-作者的视频分页
 * 
 * @param params
 */
 export function getAuthorVideoPage(params) {
  return http.request({
    url: "/lmk/video/author-video-page",
    method: Method.GET,
    needToken: true,
    params: params
  });
}


/**
 * 获取视频主页-作者收藏的视频分页
 * 
 * @param params
 */
 export function getAuthorCollectVideoPage(params) {
  return http.request({
    url: "/lmk/video/author-collect-video-page",
    method: Method.GET,
    needToken: true,
    params: params
  });
}

/**
 * 保存视频主页信息编辑
 * 
 * @param params
 */
 export function saveVideoHomeInfo(data) {
  return http.request({
    url: "/lmk/video/home-page-info-edit",
    method: Method.POST,
    needToken: true,
    data: data
  });
}


 api/video.js

@@ -22,15 +22,16 @@
}

/**
 * 获取五个推荐视频
 * 获取推荐视频
 * 
 * @param params
 */
 export function getRecommendVideos() {
 export function getRecommendVideos(params) {
  return http.request({
    url: "/lmk/video/recommend",
    method: Method.GET,
    needToken: true
    needToken: true,
    params: params
  });
}

@@ -62,6 +63,19 @@
}

/**
 * 取消关注作者
 * 
 * @param params
 */
 export function unSubscribe(authorId) {
  return http.request({
    url: "/lmk/my-subscribe/unSubscribe/" + authorId,
    method: Method.POST,
    needToken: true
  });
}

/**
 * 获取视频评论
 * 
 * @param params
@@ -88,3 +102,31 @@
    data: data
  });
}

/**
 * 评论点赞
 * 
 * @param params
 */
 export function thubmsUpComment(data) {
  return http.request({
    url: "/lmk/video-comment/thumbs_up",
    method: Method.POST,
    needToken: true,
    data: data
  });
}

/**
 * 取消评论点赞
 * 
 * @param params
 */
 export function cancelThubmsUpComment(data) {
  return http.request({
    url: "/lmk/video-comment/cancel/thumbs_up",
    method: Method.POST,
    needToken: true,
    data: data
  });
}

 components/custom-tabbar.vue

@@ -55,8 +55,8 @@
            },
            {
                "pagePath": "/pages/tabbar/video/video",
                "iconPath": "/static/tabbar/video.png",
                "selectedIconPath": "/static/tabbar/video-selected.png",
                "iconPath": "/static/tabbar/video1.png",
                "selectedIconPath": "/static/tabbar/video1-selected.png",
                "key": 'video'
            },
            {

 config/api.js

@@ -4,9 +4,12 @@
 */
// 开发环境
const dev = {
  im: "http://192.168.0.4:8885",
  common: "http://192.168.0.4:8890",
  buyer: "http://192.168.0.4:8888",
  // im: "http://192.168.0.4:8885",
  // common: "http://192.168.0.4:8890",
  // buyer: "http://192.168.0.4:8888",
  im: "http://127.0.0.1:8885",
  common: "http://127.0.0.1:8890",
  buyer: "http://127.0.0.1:8888",
  // common: "http://192.168.0.113:8890",
  // buyer: "http://192.168.0.113:8888",
  // im: "http://192.168.0.113:8885",

 pages.json

@@ -902,6 +902,30 @@

        },
        {
            "root": "pages/video",
            "pages": [{
                    "path": "home-page",
                    "style": {
                        "navigationBarTitleText": "TA的主页"
                    }
                },
                {
                    "path" : "video-play",
                    "style" : 
                    {
                        "navigationBarTitleText" : ""
                    }
                },
                {
                    "path" : "home-page-edit",
                    "style" : 
                    {
                        "navigationBarTitleText" : "主页信息修改"
                    }
                }
            ]
        },
        {
            "root": "pages/passport",
            "pages": [{
                    "path": "login",

 pages/tabbar/index/home.vue

@@ -66,14 +66,14 @@
          </view>
          <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
              <text class="video-title">{{item.title}}</text>
              <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag">#{{tag.tagName}}</text>
              <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{tag.tagName}}</text>
          </view>
        </view>
        
        <!-- 右侧互动按钮 -->
       <view class="action-buttons">
           <view class="avatar-container">
               <image class="avatar" :src="item.authorAvatar" mode="aspectFill"></image>
               <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image>
               <!-- 关注图标 - 使用绝对定位 -->
               <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)">
                 <text class="iconfont">&#xe629;</text>
@@ -123,13 +123,14 @@
                  <view style="position: relative;">  
                    <text class="time">{{formatTime(comment.createTime)}}</text>
                    <text @click="openReply(comment)" class="reply-btu time">回复</text>
                    <text class="thumbs-up time iconfont">&#xe60b;</text>
                    <text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(comment.id, index, null)">&#xe614;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
                    <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(comment.id, index, null)">&#xe607;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
                  </view>
                </view>
            </view>
            <!-- 回复列表 -->
              <view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                <view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
                <view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="reply.id">
                  <view class="reply-content">
                    <view style="display: flex;">
                        <image class="comment-reply-avatar" :src="reply.replyUserAvatar || '/static/default-avatar.png'"></image>
@@ -140,7 +141,8 @@
                    <view class="reply-footer">
                      <text class="time">{{formatTime(reply.createTime)}}</text>
                      <text @click="openReply(comment, reply)" class="reply-btu time">回复</text>
                      <text class="thumbs-up time iconfont">&#xe60b; </text>
                      <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(reply.id, index, replyIndex)">&#xe614;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
                      <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(reply.id, index, replyIndex)">&#xe607;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
                    </view>
                  </view>
                </view>
@@ -176,11 +178,12 @@
</template>

<script>
import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment } from "@/api/video.js";
import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js";
import { changeCollect } from "@/api/collect.js";
export default {
  data() {
    return {
        videoNoMore: false, // 是否还有更多视频
        commentNoMore: false, // 是否还有更多评论
        commentQuery: {
            pageNumber: 1,
@@ -202,7 +205,7 @@
            replyUserId: '',
            replyUserNickname: '',
            replyUserAvatar: '',
            masterCommentId: ''
            masterCommentId: null
        },
        comments: [],            // 评论列表
        commentsTotal: 0,            // 评论总条数
@@ -226,8 +229,11 @@
        ],   // 视频列表数据
        videoContexts: [], // 视频上下文对象集合
        loading: false,  // 是否正在加载
        page: 1,         // 当前页码
        pageSize: 10     // 每页数量
        videoQuery: {
            pageNumber: 1,
            pageSize: 6,
            videoFrom: 'recommend'
        }
    }
  },
  onShow() {
@@ -249,6 +255,44 @@
    this.initVideoContexts();
  },
  methods: {
        // 跳转个人主页
        jumpToHomePage(authorId) {
            uni.navigateTo({
                url: "/pages/video/home-page?authorId=" + authorId
            })
        },
        // 取消点赞
        async cancelThumbsUp(id, commentIndex, replyIndex) {
            const data = {
                refId: id,
                thumbsUpType: 'video_comment'
            }
            cancelThubmsUpComment(data).then(res => {
                if(replyIndex != null) {
                    this.comments[commentIndex].replies[replyIndex].hasThumbsUp = false;
                    this.comments[commentIndex].replies[replyIndex].thumbsUpNum -= 1;
                } else {
                    this.comments[commentIndex].hasThumbsUp = false;
                    this.comments[commentIndex].thumbsUpNum -= 1;
                }
            })
        },
        // 评论点赞
        async thubmsUp(id, commentIndex, replyIndex) {
            const data = {
                refId: id,
                thumbsUpType: 'video_comment'
            }
            thubmsUpComment(data).then(res => {
                if(replyIndex != null) {
                    this.comments[commentIndex].replies[replyIndex].hasThumbsUp = true;
                    this.comments[commentIndex].replies[replyIndex].thumbsUpNum += 1;
                } else {
                    this.comments[commentIndex].hasThumbsUp = true;
                    this.comments[commentIndex].thumbsUpNum += 1;
                }
            })
        },
        // 加载下一页回复
        loadNextPageReply(index) {
            this.replyCommentQuery.pageNumber++;
@@ -285,7 +329,7 @@
                replyUserId: '',
                replyUserNickname: '',
                replyUserAvatar: '',
                masterCommentId: ''
                masterCommentId: null
            }
        },
        // 取消回复
@@ -453,22 +497,31 @@
    
    // 加载视频数据
    async loadVideos() {
      if (this.loading) return;
      if (this.loading || this.videoNoMore) return;
      this.loading = true;
      
      getRecommendVideos({pageNumber: this.page, pageSize: this.pageSize}).then(res => {
      getRecommendVideos(this.videoQuery).then(res => {
          console.log(res, "视频数据");
          if (this.page === 1) {
          if (this.videoQuery.pageNumber === 1) {
            this.videoList = res.data.data;
          } else {
            this.videoList = [...this.videoList, ...res.data.data];
            this.videoList = [
              ...this.videoList,
              ...res.data.data.filter(
                (newItem) => !this.videoList.some((oldItem) => oldItem.id === newItem.id)
              ),
            ];
          }
		  
          this.page++;
          this.$nextTick(() => {
            this.initVideoContexts();
          });
          this.loading = false;
          if(res.data.data.length < this.videoQuery.pageSize) {
              this.videoNoMore = true;
              return;
          }
          this.videoQuery.pageNumber++;
		  
      })
    },
    
@@ -522,6 +575,7 @@
    },
    // 单击屏幕：暂停或继续播放
    togglePlay(index) {
        console.log("单击视频", index, this.videoContexts);
        if(this.currentVideoIsPlaying) {
            this.videoContexts[index].pause();
        } else {
@@ -946,8 +1000,9 @@
    }
    .thumbs-up {
        position: absolute;
        right: 80rpx;
        right: 20rpx;
        font-size: 32rpx;
        width: 120rpx;
    }
    .textSideIcon {
        font-size: 36rpx;
@@ -957,4 +1012,7 @@
        margin-right: 10rpx;
        color: #cccccc;
    }
    .thumbs-num {
        margin-left: 4rpx;
    }
</style>

 pages/tabbar/video/video.vue

@@ -20,7 +20,7 @@
        </view>
        <view class="video-actions">
          <u-button type="error" size="mini" @click="reUpload">重新上传</u-button>
          <u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">选择封面</u-button>
          <u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">{{formData.cover ? '更换封面' : '请选择封面'}}</u-button>
        </view>
      </view>
    </view>
@@ -57,7 +57,7 @@
                :key="index"
                :text="tag.tagName"
                :index="index"
                type="error"
                type="success"
                @close="removeTag(index)"
              />
            </view>
@@ -74,7 +74,7 @@
                :key="index"
                :text="tag.tagName"
                  :index="index"
                type="primary"
                type="success"
                :closeable="false"
                @click="selectTopic(index)"
              />
@@ -178,8 +178,9 @@
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue';
import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue';
import MyTag from "@/components/my-tag.vue"
import { getSTSToken } from "@/api/common.js";
import MyTag from '@/components/my-tag.vue'

import { getSTSToken, getFilePreviewUrl } from "@/api/common.js";
import { publish } from "@/api/video.js";
import { getRecommendTag3 } from "@/api/video-tag.js";
import { getFileKey } from "@/utils/file.js";
@@ -239,7 +240,7 @@
  },
  computed: {
    canPublish() {
      return this.formData.videoFileKey && this.formData.title;
      return this.formData.videoFileKey && this.formData.title && this.formData.cover;
    },
    filteredGoods() {
      if (!this.goodsSearch) return this.goodsList;
@@ -272,7 +273,6 @@
      },
      // 初始化腾讯云cos客户端
      initCOS() {
          console.log("执行了");
          // 调用后端获取sts临时访问凭证
          getSTSToken().then(res => {
              const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
@@ -389,7 +389,30 @@
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          let fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
          // 处理安卓可能的URI编码
          if(fileName.indexOf('%') > -1) {
                fileName = decodeURIComponent(fileName);
          }
          const fileKey = getFileKey(fileName);
          this.videoInfo.cover = res.tempFilePaths[0];
          this.cosClient.uploadFile({
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: res.tempFilePaths[0], 
               SliceSize: 1024 * 1024 * 5     /* 触发分块上传的阈值,5M */
           }, (err, data) => {
               if (err) {
                 console.log('上传失败', err);
               } else {
                   // 获取封面的访问地址
                   getFilePreviewUrl(fileKey).then(res => {
                   this.videoInfo.cover = res.data.data
                   this.formData.cover = fileKey
                   })
               }
           });
        }
      });
    },

 pages/video/home-page-edit.vue

New file
@@ -0,0 +1,278 @@
<template>
  <view class="edit-profile-container">
    <!-- 头部标题 -->
    <view class="header">
      <text class="title">编辑资料</text>
    </view>
    
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 头像上传 -->
      <view class="form-item">
        <text class="label">头像</text>
        <view class="avatar-upload" @click="chooseAvatar">
          <image class="avatar" :src="formData.avatar" mode="aspectFill"></image>
          <view class="upload-tip">点击修改</view>
        </view>
      </view>
      
      <!-- 昵称 -->
      <view class="form-item">
        <text class="label">昵称</text>
        <input 
          class="input" 
          type="nickname" 
          v-model="formData.nickName" 
          placeholder="请输入昵称"
          @blur="validateNickname"
        />
      </view>
      
      <!-- 签名 -->
      <view class="form-item">
        <text class="label">签名</text>
        <textarea 
          class="textarea" 
          v-model="formData.motto" 
          placeholder="介绍一下自己吧~"
          maxlength="50"
          auto-height
        />
        <text class="word-count">{{ formData.motto.length }}/50</text>
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view class="btn-container">
      <button 
        class="save-btn" 
        :disabled="isSaving" 
        @click="saveInfo"
      >
        {{ isSaving ? '保存中...' : '保存修改' }}
      </button>
    </view>
  </view>
</template>

<script>
import { getSTSToken, getFilePreviewUrl } from "@/api/common.js";
import { saveVideoHomeInfo } from "@/api/user.js";
import { getFileKey } from "@/utils/file.js";
export default {
  data() {
    return {
      formData: {
        avatar: '',
        nickName: '',
        motto: '',
        authorId: ''
      },
      isSaving: false,
      bucket: '',
      region: '',
      cosClient: null
    }
  },
  onShow() {
    this.initCOS();
  },
  onLoad(option) {
    this.formData.authorId = option.authorId;
    this.formData.avatar = option.avatar;
    this.formData.nickName = option.nickName;
    this.formData.motto = option.motto ? option.motto : '';
  },
  methods: {
    initCOS() {
      // 调用后端获取sts临时访问凭证
      getSTSToken().then(res => {
          const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
          // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包
		  
          // console.log(COS.version);  sdk 版本需要不低于 1.7.2
          this.cosClient = new COS({
              SecretId: res.data.data.tmpSecretId, // sts 服务下发的临时 secretId
              SecretKey: res.data.data.tmpSecretKey, // sts 服务下发的临时 secretKey
              SecurityToken: res.data.data.sessionToken, // sts 服务下发的临时 SessionToken
              StartTime: res.data.data.stsStartTime, // 建议传入服务端时间，可避免客户端时间不准导致的签名错误
              ExpiredTime: res.data.data.stsEndTime, // 临时密钥过期时间
              SimpleUploadMethod: 'putObject', // 强烈建议，高级上传、批量上传内部对小文件做简单上传时使用 putObject,sdk 版本至少需要v1.3.0
           });
           this.bucket = res.data.data.bucket
           this.region = res.data.data.region
      })
    },
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempPath = res.tempFilePaths[0];
          // 获取文件名
          let fileName = tempPath.substring(tempPath.lastIndexOf('/') + 1);
          // 处理安卓可能的URI编码
          if(fileName.indexOf('%') > -1) {
              fileName = decodeURIComponent(fileName);
          }
          const fileKey = getFileKey(fileName);
          this.cosClient.uploadFile({
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: tempPath, 
               SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值,5M */
           }, (err, data) => {
               if (err) {
                 console.log('上传失败', err);
                 this.formData.avatar = ''
                 uni.showToast({
                   title: '图片上传失败',
                   icon: 'none'
                 });
               } else {
                 getFilePreviewUrl(fileKey).then(res => {
                     this.formData.avatar = res.data.data
                 })
               }
           });
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    },
    // 验证昵称
    validateNickname() {
      if (!this.formData.nickName.trim()) {
        uni.showToast({ title: '昵称不能为空', icon: 'none' });
        return false;
      }
      if (this.formData.nickName.length > 12) {
        uni.showToast({ title: '昵称不能超过12个字符', icon: 'none' });
        return false;
      }
      return true;
    },
    
    // 保存个人信息
    async saveInfo() {
      this.isSaving = true;
      if(this.validateNickname()) {
          saveVideoHomeInfo(this.formData).then(res => {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              });
              // 返回上级页面
              uni.navigateBack({
                  delta: 1
              });
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-profile-container {
  padding: 20rpx 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.header {
  padding: 30rpx 0;
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 40rpx;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f2f2f2;
  display: flex;
  flex-direction: column;
  
  &:last-child {
    border-bottom: none;
  }
  
  .label {
    font-size: 30rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
}

.avatar-upload {
  display: flex;
  align-items: center;
  
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 30rpx;
  }
  
  .upload-tip {
    color: #999;
    font-size: 26rpx;
  }
}

.input {
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
}

.textarea {
  width: 100%;
  min-height: 120rpx;
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
}

.word-count {
  align-self: flex-end;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.btn-container {
  padding: 0 30rpx;
  
  .save-btn {
    background-color: #07c160;
    color: #fff;
    border-radius: 50rpx;
    font-size: 32rpx;
    
    &[disabled] {
      background-color: #cccccc;
      color: #fff;
      opacity: 0.7;
    }
  }
}
</style>

 pages/video/home-page.vue

New file
@@ -0,0 +1,549 @@
<template>
  <view class="container">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="user-avatar-container">
        <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <view class="user-name">{{userInfo.nickName}}</view>
        <view class="user-id">ID: {{userInfo.userId}}</view>
        <view class="user-desc">{{userInfo.motto || '没有签名，也很个性~'}}</view>
      </view>
      <view class="stats-container">
        <view class="stat-item" @click="navigateToFollow('fans')">
          <text class="stat-number">{{userInfo.fansNum}}</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-item" @click="navigateToFollow('follow')">
          <text class="stat-number">{{userInfo.subNum}}</text>
          <text class="stat-label">关注</text>
        </view>
        <view class="stat-item" @click="navigateToLike">
          <text class="stat-number">{{userInfo.likeNum}}</text>
          <text class="stat-label">获赞</text>
        </view>
      </view>
      
      <!-- 关注按钮 -->
      <view class="follow-btn-container" v-if="!userInfo.self">
        <button 
          class="follow-btn" 
          :class="{followed: userInfo.hasSub}" 
          @click="toggleFollow"
        >
          {{userInfo.hasSub ? '取消关注' : '关注'}}
        </button>
      </view>
	  
      <view class="edit-icon" @click="editInfo" v-if="userInfo.self">
        <uni-icons type="compose" size="20" color="#666"></uni-icons>编辑主页信息
      </view>
    </view>
    
        <!-- 作品/喜欢切换 -->
        <view class="tab-bar">
          <view 
            class="tab-item" 
            :class="{active: currentTab === 'works'}" 
            @click="switchTab('works')"
          >
            作品{{`(${videoTotal})`}}
          </view>
          <view 
            class="tab-item" 
            :class="{active: currentTab === 'likes'}" 
            @click="switchTab('likes')"
          >
            喜欢
          </view>
        </view>
        
        <!-- 视频列表 -->
        <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'works' && videoList.length > 0">
            <view class="video-container">
                <view
                  class="video-item" 
                  v-for="(item, index) in videoList" 
                  :key="item.id"
                  @click="playAuthorVideo(index)"
                >
                  <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image>
                  <view class="video-info">
                    <view class="video-stats">
                      <view class="stat">
                        <uni-icons type="heart" size="16" color="#fff"></uni-icons>
                        <text>{{item.collectNum}}</text>
                      </view>
                    </view>
                  </view>
                </view> 
            </view>
        </scroll-view>
        <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'likes' && collectVideoList.length > 0">
            <view class="video-container">
                <view
                  class="video-item" 
                  v-for="(item, index) in collectVideoList" 
                  :key="item.id"
                  @click="playCollectVideo(index)"
                >
                  <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image>
                  <view class="video-info">
                    <view class="video-stats">
                      <view class="stat">
                        <uni-icons type="heart" size="16" color="#fff"></uni-icons>
                        <text>{{item.collectNum}}</text>
                      </view>
                    </view>
                  </view>
                </view> 
            </view>
        </scroll-view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="videoList.length === 0 && currentTab === 'works'">
          <!-- <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image> -->
          <text class="empty-text">还未发布作品哦~</text>
        </view>
        <!-- 空状态 -->
        <view class="empty-state" v-if="collectVideoList.length === 0 && currentTab === 'likes'">
          <!-- <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image> -->
          <text class="empty-text">还没有点赞作品哦~</text>
        </view>
  </view>
</template>

<script>
import {getAuthorInfo, getAuthorVideoPage, getAuthorCollectVideoPage} from '@/api/user.js'
import {subscribe, unSubscribe} from '@/api/video.js'
export default {
  data() {
    return {
      currentTab: 'works', // works: 作品, likes: 喜欢
      authorId: '',
      userInfo: {
        avatar: '',
        nickName: '',
        userId: '',
        motto: '',
        fansNum: 0,
        subNum: 0,
        likeNum: 0,
        self: false,
        hasSub: false
      },
      videoQuery: {
          authorId: '',
          pageNumber: 1,
          pageSize: 10
      },
      collectVideoQuery: {
          authorId: '',
          pageNumber: 1,
          pageSize: 10
      },
      videoTotal: 0,
      videoList: [], // 作品
      collectVideoList: [], // 收藏
      nomoreVideo: false,
      nomoreCollectVideo: false
    }
  },
  onShow() {
     this.getAuthorInfo();
  },
  onLoad(option) {
    this.authorId = option.authorId;
    this.getAuthorInfo();
    this.getAuthorVideoPage();
  },
  methods: {
    getPage() {
        if(this.currentTab === 'works') {
            if(this.nomoreVideo) {
                return;
            }
            getAuthorVideoPage(this.videoQuery).then(res => {
                if(this.videoQuery.pageNumber === 1) {
                    this.videoList = res.data.data
                } else {
                    this.videoList = [
                      ...this.videoList,
                      ...res.data.data.filter(
                        (newItem) => !this.videoList.some((oldItem) => oldItem.id === newItem.id)
                      ),
                    ];
                }
                if(res.data.data.length < this.videoQuery.pageSize) {
                    this.nomoreVideo = true;
                } else {
                    this.videoQuery.pageNumber += 1;
                }
            })
        } else if(this.currentTab === 'likes') {
            if(this.nomoreCollectVideo) {
                return;
            }
            getAuthorCollectVideoPage(this.collectVideoQuery).then(res => {
                if(this.collectVideoQuery.pageNumber === 1) {
                    this.collectVideoList = res.data.data
                } else {
                    this.collectVideoList = [
                      ...this.collectVideoList,
                      ...res.data.data.filter(
                        (newItem) => !this.collectVideoList.some((oldItem) => oldItem.id === newItem.id)
                      ),
                    ];
                }
                if(res.data.data.length < this.collectVideoQuery.pageSize) {
                    this.nomoreCollectVideo = true;
                } else {
                    this.collectVideoQuery.pageNumber += 1;
                }
            })
        }
    },
    // 获取个人信息
    async getAuthorInfo() {
        getAuthorInfo(this.authorId).then(res => {
            this.userInfo = res.data.data
        })
    },
    // 获取作者作品
    async getAuthorVideoPage() {
        this.videoQuery.authorId = this.authorId;
        getAuthorVideoPage(this.videoQuery).then(res => {
            this.videoList = res.data.data
            this.videoTotal = res.data.total
            if(res.data.data.length < this.videoQuery.pageSize) {
                this.nomoreVideo = true;
            }
        })
    },
    // 切换关注状态
    toggleFollow() {
      if(this.userInfo.hasSub) {
          // 取消关注
          unSubscribe(this.authorId).then(res => {
              uni.showToast({
                title: '已取消关注',
                icon: 'none'
              });
              this.userInfo.hasSub = false
              this.userInfo.fansNum -= 1;
          })
      } else {
          // 关注
          subscribe(this.authorId).then(res => {
              uni.showToast({
                title: '关注成功',
                icon: 'success'
              });
              this.userInfo.hasSub = true
              this.userInfo.fansNum += 1;
          })
      }
    },
    // 切换作品/喜欢tab
    switchTab(tab) {
      if(this.currentTab === tab) {
          return
      }
      this.currentTab = tab;
      if(tab === 'works') {
          this.collectVideoList = []
          this.videoQuery.pageNumber = 1
          this.getAuthorVideoPage()
      } else if(tab === 'likes') {
          this.videoList = []
          this.collectVideoQuery.pageNumber = 1
          this.getAuthorCollectVideoPage()
      }
    },
    // 获取作者的收藏视频
    async getAuthorCollectVideoPage() {
        this.collectVideoQuery.authorId = this.authorId
        getAuthorCollectVideoPage(this.collectVideoQuery).then(res => {
            this.collectVideoList = res.data.data
            if(res.data.data.length < this.collectVideoQuery.pageSize) {
                this.nomoreCollectVideo = true;
            }
        })
    },
    // 播放作者视频
    playAuthorVideo(index) {
      const playInfo = {
          videoList: this.videoList,
          nomore: this.nomoreVideo,
          pageNumber: this.videoQuery.pageNumber,
          playIndex: index
      }
      uni.setStorageSync("playInfo", playInfo)
      uni.navigateTo({
        url: `/pages/video/video-play?authorId=${this.authorId}&videoFrom=author`
      });
    },
    // 播放收藏视频
    playAuthorVideo(index) {
      const playInfo = {
          videoList: this.collectVideoList,
          nomore: this.nomoreCollectVideo,
          pageNumber: this.collectVideoQuery.pageNumber,
          playIndex: index
      }
      uni.setStorageSync("playInfo", playInfo)
      uni.navigateTo({
        url: `/pages/video/video-play?authorId=${this.authorId}&videoFrom=collect`
      });
    },
    // 编辑个人资料
    editInfo() {
      uni.navigateTo({
        url: `/pages/video/home-page-edit?authorId=${this.authorId}&avatar=${this.userInfo.avatar}&motto=${this.userInfo.motto || ''}&nickName=${this.userInfo.nickName}`
      });
    },
    
    // 跳转到粉丝/关注列表
    navigateToFollow(type) {
      uni.navigateTo({
        url: `/pages/user/follow?type=${type}`
      });
    },
    
    // 跳转到点赞列表
    navigateToLike() {
      uni.navigateTo({
        url: '/pages/user/like'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
body {
    background-color: #fff !important;
}
.container {
  padding-bottom: 20rpx;
  background-color: white;
  min-height: 100vh;
}

.user-header {
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  position: relative;
}

.user-avatar-container {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  margin-right: 30rpx;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2rpx solid #f1f1f1;
}

.edit-icon {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  background-color: #fff;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-info {
  margin-top: 20rpx;
  flex: 1;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.user-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
}

.stats-container {
  display: flex;
  margin-top: 30rpx;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20rpx;
}

.stat-number {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

.tab-bar {
  display: flex;
  background-color: #fff;
  padding-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 30rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #ff2442;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 4rpx;
  background-color: #ff2442;
  border-radius: 2rpx;
}

.video-list {
  width: calc(100% - 20rpx);
  padding: 0 10rpx;
  height: calc(100vh - 554rpx);
  background-color: #fff;
}

.video-item {
  width: 50%;
  padding: 10rpx;
  box-sizing: border-box;
  position: relative;
}

.video-cover {
  width: 100%;
  height: 500rpx;
  border-radius: 10rpx;
  display: block;
}

.video-info {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  right: 20rpx;
  color: #fff;
  font-size: 24rpx;
}

.video-title {
  display: block;
  margin-bottom: 10rpx;
  text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-stats {
  display: flex;
}

.stat {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.5);
}

.stat text {
  margin-left: 5rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 300rpx;
  height: 300rpx;
  opacity: 0.6;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.follow-btn-container {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.follow-btn {
  background-color: #ff2442;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 40rpx;
  
  &::after {
    border: none;
  }
  
  &.followed {
    background-color: #f5f5f5;
    color: #666;
  }
}

.video-container {
    display: flex;
    flex-wrap: wrap
}
</style>

 pages/video/video-play.vue

New file
@@ -0,0 +1,1028 @@
<template>
  <view class="video-container">
    <!-- 视频列表 -->
    <swiper 
      class="video-swiper" 
      vertical 
      circular 
      :current="currentIndex"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in videoList" :key="item.id">
        <!-- 播放按钮（仅当视频暂停时显示） -->
        <view 
          class="play-icon" 
          @click="togglePlay(index)"
          v-if="!currentVideoIsPlaying"
        >
          <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
        </view>
        <video 
          :id="'video'+index"
          :ref="'video'+index"
          :src="item.videoUrl"
          :autoplay="currentIndex === index"
          :controls="false"
          :loop="true"
          :object-fit="item.objectFit"
          class="video-item"
          @play="onPlay(item.id, index)"
          @pause="onPause(index)"
          @ended="onEnded(index)"
          @click="togglePlay(index)"
          @timeupdate="onTimeUpdate($event)"
        ></video>
		
        <!-- 悬挂商品链接层 -->
        <view class="goods-link-warp">
            <view class="goods-link">
              <view class="goods-container">
                <!-- 商品图片 -->
                <image class="goods-image" :src="item.goods.imageUrl" mode="aspectFill"></image>
			    
                <!-- 商品信息 -->
                <view class="goods-info">
                  <text class="goods-name">{{item.goods.name}}</text>
                  <view class="price-section">
                    <text class="current-price">¥{{item.goods.price}}</text>
                    <text class="original-price" v-if="item.goods.originalPrice">¥{{item.goods.originalPrice}}</text>
                  </view>
                  <text class="sales-count">{{item.goods.saleNum}}人已购</text>
                </view>
			    
                <!-- 购买按钮 -->
                <view class="buy-button">
                  <text>购买</text>
                </view>
              </view>
            </view>
        </view>
		
        
        <!-- 视频信息层 -->
        <view class="video-info">
          <view>
              <text class="video-author">@{{item.authorName}}</text>
          </view>
          <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
              <text class="video-title">{{item.title}}</text>
              <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{tag.tagName}}</text>
          </view>
        </view>
        
        <!-- 右侧互动按钮 -->
       <view class="action-buttons">
           <view class="avatar-container">
               <image class="avatar" @click="jumpToHomePage(item.authorId)" :src="item.authorAvatar" mode="aspectFill"></image>
               <!-- 关注图标 - 使用绝对定位 -->
               <view v-if="!item.subscribeThisAuthor" class="follow-icon" @click="subscribeAuth(index, item.authorId)">
                 <text class="iconfont">&#xe629;</text>
               </view>
           </view>
          <view class="action-item" @click="toggleCollect(item, index)">
            <text class="iconfont" v-if="item.collected">&#xe605;</text>
            <text class="iconfont" v-else>&#xe601;</text>
            <text style="font-size: 10px;font-weight: lighter;">{{item.collectNum}}</text>
          </view>
         <view class="action-item" @click="showComments(item)">
            <text class="iconfont">&#xe7f7;</text>
            <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text>
          </view>
        </view>
		
      </swiper-item>
    </swiper>
	
    <!-- 评论弹窗 -->
    <uni-popup ref="commentPopup" type="bottom" :is-mask-click="true" @maskClick="closeCommentPopup">
      <view class="comment-popup">
        <view class="popup-header">
          <text class="popup-title" v-if="!commentForm.replyId">评论({{commentsTotal}})</text>
          <view class="reply-title" v-else>
            <text>回复 @{{commentForm.replyUserNickname}}</text>
            <text class="cancel-reply" @click="cancelReply">取消</text>
          </view>
          <text class="iconfont close-icon" @click="closeCommentPopup">&#xe675;</text>
        </view>
	    
        <scroll-view class="comment-list" scroll-y :show-scrollbar="false" @scrolltolower="getCommentPage">
          <view v-if="commentLoading" class="loading">
            <uni-load-more status="loading"></uni-load-more>
          </view>
	      
          <view v-else-if="comments.length === 0" class="empty">
            暂无评论，快来发表第一条评论吧~
          </view>
	      
          <view v-else class="comment-item" v-for="(comment, index) in comments" :key="comment.id">
            <view style="display: flex;">
                <image class="comment-avatar" :src="comment.userAvatar || '/static/default-avatar.png'"></image>
                <view class="comment-content">
                  <text class="nickname">{{comment.userNickname}}</text>
                  <text class="content">{{comment.commentContent}}</text>
                  <view style="position: relative;">  
                    <text class="time">{{formatTime(comment.createTime)}}</text>
                    <text @click="openReply(comment)" class="reply-btu time">回复</text>
                    <text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(comment.id, index, null)">&#xe614;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
                    <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(comment.id, index, null)">&#xe607;<text v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{comment.thumbsUpNum}}</text></text>
                  </view>
                </view>
            </view>
            <!-- 回复列表 -->
              <view class="reply-list" v-if="comment.replies && comment.replies.length > 0">
                <view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="reply.id">
                  <view class="reply-content">
                    <view style="display: flex;">
                        <image class="comment-reply-avatar" :src="reply.replyUserAvatar || '/static/default-avatar.png'"></image>
                        <text class="nickname">{{reply.userNickname}}</text>
                        <text v-if="reply.replyUserId && reply.masterCommentId !== reply.replyId" class="reply-to"><text style="margin-right: 10rpx;font-size: 28rpx;" class="iconfont">&#xe666;</text>{{reply.replyUserNickname}}</text>
                    </view>
                    <text class="content">{{reply.commentContent}}</text>
                    <view class="reply-footer">
                      <text class="time">{{formatTime(reply.createTime)}}</text>
                      <text @click="openReply(comment, reply)" class="reply-btu time">回复</text>
                      <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" @click="thubmsUp(reply.id, index, replyIndex)">&#xe614;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
                      <text v-else class="thumbs-up time iconfont" @click="cancelThumbsUp(reply.id, index, replyIndex)">&#xe607;<text v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{reply.thumbsUpNum}}</text></text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="view-more-replies" v-if="comment.replyTotalCount > 0 && !comment.expandReply" @click="loadRepliesPage(comment, index)">
                <text class="line">——</text>展开{{comment.replyTotalCount}}条回复 ↓
              </view>
              <view class="reply-op" v-if="comment.replyTotalCount > replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
                  <view @click="loadNextPageReply(index)" class="reply-op-item"><text class="line">——</text>展开更多<text class="iconfont textSideIcon">&#xeb8d;</text></view>
                  <view @click="retractReplyComment(index)" class="reply-op-item" style="margin-left: 50rpx;">收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
              </view>
              <view class="reply-op" v-else-if="comment.replyTotalCount <= replyCommentQuery.pageNumber * replyCommentQuery.pageSize && comment.expandReply">
                  <view @click="retractReplyComment(index)" class="reply-op-item"><text class="line">——</text>收起<text class="iconfont textSideIcon">&#xeb9b;</text></view>
              </view>
          </view>
        </scroll-view>
        <view class="comment-input-area">
          <input 
            ref="commentInput"
            class="comment-input" 
            v-model="commentForm.commentContent" 
            :placeholder="commentForm.replyId ? `回复 @${commentForm.replyUserNickname}` : '写下你的评论...'" 
            placeholder-class="placeholder"
          />
          <button class="submit-btn" @click="submitComment" :disabled="!commentForm.commentContent.trim()">发送</button>
        </view>
      </view>
    </uni-popup>
	
  </view>
</template>

<script>
import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment, thubmsUpComment, cancelThubmsUpComment } from "@/api/video.js";
import { changeCollect } from "@/api/collect.js";
export default {
  data() {
    return {
        videoNoMore: false, // 是否还有更多视频
        commentNoMore: false, // 是否还有更多评论
        commentQuery: {
            pageNumber: 1,
            pageSize: 5,
            videoId: '',
            masterCommentId: ''
        },
        replyCommentQuery: {
            pageNumber: 1,
            pageSize: 5,
            videoId: '',
            masterCommentId: ''
        },
        commentForm: { // 评论表单数据
            id: '',
            videoId: '',
            commentContent: '',
            replyId: '',
            replyUserId: '',
            replyUserNickname: '',
            replyUserAvatar: '',
            masterCommentId: null
        },
        comments: [],            // 评论列表
        commentsTotal: 0,            // 评论总条数
        commentLoading: false,   // 评论加载状态
        startHidenTime: 0, // 记录切换至其它页面的时间，用于计算视频观看时间减去的部分
        totalHidenTime: 0, // 总共隐藏页面的时间
        startPauseTime: 0, // 开始暂停的时间
        totalPauseTime: 0, // 总共暂停的时间
        playRecord: {
            videoId: null,
            viewDuration: 0, // 这个视频总共观看了多久
            playAt: 0 ,// 这个视频播放到哪了
            startPlayTime: 0 // 这个视频从什么时候开始播放的
        },
        currentVideoIsPlaying: true, // 当前视频是否正在播放
        isFullScreen: false,
        windowHeight: 0,
        currentIndex: 0, // 当前播放的视频索引
        videoList: [
		  
        ],   // 视频列表数据
        videoContexts: [], // 视频上下文对象集合
        loading: false,  // 是否正在加载
        videoQuery: {
            pageNumber: 1,
            pageSize: 6,
            authorId: '',
            videoFrom: ''
        }
    }
  },
  onShow() {
      this.loadVideos()
      // 如果视频按下暂停后切换页面再回到页面时，只算暂停时间（因为暂停时间和离开页面时间是重复的，只算一个）
      if(this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
          const duration = Date.now() - this.startHidenTime
          this.totalHidenTime += duration
      }
  },
  onHide() {
      this.startHidenTime = Date.now()
  },
  onUnload() {
      uni.removeStorageSync("playInfo");
  },
  onLoad(option) {
      const playInfo = uni.getStorageSync("playInfo", playInfo);
      if(playInfo) {
          this.videoList = playInfo.videoList;
          this.videoQuery.pageNumber = playInfo.pageNumber;
          this.videoNoMore = playInfo.nomore;
          this.videoQuery.authorId = option.authorId;
          this.videoQuery.videoFrom = option.videoFrom;
          this.currentIndex = playInfo.playIndex;
      } else {
          this.videoQuery.videoFrom = 'recommend';
          this.loadVideos();
      }
  },
  onReady() {
    // 初始化视频上下文
    this.initVideoContexts();
  },
  methods: {
        // 跳转个人主页
        jumpToHomePage(authorId) {
            uni.navigateTo({
                url: "/pages/video/home-page?authorId=" + authorId
            })
        },
        // 取消点赞
        async cancelThumbsUp(id, commentIndex, replyIndex) {
            const data = {
                refId: id,
                thumbsUpType: 'video_comment'
            }
            cancelThubmsUpComment(data).then(res => {
                if(replyIndex != null) {
                    this.comments[commentIndex].replies[replyIndex].hasThumbsUp = false;
                    this.comments[commentIndex].replies[replyIndex].thumbsUpNum -= 1;
                } else {
                    this.comments[commentIndex].hasThumbsUp = false;
                    this.comments[commentIndex].thumbsUpNum -= 1;
                }
            })
        },
        // 评论点赞
        async thubmsUp(id, commentIndex, replyIndex) {
            const data = {
                refId: id,
                thumbsUpType: 'video_comment'
            }
            thubmsUpComment(data).then(res => {
                if(replyIndex != null) {
                    this.comments[commentIndex].replies[replyIndex].hasThumbsUp = true;
                    this.comments[commentIndex].replies[replyIndex].thumbsUpNum += 1;
                } else {
                    this.comments[commentIndex].hasThumbsUp = true;
                    this.comments[commentIndex].thumbsUpNum += 1;
                }
            })
        },
        // 加载下一页回复
        loadNextPageReply(index) {
            this.replyCommentQuery.pageNumber++;
            getVideoComments(this.replyCommentQuery).then(res => {
                this.comments[index].replies = [
                  ...this.comments[index].replies,
                  ...res.data.data.filter(
                    (newItem) => !this.comments[index].replies.some((oldItem) => oldItem.id === newItem.id)
                  ),
                ];
            })
        },
        // 收起回复
        retractReplyComment(index) {
            this.comments[index].expandReply = false;
            this.comments[index].replies = [];
        },
        // 加载回复
        loadRepliesPage(comment, index) {
            this.replyCommentQuery.pageNumber = 1;
            this.replyCommentQuery.masterCommentId = comment.id
            getVideoComments(this.replyCommentQuery).then(res => {
                this.comments[index].replies = res.data.data;
                this.comments[index].expandReply = true;
            })
        },
        resetCommentForm() {
            const videoId = this.commentForm.videoId;
            this.commentForm = { // 评论表单数据
                id: '',
                videoId: '',
                commentContent: '',
                replyId: '',
                replyUserId: '',
                replyUserNickname: '',
                replyUserAvatar: '',
                masterCommentId: null
            }
        },
        // 取消回复
        cancelReply() {
            this.resetCommentForm()
          },
        // 打开回复框
        openReply(comment, reply = null) {
          if(reply) {
            comment = reply
          }
          this.commentForm.masterCommentId = comment.masterCommentId ? comment.masterCommentId : comment.id;
          this.commentForm.replyId = comment.id;
          this.commentForm.replyUserId = comment.userId;
          this.commentForm.replyUserNickname = comment.userNickname;
          this.commentForm.replyUserAvatar = comment.userAvatar;
          // 自动聚焦输入框
          this.$nextTick(() => {
            const input = this.$refs.commentInput;
            if (input) input.focus();
          });
        },
        // 格式化时间
        formatTime(time) {
          const date = new Date(time);
          const now = new Date();
          const diff = Math.floor((now - date) / 1000); // 秒
	      
          if (diff < 60) return '刚刚';
          if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`;
          if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`;
	      
          return `${date.getMonth() + 1}月${date.getDate()}日`;
        },
        // 提交评论
        async submitComment() {
          if (!this.commentForm.commentContent.trim()) {
            uni.showToast({
              title: '评论内容不能为空',
              icon: 'none'
            });
            return;
          }
          // 发表评论
          addVideoComment(this.commentForm).then(res => {
              if(res.data.code === 200) {
                  this.resetCommentForm()
				  
                  // 如果是评论别人的回复，那么就将这个发布到replies里面
                  if(res.data.data.replyId) {
                      for (const [index, item] of this.comments.entries()) {
                        if (item.id === res.data.data.replyId) {
                          item.replies.unshift(res.data.data);
                          // this.loadRepliesPage(item, index)
                          break; // 跳出循环
                        }
                      }
                  } else {
                    this.comments.unshift(res.data.data);
                  }
                  console.log("新增后",this.comments);
                  uni.showToast({
                    title: '评论成功'
                  });
                  // 当前视频评论数加一
                  this.commentsTotal += 1;
                  this.videoList[this.currentIndex].commentNum += 1;
              } else {
                  uni.showToast({
                          title: res.data.msg,
                          icon: 'none'
                        });
              }
          }).catch(() => {
              uni.showToast({
                      title: '评论失败',
                      icon: 'none'
                    });
          })
        },
        // 关闭评论弹窗
        closeCommentPopup() {
          this.$refs.commentPopup.close()
          this.showCommentPopup = false;
          this.comments = [];
          this.resetCommentForm()
          this.commentQuery.pageNumber = 1;
          this.commentNoMore = false;
        },
        // 下滑评论区加载评论
        async getCommentPage() {
            if(this.commentNoMore) {
                return;
            }
            getVideoComments(this.commentQuery).then(res => {
                if(this.commentQuery.pageNumber === 1) {
                    this.comments = res.data.data
                } else {
                    this.comments = [
                      ...this.comments,
                      ...res.data.data.filter(
                        (newItem) => !this.comments.some((oldItem) => oldItem.id === newItem.id)
                      ),
                    ];
                }
                if (res.data.data.length < this.commentQuery.pageSize) {
                    this.commentNoMore = true;
                    return;
                }
                this.commentQuery.pageNumber++;
            })
        },
        // 显示评论弹窗
        async showComments(item) {
          this.commentForm.videoId = item.id;
          this.$refs.commentPopup.open();
          this.commentLoading = true;
          this.commentQuery.videoId = item.id
          this.replyCommentQuery.videoId = item.id
          // 首次加载评论分页大小增加一倍，以产生滚动条，后续可触发
          this.commentQuery.pageSize *= 2;
          getVideoComments(this.commentQuery).then(res => {
              this.commentsTotal = res.data.total;
              this.comments = res.data.data;
              this.commentQuery.pageNumber += 2;
              this.commentQuery.pageSize /= 2;
          }).catch(() => {
              uni.showToast({
                title: '获取评论失败',
                icon: 'none'
              });
          }).finally(() => {
              this.commentLoading = false;
          })
        },
      // 关注作者
      subscribeAuth(index, authorId) {
        this.videoList.forEach(video => {
            if(video.authorId === authorId) {
                video.subscribeThisAuthor = true
            }
        })
        subscribe(authorId).then(res => {
            if(res.data.code === 200) {
                uni.showToast({
                  title: '关注成功~',
                  icon: 'none'
                });
            } else {
                this.videoList.forEach(video => {
                    if(video.authorId === authorId) {
                        video.subscribeThisAuthor = false
                    }
                })
            }
        })
      },
    // 初始化视频上下文
    initVideoContexts() {
      this.videoContexts = this.videoList.map((_, index) => {
          let videoContent = uni.createVideoContext(`video${index}`, this);
          return videoContent;
      });
    },
    
    // 加载视频数据
    async loadVideos() {
      if (this.loading || this.videoNoMore) return;
      this.loading = true;
      
      getRecommendVideos(this.videoQuery).then(res => {
          if (this.videoQuery.pageNumber === 1) {
            this.videoList = res.data.data;
          } else {
            this.videoList = [
              ...this.videoList,
              ...res.data.data.filter(
                (newItem) => !this.videoList.some((oldItem) => oldItem.id === newItem.id)
              ),
            ];
          }
          this.$nextTick(() => {
            this.initVideoContexts();
          });
          this.loading = false;
          if(res.data.data.length < this.videoQuery.pageSize) {
              this.videoNoMore = true;
              return;
          }
          this.videoQuery.pageNumber++;
      })
    },
    
    // 滑动切换视频
    onSwiperChange(e) {
        // 如果视频处于暂停状态往下刷视频，那么需要再计算一次暂停时间
        if(!this.currentVideoIsPlaying) {
            if(this.startPauseTime !== 0) {
                const duration = Date.now() - this.startPauseTime
                this.totalPauseTime += duration
            }
        }
        // 保存上一个视频的播放记录
        this.savePlayRecord()
        const oldIndex = this.currentIndex;
        this.currentIndex = e.detail.current;

        // 暂停上一个视频
        if (this.videoContexts[oldIndex]) {
            this.videoContexts[oldIndex].pause();
        }
		
        this.startPauseTime = 0;
        // 播放当前视频
        if (this.videoContexts[this.currentIndex]) {
            this.videoContexts[this.currentIndex].play();
        }
    },
    
    // 收藏/取消收藏
    toggleCollect(item, index) {
      let data = {
          refId: item.id,
          collectType: 'video'
      }
      const beforeCollected = item.collected
      const beforeCollectNum = item.collectNum
      if(item.collected) {
          this.videoList[index].collected = false
          this.videoList[index].collectNum -= 1
      } else {
          this.videoList[index].collected = true
          this.videoList[index].collectNum += 1
      }
      changeCollect(data).then(res => {
          if(res.data.code !== 200) {
              this.videoList[index].collected = beforeCollected
              this.videoList[index].collectNum = beforeCollectNum
          }
      })
    },
    // 单击屏幕：暂停或继续播放
    togglePlay(index) {
        if(this.currentVideoIsPlaying) {
            this.videoContexts[index].pause();
        } else {
            this.videoContexts[index].play();
        }
    },
    // 视频播放事件
    onPlay(id, index) {
        console.log(id, index, "触发播放");
        if(index === this.currentIndex) {
            this.currentVideoIsPlaying = true;
        } else {
            this.currentVideoIsPlaying = false;
            return
        }
        this.playRecord.videoId = id;
        // 没初始化才赋值，因为一个视频重复播放onPlay会重复触发
        if(this.playRecord.startPlayTime === 0) {
            this.playRecord.startPlayTime = Date.now();
        }
        if(this.startPauseTime !== 0) {
            const duration = Date.now() - this.startPauseTime
            this.totalPauseTime += duration
        }
    },
    
    // 视频暂停事件
    onPause(index) {
        console.log(index, "触发暂停");
        if(index === this.currentIndex) {
            this.currentVideoIsPlaying = false;
        } else {
            this.currentVideoIsPlaying = true;
            return
        }
      this.startPauseTime = Date.now()
    },
    
    // 视频结束事件
    onEnded(index) {
      // this.currentVideoIsPlaying = false;
    },
	
    // 记录播放时长
    onTimeUpdate(e) {
        this.playRecord.playAt = e.detail.currentTime
    },
	
    // 保存播放记录
    async savePlayRecord() {
        console.log(Date.now(), this.playRecord.startPlayTime, this.totalHidenTime);
		
        const data = {
            videoId: this.playRecord.videoId,
            viewDuration: Date.now() - this.playRecord.startPlayTime - this.totalHidenTime - this.totalPauseTime,
            playAt: this.playRecord.playAt
        }
        this.playRecord = {
            videoId: null,
            viewDuration: 0, // 这个视频总共观看了多久
            playAt: 0 ,// 这个视频播放到哪了
            startPlayTime: 0 // 这个视频从什么时候开始播放的
        }
        this.totalHidenTime = 0
        this.totalPauseTime = 0
        savePlayRecord(data)
    }
  }
}
</script>

<style scoped>
    ::v-deep .custom-tabbar {
        border-top: none !important;
    }
    .video-container {
      width: 100%;
      height: 100vh;
      background-color: #000;
    }
	
    .video-swiper {
      width: 100%;
      height: 100%;
    }
	
    .video-item {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 45px;
      height: 45px;
      z-index: 10;
      opacity: 0.6;
    }
	
    .video-info {
      width: 70%;
      position: absolute;
      bottom: 70px;
      left: 20px;
      color: #f8f8f8;
      z-index: 10;
      letter-spacing: 1px;
    }
	
    .action-buttons {
      position: absolute;
      right: 20px;
      bottom: 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 10;
    }
	
    .action-item {
      margin-bottom: 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .avatar-container {
      margin-bottom: 27px;
      position: relative;  /* 为绝对定位的子元素提供定位上下文 */
      width: 40px;
      height: 40px;
      display: inline-block; /* 使容器根据内容调整大小 */
    }
    .avatar {
      border: 2px solid #FFFFFF;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 50%;  /* 关键属性，设置为50%即可实现圆形 */
      overflow: hidden;    /* 确保图片不会超出圆形边界 */
      display: block;
    }
    .follow-icon {
      position: absolute;
      bottom: 0;  /* 定位到底部 */
      left: 50%;  /* 水平居中开始位置 */
      transform: translate(-50%, 50%); /* 水平居中并向下移动50% */
	  
      width: 18px;  /* 图标大小 */
      height: 18px;
      background-color: #FF5A5F; /* 图标背景色 */
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    }
    .video-tag {
        margin-left: 5px;
        font-weight: bold;
        color: #eeeeee;
    }
    .video-author {
        font-size: 1.2em;
    }
    /* 商品链接悬挂层样式 */
    .goods-link-warp {
        position: absolute;
        bottom: 160px;
        left: 20px;
        color: #f8f8f8;
        z-index: 10;
    }
    .goods-link {
      position: relative;
      margin: 20rpx 0;
      padding: 12rpx;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 12rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    }
	
    .goods-container {
      display: flex;
      align-items: center;
    }
	
    .goods-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
	
    .goods-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
	
    .goods-name {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 8rpx;
    }
	
    .price-section {
      display: flex;
      align-items: center;
      margin-bottom: 6rpx;
    }
	
    .current-price {
      font-size: 32rpx;
      color: #ff2e4d;
      font-weight: bold;
      margin-right: 12rpx;
    }
	
    .original-price {
      font-size: 28rpx;
      color: #999;
      text-decoration: line-through;
    }
	
    .sales-count {
      font-size: 22rpx;
      color: #999;
    }
	
    .buy-button {
      background: linear-gradient(to right, #ff5a5f, #ff2e4d);
      color: white;
      padding: 10rpx 28rpx;
      border-radius: 20rpx;
      font-size: 26rpx;
      font-weight: bold;
    }
    /* 评论弹窗样式 */
    .comment-popup {
      background-color: #fff;
      border-radius: 20rpx 20rpx 0 0;
      padding-bottom: env(safe-area-inset-bottom);
      height: 60vh;
      display: flex;
      flex-direction: column;
    }

    .popup-header {
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #f5f5f5;
    }

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
    }

    .close-icon {
      /* font-size: 36rpx; */
      color: #999;
    }

    .comment-list {
      flex: 1;
      padding: 0rpx 20rpx 20rpx 20rpx;
      box-sizing: border-box;
      height: calc(60vh - 260rpx);
    }

    .comment-item {
      display: flex;
      flex-direction: column;
      padding: 10rpx 0 20rpx 0;
    }

    .comment-avatar {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
    .comment-reply-avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 10rpx;
    }

    .comment-content {
      flex: 1;
    }

    .nickname {
      font-size: 28rpx;
      color: #666;
      display: block;
      margin-bottom: 10rpx;
    }

    .content {
      font-size: 28rpx;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }

    .time {
      font-size: 28rpx;
      color: #999;
    }

    .comment-input-area {
      display: flex;
      padding: 20rpx 30rpx;
      align-items: center;
    }

    .comment-input {
      flex: 1;
      background-color: #fff;
      height: 80rpx;
      border: 1px solid #dcdcdc;
      border-radius: 40rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
    }

    .placeholder {
      color: #ccc;
    }

    .submit-btn {
      margin-left: 20rpx;
      background-color: #07c160;
      color: #fff;
      border-radius: 40rpx;
      padding: 0 30rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
    }

    .loading, .empty {
      padding: 40rpx 0;
      text-align: center;
      color: #999;
    }
    .reply-list {
      margin-top: 20rpx;
      padding-left: 80rpx;
    }
    .reply-op {
        margin-top: 10rpx;
        padding-left: 80rpx;
        display: flex;
        font-size: 28rpx;
        color: #333;
    }
    .reply-op-item {
        display: flex;
        align-items: center;
        height: 40rpx;
    }
	
    .reply-item {
      display: flex;
      margin-bottom: 20rpx;
    }
	
    .reply-content {
      flex: 1;
    }
	
    .reply-to {
      color: #576b95;
      margin: 0 10rpx;
      font-size: 28rpx;
    }
    .reply-title {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #333;
    }
	
    .cancel-reply {
      margin-left: 20rpx;
      color: #576b95;
      font-size: 28rpx;
      padding: 6rpx 12rpx;
      background: #f5f5f5;
      border-radius: 20rpx;
    }
    .view-more-replies {
      color: #576b95;
      font-size: 28rpx;
      padding: 10rpx 0;
      padding-left: 80rpx;
    }
    .comment-footer, .reply-footer {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #999;
    }
    .reply-btu {
        margin-left: 30rpx;
    }
    .thumbs-up {
        position: absolute;
        right: 20rpx;
        font-size: 32rpx;
        width: 120rpx;
    }
    .textSideIcon {
        font-size: 36rpx;
        margin-left: 5rpx;
    }
    .line {
        margin-right: 10rpx;
        color: #cccccc;
    }
    .thumbs-num {
        margin-left: 4rpx;
    }
</style>

 static/tabbar/video1-selected.png

 static/tabbar/video1.png

 uni_modules/uni-icons/changelog.md

New file
@@ -0,0 +1,42 @@
## 2.0.10（2024-06-07）
- 优化 uni-app x 中，size 属性的类型
## 2.0.9（2024-01-12）
fix: 修复图标大小默认值错误的问题
## 2.0.8（2023-12-14）
- 修复 项目未使用 ts 情况下，打包报错的bug
## 2.0.7（2023-12-14）
- 修复 size 属性为 string 时，不加单位导致尺寸异常的bug
## 2.0.6（2023-12-11）
- 优化 兼容老版本icon类型，如 top ，bottom 等
## 2.0.5（2023-12-11）
- 优化 兼容老版本icon类型，如 top ，bottom 等
## 2.0.4（2023-12-06）
- 优化 uni-app x 下示例项目图标排序
## 2.0.3（2023-12-06）
- 修复 nvue下引入组件报错的bug
## 2.0.2（2023-12-05）
-优化 size 属性支持单位
## 2.0.1（2023-12-05）
- 新增 uni-app x 支持定义图标
## 1.3.5（2022-01-24）
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4（2022-01-24）
- 优化 size 支持其他单位
## 1.3.3（2022-01-17）
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
## 1.3.2（2021-12-01）
- 优化 示例可复制图标名称
## 1.3.1（2021-11-23）
- 优化 兼容旧组件 type 值
## 1.3.0（2021-11-19）
- 新增 更多图标
- 优化 自定义图标使用方式
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7（2021-11-08）
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5（2021-05-12）
- 新增 组件示例地址
## 1.1.4（2021-02-05）
- 调整为uni_modules目录规范

 uni_modules/uni-icons/components/uni-icons/uni-icons.uvue

New file
@@ -0,0 +1,91 @@
<template>
  <text class="uni-icons" :style="styleObj">
    <slot>{{unicode}}</slot>
  </text>
</template>

<script>
  import { fontData, IconsDataItem } from './uniicons_file'

  /**
   * Icons 图标
   * @description 用于展示 icon 图标
   * @tutorial https://ext.dcloud.net.cn/plugin?id=28
   * @property {Number,String} size 图标大小
   * @property {String} type 图标图案，参考示例
   * @property {String} color 图标颜色
   * @property {String} customPrefix 自定义图标
   * @event {Function} click 点击 Icon 触发事件
   */
  export default {
    name: "uni-icons",
    props: {
      type: {
        type: String,
        default: ''
      },
      color: {
        type: String,
        default: '#333333'
      },
      size: {
        type: [Number, String],
        default: 16
      },
      fontFamily: {
        type: String,
        default: ''
      }
    },
    data() {
      return {};
    },
    computed: {
      unicode() : string {
        let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
        if (codes !== null) {
          return codes.unicode
        }
        return ''
      },
      iconSize() : string {
        const size = this.size
        if (typeof size == 'string') {
          const reg = /^[0-9]*$/g
          return reg.test(size as string) ? '' + size + 'px' : '' + size;
          // return '' + this.size
        }
        return this.getFontSize(size as number)
      },
      styleObj() : UTSJSONObject {
        if (this.fontFamily !== '') {
          return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
        }
        return { color: this.color, fontSize: this.iconSize }
      }
    },
    created() { },
    methods: {
      /**
       * 字体大小
       */
      getFontSize(size : number) : string {
        return size + 'px';
      },
    },
  }
</script>

<style scoped>
  @font-face {
    font-family: UniIconsFontFamily;
    src: url('./uniicons.ttf');
  }

  .uni-icons {
    font-family: UniIconsFontFamily;
    font-size: 18px;
    font-style: normal;
    color: #333;
  }
</style>

 uni_modules/uni-icons/components/uni-icons/uni-icons.vue

New file
@@ -0,0 +1,110 @@
<template>
    <!-- #ifdef APP-NVUE -->
    <text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
    <text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
        <slot></slot>
    </text>
    <!-- #endif -->
</template>

<script>
    import { fontData } from './uniicons_file_vue.js';

    const getVal = (val) => {
        const reg = /^[0-9]*$/g
        return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
    }

    // #ifdef APP-NVUE
    var domModule = weex.requireModule('dom');
    import iconUrl from './uniicons.ttf'
    domModule.addRule('fontFace', {
        'fontFamily': "uniicons",
        'src': "url('" + iconUrl + "')"
    });
    // #endif

    /**
     * Icons 图标
     * @description 用于展示 icons 图标
     * @tutorial https://ext.dcloud.net.cn/plugin?id=28
     * @property {Number} size 图标大小
     * @property {String} type 图标图案，参考示例
     * @property {String} color 图标颜色
     * @property {String} customPrefix 自定义图标
     * @event {Function} click 点击 Icon 触发事件
     */
    export default {
        name: 'UniIcons',
        emits: ['click'],
        props: {
            type: {
                type: String,
                default: ''
            },
            color: {
                type: String,
                default: '#333333'
            },
            size: {
                type: [Number, String],
                default: 16
            },
            customPrefix: {
                type: String,
                default: ''
            },
            fontFamily: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                icons: fontData
            }
        },
        computed: {
            unicode() {
                let code = this.icons.find(v => v.font_class === this.type)
                if (code) {
                    return code.unicode
                }
                return ''
            },
            iconSize() {
                return getVal(this.size)
            },
            styleObj() {
                if (this.fontFamily !== '') {
                    return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
                }
                return `color: ${this.color}; font-size: ${this.iconSize};`
            }
        },
        methods: {
            _onClick() {
                this.$emit('click')
            }
        }
    }
</script>

<style lang="scss">
    /* #ifndef APP-NVUE */
    @import './uniicons.css';

    @font-face {
        font-family: uniicons;
        src: url('./uniicons.ttf');
    }

    /* #endif */
    .uni-icons {
        font-family: uniicons;
        text-decoration: none;
        text-align: center;
    }
</style>

 uni_modules/uni-icons/components/uni-icons/uniicons.css

New file
@@ -0,0 +1,664 @@

.uniui-cart-filled:before {
  content: "\e6d0";
}

.uniui-gift-filled:before {
  content: "\e6c4";
}

.uniui-color:before {
  content: "\e6cf";
}

.uniui-wallet:before {
  content: "\e6b1";
}

.uniui-settings-filled:before {
  content: "\e6ce";
}

.uniui-auth-filled:before {
  content: "\e6cc";
}

.uniui-shop-filled:before {
  content: "\e6cd";
}

.uniui-staff-filled:before {
  content: "\e6cb";
}

.uniui-vip-filled:before {
  content: "\e6c6";
}

.uniui-plus-filled:before {
  content: "\e6c7";
}

.uniui-folder-add-filled:before {
  content: "\e6c8";
}

.uniui-color-filled:before {
  content: "\e6c9";
}

.uniui-tune-filled:before {
  content: "\e6ca";
}

.uniui-calendar-filled:before {
  content: "\e6c0";
}

.uniui-notification-filled:before {
  content: "\e6c1";
}

.uniui-wallet-filled:before {
  content: "\e6c2";
}

.uniui-medal-filled:before {
  content: "\e6c3";
}

.uniui-fire-filled:before {
  content: "\e6c5";
}

.uniui-refreshempty:before {
  content: "\e6bf";
}

.uniui-location-filled:before {
  content: "\e6af";
}

.uniui-person-filled:before {
  content: "\e69d";
}

.uniui-personadd-filled:before {
  content: "\e698";
}

.uniui-arrowthinleft:before {
  content: "\e6d2";
}

.uniui-arrowthinup:before {
  content: "\e6d3";
}

.uniui-arrowthindown:before {
  content: "\e6d4";
}

.uniui-back:before {
  content: "\e6b9";
}

.uniui-forward:before {
  content: "\e6ba";
}

.uniui-arrow-right:before {
  content: "\e6bb";
}

.uniui-arrow-left:before {
  content: "\e6bc";
}

.uniui-arrow-up:before {
  content: "\e6bd";
}

.uniui-arrow-down:before {
  content: "\e6be";
}

.uniui-arrowthinright:before {
  content: "\e6d1";
}

.uniui-down:before {
  content: "\e6b8";
}

.uniui-bottom:before {
  content: "\e6b8";
}

.uniui-arrowright:before {
  content: "\e6d5";
}

.uniui-right:before {
  content: "\e6b5";
}

.uniui-up:before {
  content: "\e6b6";
}

.uniui-top:before {
  content: "\e6b6";
}

.uniui-left:before {
  content: "\e6b7";
}

.uniui-arrowup:before {
  content: "\e6d6";
}

.uniui-eye:before {
  content: "\e651";
}

.uniui-eye-filled:before {
  content: "\e66a";
}

.uniui-eye-slash:before {
  content: "\e6b3";
}

.uniui-eye-slash-filled:before {
  content: "\e6b4";
}

.uniui-info-filled:before {
  content: "\e649";
}

.uniui-reload:before {
  content: "\e6b2";
}

.uniui-micoff-filled:before {
  content: "\e6b0";
}

.uniui-map-pin-ellipse:before {
  content: "\e6ac";
}

.uniui-map-pin:before {
  content: "\e6ad";
}

.uniui-location:before {
  content: "\e6ae";
}

.uniui-starhalf:before {
  content: "\e683";
}

.uniui-star:before {
  content: "\e688";
}

.uniui-star-filled:before {
  content: "\e68f";
}

.uniui-calendar:before {
  content: "\e6a0";
}

.uniui-fire:before {
  content: "\e6a1";
}

.uniui-medal:before {
  content: "\e6a2";
}

.uniui-font:before {
  content: "\e6a3";
}

.uniui-gift:before {
  content: "\e6a4";
}

.uniui-link:before {
  content: "\e6a5";
}

.uniui-notification:before {
  content: "\e6a6";
}

.uniui-staff:before {
  content: "\e6a7";
}

.uniui-vip:before {
  content: "\e6a8";
}

.uniui-folder-add:before {
  content: "\e6a9";
}

.uniui-tune:before {
  content: "\e6aa";
}

.uniui-auth:before {
  content: "\e6ab";
}

.uniui-person:before {
  content: "\e699";
}

.uniui-email-filled:before {
  content: "\e69a";
}

.uniui-phone-filled:before {
  content: "\e69b";
}

.uniui-phone:before {
  content: "\e69c";
}

.uniui-email:before {
  content: "\e69e";
}

.uniui-personadd:before {
  content: "\e69f";
}

.uniui-chatboxes-filled:before {
  content: "\e692";
}

.uniui-contact:before {
  content: "\e693";
}

.uniui-chatbubble-filled:before {
  content: "\e694";
}

.uniui-contact-filled:before {
  content: "\e695";
}

.uniui-chatboxes:before {
  content: "\e696";
}

.uniui-chatbubble:before {
  content: "\e697";
}

.uniui-upload-filled:before {
  content: "\e68e";
}

.uniui-upload:before {
  content: "\e690";
}

.uniui-weixin:before {
  content: "\e691";
}

.uniui-compose:before {
  content: "\e67f";
}

.uniui-qq:before {
  content: "\e680";
}

.uniui-download-filled:before {
  content: "\e681";
}

.uniui-pyq:before {
  content: "\e682";
}

.uniui-sound:before {
  content: "\e684";
}

.uniui-trash-filled:before {
  content: "\e685";
}

.uniui-sound-filled:before {
  content: "\e686";
}

.uniui-trash:before {
  content: "\e687";
}

.uniui-videocam-filled:before {
  content: "\e689";
}

.uniui-spinner-cycle:before {
  content: "\e68a";
}

.uniui-weibo:before {
  content: "\e68b";
}

.uniui-videocam:before {
  content: "\e68c";
}

.uniui-download:before {
  content: "\e68d";
}

.uniui-help:before {
  content: "\e679";
}

.uniui-navigate-filled:before {
  content: "\e67a";
}

.uniui-plusempty:before {
  content: "\e67b";
}

.uniui-smallcircle:before {
  content: "\e67c";
}

.uniui-minus-filled:before {
  content: "\e67d";
}

.uniui-micoff:before {
  content: "\e67e";
}

.uniui-closeempty:before {
  content: "\e66c";
}

.uniui-clear:before {
  content: "\e66d";
}

.uniui-navigate:before {
  content: "\e66e";
}

.uniui-minus:before {
  content: "\e66f";
}

.uniui-image:before {
  content: "\e670";
}

.uniui-mic:before {
  content: "\e671";
}

.uniui-paperplane:before {
  content: "\e672";
}

.uniui-close:before {
  content: "\e673";
}

.uniui-help-filled:before {
  content: "\e674";
}

.uniui-paperplane-filled:before {
  content: "\e675";
}

.uniui-plus:before {
  content: "\e676";
}

.uniui-mic-filled:before {
  content: "\e677";
}

.uniui-image-filled:before {
  content: "\e678";
}

.uniui-locked-filled:before {
  content: "\e668";
}

.uniui-info:before {
  content: "\e669";
}

.uniui-locked:before {
  content: "\e66b";
}

.uniui-camera-filled:before {
  content: "\e658";
}

.uniui-chat-filled:before {
  content: "\e659";
}

.uniui-camera:before {
  content: "\e65a";
}

.uniui-circle:before {
  content: "\e65b";
}

.uniui-checkmarkempty:before {
  content: "\e65c";
}

.uniui-chat:before {
  content: "\e65d";
}

.uniui-circle-filled:before {
  content: "\e65e";
}

.uniui-flag:before {
  content: "\e65f";
}

.uniui-flag-filled:before {
  content: "\e660";
}

.uniui-gear-filled:before {
  content: "\e661";
}

.uniui-home:before {
  content: "\e662";
}

.uniui-home-filled:before {
  content: "\e663";
}

.uniui-gear:before {
  content: "\e664";
}

.uniui-smallcircle-filled:before {
  content: "\e665";
}

.uniui-map-filled:before {
  content: "\e666";
}

.uniui-map:before {
  content: "\e667";
}

.uniui-refresh-filled:before {
  content: "\e656";
}

.uniui-refresh:before {
  content: "\e657";
}

.uniui-cloud-upload:before {
  content: "\e645";
}

.uniui-cloud-download-filled:before {
  content: "\e646";
}

.uniui-cloud-download:before {
  content: "\e647";
}

.uniui-cloud-upload-filled:before {
  content: "\e648";
}

.uniui-redo:before {
  content: "\e64a";
}

.uniui-images-filled:before {
  content: "\e64b";
}

.uniui-undo-filled:before {
  content: "\e64c";
}

.uniui-more:before {
  content: "\e64d";
}

.uniui-more-filled:before {
  content: "\e64e";
}

.uniui-undo:before {
  content: "\e64f";
}

.uniui-images:before {
  content: "\e650";
}

.uniui-paperclip:before {
  content: "\e652";
}

.uniui-settings:before {
  content: "\e653";
}

.uniui-search:before {
  content: "\e654";
}

.uniui-redo-filled:before {
  content: "\e655";
}

.uniui-list:before {
  content: "\e644";
}

.uniui-mail-open-filled:before {
  content: "\e63a";
}

.uniui-hand-down-filled:before {
  content: "\e63c";
}

.uniui-hand-down:before {
  content: "\e63d";
}

.uniui-hand-up-filled:before {
  content: "\e63e";
}

.uniui-hand-up:before {
  content: "\e63f";
}

.uniui-heart-filled:before {
  content: "\e641";
}

.uniui-mail-open:before {
  content: "\e643";
}

.uniui-heart:before {
  content: "\e639";
}

.uniui-loop:before {
  content: "\e633";
}

.uniui-pulldown:before {
  content: "\e632";
}

.uniui-scan:before {
  content: "\e62a";
}

.uniui-bars:before {
  content: "\e627";
}

.uniui-checkbox:before {
  content: "\e62b";
}

.uniui-checkbox-filled:before {
  content: "\e62c";
}

.uniui-shop:before {
  content: "\e62f";
}

.uniui-headphones:before {
  content: "\e630";
}

.uniui-cart:before {
  content: "\e631";
}

 uni_modules/uni-icons/components/uni-icons/uniicons.ttf

Binary files differ

 uni_modules/uni-icons/components/uni-icons/uniicons_file.ts

New file
@@ -0,0 +1,664 @@

export type IconsData = {
    id : string
    name : string
    font_family : string
    css_prefix_text : string
    description : string
    glyphs : Array<IconsDataItem>
}

export type IconsDataItem = {
    font_class : string
    unicode : string
}


export const fontData = [
  {
    "font_class": "arrow-down",
    "unicode": "\ue6be"
  },
  {
    "font_class": "arrow-left",
    "unicode": "\ue6bc"
  },
  {
    "font_class": "arrow-right",
    "unicode": "\ue6bb"
  },
  {
    "font_class": "arrow-up",
    "unicode": "\ue6bd"
  },
  {
    "font_class": "auth",
    "unicode": "\ue6ab"
  },
  {
    "font_class": "auth-filled",
    "unicode": "\ue6cc"
  },
  {
    "font_class": "back",
    "unicode": "\ue6b9"
  },
  {
    "font_class": "bars",
    "unicode": "\ue627"
  },
  {
    "font_class": "calendar",
    "unicode": "\ue6a0"
  },
  {
    "font_class": "calendar-filled",
    "unicode": "\ue6c0"
  },
  {
    "font_class": "camera",
    "unicode": "\ue65a"
  },
  {
    "font_class": "camera-filled",
    "unicode": "\ue658"
  },
  {
    "font_class": "cart",
    "unicode": "\ue631"
  },
  {
    "font_class": "cart-filled",
    "unicode": "\ue6d0"
  },
  {
    "font_class": "chat",
    "unicode": "\ue65d"
  },
  {
    "font_class": "chat-filled",
    "unicode": "\ue659"
  },
  {
    "font_class": "chatboxes",
    "unicode": "\ue696"
  },
  {
    "font_class": "chatboxes-filled",
    "unicode": "\ue692"
  },
  {
    "font_class": "chatbubble",
    "unicode": "\ue697"
  },
  {
    "font_class": "chatbubble-filled",
    "unicode": "\ue694"
  },
  {
    "font_class": "checkbox",
    "unicode": "\ue62b"
  },
  {
    "font_class": "checkbox-filled",
    "unicode": "\ue62c"
  },
  {
    "font_class": "checkmarkempty",
    "unicode": "\ue65c"
  },
  {
    "font_class": "circle",
    "unicode": "\ue65b"
  },
  {
    "font_class": "circle-filled",
    "unicode": "\ue65e"
  },
  {
    "font_class": "clear",
    "unicode": "\ue66d"
  },
  {
    "font_class": "close",
    "unicode": "\ue673"
  },
  {
    "font_class": "closeempty",
    "unicode": "\ue66c"
  },
  {
    "font_class": "cloud-download",
    "unicode": "\ue647"
  },
  {
    "font_class": "cloud-download-filled",
    "unicode": "\ue646"
  },
  {
    "font_class": "cloud-upload",
    "unicode": "\ue645"
  },
  {
    "font_class": "cloud-upload-filled",
    "unicode": "\ue648"
  },
  {
    "font_class": "color",
    "unicode": "\ue6cf"
  },
  {
    "font_class": "color-filled",
    "unicode": "\ue6c9"
  },
  {
    "font_class": "compose",
    "unicode": "\ue67f"
  },
  {
    "font_class": "contact",
    "unicode": "\ue693"
  },
  {
    "font_class": "contact-filled",
    "unicode": "\ue695"
  },
  {
    "font_class": "down",
    "unicode": "\ue6b8"
  },
    {
      "font_class": "bottom",
      "unicode": "\ue6b8"
    },
  {
    "font_class": "download",
    "unicode": "\ue68d"
  },
  {
    "font_class": "download-filled",
    "unicode": "\ue681"
  },
  {
    "font_class": "email",
    "unicode": "\ue69e"
  },
  {
    "font_class": "email-filled",
    "unicode": "\ue69a"
  },
  {
    "font_class": "eye",
    "unicode": "\ue651"
  },
  {
    "font_class": "eye-filled",
    "unicode": "\ue66a"
  },
  {
    "font_class": "eye-slash",
    "unicode": "\ue6b3"
  },
  {
    "font_class": "eye-slash-filled",
    "unicode": "\ue6b4"
  },
  {
    "font_class": "fire",
    "unicode": "\ue6a1"
  },
  {
    "font_class": "fire-filled",
    "unicode": "\ue6c5"
  },
  {
    "font_class": "flag",
    "unicode": "\ue65f"
  },
  {
    "font_class": "flag-filled",
    "unicode": "\ue660"
  },
  {
    "font_class": "folder-add",
    "unicode": "\ue6a9"
  },
  {
    "font_class": "folder-add-filled",
    "unicode": "\ue6c8"
  },
  {
    "font_class": "font",
    "unicode": "\ue6a3"
  },
  {
    "font_class": "forward",
    "unicode": "\ue6ba"
  },
  {
    "font_class": "gear",
    "unicode": "\ue664"
  },
  {
    "font_class": "gear-filled",
    "unicode": "\ue661"
  },
  {
    "font_class": "gift",
    "unicode": "\ue6a4"
  },
  {
    "font_class": "gift-filled",
    "unicode": "\ue6c4"
  },
  {
    "font_class": "hand-down",
    "unicode": "\ue63d"
  },
  {
    "font_class": "hand-down-filled",
    "unicode": "\ue63c"
  },
  {
    "font_class": "hand-up",
    "unicode": "\ue63f"
  },
  {
    "font_class": "hand-up-filled",
    "unicode": "\ue63e"
  },
  {
    "font_class": "headphones",
    "unicode": "\ue630"
  },
  {
    "font_class": "heart",
    "unicode": "\ue639"
  },
  {
    "font_class": "heart-filled",
    "unicode": "\ue641"
  },
  {
    "font_class": "help",
    "unicode": "\ue679"
  },
  {
    "font_class": "help-filled",
    "unicode": "\ue674"
  },
  {
    "font_class": "home",
    "unicode": "\ue662"
  },
  {
    "font_class": "home-filled",
    "unicode": "\ue663"
  },
  {
    "font_class": "image",
    "unicode": "\ue670"
  },
  {
    "font_class": "image-filled",
    "unicode": "\ue678"
  },
  {
    "font_class": "images",
    "unicode": "\ue650"
  },
  {
    "font_class": "images-filled",
    "unicode": "\ue64b"
  },
  {
    "font_class": "info",
    "unicode": "\ue669"
  },
  {
    "font_class": "info-filled",
    "unicode": "\ue649"
  },
  {
    "font_class": "left",
    "unicode": "\ue6b7"
  },
  {
    "font_class": "link",
    "unicode": "\ue6a5"
  },
  {
    "font_class": "list",
    "unicode": "\ue644"
  },
  {
    "font_class": "location",
    "unicode": "\ue6ae"
  },
  {
    "font_class": "location-filled",
    "unicode": "\ue6af"
  },
  {
    "font_class": "locked",
    "unicode": "\ue66b"
  },
  {
    "font_class": "locked-filled",
    "unicode": "\ue668"
  },
  {
    "font_class": "loop",
    "unicode": "\ue633"
  },
  {
    "font_class": "mail-open",
    "unicode": "\ue643"
  },
  {
    "font_class": "mail-open-filled",
    "unicode": "\ue63a"
  },
  {
    "font_class": "map",
    "unicode": "\ue667"
  },
  {
    "font_class": "map-filled",
    "unicode": "\ue666"
  },
  {
    "font_class": "map-pin",
    "unicode": "\ue6ad"
  },
  {
    "font_class": "map-pin-ellipse",
    "unicode": "\ue6ac"
  },
  {
    "font_class": "medal",
    "unicode": "\ue6a2"
  },
  {
    "font_class": "medal-filled",
    "unicode": "\ue6c3"
  },
  {
    "font_class": "mic",
    "unicode": "\ue671"
  },
  {
    "font_class": "mic-filled",
    "unicode": "\ue677"
  },
  {
    "font_class": "micoff",
    "unicode": "\ue67e"
  },
  {
    "font_class": "micoff-filled",
    "unicode": "\ue6b0"
  },
  {
    "font_class": "minus",
    "unicode": "\ue66f"
  },
  {
    "font_class": "minus-filled",
    "unicode": "\ue67d"
  },
  {
    "font_class": "more",
    "unicode": "\ue64d"
  },
  {
    "font_class": "more-filled",
    "unicode": "\ue64e"
  },
  {
    "font_class": "navigate",
    "unicode": "\ue66e"
  },
  {
    "font_class": "navigate-filled",
    "unicode": "\ue67a"
  },
  {
    "font_class": "notification",
    "unicode": "\ue6a6"
  },
  {
    "font_class": "notification-filled",
    "unicode": "\ue6c1"
  },
  {
    "font_class": "paperclip",
    "unicode": "\ue652"
  },
  {
    "font_class": "paperplane",
    "unicode": "\ue672"
  },
  {
    "font_class": "paperplane-filled",
    "unicode": "\ue675"
  },
  {
    "font_class": "person",
    "unicode": "\ue699"
  },
  {
    "font_class": "person-filled",
    "unicode": "\ue69d"
  },
  {
    "font_class": "personadd",
    "unicode": "\ue69f"
  },
  {
    "font_class": "personadd-filled",
    "unicode": "\ue698"
  },
  {
    "font_class": "personadd-filled-copy",
    "unicode": "\ue6d1"
  },
  {
    "font_class": "phone",
    "unicode": "\ue69c"
  },
  {
    "font_class": "phone-filled",
    "unicode": "\ue69b"
  },
  {
    "font_class": "plus",
    "unicode": "\ue676"
  },
  {
    "font_class": "plus-filled",
    "unicode": "\ue6c7"
  },
  {
    "font_class": "plusempty",
    "unicode": "\ue67b"
  },
  {
    "font_class": "pulldown",
    "unicode": "\ue632"
  },
  {
    "font_class": "pyq",
    "unicode": "\ue682"
  },
  {
    "font_class": "qq",
    "unicode": "\ue680"
  },
  {
    "font_class": "redo",
    "unicode": "\ue64a"
  },
  {
    "font_class": "redo-filled",
    "unicode": "\ue655"
  },
  {
    "font_class": "refresh",
    "unicode": "\ue657"
  },
  {
    "font_class": "refresh-filled",
    "unicode": "\ue656"
  },
  {
    "font_class": "refreshempty",
    "unicode": "\ue6bf"
  },
  {
    "font_class": "reload",
    "unicode": "\ue6b2"
  },
  {
    "font_class": "right",
    "unicode": "\ue6b5"
  },
  {
    "font_class": "scan",
    "unicode": "\ue62a"
  },
  {
    "font_class": "search",
    "unicode": "\ue654"
  },
  {
    "font_class": "settings",
    "unicode": "\ue653"
  },
  {
    "font_class": "settings-filled",
    "unicode": "\ue6ce"
  },
  {
    "font_class": "shop",
    "unicode": "\ue62f"
  },
  {
    "font_class": "shop-filled",
    "unicode": "\ue6cd"
  },
  {
    "font_class": "smallcircle",
    "unicode": "\ue67c"
  },
  {
    "font_class": "smallcircle-filled",
    "unicode": "\ue665"
  },
  {
    "font_class": "sound",
    "unicode": "\ue684"
  },
  {
    "font_class": "sound-filled",
    "unicode": "\ue686"
  },
  {
    "font_class": "spinner-cycle",
    "unicode": "\ue68a"
  },
  {
    "font_class": "staff",
    "unicode": "\ue6a7"
  },
  {
    "font_class": "staff-filled",
    "unicode": "\ue6cb"
  },
  {
    "font_class": "star",
    "unicode": "\ue688"
  },
  {
    "font_class": "star-filled",
    "unicode": "\ue68f"
  },
  {
    "font_class": "starhalf",
    "unicode": "\ue683"
  },
  {
    "font_class": "trash",
    "unicode": "\ue687"
  },
  {
    "font_class": "trash-filled",
    "unicode": "\ue685"
  },
  {
    "font_class": "tune",
    "unicode": "\ue6aa"
  },
  {
    "font_class": "tune-filled",
    "unicode": "\ue6ca"
  },
  {
    "font_class": "undo",
    "unicode": "\ue64f"
  },
  {
    "font_class": "undo-filled",
    "unicode": "\ue64c"
  },
  {
    "font_class": "up",
    "unicode": "\ue6b6"
  },
    {
      "font_class": "top",
      "unicode": "\ue6b6"
    },
  {
    "font_class": "upload",
    "unicode": "\ue690"
  },
  {
    "font_class": "upload-filled",
    "unicode": "\ue68e"
  },
  {
    "font_class": "videocam",
    "unicode": "\ue68c"
  },
  {
    "font_class": "videocam-filled",
    "unicode": "\ue689"
  },
  {
    "font_class": "vip",
    "unicode": "\ue6a8"
  },
  {
    "font_class": "vip-filled",
    "unicode": "\ue6c6"
  },
  {
    "font_class": "wallet",
    "unicode": "\ue6b1"
  },
  {
    "font_class": "wallet-filled",
    "unicode": "\ue6c2"
  },
  {
    "font_class": "weibo",
    "unicode": "\ue68b"
  },
  {
    "font_class": "weixin",
    "unicode": "\ue691"
  }
] as IconsDataItem[]

// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)

 uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js

New file
@@ -0,0 +1,649 @@

export const fontData = [
  {
    "font_class": "arrow-down",
    "unicode": "\ue6be"
  },
  {
    "font_class": "arrow-left",
    "unicode": "\ue6bc"
  },
  {
    "font_class": "arrow-right",
    "unicode": "\ue6bb"
  },
  {
    "font_class": "arrow-up",
    "unicode": "\ue6bd"
  },
  {
    "font_class": "auth",
    "unicode": "\ue6ab"
  },
  {
    "font_class": "auth-filled",
    "unicode": "\ue6cc"
  },
  {
    "font_class": "back",
    "unicode": "\ue6b9"
  },
  {
    "font_class": "bars",
    "unicode": "\ue627"
  },
  {
    "font_class": "calendar",
    "unicode": "\ue6a0"
  },
  {
    "font_class": "calendar-filled",
    "unicode": "\ue6c0"
  },
  {
    "font_class": "camera",
    "unicode": "\ue65a"
  },
  {
    "font_class": "camera-filled",
    "unicode": "\ue658"
  },
  {
    "font_class": "cart",
    "unicode": "\ue631"
  },
  {
    "font_class": "cart-filled",
    "unicode": "\ue6d0"
  },
  {
    "font_class": "chat",
    "unicode": "\ue65d"
  },
  {
    "font_class": "chat-filled",
    "unicode": "\ue659"
  },
  {
    "font_class": "chatboxes",
    "unicode": "\ue696"
  },
  {
    "font_class": "chatboxes-filled",
    "unicode": "\ue692"
  },
  {
    "font_class": "chatbubble",
    "unicode": "\ue697"
  },
  {
    "font_class": "chatbubble-filled",
    "unicode": "\ue694"
  },
  {
    "font_class": "checkbox",
    "unicode": "\ue62b"
  },
  {
    "font_class": "checkbox-filled",
    "unicode": "\ue62c"
  },
  {
    "font_class": "checkmarkempty",
    "unicode": "\ue65c"
  },
  {
    "font_class": "circle",
    "unicode": "\ue65b"
  },
  {
    "font_class": "circle-filled",
    "unicode": "\ue65e"
  },
  {
    "font_class": "clear",
    "unicode": "\ue66d"
  },
  {
    "font_class": "close",
    "unicode": "\ue673"
  },
  {
    "font_class": "closeempty",
    "unicode": "\ue66c"
  },
  {
    "font_class": "cloud-download",
    "unicode": "\ue647"
  },
  {
    "font_class": "cloud-download-filled",
    "unicode": "\ue646"
  },
  {
    "font_class": "cloud-upload",
    "unicode": "\ue645"
  },
  {
    "font_class": "cloud-upload-filled",
    "unicode": "\ue648"
  },
  {
    "font_class": "color",
    "unicode": "\ue6cf"
  },
  {
    "font_class": "color-filled",
    "unicode": "\ue6c9"
  },
  {
    "font_class": "compose",
    "unicode": "\ue67f"
  },
  {
    "font_class": "contact",
    "unicode": "\ue693"
  },
  {
    "font_class": "contact-filled",
    "unicode": "\ue695"
  },
  {
    "font_class": "down",
    "unicode": "\ue6b8"
  },
    {
      "font_class": "bottom",
      "unicode": "\ue6b8"
    },
  {
    "font_class": "download",
    "unicode": "\ue68d"
  },
  {
    "font_class": "download-filled",
    "unicode": "\ue681"
  },
  {
    "font_class": "email",
    "unicode": "\ue69e"
  },
  {
    "font_class": "email-filled",
    "unicode": "\ue69a"
  },
  {
    "font_class": "eye",
    "unicode": "\ue651"
  },
  {
    "font_class": "eye-filled",
    "unicode": "\ue66a"
  },
  {
    "font_class": "eye-slash",
    "unicode": "\ue6b3"
  },
  {
    "font_class": "eye-slash-filled",
    "unicode": "\ue6b4"
  },
  {
    "font_class": "fire",
    "unicode": "\ue6a1"
  },
  {
    "font_class": "fire-filled",
    "unicode": "\ue6c5"
  },
  {
    "font_class": "flag",
    "unicode": "\ue65f"
  },
  {
    "font_class": "flag-filled",
    "unicode": "\ue660"
  },
  {
    "font_class": "folder-add",
    "unicode": "\ue6a9"
  },
  {
    "font_class": "folder-add-filled",
    "unicode": "\ue6c8"
  },
  {
    "font_class": "font",
    "unicode": "\ue6a3"
  },
  {
    "font_class": "forward",
    "unicode": "\ue6ba"
  },
  {
    "font_class": "gear",
    "unicode": "\ue664"
  },
  {
    "font_class": "gear-filled",
    "unicode": "\ue661"
  },
  {
    "font_class": "gift",
    "unicode": "\ue6a4"
  },
  {
    "font_class": "gift-filled",
    "unicode": "\ue6c4"
  },
  {
    "font_class": "hand-down",
    "unicode": "\ue63d"
  },
  {
    "font_class": "hand-down-filled",
    "unicode": "\ue63c"
  },
  {
    "font_class": "hand-up",
    "unicode": "\ue63f"
  },
  {
    "font_class": "hand-up-filled",
    "unicode": "\ue63e"
  },
  {
    "font_class": "headphones",
    "unicode": "\ue630"
  },
  {
    "font_class": "heart",
    "unicode": "\ue639"
  },
  {
    "font_class": "heart-filled",
    "unicode": "\ue641"
  },
  {
    "font_class": "help",
    "unicode": "\ue679"
  },
  {
    "font_class": "help-filled",
    "unicode": "\ue674"
  },
  {
    "font_class": "home",
    "unicode": "\ue662"
  },
  {
    "font_class": "home-filled",
    "unicode": "\ue663"
  },
  {
    "font_class": "image",
    "unicode": "\ue670"
  },
  {
    "font_class": "image-filled",
    "unicode": "\ue678"
  },
  {
    "font_class": "images",
    "unicode": "\ue650"
  },
  {
    "font_class": "images-filled",
    "unicode": "\ue64b"
  },
  {
    "font_class": "info",
    "unicode": "\ue669"
  },
  {
    "font_class": "info-filled",
    "unicode": "\ue649"
  },
  {
    "font_class": "left",
    "unicode": "\ue6b7"
  },
  {
    "font_class": "link",
    "unicode": "\ue6a5"
  },
  {
    "font_class": "list",
    "unicode": "\ue644"
  },
  {
    "font_class": "location",
    "unicode": "\ue6ae"
  },
  {
    "font_class": "location-filled",
    "unicode": "\ue6af"
  },
  {
    "font_class": "locked",
    "unicode": "\ue66b"
  },
  {
    "font_class": "locked-filled",
    "unicode": "\ue668"
  },
  {
    "font_class": "loop",
    "unicode": "\ue633"
  },
  {
    "font_class": "mail-open",
    "unicode": "\ue643"
  },
  {
    "font_class": "mail-open-filled",
    "unicode": "\ue63a"
  },
  {
    "font_class": "map",
    "unicode": "\ue667"
  },
  {
    "font_class": "map-filled",
    "unicode": "\ue666"
  },
  {
    "font_class": "map-pin",
    "unicode": "\ue6ad"
  },
  {
    "font_class": "map-pin-ellipse",
    "unicode": "\ue6ac"
  },
  {
    "font_class": "medal",
    "unicode": "\ue6a2"
  },
  {
    "font_class": "medal-filled",
    "unicode": "\ue6c3"
  },
  {
    "font_class": "mic",
    "unicode": "\ue671"
  },
  {
    "font_class": "mic-filled",
    "unicode": "\ue677"
  },
  {
    "font_class": "micoff",
    "unicode": "\ue67e"
  },
  {
    "font_class": "micoff-filled",
    "unicode": "\ue6b0"
  },
  {
    "font_class": "minus",
    "unicode": "\ue66f"
  },
  {
    "font_class": "minus-filled",
    "unicode": "\ue67d"
  },
  {
    "font_class": "more",
    "unicode": "\ue64d"
  },
  {
    "font_class": "more-filled",
    "unicode": "\ue64e"
  },
  {
    "font_class": "navigate",
    "unicode": "\ue66e"
  },
  {
    "font_class": "navigate-filled",
    "unicode": "\ue67a"
  },
  {
    "font_class": "notification",
    "unicode": "\ue6a6"
  },
  {
    "font_class": "notification-filled",
    "unicode": "\ue6c1"
  },
  {
    "font_class": "paperclip",
    "unicode": "\ue652"
  },
  {
    "font_class": "paperplane",
    "unicode": "\ue672"
  },
  {
    "font_class": "paperplane-filled",
    "unicode": "\ue675"
  },
  {
    "font_class": "person",
    "unicode": "\ue699"
  },
  {
    "font_class": "person-filled",
    "unicode": "\ue69d"
  },
  {
    "font_class": "personadd",
    "unicode": "\ue69f"
  },
  {
    "font_class": "personadd-filled",
    "unicode": "\ue698"
  },
  {
    "font_class": "personadd-filled-copy",
    "unicode": "\ue6d1"
  },
  {
    "font_class": "phone",
    "unicode": "\ue69c"
  },
  {
    "font_class": "phone-filled",
    "unicode": "\ue69b"
  },
  {
    "font_class": "plus",
    "unicode": "\ue676"
  },
  {
    "font_class": "plus-filled",
    "unicode": "\ue6c7"
  },
  {
    "font_class": "plusempty",
    "unicode": "\ue67b"
  },
  {
    "font_class": "pulldown",
    "unicode": "\ue632"
  },
  {
    "font_class": "pyq",
    "unicode": "\ue682"
  },
  {
    "font_class": "qq",
    "unicode": "\ue680"
  },
  {
    "font_class": "redo",
    "unicode": "\ue64a"
  },
  {
    "font_class": "redo-filled",
    "unicode": "\ue655"
  },
  {
    "font_class": "refresh",
    "unicode": "\ue657"
  },
  {
    "font_class": "refresh-filled",
    "unicode": "\ue656"
  },
  {
    "font_class": "refreshempty",
    "unicode": "\ue6bf"
  },
  {
    "font_class": "reload",
    "unicode": "\ue6b2"
  },
  {
    "font_class": "right",
    "unicode": "\ue6b5"
  },
  {
    "font_class": "scan",
    "unicode": "\ue62a"
  },
  {
    "font_class": "search",
    "unicode": "\ue654"
  },
  {
    "font_class": "settings",
    "unicode": "\ue653"
  },
  {
    "font_class": "settings-filled",
    "unicode": "\ue6ce"
  },
  {
    "font_class": "shop",
    "unicode": "\ue62f"
  },
  {
    "font_class": "shop-filled",
    "unicode": "\ue6cd"
  },
  {
    "font_class": "smallcircle",
    "unicode": "\ue67c"
  },
  {
    "font_class": "smallcircle-filled",
    "unicode": "\ue665"
  },
  {
    "font_class": "sound",
    "unicode": "\ue684"
  },
  {
    "font_class": "sound-filled",
    "unicode": "\ue686"
  },
  {
    "font_class": "spinner-cycle",
    "unicode": "\ue68a"
  },
  {
    "font_class": "staff",
    "unicode": "\ue6a7"
  },
  {
    "font_class": "staff-filled",
    "unicode": "\ue6cb"
  },
  {
    "font_class": "star",
    "unicode": "\ue688"
  },
  {
    "font_class": "star-filled",
    "unicode": "\ue68f"
  },
  {
    "font_class": "starhalf",
    "unicode": "\ue683"
  },
  {
    "font_class": "trash",
    "unicode": "\ue687"
  },
  {
    "font_class": "trash-filled",
    "unicode": "\ue685"
  },
  {
    "font_class": "tune",
    "unicode": "\ue6aa"
  },
  {
    "font_class": "tune-filled",
    "unicode": "\ue6ca"
  },
  {
    "font_class": "undo",
    "unicode": "\ue64f"
  },
  {
    "font_class": "undo-filled",
    "unicode": "\ue64c"
  },
  {
    "font_class": "up",
    "unicode": "\ue6b6"
  },
    {
      "font_class": "top",
      "unicode": "\ue6b6"
    },
  {
    "font_class": "upload",
    "unicode": "\ue690"
  },
  {
    "font_class": "upload-filled",
    "unicode": "\ue68e"
  },
  {
    "font_class": "videocam",
    "unicode": "\ue68c"
  },
  {
    "font_class": "videocam-filled",
    "unicode": "\ue689"
  },
  {
    "font_class": "vip",
    "unicode": "\ue6a8"
  },
  {
    "font_class": "vip-filled",
    "unicode": "\ue6c6"
  },
  {
    "font_class": "wallet",
    "unicode": "\ue6b1"
  },
  {
    "font_class": "wallet-filled",
    "unicode": "\ue6c2"
  },
  {
    "font_class": "weibo",
    "unicode": "\ue68b"
  },
  {
    "font_class": "weixin",
    "unicode": "\ue691"
  }
]

// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)

 uni_modules/uni-icons/package.json

New file
@@ -0,0 +1,89 @@
{
  "id": "uni-icons",
  "displayName": "uni-icons 图标",
  "version": "2.0.10",
  "description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
  "keywords": [
    "uni-ui",
    "uniui",
    "icon",
    "图标"
],
  "repository": "https://github.com/dcloudio/uni-ui",
  "engines": {
    "HBuilderX": "^3.2.14"
  },
  "directories": {
    "example": "../../temps/example_temps"
  },
"dcloudext": {
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "无",
      "data": "无",
      "permissions": "无"
    },
    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
    "type": "component-vue"
  },
  "uni_modules": {
    "dependencies": ["uni-scss"],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "y",
        "aliyun": "y",
        "alipay": "n"
      },
      "client": {
        "App": {
          "app-vue": "y",
          "app-nvue": "y",
          "app-uvue": "y"
        },
        "H5-mobile": {
          "Safari": "y",
          "Android Browser": "y",
          "微信浏览器(Android)": "y",
          "QQ浏览器(Android)": "y"
        },
        "H5-pc": {
          "Chrome": "y",
          "IE": "y",
          "Edge": "y",
          "Firefox": "y",
          "Safari": "y"
        },
        "小程序": {
          "微信": "y",
          "阿里": "y",
          "百度": "y",
          "字节跳动": "y",
          "QQ": "y",
                    "钉钉": "y",
                    "快手": "y",
                    "飞书": "y",
                    "京东": "y"
        },
        "快应用": {
          "华为": "y",
          "联盟": "y"
        },
        "Vue": {
            "vue2": "y",
            "vue3": "y"
        }
      }
    }
  }
}

 uni_modules/uni-icons/readme.md

New file
@@ -0,0 +1,8 @@
## Icons 图标
> **组件名：uni-icons**
> 代码块： `uIcons`

用于展示 icons 图标 。

### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839