feat(float): rebuild right floating buttons 1:1 with reference theme
- Storage: aksrt_floating_buttons now uses reference float_btn shape (fixed 8 sortable types, more-buttons group); single source of defaults/sanitize in AKSRT\Settings\FloatButtons - Admin SPA: CSF-parity page split into components/floating/* - Frontend: aksrt_float_right() on wp_footer mirrors zib_float_right() (wp_is_mobile, PC tooltip, toggle-theme, ontop/scrollTopTo, qrcode, wechat/qq, pay_vip, add, more) - CSS: floating-buttons.css rewritten from reference rules; legacy float rules removed from main/part/shell/overlay-primitives - Remove dead code: reorder route/API, get_floating_buttons_items, floatingSchema, floatActionsId, float-theme-toggle bindings, common/floating.css, aksrt-runtime-win.php, .aksrt-float-btn
This commit is contained in:
1 parent
7f60071460
commit
6f2adfaef1
32 files changed
+1338
-3111
No files matched your search
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="float-btn-panel">
|
||||
<div class="float-btn-panel__head" @click="expanded = !expanded">
|
||||
<button type="button" class="float-btn-panel__handle" aria-label="拖拽排序" @click.stop>
|
||||
<i class="fa fas fa-arrows-alt-v" />
|
||||
</button>
|
||||
<strong class="float-btn-panel__title">{{ meta.title }}</strong>
|
||||
<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>
|
||||
<i class="fa fas float-btn-panel__arrow" :class="expanded ? 'fa-angle-up' : 'fa-angle-down'" />
|
||||
</div>
|
||||
|
||||
<div v-if="meta.warn" class="float-btn-panel__warn">
|
||||
<i class="fa fas fa-info-circle" /> {{ meta.warn }}
|
||||
</div>
|
||||
|
||||
<div v-show="expanded" class="float-btn-panel__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="aksrt-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>
|
||||
|
||||
<template v-if="modelValue.type === 'add'">
|
||||
<n-form-item label="选择按钮">
|
||||
<div class="float-btn-panel__block">
|
||||
<n-select
|
||||
:value="modelValue.btns"
|
||||
:options="ADD_BTN_OPTIONS"
|
||||
multiple
|
||||
placeholder="请选择按钮"
|
||||
@update:value="patch({ btns: $event })"
|
||||
/>
|
||||
<div class="float-btn-panel__desc">选择并排序按钮,未开启的功能不会显示</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item label="按钮图标">
|
||||
<FaIconPicker v-model="addIcon" placeholder="选择图标" />
|
||||
</n-form-item>
|
||||
</template>
|
||||
|
||||
<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="微信二维码">
|
||||
<AksMediaField
|
||||
:model-value="modelValue.wechat_img"
|
||||
placeholder="选择二维码图片"
|
||||
@update:model-value="patch({ wechat_img: $event })"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import FaIconPicker from '@/components/form/FaIconPicker.vue'
|
||||
import AksMediaField from '@/components/form/AksMediaField.vue'
|
||||
import FloatBtnCommonFields from './FloatBtnCommonFields.vue'
|
||||
import FloatMoreButtonsEditor from './FloatMoreButtonsEditor.vue'
|
||||
import { ADD_BTN_OPTIONS, 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 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 {
|
||||
border: 1px solid var(--n-border-color, rgba(0, 0, 0, 0.09));
|
||||
border-radius: 8px;
|
||||
background: var(--n-card-color, #fff);
|
||||
}
|
||||
|
||||
.float-btn-panel__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.float-btn-panel__handle {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--n-text-color-3, #999);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.float-btn-panel__handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.float-btn-panel__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.float-btn-panel__arrow {
|
||||
margin-left: auto;
|
||||
color: var(--n-text-color-3, #999);
|
||||
}
|
||||
|
||||
.float-btn-panel__warn {
|
||||
padding: 0 14px 10px 48px;
|
||||
font-size: 12px;
|
||||
color: #f0a020;
|
||||
}
|
||||
|
||||
.float-btn-panel__body {
|
||||
padding: 12px 16px 16px;
|
||||
border-top: 1px solid var(--n-border-color, rgba(0, 0, 0, 0.09));
|
||||
}
|
||||
|
||||
.float-btn-panel__subtitle {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.float-btn-panel__extra {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.float-btn-panel__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.float-btn-panel__desc {
|
||||
font-size: 12px;
|
||||
color: var(--n-text-color-3, #999);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user