@liujitcn/kratos-taro-app-core 0.0.78 → 0.0.80

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.
Files changed (45) hide show
  1. package/dist/build.mjs +4 -2
  2. package/package.json +1 -1
  3. package/src/components/BootstrapStatus.scss +3 -3
  4. package/src/components/BootstrapStatus.tsx +3 -1
  5. package/src/components/KratosTabBar.scss +32 -13
  6. package/src/components/KratosTabBar.tsx +34 -3
  7. package/src/components/MfaRecoveryCodesDialog.scss +11 -10
  8. package/src/components/MfaSetupPanel.scss +4 -4
  9. package/src/components/PasswordVerifyDialog.scss +21 -21
  10. package/src/navigation.ts +6 -3
  11. package/src/pages.ts +4 -2
  12. package/src/rpc/base/v1/config.ts +1 -1
  13. package/src/rpc/base/v1/file.ts +1 -1
  14. package/src/rpc/base/v1/language.ts +1 -1
  15. package/src/rpc/base/v1/login.ts +1 -1
  16. package/src/rpc/base/v1/mcp.ts +1 -1
  17. package/src/rpc/base/v1/mfa.ts +1 -1
  18. package/src/rpc/base/v1/oauth.ts +1 -1
  19. package/src/rpc/base/v1/secret_crypto.ts +1 -1
  20. package/src/rpc/base/v1/sse.ts +1 -1
  21. package/src/rpc/common/v1/common.ts +1 -1
  22. package/src/rpc/common/v1/types.ts +1 -1
  23. package/src/rpc/google/protobuf/empty.ts +1 -1
  24. package/src/rpc/google/protobuf/struct.ts +2 -2
  25. package/src/rpc/google/protobuf/wrappers.ts +1 -1
  26. package/src/rpc/system/app/v1/auth.ts +1 -1
  27. package/src/rpc/system/app/v1/base_area.ts +1 -1
  28. package/src/rpc/system/app/v1/base_dict.ts +1 -1
  29. package/src/rpc/system/app/v1/base_menu.ts +1 -1
  30. package/src/rpc/system/common/v1/common.ts +1 -1
  31. package/src/stores/index.ts +1 -0
  32. package/src/stores/theme.ts +108 -0
  33. package/src/styles/base.scss +90 -5
  34. package/src/styles/components.scss +765 -0
  35. package/src/utils/http.ts +3 -0
  36. package/src/utils/index.ts +19 -0
  37. package/src/utils/navigation.ts +12 -0
  38. package/src/views/pages/index/index.scss +69 -73
  39. package/src/views/pages/index/index.tsx +50 -34
  40. package/src/views/pages/login/login.scss +109 -142
  41. package/src/views/pages/login/login.tsx +142 -82
  42. package/src/views/pages/login/protocal.scss +14 -14
  43. package/src/views/pages/login/protocal.tsx +16 -3
  44. package/src/views/pages/webview/webview.scss +6 -5
  45. package/src/views/pages/webview/webview.tsx +3 -1
