From 8843ae4261df5b2a2c9eb969bdf714d764512105 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Wed, 28 Oct 2026 13:41:26 +0800
Subject: [PATCH] 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>
---
 .../components/floating/FloatBtnItemPanel.vue |  106 +-
 .../src/components/form/AksArrayTable.vue     |  128 --
 .../src/components/form/AksCompositeField.vue |  231 +++
 assets/admin/src/components/form/AksField.vue | 1372 +++--------------
 .../components/form/AksImageSelectField.vue   |  100 ++
 .../src/components/form/AksRepeaterField.vue  |  185 ---
 .../components/form/AksRepeaterListModal.vue  |  183 +++
 .../src/components/form/AksSelectedOrder.vue  |   53 +
 .../src/components/form/AksSortHandle.vue     |   12 +
 .../src/components/form/AksSorterField.vue    |  125 +-
 .../src/components/form/field-dependency.js   |   18 +
 .../src/components/form/repeater-rows.js      |   65 +
 .../src/components/form/sortable-options.js   |   15 +
 .../components/form/useFieldRemoteOptions.js  |  120 ++
 assets/admin/src/main.js                      |    1 +
 .../pages/content/FloatingButtonsSettings.vue |   21 +-
 .../pages/content/FooterTabbarSettings.vue    |  197 +--
 .../partials/ticket/TicketPrereplyPanel.vue   |   60 +-
 assets/admin/src/style.css                    |   10 +
 assets/admin/src/styles/sortable-list.css     |  236 +++
 20 files changed, 1442 insertions(+), 1796 deletions(-)
 delete mode 100644 assets/admin/src/components/form/AksArrayTable.vue
 create mode 100644 assets/admin/src/components/form/AksCompositeField.vue
 create mode 100644 assets/admin/src/components/form/AksImageSelectField.vue
 delete mode 100644 assets/admin/src/components/form/AksRepeaterField.vue
 create mode 100644 assets/admin/src/components/form/AksRepeaterListModal.vue
 create mode 100644 assets/admin/src/components/form/AksSelectedOrder.vue
 create mode 100644 assets/admin/src/components/form/AksSortHandle.vue
 create mode 100644 assets/admin/src/components/form/field-dependency.js
 create mode 100644 assets/admin/src/components/form/repeater-rows.js
 create mode 100644 assets/admin/src/components/form/sortable-options.js
 create mode 100644 assets/admin/src/components/form/useFieldRemoteOptions.js
 create mode 100644 assets/admin/src/styles/sortable-list.css

diff --git a/assets/admin/src/components/floating/FloatBtnItemPanel.vue b/assets/admin/src/components/floating/FloatBtnItemPanel.vue
index e845450a..463ea418 100644
--- a/assets/admin/src/components/floating/FloatBtnItemPanel.vue
+++ b/assets/admin/src/components/floating/FloatBtnItemPanel.vue
@@ -1,23 +1,29 @@
 <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>
-      <span v-if="meta.warn" class="float-btn-panel__warn">
-        <i class="fa fas fa-info-circle" /> {{ meta.warn }}
-      </span>
-      <i class="fa fas float-btn-panel__arrow" :class="expanded ? 'fa-angle-up' : 'fa-angle-down'" />
+    <div class="aksrt-sortable__head is-clickable" @click="expanded = !expanded">
+      <AksSortHandle @click.stop />
+      <div class="aksrt-sortable__main">
+        <div class="aksrt-sortable__title-row">
+          <span class="aksrt-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="aksrt-sortable__desc float-btn-panel__warn">
+          <i class="fa fas fa-info-circle" aria-hidden="true" /> {{ meta.warn }}
+        </span>
+      </div>
+      <i
+        class="fa fas aksrt-sortable__toggle"
+        :class="expanded ? 'fa-chevron-down' : 'fa-chevron-right'"
+        aria-hidden="true"
+      />
     </div>
 
-    <div v-show="expanded" class="float-btn-panel__body">
+    <div v-show="expanded" class="aksrt-sortable__body">
       <div class="float-btn-panel__subtitle">{{ meta.panel }}</div>
 
       <FloatMoreButtonsEditor
@@ -56,9 +62,11 @@
 </template>
 
 <script setup>
+/** 悬浮按钮排序列表中的单个卡片；外层 .aksrt-sortable__item 由 FloatingButtonsSettings 提供。 */
 import { computed, ref } from 'vue'
 import FaIconPicker from '@/components/form/FaIconPicker.vue'
 import AksMediaField from '@/components/form/AksMediaField.vue'
+import AksSortHandle from '@/components/form/AksSortHandle.vue'
 import FloatBtnCommonFields from './FloatBtnCommonFields.vue'
 import FloatMoreButtonsEditor from './FloatMoreButtonsEditor.vue'
 import { FLOAT_BTN_META } from './floating-defaults.js'
