wordpress-theme-aksrt/assets/admin/src/components/floating/FloatBtnItemPanel.vue

<template>
  <div class="float-btn-panel">
    <div class="jio-sortable__head" v-bind="headAttrs">
      <JioSortHandle @click.stop />
      <div class="jio-sortable__main">
        <div class="jio-sortable__title-row">
          <span class="jio-sortable__title">{{ meta.title }}</span>
          <template v-if="modelValue.type !== 'more'">
            <n-tag v-if="modelValue.pc_s" size="small" type="info" :bordered="false">PC</n-tag>
            <n-tag v-if="modelValue.m_s" size="small" type="warning" :bordered="false">移动</n-tag>
            <n-tag v-if="!modelValue.pc_s && !modelValue.m_s" size="small" :bordered="false">未显示</n-tag>
          </template>
          <n-tag v-else size="small" :bordered="false">{{ modelValue.buttons.length }} 个</n-tag>
        </div>
        <span v-if="meta.warn" class="jio-sortable__desc float-btn-panel__warn">
          <i class="fa fas fa-info-circle" aria-hidden="true" /> {{ meta.warn }}
        </span>
      </div>
      <i
        class="fa fas jio-sortable__toggle"
        :class="expanded ? 'fa-chevron-down' : 'fa-chevron-right'"
        aria-hidden="true"
      />
    </div>

    <div v-show="expanded" class="jio-sortable__body">
      <div class="float-btn-panel__subtitle">{{ meta.panel }}</div>

      <FloatMoreButtonsEditor
        v-if="modelValue.type === 'more'"
        :model-value="modelValue.buttons"
        @update:model-value="patch({ buttons: $event })"
      />

      <template v-else>
        <FloatBtnCommonFields :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" />

        <n-form label-placement="left" label-width="110" class="jio-form float-btn-panel__extra">
          <n-form-item v-if="modelValue.type === 'qrcode'" label="一句话简介">
            <n-input :value="modelValue.desc" @update:value="patch({ desc: $event })" />
          </n-form-item>

          <n-form-item v-if="modelValue.type === 'add'" label="按钮图标">
            <FaIconPicker v-model="addIcon" placeholder="选择图标" />
          </n-form-item>

          <n-form-item v-if="modelValue.type === 'service_qq'" label="QQ号码">
            <n-input :value="modelValue.qq" placeholder="仅填写数字" @update:value="patch({ qq: $event })" />
          </n-form-item>

          <n-form-item v-if="modelValue.type === 'service_wechat'" label="微信二维码">
            <JioMediaField
              :model-value="modelValue.wechat_img"
              placeholder="选择二维码图片"
              @update:model-value="patch({ wechat_img: $event })"
            />
          </n-form-item>
        </n-form>
      </template>
    </div>
  </div>
</template>

<script setup>
/** 悬浮按钮排序列表中的单个卡片；外层 .jio-sortable__item 由 FloatingButtonsSettings 提供。 */
import { computed, ref } from 'vue'
import FaIconPicker from '@/components/form/FaIconPicker.vue'
import JioMediaField from '@/components/form/JioMediaField.vue'
import JioSortHandle from '@/components/form/JioSortHandle.vue'
import { collapseHeadAttrs } from '@/components/form/useCollapsibleItems.js'
import FloatBtnCommonFields from './FloatBtnCommonFields.vue'
import FloatMoreButtonsEditor from './FloatMoreButtonsEditor.vue'
import { FLOAT_BTN_META } from './floating-defaults.js'

const props = defineProps({
  modelValue: { type: Object, required: true },
})
const emit = defineEmits(['update:modelValue'])

const expanded = ref(false)
const headAttrs = computed(() => collapseHeadAttrs(expanded.value, () => { expanded.value = !expanded.value }))
const meta = computed(() => FLOAT_BTN_META[props.modelValue.type] || { title: props.modelValue.type, panel: '' })

const addIcon = computed({
  get: () => props.modelValue.icon || '',
  set: (value) => patch({ icon: value || '' }),
})

function patch(partial) {
  emit('update:modelValue', { ...props.modelValue, ...partial })
}
</script>

<style scoped>
.float-btn-panel__warn {
  color: var(--jio-color-warning, #D97706);
}

.float-btn-panel__subtitle {
  margin-bottom: 12px;
  color: var(--jio-color-text);
  font-size: 13px;
  font-weight: 600;
}

.float-btn-panel__extra {
  margin-top: 12px;
}
</style>