“坩埚”是你进行实操训练的重大法器，它是基于一个 NiceGUI 编写的完整待办应用（NiceGUI是一个用于Python的Web UI框架，特点是可以直接在Python中编写前端界面，无需HTML/CSS/JS）。

我们将从零开始，借助 cc‑nano 的普通模式、协调者模式、团队模式、计划模式、记忆系统、沙箱、技能定制等能力，逐步重构、增强、测试、安全审计这个应用，完整地体验 cc‑nano 从基础使用到高阶定制的全过程。

“坩埚”背景：魔法待办（MagicTodo）

项目简介：一个基于 NiceGUI 的待办事项 Web 应用，具备以下功能：

• 显示待办列表（标题、进度条、统计）
• 添加新待办
• 标记完成/未完成（复选框）
• 编辑待办名称（内联输入框）
• 删除待办
• 界面自动刷新（使用 @ui.refreshable 装饰器）

技术栈：

Python 3.12+、NiceGUI 3.12+、pytest。

“坩埚”结构与初始代码

项目结构：

cc-nano-playground/
├── pyproject.toml
├── pytest.ini
├── src/
│   └── cc_nano_playground/
│       ├── __init__.py
│       ├── main.py
│       └── app/
│           ├── __init__.py
│           └── todos.py
└── tests/
    └── __init__.py

初始代码核心文件：

• src/cc_nano_playground/app/todos.py：包含 TodoItem、ToDoList 数据类和 root() 界面构建函数。
• src/cc_nano_playground/main.py：启动入口。
• tests/：目前为空，后续会添加测试。

= ./src/cc_nano_playground/app/todos.py =

# 导入所需模块
from collections.abc import Callable
from dataclasses import dataclass, field

from nicegui import ui


# 表明单个待办事项的数据类
@dataclass
class TodoItem:
    name: str          # 事项名称
    done: bool = False # 是否已完成


# 表明整个待办列表的数据类
@dataclass
class ToDoList:
    title: str                # 列表标题（例如“我的周末”）
    on_change: Callable       # 列表发生改变时的回调函数（用于刷新界面）
    items: list[TodoItem] = field(default_factory=list)  # 待办事项列表

    # 添加新事项
    def add(self, name: str, done: bool = False) -> None:
        self.items.append(TodoItem(name, done))
        self.on_change()      # 通知界面更新

    # 删除指定事项
    def remove(self, item: TodoItem) -> None:
        self.items.remove(item)
        self.on_change()      # 通知界面更新


def root():
    # 使用 @ui.refreshable 装饰器，使该函数内部 UI 可以通过调用 refresh() 方法刷新
    @ui.refreshable
    def todo_ui():
        """动态显示待办列表的界面部分"""
        if not todos.items:
            # 列表为空时显示提示
            ui.label('列表为空。').classes('mx-auto')
            return
        # 显示进度条：已完成数量 / 总数量
        ui.linear_progress(
            sum(item.done for item in todos.items) / len(todos.items),
            show_value=False
        )
        # 显示已完成/剩余数量的统计行
        with ui.row().classes('justify-center w-full'):
            ui.label(f'已完成：{sum(item.done for item in todos.items)}')
            ui.label(f'剩余：{sum(not item.done for item in todos.items)}')
        # 遍历每个待办事项，生成一行 UI
        for item in todos.items:
            with ui.row().classes('items-center'):
                # 复选框：绑定到 item.done，改变时刷新整个 todo_ui
                ui.checkbox(value=item.done, on_change=todo_ui.refresh) 
                    .bind_value(item, 'done') 
                    .mark(f'checkbox-{item.name.lower().replace(" ", "-")}')
                # 文本输入框：绑定到 item.name，可编辑事项名称
                ui.input(value=item.name).classes('flex-grow').bind_value(item, 'name')
                # 删除按钮：点击时从 todos 中移除当前事项
                ui.button(
                    on_click=lambda item=item: todos.remove(item),
                    icon='delete'
                ).props('flat fab-mini color=grey')

    # 创建待办列表实例，标题为“我的周末”，列表改变时刷新 todo_ui
    todos = ToDoList('我的周末', on_change=todo_ui.refresh)
    # 添加几个示例事项
    todos.add('订披萨', done=True)     # 已完成示例
    todos.add('新 NiceGUI 发布')
    todos.add('打扫房子')
    todos.add('给妈妈打电话')

    # 使用卡片组件构建主界面，宽度固定
    with ui.card().classes('w-80 items-stretch'):
        # 动态显示列表标题（绑定到 todos.title）
        ui.label().bind_text_from(todos, 'title').classes('text-semibold text-2xl')
        # 显示待办列表界面
        todo_ui()
        # 输入框：用于添加新事项，占位文字为“新项目”
        add_input = ui.input('新项目').classes('mx-12').mark('new-item')
        # 按下回车键时：添加当前输入内容，然后清空输入框
        add_input.on('keydown.enter', lambda: todos.add(add_input.value))
        add_input.on('keydown.enter', lambda: add_input.set_value(''))

= ./src/cc_nano_playground/main.py =

from nicegui import app, ui

from cc_nano_playground.app.todos import root

def main () -> None:
    ui.run(root, reload=False)

if __name__ in {"__main__", "__mp_main__"}:
    main()

“坩埚”配置（开始前完成）

假设你跟我一样是一个poetry包管理器爱好者，已经预先安装好了poetry （如果你偏好uv或其他包管理器，就需要你自行研究一下pyproject.toml文件，了解一下依赖），请按以下步骤完成“坩埚”配置：

1. 下载代码

# 国内： 
git clone https://gitee.com/cipologic/cc-nano-playground.git 

# 国外： 
git clone https://github.com/cipologic/cc-nano-playground.git

2. 创建“坩埚”虚拟环境

# 1. 进入目录 
cd cc-nano-playground 

# 2. 安装虚拟环境（实则你用你喜爱的python版本都没有问题，记得要去pyproject.toml修改一下） 
poetry env use python3.12 

# 3. 检查一下 
poetry env info 

# 4. 激活虚拟环境 
poetry shell

3. 安装（必定要记得激活虚拟环境哦）

# 会自动下载依赖包 
poetry install 

# 验证可以运行 
todo

正常的话，你会看到类似下面的终端输出：

NiceGUI ready to go on http://localhost:8080 ……

到浏览器去访问：http://localhost:8080，你应该看到：

4. 初始化 cc‑nano 项目

cc-nano

然后在 REPL 的输入框中执行 /new，生成 .cc-nano.toml 和
CC-NANO-PROJECT-CHARTER.md

最后，配置 DeepSeek API Key（环境变量或 .cc-nano.toml）

export OPENAI_API_KEY="sk-xxx"

重启 cc-nano

祝贺你！你已经打造了一只完美的“坩埚”，它会陪伴你整个魔法学校的学习生涯。