km-card-layout-component-miniprogram 0.1.5

package/src/components/card-layout/icon-map.ts

@@ -0,0 +1,118 @@
+export const ICON_CODE_MAP: Record<string, string> = {
+  Frame4: 'e674',
+  chain: 'e673',
+  'swap-setting': 'e672',
+  email1: 'e670',
+  mobile1: 'e671',
+  website: 'e66f',
+  calendar: 'e66e',
+  'contact-fill': 'e66d',
+  'card-holder': 'e66c',
+  link: 'e66b',
+  'buy-vip-13': 'e66a',
+  'buy-vip-11': 'e669',
+  'buy-vip-12': 'e668',
+  'contact-phone': 'e666',
+  'contact-wechat': 'e667',
+  group: 'e665',
+  bag: 'e605',
+  'column-group': 'e664',
+  minichat: 'e617',
+  helper: 'e663',
+  'remove-module': 'e660',
+  'add-module': 'e662',
+  drag: 'e661',
+  'switch-company': 'e65f',
+  'switch-person': 'e65e',
+  'manual-entry': 'e65d',
+  play: 'e65c',
+  'file-pdf': 'e65b',
+  'file-video': 'e65a',
+  plus: 'e659',
+  upload: 'e650',
+  'cert-company': 'e64f',
+  'qr-code': 'e658',
+  'company-card': 'e657',
+  'card-import': 'e64e',
+  camera: 'e655',
+  'card-apply': 'e632',
+  'check-2': 'e616',
+  check: 'e614',
+  'buy-vip-4': 'e613',
+  'buy-vip-10': 'e656',
+  'weixin-2': 'e653',
+  'qrcode-1': 'e654',
+  local: 'e652',
+  'cert-job': 'e64d',
+  'cert-name': 'e651',
+  'card-style-1': 'e64c',
+  'add-pic': 'e646',
+  'add-text': 'e647',
+  'buy-vip-2': 'e648',
+  'company-upload-logo': 'e649',
+  'Headset-one': 'e64a',
+  'edit-info': 'e64b',
+  'more-action': 'e645',
+  'upload-video': 'e644',
+  'upload-image': 'e643',
+  'company-info': 'e62a',
+  contact: 'e642',
+  'notice-1': 'e641',
+  visitor: 'e640',
+  'mobile-2': 'e63e',
+  'weixin-1': 'e63f',
+  share: 'e63d',
+  'refund-mistake': 'e637',
+  'buy-vip-7': 'e63b',
+  'table-import': 'e63c',
+  misService: 'e63a',
+  'buy-vip-6': 'e634',
+  import: 'e638',
+  download: 'e639',
+  image: 'e636',
+  'buy-vip-9': 'e635',
+  'buy-vip-5': 'e62f',
+  'buy-vip-3': 'e630',
+  'buy-vip-1': 'e631',
+  'buy-vip-8': 'e633',
+  companyWx: 'e62b',
+  dingding: 'e62c',
+  shui: 'e62d',
+  gongzhang: 'e62e',
+  wait: 'e629',
+  addImg: 'e628',
+  copy: 'e625',
+  'mobile-1': 'e627',
+  'functional-config': 'e604',
+  'module-config': 'e601',
+  'select-right': 'e626',
+  like: 'e624',
+  weixin: 'e620',
+  'column-user': 'e621',
+  'column-card': 'e622',
+  'column-company-card': 'e623',
+  'on-job': 'e61e',
+  person: 'e61f',
+  wallet: 'e615',
+  opinion: 'e618',
+  'sys-set': 'e619',
+  'sys-msg': 'e61d',
+  add: 'e61a',
+  search: 'e61b',
+  delete: 'e61c',
+  enter: 'e60f',
+  'card-style': 'e610',
+  switch: 'e612',
+  'card-edit': 'e60a',
+  close: 'e60d',
+  notice: 'e611',
+  edit: 'e60b',
+  'help-info': 'e60c',
+  'tag-filtering': 'e60e',
+  'kuanmai-logo': 'e603',
+  company: 'e606',
+  email: 'e607',
+  round: 'e608',
+  address: 'e609',
+  mobile: 'e602',
+};

package/src/components/card-layout/index.json

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

package/src/components/card-layout/index.ts

