mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 14:10:27 +08:00
1
This commit is contained in:
神仙
parent
1ff3964f28
commit
37c5b1c0fb
3012
build/cool/eps.d.ts
vendored
3012
build/cool/eps.d.ts
vendored
File diff suppressed because it is too large
Load Diff
1
src/modules/helper/static/svg/enter.svg
Normal file
1
src/modules/helper/static/svg/enter.svg
Normal 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 |
@ -16,56 +16,68 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="editor">
|
<div class="enter" v-if="step.value == 'none'">
|
||||||
<div class="topbar">
|
<el-input
|
||||||
<div class="dots">
|
v-model="form.name"
|
||||||
<span></span>
|
placeholder="如：收货地址、商品列表"
|
||||||
<span></span>
|
@focus="desc.change('name')"
|
||||||
<span></span>
|
@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">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<div
|
<div
|
||||||
class="form-item"
|
class="form-item"
|
||||||
v-for="(item, index) in form.list"
|
v-for="(item, index) in form.list"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<p class="label">{{ item.label }}</p>
|
<p class="label">{{ item.label }}</p>
|
||||||
|
|
||||||
<el-input resize="none" :placeholder="item.desc">
|
<el-input resize="none" :placeholder="item.desc">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<arrow-right />
|
<arrow-right />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btns">
|
<div class="btns">
|
||||||
<el-button
|
<el-button
|
||||||
size="large"
|
size="large"
|
||||||
color="#41d1ff"
|
color="#41d1ff"
|
||||||
:icon="Promotion"
|
:icon="Promotion"
|
||||||
:disabled="temp.disabled"
|
:disabled="temp.disabled"
|
||||||
:loading="temp.disabled"
|
:loading="temp.disabled"
|
||||||
@click="next"
|
@click="next"
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
temp.disabled
|
temp.disabled
|
||||||
? "思考中"
|
? "思考中"
|
||||||
: codes.entity.length
|
: codes.entity.length
|
||||||
? "重新生成"
|
? "重新生成"
|
||||||
: "下一步"
|
: "下一步"
|
||||||
}}
|
}}
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tips">如遇见 “代码缺失”、“请求超时”，请尝试「刷新」吧</div>
|
<div class="tips">如遇见 “代码缺失”、“请求超时”，请尝试「刷新」吧</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel-code">
|
<div class="panel-code">
|
||||||
@ -160,7 +172,7 @@ monaco.editor.defineTheme("ai-code--dark", {
|
|||||||
const step = reactive({
|
const step = reactive({
|
||||||
value: "none",
|
value: "none",
|
||||||
|
|
||||||
list: ["none", "coding"],
|
list: ["none", "form", "coding"],
|
||||||
|
|
||||||
next() {
|
next() {
|
||||||
const i = step.list.indexOf(step.value);
|
const i = step.list.indexOf(step.value);
|
||||||
@ -181,10 +193,27 @@ const step = reactive({
|
|||||||
|
|
||||||
// 滚动文案
|
// 滚动文案
|
||||||
const desc = reactive({
|
const desc = reactive({
|
||||||
list: ["为开发者生成优质编程代码", "只需少量的口语提示就能完成特定的功能，大大节省开发时间"],
|
list: [] as string[],
|
||||||
text: "",
|
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) {
|
function next(n: number) {
|
||||||
const val = desc.list[n];
|
const val = desc.list[n];
|
||||||
|
|
||||||
@ -193,20 +222,22 @@ const desc = reactive({
|
|||||||
const v = val[n2];
|
const v = val[n2];
|
||||||
|
|
||||||
if (v) {
|
if (v) {
|
||||||
setTimeout(() => {
|
desc.t2 = setTimeout(() => {
|
||||||
desc.text += v;
|
desc.text += v;
|
||||||
next2(n2 + 1);
|
next2(n2 + 1);
|
||||||
}, 60);
|
}, 60);
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const timer = setInterval(() => {
|
if (desc.list.length > 1) {
|
||||||
desc.text = desc.text.slice(0, -1);
|
desc.t1 = setInterval(() => {
|
||||||
|
desc.text = desc.text.slice(0, -1);
|
||||||
|
|
||||||
if (!desc.text) {
|
if (!desc.text) {
|
||||||
clearInterval(timer);
|
clearInterval(desc.t1);
|
||||||
next(n + 1);
|
next(n + 1);
|
||||||
}
|
}
|
||||||
}, 50);
|
}, 50);
|
||||||
|
}
|
||||||
}, 1500);
|
}, 1500);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -217,7 +248,25 @@ const desc = reactive({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
next(0);
|
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({
|
const form = reactive({
|
||||||
|
name: "",
|
||||||
|
columns: [],
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
label: "请填写功能名称",
|
label: "请填写功能名称",
|
||||||
@ -711,6 +762,9 @@ $color: #41d1ff;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.panel-free {
|
.panel-free {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 1040px;
|
width: 1040px;
|
||||||
max-width: 100%;
|
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 {
|
.head {
|
||||||
padding: 260px 0 50px 0;
|
padding: 0 0 50px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
@ -916,12 +999,12 @@ $color: #41d1ff;
|
|||||||
&.is-coding {
|
&.is-coding {
|
||||||
.panel-free {
|
.panel-free {
|
||||||
.title {
|
.title {
|
||||||
transform: translateY(-130px);
|
transform: translateY(-5vh);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-code {
|
.panel-code {
|
||||||
height: calc(100% - 230px);
|
height: calc(100% - 20vh);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user