feat(table): 优化表格样式和功能

- 新增 normal-button样式，用于自定义按钮样式
- 实现表格按钮的重新渲染，增加更多自定义选项- 添加表格行悬停样式和按钮间的间距
- 优化知识详情页面的表格展示效果
- 调整预处理结果预览对话框的关闭方式

src/assets/sass/public.scss

@@ -1,419 +0,0 @@
-.el-input__suffix {
-  height: unset;
-}
-.el-collapse {
-  border: none;
-}
-
-[class*='el-col-'] {
-  min-height: 1px;
-}
-#RenderTable-container {
-  margin-bottom: 20px;
-}
-#RenderTable-container,
-.el-table {
-  .el-button--mini {
-    padding: 5px;
-    color: #409eff;
-    border-color: transparent !important;
-    background: transparent !important;
-    //padding-left: 0;
-    //padding-right: 0;
-  }
-  .el-button--danger.el-button--mini {
-    color: #f56c6c;
-  }
-  .el-button--primary.el-button--mini:focus,
-  .el-button--primary.el-button--mini:hover {
-    color: #b3d8ff;
-  }
-  .el-button--danger.el-button--mini:focus,
-  .el-button--danger.el-button--mini:hover {
-    color: #fbc4c4;
-  }
-  .el-button--primary.el-button--mini.is-disabled,
-  .el-button--primary.el-button--mini.is-disabled:active,
-  .el-button--primary.el-button--mini.is-disabled:focus,
-  .el-button--primary.el-button--mini.is-disabled:hover {
-    color: #ccc;
-  }
-  .el-button--danger.el-button--mini.is-disabled,
-  .el-button--danger.el-button--mini.is-disabled:active,
-  .el-button--danger.el-button--mini.is-disabled:focus,
-  .el-button--danger.el-button--mini.is-disabled:hover {
-    color: #ccc;
-  }
-}
-
-.el-button--medium {
-  padding: 8px 15px;
-  margin-top: 3px;
-}
-.el-button--danger {
-  //color:#F56C6C!important;
-}
-.el-upload__input {
-  display: none;
-}
-.el-dialog {
-  //.el-input{
-  //  width: 100%!important;
-  //  max-width: 100%;
-  //}
-}
-.footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background: white;
-  padding: 15px 30px;
-  z-index: 10;
-  border-top: 1px solid #f0f0f0;
-  .flex {
-    display: flex;
-    justify-content: flex-end;
-    button {
-      margin-left: 20px;
-    }
-  }
-}
-.is-fullscreen {
-  .el-dialog__header {
-    //padding: unset;
-  }
-  .el-dialog__body {
-    padding: unset;
-    width: 95vw;
-    margin: auto;
-    max-height: 100%;
-    overflow: hidden;
-  }
-}
-//.el-dialog__body {
-//  padding: 30px 15px;
-//  width: 96%;
-//  margin: auto;
-//  max-height: 55vh;
-//  overflow: auto;
-//}
-//.el-dialog__footer {
-//  text-align: right;
-//}
-//.el-dialog__header {
-//  font-weight: 600;
-//  .el-dialog__title {
-//    font-size: 20px;
-//    color: #0096fd;
-//    line-height: 28px;
-//  }
-//}
-
-.el-collapse-item__header.is-active {
-  border-bottom: 1px solid #ebeef5;
-}
-// to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  border-radius: 10px;
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-.table-container {
-  padding-top: 15px;
-}
-.container-title {
-  height: 30px;
-  //border-bottom: 2px  solid  #0096FD;
-  //margin-bottom: 20px;
-}
-.container-title .title {
-  padding: 8px 15px;
-  font-weight: 500;
-  color: #fff;
-  background: #0096fd;
-  border-radius: 0 15px 0 0;
-}
-//[class*=" el-icon-"], [class^=el-icon-]{
-//  line-height: unset;
-//}
-.lineH35 {
-  line-height: 35px;
-}
-.lineH25 {
-  line-height: 25px;
-}
-.lineH40 {
-  line-height: 40px;
-}
-.search_btn_s .el-button {
-  padding: 5px 8px;
-  margin-top: 6px;
-}
-.el-date-editor.el-input,
-.el-input,
-.el-select,
-.el-cascader {
-  width: 100%;
-  //max-width: 350px;
-}
-/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-
-/*定义滚动条轨道 内阴影+圆角*/
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-}
-
-/*定义滑块 内阴影+圆角*/
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-  background-color: #c8c8c8;
-}
-.el-tooltip__popper {
-  max-width: 500px;
-}
-body .el-collapse-item__wrap {
-  padding-top: 30px !important;
-}
-.AdditionalInsurance .cell {
-  color: #409eff;
-}
-.cellClassNo .cell {
-  color: #f56c6c;
-}
-.cellClassYes .cell {
-  color: #409eff;
-}
-.mainInsurance .cell {
-  color: #67c23a;
-}
-.el-form-item__label {
-  width: 120px;
-  display: flex !important;
-  align-items: center;
-  height: 40px;
-  justify-content: flex-end;
-  line-height: 20px;
-}
-.el-select__tags {
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  // text-overflow: ellipsis!important;
-  display: inline-block !important;
-}
-.el-loading-mask {
-  z-index: 9999;
-}
-
-.toolBox {
-  display: inline-flex;
-}
-.ellipsis {
-  display: inline;
-  /*margin: auto;*/
-  max-width: 215px;
-  height: 24px;
-  font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.el-table th {
-  background: #ecf5ff;
-}
-//.el-form-item__content {
-//  line-height: 1.7692;
-//}
-.el-table th > .cell {
-  display: block;
-}
-.el-table th.el-table__cell {
-  background: #ecf5ff;
-}
-
-.el-card {
-  border-radius: 10px;
-}
-
-.danger {
-  color: #f56c6c !important;
-  & :disabled {
-    color: rgba(0, 0, 0, 0.25);
-  }
-  & :hover {
-    color: #dd6161;
-  }
-  & :focus {
-    color: #dd6161;
-  }
-  & :active {
-    color: #dd6161;
-  }
-}
-.default {
-  color: #000 !important;
-  background: #f1f3f5 !important;
-  border-color: #f1f3f5 !important;
-  & :disabled {
-    color: rgba(0, 0, 0, 0.25);
-  }
-  & :hover {
-    color: #000;
-  }
-  & :focus {
-    color: #000;
-  }
-  & :active {
-    color: #000;
-  }
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-.view-body {
-  text-align: left;
-  font-size: 14px;
-  padding: 10px;
-
-  div {
-    outline: unset;
-  }
-
-  /* 添加一些基本的样式以美化 Markdown 内容 */
-
-  p {
-    font-size: 16px;
-    line-height: 1.6;
-    margin-bottom: 16px;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 24px;
-    margin-bottom: 12px;
-    border-bottom: 1px dashed #cecece;
-    padding: 5px;
-  }
-
-  ul,
-  ol {
-    margin: 16px 0;
-    padding-left: 32px;
-  }
-
-  li {
-    margin-bottom: 8px;
-  }
-
-  a {
-    color: #007bff;
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  code {
-    background-color: #f1f1f1;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-family: 'Courier New', Courier, monospace;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  pre {
-    background-color: #f1f1f1;
-    padding: 16px;
-    border-radius: 4px;
-    overflow-x: auto;
-    font-family: 'Courier New', Courier, monospace;
-  }
-
-  pre code {
-    background-color: transparent;
-    padding: 0;
-  }
-
-  table {
-    border: 1px solid #f9f9f9;
-    position: relative;
-    width: 100%;
-    margin: 5px;
-    border-collapse: collapse;
-    background: linear-gradient(to bottom, #ffffff, #f9f9f9);
-  }
-
-  th,
-  td {
-    border: 1px solid #ccc;
-    padding: 8px;
-    text-align: left;
-  }
-
-  th {
-    background-color: #f2f2f2;
-  }
-
-  // 添加斑马条纹效果
-  tr:nth-child(even) {
-    background-color: #f9fafc;
-  }
-}
-
-.m-view {
-  position: relative;
-  padding: 10px;
-  // 离开后还原
-  &:after {
-    content: '';
-    position: absolute;
-    width: calc(100% + 10px);
-    height: calc(100% + 10px);
-    top: -5px;
-    left: -5px;
-    background: rgba(201, 203, 255, 0.3);
-    transition: all 0.3s ease-in-out;
-    opacity: 0; // 初始状态下透明
-    border: 2px solid rgb(201, 203, 255);
-    border-radius: 5px;
-    overflow: hidden;
-  }
-
-  &:hover:after {
-    opacity: 1; // 悬停时显示
-  }
-}
-
-.editor-button {
-  position: relative;
-}
-
-.public-icon {
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.public-icon + .public-icon {
-  margin-left: 10px;
-}
-
-//去除滚动条
-.view-body::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
-}

src/assets/sass/renderSass/button.scss

@@ -23,6 +23,30 @@
     background: transparent;
     color: var(--color-primary);
   }
+  &.normal-button {
+    padding: 5px;
+    background: unset;
+    border: unset;
+    color: $--color-primary-desc-text;
+    &:hover {
+      background: $--color-primary-table-button-hover;
+      border-color: #ebeef2;
+    }
+    &:focus {
+      background: $--color-primary-table-button-hover;
+      border-color: #ebeef2;
+    }
+    &:active {
+      background: $--color-primary-table-button-hover;
+      border-color: #ebeef2;
+    }
+    &.popver-button {
+      padding: 13px 5px;
+    }
+    &.popver-button + .popver-button {
+      margin: 0;
+    }
+  }
 }
 
 .el-button--text {

src/assets/sass/renderSass/table.scss

@@ -0,0 +1,36 @@
+.el-table--small {
+  td,
+  th {
+    padding: 17px 0;
+  }
+}
+
+.el-table__header-wrapper {
+  .el-table__header {
+    th {
+      padding: 17px 0;
+    }
+  }
+}
+.el-table--enable-row-hover {
+  .el-table__body {
+    tr:hover {
+      td {
+        background-color: $--color-primary-table-hover;
+      }
+    }
+  }
+}
+
+.el-table {
+  .el-button + .el-button {
+    margin-left: 5px;
+  }
+}
+
+.table-popver {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  margin-left: 5px;
+}

src/assets/sass/renderSass/theme.scss

@@ -7,6 +7,9 @@ $--color-primary-danger-light: lighten($--color-primary-danger, 5%); //高亮颜
 $--color-primary-danger-disabled: #ff000024;
 $--color-primary-desc-text: #51525d;
 $--color-primary-desc-text-drank: #999;
+$--color-primary-table-hover: #eff0f8;
+$--color-primary-table-button-hover: #e3e5f1;
+
 :root {
   --swiper-theme-color: #0a6dff;
   --color-primary: #0a6dff;

src/assets/sass/renderUi.scss

@@ -2,6 +2,7 @@
 @import 'renderSass/button';
 @import 'renderSass/dialog';
 @import 'renderSass/input';
+@import 'renderSass/table';
 
 html,
 body,
@@ -9,8 +10,185 @@ body,
 .app-main {
   background: rgba(240, 244, 250, 1);
 }
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.danger {
+  color: #f56c6c !important;
+  & :disabled {
+    color: rgba(0, 0, 0, 0.25);
+  }
+  & :hover {
+    color: #dd6161;
+  }
+  & :focus {
+    color: #dd6161;
+  }
+  & :active {
+    color: #dd6161;
+  }
+}
+.default {
+  color: #000 !important;
+  background: #f1f3f5 !important;
+  border-color: #f1f3f5 !important;
+  & :disabled {
+    color: rgba(0, 0, 0, 0.25);
+  }
+  & :hover {
+    color: #000;
+  }
+  & :focus {
+    color: #000;
+  }
+  & :active {
+    color: #000;
+  }
+}
 
 .container {
   padding: 20px;
   //background-image: url('../images/backimage.png');
 }
+
+.view-body {
+  text-align: left;
+  font-size: 14px;
+  padding: 10px;
+
+  div {
+    outline: unset;
+  }
+
+  /* 添加一些基本的样式以美化 Markdown 内容 */
+
+  p {
+    font-size: 16px;
+    line-height: 1.6;
+    margin-bottom: 16px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 24px;
+    margin-bottom: 12px;
+    border-bottom: 1px dashed #cecece;
+    padding: 5px;
+  }
+
+  ul,
+  ol {
+    margin: 16px 0;
+    padding-left: 32px;
+  }
+
+  li {
+    margin-bottom: 8px;
+  }
+
+  a {
+    color: #007bff;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  code {
+    background-color: #f1f1f1;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  pre {
+    background-color: #f1f1f1;
+    padding: 16px;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  pre code {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  table {
+    border: 1px solid #f9f9f9;
+    position: relative;
+    width: 100%;
+    margin: 5px;
+    border-collapse: collapse;
+    background: linear-gradient(to bottom, #ffffff, #f9f9f9);
+  }
+
+  th,
+  td {
+    border: 1px solid #ccc;
+    padding: 8px;
+    text-align: left;
+  }
+
+  th {
+    background-color: #f2f2f2;
+  }
+
+  // 添加斑马条纹效果
+  tr:nth-child(even) {
+    background-color: #f9fafc;
+  }
+}
+
+.m-view {
+  position: relative;
+  padding: 10px;
+  // 离开后还原
+  &:after {
+    content: '';
+    position: absolute;
+    width: calc(100% + 10px);
+    height: calc(100% + 10px);
+    top: -5px;
+    left: -5px;
+    background: rgba(201, 203, 255, 0.3);
+    transition: all 0.3s ease-in-out;
+    opacity: 0; // 初始状态下透明
+    border: 2px solid rgb(201, 203, 255);
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  &:hover:after {
+    opacity: 1; // 悬停时显示
+  }
+}
+
+.editor-button {
+  position: relative;
+}
+
+.public-icon {
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.public-icon + .public-icon {
+  margin-left: 10px;
+}
+
+//去除滚动条
+.view-body::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}

src/components/RenderMinerU/index.vue

@@ -171,6 +171,10 @@ export default {
     }
   },
   props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
     documentId: {
       type: String,
       default: '1361351897324294144'
@@ -539,9 +543,11 @@ ${text}`
         switch (mineruStatus) {
           case 0:
           case '0':
-            setTimeout(() => {
+            if (!this.visible) {
-              this.getMinerUStatus()
+              setTimeout(() => {
-            }, 5000)
+                this.getMinerUStatus()
+              }, 5000)
+            }
             break
           case 1:
           case '1':

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

@@ -16,8 +16,64 @@ const RenderSlot = {
       row: data.props.row,
       index: data.props.index
     }
-    if (data.props.column) params.column = data.props.column
+    if (data.props.column) {
-    return data.props.render(h, params)
+      params.column = data.props.column
+    }
+    if (params.column.isRedraw) {
+      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)
+        first[0].data.class = 'normal-button'
+        first[0].data.props.type = null
+        first[0].data.props.size = null
+
+        other.forEach(item => {
+          item.data.class = 'normal-button popver-button'
+        })
+
+        const renderPopver = () => {
+          return h(
+            'el-popover',
+            {
+              props: {
+                placement: 'top-start',
+                width: '100',
+                trigger: 'click',
+                popperClass: 'table-popver'
+              },
+              class: 'table-popver',
+              scopedSlots: {
+                reference: () =>
+                  h('el-button', {
+                    props: {
+                      size: 'mini',
+                      type: 'text',
+                      icon: 'el-icon-more'
+                    },
+                    class: 'normal-button'
+                  })
+              }
+            },
+            other
+          )
+        }
+
+        content.children = [...first, renderPopver()]
+        return content
+      } else {
+        return data.props.render(h, params)
+      }
+
+      // let div =
+    } else {
+      return data.props.render(h, params)
+    }
+
+    // return data.props.render(h, params)
   }
 }
 export default {

src/components/RenderTable/index.vue

@@ -44,8 +44,8 @@
               <!--</el-form>-->
               <!--自带的btn 不能有prop 属性-->
               <div v-if="!item.selfBtn && !item.prop && !item.type && !item.render" :fixed="item.fixed ? item.fixed : fixed">
-                <el-button type="primary" size="mini" plain :disabled="disabled" @click="edit(scope.row, scope.$index)">编辑</el-button>
+                <el-button class="normal-button" :disabled="disabled" icon="el-icon-delete" @click="del(scope.row, scope.$index)"></el-button>
-                <el-button type="danger" size="mini" plain :disabled="disabled" @click="del(scope.row, scope.$index)">删除</el-button>
+                <el-button class="normal-button" icon="el-icon-edit-outline" :disabled="disabled" @click="edit(scope.row, scope.$index)"></el-button>
               </div>
               <!--如果渲染的是selfBtn-->
               <div v-if="item.selfBtn && !item.render">
@@ -193,7 +193,7 @@ export default {
     //表格边框 border
     border: {
       type: Boolean,
-      default: true
+      default: false
     },
     // 是否剧中 align
     align: {

src/views/knowledge/detail/create.vue

@@ -37,9 +37,9 @@
     </el-card>
 
     <!-- 添加预处理结果预览对话框 -->
-    <el-drawer :visible.sync="visible" size="80%" title="预处理结果预览">
+    <el-drawer :visible.sync="visible" size="80%" title="预处理结果预览" :wrapperClosable="false">
       <div style="height:calc(100% - 55px);">
-        <r-miner-u :documentId="documentId" @saveMarkDown="saveMarkDown"></r-miner-u>
+        <r-miner-u :documentId="documentId" @saveMarkDown="saveMarkDown" :visible="visible"></r-miner-u>
       </div>
     </el-drawer>
   </div>

src/views/knowledge/detail/index.vue

@@ -381,28 +381,27 @@ export default {
           key: '操作',
           prop: 'knowledgeDesc',
           width: '200px',
+          isRedraw: true,
           render: (h, params) => {
             return h('div', [
-              h(
+              h('el-button', {
-                'el-button',
+                class: 'normal-button',
-                {
+                props: {
-                  class: 'floatSpan',
+                  type: 'primary',
-                  props: {
+                  size: 'mini',
-                    type: 'primary',
+                  disabled: true,
-                    size: 'mini',
+                  icon: 'el-icon-edit'
-                    disabled: true
-                  },
-                  on: {}
                 },
-                '修改(暂不支持)'
+                on: {}
-              ),
+              }),
               h(
                 'el-button',
                 {
                   class: 'floatSpan',
                   props: {
                     type: 'danger',
-                    size: 'mini'
+                    size: 'mini',
+                    icon: 'el-icon-delete'
                   },
                   on: {
                     click: () => this.deleteKnowledge(params.row)
@@ -416,7 +415,8 @@ export default {
                   class: 'floatSpan',
                   props: {
                     type: 'primary',
-                    size: 'mini'
+                    size: 'mini',
+                    icon: 'el-icon-tickets'
                   },
                   on: {
                     click: () => this.viewDocumentDetail(params.row)