飞冰是一个由alibaba开源的基于 React 的应用研发框架，开箱即用，同时支持移动端和桌面端
接下来让我们尝试使用它实现一个简单的待办事项列表，功能包括：
- 添加待办事项
- 编辑待办事项
- 删除待办事项
飞冰默认的React版本是React18，由于它特点之一是支持SSR，并且在路由设计上也是通过文件结构规定路由，与Nextjs非常相似，现在让我们正式开始
首先是创建ice项目，终端执行：
$ npm create ice ice-todo
其中ice-todo是本次项目的名称，我们以默认模板Web Lite Scaffold创建项目
完成后cd进入项目文件夹，然后是常规的pnpm i，安装完毕之后pnpm start启动项目看一看
启动之后页面非常简洁，样子如上
我们打开代码看一下
在package.json中，start实际上调用了ice这个打包工具，符合ice官网所说开箱即用的特性
"scripts": {
"start": "ice start --speedup",
"build": "ice build",
"eslint": "eslint ./src --cache --ext .js,.jsx,.ts,.tsx",
"eslint:fix": "npm run eslint -- --fix",
"stylelint": "stylelint "src/**/*.{css,scss,less}" --cache",
"stylelint:fix": "npm run stylelint -- --fix"
}
在README.md中也可以看到ice对默认项目结构的解释
.
├── README.md
├── ice.config.mts # The project config.
├── package.json
├── .browserslistrc # Browsers that support.
├── public # Static files.
├── src # Application source code.
│ ├── app.ts # The app entry.
│ ├── assets # Assets directory.
│ ├── document.tsx # The document entry.
│ ├── components # Components directory.
│ ├── pages # Pages directory.
│ │ ├── index.module.css # Index page style.
│ │ └── index.tsx # Index page component.
│ └── typings.d.ts # The type definition.
└── tsconfig.json
项目默认的入口是app.ts，ice的设计允许工程师自行修改config以设定项目入口
在默认模板下，首页反映的是index.tsx里面的内容，值得注意的是，默认模板提供的是语义化的HTML，这点非常方便
现在让我们在index.tsx里面写一个待办事项列表，首先从HTML开始
我们把todolist写成一个列表，我们希望实现的效果如下
当用户点击添加或者编辑，采用弹出对话框的方式进行输入和编辑
代码的编写思路是：本质上，我们的组件要维护一个待办事项列表todos，添加相当于todos加多一项，编辑相当于更新todos，删除也很容易理解
首先考虑一个用户可能会点击多个按钮的问题，在这里我们采用弹框的方式使用z-index在物理层面上杜绝这种可能性
思路有了之后，我们首先去写对话框，添加对话框和编辑对话框的主要区别是onSubmit逻辑不一样，
添加是直接新建一个todo再更新todos
编辑则是重写一个todo再更新todos
编辑框本身的onSubmit并不做事情，一切都靠传入的handle函数
主要代码大致如此
1.一些状态定义
2.html结构
其实写css会更麻烦一些
此外，对于ice.js框架来说，它在打包时对css的处理有一些问题
导致了input的width会超出预期长度
这一点或许要等待更正
