diff --git a/apps/frontend/src/views/admin/inventory/AdminInventoryView.css b/apps/frontend/src/views/admin/inventory/AdminInventoryView.css
deleted file mode 100644
index b240885a..00000000
--- a/apps/frontend/src/views/admin/inventory/AdminInventoryView.css
+++ /dev/null
@@ -1,364 +0,0 @@
-@import '../../../styles/admin-list-pages.css';
-
-.form-grid {
-  display: grid;
-  grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
-  gap: var(--space-3);
-}
-
-.sku-input-wrap {
-  display: grid;
-  min-width: 0;
-}
-
-.native-input {
-  width: 100%;
-  min-width: 0;
-  min-height: 40px;
-  padding: 0 14px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-default);
-  background: rgba(255, 255, 255, 0.74);
-  color: var(--text-primary);
-  font-size: var(--text-sm);
-  outline: none;
-  transition:
-    border-color 0.16s ease,
-    box-shadow 0.16s ease;
-}
-
-.native-input:focus {
-  border-color: rgba(37, 89, 167, 0.38);
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 0 3px rgba(37, 89, 167, 0.08);
-}
-
-.single-row,
-.action-row {
-  display: flex;
-  gap: var(--space-3);
-  align-items: center;
-  margin-top: 14px;
-}
-.single-row :deep(.el-input) {
-  min-width: 0;
-}
-
-.helper-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--space-3);
-  margin-top: 14px;
-}
-
-.helper-item {
-  display: grid;
-  gap: 6px;
-  padding: 12px 14px;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  border-radius: var(--radius-md);
-  background: rgba(248, 250, 252, 0.72);
-}
-
-.helper-title {
-  color: #2559a7;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-.helper-copy {
-  min-width: 0;
-  color: #334155;
-  line-height: 1.6;
-  word-break: break-word;
-}
-
-.sku-helper-bar {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-3);
-  align-items: center;
-  margin-top: var(--space-3);
-}
-.helper-text {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  margin: 0;
-}
-
-.sku-chip-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: var(--space-3);
-}
-
-.sku-chip {
-  display: inline-grid;
-  gap: 4px;
-  max-width: 100%;
-  padding: 10px 14px;
-  border-radius: var(--radius-md);
-  border: 1px solid rgba(86, 108, 138, 0.16);
-  background: rgba(248, 250, 252, 0.78);
-  color: var(--text-primary);
-  cursor: pointer;
-  transition:
-    transform 0.16s ease,
-    border-color 0.16s ease,
-    box-shadow 0.16s ease;
-}
-
-.sku-chip:hover {
-  transform: translateY(-1px);
-  border-color: rgba(37, 89, 167, 0.26);
-  box-shadow: 0 12px 24px rgba(37, 89, 167, 0.08);
-}
-.sku-chip-title {
-  min-width: 0;
-  font-weight: 700;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.sku-chip-meta {
-  min-width: 0;
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--space-3);
-  margin-bottom: var(--space-4);
-}
-
-.stat-card {
-  min-width: 0;
-  padding: 14px 16px;
-  border: 1px solid rgba(148, 163, 184, 0.16);
-  border-radius: var(--radius-md);
-  background: rgba(248, 250, 252, 0.72);
-}
-.stat-label {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-}
-.stat-value {
-  font-size: 30px;
-  line-height: 1;
-  color: var(--text-primary);
-  display: block;
-  margin-top: var(--space-2);
-}
-.stat-meta {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  display: block;
-  margin-top: var(--space-1);
-}
-
-.pool-section {
-  margin-bottom: 18px;
-}
-.pool-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-3);
-}
-
-.pool-card {
-  display: grid;
-  gap: var(--space-3);
-  padding: var(--space-4);
-  border-radius: var(--radius-md);
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  background: rgba(248, 250, 252, 0.68);
-}
-
-.pool-topline {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-3);
-  align-items: flex-start;
-}
-.pool-title-block {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-.pool-title {
-  min-width: 0;
-  margin: 0;
-  color: var(--text-primary);
-  font-size: var(--text-base);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.pool-subtitle {
-  min-width: 0;
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.pool-total {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  min-height: 30px;
-  padding: 0 10px;
-  border-radius: var(--radius-full);
-  background: rgba(37, 89, 167, 0.08);
-  border: 1px solid rgba(37, 89, 167, 0.12);
-  color: #2559a7;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-.pool-stats {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-.pool-stat {
-  display: inline-flex;
-  align-items: center;
-  min-height: 30px;
-  padding: 0 10px;
-  border-radius: var(--radius-full);
-  background: rgba(37, 89, 167, 0.08);
-  color: #1d4f91;
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-.pool-meta {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  word-break: break-word;
-}
-.pool-suggestion {
-  margin: 0;
-  line-height: 1.6;
-  color: var(--text-secondary);
-  font-size: var(--text-sm);
-}
-.pool-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.table-toolbar {
-  margin-bottom: var(--space-2);
-  padding-top: var(--space-2);
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  line-height: 1.6;
-  word-break: break-word;
-}
-
-.item-cell,
-.sku-cell,
-.info-cell {
-  display: grid;
-  gap: 6px;
-}
-
-.item-title,
-.sku-title,
-.link-title {
-  color: var(--text-primary);
-  font-weight: 700;
-}
-
-.item-value {
-  display: inline-flex;
-  max-width: 100%;
-  width: fit-content;
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
-  background: rgba(15, 23, 42, 0.06);
-  color: #0f172a;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.info-subline,
-.sku-subline,
-.link-subline,
-.time-line,
-.status-copy {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  line-height: 1.5;
-}
-
-.sku-raw {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-}
-
-.status-stack,
-.action-stack {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-  align-items: center;
-}
-.action-stack {
-  justify-content: center;
-}
-
-.status-warning {
-  color: #b54708;
-  font-size: var(--text-xs);
-}
-
-@media (max-width: 1200px) {
-  .form-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .summary-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 900px) {
-  .form-grid,
-  .summary-grid,
-  .pool-grid,
-  .helper-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .card-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-@media (max-width: 640px) {
-  .form-grid,
-  .summary-grid,
-  .pool-grid,
-  .helper-grid {
-    grid-template-columns: 1fr;
-  }
-  .single-row,
-  .action-row,
-  .sku-helper-bar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  .status-stack,
-  .action-stack {
-    justify-content: flex-start;
-  }
-}
diff --git a/apps/frontend/src/views/admin/inventory/AdminInventoryView.vue b/apps/frontend/src/views/admin/inventory/AdminInventoryView.vue
index 68f0511c..8d8d7de6 100644
--- a/apps/frontend/src/views/admin/inventory/AdminInventoryView.vue
+++ b/apps/frontend/src/views/admin/inventory/AdminInventoryView.vue
@@ -1,407 +1,58 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-
 import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
-import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
-import { showConfirm, showError, showSuccess } from '@/lib/feedback'
-import {
-  createAdminInventoryItem,
-  fetchAdminInventoryItems,
-  fetchAdminInventorySkuSuggestions,
-  importAdminInventoryItems,
-  invalidateAdminInventoryItem,
-  releaseAdminInventoryItem,
-} from '@/services/admin'
-import type {
-  AdminInventoryItemListItem,
-  AdminInventorySkuSuggestion,
-  AdminPagination,
-} from '@/types/admin'
-import { hasAdminRole } from '@/utils/admin-auth'
-import { formatAdminDateTime } from '@/utils/admin-time'
-import {
-  adminInventoryCredentialTypeOptions,
-  adminInventoryStatusOptions,
-} from '@/utils/admin-options'
 
-type InventoryImportRow = {
-  skuCode: string
-  credentialType: string
-  batchNo: string
-  inventoryGroupCode: string
-  displayValue: string
-}
+import AdminInventoryEntryCard from './components/AdminInventoryEntryCard.vue'
+import AdminInventoryFilterCard from './components/AdminInventoryFilterCard.vue'
+import AdminInventoryPoolGrid from './components/AdminInventoryPoolGrid.vue'
+import AdminInventoryTable from './components/AdminInventoryTable.vue'
+import { useAdminInventory } from './composables/useAdminInventory'
 
-type InventoryPoolGroup = {
-  key: string
-  skuCode: string
-  credentialType: string
-  inventoryGroupCode: string
-  totalCount: number
-  availableCount: number
-  reservedCount: number
-  deliveredCount: number
-  invalidCount: number
-  latestUpdatedAt: string
-  batchSummary: string
-}
-
-const loading = ref(true)
-const importing = ref(false)
-const creating = ref(false)
-const actionLoadingId = ref<number | null>(null)
-const errorMessage = ref('')
-
-const filterSkuCode = ref('')
-const filterCredentialType = ref('')
-const filterStatus = ref('')
-const filterBatchNo = ref('')
-const filterInventoryGroupCode = ref('')
-
-const entrySkuCode = ref('')
-const entryCredentialType = ref('tencent_code')
-const entryBatchNo = ref('')
-const entryInventoryGroupCode = ref('')
-const singleDisplayValue = ref('')
-const bulkText = ref('')
-const skuSuggestionsLoading = ref(false)
-const inventorySkuSuggestions = ref<AdminInventorySkuSuggestion[]>([])
-
-const items = ref<AdminInventoryItemListItem[]>([])
-const pagination = ref<AdminPagination>({
-  page: 1,
-  pageSize: 20,
-  total: 0,
-})
-
-const pageSummary = computed(() => {
-  const availableCount = items.value.filter((item) => item.status === 'available').length
-  const reservedCount = items.value.filter((item) => item.status === 'reserved').length
-  const deliveredCount = items.value.filter((item) => item.status === 'consumed').length
-  const invalidCount = items.value.filter((item) => item.status === 'invalid').length
-  return { availableCount, reservedCount, deliveredCount, invalidCount }
-})
-
-const inventoryGroups = computed<InventoryPoolGroup[]>(() => {
-  const groupMap = new Map<
-    string,
-    {
-      skuCode: string
-      credentialType: string
-      inventoryGroupCode: string
-      totalCount: number
-      availableCount: number
-      reservedCount: number
-      deliveredCount: number
-      invalidCount: number
-      latestUpdatedAt: string
-      batches: Set<string>
-    }
-  >()
-
-  for (const item of items.value) {
-    const key = `${item.skuCode}::${item.credentialType || 'tencent_code'}::${item.inventoryGroupCode || ''}`
-    const current = groupMap.get(key) || {
-      skuCode: item.skuCode,
-      credentialType: item.credentialType || 'tencent_code',
-      inventoryGroupCode: item.inventoryGroupCode || '',
-      totalCount: 0,
-      availableCount: 0,
-      reservedCount: 0,
-      deliveredCount: 0,
-      invalidCount: 0,
-      latestUpdatedAt: item.updatedAt,
-      batches: new Set<string>(),
-    }
-
-    current.totalCount += 1
-    if (item.status === 'available') current.availableCount += 1
-    else if (item.status === 'reserved') current.reservedCount += 1
-    else if (item.status === 'consumed') current.deliveredCount += 1
-    else if (item.status === 'invalid') current.invalidCount += 1
-
-    if (item.batchNo) current.batches.add(item.batchNo)
-    if (String(item.updatedAt || '') > String(current.latestUpdatedAt || ''))
-      current.latestUpdatedAt = item.updatedAt
-    groupMap.set(key, current)
-  }
-
-  return Array.from(groupMap.entries())
-    .map(([key, value]) => ({
-      key,
-      skuCode: value.skuCode,
-      credentialType: value.credentialType,
-      inventoryGroupCode: value.inventoryGroupCode,
-      totalCount: value.totalCount,
-      availableCount: value.availableCount,
-      reservedCount: value.reservedCount,
-      deliveredCount: value.deliveredCount,
-      invalidCount: value.invalidCount,
-      latestUpdatedAt: value.latestUpdatedAt,
-      batchSummary:
-        value.batches.size > 0 ? Array.from(value.batches).slice(0, 3).join(' / ') : '未分批',
-    }))
-    .sort((left, right) => {
-      if (right.availableCount !== left.availableCount)
-        return right.availableCount - left.availableCount
-      if (right.reservedCount !== left.reservedCount)
-        return right.reservedCount - left.reservedCount
-      return left.skuCode.localeCompare(right.skuCode)
-    })
-})
-
-const pageOverview = computed(() => ({
-  skuCount: new Set(items.value.map((item) => item.skuCode)).size,
-  groupCount: inventoryGroups.value.length,
-}))
-
-const entrySkuSuggestions = computed(() => {
-  const keyword = entrySkuCode.value.trim().toLowerCase()
-  const suggestions = inventorySkuSuggestions.value.filter(
-    (item) => item.credentialType === entryCredentialType.value,
-  )
-  if (!keyword) return suggestions.slice(0, 12)
-  return suggestions.filter((item) => item.skuCode.toLowerCase().includes(keyword)).slice(0, 12)
-})
-
-function getCredentialTypeLabel(value: string) {
-  const normalized = String(value || '').trim()
-  const option = adminInventoryCredentialTypeOptions.find((item) => item.value === normalized)
-  return option?.label || normalized || '-'
-}
-
-function getCredentialTypeHint(value: string) {
-  const normalized = String(value || '').trim()
-  if (normalized === 'tencent_code')
-    return '当前腾讯自动领取链路会优先预占这一类兑换码，三角洲行动这类场景就使用这个类型。内部 SKU 支持中文、英文和数字混用。'
-  if (normalized === 'card_password') return '适合卡号 / 卡密一体的库存项。'
-  if (normalized === 'account_password') return '适合账号密码、账号令牌等组合凭据。'
-  if (normalized === 'activation_link') return '适合直接发链接的激活类库存。'
-  if (normalized === 'text_credential') return '适合任意纯文本凭据。'
-  return '库存预占时会按凭据类型与内部履约 SKU 一起匹配。'
-}
-
-function getSkuNamingHint() {
-  if (entrySkuSuggestions.value.length > 0)
-    return `当前凭据类型下已有 ${entrySkuSuggestions.value.length} 个可复用的内部 SKU，也可以直接输入新的中文或英文名称。`
-  return '内部 SKU 支持中文、英文、数字和常见连接符。建议同一类商品长期使用同一个命名，方便共用库存池。'
-}
-
-function formatInventoryStatus(item: AdminInventoryItemListItem) {
-  if (item.status === 'consumed') return '已完成发放'
-  if (item.status === 'reserved') return '已被任务预占'
-  if (item.status === 'invalid') return '已手动作废'
-  return '可参与后续自动分配'
-}
-
-function getGroupSuggestion(group: InventoryPoolGroup) {
-  if (group.availableCount > 0)
-    return `当前还有 ${group.availableCount} 条可直接分配的库存，可以继续承接订单。`
-  if (group.reservedCount > 0)
-    return `当前没有可用库存，但有 ${group.reservedCount} 条正在被任务预占，建议优先检查任务进度。`
-  if (group.deliveredCount > 0 && group.invalidCount === 0)
-    return '当前页看到的库存都已经发放完成，若继续售卖需要补新的库存项。'
-  if (group.invalidCount > 0 && group.totalCount === group.invalidCount)
-    return '当前页这组库存都已作废，建议重新补充可用库存。'
-  return '当前页没有可立即分配的库存，建议补库存或检查对应履约任务。'
-}
-
-function useGroupAsFilter(group: InventoryPoolGroup) {
-  filterSkuCode.value = group.skuCode
-  filterCredentialType.value = group.credentialType
-  filterInventoryGroupCode.value = group.inventoryGroupCode
-  void loadInventoryItems(1)
-}
-
-function useGroupAsEntry(group: InventoryPoolGroup) {
-  entrySkuCode.value = group.skuCode
-  entryCredentialType.value = group.credentialType
-  entryInventoryGroupCode.value = group.inventoryGroupCode
-  if (group.batchSummary !== '未分批' && !group.batchSummary.includes(' / '))
-    entryBatchNo.value = group.batchSummary
-  showSuccess(
-    `已把 ${group.skuCode} / ${group.credentialType} / ${group.inventoryGroupCode || '未分组'} 填入入库表单`,
-  )
-}
-
-function applySkuSuggestion(skuCode: string) {
-  entrySkuCode.value = String(skuCode || '').trim()
-}
-
-function buildImportRows() {
-  const lines = bulkText.value
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean)
-  const rows: InventoryImportRow[] = []
-  const defaultSkuCode = entrySkuCode.value.trim()
-  const defaultCredentialType = entryCredentialType.value.trim() || 'tencent_code'
-  const defaultBatchNo = entryBatchNo.value.trim()
-
-  for (let index = 0; index < lines.length; index += 1) {
-    const line = lines[index]
-    if (line.includes('|')) {
-      const parts = line.split('|').map((part) => part.trim())
-      if (parts.length !== 4 && parts.length !== 5)
-        throw new Error(
-          `第 ${index + 1} 行格式不正确，请使用 内部SKU|凭据类型|批次号|库存组|凭据内容`,
-        )
-      const [skuCode, credentialType, batchNo, inventoryGroupCode, displayValue] =
-        parts.length === 5 ? parts : [parts[0], parts[1], parts[2], '', parts[3]]
-      if (!skuCode || !displayValue) throw new Error(`第 ${index + 1} 行缺少内部 SKU 或凭据内容`)
-      rows.push({
-        skuCode,
-        credentialType: credentialType || defaultCredentialType,
-        batchNo,
-        inventoryGroupCode: inventoryGroupCode || entryInventoryGroupCode.value.trim(),
-        displayValue,
-      })
-      continue
-    }
-    if (!defaultSkuCode)
-      throw new Error('存在未带内部 SKU 的行，请先填写默认内部履约 SKU，或改用四列导入格式')
-    rows.push({
-      skuCode: defaultSkuCode,
-      credentialType: defaultCredentialType,
-      batchNo: defaultBatchNo,
-      inventoryGroupCode: entryInventoryGroupCode.value.trim(),
-      displayValue: line,
-    })
-  }
-  return rows
-}
-
-async function loadInventoryItems(page = pagination.value.page) {
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    const response = await fetchAdminInventoryItems({
-      page,
-      pageSize: pagination.value.pageSize,
-      skuCode: filterSkuCode.value.trim(),
-      credentialType: filterCredentialType.value.trim(),
-      status: filterStatus.value.trim(),
-      batchNo: filterBatchNo.value.trim(),
-      inventoryGroupCode: filterInventoryGroupCode.value.trim(),
-    })
-    items.value = response.data.items
-    pagination.value = response.data.pagination
-  } catch (error) {
-    errorMessage.value = error instanceof Error ? error.message : '读取库存列表失败'
-  } finally {
-    loading.value = false
-  }
-}
-
-async function loadInventorySkuSuggestions() {
-  skuSuggestionsLoading.value = true
-  try {
-    const response = await fetchAdminInventorySkuSuggestions({
-      credentialType: entryCredentialType.value.trim() || 'tencent_code',
-      inventoryGroupCode: entryInventoryGroupCode.value.trim(),
-      limit: 50,
-    })
-    inventorySkuSuggestions.value = response.data.items
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '读取内部 SKU 建议失败')
-  } finally {
-    skuSuggestionsLoading.value = false
-  }
-}
-
-function resetFilters() {
-  filterSkuCode.value = ''
-  filterCredentialType.value = ''
-  filterStatus.value = ''
-  filterBatchNo.value = ''
-  filterInventoryGroupCode.value = ''
-  void loadInventoryItems(1)
-}
-
-async function submitCreate() {
-  if (!entrySkuCode.value.trim() || !singleDisplayValue.value.trim()) {
-    showError('请先填写内部履约 SKU 和凭据内容')
-    return
-  }
-  creating.value = true
-  try {
-    await createAdminInventoryItem({
-      skuCode: entrySkuCode.value.trim(),
-      credentialType: entryCredentialType.value.trim() || 'tencent_code',
-      batchNo: entryBatchNo.value.trim(),
-      inventoryGroupCode: entryInventoryGroupCode.value.trim(),
-      displayValue: singleDisplayValue.value.trim(),
-    })
-    showSuccess('库存项已新增')
-    singleDisplayValue.value = ''
-    await loadInventoryItems(1)
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '新增库存项失败')
-  } finally {
-    creating.value = false
-  }
-}
-
-async function submitImport() {
-  const rawLines = bulkText.value
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean)
-  if (rawLines.length === 0) {
-    showError('请至少输入一条待导入库存')
-    return
-  }
-  importing.value = true
-  try {
-    const rows = buildImportRows()
-    const response = await importAdminInventoryItems({ rows })
-    showSuccess(`导入完成，新增 ${response.data.created} 条，重复 ${response.data.duplicated} 条`)
-    bulkText.value = ''
-    await loadInventoryItems(1)
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '导入失败')
-  } finally {
-    importing.value = false
-  }
-}
-
-async function runRowAction(
-  inventoryItemId: number,
-  action: () => Promise<unknown>,
-  successMessage: string,
-  confirmText: string,
-) {
-  try {
-    await showConfirm(confirmText, '确认操作', {
-      type: 'warning',
-      confirmButtonText: '继续执行',
-      cancelButtonText: '取消',
-    })
-  } catch {
-    return
-  }
-  actionLoadingId.value = inventoryItemId
-  try {
-    await action()
-    showSuccess(successMessage)
-    await loadInventoryItems()
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '操作失败')
-  } finally {
-    actionLoadingId.value = null
-  }
-}
-
-watch(entryCredentialType, () => {
-  void loadInventorySkuSuggestions()
-})
-watch(entryInventoryGroupCode, () => {
-  void loadInventorySkuSuggestions()
-})
-
-onMounted(async () => {
-  await Promise.all([loadInventoryItems(), loadInventorySkuSuggestions()])
-})
+const {
+  loading,
+  importing,
+  creating,
+  actionLoadingId,
+  errorMessage,
+  items,
+  pagination,
+  pageSummary,
+  pageOverview,
+  inventoryGroups,
+  // filter
+  filterSkuCode,
+  filterCredentialType,
+  filterStatus,
+  filterBatchNo,
+  filterInventoryGroupCode,
+  // entry
+  entrySkuCode,
+  entryCredentialType,
+  entryBatchNo,
+  entryInventoryGroupCode,
+  singleDisplayValue,
+  bulkText,
+  skuSuggestionsLoading,
+  inventorySkuSuggestions,
+  entrySkuSuggestions,
+  // actions
+  loadInventoryItems,
+  resetFilters,
+  submitCreate,
+  submitImport,
+  runRowAction,
+  useGroupAsFilter,
+  useGroupAsEntry,
+  applySkuSuggestion,
+  // formatters
+  getCredentialTypeLabel,
+  getCredentialTypeHint,
+  getSkuNamingHint,
+  formatInventoryStatus,
+  getGroupSuggestion,
+  // utils
+  hasAdminRole,
+  formatAdminDateTime,
+} = useAdminInventory()
 </script>
 
 <template>
