From 7a6573b4da9971c503a40b43817be4276f73f6b8 Mon Sep 17 00:00:00 2001
From: xiaoxialulu <546464268@qq.com>
Date: Fri, 27 Sep 2024 16:45:10 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=9F=BA=E7=A1=80=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 unit-backend/.idea/workspace.xml              |  33 +--
 .../views/https/case/components/detail.vue    | 245 ++++++++++--------
 2 files changed, 150 insertions(+), 128 deletions(-)

diff --git a/unit-backend/.idea/workspace.xml b/unit-backend/.idea/workspace.xml
index 1a6dce1..da61575 100644
--- a/unit-backend/.idea/workspace.xml
+++ b/unit-backend/.idea/workspace.xml
@@ -4,15 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="655d96d8-eed0-4ef3-a2e5-e0dd82ec341a" name="Changes" comment="fix: 修复用例执行返回体错误问题">
+    <list default="true" id="655d96d8-eed0-4ef3-a2e5-e0dd82ec341a" name="Changes" comment="style: 调整用例详情页基础布局">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/api/dao/__init__.py" beforeDir="false" afterPath="$PROJECT_DIR$/api/dao/__init__.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/api/dao/https.py" beforeDir="false" afterPath="$PROJECT_DIR$/api/dao/https.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/api/management/commands/initmenus.py" beforeDir="false" afterPath="$PROJECT_DIR$/api/management/commands/initmenus.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/api/services/executor.py" beforeDir="false" afterPath="$PROJECT_DIR$/api/services/executor.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/logs/EasyPost.log" beforeDir="false" afterPath="$PROJECT_DIR$/logs/EasyPost.log" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/logs/EasyPost_collect.log" beforeDir="false" afterPath="$PROJECT_DIR$/logs/EasyPost_collect.log" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../unit-executor/logs/Unit-Executor.log" beforeDir="false" afterPath="$PROJECT_DIR$/../unit-executor/logs/Unit-Executor.log" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/../web/src/views/https/case/components/detail.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../web/src/views/https/case/components/detail.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -541,15 +534,7 @@
       <workItem from="1726207726818" duration="19670000" />
       <workItem from="1726798058849" duration="25949000" />
       <workItem from="1727230274850" duration="39175000" />
-      <workItem from="1727423396190" duration="1283000" />
-    </task>
-    <task id="LOCAL-00415" summary="Added ApschedulerJobs model and enabled test_task in scheduler.">
-      <option name="closed" value="true" />
-      <created>1716196818448</created>
-      <option name="number" value="00415" />
-      <option name="presentableId" value="LOCAL-00415" />
-      <option name="project" value="LOCAL" />
-      <updated>1716196818448</updated>
+      <workItem from="1727423396190" duration="2771000" />
     </task>
     <task id="LOCAL-00416" summary="Add apscheduler jobs list view and router.">
       <option name="closed" value="true" />
@@ -935,7 +920,15 @@
       <option name="project" value="LOCAL" />
       <updated>1727417802331</updated>
     </task>
-    <option name="localTasksCounter" value="464" />
+    <task id="LOCAL-00464" summary="style: 调整用例详情页基础布局">
+      <option name="closed" value="true" />
+      <created>1727425071732</created>
+      <option name="number" value="00464" />
+      <option name="presentableId" value="LOCAL-00464" />
+      <option name="project" value="LOCAL" />
+      <updated>1727425071732</updated>
+    </task>
+    <option name="localTasksCounter" value="465" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -965,7 +958,6 @@
   </component>
   <component name="VcsManagerConfiguration">
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="Changed project name and logo, updated err_msg and err_png fields in ClosedTasksDetail model, added ellipsis utility, and" />
     <MESSAGE value="Changed project name and logo, updated err_msg and err_png fields in ClosedTasksDetail model, added ellipsis utility, and modified" />
     <MESSAGE value="Changed project name and logo, updated err_msg and err_png fields in ClosedTasksDetail model, added ellipsis utility, and modified related" />
     <MESSAGE value="Changed project name and logo, updated err_msg and err_png fields in ClosedTasksDetail model, added ellipsis utility, and modified related UI" />
