southnote-mini-sdk 1.0.0

package/components/bottomSheet/bottomSheet.wxss

@@ -0,0 +1,238 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+}
+
+.sheet {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  max-height: 90%;
+  overflow-y: auto;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  transition: bottom 0.25s ease-in-out;
+}
+
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* 顶部 */
+.sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0rpx 30rpx;
+  border-bottom: 1px solid #eee;
+}
+
+.close-btn {
+  /* width: 80rpx;
+  height: 100rpx; */
+  font-size: 80rpx;
+  line-height: 80rpx;
+  color: #999;
+}
+
+.sheet-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.submit-btn {
+  font-size: 28rpx;
+  color: #fff;
+  background-color: #002fa7;
+  padding: 10rpx 30rpx;
+  border-radius: 40rpx;
+}
+
+.submit-btn.disabled {
+  background-color: #f0f0f0;
+  color: #999;
+}
+
+/* 输入区 */
+.textarea-wrapper {
+  position: relative;
+  height: 330rpx;
+
+  background-color: #f5f5f5;
+  margin: 20rpx;
+}
+
+.post-input {
+  width: 93vw;
+  height: 100rpx;
+  margin-left: 1vw;
+  background-color: #f5f5f5;
+  border-radius: 10rpx;
+  padding: 10rpx;
+  box-sizing: border-box;
+}
+
+.char-count {
+  position: absolute;
+  right: 16rpx;
+  bottom: 90rpx;
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* 原帖展示（不变） */
+.origin-wrapper {
+  position: absolute;
+  left: 10rpx;
+  bottom: 10rpx;
+  right: 10rpx;
+  height: 80rpx;
+  background: #EBEBEB;
+  border-radius: 5rpx;
+  /* margin: 0rpx 2.5vw; */
+  padding-right: 20rpx;
+  display: flex;
+  align-items: center;
+}
+
+.origin-img {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 8rpx;
+  margin-right: 20rpx;
+  background-color: yellow;
+}
+
+.origin-text {
+  margin-top: 4rpx;
+  align-self: flex-start;
+  flex: 1;
+  font-size: 28rpx;
+  color: #919191;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* 工具栏 */
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 40rpx;
+  border-top: 1px solid #eee;
+  background: #fff;
+  height: 80rpx;
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #555;
+}
+
+.checkbox-text {
+  margin-left: 8rpx;
+}
+
+.toolbar-right {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  margin-left: 30px;
+}
+
+.toolbar-btn {
+  margin-left: 30rpx;
+}
+
+/* 图片预览修复 */
+.image-preview {
+  position: relative;
+  margin-top: 10rpx;
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  height: 150rpx;
+  padding-left: 20rpx;
+}
+
+.image-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.image-item {
+  position: relative;
+  width: 150rpx;
+  height: 150rpx;
+  margin-right: 5rpx;
+}
+
+.preview-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 5rpx;
+}
+
+.delete-btn {
+  position: absolute;
+  top: -5rpx;
+  right: -5rpx;
+}
+
+.add-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f0f0;
+  font-size: 80rpx;
+}
+
+/* emoji 面板固定在底部 */
+.emoji-panel {
+  /* position: fixed; */
+  bottom: 0;
+  width: 100%;
+  height: 400rpx;
+  background: #f7f7f7;
+  border-top: 1px solid #ddd;
+  padding: 10rpx 0;
+  z-index: 1200;
+}
+
+.emoji-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.emoji-img {
+  width: calc(100% / 7);
+  height: 100rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}

package/components/experience-item/experience-item.js

