修改礼物弹窗

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">
+      <Form class="game-edit-form" layout="vertical">
-        <FormItem label="封面">
+        <section class="form-section form-section-hero">
-          <div class="upload-row">
+          <div class="section-title">封面资源</div>
-            <Button :loading="uploadLoading" @click="openUpload">
+          <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>
-            <Image v-if="form.cover" :src="form.cover" class="cover" />
+              <span class="cover-tip">支持图片格式，保存后会同步到游戏列表封面。</span>
+            </div>
           </div>
           <input
             ref="fileInput"
@@ -479,7 +487,11 @@ void loadData(true);
             type="file"
             @change="handleUpload"
           >
-        </FormItem>
+        </section>
+
+        <section class="form-section">
+          <div class="section-title">基础信息</div>
+          <div class="form-grid">
             <FormItem label="系统">
               <SysOriginSelect
                 v-model:value="form.sysOrigin"
@@ -502,21 +514,15 @@ void loadData(true);
                 placeholder="请选择客户端"
               />
             </FormItem>
-        <FormItem label="是否自研">
+            <FormItem label="名称">
-          <Select
+              <Input v-model:value="form.name" placeholder="请输入名称" />
-            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="编号">
+              <Input v-model:value="form.gameCode" placeholder="请输入编号" />
+            </FormItem>
             <FormItem label="游戏分类">
               <Select
                 v-model:value="form.category"
@@ -525,12 +531,24 @@ void loadData(true);
                 placeholder="请选择游戏分类"
               />
             </FormItem>
-        <FormItem label="名称">
+            <FormItem label="是否自研">
-          <Input v-model:value="form.name" placeholder="请输入名称" />
+              <Select
+                v-model:value="form.self"
+                :options="booleanOptions"
+                allow-clear
+                option-label-prop="label"
+                placeholder="请选择是否自研"
+              />
             </FormItem>
-        <FormItem label="编号">
+            <FormItem v-if="form.self" class="form-item-wide" label="自研游戏Code">
-          <Input v-model:value="form.gameCode" placeholder="请输入编号" />
+              <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>
@@ -570,6 +588,11 @@ void loadData(true);
             <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"
@@ -579,6 +602,7 @@ void loadData(true);
               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>