feat: add form design (#248)

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -86,6 +86,7 @@ import Reset from "@iconify-icons/ri/restart-line";
 import Dept from "@iconify-icons/ri/git-branch-line";
 import Password from "@iconify-icons/ri/lock-password-line";
 import Ppt from "@iconify-icons/ri/file-ppt-2-line";
+import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
 addIcon("arrow-right-s-line", ArrowRightSLine);
 addIcon("arrow-left-s-line", ArrowLeftSLine);
 addIcon("logout-circle-r-line", LogoutCircleRLine);
@@ -108,6 +109,7 @@ addIcon("reset", Reset);
 addIcon("dept", Dept);
 addIcon("password", Password);
 addIcon("ppt", Ppt);
+addIcon("terminal-window-line", TerminalWindowLine);
 
 // Font Awesome 4
 import FaUser from "@iconify-icons/fa/user";

src/main.ts

@@ -1,16 +1,17 @@
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "/@/store";
+import ElementPlus from "element-plus";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { useI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
 import { useTable } from "../src/plugins/vxe-table";
-import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
 import "animate.css";
 import "virtual:windi.css";
+import "element-plus/dist/index.css";
 // 导入公共样式
 import "./style/index.scss";
 import "@pureadmin/components/dist/index.css";
@@ -43,6 +44,6 @@ getServerConfig(app).then(async config => {
   await router.isReady();
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(MotionPlugin).use(useI18n).use(useElementPlus).use(useTable);
+  app.use(MotionPlugin).use(useI18n).use(ElementPlus).use(useTable);
   app.mount("#app");
 });

src/router/index.ts

@@ -41,6 +41,7 @@ import nestedRouter from "./modules/nested";
 import flowChartRouter from "./modules/flowchart";
 import remainingRouter from "./modules/remaining";
 import componentsRouter from "./modules/components";
+import formDesignRouter from "./modules/formdesign";
 
 // 原始静态路由（未做任何处理）
 const routes = [
@@ -55,7 +56,8 @@ const routes = [
   nestedRouter,
   editorRouter,
   flowChartRouter,
-  componentsRouter
+  componentsRouter,
+  formDesignRouter
 ];
 
 // 导出处理后的静态路由（三级及以上的路由全部拍成二级）

src/router/modules/formdesign.ts

@@ -0,0 +1,27 @@
+import { $t } from "/@/plugins/i18n";
+const Layout = () => import("/@/layout/index.vue");
+
+const formDesignRouter = {
+  path: "/formDesign",
+  component: Layout,
+  redirect: "/formDesign/index",
+  meta: {
+    icon: "terminal-window-line",
+    title: $t("menus.hsFormDesign"),
+    i18n: true,
+    rank: 2
+  },
+  children: [
+    {
+      path: "/formDesign/index",
+      name: "formDesign",
+      component: () => import("/@/views/form-design/index.vue"),
+      meta: {
+        title: $t("menus.hsFormDesign"),
+        i18n: true
+      }
+    }
+  ]
+};
+
+export default formDesignRouter;

src/views/form-design/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, onBeforeMount } from "vue";
+import { loader } from "/@/utils/loaders";
+import { ElDesignForm } from "vue-form-create";
+
+const loading = ref(true);
+
+onBeforeMount(() => {
+  loader
+    .loadScript("https://unpkg.com/ace-builds/src-noconflict/ace.js")
+    .then(() => {
+      loading.value = false;
+    });
+});
+</script>
+
+<template>
+  <ElDesignForm v-loading="loading" style="height: 100vh" />
+</template>
+
+<style lang="scss" scoped>
+.main-content {
+  margin: 0 !important;
+}
+</style>