@composy/log-viewer-core 0.0.1 → 0.0.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.
Files changed (108) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/README.md +175 -37
  3. package/dist/index.js +614 -299
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.js +548 -1
  6. package/dist/index.min.js.map +1 -0
  7. package/es/.dts-output-manifest.json +1 -0
  8. package/es/.dts.tsbuildinfo +1 -0
  9. package/es/core/EventEmitter.d.ts +0 -1
  10. package/es/core/EventEmitter.js +13 -9
  11. package/es/core/EventEmitter.js.map +1 -1
  12. package/es/core/LogViewer.d.ts +14 -11
  13. package/es/core/LogViewer.js +243 -64
  14. package/es/core/LogViewer.js.map +1 -1
  15. package/es/filters/FilterEngine.d.ts +0 -1
  16. package/es/filters/FilterEngine.js +31 -26
  17. package/es/filters/FilterEngine.js.map +1 -1
  18. package/es/index.d.ts +7 -7
  19. package/es/index.js +3 -3
  20. package/es/index.js.map +1 -1
  21. package/es/renderers/DiffRenderer.d.ts +0 -1
  22. package/es/renderers/DiffRenderer.js +13 -3
  23. package/es/renderers/DiffRenderer.js.map +1 -1
  24. package/es/renderers/TimelineRenderer.d.ts +7 -3
  25. package/es/renderers/TimelineRenderer.js +56 -22
  26. package/es/renderers/TimelineRenderer.js.map +1 -1
  27. package/es/styles/index.d.ts +1 -5
  28. package/es/styles/index.js +167 -131
  29. package/es/styles/index.js.map +1 -1
  30. package/es/types/index.d.ts +4 -1
  31. package/es/types/index.js +1 -1
  32. package/es/types/index.js.map +1 -1
  33. package/es/utils/index.d.ts +1 -2
  34. package/es/utils/index.js +54 -6
  35. package/es/utils/index.js.map +1 -1
  36. package/esm/core/EventEmitter.js +13 -9
  37. package/esm/core/EventEmitter.js.map +1 -1
  38. package/esm/core/LogViewer.js +243 -64
  39. package/esm/core/LogViewer.js.map +1 -1
  40. package/esm/filters/FilterEngine.js +31 -26
  41. package/esm/filters/FilterEngine.js.map +1 -1
  42. package/esm/index.js +2 -2
  43. package/esm/index.js.map +1 -1
  44. package/esm/renderers/DiffRenderer.js +13 -3
  45. package/esm/renderers/DiffRenderer.js.map +1 -1
  46. package/esm/renderers/TimelineRenderer.js +56 -22
  47. package/esm/renderers/TimelineRenderer.js.map +1 -1
  48. package/esm/styles/index.js +167 -131
  49. package/esm/styles/index.js.map +1 -1
  50. package/esm/types/index.js +1 -1
  51. package/esm/types/index.js.map +1 -1
  52. package/esm/utils/index.js +54 -6
  53. package/esm/utils/index.js.map +1 -1
  54. package/lib/core/EventEmitter.cjs +13 -9
  55. package/lib/core/EventEmitter.cjs.map +1 -1
  56. package/{esm/core/EventEmitter.d.ts → lib/core/EventEmitter.d.cts} +0 -1
  57. package/lib/core/LogViewer.cjs +247 -68
  58. package/lib/core/LogViewer.cjs.map +1 -1
  59. package/{esm/core/LogViewer.d.ts → lib/core/LogViewer.d.cts} +14 -11
  60. package/lib/filters/FilterEngine.cjs +31 -26
  61. package/lib/filters/FilterEngine.cjs.map +1 -1
  62. package/lib/filters/{FilterEngine.d.ts → FilterEngine.d.cts} +0 -1
  63. package/lib/index.cjs +3 -3
  64. package/lib/index.cjs.map +1 -1
  65. package/{esm/index.d.ts → lib/index.d.cts} +7 -7
  66. package/lib/renderers/DiffRenderer.cjs +13 -3
  67. package/lib/renderers/DiffRenderer.cjs.map +1 -1
  68. package/lib/renderers/{DiffRenderer.d.ts → DiffRenderer.d.cts} +0 -1
  69. package/lib/renderers/TimelineRenderer.cjs +55 -21
  70. package/lib/renderers/TimelineRenderer.cjs.map +1 -1
  71. package/lib/renderers/{TimelineRenderer.d.ts → TimelineRenderer.d.cts} +7 -3
  72. package/lib/styles/index.cjs +167 -131
  73. package/lib/styles/index.cjs.map +1 -1
  74. package/{esm/styles/index.d.ts → lib/styles/index.d.cts} +1 -5
  75. package/lib/types/index.cjs +1 -1
  76. package/lib/types/index.cjs.map +1 -1
  77. package/{esm/types/index.d.ts → lib/types/index.d.cts} +4 -1
  78. package/lib/utils/index.cjs +54 -6
  79. package/lib/utils/index.cjs.map +1 -1
  80. package/{esm/utils/index.d.ts → lib/utils/index.d.cts} +1 -2
  81. package/package.json +15 -9
  82. package/es/core/EventEmitter.d.ts.map +0 -1
  83. package/es/core/LogViewer.d.ts.map +0 -1
  84. package/es/filters/FilterEngine.d.ts.map +0 -1
  85. package/es/index.d.ts.map +0 -1
  86. package/es/renderers/DiffRenderer.d.ts.map +0 -1
  87. package/es/renderers/TimelineRenderer.d.ts.map +0 -1
  88. package/es/styles/index.d.ts.map +0 -1
  89. package/es/types/index.d.ts.map +0 -1
  90. package/es/utils/index.d.ts.map +0 -1
  91. package/esm/core/EventEmitter.d.ts.map +0 -1
  92. package/esm/core/LogViewer.d.ts.map +0 -1
  93. package/esm/filters/FilterEngine.d.ts +0 -26
  94. package/esm/filters/FilterEngine.d.ts.map +0 -1
  95. package/esm/index.d.ts.map +0 -1
  96. package/esm/renderers/DiffRenderer.d.ts +0 -18
  97. package/esm/renderers/DiffRenderer.d.ts.map +0 -1
  98. package/esm/renderers/TimelineRenderer.d.ts +0 -22
  99. package/esm/renderers/TimelineRenderer.d.ts.map +0 -1
  100. package/esm/styles/index.d.ts.map +0 -1
  101. package/esm/types/index.d.ts.map +0 -1
  102. package/esm/utils/index.d.ts.map +0 -1
  103. package/lib/core/EventEmitter.d.ts +0 -11
  104. package/lib/core/LogViewer.d.ts +0 -46
  105. package/lib/index.d.ts +0 -26
  106. package/lib/styles/index.d.ts +0 -9
  107. package/lib/types/index.d.ts +0 -113
  108. package/lib/utils/index.d.ts +0 -18
@@ -2,7 +2,7 @@
2
2
  * ***********************************
3
3
  * @composy/log-viewer-core v0.0.1 *
4
4
  * Built with rollup *
5
- * Build time: 2024-08-17 11:33:32 *
5
+ * Build time: 2024-10-12 17:29:20 *
6
6
  * Build mode: production *
7
7
  * Minified: No *
8
8
  * ***********************************
