From 4184a53a86ae2df3dd6c9f6eacc246e14f6a90f4 Mon Sep 17 00:00:00 2001
From: dmy <dmy@dmy.com>
Date: Wed, 4 Mar 2026 09:27:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E8=A1=A8=E5=8D=95=E5=B8=83=E5=B1=80=EF=BC=8C=E5=87=A0?=
 =?UTF-8?q?=E4=BD=95=E5=8F=AF=E8=A7=86=E5=8C=96=E5=B9=B6=E5=88=97=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webui/src/components/ParameterForm.vue | 373 +++++++++++++------------
 1 file changed, 189 insertions(+), 184 deletions(-)

diff --git a/webui/src/components/ParameterForm.vue b/webui/src/components/ParameterForm.vue
index 27fea42..158e884 100644
--- a/webui/src/components/ParameterForm.vue
+++ b/webui/src/components/ParameterForm.vue
@@ -17,198 +17,203 @@
       <q-page-container>
         
         <q-page class="q-pa-md">
-          <div class="max-w-4xl mx-auto">
-            <!-- 基本参数 -->
-            <q-card class="q-mb-md shadow-2">
-              <q-card-section class="bg-indigo-50">
-                <div class="text-h6 text-indigo-900 flex items-center gap-2">
-                  <q-icon name="settings" />
-                  基本参数
-                </div>
-              </q-card-section>
+          <div class="max-w-7xl mx-auto">
+            <!-- 基本参数 + 杆塔几何结构 并排布局 -->
+            <div class="row q-col-gutter-md q-mb-md">
+              <!-- 左侧：基本参数 -->
+              <div class="col-12 col-lg-6">
+                <q-card class="shadow-2 full-height">
+                  <q-card-section class="bg-indigo-50">
+                    <div class="text-h6 text-indigo-900 flex items-center gap-2">
+                      <q-icon name="settings" />
+                      基本参数
+                    </div>
+                  </q-card-section>
 
-              <q-card-section>
-                <div class="row q-col-gutter-md">
-                  <div class="col-12 col-md-6">
-                    <q-select
-                      v-model="params.parameter.rated_voltage"
-                      :options="voltageOptions"
-                      label="额定电压等级 (kV)"
-                    />
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      :model-value="currentType"
-                      label="电压类型 (AC/DC)"
-                      readonly
-                    >
-                      <q-tooltip>交流(AC)或直流(DC)，由电压等级自动判断</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.h_c_sag"
-                      type="number"
-                      step="0.01"
-                      label="导线弧垂 (m)"
-                    >
-                      <q-tooltip>导线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.h_g_sag"
-                      type="number"
-                      step="0.01"
-                      label="地线弧垂 (m)"
-                    >
-                      <q-tooltip>地线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.insulator_c_len"
-                      type="number"
-                      step="0.01"
-                      label="导线串子绝缘长度 (m)"
-                    >
-                      <q-tooltip>绝缘子串的总长度</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.string_c_len"
-                      type="number"
-                      step="0.1"
-                      label="导线串长 (m)"
-                    >
-                      <q-tooltip>导线绝缘子串的总长度</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.string_g_len"
-                      type="number"
-                      step="0.1"
-                      label="地线串长 (m)"
-                    >
-                      <q-tooltip>地线绝缘子串的总长度</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.altitude"
-                      type="number"
-                      label="海拔高度 (m)"
-                    >
-                      <q-tooltip>用于修正绝缘子串的闪络电压</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.td"
-                      type="number"
-                      label="雷暴日 (d)"
-                    >
-                      <q-tooltip>一年中雷暴天数，用于计算地闪密度</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.z_0"
-                      type="number"
-                      label="雷电波阻抗 (Ω)"
-                    >
-                      <q-tooltip>雷电波阻抗，用于计算最小雷电流。</q-tooltip>
-                    </q-input>
-                  </div>
-                  <div class="col-12 col-md-6">
-                    <q-input
-                      v-model="params.parameter.z_c"
-                      type="number"
-                      label="导线波阻抗 (Ω)"
-                    >
-                      <q-tooltip>导线波阻抗，用于计算最小雷电流。</q-tooltip>
-                    </q-input>
-                  </div>
-                </div>
+                  <q-card-section>
+                    <div class="row q-col-gutter-md">
+                      <div class="col-12 col-md-6">
+                        <q-select
+                          v-model="params.parameter.rated_voltage"
+                          :options="voltageOptions"
+                          label="额定电压等级 (kV)"
+                        />
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          :model-value="currentType"
+                          label="电压类型 (AC/DC)"
+                          readonly
+                        >
+                          <q-tooltip>交流(AC)或直流(DC)，由电压等级自动判断</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.h_c_sag"
+                          type="number"
+                          step="0.01"
+                          label="导线弧垂 (m)"
+                        >
+                          <q-tooltip>导线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.h_g_sag"
+                          type="number"
+                          step="0.01"
+                          label="地线弧垂 (m)"
+                        >
+                          <q-tooltip>地线在最大弧垂状态下相对于挂点的垂直距离</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.insulator_c_len"
+                          type="number"
+                          step="0.01"
+                          label="导线串子绝缘长度 (m)"
+                        >
+                          <q-tooltip>绝缘子串的总长度</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.string_c_len"
+                          type="number"
+                          step="0.1"
+                          label="导线串长 (m)"
+                        >
+                          <q-tooltip>导线绝缘子串的总长度</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.string_g_len"
+                          type="number"
+                          step="0.1"
+                          label="地线串长 (m)"
+                        >
+                          <q-tooltip>地线绝缘子串的总长度</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.altitude"
+                          type="number"
+                          label="海拔高度 (m)"
+                        >
+                          <q-tooltip>用于修正绝缘子串的闪络电压</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.td"
+                          type="number"
+                          label="雷暴日 (d)"
+                        >
+                          <q-tooltip>一年中雷暴天数，用于计算地闪密度</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.z_0"
+                          type="number"
+                          label="雷电波阻抗 (Ω)"
+                        >
+                          <q-tooltip>雷电波阻抗，用于计算最小雷电流。</q-tooltip>
+                        </q-input>
+                      </div>
+                      <div class="col-12 col-md-6">
+                        <q-input
+                          v-model="params.parameter.z_c"
+                          type="number"
+                          label="导线波阻抗 (Ω)"
+                        >
+                          <q-tooltip>导线波阻抗，用于计算最小雷电流。</q-tooltip>
+                        </q-input>
+                      </div>
+                    </div>
 