@@ -0,0 +1,105 @@
+import {
+  getLevelByExp,
+  getLevelImg
+} from '../../utils/exp';
+Component({
+  properties: {
+    avatar: String,
+    nickname: String,
+    totalExp: {
+      type: Number,
+      value: 0
+    }
+  },
+
+  data: {
+    level: 0, // 我们保留 0 级概念
+    levelImg: '/assets/images/icons/lv1.png',
+    currentExpInLevel: 0, // 在当前等级内的经验（不是累计）
+    nextLevelNeedExp: 0, // 到下一等级所需的本级经验（即本等级消耗）
+    progressPercent: 0,
+    expToNext: 0,
+  },
+
+  lifetimes: {
+    attached() {
+      this.calculateExp();
+    }
+  },
+
+  observers: {
+    'totalExp': function () {
+      this.calculateExp();
+    }
+  },
+
+  methods: {
+    calculateExp() {
+      // levelCost[i] = 从 (i-1) -> i 所需的经验
+      const levelCost = [
+        0, // 占位，让索引与等级对应（index 0 没意义）
+        500, // 到 1 级需要 500（0->1）
+        1500, // 到 2 级需要 1500（1->2）
+        3000, // 到 3 级需要 3000（2->3）
+        5000,
+        10000,
+        20000,
+        40000,
+        80000,
+        150000,
+        250000,
+        400000,
+        600000,
+        1000000,
+        1800000,
+        3000000,
+        6000000,
+        10000000,
+        30000000
+      ];
+      const total = Number(this.properties.totalExp) || 0;
+
+      // const total = 28125;
+
+      // 计算前缀和（累计消耗到达每个等级所需的总经验）
+      const prefix = [0]; // prefix[0] = 0
+      for (let i = 1; i < levelCost.length; i++) {
+        prefix[i] = (prefix[i - 1] || 0) + (levelCost[i] || 0);
+      }
+
+      // 找到当前等级：最大的 L 使得 total >= prefix[L]
+      let level = 0;
+      for (let i = 1; i < prefix.length; i++) {
+        if (total >= prefix[i]) {
+          level = i;
+        } else {
+          break;
+        }
+      }
+
+      // current level's cumulative (已消耗到进入当前等级为止)
+      const currentLevelCum = prefix[level] || 0;
+      // 本级（level -> level+1）所需（即下一等级的消耗量）
+      const nextLevelCost = levelCost[level + 1] || 0; // 若为最高级，则为 0
+
+      // 在当前等级内已获得的经验
+      const currentExpInLevel = total - currentLevelCum;
+      // 还差多少本级经验到下一级
+      const expToNext = nextLevelCost > 0 ? Math.max(0, nextLevelCost - currentExpInLevel) : 0;
+      const progressPercent = nextLevelCost > 0 ?
+        Math.min(100, (currentExpInLevel / nextLevelCost) * 100) :
+        100;
+
+      const levelImg = getLevelImg(level)
+
+      this.setData({
+        level,
+        levelImg,
+        currentExpInLevel,
+        nextLevelNeedExp: nextLevelCost,
+        progressPercent,
+        expToNext
+      });
+    }
+  }
+});

package/components/experience-item/experience-item.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/components/experience-item/experience-item.wxml

@@ -0,0 +1,39 @@
+<view class="card">
+
+  <view class="title">我的游戏库信息</view>
+
+  <view class="avatar-block">
+    <image class="avatar" src="{{avatar || '/assets/images/icons/header_placeholder.png'}}" mode="aspectFill"></image>
+  </view>
+
+  <view class="nickname">{{nickname}}</view>
+
+
+
+  <!-- 经验条 -->
+  <view class="exp-bar">
+
+    <!-- 固定图标背景 + 中间数字 -->
+    <view class="level-icon">
+      <image class="level-img" src="{{levelImg}}" mode="aspectFit"></image>
+      <text class="level-text">{{level}}</text>
+    </view>
+
+    <view class="bar">
+      <view class="bar-inner" style="{{ 'width:' + progressPercent + '%' }}">
+        <view class="exp-text">
+          经验值：{{currentExpInLevel}}/{{nextLevelNeedExp}}
+        </view>
+      </view>
+    </view>
+
+  </view>
+
+
+
+  <!-- 升级提示 -->
+  <view class="tip">
+    还差{{expToNext}}经验升级为 Lv.{{level + 1}}
+  </view>
+
+</view>

package/components/experience-item/experience-item.wxss

