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:
kate522 committed
1 parent
7f60071460
commit
6f2adfaef1
32 files changed
+1338
-3111
No files matched your search
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="float-more-editor">
|
||||
<n-collapse :default-expanded-names="[]" accordion>
|
||||
<n-collapse-item
|
||||
v-for="(btn, index) in modelValue"
|
||||
:key="index"
|
||||
:name="index"
|
||||
>
|
||||
<template #header>
|
||||
<span class="float-more-editor__head">
|
||||
<IconValue v-if="btn.icon" :value="btn.icon" />
|
||||
<span>{{ btn.desc || `按钮 ${index + 1}` }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-button
|
||||
size="tiny"
|
||||
quaternary
|
||||
type="error"
|
||||
:disabled="modelValue.length <= 1"
|
||||
@click.stop="remove(index)"
|
||||
>
|
||||
<template #icon><i class="fa fas fa-trash-alt" /></template>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
<n-form label-placement="left" label-width="110" class="aksrt-form">
|
||||
<n-form-item label="按钮简介">
|
||||
<n-input :value="btn.desc" @update:value="patch(index, { desc: $event })" />
|
||||
</n-form-item>
|
||||
<n-form-item label="按钮图标">
|
||||
<FaIconPicker :model-value="btn.icon" placeholder="选择图标" @update:model-value="patch(index, { icon: $event || '' })" />
|
||||
</n-form-item>
|
||||
<n-form-item v-if="!btn.hover" label="按钮链接">
|
||||
<div class="float-more-editor__link">
|
||||
<n-input
|
||||
:value="btn.link.url"
|
||||
placeholder="https://"
|
||||
@update:value="patch(index, { link: { ...btn.link, url: $event } })"
|
||||
/>
|
||||
<n-checkbox
|
||||
:checked="btn.link.target === '_blank'"
|
||||
@update:checked="patch(index, { link: { ...btn.link, target: $event ? '_blank' : '' } })"
|
||||
>
|
||||
新窗口打开
|
||||
</n-checkbox>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item label="悬浮内容">
|
||||
<div class="float-more-editor__block">
|
||||
<div class="float-more-editor__subtitle">鼠标移到此处时显示内容</div>
|
||||
<n-input
|
||||
type="textarea"
|
||||
:value="btn.hover"
|
||||
:autosize="{ minRows: 2, maxRows: 8 }"
|
||||
@update:value="patch(index, { hover: $event })"
|
||||
/>
|
||||
<div class="float-more-editor__desc">设置此处后，按钮链接将失效<br>支持HTML代码，请注意代码规范及标签闭合</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item v-if="btn.hover" label="悬浮内容宽度">
|
||||
<div class="float-more-editor__block">
|
||||
<n-input-number
|
||||
:value="btn.hover_width"
|
||||
:min="50"
|
||||
:max="500"
|
||||
:step="10"
|
||||
style="width: 180px;"
|
||||
@update:value="patch(index, { hover_width: $event ?? 200 })"
|
||||
>
|
||||
<template #suffix>PX</template>
|
||||
</n-input-number>
|
||||
<div class="float-more-editor__desc">移动端宽度最大240px</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<FloatBtnCommonFields :model-value="btn" @update:model-value="replace(index, $event)" />
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
|
||||
<div class="float-more-editor__footer">
|
||||
<n-button size="small" type="primary" @click="add">
|
||||
<template #icon><i class="fa fas fa-plus" /></template>
|
||||
添加按钮
|
||||
</n-button>
|
||||
<span class="float-more-editor__desc">此处内容至少保留一个，如一个都无需显示请关闭PC端和移动端显示即可</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FaIconPicker from '@/components/form/FaIconPicker.vue'
|
||||
import IconValue from '@/components/form/IconValue.vue'
|
||||
import FloatBtnCommonFields from './FloatBtnCommonFields.vue'
|
||||
import { defaultMoreButton } from './floating-defaults.js'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Array, required: true },
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
function replace(index, value) {
|
||||
const next = props.modelValue.slice()
|
||||
next.splice(index, 1, value)
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
|
||||
function patch(index, partial) {
|
||||
replace(index, { ...props.modelValue[index], ...partial })
|
||||
}
|
||||
|
||||
function add() {
|
||||
emit('update:modelValue', [...props.modelValue, defaultMoreButton()])
|
||||
}
|
||||
|
||||
function remove(index) {
|
||||
if (props.modelValue.length <= 1) return
|
||||
const next = props.modelValue.slice()
|
||||
next.splice(index, 1)
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.float-more-editor__head {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.float-more-editor__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.float-more-editor__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.float-more-editor__subtitle,
|
||||
.float-more-editor__desc {
|
||||
font-size: 12px;
|
||||
color: var(--n-text-color-3);
|
||||
}
|
||||
|
||||
.float-more-editor__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user