条目信息展示组件

src/components/BugEditDrawer.vue

@@ -62,8 +62,7 @@
               </el-row>
               <el-row style="margin: 3px 20px;width: 100%">
                 <el-col :span="12">
-                  <div class="detail-row">
-                    <span>状态：</span>
+                  <RowItem :label="'状态:'">
                     <div  v-if="!isEditing" class="detail-value">
                       <StateTag :state="state"></StateTag>
                     </div>
@@ -76,9 +75,8 @@
                           :label="item.value" />
                       </el-select>
                     </div>
-                  </div>
-                  <div class="detail-row">
-                    <span>优先级：</span>
+                  </RowItem>
+                  <RowItem :label="'优先级:'">
                     <div class="detail-value"  v-if="!isEditing">
                       <PriorityTag :priority="priority"></PriorityTag>
                     </div>
@@ -91,9 +89,8 @@
                           :label="item.label" />
                       </el-select>
                     </div>
-                  </div>
-                  <div class="detail-row">
-                    <span>经办人：</span>
+                  </RowItem>
+                  <RowItem :label="'经办人:'">
                     <div class="detail-value"   v-if="!isEditing">
                       <el-tag>{{processorName}}</el-tag>
                     </div>
@@ -106,11 +103,10 @@
                           :label="item.label" />
                       </el-select>
                     </div>
-                  </div>
+                  </RowItem>
                 </el-col>
                 <el-col :span="12">
-                  <div class="detail-row">
-                    <span>工作量：</span>
+                  <RowItem :label="'工作量:'">
                     <div class="detail-value" v-if="!isEditing">
                       <span>{{timeToTake}}人日</span>
                     </div>
@@ -118,13 +114,9 @@
                       <el-input-number size="mini" v-model="editedBugRecord.timeToTake" :min="1" :max="200">
                       </el-input-number>
                     </div>
-                  </div>
-                  <div class="detail-row">
-                    <span>开始时间：</span>
-                    <span>{{startTime}}</span>
-                  </div>
-                  <div class="detail-row"><span>完成时间：</span>
-                    <span>{{endTime}}</span></div>
+                  </RowItem>
+                  <RowItem :label="'开始时间:'"><span>{{startTime}}</span></RowItem>
+                  <RowItem :label="'完成时间:'"><span>{{endTime}}</span></RowItem>
                 </el-col>
               </el-row>
               <el-row v-if="isEditing" class="entry-row" style="margin-top: 15px">
@@ -138,7 +130,8 @@
                 <el-table :data="commits">
                   <el-table-column type="expand">
                     <template #default="scope">
-                      <pre>{{scope.row}}</pre>
+                      <RowItem :label="'message:'" label-span="5" value-span="19">{{scope.row.message}}</RowItem>
+                      <RowItem :label="'timestamp:'" label-span="5" value-span="19">{{scope.row.timestamp}}</RowItem>
                     </template>
                   </el-table-column>
                   <el-table-column
@@ -174,10 +167,11 @@ import { BugListAPI } from '@/api';
 import PriorityTag from '@/components/PriorityTag.vue';
 import StateTag from '@/components/StateTag.vue';
 import { priorityOptions, stateOptions } from '@/utils/constants';