@@ -0,0 +1,110 @@
+.card {
+  background: #f5f5f5;
+  padding: 20rpx;
+  border-radius: 16rpx;
+  width: 650rpx;
+  margin: 20rpx auto;
+}
+
+.title {
+  font-size: 28rpx;
+  color: #9e9e9e;
+}
+
+.avatar-block {
+  display: flex;
+  justify-content: center;
+}
+
+.avatar {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+}
+
+.nickname {
+  text-align: center;
+  font-size: 30rpx;
+  margin: 20rpx 0;
+  font-weight: bold;
+}
+
+.exp-text {
+  text-align: center;
+  font-size: 26rpx;
+  margin-bottom: 20rpx;
+}
+
+.exp-bar {
+  display: flex;
+  align-items: center;
+  margin: 0 auto;
+  width: 90%;
+}
+
+.level-icon {
+  position: relative;
+  width: 24px;
+  /* 按你的 lv1.png 实际大小调整 */
+  height: 24px;
+  margin-right: 8px;
+}
+
+.level-img {
+  width: 100%;
+  height: 100%;
+}
+
+.level-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  color: #6d6d6d;
+  text-align: center;
+}
+
+
+/* 父容器：固定宽度由父布局决定（一般为 100%），高度固定，overflow:hidden */
+.bar {
+  margin-left: 5px;
+  width: 100%;
+  height: 20px;
+  background: white;
+  border-radius: 5px;
+  overflow: hidden; /* 进度条仍然可以裁剪 */
+  position: relative; /* 给 exp-text 定位参照 */
+  border: 1px solid #bbdefb;
+}
+
+.bar-inner {
+  height: 100%;
+  background-color: #bbdefb;
+  border-radius: 5px;
+  transition: width 450ms ease;
+}
+
+/* 文字不再受进度宽度影响 */
+.exp-text {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  line-height: 20px;
+  font-size: 12px;
+  color: #333;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+
+
+.tip {
+  margin-top: 5rpx;
+  text-align: center;
+  font-size: 20rpx;
+  color: #9e9e9e;
+
+}

package/components/grid-item/grid-item.js

@@ -0,0 +1,8 @@
+Component({
+  properties: {
+    data: {
+      type: Object,
+      value: {}
+    }
+  }
+})

package/components/grid-item/grid-item.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/components/grid-item/grid-item.wxml

@@ -0,0 +1,62 @@
+<view class="item-container">
+
+<!-- type1: 左图右文字 -->
+<view wx:if="{{data.type === 1}}" class="type1 all-type">
+  <image src="{{data.image.url || data.image}}" class="type1-img" mode="aspectFill" />
+  <text class="type1-text">{{data.name}}</text>
+</view>
+
+<!-- type2: 左点右文字 -->
+<view wx:elif="{{data.type === 2}}" class="type2 all-type">
+  <view class="type2-dot"></view>
+  <text class="type2-text">{{data.name}}</text>
+</view>
+
+<!-- type3: 纯图片 -->
+<view wx:elif="{{data.type === 3}}" class="type3 all-type">
+  <image src="{{data.image.url || data.image}}" class="type3-img" mode="widthFix" />
+</view>
+
+<!-- type4: 图片底部覆盖半透明文字 -->
+<view wx:elif="{{data.type === 4}}" class="type4 all-type">
+  <image src="{{data.image.url || data.image}}" class="type4-img" mode="widthFix" />
+  <view class="type4-overlay">
+    <text>{{data.name}}</text>
+  </view>
+</view>
+
+<!-- type5: 上图片下文字 -->
+<view wx:elif="{{data.type === 5}}" class="type5 all-type">
+  <image src="{{data.image.url || data.image}}" class="type5-img" mode="widthFix" />
+  <text class="type5-text">{{data.name}}</text>
+</view>
+
+<!-- type6: 左图右文字+描述 -->
+<view wx:elif="{{data.type === 6}}" class="type6 all-type">
+  <image src="{{data.image.url || data.image}}" class="type6-img" mode="aspectFill" />
+  <view class="type6-texts">
+    <text class="type6-title">{{data.name}}</text>
+    <text class="type6-desc">{{data.desc}}</text>
+  </view>
+</view>
+
+<!-- type7: 左黑右橙 -->
+<view wx:elif="{{data.type === 7}}" class="type7 all-type">
+  <text class="type7-left">{{data.name}}</text>
+  <text class="type7-right">{{data.desc}}</text>
+</view>
+
+<!-- type8: 上标题下描述 -->
+<view wx:elif="{{data.type === 8}}" class="type8">
+  <view class="type8-title-row">
+    <view class="type8-dot"></view>
+    <text class="type8-title">{{data.name}}</text>
+  </view>
+  <text class="type8-desc">{{data.desc}}</text>
+</view>
+
+<view wx:else>
+  <text>未知类型</text>
+</view>
+
+</view>