feat(machine): add sorting, batch operations, and Indigo theme styling

- Add sortable columns with custom sort handler (机器ID, 名称, 摄像头数, 启用, 创建时间)
- Add batch selection with checkbox column and batch delete functionality
- Apply Indigo theme (#4f46e5) to checkboxes and dialog buttons
- Add dialog header/footer borders for better visual separation
- Add batch actions bar with selected count and action buttons

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/views/machine/index.vue

@@ -47,12 +47,30 @@
       </el-form>
     </div>
 
+    <!-- 批量操作栏 -->
+    <div v-if="selectedRows.length > 0" class="batch-actions">
+      <span class="batch-info">已选择 {{ selectedRows.length }} 项</span>
+      <el-button type="danger" :icon="Delete" :loading="deleteLoading" @click="handleBatchDelete">批量删除</el-button>
+      <el-button @click="clearSelection">取消选择</el-button>
+    </div>
+
     <!-- 数据表格 -->
     <div class="table-wrapper">
-      <el-table v-loading="loading" :data="paginatedList" stripe data-id="machine-table" height="100%">
+      <el-table
+        ref="tableRef"
+        v-loading="loading"
+        :data="sortedList"
+        stripe
+        size="default"
+        data-id="machine-table"
+        height="100%"
+        @selection-change="handleSelectionChange"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column type="selection" width="50" align="center" />
         <el-table-column type="index" label="序号" width="60" align="center" />
-        <el-table-column prop="machineId" label="机器ID" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip>
+        <el-table-column prop="machineId" label="机器ID" min-width="120" sortable="custom" show-overflow-tooltip />
+        <el-table-column prop="name" label="名称" min-width="120" sortable="custom" show-overflow-tooltip>
           <template #default="{ row }">
             <el-link type="primary" :data-id="`link-edit-${row.machineId}`" @click="handleEdit(row)">
               {{ row.name }}
@@ -61,19 +79,19 @@
         </el-table-column>
         <el-table-column prop="location" label="位置" min-width="120" show-overflow-tooltip />
         <el-table-column prop="description" label="描述" min-width="150" show-overflow-tooltip />
-        <el-table-column prop="cameraCount" label="摄像头数" width="100" align="center">
+        <el-table-column prop="cameraCount" label="摄像头数" width="100" sortable="custom" align="center">
           <template #default="{ row }">
             <el-tag type="info">{{ row.cameraCount || 0 }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="enabled" label="启用" width="80" align="center">
+        <el-table-column prop="enabled" label="启用" width="80" sortable="custom" align="center">
           <template #default="{ row }">
             <el-tag :type="row.enabled ? 'success' : 'info'">
               {{ row.enabled ? '是' : '否' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" width="170" align="center" />
+        <el-table-column prop="createdAt" label="创建时间" width="170" sortable="custom" align="center" />
         <el-table-column label="操作" width="150" align="center" fixed="right">
           <template #default="{ row }">
             <el-button type="primary" link :icon="Edit" :data-id="`btn-edit-${row.machineId}`" @click="handleEdit(row)">
@@ -143,7 +161,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from 'vue'
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules, type TableInstance } from 'element-plus'
 import { Plus, Edit, Delete, Search, RefreshRight } from '@element-plus/icons-vue'
 import { listMachines, addMachine, updateMachine, deleteMachine } from '@/api/machine'
 import type { MachineDTO, MachineAddRequest, MachineUpdateRequest } from '@/types'
@@ -154,6 +172,19 @@ const deleteLoading = ref(false)
 const machineList = ref<MachineDTO[]>([])
 const dialogVisible = ref(false)
 const formRef = ref<FormInstance>()
+const tableRef = ref<TableInstance>()
+
+// 选中的行
+const selectedRows = ref<MachineDTO[]>([])
+
+// 排序状态
+const sortState = reactive<{
+  prop: string
+  order: 'ascending' | 'descending' | null
+}>({
+  prop: '',
+  order: null
+})
 
 // 搜索表单
 const searchForm = reactive<{
@@ -201,11 +232,36 @@ const filteredList = computed(() => {
 
 const total = computed(() => filteredList.value.length)
 
-// 分页后的数据
-const paginatedList = computed(() => {
+// 排序后的数据
+const sortedList = computed(() => {
+  const list = [...filteredList.value]
+  if (sortState.prop && sortState.order) {
+    list.sort((a, b) => {
+      const aVal = a[sortState.prop as keyof MachineDTO]
+      const bVal = b[sortState.prop as keyof MachineDTO]
+
+      // 处理空值
+      if (aVal == null && bVal == null) return 0
+      if (aVal == null) return sortState.order === 'ascending' ? -1 : 1
+      if (bVal == null) return sortState.order === 'ascending' ? 1 : -1
+
+      // 比较
+      let result = 0
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        result = aVal - bVal
+      } else if (typeof aVal === 'boolean' && typeof bVal === 'boolean') {
+        result = aVal === bVal ? 0 : aVal ? 1 : -1
+      } else {
+        result = String(aVal).localeCompare(String(bVal))
+      }
+
+      return sortState.order === 'ascending' ? result : -result
+    })
+  }
+  // 分页
   const start = (currentPage.value - 1) * pageSize.value
   const end = start + pageSize.value
-  return filteredList.value.slice(start, end)
+  return list.slice(start, end)
 })
 
 const form = reactive<{
@@ -253,6 +309,50 @@ function handleReset() {
   searchForm.enabled = ''
   searchForm.dateRange = null
   currentPage.value = 1
+  // 重置排序
+  sortState.prop = ''
+  sortState.order = null
+}
+
+// 排序变化处理
+function handleSortChange({ prop, order }: { prop: string; order: 'ascending' | 'descending' | null }) {
+  sortState.prop = prop || ''
+  sortState.order = order
+}
+
+// 选择变化处理
+function handleSelectionChange(rows: MachineDTO[]) {
+  selectedRows.value = rows
+}
+
+// 清除选择
+function clearSelection() {
+  tableRef.value?.clearSelection()
+}
+
+// 批量删除
+async function handleBatchDelete() {
+  if (selectedRows.value.length === 0) return
+
+  try {
+    await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 台机器吗？`, '提示', {
+      type: 'warning'
+    })
+    deleteLoading.value = true
+    // 逐个删除
+    const deletePromises = selectedRows.value.map((row) => deleteMachine(row.id))
+    await Promise.all(deletePromises)
+    ElMessage.success(`成功删除 ${selectedRows.value.length} 台机器`)
+    clearSelection()
+    getList()
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('批量删除失败', error)
+      ElMessage.error('批量删除失败')
+    }
+  } finally {
+    deleteLoading.value = false
+  }
 }
 
 function handleAdd() {
@@ -367,6 +467,34 @@ onMounted(() => {
   overflow: hidden;
 }
 
+// 批量操作栏
+.batch-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 12px 16px;
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+
+  .batch-info {
+    font-size: 14px;
+    color: #92400e;
+    font-weight: 500;
+  }
+
+  :deep(.el-button--danger) {
+    background-color: #dc2626;
+    border-color: #dc2626;
+
+    &:hover {
+      background-color: #ef4444;
+      border-color: #ef4444;
+    }
+  }
+}
+
 .search-form {
   flex-shrink: 0;
   margin-bottom: 16px;
@@ -471,5 +599,58 @@ onMounted(() => {
       color: #6366f1;
     }
   }
+
+  // 排序图标颜色
+  .el-table__column-filter-trigger,
+  .caret-wrapper {
+    .sort-caret.ascending {
+      border-bottom-color: #4f46e5;
+    }
+
+    .sort-caret.descending {
+      border-top-color: #4f46e5;
+    }
+  }
+
+  // Checkbox Indigo 主题
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+  }
+
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+  }
+}
+
+// 弹窗 Indigo 主题
+:deep(.el-dialog) {
+  .el-dialog__header {
+    border-bottom: 1px solid #e5e7eb;
+    padding-bottom: 16px;
+  }
+
+  .el-dialog__footer {
+    border-top: 1px solid #e5e7eb;
+    padding-top: 16px;
+  }
+
+  .el-button--primary {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+
+    &:hover,
+    &:focus {
+      background-color: #6366f1;
+      border-color: #6366f1;
+    }
+  }
+
+  // Switch Indigo 主题
+  .el-switch.is-checked .el-switch__core {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+  }
 }
 </style>