集成amis

package.json

@@ -1,83 +1,84 @@
 {
-	"name": "vue-next-admin",
-	"version": "2.0.2",
-	"description": "vue3 vite next admin template",
-	"author": "lyt_20201208",
-	"license": "MIT",
-	"scripts": {
-		"dev": "vite --force",
-		"build": "vite build",
-		"deploy": "npm run build && npm run deploy:rm && npm run deploy:scp",
-		"deploy:rm": "ssh iot 'rm -rf /www/wwwroot/zhgy.sagoo.cn-copy/* && rm -rf /www/wwwroot/zhgy.sagoo.cn-pre/*'",
-		"deploy:scp": "scp -r ./dist/* iot:/www/wwwroot/zhgy.sagoo.cn-pre/ && ssh iot 'mv /www/wwwroot/zhgy.sagoo.cn/* /www/wwwroot/zhgy.sagoo.cn-copy && mv /www/wwwroot/zhgy.sagoo.cn-pre/* /www/wwwroot/zhgy.sagoo.cn'",
-		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
-	},
-	"dependencies": {
-		"@element-plus/icons-vue": "^1.0.0",
-		"axios": "^0.26.0",
-		"countup.js": "^2.1.0",
-		"cropperjs": "^1.5.12",
-		"echarts": "^5.3.0",
-		"echarts-gl": "^2.0.9",
-		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^2.0.4",
-		"jsplumb": "^2.15.6",
-		"mitt": "^3.0.0",
-		"nprogress": "^0.2.0",
-		"print-js": "^1.6.0",
-		"qrcodejs2-fixes": "^0.0.2",
-		"screenfull": "^6.0.1",
-		"sortablejs": "^1.14.0",
-		"splitpanes": "^3.1.1",
-		"vue": "^3.2.31",
-		"vue-clipboard3": "^1.0.1",
-		"vue-grid-layout": "^3.0.0-beta1",
-		"vue-i18n": "^9.1.9",
-		"vue-router": "^4.0.13",
-		"vuex": "^4.0.2",
-		"wangeditor": "^4.7.12"
-	},
-	"devDependencies": {
-		"@types/node": "^17.0.21",
-		"@types/nprogress": "^0.2.0",
-		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^5.13.0",
-		"@typescript-eslint/parser": "^5.13.0",
-		"@vitejs/plugin-vue": "^2.2.4",
-		"@vue/compiler-sfc": "^3.2.31",
-		"dotenv": "^16.0.0",
-		"eslint": "^8.10.0",
-		"eslint-plugin-vue": "^8.5.0",
-		"prettier": "^2.5.1",
-		"sass": "^1.49.9",
-		"sass-loader": "^12.6.0",
-		"typescript": "^4.6.2",
-		"vite": "^2.8.6",
-		"vue-eslint-parser": "^8.3.0"
-	},
-	"browserslist": [
-		"> 1%",
-		"last 2 versions",
-		"not dead"
-	],
-	"bugs": {
-		"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
-	},
-	"engines": {
-		"node": ">=12.0.0",
-		"npm": ">= 6.0.0"
-	},
-	"keywords": [
-		"vue",
-		"vue3",
-		"vuejs/vue-next",
-		"element-ui",
-		"element-plus",
-		"vue-next-admin",
-		"next-admin"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://gitee.com/lyt-top/vue-next-admin.git"
-	}
+  "name": "vue-next-admin",
+  "version": "2.0.2",
+  "description": "vue3 vite next admin template",
+  "author": "lyt_20201208",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --force",
+    "build": "vite build",
+    "deploy": "npm run build && npm run deploy:rm && npm run deploy:scp",
+    "deploy:rm": "ssh iot 'rm -rf /www/wwwroot/zhgy.sagoo.cn-copy/* && rm -rf /www/wwwroot/zhgy.sagoo.cn-pre/*'",
+    "deploy:scp": "scp -r ./dist/* iot:/www/wwwroot/zhgy.sagoo.cn-pre/ && ssh iot 'mv /www/wwwroot/zhgy.sagoo.cn/* /www/wwwroot/zhgy.sagoo.cn-copy && mv /www/wwwroot/zhgy.sagoo.cn-pre/* /www/wwwroot/zhgy.sagoo.cn'",
+    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^1.0.0",
+    "amis": "^2.1.0",
+    "axios": "^0.26.0",
+    "countup.js": "^2.1.0",
+    "cropperjs": "^1.5.12",
+    "echarts": "^5.3.0",
+    "echarts-gl": "^2.0.9",
+    "echarts-wordcloud": "^2.0.0",
+    "element-plus": "^2.0.4",
+    "jsplumb": "^2.15.6",
+    "mitt": "^3.0.0",
+    "nprogress": "^0.2.0",
+    "print-js": "^1.6.0",
+    "qrcodejs2-fixes": "^0.0.2",
+    "screenfull": "^6.0.1",
+    "sortablejs": "^1.14.0",
+    "splitpanes": "^3.1.1",
+    "vue": "^3.2.31",
+    "vue-clipboard3": "^1.0.1",
+    "vue-grid-layout": "^3.0.0-beta1",
+    "vue-i18n": "^9.1.9",
+    "vue-router": "^4.0.13",
+    "vuex": "^4.0.2",
+    "wangeditor": "^4.7.12"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.21",
+    "@types/nprogress": "^0.2.0",
+    "@types/sortablejs": "^1.10.7",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "@vitejs/plugin-vue": "^2.2.4",
+    "@vue/compiler-sfc": "^3.2.31",
+    "dotenv": "^16.0.0",
+    "eslint": "^8.10.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "prettier": "^2.5.1",
+    "sass": "^1.49.9",
+    "sass-loader": "^12.6.0",
+    "typescript": "^4.6.2",
+    "vite": "^2.8.6",
+    "vue-eslint-parser": "^8.3.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "bugs": {
+    "url": "https://gitee.com/lyt-top/vue-next-admin/issues"
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">= 6.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vuejs/vue-next",
+    "element-ui",
+    "element-plus",
+    "vue-next-admin",
+    "next-admin"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/lyt-top/vue-next-admin.git"
+  }
 }

