jvs-docx-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,63 @@
-# Temporary Holding Version
+# jvs-docx-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+基于 **Vue 3 + TypeScript + Vite + docxjs (`docx-preview`)** 构建的 Word (`.docx`) 文档预览组件库，同时支持 **独立站点部署** 与 **Vue 3 插件 NPM 发布**。
+
+## 1. 开发与构建指令
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动本地开发调试 (支持 0.0.0.0 局域网访问)
+pnpm dev
+
+# 构建可独立部署的 Web 应用（产物位于 dist/app）
+pnpm build
+
+# 构建可发布的 Vue 3 插件库（产物位于 dist/lib，包含 ES/UMD 与 .d.ts 类型声明）
+pnpm build:lib
+```
+
+## 2. 作为插件在外部项目中使用
+
+### 全局注册
+
+```ts
+import { createApp } from 'vue'
+import JvsDocxUi from 'jvs-docx-ui'
+import 'jvs-docx-ui/style.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(JvsDocxUi)
+app.mount('#app')
+```
+
+### 按需引入与方法调用
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { JvsDocx, type JvsDocxExpose } from 'jvs-docx-ui'
+import 'jvs-docx-ui/style.css'
+
+const docxRef = ref<JvsDocxExpose | null>(null)
+
+async function onFileChange(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  if (file) {
+    await docxRef.value?.importDocxFile(file, file.name)
+  }
+}
+
+async function onExport() {
+  await docxRef.value?.exportDocxFile('导出文档.docx', true)
+}
+</script>
+
+<template>
+  <div style="height: 600px">
+    <JvsDocx ref="docxRef" />
+  </div>
+</template>
+```

package/dist/lib/index.d.ts

