@jx3box/jx3box-ui 2.3.20 → 2.3.22

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 (19) hide show
  1. package/assets/css/wiki/wiki-comments.less +244 -0
  2. package/assets/css/wiki/wiki-panel.less +291 -0
  3. package/assets/css/wiki/wiki-revisions.less +78 -0
  4. package/assets/img/common/jx3-origin.svg +138 -15
  5. package/assets/img/common/jx3-www.svg +75 -9
  6. package/i18n/messages/en-US.js +3 -1
  7. package/i18n/messages/vi.js +8 -1
  8. package/i18n/messages/zh-CN.js +3 -1
  9. package/i18n/messages/zh-TW.js +3 -1
  10. package/package.json +2 -1
  11. package/src/App.vue +53 -10
  12. package/src/header/client.vue +4 -4
  13. package/src/interact/QRcode.vue +21 -3
  14. package/src/wiki/GamePrice.vue +68 -11
  15. package/src/wiki/WikiComment.vue +46 -15
  16. package/src/wiki/WikiComments.vue +19 -4
  17. package/src/wiki/WikiPanel.vue +22 -4
  18. package/src/wiki/WikiRevisions.vue +6 -1
  19. package/tests/wiki-i18n-contract.test.js +113 -0
package/assets/css/wiki/wiki-comments.less CHANGED
@@ -178,4 +178,248 @@
178
178
  }
179
179
  }
180
180
  }
