From 22c13505b7f1aee00c8a4c68a5f28e13373ed689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= Date: Wed, 23 Apr 2025 15:51:45 +0800 Subject: [PATCH] =?UTF-8?q?feat(table):=20=E4=BC=98=E5=8C=96=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增 normal-button样式，用于自定义按钮样式 - 实现表格按钮的重新渲染，增加更多自定义选项- 添加表格行悬停样式和按钮间的间距 - 优化知识详情页面的表格展示效果 - 调整预处理结果预览对话框的关闭方式 --- src/assets/sass/public.scss | 419 ------------------ src/assets/sass/renderSass/button.scss | 24 + src/assets/sass/renderSass/table.scss | 36 ++ src/assets/sass/renderSass/theme.scss | 3 + src/assets/sass/renderUi.scss | 178 ++++++++ src/components/RenderMinerU/index.vue | 12 +- .../RenderTable/component/bodySlot/index.vue | 60 ++- src/components/RenderTable/index.vue | 6 +- src/views/knowledge/detail/create.vue | 4 +- src/views/knowledge/detail/index.vue | 28 +- 10 files changed, 327 insertions(+), 443 deletions(-) create mode 100644 src/assets/sass/renderSass/table.scss diff --git a/src/assets/sass/public.scss b/src/assets/sass/public.scss index 99347e8..e69de29 100644 --- a/src/assets/sass/public.scss +++ b/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; -} diff --git a/src/assets/sass/renderSass/button.scss b/src/assets/sass/renderSass/button.scss index 529ac50..40665eb 100644 --- a/src/assets/sass/renderSass/button.scss +++ b/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 { diff --git a/src/assets/sass/renderSass/table.scss b/src/assets/sass/renderSass/table.scss new file mode 100644 index 0000000..b9403b2 --- /dev/null +++ b/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; +} diff --git a/src/assets/sass/renderSass/theme.scss b/src/assets/sass/renderSass/theme.scss index 740b714..741a05f 100644 --- a/src/assets/sass/renderSass/theme.scss +++ b/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; diff --git a/src/assets/sass/renderUi.scss b/src/assets/sass/renderUi.scss index bc44fcd..851547d 100644 --- a/src/assets/sass/renderUi.scss +++ b/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; +} diff --git a/src/components/RenderMinerU/index.vue b/src/components/RenderMinerU/index.vue index f2678d8..29a595c 100644 --- a/src/components/RenderMinerU/index.vue +++ b/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(() => { - this.getMinerUStatus() - }, 5000) + if (!this.visible) { + setTimeout(() => { + this.getMinerUStatus() + }, 5000) + } break case 1: case '1': diff --git a/src/components/RenderTable/component/bodySlot/index.vue b/src/components/RenderTable/component/bodySlot/index.vue index 717f2b6..cbb0a89 100644 --- a/src/components/RenderTable/component/bodySlot/index.vue +++ b/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 - return data.props.render(h, params) + if (data.props.column) { + 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 { diff --git a/src/components/RenderTable/index.vue b/src/components/RenderTable/index.vue index 6cf1770..86ba9a2 100644 --- a/src/components/RenderTable/index.vue +++ b/src/components/RenderTable/index.vue @@ -44,8 +44,8 @@
- 编辑 - 删除 + +
@@ -193,7 +193,7 @@ export default { //表格边框 border border: { type: Boolean, - default: true + default: false }, // 是否剧中 align align: { diff --git a/src/views/knowledge/detail/create.vue b/src/views/knowledge/detail/create.vue index 6c771fb..be0824b 100644 --- a/src/views/knowledge/detail/create.vue +++ b/src/views/knowledge/detail/create.vue @@ -37,9 +37,9 @@ - +
- +
diff --git a/src/views/knowledge/detail/index.vue b/src/views/knowledge/detail/index.vue index e65263f..7b2e13a 100644 --- a/src/views/knowledge/detail/index.vue +++ b/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( - 'el-button', - { - class: 'floatSpan', - props: { - type: 'primary', - size: 'mini', - disabled: true - }, - on: {} + h('el-button', { + class: 'normal-button', + props: { + type: 'primary', + size: 'mini', + disabled: true, + icon: 'el-icon-edit' }, - '修改(暂不支持)' - ), + 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)