素材图片在高分辨率屏幕上清晰显示；项目资源对话框点整行勾选

- 素材库每张图另外渲染一份两倍尺寸（name.2x.png），build-gallery.sh 把图片编号（原尺寸 PNG 的
  SHA-1，和运行器给图片的编号相同）和两倍图写进 index.json
- 网页认出素材图片（按编号或素材网址），图片框用 srcset、背景用 image-set，系统缩放 150%、200%
  的屏幕上不再发虚；学生程序读到的仍是原尺寸图片，宽高、评分都不变
- 素材清单 index.json 每次向服务器确认（不再缓存一小时），部署新素材后立即生效
- 项目资源对话框：点整行就能勾选（原来只能点复选框，"试听"不会勾选）；缩略图用灰色棋盘格底，
  透明背景上的白色图片（ico_title）也看得见

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

web/src/winforms/ControlView.vue

@@ -4,7 +4,7 @@
 import { computed, inject, provide, ref, type CSSProperties } from 'vue'
 import type { ControlNode, UserAction } from '@iot/shared'
 import { AMBIENT_BACK_COLOR, AMBIENT_BACK_TYPES, boxCss, DEFAULT_BACK_COLOR, displayText } from './format'
-import { backgroundCss, RUN_IMAGES, type ImageValue } from './images'
+import { backgroundCss, imageSources, RUN_IMAGES, srcset, type ImageValue } from './images'
 import ChartControl from './ChartControl.vue'
 import DataGridViewControl from './DataGridViewControl.vue'
 import DateTimePickerControl from './DateTimePickerControl.vue'
@@ -72,7 +72,7 @@ function selectItem(index: number) {
 
 // PictureBox：按 SizeMode 摆放图片
 const image = computed(() => p.value.Image as ImageValue | null | undefined)
-const imageUrl = computed(() => (image.value ? image.value.url ?? runImages.get(image.value.key) : undefined))
+const imageSrc = computed(() => imageSources(image.value, runImages))
 // 设计器预览里不知道素材的尺寸，原样大小显示时让浏览器按图片本身的大小
 const naturalSize = computed(() => (image.value?.width ? { width: `${image.value.width}px`, height: `${image.value.height}px` } : {}))
 const imageStyle = computed((): CSSProperties => {
@@ -182,7 +182,7 @@ const itemHeight = computed(() => `${(p.value.ItemHeight as number | undefined)
     @pointerdown="mouse('mouseDown', $event)"
     @pointerup="mouse('mouseUp', $event)"
   >
-    <img v-if="imageUrl" :src="imageUrl" :style="imageStyle" alt="" draggable="false" />
+    <img v-if="imageSrc" :src="imageSrc.src" :srcset="srcset(imageSrc)" :style="imageStyle" alt="" draggable="false" />
     <ControlView v-for="child in childrenTopLast" :key="child.id" :node="child" :act="props.act" />
   </div>
 

web/src/winforms/images.ts

@@ -1,6 +1,7 @@
 // 运行时图片：运行器发来的图片数据由 RunSession 保存成 blob 网址，控件属性里只带图片编号。
 // 运行区 provide，ControlView inject；设计器预览没有运行时图片，取到空表。
 import type { CSSProperties, InjectionKey } from 'vue'
+import { gallery } from '../designer/resources'
 
 export const RUN_IMAGES: InjectionKey<ReadonlyMap<string, string>> = Symbol('runImages')
 
@@ -13,12 +14,31 @@ export interface ImageValue {
   url?: string
 }
 
+/**
+ * 图片的网址。素材库里的图片（按编号或素材网址认出来）另有两倍尺寸的版本，
+ * 高分辨率屏幕（系统缩放 150%、200%）上用它，不然浏览器放大原图会发虚；程序读到的宽高不变。
+ */
+export function imageSources(value: unknown, images: ReadonlyMap<string, string>): { src: string; hidpi?: string } | undefined {
+  const image = value as ImageValue | null | undefined
+  if (!image) return undefined
+  const item = gallery.value.find((g) => (image.key && g.key === image.key) || (image.url && image.url === `/resources/${g.file}`))
+  if (item?.hidpi) return { src: `/resources/${item.file}`, hidpi: `/resources/${item.hidpi}` }
+  const src = image.url ?? images.get(image.key)
+  return src ? { src } : undefined
+}
+
+/** <img> 的 srcset：有两倍图时浏览器按屏幕分辨率选 */
+export const srcset = (sources: { src: string; hidpi?: string } | undefined) =>
+  sources?.hidpi ? `${sources.src} 1x, ${sources.hidpi} 2x` : undefined
+
 /** 背景图片的 CSS：BackgroundImageLayout 为 Tile（默认，平铺）、None（左上角一张）、Center、Stretch、Zoom */
 export function backgroundCss(value: unknown, layout: unknown, images: ReadonlyMap<string, string>): CSSProperties {
-  const image = value as ImageValue | null | undefined
-  const url = image ? image.url ?? images.get(image.key) : undefined
-  if (!url) return {}
-  const base = { backgroundImage: `url("${url}")` }
+  const sources = imageSources(value, images)
+  if (!sources) return {}
+  // image-set 里的两倍图按 2x 显示，平铺、居中、左上角时仍是原尺寸
+  const base: CSSProperties = {
+    backgroundImage: sources.hidpi ? `image-set(url("${sources.src}") 1x, url("${sources.hidpi}") 2x)` : `url("${sources.src}")`,
+  }
   switch (layout) {
     case 'None':
       return { ...base, backgroundRepeat: 'no-repeat', backgroundPosition: '0 0' }