181
+
182
+ &.is-surface {
183
+ --el-color-primary: var(--jx3box-ui-wiki-panel-primary);
184
+
185
+ .u-empty {
186
+ margin: 4px 0;
187
+ padding: 28px 16px;
188
+ border: 1px dashed var(--jx3box-ui-wiki-panel-border);
189
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius);
190
+ background: var(--jx3box-ui-wiki-panel-surface-muted);
191
+ color: var(--jx3box-ui-wiki-panel-muted);
192
+ }
193
+
194
+ .m-comments-panel {
195
+ min-width: 0;
196
+
197
+ .u-comment {
198
+ padding: 16px 0;
199
+ border-bottom-color: var(--jx3box-ui-wiki-panel-border-light);
200
+ }
201
+
202
+ .u-nickname-panel {
203
+ display: flex;
204
+ flex-wrap: wrap;
205
+ align-items: center;
206
+ gap: 4px;
207
+ min-width: 0;
208
+
209
+ .u-nickname {
210
+ min-width: 0;
211
+ color: var(--jx3box-ui-wiki-panel-regular);
212
+ overflow-wrap: anywhere;
213
+ }
214
+
215
+ .u-nickname[href] {
216
+ color: var(--jx3box-ui-wiki-panel-primary);
217
+ }
218
+ }
219
+
220
+ .u-content {
221
+ margin: 8px 0 10px;
222
+ color: var(--jx3box-ui-wiki-panel-muted);
223
+ opacity: 1;
224
+ line-height: 1.7;
225
+ white-space: pre-wrap;
226
+ overflow-wrap: anywhere;
227
+
228
+ img,
229
+ video,
230
+ iframe {
231
+ max-width: 100%;
232
+ height: auto;
233
+ }
234
+
235
+ pre,
236
+ table {
237
+ display: block;
238
+ max-width: 100%;
239
+ overflow-x: auto;
240
+ overscroll-behavior-x: contain;
241
+ }
242
+ }
243
+
244
+ .m-reply {
245
+ display: flex;
246
+ flex-wrap: wrap;
247
+ align-items: center;
248
+ padding-bottom: 0;
249
+ gap: 8px;
250
+
251
+ .el-button + .el-button {
252
+ margin-left: 0;
253
+ }
254
+
255
+ .el-button {
256
+ min-height: 28px;
257
+ padding: 4px 10px;
258
+ border-radius: 4px;
259
+ font-size: 12px;
260
+
261
+ &:focus-visible {
262
+ outline: 2px solid var(--jx3box-ui-wiki-panel-border-focus);
263
+ outline-offset: 2px;
264
+ }
265
+ }
266
+
267
+ .el-button--primary.is-plain {
268
+ border-color: var(--jx3box-ui-wiki-panel-primary);
269
+ color: var(--jx3box-ui-wiki-panel-primary);
270
+ background: var(--jx3box-ui-wiki-panel-surface);
271
+
272
+ &:hover,
273
+ &:focus {
274
+ border-color: var(--jx3box-ui-wiki-panel-primary-hover);
275
+ color: var(--jx3box-ui-wiki-panel-primary-hover);
276
+ background: var(--jx3box-ui-wiki-panel-primary-soft);
277
+ }
278
+ }
279
+
280
+ .u-time {
281
+ float: none;
282
+ margin: 0 0 0 auto;
283
+ color: var(--jx3box-ui-wiki-panel-subtle);
284
+ opacity: 1;
285
+ white-space: nowrap;
286
+ }
287
+ }
288
+
289
+ & > .u-comments > .u-comment-panel > .u-comments {
290
+ margin-top: 0;
291
+ padding: 10px 0 0 30px;
292
+ }
293
+ }
294
+
295
+ .u-pagination-box {
296
+ padding-bottom: 4px;
297
+ overflow-x: auto;
298
+ overscroll-behavior-x: contain;
299
+ }
300
+
301
+ .m-reply-form {
302
+ margin-top: 20px;
303
+ padding: 0;
304
+ border: 0;
305
+ border-radius: 0;
306
+ background: transparent;
307
+
308
+ .u-title {
309
+ margin-top: 15px;
310
+ margin-bottom: 10px;
311
+ padding-bottom: 10px;
312
+ color: var(--jx3box-ui-wiki-panel-text);
313
+ border-bottom-color: var(--jx3box-ui-wiki-panel-border-light);
314
+ font-weight: 600;
315
+ }
316
+
317
+ .u-reply-content,
318
+ .u-author input {
319
+ border-color: #cbd5e1;
320
+ background: var(--jx3box-ui-wiki-panel-surface);
321
+ color: var(--jx3box-ui-wiki-panel-text);
322
+
323
+ &:focus {
324
+ border-color: var(--jx3box-ui-wiki-panel-primary);
325
+ outline: 2px solid rgba(91, 92, 245, 0.16);
326
+ outline-offset: 1px;
327
+ }
328
+ }
329
+
330
+ .u-reply-content {
331
+ min-height: 96px;
332
+ padding: 10px 12px;
333
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius);
334
+ }
335
+
336
+ .u-author {
337
+ display: flex;
338
+ align-items: center;
339
+ gap: 8px;
340
+ max-width: calc(100% - 100px);
341
+ margin-top: 10px;
342
+
343
+ input {
344
+ min-width: 0;
345
+ max-width: 220px;
346
+ height: 34px;
347
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius);
348
+ }
349
+ }
350
+
351
+ .u-submit {
352
+ min-height: 36px;
353
+ margin-top: 10px;
354
+ border-color: var(--jx3box-ui-wiki-panel-primary);
355
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius);
356
+ background: var(--jx3box-ui-wiki-panel-primary);
357
+
358
+ &:hover,
359
+ &:focus {
360
+ border-color: var(--jx3box-ui-wiki-panel-primary-hover);
361
+ background: var(--jx3box-ui-wiki-panel-primary-hover);
362
+ }
363
+
364
+ &:focus-visible {
365
+ outline: 2px solid var(--jx3box-ui-wiki-panel-border-focus);
366
+ outline-offset: 2px;
367
+ }
368
+ }
369
+ }
370
+ }
371
+ }
372
+
373
+ @media screen and (max-width: 720px) {
374
+ .c-wiki-comments.is-surface {
375
+ .m-comments-panel {
376
+ & > .u-comments > .u-comment-panel > .u-comments {
377
+ padding-left: 12px;
378
+ }
379
+
380
+ .m-reply {
381
+ .u-time {
382
+ flex-basis: 100%;
383
+ margin-left: 0;
384
+ }
385
+ }
386
+ }
387
+
388
+ .m-reply-form {
389
+ .u-author {
390
+ float: none;
391
+ width: 100%;
392
+ max-width: none;
393
+
394
+ input {
395
+ flex: 1 1 auto;
396
+ width: 0;
397
+ max-width: none;
398
+ }
399
+ }
400
+
401
+ .u-submit {
402
+ float: none;
403
+ width: 100%;
404
+ min-height: 44px;
405
+ }
406
+ }
407
+ }
408
+ }
409
+
410
+ @media screen and (max-width: 390px) {
411
+ .c-wiki-comments.is-surface {
412
+ .m-comments-panel {
413
+ .u-mark {
414
+ height: auto;
415
+ white-space: normal;
416
+ }
417
+
418
+ .m-reply {
419
+ .el-button {
420
+ min-height: 36px;
421
+ }
422
+ }
423
+ }
424
+ }
181
425
  }
package/assets/css/wiki/wiki-panel.less CHANGED
@@ -1,5 +1,26 @@
1
1
  /* assets/css/wiki/wiki-panel.less */
