enhance the style of JobInfoSnapshotDrawer and StartChatRecord

packages/ui/src/renderer/src/features/JobInfoSnapshot/index.vue

@@ -1,10 +1,27 @@
 <template>
-  <div>{{ jobInfo }}</div>
+  <el-form class="form" label-position="top" size="small">
+    <el-form-item label="公司">{{ jobInfo.companyName }}</el-form-item>
+    <el-form-item label="职位名称">{{ jobInfo.jobName }}</el-form-item>
+    <el-form-item label="职位分类">{{ jobInfo.positionName }}</el-form-item>
+    <el-form-item label="开聊时间">{{
+      dayjs(jobInfo.date).format('YYYY-MM-DD HH:mm:ss')
+    }}</el-form-item>
+    <el-form-item label="工作经验">{{ jobInfo.experienceName }}</el-form-item>
+    <el-form-item label="薪资">{{
+      `${jobInfo.salaryLow}-${jobInfo.salaryHeight}k` +
+      (jobInfo.salaryMonth ? `* ${jobInfo.salaryMonth}薪` : '')
+    }}</el-form-item>
+    <el-form-item label="职位描述">
+      <pre class="of-auto">{{ jobInfo.description }}</pre>
+    </el-form-item>
+    <el-form-item label="BOSS">{{ jobInfo.bossName }} - {{ jobInfo.bossTitle }}</el-form-item>
+  </el-form>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { type VChatStartupLog } from '@geekgeekrun/sqlite-plugin/src/entity/VChatStartupLog'
+import dayjs from 'dayjs'
 
 const props = defineProps({
   jobInfo: {
@@ -14,5 +31,11 @@ const props = defineProps({
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.form {
+  :deep(.el-form-item__label) {
+    color: #999;
+  }
+}
+</style>
 <style lang="scss"></style>

packages/ui/src/renderer/src/page/Configuration/StartChatRecord.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="page-wrap flex flex-col of-hidden">
-    <div class="flex-0">
-      <el-button :loading="isTableLoading" @click="getAutoStartChatRecord">刷新</el-button>
-    </div>
     <div v-loading="isTableLoading" class="flex-1 of-hidden">
       <div ref="tableContainerEl" class="h-100% of-hidden">
         <ElTable
@@ -33,7 +30,7 @@
           />
           <ElTableColumn prop="bossName" label="BOSS" />
           <ElTableColumn prop="bossTitle" label="BOSS身份" />
-          <ElTableColumn label="职位信息" fixed="right">
+          <ElTableColumn label="职位信息" fixed="right" :width="120">
             <template #default="{ row }">
               <ElButton
                 link
@@ -54,19 +51,26 @@
         </ElTable>
       </div>
     </div>
-    <ElPagination
-      v-model:current-page="pagination.pageNo"
-      v-model:page-size="pagination.pageSize"
-      class="flex-0 flex-justify-center pt10px pb10px"
-      :page-sizes="pageSizeList"
-      small
-      :disabled="isTableLoading"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="pagination.totalItemCount"
-      @size-change="getAutoStartChatRecord"
-      @current-change="getAutoStartChatRecord"
-    />
-    <ElDrawer v-model="drawVisibleModelValue">
+    <div class="flex flex-0 flex-justify-between pt10px pb10px">
+      <div class="w100px">
+        <el-button :loading="isTableLoading" size="small" @click="getAutoStartChatRecord"
+          >刷新</el-button
+        >
+      </div>
+      <ElPagination
+        v-model:current-page="pagination.pageNo"
+        v-model:page-size="pagination.pageSize"
+        :page-sizes="pageSizeList"
+        small
+        :disabled="isTableLoading"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.totalItemCount"
+        @size-change="getAutoStartChatRecord"
+        @current-change="getAutoStartChatRecord"
+      />
+      <div class="w100px" />
+    </div>
+    <ElDrawer v-model="drawVisibleModelValue" size="400px">
       <JobInfoSnapshot
         v-if="selectedJobInfoForViewSnapshot"
         :job-info="selectedJobInfoForViewSnapshot"
@@ -155,5 +159,18 @@ function handleViewJobSnapshotButtonClick(record: VChatStartupLog) {
   max-width: 1000px;
   max-height: 100vh;
   overflow: hidden;
+  padding-left: 20px;
+  padding-top: 20px;
+  :deep(.el-drawer) {
+    .el-drawer__header {
+      padding: 16px 20px;
+      margin-bottom: 0;
+    }
+    .el-drawer__body {
+      padding: 0;
+      margin: 0 0 20px 20px;
+      padding-right: 20px;
+    }
+  }
 }
 </style>