-                <!-- 导、地线挂点高度 -->
-                <div class="q-mt-md">
-                  <div class="text-subtitle2 q-mb-sm">
-                    导、地线挂点垂直坐标 (m) 
-                  </div>
-                  <div class="row q-col-gutter-sm">
-                    <div class="col" v-for="(_, index) in params.parameter.h_arm" :key="index">
-                      <q-input
-                        v-model="params.parameter.h_arm[index]"
-                        type="number"
-                        step="0.1"
-                        :label="index === 0 ? '地线' : `导线 ${index}`"
-                        dense
-                      />
+                    <!-- 导、地线挂点高度 -->
+                    <div class="q-mt-md">
+                      <div class="text-subtitle2 q-mb-sm">
+                        导、地线挂点垂直坐标 (m)
+                      </div>
+                      <div class="row q-col-gutter-sm">
+                        <div class="col" v-for="(_, index) in params.parameter.h_arm" :key="index">
+                          <q-input
+                            v-model="params.parameter.h_arm[index]"
+                            type="number"
+                            step="0.1"
+                            :label="index === 0 ? '地线' : `导线 ${index}`"
+                            dense
+                          />
+                        </div>
+                        <div class="col-auto">
+                          <q-btn flat round color="primary" icon="add" @click="addHArm" :disable="params.parameter.h_arm.length >= 4" v-show="params.parameter.h_arm.length === 2" />
+                        </div>
+                        <div class="col-auto">
+                          <q-btn flat round color="negative" icon="remove" @click="removeHArm" :disable="params.parameter.h_arm.length <= 2" v-show="params.parameter.h_arm.length === 4" />
+                        </div>
+                      </div>
                     </div>
-                    <div class="col-auto">
-                      <q-btn flat round color="primary" icon="add" @click="addHArm" :disable="params.parameter.h_arm.length >= 4" v-show="params.parameter.h_arm.length === 2" />
-                    </div>
-                    <div class="col-auto">
-                      <q-btn flat round color="negative" icon="remove" @click="removeHArm" :disable="params.parameter.h_arm.length <= 2" v-show="params.parameter.h_arm.length === 4" />
-                    </div>
-                  </div>
-                </div>
 
