add diff.js to compare update log; enhance the style of the row which has diff; comment the mock data

packages/ui/package.json

@@ -37,6 +37,7 @@
     "@geekgeekrun/sqlite-plugin": "workspace:*",
     "@geekgeekrun/utils": "workspace:*",
     "JSONStream": "^1.3.5",
+    "diff": "^7.0.0",
     "electron-updater": "^6.1.7"
   },
   "devDependencies": {

packages/ui/src/renderer/src/components/TextDiff.vue

@@ -0,0 +1,55 @@
+<template>
+  <pre><template v-for="diff in diffResultList"
+    ><del v-if="diff.removed"
+      >{{ diff.value }}</del
+      ><ins v-else-if="diff.added">{{ diff.value }}</ins
+      ><span v-else-if="diff.chunkHeader" class="chunk-header">{{ diff.value }}</span
+      ><span v-else>{{ diff.value }}</span
+      ></template></pre>
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed } from 'vue'
+import { diffWords } from 'diff'
+const props = defineProps({
+  a: {
+    type: String,
+    default: ''
+  },
+  b: {
+    type: String,
+    default: ''
+  }
+})
+const diffResultList = computed(() => {
+  const diffs = diffWords(props.a, props.b)
+  for (let i = 0; i < diffs.length; i++) {
+    if (diffs[i].added && diffs[i + 1] && diffs[i + 1].removed) {
+      ;[diffs[i], diffs[i + 1]] = [diffs[i + 1], diffs[i]]
+    }
+  }
+  return diffs
+})
+</script>
+
+<style lang="scss" scoped>
+pre {
+  overflow: auto;
+}
+del {
+  text-decoration: line-through;
+  color: #b30000;
+  background: #fadad7;
+}
+
+ins {
+  background: #eaf2c2;
+  color: #406619;
+  text-decoration: none;
+}
+
+.chunk-header {
+  color: #8a008b;
+  text-decoration: none;
+}
+</style>

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

@@ -1,7 +1,20 @@
 <template>
   <div>
-    <el-table :data="dataForRender">
-      <el-table-column prop="title" label="" width="120px" fixed />
+    <el-form>
+      <el-row>
+        <el-col :span="6"><el-form-item label="公司">{{ jobInfo.companyName }}</el-form-item></el-col>
+        <el-col :span="6"><el-form-item label="职位名称">{{ jobInfo.jobName }}</el-form-item></el-col>
+        <el-col :span="6"><el-form-item label="职位分类">{{ jobInfo.positionName }}</el-form-item></el-col>
+        <el-col :span="6"><el-form-item label="Boss及其身份">{{ jobInfo.bossName }} {{ jobInfo.bossTitle }}</el-form-item></el-col>
+      </el-row>
+    </el-form>
+    <el-divider content-position="left">变更记录</el-divider>
+    <el-table
+      class="diff-table"
+      :data="dataForRender"
+      :row-style="getRowStyle"
+    >
+      <el-table-column prop="title" label="" width="150px" fixed />
       <el-table-column
         v-for="(item, index) in tableProps"
         :key="index"
@@ -11,13 +24,13 @@
         <template #header>
           <div class="diff-table-header">
             {{ dayjs(item.value).format('YYYY-MM-DD HH:mm:ss') }}
-            <el-radio v-model="diffPivot" :label="index">作为diff基准</el-radio>
+            <el-tooltip content="待对比条目少于2个" :disabled="tableProps.length > 1">
+              <el-radio v-model="diffPivot" :label="item.value" :disabled="tableProps.length <= 1">作为diff基准</el-radio>
+            </el-tooltip>
           </div>
         </template>
         <template #default="{ row }">
-          <div class="of-auto">
-            <pre>{{ row[item.value] }}</pre>
-          </div>
+          <TextDiff :a="row[diffPivot]?.trim() ?? ''" :b="row[item.value]?.trim() ?? ''" />
         </template>
       </el-table-column>
     </el-table>
