diff --git a/components/index.js b/components/index.js
index 7cca617a..1567ee06 100644
--- a/components/index.js
+++ b/components/index.js
@@ -18,6 +18,7 @@ const install = function (Vue) {
   let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
   if (contexts) {
     contexts.keys().map((e) => {
+      console.log(e)
       components.push(contexts(e).default);
       Vue.component(contexts(e).default.name, contexts(e).default);
     });
diff --git a/package.json b/package.json
index d82ae3eb..d7a8581e 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@jiaminghi/c-render": "^0.4.3",
     "@jiaminghi/charts": "^0.2.18",
     "@jiaminghi/data-view": "^2.10.0",
+    "@logicflow/core": "^1.2.1",
     "bin-ace-editor": "^3.2.0",
     "dayjs": "^1.8.35",
     "dui": "^2.0.0",
diff --git a/project/oms/apps/develop/AppDataModel/dmAdd.vue b/project/oms/apps/develop/AppDataModel/dmAdd.vue
index 8230b257..f25bd9e5 100644
--- a/project/oms/apps/develop/AppDataModel/dmAdd.vue
+++ b/project/oms/apps/develop/AppDataModel/dmAdd.vue
@@ -1,22 +1,102 @@
 <template>
-  <section class="dmAdd">
-
-  </section>
+  <ai-detail class="dmAdd">
+    <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @back="back"/>
+    <template #content>
+      <el-form size="small" :model="form" label-width="120px" :rules="rules" ref="DataModelForm">
+        <ai-card title="基本信息">
+          <el-row type="flex">
+            <div class="fill">
+              <el-form-item label="模型名称" prop="name">
+                <el-input v-model="form.name" clearable placeholder="用来标识模型的用途"/>
+              </el-form-item>
+            </div>
+            <div class="fill">
+              <el-form-item label="模型别名" prop="alias">
+                <el-input v-model="form.alias" clearable placeholder="用来通过通用方法获取模型"/>
+              </el-form-item>
+            </div>
+          </el-row>
+        </ai-card>
+        <ai-card title="设计模型" panel>
+          <el-form-item prop="model" label-width="0">
+            <div ref="DataModel" class="dataModel"/>
+          </el-form-item>
+        </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="back">返回</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </template>
+  </ai-detail>
 </template>
 
 <script>
+import {mapActions} from "vuex";
+import {LogicFlow} from "@logicflow/core"
+import "@logicflow/core/dist/style/index.css"
+
 export default {
   name: "dmAdd",
   data() {
-    return {}
+    return {
+      form: {},
+      rules: {
+        name: {required: true, message: "请输入模型名称"},
+        alias: {required: true, message: "请输入模型别名"},
+      },
+      diagram: null
+    }
+  },
+  computed: {
+    pageTitle: v => v.isEdit ? "编辑数据模型" : "新增数据模型"
+  },
+  methods: {
+    ...mapActions(['closePage']),
+    back() {
+      this.closePage()
+      this.$router.push({})
+    },
+    getDetail() {
+      const {id} = this.$route.query
+      id && this.instance.post("", null, {params: {id}}).then(res => {
+        if (res?.data) {
+          this.form = res.data
+        }
+      })
+    },
+    submit() {
+      this.$refs.DataModelForm.validate()
+      .then(() => this.instance.post("", this.form))
+      .then(res => {
+        if (res?.code == 0) {
+          this.$message.success("提交成功")
+          this.back()
+        }
+      })
+    },
+    initLf() {
+      this.diagram = new LogicFlow({
+        container: this.$refs.DataModel,
+        animation: true,
+        grid: true
+      })
+      this.diagram.render()
+    }
   },
-  methods: {},
   created() {
+    this.getDetail()
+  },
+  mounted() {
+    this.initLf()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .dmAdd {
+  .dataModel {
+    height: 400px;
+  }
 }
 </style>
diff --git a/project/oms/apps/develop/AppDataModel/dmList.vue b/project/oms/apps/develop/AppDataModel/dmList.vue
index fb0c7383..d61c228e 100644
--- a/project/oms/apps/develop/AppDataModel/dmList.vue
+++ b/project/oms/apps/develop/AppDataModel/dmList.vue
@@ -4,7 +4,7 @@
     <template #content>
       <ai-search-bar>
         <template #left>
-          <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
+          <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd()">添加</el-button>
         </template>
         <template #right>
           <el-input size="small" placeholder="搜索应用" v-model="search.name" clearable @change="page.current=1,getTableData()"/>
@@ -70,8 +70,6 @@ export default {
         }
       })
     }
-  },
-  created() {
   }
 }
 </script>
diff --git a/ui/packages/layout/AiCard.vue b/ui/packages/layout/AiCard.vue
index c17cdf9b..1b8918a1 100644
--- a/ui/packages/layout/AiCard.vue
+++ b/ui/packages/layout/AiCard.vue
@@ -27,7 +27,7 @@ export default {
     headerPanel: Boolean
   },
   computed: {
-    hideHeader: v => v.hideTitle || v.panel
+    hideHeader: v => v.hideTitle || (v.panel && !v.title)
   }
 }
 </script>