dsh-plugin-core 0.16.0 → 0.17.0
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/dist/ui/Card.d.ts +19 -2
- package/dist/ui/Card.d.ts.map +1 -1
- package/dist/ui/Card.js +35 -9
- package/dist/ui/Card.js.map +1 -1
- package/dist/ui/Surface.d.ts +43 -0
- package/dist/ui/Surface.d.ts.map +1 -0
- package/dist/ui/Surface.js +39 -0
- package/dist/ui/Surface.js.map +1 -0
- package/dist/ui/card-css.generated.d.ts +1 -1
- package/dist/ui/card-css.generated.d.ts.map +1 -1
- package/dist/ui/card-css.generated.js +1 -1
- package/dist/ui/card-css.generated.js.map +1 -1
- package/dist/ui/index.d.ts +2 -1
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +1 -0
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/surface-css.d.ts +2 -0
- package/dist/ui/surface-css.d.ts.map +1 -0
- package/dist/ui/surface-css.generated.d.ts +2 -0
- package/dist/ui/surface-css.generated.d.ts.map +1 -0
- package/dist/ui/surface-css.generated.js +4 -0
- package/dist/ui/surface-css.generated.js.map +1 -0
- package/dist/ui/surface-css.js +7 -0
- package/dist/ui/surface-css.js.map +1 -0
- package/docs/help/ui.doc.ts +39 -3
- package/docs/help/ui.md +34 -3
- package/package.json +1 -1
package/dist/ui/Card.d.ts
CHANGED
|
@@ -3,9 +3,24 @@ import { type Translate } from '../utils/i18n.js';
|
|
|
3
3
|
/** 色条档位（映射到 design 的 token，不新增 token；也接受任意 CSS 颜色值）。 */
|
|
4
4
|
export declare const CARD_ACCENTS: readonly ["business", "success", "warning", "danger", "neutral", "purple", "pink", "cyan", "teal", "orange", "indigo", "rose", "slate"];
|
|
5
5
|
export type CardAccent = (typeof CARD_ACCENTS)[number];
|
|
6
|
+
/** 色条方位与几何；不给就用默认（左侧、6px 宽、距边 12、距内容 12）。 */
|
|
7
|
+
export interface CardBarOptions {
|
|
8
|
+
/** 贴哪条边（默认 `left`）；`StripCard` 固定贴左，忽略此项。 */
|
|
9
|
+
side?: 'left' | 'right' | 'top' | 'bottom';
|
|
10
|
+
/** 条子粗细（默认 6px）。 */
|
|
11
|
+
size?: number | string;
|
|
12
|
+
/** 条子距卡片边缘的距离（默认 12px）。 */
|
|
13
|
+
inset?: number | string;
|
|
14
|
+
/** 条子距内容的距离（默认 12px）。 */
|
|
15
|
+
gap?: number | string;
|
|
16
|
+
/** 上下方位时的条长（默认 `100%` = 跟内容同宽）；左右方位忽略。 */
|
|
17
|
+
length?: number | string;
|
|
18
|
+
}
|
|
6
19
|
export interface CardSharedProps {
|
|
7
|
-
/**
|
|
20
|
+
/** 色条档位或任意 CSS 颜色值（如 `'#f59e0b'`）。 */
|
|
8
21
|
accent?: CardAccent | string;
|
|
22
|
+
/** 色条方位与几何；默认左侧。 */
|
|
23
|
+
bar?: CardBarOptions;
|
|
9
24
|
/** 展开态（决定箭头朝向与 `panel` 显隐）。 */
|
|
10
25
|
expanded?: boolean;
|
|
11
26
|
/** 传了才显示右侧折叠箭头（全站唯一的 Chevron）；由调用方管展开状态。 */
|
|
@@ -21,12 +36,14 @@ export interface CardSharedProps {
|
|
|
21
36
|
translate?: Translate;
|
|
22
37
|
}
|
|
23
38
|
/**
|
|
24
|
-
*
|
|
39
|
+
* 卡片（框式）：复用 `Surface` 外框（surface 底 + 1px 边框 + 圆角 12），
|
|
40
|
+
* 色条默认贴左缘、6px 粗、圆角短条（高度随内容）；`bar.side` 可换成右/上/下。
|
|
25
41
|
* 头部整体垂直居中；悬停浮出的按钮、一行两行由调用方在框内自定。
|
|
26
42
|
*
|
|
27
43
|
* ```tsx
|
|
28
44
|
* h(Card, {
|
|
29
45
|
* accent: 'warning',
|
|
46
|
+
* bar: { side: 'right', inset: 10, gap: 8 },
|
|
30
47
|
* action: h(Button, { size: 'sm', variant: 'ghost' }, '跳过'),
|
|
31
48
|
* }, h('div', null, '标题 + 内容'))
|
|
32
49
|
* ```
|
package/dist/ui/Card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/ui/Card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAK,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/ui/Card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAK,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAMpD,wDAAwD;AACxD,eAAO,MAAM,YAAY,yIAGf,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,6CAA6C;AAC7C,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;IAC1C,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC5B,oBAAoB;IACpB,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AA0FD;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAEjE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAEtE"}
|
package/dist/ui/Card.js
CHANGED
|
@@ -3,39 +3,63 @@ import { Chevron } from './chevron.js';
|
|
|
3
3
|
import { t } from '../utils/i18n.js';
|
|
4
4
|
import { ensureComponentStyles } from './css.js';
|
|
5
5
|
import { CARD_CSS } from './card-css.js';
|
|
6
|
+
import { SURFACE_CSS } from './surface-css.js';
|
|
7
|
+
import { surfaceClass } from './Surface.js';
|
|
6
8
|
/** 色条档位（映射到 design 的 token，不新增 token；也接受任意 CSS 颜色值）。 */
|
|
7
9
|
export const CARD_ACCENTS = [
|
|
8
10
|
'business', 'success', 'warning', 'danger', 'neutral',
|
|
9
11
|
'purple', 'pink', 'cyan', 'teal', 'orange', 'indigo', 'rose', 'slate',
|
|
10
12
|
];
|
|
13
|
+
/** 数字按 px 写进 CSS 变量，字符串原样透传。 */
|
|
14
|
+
function lengthOf(value) {
|
|
15
|
+
return typeof value === 'number' ? `${value}px` : value;
|
|
16
|
+
}
|
|
11
17
|
/**
|
|
12
18
|
* 内部共享壳：两个公开组件（`Card` / `StripCard`）只是 `kind` 不同——
|
|
13
19
|
* 一个组件一种外观，import 即表明用的是哪种。
|
|
14
20
|
*
|
|
21
|
+
* 外框（底 / 边框 / 圆角）来自 `Surface`（圆角统一 12）；本壳只管色条几何与头部布局。
|
|
15
22
|
* 两种外观的头部都是**整体垂直居中**（`align-items:center`）：调用方在 `action` 里
|
|
16
23
|
* 裸放一个元素（按钮 / 文字 / 图标）即垂直居中，不用自己套容器；框内一行两行、
|
|
17
24
|
* 右侧放什么、悬停浮出的按钮，都由调用方在框内自定——外壳只提供框与居中。
|
|
18
25
|
*/
|
|
19
26
|
function CardShell(kind, props) {
|
|
27
|
+
// Surface 是外框契约（圆角统一 12）：先注入它，再注入本皮肤。两份都按需注入、幂等。
|
|
28
|
+
ensureComponentStyles('surface', SURFACE_CSS);
|
|
20
29
|
ensureComponentStyles('card', CARD_CSS);
|
|
21
30
|
const tt = props.translate ?? t;
|
|
22
31
|
const accent = props.accent ?? 'business';
|
|
23
32
|
const isPreset = CARD_ACCENTS.includes(accent);
|
|
33
|
+
const bar = props.bar ?? {};
|
|
34
|
+
// StripCard 固定贴左；Card 默认左侧，可换任意一边。
|
|
35
|
+
const side = kind === 'strip' ? 'left' : bar.side ?? 'left';
|
|
24
36
|
const classes = [
|
|
37
|
+
// strip = 方角 + 透明占位边框；两种外观都**不吃 Surface 的内距**（内距由色条贴边算）。
|
|
38
|
+
surfaceClass(kind === 'strip' ? { radius: 'none', border: 'none', padding: null } : { padding: null }),
|
|
25
39
|
'dshpc-card',
|
|
26
40
|
kind === 'strip' ? 'dshpc-card--strip' : 'dshpc-card--bordered',
|
|
41
|
+
`dshpc-card--bar-${side}`,
|
|
27
42
|
isPreset ? `dshpc-card--${accent}` : '',
|
|
28
43
|
props.className ?? '',
|
|
29
44
|
]
|
|
30
45
|
.filter((s) => s !== '')
|
|
31
46
|
.join(' ');
|
|
32
|
-
//
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
47
|
+
// 自定义色与色条几何都走 CSS 变量（档位则用 class 里的 token）
|
|
48
|
+
const vars = {};
|
|
49
|
+
if (!isPreset)
|
|
50
|
+
vars['--card-accent'] = accent;
|
|
51
|
+
if (bar.size !== undefined)
|
|
52
|
+
vars['--card-bar-size'] = lengthOf(bar.size);
|
|
53
|
+
if (bar.inset !== undefined)
|
|
54
|
+
vars['--card-bar-inset'] = lengthOf(bar.inset);
|
|
55
|
+
if (bar.gap !== undefined)
|
|
56
|
+
vars['--card-bar-gap'] = lengthOf(bar.gap);
|
|
57
|
+
if (bar.length !== undefined)
|
|
58
|
+
vars['--card-bar-length'] = lengthOf(bar.length);
|
|
59
|
+
const style = { ...props.style, ...vars };
|
|
60
|
+
return h('div', { className: classes, style }, h('div', { className: 'dshpc-card__body' },
|
|
61
|
+
// 色条是 body 的第一个子元素：DOM 顺序恒定，左/上 = 天然在前，右/下靠 order 排到头部之后。
|
|
62
|
+
h('span', { className: 'dshpc-card__bar', 'aria-hidden': true }), h('div', { className: 'dshpc-card__head' }, h('div', { className: 'dshpc-card__main' }, props.children ?? null), props.action === undefined && props.onToggle === undefined
|
|
39
63
|
? null
|
|
40
64
|
: h('div', { className: 'dshpc-card__side' }, props.action ?? null, props.onToggle === undefined
|
|
41
65
|
? null
|
|
@@ -47,17 +71,19 @@ function CardShell(kind, props) {
|
|
|
47
71
|
onClick: props.onToggle,
|
|
48
72
|
},
|
|
49
73
|
// 箭头走全站唯一的 Chevron（不再写 ▾ 字形）；旋转由外层 .is-open 承担，动画不变。
|
|
50
|
-
h('span', { className: props.expanded === true ? 'dshpc-card__caret is-open' : 'dshpc-card__caret' }, h(Chevron, { size: 12 }))))), props.panel === undefined || props.expanded !== true
|
|
74
|
+
h('span', { className: props.expanded === true ? 'dshpc-card__caret is-open' : 'dshpc-card__caret' }, h(Chevron, { size: 12 })))))), props.panel === undefined || props.expanded !== true
|
|
51
75
|
? null
|
|
52
76
|
: h('div', { className: 'dshpc-card__panel' }, props.panel));
|
|
53
77
|
}
|
|
54
78
|
/**
|
|
55
|
-
*
|
|
79
|
+
* 卡片（框式）：复用 `Surface` 外框（surface 底 + 1px 边框 + 圆角 12），
|
|
80
|
+
* 色条默认贴左缘、6px 粗、圆角短条（高度随内容）；`bar.side` 可换成右/上/下。
|
|
56
81
|
* 头部整体垂直居中；悬停浮出的按钮、一行两行由调用方在框内自定。
|
|
57
82
|
*
|
|
58
83
|
* ```tsx
|
|
59
84
|
* h(Card, {
|
|
60
85
|
* accent: 'warning',
|
|
86
|
+
* bar: { side: 'right', inset: 10, gap: 8 },
|
|
61
87
|
* action: h(Button, { size: 'sm', variant: 'ghost' }, '跳过'),
|
|
62
88
|
* }, h('div', null, '标题 + 内容'))
|
|
63
89
|
* ```
|
package/dist/ui/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/ui/Card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAsC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,CAAC,EAAkB,MAAM,kBAAkB,CAAA;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/ui/Card.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { createElement as h, type CSSProperties, type ReactNode } from 'react';
|
|
2
|
+
/** 底色档（映射到 design 的 surface token）。 */
|
|
3
|
+
export type SurfaceTone = 'plain' | 'raised' | 'sunken' | 'subtle';
|
|
4
|
+
/** 边框档：默认 1px 实线；`faint` 更淡；`none` 透明（保留 1px 占位，不跳高）；`dashed` 虚线（占位框）。 */
|
|
5
|
+
export type SurfaceBorder = true | 'faint' | 'none' | 'dashed';
|
|
6
|
+
/** 圆角档：默认 `md`(12)，与 Button / Input 同档。 */
|
|
7
|
+
export type SurfaceRadius = 'sm' | 'md' | 'lg' | 'none';
|
|
8
|
+
/** 内距档（四拍）：`sm`=8 / `md`=12 / `lg`=16。 */
|
|
9
|
+
export type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';
|
|
10
|
+
export interface SurfaceProps {
|
|
11
|
+
tone?: SurfaceTone;
|
|
12
|
+
border?: SurfaceBorder;
|
|
13
|
+
radius?: SurfaceRadius;
|
|
14
|
+
/** `null` = 不带内距：给「四边内距要自己算」的容器（Card 的色条贴边）用。 */
|
|
15
|
+
padding?: SurfacePadding | null;
|
|
16
|
+
className?: string;
|
|
17
|
+
style?: CSSProperties;
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
}
|
|
20
|
+
interface SurfaceClassOptions {
|
|
21
|
+
tone?: SurfaceTone;
|
|
22
|
+
border?: SurfaceBorder;
|
|
23
|
+
radius?: SurfaceRadius;
|
|
24
|
+
/** `null` = 不带内距：给「四边内距要自己算」的容器（Card 的色条贴边）用。 */
|
|
25
|
+
padding?: SurfacePadding | null;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* 拼 Surface 的类名。独立导出是给组合类容器（Card）用的：
|
|
29
|
+
* 容器要把 Surface 当外框、又不想吃它的内距时，传 `padding: null` 即可。
|
|
30
|
+
*/
|
|
31
|
+
export declare function surfaceClass(options?: SurfaceClassOptions): string;
|
|
32
|
+
/**
|
|
33
|
+
* 纯框容器：底 / 边框 / 圆角 / 内距四根轴，零业务语义。
|
|
34
|
+
* 它是**圆角契约的唯一真源**（容器档 12，与控件同档），下游要用「一块一块的面」时用它，
|
|
35
|
+
* 不要再自己写 border + border-radius。
|
|
36
|
+
*
|
|
37
|
+
* ```tsx
|
|
38
|
+
* h(Surface, { tone: 'sunken', padding: 'md' }, h('div', null, '任意内容'))
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export declare function Surface(props: SurfaceProps): ReturnType<typeof h>;
|
|
42
|
+
export {};
|
|
43
|
+
//# sourceMappingURL=Surface.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../src/ui/Surface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI9E,uCAAuC;AACvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAClE,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC9D,2CAA2C;AAC3C,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AACvD,0CAA0C;AAC1C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAExD,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,iDAAiD;IACjD,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,iDAAiD;IACjD,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CAChC;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,MAAM,CActE;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAUjE"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { createElement as h } from 'react';
|
|
2
|
+
import { ensureComponentStyles } from './css.js';
|
|
3
|
+
import { SURFACE_CSS } from './surface-css.js';
|
|
4
|
+
/**
|
|
5
|
+
* 拼 Surface 的类名。独立导出是给组合类容器（Card）用的：
|
|
6
|
+
* 容器要把 Surface 当外框、又不想吃它的内距时，传 `padding: null` 即可。
|
|
7
|
+
*/
|
|
8
|
+
export function surfaceClass(options = {}) {
|
|
9
|
+
const tone = options.tone ?? 'plain';
|
|
10
|
+
const border = options.border ?? true;
|
|
11
|
+
const radius = options.radius ?? 'md';
|
|
12
|
+
const padding = options.padding === undefined ? 'md' : options.padding;
|
|
13
|
+
return [
|
|
14
|
+
'dshpc-surface',
|
|
15
|
+
tone === 'plain' ? '' : `dshpc-surface--tone-${tone}`,
|
|
16
|
+
border === true ? '' : `dshpc-surface--border-${border}`,
|
|
17
|
+
radius === 'md' ? '' : `dshpc-surface--radius-${radius}`,
|
|
18
|
+
padding === null ? '' : `dshpc-surface--pad-${padding}`,
|
|
19
|
+
]
|
|
20
|
+
.filter((name) => name !== '')
|
|
21
|
+
.join(' ');
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* 纯框容器：底 / 边框 / 圆角 / 内距四根轴，零业务语义。
|
|
25
|
+
* 它是**圆角契约的唯一真源**（容器档 12，与控件同档），下游要用「一块一块的面」时用它，
|
|
26
|
+
* 不要再自己写 border + border-radius。
|
|
27
|
+
*
|
|
28
|
+
* ```tsx
|
|
29
|
+
* h(Surface, { tone: 'sunken', padding: 'md' }, h('div', null, '任意内容'))
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export function Surface(props) {
|
|
33
|
+
ensureComponentStyles('surface', SURFACE_CSS);
|
|
34
|
+
return h('div', {
|
|
35
|
+
className: [surfaceClass(props), props.className ?? ''].filter((s) => s !== '').join(' '),
|
|
36
|
+
style: props.style,
|
|
37
|
+
}, props.children ?? null);
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=Surface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Surface.js","sourceRoot":"","sources":["../../src/ui/Surface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAsC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AA8B9C;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,UAA+B,EAAE;IAC5D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,OAAO,CAAA;IACpC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,IAAI,CAAA;IACrC,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,IAAI,CAAA;IACrC,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAA;IACtE,OAAO;QACL,eAAe;QACf,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,IAAI,EAAE;QACrD,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,MAAM,EAAE;QACxD,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,MAAM,EAAE;QACxD,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,OAAO,EAAE;KACxD;SACE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC;SAC7B,IAAI,CAAC,GAAG,CAAC,CAAA;AACd,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;IAC7C,OAAO,CAAC,CACN,KAAK,EACL;QACE,SAAS,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACzF,KAAK,EAAE,KAAK,CAAC,KAAK;KACnB,EACD,KAAK,CAAC,QAAQ,IAAI,IAAI,CACvB,CAAA;AACH,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const CARD_CSS = "\n.dshpc-card
|
|
1
|
+
export declare const CARD_CSS = "\n/* \u2500\u2500 Card / StripCard\uFF1ASurface \u5916\u6846 + \u5934\u90E8\u5951\u7EA6 + \u8272\u6761 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u5916\u6846\uFF08\u5E95 / \u8FB9\u6846 / \u5706\u89D2 / \u5185\u8DDD\uFF09\u5168\u90E8\u6765\u81EA .dshpc-surface\uFF08src/ui/surface.css\uFF09\uFF1A\n \u672C\u6587\u4EF6**\u4E0D\u518D\u5199 border / border-radius**\uFF0C\u5706\u89D2\u5951\u7EA6\u56E0\u6B64\u53EA\u6709\u4E00\u4E2A\u5B9A\u4E49\u70B9\uFF08\u5BB9\u5668\u6863 = 12\uFF09\u3002\n \u8FD9\u91CC\u53EA\u7BA1\u4E24\u4EF6 Surface \u4E0D\u8BE5\u77E5\u9053\u7684\u4E8B\uFF1A\u8272\u6761\u51E0\u4F55\u3001\u5934\u90E8\u5E03\u5C40\u3002\n\n \u8272\u6761\u51E0\u4F55\u9ED8\u8BA4\u503C\u90FD\u53EF\u88AB props \u8986\u76D6\uFF08Card.ts \u5199\u5BF9\u5E94\u7684 CSS \u53D8\u91CF\uFF09\uFF1A\n --card-bar-size \u6761\u5B50\u7C97\u7EC6\n --card-bar-inset \u6761\u5B50\u8DDD\u5361\u7247\u8FB9\u7F18\u7684\u8DDD\u79BB\uFF08= \u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD\uFF09\n --card-bar-gap \u6761\u5B50\u8DDD\u5185\u5BB9\u7684\u8DDD\u79BB\uFF08= body \u7684 gap\uFF09\n --card-bar-length \u4E0A\u4E0B\u65B9\u4F4D\u65F6\u7684\u6761\u957F\uFF08100% = \u8DDF\u5185\u5BB9\u540C\u5BBD\uFF09\n \u8FD9\u4E9B\u53D8\u91CF\u53EA\u5728\u672C\u6587\u4EF6\u6D88\u8D39\uFF083 \u4EFD\u6587\u4EF6\u4E00\u8D77\u5F15\u65F6\uFF0C\u8DE8\u6587\u4EF6\u5F15\u7528\u522B\u5904\u7684\u53D8\u91CF\u4F1A\u9759\u9ED8\u5931\u6548\uFF09\uFF0C\n \u6240\u4EE5\u9ED8\u8BA4\u503C\u5FC5\u987B\u5199\u5728\u8FD9\u91CC\uFF0C\u800C\u4E0D\u662F\u4EE4\u724C\u6216\u522B\u7684\u76AE\u80A4\u91CC\u3002 */\n.dshpc-card{\n --card-accent:var(--dshpc-business);\n --card-accent-soft:var(--dshpc-business-soft);\n --card-bar-size:6px;\n --card-bar-inset:12px;\n --card-bar-gap:12px;\n --card-bar-length:100%;\n}\n/* \u6863\u4F4D \u2192 token\uFF08\u7167 records-timeline \u7684 tone \u6A21\u5F0F\uFF1A\u4E00\u4E2A\u53D8\u91CF\u5207\u6863\uFF0C\u4E0D\u5199 5 \u5957\u89C4\u5219\uFF1B\u6D45\u5E95\u4E0E\u8272\u6761\u540C\u6E90\uFF09\u3002 */\n.dshpc-card--success{--card-accent:var(--dshpc-success);--card-accent-soft:var(--dshpc-success-soft)}\n.dshpc-card--warning{--card-accent:var(--dshpc-warning);--card-accent-soft:var(--dshpc-warning-soft)}\n.dshpc-card--danger{--card-accent:var(--dshpc-danger);--card-accent-soft:var(--dshpc-danger-soft)}\n/* neutral \u6D45\u5E95\u501F chip \u5E95\uFF08\u5144\u5F1F\u9879\u76EE mute \u6863\u540C\u6B3E\uFF1A\u660E\u6697\u90FD\u6210\u7ACB\uFF09\u3002 */\n.dshpc-card--neutral{--card-accent:var(--dshpc-fg-4);--card-accent-soft:var(--dshpc-chip-bg)}\n/* \u6269\u5C55\u516B\u8272\uFF082026-10-29\uFF09\uFF1A\u8272\u6761 + \u6D45\u5E95\u540C\u6E90\uFF0C\u8F6F\u5E95\u8D70\u5404\u81EA -soft\u3002 */\n.dshpc-card--purple{--card-accent:var(--dshpc-purple);--card-accent-soft:var(--dshpc-purple-soft)}\n.dshpc-card--pink{--card-accent:var(--dshpc-pink);--card-accent-soft:var(--dshpc-pink-soft)}\n.dshpc-card--cyan{--card-accent:var(--dshpc-cyan);--card-accent-soft:var(--dshpc-cyan-soft)}\n.dshpc-card--teal{--card-accent:var(--dshpc-teal);--card-accent-soft:var(--dshpc-teal-soft)}\n.dshpc-card--orange{--card-accent:var(--dshpc-orange);--card-accent-soft:var(--dshpc-orange-soft)}\n.dshpc-card--indigo{--card-accent:var(--dshpc-indigo);--card-accent-soft:var(--dshpc-indigo-soft)}\n.dshpc-card--rose{--card-accent:var(--dshpc-rose);--card-accent-soft:var(--dshpc-rose-soft)}\n.dshpc-card--slate{--card-accent:var(--dshpc-slate);--card-accent-soft:var(--dshpc-slate-soft)}\n\n/* body = \u8272\u6761 + \u5934\u90E8\u3002\u65B9\u5411\u8DDF\u7740\u6761\u5B50\u8D34\u7684\u8FB9\u5207 \u21D2 \u56DB\u4E2A\u65B9\u4F4D\u53EA\u662F\u300C\u6362\u4E00\u4E2A\u65B9\u5411\u7684 flex \u9879\u300D\uFF0C\n \u4E0D\u7528\u4E3A\u6BCF\u4E2A\u65B9\u4F4D\u5404\u5199\u4E00\u5957\u5B9A\u4F4D\u3002 */\n.dshpc-card__body{display:flex;gap:var(--card-bar-gap);min-width:0}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n\n/* \u5934\u90E8\u4E00\u884C = \u4E3B\u5185\u5BB9 + \u53F3\u4FA7\u69FD\uFF0C**\u6574\u4F53\u5782\u76F4\u5C45\u4E2D**\uFF1A\u8C03\u7528\u65B9\u5728 action \u91CC\u88F8\u653E\u4E00\u4E2A\u5143\u7D20\n \uFF08\u6309\u94AE / \u6587\u5B57 / \u56FE\u6807\uFF09\u4E0D\u7528\u81EA\u5DF1\u5957\u5BB9\u5668\u5C45\u4E2D\uFF1B\u4E00\u884C\u4E24\u884C\u3001\u53F3\u8FB9\u600E\u4E48\u653E\u7531\u8C03\u7528\u65B9\u5728\u6846\u5185\u81EA\u5B9A\u3002 */\n.dshpc-card__head{display:flex;align-items:center;gap:8px;min-width:0}\n.dshpc-card--bar-left .dshpc-card__head,\n.dshpc-card--bar-right .dshpc-card__head{flex:1 1 auto}\n.dshpc-card__main{flex:1;min-width:0}\n.dshpc-card__side{display:flex;align-items:center;gap:6px;flex:none}\n\n/* \u8272\u6761\uFF1A\u5DE6/\u53F3 = \u7AD6\u5411\u6761\uFF08\u9AD8\u5EA6\u8DDF\u5185\u5BB9\uFF0C\u6700\u5C0F\u4E00\u884C\uFF09\uFF1B\u4E0A/\u4E0B = \u6A2A\u5411\u6761\uFF08\u957F\u5EA6\u9ED8\u8BA4\u8DDF\u5185\u5BB9\u540C\u5BBD\uFF09\u3002\n \u53F3/\u4E0B\u65B9\u4F4D\u9760 order \u6392\u5230\u5934\u90E8\u4E4B\u540E\uFF0CDOM \u987A\u5E8F\u59CB\u7EC8\u4E0D\u53D8\u3002 */\n.dshpc-card__bar{flex:none;background:var(--card-accent);border-radius:var(--dshpc-radius-xs)}\n.dshpc-card--bar-left .dshpc-card__bar,\n.dshpc-card--bar-right .dshpc-card__bar{width:var(--card-bar-size);align-self:stretch;min-height:var(--dshpc-line-md)}\n.dshpc-card--bar-top .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{width:var(--card-bar-length);height:var(--card-bar-size);align-self:flex-start}\n.dshpc-card--bar-right .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{order:1}\n\n/* \u2500\u2500 \u5916\u89C2\u4E00 \u00B7 StripCard\uFF1A\u540C\u8272\u7CFB\u6D45\u5E95 + 1px \u4E0D\u53EF\u89C1\u5360\u4F4D\u8FB9\u6846 + \u65B9\u89D2 + 4px \u901A\u9AD8\u65B9\u89D2\u8272\u6761\u8D34\u5DE6\u7F18 \u2500\u2500\n \u5E95\u8272 / \u65B9\u89D2 / \u5360\u4F4D\u8FB9\u6846\u7531 Surface \u7684\u4E09\u6761\u4FEE\u9970\u7C7B\u63D0\u4F9B\uFF08Card.ts \u6309 kind \u4F20\uFF09\uFF0C\u6B64\u5904\u53EA\u7BA1\u5185\u8DDD\u4E0E\u6761\u5B50\u3002 */\n.dshpc-card.dshpc-card--strip{\n --card-bar-size:4px;--card-bar-inset:0;\n padding:12px 12px 12px 20px;\n background:var(--card-accent-soft,transparent);\n}\n/* \u5DE6\u5185\u8FB9\u8DDD 20px = 16 \u7559\u767D + 4 \u6761\u5BBD \u21D2 \u5185\u5BB9\u4ECE\u8272\u6761\u53F3\u7F18\u8D77\u7B97\uFF1B\u8272\u6761\u7EDD\u5BF9\u5B9A\u4F4D\u901A\u9AD8\uFF0C\u8DDF\u7740\u5185\u5BB9\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002\n \u7279\u5F02\u6027 0,3,0\uFF1A\u538B\u8FC7\u4E0A\u9762 .dshpc-card--bar-left .dshpc-card__bar \u7684\u5BBD\u5EA6\u89C4\u5219\uFF0C\u4E0E\u6CE8\u5165\u987A\u5E8F\u65E0\u5173\u3002 */\n.dshpc-card.dshpc-card--strip .dshpc-card__bar{position:absolute;left:0;top:0;bottom:0;width:4px;align-self:auto}\n\n/* \u2500\u2500 \u5916\u89C2\u4E8C \u00B7 Card\uFF1ASurface \u5916\u6846\uFF08\u5E95 + 1px \u5B9E\u8272\u8FB9\u6846 + \u5706\u89D2 12\uFF09+ \u8272\u6761\u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD \u2500\u2500\n \u5185\u8DDD\u7528 0,2,0 / 0,3,0 \u7684\u957F\u5199\u6CD5\uFF1A\u9AD8\u8FC7 .dshpc-surface \u7684 padding \u7B80\u5199\uFF0C\u4E0E\u4E24\u4EFD CSS \u7684\u6CE8\u5165\u987A\u5E8F\u65E0\u5173\u3002 */\n.dshpc-card.dshpc-card--bordered{padding:14px}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-left{padding-left:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-right{padding-right:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-top{padding-top:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-bottom{padding-bottom:var(--card-bar-inset)}\n\n.dshpc-card__toggle{\n display:inline-flex;align-items:center;justify-content:center;\n width:24px;height:24px;padding:0;background:none;border:none;border-radius:var(--dshpc-radius-sm);\n color:var(--dshpc-fg-3);cursor:pointer;\n}\n.dshpc-card__toggle:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n/* \u7BAD\u5934\u662F svg\uFF08Chevron\uFF09\uFF0C\u4E0D\u662F\u5B57\u5F62 \u21D2 \u4E0D\u8981 font-size\uFF1Binline-flex \u514D\u6389 svg \u7684\u57FA\u7EBF\u7559\u767D\u3002 */\n.dshpc-card__caret{display:inline-flex;transition:transform .15s ease}\n.dshpc-card__caret.is-open{transform:rotate(180deg)}\n.dshpc-card__panel{margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n";
|
|
2
2
|
//# sourceMappingURL=card-css.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-css.generated.d.ts","sourceRoot":"","sources":["../../src/ui/card-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"card-css.generated.d.ts","sourceRoot":"","sources":["../../src/ui/card-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,8uQAAy8J,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物，勿手改。真源 = src/ui/card.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成（`pnpm run gen:css`）：改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const CARD_CSS = "\n.dshpc-
|
|
3
|
+
export const CARD_CSS = "\n/* ── Card / StripCard：Surface 外框 + 头部契约 + 色条 ─────────────────────\n 外框（底 / 边框 / 圆角 / 内距）全部来自 .dshpc-surface（src/ui/surface.css）：\n 本文件**不再写 border / border-radius**，圆角契约因此只有一个定义点（容器档 = 12）。\n 这里只管两件 Surface 不该知道的事：色条几何、头部布局。\n\n 色条几何默认值都可被 props 覆盖（Card.ts 写对应的 CSS 变量）：\n --card-bar-size 条子粗细\n --card-bar-inset 条子距卡片边缘的距离（= 贴边那一侧的内距）\n --card-bar-gap 条子距内容的距离（= body 的 gap）\n --card-bar-length 上下方位时的条长（100% = 跟内容同宽）\n 这些变量只在本文件消费（3 份文件一起引时，跨文件引用别处的变量会静默失效），\n 所以默认值必须写在这里，而不是令牌或别的皮肤里。 */\n.dshpc-card{\n --card-accent:var(--dshpc-business);\n --card-accent-soft:var(--dshpc-business-soft);\n --card-bar-size:6px;\n --card-bar-inset:12px;\n --card-bar-gap:12px;\n --card-bar-length:100%;\n}\n/* 档位 → token（照 records-timeline 的 tone 模式：一个变量切档，不写 5 套规则；浅底与色条同源）。 */\n.dshpc-card--success{--card-accent:var(--dshpc-success);--card-accent-soft:var(--dshpc-success-soft)}\n.dshpc-card--warning{--card-accent:var(--dshpc-warning);--card-accent-soft:var(--dshpc-warning-soft)}\n.dshpc-card--danger{--card-accent:var(--dshpc-danger);--card-accent-soft:var(--dshpc-danger-soft)}\n/* neutral 浅底借 chip 底（兄弟项目 mute 档同款：明暗都成立）。 */\n.dshpc-card--neutral{--card-accent:var(--dshpc-fg-4);--card-accent-soft:var(--dshpc-chip-bg)}\n/* 扩展八色（2026-10-29）：色条 + 浅底同源，软底走各自 -soft。 */\n.dshpc-card--purple{--card-accent:var(--dshpc-purple);--card-accent-soft:var(--dshpc-purple-soft)}\n.dshpc-card--pink{--card-accent:var(--dshpc-pink);--card-accent-soft:var(--dshpc-pink-soft)}\n.dshpc-card--cyan{--card-accent:var(--dshpc-cyan);--card-accent-soft:var(--dshpc-cyan-soft)}\n.dshpc-card--teal{--card-accent:var(--dshpc-teal);--card-accent-soft:var(--dshpc-teal-soft)}\n.dshpc-card--orange{--card-accent:var(--dshpc-orange);--card-accent-soft:var(--dshpc-orange-soft)}\n.dshpc-card--indigo{--card-accent:var(--dshpc-indigo);--card-accent-soft:var(--dshpc-indigo-soft)}\n.dshpc-card--rose{--card-accent:var(--dshpc-rose);--card-accent-soft:var(--dshpc-rose-soft)}\n.dshpc-card--slate{--card-accent:var(--dshpc-slate);--card-accent-soft:var(--dshpc-slate-soft)}\n\n/* body = 色条 + 头部。方向跟着条子贴的边切 ⇒ 四个方位只是「换一个方向的 flex 项」，\n 不用为每个方位各写一套定位。 */\n.dshpc-card__body{display:flex;gap:var(--card-bar-gap);min-width:0}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n\n/* 头部一行 = 主内容 + 右侧槽，**整体垂直居中**：调用方在 action 里裸放一个元素\n （按钮 / 文字 / 图标）不用自己套容器居中；一行两行、右边怎么放由调用方在框内自定。 */\n.dshpc-card__head{display:flex;align-items:center;gap:8px;min-width:0}\n.dshpc-card--bar-left .dshpc-card__head,\n.dshpc-card--bar-right .dshpc-card__head{flex:1 1 auto}\n.dshpc-card__main{flex:1;min-width:0}\n.dshpc-card__side{display:flex;align-items:center;gap:6px;flex:none}\n\n/* 色条：左/右 = 竖向条（高度跟内容，最小一行）；上/下 = 横向条（长度默认跟内容同宽）。\n 右/下方位靠 order 排到头部之后，DOM 顺序始终不变。 */\n.dshpc-card__bar{flex:none;background:var(--card-accent);border-radius:var(--dshpc-radius-xs)}\n.dshpc-card--bar-left .dshpc-card__bar,\n.dshpc-card--bar-right .dshpc-card__bar{width:var(--card-bar-size);align-self:stretch;min-height:var(--dshpc-line-md)}\n.dshpc-card--bar-top .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{width:var(--card-bar-length);height:var(--card-bar-size);align-self:flex-start}\n.dshpc-card--bar-right .dshpc-card__bar,\n.dshpc-card--bar-bottom .dshpc-card__bar{order:1}\n\n/* ── 外观一 · StripCard：同色系浅底 + 1px 不可见占位边框 + 方角 + 4px 通高方角色条贴左缘 ──\n 底色 / 方角 / 占位边框由 Surface 的三条修饰类提供（Card.ts 按 kind 传），此处只管内距与条子。 */\n.dshpc-card.dshpc-card--strip{\n --card-bar-size:4px;--card-bar-inset:0;\n padding:12px 12px 12px 20px;\n background:var(--card-accent-soft,transparent);\n}\n/* 左内边距 20px = 16 留白 + 4 条宽 ⇒ 内容从色条右缘起算；色条绝对定位通高，跟着内容高度自适应。\n 特异性 0,3,0：压过上面 .dshpc-card--bar-left .dshpc-card__bar 的宽度规则，与注入顺序无关。 */\n.dshpc-card.dshpc-card--strip .dshpc-card__bar{position:absolute;left:0;top:0;bottom:0;width:4px;align-self:auto}\n\n/* ── 外观二 · Card：Surface 外框（底 + 1px 实色边框 + 圆角 12）+ 色条贴边那一侧的内距 ──\n 内距用 0,2,0 / 0,3,0 的长写法：高过 .dshpc-surface 的 padding 简写，与两份 CSS 的注入顺序无关。 */\n.dshpc-card.dshpc-card--bordered{padding:14px}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-left{padding-left:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-right{padding-right:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-top{padding-top:var(--card-bar-inset)}\n.dshpc-card.dshpc-card--bordered.dshpc-card--bar-bottom{padding-bottom:var(--card-bar-inset)}\n\n.dshpc-card__toggle{\n display:inline-flex;align-items:center;justify-content:center;\n width:24px;height:24px;padding:0;background:none;border:none;border-radius:var(--dshpc-radius-sm);\n color:var(--dshpc-fg-3);cursor:pointer;\n}\n.dshpc-card__toggle:hover{background:var(--dshpc-surface-sunken);color:var(--dshpc-fg)}\n/* 箭头是 svg（Chevron），不是字形 ⇒ 不要 font-size；inline-flex 免掉 svg 的基线留白。 */\n.dshpc-card__caret{display:inline-flex;transition:transform .15s ease}\n.dshpc-card__caret.is-open{transform:rotate(180deg)}\n.dshpc-card__panel{margin-top:8px;padding-top:8px;border-top:1px solid var(--dshpc-border-faint)}\n";
|
|
4
4
|
//# sourceMappingURL=card-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-css.generated.js","sourceRoot":"","sources":["../../src/ui/card-css.generated.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"card-css.generated.js","sourceRoot":"","sources":["../../src/ui/card-css.generated.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,s8JAAs8J,CAAA"}
|
package/dist/ui/index.d.ts
CHANGED
|
@@ -10,7 +10,8 @@ export { Modal, type ModalProps, type ModalSize } from './Modal.js';
|
|
|
10
10
|
export { AlertModal, type AlertModalProps, type AlertSeverity, } from './AlertModal.js';
|
|
11
11
|
export { ConfirmModal, type ConfirmModalProps, type ConfirmTone, } from './ConfirmModal.js';
|
|
12
12
|
export { alertModal, confirmModal, type AlertOptions, type ConfirmOptions, } from './modal-host.js';
|
|
13
|
-
export { CARD_ACCENTS, Card, StripCard, type CardAccent, type CardSharedProps, } from './Card.js';
|
|
13
|
+
export { CARD_ACCENTS, Card, StripCard, type CardAccent, type CardBarOptions, type CardSharedProps, } from './Card.js';
|
|
14
|
+
export { Surface, surfaceClass, type SurfaceBorder, type SurfacePadding, type SurfaceProps, type SurfaceRadius, type SurfaceTone, } from './Surface.js';
|
|
14
15
|
export { Chip, type ChipProps, type ChipSize, type ChipTone } from './Chip.js';
|
|
15
16
|
export { Table, type TableProps } from './Table.js';
|
|
16
17
|
export { Pagination, type PaginationProps, type TablePaginationConfig, } from './Pagination.js';
|
package/dist/ui/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}
|
package/dist/ui/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export { AlertModal, } from './AlertModal.js';
|
|
|
15
15
|
export { ConfirmModal, } from './ConfirmModal.js';
|
|
16
16
|
export { alertModal, confirmModal, } from './modal-host.js';
|
|
17
17
|
export { CARD_ACCENTS, Card, StripCard, } from './Card.js';
|
|
18
|
+
export { Surface, surfaceClass, } from './Surface.js';
|
|
18
19
|
export { Chip } from './Chip.js';
|
|
19
20
|
// 表格：第一档外观 = Table（后续 TableGrid / TableZebra 各自独立导出，引哪个打包哪个）。
|
|
20
21
|
export { Table } from './Table.js';
|
package/dist/ui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,sDAAsD;AACtD,uDAAuD;AACvD,4CAA4C;AAC5C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,GAGZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAqC,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,GAQd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAkD,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,GAOd,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAmC,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,GAGX,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,GAGb,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,sDAAsD;AACtD,uDAAuD;AACvD,4CAA4C;AAC5C,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACpF,OAAO,EACL,YAAY,EACZ,cAAc,EACd,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,QAAQ,EACR,WAAW,GAGZ,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAqC,MAAM,aAAa,CAAA;AACvE,OAAO,EACL,cAAc,GAIf,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,GAQd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAkD,MAAM,kBAAkB,CAAA;AAC9F,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AACjF,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,GAOd,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,KAAK,EAAmC,MAAM,YAAY,CAAA;AACnE,OAAO,EACL,UAAU,GAGX,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,UAAU,EACV,YAAY,GAGb,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,SAAS,GAIV,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,OAAO,EACP,YAAY,GAMb,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,IAAI,EAAgD,MAAM,WAAW,CAAA;AAC9E,8DAA8D;AAC9D,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAY,CAAA;AACnD,iDAAiD;AACjD,OAAO,EACL,UAAU,GAGX,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAS,GAIV,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,UAAU,EACV,YAAY,EACZ,eAAe,EACf,WAAW,EACX,UAAU,GAWX,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,SAAS,EACT,MAAM,GAMP,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,MAAM,EAAE,UAAU,EAA+E,MAAM,aAAa,CAAA;AAC7H,OAAO,EAAE,SAAS,EAA2C,MAAM,gBAAgB,CAAA;AACnF,OAAO,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAyD,MAAM,aAAa,CAAA;AAC3F,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAA;AAC/D,OAAO,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,WAAW,GAIZ,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,GAKjB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAiD,MAAM,kBAAkB,CAAA;AAC7F,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAA;AAC/D,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EACL,YAAY,GAEb,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACL,wBAAwB,EACxB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,GAMnB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,sBAAsB,EAAsB,MAAM,cAAc,CAAA;AACzE,OAAO,EACL,SAAS,EACT,SAAS,EACT,eAAe,GAOhB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,aAAa,EACb,SAAS,EACT,WAAW,EACX,WAAW,EACX,MAAM,EACN,SAAS,EACT,WAAW,EACX,aAAa,GAGd,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,aAAa,EACb,cAAc,GAMf,MAAM,YAAY,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface-css.d.ts","sourceRoot":"","sources":["../../src/ui/surface-css.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const SURFACE_CSS = "\n/* \u2500\u2500 Surface \u00B7 \u7EAF\u6846\u5BB9\u5668 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \u53EA\u56DE\u7B54\u300C\u4E00\u5757\u9762\u957F\u4EC0\u4E48\u6837\u300D\uFF1A\u5E95 / \u8FB9 / \u5706\u89D2 / \u5185\u8DDD\uFF0C\u56DB\u6839\u8F74\uFF0C\u96F6\u4E1A\u52A1\u8BED\u4E49\u3002\n \u5B83\u662F**\u5706\u89D2\u5951\u7EA6\u7684\u552F\u4E00\u771F\u6E90**\uFF1A\u5BB9\u5668\u6863 = --dshpc-radius-md(12)\uFF0C\u4E0E Button / Input \u540C\u6863\uFF0C\n \u5916\u6846\u6C38\u8FDC\u4E0D\u5C0F\u4E8E\u91CC\u9762\u7684\u63A7\u4EF6 \u2014\u2014 \u675C\u7EDD\u300C\u5361\u7247 8 < \u6309\u94AE 12\u300D\u8FD9\u7C7B\u5012\u6302\uFF082026-11-01\uFF09\u3002\n\n \u6240\u6709\u8F74\u90FD\u7528**\u53D8\u91CF**\u8868\u8FBE\uFF0C\u4FEE\u9970\u7C7B\u53EA\u6539\u8FD9\u4E9B\u53D8\u91CF\u3001\u4E0D\u6539\u5C5E\u6027\uFF1A\n \u6D88\u8D39\u65B9\uFF08Card\u3001\u4E0B\u6E38\u63D2\u4EF6\uFF09\u81EA\u5DF1\u5199\u89C4\u5219\u65F6\uFF0C\u65E0\u8BBA\u4E24\u4EFD CSS \u8C01\u5148\u6CE8\u5165\uFF0C\u80DC\u8D1F\u90FD\u4E0D\u4F9D\u8D56\u987A\u5E8F\u3002\n\n tone plain(\u9ED8\u8BA4 surface-1) / raised / sunken / subtle\n border \u9ED8\u8BA4 1px \u5B9E\u7EBF\uFF1Bfaint \u66F4\u6DE1\uFF1Bnone \u900F\u660E\uFF08\u4FDD\u7559 1px \u5360\u4F4D\uFF0C\u4E0D\u8DF3\u9AD8\uFF09\uFF1B\n dashed \u865A\u7EBF\uFF08\u5360\u4F4D\u6846\u7528\uFF0C\u7EBF\u8272\u4ECD\u662F border token\uFF09\n radius \u9ED8\u8BA4 md\uFF1Bnone / sm / lg\n padding \u9ED8\u8BA4\u7531\u8C03\u7528\u65B9\u9009\u6863\uFF1Bnone / sm(8) / md(12) / lg(16)\n \u57FA\u7C7B\u4E0D\u5E26\u5185\u8DDD\uFF1A\u5BB9\u5668\u8981\u81EA\u5DF1\u7B97\u56DB\u8FB9\u5185\u8DDD\u65F6\uFF08\u5982 Card \u7684\u8272\u6761\u8D34\u8FB9\uFF09\uFF0C\u4E0D\u4F20 pad \u6863\u5373\u53EF\uFF0C\u4E0D\u9700\u8981\u8986\u76D6\u3002 */\n.dshpc-surface{\n position:relative;box-sizing:border-box;color:var(--dshpc-fg);font:inherit;text-align:left;\n --surface-bg:var(--dshpc-surface-1);\n --surface-border:var(--dshpc-border);\n --surface-border-style:solid;\n --surface-radius:var(--dshpc-radius-md);\n --surface-pad:0;\n border:1px var(--surface-border-style) var(--surface-border);\n border-radius:var(--surface-radius);\n background:var(--surface-bg);\n padding:var(--surface-pad);\n}\n.dshpc-surface--tone-raised{--surface-bg:var(--dshpc-surface-raised)}\n.dshpc-surface--tone-sunken{--surface-bg:var(--dshpc-surface-sunken)}\n.dshpc-surface--tone-subtle{--surface-bg:var(--dshpc-chip-bg)}\n.dshpc-surface--border-faint{--surface-border:var(--dshpc-border-faint)}\n.dshpc-surface--border-none{--surface-border:transparent}\n.dshpc-surface--border-dashed{--surface-border-style:dashed}\n.dshpc-surface--radius-none{--surface-radius:0}\n.dshpc-surface--radius-sm{--surface-radius:var(--dshpc-radius-sm)}\n.dshpc-surface--radius-lg{--surface-radius:var(--dshpc-radius-lg)}\n.dshpc-surface--pad-none{--surface-pad:0}\n.dshpc-surface--pad-sm{--surface-pad:var(--dshpc-space-2)}\n.dshpc-surface--pad-md{--surface-pad:var(--dshpc-space-3)}\n.dshpc-surface--pad-lg{--surface-pad:var(--dshpc-space-4)}\n";
|
|
2
|
+
//# sourceMappingURL=surface-css.generated.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface-css.generated.d.ts","sourceRoot":"","sources":["../../src/ui/surface-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,2wGAA+3D,CAAA"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
// ⚠️ 生成物，勿手改。真源 = src/ui/surface.css
|
|
2
|
+
// 由 scripts/gen-css.mjs 生成（`pnpm run gen:css`）：改样式请改那个 .css 文件后重新生成。
|
|
3
|
+
export const SURFACE_CSS = "\n/* ── Surface · 纯框容器 ───────────────────────────────────────────────────\n 只回答「一块面长什么样」：底 / 边 / 圆角 / 内距，四根轴，零业务语义。\n 它是**圆角契约的唯一真源**：容器档 = --dshpc-radius-md(12)，与 Button / Input 同档，\n 外框永远不小于里面的控件 —— 杜绝「卡片 8 < 按钮 12」这类倒挂（2026-11-01）。\n\n 所有轴都用**变量**表达，修饰类只改这些变量、不改属性：\n 消费方（Card、下游插件）自己写规则时，无论两份 CSS 谁先注入，胜负都不依赖顺序。\n\n tone plain(默认 surface-1) / raised / sunken / subtle\n border 默认 1px 实线；faint 更淡；none 透明（保留 1px 占位，不跳高）；\n dashed 虚线（占位框用，线色仍是 border token）\n radius 默认 md；none / sm / lg\n padding 默认由调用方选档；none / sm(8) / md(12) / lg(16)\n 基类不带内距：容器要自己算四边内距时（如 Card 的色条贴边），不传 pad 档即可，不需要覆盖。 */\n.dshpc-surface{\n position:relative;box-sizing:border-box;color:var(--dshpc-fg);font:inherit;text-align:left;\n --surface-bg:var(--dshpc-surface-1);\n --surface-border:var(--dshpc-border);\n --surface-border-style:solid;\n --surface-radius:var(--dshpc-radius-md);\n --surface-pad:0;\n border:1px var(--surface-border-style) var(--surface-border);\n border-radius:var(--surface-radius);\n background:var(--surface-bg);\n padding:var(--surface-pad);\n}\n.dshpc-surface--tone-raised{--surface-bg:var(--dshpc-surface-raised)}\n.dshpc-surface--tone-sunken{--surface-bg:var(--dshpc-surface-sunken)}\n.dshpc-surface--tone-subtle{--surface-bg:var(--dshpc-chip-bg)}\n.dshpc-surface--border-faint{--surface-border:var(--dshpc-border-faint)}\n.dshpc-surface--border-none{--surface-border:transparent}\n.dshpc-surface--border-dashed{--surface-border-style:dashed}\n.dshpc-surface--radius-none{--surface-radius:0}\n.dshpc-surface--radius-sm{--surface-radius:var(--dshpc-radius-sm)}\n.dshpc-surface--radius-lg{--surface-radius:var(--dshpc-radius-lg)}\n.dshpc-surface--pad-none{--surface-pad:0}\n.dshpc-surface--pad-sm{--surface-pad:var(--dshpc-space-2)}\n.dshpc-surface--pad-md{--surface-pad:var(--dshpc-space-3)}\n.dshpc-surface--pad-lg{--surface-pad:var(--dshpc-space-4)}\n";
|
|
4
|
+
//# sourceMappingURL=surface-css.generated.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface-css.generated.js","sourceRoot":"","sources":["../../src/ui/surface-css.generated.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,qEAAqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG,43DAA43D,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// Surface（纯框容器）样式 —— **圆角契约的唯一真源**：容器档 = --dshpc-radius-md(12)。
|
|
2
|
+
//
|
|
3
|
+
// 四根轴（底 / 边 / 圆角 / 内距）全用变量表达，修饰类只改变量，任何消费方规则与它
|
|
4
|
+
// 同时命中时都不依赖注入顺序。要加新档：在 surface.css 里加一条只改变量的修饰类。
|
|
5
|
+
// 生成物 surface-css.generated.ts 由 scripts/gen-css.mjs 产出，勿手改。
|
|
6
|
+
export { SURFACE_CSS } from './surface-css.generated.js';
|
|
7
|
+
//# sourceMappingURL=surface-css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface-css.js","sourceRoot":"","sources":["../../src/ui/surface-css.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,EAAE;AACF,+CAA+C;AAC/C,iDAAiD;AACjD,6DAA6D;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA"}
|
package/docs/help/ui.doc.ts
CHANGED
|
@@ -12,6 +12,7 @@ const cardExample = `import { Card, Chip, StripCard } from 'dsh-plugin-core/ui'
|
|
|
12
12
|
|
|
13
13
|
h(Card, {
|
|
14
14
|
accent: 'warning',
|
|
15
|
+
bar: { side: 'left', inset: 12, gap: 12 }, // 色条可放 left / right / top / bottom
|
|
15
16
|
action: h(Button, { size: 'sm', variant: 'ghost' }, '跳过'),
|
|
16
17
|
},
|
|
17
18
|
h('div', null, '标题'),
|
|
@@ -24,6 +25,17 @@ h(StripCard, {
|
|
|
24
25
|
panel: h('div', null, '展开详情'),
|
|
25
26
|
}, h('div', null, '标题 + 元信息'))`
|
|
26
27
|
|
|
28
|
+
const surfaceExample = `import { Surface, Card } from 'dsh-plugin-core/ui'
|
|
29
|
+
|
|
30
|
+
// 纯框：底 / 边框 / 圆角 / 内距四根轴。圆角固定 12，与 Button 同档。
|
|
31
|
+
h(Surface, { tone: 'sunken', padding: 'md' }, h('div', null, '任意内容'))
|
|
32
|
+
|
|
33
|
+
// 下游自己建「一块面」时用它，不要再写 border + border-radius：
|
|
34
|
+
h(Surface, { border: 'faint', padding: 'lg' }, h(Card, null, '框里再放卡'))
|
|
35
|
+
|
|
36
|
+
// 虚线占位框也走它，不要自己写 1px dashed：
|
|
37
|
+
h(Surface, { tone: 'sunken', border: 'dashed', padding: 'lg' }, '还没做的东西')`
|
|
38
|
+
|
|
27
39
|
const panelDockExample = `const dock = createPanelDock({ maxPanels: 3 }) // 一次，挂在插件级
|
|
28
40
|
|
|
29
41
|
// 页面里：结构就在这儿写，不塞进任何调用参数
|
|
@@ -215,7 +227,7 @@ const doc: DocTopic = {
|
|
|
215
227
|
title: { zh: 'ui —— 基础控件', en: 'ui — base controls' },
|
|
216
228
|
exports: [
|
|
217
229
|
'Button', 'IconButton', 'Segmented', 'SplitGroup', 'Input', 'PrefixedInput', 'NumberInput', 'Textarea',
|
|
218
|
-
'Checkbox', 'fieldMetricsOf', 'Picker', 'WorkspacePicker', 'ModelPicker', 'DateTimePicker', 'Card', 'StripCard',
|
|
230
|
+
'Checkbox', 'fieldMetricsOf', 'Picker', 'WorkspacePicker', 'ModelPicker', 'DateTimePicker', 'Surface', 'Card', 'StripCard',
|
|
219
231
|
'Chip', 'Table', 'Pagination', 'Modal', 'FieldHint', 'setTooltipRenderer', 'showToast', 'notify', 'showHostToast',
|
|
220
232
|
'Loader', 'LoaderBar', 'Loading', 'RunningBlocks', 'SectionHead', 'MarqueeText', 'LiveText',
|
|
221
233
|
'QuickToolbar', 'startResizeLayoutWidth', 'PanelDock', 'createPanelDock', 'DockPanel',
|
|
@@ -441,13 +453,36 @@ const doc: DocTopic = {
|
|
|
441
453
|
},
|
|
442
454
|
],
|
|
443
455
|
},
|
|
456
|
+
{
|
|
457
|
+
id: 'surface',
|
|
458
|
+
heading: { zh: 'Surface（区域容器）', en: 'Surface (region container)' },
|
|
459
|
+
prose: [
|
|
460
|
+
{
|
|
461
|
+
zh: '纯框容器：底 / 边框 / 圆角 / 内距四根轴，无业务语义。圆角固定 12（与 Button 同档），是全站容器圆角的唯一来源——要「一块一块的面」就用它，不要再自己写 border + border-radius。',
|
|
462
|
+
en: 'A plain frame: background / border / radius / padding, nothing else. Radius is fixed at 12 (same tier as Button) and is the single source of container radii — use it instead of hand-rolling border + border-radius.',
|
|
463
|
+
},
|
|
464
|
+
],
|
|
465
|
+
api: [
|
|
466
|
+
{
|
|
467
|
+
id: 'ui-surface',
|
|
468
|
+
rows: [
|
|
469
|
+
{ name: 'tone', type: "'plain' | 'raised' | 'sunken' | 'subtle'", def: "'plain'", desc: { zh: '底色档（surface-1 / raised / sunken / chip 底）', en: 'Background tier (surface-1 / raised / sunken / chip)' } },
|
|
470
|
+
{ name: 'border', type: "true | 'faint' | 'none' | 'dashed'", def: 'true', desc: { zh: "none 保留 1px 透明占位，换外观不跳高；dashed 为虚线占位框", en: "'none' keeps a transparent 1px placeholder so heights stay stable; 'dashed' draws a dashed placeholder frame" } },
|
|
471
|
+
{ name: 'radius', type: "'sm' | 'md' | 'lg' | 'none'", def: "'md'", desc: { zh: 'md = 12，与控件同档', en: 'md = 12, same tier as controls' } },
|
|
472
|
+
{ name: 'padding', type: "'none' | 'sm' | 'md' | 'lg'", def: "'md'", desc: { zh: '内距档：0 / 8 / 12 / 16', en: 'Inner padding tiers: 0 / 8 / 12 / 16' } },
|
|
473
|
+
{ name: 'className / style', type: '—', def: '—', desc: { zh: '追加类 / 样式', en: 'Append class / style' } },
|
|
474
|
+
],
|
|
475
|
+
},
|
|
476
|
+
],
|
|
477
|
+
code: [{ id: 'ui-surface-example', lang: 'tsx', src: surfaceExample }],
|
|
478
|
+
},
|
|
444
479
|
{
|
|
445
480
|
id: 'card',
|
|
446
481
|
heading: { zh: 'Card / StripCard', en: 'Card / StripCard' },
|
|
447
482
|
prose: [
|
|
448
483
|
{
|
|
449
|
-
zh: '两种外观，两个组件：Card =
|
|
450
|
-
en: 'Two appearances, two components: Card =
|
|
484
|
+
zh: '两种外观，两个组件：Card = Surface 外框（底 + 1px 边框 + 圆角 12）+ 色条（方位与间距可配）；StripCard = 同色浅底 + 占位边框 + 方角 + 通高左缘色条。',
|
|
485
|
+
en: 'Two appearances, two components: Card = Surface frame (background + 1px border + 12px radius) + rail (side and spacing configurable); StripCard = same-hue light background + placeholder border + square corners + full-height left rail.',
|
|
451
486
|
},
|
|
452
487
|
{
|
|
453
488
|
zh: '头部整体垂直居中，`action` 里裸放一个元素即居中。颜色全走 token，明暗跟随宿主。',
|
|
@@ -459,6 +494,7 @@ const doc: DocTopic = {
|
|
|
459
494
|
id: 'ui-card',
|
|
460
495
|
rows: [
|
|
461
496
|
{ name: 'accent', type: "13 档 or 任意 CSS 色值（business/success/warning/danger/neutral + 扩展 purple/pink/cyan/teal/orange/indigo/rose/slate）", def: "'business'", desc: { zh: '档位映射到 design 的 token；也可传 \'#f59e0b\' 这类自定义值', en: 'Tiers map to design tokens; also accepts custom values like \'#f59e0b\'' } },
|
|
497
|
+
{ name: 'bar', type: "'left' | 'right' | 'top' | 'bottom' + size / inset / gap / length", def: "side 'left'", desc: { zh: '色条方位与几何：inset = 距卡片边缘、gap = 距内容、length = 上下方位时的条长（默认跟内容同宽）', en: 'Rail side and geometry: inset = distance to card edge, gap = distance to content, length = rail length for top/bottom (defaults to content width)' } },
|
|
462
498
|
{ name: 'expanded', type: 'boolean', def: "'false'", desc: { zh: '展开态（箭头朝向 + panel 显隐）', en: 'Expanded state (arrow direction + panel show/hide)' } },
|
|
463
499
|
{ name: 'onToggle', type: '() => void', def: '—', desc: { zh: '传了才显示右侧折叠箭头；展开状态由调用方管', en: 'Only shows the right collapse arrow if provided; caller owns the expanded state' } },
|
|
464
500
|
{ name: 'action', type: 'ReactNode', def: '—', desc: { zh: '右上角操作区', en: 'Top-right action area' } },
|
package/docs/help/ui.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
> EN: ui — base controls
|
|
6
6
|
|
|
7
|
-
导出：Button、IconButton、Segmented、SplitGroup、Input、PrefixedInput、NumberInput、Textarea、Checkbox、fieldMetricsOf、Picker、WorkspacePicker、ModelPicker、DateTimePicker、Card、StripCard、Chip、Table、Pagination、Modal、FieldHint、setTooltipRenderer、showToast、notify、showHostToast、Loader、LoaderBar、Loading、RunningBlocks、SectionHead、MarqueeText、LiveText、QuickToolbar、startResizeLayoutWidth、PanelDock、createPanelDock、DockPanel、ensureControls、setStyleKit
|
|
7
|
+
导出：Button、IconButton、Segmented、SplitGroup、Input、PrefixedInput、NumberInput、Textarea、Checkbox、fieldMetricsOf、Picker、WorkspacePicker、ModelPicker、DateTimePicker、Surface、Card、StripCard、Chip、Table、Pagination、Modal、FieldHint、setTooltipRenderer、showToast、notify、showHostToast、Loader、LoaderBar、Loading、RunningBlocks、SectionHead、MarqueeText、LiveText、QuickToolbar、startResizeLayoutWidth、PanelDock、createPanelDock、DockPanel、ensureControls、setStyleKit
|
|
8
8
|
|
|
9
9
|
## 概览
|
|
10
10
|
|
|
@@ -233,13 +233,42 @@ h(DateTimePicker, {
|
|
|
233
233
|
|
|
234
234
|
> EN: Without a renderer only the question-mark icon shows, no bubble.
|
|
235
235
|
|
|
236
|
+
## Surface（区域容器）
|
|
237
|
+
|
|
238
|
+
> EN: Surface (region container)
|
|
239
|
+
|
|
240
|
+
纯框容器：底 / 边框 / 圆角 / 内距四根轴，无业务语义。圆角固定 12（与 Button 同档），是全站容器圆角的唯一来源——要「一块一块的面」就用它，不要再自己写 border + border-radius。
|
|
241
|
+
|
|
242
|
+
> EN: A plain frame: background / border / radius / padding, nothing else. Radius is fixed at 12 (same tier as Button) and is the single source of container radii — use it instead of hand-rolling border + border-radius.
|
|
243
|
+
|
|
244
|
+
| 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
|
|
245
|
+
|---|---|---|---|---|
|
|
246
|
+
| `tone` | `'plain' \| 'raised' \| 'sunken' \| 'subtle'` | 'plain' | 底色档（surface-1 / raised / sunken / chip 底） | Background tier (surface-1 / raised / sunken / chip) |
|
|
247
|
+
| `border` | `true \| 'faint' \| 'none' \| 'dashed'` | true | none 保留 1px 透明占位，换外观不跳高；dashed 为虚线占位框 | 'none' keeps a transparent 1px placeholder so heights stay stable; 'dashed' draws a dashed placeholder frame |
|
|
248
|
+
| `radius` | `'sm' \| 'md' \| 'lg' \| 'none'` | 'md' | md = 12，与控件同档 | md = 12, same tier as controls |
|
|
249
|
+
| `padding` | `'none' \| 'sm' \| 'md' \| 'lg'` | 'md' | 内距档：0 / 8 / 12 / 16 | Inner padding tiers: 0 / 8 / 12 / 16 |
|
|
250
|
+
| `className / style` | `—` | — | 追加类 / 样式 | Append class / style |
|
|
251
|
+
|
|
252
|
+
```tsx id="ui-surface-example"
|
|
253
|
+
import { Surface, Card } from 'dsh-plugin-core/ui'
|
|
254
|
+
|
|
255
|
+
// 纯框：底 / 边框 / 圆角 / 内距四根轴。圆角固定 12，与 Button 同档。
|
|
256
|
+
h(Surface, { tone: 'sunken', padding: 'md' }, h('div', null, '任意内容'))
|
|
257
|
+
|
|
258
|
+
// 下游自己建「一块面」时用它，不要再写 border + border-radius：
|
|
259
|
+
h(Surface, { border: 'faint', padding: 'lg' }, h(Card, null, '框里再放卡'))
|
|
260
|
+
|
|
261
|
+
// 虚线占位框也走它，不要自己写 1px dashed：
|
|
262
|
+
h(Surface, { tone: 'sunken', border: 'dashed', padding: 'lg' }, '还没做的东西')
|
|
263
|
+
```
|
|
264
|
+
|
|
236
265
|
## Card / StripCard
|
|
237
266
|
|
|
238
267
|
> EN: Card / StripCard
|
|
239
268
|
|
|
240
|
-
两种外观，两个组件：Card =
|
|
269
|
+
两种外观，两个组件：Card = Surface 外框（底 + 1px 边框 + 圆角 12）+ 色条（方位与间距可配）；StripCard = 同色浅底 + 占位边框 + 方角 + 通高左缘色条。
|
|
241
270
|
|
|
242
|
-
> EN: Two appearances, two components: Card =
|
|
271
|
+
> EN: Two appearances, two components: Card = Surface frame (background + 1px border + 12px radius) + rail (side and spacing configurable); StripCard = same-hue light background + placeholder border + square corners + full-height left rail.
|
|
243
272
|
|
|
244
273
|
头部整体垂直居中，`action` 里裸放一个元素即居中。颜色全走 token，明暗跟随宿主。
|
|
245
274
|
|
|
@@ -248,6 +277,7 @@ h(DateTimePicker, {
|
|
|
248
277
|
| 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
|
|
249
278
|
|---|---|---|---|---|
|
|
250
279
|
| `accent` | `13 档 or 任意 CSS 色值（business/success/warning/danger/neutral + 扩展 purple/pink/cyan/teal/orange/indigo/rose/slate）` | 'business' | 档位映射到 design 的 token；也可传 '#f59e0b' 这类自定义值 | Tiers map to design tokens; also accepts custom values like '#f59e0b' |
|
|
280
|
+
| `bar` | `'left' \| 'right' \| 'top' \| 'bottom' + size / inset / gap / length` | side 'left' | 色条方位与几何：inset = 距卡片边缘、gap = 距内容、length = 上下方位时的条长（默认跟内容同宽） | Rail side and geometry: inset = distance to card edge, gap = distance to content, length = rail length for top/bottom (defaults to content width) |
|
|
251
281
|
| `expanded` | `boolean` | 'false' | 展开态（箭头朝向 + panel 显隐） | Expanded state (arrow direction + panel show/hide) |
|
|
252
282
|
| `onToggle` | `() => void` | — | 传了才显示右侧折叠箭头；展开状态由调用方管 | Only shows the right collapse arrow if provided; caller owns the expanded state |
|
|
253
283
|
| `action` | `ReactNode` | — | 右上角操作区 | Top-right action area |
|
|
@@ -260,6 +290,7 @@ import { Card, Chip, StripCard } from 'dsh-plugin-core/ui'
|
|
|
260
290
|
|
|
261
291
|
h(Card, {
|
|
262
292
|
accent: 'warning',
|
|
293
|
+
bar: { side: 'left', inset: 12, gap: 12 }, // 色条可放 left / right / top / bottom
|
|
263
294
|
action: h(Button, { size: 'sm', variant: 'ghost' }, '跳过'),
|
|
264
295
|
},
|
|
265
296
|
h('div', null, '标题'),
|
package/package.json
CHANGED