@@ -82,76 +90,18 @@ function patch(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 {
-  font-size: 12px;
-  color: #f0a020;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-}
-
-.float-btn-panel__body {
-  padding: 12px 16px 16px;
-  border-top: 1px solid var(--n-border-color, rgba(0, 0, 0, 0.09));
+  color: var(--aksrt-color-warning, #D97706);
 }
 
 .float-btn-panel__subtitle {
-  font-weight: 600;
-  font-size: 13px;
   margin-bottom: 12px;
+  color: var(--aksrt-color-text);
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .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>
diff --git a/assets/admin/src/components/form/AksArrayTable.vue b/assets/admin/src/components/form/AksArrayTable.vue
deleted file mode 100644
index bfd35b6a..00000000
--- a/assets/admin/src/components/form/AksArrayTable.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="aksrt-array-table">
-    <n-data-table
-      :columns="tableColumns"
-      :data="modelValue || []"
-      :bordered="false"
-      size="small"
-      max-height="400"
-    />
-
-    <n-button
-      size="small"
-      dashed
-      block
-      class="aksrt-array-table__add"
-      @click="addItem"
-    >
-      <FaIcon icon="fa fas fa-plus" :size="12" />
-      {{ addText || '添加行' }}
-    </n-button>
-  </div>
-</template>
-
-<script setup>
-/**
- * AksArrayTable — table-style editor for array data.
- * Renders rows in a data table with inline editing.
- */
-import { computed, h } from 'vue'
-import { NInput, NSwitch, NButton, NSelect, NInputNumber } from 'naive-ui'
-import FaIcon from './FaIcon.vue'
-
-const props = defineProps({
-  modelValue: { type: Array, default: () => [] },
-  /** Column definitions: [{ key, label, type?, options?, width? }] */
-  columns: { type: Array, required: true },
-  defaults: { type: Object, default: () => ({}) },
-  addText: { type: String, default: '' },
-  maxRows: { type: Number, default: Infinity },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-function updateCell(rowIndex, key, value) {
-  const list = [...(props.modelValue || [])]
-  list[rowIndex] = { ...list[rowIndex], [key]: value }
-  emit('update:modelValue', list)
-}
-
-function removeItem(index) {
-  const list = (props.modelValue || []).filter((_, i) => i !== index)
-  emit('update:modelValue', list)
-}
-
-function addItem() {
-  if ((props.modelValue || []).length >= props.maxRows) return
-  const item = {}
-  for (const col of props.columns) {
-    item[col.key] = col.default ?? (col.type === 'switch' ? false : '')
-  }
-  emit('update:modelValue', [...(props.modelValue || []), { ...item, ...props.defaults }])
-}
-
-function moveUp(index) {
-  if (index <= 0) return
-  const list = [...(props.modelValue || [])]
-  ;[list[index - 1], list[index]] = [list[index], list[index - 1]]
-  emit('update:modelValue', list)
-}
-
-function moveDown(index) {
-  const list = [...(props.modelValue || [])]
-  if (index >= list.length - 1) return
-  ;[list[index], list[index + 1]] = [list[index + 1], list[index]]
-  emit('update:modelValue', list)
-}
-
-const tableColumns = computed(() => {
-  const cols = props.columns.map(col => ({
-    title: col.label,
-    key: col.key,
-    width: col.width || 150,
-    render(row, rowIndex) {
-      const val = row[col.key]
-      const update = (v) => updateCell(rowIndex, col.key, v)
-
-      if (col.type === 'switch') {
-        return h(NSwitch, { value: val, size: 'small', 'onUpdate:value': update })
-      }
-      if (col.type === 'select') {
-        return h(NSelect, { value: val, options: col.options || [], size: 'small', 'onUpdate:value': update })
-      }
-      if (col.type === 'number') {
-        return h(NInputNumber, { value: val, size: 'small', style: 'width:100%', 'onUpdate:value': update })
-      }
-      return h(NInput, { value: val, size: 'small', 'onUpdate:value': update })
-    },
-  }))
-
-  // Add actions column
-  cols.push({
-    title: '操作',
-    key: '_actions',
-    width: 100,
-    render(row, rowIndex) {
-      return h('div', { style: 'display:flex;gap:2px' }, [
-        rowIndex > 0 ? h(NButton, { size: 'tiny', quaternary: true, onClick: () => moveUp(rowIndex) }, {
-          default: () => h(FaIcon, { icon: 'fa fas fa-arrow-up', size: 12 }),
-        }) : null,
-        rowIndex < (props.modelValue?.length || 0) - 1 ? h(NButton, { size: 'tiny', quaternary: true, onClick: () => moveDown(rowIndex) }, {
-          default: () => h(FaIcon, { icon: 'fa fas fa-arrow-down', size: 12 }),
-        }) : null,
-        h(NButton, { size: 'tiny', quaternary: true, type: 'error', onClick: () => removeItem(rowIndex) }, {
-          default: () => h(FaIcon, { icon: 'fa fas fa-trash-alt', size: 12 }),
-        }),
-      ])
-    },
-  })
-
-  return cols
-})
-</script>
-
-<style scoped>
-.aksrt-array-table__add {
-  margin-top: 10px;
-}
-</style>
diff --git a/assets/admin/src/components/form/AksCompositeField.vue b/assets/admin/src/components/form/AksCompositeField.vue
new file mode 100644
index 00000000..d67fff7d
--- /dev/null
+++ b/assets/admin/src/components/form/AksCompositeField.vue
@@ -0,0 +1,231 @@
+<template>
+  <!-- Dimensions (width x height) -->
+  <div v-if="schema.type === 'dimensions'" class="aksrt-composite aksrt-composite--dimensions">
+    <n-input-number
+      :value="current.width"
+      :min="0"
+      :placeholder="schema.widthPlaceholder || '宽度'"
+      :disabled="schema.disabled"
+      style="flex: 1"
+      @update:value="update('width', $event)"
+    />
+    <span class="aksrt-composite__sep">×</span>
+    <n-input-number
+      :value="current.height"
+      :min="0"
+      :placeholder="schema.heightPlaceholder || '高度'"
+      :disabled="schema.disabled"
+      style="flex: 1"
+      @update:value="update('height', $event)"
+    />
+    <n-select
+      v-if="schema.unit"
+      :value="current.unit"
+      :options="dimensionUnitOptions"
+      :disabled="schema.disabled"
+      style="width: 80px"
+      @update:value="update('unit', $event)"
+    />
+  </div>
+
+  <!-- Between number (min/max pair) -->
+  <div v-else-if="schema.type === 'between_number'" class="aksrt-composite aksrt-composite--between">
+    <n-input-number
+      :value="betweenValue('min')"
+      :min="schema.min"
+      :max="schema.max"
+      :step="schema.step || 1"
+      :placeholder="schema.minPlaceholder || '最小'"
+      :disabled="schema.disabled"
+      style="flex: 1"
+      @update:value="update('min', $event)"
+    />
+    <span class="aksrt-composite__sep">—</span>
+    <n-input-number
+      :value="betweenValue('max')"
+      :min="schema.min"
+      :max="schema.max"
+      :step="schema.step || 1"
+      :placeholder="schema.maxPlaceholder || '最大'"
+      :disabled="schema.disabled"
+      style="flex: 1"
+      @update:value="update('max', $event)"
+    />
+    <span v-if="schema.unit" class="aksrt-composite__unit">{{ schema.unit }}</span>
+  </div>
+
+  <!-- Spacing (top right bottom left) -->
+  <div v-else-if="schema.type === 'spacing'" class="aksrt-composite--spacing">
+    <template v-for="(side, i) in spacingSides" :key="side">
+      <div class="aksrt-composite__label">{{ schema.spacingLabels?.[i] || spacingDefaults[i] }}</div>
+      <n-input-number
+        :value="current[side]"
+        :min="0"
+        :disabled="schema.disabled"
+        @update:value="update(side, $event)"
+      />
+    </template>
+  </div>
+
+  <!-- Background (color + image + size + position + repeat) -->
+  <div v-else-if="schema.type === 'background'" class="aksrt-composite--background">
+    <div class="aksrt-composite__row">
+      <label class="aksrt-composite__label">背景颜色</label>
+      <n-color-picker
+        :value="current.color"
+        :show-alpha="true"
+        :disabled="schema.disabled"
+        @update:value="update('color', $event)"
+      />
+    </div>
+    <div class="aksrt-composite__row">
+      <label class="aksrt-composite__label">背景图片</label>
+      <AksMediaField
+        :model-value="current.image"
+        :accept="'image/*'"
+        :disabled="schema.disabled"
+        @update:model-value="update('image', $event)"
+      />
+    </div>
+    <div v-for="row in backgroundSelects" :key="row.key" class="aksrt-composite__row">
+      <label class="aksrt-composite__label">{{ row.label }}</label>
+      <n-select
+        :value="current[row.key]"
+        :options="row.options"
+        :disabled="schema.disabled"
+        @update:value="update(row.key, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+/** 对象型复合字段：dimensions / between_number / spacing / background。 */
+import { computed } from 'vue'
+import AksMediaField from './AksMediaField.vue'
+
+const props = defineProps({
+  schema: { type: Object, required: true },
+  modelValue: { default: null },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const current = computed(() => (
+  props.modelValue && typeof props.modelValue === 'object' && !Array.isArray(props.modelValue)
+    ? props.modelValue
+    : {}
+))
+
+function update(part, value) {
+  emit('update:modelValue', { ...current.value, [part]: value })
+}
+
+function betweenValue(part) {
+  return current.value[part] !== undefined ? current.value[part] : (props.schema.default?.[part] ?? 0)
+}
+
+const dimensionUnitOptions = ['px', '%', 'em', 'rem', 'vw'].map(unit => ({ label: unit, value: unit }))
+const spacingSides = ['top', 'right', 'bottom', 'left']
+const spacingDefaults = ['上', '右', '下', '左']
+
+const backgroundSelects = [
+  {
+    key: 'size',
+    label: '图片尺寸',
+    options: [
+      { label: '覆盖', value: 'cover' },
+      { label: '包含', value: 'contain' },
+      { label: '原始大小', value: 'auto' },
+    ],
+  },
+  {
+    key: 'position',
+    label: '图片位置',
+    options: [
+      { label: '居中', value: 'center center' },
+      { label: '顶部居中', value: 'top center' },
+      { label: '底部居中', value: 'bottom center' },
+      { label: '左侧居中', value: 'center left' },
+      { label: '右侧居中', value: 'center right' },
+    ],
+  },
+  {
+    key: 'repeat',
+    label: '图片重复',
+    options: [
+      { label: '不重复', value: 'no-repeat' },
+      { label: '平铺', value: 'repeat' },
+      { label: '水平平铺', value: 'repeat-x' },
+      { label: '垂直平铺', value: 'repeat-y' },
+    ],
+  },
+]
+</script>
+
+<style scoped>
+.aksrt-composite {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.aksrt-composite--between {
+  max-width: 360px;
+}
+
+.aksrt-composite__sep {
+  color: var(--aksrt-color-border-strong);
+  font-size: 14px;
+}
+
+.aksrt-composite__unit {
+  color: var(--aksrt-color-muted);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.aksrt-composite--spacing {
+  display: grid;
+  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+}
+
+.aksrt-composite--background {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.aksrt-composite__row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.aksrt-composite__label {
+  min-width: 70px;
+  color: var(--aksrt-color-muted);
+  font-size: 12px;
+}
+
+.aksrt-composite--spacing .aksrt-composite__label {
+  min-width: 0;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .aksrt-composite--dimensions {
+    flex-wrap: wrap;
+  }
+
+  .aksrt-composite--spacing {
+    grid-template-columns: auto 1fr;
+  }
+
+  .aksrt-composite__row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>
diff --git a/assets/admin/src/components/form/AksField.vue b/assets/admin/src/components/form/AksField.vue
index 29602271..6dda0267 100644
--- a/assets/admin/src/components/form/AksField.vue
+++ b/assets/admin/src/components/form/AksField.vue
@@ -85,12 +85,13 @@
         :disabled="schema.disabled"
         @update:value="emit('update:modelValue', $event)"
       />
-      <div v-if="schema.multiple && schema.sortable && Array.isArray(modelValue)" class="aksrt-field__selected-order">
-        <div v-for="(value, index) in modelValue" :key="value" class="aksrt-field__selected-order-item">
-          <span>{{ selectedOptionLabel(normalizedOptions, value) }}</span>
-          <span><n-button text size="tiny" :disabled="index === 0" @click="moveSelectedValue(index, -1)">↑</n-button><n-button text size="tiny" :disabled="index === modelValue.length - 1" @click="moveSelectedValue(index, 1)">↓</n-button></span>
-        </div>
-      </div>
+      <AksSelectedOrder
+        v-if="schema.multiple && schema.sortable && Array.isArray(modelValue)"
+        :model-value="modelValue"
+        :options="normalizedOptions"
+        :disabled="schema.disabled"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
     </div>
 
     <div v-else-if="schema.type === 'async_select'" class="aksrt-field__ordered-select">
@@ -106,12 +107,12 @@
         @search="handleAsyncSearch"
         @update:value="emit('update:modelValue', $event)"
       />
-      <div v-if="schema.multiple && schema.sortable && Array.isArray(modelValue)" class="aksrt-field__selected-order">
-        <div v-for="(value, index) in modelValue" :key="value" class="aksrt-field__selected-order-item">
-          <span>{{ selectedOptionLabel(asyncOptions, value) }}</span>
-          <span><n-button text size="tiny" :disabled="index === 0" @click="moveSelectedValue(index, -1)">↑</n-button><n-button text size="tiny" :disabled="index === modelValue.length - 1" @click="moveSelectedValue(index, 1)">↓</n-button></span>
-        </div>
-      </div>
+      <AksSelectedOrder
+        v-if="schema.multiple && schema.sortable && Array.isArray(modelValue)"
+        :model-value="modelValue"
+        :options="asyncOptions"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
     </div>
 
     <!-- Taxonomy Select (async-loaded category/tag terms) -->
@@ -321,158 +322,22 @@
       @update:value="emit('update:modelValue', $event)"
     />
 
-    <!-- Dimensions (width x height) -->
-    <div v-else-if="schema.type === 'dimensions'" class="aksrt-field__dimensions">
-      <n-input-number
-        :value="modelValue?.width"
-        :min="0"
-        :placeholder="schema.widthPlaceholder || '宽度'"
-        :disabled="schema.disabled"
-        style="flex: 1"
-        @update:value="updateDimension('width', $event)"
-      />
-      <span class="aksrt-field__dimensions-sep">×</span>
-      <n-input-number
-        :value="modelValue?.height"
-        :min="0"
-        :placeholder="schema.heightPlaceholder || '高度'"
-        :disabled="schema.disabled"
-        style="flex: 1"
-        @update:value="updateDimension('height', $event)"
-      />
-      <n-select
-        v-if="schema.unit"
-        :value="modelValue?.unit"
-        :options="dimensionUnitOptions"
-        :disabled="schema.disabled"
-        style="width: 80px"
-        @update:value="updateDimension('unit', $event)"
-      />
-    </div>
-
-    <!-- Between number (min/max pair, Zibll between_number) -->
-    <div v-else-if="schema.type === 'between_number'" class="aksrt-field__between">
-      <n-input-number
-        :value="betweenValue('min')"
-        :min="schema.min"
-        :max="schema.max"
-        :step="schema.step || 1"
-        :placeholder="schema.minPlaceholder || '最小'"
-        :disabled="schema.disabled"
-        style="flex: 1"
-        @update:value="updateBetween('min', $event)"
-      />
-      <span class="aksrt-field__between-sep">—</span>
-      <n-input-number
-        :value="betweenValue('max')"
-        :min="schema.min"
-        :max="schema.max"
-        :step="schema.step || 1"
-        :placeholder="schema.maxPlaceholder || '最大'"
-        :disabled="schema.disabled"
-        style="flex: 1"
-        @update:value="updateBetween('max', $event)"
-      />
-      <span v-if="schema.unit" class="aksrt-field__between-unit">{{ schema.unit }}</span>
-    </div>
-
-    <!-- Spacing (top right bottom left) -->
-    <div v-else-if="schema.type === 'spacing'" class="aksrt-field__spacing">
-      <div class="aksrt-field__spacing-label">{{ schema.spacingLabels?.[0] || '上' }}</div>
-      <n-input-number
-        :value="modelValue?.top"
-        :min="0"
-        :disabled="schema.disabled"
-        @update:value="updateSpacing('top', $event)"
-      />
-      <div class="aksrt-field__spacing-label">{{ schema.spacingLabels?.[1] || '右' }}</div>
-      <n-input-number
-        :value="modelValue?.right"
-        :min="0"
-        :disabled="schema.disabled"
-        @update:value="updateSpacing('right', $event)"
-      />
-      <div class="aksrt-field__spacing-label">{{ schema.spacingLabels?.[2] || '下' }}</div>
-      <n-input-number
-        :value="modelValue?.bottom"
-        :min="0"
-        :disabled="schema.disabled"
-        @update:value="updateSpacing('bottom', $event)"
-      />
-      <div class="aksrt-field__spacing-label">{{ schema.spacingLabels?.[3] || '左' }}</div>
-      <n-input-number
-        :value="modelValue?.left"
-        :min="0"
-        :disabled="schema.disabled"
-        @update:value="updateSpacing('left', $event)"
-      />
-    </div>
-
-    <!-- Background (color + image + position + repeat) -->
-    <div v-else-if="schema.type === 'background'" class="aksrt-field__background">
-      <div class="aksrt-field__background-row">
-        <label class="aksrt-field__sublabel">背景颜色</label>
-        <n-color-picker
-          :value="modelValue?.color"
-          :show-alpha="true"
-          :disabled="schema.disabled"
-          @update:value="updateBackground('color', $event)"
-        />
-      </div>
-      <div class="aksrt-field__background-row">
-        <label class="aksrt-field__sublabel">背景图片</label>
-        <AksMediaField
-          :model-value="modelValue?.image"
-          :accept="'image/*'"
-          :disabled="schema.disabled"
-          @update:model-value="updateBackground('image', $event)"
-        />
-      </div>
-      <div class="aksrt-field__background-row">
-        <label class="aksrt-field__sublabel">图片尺寸</label>
-        <n-select
-          :value="modelValue?.size"
-          :options="bgSizeOptions"
-          :disabled="schema.disabled"
-          @update:value="updateBackground('size', $event)"
-        />
-      </div>
-      <div class="aksrt-field__background-row">
-        <label class="aksrt-field__sublabel">图片位置</label>
-        <n-select
-          :value="modelValue?.position"
-          :options="bgPositionOptions"
-          :disabled="schema.disabled"
-          @update:value="updateBackground('position', $event)"
-        />
-      </div>
-      <div class="aksrt-field__background-row">
-        <label class="aksrt-field__sublabel">图片重复</label>
-        <n-select
-          :value="modelValue?.repeat"
-          :options="bgRepeatOptions"
-          :disabled="schema.disabled"
-          @update:value="updateBackground('repeat', $event)"
-        />
-      </div>
-    </div>
+    <!-- Object composites: dimensions / between_number / spacing / background -->
+    <AksCompositeField
+      v-else-if="['dimensions', 'between_number', 'spacing', 'background'].includes(schema.type)"
+      :schema="schema"
+      :model-value="modelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
 
     <!-- Image select (radio with image preview) -->
-    <div v-else-if="schema.type === 'image_select'" class="aksrt-field__image-select">
-      <div
-        v-for="opt in normalizedOptions"
-        :key="opt.value"
-        class="aksrt-field__image-select-item"
-        :class="{ 'aksrt-field__image-select-item--active': modelValue === opt.value }"
-        @click="!schema.disabled && emit('update:modelValue', opt.value)"
-      >
-        <img v-if="opt.image" :src="opt.image" :alt="opt.label" class="aksrt-field__image-select-img" />
-        <div v-else class="aksrt-field__image-select-placeholder">
-          <FaIcon :icon="opt.icon || 'fa fas fa-image'" :size="20" />
-        </div>
-        <span class="aksrt-field__image-select-label">{{ opt.label }}</span>
-      </div>
-    </div>
+    <AksImageSelectField
+      v-else-if="schema.type === 'image_select'"
+      :model-value="modelValue"
+      :options="normalizedOptions"
+      :disabled="schema.disabled"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
 
     <!-- Fieldset (single nested object) -->
     <div v-else-if="schema.type === 'fieldset' || schema.type === 'accordion'" class="aksrt-field__fieldset">
@@ -521,63 +386,73 @@
       <n-input :value="modelValue?.text || ''" placeholder="链接文字（可选）" @update:value="updateLink('text', $event)" />
     </div>
 
-    <div v-else-if="schema.type === 'sortable'" class="aksrt-field__sortable">
-      <div v-for="(item, index) in sortableItems" :key="item.key" class="aksrt-field__sortable-item">
-        <div class="aksrt-field__sortable-head">
-          <strong>{{ item.label }}</strong>
-          <span>
-            <n-button text size="tiny" :disabled="index === 0" @click="moveSortable(index, -1)">↑</n-button>
-            <n-button text size="tiny" :disabled="index === sortableItems.length - 1" @click="moveSortable(index, 1)">↓</n-button>
-          </span>
+    <draggable
+      v-else-if="schema.type === 'sortable'"
+      v-model="sortableList"
+      v-bind="SORTABLE_LIST_ATTRS"
+      item-key="key"
+      :disabled="schema.disabled"
+      class="aksrt-sortable"
+    >
+      <template #item="{ element: item, index }">
+        <div class="aksrt-sortable__item">
+          <div class="aksrt-sortable__head">
+            <AksSortHandle />
+            <span class="aksrt-sortable__index">{{ index + 1 }}</span>
+            <span class="aksrt-sortable__title">{{ item.label }}</span>
+          </div>
+          <div v-if="item.fields && item.fields.length" class="aksrt-sortable__body aksrt-field__sortable-body">
+            <AksField v-for="field in item.fields" :key="field.key" :schema="field" :model-value="modelValue?.[item.key]?.[field.key] ?? field.default" :form-data="formData" @update:model-value="updateSortable(item.key, field.key, $event)" />
+          </div>
         </div>
-        <div v-if="item.fields && item.fields.length" class="aksrt-field__sortable-body">
-          <AksField v-for="field in item.fields" :key="field.key" :schema="field" :model-value="modelValue?.[item.key]?.[field.key] ?? field.default" :form-data="formData" @update:model-value="updateSortable(item.key, field.key, $event)" />
-        </div>
-      </div>
-    </div>
+      </template>
+    </draggable>
 
     <!-- Repeater (array of objects) — inline expand (default, draggable) -->
     <div v-else-if="(schema.type === 'repeater' || schema.type === 'group') && schema.ui !== 'list-modal'" class="aksrt-field__repeater">
       <draggable
+        v-if="repeaterDragList.length"
         v-model="repeaterDragList"
+        v-bind="SORTABLE_LIST_ATTRS"
         :item-key="repeaterDragKey"
-        handle=".aksrt-field__repeater-handle"
-        ghost-class="aksrt-field__repeater-ghost"
-        animation="180"
+        :disabled="schema.disabled"
+        class="aksrt-sortable"
       >
         <template #item="{ element, index }">
-          <div class="aksrt-field__repeater-item" :class="{ 'is-collapsible': repeaterCollapsible, 'is-collapsed': repeaterCollapsible && !isRepeaterItemOpen(index) }">
+          <div class="aksrt-sortable__item">
             <div
-              class="aksrt-field__repeater-header"
+              class="aksrt-sortable__head"
               :class="{ 'is-clickable': repeaterCollapsible }"
               @click="repeaterCollapsible ? toggleRepeaterItem(index) : undefined"
             >
-              <div class="aksrt-field__repeater-title">
-                <i class="fa fas fa-grip-vertical aksrt-field__repeater-handle" aria-hidden="true" @click.stop></i>
-                <span class="aksrt-field__repeater-index">#{{ index + 1 }}</span>
-                <span v-if="repeaterCollapsible && repeaterItemSummary(element)" class="aksrt-field__repeater-summary">
+              <AksSortHandle @click.stop />
+              <span class="aksrt-sortable__index">{{ index + 1 }}</span>
+              <span class="aksrt-sortable__main">
+                <span v-if="repeaterCollapsible && repeaterItemSummary(element)" class="aksrt-sortable__title aksrt-field__repeater-summary">
                   {{ repeaterItemSummary(element) }}
                 </span>
-              </div>
-              <div class="aksrt-field__repeater-header-actions" @click.stop>
+              </span>
+              <div class="aksrt-sortable__actions" @click.stop>
+                <n-button
+                  size="tiny"
+                  type="error"
+                  quaternary
+                  title="删除"
+                  :disabled="schema.disabled || reachedRepeaterMinimum"
+                  @click="removeRepeaterItem(index)"
+                >
+                  <template #icon><FaIcon icon="fa fas fa-trash-alt" :size="12" /></template>
+                </n-button>
                 <FaIcon
                   v-if="repeaterCollapsible"
                   :icon="isRepeaterItemOpen(index) ? 'fa fas fa-chevron-down' : 'fa fas fa-chevron-right'"
                   :size="12"
-                  class="aksrt-field__repeater-toggle"
+                  class="aksrt-sortable__toggle"
+                  @click="toggleRepeaterItem(index)"
                 />
-                <n-button
-                  size="tiny"
-                  type="error"
-                  text
-                  :disabled="schema.disabled || reachedRepeaterMinimum"
-                  @click="removeRepeaterItem(index)"
-                >
-                  <FaIcon icon="fa fas fa-trash-alt" :size="12" />
-                </n-button>
               </div>
             </div>
-            <div v-show="!repeaterCollapsible || isRepeaterItemOpen(index)" class="aksrt-field__repeater-fields">
+            <div v-show="!repeaterCollapsible || isRepeaterItemOpen(index)" class="aksrt-sortable__body aksrt-field__repeater-fields">
               <template v-for="field in (schema.fields || [])" :key="field.key">
                 <AksField
                   v-if="matchDependency(field.dependsOn, element)"
@@ -592,87 +467,7 @@
           </div>
         </template>
       </draggable>
-      <n-button
-        size="small"
-        dashed
-        :disabled="schema.disabled || reachedRepeaterMaximum"
-        @click="addRepeaterItem"
-      >
-        <FaIcon icon="fa fas fa-plus" :size="12" style="margin-right: 6px" />
-        {{ schema.button_title || schema.addText || '添加一项' }}
-      </n-button>
-    </div>
-
-    <!-- Repeater list-modal: compact list + modal editor -->
-    <div v-else-if="(schema.type === 'repeater' || schema.type === 'group') && schema.ui === 'list-modal'" class="aksrt-field__repeater aksrt-field__repeater--list-modal">
-      <div v-if="repeaterItems.length" class="aksrt-field__repeater-list">
-        <div
-          v-for="(item, index) in repeaterItems"
-          :key="item._id || index"
-          class="aksrt-field__repeater-list-item"
-        >
-          <div class="aksrt-field__repeater-list-actions">
-            <n-button
-              v-if="index > 0"
-              size="tiny"
-              quaternary
-              :disabled="schema.disabled"
-              @click="moveRepeaterItem(index, -1)"
-            >
-              <FaIcon icon="fa fas fa-arrow-up" :size="12" />
-            </n-button>
-            <n-button
-              v-if="index < repeaterItems.length - 1"
-              size="tiny"
-              quaternary
-              :disabled="schema.disabled"
-              @click="moveRepeaterItem(index, 1)"
-            >
-              <FaIcon icon="fa fas fa-arrow-down" :size="12" />
-            </n-button>
-            <n-button
-              size="tiny"
-              quaternary
-              type="primary"
-              :disabled="schema.disabled"
-              @click="openRepeaterModal(index)"
-            >
-              <FaIcon icon="fa fas fa-edit" :size="12" />
-              编辑
-            </n-button>
-            <n-button
-              size="tiny"
-              quaternary
-              type="error"
-              :disabled="schema.disabled || reachedRepeaterMinimum"
-              @click="removeRepeaterItem(index)"
-            >
-              <FaIcon icon="fa fas fa-trash-alt" :size="12" />
-              删除
-            </n-button>
-          </div>
-          <div class="aksrt-field__repeater-list-preview">
-            <div class="aksrt-field__repeater-list-icon" :class="getRepeaterPreviewIconClass(item)">
-              <span
-                v-if="getRepeaterPreviewCustomIcon(item)"
-                class="aksrt-field__repeater-list-icon-html"
-                v-html="getRepeaterPreviewCustomIcon(item)"
-              />
-              <i v-else-if="getRepeaterPreviewIcon(item)" :class="getRepeaterPreviewIcon(item)" aria-hidden="true" />
-              <FaIcon v-else icon="fa fas fa-star" :size="16" />
-            </div>
-            <div class="aksrt-field__repeater-list-meta">
-              <div class="aksrt-field__repeater-list-title">
-                {{ getRepeaterPreviewTitle(item) }}
-              </div>
-              <div class="aksrt-field__repeater-list-desc">
-                {{ getRepeaterPreviewDesc(item) }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-else class="aksrt-field__repeater-empty">
+      <div v-else class="aksrt-sortable__empty">
         <FaIcon icon="fa fas fa-inbox" :size="18" />
         <span>{{ schema.emptyText || '暂无数据' }}</span>
       </div>
@@ -681,37 +476,22 @@
         dashed
         block
         :disabled="schema.disabled || reachedRepeaterMaximum"
-        @click="openRepeaterModal(-1)"
+        @click="addRepeaterItem"
       >
-        <FaIcon icon="fa fas fa-plus" :size="12" style="margin-right: 6px" />
+        <template #icon><FaIcon icon="fa fas fa-plus" :size="12" /></template>
         {{ schema.button_title || schema.addText || '添加一项' }}
       </n-button>
-
-      <n-modal
-        v-model:show="repeaterModalShow"
-        :mask-closable="false"
-        preset="card"
-        :title="repeaterEditingIndex >= 0 ? (schema.editText || '编辑项目') : (schema.addText || '添加项目')"
-        class="aksrt-modal-card"
-        style="max-width: 640px; width: 92vw;"
-      >
-        <div class="aksrt-field__repeater-modal-fields">
-          <AksField
-            v-for="field in (schema.fields || []).filter(field => matchDependency(field.dependsOn, repeaterDraft))"
-            :key="field.key"
-            :schema="field"
-            :model-value="repeaterDraft[field.key]"
-            :form-data="formData"
-            @update:model-value="updateRepeaterDraft(field.key, $event)"
-          />
-        </div>
-        <div class="aksrt-modal-footer">
-          <n-button @click="closeRepeaterModal">取消</n-button>
-          <n-button type="primary" @click="confirmRepeaterModal">确定</n-button>
-        </div>
-      </n-modal>
     </div>
 
+    <!-- Repeater list-modal: draggable card list + modal editor -->
+    <AksRepeaterListModal
+      v-else-if="(schema.type === 'repeater' || schema.type === 'group') && schema.ui === 'list-modal'"
+      :schema="schema"
+      :model-value="modelValue"
+      :form-data="formData"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+
     <!-- Custom slot -->
     <slot v-else-if="schema.type === 'custom'" />
 
@@ -733,25 +513,33 @@
  * AksField — renders a single form field based on its schema definition.
  *
  * Supported types: switch, input/text, textarea, number, select, radio,
- * checkbox, color, icon, media, gallery, slider, code, alert, fieldset, repeater (inline|list-modal), custom (slot).
+ * checkbox, color, icon, media, gallery, slider, code, alert, fieldset, sortable,
+ * repeater (inline|list-modal), custom (slot).
+ *
+ * 所有可拖拽列表（sortable / 已选值排序 / repeater）共用 sortable-list.css +
+ * SORTABLE_LIST_ATTRS + AksSortHandle。
  */
-import { computed, ref, onMounted, watch } from 'vue'
+import { computed, ref } from 'vue'
+import draggable from 'vuedraggable'
 import FaIcon from './FaIcon.vue'
 import FaIconPicker from './FaIconPicker.vue'
 import AksMediaField from './AksMediaField.vue'
 import AksGalleryField from './AksGalleryField.vue'
 import AksCodeEditor from './AksCodeEditor.vue'
+import AksCompositeField from './AksCompositeField.vue'
+import AksImageSelectField from './AksImageSelectField.vue'
+import AksSortHandle from './AksSortHandle.vue'
+import AksSelectedOrder from './AksSelectedOrder.vue'
+import AksRepeaterListModal from './AksRepeaterListModal.vue'
 import { buildFieldsetSections } from './fieldset-sections.js'
-import draggable from 'vuedraggable'
-import api from '@/api'
+import { matchDependency } from './field-dependency.js'
+import { SORTABLE_LIST_ATTRS } from './sortable-options.js'
+import { createRepeaterRow, repeaterRowSummary } from './repeater-rows.js'
+import { useFieldRemoteOptions } from './useFieldRemoteOptions.js'
 
 const props = defineProps({
-  /** Field schema definition */
-  schema: {
-    type: Object,
-    required: true,
-    // Expected shape: { key, label, type, default, options?, help?, ... }
-  },
+  /** Field schema definition: { key, label, type, default, options?, help?, ... } */
+  schema: { type: Object, required: true },
   /** Current field value */
   modelValue: { default: null },
   /** Whole-form data — used to resolve dynamic options (schema.options as string = formData key). */
@@ -762,6 +550,26 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'action'])
 
+const {
+  asyncOptions,
+  asyncLoading,
+  handleAsyncSearch,
+  taxonomyOptions,
+  taxonomyLoading,
+  userOptions,
+  userLoading,
+  handleUserSearch,
+  pageOptions,
+  pageLoading,
+  handlePageSearch,
+} = useFieldRemoteOptions(props)
+
+const fieldClasses = computed(() => ({
+  'aksrt-field--disabled': props.schema.disabled,
+  'aksrt-field--inline': props.schema.inline,
+  [`aksrt-field--${props.schema.type}`]: !!props.schema.type,
+}))
+
 const secretMarkedForClear = computed(() => props.schema.secret && props.modelValue === '__AKSRT_CLEAR_SECRET__')
 const secretDisplayValue = computed(() => secretMarkedForClear.value ? '' : props.modelValue)
 
@@ -769,98 +577,54 @@ function toggleSecretClear() {
   emit('update:modelValue', secretMarkedForClear.value ? '***' : '__AKSRT_CLEAR_SECRET__')
 }
 
-const repeaterLength = computed(() => Array.isArray(props.modelValue) ? props.modelValue.length : 0)
-/** 数组安全视图：非数组（如旧版字符串值）一律按空列表渲染，避免逐字符假条目。 */
-const repeaterItems = computed(() => Array.isArray(props.modelValue) ? props.modelValue : [])
-const reachedRepeaterMinimum = computed(() => repeaterLength.value <= Number(props.schema.min || 0))
-const reachedRepeaterMaximum = computed(() => Number(props.schema.max || 0) > 0 && repeaterLength.value >= Number(props.schema.max))
-
-/* ------------------------------------------------------------------ *
- * 手风琴模式：schema.collapsible 开启后，每一项默认收起，仅显示标题行，
- * 点击标题行展开/收起。defaultCollapsed 为 false 时改为默认全部展开。
- * ------------------------------------------------------------------ */
-const repeaterCollapsible = computed(() => !!props.schema.collapsible)
-const repeaterDefaultOpen = computed(() => props.schema.defaultCollapsed === false)
-// 只记录「与默认状态相反」的下标，新增/删除项时其余项的开合状态不受影响。
-const toggledRepeaterItems = ref(new Set())
-
-function isRepeaterItemOpen(index) {
-  if (!repeaterCollapsible.value) return true
-  return repeaterDefaultOpen.value !== toggledRepeaterItems.value.has(index)
-}
-
-function toggleRepeaterItem(index) {
-  const next = new Set(toggledRepeaterItems.value)
-  if (next.has(index)) {
-    next.delete(index)
-  } else {
-    next.add(index)
+/** Normalize options: support string[], {label, value}[], and dynamic formData-key references */
+const normalizedOptions = computed(() => {
+  const opts = props.schema.options
+  if (typeof opts === 'string') {
+    // 动态选项：引用 formData 中同名字段（如 custom_filter 维度定义 [{key,name,vals}]）。
+    const source = props.formData?.[opts]
+    if (!Array.isArray(source)) return []
+    return source
+      .map(item => {
+        const value = String(item?.key ?? '')
+        if (value === '') return null
+        return { label: String(item?.name ?? item?.key ?? value), value }
+      })
+      .filter(Boolean)
   }
-  toggledRepeaterItems.value = next
-}
-
-/** 收起态标题行上的一行摘要，取自 listPreview 配置。 */
-function repeaterItemSummary(item) {
-  if (!repeaterCollapsible.value || !item) return ''
-  const cfg = getRepeaterPreviewConfig()
-  const titleKey = cfg.titleKey || 'title'
-  const title = String(item[titleKey] ?? '').trim()
-  const prefix = String(cfg.prefix || '')
-  if (title === '') return prefix
-  const desc = repeaterItemDuration(item)
-  return desc ? `${prefix}${title} · ${desc}` : `${prefix}${title}`
-}
-
-/** time/unit 形态的时长摘要：0 视为永久，其余按 day/month 补单位。 */
-function repeaterItemDuration(item) {
-  const cfg = getRepeaterPreviewConfig()
-  const descKey = cfg.descKey
-  if (!descKey) return ''
-  const raw = item[descKey]
-  if (raw === '' || raw == null) return ''
-  const amount = Number(raw)
-  if (!Number.isFinite(amount)) return String(raw)
-  if (amount <= 0) return '永久'
-  const unitKey = cfg.descUnitKey
-  if (!unitKey) return String(raw)
-  const unit = String(item[unitKey] || '')
-  if (unit === 'month') return `${amount} 个月`
-  if (unit === 'day') return `${amount} 天`
-  return String(raw)
-}
-
-/** 拖拽视图：vuedraggable 以 modelValue 模式工作（内部复制后回传 update:modelValue）。 */
-const repeaterDragList = computed({
-  get: () => (Array.isArray(props.modelValue) ? props.modelValue : []),
-  set: (value) => emit('update:modelValue', Array.isArray(value) ? value : []),
+  return (Array.isArray(opts) ? opts : []).map(opt => {
+    if (typeof opt === 'string') return { label: opt, value: opt }
+    if (typeof opt === 'object' && opt !== null) {
+      return { ...opt, label: opt.label ?? opt.name ?? opt.value, value: opt.value ?? opt.label ?? opt.name }
+    }
+    return { label: String(opt), value: opt }
+  })
 })
 
-/**
- * 行 key：优先用行自身 _id；服务端历史数据没有 _id 时按对象引用派生稳定 key，
- * 避免每次输入都重算 key 导致子字段重挂载、输入焦点丢失。
- */
-const dragRowKeys = new WeakMap()
-let dragRowKeySeed = 0
-function repeaterDragKey(item) {
-  if (item && typeof item === 'object') {
-    if (item._id) return item._id
-    let key = dragRowKeys.get(item)
-    if (!key) {
-      key = `rpt_drag_${++dragRowKeySeed}`
-      dragRowKeys.set(item, key)
-    }
-    return key
-  }
-  return String(item)
-}
-
-function fieldsetValue(field) {
-  const current = props.modelValue && typeof props.modelValue === 'object' && !Array.isArray(props.modelValue)
+/** 对象型值（link / fieldset）的当前快照。 */
+function objectValue() {
+  return props.modelValue && typeof props.modelValue === 'object' && !Array.isArray(props.modelValue)
     ? props.modelValue
     : {}
+}
+
+function updateObjectPart(part, value) {
+  emit('update:modelValue', { ...objectValue(), [part]: value })
+}
+
+const updateLink = updateObjectPart
+const updateFieldsetValue = updateObjectPart
+
+const linkTargetOptions = [{ label: '当前窗口', value: '' }, { label: '当前窗口', value: '_self' }, { label: '新窗口', value: '_blank' }]
+
+// ============ Fieldset / Accordion ============
+function fieldsetValue(field) {
+  const current = objectValue()
   return Object.prototype.hasOwnProperty.call(current, field.key) ? current[field.key] : field.default
 }
 
+const visibleNestedFields = computed(() => (props.schema.fields || []).filter(field => matchDependency(field.dependsOn, props.modelValue)))
+
 /* ------------------------------------------------------------------ *
  * accordion/fieldset 的分块手风琴：schema.sections 声明每块的标题与字段
  * key，默认全部收起，点击块标题展开。未声明 sections 时保持平铺渲染。
@@ -890,77 +654,18 @@ function toggleFieldsetSection(index) {
   openFieldsetSections.value = next
 }
 
-function updateFieldsetValue(key, value) {
-  const current = props.modelValue && typeof props.modelValue === 'object' && !Array.isArray(props.modelValue)
-    ? props.modelValue
-    : {}
-  emit('update:modelValue', { ...current, [key]: value })
-}
-
-/** Normalize options: support string[], {label, value}[], and dynamic formData-key references */
-const normalizedOptions = computed(() => {
-  const opts = props.schema.options
-  if (typeof opts === 'string') {
-    // 动态选项：引用 formData 中同名字段（如 custom_filter 维度定义 [{key,name,vals}]）。
-    const source = props.formData?.[opts]
-    if (!Array.isArray(source)) return []
-    return source
-      .map(item => {
-        const value = String(item?.key ?? '')
-        if (value === '') return null
-        return { label: String(item?.name ?? item?.key ?? value), value }
-      })
-      .filter(Boolean)
-  }
-  return (Array.isArray(opts) ? opts : []).map(opt => {
-    if (typeof opt === 'string') return { label: opt, value: opt }
-    if (typeof opt === 'object' && opt !== null) {
-      return { ...opt, label: opt.label ?? opt.name ?? opt.value, value: opt.value ?? opt.label ?? opt.name }
-    }
-    return { label: String(opt), value: opt }
-  })
-})
-
-const visibleNestedFields = computed(() => (props.schema.fields || []).filter(field => matchDependency(field.dependsOn, props.modelValue)))
-const linkTargetOptions = [{ label: '当前窗口', value: '' }, { label: '当前窗口', value: '_self' }, { label: '新窗口', value: '_blank' }]
-
-function matchDependency(rule, sourceValue) {
-  if (!rule) return true
-  const source = sourceValue && typeof sourceValue === 'object' ? sourceValue : {}
-  if (rule.all) return rule.all.every(item => matchDependency(item, source))
-  if (rule.any) return rule.any.some(item => matchDependency(item, source))
-  const value = source[rule.key]
-  if (rule.operator === 'truthy') return !!value
-  if (rule.operator === 'falsy') return !value
-  if (rule.operator === 'not_empty') return Array.isArray(value) ? value.length > 0 : value !== '' && value != null
-  if (rule.operator === 'empty') return Array.isArray(value) ? value.length === 0 : value === '' || value == null
-  if (rule.operator === 'eq') return value === rule.value
-  if (rule.operator === 'neq') return value !== rule.value
-  return rule.value === undefined || value === rule.value
-}
-
-function updateLink(key, value) {
-  emit('update:modelValue', { ...(props.modelValue || {}), [key]: value })
-}
-
-function selectedOptionLabel(options, value) {
-  return options.find(option => option.value === value)?.label || String(value)
-}
-
-function moveSelectedValue(index, delta) {
-  if (!Array.isArray(props.modelValue)) return
-  const target = index + delta
-  if (target < 0 || target >= props.modelValue.length) return
-  const values = [...props.modelValue]
-  ;[values[index], values[target]] = [values[target], values[index]]
-  emit('update:modelValue', values)
-}
-
-const sortableItems = computed(() => {
-  const definitions = new Map((props.schema.items || []).map(item => [item.key, item]))
-  const order = Object.keys(props.modelValue || {}).filter(key => definitions.has(key))
-  for (const key of definitions.keys()) if (!order.includes(key)) order.push(key)
-  return order.map(key => definitions.get(key))
+// ============ Sortable（对象键顺序即排序结果） ============
+const sortableList = computed({
+  get: () => {
+    const definitions = new Map((props.schema.items || []).map(item => [item.key, item]))
+    const order = Object.keys(props.modelValue || {}).filter(key => definitions.has(key))
+    for (const key of definitions.keys()) if (!order.includes(key)) order.push(key)
+    return order.map(key => definitions.get(key))
+  },
+  set: (items) => {
+    const current = props.modelValue || {}
+    emit('update:modelValue', Object.fromEntries(items.map(item => [item.key, current[item.key] || {}])))
+  },
 })
 
 function updateSortable(itemKey, fieldKey, value) {
@@ -968,238 +673,70 @@ function updateSortable(itemKey, fieldKey, value) {
   emit('update:modelValue', { ...current, [itemKey]: { ...(current[itemKey] || {}), [fieldKey]: value } })
 }
 
-function moveSortable(index, delta) {
-  const items = [...sortableItems.value]
-  const target = index + delta
-  if (target < 0 || target >= items.length) return
-  ;[items[index], items[target]] = [items[target], items[index]]
-  const current = props.modelValue || {}
-  emit('update:modelValue', Object.fromEntries(items.map(item => [item.key, current[item.key] || {}])))
+// ============ Repeater（inline 展开；list-modal 见 AksRepeaterListModal） ============
+const repeaterLength = computed(() => Array.isArray(props.modelValue) ? props.modelValue.length : 0)
+const reachedRepeaterMinimum = computed(() => repeaterLength.value <= Number(props.schema.min || 0))
+const reachedRepeaterMaximum = computed(() => Number(props.schema.max || 0) > 0 && repeaterLength.value >= Number(props.schema.max))
+
+/* ------------------------------------------------------------------ *
+ * 手风琴模式：schema.collapsible 开启后，每一项默认收起，仅显示标题行，
+ * 点击标题行展开/收起。defaultCollapsed 为 false 时改为默认全部展开。
+ * ------------------------------------------------------------------ */
+const repeaterCollapsible = computed(() => !!props.schema.collapsible)
+const repeaterDefaultOpen = computed(() => props.schema.defaultCollapsed === false)
+// 只记录「与默认状态相反」的下标，新增/删除项时其余项的开合状态不受影响。
+const toggledRepeaterItems = ref(new Set())
+
+function isRepeaterItemOpen(index) {
+  if (!repeaterCollapsible.value) return true
+  return repeaterDefaultOpen.value !== toggledRepeaterItems.value.has(index)
 }
 
-const asyncOptions = ref([])
-const asyncLoading = ref(false)
-let asyncTimer = null
-
-async function loadAsyncOptions(query = '') {
-  asyncLoading.value = true
-  try {
-    const selected = Array.isArray(props.modelValue) ? props.modelValue : (props.modelValue ? [props.modelValue] : [])
-    const response = await api.searchPageDisplayOptions(props.schema.source, query, query ? [] : selected)
-    asyncOptions.value = response?.data || []
-  } catch (error) {
-    asyncOptions.value = []
-  } finally {
-    asyncLoading.value = false
+function toggleRepeaterItem(index) {
+  const next = new Set(toggledRepeaterItems.value)
+  if (next.has(index)) {
+    next.delete(index)
+  } else {
+    next.add(index)
   }
+  toggledRepeaterItems.value = next
 }
 
-function handleAsyncSearch(query) {
-  clearTimeout(asyncTimer)
-  asyncTimer = setTimeout(() => loadAsyncOptions(query), 250)
+/** 收起态标题行上的一行摘要，取自 listPreview 配置。 */
+function repeaterItemSummary(item) {
+  if (!repeaterCollapsible.value) return ''
+  return repeaterRowSummary(item, props.schema.listPreview || {})
 }
 
-
-
-// ============ Taxonomy Select (async) ============
-const taxonomyOptions = ref([])
-const taxonomyLoading = ref(false)
-
-async function loadTaxonomyTerms() {
-  if (!props.schema.taxonomy) return
-  taxonomyLoading.value = true
-  try {
-    const res = await api.getCategories(props.schema.taxonomy || 'category')
-    const items = res?.data || res || []
-    taxonomyOptions.value = (Array.isArray(items) ? items : []).map(t => ({
-      label: t.name + (t.count ? ' (' + t.count + ')' : ''),
-      value: t.term_id,
-    }))
-  } catch (e) {
-    console.warn('[AksField] taxonomy load failed:', e)
-    taxonomyOptions.value = []
-  } finally {
-    taxonomyLoading.value = false
-  }
-}
-
-onMounted(() => {
-  if (props.schema.type === 'taxonomy_select') {
-    loadTaxonomyTerms()
-  }
-  if (props.schema.type === 'user_select') {
-    loadInitialUsers()
-  }
-  if (props.schema.type === 'async_select') {
-    loadAsyncOptions()
-  }
-  if (props.schema.type === 'page_select') {
-    loadPages()
-  }
+/** 拖拽视图：vuedraggable 以 modelValue 模式工作（内部复制后回传 update:modelValue）。 */
+const repeaterDragList = computed({
+  get: () => (Array.isArray(props.modelValue) ? props.modelValue : []),
+  set: (value) => emit('update:modelValue', Array.isArray(value) ? value : []),
 })
 
-// ============ User Select (async search) ============
-const userOptions = ref([])
-const userLoading = ref(false)
-let userSearchTimer = null
-
-async function loadInitialUsers() {
-  userLoading.value = true
-  try {
-    const res = await api.searchUsers('', 20)
-    const items = res?.data || res || []
-    userOptions.value = (Array.isArray(items) ? items : []).map(u => ({
-      label: u.display_name + ' (' + u.user_login + ')',
-      value: u.id,
-    }))
-  } catch (e) {
-    console.warn('[AksField] user load failed:', e)
-    userOptions.value = []
-  } finally {
-    userLoading.value = false
-  }
-}
-
-function handleUserSearch(query) {
-  clearTimeout(userSearchTimer)
-  userSearchTimer = setTimeout(async () => {
-    userLoading.value = true
-    try {
-      const res = await api.searchUsers(query || '', 20)
-      const items = res?.data || res || []
-      userOptions.value = (Array.isArray(items) ? items : []).map(u => ({
-        label: u.display_name + ' (' + u.user_login + ')',
-        value: u.id,
-      }))
-    } catch (e) {
-      userOptions.value = []
-    } finally {
-      userLoading.value = false
+/**
+ * 行 key：优先用行自身 _id；服务端历史数据没有 _id 时按对象引用派生稳定 key，
+ * 避免每次输入都重算 key 导致子字段重挂载、输入焦点丢失。
+ */
+const dragRowKeys = new WeakMap()
+let dragRowKeySeed = 0
+function repeaterDragKey(item) {
+  if (item && typeof item === 'object') {
+    if (item._id) return item._id
+    let key = dragRowKeys.get(item)
+    if (!key) {
+      key = `rpt_drag_${++dragRowKeySeed}`
+      dragRowKeys.set(item, key)
     }
-  }, 300)
-}
-
-// ============ Page Select (async page list) ============
-const pageOptions = ref([])
-const pageLoading = ref(false)
-let pageSearchTimer = null
-
-async function loadPages(query = '') {
-  pageLoading.value = true
-  try {
-    const selected = props.modelValue ? [props.modelValue] : []
-    const res = await api.searchPageDisplayOptions('pages', query, query ? [] : selected)
-    const items = res?.data || res || []
-    pageOptions.value = Array.isArray(items) ? items : []
-  } catch (e) {
-    console.warn('[AksField] page load failed:', e)
-    pageOptions.value = []
-  } finally {
-    pageLoading.value = false
+    return key
   }
-}
-
-function handlePageSearch(query) {
-  clearTimeout(pageSearchTimer)
-  pageSearchTimer = setTimeout(() => loadPages(query), 250)
-}
-
-const fieldClasses = computed(() => ({
-  'aksrt-field--disabled': props.schema.disabled,
-  'aksrt-field--inline': props.schema.inline,
-  [`aksrt-field--${props.schema.type}`]: !!props.schema.type,
-}))
-
-// ============ Dimensions ============
-const dimensionUnitOptions = [
-  { label: 'px', value: 'px' },
-  { label: '%', value: '%' },
-  { label: 'em', value: 'em' },
-  { label: 'rem', value: 'rem' },
-  { label: 'vw', value: 'vw' },
-]
-
-function updateDimension(part, value) {
-  const current = props.modelValue || {}
-  emit('update:modelValue', { ...current, [part]: value })
-}
-
-// ============ Between Number (min/max pair) ============
-function betweenValue(part) {
-  const current = props.modelValue && typeof props.modelValue === 'object' && !Array.isArray(props.modelValue)
-    ? props.modelValue
-    : {}
-  return current[part] !== undefined ? current[part] : (props.schema.default?.[part] ?? 0)
-}
-
-function updateBetween(part, value) {
-  const current = props.modelValue && typeof props.modelValue === 'object' && !Array.isArray(props.modelValue)
-    ? props.modelValue
-    : {}
-  emit('update:modelValue', { ...current, [part]: value })
-}
-
-// ============ Spacing ============
-function updateSpacing(part, value) {
-  const current = props.modelValue || {}
-  emit('update:modelValue', { ...current, [part]: value })
-}
-
-// ============ Background ============
-const bgSizeOptions = [
-  { label: '覆盖', value: 'cover' },
-  { label: '包含', value: 'contain' },
-  { label: '原始大小', value: 'auto' },
-]
-
-const bgPositionOptions = [
-  { label: '居中', value: 'center center' },
-  { label: '顶部居中', value: 'top center' },
-  { label: '底部居中', value: 'bottom center' },
-  { label: '左侧居中', value: 'center left' },
-  { label: '右侧居中', value: 'center right' },
-]
-
-const bgRepeatOptions = [
-  { label: '不重复', value: 'no-repeat' },
-  { label: '平铺', value: 'repeat' },
-  { label: '水平平铺', value: 'repeat-x' },
-  { label: '垂直平铺', value: 'repeat-y' },
-]
-
-function updateBackground(part, value) {
-  const current = props.modelValue || {}
-  emit('update:modelValue', { ...current, [part]: value })
-}
-
-// ============ Repeater ============
-let repeaterIdCounter = 0
-const repeaterModalShow = ref(false)
-const repeaterEditingIndex = ref(-1)
-const repeaterDraft = ref({})
-
-function createRepeaterItem() {
-  const newItem = { _id: `rpt_${Date.now()}_${++repeaterIdCounter}` }
-  for (const field of (props.schema.fields || [])) {
-    // UI-only chrome rows (notice / alert) are presentation only.
-    if (field.ui_only) continue
-    if (field.default !== undefined) {
-      newItem[field.key] = field.default
-    } else if (field.type === 'switch') {
-      newItem[field.key] = false
-    } else if (field.type === 'checkbox' || field.type === 'repeater') {
-      newItem[field.key] = []
-    } else {
-      newItem[field.key] = ''
-    }
-  }
-  return newItem
+  return String(item)
 }
 
 function addRepeaterItem() {
   if (reachedRepeaterMaximum.value) return
   const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-  current.push(createRepeaterItem())
+  current.push(createRepeaterRow(props.schema.fields))
   emit('update:modelValue', current)
 }
 
@@ -1224,94 +761,6 @@ function updateRepeaterItem(index, fieldKey, value) {
   }
   emit('update:modelValue', current)
 }
-
-function moveRepeaterItem(index, delta) {
-  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-  const target = index + delta
-  if (target < 0 || target >= current.length) return
-  const tmp = current[index]
-  current[index] = current[target]
-  current[target] = tmp
-  emit('update:modelValue', current)
-}
-
-function getRepeaterPreviewConfig() {
-  return props.schema.listPreview || {}
-}
-
-function getRepeaterPreviewIcon(item) {
-  const cfg = getRepeaterPreviewConfig()
-  const key = cfg.iconKey || 'icon'
-  return String(item?.[key] || '').trim()
-}
-
-function getRepeaterPreviewCustomIcon(item) {
-  const cfg = getRepeaterPreviewConfig()
-  const key = cfg.customIconKey || 'custom_icon'
-  return String(item?.[key] || '').trim()
-}
-
-function getRepeaterPreviewIconClass(item) {
-  const cfg = getRepeaterPreviewConfig()
-  const colorKey = cfg.iconClassKey || 'icon_class'
-  return String(item?.[colorKey] || '').trim()
-}
-
-function getRepeaterPreviewTitle(item) {
-  const cfg = getRepeaterPreviewConfig()
-  const key = cfg.titleKey || 'title'
-  const title = String(item?.[key] || '').trim()
-  return title || '未命名卡片'
-}
-
-function getRepeaterPreviewDesc(item) {
-  const cfg = getRepeaterPreviewConfig()
-  const key = cfg.descKey || 'desc'
-  const desc = String(item?.[key] || '').trim()
-  if (desc) return desc
-  const urlKey = cfg.urlKey || 'url'
-  const url = String(item?.[urlKey] || '').trim()
-  return url || '暂无描述'
-}
-
-function openRepeaterModal(index) {
-  if (index < 0 && reachedRepeaterMaximum.value) return
-  if (props.schema.disabled) return
-  if (index >= 0) {
-    const item = (Array.isArray(props.modelValue) ? props.modelValue : [])[index] || {}
-    repeaterDraft.value = { ...createRepeaterItem(), ...item }
-    repeaterEditingIndex.value = index
-  } else {
-    repeaterDraft.value = createRepeaterItem()
-    repeaterEditingIndex.value = -1
-  }
-  repeaterModalShow.value = true
-}
-
-function closeRepeaterModal() {
-  repeaterModalShow.value = false
-  repeaterEditingIndex.value = -1
-  repeaterDraft.value = {}
-}
-
-function updateRepeaterDraft(fieldKey, value) {
-  repeaterDraft.value = { ...repeaterDraft.value, [fieldKey]: value }
-}
-
-function confirmRepeaterModal() {
-  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-  const item = { ...repeaterDraft.value }
-  if (!item._id) {
-    item._id = `rpt_${Date.now()}_${++repeaterIdCounter}`
-  }
-  if (repeaterEditingIndex.value >= 0 && repeaterEditingIndex.value < current.length) {
-    current[repeaterEditingIndex.value] = item
-  } else {
-    current.push(item)
-  }
-  emit('update:modelValue', current)
-  closeRepeaterModal()
-}
 </script>
 
 <style scoped>
@@ -1392,26 +841,6 @@ function confirmRepeaterModal() {
   pointer-events: none;
 }
 
-/* Dimensions field */
-.aksrt-field__dimensions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.aksrt-field__dimensions-sep {
-  color: var(--aksrt-color-border-strong);
-  font-size: 14px;
-}
-
-/* Between number (min/max) */
-.aksrt-field__between {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  max-width: 360px;
-}
-
 .aksrt-field__number {
   display: flex;
   align-items: center;
@@ -1425,103 +854,6 @@ function confirmRepeaterModal() {
   white-space: nowrap;
 }
 
-.aksrt-field__between-sep {
-  color: var(--aksrt-color-border-strong);
-  font-size: 14px;
-}
-
-.aksrt-field__between-unit {
-  color: var(--aksrt-color-muted);
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-/* Spacing field */
-.aksrt-field__spacing {
-  display: grid;
-  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr;
-  gap: 8px;
-  align-items: center;
-}
-
-.aksrt-field__spacing-label {
-  font-size: 12px;
-  color: var(--aksrt-color-muted);
-  text-align: center;
-}
-
-/* Background field */
-.aksrt-field__background {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.aksrt-field__background-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.aksrt-field__sublabel {
-  font-size: 12px;
-  color: var(--aksrt-color-muted);
-  min-width: 70px;
-}
-
-/* Image select */
-.aksrt-field__image-select {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.aksrt-field__image-select-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 8px;
-  border: 2px solid var(--aksrt-color-border);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-  min-width: 80px;
-}
-
-.aksrt-field__image-select-item:hover {
-  border-color: var(--aksrt-color-primary);
-}
-
-.aksrt-field__image-select-item--active {
-  border-color: var(--aksrt-color-primary);
-  background: var(--aksrt-color-primary-soft);
-}
-
-.aksrt-field__image-select-img {
-  width: 60px;
-  height: 60px;
-  object-fit: cover;
-  border-radius: 4px;
-}
-
-.aksrt-field__image-select-placeholder {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--aksrt-color-canvas);
-  border-radius: 4px;
-  color: var(--aksrt-color-border-strong);
-}
-
-.aksrt-field__image-select-label {
-  font-size: 11px;
-  color: var(--aksrt-color-text-secondary);
-  text-align: center;
-}
-
 .aksrt-field__palette {
   display: flex;
   flex-wrap: wrap;
@@ -1532,7 +864,7 @@ function confirmRepeaterModal() {
   width: 34px;
   height: 26px;
   padding: 0;
-  border: 3px solid #fff;
+  border: 3px solid var(--aksrt-color-surface);
   border-radius: 3px;
   box-shadow: 0 0 0 1px var(--aksrt-color-border-strong);
   cursor: pointer;
@@ -1548,48 +880,14 @@ function confirmRepeaterModal() {
   gap: 8px;
 }
 
-.aksrt-field__sortable {
-  display: grid;
-  gap: 8px;
-}
-
-.aksrt-field__selected-order {
-  display: grid;
-  gap: 5px;
-  margin-top: 8px;
-}
-
-.aksrt-field__selected-order-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px 9px;
-  border: 1px solid var(--aksrt-color-border);
-  border-radius: 3px;
-  background: var(--aksrt-color-canvas);
-}
-
-.aksrt-field__sortable-item {
-  border: 1px solid var(--aksrt-color-border);
-  background: var(--aksrt-color-surface);
-}
-
-.aksrt-field__sortable-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  background: var(--aksrt-color-canvas);
-}
-
+/* sortable 卡片展开区：两列字段栅格（卡片本身见 styles/sortable-list.css） */
 .aksrt-field__sortable-body {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
-  padding: 12px;
 }
 
-/* Repeater */
+/* Fieldset / Accordion */
 .aksrt-field__fieldset {
   padding: 14px;
   border: 1px solid var(--aksrt-color-border);
@@ -1620,6 +918,7 @@ function confirmRepeaterModal() {
 
 .aksrt-field__accordion-section-head:hover {
   border-color: var(--aksrt-color-primary);
+  background: var(--aksrt-color-primary-soft);
   color: var(--aksrt-color-primary);
 }
 
@@ -1639,89 +938,11 @@ function confirmRepeaterModal() {
   padding: 10px 2px 2px;
 }
 
+/* Repeater inline（卡片 / 手柄 / 拖拽态见 styles/sortable-list.css） */
 .aksrt-field__repeater {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-}
-
-.aksrt-field__repeater-item {
-  border: 1px solid var(--aksrt-color-border);
-  border-radius: 8px;
-  padding: 12px;
-  background: var(--aksrt-color-canvas);
-}
-
-.aksrt-field__repeater-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.aksrt-field__repeater-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.aksrt-field__repeater-header.is-clickable {
-  cursor: pointer;
-  user-select: none;
-  border-radius: 6px;
-  margin: -4px -4px 0;
-  padding: 4px 4px 0;
-}
-
-.aksrt-field__repeater-header.is-clickable:hover .aksrt-field__repeater-index {
-  color: var(--aksrt-color-primary-hover);
-}
-
-.aksrt-field__repeater-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.aksrt-field__repeater-toggle {
-  color: var(--aksrt-color-text-secondary);
-  transition: transform 0.15s;
-}
-
-.aksrt-field__repeater-summary {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  color: var(--aksrt-color-text-secondary);
-}
-
-.aksrt-field__repeater-item.is-collapsible {
-  padding: 10px 12px;
-}
-
-.aksrt-field__repeater-item.is-collapsed .aksrt-field__repeater-header {
-  margin-bottom: 0;
-}
-
-.aksrt-field__repeater-handle {
-  cursor: grab;
-  color: var(--aksrt-color-text-tertiary);
-}
-
-.aksrt-field__repeater-ghost {
-  opacity: 0.45;
-  border-color: var(--aksrt-color-primary);
-}
-
-.aksrt-field__repeater-index {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--aksrt-color-primary);
+  gap: 10px;
 }
 
 .aksrt-field__repeater-fields {
@@ -1739,147 +960,10 @@ function confirmRepeaterModal() {
 
 /* Mobile */
 @media (max-width: 768px) {
-  .aksrt-field__dimensions {
-    flex-wrap: wrap;
-  }
-
-  .aksrt-field__spacing {
-    grid-template-columns: auto 1fr;
-  }
-
-  .aksrt-field__background-row {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
   .aksrt-field__link,
   .aksrt-field__sortable-body {
     grid-template-columns: 1fr;
   }
 }
 
-/* Repeater list-modal */
-.aksrt-field__repeater--list-modal {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.aksrt-field__repeater-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.aksrt-field__repeater-list-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border: 1px solid var(--aksrt-color-border);
-  border-radius: 8px;
-  background: var(--aksrt-color-canvas);
-}
-
-.aksrt-field__repeater-list-actions {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-.aksrt-field__repeater-list-preview {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-  flex: 1;
-}
-
-.aksrt-field__repeater-list-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--aksrt-color-primary-soft);
-  color: var(--aksrt-color-primary);
-  flex-shrink: 0;
-  overflow: hidden;
-  font-size: 16px;
-}
-
-.aksrt-field__repeater-list-icon-html {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.aksrt-field__repeater-list-icon-html :deep(svg),
-.aksrt-field__repeater-list-icon-html :deep(img) {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-}
-
-.aksrt-field__repeater-list-meta {
-  min-width: 0;
-  flex: 1;
-}
-
-.aksrt-field__repeater-list-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--aksrt-color-text);
-  line-height: 1.35;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.aksrt-field__repeater-list-desc {
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--aksrt-color-muted);
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.aksrt-field__repeater-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 22px 12px;
-  color: var(--aksrt-color-border-strong);
-  font-size: 13px;
-  border: 1px dashed var(--aksrt-color-border);
-  border-radius: 8px;
-  background: var(--aksrt-color-canvas);
-}
-
-.aksrt-field__repeater-modal-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: min(70vh, 560px);
-  overflow: auto;
-  padding-right: 2px;
-}
-
-.aksrt-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid var(--aksrt-color-border);
-}
-
 </style>
diff --git a/assets/admin/src/components/form/AksImageSelectField.vue b/assets/admin/src/components/form/AksImageSelectField.vue
new file mode 100644
index 00000000..e7d8fae0
--- /dev/null
+++ b/assets/admin/src/components/form/AksImageSelectField.vue
@@ -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>
diff --git a/assets/admin/src/components/form/AksRepeaterField.vue b/assets/admin/src/components/form/AksRepeaterField.vue
deleted file mode 100644
index 634ce901..00000000
--- a/assets/admin/src/components/form/AksRepeaterField.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-  <div class="aksrt-repeater">
-    <div v-if="modelValue && modelValue.length" class="aksrt-repeater__list">
-      <div
-        v-for="(item, index) in modelValue"
-        :key="index"
-        class="aksrt-repeater__item"
-      >
-        <div class="aksrt-repeater__item-header">
-          <span class="aksrt-repeater__item-index">#{{ index + 1 }}</span>
-          <div class="aksrt-repeater__item-actions">
-            <n-button
-              v-if="index > 0"
-              size="tiny"
-              quaternary
-              @click="moveUp(index)"
-            >
-              <FaIcon icon="fa fas fa-arrow-up" :size="12" />
-            </n-button>
-            <n-button
-              v-if="index < modelValue.length - 1"
-              size="tiny"
-              quaternary
-              @click="moveDown(index)"
-            >
-              <FaIcon icon="fa fas fa-arrow-down" :size="12" />
-            </n-button>
-            <n-button
-              size="tiny"
-              quaternary
-              type="error"
-              @click="removeItem(index)"
-            >
-              <FaIcon icon="fa fas fa-trash-alt" :size="12" />
-            </n-button>
-          </div>
-        </div>
-
-        <div class="aksrt-repeater__item-fields">
-          <AksField
-            v-for="field in fields"
-            :key="field.key"
-            :schema="field"
-            :model-value="item[field.key]"
-            @update:model-value="updateField(index, field.key, $event)"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div v-else class="aksrt-repeater__empty">
-      <FaIcon icon="fa fas fa-inbox" :size="20" />
-      <span>{{ emptyText || '暂无数据' }}</span>
-    </div>
-
-    <n-button
-      size="small"
-      dashed
-      block
-      class="aksrt-repeater__add"
-      @click="addItem"
-    >
-      <FaIcon icon="fa fas fa-plus" :size="12" />
-      {{ addText || '添加项目' }}
-    </n-button>
-  </div>
-</template>
-
-<script setup>
-/**
- * AksRepeaterField — dynamic add/remove rows of structured data.
- * Each row renders fields based on the provided field schemas.
- */
-import AksField from './AksField.vue'
-import FaIcon from './FaIcon.vue'
-
-const props = defineProps({
-  modelValue: { type: Array, default: () => [] },
-  /** Array of field schemas for each row */
-  fields: { type: Array, required: true },
-  /** Default value for a new item */
-  defaults: { type: Object, default: () => ({}) },
-  emptyText: { type: String, default: '' },
-  addText: { type: String, default: '' },
-  maxItems: { type: Number, default: Infinity },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-function createItem() {
-  const item = {}
-  for (const field of props.fields) {
-    item[field.key] = field.default ?? (field.type === 'switch' ? false : '')
-  }
-  return { ...item, ...props.defaults }
-}
-
-function addItem() {
-  if (props.modelValue.length >= props.maxItems) return
-  const list = [...props.modelValue, createItem()]
-  emit('update:modelValue', list)
-}
-
-function removeItem(index) {
-  const list = props.modelValue.filter((_, i) => i !== index)
-  emit('update:modelValue', list)
-}
-
-function moveUp(index) {
-  if (index <= 0) return
-  const list = [...props.modelValue]
-  ;[list[index - 1], list[index]] = [list[index], list[index - 1]]
-  emit('update:modelValue', list)
-}
-
-function moveDown(index) {
-  if (index >= props.modelValue.length - 1) return
-  const list = [...props.modelValue]
-  ;[list[index], list[index + 1]] = [list[index + 1], list[index]]
-  emit('update:modelValue', list)
-}
-
-function updateField(index, key, value) {
-  const list = [...props.modelValue]
-  list[index] = { ...list[index], [key]: value }
-  emit('update:modelValue', list)
-}
-</script>
-
-<style scoped>
-.aksrt-repeater__list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-
-.aksrt-repeater__item {
-  border: 1px solid var(--aksrt-color-border);
-  border-radius: 8px;
-  padding: 12px;
-  background: var(--aksrt-color-canvas);
-}
-
-.aksrt-repeater__item-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.aksrt-repeater__item-index {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--aksrt-color-primary);
-  background: var(--aksrt-color-primary-soft);
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.aksrt-repeater__item-actions {
-  display: flex;
-  gap: 2px;
-}
-
-.aksrt-repeater__item-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.aksrt-repeater__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 24px;
-  color: var(--aksrt-color-border-strong);
-  font-size: 13px;
-}
-
-.aksrt-repeater__add {
-  margin-top: 4px;
-}
-</style>
diff --git a/assets/admin/src/components/form/AksRepeaterListModal.vue b/assets/admin/src/components/form/AksRepeaterListModal.vue
new file mode 100644
index 00000000..f148d7f3
--- /dev/null
+++ b/assets/admin/src/components/form/AksRepeaterListModal.vue
@@ -0,0 +1,183 @@
+<template>
+  <div class="aksrt-repeater-list">
+    <draggable
+      v-if="rows.length"
+      v-model="rows"
+      v-bind="SORTABLE_LIST_ATTRS"
+      :item-key="rowKey"
+      :disabled="schema.disabled"
+      class="aksrt-sortable"
+    >
+      <template #item="{ element, index }">
+        <div class="aksrt-sortable__item">
+          <div class="aksrt-sortable__head">
+            <AksSortHandle />
+            <span class="aksrt-sortable__icon" :class="preview(element).iconClass">
+              <span v-if="preview(element).customIcon" class="aksrt-repeater-list__icon-html" v-html="preview(element).customIcon" />
+              <i v-else-if="preview(element).icon" :class="preview(element).icon" aria-hidden="true" />
+              <FaIcon v-else icon="fa fas fa-star" :size="16" />
+            </span>
+            <div class="aksrt-sortable__main">
+              <span class="aksrt-sortable__title">{{ preview(element).title }}</span>
+              <span class="aksrt-sortable__desc">{{ preview(element).desc }}</span>
+            </div>
+            <div class="aksrt-sortable__actions">
+              <n-button size="tiny" quaternary type="primary" :disabled="schema.disabled" @click="openModal(index)">
+                <template #icon><FaIcon icon="fa fas fa-edit" :size="12" /></template>
+                编辑
+              </n-button>
+              <n-button size="tiny" quaternary type="error" :disabled="schema.disabled || reachedMinimum" @click="remove(index)">
+                <template #icon><FaIcon icon="fa fas fa-trash-alt" :size="12" /></template>
+                删除
+              </n-button>
+            </div>
+          </div>
+        </div>
+      </template>
+    </draggable>
+    <div v-else class="aksrt-sortable__empty">
+      <FaIcon icon="fa fas fa-inbox" :size="18" />
+      <span>{{ schema.emptyText || '暂无数据' }}</span>
+    </div>
+
+    <n-button size="small" dashed block :disabled="schema.disabled || reachedMaximum" @click="openModal(-1)">
+      <template #icon><FaIcon icon="fa fas fa-plus" :size="12" /></template>
+      {{ schema.button_title || schema.addText || '添加一项' }}
+    </n-button>
+
+    <n-modal
+      v-model:show="modalShow"
+      :mask-closable="false"
+      preset="card"
+      :title="editingIndex >= 0 ? (schema.editText || '编辑项目') : (schema.addText || '添加项目')"
+      class="aksrt-modal-card"
+      style="max-width: 640px; width: 92vw;"
+    >
+      <div class="aksrt-repeater-list__modal-fields">
+        <AksField
+          v-for="field in draftFields"
+          :key="field.key"
+          :schema="field"
+          :model-value="draft[field.key]"
+          :form-data="formData"
+          @update:model-value="draft = { ...draft, [field.key]: $event }"
+        />
+      </div>
+      <div class="aksrt-modal-footer">
+        <n-button @click="closeModal">取消</n-button>
+        <n-button type="primary" @click="confirmModal">确定</n-button>
+      </div>
+    </n-modal>
+  </div>
+</template>
+
+<script setup>
+/** repeater / group 的 list-modal 形态：可拖拽卡片列表 + 弹窗编辑单行。 */
+import { computed, ref } from 'vue'
+import draggable from 'vuedraggable'
+import FaIcon from './FaIcon.vue'
+import AksField from './AksField.vue'
+import AksSortHandle from './AksSortHandle.vue'
+import { matchDependency } from './field-dependency.js'
+import { SORTABLE_LIST_ATTRS } from './sortable-options.js'
+import { createRepeaterRow, createRepeaterRowId, repeaterRowPreview } from './repeater-rows.js'
+
+const props = defineProps({
+  schema: { type: Object, required: true },
+  modelValue: { default: null },
+  formData: { type: Object, default: () => ({}) },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const rows = computed({
+  get: () => (Array.isArray(props.modelValue) ? props.modelValue : []),
+  set: (value) => emit('update:modelValue', Array.isArray(value) ? value : []),
+})
+const reachedMinimum = computed(() => rows.value.length <= Number(props.schema.min || 0))
+const reachedMaximum = computed(() => Number(props.schema.max || 0) > 0 && rows.value.length >= Number(props.schema.max))
+
+const keys = new WeakMap()
+let keySeed = 0
+function rowKey(row) {
+  if (!row || typeof row !== 'object') return String(row)
+  if (row._id) return row._id
+  if (!keys.has(row)) keys.set(row, `rpt_list_${++keySeed}`)
+  return keys.get(row)
+}
+
+function preview(row) {
+  return repeaterRowPreview(row, props.schema.listPreview || {})
+}
+
+function remove(index) {
+  if (reachedMinimum.value) return
+  const next = [...rows.value]
+  next.splice(index, 1)
+  emit('update:modelValue', next)
+}
+
+const modalShow = ref(false)
+const editingIndex = ref(-1)
+const draft = ref({})
+const draftFields = computed(() => (props.schema.fields || []).filter(field => matchDependency(field.dependsOn, draft.value)))
+
+function openModal(index) {
+  if (props.schema.disabled) return
+  if (index < 0 && reachedMaximum.value) return
+  const base = createRepeaterRow(props.schema.fields)
+  draft.value = index >= 0 ? { ...base, ...(rows.value[index] || {}) } : base
+  editingIndex.value = index
+  modalShow.value = true
+}
+
+function closeModal() {
+  modalShow.value = false
+  editingIndex.value = -1
+  draft.value = {}
+}
+
+function confirmModal() {
+  const next = [...rows.value]
+  const row = { ...draft.value }
+  if (!row._id) row._id = createRepeaterRowId()
+  if (editingIndex.value >= 0 && editingIndex.value < next.length) {
+    next[editingIndex.value] = row
+  } else {
+    next.push(row)
+  }
+  emit('update:modelValue', next)
+  closeModal()
+}
+</script>
+
+<style scoped>
+.aksrt-repeater-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.aksrt-repeater-list__icon-html {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.aksrt-repeater-list__icon-html :deep(svg),
+.aksrt-repeater-list__icon-html :deep(img) {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+.aksrt-repeater-list__modal-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: min(70vh, 560px);
+  overflow: auto;
+  padding-right: 2px;
+}
+</style>
diff --git a/assets/admin/src/components/form/AksSelectedOrder.vue b/assets/admin/src/components/form/AksSelectedOrder.vue
new file mode 100644
index 00000000..3ded0c23
--- /dev/null
+++ b/assets/admin/src/components/form/AksSelectedOrder.vue
@@ -0,0 +1,53 @@
+<template>
+  <draggable
+    v-model="values"
+    v-bind="SORTABLE_LIST_ATTRS"
+    :item-key="valueKey"
+    :disabled="disabled"
+    class="aksrt-sortable aksrt-sortable--compact aksrt-selected-order"
+  >
+    <template #item="{ element, index }">
+      <div class="aksrt-sortable__item">
+        <div class="aksrt-sortable__head">
+          <AksSortHandle />
+          <span class="aksrt-sortable__index">{{ index + 1 }}</span>
+          <span class="aksrt-sortable__title">{{ labelOf(element) }}</span>
+        </div>
+      </div>
+    </template>
+  </draggable>
+</template>
+
+<script setup>
+/** 多选 + sortable 的已选值排序列表（select / async_select 下方）。 */
+import { computed } from 'vue'
+import draggable from 'vuedraggable'
+import AksSortHandle from './AksSortHandle.vue'
+import { SORTABLE_LIST_ATTRS } from './sortable-options.js'
+
+const props = defineProps({
+  modelValue: { type: Array, required: true },
+  options: { type: Array, default: () => [] },
+  disabled: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const values = computed({
+  get: () => props.modelValue,
+  set: (next) => emit('update:modelValue', next),
+})
+
+function valueKey(value) {
+  return String(value)
+}
+
+function labelOf(value) {
+  return props.options.find(option => option.value === value)?.label || String(value)
+}
+</script>
+
+<style scoped>
+.aksrt-selected-order {
+  margin-top: 8px;
+}
+</style>
diff --git a/assets/admin/src/components/form/AksSortHandle.vue b/assets/admin/src/components/form/AksSortHandle.vue
new file mode 100644
index 00000000..a861aa0e
--- /dev/null
+++ b/assets/admin/src/components/form/AksSortHandle.vue
@@ -0,0 +1,12 @@
+<template>
+  <button type="button" class="aksrt-sortable__handle" :title="label" :aria-label="label">
+    <i class="fa fas fa-grip-vertical" aria-hidden="true"></i>
+  </button>
+</template>
+
+<script setup>
+/** 拖拽排序手柄；SORTABLE_LIST_ATTRS.handle 指向它的类名。 */
+defineProps({
+  label: { type: String, default: '拖拽排序' },
+})
+</script>
diff --git a/assets/admin/src/components/form/AksSorterField.vue b/assets/admin/src/components/form/AksSorterField.vue
index 39668dfe..c3cf17a5 100644
--- a/assets/admin/src/components/form/AksSorterField.vue
+++ b/assets/admin/src/components/form/AksSorterField.vue
@@ -1,62 +1,51 @@
 <template>
   <div class="aksrt-sorter">
-    <div class="aksrt-sorter__column">
+    <div
+      v-for="column in COLUMNS"
+      :key="column.key"
+      class="aksrt-sorter__column"
+      :class="`aksrt-sorter__column--${column.key}`"
+    >
       <div class="aksrt-sorter__title">
-        <span>已启用</span>
-        <n-tag size="small" type="success" :bordered="false">{{ columns.enabled.length }}</n-tag>
+        <span>{{ column.title }}</span>
+        <n-tag size="small" :type="column.tagType" :bordered="false">{{ columns[column.key].length }}</n-tag>
       </div>
       <draggable
-        v-model="columns.enabled"
+        v-model="columns[column.key]"
+        v-bind="SORTABLE_LIST_ATTRS"
         item-key="value"
         group="aksrt-sorter"
-        handle=".aksrt-sorter__handle"
-        ghost-class="aksrt-sorter__ghost"
-        animation="180"
-        class="aksrt-sorter__list"
+        class="aksrt-sortable aksrt-sortable--compact aksrt-sorter__list"
         @change="commit"
       >
         <template #item="{ element }">
-          <div class="aksrt-sorter__item">
-            <i class="fa fas fa-grip-vertical aksrt-sorter__handle" aria-hidden="true"></i>
-            <i v-if="element.icon" :class="element.icon" aria-hidden="true"></i>
-            <span>{{ element.label }}</span>
+          <div class="aksrt-sortable__item">
+            <div class="aksrt-sortable__head">
+              <AksSortHandle />
+              <i v-if="element.icon" :class="element.icon" class="aksrt-sorter__icon" aria-hidden="true"></i>
+              <span class="aksrt-sortable__title">{{ element.label }}</span>
+            </div>
           </div>
         </template>
       </draggable>
-      <n-empty v-if="columns.enabled.length === 0" size="small" description="暂无启用项" />
-    </div>
-
-    <div class="aksrt-sorter__column aksrt-sorter__column--disabled">
-      <div class="aksrt-sorter__title">
-        <span>未启用</span>
-        <n-tag size="small" :bordered="false">{{ columns.disabled.length }}</n-tag>
+      <div v-if="columns[column.key].length === 0" class="aksrt-sortable__empty aksrt-sorter__empty">
+        {{ column.empty }}
       </div>
-      <draggable
-        v-model="columns.disabled"
-        item-key="value"
-        group="aksrt-sorter"
-        handle=".aksrt-sorter__handle"
-        ghost-class="aksrt-sorter__ghost"
-        animation="180"
-        class="aksrt-sorter__list"
-        @change="commit"
-      >
-        <template #item="{ element }">
-          <div class="aksrt-sorter__item">
-            <i class="fa fas fa-grip-vertical aksrt-sorter__handle" aria-hidden="true"></i>
-            <i v-if="element.icon" :class="element.icon" aria-hidden="true"></i>
-            <span>{{ element.label }}</span>
-          </div>
-        </template>
-      </draggable>
-      <n-empty v-if="columns.disabled.length === 0" size="small" description="暂无未启用项" />
     </div>
   </div>
 </template>
 
 <script setup>
+/** 启用 / 未启用两列拖拽排序器；样式见 styles/sortable-list.css。 */
 import { reactive, watch } from 'vue'
 import draggable from 'vuedraggable'
+import AksSortHandle from './AksSortHandle.vue'
+import { SORTABLE_LIST_ATTRS } from './sortable-options.js'
+
+const COLUMNS = [
+  { key: 'enabled', title: '已启用', tagType: 'success', empty: '拖拽到此处启用' },
+  { key: 'disabled', title: '未启用', tagType: 'default', empty: '拖拽到此处停用' },
+]
 
 const props = defineProps({
   modelValue: { type: Object, default: () => ({}) },
@@ -100,13 +89,55 @@ watch(() => [props.modelValue, props.options], syncColumns, { immediate: true, d
 </script>
 
 <style scoped>
-.aksrt-sorter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
-.aksrt-sorter__column { min-height:210px; padding:12px; border:1px solid var(--aksrt-color-border); border-radius:6px; background:var(--aksrt-color-surface); }
-.aksrt-sorter__column--disabled { background:var(--aksrt-color-canvas); }
-.aksrt-sorter__title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-weight:600; }
-.aksrt-sorter__list { display:grid; gap:7px; min-height:44px; }
-.aksrt-sorter__item { display:flex; align-items:center; gap:9px; min-height:38px; padding:7px 10px; border:1px solid var(--aksrt-color-border); border-radius:4px; background:var(--aksrt-color-surface); }
-.aksrt-sorter__handle { color:var(--aksrt-color-text-tertiary); cursor:grab; }
-.aksrt-sorter__ghost { opacity:.45; border-color:var(--aksrt-color-primary); }
-@media (max-width:720px) { .aksrt-sorter { grid-template-columns:1fr; } }
+.aksrt-sorter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.aksrt-sorter__column {
+  position: relative;
+  min-height: 210px;
+  padding: 12px;
+  border: 1px solid var(--aksrt-color-border);
+  border-radius: 8px;
+  background: var(--aksrt-color-canvas);
+}
+
+.aksrt-sorter__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  color: var(--aksrt-color-text);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* 空列也要留出可放置区域，拖拽目标不能塌成 0 高度。 */
+.aksrt-sorter__list {
+  min-height: 44px;
+}
+
+.aksrt-sorter__empty {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  top: 46px;
+  pointer-events: none;
+}
+
+.aksrt-sorter__icon {
+  flex: 0 0 auto;
+  width: 16px;
+  color: var(--aksrt-color-primary);
+  text-align: center;
+}
+
+@media (max-width: 720px) {
+  .aksrt-sorter {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/assets/admin/src/components/form/field-dependency.js b/assets/admin/src/components/form/field-dependency.js
new file mode 100644
index 00000000..1b74b722
--- /dev/null
+++ b/assets/admin/src/components/form/field-dependency.js
@@ -0,0 +1,18 @@
+/**
+ * schema 字段的 dependsOn 规则求值。sourceValue 是规则引用的数据对象
+ * （fieldset 值 / repeater 行 / 弹窗草稿）。
+ */
+export function matchDependency(rule, sourceValue) {
+  if (!rule) return true
+  const source = sourceValue && typeof sourceValue === 'object' ? sourceValue : {}
+  if (rule.all) return rule.all.every(item => matchDependency(item, source))
+  if (rule.any) return rule.any.some(item => matchDependency(item, source))
+  const value = source[rule.key]
+  if (rule.operator === 'truthy') return !!value
+  if (rule.operator === 'falsy') return !value
+  if (rule.operator === 'not_empty') return Array.isArray(value) ? value.length > 0 : value !== '' && value != null
+  if (rule.operator === 'empty') return Array.isArray(value) ? value.length === 0 : value === '' || value == null
+  if (rule.operator === 'eq') return value === rule.value
+  if (rule.operator === 'neq') return value !== rule.value
+  return rule.value === undefined || value === rule.value
+}
diff --git a/assets/admin/src/components/form/repeater-rows.js b/assets/admin/src/components/form/repeater-rows.js
new file mode 100644
index 00000000..35452631
--- /dev/null
+++ b/assets/admin/src/components/form/repeater-rows.js
@@ -0,0 +1,65 @@
+/**
+ * repeater / group 行的纯函数：新行默认值、行 ID、listPreview 摘要与预览。
+ * inline 与 list-modal 两种渲染共用。
+ */
+let rowIdCounter = 0
+
+export function createRepeaterRowId() {
+  return `rpt_${Date.now()}_${++rowIdCounter}`
+}
+
+export function createRepeaterRow(fields) {
+  const row = { _id: createRepeaterRowId() }
+  for (const field of (Array.isArray(fields) ? fields : [])) {
+    // UI-only chrome rows (notice / alert) are presentation only.
+    if (field.ui_only) continue
+    if (field.default !== undefined) {
+      row[field.key] = field.default
+    } else if (field.type === 'switch') {
+      row[field.key] = false
+    } else if (field.type === 'checkbox' || field.type === 'repeater') {
+      row[field.key] = []
+    } else {
+      row[field.key] = ''
+    }
+  }
+  return row
+}
+
+/** time/unit 形态的时长摘要：0 视为永久，其余按 day/month 补单位。 */
+function rowDuration(row, cfg) {
+  if (!cfg.descKey) return ''
+  const raw = row[cfg.descKey]
+  if (raw === '' || raw == null) return ''
+  const amount = Number(raw)
+  if (!Number.isFinite(amount)) return String(raw)
+  if (amount <= 0) return '永久'
+  if (!cfg.descUnitKey) return String(raw)
+  const unit = String(row[cfg.descUnitKey] || '')
+  if (unit === 'month') return `${amount} 个月`
+  if (unit === 'day') return `${amount} 天`
+  return String(raw)
+}
+
+/** 收起态标题行上的一行摘要，取自 listPreview 配置。 */
+export function repeaterRowSummary(row, cfg = {}) {
+  if (!row) return ''
+  const title = String(row[cfg.titleKey || 'title'] ?? '').trim()
+  const prefix = String(cfg.prefix || '')
+  if (title === '') return prefix
+  const duration = rowDuration(row, cfg)
+  return duration ? `${prefix}${title} · ${duration}` : `${prefix}${title}`
+}
+
+/** list-modal 卡片预览：图标 / 自定义图标 HTML / 图标类 / 标题 / 描述。 */
+export function repeaterRowPreview(row, cfg = {}) {
+  const read = (key) => String(row?.[key] || '').trim()
+  const desc = read(cfg.descKey || 'desc') || read(cfg.urlKey || 'url')
+  return {
+    icon: read(cfg.iconKey || 'icon'),
+    customIcon: read(cfg.customIconKey || 'custom_icon'),
+    iconClass: read(cfg.iconClassKey || 'icon_class'),
+    title: read(cfg.titleKey || 'title') || '未命名卡片',
+    desc: desc || '暂无描述',
+  }
+}
diff --git a/assets/admin/src/components/form/sortable-options.js b/assets/admin/src/components/form/sortable-options.js
new file mode 100644
index 00000000..4dd39e55
--- /dev/null
+++ b/assets/admin/src/components/form/sortable-options.js
@@ -0,0 +1,15 @@
+/**
+ * 所有后台 vuedraggable 列表共用的 Sortable 选项（v-bind 到 <draggable>）。
+ * 配套样式见 src/styles/sortable-list.css，拖拽手柄统一用 AksSortHandle。
+ */
+const prefersReducedMotion = typeof window !== 'undefined'
+  && typeof window.matchMedia === 'function'
+  && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+export const SORTABLE_LIST_ATTRS = Object.freeze({
+  handle: '.aksrt-sortable__handle',
+  ghostClass: 'aksrt-sortable__ghost',
+  chosenClass: 'aksrt-sortable__chosen',
+  dragClass: 'aksrt-sortable__drag',
+  animation: prefersReducedMotion ? 0 : 180,
+})
diff --git a/assets/admin/src/components/form/useFieldRemoteOptions.js b/assets/admin/src/components/form/useFieldRemoteOptions.js
new file mode 100644
index 00000000..9de2297e
--- /dev/null
+++ b/assets/admin/src/components/form/useFieldRemoteOptions.js
@@ -0,0 +1,120 @@
+import { onMounted, ref } from 'vue'
+import api from '@/api'
+
+/**
+ * AksField 的远程选项加载：async_select / taxonomy_select / user_select / page_select。
+ * 仅按 schema.type 在挂载时拉取对应数据源。
+ */
+export function useFieldRemoteOptions(props) {
+  const asyncOptions = ref([])
+  const asyncLoading = ref(false)
+  const taxonomyOptions = ref([])
+  const taxonomyLoading = ref(false)
+  const userOptions = ref([])
+  const userLoading = ref(false)
+  const pageOptions = ref([])
+  const pageLoading = ref(false)
+  let asyncTimer = null
+  let userTimer = null
+  let pageTimer = null
+
+  async function loadAsyncOptions(query = '') {
+    asyncLoading.value = true
+    try {
+      const selected = Array.isArray(props.modelValue) ? props.modelValue : (props.modelValue ? [props.modelValue] : [])
+      const response = await api.searchPageDisplayOptions(props.schema.source, query, query ? [] : selected)
+      asyncOptions.value = response?.data || []
+    } catch (error) {
+      asyncOptions.value = []
+    } finally {
+      asyncLoading.value = false
+    }
+  }
+
+  function handleAsyncSearch(query) {
+    clearTimeout(asyncTimer)
+    asyncTimer = setTimeout(() => loadAsyncOptions(query), 250)
+  }
+
+  async function loadTaxonomyTerms() {
+    if (!props.schema.taxonomy) return
+    taxonomyLoading.value = true
+    try {
+      const res = await api.getCategories(props.schema.taxonomy || 'category')
+      const items = res?.data || res || []
+      taxonomyOptions.value = (Array.isArray(items) ? items : []).map(t => ({
+        label: t.name + (t.count ? ' (' + t.count + ')' : ''),
+        value: t.term_id,
+      }))
+    } catch (e) {
+      console.warn('[AksField] taxonomy load failed:', e)
+      taxonomyOptions.value = []
+    } finally {
+      taxonomyLoading.value = false
+    }
+  }
+
+  async function loadUsers(query = '') {
+    userLoading.value = true
+    try {
+      const res = await api.searchUsers(query, 20)
+      const items = res?.data || res || []
+      userOptions.value = (Array.isArray(items) ? items : []).map(u => ({
+        label: u.display_name + ' (' + u.user_login + ')',
+        value: u.id,
+      }))
+    } catch (e) {
+      console.warn('[AksField] user load failed:', e)
+      userOptions.value = []
+    } finally {
+      userLoading.value = false
+    }
+  }
+
+  function handleUserSearch(query) {
+    clearTimeout(userTimer)
+    userTimer = setTimeout(() => loadUsers(query || ''), 300)
+  }
+
+  async function loadPages(query = '') {
+    pageLoading.value = true
+    try {
+      const selected = props.modelValue ? [props.modelValue] : []
+      const res = await api.searchPageDisplayOptions('pages', query, query ? [] : selected)
+      const items = res?.data || res || []
+      pageOptions.value = Array.isArray(items) ? items : []
+    } catch (e) {
+      console.warn('[AksField] page load failed:', e)
+      pageOptions.value = []
+    } finally {
+      pageLoading.value = false
+    }
+  }
+
+  function handlePageSearch(query) {
+    clearTimeout(pageTimer)
+    pageTimer = setTimeout(() => loadPages(query), 250)
+  }
+
+  onMounted(() => {
+    const type = props.schema.type
+    if (type === 'taxonomy_select') loadTaxonomyTerms()
+    if (type === 'user_select') loadUsers()
+    if (type === 'async_select') loadAsyncOptions()
+    if (type === 'page_select') loadPages()
+  })
+
+  return {
+    asyncOptions,
+    asyncLoading,
+    handleAsyncSearch,
+    taxonomyOptions,
+    taxonomyLoading,
+    userOptions,
+    userLoading,
+    handleUserSearch,
+    pageOptions,
+    pageLoading,
+    handlePageSearch,
+  }
+}
diff --git a/assets/admin/src/main.js b/assets/admin/src/main.js
index a8c872aa..ea7aa0a3 100644
--- a/assets/admin/src/main.js
+++ b/assets/admin/src/main.js
@@ -4,6 +4,7 @@ import NaiveUI from 'naive-ui'
 import App from './App.vue'
 import router from './router'
 import './style.css'
+import './styles/sortable-list.css'
 import { styleMountTarget } from './style-target'
 
 const app = createApp(App)
diff --git a/assets/admin/src/pages/content/FloatingButtonsSettings.vue b/assets/admin/src/pages/content/FloatingButtonsSettings.vue
index d07597e3..fb40f3d1 100644
--- a/assets/admin/src/pages/content/FloatingButtonsSettings.vue
+++ b/assets/admin/src/pages/content/FloatingButtonsSettings.vue
@@ -51,11 +51,9 @@
           <div class="float-settings__desc">设置并排序需要显示的按钮</div>
           <draggable
             v-model="form.items"
+            v-bind="SORTABLE_LIST_ATTRS"
             item-key="type"
-            handle=".float-btn-panel__handle"
-            ghost-class="float-settings__ghost"
-            animation="180"
-            class="float-settings__list"
+            class="aksrt-sortable"
           >
             <template #item="{ element, index }">
               <FloatBtnItemPanel :model-value="element" @update:model-value="updateItem(index, $event)" />
@@ -76,6 +74,7 @@ import draggable from 'vuedraggable'
 import api from '@/api'
 import PageHeader from '@/components/PageHeader.vue'
 import AksSaveBar from '@/components/form/AksSaveBar.vue'
+import { SORTABLE_LIST_ATTRS } from '@/components/form/sortable-options.js'
 import FloatBtnItemPanel from '@/components/floating/FloatBtnItemPanel.vue'
 import { defaultSettings, normalizeItems } from '@/components/floating/floating-defaults.js'
 
@@ -163,13 +162,13 @@ onMounted(loadSettings)
 
 .float-settings__desc {
   font-size: 12px;
-  color: var(--n-text-color-3, #999);
+  color: var(--aksrt-color-muted, #6F7A72);
 }
 
 .float-settings__label {
   margin-left: 12px;
   font-size: 13px;
-  color: var(--n-text-color-3, #999);
+  color: var(--aksrt-color-muted, #6F7A72);
 }
 
 .float-settings__section {
@@ -183,14 +182,4 @@ onMounted(loadSettings)
   font-weight: 600;
   font-size: 14px;
 }
-
-.float-settings__list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.float-settings__ghost {
-  opacity: 0.45;
-}
 </style>
diff --git a/assets/admin/src/pages/content/FooterTabbarSettings.vue b/assets/admin/src/pages/content/FooterTabbarSettings.vue
index 2bdcf9ce..7fed1ce1 100644
--- a/assets/admin/src/pages/content/FooterTabbarSettings.vue
+++ b/assets/admin/src/pages/content/FooterTabbarSettings.vue
@@ -61,42 +61,38 @@
         <draggable
           v-if="form.items.length"
           v-model="form.items"
+          v-bind="SORTABLE_LIST_ATTRS"
           item-key="id"
-          handle=".tabbar-sort__handle"
-          ghost-class="tabbar-sort__ghost"
-          animation="180"
-          class="tabbar-sort"
+          class="aksrt-sortable"
           @end="resetSortOrder"
         >
           <template #item="{ element, index }">
-            <div class="tabbar-sort__item">
-              <div class="tabbar-sort__main">
-                <button type="button" class="tabbar-sort__handle" aria-label="拖拽排序">
-                  <i class="fa fas fa-bars"></i>
-                </button>
-                <span class="tabbar-sort__icon">
+            <div class="aksrt-sortable__item">
+              <div class="aksrt-sortable__head">
+                <AksSortHandle />
+                <span class="aksrt-sortable__icon">
                   <IconValue v-if="element.icon" :value="element.icon" />
                 </span>
-                <div class="tabbar-sort__meta">
-                  <div class="tabbar-sort__title-row">
-                    <strong>{{ element.text || '按钮' }}</strong>
+                <div class="aksrt-sortable__main">
+                  <div class="aksrt-sortable__title-row">
+                    <span class="aksrt-sortable__title">{{ element.text || '按钮' }}</span>
                     <n-tag size="small" :bordered="false">{{ typeLabelMap[element.type] || element.type }}</n-tag>
                     <n-tag v-if="element.badge" size="small" type="error" :bordered="false">徽标 {{ element.badge }}</n-tag>
                     <n-tag v-if="element.type === 'home' && element.ontop" size="small" type="success" :bordered="false">返回顶部</n-tag>
                     <n-tag size="small" :type="element.enabled ? 'success' : 'default'" :bordered="false">{{ element.enabled ? '启用' : '禁用' }}</n-tag>
                   </div>
-                  <div class="tabbar-sort__desc">{{ getItemSummary(element) }}</div>
+                  <div class="aksrt-sortable__desc">{{ getItemSummary(element) }}</div>
+                </div>
+                <div class="aksrt-sortable__actions">
+                  <n-button size="tiny" quaternary type="primary" @click="editItem(index)">
+                    <template #icon><i class="fa fas fa-edit" style="font-size:12px;" /></template>
+                    编辑
+                  </n-button>
+                  <n-button size="tiny" quaternary type="error" @click="deleteItem(index)">
+                    <template #icon><i class="fa fas fa-trash-alt" style="font-size:12px;" /></template>
+                    删除
+                  </n-button>
                 </div>
-              </div>
-              <div class="tabbar-sort__actions">
-                <n-button size="tiny" quaternary type="primary" @click="editItem(index)">
-                  <template #icon><i class="fa fas fa-edit" style="font-size:12px;" /></template>
-                  编辑
-                </n-button>
-                <n-button size="tiny" quaternary type="error" @click="deleteItem(index)">
-                  <template #icon><i class="fa fas fa-trash-alt" style="font-size:12px;" /></template>
-                  删除
-                </n-button>
               </div>
             </div>
           </template>
@@ -216,22 +212,21 @@
           <div v-if="editingItem.add_items.length" class="add-items-editor__list">
             <draggable
               v-model="editingItem.add_items"
+              v-bind="SORTABLE_LIST_ATTRS"
               item-key="id"
-              handle=".add-items-editor__drag"
-              ghost-class="add-items-editor__ghost"
-              animation="180"
+              class="aksrt-sortable aksrt-sortable--compact"
             >
               <template #item="{ element, index: subIndex }">
-                <div class="add-items-editor__row">
-                  <button type="button" class="add-items-editor__drag" aria-label="拖拽排序">
-                    <i class="fa fas fa-bars"></i>
-                  </button>
-                  <n-input v-model:value="element.label" placeholder="名称，例如：写文章" />
-                  <FaIconPicker v-model="element.icon" placeholder="选择图标" />
-                  <n-input v-model:value="element.url" placeholder="链接，例如：/wp-admin/post-new.php" />
-                  <n-button quaternary type="error" @click="removeAddItem(subIndex)">
-                    <template #icon><i class="fa fas fa-trash-alt" /></template>
-                  </n-button>
+                <div class="aksrt-sortable__item">
+                  <div class="aksrt-sortable__head add-items-editor__row">
+                    <AksSortHandle />
+                    <n-input v-model:value="element.label" placeholder="名称，例如：写文章" />
+                    <FaIconPicker v-model="element.icon" placeholder="选择图标" />
+                    <n-input v-model:value="element.url" placeholder="链接，例如：/wp-admin/post-new.php" />
+                    <n-button quaternary type="error" aria-label="删除子项" @click="removeAddItem(subIndex)">
+                      <template #icon><i class="fa fas fa-trash-alt" /></template>
+                    </n-button>
+                  </div>
                 </div>
               </template>
             </draggable>
@@ -267,6 +262,8 @@ import api from '@/api'
 import PageHeader from '@/components/PageHeader.vue'
 import FaIconPicker from '@/components/form/FaIconPicker.vue'
 import IconValue from '@/components/form/IconValue.vue'
+import AksSortHandle from '@/components/form/AksSortHandle.vue'
+import { SORTABLE_LIST_ATTRS } from '@/components/form/sortable-options.js'
 
 const message = useMessage()
 const dialog = useDialog()
@@ -609,7 +606,7 @@ onMounted(loadSettings)
 }
 
 .icon-preview-row a {
-  color: var(--n-primary-color);
+  color: var(--aksrt-color-primary, #18A058);
   text-decoration: none;
 }
 
@@ -618,18 +615,12 @@ onMounted(loadSettings)
 }
 
 .muted-text {
-  color: #999;
+  color: var(--aksrt-color-muted, #6F7A72);
   font-size: 12px;
 }
 
-.aksrt-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
 .section-desc {
-  color: var(--n-text-color-3);
+  color: var(--aksrt-color-muted, #6F7A72);
   font-size: 13px;
   margin: 0 0 16px;
 }
@@ -659,127 +650,19 @@ onMounted(loadSettings)
 
 .add-items-editor__presets-label {
   font-size: 12px;
-  color: var(--n-text-color-3, #999);
-}
-
-.add-items-editor__list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  color: var(--aksrt-color-muted, #6F7A72);
 }
 
 .add-items-editor__row {
   display: grid;
-  grid-template-columns: 32px 1fr 1fr 1.2fr 40px;
+  grid-template-columns: 28px 1fr 1fr 1.2fr 34px;
   gap: 8px;
   align-items: center;
 }
 
-.add-items-editor__drag {
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: 10px;
-  background: #f3f5f7;
-  color: #6b7280;
-  cursor: grab;
-}
-
-.add-items-editor__ghost {
-  opacity: 0.5;
-}
-
-.tabbar-sort {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.tabbar-sort__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 14px 16px;
-  border: 1px solid var(--n-border-color);
-  border-radius: 14px;
-  background: #fff;
-}
-
-.tabbar-sort__main {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-}
-
-.tabbar-sort__handle {
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: 10px;
-  background: #f3f5f7;
-  color: #6b7280;
-  cursor: grab;
-}
-
-.tabbar-sort__icon {
-  width: 38px;
-  height: 38px;
-  border-radius: 12px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(24, 160, 88, 0.12);
-  color: var(--aksrt-color-primary);
-  font-size: 18px;
-  flex: 0 0 auto;
-}
-
-.tabbar-sort__meta {
-  min-width: 0;
-  flex: 1;
-}
-
-.tabbar-sort__title-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.tabbar-sort__desc {
-  color: var(--n-text-color-3);
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tabbar-sort__actions {
-  display: flex;
-  gap: 6px;
-  flex: 0 0 auto;
-}
-
-.tabbar-sort__ghost {
-  opacity: 0.5;
-}
-
 @media (max-width: 1023px) {
-  .tabbar-sort__item {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .tabbar-sort__actions {
-    justify-content: flex-end;
-  }
-
   .add-items-editor__row {
-    grid-template-columns: 32px 1fr;
+    grid-template-columns: 28px 1fr;
   }
 }
 </style>
diff --git a/assets/admin/src/pages/users/partials/ticket/TicketPrereplyPanel.vue b/assets/admin/src/pages/users/partials/ticket/TicketPrereplyPanel.vue
index 05a1cb38..a1409533 100644
--- a/assets/admin/src/pages/users/partials/ticket/TicketPrereplyPanel.vue
+++ b/assets/admin/src/pages/users/partials/ticket/TicketPrereplyPanel.vue
@@ -19,20 +19,23 @@
     <draggable
       v-else
       v-model="rows"
+      v-bind="SORTABLE_LIST_ATTRS"
       item-key="id"
-      handle=".aksrt-ticket-prereply__handle"
-      :animation="160"
-      class="aksrt-ticket-prereply"
+      class="aksrt-sortable"
     >
       <template #item="{ element, index }">
-        <div class="aksrt-ticket-prereply__row">
-          <span class="aksrt-ticket-prereply__handle" title="拖动排序">⋮⋮</span>
-          <span class="aksrt-ticket-prereply__index">{{ index + 1 }}</span>
-          <span class="aksrt-ticket-prereply__content">{{ element.content }}</span>
-          <n-space size="small">
-            <n-button size="tiny" type="primary" quaternary @click="openEdit(element)">编辑</n-button>
-            <n-button size="tiny" type="error" quaternary @click="handleDelete(element)">删除</n-button>
-          </n-space>
+        <div class="aksrt-sortable__item">
+          <div class="aksrt-sortable__head">
+            <AksSortHandle />
+            <span class="aksrt-sortable__index">{{ index + 1 }}</span>
+            <div class="aksrt-sortable__main">
+              <span class="aksrt-ticket-prereply__content">{{ element.content }}</span>
+            </div>
+            <div class="aksrt-sortable__actions">
+              <n-button size="tiny" type="primary" quaternary @click="openEdit(element)">编辑</n-button>
+              <n-button size="tiny" type="error" quaternary @click="handleDelete(element)">删除</n-button>
+            </div>
+          </div>
         </div>
       </template>
     </draggable>
@@ -71,6 +74,8 @@ import { computed, onMounted, ref } from 'vue'
 import { NButton, NSpace, useDialog, useMessage } from 'naive-ui'
 import draggable from 'vuedraggable'
 import api from '@/api'
+import AksSortHandle from '@/components/form/AksSortHandle.vue'
+import { SORTABLE_LIST_ATTRS } from '@/components/form/sortable-options.js'
 
 const message = useMessage()
 const dialog = useDialog()
@@ -188,38 +193,11 @@ defineExpose({ reload: load })
 </script>
 
 <style scoped>
-.aksrt-ticket-prereply {
-  display: grid;
-  gap: 8px;
-}
-
-.aksrt-ticket-prereply__row {
-  display: grid;
-  grid-template-columns: 20px 28px 1fr auto;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: 1px var(--n-border-color, #efeff5) solid;
-  border-radius: 8px;
-  background: var(--n-color, #fff);
-}
-
-.aksrt-ticket-prereply__handle {
-  color: var(--aksrt-color-muted);
-  cursor: grab;
-  user-select: none;
-}
-
-.aksrt-ticket-prereply__index {
-  color: var(--aksrt-color-muted);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
 .aksrt-ticket-prereply__content {
-  white-space: pre-wrap;
-  word-break: break-word;
+  color: var(--aksrt-color-text, #1F2923);
   font-size: 13px;
   line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 </style>
diff --git a/assets/admin/src/style.css b/assets/admin/src/style.css
index 7ee331e0..3368756b 100644
--- a/assets/admin/src/style.css
+++ b/assets/admin/src/style.css
@@ -341,6 +341,16 @@
   max-width: 520px;
 }
 
+/* 弹层底部操作栏；弹层 teleport 到 #aksrt-admin-app 之外，token 带回退值。 */
+.aksrt-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--aksrt-color-border, #E2E8E3);
+}
+
 @media (max-width: 960px) {
   #aksrt-admin-app .aksrt-form-renderer__save-bar {
     right: 0;
diff --git a/assets/admin/src/styles/sortable-list.css b/assets/admin/src/styles/sortable-list.css
new file mode 100644
index 00000000..0facdb62
--- /dev/null
+++ b/assets/admin/src/styles/sortable-list.css
@@ -0,0 +1,236 @@
+/*
+ * 共享拖拽排序列表（vuedraggable）。
+ *
+ * 后台所有可排序列表（schema 排序字段 / 重复器 / 启用-停用排序器 / 悬浮按钮 /
+ * 底部 Tab / 工单预设回复）统一使用这套类名，并配合 SORTABLE_LIST_ATTRS：
+ *
+ *   .aksrt-sortable                 列表容器（draggable 根节点）
+ *     .aksrt-sortable__item         卡片行
+ *       .aksrt-sortable__head       行头：handle / index / icon / main / actions
+ *       .aksrt-sortable__body       可选：展开后的字段区
+ *
+ * 弹窗内容会被 teleport 到 #aksrt-admin-app 之外，因此 token 都带回退值。
+ */
+.aksrt-sortable {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.aksrt-sortable--compact {
+  gap: 6px;
+}
+
+.aksrt-sortable__item {
+  border: 1px solid var(--aksrt-color-border, #E2E8E3);
+  border-radius: 8px;
+  background: var(--aksrt-color-surface, #FFFFFF);
+  box-shadow: var(--aksrt-shadow-card, 0 1px 2px rgba(31, 41, 35, .04));
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+
+.aksrt-sortable__item:hover {
+  border-color: var(--aksrt-color-border-strong, #CCD7CE);
+}
+
+.aksrt-sortable__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  padding: 8px 12px 8px 8px;
+}
+
+.aksrt-sortable--compact .aksrt-sortable__head {
+  gap: 8px;
+  min-height: 38px;
+  padding: 4px 10px 4px 4px;
+}
+
+.aksrt-sortable__head.is-clickable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.aksrt-sortable__head.is-clickable:hover .aksrt-sortable__title,
+.aksrt-sortable__head.is-clickable:hover .aksrt-sortable__toggle {
+  color: var(--aksrt-color-primary, #18A058);
+}
+
+.aksrt-sortable__handle {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--aksrt-color-muted, #6F7A72);
+  font-size: 13px;
+  cursor: grab;
+  touch-action: none;
+  transition: color .15s ease, background-color .15s ease;
+}
+
+.aksrt-sortable__handle:hover,
+.aksrt-sortable__handle:focus-visible {
+  outline: none;
+  background: var(--aksrt-color-primary-soft, #EAF7EF);
+  color: var(--aksrt-color-primary, #18A058);
+}
+
+.aksrt-sortable__handle:active {
+  cursor: grabbing;
+}
+
+.aksrt-sortable__index {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 11px;
+  background: var(--aksrt-color-canvas, #F5F7F6);
+  color: var(--aksrt-color-muted, #6F7A72);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.aksrt-sortable__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--aksrt-color-primary-soft, #EAF7EF);
+  color: var(--aksrt-color-primary, #18A058);
+  font-size: 16px;
+}
+
+.aksrt-sortable__icon svg,
+.aksrt-sortable__icon img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
+.aksrt-sortable__main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+.aksrt-sortable__title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.aksrt-sortable__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--aksrt-color-text, #1F2923);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color .15s ease;
+}
+
+.aksrt-sortable__desc {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--aksrt-color-muted, #6F7A72);
+  font-size: 12px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aksrt-sortable__actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.aksrt-sortable__toggle {
+  flex: 0 0 auto;
+  color: var(--aksrt-color-muted, #6F7A72);
+  font-size: 12px;
+  transition: color .15s ease;
+}
+
+.aksrt-sortable__body {
+  padding: 14px 16px 16px;
+  border-top: 1px solid var(--aksrt-color-border, #E2E8E3);
+}
+
+/* 拖拽中：原位置留下虚线占位，被拖动的卡片浮起。 */
+.aksrt-sortable__chosen {
+  border-color: var(--aksrt-color-primary, #18A058);
+}
+
+.aksrt-sortable__drag {
+  box-shadow: var(--aksrt-shadow-floating, 0 12px 32px rgba(31, 41, 35, .12));
+}
+
+.aksrt-sortable__ghost {
+  border-style: dashed;
+  border-color: var(--aksrt-color-primary, #18A058);
+  background: var(--aksrt-color-primary-soft, #EAF7EF);
+  box-shadow: none;
+}
+
+.aksrt-sortable__ghost > * {
+  visibility: hidden;
+}
+
+.aksrt-sortable__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 20px 12px;
+  border: 1px dashed var(--aksrt-color-border-strong, #CCD7CE);
+  border-radius: 8px;
+  background: var(--aksrt-color-canvas, #F5F7F6);
+  color: var(--aksrt-color-muted, #6F7A72);
+  font-size: 13px;
+}
+
+@media (max-width: 640px) {
+  .aksrt-sortable__head {
+    flex-wrap: wrap;
+  }
+
+  .aksrt-sortable__main {
+    flex-basis: 160px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aksrt-sortable__item,
+  .aksrt-sortable__handle,
+  .aksrt-sortable__title,
+  .aksrt-sortable__toggle {
+    transition: none;
+  }
+}