增加商家分类管理。

src/layouts/BasicLayout.vue

@@ -51,6 +51,9 @@
           <a-menu-item key="merchant-list">
             <router-link to="/merchant/list">商家列表</router-link>
           </a-menu-item>
+          <a-menu-item key="merchant-categories">
+            <router-link to="/merchant/categories">商家分类</router-link>
+          </a-menu-item>
         </a-sub-menu>
       </a-menu>
     </a-layout-sider>

src/router/index.js

@@ -55,6 +55,11 @@ const routes = [
         path: 'list',
         component: () => import('@/views/merchant/List.vue'),
         meta: { title: '商家列表' }
+      },
+      {
+        path: 'categories',
+        component: () => import('@/views/merchant/CategoryList.vue'),
+        meta: { title: '商家分类' }
       }
     ]
   }

src/views/merchant/CategoryList.vue

@@ -0,0 +1,214 @@
+<template>
+  <page-container>
+    <div class="category-list">
+      <div class="table-header">
+        <h1>商家分类管理</h1>
+        <a-button type="primary" @click="showAddModal">添加分类</a-button>
+      </div>
+      
+      <a-table 
+        :columns="columns" 
+        :data-source="tableData" 
+        :loading="loading"
+        row-key="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="link" @click="handleEdit(record)">编辑</a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 添加/编辑分类模态框 -->
+      <a-modal
+        v-model:visible="modalVisible"
+        :title="isEdit ? '编辑分类' : '添加分类'"
+        :confirmLoading="confirmLoading"
+        @ok="handleSubmit"
+        @cancel="handleCancel"
+      >
+        <a-form
+          ref="formRef"
+          :model="formState"
+          :rules="rules"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 16 }"
+        >
+          <a-form-item label="分类名称" name="name" required>
+            <a-input v-model:value="formState.name" placeholder="请输入分类名称" />
+          </a-form-item>
+          
+          <a-form-item label="排序" name="sort">
+            <a-input-number v-model:value="formState.sort" :min="0" style="width: 100%" />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import PageContainer from '@/components/PageContainer.vue'
+import request from '@/utils/request'
+
+export default defineComponent({
+  components: {
+    PageContainer
+  },
+  setup() {
+    const loading = ref(false)
+    const tableData = ref([])
+    const modalVisible = ref(false)
+    const confirmLoading = ref(false)
+    const isEdit = ref(false)
+    const formRef = ref(null)
+    const currentId = ref(null)
+
+    const formState = ref({
+      name: '',
+      sort: 0
+    })
+
+    const rules = {
+      name: [{ required: true, message: '请输入分类名称' }]
+    }
+
+    const columns = [
+      {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        width: 80,
+        align: 'center'
+      },
+      {
+        title: '分类名称',
+        dataIndex: 'name',
+        key: 'name',
+        width: 200
+      },
+      {
+        title: '排序',
+        dataIndex: 'sort',
+        key: 'sort',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 120,
+        align: 'center'
+      }
+    ]
+
+    // 获取分类列表
+    const fetchData = async () => {
+      try {
+        loading.value = true
+        const res = await request.get('/api/merchant-categories')
+        if (res.code === 200 && res.data) {
+          tableData.value = res.data.items || []
+        }
+      } catch (error) {
+        console.error('获取分类列表失败:', error)
+        message.error('获取分类列表失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    // 显示添加模态框
+    const showAddModal = () => {
+      isEdit.value = false
+      currentId.value = null
+      formState.value = {
+        name: '',
+        sort: 0
+      }
+      modalVisible.value = true
+    }
+
+    // 显示编辑模态框
+    const handleEdit = (record) => {
+      isEdit.value = true
+      currentId.value = record.id
+      formState.value = {
+        name: record.name,
+        sort: record.sort
+      }
+      modalVisible.value = true
+    }
+
+    // 提交表单
+    const handleSubmit = () => {
+      formRef.value.validate().then(async () => {
+        try {
+          confirmLoading.value = true
+          if (isEdit.value) {
+            await request.put(`/api/merchant-categories/${currentId.value}`, formState.value)
+            message.success('更新成功')
+          } else {
+            await request.post('/api/merchant-categories', formState.value)
+            message.success('添加成功')
+          }
+          modalVisible.value = false
+          fetchData()
+        } catch (error) {
+          console.error('操作失败:', error)
+          message.error('操作失败')
+        } finally {
+          confirmLoading.value = false
+        }
+      })
+    }
+
+    // 取消操作
+    const handleCancel = () => {
+      formRef.value?.resetFields()
+      modalVisible.value = false
+    }
+
+    onMounted(() => {
+      fetchData()
+    })
+
+    return {
+      loading,
+      columns,
+      tableData,
+      modalVisible,
+      confirmLoading,
+      isEdit,
+      formRef,
+      formState,
+      rules,
+      showAddModal,
+      handleEdit,
+      handleSubmit,
+      handleCancel
+    }
+  }
+})
+</script>
+
+<style scoped>
+.category-list {
+  padding: 24px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.table-header h1 {
+  margin: 0;
+}
+</style>