cardbuddy 0.11.0 → 0.12.1

package/dist/vendored/components/Switch.vue

@@ -1,38 +0,0 @@
-<!-- 通用开关组件（受控）。
-     视觉对齐 App.vue 内的 .theme-toggle 范式，配色严格遵循
-     《深浅主题配色规范手册》§4.5 Switch：
-       - 关闭：中性灰（复用 --bg-input / --border-strong / --text-faint）
-       - 开启：主色实心（--accent）+ 滑块用主色上的文字（--on-accent）
-     双主题仅切换同名 Token 取值，组件不写颜色分支、禁止硬编码十六进制。 -->
-<template>
-  <button
-    type="button"
-    class="switch"
-    :class="{ 'switch--on': modelValue, 'switch--disabled': disabled }"
-    role="switch"
-    :aria-checked="String(modelValue)"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <span class="switch__track">
-      <span class="switch__thumb"></span>
-    </span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'Switch',
-  props: {
-    modelValue: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-  },
-  emits: ['update:modelValue'],
-  methods: {
-    onClick() {
-      if (this.disabled) return
-      this.$emit('update:modelValue', !this.modelValue)
-    },
-  },
-}
-</script>

package/dist/vendored/components/setters/SetBgPosition.vue

@@ -1,64 +0,0 @@
-<!--
-  背景图位置设置器：对应编辑器 style/BackgroundPositionStyle。
-  左侧九宫格给常用位置，右侧两个带单位数值给自定义 X / Y（DSL 值形如 "50% 50%"）。
--->
-<template>
-  <div class="st-bgpos">
-    <SetGrid9 kind="BackgroundPositionStyle" :value="value" :disabled="disabled" @input="pickGrid" @change="$emit('change')" />
-    <div class="st-bgpos__xy">
-      <SetNumberStyle :value="x" :options="numOptions('X')" :disabled="disabled" @input="setX" @change="emitOut" />
-      <SetNumberStyle :value="y" :options="numOptions('Y')" :disabled="disabled" @input="setY" @change="emitOut" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { setterProps, setterEmits } from './props.js'
-import SetGrid9 from './SetGrid9.vue'
-import SetNumberStyle from './SetNumberStyle.vue'
-
-const UNITS = [
-  { key: 'number', value: 'px' },
-  { key: 'percent', value: '%' },
-]
-
-export default {
-  name: 'SetBgPosition',
-  components: { SetGrid9, SetNumberStyle },
-  props: setterProps,
-  emits: setterEmits,
-  data() {
-    return { x: '', y: '' }
-  },
-  watch: {
-    value: { immediate: true, handler() { this.parse() } },
-  },
-  methods: {
-    parse() {
-      const parts = String(this.value || '').split(/\s+/)
-      this.x = parts[0] || ''
-      this.y = parts[1] || ''
-    },
-    numOptions(placeholder) {
-      return { placeholder, iTypeList: UNITS }
-    },
-    pickGrid(v) {
-      this.$emit('input', v)
-    },
-    setX(v) {
-      this.x = v
-      this.emitValue()
-    },
-    setY(v) {
-      this.y = v
-      this.emitValue()
-    },
-    emitValue() {
-      this.$emit('input', `${this.x || '0'} ${this.y || '0'}`)
-    },
-    emitOut() {
-      this.$emit('change')
-    },
-  },
-}
-</script>

package/dist/vendored/components/setters/SetBgSize.vue

