devject-design 0.2.3 → 0.3.0

package/README.md

@@ -10,6 +10,7 @@ Devject Design 是一个基于 Vue 3 和 Element Plus 的可视化表单设计
 - 🎨 **Element Plus 风格**：与 Element Plus UI 完美融合。
 - 🧩 **可视化设计器**：支持拖拽、属性配置、实时预览。
 - 📝 **表单渲染器**：根据 JSON 结构自动渲染表单，支持数据双向绑定与校验。
+- 👁️ **节点可见/只读**：所有内置组件支持“可见”控制，输入类组件支持“只读”控制。
 - 📤 **导入/导出**：支持 JSON 格式的布局与数据导入导出。
 - 📊 **高级组件**：
     - **静态表格 (StaticTable)**：支持 Excel 导入（自动识别表头、清空旧数据）与导出。
@@ -52,6 +53,7 @@ npm install xlsx
 | `upload-url` | 文件上传接口地址 | `string` | - |
 | `download-url` | 文件下载/访问基础路径 | `string` | - |
 | `upload-parse` | 上传响应解析路径，支持 `$`、`$.data.url` 这类写法 | `string` | `$` |
+| `file-headers` | 文件上传与下载时透传的请求头（如 `Authorization`） | `Record<string, string>` | - |
 
 ### 示例
 
@@ -70,18 +72,30 @@ VITE_DEVJECT_UPLOAD_PARSE=$.data.url
     :upload-url="uploadUrl"
     :download-url="downloadUrl"
     :upload-parse="uploadParse"
+    :file-headers="fileHeaders"
   />
 </template>
 
 <script setup lang="ts">
 import { FormDesigner } from 'devject-design'
+import { getToken } from '@/utils/common'
 
 const uploadUrl = import.meta.env.VITE_DEVJECT_UPLOAD_URL
 const downloadUrl = import.meta.env.VITE_DEVJECT_DOWNLOAD_URL
 const uploadParse = import.meta.env.VITE_DEVJECT_UPLOAD_PARSE || '$'
