@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,6 +2,11 @@
2
2
  * 时间线渲染器 - 将日志条目渲染为时间线 DOM
3
3
  */
4
4
  import type { LogEntry } from '../types';
5
+ export interface TimelineRendererOptions {
6
+ showDiff?: boolean;
7
+ showAnomalyBadge?: boolean;
8
+ locale?: 'zh-CN' | 'en-US';
9
+ }
5
10
  /**
6
11
  * TimelineRenderer - Timeline Renderer class
7
12
  */
@@ -9,14 +14,13 @@ export declare class TimelineRenderer {
9
14
  /**
10
15
  * 渲染时间线
11
16
  */
12
- render(entries: LogEntry[], expandedIds: Set<string>): HTMLElement;
17
+ render(entries: LogEntry[], expandedIds: Set<string>, options?: TimelineRendererOptions): HTMLElement;
13
18
  /**
14
19
  * 渲染单条时间线条目
15
20
  */
16
- renderItem(entry: LogEntry, expanded: boolean): HTMLElement;
21
+ renderItem(entry: LogEntry, expanded: boolean, options?: TimelineRendererOptions): HTMLElement;
17
22
  /**
18
23
  * 渲染分页
19
24
  */
20
25
  renderPagination(page: number, pageSize: number, total: number): HTMLElement;
21
26
  }
22
- //# sourceMappingURL=TimelineRenderer.d.ts.map
@@ -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
  * ***********************************
