hz/ebiz-ai-knowledge-manage
1
0
Fork 0
mirror of http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git synced 2025-12-09 19:06:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(knowledge): 优化知识拆分和题词功能的样式和布局

Browse Source 
- 调整了拆分和题词配置界面的样式
- 优化了弹窗对话框的布局结构
- 统一了按钮样式和间距
- 调整了表格样式和分页功能
This commit is contained in:
陈昱达
2025-04-24 17:57:10 +08:00
parent 79be862637
commit ccc289547e
11 changed files with 244 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/sass/renderSass/button.scss
View File

@@ -188,3 +188,17 @@
border-color: $--color-primary-danger-light;
}
}
.table-popver {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
margin-left: 5px;
border-radius: 5px;
padding: 5px;
//& .el-button {
// &.normal-button {
// padding: 17px 0;
// }
//}
}

3
src/assets/sass/renderSass/radio.scss
View File

@@ -2,7 +2,8 @@
border-radius: 4px;
width: 14px;
height: 14px;
&:after {
&:hover {
border-color: $--color-primary;
}
}
.el-radio__input {

21
src/assets/sass/renderSass/table.scss
View File

@@ -1,7 +1,7 @@
.el-table--small {
td,
th {
padding: 17px 0;
padding: 10px 0;
}
}
@@ -28,15 +28,6 @@
}
}
.table-popver {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
margin-left: 5px;
border-radius: 5px;
padding: 5px;
}
.el-pagination {
&.is-background {
& .el-pager {
@@ -52,6 +43,16 @@
}
}
}
& .el-pagination__sizes {
& .el-input {
& .el-input__inner {
&:hover {
border-color: $--color-primary;
}
}
}
}
}
//.el-pagination.is-background .el-pager li:not(.disabled).active {

2
src/assets/sass/renderUi.scss
View File

