refactor(admin): unify sortable/draggable/repeater list UI
- Add shared sortable-list.css, SORTABLE_LIST_ATTRS and AksSortHandle - Migrate schema sortable, selected order, inline/modal repeater, sorter, floating buttons, footer tabbar and ticket prereply lists to the shared design - Split AksField.vue (1885 -> 969 lines) into focused components/helpers - Remove dead AksArrayTable/AksRepeaterField and move-up/down helpers - Replace hardcoded colors and --n-* vars with --aksrt-color-* tokens Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
135fb4eaa4
commit
8843ae4261
20 files changed
+1442
-1796
No files matched your search
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="aksrt-image-select" role="radiogroup">
|
||||
<button
|
||||
v-for="opt in options"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
role="radio"
|
||||
class="aksrt-image-select__item"
|
||||
:class="{ 'is-active': modelValue === opt.value }"
|
||||
:aria-checked="modelValue === opt.value"
|
||||
:disabled="disabled"
|
||||
@click="emit('update:modelValue', opt.value)"
|
||||
>
|
||||
<img v-if="opt.image" :src="opt.image" :alt="opt.label" class="aksrt-image-select__img" />
|
||||
<span v-else class="aksrt-image-select__placeholder">
|
||||
<FaIcon :icon="opt.icon || 'fa fas fa-image'" :size="20" />
|
||||
</span>
|
||||
<span class="aksrt-image-select__label">{{ opt.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/** image_select:带预览图的单选。 */
|
||||
import FaIcon from './FaIcon.vue'
|
||||
|
||||
defineProps({
|
||||
modelValue: { default: null },
|
||||
options: { type: Array, default: () => [] },
|
||||
disabled: { type: Boolean, default: false },
|
||||
})
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aksrt-image-select {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.aksrt-image-select__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 80px;
|
||||
padding: 8px;
|
||||
border: 2px solid var(--aksrt-color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--aksrt-color-surface);
|
||||
cursor: pointer;
|
||||
transition: border-color .15s ease, background-color .15s ease;
|
||||
}
|
||||
|
||||
.aksrt-image-select__item:hover,
|
||||
.aksrt-image-select__item:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--aksrt-color-primary);
|
||||
}
|
||||
|
||||
.aksrt-image-select__item.is-active {
|
||||
border-color: var(--aksrt-color-primary);
|
||||
background: var(--aksrt-color-primary-soft);
|
||||
}
|
||||
|
||||
.aksrt-image-select__item:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.aksrt-image-select__img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.aksrt-image-select__placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
background: var(--aksrt-color-canvas);
|
||||
color: var(--aksrt-color-border-strong);
|
||||
}
|
||||
|
||||
.aksrt-image-select__label {
|
||||
color: var(--aksrt-color-text-secondary);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.aksrt-image-select__item {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user