southnote-mini-sdk 1.0.0

package/components/wiki-renderer/wiki-renderer.js

@@ -0,0 +1,636 @@
+const towxml = require('../../towxml/index') // ✅ 补上引入
+import {
+  submitGameWikiScore
+} from '../../services/home'
+import {
+  checkLogin
+} from "../../utils/auth"
+Component({
+  options: {
+    styleIsolation: 'apply-shared'
+  },
+
+  properties: {
+    data: {
+      type: Array,
+      value: []
+    },
+    gameId: {
+      type: String,
+      value: ''
+    },
+    wikiUsers: {
+      type: Array,
+      value: []
+    },
+    images: {
+      type: Array,
+      value: []
+    },
+    name: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    parsedBlocks: [],
+    tabActiveMap: {},
+    filterMap: {},
+    collapseActive: {},
+    scoreModal: {
+      visible: false,
+      title: '',
+      blockIndex: -1,
+      selected: 0,
+
+    }
+  },
+
+  observers: {
+    'data, images': function (data, images) {
+      if (!data || !data.length) return
+      const parsed = this._parseBlocks(data)
+      const imageIdSet = new Set((images || []).map(img => img.id))
+
+      const tabActiveMap = {
+        ...this.data.tabActiveMap
+      }
+      const collapseActive = {
+        ...this.data.collapseActive
+      }
+
+      parsed.forEach((block, index) => {
+        if ((block.type === 'tabs' || block.type === 'content-tabs') && block.tabs?.length) {
+          if (!tabActiveMap[index]) {
+            tabActiveMap[index] = block.tabs[0].name
+          }
+        }
+        if (block.type === 'container' && block.key === 'collapse') {
+          if (collapseActive[index] === undefined) {
+            collapseActive[index] = false
+          }
+        }
+        if (block.type === 'filter-tabs') {
+          block.classes = (block.classes || []).map(cls => ({
+            ...cls,
+            allKeys: ['不限', ...cls.keys]
+          }))
+          block.filteredChildren = block.children
+        }
+      })
+
+      // 递归注入 visible
+      const injectVisible = (blocks) => {
+        return blocks.map(block => {
+          if (block.type === 'image') {
+            return {
+              ...block,
+              visible: !block.id || imageIdSet.has(block.id)
+            }
+          }
+          // lr 块：递归处理 left / right
+          if (block.type === 'lr') {
+            return {
+              ...block,
+              left: block.left ? injectVisible([block.left])[0] : null,
+              right: block.right ? injectVisible([block.right])[0] : null,
+            }
+          }
+          // container / content-tabs 等有 children 的块
+          if (block.children?.length) {
+            return {
+              ...block,
+              children: injectVisible(block.children)
+            }
+          }
+          // tabs / content-tabs 有 tabs[].children
+          if (block.tabs?.length) {
+            return {
+              ...block,
+              tabs: block.tabs.map(tab => ({
+                ...tab,
+                children: injectVisible(tab.children || [])
+              }))
+            }
+          }
+          return block
+        })
+      }
+
+      this.setData({
+        parsedBlocks: injectVisible(parsed),
+        tabActiveMap,
+        collapseActive
+      })
+    }
+  },
+
+  methods: {
+    _isDarkColor(argb) {
+      if (!argb) return false
+      let hex = argb.replace('#', '').toLowerCase()
+      if (hex.length === 6) hex = 'ff' + hex
+      if (hex.length !== 8) return false
+      const r = parseInt(hex.slice(2, 4), 16) / 255
+      const g = parseInt(hex.slice(4, 6), 16) / 255
+      const b = parseInt(hex.slice(6, 8), 16) / 255
+      const a = parseInt(hex.slice(0, 2), 16) / 255
+      return (r + g + b) * a / 3 < 0.7
+    },
+    _colorInfo(argb) {
+      const color = this._argbToCssHex(argb)
+      const titleTextColor = color ? (this._isDarkColor(argb) ? '#ffffff' : '#000000') : ''
+      return {
+        color,
+        titleTextColor
+      }
+    },
+    _argbToCssHex(argb) {
+      if (!argb) return ''
+      argb = argb.replace('#', '').toLowerCase()
+      if (argb.length !== 8) return `#${argb}`
+      const r = argb.slice(2, 4),
+        g = argb.slice(4, 6),
+        b = argb.slice(6, 8),
+        a = argb.slice(0, 2)
+      return `#${r}${g}${b}${a}`
+    },
+
+    _parseBlocks(data) {
+      return data.map(block => {
+        switch (block?.type) {
+          case 0:
+            return {
+              type: 'empty'
+            }
+            case 1:
+              return {
+                type: 'text', desc: block.data.desc
+              }
+              case 'text':
+                return {
+                  type: 'text', desc: block.desc
+                }
+                case 2:
+                  return {
+                    type: 'richText', desc: block.data.desc, towxmlNodes: this._toTowxml(block.data.desc)
+                  }
+                  case 'richText':
+                    return {
+                      type: 'richText', desc: block.desc, towxmlNodes: this._toTowxml(block.desc)
+                    }
+                    case 3:
+                      return {
+                        type: 'table', desc: block.data.desc, towxmlNodes: this._toTowxml(block.data.desc)
+                      }
+                      case 'table':
+                        return {
+                          type: 'table', desc: block.desc, towxmlNodes: this._toTowxml(block.desc)
+                        }
+                        case 4:
+                          return {
+                            type: 'image',
+                              id: block.data.image_jump.image.id,
+                              url: block.data.image_jump.image.url,
+                              jump: block.data.image_jump.jump,
+                              ratio: block.data.percent / 100
+                          }
+                          case 'image':
+                            return {
+                              type: 'image', url: block.url, jump: block.jump, ratio: block.ratio, id: block.id
+                            }
+                            case 5:
+                              return {
+                                type: 'banner', ratio: block.data.percent / 100, children: block.data.children
+                              }
+                              case 'banner':
+                                return {
+                                  type: 'banner', ratio: block.ratio, children: block.children
+                                }
+                                case 6:
+                                  return {
+                                    type: 'score',
+                                      title: block.data.title,
+                                      score: block.stats?.score ?? 0,
+                                      voteCount: block.stats?.stats?.vote_count ?? 0,
+                                      averageScore: (block.stats?.stats?.average_score ?? 0).toFixed(1),
+                                  }
+                                  case 'score':
+                                    return {
+                                      type: 'score',
+                                        title: block.title,
+                                        score: block.score ?? 0,
+                                        voteCount: block.voteCount ?? 0,
+                                        averageScore: block.averageScore ?? '0.0',
+                                    }
+                                    case 100:
+                                      return {
+                                        type: 'grid', title: block.data.title, count: block.data.count,
+                                          ...this._colorInfo(block.data.color),
+                                          children: block.data.children.map(c => ({
+                                            type: block.data.child_type, // ✅ 补上
+                                            name: c.name,
+                                            desc: c.desc,
+                                            jump: c.jump,
+                                            image: c.image?.url || c.image
+                                          }))
+                                      }
+                                      case 'grid':
+                                        return {
+                                          type: 'grid', count: block.count, color: block.color,
+                                            children: block.children.map(c => ({
+                                              type: c.type, // ✅ 保留原有 type
+                                              name: c.name,
+                                              desc: c.desc,
+                                              jump: c.jump,
+                                              image: c.image?.url || c.image
+                                            }))
+                                        }
+
+                                        case 101:
+                                          return {
+                                            type: 'tabs', title: block.data.title, count: block.data.count,
+                                              ...this._colorInfo(block.data.color),
+                                              tabs: block.data.tabs.map(t => ({
+                                                name: t.tab,
+                                                children: t.children.map(c => ({
+                                                  type: block.data.child_type, // ✅ 补上
+                                                  name: c.name,
+                                                  desc: c.desc,
+                                                  jump: c.jump,
+                                                  image: c.image?.url || ''
+                                                }))
+                                              }))
+                                          }
+                                          case 'tabs':
+                                            return {
+                                              type: 'tabs', title: block.title, count: block.count, color: block.color,
+                                                titleTextColor: block.titleTextColor || (block.color ? (this._isDarkColor(block.color) ? '#ffffff' : '#000000') : ''),
+
+                                                tabs: block.tabs.map(t => ({
+                                                  name: t.name,
+                                                  children: t.children
+                                                }))
+                                            }
+
+                                            case 102:
+                                              return {
+                                                type: 'filter-tabs', title: block.data.title, count: block.data.count,
+                                                  ...this._colorInfo(block.data.color),
+                                                  classes: block.data.classes || [],
+                                                  children: block.data.children.map(c => ({
+                                                    ...c,
+                                                    type: block.data.child_type, // ✅ 补上
+                                                    keys: c.keys || []
+                                                  }))
+                                              }
+
+                                              case 2000:
+                                                return {
+                                                  type: 'container', title: block.data.title,
+                                                    hasDivider: true,
+                                                    ...this._colorInfo(block.data.color),
+                                                    children: this._parseBlocks(block.data.children || [])
+                                                }
+                                                case 1000:
+                                                  return {
+                                                    type: 'container', title: block.data.title,
+                                                      ...this._colorInfo(block.data.color),
+                                                      children: this._parseBlocks(block.data.children || [])
+                                                  }
+                                                  case 1001:
+                                                    return {
+                                                      type: 'info', title: '攻略组成员', ...this._colorInfo(block.data.color), info: block.data.info
+                                                    }
+                                                    case 'info':
+                                                      return {
+                                                        type: 'info', title: '攻略组成员', color: block.color, info: block.info
+                                                      }
+
+                                                      case 1002:
+                                                        return {
+                                                          type: 'container', key: 'collapse', title: block.data.title,
+                                                            ...this._colorInfo(block.data.color),
+                                                            children: this._parseBlocks(block.data.children || [])
+                                                        }
+                                                        case 1003:
+                                                          return {
+                                                            type: 'content-tabs', title: block.data.title,
+                                                              ...this._colorInfo(block.data.color),
+                                                              tabs: block.data.tabs.map(tab => ({
+                                                                name: tab.tab,
+                                                                children: this._parseBlocks(tab.children || [])
+                                                              }))
+                                                          }
+                                                          case 'content-tabs':
+                                                            return {
+                                                              titleTextColor: block.titleTextColor || (block.color ? (this._isDarkColor(block.color) ? '#ffffff' : '#000000') : ''),
+
+                                                                type: 'content-tabs', title: block.title, color: block.color, tabs: block.tabs
+                                                            }
+
+                                                            case 1004: {
+                                                              const left = block.data.left ? this._parseBlocks([block.data.left])[0] : null
+                                                              const right = block.data.right ? this._parseBlocks([block.data.right])[0] : null
+                                                              return {
+                                                                type: 'lr',
+                                                                title: block.data.title,
+                                                                ...this._colorInfo(block.data.color),
+                                                                percent: block.data.percent,
+                                                                left,
+                                                                right,
+                                                                children: [left, right].filter(Boolean) // ✅ 补上
+                                                              }
+                                                            }
+                                                            case 'lr':
+                                                              return {
+                                                                type: 'lr', title: block.title, color: block.color,
+                                                                  percent: block.percent, left: block.left, right: block.right,
+                                                                  children: block.children
+                                                              }
+
+                                                              case 1005:
+                                                                return {
+                                                                  type: 'container', key: 'hasBGC', title: block.data.title,
+                                                                    ...this._colorInfo(block.data.color),
+                                                                    children: this._parseBlocks(block.data.children || [])
+                                                                }
+                                                                case 'container':
+                                                                  return {
+                                                                    type: 'container', key: block.key, title: block.title, color: block.color,
+                                                                      titleTextColor: block.titleTextColor || (block.color ? (this._isDarkColor(block.color) ? '#ffffff' : '#000000') : ''),
+
+                                                                      children: this._parseBlocks(block.children || [])
+                                                                  }
+                                                                  default:
+                                                                    return null
+        }
+      }).filter(Boolean)
+    },
+
+
+    _toTowxml(md) {
+      if (!md) return {}
+      try {
+        // ✅ 去掉表头里的权重标记，如 |名称:0| → |名称|
+        md = md.replace(/\|([^|]*?):\d+/g, '|$1')
+
+        // 把 #[文字](颜色) 转成 <span style="color:xxx">文字</span>
+        md = md.replace(/#\[([^\]]+)\]\(([^\)]+)\)/g, (match, text, color) => {
+          let cssColor = color
+          if (/^[0-9a-fA-F]{8}$/.test(color)) {
+            const r = color.slice(2, 4)
+            const g = color.slice(4, 6)
+            const b = color.slice(6, 8)
+            cssColor = `#${r}${g}${b}`
+          } else if (/^[0-9a-fA-F]{6}$/.test(color)) {
+            cssColor = `#${color}`
+          }
+          return `<span style="color:${cssColor}">${text}</span>`
+        })
+
+        return towxml(md, 'markdown', {
+          theme: 'light',
+          events: {
+            tap: (e) => {
+              const dataset = e.currentTarget?.dataset || e.target?.dataset || {}
+              const href = dataset.src || dataset.href || dataset.url || ''
+              if (!href) return
+              const decoded = decodeURIComponent(href)
+              if (!decoded.startsWith('http://') && !decoded.startsWith('https://')) {
+                this._jumpAction(decoded)
+              }
+            }
+          }
+        })
+      } catch (err) {
+        console.error('towxml 解析失败', err)
+        return {}
+      }
+    },
+
+    onTabChange(e) {
+      const {
+        blockIndex,
+        tabName
+      } = e.currentTarget.dataset
+      const tabActiveMap = {
+        ...this.data.tabActiveMap,
+        [blockIndex]: tabName
+      }
+      this.setData({
+        tabActiveMap
+      })
+    },
+
+    onFilterChange(e) {
+      const {
+        ci,
+        key
+      } = e.currentTarget.dataset
+      const filterMap = {
+        ...this.data.filterMap,
+        [ci]: key
+      }
+      const parsedBlocks = this.data.parsedBlocks.map(block => {
+        if (block.type !== 'filter-tabs') return block
+        const filteredChildren = block.children.filter(item =>
+          block.classes.every((cls, idx) => {
+            const selected = filterMap[idx] || '不限'
+            return selected === '不限' || item.keys.includes(selected)
+          })
+        )
+        return {
+          ...block,
+          filteredChildren
+        }
+      })
+      this.setData({
+        filterMap,
+        parsedBlocks
+      })
+    },
+
+    onToggleCollapse(e) {
+      const {
+        index
+      } = e.currentTarget.dataset
+      const collapseActive = {
+        ...this.data.collapseActive
+      }
+      collapseActive[index] = !collapseActive[index]
+      this.setData({
+        collapseActive
+      })
+    },
+
+    onVanTabChange(e) {
+      const {
+        blockIndex
+      } = e.currentTarget.dataset
+      const tabName = e.detail.name // van-tabs 的 change 事件里 name 在 detail 里
+      const tabActiveMap = {
+        ...this.data.tabActiveMap,
+        [blockIndex]: tabName
+      }
+      this.setData({
+        tabActiveMap
+      })
+    },
+
+    onJump(e) {
+      const jump = e.currentTarget.dataset.jump
+      if (jump) this._jumpAction(jump)
+    },
+
+    onTowxmlLinkTap(e) {
+      const href = e.detail.href || ''
+      if (!href) return
+      const name = decodeURIComponent(href)
+      console.log('wiki 跳转:', name)
+      this._jumpAction(name)
+    },
+
+    onRichTextTap(e) {
+      debugger
+      // towxml 点击事件，dataset 挂在被点击的节点上
+      const dataset = e.target.dataset || e.currentTarget.dataset
+
+      // 1️⃣ 拦截 wiki-link：[文字](武学:xxx)
+      // towxml 渲染后 data-wiki 挂在节点的 dataset 上
+      if (dataset.wiki) {
+        this._jumpAction(dataset.wiki)
+        return
+      }
+
+      // 2️⃣ 拦截普通链接：towxml 的 a 标签点击
+      // towxml 把 href 挂在 data-src 或 data-href 上
+      const href = dataset.src || dataset.href
+      if (href) {
+        const link = decodeURIComponent(href)
+        this._jumpAction(link)
+        return
+      }
+
+      // 3️⃣ 拦截 towxml 内部 tap 事件冒泡上来的节点
+      // 有时候点击的是子节点，需要向上找父节点的 dataset
+      // 通过 index 找到对应的 block，再判断内容
+      const index = e.currentTarget.dataset.index
+      console.log('richText tap, block index:', index)
+    },
+    onImageTap(e) {
+      const jump = e.currentTarget.dataset.jump
+      if (jump) this._jumpAction(jump)
+    },
+
+    _jumpAction(name) {
+      if (!name) return
+      wx.navigateTo({
+        url: `/pages/wiki/wiki?game_id=${this.properties.gameId}&name=${encodeURIComponent(name)}`
+      })
+    },
+
+    gotoUserCenter(e) {
+      const id = e.currentTarget.dataset.id
+      wx.navigateTo({
+        url: `/pages/user/user?id=${id}`
+      })
+    },
+    // 评分
+    onOpenScoreModal(e) {
+      if (!checkLogin()) return;
+
+      const {
+        index
+      } = e.currentTarget.dataset
+      const block = this.data.parsedBlocks[index]
+      this.setData({
+        scoreModal: {
+          visible: true,
+          title: block.title,
+          blockIndex: index,
+          selected: block.score || 0,
+        }
+      })
+    },
+
+    onSelectStar(e) {
+      this.setData({
+        'scoreModal.selected': e.detail,
+      })
+    },
+
+    onCloseScoreModal() {
+      this.setData({
+        'scoreModal.visible': false
+      })
+    },
+
+
+
+    stopPropagation() {
+      // 阻止弹窗内点击冒泡到蒙层
+    },
+
+    async onSubmitScore() {
+      console.log('submit', this.data.scoreModal)
+      const {
+        selected,
+        blockIndex
+      } = this.data.scoreModal
+      if (!selected || selected <= 0) return
+
+      try {
+        wx.showLoading({
+          title: '提交中...'
+        })
+
+        const wiki_name = this.data.name ?? ''
+        const res = await submitGameWikiScore(this.properties.gameId, wiki_name, selected)
+        wx.hideLoading()
+        wx.showToast({
+          title: '评分成功',
+          icon: 'success'
+        })
+
+        // 用接口返回的真实数据更新
+        const parsedBlocks = this.data.parsedBlocks.map((b, i) => {
+          if (i !== blockIndex) return b
+          return {
+            ...b,
+            score: res.data.score,
+            voteCount: res.data.stats.vote_count,
+            averageScore: res.data.stats.average_score.toFixed(1),
+            starFillMap: this._getStarFillMap(res.data.stats.average_score),
+          }
+        })
+        this.setData({
+          parsedBlocks,
+          'scoreModal.visible': false,
+        })
+      } catch (err) {
+        wx.hideLoading()
+        wx.showToast({
+          title: '提交失败',
+          icon: 'none'
+        })
+      }
+    },
+
+    // 根据 averageScore (如 3.5) 生成每颗星的填充百分比
+    _getStarFillMap(score) {
+      const fills = {}
+      for (let i = 1; i <= 5; i++) {
+        if (score >= i) {
+          fills[i] = 100 // 整颗星
+        } else if (score >= i - 0.5) {
+          fills[i] = 50 // 半颗星
+        } else {
+          fills[i] = 0 // 空星
+        }
+      }
+      return fills
+    }
+  }
+})

package/components/wiki-renderer/wiki-renderer.json

@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "usingComponents": {
+    "towxml": "/towxml/towxml",
+    "wiki-renderer": "/components/wiki-renderer/wiki-renderer",
+    "grid-item": "/components/grid-item/grid-item",
+    "van-tabs": "@vant/weapp/tabs/index",
+    "van-tab": "@vant/weapp/tab/index",
+    "wiki-tabs": "/components/wiki-tabs/wiki-tabs",
+    "van-rate": "@vant/weapp/rate/index"
+  }
+}