@@ -0,0 +1,96 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { defaultOptions } from 'docx-preview';
+import { DefineComponent } from 'vue';
+import { Options as DocxPreviewOptions } from 'docx-preview';
+import { parseAsync } from 'docx-preview';
+import { Plugin as Plugin_2 } from 'vue';
+import { PublicProps } from 'vue';
+import { renderAsync } from 'docx-preview';
+import { renderDocument } from 'docx-preview';
+import { WordDocument } from 'docx-preview';
+
+export { defaultOptions }
+
+export declare const DOCX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+
+export declare type DocxInputSource = File | Blob | ArrayBuffer | Uint8Array | string;
+
+export { DocxPreviewOptions }
+
+/**
+ * 触发浏览器下载 .docx Blob
+ */
+export declare function downloadDocxBlob(blob: Blob, fileName?: string): void;
+
+export declare const JvsDocx: DefineComponent<JvsDocxProps, {
+importDocxFile: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
+renderDocx: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
+exportDocxFile: (fileName?: string, download?: boolean) => Promise<Blob>;
+clear: () => void;
+getWordDocument: () => WordDocument | null;
+getBlob: () => Blob | null;
+getContainer: () => HTMLElement | null;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+rendered: (document: any) => any;
+error: (error: Error) => any;
+change: (blob: Blob | null) => any;
+}, string, PublicProps, Readonly<JvsDocxProps> & Readonly<{
+onRendered?: ((document: any) => any) | undefined;
+onError?: ((error: Error) => any) | undefined;
+onChange?: ((blob: Blob | null) => any) | undefined;
+}>, {
+fileContent: DocxInputSource;
+fileUrl: string;
+fileName: string;
+options: Partial<DocxPreviewOptions>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+previewContainerRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+export declare interface JvsDocxExpose {
+    /** 使用 docxjs 导入并渲染 .docx 文件（支持 File / Blob / ArrayBuffer / Uint8Array / Base64 / URL） */
+    importDocxFile: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
+    /** 使用 docxjs 渲染加载 .docx 文件（importDocxFile 的别名） */
+    renderDocx: (source: DocxInputSource, fileName?: string) => Promise<WordDocument>;
+    /** 导出当前预览的 .docx 文件 */
+    exportDocxFile: (fileName?: string, download?: boolean) => Promise<Blob>;
+    /** 清空当前文档预览内容 */
+    clear: () => void;
+    /** 获取当前 docxjs 解析后的 WordDocument AST 对象 */
+    getWordDocument: () => WordDocument | null;
+    /** 获取当前文档的原始 Blob 数据 */
+    getBlob: () => Blob | null;
+    /** 获取预览容器 DOM 节点 */
+    getContainer: () => HTMLElement | null;
+}
+
+export declare interface JvsDocxProps {
+    /** Word (.docx) 文件内容（支持 File / Blob / ArrayBuffer / Uint8Array / Base64 字符串 / URL） */
+    fileContent?: DocxInputSource;
+    /** 远程或本地 .docx 文件地址 */
+    fileUrl?: string;
+    /** 默认文档名称（用于导出时默认文件名） */
+    fileName?: string;
+    /** docxjs (docx-preview) 渲染配置项 */
+    options?: Partial<DocxPreviewOptions>;
+}
+
+declare const JvsDocxUiPlugin: Plugin_2;
+export { JvsDocxUiPlugin }
+export default JvsDocxUiPlugin;
+
+/**
+ * 将各种输入源（File / Blob / ArrayBuffer / Uint8Array / Base64 / URL）统一转换为 Blob
+ */
+export declare function normalizeDocxSourceToBlob(source: DocxInputSource): Promise<Blob>;
+
+export { parseAsync }
+
+export { renderAsync }
+
+export { renderDocument }
+
+export { WordDocument }
+
+export { }

package/dist/lib/jvs-docx-ui.css

@@ -0,0 +1 @@
+.jvs-docx-viewer[data-v-ebacf228]{position:relative;width:100%;height:100%;min-height:360px;background-color:#f1f5f9;overflow:hidden;display:flex;flex-direction:column}.jvs-docx-viewer__styles[data-v-ebacf228]{display:none}.jvs-docx-viewer__container[data-v-ebacf228]{flex:1;width:100%;height:100%;overflow:auto}.jvs-docx-viewer__overlay[data-v-ebacf228]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background-color:#f1f5f9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;color:#64748b;text-align:center;-webkit-user-select:none;user-select:none}.jvs-docx-viewer__overlay--error[data-v-ebacf228]{color:#ef4444}.jvs-docx-viewer__empty-icon[data-v-ebacf228]{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:16px;background-color:#e2e8f0;color:#64748b;margin-bottom:16px}.jvs-docx-viewer__state-title[data-v-ebacf228]{margin:0 0 6px;font-size:15px;font-weight:600;color:#334155}.jvs-docx-viewer__overlay--error .jvs-docx-viewer__state-title[data-v-ebacf228]{margin-top:12px;color:#dc2626}.jvs-docx-viewer__state-desc[data-v-ebacf228]{margin:0;font-size:13px;color:#94a3b8;max-width:420px;line-height:1.6}.jvs-docx-viewer__state-text[data-v-ebacf228]{margin:14px 0 0;font-size:13px;color:#64748b}.jvs-docx-viewer__spinner[data-v-ebacf228]{width:32px;height:32px;border:3px solid #cbd5e1;border-top-color:#2563eb;border-radius:50%;animation:jvs-docx-spin-ebacf228 .75s linear infinite}@keyframes jvs-docx-spin-ebacf228{to{transform:rotate(360deg)}}.jvs-docx-viewer__container[data-v-ebacf228] .docx-wrapper{background-color:#f1f5f9;padding:24px 16px 40px;display:flex;flex-direction:column;align-items:center;min-height:100%}.jvs-docx-viewer__container[data-v-ebacf228] .docx-wrapper>section.docx{background-color:#fff;box-shadow:0 4px 16px #0f172a14,0 1px 3px #0f172a0a;border-radius:2px;margin-bottom:20px;padding:72pt 90pt}.jvs-docx-viewer__container[data-v-ebacf228] section.docx p[class*=docx-num-]:before{white-space:pre;margin-right:4pt}.jvs-docx-viewer__container[data-v-ebacf228] section.docx table{max-width:100%}.jvs-docx-viewer__container[data-v-ebacf228] section.docx img{max-width:100%}