* optimize style for forms.

ui/src/views/exec/TabPageExecUnit.vue

 <template>
   <div class="tab-page-exec-unit">
     <Form labelCol="6" wrapperCol="26">
-      <FormItem name="cmd" :label="t('test_cmd')" :info="validateInfos.cmd">
+      <FormItem labelWidth="100px" name="cmd" :label="t('test_cmd')" :info="validateInfos.cmd">
         <input v-model="modelRef.cmd" @keydown="keydown"/>
       </FormItem>
 
-      <FormItem v-if="currProduct.id" name="submitResult" :label="t('submit_result_to_zentao')">
+      <FormItem labelWidth="100px" v-if="currProduct.id" name="submitResult" :label="t('submit_result_to_zentao')">
         <input v-model="modelRef.submitResult" type="checkbox">
       </FormItem>
 
-      <FormItem>
+      <FormItem labelWidth="100px">
         <Button :disabled="isRunning === 'true' || !modelRef.cmd" @click="start" class="rounded">
           {{ t('exec') }}
         </Button>
@@ -18,7 +18,7 @@
         </Button>
       </FormItem>
 
-      <FormItem>
+      <FormItem labelWidth="100px">
         <span class="t-tips">{{ t('cmd_nav') }}</span>
       </FormItem>
     </Form>

ui/src/views/interpreter/FormInterpreter.vue

@@ -3,11 +3,12 @@
     :showModal="showModalRef"
     @onCancel="cancel"
     @onOk="submit"
-    :title="info == undefined ? t('create_interpreter') : t('edit_interpreter')" 
-    :contentStyle="{width: '600px'}"
+    :title="info == undefined ? t('create_interpreter') : t('edit_interpreter')"
+    :contentStyle="{width: '500px'}"
   >
     <Form class="form-interpreter" labelCol="6" wrapperCol="16">
       <FormItem
+        labelWidth="100px"
         name="lang"
         :label="t('script_lang')"
         :info="validateInfos.lang"
@@ -23,6 +24,7 @@
         </select>
       </FormItem>
       <FormItem
+        labelWidth="100px"
         v-if="isElectron"
         name="path"
         :label="t('interpreter_path')"
@@ -34,6 +36,7 @@
         <Button  v-if="isElectron" @click="selectFile" class="state secondary select-dir-btn">{{t('select')}}</Button>
       </FormItem>
       <FormItem
+        labelWidth="100px"
         v-if="!isElectron"
         name="path"
         :label="t('interpreter_path')"
@@ -42,6 +45,7 @@
         <input v-model="modelRef.path" />
       </FormItem>
       <FormItem
+        labelWidth="100px"
         name="lang"
         v-if="interpreterInfos.length > 0"
         :label="t('script_lang')"

ui/src/views/result/FormBug.vue

@@ -4,6 +4,7 @@
       @onCancel="close"
       @onOk="submit"
       :title="t('submit_result_to_zentao')"
+      :contentStyle="{width: '500px'}"
   >
     <Form labelCol="6" wrapperCol="16">
       <FormItem name="title" :label="t('title')" :info="validateInfos.title">
@@ -11,50 +12,60 @@
       </FormItem>
 
       <FormItem name="module" :label="t('module')">
