|
@@ -599,10 +599,102 @@
|
|
|
<div class="preview-header">
|
|
|
<span>文档预览</span>
|
|
|
</div>
|
|
|
- <DocumentPreview
|
|
|
- :documents="attachedFiles"
|
|
|
- @select="handleDocumentSelect"
|
|
|
- />
|
|
|
+ <div class="document-preview">
|
|
|
+ <div class="preview-container">
|
|
|
+ <!-- 文档列表 -->
|
|
|
+ <!-- <div class="document-list">
|
|
|
+ <div v-if="attachedFiles.length === 0" class="empty-state">
|
|
|
+ <FileOutlined class="empty-icon" />
|
|
|
+ <p>暂无文档</p>
|
|
|
+ </div>
|
|
|
+ <div v-else v-for="doc in attachedFiles" :key="doc.name" class="document-item"
|
|
|
+ :class="{ 'active': currentDoc?.name === doc.name }"
|
|
|
+ @click="handleDocClick(doc)">
|
|
|
+ <div class="document-info">
|
|
|
+ <div class="doc-icon">
|
|
|
+ <img
|
|
|
+ v-if="isImageFile(doc)"
|
|
|
+ :src="doc.url"
|
|
|
+ class="preview-thumbnail"
|
|
|
+ alt="preview"
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ v-else-if="isVideoFile(doc)"
|
|
|
+ :src="doc.url"
|
|
|
+ class="preview-thumbnail"
|
|
|
+ preload="metadata"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ :src="getFileIcon(doc)"
|
|
|
+ alt="file"
|
|
|
+ class="file-icon"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="name" :title="doc.name">{{ doc.name }}</div>
|
|
|
+ <div class="size">{{ doc.sizeFormatted || formatFileSize(doc.size) }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="actions">
|
|
|
+ <button class="action-btn" @click.stop="handleDownload(doc)" title="下载">
|
|
|
+ <DownloadOutlined />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- 直接预览区域 -->
|
|
|
+ <div v-if="currentDoc" class="direct-preview">
|
|
|
+ <div class="preview-header">
|
|
|
+ <span>{{ currentDoc.name }}</span>
|
|
|
+ <button class="close-btn" @click="closePreview">
|
|
|
+ <CloseOutlined />
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="preview-body">
|
|
|
+ <!-- 图片预览 -->
|
|
|
+ <img
|
|
|
+ v-if="isImageFile(currentDoc)"
|
|
|
+ :src="currentDoc.url"
|
|
|
+ class="preview-image"
|
|
|
+ alt="preview"
|
|
|
+ />
|
|
|
+ <!-- 视频预览 -->
|
|
|
+ <video
|
|
|
+ v-else-if="isVideoFile(currentDoc)"
|
|
|
+ :src="currentDoc.url"
|
|
|
+ controls
|
|
|
+ class="preview-video"
|
|
|
+ />
|
|
|
+ <!-- Word文档预览 -->
|
|
|
+ <div v-else-if="isWordFile(currentDoc)">
|
|
|
+ <vue-office-docx
|
|
|
+ :src="currentDoc.url"
|
|
|
+ class="doc-preview"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- Excel文档预览 -->
|
|
|
+ <div v-else-if="isExcelFile(currentDoc)">
|
|
|
+ <vue-office-excel
|
|
|
+ :options="excelOptions"
|
|
|
+ @rendered="handleRendered"
|
|
|
+ @error="handleExcelError"
|
|
|
+ :src="currentDoc.url"
|
|
|
+ class="doc-preview"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- PDF预览-->
|
|
|
+ <iframe v-else-if="isPdfFile(currentDoc)" :src="currentDoc.url" style="width: 100%; height: 100%;" frameborder="0"></iframe>
|
|
|
+ <!-- 其他文件预览 -->
|
|
|
+ <div v-else class="file-preview">
|
|
|
+ <FileOutlined class="large-icon" />
|
|
|
+ <p>该文件类型暂不支持预览</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 添加知识库结果面板 -->
|
|
@@ -645,6 +737,7 @@ import {
|
|
|
DatabaseOutlined,
|
|
|
FolderOutlined,
|
|
|
SelectOutlined,
|
|
|
+ DownloadOutlined,
|
|
|
} from "@ant-design/icons-vue";
|
|
|
import leftIcon from "../assets/svg/left.svg";
|
|
|
import rightIcon from "../assets/svg/right.svg";
|
|
@@ -672,7 +765,8 @@ import KnowledgeResults from "../components/KnowledgeResults/index.vue";
|
|
|
import ChangePasswordDialog from '../components/ChangePasswordDialog.vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import { message } from 'ant-design-vue';
|
|
|
-
|
|
|
+import VueOfficeDocx from '@vue-office/docx';
|
|
|
+import VueOfficeExcel from '@vue-office/excel'
|
|
|
// 初始化 markdown-it
|
|
|
const md = new MarkdownIt({
|
|
|
html: true,
|
|
@@ -1020,9 +1114,14 @@ const handleFileUpload = async (event) => {
|
|
|
|
|
|
// 修改文件上传后的处理逻辑
|
|
|
if (attachedFiles.value.length > 0) {
|
|
|
- // 仅切换到预览标签页,不自动展开右侧菜单
|
|
|
+ // 切换到预览标签页
|
|
|
activeTab.value = 'preview';
|
|
|
- /* expandRightMenu(); */
|
|
|
+ // 展开右侧菜单
|
|
|
+ isRightMenuCollapsed.value = false;
|
|
|
+ // 如果在移动端,调整布局
|
|
|
+ if (document.querySelector('.chat')) {
|
|
|
+ document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1382,9 +1481,14 @@ const handleFileDrop = async (event) => {
|
|
|
|
|
|
// 修改文件上传后的处理逻辑
|
|
|
if (attachedFiles.value.length > 0) {
|
|
|
- // 仅切换到预览标签页,不自动展开右侧菜单
|
|
|
+ // 切换到预览标签页
|
|
|
activeTab.value = 'preview';
|
|
|
- /* expandRightMenu(); */
|
|
|
+ // 展开右侧菜单
|
|
|
+ isRightMenuCollapsed.value = false;
|
|
|
+ // 如果在移动端,调整布局
|
|
|
+ if (document.querySelector('.chat')) {
|
|
|
+ document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1980,6 +2084,90 @@ const updateCollapsedState = () => {
|
|
|
// ... existing return values ...
|
|
|
}; */
|
|
|
|
|
|
+ const excelOptions = ref({
|
|
|
+ xls: false, // 预览xlsx文件设为false;预览xls文件设为true
|
|
|
+ minColLength: 15, // excel最少渲染列数
|
|
|
+ minRowLength: 50, // excel最少渲染行数,增加以确保显示更多内容
|
|
|
+ widthOffset: 50, // 增加列宽偏移量,使内容显示更完整
|
|
|
+ heightOffset: 30, // 增加行高偏移量
|
|
|
+ forceRender: true, // 强制渲染
|
|
|
+ maxSheetLength: 10, // 最多渲染工作表数量
|
|
|
+ showGridLines: true, // 显示网格线
|
|
|
+ defaultFontSize: 12, // 默认字体大小
|
|
|
+ defaultRowHeight: 24, // 默认行高
|
|
|
+ autoFitColumn: true, // 自动适应列宽
|
|
|
+ overflowColumns: true, // 允许列内容溢出
|
|
|
+ showToolbar: true, // 显示工具栏
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加Excel渲染完成的处理函数
|
|
|
+ const handleRendered = () => {
|
|
|
+ console.log('Excel文件渲染完成');
|
|
|
+ nextTick(() => {
|
|
|
+ // 手动触发一次重新计算大小
|
|
|
+ window.dispatchEvent(new Event('resize'));
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加Excel错误处理函数的详细信息
|
|
|
+ const handleExcelError = (error) => {
|
|
|
+ console.error('Excel文件渲染失败:', error);
|
|
|
+ message.error('Excel预览失败:' + (error.message || '请尝试下载后查看'));
|
|
|
+ };
|
|
|
+
|
|
|
+ const isWordFile = (file) => {
|
|
|
+ if (!file) return false;
|
|
|
+ const wordTypes = ['doc', 'docx'];
|
|
|
+ const ext = file.name?.split('.')?.pop()?.toLowerCase() || '';
|
|
|
+ return wordTypes.includes(ext);
|
|
|
+ };
|
|
|
+
|
|
|
+ const isExcelFile = (file) => {
|
|
|
+ if (!file) return false;
|
|
|
+ const excelTypes = ['xls', 'xlsx'];
|
|
|
+ const ext = file.name?.split('.')?.pop()?.toLowerCase() || '';
|
|
|
+ return excelTypes.includes(ext);
|
|
|
+ };
|
|
|
+
|
|
|
+ const isPdfFile = (file) => {
|
|
|
+ if (!file) return false;
|
|
|
+ return file.name?.toLowerCase()?.endsWith('.pdf') || false;
|
|
|
+ };
|
|
|
+
|
|
|
+ const currentDoc = ref(null);
|
|
|
+
|
|
|
+ // 监听文档列表变化
|
|
|
+ watch(() => attachedFiles.value, (newFiles) => {
|
|
|
+ if (newFiles && newFiles.length > 0) {
|
|
|
+ currentDoc.value = newFiles[newFiles.length - 1]; // 预览最新上传的文档
|
|
|
+ } else {
|
|
|
+ currentDoc.value = null;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ });
|
|
|
+
|
|
|
+ const handleDownload = (doc) => {
|
|
|
+ if (doc.url) {
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = doc.url;
|
|
|
+ link.download = doc.name;
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const closePreview = () => {
|
|
|
+ currentDoc.value = null;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加文档点击事件处理
|
|
|
+ const handleDocClick = (doc) => {
|
|
|
+ currentDoc.value = doc;
|
|
|
+ };
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@@ -2329,6 +2517,7 @@ const updateCollapsedState = () => {
|
|
|
border: 1px solid var(--border-color);
|
|
|
border-radius: 8px;
|
|
|
background: var(--primary-bg);
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.message-input {
|
|
@@ -2338,6 +2527,7 @@ const updateCollapsedState = () => {
|
|
|
padding: 8px;
|
|
|
font-size: 14px;
|
|
|
background: transparent;
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.message-input::placeholder {
|
|
@@ -2361,18 +2551,18 @@ const updateCollapsedState = () => {
|
|
|
.attachment-btn:hover,
|
|
|
.send-btn:hover {
|
|
|
background: rgba(0, 0, 0, 0.04);
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.attachments-panel {
|
|
|
- background: white;
|
|
|
+ background: var(--primary-bg);
|
|
|
border-radius: 12px;
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.panel-content {
|
|
|
- background: white;
|
|
|
+ background: var(--primary-bg);
|
|
|
}
|
|
|
|
|
|
.attachments-header {
|
|
@@ -2386,7 +2576,7 @@ const updateCollapsedState = () => {
|
|
|
.attachments-header span {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.close-btn {
|
|
@@ -2405,12 +2595,13 @@ const updateCollapsedState = () => {
|
|
|
border-radius: 8px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
+ color: var(--primary-text);
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
.upload-area.has-files {
|
|
|
padding: 12px;
|
|
|
- background: #fff;
|
|
|
+ background: var(--primary-bg);
|
|
|
}
|
|
|
|
|
|
.upload-icon {
|
|
@@ -2421,13 +2612,13 @@ const updateCollapsedState = () => {
|
|
|
|
|
|
.upload-text {
|
|
|
font-size: 14px;
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
+ color: var(--primary-text);
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
.upload-hint {
|
|
|
font-size: 12px;
|
|
|
- color: rgba(0, 0, 0, 0.45);
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.file-list {
|
|
@@ -2442,7 +2633,7 @@ const updateCollapsedState = () => {
|
|
|
width: 260px;
|
|
|
padding: 8px 12px;
|
|
|
margin: 4px 0;
|
|
|
- background: #f5f5f5;
|
|
|
+ background: var(--secondary-bg);
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
@@ -2500,7 +2691,7 @@ const updateCollapsedState = () => {
|
|
|
.file-name {
|
|
|
display: block;
|
|
|
max-width: 150px;
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
+ color: var(--primary-text);
|
|
|
font-size: 14px;
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
@@ -2509,6 +2700,7 @@ const updateCollapsedState = () => {
|
|
|
|
|
|
.file-info .file-name {
|
|
|
max-width: 150px;
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.file-name:hover {
|
|
@@ -2517,7 +2709,7 @@ const updateCollapsedState = () => {
|
|
|
|
|
|
.file-size {
|
|
|
display: block;
|
|
|
- color: rgba(0, 0, 0, 0.45);
|
|
|
+ color: var(--primary-text);
|
|
|
font-size: 12px;
|
|
|
margin-top: 4px;
|
|
|
}
|
|
@@ -2697,7 +2889,7 @@ const updateCollapsedState = () => {
|
|
|
}
|
|
|
|
|
|
.file-item:hover {
|
|
|
- background: #f5f5f5;
|
|
|
+ background: var(--secondary-bg);
|
|
|
}
|
|
|
|
|
|
.remove-btn {
|
|
@@ -2706,11 +2898,11 @@ const updateCollapsedState = () => {
|
|
|
border: none;
|
|
|
background: transparent;
|
|
|
cursor: pointer;
|
|
|
- color: rgba(0, 0, 0, 0.45);
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.remove-btn:hover {
|
|
|
- color: rgba(0, 0, 0, 0.88);
|
|
|
+ color: var(--primary-text);
|
|
|
}
|
|
|
|
|
|
.send-btn:disabled {
|
|
@@ -2739,7 +2931,8 @@ const updateCollapsedState = () => {
|
|
|
height: 68px;
|
|
|
padding: 0;
|
|
|
margin: 4px 0;
|
|
|
- background: #f5f5f5;
|
|
|
+ background: var(--secondary-bg);
|
|
|
+ color: var(--primary-text);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
|
|
@@ -4603,4 +4796,278 @@ button,
|
|
|
:root.dark-theme {
|
|
|
--icon-filter: brightness(0) invert(1);
|
|
|
}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+// ... existing code ...
|
|
|
+
|
|
|
+/* 文档预览样式 */
|
|
|
+.document-preview {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ gap: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.document-list {
|
|
|
+ width: 300px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 16px;
|
|
|
+ border-right: 1px solid var(--border-color);
|
|
|
+}
|
|
|
+
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 48px 0;
|
|
|
+ color: var(--primary-text);
|
|
|
+
|
|
|
+ .empty-icon {
|
|
|
+ font-size: 48px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.document-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background: var(--secondary-bg);
|
|
|
+ transition: all 0.3s;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--hover-bg);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: var(--primary-bg);
|
|
|
+ border: 1px solid var(--primary-color);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.document-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.doc-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-thumbnail {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+/* .file-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+} */
|
|
|
+
|
|
|
+.info {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--primary-text);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .size {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--secondary-text);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--primary-text);
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.04);
|
|
|
+ color: var(--primary-color);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.direct-preview {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ background: var(--secondary-bg);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-header {
|
|
|
+ padding: 16px;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--primary-text);
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--primary-text);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.04);
|
|
|
+ color: var(--primary-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.preview-body {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-image {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 70vh;
|
|
|
+ object-fit: contain;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-video {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 70vh;
|
|
|
+}
|
|
|
+
|
|
|
+.doc-preview {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.docx-wrapper) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .docx{
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.excel-wrapper) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .excel-container {
|
|
|
+ min-width: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .excel-toolbar {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ background: #fff;
|
|
|
+ padding: 8px;
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ }
|
|
|
+
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+
|
|
|
+ th, td {
|
|
|
+ padding: 8px;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.file-preview {
|
|
|
+ text-align: center;
|
|
|
+ color: var(--primary-text);
|
|
|
+
|
|
|
+ .large-icon {
|
|
|
+ font-size: 64px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 响应式布局
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .preview-container {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-list {
|
|
|
+ width: 100%;
|
|
|
+ border-right: none;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// ... existing code ...
|
|
|
</style>
|