feat(frontend): add four-quadrant kanban task management system
- Add KanbanPanel component with four-quadrant task layout - Add KanbanDetail component for task configuration modal - Add "待办" (Todo) module to sidebar collapsed icon rail - Click TODAY'S STATUS card or sidebar icon to open kanban drawer - Click quadrant check icon to open detail modal with Teleport to body - Apply blur effect to sidebar and chat area when detail modal is open - Import ListTodo icon from lucide-vue-next - Update sidebar labels to English for consistency
This commit is contained in:
496
frontend/src/components/chat/KanbanDetail.vue
Normal file
496
frontend/src/components/chat/KanbanDetail.vue
Normal file
@@ -0,0 +1,496 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
title: string
|
||||
completed: boolean
|
||||
description?: string
|
||||
assignee?: string
|
||||
priority?: string
|
||||
createdAt?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
quadrantId: string
|
||||
quadrantTitle: string
|
||||
quadrantColor: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
}>()
|
||||
|
||||
const activeTab = ref<'comments' | 'history'>('comments')
|
||||
const commentInput = ref('')
|
||||
|
||||
const mockTask: Task = {
|
||||
id: '1',
|
||||
title: '将2.0的服务部署到83服务器上',
|
||||
completed: true,
|
||||
description: '',
|
||||
assignee: 'caoxiaozhu',
|
||||
priority: '重要且紧急 (P1)',
|
||||
createdAt: '2024-03-21 14:49:35',
|
||||
}
|
||||
|
||||
function formatDate() {
|
||||
return new Date().toLocaleString('zh-CN')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="kanban-detail-overlay" :class="{ visible }" @click.self="emit('close')">
|
||||
<div class="kanban-detail-panel">
|
||||
<button class="detail-close" type="button" aria-label="Close detail" @click="emit('close')">
|
||||
×
|
||||
</button>
|
||||
|
||||
<div class="detail-header">
|
||||
<div class="task-title-section">
|
||||
<div class="task-title">
|
||||
<span class="check-icon">☑</span>
|
||||
{{ mockTask.title }}
|
||||
</div>
|
||||
<div class="task-meta">
|
||||
<span class="avatar">C</span>
|
||||
{{ mockTask.assignee }} 创建于：{{ mockTask.createdAt }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-badge" :style="{ background: quadrantColor + '20', color: quadrantColor }">
|
||||
✓
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
<div class="main-content">
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="icon">☞</span>
|
||||
描述
|
||||
</div>
|
||||
<div class="description-box">
|
||||
添加详细描述...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="task-info-list">
|
||||
<div class="info-item">
|
||||
<span class="icon">☰</span>
|
||||
负责人：<span class="avatar">C</span>{{ mockTask.assignname }}
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="icon">⚑</span>
|
||||
优先级：<span class="priority-high">{{ mockTask.priority }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="icon">📅</span>
|
||||
任务状态：<span :class="{ 'status-completed': mockTask.completed }">
|
||||
{{ mockTask.completed ? '已完成' : '进行中' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title subtask-section">
|
||||
<span>
|
||||
<span class="icon">☑</span>
|
||||
子任务
|
||||
</span>
|
||||
<button class="btn-add-subtask" type="button">添加子任务</button>
|
||||
</div>
|
||||
<div class="subtask-empty">暂无子任务</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">
|
||||
<span class="icon">💬</span>
|
||||
<span class="tab" :class="{ active: activeTab === 'comments' }" @click="activeTab = 'comments'">评论</span>
|
||||
<span class="tab" :class="{ active: activeTab === 'history' }" @click="activeTab = 'history'">操作记录</span>
|
||||
</div>
|
||||
<div class="comment-empty">没有相关内容</div>
|
||||
<div class="comment-input-area">
|
||||
<textarea
|
||||
v-model="commentInput"
|
||||
class="comment-input"
|
||||
placeholder="输入评论，Enter发表评论，Shift+Enter换行"
|
||||
></textarea>
|
||||
<button class="btn-comment" type="button">评论</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<button class="sidebar-btn" type="button">
|
||||
<span class="icon">✂</span>
|
||||
标记未完成
|
||||
</button>
|
||||
<button class="sidebar-btn" type="button">
|
||||
<span class="icon">↻</span>
|
||||
优先级
|
||||
</button>
|
||||
<button class="sidebar-btn" type="button">
|
||||
<span class="icon">👤</span>
|
||||
负责人
|
||||
</button>
|
||||
<button class="sidebar-btn" type="button">
|
||||
<span class="icon">📆</span>
|
||||
计划时间
|
||||
</button>
|
||||
<button class="sidebar-btn" type="button">
|
||||
<span class="icon">📎</span>
|
||||
添加附件
|
||||
</button>
|
||||
<button class="sidebar-btn" type="button">
|
||||
<span class="icon">📧</span>
|
||||
关注人
|
||||
</button>
|
||||
<button class="sidebar-btn" type="button">
|
||||
<span class="icon">📁</span>
|
||||
归档
|
||||
</button>
|
||||
<button class="sidebar-btn btn-delete" type="button">
|
||||
<span class="icon">🗑</span>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kanban-detail-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(2, 6, 14, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition-mid), visibility var(--transition-mid);
|
||||
z-index: 9999;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.kanban-detail-overlay.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.kanban-detail-panel {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 1100px;
|
||||
max-height: 90%;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(34, 211, 238, 0.22);
|
||||
background: linear-gradient(180deg, rgba(12, 20, 36, 0.98), rgba(8, 14, 28, 0.96));
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(34, 211, 238, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transform: scale(0.95);
|
||||
transition: transform var(--transition-mid);
|
||||
}
|
||||
|
||||
.kanban-detail-overlay.visible .kanban-detail-panel {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
font-size: 28px;
|
||||
color: #ff4d4f;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.detail-close:hover {
|
||||
color: #ff7875;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 243, 255, 0.1);
|
||||
}
|
||||
|
||||
.task-title-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #e0f7ff;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #00f3ff, #0891b2);
|
||||
color: #000;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 240px;
|
||||
gap: 20px;
|
||||
padding: 20px 24px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #e0f7ff;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-title .icon {
|
||||
font-size: 16px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.section-title .tab {
|
||||
font-size: 14px;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-right: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.section-title .tab.active {
|
||||
color: #e0f7ff;
|
||||
border-bottom-color: #00f3ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description-box {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(0, 243, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
min-height: 60px;
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.task-info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #e0f7ff;
|
||||
}
|
||||
|
||||
.info-item .icon {
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.priority-high {
|
||||
color: #ff4d4f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.subtask-section {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-add-subtask {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid rgba(0, 243, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 243, 255, 0.06);
|
||||
color: var(--accent-cyan);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-add-subtask:hover {
|
||||
background: rgba(0, 243, 255, 0.12);
|
||||
border-color: rgba(0, 243, 255, 0.5);
|
||||
}
|
||||
|
||||
.subtask-empty {
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.comment-empty {
|
||||
color: var(--text-dim);
|
||||
font-size: 14px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.comment-input-area {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
border-top: 1px solid rgba(0, 243, 255, 0.1);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.comment-input {
|
||||
flex: 1;
|
||||
min-height: 50px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(0, 243, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #e0f7ff;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.comment-input:focus {
|
||||
border-color: rgba(0, 243, 255, 0.5);
|
||||
}
|
||||
|
||||
.comment-input::placeholder {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.btn-comment {
|
||||
padding: 10px 20px;
|
||||
background: rgba(0, 243, 255, 0.1);
|
||||
border: 1px solid rgba(0, 243, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: var(--accent-cyan);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-comment:hover {
|
||||
background: rgba(0, 243, 255, 0.2);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar-btn {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(0, 243, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
color: #e0f7ff;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar-btn:hover {
|
||||
border-color: rgba(0, 243, 255, 0.4);
|
||||
background: rgba(0, 243, 255, 0.08);
|
||||
}
|
||||
|
||||
.sidebar-btn .icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sidebar-btn.btn-delete {
|
||||
border-color: rgba(255, 77, 79, 0.3);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.sidebar-btn.btn-delete:hover {
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.detail-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 243, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 243, 255, 0.4);
|
||||
}
|
||||
</style>
|
||||
336
frontend/src/components/chat/KanbanPanel.vue
Normal file
336
frontend/src/components/chat/KanbanPanel.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface KanbanTask {
|
||||
id: string
|
||||
title: string
|
||||
completed: boolean
|
||||
}
|
||||
|
||||
interface KanbanQuadrant {
|
||||
id: string
|
||||
title: string
|
||||
color: string
|
||||
tasks: KanbanTask[]
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
visible: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
toggleTask: [taskId: string]
|
||||
openDetail: [quadrantId: string]
|
||||
}>()
|
||||
|
||||
const quadrants = computed<KanbanQuadrant[]>(() => [
|
||||
{
|
||||
id: 'urgent-important',
|
||||
title: '重要且紧急',
|
||||
color: '#f56565',
|
||||
tasks: [
|
||||
{ id: '1', title: '将2.0的服务部署到83服务器上', completed: true },
|
||||
{ id: '2', title: '将83上的遗留的ygzy, recommand和langchain部署起来', completed: true },
|
||||
{ id: '3', title: '本地知识库接口开发', completed: true },
|
||||
{ id: '4', title: '将"远光智言"中加入本地文档的问答功能', completed: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'not-urgent-important',
|
||||
title: '重要不紧急',
|
||||
color: '#ecc94b',
|
||||
tasks: [
|
||||
{ id: '5', title: '关于X Request的集成', completed: false },
|
||||
{ id: '6', title: '调研GLM Code', completed: false },
|
||||
{ id: '7', title: '页面集成llamafactory功能进行开发', completed: false },
|
||||
{ id: '8', title: '预训练功能开发', completed: false },
|
||||
{ id: '9', title: '数据生成相关代码', completed: true },
|
||||
{ id: '10', title: '调研Transformer的一些基础原理', completed: true },
|
||||
{ id: '11', title: '英文分词并且找寻关键词', completed: false },
|
||||
{ id: '12', title: '适配多个数据库类型', completed: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'urgent-not-important',
|
||||
title: '紧急不重要',
|
||||
color: '#42b9f5',
|
||||
tasks: [
|
||||
{ id: '13', title: '文件预处理功能', completed: false },
|
||||
{ id: '14', title: '机器学习 - 西瓜书', completed: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'not-urgent-not-important',
|
||||
title: '不重要不紧急',
|
||||
color: '#97c950',
|
||||
tasks: [],
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="kanban-panel" :class="{ visible }">
|
||||
<div class="kanban-frame">
|
||||
<div class="kanban-header">
|
||||
<div class="kanban-title-row">
|
||||
<span class="kanban-cloud">☁</span>
|
||||
<span class="kanban-title">我的待办</span>
|
||||
</div>
|
||||
<div class="kanban-nav">
|
||||
<a href="#" class="nav-link">🗓 待办日程</a>
|
||||
<a href="#" class="nav-link">🗹 已完成的任务</a>
|
||||
<a href="#" class="nav-link">♡ 我关注的任务</a>
|
||||
<a href="#" class="nav-link">✉ 周报/日报</a>
|
||||
</div>
|
||||
<button class="kanban-close" type="button" aria-label="Close kanban" @click="emit('close')">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="kanban-quadrants">
|
||||
<div
|
||||
v-for="quadrant in quadrants"
|
||||
:key="quadrant.id"
|
||||
class="kanban-quadrant"
|
||||
:style="{ '--quadrant-color': quadrant.color }"
|
||||
>
|
||||
<div class="quadrant-header">
|
||||
<span class="quadrant-title">☛ {{ quadrant.title }}</span>
|
||||
<button class="quadrant-check" type="button" @click="emit('openDetail', quadrant.id)">☑</button>
|
||||
</div>
|
||||
<div class="quadrant-content">
|
||||
<template v-if="quadrant.tasks.length > 0">
|
||||
<div
|
||||
v-for="task in quadrant.tasks"
|
||||
:key="task.id"
|
||||
class="task-item"
|
||||
:class="{ completed: task.completed }"
|
||||
@click="emit('toggleTask', task.id)"
|
||||
>
|
||||
<input type="checkbox" :checked="task.completed" disabled />
|
||||
<span class="task-title">{{ task.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="empty-state">
|
||||
恭喜你！已完成了所有待办
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.kanban-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px 12px 12px 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition-mid), visibility var(--transition-mid);
|
||||
}
|
||||
|
||||
.kanban-panel.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.kanban-frame {
|
||||
height: 100%;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(34, 211, 238, 0.18);
|
||||
background: linear-gradient(180deg, rgba(8, 14, 28, 0.96), rgba(6, 10, 20, 0.92));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 20px rgba(34, 211, 238, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kanban-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid rgba(0, 243, 255, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.kanban-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.kanban-cloud {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.kanban-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #e0f7ff;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.kanban-nav {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kanban-nav .nav-link {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.kanban-nav .nav-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.kanban-close {
|
||||
margin-left: 12px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
background: rgba(8, 14, 26, 0.86);
|
||||
color: var(--text-dim);
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.kanban-close:hover {
|
||||
border-color: rgba(34, 211, 238, 0.4);
|
||||
color: var(--accent-cyan);
|
||||
background: rgba(8, 20, 36, 0.96);
|
||||
}
|
||||
|
||||
.kanban-quadrants {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kanban-quadrant {
|
||||
background: rgba(0, 20, 40, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quadrant-header {
|
||||
padding: 8px 10px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--quadrant-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quadrant-title {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.quadrant-check {
|
||||
opacity: 0.8;
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.quadrant-check:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.quadrant-content {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 4px;
|
||||
font-size: 11px;
|
||||
color: #e0f7ff;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.task-item:hover {
|
||||
background-color: rgba(0, 243, 255, 0.08);
|
||||
}
|
||||
|
||||
.task-item input[type="checkbox"] {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-item.completed {
|
||||
text-decoration: line-through;
|
||||
color: rgba(224, 247, 255, 0.5);
|
||||
background-color: rgba(0, 243, 255, 0.06);
|
||||
}
|
||||
|
||||
.task-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
color: rgba(224, 247, 255, 0.4);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.quadrant-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.quadrant-content::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.quadrant-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 243, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.quadrant-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 243, 255, 0.4);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user