Add EasyCode front web app

RuoYi-Vue/easycode-web/src/views/HomeView.vue

@@ -0,0 +1,142 @@
+<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-button size="large" @click="router.push('/login')">登录</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 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>