【前端】简易化看板

【前端】简易化看板

在这里插入图片描述
在这里插入图片描述

项目简介

看板分为三个模块,分别是待办,正在做,已做完三个部分。每个事件采取"卡片"式设计,支持任务间拖拽,删除等操作。

代码

import React, { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';const KanbanBoard = () => {const [tasks, setTasks] = useState({todo: [{ id: '1', title: '设计新的登录页面' },{ id: '2', title: '优化数据库查询' }],doing: [{ id: '3', title: '实现用户认证功能' },{ id: '4', title: '编写单元测试' }],done: [{ id: '5', title: '更新API文档' },{ id: '6', title: '修复登录bug' }]});const [newTasks, setNewTasks] = useState({todo: '',doing: '',done: ''});const onDragStart = (e, id, sourceColumn) => {e.dataTransfer.setData('text/plain', JSON.stringify({ id, sourceColumn }));};const onDragOver = (e) => {e.preventDefault();};const onDrop = (e, targetColumn) => {e.preventDefault();const { id, sourceColumn } = JSON.parse(e.dataTransfer.getData('text'));if (sourceColumn === targetColumn) return;const updatedTasks = { ...tasks };const taskToMove = updatedTasks[sourceColumn].find(task => task.id === id);updatedTasks[sourceColumn] = updatedTasks[sourceColumn].filter(task => task.id !== id);updatedTasks[targetColumn].push(taskToMove);setTasks(updatedTasks);};const addTask = (column) => {if (newTasks[column].trim()) {const updatedTasks = { ...tasks };updatedTasks[column] = [...tasks[column], { id: Date.now().toString(), title: newTasks[column]}];setTasks(updatedTasks);setNewTasks({...newTasks, [column]: ''});}};const deleteTask = (columnId, taskId) => {const updatedTasks = { ...tasks };updatedTasks[columnId] = tasks[columnId].filter(task => task.id !== taskId);setTasks(updatedTasks);};const renderTask = (task, columnId) => (<Card key={task.id}draggableonDragStart={(e) => onDragStart(e, task.id, columnId)}className="mb-2 shadow-sm hover:shadow-md transition-shadow duration-200"><CardContent className="p-3 flex justify-between items-center"><p className="text-sm font-medium text-gray-700 truncate flex-grow mr-2">{task.title}</p><Button onClick={() => deleteTask(columnId, task.id)}className="text-gray-400 hover:text-red-500 transition-colors duration-200 flex-shrink-0"variant="ghost"size="sm">×</Button></CardContent></Card>);const renderColumn = (title, columnId) => (<div className="flex-1 min-w-[250px] bg-gray-50 rounded-lg p-4 border border-gray-200"onDragOver={onDragOver}onDrop={(e) => onDrop(e, columnId)}><h2 className="text-lg font-semibold mb-4 text-gray-700">{title}</h2><div className="space-y-2">{tasks[columnId].map(task => renderTask(task, columnId))}</div><div className="mt-4"><Inputtype="text"value={newTasks[columnId]}onChange={(e) => setNewTasks({...newTasks, [columnId]: e.target.value})}placeholder={`添加任务到 ${title}`}className="mb-2"/><Button onClick={() => addTask(columnId)} className="w-full bg-blue-500 hover:bg-blue-600 text-white">添加任务</Button></div></div>);return (<div className="container mx-auto p-6 bg-white"><header className="text-center mb-8"><h1 className="text-3xl font-bold text-gray-800">SeeBoard</h1></header><div className="flex flex-wrap gap-6">{renderColumn('待办', 'todo')}{renderColumn('进行中', 'doing')}{renderColumn('已完成', 'done')}</div></div>);
};export default KanbanBoard;

效果图

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37363.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图论 树 深度优先搜索】2246. 相邻字符不同的最长路径

本文涉及知识点 图论 树 图论知识汇总 深度优先搜索汇总 LeetCode 2246. 相邻字符不同的最长路径 给你一棵 树&#xff08;即一个连通、无向、无环图&#xff09;&#xff0c;根节点是节点 0 &#xff0c;这棵树由编号从 0 到 n - 1 的 n 个节点组成。用下标从 0 开始、长度…

如何正视AI创造音乐

音乐作为一种艺术形式&#xff0c;一直被认为是人类情感和创造力的表达。然而&#xff0c;随着人工智能技术的快速发展&#xff0c;AI在音乐领域的应用也日益广泛。最近一个月&#xff0c;音乐大模型的轮番上线&#xff0c;将素人生产音乐的门槛降到了最低&#xff0c;引发了音…

【漏洞复现】SolarWinds——任意文件读取

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 SolarWinds其Serv-UFTP服务存在目录遍历导致任意文件读取漏洞&a…

数据访问层如何提取数据到其他层,其他类中

当然可以&#xff0c;以下是一些具体的例子&#xff0c;展示了如何将数据库访问逻辑封装在一个单独的类中&#xff0c;并在其他类中使用这个类来获取数据。 数据库访问类&#xff08;DatabaseAccess.java&#xff09;&#xff1a; java复制代码 import java.sql.*; import ja…

自然语言处理(NLP)—— 深度学习

1. 词嵌入&#xff08;Embeddings&#xff09; 1.1 词嵌入的基本概念 词嵌入&#xff08;Embeddings&#xff09;是一种将词语映射到高维空间&#xff08;比如N300维&#xff09;的技术&#xff0c;使得词语之间的欧几里得距离与它们的语义距离相关联。这意味着在这个向量空间…

macOS 上或linux安装 Jenkins