+const token = getToken()
+const fileHeaders = token ? { Authorization: token.startsWith('Bearer ') ? token : `Bearer ${token}` } : {}
 </script>
 ```
 
+### 上传/下载鉴权
+
+当你的文件接口启用了登录校验时，请通过 `file-headers` 透传认证头。  
+`file-headers` 会同时作用于：
+
+- 文件上传组件（`/upload` 请求）
+- 文件下载/图片预览（`/download` 请求）
+
 ## 🚀 快速开始
 
 ### 全局注册
@@ -124,6 +138,7 @@ FormDesigner 支持通过 `v-model` 双向绑定布局数据，并提供了导
       :upload-url="uploadUrl"
       :download-url="downloadUrl"
       :upload-parse="uploadParse"
+      :file-headers="fileHeaders"
     />
   </div>
 </template>
@@ -132,10 +147,13 @@ FormDesigner 支持通过 `v-model` 双向绑定布局数据，并提供了导
 import { ref } from 'vue'
 import { FormDesigner } from 'devject-design'
 import type { LayoutSchema } from 'devject-design'
+import { getToken } from '@/utils/common'
 
 const uploadUrl = import.meta.env.VITE_DEVJECT_UPLOAD_URL
 const downloadUrl = import.meta.env.VITE_DEVJECT_DOWNLOAD_URL
 const uploadParse = import.meta.env.VITE_DEVJECT_UPLOAD_PARSE || '$'
+const token = getToken()
+const fileHeaders = token ? { Authorization: token.startsWith('Bearer ') ? token : `Bearer ${token}` } : {}
 
 // 双向绑定布局数据
 const layoutSchema = ref<LayoutSchema>()
@@ -179,6 +197,7 @@ FormRenderer 支持通过 `v-model` 绑定表单数据，并提供了数据导
       :upload-url="uploadUrl"
       :download-url="downloadUrl"
       :upload-parse="uploadParse"
+      :file-headers="fileHeaders"
     />
   </div>
 </template>
@@ -187,10 +206,13 @@ FormRenderer 支持通过 `v-model` 绑定表单数据，并提供了数据导
 import { ref } from 'vue'
 import { FormRenderer } from 'devject-design'
 import type { LayoutSchema, FormDataModel } from 'devject-design'
+import { getToken } from '@/utils/common'
 
 const uploadUrl = import.meta.env.VITE_DEVJECT_UPLOAD_URL
 const downloadUrl = import.meta.env.VITE_DEVJECT_DOWNLOAD_URL
 const uploadParse = import.meta.env.VITE_DEVJECT_UPLOAD_PARSE || '$'
+const token = getToken()
+const fileHeaders = token ? { Authorization: token.startsWith('Bearer ') ? token : `Bearer ${token}` } : {}
 
 const rendererRef = ref()
 // 表单结构定义
@@ -260,7 +282,8 @@ const setFormData = () => {
 | `modelValue` | 表单布局结构绑定 (v-model) | `LayoutSchema` | - |
 | `upload-url` | 文件上传接口地址 | `string` | - |
 | `download-url` | 文件下载/访问基础路径 | `string` | - |
-| `upload-parse` | 上传响应解析路径 | `string` | `data` |
+| `upload-parse` | 上传响应解析路径 | `string` | `$` |
+| `file-headers` | 文件上传/下载透传请求头 | `Record<string, string>` | - |
 
 #### Exposed Methods
 
@@ -281,7 +304,8 @@ const setFormData = () => {
 | `modelValue` | **(必填)** 表单数据绑定 (v-model) | `FormDataModel` | `{}` |
 | `upload-url` | 文件上传接口地址 | `string` | - |
 | `download-url` | 文件下载/访问基础路径 | `string` | - |
-| `upload-parse` | 上传响应解析路径 | `string` | `data` |
+| `upload-parse` | 上传响应解析路径 | `string` | `$` |
+| `file-headers` | 文件上传/下载透传请求头 | `Record<string, string>` | - |
 
 #### Exposed Methods
 
@@ -478,6 +502,13 @@ registerComponent({
 - **手动触发**：通过 `FormRenderer` 的 `validate()` 方法。
 - **导出时触发**：调用 `exportData()` 时默认会自动校验，校验失败则抛出异常。
 
+### 4. 可见与只读
+
+- 所有内置组件都支持 `visible` 属性；当值为 `false` 时，节点会在 `FormRenderer` 预览态中隐藏。
+- 设计器画布不会因为 `visible=false` 而隐藏节点，方便继续选中和编辑。
+- 输入类组件额外支持 `readonly` 属性，用于将单个组件设为只读。
+- `FormRenderer` 顶层 `readonly` 仍然保留，适合整张表单统一只读；节点级 `readonly` 适合精细控制单个组件。
+
 
 ## 📄 许可证
 

package/dist/devject/devject-design/src/core/builtin/utils.d.ts

@@ -2,8 +2,12 @@ import { Ref } from 'vue';
 import { FormItemRule } from 'element-plus';
 import { PropConfigItem } from '../../../../../devject-design/devject-design/src/core/registry';
 import { SchemaNode, FormDataModel } from '../../../../../devject-design/devject-design/src/ui/state/types';
+export declare function commonVisibilityConfig(): PropConfigItem[];
+export declare function commonContainerTitleConfig(): PropConfigItem[];
 export declare function commonFieldConfig(includePlaceholder?: boolean): PropConfigItem[];
 export declare const commonDefault: (label: string, fieldPrefix: string) => {
+    visible: boolean;
+    readonly: boolean;
     label: string;
     field: string;
     placeholder: string;

package/dist/devject/devject-design/src/pages/FormDesigner.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     uploadUrl?: string;
     downloadUrl?: string;
     uploadParse?: string;
+    fileHeaders?: Record<string, string>;
 };
 declare function importLayout(json: any): void;
 declare const _default: import('vue').DefineComponent<__VLS_Props, {

package/dist/devject/devject-design/src/ui/PreviewDialog.d.ts

@@ -15,6 +15,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         uploadUrl?: string;
         downloadUrl?: string;
         uploadParse?: string;
+        fileHeaders?: Record<string, string>;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((v: FormDataModel) => any) | undefined;
     }>, {
@@ -39,6 +40,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
         uploadUrl?: string;
         downloadUrl?: string;
         uploadParse?: string;
+        fileHeaders?: Record<string, string>;
     }> & Readonly<{
         "onUpdate:modelValue"?: ((v: FormDataModel) => any) | undefined;
     }>, {

package/dist/devject/devject-design/src/ui/preview/FormRenderer.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     uploadUrl?: string;
     downloadUrl?: string;
     uploadParse?: string;
+    fileHeaders?: Record<string, string>;
 };
 declare function importData(data: FormDataModel): void;
 declare function exportData(validateBeforeExport?: boolean): Promise<FormDataModel>;

package/dist/devject/devject-design/src/ui/state/designerState.d.ts

@@ -1,4 +1,4 @@
-import { FormDataModel } from '../../../../../devject-design/devject-design/src/ui/state/types';
+import { FormDataModel, LayoutSchema } from '../../../../../devject-design/devject-design/src/ui/state/types';
 declare function undo(): void;
 declare function redo(): void;
 declare function applySchema(input: unknown): void;
@@ -27,34 +27,7 @@ declare function setFormData(next: FormDataModel): void;
 declare function exportFormData(): FormDataModel;
 declare function importFormData(next: unknown): void;
 export declare function useDesignerState(): {
-    schema: import('vue').ComputedRef<{
-        version: 1;
-        root: {
-            children: {
-                id: string;
-                type: string;
-                props: Record<string, any>;
-                children?: /*elided*/ any[] | undefined;
-                columns?: {
-                    id: string;
-                    width?: number | undefined;
-                    widthType?: "fr" | "px" | undefined;
-                    children: /*elided*/ any[];
-                }[] | undefined;
-                items?: {
-                    id: string;
-                    title: string;
-                    name: string;
-                    children: /*elided*/ any[];
-                }[] | undefined;
-                tabs?: {
-                    id: string;
-                    label: string;
-                    children: /*elided*/ any[];
-                }[] | undefined;
-            }[];
-        };
-    }>;
+    schema: import('vue').ComputedRef<LayoutSchema>;
     selection: {
         selectedNodeId: import('vue').Ref<string | null, string | null>;
     };

package/dist/devject/devject-design/src/ui/state/injectionKeys.d.ts

@@ -2,3 +2,4 @@ import { InjectionKey, Ref } from 'vue';
 export declare const UPLOAD_URL_KEY: InjectionKey<Ref<string | undefined>>;
 export declare const DOWNLOAD_URL_KEY: InjectionKey<Ref<string | undefined>>;
 export declare const UPLOAD_PARSE_KEY: InjectionKey<Ref<string | undefined>>;
+export declare const FILE_HEADERS_KEY: InjectionKey<Ref<Record<string, string> | undefined>>;