diff --git a/frontend/src/views/CreateTask.vue b/frontend/src/views/CreateTask.vue index cb7ccf4..ba1e304 100644 --- a/frontend/src/views/CreateTask.vue +++ b/frontend/src/views/CreateTask.vue @@ -2097,35 +2097,79 @@ onUnmounted(() => { // 上传文件列表样式 :deep(.ant-upload-list) { color: $text-primary; + margin-top: 12px; .ant-upload-list-item { color: $text-primary; - border-color: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.03); + border-radius: 6px; + padding: 8px 12px; + margin-top: 8px; + + &:hover { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.25); + } .ant-upload-list-item-name { color: $text-primary; + flex: 1; &:hover { color: $brand-primary; } } - .ant-upload-list-item-card-actions { - .anticon { - color: $text-secondary; + // 删除按钮样式增强 + .ant-upload-list-item-card-actions, + .ant-upload-list-item-actions { + display: flex !important; + align-items: center; + + .anticon, + .ant-btn { + color: #ff6b6b !important; + font-size: 16px; + cursor: pointer; + transition: all 0.2s; &:hover { - color: $color-error; + color: #ff4d4f !important; + transform: scale(1.1); + } + } + + // 删除图标按钮 + .anticon-delete, + .ant-upload-list-item-card-actions-btn { + padding: 4px 8px; + border-radius: 4px; + background: rgba(255, 77, 79, 0.1); + + &:hover { + background: rgba(255, 77, 79, 0.2); } } } } .ant-upload-list-item-error { + border-color: rgba(255, 77, 79, 0.3); + .ant-upload-list-item-name { color: $color-error; } } + + // 上传完成状态的文件项 + .ant-upload-list-item-done { + border-color: rgba(49, 240, 139, 0.2); + + .ant-upload-list-item-name { + color: $brand-primary; + } + } } }