创作页面 接口待调试

app/components/ShareModal.vue

@@ -1,34 +1,28 @@
 <template>
-  <div class="share-modal" v-if="visible">
-    <div class="modal-overlay" @click="handleClose"></div>
-    <div class="modal-content">
-      <div class="share-options">
-        <div 
+  <view class="share-modal" v-if="visible">
+    <view class="modal-overlay" @tap="handleClose"></view>
+    <view class="modal-content">
+      <view class="share-options">
+        <view 
           v-for="option in shareOptions" 
           :key="option.id"
           class="share-item"
-          @click="handleShare(option.id)"
+          @tap="handleShare(option.id)"
         >
-          <div class="share-icon">
-            <img :src="option.icon" :alt="option.title">
-          </div>
-          <span class="option-title">{{ option.title }}</span>
-        </div>
-      </div>
-      <div class="cancel-button" @click="handleClose">
-        <span>更多</span>
-      </div>
-    </div>
-  </div>
+          <view class="share-icon">
+            <image :src="option.icon" mode="aspectFit"></image>
+          </view>
+          <text class="option-title">{{ option.title }}</text>
+        </view>
+      </view>
+      <view class="cancel-button" @tap="handleClose">
+        <text>更多</text>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-import WechatIcon from '@/assets/icons/wechat.png'
-import MomentsIcon from '@/assets/icons/moments.png'
-import QQIcon from '@/assets/icons/qq.png'
-import LinkIcon from '@/assets/icons/link.png'
-import ReportIcon from '@/assets/icons/report.png'
-
 export default {
   name: 'ShareModal',
   props: {
@@ -39,16 +33,28 @@ export default {
     shareUrl: {
       type: String,
       required: true
+    },
+    shareTitle: {
+      type: String,
+      default: ''
+    },
+    shareDesc: {
+      type: String,
+      default: ''
+    },
+    shareImg: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
       shareOptions: [
-        { id: 'wechat', title: '微信好友', icon: WechatIcon },
-        { id: 'moments', title: '朋友圈', icon: MomentsIcon },
-        { id: 'qq', title: 'QQ好友', icon: QQIcon },
-        { id: 'copy', title: '复制链接', icon: LinkIcon },
-        { id: 'report', title: '举报', icon: ReportIcon }
+        { id: 'wechat', title: '微信好友', icon: '/static/images/share/wechat.png' },
+        { id: 'moments', title: '朋友圈', icon: '/static/images/share/moments.png' },
+        { id: 'qq', title: 'QQ好友', icon: '/static/images/share/qq.png' },
+        { id: 'copy', title: '复制链接', icon: '/static/images/share/link.png' },
+        { id: 'report', title: '举报', icon: '/static/images/share/report.png' }
       ]
     }
   },
@@ -60,13 +66,16 @@ export default {
       switch (type) {
         case 'copy':
           this.copyToClipboard(this.shareUrl)
-          this.$message.success('链接已复制')
+          uni.showToast({
+            title: '链接已复制',
+            icon: 'success'
+          })
           break
         case 'wechat':
-          // 实现微信分享
+          this.shareToWechat()
           break
         case 'moments':
-          // 实现朋友圈分享
+          this.shareToMoments()
           break
         case 'qq':
           // 实现QQ分享
@@ -77,12 +86,144 @@ export default {
       }
     },
     copyToClipboard(text) {
+      // #ifdef H5
       const input = document.createElement('input')
       input.value = text
       document.body.appendChild(input)
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
+      // #endif
+      
+      // #ifdef APP-PLUS || MP
+      uni.setClipboardData({
+        data: text,
+        success: () => {
+          console.log('复制成功')
+        }
+      })
+      // #endif
+    },
+    // 分享到微信好友
+    shareToWechat() {
+      // #ifdef APP-PLUS
+      uni.share({
+        provider: 'weixin',
+        scene: 'WXSceneSession',
+        type: 0,
+        title: this.shareTitle,
+        summary: this.shareDesc,
+        imageUrl: this.shareImg,
+        href: this.shareUrl,
+        success: function (res) {
+          uni.showToast({
+            title: '分享成功',
+            icon: 'success'
+          })
+        },
+        fail: function (err) {
+          uni.showToast({
+            title: '分享失败',
+            icon: 'none'
+          })
+          console.error('分享失败:', err)
+        }
+      })
+      // #endif
+
+      // #ifdef H5
+      // H5环境下使用微信JS-SDK
+      if (typeof wx !== 'undefined') {
+        wx.ready(() => {
+          wx.updateAppMessageShareData({
+            title: this.shareTitle,
+            desc: this.shareDesc,
+            link: this.shareUrl,
+            imgUrl: this.shareImg,
+            success: () => {
+              uni.showToast({
+                title: '分享成功',
+                icon: 'success'
+              })
+            },
+            fail: (err) => {
+              uni.showToast({
+                title: '分享失败',
+                icon: 'none'
+              })
+              console.error('分享失败:', err)
+            }
+          })
+        })
+      }
+      // #endif
+
+      // #ifdef MP-WEIXIN
+      uni.showShareMenu({
+        withShareTicket: true,
+        menus: ['shareAppMessage']
+      })
+      // #endif
+    },
+    // 分享到朋友圈
+    shareToMoments() {
+      // #ifdef APP-PLUS
+      uni.share({
+        provider: 'weixin',
+        scene: 'WXSenceTimeline',
+        type: 0,
+        title: this.shareTitle,
+        summary: this.shareDesc,
+        imageUrl: this.shareImg,
+        href: this.shareUrl,
+        success: function (res) {
+          uni.showToast({
+            title: '分享成功',
+            icon: 'success'
+          })
+        },
+        fail: function (err) {
+          uni.showToast({
+            title: '分享失败',
+            icon: 'none'
+          })
+          console.error('分享失败:', err)
+        }
+      })
+      // #endif
+
+      // #ifdef H5
+      // H5环境下使用微信JS-SDK
+      if (typeof wx !== 'undefined') {
+        wx.ready(() => {
+          wx.updateTimelineShareData({
+            title: this.shareTitle,
+            link: this.shareUrl,
+            imgUrl: this.shareImg,
+            success: () => {
+              uni.showToast({
+                title: '分享成功',
+                icon: 'success'
+              })
+            },
+            fail: (err) => {
+              uni.showToast({
+                title: '分享失败',
+                icon: 'none'
+              })
+              console.error('分享失败:', err)
+            }
+          })
+        })
+      }
+      // #endif
+
+      // #ifdef MP-WEIXIN
+      uni.showShareMenu({
+        withShareTicket: true,
+        menus: ['shareTimeline']
+      })
+      // #endif
     }
   }
 }
@@ -113,52 +254,53 @@ export default {
   right: 0;
   bottom: 0;
   background-color: #FFFFFF;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  padding: 16px;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  padding: 32rpx;
 }
 
 .share-options {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  padding: 8px 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 16rpx 32rpx;
 }
 
 .share-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  width: 25%;
+  margin-bottom: 32rpx;
 }
 
 .share-icon {
-  width: 44px;
-  height: 44px;
+  width: 88rpx;
+  height: 88rpx;
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-bottom: 16rpx;
 }
 