-                <!-- 导、地线水平坐标 -->
-                <div class="q-mt-md">
-                  <div class="text-subtitle2 q-mb-sm">
-                    导、地线挂点水平坐标 (m)
-                  </div>
-                  <div class="row q-col-gutter-sm">
-                    <div class="col" v-for="(_, index) in params.parameter.gc_x" :key="index">
-                      <q-input
-                        v-model="params.parameter.gc_x[index]"
-                        type="number"
-                        step="0.1"
-                        :label="index === 0 ? '地线' : `导线 ${index}`"
-                        dense
-                      />
+                    <!-- 导、地线水平坐标 -->
+                    <div class="q-mt-md">
+                      <div class="text-subtitle2 q-mb-sm">
+                        导、地线挂点水平坐标 (m)
+                      </div>
+                      <div class="row q-col-gutter-sm">
+                        <div class="col" v-for="(_, index) in params.parameter.gc_x" :key="index">
+                          <q-input
+                            v-model="params.parameter.gc_x[index]"
+                            type="number"
+                            step="0.1"
+                            :label="index === 0 ? '地线' : `导线 ${index}`"
+                            dense
+                          />
+                        </div>
+                        <div class="col-auto">
+                          <q-btn flat round color="primary" icon="add" @click="addGcX" :disable="params.parameter.gc_x.length >= 4" v-show="params.parameter.gc_x.length === 2" />
+                        </div>
+                        <div class="col-auto">
+                          <q-btn flat round color="negative" icon="remove" @click="removeGcX" :disable="params.parameter.gc_x.length <= 2" v-show="params.parameter.gc_x.length === 4" />
+                        </div>
+                      </div>
                     </div>
-                    <div class="col-auto">
-                      <q-btn flat round color="primary" icon="add" @click="addGcX" :disable="params.parameter.gc_x.length >= 4" v-show="params.parameter.gc_x.length === 2" />
-                    </div>
-                    <div class="col-auto">
-                      <q-btn flat round color="negative" icon="remove" @click="removeGcX" :disable="params.parameter.gc_x.length <= 2" v-show="params.parameter.gc_x.length === 4" />
-                    </div>
-                  </div>
-                </div>
 
-                <!-- 地面倾角 -->
-                <div class="q-mt-md">
-                  <div class="row q-col-gutter-sm">
-                    <div class="col-12 col-md-6">
-                      <q-input
-                        v-model="params.parameter.ground_angels[0]"
-                        type="number"
-                        step="1"
-                        label="地面倾角 (°) - 向下为正"
-                      >
-                        <q-tooltip>地面倾斜角度，向下为正值</q-tooltip>
-                      </q-input>
+                    <!-- 地面倾角 -->
+                    <div class="q-mt-md">
+                      <div class="row q-col-gutter-sm">
+                        <div class="col-12 col-md-6">
+                          <q-input
+                            v-model="params.parameter.ground_angels[0]"
+                            type="number"
+                            step="1"
+                            label="地面倾角 (°) - 向下为正"
+                          >
+                            <q-tooltip>地面倾斜角度，向下为正值</q-tooltip>
+                          </q-input>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
+                  </q-card-section>
+                </q-card>
+              </div>
 
-                <!-- 杆塔几何结构可视化 -->
-                <div class="q-mt-md">
-                  <Geometry
-                    :h-arm="params.parameter.h_arm"
-                    :gc-x="params.parameter.gc_x"
-                    :h-c-sag="params.parameter.h_c_sag"
-                    :h-g-sag="params.parameter.h_g_sag"
-                    :ground-angels="params.parameter.ground_angels"
-                  />
-                </div>
-              </q-card-section>
-            </q-card>
+              <!-- 右侧：杆塔几何结构可视化 -->
+              <div class="col-12 col-lg-6">
+                <Geometry
+                  :h-arm="params.parameter.h_arm"
+                  :gc-x="params.parameter.gc_x"
+                  :h-c-sag="params.parameter.h_c_sag"
+                  :h-g-sag="params.parameter.h_g_sag"
+                  :ground-angels="params.parameter.ground_angels"
+                />
+              </div>
+            </div>
 
             <!-- 高级参数 -->
             <q-card class="q-mb-md shadow-2">