This commit is contained in:
神仙 2024-06-26 00:15:12 +08:00
parent 1ff3964f28
commit 37c5b1c0fb
3 changed files with 979 additions and 2231 deletions

3012
build/cool/eps.d.ts vendored

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1719328305980" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" xmlns:xlink="http://www.w3.org/1999/xlink" width="233.203125" height="200"><path d="M1151.9144 325.11999969V89.12a57.04000031 57.04000031 0 0 0-28.8-49.44 58.15999969 58.15999969 0 0 0-57.76000031 0 57.04000031 57.04000031 0 0 0-28.8 49.44v235.99999969c0.24 84.31999969-33.6 152.56000031-94.08 212.00000062-60.07999969 59.83999969-141.84 80.64-227.04 80.4H225.91440031L388.07439969 457.11999969a56.80000031 56.80000031 0 0 0 12.40000031-62.16 57.76000031 57.76000031 0 0 0-94.00000031-18.63999938L48.8744 631.20000031a56.88 56.88 0 0 0 0 80.79999938l264.96 262.56a58.08 58.08 0 0 0 96.55999969-25.59999938 56.80000031 56.80000031 0 0 0-14.95999969-55.2L232.07439969 731.67999969h483.44000062c116.56000031 0 226.15999969-32.08000031 308.64-113.76 82.15999969-80.80000031 128.23999969-178.15999969 127.83999938-292.87999969" p-id="1396"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -16,6 +16,17 @@
</p>
</div>
<div class="enter" v-if="step.value == 'none'">
<el-input
v-model="form.name"
placeholder="如:收货地址、商品列表"
@focus="desc.change('name')"
@keydown.enter="step.next"
/>
<cl-svg name="enter" class="icon" />
</div>
<template v-if="step.value == 'form'">
<div class="editor">
<div class="topbar">
<div class="dots">
@ -66,6 +77,7 @@
</div>
<div class="tips">如遇见 代码缺失请求超时请尝试刷新</div>
</template>
</div>
<div class="panel-code">
@ -160,7 +172,7 @@ monaco.editor.defineTheme("ai-code--dark", {
const step = reactive({
value: "none",
list: ["none", "coding"],
list: ["none", "form", "coding"],
next() {
const i = step.list.indexOf(step.value);
@ -181,10 +193,27 @@ const step = reactive({
//
const desc = reactive({
list: ["为开发者生成优质编程代码", "只需少量的口语提示就能完成特定的功能,大大节省开发时间"],
list: [] as string[],
text: "",
init() {
change(action?: string) {
if (action == "name") {
desc.list = ["请简要描述您的功能AI帮你写代码"];
} else {
desc.list = [
"为开发者生成优质编程代码",
"只需少量的口语提示就能完成特定的功能,大大节省开发时间"
];
}
desc.start();
},
t1: null as any,
t2: null as any,
start() {
desc.stop();
function next(n: number) {
const val = desc.list[n];
@ -193,20 +222,22 @@ const desc = reactive({
const v = val[n2];
if (v) {
setTimeout(() => {
desc.t2 = setTimeout(() => {
desc.text += v;
next2(n2 + 1);
}, 60);
} else {
setTimeout(() => {
const timer = setInterval(() => {
if (desc.list.length > 1) {
desc.t1 = setInterval(() => {
desc.text = desc.text.slice(0, -1);
if (!desc.text) {
clearInterval(timer);
clearInterval(desc.t1);
next(n + 1);
}
}, 50);
}
}, 1500);
}
}
@ -217,8 +248,26 @@ const desc = reactive({
}
}
if (!isEmpty(desc.list)) {
next(0);
}
},
stop() {
if (desc.t1) {
clearInterval(desc.t1);
}
if (desc.t2) {
clearTimeout(desc.t2);
}
desc.text = "";
},
init() {
desc.change();
}
});
//
@ -266,6 +315,8 @@ const editor = reactive({
//
const form = reactive({
name: "",
columns: [],
list: [
{
label: "请填写功能名称",
@ -711,6 +762,9 @@ $color: #41d1ff;
}
.panel-free {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width: 1040px;
max-width: 100%;
@ -730,8 +784,37 @@ $color: #41d1ff;
}
}
.enter {
display: flex;
align-items: center;
margin: 0 auto;
width: 360px;
position: relative;
:deep(.el-input__wrapper) {
background-color: rgba(0, 0, 0, 0.3);
padding: 10px;
border-radius: 12px;
box-shadow: 0 0 10px 1px #4165d719;
.el-input__inner {
color: #fff;
text-align: center;
font-size: 16px;
letter-spacing: 2px;
}
}
.icon {
position: absolute;
right: 18px;
color: #666;
font-size: 18px;
}
}
.head {
padding: 260px 0 50px 0;
padding: 0 0 50px 0;
text-align: center;
color: #fff;
line-height: 1;
@ -916,12 +999,12 @@ $color: #41d1ff;
&.is-coding {
.panel-free {
.title {
transform: translateY(-130px);
transform: translateY(-5vh);
}
}
.panel-code {
height: calc(100% - 230px);
height: calc(100% - 20vh);
}
}
}