src/components/amis/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="box"></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+const props = defineProps({
+	json: {
+		type: Object,
+		required: true,
+	},
+});
+
+onMounted(() => {
+	// @ts-ignore
+	const amis = amisRequire('amis/embed');
+
+	amis.embed('#box', props.json);
+});
+</script>

src/main.ts

@@ -15,6 +15,8 @@ import {getUpFileUrl, handleTree, selectDictLabel} from "/@/utils/gfast";
 import {useDict} from "/@/api/system/dict/data";
 // 分页组件
 import pagination from '/@/components/pagination/index.vue'
+import 'amis/sdk/sdk.js';
+import 'amis/lib/themes/default.css';
 
 const app = createApp(App);
 

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="login-container">
+  <div class="login-container">
     <div class="login-content-out">
-     <div class="login-content">
+      <div class="login-content">
         <div class="login-content-main">
           <div class="login-icon-group">
             <div class="login-icon-group-title">
@@ -26,8 +26,9 @@
           </div>
         </div>
       </div>
-		</div>
+    </div>
     <div class="login-footer">
+      <!-- <amis :json="amisjson" /> -->
       <div class="login-footer-content mt15">
         <div class="login-footer-content-warp">
           <div>Copyright © 2021-2023 g-fast.cn All Rights Reserved.</div>
@@ -35,7 +36,7 @@
         </div>
       </div>
     </div>
-	</div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -45,6 +46,7 @@ import Mobile from '/@/views/login/component/mobile.vue';
 import Scan from '/@/views/login/component/scan.vue';
 import { useStore } from '/@/store/index';
 import logoMini from '/@/assets/logo-mini.svg';
+import amis from '/@/components/amis/index.vue';
 
 // 定义接口来定义对象的类型
 interface LoginState {
@@ -54,7 +56,32 @@ interface LoginState {
 
 export default defineComponent({
 	name: 'loginIndex',
-	components: { Account, Mobile, Scan },
+	components: { Account, Mobile, Scan,amis },
+	data: function () {
+		return {
+			amisjson: {
+				type: 'page',
+				title: '表单页面',
+				body: {
+					type: 'form',
+					mode: 'horizontal',
+					api: '/saveForm',
+					body: [
+						{
+							label: 'Name1Name1Name1Name1',
+							type: 'input-text',
+							name: 'name123',
+						},
+						{
+							label: 'Email2Email2Email2Email2',
+							type: 'input-email',
+							name: 'email1',
+						},
+					],
+				},
+			},
+		};
+	},
 	setup() {
 		const store = useStore();
 		const state = reactive<LoginState>({
@@ -79,8 +106,8 @@ export default defineComponent({
 	width: 100%;
 	height: 100%;
 	position: relative;
-  background-image: url("/@/assets/bg.jpg");
-  background-size: cover;
+	background-image: url('/@/assets/bg.jpg');
+	background-size: cover;
 	.login-icon-group {
 		width: 100%;
 		height: 100%;
@@ -105,21 +132,21 @@ export default defineComponent({
 			bottom: 0;
 		}
 	}
-  .login-content-out {
-    width: 100%;
-    height: 100%;
-    padding-top: 150px;
-  }
+	.login-content-out {
+		width: 100%;
+		height: 100%;
+		padding-top: 150px;
+	}
 	.login-content {
 		width: 500px;
 		padding: 20px;
-    margin: auto;
+		margin: auto;
 		background-color: var(--el-color-white);
 		border: 5px solid var(--el-color-primary-light-8);
 		border-radius: 5px;
 		overflow: hidden;
 		z-index: 1;
-    position: relative;
+		position: relative;
 		.login-content-main {
 			margin: 0 auto;
 			width: 80%;
@@ -172,20 +199,20 @@ export default defineComponent({
 			}
 		}
 	}
-  .login-footer{
-    position: absolute;
-    bottom: 5px;
-    width: 100%;
-    &-content {
-      width: 100%;
-      display: flex;
-      &-warp {
-        margin: auto;
-        color: #e0e3e9;
-        text-align: center;
-        animation: error-num 1s ease-in-out;
-      }
-    }
-  }
+	.login-footer {
+		position: absolute;
+		bottom: 5px;
+		width: 100%;
+		&-content {
+			width: 100%;
+			display: flex;
+			&-warp {
+				margin: auto;
+				color: #e0e3e9;
+				text-align: center;
+				animation: error-num 1s ease-in-out;
+			}
+		}
+	}
 }
 </style>