第 0 阶段：教材项目 2 任务 1 在网页中原样运行

- runtime：仿真 WinForms 子集（Form、Button、Label、TextBox、ComboBox、
  GroupBox、Timer、MessageBox、界面线程消息循环、跨线程检查）、
  教材设备类库（DeviceCtrlHelper、LED 控件）、运行器（常驻编译服务 + 运行模式）
- server：Bun + Hono，WebSocket 会话，每次运行一个进程，消息转发
- web：Vue + Naive UI，WinForms 风格窗体渲染、MessageBox、实训台 LED 屏
- 端到端测试与 100 个程序并发的压力测试
- 教材逐任务摘要（docs/教材摘要）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/winforms/format.ts

@@ -0,0 +1,67 @@
+// 把运行器发来的 WinForms 属性值转换成 CSS。
+// 运行器的序列化格式：Point → {x,y}，Size → {width,height}，
+// Color → CSS 颜色字符串（未设置时为 null，表示继承父控件），Font → FontValue。
+import type { CSSProperties } from 'vue'
+
+export interface PointValue {
+  x: number
+  y: number
+}
+
+export interface SizeValue {
+  width: number
+  height: number
+}
+
+export interface FontValue {
+  family: string
+  size: number
+  bold: boolean
+  italic: boolean
+  underline: boolean
+  strikeout: boolean
+}
+
+/** Windows 中文字体在网页上的替代字体 */
+const FONT_FALLBACKS: Record<string, string> = {
+  宋体: '"SimSun", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif',
+  SimSun: '"SimSun", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", serif',
+  黑体: '"SimHei", "Heiti SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif',
+  楷体: '"KaiTi", "Kaiti SC", "AR PL UKai CN", serif',
+  微软雅黑: '"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif',
+  'Microsoft YaHei': '"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", sans-serif',
+}
+
+export function fontCss(font: FontValue | null | undefined): CSSProperties {
+  if (!font) return {}
+  const decorations = [font.underline && 'underline', font.strikeout && 'line-through'].filter(Boolean)
+  return {
+    fontFamily: FONT_FALLBACKS[font.family] ?? `"${font.family}", ${FONT_FALLBACKS.宋体}`,
+    // WinForms 字号单位是磅，96 DPI 下 1pt = 4/3 px
+    fontSize: `${(font.size * 4) / 3}px`,
+    fontWeight: font.bold ? 'bold' : undefined,
+    fontStyle: font.italic ? 'italic' : undefined,
+    textDecoration: decorations.length ? decorations.join(' ') : undefined,
+  }
+}
+
+/** 控件外框：绝对定位，坐标相对父控件的客户区 */
+export function boxCss(props: Record<string, unknown>, autoSize = false): CSSProperties {
+  const location = (props.Location as PointValue | undefined) ?? { x: 0, y: 0 }
+  const size = props.Size as SizeValue | undefined
+  return {
+    left: `${location.x}px`,
+    top: `${location.y}px`,
+    width: autoSize || !size ? undefined : `${size.width}px`,
+    height: autoSize || !size ? undefined : `${size.height}px`,
+    color: (props.ForeColor as string | null) ?? undefined,
+    backgroundColor: (props.BackColor as string | null) ?? undefined,
+    display: props.Visible === false ? 'none' : undefined,
+    ...fontCss(props.Font as FontValue | null),
+  }
+}
+
+/** 去掉助记符：WinForms 里 "用户名称(&U)" 显示为 "用户名称(U)"，"&&" 显示为 "&" */
+export function displayText(text: unknown): string {
+  return String(text ?? '').replace(/&(&?)/g, (_, amp) => amp)
+}