tgo-widget-miniprogram 1.0.0

package/miniprogram_dist/components/json-render-element/index.wxss

@@ -0,0 +1,450 @@
+/* ====== Text ====== */
+.jr-text {
+  font-size: 28rpx;
+  color: #1a1a1a;
+  line-height: 1.6;
+}
+
+.jr-text-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.jr-text-caption {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.jr-section-title {
+  padding-top: 8rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.jr-text-kv {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12rpx;
+}
+
+.jr-text-kv-label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.jr-text-kv-value {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1a1a1a;
+  text-align: right;
+}
+
+/* ====== Divider ====== */
+.jr-divider {
+  height: 1rpx;
+  background-color: #e5e5e5;
+  margin: 8rpx 0;
+}
+
+/* ====== Badge ====== */
+.jr-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 24rpx;
+  padding: 4rpx 16rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+}
+
+.jr-badge-info {
+  background-color: #dbeafe;
+  color: #1d4ed8;
+}
+
+.jr-badge-success {
+  background-color: #d1fae5;
+  color: #047857;
+}
+
+.jr-badge-warning {
+  background-color: #fef3c7;
+  color: #b45309;
+}
+
+.jr-badge-danger {
+  background-color: #fee2e2;
+  color: #b91c1c;
+}
+
+/* ====== KV ====== */
+.jr-kv {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12rpx;
+}
+
+.jr-kv-highlight {
+  padding-top: 8rpx;
+  border-top: 1rpx solid #e5e5e5;
+}
+
+.jr-kv-label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.jr-kv-value {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1a1a1a;
+  text-align: right;
+}
+
+.jr-kv-value-highlight {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+/* ====== PriceRow ====== */
+.jr-price-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12rpx;
+}
+
+.jr-price-emphasis {
+  padding-top: 8rpx;
+  border-top: 1rpx solid #e5e5e5;
+  margin-top: 4rpx;
+}
+
+.jr-price-label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.jr-price-label-emphasis {
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.jr-price-value {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1a1a1a;
+  text-align: right;
+}
+
+.jr-price-value-emphasis {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.jr-price-discount {
+  color: #059669;
+  font-weight: 500;
+}
+
+/* ====== OrderItem ====== */
+.jr-order-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12rpx;
+  border-radius: 16rpx;
+  border: 1rpx solid #f0f0f0;
+  background-color: rgba(255, 255, 255, 0.7);
+  padding: 16rpx;
+}
+
+.jr-order-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.jr-order-name {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1a1a1a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.jr-order-sku {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 4rpx;
+  display: block;
+}
+
+.jr-order-right {
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.jr-order-qty {
+  font-size: 24rpx;
+  color: #999;
+  display: block;
+}
+
+.jr-order-price {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+  display: block;
+}
+
+/* ====== Image ====== */
+.jr-image {
+  max-width: 100%;
+  border-radius: 12rpx;
+}
+
+/* ====== Button ====== */
+.jr-button {
+  margin-top: 8rpx;
+  padding: 16rpx 32rpx;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  text-align: center;
+  transition: opacity 0.2s;
+}
+
+.jr-button:active {
+  opacity: 0.7;
+}
+
+.jr-button-primary {
+  background-color: #2563eb;
+  color: #ffffff;
+}
+
+.jr-button-danger {
+  background-color: #ef4444;
+  color: #ffffff;
+}
+
+.jr-button-link {
+  background: transparent;
+  color: #2563eb;
+  text-decoration: underline;
+  padding: 8rpx 0;
+}
+
+.jr-button-default {
+  background-color: #ffffff;
+  color: #374151;
+  border: 1rpx solid #e5e5e5;
+}
+
+.jr-button-disabled {
+  opacity: 0.5;
+}
+
+/* ====== ButtonGroup ====== */
+.jr-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12rpx;
+  margin-top: 12rpx;
+}
+
+/* ====== Card ====== */
+.jr-card {
+  border-radius: 24rpx;
+  border: 1rpx solid #e5e5e5;
+  padding: 24rpx;
+  background-color: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.jr-card-order {
+  border-color: #dbeafe;
+  background: linear-gradient(to bottom, #ffffff, rgba(219, 234, 254, 0.4));
+}
+
+/* ====== Section ====== */
+.jr-section {
+  border-radius: 16rpx;
+  border: 1rpx solid #f0f0f0;
+  background-color: rgba(249, 250, 251, 0.7);
+  padding: 16rpx;
+}
+
+.jr-section-header {
+  margin-bottom: 8rpx;
+}
+
+.jr-section-title-text {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.jr-section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.jr-section-body-with-title {
+  margin-top: 12rpx;
+}
+
+/* ====== Row ====== */
+.jr-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.jr-row-justify-start { justify-content: flex-start; }
+.jr-row-justify-center { justify-content: center; }
+.jr-row-justify-end { justify-content: flex-end; }
+.jr-row-justify-between { justify-content: space-between; }
+
+.jr-row-align-start { align-items: flex-start; }
+.jr-row-align-center { align-items: center; }
+.jr-row-align-end { align-items: flex-end; }
+
+.jr-row-gap-sm { gap: 6rpx; }
+.jr-row-gap-md { gap: 16rpx; }
+.jr-row-gap-lg { gap: 24rpx; }
+
+.jr-row-wrap { flex-wrap: wrap; }
+
+/* ====== Column ====== */
+.jr-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.jr-col-gap-sm { gap: 6rpx; }
+.jr-col-gap-md { gap: 16rpx; }
+.jr-col-gap-lg { gap: 24rpx; }
+
+/* ====== Input ====== */
+.jr-input-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.jr-input-label {
+  font-size: 28rpx;
+  color: #374151;
+}
+
+.jr-input {
+  border: 1rpx solid #d1d5db;
+  border-radius: 12rpx;
+  padding: 16rpx 20rpx;
+  font-size: 28rpx;
+  background-color: #ffffff;
+}
+
+/* ====== Checkbox ====== */
+.jr-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.jr-checkbox-box {
+  width: 36rpx;
+  height: 36rpx;
+  border: 2rpx solid #d1d5db;
+  border-radius: 6rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.jr-checkbox-checked {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+.jr-checkbox-mark {
+  font-size: 24rpx;
+  color: #ffffff;
+}
+
+.jr-checkbox-label {
+  font-size: 28rpx;
+  color: #374151;
+}
+
+/* ====== MultipleChoice ====== */
+.jr-mc-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.jr-mc-label {
+  font-size: 28rpx;
+  color: #374151;
+}
+
+.jr-mc-picker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1rpx solid #d1d5db;
+  border-radius: 12rpx;
+  padding: 16rpx 20rpx;
+  font-size: 28rpx;
+  background-color: #ffffff;
+}
+
+.jr-mc-arrow {
+  font-size: 20rpx;
+  color: #999;
+}
+
+/* ====== DateTimeInput ====== */
+.jr-dt-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.jr-dt-label {
+  font-size: 28rpx;
+  color: #374151;
+}
+
+.jr-dt-picker {
+  border: 1rpx solid #d1d5db;
+  border-radius: 12rpx;
+  padding: 16rpx 20rpx;
+  font-size: 28rpx;
+  background-color: #ffffff;
+}
+
+/* ====== Unknown / fallback ====== */
+.jr-unknown {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.jr-too-deep {
+  font-size: 24rpx;
+  color: #999;
+}

package/miniprogram_dist/components/json-render-message/index.js

@@ -0,0 +1,89 @@
+/**
+ * json-render-message: groups uiParts into text/spec groups and renders them.
+ * Ported from tgo-widget-app JSONRenderMessage.tsx
+ */
+var jsonRenderUtils = require('../../utils/jsonRender')
+
+Component({
+  options: {
+    virtualHost: true
+  },
+
+  properties: {
+    uiParts: {
+      type: Array,
+      value: null
+    },
+    payloadContent: {
+      type: String,
+      value: ''
+    },
+    showCursor: {
+      type: Boolean,
+      value: false
+    },
+    themeColor: {
+      type: String,
+      value: '#2f80ed'
+    }
+  },
+
+  data: {
+    groups: [],
+    hasGroups: false,
+    fallbackText: '',
+    lastIndex: -1
+  },
+
+  observers: {
+    'uiParts, payloadContent': function () {
+      this._rebuild()
+    }
+  },
+
+  methods: {
+    _rebuild: function () {
+      var parts = this.properties.uiParts
+      if (!Array.isArray(parts) || parts.length === 0) {
+        // Fallback: use payloadContent, strip spec fences
+        var raw = this.properties.payloadContent
+        var fallback = raw
+        if (raw && raw.indexOf('```spec') >= 0) {
+          fallback = raw.replace(/```spec[\s\S]*?```/g, '').replace(/```spec[\s\S]*/g, '').trim()
+        }
+        this.setData({
+          groups: [],
+          hasGroups: false,
+          fallbackText: fallback || '',
+          lastIndex: -1
+        })
+        return
+      }
+
+      var partGroups = jsonRenderUtils.groupParts(parts)
+      var groups = []
+      for (var i = 0; i < partGroups.length; i++) {
+        var g = partGroups[i]
+        if (g.type === 'text') {
+          groups.push({ type: 'text', text: g.text, spec: null })
+        } else if (g.type === 'spec') {
+          var spec = jsonRenderUtils.buildSpecFromParts(g.parts)
+          if (spec) {
+            groups.push({ type: 'spec', text: '', spec: spec })
+          }
+        }
+      }
+
+      this.setData({
+        groups: groups,
+        hasGroups: groups.length > 0,
+        fallbackText: '',
+        lastIndex: groups.length - 1
+      })
+    },
+
+    onSendMessage: function (e) {
+      this.triggerEvent('sendmessage', e.detail)
+    }
+  }
+})

package/miniprogram_dist/components/json-render-message/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "json-render-surface": "../json-render-surface/index",
+    "markdown-text": "../markdown-text/index"
+  }
+}

package/miniprogram_dist/components/json-render-message/index.wxml

@@ -0,0 +1,25 @@
+<block wx:if="{{hasGroups}}">
+  <block wx:for="{{groups}}" wx:key="index">
+    <!-- Text group -->
+    <view wx:if="{{item.type === 'text' && item.text}}" class="jr-text-group">
+      <markdown-text content="{{item.text}}" />
+      <view wx:if="{{showCursor && index === lastIndex}}" class="cursor"></view>
+    </view>
+    <!-- Spec group -->
+    <json-render-surface
+      wx:elif="{{item.type === 'spec' && item.spec}}"
+      spec="{{item.spec}}"
+      loading="{{showCursor}}"
+      themeColor="{{themeColor}}"
+      bind:sendmessage="onSendMessage"
+    />
+  </block>
+</block>
+
+<!-- Fallback text when no groups -->
+<block wx:elif="{{fallbackText}}">
+  <view class="jr-fallback">
+    <markdown-text content="{{fallbackText}}" />
+    <view wx:if="{{showCursor}}" class="cursor"></view>
+  </view>
+</block>

package/miniprogram_dist/components/json-render-message/index.wxss

@@ -0,0 +1,26 @@
+.jr-text-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.jr-fallback {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.cursor {
+  display: inline-block;
+  width: 4rpx;
+  height: 28rpx;
+  background: #333;
+  margin-left: 4rpx;
+  animation: blink 1s step-end infinite;
+  vertical-align: text-bottom;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}

package/miniprogram_dist/components/json-render-surface/index.js

@@ -0,0 +1,116 @@
+/**
+ * json-render-surface: manages state store and renders root element.
+ * Handles action dispatch and state change events.
+ * Ported from tgo-widget-app JSONRenderSurface.tsx
+ */
+var jsonRenderUtils = require('../../utils/jsonRender')
+
+Component({
+  options: {
+    virtualHost: true
+  },
+
+  properties: {
+    spec: {
+      type: Object,
+      value: null
+    },
+    loading: {
+      type: Boolean,
+      value: false
+    },
+    themeColor: {
+      type: String,
+      value: '#2f80ed'
+    }
+  },
+
+  data: {
+    stateSnapshot: {},
+    hasRoot: false
+  },
+
+  observers: {
+    'spec': function (spec) {
+      this._initStore(spec)
+    }
+  },
+
+  lifetimes: {
+    detached: function () {
+      if (this._unsub) {
+        this._unsub()
+        this._unsub = null
+      }
+    }
+  },
+
+  methods: {
+    _initStore: function (spec) {
+      var self = this
+      // Clean up previous subscription
+      if (this._unsub) {
+        this._unsub()
+        this._unsub = null
+      }
+
+      if (!spec || !spec.root) {
+        this.setData({ hasRoot: false, stateSnapshot: {} })
+        return
+      }
+
+      var store = jsonRenderUtils.createStateStore(spec.state || {})
+      this._store = store
+      this._actionNames = jsonRenderUtils.collectActionNames(spec)
+
+      this.setData({
+        hasRoot: true,
+        stateSnapshot: store.getSnapshot()
+      })
+
+      this._unsub = store.subscribe(function () {
+        self.setData({ stateSnapshot: store.getSnapshot() })
+      })
+    },
+
+    onAction: function (e) {
+      var detail = e.detail || {}
+      var actionName = detail.actionName
+      var params = detail.params || {}
+
+      if (!actionName) return
+
+      // Built-in state actions
+      if (actionName === 'setState' && this._store) {
+        if (params.statePath && typeof params.statePath === 'string') {
+          this._store.set(params.statePath, params.value)
+        }
+        return
+      }
+      if (actionName === 'pushState' && this._store) {
+        return
+      }
+      if (actionName === 'removeState' && this._store) {
+        return
+      }
+
+      // Contains statePath → treat as state update
+      if (params.statePath && typeof params.statePath === 'string' && this._store) {
+        this._store.set(params.statePath, params.value)
+        return
+      }
+
+      // External action → format as text message
+      var snapshot = this._store ? this._store.getSnapshot() : {}
+      var text = jsonRenderUtils.formatActionMessage(actionName, params, snapshot)
+      this.triggerEvent('sendmessage', { text: text })
+    },
+
+    onStateChange: function (e) {
+      var detail = e.detail || {}
+      if (detail.path && this._store) {
+        this._store.set(detail.path, detail.value)
+      }
+    }
+  }
+})

package/miniprogram_dist/components/json-render-surface/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "json-render-element": "../json-render-element/index"
+  }
+}