@@ -21,54 +21,54 @@ function injectStyles() {
21
21
  const CSS_TEXT = `
22
22
  /* ===== CSS Variables ===== */
23
23
  .lv-root {
24
- --lv-bg: #ffffff;
25
- --lv-bg-secondary: #f7f8fa;
26
- --lv-bg-hover: #f0f3ff;
27
- --lv-border: #ebedf0;
28
- --lv-text: #1a1a2e;
29
- --lv-text-secondary: #666;
30
- --lv-text-muted: #999;
31
- --lv-primary: #4f6ef7;
32
- --lv-primary-light: #edf0ff;
33
- --lv-shadow: rgba(0, 0, 0, 0.04);
34
- --lv-timeline-line: #e0e0e0;
35
- --lv-timeline-dot: #4f6ef7;
36
- --lv-diff-add-bg: #f0fff4;
37
- --lv-diff-add-text: #22863a;
38
- --lv-diff-del-bg: #fff5f5;
39
- --lv-diff-del-text: #cb2431;
40
- --lv-anomaly-bg: #fff2e8;
41
- --lv-anomaly-border: #ffbb96;
42
- --lv-radius: 8px;
24
+ --lv-bg: var(--ld-white);
25
+ --lv-bg-secondary: var(--ld-bg-surface-soft);
26
+ --lv-bg-hover: var(--ld-primary-50);
27
+ --lv-border: var(--ld-border);
28
+ --lv-text: var(--ld-text-primary);
29
+ --lv-text-secondary: var(--ld-text-secondary);
30
+ --lv-text-muted: var(--ld-text-muted);
31
+ --lv-primary: var(--ld-primary-500);
32
+ --lv-primary-light: var(--ld-primary-50);
33
+ --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 4%, transparent);
34
+ --lv-timeline-line: var(--ld-border);
35
+ --lv-timeline-dot: var(--ld-primary-500);
36
+ --lv-diff-add-bg: var(--ld-success-50);
37
+ --lv-diff-add-text: var(--ld-success-700);
38
+ --lv-diff-del-bg: var(--ld-danger-50);
39
+ --lv-diff-del-text: var(--ld-danger-700);
40
+ --lv-anomaly-bg: var(--ld-warning-50);
41
+ --lv-anomaly-border: var(--ld-warning-300);
42
+ --lv-radius: var(--ld-radius-md);
43
43
  --lv-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
44
44
  --lv-font-mono: 'Fira Code', 'SF Mono', Consolas, monospace;
45
45
  }
46
46
 
47
47
  .lv-root[data-theme="dark"] {
48
- --lv-bg: #1a1a2e;
49
- --lv-bg-secondary: #16213e;
50
- --lv-bg-hover: #1e2a4a;
51
- --lv-border: #2a2a4a;
52
- --lv-text: #e0e0e0;
53
- --lv-text-secondary: #a0a0b0;
54
- --lv-text-muted: #666680;
55
- --lv-primary: #6b85f9;
56
- --lv-primary-light: #252545;
57
- --lv-shadow: rgba(0, 0, 0, 0.2);
58
- --lv-timeline-line: #333355;
59
- --lv-timeline-dot: #6b85f9;
60
- --lv-diff-add-bg: #0d2818;
61
- --lv-diff-add-text: #85e89d;
62
- --lv-diff-del-bg: #2d1214;
63
- --lv-diff-del-text: #f97583;
64
- --lv-anomaly-bg: #2d1a0a;
65
- --lv-anomaly-border: #8b5e3c;
48
+ --lv-bg: var(--ld-bg-surface);
49
+ --lv-bg-secondary: var(--ld-bg-surface-soft);
50
+ --lv-bg-hover: var(--ld-primary-50);
51
+ --lv-border: var(--ld-border-strong);
52
+ --lv-text: var(--ld-text-primary);
53
+ --lv-text-secondary: var(--ld-text-secondary);
54
+ --lv-text-muted: var(--ld-text-muted);
55
+ --lv-primary: var(--ld-primary-400);
56
+ --lv-primary-light: var(--ld-primary-50);
57
+ --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 20%, transparent);
58
+ --lv-timeline-line: var(--ld-border-strong);
59
+ --lv-timeline-dot: var(--ld-primary-400);
60
+ --lv-diff-add-bg: var(--ld-success-50);
61
+ --lv-diff-add-text: var(--ld-success-700);
62
+ --lv-diff-del-bg: var(--ld-danger-50);
63
+ --lv-diff-del-text: var(--ld-danger-700);
64
+ --lv-anomaly-bg: var(--ld-warning-50);
65
+ --lv-anomaly-border: var(--ld-warning-700);
66
66
  }
67
67
 
68
68
  /* ===== Root ===== */
69
69
  .lv-root {
70
70
  font-family: var(--lv-font);
71
- font-size: 14px;
71
+ font-size: var(--ld-px-14);
72
72
  color: var(--lv-text);
73
73
  background: var(--lv-bg);
74
74
  line-height: 1.6;
@@ -78,38 +78,38 @@ const CSS_TEXT = `
78
78
  .lv-filter {
79
79
  display: flex;
80
80
  flex-wrap: wrap;
81
- gap: 10px;
82
- padding: 16px;
81
+ gap: var(--ld-px-10);
82
+ padding: var(--ld-px-16);
83
83
  background: var(--lv-bg);
84
- border: 1px solid var(--lv-border);
84
+ border: var(--ld-px-1) solid var(--lv-border);
85
85
  border-radius: var(--lv-radius);
86
- margin-bottom: 16px;
86
+ margin-bottom: var(--ld-px-16);
87
87
  align-items: center;
88
88
  }
89
89
 
90
90
  .lv-filter-item {
91
91
  display: flex;
92
92
  align-items: center;
93
- gap: 6px;
94
- font-size: 13px;
93
+ gap: var(--ld-px-6);
94
+ font-size: var(--ld-px-13);
95
95
  }
96
96
 
97
97
  .lv-filter-label {
98
98
  color: var(--lv-text-secondary);
99
- font-size: 12px;
99
+ font-size: var(--ld-px-12);
100
100
  white-space: nowrap;
101
101
  }
102
102
 
103
103
  .lv-filter-input {
104
- padding: 5px 10px;
105
- border: 1px solid var(--lv-border);
106
- border-radius: 6px;
107
- font-size: 13px;
104
+ padding: var(--ld-px-5) var(--ld-px-10);
105
+ border: var(--ld-px-1) solid var(--lv-border);
106
+ border-radius: var(--ld-px-6);
107
+ font-size: var(--ld-px-13);
108
108
  background: var(--lv-bg);
109
109
  color: var(--lv-text);
110
110
  outline: none;
111
111
  transition: border-color 0.2s;
112
- min-width: 120px;
112
+ min-width: var(--ld-px-120);
113
113
  }
114
114
 
115
115
  .lv-filter-input:focus {
@@ -117,10 +117,10 @@ const CSS_TEXT = `
117
117
  }
118
118
 
119
119
  .lv-filter-select {
120
- padding: 5px 10px;
121
- border: 1px solid var(--lv-border);
122
- border-radius: 6px;
123
- font-size: 13px;
120
+ padding: var(--ld-px-5) var(--ld-px-10);
121
+ border: var(--ld-px-1) solid var(--lv-border);
122
+ border-radius: var(--ld-px-6);
123
+ font-size: var(--ld-px-13);
124
124
  background: var(--lv-bg);
125
125
  color: var(--lv-text);
126
126
  outline: none;
@@ -130,11 +130,11 @@ const CSS_TEXT = `
130
130
  .lv-filter-btn {
131
131
  display: inline-flex;
132
132
  align-items: center;
133
- gap: 4px;
134
- padding: 5px 14px;
135
- font-size: 13px;
136
- border: 1px solid var(--lv-border);
137
- border-radius: 6px;
133
+ gap: var(--ld-px-4);
134
+ padding: var(--ld-px-5) var(--ld-px-14);
135
+ font-size: var(--ld-px-13);
136
+ border: var(--ld-px-1) solid var(--lv-border);
137
+ border-radius: var(--ld-px-6);
138
138
  background: var(--lv-bg);
139
139
  color: var(--lv-text);
140
140
  cursor: pointer;
@@ -149,7 +149,7 @@ const CSS_TEXT = `
149
149
  .lv-filter-btn--primary {
150
150
  background: var(--lv-primary);
151
151
  border-color: var(--lv-primary);
152
- color: #fff;
152
+ color: var(--ld-white);
153
153
  }
154
154
 
155
155
  .lv-filter-btn--primary:hover {
@@ -159,135 +159,171 @@ const CSS_TEXT = `
159
159
  /* ===== Timeline ===== */
160
160
  .lv-timeline {
161
161
  position: relative;
162
- padding-left: 28px;
162
+ padding-left: var(--ld-px-28);
163
163
  }
164
164
 
165
165
  .lv-timeline::before {
166
166
  content: '';
167
167
  position: absolute;
168
- left: 9px;
168
+ left: var(--ld-px-9);
169
169
  top: 0;
170
170
  bottom: 0;
171
- width: 2px;
171
+ width: var(--ld-px-2);
172
172
  background: var(--lv-timeline-line);
173
173
  }
174
174
 
175
175
  .lv-timeline-item {
176
176
  position: relative;
177
- padding: 0 0 20px 0;
177
+ padding: 0 0 var(--ld-px-20) 0;
178
178
  }
179
179
 
180
180
  .lv-timeline-dot {
181
181
  position: absolute;
182
- left: -25px;
183
- top: 6px;
184
- width: 12px;
185
- height: 12px;
182
+ left: calc(-1 * var(--ld-px-25));
183
+ top: var(--ld-px-6);
184
+ width: var(--ld-px-12);
185
+ height: var(--ld-px-12);
186
186
  border-radius: 50%;
187
187
  background: var(--lv-bg);
188
- border: 2px solid var(--lv-timeline-dot);
188
+ border: var(--ld-px-2) solid var(--lv-timeline-dot);
189
189
  z-index: 1;
190
190
  }
191
191
 
192
192
  .lv-timeline-dot--anomaly {
193
- border-color: #ff4d4f;
194
- background: #fff1f0;
193
+ border-color: var(--ld-danger-500);
194
+ background: var(--ld-danger-50);
195
195
  }
196
196
 
197
197
  .lv-timeline-card {
198
198
  background: var(--lv-bg);
199
- border: 1px solid var(--lv-border);
199
+ border: var(--ld-px-1) solid var(--lv-border);
200
200
  border-radius: var(--lv-radius);
201
- padding: 14px 18px;
201
+ padding: var(--ld-px-14) var(--ld-px-18);
202
202
  cursor: pointer;
203
203
  transition: all 0.2s;
204
- box-shadow: 0 1px 3px var(--lv-shadow);
204
+ box-shadow: 0 var(--ld-px-1) var(--ld-px-3) var(--lv-shadow);
205
205
  }
206
206
 
207
207
  .lv-timeline-card:hover {
208
208
  border-color: var(--lv-primary);
209
- box-shadow: 0 2px 8px var(--lv-shadow);
209
+ box-shadow: 0 var(--ld-px-2) var(--ld-px-8) var(--lv-shadow);
210
210
  }
211
211
 
212
212
  .lv-timeline-card--anomaly {
213
- border-left: 3px solid var(--lv-anomaly-border);
213
+ border-left: var(--ld-px-3) solid var(--lv-anomaly-border);
214
214
  background: var(--lv-anomaly-bg);
215
215
  }
216
216
 
217
217
  .lv-timeline-header {
218
218
  display: flex;
219
219
  align-items: center;
220
- gap: 10px;
220
+ gap: var(--ld-px-10);
221
221
  flex-wrap: wrap;
222
- margin-bottom: 4px;
222
+ margin-bottom: var(--ld-px-4);
223
223
  }
224
224
 
225
225
  .lv-timeline-time {
226
- font-size: 12px;
226
+ font-size: var(--ld-px-12);
227
227
  color: var(--lv-text-muted);
228
228
  font-family: var(--lv-font-mono);
229
229
  }
230
230
 
231
231
  .lv-timeline-user {
232
232
  font-weight: 600;
233
- font-size: 14px;
233
+ font-size: var(--ld-px-14);
234
234
  }
235
235
 
236
236
  .lv-action-tag {
237
237
  display: inline-block;
238
- padding: 1px 8px;
239
- font-size: 12px;
240
- border-radius: 4px;
238
+ padding: var(--ld-px-1) var(--ld-px-8);
239
+ font-size: var(--ld-px-12);
240
+ border-radius: var(--ld-px-4);
241
241
  font-weight: 500;
242
- color: #fff;
242
+ color: var(--ld-white);
243
+ }
244
+
245
+ .lv-action-tag--create,
246
+ .lv-action-tag--approve {
247
+ background: var(--ld-success-500);
248
+ }
249
+
250
+ .lv-action-tag--update,
251
+ .lv-action-tag--login {
252
+ background: var(--ld-primary-500);
253
+ }
254
+
255
+ .lv-action-tag--delete,
256
+ .lv-action-tag--reject {
257
+ background: var(--ld-danger-500);
258
+ }
259
+
260
+ .lv-action-tag--query,
261
+ .lv-action-tag--other {
262
+ background: var(--ld-text-secondary);
263
+ }
264
+
265
+ .lv-action-tag--logout {
266
+ background: var(--ld-primary-700);
267
+ }
268
+
269
+ .lv-action-tag--export {
270
+ background: var(--ld-warning-500);
271
+ }
272
+
273
+ .lv-action-tag--import {
274
+ background: var(--ld-success-500);
243
275
  }
244
276
 
245
277
  .lv-timeline-module {
246
- font-size: 12px;
278
+ font-size: var(--ld-px-12);
247
279
  color: var(--lv-text-secondary);
248
280
  background: var(--lv-bg-secondary);
249
- padding: 1px 8px;
250
- border-radius: 4px;
281
+ padding: var(--ld-px-1) var(--ld-px-8);
282
+ border-radius: var(--ld-px-4);
251
283
  }
252
284
 
253
285
  .lv-timeline-ip {
254
- font-size: 12px;
286
+ font-size: var(--ld-px-12);
255
287
  color: var(--lv-text-muted);
256
288
  font-family: var(--lv-font-mono);
257
289
  }
258
290
 
259
291
  .lv-anomaly-badge {
260
- font-size: 11px;
261
- padding: 1px 6px;
262
- border-radius: 3px;
263
- background: #fff2e8;
264
- color: #d46b08;
265
- border: 1px solid #ffd591;
292
+ font-size: var(--ld-px-11);
293
+ padding: var(--ld-px-1) var(--ld-px-6);
294
+ border-radius: var(--ld-px-3);
295
+ background: var(--ld-warning-50);
296
+ color: var(--ld-warning-700);
297
+ border: var(--ld-px-1) solid var(--ld-warning-300);
266
298
  }
267
299
 
268
300
  .lv-timeline-detail {
269
- font-size: 13px;
301
+ font-size: var(--ld-px-13);
270
302
  color: var(--lv-text-secondary);
271
- margin-top: 6px;
303
+ margin-top: var(--ld-px-6);
272
304
  }
273
305
 
274
306
  .lv-timeline-expand-hint {
275
- font-size: 12px;
307
+ border: 0;
308
+ padding: 0;
309
+ background: transparent;
310
+ font: inherit;
311
+ font-size: var(--ld-px-12);
276
312
  color: var(--lv-primary);
277
- margin-top: 6px;
313
+ margin-top: var(--ld-px-6);
278
314
  cursor: pointer;
279
315
  }
280
316
 
281
317
  /* ===== Detail Panel ===== */
282
318
  .lv-detail {
283
- margin-top: 12px;
284
- padding-top: 12px;
285
- border-top: 1px dashed var(--lv-border);
319
+ margin-top: var(--ld-px-12);
320
+ padding-top: var(--ld-px-12);
321
+ border-top: var(--ld-px-1) dashed var(--lv-border);
286
322
  animation: lv-slide-down 0.2s ease;
287
323
  }
288
324
 
289
325
  @keyframes lv-slide-down {
290
- from { opacity: 0; transform: translateY(-8px); }
326
+ from { opacity: 0; transform: translateY(calc(-1 * var(--ld-px-8))); }
291
327
  to { opacity: 1; transform: translateY(0); }
292
328
  }
293
329
 
@@ -295,25 +331,25 @@ const CSS_TEXT = `
295
331
  .lv-diff-table {
296
332
  width: 100%;
297
333
  border-collapse: collapse;
298
- font-size: 13px;
299
- border: 1px solid var(--lv-border);
300
- border-radius: 6px;
334
+ font-size: var(--ld-px-13);
335
+ border: var(--ld-px-1) solid var(--lv-border);
336
+ border-radius: var(--ld-px-6);
301
337
  overflow: hidden;
302
338
  }
303
339
 
304
340
  .lv-diff-table th {
305
341
  background: var(--lv-bg-secondary);
306
- padding: 8px 12px;
342
+ padding: var(--ld-px-8) var(--ld-px-12);
307
343
  text-align: left;
308
344
  font-weight: 600;
309
- font-size: 12px;
345
+ font-size: var(--ld-px-12);
310
346
  color: var(--lv-text-secondary);
311
- border-bottom: 1px solid var(--lv-border);
347
+ border-bottom: var(--ld-px-1) solid var(--lv-border);
312
348
  }
313
349
 
314
350
  .lv-diff-table td {
315
- padding: 8px 12px;
316
- border-bottom: 1px solid var(--lv-border);
351
+ padding: var(--ld-px-8) var(--ld-px-12);
352
+ border-bottom: var(--ld-px-1) solid var(--lv-border);
317
353
  vertical-align: top;
318
354
  }
319
355
 
@@ -326,23 +362,23 @@ const CSS_TEXT = `
326
362
  color: var(--lv-diff-del-text);
327
363
  text-decoration: line-through;
328
364
  font-family: var(--lv-font-mono);
329
- font-size: 12px;
365
+ font-size: var(--ld-px-12);
330
366
  }
331
367
 
332
368
  .lv-diff-new {
333
369
  background: var(--lv-diff-add-bg);
334
370
  color: var(--lv-diff-add-text);
335
371
  font-family: var(--lv-font-mono);
336
- font-size: 12px;
372
+ font-size: var(--ld-px-12);
337
373
  }
338
374
 
339
375
  /* ===== Metadata ===== */
340
376
  .lv-metadata {
341
- margin-top: 10px;
377
+ margin-top: var(--ld-px-10);
342
378
  background: var(--lv-bg-secondary);
343
- border-radius: 6px;
344
- padding: 10px 14px;
345
- font-size: 12px;
379
+ border-radius: var(--ld-px-6);
380
+ padding: var(--ld-px-10) var(--ld-px-14);
381
+ font-size: var(--ld-px-12);
346
382
  font-family: var(--lv-font-mono);
347
383
  white-space: pre-wrap;
348
384
  word-break: break-all;
@@ -354,21 +390,21 @@ const CSS_TEXT = `
354
390
  display: flex;
355
391
  align-items: center;
356
392
  justify-content: center;
357
- gap: 6px;
358
- padding: 16px 0;
393
+ gap: var(--ld-px-6);
394
+ padding: var(--ld-px-16) 0;
359
395
  }
360
396
 
361
397
  .lv-pagination-btn {
362
398
  display: inline-flex;
363
399
  align-items: center;
364
400
  justify-content: center;
365
- width: 32px;
366
- height: 32px;
367
- border: 1px solid var(--lv-border);
368
- border-radius: 6px;
401
+ width: var(--ld-px-32);
402
+ height: var(--ld-px-32);
403
+ border: var(--ld-px-1) solid var(--lv-border);
404
+ border-radius: var(--ld-px-6);
369
405
  background: var(--lv-bg);
370
406
  color: var(--lv-text);
371
- font-size: 13px;
407
+ font-size: var(--ld-px-13);
372
408
  cursor: pointer;
373
409
  transition: all 0.15s;
374
410
  }
@@ -381,7 +417,7 @@ const CSS_TEXT = `
381
417
  .lv-pagination-btn--active {
382
418
  background: var(--lv-primary);
383
419
  border-color: var(--lv-primary);
384
- color: #fff;
420
+ color: var(--ld-white);
385
421
  }
386
422
 
387
423
  .lv-pagination-btn:disabled {
@@ -390,22 +426,22 @@ const CSS_TEXT = `
390
426
  }
391
427
 
392
428
  .lv-pagination-info {
393
- font-size: 13px;
429
+ font-size: var(--ld-px-13);
394
430
  color: var(--lv-text-secondary);
395
- margin: 0 8px;
431
+ margin: 0 var(--ld-px-8);
396
432
  }
397
433
 
398
434
  /* ===== Empty state ===== */
399
435
  .lv-empty {
400
436
  text-align: center;
401
- padding: 48px 16px;
437
+ padding: var(--ld-px-48) var(--ld-px-16);
402
438
  color: var(--lv-text-muted);
403
- font-size: 14px;
439
+ font-size: var(--ld-px-14);
404
440
  }
405
441
 
406
442
  .lv-empty-icon {
407
- font-size: 48px;
408
- margin-bottom: 12px;
443
+ font-size: var(--ld-px-48);
444
+ margin-bottom: var(--ld-px-12);
409
445
  opacity: 0.3;
410
446
  }
411
447
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","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.cjs","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"}
@@ -1,9 +1,5 @@
1
1
  /**
2
2
  * 样式注入 - 通过 CSS 变量支持亮色/暗色主题
3
3
  */
4
- /**
5
- * injectStyles - inject Styles function
6
- * @returns 返回值说明
7
- */
4
+ /** injectStyles - inject Styles function. */
8
5
  export declare function injectStyles(): void;
9
- //# sourceMappingURL=index.d.ts.map
@@ -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.cjs","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.cjs","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"}