cardbuddy 0.6.0

package/dist/vendored/components/JsonTree.vue

@@ -0,0 +1,516 @@
+<template>
+  <div class="jt">
+    <!-- 仅根节点、且可编辑时显示批量控制条（运行态面板为只读，不需要工具栏） -->
+    <div v-if="isRoot && editable" class="jt__toolbar">
+      <button class="jt__tool" type="button" @click="setOpen(true)">全部展开</button>
+      <button class="jt__tool" type="button" @click="setOpen(false)">全部折叠</button>
+      <button class="jt__tool jt__tool--add" type="button" @click="addChild" title="添加子节点">+ 添加</button>
+    </div>
+
+    <ul class="jt__list" :class="{ 'jt__list--root': isRoot }">
+      <li v-for="(item, i) in entries" :key="i" class="jt__node">
+        <!-- 复合类型（对象 / 数组）：可折叠 -->
+        <template v-if="isComplex(item.value)">
+          <div
+            class="jt__row jt__row--branch"
+            :class="{ 'jt__row--selected': isSelected(item) }"
+            @click="onBranchClick(item)"
+            @contextmenu.prevent="showContextMenu(item, $event)"
+          >
+            <span class="jt__caret" :class="{ 'jt__caret--open': isOpen(item.key) }">▶</span>
+            <span
+              v-if="!item.isArrayBranch"
+              class="jt__key jt__editable"
+              @dblclick.stop="startEditKey(item)"
+            >
+              <input
+                v-if="editingKey === item.key"
+                ref="keyInput"
+                class="jt__edit"
+                :value="item.keyLabel"
+                @keydown.enter="confirmEditKey(item, $event)"
+                @keydown.escape="cancelEdit"
+                @blur="confirmEditKey(item, $event)"
+              />
+              <template v-else>{{ item.keyLabel }}</template>
+            </span>
+            <span
+              class="jt__bracket jt__editable"
+              @dblclick.stop="editable && startEditComplex(item)"
+            >{{ item.isArrayBranch ? '[' : '{' }}</span>
+            <span v-if="!isOpen(item.key)" class="jt__preview jt__editable" @dblclick.stop="editable && startEditComplex(item)">{{ previewText(item.value) }}</span>
+          </div>
+
+          <!-- 复合类型整体编辑弹层 -->
+          <div v-if="editingComplex === item.key" class="jt__json-edit" @click.stop>
+            <textarea
+              ref="jsonInput"
+              class="jt__json-textarea"
+              :value="jsonEditText"
+              @input="jsonEditText = $event.target.value"
+              @keydown.escape="cancelEdit"
+              @keydown.ctrl.enter="confirmEditComplex(item)"
+              @keydown.meta.enter="confirmEditComplex(item)"
+            ></textarea>
+            <div class="jt__json-actions">
+              <button type="button" class="jt__json-btn" @click="confirmEditComplex(item)">确定</button>
+              <button type="button" class="jt__json-btn jt__json-btn--cancel" @click="cancelEdit">取消</button>
+              <span class="jt__json-hint">Ctrl+Enter 确认 · Esc 取消</span>
+            </div>
+          </div>
+
+          <JsonTree
+            v-if="isOpen(item.key)"
+            class="jt__child"
+            :data="item.value"
+            :depth="depth + 1"
+            :rt="rt"
+            :path="item.path"
+            :editable="editable"
+          />
+
+          <div v-if="isOpen(item.key)" class="jt__row jt__row--close">
+            <span class="jt__bracket">{{ item.isArrayBranch ? ']' : '}' }}</span>
+            <span class="jt__count">{{ item.count }} {{ item.isArrayBranch ? '项' : '键' }}</span>
+          </div>
+        </template>
+
+        <!-- 基础类型：叶子 -->
+        <div
+          v-else
+          class="jt__row jt__row--leaf"
+          :class="{ 'jt__row--selected': isSelected(item) }"
+          @click="selectNode(item)"
+          @contextmenu.prevent="showContextMenu(item, $event)"
+        >
+          <span class="jt__caret jt__caret--leaf"></span>
+          <span
+            v-if="item.keyLabel !== null && editable"
+            class="jt__key jt__editable"
+            @dblclick.stop="startEditKey(item)"
+          >
+            <input
+              v-if="editingKey === item.key"
+              ref="keyInput"
+              class="jt__edit"
+              :value="item.keyLabel"
+              @keydown.enter="confirmEditKey(item, $event)"
+              @keydown.escape="cancelEdit"
+              @blur="confirmEditKey(item, $event)"
+            />
+            <template v-else>{{ item.keyLabel }}</template>
+          </span>
+          <span v-if="item.keyLabel !== null && !editable" class="jt__key">{{ item.keyLabel }}</span>
+          <span v-if="item.keyLabel !== null" class="jt__colon">:</span>
+          <span
+            class="jt__val"
+            :class="['jt__val--' + item.type, { 'jt__editable': editable }]"
+            @dblclick.stop="editable && startEditValue(item)"
+          >
+            <input
+              v-if="editingValue === item.key"
+              ref="valInput"
+              class="jt__edit"
+              :value="formatForEdit(item.value, item.type)"
+              @keydown.enter="confirmEditValue(item, $event)"
+              @keydown.escape="cancelEdit"
+              @blur="confirmEditValue(item, $event)"
+            />
+            <template v-else>{{ formatPrimitive(item.value, item.type) }}</template>
+          </span>
+          <button v-if="editable" class="jt__del" type="button" @click.stop="deleteNode(item)" title="删除节点">×</button>
+        </div>
+      </li>
+    </ul>
+
+    <!-- 右键菜单（fixed 定位，全局可见） -->
+    <div
+      v-if="ctxMenu.visible"
+      class="jt__ctxmenu"
+      :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }"
+      @click.stop
+    >
+      <button class="jt__ctxmenu-item" type="button" @click="ctxCopyPath">复制路径</button>
+      <!-- 删除节点仅在可编辑（绑定数据 tab）时提供；只读树（如运行态面板）只保留复制路径 -->
+      <button v-if="editable" class="jt__ctxmenu-item jt__ctxmenu-item--del" type="button" @click="ctxDelete">删除节点</button>
+    </div>
+    <div v-if="ctxMenu.visible" class="jt__ctxmenu-mask" @click="hideContextMenu" @contextmenu.prevent="hideContextMenu"></div>
+  </div>
+</template>
+
+<script>
+import { reactive } from 'vue'
+import { copyText } from '@/runtime/clipboard.js'
+import { showAppToast } from '@/runtime/app-toast.js'
+
+// 模块级共享状态：驱动「全部展开 / 全部折叠」和「选中节点」。
+// 所有 JsonTree 实例（含递归子实例）共享同一份，避免 provide/inject
+// 在嵌套层级被逐层覆盖的问题。
+const treeState = reactive({ openAll: null, selectedPath: null })
+
+/**
+ * 沿路径设置 rootScope 中的值 / 删除 / 重命名。
+ * path 为字符串数组，如 ['account', 'name'] 对应 rootScope.account.name
+ * Vue 3 的 Proxy 响应式能自动追踪新增/删除属性，直接赋值/delete 即可。
+ */
+function setByPath(obj, path, value) {
+  let cur = obj
+  for (let i = 0; i < path.length - 1; i++) cur = cur[path[i]]
+  cur[path[path.length - 1]] = value
+}
+
+function deleteByPath(obj, path) {
+  let cur = obj
+  for (let i = 0; i < path.length - 1; i++) cur = cur[path[i]]
+  delete cur[path[path.length - 1]]
+}
+
+function renameKey(obj, path, oldKey, newKey) {
+  if (!newKey || newKey === oldKey) return false
+  let cur = obj
+  for (let i = 0; i < path.length; i++) cur = cur[path[i]]
+  if (newKey in cur) return false // 目标 key 已存在
+  const val = cur[oldKey]
+  delete cur[oldKey]
+  cur[newKey] = val
+  return true
+}
+
+function getByPath(obj, path) {
+  let cur = obj
+  for (const seg of path) {
+    if (cur == null || typeof cur !== 'object') return undefined
+    cur = cur[seg]
+  }
+  return cur
+}
+
+export default {
+  name: 'JsonTree',
+  props: {
+    data: { type: [Object, Array], default: () => ({}) },
+    depth: { type: Number, default: 0 },
+    rt: { type: Object, default: null },
+    path: { type: Array, default: () => [] },
+    editable: { type: Boolean, default: false },
+    schema: { type: Object, default: null },
+  },
+  data() {
+    return {
+      localOpen: {},
+      editingKey: null,
+      editingValue: null,
+      editingComplex: null,
+      jsonEditText: '',
+      ctxMenu: {
+        visible: false,
+        x: 0,
+        y: 0,
+        item: null,
+      },
+    }
+  },
+  computed: {
+    isRoot() {
+      return this.depth === 0
+    },
+    entries() {
+      const d = this.data
+      if (Array.isArray(d)) {
+        return d.map((v, i) => this.makeEntry(String(i), v, true, i))
+      }
+      if (d && typeof d === 'object') {
+        return Object.keys(d).map((k) => this.makeEntry(k, d[k], false, k))
+      }
+      return []
+    },
+  },
+  watch: {
+    data() {
+      this.initOpen()
+      // 数据整体替换（切换卡片）时清空选中，避免选中路径失效
+      if (this.isRoot) treeState.selectedPath = null
+    },
+  },
+  created() {
+    if (this.isRoot) treeState.openAll = null
+    this.initOpen()
+  },
+  methods: {
+    makeEntry(keyLabel, value, isArrayBranch, rawKey) {
+      const isArr = Array.isArray(value)
+      const count = isArr ? value.length : Object.keys(value || {}).length
+      return {
+        key: String(rawKey),
+        keyLabel,
+        value,
+        isArrayBranch,
+        isArray: isArr,
+        count,
+        type: this.valueType(value),
+        path: [...this.path, rawKey],
+      }
+    },
+    valueType(v) {
+      if (v === null) return 'null'
+      if (Array.isArray(v)) return 'array'
+      return typeof v
+    },
+    isComplex(v) {
+      return v !== null && typeof v === 'object'
+    },
+    initOpen() {
+      const m = {}
+      this.entries.forEach((e) => {
+        m[e.key] = this.depth < 2
+      })
+      this.localOpen = m
+    },
+    isOpen(key) {
+      if (treeState.openAll !== null) return treeState.openAll
+      return !!this.localOpen[key]
+    },
+    toggle(key) {
+      const next = !this.isOpen(key)
+      this.localOpen[key] = next
+      treeState.openAll = null
+    },
+    // ---- 节点选中 ----
+    isSelected(item) {
+      const sp = treeState.selectedPath
+      if (!sp || sp.length !== item.path.length) return false
+      return sp.every((seg, i) => String(seg) === String(item.path[i]))
+    },
+    selectNode(item) {
+      // 再次点击已选中节点则取消选中
+      if (this.isSelected(item)) {
+        treeState.selectedPath = null
+      } else {
+        treeState.selectedPath = item.path.slice()
+      }
+    },
+    onBranchClick(item) {
+      this.toggle(item.key)
+      // 选中该分支节点（供添加操作定位）
+      treeState.selectedPath = item.path.slice()
+    },
+    setOpen(v) {
+      treeState.openAll = v
+    },
+    previewText(val) {
+      if (Array.isArray(val)) return ' … ' + val.length + ' 项'
+      const keys = Object.keys(val)
+      const head = keys.slice(0, 3).join(', ')
+      return ' … ' + head + (keys.length > 3 ? ', …' : '') + ' '
+    },
+    formatPrimitive(v, type) {
+      if (v === null) return 'null'
+      if (type === 'string') return JSON.stringify(v)
+      return String(v)
+    },
+    formatForEdit(v, type) {
+      if (v === null) return 'null'
+      if (type === 'string') return v
+      return String(v)
+    },
+    // ---- 编辑功能 ----
+    startEditKey(item) {
+      this.cancelEdit()
+      this.editingKey = item.key
+      this.$nextTick(() => {
+        const inputs = this.$refs.keyInput
+        if (inputs) {
+          const input = Array.isArray(inputs) ? inputs[0] : inputs
+          input.focus()
+          input.select()
+        }
+      })
+    },
+    confirmEditKey(item, event) {
+      const newKey = event.target.value.trim()
+      if (!newKey || newKey === item.keyLabel) {
+        this.cancelEdit()
+        return
+      }
+      if (this.rt && this.rt.rootScope) {
+        // 父路径 = item.path 去掉最后一段（当前 key）
+        const parentPath = item.path.slice(0, -1)
+        const oldKey = item.path[item.path.length - 1]
+        const ok = renameKey(this.rt.rootScope, parentPath, oldKey, newKey)
+        if (!ok) {
+          this.cancelEdit()
+          return
+        }
+        this.rt.markDirty()
+      }
+      this.editingKey = null
+    },
+    startEditValue(item) {
+      this.cancelEdit()
+      this.editingValue = item.key
+      this.$nextTick(() => {
+        const inputs = this.$refs.valInput
+        if (inputs) {
+          const input = Array.isArray(inputs) ? inputs[0] : inputs
+          input.focus()
+          input.select()
+        }
+      })
+    },
+    confirmEditValue(item, event) {
+      const raw = event.target.value
+      let newValue = raw
+      // 按类型解析
+      if (item.type === 'number') {
+        const n = Number(raw)
+        if (!isNaN(n)) newValue = n
+      } else if (item.type === 'boolean') {
+        if (raw === 'true') newValue = true
+        else if (raw === 'false') newValue = false
+      } else if (item.type === 'null') {
+        if (raw === 'null') newValue = null
+        else newValue = raw // 从 null 改成其他类型
+      } else if (item.type === 'string') {
+        newValue = raw // 字符串直接用原始值
+      } else {
+        // 尝试 JSON 解析
+        try { newValue = JSON.parse(raw) } catch { /* 保持字符串 */ }
+      }
+      if (this.rt && this.rt.rootScope) {
+        setByPath(this.rt.rootScope, item.path, newValue)
+        this.rt.markDirty()
+      }
+      this.editingValue = null
+    },
+    // ---- 复合类型整体编辑 ----
+    startEditComplex(item) {
+      this.cancelEdit()
+      this.editingComplex = item.key
+      this.jsonEditText = JSON.stringify(item.value, null, 2)
+      this.$nextTick(() => {
+        const ta = this.$refs.jsonInput
+        if (ta) {
+          const textarea = Array.isArray(ta) ? ta[0] : ta
+          textarea.focus()
+          textarea.select()
+        }
+      })
+    },
+    confirmEditComplex(item) {
+      try {
+        const parsed = JSON.parse(this.jsonEditText)
+        if (this.rt && this.rt.rootScope) {
+          setByPath(this.rt.rootScope, item.path, parsed)
+          this.rt.markDirty()
+        }
+        this.cancelEdit()
+      } catch (e) {
+        // JSON 解析失败，不关闭编辑器，让用户修正
+        alert('JSON 解析失败: ' + e.message)
+      }
+    },
+    cancelEdit() {
+      this.editingKey = null
+      this.editingValue = null
+      this.editingComplex = null
+      this.jsonEditText = ''
+    },
+    deleteNode(item) {
+      if (this.rt && this.rt.rootScope) {
+        deleteByPath(this.rt.rootScope, item.path)
+        this.rt.markDirty()
+      }
+    },
+    addChild() {
+      if (!this.rt || !this.rt.rootScope) return
+      // 优先添加到选中的节点（若为 object/array）；否则添加到最外层根节点
+      let data = this.rt.rootScope
+      const sp = treeState.selectedPath
+      if (sp && sp.length) {
+        const sel = getByPath(this.rt.rootScope, sp)
+        if (sel !== null && typeof sel === 'object') data = sel
+      }
+      if (Array.isArray(data)) {
+        data.push('')
+        this.rt.markDirty()
+      } else if (data && typeof data === 'object') {
+        // 生成唯一 key
+        let newKey = 'newKey'
+        let n = 1
+        while (newKey in data) { newKey = 'newKey' + (n > 1 ? n : ''); n++ }
+        data[newKey] = ''
+        this.rt.markDirty()
+      }
+    },
+    // ---- 右键菜单 ----
+    showContextMenu(item, event) {
+      this.ctxMenu.visible = true
+      this.ctxMenu.x = event.clientX
+      this.ctxMenu.y = event.clientY
+      this.ctxMenu.item = item
+    },
+    hideContextMenu() {
+      this.ctxMenu.visible = false
+      this.ctxMenu.item = null
+    },
+    ctxCopyPath() {
+      const item = this.ctxMenu.item
+      this.hideContextMenu()
+      if (!item) return
+      const keyPath = this.formatKeyPath(item.path)
+      copyText(keyPath).then((ok) => {
+        if (ok) showAppToast(`已复制路径：${keyPath}`, 'ok')
+        else showAppToast('复制失败，请手动复制', 'err')
+      })
+    },
+    /** 把路径数组格式化为「字段.数字[索引]」形式：数字段用方括号包裹，如 account_details[0].account_type_alias[0] */
+    formatKeyPath(path) {
+      let result = ''
+      for (const seg of path) {
+        if (typeof seg === 'number' || /^\d+$/.test(String(seg))) {
+          result += `[${seg}]`
+        } else {
+          result += result ? `.${seg}` : `${seg}`
+        }
+      }
+      return result
+    },
+    ctxDelete() {
+      const item = this.ctxMenu.item
+      this.hideContextMenu()
+      if (!item) return
+      // 检查是否被引用
+      const referenced = this.isNodeReferenced(item.path)
+      if (referenced) {
+        const key = item.path.join('.')
+        if (!confirm(`节点 “${key}” 在 schema 中被引用，删除后可能导致渲染异常。\n\n确定要删除吗？`)) {
+          return
+        }
+      }
+      this.deleteNode(item)
+    },
+    /** 检测节点是否被 schema 引用（属性绑定 $key 或事件代码 state.key） */
+    isNodeReferenced(path) {
+      if (!this.schema) return false
+      const schemaStr = JSON.stringify(this.schema)
+      // 检查路径中每一段是否被引用
+      // 例如 ['account', 'name'] 需要检查 'account' 和 'account.name'
+      for (let i = 0; i < path.length; i++) {
+        const partial = path.slice(0, i + 1).join('.')
+        const key = path[i]
+        // 属性绑定模式：$key 或 $path
+        if (schemaStr.includes('$' + key) || schemaStr.includes('$' + partial)) return true
+        // 事件代码模式：state.key 或 this.state.key
+        if (schemaStr.includes('state.' + key) || schemaStr.includes('state.' + partial)) return true
+        // 表达式模式：(key == ... 或 key.xxx
+        const exprRegex = new RegExp('\\b' + this.escapeRegex(key) + '\\b')
+        if (exprRegex.test(schemaStr)) return true
+      }
+      return false
+    },
+    escapeRegex(str) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    },
+  },
+}
+</script>

