@aidget-community/welcome 0.0.0-stage → 0.1.2
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/agents.md +26 -0
- package/assets/screenshot.png +0 -0
- package/config.json +12 -0
- package/index.html +40 -0
- package/package.json +22 -4
- package/style.css +294 -0
- package/README.md +0 -3
package/agents.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# welcome
|
|
2
|
+
|
|
3
|
+
## 用途
|
|
4
|
+
|
|
5
|
+
首次启动时的品牌欢迎卡片，展示 AIDGET、版本号、slogan，以及一句向 Agent
|
|
6
|
+
创建水彩便签的示例请求。
|
|
7
|
+
|
|
8
|
+
## 填写规则
|
|
9
|
+
|
|
10
|
+
- 这是静态卡片，没有 `data-aidget-region`；修改时用 `aidget_update` 整体替换。
|
|
11
|
+
- 输入框文案固定为 `/Aidget 创建一个水彩风格的便签小组件`，共 22 个字符；
|
|
12
|
+
改文案时应同步调整 `steps(22, end)`。
|
|
13
|
+
- 打字效果只使用 CSS。这个小组件 `permissions` 和 `network` 均为空数组，不要加入脚本、
|
|
14
|
+
外部字体或网络资源。
|
|
15
|
+
- 可见文案本身就是无障碍文本；光标和发送按钮是装饰元素，不应参与朗读。
|
|
16
|
+
|
|
17
|
+
## 刷新建议
|
|
18
|
+
|
|
19
|
+
不需要刷新。动画只播放一次，结束后文字与光标保持静止；减少动态效果模式下
|
|
20
|
+
直接显示完整文案。用户熟悉后可以直接删除这个小组件。
|
|
21
|
+
|
|
22
|
+
## 外观
|
|
23
|
+
|
|
24
|
+
窗口是完全透明的主机，外壳不画背景、边框或模糊。`.welcome` 自己提供卡面，
|
|
25
|
+
所以改 `style.css` 就是在改桌面上的最终效果。不要给卡面加
|
|
26
|
+
`backdrop-filter`：macOS 在拖拽和失焦时会停掉桌面模糊，卡面会突然变成全透明。
|
|
Binary file
|
package/config.json
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "welcome",
|
|
3
|
+
"title": "欢迎使用 AIDGET",
|
|
4
|
+
"minHostVersion": "0.1.1",
|
|
5
|
+
"logo": null,
|
|
6
|
+
"screenshots": ["assets/screenshot.png"],
|
|
7
|
+
"platforms": ["macos", "windows", "linux"],
|
|
8
|
+
"size": { "width": 360, "height": 220 },
|
|
9
|
+
"dragMode": "all",
|
|
10
|
+
"permissions": [],
|
|
11
|
+
"network": []
|
|
12
|
+
}
|
package/index.html
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<meta name="aidget-surface" content="none" />
|
|
7
|
+
<link rel="stylesheet" href="./style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<article class="welcome">
|
|
11
|
+
<header class="brand">
|
|
12
|
+
<span class="wordmark">AIDGET</span>
|
|
13
|
+
<span class="version">v0.1.0</span>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<h1>把桌面交给 <span>Agent</span></h1>
|
|
17
|
+
|
|
18
|
+
<section class="usage" aria-labelledby="usage-label">
|
|
19
|
+
<h2 class="usage-label" id="usage-label">在 Agent 中下达指令</h2>
|
|
20
|
+
|
|
21
|
+
<div class="prompt">
|
|
22
|
+
<span class="typed"
|
|
23
|
+
><span class="prompt-value">/Aidget 创建一个水彩风格的便签小组件</span></span
|
|
24
|
+
>
|
|
25
|
+
<span class="send" aria-hidden="true">
|
|
26
|
+
<svg viewBox="0 0 16 16" width="13" height="13" fill="none">
|
|
27
|
+
<path
|
|
28
|
+
d="M8 12.5V3.5M3.8 7.7 8 3.5l4.2 4.2"
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
stroke-width="1.35"
|
|
31
|
+
stroke-linecap="round"
|
|
32
|
+
stroke-linejoin="round"
|
|
33
|
+
/>
|
|
34
|
+
</svg>
|
|
35
|
+
</span>
|
|
36
|
+
</div>
|
|
37
|
+
</section>
|
|
38
|
+
</article>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aidget-community/welcome",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "AIDGET 欢迎卡片：将桌面交给 Agent。",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "aidget community"
|
|
8
|
+
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/aidget-ai/widgets.git",
|
|
12
|
+
"directory": "packages/welcome"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"config.json",
|
|
16
|
+
"index.html",
|
|
17
|
+
"style.css",
|
|
18
|
+
"agents.md",
|
|
19
|
+
"assets"
|
|
20
|
+
],
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
}
|
|
24
|
+
}
|
package/style.css
ADDED
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
color-scheme: light dark;
|
|
3
|
+
--paper: #f8f1e5;
|
|
4
|
+
--paper-deep: #f1e5d2;
|
|
5
|
+
--ink: #29231c;
|
|
6
|
+
--ink-soft: #746858;
|
|
7
|
+
--accent: #bd5e3e;
|
|
8
|
+
--accent-soft: rgb(189 94 62 / 0.16);
|
|
9
|
+
--cool: rgb(72 122 139 / 0.17);
|
|
10
|
+
--hair: rgb(74 58 40 / 0.14);
|
|
11
|
+
--field: rgb(255 252 246 / 0.64);
|
|
12
|
+
--field-line: rgb(89 68 45 / 0.16);
|
|
13
|
+
--send-bg: #171513;
|
|
14
|
+
--send-ink: #fff;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@media (prefers-color-scheme: dark) {
|
|
18
|
+
:root {
|
|
19
|
+
--paper: #24211c;
|
|
20
|
+
--paper-deep: #1c1a17;
|
|
21
|
+
--ink: #f5ead9;
|
|
22
|
+
--ink-soft: #b9aa95;
|
|
23
|
+
--accent: #e38b68;
|
|
24
|
+
--accent-soft: rgb(227 139 104 / 0.15);
|
|
25
|
+
--cool: rgb(111 168 184 / 0.12);
|
|
26
|
+
--hair: rgb(245 234 217 / 0.13);
|
|
27
|
+
--field: rgb(255 255 255 / 0.045);
|
|
28
|
+
--field-line: rgb(245 234 217 / 0.14);
|
|
29
|
+
--send-bg: #f3eadc;
|
|
30
|
+
--send-ink: #201d18;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
* {
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
html,
|
|
39
|
+
body {
|
|
40
|
+
margin: 0;
|
|
41
|
+
width: 100%;
|
|
42
|
+
height: 100%;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
background: transparent;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
body {
|
|
48
|
+
color: var(--ink);
|
|
49
|
+
font-family: 'Avenir Next', 'Segoe UI Variable', sans-serif;
|
|
50
|
+
-webkit-font-smoothing: antialiased;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.welcome {
|
|
54
|
+
position: relative;
|
|
55
|
+
isolation: isolate;
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
width: 100%;
|
|
59
|
+
height: 100%;
|
|
60
|
+
padding: 19px 20px 18px;
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
border: 1px solid var(--hair);
|
|
63
|
+
border-radius: 18px;
|
|
64
|
+
background:
|
|
65
|
+
radial-gradient(ellipse 52% 48% at 92% 4%, var(--accent-soft), transparent 68%),
|
|
66
|
+
radial-gradient(ellipse 48% 38% at 8% 100%, var(--cool), transparent 70%),
|
|
67
|
+
linear-gradient(148deg, var(--paper), var(--paper-deep));
|
|
68
|
+
box-shadow:
|
|
69
|
+
inset 0 1px 0 rgb(255 255 255 / 0.65),
|
|
70
|
+
0 1px 2px rgb(50 36 18 / 0.06);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@media (prefers-color-scheme: dark) {
|
|
74
|
+
.welcome {
|
|
75
|
+
box-shadow:
|
|
76
|
+
inset 0 1px 0 rgb(255 255 255 / 0.07),
|
|
77
|
+
0 1px 2px rgb(0 0 0 / 0.4);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.welcome::before,
|
|
82
|
+
.welcome::after {
|
|
83
|
+
position: absolute;
|
|
84
|
+
inset: 0;
|
|
85
|
+
border-radius: inherit;
|
|
86
|
+
pointer-events: none;
|
|
87
|
+
content: '';
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.welcome::before {
|
|
91
|
+
z-index: -2;
|
|
92
|
+
inset: -24%;
|
|
93
|
+
opacity: 0.7;
|
|
94
|
+
background:
|
|
95
|
+
radial-gradient(ellipse 23% 32% at 78% 38%, rgb(214 113 76 / 0.19), transparent 72%),
|
|
96
|
+
radial-gradient(ellipse 19% 27% at 60% 79%, rgb(211 164 83 / 0.12), transparent 74%),
|
|
97
|
+
radial-gradient(ellipse 24% 28% at 25% 62%, rgb(67 125 143 / 0.12), transparent 75%);
|
|
98
|
+
filter: blur(16px) saturate(1.12);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.welcome::after {
|
|
102
|
+
z-index: -1;
|
|
103
|
+
opacity: 0.08;
|
|
104
|
+
mix-blend-mode: multiply;
|
|
105
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.6'/></svg>");
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@media (prefers-color-scheme: dark) {
|
|
109
|
+
.welcome::after {
|
|
110
|
+
opacity: 0.1;
|
|
111
|
+
mix-blend-mode: soft-light;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.brand {
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: space-between;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.wordmark {
|
|
122
|
+
font-family: 'Avenir Next Condensed', 'Avenir Next', 'Futura', sans-serif;
|
|
123
|
+
font-size: 15px;
|
|
124
|
+
font-weight: 700;
|
|
125
|
+
letter-spacing: 0.19em;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.version {
|
|
129
|
+
display: inline-flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
min-height: 21px;
|
|
132
|
+
padding: 2px 7px 1px;
|
|
133
|
+
border: 1px solid var(--hair);
|
|
134
|
+
border-radius: 999px;
|
|
135
|
+
background: rgb(255 255 255 / 0.2);
|
|
136
|
+
color: var(--ink-soft);
|
|
137
|
+
font-family: 'SF Mono', 'Menlo', monospace;
|
|
138
|
+
font-size: 9px;
|
|
139
|
+
letter-spacing: 0.045em;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
h1 {
|
|
143
|
+
margin: 20px 0 0;
|
|
144
|
+
font-family: 'Songti SC', 'Noto Serif SC', 'Iowan Old Style', serif;
|
|
145
|
+
font-size: 19.5px;
|
|
146
|
+
font-weight: 600;
|
|
147
|
+
line-height: 1.35;
|
|
148
|
+
letter-spacing: 0.01em;
|
|
149
|
+
text-wrap: balance;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
h1 span {
|
|
153
|
+
color: var(--accent);
|
|
154
|
+
font-family: 'Iowan Old Style', 'Baskerville', 'Songti SC', serif;
|
|
155
|
+
font-size: 1.04em;
|
|
156
|
+
font-style: italic;
|
|
157
|
+
font-weight: 500;
|
|
158
|
+
letter-spacing: 0.005em;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.usage {
|
|
162
|
+
margin-top: auto;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.usage-label {
|
|
166
|
+
display: flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
gap: 9px;
|
|
169
|
+
margin: 0 0 8px;
|
|
170
|
+
color: var(--ink-soft);
|
|
171
|
+
font-size: 9.5px;
|
|
172
|
+
font-weight: 600;
|
|
173
|
+
letter-spacing: 0.12em;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.usage-label::after {
|
|
177
|
+
flex: 1;
|
|
178
|
+
height: 1px;
|
|
179
|
+
background: linear-gradient(90deg, var(--hair), transparent);
|
|
180
|
+
content: '';
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.prompt {
|
|
184
|
+
--prompt-inset: 12px;
|
|
185
|
+
--type-size: 10.5px;
|
|
186
|
+
|
|
187
|
+
position: relative;
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
gap: 8px;
|
|
191
|
+
min-height: 40px;
|
|
192
|
+
padding: 5px 5px 5px var(--prompt-inset);
|
|
193
|
+
overflow: hidden;
|
|
194
|
+
border: 1px solid var(--field-line);
|
|
195
|
+
border-radius: 12px;
|
|
196
|
+
background: var(--field);
|
|
197
|
+
box-shadow:
|
|
198
|
+
inset 0 1px 0 rgb(255 255 255 / 0.5),
|
|
199
|
+
0 1px 0 rgb(255 255 255 / 0.28);
|
|
200
|
+
font-family: 'SF Mono', 'Menlo', monospace;
|
|
201
|
+
font-size: var(--type-size);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@media (prefers-color-scheme: dark) {
|
|
205
|
+
.prompt {
|
|
206
|
+
box-shadow:
|
|
207
|
+
inset 0 1px 0 rgb(255 255 255 / 0.045),
|
|
208
|
+
0 1px 0 rgb(0 0 0 / 0.18);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.typed {
|
|
213
|
+
position: relative;
|
|
214
|
+
display: block;
|
|
215
|
+
width: max-content;
|
|
216
|
+
max-width: 100%;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.typed::after {
|
|
220
|
+
position: absolute;
|
|
221
|
+
top: 50%;
|
|
222
|
+
left: -1px;
|
|
223
|
+
width: 1px;
|
|
224
|
+
height: 15px;
|
|
225
|
+
border-radius: 1px;
|
|
226
|
+
background: var(--accent);
|
|
227
|
+
box-shadow: 0 0 6px rgb(189 94 62 / 0.34);
|
|
228
|
+
transform: translateY(-50%);
|
|
229
|
+
animation: caret-move 2.42s steps(22, end) 0.5s forwards;
|
|
230
|
+
content: '';
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.prompt-value {
|
|
234
|
+
display: block;
|
|
235
|
+
color: var(--ink);
|
|
236
|
+
line-height: 1;
|
|
237
|
+
white-space: nowrap;
|
|
238
|
+
clip-path: inset(0 100% 0 0);
|
|
239
|
+
animation: type 2.42s steps(22, end) 0.5s forwards;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.send {
|
|
243
|
+
display: grid;
|
|
244
|
+
flex: 0 0 28px;
|
|
245
|
+
width: 28px;
|
|
246
|
+
height: 28px;
|
|
247
|
+
margin-left: auto;
|
|
248
|
+
place-items: center;
|
|
249
|
+
border: 0;
|
|
250
|
+
border-radius: 999px;
|
|
251
|
+
background: var(--send-bg);
|
|
252
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
|
|
253
|
+
color: var(--send-ink);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
@keyframes type {
|
|
257
|
+
to {
|
|
258
|
+
clip-path: inset(0 0 0 0);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
@keyframes caret-move {
|
|
263
|
+
to {
|
|
264
|
+
left: 100%;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
@media (max-width: 330px) {
|
|
269
|
+
.welcome {
|
|
270
|
+
padding-right: 16px;
|
|
271
|
+
padding-left: 16px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
h1 {
|
|
275
|
+
font-size: 18px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.prompt {
|
|
279
|
+
--prompt-inset: 10px;
|
|
280
|
+
--type-size: 9.6px;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
@media (prefers-reduced-motion: reduce) {
|
|
285
|
+
.typed::after {
|
|
286
|
+
left: 100%;
|
|
287
|
+
animation: none;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.prompt-value {
|
|
291
|
+
clip-path: none;
|
|
292
|
+
animation: none;
|
|
293
|
+
}
|
|
294
|
+
}
|
package/README.md
DELETED