@@ -1,90 +0,0 @@
-<!--
-  背景图大小设置器：对应编辑器 style/BackgroundSizeStyle。
-  下拉给 cover / contain，选「自定义」时展开宽高两个带单位数值（DSL 值形如 "auto auto"）。
--->
-<template>
-  <div class="st-bgsize">
-    <Dropdown
-      :value="preset"
-      :options="bgOptions"
-      size="sm"
-      block
-      :disabled="disabled"
-      @input="pickPreset($event)"
-    />
-    <div v-if="!preset" class="st-bgsize__xy">
-      <SetNumberStyle :value="x" :options="{ placeholder: '宽' }" :disabled="disabled" @input="setX" @change="emitOut" />
-      <SetNumberStyle :value="y" :options="{ placeholder: '高' }" :disabled="disabled" @input="setY" @change="emitOut" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { setterProps, setterEmits } from './props.js'
-import SetNumberStyle from './SetNumberStyle.vue'
-import Dropdown from '../Dropdown.vue'
-
-const TYPES = [
-  { key: 'cover', desc: 'cover：保持纵横比，缩放到完全覆盖背景定位区域的最小尺寸' },
-  { key: 'contain', desc: 'contain：保持纵横比，缩放到能放进背景定位区域的最大尺寸' },
-]
-
-export default {
-  name: 'SetBgSize',
-  components: { SetNumberStyle, Dropdown },
-  computed: {
-    bgOptions() {
-      return [{ key: '', value: '自定义' }].concat(
-        this.TYPES.map((t) => ({ key: t.key, value: t.key }))
-      )
-    },
-  },
-  props: setterProps,
-  emits: setterEmits,
-  data() {
-    return { TYPES, preset: '', x: '', y: '' }
-  },
-  watch: {
-    value: { immediate: true, handler() { this.parse() } },
-  },
-  methods: {
-    parse() {
-      const v = String(this.value || '')
-      const keys = TYPES.map((t) => t.key)
-      this.preset = keys.includes(v) ? v : ''
-      const parts = v.split(/\s+/)
-      if (parts.length >= 2) {
-        this.x = parts[0] || ''
-        this.y = parts[1] || ''
-      } else {
-        this.x = ''
-        this.y = ''
-      }
-    },
-    pickPreset(v) {
-      this.preset = v
-      if (!v) {
-        this.x = 'auto'
-        this.y = 'auto'
-      }
-      this.emitValue()
-      this.$emit('change')
-    },
-    setX(v) {
-      this.x = v
-      this.emitValue()
-    },
-    setY(v) {
-      this.y = v
-      this.emitValue()
-    },
-    emitValue() {
-      const out = this.preset ? this.preset : `${this.x || 'auto'} ${this.y || 'auto'}`
-      this.$emit('input', out)
-    },
-    emitOut() {
-      this.$emit('change')
-    },
-  },
-}
-</script>

package/dist/vendored/components/setters/SetCode.vue

