feat(console): 网格线标签改3字、开关改文字药丸按钮(背景网格)；HSL数字居中；照片网格线透明度滑杆(0-30%,默认8%,CSS变量驱动)

01_content/src/client/index.tsx

@@ -84,6 +84,8 @@ type ViewState = {
   consoleBgPhotoHsls?: Record<string, { h: number; s: number; l: number }>
   /** 照片背景上的网格线开关（默认开）*/
   consoleBgPhotoGrid?: boolean
+  /** 照片背景网格线透明度 %（0-30，默认 8）*/
+  consoleBgGridOpacity?: number
 }
 
 /** 卡片上报的项目元信息（协议 v2）。 */
@@ -327,6 +329,7 @@ function loadView(): ViewState {
       consoleBgGlowHsl: normHsl(p.consoleBgGlowHsl),
       consoleBgPhotoId: typeof p.consoleBgPhotoId === 'string' && p.consoleBgPhotoId ? p.consoleBgPhotoId : undefined,
       consoleBgPhotoGrid: p.consoleBgPhotoGrid !== false,
+      consoleBgGridOpacity: typeof p.consoleBgGridOpacity === 'number' && p.consoleBgGridOpacity >= 0 && p.consoleBgGridOpacity <= 30 ? Math.round(p.consoleBgGridOpacity) : undefined,
       consoleBgPhotoHsls: (() => {
         const src = p.consoleBgPhotoHsls
         if (!src || typeof src !== 'object') return undefined
@@ -1400,6 +1403,8 @@ function WorktableSection(props: any) {
         removePhoto: async (id: string) => { await photoStore.remove(id) },
         getPhotoGrid: () => viewRef.current.consoleBgPhotoGrid !== false,
         setPhotoGrid: (v: boolean) => persistView({ consoleBgPhotoGrid: v }),
+        getGridOpacity: () => viewRef.current.consoleBgGridOpacity ?? 8,
+        setGridOpacity: (v: number) => persistView({ consoleBgGridOpacity: v }),
         getPlainHsl: () => viewRef.current.consoleBgPlainHsl ?? { h: -140, s: 31, l: 6 },
         setPlainHsl: (v: { h: number; s: number; l: number }) => persistView({ consoleBgPlainHsl: { ...v } }),
         getGlowHsl: () => viewRef.current.consoleBgGlowHsl ?? { h: 0, s: 100, l: 100 },

01_content/src/client/locales.ts

@@ -133,8 +133,10 @@ export const zh = {
   'console.bgPhotoUse': '使用此照片',
   'console.bgPhotoCurrent': '当前使用',
   'console.bgPhotoNone': '还没有上传过照片',
-  'console.bgPhotoDelete': '删除这张照片',
-  'console.bgGridLabel': '背景网格线',
+  'console.bgPhotoDelete': '删除这条媒体',
+  'console.bgGridLabel': '网格线',
+  'console.bgGridToggle': '背景网格',
+  'console.bgGridOpacity': '透明度',
   'console.shapeSquare': '方形',
   'console.shapeCircle': '圆形',
   'console.themeDark': '深色',
@@ -332,8 +334,10 @@ export const en = {
   'console.bgPhotoUse': 'Use this photo',
   'console.bgPhotoCurrent': 'In use',
   'console.bgPhotoNone': 'No photos yet',
-  'console.bgPhotoDelete': 'Delete this photo',
-  'console.bgGridLabel': 'Background grid',
+  'console.bgPhotoDelete': 'Delete this media',
+  'console.bgGridLabel': 'Grid',
+  'console.bgGridToggle': 'Background grid',
+  'console.bgGridOpacity': 'Opacity',
   'console.shapeSquare': 'Square',
   'console.shapeCircle': 'Circle',
   'console.themeDark': 'Dark',

01_content/src/client/split.tsx

@@ -255,6 +255,8 @@ type SplitEnv = {
     removePhoto: (id: string) => Promise<void>
     getPhotoGrid: () => boolean
     setPhotoGrid: (v: boolean) => void
+    getGridOpacity: () => number
+    setGridOpacity: (v: number) => void
     getPlainHsl: () => { h: number; s: number; l: number }
     setPlainHsl: (v: { h: number; s: number; l: number }) => void
     getGlowHsl: () => { h: number; s: number; l: number }
@@ -1092,6 +1094,7 @@ function ConsolePane() {
   const [photoList, setPhotoList] = useState<{ id: string; kind: 'photo' | 'video'; url: string }[]>([])
   const [bgVideo, setBgVideo] = useState<string>('')
   const [photoGrid, setPhotoGridState] = useState<boolean>(() => splitEnv?.console?.getPhotoGrid?.() ?? true)
+  const [gridOpacity, setGridOpacityState] = useState<number>(() => splitEnv?.console?.getGridOpacity?.() ?? 8)
   const photoUrlRef = useRef<string>('')
   const [openMenu, setOpenMenu] = useState<string | null>(null)
   const [bgEdit, setBgEdit] = useState<'plain' | 'glow' | 'photo' | null>(null)
@@ -1177,6 +1180,11 @@ function ConsolePane() {
     setPhotoGridState(next)
     splitEnv?.console?.setPhotoGrid?.(next)
   }
+  const onGridOpacity = (n: number) => {
+    const v = Math.min(Math.max(Math.round(n), 0), 30)
+    setGridOpacityState(v)
+    splitEnv?.console?.setGridOpacity?.(v)
+  }
   /** 在媒体库中选中某条 */
   const selectPhoto = (p: { id: string; kind: 'photo' | 'video'; url: string }) => {
     setPhotoIdLocal(p.id)
@@ -1320,7 +1328,7 @@ function ConsolePane() {
     { mode: 'system', key: 'console.themeSystem' },
   ]
   return (
-    <div className="dsh-wt_console" data-wt-theme={resolvedTheme} data-wt-shape={shape} data-wt-bg={bg} data-wt-grid={bg === 'photo' && !photoGrid ? 'off' : 'on'} style={bg === 'plain' ? { ['--wt-bg' as any]: 'hsl(' + plainHsl.h + ', ' + plainHsl.s + '%, ' + plainHsl.l + '%)' } : undefined}>
+    <div className="dsh-wt_console" data-wt-theme={resolvedTheme} data-wt-shape={shape} data-wt-bg={bg} data-wt-grid={bg === 'photo' && !photoGrid ? 'off' : 'on'} style={bg === 'plain' || bg === 'photo' ? { ...(bg === 'plain' ? { ['--wt-bg' as any]: 'hsl(' + plainHsl.h + ', ' + plainHsl.s + '%, ' + plainHsl.l + '%)' } : {}), ...(bg === 'photo' ? { ['--wt-gridPhoto' as any]: 'rgba(255,255,255,' + (gridOpacity / 100) + ')' } : {}) } : undefined}>
       <span className="dsh-wt_consoleBg" aria-hidden style={bg === 'photo' && bgPhoto ? { backgroundImage: 'url("' + bgPhoto + '")', backgroundSize: 'cover', backgroundPosition: 'center', ...(photoHsl.h !== 0 || photoHsl.s !== 100 || photoHsl.l !== 100 ? { filter: 'hue-rotate(' + photoHsl.h + 'deg) saturate(' + photoHsl.s + '%) brightness(' + photoHsl.l + '%)' } : {}) } : bg === 'glow' && (glowHsl.h !== 0 || glowHsl.s !== 100 || glowHsl.l !== 100) ? { filter: 'hue-rotate(' + glowHsl.h + 'deg) saturate(' + glowHsl.s + '%) brightness(' + glowHsl.l + '%)' } : undefined}>
         {bg === 'photo' && bgVideo && <video className="dsh-wt_consoleVid" src={bgVideo} autoPlay muted loop playsInline style={photoHsl.h !== 0 || photoHsl.s !== 100 || photoHsl.l !== 100 ? { filter: 'hue-rotate(' + photoHsl.h + 'deg) saturate(' + photoHsl.s + '%) brightness(' + photoHsl.l + '%)' } : undefined} />}
         {bg === 'glow' && (<><i className="dsh-wt_blob dsh-wt_blob1" /><i className="dsh-wt_blob dsh-wt_blob2" /><i className="dsh-wt_blob dsh-wt_blob3" /><i className="dsh-wt_blob dsh-wt_blob4" /></>)}</span>
@@ -1421,9 +1429,14 @@ function ConsolePane() {
                     <button type="button" className="dsh-wt_dropItem" onClick={pickPhotoFile}><svg width="13" height="13" viewBox="0 0 16 16" aria-hidden><rect x="2.5" y="3.5" width="11" height="9" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.2" /><circle cx="5.8" cy="6.6" r="1.1" fill="currentColor" /><path d="M3.2 11.2l2.8-2.8 2.2 2.2 1.8-1.8 2.8 2.4" fill="none" stroke="currentColor" strokeWidth="1.2" /></svg>{T('console.bgPhoto')}</button>
                     <div className="dsh-wt_gridHalf">
                       <span className="dsh-wt_gridLabel">{T('console.bgGridLabel')}</span>
-                      <button type="button" className={'dsh-wt_switch' + (photoGrid ? ' dsh-wt_switchOn' : '')} aria-pressed={photoGrid} aria-label={T('console.bgGridLabel')} onClick={togglePhotoGrid}><span className="dsh-wt_switchKnob" /></button>
+                      <button type="button" className={'dsh-wt_gridToggle' + (photoGrid ? ' dsh-wt_gridToggleOn' : '')} aria-pressed={photoGrid} aria-label={T('console.bgGridLabel')} onClick={togglePhotoGrid}>{T('console.bgGridToggle')}</button>
                     </div>
                   </div>
+                  <div className="dsh-wt_dropRow">
+                    <span className="dsh-wt_gridLabel">{T('console.bgGridOpacity')}</span>
+                    <input className="dsh-wt_hslSlider" type="range" min={0} max={30} step={1} value={gridOpacity} onChange={(e) => onGridOpacity(Number(e.target.value))} />
+                    <span className="dsh-wt_gridOpacityVal">{gridOpacity}%</span>
+                  </div>
                   {photoList.length > 0 ? (
                     photoList.slice(0, 4).map((p) => (
                       <div key={p.id} className={'dsh-wt_dropRow dsh-wt_photoRow' + (photoId === p.id ? ' dsh-wt_photoRowOn' : '')} onClick={() => selectPhoto(p)}>

01_content/src/client/styles.ts

@@ -435,13 +435,17 @@ export const css = xtermCss + '\n' + [
   '.dsh-wt_dropWide{width:212px}',
   '.dsh-wt_dropTrash{flex:none;width:22px;height:22px;margin-right:2px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--wt-text3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}',
   '.dsh-wt_dropTrash:hover{background:rgba(244,63,94,.16);color:#f87171}',
-  '.dsh-wt_gridLabel{flex:1;min-width:0;font-size:11px;line-height:16px;color:var(--wt-text2);padding:4px}',
+  '.dsh-wt_gridLabel{flex:1;min-width:0;font-size:12px;line-height:17px;color:var(--wt-text2);padding:4px}',
+  '.dsh-wt_gridToggle{flex:none;padding:4px 10px;border:none;border-radius:7px;background:transparent;color:var(--wt-text2);font:inherit;font-size:12px;line-height:17px;cursor:pointer;transition:background .15s ease,color .15s ease;opacity:.8}',
+  '.dsh-wt_gridToggle:hover{background:var(--wt-chip);opacity:1}',
+  '.dsh-wt_gridToggleOn{background:var(--wt-chip);color:var(--wt-text);font-weight:600;opacity:1}',
+  '.dsh-wt_gridOpacityVal{flex:none;width:30px;font-size:10px;color:var(--wt-text2);text-align:right;font-variant-numeric:tabular-nums}',
   '.dsh-wt_switch{flex:none;position:relative;width:30px;height:17px;margin-right:4px;padding:0;border:none;border-radius:999px;background:rgba(255,255,255,.14);cursor:pointer;transition:background .15s ease}',
   '.dsh-wt_switchOn{background:#4f8ef7}',
   '.dsh-wt_switchKnob{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .18s cubic-bezier(.22,.61,.36,1)}',
   '.dsh-wt_switchOn .dsh-wt_switchKnob{left:15px}',
   '.dsh-wt_console[data-wt-theme=light] .dsh-wt_switch{background:rgba(27,31,36,.15)}',
-  '.dsh-wt_console[data-wt-bg=photo][data-wt-grid=on] .dsh-wt_consoleBg::after{background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:30px 30px}',
+  '.dsh-wt_console[data-wt-bg=photo][data-wt-grid=on] .dsh-wt_consoleBg::after{background-image:linear-gradient(var(--wt-gridPhoto,rgba(255,255,255,.08)) 1px,transparent 1px),linear-gradient(90deg,var(--wt-gridPhoto,rgba(255,255,255,.08)) 1px,transparent 1px);background-size:30px 30px}',
   '.dsh-wt_console[data-wt-bg=photo][data-wt-grid=off] .dsh-wt_consoleBg::after{display:none}',
   '.dsh-wt_hslHead{display:flex;align-items:center;gap:4px;padding:2px 4px 4px}',
   '.dsh-wt_hslBack{flex:none;width:20px;height:20px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--wt-text3);cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}',
@@ -450,7 +454,7 @@ export const css = xtermCss + '\n' + [
   '.dsh-wt_hslRow{display:flex;align-items:center;gap:4px;padding:2px 3px;width:100%;box-sizing:border-box}',
   '.dsh-wt_hslLabel{flex:none;width:10px;font-size:9px;font-weight:600;color:var(--wt-text3);text-align:center}',
   '.dsh-wt_hslSlider{flex:1;min-width:0;height:14px;accent-color:#4f8ef7;cursor:pointer}',
-  '.dsh-wt_hslInput{flex:none;width:42px;height:20px;padding:0 4px;border:1px solid var(--wt-border);border-radius:6px;background:var(--wt-chip);color:var(--wt-text2);font:inherit;font-size:10px;text-align:right;outline:none;box-sizing:border-box;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}',
+  '.dsh-wt_hslInput{flex:none;width:42px;height:20px;padding:0 4px;border:1px solid var(--wt-border);border-radius:6px;background:var(--wt-chip);color:var(--wt-text2);font:inherit;font-size:10px;text-align:center;outline:none;box-sizing:border-box;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}',
   '.dsh-wt_hslInput::-webkit-outer-spin-button,.dsh-wt_hslInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}',
   '.dsh-wt_hslInput:focus{border-color:#4f8ef7;color:var(--wt-text)}',
   '.dsh-wt_hslReset{margin:4px 4px 2px;padding:5px 9px;border:none;border-radius:7px;background:var(--wt-chip);color:var(--wt-text2);font:inherit;font-size:12px;line-height:17px;cursor:pointer;text-align:center}',