dsh-plugin-core 0.35.6 → 0.35.7
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/display/Card.d.ts +1 -1
- package/dist/ui/display/Card.d.ts.map +1 -1
- package/dist/ui/display/card-css.generated.d.ts +1 -1
- package/dist/ui/display/card-css.generated.d.ts.map +1 -1
- package/dist/ui/display/card-css.generated.js +1 -1
- package/dist/ui/display/card-css.generated.js.map +1 -1
- package/docs/design/style.md +9 -4
- package/docs/help/ui.doc.ts +2 -2
- package/docs/help/ui.md +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/ui/display/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,qBAAqB,CAAA;AAMvD,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,
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/ui/display/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,qBAAqB,CAAA;AAMvD,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,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAkGD;;;;;;;;;;;;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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
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\uFF09\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 \u5185\u8DDD\u4E0D\u5728\u6839\u8282\u70B9\uFF1A\u6839\u8282\u70B9 padding:0\uFF0C__body\uFF08\u5934\u90E8\u533A\uFF09\u4E0E __panel\uFF08\u5C55\u5F00\u533A\uFF09\u5404\u81EA\u627F\u62C5 \u2014\u2014\n \u4E24\u5757\u533A\u57DF\u56E0\u6B64\u5F7C\u6B64\u72EC\u7ACB\uFF0Chover \u53EA\u53EF\u80FD\u843D\u5728\u5934\u90E8\u533A\uFF0C\u5C55\u5F00\u533A\u4E0D\u4F1A\u88AB\u6CE2\u53CA\u3002\n \u8FD9\u91CC\u53EA\u7BA1\u4E09\u4EF6 Surface \u4E0D\u8BE5\u77E5\u9053\u7684\u4E8B\uFF1A\u8272\u6761\u51E0\u4F55\u3001\u5934\u90E8\u5E03\u5C40\u3001\u4E24\u5757\u533A\u57DF\u7684\u5185\u8DDD\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 /* \u5934\u90E8\u533A\u5185\u8DDD\u56DB\u6839\u8F74\uFF1A\u6839\u8282\u70B9\u81EA\u5DF1\u4E0D\u7559 padding\uFF0C\u5185\u8DDD\u5168\u7531 __body / __panel \u5404\u81EA\u627F\u62C5\u3002\n \u8FD9\u6837 __body \u5C31\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0Chover \u94FA\u8272\u8FB9\u5230\u8FB9\uFF0C\u8FDE\u539F\u672C\u90A3\u5708\u5916\u5708\u4E00\u8D77\u53D8\u3002\n --card-pad-all \u662F\u56DB\u8F74\u7684\u7EC4\u5408\u503C\uFF0C\u6D88\u8D39\u7AEF\u53EF\u7528 style.padding \u8986\u76D6\uFF08Card.ts \u8F6C\u6210\u540C\u540D\u53D8\u91CF\uFF09\u3002 */\n --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n padding:0;\n /* \u5934\u90E8\u533A\u80CC\u666F\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\u7531\u6839\u8282\u70B9\u7EDF\u4E00\u88C1\u6210\u5916\u6846\u5706\u89D2\uFF1B__body \u81EA\u5DF1\u4E0D\u5199\u5706\u89D2\u88F8\u503C\u3002 */\n overflow:hidden;\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\uFF0C\u4E5F\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF1A\u5B83\u81EA\u5DF1\u627F\u62C5\u5185\u8DDD\u5E76\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\n \u662F head \u4F5C\u7528\u57DF\u4E0B\u552F\u4E00\u7684 hover \u76EE\u6807\u3002\u5706\u89D2\u7531\u6839\u8282\u70B9 overflow \u88C1\u5207 \u21D2 hover \u8272\u4E0D\u9732\u65B9\u89D2\u3002\n --card-pad-all \u4F9B\u6D88\u8D39\u7AEF style.padding \u8986\u76D6\uFF08Card.ts \u628A\u5185\u8054 padding \u8F6C\u6210\u8FD9\u4E2A\u53D8\u91CF\uFF09\u3002\n \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\u4E0D\u7528\u5404\u5199\u4E00\u5957\u5B9A\u4F4D\u3002 */\n.dshpc-card__body{\n display:flex;gap:var(--card-bar-gap);min-width:0;\n padding:var(--card-pad-all);\n background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* \u5C55\u5F00\u6001\u4E0D\u7279\u6B8A\u5904\u7406\u5185\u8DDD\uFF1A\u5934\u90E8\u533A\u4E0A\u4E0B\u7559\u767D\u59CB\u7EC8\u5BF9\u79F0\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u4E0D\u4F1A\u4E00\u957F\u4E00\u77ED\u3002\n \u4E24\u5757\u4E4B\u95F4\u7684\u95F4\u9694\u5C31\u662F __body \u7684 padding-bottom\uFF0C\u5C5E\u4E8E\u5934\u90E8\u533A\u3001\u8DDF\u7740\u4E00\u8D77\u53D8\u8272\uFF1B\n __panel \u4ECE\u5206\u9694\u7EBF\u5F00\u59CB\uFF0C\u4E0D\u5728\u4E2D\u95F4\u7559\u4E00\u6761\u4E0D\u53D8\u8272\u7684\u5E26\u5B50\u3002 */\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 --card-pad-t:12px;--card-pad-r:12px;--card-pad-b:12px;--card-pad-l:20px;\n /* \u5E95\u8272\u6539\u8D70 Surface \u7684 --surface-bg \u53D8\u91CF\uFF08surface.css:7-8 \u5951\u7EA6\uFF09\uFF1A\u4E0D\u80FD\u5199 background \u5C5E\u6027\uFF0C\n \u5426\u5219\u900F\u660E\u6863\u8981\u8986\u76D6\u65F6\u4F1A\u88AB\u5C5E\u6027\u5C42\u6253\u67B6\uFF08\u5144\u5F1F\u9879\u76EE\u66FE\u7528 background-image \u6E10\u53D8\u7ED5\u8FC7\uFF09\u3002 */\n --surface-bg: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 \u5B9A\u4F4D\u57FA\u51C6\u662F\u6839\u8282\u70B9\u7684 position:relative\uFF08Surface \u63D0\u4F9B\uFF09\uFF0Ctop:0 / bottom:0 \u56E0\u6B64\u662F\u6574\u5361\u901A\u9AD8\uFF1A\n \u5C55\u5F00\u540E\u8272\u6761\u4ECD\u4E00\u8DEF\u8D2F\u7A7F\u5230\u5C55\u5F00\u533A\u5E95\u90E8\uFF0C\u4E0D\u968F head \u5206\u533A\u88AB\u88C1\u77ED\uFF082026-11-08 \u62CD\u677F\uFF09\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\uFF1A\u8272\u6761\u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD = \u6761\u5B50\u8DDD\u8FB9\u7F18\u7684\u8DDD\u79BB \u2500\u2500\n \u56DB\u65B9\u4F4D\u53EA\u6539\u5BF9\u5E94\u90A3\u6839 --card-pad-* \u53D8\u91CF\uFF0C__body \u4E0E __panel \u540C\u65F6\u8DDF\u7740\u5BF9\u9F50\u3002 */\n.dshpc-card--bar-left{--card-pad-l:var(--card-bar-inset)}\n.dshpc-card--bar-right{--card-pad-r:var(--card-bar-inset)}\n.dshpc-card--bar-top{--card-pad-t:var(--card-bar-inset)}\n.dshpc-card--bar-bottom{--card-pad-b:var(--card-bar-inset)}\n\n/* \u2500\u2500 \u5916\u89C2\u8F74\uFF082026-11-07\uFF09\uFF1A\u5E95\u8272\u5F00\u5173 + hover \u4F5C\u7528\u57DF \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 \u4E24\u5757\u533A\u57DF\u5404\u81EA\u72EC\u7ACB\uFF1A\u6839\u8282\u70B9\u53EA\u94FA\u4E00\u5C42\u5E38\u6001\u5E95\uFF08--surface-bg\uFF09\uFF1B__body \u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0C\n __panel \u662F\u5B83\u7684\u5144\u5F1F\u8282\u70B9\uFF0C\u4E0D\u94FA\u4EFB\u4F55\u80CC\u666F\u3001\u4E0D\u53C2\u4E0E hover\u3002\n hoverScope\uFF08\u9ED8\u8BA4 head\uFF09\uFF1A\n head \u2014\u2014 \u53EA\u6709 __body \u94FA --dshpc-card-hover\uFF0C\u8FB9\u5230\u8FB9\uFF08\u5185\u8DDD\u5708 + \u5706\u89D2\u90FD\u5728\u8FD9\u4E00\u5757\u4E0A\uFF09\uFF1B\n \u5C55\u5F00\u6001\u4E5F\u4E0D\u6539\u5185\u8DDD\uFF0C\u4E0A\u4E0B\u4E24\u5708\u7559\u767D\u540C\u5C5E\u8FD9\u4E00\u5757\u3001\u4E00\u8D77\u53D8\u8272\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u5BF9\u79F0\uFF1B\n \u9F20\u6807\u843D\u5728 __panel \u65F6 :hover \u6839\u672C\u4E0D\u6210\u7ACB \u21D2 \u6574\u5361\u4E0D\u89E6\u53D1\uFF0C\u4E0B\u9762\u6C38\u8FDC\u662F\u5E38\u6001\u3002\n card \u2014\u2014 \u6839\u8282\u70B9\u6539 --surface-bg\uFF0C\u6574\u5361\u542B\u5C55\u5F00\u533A\u4E00\u8D77\u53D8\u8272\uFF0C\u7531\u6D88\u8D39\u7AEF\u663E\u5F0F\u9009\u3002\n \u26A0\uFE0F \u7EDD\u4E0D\u7528\u300C\u7ED9\u5C55\u5F00\u533A\u94FA\u4E00\u5C42\u5E95\u8272\u53BB\u76D6\u4F4F\u6839\u8282\u70B9\u300D\uFF1A\u534A\u900F\u660E token \u53E0\u4E24\u5C42\u4F1A\u66F4\u6DF1\uFF08\u771F\u8E29\u8FC7\uFF09\u3002 */\n.dshpc-card.dshpc-card--no-fill{--surface-bg:transparent}\n/* \u5F00\u5173\u6253\u5F00\u5373\u58F0\u660E\u300C\u4E0A\u9762\u90A3\u4E00\u5757\u53EF\u4EA4\u4E92\u300D\uFF1A\u624B\u52BF\u8DDF\u7740\u53D8\uFF0C\u5C55\u5F00\u533A\u8FD8\u539F\u6210\u9ED8\u8BA4\u5149\u6807\u3002 */\n.dshpc-card.dshpc-card--hoverable{cursor:pointer}\n.dshpc-card.dshpc-card--hover-head .dshpc-card__panel{cursor:auto}\n/* \u987A\u5E8F\u5373\u4F18\u5148\u7EA7\uFF1Astrip \u6D45\u5E95 / no-fill \u900F\u660E(0,2,0) \u2192 card:hover(0,3,0\uFF0C\u6700\u9AD8)\u3002 */\n.dshpc-card.dshpc-card--hover-head .dshpc-card__body:hover{background:var(--dshpc-card-hover)}\n.dshpc-card.dshpc-card--hover-card:hover{--surface-bg:var(--dshpc-card-hover)}\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/* \u5C55\u5F00\u533A\u81EA\u5DF1\u627F\u62C5\u5DE6\u53F3 / \u5E95\u90E8\u5185\u8DDD\uFF1A\u4E0E\u5934\u90E8\u5185\u5BB9\u5BF9\u9F50\uFF0C\u5E76\u8865\u4E0A\u5361\u7247\u5E95\u90E8\u7559\u767D\u3002\n margin-top \u5F52 0\uFF1A\u5206\u9694\u7EBF\u7D27\u8D34\u5934\u90E8\u533A\u4E0B\u7F18\uFF0C\u4E0A\u65B9\u90A3\u6BB5\u95F4\u9694\u662F __body \u7684 padding-bottom\uFF0C\u8DDF\u7740 hover \u4E00\u8D77\u53D8\u8272\u3002 */\n.dshpc-card__panel{\n margin:0 var(--card-pad-r) 0 var(--card-pad-l);\n padding:8px 0 var(--card-pad-b);\n border-top:1px solid var(--dshpc-border-faint);\n}\n";
|
|
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\uFF09\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 \u5185\u8DDD\u4E0D\u5728\u6839\u8282\u70B9\uFF1A\u6839\u8282\u70B9 padding:0\uFF0C__body\uFF08\u5934\u90E8\u533A\uFF09\u4E0E __panel\uFF08\u5C55\u5F00\u533A\uFF09\u5404\u81EA\u627F\u62C5 \u2014\u2014\n \u4E24\u5757\u533A\u57DF\u56E0\u6B64\u5F7C\u6B64\u72EC\u7ACB\uFF0Chover \u53EA\u53EF\u80FD\u843D\u5728\u5934\u90E8\u533A\uFF0C\u5C55\u5F00\u533A\u4E0D\u4F1A\u88AB\u6CE2\u53CA\u3002\n \u8FD9\u91CC\u53EA\u7BA1\u4E09\u4EF6 Surface \u4E0D\u8BE5\u77E5\u9053\u7684\u4E8B\uFF1A\u8272\u6761\u51E0\u4F55\u3001\u5934\u90E8\u5E03\u5C40\u3001\u4E24\u5757\u533A\u57DF\u7684\u5185\u8DDD\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 /* \u5934\u90E8\u533A\u5185\u8DDD\u56DB\u6839\u8F74\uFF1A\u6839\u8282\u70B9\u81EA\u5DF1\u4E0D\u7559 padding\uFF0C\u5185\u8DDD\u5168\u7531 __body / __panel \u5404\u81EA\u627F\u62C5\u3002\n \u8FD9\u6837 __body \u5C31\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0Chover \u94FA\u8272\u8FB9\u5230\u8FB9\uFF0C\u8FDE\u539F\u672C\u90A3\u5708\u5916\u5708\u4E00\u8D77\u53D8\u3002\n --card-pad-all \u662F\u56DB\u8F74\u7684\u7EC4\u5408\u503C\uFF0C\u6D88\u8D39\u7AEF\u53EF\u7528 style.padding \u8986\u76D6\uFF08Card.ts \u8F6C\u6210\u540C\u540D\u53D8\u91CF\uFF09\u3002 */\n --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n padding:0;\n /* \u5934\u90E8\u533A\u80CC\u666F\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\u7531\u6839\u8282\u70B9\u7EDF\u4E00\u88C1\u6210\u5916\u6846\u5706\u89D2\uFF1B__body \u81EA\u5DF1\u4E0D\u5199\u5706\u89D2\u88F8\u503C\u3002 */\n overflow:hidden;\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\uFF0C\u4E5F\u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF1A\u5B83\u81EA\u5DF1\u627F\u62C5\u5185\u8DDD\u5E76\u94FA\u6EE1\u6839\u8282\u70B9\u5185\u5BB9\u76D2\uFF0C\n \u662F head \u4F5C\u7528\u57DF\u4E0B\u552F\u4E00\u7684 hover \u76EE\u6807\u3002\u5706\u89D2\u7531\u6839\u8282\u70B9 overflow \u88C1\u5207 \u21D2 hover \u8272\u4E0D\u9732\u65B9\u89D2\u3002\n --card-pad-all \u4F9B\u6D88\u8D39\u7AEF style.padding \u8986\u76D6\uFF08Card.ts \u628A\u5185\u8054 padding \u8F6C\u6210\u8FD9\u4E2A\u53D8\u91CF\uFF09\u3002\n \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\u4E0D\u7528\u5404\u5199\u4E00\u5957\u5B9A\u4F4D\u3002 */\n.dshpc-card__body{\n display:flex;gap:var(--card-bar-gap);min-width:0;\n padding:var(--card-pad-all);\n background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* \u5C55\u5F00\u6001\u4E0D\u7279\u6B8A\u5904\u7406\u5185\u8DDD\uFF1A\u5934\u90E8\u533A\u4E0A\u4E0B\u7559\u767D\u59CB\u7EC8\u5BF9\u79F0\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u4E0D\u4F1A\u4E00\u957F\u4E00\u77ED\u3002\n \u4E24\u5757\u4E4B\u95F4\u7684\u95F4\u9694\u5C31\u662F __body \u7684 padding-bottom\uFF0C\u5C5E\u4E8E\u5934\u90E8\u533A\u3001\u8DDF\u7740\u4E00\u8D77\u53D8\u8272\uFF1B\n __panel \u7D27\u63A5\u5176\u540E\uFF0C\u4E0D\u5728\u4E2D\u95F4\u7559\u4E00\u6761\u4E0D\u53D8\u8272\u7684\u5E26\u5B50\uFF0C\u4E5F\u4E0D\u753B\u5206\u9694\u7EBF\u3002 */\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 --card-pad-t:12px;--card-pad-r:12px;--card-pad-b:12px;--card-pad-l:20px;\n /* \u5E95\u8272\u6539\u8D70 Surface \u7684 --surface-bg \u53D8\u91CF\uFF08surface.css:7-8 \u5951\u7EA6\uFF09\uFF1A\u4E0D\u80FD\u5199 background \u5C5E\u6027\uFF0C\n \u5426\u5219\u900F\u660E\u6863\u8981\u8986\u76D6\u65F6\u4F1A\u88AB\u5C5E\u6027\u5C42\u6253\u67B6\uFF08\u5144\u5F1F\u9879\u76EE\u66FE\u7528 background-image \u6E10\u53D8\u7ED5\u8FC7\uFF09\u3002 */\n --surface-bg: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 \u5B9A\u4F4D\u57FA\u51C6\u662F\u6839\u8282\u70B9\u7684 position:relative\uFF08Surface \u63D0\u4F9B\uFF09\uFF0Ctop:0 / bottom:0 \u56E0\u6B64\u662F\u6574\u5361\u901A\u9AD8\uFF1A\n \u5C55\u5F00\u540E\u8272\u6761\u4ECD\u4E00\u8DEF\u8D2F\u7A7F\u5230\u5C55\u5F00\u533A\u5E95\u90E8\uFF0C\u4E0D\u968F head \u5206\u533A\u88AB\u88C1\u77ED\uFF082026-11-08 \u62CD\u677F\uFF09\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\uFF1A\u8272\u6761\u8D34\u8FB9\u90A3\u4E00\u4FA7\u7684\u5185\u8DDD = \u6761\u5B50\u8DDD\u8FB9\u7F18\u7684\u8DDD\u79BB \u2500\u2500\n \u56DB\u65B9\u4F4D\u53EA\u6539\u5BF9\u5E94\u90A3\u6839 --card-pad-* \u53D8\u91CF\uFF0C__body \u4E0E __panel \u540C\u65F6\u8DDF\u7740\u5BF9\u9F50\u3002 */\n.dshpc-card--bar-left{--card-pad-l:var(--card-bar-inset)}\n.dshpc-card--bar-right{--card-pad-r:var(--card-bar-inset)}\n.dshpc-card--bar-top{--card-pad-t:var(--card-bar-inset)}\n.dshpc-card--bar-bottom{--card-pad-b:var(--card-bar-inset)}\n\n/* \u2500\u2500 \u5916\u89C2\u8F74\uFF082026-11-07\uFF09\uFF1A\u5E95\u8272\u5F00\u5173 + hover \u4F5C\u7528\u57DF \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 \u4E24\u5757\u533A\u57DF\u5404\u81EA\u72EC\u7ACB\uFF1A\u6839\u8282\u70B9\u53EA\u94FA\u4E00\u5C42\u5E38\u6001\u5E95\uFF08--surface-bg\uFF09\uFF1B__body \u662F\u300C\u4E0A\u9762\u90A3\u4E00\u6574\u5757\u300D\uFF0C\n __panel \u662F\u5B83\u7684\u5144\u5F1F\u8282\u70B9\uFF0C\u4E0D\u94FA\u4EFB\u4F55\u80CC\u666F\u3001\u4E0D\u53C2\u4E0E hover\u3002\n hoverScope\uFF08\u9ED8\u8BA4 head\uFF09\uFF1A\n head \u2014\u2014 \u53EA\u6709 __body \u94FA --dshpc-card-hover\uFF0C\u8FB9\u5230\u8FB9\uFF08\u5185\u8DDD\u5708 + \u5706\u89D2\u90FD\u5728\u8FD9\u4E00\u5757\u4E0A\uFF09\uFF1B\n \u5C55\u5F00\u6001\u4E5F\u4E0D\u6539\u5185\u8DDD\uFF0C\u4E0A\u4E0B\u4E24\u5708\u7559\u767D\u540C\u5C5E\u8FD9\u4E00\u5757\u3001\u4E00\u8D77\u53D8\u8272\uFF0C\u8272\u6761\u4E0A\u4E0B\u624D\u5BF9\u79F0\uFF1B\n \u9F20\u6807\u843D\u5728 __panel \u65F6 :hover \u6839\u672C\u4E0D\u6210\u7ACB \u21D2 \u6574\u5361\u4E0D\u89E6\u53D1\uFF0C\u4E0B\u9762\u6C38\u8FDC\u662F\u5E38\u6001\u3002\n card \u2014\u2014 \u6839\u8282\u70B9\u6539 --surface-bg\uFF0C\u6574\u5361\u542B\u5C55\u5F00\u533A\u4E00\u8D77\u53D8\u8272\uFF0C\u7531\u6D88\u8D39\u7AEF\u663E\u5F0F\u9009\u3002\n \u26A0\uFE0F \u7EDD\u4E0D\u7528\u300C\u7ED9\u5C55\u5F00\u533A\u94FA\u4E00\u5C42\u5E95\u8272\u53BB\u76D6\u4F4F\u6839\u8282\u70B9\u300D\uFF1A\u534A\u900F\u660E token \u53E0\u4E24\u5C42\u4F1A\u66F4\u6DF1\uFF08\u771F\u8E29\u8FC7\uFF09\u3002 */\n.dshpc-card.dshpc-card--no-fill{--surface-bg:transparent}\n/* \u5F00\u5173\u6253\u5F00\u5373\u58F0\u660E\u300C\u4E0A\u9762\u90A3\u4E00\u5757\u53EF\u4EA4\u4E92\u300D\uFF1A\u624B\u52BF\u8DDF\u7740\u53D8\uFF0C\u5C55\u5F00\u533A\u8FD8\u539F\u6210\u9ED8\u8BA4\u5149\u6807\u3002 */\n.dshpc-card.dshpc-card--hoverable{cursor:pointer}\n.dshpc-card.dshpc-card--hover-head .dshpc-card__panel{cursor:auto}\n/* \u987A\u5E8F\u5373\u4F18\u5148\u7EA7\uFF1Astrip \u6D45\u5E95 / no-fill \u900F\u660E(0,2,0) \u2192 card:hover(0,3,0\uFF0C\u6700\u9AD8)\u3002 */\n.dshpc-card.dshpc-card--hover-head .dshpc-card__body:hover{background:var(--dshpc-card-hover)}\n.dshpc-card.dshpc-card--hover-card:hover{--surface-bg:var(--dshpc-card-hover)}\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/* \u5C55\u5F00\u533A\u53EA\u8D1F\u8D23\u300C\u628A\u5C55\u5F00\u5185\u5BB9\u653E\u5728\u5934\u90E8\u533A\u4E0B\u9762\u300D\uFF1A\u81EA\u5DF1\u627F\u62C5\u5DE6\u53F3 / \u5E95\u90E8\u5185\u8DDD\uFF0C\u8865\u4E0A\u5361\u7247\u5E95\u90E8\u7559\u767D\u3002\n margin-top \u5F52 0 \u21D2 \u4E24\u5757\u4E4B\u95F4\u7684\u95F4\u9694\u662F __body \u7684 padding-bottom\uFF0C\u5C5E\u4E8E\u5934\u90E8\u533A\u3001\u8DDF\u7740 hover \u4E00\u8D77\u53D8\u8272\u3002\n \u6838\u5FC3\u4E0D\u753B\u4EFB\u4F55\u5206\u9694\u7EBF\uFF1A\u9700\u8981\u7EBF\u7531\u6D88\u8D39\u7AEF\u5728 panel \u5185\u5BB9\u91CC\u81EA\u7ED8\uFF08\u6709\u65F6\u8981\u3001\u6709\u65F6\u4E0D\u8981\uFF0C\u6D88\u8D39\u7AEF\u81EA\u5DF1\u51B3\u5B9A\uFF09\u3002 */\n.dshpc-card__panel{\n margin:0 var(--card-pad-r) 0 var(--card-pad-l);\n padding:8px 0 var(--card-pad-b);\n}\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/display/card-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"card-css.generated.d.ts","sourceRoot":"","sources":["../../../src/ui/display/card-css.generated.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,izcAAy/N,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// ⚠️ 生成物，勿手改。真源 = src/ui/display/card.css
|
|
2
2
|
// 由 scripts/gen-css.mjs 生成（`pnpm run gen:css`）：改样式请改那个 .css 文件后重新生成。
|
|
3
|
-
export const CARD_CSS = "\n/* ── Card / StripCard：Surface 外框 + 头部契约 + 色条 ─────────────────────\n 外框（底 / 边框 / 圆角）来自 .dshpc-surface（src/ui/surface.css）：\n 本文件**不再写 border / border-radius**，圆角契约因此只有一个定义点（容器档 = 12）。\n 内距不在根节点：根节点 padding:0，__body（头部区）与 __panel（展开区）各自承担 ——\n 两块区域因此彼此独立，hover 只可能落在头部区，展开区不会被波及。\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 /* 头部区内距四根轴：根节点自己不留 padding，内距全由 __body / __panel 各自承担。\n 这样 __body 就是「上面那一整块」，hover 铺色边到边，连原本那圈外圈一起变。\n --card-pad-all 是四轴的组合值，消费端可用 style.padding 覆盖（Card.ts 转成同名变量）。 */\n --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n padding:0;\n /* 头部区背景铺满根节点内容盒，由根节点统一裁成外框圆角；__body 自己不写圆角裸值。 */\n overflow:hidden;\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 = 色条 + 头部，也是「上面那一整块」：它自己承担内距并铺满根节点内容盒，\n 是 head 作用域下唯一的 hover 目标。圆角由根节点 overflow 裁切 ⇒ hover 色不露方角。\n --card-pad-all 供消费端 style.padding 覆盖（Card.ts 把内联 padding 转成这个变量）。\n 方向跟着条子贴的边切 ⇒ 四个方位只是「换一个方向的 flex 项」，不用各写一套定位。 */\n.dshpc-card__body{\n display:flex;gap:var(--card-bar-gap);min-width:0;\n padding:var(--card-pad-all);\n background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* 展开态不特殊处理内距：头部区上下留白始终对称，色条上下才不会一长一短。\n 两块之间的间隔就是 __body 的 padding-bottom，属于头部区、跟着一起变色；\n __panel
|
|
3
|
+
export const CARD_CSS = "\n/* ── Card / StripCard：Surface 外框 + 头部契约 + 色条 ─────────────────────\n 外框（底 / 边框 / 圆角）来自 .dshpc-surface（src/ui/surface.css）：\n 本文件**不再写 border / border-radius**，圆角契约因此只有一个定义点（容器档 = 12）。\n 内距不在根节点：根节点 padding:0，__body（头部区）与 __panel（展开区）各自承担 ——\n 两块区域因此彼此独立，hover 只可能落在头部区，展开区不会被波及。\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 /* 头部区内距四根轴：根节点自己不留 padding，内距全由 __body / __panel 各自承担。\n 这样 __body 就是「上面那一整块」，hover 铺色边到边，连原本那圈外圈一起变。\n --card-pad-all 是四轴的组合值，消费端可用 style.padding 覆盖（Card.ts 转成同名变量）。 */\n --card-pad-t:14px;--card-pad-r:14px;--card-pad-b:14px;--card-pad-l:14px;\n --card-pad-all:var(--card-pad-t) var(--card-pad-r) var(--card-pad-b) var(--card-pad-l);\n padding:0;\n /* 头部区背景铺满根节点内容盒，由根节点统一裁成外框圆角；__body 自己不写圆角裸值。 */\n overflow:hidden;\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 = 色条 + 头部，也是「上面那一整块」：它自己承担内距并铺满根节点内容盒，\n 是 head 作用域下唯一的 hover 目标。圆角由根节点 overflow 裁切 ⇒ hover 色不露方角。\n --card-pad-all 供消费端 style.padding 覆盖（Card.ts 把内联 padding 转成这个变量）。\n 方向跟着条子贴的边切 ⇒ 四个方位只是「换一个方向的 flex 项」，不用各写一套定位。 */\n.dshpc-card__body{\n display:flex;gap:var(--card-bar-gap);min-width:0;\n padding:var(--card-pad-all);\n background:transparent;\n}\n.dshpc-card--bar-top .dshpc-card__body,\n.dshpc-card--bar-bottom .dshpc-card__body{flex-direction:column}\n/* 展开态不特殊处理内距：头部区上下留白始终对称，色条上下才不会一长一短。\n 两块之间的间隔就是 __body 的 padding-bottom，属于头部区、跟着一起变色；\n __panel 紧接其后，不在中间留一条不变色的带子，也不画分隔线。 */\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 --card-pad-t:12px;--card-pad-r:12px;--card-pad-b:12px;--card-pad-l:20px;\n /* 底色改走 Surface 的 --surface-bg 变量（surface.css:7-8 契约）：不能写 background 属性，\n 否则透明档要覆盖时会被属性层打架（兄弟项目曾用 background-image 渐变绕过）。 */\n --surface-bg:var(--card-accent-soft,transparent);\n}\n/* 左内边距 20px = 16 留白 + 4 条宽 ⇒ 内容从色条右缘起算；色条绝对定位通高，跟着内容高度自适应。\n 定位基准是根节点的 position:relative（Surface 提供），top:0 / bottom:0 因此是整卡通高：\n 展开后色条仍一路贯穿到展开区底部，不随 head 分区被裁短（2026-11-08 拍板）。\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：色条贴边那一侧的内距 = 条子距边缘的距离 ──\n 四方位只改对应那根 --card-pad-* 变量，__body 与 __panel 同时跟着对齐。 */\n.dshpc-card--bar-left{--card-pad-l:var(--card-bar-inset)}\n.dshpc-card--bar-right{--card-pad-r:var(--card-bar-inset)}\n.dshpc-card--bar-top{--card-pad-t:var(--card-bar-inset)}\n.dshpc-card--bar-bottom{--card-pad-b:var(--card-bar-inset)}\n\n/* ── 外观轴（2026-11-07）：底色开关 + hover 作用域 ───────────────────────────\n 两块区域各自独立：根节点只铺一层常态底（--surface-bg）；__body 是「上面那一整块」，\n __panel 是它的兄弟节点，不铺任何背景、不参与 hover。\n hoverScope（默认 head）：\n head —— 只有 __body 铺 --dshpc-card-hover，边到边（内距圈 + 圆角都在这一块上）；\n 展开态也不改内距，上下两圈留白同属这一块、一起变色，色条上下才对称；\n 鼠标落在 __panel 时 :hover 根本不成立 ⇒ 整卡不触发，下面永远是常态。\n card —— 根节点改 --surface-bg，整卡含展开区一起变色，由消费端显式选。\n ⚠️ 绝不用「给展开区铺一层底色去盖住根节点」：半透明 token 叠两层会更深（真踩过）。 */\n.dshpc-card.dshpc-card--no-fill{--surface-bg:transparent}\n/* 开关打开即声明「上面那一块可交互」：手势跟着变，展开区还原成默认光标。 */\n.dshpc-card.dshpc-card--hoverable{cursor:pointer}\n.dshpc-card.dshpc-card--hover-head .dshpc-card__panel{cursor:auto}\n/* 顺序即优先级：strip 浅底 / no-fill 透明(0,2,0) → card:hover(0,3,0，最高)。 */\n.dshpc-card.dshpc-card--hover-head .dshpc-card__body:hover{background:var(--dshpc-card-hover)}\n.dshpc-card.dshpc-card--hover-card:hover{--surface-bg:var(--dshpc-card-hover)}\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/* 展开区只负责「把展开内容放在头部区下面」：自己承担左右 / 底部内距，补上卡片底部留白。\n margin-top 归 0 ⇒ 两块之间的间隔是 __body 的 padding-bottom，属于头部区、跟着 hover 一起变色。\n 核心不画任何分隔线：需要线由消费端在 panel 内容里自绘（有时要、有时不要，消费端自己决定）。 */\n.dshpc-card__panel{\n margin:0 var(--card-pad-r) 0 var(--card-pad-l);\n padding:8px 0 var(--card-pad-b);\n}\n";
|
|
4
4
|
//# sourceMappingURL=card-css.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-css.generated.js","sourceRoot":"","sources":["../../../src/ui/display/card-css.generated.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"card-css.generated.js","sourceRoot":"","sources":["../../../src/ui/display/card-css.generated.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,qEAAqE;AACrE,MAAM,CAAC,MAAM,QAAQ,GAAG,s/NAAs/N,CAAA"}
|
package/docs/design/style.md
CHANGED
|
@@ -342,7 +342,11 @@ EN: Enabling `hoverable` also sets `cursor:pointer`. Cards without the axis keep
|
|
|
342
342
|
`__body` 是「上面那一整块」，独立承担四边内距，是 head 作用域下唯一的 hover 目标；`__panel` 是它的
|
|
343
343
|
兄弟节点，不铺任何背景、不参与 hover，自己承担左右 / 底部内距。**展开态不改 `__body` 内距**：
|
|
344
344
|
上下两圈留白始终对称，色条上下才不会一长一短；两块之间的间隔就是 `__body` 的 `padding-bottom`，
|
|
345
|
-
属于头部区、跟着一起变色，`__panel` 的 `margin-top` 归 0
|
|
345
|
+
属于头部区、跟着一起变色，`__panel` 的 `margin-top` 归 0、紧接其后，中间不留不变色的带子。
|
|
346
|
+
**核心不画任何分隔线**：展开区只负责把内容放到头部区下面；需要线时由消费端在 `panel` 内容里自绘
|
|
347
|
+
（有时要、有时不要，消费端自己决定，2026-11-08 用户拍板）。曾经 `__panel` 自带 `border-top`，
|
|
348
|
+
既和消费端自绘的线重复成「一实一虚两条」，又因位置耦合 `--card-pad-l/r` 而在色条内距为 0 的卡片上
|
|
349
|
+
左贴边、右留白。
|
|
346
350
|
`__body` 不许写 `border-radius` 裸值（圆角契约只认 Surface 一处），圆角由根节点裁切保证。
|
|
347
351
|
|
|
348
352
|
`StripCard` 的 4px 色条相对根节点绝对定位（`top:0` / `bottom:0`），展开后仍通高贯穿整卡、
|
|
@@ -365,8 +369,9 @@ EN: The root keeps `padding:0` and paints one resting fill. `__body` is the head
|
|
|
365
369
|
paddings, inherits the root radius, and is the only hover target under `hoverScope: 'head'`. `__panel` is its
|
|
366
370
|
sibling: no background at all, never hovered, with its own horizontal / bottom padding. Expanding never
|
|
367
371
|
rewrites the header padding: top and bottom stay symmetric, and the gap between the blocks is the header's
|
|
368
|
-
own `padding-bottom`, so it changes color together with the header. `__panel`
|
|
369
|
-
`margin-top:0
|
|
370
|
-
|
|
372
|
+
own `padding-bottom`, so it changes color together with the header. `__panel` follows immediately with
|
|
373
|
+
`margin-top:0` and draws no divider — the core only places the expanded content; callers who need a line
|
|
374
|
+
draw it inside `panel` themselves. The StripCard rail is absolutely positioned against the root
|
|
375
|
+
(`top:0` / `bottom:0`), so it stays full-height across the expanded area too. `:has()` and "paint a resting-fill snapshot over the
|
|
371
376
|
expanded area" are forbidden — semi-transparent tokens stacked twice render darker. Callers must put
|
|
372
377
|
expandable content in `panel`; `children` belongs to the header block.
|
package/docs/help/ui.doc.ts
CHANGED
|
@@ -643,8 +643,8 @@ const doc: DocTopic = {
|
|
|
643
643
|
en: '`hoverable` (default off) changes the fill on hover and switches the cursor to `pointer`, using `--dshpc-card-hover` (7% blue light / 13% blue dark). `filled` (default on) controls the background — Card uses surface-1, StripCard the accent tint; `false` makes it transparent but keeps the border. Both axes only rewrite `--surface-bg`, so plugins no longer need their own `:hover` rules.',
|
|
644
644
|
},
|
|
645
645
|
{
|
|
646
|
-
zh: '展开的卡片用 `hoverScope` 选作用域，默认 `\'head\'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel`
|
|
647
|
-
en: 'For expandable cards, `hoverScope` selects the scope. The default `\'head\'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background and
|
|
646
|
+
zh: '展开的卡片用 `hoverScope` 选作用域，默认 `\'head\'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel` 是它的兄弟节点，不铺背景、不画分隔线、不参与 hover，鼠标在展开区里操作时整卡都不触发；需要分隔线时由调用方在 `panel` 内容里自绘。StripCard 的通高色条相对根节点定位，展开后仍贯穿整卡（包括展开区）。想要整卡含展开区一起变色，才显式传 `\'card\'`。**展开内容必须放进 `panel`**（`children` 属于头部区），核心才有分区信号。',
|
|
647
|
+
en: 'For expandable cards, `hoverScope` selects the scope. The default `\'head\'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background, no divider and no hover, so operating inside the expanded area triggers nothing; draw a divider inside `panel` content yourself when you need one. The StripCard rail is positioned against the root and stays full-height across the expanded area. Pass `\'card\'` explicitly to include it. **Expandable content must go into `panel`**; `children` belongs to the header block.',
|
|
648
648
|
},
|
|
649
649
|
],
|
|
650
650
|
api: [
|
package/docs/help/ui.md
CHANGED
|
@@ -373,9 +373,9 @@ h(Surface, { tone: 'sunken', border: 'dashed', padding: 'lg' }, '还没做的东
|
|
|
373
373
|
|
|
374
374
|
> EN: `hoverable` (default off) changes the fill on hover and switches the cursor to `pointer`, using `--dshpc-card-hover` (7% blue light / 13% blue dark). `filled` (default on) controls the background — Card uses surface-1, StripCard the accent tint; `false` makes it transparent but keeps the border. Both axes only rewrite `--surface-bg`, so plugins no longer need their own `:hover` rules.
|
|
375
375
|
|
|
376
|
-
展开的卡片用 `hoverScope` 选作用域，默认 `'head'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel`
|
|
376
|
+
展开的卡片用 `hoverScope` 选作用域，默认 `'head'`：根节点零内距并统一裁圆角，`__body` 作为「上面那一整块」独立承担内距、边到边变色；展开态不改内距，上下两圈留白对称，两块之间的间隔也属于头部区、跟着一起变色；`__panel` 是它的兄弟节点，不铺背景、不画分隔线、不参与 hover，鼠标在展开区里操作时整卡都不触发；需要分隔线时由调用方在 `panel` 内容里自绘。StripCard 的通高色条相对根节点定位，展开后仍贯穿整卡（包括展开区）。想要整卡含展开区一起变色，才显式传 `'card'`。**展开内容必须放进 `panel`**（`children` 属于头部区），核心才有分区信号。
|
|
377
377
|
|
|
378
|
-
> EN: For expandable cards, `hoverScope` selects the scope. The default `'head'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background and
|
|
378
|
+
> EN: For expandable cards, `hoverScope` selects the scope. The default `'head'` gives the root zero padding and clips the radius, while `__body` — the header block owning all padding — changes color edge to edge; expanding keeps its top and bottom padding symmetric, so the gap between the two blocks changes color too. `__panel` is a sibling with no background, no divider and no hover, so operating inside the expanded area triggers nothing; draw a divider inside `panel` content yourself when you need one. The StripCard rail is positioned against the root and stays full-height across the expanded area. Pass `'card'` explicitly to include it. **Expandable content must go into `panel`**; `children` belongs to the header block.
|
|
379
379
|
|
|
380
380
|
| 参数 | 类型 | 默认 | 说明(zh) | 说明(en) |
|
|
381
381
|
|---|---|---|---|---|
|
package/package.json
CHANGED