xuyueandClaude Opus 5.5
de277d3e9d
- bunfig.toml 的 [fmt]：不写分号、单引号、一行最长 160，和原来的写法一致 - .prettierignore：docs/教材摘要/ 是书上的摘录，不格式化 - 模板里一行写两条语句的事件处理（@keydown.delete、@dblclick）改成调用方法：去掉分号后拆成两行，Vue 编译不过 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
3.1 KiB
3.1 KiB
任务目标
开始做项目 8 的"智慧校园管理平台"：先做主界面。主界面没有标题栏，上面一条蓝色标题栏放"智慧校园"标题图，下面是校园背景图，背景上有"校园环境""校园安防""退出"三个图标；点"退出"关闭程序。后面四个任务都在这个程序上接着做。
练习重点：无边框窗体（FormBorderStyle）、面板（Panel）的停靠（Dock）、背景图片、图片框（PictureBox）和项目资源里的图片。详细步骤见书 p157–159。
界面和控件名
| 控件 | 名称（Name） | 文字（Text）和用途 |
|---|---|---|
| 窗体 | Main |
主界面；FormBorderStyle 设为 None，StartPosition 设为 CenterScreen |
| 面板 | panel1 |
顶部标题栏：停靠 Top，背景色 53, 147, 237 |
| 图片框 | pictureBox1 |
放在 panel1 上，图片 ico_title（"智慧校园"标题），SizeMode 设为 StretchImage |
| 面板 | panel2 |
停靠 Fill，背景图片 bg_home（校园），背景排列 Stretch |
| 图片框 | pic_environment |
"校园环境"入口，图片 icon_02 |
| 图片框 | pic_security |
"校园安防"入口，图片 icon_03 |
| 图片框 | pic_exit |
"退出"，图片 icon_04 |
三个图标放在 panel2 的背景图上，背景色都设成 Transparent，否则图标四周会露出一块灰色。
实现步骤
- 点代码上方的项目资源，勾选
ico_title、bg_home、icon_02、icon_03、icon_04五张图片。 - 设置窗体：无边框、屏幕居中。
- 拖两个面板：panel1 停靠 Top 当标题栏，里面放标题图；panel2 停靠 Fill，设背景图。
- 在 panel2 上放三个图片框，按上表设名字、图片和透明背景。
- 双击
pic_exit，在它的 Click 里写this.Close();。窗体没有标题栏和关闭按钮，只能靠这个图标退出程序。
和书上不一样的地方
图片从项目资源里选：书上第 2 步把配套资料里的 Resources 文件夹复制到工程里。平台上点项目资源，从素材库里勾选同名图片（平台自己画的，名字和尺寸与书上一致），设计器里"图片""背景图片"属性就能选到它们。
窗体名 Main：在设计器里点窗体空白处，把属性窗口的名称从
Form1改成Main，类名、文件名和 Program.cs 会跟着改。任务 2 的自动评分要找到 Main 窗体。
在平台上怎么试
- 运行后，运行区显示没有标题栏的主界面：蓝色标题栏上是"智慧校园"，下面是校园背景和三个图标（窗体比运行区大时会按比例缩小，点放大看得更清楚）。
- 点"退出"图标，程序应结束。