jvs-draw 1.1.8 → 1.1.10

package/README.md

@@ -140,11 +140,74 @@ const handleSetData = () => {
     drawRef.value.setCanvasData(newData);
   }
 };
+
+// 配置画板 (如: 开启并自定义图片上传)
+const handleSetting = () => {
+  if (drawRef.value) {
+    drawRef.value.setConfig({
+      enableImageUpload: true, // 开启自定义图片上传
+      uploadImageFn: async (file: File) => {
+        // 在这里对接你自己的后端上传接口
+        const formData = new FormData();
+        formData.append('file', file);
+        // 假设的上传请求
+        // const res = await axios.post('/api/upload', formData);
+        // return res.data.url; 
+        
+        // 此处返回模拟的线上图片地址作为示例
+        return URL.createObjectURL(file);
+      }
+    });
+  }
+};
 </script>
 ```
-
 *(注意：所有方法均需通过 `ref` 获取组件实例后调用，以支持多实例独立运行。)*
 
+### 4. 完整的可选配置项 (Config)
+
+通过组件暴露的 `setConfig` 方法，您可以传入以下参数来全局定制画板的 UI 显示及其他核心设置：
+
+| 配置项 | 类型 | 默认值 | 说明 |
+| :--- | :---: | :---: | :--- |
+| `showToolbar` | `boolean` | `true` | 是否显示左侧工具栏 (包含画笔、形状工具等) |
+| `showPropertiesPanel` | `boolean` | `true` | 是否显示右侧属性面板 (用于修改颜色、线宽等) |
+| `showBoardName` | `boolean` | `true` | 是否显示在左上角的画板名称标题 |
+| `showFooter` | `boolean` | `true` | 是否显示底部栏 (包含缩放、拖拽视口工具等) |
+| `editable` | `boolean` | `true` | 是否开启编辑模式。设为 `false` 画板进入纯浏览/只读模式 |
+| `loadFromLocal` | `boolean` | `true` | 初始化时是否优先从本地缓存读取画板数据（而非使用 `initialData`） |
+| `initialData` | `Object` | `undefined` | 初始画布数据对象。包含 `elements` (数组) 和 `appState` (对象) |
+| `enableImageUpload` | `boolean` | `false` | 是否开启自定义图片上传 |
+| `uploadImageFn` | `Function` | `undefined` | 开启图片上传时的实际拦截函数 `(file: File) => Promise<string>` |
+| `language` | `string` | `'zh-CN'` | 设置当前显示的语言，内置 `'zh-CN'` 和 `'en-US'` |
+| `showLanguageMenu` | `boolean` | `true` | 是否在左侧菜单显示语言切换选项 |
+| `languageList` | `Array` | `undefined` | 自定义语言下拉列表选项结构：`[{ label: 'x', value: 'x' }]`，传入后自动追加 |
+| `messages` | `Object` | `undefined` | 自定义外部语言的翻译字典集，结构为 `Record<string, Record<string, string>>` |
+
+### 5. 自定义国际化语言 (i18n)
+
+`jvs-draw` 内置了简体中文 (`zh-CN`) 和英文 (`en-US`)。如果需要引入其他语言并扩充下拉切换列表，可以通过传入 `languageList` 和 `messages` 来动态拓展。
+
+例如，增加繁体中文 (`zh-TW`) 支持：
+
+```typescript
+import { setConfig } from 'jvs-draw';
+
+setConfig({
+  showLanguageMenu: true, // 确保显示语言切换菜单
+  languageList: [
+    { label: '繁体中文', value: 'zh-TW' } // 新选项会自动追加在这列表里
+  ],
+  messages: {
+    'zh-TW': {
+      'board.language': '語言',
+      'board.backgroundGrid': '背景網格',
+      // ... 其它你在界面上见到的相关词条都可以在此传入重写
+    }
+  }
+});
+```
+
 ## 🧩 依赖说明
 
 - `vue` >= 3.x

package/dist/config.d.ts

@@ -1,6 +1,11 @@
+export interface LanguageOption {
+    label: string;
+    value: string;
+}
 export interface JvsDrawConfig {
     showToolbar?: boolean;
     showBoardName?: boolean;
+    showGlobalSettings?: boolean;
     showFooter?: boolean;
     showPropertiesPanel?: boolean;
     editable?: boolean;
@@ -11,6 +16,10 @@ export interface JvsDrawConfig {
     };
     enableImageUpload?: boolean;
     uploadImageFn?: (file: File) => string | Promise<string>;
+    language?: string;
+    showLanguageMenu?: boolean;
+    languageList?: LanguageOption[];
+    messages?: Record<string, Record<string, string>>;
 }
 export declare const globalConfig: JvsDrawConfig;
 export declare const setConfig: (config: Partial<JvsDrawConfig>) => void;

package/dist/core/renderer.d.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement } from '../types/element';
-export declare const renderScene: (canvas: HTMLCanvasElement, elements: readonly ExcalidrawElement[], scrollX: number, scrollY: number, zoom: number, selectedElementIds?: Record<string, boolean>, editingElementId?: string | null, erasingElementIds?: Record<string, boolean>, highlightedFrameId?: string | null, highlightedElementIds?: Record<string, boolean>, gridType?: string, hoveredLockIconId?: string | null, viewBackgroundColor?: string, images?: Record<string, string>, croppingElementId?: string | null) => void;
+export declare const renderScene: (canvas: HTMLCanvasElement, elements: readonly ExcalidrawElement[], scrollX: number, scrollY: number, zoom: number, selectedElementIds?: Record<string, boolean>, editingElementId?: string | null, erasingElementIds?: Record<string, boolean>, highlightedFrameId?: string | null, highlightedElementIds?: Record<string, boolean>, gridType?: string, viewBackgroundColor?: string, images?: Record<string, string>, croppingElementId?: string | null) => void;
 export declare const renderLaserTrails: (canvas: HTMLCanvasElement, trails: {
     x: number;
     y: number;