dsh-plugin-core 0.0.0-stage → 0.1.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/README.md +135 -2
- package/dist/design/index.d.ts +4 -0
- package/dist/design/index.d.ts.map +1 -0
- package/dist/design/index.js +3 -0
- package/dist/design/index.js.map +1 -0
- package/dist/design/style-kit.d.ts +34 -0
- package/dist/design/style-kit.d.ts.map +1 -0
- package/dist/design/style-kit.js +95 -0
- package/dist/design/style-kit.js.map +1 -0
- package/dist/design/tokens-css.d.ts +2 -0
- package/dist/design/tokens-css.d.ts.map +1 -0
- package/dist/design/tokens-css.js +226 -0
- package/dist/design/tokens-css.js.map +1 -0
- package/dist/explorer/ExplorerPanel.d.ts +25 -0
- package/dist/explorer/ExplorerPanel.d.ts.map +1 -0
- package/dist/explorer/ExplorerPanel.js +111 -0
- package/dist/explorer/ExplorerPanel.js.map +1 -0
- package/dist/explorer/explorer-css.d.ts +2 -0
- package/dist/explorer/explorer-css.d.ts.map +1 -0
- package/dist/explorer/explorer-css.js +33 -0
- package/dist/explorer/explorer-css.js.map +1 -0
- package/dist/explorer/index.d.ts +3 -0
- package/dist/explorer/index.d.ts.map +1 -0
- package/dist/explorer/index.js +3 -0
- package/dist/explorer/index.js.map +1 -0
- package/dist/explorer/preview/index.d.ts +12 -0
- package/dist/explorer/preview/index.d.ts.map +1 -0
- package/dist/explorer/preview/index.js +62 -0
- package/dist/explorer/preview/index.js.map +1 -0
- package/dist/explorer/types.d.ts +66 -0
- package/dist/explorer/types.d.ts.map +1 -0
- package/dist/explorer/types.js +51 -0
- package/dist/explorer/types.js.map +1 -0
- package/dist/session/index.d.ts +24 -0
- package/dist/session/index.d.ts.map +1 -0
- package/dist/session/index.js +71 -0
- package/dist/session/index.js.map +1 -0
- package/dist/session/session-css.d.ts +2 -0
- package/dist/session/session-css.d.ts.map +1 -0
- package/dist/session/session-css.js +19 -0
- package/dist/session/session-css.js.map +1 -0
- package/dist/session/types.d.ts +28 -0
- package/dist/session/types.d.ts.map +1 -0
- package/dist/session/types.js +12 -0
- package/dist/session/types.js.map +1 -0
- package/dist/ui/BackToTop.d.ts +8 -0
- package/dist/ui/BackToTop.d.ts.map +1 -0
- package/dist/ui/BackToTop.js +110 -0
- package/dist/ui/BackToTop.js.map +1 -0
- package/dist/ui/Button.d.ts +52 -0
- package/dist/ui/Button.d.ts.map +1 -0
- package/dist/ui/Button.js +56 -0
- package/dist/ui/Button.js.map +1 -0
- package/dist/ui/Card.d.ts +46 -0
- package/dist/ui/Card.d.ts.map +1 -0
- package/dist/ui/Card.js +70 -0
- package/dist/ui/Card.js.map +1 -0
- package/dist/ui/Checkbox.d.ts +24 -0
- package/dist/ui/Checkbox.d.ts.map +1 -0
- package/dist/ui/Checkbox.js +31 -0
- package/dist/ui/Checkbox.js.map +1 -0
- package/dist/ui/Chip.d.ts +9 -0
- package/dist/ui/Chip.d.ts.map +1 -0
- package/dist/ui/Chip.js +13 -0
- package/dist/ui/Chip.js.map +1 -0
- package/dist/ui/EmptyState.d.ts +12 -0
- package/dist/ui/EmptyState.d.ts.map +1 -0
- package/dist/ui/EmptyState.js +10 -0
- package/dist/ui/EmptyState.js.map +1 -0
- package/dist/ui/ErrorBoundary.d.ts +22 -0
- package/dist/ui/ErrorBoundary.d.ts.map +1 -0
- package/dist/ui/ErrorBoundary.js +30 -0
- package/dist/ui/ErrorBoundary.js.map +1 -0
- package/dist/ui/Field.d.ts +104 -0
- package/dist/ui/Field.d.ts.map +1 -0
- package/dist/ui/Field.js +135 -0
- package/dist/ui/Field.js.map +1 -0
- package/dist/ui/FieldHint.d.ts +12 -0
- package/dist/ui/FieldHint.d.ts.map +1 -0
- package/dist/ui/FieldHint.js +27 -0
- package/dist/ui/FieldHint.js.map +1 -0
- package/dist/ui/LiveText.d.ts +13 -0
- package/dist/ui/LiveText.d.ts.map +1 -0
- package/dist/ui/LiveText.js +19 -0
- package/dist/ui/LiveText.js.map +1 -0
- package/dist/ui/Loading.d.ts +10 -0
- package/dist/ui/Loading.d.ts.map +1 -0
- package/dist/ui/Loading.js +71 -0
- package/dist/ui/Loading.js.map +1 -0
- package/dist/ui/MarqueeText.d.ts +22 -0
- package/dist/ui/MarqueeText.d.ts.map +1 -0
- package/dist/ui/MarqueeText.js +47 -0
- package/dist/ui/MarqueeText.js.map +1 -0
- package/dist/ui/Modal.d.ts +25 -0
- package/dist/ui/Modal.d.ts.map +1 -0
- package/dist/ui/Modal.js +45 -0
- package/dist/ui/Modal.js.map +1 -0
- package/dist/ui/ModelPicker.d.ts +35 -0
- package/dist/ui/ModelPicker.d.ts.map +1 -0
- package/dist/ui/ModelPicker.js +52 -0
- package/dist/ui/ModelPicker.js.map +1 -0
- package/dist/ui/Picker.d.ts +44 -0
- package/dist/ui/Picker.d.ts.map +1 -0
- package/dist/ui/Picker.js +169 -0
- package/dist/ui/Picker.js.map +1 -0
- package/dist/ui/SectionHead.d.ts +16 -0
- package/dist/ui/SectionHead.d.ts.map +1 -0
- package/dist/ui/SectionHead.js +18 -0
- package/dist/ui/SectionHead.js.map +1 -0
- package/dist/ui/Segmented.d.ts +57 -0
- package/dist/ui/Segmented.d.ts.map +1 -0
- package/dist/ui/Segmented.js +74 -0
- package/dist/ui/Segmented.js.map +1 -0
- package/dist/ui/Textarea.d.ts +34 -0
- package/dist/ui/Textarea.d.ts.map +1 -0
- package/dist/ui/Textarea.js +26 -0
- package/dist/ui/Textarea.js.map +1 -0
- package/dist/ui/Toast.d.ts +12 -0
- package/dist/ui/Toast.d.ts.map +1 -0
- package/dist/ui/Toast.js +39 -0
- package/dist/ui/Toast.js.map +1 -0
- package/dist/ui/WorkspacePicker.d.ts +48 -0
- package/dist/ui/WorkspacePicker.d.ts.map +1 -0
- package/dist/ui/WorkspacePicker.js +48 -0
- package/dist/ui/WorkspacePicker.js.map +1 -0
- package/dist/ui/card-css.d.ts +3 -0
- package/dist/ui/card-css.d.ts.map +1 -0
- package/dist/ui/card-css.js +49 -0
- package/dist/ui/card-css.js.map +1 -0
- package/dist/ui/controls-css.d.ts +9 -0
- package/dist/ui/controls-css.d.ts.map +1 -0
- package/dist/ui/controls-css.js +341 -0
- package/dist/ui/controls-css.js.map +1 -0
- package/dist/ui/css.d.ts +18 -0
- package/dist/ui/css.d.ts.map +1 -0
- package/dist/ui/css.js +57 -0
- package/dist/ui/css.js.map +1 -0
- package/dist/ui/feedback-css.d.ts +2 -0
- package/dist/ui/feedback-css.d.ts.map +1 -0
- package/dist/ui/feedback-css.js +48 -0
- package/dist/ui/feedback-css.js.map +1 -0
- package/dist/ui/index.d.ts +24 -0
- package/dist/ui/index.d.ts.map +1 -0
- package/dist/ui/index.js +27 -0
- package/dist/ui/index.js.map +1 -0
- package/dist/ui/picker-css.d.ts +2 -0
- package/dist/ui/picker-css.d.ts.map +1 -0
- package/dist/ui/picker-css.js +52 -0
- package/dist/ui/picker-css.js.map +1 -0
- package/dist/ui/picker-logic.d.ts +22 -0
- package/dist/ui/picker-logic.d.ts.map +1 -0
- package/dist/ui/picker-logic.js +53 -0
- package/dist/ui/picker-logic.js.map +1 -0
- package/dist/ui/resizer.d.ts +27 -0
- package/dist/ui/resizer.d.ts.map +1 -0
- package/dist/ui/resizer.js +42 -0
- package/dist/ui/resizer.js.map +1 -0
- package/dist/ui/ticker.d.ts +8 -0
- package/dist/ui/ticker.d.ts.map +1 -0
- package/dist/ui/ticker.js +49 -0
- package/dist/ui/ticker.js.map +1 -0
- package/dist/utils/date.d.ts +46 -0
- package/dist/utils/date.d.ts.map +1 -0
- package/dist/utils/date.js +136 -0
- package/dist/utils/date.js.map +1 -0
- package/dist/utils/http.d.ts +24 -0
- package/dist/utils/http.d.ts.map +1 -0
- package/dist/utils/http.js +60 -0
- package/dist/utils/http.js.map +1 -0
- package/dist/utils/i18n.d.ts +17 -0
- package/dist/utils/i18n.d.ts.map +1 -0
- package/dist/utils/i18n.js +119 -0
- package/dist/utils/i18n.js.map +1 -0
- package/dist/utils/index.d.ts +6 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/index.js +6 -0
- package/dist/utils/index.js.map +1 -0
- package/dist/utils/number.d.ts +8 -0
- package/dist/utils/number.d.ts.map +1 -0
- package/dist/utils/number.js +30 -0
- package/dist/utils/number.js.map +1 -0
- package/dist/utils/string.d.ts +15 -0
- package/dist/utils/string.d.ts.map +1 -0
- package/dist/utils/string.js +45 -0
- package/dist/utils/string.js.map +1 -0
- package/docs/README.md +37 -0
- package/docs/design/architecture.md +77 -0
- package/docs/design/external/dsh-host.md +75 -0
- package/docs/design/features/design.md +57 -0
- package/docs/design/features/explorer.md +70 -0
- package/docs/design/features/session.md +70 -0
- package/docs/design/features/ui.md +193 -0
- package/docs/design/features/utils.md +64 -0
- package/docs/design/features.md +19 -0
- package/docs/design/methods.md +43 -0
- package/docs/design/style.md +60 -0
- package/docs/examples/integration.md +105 -0
- package/docs/requirements.md +173 -0
- package/package.json +78 -4
package/README.md
CHANGED
|
@@ -1,3 +1,136 @@
|
|
|
1
|
-
#
|
|
1
|
+
# dsh-plugin-core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
DSH(DeepSeek Harness)插件共享底座:把跨插件复用的样式、控件、通用方法、工作区浏览、
|
|
4
|
+
会话预览收敛到一处,写新插件时按文档 `npm i` 引用,不再一个个仓库抄。
|
|
5
|
+
|
|
6
|
+
**服务对象:以后要写的每一个 DSH 插件**(不是现有的某三个)。完整需求见 [`docs/requirements.md`](docs/requirements.md)。
|
|
7
|
+
|
|
8
|
+
> **状态**:🚧 可用但**未在真实插件里接入验证过**(见下方「还没做的事」)
|
|
9
|
+
|
|
10
|
+
## 预览(双击 HTML,不起任何服务)
|
|
11
|
+
|
|
12
|
+
不想读文档?所有控件**实时可点**,右上角切明暗 / 中英。
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm install
|
|
16
|
+
pnpm run build # 先出 dist(预览站消费的就是它)
|
|
17
|
+
pnpm run demo:build # 生成静态文件到 demo-dist/
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
然后**用浏览器打开 `demo-dist/index.html`**(双击即可)。
|
|
21
|
+
|
|
22
|
+
产物是**单文件 IIFE + 相对路径**,所以 `file://` 能直接跑:
|
|
23
|
+
- 不用起 dev server、不占端口
|
|
24
|
+
- 目录可以随便挪,拷到别的机器上也能打开
|
|
25
|
+
|
|
26
|
+
> 已放到网上:仓库 Settings → Pages → Source 已选 **GitHub Actions**,`on: push` 自动部署,
|
|
27
|
+
> 地址 `https://cq-guojia.github.io/dsh-plugin-core/`,每次 push 自动更新。
|
|
28
|
+
|
|
29
|
+
预览站用的就是**同一份 `dist/` + 同一套样式注入代码**(`setStyleKit` + `ensureControls`),
|
|
30
|
+
与真实插件走同一条渲染路径——你在预览里看到的就是插件里得到的。
|
|
31
|
+
`explorer` / `session` 的宿主数据是 mock 的(`demo/mock.ts`)。
|
|
32
|
+
|
|
33
|
+
## 文档在哪
|
|
34
|
+
|
|
35
|
+
| 我想… | 看哪 |
|
|
36
|
+
|---|---|
|
|
37
|
+
| 知道每个包提供什么、怎么用 | [`docs/README.md`](docs/README.md)(槽位表)→ [`docs/design/features.md`](docs/design/features.md) |
|
|
38
|
+
| 从零接入一个插件 | [`docs/examples/integration.md`](docs/examples/integration.md) |
|
|
39
|
+
| 改这个仓库本身 | `AGENTS.md` |
|
|
40
|
+
| 查为什么这么设计 | [`docs/requirements.md`](docs/requirements.md) |
|
|
41
|
+
|
|
42
|
+
## 安装
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
pnpm add dsh-plugin-core
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
(npm 也能用;推荐 pnpm。)
|
|
49
|
+
包里带预编译 `dist`(宿主以 git/npm 装插件**不跑构建脚本**,产物必须随包发布)。
|
|
50
|
+
`react` 是 optional peer:只用 `utils` / `design` 的插件不必装。
|
|
51
|
+
|
|
52
|
+
## 快速开始
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import { createStyleKit } from 'dsh-plugin-core/design'
|
|
56
|
+
import { Button, ensureControls, setStyleKit } from 'dsh-plugin-core/ui'
|
|
57
|
+
|
|
58
|
+
// 1) 领一套本插件专属的样式设施(id + 变量前缀都隔离)
|
|
59
|
+
// id / prefix 的取值按项目规范定(多插件同页必须互不冲突);
|
|
60
|
+
// 下面的 dsh-task-reminder / reminder 只是演示命名规律(前缀取插件名缩写)
|
|
61
|
+
setStyleKit(createStyleKit({ id: 'dsh-task-reminder-ui', prefix: 'reminder' }))
|
|
62
|
+
// 2) 挂上 token + 控件样式(幂等,可反复调)
|
|
63
|
+
ensureControls()
|
|
64
|
+
|
|
65
|
+
// 3) 直接用控件,不再自己写原生 input
|
|
66
|
+
const view = <Button variant="primary" onClick={save}>保存</Button>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**为什么必须先 `setStyleKit`**:样式只能以字符串在运行时注入 `<style>`(客户端产物是 JS 闭包,
|
|
70
|
+
`.css` 文件内核不加载)。固定 style id 与变量前缀在多插件同页时会互相覆盖,所以做成工厂,
|
|
71
|
+
每个插件领一套自己的。
|
|
72
|
+
|
|
73
|
+
## 子包
|
|
74
|
+
|
|
75
|
+
| 引入路径 | 装什么 |
|
|
76
|
+
|---|---|
|
|
77
|
+
| `dsh-plugin-core/design` | token 变量表(含深色段)+ `createStyleKit` 注入器工厂 + 主题判据(**零 React**) |
|
|
78
|
+
| `dsh-plugin-core/ui` | 控件:Button / Input 家族 / Textarea / Checkbox / Segmented / Select / Picker / ModelPicker / Modal / toast / 空态 / 错误边界 / Loading … |
|
|
79
|
+
| `dsh-plugin-core/utils` | 纯方法:日期 / 字符串 / 字节 / 时间区间 / HTTP 取数 + 内置中英多语言 |
|
|
80
|
+
| `dsh-plugin-core/explorer` | 工作区浏览面板 + 选工作区 + 选文件 |
|
|
81
|
+
| `dsh-plugin-core/explorer/preview` | 文件预览体 |
|
|
82
|
+
| `dsh-plugin-core/session` | 会话预览(承载可换:弹窗 / 侧栏 / 整页) |
|
|
83
|
+
|
|
84
|
+
依赖方向单向:`design` ← `ui` ← `explorer` / `session`,`utils` 谁也不依赖。
|
|
85
|
+
|
|
86
|
+
**立包判据**(防止子包无限膨胀):有实质内容、会持续长大的**功能模块**才配独立成包;
|
|
87
|
+
只是一个控件就进 `ui`。统一到「控件」粒度就够了,不要提整个页面。
|
|
88
|
+
|
|
89
|
+
## 几条硬规矩
|
|
90
|
+
|
|
91
|
+
- **不传整个 `ctx`**:只传需要的那一小块能力(`WorkspaceFilesFace` / `SessionSource`),
|
|
92
|
+
宿主 breaking 时改的是插件「取出」的一行,包不用动。
|
|
93
|
+
- **明暗判据是 `body[data-ds-dark-theme]`**,不是 `prefers-color-scheme`(后者跟系统,
|
|
94
|
+
不跟用户在宿主里的选择)。
|
|
95
|
+
- **多语言**:核心提供什么就负责它的多语言(包内固定提示语自带中英,`setLocale('zh' | 'en')` 切换);
|
|
96
|
+
插件自己界面的文案由插件自己管。
|
|
97
|
+
- **数据调用方给**:选工作区 / 选文件 / 会话预览都要数据 —— 那些数据要跨 host↔client 边界,
|
|
98
|
+
通道是插件私有的,组件取不到。
|
|
99
|
+
|
|
100
|
+
## 多语言
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
import { setLocale } from 'dsh-plugin-core/utils'
|
|
104
|
+
setLocale('en') // 中文是默认
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## 还没做的事
|
|
108
|
+
|
|
109
|
+
按重要性排:
|
|
110
|
+
|
|
111
|
+
1. **没在真实插件里接入验证过** —— 编译 + 27 条自检通过,但**一条渲染测试都没有**。
|
|
112
|
+
浏览器里的真实外观、注入器挂载、控件交互都未验。
|
|
113
|
+
2. **会话预览只有最简渲染** —— `mirror/` 里那套官方会话 UI 镜像(工具卡 / 代码块 / 推理行等)
|
|
114
|
+
还没搬进来,富内容要走 `renderMessage` 扩展点。
|
|
115
|
+
3. **文件预览只有文本 / 图片** —— 代码无语法高亮(不引 `@codemirror/*`),
|
|
116
|
+
PDF / Office 显示「暂不支持预览」。
|
|
117
|
+
4. **类名没按插件隔离** —— CSS 类名仍是 `dsh-tdt-*`,两个插件若引的 core 版本不同会互相覆盖
|
|
118
|
+
(同版本无害)。主防线是 style 标签 id 与变量前缀隔离。
|
|
119
|
+
5. 设置页骨架没抽(等第二个消费者);发布流程(npm + OIDC)没配。
|
|
120
|
+
|
|
121
|
+
## 组件预览插件(packages/demo/)
|
|
122
|
+
|
|
123
|
+
库本身是**纯库**:只有六个子路径导出,没有 main、没有 dsh 字段、零运行时依赖。
|
|
124
|
+
|
|
125
|
+
预览用的插件是仓库里的**独立 npm 包** `packages/demo/`(包名 `dsh-plugin-core-demo`):它把 core 的构建产物
|
|
126
|
+
打进自己的 bundle ⇒ 自包含、可独立发版,**不需要 core 先发 npm**,预览的也永远是当前这份代码。
|
|
127
|
+
|
|
128
|
+
```bash
|
|
129
|
+
pnpm run build # 先构建库(demo 包引用 dist/)
|
|
130
|
+
pnpm run build:demo # 构建预览插件 → packages/demo/dist/{index.js,client.js}
|
|
131
|
+
cd packages/demo && npm publish --access public
|
|
132
|
+
dsh plugin --profile web add dsh-plugin-core-demo
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
装好后:插件列表 → 本插件 → 设置页里的「组件预览」卡片 → 点开即整页预览(或点侧栏图标)。
|
|
136
|
+
插件在**真实宿主**里渲染,明暗与 token 全部跟随宿主。
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACpF,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/design/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/** 明暗判据(宿主启动脚本 `toggleAttribute` 写入 body,是用户在客户端里的选择)。 */
|
|
2
|
+
export declare const DARK_THEME_SELECTOR = "body[data-ds-dark-theme]";
|
|
3
|
+
export interface StyleKitOptions {
|
|
4
|
+
/** `<style>` 标签 id —— 多插件同页靠它互不覆盖,必须插件内唯一。 */
|
|
5
|
+
id: string;
|
|
6
|
+
/** CSS 变量前缀,如 `acme` ⇒ `--acme-fg`。 */
|
|
7
|
+
prefix: string;
|
|
8
|
+
}
|
|
9
|
+
export interface StyleKit {
|
|
10
|
+
readonly id: string;
|
|
11
|
+
readonly prefix: string;
|
|
12
|
+
/** 已替换前缀的 token CSS(可直接 register 到 tokens 域)。 */
|
|
13
|
+
readonly tokensCss: string;
|
|
14
|
+
/** 拼一个本插件的 CSS 变量名:`cssVar('fg')` ⇒ `--acme-fg`。 */
|
|
15
|
+
cssVar(name: string): string;
|
|
16
|
+
/** 登记一个域的 CSS(同名重复登记 = 覆盖)。 */
|
|
17
|
+
registerStyle(domain: string, css: string): void;
|
|
18
|
+
/** 确保标签已挂载且内容最新(幂等;无 document 时静默跳过)。 */
|
|
19
|
+
ensureStyles(): void;
|
|
20
|
+
/** 登记 + 立刻确保挂载。 */
|
|
21
|
+
applyStyle(domain: string, css: string): void;
|
|
22
|
+
/** 卸载清理:撤掉挂载的 `<style>` 标签并清空登记域(插件卸载 / HMR 时用)。 */
|
|
23
|
+
dispose(): void;
|
|
24
|
+
}
|
|
25
|
+
/** 把 token 原文的前缀换成调用方自己的。 */
|
|
26
|
+
export declare function buildTokensCss(prefix: string): string;
|
|
27
|
+
/**
|
|
28
|
+
* 领一套本插件专属的样式设施。
|
|
29
|
+
*
|
|
30
|
+
* 为什么是工厂而不是模块级单例:单例只有一个固定 style id 与固定变量前缀,
|
|
31
|
+
* 多个插件同处一页时会抢同一个 `<style>` 标签、变量互相覆盖(见需求文档 §5.2)。
|
|
32
|
+
*/
|
|
33
|
+
export declare function createStyleKit(options: StyleKitOptions): StyleKit;
|
|
34
|
+
//# sourceMappingURL=style-kit.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-kit.d.ts","sourceRoot":"","sources":["../../src/design/style-kit.ts"],"names":[],"mappings":"AAEA,0DAA0D;AAC1D,eAAO,MAAM,mBAAmB,6BAA6B,CAAA;AAU7D,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAA;IACV,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,iDAAiD;IACjD,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,oDAAoD;IACpD,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,+BAA+B;IAC/B,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAChD,yCAAyC;IACzC,YAAY,IAAI,IAAI,CAAA;IACpB,mBAAmB;IACnB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7C,oDAAoD;IACpD,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,6BAA6B;AAC7B,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAGrD;AAQD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,eAAe,GAAG,QAAQ,CAmEjE"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { TOKENS_CSS_TEMPLATE } from './tokens-css.js';
|
|
2
|
+
/** 明暗判据(宿主启动脚本 `toggleAttribute` 写入 body,是用户在客户端里的选择)。 */
|
|
3
|
+
export const DARK_THEME_SELECTOR = 'body[data-ds-dark-theme]';
|
|
4
|
+
/** token 原文里写死的前缀,生成时按调用方 prefix 整体替换。 */
|
|
5
|
+
const SOURCE_PREFIX = '--tdt-';
|
|
6
|
+
/** token 域固定名:变量定义必须先于消费它的规则出现。 */
|
|
7
|
+
const TOKENS_DOMAIN = 'tokens';
|
|
8
|
+
const PREFIX_RE = /^[a-zA-Z][a-zA-Z0-9-]*$/;
|
|
9
|
+
/** 把 token 原文的前缀换成调用方自己的。 */
|
|
10
|
+
export function buildTokensCss(prefix) {
|
|
11
|
+
assertPrefix(prefix);
|
|
12
|
+
return TOKENS_CSS_TEMPLATE.split(SOURCE_PREFIX).join(`--${prefix}-`);
|
|
13
|
+
}
|
|
14
|
+
function assertPrefix(prefix) {
|
|
15
|
+
if (!PREFIX_RE.test(prefix)) {
|
|
16
|
+
throw new Error(`dsh-plugin-core/design: prefix 必须是字母开头、只含字母数字与连字符,收到 ${JSON.stringify(prefix)}`);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* 领一套本插件专属的样式设施。
|
|
21
|
+
*
|
|
22
|
+
* 为什么是工厂而不是模块级单例:单例只有一个固定 style id 与固定变量前缀,
|
|
23
|
+
* 多个插件同处一页时会抢同一个 `<style>` 标签、变量互相覆盖(见需求文档 §5.2)。
|
|
24
|
+
*/
|
|
25
|
+
export function createStyleKit(options) {
|
|
26
|
+
const { id, prefix } = options;
|
|
27
|
+
assertPrefix(prefix);
|
|
28
|
+
if (id === '')
|
|
29
|
+
throw new Error('dsh-plugin-core/design: id 不能为空');
|
|
30
|
+
const tokensCss = buildTokensCss(prefix);
|
|
31
|
+
const domains = new Map();
|
|
32
|
+
let tag = null;
|
|
33
|
+
let dirty = true;
|
|
34
|
+
const buildCss = () => {
|
|
35
|
+
const entries = [...domains.entries()];
|
|
36
|
+
entries.sort((a, b) => (a[0] === TOKENS_DOMAIN ? -1 : b[0] === TOKENS_DOMAIN ? 1 : 0));
|
|
37
|
+
return entries.map(([, css]) => css).join('\n');
|
|
38
|
+
};
|
|
39
|
+
const flush = () => {
|
|
40
|
+
if (tag === null)
|
|
41
|
+
return;
|
|
42
|
+
tag.textContent = buildCss();
|
|
43
|
+
dirty = false;
|
|
44
|
+
};
|
|
45
|
+
const ensureStyles = () => {
|
|
46
|
+
if (typeof document === 'undefined')
|
|
47
|
+
return;
|
|
48
|
+
if (tag === null || !tag.isConnected) {
|
|
49
|
+
const head = document.head;
|
|
50
|
+
if (head === null)
|
|
51
|
+
return;
|
|
52
|
+
const found = document.getElementById(id);
|
|
53
|
+
if (found !== null)
|
|
54
|
+
tag = found;
|
|
55
|
+
else {
|
|
56
|
+
const el = document.createElement('style');
|
|
57
|
+
el.id = id;
|
|
58
|
+
head.appendChild(el);
|
|
59
|
+
tag = el;
|
|
60
|
+
}
|
|
61
|
+
dirty = true;
|
|
62
|
+
}
|
|
63
|
+
if (dirty)
|
|
64
|
+
flush();
|
|
65
|
+
};
|
|
66
|
+
const registerStyle = (domain, css) => {
|
|
67
|
+
if (domains.get(domain) === css)
|
|
68
|
+
return;
|
|
69
|
+
domains.set(domain, css);
|
|
70
|
+
dirty = true;
|
|
71
|
+
if (tag !== null && tag.isConnected)
|
|
72
|
+
flush();
|
|
73
|
+
};
|
|
74
|
+
const dispose = () => {
|
|
75
|
+
if (tag !== null && tag.isConnected)
|
|
76
|
+
tag.remove();
|
|
77
|
+
tag = null;
|
|
78
|
+
domains.clear();
|
|
79
|
+
dirty = true;
|
|
80
|
+
};
|
|
81
|
+
return {
|
|
82
|
+
id,
|
|
83
|
+
prefix,
|
|
84
|
+
tokensCss,
|
|
85
|
+
cssVar: (name) => `--${prefix}-${name}`,
|
|
86
|
+
registerStyle,
|
|
87
|
+
ensureStyles,
|
|
88
|
+
dispose,
|
|
89
|
+
applyStyle: (domain, css) => {
|
|
90
|
+
registerStyle(domain, css);
|
|
91
|
+
ensureStyles();
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
//# sourceMappingURL=style-kit.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-kit.js","sourceRoot":"","sources":["../../src/design/style-kit.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare const TOKENS_CSS_TEMPLATE = "\n/* \u2500\u2500 \u6587\u5B57\uFF08\u5BBF\u4E3B label \u56DB\u6863 + \u53CD\u8272\u9762\u7528\u5B57\uFF09\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 */\nbody{\n --tdt-fg:var(--dsw-alias-label-primary,#1f2328);\n --tdt-fg-2:var(--dsw-alias-label-secondary,#5c6370);\n --tdt-fg-3:var(--dsw-alias-label-tertiary,#767d87);\n --tdt-fg-4:var(--dsw-alias-label-caption,#9aa1ab);\n --tdt-fg-dim:var(--dsw-alias-label-dimmed,#b9bfc7);\n /* \u53CD\u8272\u9762\u4E0A\u7684\u5B57\uFF08\u5B9E\u5FC3\u94AE / \u89D2\u6807\uFF09\uFF1A\u6697\u8272\u4E0B\u662F bluish-1000\uFF0C\u6545\u7528 -foreground \u800C\u975E -inverted */\n --tdt-fg-inverse:var(--dsw-alias-label-primary-foreground,#fff);\n\n /* \u2500\u2500 \u9762\uFF08\u5BBF\u4E3B bg-layer \u4E09\u6863 + \u4E0B\u6C89\u8F68\u9053\u5E95\uFF09\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 --tdt-surface-1:var(--dsw-alias-bg-layer-1,#fff);\n --tdt-surface-2:var(--dsw-alias-bg-layer-2,#fff);\n --tdt-surface-3:var(--dsw-alias-bg-layer-3,#fff);\n /* \u300C\u9009\u4E2D\u4EAE\u7247\u300D\u7684\u5E95\u76D8\u8272\uFF08\u914D --tdt-shadow-raised \u7528\uFF09 */\n --tdt-surface-raised:var(--dsw-alias-bg-layer-1,#fff);\n /* \u8F68\u9053 / \u4E0B\u6C89\u5E95\uFF08\u5B98\u65B9\u5206\u6BB5\u63A7\u4EF6\u8F68\u9053\u7528\u7684\u5C31\u662F\u8FD9\u6761\uFF09 */\n --tdt-surface-sunken:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06));\n /* \u6574\u9875 / \u7F16\u8F91\u5668\u5E95\uFF08bg-base\uFF09 */\n --tdt-surface-base:var(--dsw-alias-bg-base,#fff);\n /* \u81EA\u7ED8\u6D6E\u5C42 / \u83DC\u5355\u5361\u7684\u4E0D\u900F\u660E\u5E95\uFF08= base\uFF1B\u4E0D\u8981\u7528\u534A\u900F\u660E\u7684 specific-menu\uFF09 */\n --tdt-surface-menu:var(--tdt-surface-base);\n /* markdown \u4EE3\u7801\u5757\u9762 / \u5B57\u4F53\uFF08\u4F1A\u8BDD\u955C\u50CF\u91CC\u7528\u5230\uFF09 */\n --tdt-code-surface:var(--dsw-alias-markdown-code-block,rgba(128,128,128,.10));\n --tdt-code-font:var(--dsw-font-markdown-code-block-small,12px/18px var(--ds-font-family-code,monospace));\n /* \u8B66\u544A\u6587\u5B57\u8272\uFF08\u5BBF\u4E3B state-warn-label\uFF09 */\n --tdt-warning-label:var(--dsw-alias-state-warn-label,#f5a623);\n /* \u56FA\u5B9A\u4E2D\u6027\u5B9E\u9762\uFF08\u81EA\u7ED8\u6D6E\u5C42\u3001\u6DF1\u8272\u4E3B\u9898\u4E0B\u5FC5\u987B\u81EA\u5DF1\u53D8\u7684\u90A3\u51E0\u4E2A\uFF09\u2014\u2014\u53EA\u6709\u5B83\u9700\u8981\u6697\u8272\u8986\u76D6 */\n --tdt-solid:var(--dsw-static-neutral-00,#fff);\n --tdt-on-solid:var(--dsw-alias-label-primary,#1f2328);\n /* \u4EA4\u4ED8\u6587\u4EF6\u5361\u90A3\u79CD\u300C\u6D45\u5E95\u76D8 + hover \u52A0\u6DF1\u300D\u4E24\u62CD */\n --tdt-plate:var(--dsw-static-neutral-50,#fafafa);\n --tdt-plate-hover:var(--dsw-static-neutral-100,#f5f5f5);\n /* \u65E7\u5185\u6838\u56DE\u9000\uFF08Chrome <111 \u4E0D\u8BA4 color-mix \u21D2 \u8FD9\u6761\u751F\u6548\uFF1B\u65B0\u5185\u6838\u88AB\u4E0B\u9762\u90A3\u6761\u8986\u76D6\uFF09\u3002\n \u8FD9\u51E0\u4E2A\u662F**\u56FA\u5B9A\u4E2D\u6027\u9762**\u3001\u4E0D\u9760\u8DDF\u968F\u5BBF\u4E3B\u4E3B\u9898\u8272\uFF0C\u6545\u53EF\u4EE5\u65E0\u635F\u5730\u7ED9\u660E\u6587\u56DE\u9000\u3002 */\n --tdt-icon-plate:rgba(255,255,255,.5);\n --tdt-icon-plate:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 50%,transparent);\n /* \u8868\u5934\u5E95\uFF1A\u6D45\u8272\u4E3B\u9898**\u504F\u6DF1**\uFF0C\u4E14\u5FC5\u987B**\u6BD4\u6591\u9A6C\u7EB9\uFF08--tdt-plate\uFF09\u518D\u6DF1\u4E00\u6863**\u2014\u2014\n \u4E24\u8005\u4E0D\u80FD\u649E\u8272\uFF08\u7528\u6237 2026-10-02\uFF1A\u8868\u5934\u8DDF\u6591\u9A6C\u7EB9\u4E00\u6A21\u4E00\u6837\uFF09\u3002 */\n --tdt-head-bg:var(--dsw-static-neutral-100,#f5f5f5);\n /* \u56FE\u6807\u5C0F\u5E95\u677F\uFF08\u4EA7\u51FA\u7269\uFF09\uFF1A\u6D45\u8272\u4E0B\u8981**\u770B\u5F97\u89C1**\uFF08\u539F\u5148\u53D6 plate \u21D2 \u5728\u767D\u5E95\u4E0A\u7B49\u4E8E\u6CA1\u6709\uFF09\uFF1Bhover \u52A0\u500D\u3002 */\n --tdt-chip-bg:rgba(15,15,15,.07);\n --tdt-chip-bg:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 7%,transparent);\n --tdt-chip-bg-hover:rgba(15,15,15,.14);\n --tdt-chip-bg-hover:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 14%,transparent);\n /* \u5C55\u5F00\u884C\uFF1A**\u5E26\u900F\u660E\u5EA6\u7684\u84DD**\u2014\u2014\u4E0D\u662F\u7070\u3001\u4E5F\u4E0D\u662F\u7EAF\u8272\uFF0C\u900F\u51FA\u5361\u7247\u5E95\u8272\uFF0C\u4E00\u773C\u770B\u51FA\u300C\u8FD9\u662F\u5C55\u5F00\u7684\u300D\n \uFF08\u7528\u6237 2026-10-02\uFF1A\u7070\u8272\u8DDF\u6591\u9A6C\u7EB9\u5206\u4E0D\u51FA\u6765\uFF09\u3002\u5185\u5BB9\u533A\u518D\u6DE1\u4E00\u6863\uFF0C\u5F62\u6210\u300C\u884C\u6DF1 / \u5185\u5BB9\u6D45\u300D\u7684\u533A\u9694\u3002 */\n --tdt-open-bg:rgba(37,99,235,.10);\n --tdt-open-bg-soft:rgba(37,99,235,.05);\n --tdt-card-hover:rgba(37,99,235,.07);\n\n /* \u2500\u2500 \u63CF\u8FB9\u56DB\u6863\uFF08\u5BBF\u4E3B\u771F\u503C\uFF1Al1 4% / l2 10% / l3 12% / l4 16%\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n --tdt-border-faint:var(--dsw-alias-border-l1,#0000000a);\n --tdt-border:var(--dsw-alias-border-l2,#0000001a);\n --tdt-border-strong:var(--dsw-alias-border-l3,#0000001f);\n --tdt-border-heavy:var(--dsw-alias-border-l4,#00000029);\n\n /* \u2500\u2500 \u54C1\u724C / \u8BED\u4E49\u8272 \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 /* \u54C1\u724C\u300C\u9762\u300D\u8272\uFF1A\u660E\u8272\u8FD1\u9ED1\u3001\u6697\u8272\u8FD1\u767D\uFF08\u5B98\u65B9 Switch \u9009\u4E2D\u6001\u5373\u6B64\uFF09\uFF0C**\u4E0D\u662F\u84DD\u8272** */\n --tdt-accent:var(--dsw-alias-brand-primary,#0f1115);\n /* \u84DD\u8272\uFF1A\u5F3A\u8C03 / \u9009\u4E2D / \u7126\u70B9\uFF0C\u4E00\u5F8B\u8D70\u8FD9\u6761 */\n --tdt-business:var(--dsw-alias-state-business-primary,#3b5bdb);\n --tdt-success:var(--dsw-alias-state-success-primary,#22c55e);\n /* \u26A0\uFE0F \u662F state-warn\uFF08\u4E0D\u662F state-warning\uFF0C\u540E\u8005\u5BBF\u4E3B\u65E0\u6B64\u5B9A\u4E49\uFF09 */\n --tdt-warning:var(--dsw-alias-state-warn-primary,#f59e0b);\n --tdt-danger:var(--dsw-alias-state-error-primary,#ec1313);\n --tdt-link:var(--dsw-alias-link,#3b5bdb);\n /* \u8BED\u4E49\u8272**\u5B9E\u9762**\u4E0A\u7684\u5B57\uFF08\u89D2\u6807 / \u5B9E\u5FC3\u63D0\u793A\uFF09\uFF1A\u5BBF\u4E3B\u7EA2\u7EFF\u9EC4\u4E09\u8272\u90FD\u662F\u4E2D\u8C03 \u21D2 \u767D\u5B57\u4E24\u4E2A\u4E3B\u9898\u90FD\u53EF\u8BFB\uFF0C\n \u6545\u8FD9\u662F\u4E00\u6761\u4E0E\u4E3B\u9898\u65E0\u5173\u7684\u5E38\u91CF\uFF1B\u4E0D\u8981\u62FF --tdt-fg-inverse \u9876\u2014\u2014\u5B83\u5728\u6697\u8272\u4E0B\u662F\u8FD1\u9ED1\uFF0C\u538B\u5728\u7EA2\u5E95\u4E0A\u770B\u4E0D\u6E05\u3002 */\n --tdt-on-signal:#fff;\n /* \u8BED\u4E49\u8272**\u6D45\u5E95**\uFF1A\u72B6\u6001\u8272\u7CFB\u7684\u300C\u4E00\u5757\u5E95\u8272\u300D\u2014\u2014\u6267\u884C\u8BB0\u5F55\u9875\u6BCF\u6761\u6D41\u6C34\u8D26\u7684\u5757\u5E95\u5C31\u662F\u5B83\n \uFF08\u7528\u6237 2026-10-04\uFF1A\u6B63\u5E38\u6001\u7ED9\u540C\u8272\u7CFB\u5F88\u6D45\u7684\u900F\u660E\u5E95\u3001\u5931\u8D25\u7528\u7EA2\u5E95\u900F\u51FA\u6765\uFF09\u3002\n \u7528 \u300Ccolor-mix\u300D \u73B0\u7B97\u800C\u4E0D\u5199\u6B7B rgba\uFF1A\u72B6\u6001\u8272\u672C\u8EAB\u8DDF\u968F\u5BBF\u4E3B alias\uFF0C\u4E3B\u9898\u4E00\u6362\u81EA\u52A8\u6210\u7ACB\u3002\n \u26A0\uFE0F **\u6DF1\u8272\u4E0B\u8981\u66F4\u6DE1**\uFF1A\u7528\u6237 2026-10-04\u300C\u6DF1\u8272\u98CE\u683C\u7684\u7EFF\u8272\u548C\u7EA2\u8272\u597D\u50CF\u90FD\u6709\u70B9\u6DF1\u300D\u21D2 dark \u6BB5\n \u628A\u8FD9\u56DB\u6761\u538B\u5230 5%\uFF08\u66F4\u8D34\u8FD1\u9762\u677F\u5E95\u3001\u5B58\u5728\u611F\u66F4\u5F31\uFF09\uFF1B\u6D45\u8272\u6BB5\u7EF4\u6301 8%\u3002\u4E24\u7AEF\u5404\u81EA\u7ED9\u503C\uFF0C\u4E0D\u5171\u7528\u4E00\u6761\u66F2\u7EBF\u3002\n \u547D\u540D\u6536\u5728 tokens.ts \u5355\u70B9\uFF08\u672C\u4ED3\u786C\u89C4\u77E9\uFF1A\u4E1A\u52A1\u6587\u4EF6\u4E0D\u8BB8\u81EA\u9020 --tdt-*\uFF09\u3002 */\n --tdt-success-soft:color-mix(in srgb,var(--tdt-success) 8%,transparent);\n --tdt-warning-soft:color-mix(in srgb,var(--tdt-warning) 8%,transparent);\n --tdt-danger-soft:color-mix(in srgb,var(--tdt-danger) 8%,transparent);\n --tdt-business-soft:color-mix(in srgb,var(--tdt-business) 8%,transparent);\n\n /* \u26A0\uFE0F 2026-10-18 \u7528\u6237\u62CD\u677F\uFF1A\u5BBF\u4E3B alias \u7684 hover\uFF08\u6697\u8272\u767D 8% / \u4EAE\u8272 6%\uFF09**\u592A\u5F31**\uFF0C\n \u300C\u79FB\u4E0A\u53BB\u8981\u4ED4\u7EC6\u770B\u624D\u770B\u5F97\u51FA\u6765\u300D\u21D2 \u4E0D\u518D\u59D4\u6258\u5BBF\u4E3B hover \u522B\u540D\uFF0C\u6539\u4E3A\u81EA\u63BA\u4E2D\u6027\u8272\u5E76\u52A0\u91CD\uFF1A\n \u4EAE\u8272\u63BA\u9ED1 10%\u3001\u6697\u8272\u63BA\u767D 14%\uFF08active \u518D\u52A0\u4E00\u6863\uFF09\u3002\u6309\u94AE / \u5206\u6BB5\u8F68\u9053 / \u5404\u7C7B hover \u5E95\u540C\u65F6\u53D7\u76CA\u3002\n \u26A0\uFE0F \u5FC5\u987B\u4FDD\u7559 rgba \u515C\u5E95\u884C\u5728\u524D\uFF08\u672C\u6587\u4EF6\u60EF\u4F8B\uFF0C\u89C1 icon-plate \u6CE8\u91CA\uFF09\uFF1A\u63BA\u7684\u662F**\u56FA\u5B9A\u4E2D\u6027\u8272**\n \uFF08neutral-900=#0f0f0f / neutral-00=#fff\uFF09\uFF0C\u9884\u8BA1\u7B97\u65E0\u635F\uFF1B\u65E7\u5185\u6838\u4E0D\u8BA4 color-mix \u65F6\u8D70\u515C\u5E95\uFF0C\n \u5426\u5219\u6574\u6761 background:var(--seg-track) \u4F5C\u5E9F \u21D2 \u5206\u6BB5\u8F68\u9053\u900F\u660E\uFF08\u771F\u8E29\u8FC7\uFF1A\u9884\u89C8\u7AD9\u8F68\u9053\u6D88\u5931\uFF09\u3002 */\n --tdt-hover:rgba(15,15,15,.10);\n --tdt-hover:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 10%,transparent);\n --tdt-active:rgba(15,15,15,.18);\n --tdt-active:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 18%,transparent);\n --tdt-mask:var(--dsw-alias-bg-mask-1,#0000003d);\n /* \u300C\u9009\u4E2D\u9762\u300D\uFF082026-10-06\uFF0C\u4EFB\u52A1\u65E5\u7A0B\u9875\u9996\u521B\uFF09= \u5F53\u524D\u5E95\u8272**\u671D\u66F4\u6DF1\u63BA 12% \u6587\u5B57\u8272**\uFF1A\n \u6D45\u8272\u4E3B\u9898\u4E0B\u6587\u5B57\u8272\u662F\u9ED1 \u21D2 \u9009\u4E2D\u9762\u6BD4\u5E38\u6001\u5E95\u8272**\u6DF1\u4E00\u6863**\u3002\u6DF1\u8272\u5206\u652F\u89C1 body[data-ds-dark-theme]\uFF08\u671D\u80CC\u666F\u8272\u63BA\uFF09\u3002\n \u8BED\u4E49\uFF1A\u6807\u8BB0\u300C\u6B63\u5728\u770B\u7684\u4E1C\u897F\u300D\uFF0C\u6BD4\u5E38\u6001\u660E\u663E\u3001\u53C8\u4E0D\u8BB8\u76D6\u4F4F\u5185\u5BB9\uFF08\u4E0D\u8BB8\u7528\u534A\u900F\u660E\u53E0\u72B6\u6001\u8272\uFF09\u3002 */\n --tdt-selected-bg:color-mix(in srgb,var(--tdt-surface-1) 88%,var(--tdt-fg));\n /* \u4EFB\u52A1\u65E5\u7A0B\u9875\u672C\u6708\u683C\u9ED8\u8BA4\u5E95\uFF082026-10-06 \u2192 \u7EED2\uFF09\uFF1A\u6D45\u8272\u4E0B\u7ED9**\u6DE1\u84DD**\uFF08business 8% \u900F\u767D\u5E95\uFF09\u2014\u2014\n \u53C2\u7167\u7528\u6237\u53C2\u8003\u7A3F\u91CC\u672A\u9009\u4E2D\u65E5\u7A0B\u5757 / Tuesday \u5217\u7684\u90A3\u79CD\u84DD\u3001\u518D\u6D45\u4E00\u70B9\u70B9\uFF1B\n \u76F8\u90BB\u6708\u8865\u4F4D\u683C\u4ECD\u8D70 --tdt-surface-2\uFF08\u66F4\u7070\uFF09\uFF0C\u4E0D\u53D7\u5F71\u54CD\u3002\n \u6DF1\u8272\u6BB5\u7EF4\u6301 #23262e\uFF08\u7528\u6237\uFF1A\u6DF1\u8272 UI \u5DF2\u5DEE\u4E0D\u591A\uFF0C\u4E0D\u52A8\uFF09\u3002 */\n --tdt-cal-cell-bg:color-mix(in srgb,var(--tdt-business) 8%,var(--tdt-surface-1));\n /* \u4EFB\u52A1\u65E5\u7A0B\u9875\u300C\u70B9\u5F00\u67D0\u5929\u300D\u5C55\u5F00\u7684\u9762\u677F\u5E95\uFF082026-10-06 \u7EED\uFF09\uFF1A\u6D45\u8272\u4E0B**\u65E0\u9650\u63A5\u8FD1\u767D\u3001\u53EA\u5E26\u4E00\u4E01\u70B9\u7070**\n \uFF08neutral-50 = #fafafa\uFF09\u2014\u2014\u9762\u677F\u91CC\u88C5\u534A\u900F\u660E\u6267\u884C\u8BB0\u5F55\u5217\u8868\uFF0C\u5E95\u518D\u6DF1\u6574\u7247\u5C31\u53D1\u7CCA\u53D1\u7070\uFF1B\n \u6DF1\u8272\u6BB5\u6CBF\u7528\u539F selected-bg \u6697\u503C\uFF0C\u4FDD\u6301\u4E0D\u52A8\u3002 */\n --tdt-cal-panel-bg:var(--dsw-static-neutral-50,#fafafa);\n /* \u4EFB\u52A1\u65E5\u7A0B\u9875\u672C\u6708\u683C hover \u5E95\uFF08\u6D45\u8272\u6BB5\uFF0C2026-10-06 \u7EED3\uFF09\uFF1A\u4E0D\u518D\u8D70\u7070\u8272\u901A\u7528\u4EA4\u4E92\u5E95\u2014\u2014\n \u9F20\u6807\u79FB\u4E0A\u53BB\u5E94\u662F\u300C\u66F4\u4EAE\u4E00\u70B9\u70B9\u7684\u84DD\u300D\uFF08\u4E0E\u6DF1\u8272\u6BB5\u540C\u8BED\u4E49\uFF1Ahover = \u63D0\u4EAE\u7684\u84DD\uFF0C\u4E0D\u662F\u7070\u4E0B\u53BB\uFF09\u3002\n \u6D53\u5EA6**\u4ECB\u4E8E**\u8868\u5934\u84DD\uFF0814%\uFF09\u4E0E\u672A\u9009\u4E2D\u683C\u84DD\uFF088%\uFF09\u4E4B\u95F4\u3001\u7565\u504F\u8868\u5934\u4E00\u4FA7\uFF1Abusiness 12% \u900F\u767D\u5E95\n \uFF08\u6BD4\u8868\u5934\u6D45\u4E00\u70B9\u3001\u6BD4\u672A\u9009\u4E2D\u683C\u6DF1\u4E00\u70B9\uFF09\u3002 */\n --tdt-cal-cell-hover:color-mix(in srgb,var(--tdt-business) 12%,var(--tdt-surface-1));\n\n /* \u2500\u2500 \u6295\u5F71 / \u7126\u70B9 \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\u2500 */\n --tdt-shadow-1:var(--dsw-elevation-soft,0 4px 16px 0 #00000008);\n /* \u4EAE\u7247\u81EA\u5E26\u7684\u6D6E\u8D77\u611F\uFF08\u9009\u4E2D\u6001\u7528\uFF1B\u4E0E --tdt-surface-raised \u914D\u5BF9\uFF09 */\n --tdt-shadow-raised:var(--dsw-elevation-soft,0 4px 16px 0 #00000008);\n --tdt-shadow-2:var(--dsw-shadow-lv3,0 12px 32px 0 #00000014);\n /* \u952E\u76D8\u7126\u70B9\u73AF\u3002\u26A0\uFE0F \u4E0D\u7528\u5BBF\u4E3B --dsw-focus-ring-color\uFF1A\u5B83\u9ED8\u8BA4\u503C\u662F transparent\uFF08\u515C\u5E95\u4E0D\u751F\u6548\u3001\u4F1A\u9690\u8EAB\uFF09 */\n --tdt-focus:var(--dsw-alias-state-business-primary,#3b5bdb);\n\n /* \u2500\u2500 \u5706\u89D2\uFF08\u5BBF\u4E3B\u771F\u503C 4 / 8 / 12 / 16 / 20 / 28\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n --tdt-radius-xs:var(--dsw-radius-xs,4px);\n --tdt-radius-sm:var(--dsw-radius-sm,8px);\n --tdt-radius-md:var(--dsw-radius-md,12px);\n --tdt-radius-lg:var(--dsw-radius-lg,16px);\n --tdt-radius-xl:var(--dsw-radius-xl,20px);\n --tdt-radius-panel:var(--dsw-radius-panel,28px);\n\n /* \u2500\u2500 \u95F4\u8DDD\u56DB\u62CD\uFF08\u53EA\u8BB8\u7528\u8FD9\u56DB\u6863\uFF0C\u4E0D\u8BB8\u51FA\u73B0 5 / 7 / 9px\uFF09\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n --tdt-space-1:4px;\n --tdt-space-2:8px;\n --tdt-space-3:12px;\n --tdt-space-4:16px;\n\n /* \u2500\u2500 \u63A7\u4EF6\u9AD8\u5EA6\uFF1A\u79BB\u6563\u4E09\u6863\uFF08\u63A7\u4EF6\u7528 size=\"sm|md|lg\" \u9009\uFF1B\u8C03\u7528\u70B9\u4E0D\u8BB8\u81EA\u5B9A\u4E49\u9AD8\u5EA6\uFF0C\n \u771F\u4E0D\u591F\u7528\u624D\u5141\u8BB8\u5728\u8C03\u7528\u70B9\u672C\u5730\u8986\u76D6 --tdt-control-h-*\uFF0C\u5C5E\u4F8B\u5916\u800C\u975E\u5E38\u6001\uFF09\u2500\u2500 */\n --tdt-control-h-sm:24px;\n --tdt-control-h-md:28px;\n --tdt-control-h-lg:32px;\n\n /* \u2500\u2500 \u5B57\u53F7 / \u884C\u9AD8\uFF1A\u76F4\u7ED1\u5BBF\u4E3B\u5B57\u53F7\u65CF\uFF08\u5BBF\u4E3B\u771F\u503C 11 / 12 / 13 / 14 / 16\uFF09\u2500\u2500\u2500\u2500\u2500 */\n --tdt-font-xs:var(--dsw-font-xxxs-11-font-size,11px);\n --tdt-font-sm:var(--dsw-font-xxs-12-font-size,12px);\n --tdt-font-md:var(--dsw-font-xs-13-font-size,13px);\n --tdt-font-lg:var(--dsw-font-s-14-font-size,14px);\n --tdt-font-xl:var(--dsw-font-base-16-font-size,16px);\n --tdt-line-xs:var(--dsw-font-xxxs-11-line-height,14px);\n --tdt-line-sm:var(--dsw-font-xxs-12-line-height,18px);\n --tdt-line-md:var(--dsw-font-xs-13-line-height,20px);\n --tdt-line-lg:var(--dsw-font-s-14-line-height,22px);\n --tdt-line-xl:var(--dsw-font-base-16-line-height,24px);\n --tdt-font-mono:var(--ds-font-family-code,monospace);\n\n /* \u2500\u2500 \u5C42\u7EA7\u9636\u68AF\uFF08\u4E1A\u52A1\u6587\u4EF6\u4E0D\u8BB8\u518D\u5199\u88F8 z-index\uFF09\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 /* \u9875\u9762\u7EA7\u9884\u89C8\u5206\u680F \u2192 \u62BD\u5C49\uFF08\u65B0\u5EFA/\u7F16\u8F91\uFF09\u2192 \u5F39\u7A97/\u786E\u8BA4\u6846 \u2192 \u6D6E\u5C42\u83DC\u5355 \u2192 \u6D6E\u5C42\u63D0\u793A */\n /* \u5185\u5BB9\u5C42\u5438\u9876\uFF08\u5929\u6807\u7B7E / \u8868\u5934\u8FD9\u7C7B\u300C\u8DDF\u7740\u6EDA\u4F46\u538B\u4F4F\u540C\u5C42\u5185\u5BB9\u300D\u7684\u5143\u7D20\uFF09\uFF1A\u53EA\u538B\u540C\u5C42\u5144\u5F1F\uFF0C\n \u5FC5\u987B\u4F4E\u4E8E\u4E0B\u9762\u6240\u6709\u6D6E\u5C42\u6863 \u2014\u2014 \u6240\u4EE5\u5B83\u4E0D\u662F\u300C\u5F00\u65B0\u6D6E\u5C42\u6863\u300D\uFF0C\u800C\u662F\u5185\u5BB9\u5C42\u5185\u90E8\u7684\u6392\u5E8F\u4F4D\u3002 */\n --tdt-z-sticky:10;\n --tdt-z-dock:1030;\n --tdt-z-drawer:1040;\n --tdt-z-modal:1070;\n --tdt-z-menu:1100;\n --tdt-z-tip:1200;\n\n /* \u2500\u2500 \u52A8\u6548 \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n --tdt-dur:var(--ds-transition-duration,.2s);\n --tdt-dur-fast:var(--ds-transition-duration-fast,.12s);\n --tdt-ease:var(--ds-ease-in-out,cubic-bezier(.4,0,.2,1));\n /* \u8FD0\u884C\u4E2D\u72B6\u6001\u7684\u8109\u52A8\u65F6\u957F\uFF082026-10-06 \u7EDF\u4E00\u524D\u540E\u4E24\u7AEF\uFF1A\u4EFB\u52A1\u914D\u7F6E\u91CC\u7684\u7EFF\u547C\u5438 \u2192 \u84DD\u3001\u653E\u6162\uFF1B\n \u6267\u884C\u8BB0\u5F55\u91CC\u7684\u84DD\u95EA \u2192 \u653E\u6162\u4E00\u70B9\u3002\u4E24\u8005\u7528\u540C\u4E00\u4E2A\u503C\uFF0C\u52A8\u753B\u5F62\u72B6\u672C\u5C31\u4E00\u81F4\uFF09\u3002 */\n --tdt-dur-run:500ms;\n}\n\n/* \u2500\u2500 \u660E\u6697\u5DEE\u5F02\u7684**\u552F\u4E00**\u843D\u70B9 \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 \u5224\u636E = body[data-ds-dark-theme]\uFF08\u5BBF\u4E3B 0.2.0-rc.2 \u6E90\u7801\u6838\u5B9E\uFF1A\u542F\u52A8\u811A\u672C toggleAttribute \u5199\u5165\uFF0C\n \u552F\u4E00\u660E\u6697\u5224\u636E\uFF1B\u63D2\u4EF6\u7981\u6B62\u7528 prefers-color-scheme \u2014\u2014 \u5B83\u8DDF\u7684\u662F\u7CFB\u7EDF\u3001\u4E0D\u662F\u7528\u6237\u5728\u5BBF\u4E3B\u91CC\u7684\u9009\u62E9\uFF09\u3002\n \u4E0B\u9762\u53EA\u653E alias \u8868\u8FBE\u4E0D\u4E86\u7684\u300C\u56FA\u5B9A\u4E2D\u6027\u9762\u300D\uFF1B\u989C\u8272\u82E5\u80FD\u9760 alias \u81EA\u52A8\u8DDF\u968F\uFF0C\u4E00\u5F8B\u4E0D\u8981\u5199\u5728\u8FD9\u91CC\u3002 */\nbody[data-ds-dark-theme]{\n --tdt-solid:var(--dsw-static-neutral-900,#0f0f0f);\n --tdt-on-solid:var(--dsw-static-neutral-00,#fff);\n /* \u6697\u8272 hover \u63BA\u767D 14% / active 24%\uFF08\u5BF9\u9F50\u4E0A\u9762 2026-10-18 \u7684\u52A0\u91CD\u62CD\u677F\uFF09\u3002rgba \u515C\u5E95\u884C\u540C\u4E0A\u3002 */\n --tdt-hover:rgba(255,255,255,.14);\n --tdt-hover:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 14%,transparent);\n --tdt-active:rgba(255,255,255,.24);\n --tdt-active:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 24%,transparent);\n --tdt-plate:var(--dsw-static-neutral-850,#212123);\n --tdt-plate-hover:var(--dsw-static-neutral-800,#292929);\n --tdt-icon-plate:rgba(255,255,255,.05);\n --tdt-icon-plate:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 5%,transparent);\n /* \u6697\u8272\u4E3B\u9898**\u53CD\u8FC7\u6765**\uFF1A\u8868\u5934\u8981\u6BD4\u5361\u7247\u9762**\u4EAE**\u3001\u6BD4\u6591\u9A6C\u7EB9\u518D**\u6D45\u4E00\u6863**\uFF08\u7528\u6237\uFF1A\u7EAF\u9ED1\u80CC\u666F\u6CA1\u6CD5\u770B\uFF09\u3002 */\n --tdt-head-bg:var(--tdt-surface-2);\n /* \u6697\u8272\u5E95\u677F**\u5FAE\u4EAE**\uFF1Bhover **\u66F4\u4EAE**\uFF08\u539F\u5148 hover \u53D6 plate-hover \u53CD\u800C\u66F4\u6DE1 \u21D2 \u9F20\u6807\u79FB\u4E0A\u53BB\u5C31\u6CA1\u4E86\uFF09\u3002 */\n --tdt-chip-bg:rgba(255,255,255,.08);\n --tdt-chip-bg:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 8%,transparent);\n --tdt-chip-bg-hover:rgba(255,255,255,.16);\n --tdt-chip-bg-hover:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 16%,transparent);\n /* \u6697\u8272\u4E0B\u84DD\u8272\u8981\u66F4\u4EAE\u3001\u900F\u660E\u5EA6\u7565\u9AD8\u624D\u538B\u5F97\u4F4F\u6DF1\u5E95\u3002 */\n --tdt-open-bg:rgba(96,165,250,.18);\n --tdt-open-bg-soft:rgba(96,165,250,.08);\n --tdt-card-hover:rgba(96,165,250,.13);\n /* \u8BED\u4E49\u8272**\u6D45\u5E95**\uFF08\u6DF1\u8272\u7248\uFF09\uFF1A\u7528\u6237\u5ACC\u6DF1\u8272\u7684\u7EFF / \u7EA2\u300C\u6709\u70B9\u6DF1\u300D\u21D2 \u538B\u5230 **5%**\uFF08\u6D45\u8272\u6BB5\u662F 8%\uFF09\uFF0C\n \u66F4\u8D34\u8FD1\u9762\u677F\u5E95\u8272\u3001\u5B58\u5728\u611F\u66F4\u5F31\uFF1B\u5757\u5E95\u4E0E\u72B6\u6001\u8272\u7AD6\u6761\u4ECD\u540C\u6E90\uFF08\u7AD6\u6761\u662F\u5B9E\u8272\uFF0C\u4E0D\u53D7\u8FD9\u6761\u5F71\u54CD\uFF09\u3002 */\n --tdt-success-soft:color-mix(in srgb,var(--tdt-success) 5%,transparent);\n --tdt-warning-soft:color-mix(in srgb,var(--tdt-warning) 5%,transparent);\n --tdt-danger-soft:color-mix(in srgb,var(--tdt-danger) 5%,transparent);\n --tdt-business-soft:color-mix(in srgb,var(--tdt-business) 5%,transparent);\n /* \u300C\u9009\u4E2D\u9762\u300D\uFF08\u6DF1\u8272\u7248\uFF0C2026-10-06\uFF09\uFF1A\u63BA **~40% \u80CC\u666F\u8272**\uFF08--tdt-surface-base\uFF09\u21D2 \u65E0\u9650\u63A5\u8FD1\u9875\u9762\u80CC\u666F\u7684\u9ED1\u3001\n \u53EA\u6BD4\u80CC\u666F\u7565\u6DF1\u4E00\u70B9\u70B9\uFF08\u7528\u6237\uFF1A\u6DF1\u8272\u4E0B\u5C55\u5F00\u533A\u538B\u7740\u4EFB\u52A1\u900F\u660E\u7EFF\u4F1A\u53D1\u7070\uFF0C\u5E95\u8272\u8981\u5C3D\u91CF\u8D34\u8FD1\u80CC\u666F\u624D\u4E0D\u663E\u7070\uFF09\u3002\n \u26A0\uFE0F \u6DF1\u8272\u4E0B\u4E0D\u80FD\u63BA\u6587\u5B57\u8272 \u2014\u2014 \u90A3\u662F\u767D\uFF0C\u4F1A\u53D8\u4EAE\uFF0C\u9009\u4E2D\u53CD\u800C\u6BD4\u672C\u6708\u65E5\u671F\u6D45\u3002 */\n --tdt-selected-bg:color-mix(in srgb,var(--tdt-surface-1) 60%,var(--tdt-surface-base));\n /* \u4EFB\u52A1\u65E5\u7A0B\u9875\u672C\u6708\u683C\u7684\u9ED8\u8BA4\u5E95\uFF08\u6DF1\u8272\u7248\uFF0C2026-10-06\uFF09\uFF1A\u6DF1\u7684\u3001\u5E26\u70B9\u7070\u84DD\u7684\u6697\u8272\uFF08\u7528\u6237\u7ED9\u7684\u53C2\u8003\u56FE \u2248 #23262e\uFF09\uFF0C\n \u6BD4\u539F\u6765\u7684\u5361\u7247\u9762\u66F4\u6C89\u3001\u66F4\u504F\u84DD\u7070\uFF1B\u9009\u4E2D\u683C\u4ECD\u8D70 --tdt-selected-bg\uFF08\u66F4\u6697\u4E00\u6863\uFF09\uFF0C\u5C42\u7EA7\u4E0D\u53D8\u3002 */\n --tdt-cal-cell-bg:#23262e;\n /* \u4EFB\u52A1\u65E5\u7A0B\u9875\u672C\u6708\u683C hover \u5E95\uFF08\u6DF1\u8272\u6BB5\uFF0C2026-10-06\uFF09\uFF1A\u539F\u5148\u8D70 --tdt-hover\uFF08\u5BBF\u4E3B\u6D45\u8272\u53E0\u52A0\uFF09\u5728\u6DF1\u5E95\u4E0A\u663E\u5F97\n \u300C\u7070\u53D1\u4EAE\u300D\uFF0C\u4E0D\u597D\u770B \u21D2 \u6362\u6210\u66F4\u8D34\u5E95\u7684\u84DD\u8C03\u5FAE\u4EAE\uFF08\u4E0E open-bg-soft \u540C\u65CF\uFF09\uFF0Chover \u65F6\u4E0D\u523A\u773C\u3001\u53C8\u6709\u53CD\u9988\u3002 */\n --tdt-cal-cell-hover:rgba(96,165,250,.12);\n /* \u4EFB\u52A1\u65E5\u7A0B\u9875\u5C55\u5F00\u9762\u677F\u5E95\uFF08\u6DF1\u8272\u6BB5\uFF0C2026-10-06 \u7EED\uFF09\uFF1A\u4E0E\u539F selected-bg \u6697\u503C\u4E00\u81F4\uFF0C\u6DF1\u8272 UI \u4E0D\u52A8 */\n --tdt-cal-panel-bg:color-mix(in srgb,var(--tdt-surface-1) 60%,var(--tdt-surface-base));\n}\n`";
|
|
2
|
+
//# sourceMappingURL=tokens-css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-css.d.ts","sourceRoot":"","sources":["../../src/design/tokens-css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,mBAAmB,8nvBA2N7B,CAAA"}
|
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
// 自动从 dsh-task-dispatch-table/src/client/ui/tokens.ts 提取(UI_TOKENS_CSS 原文),保真搬移。
|
|
2
|
+
// 变量前缀在原文里是 --tdt-,由 buildTokensCss(prefix) 在运行时替换成调用方自己的前缀,
|
|
3
|
+
// 这样多个插件同页时各自的变量互不覆盖。
|
|
4
|
+
// 明暗判据必须是 body[data-ds-dark-theme](宿主启动脚本写入,是用户在客户端里的选择);
|
|
5
|
+
// 禁止 prefers-color-scheme —— 它跟系统,不跟用户在宿主里的选择。
|
|
6
|
+
export const TOKENS_CSS_TEMPLATE = `
|
|
7
|
+
/* ── 文字(宿主 label 四档 + 反色面用字)────────────────────────────── */
|
|
8
|
+
body{
|
|
9
|
+
--tdt-fg:var(--dsw-alias-label-primary,#1f2328);
|
|
10
|
+
--tdt-fg-2:var(--dsw-alias-label-secondary,#5c6370);
|
|
11
|
+
--tdt-fg-3:var(--dsw-alias-label-tertiary,#767d87);
|
|
12
|
+
--tdt-fg-4:var(--dsw-alias-label-caption,#9aa1ab);
|
|
13
|
+
--tdt-fg-dim:var(--dsw-alias-label-dimmed,#b9bfc7);
|
|
14
|
+
/* 反色面上的字(实心钮 / 角标):暗色下是 bluish-1000,故用 -foreground 而非 -inverted */
|
|
15
|
+
--tdt-fg-inverse:var(--dsw-alias-label-primary-foreground,#fff);
|
|
16
|
+
|
|
17
|
+
/* ── 面(宿主 bg-layer 三档 + 下沉轨道底)──────────────────────────── */
|
|
18
|
+
--tdt-surface-1:var(--dsw-alias-bg-layer-1,#fff);
|
|
19
|
+
--tdt-surface-2:var(--dsw-alias-bg-layer-2,#fff);
|
|
20
|
+
--tdt-surface-3:var(--dsw-alias-bg-layer-3,#fff);
|
|
21
|
+
/* 「选中亮片」的底盘色(配 --tdt-shadow-raised 用) */
|
|
22
|
+
--tdt-surface-raised:var(--dsw-alias-bg-layer-1,#fff);
|
|
23
|
+
/* 轨道 / 下沉底(官方分段控件轨道用的就是这条) */
|
|
24
|
+
--tdt-surface-sunken:var(--dsw-alias-interactive-bg-hover,rgba(38,49,72,.06));
|
|
25
|
+
/* 整页 / 编辑器底(bg-base) */
|
|
26
|
+
--tdt-surface-base:var(--dsw-alias-bg-base,#fff);
|
|
27
|
+
/* 自绘浮层 / 菜单卡的不透明底(= base;不要用半透明的 specific-menu) */
|
|
28
|
+
--tdt-surface-menu:var(--tdt-surface-base);
|
|
29
|
+
/* markdown 代码块面 / 字体(会话镜像里用到) */
|
|
30
|
+
--tdt-code-surface:var(--dsw-alias-markdown-code-block,rgba(128,128,128,.10));
|
|
31
|
+
--tdt-code-font:var(--dsw-font-markdown-code-block-small,12px/18px var(--ds-font-family-code,monospace));
|
|
32
|
+
/* 警告文字色(宿主 state-warn-label) */
|
|
33
|
+
--tdt-warning-label:var(--dsw-alias-state-warn-label,#f5a623);
|
|
34
|
+
/* 固定中性实面(自绘浮层、深色主题下必须自己变的那几个)——只有它需要暗色覆盖 */
|
|
35
|
+
--tdt-solid:var(--dsw-static-neutral-00,#fff);
|
|
36
|
+
--tdt-on-solid:var(--dsw-alias-label-primary,#1f2328);
|
|
37
|
+
/* 交付文件卡那种「浅底盘 + hover 加深」两拍 */
|
|
38
|
+
--tdt-plate:var(--dsw-static-neutral-50,#fafafa);
|
|
39
|
+
--tdt-plate-hover:var(--dsw-static-neutral-100,#f5f5f5);
|
|
40
|
+
/* 旧内核回退(Chrome <111 不认 color-mix ⇒ 这条生效;新内核被下面那条覆盖)。
|
|
41
|
+
这几个是**固定中性面**、不靠跟随宿主主题色,故可以无损地给明文回退。 */
|
|
42
|
+
--tdt-icon-plate:rgba(255,255,255,.5);
|
|
43
|
+
--tdt-icon-plate:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 50%,transparent);
|
|
44
|
+
/* 表头底:浅色主题**偏深**,且必须**比斑马纹(--tdt-plate)再深一档**——
|
|
45
|
+
两者不能撞色(用户 2026-10-02:表头跟斑马纹一模一样)。 */
|
|
46
|
+
--tdt-head-bg:var(--dsw-static-neutral-100,#f5f5f5);
|
|
47
|
+
/* 图标小底板(产出物):浅色下要**看得见**(原先取 plate ⇒ 在白底上等于没有);hover 加倍。 */
|
|
48
|
+
--tdt-chip-bg:rgba(15,15,15,.07);
|
|
49
|
+
--tdt-chip-bg:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 7%,transparent);
|
|
50
|
+
--tdt-chip-bg-hover:rgba(15,15,15,.14);
|
|
51
|
+
--tdt-chip-bg-hover:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 14%,transparent);
|
|
52
|
+
/* 展开行:**带透明度的蓝**——不是灰、也不是纯色,透出卡片底色,一眼看出「这是展开的」
|
|
53
|
+
(用户 2026-10-02:灰色跟斑马纹分不出来)。内容区再淡一档,形成「行深 / 内容浅」的区隔。 */
|
|
54
|
+
--tdt-open-bg:rgba(37,99,235,.10);
|
|
55
|
+
--tdt-open-bg-soft:rgba(37,99,235,.05);
|
|
56
|
+
--tdt-card-hover:rgba(37,99,235,.07);
|
|
57
|
+
|
|
58
|
+
/* ── 描边四档(宿主真值:l1 4% / l2 10% / l3 12% / l4 16%)────────── */
|
|
59
|
+
--tdt-border-faint:var(--dsw-alias-border-l1,#0000000a);
|
|
60
|
+
--tdt-border:var(--dsw-alias-border-l2,#0000001a);
|
|
61
|
+
--tdt-border-strong:var(--dsw-alias-border-l3,#0000001f);
|
|
62
|
+
--tdt-border-heavy:var(--dsw-alias-border-l4,#00000029);
|
|
63
|
+
|
|
64
|
+
/* ── 品牌 / 语义色 ────────────────────────────────────────────────── */
|
|
65
|
+
/* 品牌「面」色:明色近黑、暗色近白(官方 Switch 选中态即此),**不是蓝色** */
|
|
66
|
+
--tdt-accent:var(--dsw-alias-brand-primary,#0f1115);
|
|
67
|
+
/* 蓝色:强调 / 选中 / 焦点,一律走这条 */
|
|
68
|
+
--tdt-business:var(--dsw-alias-state-business-primary,#3b5bdb);
|
|
69
|
+
--tdt-success:var(--dsw-alias-state-success-primary,#22c55e);
|
|
70
|
+
/* ⚠️ 是 state-warn(不是 state-warning,后者宿主无此定义) */
|
|
71
|
+
--tdt-warning:var(--dsw-alias-state-warn-primary,#f59e0b);
|
|
72
|
+
--tdt-danger:var(--dsw-alias-state-error-primary,#ec1313);
|
|
73
|
+
--tdt-link:var(--dsw-alias-link,#3b5bdb);
|
|
74
|
+
/* 语义色**实面**上的字(角标 / 实心提示):宿主红绿黄三色都是中调 ⇒ 白字两个主题都可读,
|
|
75
|
+
故这是一条与主题无关的常量;不要拿 --tdt-fg-inverse 顶——它在暗色下是近黑,压在红底上看不清。 */
|
|
76
|
+
--tdt-on-signal:#fff;
|
|
77
|
+
/* 语义色**浅底**:状态色系的「一块底色」——执行记录页每条流水账的块底就是它
|
|
78
|
+
(用户 2026-10-04:正常态给同色系很浅的透明底、失败用红底透出来)。
|
|
79
|
+
用 「color-mix」 现算而不写死 rgba:状态色本身跟随宿主 alias,主题一换自动成立。
|
|
80
|
+
⚠️ **深色下要更淡**:用户 2026-10-04「深色风格的绿色和红色好像都有点深」⇒ dark 段
|
|
81
|
+
把这四条压到 5%(更贴近面板底、存在感更弱);浅色段维持 8%。两端各自给值,不共用一条曲线。
|
|
82
|
+
命名收在 tokens.ts 单点(本仓硬规矩:业务文件不许自造 --tdt-*)。 */
|
|
83
|
+
--tdt-success-soft:color-mix(in srgb,var(--tdt-success) 8%,transparent);
|
|
84
|
+
--tdt-warning-soft:color-mix(in srgb,var(--tdt-warning) 8%,transparent);
|
|
85
|
+
--tdt-danger-soft:color-mix(in srgb,var(--tdt-danger) 8%,transparent);
|
|
86
|
+
--tdt-business-soft:color-mix(in srgb,var(--tdt-business) 8%,transparent);
|
|
87
|
+
|
|
88
|
+
/* ⚠️ 2026-10-18 用户拍板:宿主 alias 的 hover(暗色白 8% / 亮色 6%)**太弱**,
|
|
89
|
+
「移上去要仔细看才看得出来」⇒ 不再委托宿主 hover 别名,改为自掺中性色并加重:
|
|
90
|
+
亮色掺黑 10%、暗色掺白 14%(active 再加一档)。按钮 / 分段轨道 / 各类 hover 底同时受益。
|
|
91
|
+
⚠️ 必须保留 rgba 兜底行在前(本文件惯例,见 icon-plate 注释):掺的是**固定中性色**
|
|
92
|
+
(neutral-900=#0f0f0f / neutral-00=#fff),预计算无损;旧内核不认 color-mix 时走兜底,
|
|
93
|
+
否则整条 background:var(--seg-track) 作废 ⇒ 分段轨道透明(真踩过:预览站轨道消失)。 */
|
|
94
|
+
--tdt-hover:rgba(15,15,15,.10);
|
|
95
|
+
--tdt-hover:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 10%,transparent);
|
|
96
|
+
--tdt-active:rgba(15,15,15,.18);
|
|
97
|
+
--tdt-active:color-mix(in srgb,var(--dsw-static-neutral-900,#0f0f0f) 18%,transparent);
|
|
98
|
+
--tdt-mask:var(--dsw-alias-bg-mask-1,#0000003d);
|
|
99
|
+
/* 「选中面」(2026-10-06,任务日程页首创)= 当前底色**朝更深掺 12% 文字色**:
|
|
100
|
+
浅色主题下文字色是黑 ⇒ 选中面比常态底色**深一档**。深色分支见 body[data-ds-dark-theme](朝背景色掺)。
|
|
101
|
+
语义:标记「正在看的东西」,比常态明显、又不许盖住内容(不许用半透明叠状态色)。 */
|
|
102
|
+
--tdt-selected-bg:color-mix(in srgb,var(--tdt-surface-1) 88%,var(--tdt-fg));
|
|
103
|
+
/* 任务日程页本月格默认底(2026-10-06 → 续2):浅色下给**淡蓝**(business 8% 透白底)——
|
|
104
|
+
参照用户参考稿里未选中日程块 / Tuesday 列的那种蓝、再浅一点点;
|
|
105
|
+
相邻月补位格仍走 --tdt-surface-2(更灰),不受影响。
|
|
106
|
+
深色段维持 #23262e(用户:深色 UI 已差不多,不动)。 */
|
|
107
|
+
--tdt-cal-cell-bg:color-mix(in srgb,var(--tdt-business) 8%,var(--tdt-surface-1));
|
|
108
|
+
/* 任务日程页「点开某天」展开的面板底(2026-10-06 续):浅色下**无限接近白、只带一丁点灰**
|
|
109
|
+
(neutral-50 = #fafafa)——面板里装半透明执行记录列表,底再深整片就发糊发灰;
|
|
110
|
+
深色段沿用原 selected-bg 暗值,保持不动。 */
|
|
111
|
+
--tdt-cal-panel-bg:var(--dsw-static-neutral-50,#fafafa);
|
|
112
|
+
/* 任务日程页本月格 hover 底(浅色段,2026-10-06 续3):不再走灰色通用交互底——
|
|
113
|
+
鼠标移上去应是「更亮一点点的蓝」(与深色段同语义:hover = 提亮的蓝,不是灰下去)。
|
|
114
|
+
浓度**介于**表头蓝(14%)与未选中格蓝(8%)之间、略偏表头一侧:business 12% 透白底
|
|
115
|
+
(比表头浅一点、比未选中格深一点)。 */
|
|
116
|
+
--tdt-cal-cell-hover:color-mix(in srgb,var(--tdt-business) 12%,var(--tdt-surface-1));
|
|
117
|
+
|
|
118
|
+
/* ── 投影 / 焦点 ──────────────────────────────────────────────────── */
|
|
119
|
+
--tdt-shadow-1:var(--dsw-elevation-soft,0 4px 16px 0 #00000008);
|
|
120
|
+
/* 亮片自带的浮起感(选中态用;与 --tdt-surface-raised 配对) */
|
|
121
|
+
--tdt-shadow-raised:var(--dsw-elevation-soft,0 4px 16px 0 #00000008);
|
|
122
|
+
--tdt-shadow-2:var(--dsw-shadow-lv3,0 12px 32px 0 #00000014);
|
|
123
|
+
/* 键盘焦点环。⚠️ 不用宿主 --dsw-focus-ring-color:它默认值是 transparent(兜底不生效、会隐身) */
|
|
124
|
+
--tdt-focus:var(--dsw-alias-state-business-primary,#3b5bdb);
|
|
125
|
+
|
|
126
|
+
/* ── 圆角(宿主真值 4 / 8 / 12 / 16 / 20 / 28)─────────────────────── */
|
|
127
|
+
--tdt-radius-xs:var(--dsw-radius-xs,4px);
|
|
128
|
+
--tdt-radius-sm:var(--dsw-radius-sm,8px);
|
|
129
|
+
--tdt-radius-md:var(--dsw-radius-md,12px);
|
|
130
|
+
--tdt-radius-lg:var(--dsw-radius-lg,16px);
|
|
131
|
+
--tdt-radius-xl:var(--dsw-radius-xl,20px);
|
|
132
|
+
--tdt-radius-panel:var(--dsw-radius-panel,28px);
|
|
133
|
+
|
|
134
|
+
/* ── 间距四拍(只许用这四档,不许出现 5 / 7 / 9px)────────────────── */
|
|
135
|
+
--tdt-space-1:4px;
|
|
136
|
+
--tdt-space-2:8px;
|
|
137
|
+
--tdt-space-3:12px;
|
|
138
|
+
--tdt-space-4:16px;
|
|
139
|
+
|
|
140
|
+
/* ── 控件高度:离散三档(控件用 size="sm|md|lg" 选;调用点不许自定义高度,
|
|
141
|
+
真不够用才允许在调用点本地覆盖 --tdt-control-h-*,属例外而非常态)── */
|
|
142
|
+
--tdt-control-h-sm:24px;
|
|
143
|
+
--tdt-control-h-md:28px;
|
|
144
|
+
--tdt-control-h-lg:32px;
|
|
145
|
+
|
|
146
|
+
/* ── 字号 / 行高:直绑宿主字号族(宿主真值 11 / 12 / 13 / 14 / 16)───── */
|
|
147
|
+
--tdt-font-xs:var(--dsw-font-xxxs-11-font-size,11px);
|
|
148
|
+
--tdt-font-sm:var(--dsw-font-xxs-12-font-size,12px);
|
|
149
|
+
--tdt-font-md:var(--dsw-font-xs-13-font-size,13px);
|
|
150
|
+
--tdt-font-lg:var(--dsw-font-s-14-font-size,14px);
|
|
151
|
+
--tdt-font-xl:var(--dsw-font-base-16-font-size,16px);
|
|
152
|
+
--tdt-line-xs:var(--dsw-font-xxxs-11-line-height,14px);
|
|
153
|
+
--tdt-line-sm:var(--dsw-font-xxs-12-line-height,18px);
|
|
154
|
+
--tdt-line-md:var(--dsw-font-xs-13-line-height,20px);
|
|
155
|
+
--tdt-line-lg:var(--dsw-font-s-14-line-height,22px);
|
|
156
|
+
--tdt-line-xl:var(--dsw-font-base-16-line-height,24px);
|
|
157
|
+
--tdt-font-mono:var(--ds-font-family-code,monospace);
|
|
158
|
+
|
|
159
|
+
/* ── 层级阶梯(业务文件不许再写裸 z-index)───────────────────────── */
|
|
160
|
+
/* 页面级预览分栏 → 抽屉(新建/编辑)→ 弹窗/确认框 → 浮层菜单 → 浮层提示 */
|
|
161
|
+
/* 内容层吸顶(天标签 / 表头这类「跟着滚但压住同层内容」的元素):只压同层兄弟,
|
|
162
|
+
必须低于下面所有浮层档 —— 所以它不是「开新浮层档」,而是内容层内部的排序位。 */
|
|
163
|
+
--tdt-z-sticky:10;
|
|
164
|
+
--tdt-z-dock:1030;
|
|
165
|
+
--tdt-z-drawer:1040;
|
|
166
|
+
--tdt-z-modal:1070;
|
|
167
|
+
--tdt-z-menu:1100;
|
|
168
|
+
--tdt-z-tip:1200;
|
|
169
|
+
|
|
170
|
+
/* ── 动效 ─────────────────────────────────────────────────────────── */
|
|
171
|
+
--tdt-dur:var(--ds-transition-duration,.2s);
|
|
172
|
+
--tdt-dur-fast:var(--ds-transition-duration-fast,.12s);
|
|
173
|
+
--tdt-ease:var(--ds-ease-in-out,cubic-bezier(.4,0,.2,1));
|
|
174
|
+
/* 运行中状态的脉动时长(2026-10-06 统一前后两端:任务配置里的绿呼吸 → 蓝、放慢;
|
|
175
|
+
执行记录里的蓝闪 → 放慢一点。两者用同一个值,动画形状本就一致)。 */
|
|
176
|
+
--tdt-dur-run:500ms;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* ── 明暗差异的**唯一**落点 ──────────────────────────────────────────────
|
|
180
|
+
判据 = body[data-ds-dark-theme](宿主 0.2.0-rc.2 源码核实:启动脚本 toggleAttribute 写入,
|
|
181
|
+
唯一明暗判据;插件禁止用 prefers-color-scheme —— 它跟的是系统、不是用户在宿主里的选择)。
|
|
182
|
+
下面只放 alias 表达不了的「固定中性面」;颜色若能靠 alias 自动跟随,一律不要写在这里。 */
|
|
183
|
+
body[data-ds-dark-theme]{
|
|
184
|
+
--tdt-solid:var(--dsw-static-neutral-900,#0f0f0f);
|
|
185
|
+
--tdt-on-solid:var(--dsw-static-neutral-00,#fff);
|
|
186
|
+
/* 暗色 hover 掺白 14% / active 24%(对齐上面 2026-10-18 的加重拍板)。rgba 兜底行同上。 */
|
|
187
|
+
--tdt-hover:rgba(255,255,255,.14);
|
|
188
|
+
--tdt-hover:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 14%,transparent);
|
|
189
|
+
--tdt-active:rgba(255,255,255,.24);
|
|
190
|
+
--tdt-active:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 24%,transparent);
|
|
191
|
+
--tdt-plate:var(--dsw-static-neutral-850,#212123);
|
|
192
|
+
--tdt-plate-hover:var(--dsw-static-neutral-800,#292929);
|
|
193
|
+
--tdt-icon-plate:rgba(255,255,255,.05);
|
|
194
|
+
--tdt-icon-plate:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 5%,transparent);
|
|
195
|
+
/* 暗色主题**反过来**:表头要比卡片面**亮**、比斑马纹再**浅一档**(用户:纯黑背景没法看)。 */
|
|
196
|
+
--tdt-head-bg:var(--tdt-surface-2);
|
|
197
|
+
/* 暗色底板**微亮**;hover **更亮**(原先 hover 取 plate-hover 反而更淡 ⇒ 鼠标移上去就没了)。 */
|
|
198
|
+
--tdt-chip-bg:rgba(255,255,255,.08);
|
|
199
|
+
--tdt-chip-bg:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 8%,transparent);
|
|
200
|
+
--tdt-chip-bg-hover:rgba(255,255,255,.16);
|
|
201
|
+
--tdt-chip-bg-hover:color-mix(in srgb,var(--dsw-static-neutral-00,#fff) 16%,transparent);
|
|
202
|
+
/* 暗色下蓝色要更亮、透明度略高才压得住深底。 */
|
|
203
|
+
--tdt-open-bg:rgba(96,165,250,.18);
|
|
204
|
+
--tdt-open-bg-soft:rgba(96,165,250,.08);
|
|
205
|
+
--tdt-card-hover:rgba(96,165,250,.13);
|
|
206
|
+
/* 语义色**浅底**(深色版):用户嫌深色的绿 / 红「有点深」⇒ 压到 **5%**(浅色段是 8%),
|
|
207
|
+
更贴近面板底色、存在感更弱;块底与状态色竖条仍同源(竖条是实色,不受这条影响)。 */
|
|
208
|
+
--tdt-success-soft:color-mix(in srgb,var(--tdt-success) 5%,transparent);
|
|
209
|
+
--tdt-warning-soft:color-mix(in srgb,var(--tdt-warning) 5%,transparent);
|
|
210
|
+
--tdt-danger-soft:color-mix(in srgb,var(--tdt-danger) 5%,transparent);
|
|
211
|
+
--tdt-business-soft:color-mix(in srgb,var(--tdt-business) 5%,transparent);
|
|
212
|
+
/* 「选中面」(深色版,2026-10-06):掺 **~40% 背景色**(--tdt-surface-base)⇒ 无限接近页面背景的黑、
|
|
213
|
+
只比背景略深一点点(用户:深色下展开区压着任务透明绿会发灰,底色要尽量贴近背景才不显灰)。
|
|
214
|
+
⚠️ 深色下不能掺文字色 —— 那是白,会变亮,选中反而比本月日期浅。 */
|
|
215
|
+
--tdt-selected-bg:color-mix(in srgb,var(--tdt-surface-1) 60%,var(--tdt-surface-base));
|
|
216
|
+
/* 任务日程页本月格的默认底(深色版,2026-10-06):深的、带点灰蓝的暗色(用户给的参考图 ≈ #23262e),
|
|
217
|
+
比原来的卡片面更沉、更偏蓝灰;选中格仍走 --tdt-selected-bg(更暗一档),层级不变。 */
|
|
218
|
+
--tdt-cal-cell-bg:#23262e;
|
|
219
|
+
/* 任务日程页本月格 hover 底(深色段,2026-10-06):原先走 --tdt-hover(宿主浅色叠加)在深底上显得
|
|
220
|
+
「灰发亮」,不好看 ⇒ 换成更贴底的蓝调微亮(与 open-bg-soft 同族),hover 时不刺眼、又有反馈。 */
|
|
221
|
+
--tdt-cal-cell-hover:rgba(96,165,250,.12);
|
|
222
|
+
/* 任务日程页展开面板底(深色段,2026-10-06 续):与原 selected-bg 暗值一致,深色 UI 不动 */
|
|
223
|
+
--tdt-cal-panel-bg:color-mix(in srgb,var(--tdt-surface-1) 60%,var(--tdt-surface-base));
|
|
224
|
+
}
|
|
225
|
+
\``;
|
|
226
|
+
//# sourceMappingURL=tokens-css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-css.js","sourceRoot":"","sources":["../../src/design/tokens-css.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,6DAA6D;AAC7D,sBAAsB;AACtB,0DAA0D;AAC1D,+CAA+C;AAC/C,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2NhC,CAAA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { createElement as h } from 'react';
|
|
2
|
+
import { type Translate } from '../utils/i18n.js';
|
|
3
|
+
import { type WorkspaceFilesFace } from './types.js';
|
|
4
|
+
export interface ExplorerPanelProps {
|
|
5
|
+
/** 宿主能力面,由插件从 ctx 取出后注入(本包不抓宿主全局)。 */
|
|
6
|
+
workspaceFiles: WorkspaceFilesFace;
|
|
7
|
+
sessionId: string;
|
|
8
|
+
/** 起始路径;`''` = 工作区根。 */
|
|
9
|
+
path?: string;
|
|
10
|
+
/** 选中文件时回调(点目录也会清空选中后进入)。 */
|
|
11
|
+
onSelect?: (path: string | null) => void;
|
|
12
|
+
onOpenFile?: (path: string) => void;
|
|
13
|
+
/** 空目录文案;不传用内置。 */
|
|
14
|
+
emptyText?: string;
|
|
15
|
+
translate?: Translate;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* 工作区浏览面板:面包屑 + 目录树 + 文件预览。
|
|
19
|
+
*
|
|
20
|
+
* 与源实现(dispatch `file-browser.tsx`)的差别:**不搬 CodeMirror 代码预览与 Office/PDF 预览**
|
|
21
|
+
* —— 那两个会引入 `@codemirror/*` 与宿主 `officeToPdf` 两个重依赖,不符合「零必需依赖」。
|
|
22
|
+
* 这里只做文本 / 图片 / 不支持三类,其它类型给明确兜底而不是硬撑。
|
|
23
|
+
*/
|
|
24
|
+
export declare function ExplorerPanel(props: ExplorerPanelProps): ReturnType<typeof h>;
|
|
25
|
+
//# sourceMappingURL=ExplorerPanel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExplorerPanel.d.ts","sourceRoot":"","sources":["../../src/explorer/ExplorerPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,CAAC,EAAuB,MAAM,OAAO,CAAA;AAG/D,OAAO,EAAK,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGpD,OAAO,EAA+C,KAAK,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEjG,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,cAAc,EAAE,kBAAkB,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CA2J7E"}
|