feat(server): 添加 GM 操作台物品发送功能

- 在 server 端添加了 /item/send 接口，用于发送物品到指定角色
- 在前端 HomeView 中增加了 GM 操作台功能，可以选定玩家角色名、物品和数量进行发送
- 引入了 body-parser 中间件用于解析请求体
- 优化了表单布局，增加了表单验证

web/src/views/HomeView.vue

@@ -3,12 +3,15 @@ import { ref, onMounted } from 'vue'
 import axios from 'axios'
 import itemList from "@/assets/items.json"
 import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
 
 
 // 第一个卡片：表单数据
+const gmFormRef = ref()
 const form = ref({
   playerName: '',
   item: '',
+  itemNum: '',
   recharge: ''
 })
 const items = ref(itemList)
@@ -53,8 +56,16 @@ onMounted(() => {
 })
 
 // 提交表单
-const submitForm = () => {
-  console.log('提交表单:', form.value)
+const submitForm = (formEl) => {
+  formEl.validate().then(async () => {
+    console.log(form.value);
+    const params = form.value
+    const res = await axios.post("/api/item/send", { roleName: params.playerName, itemId: params.item, itemNum: params.itemNum })
+    const result = res?.data
+    if (res.data.code == 0) ElMessage.success(result.msg)
+    else ElMessage.error(result.msg)
+  })
+
 }
 </script>
 
@@ -65,31 +76,27 @@ const submitForm = () => {
       <template #header>
         <div class="card-header">
           <span>GM操作台</span>
-          <el-button type="primary" @click="submitForm">提交</el-button>
+          <el-button type="primary" @click="submitForm(gmFormRef)">提交</el-button>
         </div>
       </template>
-      <el-form :model="form" label-width="100px">
-        <el-row :gutter="20">
-          <el-col :span="8">
-            <el-form-item label="玩家角色名">
-              <el-input v-model="form.playerName" placeholder="请输入玩家角色名"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="物品道具">
-              <el-select-v2 v-model="form.item" placeholder="请选择物品" :options="items"
-                :props="{ label: 'name', value: 'resId' }" filterable />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="充值">
-              <el-select v-model="form.recharge" placeholder="请选择充值">
-                <el-option v-for="recharge in recharges" :key="recharge" :label="recharge"
-                  :value="recharge"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
+      <el-form ref="gmFormRef" :model="form" label-width="100px">
+        <div class="grid grid-cols-2">
+          <el-form-item label="玩家角色名" prop="playerName" required>
+            <el-input v-model="form.playerName" placeholder="请输入玩家角色名"></el-input>
+          </el-form-item>
+          <el-form-item label="物品道具" prop="item">
+            <el-select-v2 v-model="form.item" placeholder="请选择物品" :options="items"
+              :props="{ label: 'name', value: 'resId' }" filterable />
+          </el-form-item>
+          <el-form-item label="物品数量" prop="itemNum">
+            <el-input type="number" v-model="form.itemNum" placeholder="请输入发送的物品数量"></el-input>
+          </el-form-item>
+          <el-form-item label="充值" prop="recharges">
+            <el-select v-model="form.recharge" placeholder="请选择充值">
+              <el-option v-for="recharge in recharges" :key="recharge" :label="recharge" :value="recharge"></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
       </el-form>
     </el-card>
 
@@ -98,7 +105,8 @@ const submitForm = () => {
       <template #header>
         <div class="card-header">
           <span>角色列表</span>
-          <el-input style="width: 240px;" v-model="roleSearch" placeholder="请输入角色名称或ID" @change="fetchRoleList" clearable />
+          <el-input style="width: 240px;" v-model="roleSearch" placeholder="请输入角色名称或ID" @change="fetchRoleList"
+            clearable />
         </div>
       </template>
       <el-table :data="roleList" style="width: 100%" border height="400">