@@ -990,7 +982,8 @@
     <MESSAGE value="feat: 用例调试功能微服务化" />
     <MESSAGE value="fix: 回滚" />
     <MESSAGE value="fix: 修复用例执行返回体错误问题" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: 修复用例执行返回体错误问题" />
+    <MESSAGE value="style: 调整用例详情页基础布局" />
+    <option name="LAST_COMMIT_MESSAGE" value="style: 调整用例详情页基础布局" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
diff --git a/web/src/views/https/case/components/detail.vue b/web/src/views/https/case/components/detail.vue
index 6bc922d..1727dd9 100644
--- a/web/src/views/https/case/components/detail.vue
+++ b/web/src/views/https/case/components/detail.vue
@@ -18,129 +18,154 @@
       <el-row :gutter="12">
         <el-col :span="18">
           <el-card style="height:100%;min-height: 600px;overflow:scroll;">
-            <template #header>
-              <div>
-                <span style="font-size: 18px; color: #7a8b9a">用例步骤</span>
-              </div>
-            </template>
-            <div>
-              <div style="margin-top: 15px">
-                <el-table
-                  :data="tableData"
-                  :header-cell-style="{ background: '#F2F3F8', color: '#1D2129' }"
-                  style="width: 100%"
-                  ref="dragTable"
-                  row-key="id"
-                  :show-header="false"
-                >
-                  <el-table-column width="30">
-                    <template #default>
+            <el-tabs v-model="SettingActiveName" style="overflow-y: auto">
+              <el-tab-pane name='TestConfiguration'>
+                <template #label>
+                  <strong>测试步骤</strong>
+                </template>
+                <div>
+                  <div style="margin-top: 15px">
+                    <el-table
+                      :data="tableData"
+                      :header-cell-style="{ background: '#F2F3F8', color: '#1D2129' }"
+                      style="width: 100%"
+                      ref="dragTable"
+                      row-key="id"
+                      :show-header="false"
+                    >
+                      <el-table-column width="30">
+                        <template #default>
                       <span
                         :class="getStepTypeInfo('api','icon')" class="fab-icons move"
                         :style="{color:getStepTypeInfo('api','color')}"
                       ></span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column width="80">
-                    <template #default="scope">
-                      <div>
-                        <div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column width="80">
+                        <template #default="scope">
+                          <div>
+                            <div>
                           <span :class="`opblock-${scope.row.method.toLowerCase()}`">
                               {{ scope.row.method }}
                           </span>
 
-                        </div>
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column>
-                    <template #default="scope">
-                      <div>
+                            </div>
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column>
+                        <template #default="scope">
+                          <div>
                         <span class="opblock-summary-description">
                             {{ scope.row.name }}
                         </span>
-                      </div>
-                    </template>
-                  </el-table-column>
-                </el-table>
-                <el-dropdown :hide-on-click="false" style="width: 100%">
-                  <el-button size="small" style="width: 100%">
-                    <el-icon style="margin-right: 4px">
-                      <plus/>
-                    </el-icon>
-                    添加步骤
-                  </el-button>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item v-for="(value, key)  in state.optTypes"
-                                        :key="key"
-                                        style="margin: 5px 0"
-                                        :style="{ color: getStepTypeInfo(key,'color')}"
-                                        @click="handleAddData(key)">
-
-                        <i :class="getStepTypeInfo(key,'icon')" class="fab-icons"
-                           :style="{color:getStepTypeInfo(key,'color')}"></i>
-                        {{ value }}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </div>
-            </div>
-            <step
-              ref="stepControllerRef"
-              use_type="case"
-              style="margin-bottom: 10px"
-              v-model="state.form.step_data"
-              @change="changeAction"
-            >
-            </step>
+                          </div>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                    <el-dropdown :hide-on-click="false" style="width: 100%">
+                      <el-button size="small" style="width: 100%">
+                        <el-icon style="margin-right: 4px">
+                          <plus/>
+                        </el-icon>
+                        添加步骤
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item v-for="(value, key)  in state.optTypes"
+                                            :key="key"
+                                            style="margin: 5px 0"
+                                            :style="{ color: getStepTypeInfo(key,'color')}"
+                                            @click="handleAddData(key)">
+
+                            <i :class="getStepTypeInfo(key,'icon')" class="fab-icons"
+                               :style="{color:getStepTypeInfo(key,'color')}"></i>
+                            {{ value }}
+                          </el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </div>
+                </div>
+                <step
+                  ref="stepControllerRef"
+                  use_type="case"
+                  style="margin-bottom: 10px"
+                  v-model="state.form.step_data"
+                  @change="changeAction"
+                >
+                </step>
+              </el-tab-pane>
+            </el-tabs>
           </el-card>
         </el-col>
         <el-col :span="6">
           <el-card style="height:100%;min-height: 600px;overflow:scroll;">