2
2
  .c-wiki-panel {
3
+ --jx3box-ui-wiki-panel-text: #0f172a;
4
+ --jx3box-ui-wiki-panel-regular: #334155;
5
+ --jx3box-ui-wiki-panel-muted: #64748b;
6
+ --jx3box-ui-wiki-panel-subtle: #94a3b8;
7
+ --jx3box-ui-wiki-panel-primary: #5b5cf5;
8
+ --jx3box-ui-wiki-panel-primary-hover: #4f46e5;
9
+ --jx3box-ui-wiki-panel-primary-soft: #eef2ff;
10
+ --jx3box-ui-wiki-panel-border: #e2e8f0;
11
+ --jx3box-ui-wiki-panel-outline: rgba(226, 232, 240, 0.8);
12
+ --jx3box-ui-wiki-panel-border-light: #f1f5f9;
13
+ --jx3box-ui-wiki-panel-border-focus: #a5b4fc;
14
+ --jx3box-ui-wiki-panel-surface: #fff;
15
+ --jx3box-ui-wiki-panel-surface-muted: #f8fafc;
16
+ --jx3box-ui-wiki-panel-radius: 24px;
17
+ --jx3box-ui-wiki-panel-control-radius: 16px;
18
+ --jx3box-ui-wiki-panel-small-radius: 10px;
19
+ --jx3box-ui-wiki-panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
20
+ --jx3box-ui-wiki-panel-padding: 24px;
21
+ --jx3box-ui-wiki-panel-head-height: 64px;
22
+ --jx3box-ui-wiki-panel-title-size: 16px;
23
+
3
24
  .db;
4
25
  .mb(15px);
5
26
  font-size: 14px;
@@ -115,4 +136,274 @@
115
136
  text-overflow: ellipsis;
116
137
  }
117
138
  }
