新增种类管理功能：首页菜单+种类管理页面

src/pages.json

@@ -59,6 +59,12 @@
       "style": {
         "navigationBarTitleText": "库存流水"
       }
+    },
+    {
+      "path": "pages/category/index",
+      "style": {
+        "navigationBarTitleText": "种类管理"
+      }
     }
   ],
   "globalStyle": {

src/pages/category/index.vue

@@ -0,0 +1,320 @@
+<template>
+  <view class="page">
+    <!-- 顶部标题 -->
+    <view class="header">
+      <text class="title">种类管理</text>
+    </view>
+
+    <!-- 分类列表 -->
+    <scroll-view scroll-y class="category-list">
+      <view v-for="cat in categories" :key="cat.categoryId" class="category-item">
+        <view class="category-info">
+          <text class="category-name">{{ cat.name }}</text>
+          <text class="category-desc">{{ cat.description || '暂无描述' }}</text>
+        </view>
+        <view class="category-actions">
+          <text class="action-btn edit" @click="editCategory(cat)">编辑</text>
+          <text class="action-btn delete" @click="deleteCategory(cat)">删除</text>
+        </view>
+      </view>
+
+      <view v-if="categories.length === 0" class="empty">
+        <Icon name="product" :size="80" color="#ccc" />
+        <text class="empty-text">暂无分类</text>
+      </view>
+    </scroll-view>
+
+    <!-- 添加按钮 -->
+    <view class="add-btn" @click="showAddDialog">
+      <Icon name="add" :size="40" color="#fff" />
+    </view>
+
+    <!-- 添加/编辑弹窗 -->
+    <view class="dialog-mask" v-if="showDialog" @click="closeDialog">
+      <view class="dialog" @click.stop>
+        <view class="dialog-header">
+          <text class="dialog-title">{{ isEdit ? '编辑分类' : '新增分类' }}</text>
+        </view>
+        <view class="dialog-body">
+          <view class="form-item">
+            <text class="label">名称</text>
+            <input class="input" v-model="form.name" placeholder="请输入分类名称" />
+          </view>
+          <view class="form-item">
+            <text class="label">描述</text>
+            <input class="input" v-model="form.description" placeholder="请输入分类描述" />
+          </view>
+        </view>
+        <view class="dialog-footer">
+          <text class="btn-cancel" @click="closeDialog">取消</text>
+          <text class="btn-confirm" @click="saveCategory">确定</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import productApi from '@/api/product'
+
+export default {
+  data() {
+    return {
+      categories: [],
+      showDialog: false,
+      isEdit: false,
+      form: {
+        categoryId: '',
+        name: '',
+        description: ''
+      }
+    }
+  },
+  onLoad() {
+    this.loadCategories()
+  },
+  methods: {
+    async loadCategories() {
+      try {
+        const categories = await productApi.getCategories()
+        this.categories = categories || []
+      } catch (e) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      }
+    },
+    showAddDialog() {
+      this.isEdit = false
+      this.form = { categoryId: '', name: '', description: '' }
+      this.showDialog = true
+    },
+    editCategory(cat) {
+      this.isEdit = true
+      this.form = { categoryId: cat.categoryId, name: cat.name, description: cat.description || '' }
+      this.showDialog = true
+    },
+    closeDialog() {
+      this.showDialog = false
+    },
+    async saveCategory() {
+      if (!this.form.name) {
+        uni.showToast({ title: '请输入名称', icon: 'none' })
+        return
+      }
+      try {
+        if (this.isEdit) {
+          await productApi.updateCategory(this.form.categoryId, {
+            name: this.form.name,
+            description: this.form.description
+          })
+          uni.showToast({ title: '修改成功', icon: 'success' })
+        } else {
+          await productApi.createCategory({
+            name: this.form.name,
+            description: this.form.description
+          })
+          uni.showToast({ title: '添加成功', icon: 'success' })
+        }
+        this.closeDialog()
+        this.loadCategories()
+      } catch (e) {
+        uni.showToast({ title: '操作失败', icon: 'none' })
+      }
+    },
+    deleteCategory(cat) {
+      uni.showModal({
+        title: '确认删除',
+        content: `确定要删除 "${cat.name}" 吗？`,
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await productApi.deleteCategory(cat.categoryId)
+              uni.showToast({ title: '删除成功', icon: 'success' })
+              this.loadCategories()
+            } catch (e) {
+              uni.showToast({ title: '删除失败', icon: 'none' })
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.page {
+  min-height: 100vh;
+  background: #f8f9fa;
+}
+
+.header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 40rpx 30rpx;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #fff;
+}
+
+.category-list {
+  padding: 20rpx;
+  height: calc(100vh - 140rpx);
+}
+
+.category-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+}
+
+.category-info {
+  flex: 1;
+}
+
+.category-name {
+  display: block;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.category-desc {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.category-actions {
+  display: flex;
+  gap: 20rpx;
+}
+
+.action-btn {
+  font-size: 26rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 8rpx;
+}
+
+.action-btn.edit {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+
+.action-btn.delete {
+  background: #fff1f0;
+  color: #ff4d4f;
+}
+
+.empty {
+  padding: 100rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+  margin-top: 20rpx;
+}
+
+.add-btn {
+  position: fixed;
+  right: 40rpx;
+  bottom: 40rpx;
+  width: 100rpx;
+  height: 100rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.4);
+}
+
+/* 弹窗 */
+.dialog-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.dialog {
+  width: 80%;
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+
+.dialog-header {
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.dialog-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.dialog-body {
+  padding: 30rpx;
+}
+
+.form-item {
+  margin-bottom: 30rpx;
+}
+
+.form-item .label {
+  display: block;
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+}
+
+.form-item .input {
+  width: 100%;
+  height: 80rpx;
+  background: #f5f5f5;
+  border-radius: 12rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+
+.dialog-footer {
+  display: flex;
+  border-top: 1rpx solid #f5f5f5;
+}
+
+.btn-cancel, .btn-confirm {
+  flex: 1;
+  text-align: center;
+  padding: 30rpx;
+  font-size: 30rpx;
+}
+
+.btn-cancel {
+  color: #666;
+  border-right: 1rpx solid #f5f5f5;
+}
+
+.btn-confirm {
+  color: #667eea;
+  font-weight: bold;
+}
+</style>

src/pages/index/index.vue

@@ -61,6 +61,13 @@
             <text class="menu-card-title">商品管理</text>
             <text class="menu-card-desc">管理商品库存</text>
           </view>
+          <view class="menu-card" @click="goTo('/pages/category/index')">
+            <view class="menu-card-icon purple">
+              <Icon name="setting" :size="40" color="#fff" />
+            </view>
+            <text class="menu-card-title">种类管理</text>
+            <text class="menu-card-desc">管理商品种类</text>
+          </view>
           <view class="menu-card" @click="goTo('/pages/order/create')">
             <view class="menu-card-icon green">
               <Icon name="edit" :size="40" color="#fff" />
@@ -451,6 +458,10 @@ export default {
   background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
 }
 
+.menu-card-icon.purple {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
 .menu-card-title {
   font-size: 28rpx;
   font-weight: bold;