@composy/log-viewer-vue 0.0.1 → 0.0.2

package/es/composables/useLogViewer.js

@@ -2,12 +2,12 @@
 * ***********************************
 * @composy/log-viewer-vue v0.0.1  *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:24 *
+* Build time: 2024-10-12 17:44:31 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
-import { onUnmounted, ref } from "vue";
+import { onUnmounted, ref } from "vue-demi";
 import { createLogViewer } from "@composy/log-viewer-core";
 //#region src/composables/useLogViewer.ts
 function useLogViewer() {
@@ -22,8 +22,8 @@ function useLogViewer() {
 	function create(container, config) {
 		if (instance.value) instance.value.destroy();
 		instance.value = createLogViewer({
-			container,
-			...config
+			...config,
+			container
 		});
 		instance.value.on("data:change", (entries) => {
 			data.value = entries;
@@ -37,9 +37,10 @@ function useLogViewer() {
 		instance.value.on("page:change", () => {
 			if (instance.value) pagination.value = instance.value.getPagination();
 		});
-		if (config?.data) data.value = config.data;
-		if (config?.theme) theme.value = config.theme;
-		if (config?.filter) filter.value = config.filter;
+		data.value = instance.value.getData();
+		filter.value = instance.value.getFilter();
+		theme.value = instance.value.getTheme();
+		pagination.value = instance.value.getPagination();
 	}
 	function setData(entries) {
 		instance.value?.setData(entries);
@@ -76,6 +77,14 @@ function useLogViewer() {
 	function refresh() {
 		instance.value?.refresh();
 	}
+	async function loadData() {
+		const loader = instance.value?.loadData;
+		if (loader) await loader.call(instance.value);
+		if (instance.value) {
+			data.value = instance.value.getData();
+			pagination.value = instance.value.getPagination();
+		}
+	}
 	function destroy() {
 		instance.value?.destroy();
 		instance.value = null;
@@ -103,6 +112,7 @@ function useLogViewer() {
 		collapseAll,
 		goToPage,
 		refresh,
+		loadData,
 		destroy,
 		on
 	};

package/es/composables/useLogViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLogViewer.js","names":[],"sources":["../../src/composables/useLogViewer.ts"],"sourcesContent":["/**\n * useLogViewer - Vue 3 组合式 API\n */\nimport { ref, onUnmounted } from 'vue'\nimport {\n  createLogViewer,\n  type LogViewer,\n  type LogViewerConfig,\n  type LogEntry,\n  type FilterConfig,\n  type ThemeMode,\n  type PaginationConfig,\n} from '@composy/log-viewer-core'\n\n/**\n * useLogViewer - use Log Viewer function\n * @returns 返回值说明\n */\nexport function useLogViewer() {\n  const instance = ref<LogViewer | null>(null)\n  const data = ref<LogEntry[]>([])\n  const filter = ref<FilterConfig>({})\n  const theme = ref<ThemeMode>('light')\n  const pagination = ref<PaginationConfig>({ page: 1, pageSize: 20 })\n\n  function create(container: HTMLElement | string, config?: Partial<LogViewerConfig>) {\n    if (instance.value) {\n      instance.value.destroy()\n    }\n\n    instance.value = createLogViewer({\n      container,\n      ...config,\n    })\n\n    // Sync refs\n    instance.value.on('data:change', (entries: LogEntry[]) => {\n      data.value = entries\n    })\n    instance.value.on('filter:change', (f: FilterConfig) => {\n      filter.value = f\n    })\n    instance.value.on('theme:change', (t: ThemeMode) => {\n      theme.value = t\n    })\n    instance.value.on('page:change', () => {\n      if (instance.value) {\n        pagination.value = instance.value.getPagination()\n      }\n    })\n\n    if (config?.data) data.value = config.data\n    if (config?.theme) theme.value = config.theme\n    if (config?.filter) filter.value = config.filter\n  }\n\n  function setData(entries: LogEntry[]) {\n    instance.value?.setData(entries)\n    data.value = entries\n  }\n\n  function appendData(entries: LogEntry[]) {\n    instance.value?.appendData(entries)\n    data.value = instance.value?.getData() || []\n  }\n\n  function setFilter(f: FilterConfig) {\n    instance.value?.setFilter(f)\n    filter.value = f\n  }\n\n  function resetFilter() {\n    instance.value?.resetFilter()\n    filter.value = {}\n  }\n\n  function setTheme(t: ThemeMode) {\n    instance.value?.setTheme(t)\n    theme.value = t\n  }\n\n  function expandEntry(id: string) {\n    instance.value?.expandEntry(id)\n  }\n\n  function collapseEntry(id: string) {\n    instance.value?.collapseEntry(id)\n  }\n\n  function collapseAll() {\n    instance.value?.collapseAll()\n  }\n\n  function goToPage(page: number) {\n    instance.value?.goToPage(page)\n  }\n\n  function refresh() {\n    instance.value?.refresh()\n  }\n\n  function destroy() {\n    instance.value?.destroy()\n    instance.value = null\n  }\n\n  function on(event: string, callback: (...args: unknown[]) => void): () => void {\n    return instance.value?.on(event, callback) || (() => {})\n  }\n\n  onUnmounted(() => {\n    destroy()\n  })\n\n  return {\n    instance,\n    data,\n    filter,\n    theme,\n    pagination,\n    create,\n    setData,\n    appendData,\n    setFilter,\n    resetFilter,\n    setTheme,\n    expandEntry,\n    collapseEntry,\n    collapseAll,\n    goToPage,\n    refresh,\n    destroy,\n    on,\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAkBO,SAAS,eAAe;CAC7B,MAAM,WAAW,IAAsB,IAAI;CAC3C,MAAM,OAAO,IAAgB,CAAC,CAAC;CAC/B,MAAM,SAAS,IAAkB,CAAC,CAAC;CACnC,MAAM,QAAQ,IAAe,OAAO;CACpC,MAAM,aAAa,IAAsB;EAAE,MAAM;EAAG,UAAU;CAAG,CAAC;CAElE,SAAS,OAAO,WAAiC,QAAmC;EAClF,IAAI,SAAS,OACX,SAAS,MAAM,QAAQ;EAGzB,SAAS,QAAQ,gBAAgB;GAC/B;GACA,GAAG;EACL,CAAC;EAGD,SAAS,MAAM,GAAG,gBAAgB,YAAwB;GACxD,KAAK,QAAQ;EACf,CAAC;EACD,SAAS,MAAM,GAAG,kBAAkB,MAAoB;GACtD,OAAO,QAAQ;EACjB,CAAC;EACD,SAAS,MAAM,GAAG,iBAAiB,MAAiB;GAClD,MAAM,QAAQ;EAChB,CAAC;EACD,SAAS,MAAM,GAAG,qBAAqB;GACrC,IAAI,SAAS,OACX,WAAW,QAAQ,SAAS,MAAM,cAAc;EAEpD,CAAC;EAED,IAAI,QAAQ,MAAM,KAAK,QAAQ,OAAO;EACtC,IAAI,QAAQ,OAAO,MAAM,QAAQ,OAAO;EACxC,IAAI,QAAQ,QAAQ,OAAO,QAAQ,OAAO;CAC5C;CAEA,SAAS,QAAQ,SAAqB;EACpC,SAAS,OAAO,QAAQ,OAAO;EAC/B,KAAK,QAAQ;CACf;CAEA,SAAS,WAAW,SAAqB;EACvC,SAAS,OAAO,WAAW,OAAO;EAClC,KAAK,QAAQ,SAAS,OAAO,QAAQ,KAAK,CAAC;CAC7C;CAEA,SAAS,UAAU,GAAiB;EAClC,SAAS,OAAO,UAAU,CAAC;EAC3B,OAAO,QAAQ;CACjB;CAEA,SAAS,cAAc;EACrB,SAAS,OAAO,YAAY;EAC5B,OAAO,QAAQ,CAAC;CAClB;CAEA,SAAS,SAAS,GAAc;EAC9B,SAAS,OAAO,SAAS,CAAC;EAC1B,MAAM,QAAQ;CAChB;CAEA,SAAS,YAAY,IAAY;EAC/B,SAAS,OAAO,YAAY,EAAE;CAChC;CAEA,SAAS,cAAc,IAAY;EACjC,SAAS,OAAO,cAAc,EAAE;CAClC;CAEA,SAAS,cAAc;EACrB,SAAS,OAAO,YAAY;CAC9B;CAEA,SAAS,SAAS,MAAc;EAC9B,SAAS,OAAO,SAAS,IAAI;CAC/B;CAEA,SAAS,UAAU;EACjB,SAAS,OAAO,QAAQ;CAC1B;CAEA,SAAS,UAAU;EACjB,SAAS,OAAO,QAAQ;EACxB,SAAS,QAAQ;CACnB;CAEA,SAAS,GAAG,OAAe,UAAoD;EAC7E,OAAO,SAAS,OAAO,GAAG,OAAO,QAAQ,YAAY,CAAC;CACxD;CAEA,kBAAkB;EAChB,QAAQ;CACV,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useLogViewer.js","names":[],"sources":["../../src/composables/useLogViewer.ts"],"sourcesContent":["/**\r\n * useLogViewer - Vue 3 组合式 API\r\n */\r\nimport { onUnmounted, ref } from 'vue-demi'\r\nimport {\r\n  createLogViewer,\r\n  type LogViewer,\r\n  type LogViewerConfig,\r\n  type LogEntry,\r\n  type FilterConfig,\r\n  type ThemeMode,\r\n  type PaginationConfig,\r\n} from '@composy/log-viewer-core'\r\n\r\n/**\r\n * useLogViewer - use Log Viewer function\r\n * @returns 返回值说明\r\n */\r\nexport function useLogViewer() {\r\n  const instance = ref<LogViewer | null>(null)\r\n  const data = ref<LogEntry[]>([])\r\n  const filter = ref<FilterConfig>({})\r\n  const theme = ref<ThemeMode>('light')\r\n  const pagination = ref<PaginationConfig>({ page: 1, pageSize: 20 })\r\n\r\n  function create(\r\n    container: HTMLElement | string,\r\n    config?: Partial<LogViewerConfig>\r\n  ) {\r\n    if (instance.value) {\r\n      instance.value.destroy()\r\n    }\r\n\r\n    instance.value = createLogViewer({\r\n      ...config,\r\n      container,\r\n    })\r\n\r\n    // Sync refs\r\n    instance.value.on('data:change', (entries: LogEntry[]) => {\r\n      data.value = entries\r\n    })\r\n    instance.value.on('filter:change', (f: FilterConfig) => {\r\n      filter.value = f\r\n    })\r\n    instance.value.on('theme:change', (t: ThemeMode) => {\r\n      theme.value = t\r\n    })\r\n    instance.value.on('page:change', () => {\r\n      if (instance.value) {\r\n        pagination.value = instance.value.getPagination()\r\n      }\r\n    })\r\n\r\n    data.value = instance.value.getData()\r\n    filter.value = instance.value.getFilter()\r\n    theme.value = instance.value.getTheme()\r\n    pagination.value = instance.value.getPagination()\r\n  }\r\n\r\n  function setData(entries: LogEntry[]) {\r\n    instance.value?.setData(entries)\r\n    data.value = entries\r\n  }\r\n\r\n  function appendData(entries: LogEntry[]) {\r\n    instance.value?.appendData(entries)\r\n    data.value = instance.value?.getData() || []\r\n  }\r\n\r\n  function setFilter(f: FilterConfig) {\r\n    instance.value?.setFilter(f)\r\n    filter.value = f\r\n  }\r\n\r\n  function resetFilter() {\r\n    instance.value?.resetFilter()\r\n    filter.value = {}\r\n  }\r\n\r\n  function setTheme(t: ThemeMode) {\r\n    instance.value?.setTheme(t)\r\n    theme.value = t\r\n  }\r\n\r\n  function expandEntry(id: string) {\r\n    instance.value?.expandEntry(id)\r\n  }\r\n\r\n  function collapseEntry(id: string) {\r\n    instance.value?.collapseEntry(id)\r\n  }\r\n\r\n  function collapseAll() {\r\n    instance.value?.collapseAll()\r\n  }\r\n\r\n  function goToPage(page: number) {\r\n    instance.value?.goToPage(page)\r\n  }\r\n\r\n  function refresh() {\r\n    instance.value?.refresh()\r\n  }\r\n\r\n  async function loadData() {\r\n    const loader = (\r\n      instance.value as unknown as { loadData?: () => Promise<void> }\r\n    )?.loadData\r\n    if (loader) await loader.call(instance.value)\r\n    if (instance.value) {\r\n      data.value = instance.value.getData()\r\n      pagination.value = instance.value.getPagination()\r\n    }\r\n  }\r\n\r\n  function destroy() {\r\n    instance.value?.destroy()\r\n    instance.value = null\r\n  }\r\n\r\n  function on(\r\n    event: string,\r\n    callback: (...args: unknown[]) => void\r\n  ): () => void {\r\n    return instance.value?.on(event, callback) || (() => {})\r\n  }\r\n\r\n  onUnmounted(() => {\r\n    destroy()\r\n  })\r\n\r\n  return {\r\n    instance,\r\n    data,\r\n    filter,\r\n    theme,\r\n    pagination,\r\n    create,\r\n    setData,\r\n    appendData,\r\n    setFilter,\r\n    resetFilter,\r\n    setTheme,\r\n    expandEntry,\r\n    collapseEntry,\r\n    collapseAll,\r\n    goToPage,\r\n    refresh,\r\n    loadData,\r\n    destroy,\r\n    on,\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;AAkBO,SAAS,eAAe;CAC7B,MAAM,WAAW,IAAsB,IAAI;CAC3C,MAAM,OAAO,IAAgB,CAAC,CAAC;CAC/B,MAAM,SAAS,IAAkB,CAAC,CAAC;CACnC,MAAM,QAAQ,IAAe,OAAO;CACpC,MAAM,aAAa,IAAsB;EAAE,MAAM;EAAG,UAAU;CAAG,CAAC;CAElE,SAAS,OACP,WACA,QACA;EACA,IAAI,SAAS,OACX,SAAS,MAAM,QAAQ;EAGzB,SAAS,QAAQ,gBAAgB;GAC/B,GAAG;GACH;EACF,CAAC;EAGD,SAAS,MAAM,GAAG,gBAAgB,YAAwB;GACxD,KAAK,QAAQ;EACf,CAAC;EACD,SAAS,MAAM,GAAG,kBAAkB,MAAoB;GACtD,OAAO,QAAQ;EACjB,CAAC;EACD,SAAS,MAAM,GAAG,iBAAiB,MAAiB;GAClD,MAAM,QAAQ;EAChB,CAAC;EACD,SAAS,MAAM,GAAG,qBAAqB;GACrC,IAAI,SAAS,OACX,WAAW,QAAQ,SAAS,MAAM,cAAc;EAEpD,CAAC;EAED,KAAK,QAAQ,SAAS,MAAM,QAAQ;EACpC,OAAO,QAAQ,SAAS,MAAM,UAAU;EACxC,MAAM,QAAQ,SAAS,MAAM,SAAS;EACtC,WAAW,QAAQ,SAAS,MAAM,cAAc;CAClD;CAEA,SAAS,QAAQ,SAAqB;EACpC,SAAS,OAAO,QAAQ,OAAO;EAC/B,KAAK,QAAQ;CACf;CAEA,SAAS,WAAW,SAAqB;EACvC,SAAS,OAAO,WAAW,OAAO;EAClC,KAAK,QAAQ,SAAS,OAAO,QAAQ,KAAK,CAAC;CAC7C;CAEA,SAAS,UAAU,GAAiB;EAClC,SAAS,OAAO,UAAU,CAAC;EAC3B,OAAO,QAAQ;CACjB;CAEA,SAAS,cAAc;EACrB,SAAS,OAAO,YAAY;EAC5B,OAAO,QAAQ,CAAC;CAClB;CAEA,SAAS,SAAS,GAAc;EAC9B,SAAS,OAAO,SAAS,CAAC;EAC1B,MAAM,QAAQ;CAChB;CAEA,SAAS,YAAY,IAAY;EAC/B,SAAS,OAAO,YAAY,EAAE;CAChC;CAEA,SAAS,cAAc,IAAY;EACjC,SAAS,OAAO,cAAc,EAAE;CAClC;CAEA,SAAS,cAAc;EACrB,SAAS,OAAO,YAAY;CAC9B;CAEA,SAAS,SAAS,MAAc;EAC9B,SAAS,OAAO,SAAS,IAAI;CAC/B;CAEA,SAAS,UAAU;EACjB,SAAS,OAAO,QAAQ;CAC1B;CAEA,eAAe,WAAW;EACxB,MAAM,SACJ,SAAS,OACR;EACH,IAAI,QAAQ,MAAM,OAAO,KAAK,SAAS,KAAK;EAC5C,IAAI,SAAS,OAAO;GAClB,KAAK,QAAQ,SAAS,MAAM,QAAQ;GACpC,WAAW,QAAQ,SAAS,MAAM,cAAc;EAClD;CACF;CAEA,SAAS,UAAU;EACjB,SAAS,OAAO,QAAQ;EACxB,SAAS,QAAQ;CACnB;CAEA,SAAS,GACP,OACA,UACY;EACZ,OAAO,SAAS,OAAO,GAAG,OAAO,QAAQ,YAAY,CAAC;CACxD;CAEA,kBAAkB;EAChB,QAAQ;CACV,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/es/index.d.ts

@@ -12,4 +12,3 @@ export { useLogViewer } from './composables/useLogViewer';
 export { LogViewerPlugin } from './plugin';
 export type { ActionType, ThemeMode, AnomalyType, DiffEntry, LogEntry, FilterConfig, PaginationConfig, LogViewerConfig, LogViewerInstance, LogViewerEvents, } from '@composy/log-viewer-core';
 export { createLogViewer, ACTION_LABELS, ACTION_COLORS, formatDate, formatRelativeTime, } from '@composy/log-viewer-core';
-//# sourceMappingURL=index.d.ts.map

package/es/index.js

@@ -2,13 +2,13 @@
 * ***********************************
 * @composy/log-viewer-vue v0.0.1  *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:24 *
+* Build time: 2024-10-12 17:44:31 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
-import LogViewer_default from "./components/LogViewer.js";
 import { useLogViewer } from "./composables/useLogViewer.js";
+import LogViewer_default from "./components/LogViewer.js";
 import { LogViewerPlugin } from "./plugin.js";
 import { ACTION_COLORS, ACTION_LABELS, createLogViewer, formatDate, formatRelativeTime } from "@composy/log-viewer-core";
 //#region src/index.ts

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["/**\n * @composy/log-viewer-vue\n *\n * 审计日志查看器 — Vue 3 适配层\n * 提供 LogViewer 组件、useLogViewer 组合式函数和 Vue 插件\n *\n * @packageDocumentation\n */\n\nexport const VERSION = '0.1.0'\n\n// 组件\nexport { default as LogViewer } from './components/LogViewer.vue'\n\n// 组合式 API\nexport { useLogViewer } from './composables/useLogViewer'\n\n// 插件\nexport { LogViewerPlugin } from './plugin'\n\n// 重新导出核心类型\nexport type {\n  ActionType,\n  ThemeMode,\n  AnomalyType,\n  DiffEntry,\n  LogEntry,\n  FilterConfig,\n  PaginationConfig,\n  LogViewerConfig,\n  LogViewerInstance,\n  LogViewerEvents,\n} from '@composy/log-viewer-core'\n\nexport {\n  createLogViewer,\n  ACTION_LABELS,\n  ACTION_COLORS,\n  formatDate,\n  formatRelativeTime,\n} from '@composy/log-viewer-core'\n"],"mappings":";;;;;;;;;;;;;;AASO,MAAM,UAAU"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["/**\r\n * @composy/log-viewer-vue\r\n *\r\n * 审计日志查看器 — Vue 3 适配层\r\n * 提供 LogViewer 组件、useLogViewer 组合式函数和 Vue 插件\r\n *\r\n * @packageDocumentation\r\n */\r\n\r\nexport const VERSION = '0.1.0'\r\n\r\n// 组件\r\nexport { default as LogViewer } from './components/LogViewer.vue'\r\n\r\n// 组合式 API\r\nexport { useLogViewer } from './composables/useLogViewer'\r\n\r\n// 插件\r\nexport { LogViewerPlugin } from './plugin'\r\n\r\n// 重新导出核心类型\r\nexport type {\r\n  ActionType,\r\n  ThemeMode,\r\n  AnomalyType,\r\n  DiffEntry,\r\n  LogEntry,\r\n  FilterConfig,\r\n  PaginationConfig,\r\n  LogViewerConfig,\r\n  LogViewerInstance,\r\n  LogViewerEvents,\r\n} from '@composy/log-viewer-core'\r\n\r\nexport {\r\n  createLogViewer,\r\n  ACTION_LABELS,\r\n  ACTION_COLORS,\r\n  formatDate,\r\n  formatRelativeTime,\r\n} from '@composy/log-viewer-core'\r\n"],"mappings":";;;;;;;;;;;;;;AASO,MAAM,UAAU"}

package/es/plugin.d.ts

@@ -5,4 +5,3 @@ import type { App } from 'vue';
 export declare const LogViewerPlugin: {
     install(app: App): void;
 };
-//# sourceMappingURL=plugin.d.ts.map

package/es/plugin.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/log-viewer-vue v0.0.1  *
 * Built with rollup               *
-* Build time: 2024-08-17 11:42:24 *
+* Build time: 2024-10-12 17:44:31 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************

package/es/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","names":[],"sources":["../src/plugin.ts"],"sourcesContent":["/**\n * Vue 插件 - 全局注册 LogViewer 组件\n */\nimport type { App } from 'vue'\nimport LogViewer from './components/LogViewer.vue'\n\nexport const LogViewerPlugin = {\n  install(app: App) {\n    app.component('LogViewer', LogViewer)\n  },\n}\n"],"mappings":";;;;;;;;;;;AAMO,MAAM,kBAAkB,EAC7B,QAAQ,KAAU;CAChB,IAAI,UAAU,aAAa,iBAAS;AACtC,EACF"}
+{"version":3,"file":"plugin.js","names":[],"sources":["../src/plugin.ts"],"sourcesContent":["/**\r\n * Vue 插件 - 全局注册 LogViewer 组件\r\n */\r\nimport type { App } from 'vue'\r\nimport LogViewer from './components/LogViewer.vue'\r\n\r\nexport const LogViewerPlugin = {\r\n  install(app: App) {\r\n    app.component('LogViewer', LogViewer)\r\n  },\r\n}\r\n"],"mappings":";;;;;;;;;;;AAMO,MAAM,kBAAkB,EAC7B,QAAQ,KAAU;CAChB,IAAI,UAAU,aAAa,iBAAS;AACtC,EACF"}

package/es/style/css.js

@@ -1 +1 @@
-import './index.less';
+import './index.css';

package/es/style/index.css

@@ -0,0 +1,380 @@
+/* Generated from packages/core/src/styles/index.ts CSS_TEXT. */
+/* ===== CSS Variables ===== */
+.lv-root {
+  --lv-bg: var(--ld-white);
+  --lv-bg-secondary: var(--ld-bg-surface-soft);
+  --lv-bg-hover: var(--ld-primary-50);
+  --lv-border: var(--ld-border);
+  --lv-text: var(--ld-text-primary);
+  --lv-text-secondary: var(--ld-text-secondary);
+  --lv-text-muted: var(--ld-text-muted);
+  --lv-primary: var(--ld-primary-500);
+  --lv-primary-light: var(--ld-primary-50);
+  --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 4%, transparent);
+  --lv-timeline-line: var(--ld-border);
+  --lv-timeline-dot: var(--ld-primary-500);
+  --lv-diff-add-bg: var(--ld-success-50);
+  --lv-diff-add-text: var(--ld-success-700);
+  --lv-diff-del-bg: var(--ld-danger-50);
+  --lv-diff-del-text: var(--ld-danger-700);
+  --lv-anomaly-bg: var(--ld-warning-50);
+  --lv-anomaly-border: var(--ld-warning-300);
+  --lv-radius: var(--ld-radius-md);
+  --lv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --lv-font-mono: "Fira Code", "SF Mono", Consolas, monospace;
+}
+.lv-root[data-theme="dark"] {
+  --lv-bg: var(--ld-bg-surface);
+  --lv-bg-secondary: var(--ld-bg-surface-soft);
+  --lv-bg-hover: var(--ld-primary-50);
+  --lv-border: var(--ld-border-strong);
+  --lv-text: var(--ld-text-primary);
+  --lv-text-secondary: var(--ld-text-secondary);
+  --lv-text-muted: var(--ld-text-muted);
+  --lv-primary: var(--ld-primary-400);
+  --lv-primary-light: var(--ld-primary-50);
+  --lv-shadow: color-mix(in srgb, var(--ld-text-primary) 20%, transparent);
+  --lv-timeline-line: var(--ld-border-strong);
+  --lv-timeline-dot: var(--ld-primary-400);
+  --lv-diff-add-bg: var(--ld-success-50);
+  --lv-diff-add-text: var(--ld-success-700);
+  --lv-diff-del-bg: var(--ld-danger-50);
+  --lv-diff-del-text: var(--ld-danger-700);
+  --lv-anomaly-bg: var(--ld-warning-50);
+  --lv-anomaly-border: var(--ld-warning-700);
+}
+/* ===== Root ===== */
+.lv-root {
+  font-family: var(--lv-font);
+  font-size: var(--ld-px-14);
+  color: var(--lv-text);
+  background: var(--lv-bg);
+  line-height: 1.6;
+}
+/* ===== Filter Bar ===== */
+.lv-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ld-px-10);
+  padding: var(--ld-px-16);
+  background: var(--lv-bg);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--lv-radius);
+  margin-bottom: var(--ld-px-16);
+  align-items: center;
+}
+.lv-filter-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-px-6);
+  font-size: var(--ld-px-13);
+}
+.lv-filter-label {
+  color: var(--lv-text-secondary);
+  font-size: var(--ld-px-12);
+  white-space: nowrap;
+}
+.lv-filter-input {
+  padding: var(--ld-px-5) var(--ld-px-10);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  font-size: var(--ld-px-13);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  outline: none;
+  transition: border-color 0.2s;
+  min-width: var(--ld-px-120);
+}
+.lv-filter-input:focus {
+  border-color: var(--lv-primary);
+}
+.lv-filter-select {
+  padding: var(--ld-px-5) var(--ld-px-10);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  font-size: var(--ld-px-13);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  outline: none;
+  cursor: pointer;
+}
+.lv-filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ld-px-4);
+  padding: var(--ld-px-5) var(--ld-px-14);
+  font-size: var(--ld-px-13);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.lv-filter-btn:hover {
+  border-color: var(--lv-primary);
+  color: var(--lv-primary);
+}
+.lv-filter-btn--primary {
+  background: var(--lv-primary);
+  border-color: var(--lv-primary);
+  color: var(--ld-white);
+}
+.lv-filter-btn--primary:hover {
+  opacity: 0.85;
+}
+/* ===== Timeline ===== */
+.lv-timeline {
+  position: relative;
+  padding-left: var(--ld-px-28);
+}
+.lv-timeline::before {
+  content: "";
+  position: absolute;
+  left: var(--ld-px-9);
+  top: 0;
+  bottom: 0;
+  width: var(--ld-px-2);
+  background: var(--lv-timeline-line);
+}
+.lv-timeline-item {
+  position: relative;
+  padding: 0 0 var(--ld-px-20) 0;
+}
+.lv-timeline-dot {
+  position: absolute;
+  left: calc(-1 * var(--ld-px-25));
+  top: var(--ld-px-6);
+  width: var(--ld-px-12);
+  height: var(--ld-px-12);
+  border-radius: 50%;
+  background: var(--lv-bg);
+  border: var(--ld-px-2) solid var(--lv-timeline-dot);
+  z-index: 1;
+}
+.lv-timeline-dot--anomaly {
+  border-color: var(--ld-danger-500);
+  background: var(--ld-danger-50);
+}
+.lv-timeline-card {
+  background: var(--lv-bg);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--lv-radius);
+  padding: var(--ld-px-14) var(--ld-px-18);
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 var(--ld-px-1) var(--ld-px-3) var(--lv-shadow);
+}
+.lv-timeline-card:hover {
+  border-color: var(--lv-primary);
+  box-shadow: 0 var(--ld-px-2) var(--ld-px-8) var(--lv-shadow);
+}
+.lv-timeline-card--anomaly {
+  border-left: var(--ld-px-3) solid var(--lv-anomaly-border);
+  background: var(--lv-anomaly-bg);
+}
+.lv-timeline-header {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-px-10);
+  flex-wrap: wrap;
+  margin-bottom: var(--ld-px-4);
+}
+.lv-timeline-time {
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-muted);
+  font-family: var(--lv-font-mono);
+}
+.lv-timeline-user {
+  font-weight: 600;
+  font-size: var(--ld-px-14);
+}
+.lv-action-tag {
+  display: inline-block;
+  padding: var(--ld-px-1) var(--ld-px-8);
+  font-size: var(--ld-px-12);
+  border-radius: var(--ld-px-4);
+  font-weight: 500;
+  color: var(--ld-white);
+}
+.lv-action-tag--create,
+.lv-action-tag--approve {
+  background: var(--ld-success-500);
+}
+.lv-action-tag--update,
+.lv-action-tag--login {
+  background: var(--ld-primary-500);
+}
+.lv-action-tag--delete,
+.lv-action-tag--reject {
+  background: var(--ld-danger-500);
+}
+.lv-action-tag--query,
+.lv-action-tag--other {
+  background: var(--ld-text-secondary);
+}
+.lv-action-tag--logout {
+  background: var(--ld-primary-700);
+}
+.lv-action-tag--export {
+  background: var(--ld-warning-500);
+}
+.lv-action-tag--import {
+  background: var(--ld-success-500);
+}
+.lv-timeline-module {
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-secondary);
+  background: var(--lv-bg-secondary);
+  padding: var(--ld-px-1) var(--ld-px-8);
+  border-radius: var(--ld-px-4);
+}
+.lv-timeline-ip {
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-muted);
+  font-family: var(--lv-font-mono);
+}
+.lv-anomaly-badge {
+  font-size: var(--ld-px-11);
+  padding: var(--ld-px-1) var(--ld-px-6);
+  border-radius: var(--ld-px-3);
+  background: var(--ld-warning-50);
+  color: var(--ld-warning-700);
+  border: var(--ld-px-1) solid var(--ld-warning-300);
+}
+.lv-timeline-detail {
+  font-size: var(--ld-px-13);
+  color: var(--lv-text-secondary);
+  margin-top: var(--ld-px-6);
+}
+.lv-timeline-expand-hint {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  font-size: var(--ld-px-12);
+  color: var(--lv-primary);
+  margin-top: var(--ld-px-6);
+  cursor: pointer;
+}
+/* ===== Detail Panel ===== */
+.lv-detail {
+  margin-top: var(--ld-px-12);
+  padding-top: var(--ld-px-12);
+  border-top: var(--ld-px-1) dashed var(--lv-border);
+  animation: lv-slide-down 0.2s ease;
+}
+@keyframes lv-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--ld-px-8)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* ===== Diff Table ===== */
+.lv-diff-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--ld-px-13);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  overflow: hidden;
+}
+.lv-diff-table th {
+  background: var(--lv-bg-secondary);
+  padding: var(--ld-px-8) var(--ld-px-12);
+  text-align: left;
+  font-weight: 600;
+  font-size: var(--ld-px-12);
+  color: var(--lv-text-secondary);
+  border-bottom: var(--ld-px-1) solid var(--lv-border);
+}
+.lv-diff-table td {
+  padding: var(--ld-px-8) var(--ld-px-12);
+  border-bottom: var(--ld-px-1) solid var(--lv-border);
+  vertical-align: top;
+}
+.lv-diff-table tr:last-child td {
+  border-bottom: none;
+}
+.lv-diff-old {
+  background: var(--lv-diff-del-bg);
+  color: var(--lv-diff-del-text);
+  text-decoration: line-through;
+  font-family: var(--lv-font-mono);
+  font-size: var(--ld-px-12);
+}
+.lv-diff-new {
+  background: var(--lv-diff-add-bg);
+  color: var(--lv-diff-add-text);
+  font-family: var(--lv-font-mono);
+  font-size: var(--ld-px-12);
+}
+/* ===== Metadata ===== */
+.lv-metadata {
+  margin-top: var(--ld-px-10);
+  background: var(--lv-bg-secondary);
+  border-radius: var(--ld-px-6);
+  padding: var(--ld-px-10) var(--ld-px-14);
+  font-size: var(--ld-px-12);
+  font-family: var(--lv-font-mono);
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--lv-text-secondary);
+}
+/* ===== Pagination ===== */
+.lv-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ld-px-6);
+  padding: var(--ld-px-16) 0;
+}
+.lv-pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ld-px-32);
+  height: var(--ld-px-32);
+  border: var(--ld-px-1) solid var(--lv-border);
+  border-radius: var(--ld-px-6);
+  background: var(--lv-bg);
+  color: var(--lv-text);
+  font-size: var(--ld-px-13);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.lv-pagination-btn:hover {
+  border-color: var(--lv-primary);
+  color: var(--lv-primary);
+}
+.lv-pagination-btn--active {
+  background: var(--lv-primary);
+  border-color: var(--lv-primary);
+  color: var(--ld-white);
+}
+.lv-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.lv-pagination-info {
+  font-size: var(--ld-px-13);
+  color: var(--lv-text-secondary);
+  margin: 0 var(--ld-px-8);
+}
+/* ===== Empty state ===== */
+.lv-empty {
+  text-align: center;
+  padding: var(--ld-px-48) var(--ld-px-16);
+  color: var(--lv-text-muted);
+  font-size: var(--ld-px-14);
+}
+.lv-empty-icon {
+  font-size: var(--ld-px-48);
+  margin-bottom: var(--ld-px-12);
+  opacity: 0.3;
+}
+/*# sourceMappingURL=src\style\index.less.map */