@@ -1,198 +0,0 @@
-<!--
-  代码设置器：对应编辑器里 customAction 的脚本编辑框。
-  itemType === 'Code' 时使用。
-
-  值形态：itemValue 是**对象** `{ code, compiled? }`（schema 实测形态），
-  不是裸字符串。这里只改写 options.codeKey（默认 'code'）那一个键，
-  其余键（如线上 babel 产物 compiled）原样保留 —— 避免编辑器把不认识的
-  字段擦掉造成回传丢数据。
-
-  编辑器实例由 CodeJar 托管 DOM，因此**不能**用 :value 双向绑定重渲染，
-  只在挂载时灌一次初值；外部值变化（切换节点/切换动作类型）通过 key 重建组件。
--->
-<template>
-  <div class="st-code">
-    <div
-      ref="editor"
-      class="st-code__editor"
-      :class="{ 'is-disabled': disabled, 'is-bridged': !!bridge }"
-    ></div>
-    <!-- 右上角语言标签：弱化的只读标识，不参与交互 -->
-    <span class="st-code__lang" aria-hidden="true">JS</span>
-    <div class="st-code__foot">
-      <span class="st-code__hint">{{ lines }} 行 · {{ chars }} 字符</span>
-      <!-- VSCode 代码桥：生成临时 js 用外部编辑器编辑，保存实时回写；断开即删临时文件 -->
-      <span class="st-code__foot-actions">
-        <span v-if="bridge" class="st-code__bridge-tag" :title="bridge.file">VSCode 同步中</span>
-        <button
-          type="button"
-          class="st-code__vscode"
-          :class="{ 'is-on': !!bridge }"
-          :title="
-            bridge
-              ? '断开 VSCode 桥接并删除临时文件'
-              : '在 VSCode 中编辑：保存实时同步回编辑区，断开后清除临时文件'
-          "
-          :disabled="disabled"
-          @click="toggleBridge"
-        >
-          <!-- 图标左侧小字：未桥接时是动作说明；桥接后由状态徽标接替，避免两段文字挤一行 -->
-          <span v-if="!bridge" class="st-code__vscode-label">在编辑器中打开</span>
-          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
-            <path
-              fill="currentColor"
-              d="M23.15 2.587 18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"
-            />
-          </svg>
-        </button>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { CodeJar } from 'codejar'
-import Prism from 'prismjs'
-import 'prismjs/components/prism-javascript'
-import { setterProps, setterEmits } from './props.js'
-import {
-  codeBridgeOpen,
-  codeBridgeFetch,
-  codeBridgeHeartbeat,
-  codeBridgeClose,
-  subscribeCodeBridge,
-} from '../../api.js'
-
-export default {
-  name: 'SetCode',
-  props: setterProps,
-  emits: setterEmits,
-  data() {
-    return { code: '', bridge: null }
-  },
-  computed: {
-    codeKey() {
-      return this.options.codeKey || 'code'
-    },
-    lines() {
-      return this.code ? this.code.split('\n').length : 0
-    },
-    chars() {
-      return this.code.length
-    },
-  },
-  mounted() {
-    this.code = this.readCode()
-    this.$nextTick(() => this.initJar())
-  },
-  beforeUnmount() {
-    if (this._t) clearTimeout(this._t)
-    // 组件卸载（抽屉关闭 / 切节点 / key 重建）即结束桥接会话，服务端删除临时文件
-    this.teardownBridge(true)
-    if (this._jar && this._jar.destroy) this._jar.destroy()
-  },
-  methods: {
-    readCode() {
-      const v = this.value
-      if (v == null) return ''
-      if (typeof v === 'string') return v
-      if (typeof v === 'object') return String(v[this.codeKey] || '')
-      return String(v)
-    },
-    initJar() {
-      const el = this.$refs.editor
-      if (!el) return
-      const highlight = (editor) => {
-        editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.javascript, 'javascript')
-      }
-      this._jar = CodeJar(el, highlight, {
-        tab: '  ',
-        indentOn: /[({[]$/,
-        addClosing: true,
-        history: true,
-      })
-      this._jar.updateCode(this.code)
-      this._jar.onUpdate((code) => this.onCode(code))
-    },
-    onCode(code) {
-      if (this.disabled || this.bridge) return
-      this.code = code
-      // 保留 compiled 等未知键，只覆写 codeKey
-      const base = this.value && typeof this.value === 'object' ? Object.assign({}, this.value) : {}
-      base[this.codeKey] = code
-      this.$emit('input', base)
-      // 代码输入频繁，change（触发重建预览）做防抖
-      if (this._t) clearTimeout(this._t)
-      this._t = setTimeout(() => this.$emit('change'), 400)
-    },
-    /* ---------------- VSCode 代码桥 ---------------- */
-    toggleBridge() {
-      if (this.bridge) this.teardownBridge(true)
-      else this.setupBridge()
-    },
-    async setupBridge() {
-      if (this.disabled || this.bridge) return
-      const label = this.itemInfo && this.itemInfo.itemKey ? String(this.itemInfo.itemKey) : ''
-      try {
-        const info = await codeBridgeOpen(this.code, label)
-        this.bridge = { id: info.id, file: info.file }
-      } catch (e) {
-        console.error('[VSCode 桥接建立失败]', e)
-        return
-      }
-      // 桥接期间 Web 编辑区只读：外部编辑器为唯一写入源，避免双向冲突
-      this.setEditorEditable(false)
-      this._hb = setInterval(() => {
-        if (!this.bridge) return
-        codeBridgeHeartbeat(this.bridge.id).catch(() => {})
-      }, 5000)
-      this._bridgeUnsub = subscribeCodeBridge((payload) => {
-        if (!this.bridge || !payload || payload.id !== this.bridge.id) return
-        // code-bridge-closed 带 reason（ttl / client）：服务端已清理，本地同步收 UI
-        if (payload.reason) return this.teardownBridge(false)
-        this.pullBridgeCode()
-      })
-    },
-    async pullBridgeCode() {
-      if (!this.bridge) return
-      let r
-      try {
-        r = await codeBridgeFetch(this.bridge.id)
-      } catch (e) {
-        return // 会话已失效：等 closed 事件或 TTL 收尾
-      }
-      const code = String(r.code == null ? '' : r.code)
-      if (code === this.code) return
-      this.applyExternalCode(code)
-    },
-    applyExternalCode(code) {
-      this.code = code
-      // callOnUpdate=false：不触发 onUpdate，切断「回写 → input → 再写临时文件」回声环
-      if (this._jar) this._jar.updateCode(code, false)
-      const base = this.value && typeof this.value === 'object' ? Object.assign({}, this.value) : {}
-      base[this.codeKey] = code
-      this.$emit('input', base)
-      if (this._t) clearTimeout(this._t)
-      this._t = setTimeout(() => this.$emit('change'), 400)
-    },
-    teardownBridge(notifyServer) {
-      const b = this.bridge
-      this.bridge = null
-      if (this._hb) {
-        clearInterval(this._hb)
-        this._hb = null
-      }
-      if (this._bridgeUnsub) {
-        this._bridgeUnsub()
-        this._bridgeUnsub = null
-      }
-      this.setEditorEditable(true)
-      if (b && notifyServer) codeBridgeClose(b.id).catch(() => {})
-    },
-    setEditorEditable(on) {
-      const el = this.$refs.editor
-      if (el) el.setAttribute('contenteditable', on ? 'true' : 'false')
-    },
-  },
-}
-</script>

package/dist/vendored/components/setters/SetColor.vue

@@ -1,244 +0,0 @@
-<!--
-  颜色设置器：对应编辑器 common/Color。
-
-  使用第三方开源颜色选择器 @ckpack/vue-color 的 Sketch 控件（原生 <input type="color">
-  不支持 alpha，且交互简陋）。支持 rgba / hex / 空串；选择器以弹层形式挂载到 body，
-  避免被面板滚动容器裁切。色块预览使用棋盘格背景以展示透明效果。
-  重置按钮用「循环箭头」图标（语义更贴切），替代原来的 × 字符。
--->
-<template>
-  <div class="st-color">
-    <!-- 色块预览 + 文本输入 + 重置（顶行） -->
-    <div class="st-color__top" ref="top">
-      <button
-        ref="swatch"
-        class="st-color__swatch"
-        type="button"
-        :title="text || '未设置'"
-        :disabled="disabled"
-        @click="togglePop"
-      >
-        <span class="st-color__checker" />
-        <span class="st-color__fill" :style="{ background: displayColor || 'transparent' }" />
-      </button>
-
-      <input
-        class="ni-input st-color__text"
-        type="text"
-        placeholder="如 #333333 / rgba(0,0,0,.5)"
-        :disabled="disabled"
-        :value="text"
-        @input="onTextInput($event.target.value)"
-        @change="$emit('change')"
-      />
-
-      <button
-        class="st-color__clear"
-        type="button"
-        title="重置（清空颜色）"
-        :disabled="disabled"
-        @click="clear"
-      >
-        <svg viewBox="0 0 16 16" class="st-ic" aria-hidden="true"><use href="#icon-reset" /></svg>
-      </button>
-    </div>
-
-    <!-- 透明度滑块（仅当颜色值非空时显示），作为快捷调节 -->
-    <div v-if="text" class="st-color__alpha-row">
-      <span class="st-color__alpha-label">透明度</span>
-      <input
-        class="st-color__alpha-slider"
-        type="range"
-        min="0"
-        max="100"
-        :disabled="disabled"
-        :value="Math.round(alpha * 100)"
-        @input="onAlphaChange($event.target.value)"
-        @change="$emit('change')"
-      />
-      <span class="st-color__alpha-val">{{ Math.round(alpha * 100) }}%</span>
-    </div>
-
-    <!-- 第三方颜色选择器弹层（挂载到 body，避免被滚动容器裁切） -->
-    <Teleport to="body">
-      <div
-        v-if="popOpen"
-        ref="pop"
-        class="st-color__pop"
-        :style="popStyle"
-        @mousedown.stop
-      >
-        <Sketch
-          :model-value="pickerValue"
-          :disable-alpha="false"
-          @update:model-value="onPicker"
-        />
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script>
-import { setterProps, setterEmits } from './props.js'
-import { Sketch } from '@ckpack/vue-color'
-
-/** 解析任意 CSS 颜色为 { r, g, b, a }，解析失败返回 null */
-function parseColor(v) {
-  const s = String(v || '').trim()
-  if (!s) return null
-  // #RRGGBB
-  let m = s.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
-  if (m) return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16), a: 1 }
-  // #RGB
-  m = s.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
-  if (m) {
-    const p = (c) => parseInt(c + c, 16)
-    return { r: p(m[1]), g: p(m[2]), b: p(m[3]), a: 1 }
-  }
-  // #RRGGBBAA
-  m = s.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
-  if (m) return { r: parseInt(m[1], 16), g: parseInt(m[2], 16), b: parseInt(m[3], 16), a: parseInt(m[4], 16) / 255 }
-  // rgb() / rgba()
-  m = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i)
-  if (m) {
-    const a = m[4] !== undefined ? parseFloat(m[4]) : 1
-    return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])), a }
-  }
-  return null
-}
-
-/** {r,g,b,a} → #rrggbb */
-function toHex(c) {
-  if (!c) return '#000000'
-  const p = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0')
-  return '#' + p(c.r) + p(c.g) + p(c.b)
-}
-
-/** {r,g,b,a} → rgba() 字符串 */
-function toRgba(c) {
-  if (!c) return ''
-  if (c.a >= 1) return toHex(c)
-  return `rgba(${Math.round(c.r)}, ${Math.round(c.g)}, ${Math.round(c.b)}, ${+c.a.toFixed(2)})`
-}
-
-export default {
-  name: 'SetColor',
-  components: { Sketch },
-  props: setterProps,
-  emits: setterEmits,
-  data() {
-    return {
-      _rgb: null, // 缓存解析后的 {r,g,b,a}，供滑块编辑时用
-      popOpen: false,
-      popW: 240,
-      popStyle: { position: 'fixed', left: '0px', top: '0px' },
-    }
-  },
-  computed: {
-    text() {
-      return this.value === undefined || this.value === null ? '' : String(this.value)
-    },
-    parsed() {
-      return parseColor(this.text) || { r: 0, g: 0, b: 0, a: 1 }
-    },
-    /** 传给 Sketch 的初始颜色（空值时给黑色作为起点） */
-    pickerValue() {
-      return this.text || '#000000'
-    },
-    /** 当前透明度 0~1 */
-    alpha() {
-      return this.parsed.a
-    },
-    /** 用于色块预览的完整颜色值（含 alpha） */
-    displayColor() {
-      return toRgba(this.parsed)
-    },
-  },
-  watch: {
-    text() {
-      this._rgb = parseColor(this.text)
-    },
-  },
-  beforeUnmount() {
-    this.removeDocListener()
-  },
-  methods: {
-    onTextInput(v) {
-      this._rgb = parseColor(v)
-      this.$emit('input', v)
-    },
-    onAlphaChange(pct) {
-      const a = Math.max(0, Math.min(1, parseInt(pct, 10) / 100))
-      const base = this._rgb || this.parsed
-      const c = { ...base, a }
-      this._rgb = c
-      this.$emit('input', toRgba(c))
-      this.$emit('change')
-    },
-    /** 第三方选择器回调：payload 含 hex / rgba([r,g,b,a]) / a */
-    onPicker(c) {
-      const rgba = c && c.rgba
-      let r, g, b, a
-      if (Array.isArray(rgba)) {
-        ;[r, g, b, a] = rgba
-      } else if (rgba) {
-        r = rgba.r; g = rgba.g; b = rgba.b; a = rgba.a
-      } else {
-        const parsed = parseColor(c.hex) || { r: 0, g: 0, b: 0, a: 1 }
-        r = parsed.r; g = parsed.g; b = parsed.b; a = parsed.a
-      }
-      a = a == null ? 1 : a
-      const hex = c.hex || toHex({ r, g, b, a: 1 })
-      this._rgb = { r, g, b, a }
-      this.$emit('input', a >= 1 ? hex : `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${+a.toFixed(2)})`)
-      this.$emit('change')
-    },
-    clear() {
-      if (this.disabled) return
-      this._rgb = null
-      this.closePop()
-      this.$emit('input', '')
-      this.$emit('change')
-    },
-    togglePop() {
-      if (this.disabled) return
-      this.popOpen ? this.closePop() : this.openPop()
-    },
-    openPop() {
-      const el = this.$refs.swatch
-      if (!el) return
-      const rect = el.getBoundingClientRect()
-      const topRect = (this.$refs.top && this.$refs.top.getBoundingClientRect()) || rect
-      const popW = Math.max(220, Math.min(Math.round(topRect.width), 400))
-      const popH = 320
-      const vw = window.innerWidth
-      const vh = window.innerHeight
-      let left = topRect.left
-      let top = rect.bottom + 6
-      if (left + popW > vw - 8) left = Math.max(8, vw - popW - 8)
-      if (top + popH > vh - 8) top = Math.max(8, rect.top - popH - 6)
-      this.popW = popW
-      this.popStyle = { position: 'fixed', left: left + 'px', top: top + 'px', width: popW + 'px', zIndex: 4000 }
-      this.popOpen = true
-      this.$nextTick(() => {
-        document.addEventListener('mousedown', this.onDocClick, true)
-      })
-    },
-    closePop() {
-      if (!this.popOpen) return
-      this.popOpen = false
-      this.removeDocListener()
-    },
-    removeDocListener() {
-      document.removeEventListener('mousedown', this.onDocClick, true)
-    },
-    onDocClick(e) {
-      const pop = this.$refs.pop
-      const sw = this.$refs.swatch
-      if (pop && pop.contains(e.target)) return
-      if (sw && sw.contains(e.target)) return
-      this.closePop()
-    },
-  },
-}
-</script>

