通用中后台框架第一版

2026-04-28 16:27:16 +08:00
commit b8d25869c6
115 changed files with 15223 additions and 0 deletions
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="relative flex min-h-screen items-center justify-center overflow-hidden bg-slate-100 px-4"
+  >
+    <div
+      class="absolute inset-0 bg-[radial-gradient(circle_at_20%_10%,rgba(53,109,255,0.12),transparent_34%),radial-gradient(circle_at_80%_90%,rgba(14,165,233,0.12),transparent_32%)]"
+    ></div>
+    <n-card class="relative z-10 w-full max-w-md rounded-2xl border border-slate-200 shadow-panel">
+      <template #header>
+        <div class="text-center">
+          <div class="text-2xl font-semibold text-slate-900">通用管理平台</div>
+          <div class="mt-1 text-sm text-slate-500">中后台管理系统</div>
+        </div>
+      </template>
+
+      <n-form ref="formRef" :model="form" :rules="rules" size="large" @submit.prevent="onSubmit">
+        <n-form-item path="username" label="用户名">
+          <n-input v-model:value="form.username" placeholder="请输入用户名" />
+        </n-form-item>
+        <n-form-item path="password" label="密码">
+          <n-input
+            v-model:value="form.password"
+            type="password"
+            show-password-on="click"
+            placeholder="请输入密码"
+          />
+        </n-form-item>
+        <n-button type="primary" block size="large" :loading="loading" attr-type="submit"
+          >登录</n-button
+        >
+      </n-form>
+
+      <div class="mt-4 text-xs text-slate-500">默认账号：admin / Admin@123456</div>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import type { FormInst, FormRules } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const router = useRouter()
+const route = useRoute()
+const message = useMessage()
+const authStore = useAuthStore()
+
+const loading = ref(false)
+const formRef = ref<FormInst | null>(null)
+const form = reactive({
+  username: 'admin',
+  password: 'Admin@123456'
+})
+
+const rules: FormRules = {
+  username: [{ required: true, message: '请输入用户名', trigger: ['blur', 'input'] }],
+  password: [{ required: true, message: '请输入密码', trigger: ['blur', 'input'] }]
+}
+
+async function onSubmit() {
+  await formRef.value?.validate()
+  loading.value = true
+  try {
+    await authStore.login(form)
+    message.success('登录成功')
+    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/dashboard'
+    await router.replace(redirect)
+  } finally {
+    loading.value = false
+  }
+}
+</script>