💥 破坏性更新 咱不推荐更新
This commit is contained in:
7836246
@@ -0,0 +1,179 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'full',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonAppPage show-footer>
|
||||
<div class="flex">
|
||||
<n-card class="min-w-200 w-30%">
|
||||
<div class="flex items-center">
|
||||
<!-- <n-avatar round :size="60" :src="userStore.avatar" class="flex-shrink-0" />-->
|
||||
<div class="ml-20 flex-col">
|
||||
<span class="text-20 opacity-80">
|
||||
<!-- Hello, {{ userStore.nickName ?? userStore.username }}-->
|
||||
</span>
|
||||
<!-- <span class="mt-4 opacity-50">当前角色：{{ userStore.currentRole?.name }}</span>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-28 text-14 opacity-60">一个人几乎可以在任何他怀有无限热忱的事情上成功。</p>
|
||||
<p class="mt-12 text-right text-12 opacity-40">—— 查尔斯·史考伯</p>
|
||||
</n-card>
|
||||
<n-card class="ml-12 w-70%" title="✨ 欢迎使用 Vue Naive Admin 2.0">
|
||||
<template #header-extra>
|
||||
<a
|
||||
class="text-14 text-primary text-highlight hover:underline hover:opacity-80"
|
||||
href="https://isme.top"
|
||||
target="_blank"
|
||||
@click.prevent="useMessage()?.info('官网正在火速开发中...')"
|
||||
>
|
||||
isme.top
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<p class="opacity-60">
|
||||
这是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia +
|
||||
Unocss，后端使用 Nestjs + TypeOrm +
|
||||
MySql，简单易用，赏心悦目，历经十几次重构和细节打磨，诚意满满！！
|
||||
</p>
|
||||
<footer class="mt-12 flex items-center justify-end">
|
||||
<n-button
|
||||
type="primary"
|
||||
ghost
|
||||
tag="a"
|
||||
href="https://docs.isme.top/web/#/624306705/188522224"
|
||||
target="__blank"
|
||||
>
|
||||
开发文档
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
class="ml-12"
|
||||
tag="a"
|
||||
href="https://github.com/zclzone/vue-naive-admin/tree/2.x"
|
||||
target="__blank"
|
||||
>
|
||||
代码仓库
|
||||
</n-button>
|
||||
</footer>
|
||||
</n-card>
|
||||
</div>
|
||||
<div class="mt-12 flex">
|
||||
<n-card class="w-50%" title="💯 特性" segmented>
|
||||
<template #header-extra>
|
||||
<span class="opacity-90 text-highlight">👏 历经十几次重构和细节打磨</span>
|
||||
</template>
|
||||
|
||||
<ul class="opacity-90">
|
||||
<li class="py-4">
|
||||
🆒 使用
|
||||
<b>Vue3</b>
|
||||
主流技术栈:
|
||||
<span class="text-highlight">Vite + Vue3 + Pinia</span>
|
||||
</li>
|
||||
<li class="py-4">
|
||||
🍇 使用
|
||||
<b>原子CSS</b>
|
||||
框架:
|
||||
<span class="text-highlight">Unocss</span>
|
||||
，优雅、轻量、易用
|
||||
</li>
|
||||
<li class="py-4">
|
||||
🤹 使用主流的
|
||||
<span class="text-highlight">iconify + unocss</span>
|
||||
图标方案，支持自定义图标，支持动态渲染
|
||||
</li>
|
||||
<li class="py-4">
|
||||
🎨 使用 Naive UI，
|
||||
<span class="text-highlight">极致简洁的代码风格和清爽的页面设计</span>
|
||||
，审美在线，主题轻松定制
|
||||
</li>
|
||||
<li class="py-4">
|
||||
👏 先进且易于理解的文件结构设计，多个模块之间
|
||||
<b>零耦合</b>
|
||||
，单个业务模块删除不影响其他模块
|
||||
</li>
|
||||
<li class="py-4">
|
||||
🚀
|
||||
<span class="text-highlight">扁平化路由</span>
|
||||
设计，每一个组件都可以是一个页面，告别多级路由 KeepAlive 难实现问题
|
||||
</li>
|
||||
|
||||
<li class="py-4">
|
||||
🍒
|
||||
<span class="text-highlight">基于权限动态生成路由</span>
|
||||
，无需额外定义路由，
|
||||
<span class="text-highlight">403和404可区分</span>
|
||||
，而不是无权限也跳404
|
||||
</li>
|
||||
<li class="py-4">
|
||||
🔐 基于Redis集成
|
||||
<span class="text-highlight">无感刷新</span>
|
||||
，用户登录态可控，安全与体验缺一不可
|
||||
</li>
|
||||
<li class="py-4">
|
||||
✨ 基于 Naive UI 封装
|
||||
<span class="text-highlight">message</span>
|
||||
全局工具方法，支持批量提醒，支持跨页面共享实例
|
||||
</li>
|
||||
<li class="py-4">
|
||||
⚡️ 基于 Naive UI 封装常用的业务组件，包含
|
||||
<span class="text-highlight">Page</span>
|
||||
组件、
|
||||
<span class="text-highlight">CRUD</span>
|
||||
表格组件及
|
||||
<span class="text-highlight">Modal</span>
|
||||
组件，减少大量重复性工作
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<n-divider class="mb-0! mt-12!">
|
||||
<p class="text-14 opacity-60">
|
||||
👉点击
|
||||
<b class="mx-2 transition hover:text-primary">
|
||||
<a href="https://isme.top" target="_blank">更多</a>
|
||||
</b>
|
||||
查看更多实用功能，持续开发中...
|
||||
</p>
|
||||
</n-divider>
|
||||
</n-card>
|
||||
|
||||
<n-card class="ml-12 w-50%" title="🛠️ 技术栈" segmented>
|
||||
<!-- <VChart :option="skillOption" autoresize />-->
|
||||
</n-card>
|
||||
</div>
|
||||
|
||||
<n-card class="mt-12" title="⚡️ 趋势" segmented>
|
||||
<!-- <VChart :option="trendOption" :init-options="{ height: 400 }" autoresize />-->
|
||||
</n-card>
|
||||
</CommonAppPage>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.viewMount {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06),
|
||||
0 5px 12px 4px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #efeff5;
|
||||
.chart-header {
|
||||
padding: 0 10px;
|
||||
border-bottom: 1px solid #e5e6e7;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
.left-title {
|
||||
display: flex;
|
||||
color: #3a4446;
|
||||
}
|
||||
.right-unit {
|
||||
color: #fff;
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="login-container flex items-center justify-center p-[20px]">
|
||||
<div class="login-box w-[960px] h-[560px] md:w-[100%] md:px-[50px] px-[80px] py-[30px]">
|
||||
<div class="flex items-center justify-center md:hidden">
|
||||
<img :src="LoginPic" alt="login-pic" />
|
||||
</div>
|
||||
<div class="flex justify-center w-[360px] md:w-[100%] flex-col items-center space-y-8">
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-center items-center space-x-[10px]">
|
||||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="45" height="45">
|
||||
<path
|
||||
d="M228.364788 380.401625c0-20.948412 11.370167-40.019574 29.20405-49.277834l235.061667-136.228678 2.346563-1.237279c14.079381-6.762369 30.292002-6.719705 46.525955 1.322608l235.168329 137.103307c18.559184 9.044936 30.398664 28.500081 30.398664 49.832476l0.426648 272.905337c0 21.033742-11.476829 40.232898-28.436084 48.851186l-242.165354 135.290053a50.643107 50.643107 0 0 1-42.792786 1.621262l-3.178527-1.535933L99.239798 624.572225C80.445957 615.697948 68.222494 596.072144 68.222494 574.249104l0.959958-294.643048c0-21.417725 11.903477-40.894202 28.436084-48.851186L492.395848 5.058124c14.100713-6.869031 30.377331-6.869031 46.611285 1.130617l387.609628 223.499509c18.559184 9.023603 30.441329 28.500081 30.441328 49.917806v452.374781c0 21.183069-11.647488 40.467554-28.286756 48.765856l-392.004102 223.563506a50.643107 50.643107 0 0 1-43.048774 1.215946l-2.858541-1.407938-237.57889-130.767585-100.262259 89.638727c-21.076407 20.905748-54.397609 20.052452-74.450061-1.919916A56.424186 56.424186 0 0 1 64.020012 923.033772V754.145196c0-20.137781 15.593981-36.435732 34.835802-36.435732s34.835802 16.29795 34.835802 36.435732v130.340937l81.063104-72.48748a51.005758 51.005758 0 0 1 56.530848-10.900855l2.837209 1.386606 239.754794 131.962199 373.530247-213.025302V290.165591L514.666869 75.284371 138.811391 290.165591l-0.89596 273.331985 90.449357 49.51249V380.401625z m86.716188 173.752362h47.54991l73.511435 93.585219a42.046152 42.046152 0 0 0 60.648001 6.399719c6.954361-5.866409 11.946142-13.823392 14.33537-22.804331l46.077974-173.795027 57.87479 96.635752h95.398473c17.215243 0 31.16663-14.506029 31.16663-32.339911 0-17.876548-13.951387-32.339912-31.145298-32.339912h-60.775995l-62.78124-104.827392a43.304763 43.304763 0 0 0-25.193559-19.519142c-22.953658-6.549045-46.675282 7.466338-52.989671 31.273292l-47.848563 180.472067-68.690314-87.398825H315.102309c-17.215243 0-31.16663 14.463364-31.16663 32.339912 0 17.855215 13.951387 32.318579 31.145297 32.318579z"
|
||||
|
||||
></path>
|
||||
</svg>
|
||||
<n-gradient-text :gradient="gradient" class="text-[24px]">Admin Pro</n-gradient-text>
|
||||
</div>
|
||||
<div class="text-[#5a6f7e]">Admin Pro 中后台前端/设计解决方案</div>
|
||||
</div>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
:model="formModel"
|
||||
:rules="formRules"
|
||||
label-placement="left"
|
||||
size="large"
|
||||
class="w-[100%]"
|
||||
:show-require-mark="false"
|
||||
:show-label="false"
|
||||
>
|
||||
<n-form-item path="username">
|
||||
<n-input v-model:value="formModel.username" round placeholder="请输入用户名">
|
||||
<template #prefix>
|
||||
<Icon name="mdi:user-outline" />
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item path="password">
|
||||
<n-input v-model:value="formModel.password" round placeholder="请输入密码">
|
||||
<template #prefix>
|
||||
<Icon name="material-symbols:lock-outline" />
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<div class="flex justify-between w-[100%] px-[2px]">
|
||||
<div class="flex-initial">
|
||||
<n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
|
||||
</div>
|
||||
<div class="flex-initial order-last">
|
||||
<n-button text type="primary">忘记密码</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button type="primary" size="large" round @click="handleSubmitForm" :loading="submitLoading" block>登录</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: "empty",
|
||||
})
|
||||
import LoginPic from "@/assets/images/login-pic.png";
|
||||
|
||||
const router = useRouter();
|
||||
const message = useMessage();
|
||||
|
||||
const autoLogin = ref(false);
|
||||
const submitLoading = ref(false);
|
||||
const formRef = ref(null);
|
||||
const formModel = reactive({
|
||||
username: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const formRules = {
|
||||
username: { required: true, message: "请输入用户名", trigger: "blur" },
|
||||
password: { required: true, message: "请输入密码", trigger: "blur" },
|
||||
};
|
||||
|
||||
const gradient = {
|
||||
deg: 92.06,
|
||||
from: "#33c2ff 0%",
|
||||
// to: `${appStore.appTheme} 100%`,
|
||||
};
|
||||
|
||||
const handleSubmitForm = (e) => {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-container {
|
||||
background: linear-gradient(-135deg, #d765cf, #495fd1);
|
||||
min-height: 100%;
|
||||
.login-box {
|
||||
@apply shadow-md rounded-xl bg-white flex justify-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user