@@ -201,7 +201,7 @@ body,
height: calc(100vh - 20px);
background: #fff;
border-radius: 7px;
margin: 10px 10px 10px 0;
margin: 10px 10px 10px 10px;
padding: 20px;
overflow-y: auto;
&::-webkit-scrollbar {

9
src/components/RenderTable/component/bodySlot/index.vue
View File

@@ -62,7 +62,6 @@ const RenderSlot = {
let content = data.props.render(h, params)
let contentDiv = content.children
if (contentDiv.length > 2) {
console.log(content)
// 切割掉第一个div
const first = contentDiv.splice(0, 1)
const other = contentDiv.splice(0, contentDiv.length)
@@ -79,7 +78,6 @@ const RenderSlot = {
// const first = contentDiv.splice(0, contentDiv)
contentDiv = contentDiv.map(item => {
console.log(item)
item.data.class = 'normal-button'
item.data.props.type = null
item.data.props.size = null
@@ -104,7 +102,12 @@ export default {
let { item, scope } = this
return (
// <el-form-item prop={`"${item.ruleName}"`} rules={item.rules}>
<render-slot row={scope.row} render={item.render} index={scope.$index} column={item} />
<render-slot
row={scope.row}
render={item.render}
index={scope.$index}
column={item}
/>
// </el-form-item>
// </el-form>
)

92
src/views/knowledge/detail/components/split/CustomSplitDialog.vue
View File

@@ -1,23 +1,52 @@
<template>
<div v-if="visible">
<el-form :model="form" label-width="100px">
<!-- 表单内容 -->
<el-row>
<el-col :span="8">
<div class="flex align-items-s">
<div style="width: 500px">
<el-form :model="form" label-width="100px" label-position="">
<!-- 表单内容 -->
<el-form-item label="知识拆分规则">
<el-input size="small" v-model="form.ruleName" placeholder="请输入知识拆分规则" clearable></el-input>
<el-input
size="small"
v-model="form.ruleName"
placeholder="请输入知识拆分规则"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="primary" size="medium" @click="getDataList" class="ml20">查询</el-button>
<el-button type="primary" size="medium" @click="addRule" class="ml20">+ 新增规则</el-button>
</el-col>
</el-row>
<!-- 其他表单项 -->
</el-form>
<r-table :columns="columns" :data="tableData" :isSelectOnly="true" :deletion="false" @selection-change="getCheckData"></r-table>
<!-- 其他表单项 -->
</el-form>
</div>
<div class="mt5">
<el-button
type="primary"
size="medium"
@click="getDataList"
class="ml20"
>查询</el-button
>
<el-button type="primary" size="medium" @click="addRule" class="ml20"
>+ 新增规则</el-button
>
</div>
</div>
<r-table
:columns="columns"
:data="tableData"
:current-page="page"
:page-size="pageSize"
:isSelectOnly="true"
:total="total"
:deletion="false"
@size-change="pageChange"
@current-change="currentChange"
@select-row="getCheckData"
></r-table>
<!-- 添加 AddRule 组件 -->
<add-rule ref="addRule" :ruleList="tableData" @getDataList="getDataList"></add-rule>
<add-rule
ref="addRule"
:ruleList="tableData"
@getDataList="getDataList"
></add-rule>
</div>
</template>
@@ -37,30 +66,44 @@ export default {
form: {
ruleName: ''
},
page: 1,
pageSize: 10,
total: 0,
tableData: [],
addRuleVisible: false, // 控制 AddRule 组件的显示状态
ruleId: ''
}
},
methods: {
currentChange(page) {
this.page = page
this.getDataList()
},
pageChange(size) {
this.page = 1
this.pageSize = size
this.getDataList()
},
init() {
this.visible = true
this.getDataList()
},
getCheckData(value) {
console.log(value)
this.ruleId = value[0].id
getCheckData(row) {
this.ruleId = row.row.id
},
getDataList() {
console.log('getRulesPage')
// 1-文档拆分规则 2-文档题词规则
let params = {
ruleType: 1,
...this.form
...this.form,
page: this.page,
pageSize: this.pageSize
}
getRulesPage(params).then(res => {
console.log(res.content.content.list)
this.tableData = res.content.content.list
this.total = res.content.content.total
})
},
close() {
@@ -92,8 +135,7 @@ export default {
columns() {
return [
{
type: 'selection',
prop: 'knowledgeName',
type: 'radio',
width: '100',
align: 'center'
},
@@ -116,10 +158,9 @@ export default {
render: (h, params) => {
return h('span', {}, [
h('el-button', {
class: 'floatSpan',
class: 'normal-button',
props: {
type: 'primary',
size: 'medium',
title: '修改',
icon: 'el-icon-edit-outline'
},
@@ -128,10 +169,9 @@ export default {
}
}),
h('el-button', {
class: 'floatSpan',
class: 'normal-button',
props: {
type: 'primary',
size: 'medium',
title: '预览',
icon: 'el-icon-view'
},

58
src/views/knowledge/detail/components/split/Index.vue
View File

@@ -1,11 +1,14 @@
<template>
<div class="splitConfig mt20">
<p class="title">
文件拆分规则：
</p>
<ul>
<ul class="flex justify-content-b">
<!-- 自动拆分 -->
<li class="flex" :class="activeIndex === index ? 'active' : ''" v-for="(item, index) in splitOptions" :key="index" @click="handleClick(index)">
<li
class="flex"
:class="activeIndex === index ? 'active' : ''"
v-for="(item, index) in splitOptions"
:key="index"
@click="handleClick(index)"
>
<div>
<svg
v-if="index === 0"
@@ -48,14 +51,15 @@
</svg>
</div>
<div class="block">
<h3>{{ item.title }}</h3>
<p class="tips">{{ item.description }}</p>
<p v-if="item.tip" class="tips">{{ item.tip }}</p>
<div class="fs16 fw600">{{ item.title }}</div>
<div class="tips fs12 mt10">{{ item.description }}</div>
<div v-if="item.tip" class="tips fs12 mt10">{{ item.tip }}</div>
</div>
</li>
</ul>
<!-- 弹窗组件 -->
<custom-split-dialog class="active" ref="customTable"> </custom-split-dialog>
<custom-split-dialog class="active" ref="customTable">
</custom-split-dialog>
<!-- 添加预览组件 -->
<split-preview
@@ -93,14 +97,16 @@ export default {
{
icon: 'el-icon-setting',
title: '自动拆分',
description: '使用系统默认的拆分方式，适合新手或紧急任务，直接使用系统优化后的算法处理文本。',
description:
'使用系统默认的拆分方式，适合新手或紧急任务，直接使用系统优化后的算法处理文本。',
tip: '提示：首次使用时建议先用自动拆分测试效果，再决定是否调整。'
},
{
icon: 'el-icon-medal',
title: '自定义拆分',
description: '使用自定义拆分方式可以根据具体需求灵活调整文本分割逻辑，但需要权衡灵活性与复杂度，需要用户具备一定的规则定制经验。',
tip: ''
description:
'使用自定义拆分方式可以根据具体需求灵活调整文本分割逻辑。',
tip: '但需要权衡灵活性与复杂度，需要用户具备一定的规则定制经验。'
}
]
}
@@ -147,7 +153,8 @@ export default {
console.log('execSplit result:', res.content)
if (res.content.result !== '0') {
const errorMsg = '执行拆分失败: ' + (res.content.resultMessage || '未知错误')
const errorMsg =
'执行拆分失败: ' + (res.content.resultMessage || '未知错误')
this.$message.error(errorMsg)
throw new Error(errorMsg)
}
@@ -161,7 +168,8 @@ export default {
console.log('splitResultPreview result:', res.content)
if (res.content.result !== '0') {
const errorMsg = '获取拆分预览失败: ' + (res.content.resultMessage || '未知错误')
const errorMsg =
'获取拆分预览失败: ' + (res.content.resultMessage || '未知错误')
this.$message.error(errorMsg)
throw new Error(errorMsg)
}
@@ -246,6 +254,7 @@ export default {
</script>
<style scoped lang="scss">
@import '@/assets/sass/renderSass/theme.scss';
.splitConfig {
.title {
font-size: 20px;
@@ -256,13 +265,13 @@ export default {
list-style-type: none;
padding: 10px;
li {
margin-bottom: 20px;
& li {
flex: 1;
border: 1px solid #d9d9d9;
padding: 15px;
border-radius: 6px;
list-style-type: none;
width: 80%;
//width: 80%;
p {
margin: 10px 0;
@@ -280,9 +289,20 @@ export default {
color: #9e9e9e;
}
}
&.active {
border: 1px solid var(--color-primary);
//background: #fefefe;
transition: all 1s ease;
//color: #fff;
& .tips {
//color: #fff;
//transition: all 1s ease;
}
}
}
.active {
border: 1px solid #409eff;
li + li {
margin-left: 20px;
}
}
}

32
src/views/knowledge/detail/components/split/SplitPreview.vue
View File

@@ -1,16 +1,38 @@
<template>
<div class="split-preview">
<r-dialog title="拆分结果预览" :visible.sync="visible" width="60%" :before-close="handleClose">
<r-dialog
title="拆分结果预览"
:visible.sync="visible"
width="60%"
:before-close="handleClose"
>
<div v-loading="loading" class="preview-content">
<template v-if="!loading && previewData">
<el-tree class="tree" :data="previewData" :props="defaultProps" default-expand-all @node-click="handleNodeClick"></el-tree>
<el-tree
class="tree"
:data="previewData"
:props="defaultProps"
default-expand-all
@node-click="handleNodeClick"
></el-tree>
</template>
<el-empty v-else-if="!loading && !previewData" description="暂无预览数据"></el-empty>
<el-empty
v-else-if="!loading && !previewData"
description="暂无预览数据"
></el-empty>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="medium" @click="handleReUpload">重新上传</el-button>
<el-button size="medium" type="primary" @click="handleConfirm">下一步</el-button>
<el-button size="medium" type="primary" @click="emitKnowledgeDataset">直接上传至知识库</el-button>
<el-button size="medium" type="primary" @click="handleConfirm"
>下一步</el-button
>
<el-button
size="medium"
type="primary"
class="line-button"
@click="emitKnowledgeDataset"
>直接上传至知识库</el-button
>
</span>
</r-dialog>
</div>

58
src/views/knowledge/detail/components/words/CustomWords.vue
View File

@@ -1,21 +1,39 @@
<template>
<div v-if="visible">
<el-form :model="form" label-width="100px">
<!-- 表单内容 -->
<el-row>
<el-col :span="8">
<div class="flex">
<div style="width: 500px">
<el-form :model="form" label-width="100px">
<!-- 表单内容 -->
<el-form-item label="知识拆分规则">
<el-input v-model="form.ruleName" size="medium" placeholder="请输入知识拆分规则"></el-input>
<el-input
v-model="form.ruleName"
size="medium"
placeholder="请输入知识拆分规则"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="primary" size="medium" @click="getDataList" class="ml20">查询</el-button>
<el-button type="primary" size="medium" @click="addRule" class="ml20">+ 新增规则</el-button>
</el-col>
</el-row>
<!-- 其他表单项 -->
</el-form>
<r-table :columns="columns" :data="tableData" :isSelectOnly="true" :deletion="false" @selection-change="getCheckData"></r-table>
<!-- 其他表单项 -->
</el-form>
</div>
<div class="mt5">
<el-button
type="primary"
size="medium"
@click="getDataList"
class="ml20"
>查询</el-button
>
<el-button type="primary" size="medium" @click="addRule" class="ml20"
>+ 新增规则</el-button
>
</div>
</div>
<r-table
:columns="columns"
:data="tableData"
:isSelectOnly="true"
:deletion="false"
@select-row="getCheckData"
></r-table>
<!-- 添加 AddRule 组件 -->
<add-rule ref="addRule" @getDataList="getDataList"></add-rule>
</div>
@@ -53,10 +71,9 @@ export default {
this.visible = true
this.getDataList()
},
getCheckData(value) {
console.log(value)
this.selectData = value
this.ruleId = value[0].id
getCheckData(row) {
this.selectData = row.row
this.ruleId = row.row.id
},
getDataList() {
// 1-文档拆分规则 2-文档题词规则
@@ -98,8 +115,7 @@ export default {
columns() {
return [
{
type: 'selection',
prop: 'knowledgeName',
type: 'radio',
width: '100',
align: 'center'
},
@@ -125,7 +141,6 @@ export default {
class: 'floatSpan',
props: {
type: 'primary',
size: 'medium',
title: '修改',
icon: 'el-icon-edit-outline'
},
@@ -137,7 +152,6 @@ export default {
class: 'floatSpan',
props: {
type: 'primary',
size: 'medium',
title: '预览',
icon: 'el-icon-view'
},

60
src/views/knowledge/detail/components/words/Index.vue
View File

@@ -1,11 +1,14 @@
<template>
<div class="splitConfig mt20">
<p class="title">
文件题词规则：
</p>
<ul>
<ul class="flex">
<!-- 自动题词 -->
<li class="flex" :class="activeIndex === index ? 'active' : ''" v-for="(item, index) in splitOptions" :key="index" @click="handleClick(index)">
<li
class="flex"
:class="activeIndex === index ? 'active' : ''"
v-for="(item, index) in splitOptions"
:key="index"
@click="handleClick(index)"
>
<div>
<svg
v-if="index === 0"
@@ -55,7 +58,8 @@
</li>
</ul>
<!-- 弹窗组件 -->
<custom-split-dialog class="active" ref="customTable"> </custom-split-dialog>
<custom-split-dialog class="active" ref="customTable">
</custom-split-dialog>
<!-- 添加题词预览组件 -->
<extract-preview
@@ -71,7 +75,11 @@
<script>
import CustomSplitDialog from './CustomWords.vue'
import ExtractPreview from './ExtractPreview.vue'
import { execExtract, getExtractResultList, saveContentToDocument } from '@/api/generatedApi'
import {
execExtract,
getExtractResultList,
saveContentToDocument
} from '@/api/generatedApi'
export default {
name: 'splitConfig',
@@ -90,14 +98,16 @@ export default {
{
icon: 'el-icon-setting',
title: '自动题词',
description: '使用系统默认的题词方式，适合新手或紧急任务，直接使用系统预设题词规则处理文本。',
description:
'使用系统默认的题词方式，适合新手或紧急任务，直接使用系统预设题词规则处理文本。',
tip: '提示：首次使用时建议先用自动题词测试效果，再决定是否调整。'
},
{
icon: 'el-icon-medal',
title: '自定义题词',
description: '使用自定义题词方式可以根据具体需求灵活调整文本分割逻辑，但需要权衡灵活性与复杂度，需要用户具备一定的题词经验。',
tip: ''
description:
'使用自定义题词方式可以根据具体需求灵活调整文本分割逻辑。',
tip: '但需要权衡灵活性与复杂度，需要用户具备一定的题词经验。'
}
],
documentId: ''
@@ -188,7 +198,10 @@ export default {
console.log('saveContentToDocument result:', res.content)
// 使用 push 的方式返回，防止出现页面异常跳转的问题
// this.$router.go(-1)
this.$router.push({ path: '/knowledge/detail', query: { ...this.$route.query } })
this.$router.push({
path: '/knowledge/detail',
query: { ...this.$route.query }
})
},
// 主方法
@@ -222,48 +235,55 @@ export default {
</script>
<style scoped lang="scss">
@import '@/assets/sass/renderSass/theme.scss';
.splitConfig {
.title {
font-size: 20px;
margin: 10px 0;
font-weight: bold;
}
ul {
list-style-type: none;
padding: 10px;
li {
margin-bottom: 20px;
& li {
flex: 1;
border: 1px solid #d9d9d9;
padding: 15px;
border-radius: 6px;
list-style-type: none;
width: 80%;
//width: 80%;
p {
margin: 10px 0;
font-size: 14px;
color: #666;
}
.block {
margin-left: 20px;
h3 {
margin-bottom: 20px;
font-size: 16px;
color: #333;
}
.tips {
color: #9e9e9e;
}
}
&.active {
border: 1px solid var(--color-primary);
//background: #fefefe;
transition: all 1s ease;
//color: #fff;
& .tips {
//color: #fff;
//transition: all 1s ease;
}
}
}
.active {
border: 1px solid #409eff;
li + li {
margin-left: 20px;
}
}
}

4
src/views/knowledge/detail/create.vue
View File

@@ -16,13 +16,13 @@
<div class="icon-text" v-else>1</div>
</template>
</el-step>
<el-step title="拆分配置">
<el-step title="文件拆分配置">
<template slot="icon">
<div class="icon-text" v-if="active === 1">STEP2</div>
<div class="icon-text" v-else>2</div>
</template>
</el-step>
<el-step title="题词配置">
<el-step title="题词拆分配置">
<template slot="icon">
<div class="icon-text" v-if="active === 2">STEP3</div>
<div class="icon-text" v-else>3</div>