feat(crop): follow VS Code theme

Author: Windsland52

docs/types/models/README.md

@@ -35,6 +35,8 @@
 
 Control 协议通过 `ControlHostState.saveDraw` 同步识别绘图落盘状态，并使用 `switch-save-draw` Toolkit target 请求切换；`shortcutTarget` 标识当前窗口是否持有全局快捷键目标租约，`activate-shortcuts` 用于取得该租约。
 
+Crop 协议的 `CropSettings` 仅同步用户可配置的裁剪交互和可视化参数；Canvas 背景色不属于协议设置，由 Webview 直接跟随 VS Code 编辑器主题。
+
 ### 2. 通用协议基类型
 
 `src/webview/base.ts` 定义：

docs/webview/models/README.md

@@ -39,6 +39,7 @@
 - **模板匹配**: 使用自定义模板进行图像匹配
 - **识别测试**: 运行 pipeline 识别测试
 - **可视化设置**: ROI 编辑、绿色蒙版、颜色阈值；识别详情为空时跳过绘制
+- **主题适配**: Canvas 背景始终跟随 VS Code 编辑器背景色，并使用主题边框界定可交互区域；不提供独立背景色配置
 
 ### 3. Launch Panel（启动面板）
 
@@ -70,6 +71,7 @@
 - 读取 VS Code CSS 自定义属性（`--vscode-*`）
 - 动态构建 Naive UI 主题覆盖
 - `MutationObserver` 监听主题变化
+- 将解析后的编辑器背景色暴露为响应式状态，供 Crop Canvas 跟随主题重绘
 
 ### 国际化
 

docs/webview/tech/README.md

@@ -101,10 +101,12 @@ Vite (vite.config.ts)
 
 ## Crop Canvas 渲染调度
 
-Crop Canvas 采用按需渲染：Vue reactive effect 跟踪 `draw()` 读取的图像、视口、选框、设置和识别结果等状态，状态变更后由 `requestAnimationFrame` 合并到下一浏览器帧绘制。画面静止时不重绘；仅获得焦点的轮廓选区虚线动画会连续请求帧。Webview 隐藏时取消待处理帧，恢复可见后主动补绘。
+Crop Canvas 采用按需渲染：Vue reactive effect 跟踪 `draw()` 读取的图像、视口、选框、设置、主题背景色和识别结果等状态，状态变更后由 `requestAnimationFrame` 合并到下一浏览器帧绘制。画面静止时不重绘；仅获得焦点的轮廓选区虚线动画会连续请求帧。Webview 隐藏时取消待处理帧，恢复可见后主动补绘。
 
 绿色蒙版直接以绿色像素保存在独立 Canvas 中，并通过 `triggerRef()` 通知主 Canvas 失效；主绘制流程直接叠加该 Canvas，避免每帧创建原图尺寸的临时 Canvas。切换图像时会释放旧蒙版及其历史记录。
 
+`theme.ts` 将 `--vscode-editor-background` 解析为 Canvas 可直接使用的颜色字符串，并通过 `editorBackgroundColor` ref 共享；主题变化时该 ref 更新并触发 Crop Canvas 重绘。用户不能为 Crop Canvas 单独配置背景色。
+
 ## 依赖关系
 
 ### 工作区依赖

pkgs/types/src/webview/crop.ts

@@ -2,7 +2,6 @@ import type { HostStateBase } from './base'
 
 export type CropSettings = {
   saveAddRoiInfo?: boolean
-  backgroundFill?: string
   selectFill?: string
   selectOpacity?: number
   selectOutlineOnly?: boolean

pkgs/webview/src/crop/App.vue

@@ -44,6 +44,9 @@ canvasSt.setup(canvasSizeEl, canvasEl)
                 position: 'absolute',
                 left: 0,
                 top: 0,
+                outline:
+                  '1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border, transparent))',
+                outlineOffset: '-1px',
                 cursor: controlSt.cursor.value
               }"
               @wheel.prevent="controlSt.onWheel"

pkgs/webview/src/crop/states/canvas.ts

@@ -10,6 +10,7 @@ import {
   watch
 } from 'vue'
 
+import { editorBackgroundColor } from '../../utils/theme'
 import { Box, Pos, Size, Viewport } from '../utils/2d'
 import * as controlSt from './control'
 import * as greenMaskSt from './greenMask'
@@ -48,7 +49,7 @@ export function useDrawStep(step: DrawStep) {
 export function draw(ctx: CanvasRenderingContext2D) {
   ctx.reset()
 
-  ctx.fillStyle = settingsSt.backgroundFill.eff
+  ctx.fillStyle = editorBackgroundColor.value
   ctx.fillRect(0, 0, ...size.value.flat())
 
   if (imageSt.element.value) {

pkgs/webview/src/crop/states/settings.ts

@@ -77,7 +77,6 @@ function useSetting<K extends keyof CropSettings>(
 }
 
 export const saveAddRoiInfo = useSetting('saveAddRoiInfo', false)
-export const backgroundFill = useSetting('backgroundFill', 'white', isColor)
 export const selectFill = useSetting('selectFill', 'wheat', isColor)
 export const selectOpacity = useSetting('selectOpacity', 0.3)
 export const selectOutlineOnly = useSetting('selectOutlineOnly', false)

pkgs/webview/src/crop/views/SettingsView.vue

@@ -17,11 +17,6 @@ import * as settingsSt from '../states/settings'
       :off="t('maa.crop.settings.without-roi')"
     ></settings-switch>
 
-    <settings-input
-      :inst="settingsSt.backgroundFill"
-      :title="t('maa.crop.settings.background-color')"
-      isColor
-    ></settings-input>
     <settings-input
       :inst="settingsSt.selectFill"
       :title="t('maa.crop.settings.select-color')"

pkgs/webview/src/utils/locale/locale.en.ts

@@ -139,7 +139,6 @@ export default {
   'maa.crop.settings.saving-file-with-roi': 'Add ROI in saved file name',
   'maa.crop.settings.with-roi': 'With ROI',
   'maa.crop.settings.without-roi': 'Without ROI',
-  'maa.crop.settings.background-color': 'Background color',
   'maa.crop.settings.select-color': 'Selected color',
   'maa.crop.settings.select-opacity': 'Selected opacity',
   'maa.crop.settings.select-outline-only': 'Outline only',

pkgs/webview/src/utils/locale/locale.zh-cn.ts

@@ -135,7 +135,6 @@ export default {
   'maa.crop.settings.saving-file-with-roi': '保存时文件名中附带ROI',
   'maa.crop.settings.with-roi': '附带ROI',
   'maa.crop.settings.without-roi': '不附带ROI',
-  'maa.crop.settings.background-color': '背景色',
   'maa.crop.settings.select-color': '选中色',
   'maa.crop.settings.select-opacity': '选中透明度',
   'maa.crop.settings.select-outline-only': '仅显示轮廓',