-.share-icon img {
+.share-icon image {
   width: 100%;
   height: 100%;
-  object-fit: contain;
 }
 
 .option-title {
-  font-size: 13px;
+  font-size: 26rpx;
   color: #333333;
   text-align: center;
 }
 
 .cancel-button {
   position: relative;
-  margin-top: 8px;
-  padding: 12px 0;
+  margin-top: 16rpx;
+  padding: 24rpx 0;
   text-align: center;
   color: #666666;
-  font-size: 14px;
+  font-size: 28rpx;
 }
 
 .cancel-button::before {
@@ -167,7 +309,7 @@ export default {
   left: 0;
   right: 0;
   top: 0;
-  height: 1px;
+  height: 2rpx;
   background-color: #EEEEEE;
   transform: scaleY(0.5);
 }

common/request/index.js

@@ -0,0 +1,95 @@
+const baseURL = 'https://api.example.com'; // 替换为您的实际API地址
+
+// 请求拦截器
+const requestInterceptor = (config) => {
+  // 在这里添加token等认证信息
+  const token = uni.getStorageSync('token');
+  if (token) {
+    config.header = {
+      ...config.header,
+      'Authorization': `Bearer ${token}`
+    };
+  }
+  return config;
+};
+
+// 响应拦截器
+const responseInterceptor = (response) => {
+  // 在这里处理响应数据
+  if (response.statusCode === 200) {
+    return response.data;
+  }
+  // 处理错误情况
+  uni.showToast({
+    title: response.data.message || '请求失败',
+    icon: 'none'
+  });
+  return Promise.reject(response);
+};
+
+// 封装请求方法
+const request = (options) => {
+  const config = requestInterceptor({
+    ...options,
+    url: `${baseURL}${options.url}`,
+    header: {
+      'Content-Type': 'application/json',
+      ...options.header
+    }
+  });
+
+  return new Promise((resolve, reject) => {
+    uni.request({
+      ...config,
+      success: (res) => {
+        resolve(responseInterceptor(res));
+      },
+      fail: (err) => {
+        uni.showToast({
+          title: '网络请求失败',
+          icon: 'none'
+        });
+        reject(err);
+      }
+    });
+  });
+};
+
+// 导出请求方法
+export default {
+  get: (url, data = {}, options = {}) => {
+    return request({
+      url,
+      data,
+      method: 'GET',
+      ...options
+    });
+  },
+  
+  post: (url, data = {}, options = {}) => {
+    return request({
+      url,
+      data,
+      method: 'POST',
+      ...options
+    });
+  },
+  
+  put: (url, data = {}, options = {}) => {
+    return request({
+      url,
+      data,
+      method: 'PUT',
+      ...options
+    });
+  },
+  
+  delete: (url, data = {}, options = {}) => {
+    return request({
+      url,
+      data,
+      method: 'DELETE',
+      ...options
+    });
+  }
+}; 

components/SharePopup/SharePopup.vue

@@ -1,35 +1,20 @@
 <template>
-  <div class="share-modal" v-if="visible">
-    <div class="modal-overlay" @click="handleClose"></div>
-    <div class="modal-content">
-      <div class="share-options">
-        <div 
-          v-for="option in shareOptions" 
-          :key="option.id"
-          class="share-item"
-          @click="handleShare(option.id)"
-        >
-          <div class="share-icon">
-            <!-- <img :src="option.icon" :alt="option.title"> -->
-          </div>
-          <span class="option-title">{{ option.title }}</span>
-        </div>
-      </div>
-      <div class="cancel-button" @click="handleClose">
-        <span>更多</span>
-      </div>
-    </div>
-  </div>
+  <view class="share-modal" v-if="visible">
+    <view class="modal-overlay" @click="handleClose"></view>
+    <view class="modal-content">
+      <view class="share-options">
+        <view v-for="option in shareOptions" :key="option.id" class="share-item" @click="handleShare(option.id)">
+          <view class="share-icon">
+            <image :src="option.icon" :alt="option.title" mode="aspectFit"></image>
+          </view>
+          <text class="option-title">{{ option.title }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-import WechatIcon from '@/static/icon/sy_icon_weixin.png'
-import MomentsIcon from '@/static/icon/sy_icon_pengyouquan.png'
-import QQIcon from '@/static/icon/sy_icon_qq.png'
-import LinkIcon from '@/static/icon/sy_icon_fuzhilianjie.png'
-import ReportIcon from '@/static/icon/sy_icon_jubao01.png'
-import more from '@/static/icon/sy_icon_gengduo.png'
-
 export default {
   name: 'ShareModal',
   props: {
@@ -40,17 +25,29 @@ export default {
     shareUrl: {
       type: String,
       required: true
+    },
+    shareTitle: {
+      type: String,
+      default: ''
+    },
+    shareDesc: {
+      type: String,
+      default: ''
+    },
+    shareImg: {
+      type: String,
+      default: ''
     }
   },
   data() {
     return {
       shareOptions: [
-        { id: 'wechat', title: '微信好友', icon: WechatIcon },
-        { id: 'moments', title: '朋友圈', icon: MomentsIcon },
-        { id: 'qq', title: 'QQ好友', icon: QQIcon },
-        { id: 'copy', title: '复制链接', icon: LinkIcon },
-        { id: 'report', title: '举报', icon: ReportIcon },
-        { id: 'more', title: '更多', icon: more }
+        { id: 'wechat', title: '微信好友', icon: '/static/icon/sy_icon_weixin.png' },
+        { id: 'moments', title: '朋友圈', icon: '/static/icon/sy_icon_pengyouquan.png' },
+        { id: 'qq', title: 'QQ好友', icon: '../../static/icon/sy_icon_qq.png' },
+        { id: 'copy', title: '复制链接', icon: '/static/icon/sy_icon_fuzhilianjie.png' },
+        { id: 'report', title: '举报', icon: '/static/icon/sy_icon_jubao01.png' },
+        { id: 'more', title: '更多', icon: '../../static/icon/sy_icon_gengduo.png' } 
       ]
     }
   },
@@ -62,29 +59,209 @@ export default {
       switch (type) {
         case 'copy':
           this.copyToClipboard(this.shareUrl)
-          this.$message.success('链接已复制')
           break
         case 'wechat':
-          // 实现微信分享
+          this.shareToWechat()
           break
         case 'moments':
-          // 实现朋友圈分享
+          this.shareToMoments()
+          break
+        case 'report':
+          this.handleReport()
           break
         case 'qq':
-          // 实现QQ分享
+          this.qqShare()
           break
-        case 'report':
-          // 实现举报功能
+        case 'more':
+          this.moreShare()
           break
       }
     },
     copyToClipboard(text) {
+      // #ifdef H5
       const input = document.createElement('input')
       input.value = text
       document.body.appendChild(input)
       input.select()
       document.execCommand('copy')
       document.body.removeChild(input)
+      // #endif
+
+      // #ifdef APP-PLUS || MP
+      uni.setClipboardData({
+        data: text,
+        success: () => {
+          uni.showToast({
+            title: '链接已复制',
+            icon: 'success'
+          })
+        },
+        fail: () => {
+          uni.showToast({
+            title: '复制失败',
+            icon: 'none'
+          })
+        }
+      })
+      // #endif
+    },
+    shareToWechat() {
+      // #ifdef APP-PLUS
+      uni.share({
+        provider: 'weixin',
+        scene: 'WXSceneSession',
+        type: 0,
+        title: this.shareTitle,
+        summary: this.shareDesc,
+        imageUrl: this.shareImg,
+        href: this.shareUrl,
+        success: () => {
+          uni.showToast({
+            title: '分享成功',
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '分享失败',
+            icon: 'none'
+          })
+          console.error('分享失败:', err)
+        }
+      })
+      // #endif
+
+      // #ifdef H5
+      if (typeof wx !== 'undefined') {
+        wx.ready(() => {
+          wx.updateAppMessageShareData({
+            title: this.shareTitle,
+            desc: this.shareDesc,
+            link: this.shareUrl,
+            imgUrl: this.shareImg,
+            success: () => {
+              uni.showToast({
+                title: '分享成功',
+                icon: 'success'
+              })
+            },
+            fail: (err) => {
+              uni.showToast({
+                title: '分享失败',
+                icon: 'none'
+              })
+              console.error('分享失败:', err)
+            }
+          })
+        })
+      } else {
+        uni.showToast({
+          title: '请在微信中打开',
+          icon: 'none'
+        })
+      }
+      // #endif
+
+      // #ifdef MP-WEIXIN
+      uni.showShareMenu({
+        withShareTicket: true,
+        menus: ['shareAppMessage']
+      })
+      // #endif
+    },
+    shareToMoments() {
+      // #ifdef APP-PLUS
+      uni.share({
+        provider: 'weixin',
+        scene: 'WXSenceTimeline',
+        type: 0,
+        title: this.shareTitle,
+        summary: this.shareDesc,
+        imageUrl: this.shareImg,
+        href: this.shareUrl,
+        success: () => {
+          uni.showToast({
+            title: '分享成功',
+            icon: 'success'
+          })
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '分享失败',
+            icon: 'none'
+          })
+          console.error('分享失败:', err)
+        }
+      })
+      // #endif
+
+      // #ifdef H5
+      if (typeof wx !== 'undefined') {
+        wx.ready(() => {
+          wx.updateTimelineShareData({
+            title: this.shareTitle,
+            link: this.shareUrl,
+            imgUrl: this.shareImg,
+            success: () => {
+              uni.showToast({
+                title: '分享成功',
+                icon: 'success'
+              })
+            },
+            fail: (err) => {
+              uni.showToast({
+                title: '分享失败',
+                icon: 'none'
+              })
+              console.error('分享失败:', err)
+            }
+          })
+        })
+      } else {
+        uni.showToast({
+          title: '请在微信中打开',
+          icon: 'none'
+        })
+      }
+      // #endif
+
+      // #ifdef MP-WEIXIN
+      uni.showShareMenu({
+        withShareTicket: true,
+        menus: ['shareTimeline']
+      })
+      // #endif
+    },
+    handleReport() {
+      // 实现举报功能
+      uni.showToast({
+        title: '举报功能开发中',
+        icon: 'none'
+      })
+    },
+    qqShare() {
+      // #ifdef APP-PLUS
+      uni.share({
+        provider: 'qq',
+        type: 0,
+        title: this.shareTitle,
+        summary: this.shareDesc,
+        imageUrl: this.shareImg,
+        href: this.shareUrl,
+        success: () => {
+          uni.showToast({
+            title: '分享成功',
+            icon: 'success'
+          })
+        }
+      })
+    },
+    moreShare() {
+      // 更多分享方式
+      uni.showToast({
+        title: '更多分享功能开发中',
+        icon: 'none'
+      })
     }
   }
 }
@@ -114,24 +291,25 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #FFFFFF;
+  background-color: #f2f6f2;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   padding: 16px;
 }
 
 .share-options {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
+  display: flex;
+  flex-wrap: wrap;
   padding: 8px 16px;
 }
 
 .share-item {
+  width: 25%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
+  padding: 8px 0;
 }
 
 .share-icon {
@@ -142,10 +320,9 @@ export default {
   align-items: center;
 }
 
-.share-icon img {
+.share-icon image {
   width: 100%;
   height: 100%;
-  object-fit: contain;
 }
 
 .option-title {
@@ -153,24 +330,4 @@ export default {
   color: #333333;
   text-align: center;
 }
-
-.cancel-button {
-  position: relative;
-  margin-top: 8px;
-  padding: 12px 0;
-  text-align: center;
-  color: #666666;
-  font-size: 14px;
-}
-
-.cancel-button::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 1px;
-  background-color: #EEEEEE;
-  transform: scaleY(0.5);
-}
 </style>

components/cc-comment/cc-comment.vue

@@ -2,7 +2,7 @@
 	<view>
 		<view class="c_total">评论 {{ tableTotal }}</view>
 		<template v-if="dataList && dataList.length">
-			<view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id">
+			<view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id + index1">
 				<!-- 一级评论 -->
 				<CommonComp :data="item1" @likeClick="() => likeClick({ item1, index1 })"
 					@replyClick="() => replyClick({ item1, index1 })"

manifest.json

@@ -81,7 +81,7 @@
                 "payment" : {
                     "weixin" : {
                         "__platform__" : [ "android" ],
-                        "appid" : "wxc2e41e751946f425",
+                        "appid" : "wxfed977c88f539599",
                         "UniversalLinks" : ""
                     }
                 },
@@ -104,7 +104,7 @@
                 },
                 "share" : {
                     "weixin" : {
-                        "appid" : "wxc2e41e751946f425",
+                        "appid" : "wxfed977c88f539599",
                         "UniversalLinks" : ""
                     }
                 }

node_modules/.package-lock.json

@@ -1,5 +1,5 @@
 {
-	"name": "meetMate",
+	"name": "MoeNovaClient",
 	"version": "1.3.3",
 	"lockfileVersion": 3,
 	"requires": true,
@@ -89,12 +89,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/cl-uni": {
-			"version": "1.8.20",
-			"resolved": "https://registry.npmjs.org/cl-uni/-/cl-uni-1.8.20.tgz",
-			"integrity": "sha512-pfNdlMSYrnNfxUrW/ue9CkpI8FMgAKZiSjYqIY0iX70R+z/nBzQK7oemIQ2P7G2YauUh9Md2pV2dCvFB1gHjoA==",
-			"license": "ISC"
-		},
 		"node_modules/color-convert": {
 			"version": "1.9.3",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -307,7 +301,7 @@
 		},
 		"node_modules/postcss": {
 			"version": "8.4.47",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+			"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.47.tgz",
 			"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
 			"dev": true,
 			"funding": [
@@ -324,7 +318,6 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
-			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
 				"picocolors": "^1.1.0",
@@ -336,10 +329,9 @@
 		},
 		"node_modules/postcss-loader": {
 			"version": "8.1.1",
-			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
+			"resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-8.1.1.tgz",
 			"integrity": "sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==",
 			"dev": true,
-			"license": "MIT",
 			"dependencies": {
 				"cosmiconfig": "^9.0.0",
 				"jiti": "^1.20.0",

package-lock.json

@@ -1,12 +1,11 @@
 {
-	"name": "meetMate",
+	"name": "MoeNovaClient",
 	"version": "1.3.3",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"version": "1.3.3",
-			"dependencies": {},
 			"devDependencies": {
 				"postcss": "^8.4.47",
 				"postcss-loader": "^8.1.1"
@@ -257,10 +256,12 @@
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
 			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
 			"dev": true,
-			"funding": [{
-				"type": "github",
-				"url": "https://github.com/sponsors/ai"
-			}],
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
 			"license": "MIT",
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
@@ -310,10 +311,11 @@
 		},
 		"node_modules/postcss": {
 			"version": "8.4.47",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+			"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.47.tgz",
 			"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
 			"dev": true,
-			"funding": [{
+			"funding": [
+				{
 					"type": "opencollective",
 					"url": "https://opencollective.com/postcss/"
 				},
@@ -326,7 +328,6 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
-			"license": "MIT",
 			"dependencies": {
 				"nanoid": "^3.3.7",
 				"picocolors": "^1.1.0",
@@ -338,10 +339,9 @@
 		},
 		"node_modules/postcss-loader": {
 			"version": "8.1.1",
-			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
+			"resolved": "https://registry.npmmirror.com/postcss-loader/-/postcss-loader-8.1.1.tgz",
 			"integrity": "sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==",
 			"dev": true,
-			"license": "MIT",
 			"dependencies": {
 				"cosmiconfig": "^9.0.0",
 				"jiti": "^1.20.0",
@@ -415,4 +415,4 @@
 			}
 		}
 	}
-}
+}

package.json

@@ -16,7 +16,6 @@
 	"directories": {
 		"example": "../../temps/example_temps"
 	},
-	"dependencies": {},
 	"dcloudext": {
 		"category": [
 			"前端组件",
@@ -90,4 +89,4 @@
 		"postcss": "^8.4.47",
 		"postcss-loader": "^8.1.1"
 	}
-}
+}

pages.json

@@ -321,7 +321,8 @@
 		}, {
 			"path": "pages/my/myStar",
 			"style": {
-				"navigationBarTitleText": "我的星灵"
+				"navigationBarTitleText": "我的星灵",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/isLand/mainLand",

pages/make/index.scss

@@ -1,209 +1,277 @@
+page {
+  background: #f2f6f2;
+}
 .container {
-	min-height: 100vh;
-	background: linear-gradient(180deg, #f0f7ff 0%, #fff1f9 100%);
-	padding: 30rpx 30rpx 0 0;
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f0f7ff 0%, #fff1f9 100%);
+  padding: 0;
+  background: #f2f6f2;
 }
 
-.header {
-	padding-left: 30rpx;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 40rpx;
-
-	.title {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: #333;
-	}
-
-	.currency-area {
-		display: flex;
-		gap: 20rpx;
-
-		.coin-box,
-		.gold-box {
-			display: flex;
-			align-items: center;
-			padding: 10rpx 20rpx;
-			background: #fff;
-			border-radius: 30rpx;
-			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
-
-			image {
-				width: 40rpx;
-				height: 40rpx;
-				margin-right: 10rpx;
-			}
-		}
-
-		.coin-box {
-			background: #90d369;
-			.coin-count {
-				color: #478C2A;
-			}
-		}
-
-		.gold-box {
-			background: #FFD700;
-			.gold-count {
-				color: #B8860B;
-			}
-		}
-	}
+.header-box {
+  padding: calc(44rpx + var(--status-bar-height)) 20rpx 12rpx 36rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: url("../../static/make/wd_bg_bianjiziliao.png") center/100% auto
+    no-repeat;
+
+  .title {
+    font-size: 40rpx;
+    font-weight: bold;
+    color: #333;
+    font-family: "CustomFont" !important;
+  }
+
+  .currency-area {
+    display: flex;
+    gap: 20rpx;
+
+    .coin-box,
+    .gold-box {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      border-radius: 30rpx;
+      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+      padding: 4rpx 12rpx 8rpx 8rpx;
+      image {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 12rpx;
+      }
+    }
+  }
 }
 
 // 添加点击动画的混入
 @mixin click-animation {
-	transition: transform 0.2s ease;
-	
-	&:active {
-		transform: scale(0.95);
-	}
+  transition: transform 0.2s ease;
+
+  &:active {
+    transform: scale(0.95);
+  }
 }
 
 .card-grid {
-	padding-left: 30rpx;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	grid-template-areas: 
-		"character music"
-		"character cube";
-	gap: 20rpx;
-	margin-bottom: 40rpx;
-
-	.card {
-		@include click-animation; // 添加点击动画
-		border-radius: 20rpx;
-		position: relative;
-		overflow: hidden;
-
-		&.blue {
-			grid-area: character;
-			background: linear-gradient(to right, #59C2FF, #1B84FF);
-			height: 320rpx;
-		}
-
-		&.pink {
-			grid-area: music;
-			background: linear-gradient(to right, #FF88D1, #FF3B9A);
-			height: 150rpx;
-		}
-
-		&.purple {
-			grid-area: cube;
-			background: linear-gradient(to right, #9D8BFF, #6E54EC);
-			height: 150rpx;
-		}
-
-		&.gray {
-			background: #4B5563;
-			height: 160rpx;
-			padding: 30rpx;
-		}
-
-		&.card-large {
-			padding: 40rpx;
-		}
-
-		&.card-medium {
-			padding: 30rpx;
-		}
-
-		.card-content {
-			height: 100%;
-			position: relative;
-
-			.text-area {
-				z-index: 1;
-				position: relative;
-			}
-
-			.card-title {
-				font-size: 40rpx;
-				color: #fff;
-				font-weight: bold;
-				margin-bottom: 16rpx;
-			}
-
-			.card-desc {
-				font-size: 26rpx;
-				color: rgba(255, 255, 255, 0.9);
-			}
-		}
-
-		// AI创角卡片的特殊样式
-		&.blue .card-content {
-			.card-image {
-				position: absolute;
-				right: -20rpx;
-				bottom: -40rpx;
-				width: 280rpx;
-				height: 280rpx;
-				z-index: 0;
-			}
-
-			.star-icon {
-				position: absolute;
-				width: 40rpx;
-				height: 40rpx;
-				&.star-1 {
-					top: 20rpx;
-					right: 100rpx;
-				}
-				&.star-2 {
-					top: 80rpx;
-					right: 180rpx;
-				}
-			}
-		}
-
-		// AI灵感写歌卡片的特殊样式
-		&.pink .card-content {
-			.card-image {
-				position: absolute;
-				right: -10rpx;
-				bottom: -20rpx;
-				width: 160rpx;
-				height: 160rpx;
-				z-index: 0;
-			}
-		}
-
-		// 萌萌智绘魔方卡片的特殊样式
-		&.purple .card-content {
-			.card-image {
-				position: absolute;
-				right: -10rpx;
-				bottom: -20rpx;
-				width: 160rpx;
-				height: 160rpx;
-				z-index: 0;
-			}
-		}
-	}
-}
+  padding-left: 30rpx;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-areas:
+    "character music"
+    "character cube";
+  gap: 20rpx;
+  margin-bottom: 40rpx;
+
+  .card {
+    @include click-animation; // 添加点击动画
+    border-radius: 20rpx;
+    position: relative;
+    overflow: hidden;
+
+    &.character {
+      position: relative;
+      left: 0;
+      top: 0;
+      grid-area: character;
+      //   background: linear-gradient(to right, #59c2ff, #1b84ff);
+      background: url("../../static/make/cz_btn_chuangjue.png") center/100% auto
+        no-repeat;
+      height: 268rpx;
+      width: 346rpx;
+      padding: 34rpx 0 0 28rpx !important;
+      .text-area {
+        display: flex;
+        flex-direction: column;
+        .card-title {
+          margin-bottom: 4rpx;
+        }
+        .card-desc {
+          width: 150rpx;
+          font-weight: 400;
+          font-size: 20rpx;
+          color: rgba(255, 255, 255, 0.8);
+        }
+      }
+      .btn-box {
+        font-weight: 400;
+        font-size: 22rpx;
+        color: #1966ed;
+        background: #ffffff;
+        border-radius: 24rpx;
+        padding: 8rpx 14rpx 6rpx 16rpx;
+        display: inline-block;
+        position: absolute;
+        left: 0rpx;
+        bottom: 32rpx;
+      }
+    }
+
+    &.music {
+      grid-area: music;
+      //   background: linear-gradient(to right, #ff88d1, #ff3b9a);
+      background: url("../../static/make/cz_btn_lingganxiege.png") center/100%
+        auto no-repeat;
+      height: 124rpx;
+    }
+
+    &.cube {
+      grid-area: cube;
+      //   background: linear-gradient(to right, #9d8bff, #6e54ec);
+      background: url("../../static/make/cz_btn_zhihuimofang.png") center/100%
+        auto no-repeat;
+      height: 124rpx;
+    }
+
+    &.gray {
+      background: #4b5563;
+      height: 160rpx;
+      padding: 30rpx;
+    }
+
+    &.card-large {
+      padding: 40rpx;
+    }
+
+    &.card-medium {
+      padding: 30rpx;
+    }
 
+    .card-content {
+      height: 100%;
+      position: relative;
+
+      .text-area {
+        z-index: 1;
+        position: relative;
+      }
+
+      .card-title {
+        font-size: 36rpx;
+        color: #fff;
+        font-weight: bold;
+        margin-bottom: 8rpx;
+      }
+
+      .card-desc {
+        font-size: 26rpx;
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+
+    // AI创角卡片的特殊样式
+    &.blue .card-content {
+      .card-image {
+        position: absolute;
+        right: -20rpx;
+        bottom: -40rpx;
+        width: 280rpx;
+        height: 280rpx;
+        z-index: 0;
+      }
+
+      .star-icon {
+        position: absolute;
+        width: 40rpx;
+        height: 40rpx;
+        &.star-1 {
+          top: 20rpx;
+          right: 100rpx;
+        }
+        &.star-2 {
+          top: 80rpx;
+          right: 180rpx;
+        }
+      }
+    }
+
+    // AI灵感写歌卡片的特殊样式
+    &.pink .card-content {
+      .card-image {
+        position: absolute;
+        right: -10rpx;
+        bottom: -20rpx;
+        width: 160rpx;
+        height: 160rpx;
+        z-index: 0;
+      }
+    }
+
+    // 萌萌智绘魔方卡片的特殊样式
+    &.purple .card-content {
+      .card-image {
+        position: absolute;
+        right: -10rpx;
+        bottom: -20rpx;
+        width: 160rpx;
+        height: 160rpx;
+        z-index: 0;
+      }
+    }
+  }
+}
+.guide-title {
+  font-size: 16px;
+  color: #1f1f1f;
+  font-family: "PingFang SC-Bold";
+  padding-left: 36rpx;
+  padding-bottom: 12rpx;
+}
 .tutorial {
-	margin-left: 30rpx;
-	margin-bottom: 20rpx;
-
-	.tutorial-block {
-		@include click-animation; // 添加点击动画
-		background: #fff;
-		border-radius: 20rpx;
-		padding: 30rpx;
-		margin-bottom: 20rpx;
-
-		.tutorial-title {
-			font-size: 32rpx;
-			font-weight: bold;
-			color: #333;
-			margin-bottom: 20rpx;
-		}
-
-		.tutorial-content {
-			min-height: 200rpx;
-		}
-	}
-} 
+  padding: 0 20rpx;
+
+  .tutorial-block {
+    @include click-animation; // 添加点击动画
+    width: 100%;
+    min-height: 212rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 30rpx;
+    margin-bottom: 20rpx;
+    display: flex;
+    flex-direction: column;
+    &:nth-child(1) {
+      background: url("../../static/make/cz_bg_jiaocheng01.png") center/100%
+        auto no-repeat;
+    }
+    &:nth-child(2) {
+      background: url("../../static/make/cz_bg_jiaocheng02.png") center/100%
+        auto no-repeat;
+    }
+    &:nth-child(3) {
+      background: url("../../static/make/cz_bg_jiaocheng03.png") center/100%
+        auto no-repeat;
+    }
+    .tutorial-btn {
+      image {
+        width: 24rpx;
+        height: 24rpx;
+      }
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      font-family: "PingFang SC-Bold";
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #ffffff;
+      background: #1f1f1f;
+      padding: 0 6rpx;
+      border-radius: 8rpx;
+      line-height: 1.5;
+    }
+    .tutorial-title {
+      font-weight: 400;
+      font-size: 34rpx;
+      color: #1f1f1f;
+		margin-top: 10rpx;
+		margin-bottom: 10rpx;
+      font-family: "PingFang SC-Bold";
+    }
+
+    .tutorial-content {
+      font-weight: 400;
+      font-size: 11px;
+      color: #1f1f1f;
+    }
+  }
+}

pages/make/index.vue

@@ -1,37 +1,40 @@
 <template>
 	<view class="container">
-		<!-- 顶部标题和积分区 -->
-		<view class="header">
+
+		<!-- 顶部导航栏 -->
+		<view class="header-box">
 			<text class="title">星球造物</text>
 			<view class="currency-area">
 				<view class="coin-box">
 					<image src="/static/icon/coin_m.png" mode="aspectFit"></image>
-					<text>{{myinfo.num_gmm}}</text>
+					<text>{{ myinfo.num_gmm }}</text>
 				</view>
 				<view class="gold-box">
 					<image src="/static/icon/coin_cd.png" mode="aspectFit"></image>
-					<text>{{myinfo.num_gmd}}</text>
+					<text>{{ myinfo.num_gmd }}</text>
 				</view>
 			</view>
 		</view>
 
+
 		<!-- 功能卡片区域 -->
 		<view class="card-grid">
 			<!-- AI创角卡片 -->
-			<view class="card card-large blue" @click="handleCardClick('character')">
+			<view class="card card-large character" @click="handleCardClick('character')">
 				<view class="card-content">
 					<view class="text-area">
 						<text class="card-title">AI创角</text>
 						<text class="card-desc">生成独一无二的星球成员</text>
 					</view>
-					<image src="/static/icon/star.png" class="star-icon star-1" mode="aspectFit"></image>
+					<view class="btn-box">立即查看</view>
+					<!-- <image src="/static/icon/star.png" class="star-icon star-1" mode="aspectFit"></image>
 					<image src="/static/icon/star.png" class="star-icon star-2" mode="aspectFit"></image>
-					<image src="/static/make/character.png" class="card-image" mode="aspectFit"></image>
+					<image src="/static/make/character.png" class="card-image" mode="aspectFit"></image> -->
 				</view>
 			</view>
 
 			<!-- AI灵感写歌卡片 -->
-			<view class="card card-medium pink" @click="handleCardClick('music')">
+			<view class="card card-medium music" @click="handleCardClick('music')">
 				<view class="card-content">
 					<view class="text-area">
 						<text class="card-title">AI灵感写歌</text>
@@ -42,7 +45,7 @@
 			</view>
 
 			<!-- 萌萌智绘魔方卡片 -->
-			<view class="card card-medium purple" @click="handleCardClick('cube')">
+			<view class="card card-medium cube" @click="handleCardClick('cube')">
 				<view class="card-content">
 					<view class="text-area">
 						<text class="card-title">萌萌智绘魔方</text>
@@ -52,39 +55,20 @@
 				</view>
 			</view>
 
-			<!-- AI造物卡片 -->
-			<view class="card card-small gray" @click="handleCardClick('build')">
-				<view class="card-content">
-					<text class="card-title">AI造物</text>
-					<text class="card-desc">一键生成想要的建筑</text>
-				</view>
-			</view>
-
-			<!-- 潮能充能站卡片 -->
-			<view class="card card-small gray" @click="handleCardClick('build')">
-				<view class="card-content">
-					<text class="card-title">潮能充能站</text>
-					<text class="card-desc">一键生成想要的建筑</text>
-				</view>
-			</view>
-
-			<!-- 星轨预测卡片 -->
-			<view class="card card-small gray" @click="handleCardClick('build')">
-				<view class="card-content">
-					<text class="card-title">星轨预测</text>
-					<text class="card-desc">AI大数据综合星座为你测算</text>
-				</view>
-			</view>
 		</view>
-
+		<view class="guide-title"> 引导教程</view>
 		<!-- 引导教程区域 -->
 		<view class="tutorial">
-			<view class="tutorial-block" @click="handleTutorialClick(index)" v-for="(tutorial, index) in 5"
+			<view class="tutorial-block " @click="handleTutorialClick(index)" v-for="(tutorial, index) in 3"
 				:key="index">
-				<text class="tutorial-title">引导教程{{ index + 1 }}</text>
-				<view class="tutorial-content">
-					<!-- 教程内容将在这里添加 -->
-				</view>
+				<text class="tutorial-btn-box">
+					<view class="tutorial-btn"> 
+						<image src="../../static/make/cz_icon_guanfangjiaocheng.png"></image>
+						<text>官方教程</text>
+					</view>
+				</text>
+				<text class="tutorial-title"> 萌创星球教程</text>
+				<view class="tutorial-content">教你如何创作内容，激发创作灵感</view>
 			</view>
 		</view>
 		<tabbar-view :tabbars="tabbars" :currentIndex="1" ref="tabbar"></tabbar-view>
@@ -92,77 +76,77 @@
 </template>
 
 <script>
-	import tabbarView from "@/components/tabbar/tabbar.vue";
-	import tabbar from "@/mixins/tabbar";
-	export default {
-		components: {
-			tabbarView,
+import tabbarView from "@/components/tabbar/tabbar.vue";
+import tabbar from "@/mixins/tabbar";
+export default {
+	components: {
+		tabbarView,
+	},
+	mixins: [tabbar],
+	data() {
+		return {
+			myinfo: {},
+			windowHeight: uni.getWindowInfo().windowHeight,
+			tabCurrent: 0
+		}
+	},
+	onLoad() { },
+	onShow() {
+		this.getMyInfo();
+	},
+
+	// 下拉刷新数据
+	methods: {
+		getMyInfo() {
+			uni.request({
+				url: this.$apiHost + '/My/getnum',
+				method: 'GET',
+				header: {
+					'content-type': 'application/json',
+					'sign': getApp().globalData.headerSign
+				},
+				data: {
+					uuid: getApp().globalData.uuid
+				},
+				success: (res) => {
+					console.log("获取用户信息：", res.data);
+					this.myinfo = res.data
+				}
+			})
+
 		},
-		mixins: [tabbar],
-		data() {
-			return {
-				myinfo: {},
-				windowHeight: uni.getWindowInfo().windowHeight,
-				tabCurrent: 0
-			}
+		tabChange(index) {
+			this.tabCurrent = index;
 		},
-		onLoad() {},
-		onShow() {
-			this.getMyInfo();
+		handleCardClick(type) {
+			console.log('Card clicked:', type);
+			uni.$emit('check_login', () => {
+				if (type == 'cube') {
+					uni.navigateTo({
+						url: '/pages/makedetail/makeImgDetail'
+					})
+				} else if (type == 'music') {
+					uni.navigateTo({
+						url: '/pages/makedetail/makeMusicDetail'
+					})
+				} else if (type == 'character') {
+					uni.navigateTo({
+						url: '/pages/my/myStar'
+					})
+				} else {
+					uni.showToast({
+						title: '待开放'
+					})
+				}
+			})
 		},
-
-		// 下拉刷新数据
-		methods: {
-			getMyInfo() {
-				uni.request({
-					url: this.$apiHost + '/My/getnum',
-					method: 'GET',
-					header: {
-						'content-type': 'application/json',
-						'sign': getApp().globalData.headerSign
-					},
-					data: {
-						uuid: getApp().globalData.uuid
-					},
-					success: (res) => {
-						console.log("获取用户信息：", res.data);
-						this.myinfo = res.data
-					}
-				})
-
-			},
-			tabChange(index) {
-				this.tabCurrent = index;
-			},
-			handleCardClick(type) {
-				console.log('Card clicked:', type);
-				uni.$emit('check_login', () => {
-					if (type == 'cube') {
-						uni.navigateTo({
-							url: '/pages/makedetail/makeImgDetail'
-						})
-					} else if (type == 'music') {
-						uni.navigateTo({
-							url: '/pages/makedetail/makeMusicDetail'
-						})
-					} else if (type == 'character') {
-						uni.navigateTo({
-							url: '/pages/my/myStar'
-						})
-					} else {
-						uni.showToast({
-							title: '待开放'
-						})
-					}
-				})
-			},
-			handleTutorialClick(index) {
-				console.log('Tutorial clicked:', index + 1);
-			}
+		handleTutorialClick(index) {
+			console.log('Tutorial clicked:', index + 1);
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	@import './index.scss';
+@import './index.scss';
 </style>

pages/make/make.scss

@@ -1,236 +1,283 @@
+.container {
+  padding-bottom: 144rpx;
+}
+.swiper {
+  height: 100%;
+}
+
+.swiper-item {
+  height: 100%;
+}
+.backup {
+  position: fixed;
+  left: 40rpx;
+  width: 80rpx;
+  height: 80rpx;
+  top: calc(30rpx + var(--status-bar-height));
+}
+
+.setps-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background: #f7f7f8;
+
+  &-title_image {
+    width: 100%;
+    height: calc(308rpx + var(--status-bar-height));
+  }
+
+  &-top {
+    width: 100%;
+    position: absolute;
+    top: calc(140rpx + var(--status-bar-height));
+    border-top-left-radius: 60rpx;
+    border-top-right-radius: 60rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f7f7f8;
+
+    &_title {
+      margin-top: 73rpx;
+      margin-bottom: 10rpx;
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #3d3d3d;
+    }
+
+    &_line {
+      width: 600rpx;
+      height: 5rpx;
+      border-radius: 5rpx;
+      background: #d8d8d8;
+      margin-bottom: 30rpx;
+
+      &__lineTow {
+        width: 120rpx;
+        height: 5rpx;
+        border-radius: 5rpx;
+        background: #000000;
+      }
+      &__lineTow2 {
+        width: 120rpx;
+        margin-left: 120rpx;
+        height: 5rpx;
+        border-radius: 5rpx;
+        background: #000000;
+      }
+      &__lineTow3 {
+        width: 120rpx;
+        margin-left: 240rpx;
+        height: 5rpx;
+        border-radius: 5rpx;
+        background: #000000;
+      }
+      &__lineTow4 {
+        width: 120rpx;
+        margin-left: 360rpx;
+        height: 5rpx;
+        border-radius: 5rpx;
+        background: #000000;
+      }
+      &__lineTow5 {
+        width: 120rpx;
+        margin-left: 480rpx;
+        height: 5rpx;
+        border-radius: 5rpx;
+        background: #000000;
+      }
+    }
+
+    &_desc {
+      font-size: 42rpx;
+      font-weight: bold;
+      color: #3d3d3d;
+    }
+  }
 
-	.container{
-		padding-bottom: 144rpx;
-	}
-	.swiper {
-		height: 100%;
-	}
-
-	.swiper-item {
-		height: 100%;
-	}
-	.backup {
-		position: fixed;left:40rpx;width:80rpx;height:80rpx;
-		top: calc(30rpx + var(--status-bar-height));
-	}
-
-	.setps-container {
-		width: 100vw;
-		height: 100vh;
-		position: relative;
-		background: #F7F7F8;
-
-
-		&-title_image {
-			width: 100%;
-			height: calc(308rpx + var(--status-bar-height));
-		}
-
-		&-top {
-			width: 100%;
-			position: absolute;
-			top: calc(140rpx + var(--status-bar-height));
-			border-top-left-radius: 60rpx;
-			border-top-right-radius: 60rpx;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			background: #F7F7F8;
-
-			&_title {
-				margin-top: 73rpx;
-				margin-bottom: 10rpx;
-				font-size: 36rpx;
-				font-weight: bold;
-				color: #3D3D3D;
-			}
-
-			&_line {
-				width: 600rpx;
-				height: 5rpx;
-				border-radius: 5rpx;
-				background: #D8D8D8;
-				margin-bottom: 30rpx;
-
-				&__lineTow {
-					width: 120rpx;
-					height: 5rpx;
-					border-radius: 5rpx;
-					background: #000000;
-				}
-				&__lineTow2 {
-					width: 120rpx;margin-left:120rpx;
-					height: 5rpx;
-					border-radius: 5rpx;
-					background: #000000;
-				}
-				&__lineTow3 {
-					width: 120rpx;margin-left:240rpx;
-					height: 5rpx;
-					border-radius: 5rpx;
-					background: #000000;
-				}
-				&__lineTow4 {
-					width: 120rpx;margin-left:360rpx;
-					height: 5rpx;
-					border-radius: 5rpx;
-					background: #000000;
-				}
-				&__lineTow5 {
-					width: 120rpx;margin-left:480rpx;
-					height: 5rpx;
-					border-radius: 5rpx;
-					background: #000000;
-				}
-			}
-
-			&_desc {
-				font-size: 42rpx;
-				font-weight: bold;
-				color: #3D3D3D;
-			}
-		}
-
-		&-center {
-			width: 100%;
-			height: 600rpx;
-			margin-top: 100rpx;
-			display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
-			.avator {
-				width:380rpx;height:380rpx;
-			}
-			.scroll-text {
-			  width:700rpx;height: 500rpx;margin:25rpx;
-			  overflow: scroll;
-			}
-			.cucang {
-				font-size:38rpx;text-align: center;padding:30rpx;
-			}
-
-			.scroll-text-content {
-				color:#333;animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */
-			}
-			.bg-content {
-				display: flex;flex-direction: column;justify-content: center;align-items: center;
-				.avator {
-					 animation: spin 5s linear infinite;
-				}
-			}
-
-		}
-
-		&-bottom {
-			width: 100%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-
-			&__btn {
-				width: 516rpx;
-				height: 88rpx;
-				border-radius: 66rpx;
-				background: #AEE500;
-
-				font-size: 36rpx;
-				font-weight: 600;
-				color: #3D3D3D;
-				text-align: center;
-				line-height: 88rpx;
-				text {
-					color:#666;font-size: 24rpx;
-				}
-			}
-
-			&__tips {
-				font-size: 23rpx;
-				font-weight: 500;
-				color: #A3A3A3;
-				margin-bottom: 16rpx;
-			}
-		}
-
-
-
-
-	}
+  &-center {
+    width: 100%;
+    height: 600rpx;
+    margin-top: 100rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    .avator {
+      width: 380rpx;
+      height: 380rpx;
+    }
+    .scroll-text {
+      width: 700rpx;
+      height: 500rpx;
+      margin: 25rpx;
+      overflow: scroll;
+    }
+    .cucang {
+      font-size: 38rpx;
+      text-align: center;
+      padding: 30rpx;
+    }
+
+    .scroll-text-content {
+      color: #333;
+      animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */
+    }
+    .bg-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .avator {
+        animation: spin 5s linear infinite;
+      }
+    }
+  }
+
+  &-bottom {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &__btn {
+      width: 516rpx;
+      height: 88rpx;
+      border-radius: 66rpx;
+      background: #aee500;
+
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #3d3d3d;
+      text-align: center;
+      line-height: 88rpx;
+      text {
+        color: #666;
+        font-size: 24rpx;
+      }
+    }
+
+    &__tips {
+      font-size: 23rpx;
+      font-weight: 500;
+      color: #a3a3a3;
+      margin-bottom: 16rpx;
+    }
+  }
+}
 .pop {
-	position: fixed;left:0;top:0;width:750rpx;height:100vh;
-	background-color: #fff;
-	 .blurred-background {
-		 position: absolute;
-	      width: 750rpx;
-	      height: 100vh;
-	      background-image: url('/static/make/1_12.png'); /* 替换为你的图片URL */
-	      background-size: cover;
-	      filter: blur(10px); /* 调整模糊程度 */
-		  z-index:1;
-	}
-	.xinxiang {
-		position: absolute;height:100vh;width:100vh;
-		z-index:99;
-	}
-	.play_video {
-		position: absolute;left:30rpx;top:40%;width:80rpx;height:80rpx;
-		z-index:100;
-	}
-	.backup {
-		position: absolute;left:40rpx;width:80rpx;height:80rpx;
-		z-index:9999;
-		top: calc(50rpx + var(--status-bar-height));
-	}
-	.cucang {
-		position: absolute;top:220rpx;z-index: 9999;
-		padding:30rpx;color:#fff;font-size: 38rpx;text-align: center;
-		animation: shine 1s ease-in-out infinite;
-		text-shadow: 0 0 10px #fff;
-	}
-	
-	.scroll-text {
-	  position: absolute;bottom:20rpx;z-index: 9999;
-	  width:700rpx;height: 500rpx;margin:25rpx;
-	  overflow: hidden;
-	}
-
-	.scroll-text-content {
-	  position: absolute;
-	  bottom: 0;color:#fff;
-	  animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */
-	}
-	
-	.video-container {
-	      position: relative;
-	      display: inline-block;
-		  width:100%;height:100%;
-	    }
-	
-	    .video-text {
-	      position: absolute;
-	      top: 100rpx;
-	      left: 20rpx;width:100%;
-	      transform: translate(-50%, -50%);
-	      color: #ff0000;
-	      font-size: 24px;
-	      text-shadow: 2px 2px 4px #000;z-index: 99999;
-	    }
-
-	@keyframes scroll {
-	  0% {
-		transform: translateY(100%); /* 从底部开始 */
-	  }
-	  100% {
-		transform: translateY(-50%); /* 滚动到顶部 */
-	  }
-	}
-		
-		
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 750rpx;
+  height: 100vh;
+  background-color: #fff;
+  .blurred-background {
+    position: absolute;
+    width: 750rpx;
+    height: 100vh;
+    background-image: url("/static/make/1_12.png"); /* 替换为你的图片URL */
+    background-size: cover;
+    filter: blur(10px); /* 调整模糊程度 */
+    z-index: 1;
+  }
+  .xinxiang {
+    position: absolute;
+    height: 100vh;
+    width: 100vh;
+    z-index: 99;
+  }
+  .play_video {
+    position: absolute;
+    left: 30rpx;
+    top: 40%;
+    width: 80rpx;
+    height: 80rpx;
+    z-index: 100;
+  }
+  .backup {
+    position: absolute;
+    left: 40rpx;
+    width: 80rpx;
+    height: 80rpx;
+    z-index: 9999;
+    top: calc(50rpx + var(--status-bar-height));
+  }
+  .cucang {
+    position: absolute;
+    top: 220rpx;
+    z-index: 9999;
+    padding: 30rpx;
+    color: #fff;
+    font-size: 38rpx;
+    text-align: center;
+    animation: shine 1s ease-in-out infinite;
+    text-shadow: 0 0 10px #fff;
+  }
+
+  .scroll-text {
+    position: absolute;
+    bottom: 20rpx;
+    z-index: 9999;
+    width: 700rpx;
+    height: 500rpx;
+    margin: 25rpx;
+    overflow: hidden;
+  }
+
+  .scroll-text-content {
+    position: absolute;
+    bottom: 0;
+    color: #fff;
+    animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */
+  }
+
+  .video-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .video-text {
+    position: absolute;
+    top: 100rpx;
+    left: 20rpx;
+    width: 100%;
+    transform: translate(-50%, -50%);
+    color: #ff0000;
+    font-size: 24px;
+    text-shadow: 2px 2px 4px #000;
+    z-index: 99999;
+  }
+
+  @keyframes scroll {
+    0% {
+      transform: translateY(100%); /* 从底部开始 */
+    }
+    100% {
+      transform: translateY(-50%); /* 滚动到顶部 */
+    }
+  }
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 @keyframes shine {
-  0% { text-shadow: 0 0 10px #fff; }
-  50% { text-shadow: 0 0 20px #ff00ff, 0 0 30px #ff0000; }
-  100% { text-shadow: 0 0 10px #fff; }
-}
+  0% {
+    text-shadow: 0 0 10px #fff;
+  }
+  50% {
+    text-shadow: 0 0 20px #ff00ff, 0 0 30px #ff0000;
+  }
+  100% {
+    text-shadow: 0 0 10px #fff;
+  }
+}

pages/makedetail/makeDetail.vue

@@ -268,8 +268,7 @@ export default {
 			this.$refs.openContentPopUpWindow.open();
 		},
 		closeContentPopUpWindow() {
-			this.$refs.openContentPopUpWindow.close();
-
+			this.$refs.openContentPopUpWindow.close(); 
 		},
 		// 获取图片第一个像素的RGB值
 		getImagePixelColor() {

pages/my/my.vue

@@ -1,225 +1,353 @@
 <template>
-	<view class="page">
-		<view class="topBody">
-			<view class="header">
-				<view class="card-box">
-					<view class="card-top">
-						<view class="top-box">
-							<view class="hello-box"> Hello! </view>
-							<view class="settingBtn-box">
-								<image @click="clickShare()" src="@/static/me/wd_icon_fenxian.png" mode=""></image>
-								<image src="@/static/me/wd_icon_shezhi.png" mode="" @click="navigateToSettings"></image>
-							</view>
-						</view>
-						<view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
-							<view class="userinfo-left">
-								<CircleAvatar class="avator" :src="myinfo.avator"></CircleAvatar>
-							</view>
-							<view class="userinfo-right">
-								<view class="nickname">
-									<text class="one-omit">{{ myinfo.nickname }}</text>
-									<image src="../../static/icon/wd_icon_nan.png" mode="widthFix"
-										v-if="myinfo.sex_id == 1" />
-									<image src="../../static/icon/wd_icon_nv.png" mode="widthFix"
-										v-else-if="myinfo.sex_id == 2" />
-									<view class="level">Lv{{ myinfo.my_level }}</view>
-								</view>
-								<view class="label">
-									<view v-for="(item, index) in aihao_tags" :key="index + item">
-										{{ item }}
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="intro_row">
-							<block v-if="myinfo.content == ''">
-								<text class="intro_text two-omit">添加简介</text>
-								<image src="@/static/icon/wd_icon_edit.png" mode="widthFix" class="add_icon" />
-							</block>
-							<uv-text v-else class="intro_text two-omit">
-								{{ myinfo.content }}
-							</uv-text>
+  <view class="page">
+    <view class="topBody">
+      <view class="header">
+        <view class="card-box">
+          <view class="card-top">
+            <view class="top-box">
+              <view class="hello-box"> Hello! </view>
+              <view class="settingBtn-box">
+                <image
+                  @click="clickShare()"
+                  src="@/static/me/wd_icon_fenxian.png"
+                  mode=""
+                ></image>
+                <image
+                  src="@/static/me/wd_icon_shezhi.png"
+                  mode=""
+                  @click="navigateToSettings"
+                ></image>
+              </view>
+            </view>
+            <view class="userinfo-box" @click="goPage('/pages/my/editInfo')">
+              <view class="userinfo-left">
+                <CircleAvatar
+                  class="avator"
+                  :src="myinfo.avator"
+                ></CircleAvatar>
+              </view>
+              <view class="userinfo-right">
+                <view class="nickname">
+                  <text class="one-omit">{{ myinfo.nickname }}</text>
+                  <image
+                    src="../../static/icon/wd_icon_nan.png"
+                    mode="widthFix"
+                    v-if="myinfo.sex_id == 1"
+                  ></image>
+                  <image
+                    src="../../static/icon/wd_icon_nv.png"
+                    mode="widthFix"
+                    v-else-if="myinfo.sex_id == 2"
+                  ></image>
+                  <view class="level">Lv{{ myinfo.my_level }}</view>
+                </view>
+                <view class="label">
+                  <view v-for="(item, index) in aihao_tags" :key="index + item">
+                    {{ item }}
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="intro_row">
+              <block v-if="myinfo.content == ''">
+                <text class="intro_text two-omit">添加简介</text>
+                <image
+                  src="@/static/icon/wd_icon_edit.png"
+                  mode="widthFix"
+                  class="add_icon"
+                ></image>
+              </block>
+              <uv-text v-else class="intro_text two-omit">
+                {{ myinfo.content }}
+              </uv-text>
+            </view>
+            <view class="bom">
+              <view class="follow_info" @click="navigateToFollow">
+                <view class="follow-box">
+                  <view class="num">{{ myinfo.num_attention }}</view>
+                  <view class="label">关注</view>
+                </view>
+                <view class="separator"></view>
+                <view class="follow-box">
+                  <view class="num">{{ myinfo.num_fans }}</view>
+                  <view class="label">粉丝</view>
+                </view>
+                <view class="separator"></view>
+                <view class="follow-box">
+                  <view class="num">{{ myinfo.num_like }}</view>
+                  <view class="label">获赞</view>
+                </view>
+              </view>
+              <view class="points-box">
+                <view class="points">
+                  <image src="@/static/icon/wd_icon_coin.png" mode=""></image>
+                  {{ myinfo.num_gmm }}
+                </view>
+                <view class="points">
+                  <image
+                    src="@/static/icon/wd_icon_xingyuan.png"
+                    mode=""
+                  ></image>
+                  {{ myinfo.num_gmd }}
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="card-bom" @click="goPage('/pages/vip/index')">
+            <view class="content-box">
+              <image
+                v-if="false"
+                src="@/static/me/icon-vip2.png"
+                mode=""
+              ></image>
+              <image
+                v-else-if="0"
+                src="@/static/me/icon-vip1.png"
+                mode=""
+              ></image>
+              <image v-else src="@/static/me/icon-vip0.png" mode=""></image>
+              <text v-if="true">开启专属会员权益</text>
+              <text v-else>会员权益生效中</text>
+            </view>
+            <image src="@/static/me/wd_icon_jiantou.png" mode=""></image>
+          </view>
+        </view>
+      </view>
 
-						</view>
-						<view class="bom">
-							<view class="follow_info" @click="navigateToFollow">
-								<view class="follow-box">
-									<view class="num">{{ myinfo.num_attention }}</view>
-									<view class="label">关注</view>
-								</view>
-								<view class="separator"></view>
-								<view class="follow-box">
-									<view class="num">{{ myinfo.num_fans }}</view>
-									<view class="label">粉丝</view>
-								</view>
-								<view class="separator"></view>
-								<view class="follow-box">
-									<view class="num">{{ myinfo.num_like }}</view>
-									<view class="label">获赞</view>
-								</view>
-							</view>
-							<view class="points-box">
-								<view class="points">
-									<image src="@/static/icon/wd_icon_coin.png" mode=""></image>
-									{{ myinfo.num_gmm }}
-								</view>
-								<view class="points">
-									<image src="@/static/icon/wd_icon_xingyuan.png" mode=""></image>
-									{{ myinfo.num_gmd }}
-								</view>
-							</view>
-						</view>
-					</view>
-					<view class="card-bom" @click="goPage('/pages/vip/index')">
-						<view class="content-box">
-							<image v-if="false" src="@/static/me/icon-vip2.png" mode=""></image>
-							<image v-else-if="0" src="@/static/me/icon-vip1.png" mode=""></image>
-							<image v-else src="@/static/me/icon-vip0.png" mode=""></image>
-							<text v-if="true">开启专属会员权益</text>
-							<text v-else>会员权益生效中</text>
-						</view>
-						<image src="@/static/me/wd_icon_jiantou.png" mode=""></image>
-					</view>
-				</view>
-			</view>
+      <view class="myinfo">
+        <!-- <view class="line"></view> -->
+        <view class="tablist">
+          <view
+            class="item"
+            :class="{ active: firstLevelNavActive === 0 }"
+            @click="firstLevelNavActiveSwitch(0)"
+            >我的作品
+            <view class="indicator-triangle"> </view>
+          </view>
+          <view
+            class="item"
+            :class="{ active: firstLevelNavActive === 1 }"
+            @click="firstLevelNavActiveSwitch(1)"
+            >我的帖子
+            <view class="indicator-triangle"> </view>
+          </view>
+        </view>
+        <!-- 作品列表 -->
+        <template v-if="firstLevelNavActive == 0">
+          <view class="line"></view>
+          <view class="subtitle">
+            <view
+              class="item"
+              :class="{ active: activeTab === 0 }"
+              @click="switchTab(0)"
+            >
+              作品
+            </view>
+            <view
+              class="item"
+              :class="{ active: activeTab === 1 }"
+              @click="switchTab(1)"
+            >
+              生成中
+            </view>
+          </view>
+          <view
+            class="numlist1"
+            v-if="activeTab === 0"
+            style="margin-top: 30rpx"
+          >
+            <WorkItem
+              v-for="(item, index) in worksList"
+              :secrecy="true"
+              :subtitle="true"
+              :key="index"
+              :item="item"
+              @click="goWork(item)"
+            />
+          </view>
+          <view
+            class="numlist2"
+            v-if="activeTab === 1"
+            style="margin-top: 30rpx"
+          >
+            <view
+              class="item"
+              v-for="(item, index) in worksList"
+              :key="index"
+              style="margin-bottom: 28rpx"
+            >
+              <view class="num" @click="goWork(item)">
+                <WorkItem :item="item" style="margin-bottom: 12rpx" />
 
-			<view class="myinfo">
-				<!-- <view class="line"></view> -->
-				<view class="tablist">
-					<view class="item" :class="{ active: firstLevelNavActive === 0 }"
-						@click="firstLevelNavActiveSwitch(0)">我的作品
-						<view class="indicator-triangle"> </view>
-					</view>
-					<view class="item" :class="{ active: firstLevelNavActive === 1 }"
-						@click="firstLevelNavActiveSwitch(1)">我的帖子
-						<view class="indicator-triangle"> </view>
-					</view>
-				</view>
-				<!-- 作品列表 -->
-				<template v-if="firstLevelNavActive == 0">
-					<view class="line"></view>
-					<view class="subtitle">
-						<view class="item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
-							作品
-						</view>
-						<view class="item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
-							生成中
-						</view>
-					</view>
-					<view class="numlist1" v-if="activeTab === 0" style="margin-top: 30rpx">
-						<WorkItem v-for="(item, index) in worksList" :secrecy="true" :subtitle="true" :key="index"
-							:item="item" @click="goWork(item)" />
-					</view>
-					<view class="numlist2" v-if="activeTab === 1" style="margin-top: 30rpx">
-						<view class="item" v-for="(item, index) in worksList" :key="index" style="margin-bottom: 28rpx">
-							<view class="num" @click="goWork(item)">
-								<WorkItem :item="item" style="margin-bottom: 12rpx;" />
+                <image
+                  class="incomplete-bg"
+                  v-if="item.status != 9"
+                  src="@/static/me/wd_bg_zhizuozhong.png"
+                ></image>
+                <view class="maskLayer"></view>
+                <!-- 当activeTab为1时显示队列状态 -->
+                <view class="queue-status">
+                  <!-- 排队中 -->
+                  <view v-if="item.status === 1" class="status-text">
+                    <image
+                      class="state-img"
+                      src="@/static/me/wd_icon_paiduizhong.png"
+                    ></image>
+                  </view>
+                  <!-- 生成失败 -->
+                  <view
+                    v-if="item.status === 3 || item.status === 4"
+                    class="status-text"
+                  >
+                    <image
+                      class="state-img"
+                      src="@/static/me/wd_icon_zhizuoshibai.png"
+                    ></image>
+                  </view>
+                  <!-- 制作中 -->
+                  <view v-else-if="item.status < 9" class="status-text">
+                    <image
+                      class="state-img"
+                      src="@/static/me/wd_icon_zhizuozhong.png"
+                    ></image>
+                  </view>
+                  <!-- 创作完成 -->
+                  <view v-else-if="item.status === 9" class="status-text">
+                    <image
+                      class="state-img"
+                      src="@/static/me/wd_icon_chuangzuowancheng.png"
+                    ></image>
+                  </view>
+                </view>
+                <view
+                  class="name"
+                  style="
+                    font-family: 'PingFang SC-Medium';
+                    font-weight: 500;
+                    font-size: 28rpx;
+                    color: #1a4d2e;
+                  "
+                >
+                  {{ item.title || item.description || "作品" + index }}</view
+                >
 
-								<image class="incomplete-bg" v-if="item.status != 9"
-									src="@/static/me/wd_bg_zhizuozhong.png" />
-								<view class="maskLayer"></view>
-								<!-- 当activeTab为1时显示队列状态 -->
-								<view class="queue-status">
-
-									<!-- 排队中 -->
-									<view v-if="item.status === 1" class="status-text">
-										<!-- 排队中 -->
-										<image class="state-img" src="@/static/me/wd_icon_paiduizhong.png"></image>
-										<!-- ({{ item.queue_position }}/{{ item.all_position }}) -->
-									</view>
-									<!-- 生成失败 -->
-									<view v-if="item.status === 3 || item.status === 4" class="status-text">
-										<!-- 生成失败 -->
-										<image class="state-img" src="@/static/me/wd_icon_zhizuoshibai.png"></image>
-									</view>
-									<!-- 制作中 -->
-									<view v-else-if="item.status < 9" class="status-text">
-										<!-- 制作中 -->
-										<image class="state-img" src="@/static/me/wd_icon_zhizuozhong.png"></image>
-									</view>
-									<!-- 创作完成 -->
-									<view v-else-if="item.status === 9" class="status-text">
-										<!-- 创作完成 -->
-										<image class="state-img" src="@/static/me/wd_icon_chuangzuowancheng.png">
-										</image>
-									</view>
-								</view>
-								<view class="name"
-									style="font-family: 'PingFang SC-Medium';font-weight: 500;font-size: 28rpx;color: #1A4D2E;">
-									{{
-										item.title || item.description || "作品" + index
-									}}</view>
-
-								<!-- 显示任务类型标签 -->
-								<view class="task-type-tag">
-									<image style="width: 120rpx; height:36rpx; " v-if="item.task_type === 1"
-										src="@/static/me/wd_icon_lingganchuangzuo.png" />
-									<image style="width: 82rpx; height:36rpx;" v-else-if="item.task_type === 2"
-										src="@/static/me/wd_icon_yinyue.png" />
-									<!-- <text v-if="item.task_type === 1">灵感创作</text>
+                <!-- 显示任务类型标签 -->
+                <view class="task-type-tag">
+                  <image
+                    style="width: 120rpx; height: 36rpx"
+                    v-if="item.task_type === 1"
+                    src="@/static/me/wd_icon_lingganchuangzuo.png"
+                  ></image>
+                  <image
+                    style="width: 82rpx; height: 36rpx"
+                    v-else-if="item.task_type === 2"
+                    src="@/static/me/wd_icon_yinyue.png"
+                  ></image>
+                  <!-- <text v-if="item.task_type === 1">灵感创作</text>
                   <text v-else-if="item.task_type === 2">音乐</text> -->
-								</view>
-							</view>
-						</view>
-					</view>
-				</template>
-				<template v-else>
-					<view class="numlist2" style="margin-top: 30rpx">
-						<view class="item" v-for="(item, index) in worksList" :key="index"
-							style="margin-bottom: 15rpx;">
-							<view class="num" @click="goWork2(item)">
-								<WorkItem :item="item" style="margin-bottom: 20rpx;" />
-
-								<view class="incomplete-bg" style="background: #f8f9fa;"></view>
-								<image class="incomplete-bg" v-if="item.status != 1"
-									src="@/static/me/wd_bg_zhizuozhong.png" />
-								<image class="  incomplete-bg2" v-else-if="item.status == 1" :src="item.image"
-									mode="widthFix" />
-
-								<view class="maskLayer" v-if="item.status != 1"></view>
-								<!-- 当activeTab为1时显示队列状态 -->
-								<view class="queue-status">
+                </view>
+              </view>
+            </view>
+          </view>
+        </template>
+        <template v-else>
+          <view class="numlist2" style="margin-top: 30rpx">
+            <view
+              class="item"
+              v-for="(item, index) in worksList"
+              :key="index"
+              style="margin-bottom: 15rpx"
+            >
+              <view class="num" @click="goWork2(item)">
+                <WorkItem :item="item" style="margin-bottom: 20rpx" />
 
-									<!-- 已发布 -->
-									<view v-if="item.status == 1" class="status-text">
-										<!-- <image class="state-img" src="@/static/me/wd_icon_paiduizhong.png"></image> -->
-										<!-- ({{ item.queue_position }}/{{ item.all_position }}) -->
-									</view>
-									<!-- 待审核 -->
-									<view v-if="item.status == 2 || item.status === 4" class="status-text">
-										<image class="state-img" src="@/static/me/wd_icon_shenhezhong.png"></image>
-									</view>
-									<!-- 审核失败 -->
-									<view v-else-if="item.status == 3" class="status-text">
-										<image class="state-img" src="@/static/me/wd_icon_fabushibai.png"></image>
-									</view>
+                <view class="incomplete-bg" style="background: #f8f9fa"></view>
+                <image
+                  class="incomplete-bg"
+                  v-if="item.status != 1"
+                  src="@/static/me/wd_bg_zhizuozhong.png"
+                ></image>
+                <image
+                  class="incomplete-bg2"
+                  v-else-if="item.status == 1"
+                  :src="item.image"
+                  mode="widthFix"
+                ></image>
 
-								</view>
-								<view class="name"
-									style="font-family: 'PingFang SC-Medium';font-weight: 500;font-size: 28rpx;color: #1A4D2E;">
-									{{ item.title || item.description || "作品" + index }}</view>
-							</view>
-						</view>
-					</view>
-				</template>
-				<!-- 加载更多提示 -->
-				<!-- <view class="loading-more" v-if="isLoading">加载中...</view>
+                <view class="maskLayer" v-if="item.status != 1"></view>
+                <!-- 当activeTab为1时显示队列状态 -->
+                <view class="queue-status">
+                  <!-- 已发布 -->
+                  <view v-if="item.status == 1" class="status-text">
+                    <!-- <image class="state-img" src="@/static/me/wd_icon_paiduizhong.png"></image> -->
+                    <!-- ({{ item.queue_position }}/{{ item.all_position }}) -->
+                  </view>
+                  <!-- 待审核 -->
+                  <view
+                    v-if="item.status == 2 || item.status === 4"
+                    class="status-text"
+                  >
+                    <image
+                      class="state-img"
+                      src="@/static/me/wd_icon_shenhezhong.png"
+                    ></image>
+                  </view>
+                  <!-- 审核失败 -->
+                  <view v-else-if="item.status == 3" class="status-text">
+                    <image
+                      class="state-img"
+                      src="@/static/me/wd_icon_fabushibai.png"
+                    ></image>
+                  </view>
+                </view>
+                <view
+                  class="name"
+                  style="
+                    font-family: 'PingFang SC-Medium';
+                    font-weight: 500;
+                    font-size: 28rpx;
+                    color: #1a4d2e;
+                  "
+                >
+                  {{ item.title || item.description || "作品" + index }}</view
+                >
+              </view>
+            </view>
+          </view>
+        </template>
+        <!-- 加载更多提示 -->
+        <!-- <view class="loading-more" v-if="isLoading">加载中...</view>
 				<view class="no-more" v-if="!hasMore && worksList.length > 0">没有更多作品了</view>
 				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view> -->
-			</view>
-			<view style="width: 100%; text-align: center;background: #fff;">杭州智潮创意科技有限公司</view>
+      </view>
+      <view style="width: 100%; text-align: center; background: #fff"
+        >杭州智潮创意科技有限公司</view
+      >
 
-			<view class="blankHeight"></view>
-			<view class="blankHeight"></view>
-		</view>
+      <view class="blankHeight"></view>
+      <view class="blankHeight"></view>
+    </view>
 
-		<!-- 确认框 -->
-		<CustomConfirm ref="customConfirm"></CustomConfirm>
-		<!-- 提示框 -->
-		<DialogBox ref="DialogBox"></DialogBox>
-		<tabbar-view :tabbars="tabbars" :currentIndex="4" ref="tabbar"></tabbar-view>
-		<SharePopup :visible="showShare" :share-url="shareUrl" @close="showShare = false" />
-	</view>
+    <!-- 确认框 -->
+    <CustomConfirm ref="customConfirm"></CustomConfirm>
+    <!-- 提示框 -->
+    <DialogBox ref="DialogBox"></DialogBox>
+    <tabbar-view
+      :tabbars="tabbars"
+      :currentIndex="4"
+      ref="tabbar"
+    ></tabbar-view>
+    <!-- SharePopup组件 --> 
+    <SharePopup
+      :visible="showShare"
+      :share-url="shareUrl"
+      :share-title="shareTitle"
+      :share-desc="shareDesc"
+      :share-img="shareImg"
+      @close="showShare = false"
+    />
+ 
+  </view>
 </template>
 
 <script>
@@ -228,389 +356,361 @@ import tabbar from "@/mixins/tabbar";
 import CustomConfirm from "@/components/custome-confirm/customeConfirm.vue";
 import CircleAvatar from "@/components/CircleAvatar/CircleAvatar.vue";
 import meCard from "@/components/meCard/meCard.vue";
-import WorkItem from "@/components/WorkItem/WorkItem.vue";  
+import WorkItem from "@/components/WorkItem/WorkItem.vue";
 export default {
+  components: {
+    tabbarView,
+    CustomConfirm,
+    CircleAvatar,
+    meCard,
+    WorkItem,
+  },
+  mixins: [tabbar],
+  data() {
+    return {
+      title: "",
+      sel: 1,
+      firstLevelNavActive: 0,
+      myinfo: {
+        avator: "../../static/logo.png",
+        nickname: "王思思",
+        join_name: "注册日期：2024年5月",
+        num_1: 0,
+        num_2: 0,
+        num_3: 0,
+        num_4: 0,
+        is_login: "no",
+        num_history: 0,
+        num_collection: 0,
+      },
+      aihao_tags: [],
+      menu_list: [],
+      data_list: [  ],
+      activeTab: 0,
+      offset: 0,
+      hasMore: true,
+      isLoading: false,
+      worksList: [],
+      showShare: false,
+      shareUrl: "https://your-share-url.com",
+      shareTitle: "分享标题",
+      shareDesc: "分享描述",
+      shareImg: "https://your-share-image.com/image.jpg",
+    };
+  },
+  onLoad() {
+    // setTimeout(function() {
+    // 	uni.setNavigationBarColor({
+    // 		frontColor: '#ffffff',
+    // 		backgroundColor: '#00000000',
+    // 		animation: {
+    // 			duration: 400,
+    // 			timingFunc: 'easeIn'
+    // 		}
+    // 	})
+    // }, 200);
+    setTimeout(() => {
+      this.clickShare();
+    });
+  },
+  onShow() {
+    uni.$emit("check_login", () => {});
+    // this.loadData();
+    this.offset = 0;
+    this.hasMore = true;
+    this.worksList = [];
+    this.loadInfo();
+    this.loadWorksList();
+  },
+  onReachBottom() {
+    if (this.hasMore && !this.isLoading) {
+      this.loadMoreWorks();
+    }
+  },
+  methods: {
+    clickShare(item) {
+      this.showShare = true;
+    },
+    async showConfirm() {
+      let that = this;
+      this.$refs["customConfirm"]
+        .confirm({
+          title: "确认解绑",
+          content: "解绑微信账号后将无法继续使用它登录该App账号？",
+          DialogType: "inquiry",
+          btn1: "再考虑一下",
+          btn2: "确认解绑",
+          animation: 0,
+        })
+        .then((res) => {});
+    },
+    onBack() {},
+    chkSel() {
+      if (this.sel == 1) {
+        this.sel = 0;
+      } else {
+        this.sel = 1;
+      }
+    },
+    goPage(page) {
+      if (page == "kefu") {
+        let that = this;
+        // #ifdef APP-PLUS
+        plus.share.getServices((res) => {
+          const wechat = res.find((i) => i.id === "weixin");
+          if (wechat) {
+            wechat.openCustomerServiceChat(
+              {
+                corpid: "wwbc06aa8311b6ac08",
+                // url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
+                url: that.myinfo.wxkf,
+              },
+              (src) => {
+                console.log("success:");
+              },
+              (err) => {
+                console.log("error:");
+              }
+            );
+          } else {
+            uni.showToast({
+              title: "没有检测到微信，请先安装",
+              icon: "error",
+            });
+          }
+        });
+        // #endif
+      } else if (page != "") {
+        uni.navigateTo({
+          url: page,
+        });
+      }
+    },
+    loadInfo() {
+      console.log({
+        uuid: getApp().globalData.uuid,
+        skey: getApp().globalData.skey,
+      });
+      uni.request({
+        url: this.$apiHost + "/User/getinfo",
+        data: {
+          uuid: getApp().globalData.uuid,
+          skey: getApp().globalData.skey,
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("----:", JSON.parse(JSON.stringify(res.data)));
+          if (res.data.need_login == "yes") {
+            // getApp().globalData.skey = "";
+            // getApp().globalData.uuid = "";
+            uni.removeStorageSync("wapptoken");
+            uni.redirectTo({
+              url: "/pages/login/login",
+            });
+            return;
+          }
+          if (res.data.aihao) {
+            this.aihao_tags = res.data.aihao.split(",");
+          }
+          this.myinfo = res.data;
+        },
+        complete: (com) => {
+          // uni.hideLoading();
+        },
+        fail: (e) => {
+          console.log("----e:", e);
+        },
+      });
+    },
+    onLogout() {
+      let that = this;
+      this.$refs["DialogBox"]
+        .confirm({
+          title: "提示",
+          content: "确定退出吗？",
+          DialogType: "inquiry",
+          btn1: "取消",
+          btn2: "退出",
+          animation: 0,
+        })
+        .then((res) => {
+          uni.request({
+            url: that.$apiHost + "/My/logout",
+            data: {
+              uuid: getApp().globalData.uuid,
+              skey: getApp().globalData.skey,
+            },
+            header: {
+              "content-type": "application/json",
+              sign: getApp().globalData.headerSign,
+            },
+            success: (res) => {
+              console.log("----:", res.data);
+              // getApp().globalData.skey = "";
+              // getApp().globalData.uuid = "";
+              uni.removeStorageSync("wapptoken");
+              uni.redirectTo({
+                url: "/pages/login/login",
+              });
+            },
+            complete: (com) => {
+              // uni.hideLoading();
+            },
+            fail: (e) => {
+              console.log("----e:", e);
+            },
+          });
+        });
+    },
+    switchTab(index) {
+      this.activeTab = index;
+      this.offset = 0;
+      this.hasMore = true;
+      this.worksList = [];
+      this.loadWorksList();
+    },
+    loadWorksList() {
+      if (this.isLoading) return;
+      this.isLoading = true;
 
-	components: {
-		tabbarView,
-		CustomConfirm,
-		CircleAvatar,
-		meCard,
-		WorkItem,
-	},
-	mixins: [tabbar],
-	data() {
-		return {
-			title: "",
-			sel: 1,
-			firstLevelNavActive: 0,
-			myinfo: {
-				avator: "../../static/logo.png",
-				nickname: "王思思",
-				join_name: "注册日期：2024年5月",
-				num_1: 0,
-				num_2: 0,
-				num_3: 0,
-				num_4: 0,
-				is_login: "no",
-				num_history: 0,
-				num_collection: 0,
-			},
-			aihao_tags: [],
-			menu_list: [],
-			data_list: [{
-				url: "https://e.zhichao.art/AI_images/a_1112_10.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1112_108.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1112_113.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1112_13.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1112_137.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1112_141.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1114__562.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1114__568.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1114__569.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1114__570.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1114__571.png",
-			},
-			{
-				url: "https://e.zhichao.art/AI_images/a_1114__575.png",
-			},
-			],
-			activeTab: 0,
-			offset: 0,
-			hasMore: true,
-			isLoading: false,
-			worksList: [],
-			showShare: false,
-			shareUrl: 'https://your-share-url.com',
-
-		};
-	},
-	onLoad() {
-		// setTimeout(function() {
-		// 	uni.setNavigationBarColor({
-		// 		frontColor: '#ffffff',
-		// 		backgroundColor: '#00000000',
-		// 		animation: {
-		// 			duration: 400,
-		// 			timingFunc: 'easeIn'
-		// 		}
-		// 	})
-		// }, 200); 
-	},
-	onShow() {
-		uni.$emit("check_login", () => { });
-		// this.loadData();
-		this.offset = 0;
-		this.hasMore = true;
-		this.worksList = [];
-		this.loadInfo();
-		this.loadWorksList();
-	},
-	onReachBottom() {
-		if (this.hasMore && !this.isLoading) {
-			this.loadMoreWorks();
-		}
-	},
-	methods: {
-		clickShare(item) {
-			this.showShare = true;
-		},
-		async showConfirm() {
-			let that = this;
-			this.$refs["customConfirm"]
-				.confirm({
-					title: "确认解绑",
-					content: "解绑微信账号后将无法继续使用它登录该App账号？",
-					DialogType: "inquiry",
-					btn1: "再考虑一下",
-					btn2: "确认解绑",
-					animation: 0,
-				})
-				.then((res) => { });
-		},
-		onBack() { },
-		chkSel() {
-			if (this.sel == 1) {
-				this.sel = 0;
-			} else {
-				this.sel = 1;
-			}
-		},
-		goPage(page) {
-			if (page == "kefu") {
-				let that = this;
-				// #ifdef APP-PLUS
-				plus.share.getServices((res) => {
-					const wechat = res.find((i) => i.id === "weixin");
-					if (wechat) {
-						wechat.openCustomerServiceChat({
-							corpid: "wwbc06aa8311b6ac08",
-							// url: 'https://work.weixin.qq.com/kfid/kfc4b0bcb4038d00a50'
-							url: that.myinfo.wxkf,
-						},
-							(src) => {
-								console.log("success:");
-							},
-							(err) => {
-								console.log("error:");
-							}
-						);
-					} else {
-						uni.showToast({
-							title: "没有检测到微信，请先安装",
-							icon: "error",
-						});
-					}
-				});
-				// #endif
-			} else if (page != "") {
-				uni.navigateTo({
-					url: page,
-				});
-			}
-		},
-		loadInfo() {
-			console.log({
-				uuid: getApp().globalData.uuid,
-				skey: getApp().globalData.skey,
-			});
-			uni.request({
-				url: this.$apiHost + "/User/getinfo",
-				data: {
-					uuid: getApp().globalData.uuid,
-					skey: getApp().globalData.skey,
-				},
-				header: {
-					"content-type": "application/json",
-					sign: getApp().globalData.headerSign,
-				},
-				success: (res) => {
-					console.log("----:", JSON.parse(JSON.stringify(res.data)));
-					if (res.data.need_login == "yes") {
-						// getApp().globalData.skey = "";
-						// getApp().globalData.uuid = "";
-						uni.removeStorageSync("wapptoken");
-						uni.redirectTo({
-							url: "/pages/login/login",
-						});
-						return;
-					}
-					if (res.data.aihao) {
-						this.aihao_tags = res.data.aihao.split(",");
-					}
-					this.myinfo = res.data;
-				},
-				complete: (com) => {
-					// uni.hideLoading();
-				},
-				fail: (e) => {
-					console.log("----e:", e);
-				},
-			});
-		},
-		onLogout() {
-			let that = this;
-			this.$refs["DialogBox"]
-				.confirm({
-					title: "提示",
-					content: "确定退出吗？",
-					DialogType: "inquiry",
-					btn1: "取消",
-					btn2: "退出",
-					animation: 0,
-				})
-				.then((res) => {
-					uni.request({
-						url: that.$apiHost + "/My/logout",
-						data: {
-							uuid: getApp().globalData.uuid,
-							skey: getApp().globalData.skey,
-						},
-						header: {
-							"content-type": "application/json",
-							sign: getApp().globalData.headerSign,
-						},
-						success: (res) => {
-							console.log("----:", res.data);
-							// getApp().globalData.skey = "";
-							// getApp().globalData.uuid = "";
-							uni.removeStorageSync("wapptoken");
-							uni.redirectTo({
-								url: "/pages/login/login",
-							});
-						},
-						complete: (com) => {
-							// uni.hideLoading();
-						},
-						fail: (e) => {
-							console.log("----e:", e);
-						},
-					});
-				});
-		},
-		switchTab(index) {
-			this.activeTab = index;
-			this.offset = 0;
-			this.hasMore = true;
-			this.worksList = [];
-			this.loadWorksList();
-		},
-		loadWorksList() {
-			if (this.isLoading) return;
-			this.isLoading = true;
-
-			// 根据activeTab选择不同的API
-			let apiUrl = "";
-			if (this.firstLevelNavActive == 0) {
-				if (this.activeTab === 0) {
-					apiUrl = "/Work/getlist";
-				} else {
-					apiUrl = "/WorkAI/getMyQueueList";
-				}
-			} else if (this.firstLevelNavActive == 1) {
-				apiUrl = "/Article/getlist";
-			}
-			uni.request({
-				url: this.$apiHost + apiUrl,
-				data: {
-					uuid: getApp().globalData.uuid,
-					skey: getApp().globalData.skey,
-					type: "my", // 固定为my，表示获取自己的作品
-					offset: this.offset,
-					status: this.activeTab === 0 ? 1 : undefined, // 只有我的作品需要status参数
-				},
-				header: {
-					"content-type": "application/json",
-					sign: getApp().globalData.headerSign,
-				},
-				success: (res) => {
-					console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
-					if (res.data.success == "yes" && res.data.list) {
-						if (res.data.list.length > 0) {
-							this.worksList = [...this.worksList, ...res.data.list];
-							this.offset += res.data.list.length;
-						}
-
-						if (res.data.list.length < 20) {
-							this.hasMore = false;
-						}
-					} else {
-						this.hasMore = false;
-					}
-
-					// 只有在"我的作品"标签下才更新data_list
-					if (this.activeTab === 0) {
-						this.updateDataList();
-					}
-					console.log("作品列表数据:", this.worksList);
+      // 根据activeTab选择不同的API
+      let apiUrl = "";
+      if (this.firstLevelNavActive == 0) {
+        if (this.activeTab === 0) {
+          apiUrl = "/Work/getlist";
+        } else {
+          apiUrl = "/WorkAI/getMyQueueList";
+        }
+      } else if (this.firstLevelNavActive == 1) {
+        apiUrl = "/Article/getlist";
+      }
+      uni.request({
+        url: this.$apiHost + apiUrl,
+        data: {
+          uuid: getApp().globalData.uuid,
+          skey: getApp().globalData.skey,
+          type: "my", // 固定为my，表示获取自己的作品
+          offset: this.offset,
+          status: this.activeTab === 0 ? 1 : undefined, // 只有我的作品需要status参数
+        },
+        header: {
+          "content-type": "application/json",
+          sign: getApp().globalData.headerSign,
+        },
+        success: (res) => {
+          console.log("列表数据:", JSON.parse(JSON.stringify(res.data)));
+          if (res.data.success == "yes" && res.data.list) {
+            if (res.data.list.length > 0) {
+              this.worksList = [...this.worksList, ...res.data.list];
+              this.offset += res.data.list.length;
+            }
 
-				},
-				complete: () => {
-					this.isLoading = false;
-				},
-				fail: (e) => {
-					console.log("请求列表失败:", e);
-					this.isLoading = false;
-				},
-			});
-		},
-		firstLevelNavActiveSwitch(n) {
-			this.firstLevelNavActive = n
-			this.offset = 0;
-			this.hasMore = true;
-			this.worksList = [];
-			if (this.firstLevelNavActive == 0) {
-				this.activeTab = 0
-			}
-			this.loadWorksList();
-		},
+            if (res.data.list.length < 20) {
+              this.hasMore = false;
+            }
+          } else {
+            this.hasMore = false;
+          }
 
-		loadMoreWorks() {
-			if (this.hasMore && !this.isLoading) {
-				this.loadWorksList();
-			}
-		},
-		updateDataList() {
-			this.data_list = this.worksList.map((item) => {
-				return {
-					url: item.images || item.img_url || item.url || "../../static/logo.png",
-					title: item.title || item.description || "作品",
-					id: item.id,
-				};
-			});
-		},
-		goWork(item) {
-			uni.$emit("check_login", () => { });
-			// , //任务状态(1:排队中,3:生成失败,4:生成失败,9:创作完成)
-			if (this.activeTab == 0) {
-				uni.navigateTo({
-					// url: "/pages/index/workDetail?id=" + item.id,
-					url: "/pages/makedetail/makeDetail?id=" + item.queue_id + "&queueId=" + item.id,
-				});
-			} else {
-				if (item.status >= 9) {
-					uni.navigateTo({
-						url: "/pages/makedetail/makeDetail?id=" + item.id,
-					});
-				}
-				if (item.status < 9 && item.status != 3 && item.status != 4) {
-					// <!-- <text v-if="item.task_type === 1">灵感创作</text>
-					// <text v-else-if="item.task_type === 2">音乐</text> -->
-					var url = ''
-					if (item.task_type === 1) {
-						url = "/makedetail/makeImgDetail"
-					}
-					if (item.task_type === 2) {
-						url = "/makedetail/makeMusicDetail"
-					}
-					if (url) {
-						uni.navigateTo({
-							url: "/pages" + url + "?id=" + item.id,
-						});
-					}
+          // 只有在"我的作品"标签下才更新data_list
+          if (this.activeTab === 0) {
+            this.updateDataList();
+          }
+          console.log("作品列表数据:", this.worksList);
+        },
+        complete: () => {
+          this.isLoading = false;
+        },
+        fail: (e) => {
+          console.log("请求列表失败:", e);
+          this.isLoading = false;
+        },
+      });
+    },
+    firstLevelNavActiveSwitch(n) {
+      this.firstLevelNavActive = n;
+      this.offset = 0;
+      this.hasMore = true;
+      this.worksList = [];
+      if (this.firstLevelNavActive == 0) {
+        this.activeTab = 0;
+      }
+      this.loadWorksList();
+    },
 
-				}
-			}
-		},
-		goWork2(item) {
-			uni.navigateTo({
-				// url: "/pages/index/workDetail?id=" + item.id,
-				url: "/pages/index/articleDetail?id=" + item.id,
-			});
-		},
-		navigateToSettings() {
-			uni.$emit("check_login", () => {
-				uni.navigateTo({
-					url: "/pages/my/setting",
-				});
-			});
-		},
-		navigateToFollow() {
-			uni.navigateTo({
-				url: "/pages/my/follow",
-			});
-		},
-	},
+    loadMoreWorks() {
+      if (this.hasMore && !this.isLoading) {
+        this.loadWorksList();
+      }
+    },
+    updateDataList() {
+      this.data_list = this.worksList.map((item) => {
+        return {
+          url:
+            item.images || item.img_url || item.url || "../../static/logo.png",
+          title: item.title || item.description || "作品",
+          id: item.id,
+        };
+      });
+    },
+    goWork(item) {
+      uni.$emit("check_login", () => {});
+      // , //任务状态(1:排队中,3:生成失败,4:生成失败,9:创作完成)
+      if (this.activeTab == 0) {
+        uni.navigateTo({
+          // url: "/pages/index/workDetail?id=" + item.id,
+          url:
+            "/pages/makedetail/makeDetail?id=" +
+            item.queue_id +
+            "&queueId=" +
+            item.id,
+        });
+      } else {
+        if (item.status >= 9) {
+          uni.navigateTo({
+            url: "/pages/makedetail/makeDetail?id=" + item.id,
+          });
+        }
+        if (item.status < 9 && item.status != 3 && item.status != 4) {
+          // <!-- <text v-if="item.task_type === 1">灵感创作</text>
+          // <text v-else-if="item.task_type === 2">音乐</text> -->
+          var url = "";
+          if (item.task_type === 1) {
+            url = "/makedetail/makeImgDetail";
+          }
+          if (item.task_type === 2) {
+            url = "/makedetail/makeMusicDetail";
+          }
+          if (url) {
+            uni.navigateTo({
+              url: "/pages" + url + "?id=" + item.id,
+            });
+          }
+        }
+      }
+    },
+    goWork2(item) {
+      uni.navigateTo({
+        // url: "/pages/index/workDetail?id=" + item.id,
+        url: "/pages/index/articleDetail?id=" + item.id,
+      });
+    },
+    navigateToSettings() {
+      uni.$emit("check_login", () => {
+        uni.navigateTo({
+          url: "/pages/my/setting",
+        });
+      });
+    },
+    navigateToFollow() {
+      uni.navigateTo({
+        url: "/pages/my/follow",
+      });
+    },
+  },
 };
 </script>
 

pages/my/myStar copy.scss

@@ -0,0 +1,501 @@
+.star-container {
+	width: 100%;
+	min-height: 100vh;
+	background-color: #f5f5f5;
+	
+	.loading-area {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background: rgba(255,255,255,0.9);
+		
+		.loading-wrapper {
+			width: 400rpx;
+			height: 400rpx;
+			position: relative;
+			
+			.center-circle {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: 100rpx;
+				height: 100rpx;
+				margin: -50rpx 0 0 -50rpx;
+				background: #1E90FF;
+				border-radius: 50%;
+				animation: rotate 2s linear infinite;
+				
+				&::after {
+					content: '';
+					position: absolute;
+					top: 8rpx;
+					left: 8rpx;
+					right: 8rpx;
+					bottom: 8rpx;
+					background: #fff;
+					border-radius: 50%;
+					opacity: 0.3;
+				}
+			}
+			
+			.orbit-balls {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				animation: rotate 2s linear infinite;
+				
+				.ball {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					left: 0;
+					top: 0;
+					
+					.ball-item {
+						position: absolute;
+						width: 20rpx;
+						height: 20rpx;
+						background: var(--color);
+						border-radius: 50%;
+						top: 0;
+						left: 50%;
+						margin-left: -10rpx;
+						animation: moveBall 3s ease-in infinite;
+						animation-delay: var(--delay);
+					}
+				}
+			}
+		}
+		
+		.loading-text {
+			margin-top: 40rpx;
+			font-size: 28rpx;
+			color: #666;
+		}
+	}
+	
+	.star-content {
+		width: 100%;
+		padding: 20rpx;
+	}
+	
+	.gender-popup {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 1000;
+		
+		.popup-content {
+			width: 600rpx;
+			background: #FFFFFF;
+			border-radius: 24rpx;
+			padding: 40rpx;
+			
+			.popup-title {
+				font-size: 36rpx;
+				color: #333;
+				text-align: center;
+				font-weight: 500;
+				margin-bottom: 40rpx;
+			}
+			
+			.gender-cards {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 40rpx;
+				
+				.gender-card {
+					width: 240rpx;
+					height: 280rpx;
+					border-radius: 16rpx;
+					border: 2rpx solid #EEEEEE;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+					transition: all 0.3s;
+					
+					image {
+						width: 160rpx;
+						height: 160rpx;
+						margin-bottom: 20rpx;
+					}
+					
+					text {
+						font-size: 28rpx;
+						color: #333;
+					}
+					
+					.check-icon {
+						position: absolute;
+						top: 16rpx;
+						right: 16rpx;
+						width: 40rpx;
+						height: 40rpx;
+					}
+					
+					&.selected {
+						border-color: #1E90FF;
+						background: rgba(30, 144, 255, 0.05);
+					}
+				}
+			}
+			
+			.confirm-btn {
+				height: 88rpx;
+				background: #9C27B0;
+				border-radius: 44rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #FFFFFF;
+				font-size: 32rpx;
+				font-weight: 500;
+				
+				&:active {
+					opacity: 0.8;
+				}
+			}
+		}
+	}
+	
+	.character-page {
+		width: 100%;
+		min-height: 100vh;
+		background-color: #f5f5f5;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		
+		.character-container {
+			flex: 1;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 40rpx;
+			margin-bottom: 120rpx; // 为底部按钮留出空间
+			
+			.character-image {
+				width: 100%;
+				height: 800rpx; // 调整角色图片高度
+				object-fit: contain;
+			}
+		}
+		
+		.bottom-button {
+			position: fixed;
+			bottom: 40rpx;
+			left: 40rpx;
+			right: 40rpx;
+			height: 98rpx;
+			background: #333333;
+			border-radius: 49rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #FFFFFF;
+			font-size: 32rpx;
+			font-weight: 500;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+			transition: all 0.2s ease;
+			
+			&:active {
+				opacity: 0.95;
+				transform: scale(0.98);
+			}
+		}
+	}
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(-360deg);
+	}
+}
+
+@keyframes moveBall {
+	0% {
+		transform: translateY(0) scale(1);
+		opacity: 1;
+	}
+	98% {
+		transform: translateY(180rpx) scale(0.1);
+		opacity: 0.2;
+	}
+	99% {
+		transform: translateY(180rpx) scale(0.01);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0) scale(1);
+		opacity: 0;
+	}
+}
+
+.form-page {
+	width: 100%;
+	min-height: 100vh;
+	background-color: #ffffff;
+	padding: 30rpx;
+	box-sizing: border-box;
+	
+	.form-group {
+		margin-bottom: 40rpx;
+		
+		.label {
+			display: flex;
+			align-items: center;
+			margin-bottom: 16rpx;
+			font-size: 28rpx;
+			color: #333;
+			
+			.required {
+				color: #ff4d4f;
+				margin-right: 8rpx;
+				
+				&.error {
+					animation: shake 0.5s ease-in-out;
+				}
+			}
+		}
+		
+		.input {
+			width: 100%;
+			height: 88rpx;
+			background: #f5f5f5;
+			border-radius: 12rpx;
+			padding: 0 24rpx;
+			font-size: 28rpx;
+			
+			&.error {
+				border: 2rpx solid #ff4d4f;
+			}
+		}
+		
+		.gender-options {
+			display: flex;
+			gap: 20rpx;
+			
+			.gender-option {
+				flex: 1;
+				height: 80rpx;
+				background: #f5f5f5;
+				border-radius: 40rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 28rpx;
+				color: #666;
+				transition: all 0.3s;
+				
+				&.selected {
+					background: #333;
+					color: #fff;
+				}
+			}
+		}
+		
+		.textarea-container {
+			position: relative;
+			
+			.textarea {
+				width: 100%;
+				height: 240rpx;
+				background: #f5f5f5;
+				border-radius: 12rpx;
+				padding: 24rpx;
+				font-size: 28rpx;
+				
+				&.error {
+					border: 2rpx solid #ff4d4f;
+				}
+			}
+			
+			.word-count {
+				position: absolute;
+				right: 24rpx;
+				bottom: 24rpx;
+				font-size: 24rpx;
+				color: #999;
+			}
+		}
+		
+		.tags-scroll {
+			width: 100%;
+			white-space: nowrap;
+			
+			.tags-container {
+				display: inline-flex;
+				padding: 20rpx 0;
+				gap: 20rpx;
+				
+				.tag {
+					padding: 16rpx 32rpx;
+					background: #f5f5f5;
+					border-radius: 32rpx;
+					font-size: 26rpx;
+					color: #666;
+					transition: all 0.3s;
+					
+					&.selected {
+						background: #333;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+	
+	.submit-button {
+		position: fixed;
+		bottom: 40rpx;
+		left: 40rpx;
+		right: 40rpx;
+		height: 98rpx;
+		background: #333333;
+		border-radius: 49rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		font-weight: 500;
+		transition: all 0.2s ease;
+		
+		&:active {
+			opacity: 0.95;
+			transform: scale(0.98);
+		}
+	}
+}
+
+@keyframes shake {
+	0%, 100% { transform: translateX(0); }
+	25% { transform: translateX(-5rpx); }
+	75% { transform: translateX(5rpx); }
+}
+
+.character-info {
+	width: 100%;
+	min-height: 100vh;
+	background-color: #ffffff;
+	position: relative;
+	padding-bottom: 120rpx;
+	
+	.info-container {
+		padding: 30rpx;
+		
+		.character-portrait {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin-bottom: 40rpx;
+			
+			.portrait-image {
+				width: 100%;
+				height: 600rpx;
+				object-fit: contain;
+			}
+			
+			.character-name {
+				font-size: 40rpx;
+				font-weight: 600;
+				color: #333;
+				margin-top: 20rpx;
+			}
+		}
+		
+		.info-section {
+			background: #f8f8f8;
+			border-radius: 20rpx;
+			padding: 30rpx;
+			
+			.section-title {
+				font-size: 32rpx;
+				font-weight: 500;
+				color: #333;
+				margin-bottom: 20rpx;
+				position: relative;
+				padding-left: 20rpx;
+				
+				&::before {
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translateY(-50%);
+					width: 6rpx;
+					height: 28rpx;
+					background: #9C27B0;
+					border-radius: 3rpx;
+				}
+			}
+			
+			.description-box {
+				background: #ffffff;
+				border-radius: 16rpx;
+				padding: 24rpx;
+				margin-bottom: 30rpx;
+				
+				.description-text {
+					font-size: 28rpx;
+					color: #666;
+					line-height: 1.6;
+				}
+			}
+			
+			.tags-box {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 16rpx;
+				
+				.tag-item {
+					padding: 12rpx 24rpx;
+					background: #f0f0f0;
+					border-radius: 28rpx;
+					font-size: 24rpx;
+					color: #666;
+				}
+			}
+		}
+	}
+	
+	.join-button {
+		position: fixed;
+		bottom: 40rpx;
+		left: 40rpx;
+		right: 40rpx;
+		height: 98rpx;
+		background: linear-gradient(to right, #9C27B0, #7B1FA2);
+		border-radius: 49rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		font-weight: 500;
+		box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.3);
+		transition: all 0.2s ease;
+		
+		&:active {
+			transform: scale(0.98);
+			opacity: 0.95;
+		}
+	}
+}

pages/my/myStar copy.vue

@@ -0,0 +1,357 @@
+<template>
+	<view class="star-container">
+		<!-- 性别选择弹窗 -->
+		<view class="gender-popup" v-if="!selectedGender && !showInfo">
+			<view class="popup-content">
+				<view class="popup-title">请选择性别</view>
+
+				<view class="gender-cards">
+					<view class="gender-card" :class="{'selected': tempGender === 'male'}" @tap="selectGender('male')">
+						<image src="/static/home/nan.png" mode="aspectFit"></image>
+						<text>男生</text>
+						<image v-if="tempGender === 'male'" class="check-icon" src="/static/gender/check.png"
+							mode="aspectFit">
+						</image>
+					</view>
+
+					<view class="gender-card" :class="{'selected': tempGender === 'female'}"
+						@tap="selectGender('female')">
+						<image src="/static/home/nv.png" mode="aspectFit"></image>
+						<text>女生</text>
+						<image v-if="tempGender === 'female'" class="check-icon" src="/static/gender/check.png"
+							mode="aspectFit">
+						</image>
+					</view>
+				</view>
+
+				<view class="confirm-btn" @tap="confirmGender">
+					创建星灵
+				</view>
+			</view>
+		</view>
+
+		<!-- 加载动画区域 -->
+		<view class="loading-area" v-if="isLoading">
+			<view class="loading-wrapper">
+				<!-- 中心蓝色旋转圆 -->
+				<view class="center-circle"></view>
+
+				<!-- 外围16个小球 -->
+				<view class="orbit-balls">
+					<view class="ball" v-for="(item,index) in 16" :key="index" :style="{
+							transform: `rotate(${index * 22.5}deg)`,
+							'--delay': `${index * 0.2}s`,
+							'--color': ballColors[index % 8]
+						}">
+						<view class="ball-item"></view>
+					</view>
+				</view>
+			</view>
+			<text class="loading-text">正在加载...</text>
+		</view>
+
+		<!-- 角色信息展示页面 -->
+		<view class="character-info" v-else-if="showInfo">
+			<view class="info-container">
+				<!-- 角色立绘区域 -->
+				<view class="character-portrait">
+					<image :src="starInfo.image" mode="aspectFit" class="portrait-image"></image>
+					<text class="character-name">{{starInfo.name}}</text>
+				</view>
+
+				<!-- 角色信息板块 -->
+				<view class="info-section">
+					<view class="section-title">关于Ta</view>
+
+					<!-- 人物简介 -->
+					<view class="description-box">
+						<text class="description-text">{{starInfo.content}}</text>
+					</view>
+
+					<!-- 标签展示 -->
+					<view class="tags-box">
+						<view class="tag-item" v-for="tag in formData.tags" :key="tag">
+							{{tag}}
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 底部按钮 -->
+			<view class="join-button" @tap="handleJoin">
+				入驻星球
+			</view>
+		</view>
+
+		<!-- 表单页面 -->
+		<view class="form-page" v-else-if="showForm">
+			<form @submit="submitForm">
+				<view class="form-group">
+					<view class="label">
+						<text class="required">*</text>
+						<text>昵称</text>
+					</view>
+					<input class="input" v-model="formData.nickname" placeholder="给星灵取个名字"
+						:class="{'error': showError && !formData.nickname}" />
+				</view>
+
+				<view class="form-group">
+					<view class="label">性别</view>
+					<view class="gender-options">
+						<view class="gender-option">
+							已选{{starInfo.sex==1?'男':'女'}}
+						</view>
+					</view>
+				</view>
+
+				<view class="form-group">
+					<view class="label">
+						<text class="required">*</text>
+						<text>人物简介</text>
+					</view>
+					<view class="textarea-container">
+						<textarea class="textarea" v-model="formData.description"
+							placeholder="填写这个角色的人物介绍，例如性格、身份、背景与历程..." :maxlength="255"
+							:class="{'error': showError && !formData.description}" />
+						<text class="word-count">{{formData.description.length}}/255</text>
+					</view>
+				</view>
+
+				<view class="form-group">
+					<view class="label">人物标签</view>
+					<scroll-view class="tags-scroll" scroll-x="true" show-scrollbar="false">
+						<view class="tags-container">
+							<view class="tag" v-for="tag in predefinedTags" :key="tag">
+								{{tag}}
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</form>
+
+			<view class="submit-button" @tap="submitStar">
+				确定并提交
+			</view>
+		</view>
+
+		<!-- 角色展示页面 -->
+		<view class="character-page" v-else-if="selectedGender">
+			<view class="character-container">
+				<image :src="starImg" mode="aspectFit" class="character-image"></image>
+			</view>
+			<view class="bottom-button" @tap="goToSetProfile">
+				设置星灵简介
+			</view>
+		</view>
+
+		<!-- 收藏内容区域 -->
+		<view class="star-content" v-else>
+			<view class="star-list">
+				<!-- 这里放收藏列表内容 -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import tabbarView from "@/components/tabbar/tabbar.vue"
+
+	export default {
+		components: {
+			tabbarView
+		},
+		data() {
+			return {
+				isLoading: false,
+				selectedGender: null,
+				tempGender: null,
+				tabbars: [],
+				ballColors: [
+					'#FF6B6B', // 红色
+					'#4ECDC4', // 青色
+					'#45B7D1', // 蓝色
+					'#96CEB4', // 绿色
+					'#FFEEAD', // 黄色
+					'#D4A5A5', // 粉色
+					'#9A8194', // 紫色
+					'#FF9F1C' // 橙色
+				],
+				showForm: false,
+				showError: false,
+				formData: {
+					nickname: '',
+					gender: '其他',
+					description: '',
+					tags: []
+				},
+				predefinedTags: [],
+				showInfo: false,
+				starImg: '',
+				starInfo: {}
+			}
+		},
+		onLoad() {
+			this.getStar('get');
+		},
+		methods: {
+			selectGender(gender) {
+				this.tempGender = gender;
+			},
+			confirmGender() {
+				if (!this.tempGender) return;
+				this.selectedGender = this.tempGender;
+				this.isLoading = true;
+
+				this.getStar('make');
+			},
+			goToSetProfile() {
+				this.showForm = true;
+			},
+			toggleTag(tag) {
+				const index = this.formData.tags.indexOf(tag);
+				if (index > -1) {
+					this.formData.tags.splice(index, 1);
+				} else {
+					this.formData.tags.push(tag);
+				}
+			},
+			handleJoin() {
+				console.log('入驻星球');
+				// 处理入驻逻辑
+			},
+			getStar(act) {
+				let that = this;
+				console.log("uuid", getApp().globalData.uuid);
+
+				// 设置加载状态
+				if (act === 'make') {
+					this.isLoading = true;
+				}
+
+				uni.request({
+					url: this.$apiHost + '/Work/getStar',
+					data: {
+						uuid: getApp().globalData.uuid,
+						sex: this.tempGender,
+						act: act,
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					// 设置60秒超时
+					timeout: 60000,
+					success: (res) => {
+						console.log("res.data", res.data);
+						if (res.data.have == 0) {
+							this.showInfo = false;
+							this.starImg = res.data.image;
+						} else {
+							//首次进来获取到了
+							this.showInfo = true;
+						}
+						if (res.data.success === "yes") {
+							this.starImg = res.data.image;
+						}
+						if (res.data.info && res.data.info.tags != "") {
+							let img2 = [];
+							var n2 = res.data.info.tags.split(",");
+							n2.map((filePath) => {
+								img2.push(filePath)
+							})
+							this.predefinedTags = img2;
+							this.formData.tags = img2;
+						}
+						this.starInfo = res.data.info || {};
+						this.formData.description = this.starInfo.content;
+						if (act == 'make') {
+							// 模拟加载过程
+							setTimeout(() => {
+								that.isLoading = false;
+							}, 300);
+						}
+					},
+					fail: (err) => {
+						console.error('请求失败：', err);
+						// 显示错误提示
+						uni.showToast({
+							title: '网络请求失败，请重试',
+							icon: 'none',
+							duration: 2000
+						});
+
+						// 重置加载状态
+						if (act === 'make') {
+							that.isLoading = false;
+						}
+
+						// 如果是网络超时，自动重试一次
+						if (err.errMsg.includes('timeout')) {
+							setTimeout(() => {
+								console.log('请求超时，正在重试...');
+								that.getStar(act);
+							}, 1000);
+						}
+					},
+					complete: () => {
+						// 确保在任何情况下都能重置加载状态
+						if (act === 'make' && this.isLoading) {
+							this.isLoading = false;
+						}
+					}
+				});
+			},
+			submitStar() {
+				let that = this;
+				uni.showLoading({
+					mask: true
+				})
+				uni.request({
+					url: this.$apiHost + '/Work/getStar',
+					data: {
+						uuid: getApp().globalData.uuid,
+						sex: this.tempGender,
+						name: this.formData.nickname,
+						content: this.formData.description,
+						act: 'submit',
+					},
+					header: {
+						"content-type": "application/json",
+						'sign': getApp().globalData.headerSign
+					},
+					// 设置60秒超时
+					timeout: 10000,
+					success: (res) => {
+						console.log("res.data", res.data);
+						uni.showToast({
+							title: res.data.str,
+							icon: 'none',
+							duration: 2000
+						});
+						if (res.data.success === "yes") {
+							setTimeout(() => {
+								that.getStar('get');
+							}, 300);
+						}
+					},
+					fail: (err) => {
+						console.error('请求失败：', err);
+						// 显示错误提示
+						uni.showToast({
+							title: '网络请求失败，请重试',
+							icon: 'none',
+							duration: 2000
+						});
+					},
+					complete: () => {
+						uni.hideLoading()
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import './myStar.scss';
+</style>

pages/my/myStar.scss

@@ -1,501 +1,399 @@
 .star-container {
-	width: 100%;
-	min-height: 100vh;
-	background-color: #f5f5f5;
-	
-	.loading-area {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		background: rgba(255,255,255,0.9);
-		
-		.loading-wrapper {
-			width: 400rpx;
-			height: 400rpx;
-			position: relative;
-			
-			.center-circle {
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				width: 100rpx;
-				height: 100rpx;
-				margin: -50rpx 0 0 -50rpx;
-				background: #1E90FF;
-				border-radius: 50%;
-				animation: rotate 2s linear infinite;
-				
-				&::after {
-					content: '';
-					position: absolute;
-					top: 8rpx;
-					left: 8rpx;
-					right: 8rpx;
-					bottom: 8rpx;
-					background: #fff;
-					border-radius: 50%;
-					opacity: 0.3;
-				}
-			}
-			
-			.orbit-balls {
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				animation: rotate 2s linear infinite;
-				
-				.ball {
-					position: absolute;
-					width: 100%;
-					height: 100%;
-					left: 0;
-					top: 0;
-					
-					.ball-item {
-						position: absolute;
-						width: 20rpx;
-						height: 20rpx;
-						background: var(--color);
-						border-radius: 50%;
-						top: 0;
-						left: 50%;
-						margin-left: -10rpx;
-						animation: moveBall 3s ease-in infinite;
-						animation-delay: var(--delay);
-					}
-				}
-			}
-		}
-		
-		.loading-text {
-			margin-top: 40rpx;
-			font-size: 28rpx;
-			color: #666;
-		}
-	}
-	
-	.star-content {
-		width: 100%;
-		padding: 20rpx;
-	}
-	
-	.gender-popup {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background: rgba(0, 0, 0, 0.5);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		z-index: 1000;
-		
-		.popup-content {
-			width: 600rpx;
-			background: #FFFFFF;
-			border-radius: 24rpx;
-			padding: 40rpx;
-			
-			.popup-title {
-				font-size: 36rpx;
-				color: #333;
-				text-align: center;
-				font-weight: 500;
-				margin-bottom: 40rpx;
-			}
-			
-			.gender-cards {
-				display: flex;
-				justify-content: space-between;
-				margin-bottom: 40rpx;
-				
-				.gender-card {
-					width: 240rpx;
-					height: 280rpx;
-					border-radius: 16rpx;
-					border: 2rpx solid #EEEEEE;
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-					position: relative;
-					transition: all 0.3s;
-					
-					image {
-						width: 160rpx;
-						height: 160rpx;
-						margin-bottom: 20rpx;
-					}
-					
-					text {
-						font-size: 28rpx;
-						color: #333;
-					}
-					
-					.check-icon {
-						position: absolute;
-						top: 16rpx;
-						right: 16rpx;
-						width: 40rpx;
-						height: 40rpx;
-					}
-					
-					&.selected {
-						border-color: #1E90FF;
-						background: rgba(30, 144, 255, 0.05);
-					}
-				}
-			}
-			
-			.confirm-btn {
-				height: 88rpx;
-				background: #9C27B0;
-				border-radius: 44rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #FFFFFF;
-				font-size: 32rpx;
-				font-weight: 500;
-				
-				&:active {
-					opacity: 0.8;
-				}
-			}
-		}
-	}
-	
-	.character-page {
-		width: 100%;
-		min-height: 100vh;
-		background-color: #f5f5f5;
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		
-		.character-container {
-			flex: 1;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			padding: 40rpx;
-			margin-bottom: 120rpx; // 为底部按钮留出空间
-			
-			.character-image {
-				width: 100%;
-				height: 800rpx; // 调整角色图片高度
-				object-fit: contain;
-			}
-		}
-		
-		.bottom-button {
-			position: fixed;
-			bottom: 40rpx;
-			left: 40rpx;
-			right: 40rpx;
-			height: 98rpx;
-			background: #333333;
-			border-radius: 49rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: #FFFFFF;
-			font-size: 32rpx;
-			font-weight: 500;
-			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
-			transition: all 0.2s ease;
-			
-			&:active {
-				opacity: 0.95;
-				transform: scale(0.98);
-			}
-		}
-	}
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+
+  .loading-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: url("../../static/me/loadBackground.png") no-repeat top center /
+        100% auto,
+      #fff;
+
+    .svga-player {
+      width: 200px;
+      height: 200px;
+    }
+  }
+
+  .star-content {
+    width: 100%;
+    padding: 20rpx;
+  }
+
+  .gender-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: top center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .character-page {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .character-container {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 40rpx;
+      margin-bottom: 120rpx; // 为底部按钮留出空间
+
+      .character-image {
+        width: 100%;
+        height: 800rpx; // 调整角色图片高度
+        object-fit: contain;
+      }
+    }
+
+    .bottom-button {
+      position: fixed;
+      bottom: 40rpx;
+      left: 40rpx;
+      right: 40rpx;
+      height: 98rpx;
+      background: #333333;
+      border-radius: 49rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+      font-size: 32rpx;
+      font-weight: 500;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+      transition: all 0.2s ease;
+
+      &:active {
+        opacity: 0.95;
+        transform: scale(0.98);
+      }
+    }
+  }
 }
 
 @keyframes rotate {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(-360deg);
-	}
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
 }
 
 @keyframes moveBall {
-	0% {
-		transform: translateY(0) scale(1);
-		opacity: 1;
-	}
-	98% {
-		transform: translateY(180rpx) scale(0.1);
-		opacity: 0.2;
-	}
-	99% {
-		transform: translateY(180rpx) scale(0.01);
-		opacity: 0;
-	}
-	100% {
-		transform: translateY(0) scale(1);
-		opacity: 0;
-	}
+  0% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+  98% {
+    transform: translateY(180rpx) scale(0.1);
+    opacity: 0.2;
+  }
+  99% {
+    transform: translateY(180rpx) scale(0.01);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 0;
+  }
 }
 
 .form-page {
-	width: 100%;
-	min-height: 100vh;
-	background-color: #ffffff;
-	padding: 30rpx;
-	box-sizing: border-box;
-	
-	.form-group {
-		margin-bottom: 40rpx;
-		
-		.label {
-			display: flex;
-			align-items: center;
-			margin-bottom: 16rpx;
-			font-size: 28rpx;
-			color: #333;
-			
-			.required {
-				color: #ff4d4f;
-				margin-right: 8rpx;
-				
-				&.error {
-					animation: shake 0.5s ease-in-out;
-				}
-			}
-		}
-		
-		.input {
-			width: 100%;
-			height: 88rpx;
-			background: #f5f5f5;
-			border-radius: 12rpx;
-			padding: 0 24rpx;
-			font-size: 28rpx;
-			
-			&.error {
-				border: 2rpx solid #ff4d4f;
-			}
-		}
-		
-		.gender-options {
-			display: flex;
-			gap: 20rpx;
-			
-			.gender-option {
-				flex: 1;
-				height: 80rpx;
-				background: #f5f5f5;
-				border-radius: 40rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-size: 28rpx;
-				color: #666;
-				transition: all 0.3s;
-				
-				&.selected {
-					background: #333;
-					color: #fff;
-				}
-			}
-		}
-		
-		.textarea-container {
-			position: relative;
-			
-			.textarea {
-				width: 100%;
-				height: 240rpx;
-				background: #f5f5f5;
-				border-radius: 12rpx;
-				padding: 24rpx;
-				font-size: 28rpx;
-				
-				&.error {
-					border: 2rpx solid #ff4d4f;
-				}
-			}
-			
-			.word-count {
-				position: absolute;
-				right: 24rpx;
-				bottom: 24rpx;
-				font-size: 24rpx;
-				color: #999;
-			}
-		}
-		
-		.tags-scroll {
-			width: 100%;
-			white-space: nowrap;
-			
-			.tags-container {
-				display: inline-flex;
-				padding: 20rpx 0;
-				gap: 20rpx;
-				
-				.tag {
-					padding: 16rpx 32rpx;
-					background: #f5f5f5;
-					border-radius: 32rpx;
-					font-size: 26rpx;
-					color: #666;
-					transition: all 0.3s;
-					
-					&.selected {
-						background: #333;
-						color: #fff;
-					}
-				}
-			}
-		}
-	}
-	
-	.submit-button {
-		position: fixed;
-		bottom: 40rpx;
-		left: 40rpx;
-		right: 40rpx;
-		height: 98rpx;
-		background: #333333;
-		border-radius: 49rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #FFFFFF;
-		font-size: 32rpx;
-		font-weight: 500;
-		transition: all 0.2s ease;
-		
-		&:active {
-			opacity: 0.95;
-			transform: scale(0.98);
-		}
-	}
+  width: 100%;
+  min-height: 100vh;
+  background: url("../../static/me/cz_bg_top.png") no-repeat top center / 100%
+      auto,
+    #f2f6f2;
+  padding: 30rpx;
+  box-sizing: border-box;
+  .reserveASeat {
+    width: 100vh;
+    height: calc(108rpx + var(--status-bar-height));
+  }
+  .PageHeader {
+    background: url("../../static/me/cz_bg_top.png") no-repeat top center / 100%
+        auto,
+      #f2f6f2;
+    background-position-y: var(--status-bar-height);
+  }
+  .form-group {
+    margin-bottom: 20rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    padding-bottom: 26rpx;
+    .label {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16rpx;
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #1f1f1f;
+      font-family: "PingFang SC-Bold";
+      .required {
+        color: #ff4d4f;
+        margin-right: 8rpx;
+        display: none;
+
+        &.error {
+          animation: shake 0.5s ease-in-out;
+        }
+      }
+    }
+
+    .input {
+      width: 100%;
+      height: 88rpx;
+      padding: 0 24rpx;
+      font-size: 28rpx;
+      background: #f2f6f2;
+      border-radius: 16rpx;
+
+      &.error {
+        border: 2rpx solid #ff4d4f;
+      }
+    }
+
+    .gender-options {
+      display: flex;
+      gap: 20rpx;
+
+      .gender-option {
+        width: 152rpx;
+        height: 64rpx;
+        border-radius: 16rpx;
+        border: 2rpx solid #1f1f1f;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #1f1f1f;
+        font-family: "PingFang SC-Bold";
+        image {
+          width: 32rpx;
+          height: 32rpx;
+          margin-bottom: -5rpx;
+          margin-right: 4rpx;
+        }
+        .other {
+          image {
+            margin-top: -8rpx;
+          }
+        }
+        &.selected {
+          background: #f7ffea;
+          border-color: #7ebc00;
+        }
+      }
+    }
+
+    .textarea-container {
+      position: relative;
+
+      .textarea {
+        width: 100%;
+        height: 240rpx;
+        background: #f5f5f5;
+        border-radius: 12rpx;
+        padding: 24rpx;
+        font-size: 28rpx;
+
+        &.error {
+          border: 2rpx solid #ff4d4f;
+        }
+      }
+
+      .word-count {
+        position: absolute;
+        right: 24rpx;
+        bottom: 24rpx;
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+
+    .tags-scroll {
+      width: 100%;
+      white-space: nowrap;
+    }
+    .tags-container {
+      display: inline-flex;
+      padding: 20rpx 0;
+      gap: 20rpx;
+
+      .tag {
+      
+        &.selected {
+          background: #333;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .submit-button {
+    position: fixed;
+    bottom: 40rpx;
+    left: 40rpx;
+    right: 40rpx;
+    height: 98rpx;
+    background: #333333;
+    border-radius: 49rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 32rpx;
+    font-weight: 500;
+    transition: all 0.2s ease;
+
+    &:active {
+      opacity: 0.95;
+      transform: scale(0.98);
+    }
+  }
 }
 
 @keyframes shake {
-	0%, 100% { transform: translateX(0); }
-	25% { transform: translateX(-5rpx); }
-	75% { transform: translateX(5rpx); }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5rpx);
+  }
+  75% {
+    transform: translateX(5rpx);
+  }
 }
 
 .character-info {
-	width: 100%;
-	min-height: 100vh;
-	background-color: #ffffff;
-	position: relative;
-	padding-bottom: 120rpx;
-	
-	.info-container {
-		padding: 30rpx;
-		
-		.character-portrait {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			margin-bottom: 40rpx;
-			
-			.portrait-image {
-				width: 100%;
-				height: 600rpx;
-				object-fit: contain;
-			}
-			
-			.character-name {
-				font-size: 40rpx;
-				font-weight: 600;
-				color: #333;
-				margin-top: 20rpx;
-			}
-		}
-		
-		.info-section {
-			background: #f8f8f8;
-			border-radius: 20rpx;
-			padding: 30rpx;
-			
-			.section-title {
-				font-size: 32rpx;
-				font-weight: 500;
-				color: #333;
-				margin-bottom: 20rpx;
-				position: relative;
-				padding-left: 20rpx;
-				
-				&::before {
-					content: '';
-					position: absolute;
-					left: 0;
-					top: 50%;
-					transform: translateY(-50%);
-					width: 6rpx;
-					height: 28rpx;
-					background: #9C27B0;
-					border-radius: 3rpx;
-				}
-			}
-			
-			.description-box {
-				background: #ffffff;
-				border-radius: 16rpx;
-				padding: 24rpx;
-				margin-bottom: 30rpx;
-				
-				.description-text {
-					font-size: 28rpx;
-					color: #666;
-					line-height: 1.6;
-				}
-			}
-			
-			.tags-box {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 16rpx;
-				
-				.tag-item {
-					padding: 12rpx 24rpx;
-					background: #f0f0f0;
-					border-radius: 28rpx;
-					font-size: 24rpx;
-					color: #666;
-				}
-			}
-		}
-	}
-	
-	.join-button {
-		position: fixed;
-		bottom: 40rpx;
-		left: 40rpx;
-		right: 40rpx;
-		height: 98rpx;
-		background: linear-gradient(to right, #9C27B0, #7B1FA2);
-		border-radius: 49rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #FFFFFF;
-		font-size: 32rpx;
-		font-weight: 500;
-		box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.3);
-		transition: all 0.2s ease;
-		
-		&:active {
-			transform: scale(0.98);
-			opacity: 0.95;
-		}
-	}
-}
+  width: 100%;
+  min-height: 100vh;
+  background-color: #ffffff;
+  position: relative;
+  padding-bottom: 120rpx;
+
+  .info-container {
+    padding: 30rpx;
+
+    .character-portrait {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 40rpx;
+
+      .portrait-image {
+        width: 100%;
+        height: 600rpx;
+        object-fit: contain;
+      }
+
+      .character-name {
+        font-size: 40rpx;
+        font-weight: 600;
+        color: #333;
+        margin-top: 20rpx;
+      }
+    }
+
+    .info-section {
+      background: #f8f8f8;
+      border-radius: 20rpx;
+      padding: 30rpx;
+
+      .section-title {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 20rpx;
+        position: relative;
+        padding-left: 20rpx;
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 6rpx;
+          height: 28rpx;
+          background: #9c27b0;
+          border-radius: 3rpx;
+        }
+      }
+
+      .description-box {
+        background: #ffffff;
+        border-radius: 16rpx;
+        padding: 24rpx;
+        margin-bottom: 30rpx;
+
+        .description-text {
+          font-size: 28rpx;
+          color: #666;
+          line-height: 1.6;
+        }
+      }
+
+      .tags-box {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16rpx;
+
+        .tag-item {
+          padding: 12rpx 24rpx;
+          background: #f0f0f0;
+          border-radius: 28rpx;
+          font-size: 24rpx;
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .join-button {
+    position: fixed;
+    bottom: 40rpx;
+    left: 40rpx;
+    right: 40rpx;
+    height: 98rpx;
+    background: linear-gradient(to right, #9c27b0, #7b1fa2);
+    border-radius: 49rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+    font-size: 32rpx;
+    font-weight: 500;
+    box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.3);
+    transition: all 0.2s ease;
+
+    &:active {
+      transform: scale(0.98);
+      opacity: 0.95;
+    }
+  }
+}

pages/my/myStar.vue

@@ -1,62 +1,39 @@
 <template>
 	<view class="star-container">
-		<!-- 性别选择弹窗 -->
-		<view class="gender-popup" v-if="!selectedGender && !showInfo">
-			<view class="popup-content">
-				<view class="popup-title">请选择性别</view>
-
-				<view class="gender-cards">
-					<view class="gender-card" :class="{'selected': tempGender === 'male'}" @tap="selectGender('male')">
-						<image src="/static/home/nan.png" mode="aspectFit"></image>
-						<text>男生</text>
-						<image v-if="tempGender === 'male'" class="check-icon" src="/static/gender/check.png"
-							mode="aspectFit">
-						</image>
-					</view>
-
-					<view class="gender-card" :class="{'selected': tempGender === 'female'}"
-						@tap="selectGender('female')">
-						<image src="/static/home/nv.png" mode="aspectFit"></image>
-						<text>女生</text>
-						<image v-if="tempGender === 'female'" class="check-icon" src="/static/gender/check.png"
-							mode="aspectFit">
-						</image>
-					</view>
-				</view>
-
-				<view class="confirm-btn" @tap="confirmGender">
-					创建星灵
-				</view>
-			</view>
+		<PageHeader title="" class="PageHeader" v-if="state == 1 && false">
+			<template slot="center"> </template>
+		</PageHeader>
+		<!-- 星灵基因重组仓弹窗 -->
+		<view class="gender-popup" v-if="!noteContent && !showInfo && state == 0">
+			<NicknamePopup title="星灵基因重组仓" subtitle="" class="openContentPopUpWindow" ref="openContentPopUpWindow">
+				<template slot="content">
+					<uv-textarea v-model="noteContent" maxlength="200" count autoHeight
+						placeholder="可描述你想要重新赋予Ta的形象、性别、性格、身份、兴趣爱好等（不会展示给其他人，仅你自己知道），示例：有一头波浪状的橙色头发，喜欢运动的阳光男孩..."></uv-textarea>
+					<view class="btn-box" @tap="confirmGender">创建星灵</view>
+				</template>
+			</NicknamePopup>
 		</view>
 
 		<!-- 加载动画区域 -->
 		<view class="loading-area" v-if="isLoading">
-			<view class="loading-wrapper">
-				<!-- 中心蓝色旋转圆 -->
-				<view class="center-circle"></view>
-
-				<!-- 外围16个小球 -->
-				<view class="orbit-balls">
-					<view class="ball" v-for="(item,index) in 16" :key="index" :style="{
-							transform: `rotate(${index * 22.5}deg)`,
-							'--delay': `${index * 0.2}s`,
-							'--color': ballColors[index % 8]
-						}">
-						<view class="ball-item"></view>
-					</view>
-				</view>
+			<image src="../../static/me/loadAnimation.gif" mode="widthFix"></image>
+		</view>
+
+		<!-- 角色展示页面 -->
+		<view class="character-page" v-else-if="noteContent || true">
+			<view class="character-container">
+				<image :src="starImg||'https://e.zhichao.art/AI_images/b_3_92.png'" mode="aspectFit" class="character-image"></image>
 			</view>
-			<text class="loading-text">正在加载...</text>
+			<view class="bottom-button" @tap="goToSetProfile"> 设置星灵简介 </view>
 		</view>
 
 		<!-- 角色信息展示页面 -->
-		<view class="character-info" v-else-if="showInfo">
+		<view class="character-info" v-else-if="showInfo ">
 			<view class="info-container">
 				<!-- 角色立绘区域 -->
 				<view class="character-portrait">
 					<image :src="starInfo.image" mode="aspectFit" class="portrait-image"></image>
-					<text class="character-name">{{starInfo.name}}</text>
+					<text class="character-name">{{ starInfo.name }}</text>
 				</view>
 
 				<!-- 角色信息板块 -->
@@ -65,26 +42,29 @@
 
 					<!-- 人物简介 -->
 					<view class="description-box">
-						<text class="description-text">{{starInfo.content}}</text>
+						<text class="description-text">{{ starInfo.content }}</text>
 					</view>
 
 					<!-- 标签展示 -->
 					<view class="tags-box">
 						<view class="tag-item" v-for="tag in formData.tags" :key="tag">
-							{{tag}}
+							{{ tag }}
 						</view>
 					</view>
 				</view>
 			</view>
 
 			<!-- 底部按钮 -->
-			<view class="join-button" @tap="handleJoin">
-				入驻星球
-			</view>
+			<view class="join-button" @tap="handleJoin"> 入驻星球 </view>
 		</view>
 
 		<!-- 表单页面 -->
 		<view class="form-page" v-else-if="showForm">
+			<PageHeader title="设置星灵简介" class="PageHeader">
+				<template slot="center"> </template>
+			</PageHeader>
+			<view class="reserveASeat"></view>
+
 			<form @submit="submitForm">
 				<view class="form-group">
 					<view class="label">
@@ -92,14 +72,29 @@
 						<text>昵称</text>
 					</view>
 					<input class="input" v-model="formData.nickname" placeholder="给星灵取个名字"
-						:class="{'error': showError && !formData.nickname}" />
+						:class="{ error: showError && !formData.nickname }" />
 				</view>
 
 				<view class="form-group">
 					<view class="label">性别</view>
 					<view class="gender-options">
-						<view class="gender-option">
-							已选{{starInfo.sex==1?'男':'女'}}
+						<view class="gender-option" :class="sex == 'male' ? 'selected' : ''">
+							<view class="gender-icon male" @tap="selectGender('male')">
+								<image src="../../static/me/wd_icon_nan.png" mode="aspectFit"></image>
+								男性
+							</view>
+						</view>
+						<view class="gender-option" :class="sex == 'female' ? 'selected' : ''">
+							<view class="gender-icon female" @tap="selectGender('female')">
+								<image src="../../static/me/wd_icon_nv.png" mode="aspectFit"></image>
+								女性
+							</view>
+						</view>
+						<view class="gender-option" :class="sex == 'other' ? 'selected' : ''">
+							<view class="gender-icon other" @tap="selectGender('other')">
+								<image src="../../static/me/wd_icon_qita.png" mode="aspectFit"></image>
+								其它
+							</view>
 						</view>
 					</view>
 				</view>
@@ -111,37 +106,33 @@
 					</view>
 					<view class="textarea-container">
 						<textarea class="textarea" v-model="formData.description"
-							placeholder="填写这个角色的人物介绍，例如性格、身份、背景与历程..." :maxlength="255"
-							:class="{'error': showError && !formData.description}" />
-						<text class="word-count">{{formData.description.length}}/255</text>
+							placeholder="填写这个角色的人物介绍，例如性格、身份、背景与历程..." :maxlength="500"
+							:class="{ error: showError && !formData.description }" autoHeight />
+						<text class="word-count">{{ formData.description.length }}/500</text>
 					</view>
 				</view>
 
 				<view class="form-group">
 					<view class="label">人物标签</view>
-					<scroll-view class="tags-scroll" scroll-x="true" show-scrollbar="false">
+					<!-- <scroll-view class="tags-scroll" scroll-x="true" show-scrollbar="false">
 						<view class="tags-container">
 							<view class="tag" v-for="tag in predefinedTags" :key="tag">
-								{{tag}}
+								{{ tag }}
 							</view>
 						</view>
-					</scroll-view>
+					</scroll-view> -->
+					<view class="tags-container">
+						<!-- <view class="tag" :class="{ active: tagSet.has(tag) }" v-for="tag in predefinedTags" :key="tag"
+							@tap="switchTag(tag)">
+							{{ tag }}
+						</view> -->
+						<uni-data-checkbox mode="tag" multiple v-model="selectTags"
+							:localdata="predefinedTags"></uni-data-checkbox>
+					</view>
 				</view>
 			</form>
 
-			<view class="submit-button" @tap="submitStar">
-				确定并提交
-			</view>
-		</view>
-
-		<!-- 角色展示页面 -->
-		<view class="character-page" v-else-if="selectedGender">
-			<view class="character-container">
-				<image :src="starImg" mode="aspectFit" class="character-image"></image>
-			</view>
-			<view class="bottom-button" @tap="goToSetProfile">
-				设置星灵简介
-			</view>
+			<view class="submit-button" @tap="submitStar"> 确定并提交 </view>
 		</view>
 
 		<!-- 收藏内容区域 -->
@@ -154,204 +145,280 @@
 </template>
 
 <script>
-	import tabbarView from "@/components/tabbar/tabbar.vue"
+import tabbarView from "@/components/tabbar/tabbar.vue";
+
+export default {
+	components: {
+		tabbarView,
+	},
+	data() {
+		return {
+			isLoading: false,
+			selectedGender: null,
+			tempGender: null,
+			tabbars: [],
+			ballColors: [
+				"#FF6B6B", // 红色
+				"#4ECDC4", // 青色
+				"#45B7D1", // 蓝色
+				"#96CEB4", // 绿色
+				"#FFEEAD", // 黄色
+				"#D4A5A5", // 粉色
+				"#9A8194", // 紫色
+				"#FF9F1C", // 橙色
+			],
+			showForm: false,
+			showError: false,
+			formData: {
+				nickname: "",
+				gender: "其他",
+				description: "",
+				tags: [],
+			},
+			predefinedTags: [],
+			showInfo: false,
+			starImg: "",
+			noteContent: "",
+			starInfo: {},
+			state: 1,
+			sex: "",
+			selectTags: [],
+		};
+	},
+	onLoad() {
+		this.getStar("get");
+	},
+	methods: {
+		confirmGender() {
+			if (!this.noteContent) return;
+			// this.selectedGender = this.noteContent;
+			this.isLoading = true;
 
-	export default {
-		components: {
-			tabbarView
+			this.getStar("make");
 		},
-		data() {
-			return {
-				isLoading: false,
-				selectedGender: null,
-				tempGender: null,
-				tabbars: [],
-				ballColors: [
-					'#FF6B6B', // 红色
-					'#4ECDC4', // 青色
-					'#45B7D1', // 蓝色
-					'#96CEB4', // 绿色
-					'#FFEEAD', // 黄色
-					'#D4A5A5', // 粉色
-					'#9A8194', // 紫色
-					'#FF9F1C' // 橙色
-				],
-				showForm: false,
-				showError: false,
-				formData: {
-					nickname: '',
-					gender: '其他',
-					description: '',
-					tags: []
-				},
-				predefinedTags: [],
-				showInfo: false,
-				starImg: '',
-				starInfo: {}
+		goToSetProfile() {
+			this.showForm = true;
+		},
+		toggleTag(tag) {
+			const index = this.formData.tags.indexOf(tag);
+			if (index > -1) {
+				this.formData.tags.splice(index, 1);
+			} else {
+				this.formData.tags.push(tag);
 			}
 		},
-		onLoad() {
-			this.getStar('get');
+		handleJoin() {
+			console.log("入驻星球");
+			// 处理入驻逻辑
 		},
-		methods: {
-			selectGender(gender) {
-				this.tempGender = gender;
-			},
-			confirmGender() {
-				if (!this.tempGender) return;
-				this.selectedGender = this.tempGender;
+		getStar(act) {
+			let that = this;
+			console.log("uuid", getApp().globalData.uuid);
+
+			// 设置加载状态
+			if (act === "make") {
 				this.isLoading = true;
+			}
 
-				this.getStar('make');
-			},
-			goToSetProfile() {
-				this.showForm = true;
-			},
-			toggleTag(tag) {
-				const index = this.formData.tags.indexOf(tag);
-				if (index > -1) {
-					this.formData.tags.splice(index, 1);
-				} else {
-					this.formData.tags.push(tag);
-				}
-			},
-			handleJoin() {
-				console.log('入驻星球');
-				// 处理入驻逻辑
-			},
-			getStar(act) {
-				let that = this;
-				console.log("uuid", getApp().globalData.uuid);
-
-				// 设置加载状态
-				if (act === 'make') {
-					this.isLoading = true;
-				}
-
-				uni.request({
-					url: this.$apiHost + '/Work/getStar',
-					data: {
-						uuid: getApp().globalData.uuid,
-						sex: this.tempGender,
-						act: act,
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					// 设置60秒超时
-					timeout: 60000,
-					success: (res) => {
-						console.log("res.data", res.data);
-						if (res.data.have == 0) {
-							this.showInfo = false;
-							this.starImg = res.data.image;
-						} else {
-							//首次进来获取到了
-							this.showInfo = true;
-						}
-						if (res.data.success === "yes") {
-							this.starImg = res.data.image;
-						}
-						if (res.data.info && res.data.info.tags != "") {
-							let img2 = [];
-							var n2 = res.data.info.tags.split(",");
-							n2.map((filePath) => {
-								img2.push(filePath)
-							})
-							this.predefinedTags = img2;
-							this.formData.tags = img2;
-						}
-						this.starInfo = res.data.info || {};
-						this.formData.description = this.starInfo.content;
-						if (act == 'make') {
-							// 模拟加载过程
-							setTimeout(() => {
-								that.isLoading = false;
-							}, 300);
-						}
-					},
-					fail: (err) => {
-						console.error('请求失败：', err);
-						// 显示错误提示
-						uni.showToast({
-							title: '网络请求失败，请重试',
-							icon: 'none',
-							duration: 2000
-						});
-
-						// 重置加载状态
-						if (act === 'make') {
+			uni.request({
+				url: this.$apiHost + "/Work/getStar",
+				data: {
+					uuid: getApp().globalData.uuid,
+					sex: this.tempGender,
+					// noteContent: this.noteContent,
+					act: act,
+				},
+				header: {
+					"content-type": "application/json",
+					sign: getApp().globalData.headerSign,
+				},
+				// 设置60秒超时
+				timeout: 60000,
+				success: (res) => {
+					console.log("res.data", res.data);
+					// res.data.have = 0
+					if (res.data.have == 0) {
+						this.showInfo = false;
+						this.starImg = res.data.image;
+					} else {
+						//首次进来获取到了
+						this.showInfo = true;
+					}
+					this.openContentPopUpWindow();
+					if (res.data.success === "yes") {
+						this.starImg = res.data.image;
+					}
+					if (res.data.info && res.data.info.tags != "") {
+						let tags = res.data.info.tags.split(",");
+						this.predefinedTags = tags.map(tag => ({
+							text: tag,
+							value: tag
+						}));
+					}
+					this.starInfo = res.data.info || {};
+					console.log("starInfo", this.starInfo);
+
+					this.formData.description = this.starInfo.content;
+					if (act == "make") {
+						// 模拟加载过程
+						setTimeout(() => {
 							that.isLoading = false;
-						}
-
-						// 如果是网络超时，自动重试一次
-						if (err.errMsg.includes('timeout')) {
-							setTimeout(() => {
-								console.log('请求超时，正在重试...');
-								that.getStar(act);
-							}, 1000);
-						}
-					},
-					complete: () => {
-						// 确保在任何情况下都能重置加载状态
-						if (act === 'make' && this.isLoading) {
-							this.isLoading = false;
-						}
+						}, 300);
 					}
-				});
-			},
-			submitStar() {
-				let that = this;
-				uni.showLoading({
-					mask: true
-				})
-				uni.request({
-					url: this.$apiHost + '/Work/getStar',
-					data: {
-						uuid: getApp().globalData.uuid,
-						sex: this.tempGender,
-						name: this.formData.nickname,
-						content: this.formData.description,
-						act: 'submit',
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					// 设置60秒超时
-					timeout: 10000,
-					success: (res) => {
-						console.log("res.data", res.data);
-						uni.showToast({
-							title: res.data.str,
-							icon: 'none',
-							duration: 2000
-						});
-						if (res.data.success === "yes") {
-							setTimeout(() => {
-								that.getStar('get');
-							}, 300);
-						}
-					},
-					fail: (err) => {
-						console.error('请求失败：', err);
-						// 显示错误提示
-						uni.showToast({
-							title: '网络请求失败，请重试',
-							icon: 'none',
-							duration: 2000
-						});
-					},
-					complete: () => {
-						uni.hideLoading()
+				},
+				fail: (err) => {
+					console.error("请求失败：", err);
+					// 显示错误提示
+					uni.showToast({
+						title: "网络请求失败，请重试",
+						icon: "none",
+						duration: 2000,
+					});
+
+					// 重置加载状态
+					if (act === "make") {
+						that.isLoading = false;
 					}
-				});
+
+					// 如果是网络超时，自动重试一次
+					if (err.errMsg.includes("timeout")) {
+						setTimeout(() => {
+							console.log("请求超时，正在重试...");
+							that.getStar(act);
+						}, 1000);
+					}
+				},
+				complete: () => {
+					// 确保在任何情况下都能重置加载状态
+					if (act === "make" && this.isLoading) {
+						this.isLoading = false;
+					}
+				},
+			});
+		},
+		submitStar() {
+			let that = this;
+			uni.showLoading({
+				mask: true,
+			});
+			uni.request({
+				url: this.$apiHost + "/Work/getStar",
+				data: {
+					uuid: getApp().globalData.uuid,
+					sex: this.tempGender,
+					// noteContent: this.noteContent,
+					name: this.formData.nickname,
+					content: this.formData.description,
+					act: "submit",
+				},
+				header: {
+					"content-type": "application/json",
+					sign: getApp().globalData.headerSign,
+				},
+				// 设置60秒超时
+				timeout: 10000,
+				success: (res) => {
+					console.log("res.data", res.data);
+					uni.showToast({
+						title: res.data.str,
+						icon: "none",
+						duration: 2000,
+					});
+					if (res.data.success === "yes") {
+						setTimeout(() => {
+							that.getStar("get");
+						}, 300);
+					}
+				},
+				fail: (err) => {
+					console.error("请求失败：", err);
+					// 显示错误提示
+					uni.showToast({
+						title: "网络请求失败，请重试",
+						icon: "none",
+						duration: 2000,
+					});
+				},
+				complete: () => {
+					uni.hideLoading();
+				},
+			});
+		},
+		selectGender(option) {
+			this.formData.sex = option;
+			this.sex = option;
+		},
+
+		openContentPopUpWindow() {
+			if (this.$refs.openContentPopUpWindow) {
+				this.$refs.openContentPopUpWindow.open();
 			}
-		}
-	}
+		},
+		closeContentPopUpWindow() {
+			if (this.$refs.openContentPopUpWindow) {
+				this.$refs.openContentPopUpWindow.close();
+			}
+		},
+
+	},
+};
 </script>
 
 <style lang="scss">
-	@import './myStar.scss';
+@import "./myStar.scss";
+
+.openContentPopUpWindow {
+	::v-deep.uv-textarea {
+		width: 694rpx !important;
+		border-radius: 20rpx !important;
+		border: 1rpx solid #000000 !important;
+		margin: 0 auto;
+		margin-bottom: 44rpx;
+		min-height: 300rpx;
+		padding-bottom: 40rpx;
+
+		.uv-textarea__field {
+			min-height: 200rpx !important;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #999999;
+		}
+	}
+}
+
+.textarea-container {
+	.textarea {
+		background: #f2f6f2 !important;
+		min-height: 100rpx;
+	}
+}
+
+.tags-container {
+
+
+	::v-deep.checklist-box {
+
+	 
+		border-radius: 16rpx;
+		border: 2rpx solid #1f1f1f !important;
+		background-color: #fff !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.checklist-text {
+ 
+			font-size: 28rpx;
+			color: #1f1f1f;
+			font-family: "PingFang SC-Bold" !important;
+		}
+		&.is-checked{
+			background: #f7ffea !important;
+			border-color: #7ebc00 !important;
+			.checklist-text {
+			color:#1f1f1f !important;
+			}
+		}
+	}
+}
 </style>

uni_modules/uni-data-checkbox/changelog.md

@@ -0,0 +1,51 @@
+## 1.0.6（2024-10-22）
+- 新增 当 multiple 为 false 且传递的 value 为 数组时，使用数组第一项用作反显
+## 1.0.5（2024-03-20）
+- 修复 单选模式下选中样式不生效的bug
+## 1.0.4（2024-01-27）
+- 修复 修复错别字chagne为change
+## 1.0.3（2022-09-16）
+- 可以使用 uni-scss 控制主题色
+## 1.0.2（2022-06-30）
+- 优化 在 uni-forms 中的依赖注入方式
+## 1.0.1（2022-02-07）
+- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
+## 1.0.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-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+## 0.2.5（2021-08-23）
+- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
+## 0.2.4（2021-08-17）
+- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
+## 0.2.3（2021-08-11）
+- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
+## 0.2.2（2021-07-30）
+- 优化 在uni-forms组件，与label不对齐的问题
+## 0.2.1（2021-07-27）
+- 修复 单选默认值为0不能选中的Bug
+## 0.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 0.1.11（2021-07-06）
+- 优化 删除无用日志
+## 0.1.10（2021-07-05）
+- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
+## 0.1.9（2021-07-05）
+- 修复 nvue 黑框样式问题
+## 0.1.8（2021-06-28）
+- 修复 selectedTextColor 属性不生效的Bug
+## 0.1.7（2021-06-02）
+- 新增 map 属性，可以方便映射text/value属性
+## 0.1.6（2021-05-26）
+- 修复 不关联服务空间的情况下组件报错的Bug
+## 0.1.5（2021-05-12）
+- 新增 组件示例地址
+## 0.1.4（2021-04-09）
+- 修复 nvue 下无法选中的问题
+## 0.1.3（2021-03-22）
+- 新增 disabled属性
+## 0.1.2（2021-02-24）
+- 优化 默认颜色显示
+## 0.1.1（2021-02-24）
+- 新增 支持nvue
+## 0.1.0（2021-02-18）
+- “暂无数据”显示居中

uni_modules/uni-data-checkbox/components/uni-data-checkbox/clientdb.js

@@ -0,0 +1,316 @@
+
+const events = {
+	load: 'load',
+	error: 'error'
+}
+const pageMode = {
+	add: 'add',
+	replace: 'replace'
+}
+
+const attrs = [
+	'pageCurrent',
+	'pageSize',
+	'collection',
+	'action',
+	'field',
+	'getcount',
+	'orderby',
+	'where'
+]
+
+export default {
+	data() {
+		return {
+			loading: false,
+			listData: this.getone ? {} : [],
+			paginationInternal: {
+				current: this.pageCurrent,
+				size: this.pageSize,
+				count: 0
+			},
+			errorMessage: ''
+		}
+	},
+	created() {
+		let db = null;
+		let dbCmd = null;
+
+		if(this.collection){
+			this.db = uniCloud.database();
+			this.dbCmd = this.db.command;
+		}
+
+		this._isEnded = false
+
+		this.$watch(() => {
+			let al = []
+			attrs.forEach(key => {
+				al.push(this[key])
+			})
+			return al
+		}, (newValue, oldValue) => {
+			this.paginationInternal.pageSize = this.pageSize
+
+			let needReset = false
+			for (let i = 2; i < newValue.length; i++) {
+				if (newValue[i] != oldValue[i]) {
+					needReset = true
+					break
+				}
+			}
+			if (needReset) {
+				this.clear()
+				this.reset()
+			}
+			if (newValue[0] != oldValue[0]) {
+				this.paginationInternal.current = this.pageCurrent
+			}
+
+			this._execLoadData()
+		})
+
+		// #ifdef H5
+		if (process.env.NODE_ENV === 'development') {
+			this._debugDataList = []
+			if (!window.unidev) {
+				window.unidev = {
+					clientDB: {
+						data: []
+					}
+				}
+			}
+			unidev.clientDB.data.push(this._debugDataList)
+		}
+		// #endif
+
+		// #ifdef MP-TOUTIAO
+		let changeName
+		let events = this.$scope.dataset.eventOpts
+		for (let i = 0; i < events.length; i++) {
+			let event = events[i]
+			if (event[0].includes('^load')) {
+				changeName = event[1][0][0]
+			}
+		}
+		if (changeName) {
+			let parent = this.$parent
+			let maxDepth = 16
+			this._changeDataFunction = null
+			while (parent && maxDepth > 0) {
+				let fun = parent[changeName]
+				if (fun && typeof fun === 'function') {
+					this._changeDataFunction = fun
+					maxDepth = 0
+					break
+				}
+				parent = parent.$parent
+				maxDepth--;
+			}
+		}
+		// #endif
+
+		// if (!this.manual) {
+		// 	this.loadData()
+		// }
+	},
+	// #ifdef H5
+	beforeDestroy() {
+		if (process.env.NODE_ENV === 'development' && window.unidev) {
+			let cd = this._debugDataList
+			let dl = unidev.clientDB.data
+			for (let i = dl.length - 1; i >= 0; i--) {
+				if (dl[i] === cd) {
+					dl.splice(i, 1)
+					break
+				}
+			}
+		}
+	},
+	// #endif
+	methods: {
+		loadData(args1, args2) {
+			let callback = null
+			if (typeof args1 === 'object') {
+				if (args1.clear) {
+					this.clear()
+					this.reset()
+				}
+				if (args1.current !== undefined) {
+					this.paginationInternal.current = args1.current
+				}
+				if (typeof args2 === 'function') {
+					callback = args2
+				}
+			} else if (typeof args1 === 'function') {
+				callback = args1
+			}
+
+			this._execLoadData(callback)
+		},
+		loadMore() {
+			if (this._isEnded) {
+				return
+			}
+			this._execLoadData()
+		},
+		refresh() {
+			this.clear()
+			this._execLoadData()
+		},
+		clear() {
+			this._isEnded = false
+			this.listData = []
+		},
+		reset() {
+			this.paginationInternal.current = 1
+		},
+		remove(id, {
+			action,
+			callback,
+			confirmTitle,
+			confirmContent
+		} = {}) {
+			if (!id || !id.length) {
+				return
+			}
+			uni.showModal({
+				title: confirmTitle || '提示',
+				content: confirmContent || '是否删除该数据',
+				showCancel: true,
+				success: (res) => {
+					if (!res.confirm) {
+						return
+					}
+					this._execRemove(id, action, callback)
+				}
+			})
+		},
+		_execLoadData(callback) {
+			if (this.loading) {
+				return
+			}
+			this.loading = true
+			this.errorMessage = ''
+
+			this._getExec().then((res) => {
+				this.loading = false
+				const {
+					data,
+					count
+				} = res.result
+				this._isEnded = data.length < this.pageSize
+
+				callback && callback(data, this._isEnded)
+				this._dispatchEvent(events.load, data)
+
+				if (this.getone) {
+					this.listData = data.length ? data[0] : undefined
+				} else if (this.pageData === pageMode.add) {
+					this.listData.push(...data)
+					if (this.listData.length) {
+						this.paginationInternal.current++
+					}
+				} else if (this.pageData === pageMode.replace) {
+					this.listData = data
+					this.paginationInternal.count = count
+				}
+
+				// #ifdef H5
+				if (process.env.NODE_ENV === 'development') {
+					this._debugDataList.length = 0
+					this._debugDataList.push(...JSON.parse(JSON.stringify(this.listData)))
+				}
+				// #endif
+			}).catch((err) => {
+				this.loading = false
+				this.errorMessage = err
+				callback && callback()
+				this.$emit(events.error, err)
+			})
+		},
+		_getExec() {
+			let exec = this.db
+			if (this.action) {
+				exec = exec.action(this.action)
+			}
+
+			exec = exec.collection(this.collection)
+
+			if (!(!this.where || !Object.keys(this.where).length)) {
+				exec = exec.where(this.where)
+			}
+			if (this.field) {
+				exec = exec.field(this.field)
+			}
+			if (this.orderby) {
+				exec = exec.orderBy(this.orderby)
+			}
+
+			const {
+				current,
+				size
+			} = this.paginationInternal
+			exec = exec.skip(size * (current - 1)).limit(size).get({
+				getCount: this.getcount
+			})
+
+			return exec
+		},
+		_execRemove(id, action, callback) {
+			if (!this.collection || !id) {
+				return
+			}
+
+			const ids = Array.isArray(id) ? id : [id]
+			if (!ids.length) {
+				return
+			}
+
+			uni.showLoading({
+				mask: true
+			})
+
+			let exec = this.db
+			if (action) {
+				exec = exec.action(action)
+			}
+
+			exec.collection(this.collection).where({
+				_id: dbCmd.in(ids)
+			}).remove().then((res) => {
+				callback && callback(res.result)
+				if (this.pageData === pageMode.replace) {
+					this.refresh()
+				} else {
+					this.removeData(ids)
+				}
+			}).catch((err) => {
+				uni.showModal({
+					content: err.message,
+					showCancel: false
+				})
+			}).finally(() => {
+				uni.hideLoading()
+			})
+		},
+		removeData(ids) {
+			let il = ids.slice(0)
+			let dl = this.listData
+			for (let i = dl.length - 1; i >= 0; i--) {
+				let index = il.indexOf(dl[i]._id)
+				if (index >= 0) {
+					dl.splice(i, 1)
+					il.splice(index, 1)
+				}
+			}
+		},
+		_dispatchEvent(type, data) {
+			if (this._changeDataFunction) {
+				this._changeDataFunction(data, this._isEnded)
+			} else {
+				this.$emit(type, data, this._isEnded)
+			}
+		}
+	}
+}

uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue

@@ -0,0 +1,853 @@
+<template>
+	<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
+		<template v-if="!isLocal">
+			<view class="uni-data-loading">
+				<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18"
+					:content-text="contentText"></uni-load-more>
+				<text v-else>{{mixinDatacomErrorMessage}}</text>
+			</view>
+		</template>
+		<template v-else>
+			<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}"
+				@change="change">
+				<label class="checklist-box"
+					:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+					:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''"
+						:checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')"
+						class="checkbox__inner" :style="item.styleIcon">
+						<view class="checkbox__inner-icon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
+					</view>
+				</label>
+			</checkbox-group>
+			<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="change">
+				<label class="checklist-box"
+					:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+					:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''"
+						:checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
+						:style="item.styleBackgroud">
+						<view class="radio__inner-icon" :style="item.styleIcon"></view>
+					</view>
+					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
+						<text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
+						<view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
+					</view>
+				</label>
+			</radio-group>
+		</template>
+	</view>
+</template>
+
+<script>
+	/**
+	 * DataChecklist 数据选择器
+	 * @description 通过数据渲染 checkbox 和 radio
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+	 * @property {String} mode = [default| list | button | tag] 显示模式
+	 * @value default  	默认横排模式
+	 * @value list		列表模式
+	 * @value button	按钮模式
+	 * @value tag 		标签模式
+	 * @property {Boolean} multiple = [true|false] 是否多选
+	 * @property {Array|String|Number} value 默认值
+	 * @property {Array} localdata 本地数据 ，格式 [{text:'',value:''}]
+	 * @property {Number|String} min 最小选择个数 ，multiple为true时生效
+	 * @property {Number|String} max 最大选择个数 ，multiple为true时生效
+	 * @property {Boolean} wrap 是否换行显示
+	 * @property {String} icon = [left|right]  list 列表模式下icon显示位置
+	 * @property {Boolean} selectedColor 选中颜色
+	 * @property {Boolean} emptyText 没有数据时显示的文字 ，本地数据无效
+	 * @property {Boolean} selectedTextColor 选中文本颜色，如不填写则自动显示
+	 * @property {Object} map 字段映射， 默认 map={text:'text',value:'value'}
+	 * @value left 左侧显示
+	 * @value right 右侧显示
+	 * @event {Function} change  选中发生变化触发
+	 */
+
+	export default {
+		name: 'uniDataChecklist',
+		mixins: [uniCloud.mixinDatacom || {}],
+		emits: ['input', 'update:modelValue', 'change'],
+		props: {
+			mode: {
+				type: String,
+				default: 'default'
+			},
+
+			multiple: {
+				type: Boolean,
+				default: false
+			},
+			value: {
+				type: [Array, String, Number],
+				default () {
+					return ''
+				}
+			},
+			// TODO vue3
+			modelValue: {
+				type: [Array, String, Number],
+				default () {
+					return '';
+				}
+			},
+			localdata: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			min: {
+				type: [Number, String],
+				default: ''
+			},
+			max: {
+				type: [Number, String],
+				default: ''
+			},
+			wrap: {
+				type: Boolean,
+				default: false
+			},
+			icon: {
+				type: String,
+				default: 'left'
+			},
+			selectedColor: {
+				type: String,
+				default: ''
+			},
+			selectedTextColor: {
+				type: String,
+				default: ''
+			},
+			emptyText: {
+				type: String,
+				default: '暂无数据'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			map: {
+				type: Object,
+				default () {
+					return {
+						text: 'text',
+						value: 'value'
+					}
+				}
+			}
+		},
+		watch: {
+			localdata: {
+				handler(newVal) {
+					this.range = newVal
+					this.dataList = this.getDataList(this.getSelectedValue(newVal))
+				},
+				deep: true
+			},
+			mixinDatacomResData(newVal) {
+				this.range = newVal
+				this.dataList = this.getDataList(this.getSelectedValue(newVal))
+			},
+			value(newVal) {
+				this.dataList = this.getDataList(newVal)
+				// fix by mehaotian is_reset 在 uni-forms 中定义
+				// if(!this.is_reset){
+				// 	this.is_reset = false
+				// 	this.formItem && this.formItem.setValue(newVal)
+				// }
+			},
+			modelValue(newVal) {
+				this.dataList = this.getDataList(newVal);
+				// if(!this.is_reset){
+				// 	this.is_reset = false
+				// 	this.formItem && this.formItem.setValue(newVal)
+				// }
+			}
+		},
+		data() {
+			return {
+				dataList: [],
+				range: [],
+				contentText: {
+					contentdown: '查看更多',
+					contentrefresh: '加载中',
+					contentnomore: '没有更多'
+				},
+				isLocal: true,
+				styles: {
+					selectedColor: '#2979ff',
+					selectedTextColor: '#666',
+				},
+				isTop: 0
+			};
+		},
+		computed: {
+			dataValue() {
+				if (this.value === '') return this.modelValue
+				if (this.modelValue === '') return this.value
+				return this.value
+			}
+		},
+		created() {
+			// this.form = this.getForm('uniForms')
+			// this.formItem = this.getForm('uniFormsItem')
+			// this.formItem && this.formItem.setValue(this.value)
+
+			// if (this.formItem) {
+			// 	this.isTop = 6
+			// 	if (this.formItem.name) {
+			// 		// 如果存在name添加默认值,否则formData 中不存在这个字段不校验
+			// 		if(!this.is_reset){
+			// 			this.is_reset = false
+			// 			this.formItem.setValue(this.dataValue)
+			// 		}
+			// 		this.rename = this.formItem.name
+			// 		this.form.inputChildrens.push(this)
+			// 	}
+			// }
+
+			if (this.localdata && this.localdata.length !== 0) {
+				this.isLocal = true
+				this.range = this.localdata
+				this.dataList = this.getDataList(this.getSelectedValue(this.range))
+			} else {
+				if (this.collection) {
+					this.isLocal = false
+					this.loadData()
+				}
+			}
+		},
+		methods: {
+			loadData() {
+				this.mixinDatacomGet().then(res => {
+					this.mixinDatacomResData = res.result.data
+					if (this.mixinDatacomResData.length === 0) {
+						this.isLocal = false
+						this.mixinDatacomErrorMessage = this.emptyText
+					} else {
+						this.isLocal = true
+					}
+				}).catch(err => {
+					this.mixinDatacomErrorMessage = err.message
+				})
+			},
+			/**
+			 * 获取父元素实例
+			 */
+			getForm(name = 'uniForms') {
+				let parent = this.$parent;
+				let parentName = parent.$options.name;
+				while (parentName !== name) {
+					parent = parent.$parent;
+					if (!parent) return false
+					parentName = parent.$options.name;
+				}
+				return parent;
+			},
+			change(e) {
+				const values = e.detail.value
+
+				let detail = {
+					value: [],
+					data: []
+				}
+
+				if (this.multiple) {
+					this.range.forEach(item => {
+
+						if (values.includes(item[this.map.value] + '')) {
+							detail.value.push(item[this.map.value])
+							detail.data.push(item)
+						}
+					})
+				} else {
+					const range = this.range.find(item => (item[this.map.value] + '') === values)
+					if (range) {
+						detail = {
+							value: range[this.map.value],
+							data: range
+						}
+					}
+				}
+				// this.formItem && this.formItem.setValue(detail.value)
+				// TODO 兼容 vue2
+				this.$emit('input', detail.value);
+				// // TOTO 兼容 vue3
+				this.$emit('update:modelValue', detail.value);
+				this.$emit('change', {
+					detail
+				})
+				if (this.multiple) {
+					// 如果 v-model 没有绑定 ，则走内部逻辑
+					// if (this.value.length === 0) {
+					this.dataList = this.getDataList(detail.value, true)
+					// }
+				} else {
+					this.dataList = this.getDataList(detail.value)
+				}
+			},
+
+			/**
+			 * 获取渲染的新数组
+			 * @param {Object} value 选中内容
+			 */
+			getDataList(value) {
+				// 解除引用关系，破坏原引用关系，避免污染源数据
+				let dataList = JSON.parse(JSON.stringify(this.range))
+				let list = []
+				if (this.multiple) {
+					if (!Array.isArray(value)) {
+						value = []
+					}
+				} else {
+					if (Array.isArray(value) && value.length) {
+						value = value[0]
+					}
+				}
+				dataList.forEach((item, index) => {
+					item.disabled = item.disable || item.disabled || false
+					if (this.multiple) {
+						if (value.length > 0) {
+							let have = value.find(val => val === item[this.map.value])
+							item.selected = have !== undefined
+						} else {
+							item.selected = false
+						}
+					} else {
+						item.selected = value === item[this.map.value]
+					}
+
+					list.push(item)
+				})
+				return this.setRange(list)
+			},
+			/**
+			 * 处理最大最小值
+			 * @param {Object} list
+			 */
+			setRange(list) {
+				let selectList = list.filter(item => item.selected)
+				let min = Number(this.min) || 0
+				let max = Number(this.max) || ''
+				list.forEach((item, index) => {
+					if (this.multiple) {
+						if (selectList.length <= min) {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have !== undefined) {
+								item.disabled = true
+							}
+						}
+
+						if (selectList.length >= max && max !== '') {
+							let have = selectList.find(val => val[this.map.value] === item[this.map.value])
+							if (have === undefined) {
+								item.disabled = true
+							}
+						}
+					}
+					this.setStyles(item, index)
+					list[index] = item
+				})
+				return list
+			},
+			/**
+			 * 设置 class
+			 * @param {Object} item
+			 * @param {Object} index
+			 */
+			setStyles(item, index) {
+				//  设置自定义样式
+				item.styleBackgroud = this.setStyleBackgroud(item)
+				item.styleIcon = this.setStyleIcon(item)
+				item.styleIconText = this.setStyleIconText(item)
+				item.styleRightIcon = this.setStyleRightIcon(item)
+			},
+
+			/**
+			 * 获取选中值
+			 * @param {Object} range
+			 */
+			getSelectedValue(range) {
+				if (!this.multiple) return this.dataValue
+				let selectedArr = []
+				range.forEach((item) => {
+					if (item.selected) {
+						selectedArr.push(item[this.map.value])
+					}
+				})
+				return this.dataValue.length > 0 ? this.dataValue : selectedArr
+			},
+
+			/**
+			 * 设置背景样式
+			 */
+			setStyleBackgroud(item) {
+				let styles = {}
+				let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
+				if (this.selectedColor) {
+					if (this.mode !== 'list') {
+						styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
+					}
+					if (this.mode === 'tag') {
+						styles['background-color'] = item.selected ? selectedColor : '#f5f5f5'
+					}
+				}
+				let classles = ''
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIcon(item) {
+				let styles = {}
+				let classles = ''
+				if (this.selectedColor) {
+					let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
+					styles['background-color'] = item.selected ? selectedColor : '#fff'
+					styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
+
+					if (!item.selected && item.disabled) {
+						styles['background-color'] = '#F2F6FC'
+						styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
+					}
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleIconText(item) {
+				let styles = {}
+				let classles = ''
+				if (this.selectedColor) {
+					let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
+					if (this.mode === 'tag') {
+						styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : '#fff') : '#666'
+					} else {
+						styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : selectedColor) : '#666'
+					}
+					if (!item.selected && item.disabled) {
+						styles.color = '#999'
+					}
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+				return classles
+			},
+			setStyleRightIcon(item) {
+				let styles = {}
+				let classles = ''
+				if (this.mode === 'list') {
+					styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6'
+				}
+				for (let i in styles) {
+					classles += `${i}:${styles[i]};`
+				}
+
+				return classles
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$border-color: #DCDFE6;
+	$disable: 0.4;
+
+	@mixin flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+	}
+
+	.uni-data-loading {
+		@include flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 36px;
+		padding-left: 10px;
+		color: #999;
+	}
+
+	.uni-data-checklist {
+		position: relative;
+		z-index: 0;
+		flex: 1;
+
+		// 多选样式
+		.checklist-group {
+			@include flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+
+			&.is-list {
+				flex-direction: column;
+			}
+
+			.checklist-box {
+				@include flex;
+				flex-direction: row;
+				align-items: center;
+				position: relative;
+				margin: 5px 0;
+				margin-right: 25px;
+
+				.hidden {
+					position: absolute;
+					opacity: 0;
+				}
+
+				// 文字样式
+				.checklist-content {
+					@include flex;
+					flex: 1;
+					flex-direction: row;
+					align-items: center;
+					justify-content: space-between;
+
+					.checklist-text {
+						font-size: 14px;
+						color: #666;
+						margin-left: 5px;
+						line-height: 14px;
+					}
+
+					.checkobx__list {
+						border-right-width: 1px;
+						border-right-color: #007aff;
+						border-right-style: solid;
+						border-bottom-width: 1px;
+						border-bottom-color: #007aff;
+						border-bottom-style: solid;
+						height: 12px;
+						width: 6px;
+						left: -5px;
+						transform-origin: center;
+						transform: rotate(45deg);
+						opacity: 0;
+					}
+				}
+
+				// 多选样式
+				.checkbox__inner {
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 4px;
+					background-color: #fff;
+					z-index: 1;
+
+					.checkbox__inner-icon {
+						position: absolute;
+						/* #ifdef APP-NVUE */
+						top: 2px;
+						/* #endif */
+						/* #ifndef APP-NVUE */
+						top: 1px;
+						/* #endif */
+						left: 5px;
+						height: 8px;
+						width: 4px;
+						border-right-width: 1px;
+						border-right-color: #fff;
+						border-right-style: solid;
+						border-bottom-width: 1px;
+						border-bottom-color: #fff;
+						border-bottom-style: solid;
+						opacity: 0;
+						transform-origin: center;
+						transform: rotate(40deg);
+					}
+				}
+
+				// 单选样式
+				.radio__inner {
+					@include flex;
+					/* #ifndef APP-NVUE */
+					flex-shrink: 0;
+					box-sizing: border-box;
+					/* #endif */
+					justify-content: center;
+					align-items: center;
+					position: relative;
+					width: 16px;
+					height: 16px;
+					border: 1px solid $border-color;
+					border-radius: 16px;
+					background-color: #fff;
+					z-index: 1;
+
+					.radio__inner-icon {
+						width: 8px;
+						height: 8px;
+						border-radius: 10px;
+						opacity: 0;
+					}
+				}
+
+				// 默认样式
+				&.is--default {
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+						}
+
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					// 选中
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+
+							.radio__inner {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+
+				// 按钮样式
+				&.is--button {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					transition: border-color 0.2s;
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						border: 1px #eee solid;
+						opacity: $disable;
+
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.radio__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						border-color: $uni-primary;
+
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						// 选中禁用
+						&.is-disable {
+							opacity: $disable;
+						}
+					}
+				}
+
+				// 标签样式
+				&.is--tag {
+					margin-right: 10px;
+					padding: 5px 10px;
+					border: 1px $border-color solid;
+					border-radius: 3px;
+					background-color: #f5f5f5;
+
+					.checklist-text {
+						margin: 0;
+						color: #666;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+						/* #endif */
+						opacity: $disable;
+					}
+
+					&.is-checked {
+						background-color: $uni-primary;
+						border-color: $uni-primary;
+
+						.checklist-text {
+							color: #fff;
+						}
+					}
+				}
+
+				// 列表样式
+				&.is--list {
+					/* #ifndef APP-NVUE */
+					display: flex;
+					/* #endif */
+					padding: 10px 15px;
+					padding-left: 0;
+					margin: 0;
+
+					&.is-list-border {
+						border-top: 1px #eee solid;
+					}
+
+					// 禁用
+					&.is-disable {
+						/* #ifdef H5 */
+						cursor: not-allowed;
+
+						/* #endif */
+						.checkbox__inner {
+							background-color: #F2F6FC;
+							border-color: $border-color;
+							/* #ifdef H5 */
+							cursor: not-allowed;
+							/* #endif */
+						}
+
+						.checklist-text {
+							color: #999;
+						}
+					}
+
+					&.is-checked {
+						.checkbox__inner {
+							border-color: $uni-primary;
+							background-color: $uni-primary;
+
+							.checkbox__inner-icon {
+								opacity: 1;
+								transform: rotate(45deg);
+							}
+						}
+
+						.radio__inner {
+							border-color: $uni-primary;
+							.radio__inner-icon {
+								opacity: 1;
+								background-color: $uni-primary;
+							}
+						}
+
+						.checklist-text {
+							color: $uni-primary;
+						}
+
+						.checklist-content {
+							.checkobx__list {
+								opacity: 1;
+								border-color: $uni-primary;
+							}
+						}
+
+						// 选中禁用
+						&.is-disable {
+							.checkbox__inner {
+								opacity: $disable;
+							}
+
+							.checklist-text {
+								opacity: $disable;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

uni_modules/uni-data-checkbox/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uni-data-checkbox",
+  "displayName": "uni-data-checkbox 数据选择器",
+  "version": "1.0.6",
+  "description": "通过数据驱动的单选框和复选框",
+  "keywords": [
+    "uni-ui",
+    "checkbox",
+    "单选",
+    "多选",
+    "单选多选"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.1"
+  },
+  "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-load-more","uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+            "app-vue": "y",
+            "app-nvue": "y",
+            "app-harmony": "u",
+            "app-uvue": "u"
+        },
+        "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"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-data-checkbox/readme.md

@@ -0,0 +1,18 @@
+
+
+## DataCheckbox 数据驱动的单选复选框
+> **组件名：uni-data-checkbox**
+> 代码块： `uDataCheckbox`
+
+
+本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
+
+1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
+2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
+3. 本组件合并了单选多选
+4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
+
+在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

uni_modules/uni-load-more/changelog.md

@@ -0,0 +1,25 @@
+## 1.3.6（2024-10-15）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.3.5（2024-10-12）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.3.4（2024-10-12）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.3.3（2022-01-20）
+- 新增 showText属性 ，是否显示文本
+## 1.3.2（2022-01-19）
+- 修复 nvue 平台下不显示文本的bug
+## 1.3.1（2022-01-19）
+- 修复 微信小程序平台样式选择器报警告的问题
+## 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-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
+## 1.2.1（2021-08-24）
+- 新增 支持国际化
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.8（2021-05-12）
+- 新增 组件示例地址
+## 1.1.7（2021-03-30）
+- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
+## 1.1.6（2021-02-05）
+- 调整为uni_modules目录规范

uni_modules/uni-load-more/components/uni-load-more/i18n/en.json

@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "Pull up to show more",
+	"uni-load-more.contentrefresh": "loading...",
+	"uni-load-more.contentnomore": "No more data"
+}

uni_modules/uni-load-more/components/uni-load-more/i18n/index.js

@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}

uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json

@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "上拉显示更多",
+	"uni-load-more.contentrefresh": "正在加载...",
+	"uni-load-more.contentnomore": "没有更多数据了"
+}

uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json

@@ -0,0 +1,5 @@
+{
+	"uni-load-more.contentdown": "上拉顯示更多",
+	"uni-load-more.contentrefresh": "正在加載...",
+	"uni-load-more.contentnomore": "沒有更多數據了"
+}

uni_modules/uni-load-more/package.json

@@ -0,0 +1,84 @@
+{
+  "id": "uni-load-more",
+  "displayName": "uni-load-more 加载更多",
+  "version": "1.3.6",
+  "description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "加载更多",
+    "load-more"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "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"
+        },
+        "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"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-load-more/readme.md

@@ -0,0 +1,14 @@
+
+
+### LoadMore 加载更多
+> **组件名：uni-load-more**
+> 代码块： `uLoadMore`
+
+
+用于列表中，做滚动加载使用，展示 loading 的各种状态。
+
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+

uni_modules/uni-scss/changelog.md

@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init

uni_modules/uni-scss/index.scss

@@ -0,0 +1 @@
+@import './styles/index.scss';

uni_modules/uni-scss/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "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"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-scss/readme.md

@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

uni_modules/uni-scss/styles/index.scss

@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';

uni_modules/uni-scss/styles/setting/_border.scss

@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}

uni_modules/uni-scss/styles/setting/_color.scss

@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}

uni_modules/uni-scss/styles/setting/_radius.scss

@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}

uni_modules/uni-scss/styles/setting/_space.scss

@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}

uni_modules/uni-scss/styles/setting/_styles.scss

@@ -0,0 +1,167 @@
+/* #ifndef APP-NVUE */
+
+$-color-white:#fff;
+$-color-black:#000;
+@mixin base-style($color) {
+	color: #fff;
+	background-color: $color;
+	border-color: mix($-color-black, $color, 8%);
+	&:not([hover-class]):active {
+		background: mix($-color-black, $color, 10%);
+		border-color: mix($-color-black, $color, 20%);
+		color: $-color-white;
+		outline: none;
+	}
+}
+@mixin is-color($color) {
+	@include base-style($color);
+	&[loading] {
+		@include base-style($color);
+		&::before {
+			margin-right:5px;
+		}
+	}
+	&[disabled] {
+	  &,
+		&[loading],
+	  &:not([hover-class]):active {
+	    color: $-color-white;
+			border-color: mix(darken($color,10%), $-color-white);
+	    background-color: mix($color, $-color-white);
+	  }
+	}
+
+}
+@mixin base-plain-style($color) {
+	color:$color;
+	background-color: mix($-color-white, $color, 90%);
+	border-color: mix($-color-white, $color, 70%);
+	&:not([hover-class]):active {
+	  background: mix($-color-white, $color, 80%);
+	  color: $color;
+	  outline: none;
+		border-color: mix($-color-white, $color, 50%);
+	}
+}
+@mixin is-plain($color){
+	&[plain] {
+		@include base-plain-style($color);
+		&[loading] {
+			@include base-plain-style($color);
+			&::before {
+				margin-right:5px;
+			}
+		}
+		&[disabled] {
+		  &,
+		  &:active {
+		    color: mix($-color-white, $color, 40%);
+		    background-color: mix($-color-white, $color, 90%);
+				border-color: mix($-color-white, $color, 80%);
+		  }
+		}
+	}
+}
+
+
+.uni-btn {
+	margin: 5px;
+	color: #393939;
+	border:1px solid #ccc;
+	font-size: 16px;
+	font-weight: 200;
+	background-color: #F9F9F9;
+	// TODO 暂时处理边框隐藏一边的问题
+	overflow: visible;
+	&::after{
+		border: none;
+	}
+
+	&:not([type]),&[type=default] {
+		color: #999;
+		&[loading] {
+			background: none;
+			&::before {
+				margin-right:5px;
+			}
+		}
+
+
+
+		&[disabled]{
+			color: mix($-color-white, #999, 60%);
+		  &,
+			&[loading],
+		  &:active {
+				color: mix($-color-white, #999, 60%);
+		    background-color: mix($-color-white,$-color-black , 98%);
+				border-color: mix($-color-white,  #999, 85%);
+		  }
+		}
+
+		&[plain] {
+			color: #999;
+			background: none;
+			border-color: $uni-border-1;
+			&:not([hover-class]):active {
+				background: none;
+			  color: mix($-color-white, $-color-black, 80%);
+				border-color: mix($-color-white, $-color-black, 90%);
+			  outline: none;
+			}
+			&[disabled]{
+			  &,
+				&[loading],
+			  &:active {
+			    background: none;
+					color: mix($-color-white, #999, 60%);
+					border-color: mix($-color-white,  #999, 85%);
+			  }
+			}
+		}
+	}
+
+	&:not([hover-class]):active {
+	  color: mix($-color-white, $-color-black, 50%);
+	}
+
+	&[size=mini] {
+		font-size: 16px;
+		font-weight: 200;
+		border-radius: 8px;
+	}
+
+
+
+	&.uni-btn-small {
+		font-size: 14px;
+	}
+	&.uni-btn-mini {
+		font-size: 12px;
+	}
+
+	&.uni-btn-radius {
+		border-radius: 999px;
+	}
+	&[type=primary] {
+		@include is-color($uni-primary);
+		@include is-plain($uni-primary)
+	}
+	&[type=success] {
+		@include is-color($uni-success);
+		@include is-plain($uni-success)
+	}
+	&[type=error] {
+		@include is-color($uni-error);
+		@include is-plain($uni-error)
+	}
+	&[type=warning] {
+		@include is-color($uni-warning);
+		@include is-plain($uni-warning)
+	}
+	&[type=info] {
+		@include is-color($uni-info);
+		@include is-plain($uni-info)
+	}
+}
+/* #endif */

uni_modules/uni-scss/styles/setting/_text.scss

@@ -0,0 +1,24 @@
+@mixin get-styles($k,$c) {
+	@if $k == size or $k == weight{
+		font-#{$k}:#{$c}
+	}@else{
+		#{$k}:#{$c}
+	}
+}
+
+@each $key, $child in $uni-headings {
+	/* #ifndef APP-NVUE */
+	.uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	.container .uni-#{$key} {
+		@each $k, $c in $child {
+			@include get-styles($k,$c)
+		}
+	}
+	/* #endif */
+}

uni_modules/uni-scss/styles/setting/_variables.scss

@@ -0,0 +1,146 @@
+// @use "sass:math";
+@import  '../tools/functions.scss';
+// 间距基础倍数
+$uni-space-root: 2 !default;
+// 边框半径默认值
+$uni-radius-root:5px !default;
+$uni-radius: () !default;
+// 边框半径断点
+$uni-radius: map-deep-merge(
+  (
+    0: 0,
+		// TODO 当前版本暂时不支持 sm 属性
+    // 'sm': math.div($uni-radius-root, 2),
+    null: $uni-radius-root,
+    'lg': $uni-radius-root * 2,
+    'xl': $uni-radius-root * 6,
+    'pill': 9999px,
+    'circle': 50%
+  ),
+  $uni-radius
+);
+// 字体家族
+$body-font-family: 'Roboto', sans-serif !default;
+// 文本
+$heading-font-family: $body-font-family !default;
+$uni-headings: () !default;
+$letterSpacing: -0.01562em;
+$uni-headings: map-deep-merge(
+  (
+    'h1': (
+      size: 32px,
+			weight: 300,
+			line-height: 50px,
+			// letter-spacing:-0.01562em
+    ),
+    'h2': (
+      size: 28px,
+      weight: 300,
+      line-height: 40px,
+      // letter-spacing: -0.00833em
+    ),
+    'h3': (
+      size: 24px,
+      weight: 400,
+      line-height: 32px,
+      // letter-spacing: normal
+    ),
+    'h4': (
+      size: 20px,
+      weight: 400,
+      line-height: 30px,
+      // letter-spacing: 0.00735em
+    ),
+    'h5': (
+      size: 16px,
+      weight: 400,
+      line-height: 24px,
+      // letter-spacing: normal
+    ),
+    'h6': (
+      size: 14px,
+      weight: 500,
+      line-height: 18px,
+      // letter-spacing: 0.0125em
+    ),
+    'subtitle': (
+      size: 12px,
+      weight: 400,
+      line-height: 20px,
+      // letter-spacing: 0.00937em
+    ),
+    'body': (
+      font-size: 14px,
+			font-weight: 400,
+			line-height: 22px,
+			// letter-spacing: 0.03125em
+    ),
+    'caption': (
+      'size': 12px,
+      'weight': 400,
+      'line-height': 20px,
+      // 'letter-spacing': 0.03333em,
+      // 'text-transform': false
+    )
+  ),
+  $uni-headings
+);
+
+
+
+// 主色
+$uni-primary: #2979ff !default;
+$uni-primary-disable:lighten($uni-primary,20%) !default;
+$uni-primary-light: lighten($uni-primary,25%) !default;
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37 !default;
+$uni-success-disable:lighten($uni-success,20%) !default;
+$uni-success-light: lighten($uni-success,25%) !default;
+
+$uni-warning: #f3a73f !default;
+$uni-warning-disable:lighten($uni-warning,20%) !default;
+$uni-warning-light: lighten($uni-warning,25%) !default;
+
+$uni-error: #e43d33 !default;
+$uni-error-disable:lighten($uni-error,20%) !default;
+$uni-error-light: lighten($uni-error,25%) !default;
+
+$uni-info: #8f939c !default;
+$uni-info-disable:lighten($uni-info,20%) !default;
+$uni-info-light: lighten($uni-info,25%) !default;
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a !default; 			// 主要文字
+$uni-base-color: #6a6a6a !default;			// 常规文字
+$uni-secondary-color: #909399 !default;	// 次要文字
+$uni-extra-color: #c7c7c7 !default;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0 !default;
+$uni-border-2: #EDEDED !default;
+$uni-border-3: #DCDCDC !default;
+$uni-border-4: #B9B9B9 !default;
+
+// 常规色
+$uni-black: #000000 !default;
+$uni-white: #ffffff !default;
+$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
+
+// 背景色
+$uni-bg-color: #f7f7f7 !default;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px !default;
+$uni-spacing-base: 15px !default;
+$uni-spacing-lg: 30px !default;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;

uni_modules/uni-scss/styles/tools/functions.scss

@@ -0,0 +1,19 @@
+// 合并 map
+@function map-deep-merge($parent-map, $child-map){
+	$result: $parent-map;
+	@each $key, $child in $child-map {
+		$parent-has-key: map-has-key($result, $key);
+		$parent-value: map-get($result, $key);
+		$parent-type: type-of($parent-value);
+		$child-type: type-of($child);
+		$parent-is-map: $parent-type == map;
+		$child-is-map: $child-type == map;
+			
+		@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
+			$result: map-merge($result, ( $key: $child ));
+		}@else {
+			$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
+		}
+	}
+	@return $result;
+};

uni_modules/uni-scss/theme.scss

@@ -0,0 +1,31 @@
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+// 主色
+$uni-primary: #2979ff;
+// 辅助色
+$uni-success: #4cd964;
+// 警告色
+$uni-warning: #f0ad4e;
+// 错误色
+$uni-error: #dd524d;
+// 描述色
+$uni-info: #909399;
+// 中性色
+$uni-main-color: #303133;
+$uni-base-color: #606266;
+$uni-secondary-color: #909399;
+$uni-extra-color: #C0C4CC;
+// 背景色
+$uni-bg-color: #f5f5f5;
+// 边框颜色
+$uni-border-1: #DCDFE6;
+$uni-border-2: #E4E7ED;
+$uni-border-3: #EBEEF5;
+$uni-border-4: #F2F6FC;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);

uni_modules/uni-scss/variables.scss

@@ -0,0 +1,62 @@
+@import './styles/setting/_variables.scss';
+// 间距基础倍数
+$uni-space-root: 2;
+// 边框半径默认值
+$uni-radius-root:5px;
+
+// 主色
+$uni-primary: #2979ff;
+$uni-primary-disable:mix(#fff,$uni-primary,50%);
+$uni-primary-light: mix(#fff,$uni-primary,80%);
+
+// 辅助色
+// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
+$uni-success: #18bc37;
+$uni-success-disable:mix(#fff,$uni-success,50%);
+$uni-success-light: mix(#fff,$uni-success,80%);
+
+$uni-warning: #f3a73f;
+$uni-warning-disable:mix(#fff,$uni-warning,50%);
+$uni-warning-light: mix(#fff,$uni-warning,80%);
+
+$uni-error: #e43d33;
+$uni-error-disable:mix(#fff,$uni-error,50%);
+$uni-error-light: mix(#fff,$uni-error,80%);
+
+$uni-info: #8f939c;
+$uni-info-disable:mix(#fff,$uni-info,50%);
+$uni-info-light: mix(#fff,$uni-info,80%);
+
+// 中性色
+// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
+$uni-main-color: #3a3a3a; 			// 主要文字
+$uni-base-color: #6a6a6a;			// 常规文字
+$uni-secondary-color: #909399;	// 次要文字
+$uni-extra-color: #c7c7c7;			// 辅助说明
+
+// 边框颜色
+$uni-border-1: #F0F0F0;
+$uni-border-2: #EDEDED;
+$uni-border-3: #DCDCDC;
+$uni-border-4: #B9B9B9;
+
+// 常规色
+$uni-black: #000000;
+$uni-white: #ffffff;
+$uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// 背景色
+$uni-bg-color: #f7f7f7;
+
+/* 水平间距 */
+$uni-spacing-sm: 8px;
+$uni-spacing-base: 15px;
+$uni-spacing-lg: 30px;
+
+// 阴影
+$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 蒙版
+$uni-mask: rgba($color: #000000, $alpha: 0.4);