feat: 完善知识库预览功能与配置管理优化
This commit is contained in:
caoxiaozhu
@@ -5,22 +5,20 @@
|
||||
animation: fadeUp 220ms var(--ease) both;
|
||||
}
|
||||
|
||||
.knowledge-grid {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 0;
|
||||
gap: 0;
|
||||
transition: grid-template-columns 320ms var(--ease), gap 320ms var(--ease);
|
||||
}
|
||||
|
||||
.knowledge-grid.has-preview {
|
||||
grid-template-columns: minmax(560px, 1fr) minmax(420px, 0.82fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.knowledge-main,
|
||||
.preview-column {
|
||||
.knowledge-grid {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.knowledge-grid.has-preview {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.knowledge-main,
|
||||
.preview-column {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@@ -470,17 +468,11 @@ th {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.preview-column {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-panel {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
.preview-panel {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
padding: 20px 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -555,13 +547,46 @@ th {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-viewer {
|
||||
min-height: 0;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.preview-status {
|
||||
display: grid;
|
||||
.preview-viewer {
|
||||
min-height: 0;
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.preview-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 3vh 2vw;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(37, 99, 235, 0.12), transparent 32%),
|
||||
rgba(15, 23, 42, 0.56);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.preview-modal-shell {
|
||||
width: min(96vw, 1600px);
|
||||
height: min(94vh, 1180px);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.preview-modal-panel {
|
||||
height: 100%;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
|
||||
}
|
||||
|
||||
.preview-modal-panel:focus {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(96, 165, 250, 0.22),
|
||||
0 30px 90px rgba(15, 23, 42, 0.24);
|
||||
}
|
||||
|
||||
.preview-status {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 180px;
|
||||
padding: 24px;
|
||||
@@ -580,21 +605,22 @@ th {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.preview-embed-wrap,
|
||||
.preview-image-wrap {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
.preview-embed-wrap,
|
||||
.preview-image-wrap {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-embed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 560px;
|
||||
border: 0;
|
||||
}
|
||||
.preview-embed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.preview-image-wrap {
|
||||
display: grid;
|
||||
@@ -608,25 +634,38 @@ th {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.onlyoffice-preview-wrap {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.onlyoffice-preview-wrap {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.onlyoffice-preview-host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 720px;
|
||||
}
|
||||
|
||||
.preview-status-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: rgba(248, 250, 252, 0.92);
|
||||
}
|
||||
|
||||
.onlyoffice-preview-host {
|
||||
width: 100%;
|
||||
min-height: 720px;
|
||||
}
|
||||
|
||||
.excel-preview-wrap {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
.excel-preview-wrap {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.excel-sheet-tabs {
|
||||
@@ -707,13 +746,18 @@ th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.page-stage {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
.page-stage {
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
padding-right: 6px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||||
padding: 18px 18px 18px 18px;
|
||||
}
|
||||
|
||||
.page-sheet {
|
||||
display: grid;
|
||||
@@ -807,16 +851,26 @@ th {
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.preview-panel-enter-active,
|
||||
.preview-panel-leave-active {
|
||||
transition: opacity 240ms ease, transform 320ms var(--ease);
|
||||
}
|
||||
|
||||
.preview-panel-enter-from,
|
||||
.preview-panel-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(24px) scale(0.98);
|
||||
}
|
||||
.preview-modal-enter-active,
|
||||
.preview-modal-leave-active {
|
||||
transition: opacity 220ms ease;
|
||||
}
|
||||
|
||||
.preview-modal-enter-active .preview-modal-shell,
|
||||
.preview-modal-leave-active .preview-modal-shell {
|
||||
transition: transform 320ms var(--ease), opacity 220ms ease;
|
||||
}
|
||||
|
||||
.preview-modal-enter-from,
|
||||
.preview-modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.preview-modal-enter-from .preview-modal-shell,
|
||||
.preview-modal-leave-to .preview-modal-shell {
|
||||
opacity: 0;
|
||||
transform: translateY(24px) scale(0.985);
|
||||
}
|
||||
|
||||
@keyframes previewSheetIn {
|
||||
from {
|
||||
@@ -829,15 +883,9 @@ th {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.knowledge-grid.has-preview {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.knowledge-grid,
|
||||
.knowledge-grid.has-preview {
|
||||
@media (max-width: 1080px) {
|
||||
.knowledge-grid,
|
||||
.knowledge-grid.has-preview {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
overflow-y: auto;
|
||||
@@ -854,9 +902,9 @@ th {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.panel-title,
|
||||
.preview-head,
|
||||
@media (max-width: 760px) {
|
||||
.panel-title,
|
||||
.preview-head,
|
||||
.viewer-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@@ -872,9 +920,31 @@ th {
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.pager,
|
||||
.page-size-wrap,
|
||||
.page-size {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.pager,
|
||||
.page-size-wrap,
|
||||
.page-size {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.preview-modal-overlay {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.preview-modal-shell {
|
||||
width: calc(100vw - 16px);
|
||||
height: calc(100vh - 16px);
|
||||
}
|
||||
|
||||
.preview-modal-panel {
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.preview-head {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.preview-viewer {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user