package/dist/vendored/components/ListLayout.vue

@@ -0,0 +1,68 @@
+<!--
+  官方 module 2109 / 545。
+  作用域插槽 default 透传 { item, index }；第 0 项不加间距。
+-->
+<template>
+  <div class="ce_listlayout" :style="rootStyle" @click="$emit('click', $event)">
+    <div class="ce_listlayout_con" :class="conClasses" :style="conStyleObj">
+      <div
+        v-for="(item, index) in value || []"
+        :key="index"
+        class="ce_listlayout_item"
+        :style="index === 0 ? {} : itemStyleObj"
+      >
+        <slot :item="item" :index="index" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import StyleParser from '../runtime/StyleParser.js'
+import base from './base.js'
+
+export default {
+  name: 'CeListLayout',
+  emits: ['click'],
+  mixins: [base],
+  props: {
+    styleProps: { type: Object, default: () => ({}) },
+    value: { type: Array, default: () => [] },
+    direction: { type: String, default: 'vertical' },
+    rowSpacing: { type: [String, Number], default: '' },
+    edgeInsets: { type: String, default: '' },
+  },
+  computed: {
+    itemStyleObj() {
+      const horizontal = this.direction === 'horizontal'
+      return {
+        marginLeft: horizontal ? this.adapter.doSize(this.rowSpacing) : 0,
+        marginTop: horizontal ? 0 : this.adapter.doSize(this.rowSpacing),
+      }
+    },
+    conClasses() {
+      return { ce_listlayout_horizontal: this.direction === 'horizontal' }
+    },
+    conStyleObj() {
+      const out = {}
+      if (this.edgeInsets) {
+        // edgeInsets 形如 "{top,left,bottom,right}"
+        const p = this.parsePadding(this.edgeInsets)
+        out.paddingLeft = this.adapter.doSize(p[1])
+        out.paddingTop = this.adapter.doSize(p[0])
+        out.paddingRight = this.adapter.doSize(p[3])
+        out.paddingBottom = this.adapter.doSize(p[2])
+      }
+      return out
+    },
+    rootStyle() {
+      return new StyleParser(this, this.styleProps).parse()
+    },
+  },
+  methods: {
+    parsePadding(v) {
+      return String(v).replace(/[{}]/g, '').split(',')
+    },
+  },
+}
+</script>