package/dist/vendored/components/setters/SetCustomSelect.vue

@@ -1,58 +0,0 @@
-<!--
-  常用样式设置器：对应编辑器 custom/CustomSelect。
-
-  itemOption.list 每一项是一段「DOM 描述 + sync 映射」：
-    {type:'div', style:{…}, list:[{type:'span', innerText:'黑色', style:{…}}],
-     sync:{'style.font.color':'#333333', 'style.font.fontSize':'14', …}}
-  点击后编辑器会把 sync 里的点号路径批量写回组件（style.<分组>.<字段>）。
-  这里不直接改数据，而是向上抛 `sync` 事件，由 NodeInspector 统一落到 NodeEditModel，
-  这样样式的定点写入仍然走 Style.applyChange，不会污染实例树。
--->
-<template>
-  <div class="st-customsel">
-    <div
-      v-for="(info, i) in list"
-      :key="i"
-      class="st-customsel__item"
-      :style="normalizeStyle(info.style)"
-      :title="'应用：' + Object.keys(info.sync || {}).join('、')"
-      @click="apply(info)"
-    >
-      <span v-for="(c, ci) in info.list || []" :key="ci" :style="normalizeStyle(c.style)">{{ c.innerText }}</span>
-      <span v-if="!(info.list || []).length">{{ info.innerText || '样式' + (i + 1) }}</span>
-    </div>
-    <p v-if="!list.length" class="st-list__empty">未配置常用样式</p>
-  </div>
-</template>
-
-<script>
-import { setterProps, setterEmits } from './props.js'
-
-/** 只保留视觉相关的样式，剔除会撑破面板的定位/尺寸类声明 */
-const DROP = new Set(['width', 'height', 'lineHeight', 'marginRight', 'cursor', 'textAlign'])
-
-export default {
-  name: 'SetCustomSelect',
-  props: setterProps,
-  emits: [...setterEmits, 'sync'],
-  computed: {
-    list() {
-      return this.options.list || []
-    },
-  },
-  methods: {
-    normalizeStyle(s) {
-      if (!s || typeof s !== 'object') return {}
-      const out = {}
-      for (const k in s) if (!DROP.has(k)) out[k] = s[k]
-      return out
-    },
-    apply(info) {
-      if (this.disabled) return
-      const sync = info.sync || {}
-      if (!Object.keys(sync).length) return
-      this.$emit('sync', sync)
-    },
-  },
-}
-</script>