@@ -0,0 +1,765 @@
1
+ /* ============================================================
2
+ * Kratos 移动端共享组件词汇(对齐 docs/ui-redesign/mobile-themed.html)
3
+ * 与 uni-app 版逐类一致,仅单位转写:rpx→px(Taro 设计稿 px,750 宽),
4
+ * 细线/真实像素用大写 PX 不被转换;旋转一律 transform: rotate();
5
+ * ::before/::after 只挂在 view 上;grid mask 仅 h5(#ifdef h5)。
6
+ * ============================================================ */
7
+
8
+ /* 玻璃卡(通用容器) */
9
+ .k-glass {
10
+ position: relative;
11
+ overflow: hidden;
12
+ border: 1PX solid var(--kratos-color-border);
13
+ border-radius: 26px;
14
+ background: var(--kratos-color-surface);
15
+ box-shadow: inset 0 1PX 0 rgba(255, 255, 255, 0.05);
16
+ }
17
+ .k-glass--lit {
18
+ border-color: var(--kratos-color-border-accent);
19
+ box-shadow: var(--kratos-glow-soft);
20
+ }
21
+
22
+ /* 四角 L 形角标:渲染为真实 view 节点(weapp 伪元素仅支持 view) */
23
+ .k-cnr {
24
+ position: absolute;
25
+ width: 24px;
26
+ height: 24px;
27
+ border: 3px solid var(--kratos-color-primary);
28
+ opacity: 0.5;
29
+ pointer-events: none;
30
+ }
31
+ .k-cnr--tl {
32
+ top: 16px;
33
+ left: 16px;
34
+ border-right: 0;
35
+ border-bottom: 0;
36
+ }
37
+ .k-cnr--tr {
38
+ top: 16px;
39
+ right: 16px;
40
+ border-left: 0;
41
+ border-bottom: 0;
42
+ }
43
+ .k-cnr--bl {
44
+ bottom: 16px;
45
+ left: 16px;
46
+ border-right: 0;
47
+ border-top: 0;
48
+ }
49
+ .k-cnr--br {
50
+ bottom: 16px;
51
+ right: 16px;
52
+ border-left: 0;
53
+ border-top: 0;
54
+ }
55
+
56
+ /* 装饰网格背景 */
57
+ .k-grid-bg {
58
+ position: absolute;
59
+ top: 0;
60
+ right: 0;
61
+ bottom: 0;
62
+ left: 0;
63
+ pointer-events: none;
64
+ background-image:
65
+ linear-gradient(rgba(120, 230, 215, 0.05) 1PX, transparent 1PX),
66
+ linear-gradient(90deg, rgba(120, 230, 215, 0.05) 1PX, transparent 1PX);
67
+ background-size: 60px 60px;
68
+ /* #ifdef h5 */
69
+ -webkit-mask: radial-gradient(130% 80% at 50% 0, #000 40%, transparent 85%);
70
+ mask: radial-gradient(130% 80% at 50% 0, #000 40%, transparent 85%);
71
+ /* #endif */
72
+ }
73
+
74
+ /* 卡片小标题(前置 neon 竖条);__title 必须是 view 才能出 ::before */
75
+ .k-phd {
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: space-between;
79
+ margin-bottom: 24px;
80
+ }
81
+ .k-phd__title {
82
+ display: flex;
83
+ align-items: center;
84
+ color: var(--kratos-color-text);
85
+ font-size: 27px;
86
+ font-weight: 700;
87
+ }
88
+ .k-phd__title::before {
89
+ content: '';
90
+ width: 6px;
91
+ height: 26px;
92
+ margin-right: 16px;
93
+ border-radius: 4px;
94
+ background: var(--kratos-color-primary);
95
+ box-shadow: 0 0 8PX var(--kratos-color-primary-edge);
96
+ }
97
+
98
+ /* 键值表单行 */
99
+ .k-field {
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: space-between;
103
+ gap: 24px;
104
+ padding: 28px 0;
105
+ border-top: 1PX solid var(--kratos-color-border);
106
+ }
107
+ .k-field:first-child {
108
+ border-top: 0;
109
+ }
110
+ .k-field__k {
111
+ flex-shrink: 0;
112
+ color: var(--kratos-color-text-muted);
113
+ font-size: 25px;
114
+ }
115
+ .k-field__v {
116
+ min-width: 0;
117
+ text-align: right;
118
+ color: var(--kratos-color-text);
119
+ font-size: 25px;
120
+ font-family: var(--kratos-font-mono);
121
+ }
122
+ .k-field__v--ph {
123
+ color: var(--kratos-color-text-dim);
124
+ }
125
+
126
+ /* 主操作大按钮(neon 渐变) */
127
+ .k-save {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ height: 96px;
132
+ margin-top: 36px;
133
+ border-radius: 20px;
134
+ background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-primary));
135
+ color: var(--kratos-color-on-primary);
136
+ font-size: 30px;
137
+ font-weight: 800;
138
+ letter-spacing: 4px;
139
+ box-shadow: var(--kratos-glow);
140
+ }
141
+
142
+ /* 顶栏 */
143
+ .k-page-nav {
144
+ position: relative;
145
+ display: flex;
146
+ align-items: center;
147
+ justify-content: space-between;
148
+ box-sizing: border-box;
149
+ height: calc(88px + env(safe-area-inset-top));
150
+ padding-top: env(safe-area-inset-top);
151
+ }
152
+ .k-page-nav--weapp {
153
+ height: calc(88px + 44PX);
154
+ padding-top: 44PX;
155
+ }
156
+ .k-page-nav__back,
157
+ .k-page-nav__side {
158
+ display: flex;
159
+ align-items: center;
160
+ justify-content: center;
161
+ flex: 0 0 76px;
162
+ width: 76px;
163
+ height: 76px;
164
+ }
165
+ .k-page-nav__back {
166
+ border: 1PX solid var(--kratos-color-border);
167
+ border-radius: 24px;
168
+ background: var(--kratos-color-surface);
169
+ }
170
+ .k-page-nav__back::before {
171
+ width: 16px;
172
+ height: 16px;
173
+ border-left: 2PX solid var(--kratos-color-primary);
174
+ border-bottom: 2PX solid var(--kratos-color-primary);
175
+ content: '';
176
+ transform: rotate(45deg);
177
+ }
178
+ .k-page-nav__title {
179
+ position: absolute;
180
+ left: 50%;
181
+ max-width: calc(100% - 190px);
182
+ overflow: hidden;
183
+ color: var(--kratos-color-text);
184
+ font-size: 36px;
185
+ font-weight: 800;
186
+ text-overflow: ellipsis;
187
+ transform: translateX(-50%);
188
+ white-space: nowrap;
189
+ }
190
+ .k-top {
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: space-between;
194
+ gap: 16px;
195
+ /* weapp 原生胶囊避让:页面通过 getMpCapsuleRightGap() 写入该变量,
196
+ 其余平台未设置时回退 0,不影响布局。 */
197
+ padding-right: var(--mp-capsule-gap, 0px);
198
+ }
199
+ .k-top__title {
200
+ font-size: 38px;
201
+ font-weight: 800;
202
+ letter-spacing: -0.3px;
203
+ color: var(--kratos-color-text);
204
+ }
205
+ .k-top__t2 {
206
+ font-size: 32px;
207
+ font-weight: 700;
208
+ color: var(--kratos-color-text);
209
+ }
210
+
211
+ /* 方形图标按钮 + 角标 */
212
+ .k-ic {
213
+ position: relative;
214
+ display: flex;
215
+ align-items: center;
216
+ justify-content: center;
217
+ width: 76px;
218
+ height: 76px;
219
+ border-radius: 24px;
220
+ background: var(--kratos-color-surface);
221
+ border: 1PX solid var(--kratos-color-border);
222
+ color: var(--kratos-color-text);
223
+ }
224
+ .k-ic--gh {
225
+ background: transparent;
226
+ border: 0;
227
+ }
228
+ .k-bdg {
229
+ position: absolute;
230
+ top: -10px;
231
+ right: -10px;
232
+ min-width: 34px;
233
+ height: 34px;
234
+ padding: 0 8px;
235
+ border-radius: 18px;
236
+ background: var(--kratos-color-danger);
237
+ color: #fff;
238
+ font-size: 21px;
239
+ font-weight: 800;
240
+ display: flex;
241
+ align-items: center;
242
+ justify-content: center;
243
+ }
244
+
245
+ /* 键值行(浏览态) */
246
+ .k-kv {
247
+ display: flex;
248
+ align-items: center;
249
+ justify-content: space-between;
250
+ gap: 28px;
251
+ padding: 26px 0;
252
+ border-top: 1PX solid var(--kratos-color-border);
253
+ }
254
+ .k-kv:first-child {
255
+ border-top: 0;
256
+ }
257
+ .k-kv__k {
258
+ color: var(--kratos-color-text-muted);
259
+ font-size: 24px;
260
+ }
261
+ .k-kv__v {
262
+ text-align: right;
263
+ color: var(--kratos-color-text);
264
+ font-size: 24px;
265
+ font-weight: 600;
266
+ font-family: var(--kratos-font-mono);
267
+ }
268
+ .k-kv__v--dim {
269
+ color: var(--kratos-color-text-muted);
270
+ }
271
+
272
+ /* neon 小药丸标签 */
273
+ .k-pill {
274
+ display: inline-flex;
275
+ align-items: center;
276
+ padding: 8px 20px;
277
+ border-radius: 999px;
278
+ background: var(--kratos-color-primary-soft-2);
279
+ border: 1PX solid var(--kratos-color-border-accent);
280
+ color: var(--kratos-color-primary);
281
+ font-size: 20px;
282
+ font-family: var(--kratos-font-mono);
283
+ }
284
+
285
+ /* 分段切换(收件箱/未读/已归档等) */
286
+ .k-pills {
287
+ display: inline-flex;
288
+ gap: 8px;
289
+ padding: 6px;
290
+ border-radius: 22px;
291
+ background: var(--kratos-color-track);
292
+ border: 1PX solid var(--kratos-color-border);
293
+ }
294
+ .k-pills__item {
295
+ padding: 12px 24px;
296
+ border-radius: 16px;
297
+ color: var(--kratos-color-text-muted);
298
+ font-size: 22px;
299
+ font-family: var(--kratos-font-mono);
300
+ text-align: center;
301
+ }
302
+ .k-pills__item--on {
303
+ color: var(--kratos-color-on-primary);
304
+ font-weight: 700;
305
+ background: var(--kratos-color-primary);
306
+ box-shadow: var(--kratos-glow-soft);
307
+ }
308
+
309
+ /* 过滤芯片 */
310
+ .k-chips {
311
+ display: flex;
312
+ flex-wrap: wrap;
313
+ gap: 16px;
314
+ margin-bottom: 24px;
315
+ }
316
+ .k-ch {
317
+ display: inline-flex;
318
+ align-items: center;
319
+ gap: 12px;
320
+ padding: 14px 24px;
321
+ border-radius: 999px;
322
+ background: var(--kratos-color-surface);
323
+ border: 1PX solid var(--kratos-color-border);
324
+ color: var(--kratos-color-text-muted);
325
+ font-size: 22px;
326
+ font-family: var(--kratos-font-mono);
327
+ }
328
+ .k-ch--pri {
329
+ color: var(--kratos-color-primary);
330
+ border-color: var(--kratos-color-border-accent);
331
+ background: var(--kratos-color-primary-soft);
332
+ }
333
+ .k-ch--act::after {
334
+ content: '';
335
+ width: 10px;
336
+ height: 10px;
337
+ margin-top: -6px;
338
+ border-right: 3px solid currentColor;
339
+ border-bottom: 3px solid currentColor;
340
+ transform: rotate(45deg);
341
+ }
342
+
343
+ /* ============================================================
344
+ * 登录页词汇
345
+ * ============================================================ */
346
+ .k-lg-lang {
347
+ display: inline-flex;
348
+ align-items: center;
349
+ gap: 12px;
350
+ padding: 12px 24px;
351
+ border-radius: 999px;
352
+ background: var(--kratos-color-surface);
353
+ border: 1PX solid var(--kratos-color-border);
354
+ color: var(--kratos-color-text-muted);
355
+ font-size: 22px;
356
+ font-family: var(--kratos-font-mono);
357
+ }
358
+ .k-lg-logo {
359
+ position: relative;
360
+ display: flex;
361
+ align-items: center;
362
+ justify-content: center;
363
+ width: 148px;
364
+ height: 148px;
365
+ margin: 0 auto;
366
+ border-radius: 30px;
367
+ background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-info));
368
+ color: var(--kratos-color-on-primary);
369
+ font-size: 48px;
370
+ font-weight: 800;
371
+ box-shadow: var(--kratos-glow);
372
+ }
373
+ .k-lg-logo::after {
374
+ content: '';
375
+ position: absolute;
376
+ top: -12px;
377
+ right: -12px;
378
+ bottom: -12px;
379
+ left: -12px;
380
+ border: 1PX solid var(--kratos-color-border-accent);
381
+ border-radius: 38px;
382
+ opacity: 0.55;
383
+ }
384
+ .k-lg-title {
385
+ margin-top: 32px;
386
+ font-size: 42px;
387
+ font-weight: 800;
388
+ text-align: center;
389
+ color: var(--kratos-color-text);
390
+ }
391
+ .k-lg-sub {
392
+ margin-top: 14px;
393
+ font-size: 24px;
394
+ text-align: center;
395
+ color: var(--kratos-color-text-muted);
396
+ }
397
+ .k-lg-field {
398
+ display: flex;
399
+ align-items: center;
400
+ gap: 20px;
401
+ height: 100px;
402
+ padding: 0 28px;
403
+ margin-top: 24px;
404
+ border-radius: 20px;
405
+ background: var(--kratos-color-surface);
406
+ border: 1PX solid var(--kratos-color-border);
407
+ }
408
+ .k-lg-field__input {
409
+ flex: 1;
410
+ min-width: 0;
411
+ height: 100%;
412
+ font-size: 26px;
413
+ color: var(--kratos-color-text);
414
+ background: transparent;
415
+ }
416
+ .k-lg-field__ph {
417
+ color: var(--kratos-color-text-dim);
418
+ }
419
+ .k-lg-cap {
420
+ flex-shrink: 0;
421
+ width: 180px;
422
+ height: 72px;
423
+ border-radius: 16px;
424
+ display: flex;
425
+ align-items: center;
426
+ justify-content: center;
427
+ background: var(--kratos-color-primary-soft-2);
428
+ border: 1PX solid var(--kratos-color-border);
429
+ color: var(--kratos-color-primary);
430
+ font-family: var(--kratos-font-mono);
431
+ font-size: 34px;
432
+ letter-spacing: 8px;
433
+ font-style: italic;
434
+ }
435
+ .k-lg-btn {
436
+ display: flex;
437
+ align-items: center;
438
+ justify-content: center;
439
+ gap: 16px;
440
+ height: 100px;
441
+ margin-top: 36px;
442
+ border-radius: 20px;
443
+ font-size: 30px;
444
+ font-weight: 800;
445
+ }
446
+ .k-lg-btn--pri {
447
+ background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-primary));
448
+ color: var(--kratos-color-on-primary);
449
+ box-shadow: var(--kratos-glow);
450
+ }
451
+ .k-lg-btn--wx {
452
+ background: var(--kratos-color-surface);
453
+ border: 1PX solid var(--kratos-color-border);
454
+ color: var(--kratos-color-text);
455
+ font-weight: 700;
456
+ }
457
+ .k-lg-or {
458
+ display: flex;
459
+ align-items: center;
460
+ gap: 24px;
461
+ margin-top: 32px;
462
+ color: var(--kratos-color-text-dim);
463
+ font-size: 22px;
464
+ font-family: var(--kratos-font-mono);
465
+ }
466
+ .k-lg-or::before,
467
+ .k-lg-or::after {
468
+ content: '';
469
+ flex: 1;
470
+ height: 1PX;
471
+ background: var(--kratos-color-border);
472
+ }
473
+ .k-lg-agree {
474
+ display: flex;
475
+ align-items: center;
476
+ justify-content: center;
477
+ flex-wrap: wrap;
478
+ gap: 14px;
479
+ margin-top: 40px;
480
+ font-size: 22px;
481
+ color: var(--kratos-color-text-muted);
482
+ }
483
+ .k-lg-chk {
484
+ display: flex;
485
+ align-items: center;
486
+ justify-content: center;
487
+ width: 32px;
488
+ height: 32px;
489
+ border-radius: 10px;
490
+ border: 3px solid var(--kratos-color-primary);
491
+ color: var(--kratos-color-primary);
492
+ font-size: 22px;
493
+ }
494
+ .k-lg-chk--off {
495
+ border-color: var(--kratos-color-border);
496
+ color: transparent;
497
+ }
498
+ .k-lg-link {
499
+ color: var(--kratos-color-primary);
500
+ }
501
+
502
+ /* ============================================================
503
+ * 我的 / 资料 词汇
504
+ * ============================================================ */
505
+ .k-pfx {
506
+ display: flex;
507
+ align-items: center;
508
+ justify-content: space-between;
509
+ gap: 24px;
510
+ }
511
+ .k-pfx__av {
512
+ flex-shrink: 0;
513
+ display: flex;
514
+ align-items: center;
515
+ justify-content: center;
516
+ width: 112px;
517
+ height: 112px;
518
+ border-radius: 22px;
519
+ background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-info));
520
+ color: var(--kratos-color-on-primary);
521
+ font-size: 44px;
522
+ font-weight: 800;
523
+ box-shadow: var(--kratos-glow-soft);
524
+ }
525
+ .k-pfx__nm {
526
+ font-size: 34px;
527
+ font-weight: 800;
528
+ color: var(--kratos-color-text);
529
+ }
530
+ .k-pfx__ac {
531
+ margin-top: 10px;
532
+ font-size: 22px;
533
+ color: var(--kratos-color-text-muted);
534
+ font-family: var(--kratos-font-mono);
535
+ }
536
+ .k-pfx__ent {
537
+ flex-shrink: 0;
538
+ padding: 14px 22px;
539
+ border-radius: 999px;
540
+ background: var(--kratos-color-primary-soft);
541
+ border: 1PX solid var(--kratos-color-border-accent);
542
+ color: var(--kratos-color-primary);
543
+ font-size: 22px;
544
+ font-family: var(--kratos-font-mono);
545
+ }
546
+ .k-aix {
547
+ display: flex;
548
+ align-items: center;
549
+ gap: 26px;
550
+ padding: 30px;
551
+ border-radius: 24px;
552
+ background: linear-gradient(135deg, var(--kratos-color-primary-soft-2), var(--kratos-color-primary-soft));
553
+ border: 1PX solid var(--kratos-color-border-accent);
554
+ }
555
+ .k-aix__ic {
556
+ flex-shrink: 0;
557
+ display: flex;
558
+ align-items: center;
559
+ justify-content: center;
560
+ width: 92px;
561
+ height: 92px;
562
+ border-radius: 20px;
563
+ background: linear-gradient(135deg, var(--kratos-color-violet), var(--kratos-color-info));
564
+ color: #fff;
565
+ font-size: 30px;
566
+ font-weight: 800;
567
+ box-shadow: var(--kratos-glow-soft);
568
+ }
569
+ .k-aix__t {
570
+ font-size: 27px;
571
+ font-weight: 700;
572
+ color: var(--kratos-color-text);
573
+ }
574
+ .k-aix__d {
575
+ margin-top: 8px;
576
+ font-size: 21px;
577
+ color: var(--kratos-color-text-muted);
578
+ }
579
+ .k-aix__b {
580
+ flex-shrink: 0;
581
+ padding: 14px 24px;
582
+ border-radius: 999px;
583
+ background: var(--kratos-color-primary-soft-2);
584
+ border: 1PX solid var(--kratos-color-border-accent);
585
+ color: var(--kratos-color-primary);
586
+ font-size: 22px;
587
+ font-family: var(--kratos-font-mono);
588
+ }
589
+ .k-svc {
590
+ display: grid;
591
+ grid-template-columns: 1fr 1fr 1fr;
592
+ gap: 20px;
593
+ }
594
+ .k-svc__s {
595
+ display: flex;
596
+ flex-direction: column;
597
+ align-items: center;
598
+ gap: 18px;
599
+ padding: 24px 0;
600
+ }
601
+ .k-svc__si {
602
+ display: flex;
603
+ align-items: center;
604
+ justify-content: center;
605
+ width: 92px;
606
+ height: 92px;
607
+ border-radius: 20px;
608
+ border: 1PX solid var(--kratos-color-border);
609
+ color: var(--kratos-color-primary);
610
+ background: var(--kratos-color-primary-soft);
611
+ }
612
+ .k-svc__label {
613
+ font-size: 22px;
614
+ color: var(--kratos-color-text);
615
+ }
616
+
617
+ /* ============================================================
618
+ * 设置页词汇
619
+ * ============================================================ */
620
+ .k-set-cat {
621
+ margin: 32px 4px 20px;
622
+ font-size: 21px;
623
+ letter-spacing: 2px;
624
+ color: var(--kratos-color-text-dim);
625
+ font-family: var(--kratos-font-mono);
626
+ text-transform: uppercase;
627
+ }
628
+ .k-set-row {
629
+ display: flex;
630
+ align-items: center;
631
+ justify-content: space-between;
632
+ gap: 24px;
633
+ padding: 28px 30px;
634
+ margin-bottom: 20px;
635
+ border-radius: 20px;
636
+ background: var(--kratos-color-surface);
637
+ border: 1PX solid var(--kratos-color-border);
638
+ }
639
+ .k-set-row--arrow::after {
640
+ content: '';
641
+ flex-shrink: 0;
642
+ width: 14px;
643
+ height: 14px;
644
+ border-top: 3px solid var(--kratos-color-text-muted);
645
+ border-right: 3px solid var(--kratos-color-text-muted);
646
+ transform: rotate(45deg);
647
+ }
648
+ .k-set-row__lead {
649
+ display: flex;
650
+ align-items: center;
651
+ gap: 24px;
652
+ min-width: 0;
653
+ }
654
+ .k-set-row__icon {
655
+ flex-shrink: 0;
656
+ display: flex;
657
+ align-items: center;
658
+ justify-content: center;
659
+ width: 76px;
660
+ height: 76px;
661
+ border-radius: 22px;
662
+ border: 1PX solid var(--kratos-color-border);
663
+ color: var(--kratos-color-primary);
664
+ }
665
+ .k-set-row__title {
666
+ font-size: 27px;
667
+ font-weight: 600;
668
+ color: var(--kratos-color-text);
669
+ }
670
+ .k-set-row__value {
671
+ margin-left: auto;
672
+ font-size: 24px;
673
+ color: var(--kratos-color-text-muted);
674
+ font-family: var(--kratos-font-mono);
675
+ }
676
+ .k-set-row__value--on {
677
+ color: var(--kratos-color-primary);
678
+ }
679
+ .k-set-logout {
680
+ display: flex;
681
+ align-items: center;
682
+ justify-content: center;
683
+ height: 100px;
684
+ margin-top: 44px;
685
+ border-radius: 20px;
686
+ color: var(--kratos-color-danger);
687
+ background: var(--kratos-color-danger-soft);
688
+ border: 1PX solid var(--kratos-color-danger);
689
+ font-size: 30px;
690
+ font-weight: 700;
691
+ }
692
+
693
+ /* ============================================================
694
+ * 消息列表词汇
695
+ * ============================================================ */
696
+ .k-msg-list {
697
+ display: flex;
698
+ flex-direction: column;
699
+ gap: 20px;
700
+ }
701
+ .k-msg-item {
702
+ position: relative;
703
+ overflow: hidden;
704
+ padding: 26px 28px;
705
+ border-radius: 20px;
706
+ background: var(--kratos-color-surface);
707
+ border: 1PX solid var(--kratos-color-border);
708
+ }
709
+ .k-msg-item--unread::before {
710
+ content: '';
711
+ position: absolute;
712
+ top: 0;
713
+ bottom: 0;
714
+ left: 0;
715
+ width: 6px;
716
+ background: var(--kratos-color-danger);
717
+ box-shadow: 0 0 8PX var(--kratos-color-danger);
718
+ }
719
+ .k-msg-item__head {
720
+ display: flex;
721
+ align-items: flex-start;
722
+ gap: 24px;
723
+ }
724
+ .k-msg-item__icon {
725
+ flex-shrink: 0;
726
+ display: flex;
727
+ align-items: center;
728
+ justify-content: center;
729
+ width: 76px;
730
+ height: 76px;
731
+ border-radius: 22px;
732
+ border: 1PX solid var(--kratos-color-border);
733
+ color: var(--kratos-color-primary);
734
+ background: var(--kratos-color-primary-soft);
735
+ }
736
+ .k-msg-item__title {
737
+ font-size: 25px;
738
+ font-weight: 700;
739
+ color: var(--kratos-color-text);
740
+ }
741
+ .k-msg-item__meta {
742
+ margin-top: 10px;
743
+ font-size: 20px;
744
+ color: var(--kratos-color-text-muted);
745
+ font-family: var(--kratos-font-mono);
746
+ }
747
+ .k-msg-item__time {
748
+ flex-shrink: 0;
749
+ font-size: 19px;
750
+ color: var(--kratos-color-text-dim);
751
+ font-family: var(--kratos-font-mono);
752
+ }
753
+ .k-msg-item__actions {
754
+ display: flex;
755
+ justify-content: flex-end;
756
+ gap: 36px;
757
+ margin-top: 22px;
758
+ padding-top: 22px;
759
+ border-top: 1PX solid var(--kratos-color-border);
760
+ }
761
+ .k-msg-item__action {
762
+ font-size: 22px;
763
+ color: var(--kratos-color-primary);
764
+ font-family: var(--kratos-font-mono);
765
+ }