dsh-plugin-core 0.1.4 → 0.2.1
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.
- package/README.md +6 -8
- package/dist/design/index.d.ts +1 -1
- package/dist/design/index.d.ts.map +1 -1
- package/dist/design/index.js +1 -1
- package/dist/design/index.js.map +1 -1
- package/dist/design/style-kit.d.ts +4 -9
- package/dist/design/style-kit.d.ts.map +1 -1
- package/dist/design/style-kit.js +11 -24
- package/dist/design/style-kit.js.map +1 -1
- package/dist/design/tokens-css.d.ts +1 -1
- package/dist/design/tokens-css.d.ts.map +1 -1
- package/dist/design/tokens-css.js +162 -132
- package/dist/design/tokens-css.js.map +1 -1
- package/dist/explorer/ExplorerPanel.js +14 -14
- package/dist/explorer/ExplorerPanel.js.map +1 -1
- package/dist/explorer/explorer-css.d.ts +1 -1
- package/dist/explorer/explorer-css.d.ts.map +1 -1
- package/dist/explorer/explorer-css.js +23 -23
- package/dist/explorer/explorer-css.js.map +1 -1
- package/dist/explorer/preview/index.js +4 -4
- package/dist/explorer/preview/index.js.map +1 -1
- package/dist/session/index.js +9 -9
- package/dist/session/index.js.map +1 -1
- package/dist/session/session-css.d.ts +1 -1
- package/dist/session/session-css.js +14 -14
- package/dist/session/session-css.js.map +1 -1
- package/dist/ui/BackToTop.d.ts +1 -1
- package/dist/ui/BackToTop.d.ts.map +1 -1
- package/dist/ui/BackToTop.js +5 -5
- package/dist/ui/BackToTop.js.map +1 -1
- package/dist/ui/Button.d.ts +16 -5
- package/dist/ui/Button.d.ts.map +1 -1
- package/dist/ui/Button.js +53 -14
- package/dist/ui/Button.js.map +1 -1
- package/dist/ui/Card.js +8 -8
- package/dist/ui/Card.js.map +1 -1
- package/dist/ui/Checkbox.d.ts +2 -2
- package/dist/ui/Checkbox.d.ts.map +1 -1
- package/dist/ui/Checkbox.js +4 -4
- package/dist/ui/Checkbox.js.map +1 -1
- package/dist/ui/Chip.d.ts +1 -1
- package/dist/ui/Chip.d.ts.map +1 -1
- package/dist/ui/Chip.js +2 -2
- package/dist/ui/Chip.js.map +1 -1
- package/dist/ui/EmptyState.js +1 -1
- package/dist/ui/EmptyState.js.map +1 -1
- package/dist/ui/ErrorBoundary.js +1 -1
- package/dist/ui/ErrorBoundary.js.map +1 -1
- package/dist/ui/Field.d.ts +1 -1
- package/dist/ui/Field.d.ts.map +1 -1
- package/dist/ui/Field.js +19 -19
- package/dist/ui/Field.js.map +1 -1
- package/dist/ui/FieldHint.js +2 -2
- package/dist/ui/FieldHint.js.map +1 -1
- package/dist/ui/Loading.d.ts +1 -1
- package/dist/ui/Loading.d.ts.map +1 -1
- package/dist/ui/Loading.js +9 -9
- package/dist/ui/Loading.js.map +1 -1
- package/dist/ui/MarqueeText.d.ts +3 -3
- package/dist/ui/MarqueeText.js +5 -5
- package/dist/ui/MarqueeText.js.map +1 -1
- package/dist/ui/Modal.js +5 -5
- package/dist/ui/Modal.js.map +1 -1
- package/dist/ui/ModelPicker.js +1 -1
- package/dist/ui/ModelPicker.js.map +1 -1
- package/dist/ui/Picker.js +16 -16
- package/dist/ui/Picker.js.map +1 -1
- package/dist/ui/SectionHead.d.ts +1 -1
- package/dist/ui/SectionHead.js +4 -4
- package/dist/ui/SectionHead.js.map +1 -1
- package/dist/ui/Segmented.js +5 -5
- package/dist/ui/Segmented.js.map +1 -1
- package/dist/ui/Textarea.d.ts +2 -2
- package/dist/ui/Textarea.js +3 -3
- package/dist/ui/Textarea.js.map +1 -1
- package/dist/ui/Toast.js +3 -3
- package/dist/ui/Toast.js.map +1 -1
- package/dist/ui/card-css.d.ts +1 -1
- package/dist/ui/card-css.d.ts.map +1 -1
- package/dist/ui/card-css.js +22 -22
- package/dist/ui/card-css.js.map +1 -1
- package/dist/ui/chip-css.d.ts +1 -1
- package/dist/ui/chip-css.d.ts.map +1 -1
- package/dist/ui/chip-css.js +10 -10
- package/dist/ui/chip-css.js.map +1 -1
- package/dist/ui/controls-css.d.ts +8 -8
- package/dist/ui/controls-css.d.ts.map +1 -1
- package/dist/ui/controls-css.js +261 -203
- package/dist/ui/controls-css.js.map +1 -1
- package/dist/ui/css.d.ts +0 -11
- package/dist/ui/css.d.ts.map +1 -1
- package/dist/ui/css.js +3 -16
- package/dist/ui/css.js.map +1 -1
- package/dist/ui/feedback-css.d.ts +1 -1
- package/dist/ui/feedback-css.d.ts.map +1 -1
- package/dist/ui/feedback-css.js +30 -31
- package/dist/ui/feedback-css.js.map +1 -1
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +2 -2
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/picker-css.d.ts +1 -1
- package/dist/ui/picker-css.d.ts.map +1 -1
- package/dist/ui/picker-css.js +32 -33
- package/dist/ui/picker-css.js.map +1 -1
- package/dist/ui/resizer.d.ts +1 -1
- package/dist/ui/resizer.d.ts.map +1 -1
- package/dist/ui/resizer.js +1 -1
- package/dist/ui/resizer.js.map +1 -1
- package/docs/design/architecture.md +3 -3
- package/docs/design/features/design.md +5 -7
- package/docs/design/features/ui.md +27 -9
- package/docs/design/features.md +1 -1
- package/docs/design/structure.md +1 -1
- package/docs/design/style.md +34 -17
- package/docs/examples/integration.md +3 -5
- package/docs/requirements.md +8 -12
- package/package.json +1 -1
package/dist/ui/controls-css.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
//
|
|
2
|
-
// 两处前缀在运行时由 buildCss() 替换:类名 dsh-tdt- 、变量 --tdt- 。
|
|
3
|
-
// 排除 PROCESS_FILES_CSS(业务件,不进本包,见需求文档 §3)。
|
|
1
|
+
// 控件样式。类名与变量统一使用 dshpc 前缀。
|
|
4
2
|
export const SEGMENTED_CSS = `
|
|
5
3
|
/* ── 分段控件(滑动块)P1 ────────────────────────────────────────────────
|
|
6
4
|
结构一套 + 两个受控轴:size(sm|md|lg) × variant(default|inset)。
|
|
@@ -13,104 +11,164 @@ export const SEGMENTED_CSS = `
|
|
|
13
11
|
几何 = 段高 = token − 6px(上下各 2px padding + 1px 边框);default 真边框 1px + padding 2px,
|
|
14
12
|
inset 无边框故 padding 收 3px 把缺的 1px 补回,两种外观总高都 == token(24/28/32),不再多 +2px。
|
|
15
13
|
以后 Button / Input 的有边 / 无边同此规则。 */
|
|
16
|
-
.
|
|
17
|
-
/* 选中片 = --
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
14
|
+
.dshpc-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--dshpc-radius-md);background:var(--seg-track);}
|
|
15
|
+
/* 选中片 = --dshpc-surface-raised(兄弟项目 dsh-task-dispatch-table 的取法,2026-10-19 用户点名
|
|
16
|
+
「把兄弟的样式清了就不正常 ⇒ 没搬全」后改回)。10-18 曾改成 --dshpc-solid,但它在暗色主题下
|
|
17
|
+
是近黑(比轨道还暗)⇒ 选中片陷进轨道里;raised 在两个主题下都比轨道亮一档,方向正确。
|
|
18
|
+
raised 与卡片底同为 bg-layer-1 ⇒ 选中片靠**1px 描边 + 阴影**与卡片区分(见 __item[aria-pressed])。 */
|
|
19
|
+
.dshpc-seg--default{--seg-track:var(--dshpc-surface-2);--seg-thumb:var(--dshpc-surface-raised);border:1px solid var(--dshpc-border);}
|
|
20
|
+
.dshpc-seg--inset{--seg-track:var(--dshpc-hover);--seg-thumb:var(--dshpc-surface-raised);border:0;padding:3px;}
|
|
21
21
|
|
|
22
|
-
.
|
|
23
|
-
height:calc(var(--
|
|
24
|
-
background:transparent;color:var(--
|
|
22
|
+
.dshpc-seg__item{appearance:none;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;
|
|
23
|
+
height:calc(var(--dshpc-control-h-sm) - 6px);padding:0 12px;border:1px solid transparent;border-radius:var(--dshpc-radius-sm);
|
|
24
|
+
background:transparent;color:var(--dshpc-fg-2);font-family:inherit;font-size:var(--dshpc-font-sm);line-height:var(--dshpc-line-sm);
|
|
25
25
|
font-weight:400;white-space:nowrap;cursor:pointer;
|
|
26
|
-
transition:color var(--
|
|
27
|
-
.
|
|
28
|
-
.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
.
|
|
32
|
-
.
|
|
26
|
+
transition:color var(--dshpc-dur-fast) var(--dshpc-ease),background-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
27
|
+
.dshpc-seg--md .dshpc-seg__item{height:calc(var(--dshpc-control-h-md) - 6px);}
|
|
28
|
+
.dshpc-seg--lg .dshpc-seg__item{height:calc(var(--dshpc-control-h-lg) - 6px);}
|
|
29
|
+
/* 未选中项 hover:给一层浅底(此前只提亮文字,用户看不出「这里可以点」)。
|
|
30
|
+
inset 的轨道本身就是 --dshpc-hover ⇒ 那里用 active 一档,避免 hover 与轨道同色等于没变。 */
|
|
31
|
+
.dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){color:var(--dshpc-fg);background:var(--dshpc-hover);}
|
|
32
|
+
.dshpc-seg--inset .dshpc-seg__item:hover:not([aria-pressed='true']):not(:disabled){background:var(--dshpc-active);}
|
|
33
|
+
/* 选中片:亮片 + 描边 + 浮起阴影 ⇒ 在卡片底(与亮片同色)上也看得出边界 */
|
|
34
|
+
.dshpc-seg__item[aria-pressed='true']{background:var(--seg-thumb);border-color:var(--dshpc-border);
|
|
35
|
+
box-shadow:var(--dshpc-shadow-raised);color:var(--dshpc-fg);font-weight:600;}
|
|
36
|
+
.dshpc-seg__item:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:-2px;}
|
|
37
|
+
.dshpc-seg__item:disabled{cursor:default;opacity:.4;}
|
|
33
38
|
|
|
34
39
|
/* 段内角标(如「异常」的数量):语义色实面 + 反白字,0 由组件侧不渲染。
|
|
35
40
|
⚠️ **必须是正圆**(用户 2026-10-03:「多位数给它撑开了,那不是圆的就没办法了」):
|
|
36
41
|
固定 16×16 + border-radius:50% + padding:0 + overflow:hidden ⇒ 一位数 / 两位数都是同一个圆,
|
|
37
42
|
数字缩到 10px 塞得下;不再用 min-width + 左右 padding(那会让宽度随位数增长变椭圆)。 */
|
|
38
|
-
.
|
|
43
|
+
.dshpc-seg__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;
|
|
39
44
|
width:16px;height:16px;padding:0;overflow:hidden;
|
|
40
|
-
border-radius:50%;background:var(--
|
|
45
|
+
border-radius:50%;background:var(--dshpc-danger);color:var(--dshpc-on-signal);
|
|
41
46
|
font-size:10px;line-height:16px;font-weight:500;font-variant-numeric:tabular-nums;}
|
|
42
47
|
|
|
43
48
|
/* 段内中性计数(如筛选条「全部 11」):**纯文字,无底、无边、无圆角**(对齐 task-ledger 2026-10-18
|
|
44
49
|
拍板的 .dtl-seg__num:圆圈取了、字再小点);0 由组件侧不渲染。danger 角标仍走 __badge。 */
|
|
45
|
-
.
|
|
46
|
-
background:none;color:var(--
|
|
50
|
+
.dshpc-seg__count{display:inline;flex:none;margin-left:3px;padding:0;border:0;border-radius:0;
|
|
51
|
+
background:none;color:var(--dshpc-fg-3);font-size:10px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;}
|
|
47
52
|
|
|
48
53
|
/* block:撑满父宽(表单行用),各段等分 */
|
|
49
|
-
.
|
|
50
|
-
.
|
|
54
|
+
.dshpc-seg--block{display:flex;width:100%;}
|
|
55
|
+
.dshpc-seg--block .dshpc-seg__item{flex:1 1 auto;justify-content:center;}
|
|
51
56
|
|
|
52
57
|
/* weekday:星期多选方块(任务新增 / 编辑页)。基础插件的特殊化定制(用户 2026-10-01 明确要求:
|
|
53
58
|
原 WeekdayPicker 即「蓝底 + 近似方形」,统一到 Segmented 后由这一修饰类补回两处差异):
|
|
54
59
|
- 每格做成正方形(宽 = 段高);
|
|
55
|
-
- 选中态用品牌蓝(--
|
|
56
|
-
皮肤集中在此、不内联;调用点只挂 .
|
|
60
|
+
- 选中态用品牌蓝(--dshpc-business)、反白字,轨道用 hover 灰(与原自绘轨道一致)。
|
|
61
|
+
皮肤集中在此、不内联;调用点只挂 .dshpc-seg--weekday 一个修饰类,符合「皮肤只在 controls-css」的规矩。 */
|
|
57
62
|
/* weekday:星期多选方块(任务新增 / 编辑页)。基础插件的特殊化定制(用户 2026-10-01 明确要求:
|
|
58
63
|
原 WeekdayPicker 即「蓝底 + 近似方形」,统一到 Segmented 后由这一修饰类补回两处差异):
|
|
59
64
|
- 每格做成正方形(宽 = 段高);
|
|
60
|
-
- 选中态用品牌蓝(--
|
|
65
|
+
- 选中态用品牌蓝(--dshpc-business)、反白字,轨道用 hover 灰(与原自绘轨道一致)。
|
|
61
66
|
2026-10-18 用户重申(对齐真实截图):**无外描边**(不管挂哪个 variant,这里一律撤边),
|
|
62
67
|
且方块之间要有间距(gap 6px,不再 2px 挤成一坨)。 */
|
|
63
|
-
.
|
|
64
|
-
.
|
|
65
|
-
.
|
|
68
|
+
.dshpc-seg--weekday{--seg-track:var(--dshpc-hover);gap:6px;border:0;padding:3px;}
|
|
69
|
+
.dshpc-seg--weekday .dshpc-seg__item{width:calc(var(--dshpc-control-h-lg) - 6px);padding:0;justify-content:center;}
|
|
70
|
+
.dshpc-seg--weekday .dshpc-seg__item[aria-pressed='true']{background:var(--dshpc-business);color:var(--dshpc-fg-inverse);box-shadow:var(--dshpc-shadow-raised);}
|
|
66
71
|
|
|
67
|
-
@media (prefers-reduced-motion: reduce){.
|
|
72
|
+
@media (prefers-reduced-motion: reduce){.dshpc-seg__item{transition:none;}}
|
|
68
73
|
`;
|
|
69
74
|
export const BUTTON_CSS = `
|
|
70
75
|
/* ── 按钮 / 图标钮 P2 ───────────────────────────────────────────────────
|
|
71
|
-
与 Segmented 同一条高度纪律:--
|
|
76
|
+
与 Segmented 同一条高度纪律:--dshpc-control-h-sm(24) / -md(28) / -lg(32),
|
|
72
77
|
有边框的 variant 用 1px 真边框 + 内部 padding 补回,**有边 / 无边同高**。
|
|
73
|
-
variant 只换颜色,结构 / 尺寸 / 交互只此一份。 */
|
|
74
|
-
.dsh-tdt-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--tdt-space-1);
|
|
75
|
-
box-sizing:border-box;border:1px solid transparent;border-radius:var(--tdt-radius-md);
|
|
76
|
-
background:transparent;color:var(--tdt-fg);font-family:inherit;font-weight:500;white-space:nowrap;cursor:pointer;
|
|
77
|
-
transition:background-color var(--tdt-dur-fast) var(--tdt-ease),border-color var(--tdt-dur-fast) var(--tdt-ease),color var(--tdt-dur-fast) var(--tdt-ease),opacity var(--tdt-dur-fast) var(--tdt-ease);}
|
|
78
|
-
.dsh-tdt-btn--sm{height:var(--tdt-control-h-sm);padding:0 10px;font-size:var(--tdt-font-sm);line-height:var(--tdt-line-sm);}
|
|
79
|
-
.dsh-tdt-btn--md{height:var(--tdt-control-h-md);padding:0 12px;font-size:var(--tdt-font-md);line-height:var(--tdt-line-md);}
|
|
80
|
-
.dsh-tdt-btn--lg{height:var(--tdt-control-h-lg);padding:0 14px;font-size:var(--tdt-font-md);line-height:var(--tdt-line-md);}
|
|
81
|
-
.dsh-tdt-btn__icon{display:inline-flex;align-items:center;flex:none;}
|
|
82
78
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
79
|
+
三条受控轴(2026-10-19 重写,对齐主流 UI 框架的分类口径):
|
|
80
|
+
· variant —— 外观档 = 形态 + 语义色,共 10 档:
|
|
81
|
+
primary / secondary / outline / ghost / danger / success / warning / info /
|
|
82
|
+
danger-outline(红字描边)/ link(行内链接)
|
|
83
|
+
· size —— sm / md / lg
|
|
84
|
+
· block —— 撑满父宽
|
|
85
|
+
每一档**只填 5 个局部变量**(--btn-bg / -fg / -border / -bg-hover / -bg-active),
|
|
86
|
+
结构与交互只有上面这一份;任何档位都不许再写一遍 display/height/padding。
|
|
87
|
+
自定义颜色(Button 的 color 参数)同样只覆盖这 5 个变量(token 覆盖,不是新皮肤)。
|
|
88
|
+
|
|
89
|
+
⚠️ hover 不再用 opacity 压一层(用户 2026-10-19:「黑色和红色的按钮移上去变化太小,
|
|
90
|
+
完全感觉不到颜色变了」)⇒ 走 --dshpc-*-hover / -active 的明确混色,见 tokens-css.ts。 */
|
|
91
|
+
.dshpc-btn{--btn-bg:transparent;--btn-fg:var(--dshpc-fg);--btn-border:transparent;
|
|
92
|
+
--btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);--btn-fg-hover:var(--btn-fg);
|
|
93
|
+
appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
|
|
94
|
+
box-sizing:border-box;border:1px solid var(--btn-border);border-radius:var(--dshpc-radius-md);
|
|
95
|
+
background-color:var(--btn-bg);color:var(--btn-fg);font-family:inherit;font-weight:500;white-space:nowrap;cursor:pointer;
|
|
96
|
+
transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease),transform var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
97
|
+
.dshpc-btn--sm{height:var(--dshpc-control-h-sm);padding:0 10px;font-size:var(--dshpc-font-sm);line-height:var(--dshpc-line-sm);}
|
|
98
|
+
.dshpc-btn--md{height:var(--dshpc-control-h-md);padding:0 12px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
99
|
+
.dshpc-btn--lg{height:var(--dshpc-control-h-lg);padding:0 14px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
100
|
+
/* block:撑满父宽(表单底栏 / 抽屉底部的主操作) */
|
|
101
|
+
.dshpc-btn--block{display:flex;width:100%;}
|
|
102
|
+
.dshpc-btn__icon,.dshpc-btn__icon-end{display:inline-flex;align-items:center;justify-content:center;flex:none;}
|
|
103
|
+
/* loading:不换 DOM 结构,只在文案前插一个同色小圈(尺寸随字号,缩放不依赖常量) */
|
|
104
|
+
.dshpc-btn__spinner{display:inline-block;flex:none;width:1em;height:1em;box-sizing:border-box;
|
|
105
|
+
border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;
|
|
106
|
+
animation:dshpc-btn-spin .7s linear infinite;}
|
|
107
|
+
@keyframes dshpc-btn-spin{to{transform:rotate(360deg)}}
|
|
108
|
+
|
|
109
|
+
/* 交互态:颜色变化写在变量上 ⇒ 所有档位一次生效,且变化幅度由 token 决定(够明显) */
|
|
110
|
+
.dshpc-btn:hover:not(:disabled){background-color:var(--btn-bg-hover);color:var(--btn-fg-hover);}
|
|
111
|
+
.dshpc-btn:active:not(:disabled){background-color:var(--btn-bg-active);transform:translateY(1px);}
|
|
112
|
+
.dshpc-btn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}
|
|
113
|
+
.dshpc-btn:disabled{cursor:default;opacity:.5;}
|
|
114
|
+
|
|
115
|
+
.dshpc-btn--primary{--btn-bg:var(--dshpc-accent);--btn-fg:var(--dshpc-fg-inverse);
|
|
116
|
+
--btn-bg-hover:var(--dshpc-accent-hover);--btn-bg-active:var(--dshpc-accent-active);}
|
|
117
|
+
/* secondary:中性实心(灰面),用于「取消 / 次要」这类与主操作并排的按钮 */
|
|
118
|
+
.dshpc-btn--secondary{--btn-bg:var(--dshpc-hover);--btn-fg:var(--dshpc-fg);
|
|
119
|
+
--btn-bg-hover:var(--dshpc-active);--btn-bg-active:var(--dshpc-active);}
|
|
120
|
+
.dshpc-btn--outline{--btn-bg:var(--dshpc-surface-1);--btn-border:var(--dshpc-border-strong);
|
|
121
|
+
--btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}
|
|
122
|
+
.dshpc-btn--ghost{--btn-fg:var(--dshpc-fg-2);--btn-fg-hover:var(--dshpc-fg);
|
|
123
|
+
--btn-bg-hover:var(--dshpc-hover);--btn-bg-active:var(--dshpc-active);}
|
|
124
|
+
.dshpc-btn--danger{--btn-bg:var(--dshpc-danger);--btn-fg:var(--dshpc-on-signal);
|
|
125
|
+
--btn-bg-hover:var(--dshpc-danger-hover);--btn-bg-active:var(--dshpc-danger-active);}
|
|
126
|
+
.dshpc-btn--success{--btn-bg:var(--dshpc-success);--btn-fg:var(--dshpc-on-signal);
|
|
127
|
+
--btn-bg-hover:var(--dshpc-success-hover);--btn-bg-active:var(--dshpc-success-active);}
|
|
128
|
+
.dshpc-btn--warning{--btn-bg:var(--dshpc-warning);--btn-fg:var(--dshpc-on-warning);
|
|
129
|
+
--btn-bg-hover:var(--dshpc-warning-hover);--btn-bg-active:var(--dshpc-warning-active);}
|
|
130
|
+
.dshpc-btn--info{--btn-bg:var(--dshpc-business);--btn-fg:var(--dshpc-on-signal);
|
|
131
|
+
--btn-bg-hover:var(--dshpc-business-hover);--btn-bg-active:var(--dshpc-business-active);}
|
|
132
|
+
/* danger-outline:红字描边(破坏性次要操作,如卡片上的「删除」)。
|
|
133
|
+
⚠️ 旧修饰类 danger-ink 保留为别名(消费方可能还在挂),两者同一套皮肤。 */
|
|
134
|
+
.dshpc-btn--danger-outline,.dshpc-btn--danger-ink{--btn-border:var(--dshpc-danger);--btn-fg:var(--dshpc-danger);
|
|
135
|
+
--btn-fg-hover:var(--dshpc-danger);--btn-bg-hover:var(--dshpc-danger-soft);--btn-bg-active:var(--dshpc-danger-soft);}
|
|
94
136
|
/* link:行内文字链接型(会话 / 产出文件名),无底无边、品牌蓝、hover 下划线 */
|
|
95
|
-
.
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
.
|
|
137
|
+
.dshpc-btn--link{--btn-fg:var(--dshpc-link);--btn-fg-hover:var(--dshpc-link);
|
|
138
|
+
--btn-bg-hover:transparent;--btn-bg-active:transparent;
|
|
139
|
+
height:auto;padding:0;border:0;background:none;font-weight:400;text-align:left;}
|
|
140
|
+
.dshpc-btn--link:hover:not(:disabled){text-decoration:underline;}
|
|
141
|
+
|
|
142
|
+
/* 图标钮:纯图标,方形;尺寸档的宽高与同档文字按钮等高 */
|
|
143
|
+
.dshpc-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
|
|
144
|
+
border:1px solid transparent;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);
|
|
145
|
+
font-family:inherit;cursor:pointer;flex:none;
|
|
146
|
+
transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),opacity var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
147
|
+
.dshpc-iconbtn--sm{width:var(--dshpc-control-h-sm);height:var(--dshpc-control-h-sm);font-size:var(--dshpc-font-sm);}
|
|
148
|
+
.dshpc-iconbtn--md{width:var(--dshpc-control-h-md);height:var(--dshpc-control-h-md);font-size:var(--dshpc-font-md);}
|
|
149
|
+
.dshpc-iconbtn--lg{width:var(--dshpc-control-h-lg);height:var(--dshpc-control-h-lg);font-size:var(--dshpc-font-md);}
|
|
150
|
+
.dshpc-iconbtn--plain{color:var(--dshpc-fg-2);}
|
|
151
|
+
.dshpc-iconbtn--outline{background:var(--dshpc-surface-1);border-color:var(--dshpc-border);color:var(--dshpc-fg-2);}
|
|
152
|
+
.dshpc-iconbtn--danger{color:var(--dshpc-danger);}
|
|
153
|
+
.dshpc-iconbtn:hover:not(:disabled){background:var(--dshpc-hover);color:var(--dshpc-fg);}
|
|
154
|
+
.dshpc-iconbtn--danger:hover:not(:disabled){background:var(--dshpc-danger-soft);color:var(--dshpc-danger);}
|
|
155
|
+
.dshpc-iconbtn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}
|
|
156
|
+
.dshpc-iconbtn:disabled{cursor:default;opacity:.4;}
|
|
99
157
|
|
|
100
|
-
.
|
|
101
|
-
border:1px solid transparent;border-radius:var(--
|
|
158
|
+
.dshpc-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
|
|
159
|
+
border:1px solid transparent;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);
|
|
102
160
|
font-family:inherit;cursor:pointer;flex:none;
|
|
103
|
-
transition:background-color var(--
|
|
104
|
-
.
|
|
105
|
-
.
|
|
106
|
-
.
|
|
107
|
-
.
|
|
108
|
-
.
|
|
109
|
-
.
|
|
110
|
-
.
|
|
111
|
-
.
|
|
112
|
-
.
|
|
113
|
-
.
|
|
161
|
+
transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease),opacity var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
162
|
+
.dshpc-iconbtn--sm{width:var(--dshpc-control-h-sm);height:var(--dshpc-control-h-sm);font-size:var(--dshpc-font-sm);}
|
|
163
|
+
.dshpc-iconbtn--md{width:var(--dshpc-control-h-md);height:var(--dshpc-control-h-md);font-size:var(--dshpc-font-md);}
|
|
164
|
+
.dshpc-iconbtn--lg{width:var(--dshpc-control-h-lg);height:var(--dshpc-control-h-lg);font-size:var(--dshpc-font-md);}
|
|
165
|
+
.dshpc-iconbtn--plain{color:var(--dshpc-fg-2);}
|
|
166
|
+
.dshpc-iconbtn--outline{background:var(--dshpc-surface-1);border-color:var(--dshpc-border);color:var(--dshpc-fg-2);}
|
|
167
|
+
.dshpc-iconbtn--danger{color:var(--dshpc-danger);}
|
|
168
|
+
.dshpc-iconbtn:hover:not(:disabled){background:var(--dshpc-hover);color:var(--dshpc-fg);}
|
|
169
|
+
.dshpc-iconbtn--danger:hover:not(:disabled){background:var(--dshpc-hover);color:var(--dshpc-danger);}
|
|
170
|
+
.dshpc-iconbtn:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}
|
|
171
|
+
.dshpc-iconbtn:disabled{cursor:default;opacity:.4;}
|
|
114
172
|
|
|
115
173
|
/* ── 行式文件按钮(图标 + 文件名)P2:**全站唯一实现**(2026-10-04 收编)──────────
|
|
116
174
|
用途:「产出物 / 附件」那种**一行一个文件**的清单项(基础信息右栏产出物清单、附件区、
|
|
@@ -118,204 +176,204 @@ export const BUTTON_CSS = `
|
|
|
118
176
|
两个形态修饰类:
|
|
119
177
|
--block 撑满父宽(清单里一项一行)
|
|
120
178
|
--inline 内容宽(跟在文字后头,如附件行)
|
|
121
|
-
收编原因:这份皮肤此前只写在 task-list.tsx 的 TASK_LIST_CSS 里(旧名 .
|
|
179
|
+
收编原因:这份皮肤此前只写在 task-list.tsx 的 TASK_LIST_CSS 里(旧名 .dshpc-info-out),
|
|
122
180
|
执行记录页展开区要用同一种观感 ⇒ 上提基础层,避免再出现「各写一份外观」(同名不同皮的坑刚踩过)。 */
|
|
123
|
-
.
|
|
124
|
-
background:transparent;color:var(--
|
|
125
|
-
transition:background-color var(--
|
|
126
|
-
.
|
|
127
|
-
.
|
|
128
|
-
.
|
|
129
|
-
.
|
|
130
|
-
padding:4px 6px;font-size:var(--
|
|
131
|
-
.
|
|
181
|
+
.dshpc-filechip{appearance:none;-webkit-appearance:none;border:0;border-radius:var(--dshpc-radius-xs);
|
|
182
|
+
background:transparent;color:var(--dshpc-fg);font:inherit;text-align:left;cursor:pointer;min-width:0;
|
|
183
|
+
transition:background-color var(--dshpc-dur) var(--dshpc-ease);}
|
|
184
|
+
.dshpc-filechip:hover:not(:disabled){background:var(--dshpc-chip-bg);}
|
|
185
|
+
.dshpc-filechip:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px;}
|
|
186
|
+
.dshpc-filechip:disabled{cursor:default;background:transparent;color:var(--dshpc-fg-3);}
|
|
187
|
+
.dshpc-filechip--block{display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;
|
|
188
|
+
padding:4px 6px;font-size:var(--dshpc-font-xs);}
|
|
189
|
+
.dshpc-filechip--inline{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;font-size:var(--dshpc-font-sm);}
|
|
132
190
|
|
|
133
|
-
@media (prefers-reduced-motion: reduce){.
|
|
191
|
+
@media (prefers-reduced-motion: reduce){.dshpc-btn,.dshpc-iconbtn,.dshpc-filechip{transition:none;}}
|
|
134
192
|
`;
|
|
135
193
|
export const FIELD_CSS = `
|
|
136
194
|
/* ── 输入类 P3 ────────────────────────────────────────────────────────── */
|
|
137
|
-
.
|
|
138
|
-
background:var(--
|
|
139
|
-
transition:border-color var(--
|
|
140
|
-
.
|
|
141
|
-
.
|
|
142
|
-
.
|
|
143
|
-
.
|
|
144
|
-
.
|
|
145
|
-
.
|
|
146
|
-
.
|
|
195
|
+
.dshpc-input{box-sizing:border-box;border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);
|
|
196
|
+
background:var(--dshpc-surface-1);color:var(--dshpc-fg);font-family:inherit;outline:none;
|
|
197
|
+
transition:border-color var(--dshpc-dur-fast) var(--dshpc-ease),box-shadow var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
198
|
+
.dshpc-input--sm{height:var(--dshpc-control-h-sm);padding:0 8px;font-size:var(--dshpc-font-sm);line-height:var(--dshpc-line-sm);}
|
|
199
|
+
.dshpc-input--md{height:var(--dshpc-control-h-md);padding:0 10px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
200
|
+
.dshpc-input--lg{height:var(--dshpc-control-h-lg);padding:0 12px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
201
|
+
.dshpc-input::placeholder{color:var(--dshpc-fg-dim);}
|
|
202
|
+
.dshpc-input:focus{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus);}
|
|
203
|
+
.dshpc-input--error{border-color:var(--dshpc-danger);}
|
|
204
|
+
.dshpc-input:disabled{cursor:default;opacity:.5;}
|
|
147
205
|
|
|
148
|
-
.
|
|
149
|
-
border:1px solid var(--
|
|
150
|
-
.
|
|
151
|
-
.
|
|
152
|
-
.
|
|
206
|
+
.dshpc-pfx{display:inline-flex;align-items:center;box-sizing:border-box;overflow:hidden;
|
|
207
|
+
border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);background:var(--dshpc-surface-1);color:var(--dshpc-fg);}
|
|
208
|
+
.dshpc-pfx--sm{height:var(--dshpc-control-h-sm);}
|
|
209
|
+
.dshpc-pfx--md{height:var(--dshpc-control-h-md);}
|
|
210
|
+
.dshpc-pfx--lg{height:var(--dshpc-control-h-lg);}
|
|
153
211
|
/* md / lg 档字号跟档走(与同档下拉同字号):此前写死 sm(12px),同排下拉是 13px ⇒ 显得「input 字小」。 */
|
|
154
|
-
.
|
|
155
|
-
.
|
|
156
|
-
.
|
|
157
|
-
.
|
|
158
|
-
.
|
|
159
|
-
.
|
|
160
|
-
font-family:inherit;font-size:var(--
|
|
161
|
-
.
|
|
212
|
+
.dshpc-pfx--md .dshpc-pfx__label,.dshpc-pfx--lg .dshpc-pfx__label{font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
213
|
+
.dshpc-pfx--md .dshpc-pfx__input,.dshpc-pfx--lg .dshpc-pfx__input{font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
214
|
+
.dshpc-pfx--error{border-color:var(--dshpc-danger);}
|
|
215
|
+
.dshpc-pfx:focus-within{border-color:var(--dshpc-focus);box-shadow:0 0 0 1px var(--dshpc-focus);}
|
|
216
|
+
.dshpc-pfx__label{padding:0 8px;color:var(--dshpc-fg-2);font-size:var(--dshpc-font-sm);line-height:var(--dshpc-line-sm);white-space:nowrap;border-right:1px solid var(--dshpc-border);}
|
|
217
|
+
.dshpc-pfx__input{flex:1 1 auto;min-width:0;height:100%;padding:0 8px;border:0;background:transparent;color:var(--dshpc-fg);
|
|
218
|
+
font-family:inherit;font-size:var(--dshpc-font-sm);line-height:var(--dshpc-line-sm);outline:none;}
|
|
219
|
+
.dshpc-pfx__input::placeholder{color:var(--dshpc-fg-dim);}
|
|
162
220
|
|
|
163
|
-
.
|
|
164
|
-
border:1px solid var(--
|
|
221
|
+
.dshpc-num{display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;overflow:hidden;
|
|
222
|
+
border:1px solid var(--dshpc-border);border-radius:var(--dshpc-radius-md);background:var(--dshpc-surface-1);color:var(--dshpc-fg);}
|
|
165
223
|
/* 中段:数字 + 后缀成组居中;容器被消费端拉宽时吃掉全部余量,两端 − / + 因此钉死在左右边缘。 */
|
|
166
|
-
.
|
|
167
|
-
.
|
|
168
|
-
.
|
|
169
|
-
.
|
|
170
|
-
.
|
|
171
|
-
.
|
|
172
|
-
.
|
|
173
|
-
.
|
|
174
|
-
font-family:inherit;font-size:var(--
|
|
175
|
-
.
|
|
176
|
-
.
|
|
224
|
+
.dshpc-num__mid{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;}
|
|
225
|
+
.dshpc-num--sm{height:var(--dshpc-control-h-sm);}
|
|
226
|
+
.dshpc-num--md{height:var(--dshpc-control-h-md);}
|
|
227
|
+
.dshpc-num--lg{height:var(--dshpc-control-h-lg);}
|
|
228
|
+
.dshpc-num--md .dshpc-num__input,.dshpc-num--lg .dshpc-num__input{font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
229
|
+
.dshpc-num--md .dshpc-num__suffix,.dshpc-num--lg .dshpc-num__suffix{font-size:var(--dshpc-font-md);}
|
|
230
|
+
.dshpc-num--disabled{opacity:.5;}
|
|
231
|
+
.dshpc-num__input{width:36px;height:100%;padding:0 2px;border:0;background:transparent;color:var(--dshpc-fg);
|
|
232
|
+
font-family:inherit;font-size:var(--dshpc-font-sm);line-height:var(--dshpc-line-sm);text-align:center;outline:none;}
|
|
233
|
+
.dshpc-num__suffix{padding:0 6px;color:var(--dshpc-fg-2);font-size:var(--dshpc-font-sm);white-space:nowrap;}
|
|
234
|
+
.dshpc-num .dshpc-iconbtn{border-radius:0;color:var(--dshpc-fg-2);flex:none;}
|
|
177
235
|
|
|
178
236
|
/* 官方 Switch 包装统一:选中 = success 绿。
|
|
179
237
|
(合并原先 task-editor-css / task-list 两处就地覆盖;选择器带包装类 + role,特异性高于官方。) */
|
|
180
|
-
.
|
|
238
|
+
.dshpc-switch button[role='switch'][aria-checked='true']{background:var(--dshpc-success);}
|
|
181
239
|
|
|
182
240
|
/* 多行文本输入(提示词等,P3):卡内无边框(视觉重心在整张卡上),占位色走 dimmed;校验不通过描红盒。
|
|
183
|
-
(从 task-editor-css 的 .
|
|
184
|
-
.
|
|
185
|
-
.
|
|
186
|
-
.
|
|
241
|
+
(从 task-editor-css 的 .dshpc-ed-prompt 上提而来;业务文件不再自写 textarea 皮肤。) */
|
|
242
|
+
.dshpc-textarea{display:block;width:100%;box-sizing:border-box;min-height:132px;padding:2px;border:none;outline:none;background:0 0;color:var(--dshpc-fg);font:inherit;font-size:var(--dshpc-font-lg);line-height:1.6;resize:vertical;}
|
|
243
|
+
.dshpc-textarea::placeholder{color:var(--dshpc-fg-dim);}
|
|
244
|
+
.dshpc-textarea--error{box-shadow:0 0 0 1px var(--dshpc-danger);}
|
|
187
245
|
|
|
188
246
|
/* 拖拽分隔条(编辑分栏 / 预览 dock 共用,U20 #3):6px 命中区,col-resize,不画线,hover/按下浮出浅带。
|
|
189
|
-
具体 z-index 由 .
|
|
190
|
-
.
|
|
191
|
-
.
|
|
247
|
+
具体 z-index 由 .dshpc-ed-resizer / .dshpc-sv-resizer 各自补。 */
|
|
248
|
+
.dshpc-resizer{position:absolute;top:0;bottom:0;left:0;width:6px;cursor:col-resize;background:0 0;touch-action:none;user-select:none;}
|
|
249
|
+
.dshpc-resizer:hover,.dshpc-resizer:active{background:var(--dshpc-hover,rgba(38,49,72,.06));}
|
|
192
250
|
|
|
193
|
-
@media (prefers-reduced-motion: reduce){.
|
|
251
|
+
@media (prefers-reduced-motion: reduce){.dshpc-input,.dshpc-pfx{transition:none;}}
|
|
194
252
|
`;
|
|
195
253
|
export const DATETIME_CSS = `
|
|
196
254
|
/* ── 日期 / 时间 P4 ───────────────────────────────────────────────────── */
|
|
197
|
-
.
|
|
198
|
-
/* ⚠️ 边框粗细 / 圆角必须与下拉锚点(
|
|
255
|
+
.dshpc-dtf-wrap{display:inline-flex;position:relative;min-width:0;}
|
|
256
|
+
/* ⚠️ 边框粗细 / 圆角必须与下拉锚点(dshpc-ed-field 的 fieldButtonStyle)完全一致
|
|
199
257
|
(用户 2026-10-02 点名:同排的日期框与下拉框看着不是一套)⇒ 这里也是 0.5px + radius-md。 */
|
|
200
|
-
.
|
|
201
|
-
min-width:0;max-width:100%;padding:0 8px;border:0.5px solid var(--
|
|
202
|
-
background:var(--
|
|
203
|
-
cursor:pointer;transition:background-color var(--
|
|
258
|
+
.dshpc-dtf{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:var(--dshpc-control-h-lg);
|
|
259
|
+
min-width:0;max-width:100%;padding:0 8px;border:0.5px solid var(--dshpc-border-heavy);border-radius:var(--dshpc-radius-md);
|
|
260
|
+
background:var(--dshpc-surface-1);color:var(--dshpc-fg);font:inherit;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);
|
|
261
|
+
cursor:pointer;transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),border-color var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
204
262
|
/* 日期 / 时间锚点:三档高度(默认 lg=32)。base 已含 lg 高度作兜底,下面三档按 size 覆盖。 */
|
|
205
|
-
.
|
|
206
|
-
.
|
|
207
|
-
.
|
|
208
|
-
.
|
|
209
|
-
.
|
|
210
|
-
.
|
|
211
|
-
.
|
|
212
|
-
.
|
|
213
|
-
.
|
|
263
|
+
.dshpc-dtf--sm{height:var(--dshpc-control-h-sm);padding:0 6px;font-size:var(--dshpc-font-sm);line-height:var(--dshpc-line-sm);}
|
|
264
|
+
.dshpc-dtf--md{height:var(--dshpc-control-h-md);padding:0 8px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
265
|
+
.dshpc-dtf--lg{height:var(--dshpc-control-h-lg);padding:0 8px;font-size:var(--dshpc-font-md);line-height:var(--dshpc-line-md);}
|
|
266
|
+
.dshpc-dtf:hover:not(:disabled){background:var(--dshpc-hover);}
|
|
267
|
+
.dshpc-dtf:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}
|
|
268
|
+
.dshpc-dtf:disabled{cursor:not-allowed;opacity:.6;}
|
|
269
|
+
.dshpc-dtf__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
|
|
270
|
+
.dshpc-dtf__label--ph{color:var(--dshpc-fg-dim);}
|
|
271
|
+
.dshpc-dtf__icon{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;flex:none;color:var(--dshpc-fg-3);}
|
|
214
272
|
|
|
215
|
-
.
|
|
216
|
-
box-shadow:var(--
|
|
273
|
+
.dshpc-layer{position:fixed;z-index:var(--dshpc-z-menu);box-sizing:border-box;padding:8px;background:var(--dshpc-surface-1);
|
|
274
|
+
box-shadow:var(--dshpc-shadow-2);border-radius:var(--dshpc-radius-md);color:var(--dshpc-fg);font-size:var(--dshpc-font-md);}
|
|
217
275
|
|
|
218
|
-
.
|
|
219
|
-
.
|
|
220
|
-
.
|
|
221
|
-
.
|
|
222
|
-
.
|
|
223
|
-
border:1px solid transparent;border-radius:var(--
|
|
224
|
-
font:inherit;font-size:var(--
|
|
225
|
-
transition:background-color var(--
|
|
226
|
-
.
|
|
227
|
-
.
|
|
228
|
-
.
|
|
229
|
-
.
|
|
230
|
-
.
|
|
276
|
+
.dshpc-cal__head{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:4px;}
|
|
277
|
+
.dshpc-cal__title{flex:1 1 auto;text-align:center;font-size:var(--dshpc-font-md);font-weight:600;color:var(--dshpc-fg);}
|
|
278
|
+
.dshpc-cal__grid{display:grid;grid-template-columns:repeat(7,32px);gap:2px;}
|
|
279
|
+
.dshpc-cal__weekday{height:24px;display:flex;align-items:center;justify-content:center;font-size:var(--dshpc-font-sm);color:var(--dshpc-fg-3);}
|
|
280
|
+
.dshpc-cal__cell{width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;
|
|
281
|
+
border:1px solid transparent;border-radius:var(--dshpc-radius-md);background:transparent;color:var(--dshpc-fg);
|
|
282
|
+
font:inherit;font-size:var(--dshpc-font-md);cursor:pointer;
|
|
283
|
+
transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
284
|
+
.dshpc-cal__cell--hover{background:var(--dshpc-hover);}
|
|
285
|
+
.dshpc-cal__cell--out{color:var(--dshpc-fg-dim);}
|
|
286
|
+
.dshpc-cal__cell--today{border-color:var(--dshpc-business);}
|
|
287
|
+
.dshpc-cal__cell[aria-pressed='true']{background:var(--dshpc-accent);color:var(--dshpc-fg-inverse);}
|
|
288
|
+
.dshpc-cal__foot{margin-top:6px;padding-top:6px;border-top:1px solid var(--dshpc-border);}
|
|
231
289
|
|
|
232
|
-
.
|
|
233
|
-
.
|
|
234
|
-
.
|
|
235
|
-
font:inherit;font-size:var(--
|
|
236
|
-
.
|
|
237
|
-
.
|
|
290
|
+
.dshpc-time__cols{display:flex;gap:4px;}
|
|
291
|
+
.dshpc-time__list{width:56px;max-height:196px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
|
|
292
|
+
.dshpc-time__opt{padding:5px 0;border:0;border-radius:var(--dshpc-radius-sm);background:transparent;color:var(--dshpc-fg-2);
|
|
293
|
+
font:inherit;font-size:var(--dshpc-font-md);cursor:pointer;transition:background-color var(--dshpc-dur-fast) var(--dshpc-ease),color var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
294
|
+
.dshpc-time__opt[aria-selected='true']{background:var(--dshpc-hover);color:var(--dshpc-fg);font-weight:600;}
|
|
295
|
+
.dshpc-time__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding-top:6px;border-top:1px solid var(--dshpc-border);}
|
|
238
296
|
|
|
239
|
-
@media (prefers-reduced-motion: reduce){.
|
|
297
|
+
@media (prefers-reduced-motion: reduce){.dshpc-dtf,.dshpc-cal__cell,.dshpc-time__opt{transition:none;}}
|
|
240
298
|
`;
|
|
241
299
|
export const SELECT_CSS = `
|
|
242
300
|
/* 下拉 / 日历 / 时分锚点:键盘可达性描边 + 校验描红(类名从业务层沿用,皮肤归位基础层) */
|
|
243
|
-
.
|
|
244
|
-
.
|
|
301
|
+
.dshpc-ed-field:focus-visible{outline:2px solid var(--dshpc-business);outline-offset:1px;}
|
|
302
|
+
.dshpc-ed-field--error{border-color:var(--dshpc-danger)!important;box-shadow:0 0 0 1px var(--dshpc-danger);}
|
|
245
303
|
/* 整行下拉:官方 Menu 的包装 span 是 inline-flex(shrink-to-fit),要连它一起撑满 */
|
|
246
|
-
.
|
|
304
|
+
.dshpc-ed-selectwrap{width:100%;}
|
|
247
305
|
|
|
248
306
|
/* 省略号三件套(ui-style-guide §三「待抽象 #1」的收敛点):**新代码一律挂这个类**,不再各写一遍。
|
|
249
307
|
⚠️ 已有 19 处旧写法待逐步收编(2026-10-04 起新增的调用点不许再手写这三条属性)。 */
|
|
250
|
-
.
|
|
308
|
+
.dshpc-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
251
309
|
|
|
252
310
|
/* 跑马灯文本(MarqueeText):双层——外层只裁剪,内层才 transform 滚动;非 hover 内层自带省略号 */
|
|
253
|
-
.
|
|
254
|
-
.
|
|
311
|
+
.dshpc-mq{display:block;overflow:hidden;white-space:nowrap;}
|
|
312
|
+
.dshpc-mq .dshpc-mq-in{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top;}
|
|
255
313
|
/* ⚠️ 跑法(用户 2026-10-03 拍板):**跑一遍、停在尾字**(播放 1 次 + forwards),不来回弹、不无限跑。
|
|
256
314
|
滚距 = 精确溢出量 ⇒ 停下时最后一个字正好贴右缘,**不会跑进黑块**(黑块是旧手写版把
|
|
257
315
|
内层盒子裁了、按「半截文本」平移导致的)。鼠标移开 ⇒ :hover 失效 ⇒ 自动复位回省略号态。 */
|
|
258
|
-
.
|
|
259
|
-
@keyframes
|
|
316
|
+
.dshpc-mq-run:hover .dshpc-mq-in{max-width:none;overflow:visible;animation:dshpc-mq-scroll var(--dshpc-mq-dur,6s) linear .4s 1 forwards;}
|
|
317
|
+
@keyframes dshpc-mq-scroll{from{transform:translateX(0)}to{transform:translateX(var(--dshpc-mq-dist,-40px))}}
|
|
260
318
|
`;
|
|
261
319
|
export const LOADING_CSS = `
|
|
262
320
|
/* 运行中 / loading 的活动指示:三个小方块依次脉动。 */
|
|
263
|
-
@keyframes
|
|
264
|
-
.
|
|
265
|
-
.
|
|
266
|
-
.
|
|
267
|
-
.
|
|
268
|
-
@media (prefers-reduced-motion: reduce) { .
|
|
321
|
+
@keyframes dshpc-run-block { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8) } 40% { opacity: 1; transform: scale(1) } }
|
|
322
|
+
.dshpc-run-blocks { display: inline-flex; align-items: center; gap: 3px; }
|
|
323
|
+
.dshpc-run-blocks > i { width: 5px; height: 5px; border-radius: 1px; background: currentColor; animation: dshpc-run-block 1.2s ease-in-out infinite; }
|
|
324
|
+
.dshpc-run-blocks > i:nth-child(2) { animation-delay: 0.15s; }
|
|
325
|
+
.dshpc-run-blocks > i:nth-child(3) { animation-delay: 0.3s; }
|
|
326
|
+
@media (prefers-reduced-motion: reduce) { .dshpc-run-blocks > i { animation: none; opacity: 1; } }
|
|
269
327
|
`;
|
|
270
328
|
export const BACK_TO_TOP_CSS = `
|
|
271
329
|
/* 回到顶部悬浮钮:圆钮、实面、投影;默认隐身,滚过阈值加 .is-visible 才显形。
|
|
272
330
|
横向 left 由组件按主内容列右缘实时算出(贴在其右侧外侧),不写死。 */
|
|
273
|
-
.
|
|
331
|
+
.dshpc-backtotop{
|
|
274
332
|
position:fixed;
|
|
275
|
-
bottom:var(--
|
|
276
|
-
z-index:var(--
|
|
333
|
+
bottom:var(--dshpc-space-4);
|
|
334
|
+
z-index:var(--dshpc-z-dock);
|
|
277
335
|
width:44px;height:44px;
|
|
278
336
|
display:inline-flex;align-items:center;justify-content:center;
|
|
279
337
|
padding:0;margin:0;
|
|
280
338
|
box-sizing:border-box;
|
|
281
|
-
border:1px solid var(--
|
|
339
|
+
border:1px solid var(--dshpc-border);
|
|
282
340
|
border-radius:50%;
|
|
283
|
-
background:var(--
|
|
284
|
-
color:var(--
|
|
285
|
-
box-shadow:var(--
|
|
341
|
+
background:var(--dshpc-solid);
|
|
342
|
+
color:var(--dshpc-on-solid);
|
|
343
|
+
box-shadow:var(--dshpc-shadow-2);
|
|
286
344
|
cursor:pointer;
|
|
287
345
|
opacity:0;
|
|
288
346
|
transform:translateY(8px) scale(.92);
|
|
289
|
-
transition:opacity var(--
|
|
290
|
-
transform var(--
|
|
291
|
-
background-color var(--
|
|
347
|
+
transition:opacity var(--dshpc-dur) var(--dshpc-ease),
|
|
348
|
+
transform var(--dshpc-dur) var(--dshpc-ease),
|
|
349
|
+
background-color var(--dshpc-dur-fast) var(--dshpc-ease);
|
|
292
350
|
pointer-events:none;
|
|
293
351
|
}
|
|
294
|
-
.
|
|
295
|
-
.
|
|
296
|
-
.
|
|
297
|
-
.
|
|
352
|
+
.dshpc-backtotop.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
|
|
353
|
+
.dshpc-backtotop:hover{background:var(--dshpc-hover);}
|
|
354
|
+
.dshpc-backtotop:active{background:var(--dshpc-active);}
|
|
355
|
+
.dshpc-backtotop:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:2px;}
|
|
298
356
|
@media (prefers-reduced-motion: reduce){
|
|
299
|
-
.
|
|
357
|
+
.dshpc-backtotop{transition:opacity var(--dshpc-dur-fast) linear;transform:none;}
|
|
300
358
|
}
|
|
301
359
|
`;
|
|
302
360
|
export const HINT_CSS = `
|
|
303
361
|
/* ── 问号提示 P4(用户 2026-10-18:对齐真实插件 HelpButton——**带圈的问号图标**)──
|
|
304
|
-
本体 16px 细圈 + 圈内 ?,颜色 fg-3、hover 只提亮不加底(与
|
|
362
|
+
本体 16px 细圈 + 圈内 ?,颜色 fg-3、hover 只提亮不加底(与 dshpc-ed-help 同规矩)。
|
|
305
363
|
纯 CSS tooltip:hover / 键盘聚焦浮出气泡,零 JS。独立组件,标题后、行尾随处可挂。 */
|
|
306
|
-
.
|
|
364
|
+
.dshpc-hint{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
|
|
307
365
|
box-sizing:border-box;width:14px;height:14px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;
|
|
308
|
-
color:var(--
|
|
309
|
-
transition:color var(--
|
|
310
|
-
.
|
|
311
|
-
.
|
|
312
|
-
.
|
|
366
|
+
color:var(--dshpc-fg-3);font-family:inherit;font-size:8px;font-weight:600;line-height:12px;cursor:help;vertical-align:middle;
|
|
367
|
+
transition:color var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
368
|
+
.dshpc-hint:hover,.dshpc-hint:focus-visible{color:var(--dshpc-fg);background:0 0;}
|
|
369
|
+
.dshpc-hint:focus-visible{outline:2px solid var(--dshpc-focus);outline-offset:1px;}
|
|
370
|
+
.dshpc-hint__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
|
|
313
371
|
box-sizing:border-box;width:max-content;max-width:280px;padding:8px 10px;
|
|
314
|
-
border-radius:var(--
|
|
315
|
-
font-size:var(--
|
|
316
|
-
box-shadow:var(--
|
|
372
|
+
border-radius:var(--dshpc-radius-sm);background:var(--dshpc-solid);color:var(--dshpc-on-solid);
|
|
373
|
+
font-size:var(--dshpc-font-xs);line-height:1.7;text-align:left;white-space:normal;
|
|
374
|
+
box-shadow:var(--dshpc-shadow-2);z-index:var(--dshpc-z-menu);
|
|
317
375
|
opacity:0;visibility:hidden;pointer-events:none;
|
|
318
|
-
transition:opacity var(--
|
|
319
|
-
.
|
|
376
|
+
transition:opacity var(--dshpc-dur-fast) var(--dshpc-ease);}
|
|
377
|
+
.dshpc-hint:hover .dshpc-hint__bubble,.dshpc-hint:focus-visible .dshpc-hint__bubble{opacity:1;visibility:visible;}
|
|
320
378
|
`;
|
|
321
379
|
//# sourceMappingURL=controls-css.js.map
|