feat: 完成后台联调与通用列表组件

src/views/WarehousesView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { MapPin, Pencil, Plus, Power, RotateCcw, Search, Warehouse as WarehouseIcon } from '@lucide/vue'
-import MetricStrip from '@/components/MetricStrip.vue'
+import { MapPin, Pencil, Plus, Power, Warehouse as WarehouseIcon } from '@lucide/vue'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import { useUnsavedWorkRegistration } from '@/composables/useUnsavedWorkRegistration'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/api/http'
 import {
@@ -18,19 +19,29 @@ import {
 import { useAccessPreviewStore } from '@/stores/accessPreview'
 import type { Warehouse } from '@/types/admin'
 
-const tenantStorageKey = 'cc-admin-warehouse-tenant-id'
+const fixedTenantId = 10001
 const access = useAccessPreviewStore()
 const editorOpen = ref(false)
 const saving = ref(false)
 const loading = ref(false)
 const page = ref(1)
-const pageSize = 10
-const tenantInput = ref(sessionStorage.getItem(tenantStorageKey) || '')
+const pageSize = ref(10)
 const loadedTenantId = ref<number | null>(null)
 const loadError = ref<ApiErrorDetails | null>(null)
 const detailWarningCount = ref(0)
 const statusLoadingIds = ref(new Set<string>())
-const filters = reactive({ keyword: '', status: '' as Warehouse['status'] | '' })
+type WarehouseFilters = QueryModel & { keyword: string; status: Warehouse['status'] | '' }
+const filters = ref<WarehouseFilters>({ keyword: '', status: '' })
+const appliedFilters = ref<WarehouseFilters>({ ...filters.value })
+const queryFields: QueryField[] = [
+  { key: 'keyword', type: 'input', placeholder: '仓库名称、编码、城市或地址' },
+  {
+    key: 'status', type: 'select', placeholder: '全部状态', options: [
+      { label: '启用', value: 'ACTIVE' },
+      { label: '停用', value: 'INACTIVE' },
+    ],
+  },
+]
 let loadSequence = 0
 
 interface WarehouseRow extends Warehouse {
@@ -38,12 +49,29 @@ interface WarehouseRow extends Warehouse {
 }
 
 const rows = ref<WarehouseRow[]>([])
+const warehouseColumns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' },
+  { key: 'warehouse', label: '仓库', minWidth: 200, slotName: 'warehouse' },
+  { key: 'city', label: '所在城市', minWidth: 130, slotName: 'city' },
+  { key: 'address', label: '收货地址', minWidth: 260, slotName: 'address' },
+  { key: 'contact', label: '联系人', minWidth: 150, slotName: 'contact' },
+  { prop: 'businessHours', label: '收货时间', minWidth: 190, formatter: (row: WarehouseRow) => row.businessHours || '-' },
+  { key: 'status', label: '状态', width: 100, slotName: 'status' },
+]
 
 const emptyForm = (): Omit<Warehouse, 'updatedAt'> => ({
   id: '', code: '', name: '', province: '', city: '', address: '', contactName: '', contactPhone: '',
   businessHours: '周一至周六 08:30-18:00', status: 'ACTIVE', remark: '',
 })
 const form = reactive(emptyForm())
+type WarehouseRequiredField = 'code' | 'name' | 'city' | 'address'
+const requiredFieldMessages: Record<WarehouseRequiredField, string> = {
+  code: '请输入仓库编码',
+  name: '请输入仓库名称',
+  city: '请输入城市',
+  address: '请输入详细地址',
+}
+const formErrors = reactive<Record<WarehouseRequiredField, string>>({ code: '', name: '', city: '', address: '' })
 const editorLabel = computed(() => form.id ? '编辑收货仓' : '新增收货仓')
 const editorPermission = computed(() => form.id ? 'platform:warehouse:edit' : 'platform:warehouse:create')
 const { captureBaseline } = useUnsavedWorkRegistration({
@@ -54,27 +82,14 @@ const { captureBaseline } = useUnsavedWorkRegistration({
   requiredPermission: editorPermission,
 })
 
-function parseTenantId(value = tenantInput.value) {
-  const normalized = value.trim()
-  if (!/^[1-9]\d*$/.test(normalized)) return null
-  const tenantId = Number(normalized)
-  return Number.isSafeInteger(tenantId) ? tenantId : null
-}
-
-const tenantMatchesLoaded = computed(() => parseTenantId() === loadedTenantId.value)
+const warehouseReady = computed(() => loadedTenantId.value === fixedTenantId && !loading.value)
 const filteredRows = computed(() => rows.value.filter((warehouse) => {
-  const keyword = filters.keyword.trim().toLowerCase()
+  const keyword = appliedFilters.value.keyword.trim().toLowerCase()
   const matchesKeyword = !keyword || [warehouse.code, warehouse.name, warehouse.province, warehouse.city, warehouse.address]
     .some((value) => value.toLowerCase().includes(keyword))
-  return matchesKeyword && (!filters.status || warehouse.status === filters.status)
+  return matchesKeyword && (!appliedFilters.value.status || warehouse.status === appliedFilters.value.status)
 }))
-const pagedRows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize, page.value * pageSize))
-const metrics = computed(() => [
-  { label: '全部收货仓', value: rows.value.length, note: loadedTenantId.value ? `租户 ${loadedTenantId.value}` : '等待查询租户' },
-  { label: '启用仓库', value: rows.value.filter((item) => item.status === 'ACTIVE').length, note: '客户当前可选择' },
-  { label: '暂停接单', value: rows.value.filter((item) => item.status === 'INACTIVE').length, note: '不出现在客户下单选项' },
-  { label: '覆盖城市', value: new Set(rows.value.map((item) => item.city).filter(Boolean)).size, note: '国内收货区域' },
-])
+const pagedRows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
 const loadErrorDescription = computed(() => {
   if (!loadError.value) return ''
   const references = [
@@ -86,7 +101,6 @@ const loadErrorDescription = computed(() => {
   return [loadError.value.message, references.join(' · '), retained].filter(Boolean).join(' ')
 })
 
-watch(filters, () => { page.value = 1 })
 watch(
   () => access.can(editorPermission.value),
   (canWrite) => {
@@ -117,23 +131,42 @@ function toRow(warehouse: PlatformWarehouseResource, detail: PlatformWarehouseDe
   }
 }
 
-function resetFilters() {
-  filters.keyword = ''
-  filters.status = ''
+function queryWarehouses(model: QueryModel) {
+  appliedFilters.value = {
+    keyword: String(model.keyword || ''),
+    status: (model.status || '') as Warehouse['status'] | '',
+  }
+  page.value = 1
+  void loadWarehouses()
 }
 
-async function loadWarehouses(requestedTenantId = parseTenantId()) {
-  if (!requestedTenantId) {
-    ElMessage.warning('请输入有效的正整数租户 ID')
-    return
-  }
+function clearWarehouseFormErrors() {
+  for (const field of Object.keys(formErrors) as WarehouseRequiredField[]) formErrors[field] = ''
+}
+
+function clearFieldError(field: WarehouseRequiredField) {
+  if (formErrors[field]) formErrors[field] = ''
+}
+
+function validateRequiredField(field: WarehouseRequiredField) {
+  formErrors[field] = form[field].trim() ? '' : requiredFieldMessages[field]
+  return !formErrors[field]
+}
+
+function validateWarehouseForm() {
+  return (Object.keys(requiredFieldMessages) as WarehouseRequiredField[])
+    .map(validateRequiredField)
+    .every(Boolean)
+}
+
+async function loadWarehouses() {
   const sequence = ++loadSequence
   loading.value = true
   loadError.value = null
   try {
-    const result = await listPlatformWarehouses(requestedTenantId, 1, 200)
+    const result = await listPlatformWarehouses(fixedTenantId, 1, 200)
     const details = await Promise.allSettled(
-      result.records.map((warehouse) => getPlatformWarehouse(requestedTenantId, warehouse.id)),
+      result.records.map((warehouse) => getPlatformWarehouse(fixedTenantId, warehouse.id)),
     )
     if (sequence !== loadSequence) return
     rows.value = result.records.map((warehouse, index) => {
@@ -141,9 +174,7 @@ async function loadWarehouses(requestedTenantId = parseTenantId()) {
       return toRow(warehouse, detailResult?.status === 'fulfilled' ? detailResult.value : null)
     })
     detailWarningCount.value = details.filter((item) => item.status === 'rejected').length
-    loadedTenantId.value = requestedTenantId
-    tenantInput.value = String(requestedTenantId)
-    sessionStorage.setItem(tenantStorageKey, tenantInput.value)
+    loadedTenantId.value = fixedTenantId
     page.value = 1
   } catch (error) {
     if (sequence !== loadSequence) return
@@ -154,20 +185,17 @@ async function loadWarehouses(requestedTenantId = parseTenantId()) {
 }
 
 function requireCurrentTenant() {
-  if (!loadedTenantId.value) {
-    ElMessage.warning('请先查询目标租户的仓库数据')
+  if (!warehouseReady.value) {
+    ElMessage.warning('仓库数据尚未加载完成，请稍后重试')
     return null
   }
-  if (!tenantMatchesLoaded.value) {
-    ElMessage.warning('租户 ID 已变更，请先重新查询后再维护仓库')
-    return null
-  }
-  return loadedTenantId.value
+  return fixedTenantId
 }
 
 function openCreate() {
   if (!requireCurrentTenant()) return
   Object.assign(form, emptyForm())
+  clearWarehouseFormErrors()
   captureBaseline()
   editorOpen.value = true
 }
@@ -197,6 +225,7 @@ async function openEdit(warehouse: WarehouseRow) {
     city: address?.city || '',
     address: address?.addressLine1 || '',
   })
+  clearWarehouseFormErrors()
   captureBaseline()
   editorOpen.value = true
 }
@@ -256,10 +285,7 @@ function buildSaveRequest(tenantId: number): SavePlatformWarehouseRequest {
 async function saveWarehouse() {
   const tenantId = requireCurrentTenant()
   if (!tenantId) return
-  if (!form.code.trim() || !form.name.trim() || !form.city.trim() || !form.address.trim()) {
-    ElMessage.warning('请填写仓库编码、名称、城市和详细地址')
-    return
-  }
+  if (!validateWarehouseForm()) return
   saving.value = true
   try {
     const payload = buildSaveRequest(tenantId)
@@ -268,7 +294,7 @@ async function saveWarehouse() {
     const successMessage = form.id ? '仓库资料已更新' : '收货仓已创建'
     editorOpen.value = false
     ElMessage.success(successMessage)
-    await loadWarehouses(tenantId)
+    await loadWarehouses()
   } catch (error) {
     const details = getApiErrorDetails(error, '仓库保存失败，请检查后重试')
     ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
@@ -307,31 +333,12 @@ async function toggleStatus(warehouse: WarehouseRow) {
 }
 
 onMounted(() => {
-  const tenantId = parseTenantId()
-  if (tenantId) void loadWarehouses(tenantId)
+  void loadWarehouses()
 })
 </script>
 
 <template>
   <div class="business-page">
-    <section class="surface-panel tenant-panel" aria-label="目标租户">
-      <div class="tenant-copy">
-        <h2>目标租户</h2>
-        <p>仓库数据按租户隔离，请输入企业租户 ID 后查询。</p>
-      </div>
-      <div class="tenant-query">
-        <el-input
-          v-model="tenantInput"
-          inputmode="numeric"
-          maxlength="19"
-          placeholder="请输入租户 ID"
-          aria-label="目标租户 ID"
-          @keyup.enter="loadWarehouses()"
-        />
-        <el-button type="primary" :loading="loading" @click="loadWarehouses()">查询仓库</el-button>
-      </div>
-    </section>
-
     <el-alert v-if="loadError" type="error" :closable="false" show-icon class="state-alert">
       <template #title>仓库数据加载失败</template>
       <p>{{ loadErrorDescription }}</p>
@@ -342,73 +349,64 @@ onMounted(() => {
       <p>{{ detailWarningCount }} 个仓库缺少地址或服务能力详情；编辑时会再次尝试加载，不会用模拟数据补齐。</p>
     </el-alert>
 
-    <MetricStrip :items="metrics" />
-
-    <section class="surface-panel filter-panel" aria-label="仓库筛选">
-      <div class="filter-fields">
-        <el-input v-model="filters.keyword" clearable placeholder="仓库名称、编码、城市或地址" aria-label="仓库关键词">
-          <template #prefix><Search :size="16" /></template>
-        </el-input>
-        <el-select v-model="filters.status" clearable placeholder="全部状态" aria-label="仓库状态">
-          <el-option label="启用" value="ACTIVE" /><el-option label="停用" value="INACTIVE" />
-        </el-select>
-      </div>
-      <div class="filter-actions">
-        <el-button @click="resetFilters"><RotateCcw :size="16" />重置</el-button>
+    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="仓库筛选" :fields="queryFields" @search="queryWarehouses">
+      <template #actions>
         <el-button
           v-if="access.can('platform:warehouse:create')"
-          type="primary"
-          :disabled="!tenantMatchesLoaded || loading"
+          :disabled="!warehouseReady"
           @click="openCreate"
         ><Plus :size="16" />新增仓库</el-button>
-      </div>
-    </section>
+      </template>
+    </QueryToolbar>
 
     <section class="surface-panel table-panel" aria-live="polite">
       <div class="panel-heading">
         <div>
           <h2>平台收货仓</h2>
-          <p v-if="loadedTenantId">当前数据：租户 {{ loadedTenantId }} · 仅启用仓库会进入客户头程下单选项</p>
-          <p v-else>查询租户后显示服务端仓库数据</p>
+          <p v-if="loadedTenantId">租户 {{ fixedTenantId }} · 仅启用仓库会进入客户头程下单选项</p>
+          <p v-else>正在加载平台仓库数据</p>
         </div>
       </div>
-      <div v-loading="loading" class="warehouse-table-state">
-        <el-table v-if="pagedRows.length" :data="pagedRows" row-key="id">
-          <el-table-column label="操作" width="180" fixed="left">
-            <template #default="{ row }">
+      <DataTable
+        v-model:page="page"
+        v-model:page-size="pageSize"
+        :data="pagedRows"
+        :columns="warehouseColumns"
+        :loading="loading"
+        :total="filteredRows.length"
+        :page-sizes="[10, 20, 50]"
+        row-key="id"
+        aria-label="平台收货仓列表"
+        :empty-text="loadedTenantId ? '暂无符合筛选条件的仓库' : '仓库数据暂不可用，请重新加载'"
+      >
+        <template #actions="{ row }">
               <div v-if="access.can('platform:warehouse:edit') || access.can('platform:warehouse:status')" class="table-actions">
-                <el-button v-if="access.can('platform:warehouse:edit')" link type="primary" :disabled="!tenantMatchesLoaded" @click="openEdit(row as WarehouseRow)"><Pencil :size="15" />编辑</el-button>
+                <el-button v-if="access.can('platform:warehouse:edit')" link type="primary" :disabled="!warehouseReady" @click="openEdit(row as WarehouseRow)"><Pencil :size="15" />编辑</el-button>
                 <el-button
                   v-if="access.can('platform:warehouse:status')"
                   link
                   :type="(row as WarehouseRow).status === 'ACTIVE' ? 'danger' : 'success'"
-                  :disabled="!tenantMatchesLoaded"
+                  :disabled="!warehouseReady"
                   :loading="statusLoadingIds.has((row as WarehouseRow).id)"
                   @click="toggleStatus(row as WarehouseRow)"
                 ><Power :size="15" />{{ (row as WarehouseRow).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
               </div>
               <span v-else class="warehouse-subline">仅查看</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="仓库" min-width="200">
-            <template #default="{ row }"><div class="warehouse-cell"><span><WarehouseIcon :size="18" /></span><div><strong>{{ (row as WarehouseRow).name }}</strong><small>{{ (row as WarehouseRow).code }}</small></div></div></template>
-          </el-table-column>
-          <el-table-column label="所在城市" min-width="130"><template #default="{ row }">{{ [(row as WarehouseRow).province, (row as WarehouseRow).city].filter(Boolean).join(' · ') || '-' }}</template></el-table-column>
-          <el-table-column label="收货地址" min-width="260"><template #default="{ row }"><div class="warehouse-address"><MapPin :size="15" />{{ (row as WarehouseRow).address || '详情暂未加载' }}</div></template></el-table-column>
-          <el-table-column label="联系人" min-width="150"><template #default="{ row }"><strong>{{ (row as WarehouseRow).contactName || '-' }}</strong><span class="warehouse-subline">{{ (row as WarehouseRow).contactPhone || '-' }}</span></template></el-table-column>
-          <el-table-column label="收货时间" min-width="190"><template #default="{ row }">{{ (row as WarehouseRow).businessHours || '-' }}</template></el-table-column>
-          <el-table-column label="状态" width="100"><template #default="{ row }"><el-tag :type="(row as WarehouseRow).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as WarehouseRow).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template></el-table-column>
-        </el-table>
-        <el-empty v-else-if="!loading" :description="loadedTenantId ? '该租户暂无符合条件的仓库' : '请输入租户 ID 并查询真实仓库数据'" />
-      </div>
-      <div v-if="loadedTenantId" class="table-footer"><span>共 {{ filteredRows.length }} 个收货仓</span><el-pagination v-model:current-page="page" :page-size="pageSize" :total="filteredRows.length" layout="prev, pager, next" /></div>
+        </template>
+        <template #warehouse="{ row }"><div class="warehouse-cell"><span><WarehouseIcon :size="18" /></span><div><strong>{{ (row as WarehouseRow).name }}</strong><small>{{ (row as WarehouseRow).code }}</small></div></div></template>
+        <template #city="{ row }">{{ [(row as WarehouseRow).province, (row as WarehouseRow).city].filter(Boolean).join(' · ') || '-' }}</template>
+        <template #address="{ row }"><div class="warehouse-address"><MapPin :size="15" />{{ (row as WarehouseRow).address || '详情暂未加载' }}</div></template>
+        <template #contact="{ row }"><strong>{{ (row as WarehouseRow).contactName || '-' }}</strong><span class="warehouse-subline">{{ (row as WarehouseRow).contactPhone || '-' }}</span></template>
+        <template #status="{ row }"><el-tag :type="(row as WarehouseRow).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as WarehouseRow).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
+        <template #pagination-left>共 {{ filteredRows.length }} 个收货仓</template>
+      </DataTable>
     </section>
 
     <el-drawer v-model="editorOpen" :title="editorLabel" size="620px" class="business-drawer editor-drawer" :close-on-click-modal="false">
-      <el-form label-position="top" class="drawer-form" :disabled="saving">
-        <div class="form-section"><h3>仓库标识</h3><div class="form-grid two-cols"><el-form-item label="仓库编码" required><el-input v-model="form.code" maxlength="50" placeholder="例如 CN-NB-01" /></el-form-item><el-form-item label="仓库名称" required><el-input v-model="form.name" maxlength="120" placeholder="客户下单时显示的名称" /></el-form-item><el-form-item label="状态"><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item></div></div>
-        <div class="form-section"><h3>地址与收货</h3><div class="form-grid two-cols"><el-form-item label="省份"><el-input v-model="form.province" maxlength="100" /></el-form-item><el-form-item label="城市" required><el-input v-model="form.city" maxlength="100" /></el-form-item><el-form-item label="联系人"><el-input v-model="form.contactName" maxlength="64" /></el-form-item><el-form-item label="联系电话"><el-input v-model="form.contactPhone" maxlength="32" /></el-form-item><el-form-item label="收货时间"><el-input v-model="form.businessHours" maxlength="500" /></el-form-item></div><el-form-item label="详细地址" required><el-input v-model="form.address" maxlength="255" type="textarea" :rows="3" /></el-form-item></div>
-        <div class="form-section"><h3>备注</h3><el-form-item label="客户可理解的收货说明"><el-input v-model="form.remark" maxlength="500" type="textarea" :rows="3" show-word-limit /></el-form-item></div>
+      <el-form :model="form" label-position="top" class="drawer-form" :disabled="saving">
+        <div class="form-section"><h3>仓库标识</h3><div class="form-grid two-cols"><el-form-item label="仓库编码" required :class="{ 'has-field-error': formErrors.code }"><el-input v-model="form.code" maxlength="50" placeholder="例如 CN-NB-01" :aria-invalid="Boolean(formErrors.code)" :aria-describedby="formErrors.code ? 'warehouse-code-error' : undefined" @input="clearFieldError('code')" @blur="validateRequiredField('code')" /><p v-if="formErrors.code" id="warehouse-code-error" class="field-error" role="alert">{{ formErrors.code }}</p></el-form-item><el-form-item label="仓库名称" required :class="{ 'has-field-error': formErrors.name }"><el-input v-model="form.name" maxlength="120" placeholder="请输入客户下单时显示的名称" :aria-invalid="Boolean(formErrors.name)" :aria-describedby="formErrors.name ? 'warehouse-name-error' : undefined" @input="clearFieldError('name')" @blur="validateRequiredField('name')" /><p v-if="formErrors.name" id="warehouse-name-error" class="field-error" role="alert">{{ formErrors.name }}</p></el-form-item><el-form-item label="状态"><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item></div></div>
+        <div class="form-section"><h3>地址与收货</h3><div class="form-grid two-cols"><el-form-item label="省份"><el-input v-model="form.province" maxlength="100" placeholder="例如 广东省" /></el-form-item><el-form-item label="城市" required :class="{ 'has-field-error': formErrors.city }"><el-input v-model="form.city" maxlength="100" placeholder="例如 深圳市" :aria-invalid="Boolean(formErrors.city)" :aria-describedby="formErrors.city ? 'warehouse-city-error' : undefined" @input="clearFieldError('city')" @blur="validateRequiredField('city')" /><p v-if="formErrors.city" id="warehouse-city-error" class="field-error" role="alert">{{ formErrors.city }}</p></el-form-item><el-form-item label="联系人"><el-input v-model="form.contactName" maxlength="64" placeholder="请输入仓库联系人姓名" /></el-form-item><el-form-item label="联系电话"><el-input v-model="form.contactPhone" maxlength="32" placeholder="请输入手机号或固定电话" /></el-form-item><el-form-item label="收货时间"><el-input v-model="form.businessHours" maxlength="500" placeholder="例如 周一至周六 08:30-18:00" /></el-form-item></div><el-form-item label="详细地址" required :class="{ 'has-field-error': formErrors.address }"><el-input v-model="form.address" maxlength="255" type="textarea" :rows="3" placeholder="请输入街道、园区、楼栋及库位信息" :aria-invalid="Boolean(formErrors.address)" :aria-describedby="formErrors.address ? 'warehouse-address-error' : undefined" @input="clearFieldError('address')" @blur="validateRequiredField('address')" /><p v-if="formErrors.address" id="warehouse-address-error" class="field-error" role="alert">{{ formErrors.address }}</p></el-form-item></div>
+        <div class="form-section"><h3>备注</h3><el-form-item label="客户可理解的收货说明"><el-input v-model="form.remark" maxlength="500" type="textarea" :rows="3" show-word-limit placeholder="例如 预约要求、进仓指引或其他注意事项" /></el-form-item></div>
       </el-form>
       <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveWarehouse">保存仓库</el-button></div></template>
     </el-drawer>
@@ -416,11 +414,6 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.tenant-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
-.tenant-copy h2 { margin: 0; font-size: 16px; }
-.tenant-copy p { margin: 6px 0 0; color: var(--cc-muted); font-size: 13px; }
-.tenant-query { display: flex; width: min(100%, 390px); gap: 10px; }
-.tenant-query .el-input { flex: 1; }
 .state-alert p { margin: 6px 0 10px; line-height: 1.55; }
 .warehouse-table-state { min-height: 180px; }
 .warehouse-cell { display: flex; align-items: center; gap: 10px; }
@@ -430,15 +423,8 @@ onMounted(() => {
 .warehouse-cell small, .warehouse-subline { display: block; color: var(--cc-muted); font-size: 11px; }
 .warehouse-address { display: flex; align-items: flex-start; gap: 7px; line-height: 1.55; overflow-wrap: anywhere; }
 .warehouse-address svg { flex: 0 0 15px; margin-top: 2px; color: var(--cc-muted); }
+.field-error { width: 100%; margin: 6px 0 0; color: var(--el-color-danger); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
+:deep(.has-field-error .el-input__wrapper) { box-shadow: 0 0 0 1px var(--el-color-danger) inset; }
+:deep(.has-field-error .el-textarea__inner) { box-shadow: 0 0 0 1px var(--el-color-danger) inset; }
 
-@media (max-width: 640px) {
-  .tenant-panel { align-items: stretch; flex-direction: column; gap: 16px; }
-  .tenant-query { width: 100%; }
-  .tenant-query .el-button { flex: 0 0 auto; }
-}
-
-@media (max-width: 420px) {
-  .tenant-query { flex-direction: column; }
-  .tenant-query .el-button { width: 100%; }
-}
 </style>