@liujitcn/kratos-uni-app-system 0.0.79 → 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.
@@ -57,6 +57,9 @@ function handleToggle(knowledgeId: number) {
57
57
  <text v-if="isSelected(option.id)">✓</text>
58
58
  </view>
59
59
  </view>
60
+ <view v-if="!options.length" class="knowledge-picker__empty">{{
61
+ t('system.ai.knowledge.empty')
62
+ }}</view>
60
63
  </scroll-view>
61
64
  </view>
62
65
  </view>
@@ -66,60 +69,74 @@ function handleToggle(knowledgeId: number) {
66
69
  .knowledge-picker {
67
70
  position: fixed;
68
71
  inset: 0;
72
+ /* 高于 KratosTabBar 的 z-index:999,避免弹层被底部导航遮挡 */
69
73
  z-index: 1000;
70
- display: flex;
71
- align-items: flex-end;
72
74
  }
73
75
 
74
76
  .knowledge-picker__mask {
75
77
  position: absolute;
76
78
  inset: 0;
77
- background: rgba(0, 0, 0, 0.45);
79
+ background: var(--kratos-color-mask, rgba(2, 6, 12, 0.55));
78
80
  }
79
81
 
80
82
  .knowledge-picker__sheet {
81
- position: relative;
83
+ position: absolute;
84
+ right: 0;
85
+ bottom: 0;
86
+ left: 0;
82
87
  display: flex;
83
88
  flex-direction: column;
84
- width: 100%;
85
89
  max-height: 62vh;
86
- padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
87
- background: #fff;
88
- border-radius: 20px 20px 0 0;
90
+ padding: 40rpx 80rpx calc(80rpx + env(safe-area-inset-bottom));
91
+ overflow: hidden;
92
+ background: var(--kratos-color-surface-solid, #070d18);
93
+ border-radius: 40rpx 40rpx 0 0;
94
+ box-sizing: border-box;
89
95
  }
90
96
 
91
97
  .knowledge-picker__handle {
92
- width: 36px;
93
- height: 4px;
94
- margin: 0 auto 10px;
95
- background: #e5e6eb;
96
- border-radius: 2px;
98
+ flex-shrink: 0;
99
+ width: 72rpx;
100
+ height: 8rpx;
101
+ margin: 0 auto 20rpx;
102
+ background: var(--kratos-color-track, rgba(255, 255, 255, 0.06));
103
+ border-radius: 4rpx;
97
104
  }
98
105
 
99
106
  .knowledge-picker__head {
100
107
  display: flex;
101
108
  align-items: center;
102
- gap: 10px;
109
+ gap: 20rpx;
103
110
  }
104
111
 
105
112
  .knowledge-picker__title {
106
- font-size: 17px;
113
+ flex-shrink: 0;
114
+ color: var(--kratos-color-text, #e9f4f6);
115
+ font-size: 34rpx;
107
116
  font-weight: 600;
108
- color: #111;
109
117
  }
110
118
 
111
119
  .knowledge-picker__count {
112
120
  flex: 1;
113
- font-size: 12px;
114
- color: #8a8f99;
121
+ min-width: 0;
122
+ color: var(--kratos-color-text-muted, #8aa0b4);
123
+ font-size: 24rpx;
115
124
  }
116
125
 
117
126
  .knowledge-picker__close {
127
+ flex-shrink: 0;
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ width: 44rpx;
132
+ height: 44rpx;
118
133
  padding: 0;
119
- font-size: 16px;
120
- line-height: 1;
121
- color: #8a8f99;
134
+ margin: 0;
135
+ color: var(--kratos-color-text-muted, #8aa0b4);
136
+ font-size: 32rpx;
137
+ line-height: normal;
122
138
  background: transparent;
139
+ border-radius: 0;
123
140
  }
124
141
 
125
142
  .knowledge-picker__close::after {
@@ -127,55 +144,72 @@ function handleToggle(knowledgeId: number) {
127
144
  }
128
145
 
129
146
  .knowledge-picker__hint {
130
- margin-top: 6px;
131
- font-size: 12px;
132
- color: #8a8f99;
147
+ flex-shrink: 0;
148
+ margin-top: 12rpx;
149
+ color: var(--kratos-color-text-muted, #8aa0b4);
150
+ font-size: 24rpx;
133
151
  }
134
152
 
135
153
  .knowledge-picker__body {
136
- margin-top: 10px;
154
+ flex: 1;
155
+ min-height: 0;
156
+ margin-top: 20rpx;
137
157
  }
138
158
 
139
159
  .knowledge-picker__row {
140
160
  display: flex;
141
161
  align-items: center;
142
162
  justify-content: space-between;
143
- gap: 12px;
144
- padding: 12px 4px;
145
- border-bottom: 1px solid #f2f3f5;
163
+ gap: 24rpx;
164
+ min-height: 92rpx;
165
+ padding: 24rpx 8rpx;
166
+ border-bottom: 1rpx solid var(--kratos-color-border, #e3eaf2);
167
+ box-sizing: border-box;
146
168
  }
147
169
 
148
170
  .knowledge-picker__row-main {
149
171
  display: flex;
150
172
  flex-direction: column;
151
- gap: 2px;
173
+ gap: 4rpx;
152
174
  min-width: 0;
153
175
  }
154
176
 
155
177
  .knowledge-picker__row-name {
156
- font-size: 15px;
157
- color: #111;
178
+ overflow: hidden;
179
+ color: var(--kratos-color-text, #e9f4f6);
180
+ font-size: 30rpx;
181
+ text-overflow: ellipsis;
182
+ white-space: nowrap;
158
183
  }
159
184
 
160
185
  .knowledge-picker__row-meta {
161
- font-size: 12px;
162
- color: #8a8f99;
186
+ color: var(--kratos-color-text-muted, #8aa0b4);
187
+ font-size: 24rpx;
163
188
  }
164
189
 
165
190
  .knowledge-picker__check {
191
+ flex-shrink: 0;
166
192
  display: flex;
167
193
  align-items: center;
168
194
  justify-content: center;
169
- width: 22px;
170
- height: 22px;
171
- border: 1px solid #d0d2d6;
195
+ width: 44rpx;
196
+ height: 44rpx;
197
+ border: 1rpx solid var(--kratos-color-border, #d0d2d6);
172
198
  border-radius: 50%;
173
- font-size: 13px;
174
- color: #fff;
199
+ color: var(--kratos-color-on-primary, #031513);
200
+ font-size: 26rpx;
201
+ box-sizing: border-box;
175
202
  }
176
203
 
177
204
  .knowledge-picker__check.is-checked {
178
- background: #00a96b;
179
- border-color: #00a96b;
205
+ background: var(--kratos-color-primary, #28f0d4);
206
+ border-color: var(--kratos-color-primary, #28f0d4);
207
+ }
208
+
209
+ .knowledge-picker__empty {
210
+ padding: 48rpx 0;
211
+ color: var(--kratos-color-text-muted, #8aa0b4);
212
+ font-size: 26rpx;
213
+ text-align: center;
180
214
  }
181
215
  </style>
@@ -108,7 +108,7 @@ function handleSelect(providerId: number, modelName: string) {
108
108
  .model-picker__mask {
109
109
  position: absolute;
110
110
  inset: 0;
111
- background-color: rgba(15, 23, 42, 0.45);
111
+ background: var(--kratos-color-mask, rgba(2, 6, 12, 0.55));
112
112
  }
113
113
 
114
114
  .model-picker__sheet {
@@ -120,7 +120,9 @@ function handleSelect(providerId: number, modelName: string) {
120
120
  flex-direction: column;
121
121
  max-height: 68vh;
122
122
  overflow: hidden;
123
- background-color: #fff;
123
+ background: var(--kratos-color-surface-solid, #070d18);
124
+ border: 1rpx solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
125
+ border-bottom: 0;
124
126
  border-radius: 32rpx 32rpx 0 0;
125
127
  box-shadow: 0 -24rpx 80rpx rgba(15, 23, 42, 0.16);
126
128
  box-sizing: border-box;
@@ -131,7 +133,7 @@ function handleSelect(providerId: number, modelName: string) {
131
133
  width: 72rpx;
132
134
  height: 8rpx;
133
135
  margin: 16rpx auto 8rpx;
134
- background-color: #e2e5ea;
136
+ background: var(--kratos-color-track, rgba(255, 255, 255, 0.06));
135
137
  border-radius: 4rpx;
136
138
  }
137
139
 
@@ -146,14 +148,15 @@ function handleSelect(providerId: number, modelName: string) {
146
148
  }
147
149
 
148
150
  .model-picker__title {
149
- color: #111;
151
+ color: var(--kratos-color-text, #e9f4f6);
150
152
  font-size: 32rpx;
151
- font-weight: 600;
153
+ font-weight: 700;
152
154
  }
153
155
 
154
156
  .model-picker__count {
155
- color: #8a8f99;
157
+ color: var(--kratos-color-text-muted, #8aa0b4);
156
158
  font-size: 20rpx;
159
+ font-family: var(--kratos-font-mono, monospace);
157
160
  }
158
161
 
159
162
  .model-picker__close {
@@ -167,7 +170,7 @@ function handleSelect(providerId: number, modelName: string) {
167
170
  height: 56rpx;
168
171
  padding: 0;
169
172
  margin: 0;
170
- color: #8a8f99;
173
+ color: var(--kratos-color-text-muted, #8aa0b4);
171
174
  font-size: 28rpx;
172
175
  line-height: normal;
173
176
  background: transparent;
@@ -193,7 +196,7 @@ function handleSelect(providerId: number, modelName: string) {
193
196
  }
194
197
 
195
198
  .model-picker__body :deep(::-webkit-scrollbar-thumb) {
196
- background-color: #c9ced6;
199
+ background: var(--kratos-color-border, rgba(255, 255, 255, 0.08));
197
200
  border-radius: 4rpx;
198
201
  }
199
202
 
@@ -204,8 +207,9 @@ function handleSelect(providerId: number, modelName: string) {
204
207
 
205
208
  .model-picker__group {
206
209
  padding: 24rpx 8rpx 12rpx;
207
- color: #8a8f99;
210
+ color: var(--kratos-color-text-muted, #8aa0b4);
208
211
  font-size: 22rpx;
212
+ font-family: var(--kratos-font-mono, monospace);
209
213
  line-height: 32rpx;
210
214
  }
211
215
 
@@ -215,16 +219,17 @@ function handleSelect(providerId: number, modelName: string) {
215
219
  min-height: 88rpx;
216
220
  padding: 16rpx 28rpx;
217
221
  margin-bottom: 12rpx;
218
- border: 2rpx solid #eef0f4;
219
- border-radius: 24rpx;
222
+ border: 1rpx solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
223
+ border-radius: 20rpx;
224
+ background: var(--kratos-color-surface, rgba(255, 255, 255, 0.035));
220
225
  box-sizing: border-box;
221
226
  }
222
227
 
223
228
  .model-picker__row.is-selected {
224
- color: #0f7a62;
225
- font-weight: 500;
226
- background-color: #e8f8f4;
227
- border-color: #d5efe7;
229
+ color: var(--kratos-color-primary, #28f0d4);
230
+ font-weight: 600;
231
+ background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
232
+ border-color: var(--kratos-color-primary-edge, rgba(40, 240, 212, 0.3));
228
233
  }
229
234
 
230
235
  .model-picker__row-main {
@@ -241,21 +246,22 @@ function handleSelect(providerId: number, modelName: string) {
241
246
  }
242
247
 
243
248
  .model-picker__row-raw {
244
- color: #a7acb5;
249
+ color: var(--kratos-color-text-dim, #4e6378);
245
250
  font-size: 22rpx;
251
+ font-family: var(--kratos-font-mono, monospace);
246
252
  font-weight: 400;
247
253
  line-height: 30rpx;
248
254
  }
249
255
 
250
256
  .model-picker__row-check {
251
257
  margin-left: auto;
252
- color: #00a96b;
258
+ color: var(--kratos-color-primary, #28f0d4);
253
259
  font-size: 32rpx;
254
260
  }
255
261
 
256
262
  .model-picker__empty {
257
263
  padding: 64rpx 0;
258
- color: #8a8f99;
264
+ color: var(--kratos-color-text-dim, #4e6378);
259
265
  font-size: 26rpx;
260
266
  text-align: center;
261
267
  }
@@ -1,6 +1,8 @@
1
1
  <script setup lang="ts">
2
+ import { computed } from 'vue'
2
3
  import type { AiSession } from '../../../../rpc/base/v1/ai_session'
3
4
  import { useI18n } from '@liujitcn/kratos-uni-app-core'
5
+ import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
4
6
 
5
7
  type PressPoint = {
6
8
  clientX?: number
@@ -43,6 +45,9 @@ const emit = defineEmits<{
43
45
  'update:keyword': [value: string]
44
46
  }>()
45
47
  const { t } = useI18n()
48
+ const themeStore = useThemeStore()
49
+ const primaryIconColor = computed(() => (themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'))
50
+ const mutedIconColor = computed(() => (themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4'))
46
51
 
47
52
  function handleKeywordInput(event: Event) {
48
53
  emit('update:keyword', ((event as unknown as InputEventValue).detail?.value || '').toString())
@@ -75,12 +80,12 @@ function formatSessionTime(session: AiSession) {
75
80
  <view class="session-drawer__head">
76
81
  <view class="session-drawer__title">{{ t('system.ai.history') }}</view>
77
82
  <button class="session-create" hover-class="none" @tap="emit('create')">
78
- <uni-icons type="plusempty" size="16" color="#27ba9b" />
83
+ <uni-icons type="plusempty" size="16" :color="primaryIconColor" />
79
84
  <text>{{ t('common.action.new') }}</text>
80
85
  </button>
81
86
  </view>
82
87
  <view class="session-search">
83
- <uni-icons type="search" size="16" color="#898b94" />
88
+ <uni-icons type="search" size="16" :color="mutedIconColor" />
84
89
  <input
85
90
  class="session-search-input"
86
91
  confirm-type="search"
@@ -108,8 +113,9 @@ function formatSessionTime(session: AiSession) {
108
113
  <view class="session-summary">{{ session.summary || t('system.ai.no_summary') }}</view>
109
114
  </view>
110
115
  <button class="session-more" hover-class="none" @tap.stop="emit('action', session, $event)">
111
- <view></view>
112
- <view></view>
116
+ <view class="session-more__dot"></view>
117
+ <view class="session-more__dot"></view>
118
+ <view class="session-more__dot"></view>
113
119
  <view></view>
114
120
  </button>
115
121
  </view>
@@ -142,7 +148,7 @@ function formatSessionTime(session: AiSession) {
142
148
  left: 560rpx;
143
149
  /* 高于 KratosTabBar 的 z-index:999,避免抽屉被底部导航遮挡 */
144
150
  z-index: 1000;
145
- background-color: rgba(0, 0, 0, 0.18);
151
+ background-color: var(--kratos-color-mask, rgba(2, 6, 12, 0.55));
146
152
  }
147
153
 
148
154
  .session-drawer {
@@ -155,7 +161,8 @@ function formatSessionTime(session: AiSession) {
155
161
  z-index: 1001;
156
162
  width: 560rpx;
157
163
  padding: 0 24rpx 36rpx;
158
- background-color: #fff;
164
+ background: var(--kratos-color-surface-solid, #070d18);
165
+ border-right: 1rpx solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
159
166
  box-shadow: none;
160
167
  box-sizing: border-box;
161
168
  transform: translateX(-100%);
@@ -163,7 +170,7 @@ function formatSessionTime(session: AiSession) {
163
170
  }
164
171
 
165
172
  .session-drawer.is-open {
166
- box-shadow: 24rpx 0 60rpx rgba(0, 0, 0, 0.12);
173
+ box-shadow: 24rpx 0 60rpx rgba(0, 0, 0, 0.3);
167
174
  transform: translateX(0);
168
175
  }
169
176
 
@@ -177,7 +184,7 @@ function formatSessionTime(session: AiSession) {
177
184
  }
178
185
 
179
186
  .session-drawer__title {
180
- color: #333;
187
+ color: var(--kratos-color-text, #e9f4f6);
181
188
  font-size: 32rpx;
182
189
  font-weight: 700;
183
190
  line-height: 40rpx;
@@ -190,11 +197,12 @@ function formatSessionTime(session: AiSession) {
190
197
  gap: 4rpx;
191
198
  width: 112rpx;
192
199
  height: 52rpx;
193
- border-radius: 8rpx;
194
- color: #27ba9b;
200
+ border: 1rpx solid var(--kratos-color-primary-edge, rgba(40, 240, 212, 0.3));
201
+ border-radius: 12rpx;
202
+ color: var(--kratos-color-primary, #28f0d4);
195
203
  font-size: 24rpx;
196
- line-height: 52rpx;
197
- background-color: #e8f8f4;
204
+ line-height: 50rpx;
205
+ background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
198
206
  }
199
207
 
200
208
  .session-search {
@@ -205,20 +213,21 @@ function formatSessionTime(session: AiSession) {
205
213
  height: 64rpx;
206
214
  padding: 0 18rpx;
207
215
  margin-bottom: 18rpx;
208
- border-radius: 10rpx;
209
- background-color: #f6f7f9;
216
+ border: 1rpx solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
217
+ border-radius: 12rpx;
218
+ background: var(--kratos-color-surface-2, rgba(255, 255, 255, 0.06));
210
219
  box-sizing: border-box;
211
220
  }
212
221
 
213
222
  .session-search-input {
214
223
  flex: 1;
215
224
  min-width: 0;
216
- color: #333;
225
+ color: var(--kratos-color-text, #e9f4f6);
217
226
  font-size: 24rpx;
218
227
  }
219
228
 
220
229
  .session-search-placeholder {
221
- color: #b8bcc5;
230
+ color: var(--kratos-color-text-dim, #4e6378);
222
231
  }
223
232
 
224
233
  .session-list {
@@ -231,9 +240,9 @@ function formatSessionTime(session: AiSession) {
231
240
  align-items: center;
232
241
  gap: 12rpx;
233
242
  padding: 22rpx 16rpx 22rpx 22rpx;
234
- border: 1rpx solid #eee;
235
- border-radius: 10rpx;
236
- background-color: #fff;
243
+ border: 1rpx solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
244
+ border-radius: 14rpx;
245
+ background: var(--kratos-color-surface, rgba(255, 255, 255, 0.035));
237
246
  }
238
247
 
239
248
  .session-item + .session-item {
@@ -241,8 +250,8 @@ function formatSessionTime(session: AiSession) {
241
250
  }
242
251
 
243
252
  .session-item.is-active {
244
- border-color: #c7eee4;
245
- background-color: #e8f8f4;
253
+ border-color: var(--kratos-color-primary-edge, rgba(40, 240, 212, 0.3));
254
+ background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
246
255
  }
247
256
 
248
257
  .session-content {
@@ -262,7 +271,7 @@ function formatSessionTime(session: AiSession) {
262
271
  overflow: hidden;
263
272
  text-overflow: ellipsis;
264
273
  white-space: nowrap;
265
- color: #333;
274
+ color: var(--kratos-color-text, #e9f4f6);
266
275
  font-size: 26rpx;
267
276
  font-weight: 600;
268
277
  line-height: 34rpx;
@@ -270,8 +279,9 @@ function formatSessionTime(session: AiSession) {
270
279
 
271
280
  .session-time {
272
281
  flex-shrink: 0;
273
- color: #a6abb3;
282
+ color: var(--kratos-color-text-dim, #4e6378);
274
283
  font-size: 20rpx;
284
+ font-family: var(--kratos-font-mono, monospace);
275
285
  line-height: 30rpx;
276
286
  }
277
287
 
@@ -280,7 +290,7 @@ function formatSessionTime(session: AiSession) {
280
290
  overflow: hidden;
281
291
  text-overflow: ellipsis;
282
292
  white-space: nowrap;
283
- color: #777;
293
+ color: var(--kratos-color-text-muted, #8aa0b4);
284
294
  font-size: 22rpx;
285
295
  line-height: 32rpx;
286
296
  }
@@ -294,19 +304,19 @@ function formatSessionTime(session: AiSession) {
294
304
  width: 56rpx;
295
305
  height: 56rpx;
296
306
  border-radius: 50%;
297
- background-color: transparent;
307
+ background: transparent;
298
308
  }
299
309
 
300
- .session-more view {
310
+ .session-more__dot {
301
311
  width: 6rpx;
302
312
  height: 6rpx;
303
313
  border-radius: 50%;
304
- background-color: #9ca3af;
314
+ background: var(--kratos-color-text-muted, #8aa0b4);
305
315
  }
306
316
 
307
317
  .session-empty {
308
318
  padding: 60rpx 0;
309
- color: #999;
319
+ color: var(--kratos-color-text-dim, #4e6378);
310
320
  font-size: 24rpx;
311
321
  text-align: center;
312
322
  }
@@ -1,6 +1,8 @@
1
1
  <script setup lang="ts">
2
+ import { computed } from 'vue'
2
3
  import type { AiShortcut } from '../../../../rpc/base/v1/ai_tool'
3
4
  import { useI18n } from '@liujitcn/kratos-uni-app-core'
5
+ import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
4
6
 
5
7
  defineProps<{
6
8
  greetingMessage: string
@@ -14,6 +16,9 @@ const emit = defineEmits<{
14
16
  'shortcut-tap': [shortcut: AiShortcut]
15
17
  }>()
16
18
  const { t } = useI18n()
19
+ const themeStore = useThemeStore()
20
+ const primaryIconColor = computed(() => (themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'))
21
+ const mutedIconColor = computed(() => (themeStore.theme === 'light' ? '#9aabbb' : '#8aa0b4'))
17
22
  </script>
18
23
 
19
24
  <template>
@@ -25,8 +30,8 @@ const { t } = useI18n()
25
30
  <view class="ai-avatar__face">
26
31
  <view class="ai-avatar__bang"></view>
27
32
  <view class="ai-avatar__eyes">
28
- <view></view>
29
- <view></view>
33
+ <view class="ai-avatar__eye"></view>
34
+ <view class="ai-avatar__eye"></view>
30
35
  </view>
31
36
  <view class="ai-avatar__blush is-left"></view>
32
37
  <view class="ai-avatar__blush is-right"></view>
@@ -50,7 +55,7 @@ const { t } = useI18n()
50
55
  </view>
51
56
  <button v-if="canRefresh" class="prompt-refresh" hover-class="none" @tap="emit('refresh')">
52
57
  <text>{{ t('system.ai.refresh') }}</text>
53
- <uni-icons type="refresh" size="25" color="#00a96b" />
58
+ <uni-icons type="refresh" size="25" :color="primaryIconColor" />
54
59
  </button>
55
60
  </view>
56
61
  <view v-if="loading" class="prompt-loading">{{ t('common.message.loading') }}...</view>
@@ -72,7 +77,7 @@ const { t } = useI18n()
72
77
  shortcut.group || t('system.ai.general_assistant')
73
78
  }}</text>
74
79
  </view>
75
- <uni-icons type="right" size="20" color="#9aa0aa" />
80
+ <uni-icons type="right" size="20" :color="mutedIconColor" />
76
81
  </button>
77
82
  </template>
78
83
  </view>
@@ -172,7 +177,7 @@ const { t } = useI18n()
172
177
  margin: 22rpx auto 0;
173
178
  }
174
179
 
175
- .ai-avatar__eyes view {
180
+ .ai-avatar__eye {
176
181
  width: 6rpx;
177
182
  height: 9rpx;
178
183
  border-radius: 50%;
@@ -311,9 +316,9 @@ const { t } = useI18n()
311
316
  }
312
317
 
313
318
  .welcome-bubble {
314
- color: #111;
315
- background-color: #fff;
316
- box-shadow: 0 10rpx 32rpx rgba(15, 23, 42, 0.04);
319
+ color: var(--kratos-color-text, #e9f4f6);
320
+ background: var(--kratos-color-surface, #fff);
321
+ border: 1rpx solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
317
322
  box-sizing: border-box;
318
323
  }
319
324
 
@@ -340,10 +345,10 @@ const { t } = useI18n()
340
345
  .prompt-card {
341
346
  margin-top: 34rpx;
342
347
  padding: 30rpx 28rpx 24rpx;
343
- border: 1rpx solid #e7ecef;
344
- border-radius: 10rpx;
345
- background: linear-gradient(180deg, rgba(0, 169, 107, 0.05), rgba(255, 255, 255, 0) 38%), #fff;
346
- box-shadow: 0 10rpx 34rpx rgba(15, 23, 42, 0.05);
348
+ border: 1rpx solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
349
+ border-radius: 16rpx;
350
+ background: var(--kratos-color-surface, #fff);
351
+ box-shadow: var(--kratos-glow-soft, none);
347
352
  box-sizing: border-box;
348
353
  }
349
354
 
@@ -356,14 +361,15 @@ const { t } = useI18n()
356
361
  }
357
362
 
358
363
  .prompt-card__eyebrow {
359
- color: #00a96b;
364
+ color: var(--kratos-color-primary, #28f0d4);
360
365
  font-size: 22rpx;
366
+ font-family: var(--kratos-font-mono, monospace);
361
367
  font-weight: 600;
362
368
  line-height: 30rpx;
363
369
  }
364
370
 
365
371
  .prompt-card__title {
366
- color: #111;
372
+ color: var(--kratos-color-text, #e9f4f6);
367
373
  font-size: 31rpx;
368
374
  font-weight: 700;
369
375
  line-height: 42rpx;
@@ -375,14 +381,14 @@ const { t } = useI18n()
375
381
  align-items: center;
376
382
  gap: 14rpx;
377
383
  height: 50rpx;
378
- color: #00a96b;
384
+ color: var(--kratos-color-primary, #28f0d4);
379
385
  font-size: 25rpx;
380
386
  line-height: 50rpx;
381
387
  }
382
388
 
383
389
  .prompt-loading {
384
390
  padding: 32rpx 0;
385
- color: #8d929c;
391
+ color: var(--kratos-color-text-muted, #8aa0b4);
386
392
  font-size: 26rpx;
387
393
  line-height: 38rpx;
388
394
  }
@@ -393,8 +399,8 @@ const { t } = useI18n()
393
399
  width: 100%;
394
400
  min-height: 96rpx;
395
401
  padding: 16rpx 16rpx 16rpx 0;
396
- border-top: 1rpx solid #edf0f2;
397
- color: #111;
402
+ border-top: 1rpx solid var(--kratos-color-border, rgba(255, 255, 255, 0.08));
403
+ color: var(--kratos-color-text, #e9f4f6);
398
404
  text-align: left;
399
405
  box-sizing: border-box;
400
406
  }
@@ -408,13 +414,14 @@ const { t } = useI18n()
408
414
  width: 36rpx;
409
415
  height: 36rpx;
410
416
  margin-right: 24rpx;
411
- border-radius: 8rpx;
412
- color: #00a96b;
417
+ border: 1rpx solid var(--kratos-color-primary-edge, rgba(40, 240, 212, 0.3));
418
+ border-radius: 10rpx;
419
+ color: var(--kratos-color-primary, #28f0d4);
413
420
  font-size: 24rpx;
414
421
  font-weight: 700;
415
422
  line-height: 34rpx;
416
423
  text-align: center;
417
- background-color: #e7f7f2;
424
+ background: var(--kratos-color-primary-soft, rgba(40, 240, 212, 0.08));
418
425
  box-sizing: border-box;
419
426
  }
420
427
 
@@ -431,7 +438,7 @@ const { t } = useI18n()
431
438
  overflow: hidden;
432
439
  text-overflow: ellipsis;
433
440
  white-space: nowrap;
434
- color: #111;
441
+ color: var(--kratos-color-text, #e9f4f6);
435
442
  font-size: 29rpx;
436
443
  line-height: 40rpx;
437
444
  }
@@ -441,7 +448,7 @@ const { t } = useI18n()
441
448
  overflow: hidden;
442
449
  text-overflow: ellipsis;
443
450
  white-space: nowrap;
444
- color: #8d929c;
451
+ color: var(--kratos-color-text-dim, #4e6378);
445
452
  font-size: 22rpx;
446
453
  line-height: 30rpx;
447
454
  }