@@ -20,54 +20,54 @@ function injectStyles() {
20
20
  const CSS_TEXT = `
21
21
  /* ===== CSS Variables ===== */
22
22
  .lv-root {
23
- --lv-bg: #ffffff;
24
- --lv-bg-secondary: #f7f8fa;
25
- --lv-bg-hover: #f0f3ff;
26
- --lv-border: #ebedf0;
27
- --lv-text: #1a1a2e;
28
- --lv-text-secondary: #666;
29
- --lv-text-muted: #999;
30
- --lv-primary: #4f6ef7;
31
- --lv-primary-light: #edf0ff;
32
- --lv-shadow: rgba(0, 0, 0, 0.04);
33
- --lv-timeline-line: #e0e0e0;
34
- --lv-timeline-dot: #4f6ef7;
35
- --lv-diff-add-bg: #f0fff4;
36
- --lv-diff-add-text: #22863a;
37
- --lv-diff-del-bg: #fff5f5;
38
- --lv-diff-del-text: #cb2431;
39
- --lv-anomaly-bg: #fff2e8;
40
- --lv-anomaly-border: #ffbb96;
41
- --lv-radius: 8px;
23
+ --lv-bg: var(--ld-white);
24
+ --lv-bg-secondary: var(--ld-bg-surface-soft);
25
+ --lv-bg-hover: var(--ld-primary-50);
26
+ --lv-border: var(--ld-border);
27
+ --lv-text: var(--ld-text-primary);
28
+ --lv-text-secondary: var(--ld-text-secondary);
29
+ --lv-text-muted: var(--ld-text-muted);
30
+ --lv-primary: var(--ld-primary-500);
31
+ --lv-primary-light: var(--ld-primary-50);
32
+ --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 4%, transparent);
33
+ --lv-timeline-line: var(--ld-border);
34
+ --lv-timeline-dot: var(--ld-primary-500);
35
+ --lv-diff-add-bg: var(--ld-success-50);
36
+ --lv-diff-add-text: var(--ld-success-700);
37
+ --lv-diff-del-bg: var(--ld-danger-50);
38
+ --lv-diff-del-text: var(--ld-danger-700);
39
+ --lv-anomaly-bg: var(--ld-warning-50);
40
+ --lv-anomaly-border: var(--ld-warning-300);
41
+ --lv-radius: var(--ld-radius-md);
42
42
  --lv-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
43
43
  --lv-font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;
44
44
  }
45
45
 
46
46
  .lv-root[data-theme="dark"] {
47
- --lv-bg: #1a1a2e;
48
- --lv-bg-secondary: #16213e;
49
- --lv-bg-hover: #1e2a4a;
50
- --lv-border: #2a2a4a;
51
- --lv-text: #e0e0e0;
52
- --lv-text-secondary: #a0a0b0;
53
- --lv-text-muted: #666680;
54
- --lv-primary: #6b85f9;
55
- --lv-primary-light: #252545;
56
- --lv-shadow: rgba(0, 0, 0, 0.2);
57
- --lv-timeline-line: #333355;
58
- --lv-timeline-dot: #6b85f9;
59
- --lv-diff-add-bg: #0d2818;
60
- --lv-diff-add-text: #85e89d;
61
- --lv-diff-del-bg: #2d1214;
62
- --lv-diff-del-text: #f97583;
63
- --lv-anomaly-bg: #2d1a0a;
64
- --lv-anomaly-border: #8b5e3c;
47
+ --lv-bg: var(--ld-bg-surface);
48
+ --lv-bg-secondary: var(--ld-bg-surface-soft);
49
+ --lv-bg-hover: var(--ld-primary-50);
50
+ --lv-border: var(--ld-border-strong);
51
+ --lv-text: var(--ld-text-primary);
52
+ --lv-text-secondary: var(--ld-text-secondary);
53
+ --lv-text-muted: var(--ld-text-muted);
54
+ --lv-primary: var(--ld-primary-400);
55
+ --lv-primary-light: var(--ld-primary-50);
56
+ --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 20%, transparent);
57
+ --lv-timeline-line: var(--ld-border-strong);
58
+ --lv-timeline-dot: var(--ld-primary-400);
59
+ --lv-diff-add-bg: var(--ld-success-50);
60
+ --lv-diff-add-text: var(--ld-success-700);
61
+ --lv-diff-del-bg: var(--ld-danger-50);
62
+ --lv-diff-del-text: var(--ld-danger-700);
63
+ --lv-anomaly-bg: var(--ld-warning-50);
64
+ --lv-anomaly-border: var(--ld-warning-700);
65
65
  }
66
66
 
67
67
  /* ===== Root ===== */
68
68
  .lv-root {
69
69
  font-family: var(--lv-font);
70
- font-size: 14px;
70
+ font-size: var(--ld-px-14);
71
71
  color: var(--lv-text);
72
72
  background: var(--lv-bg);
73
73
  line-height: 1.6;
@@ -77,38 +77,38 @@ const CSS_TEXT = `
77
77
  .lv-filter {
78
78
  display: flex;
79
79
  flex-wrap: wrap;
80
- gap: 10px;
81
- padding: 16px;
80
+ gap: var(--ld-px-10);
81
+ padding: var(--ld-px-16);
82
82
  background: var(--lv-bg);
83
- border: 1px solid var(--lv-border);
83
+ border: var(--ld-px-1) solid var(--lv-border);
84
84
  border-radius: var(--lv-radius);
85
- margin-bottom: 16px;
85
+ margin-bottom: var(--ld-px-16);
86
86
  align-items: center;
87
87
  }
88
88
 
89
89
  .lv-filter-item {
90
90
  display: flex;
91
91
  align-items: center;
92
- gap: 6px;
93
- font-size: 13px;
92
+ gap: var(--ld-px-6);
93
+ font-size: var(--ld-px-13);
94
94
  }
95
95
 
96
96
  .lv-filter-label {
97
97
  color: var(--lv-text-secondary);
98
- font-size: 12px;
98
+ font-size: var(--ld-px-12);
99
99
  white-space: nowrap;
100
100
  }
101
101
 
102
102
  .lv-filter-input {
103
- padding: 5px 10px;
104
- border: 1px solid var(--lv-border);
105
- border-radius: 6px;
106
- font-size: 13px;
103
+ padding: var(--ld-px-5) var(--ld-px-10);
104
+ border: var(--ld-px-1) solid var(--lv-border);
105
+ border-radius: var(--ld-px-6);
106
+ font-size: var(--ld-px-13);
107
107
  background: var(--lv-bg);
108
108
  color: var(--lv-text);
109
109
  outline: none;
110
110
  transition: border-color 0.2s;
111
- min-width: 120px;
111
+ min-width: var(--ld-px-120);
112
112
  }
113
113
 
114
114
  .lv-filter-input:focus {
@@ -116,10 +116,10 @@ const CSS_TEXT = `
116
116
  }
117
117
 
118
118
  .lv-filter-select {
119
- padding: 5px 10px;
120
- border: 1px solid var(--lv-border);
121
- border-radius: 6px;
122
- font-size: 13px;
119
+ padding: var(--ld-px-5) var(--ld-px-10);
120
+ border: var(--ld-px-1) solid var(--lv-border);
121
+ border-radius: var(--ld-px-6);
122
+ font-size: var(--ld-px-13);
123
123
  background: var(--lv-bg);
124
124
  color: var(--lv-text);
125
125
  outline: none;
@@ -129,11 +129,11 @@ const CSS_TEXT = `
129
129
  .lv-filter-btn {
130
130
  display: inline-flex;
131
131
  align-items: center;
132
- gap: 4px;
133
- padding: 5px 14px;
134
- font-size: 13px;
135
- border: 1px solid var(--lv-border);
136
- border-radius: 6px;
132
+ gap: var(--ld-px-4);
133
+ padding: var(--ld-px-5) var(--ld-px-14);
134
+ font-size: var(--ld-px-13);
135
+ border: var(--ld-px-1) solid var(--lv-border);
136
+ border-radius: var(--ld-px-6);
137
137
  background: var(--lv-bg);
138
138
  color: var(--lv-text);
139
139
  cursor: pointer;
@@ -148,7 +148,7 @@ const CSS_TEXT = `
148
148
  .lv-filter-btn--primary {
149
149
  background: var(--lv-primary);
150
150
  border-color: var(--lv-primary);
151
- color: #fff;
151
+ color: var(--ld-white);
152
152
  }
153
153
 
154
154
  .lv-filter-btn--primary:hover {
@@ -158,135 +158,171 @@ const CSS_TEXT = `
158
158
  /* ===== Timeline ===== */
159
159
  .lv-timeline {
160
160
  position: relative;
161
- padding-left: 28px;
161
+ padding-left: var(--ld-px-28);
162
162
  }
163
163
 
164
164
  .lv-timeline::before {
165
165
  content: '';
166
166
  position: absolute;
167
- left: 9px;
167
+ left: var(--ld-px-9);
168
168
  top: 0;
169
169
  bottom: 0;
170
- width: 2px;
170
+ width: var(--ld-px-2);
171
171
  background: var(--lv-timeline-line);
172
172
  }
173
173
 
174
174
  .lv-timeline-item {
175
175
  position: relative;
176
- padding: 0 0 20px 0;
176
+ padding: 0 0 var(--ld-px-20) 0;
177
177
  }
178
178
 
179
179
  .lv-timeline-dot {
180
180
  position: absolute;
181
- left: -25px;
182
- top: 6px;
183
- width: 12px;
184
- height: 12px;
181
+ left: calc(-1 * var(--ld-px-25));
182
+ top: var(--ld-px-6);
183
+ width: var(--ld-px-12);
184
+ height: var(--ld-px-12);
185
185
  border-radius: 50%;
186
186
  background: var(--lv-bg);
187
- border: 2px solid var(--lv-timeline-dot);
187
+ border: var(--ld-px-2) solid var(--lv-timeline-dot);
188
188
  z-index: 1;
189
189
  }
190
190
 
191
191
  .lv-timeline-dot--anomaly {
192
- border-color: #ff4d4f;
193
- background: #fff1f0;
192
+ border-color: var(--ld-danger-500);
193
+ background: var(--ld-danger-50);
194
194
  }
195
195
 
196
196
  .lv-timeline-card {
197
197
  background: var(--lv-bg);
198
- border: 1px solid var(--lv-border);
198
+ border: var(--ld-px-1) solid var(--lv-border);
199
199
  border-radius: var(--lv-radius);
200
- padding: 14px 18px;
200
+ padding: var(--ld-px-14) var(--ld-px-18);
201
201
  cursor: pointer;
202
202
  transition: all 0.2s;
203
- box-shadow: 0 1px 3px var(--lv-shadow);
203
+ box-shadow: 0 var(--ld-px-1) var(--ld-px-3) var(--lv-shadow);
204
204
  }
205
205
 
206
206
  .lv-timeline-card:hover {
207
207
  border-color: var(--lv-primary);
208
- box-shadow: 0 2px 8px var(--lv-shadow);
208
+ box-shadow: 0 var(--ld-px-2) var(--ld-px-8) var(--lv-shadow);
209
209
  }
210
210
 
211
211
  .lv-timeline-card--anomaly {
212
- border-left: 3px solid var(--lv-anomaly-border);
212
+ border-left: var(--ld-px-3) solid var(--lv-anomaly-border);
213
213
  background: var(--lv-anomaly-bg);
214
214
  }
215
215
 
216
216
  .lv-timeline-header {
217
217
  display: flex;
218
218
  align-items: center;
219
- gap: 10px;
219
+ gap: var(--ld-px-10);
220
220
  flex-wrap: wrap;
221
- margin-bottom: 4px;
221
+ margin-bottom: var(--ld-px-4);
222
222
  }
223
223
 
224
224
  .lv-timeline-time {
225
- font-size: 12px;
225
+ font-size: var(--ld-px-12);
226
226
  color: var(--lv-text-muted);
227
227
  font-family: var(--lv-font-mono);
228
228
  }
229
229
 
230
230
  .lv-timeline-user {
231
231
  font-weight: 600;
232
- font-size: 14px;
232
+ font-size: var(--ld-px-14);
233
233
  }
234
234
 
235
235
  .lv-action-tag {
236
236
  display: inline-block;
237
- padding: 1px 8px;
238
- font-size: 12px;
239
- border-radius: 4px;
237
+ padding: var(--ld-px-1) var(--ld-px-8);
238
+ font-size: var(--ld-px-12);
239
+ border-radius: var(--ld-px-4);
240
240
  font-weight: 500;
241
- color: #fff;
241
+ color: var(--ld-white);
242
+ }
243
+
244
+ .lv-action-tag--create,
245
+ .lv-action-tag--approve {
246
+ background: var(--ld-success-500);
247
+ }
248
+
249
+ .lv-action-tag--update,
250
+ .lv-action-tag--login {
251
+ background: var(--ld-primary-500);
252
+ }
253
+
254
+ .lv-action-tag--delete,
255
+ .lv-action-tag--reject {
256
+ background: var(--ld-danger-500);
257
+ }
258
+
259
+ .lv-action-tag--query,
260
+ .lv-action-tag--other {
261
+ background: var(--ld-text-secondary);
262
+ }
263
+
264
+ .lv-action-tag--logout {
265
+ background: var(--ld-primary-700);
266
+ }
267
+
268
+ .lv-action-tag--export {
269
+ background: var(--ld-warning-500);
270
+ }
271
+
272
+ .lv-action-tag--import {
273
+ background: var(--ld-success-500);
242
274
  }
243
275
 
244
276
  .lv-timeline-module {
245
- font-size: 12px;
277
+ font-size: var(--ld-px-12);
246
278
  color: var(--lv-text-secondary);
247
279
  background: var(--lv-bg-secondary);
248
- padding: 1px 8px;
249
- border-radius: 4px;
280
+ padding: var(--ld-px-1) var(--ld-px-8);
281
+ border-radius: var(--ld-px-4);
250
282
  }
251
283
 
252
284
  .lv-timeline-ip {
253
- font-size: 12px;
285
+ font-size: var(--ld-px-12);
254
286
  color: var(--lv-text-muted);
255
287
  font-family: var(--lv-font-mono);
256
288
  }
257
289
 
258
290
  .lv-anomaly-badge {
259
- font-size: 11px;
260
- padding: 1px 6px;
261
- border-radius: 3px;
262
- background: #fff2e8;
263
- color: #d46b08;
264
- border: 1px solid #ffd591;
291
+ font-size: var(--ld-px-11);
292
+ padding: var(--ld-px-1) var(--ld-px-6);
293
+ border-radius: var(--ld-px-3);
294
+ background: var(--ld-warning-50);
295
+ color: var(--ld-warning-700);
296
+ border: var(--ld-px-1) solid var(--ld-warning-300);
265
297
  }
266
298
 
267
299
  .lv-timeline-detail {
268
- font-size: 13px;
300
+ font-size: var(--ld-px-13);
269
301
  color: var(--lv-text-secondary);
270
- margin-top: 6px;
302
+ margin-top: var(--ld-px-6);
271
303
  }
272
304
 
273
305
  .lv-timeline-expand-hint {
274
- font-size: 12px;
306
+ border: 0;
307
+ padding: 0;
308
+ background: transparent;
309
+ font: inherit;
310
+ font-size: var(--ld-px-12);
275
311
  color: var(--lv-primary);
276
- margin-top: 6px;
312
+ margin-top: var(--ld-px-6);
277
313
  cursor: pointer;
278
314
  }
279
315
 
280
316
  /* ===== Detail Panel ===== */
281
317
  .lv-detail {
282
- margin-top: 12px;
283
- padding-top: 12px;
284
- border-top: 1px dashed var(--lv-border);
318
+ margin-top: var(--ld-px-12);
319
+ padding-top: var(--ld-px-12);
320
+ border-top: var(--ld-px-1) dashed var(--lv-border);
285
321
  animation: lv-slide-down 0.2s ease;
286
322
  }
287
323
 
288
324
  @keyframes lv-slide-down {
289
- from { opacity: 0; transform: translateY(-8px); }
325
+ from { opacity: 0; transform: translateY(calc(-1 * var(--ld-px-8))); }
290
326
  to { opacity: 1; transform: translateY(0); }
291
327
  }
292
328
 
@@ -294,25 +330,25 @@ const CSS_TEXT = `
294
330
  .lv-diff-table {
295
331
  width: 100%;
296
332
  border-collapse: collapse;
297
- font-size: 13px;
298
- border: 1px solid var(--lv-border);
299
- border-radius: 6px;
333
+ font-size: var(--ld-px-13);
334
+ border: var(--ld-px-1) solid var(--lv-border);
335
+ border-radius: var(--ld-px-6);
300
336
  overflow: hidden;
301
337
  }
302
338
 
303
339
  .lv-diff-table th {
304
340
  background: var(--lv-bg-secondary);
305
- padding: 8px 12px;
341
+ padding: var(--ld-px-8) var(--ld-px-12);
306
342
  text-align: left;
307
343
  font-weight: 600;
308
- font-size: 12px;
344
+ font-size: var(--ld-px-12);
309
345
  color: var(--lv-text-secondary);
310
- border-bottom: 1px solid var(--lv-border);
346
+ border-bottom: var(--ld-px-1) solid var(--lv-border);
311
347
  }
312
348
 
313
349
  .lv-diff-table td {
314
- padding: 8px 12px;
315
- border-bottom: 1px solid var(--lv-border);
350
+ padding: var(--ld-px-8) var(--ld-px-12);
351
+ border-bottom: var(--ld-px-1) solid var(--lv-border);
316
352
  vertical-align: top;
317
353
  }
318
354
 
@@ -325,23 +361,23 @@ const CSS_TEXT = `
325
361
  color: var(--lv-diff-del-text);
326
362
  text-decoration: line-through;
327
363
  font-family: var(--lv-font-mono);
328
- font-size: 12px;
364
+ font-size: var(--ld-px-12);
329
365
  }
330
366
 
331
367
  .lv-diff-new {
332
368
  background: var(--lv-diff-add-bg);
333
369
  color: var(--lv-diff-add-text);
334
370
  font-family: var(--lv-font-mono);
335
- font-size: 12px;
371
+ font-size: var(--ld-px-12);
336
372
  }
337
373
 
338
374
  /* ===== Metadata ===== */
339
375
  .lv-metadata {
340
- margin-top: 10px;
376
+ margin-top: var(--ld-px-10);
341
377
  background: var(--lv-bg-secondary);
342
- border-radius: 6px;
343
- padding: 10px 14px;
344
- font-size: 12px;
378
+ border-radius: var(--ld-px-6);
379
+ padding: var(--ld-px-10) var(--ld-px-14);
380
+ font-size: var(--ld-px-12);
345
381
  font-family: var(--lv-font-mono);
346
382
  white-space: pre-wrap;
347
383
  word-break: break-all;
@@ -353,21 +389,21 @@ const CSS_TEXT = `
353
389
  display: flex;
354
390
  align-items: center;
355
391
  justify-content: center;
356
- gap: 6px;
357
- padding: 16px 0;
392
+ gap: var(--ld-px-6);
393
+ padding: var(--ld-px-16) 0;
358
394
  }
359
395
 
360
396
  .lv-pagination-btn {
361
397
  display: inline-flex;
362
398
  align-items: center;
363
399
  justify-content: center;
364
- width: 32px;
365
- height: 32px;
366
- border: 1px solid var(--lv-border);
367
- border-radius: 6px;
400
+ width: var(--ld-px-32);
401
+ height: var(--ld-px-32);
402
+ border: var(--ld-px-1) solid var(--lv-border);
403
+ border-radius: var(--ld-px-6);
368
404
  background: var(--lv-bg);
369
405
  color: var(--lv-text);
370
- font-size: 13px;
406
+ font-size: var(--ld-px-13);
371
407
  cursor: pointer;
372
408
  transition: all 0.15s;
373
409
  }
@@ -380,7 +416,7 @@ const CSS_TEXT = `
380
416
  .lv-pagination-btn--active {
381
417
  background: var(--lv-primary);
382
418
  border-color: var(--lv-primary);
383
- color: #fff;
419
+ color: var(--ld-white);
384
420
  }
385
421
 
386
422
  .lv-pagination-btn:disabled {
@@ -389,22 +425,22 @@ const CSS_TEXT = `
389
425
  }
390
426
 
391
427
  .lv-pagination-info {
392
- font-size: 13px;
428
+ font-size: var(--ld-px-13);
393
429
  color: var(--lv-text-secondary);
394
- margin: 0 8px;
430
+ margin: 0 var(--ld-px-8);
395
431
  }
396
432
 
397
433
  /* ===== Empty state ===== */
398
434
  .lv-empty {
399
435
  text-align: center;
400
- padding: 48px 16px;
436
+ padding: var(--ld-px-48) var(--ld-px-16);
401
437
  color: var(--lv-text-muted);
402
- font-size: 14px;
438
+ font-size: var(--ld-px-14);
403
439
  }
404
440
 
405
441
  .lv-empty-icon {
406
- font-size: 48px;
407
- margin-bottom: 12px;
442
+ font-size: var(--ld-px-48);
443
+ margin-bottom: var(--ld-px-12);
408
444
  opacity: 0.3;
409
445
  }
410
446
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\n * 样式注入 - 通过 CSS 变量支持亮色/暗色主题\n */\n\nconst STYLE_ID = 'ldesign-log-viewer-styles'\n\n/**\n * injectStyles - inject Styles function\n * @returns 返回值说明\n */\nexport function injectStyles(): void {\n if (typeof document === 'undefined') return\n if (document.getElementById(STYLE_ID)) return\n\n const style = document.createElement('style')\n style.id = STYLE_ID\n style.textContent = CSS_TEXT\n document.head.appendChild(style)\n}\n\nconst CSS_TEXT = /* css */ `\n/* ===== CSS Variables ===== */\n.lv-root {\n --lv-bg: #ffffff;\n --lv-bg-secondary: #f7f8fa;\n --lv-bg-hover: #f0f3ff;\n --lv-border: #ebedf0;\n --lv-text: #1a1a2e;\n --lv-text-secondary: #666;\n --lv-text-muted: #999;\n --lv-primary: #4f6ef7;\n --lv-primary-light: #edf0ff;\n --lv-shadow: rgba(0, 0, 0, 0.04);\n --lv-timeline-line: #e0e0e0;\n --lv-timeline-dot: #4f6ef7;\n --lv-diff-add-bg: #f0fff4;\n --lv-diff-add-text: #22863a;\n --lv-diff-del-bg: #fff5f5;\n --lv-diff-del-text: #cb2431;\n --lv-anomaly-bg: #fff2e8;\n --lv-anomaly-border: #ffbb96;\n --lv-radius: 8px;\n --lv-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;\n --lv-font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;\n}\n\n.lv-root[data-theme=\"dark\"] {\n --lv-bg: #1a1a2e;\n --lv-bg-secondary: #16213e;\n --lv-bg-hover: #1e2a4a;\n --lv-border: #2a2a4a;\n --lv-text: #e0e0e0;\n --lv-text-secondary: #a0a0b0;\n --lv-text-muted: #666680;\n --lv-primary: #6b85f9;\n --lv-primary-light: #252545;\n --lv-shadow: rgba(0, 0, 0, 0.2);\n --lv-timeline-line: #333355;\n --lv-timeline-dot: #6b85f9;\n --lv-diff-add-bg: #0d2818;\n --lv-diff-add-text: #85e89d;\n --lv-diff-del-bg: #2d1214;\n --lv-diff-del-text: #f97583;\n --lv-anomaly-bg: #2d1a0a;\n --lv-anomaly-border: #8b5e3c;\n}\n\n/* ===== Root ===== */\n.lv-root {\n font-family: var(--lv-font);\n font-size: 14px;\n color: var(--lv-text);\n background: var(--lv-bg);\n line-height: 1.6;\n}\n\n/* ===== Filter Bar ===== */\n.lv-filter {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px;\n background: var(--lv-bg);\n border: 1px solid var(--lv-border);\n border-radius: var(--lv-radius);\n margin-bottom: 16px;\n align-items: center;\n}\n\n.lv-filter-item {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n}\n\n.lv-filter-label {\n color: var(--lv-text-secondary);\n font-size: 12px;\n white-space: nowrap;\n}\n\n.lv-filter-input {\n padding: 5px 10px;\n border: 1px solid var(--lv-border);\n border-radius: 6px;\n font-size: 13px;\n background: var(--lv-bg);\n color: var(--lv-text);\n outline: none;\n transition: border-color 0.2s;\n min-width: 120px;\n}\n\n.lv-filter-input:focus {\n border-color: var(--lv-primary);\n}\n\n.lv-filter-select {\n padding: 5px 10px;\n border: 1px solid var(--lv-border);\n border-radius: 6px;\n font-size: 13px;\n background: var(--lv-bg);\n color: var(--lv-text);\n outline: none;\n cursor: pointer;\n}\n\n.lv-filter-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 5px 14px;\n font-size: 13px;\n border: 1px solid var(--lv-border);\n border-radius: 6px;\n background: var(--lv-bg);\n color: var(--lv-text);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.lv-filter-btn:hover {\n border-color: var(--lv-primary);\n color: var(--lv-primary);\n}\n\n.lv-filter-btn--primary {\n background: var(--lv-primary);\n border-color: var(--lv-primary);\n color: #fff;\n}\n\n.lv-filter-btn--primary:hover {\n opacity: 0.85;\n}\n\n/* ===== Timeline ===== */\n.lv-timeline {\n position: relative;\n padding-left: 28px;\n}\n\n.lv-timeline::before {\n content: '';\n position: absolute;\n left: 9px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: var(--lv-timeline-line);\n}\n\n.lv-timeline-item {\n position: relative;\n padding: 0 0 20px 0;\n}\n\n.lv-timeline-dot {\n position: absolute;\n left: -25px;\n top: 6px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--lv-bg);\n border: 2px solid var(--lv-timeline-dot);\n z-index: 1;\n}\n\n.lv-timeline-dot--anomaly {\n border-color: #ff4d4f;\n background: #fff1f0;\n}\n\n.lv-timeline-card {\n background: var(--lv-bg);\n border: 1px solid var(--lv-border);\n border-radius: var(--lv-radius);\n padding: 14px 18px;\n cursor: pointer;\n transition: all 0.2s;\n box-shadow: 0 1px 3px var(--lv-shadow);\n}\n\n.lv-timeline-card:hover {\n border-color: var(--lv-primary);\n box-shadow: 0 2px 8px var(--lv-shadow);\n}\n\n.lv-timeline-card--anomaly {\n border-left: 3px solid var(--lv-anomaly-border);\n background: var(--lv-anomaly-bg);\n}\n\n.lv-timeline-header {\n display: flex;\n align-items: center;\n gap: 10px;\n flex-wrap: wrap;\n margin-bottom: 4px;\n}\n\n.lv-timeline-time {\n font-size: 12px;\n color: var(--lv-text-muted);\n font-family: var(--lv-font-mono);\n}\n\n.lv-timeline-user {\n font-weight: 600;\n font-size: 14px;\n}\n\n.lv-action-tag {\n display: inline-block;\n padding: 1px 8px;\n font-size: 12px;\n border-radius: 4px;\n font-weight: 500;\n color: #fff;\n}\n\n.lv-timeline-module {\n font-size: 12px;\n color: var(--lv-text-secondary);\n background: var(--lv-bg-secondary);\n padding: 1px 8px;\n border-radius: 4px;\n}\n\n.lv-timeline-ip {\n font-size: 12px;\n color: var(--lv-text-muted);\n font-family: var(--lv-font-mono);\n}\n\n.lv-anomaly-badge {\n font-size: 11px;\n padding: 1px 6px;\n border-radius: 3px;\n background: #fff2e8;\n color: #d46b08;\n border: 1px solid #ffd591;\n}\n\n.lv-timeline-detail {\n font-size: 13px;\n color: var(--lv-text-secondary);\n margin-top: 6px;\n}\n\n.lv-timeline-expand-hint {\n font-size: 12px;\n color: var(--lv-primary);\n margin-top: 6px;\n cursor: pointer;\n}\n\n/* ===== Detail Panel ===== */\n.lv-detail {\n margin-top: 12px;\n padding-top: 12px;\n border-top: 1px dashed var(--lv-border);\n animation: lv-slide-down 0.2s ease;\n}\n\n@keyframes lv-slide-down {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n/* ===== Diff Table ===== */\n.lv-diff-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n border: 1px solid var(--lv-border);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.lv-diff-table th {\n background: var(--lv-bg-secondary);\n padding: 8px 12px;\n text-align: left;\n font-weight: 600;\n font-size: 12px;\n color: var(--lv-text-secondary);\n border-bottom: 1px solid var(--lv-border);\n}\n\n.lv-diff-table td {\n padding: 8px 12px;\n border-bottom: 1px solid var(--lv-border);\n vertical-align: top;\n}\n\n.lv-diff-table tr:last-child td {\n border-bottom: none;\n}\n\n.lv-diff-old {\n background: var(--lv-diff-del-bg);\n color: var(--lv-diff-del-text);\n text-decoration: line-through;\n font-family: var(--lv-font-mono);\n font-size: 12px;\n}\n\n.lv-diff-new {\n background: var(--lv-diff-add-bg);\n color: var(--lv-diff-add-text);\n font-family: var(--lv-font-mono);\n font-size: 12px;\n}\n\n/* ===== Metadata ===== */\n.lv-metadata {\n margin-top: 10px;\n background: var(--lv-bg-secondary);\n border-radius: 6px;\n padding: 10px 14px;\n font-size: 12px;\n font-family: var(--lv-font-mono);\n white-space: pre-wrap;\n word-break: break-all;\n color: var(--lv-text-secondary);\n}\n\n/* ===== Pagination ===== */\n.lv-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 16px 0;\n}\n\n.lv-pagination-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: 1px solid var(--lv-border);\n border-radius: 6px;\n background: var(--lv-bg);\n color: var(--lv-text);\n font-size: 13px;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.lv-pagination-btn:hover {\n border-color: var(--lv-primary);\n color: var(--lv-primary);\n}\n\n.lv-pagination-btn--active {\n background: var(--lv-primary);\n border-color: var(--lv-primary);\n color: #fff;\n}\n\n.lv-pagination-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.lv-pagination-info {\n font-size: 13px;\n color: var(--lv-text-secondary);\n margin: 0 8px;\n}\n\n/* ===== Empty state ===== */\n.lv-empty {\n text-align: center;\n padding: 48px 16px;\n color: var(--lv-text-muted);\n font-size: 14px;\n}\n\n.lv-empty-icon {\n font-size: 48px;\n margin-bottom: 12px;\n opacity: 0.3;\n}\n`\n"],"mappings":";;;;;;;;;;AAIA,MAAM,WAAW;AAMV,SAAS,eAAqB;CACnC,IAAI,OAAO,aAAa,aAAa;CACrC,IAAI,SAAS,eAAe,QAAQ,GAAG;CAEvC,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,KAAK;CACX,MAAM,cAAc;CACpB,SAAS,KAAK,YAAY,KAAK;AACjC;AAEA,MAAM,WAAqB"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["/**\r\n * 样式注入 - 通过 CSS 变量支持亮色/暗色主题\r\n */\r\n\r\nconst STYLE_ID = 'ldesign-log-viewer-styles'\r\n\r\n/** injectStyles - inject Styles function. */\r\nexport function injectStyles(): void {\r\n if (typeof document === 'undefined') return\r\n if (document.getElementById(STYLE_ID)) return\r\n\r\n const style = document.createElement('style')\r\n style.id = STYLE_ID\r\n style.textContent = CSS_TEXT\r\n document.head.appendChild(style)\r\n}\r\n\r\nconst CSS_TEXT = /* css */ `\r\n/* ===== CSS Variables ===== */\r\n.lv-root {\r\n --lv-bg: var(--ld-white);\r\n --lv-bg-secondary: var(--ld-bg-surface-soft);\r\n --lv-bg-hover: var(--ld-primary-50);\r\n --lv-border: var(--ld-border);\r\n --lv-text: var(--ld-text-primary);\r\n --lv-text-secondary: var(--ld-text-secondary);\r\n --lv-text-muted: var(--ld-text-muted);\r\n --lv-primary: var(--ld-primary-500);\r\n --lv-primary-light: var(--ld-primary-50);\r\n --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 4%, transparent);\r\n --lv-timeline-line: var(--ld-border);\r\n --lv-timeline-dot: var(--ld-primary-500);\r\n --lv-diff-add-bg: var(--ld-success-50);\r\n --lv-diff-add-text: var(--ld-success-700);\r\n --lv-diff-del-bg: var(--ld-danger-50);\r\n --lv-diff-del-text: var(--ld-danger-700);\r\n --lv-anomaly-bg: var(--ld-warning-50);\r\n --lv-anomaly-border: var(--ld-warning-300);\r\n --lv-radius: var(--ld-radius-md);\r\n --lv-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;\r\n --lv-font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;\r\n}\r\n\r\n.lv-root[data-theme=\"dark\"] {\r\n --lv-bg: var(--ld-bg-surface);\r\n --lv-bg-secondary: var(--ld-bg-surface-soft);\r\n --lv-bg-hover: var(--ld-primary-50);\r\n --lv-border: var(--ld-border-strong);\r\n --lv-text: var(--ld-text-primary);\r\n --lv-text-secondary: var(--ld-text-secondary);\r\n --lv-text-muted: var(--ld-text-muted);\r\n --lv-primary: var(--ld-primary-400);\r\n --lv-primary-light: var(--ld-primary-50);\r\n --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 20%, transparent);\r\n --lv-timeline-line: var(--ld-border-strong);\r\n --lv-timeline-dot: var(--ld-primary-400);\r\n --lv-diff-add-bg: var(--ld-success-50);\r\n --lv-diff-add-text: var(--ld-success-700);\r\n --lv-diff-del-bg: var(--ld-danger-50);\r\n --lv-diff-del-text: var(--ld-danger-700);\r\n --lv-anomaly-bg: var(--ld-warning-50);\r\n --lv-anomaly-border: var(--ld-warning-700);\r\n}\r\n\r\n/* ===== Root ===== */\r\n.lv-root {\r\n font-family: var(--lv-font);\r\n font-size: var(--ld-px-14);\r\n color: var(--lv-text);\r\n background: var(--lv-bg);\r\n line-height: 1.6;\r\n}\r\n\r\n/* ===== Filter Bar ===== */\r\n.lv-filter {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: var(--ld-px-10);\r\n padding: var(--ld-px-16);\r\n background: var(--lv-bg);\r\n border: var(--ld-px-1) solid var(--lv-border);\r\n border-radius: var(--lv-radius);\r\n margin-bottom: var(--ld-px-16);\r\n align-items: center;\r\n}\r\n\r\n.lv-filter-item {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--ld-px-6);\r\n font-size: var(--ld-px-13);\r\n}\r\n\r\n.lv-filter-label {\r\n color: var(--lv-text-secondary);\r\n font-size: var(--ld-px-12);\r\n white-space: nowrap;\r\n}\r\n\r\n.lv-filter-input {\r\n padding: var(--ld-px-5) var(--ld-px-10);\r\n border: var(--ld-px-1) solid var(--lv-border);\r\n border-radius: var(--ld-px-6);\r\n font-size: var(--ld-px-13);\r\n background: var(--lv-bg);\r\n color: var(--lv-text);\r\n outline: none;\r\n transition: border-color 0.2s;\r\n min-width: var(--ld-px-120);\r\n}\r\n\r\n.lv-filter-input:focus {\r\n border-color: var(--lv-primary);\r\n}\r\n\r\n.lv-filter-select {\r\n padding: var(--ld-px-5) var(--ld-px-10);\r\n border: var(--ld-px-1) solid var(--lv-border);\r\n border-radius: var(--ld-px-6);\r\n font-size: var(--ld-px-13);\r\n background: var(--lv-bg);\r\n color: var(--lv-text);\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\n.lv-filter-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--ld-px-4);\r\n padding: var(--ld-px-5) var(--ld-px-14);\r\n font-size: var(--ld-px-13);\r\n border: var(--ld-px-1) solid var(--lv-border);\r\n border-radius: var(--ld-px-6);\r\n background: var(--lv-bg);\r\n color: var(--lv-text);\r\n cursor: pointer;\r\n transition: all 0.15s;\r\n}\r\n\r\n.lv-filter-btn:hover {\r\n border-color: var(--lv-primary);\r\n color: var(--lv-primary);\r\n}\r\n\r\n.lv-filter-btn--primary {\r\n background: var(--lv-primary);\r\n border-color: var(--lv-primary);\r\n color: var(--ld-white);\r\n}\r\n\r\n.lv-filter-btn--primary:hover {\r\n opacity: 0.85;\r\n}\r\n\r\n/* ===== Timeline ===== */\r\n.lv-timeline {\r\n position: relative;\r\n padding-left: var(--ld-px-28);\r\n}\r\n\r\n.lv-timeline::before {\r\n content: '';\r\n position: absolute;\r\n left: var(--ld-px-9);\r\n top: 0;\r\n bottom: 0;\r\n width: var(--ld-px-2);\r\n background: var(--lv-timeline-line);\r\n}\r\n\r\n.lv-timeline-item {\r\n position: relative;\r\n padding: 0 0 var(--ld-px-20) 0;\r\n}\r\n\r\n.lv-timeline-dot {\r\n position: absolute;\r\n left: calc(-1 * var(--ld-px-25));\r\n top: var(--ld-px-6);\r\n width: var(--ld-px-12);\r\n height: var(--ld-px-12);\r\n border-radius: 50%;\r\n background: var(--lv-bg);\r\n border: var(--ld-px-2) solid var(--lv-timeline-dot);\r\n z-index: 1;\r\n}\r\n\r\n.lv-timeline-dot--anomaly {\r\n border-color: var(--ld-danger-500);\r\n background: var(--ld-danger-50);\r\n}\r\n\r\n.lv-timeline-card {\r\n background: var(--lv-bg);\r\n border: var(--ld-px-1) solid var(--lv-border);\r\n border-radius: var(--lv-radius);\r\n padding: var(--ld-px-14) var(--ld-px-18);\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n box-shadow: 0 var(--ld-px-1) var(--ld-px-3) var(--lv-shadow);\r\n}\r\n\r\n.lv-timeline-card:hover {\r\n border-color: var(--lv-primary);\r\n box-shadow: 0 var(--ld-px-2) var(--ld-px-8) var(--lv-shadow);\r\n}\r\n\r\n.lv-timeline-card--anomaly {\r\n border-left: var(--ld-px-3) solid var(--lv-anomaly-border);\r\n background: var(--lv-anomaly-bg);\r\n}\r\n\r\n.lv-timeline-header {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--ld-px-10);\r\n flex-wrap: wrap;\r\n margin-bottom: var(--ld-px-4);\r\n}\r\n\r\n.lv-timeline-time {\r\n font-size: var(--ld-px-12);\r\n color: var(--lv-text-muted);\r\n font-family: var(--lv-font-mono);\r\n}\r\n\r\n.lv-timeline-user {\r\n font-weight: 600;\r\n font-size: var(--ld-px-14);\r\n}\r\n\r\n.lv-action-tag {\r\n display: inline-block;\r\n padding: var(--ld-px-1) var(--ld-px-8);\r\n font-size: var(--ld-px-12);\r\n border-radius: var(--ld-px-4);\r\n font-weight: 500;\r\n color: var(--ld-white);\r\n}\r\n\r\n.lv-action-tag--create,\r\n.lv-action-tag--approve {\r\n background: var(--ld-success-500);\r\n}\r\n\r\n.lv-action-tag--update,\r\n.lv-action-tag--login {\r\n background: var(--ld-primary-500);\r\n}\r\n\r\n.lv-action-tag--delete,\r\n.lv-action-tag--reject {\r\n background: var(--ld-danger-500);\r\n}\r\n\r\n.lv-action-tag--query,\r\n.lv-action-tag--other {\r\n background: var(--ld-text-secondary);\r\n}\r\n\r\n.lv-action-tag--logout {\r\n background: var(--ld-primary-700);\r\n}\r\n\r\n.lv-action-tag--export {\r\n background: var(--ld-warning-500);\r\n}\r\n\r\n.lv-action-tag--import {\r\n background: var(--ld-success-500);\r\n}\r\n\r\n.lv-timeline-module {\r\n font-size: var(--ld-px-12);\r\n color: var(--lv-text-secondary);\r\n background: var(--lv-bg-secondary);\r\n padding: var(--ld-px-1) var(--ld-px-8);\r\n border-radius: var(--ld-px-4);\r\n}\r\n\r\n.lv-timeline-ip {\r\n font-size: var(--ld-px-12);\r\n color: var(--lv-text-muted);\r\n font-family: var(--lv-font-mono);\r\n}\r\n\r\n.lv-anomaly-badge {\r\n font-size: var(--ld-px-11);\r\n padding: var(--ld-px-1) var(--ld-px-6);\r\n border-radius: var(--ld-px-3);\r\n background: var(--ld-warning-50);\r\n color: var(--ld-warning-700);\r\n border: var(--ld-px-1) solid var(--ld-warning-300);\r\n}\r\n\r\n.lv-timeline-detail {\r\n font-size: var(--ld-px-13);\r\n color: var(--lv-text-secondary);\r\n margin-top: var(--ld-px-6);\r\n}\r\n\r\n.lv-timeline-expand-hint {\r\n border: 0;\r\n padding: 0;\r\n background: transparent;\r\n font: inherit;\r\n font-size: var(--ld-px-12);\r\n color: var(--lv-primary);\r\n margin-top: var(--ld-px-6);\r\n cursor: pointer;\r\n}\r\n\r\n/* ===== Detail Panel ===== */\r\n.lv-detail {\r\n margin-top: var(--ld-px-12);\r\n padding-top: var(--ld-px-12);\r\n border-top: var(--ld-px-1) dashed var(--lv-border);\r\n animation: lv-slide-down 0.2s ease;\r\n}\r\n\r\n@keyframes lv-slide-down {\r\n from { opacity: 0; transform: translateY(calc(-1 * var(--ld-px-8))); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n/* ===== Diff Table ===== */\r\n.lv-diff-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: var(--ld-px-13);\r\n border: var(--ld-px-1) solid var(--lv-border);\r\n border-radius: var(--ld-px-6);\r\n overflow: hidden;\r\n}\r\n\r\n.lv-diff-table th {\r\n background: var(--lv-bg-secondary);\r\n padding: var(--ld-px-8) var(--ld-px-12);\r\n text-align: left;\r\n font-weight: 600;\r\n font-size: var(--ld-px-12);\r\n color: var(--lv-text-secondary);\r\n border-bottom: var(--ld-px-1) solid var(--lv-border);\r\n}\r\n\r\n.lv-diff-table td {\r\n padding: var(--ld-px-8) var(--ld-px-12);\r\n border-bottom: var(--ld-px-1) solid var(--lv-border);\r\n vertical-align: top;\r\n}\r\n\r\n.lv-diff-table tr:last-child td {\r\n border-bottom: none;\r\n}\r\n\r\n.lv-diff-old {\r\n background: var(--lv-diff-del-bg);\r\n color: var(--lv-diff-del-text);\r\n text-decoration: line-through;\r\n font-family: var(--lv-font-mono);\r\n font-size: var(--ld-px-12);\r\n}\r\n\r\n.lv-diff-new {\r\n background: var(--lv-diff-add-bg);\r\n color: var(--lv-diff-add-text);\r\n font-family: var(--lv-font-mono);\r\n font-size: var(--ld-px-12);\r\n}\r\n\r\n/* ===== Metadata ===== */\r\n.lv-metadata {\r\n margin-top: var(--ld-px-10);\r\n background: var(--lv-bg-secondary);\r\n border-radius: var(--ld-px-6);\r\n padding: var(--ld-px-10) var(--ld-px-14);\r\n font-size: var(--ld-px-12);\r\n font-family: var(--lv-font-mono);\r\n white-space: pre-wrap;\r\n word-break: break-all;\r\n color: var(--lv-text-secondary);\r\n}\r\n\r\n/* ===== Pagination ===== */\r\n.lv-pagination {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--ld-px-6);\r\n padding: var(--ld-px-16) 0;\r\n}\r\n\r\n.lv-pagination-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--ld-px-32);\r\n height: var(--ld-px-32);\r\n border: var(--ld-px-1) solid var(--lv-border);\r\n border-radius: var(--ld-px-6);\r\n background: var(--lv-bg);\r\n color: var(--lv-text);\r\n font-size: var(--ld-px-13);\r\n cursor: pointer;\r\n transition: all 0.15s;\r\n}\r\n\r\n.lv-pagination-btn:hover {\r\n border-color: var(--lv-primary);\r\n color: var(--lv-primary);\r\n}\r\n\r\n.lv-pagination-btn--active {\r\n background: var(--lv-primary);\r\n border-color: var(--lv-primary);\r\n color: var(--ld-white);\r\n}\r\n\r\n.lv-pagination-btn:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n}\r\n\r\n.lv-pagination-info {\r\n font-size: var(--ld-px-13);\r\n color: var(--lv-text-secondary);\r\n margin: 0 var(--ld-px-8);\r\n}\r\n\r\n/* ===== Empty state ===== */\r\n.lv-empty {\r\n text-align: center;\r\n padding: var(--ld-px-48) var(--ld-px-16);\r\n color: var(--lv-text-muted);\r\n font-size: var(--ld-px-14);\r\n}\r\n\r\n.lv-empty-icon {\r\n font-size: var(--ld-px-48);\r\n margin-bottom: var(--ld-px-12);\r\n opacity: 0.3;\r\n}\r\n`\r\n"],"mappings":";;;;;;;;;;AAIA,MAAM,WAAW;AAGV,SAAS,eAAqB;CACnC,IAAI,OAAO,aAAa,aAAa;CACrC,IAAI,SAAS,eAAe,QAAQ,GAAG;CAEvC,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,KAAK;CACX,MAAM,cAAc;CACpB,SAAS,KAAK,YAAY,KAAK;AACjC;AAEA,MAAM,WAAqB"}
@@ -2,7 +2,7 @@
2
2
  * ***********************************
3
3
  * @composy/log-viewer-core v0.0.1 *
4
4
  * Built with rollup *
5
- * Build time: 2024-08-17 11:33:32 *
5
+ * Build time: 2024-10-12 17:29:20 *
6
6
  * Build mode: production *
7
7
  * Minified: No *
8
8
  * ***********************************
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/types/index.ts"],"sourcesContent":["/**\n * @composy/log-viewer-core 类型定义\n */\n\n/** 操作类型 */\nexport type ActionType =\n | 'create'\n | 'update'\n | 'delete'\n | 'query'\n | 'login'\n | 'logout'\n | 'export'\n | 'import'\n | 'approve'\n | 'reject'\n | 'other'\n\n/** 主题模式 */\nexport type ThemeMode = 'light' | 'dark'\n\n/** 异常标记类型 */\nexport type AnomalyType = 'off-hours' | 'sensitive' | 'high-frequency' | 'none'\n\n/** 字段变更条目 */\nexport interface DiffEntry {\n field: string\n label?: string\n oldValue: unknown\n newValue: unknown\n}\n\n/** 日志条目 */\nexport interface LogEntry {\n id: string\n timestamp: string | number | Date\n user: string\n userId?: string\n action: ActionType\n module: string\n detail?: string\n ip?: string\n changes?: DiffEntry[]\n metadata?: Record<string, unknown>\n anomaly?: AnomalyType\n}\n\n/** 筛选配置 */\nexport interface FilterConfig {\n user?: string\n action?: ActionType | ActionType[]\n module?: string\n ip?: string\n timeRange?: [Date | string | number, Date | string | number]\n keyword?: string\n}\n\n/** 分页配置 */\nexport interface PaginationConfig {\n page: number\n pageSize: number\n total?: number\n}\n\n/** LogViewer 配置 */\nexport interface LogViewerConfig {\n container: string | HTMLElement\n data?: LogEntry[]\n dataSource?: string | (() => Promise<LogEntry[]>)\n columns?: string[]\n filter?: FilterConfig\n pagination?: Partial<PaginationConfig>\n theme?: ThemeMode\n locale?: 'zh-CN' | 'en-US'\n showFilter?: boolean\n showDiff?: boolean\n showAnomalyBadge?: boolean\n pageSize?: number\n onEntryClick?: (entry: LogEntry) => void\n onFilterChange?: (filter: FilterConfig) => void\n onThemeChange?: (theme: ThemeMode) => void\n}\n\n/** LogViewer 实例接口 */\nexport interface LogViewerInstance {\n /** 获取当前数据 */\n getData(): LogEntry[]\n /** 设置数据 */\n setData(entries: LogEntry[]): void\n /** 追加数据 */\n appendData(entries: LogEntry[]): void\n /** 获取当前筛选条件 */\n getFilter(): FilterConfig\n /** 设置筛选条件 */\n setFilter(filter: FilterConfig): void\n /** 重置筛选 */\n resetFilter(): void\n /** 获取当前主题 */\n getTheme(): ThemeMode\n /** 设置主题 */\n setTheme(theme: ThemeMode): void\n /** 展开指定条目详情 */\n expandEntry(id: string): void\n /** 折叠指定条目详情 */\n collapseEntry(id: string): void\n /** 折叠所有详情 */\n collapseAll(): void\n /** 跳转分页 */\n goToPage(page: number): void\n /** 获取分页信息 */\n getPagination(): PaginationConfig\n /** 注册事件监听 */\n on(event: string, callback: (...args: unknown[]) => void): () => void\n /** 刷新渲染 */\n refresh(): void\n /** 销毁实例 */\n destroy(): void\n}\n\n/** 事件映射 */\nexport interface LogViewerEvents {\n 'filter:change': (filter: FilterConfig) => void\n 'entry:click': (entry: LogEntry) => void\n 'entry:expand': (entry: LogEntry) => void\n 'entry:collapse': (entry: LogEntry) => void\n 'theme:change': (theme: ThemeMode) => void\n 'page:change': (page: number) => void\n 'data:change': (entries: LogEntry[]) => void\n}\n\n/** 操作类型标签映射 */\nexport const ACTION_LABELS: Record<ActionType, string> = {\n create: '新增',\n update: '修改',\n delete: '删除',\n query: '查询',\n login: '登录',\n logout: '登出',\n export: '导出',\n import: '导入',\n approve: '审批',\n reject: '驳回',\n other: '其他',\n}\n\n/** 操作类型颜色映射 */\nexport const ACTION_COLORS: Record<ActionType, string> = {\n create: '#52c41a',\n update: '#1890ff',\n delete: '#ff4d4f',\n query: '#8c8c8c',\n login: '#722ed1',\n logout: '#eb2f96',\n export: '#fa8c16',\n import: '#13c2c2',\n approve: '#52c41a',\n reject: '#ff4d4f',\n other: '#d9d9d9',\n}\n"],"mappings":";;;;;;;;;;AAmIO,MAAM,gBAA4C;CACvD,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,OAAO;AACT;AAGO,MAAM,gBAA4C;CACvD,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,OAAO;AACT"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/types/index.ts"],"sourcesContent":["/**\r\n * @composy/log-viewer-core 类型定义\r\n */\r\n\r\n/** 操作类型 */\r\nexport type ActionType =\r\n | 'create'\r\n | 'update'\r\n | 'delete'\r\n | 'query'\r\n | 'login'\r\n | 'logout'\r\n | 'export'\r\n | 'import'\r\n | 'approve'\r\n | 'reject'\r\n | 'other'\r\n\r\n/** 主题模式 */\r\nexport type ThemeMode = 'light' | 'dark'\r\n\r\n/** 异常标记类型 */\r\nexport type AnomalyType = 'off-hours' | 'sensitive' | 'high-frequency' | 'none'\r\n\r\n/** 字段变更条目 */\r\nexport interface DiffEntry {\r\n field: string\r\n label?: string\r\n oldValue: unknown\r\n newValue: unknown\r\n}\r\n\r\n/** 日志条目 */\r\nexport interface LogEntry {\r\n id: string\r\n timestamp: string | number | Date\r\n user: string\r\n userId?: string\r\n action: ActionType\r\n module: string\r\n detail?: string\r\n ip?: string\r\n changes?: DiffEntry[]\r\n metadata?: Record<string, unknown>\r\n anomaly?: AnomalyType\r\n}\r\n\r\n/** 筛选配置 */\r\nexport interface FilterConfig {\r\n user?: string\r\n action?: ActionType | ActionType[]\r\n module?: string\r\n ip?: string\r\n timeRange?: [Date | string | number, Date | string | number]\r\n keyword?: string\r\n}\r\n\r\n/** 分页配置 */\r\nexport interface PaginationConfig {\r\n page: number\r\n pageSize: number\r\n total?: number\r\n}\r\n\r\n/** LogViewer 配置 */\r\nexport interface LogViewerConfig {\n container: string | HTMLElement\n data?: LogEntry[]\n dataSource?: string | (() => Promise<LogEntry[]>)\n columns?: string[]\r\n filter?: FilterConfig\r\n pagination?: Partial<PaginationConfig>\r\n theme?: ThemeMode\r\n locale?: 'zh-CN' | 'en-US'\r\n showFilter?: boolean\r\n showDiff?: boolean\r\n showAnomalyBadge?: boolean\r\n pageSize?: number\r\n onEntryClick?: (entry: LogEntry) => void\n onFilterChange?: (filter: FilterConfig) => void\n onThemeChange?: (theme: ThemeMode) => void\n onError?: (error: unknown) => void\n}\n\r\n/** LogViewer 实例接口 */\r\nexport interface LogViewerInstance {\r\n /** 获取当前数据 */\r\n getData(): LogEntry[]\r\n /** 设置数据 */\r\n setData(entries: LogEntry[]): void\r\n /** 追加数据 */\r\n appendData(entries: LogEntry[]): void\r\n /** 获取当前筛选条件 */\r\n getFilter(): FilterConfig\r\n /** 设置筛选条件 */\r\n setFilter(filter: FilterConfig): void\r\n /** 重置筛选 */\r\n resetFilter(): void\r\n /** 获取当前主题 */\r\n getTheme(): ThemeMode\r\n /** 设置主题 */\r\n setTheme(theme: ThemeMode): void\r\n /** 展开指定条目详情 */\r\n expandEntry(id: string): void\r\n /** 折叠指定条目详情 */\r\n collapseEntry(id: string): void\r\n /** 折叠所有详情 */\r\n collapseAll(): void\r\n /** 跳转分页 */\r\n goToPage(page: number): void\r\n /** 获取分页信息 */\r\n getPagination(): PaginationConfig\r\n /** 注册事件监听 */\r\n on(event: string, callback: (...args: unknown[]) => void): () => void\r\n /** 刷新渲染 */\n refresh(): void\n /** 从 dataSource 加载数据 */\n loadData(): Promise<void>\n /** 销毁实例 */\n destroy(): void\n}\n\r\n/** 事件映射 */\r\nexport interface LogViewerEvents {\r\n 'filter:change': (filter: FilterConfig) => void\r\n 'entry:click': (entry: LogEntry) => void\r\n 'entry:expand': (entry: LogEntry) => void\r\n 'entry:collapse': (entry: LogEntry) => void\r\n 'theme:change': (theme: ThemeMode) => void\r\n 'page:change': (page: number) => void\n 'data:change': (entries: LogEntry[]) => void\n error: (error: unknown) => void\n}\n\r\n/** 操作类型标签映射 */\r\nexport const ACTION_LABELS: Record<ActionType, string> = {\r\n create: '新增',\r\n update: '修改',\r\n delete: '删除',\r\n query: '查询',\r\n login: '登录',\r\n logout: '登出',\r\n export: '导出',\r\n import: '导入',\r\n approve: '审批',\r\n reject: '驳回',\r\n other: '其他',\r\n}\r\n\r\n/** 操作类型颜色映射 */\r\nexport const ACTION_COLORS: Record<ActionType, string> = {\r\n create: '#52c41a',\r\n update: '#1890ff',\r\n delete: '#ff4d4f',\r\n query: '#8c8c8c',\r\n login: '#722ed1',\r\n logout: '#eb2f96',\r\n export: '#fa8c16',\r\n import: '#13c2c2',\r\n approve: '#52c41a',\r\n reject: '#ff4d4f',\r\n other: '#d9d9d9',\r\n}\r\n"],"mappings":";;;;;;;;;;AAuIO,MAAM,gBAA4C;CACvD,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,OAAO;AACT;AAGO,MAAM,gBAA4C;CACvD,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,OAAO;AACT"}