From 4f54e460bb61a7ed88b7e6c74cda68e66293e788 Mon Sep 17 00:00:00 2001
From: 170-carry <z2964536830@gmail.com>
Date: Mon, 27 Apr 2026 12:38:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A4=BC=E7=89=A9=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/src/views/operate/game-config.vue | 340 +++++++++++++++++--------
 1 file changed, 232 insertions(+), 108 deletions(-)

diff --git a/apps/src/views/operate/game-config.vue b/apps/src/views/operate/game-config.vue
index 3630e57..a91a1f7 100644
--- a/apps/src/views/operate/game-config.vue
+++ b/apps/src/views/operate/game-config.vue
@@ -458,19 +458,27 @@ void loadData(true);
     <Modal
       :confirm-loading="saving"
       :open="modalOpen"
+      class="game-edit-modal"
       destroy-on-close
       title="编辑游戏"
-      width="720px"
+      width="960px"
       @cancel="modalOpen = false"
       @ok="submitForm"
     >
-      <Form layout="vertical">
-        <FormItem label="封面">
-          <div class="upload-row">
-            <Button :loading="uploadLoading" @click="openUpload">
-              上传封面
-            </Button>
-            <Image v-if="form.cover" :src="form.cover" class="cover" />
+      <Form class="game-edit-form" layout="vertical">
+        <section class="form-section form-section-hero">
+          <div class="section-title">封面资源</div>
+          <div class="cover-editor">
+            <div class="cover-preview">
+              <Image v-if="form.cover" :src="form.cover" class="modal-cover" />
+              <div v-else class="cover-placeholder">暂无封面</div>
+            </div>
+            <div class="cover-actions">
+              <Button :loading="uploadLoading" type="primary" @click="openUpload">
+                上传封面
+              </Button>
+              <span class="cover-tip">支持图片格式，保存后会同步到游戏列表封面。</span>
+            </div>
           </div>
           <input
             ref="fileInput"
@@ -479,106 +487,122 @@ void loadData(true);
             type="file"
             @change="handleUpload"
           >
