feat: 完善工作台展示场景 - 新增 Modal/Toast 组件、EmptyState 使用、确认弹窗、筛选分页

- 新增 Modal 确认弹窗组件和 Toast 消息提示组件
- 在 SkillsPage、LogsPage、TasksPage、ProjectsPage 使用 EmptyState
- 为删除任务、取消订阅、移除成员、技能订阅添加确认弹窗
- 丰富聊天场景:代码展示、表格数据、多轮对话、错误提示
- 优化 ChatPage 布局,修复对话区域滚动问题
- 为 ProjectsPage 添加筛选卡片和分页组件
- 添加表单校验错误状态展示
- 同步 specs 到主目录
This commit is contained in:
2026-03-20 11:44:25 +08:00
parent 9f407c3aea
commit 181cf09ad2
17 changed files with 1147 additions and 229 deletions

View File

@@ -1058,6 +1058,7 @@ input:checked + .slider:before {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
background: var(--color-bg-1);
}
@@ -1272,6 +1273,8 @@ input:checked + .slider:before {
display: flex;
flex-direction: column;
background: var(--color-bg-1);
min-height: 0;
overflow: hidden;
}
.chat-messages {
@@ -2542,3 +2545,174 @@ input:checked + .slider:before {
.message-thinking {
cursor: pointer;
}
/* ===== Modal 弹窗样式 ===== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
backdrop-filter: blur(2px);
}
.modal {
background: var(--color-bg-1);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.16);
width: 420px;
max-width: 90vw;
animation: modal-in 0.2s ease-out;
}
@keyframes modal-in {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border-2);
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--color-text-1);
}
.modal-close {
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-2);
color: var(--color-text-1);
}
}
.modal-body {
padding: 20px;
font-size: 14px;
color: var(--color-text-2);
line-height: 1.6;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--color-border-2);
}
/* ===== Toast 消息提示样式 ===== */
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: var(--radius-md);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
z-index: 3000;
animation: toast-in 0.3s ease-out;
font-size: 14px;
font-weight: 500;
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.toast-success {
background: var(--color-success-light);
color: var(--color-success);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.toast-error {
background: var(--color-danger-light);
color: var(--color-danger);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.toast-warning {
background: var(--color-warning-light);
color: var(--color-warning);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.toast-info {
background: var(--color-primary-light);
color: var(--color-primary);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.toast-icon {
display: flex;
align-items: center;
font-size: 16px;
}
.toast-message {
flex: 1;
}
.toast-close {
display: flex;
align-items: center;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
&:hover {
opacity: 1;
}
}
/* ===== 表单校验错误样式 ===== */
.form-control.is-invalid {
border-color: var(--color-danger);
&:focus {
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}
}
.form-error {
font-size: 12px;
color: var(--color-danger);
margin-top: 4px;
}