GithubBackup/geekgeekrun
1
0
Fork 0
mirror of https://github.com/geekgeekrun/geekgeekrun.git synced 2026-07-13 00:11:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
geekgeekrun
2024-10-10 09:34:33 +08:00
parent 52c0e53a7e
commit 8cb379f6eb
6 changed files with 230 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/ui/src/renderer/src/components/TextDiff.vue Normal file
View File

@@ -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>

72
packages/ui/src/renderer/src/features/JobInfoHistoryList/index.vue
View File

@@ -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>

5
packages/ui/src/renderer/src/main.ts
View File

@@ -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')

109
packages/ui/src/renderer/src/page/Configuration/JobLibrary.vue
View File

@@ -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