mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
build(web): 添加 ESLint 和 Prettier 配置文件
- 新增 .eslintrc.js 文件，配置 ESLint 规则和插件 - 新增 .prettierrc.json 文件，设置 Prettier 格式化选项
This commit is contained in:
zhoumengru
@@ -4,23 +4,12 @@
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
min-width: 1440px;
|
||||
min-height: 900px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 120 KiB |
BIN
web/src/assets/images/loginFrom.png
Normal file
BIN
web/src/assets/images/loginFrom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@@ -1,28 +1,25 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
redirect: "/login",
|
||||
path: '/',
|
||||
redirect: '/login'
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "login" */ "@/views/LoginView.vue"),
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import(/* webpackChunkName: "login" */ '@/views/LoginView.vue')
|
||||
},
|
||||
{
|
||||
path: "/main",
|
||||
name: "main",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "login" */ "@/views/MainView.vue"),
|
||||
},
|
||||
];
|
||||
path: '/main',
|
||||
name: 'main',
|
||||
component: () => import(/* webpackChunkName: "login" */ '@/views/MainView.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(""),
|
||||
routes,
|
||||
});
|
||||
history: createWebHistory(''),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router;
|
||||
export default router
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
colorPrimary: '#065758',
|
||||
},
|
||||
colorPrimary: '#143d7d'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div class="login">
|
||||
@@ -12,337 +12,143 @@
|
||||
<div class="title" style="">账号登录</div>
|
||||
<a-form ref="ruleForm" :model="form" :rules="rules">
|
||||
<a-form-item label="" name="user">
|
||||
<a-input
|
||||
:bordered="false"
|
||||
v-model:value="form.user"
|
||||
placeholder="请输入账号"
|
||||
autocomplete
|
||||
>
|
||||
<a-input v-model:value="form.user" placeholder="请输入账号" autocomplete>
|
||||
<template #prefix>
|
||||
<span class="iconfont icon-a-xingzhuangjiehe1x"></span>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="" name="passwd">
|
||||
<a-input-password
|
||||
:bordered="false"
|
||||
v-model:value="form.passwd"
|
||||
placeholder="请输入密码"
|
||||
autocomplete
|
||||
@pressEnter="login"
|
||||
style="background-color: #fff; margin-top: 6px"
|
||||
>
|
||||
<template #prefix>
|
||||
<span class="iconfont icon-a-xingzhuangjiehe1x1"></span>
|
||||
<LockOutlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-button class="login-btn" @click="login" :loading="loading"
|
||||
>登录
|
||||
</a-button>
|
||||
<a-button class="login-btn" @click="login" :loading="loading">登录 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getReq, postReq } from "@/request/api.js";
|
||||
// import { sm2Encrypt, sm2Decrypt } from "@c/utils/sm2Utils.js";
|
||||
// import { getSysConfig } from "@/utils/index.js";
|
||||
// import { copyRight } from "@c/utils/config.js";
|
||||
import // EyeInvisibleOutlined,
|
||||
// EyeTwoTone,
|
||||
// LockOutlined,
|
||||
// UserOutlined,
|
||||
"@ant-design/icons-vue";
|
||||
// import moment from "moment";
|
||||
// import { themeColor } from "@c/utils/config.js";
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
export default {
|
||||
name: "loginView",
|
||||
// components: { EyeTwoTone, EyeInvisibleOutlined },
|
||||
props: {},
|
||||
name: 'LoginView',
|
||||
components: {
|
||||
UserOutlined,
|
||||
LockOutlined
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
copyRight: "",
|
||||
loading: false,
|
||||
companyName: "",
|
||||
publickey: "",
|
||||
form: {},
|
||||
rules: {
|
||||
user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
||||
passwd: [
|
||||
{ required: true, message: "请输入登录密码", trigger: "blur" },
|
||||
],
|
||||
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
||||
form: {
|
||||
user: 'admin',
|
||||
passwd: '123456'
|
||||
},
|
||||
// rules: {
|
||||
// user: [{ validator: this.checkUser, trigger: 'blur' }],
|
||||
// passwd: [{ validator: this.checkPasswd, trigger: 'blur' }],
|
||||
// code: [
|
||||
// { required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
// // { validator: this.asynCheckRandom, },
|
||||
|
||||
// ]
|
||||
// },
|
||||
codeId: Math.random(),
|
||||
codeString: "", // 验证码字符串
|
||||
};
|
||||
rules: {
|
||||
user: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账号'
|
||||
}
|
||||
],
|
||||
passwd: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码'
|
||||
}
|
||||
]
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
// await this.getRandom();
|
||||
// this.companyName = await getSysConfig("app-name");
|
||||
// this.copyRight = await getSysConfig("app-version");
|
||||
// this.publickey = await getSysConfig("secret-pub-key");
|
||||
document.title = this.companyName;
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 验证码校验
|
||||
async asynCheckRandom(code) {
|
||||
const res = await getReq({ id: this.codeId, code }, "/user/checkRandom");
|
||||
if (res.code == 200 && res.data) {
|
||||
return Promise.resolve({ success: true, msg: "" });
|
||||
} else {
|
||||
return Promise.resolve({ success: false, msg: "验证码输入错误" });
|
||||
}
|
||||
},
|
||||
// })
|
||||
|
||||
// 登录后首次判断主题色
|
||||
// async changeTheme() {
|
||||
// const res = await getSysConfig("app-map-center");
|
||||
// const theme = localStorage.getItem("theme");
|
||||
// if (!theme) {
|
||||
// const { sunriseSunset } = JSON.parse(res).weather;
|
||||
// const sunrise = sunriseSunset.sunrise.trim().split(/\s+/)[1] || "04:00";
|
||||
// const sunset = sunriseSunset.sunset.trim().split(/\s+/)[1] || "20:00";
|
||||
|
||||
// const current = moment().locale("zh-cn").format("HH:mm");
|
||||
|
||||
// if (sunrise < current && current < sunset) {
|
||||
// localStorage.setItem("theme", "light");
|
||||
// Object.keys(themeColor).forEach((key) => {
|
||||
// document.documentElement.style.setProperty(
|
||||
// key,
|
||||
// themeColor[key].light
|
||||
// );
|
||||
// });
|
||||
// } else {
|
||||
// localStorage.setItem("theme", "dark");
|
||||
// Object.keys(themeColor).forEach((key) => {
|
||||
// document.documentElement.style.setProperty(
|
||||
// key,
|
||||
// themeColor[key].dark
|
||||
// );
|
||||
// });
|
||||
// }
|
||||
// } else {
|
||||
// Object.keys(themeColor).forEach((key) => {
|
||||
// document.documentElement.style.setProperty(
|
||||
// key,
|
||||
// themeColor[key][theme]
|
||||
// );
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
|
||||
// 填充密码
|
||||
async fillPassword() {
|
||||
let userName = localStorage.getItem("userName");
|
||||
if (userName) {
|
||||
// this.form.user = localStorage.getItem('userName')
|
||||
// const key = await getSysConfig('secret-pub-key')
|
||||
// this.form.passwd = sm2Decrypt(localStorage.getItem('passwd'), key)
|
||||
this.form.remember = true;
|
||||
}
|
||||
},
|
||||
// 获取验证码
|
||||
async getRandom() {
|
||||
const res = await getReq({ id: this.codeId }, "/user/getRandom");
|
||||
if (res.code == 200) {
|
||||
this.codeString = res.data;
|
||||
} else {
|
||||
this.codeString = "获取失败";
|
||||
}
|
||||
},
|
||||
async login() {
|
||||
this.$refs.ruleForm
|
||||
.validate()
|
||||
.then((res) => {
|
||||
if (res) {
|
||||
this.asynCheckRandom(res.code).then((res) => {
|
||||
if (!res.success) {
|
||||
this.$openNotification({
|
||||
name: "",
|
||||
type: "",
|
||||
status: "error",
|
||||
desc: res.msg,
|
||||
});
|
||||
this.form.code = "";
|
||||
} else {
|
||||
this.submitLoginForm();
|
||||
}
|
||||
});
|
||||
this.$refs.ruleForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await this.$http.post('/login', this.form)
|
||||
this.loading = false
|
||||
if (res.code === 200) {
|
||||
this.$message.success('登录成功')
|
||||
localStorage.setItem('token', res.token)
|
||||
this.$router.push('/main')
|
||||
} else {
|
||||
this.$message.error(res.message || '登录失败')
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false
|
||||
this.$message.error('请求失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
async submitLoginForm() {
|
||||
// let newPsdSM2 = sm2Encrypt(this.form.passwd, this.publickey);
|
||||
// if (newPsdSM2) {
|
||||
let paramsDate = {
|
||||
user: this.form.user,
|
||||
// passwd: newPsdSM2,
|
||||
};
|
||||
if (this.form.remember) {
|
||||
localStorage.setItem("userName", this.form.user);
|
||||
// localStorage.setItem("passwd", newPsdSM2);
|
||||
}
|
||||
try {
|
||||
const res = await postReq(paramsDate, "/user/login");
|
||||
|
||||
// 记住密码
|
||||
|
||||
if (res.code == 200) {
|
||||
const { token, user } = res.data;
|
||||
this.$openNotification({
|
||||
name: "",
|
||||
type: "",
|
||||
status: "success",
|
||||
desc: "登录成功",
|
||||
});
|
||||
localStorage.setItem("token", token);
|
||||
localStorage.setItem("showNotice", true);
|
||||
|
||||
// this.changeTheme();
|
||||
this.getUserRoute(user);
|
||||
} else {
|
||||
this.loading = false;
|
||||
throw new Error(res);
|
||||
// console.log("表单验证失败");
|
||||
}
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
this.form.code = "";
|
||||
this.getRandom();
|
||||
}
|
||||
// }
|
||||
},
|
||||
async getUserRoute(user) {
|
||||
const { userExtend } = user;
|
||||
const { role } = userExtend;
|
||||
localStorage.setItem("user", JSON.stringify(user));
|
||||
if (role && role.permissionList.length > 0) {
|
||||
const allMenus = [];
|
||||
role.permissionList.forEach((item) => {
|
||||
allMenus.push(...item.menusList);
|
||||
});
|
||||
const uniqueArray = [
|
||||
...new Map(allMenus.map((item) => [item.id, item])).values(),
|
||||
];
|
||||
const treeMunes = this.buildTree(uniqueArray);
|
||||
|
||||
const pcMunes = treeMunes.filter((item) => item.type == 0);
|
||||
localStorage.setItem("menuList", JSON.stringify(pcMunes));
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$router.push("/");
|
||||
}, 1000);
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
buildTree(items, parentId = null) {
|
||||
const result = [];
|
||||
const itemMap = {}; // 用于存储id和对应节点的映射，方便快速查找父节点
|
||||
|
||||
items.forEach((item) => {
|
||||
if (!itemMap[item.id]) {
|
||||
itemMap[item.id] = { ...item, children: [] };
|
||||
}
|
||||
|
||||
const node = itemMap[item.id];
|
||||
if (item.parentId === parentId || item.parentId == 0) {
|
||||
result.push(node);
|
||||
} else {
|
||||
if (!itemMap[item.parentId]) {
|
||||
itemMap[item.parentId] = { children: [] };
|
||||
}
|
||||
itemMap[item.parentId].children.push(node);
|
||||
}
|
||||
});
|
||||
|
||||
result.sort((a, b) => a.seq - b.seq);
|
||||
result.forEach((item) => {
|
||||
if (item.children.length == 0) {
|
||||
delete item.children;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
onChange() {},
|
||||
forgetPassword() {
|
||||
this.$openNotification({
|
||||
name: "",
|
||||
type: "",
|
||||
status: "warning",
|
||||
desc: "请联系平台管理员",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 1440px;
|
||||
min-height: 900px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/images/loginBg.png");
|
||||
background-image: url('@/assets/images/loginBg.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
.main-title {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 1) 0%,
|
||||
rgba(40, 235, 231, 1) 100%
|
||||
);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
font-size: 50px;
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
letter-spacing: 5px;
|
||||
line-height: 53px;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
width: 390px;
|
||||
width: 540px;
|
||||
height: 370px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 40px;
|
||||
margin-top: 120px;
|
||||
background-image: url('@/assets/images/loginFrom.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.ant-form {
|
||||
margin-top: 30px;
|
||||
width: 330px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
// margin-bottom: 10px;
|
||||
margin-top: 60px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
:deep(.ant-input-prefix) {
|
||||
color: #217575;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 20px !important;
|
||||
@@ -373,22 +179,21 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ant-checkbox-wrapper:hover {
|
||||
color: #065758;
|
||||
color: #143d7d;
|
||||
}
|
||||
span:hover {
|
||||
color: #065758;
|
||||
color: #143d7d;
|
||||
}
|
||||
}
|
||||
.login-btn {
|
||||
width: 335px;
|
||||
height: 45px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: #2a82e4;
|
||||
|
||||
border: none !important;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
.btn-text {
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
.copyright {
|
||||
position: absolute;
|
||||
@@ -400,42 +205,18 @@ export default {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
&::placeholder {
|
||||
// font-size: 12px !important;
|
||||
// line-height: 12px;
|
||||
// line-height: 100px !important;
|
||||
// height: 40px !important;
|
||||
// line-height: 40px !important;
|
||||
.ant-input-affix-wrapper {
|
||||
background: none !important;
|
||||
height: 40px;
|
||||
:deep(.ant-input) {
|
||||
background: none !important;
|
||||
color: #fff;
|
||||
&::placeholder {
|
||||
color: var(--theme-text6) !important;
|
||||
}
|
||||
}
|
||||
:deep(span.ant-input-affix-wrapper) {
|
||||
height: 40px !important;
|
||||
background: #eceff4 !important;
|
||||
color: #065758 !important;
|
||||
border: none !important;
|
||||
border-radius: 8px !important;
|
||||
.ant-input {
|
||||
// height: 40px !important;
|
||||
border-radius: 0 !important;
|
||||
background: #eceff4 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #0caf60 !important;
|
||||
:deep(.anticon){
|
||||
color: #fff ;
|
||||
}
|
||||
&:focus {
|
||||
border: none !important;
|
||||
background-color: #eceff4;
|
||||
}
|
||||
}
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
// 输入框自动填充后的背景改色
|
||||
input:-internal-autofill-previewed,
|
||||
input:-internal-autofill-selected {
|
||||
-webkit-text-fill-color: #000000 !important;
|
||||
transition: background-color 500s ease-out 0.5s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld msg="Welcome to Your Vue.js App" />
|
||||
<div class="main">
|
||||
<div class="header"></div>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
// @ is an alias to /src
|
||||
|
||||
export default {
|
||||
name: "HomeView",
|
||||
name: "MainView",
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user