-        <select name="module" v-model="modelRef.module">
-          <option value=""></option>
-          <option v-for="item in modules" :key="item.code" :value="item.code+''">
-            {{ item.name }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="module" v-model="modelRef.module">
+            <option value=""></option>
+            <option v-for="item in modules" :key="item.code" :value="item.code+''">
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </FormItem>
 
       <FormItem name="type" :label="t('category')">
-        <select name="type" v-model="modelRef.type">
-          <option value=""></option>
-          <option v-for="item in types" :key="item.code" :value="item.code+''">
-            {{ item.name }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="type" v-model="modelRef.type">
+            <option value=""></option>
+            <option v-for="item in types" :key="item.code" :value="item.code+''">
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </FormItem>
 
       <FormItem name="openedBuild" :label="t('version')">
-        <select name="openedBuild" v-model="modelRef.openedBuild">
-          <option value=""></option>
-          <option v-for="item in builds" :key="item.code" :value="item.code+''">
-            {{ item.name }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="openedBuild" v-model="modelRef.openedBuild">
+            <option value=""></option>
+            <option v-for="item in builds" :key="item.code" :value="item.code+''">
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </FormItem>
 
       <FormItem name="severity" :label="t('severity')">
-        <select name="severity" v-model="modelRef.severity">
-          <option v-for="item in severities" :key="item.code" :value="item.code+''">
-            {{ item.name }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="severity" v-model="modelRef.severity">
+            <option v-for="item in severities" :key="item.code" :value="item.code+''">
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </FormItem>
 
       <FormItem name="priority" :label="t('priority')">
-        <select name="priority" v-model="modelRef.pri">
-          <option v-for="item in priorities" :key="item.code" :value="item.code+''">
-            {{ item.name }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="priority" v-model="modelRef.pri">
+            <option v-for="item in priorities" :key="item.code" :value="item.code+''">
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </FormItem>
 
       <FormItem name="type" :label="t('step')">
-        <textarea v-model="modelRef.steps" rows="3" />
+        <textarea v-model="modelRef.steps" rows="6" />
       </FormItem>
     </Form>
   </ZModal>
@@ -177,4 +188,4 @@ defineExpose({
 
 <style lang="less" scoped>
 
-</style>
\ No newline at end of file
+</style>

ui/src/views/result/FormResult.vue

@@ -4,15 +4,18 @@
     @onCancel="close"
     @onOk="submit"
     :title="t('submit_result_to_zentao')"
+    :contentStyle="{width: '300px'}"
   >
     <Form labelCol="6" wrapperCol="16">
       <FormItem name="taskId" :label="t('task')">
-        <select name="taskId" v-model="modelRef.taskId">
-          <option value="0"></option>
-          <option v-for="item in tasks" :key="item.id" :value="item.id">
-            {{ item.name }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="taskId" v-model="modelRef.taskId">
+            <option value="0"></option>
+            <option v-for="item in tasks" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </FormItem>
     </Form>
   </ZModal>
@@ -116,4 +119,4 @@ defineExpose({
 
 <style lang="less" scoped>
 
-</style>
\ No newline at end of file
+</style>

ui/src/views/workspace/FormWorkspace.vue

@@ -10,23 +10,23 @@
       <FormItem name="name" :label="t('name')" :info="validateInfos.name">
         <input v-model="modelRef.name" />
       </FormItem>
-        
       <FormItem name="path" :label="t('path')" :info="validateInfos.path">
-        <input v-if="isElectron" v-model="modelRef.path"
-             />
-        <Button  v-if="isElectron" @click="selectDir" class="state secondary select-dir-btn">{{t('select')}}</Button>
+        <input v-if="isElectron" v-model="modelRef.path" />
+        <Button  v-if="isElectron" @click="selectDir" class="state secondary flex-none rounded">{{t('select')}}</Button>
         <input v-if="!isElectron" v-model="modelRef.path" />
       </FormItem>
       <FormItem name="type" :label="t('type')" :info="validateInfos.type">
-        <select name="type" @change="selectType" v-model="modelRef.type">
-          <option
-            v-for="item in testTypes"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.label }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="type" @change="selectType" v-model="modelRef.type">
+            <option
+              v-for="item in testTypes"
+              :key="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </option>
+          </select>
+        </div>
       </FormItem>
       <FormItem
         v-if="modelRef.type === 'ztf'"
@@ -34,17 +34,16 @@
         :label="t('default_lang')"
         :info="validateInfos.lang"
       >
-        <select name="type" v-model="modelRef.lang">
-          <option v-for="item in langs" :key="item.code" :value="item.code">
-            {{ item.name }}
-          </option>
-        </select>
+        <div class="select">
+          <select name="type" v-model="modelRef.lang">
+            <option v-for="item in langs" :key="item.code" :value="item.code">
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
       </FormItem>
-      <FormItem v-if="showCmd" name="cmd" :label="t('cmd')" :info="validateInfos.cmd">
+      <FormItem v-if="showCmd" name="cmd" :label="t('cmd')" :info="validateInfos.cmd" :helpText="t('tips_test_cmd', {cmd: cmdSample})">
         <textarea v-model="modelRef.cmd" />
-        <div class="t-tips" style="margin-top: 5px;">
-          <div>{{ t('tips_test_cmd', {cmd: cmdSample}) }}</div>
-        </div>
       </FormItem>
     </Form>
   </ZModal>
@@ -168,10 +167,3 @@ defineExpose({
   clearFormData,
 });
 </script>
-
-<style>
-.select-dir-btn{
-    position: absolute;
-    right: 20px;
-}
-</style>
\ No newline at end of file