refactor(frontend): 重构设置页面布局和样式

-调整了 CameraConfig 组件的标题和布局
- 优化了 Setting 组件的样式，增加了 setting-wrap 类
- 重新组织了 OtherConfig 组件的结构，添加了充值金币功能
- 更新了全局样式，统一了表单和选择框的样式

frontend/src/views/Setting/components/CameraConfig.vue

@@ -1,7 +1,8 @@
 <template>
+
+  <div class="flex left fw-b fs-16 mar-top-20" style="padding-left: 100px">相机ISO参数<span style="color: #FD5E1A">（<el-icon style="position: relative; top:2px; margin: 0 3px"><WarningFilled /></el-icon>相机设置ISO auto时无效）</span></div>
   <div class="selectBox">
     <div class="form-item" style="padding-bottom: 30px;">
-      <div class="te-l fw-b fs-16">ISO参数（相机设置ISO auto时无效）</div>
       <div class="iso-inputs mar-top-20">
         <div class="iso-group">
           <span class="iso-label">用曝光灯时：</span>
@@ -43,7 +44,6 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -171,4 +171,7 @@ defineExpose({ save })
     border-radius: 6px;
   }
 }
+.selectBox {
+  padding-top: 10px;
+}
 </style>

frontend/src/views/Setting/components/otherConfig.vue

@@ -1,8 +1,26 @@
 <template>
+<!--
   <div class="flex left fs-14 line-40 mar-top-10" style="margin-left: 100px">
     剩余金币：{{ useUserInfoStore.userInfo.coin_amount }}
     <el-button class="mar-left-10" @click="openDialog()" v-log="{ describe: { action: '点击充值金币' } }">充值金币</el-button>
   </div>
+-->
+
+
+  <div class="form-item">
+    <label>剩余金币：</label>
+    <div class="select-wrapper">
+      <el-input
+          type="text"
+          readonly="readonly"
+          v-model="useUserInfoStore.userInfo.coin_amount"
+          class="w-full px-3 py-2 border rounded-md"
+      >
+        <template #append> <el-button class="recharge-btn" @click="openDialog()" v-log="{ describe: { action: '点击充值' } }">充值</el-button></template>
+      </el-input>
+    </div>
+    <div class="fs-12 c-666">（用户视频生成，需单独金币支付）</div>
+  </div>
 
   <!-- 新增：充值金币弹窗 -->
   <el-dialog v-model="showRechargeDialog"
@@ -71,3 +89,18 @@ onUnmounted(() => {
   window.removeEventListener('message', handleWindowMessage);
 });
 </script>
+<style scoped lang="scss">
+.recharge-btn {
+  background: linear-gradient( 180deg, #FFAF51 0%, #FF7272 100%);
+  border-radius: 6px;
+  color: #fff !important;
+}
+.select-wrapper {
+  ::v-deep {
+
+    .el-input-group__append{
+
+    }
+  }
+}
+</style>

frontend/src/views/Setting/index.vue

@@ -3,7 +3,7 @@
   >
     <template  #title><div @click="handleSettingClick" v-log="{ describe: { action: '点击设置标题' } }">设置</div></template>
   </headerBar>
-  <div class="container">
+  <div class="container setting-wrap">
     <nav class="settings-nav">
       <div class="nav-item" :class="{'active': activeIndex === 0}" @click="toggleTab(0)" v-log="{ describe: { action: '点击切换设置Tab', tab: '基础配置' } }">
         <img src="@/assets/images/setting/icon1.png" class="nav-icon" v-if="activeIndex !== 0"/>
@@ -111,6 +111,7 @@
             </div>
           </div>
 
+          <other-config/>
           <!--                <div class="form-item">
                               <label>运行模式：</label>
                               <div class="select-wrapper">
@@ -121,7 +122,6 @@
                           </div>-->
         </div>
 
-        <other-config/>
       </template>
       <!--其他设置-->
           <div class="selectBox" style="padding-top: 0px;padding-left: 0;" v-if="activeIndex === 4">
@@ -513,6 +513,53 @@ const saveSetting = async (index) => {
 .el-image-viewer__wrapper{
   z-index: 9999 !important;
 }
+.setting-wrap {
+
+  .selectBox{
+    padding-top: 30px;
+    padding-left: 100px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    :deep(.el-tabs__header){
+      padding-left: 0;
+    }
+    :deep(.el-tabs--card>.el-tabs__header){
+      border-bottom: 1px solid #CCCCCC;
+    }
+    :deep(.el-tabs__item){
+      height: 30px;
+      line-height: 30px;
+    }
+    :deep(.el-tabs__nav-wrap){
+      margin-bottom: 0;
+    }
+    :deep(.el-tabs__item.is-active){
+      color: #333;
+      font-weight: bold;
+      background: #fff;
+    }
+  }
+
+  .form-item {
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+  }
+  .form-item label {
+    display: block;
+    min-width: 98px;
+    text-align: right;
+    font-size: 14px;
+    color: #1A1A1A;
+  }
+
+  .select-wrapper {
+    position: relative;
+    width: 200px;
+    :deep(.el-input__inner){
+      border-radius: 6px;
+    }
+  }
+}
 </style>
 <style lang="scss" scoped>
 body {
@@ -570,18 +617,6 @@ body {
   margin: 0 auto;
   height: 306px;
 }
-.form-item {
-  margin-bottom: 24px;
-  display: flex;
-  align-items: center;
-}
-.form-item label {
-  display: block;
-  min-width: 98px;
-  text-align: right;
-  font-size: 14px;
-  color: #1A1A1A;
-}
 .input-group {
   display: flex;
   gap: 12px;
@@ -593,13 +628,6 @@ body {
   padding: 8px 12px;
   font-size: 14px;
 }
-.select-wrapper {
-  position: relative;
-  width: 200px;
-  :deep(.el-input__inner){
-    border-radius: 6px;
-  }
-}
 .error-text {
   color: #dc2626;
   font-size: 12px;
@@ -618,29 +646,6 @@ body {
 .captureBox{
   border-bottom: 1px solid rgba(0,0,0,0.1);
 }
-.selectBox{
-    padding-top: 30px;
-    padding-left: 100px;
-    border-bottom: 1px solid rgba(0,0,0,0.1);
-    :deep(.el-tabs__header){
-      padding-left: 0;
-    }
-    :deep(.el-tabs--card>.el-tabs__header){
-      border-bottom: 1px solid #CCCCCC;
-    }
-    :deep(.el-tabs__item){
-      height: 30px;
-      line-height: 30px;
-    }
-    :deep(.el-tabs__nav-wrap){
-      margin-bottom: 0;
-    }
-    :deep(.el-tabs__item.is-active){
-      color: #333;
-      font-weight: bold;
-      background: #fff;
-    }
-}
 .select-btn{
   display: flex;
   align-items: center;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ZhiHuiYin",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "1、支持SmartShooter5软件控制相机",
   "main": "main.js",
   "scripts": {