-        </FormItem>
-        <FormItem label="系统">
-          <SysOriginSelect
-            v-model:value="form.sysOrigin"
-            :options="sysOriginOptions"
-          />
-        </FormItem>
-        <FormItem label="游戏源">
-          <Select
-            v-model:value="form.gameOrigin"
-            :options="gameOriginOptions"
-            option-label-prop="label"
-            placeholder="请选择游戏源"
-          />
-        </FormItem>
-        <FormItem label="客户端">
-          <Select
-            v-model:value="form.clientOrigin"
-            :options="clientOriginOptions"
-            option-label-prop="label"
-            placeholder="请选择客户端"
-          />
-        </FormItem>
-        <FormItem label="是否自研">
-          <Select
-            v-model:value="form.self"
-            :options="booleanOptions"
-            allow-clear
-            option-label-prop="label"
-            placeholder="请选择是否自研"
-          />
-        </FormItem>
-        <FormItem v-if="form.self" label="自研游戏Code">
-          <Input v-model:value="form.selfGameCode" placeholder="请输入自研游戏Code" />
-        </FormItem>
-        <FormItem label="游戏ID">
-          <Input v-model:value="form.gameId" placeholder="请输入游戏ID" />
-        </FormItem>
-        <FormItem label="游戏分类">
-          <Select
-            v-model:value="form.category"
-            :options="categoryOptions"
-            option-label-prop="label"
-            placeholder="请选择游戏分类"
-          />
-        </FormItem>
-        <FormItem label="名称">
-          <Input v-model:value="form.name" placeholder="请输入名称" />
-        </FormItem>
-        <FormItem label="编号">
-          <Input v-model:value="form.gameCode" placeholder="请输入编号" />
-        </FormItem>
-        <FormItem label="金额">
-          <Input v-model:value="form.amounts" placeholder="金币必须是整数多个逗号隔开" />
-        </FormItem>
-        <FormItem label="是否全屏">
-          <Select
-            v-model:value="form.fullScreen"
-            :options="booleanOptions"
-            allow-clear
-            option-label-prop="label"
-            placeholder="请选择是否全屏"
-          />
-        </FormItem>
-        <FormItem label="游戏模式">
-          <Select
-            v-model:value="form.gameMode"
-            :options="gameModeOptions"
-            allow-clear
-            option-label-prop="label"
-            placeholder="请选择游戏模式"
-          />
-        </FormItem>
-        <FormItem label="宽">
-          <Input v-model:value="form.width" placeholder="宽度" />
-        </FormItem>
-        <FormItem label="高">
-          <Input v-model:value="form.height" placeholder="高度" />
-        </FormItem>
-        <FormItem label="状态">
-          <Select
-            v-model:value="form.showcase"
-            :options="showcaseOptions"
-            allow-clear
-            option-label-prop="label"
-            placeholder="请选择状态"
-          />
-        </FormItem>
-        <FormItem label="排序">
-          <InputNumber v-model:value="form.sort" :max="99999" :min="0" style="width: 100%" />
-        </FormItem>
-        <FormItem label="区域">
-          <Select
-            v-model:value="form.regionList"
-            :options="regionSelectOptions"
-            mode="multiple"
-            option-label-prop="label"
-            placeholder="请选择区域"
-          />
-        </FormItem>
+        </section>
+
+        <section class="form-section">
+          <div class="section-title">基础信息</div>
+          <div class="form-grid">
+            <FormItem label="系统">
+              <SysOriginSelect
+                v-model:value="form.sysOrigin"
+                :options="sysOriginOptions"
+              />
+            </FormItem>
+            <FormItem label="游戏源">
+              <Select
+                v-model:value="form.gameOrigin"
+                :options="gameOriginOptions"
+                option-label-prop="label"
+                placeholder="请选择游戏源"
+              />
+            </FormItem>
+            <FormItem label="客户端">
+              <Select
+                v-model:value="form.clientOrigin"
+                :options="clientOriginOptions"
+                option-label-prop="label"
+                placeholder="请选择客户端"
+              />
+            </FormItem>
+            <FormItem label="名称">
+              <Input v-model:value="form.name" placeholder="请输入名称" />
+            </FormItem>
+            <FormItem label="游戏ID">
+              <Input v-model:value="form.gameId" placeholder="请输入游戏ID" />
+            </FormItem>
+            <FormItem label="编号">
+              <Input v-model:value="form.gameCode" placeholder="请输入编号" />
+            </FormItem>
+            <FormItem label="游戏分类">
+              <Select
+                v-model:value="form.category"
+                :options="categoryOptions"
+                option-label-prop="label"
+                placeholder="请选择游戏分类"
+              />
+            </FormItem>
+            <FormItem label="是否自研">
+              <Select
+                v-model:value="form.self"
+                :options="booleanOptions"
+                allow-clear
+                option-label-prop="label"
+                placeholder="请选择是否自研"
+              />
+            </FormItem>
+            <FormItem v-if="form.self" class="form-item-wide" label="自研游戏Code">
+              <Input v-model:value="form.selfGameCode" placeholder="请输入自研游戏Code" />
+            </FormItem>
+          </div>
+        </section>
+
+        <section class="form-section">
+          <div class="section-title">展示配置</div>
+          <div class="form-grid">
+            <FormItem label="金额">
+              <Input v-model:value="form.amounts" placeholder="金币必须是整数多个逗号隔开" />
+            </FormItem>
+            <FormItem label="是否全屏">
+              <Select
+                v-model:value="form.fullScreen"
+                :options="booleanOptions"
+                allow-clear
+                option-label-prop="label"
+                placeholder="请选择是否全屏"
+              />
+            </FormItem>
+            <FormItem label="游戏模式">
+              <Select
+                v-model:value="form.gameMode"
+                :options="gameModeOptions"
+                allow-clear
+                option-label-prop="label"
+                placeholder="请选择游戏模式"
+              />
+            </FormItem>
+            <FormItem label="宽">
+              <Input v-model:value="form.width" placeholder="宽度" />
+            </FormItem>
+            <FormItem label="高">
+              <Input v-model:value="form.height" placeholder="高度" />
+            </FormItem>
+            <FormItem label="状态">
+              <Select
+                v-model:value="form.showcase"
+                :options="showcaseOptions"
+                allow-clear
+                option-label-prop="label"
+                placeholder="请选择状态"
+              />
+            </FormItem>
+            <FormItem label="排序">
+              <InputNumber v-model:value="form.sort" :max="99999" :min="0" style="width: 100%" />
+            </FormItem>
+          </div>
+        </section>
+
+        <section class="form-section">
+          <div class="section-title">区域配置</div>
+          <FormItem label="区域">
+            <Select
+              v-model:value="form.regionList"
+              :options="regionSelectOptions"
+              mode="multiple"
+              option-label-prop="label"
+              placeholder="请选择区域"
+            />
+          </FormItem>
+        </section>
       </Form>
     </Modal>
   </Page>
@@ -605,6 +629,85 @@ void loadData(true);
   gap: 12px;
 }
 
+.game-edit-form {
+  max-height: 68vh;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.form-section {
+  background: rgb(248 250 252);
+  border: 1px solid rgb(226 232 240);
+  border-radius: 12px;
+  margin-bottom: 16px;
+  padding: 16px 16px 4px;
+}
+
+.form-section-hero {
+  padding-bottom: 16px;
+}
+
+.section-title {
+  color: rgb(15 23 42);
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 14px;
+}
+
+.form-grid {
+  display: grid;
+  gap: 0 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.form-item-wide {
+  grid-column: span 2;
+}
+
+.cover-editor {
+  align-items: center;
+  display: flex;
+  gap: 20px;
+}
+
+.cover-preview {
+  align-items: center;
+  background: #fff;
+  border: 1px dashed rgb(203 213 225);
+  border-radius: 12px;
+  display: flex;
+  height: 112px;
+  justify-content: center;
+  overflow: hidden;
+  width: 112px;
+}
+
+.modal-cover {
+  height: 112px;
+  object-fit: cover;
+  width: 112px;
+}
+
+.cover-placeholder {
+  color: rgb(148 163 184);
+  font-size: 13px;
+}
+
+.cover-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cover-tip {
+  color: rgb(100 116 139);
+  font-size: 13px;
+}
+
+.hidden-input {
+  display: none;
+}
+
 .pager {
   display: flex;
   justify-content: flex-end;
@@ -615,4 +718,25 @@ void loadData(true);
   color: rgb(100 116 139);
   line-height: 32px;
 }
+
+@media (max-width: 900px) {
+  .form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .form-item-wide {
+    grid-column: auto;
+  }
+
+  .cover-editor {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
 </style>