yidaima/RuoYi-Vue/easycode-web/src/views/HomeView.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>