142 lines
2.7 KiB
Vue
142 lines
2.7 KiB
Vue
<template>
|
||
<section class="home page">
|
||
<div class="workbench panel">
|
||
<div class="intro">
|
||
<p class="eyebrow">EasyCode 前台生成器</p>
|
||
<h1>输入业务关键词，开始生成你的项目骨架</h1>
|
||
<p class="muted">从业务需求到数据库结构，再到前后端项目预览，流程都在前台完成。</p>
|
||
</div>
|
||
|
||
<el-form class="quick-form" @submit.prevent="handleGenerate">
|
||
<el-input
|
||
v-model="keyword"
|
||
size="large"
|
||
placeholder="例如：客户管理、设备巡检、合同审批"
|
||
clearable
|
||
@keyup.enter="handleGenerate"
|
||
>
|
||
<template #prefix>
|
||
<el-icon><Search /></el-icon>
|
||
</template>
|
||
</el-input>
|
||
<el-button size="large" type="primary" :icon="MagicStick" @click="handleGenerate">
|
||
立即生成
|
||
</el-button>
|
||
</el-form>
|
||
|
||
<div class="status-strip">
|
||
<div>
|
||
<strong>第一步</strong>
|
||
<span>生成数据库并编辑表字段</span>
|
||
</div>
|
||
<div>
|
||
<strong>第二步</strong>
|
||
<span>预览后端、前台和后台前端代码</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { MagicStick, Search } from '@element-plus/icons-vue'
|
||
|
||
const router = useRouter()
|
||
const keyword = ref('')
|
||
|
||
function handleGenerate() {
|
||
router.push({
|
||
path: '/generate',
|
||
query: keyword.value.trim() ? { keyword: keyword.value.trim() } : {}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.home {
|
||
display: flex;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.workbench {
|
||
display: grid;
|
||
gap: 28px;
|
||
width: 100%;
|
||
padding: 34px;
|
||
}
|
||
|
||
.intro {
|
||
max-width: 760px;
|
||
|
||
.eyebrow {
|
||
margin: 0 0 10px;
|
||
color: #1d4ed8;
|
||
font-weight: 700;
|
||
}
|
||
|
||
h1 {
|
||
max-width: 760px;
|
||
margin: 0;
|
||
color: #111827;
|
||
font-size: 38px;
|
||
line-height: 1.2;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.muted {
|
||
max-width: 620px;
|
||
margin: 14px 0 0;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.quick-form {
|
||
display: grid;
|
||
grid-template-columns: minmax(240px, 1fr) auto;
|
||
gap: 12px;
|
||
}
|
||
|
||
.status-strip {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 1px;
|
||
overflow: hidden;
|
||
border: 1px solid #dfe5ee;
|
||
border-radius: 8px;
|
||
background: #dfe5ee;
|
||
|
||
div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 18px;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
strong {
|
||
color: #111827;
|
||
}
|
||
|
||
span {
|
||
color: #667085;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.workbench {
|
||
padding: 22px;
|
||
}
|
||
|
||
.intro h1 {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.quick-form,
|
||
.status-strip {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|