package/es/style/index.js

@@ -1 +1 @@
-import './index.less';
+import './index.css';

package/esm/components/LogViewer.js

@@ -0,0 +1,17 @@
+/*!
+* ***********************************
+* @composy/log-viewer-vue v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-10-12 17:44:31 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import LogViewer_vue_vue_type_script_setup_true_lang_default from "./LogViewer.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/LogViewer.vue
+LogViewer_vue_vue_type_script_setup_true_lang_default.__file = "src/components/LogViewer.vue";
+var LogViewer_default = LogViewer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LogViewer_default as default };
+/*! End of @composy/log-viewer-vue | Powered by @composy/builder */
+//# sourceMappingURL=LogViewer.js.map

package/esm/components/LogViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.js","names":[],"sources":["../../src/components/LogViewer.vue"],"sourcesContent":["<!--\r\n  @file 日志查看器组件\r\n  @description LDesign 日志查看器组件，支持日志过滤、差异对比、异常标记等功能\r\n-->\r\n<script setup lang=\"ts\">\r\nimport { onMounted, onUnmounted, ref, watch } from 'vue-demi'\r\nimport {\r\n  createLogViewer,\r\n  type LogViewerConfig,\r\n  type LogEntry,\r\n  type FilterConfig,\r\n  type ThemeMode,\r\n  type LogViewer as LogViewerInstance,\r\n} from '@composy/log-viewer-core'\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    data?: LogEntry[]\r\n    filter?: FilterConfig\r\n    theme?: ThemeMode\r\n    pageSize?: number\r\n    showFilter?: boolean\r\n    showDiff?: boolean\r\n    showAnomalyBadge?: boolean\r\n  }>(),\r\n  {\r\n    data: () => [],\r\n    theme: 'light',\r\n    pageSize: 20,\r\n    showFilter: true,\r\n    showDiff: true,\r\n    showAnomalyBadge: true,\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  entryClick: [entry: LogEntry]\r\n  entryExpand: [entry: LogEntry]\r\n  entryCollapse: [entry: LogEntry]\r\n  filterChange: [filter: FilterConfig]\r\n  themeChange: [theme: ThemeMode]\r\n  pageChange: [page: number]\r\n}>()\r\n\r\nconst containerRef = ref<HTMLElement | null>(null)\r\nlet instance: LogViewerInstance | null = null\r\n\r\nonMounted(() => {\r\n  if (!containerRef.value) return\r\n\r\n  instance = createLogViewer({\r\n    container: containerRef.value,\r\n    data: props.data,\r\n    filter: props.filter,\r\n    theme: props.theme,\r\n    pageSize: props.pageSize,\r\n    showFilter: props.showFilter,\r\n    showDiff: props.showDiff,\r\n    showAnomalyBadge: props.showAnomalyBadge,\r\n  })\r\n\r\n  instance.on('entry:click', (entry: LogEntry) => emit('entryClick', entry))\r\n  instance.on('entry:expand', (entry: LogEntry) => emit('entryExpand', entry))\r\n  instance.on('entry:collapse', (entry: LogEntry) =>\r\n    emit('entryCollapse', entry)\r\n  )\r\n  instance.on('filter:change', (filter: FilterConfig) =>\r\n    emit('filterChange', filter)\r\n  )\r\n  instance.on('theme:change', (theme: ThemeMode) => emit('themeChange', theme))\r\n  instance.on('page:change', (page: number) => emit('pageChange', page))\r\n})\r\n\r\nwatch(\r\n  () => props.data,\r\n  newData => {\r\n    instance?.setData(newData)\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.filter,\r\n  newFilter => {\r\n    instance?.setFilter(newFilter || {})\r\n  },\r\n  { deep: true }\r\n)\r\n\r\nwatch(\r\n  () => props.theme,\r\n  newTheme => {\r\n    instance?.setTheme(newTheme)\r\n  }\r\n)\r\n\r\nonUnmounted(() => {\r\n  instance?.destroy()\r\n  instance = null\r\n})\r\n\r\ndefineExpose({\r\n  getInstance: () => instance,\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"containerRef\" class=\"lv-vue-root\"></div>\r\n</template>\r\n"],"mappings":""}

