@wenbin_wb/dsh-bridge 2.10.3 → 2.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,802 +1,834 @@
1
- // 移动端适配样式(自 client/index.js 拆出的 ~800 行 CSS,T3.5)
2
- // 由 setupMobileExperience() 注入 <style id="dsh-bridge-mobile-styles">。
3
- // 注意:选择器硬编码了宿主构建产物的 CSS-module 哈希类名,宿主升级可能需要同步更新。
4
- export const MOBILE_STYLES_CSS = `
5
- /* DSH Bridge 隐藏 Tab 栏原生滚动条并保持平滑滑动 */
6
- .dsh-tabbar-container {
7
- scrollbar-width: none !important;
8
- -ms-overflow-style: none !important;
9
- }
10
- .dsh-tabbar-container::-webkit-scrollbar {
11
- display: none !important;
12
- width: 0 !important;
13
- height: 0 !important;
14
- }
15
-
16
- /* DSH Bridge 移动端自适应与触控交互增强样式 */
17
- :root {
18
- --dsh-mobile-header-h: 52px;
19
- --dsh-mobile-safe-top: env(safe-area-inset-top, 0px);
20
- --dsh-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
21
- }
22
-
23
- @media (max-width: 768px) {
24
- /* 1. 主框架为 Header 腾出顶部空间 */
25
- div[class*="_frame"] {
26
- display: flex !important;
27
- flex-direction: column !important;
28
- width: 100vw !important;
29
- height: 100dvh !important;
30
- margin: 0 !important;
31
- padding-top: var(--dsh-mobile-header-h) !important;
32
- position: relative !important;
33
- grid-template-columns: 1fr !important;
34
- overflow: hidden !important;
35
- box-sizing: border-box !important;
36
- }
37
-
38
- /* 2. 顶部原生导航条:100% 还原 DeepSeek App (左侧双横线,右侧(+),中间留白,无多余设置按钮) */
39
- .dsh-mobile-app-header {
40
- position: fixed !important;
41
- top: 0 !important;
42
- left: 0 !important;
43
- right: 0 !important;
44
- height: var(--dsh-mobile-header-h) !important;
45
- padding-top: var(--dsh-mobile-safe-top) !important;
46
- background: transparent !important;
47
- display: flex !important;
48
- align-items: center !important;
49
- justify-content: space-between !important;
50
- padding-left: 16px !important;
51
- padding-right: 16px !important;
52
- z-index: 9998 !important;
53
- box-sizing: border-box !important;
54
- user-select: none !important;
55
- pointer-events: none !important;
56
- }
57
-
58
- /* 左侧双横线按钮 (DeepSeek App 原生图标) */
59
- .dsh-header-menu-btn {
60
- width: 40px;
61
- height: 40px;
62
- border-radius: 50%;
63
- border: none;
64
- background: transparent;
65
- color: var(--dsw-alias-label-primary, #111827);
66
- display: inline-flex;
67
- align-items: center;
68
- justify-content: flex-start;
69
- cursor: pointer;
70
- padding: 0;
71
- transition: opacity 0.15s;
72
- pointer-events: auto !important;
73
- }
74
- .dsh-header-menu-btn:active {
75
- opacity: 0.6;
76
- }
77
-
78
- /* 右侧 (+) 新建会话按钮 (DeepSeek App 原生图标) */
79
- .dsh-header-new-btn {
80
- width: 40px;
81
- height: 40px;
82
- border-radius: 50%;
83
- border: none;
84
- background: transparent;
85
- color: var(--dsw-alias-label-primary, #111827);
86
- display: inline-flex;
87
- align-items: center;
88
- justify-content: flex-end;
89
- cursor: pointer;
90
- padding: 0;
91
- transition: opacity 0.15s;
92
- pointer-events: auto !important;
93
- }
94
- .dsh-header-new-btn:active {
95
- opacity: 0.6;
96
- }
97
-
98
- /* 中间动态会话标题 (单行居中打点截断,100% 还原原生 App 导航体验) */
99
- .dsh-mobile-header-title {
100
- flex: 1 1 auto !important;
101
- min-width: 0 !important;
102
- text-align: center !important;
103
- font-size: 15px !important;
104
- font-weight: 600 !important;
105
- color: var(--dsw-alias-label-primary, #111827) !important;
106
- overflow: hidden !important;
107
- text-overflow: ellipsis !important;
108
- white-space: nowrap !important;
109
- padding: 0 10px !important;
110
- user-select: none !important;
111
- pointer-events: none !important;
112
- letter-spacing: -0.2px !important;
113
- }
114
-
115
- /* 3. 中间主内容区与输入框 */
116
- div[class*="_centerCol"] {
117
- flex: 1 1 100% !important;
118
- width: 100% !important;
119
- min-width: 0 !important;
120
- max-width: 100% !important;
121
- display: flex !important;
122
- height: 100% !important;
123
- }
124
-
125
- div[class*="_detailsCol"],
126
- div[class*="toggleCluster"],
127
- div[class*="W-zNGW_toggleCluster"] {
128
- display: none !important;
129
- }
130
-
131
- /* 3.0 工作区 Workbench / 任务管理 / 多 Tab 栏移动端自适应适配 */
132
- body:not(.dsh-workbench-open) div[class*="nArs4W_panel"],
133
- body:not(.dsh-workbench-open) div[class*="workbench_panel"],
134
- body:not(.dsh-workbench-open) div[class*="workbenchPanel"],
135
- div[class*="nArs4W_panel"][class*="panelHidden"],
136
- div[class*="workbench_panel"][class*="panelHidden"],
137
- div[class*="workbenchPanel"][class*="panelHidden"],
138
- div[class*="panelHidden"] {
139
- display: none !important;
140
- visibility: hidden !important;
141
- pointer-events: none !important;
142
- width: 0 !important;
143
- height: 0 !important;
144
- max-height: 0 !important;
145
- z-index: -1 !important;
146
- opacity: 0 !important;
147
- transform: translateX(105%) !important;
148
- }
149
-
150
- body.dsh-workbench-open div[class*="nArs4W_panel"]:not([class*="panelHidden"]),
151
- body.dsh-workbench-open div[class*="workbench_panel"]:not([class*="panelHidden"]),
152
- body.dsh-workbench-open div[class*="workbenchPanel"]:not([class*="panelHidden"]) {
153
- display: flex !important;
154
- visibility: visible !important;
155
- pointer-events: auto !important;
156
- top: var(--dsh-mobile-header-h, 52px) !important;
157
- height: calc(100dvh - var(--dsh-mobile-header-h, 52px)) !important;
158
- max-height: calc(100dvh - var(--dsh-mobile-header-h, 52px)) !important;
159
- z-index: 50 !important;
160
- box-sizing: border-box !important;
161
- background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
162
- transform: none !important;
163
- opacity: 1 !important;
164
- }
165
-
166
- /* Tab 栏:横向滑动手势 + 干净的底部边框,杜绝与顶部移动端 Header 重叠 */
167
- div[class*="nArs4W_tabBar"],
168
- div[class*="workbench_tabBar"],
169
- div[class*="tabBar"] {
170
- min-height: 40px !important;
171
- height: 40px !important;
172
- background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
173
- border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
174
- display: flex !important;
175
- align-items: center !important;
176
- justify-content: space-between !important;
177
- padding: 0 8px !important;
178
- gap: 6px !important;
179
- overflow: visible !important;
180
- box-sizing: border-box !important;
181
- }
182
-
183
- div[class*="nArs4W_tabList"],
184
- div[class*="tabList"] {
185
- display: flex !important;
186
- align-items: center !important;
187
- gap: 6px !important;
188
- flex: 1 1 auto !important;
189
- min-width: 0 !important;
190
- overflow-x: auto !important;
191
- scrollbar-width: none !important;
192
- -webkit-overflow-scrolling: touch !important;
193
- }
194
- div[class*="nArs4W_tabList"]::-webkit-scrollbar,
195
- div[class*="tabList"]::-webkit-scrollbar {
196
- display: none !important;
197
- }
198
-
199
- /* 单个 Tab 胶囊化,文字超长自动打点,防止 Tab 互相挤压 */
200
- div[class*="nArs4W_tab"],
201
- div[class*="workbench_tab"] {
202
- flex: 0 0 auto !important;
203
- max-width: 170px !important;
204
- min-width: 70px !important;
205
- height: 30px !important;
206
- padding: 0 8px 0 10px !important;
207
- border-radius: 6px !important;
208
- font-size: 12.5px !important;
209
- display: inline-flex !important;
210
- align-items: center !important;
211
- justify-content: space-between !important;
212
- gap: 6px !important;
213
- background: var(--dsw-alias-bg-layer-2, #f3f4f6) !important;
214
- color: var(--dsw-alias-label-secondary, #6b7280) !important;
215
- cursor: pointer !important;
216
- user-select: none !important;
217
- box-sizing: border-box !important;
218
- }
219
-
220
- div[class*="nArs4W_tabActive"],
221
- div[class*="workbench_tabActive"] {
222
- background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
223
- color: var(--dsw-alias-label-primary, #111827) !important;
224
- font-weight: 600 !important;
225
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
226
- }
227
-
228
- span[class*="nArs4W_tabTitle"],
229
- span[class*="tabTitle"] {
230
- overflow: hidden !important;
231
- text-overflow: ellipsis !important;
232
- white-space: nowrap !important;
233
- flex: 1 1 auto !important;
234
- }
235
-
236
- button[class*="nArs4W_tabClose"],
237
- button[class*="tabClose"] {
238
- width: 18px !important;
239
- height: 18px !important;
240
- border-radius: 50% !important;
241
- display: inline-flex !important;
242
- align-items: center !important;
243
- justify-content: center !important;
244
- flex-shrink: 0 !important;
245
- opacity: 0.6 !important;
246
- padding: 0 !important;
247
- }
248
-
249
- button[class*="nArs4W_tabBarPlus"],
250
- button[class*="tabBarPlus"] {
251
- width: 28px !important;
252
- height: 28px !important;
253
- border-radius: 50% !important;
254
- display: inline-flex !important;
255
- align-items: center !important;
256
- justify-content: center !important;
257
- flex-shrink: 0 !important;
258
- }
259
-
260
- /* 移动端面板右上角“返回对话 / ✕ 收起”按钮:常驻右侧,醒目且易触达 */
261
- .dsh-mobile-panel-close-btn {
262
- margin-left: 8px !important;
263
- flex: 0 0 auto !important;
264
- height: 28px !important;
265
- padding: 0 10px !important;
266
- border-radius: 14px !important;
267
- font-size: 12px !important;
268
- font-weight: 600 !important;
269
- background: #2563eb !important;
270
- color: #ffffff !important;
271
- border: none !important;
272
- display: inline-flex !important;
273
- align-items: center !important;
274
- justify-content: center !important;
275
- gap: 4px !important;
276
- cursor: pointer !important;
277
- user-select: none !important;
278
- box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
279
- white-space: nowrap !important;
280
- transition: transform 0.1s, opacity 0.15s !important;
281
- z-index: 10 !important;
282
- }
283
- .dsh-mobile-panel-close-btn:active {
284
- transform: scale(0.95) !important;
285
- opacity: 0.85 !important;
286
- }
287
-
288
- /* 3.1 会话对话头部顶栏:移动端防挤压与空间释放优化(严格排除 .dsh-mobile-app-header) */
289
- div[class*="_centerCol"] header,
290
- header[class*="wSkVaW_header"] {
291
- padding: 4px 16px 2px 16px !important;
292
- position: relative !important;
293
- overflow: visible !important;
294
- }
295
-
296
- div[class*="wSkVaW_titleRow"],
297
- div[class*="titleRow"] {
298
- display: flex !important;
299
- flex-direction: row !important;
300
- align-items: center !important;
301
- justify-content: space-between !important;
302
- gap: 8px !important;
303
- min-height: 32px !important;
304
- width: 100% !important;
305
- box-sizing: border-box !important;
306
- }
307
-
308
- /* 移动端将原有嵌入在内容区的长面包屑标题隐藏(已统一提升至顶部导航栏正中),彻底释放第二行空间 */
309
- nav[class*="wSkVaW_crumbs"],
310
- nav[class*="crumbs"],
311
- div[class*="wSkVaW_crumbs"],
312
- div[class*="crumbs"],
313
- [class*="wSkVaW_crumbs"] {
314
- display: none !important;
315
- }
316
-
317
- /* 子代理/智能体模式胶囊 (Actions):紧凑圆角胶囊 */
318
- div[class*="wSkVaW_headerActions"],
319
- div[class*="headerActions"] {
320
- flex: 0 0 auto !important;
321
- display: inline-flex !important;
322
- align-items: center !important;
323
- gap: 4px !important;
324
- margin-left: 0 !important;
325
- }
326
-
327
- button[class*="h8S2Va_trigger"],
328
- button[class*="subagent"] {
329
- min-height: 26px !important;
330
- height: 26px !important;
331
- padding: 2px 8px !important;
332
- font-size: 11.5px !important;
333
- line-height: 16px !important;
334
- border-radius: 13px !important;
335
- background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04)) !important;
336
- white-space: nowrap !important;
337
- flex-shrink: 0 !important;
338
- }
339
-
340
- /* Session Log 导出下载按钮 (Utilities):在移动端极简为 28px 圆形纯图标按钮,隐藏长文本,极大释放顶部空间 */
341
- div[class*="wSkVaW_headerUtilities"],
342
- div[class*="headerUtilities"] {
343
- flex: 0 0 auto !important;
344
- margin-left: 4px !important;
345
- display: inline-flex !important;
346
- align-items: center !important;
347
- }
348
-
349
- button[class*="nL4_yW_sessionLogButton"],
350
- button[class*="sessionLogButton"] {
351
- min-width: 28px !important;
352
- width: 28px !important;
353
- height: 28px !important;
354
- padding: 0 !important;
355
- border-radius: 50% !important;
356
- display: inline-flex !important;
357
- align-items: center !important;
358
- justify-content: center !important;
359
- flex-shrink: 0 !important;
360
- border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1)) !important;
361
- background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.03)) !important;
362
- color: var(--dsw-alias-label-secondary, #6b7280) !important;
363
- margin-left: 0 !important;
364
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
365
- }
366
-
367
- button[class*="nL4_yW_sessionLogButton"]:hover:not(:disabled),
368
- button[class*="sessionLogButton"]:hover:not(:disabled) {
369
- background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06)) !important;
370
- color: var(--dsw-alias-label-primary, #111827) !important;
371
- }
372
-
373
- button[class*="nL4_yW_sessionLogButton"] span,
374
- button[class*="sessionLogButton"] span {
375
- display: none !important;
376
- }
377
-
378
- button[class*="nL4_yW_sessionLogButton"] svg,
379
- button[class*="sessionLogButton"] svg {
380
- width: 13px !important;
381
- height: 13px !important;
382
- margin: 0 !important;
383
- }
384
-
385
- /* 子代理展开菜单在移动端右对齐与宽度自适应 */
386
- div[class*="h8S2Va_menu"] {
387
- max-width: calc(100vw - 32px) !important;
388
- left: auto !important;
389
- right: 0 !important;
390
- }
391
-
392
- /* 输入框底座:DeepSeek App 居中及底部固定 */
393
- div[class*="wSkVaW_scrollBody"] {
394
- padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
395
- }
396
-
397
- /* 输入卡片:DeepSeek App 圆角大胶囊造型 */
398
- div[class*="uV2eYG_card"] {
399
- border-radius: 26px !important;
400
- padding: 14px 16px 12px !important;
401
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
402
- border: 1px solid rgba(0, 0, 0, 0.07) !important;
403
- background: var(--dsw-alias-bg-layer-2, #f4f4f7) !important;
404
- }
405
-
406
- /* 输入框底部工具栏:弹性自适应,彻底杜绝权限选择器(Full access)与模型选择器重叠碰撞 */
407
- div[class*="uV2eYG_row"] {
408
- display: flex !important;
409
- align-items: center !important;
410
- justify-content: space-between !important;
411
- gap: 6px !important;
412
- width: 100% !important;
413
- padding: 2px 2px 4px !important;
414
- box-sizing: border-box !important;
415
- }
416
-
417
- div[class*="uV2eYG_tools"] {
418
- display: flex !important;
419
- align-items: center !important;
420
- gap: 6px !important;
421
- flex: 0 0 auto !important;
422
- min-width: 0 !important;
423
- }
424
-
425
- div[class*="uV2eYG_modes"] {
426
- display: flex !important;
427
- align-items: center !important;
428
- gap: 4px !important;
429
- flex: 0 0 auto !important;
430
- min-width: 0 !important;
431
- }
432
-
433
- button[class*="Sh0Q9G_trigger"] {
434
- flex: 0 0 auto !important;
435
- min-width: 0 !important;
436
- }
437
-
438
- div[class*="uV2eYG_trailing"] {
439
- display: flex !important;
440
- align-items: center !important;
441
- justify-content: flex-end !important;
442
- gap: 6px !important;
443
- flex: 1 1 auto !important;
444
- min-width: 0 !important;
445
- }
446
-
447
- div[class*="_7KE1Ra_root"] {
448
- flex: 0 1 auto !important;
449
- min-width: 0 !important;
450
- max-width: 180px !important;
451
- }
452
-
453
- button[class*="_7KE1Ra_trigger"] {
454
- max-width: 100% !important;
455
- min-width: 0 !important;
456
- flex: 1 1 auto !important;
457
- padding: 0 4px 0 6px !important;
458
- }
459
-
460
- span[class*="_7KE1Ra_triggerLabel"] {
461
- overflow: hidden !important;
462
- text-overflow: ellipsis !important;
463
- white-space: nowrap !important;
464
- min-width: 0 !important;
465
- }
466
-
467
- /* 4. 原生侧边栏抽屉化 (Drawer) */
468
- div[class*="_sidebarCol"] {
469
- position: fixed !important;
470
- left: 0 !important;
471
- top: 0 !important;
472
- bottom: 0 !important;
473
- height: 100dvh !important;
474
- width: 290px !important;
475
- max-width: 82vw !important;
476
- z-index: 10000 !important;
477
- background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
478
- transform: translateX(-105%);
479
- transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
480
- overflow-y: auto !important;
481
- border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
482
- pointer-events: auto !important;
483
- }
484
- body.dsh-drawer-open div[class*="_sidebarCol"] {
485
- transform: translateX(0) !important;
486
- box-shadow: 4px 0 28px rgba(0, 0, 0, 0.25) !important;
487
- pointer-events: auto !important;
488
- }
489
-
490
- /* 抽屉内部:强制 100% 宽度,无论内部状态如何均正常展开并展示 DSH 自带的顶部收起侧边栏图标 */
491
- body.dsh-drawer-open div[class*="hHd-Xa_root"] {
492
- width: 100% !important;
493
- max-width: 100% !important;
494
- min-width: 100% !important;
495
- display: flex !important;
496
- flex-direction: column !important;
497
- }
498
- body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] div[class*="hHd-Xa_regionArea"],
499
- body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] button[class*="hHd-Xa_newSession"],
500
- body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] div[class*="qDHVXG_root"] {
501
- display: flex !important;
502
- visibility: visible !important;
503
- }
504
- div[class*="hHd-Xa_logoRow"] {
505
- display: flex !important;
506
- align-items: center !important;
507
- justify-content: space-between !important;
508
- width: 100% !important;
509
- padding: 10px 14px 6px 14px !important;
510
- box-sizing: border-box !important;
511
- }
512
- div[class*="hHd-Xa_logoRow"] button[class*="hHd-Xa_toggle"] {
513
- display: inline-flex !important;
514
- align-items: center !important;
515
- justify-content: center !important;
516
- width: 32px !important;
517
- height: 32px !important;
518
- border-radius: 8px !important;
519
- color: var(--dsw-alias-label-secondary, #6b7280) !important;
520
- background: transparent !important;
521
- border: none !important;
522
- cursor: pointer !important;
523
- margin-left: auto !important;
524
- transition: background 0.15s, color 0.15s !important;
525
- }
526
- div[class*="hHd-Xa_logoRow"] button[class*="hHd-Xa_toggle"]:active {
527
- background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.06)) !important;
528
- color: var(--dsw-alias-label-primary, #111827) !important;
529
- }
530
-
531
- /* 设置弹窗打开时解除抽屉隐藏限制 */
532
- div[class*="_sidebarCol"]:has(div[class*="VOzbGW_overlay"]) {
533
- transform: none !important;
534
- width: 100vw !important;
535
- max-width: 100vw !important;
536
- background: transparent !important;
537
- box-shadow: none !important;
538
- pointer-events: none !important;
539
- }
540
-
541
- /* 5. 半透明背景遮罩 */
542
- .dsh-mobile-backdrop {
543
- position: fixed;
544
- inset: 0;
545
- background: rgba(0, 0, 0, 0.4);
546
- z-index: 9999;
547
- display: none !important;
548
- }
549
- body.dsh-drawer-open .dsh-mobile-backdrop {
550
- display: block !important;
551
- pointer-events: auto !important;
552
- }
553
-
554
- /* 6. 设置中心全自适应适配 */
555
- div[class*="VOzbGW_overlay"] {
556
- position: fixed !important;
557
- inset: 0 !important;
558
- width: 100vw !important;
559
- height: 100dvh !important;
560
- display: flex !important;
561
- align-items: center !important;
562
- justify-content: center !important;
563
- background: rgba(0, 0, 0, 0.45) !important;
564
- backdrop-filter: blur(4px) !important;
565
- -webkit-backdrop-filter: blur(4px) !important;
566
- z-index: 10002 !important;
567
- padding: 10px !important;
568
- box-sizing: border-box !important;
569
- pointer-events: auto !important;
570
- }
571
- div[class*="VOzbGW_panel"] {
572
- width: 100% !important;
573
- max-width: 100% !important;
574
- height: 92dvh !important;
575
- max-height: 92dvh !important;
576
- display: flex !important;
577
- flex-direction: row !important;
578
- border-radius: 18px !important;
579
- overflow: hidden !important;
580
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
581
- background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
582
- }
583
- nav[class*="VOzbGW_nav"] {
584
- width: 78px !important;
585
- min-width: 78px !important;
586
- max-width: 78px !important;
587
- padding: 10px 4px !important;
588
- box-sizing: border-box !important;
589
- border-right: 1px solid var(--dsw-alias-border-l2, #e5e7eb) !important;
590
- display: flex !important;
591
- flex-direction: column !important;
592
- gap: 6px !important;
593
- overflow-y: auto !important;
594
- }
595
- nav[class*="VOzbGW_nav"] button[class*="VOzbGW_navCell"],
596
- button[class*="VOzbGW_navCell"] {
597
- padding: 8px 2px !important;
598
- display: flex !important;
599
- flex-direction: column !important;
600
- align-items: center !important;
601
- justify-content: center !important;
602
- text-align: center !important;
603
- height: auto !important;
604
- min-height: 48px !important;
605
- gap: 4px !important;
606
- border-radius: 10px !important;
607
- }
608
- span[class*="VOzbGW_navLabel"] {
609
- font-size: 10.5px !important;
610
- line-height: 1.2 !important;
611
- white-space: normal !important;
612
- word-break: break-all !important;
613
- text-align: center !important;
614
- }
615
- div[class*="VOzbGW_content"] {
616
- flex: 1 1 auto !important;
617
- min-width: 0 !important;
618
- width: calc(100% - 78px) !important;
619
- max-width: calc(100% - 78px) !important;
620
- display: flex !important;
621
- flex-direction: column !important;
622
- overflow: hidden !important;
623
- }
624
- div[class*="VOzbGW_options"] {
625
- flex: 1 1 auto !important;
626
- width: 100% !important;
627
- max-width: 100% !important;
628
- box-sizing: border-box !important;
629
- padding: 0 14px 20px !important;
630
- overflow-x: hidden !important;
631
- overflow-y: auto !important;
632
- -webkit-overflow-scrolling: touch !important;
633
- }
634
-
635
- /* 设置中心选项行手机自适应(垂直流式,防文字单字折行) */
636
- div[class*="VOzbGW_options"] div[class*="_row"] {
637
- display: flex !important;
638
- flex-direction: column !important;
639
- align-items: stretch !important;
640
- gap: 8px !important;
641
- width: 100% !important;
642
- padding: 12px 0 !important;
643
- box-sizing: border-box !important;
644
- }
645
- div[class*="VOzbGW_options"] div[class*="_rowText"] {
646
- width: 100% !important;
647
- max-width: 100% !important;
648
- }
649
- div[class*="VOzbGW_options"] button[class*="_selector"],
650
- div[class*="VOzbGW_options"] select,
651
- div[class*="VOzbGW_options"] input {
652
- width: 100% !important;
653
- max-width: 100% !important;
654
- box-sizing: border-box !important;
655
- }
656
-
657
- /* 7. 代码块、表格与徽标自适应 */
658
- pre, code, pre > code, table {
659
- max-width: 100% !important;
660
- overflow-x: auto !important;
661
- -webkit-overflow-scrolling: touch !important;
662
- font-size: 12.5px !important;
663
- }
664
-
665
- /* 状态徽标与药丸按钮永不折字 */
666
- span[style*="border-radius: 999"],
667
- span[style*="border-radius:999"] {
668
- white-space: nowrap !important;
669
- flex-shrink: 0 !important;
670
- min-width: max-content !important;
671
- }
672
-
673
- /* 二维码与图片移动端弹性缩放 */
674
- img[alt="QR"], img[src^="data:image"] {
675
- max-width: 100% !important;
676
- box-sizing: border-box !important;
677
- }
678
-
679
- /* 8. 确保所有 Popover 弹出菜单、操作气泡、下拉框位于抽屉之上且支持触控交互 */
680
- div[class*="_portal"],
681
- div[class*="portal"],
682
- div[class*="popup"],
683
- div[class*="dropdown"],
684
- div[class*="menu"],
685
- div[role="menu"],
686
- div[role="dialog"] {
687
- z-index: 10005 !important;
688
- pointer-events: auto !important;
689
- }
690
-
691
- /* 9. 移动端侧边栏:会话与工作区三点操作按钮始终清晰可见且易于点击 */
692
- div[class*="sessionRow"] span[class*="rowActions"],
693
- div[class*="sessionRow"] button[class*="iconButton"],
694
- div[class*="treeBody"] button[class*="iconButton"] {
695
- opacity: 0.8 !important;
696
- display: inline-flex !important;
697
- visibility: visible !important;
698
- pointer-events: auto !important;
699
- }
700
- div[class*="sessionRow"]:active {
701
- background: var(--dsw-alias-bg-layer-2, #f3f4f6) !important;
702
- }
703
-
704
- /* 全局 overlayLayer 绝不被染黑 */
705
- div[class*="overlayLayer"],
706
- div[class*="uV2eYG_overlayAnchor"] {
707
- background: transparent !important;
708
- pointer-events: none !important;
709
- }
710
- div[class*="overlayLayer"] > * {
711
- pointer-events: auto !important;
712
- }
713
- }
714
-
715
- /* 远程工作区选择弹窗移动端/桌面端自适应样式 */
716
- #dsh-remote-workspace-modal {
717
- position: fixed !important;
718
- inset: 0 !important;
719
- z-index: 100000 !important;
720
- background: rgba(0, 0, 0, 0.65) !important;
721
- backdrop-filter: blur(5px) !important;
722
- display: flex !important;
723
- align-items: center !important;
724
- justify-content: center !important;
725
- padding: 16px !important;
726
- box-sizing: border-box !important;
727
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
728
- color: var(--dsw-alias-label-primary, #111827) !important;
729
- }
730
-
731
- .dsh-ws-dialog-card {
732
- background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
733
- border: 1px solid var(--dsw-alias-border-l1, #e5e7eb) !important;
734
- border-radius: 16px !important;
735
- width: 100% !important;
736
- max-width: 620px !important;
737
- max-height: 88vh !important;
738
- display: flex !important;
739
- flex-direction: column !important;
740
- box-shadow: 0 25px 35px -5px rgba(0,0,0,0.3), 0 12px 16px -5px rgba(0,0,0,0.2) !important;
741
- overflow: hidden !important;
742
- animation: dshModalFadeIn 0.2s ease-out !important;
743
- }
744
-
745
- .dsh-ws-chips-scroll {
746
- display: flex !important;
747
- align-items: center !important;
748
- gap: 6px !important;
749
- overflow-x: auto !important;
750
- white-space: nowrap !important;
751
- scrollbar-width: none !important;
752
- -ms-overflow-style: none !important;
753
- -webkit-overflow-scrolling: touch !important;
754
- padding: 2px 0 !important;
755
- }
756
- .dsh-ws-chips-scroll::-webkit-scrollbar {
757
- display: none !important;
758
- }
759
-
760
- @media (max-width: 640px) {
761
- #dsh-remote-workspace-modal {
762
- align-items: flex-end !important;
763
- padding: 0 !important;
764
- }
765
-
766
- .dsh-ws-dialog-card {
767
- max-height: 92dvh !important;
768
- height: 92dvh !important;
769
- border-bottom-left-radius: 0 !important;
770
- border-bottom-right-radius: 0 !important;
771
- border-left: none !important;
772
- border-right: none !important;
773
- border-bottom: none !important;
774
- max-width: 100vw !important;
775
- width: 100vw !important;
776
- margin: 0 !important;
777
- animation: dshBottomSheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
778
- }
779
-
780
- .dsh-ws-drag-handle {
781
- display: block !important;
782
- }
783
- }
784
-
785
- @keyframes dshModalFadeIn {
786
- from { opacity: 0; transform: scale(0.96); }
787
- to { opacity: 1; transform: scale(1); }
788
- }
789
-
790
- @keyframes dshBottomSheetUp {
791
- from { transform: translateY(100%); }
792
- to { transform: translateY(0); }
793
- }
794
-
795
- @media (min-width: 769px) {
796
- .dsh-mobile-app-header,
797
- .dsh-mobile-backdrop,
798
- .dsh-mobile-panel-close-btn {
799
- display: none !important;
800
- }
801
- }
802
- `;
1
+ // 移动端适配样式(自 client/index.js 拆出的 ~800 行 CSS,T3.5)
2
+ // 由 setupMobileExperience() 注入 <style id="dsh-bridge-mobile-styles">。
3
+ // 注意:选择器硬编码了宿主构建产物的 CSS-module 哈希类名,宿主升级可能需要同步更新。
4
+ export const MOBILE_STYLES_CSS = `
5
+ /* DSH Bridge 隐藏 Tab 栏原生滚动条并保持平滑滑动 */
6
+ .dsh-tabbar-container {
7
+ scrollbar-width: none !important;
8
+ -ms-overflow-style: none !important;
9
+ }
10
+ .dsh-tabbar-container::-webkit-scrollbar {
11
+ display: none !important;
12
+ width: 0 !important;
13
+ height: 0 !important;
14
+ }
15
+
16
+ /* DSH Bridge 移动端自适应与触控交互增强样式 */
17
+ :root {
18
+ --dsh-mobile-header-h: 52px;
19
+ --dsh-mobile-safe-top: env(safe-area-inset-top, 0px);
20
+ --dsh-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
21
+ }
22
+
23
+ @media (max-width: 768px) {
24
+ /* 1. 主框架为 Header 腾出顶部空间 */
25
+ div[class*="_frame"] {
26
+ display: flex !important;
27
+ flex-direction: column !important;
28
+ width: 100vw !important;
29
+ height: 100dvh !important;
30
+ margin: 0 !important;
31
+ padding-top: var(--dsh-mobile-header-h) !important;
32
+ position: relative !important;
33
+ grid-template-columns: 1fr !important;
34
+ overflow: hidden !important;
35
+ box-sizing: border-box !important;
36
+ }
37
+
38
+ /* 2. 顶部原生导航条:100% 还原 DeepSeek App (左侧双横线,右侧(+),中间留白,无多余设置按钮) */
39
+ .dsh-mobile-app-header {
40
+ position: fixed !important;
41
+ top: 0 !important;
42
+ left: 0 !important;
43
+ right: 0 !important;
44
+ height: var(--dsh-mobile-header-h) !important;
45
+ padding-top: var(--dsh-mobile-safe-top) !important;
46
+ background: transparent !important;
47
+ display: flex !important;
48
+ align-items: center !important;
49
+ justify-content: space-between !important;
50
+ padding-left: 16px !important;
51
+ padding-right: 16px !important;
52
+ z-index: 9998 !important;
53
+ box-sizing: border-box !important;
54
+ user-select: none !important;
55
+ pointer-events: none !important;
56
+ }
57
+
58
+ /* 左侧双横线按钮 (DeepSeek App 原生图标) */
59
+ .dsh-header-menu-btn {
60
+ width: 40px;
61
+ height: 40px;
62
+ border-radius: 50%;
63
+ border: none;
64
+ background: transparent;
65
+ color: var(--dsw-alias-label-primary, #111827);
66
+ display: inline-flex;
67
+ align-items: center;
68
+ justify-content: flex-start;
69
+ cursor: pointer;
70
+ padding: 0;
71
+ transition: opacity 0.15s;
72
+ pointer-events: auto !important;
73
+ }
74
+ .dsh-header-menu-btn:active {
75
+ opacity: 0.6;
76
+ }
77
+
78
+ /* 右侧 (+) 新建会话按钮 (DeepSeek App 原生图标) */
79
+ .dsh-header-new-btn {
80
+ width: 40px;
81
+ height: 40px;
82
+ border-radius: 50%;
83
+ border: none;
84
+ background: transparent;
85
+ color: var(--dsw-alias-label-primary, #111827);
86
+ display: inline-flex;
87
+ align-items: center;
88
+ justify-content: flex-end;
89
+ cursor: pointer;
90
+ padding: 0;
91
+ transition: opacity 0.15s;
92
+ pointer-events: auto !important;
93
+ }
94
+ .dsh-header-new-btn:active {
95
+ opacity: 0.6;
96
+ }
97
+
98
+ /* 中间动态会话标题 (单行居中打点截断,100% 还原原生 App 导航体验) */
99
+ .dsh-mobile-header-title {
100
+ flex: 1 1 auto !important;
101
+ min-width: 0 !important;
102
+ text-align: center !important;
103
+ font-size: 15px !important;
104
+ font-weight: 600 !important;
105
+ color: var(--dsw-alias-label-primary, #111827) !important;
106
+ overflow: hidden !important;
107
+ text-overflow: ellipsis !important;
108
+ white-space: nowrap !important;
109
+ padding: 0 10px !important;
110
+ user-select: none !important;
111
+ pointer-events: none !important;
112
+ letter-spacing: -0.2px !important;
113
+ }
114
+
115
+ /* 3. 中间主内容区与输入框 */
116
+ div[class*="_centerCol"] {
117
+ flex: 1 1 100% !important;
118
+ width: 100% !important;
119
+ min-width: 0 !important;
120
+ max-width: 100% !important;
121
+ display: flex !important;
122
+ height: 100% !important;
123
+ }
124
+
125
+ div[class*="_detailsCol"],
126
+ div[class*="toggleCluster"],
127
+ div[class*="W-zNGW_toggleCluster"] {
128
+ display: none !important;
129
+ }
130
+
131
+ /* 3.0 工作区 Workbench / 任务管理 / 多 Tab 栏移动端自适应适配 */
132
+ body:not(.dsh-workbench-open) div[class*="nArs4W_panel"],
133
+ body:not(.dsh-workbench-open) div[class*="workbench_panel"],
134
+ body:not(.dsh-workbench-open) div[class*="workbenchPanel"],
135
+ div[class*="nArs4W_panel"][class*="panelHidden"],
136
+ div[class*="workbench_panel"][class*="panelHidden"],
137
+ div[class*="workbenchPanel"][class*="panelHidden"],
138
+ div[class*="panelHidden"] {
139
+ display: none !important;
140
+ visibility: hidden !important;
141
+ pointer-events: none !important;
142
+ width: 0 !important;
143
+ height: 0 !important;
144
+ max-height: 0 !important;
145
+ z-index: -1 !important;
146
+ opacity: 0 !important;
147
+ transform: translateX(105%) !important;
148
+ }
149
+
150
+ body.dsh-workbench-open div[class*="nArs4W_panel"]:not([class*="panelHidden"]),
151
+ body.dsh-workbench-open div[class*="workbench_panel"]:not([class*="panelHidden"]),
152
+ body.dsh-workbench-open div[class*="workbenchPanel"]:not([class*="panelHidden"]) {
153
+ display: flex !important;
154
+ visibility: visible !important;
155
+ pointer-events: auto !important;
156
+ top: var(--dsh-mobile-header-h, 52px) !important;
157
+ height: calc(100dvh - var(--dsh-mobile-header-h, 52px)) !important;
158
+ max-height: calc(100dvh - var(--dsh-mobile-header-h, 52px)) !important;
159
+ z-index: 50 !important;
160
+ box-sizing: border-box !important;
161
+ background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
162
+ transform: none !important;
163
+ opacity: 1 !important;
164
+ }
165
+
166
+ /* Tab 栏:横向滑动手势 + 干净的底部边框,杜绝与顶部移动端 Header 重叠 */
167
+ div[class*="nArs4W_tabBar"],
168
+ div[class*="workbench_tabBar"],
169
+ div[class*="tabBar"] {
170
+ min-height: 40px !important;
171
+ height: 40px !important;
172
+ background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
173
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
174
+ display: flex !important;
175
+ align-items: center !important;
176
+ justify-content: space-between !important;
177
+ padding: 0 8px !important;
178
+ gap: 6px !important;
179
+ overflow: visible !important;
180
+ box-sizing: border-box !important;
181
+ }
182
+
183
+ div[class*="nArs4W_tabList"],
184
+ div[class*="tabList"] {
185
+ display: flex !important;
186
+ align-items: center !important;
187
+ gap: 6px !important;
188
+ flex: 1 1 auto !important;
189
+ min-width: 0 !important;
190
+ overflow-x: auto !important;
191
+ scrollbar-width: none !important;
192
+ -webkit-overflow-scrolling: touch !important;
193
+ }
194
+ div[class*="nArs4W_tabList"]::-webkit-scrollbar,
195
+ div[class*="tabList"]::-webkit-scrollbar {
196
+ display: none !important;
197
+ }
198
+
199
+ /* 单个 Tab 胶囊化,文字超长自动打点,防止 Tab 互相挤压 */
200
+ div[class*="nArs4W_tab"],
201
+ div[class*="workbench_tab"] {
202
+ flex: 0 0 auto !important;
203
+ max-width: 170px !important;
204
+ min-width: 70px !important;
205
+ height: 30px !important;
206
+ padding: 0 8px 0 10px !important;
207
+ border-radius: 6px !important;
208
+ font-size: 12.5px !important;
209
+ display: inline-flex !important;
210
+ align-items: center !important;
211
+ justify-content: space-between !important;
212
+ gap: 6px !important;
213
+ background: var(--dsw-alias-bg-layer-2, #f3f4f6) !important;
214
+ color: var(--dsw-alias-label-secondary, #6b7280) !important;
215
+ cursor: pointer !important;
216
+ user-select: none !important;
217
+ box-sizing: border-box !important;
218
+ }
219
+
220
+ div[class*="nArs4W_tabActive"],
221
+ div[class*="workbench_tabActive"] {
222
+ background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
223
+ color: var(--dsw-alias-label-primary, #111827) !important;
224
+ font-weight: 600 !important;
225
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
226
+ }
227
+
228
+ span[class*="nArs4W_tabTitle"],
229
+ span[class*="tabTitle"] {
230
+ overflow: hidden !important;
231
+ text-overflow: ellipsis !important;
232
+ white-space: nowrap !important;
233
+ flex: 1 1 auto !important;
234
+ }
235
+
236
+ button[class*="nArs4W_tabClose"],
237
+ button[class*="tabClose"] {
238
+ width: 18px !important;
239
+ height: 18px !important;
240
+ border-radius: 50% !important;
241
+ display: inline-flex !important;
242
+ align-items: center !important;
243
+ justify-content: center !important;
244
+ flex-shrink: 0 !important;
245
+ opacity: 0.6 !important;
246
+ padding: 0 !important;
247
+ }
248
+
249
+ button[class*="nArs4W_tabBarPlus"],
250
+ button[class*="tabBarPlus"] {
251
+ width: 28px !important;
252
+ height: 28px !important;
253
+ border-radius: 50% !important;
254
+ display: inline-flex !important;
255
+ align-items: center !important;
256
+ justify-content: center !important;
257
+ flex-shrink: 0 !important;
258
+ }
259
+
260
+ /* 移动端面板右上角“返回对话 / ✕ 收起”按钮:常驻右侧,醒目且易触达 */
261
+ .dsh-mobile-panel-close-btn {
262
+ margin-left: 8px !important;
263
+ flex: 0 0 auto !important;
264
+ height: 28px !important;
265
+ padding: 0 10px !important;
266
+ border-radius: 14px !important;
267
+ font-size: 12px !important;
268
+ font-weight: 600 !important;
269
+ background: #2563eb !important;
270
+ color: #ffffff !important;
271
+ border: none !important;
272
+ display: inline-flex !important;
273
+ align-items: center !important;
274
+ justify-content: center !important;
275
+ gap: 4px !important;
276
+ cursor: pointer !important;
277
+ user-select: none !important;
278
+ box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
279
+ white-space: nowrap !important;
280
+ transition: transform 0.1s, opacity 0.15s !important;
281
+ z-index: 10 !important;
282
+ }
283
+ .dsh-mobile-panel-close-btn:active {
284
+ transform: scale(0.95) !important;
285
+ opacity: 0.85 !important;
286
+ }
287
+
288
+ /* 3.1 会话对话头部顶栏:移动端防挤压与空间释放优化(严格排除 .dsh-mobile-app-header) */
289
+ div[class*="_centerCol"] header,
290
+ header[class*="wSkVaW_header"] {
291
+ padding: 4px 16px 2px 16px !important;
292
+ position: relative !important;
293
+ overflow: visible !important;
294
+ }
295
+
296
+ div[class*="wSkVaW_titleRow"],
297
+ div[class*="titleRow"] {
298
+ display: flex !important;
299
+ flex-direction: row !important;
300
+ align-items: center !important;
301
+ justify-content: space-between !important;
302
+ gap: 8px !important;
303
+ min-height: 32px !important;
304
+ width: 100% !important;
305
+ box-sizing: border-box !important;
306
+ }
307
+
308
+ /* 移动端将原有嵌入在内容区的长面包屑标题隐藏(已统一提升至顶部导航栏正中),彻底释放第二行空间 */
309
+ nav[class*="wSkVaW_crumbs"],
310
+ nav[class*="crumbs"],
311
+ div[class*="wSkVaW_crumbs"],
312
+ div[class*="crumbs"],
313
+ [class*="wSkVaW_crumbs"] {
314
+ display: none !important;
315
+ }
316
+
317
+ /* 子代理/智能体模式胶囊 (Actions):紧凑圆角胶囊 */
318
+ div[class*="wSkVaW_headerActions"],
319
+ div[class*="headerActions"] {
320
+ flex: 0 0 auto !important;
321
+ display: inline-flex !important;
322
+ align-items: center !important;
323
+ gap: 4px !important;
324
+ margin-left: 0 !important;
325
+ }
326
+
327
+ button[class*="h8S2Va_trigger"],
328
+ button[class*="subagent"] {
329
+ min-height: 26px !important;
330
+ height: 26px !important;
331
+ padding: 2px 8px !important;
332
+ font-size: 11.5px !important;
333
+ line-height: 16px !important;
334
+ border-radius: 13px !important;
335
+ background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04)) !important;
336
+ white-space: nowrap !important;
337
+ flex-shrink: 0 !important;
338
+ }
339
+
340
+ /* Session Log 导出下载按钮 (Utilities):在移动端极简为 28px 圆形纯图标按钮,隐藏长文本,极大释放顶部空间 */
341
+ div[class*="wSkVaW_headerUtilities"],
342
+ div[class*="headerUtilities"] {
343
+ flex: 0 0 auto !important;
344
+ margin-left: 4px !important;
345
+ display: inline-flex !important;
346
+ align-items: center !important;
347
+ }
348
+
349
+ button[class*="nL4_yW_sessionLogButton"],
350
+ button[class*="sessionLogButton"] {
351
+ min-width: 28px !important;
352
+ width: 28px !important;
353
+ height: 28px !important;
354
+ padding: 0 !important;
355
+ border-radius: 50% !important;
356
+ display: inline-flex !important;
357
+ align-items: center !important;
358
+ justify-content: center !important;
359
+ flex-shrink: 0 !important;
360
+ border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1)) !important;
361
+ background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.03)) !important;
362
+ color: var(--dsw-alias-label-secondary, #6b7280) !important;
363
+ margin-left: 0 !important;
364
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
365
+ }
366
+
367
+ button[class*="nL4_yW_sessionLogButton"]:hover:not(:disabled),
368
+ button[class*="sessionLogButton"]:hover:not(:disabled) {
369
+ background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06)) !important;
370
+ color: var(--dsw-alias-label-primary, #111827) !important;
371
+ }
372
+
373
+ button[class*="nL4_yW_sessionLogButton"] span,
374
+ button[class*="sessionLogButton"] span {
375
+ display: none !important;
376
+ }
377
+
378
+ button[class*="nL4_yW_sessionLogButton"] svg,
379
+ button[class*="sessionLogButton"] svg {
380
+ width: 13px !important;
381
+ height: 13px !important;
382
+ margin: 0 !important;
383
+ }
384
+
385
+ /* 子代理展开菜单在移动端右对齐与宽度自适应 */
386
+ div[class*="h8S2Va_menu"] {
387
+ max-width: calc(100vw - 32px) !important;
388
+ left: auto !important;
389
+ right: 0 !important;
390
+ }
391
+
392
+ /* 输入框底座:DeepSeek App 居中及底部固定 */
393
+ div[class*="wSkVaW_scrollBody"] {
394
+ padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
395
+ }
396
+
397
+ /* 输入卡片:DeepSeek App 圆角大胶囊造型 */
398
+ div[class*="uV2eYG_card"] {
399
+ border-radius: 26px !important;
400
+ padding: 14px 16px 12px !important;
401
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
402
+ border: 1px solid rgba(0, 0, 0, 0.07) !important;
403
+ background: var(--dsw-alias-bg-layer-2, #f4f4f7) !important;
404
+ }
405
+
406
+ /* 输入框底部工具栏:弹性自适应,彻底杜绝权限选择器(Full access)与模型选择器重叠碰撞 */
407
+ div[class*="uV2eYG_row"] {
408
+ display: flex !important;
409
+ align-items: center !important;
410
+ justify-content: space-between !important;
411
+ gap: 6px !important;
412
+ width: 100% !important;
413
+ padding: 2px 2px 4px !important;
414
+ box-sizing: border-box !important;
415
+ }
416
+
417
+ div[class*="uV2eYG_tools"] {
418
+ display: flex !important;
419
+ align-items: center !important;
420
+ gap: 6px !important;
421
+ flex: 0 0 auto !important;
422
+ min-width: 0 !important;
423
+ }
424
+
425
+ div[class*="uV2eYG_modes"] {
426
+ display: flex !important;
427
+ align-items: center !important;
428
+ gap: 4px !important;
429
+ flex: 0 0 auto !important;
430
+ min-width: 0 !important;
431
+ }
432
+
433
+ button[class*="Sh0Q9G_trigger"] {
434
+ flex: 0 0 auto !important;
435
+ min-width: 0 !important;
436
+ }
437
+
438
+ div[class*="uV2eYG_trailing"] {
439
+ display: flex !important;
440
+ align-items: center !important;
441
+ justify-content: flex-end !important;
442
+ gap: 6px !important;
443
+ flex: 1 1 auto !important;
444
+ min-width: 0 !important;
445
+ }
446
+
447
+ div[class*="_7KE1Ra_root"] {
448
+ flex: 0 1 auto !important;
449
+ min-width: 0 !important;
450
+ max-width: 180px !important;
451
+ }
452
+
453
+ button[class*="_7KE1Ra_trigger"] {
454
+ max-width: 100% !important;
455
+ min-width: 0 !important;
456
+ flex: 1 1 auto !important;
457
+ padding: 0 4px 0 6px !important;
458
+ }
459
+
460
+ span[class*="_7KE1Ra_triggerLabel"] {
461
+ overflow: hidden !important;
462
+ text-overflow: ellipsis !important;
463
+ white-space: nowrap !important;
464
+ min-width: 0 !important;
465
+ }
466
+
467
+ /* 4. 原生侧边栏抽屉化 (Drawer) */
468
+ div[class*="_sidebarCol"] {
469
+ position: fixed !important;
470
+ left: 0 !important;
471
+ top: 0 !important;
472
+ bottom: 0 !important;
473
+ height: 100dvh !important;
474
+ width: 290px !important;
475
+ max-width: 82vw !important;
476
+ z-index: 10000 !important;
477
+ background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
478
+ transform: translateX(-105%);
479
+ transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
480
+ overflow-y: auto !important;
481
+ border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
482
+ pointer-events: auto !important;
483
+ }
484
+ body.dsh-drawer-open div[class*="_sidebarCol"] {
485
+ transform: translateX(0) !important;
486
+ box-shadow: 4px 0 28px rgba(0, 0, 0, 0.25) !important;
487
+ pointer-events: auto !important;
488
+ }
489
+
490
+ /* 抽屉内部:强制 100% 宽度,无论内部状态如何均正常展开并展示 DSH 自带的顶部收起侧边栏图标 */
491
+ body.dsh-drawer-open div[class*="hHd-Xa_root"] {
492
+ width: 100% !important;
493
+ max-width: 100% !important;
494
+ min-width: 100% !important;
495
+ display: flex !important;
496
+ flex-direction: column !important;
497
+ }
498
+ body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] div[class*="hHd-Xa_regionArea"],
499
+ body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] button[class*="hHd-Xa_newSession"],
500
+ body.dsh-drawer-open div[class*="hHd-Xa_collapsed"] div[class*="qDHVXG_root"] {
501
+ display: flex !important;
502
+ visibility: visible !important;
503
+ }
504
+ div[class*="hHd-Xa_logoRow"] {
505
+ display: flex !important;
506
+ align-items: center !important;
507
+ justify-content: space-between !important;
508
+ width: 100% !important;
509
+ padding: 10px 14px 6px 14px !important;
510
+ box-sizing: border-box !important;
511
+ }
512
+ div[class*="hHd-Xa_logoRow"] button[class*="hHd-Xa_toggle"] {
513
+ display: inline-flex !important;
514
+ align-items: center !important;
515
+ justify-content: center !important;
516
+ width: 32px !important;
517
+ height: 32px !important;
518
+ border-radius: 8px !important;
519
+ color: var(--dsw-alias-label-secondary, #6b7280) !important;
520
+ background: transparent !important;
521
+ border: none !important;
522
+ cursor: pointer !important;
523
+ margin-left: auto !important;
524
+ transition: background 0.15s, color 0.15s !important;
525
+ }
526
+ div[class*="hHd-Xa_logoRow"] button[class*="hHd-Xa_toggle"]:active {
527
+ background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.06)) !important;
528
+ color: var(--dsw-alias-label-primary, #111827) !important;
529
+ }
530
+
531
+ /* 设置弹窗打开时解除抽屉隐藏限制 */
532
+ div[class*="_sidebarCol"]:has(div[class*="VOzbGW_overlay"]) {
533
+ transform: none !important;
534
+ width: 100vw !important;
535
+ max-width: 100vw !important;
536
+ background: transparent !important;
537
+ box-shadow: none !important;
538
+ pointer-events: none !important;
539
+ }
540
+
541
+ /* 5. 半透明背景遮罩 */
542
+ .dsh-mobile-backdrop {
543
+ position: fixed;
544
+ inset: 0;
545
+ background: rgba(0, 0, 0, 0.4);
546
+ z-index: 9999;
547
+ display: none !important;
548
+ }
549
+ body.dsh-drawer-open .dsh-mobile-backdrop {
550
+ display: block !important;
551
+ pointer-events: auto !important;
552
+ }
553
+
554
+ /* 6. 设置中心全自适应适配 */
555
+ div[class*="VOzbGW_overlay"] {
556
+ position: fixed !important;
557
+ inset: 0 !important;
558
+ width: 100vw !important;
559
+ height: 100dvh !important;
560
+ display: flex !important;
561
+ align-items: center !important;
562
+ justify-content: center !important;
563
+ background: rgba(0, 0, 0, 0.45) !important;
564
+ backdrop-filter: blur(4px) !important;
565
+ -webkit-backdrop-filter: blur(4px) !important;
566
+ z-index: 10002 !important;
567
+ padding: 10px !important;
568
+ box-sizing: border-box !important;
569
+ pointer-events: auto !important;
570
+ }
571
+ div[class*="VOzbGW_panel"] {
572
+ width: 100% !important;
573
+ max-width: 100% !important;
574
+ height: 92dvh !important;
575
+ max-height: 92dvh !important;
576
+ display: flex !important;
577
+ flex-direction: row !important;
578
+ border-radius: 18px !important;
579
+ overflow: hidden !important;
580
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
581
+ background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
582
+ }
583
+ nav[class*="VOzbGW_nav"] {
584
+ width: 78px !important;
585
+ min-width: 78px !important;
586
+ max-width: 78px !important;
587
+ padding: 10px 4px !important;
588
+ box-sizing: border-box !important;
589
+ border-right: 1px solid var(--dsw-alias-border-l2, #e5e7eb) !important;
590
+ display: flex !important;
591
+ flex-direction: column !important;
592
+ gap: 6px !important;
593
+ overflow-y: auto !important;
594
+ }
595
+ nav[class*="VOzbGW_nav"] button[class*="VOzbGW_navCell"],
596
+ button[class*="VOzbGW_navCell"] {
597
+ padding: 8px 2px !important;
598
+ display: flex !important;
599
+ flex-direction: column !important;
600
+ align-items: center !important;
601
+ justify-content: center !important;
602
+ text-align: center !important;
603
+ height: auto !important;
604
+ min-height: 48px !important;
605
+ gap: 4px !important;
606
+ border-radius: 10px !important;
607
+ }
608
+ span[class*="VOzbGW_navLabel"] {
609
+ font-size: 10.5px !important;
610
+ line-height: 1.2 !important;
611
+ white-space: normal !important;
612
+ word-break: break-all !important;
613
+ text-align: center !important;
614
+ }
615
+ div[class*="VOzbGW_content"] {
616
+ flex: 1 1 auto !important;
617
+ min-width: 0 !important;
618
+ width: calc(100% - 78px) !important;
619
+ max-width: calc(100% - 78px) !important;
620
+ display: flex !important;
621
+ flex-direction: column !important;
622
+ overflow: hidden !important;
623
+ }
624
+ div[class*="VOzbGW_options"] {
625
+ flex: 1 1 auto !important;
626
+ width: 100% !important;
627
+ max-width: 100% !important;
628
+ box-sizing: border-box !important;
629
+ padding: 0 14px 20px !important;
630
+ overflow-x: hidden !important;
631
+ overflow-y: auto !important;
632
+ -webkit-overflow-scrolling: touch !important;
633
+ }
634
+
635
+ /* 设置中心选项行手机自适应(垂直流式,防文字单字折行) */
636
+ div[class*="VOzbGW_options"] div[class*="_row"] {
637
+ display: flex !important;
638
+ flex-direction: column !important;
639
+ align-items: stretch !important;
640
+ gap: 8px !important;
641
+ width: 100% !important;
642
+ padding: 12px 0 !important;
643
+ box-sizing: border-box !important;
644
+ }
645
+ div[class*="VOzbGW_options"] div[class*="_rowText"] {
646
+ width: 100% !important;
647
+ max-width: 100% !important;
648
+ }
649
+ div[class*="VOzbGW_options"] button[class*="_selector"],
650
+ div[class*="VOzbGW_options"] select,
651
+ div[class*="VOzbGW_options"] input {
652
+ width: 100% !important;
653
+ max-width: 100% !important;
654
+ box-sizing: border-box !important;
655
+ }
656
+
657
+ /* 7. 代码块、表格与徽标自适应 */
658
+ pre, code, pre > code, table {
659
+ max-width: 100% !important;
660
+ overflow-x: auto !important;
661
+ -webkit-overflow-scrolling: touch !important;
662
+ font-size: 12.5px !important;
663
+ }
664
+
665
+ /* 状态徽标与药丸按钮永不折字 */
666
+ span[style*="border-radius: 999"],
667
+ span[style*="border-radius:999"] {
668
+ white-space: nowrap !important;
669
+ flex-shrink: 0 !important;
670
+ min-width: max-content !important;
671
+ }
672
+
673
+ /* 二维码与图片移动端弹性缩放 */
674
+ img[alt="QR"], img[src^="data:image"] {
675
+ max-width: 100% !important;
676
+ box-sizing: border-box !important;
677
+ }
678
+
679
+ /* 8. 确保所有 Popover 弹出菜单、操作气泡、下拉框位于抽屉之上且支持触控交互 */
680
+ div[class*="_portal"],
681
+ div[class*="portal"],
682
+ div[class*="popup"],
683
+ div[class*="dropdown"],
684
+ div[class*="menu"],
685
+ div[role="menu"],
686
+ div[role="dialog"] {
687
+ z-index: 10005 !important;
688
+ pointer-events: auto !important;
689
+ }
690
+
691
+ /* 9. 移动端侧边栏:会话与工作区三点操作按钮始终清晰可见且易于点击 */
692
+ div[class*="sessionRow"] span[class*="rowActions"],
693
+ div[class*="sessionRow"] button[class*="iconButton"],
694
+ div[class*="treeBody"] button[class*="iconButton"] {
695
+ opacity: 0.8 !important;
696
+ display: inline-flex !important;
697
+ visibility: visible !important;
698
+ pointer-events: auto !important;
699
+ }
700
+ div[class*="sessionRow"]:active {
701
+ background: var(--dsw-alias-bg-layer-2, #f3f4f6) !important;
702
+ }
703
+
704
+ /* 全局 overlayLayer 绝不被染黑 */
705
+ div[class*="overlayLayer"],
706
+ div[class*="uV2eYG_overlayAnchor"] {
707
+ background: transparent !important;
708
+ pointer-events: none !important;
709
+ }
710
+ div[class*="overlayLayer"] > * {
711
+ pointer-events: auto !important;
712
+ }
713
+ }
714
+
715
+ /* 远程工作区选择弹窗移动端/桌面端自适应样式 */
716
+ #dsh-remote-workspace-modal {
717
+ position: fixed !important;
718
+ inset: 0 !important;
719
+ z-index: 100000 !important;
720
+ background: rgba(0, 0, 0, 0.65) !important;
721
+ backdrop-filter: blur(5px) !important;
722
+ display: flex !important;
723
+ align-items: center !important;
724
+ justify-content: center !important;
725
+ padding: 16px !important;
726
+ box-sizing: border-box !important;
727
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
728
+ color: var(--dsw-alias-label-primary, #111827) !important;
729
+ }
730
+
731
+ .dsh-ws-dialog-card {
732
+ background: var(--dsw-alias-bg-layer-1, #ffffff) !important;
733
+ border: 1px solid var(--dsw-alias-border-l1, #e5e7eb) !important;
734
+ border-radius: 16px !important;
735
+ width: 100% !important;
736
+ max-width: 620px !important;
737
+ max-height: 88vh !important;
738
+ display: flex !important;
739
+ flex-direction: column !important;
740
+ box-shadow: 0 25px 35px -5px rgba(0,0,0,0.3), 0 12px 16px -5px rgba(0,0,0,0.2) !important;
741
+ overflow: hidden !important;
742
+ animation: dshModalFadeIn 0.2s ease-out !important;
743
+ }
744
+
745
+ .dsh-ws-chips-scroll {
746
+ display: flex !important;
747
+ align-items: center !important;
748
+ gap: 6px !important;
749
+ overflow-x: auto !important;
750
+ white-space: nowrap !important;
751
+ scrollbar-width: none !important;
752
+ -ms-overflow-style: none !important;
753
+ -webkit-overflow-scrolling: touch !important;
754
+ padding: 2px 0 !important;
755
+ }
756
+ .dsh-ws-chips-scroll::-webkit-scrollbar {
757
+ display: none !important;
758
+ }
759
+
760
+ @media (max-width: 640px) {
761
+ #dsh-remote-workspace-modal {
762
+ align-items: flex-end !important;
763
+ padding: 0 !important;
764
+ }
765
+
766
+ .dsh-ws-dialog-card {
767
+ max-height: 92dvh !important;
768
+ height: 92dvh !important;
769
+ border-bottom-left-radius: 0 !important;
770
+ border-bottom-right-radius: 0 !important;
771
+ border-left: none !important;
772
+ border-right: none !important;
773
+ border-bottom: none !important;
774
+ max-width: 100vw !important;
775
+ width: 100vw !important;
776
+ margin: 0 !important;
777
+ animation: dshBottomSheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
778
+ }
779
+
780
+ .dsh-ws-drag-handle {
781
+ display: block !important;
782
+ }
783
+ }
784
+
785
+ @keyframes dshModalFadeIn {
786
+ from { opacity: 0; transform: scale(0.96); }
787
+ to { opacity: 1; transform: scale(1); }
788
+ }
789
+
790
+ @keyframes dshBottomSheetUp {
791
+ from { transform: translateY(100%); }
792
+ to { transform: translateY(0); }
793
+ }
794
+
795
+ /* 深色模式适配:dsh-bridge 目录浏览器弹窗使用了 DSH 主题系统未定义的
796
+ state-*-bg / state-*-border / state-*-primary 变量,补上深色模式值,避免浅色 fallback 永远生效 */
797
+ body[data-ds-dark-theme] {
798
+ --dsw-alias-state-info-bg: rgba(65, 118, 230, 0.12);
799
+ --dsw-alias-state-info-border: rgba(65, 118, 230, 0.25);
800
+ --dsw-alias-state-info-primary: #60a5fa;
801
+ --dsw-alias-state-success-bg: rgba(34, 197, 94, 0.12);
802
+ --dsw-alias-state-success-border: rgba(34, 197, 94, 0.25);
803
+ --dsw-alias-state-success-primary: #4ade80;
804
+ --dsw-alias-state-warn-bg: rgba(245, 158, 11, 0.12);
805
+ --dsw-alias-state-warn-border: rgba(245, 158, 11, 0.25);
806
+ --dsw-alias-state-warn-primary: #fbbf24;
807
+ --dsw-alias-state-error-bg: rgba(239, 68, 68, 0.12);
808
+ --dsw-alias-state-error-border: rgba(239, 68, 68, 0.25);
809
+ --dsw-alias-state-error-primary: #f87171;
810
+ }
811
+
812
+ /* 深色模式:直接覆盖弹窗内所有使用 #fff/#ffffff fallback 的内联背景,
813
+ 确保即使 CSS 变量未正确继承,弹窗也不会显示白色背景 */
814
+ body[data-ds-dark-theme] #dsh-remote-workspace-modal .dsh-ws-dialog-card,
815
+ body[data-ds-dark-theme] #dsh-remote-workspace-modal .dsh-ws-dialog-card * {
816
+ --dsw-alias-bg-layer-1: #1b1b1c;
817
+ --dsw-alias-bg-layer-2: #2c2c2e;
818
+ --dsw-alias-bg-layer-3: #353638;
819
+ --dsw-alias-border-l2: #3c3c3d;
820
+ --dsw-alias-label-primary: #f9fafb;
821
+ --dsw-alias-label-secondary: #adb2b8;
822
+ --dsw-alias-label-tertiary: #81858c;
823
+ --dsw-alias-brand-primary: #f9fafb;
824
+ --dsw-alias-label-primary-foreground: #0f1115;
825
+ }
826
+
827
+ @media (min-width: 769px) {
828
+ .dsh-mobile-app-header,
829
+ .dsh-mobile-backdrop,
830
+ .dsh-mobile-panel-close-btn {
831
+ display: none !important;
832
+ }
833
+ }
834
+ `;