+import RowItem from './RowItem.vue';
 
 export default {
   name: 'BugEditDrawer',
-  components: { PriorityTag, StateTag },
+  components: { RowItem, PriorityTag, StateTag },
   emits: ['bug-record-update'],
   props: {
     id: Number,

src/components/RequirementDrawer.vue

@@ -62,23 +62,21 @@
               </el-row>
               <el-row style="margin: 3px 20px;width: 100%">
                 <el-col :span="12">
-                  <div class="detail-row">
-                    <span>状态：</span>
-                    <div  v-if="!isEditing" class="detail-value">
-                      <StateTag :state="state"></StateTag>
-                    </div>
-                    <div v-else>
-                      <el-select style="width: 160px" size="mini" v-model="editedRequirement.state">
-                        <el-option
-                          v-for="item in stateOptions"
-                          :key="item.value"
-                          :value="item.value"
-                          :label="item.value" />
-                      </el-select>
-                    </div>
-                  </div>
-                  <div class="detail-row">
-                    <span>优先级：</span>
+                  <RowItem :label="'状态:'">
+                      <div  v-if="!isEditing" class="detail-value">
+                        <StateTag :state="state"></StateTag>
+                      </div>
+                      <div v-else>
+                        <el-select style="width: 160px" size="mini" v-model="editedRequirement.state">
+                          <el-option
+                            v-for="item in stateOptions"
+                            :key="item.value"
+                            :value="item.value"
+                            :label="item.value" />
+                        </el-select>
+                      </div>
+                  </RowItem>
+                  <RowItem :label="'优先级:'">
                     <div class="detail-value"  v-if="!isEditing">
                       <PriorityTag :priority="priority"></PriorityTag>
                     </div>
@@ -91,9 +89,8 @@
                           :label="item.label" />
                       </el-select>
                     </div>
-                  </div>
-                  <div class="detail-row">
-                    <span>经办人：</span>
+                  </RowItem>
+                  <RowItem :label="'经办人:'">
                     <div class="detail-value"   v-if="!isEditing">
                       <el-tag>{{processorName}}</el-tag>
                     </div>
@@ -106,11 +103,10 @@
                           :label="item.label" />
                       </el-select>
                     </div>
-                  </div>
+                  </RowItem>
                 </el-col>
                 <el-col :span="12">
-                  <div class="detail-row">
-                    <span>工作量：</span>
+                  <RowItem :label="'工作量:'">
                     <div class="detail-value" v-if="!isEditing">
                       <span>{{timeToTake}}人日</span>
                     </div>
@@ -118,13 +114,9 @@
                       <el-input-number size="mini" v-model="editedRequirement.timeToTake" :min="1" :max="200">
                       </el-input-number>
                     </div>
-                  </div>
-                  <div class="detail-row">
-                    <span>开始时间：</span>
-                    <span>{{startTime}}</span>
-                  </div>
-                  <div class="detail-row"><span>完成时间：</span>
-                    <span>{{endTime}}</span></div>
+                  </RowItem>
+                  <RowItem :label="'开始时间:'"><span>{{startTime}}</span></RowItem>
+                  <RowItem :label="'完成时间:'"><span>{{endTime}}</span></RowItem>
                 </el-col>
               </el-row>
               <!-- 相关需求 -->
@@ -154,7 +146,8 @@
                 <el-table :data="commits">
                   <el-table-column type="expand">
                     <template #default="scope">
-                      <pre>{{scope.row}}</pre>
+                      <RowItem :label="'message:'" label-span="5" value-span="19">{{scope.row.message}}</RowItem>
+                      <RowItem :label="'timestamp:'" label-span="5" value-span="19">{{scope.row.timestamp}}</RowItem>
                     </template>
                   </el-table-column>
                   <el-table-column
@@ -190,10 +183,11 @@ import { RequirementAPI } from '@/api';
 import PriorityTag from '@/components/PriorityTag.vue';
 import StateTag from '@/components/StateTag.vue';
 import { priorityOptions, stateOptions } from '@/utils/constants';
+import RowItem from './RowItem.vue';
 
 export default {
   name: 'RequirementDrawers',
-  components: { PriorityTag, StateTag },
+  components: { RowItem, PriorityTag, StateTag },
   emits: ['change', 'requirement-update'],
   props: {
     id: Number,

src/components/RowItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <ElRow style="width: 100%; margin: 3px 0;height: 32px" :gutter="12">
+    <ElCol :span="labelSpan" class="label-col">
+      {{label}}
+    </ElCol>
+    <ElCol :span="valueSpan" class="value-col">
+      <slot></slot>
+    </ElCol>
+  </ElRow>
+</template>
+
+<script>
+export default {
+  name: 'RowItem',
+  props: {
+    labelSpan: {
+      type: Number,
+      default: 8,
+    },
+    valueSpan: {
+      type: Number,
+      default: 16,
+    },
+    label: {
+      type: String,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.label-col{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: row;
+  height: 100%;
+  color: darkcyan;
+}
+.value-col{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 100%;
+}
+</style>