在 macOS 上使用 Docker 安装 Jenkins 的步骤如下&#xff1a; 安装 Docker: 如果尚未安装 Docker&#xff0c;请先从 Docker 官网下载并安装 Docker Desktop for Mac。 打开终端: 打开 macOS 上的终端应用程序。 拉取 Jenkins 镜像: 使用以下命令从 Docker Hub 拉取 Jenkins…

Golang | Leetcode Golang题解之第203题移除链表元素

题目&#xff1a; 题解&#xff1a; func removeElements(head *ListNode, val int) *ListNode {dummyHead : &ListNode{Next: head}for tmp : dummyHead; tmp.Next ! nil; {if tmp.Next.Val val {tmp.Next tmp.Next.Next} else {tmp tmp.Next}}return dummyHead.Next …

Python测试框架 pytest : 从零开始的完全指南

pytest : 从零开始的完全指南 一、pytest 简介1.1 pytest 的背景和发展历史1.2 pytest 的概念1.3 pytest 的特点1.4 测试阶段分类1.5 单元测试框架的主要功能 二、pytest 的基本使用2.1 pytest 默认测试用例2.2 全局配置文件 pytest.ini2.3 执行 pytest2.4 跳过方法2.5 pytest …

1.SQL注入-数字型

SQL注入-数字型(post) 查询1的时候发现url后面的链接没有传入1的参数。验证为post请求方式&#xff0c;仅显示用户和邮箱 通过图中的显示的字段&#xff0c;我们可以猜测传入数据库里面的语句&#xff0c;例如&#xff1a; select 字段1,字段2 from 表名 where id1; 编辑一个…

深入解析 Apache Kylin 数据更新机制:保持大数据活力的策略

Apache Kylin 是一个开源的分布式分析引擎&#xff0c;专为大规模数据集的快速分析而设计。它通过预计算技术&#xff0c;将查询结果存储在 HBase 或其他 NoSQL 数据库中&#xff0c;从而加快查询速度。然而&#xff0c;数据是动态变化的&#xff0c;这就要求 Kylin 具备有效的…

外星球的公理与地球的公理

公理是指依据人类理性的不证自明的基本事实&#xff0c;经过人类长期反复实践的考验&#xff0c;不需要再证明的基本命题。然而&#xff0c;人类目前的科学技术水平有限&#xff0c;还未能证明和观测到地外星球的存在&#xff0c;因此无法得知外星球的公理。 比如在地球上&…

ShardingSphere初探(二)

ShardingSphere初探&#xff08;二&#xff09; 广播表 广播表是指在分布式数据库系统中&#xff0c;每个数据节点上都拥有其完整副本的表。无论查询操作在哪个节点上执行&#xff0c;广播表的数据在所有节点上都是一致的。 演示 表创建,分别在库1和库2创建t_dict表 CREAT…

使用 mindspore 的常见的 Tensor 的用法

1. 背景&#xff1a; 使用 mindspore 学习神经网络&#xff0c;打卡第二天&#xff1b; 2. 训练的内容&#xff1a; 使用 mindspore 的常见的 Tensor 的用法&#xff1b; 3. 常见的用法小节&#xff1a; Tensor 构造; 初始化; 继承属性(ones_like); 属性 - 同 numpy; 索引…

SOAP vs REST介绍

SOAP&#xff08;简单对象访问协议&#xff09; 定义&#xff1a;SOAP是一种基于XML的通信协议&#xff0c;用于在网络中交换结构化信息&#xff0c;特别是在分布式环境和需要中介&#xff08;如网关或防火墙&#xff09;的环境中。它通过HTTP、SMTP等多种传输协议传输信息&…

示例:WPF中推荐一个Diagram开源流程图控件

一、目的&#xff1a;分享一个自研的开源流程图控件 二、使用方法 1、引用Nuget包&#xff1a; 2、添加节点列表和绘图控件 <DockPanel><ItemsControl DockPanel.Dock"Left"><h:GeometryNodeData Text"节点"/></ItemsControl><…

代码随想三刷贪心篇4

代码随想三刷贪心篇4 452. 用最少数量的箭引爆气球题目代码435. 无重叠区间题目代码763. 划分字母区间题目代码56. 合并区间题目代码452. 用最少数量的箭引爆气球 题目 链接 代码 class Solution {public int findMinArrowShots(int[][] points) {Arrays.

Android Style 使用指南

简介: Android Style 是一种能够统一定义应用程序中视图元素外观和行为的强大工具。通过使用 Style&#xff0c;可以轻松地应用相同的样式属性到多个视图上&#xff0c;提高代码的可维护性和重用性。本文将介绍 Android Style 的基本概念、使用方法以及一些最佳实践&#xff0c…

Mysql的SQL语句实例

一.权限表 1.user表 User表是MySQL中最重要的一个权限表&#xff0c;记录允许连接到服务器的帐号信息&#xff0c;里面的权限是全局级的。 2.db表和host表 db表和host表是MySQL数据中非常重要的权限表。db表中存储了用户对某个数据库的操作权限&#xff0c;决定用户能从哪个…

mysql8.0其他数据库日志

概述 我们在讲解数据库事务时&#xff0c;讲过两种日志:重做日志、回滚日志。 对于线上数据库应用系统&#xff0c;突然遭遇数据库宕机怎么办?在这种情况下&#xff0c;定位宕机的原因就非常关键。可以查看数据库的错误日志。因为日志中记录了数据库运行中的诊断信息&#xff…

基于STM32的智能家用电力管理系统

目录 引言环境准备智能家用电力管理系统基础代码实现&#xff1a;实现智能家用电力管理系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统实现4.4 用户界面与数据可视化应用场景&#xff1a;电力管理与优化问题解决方案与优化收尾与总结 1. 引言 智能家用电力管理系统通…