智能商务模块适配主题切换
This commit is contained in:
chabai
parent
f1da2f0077
commit
3fb4cc0950
|
|
@ -4,10 +4,9 @@
|
|||
<a-layout-sider
|
||||
width="260"
|
||||
:collapsed-width="80"
|
||||
theme="light"
|
||||
theme="dark"
|
||||
class="folder-sidebar"
|
||||
:collapsed="sidebarCollapsed"
|
||||
collapsible
|
||||
@collapse="handleSidebarCollapse"
|
||||
@expand="handleSidebarExpand"
|
||||
>
|
||||
|
|
@ -102,29 +101,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏底部分页控件 -->
|
||||
<div class="sidebar-footer" v-if="!sidebarCollapsed && folderList.length > 0">
|
||||
<div class="pagination-info">
|
||||
<a-typography-text type="secondary" size="small">
|
||||
共 {{ totalFolders }} 个文件夹
|
||||
</a-typography-text>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏分页控件，因为现在获取所有文件夹 -->
|
||||
<!-- <div class="pagination-controls">
|
||||
<a-pagination
|
||||
:current="currentPage"
|
||||
:page-size="pageSize"
|
||||
:total="totalFolders"
|
||||
:show-size-changer="true"
|
||||
:page-size-options="['10', '20', '50', '100']"
|
||||
@change="handlePageChange"
|
||||
@showSizeChange="handlePageSizeChange"
|
||||
size="small"
|
||||
show-total
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
|
||||
<a-layout>
|
||||
|
|
@ -305,7 +282,7 @@
|
|||
|
||||
<!-- 大小列 -->
|
||||
<a-col :span="3" class="table-column size-column">
|
||||
<div class="cell-content">{{ formatFileSize(file.fileSize || file.size) }}</div>
|
||||
<div class="cell-content">{{ formatFileListSize(file.fileSize || file.size) }}</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 时间列 -->
|
||||
|
|
@ -682,7 +659,7 @@ const fileListTemp = ref([]);
|
|||
const folderFormRef = ref(null);
|
||||
const uploadFormRef = ref(null);
|
||||
const uploadRef = ref(null);
|
||||
const folderColor = '#165DFF';
|
||||
const folderColor = 'var(--color-primary)';
|
||||
const refreshing = ref(false);
|
||||
const folderSubmitting = ref(false);
|
||||
const uploading = ref(false);
|
||||
|
|
@ -1624,7 +1601,7 @@ const fileColor = (extension) => {
|
|||
bmp: '#722ed1',
|
||||
webp: '#13c2c2'
|
||||
};
|
||||
return colorMap[extension.toLowerCase()] || '#8c8c8c';
|
||||
return colorMap[extension.toLowerCase()] || 'var(--color-text-3)';
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -1881,8 +1858,8 @@ const showTextPreview = async (blob, fileName) => {
|
|||
maxWidth: '100%',
|
||||
maxHeight: '70vh',
|
||||
overflow: 'auto',
|
||||
backgroundColor: '#f8f9fa',
|
||||
border: '1px solid #e9ecef',
|
||||
backgroundColor: 'var(--color-fill-1)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '8px',
|
||||
padding: '20px',
|
||||
fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
|
||||
|
|
@ -1890,7 +1867,7 @@ const showTextPreview = async (blob, fileName) => {
|
|||
lineHeight: '1.6',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordBreak: 'break-word',
|
||||
color: '#333',
|
||||
color: 'var(--color-text-1)',
|
||||
textAlign: 'left'
|
||||
}
|
||||
}, text)
|
||||
|
|
@ -2336,6 +2313,21 @@ const formatFileSize = (fileSize) => {
|
|||
return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
|
||||
};
|
||||
|
||||
// 专门用于文件列表的格式化函数（假设后端返回的是KB单位）
|
||||
const formatFileListSize = (fileSize) => {
|
||||
const size = Number(fileSize);
|
||||
if (isNaN(size) || size < 0) return '未知';
|
||||
|
||||
// 假设后端返回的是KB单位
|
||||
if (size < 1024) {
|
||||
return `${size} KB`;
|
||||
} else if (size < 1024 * 1024) {
|
||||
return `${(size / 1024).toFixed(1)} MB`;
|
||||
} else {
|
||||
return `${(size / (1024 * 1024)).toFixed(1)} GB`;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const fileTypeText = (type) => {
|
||||
|
|
@ -2458,7 +2450,7 @@ onMounted(() => {
|
|||
<style scoped>
|
||||
.knowledge-container {
|
||||
height: 100vh;
|
||||
background-color: var(--color-bg-2);
|
||||
background-color: var(--color-bg-1);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -2470,13 +2462,15 @@ onMounted(() => {
|
|||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
|
||||
background: var(--color-bg-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
background: var(--color-bg-1);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
|
|
@ -2492,12 +2486,18 @@ onMounted(() => {
|
|||
|
||||
.folder-content {
|
||||
padding: 16px 0;
|
||||
height: calc(100vh - 320px); /* 为底部分页控件留出更多空间，因为文件夹项现在更高 */
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
background: var(--color-bg-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.folder-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
|
@ -2537,7 +2537,7 @@ onMounted(() => {
|
|||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
||||
background: linear-gradient(135deg, var(--color-fill-2) 0%, var(--color-fill-3) 100%);
|
||||
border-color: var(--color-primary-light-2);
|
||||
transform: translateX(2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
|
@ -2606,7 +2606,7 @@ onMounted(() => {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
background: var(--color-bg-2);
|
||||
background: var(--color-bg-1);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
height: 64px;
|
||||
}
|
||||
|
|
@ -2623,10 +2623,12 @@ onMounted(() => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
background: var(--color-bg-2);
|
||||
background: var(--color-bg-1);
|
||||
min-height: 0;
|
||||
max-height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.file-card {
|
||||
|
|
@ -2637,6 +2639,7 @@ onMounted(() => {
|
|||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
|
|
@ -2649,7 +2652,9 @@ onMounted(() => {
|
|||
overflow-y: auto;
|
||||
background-color: var(--color-bg-1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
padding-bottom: 80px; /* 为分页留出空间 */
|
||||
margin-bottom: 0;
|
||||
min-height: 300px;
|
||||
max-height: calc(100vh - 300px);
|
||||
}
|
||||
|
||||
/* 表头行样式 */
|
||||
|
|
@ -2729,8 +2734,8 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.folder-icon {
|
||||
color: #165DFF;
|
||||
background-color: #E8F3FF;
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary-light-1);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
|
|
@ -2744,7 +2749,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.table-data-row:hover .file-name {
|
||||
color: #165DFF;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.type-column, .size-column, .time-column {
|
||||
|
|
@ -2789,7 +2794,7 @@ onMounted(() => {
|
|||
white-space: nowrap;
|
||||
|
||||
.table-data-row:hover & {
|
||||
color: #165DFF;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2922,6 +2927,35 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
/* 浏览器缩放调整 */
|
||||
@media (max-height: 800px) {
|
||||
.folder-content {
|
||||
max-height: calc(100vh - 180px);
|
||||
}
|
||||
|
||||
.file-content {
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.file-grid-container {
|
||||
max-height: calc(100vh - 280px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px) {
|
||||
.folder-content {
|
||||
max-height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
.file-content {
|
||||
max-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
.file-grid-container {
|
||||
max-height: calc(100vh - 260px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.initial-state, .empty-state {
|
||||
display: flex;
|
||||
|
|
@ -2930,7 +2964,7 @@ onMounted(() => {
|
|||
justify-content: center;
|
||||
padding: 64px 0;
|
||||
color: var(--color-text-3);
|
||||
background-color: #fafafa;
|
||||
background-color: var(--color-fill-1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -2944,7 +2978,7 @@ onMounted(() => {
|
|||
:deep(.empty-state .arco-btn) {
|
||||
margin-top: 16px;
|
||||
padding: 8px 16px;
|
||||
background-color: #165DFF;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
|
|
@ -2954,7 +2988,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
:deep(.empty-state .arco-btn:hover) {
|
||||
background-color: #0E42D2;
|
||||
background-color: var(--color-primary-dark-1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -3076,50 +3110,7 @@ onMounted(() => {
|
|||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* 侧边栏底部分页样式 */
|
||||
.sidebar-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: 20px 16px;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
:deep(.arco-pagination) {
|
||||
.arco-pagination-item {
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保文件夹内容区域不被底部分页遮挡 */
|
||||
.folder-content {
|
||||
/* 高度已调整，无需额外padding */
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
:deep(.arco-icon-refresh.spin) {
|
||||
|
|
@ -3250,8 +3241,8 @@ onMounted(() => {
|
|||
border: 1px solid #e2e8f0;
|
||||
|
||||
&:hover {
|
||||
background: #e2e8f0;
|
||||
color: #165DFF;
|
||||
background: var(--color-fill-2);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3260,8 +3251,8 @@ onMounted(() => {
|
|||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #165DFF;
|
||||
color: #165DFF;
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
@ -3370,7 +3361,7 @@ onMounted(() => {
|
|||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: rgba(var(--color-bg-1-rgb), 0.9);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary-light-2);
|
||||
|
|
@ -3388,7 +3379,7 @@ onMounted(() => {
|
|||
.search-result-tip {
|
||||
padding: 12px 16px;
|
||||
margin: 12px 16px;
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
|
|
@ -3402,7 +3393,7 @@ onMounted(() => {
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
|
||||
background: linear-gradient(45deg, transparent 30%, rgba(var(--color-bg-1-rgb), 0.1) 50%, transparent 70%);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
}
|
||||
|
|
@ -3440,7 +3431,7 @@ onMounted(() => {
|
|||
margin-top: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-bg-2);
|
||||
background: var(--color-bg-1);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -3612,17 +3603,18 @@ onMounted(() => {
|
|||
|
||||
/* 文件分页样式 */
|
||||
.file-pagination {
|
||||
position: absolute;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
margin-top: 0;
|
||||
margin-top: 16px;
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-bg-1);
|
||||
flex-shrink: 0;
|
||||
z-index: 10;
|
||||
|
||||
.arco-pagination {
|
||||
.arco-pagination-total {
|
||||
|
|
@ -3662,7 +3654,7 @@ onMounted(() => {
|
|||
/* 树形文件夹结构 */
|
||||
.folder-tree-container {
|
||||
padding: 8px;
|
||||
background: var(--color-bg-2);
|
||||
background: var(--color-bg-1);
|
||||
border-radius: 6px;
|
||||
margin: 8px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
Loading…
Reference in New Issue