初步模板

Signed-off-by: ChoChoX <xky1922@gmail.com>

src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/assets/vue.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07"
+     height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Login.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="login-container">
+    <el-card class="login-card" shadow="always">
+      <template #header>
+        <div class="card-header">
+          <h2>欢迎登录</h2>
+          <p class="subtitle">请输入您的账号信息</p>
+        </div>
+      </template>
+
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="rules"
+        label-position="top"
+        @keyup.enter="handleLogin"
+      >
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            v-model="loginForm.username"
+            :prefix-icon="User"
+            clearable
+            placeholder="请输入用户名"
+          />
+        </el-form-item>
+
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="loginForm.password"
+            :prefix-icon="Lock"
+            clearable
+            placeholder="请输入密码"
+            show-password
+            type="password"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
+        </el-form-item>
+
+        <el-form-item class="login-form-button">
+          <el-button
+            :loading="loading"
+            class="login-btn"
+            type="primary"
+            @click="handleLogin"
+          >
+            登 录
+          </el-button>
+        </el-form-item>
+
+      </el-form>
+
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from 'vue'
+import {ElMessage} from 'element-plus'
+import {Lock, User} from '@element-plus/icons-vue'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+
+const loginFormRef = ref(null)
+const loading = ref(false)
+
+const loginForm = reactive({
+  username: '',
+  password: '',
+  remember: false,
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ],
+}
+
+const handleLogin = async () => {
+  if (!loginFormRef.value) return
+  try {
+    await loginFormRef.value.validate()
+    loading.value = true
+    await new Promise((r) => setTimeout(r, 800))
+    ElMessage.success('登录成功（模拟）')
+    router.push('/panel')
+  } catch {
+    // 校验失败，element-plus 会自动显示红色提示
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.login-card {
+  width: 420px;
+  border-radius: 12px;
+  border: none;
+}
+
+.card-header {
+  text-align: center;
+}
+
+.card-header h2 {
+  margin: 0 0 8px;
+  color: #303133;
+}
+
+.subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+}
+
+.login-btn {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  width: 75%;
+}
+</style>

src/components/page1.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 1</h1>
+</template>
+
+<style scoped>
+
+</style>

src/components/page2.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 2</h1>
+</template>
+
+<style scoped>
+
+</style>

src/components/page3.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>hello ,im 3</h1>
+</template>
+
+<style scoped>
+
+</style>

src/components/panel.vue

@@ -0,0 +1,116 @@
+<script setup>
+import {ref} from 'vue'
+import {useRoute} from 'vue-router'
+import {ArrowLeft, Location, Menu as IconMenu, SwitchButton,} from '@element-plus/icons-vue'
+
+const route = useRoute()
+
+const isCollapse = ref(false)
+const switchFold = () => {
+  isCollapse.value = !isCollapse.value
+}
+
+
+</script>
+
+<template>
+  <el-container style="height: 100vh">
+    <el-header style="display: flex; align-items: center;">
+      <el-menu
+        :ellipsis="false"
+        mode="horizontal"
+        router
+        style="flex: 1;"
+      >
+        <!-- 左侧 -->
+        <el-menu-item index="">
+          <h1 style="margin: 0;">信息管理系统</h1>
+        </el-menu-item>
+
+        <!-- 右侧：margin-left: auto 把它推到底部 -->
+        <el-menu-item index="/login" style="margin-left: auto">
+          <el-icon><SwitchButton/></el-icon>
+          <template #title>LogOut</template>
+        </el-menu-item>
+      </el-menu>
+    </el-header>
+
+    <el-container>
+      <el-aside style="display: flex; flex-direction: column" width="200px">
+        <el-menu
+          :collapse="isCollapse"
+          :default-active="route.path"
+          router
+          style="flex: 1; display: flex; flex-direction: column"
+        >
+          <el-sub-menu index="1">
+            <template #title>
+              <el-icon><IconMenu/></el-icon>
+              <span>一号栏</span>
+            </template>
+            <el-menu-item index="/panel/page1">
+              <el-icon><Location/></el-icon>
+              <template #title>item one</template>
+            </el-menu-item>
+          </el-sub-menu>
+
+          <el-menu-item index="/panel/page2">
+            <el-icon><Location/></el-icon>
+            <template #title>二号栏</template>
+          </el-menu-item>
+          <el-menu-item index="/panel/page3">
+            <el-icon><Location/></el-icon>
+            <template #title>三号栏</template>
+          </el-menu-item>
+
+          <!-- ⭐ 关键：margin-top: auto 把它推到最底部 -->
+          <el-menu-item style="margin-top: auto" @click="switchFold">
+            <el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}" ><ArrowLeft /></el-icon>
+            <template #title>收缩</template>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <el-main>
+        <!-- ⭐ 这个 router-view 渲染嵌套的子路由（page1/page2/page3） -->
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped>
+
+.rotate-180-animation {
+  /* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
+  animation: rotate-180 0.3s ease-in-out;
+  animation-fill-mode:forwards;
+}
+
+.rotate-180-animation-reverse {
+  /* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
+  animation: rotate-180-reverse 0.3s ease-in-out;
+  animation-fill-mode:forwards;
+}
+
+@keyframes rotate-180 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes rotate-180-reverse {
+  from {
+    transform: rotate(180deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+
+</style>
+

src/main.js

@@ -0,0 +1,11 @@
+import {createApp} from 'vue'
+import './style.css'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(router)
+app.mount('#app')

src/router.js

@@ -0,0 +1,27 @@
+import {createRouter, createWebHistory} from "vue-router";
+import Login from "./components/Login.vue";
+import Panel from "./components/panel.vue";
+import Page1 from "./components/page1.vue";
+import Page2 from "./components/page2.vue";
+import Page3 from "./components/page3.vue";
+
+const routes = [
+    { path: "/", redirect: "/Login" },
+    { path: "/login", component: Login },
+    {
+        path: "/panel",
+        component: Panel,
+        redirect: "/panel/page1",
+        children: [
+            { path: "page1", component: Page1 },
+            { path: "page2", component: Page2 },
+            { path: "page3", component: Page3 },
+        ],
+    },
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+})
+export default router;