1

src/config/proxy.ts

@@ -1,7 +1,8 @@
 export const proxy = {
 	"/dev/": {
 		// target: "http://127.0.0.1:8001",
-		target: "http://192.168.0.112:9009",
+		// target: "http://192.168.0.112:9009",
+		target: "https://dev-admin.cool-js.cloud",
 		changeOrigin: true,
 		rewrite: (path: string) => path.replace(/^\/dev/, "")
 	},

src/modules/helper/config.ts

@@ -4,8 +4,8 @@ import { getRules } from "./utils";
 export default (): ModuleConfig => {
 	return {
 		options: {
-			host: "/dev"
+			// host: "/dev"
-			// host: "https://service.cool-js.com"
+			host: "https://service.cool-js.com/api"
 		},
 		toolbar: {
 			order: 1,

src/modules/helper/views/ai-code.vue

@@ -80,7 +80,11 @@
 										</el-tooltip>
 									</div>
 
-									<el-input v-model="form.entity" placeholder="请输入">
+									<el-input
+										v-model="form.entity"
+										maxlength="20"
+										placeholder="请输入"
+									>
 										<template #prefix>
 											<el-icon>
 												<arrow-right-bold />
@@ -103,7 +107,11 @@
 										</el-tooltip>
 									</div>
 
-									<el-input v-model="form.module" placeholder="请输入">
+									<el-input
+										v-model="form.module"
+										maxlength="20"
+										placeholder="请输入"
+									>
 										<template #prefix>
 											<el-popover
 												:ref="setRefs('modulePopover')"
@@ -116,7 +124,7 @@
 											>
 												<template #reference>
 													<el-icon class="add">
-														<circle-plus />
+														<circle-plus-filled />
 													</el-icon>
 												</template>
 
@@ -154,7 +162,11 @@
 										</el-tooltip>
 									</div>
 
-									<el-input v-model="form.column" placeholder="请输入">
+									<el-input
+										v-model="form.column"
+										maxlength="200"
+										placeholder="请输入"
+									>
 										<template #prefix>
 											<el-icon class="icon">
 												<arrow-right-bold />
@@ -177,7 +189,11 @@
 										</el-tooltip>
 									</div>
 
-									<el-input v-model="form.other" placeholder="请输入">
+									<el-input
+										v-model="form.other"
+										maxlength="200"
+										placeholder="请输入"
+									>
 										<template #prefix>
 											<el-icon>
 												<arrow-right-bold />
@@ -220,7 +236,7 @@
 								<el-icon class="is-loading">
 									<refresh />
 								</el-icon>
-								<span>生成 {{ last(code.tabs)?.label }} 代码中</span>
+								<span>生成 {{ codeData?.label }}代码中</span>
 							</div>
 						</div>
 
@@ -231,7 +247,7 @@
 									v-for="(item, index) in code.tabs"
 									:key="index"
 									:class="{
-										active: index == code.tabs.length - 1
+										active: code.active == item.value
 									}"
 								>
 									{{ item.label }}
@@ -251,9 +267,9 @@
 									:options="{
 										theme: 'ai-code--dark'
 									}"
-									v-model="code.tabs[code.tabs.length - 1].content"
+									v-model="codeData.content"
 									language="typescript"
-									v-if="last(code.tabs)"
+									v-if="codeData"
 								/>
 							</div>
 						</div>
@@ -268,7 +284,7 @@
 </template>
 
 <script lang="tsx" setup name="helper-ai-code">
-import { onMounted, reactive, watch, nextTick } from "vue";
+import { onMounted, reactive, watch, nextTick, computed } from "vue";
 import { useCool, storage, module } from "/@/cool";
 import {
 	Refresh,
@@ -276,7 +292,7 @@ import {
 	Back,
 	ArrowRightBold,
 	Loading,
-	CirclePlus,
+	CirclePlusFilled,
 	QuestionFilled
 } from "@element-plus/icons-vue";
 import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
@@ -366,6 +382,7 @@ const step = reactive({
 // 代码
 const code = reactive({
 	tabs: [] as { label: string; value: string; content: string }[],
+	active: "",
 
 	// 生成中
 	loading: false,
@@ -446,25 +463,22 @@ const code = reactive({
 				content: ""
 			};
 
+			code.active = flow;
 			code.tabs.push(item);
 
-			if (item) {
+			let content = "";
-				let content = "";
 
-				ai.invokeFlow(flow, { ...form, ...data }, (res) => {
+			ai.invokeFlow(flow, { ...form, ...data }, (res) => {
-					if (res.isEnd) {
+				if (res.isEnd) {
-						resolve(item.content);
+					resolve(item.content);
-					} else {
+				} else {
-						content += res.content;
+					content += res.content;
 
-						if (content.indexOf("```typescript\n") == 0) {
+					if (content.indexOf("```typescript\n") == 0) {
-							item.content = content
+						item.content = content.replace(/^```typescript\n/g, "").replace(/```$/, "");
-								.replace(/^```typescript\n/g, "")
-								.replace(/```$/, "");
-						}
 					}
-				});
+				}
-			}
+			});
 		});
 	},
 
@@ -475,14 +489,16 @@ const code = reactive({
 	}
 });
 
+const codeData = computed(() => {
+	return code.tabs.find((e) => e.value == code.active);
+});
+
 // 滚动文案
 const desc = reactive({
 	list: [] as string[],
 	text: "",
 
 	change() {
-		console.log(111);
-
 		switch (step.value) {
 			case "enter":
 				desc.list = ["请简要描述您的功能，AI帮你写代码"];
@@ -830,14 +846,6 @@ function toDoc() {
 	window.open("https://cool-js.com/");
 }
 
-// 监听表单
-watch(
-	() => form,
-	(val) => {
-		storage.set("ai-create.form", val);
-	}
-);
-
 onMounted(() => {
 	desc.init();
 });
@@ -920,6 +928,7 @@ $color: #41d1ff;
 		padding: 6px 13px 6px 10px;
 		cursor: pointer;
 		transition: all 0.2s;
+		font-size: 14px;
 
 		.el-icon {
 			font-size: 16px;
@@ -932,13 +941,18 @@ $color: #41d1ff;
 	}
 
 	.panel {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
 		position: relative;
 		height: 100%;
 		width: 1040px;
+		max-width: calc(100% - 40px);
 
 		.editor {
 			background-color: #080e14;
-			margin-bottom: 60px;
+			width: 100%;
 
 			.topbar {
 				display: flex;
@@ -990,7 +1004,7 @@ $color: #41d1ff;
 		}
 
 		.head {
-			padding: 25vh 0 50px 0;
+			padding: 50px 0;
 			text-align: center;
 			color: #fff;
 			line-height: 1;
@@ -1027,7 +1041,7 @@ $color: #41d1ff;
 				padding: 0 1px;
 				color: #fff;
 				font-size: 22px;
-				margin-top: 100px;
+				margin-top: 50px;
 
 				&::after {
 					content: "";
@@ -1121,8 +1135,8 @@ $color: #41d1ff;
 		}
 
 		.form {
-			transform: translateY(40vh);
+			transform: translateY(50vh);
-			width: 1000px;
+			width: calc(100% - 40px);
 			transition: all 0.3s ease;
 			margin: 0 auto;
 
@@ -1137,7 +1151,7 @@ $color: #41d1ff;
 					padding: 10px 0;
 
 					.row {
-						font-size: 14px;
+						font-size: 12px;
 						margin-bottom: 10px;
 
 						&:last-child {
@@ -1148,12 +1162,10 @@ $color: #41d1ff;
 							display: flex;
 							align-items: center;
 							padding: 5px 15px;
-							color: #999;
 
 							.el-icon {
 								margin-left: 4px;
 								cursor: pointer;
-								font-size: 12px;
 							}
 						}
 
@@ -1201,8 +1213,8 @@ $color: #41d1ff;
 				color: #eee;
 				text-align: center;
 				font-size: 14px;
-				margin: 50px 0 0 0;
 				user-select: none;
+				margin-top: 30px;
 			}
 
 			.module-list {
@@ -1224,20 +1236,23 @@ $color: #41d1ff;
 
 			&.show {
 				transform: translateY(0);
+
+				.btns {
+					margin-top: 60px;
+				}
 			}
 		}
 
 		.coding {
 			position: absolute;
-			bottom: 0;
+			bottom: 20px;
 			left: 0;
 			transition: all 0.3s ease;
 			height: 0;
 			width: 100%;
 			animation: coding 0.3s forwards;
 			border: 5px solid rgba(255, 255, 255, 0.1);
-			border-radius: 10px 10px 0 0;
+			box-sizing: border-box;
-			border-bottom: 0;
 
 			.editor {
 				height: 100%;
@@ -1262,6 +1277,7 @@ $color: #41d1ff;
 					align-items: center;
 					margin-left: auto;
 					color: #fff;
+					font-size: 12px;
 
 					.el-icon {
 						margin-right: 5px;
@@ -1336,7 +1352,7 @@ $color: #41d1ff;
 
 		&.is-coding {
 			.head {
-				transform: translateY(-120px);
+				transform: translateY(-180px);
 			}
 		}
 	}