-            <template #header>
-              <div>
-                <span style="margin-right:8px;color: #7a8b9a"><el-icon><component :is="Odometer"/></el-icon></span>
-                <span style="font-size: 18px; color: #7a8b9a">用例配置</span>
-              </div>
-            </template>
-            <div>
-              <el-form
-                  autoComplete="on"
-                  :model="state.form"
-                  :rules="rules"
-                  ref="ruleFormRef"
-                  label-position="right"
-                  label-width="auto"
-                  size="small"
-              >
-                <el-form-item label="用例名称：" prop="name" :required="true">
-                  <el-input v-model.trim="state.form.name"
-                            style="width: 100%;"
-                            size="small"
-                            placeholder="请输入用例名称"></el-input>
-                </el-form-item>
-                <el-form-item label="优先级：" prop="priority" :required="true">
-                  <el-select v-model="state.form.priority" filterable placeholder="请选择接口优先级" size="small">
-                    <el-option
-                        v-for="item in priority"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="用例描述：" prop="">
-                  <el-input v-model.trim="state.form.remarks"
-                            style="width: 100%;"
-                            size="small"
-                            placeholder="请输入用例描述"></el-input>
-                </el-form-item>
-              </el-form>
-              <el-button type="success" @click="debug(ruleFormRef)" size="small" :loading="loading">调试</el-button>
-              <el-button type="primary" @click="onSureClick(ruleFormRef)" size="small">保存</el-button>
-            </div>
+            <el-tabs v-model="TestActiveName" style="overflow-y: auto">
+              <el-tab-pane name='FunctionalTests'>
+                <template #label>
+                  <strong>功能测试</strong>
+                </template>
+                <div>
+                  <el-form
+                    autoComplete="on"
+                    :model="state.form"
+                    :rules="rules"
+                    ref="ruleFormRef"
+                    label-position="right"
+                    label-width="auto"
+                    size="small"
+                  >
+                    <el-form-item label="用例名称：" prop="name" :required="true">
+                      <el-input v-model.trim="state.form.name"
+                                style="width: 100%;"
+                                size="small"
+                                placeholder="请输入用例名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="优先级：" prop="priority" :required="true">
+                      <el-select v-model="state.form.priority" filterable placeholder="请选择接口优先级" size="small">
+                        <el-option
+                          v-for="item in priority"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="用例描述：" prop="">
+                      <el-input v-model.trim="state.form.remarks"
+                                style="width: 100%;"
+                                size="small"
+                                placeholder="请输入用例描述"></el-input>
+                    </el-form-item>
+                    <el-form-item
+                      style="width: 100%;"
+                    >
+                      <el-button
+                        style="width: 100%;"
+                        round
+                        type="success"
+                        @click="debug(ruleFormRef)"
+                        size="small"
+                        :loading="loading"
+                      >调试
+                      </el-button>
+                    </el-form-item>
+                    <el-form-item
+                      style="width: 100%;"
+                    >
+                      <el-button
+                        style="width: 100%;"
+                        round type="primary"
+                        @click="onSureClick(ruleFormRef)"
+                        size="small">
+                        保存
+                      </el-button>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
           </el-card>
         </el-col>
       </el-row>
@@ -168,6 +193,10 @@ const ruleFormRef = ref<FormInstance>()
 const tableData = reactive([
 ])
 
+const TestActiveName =  ref('FunctionalTests')
+
+const SettingActiveName =  ref('TestConfiguration')
+
 const loading = ref(false)
 
 const createForm = () => {