mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-04 05:32:26 +08:00
2.1.0
This commit is contained in:
ahjung
@@ -1,5 +1,11 @@
|
||||
# CHANGELOG
|
||||
|
||||
## 2.1.0
|
||||
|
||||
- 优化 `登录页面` 排版
|
||||
- 新增 `构建分包策略`
|
||||
- 依赖升级
|
||||
|
||||
## 2.0.0
|
||||
|
||||
- 新增 `alova` 请求库
|
||||
|
||||
64
README.md
64
README.md
@@ -1,10 +1,7 @@
|
||||
## 🚀 简介
|
||||
|
||||
`Naive Ui Admin` 是一款 完全免费 且可商用的中后台解决方案，基于 🌟 `Vue3.0` 🌟、🚀 `Vite` 🚀、✨ [Naive UI](https://www.naiveui.com/) ✨ 和 🎉 `TypeScript` 🎉。
|
||||
它融合了最新的前端技术栈，提炼了典型的业务模型和页面，包括二次封装组件、动态菜单、权限校验等功能，助力快速搭建企业级中后台项目。
|
||||
|
||||
|
||||
|
||||
它融合了最新的前端技术栈，提炼了典型的业务模型和页面，包括二次封装组件、动态菜单、权限校验等功能，助力快速搭建企业级中后台项目
|
||||
|
||||
## 🌈 特性
|
||||
📦 二次封装的实用高扩展性组件
|
||||
@@ -18,51 +15,52 @@
|
||||
|
||||
账号：admin，密码：123456（随意）
|
||||
|
||||
## 💡 提示
|
||||
# 🚀 Naive Admin - 开箱即用的企业级前后端框架
|
||||
|
||||
如果您需要更多功能和组件，不妨尝试全新的 `NaiveAdmin`，它可能正是您寻找的解决方案
|
||||
> **✨ 多生态支持 · 多租户就绪 · 四年持续迭代**
|
||||
> 前端自由切换 Vue3 UI 库 | 后端支持 Java/PHP 单体与多租户架构
|
||||
> [官网直达](https://www.naiveadmin.com) | [更新日志](https://www.yuque.com/u5825/zaqu0e)
|
||||
|
||||
[NaiveAdmin 官网](https://www.naiveadmin.com)
|
||||
---
|
||||
|
||||
[NaiveAdmin 变更日志](https://www.yuque.com/u5825/zaqu0e)
|
||||
## 🔥 为什么选择 NaiveAdmin 商业版？
|
||||
|
||||
[为什么选我们？](https://www.naiveadmin.com/choose/we)
|
||||
`⏱️ 节省200+人日` · `🏆 千人+开发者信任` · `🚀 四年持续迭代`
|
||||
|
||||
### Plus
|
||||
> **"告别重复造轮子！"**
|
||||
> 全系列版本提供 **30+开箱即用组件** 与 **企业级业务模块**，让您专注核心业务创新！
|
||||
|
||||
全新设计版本，增加了众多特性，值得一试
|
||||
---
|
||||
|
||||
基于 `NaiveUi` 组件库
|
||||
## 🖥️ 纯前端版本
|
||||
|
||||
[NaiveAdmin Plus 预览](https://plus.naiveadmin.com)
|
||||
| 版本 | 技术栈 | 设计特点 | 配套后端 | 预览 |
|
||||
|----------------|--------|------------------|----------------------------|----------------------------------------|
|
||||
| **Naive UI Plus** | Vu3、Ts | 全新设计语言 · 50+新增特性 | 支持Java/PHP | [立即体验](https://plus.naiveadmin.com) |
|
||||
| **Naive UI** | Vu3、Ts | 经典设计语言 · 30+新增特性 | 支持Java/PHP | [立即体验](https://pro.naiveadmin.com) |
|
||||
| **Arco Design** | Vu3、Ts | 智能设计体系 · 轻盈交互 | 支持Java | [立即体验](https://arco.naiveadmin.com) |
|
||||
| **Element Plus** | Vu3、Ts | 设计师友好 · 直观易用 | 支持Java | [立即体验](https://element.naiveadmin.com) |
|
||||
| **Antd Vue** | Vu3、Ts | 企业级设计规范 · 完备组件 | 否 | [立即体验](https://antd.naiveadmin.com) |
|
||||
|
||||
基于 `Antd` 组件库
|
||||
## 🔌 前后端版本
|
||||
|
||||
[NaiveAdmin Antd Plus 预览](https://plus-full.naiveadmin.com)
|
||||
| 版本 | 技术栈 | 设计特点 | 预览 |
|
||||
|------|--------|----------|--------------------------------------------------------------|
|
||||
| **Naive UI Plus** | Vu3、Ts | 全新设计语言 · 50+新增特性 | [立即体验](https://plus-full.naiveadmin.com) |
|
||||
| **Arco Design** | Vu3、Ts | 智能设计体系 · 轻盈交互 |[立即体验](https://arco-full.naiveadmin.com) |
|
||||
| **Element Plus** | Vu3、Ts | 设计师友好 · 直观易用 | [立即体验](https://element-full.naiveadmin.com) |
|
||||
|
||||
### Arco vue
|
||||
## 🏢 多租户版本
|
||||
|
||||
智能设计体系，提供轻盈体验
|
||||
| 版本 | 技术栈 | 设计特点 | 适用场景 | 预览 |
|
||||
|--------------|---------------|-----------------------------|----------------|-------------------------------------------|
|
||||
| **Vue3** | Vu3、Ts、Java | 百家落地验证架构，免去试错成本，专为 Saas 化系统设计 | 构建企业级 Saas 化系统 | [立即体验](https://tenant.naiveadmin.com) |
|
||||
| **React** | React、Ts、Java | 百家落地验证架构，免去试错成本，专为 Saas 化系统设计 | 构建企业级 Saas 化系统 | [立即体验](https://compose.warden.vip) |
|
||||
|
||||
[NaiveAdmin Arco 预览](https://arco.naiveadmin.com)
|
||||
|
||||
### Element Plus
|
||||
|
||||
面向设计师和开发者的组件库
|
||||
|
||||
[Element Plus Admin 预览](https://element.naiveadmin.com)
|
||||
|
||||
### Antd vue
|
||||
|
||||
新产品，如果您选的技术栈是 `Antd` 的话，不妨看看
|
||||
|
||||
[NaiveAdmin Antd 预览](https://antd.naiveadmin.com)
|
||||
|
||||
以上版本同时具备 `NaiveAdmin` 功能/组件/页面，一如既往、开箱即用，欢迎前往查看。
|
||||
|
||||
## 📚 文档
|
||||
|
||||
[文档地址](https://docs.naiveadmin.com)
|
||||
[开源版本文档](https://docs.naiveadmin.com)
|
||||
|
||||
## 🛠 准备
|
||||
|
||||
|
||||
50
package.json
50
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui-admin",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.0",
|
||||
"author": {
|
||||
"name": "Ahjung",
|
||||
"email": "735878602@qq.com",
|
||||
@@ -25,56 +25,56 @@
|
||||
"lint:pretty": "pretty-quick --staged"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alova/mock": "^2.0.6",
|
||||
"@alova/mock": "^2.0.17",
|
||||
"@vicons/antd": "^0.12.0",
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"@vueup/vue-quill": "^1.2.0",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"alova": "^3.0.16",
|
||||
"alova": "^3.3.4",
|
||||
"date-fns": "^2.30.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"echarts": "^5.5.1",
|
||||
"echarts": "^5.6.0",
|
||||
"element-resize-detector": "^1.2.4",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mockjs": "^1.1.0",
|
||||
"naive-ui": "^2.39.0",
|
||||
"pinia": "^2.2.2",
|
||||
"qs": "^6.13.0",
|
||||
"vue": "^3.5.5",
|
||||
"vue-router": "^4.4.5",
|
||||
"naive-ui": "^2.42.0",
|
||||
"pinia": "^2.3.1",
|
||||
"qs": "^6.14.0",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.5.1",
|
||||
"vue-types": "^4.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.8.1",
|
||||
"@commitlint/config-conventional": "^17.8.1",
|
||||
"@faker-js/faker": "^9.0.0",
|
||||
"@types/lodash": "^4.17.7",
|
||||
"@types/node": "^18.19.50",
|
||||
"@faker-js/faker": "^9.9.0",
|
||||
"@types/lodash": "^4.17.20",
|
||||
"@types/node": "^18.19.122",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"@vitejs/plugin-vue-jsx": "^2.1.1",
|
||||
"@vue/compiler-sfc": "^3.5.5",
|
||||
"@vue/compiler-sfc": "^3.5.18",
|
||||
"@vue/eslint-config-typescript": "^11.0.3",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"commitizen": "^4.3.0",
|
||||
"core-js": "^3.38.1",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"commitizen": "^4.3.1",
|
||||
"core-js": "^3.45.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"dotenv": "^16.4.5",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^8.10.0",
|
||||
"dotenv": "^16.6.1",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-prettier": "^8.10.2",
|
||||
"eslint-define-config": "1.12.0",
|
||||
"eslint-plugin-jest": "^27.9.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.28.0",
|
||||
"eslint-plugin-prettier": "^4.2.5",
|
||||
"eslint-plugin-vue": "^9.33.0",
|
||||
"esno": "^0.16.3",
|
||||
"gh-pages": "^4.0.0",
|
||||
"husky": "^8.0.3",
|
||||
"jest": "^29.7.0",
|
||||
"less": "^4.2.0",
|
||||
"less": "^4.4.0",
|
||||
"less-loader": "^11.1.4",
|
||||
"lint-staged": "^13.3.0",
|
||||
"postcss": "^8.4.45",
|
||||
"postcss": "^8.5.6",
|
||||
"prettier": "^2.8.8",
|
||||
"pretty-quick": "^3.3.1",
|
||||
"rimraf": "^3.0.2",
|
||||
@@ -83,10 +83,10 @@
|
||||
"stylelint-config-standard": "^29.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"stylelint-scss": "^4.7.0",
|
||||
"tailwindcss": "^3.4.11",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^4.9.5",
|
||||
"unplugin-vue-components": "^0.22.12",
|
||||
"vite": "^5.4.5",
|
||||
"vite": "^5.4.19",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
"vite-plugin-style-import": "^2.0.0",
|
||||
|
||||
2876
pnpm-lock.yaml
generated
2876
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -5,5 +5,5 @@ export const websiteConfig = Object.freeze({
|
||||
title: 'NaiveUiAdmin',
|
||||
logo: logoImage,
|
||||
loginImage: loginImage,
|
||||
loginDesc: 'Naive Ui Admin中后台前端/设计解决方案',
|
||||
loginDesc: 'Naive Ui Admin 中后台前端/设计解决方案',
|
||||
});
|
||||
|
||||
@@ -9,7 +9,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: 'https://www.naiveadmin.com',
|
||||
component: Layout,
|
||||
meta: {
|
||||
title: 'Pro 版本',
|
||||
title: 'Plus 版本',
|
||||
extra: renderNew(),
|
||||
icon: renderIcon(SketchOutlined),
|
||||
sort: 12,
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
<template>
|
||||
<div class="view-account">
|
||||
<div class="view-account-header"></div>
|
||||
<div class="view-account-container">
|
||||
<div class="view-account-background">
|
||||
<div class="line line-1"></div>
|
||||
<div class="line line-2"></div>
|
||||
<div class="line line-3"></div>
|
||||
<div class="square square-1"></div>
|
||||
<div class="square square-2"></div>
|
||||
<div class="triangle"></div>
|
||||
<div class="wave wave-1"></div>
|
||||
<div class="wave wave-2"></div>
|
||||
<div class="wave wave-3"></div>
|
||||
</div>
|
||||
<div class="view-account-container animate__animated animate__fadeInDown">
|
||||
<div class="view-account-top">
|
||||
<div class="view-account-top-logo">
|
||||
<img :src="websiteConfig.loginImage" alt="" />
|
||||
@@ -9,15 +20,22 @@
|
||||
<div class="view-account-top-desc">{{ websiteConfig.loginDesc }}</div>
|
||||
</div>
|
||||
<div class="view-account-form">
|
||||
<h2 class="view-account-title">账号登录</h2>
|
||||
<div class="login-welcome">欢迎回来，请登录您的账号</div>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
size="large"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
class="login-form"
|
||||
>
|
||||
<n-form-item path="username">
|
||||
<n-input v-model:value="formInline.username" placeholder="请输入用户名">
|
||||
<n-form-item path="username" class="username-item">
|
||||
<n-input
|
||||
v-model:value="formInline.username"
|
||||
placeholder="请输入用户名"
|
||||
class="login-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18" color="#808695">
|
||||
<PersonOutline />
|
||||
@@ -25,12 +43,13 @@
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item path="password">
|
||||
<n-form-item path="password" class="password-item">
|
||||
<n-input
|
||||
v-model:value="formInline.password"
|
||||
type="password"
|
||||
showPasswordOn="click"
|
||||
placeholder="请输入密码"
|
||||
class="login-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18" color="#808695">
|
||||
@@ -39,42 +58,52 @@
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item class="default-color">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex-initial">
|
||||
<n-form-item class="default-color remember-forgot">
|
||||
<div class="flex-between-wrapper">
|
||||
<div class="left">
|
||||
<n-checkbox v-model:checked="autoLogin">自动登录</n-checkbox>
|
||||
</div>
|
||||
<div class="flex-initial order-last">
|
||||
<a href="javascript:">忘记密码</a>
|
||||
<div class="right">
|
||||
<a href="javascript:" class="forgot-link">忘记密码</a>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button type="primary" @click="handleSubmit" size="large" :loading="loading" block>
|
||||
<n-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="login-button"
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
<n-form-item class="default-color">
|
||||
<n-form-item class="default-color other-item">
|
||||
<div class="flex view-account-other">
|
||||
<div class="flex-initial">
|
||||
<div class="flex-initial other-text">
|
||||
<span>其它登录方式</span>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<n-icon size="24" color="#2d8cf0">
|
||||
<div class="social-login">
|
||||
<a href="javascript:" class="social-icon">
|
||||
<n-icon size="24" color="#909399">
|
||||
<LogoGithub />
|
||||
</n-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial mx-2">
|
||||
<a href="javascript:">
|
||||
<n-icon size="24" color="#2d8cf0">
|
||||
<a href="javascript:" class="social-icon">
|
||||
<n-icon size="24" color="#909399">
|
||||
<LogoFacebook />
|
||||
</n-icon>
|
||||
</a>
|
||||
<a href="javascript:" class="social-icon">
|
||||
<n-icon size="24" color="#909399">
|
||||
<LogoWechat />
|
||||
</n-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial" style="margin-left: auto">
|
||||
<a href="javascript:">注册账号</a>
|
||||
<a href="javascript:" class="register-link">注册账号</a>
|
||||
</div>
|
||||
</div>
|
||||
</n-form-item>
|
||||
@@ -85,14 +114,25 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { ResultEnum } from '@/enums/httpEnum';
|
||||
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
|
||||
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook, LogoWechat } from '@vicons/ionicons5';
|
||||
import { PageEnum } from '@/enums/pageEnum';
|
||||
import { websiteConfig } from '@/config/website.config';
|
||||
|
||||
// 添加页面加载动画效果
|
||||
onMounted(() => {
|
||||
// 聚焦用户名输入框
|
||||
setTimeout(() => {
|
||||
const usernameInput = document.querySelector('input[placeholder="请输入用户名"]');
|
||||
if (usernameInput) {
|
||||
(usernameInput as HTMLElement).focus();
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
interface FormState {
|
||||
username: string;
|
||||
password: string;
|
||||
@@ -161,27 +201,122 @@
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background-color: #f0f2f5;
|
||||
background: linear-gradient(140deg, #e8f1fa, #c2d9ec, #a1c3e0, #80aed3);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iMiIgZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMSkiIC8+Cjwvc3ZnPg==');
|
||||
opacity: 0.6;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KICA8cmVjdCB4PSI1MCIgeT0iNTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgNTUgNTUpIiBmaWxsPSJyZ2JhKDQ1LCAxNDAsIDI0MCwgMC4wNSkiIC8+Cjwvc3ZnPg==');
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&-container {
|
||||
flex: 1;
|
||||
padding: 32px 12px;
|
||||
max-width: 384px;
|
||||
min-width: 320px;
|
||||
padding: 32px 40px 20px;
|
||||
max-width: 580px;
|
||||
min-width: 460px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 10vh;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
// 移除圆形装饰元素
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, #2d8cf0, #0081ff);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-welcome {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&-top {
|
||||
padding: 32px 0;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
|
||||
&-logo {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 14px;
|
||||
color: #808695;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
&-other {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.default-color {
|
||||
@@ -191,18 +326,368 @@
|
||||
color: #515a6e;
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
margin-top: 10px;
|
||||
height: 42px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
opacity: 0;
|
||||
border-radius: 100%;
|
||||
transform: scale(1, 1) translate(-50%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
&:focus:not(:active)::after {
|
||||
animation: ripple 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
20% {
|
||||
transform: scale(25, 25);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(40, 40);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remember-forgot {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.flex-between-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-link {
|
||||
color: #606266;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #2d8cf0;
|
||||
}
|
||||
}
|
||||
|
||||
.social-login {
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
transition: all 0.3s;
|
||||
background-color: rgba(144, 147, 153, 0.1);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(45, 140, 240, 0.2);
|
||||
transform: scale(1.1);
|
||||
|
||||
:deep(svg) {
|
||||
color: #2d8cf0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-link {
|
||||
color: #2d8cf0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #57a3f3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
:deep(.n-form-item-feedback-wrapper) {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
:deep(.n-input) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-input {
|
||||
:deep(.n-input__input-el) {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
:deep(.n-input-wrapper) {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:deep(.n-input-wrapper) {
|
||||
box-shadow: 0 0 0 1px rgba(45, 140, 240, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.username-item, .password-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.other-text {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.other-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.view-account {
|
||||
background-image: url('../../assets/images/login.svg');
|
||||
background-image: url('../../assets/images/login.svg'),
|
||||
radial-gradient(circle at 10% 20%, rgba(100, 149, 237, 0.25) 0%, rgba(65, 105, 225, 0.2) 40%, rgba(30, 144, 255, 0.1) 90%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 100%;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(45, 140, 240, 0.1), rgba(45, 140, 240, 0.05));
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZGVmcz4KICA8cGF0dGVybiBpZD0icGF0dGVybiIgeD0iMCIgeT0iMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KICAgIDxjaXJjbGUgY3g9IjMwIiBjeT0iMzAiIHI9IjEuNSIgZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMikiIC8+CiAgPC9wYXR0ZXJuPgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiIC8+Cjwvc3ZnPg==');
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-container {
|
||||
margin-top: 15vh;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-account-container {
|
||||
padding: 32px 0 24px 0;
|
||||
@media (max-height: 650px) {
|
||||
.view-account-container {
|
||||
margin-top: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
.view-account-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
background: linear-gradient(90deg, rgba(45, 140, 240, 0.2), rgba(0, 129, 255, 0.1));
|
||||
|
||||
&-1 {
|
||||
width: 300px;
|
||||
height: 2px;
|
||||
top: 15%;
|
||||
right: 5%;
|
||||
transform: rotate(-30deg);
|
||||
animation: pulse 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
bottom: 20%;
|
||||
left: 10%;
|
||||
transform: rotate(45deg);
|
||||
animation: pulse 6s ease-in-out infinite 1s;
|
||||
}
|
||||
|
||||
&-3 {
|
||||
width: 150px;
|
||||
height: 2px;
|
||||
top: 40%;
|
||||
left: 5%;
|
||||
transform: rotate(-15deg);
|
||||
animation: pulse 7s ease-in-out infinite 2s;
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
position: absolute;
|
||||
|
||||
&-1 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 10%;
|
||||
left: 15%;
|
||||
background: linear-gradient(45deg, rgba(45, 140, 240, 0.15), rgba(0, 129, 255, 0.05));
|
||||
transform: rotate(30deg);
|
||||
animation: rotate 15s linear infinite;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
bottom: 15%;
|
||||
right: 10%;
|
||||
border: 2px solid rgba(45, 140, 240, 0.1);
|
||||
background: transparent;
|
||||
animation: rotate 12s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.triangle {
|
||||
position: absolute;
|
||||
bottom: 30%;
|
||||
right: 20%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 50px solid transparent;
|
||||
border-right: 50px solid transparent;
|
||||
border-bottom: 80px solid rgba(45, 140, 240, 0.08);
|
||||
animation: float 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
transform-origin: bottom left;
|
||||
|
||||
&-1 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMikiIGQ9Ik0wLDMyMEMwLDI0MCA0MCwxNjAgODAsMTYwQzEyMCwxNjAgMTYwLDI0MCAyMDAsMjQwQzI0MCwyNDAgMjgwLDE2MCAzMjAsMTYwQzM2MCwxNjAgNDAwLDI0MCA0NDAsMjQwQzQ4MCwyNDAgNTIwLDE2MCA1NjAsMTYwQzYwMCwxNjAgNjQwLDI0MCA2ODAsMjQwQzcyMCwyNDAgNzYwLDE2MCA4MDAsMTYwQzg0MCwxNjAgODgwLDI0MCA5MjAsMjQwQzk2MCwyNDAgMTAwMCwxNjAgMTA0MCwxNjBDMTA4MCwxNjAgMTEyMCwyNDAgMTE2MCwyNDBDMTIwMCwyNDAgMTI0MCwxNjAgMTI4MCwxNjBDMTMyMCwxNjAgMTM2MCwyNDAgMTQwMCwyNDBDMTQ0MCwyNDAgMTQ0MCwxNjAgMTQ0MCwxNjBMMTQ0MCwzMjBMMCwzMjBaIj48L3BhdGg+PC9zdmc+');
|
||||
background-size: 100% 120px;
|
||||
animation: wave-left-to-right 15s ease-in-out infinite;
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
&-2 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMTUpIiBkPSJNMCwzMjBDMCwyNDAgNjAsMTgwIDEyMCwxODBDMTgwLDE4MCAyNDAsMjQwIDMwMCwyNDBDMzYwLDI0MCA0MjAsMTgwIDQ4MCwxODBDNTQwLDE4MCA2MDAsMjQwIDY2MCwyNDBDNzIwLDI0MCA3ODAsMTgwIDg0MCwxODBDOTAwLDE4MCA5NjAsMjQwIDEwMjAsMjQwQzEwODAsMjQwIDExNDAsMTgwIDEyMDAsMTgwQzEyNjAsMTgwIDEzMjAsMjQwIDEzODAsMjQwQzE0NDAsMjQwIDE0NDAsMTgwIDE0NDAsMTgwTDE0NDAsMzIwTDAsMzIwWiI+PC9wYXRoPjwvc3ZnPg==');
|
||||
background-size: 100% 100px;
|
||||
animation: wave-left-to-right 18s ease-in-out infinite;
|
||||
animation-delay: -5s;
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
&-3 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0icmdiYSg0NSwgMTQwLCAyNDAsIDAuMSkiIGQ9Ik0wLDMyMEMwLDI2MCAzMCwyMDAgNjAsMjAwQzkwLDIwMCAxMjAsMjYwIDE1MCwyNjBDMTgwLDI2MCAyMTAsMjAwIDI0MCwyMDBDMjcwLDIwMCAzMDAsMjYwIDMzMCwyNjBDMzYwLDI2MCAzOTAsMjAwIDQyMCwyMDBDNDUwLDIwMCA0ODAsMjYwIDUxMCwyNjBDNTQwLDI2MCA1NzAsMjAwIDYwMCwyMDBDNjMwLDIwMCA2NjAsMjYwIDY5MCwyNjBDNzIwLDI2MCA3NTAsMjAwIDc4MCwyMDBDODEwLDIwMCA4NDAsMjYwIDg3MCwyNjBDOTAwLDI2MCA5MzAsMjAwIDk2MCwyMDBDOTkwLDIwMCAxMDIwLDI2MCAxMDUwLDI2MEMxMDgwLDI2MCAxMTEwLDIwMCAxMTQwLDIwMEMxMTcwLDIwMCAxMjAwLDI2MCAxMjMwLDI2MEMxMjYwLDI2MCAxMjkwLDIwMCAxMzIwLDIwMEMxMzUwLDIwMCAxMzgwLDI2MCAxNDEwLDI2MEMxNDQwLDI2MCAxNDQwLDIwMCAxNDQwLDIwMEwxNDQwLDMyMEwwLDMyMFoiPjwvcGF0aD48L3N2Zz4=');
|
||||
background-size: 100% 80px;
|
||||
animation: wave-left-to-right 20s ease-in-out infinite;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wave-left-to-right {
|
||||
0% {
|
||||
background-position-x: 0;
|
||||
background-position-y: 100%;
|
||||
}
|
||||
50% {
|
||||
background-position-x: 720px;
|
||||
background-position-y: 50%;
|
||||
}
|
||||
100% {
|
||||
background-position-x: 1440px;
|
||||
background-position-y: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -61,6 +61,24 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||
outDir: OUTPUT_DIR,
|
||||
reportCompressedSize: false,
|
||||
chunkSizeWarningLimit: 2000,
|
||||
// 构建分包策略
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'naive-ui': ['naive-ui'],
|
||||
'lodash-es': ['lodash-es'],
|
||||
'vue-router': ['vue-router'],
|
||||
'vue-quill': ['@vueup/vue-quill'],
|
||||
'vicons-antd': ['@vicons/antd'],
|
||||
'vicons-ionicons5': ['@vicons/ionicons5'],
|
||||
vuedraggable: ['vuedraggable'],
|
||||
echarts: ['echarts'],
|
||||
vueuse: ['@vueuse/core'],
|
||||
vue: ['vue'],
|
||||
pinia: ['pinia'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user