139
+
140
+ &.is-surface {
141
+ box-sizing: border-box;
142
+ margin-bottom: 0;
143
+ color: var(--jx3box-ui-wiki-panel-text);
144
+ background: var(--jx3box-ui-wiki-panel-surface);
145
+ border: 1px solid var(--jx3box-ui-wiki-panel-outline);
146
+ border-radius: var(--jx3box-ui-wiki-panel-radius);
147
+ box-shadow: var(--jx3box-ui-wiki-panel-shadow);
148
+ overflow: hidden;
149
+
150
+ .m-panel-head {
151
+ position: relative;
152
+ box-sizing: border-box;
153
+ min-height: var(--jx3box-ui-wiki-panel-head-height);
154
+ height: auto;
155
+ min-width: 0;
156
+ padding: 11px var(--jx3box-ui-wiki-panel-padding);
157
+ border-bottom-color: var(--jx3box-ui-wiki-panel-border-light);
158
+ background: var(--jx3box-ui-wiki-panel-surface);
159
+ gap: 16px;
160
+
161
+ .m-panel-title {
162
+ display: flex;
163
+ min-width: 0;
164
+ align-items: center;
165
+ flex: 1 1 auto;
166
+ flex-wrap: wrap;
167
+ padding: 0;
168
+ gap: 8px;
169
+ color: var(--jx3box-ui-wiki-panel-text);
170
+ font-size: var(--jx3box-ui-wiki-panel-title-size);
171
+ font-weight: 700;
172
+ line-height: 24px;
173
+ overflow-wrap: anywhere;
174
+
175
+ .u-icon {
176
+ display: inline-flex;
177
+ box-sizing: border-box;
178
+ width: 32px;
179
+ height: 32px;
180
+ align-items: center;
181
+ justify-content: center;
182
+ flex: 0 0 32px;
183
+ margin: 0;
184
+ padding: 7px;
185
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius);
186
+ color: var(--jx3box-ui-wiki-panel-primary);
187
+ fill: var(--jx3box-ui-wiki-panel-primary);
188
+ background: var(--jx3box-ui-wiki-panel-primary-soft);
189
+ object-fit: contain;
190
+ font-size: 16px;
191
+ line-height: 18px;
192
+ }
193
+
194
+ .u-txt {
195
+ min-width: 0;
196
+ color: var(--jx3box-ui-wiki-panel-text);
197
+ font-size: var(--jx3box-ui-wiki-panel-title-size);
198
+ font-weight: 700;
199
+ line-height: 24px;
200
+ overflow-wrap: anywhere;
201
+ }
202
+ }
203
+
204
+ .m-panel-actions {
205
+ position: static;
206
+ top: auto;
207
+ right: auto;
208
+ flex: 0 1 auto;
209
+ min-width: 0;
210
+ margin-left: auto;
211
+ gap: 12px;
212
+ transform: none;
213
+ z-index: 1;
214
+
215
+ > * {
216
+ max-width: 100%;
217
+ white-space: normal;
218
+ }
219
+
220
+ .u-qr {
221
+ box-sizing: border-box;
222
+ min-height: 32px;
223
+ padding: 6px 8px;
224
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius);
225
+ color: var(--jx3box-ui-wiki-panel-muted);
226
+ line-height: 20px;
227
+ transition:
228
+ color 0.16s ease,
229
+ background-color 0.16s ease;
230
+
231
+ .u-icon {
232
+ top: 0;
233
+ margin-right: 6px;
234
+ fill: currentColor;
235
+ }
236
+
237
+ .u-text {
238
+ color: inherit;
239
+ font-size: 13px;
240
+ font-weight: 500;
241
+ line-height: 20px;
242
+ }
243
+
244
+ &:hover {
245
+ color: var(--jx3box-ui-wiki-panel-primary);
246
+ background: var(--jx3box-ui-wiki-panel-primary-soft);
247
+
248
+ .u-icon {
249
+ fill: currentColor;
250
+ }
251
+ }
252
+ }
253
+ }
254
+ }
255
+
256
+ .m-panel-body {
257
+ min-width: 0;
258
+ padding: var(--jx3box-ui-wiki-panel-padding);
259
+ color: var(--jx3box-ui-wiki-panel-regular);
260
+ background: var(--jx3box-ui-wiki-panel-surface);
261
+ line-height: 1.7;
262
+ word-break: normal;
263
+ overflow-wrap: anywhere;
264
+ }
265
+
266
+ .m-wiki-metas {
267
+ display: flex;
268
+ flex-wrap: wrap;
269
+ align-items: center;
270
+ gap: 10px 16px;
271
+ margin-bottom: 4px;
272
+ color: var(--jx3box-ui-wiki-panel-muted);
273
+ white-space: normal;
274
+ overflow: visible;
275
+
276
+ .u-meta {
277
+ display: inline-flex;
278
+ align-items: center;
279
+ min-width: 0;
280
+ margin: 0;
281
+ }
282
+
283
+ .u-label {
284
+ margin-right: 8px;
285
+ padding: 3px 8px;
286
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius);
287
+ background: var(--jx3box-ui-wiki-panel-surface-muted);
288
+ color: var(--jx3box-ui-wiki-panel-muted);
289
+ }
290
+
291
+ .u-creator {
292
+ flex: 0 0 28px;
293
+ width: 28px;
294
+ height: 28px;
295
+ border: 2px solid #fff;
296
+ box-shadow: 0 0 0 1px var(--jx3box-ui-wiki-panel-border);
297
+
298
+ img {
299
+ width: 100%;
300
+ height: 100%;
301
+ object-fit: cover;
302
+ }
303
+ }
304
+ }
305
+ }
306
+
307
+ &.is-plain {
308
+ border-color: transparent;
309
+ border-radius: 0;
310
+ background: transparent;
311
+ box-shadow: none;
312
+
313
+ .m-panel-head {
314
+ padding-right: 0;
315
+ padding-left: 0;
316
+ background: transparent;
317
+ }
318
+
319
+ .m-panel-body {
320
+ padding-right: 0;
321
+ padding-left: 0;
322
+ }
323
+ }
324
+ }
325
+
326
+ .u-wiki-panel-qrcode-popup {
327
+ box-sizing: border-box;
328
+ min-width: 148px;
329
+ max-width: calc(100vw - 32px);
330
+ padding: 12px;
331
+ border-color: var(--jx3box-ui-wiki-panel-border, #e2e8f0);
332
+ border-radius: var(--jx3box-ui-wiki-panel-small-radius, 10px);
333
+ background: var(--jx3box-ui-wiki-panel-surface, #fff);
334
+ color: var(--jx3box-ui-wiki-panel-muted, #64748b);
335
+ box-shadow:
336
+ 0 12px 30px rgba(15, 23, 42, 0.12),
337
+ 0 2px 8px rgba(15, 23, 42, 0.06);
338
+
339
+ .u-pic {
340
+ box-sizing: content-box;
341
+ margin: 0 auto;
342
+ padding: 4px;
343
+ border-radius: 4px;
344
+ background: #fff;
345
+ }
346
+
347
+ .u-txt {
348
+ padding: 8px 0 0;
349
+ color: inherit;
350
+ font-size: 12px;
351
+ line-height: 18px;
352
+ white-space: nowrap;
353
+ }
354
+ }
355
+
356
+ @media screen and (max-width: 720px) {
357
+ .u-wiki-panel-qrcode-popup {
358
+ transform: translateX(calc(-100% + 32px));
359
+ }
360
+
361
+ .c-wiki-panel.is-surface {
362
+ --jx3box-ui-wiki-panel-radius: 20px;
363
+ --jx3box-ui-wiki-panel-padding: 16px;
364
+ --jx3box-ui-wiki-panel-title-size: 15px;
365
+
366
+ .m-panel-head {
367
+ height: auto;
368
+ min-height: var(--jx3box-ui-wiki-panel-head-height);
369
+ align-items: center;
370
+ flex-wrap: wrap;
371
+ padding-top: 8px;
372
+ padding-bottom: 8px;
373
+ gap: 8px;
374
+
375
+ .m-panel-title {
376
+ flex: 1 1 auto;
377
+
378
+ .u-icon {
379
+ width: 30px;
380
+ height: 30px;
381
+ flex-basis: 30px;
382
+ }
383
+ }
384
+
385
+ .m-panel-actions {
386
+ margin-left: auto;
387
+ flex-wrap: wrap;
388
+ justify-content: flex-end;
389
+ gap: 8px;
390
+ }
391
+ }
392
+
393
+ .m-wiki-metas {
394
+ gap: 10px;
395
+
396
+ .u-meta {
397
+ display: flex;
398
+ width: 100%;
399
+ margin: 0;
400
+ }
401
+ }
402
+ }
403
+ }
404
+
405
+ @media screen and (max-width: @phone) {
406
+ .u-wiki-panel-qrcode-popup {
407
+ display: none;
408
+ }
118
409
  }
package/assets/css/wiki/wiki-revisions.less CHANGED
@@ -60,4 +60,82 @@
60
60
  border-bottom: none;
61
61
  }
62
62
  }
63
+
64
+ &.is-surface {
65
+ .m-revisions-panel {
66
+ max-width: 100%;
67
+ overflow-x: auto;
68
+ overscroll-behavior-x: contain;
69
+ -webkit-overflow-scrolling: touch;
70
+ border: 0;
71
+ border-radius: 0;
72
+ }
73
+
74
+ .u-empty {
75
+ padding: 28px 16px;
76
+ color: var(--jx3box-ui-wiki-panel-muted);
77
+ background: var(--jx3box-ui-wiki-panel-surface-muted);
78
+ }
79
+
80
+ .m-histories {
81
+ min-width: 640px;
82
+ margin: 0;
83
+ color: var(--jx3box-ui-wiki-panel-regular);
84
+ opacity: 1;
85
+
86
+ th,
87
+ td {
88
+ padding: 8px 10px;
89
+ border-color: var(--jx3box-ui-wiki-panel-border);
90
+ vertical-align: middle;
91
+ overflow-wrap: anywhere;
92
+ }
93
+
94
+ th {
95
+ color: var(--jx3box-ui-wiki-panel-muted);
96
+ background: var(--jx3box-ui-wiki-panel-surface);
97
+ border-bottom-width: 2px;
98
+ font-weight: 400;
99
+ white-space: nowrap;
100
+ }
101
+
102
+ td {
103
+ border-bottom-color: var(--jx3box-ui-wiki-panel-border);
104
+ }
105
+
106
+ a[href] {
107
+ color: var(--jx3box-ui-wiki-panel-primary);
108
+
109
+ &:hover {
110
+ color: var(--jx3box-ui-wiki-panel-primary-hover);
111
+ box-shadow: 0 1px 0 var(--jx3box-ui-wiki-panel-primary-hover);
112
+ }
113
+ }
114
+ }
115
+ }
116
+ }
117
+
118
+ @media screen and (max-width: 720px) {
119
+ .c-wiki-revisions.is-surface {
120
+ .m-revisions-panel {
121
+ scrollbar-width: thin;
122
+ box-shadow: inset -12px 0 12px -12px rgba(15, 23, 42, 0.2);
123
+ }
124
+
125
+ .m-histories {
126
+ min-width: 560px;
127
+
128
+ th,
129
+ td {
130
+ min-width: 100px;
131
+ padding: 8px;
132
+ font-size: 12px;
133
+ }
134
+
135
+ th:first-child,
136
+ td:first-child {
137
+ min-width: 44px;
138
+ }
139
+ }
140
+ }
63
141
  }