@@ -412,162 +63,34 @@ onMounted(async () => {
       </template>
     </AdminPageHeader>
 
-    <el-card shadow="never" class="section-card">
-      <template #header>
-        <div class="card-header">
-          <span class="card-title">查询库存池</span>
-          <span class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</span>
-        </div>
-      </template>
-      <div class="form-grid">
-        <el-input
-          v-model="filterSkuCode"
-          placeholder="内部履约 SKU，例如 sjz_hdl_test01"
-          clearable
-          @keyup.enter="loadInventoryItems(1)"
-        />
-        <el-select v-model="filterCredentialType" placeholder="凭据类型" clearable>
-          <el-option
-            v-for="opt in adminInventoryCredentialTypeOptions"
-            :key="opt.value"
-            :label="opt.label"
-            :value="opt.value"
-          />
-        </el-select>
-        <el-select v-model="filterStatus" placeholder="状态" clearable>
-          <el-option
-            v-for="opt in adminInventoryStatusOptions"
-            :key="opt.value"
-            :label="opt.label"
-            :value="opt.value"
-          />
-        </el-select>
-        <el-input
-          v-model="filterBatchNo"
-          placeholder="批次号"
-          clearable
-          @keyup.enter="loadInventoryItems(1)"
-        />
-        <el-input
-          v-model="filterInventoryGroupCode"
-          placeholder="库存组，例如 A组"
-          clearable
-          @keyup.enter="loadInventoryItems(1)"
-        />
-      </div>
-      <div class="action-row">
-        <el-button round type="primary" @click="loadInventoryItems(1)">查询列表</el-button>
-        <el-button round @click="resetFilters">清空筛选</el-button>
-      </div>
-    </el-card>
+    <AdminInventoryFilterCard
+      v-model:filter-sku-code="filterSkuCode"
+      v-model:filter-credential-type="filterCredentialType"
+      v-model:filter-status="filterStatus"
+      v-model:filter-batch-no="filterBatchNo"
+      v-model:filter-inventory-group-code="filterInventoryGroupCode"
+      :load-inventory-items="loadInventoryItems"
+      :reset-filters="resetFilters"
+    />
 
-    <el-card shadow="never" class="section-card">
-      <template #header>
-        <div class="card-header">
-          <span class="card-title">入库与导入</span>
-          <span class="card-desc"
-            >填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</span
-          >
-        </div>
-      </template>
-
-      <div class="form-grid">
-        <div class="sku-input-wrap">
-          <input
-            v-model="entrySkuCode"
-            list="inventory-sku-suggestions"
-            class="native-input"
-            placeholder="内部履约 SKU，可选已有同类型，也可自定义新的中文名"
-          />
-          <datalist id="inventory-sku-suggestions">
-            <option
-              v-for="suggestion in entrySkuSuggestions"
-              :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}`"
-              :value="suggestion.skuCode"
-              :label="`${suggestion.skuCode} · ${suggestion.inventoryGroupCode || '未分组'} · 可用 ${suggestion.availableCount} / 共 ${suggestion.totalCount}`"
-            />
-          </datalist>
-        </div>
-        <el-select v-model="entryCredentialType" placeholder="凭据类型">
-          <el-option
-            v-for="opt in adminInventoryCredentialTypeOptions.filter((item) => item.value)"
-            :key="opt.value"
-            :label="opt.label"
-            :value="opt.value"
-          />
-        </el-select>
-        <el-input v-model="entryBatchNo" placeholder="批次号，可选" clearable />
-        <el-input
-          v-model="entryInventoryGroupCode"
-          placeholder="库存组，例如 A组 / B组"
-          clearable
-        />
-      </div>
-
-      <div class="sku-helper-bar">
-        <span class="helper-text">{{ getSkuNamingHint() }}</span>
-        <span v-if="skuSuggestionsLoading" class="helper-text">正在加载同类型内部 SKU...</span>
-      </div>
-
-      <div v-if="entrySkuSuggestions.length > 0" class="sku-chip-row">
-        <button
-          v-for="suggestion in entrySkuSuggestions"
-          :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}-chip`"
-          type="button"
-          class="sku-chip"
-          @click="applySkuSuggestion(suggestion.skuCode)"
-        >
-          <span class="sku-chip-title">{{ suggestion.skuCode }}</span>
-          <span class="sku-chip-meta"
-            >{{ suggestion.inventoryGroupCode || '未分组' }} · 可用
-            {{ suggestion.availableCount }} / 共 {{ suggestion.totalCount }}</span
-          >
-        </button>
-      </div>
-
-      <div class="helper-grid">
-        <div class="helper-item">
-          <span class="helper-title">当前默认匹配</span>
-          <span class="helper-copy">{{ getCredentialTypeLabel(entryCredentialType) }}</span>
-        </div>
-        <div class="helper-item">
-          <span class="helper-title">库存组</span>
-          <span class="helper-copy">{{ entryInventoryGroupCode || '未分组，默认全局可用' }}</span>
-        </div>
-        <div class="helper-item helper-item-wide">
-          <span class="helper-title">说明</span>
-          <span class="helper-copy">{{ getCredentialTypeHint(entryCredentialType) }}</span>
-        </div>
-      </div>
-
-      <div class="single-row">
-        <el-input
-          v-model="singleDisplayValue"
-          placeholder="单条新增的凭据内容"
-          @keyup.enter="submitCreate"
-        />
-        <el-button :loading="creating" round type="success" @click="submitCreate"
-          >单条新增</el-button
-        >
-      </div>
-
-      <el-input
-        v-model="bulkText"
-        type="textarea"
-        :rows="8"
-        placeholder="批量导入支持两种格式：&#10;1. 每行一个凭据内容（使用上方默认内部 SKU / 凭据类型 / 批次 / 库存组）&#10;2. 每行一条：内部SKU|凭据类型|批次号|库存组|凭据内容"
-        style="margin-top: 14px"
-      />
-      <p class="helper-text" style="margin-top: 8px">
-        示例：sjz_hdl_test01|tencent_code|sjz-20260412|A组|DJQFf7HgXXXXXXXXXX
-      </p>
-
-      <div class="action-row">
-        <el-button :loading="importing" round type="primary" @click="submitImport"
-          >批量导入</el-button
-        >
-      </div>
-    </el-card>
+    <AdminInventoryEntryCard
+      v-model:entry-sku-code="entrySkuCode"
+      v-model:entry-credential-type="entryCredentialType"
+      v-model:entry-batch-no="entryBatchNo"
+      v-model:entry-inventory-group-code="entryInventoryGroupCode"
+      v-model:single-display-value="singleDisplayValue"
+      v-model:bulk-text="bulkText"
+      :creating="creating"
+      :importing="importing"
+      :sku-suggestions-loading="skuSuggestionsLoading"
+      :entry-sku-suggestions="entrySkuSuggestions"
+      :submit-create="submitCreate"
+      :submit-import="submitImport"
+      :apply-sku-suggestion="applySkuSuggestion"
+      :get-credential-type-label="getCredentialTypeLabel"
+      :get-credential-type-hint="getCredentialTypeHint"
+      :get-sku-naming-hint="getSkuNamingHint"
+    />
 
     <el-alert
       v-if="errorMessage"
@@ -592,198 +115,34 @@ onMounted(async () => {
       </template>
 
       <template v-else>
-        <div class="summary-grid">
-          <div class="stat-card">
-            <span class="stat-label">当前页内部 SKU</span>
-            <strong class="stat-value">{{ pageOverview.skuCount }}</strong>
-            <span class="stat-meta">当前页去重后的内部履约 SKU 数量</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-label">当前页库存池</span>
-            <strong class="stat-value">{{ pageOverview.groupCount }}</strong>
-            <span class="stat-meta">按 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-label">可立即分配</span>
-            <strong class="stat-value">{{ pageSummary.availableCount }}</strong>
-            <span class="stat-meta">当前页还能直接被任务预占的库存项</span>
-          </div>
-          <div class="stat-card">
-            <span class="stat-label">预占中</span>
-            <strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
-            <span class="stat-meta">当前页已经被任务锁定的库存项</span>
-          </div>
-        </div>
+        <AdminInventoryPoolGrid
+          :inventory-groups="inventoryGroups"
+          :page-overview="pageOverview"
+          :page-summary="pageSummary"
+          :use-group-as-filter="useGroupAsFilter"
+          :use-group-as-entry="useGroupAsEntry"
+          :get-credential-type-label="getCredentialTypeLabel"
+          :get-group-suggestion="getGroupSuggestion"
+          :format-admin-date-time="formatAdminDateTime"
+        />
 
-        <div class="pool-section">
-          <div class="card-header" style="margin-bottom: 14px">
-            <span class="card-title">当前页库存池概览</span>
-            <span class="card-desc"
-              >先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</span
-            >
-          </div>
-          <div class="pool-grid">
-            <article v-for="group in inventoryGroups" :key="group.key" class="pool-card">
-              <div class="pool-topline">
-                <div class="pool-title-block">
-                  <h4 class="pool-title">{{ group.skuCode }}</h4>
-                  <span class="pool-subtitle"
-                    >{{ getCredentialTypeLabel(group.credentialType) }} ·
-                    {{ group.credentialType }} · {{ group.inventoryGroupCode || '未分组' }}</span
-                  >
-                </div>
-                <span class="pool-total">共 {{ group.totalCount }} 条</span>
-              </div>
-
-              <div class="pool-stats">
-                <span class="pool-stat">可用 {{ group.availableCount }}</span>
-                <span class="pool-stat">预占 {{ group.reservedCount }}</span>
-                <span class="pool-stat">发放 {{ group.deliveredCount }}</span>
-                <span class="pool-stat">作废 {{ group.invalidCount }}</span>
-              </div>
-
-              <div class="pool-meta">
-                <span>批次 {{ group.batchSummary }}</span>
-                <span>最近更新 {{ formatAdminDateTime(group.latestUpdatedAt) }}</span>
-              </div>
-
-              <p class="pool-suggestion">{{ getGroupSuggestion(group) }}</p>
-
-              <div class="pool-actions">
-                <el-button round @click="useGroupAsFilter(group)">只看这个池</el-button>
-                <el-button round type="primary" @click="useGroupAsEntry(group)"
-                  >作为入库目标</el-button
-                >
-              </div>
-            </article>
-          </div>
-        </div>
-
-        <div class="table-toolbar">
-          当前筛选共 {{ pagination.total }} 条，本页可用 {{ pageSummary.availableCount }} 条，预占
-          {{ pageSummary.reservedCount }} 条，已发放 {{ pageSummary.deliveredCount }} 条，作废
-          {{ pageSummary.invalidCount }} 条。
-        </div>
-
-        <el-table :data="items" stripe size="small" class="inventory-table data-table">
-          <el-table-column label="库存项" min-width="200">
-            <template #default="{ row }">
-              <div class="item-cell">
-                <RouterLink
-                  v-if="row.reservedByTaskNo"
-                  :to="`/admin/tasks/${row.reservedByTaskNo}`"
-                  class="item-title"
-                  >#{{ row.inventoryItemId }}</RouterLink
-                >
-                <span v-else class="item-title">#{{ row.inventoryItemId }}</span>
-                <code class="item-value">{{ row.displayValue }}</code>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="内部履约 SKU" min-width="160">
-            <template #default="{ row }">
-              <div class="sku-cell">
-                <span class="sku-title">{{ row.skuCode }}</span>
-                <span class="sku-subline">{{ getCredentialTypeLabel(row.credentialType) }}</span>
-                <span class="sku-subline sku-raw">{{ row.credentialType || '-' }}</span>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="批次 / 库存组" min-width="160">
-            <template #default="{ row }">
-              <div class="info-cell">
-                <span class="info-subline">批次 {{ row.batchNo || '未分批' }}</span>
-                <span class="info-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
-                <span class="status-copy">{{ formatInventoryStatus(row) }}</span>
-                <span v-if="row.invalidReason" class="status-warning"
-                  >原因：{{ row.invalidReason }}</span
-                >
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态 / 绑定" min-width="180">
-            <template #default="{ row }">
-              <div class="status-stack">
-                <AdminStatusTag :status="row.status" />
-                <AdminStatusTag :status="row.systemBindingStatus" />
-                <AdminStatusTag :status="row.userBindingStatus" />
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="关联任务 / 订单" min-width="160">
-            <template #default="{ row }">
-              <div class="info-cell">
-                <span class="link-title">{{ row.reservedByTaskNo || '-' }}</span>
-                <span class="link-subline">任务号</span>
-                <span class="link-title">{{ row.platformOrderId || '-' }}</span>
-                <span class="link-subline">平台订单号</span>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="时间" min-width="180">
-            <template #default="{ row }">
-              <div class="info-cell">
-                <span class="time-line">入库 {{ formatAdminDateTime(row.createdAt) }}</span>
-                <span class="time-line">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
-                <span v-if="row.deliveredAt" class="time-line"
-                  >发放 {{ formatAdminDateTime(row.deliveredAt) }}</span
-                >
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="120" align="center">
-            <template #default="{ row }">
-              <div class="action-stack">
-                <el-button
-                  v-if="hasAdminRole('admin') && row.status === 'reserved'"
-                  :loading="actionLoadingId === row.inventoryItemId"
-                  size="small"
-                  @click="
-                    runRowAction(
-                      row.inventoryItemId,
-                      () => releaseAdminInventoryItem(row.inventoryItemId),
-                      '库存项已释放',
-                      `确认释放库存项 #${row.inventoryItemId} 吗？释放后任务需要重新分配库存。`,
-                    )
-                  "
-                  >释放</el-button
-                >
-                <el-button
-                  v-if="hasAdminRole('admin') && row.status === 'available'"
-                  :loading="actionLoadingId === row.inventoryItemId"
-                  size="small"
-                  type="danger"
-                  plain
-                  @click="
-                    runRowAction(
-                      row.inventoryItemId,
-                      () =>
-                        invalidateAdminInventoryItem(row.inventoryItemId, {
-                          reason: '后台手动作废',
-                        }),
-                      '库存项已作废',
-                      `确认作废库存项 #${row.inventoryItemId} 吗？作废后不会再参与自动分配。`,
-                    )
-                  "
-                  >作废</el-button
-                >
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-
-        <el-pagination
-          v-if="pagination.total > 0"
-          v-model:current-page="pagination.page"
-          :page-size="pagination.pageSize"
-          :total="pagination.total"
-          layout="total, prev, pager, next"
-          class="pagination-center"
-          @current-change="loadInventoryItems"
+        <AdminInventoryTable
+          :loading="loading"
+          :items="items"
+          :pagination="pagination"
+          :page-summary="pageSummary"
+          :action-loading-id="actionLoadingId"
+          :load-inventory-items="loadInventoryItems"
+          :run-row-action="runRowAction"
+          :format-inventory-status="formatInventoryStatus"
+          :get-credential-type-label="getCredentialTypeLabel"
+          :format-admin-date-time="formatAdminDateTime"
         />
       </template>
     </el-card>
   </div>
 </template>
 
-<style scoped src="./AdminInventoryView.css"></style>
+<style scoped>
+@import '../../styles/admin-list-pages.css';
+</style>
diff --git a/apps/frontend/src/views/admin/inventory/components/AdminInventoryEntryCard.vue b/apps/frontend/src/views/admin/inventory/components/AdminInventoryEntryCard.vue
new file mode 100644
index 00000000..35e625ba
--- /dev/null
+++ b/apps/frontend/src/views/admin/inventory/components/AdminInventoryEntryCard.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { adminInventoryCredentialTypeOptions } from '@/utils/admin-options'
+
+const entrySkuCode = defineModel<string>('entrySkuCode', { required: true })
+const entryCredentialType = defineModel<string>('entryCredentialType', { required: true })
+const entryBatchNo = defineModel<string>('entryBatchNo', { required: true })
+const entryInventoryGroupCode = defineModel<string>('entryInventoryGroupCode', { required: true })
+const singleDisplayValue = defineModel<string>('singleDisplayValue', { required: true })
+const bulkText = defineModel<string>('bulkText', { required: true })
+
+defineProps<{
+  creating: boolean
+  importing: boolean
+  skuSuggestionsLoading: boolean
+  entrySkuSuggestions: Array<{
+    credentialType: string
+    inventoryGroupCode: string
+    skuCode: string
+    availableCount: number
+    totalCount: number
+  }>
+  submitCreate: () => Promise<void>
+  submitImport: () => Promise<void>
+  applySkuSuggestion: (skuCode: string) => void
+  getCredentialTypeLabel: (value: string) => string
+  getCredentialTypeHint: (value: string) => string
+  getSkuNamingHint: () => string
+}>()
+</script>
+
+<template>
+  <el-card shadow="never" class="section-card">
+    <template #header>
+      <div class="card-header">
+        <span class="card-title">入库与导入</span>
+        <span class="card-desc"
+          >填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</span
+        >
+      </div>
+    </template>
+
+    <div class="form-grid">
+      <div class="sku-input-wrap">
+        <input
+          v-model="entrySkuCode"
+          list="inventory-sku-suggestions"
+          class="native-input"
+          placeholder="内部履约 SKU，可选已有同类型，也可自定义新的中文名"
+        />
+        <datalist id="inventory-sku-suggestions">
+          <option
+            v-for="suggestion in entrySkuSuggestions"
+            :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}`"
+            :value="suggestion.skuCode"
+            :label="`${suggestion.skuCode} · ${suggestion.inventoryGroupCode || '未分组'} · 可用 ${suggestion.availableCount} / 共 ${suggestion.totalCount}`"
+          />
+        </datalist>
+      </div>
+      <el-select v-model="entryCredentialType" placeholder="凭据类型">
+        <el-option
+          v-for="opt in adminInventoryCredentialTypeOptions.filter((item) => item.value)"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+      <el-input v-model="entryBatchNo" placeholder="批次号，可选" clearable />
+      <el-input
+        v-model="entryInventoryGroupCode"
+        placeholder="库存组，例如 A组 / B组"
+        clearable
+      />
+    </div>
+
+    <div class="sku-helper-bar">
+      <span class="helper-text">{{ getSkuNamingHint() }}</span>
+      <span v-if="skuSuggestionsLoading" class="helper-text">正在加载同类型内部 SKU...</span>
+    </div>
+
+    <div v-if="entrySkuSuggestions.length > 0" class="sku-chip-row">
+      <button
+        v-for="suggestion in entrySkuSuggestions"
+        :key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}-chip`"
+        type="button"
+        class="sku-chip"
+        @click="applySkuSuggestion(suggestion.skuCode)"
+      >
+        <span class="sku-chip-title">{{ suggestion.skuCode }}</span>
+        <span class="sku-chip-meta"
+          >{{ suggestion.inventoryGroupCode || '未分组' }} · 可用
+          {{ suggestion.availableCount }} / 共 {{ suggestion.totalCount }}</span
+        >
+      </button>
+    </div>
+
+    <div class="helper-grid">
+      <div class="helper-item">
+        <span class="helper-title">当前默认匹配</span>
+        <span class="helper-copy">{{ getCredentialTypeLabel(entryCredentialType) }}</span>
+      </div>
+      <div class="helper-item">
+        <span class="helper-title">库存组</span>
+        <span class="helper-copy">{{ entryInventoryGroupCode || '未分组，默认全局可用' }}</span>
+      </div>
+      <div class="helper-item helper-item-wide">
+        <span class="helper-title">说明</span>
+        <span class="helper-copy">{{ getCredentialTypeHint(entryCredentialType) }}</span>
+      </div>
+    </div>
+
+    <div class="single-row">
+      <el-input
+        v-model="singleDisplayValue"
+        placeholder="单条新增的凭据内容"
+        @keyup.enter="submitCreate"
+      />
+      <el-button :loading="creating" round type="success" @click="submitCreate"
+        >单条新增</el-button
+      >
+    </div>
+
+    <el-input
+      v-model="bulkText"
+      type="textarea"
+      :rows="8"
+      placeholder="批量导入支持两种格式：&#10;1. 每行一个凭据内容（使用上方默认内部 SKU / 凭据类型 / 批次 / 库存组）&#10;2. 每行一条：内部SKU|凭据类型|批次号|库存组|凭据内容"
+      style="margin-top: 14px"
+    />
+    <p class="helper-text" style="margin-top: 8px">
+      示例：sjz_hdl_test01|tencent_code|sjz-20260412|A组|DJQFf7HgXXXXXXXXXX
+    </p>
+
+    <div class="action-row">
+      <el-button :loading="importing" round type="primary" @click="submitImport"
+        >批量导入</el-button
+      >
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+@import '../../../../styles/admin-list-pages.css';
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.sku-input-wrap {
+  display: grid;
+  min-width: 0;
+}
+
+.native-input {
+  width: 100%;
+  min-width: 0;
+  min-height: 40px;
+  padding: 0 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  background: rgba(255, 255, 255, 0.74);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
+  outline: none;
+  transition:
+    border-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.native-input:focus {
+  border-color: rgba(37, 89, 167, 0.38);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 0 3px rgba(37, 89, 167, 0.08);
+}
+
+.single-row,
+.action-row {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  margin-top: 14px;
+}
+.single-row :deep(.el-input) {
+  min-width: 0;
+}
+
+.helper-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-3);
+  margin-top: 14px;
+}
+
+.helper-item {
+  display: grid;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: var(--radius-md);
+  background: rgba(248, 250, 252, 0.72);
+}
+
+.helper-title {
+  color: #2559a7;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+.helper-copy {
+  min-width: 0;
+  color: #334155;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.sku-helper-bar {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  align-items: center;
+  margin-top: var(--space-3);
+}
+.helper-text {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  margin: 0;
+}
+
+.sku-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: var(--space-3);
+}
+
+.sku-chip {
+  display: inline-grid;
+  gap: 4px;
+  max-width: 100%;
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(86, 108, 138, 0.16);
+  background: rgba(248, 250, 252, 0.78);
+  color: var(--text-primary);
+  cursor: pointer;
+  transition:
+    transform 0.16s ease,
+    border-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.sku-chip:hover {
+  transform: translateY(-1px);
+  border-color: rgba(37, 89, 167, 0.26);
+  box-shadow: 0 12px 24px rgba(37, 89, 167, 0.08);
+}
+.sku-chip-title {
+  min-width: 0;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sku-chip-meta {
+  min-width: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 1200px) {
+  .form-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .form-grid,
+  .helper-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 640px) {
+  .form-grid,
+  .helper-grid {
+    grid-template-columns: 1fr;
+  }
+  .single-row,
+  .action-row,
+  .sku-helper-bar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/apps/frontend/src/views/admin/inventory/components/AdminInventoryFilterCard.vue b/apps/frontend/src/views/admin/inventory/components/AdminInventoryFilterCard.vue
new file mode 100644
index 00000000..194ac0da
--- /dev/null
+++ b/apps/frontend/src/views/admin/inventory/components/AdminInventoryFilterCard.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { adminInventoryCredentialTypeOptions, adminInventoryStatusOptions } from '@/utils/admin-options'
+
+const filterSkuCode = defineModel<string>('filterSkuCode', { required: true })
+const filterCredentialType = defineModel<string>('filterCredentialType', { required: true })
+const filterStatus = defineModel<string>('filterStatus', { required: true })
+const filterBatchNo = defineModel<string>('filterBatchNo', { required: true })
+const filterInventoryGroupCode = defineModel<string>('filterInventoryGroupCode', { required: true })
+
+defineProps<{
+  loadInventoryItems: (page?: number) => Promise<void>
+  resetFilters: () => void
+}>()
+</script>
+
+<template>
+  <el-card shadow="never" class="section-card">
+    <template #header>
+      <div class="card-header">
+        <span class="card-title">查询库存池</span>
+        <span class="card-desc">按内部履约 SKU、凭据类型、批次和状态快速定位库存。</span>
+      </div>
+    </template>
+    <div class="form-grid">
+      <el-input
+        v-model="filterSkuCode"
+        placeholder="内部履约 SKU，例如 sjz_hdl_test01"
+        clearable
+        @keyup.enter="loadInventoryItems(1)"
+      />
+      <el-select v-model="filterCredentialType" placeholder="凭据类型" clearable>
+        <el-option
+          v-for="opt in adminInventoryCredentialTypeOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+      <el-select v-model="filterStatus" placeholder="状态" clearable>
+        <el-option
+          v-for="opt in adminInventoryStatusOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+      <el-input
+        v-model="filterBatchNo"
+        placeholder="批次号"
+        clearable
+        @keyup.enter="loadInventoryItems(1)"
+      />
+      <el-input
+        v-model="filterInventoryGroupCode"
+        placeholder="库存组，例如 A组"
+        clearable
+        @keyup.enter="loadInventoryItems(1)"
+      />
+    </div>
+    <div class="action-row">
+      <el-button round type="primary" @click="loadInventoryItems(1)">查询列表</el-button>
+      <el-button round @click="resetFilters">清空筛选</el-button>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+@import '../../../../styles/admin-list-pages.css';
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.action-row {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  margin-top: 14px;
+}
+
+@media (max-width: 1200px) {
+  .form-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 640px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+  .action-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/apps/frontend/src/views/admin/inventory/components/AdminInventoryPoolGrid.vue b/apps/frontend/src/views/admin/inventory/components/AdminInventoryPoolGrid.vue
new file mode 100644
index 00000000..d92fa85b
--- /dev/null
+++ b/apps/frontend/src/views/admin/inventory/components/AdminInventoryPoolGrid.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { InventoryPoolGroup } from '../composables/types'
+
+defineProps<{
+  inventoryGroups: InventoryPoolGroup[]
+  pageOverview: { skuCount: number; groupCount: number }
+  pageSummary: { availableCount: number; reservedCount: number; deliveredCount: number; invalidCount: number }
+  useGroupAsFilter: (group: InventoryPoolGroup) => void
+  useGroupAsEntry: (group: InventoryPoolGroup) => void
+  getCredentialTypeLabel: (value: string) => string
+  getGroupSuggestion: (group: InventoryPoolGroup) => string
+  formatAdminDateTime: (value: string) => string
+}>()
+</script>
+
+<template>
+  <div class="summary-grid">
+    <div class="stat-card">
+      <span class="stat-label">当前页内部 SKU</span>
+      <strong class="stat-value">{{ pageOverview.skuCount }}</strong>
+      <span class="stat-meta">当前页去重后的内部履约 SKU 数量</span>
+    </div>
+    <div class="stat-card">
+      <span class="stat-label">当前页库存池</span>
+      <strong class="stat-value">{{ pageOverview.groupCount }}</strong>
+      <span class="stat-meta">按 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
+    </div>
+    <div class="stat-card">
+      <span class="stat-label">可立即分配</span>
+      <strong class="stat-value">{{ pageSummary.availableCount }}</strong>
+      <span class="stat-meta">当前页还能直接被任务预占的库存项</span>
+    </div>
+    <div class="stat-card">
+      <span class="stat-label">预占中</span>
+      <strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
+      <span class="stat-meta">当前页已经被任务锁定的库存项</span>
+    </div>
+  </div>
+
+  <div class="pool-section">
+    <div class="card-header" style="margin-bottom: 14px">
+      <span class="card-title">当前页库存池概览</span>
+      <span class="card-desc"
+        >先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</span
+      >
+    </div>
+    <div class="pool-grid">
+      <article v-for="group in inventoryGroups" :key="group.key" class="pool-card">
+        <div class="pool-topline">
+          <div class="pool-title-block">
+            <h4 class="pool-title">{{ group.skuCode }}</h4>
+            <span class="pool-subtitle"
+              >{{ getCredentialTypeLabel(group.credentialType) }} ·
+              {{ group.credentialType }} · {{ group.inventoryGroupCode || '未分组' }}</span
+            >
+          </div>
+          <span class="pool-total">共 {{ group.totalCount }} 条</span>
+        </div>
+
+        <div class="pool-stats">
+          <span class="pool-stat">可用 {{ group.availableCount }}</span>
+          <span class="pool-stat">预占 {{ group.reservedCount }}</span>
+          <span class="pool-stat">发放 {{ group.deliveredCount }}</span>
+          <span class="pool-stat">作废 {{ group.invalidCount }}</span>
+        </div>
+
+        <div class="pool-meta">
+          <span>批次 {{ group.batchSummary }}</span>
+          <span>最近更新 {{ formatAdminDateTime(group.latestUpdatedAt) }}</span>
+        </div>
+
+        <p class="pool-suggestion">{{ getGroupSuggestion(group) }}</p>
+
+        <div class="pool-actions">
+          <el-button round @click="useGroupAsFilter(group)">只看这个池</el-button>
+          <el-button round type="primary" @click="useGroupAsEntry(group)"
+            >作为入库目标</el-button
+          >
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.stat-card {
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: var(--radius-md);
+  background: rgba(248, 250, 252, 0.72);
+}
+.stat-label {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+.stat-value {
+  font-size: 30px;
+  line-height: 1;
+  color: var(--text-primary);
+  display: block;
+  margin-top: var(--space-2);
+}
+.stat-meta {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  display: block;
+  margin-top: var(--space-1);
+}
+
+.pool-section {
+  margin-bottom: 18px;
+}
+.pool-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.pool-card {
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(248, 250, 252, 0.68);
+}
+
+.pool-topline {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  align-items: flex-start;
+}
+.pool-title-block {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+.pool-title {
+  min-width: 0;
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--text-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pool-subtitle {
+  min-width: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pool-total {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  border: 1px solid rgba(37, 89, 167, 0.12);
+  color: #2559a7;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+.pool-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.pool-stat {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
+  border-radius: var(--radius-full);
+  background: rgba(37, 89, 167, 0.08);
+  color: #1d4f91;
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+.pool-meta {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  word-break: break-word;
+}
+.pool-suggestion {
+  margin: 0;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+.pool-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+@media (max-width: 1200px) {
+  .summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .summary-grid,
+  .pool-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .summary-grid,
+  .pool-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/apps/frontend/src/views/admin/inventory/components/AdminInventoryTable.vue b/apps/frontend/src/views/admin/inventory/components/AdminInventoryTable.vue
new file mode 100644
index 00000000..eb5ab0cb
--- /dev/null
+++ b/apps/frontend/src/views/admin/inventory/components/AdminInventoryTable.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import type { AdminInventoryItemListItem } from '@/types/admin'
+import { hasAdminRole } from '@/utils/admin-auth'
+
+import { invalidateAdminInventoryItem, releaseAdminInventoryItem } from '@/services/admin'
+
+defineProps<{
+  loading: boolean
+  items: AdminInventoryItemListItem[]
+  pagination: { page: number; pageSize: number; total: number }
+  pageSummary: { availableCount: number; reservedCount: number; deliveredCount: number; invalidCount: number }
+  actionLoadingId: number | null
+  loadInventoryItems: (page?: number) => Promise<void>
+  runRowAction: (id: number, action: () => Promise<unknown>, msg: string, confirm: string) => Promise<void>
+  formatInventoryStatus: (item: AdminInventoryItemListItem) => string
+  getCredentialTypeLabel: (value: string) => string
+  formatAdminDateTime: (value: string) => string
+}>()
+</script>
+
+<template>
+  <div class="table-toolbar">
+    当前筛选共 {{ pagination.total }} 条，本页可用 {{ pageSummary.availableCount }} 条，预占
+    {{ pageSummary.reservedCount }} 条，已发放 {{ pageSummary.deliveredCount }} 条，作废
+    {{ pageSummary.invalidCount }} 条。
+  </div>
+
+  <el-table :data="items" stripe size="small" class="inventory-table data-table">
+    <el-table-column label="库存项" min-width="200">
+      <template #default="{ row }">
+        <div class="item-cell">
+          <RouterLink
+            v-if="row.reservedByTaskNo"
+            :to="`/admin/tasks/${row.reservedByTaskNo}`"
+            class="item-title"
+            >#{{ row.inventoryItemId }}</RouterLink
+          >
+          <span v-else class="item-title">#{{ row.inventoryItemId }}</span>
+          <code class="item-value">{{ row.displayValue }}</code>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="内部履约 SKU" min-width="160">
+      <template #default="{ row }">
+        <div class="sku-cell">
+          <span class="sku-title">{{ row.skuCode }}</span>
+          <span class="sku-subline">{{ getCredentialTypeLabel(row.credentialType) }}</span>
+          <span class="sku-subline sku-raw">{{ row.credentialType || '-' }}</span>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="批次 / 库存组" min-width="160">
+      <template #default="{ row }">
+        <div class="info-cell">
+          <span class="info-subline">批次 {{ row.batchNo || '未分批' }}</span>
+          <span class="info-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
+          <span class="status-copy">{{ formatInventoryStatus(row) }}</span>
+          <span v-if="row.invalidReason" class="status-warning"
+            >原因：{{ row.invalidReason }}</span
+          >
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="状态 / 绑定" min-width="180">
+      <template #default="{ row }">
+        <div class="status-stack">
+          <AdminStatusTag :status="row.status" />
+          <AdminStatusTag :status="row.systemBindingStatus" />
+          <AdminStatusTag :status="row.userBindingStatus" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="关联任务 / 订单" min-width="160">
+      <template #default="{ row }">
+        <div class="info-cell">
+          <span class="link-title">{{ row.reservedByTaskNo || '-' }}</span>
+          <span class="link-subline">任务号</span>
+          <span class="link-title">{{ row.platformOrderId || '-' }}</span>
+          <span class="link-subline">平台订单号</span>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="时间" min-width="180">
+      <template #default="{ row }">
+        <div class="info-cell">
+          <span class="time-line">入库 {{ formatAdminDateTime(row.createdAt) }}</span>
+          <span class="time-line">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
+          <span v-if="row.deliveredAt" class="time-line"
+            >发放 {{ formatAdminDateTime(row.deliveredAt) }}</span
+          >
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="120" align="center">
+      <template #default="{ row }">
+        <div class="action-stack">
+          <el-button
+            v-if="hasAdminRole('admin') && row.status === 'reserved'"
+            :loading="actionLoadingId === row.inventoryItemId"
+            size="small"
+            @click="
+              runRowAction(
+                row.inventoryItemId,
+                () => releaseAdminInventoryItem(row.inventoryItemId),
+                '库存项已释放',
+                `确认释放库存项 #${row.inventoryItemId} 吗？释放后任务需要重新分配库存。`,
+              )
+            "
+            >释放</el-button
+          >
+          <el-button
+            v-if="hasAdminRole('admin') && row.status === 'available'"
+            :loading="actionLoadingId === row.inventoryItemId"
+            size="small"
+            type="danger"
+            plain
+            @click="
+              runRowAction(
+                row.inventoryItemId,
+                () =>
+                  invalidateAdminInventoryItem(row.inventoryItemId, {
+                    reason: '后台手动作废',
+                  }),
+                '库存项已作废',
+                `确认作废库存项 #${row.inventoryItemId} 吗？作废后不会再参与自动分配。`,
+              )
+            "
+            >作废</el-button
+          >
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <el-pagination
+    v-if="pagination.total > 0"
+    v-model:current-page="pagination.page"
+    :page-size="pagination.pageSize"
+    :total="pagination.total"
+    layout="total, prev, pager, next"
+    class="pagination-center"
+    @current-change="loadInventoryItems"
+  />
+</template>
+
+<style scoped>
+@import '../../../../styles/admin-list-pages.css';
+
+.table-toolbar {
+  margin-bottom: var(--space-2);
+  padding-top: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.item-cell,
+.sku-cell,
+.info-cell {
+  display: grid;
+  gap: 6px;
+}
+
+.item-title,
+.sku-title,
+.link-title {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+.item-value {
+  display: inline-flex;
+  max-width: 100%;
+  width: fit-content;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  background: rgba(15, 23, 42, 0.06);
+  color: #0f172a;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.info-subline,
+.sku-subline,
+.link-subline,
+.time-line,
+.status-copy {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+.sku-raw {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+}
+
+.status-stack,
+.action-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+}
+.action-stack {
+  justify-content: center;
+}
+
+.status-warning {
+  color: #b54708;
+  font-size: var(--text-xs);
+}
+
+@media (max-width: 640px) {
+  .status-stack,
+  .action-stack {
+    justify-content: flex-start;
+  }
+}
+</style>
diff --git a/apps/frontend/src/views/admin/inventory/composables/types.ts b/apps/frontend/src/views/admin/inventory/composables/types.ts
new file mode 100644
index 00000000..6f0092e1
--- /dev/null
+++ b/apps/frontend/src/views/admin/inventory/composables/types.ts
@@ -0,0 +1,21 @@
+export type InventoryImportRow = {
+  skuCode: string
+  credentialType: string
+  batchNo: string
+  inventoryGroupCode: string
+  displayValue: string
+}
+
+export type InventoryPoolGroup = {
+  key: string
+  skuCode: string
+  credentialType: string
+  inventoryGroupCode: string
+  totalCount: number
+  availableCount: number
+  reservedCount: number
+  deliveredCount: number
+  invalidCount: number
+  latestUpdatedAt: string
+  batchSummary: string
+}
diff --git a/apps/frontend/src/views/admin/inventory/composables/useAdminInventory.ts b/apps/frontend/src/views/admin/inventory/composables/useAdminInventory.ts
new file mode 100644
index 00000000..9c85aa54
--- /dev/null
+++ b/apps/frontend/src/views/admin/inventory/composables/useAdminInventory.ts
@@ -0,0 +1,433 @@
+import { computed, onMounted, ref, watch } from 'vue'
+
+import { showConfirm, showError, showSuccess } from '@/lib/feedback'
+import {
+  createAdminInventoryItem,
+  fetchAdminInventoryItems,
+  fetchAdminInventorySkuSuggestions,
+  importAdminInventoryItems,
+  invalidateAdminInventoryItem,
+  releaseAdminInventoryItem,
+} from '@/services/admin'
+import type {
+  AdminInventoryItemListItem,
+  AdminInventorySkuSuggestion,
+  AdminPagination,
+} from '@/types/admin'
+import { hasAdminRole } from '@/utils/admin-auth'
+import { formatAdminDateTime } from '@/utils/admin-time'
+import {
+  adminInventoryCredentialTypeOptions,
+  adminInventoryStatusOptions,
+} from '@/utils/admin-options'
+
+import type { InventoryImportRow, InventoryPoolGroup } from './types'
+
+export function useAdminInventory() {
+  const loading = ref(true)
+  const importing = ref(false)
+  const creating = ref(false)
+  const actionLoadingId = ref<number | null>(null)
+  const errorMessage = ref('')
+
+  const filterSkuCode = ref('')
+  const filterCredentialType = ref('')
+  const filterStatus = ref('')
+  const filterBatchNo = ref('')
+  const filterInventoryGroupCode = ref('')
+
+  const entrySkuCode = ref('')
+  const entryCredentialType = ref('tencent_code')
+  const entryBatchNo = ref('')
+  const entryInventoryGroupCode = ref('')
+  const singleDisplayValue = ref('')
+  const bulkText = ref('')
+  const skuSuggestionsLoading = ref(false)
+  const inventorySkuSuggestions = ref<AdminInventorySkuSuggestion[]>([])
+
+  const items = ref<AdminInventoryItemListItem[]>([])
+  const pagination = ref<AdminPagination>({
+    page: 1,
+    pageSize: 20,
+    total: 0,
+  })
+
+  const pageSummary = computed(() => {
+    const availableCount = items.value.filter((item) => item.status === 'available').length
+    const reservedCount = items.value.filter((item) => item.status === 'reserved').length
+    const deliveredCount = items.value.filter((item) => item.status === 'consumed').length
+    const invalidCount = items.value.filter((item) => item.status === 'invalid').length
+    return { availableCount, reservedCount, deliveredCount, invalidCount }
+  })
+
+  const inventoryGroups = computed<InventoryPoolGroup[]>(() => {
+    const groupMap = new Map<
+      string,
+      {
+        skuCode: string
+        credentialType: string
+        inventoryGroupCode: string
+        totalCount: number
+        availableCount: number
+        reservedCount: number
+        deliveredCount: number
+        invalidCount: number
+        latestUpdatedAt: string
+        batches: Set<string>
+      }
+    >()
+
+    for (const item of items.value) {
+      const key = `${item.skuCode}::${item.credentialType || 'tencent_code'}::${item.inventoryGroupCode || ''}`
+      const current = groupMap.get(key) || {
+        skuCode: item.skuCode,
+        credentialType: item.credentialType || 'tencent_code',
+        inventoryGroupCode: item.inventoryGroupCode || '',
+        totalCount: 0,
+        availableCount: 0,
+        reservedCount: 0,
+        deliveredCount: 0,
+        invalidCount: 0,
+        latestUpdatedAt: item.updatedAt,
+        batches: new Set<string>(),
+      }
+
+      current.totalCount += 1
+      if (item.status === 'available') current.availableCount += 1
+      else if (item.status === 'reserved') current.reservedCount += 1
+      else if (item.status === 'consumed') current.deliveredCount += 1
+      else if (item.status === 'invalid') current.invalidCount += 1
+
+      if (item.batchNo) current.batches.add(item.batchNo)
+      if (String(item.updatedAt || '') > String(current.latestUpdatedAt || ''))
+        current.latestUpdatedAt = item.updatedAt
+      groupMap.set(key, current)
+    }
+
+    return Array.from(groupMap.entries())
+      .map(([key, value]) => ({
+        key,
+        skuCode: value.skuCode,
+        credentialType: value.credentialType,
+        inventoryGroupCode: value.inventoryGroupCode,
+        totalCount: value.totalCount,
+        availableCount: value.availableCount,
+        reservedCount: value.reservedCount,
+        deliveredCount: value.deliveredCount,
+        invalidCount: value.invalidCount,
+        latestUpdatedAt: value.latestUpdatedAt,
+        batchSummary:
+          value.batches.size > 0 ? Array.from(value.batches).slice(0, 3).join(' / ') : '未分批',
+      }))
+      .sort((left, right) => {
+        if (right.availableCount !== left.availableCount)
+          return right.availableCount - left.availableCount
+        if (right.reservedCount !== left.reservedCount)
+          return right.reservedCount - left.reservedCount
+        return left.skuCode.localeCompare(right.skuCode)
+      })
+  })
+
+  const pageOverview = computed(() => ({
+    skuCount: new Set(items.value.map((item) => item.skuCode)).size,
+    groupCount: inventoryGroups.value.length,
+  }))
+
+  const entrySkuSuggestions = computed(() => {
+    const keyword = entrySkuCode.value.trim().toLowerCase()
+    const suggestions = inventorySkuSuggestions.value.filter(
+      (item) => item.credentialType === entryCredentialType.value,
+    )
+    if (!keyword) return suggestions.slice(0, 12)
+    return suggestions.filter((item) => item.skuCode.toLowerCase().includes(keyword)).slice(0, 12)
+  })
+
+  function getCredentialTypeLabel(value: string) {
+    const normalized = String(value || '').trim()
+    const option = adminInventoryCredentialTypeOptions.find((item) => item.value === normalized)
+    return option?.label || normalized || '-'
+  }
+
+  function getCredentialTypeHint(value: string) {
+    const normalized = String(value || '').trim()
+    if (normalized === 'tencent_code')
+      return '当前腾讯自动领取链路会优先预占这一类兑换码，三角洲行动这类场景就使用这个类型。内部 SKU 支持中文、英文和数字混用。'
+    if (normalized === 'card_password') return '适合卡号 / 卡密一体的库存项。'
+    if (normalized === 'account_password') return '适合账号密码、账号令牌等组合凭据。'
+    if (normalized === 'activation_link') return '适合直接发链接的激活类库存。'
+    if (normalized === 'text_credential') return '适合任意纯文本凭据。'
+    return '库存预占时会按凭据类型与内部履约 SKU 一起匹配。'
+  }
+
+  function getSkuNamingHint() {
+    if (entrySkuSuggestions.value.length > 0)
+      return `当前凭据类型下已有 ${entrySkuSuggestions.value.length} 个可复用的内部 SKU，也可以直接输入新的中文或英文名称。`
+    return '内部 SKU 支持中文、英文、数字和常见连接符。建议同一类商品长期使用同一个命名，方便共用库存池。'
+  }
+
+  function formatInventoryStatus(item: AdminInventoryItemListItem) {
+    if (item.status === 'consumed') return '已完成发放'
+    if (item.status === 'reserved') return '已被任务预占'
+    if (item.status === 'invalid') return '已手动作废'
+    return '可参与后续自动分配'
+  }
+
+  function getGroupSuggestion(group: InventoryPoolGroup) {
+    if (group.availableCount > 0)
+      return `当前还有 ${group.availableCount} 条可直接分配的库存，可以继续承接订单。`
+    if (group.reservedCount > 0)
+      return `当前没有可用库存，但有 ${group.reservedCount} 条正在被任务预占，建议优先检查任务进度。`
+    if (group.deliveredCount > 0 && group.invalidCount === 0)
+      return '当前页看到的库存都已经发放完成，若继续售卖需要补新的库存项。'
+    if (group.invalidCount > 0 && group.totalCount === group.invalidCount)
+      return '当前页这组库存都已作废，建议重新补充可用库存。'
+    return '当前页没有可立即分配的库存，建议补库存或检查对应履约任务。'
+  }
+
+  function useGroupAsFilter(group: InventoryPoolGroup) {
+    filterSkuCode.value = group.skuCode
+    filterCredentialType.value = group.credentialType
+    filterInventoryGroupCode.value = group.inventoryGroupCode
+    void loadInventoryItems(1)
+  }
+
+  function useGroupAsEntry(group: InventoryPoolGroup) {
+    entrySkuCode.value = group.skuCode
+    entryCredentialType.value = group.credentialType
+    entryInventoryGroupCode.value = group.inventoryGroupCode
+    if (group.batchSummary !== '未分批' && !group.batchSummary.includes(' / '))
+      entryBatchNo.value = group.batchSummary
+    showSuccess(
+      `已把 ${group.skuCode} / ${group.credentialType} / ${group.inventoryGroupCode || '未分组'} 填入入库表单`,
+    )
+  }
+
+  function applySkuSuggestion(skuCode: string) {
+    entrySkuCode.value = String(skuCode || '').trim()
+  }
+
+  function buildImportRows() {
+    const lines = bulkText.value
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(Boolean)
+    const rows: InventoryImportRow[] = []
+    const defaultSkuCode = entrySkuCode.value.trim()
+    const defaultCredentialType = entryCredentialType.value.trim() || 'tencent_code'
+    const defaultBatchNo = entryBatchNo.value.trim()
+
+    for (let index = 0; index < lines.length; index += 1) {
+      const line = lines[index]
+      if (line.includes('|')) {
+        const parts = line.split('|').map((part) => part.trim())
+        if (parts.length !== 4 && parts.length !== 5)
+          throw new Error(
+            `第 ${index + 1} 行格式不正确，请使用 内部SKU|凭据类型|批次号|库存组|凭据内容`,
+          )
+        const [skuCode, credentialType, batchNo, inventoryGroupCode, displayValue] =
+          parts.length === 5 ? parts : [parts[0], parts[1], parts[2], '', parts[3]]
+        if (!skuCode || !displayValue) throw new Error(`第 ${index + 1} 行缺少内部 SKU 或凭据内容`)
+        rows.push({
+          skuCode,
+          credentialType: credentialType || defaultCredentialType,
+          batchNo,
+          inventoryGroupCode: inventoryGroupCode || entryInventoryGroupCode.value.trim(),
+          displayValue,
+        })
+        continue
+      }
+      if (!defaultSkuCode)
+        throw new Error('存在未带内部 SKU 的行，请先填写默认内部履约 SKU，或改用四列导入格式')
+      rows.push({
+        skuCode: defaultSkuCode,
+        credentialType: defaultCredentialType,
+        batchNo: defaultBatchNo,
+        inventoryGroupCode: entryInventoryGroupCode.value.trim(),
+        displayValue: line,
+      })
+    }
+    return rows
+  }
+
+  async function loadInventoryItems(page = pagination.value.page) {
+    loading.value = true
+    errorMessage.value = ''
+    try {
+      const response = await fetchAdminInventoryItems({
+        page,
+        pageSize: pagination.value.pageSize,
+        skuCode: filterSkuCode.value.trim(),
+        credentialType: filterCredentialType.value.trim(),
+        status: filterStatus.value.trim(),
+        batchNo: filterBatchNo.value.trim(),
+        inventoryGroupCode: filterInventoryGroupCode.value.trim(),
+      })
+      items.value = response.data.items
+      pagination.value = response.data.pagination
+    } catch (error) {
+      errorMessage.value = error instanceof Error ? error.message : '读取库存列表失败'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadInventorySkuSuggestions() {
+    skuSuggestionsLoading.value = true
+    try {
+      const response = await fetchAdminInventorySkuSuggestions({
+        credentialType: entryCredentialType.value.trim() || 'tencent_code',
+        inventoryGroupCode: entryInventoryGroupCode.value.trim(),
+        limit: 50,
+      })
+      inventorySkuSuggestions.value = response.data.items
+    } catch (error) {
+      showError(error instanceof Error ? error.message : '读取内部 SKU 建议失败')
+    } finally {
+      skuSuggestionsLoading.value = false
+    }
+  }
+
+  function resetFilters() {
+    filterSkuCode.value = ''
+    filterCredentialType.value = ''
+    filterStatus.value = ''
+    filterBatchNo.value = ''
+    filterInventoryGroupCode.value = ''
+    void loadInventoryItems(1)
+  }
+
+  async function submitCreate() {
+    if (!entrySkuCode.value.trim() || !singleDisplayValue.value.trim()) {
+      showError('请先填写内部履约 SKU 和凭据内容')
+      return
+    }
+    creating.value = true
+    try {
+      await createAdminInventoryItem({
+        skuCode: entrySkuCode.value.trim(),
+        credentialType: entryCredentialType.value.trim() || 'tencent_code',
+        batchNo: entryBatchNo.value.trim(),
+        inventoryGroupCode: entryInventoryGroupCode.value.trim(),
+        displayValue: singleDisplayValue.value.trim(),
+      })
+      showSuccess('库存项已新增')
+      singleDisplayValue.value = ''
+      await loadInventoryItems(1)
+    } catch (error) {
+      showError(error instanceof Error ? error.message : '新增库存项失败')
+    } finally {
+      creating.value = false
+    }
+  }
+
+  async function submitImport() {
+    const rawLines = bulkText.value
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(Boolean)
+    if (rawLines.length === 0) {
+      showError('请至少输入一条待导入库存')
+      return
+    }
+    importing.value = true
+    try {
+      const rows = buildImportRows()
+      const response = await importAdminInventoryItems({ rows })
+      showSuccess(`导入完成，新增 ${response.data.created} 条，重复 ${response.data.duplicated} 条`)
+      bulkText.value = ''
+      await loadInventoryItems(1)
+    } catch (error) {
+      showError(error instanceof Error ? error.message : '导入失败')
+    } finally {
+      importing.value = false
+    }
+  }
+
+  async function runRowAction(
+    inventoryItemId: number,
+    action: () => Promise<unknown>,
+    successMessage: string,
+    confirmText: string,
+  ) {
+    try {
+      await showConfirm(confirmText, '确认操作', {
+        type: 'warning',
+        confirmButtonText: '继续执行',
+        cancelButtonText: '取消',
+      })
+    } catch {
+      return
+    }
+    actionLoadingId.value = inventoryItemId
+    try {
+      await action()
+      showSuccess(successMessage)
+      await loadInventoryItems()
+    } catch (error) {
+      showError(error instanceof Error ? error.message : '操作失败')
+    } finally {
+      actionLoadingId.value = null
+    }
+  }
+
+  watch(entryCredentialType, () => {
+    void loadInventorySkuSuggestions()
+  })
+  watch(entryInventoryGroupCode, () => {
+    void loadInventorySkuSuggestions()
+  })
+
+  onMounted(async () => {
+    await Promise.all([loadInventoryItems(), loadInventorySkuSuggestions()])
+  })
+
+  return {
+    // state
+    loading,
+    importing,
+    creating,
+    actionLoadingId,
+    errorMessage,
+    items,
+    pagination,
+    pageSummary,
+    pageOverview,
+    inventoryGroups,
+    // filter
+    filterSkuCode,
+    filterCredentialType,
+    filterStatus,
+    filterBatchNo,
+    filterInventoryGroupCode,
+    // entry
+    entrySkuCode,
+    entryCredentialType,
+    entryBatchNo,
+    entryInventoryGroupCode,
+    singleDisplayValue,
+    bulkText,
+    skuSuggestionsLoading,
+    inventorySkuSuggestions,
+    entrySkuSuggestions,
+    // actions
+    loadInventoryItems,
+    resetFilters,
+    submitCreate,
+    submitImport,
+    runRowAction,
+    useGroupAsFilter,
+    useGroupAsEntry,
+    applySkuSuggestion,
+    // formatters
+    getCredentialTypeLabel,
+    getCredentialTypeHint,
+    getSkuNamingHint,
+    formatInventoryStatus,
+    getGroupSuggestion,
+    // utils
+    hasAdminRole,
+    formatAdminDateTime,
+    adminInventoryCredentialTypeOptions,
+    adminInventoryStatusOptions,
+  }
+}
diff --git a/apps/frontend/src/views/admin/users/AdminUsersView.vue b/apps/frontend/src/views/admin/users/AdminUsersView.vue
index f3bfcc40..9890103e 100644
--- a/apps/frontend/src/views/admin/users/AdminUsersView.vue
+++ b/apps/frontend/src/views/admin/users/AdminUsersView.vue
@@ -1,212 +1,40 @@
 <script setup lang="ts">
-import { ArrowDown } from '@element-plus/icons-vue'
-import { onMounted, ref } from 'vue'
-
 import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
-import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
-import {
-  isFeedbackDismissed,
-  showConfirm,
-  showError,
-  showPrompt,
-  showSuccess,
-} from '@/lib/feedback'
-import {
-  createAdminUser,
-  fetchAdminUsers,
-  resetAdminUserPassword,
-  updateAdminUserInventoryGroups,
-  updateAdminUserRole,
-  updateAdminUserStatus,
-} from '@/services/admin'
-import type { AdminPagination, AdminRole, AdminUserListItem } from '@/types/admin'
-import { getAdminUserId, hasAdminRole } from '@/utils/admin-auth'
-import { adminUserRoleOptions, adminUserStatusOptions } from '@/utils/admin-options'
-import { formatAdminDateTime } from '@/utils/admin-time'
 
-const loading = ref(true)
-const creating = ref(false)
-const actionLoadingId = ref<number | null>(null)
-const errorMessage = ref('')
-const username = ref('')
-const role = ref('')
-const status = ref('')
-const createUsername = ref('')
-const createPassword = ref('')
-const createRole = ref<AdminRole>('operator')
-const items = ref<AdminUserListItem[]>([])
-const pagination = ref<AdminPagination>({ page: 1, pageSize: 20, total: 0 })
+import AdminUsersFilterSection from './components/AdminUsersFilterSection.vue'
+import AdminUsersTable from './components/AdminUsersTable.vue'
+import { useAdminUsers } from './composables/useAdminUsers'
 
-function isCurrentUser(userId: number) {
-  return getAdminUserId() === userId
-}
-
-function formatRoleLabel(role: AdminRole) {
-  if (role === 'admin') return '管理员'
-  if (role === 'support') return '客服'
-  return '普通运营'
-}
-
-function formatInventoryGroups(item: AdminUserListItem) {
-  if (item.role !== 'support') return ['不限库存组']
-  if (item.inventoryGroupCodes.length === 0) return ['未绑定']
-  return item.inventoryGroupCodes
-}
-
-async function loadUsers(page = pagination.value.page) {
-  if (!hasAdminRole('admin')) {
-    loading.value = false
-    return
-  }
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    const response = await fetchAdminUsers({
-      page,
-      pageSize: pagination.value.pageSize,
-      username: username.value.trim(),
-      role: role.value.trim(),
-      status: status.value.trim(),
-    })
-    items.value = response.data.items
-    pagination.value = response.data.pagination
-  } catch (error) {
-    errorMessage.value = error instanceof Error ? error.message : '读取后台用户失败'
-  } finally {
-    loading.value = false
-  }
-}
-
-async function submitCreate() {
-  if (!createUsername.value.trim() || !createPassword.value.trim()) {
-    showError('请填写账号和密码')
-    return
-  }
-  creating.value = true
-  try {
-    await createAdminUser({
-      username: createUsername.value.trim(),
-      password: createPassword.value.trim(),
-      role: createRole.value,
-      status: 'active',
-    })
-    showSuccess('后台用户已创建')
-    createUsername.value = ''
-    createPassword.value = ''
-    createRole.value = 'operator'
-    await loadUsers(1)
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '创建后台用户失败')
-  } finally {
-    creating.value = false
-  }
-}
-
-async function updateRole(item: AdminUserListItem, nextRole: AdminRole) {
-  if (item.role === nextRole) return
-  try {
-    await showConfirm(
-      `确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`,
-      '确认操作',
-      { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' },
-    )
-  } catch {
-    return
-  }
-  actionLoadingId.value = item.userId
-  try {
-    await updateAdminUserRole(item.userId, { role: nextRole })
-    showSuccess('用户角色已更新')
-    await loadUsers()
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '更新用户角色失败')
-  } finally {
-    actionLoadingId.value = null
-  }
-}
-
-async function toggleStatus(item: AdminUserListItem) {
-  const nextStatus = item.status === 'active' ? 'disabled' : 'active'
-  try {
-    await showConfirm(
-      `确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`,
-      '确认操作',
-      {
-        type: nextStatus === 'active' ? 'info' : 'warning',
-        confirmButtonText: '继续执行',
-        cancelButtonText: '取消',
-      },
-    )
-  } catch {
-    return
-  }
-  actionLoadingId.value = item.userId
-  try {
-    await updateAdminUserStatus(item.userId, { status: nextStatus })
-    showSuccess('用户状态已更新')
-    await loadUsers()
-  } catch (error) {
-    showError(error instanceof Error ? error.message : '更新用户状态失败')
-  } finally {
-    actionLoadingId.value = null
-  }
-}
-
-async function promptResetPassword(item: AdminUserListItem) {
-  try {
-    const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', {
-      inputType: 'password',
-      inputPlaceholder: '至少 8 位',
-      confirmButtonText: '提交',
-      cancelButtonText: '取消',
-      inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位',
-    })
-    actionLoadingId.value = item.userId
-    await resetAdminUserPassword(item.userId, { password: result.value.trim() })
-    showSuccess('用户密码已重置')
-    await loadUsers()
-  } catch (error) {
-    if (isFeedbackDismissed(error)) return
-    showError(error instanceof Error ? error.message : '重置密码失败')
-  } finally {
-    actionLoadingId.value = null
-  }
-}
-
-async function promptUpdateInventoryGroups(item: AdminUserListItem) {
-  if (item.role !== 'support') {
-    showError('仅客服账号需要绑定库存组')
-    return
-  }
-  try {
-    const result = await showPrompt(
-      `请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`,
-      '配置库存组',
-      {
-        inputType: 'text',
-        inputValue: item.inventoryGroupCodes.join(','),
-        inputPlaceholder: '例如 A组,B组,售后组',
-        confirmButtonText: '保存',
-        cancelButtonText: '取消',
-      },
-    )
-    const inventoryGroupCodes = String(result.value || '')
-      .split(',')
-      .map((v) => v.trim())
-      .filter(Boolean)
-    actionLoadingId.value = item.userId
-    await updateAdminUserInventoryGroups(item.userId, { inventoryGroupCodes })
-    showSuccess('用户库存组已更新')
-    await loadUsers()
-  } catch (error) {
-    if (isFeedbackDismissed(error)) return
-    showError(error instanceof Error ? error.message : '更新库存组失败')
-  } finally {
-    actionLoadingId.value = null
-  }
-}
-
-onMounted(loadUsers)
+const {
+  loading,
+  creating,
+  actionLoadingId,
+  errorMessage,
+  items,
+  pagination,
+  // filter
+  username,
+  role,
+  status,
+  // create
+  createUsername,
+  createPassword,
+  createRole,
+  // actions
+  loadUsers,
+  submitCreate,
+  updateRole,
+  toggleStatus,
+  promptResetPassword,
+  promptUpdateInventoryGroups,
+  // formatters
+  isCurrentUser,
+  formatRoleLabel,
+  formatInventoryGroups,
+  // utils
+  hasAdminRole,
+  formatAdminDateTime,
+} = useAdminUsers()
 </script>
 
 <template>
@@ -219,66 +47,17 @@ onMounted(loadUsers)
     <el-result v-if="!hasAdminRole('admin')" icon="warning" title="仅管理员可以访问用户管理。" />
 
     <template v-else>
-      <section class="users-tools">
-        <div class="filter-row">
-          <el-input
-            v-model="username"
-            class="filter-control filter-control--username"
-            placeholder="账号筛选"
-            clearable
-            @keyup.enter="loadUsers(1)"
-          />
-          <el-select
-            v-model="role"
-            class="filter-control filter-control--role"
-            placeholder="角色"
-            clearable
-          >
-            <el-option
-              v-for="opt in adminUserRoleOptions"
-              :key="opt.value"
-              :label="opt.label"
-              :value="opt.value"
-            />
-          </el-select>
-          <el-select
-            v-model="status"
-            class="filter-control filter-control--status"
-            placeholder="状态"
-            clearable
-          >
-            <el-option
-              v-for="opt in adminUserStatusOptions"
-              :key="opt.value"
-              :label="opt.label"
-              :value="opt.value"
-            />
-          </el-select>
-          <el-button round type="primary" @click="loadUsers(1)">查询列表</el-button>
-        </div>
-        <div class="create-row">
-          <el-input
-            v-model="createUsername"
-            class="filter-control filter-control--username"
-            placeholder="新账号"
-          />
-          <el-input
-            v-model="createPassword"
-            class="filter-control filter-control--password"
-            type="password"
-            show-password
-            placeholder="新密码，至少 8 位"
-          />
-          <el-select v-model="createRole" class="filter-control filter-control--role">
-            <el-option value="operator" label="普通运营" />
-            <el-option value="support" label="客服" />
-            <el-option value="admin" label="管理员" />
-          </el-select>
-          <el-button round :loading="creating" type="primary" @click="submitCreate"
-            >新增用户</el-button
-          >
-        </div>
-      </section>
+      <AdminUsersFilterSection
+        v-model:username="username"
+        v-model:role="role"
+        v-model:status="status"
+        v-model:create-username="createUsername"
+        v-model:create-password="createPassword"
+        v-model:create-role="createRole"
+        :creating="creating"
+        :load-users="loadUsers"
+        :submit-create="submitCreate"
+      />
 
       <el-alert
         v-if="errorMessage"
@@ -289,227 +68,25 @@ onMounted(loadUsers)
         class="mt-4"
       />
 
-      <el-card shadow="never" class="section-card">
-        <div class="users-table-toolbar table-toolbar">
-          <strong>用户列表</strong>
-          <span>共 {{ pagination.total }} 个账号</span>
-        </div>
-        <el-table
-          :data="items"
-          stripe
-          size="small"
-          v-loading="loading"
-          element-loading-text="用户列表加载中"
-          class="users-table data-table w-full"
-        >
-          <el-table-column prop="userId" label="ID" width="52" align="center" />
-          <el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
-          <el-table-column label="角色" width="82">
-            <template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
-          </el-table-column>
-          <el-table-column label="库存组" width="112">
-            <template #default="{ row }">
-              <div class="inventory-tags">
-                <el-tag
-                  v-for="(code, i) in formatInventoryGroups(row)"
-                  :key="i"
-                  size="small"
-                  :type="code === '未绑定' || code === '不限库存组' ? 'info' : undefined"
-                  >{{ code }}</el-tag
-                >
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="状态" width="128">
-            <template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
-          </el-table-column>
-          <el-table-column label="创建时间" width="154">
-            <template #default="{ row }"
-              ><span class="date-cell">{{ formatAdminDateTime(row.createdAt) }}</span></template
-            >
-          </el-table-column>
-          <el-table-column label="更新时间" width="154">
-            <template #default="{ row }"
-              ><span class="date-cell">{{ formatAdminDateTime(row.updatedAt) }}</span></template
-            >
-          </el-table-column>
-          <el-table-column label="操作" min-width="356">
-            <template #default="{ row }">
-              <div class="action-stack">
-                <el-dropdown
-                  trigger="click"
-                  :disabled="isCurrentUser(row.userId)"
-                  @command="(cmd: string) => updateRole(row, cmd as AdminRole)"
-                >
-                  <el-button
-                    :loading="actionLoadingId === row.userId"
-                    size="small"
-                    :disabled="isCurrentUser(row.userId)"
-                  >
-                    改角色<el-icon class="el-icon--right"><ArrowDown /></el-icon>
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item command="admin" :disabled="row.role === 'admin'"
-                        >设为管理员</el-dropdown-item
-                      >
-                      <el-dropdown-item command="operator" :disabled="row.role === 'operator'"
-                        >设为运营</el-dropdown-item
-                      >
-                      <el-dropdown-item command="support" :disabled="row.role === 'support'"
-                        >设为客服</el-dropdown-item
-                      >
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-                <el-button
-                  :loading="actionLoadingId === row.userId"
-                  size="small"
-                  :disabled="isCurrentUser(row.userId)"
-                  @click="toggleStatus(row)"
-                  >{{ row.status === 'active' ? '停用' : '启用' }}</el-button
-                >
-                <el-button
-                  :loading="actionLoadingId === row.userId"
-                  size="small"
-                  :disabled="row.role !== 'support'"
-                  @click="promptUpdateInventoryGroups(row)"
-                  >配库存组</el-button
-                >
-                <el-button
-                  :loading="actionLoadingId === row.userId"
-                  size="small"
-                  type="primary"
-                  @click="promptResetPassword(row)"
-                  >重置密码</el-button
-                >
-                <el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前账号</el-tag>
-              </div>
-            </template>
-          </el-table-column>
-          <template #empty><el-empty :image-size="60" description="暂无用户" /></template>
-        </el-table>
-        <el-pagination
-          v-if="pagination.total > 0"
-          v-model:current-page="pagination.page"
-          :page-size="pagination.pageSize"
-          :total="pagination.total"
-          layout="total, prev, pager, next"
-          class="pagination-center"
-          @current-change="loadUsers"
-        />
-      </el-card>
+      <AdminUsersTable
+        :loading="loading"
+        :items="items"
+        :pagination="pagination"
+        :action-loading-id="actionLoadingId"
+        :load-users="loadUsers"
+        :is-current-user="isCurrentUser"
+        :update-role="updateRole"
+        :toggle-status="toggleStatus"
+        :prompt-reset-password="promptResetPassword"
+        :prompt-update-inventory-groups="promptUpdateInventoryGroups"
+        :format-role-label="formatRoleLabel"
+        :format-inventory-groups="formatInventoryGroups"
+        :format-admin-date-time="formatAdminDateTime"
+      />
     </template>
   </div>
 </template>
 
 <style scoped>
-@import '../../../styles/admin-list-pages.css';
-
-.users-tools {
-  display: grid;
-  gap: var(--space-3);
-  margin-top: var(--space-4);
-}
-.filter-row,
-.create-row {
-  display: flex;
-  gap: var(--space-3);
-  align-items: center;
-  flex-wrap: wrap;
-}
-.create-row {
-  padding-top: var(--space-3);
-  border-top: 1px solid rgba(86, 108, 138, 0.12);
-}
-.filter-control {
-  min-width: 0;
-}
-.filter-control--username {
-  width: 150px;
-}
-.filter-control--role,
-.filter-control--status {
-  width: 128px;
-}
-.filter-control--password {
-  width: 210px;
-}
-.users-table-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  margin-bottom: var(--space-2);
-}
-.users-table-toolbar strong {
-  color: var(--text-primary);
-  font-size: var(--text-base);
-}
-.users-table-toolbar span {
-  color: var(--text-secondary);
-  font-size: var(--text-xs);
-  font-weight: 700;
-}
-.users-table {
-  background: rgba(255, 255, 255, 0.36);
-}
-.users-table :deep(td.el-table__cell) {
-  height: 44px;
-  background: rgba(255, 255, 255, 0.46);
-}
-.users-table :deep(.el-table__row--striped td.el-table__cell) {
-  background: rgba(255, 255, 255, 0.62);
-}
-.users-table :deep(.el-table__body tr:hover > td.el-table__cell) {
-  background: var(--el-table-row-hover-bg-color);
-}
-.inventory-tags {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  white-space: nowrap;
-}
-.inventory-tags :deep(.el-tag) {
-  flex: 0 0 auto;
-}
-.date-cell {
-  display: inline-block;
-  white-space: nowrap;
-  font-size: var(--text-xs);
-}
-.action-stack {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: 6px;
-  align-items: center;
-  white-space: nowrap;
-}
-.action-stack :deep(.el-button) {
-  flex: 0 0 auto;
-  margin-left: 0;
-  padding: 5px 8px;
-}
-.action-stack :deep(.el-tag) {
-  flex: 0 0 auto;
-  padding: 0 7px;
-}
-.action-stack :deep(.el-icon--right) {
-  margin-left: 4px;
-}
-
-@media (max-width: 640px) {
-  .filter-control,
-  .filter-control--username,
-  .filter-control--role,
-  .filter-control--status,
-  .filter-control--password {
-    width: 100%;
-  }
-
-  .filter-row :deep(.el-button),
-  .create-row :deep(.el-button) {
-    width: 100%;
-  }
-}
+@import '../../styles/admin-list-pages.css';
 </style>
diff --git a/apps/frontend/src/views/admin/users/components/AdminUsersFilterSection.vue b/apps/frontend/src/views/admin/users/components/AdminUsersFilterSection.vue
new file mode 100644
index 00000000..287578e5
--- /dev/null
+++ b/apps/frontend/src/views/admin/users/components/AdminUsersFilterSection.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { AdminRole } from '@/types/admin'
+import { adminUserRoleOptions, adminUserStatusOptions } from '@/utils/admin-options'
+
+const username = defineModel<string>('username', { required: true })
+const role = defineModel<string>('role', { required: true })
+const status = defineModel<string>('status', { required: true })
+const createUsername = defineModel<string>('createUsername', { required: true })
+const createPassword = defineModel<string>('createPassword', { required: true })
+const createRole = defineModel<AdminRole>('createRole', { required: true })
+
+defineProps<{
+  creating: boolean
+  loadUsers: (page?: number) => Promise<void>
+  submitCreate: () => Promise<void>
+}>()
+</script>
+
+<template>
+  <section class="users-tools">
+    <div class="filter-row">
+      <el-input
+        v-model="username"
+        class="filter-control filter-control--username"
+        placeholder="账号筛选"
+        clearable
+        @keyup.enter="loadUsers(1)"
+      />
+      <el-select
+        v-model="role"
+        class="filter-control filter-control--role"
+        placeholder="角色"
+        clearable
+      >
+        <el-option
+          v-for="opt in adminUserRoleOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+      <el-select
+        v-model="status"
+        class="filter-control filter-control--status"
+        placeholder="状态"
+        clearable
+      >
+        <el-option
+          v-for="opt in adminUserStatusOptions"
+          :key="opt.value"
+          :label="opt.label"
+          :value="opt.value"
+        />
+      </el-select>
+      <el-button round type="primary" @click="loadUsers(1)">查询列表</el-button>
+    </div>
+    <div class="create-row">
+      <el-input
+        v-model="createUsername"
+        class="filter-control filter-control--username"
+        placeholder="新账号"
+      />
+      <el-input
+        v-model="createPassword"
+        class="filter-control filter-control--password"
+        type="password"
+        show-password
+        placeholder="新密码，至少 8 位"
+      />
+      <el-select v-model="createRole" class="filter-control filter-control--role">
+        <el-option value="operator" label="普通运营" />
+        <el-option value="support" label="客服" />
+        <el-option value="admin" label="管理员" />
+      </el-select>
+      <el-button round :loading="creating" type="primary" @click="submitCreate"
+        >新增用户</el-button
+      >
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.users-tools {
+  display: grid;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+}
+.filter-row,
+.create-row {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.create-row {
+  padding-top: var(--space-3);
+  border-top: 1px solid rgba(86, 108, 138, 0.12);
+}
+.filter-control {
+  min-width: 0;
+}
+.filter-control--username {
+  width: 150px;
+}
+.filter-control--role,
+.filter-control--status {
+  width: 128px;
+}
+.filter-control--password {
+  width: 210px;
+}
+
+@media (max-width: 640px) {
+  .filter-control,
+  .filter-control--username,
+  .filter-control--role,
+  .filter-control--status,
+  .filter-control--password {
+    width: 100%;
+  }
+
+  .filter-row :deep(.el-button),
+  .create-row :deep(.el-button) {
+    width: 100%;
+  }
+}
+</style>
diff --git a/apps/frontend/src/views/admin/users/components/AdminUsersTable.vue b/apps/frontend/src/views/admin/users/components/AdminUsersTable.vue
new file mode 100644
index 00000000..ccfd079a
--- /dev/null
+++ b/apps/frontend/src/views/admin/users/components/AdminUsersTable.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { ArrowDown } from '@element-plus/icons-vue'
+import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import type { AdminRole, AdminUserListItem } from '@/types/admin'
+
+defineProps<{
+  loading: boolean
+  items: AdminUserListItem[]
+  pagination: { page: number; pageSize: number; total: number }
+  actionLoadingId: number | null
+  loadUsers: (page?: number) => Promise<void>
+  isCurrentUser: (userId: number) => boolean
+  updateRole: (item: AdminUserListItem, nextRole: AdminRole) => Promise<void>
+  toggleStatus: (item: AdminUserListItem) => Promise<void>
+  promptResetPassword: (item: AdminUserListItem) => Promise<void>
+  promptUpdateInventoryGroups: (item: AdminUserListItem) => Promise<void>
+  formatRoleLabel: (role: AdminRole) => string
+  formatInventoryGroups: (item: AdminUserListItem) => string[]
+  formatAdminDateTime: (value: string) => string
+}>()
+</script>
+
+<template>
+  <el-card shadow="never" class="section-card">
+    <div class="users-table-toolbar table-toolbar">
+      <strong>用户列表</strong>
+      <span>共 {{ pagination.total }} 个账号</span>
+    </div>
+    <el-table
+      :data="items"
+      stripe
+      size="small"
+      v-loading="loading"
+      element-loading-text="用户列表加载中"
+      class="users-table data-table w-full"
+    >
+      <el-table-column prop="userId" label="ID" width="52" align="center" />
+      <el-table-column prop="username" label="账号" width="112" show-overflow-tooltip />
+      <el-table-column label="角色" width="82">
+        <template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
+      </el-table-column>
+      <el-table-column label="库存组" width="112">
+        <template #default="{ row }">
+          <div class="inventory-tags">
+            <el-tag
+              v-for="(code, i) in formatInventoryGroups(row)"
+              :key="i"
+              size="small"
+              :type="code === '未绑定' || code === '不限库存组' ? 'info' : undefined"
+              >{{ code }}</el-tag
+            >
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="128">
+        <template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
+      </el-table-column>
+      <el-table-column label="创建时间" width="154">
+        <template #default="{ row }"
+          ><span class="date-cell">{{ formatAdminDateTime(row.createdAt) }}</span></template
+        >
+      </el-table-column>
+      <el-table-column label="更新时间" width="154">
+        <template #default="{ row }"
+          ><span class="date-cell">{{ formatAdminDateTime(row.updatedAt) }}</span></template
+        >
+      </el-table-column>
+      <el-table-column label="操作" min-width="356">
+        <template #default="{ row }">
+          <div class="action-stack">
+            <el-dropdown
+              trigger="click"
+              :disabled="isCurrentUser(row.userId)"
+              @command="(cmd: string) => updateRole(row, cmd as AdminRole)"
+            >
+              <el-button
+                :loading="actionLoadingId === row.userId"
+                size="small"
+                :disabled="isCurrentUser(row.userId)"
+              >
+                改角色<el-icon class="el-icon--right"><ArrowDown /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="admin" :disabled="row.role === 'admin'"
+                    >设为管理员</el-dropdown-item
+                  >
+                  <el-dropdown-item command="operator" :disabled="row.role === 'operator'"
+                    >设为运营</el-dropdown-item
+                  >
+                  <el-dropdown-item command="support" :disabled="row.role === 'support'"
+                    >设为客服</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-button
+              :loading="actionLoadingId === row.userId"
+              size="small"
+              :disabled="isCurrentUser(row.userId)"
+              @click="toggleStatus(row)"
+              >{{ row.status === 'active' ? '停用' : '启用' }}</el-button
+            >
+            <el-button
+              :loading="actionLoadingId === row.userId"
+              size="small"
+              :disabled="row.role !== 'support'"
+              @click="promptUpdateInventoryGroups(row)"
+              >配库存组</el-button
+            >
+            <el-button
+              :loading="actionLoadingId === row.userId"
+              size="small"
+              type="primary"
+              @click="promptResetPassword(row)"
+              >重置密码</el-button
+            >
+            <el-tag v-if="isCurrentUser(row.userId)" size="small" type="info">当前账号</el-tag>
+          </div>
+        </template>
+      </el-table-column>
+      <template #empty><el-empty :image-size="60" description="暂无用户" /></template>
+    </el-table>
+    <el-pagination
+      v-if="pagination.total > 0"
+      v-model:current-page="pagination.page"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      layout="total, prev, pager, next"
+      class="pagination-center"
+      @current-change="loadUsers"
+    />
+  </el-card>
+</template>
+
+<style scoped>
+.users-table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-2);
+}
+.users-table-toolbar strong {
+  color: var(--text-primary);
+  font-size: var(--text-base);
+}
+.users-table-toolbar span {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+.users-table {
+  background: rgba(255, 255, 255, 0.36);
+}
+.users-table :deep(td.el-table__cell) {
+  height: 44px;
+  background: rgba(255, 255, 255, 0.46);
+}
+.users-table :deep(.el-table__row--striped td.el-table__cell) {
+  background: rgba(255, 255, 255, 0.62);
+}
+.users-table :deep(.el-table__body tr:hover > td.el-table__cell) {
+  background: var(--el-table-row-hover-bg-color);
+}
+.inventory-tags {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+}
+.inventory-tags :deep(.el-tag) {
+  flex: 0 0 auto;
+}
+.date-cell {
+  display: inline-block;
+  white-space: nowrap;
+  font-size: var(--text-xs);
+}
+.action-stack {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 6px;
+  align-items: center;
+  white-space: nowrap;
+}
+.action-stack :deep(.el-button) {
+  flex: 0 0 auto;
+  margin-left: 0;
+  padding: 5px 8px;
+}
+.action-stack :deep(.el-tag) {
+  flex: 0 0 auto;
+  padding: 0 7px;
+}
+.action-stack :deep(.el-icon--right) {
+  margin-left: 4px;
+}
+</style>
diff --git a/apps/frontend/src/views/admin/users/composables/useAdminUsers.ts b/apps/frontend/src/views/admin/users/composables/useAdminUsers.ts
new file mode 100644
index 00000000..c08944e1
--- /dev/null
+++ b/apps/frontend/src/views/admin/users/composables/useAdminUsers.ts
@@ -0,0 +1,241 @@
+import { onMounted, ref } from 'vue'
+
+import {
+  isFeedbackDismissed,
+  showConfirm,
+  showError,
+  showPrompt,
+  showSuccess,
+} from '@/lib/feedback'
+import {
+  createAdminUser,
+  fetchAdminUsers,
+  resetAdminUserPassword,
+  updateAdminUserInventoryGroups,
+  updateAdminUserRole,
+  updateAdminUserStatus,
+} from '@/services/admin'
+import type { AdminPagination, AdminRole, AdminUserListItem } from '@/types/admin'
+import { getAdminUserId, hasAdminRole } from '@/utils/admin-auth'
+import { adminUserRoleOptions, adminUserStatusOptions } from '@/utils/admin-options'
+import { formatAdminDateTime } from '@/utils/admin-time'
+
+export function useAdminUsers() {
+  const loading = ref(true)
+  const creating = ref(false)
+  const actionLoadingId = ref<number | null>(null)
+  const errorMessage = ref('')
+  const username = ref('')
+  const role = ref('')
+  const status = ref('')
+  const createUsername = ref('')
+  const createPassword = ref('')
+  const createRole = ref<AdminRole>('operator')
+  const items = ref<AdminUserListItem[]>([])
+  const pagination = ref<AdminPagination>({ page: 1, pageSize: 20, total: 0 })
+
+  function isCurrentUser(userId: number) {
+    return getAdminUserId() === userId
+  }
+
+  function formatRoleLabel(role: AdminRole) {
+    if (role === 'admin') return '管理员'
+    if (role === 'support') return '客服'
+    return '普通运营'
+  }
+
+  function formatInventoryGroups(item: AdminUserListItem) {
+    if (item.role !== 'support') return ['不限库存组']
+    if (item.inventoryGroupCodes.length === 0) return ['未绑定']
+    return item.inventoryGroupCodes
+  }
+
+  async function loadUsers(page = pagination.value.page) {
+    if (!hasAdminRole('admin')) {
+      loading.value = false
+      return
+    }
+    loading.value = true
+    errorMessage.value = ''
+    try {
+      const response = await fetchAdminUsers({
+        page,
+        pageSize: pagination.value.pageSize,
+        username: username.value.trim(),
+        role: role.value.trim(),
+        status: status.value.trim(),
+      })
+      items.value = response.data.items
+      pagination.value = response.data.pagination
+    } catch (error) {
+      errorMessage.value = error instanceof Error ? error.message : '读取后台用户失败'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function submitCreate() {
+    if (!createUsername.value.trim() || !createPassword.value.trim()) {
+      showError('请填写账号和密码')
+      return
+    }
+    creating.value = true
+    try {
+      await createAdminUser({
+        username: createUsername.value.trim(),
+        password: createPassword.value.trim(),
+        role: createRole.value,
+        status: 'active',
+      })
+      showSuccess('后台用户已创建')
+      createUsername.value = ''
+      createPassword.value = ''
+      createRole.value = 'operator'
+      await loadUsers(1)
+    } catch (error) {
+      showError(error instanceof Error ? error.message : '创建后台用户失败')
+    } finally {
+      creating.value = false
+    }
+  }
+
+  async function updateRole(item: AdminUserListItem, nextRole: AdminRole) {
+    if (item.role === nextRole) return
+    try {
+      await showConfirm(
+        `确认将 ${item.username} 调整为${formatRoleLabel(nextRole)}吗？`,
+        '确认操作',
+        { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' },
+      )
+    } catch {
+      return
+    }
+    actionLoadingId.value = item.userId
+    try {
+      await updateAdminUserRole(item.userId, { role: nextRole })
+      showSuccess('用户角色已更新')
+      await loadUsers()
+    } catch (error) {
+      showError(error instanceof Error ? error.message : '更新用户角色失败')
+    } finally {
+      actionLoadingId.value = null
+    }
+  }
+
+  async function toggleStatus(item: AdminUserListItem) {
+    const nextStatus = item.status === 'active' ? 'disabled' : 'active'
+    try {
+      await showConfirm(
+        `确认将 ${item.username}${nextStatus === 'active' ? '启用' : '停用'}吗？`,
+        '确认操作',
+        {
+          type: nextStatus === 'active' ? 'info' : 'warning',
+          confirmButtonText: '继续执行',
+          cancelButtonText: '取消',
+        },
+      )
+    } catch {
+      return
+    }
+    actionLoadingId.value = item.userId
+    try {
+      await updateAdminUserStatus(item.userId, { status: nextStatus })
+      showSuccess('用户状态已更新')
+      await loadUsers()
+    } catch (error) {
+      showError(error instanceof Error ? error.message : '更新用户状态失败')
+    } finally {
+      actionLoadingId.value = null
+    }
+  }
+
+  async function promptResetPassword(item: AdminUserListItem) {
+    try {
+      const result = await showPrompt(`请输入 ${item.username} 的新密码`, '重置密码', {
+        inputType: 'password',
+        inputPlaceholder: '至少 8 位',
+        confirmButtonText: '提交',
+        cancelButtonText: '取消',
+        inputValidator: (value) => value.trim().length >= 8 || '密码至少 8 位',
+      })
+      actionLoadingId.value = item.userId
+      await resetAdminUserPassword(item.userId, { password: result.value.trim() })
+      showSuccess('用户密码已重置')
+      await loadUsers()
+    } catch (error) {
+      if (isFeedbackDismissed(error)) return
+      showError(error instanceof Error ? error.message : '重置密码失败')
+    } finally {
+      actionLoadingId.value = null
+    }
+  }
+
+  async function promptUpdateInventoryGroups(item: AdminUserListItem) {
+    if (item.role !== 'support') {
+      showError('仅客服账号需要绑定库存组')
+      return
+    }
+    try {
+      const result = await showPrompt(
+        `请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`,
+        '配置库存组',
+        {
+          inputType: 'text',
+          inputValue: item.inventoryGroupCodes.join(','),
+          inputPlaceholder: '例如 A组,B组,售后组',
+          confirmButtonText: '保存',
+          cancelButtonText: '取消',
+        },
+      )
+      const inventoryGroupCodes = String(result.value || '')
+        .split(',')
+        .map((v) => v.trim())
+        .filter(Boolean)
+      actionLoadingId.value = item.userId
+      await updateAdminUserInventoryGroups(item.userId, { inventoryGroupCodes })
+      showSuccess('用户库存组已更新')
+      await loadUsers()
+    } catch (error) {
+      if (isFeedbackDismissed(error)) return
+      showError(error instanceof Error ? error.message : '更新库存组失败')
+    } finally {
+      actionLoadingId.value = null
+    }
+  }
+
+  onMounted(loadUsers)
+
+  return {
+    // state
+    loading,
+    creating,
+    actionLoadingId,
+    errorMessage,
+    items,
+    pagination,
+    // filter
+    username,
+    role,
+    status,
+    // create
+    createUsername,
+    createPassword,
+    createRole,
+    // actions
+    loadUsers,
+    submitCreate,
+    updateRole,
+    toggleStatus,
+    promptResetPassword,
+    promptUpdateInventoryGroups,
+    // formatters
+    isCurrentUser,
+    formatRoleLabel,
+    formatInventoryGroups,
+    // utils
+    hasAdminRole,
+    formatAdminDateTime,
+    adminUserRoleOptions,
+    adminUserStatusOptions,
+  }
+}