@@ -0,0 +1,96 @@
+import type { CardLayoutInput, RenderNode } from '../../vendor/km-card-layout-core/index'
+import { buildRenderResult } from '../../vendor/km-card-layout-core/index'
+import { ICON_CODE_MAP } from './icon-map'
+
+type LayoutData = {
+  user?: Record<string, any>
+  [key: string]: any
+}
+
+interface RenderCard {
+  id: string
+  cardStyle: string
+  backgroundImage: string
+  backgroundStyle: string
+  nodes: RenderNode[]
+}
+
+const ensureArray = (input: CardLayoutInput | any): CardLayoutInput => {
+  if (!input) return []
+  return Array.isArray(input) ? input : [input]
+}
+
+const pickCardId = (layout: any, idx: number) => {
+  if (layout && (layout.name || layout.id)) return layout.name || layout.id
+  return `card-${idx}`
+}
+
+Component({
+  options: {
+    styleIsolation: 'apply-shared'
+  },
+  properties: {
+    layout: {
+      type: Array,
+      optionalTypes: [Object],
+      value: []
+    },
+    data: {
+      type: Object,
+      value: {
+        user: {}
+      }
+    }
+  },
+  data: {
+    cards: [] as RenderCard[]
+  },
+  observers: {
+    layout() {
+      this.rebuild()
+    },
+    data() {
+      this.rebuild()
+    }
+  },
+  lifetimes: {
+    attached() {
+      this.rebuild()
+    }
+  },
+  methods: {
+    normalizeIconGlyph(nodes: RenderNode[]): RenderNode[] {
+      return nodes.map(node => {
+        if (node.type === 'icon') {
+          const glyph = ICON_CODE_MAP[node.name || node.text || '']
+          const text = glyph ? String.fromCharCode(parseInt(glyph, 16)) : node.text
+          return { ...node, text }
+        }
+        if (node.children && node.children.length) {
+          return { ...node, children: this.normalizeIconGlyph(node.children) }
+        }
+        return node
+      })
+    },
+    rebuild() {
+      const layoutInput = ensureArray(this.data.layout as CardLayoutInput)
+      const dataInput = (this.data.data || {}) as LayoutData
+
+      if (!layoutInput.length) {
+        this.setData({ cards: [] })
+        return
+      }
+
+      const rendered = buildRenderResult(layoutInput, dataInput, 'rpx')
+      const cards = rendered.map((card, idx) => ({
+        id: pickCardId(layoutInput[idx], idx),
+        cardStyle: card.cardStyle,
+        backgroundImage: card.backgroundImage,
+        backgroundStyle: card.backgroundStyle,
+        nodes: this.normalizeIconGlyph(card.renderTree)
+      }))
+
+      this.setData({ cards })
+    }
+  }
+})

package/src/components/card-layout/index.wxml

@@ -0,0 +1,66 @@
+<view class="km-card-layout-list">
+  <block wx:for="{{cards}}" wx:key="id">
+    <view class="km-card-layout-item">
+      <view class="km-card" style="{{item.cardStyle}}">
+        <image
+          wx:if="{{item.backgroundImage}}"
+          class="km-card__bg"
+          style="{{item.backgroundStyle}}"
+          src="{{item.backgroundImage}}"
+          mode="aspectFill"
+        />
+        <block wx:for="{{item.nodes}}" wx:key="id">
+          <template is="render-node" data="{{node:item}}" />
+        </block>
+      </view>
+    </view>
+  </block>
+</view>
+
+<template name="render-node">
+  <block wx:if="{{node.type === 'image'}}">
+    <view class="km-node" style="{{node.wrapperStyle}}">
+      <image
+        class="km-node__image"
+        style="{{node.contentStyle}}"
+        src="{{node.src}}"
+        mode="{{node.mode || 'aspectFill'}}"
+      />
+    </view>
+  </block>
+  <block wx:elif="{{node.type === 'icon'}}">
+    <view class="km-node km-node--icon" style="{{node.wrapperStyle}}">
+      <view
+        wx:if="{{node.name === 'dot'}}"
+        class="km-node__icon-dot"
+        style="{{node.contentStyle}}"
+      />
+      <view
+        wx:else
+        class="km-node__icon icon"
+        style="{{node.contentStyle}}"
+      >{{node.text}}</view>
+    </view>
+  </block>
+  <block wx:elif="{{node.type === 'layout-panel'}}">
+    <view class="km-node" style="{{node.wrapperStyle}}">
+      <view class="km-node__panel" style="{{node.contentStyle}}">
+        <block wx:for="{{node.children}}" wx:key="id">
+          <template is="render-node" data="{{node:item}}" />
+        </block>
+      </view>
+    </view>
+  </block>
+  <block wx:elif="{{node.type === 'custom'}}">
+    <view class="km-node km-node--custom" style="{{node.wrapperStyle}}">
+      <view class="km-node__custom" style="{{node.contentStyle}}">
+        <slot name="{{node.id}}"></slot>
+      </view>
+    </view>
+  </block>
+  <block wx:else>
+    <view class="km-node km-node--text" style="{{node.wrapperStyle}}">
+      <view style="{{node.contentStyle}}">{{node.text}}</view>
+    </view>
+  </block>
+</template>