基于iflow的qwen模型来体验代码生成

import React, { useState, useEffect } from 'react';
import styled, { createGlobalStyle, keyframes } from 'styled-components';
import { FiCheck, FiTrash2, FiEdit2 } from 'react-icons/fi';

// 淡入动画
const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

// 淡入缩放动画
const fadeInScale = keyframes`
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
`;

// 按钮点击动画
const buttonClick = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
`;

// 按钮悬停脉冲动画
const pulse = keyframes`
  0% {
    box-shadow: 0 0 0 0 rgba(56, 151, 240, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(56, 151, 240, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(56, 151, 240, 0);
  }
`;

// 任务项滑动动画
const slideIn = keyframes`
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`;

// 全局样式
const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
    min-height: 100vh;
    padding: 20px;
  }
`;

// 主容器
const AppContainer = styled.div`
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  animation: ${fadeIn} 0.5s ease-out;
`;

// 顶部导航栏
const Header = styled.header`
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  padding: 25px;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(30deg);
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  }
`;

const AppTitle = styled.h1`
  color: white;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: linear-gradient(90deg, white, #e0f7fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

// 主内容区域
const MainContent = styled.main`
  padding: 30px;
`;

// 添加任务表单
const AddTodoForm = styled.div`
  display: flex;
  margin-bottom: 25px;
  gap: 12px;
  animation: ${fadeIn} 0.5s ease-out;
`;

const TodoInput = styled.input`
  flex: 1;
  padding: 16px 20px;
  border: 1px solid rgba(134, 142, 150, 0.2);
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  &:focus {
    border-color: #3897f0;
    background: white;
    box-shadow: 0 0 0 3px rgba(56, 151, 240, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
  }

  &::placeholder {
    color: #a0aec0;
  }
`;

const AddButton = styled.button`
  background: linear-gradient(135deg, #3897f0 0%, #833ab4 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(56, 151, 240, 0.3);

  &:hover {
    background: linear-gradient(135deg, #2d7bc4 0%, #6a11cb 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(56, 151, 240, 0.4);
  }

  &:active {
    animation: ${buttonClick} 0.2s ease;
    transform: translateY(0);
  }

  &:focus {
    animation: ${pulse} 1.5s infinite;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
  }

  &:hover::before {
    left: 100%;
  }
`;

// 任务列表
const TodoList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 15px;
`;

// 单个任务项
const TodoItem = styled.div<{ completed: boolean }>`
  display: flex;
  align-items: center;
  padding: 18px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(134, 142, 150, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  animation: ${slideIn} 0.3s ease-out;

  ${props => props.completed && `
    opacity: 0.8;
    background: rgba(240, 240, 240, 0.6);
  `}

  &:hover {
    border-color: rgba(134, 142, 150, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  }
`;

const Checkbox = styled.input.attrs({ type: 'checkbox' })`
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #4CAF50;
  border-radius: 6px;
  border: 2px solid #cbd5e0;
  transition: all 0.2s ease;

  &:checked {
    border-color: #4CAF50;
    background: #4CAF50;
  }

  &:hover {
    transform: scale(1.1);
  }
`;

const TodoText = styled.span<{ completed: boolean }>`
  flex: 1;
  font-size: 1.1rem;
  margin: 0 15px;
  transition: all 0.3s ease;
  color: #2d3748;
  ${props => props.completed && `
    text-decoration: line-through;
    color: #a0aec0;
  `}
`;

const TodoActions = styled.div`
  display: flex;
  gap: 12px;
`;

const ActionButton = styled.button`
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(134, 142, 150, 0.2);
  cursor: pointer;
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #718096;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

  &:hover {
    background: white;
    color: #4a5568;
    border-color: rgba(134, 142, 150, 0.4);
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  &:active {
    transform: scale(0.95);
  }
`;

const CheckButton = styled(ActionButton)`
  &:hover {
    color: #4CAF50;
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.1);
  }
`;

const EditButton = styled(ActionButton)`
  &:hover {
    color: #2b6cb0;
    border-color: rgba(43, 108, 176, 0.4);
    background: rgba(43, 108, 176, 0.1);
  }
`;

const DeleteButton = styled(ActionButton)`
  &:hover {
    color: #e53e3e;
    border-color: rgba(229, 62, 62, 0.4);
    background: rgba(229, 62, 62, 0.1);
  }
`;

// 统计信息
const StatsContainer = styled.div`
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  font-weight: 500;
  color: #718096;
  border: 1px solid rgba(134, 142, 150, 0.15);
  animation: ${fadeInScale} 0.5s ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
`;

const StatItem = styled.div`
  text-align: center;
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }
`;

const StatNumber = styled.div`
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d3748;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

const StatLabel = styled.div`
  font-size: 0.85rem;
  color: #a0aec0;
  margin-top: 3px;
`;

// 空状态
const EmptyState = styled.div`
  text-align: center;
  padding: 60px 20px;
  color: #a0aec0;
  animation: ${fadeIn} 0.5s ease-out;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  margin-top: 10px;
  backdrop-filter: blur(5px);
`;

const EmptyIcon = styled.div`
  font-size: 3.5rem;
  margin-bottom: 20px;
  opacity: 0.6;
  filter: grayscale(100%);
  animation: ${fadeIn} 1s ease-in-out infinite alternate;
`;

interface Todo {
  id: string;
  text: string;
  completed: boolean;
  createdAt: Date;
}

const App: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState<string>('');

  // 从localStorage加载数据
  useEffect(() => {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      try {
        const parsedTodos = JSON.parse(savedTodos);
        // 将日期字符串转换回Date对象
        const todosWithDates = parsedTodos.map((todo: any) => ({
          ...todo,
          createdAt: new Date(todo.createdAt)
        }));
        setTodos(todosWithDates);
      } catch (e) {
        console.error('Error parsing todos from localStorage', e);
      }
    }
  }, []);

  // 保存数据到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      const newTodoItem: Todo = {
        id: Date.now().toString(),
        text: newTodo,
        completed: false,
        createdAt: new Date()
      };
      setTodos([newTodoItem, ...todos]); // 将新任务添加到列表顶部
      setNewTodo('');
    }
  };

  const toggleTodo = (id: string) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id: string) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const editTodo = (id: string, newText: string) => {
    if (newText.trim() !== '') {
      setTodos(todos.map(todo =>
        todo.id === id ? { ...todo, text: newText } : todo
      ));
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      addTodo();
    }
  };

  const completedCount = todos.filter(todo => todo.completed).length;
  const totalCount = todos.length;

  return (
    <>
      <GlobalStyle />
      <AppContainer>
        <Header>
          <AppTitle>Instagram风格Todo</AppTitle>
        </Header>

        <MainContent>
          <AddTodoForm>
            <TodoInput
              type="text"
              value={newTodo}
              onChange={(e) => setNewTodo(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="添加新任务..."
            />
            <AddButton onClick={addTodo}>
              添加
            </AddButton>
          </AddTodoForm>

          {todos.length > 0 ? (
            <>
              <TodoList>
                {todos.map(todo => (
                  <TodoItem key={todo.id} completed={todo.completed}>
                    <Checkbox
                      checked={todo.completed}
                      onChange={() => toggleTodo(todo.id)}
                    />
                    <TodoText completed={todo.completed}>{todo.text}</TodoText>
                    <TodoActions>
                      <CheckButton
                        onClick={() => toggleTodo(todo.id)}
                        title={todo.completed ? "标记为未完成" : "标记为完成"}
                      >
                        {React.createElement(FiCheck as any)}
                      </CheckButton>
                      <EditButton
                        onClick={() => {
                          const newText = prompt('编辑任务:', todo.text);
                          if (newText !== null) {
                            editTodo(todo.id, newText);
                          }
                        }}
                        title="编辑"
                      >
                        {React.createElement(FiEdit2 as any)}
                      </EditButton>
                      <DeleteButton
                        onClick={() => deleteTodo(todo.id)}
                        title="删除"
                      >
                        {React.createElement(FiTrash2 as any)}
                      </DeleteButton>
                    </TodoActions>
                  </TodoItem>
                ))}
              </TodoList>

              <StatsContainer>
                <StatItem>
                  <StatNumber>{totalCount}</StatNumber>
                  <StatLabel>总任务</StatLabel>
                </StatItem>
                <StatItem>
                  <StatNumber>{completedCount}</StatNumber>
                  <StatLabel>已完成</StatLabel>
                </StatItem>
                <StatItem>
                  <StatNumber>{totalCount - completedCount}</StatNumber>
                  <StatLabel>待完成</StatLabel>
                </StatItem>
              </StatsContainer>
            </>
          ) : (
            <EmptyState>
              <EmptyIcon>📝</EmptyIcon>
              <h2>还没有任务</h2>
              <p>添加你的第一个任务开始吧！</p>
            </EmptyState>
          )}
        </MainContent>
      </AppContainer>
    </>
  );
};

export default App;