feat: 完善工作空间文件操作功能
新增功能: - 重命名弹框(替换 alert) - 新建文件/文件夹弹框 - 上传文件功能 - 移动文件功能(树状选择+确认) - 查看文件详情弹框 - 刷新文件列表按钮 交互优化: - 修复操作按钮 toggle 行为 - 右键菜单分组显示(基础操作/详细信息/危险操作) - 预览弹框宽度调整为 600px - 不支持预览的文件类型 Toast 提示 - 文件树子项缩进 16px - 空文件夹展开后直接为空 数据增强: - 中文文件名示例 - 无法预览类型示例(压缩包、数据库、二进制) - 多级文件夹嵌套示例 - 空文件夹示例 样式新增: - 标题栏操作按钮样式 - 刷新按钮旋转动画 - 新建按钮下拉菜单 - 右键菜单分组分隔线 - 空状态样式
This commit is contained in:
@@ -23,7 +23,7 @@
|
||||
background: var(--color-bg-1);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
|
||||
width: 420px;
|
||||
width: 600px;
|
||||
max-width: 90vw;
|
||||
max-height: calc(100vh - 48px);
|
||||
max-height: calc(100dvh - 48px);
|
||||
|
||||
@@ -52,6 +52,73 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&__action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
color: var(--color-text-3);
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-1);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
}
|
||||
|
||||
&__refresh--rotating {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
background: var(--color-bg-1);
|
||||
border: 1px solid var(--color-border-3);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16);
|
||||
z-index: $z-index-modal;
|
||||
min-width: 140px;
|
||||
padding: 4px 0;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
color: var(--color-text-1);
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -225,7 +292,7 @@
|
||||
}
|
||||
|
||||
&__children {
|
||||
padding-left: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -307,7 +374,7 @@
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16);
|
||||
z-index: $z-index-modal;
|
||||
min-width: 140px;
|
||||
min-width: 160px;
|
||||
padding: 4px 0;
|
||||
|
||||
&__item {
|
||||
@@ -341,4 +408,50 @@
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1px;
|
||||
background: var(--color-border-2);
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 空状态样式
|
||||
.file-tree__empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
color: var(--color-text-3);
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.file-tree__empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.file-tree__empty-text {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
// 空文件夹占位符
|
||||
.file-tree__folder-empty {
|
||||
padding: 8px 28px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// 旋转动画
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user