package/dist/vendored/components/LogValue.vue

@@ -0,0 +1,51 @@
+<!--
+  事件日志单值渲染器（事件面板日志区块使用）。
+  - 基础类型（string/number/boolean/null/undefined/function）：内联 span，按类型着色
+    （复用 json-tree.css 的 .jt__val--* 配色，与接口调用树一致，实现语法高亮）。
+  - 复合类型（对象 / 数组）：渲染为可折叠 JSON 树（ApiPayloadTree），默认全部折叠，
+    符合「JSON 默认收起」的要求；maxDepth 防护循环引用 / 超深结构。
+-->
+<template>
+  <span v-if="!complex" class="log__val" :class="'jt__val--' + typeClass">{{ display }}</span>
+  <div v-else class="log__json"><ApiPayloadTree :value="value" :max-depth="14" /></div>
+</template>
+
+<script>
+import ApiPayloadTree from './ApiPayloadTree.vue'
+
+export default {
+  name: 'LogValue',
+  components: { ApiPayloadTree },
+  props: {
+    // 当前日志实参（任意类型）
+    value: { default: null },
+  },
+  computed: {
+    complex() {
+      return this.value !== null && typeof this.value === 'object'
+    },
+    // 用于着色的类型类：与 jt__val--* 对齐（string/number/boolean/null/array/object）
+    typeClass() {
+      if (this.value === null || this.value === undefined) return 'null'
+      if (Array.isArray(this.value)) return 'array'
+      const t = typeof this.value
+      if (t === 'string' || t === 'number' || t === 'boolean') return t
+      // function / bigint / symbol 等：用柔和色（null 类）而非 object 紫
+      return 'null'
+    },
+    display() {
+      const v = this.value
+      if (v === undefined) return 'undefined'
+      if (v === null) return 'null'
+      if (typeof v === 'string') return v
+      if (typeof v === 'function') return '[Function ' + (v.name || 'anonymous') + ']'
+      if (typeof v === 'number' || typeof v === 'boolean' || typeof v === 'bigint') return String(v)
+      try {
+        return JSON.stringify(v)
+      } catch {
+        return String(v)
+      }
+    },
+  },
+}
+</script>