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

- 调整了拆分和题词配置界面的样式
- 优化了弹窗对话框的布局结构
- 统一了按钮样式和间距
- 调整了表格样式和分页功能

src/assets/sass/renderSass/button.scss

@@ -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;
+  //  }
+  //}
+}

src/assets/sass/renderSass/radio.scss

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

src/assets/sass/renderSass/table.scss

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

src/assets/sass/renderUi.scss

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

src/components/RenderTable/component/bodySlot/index.vue

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

src/views/knowledge/detail/components/split/CustomSplitDialog.vue

@@ -1,23 +1,52 @@
 <template>
   <div v-if="visible">
-    <el-form :model="form" label-width="100px">
+    <div class="flex align-items-s">
-      <!-- 表单内容 -->
+      <div style="width: 500px">
-      <el-row>
+        <el-form :model="form" label-width="100px" label-position="">
-        <el-col :span="8">
+          <!-- 表单内容 -->
           <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-form>
-          <el-button type="primary" size="medium" @click="getDataList" class="ml20">查询</el-button>
+      </div>
-          <el-button type="primary" size="medium" @click="addRule" class="ml20">+ 新增规则</el-button>
+      <div class="mt5">
-        </el-col>
+        <el-button
-      </el-row>
+          type="primary"
-      <!-- 其他表单项 -->
+          size="medium"
-    </el-form>
+          @click="getDataList"
-    <r-table :columns="columns" :data="tableData" :isSelectOnly="true" :deletion="false" @selection-change="getCheckData"></r-table>
+          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) {
+    getCheckData(row) {
-      console.log(value)
+      this.ruleId = row.row.id
-      this.ruleId = value[0].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',
+          type: 'radio',
-          prop: 'knowledgeName',
           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'
                 },

src/views/knowledge/detail/components/split/Index.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="splitConfig mt20">
-    <p class="title">
+    <ul class="flex  justify-content-b">
-      文件拆分规则：
-    </p>
-    <ul>
       <!-- 自动拆分 -->
-      <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>
+          <div class="fs16 fw600">{{ item.title }}</div>
-          <p class="tips">{{ item.description }}</p>
+          <div class="tips fs12 mt10">{{ item.description }}</div>
-          <p v-if="item.tip" class="tips">{{ item.tip }}</p>
+          <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: '使用自定义拆分方式可以根据具体需求灵活调整文本分割逻辑，但需要权衡灵活性与复杂度，需要用户具备一定的规则定制经验。',
+          description:
-          tip: ''
+            '使用自定义拆分方式可以根据具体需求灵活调整文本分割逻辑。',
+          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 {
+    & li {
-      margin-bottom: 20px;
+      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;
     }
   }
 }

src/views/knowledge/detail/components/split/SplitPreview.vue

@@ -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="handleConfirm"
-        <el-button size="medium" type="primary" @click="emitKnowledgeDataset">直接上传至知识库</el-button>
+          >下一步</el-button
+        >
+        <el-button
+          size="medium"
+          type="primary"
+          class="line-button"
+          @click="emitKnowledgeDataset"
+          >直接上传至知识库</el-button
+        >
       </span>
     </r-dialog>
   </div>

src/views/knowledge/detail/components/words/CustomWords.vue

@@ -1,21 +1,39 @@
 <template>
   <div v-if="visible">
-    <el-form :model="form" label-width="100px">
+    <div class="flex">
-      <!-- 表单内容 -->
+      <div style="width: 500px">
-      <el-row>
+        <el-form :model="form" label-width="100px">
-        <el-col :span="8">
+          <!-- 表单内容 -->
           <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-form>
-          <el-button type="primary" size="medium" @click="getDataList" class="ml20">查询</el-button>
+      </div>
-          <el-button type="primary" size="medium" @click="addRule" class="ml20">+ 新增规则</el-button>
+      <div class="mt5">
-        </el-col>
+        <el-button
-      </el-row>
+          type="primary"
-      <!-- 其他表单项 -->
+          size="medium"
-    </el-form>
+          @click="getDataList"
-    <r-table :columns="columns" :data="tableData" :isSelectOnly="true" :deletion="false" @selection-change="getCheckData"></r-table>
+          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) {
+    getCheckData(row) {
-      console.log(value)
+      this.selectData = row.row
-      this.selectData = value
+      this.ruleId = row.row.id
-      this.ruleId = value[0].id
     },
     getDataList() {
       // 1-文档拆分规则  2-文档题词规则
@@ -98,8 +115,7 @@ export default {
     columns() {
       return [
         {
-          type: 'selection',
+          type: 'radio',
-          prop: 'knowledgeName',
           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'
                 },

src/views/knowledge/detail/components/words/Index.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="splitConfig mt20">
-    <p class="title">
+    <ul class="flex">
-      文件题词规则：
-    </p>
-    <ul>
       <!-- 自动题词 -->
-      <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: '使用自定义题词方式可以根据具体需求灵活调整文本分割逻辑，但需要权衡灵活性与复杂度，需要用户具备一定的题词经验。',
+          description:
-          tip: ''
+            '使用自定义题词方式可以根据具体需求灵活调整文本分割逻辑。',
+          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 {
+    & li {
-      margin-bottom: 20px;
+      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 {
+    li + li {
-      border: 1px solid #409eff;
+      margin-left: 20px;
     }
   }
 }

src/views/knowledge/detail/create.vue

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