@@ -28,8 +41,9 @@
 import { PropType, computed, ref, watch } from 'vue'
 import { type VChatStartupLog } from '@geekgeekrun/sqlite-plugin/src/entity/VChatStartupLog'
 import { JobInfoChangeLog } from '@geekgeekrun/sqlite-plugin/src/entity/JobInfoChangeLog'
-import { ElTable, ElTableColumn } from 'element-plus'
+import { ElTable, ElTableColumn, ElForm, ElFormItem, ElRow, ElCol, ElDivider } from 'element-plus'
 import dayjs from 'dayjs'
+import TextDiff from '../../components/TextDiff.vue'
 
 const props = defineProps({
   jobInfo: {
@@ -54,8 +68,8 @@ const tableProps = computed(() =>
  *  定义映射字段表(最好取全量字段)
  * */
 const mapObj = {
-  jobName: '职位名称',
-  positionName: '职位分类',
+  // jobName: '职位名称',
+  // positionName: '职位分类',
   experienceName: '工作经验',
   degreeName: '学历',
   salaryDesc: '薪资',
@@ -79,17 +93,35 @@ const dataForRender = computed(() => {
   return newArr
 })
 
-const diffPivot = ref(0)
+const diffPivot = ref('')
 watch(
-  () => props.jobInfoHistoryList,
+  [() => props.jobInfoHistoryList, () => tableProps.value],
   () => {
-    if (!props.jobInfoHistoryList.length) {
-      diffPivot.value = 0
+    if (!props.jobInfoHistoryList.length || !tableProps.value.length) {
+      diffPivot.value = ''
       return
     }
-    diffPivot.value = props.jobInfoHistoryList.length - 1
+    diffPivot.value = tableProps.value[tableProps.value.length - 1].value
+  },
+  {
+    immediate: true
   }
 )
+
+function getRowStyle ({ row }) {
+  const propsToCompare = tableProps.value.map(it => it.value)
+  for (let i = 0; i < propsToCompare.length - 1; i++) {
+    if (
+      row[propsToCompare[i]]?.trim() !==
+      row[propsToCompare[i + 1]]?.trim()
+    ) {
+      return {
+        backgroundColor: '#fffeef'
+      }
+    }
+  }
+  return {}
+}
 </script>
 
 <style lang="scss" scoped>
@@ -98,11 +130,13 @@ watch(
     color: #999;
   }
 }
-.diff-table-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.diff-table {
+  .diff-table-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>
 <style lang="scss"></style>

packages/ui/src/renderer/src/main.ts

@@ -8,4 +8,7 @@ import 'element-plus/dist/index.css'
 import 'virtual:uno.css'
 import 'animate.css'
 
-createApp(App).use(router).use(ElementPlus).mount('#app')
+createApp(App)
+  .use(router)
+  .use(ElementPlus)
+  .mount('#app')

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

@@ -103,7 +103,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { ElTable, ElTableColumn, ElButton, ElPagination, ElDrawer } from 'element-plus'
+import { ElTable, ElTableColumn, ElButton, ElPagination, ElDrawer, ElMessage } from 'element-plus'
 import { type VChatStartupLog } from '@geekgeekrun/sqlite-plugin/src/entity/VChatStartupLog'
 import { type JobInfoChangeLog } from '@geekgeekrun/sqlite-plugin/src/entity/JobInfoChangeLog'
 import { PageReq, PagedRes } from '../../../../common/types/pagination'
@@ -173,57 +173,66 @@ const historyDialogVisibleModelValue = ref(false)
 const selectedJobInfoForViewHistory = ref<VChatStartupLog | null>(null)
 const selectedJobHistory = ref<null | JobInfoChangeLog[]>(null)
 async function handleViewJobHistoryButtonClick(record: VChatStartupLog) {
-  // let { data: historyList } = await electron.ipcRenderer.invoke(
-  //   'get-job-history-by-encrypt-id',
-  //   record.encryptJobId
-  // )
+  let { data: historyList } = await electron.ipcRenderer.invoke(
+    'get-job-history-by-encrypt-id',
+    record.encryptJobId
+  )
 
-  // historyList = historyList.map((it) => ({
-  //   ...it,
-  //   ...(() => {
-  //     try {
-  //       return JSON.parse(it.dataAsJson)
-  //     } catch {
-  //       return {}
-  //     }
-  //   })(),
-  //   __ggr_updateTime: it.updateTime
-  // }))
-  const { data: historyList } = await Promise.resolve({
-    data: [
-      {
-        id: 569,
-        encryptJobId: 'f0bf76bbd1d8dcf71Hxz2du8EFFY',
-        updateTime: '2024-10-04T00:12:20.941Z',
-        dataAsJson:
-          '{"encryptId":"f0bf76bbd1d8dcf71Hxz2du8EFFY","encryptUserId":"cf615f0b2a5db54a1Xxz2N26Fls~","invalidStatus":false,"jobName":"前端工程师","position":100901,"positionName":"前端开发工程师1","location":101010100,"locationName":"北京4","experienceName":"3-5年","degreeName":"本科","jobType":0,"proxyJob":0,"proxyType":0,"salaryDesc":"12-15K","payTypeDesc":null,"postDescription":"熟练使用HTML,CSS，JAVASCRIPT;\\n熟练使用NPM或Yarn包管理工具；\\n掌握Sass，PostCss，Less，Stylus进行CSS预处理；\\n熟练使用VITE或Webpack打包工具；\\n精通使用Vue 3.0 、element-PLUS等主流前端框架，熟练使用Vue状态管理，路由配置，vue-loader预处理，组件自定义；\\n熟练使用axios网络组件，掌握使用Cookies，以及网络请求前端加解密技术；\\n熟练掌握前端组件化开发，前端开发框架搭建；\\n掌握前端缓存技术；\\n了解前端优化技巧，并且根据实际情况进行前端框架优化；\\n了解常见前端攻击方式以及预防方法；\\n熟练掌握echarts图表组件，能够对大数据量多图表页面进行性能优化；","encryptAddressId":"6914d969b01eafe21nd409S7FVFSxIm9Wfqf","address":"北京海淀区中软大厦.","longitude":116.334251,"latitude":39.958087,"staticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230428/48ba41acc9cef1bf3f3c8ba446b40b7757c453bede60b22f6bb61e3b7bce0931da574d19d1d82c88.jpg","pcStaticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230608/48ba41acc9cef1bf03ae3ae84352bc0cfa3e4b77ee71ca986bb61e3b7bce0931da574d19d1d82c88.jpg","overseasAddressList":[],"overseasInfo":null,"showSkills":["JavaScript","Vue"],"anonymous":0,"jobStatusDesc":"最新"}'
-      },
-      {
-        id: 570,
-        encryptJobId: 'f0bf76bbd1d8dcf71Hxz2du8EFFY',
-        updateTime: '2024-10-04T00:12:21.941Z',
-        dataAsJson:
-          '{"encryptId":"f0bf76bbd1d8dcf71Hxz2du8EFFY","encryptUserId":"cf615f0b2a5db54a1Xxz2N26Fls~","invalidStatus":false,"jobName":"前端工程师","position":100901,"positionName":"前端开发工程师2","location":101010100,"locationName":"北京5","experienceName":"3-5年","degreeName":"本科","jobType":0,"proxyJob":0,"proxyType":0,"salaryDesc":"12-15K","payTypeDesc":null,"postDescription":"熟练使用HTML,CSS，JAVASCRIPT;\\n熟练使用NPM或Yarn包管理工具；\\n掌握Sass，PostCss，Less，Stylus进行CSS预处理；\\n熟练使用VITE或Webpack打包工具；\\n精通使用Vue 3.0 、element-PLUS等主流前端框架，熟练使用Vue状态管理，路由配置，vue-loader预处理，组件自定义；\\n熟练使用axios网络组件，掌握使用Cookies，以及网络请求前端加解密技术；\\n熟练掌握前端组件化开发，前端开发框架搭建；\\n掌握前端缓存技术；\\n了解前端优化技巧，并且根据实际情况进行前端框架优化；\\n了解常见前端攻击方式以及预防方法；\\n熟练掌握echarts图表组件，能够对大数据量多图表页面进行性能优化；","encryptAddressId":"6914d969b01eafe21nd409S7FVFSxIm9Wfqf","address":"北京海淀区中软大厦.","longitude":116.334251,"latitude":39.958087,"staticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230428/48ba41acc9cef1bf3f3c8ba446b40b7757c453bede60b22f6bb61e3b7bce0931da574d19d1d82c88.jpg","pcStaticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230608/48ba41acc9cef1bf03ae3ae84352bc0cfa3e4b77ee71ca986bb61e3b7bce0931da574d19d1d82c88.jpg","overseasAddressList":[],"overseasInfo":null,"showSkills":["JavaScript","Vue"],"anonymous":0,"jobStatusDesc":"最新"}'
-      },
-      {
-        id: 571,
-        encryptJobId: 'f0bf76bbd1d8dcf71Hxz2du8EFFY',
-        updateTime: '2024-10-04T00:12:22.941Z',
-        dataAsJson:
-          '{"encryptId":"f0bf76bbd1d8dcf71Hxz2du8EFFY","encryptUserId":"cf615f0b2a5db54a1Xxz2N26Fls~","invalidStatus":false,"jobName":"前端工程师","position":100901,"positionName":"前端开发工程师3","location":101010100,"locationName":"北京6","experienceName":"3-5年","degreeName":"本科","jobType":0,"proxyJob":0,"proxyType":0,"salaryDesc":"12-15K","payTypeDesc":null,"postDescription":"熟练使用HTML,CSS，JAVASCRIPT;\\n熟练使用NPM或Yarn包管理工具；\\n掌握Sass，PostCss，Less，Stylus进行CSS预处理；\\n熟练使用VITE或Webpack打包工具；\\n精通使用Vue 3.0 、element-PLUS等主流前端框架，熟练使用Vue状态管理，路由配置，vue-loader预处理，组件自定义；\\n熟练使用axios网络组件，掌握使用Cookies，以及网络请求前端加解密技术；\\n熟练掌握前端组件化开发，前端开发框架搭建；\\n掌握前端缓存技术；\\n了解前端优化技巧，并且根据实际情况进行前端框架优化；\\n了解常见前端攻击方式以及预防方法；\\n熟练掌握echarts图表组件，能够对大数据量多图表页面进行性能优化；","encryptAddressId":"6914d969b01eafe21nd409S7FVFSxIm9Wfqf","address":"北京海淀区中软大厦.","longitude":116.334251,"latitude":39.958087,"staticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230428/48ba41acc9cef1bf3f3c8ba446b40b7757c453bede60b22f6bb61e3b7bce0931da574d19d1d82c88.jpg","pcStaticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230608/48ba41acc9cef1bf03ae3ae84352bc0cfa3e4b77ee71ca986bb61e3b7bce0931da574d19d1d82c88.jpg","overseasAddressList":[],"overseasInfo":null,"showSkills":["JavaScript","Vue"],"anonymous":0,"jobStatusDesc":"最新"}'
+  historyList = historyList.map((it) => ({
+    ...it,
+    ...(() => {
+      try {
+        return JSON.parse(it.dataAsJson)
+      } catch {
+        return {}
       }
-    ].map((it) => ({
-      ...it,
-      ...(() => {
-        try {
-          return JSON.parse(it.dataAsJson)
-        } catch {
-          return {}
-        }
-      })(),
-      __ggr_updateTime: it.updateTime
-    }))
-  })
+    })(),
+    __ggr_updateTime: it.updateTime
+  }))
+
+  // const { data: historyList } = await Promise.resolve({
+  //   data: [
+  //     {
+  //       id: 569,
+  //       encryptJobId: 'f0bf76bbd1d8dcf71Hxz2du8EFFY',
+  //       updateTime: '2024-10-04T00:12:20.941Z',
+  //       dataAsJson:
+  //         '{"encryptId":"f0bf76bbd1d8dcf71Hxz2du8EFFY","encryptUserId":"cf615f0b2a5db54a1Xxz2N26Fls~","invalidStatus":false,"jobName":"前端工程师","position":100901,"positionName":"前端开发工程师","location":101010100,"locationName":"工人体育场","experienceName":"1-3年","degreeName":"本科","jobType":0,"proxyJob":0,"proxyType":0,"salaryDesc":"25-40K","payTypeDesc":null,"postDescription":"熟练使用HTML,CSS，JAVASCRIPT;\\n熟练使用NPM或Yarn包管理工具；\\n掌握Sass，PostCss，Less，Stylus进行CSS预处理；\\n熟练使用VITE或Webpack打包工具；\\n精通使用Vue 3.0 、element-PLUS等主流前端框架，熟练使用Vue状态管理，路由配置，vue-loader预处理，组件自定义；\\n熟练使用axios网络组件，掌握使用Cookies，以及网络请求前端加解密技术；\\n熟练掌握前端组件化开发，前端开发框架搭建；\\n掌握前端缓存技术；\\n了解前端优化技巧，并且根据实际情况进行前端框架优化；\\n了解常见前端攻击方式以及预防方法；\\n熟练掌握echarts图表组件，能够对大数据量多图表页面进行性能优化；","encryptAddressId":"6914d969b01eafe21nd409S7FVFSxIm9Wfqf","address":"北京海淀区中软大厦.","longitude":116.334251,"latitude":39.958087,"staticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230428/48ba41acc9cef1bf3f3c8ba446b40b7757c453bede60b22f6bb61e3b7bce0931da574d19d1d82c88.jpg","pcStaticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230608/48ba41acc9cef1bf03ae3ae84352bc0cfa3e4b77ee71ca986bb61e3b7bce0931da574d19d1d82c88.jpg","overseasAddressList":[],"overseasInfo":null,"showSkills":["JavaScript","Vue"],"anonymous":0,"jobStatusDesc":"最新"}'
+  //     },
+  //     {
+  //       id: 570,
+  //       encryptJobId: 'f0bf76bbd1d8dcf71Hxz2du8EFFY',
+  //       updateTime: '2024-10-04T00:12:21.941Z',
+  //       dataAsJson:
+  //         '{"encryptId":"f0bf76bbd1d8dcf71Hxz2du8EFFY","encryptUserId":"cf615f0b2a5db54a1Xxz2N26Fls~","invalidStatus":false,"jobName":"前端工程师","position":100901,"positionName":"前端开发工程师","location":101010100,"locationName":"肖家河桥","experienceName":"3-5年","degreeName":"本科","jobType":0,"proxyJob":0,"proxyType":0,"salaryDesc":"25-40K","payTypeDesc":null,"postDescription":"熟练使用VITE或Webpack打包工具；\\n精通使用Vue 3.0 、element-PLUS等主流前端框架，熟练使用Vue状态管理，路由配置，vue-loader预处理，组件自定义；\\n熟练使用axios网络组件，掌握使用Cookies，以及网络请求前端加解密技术；\\n熟练掌握前端组件化开发，前端开发框架搭建；\\n掌握前端缓存技术；\\n了解前端优化技巧，并且根据实际情况进行前端框架优化；\\n了解常见前端攻击方式以及预防方法；\\n熟练掌握echarts图表组件，能够对大数据量多图表页面进行性能优化；","encryptAddressId":"6914d969b01eafe21nd409S7FVFSxIm9Wfqf","address":"北京海淀区中软大厦.","longitude":116.334251,"latitude":39.958087,"staticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230428/48ba41acc9cef1bf3f3c8ba446b40b7757c453bede60b22f6bb61e3b7bce0931da574d19d1d82c88.jpg","pcStaticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230608/48ba41acc9cef1bf03ae3ae84352bc0cfa3e4b77ee71ca986bb61e3b7bce0931da574d19d1d82c88.jpg","overseasAddressList":[],"overseasInfo":null,"showSkills":["JavaScript","Vue"],"anonymous":0,"jobStatusDesc":"最新"}'
+  //     },
+  //     {
+  //       id: 571,
+  //       encryptJobId: 'f0bf76bbd1d8dcf71Hxz2du8EFFY',
+  //       updateTime: '2024-10-04T00:12:22.941Z',
+  //       dataAsJson:
+  //         '{"encryptId":"f0bf76bbd1d8dcf71Hxz2du8EFFY","encryptUserId":"cf615f0b2a5db54a1Xxz2N26Fls~","invalidStatus":false,"jobName":"前端工程师","position":100901,"positionName":"前端开发工程师","location":101010100,"locationName":"惠新西街南口","experienceName":"3-5年","degreeName":"本科","jobType":0,"proxyJob":0,"proxyType":0,"salaryDesc":"20-30K","payTypeDesc":null,"postDescription":"熟练使用HTML,CSS，JAVASCRIPT;\\n熟练使用NPM或Yarn包管理工具；\\n掌握Sass，PostCss，Less，Stylus进行CSS预处理；\\n熟练使用VITE或Webpack打包工具；\\n精通使用Vue 3.0 、element-PLUS等主流前端框架，熟练使用Vue状态管理，路由配置，vue-loader预处理，组件自定义；\\n熟练使用axios网络组件，掌握使用Cookies，以及网络请求前端加解密技术；\\n熟练掌握前端组件化开发，前端开发框架搭建；\\n掌握前端缓存技术；\\n了解前端优化技巧，并且根据实际情况进行前端框架优化；\\n了解常见前端攻击方式以及预防方法；\\n熟练掌握echarts图表组件，能够对大数据量多图表页面进行性能优化；","encryptAddressId":"6914d969b01eafe21nd409S7FVFSxIm9Wfqf","address":"北京海淀区中软大厦.","longitude":116.334251,"latitude":39.958087,"staticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230428/48ba41acc9cef1bf3f3c8ba446b40b7757c453bede60b22f6bb61e3b7bce0931da574d19d1d82c88.jpg","pcStaticMapUrl":"https://img.bosszhipin.com/beijin/upload/amap_proxy/20230608/48ba41acc9cef1bf03ae3ae84352bc0cfa3e4b77ee71ca986bb61e3b7bce0931da574d19d1d82c88.jpg","overseasAddressList":[],"overseasInfo":null,"showSkills":["JavaScript","Vue"],"anonymous":0,"jobStatusDesc":"最新"}'
+  //     }
+  //   ].map((it) => ({
+  //     ...it,
+  //     ...(() => {
+  //       try {
+  //         return JSON.parse(it.dataAsJson)
+  //       } catch {
+  //         return {}
+  //       }
+  //     })(),
+  //     __ggr_updateTime: it.updateTime
+  //   }))
+  // })
+
+  if (!historyList.length) {
+    ElMessage.warning({
+      message: '未找到与此条目相关的历史变更记录，再多投一投吧'
+    })
+    return
+  }
+
   historyDialogVisibleModelValue.value = true
   selectedJobInfoForViewHistory.value = record
   selectedJobHistory.value = historyList