From 87309cf94e8f513b3a73d3a8e0aa9cd03e62af6a Mon Sep 17 00:00:00 2001
From: herenshan112 <hreenshan112@163.com>
Date: Thu, 26 Feb 2026 10:01:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BC=96=E8=BE=91=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/DesignForm/types.ts                   |    2 +
 src/components/DesignForm/app/index.vue       |   14 +-
 .../DesignForm/app/index_20260129.vue         |    5 +-
 src/components/DesignForm/dragControlApp.vue  |    1 +
 .../DesignForm/formControlPropertiNew.vue     |    2 +-
 src/components/DesignForm/formVersion.vue     |   14 +-
 src/views/login/index.vue                     |    1 +
 .../appPage/appPageForm/pageForm.vue          |    3 +-
 .../appPage/appPageForm/pageFormNew.vue       |  494 +++++-
 .../appPageForm/unitsPageFrom/attribute.vue   | 1350 +++++++++++++++++
 .../appPageForm/unitsPageFrom/control.vue     |  257 ++++
 .../appPageForm/unitsPageFrom/design.vue      |  241 +++
 .../lowcodepage/appPage/createAppFormPage.vue |    8 +-
 13 files changed, 2340 insertions(+), 52 deletions(-)
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/attribute.vue
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/control.vue
 create mode 100644 src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/design.vue

diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index 40bf9f7..b9440d8 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -196,6 +196,8 @@ export interface PublicAtrr{
 	isNum?:boolean;
 	inputStyle?:string;
 	vIf?:any;
+	selectvalue?:any;
+	control?:any;
 }
 //低代码视频单个属性对象
 export interface VideoMsg  {
diff --git a/src/components/DesignForm/app/index.vue b/src/components/DesignForm/app/index.vue
index 2ded39f..b6c1979 100644
--- a/src/components/DesignForm/app/index.vue
+++ b/src/components/DesignForm/app/index.vue
@@ -1136,10 +1136,10 @@ watch(
 
 
 
-const timeAxisRef = ref(null);
-const groupPageRef = ref(null);
-const calendarPageRef = ref(null);
-const cardPageRef = ref(null);
+const timeAxisRef = ref();
+const groupPageRef = ref();
+const calendarPageRef = ref();
+const cardPageRef = ref();
 const searchSend = reactive({
   formId: props.formId,
   page: state.currentPage,
@@ -2474,9 +2474,9 @@ const getNonValue = () => {
               sortable="custom"
               align="center"
             >
-              <template #default="scope">
-                <template v-for="sunItem in item.children" v-if="item.pattern == 'table'"> 
-                  <el-table-column  v-if="sunItem.fieldClass == ''" :prop="sunItem.field" :label="sunItem.label"  header-align="center"  align="center" :min-width="readerColumnSun(sunItem)">
+              <template v-if="item.pattern == 'table'" #default>
+                <template  v-for="sunItem in item.children" :key="sunItem.field"> 
+                  <el-table-column v-if="sunItem.fieldClass == ''"   v-bind="sunItem" :prop="sunItem.field" :label="sunItem.label"  header-align="center"  align="center" :min-width="readerColumnSun(sunItem)">
                     <template #default="scopeChilder">
                       <div v-html="tableChildren(sunItem.field,scopeChilder.row[item.field])"></div>
                     </template>
diff --git a/src/components/DesignForm/app/index_20260129.vue b/src/components/DesignForm/app/index_20260129.vue
index bce9adb..383f81a 100644
--- a/src/components/DesignForm/app/index_20260129.vue
+++ b/src/components/DesignForm/app/index_20260129.vue
@@ -51,7 +51,7 @@ const props = withDefaults(
         formBasicConfig?: any;
         fieldsDetailList?: any;
         orgAndManTree?: any;
-        echatsViews: echatsViewStruct;
+        echatsViews: echatsViewStruct[];
     }>(),
     {
         showPage: true,
@@ -173,6 +173,9 @@ const props = withDefaults(
         pickAppMenu: () => {
             return {};
         },
+        echatsViews: () => {
+            return [];
+        },
         beforeRequest: (params: any, rout: any):any => {
             return
         },
diff --git a/src/components/DesignForm/dragControlApp.vue b/src/components/DesignForm/dragControlApp.vue
index 7c3d6fd..58c6c52 100644
--- a/src/components/DesignForm/dragControlApp.vue
+++ b/src/components/DesignForm/dragControlApp.vue
@@ -117,6 +117,7 @@ const clone = (origin: any) => {
 </script>
 <template>
   <div class="components-list">
+    {{props}}
     <div v-for="(list, index) in controlList" :key="index" v-memo="[index]">
       <div class="title">
         {{ list.title }}
diff --git a/src/components/DesignForm/formControlPropertiNew.vue b/src/components/DesignForm/formControlPropertiNew.vue
index 3055ead..e29d81a 100644
--- a/src/components/DesignForm/formControlPropertiNew.vue
+++ b/src/components/DesignForm/formControlPropertiNew.vue
@@ -6453,7 +6453,7 @@ const formatTooltip = (val: number) => {
           <!-- <div class=""><h3>通用属性</h3></div> -->
           <el-divider content-position="left">通用属性</el-divider>
 
-          <template v-for="(item, index) in attrList" :key="index">
+          <template v-for="(item, index) in attrList" :key="icndex">
             <!-- <template v-if="item.label == '添加时间水印'">
 
                   <el-form-item :label="item.label" v-if="controlData.control.onSiteShot=='1'" class="form_cont">
diff --git a/src/components/DesignForm/formVersion.vue b/src/components/DesignForm/formVersion.vue
index 4966d52..8e5efe7 100644
--- a/src/components/DesignForm/formVersion.vue
+++ b/src/components/DesignForm/formVersion.vue
@@ -137,16 +137,24 @@ const setColor = (val:number) => {
 </template>
 <style  lang='scss' scoped>
 .use-template{
-	width:250px;
+	width:310px;
 	top: 40px;
 	.list{
 		padding: 30px 5px;
+		:deep .el-timeline-item__node--normal{
+			left: 5px;
+			top: 10px;
+		}
+		:deep .el-card__body{
+			padding:15px;
+			// color: #FFF;
+		}
 	}
 }
 .timeLineBox{
 	height: calc(100vh - 80px);
-	::v-deep .el-card__body{
-		padding:5px;
+	:deep .el-card__body{
+		padding:15px;
 		// color: #FFF;
 	}
 }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 1b42e18..144c25e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -38,6 +38,7 @@
                 :type="passwordVisible === false ? 'password' : 'input'"
                 size="large"
                 name="password"
+                show-password
                 @keyup="checkCapslock"
                 @keyup.enter="handleLogin"
               />
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
index 4e0dd84..cf48b7f 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue
@@ -29,6 +29,7 @@ import {
   previewAppFormVersion,
 } from "@/api/DesignForm/requestapi";
 import { treeStruct } from "@/api/DesignForm/type";
+import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils'
 
 //引入页面
 import DragControlApp from "@/components/DesignForm/dragControlApp.vue";
@@ -97,7 +98,7 @@ const state = computed({
   },
 });
 
-const formControlAttrEl = ref(null);
+const formControlAttrEl = ref();
 
 provide("formDesignType", state.value.designType);
 const appFormKeyVal = computed({
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFormNew.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFormNew.vue
index 92b8dab..51144cb 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFormNew.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFormNew.vue
@@ -5,6 +5,33 @@
 -->
 <script lang='ts' setup>
 import { FormData, formStruct, DrawerStruct, VideoMsg } from "@/api/DesignForm/types";
+import {
+  json2string,
+  objToStringify,
+  string2json,
+  stringToObj,
+} from "@/utils/DesignForm/form";
+import {
+  saveProductionForm,
+  asfHandle,
+  getOneProductionForm,
+  haveCustomerFormVersion,
+  editCustomerFormInfo,
+  saveAsNewVersion,
+  enableVersion,
+  judgeSubmitCancel,
+  createAppForm,
+  editAppPageInfo,
+  saveOtherVersion,
+  previewAppFormVersion,
+} from "@/api/DesignForm/requestapi";
+import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils'
+
+import Control from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/control.vue";
+import Design from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/design.vue";
+import Attribute from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/attribute.vue";
+import { customerFormVersionCont } from "@/api/DesignForm/type";
+import { useRoute } from "vue-router";
 
 const props = defineProps({
     appCont: {
@@ -56,34 +83,366 @@ const emits = defineEmits<{
     (e: "runNextWindows", val: number): void;
     (e: "closeFormPage"): void;
 }>();
+const isWeb = ref(false);
+const route: any = useRoute().query || {};
+const versionCont = ref<customerFormVersionCont[]>([]); //版本内容列表
+const formControlAttrEl = ref();
+const isEdit = ref(false);
+const versionId = ref<string>(""); //版本号
+const state = computed({
+  get() {
+    return props.state;
+  },
+  set(val: formStruct) {
+    emits("update:state", val);
+  },
+});
+const formFieldAry = ref<string[]>([]);
+const sunFormFieldAry = ref<string[]>([]);
+
+const drawer = reactive<DrawerStruct>({
+  visible: false,
+  type: "",
+  title: "",
+  codeType: "",
+  direction: undefined, //弹出方向rtl / ltr
+  callback: "",
+});
+
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-24 13:39:25
+@ 功能: 获取表单内容
+*/
+const gainTableForm = () => {
+  if (props.appPageKey) {
+    isEdit.value = true;
+    state.value.loading = true;
+    getOneProductionForm({ id: props.appPageKey.toString() })
+      .then((res: any) => {
+        if (res.code == 0) {
+          const result = res.data;
+          // console.log("初始设计搜索时--1--->", result);
+          formFieldAry.value = result.formField;
+          sunFormFieldAry.value = result.tableStructureMap;
+          // 初始设计搜索时res.data=''
+          if (result.mastesform) {
+            state.value.formData = stringToObj(result.mastesform);
+          }
+          // console.log("初始设计搜索时",state.value.formData)
+          if (result.mastesformjson) {
+            let kjdkjksd = string2json(result.mastesformjson);
+            // console.log("初始设计搜索时-begin-->",state.value.formData.purview)
+            state.value.formData.purview = kjdkjksd.purview;
+            if (kjdkjksd.aiConfig) {
+              state.value.formData.aiConfig = kjdkjksd.aiConfig;
+            } else {
+              state.value.formData.aiConfig = [];
+            }
+
+            // console.log("初始设计搜索时--->",kjdkjksd)
+          }
+          state.value.formData.config.groupKey = result.groupKey;
+          state.value.formData.config.classify = result.classify;
+          // console.log("初始设计搜索时--end->",state.value.formData)
+          state.value.formDict = string2json(result.dict);
+          // 恢复表单名称
+          state.value.formOtherData.source = result.source;
+          state.value.formOtherData.formName = result.name;
+
+          state.value.formOtherData.formName = result.name;
+          state.value.formData.form.name = result.tablekey;
+          state.value.formData.form.formName = result.name;
+          if (result.source && state.value.designType !== "search") {
+            // 加载属性侧边栏的字段标识，搜索时不需要请求
+            formControlAttrEl.value.getFormFieldBySource(result.source);
+          }
+          if (result.flowIsOpen != 1) {
+            emits("judgeFormIsEdit", false);
+          } else {
+            emits("judgeFormIsEdit",  true);
+          }
+          emits("update:formVersion", result.id.toString());
+        } else {
+          ElMessage.error(res.msg || "加载异常");
+        }
+        state.value.loading = false;
+      })
+      .finally(() => {
+        haveCustomerFormVersion({ id: state.value.formData.form.name }).then(
+          ({ data }) => {
+            versionCont.value = data;
+            if (data.length > 0) {
+              data.forEach((item: any) => {
+                if (item.status == 1) {
+                  versionId.value = item.id.toString();
+                  emits("update:formVersion", item.id.toString());
+                }
+              });
+            }
+          }
+        );
+      })
+      .catch((res: any) => {
+        // console.log(res)
+        ElMessage.error(res.msg || "加载异常");
+        state.value.loading = false;
+      });
+  }
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 14:29:06
+@ 功能: 根据启用版本进行加载页面
+*/
+const versionUpdateForm = (val: string) => {
+  // console.log("加载异常-------111------->",val)
+  versionId.value = val;
+  gainTableForm();
+};
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-24 13:42:25
+@ 功能: 预览版本
+*/
+const versionPreviewPage = (val: string) => {
+  if (val) {
+    versionId.value = val;
+    previewAppFormVersion({ id: val }).then((res: any) => {
+      if (res.code == 0) {
+        const result = res.data;
+        // console.log("初始设计搜索时--1--->",result)
+        formFieldAry.value = result.formField;
+        sunFormFieldAry.value = result.tableStructureMap;
+        // 初始设计搜索时res.data=''
+        if (result.mastesform) {
+          state.value.formData = stringToObj(result.mastesform);
+        }
+        // console.log("初始设计搜索时",state.value.formData)
+        if (result.mastesformjson) {
+          let kjdkjksd = string2json(result.mastesformjson);
+          // console.log("初始设计搜索时-begin-->",state.value.formData.purview)
+          state.value.formData.purview = kjdkjksd.purview;
+          // console.log("初始设计搜索时--->",kjdkjksd)
+        }
+        state.value.formData.config.groupKey = result.groupKey;
+        // console.log("初始设计搜索时--end->",state.value.formData)
+        state.value.formDict = string2json(result.dict);
+        // 恢复表单名称
+        state.value.formOtherData.source = result.source;
+        state.value.formOtherData.formName = result.name;
+
+        state.value.formOtherData.formName = result.name;
+        state.value.formData.form.name = result.tablekey;
+        state.value.formData.form.formName = result.name;
+        if (result.source && state.value.designType !== "search") {
+          // 加载属性侧边栏的字段标识，搜索时不需要请求
+          formControlAttrEl.value.getFormFieldBySource(result.source);
+        }
+        if (result.flowIsOpen != 1) {
+          emits("judgeFormIsEdit", false);
+        } else {
+          emits("judgeFormIsEdit",  true);
+        }
+      } else {
+        ElMessage.error(res.msg || "加载异常");
+      }
+      state.value.loading = false;
+    });
+  }
+};
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-24 15:41:53
+@ 功能: 关联选项设置
+*/
+function optionsValue3Get3(data: any, fieldName: string) {
+  /* console.log("pageForm", "optionsValue3Get3");
+  console.log(state.value.formData.list);
+  console.log(data);
+  console.log(fieldName); */
+  for (let i = 0; i < state.value.formData.list.length; i++) {
+    if (state.value.formData.list[i].name == fieldName) {
+      state.value.formData.list[i].options = [];
+      for (let j = 0; j < data.length; j++) {
+        state.value.formData.list[i].options.push(data[j]);
+      }
+    }
+  }
+}
+
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 10:51:57
+@ 功能: 执行哪个按钮的操作
+*/
+const buttonCallbackEvent = (type: string) => {
+  console.log("执行哪个按钮的操作",type);
+}
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 11:22:02
+@ 功能: 打开脚本预览
+*/
+const openAceEditDrawer = (params: any) => {
+  // console.log("打开脚本预览====:", params);
+  const { type, direction, codeType, title, callback, content } = params;
+  drawer.direction = direction; // 窗口位置ltr/rtl
+  drawer.type = type; // 作为窗口唯一标识，在窗口关闭时可根据type作不同处理
+  drawer.codeType = codeType || ""; // 显示代码类型
+  drawer.title = title ? `提示：${title}` : "";
+  drawer.visible = true;
+  drawer.callback = callback;
+  let editData =
+    codeType === "json" ? json2string(content, true) : objToStringify(content, true);
+
+  // console.log("打开脚本预览===1=:", type, editData);
+  switch (type) {
+    case "css":
+      editData = state.value.formData.config?.style || "";
+      break;
+    case "dict":
+      // 格式化一下
+      editData = json2string(state.value.formDict, true);
+      break;
+    case "cascader":
+      //   console.log("打开脚本预览==2=2=:", stringToObj(editData));
+      editData = stringToObj(editData);
+      break;
+    case "treeSelect":
+      let kvjData = stringToObj(editData);
+      //   console.log("打开脚本预览==2=2=:", editData, kvjData);
+      //   editData = stringToObj(editData);
+      if (kvjData == "" || kvjData == null || kvjData == undefined) {
+        editData = [];
+        // console.log("打开脚本预览==2=4=:", kvjData);
+      } else {
+        editData = stringToObj(editData);
+        // console.log("打开脚本预览==2=5=:", editData);
+      }
+      //   console.log("打开脚本预览==2=3=:", editData);
+      break;
+    case "beforeRequest":
+    case "beforeSubmit":
+    case "afterResponse":
+    case "afterSubmit":
+    case "change":
+      // eslint-disable-next-line no-case-declarations
+      const beforeData = state.value.formData.events || {};
+      if (beforeData[type]) {
+        editData = objToStringify(beforeData[type], true);
+      } else {
+        if (["afterResponse", "afterSubmit"].includes(type)) {
+          editData = afterResponse;
+        } else if (type === "change") {
+          editData = onChange;
+        } else {
+          editData = beforeRequest;
+        }
+      }
+      break;
+    // case 'afterResponse':
+    // case 'afterSubmit':
+    //   const newData = state.formData.events || {}
+    //   if (newData[type]) {
+    //     editData = objToStringify(newData[type], true)
+    //   } else {
+    //     editData = afterResponse
+    //   }
+    //   break
 
-const attrActiveTab = ref("first");
+    case "optionsParams":
+      if (!content) {
+        editData = beforeRequest;
+      }
+      break;
+    case "optionsResult":
+      if (!content) {
+        editData = afterResponse;
+      }
+      break;
+  }
+  drawer.content = editData;
+  // console.log("打开脚本预览==2=222=:", drawer.content);
+};
+/**
+@ 作者: 李文轩
+@ 时间: 2026-02-25 11:26:46
+@ 功能: 关联选项设置	修复bug:当字段标识改变时，关联选项设置的字段标识未同步更改
+*/
+const formNameChanged = (param1: any) => {
+  for (let i = 0; i < state.value.formData.list.length; i++) {
+    if (
+      state.value.formData.list[i].type == "radio" ||
+      state.value.formData.list[i].type == "select" ||
+      state.value.formData.list[i].type == "checkbox"
+    ) {
+      if (
+        state.value.formData.list[i].control.glxxsz != undefined &&
+        state.value.formData.list[i].control.glxxsz.length > 0
+      ) {
+        state.value.formData.list[i].control.glxxsz = [];
+        state.value.formData.list[i].options.push({
+          label: "",
+          value: "",
+        });
+        state.value.formData.list[i].options.pop();
+      }
+      if (
+        state.value.formData.list[i].control.glxxszForCheckBox != undefined &&
+        state.value.formData.list[i].control.glxxszForCheckBox.length > 0
+      ) {
+        state.value.formData.list[i].control.glxxszForCheckBox = [];
+      }
+    }
+  }
+  // ElMessage({
+  // 	message: '因字段标识改变，本表单的所有单选、多选、下拉的关联选项设置已重置，请重新设置。',
+  // 	type: 'warning',
+  // })
+};
+
+defineExpose({
+  gainTableForm,
+});
+onMounted(() => {
+    if (route.source) {
+      formControlAttrEl.value.getFormFieldBySource(route.source);
+    }
+    gainTableForm();
+});
 </script>
 <template>
   <div class="form-content">
-    <el-card  shadow="always">
-        <template #header>
-            <div class="card-header">控件库</div>
-        </template>
-        <el-scrollbar ref="scrollbarRef" class="scroBox ">
-
-        </el-scrollbar>
-    </el-card>
-    <el-card  shadow="always">
-         <template #header>
-            <div class="card-header">控件库</div>
-        </template>
-    </el-card>
-    <el-card  shadow="always">
-         <template #header>
-            <div class="card-header">控件库</div>
-        </template>
-        <el-tabs v-model="attrActiveTab">
-            <el-tab-pane label="字段设置" name="first">字段设置</el-tab-pane>
-            <el-tab-pane label="表单设置" name="second">表单设置</el-tab-pane>
-            <el-tab-pane label="AI设置" name="third">AI设置</el-tab-pane>
-        </el-tabs>
-    </el-card>
+    <Control 
+      :table-key="state.formData.form.name" 
+      @version-update-form="versionUpdateForm"
+      @version-preview-page="versionPreviewPage" 
+    />
+    <Design 
+      v-model:is-web="isWeb"
+      :type="5"
+      :form-data="state.formData"
+      :dict="state.formDict"
+      @options-value3-get3="optionsValue3Get3"
+      @click="buttonCallbackEvent"
+    />
+    <Attribute 
+      ref="formControlAttrEl"
+      v-model:formOtherData="state.formOtherData"
+      :form-data="state.formData.form"
+      :form-config="state.formData.config"
+      :customerformid="props.appPageKey"
+      :form-list="state.formData.list"
+      :form-info="state.formData"
+      :is-edit="isEdit"
+      :form-field="formFieldAry"
+      :sun-form-field="sunFormFieldAry"
+      :state="state"
+      @open-dialog="openAceEditDrawer"
+      @form-name-change="formNameChanged"
+    />
+    
   </div>
 </template>
 <style  lang='scss' scoped>
@@ -94,7 +453,29 @@ const attrActiveTab = ref("first");
     grid-template-rows: auto;
     gap: 10px;
     padding: 10px 10px 0 10px;
-
+    :deep .el-tabs--border-card{
+        border: 0;
+    }
+    :deep .el-card__header{
+        padding: 10px 15px;
+        background-color: #f5f7fa;
+    }
+    :deep .el-card__body{
+        padding: 0;
+        
+    }
+    :deep .el-tabs__header{
+        justify-content: space-between;
+        width: 100%;
+    }
+    :deep .is-active{
+        border-bottom: 1px solid var(--el-color-primary);
+    }
+}
+.cardHeader{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 .card-header{
     font-size: 1.4rem;
@@ -104,20 +485,63 @@ const attrActiveTab = ref("first");
     align-items: center;
     gap: 10px;
 }
-:deep .el-card__header{
-    padding: 10px 15px;
-}
-:deep .el-card__body{
-    padding: 0;
-    
-}
-:deep .el-tabs__header{
-    justify-content: space-between;
-    width: 100%;
+.category-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #165DFF;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ebeef5;
 }
 
 .scroBox{
     height: calc(100vh - 110px);
     overflow: auto;
 }
+
+// 布局区域
+
+.unitBox{
+    padding: 10px 15px;
+}
+.unitBody{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+}
+.unitItem{
+    background: #f5f7fa;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 10px 5px; /* 减小内边距以适应3列布局 */
+    text-align: center;
+    cursor: grab;
+    transition: all 0.2s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &:hover{
+        background: #ecf5ff;
+        transform: translateY(-2px);
+        box-shadow: 0 2px 12px 0 rgba(22, 93, 255, 0.1);
+        border-color: #b3d8ff;
+        color: #165DFF;
+    }
+}
+.control-icon {
+    font-size: 25px; /* 减小图标大小以适应3列布局 */
+    color: #165DFF;
+    margin-bottom: 3px; /* 减小间距以适应3列布局 */
+}
+        
+.control-name {
+    font-size: 12px; /* 减小字体大小以适应3列布局 */
+    color: #606266;
+    line-height: 1.2;
+}
+
+// 设计区域工具栏
+
+// 属性设置
+
 </style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/attribute.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/attribute.vue
new file mode 100644
index 0000000..ba8482e
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/attribute.vue
@@ -0,0 +1,1350 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2026-02-24 13:23:51
+@ 备注: 属性
+-->
+<script lang='ts' setup>
+import validateConfig  from "@/components/DesignForm/validate";
+import { useDesignFormStore } from "@/store/DesignForm/designForm";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import { ValidateTextTypes } from "@/components/DesignForm/validateText";
+import { formStruct, PublicAtrr, VideoMsg } from "@/api/DesignForm/types";
+import { formatNumber } from "@/api/DesignForm/utils";
+
+
+const props = withDefaults(
+  //接收父级参数
+  defineProps<{
+    formData: any;
+    formList: any;
+    formConfig: any;
+    formOtherData: any;
+    customerformid: number | string;
+    formInfo: any;
+    isEdit: boolean;
+    formField: any[];
+    sunFormField: any[];
+    state: formStruct;
+  }>(),
+  {
+    formConfig: () => {
+      return {};
+    },
+    isEdit: () => {
+      return false;
+    },
+    formField: () => {
+      return [];
+    },
+    sunFormField: () => {
+      return [];
+    },
+    formOtherData: () => {
+      // 其他不需要保存在formData里的数据
+      return {};
+    },
+  }
+);
+//注册自定义事件
+const emits = defineEmits<{
+  (e: "openDialog", data: any): void;
+  (e: "update:formOtherData", data: any): void;
+  (e: "videoMsgChange", data: VideoMsg): void;
+  (e: "formNameChange", data: any): void;
+  //(e: 'update:formData', data: any): void
+  //(e: 'update:formConfig', data: any): void
+}>();
+const { formConfig, formData } = toRefs(props);
+const attrActiveTab = ref("first");
+const dataSourceOption = ref([]);
+const designType = inject("formDesignType");
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 11:36:09
+@ 功能: 从设计表单store中获取当前选中元素的属性
+*/
+const store = useDesignFormStore() as any;
+const controlData = computed(() => {
+    return store.controlAttr;
+});
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 11:39:45
+@ 功能: 必填选择
+*/
+const ValidateText = reactive<ValidateTextTypes>({
+    type: "required",
+    label: "必填",
+    regExp: /^\s*$/,
+    message: "必填项",
+    checkbox: false,
+});
+
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 15:04:26
+@ 功能: 表单
+*/
+const stateForm = reactive({
+    dataSourceList: [],
+    customRulesList: [
+        ...validateConfig,
+        {
+        type: "rules",
+        label: "自定义正则",
+        },
+        {
+        type: "methods",
+        label: "自定义方法",
+        },
+    ], // 自定义校验规则
+    isSearch: designType === "search",
+    tooltip: {
+        css: "当前表单应用页的样式，类似于.vue文件中的style scoped中的样式",
+        dict:
+        '数据字典，用于匹配多选组、下拉选择等，提供动态获取Options接口字典数据，一般不设置，从接口dict获取。json格式："sex":{"0":"男","1":"女"}',
+        rules:
+        "可参考UI组件表单校验，<a href='https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C' target='_blank' style='color:red'>详情点击</a>",
+        props: "可添加当前组件所有prop属性及事件方法",
+    },
+    tabsName: "second",
+    numberRulesList: [
+        {
+        type: "time",
+        label: "时间",
+        msg: "请选择时间格式",
+        },
+        {
+        type: "text",
+        label: "自定义字符",
+        msg: "请输入自定义字符",
+        },
+        {
+        type: "serialnumber",
+        label: "流水序号",
+        msg: "流水号起始值"
+        },
+        {
+        type: "randomnumber",
+        label: "随机数",
+        msg: "请输入随机数位数",
+        },
+    ],
+});
+/**
+@ 作者: 秦东
+@ 时间: 2024-08-14 08:41:02
+@ 功能: 单选校验
+*/
+const radioVerify = reactive<ValidateTextTypes>({});
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 11:30:36
+@ 功能: 字段属性设置
+*/
+const attrList = computed(() => {
+    if (Object.keys(controlData.value).length) {
+        const {
+            control = {},
+            type,
+            name,
+            config = {},
+            item = {},
+            attr = {},
+            selectvalue = "default",
+            mathFormula = {},
+            unitName,
+        }: {
+            control: any;
+            type: any;
+            name: any;
+            item: any;
+            attr: any;
+            config: any;
+            selectvalue: any;
+            mathFormula: any;
+            unitName: any;
+        } = controlData.value;
+
+            let columnIndex = false; // 是否显示序号列
+            if (type === "table") {
+                // 表格时处理
+                const list = controlData.value && controlData.value.list;
+                if (list && list.length > 0) {
+                    columnIndex = list[0].type === "index";
+                }
+            }
+            //判断校验规则
+            if (typeof controlData.value.customRules == "object") {
+                if (Array.isArray(controlData.value.customRules)) {
+                    let otherPick: any[] = [];
+                    controlData.value.customRules.forEach((itemInfo: any) => {
+                        if (itemInfo.type == ValidateText.type) {
+                            ValidateText.checkbox = itemInfo.checkbox;
+                        }else{
+                            otherPick.push(itemInfo);
+                        }
+                    })
+                    if (otherPick.length > 0) {
+                        otherPick.forEach((itemInfo: any) => {
+                            radioVerify.type = itemInfo.type;
+                            radioVerify.label = itemInfo.label;
+                            radioVerify.regExp = itemInfo.regExp;
+                            radioVerify.message = itemInfo.message;
+                            radioVerify.checkbox = true;
+                        });
+                    }
+                }
+            } 
+            //组件属性
+            const temp = reactive<PublicAtrr[]>([
+                {
+                    label: "标签名称",
+                    value: item.label,
+                    path: "item.label",
+                    vHide: [
+                    "grid",
+                    "tabs",
+                    "title",
+                    "gridChild",
+                    "div",
+                    "inputSlot",
+                    "flex",
+                    "button",
+                    "txt",
+                    ],
+                    eventName: "labelNameVal",
+                },
+                {
+                    label: "标题",
+                    value: control.modelValue,
+                    path: "control.modelValue",
+                    vShow: ["title"],
+                },
+                {
+                    label: "组件类型",
+                    value: unitName,
+                    placeholder: "组件类型",
+                    path: "unitName",
+                },
+                // {
+                //     label: '自定义Class',
+                //     value: config.className,
+                //     placeholder: '样式类名',
+                //     path: 'config.className'
+                // },
+                {
+                    label: "字段标识",
+                    value: name,
+                    type: Object.keys(stateForm.dataSourceList).length > 0 ? "selectDataSoure" : "text",
+                    placeholder: "字段唯一标识，对应数据库",
+                    dict: stateForm.dataSourceList,
+                    path: "name",
+                    vHide: [
+                    "grid",
+                    "tabs",
+                    "card",
+                    "title",
+                    "gridChild",
+                    "tableColumn",
+                    "divider",
+                    "txt",
+                    "div",
+                    "button",
+                    ],
+                    eventName: "filedNameKey",
+                },
+                {
+                    label: "占位内容",
+                    value: control.placeholder,
+                    placeholder: "placeholder",
+                    path: "control.placeholder",
+                    vShow: [
+                    "password",
+                    "input",
+                    "textarea",
+                    "select",
+                    "date",
+                    "number",
+                    "datePicker",
+                    "tinymce",
+                    "timePicker",
+                    "treeSelect",
+                    "digitpage",
+                    ],
+                },
+                {
+                    label: "帮助信息",
+                    value: config.help,
+                    path: "config.help",
+                    vHide: [
+                    "table",
+                    "grid",
+                    "tabs",
+                    "gridChild",
+                    "divider",
+                    "div",
+                    "inputSlot",
+                    "flex",
+                    "button",
+                    "txt",
+                    ],
+                },
+                {
+                    label: "按钮类型",
+                    value: control.type,
+                    path: "control.type",
+                    type: "select",
+                    dict: {
+                    primary: "primary",
+                    success: "success",
+                    info: "info",
+                    warning: "warning",
+                    danger: "danger",
+                    },
+                    vShow: ["button"],
+                    clearable: true,
+                },
+                {
+                    label: "按钮名称",
+                    value: control.label,
+                    path: "control.label",
+                    vShow: ["button"],
+                },
+                {
+                    label: "按钮事件",
+                    value: control.key,
+                    path: "control.key",
+                    type: "select",
+                    dict: {
+                    submit: "提交表单",
+                    reset: "重置表单",
+                    cancel: "取消返回",
+                    none: "无动作(自定义)",
+                    },
+                    vShow: ["button"],
+                },
+                {
+                    label: "对齐方式",
+                    value: config.textAlign,
+                    path: "config.textAlign",
+                    type: "select",
+                    dict: {
+                    left: "left",
+                    right: "right",
+                    center: "center",
+                    },
+                    vShow: ["button", "div"],
+                },
+
+                {
+                    label: "隐藏标签",
+                    value: item.showLabel,
+                    path: "item.showLabel",
+                    type: "switch",
+                    vHide: [
+                    "table",
+                    "grid",
+                    "tabs",
+                    "title",
+                    "gridChild",
+                    "divider",
+                    "card",
+                    "div",
+                    "inputSlot",
+                    "flex",
+                    "button",
+                    "txt",
+                    ],
+                },
+
+                
+                /*{
+                            label: '行类样式',
+                            value: config.inline,
+                            type: 'switch',
+                            path: 'config.inline',
+                            vShow: ['div']
+                            },*/
+                {
+                    label: "文本值",
+                    value: control.modelValue,
+                    placeholder: "支持html",
+                    path: "control.modelValue",
+                    vShow: ["txt"],
+                    inputStyle: "textarea",
+                },
+                {
+                    label: "设为密码",
+                    value: type,
+                    type: "select",
+                    dict: { input: "文本", password: "密码" },
+                    path: "type",
+                    vShow: ["input", "password"],
+                    vIf: stateForm.isSearch, // 搜索模式下隐藏 为true
+                },
+                {
+                    label: "文本域高度",
+                    value: control.rows,
+                    placeholder: "输入框行数",
+                    path: "control.rows",
+                    vShow: ["textarea"],
+                    isNum: true,
+                },
+                {
+                    label: "前缀",
+                    value: config.prepend,
+                    placeholder: "文本前缀",
+                    path: "config.prepend",
+                    vShow: ["input", "password"],
+                },
+                {
+                    label: "后缀",
+                    value: config.append,
+                    placeholder: "文本后缀",
+                    path: "config.append",
+                    vShow: ["input", "password", "digitpage"],
+                },
+
+                // {
+                //     label: '状态打开时的值',
+                //     value: control.activeValue,
+                //     placeholder: '状态打开时的值',
+                //     path: 'control.activeValue',
+                //     vShow: ['switch'],
+                //     isNum: true
+                // },
+                // {
+                //     label: '状态关闭时的值',
+                //     value: control.inactiveValue,
+                //     placeholder: '状态关闭时的值',
+                //     path: 'control.inactiveValue',
+                //     vShow: ['switch'],
+                //     isNum: true
+                // },
+                // {
+                //   label: '转换格式化值',
+                //   value: config.transform,
+                //   path: 'config.transform',
+                //   type: 'switch',
+                //   vShow: [
+                //     'checkbox',
+                //     'select',
+                //     'switch',
+                //     'cascader',
+                //     'slider',
+                //     'table',
+                //     'flex',
+                //     'treeSelect'
+                //   ]
+                // },
+                {
+                    label: "增加按钮文案",
+                    value: config.addBtnText,
+                    path: "config.addBtnText",
+                    type: "text",
+                    vShow: ["flex", "table"],
+                },
+                {
+                    label: "删除按钮文案",
+                    value: config.delBtnText,
+                    path: "config.delBtnText",
+                    type: "text",
+                    vShow: ["flex", "table"],
+                },
+                {
+                    label: "是否多选",
+                    value: control.multiple,
+                    path: "control.multiple",
+                    type: "switch",
+                    vShow: ["select", "treeSelect"],
+                    eventName: "selectMultiple",
+                },
+                {
+                    label: "可清空",
+                    value: control.clearable,
+                    path: "control.clearable",
+                    type: "switch",
+                    vShow: ["select"],
+                },
+                // {
+                //     label: '是否禁用',
+                //     value: control.disabled,
+                //     path: 'control.disabled',
+                //     type: 'switch',
+                //     vShow: [
+                //         'input',
+                //         'password',
+                //         'textarea',
+                //         'radio',
+                //         'checkbox',
+                //         'select',
+                //         'date',
+                //         'switch',
+                //         'number',
+                //         'cascader',
+                //         'upload',
+                //         'rate',
+                //         'tinymce',
+                //         'treeSelect'
+                //     ],
+                //     vIf: stateForm.isSearch
+                // },
+                // {
+                //     label: '是否禁用编辑',
+                //     value: config.editDisabled,
+                //     path: 'config.editDisabled',
+                //     type: 'switch',
+                //     vShow: [
+                //         'input',
+                //         'password',
+                //         'textarea',
+                //         'radio',
+                //         'checkbox',
+                //         'select',
+                //         'date',
+                //         'switch',
+                //         'number',
+                //         'cascader',
+                //         'upload',
+                //         'treeSelect',
+                //         'table',
+                //         'flex'
+                //     ],
+                //     vIf: stateForm.isSearch
+                // },
+                // {
+                //     label: '添加页隐藏',
+                //     value: config.disabledAdd,
+                //     path: 'config.disabledAdd',
+                //     type: 'switch',
+                //     vIf: stateForm.isSearch,
+                //     vHide: ['inputSlot']
+                // },
+                // {
+                //     label: '编辑页隐藏',
+                //     value: config.disabledEdit,
+                //     path: 'config.disabledEdit',
+                //     type: 'switch',
+                //     vIf: stateForm.isSearch,
+                //     vHide: ['inputSlot']
+                // },
+                // {
+                //     label: '详情页隐藏',
+                //     value: config.disabledDetail,
+                //     path: 'config.disabledDetail',
+                //     type: 'switch',
+                //     vIf: stateForm.isSearch,
+                //     vHide: ['inputSlot']
+                // },
+                {
+                    label: "设为Input输入框的前/后缀",
+                    value: type === "inputSlot",
+                    path: "",
+                    type: "switch",
+                    vShow: ["select", "inputSlot"],
+                    eventName: "setInputSlot",
+                },
+
+                
+                {
+                    label: "序号列",
+                    value: columnIndex,
+                    type: "switch",
+                    vShow: ["table"],
+                    eventName: "tableColumn1",
+                },
+                /*{
+                                label: '操作列',
+                                value: columnOperate,
+                                type: 'switch',
+                                vShow: ['table'],
+                                eventName: 'tableColumn2'
+                            },*/
+                {
+                    label: "组件名",
+                    value: config.componentName,
+                    placeholder: "全局注册的组件名称",
+                    path: "config.componentName",
+                    vShow: ["component"],
+                },
+                {
+                    label: "关联表单",
+                    value: config.associatedForms,
+                    path: "config.associatedForms",
+                    type: "associatedForms_form",
+                    vIf: stateForm.isSearch,
+                    vShow: ["associatedForms"],
+                },
+                {
+                    label: "移动端扫描输入",
+                    value: config.scanInput,
+                    path: "config.scanInput",
+                    type: "input",
+                    vIf: stateForm.isSearch,
+                    vShow: ["input"],
+                },
+                {
+                    label: "隐藏条件",
+                    value: config.associatedForms,
+                    path: "config.associatedForms",
+                    type: "associatedForms_hide",
+                    vIf: stateForm.isSearch,
+                    vShow: ["associatedForms"],
+                },
+                {
+                    label: "数据范围",
+                    value: config.associatedForms,
+                    path: "config.associatedForms",
+                    type: "associatedForms_dataRange",
+                    vIf: stateForm.isSearch,
+                    vShow: ["associatedForms"],
+                },
+                {
+                    label: "数据填充规则",
+                    value: config.associatedForms,
+                    path: "config.associatedForms",
+                    type: "associatedForms_FillRoles",
+                    vIf: stateForm.isSearch,
+                    vShow: ["associatedForms"],
+                },
+                {
+                    label: "轮播图设置",
+                    value: config.carousel,
+                    path: "config.carousel",
+                    type: "carousel",
+                    vIf: stateForm.isSearch,
+                    vShow: ["lowcodeCarsusel"],
+                },
+
+                {
+                    label: "穿梭框名",
+                    value: config.transfer,
+                    path: "config.transfer",
+                    type: "transfer_name",
+                    vIf: stateForm.isSearch,
+                    vShow: ["lowcodeTransfer"],
+                },
+                {
+                    label: "选项数据源",
+                    value: config.transfer,
+                    path: "config.transfer",
+                    type: "transfer_options_datasource",
+                    vIf: stateForm.isSearch,
+                    vShow: ["lowcodeTransfer"],
+                },
+                {
+                    label: "上传视频",
+                    value: config.uploadvideo,
+                    path: "config.uploadvideo",
+                    type: "uploadvideo_url",
+                    vIf: stateForm.isSearch,
+                    vShow: ["videoUpAndPlay"],
+                },
+                {
+                    label: "默认图片",
+                    value: config.lowcodeImage,
+                    path: "config.lowcodeImage",
+                    type: "lowcodeImage_url",
+                    vIf: stateForm.isSearch,
+                    vShow: ["lowcodeImage"],
+                },
+                {
+                    label: "必须现场拍照",
+                    value: config.lowcodeImage,
+                    path: "config.lowcodeImage",
+                    type: "lowcodeImage_currentShot",
+                    vIf: stateForm.isSearch,
+                    vShow: ["lowcodeImage"],
+                },
+                {
+                    label: "详情页展示全部选项",
+                    value: config.checkbox,
+                    path: "config.checkbox",
+                    type: "checkbox_showAll",
+                    vIf: stateForm.isSearch,
+                    vShow: ["checkbox"],
+                },
+                {
+                    label: "数据范围",
+                    value: config.orgCentent,
+                    path: "config.orgCentent",
+                    type: "orgCentent_range",
+                    vIf: stateForm.isSearch,
+                    vShow: ["orgCentent"],
+                },
+                {
+                    label: "是否多选",
+                    value: config.orgCentent,
+                    path: "config.orgCentent",
+                    type: "orgCentent_Multiple",
+                    vIf: stateForm.isSearch,
+                    vShow: ["orgCentent"],
+                },
+                {
+                    label: "默认一行",
+                    value: config.table,
+                    path: "config.table",
+                    type: "table_defaultOne",
+                    vIf: stateForm.isSearch,
+                    vShow: ["table"],
+                },
+                {
+                    label: "预填充设置",
+                    value: config.table,
+                    path: "config.table",
+                    type: "table_preFill",
+                    vIf: stateForm.isSearch,
+                    vShow: ["table"],
+                },
+                {
+                    label: "关联填充",
+                    value: config.orgCentent,
+                    path: "config.orgCentent",
+                    type: "orgCentent_ConnectUser",
+                    vIf: stateForm.isSearch,
+                    vShow: ["orgCentent"],
+                },
+                {
+                    label: "数据范围",
+                    value: config.expandUser,
+                    path: "config.expand-user",
+                    type: "expand-user",
+                    vIf: stateForm.isSearch,
+                    vShow: ["expand-user"],
+                },
+                {
+                    label: "是否多选",
+                    value: config.expandUser,
+                    path: "config.expand-user",
+                    type: "expand-user_MultiSelect",
+                    vIf: stateForm.isSearch,
+                    vShow: ["expand-user"],
+                },
+                /* {
+                    label: "表单栅格",
+                    value: config.span,
+                    placeholder: "表单区域栅格宽，0为自动宽",
+                    path: "config.span",
+                    vHide: ["gridChild"],
+                    isNum: true,
+                }, */
+                {
+                    label: "表单栅格",
+                    value: config.span,
+                    path: "config.span",
+                    type: "span",
+                    vHide: ["gridChild"],
+                    isNum: true,
+                },
+                {
+                    label: "占据的列数span",
+                    value: attr.span,
+                    type: "attrSpan",
+                    path: "attr.span",
+                    vShow: ["gridChild"],
+                    eventName: "formatNumber",
+                    isNum: true,
+                },
+                {
+                    label: "左侧的间隔格数offset",
+                    value: attr.offset,
+                    type: "attrOffset",
+                    path: "attr.offset",
+                    vShow: ["gridChild"],
+                    eventName: "formatNumber",
+                    isNum: true,
+                },
+                {
+                    label: "向右移动格数push",
+                    value: attr.push,
+                    type: "attrPush",
+                    path: "attr.push",
+                    vShow: ["gridChild"],
+                    eventName: "formatNumber",
+                    isNum: true,
+                },
+                {
+                    label: "向左移动格数pull",
+                    value: attr.pull,
+                    type: "attrPull",
+                    path: "attr.pull",
+                    vShow: ["gridChild"],
+                    eventName: "formatNumber",
+                    isNum: true,
+                },
+                /* {
+                    label: "添加时间水印",
+                    value: config.lowcodeImage,
+                    path: "config.lowcodeImage",
+                    type: "lowcodeImage_watermark",
+                    vIf: stateForm.isSearch,
+                    vShow: ["lowcodeImage"],
+                }, */
+                {
+                    label: "显示级别",
+                    value: config.organization,
+                    path: "config.organization",
+                    type: "organization_location_level",
+                    vIf: stateForm.isSearch,
+                    vShow: ["organization"],
+                },
+                /*{
+                                label: '尺寸',
+                                value: config.lowcodeImage,
+                                path: 'config.lowcodeImage',
+                                type: 'lowcodeImage_showMode',
+                                vIf: stateForm.isSearch,
+                                vShow: ['lowcodeImage']
+                            },
+                            {
+                                label: '契合度',
+                                value: config.lowcodeImage,
+                                path: 'config.lowcodeImage',
+                                type: 'lowcodeImage_fit',
+                                vIf: stateForm.isSearch,
+                                vShow: ['lowcodeImage']
+                            },
+                            {
+                                label: '圆角',
+                                value: config.lowcodeImage,
+                                path: 'config.lowcodeImage',
+                                type: 'lowcodeImage_radius',
+                                vIf: stateForm.isSearch,
+                                vShow: ['lowcodeImage']
+                            },
+                            {
+                                label: '边框和阴影',
+                                value: config.lowcodeImage,
+                                path: 'config.lowcodeImage',
+                                type: 'lowcodeImage_boderAndShadow',
+                                vIf: stateForm.isSearch,
+                                vShow: ['lowcodeImage']
+                            },
+                            {
+                                label: '图片链接',
+                                value: config.lowcodeImage,
+                                path: 'config.lowcodeImage',
+                                type: 'lowcodeImage_link',
+                                vIf: stateForm.isSearch,
+                                vShow: ['lowcodeImage']
+                            },
+                            {
+                                label: '浮动',
+                                value: config.lowcodeImage,
+                                path: 'config.lowcodeImage',
+                                type: 'lowcodeImage_float',
+                                vIf: stateForm.isSearch,
+                                vShow: ['lowcodeImage']
+                            }, */
+                // {
+                // 	label: '内外四边距',
+                // 	value: config.lowcodeImage,
+                // 	path: 'config.lowcodeImage',
+                // 	type: 'lowcodeImage_marginAndPadding',
+                // 	vIf: stateForm.isSearch,
+                // 	vShow: ['lowcodeImage']
+                // },
+                /* {
+                                label: '上传视频封面',
+                                value: config.uploadvideo,
+                                path: 'config.uploadvideo',
+                                type: 'uploadvideo_poster',
+                                vIf: stateForm.isSearch,
+                                vShow: ['videoUpAndPlay']
+                            }, */
+                {
+                    label: "视频宽度(像素)",
+                    value: config.uploadvideo,
+                    path: "config.uploadvideo",
+                    type: "uploadvideo_width",
+                    vIf: stateForm.isSearch,
+                    vShow: ["videoUpAndPlay"],
+                },
+                {
+                    label: "视频高度(像素)",
+                    value: config.uploadvideo,
+                    path: "config.uploadvideo",
+                    type: "uploadvideo_height",
+                    vIf: stateForm.isSearch,
+                    vShow: ["videoUpAndPlay"],
+                },
+                {
+                    label: "视频自动播放",
+                    value: config.uploadvideo,
+                    path: "config.uploadvideo",
+                    type: "uploadvideo_autoPlay",
+                    vIf: stateForm.isSearch,
+                    vShow: ["videoUpAndPlay"],
+                },
+                {
+                    label: "视频循环播放",
+                    value: config.uploadvideo,
+                    path: "config.uploadvideo",
+                    type: "uploadvideo_loopPlay",
+                    vIf: stateForm.isSearch,
+                    vShow: ["videoUpAndPlay"],
+                },
+                {
+                    label: "上传地址",
+                    value: control.action,
+                    placeholder: "图片/文件上传地址,可不填有默认值",
+                    path: "control.action",
+                    vShow: ["upload"],
+                },
+                {
+                    label: "文件字段名",
+                    value: control.name,
+                    placeholder: "上传的文件字段名,默认file",
+                    path: "control.name",
+                    vShow: ["upload"],
+                },
+                {
+                    label: "提示文字",
+                    value: config.tip,
+                    placeholder: "提示说明文字",
+                    path: "config.tip",
+                    vShow: ["upload"],
+                },
+                {
+                    label: "按钮文本",
+                    value: config.btnText,
+                    placeholder: "上传按钮文本",
+                    path: "config.btnText",
+                    vShow: ["upload"],
+                },
+                {
+                    label: "分割线方向",
+                    type: "select",
+                    dict: { horizontal: "horizontal", vertical: "vertical" },
+                    placeholder: "分割线方向，默认horizontal",
+                    value: control.direction,
+                    path: "control.direction",
+                    vShow: ["divider"],
+                },
+                {
+                    label: "分隔符样式",
+                    placeholder: "分隔符样式，默认solid",
+                    value: control.borderStyle,
+                    path: "control.borderStyle",
+                    vShow: ["divider"],
+                },
+                {
+                    label: "文字方位",
+                    type: "select",
+                    dict: { left: "left", right: "right", center: "center" },
+                    value: control.contentPosition,
+                    path: "control.contentPosition",
+                    vShow: ["divider"],
+                },
+                {
+                    label: "最小值",
+                    value: control.min,
+                    path: "control.min",
+                    vShow: ["slider"],
+                    eventName: "formatNumber",
+                    isNum: true,
+                },
+                {
+                    label: "最大值",
+                    value: control.max,
+                    path: "control.max",
+                    vShow: ["rate", "slider"],
+                    eventName: "formatNumber",
+                    isNum: true,
+                },
+                {
+                    label: "步长",
+                    value: control.step,
+                    path: "control.step",
+                    vShow: ["slider"],
+                    eventName: "formatNumber",
+                    isNum: true,
+                },
+                {
+                    label: "显示类型",
+                    value: control.type,
+                    path: "control.type",
+                    vShow: ["datePicker"],
+                    type: "select",
+                    placeholder: "显示类型",
+                    dict: {
+                    year: "年",
+                    month: "月",
+                    date: "日期",
+                    datetime: "日期+时间",
+                    week: "周",
+                    datetimerange: "开始日期时间至结束日期时间",
+                    daterange: "开始日期至结束日期",
+                    monthrange: "开始月至结束月",
+                    },
+                },
+                {
+                    label: "时间格式",
+                    value: control.format,
+                    path: "control.format",
+                    vShow: ["datePicker", "timePicker"],
+                    placeholder: "显示在输入框中的格式",
+                },
+                {
+                    label: "color-format",
+                    value: control.colorFormat,
+                    path: "control.colorFormat",
+                    type: "select",
+                    placeholder: "写入 v-model 的颜色的格式",
+                    dict: { hsl: "hsl", hsv: "hsv", hex: "hex", rgb: "rgb" },
+                    vShow: ["colorPicker"],
+                },
+                {
+                    label: "文本高度",
+                    value: control.height,
+                    path: "control.height",
+                    placeholder: "文本高度(预览查看效果)",
+                    vShow: ["tinymce"],
+                },
+                {
+                    label: "文本宽度",
+                    value: control.width,
+                    path: "control.width",
+                    placeholder: "文本宽度(预览查看效果)",
+                    vShow: ["tinymce"],
+                },
+                {
+                    label: "图片上传地址",
+                    value: control.imgUrl,
+                    path: "control.imgUrl",
+                    placeholder: "图片上传地址",
+                    vShow: ["tinymce"],
+                },
+                {
+                    label: "附件上传地址",
+                    value: control.blobUrl,
+                    path: "control.blobUrl",
+                    placeholder: "附件上传地址",
+                    vShow: ["tinymce"],
+                },
+                {
+                    label: "显示模式",
+                    value: config.style,
+                    path: "config.style",
+                    placeholder: "显示风格(预览查看效果)",
+                    type: "select",
+                    dict: { default: "default", simple: "simple" },
+                    vShow: ["tinymce"],
+                },
+                {
+                    label: "默认值",
+                    value: control.mathsValue,
+                    selectvalue: selectvalue,
+                    path: "control.mathsValue",
+                    placeholder: "显示风格(预览查看效果)",
+                    type: "digitpage",
+                    dict: { default: "自定义", simple: "编辑公式" },
+                    vShow: ["digitpage"],
+                    control: control,
+                },
+            ]);
+            // 过滤显示对应的值
+        return temp.filter((item: any) => {
+            // console.log("过滤显示对应的值--->",item)
+            // console.log("过滤显示对应的值-1-->",type)
+            let hasFilter = true;
+            if (item.vShow) {
+                hasFilter = item.vShow.includes(type);
+            }
+            if (item.vHide) {
+                hasFilter = !item.vHide.includes(type);
+            }
+            if (item.vIf) {
+                // 不显示vif＝true的
+                hasFilter = false;
+            }
+            return hasFilter;
+        });
+    }else{
+        return [];
+    }
+});
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 16:00:09
+@ 功能: 判断是否是组件
+*/
+const cssIsShouw = (val: any) => {
+  if (val.length && val.length > 0) {
+    return true;
+  }
+  return false;
+};
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 16:16:47
+@ 功能: 获取组件样式Demo
+*/
+const controlDataStyls = computed(() => {
+  return store.controlAttr.styles;
+});
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 15:57:30
+@ 功能: 字段设置
+*/
+watch(() => store.activeKey, (val: string) => {
+    if(val){
+        stateForm.tabsName = "first";
+        cssIsShouw(attrList);
+    }
+})
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 16:28:28
+@ 功能: 表单属性
+*/
+const formAttr = computed(() => {
+    const isSearch = stateForm.isSearch;
+    return [
+    {
+      label: "数据源",
+      placeholder: "请选择引用的数据源",
+      value: 1,
+      key: "dataSourceSetup",
+      type: "dataSourceSetup",
+      hide: isSearch,
+      options: [
+        {
+          label: "无",
+          value: "no",
+        },
+        {
+          label: "引用数据源",
+          value: "yes",
+        },
+      ],
+    },
+    {
+      label: "表单名称",
+      placeholder: "用于保存的表单名称",
+      value: formData.value.formName,
+      key: "formName",
+      hide: isSearch,
+      disabled: false,
+    },
+    {
+      label: "数据源",
+      placeholder: "请选择数据源",
+      value: formatNumber(props.formOtherData.source),
+      type: "select",
+      options: dataSourceOption.value,
+      key: "source",
+      hide: isSearch || !dataSourceOption.value?.length,
+      clearable: true,
+    },
+    {
+      label: "表单标识",
+      value: formData.value.name,
+      placeholder: "表单唯一标识，可为空",
+      key: "name",
+      hide: isSearch,
+      disabled: false,
+    },
+    // {
+    // 	label: '表单标签宽度',
+    // 	value: formData.value.labelWidth,
+    // 	placeholder: '表单label宽，如180px',
+    // 	key: 'labelWidth'
+    // },
+    // {
+    // 	label: '表单样式名称',
+    // 	value: formData.value.class,
+    // 	placeholder: '额外添加的表单class类名',
+    // 	key: 'class',
+    // 	type: 'select',
+    // 	options: [
+    // 		{ label: '无样式', value: '',name:'',id:'' },
+    // 		{ label: '每行两列', value: 'form-row-2',name:'',id:'' },
+    // 		{ label: '每行三列', value: 'form-row-3',name:'',id:'' },
+    // 		{ label: '每行四列', value: 'form-row-4',name:'',id:'' }
+    // 	],
+    // 	hide: isSearch,
+    // 	clearable: true
+    // },
+    // {
+    // 	label: '字段名后添加冒号',
+    // 	value: formData.value.showColon,
+    // 	key: 'showColon',
+    // 	type: 'switch'
+    // },
+    // {
+    // 	label: '组件尺寸',
+    // 	value: formData.value.size,
+    // 	type: 'select',
+    // 	key: 'size',
+    // 	options: [
+    // 		{ label: 'large', value: 'large',name:'',id:'' },
+    // 		{ label: 'default', value: 'default',name:'',id:'' },
+    // 		{ label: 'small', value: 'small',name:'',id:'' }
+    // 	]
+    // }
+    /*{
+                label: '筛选条件展开/收起',
+                value: formConfig.value.expand,
+                type: 'switch',
+                path: 'config',
+                key: 'expand',
+                hide: !isSearch
+            }*/
+  ];
+})
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 16:59:42
+@ 功能: 关联选项设置会在标签名称改变时清空
+*/
+function formNameChange() {
+  emits("formNameChange", 1);
+}
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 16:59:18
+@ 功能: 修改指定路径下的值
+*/
+const getPropByPath = (obj: any, path: string, val: any) => {
+  let tempObj = obj;
+  const keyArr = path.split(".");
+  //liwenxuan 关联选项设置会在标签名称改变时清空 start 250410
+  if (keyArr && keyArr[0] && keyArr[0] == "name") {
+    if (
+      tempObj.type == "select" ||
+      tempObj.type == "radio" ||
+      tempObj.type == "checkbox" ||
+      tempObj.type == "switch"
+    ) {
+      formNameChange();
+    }
+  }
+  // liwenxuan 关联选项设置会在标签名称改变时清空 end 250410
+  // console.log("修改指定路径下的值", keyArr, tempObj);
+  let i = 0;
+  for (i; i < keyArr.length - 1; i++) {
+    const key = keyArr[i];
+    if (key in tempObj) {
+      tempObj = tempObj[key];
+    } else {
+      throw new Error(`${key} is undefined`);
+      // break
+    }
+  }
+  const key = keyArr[i];
+  const value = tempObj[keyArr[i]];
+  // 检查最后一级是否存在
+  /*if (!(key in tempObj)) {
+            throw new Error(`${key} is undefined`)
+        }*/
+  if (val !== undefined) {
+    tempObj[key] = val;
+  }
+  return {
+    obj: tempObj,
+    key: key,
+    value: value,
+  };
+};
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 16:40:18
+@ 功能: 捕获字段变动
+*/
+const controlChange = (obj: any, val: any) => {
+    // select多选属性，
+    switch (obj.eventName) {
+        case 'selectMultiple':
+        break;
+        case 'tableColumn1':
+        break;
+        case 'formatNumber':
+        break;
+        case 'filedNameKey':
+        break;
+        case 'setInputSlot':
+        break;
+        case 'labelNameVal':
+        break;
+    }
+    if (obj.path) {
+        const newVal = obj.isNum ? formatNumber(val) : val; // 类型为数字时转整数
+        obj.path && getPropByPath(controlData.value, obj.path, newVal);
+    }
+}
+</script>
+<template>
+  <el-card  shadow="always">
+         <template #header>
+            <div class="card-header">属性设置</div>
+        </template>
+        <el-tabs v-model="attrActiveTab" type="border-card">
+            <el-tab-pane label="字段设置" name="first">
+                <div v-if="attrList.length <= 0" id="emptyProperties" class="empty-state">
+                    <i class="fa fa-cog"></i>
+                    <p>请选择设计区域中的元素进行属性设置</p>
+                </div>
+                <div v-else>
+                    <el-divider content-position="left">
+                        <el-text class="category-title">通用属性</el-text>
+                    </el-divider>
+                    <template v-for="(item, index) in attrList" :key="index">
+                         <template v-if="item.label == '必须现场拍照'">
+                            <el-form-item v-if="controlData.control.useDefaultImg==false" :label="item.label" class="form_cont">
+                                <el-radio-group v-model="controlData.control.onSiteShot">
+                                    <el-radio value="1">是</el-radio>
+                                    <el-radio value="">否</el-radio>
+                                </el-radio-group>
+                                <div v-if="controlData.control.onSiteShot=='1'" style="width: 100%;border: 0px solid black; margin-top: 10px">
+                                    <div style="position: relative; left: -84px">
+                                    添加时间水印
+                                        <el-radio-group v-model="controlData.control.watermark" style="position: relative; left: 8px">
+                                            <el-radio value="1">是</el-radio>
+                                            <el-radio value="">否</el-radio>
+                                        </el-radio-group>
+                                    </div>
+                                </div>
+                            </el-form-item>
+                         </template>
+                         <el-form-item v-else :label="item.label" class="form_cont">
+                            
+                         </el-form-item>
+
+
+
+
+
+                    </template>
+
+                </div>
+{{ attrList }}
+            </el-tab-pane>
+            <el-tab-pane label="表单设置" name="second">表单设置</el-tab-pane>
+            <el-tab-pane label="AI设置" name="third">AI设置</el-tab-pane>
+        </el-tabs>
+    </el-card>
+</template>
+<style  lang='scss' scoped>
+.empty-state {
+    text-align: center;
+    color: #909399;
+    padding: 30px 20px;
+}
+        
+.empty-state i {
+    font-size: 40px;
+    margin-bottom: 10px;
+    opacity: 0.5;
+}
+.category-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #165DFF;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/control.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/control.vue
new file mode 100644
index 0000000..26e084c
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/control.vue
@@ -0,0 +1,257 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2026-02-24 13:22:18
+@ 备注: 控件库
+-->
+<script lang='ts' setup>
+import controlListData from "@/components/DesignForm/assembly";
+import { jsonParseStringify } from "@/utils/DesignForm";
+import Draggable from "vuedraggable-es";
+import "@/assets/iconfont/iconfont.css";
+
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import FormVersion from "@/components/DesignForm/formVersion.vue";
+const props = defineProps({
+    tableKey: {
+        type: String,
+        default: ""
+    },
+    signCode: {
+        type: String,
+        default: ""
+    }
+})
+// const props = withDefaults(
+//   defineProps<{
+//     tableKey?: number | string;
+//     signCode?: number | string;
+//   }>(),
+//   {}
+// );
+const emits = defineEmits<{
+  (e: "versionUpdateForm", value: string): void;
+  (e: "versionPreviewPage", value: string): void;
+}>();
+
+const designType = inject("formDesignType") as string; //注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
+const versionActiveTab = ref(false);
+const tableVersion = ref(); //版本显示器
+const isSearch = computed(() => {
+  return designType === "search";
+});
+// 默认搜索允许显示的字段
+const searchField = [
+    "input",
+    "radio",
+    "checkbox",
+    "select",
+    "datePicker",
+    "timePicker",
+    "inputNumber",
+    "cascader",
+    "component",
+    "button",
+];
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 11:36:59
+@ 功能: 启用和禁用版本
+*/
+const enableOrDisable = (val?: any) => {
+  // console.log("启用和禁用版本",val)
+  emits("versionUpdateForm", val);
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-21 09:05:20
+@ 功能: 预览版本
+*/
+const previewPage = (val?: any) => {
+  emits("versionPreviewPage", val);
+};
+
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-24 13:45:38
+@ 功能: 表单组件数据
+*/
+const controlList = computed(() => {
+    if (designType === "search") {
+        // 只返回基础字段
+        const temp: any = [];
+        controlListData.forEach((item: any) => {
+        if (item.children) {
+            const filter = item.children.filter((ch: any) => {
+            return searchField.includes(ch.type);
+            });
+            if (filter && filter.length) {
+            temp.push({ title: item.title, children: filter });
+            }
+        }
+        });
+        return temp;
+    } else {
+        return controlListData;
+    }
+});
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-09 11:40:15
+@ 功能: 打开版本选择页面
+*/
+const useVersionClick = () => {
+    tableVersion.value.open();
+};
+/**
+@ 作者: 秦东
+@ 时间: 2024-05-15 10:15:14
+@ 功能: 克隆选中的组件数据结构
+*/
+const clone = (origin: any) => {
+  // console.log("克隆选中的组件数据结构",origin)
+  return jsonParseStringify(origin);
+};
+</script>
+<template>
+  <el-card  shadow="always">
+        <template #header>
+            <div class="cardHeader">
+                <div class="card-header">控件库</div>
+                <div v-if="!isSearch"  class="card-headerRight" @click="useVersionClick">版本管理</div>
+            </div>
+        </template>
+        <el-scrollbar ref="scrollbarRef" class="scroBox ">
+            <div v-for="(list, index) in controlList" :key="index" v-memo="[index]" class="unitBox">
+                <el-text class="category-title">{{ list.title }}</el-text>
+                <el-divider style="margin: 5px 0 10px 0;" />
+                <div class="unitBody">
+                    <Draggable
+                        v-model="list.children"
+                        tag="ul"
+                        :group="{ name: 'form', pull: 'clone', put: false }"
+                        ghost-class="ghost"
+                        :sort="false"
+                        :clone="clone"
+                        itemKey="unitListKey"
+                    >
+                        <template #item="{ element }">
+                            <div class="unitItem">
+                                <SvgIcon v-if="element.iconFont == ''" icon-class="caogaoxiang" class="control-icon" />
+                                <i v-if="element.iconFont != ''" :class="`fa ${element.iconFont} `"></i>
+                                <el-text class="control-name">{{element.label}}</el-text>
+                            </div>
+                        </template>
+                    </Draggable>
+                </div>
+            </div>
+
+        </el-scrollbar>
+        <FormVersion
+            ref="tableVersion"
+            :table-key="props.tableKey"
+            :sign-code="props.signCode"
+            @enable-or-disable="enableOrDisable"
+            @preview-page="previewPage"
+        />
+    </el-card>
+</template>
+<style  lang='scss' scoped>
+.form-content {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 300px 1fr 300px;
+    grid-template-rows: auto;
+    gap: 10px;
+    padding: 10px 10px 0 10px;
+    :deep .el-tabs--border-card{
+        border: 0;
+    }
+    :deep .el-card__header{
+        padding: 10px 15px;
+        background-color: #f5f7fa;
+    }
+    :deep .el-card__body{
+        padding: 0;
+        
+    }
+    :deep .el-tabs__header{
+        justify-content: space-between;
+        width: 100%;
+    }
+    :deep .is-active{
+        border-bottom: 1px solid var(--el-color-primary);
+    }
+}
+.cardHeader{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.card-header{
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: #0020C2;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.category-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #165DFF;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ebeef5;
+}
+
+.scroBox{
+    height: calc(100vh - 110px);
+    overflow: auto;
+}
+
+// 布局区域
+
+.unitBox{
+    padding: 10px 15px;
+}
+.unitBody ul{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+}
+.unitItem{
+    background: #f5f7fa;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 10px 5px; /* 减小内边距以适应3列布局 */
+    text-align: center;
+    cursor: grab;
+    transition: all 0.2s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &:hover{
+        background: #ecf5ff;
+        transform: translateY(-2px);
+        box-shadow: 0 2px 12px 0 rgba(22, 93, 255, 0.1);
+        border-color: #b3d8ff;
+        color: #165DFF;
+    }
+    i{
+        font-size: 20px; /* 减小图标大小以适应3列布局 */
+        color: #165DFF;
+        margin: 5px 0; /* 减小间距以适应3列布局 */
+    }
+}
+.control-icon {
+    font-size: 25px; /* 减小图标大小以适应3列布局 */
+    color: #165DFF;
+    margin-bottom: 3px; /* 减小间距以适应3列布局 */
+}
+        
+.control-name {
+    font-size: 12px; /* 减小字体大小以适应3列布局 */
+    color: #606266;
+    line-height: 1.2;
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/design.vue b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/design.vue
new file mode 100644
index 0000000..f403aa2
--- /dev/null
+++ b/src/views/sysworkflow/lowcodepage/appPage/appPageForm/unitsPageFrom/design.vue
@@ -0,0 +1,241 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2026-02-24 13:23:08
+@ 备注: 设计区域
+-->
+<script lang='ts' setup>
+import "@/assets/scss/element-var.scss";
+import "@/assets/scss/index.scss";
+import { FormData, FormList, FormDataStyle } from "@/api/DesignForm/types";
+import {
+  constGetControlByName,
+  constSetFormOptions,
+  constFormBtnEvent,
+  constControlChange,
+  constFormProps,
+  appendOrRemoveStyle,
+  constAiEffect,
+} from "@/api/DesignForm/utils";
+
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import { useRoute } from "vue-router";
+
+
+const props = withDefaults(
+  defineProps<{
+    formData: FormData;
+    type?: number; // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
+    numrun?: number; //1：获取；非1：不变
+    disabled?: boolean; // 禁用表单提交
+    requestUrl?: string; // 编辑数据请求url
+    beforeRequest?: Function; // 请求编辑数据前参数处理方法，可对请求参数处理
+    afterResponse?: Function | string; // 请求数据加载完成后数据处理方法，可对返回数据处理
+    addUrl?: string; // 表单数据新增提交保存url
+    editUrl?: string; // 表单数据修改保存提交url
+    beforeSubmit?: Function | string; // 表单提交前数据处理，可对提交数据处理，新增和保存都会触发
+    afterSubmit?: Function; // 表单提交后，默认提示提交结果，可return false阻止提示
+    closeAppSubmit?: Function; //关闭拉窗
+    changeKeyVal?: Function; //监听表单值该表
+    anewSubmit?: Function; //重新提交表单
+    saveDraftPage?: Function; //保存草稿
+    saveEditFormInfo?: Function; //保存草稿  只改表单不操作流程
+    sendDraftSubmit?: Function; //草稿提交审批
+    submitEdit?: Function; //提交修改数据申请
+    value?: { [key: string]: any }; // 表单初始值，同setValue
+    options?: { [key: string]: any }; // 表单组件选项，同setOptions
+    dict?: object; // 固定匹配的字典
+    isSearch?: boolean; // 列表里作为筛选使用
+    isWorkFlow?: number; //
+    flowkey?: string; //
+    groupid?: string; //
+    signCode?: string; //
+    versionId?: string; //
+    mastesformjson?: string; //
+    isWeb: boolean; //
+    nodeKey?: string;
+    purview?: any[];
+  }>(),
+  {
+    type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
+    numrun: 2,
+    formData: () => {
+      return {
+        list: [],
+        form: {},
+        config: {
+          groupKey: '',
+          style: "",
+        },
+        styles: {
+          divStyle: {},
+          labelStyle: {},
+          inputStyle: {},
+        },
+        aiConfig: [],
+      };
+    },
+    dict: () => {
+      return {};
+    },
+    isSearch: false,
+    issave: {
+      type: Boolean,
+      default: true,
+    },
+    key: 1,
+    isWorkFlow: 2,
+    flowkey: "",
+    groupid: "",
+    signCode: "",
+    mastesformjson: "",
+  }
+);
+const emits = defineEmits<{
+  (e: "btnClick", type: string): void;
+  (e: "change", val: any): void; // 表单组件值发生变化时
+  (e: "update:issave", type: boolean): void;
+  (e: "refresh"): void;
+  (e: "optionsValue3Get3", val: any, fieldName: string): void;
+  (e: 'click', value: string): void;
+}>();
+const route = useRoute();
+const rangedUserTrees1= ref([]);
+// 处理表单值开始
+const model = ref<any>({});
+// 设置全局事件结束
+const resultDict = ref({});
+
+const dictForm = computed(() => {
+  const storage = window.localStorage.getItem("akFormDict");
+  let storageDict = {};
+  if (storage) {
+    storageDict = JSON.parse(storage);
+  }
+  // 全局的、当前表单配置的以及接口返回的
+  return Object.assign({}, storageDict, props.dict, resultDict.value);
+});
+// 表单参数
+const formProps = computed(() => {
+  return {
+    model: model.value,
+    type: props.type,
+    hideField: props.formData.config?.hideField as [],
+    showColon: props.formData.form.showColon,
+    dict: dictForm.value,
+  };
+});
+provide(constFormProps, formProps);
+
+const pickPageType = ref("PC");
+
+
+function optionsValue3Get2(data: any, fieldName: string) {
+  //console.log("form.vue","optionsValue3Get2")
+  emits("optionsValue3Get3", data, fieldName);
+}
+
+/**
+@ 作者: 秦东
+@ 时间: 2026-02-25 10:51:00
+@ 功能: 执行哪个按钮的操作3579.76   2509.81
+2162.87   2783.09     
+*/
+const btnClick = (type: string) => {
+    if(type === 'monitor'){
+        pickPageType.value = 'PC'
+    }else if(type === 'iphone'){
+        pickPageType.value = 'WEB'
+    }
+	emits('click', type)
+}
+</script>
+<template>
+  <el-card  shadow="always">
+         <template #header>
+            <div class="card-header">设计区域</div>
+        </template>
+        <div class="design-toolbar">
+            <el-button-group>
+                <el-button class="fa fa-television" :type="pickPageType === 'PC' ? 'primary' : ''"  size="small" @click="btnClick('monitor')">电脑端</el-button>
+                <el-button class="fa fa-mobile" :type="pickPageType === 'WEB' ? 'primary' : ''"  size="small" @click="btnClick('iphone')">移动端</el-button>
+            </el-button-group>
+            <el-button-group>
+                <el-button class="fa fa-trash-o"  size="small" @click="btnClick('del')">清空</el-button>
+                <el-button class="fa fa-eye"  size="small" @click="btnClick('eye')">预览</el-button>
+                <el-button class="fa fa-file-code-o"  size="small" @click="btnClick('json')">脚本预览</el-button>
+                <el-button class="fa fa-save" type="success" size="small" @click="btnClick('save')">保存</el-button>
+                <el-button class="fa fa-code-fork" type="warning" size="small" @click="btnClick('branch')">另存未新版本</el-button>
+            </el-button-group>
+        </div>
+        <div class="design-area" id="designArea">
+            <div  v-if="formData.list.length === 0" class="placeholder" id="emptyPlaceholder">
+                <i class="fa fa-magic"></i>
+                <p>从左侧拖拽控件到此处开始设计表单</p>
+            </div>
+            <el-form
+                v-bind="formData.form"
+                ref="ruleForm"
+                
+                :disabled="disabled || type === 3"
+                class="add-form"
+                :class="{
+                    'design-form': type === 5,
+                    'detail-form': type === 3 || type === 4 || type === 1,
+                }"
+            >
+    
+                <FormGroup
+                    :tableinfo="formData.form"
+                    :numrun="numrun"
+                    :data="formData.list"
+                    :alldata="formData"
+                    :node-key="nodeKey"
+                    :purview="purview"
+                    :org-and-man-tree="rangedUserTrees1"
+                    @options-value3-get2="optionsValue3Get2" 
+                />
+
+                <slot></slot>
+            </el-form>
+        </div>
+    </el-card>
+</template>
+<style  lang='scss' scoped>
+.design-toolbar {
+    display: flex;
+    align-items: center;                                                                     
+    justify-content: space-between;
+    padding: 10px 10px;
+    border-bottom: 1px solid #ebeef5;
+    background: #f5f7fa;
+    :deep .el-button>span{
+        margin-left: 5px;
+    }
+}
+.toolbar-right {
+    display: flex;
+    gap: 0px;
+}
+
+.design-area {
+    flex: 1;
+    background: #fafafa;
+    border: 2px dashed #c0c4cc;
+    border-radius: 4px;
+    padding: 20px;
+    margin: 10px;
+    height: calc(100vh - 170px);
+    overflow-y: auto;
+}
+.placeholder {
+    text-align: center;
+    color: #909399;
+    padding: 40px 20px;
+}
+        
+.placeholder i {
+    font-size: 48px;
+    margin-bottom: 15px;
+    opacity: 0.7;
+}
+</style>
diff --git a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
index 80301cc..86e19c4 100644
--- a/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
+++ b/src/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue
@@ -253,7 +253,7 @@ onBeforeMount(() => {
           </div>
         </el-header>
         <el-container>
-          <!-- <NewPageForm
+          <NewPageForm
             v-if="tabsActive == 1"
             ref="appPageInfo"
             v-model:state="state"
@@ -264,8 +264,8 @@ onBeforeMount(() => {
             :menu-id="menuId"
             :group-key="props.groupKey"
             :formconfigcont="formConfigCont"
-          /> -->
-          <PageForm
+          />
+          <!-- <PageForm
             v-if="tabsActive == 1"
             ref="appPageInfo"
             v-model:state="state"
@@ -276,7 +276,7 @@ onBeforeMount(() => {
             :menu-id="menuId"
             :group-key="props.groupKey"
             :formconfigcont="formConfigCont"
-          />
+          /> -->
           <PageFlow
             v-if="tabsActive == 2"
             v-model:state="state"