package/esm/components/LogViewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,110 @@
+/*!
+* ***********************************
+* @composy/log-viewer-vue v0.0.1  *
+* Built with rollup               *
+* Build time: 2024-10-12 17:44:31 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { createElementBlock, defineComponent, openBlock } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue-demi";
+import { createLogViewer } from "@composy/log-viewer-core";
+//#region src/components/LogViewer.vue?vue&type=script&setup=true&lang.ts
+var LogViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "LogViewer",
+	props: {
+		data: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		filter: {
+			type: Object,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false,
+			default: "light"
+		},
+		pageSize: {
+			type: Number,
+			required: false,
+			default: 20
+		},
+		showFilter: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		showDiff: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		showAnomalyBadge: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	emits: [
+		"entryClick",
+		"entryExpand",
+		"entryCollapse",
+		"filterChange",
+		"themeChange",
+		"pageChange"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const containerRef = ref(null);
+		let instance = null;
+		onMounted(() => {
+			if (!containerRef.value) return;
+			instance = createLogViewer({
+				container: containerRef.value,
+				data: props.data,
+				filter: props.filter,
+				theme: props.theme,
+				pageSize: props.pageSize,
+				showFilter: props.showFilter,
+				showDiff: props.showDiff,
+				showAnomalyBadge: props.showAnomalyBadge
+			});
+			instance.on("entry:click", (entry) => emit("entryClick", entry));
+			instance.on("entry:expand", (entry) => emit("entryExpand", entry));
+			instance.on("entry:collapse", (entry) => emit("entryCollapse", entry));
+			instance.on("filter:change", (filter) => emit("filterChange", filter));
+			instance.on("theme:change", (theme) => emit("themeChange", theme));
+			instance.on("page:change", (page) => emit("pageChange", page));
+		});
+		watch(() => props.data, (newData) => {
+			instance?.setData(newData);
+		}, { deep: true });
+		watch(() => props.filter, (newFilter) => {
+			instance?.setFilter(newFilter || {});
+		}, { deep: true });
+		watch(() => props.theme, (newTheme) => {
+			instance?.setTheme(newTheme);
+		});
+		onUnmounted(() => {
+			instance?.destroy();
+			instance = null;
+		});
+		__expose({ getInstance: () => instance });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "lv-vue-root"
+			}, null, 512);
+		};
+	}
+});
+//#endregion
+export { LogViewer_vue_vue_type_script_setup_true_lang_default as default };
+/*! End of @composy/log-viewer-vue | Powered by @composy/builder */
+//# sourceMappingURL=LogViewer.vue_vue_type_script_setup_true_lang.js.map