feat: 完善工作空间文件操作功能

新增功能:
- 重命名弹框(替换 alert)
- 新建文件/文件夹弹框
- 上传文件功能
- 移动文件功能(树状选择+确认)
- 查看文件详情弹框
- 刷新文件列表按钮

交互优化:
- 修复操作按钮 toggle 行为
- 右键菜单分组显示(基础操作/详细信息/危险操作)
- 预览弹框宽度调整为 600px
- 不支持预览的文件类型 Toast 提示
- 文件树子项缩进 16px
- 空文件夹展开后直接为空

数据增强:
- 中文文件名示例
- 无法预览类型示例(压缩包、数据库、二进制)
- 多级文件夹嵌套示例
- 空文件夹示例

样式新增:
- 标题栏操作按钮样式
- 刷新按钮旋转动画
- 新建按钮下拉菜单
- 右键菜单分组分隔线
- 空状态样式
This commit is contained in:
2026-04-17 17:10:46 +08:00
parent e382a60e0a
commit 5f333b116a
15 changed files with 1171 additions and 33 deletions

View File

@@ -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);

View File

@@ -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);
}
}