gitee
/
django-vue-admin
mirror of https://gitee.com/liqianglog/django-vue-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Pre Merge pull request !75 from H0nGzA1/hongzai_dev

pull/75/MERGE
H0nGzA1 2022-10-23 11:17:58 +00:00 committed by Gitee
parent 1cf88c1ecf 7ae75f7452
commit af59b1c16b
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
13 changed files with 429 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/.env
View File

@ -3,7 +3,8 @@
# 页面 title 前缀 # 页面 title 前缀
VUE_APP_TITLE=D2Admin VUE_APP_TITLE=D2Admin
# 网络请求公用地址 # 网络请求公用地址，如果打包之后多一层去掉/api
VUE_APP_API=/api/ VUE_APP_API=/api/
# 仓库地址 # 仓库地址

1
web/.env.development
View File

@ -7,3 +7,4 @@ VUE_APP_PM_ENABLED = true
# 后端接口地址及端口(域名) # 后端接口地址及端口(域名)
VUE_APP_API = "http://127.0.0.1:8000" VUE_APP_API = "http://127.0.0.1:8000"
VUE_APP_WEB_SOCKET_URL = 'ws://127.0.0.1:8000'

2
web/.env.preview
View File

@ -13,3 +13,5 @@ VUE_APP_SCOURCE_LINK=FALSE
VUE_APP_PUBLIC_PATH=/ VUE_APP_PUBLIC_PATH=/
# 启用权限管理 # 启用权限管理
VUE_APP_PM_ENABLED = true VUE_APP_PM_ENABLED = true
VUE_APP_WEB_SOCKET_URL = 'ws://127.0.0.1:8000'

2
web/.env.production
View File

@ -13,3 +13,5 @@ VUE_APP_SCOURCE_LINK=FALSE
VUE_APP_PUBLIC_PATH=/ VUE_APP_PUBLIC_PATH=/
# 启用权限管理 # 启用权限管理
VUE_APP_PM_ENABLED = true VUE_APP_PM_ENABLED = true
VUE_APP_WEB_SOCKET_URL = 'ws://127.0.0.1:8000'

1
web/.env.test
View File

@ -7,3 +7,4 @@ VUE_APP_PM_ENABLED = true
# 后端接口地址及端口(域名) # 后端接口地址及端口(域名)
VUE_APP_API = "http://127.0.0.1:8000/" VUE_APP_API = "http://127.0.0.1:8000/"
VUE_APP_WEB_SOCKET_URL = 'ws://127.0.0.1:8000'

101
web/src/api/websocket.js
View File

@ -1,70 +1,73 @@
import ElementUI from 'element-ui' import ElementUI from "element-ui";
import util from '@/libs/util' import util from "@/libs/util";
function initWebSocket (e) { function initWebSocket(e) {
const token = util.cookies.get('token') const token = util.cookies.get("token");
if (token) { if (token) {
const wsUri = 'ws://127.0.0.1:8000/?auth=' + token // console.log(object);
this.socket = new WebSocket(wsUri)// 这里面的this都指向vue const wsUri = util.webSocketURL() + "/?auth=" + token;
this.socket.onerror = webSocketOnError this.socket = new WebSocket(wsUri); // 这里面的this都指向vue
this.socket.onmessage = webSocketOnMessage this.socket.onerror = webSocketOnError;
this.socket.onclose = closeWebsocket this.socket.onmessage = webSocketOnMessage;
this.socket.onclose = closeWebsocket;
} }
} }
function webSocketOnError (e) { function webSocketOnError(e) {
ElementUI.Notification({ ElementUI.Notification({
title: '', title: "",
message: 'WebSocket连接发生错误' + JSON.stringify(e), message: "WebSocket连接发生错误" + JSON.stringify(e),
type: 'error', type: "error",
position: 'bottom-right', position: "bottom-right",
duration: 3000 duration: 3000,
}) });
} }
function webSocketOnMessage (e) { function webSocketOnMessage(e) {
const data = JSON.parse(e.data) const data = JSON.parse(e.data);
if (data.contentType === 'INFO') { if (data.contentType === "INFO") {
ElementUI.Notification({ ElementUI.Notification({
title: 'websocket', title: "websocket",
message: data.content, message: data.content,
type: 'success', type: "success",
position: 'bottom-right', position: "bottom-right",
duration: 3000 duration: 3000,
}) });
} else if (data.contentType === 'ERROR') { } else if (data.contentType === "ERROR") {
ElementUI.Notification({ ElementUI.Notification({
title: '', title: "",
message: data.content, message: data.content,
type: 'error', type: "error",
position: 'bottom-right', position: "bottom-right",
duration: 0 duration: 0,
}) });
} else if (data.contentType === 'TEXT') { } else if (data.contentType === "TEXT") {
ElementUI.Notification({ ElementUI.Notification({
title: '温馨提示', title: "温馨提示",
message: data.content, message: data.content,
type: 'success', type: "success",
position: 'bottom-right', position: "bottom-right",
duration: 0 duration: 0,
}) });
} else { } else {
console.log(data.content) console.log(data.content);
} }
} }
// 关闭websiocket // 关闭websiocket
function closeWebsocket () { function closeWebsocket() {
console.log('连接已关闭...') console.log("连接已关闭...");
close() close();
} }
function close () { function close() {
this.socket.close() // 关闭 websocket this.socket.close(); // 关闭 websocket
this.socket.onclose = function (e) { this.socket.onclose = function (e) {
console.log(e)// 监听关闭事件 console.log(e); // 监听关闭事件
console.log('关闭') console.log("关闭");
} };
} }
function webSocketSend (message) { function webSocketSend(message) {
this.socket.send(JSON.stringify(message)) this.socket.send(JSON.stringify(message));
} }
export default { export default {
initWebSocket, close, webSocketSend initWebSocket,
} close,
webSocketSend,
};

192
web/src/layout/header-aside/components/header-user/userinfo.vue
View File

@ -123,175 +123,177 @@
</d2-container> </d2-container>
</template> </template>
<script> <script>
import util from '@/libs/util.js' import util from "@/libs/util.js";
import { request } from '@/api/service' import { request } from "@/api/service";
import { mapActions } from 'vuex' import { mapActions } from "vuex";
export default { export default {
name: 'userInfo', name: "userInfo",
data () { data() {
var validatePass = (rule, value, callback) => { var validatePass = (rule, value, callback) => {
const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}') const pwdRegex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}");
if (value === '') { if (value === "") {
callback(new Error('请输入密码')) callback(new Error("请输入密码"));
} else if (value === this.userPasswordInfo.oldPassword) { } else if (value === this.userPasswordInfo.oldPassword) {
callback(new Error('原密码与新密码一致')) callback(new Error("原密码与新密码一致"));
} else if (!pwdRegex.test(value)) { } else if (!pwdRegex.test(value)) {
callback(new Error('您的密码复杂度太低(密码中必须包含字母、数字)')) callback(new Error("您的密码复杂度太低(密码中必须包含字母、数字)"));
} else { } else {
if (this.userPasswordInfo.newPassword2 !== '') { if (this.userPasswordInfo.newPassword2 !== "") {
this.$refs.userPasswordForm.validateField('newPassword2') this.$refs.userPasswordForm.validateField("newPassword2");
} }
callback() callback();
} }
} };
var validatePass2 = (rule, value, callback) => { var validatePass2 = (rule, value, callback) => {
if (value === '') { if (value === "") {
callback(new Error('请再次输入密码')) callback(new Error("请再次输入密码"));
} else if (value !== this.userPasswordInfo.newPassword) { } else if (value !== this.userPasswordInfo.newPassword) {
callback(new Error('两次输入密码不一致!')) callback(new Error("两次输入密码不一致!"));
} else { } else {
callback() callback();
} }
} };
return { return {
position: 'left', position: "left",
activeName: 'userInfo', activeName: "userInfo",
action: util.baseURL() + 'api/system/file/', action: util.baseURL() + "api/system/file/",
headers: { headers: {
Authorization: 'JWT ' + util.cookies.get('token') Authorization: "JWT " + util.cookies.get("token"),
}, },
fileList: [], fileList: [],
userInfo: { userInfo: {
name: '', name: "",
gender: '', gender: "",
mobile: '', mobile: "",
avatar: '', avatar: "",
email: '' email: "",
}, },
userInforules: { userInforules: {
name: [{ required: true, message: '请输入昵称', trigger: 'blur' }], name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }] mobile: [{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确手机号" }],
}, },
userPasswordInfo: { userPasswordInfo: {
oldPassword: '', oldPassword: "",
newPassword: '', newPassword: "",
newPassword2: '' newPassword2: "",
}, },
passwordRules: { passwordRules: {
oldPassword: [ oldPassword: [
{ {
required: true, required: true,
message: '请输入原密码', message: "请输入原密码",
trigger: 'blur' trigger: "blur",
} },
], ],
newPassword: [{ validator: validatePass, trigger: 'blur' }], newPassword: [{ validator: validatePass, trigger: "blur" }],
newPassword2: [{ validator: validatePass2, trigger: 'blur' }] newPassword2: [{ validator: validatePass2, trigger: "blur" }],
} },
} };
}, },
mounted () { mounted() {
this.getCurrentUserInfo() this.getCurrentUserInfo();
}, },
methods: { methods: {
...mapActions('d2admin/account', ['logout']), ...mapActions("d2admin/account", ["logout"]),
/** /**
* 获取当前用户信息 * 获取当前用户信息
*/ */
getCurrentUserInfo () { getCurrentUserInfo() {
const _self = this const _self = this;
return request({ return request({
url: '/api/system/user/user_info/', url: "/api/system/user/user_info/",
method: 'get', method: "get",
params: {} params: {},
}).then((res) => { }).then((res) => {
_self.userInfo = res.data _self.userInfo = res.data;
_self.fileList = [{ name: 'avatar.png', url: res.data.avatar }] _self.fileList = res.data.avatar
}) ? [{ name: "avatar.png", url: res.data.avatar }]
: [];
});
}, },
/** /**
* 更新用户信息 * 更新用户信息
*/ */
updateInfo () { updateInfo() {
const _self = this const _self = this;
_self.$refs.userInfoForm.validate((valid) => { _self.$refs.userInfoForm.validate((valid) => {
if (valid) { if (valid) {
request({ request({
url: '/api/system/user/update_user_info/', url: "/api/system/user/update_user_info/",
method: 'put', method: "put",
data: _self.userInfo data: _self.userInfo,
}).then((res) => { }).then((res) => {
_self.$message.success('修改成功') _self.$message.success("修改成功");
_self.getCurrentUserInfo() _self.getCurrentUserInfo();
}) });
} else { } else {
// 校验失败 // 校验失败
// 登录表单校验失败 // 登录表单校验失败
this.$message.error('表单校验失败，请检查') this.$message.error("表单校验失败，请检查");
} }
}) });
}, },
// 重置 // 重置
resetForm (name) { resetForm(name) {
const _self = this const _self = this;
if (name === 'info') { if (name === "info") {
_self.getCurrentUserInfo() _self.getCurrentUserInfo();
} else { } else {
_self.userPasswordForm = {} _self.userPasswordForm = {};
} }
}, },
// tab切换 // tab切换
handleClick (tab, event) { handleClick(tab, event) {
const _self = this const _self = this;
if (tab.paneName === 'userInfo') { if (tab.paneName === "userInfo") {
_self.$refs.userPasswordForm.resetFields() _self.$refs.userPasswordForm.resetFields();
_self.getCurrentUserInfo() _self.getCurrentUserInfo();
} else { } else {
_self.$refs.userInfoForm.resetFields() _self.$refs.userInfoForm.resetFields();
} }
}, },
/** /**
* 重新设置密码 * 重新设置密码
*/ */
settingPassword () { settingPassword() {
const _self = this const _self = this;
_self.$refs.userPasswordForm.validate((valid) => { _self.$refs.userPasswordForm.validate((valid) => {
if (valid) { if (valid) {
const userId = util.cookies.get('uuid') const userId = util.cookies.get("uuid");
if (userId) { if (userId) {
const params = JSON.parse(JSON.stringify(_self.userPasswordInfo)) const params = JSON.parse(JSON.stringify(_self.userPasswordInfo));
params.oldPassword = _self.$md5(params.oldPassword) params.oldPassword = _self.$md5(params.oldPassword);
params.newPassword = _self.$md5(params.newPassword) params.newPassword = _self.$md5(params.newPassword);
params.newPassword2 = _self.$md5(params.newPassword2) params.newPassword2 = _self.$md5(params.newPassword2);
request({ request({
url: '/api/system/user/' + userId + '/change_password/', url: "/api/system/user/" + userId + "/change_password/",
method: 'put', method: "put",
data: params data: params,
}).then((res) => { }).then((res) => {
_self.activeName = 'userInfo' _self.activeName = "userInfo";
_self.$message.success('修改成功') _self.$message.success("修改成功");
_self.logout({}) _self.logout({});
}) });
} }
} else { } else {
// 校验失败 // 校验失败
// 登录表单校验失败 // 登录表单校验失败
this.$message.error('表单校验失败，请检查') this.$message.error("表单校验失败，请检查");
} }
}) });
}, },
/** /**
* 头像上传 * 头像上传
* @param res * @param res
* @param file * @param file
*/ */
handleAvatarSuccess (res, file) { handleAvatarSuccess(res, file) {
console.log(11, res) console.log(11, res);
this.fileList = [{ url: util.baseURL() + res.data.url, name: file.name }] this.fileList = [{ url: util.baseURL() + res.data.url, name: file.name }];
this.userInfo.avatar = util.baseURL() + res.data.url this.userInfo.avatar = util.baseURL() + res.data.url;
} },
} },
} };
</script> </script>

104
web/src/libs/util.js
View File

@ -1,82 +1,102 @@
import cookies from './util.cookies' import cookies from "./util.cookies";
import db from './util.db' import db from "./util.db";
import log from './util.log' import log from "./util.log";
import dayjs from 'dayjs' import dayjs from "dayjs";
import filterParams from './util.params' import filterParams from "./util.params";
const util = { const util = {
cookies, cookies,
db, db,
log, log,
filterParams filterParams,
} };
/** /**
* @description 更新标题 * @description 更新标题
* @param {String} titleText 标题 * @param {String} titleText 标题
*/ */
util.title = function (titleText) { util.title = function (titleText) {
const processTitle = process.env.VUE_APP_TITLE || 'D2Admin' const processTitle = process.env.VUE_APP_TITLE || "D2Admin";
window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}` window.document.title = `${processTitle}${
} titleText ? ` | ${titleText}` : ""
}`;
};
/** /**
* @description 打开新页面 * @description 打开新页面
* @param {String} url 地址 * @param {String} url 地址
*/ */
util.open = function (url) { util.open = function (url) {
var a = document.createElement('a') var a = document.createElement("a");
a.setAttribute('href', url) a.setAttribute("href", url);
a.setAttribute('target', '_blank') a.setAttribute("target", "_blank");
a.setAttribute('id', 'd2admin-link-temp') a.setAttribute("id", "d2admin-link-temp");
document.body.appendChild(a) document.body.appendChild(a);
a.click() a.click();
document.body.removeChild(document.getElementById('d2admin-link-temp')) document.body.removeChild(document.getElementById("d2admin-link-temp"));
} };
/** /**
* @description 校验是否为租户模式。租户模式把域名替换成 域名 加端口 * @description 校验是否为租户模式。租户模式把域名替换成 域名 加端口
*/ */
util.baseURL = function () { util.baseURL = function () {
var baseURL = process.env.VUE_APP_API var baseURL = process.env.VUE_APP_API;
if (window.pluginsAll && window.pluginsAll.indexOf('dvadmin-tenant-web') !== -1) { if (
window.pluginsAll &&
window.pluginsAll.indexOf("dvadmin-tenant-web") !== -1
) {
// document.domain // document.domain
var host = baseURL.split('/')[2] var host = baseURL.split("/")[2];
var prot = host.split(':')[1] || 80 var prot = host.split(":")[1] || 80;
host = document.domain + ':' + prot host = document.domain + ":" + prot;
baseURL = baseURL.split('/')[0] + '//' + baseURL.split('/')[1] + host + '/' + (baseURL.split('/')[3] || '') baseURL =
baseURL.split("/")[0] +
"//" +
baseURL.split("/")[1] +
host +
"/" +
(baseURL.split("/")[3] || "");
} }
if (!baseURL.endsWith('/')) { if (!baseURL.endsWith("/")) {
baseURL += '/' baseURL += "/";
} }
return baseURL return baseURL;
} };
/*
* 获取websocket地址
*/
util.webSocketURL = function () {
return process.env.VUE_APP_WEB_SOCKET_URL;
};
/** /**
* 自动生成ID * 自动生成ID
*/ */
util.autoCreateCode = function () { util.autoCreateCode = function () {
return dayjs().format('YYYYMMDDHHmmssms') + Math.round(Math.random() * 80 + 20) return (
} dayjs().format("YYYYMMDDHHmmssms") + Math.round(Math.random() * 80 + 20)
);
};
/** /**
* 自动生成短 ID * 自动生成短 ID
*/ */
util.autoShortCreateCode = function () { util.autoShortCreateCode = function () {
var Num = '' var Num = "";
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
Num += Math.floor(Math.random() * 10) Num += Math.floor(Math.random() * 10);
} }
return dayjs().format('YYMMDD') + Num return dayjs().format("YYMMDD") + Num;
} };
/** /**
* 生产随机字符串 * 生产随机字符串
*/ */
util.randomString = function (e) { util.randomString = function (e) {
e = e || 32 e = e || 32;
var t = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
var a = t.length var a = t.length;
var n = '' var n = "";
for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a)) for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
return n return n;
} };
export default util export default util;

75
web/src/main.js
View File

@ -7,52 +7,51 @@
* @文件介绍: * @文件介绍:
*/ */
// Vue // Vue
import Vue from 'vue' import Vue from "vue";
import i18n from './i18n' import i18n from "./i18n";
import App from './App' import App from "./App";
// 核心插件 // 核心插件
import d2Admin from '@/plugin/d2admin' import d2Admin from "@/plugin/d2admin";
// store // store
import store from '@/store/index' import store from "@/store/index";
// 菜单和路由设置 // 菜单和路由设置
import router from './router' import router from "./router";
import { menuHeader } from '@/menu' import { menuHeader } from "@/menu";
// 按钮权限 // 按钮权限
import '@/plugin/permission' // 加载permission import "@/plugin/permission"; // 加载permission
// d2-crud-plus 安装与初始化 // d2-crud-plus 安装与初始化
import './install' import "./install";
// 配置vxe-table // 配置vxe-table
import 'xe-utils' import "xe-utils";
import VXETable from 'vxe-table' import VXETable from "vxe-table";
import 'vxe-table/lib/style.css' import "vxe-table/lib/style.css";
// md5加密 // md5加密
import md5 from 'js-md5' import md5 from "js-md5";
// websocket // websocket
import websocket from '@/api/websocket' import websocket from "@/api/websocket";
// 核心插件 // 核心插件
Vue.use(d2Admin) Vue.use(d2Admin);
Vue.use(VXETable) Vue.use(VXETable);
Vue.prototype.$md5 = md5 Vue.prototype.$md5 = md5;
Vue.prototype.$websocket = websocket Vue.prototype.$websocket = websocket;
new Vue({ new Vue({
router, router,
store, store,
i18n, i18n,
render: h => h(App), render: (h) => h(App),
beforeCreate () { beforeCreate() {
// 初始化配置 // 初始化配置
this.$store.dispatch('d2admin/settings/load') this.$store.dispatch("d2admin/settings/load");
this.$store.dispatch('d2admin/dictionary/load') this.$store.dispatch("d2admin/dictionary/load");
}, },
created () { created() {
// 处理路由 得到每一级的路由设置 // 处理路由 得到每一级的路由设置
// this.$store.commit('d2admin/page/init', frameInRoutes) // this.$store.commit('d2admin/page/init', frameInRoutes)
// 设置顶栏菜单 // 设置顶栏菜单
@ -62,28 +61,30 @@ new Vue({
// 初始化菜单搜索功能 // 初始化菜单搜索功能
// this.$store.commit('d2admin/search/init', menuAside) // this.$store.commit('d2admin/search/init', menuAside)
}, },
mounted () { mounted() {
// 展示系统信息 // 展示系统信息
this.$store.commit('d2admin/releases/versionShow') this.$store.commit("d2admin/releases/versionShow");
// 用户登录后从数据库加载一系列的设置 // 用户登录后从数据库加载一系列的设置
this.$store.dispatch('d2admin/account/load') this.$store.dispatch("d2admin/account/load");
// 获取并记录用户 UA // 获取并记录用户 UA
this.$store.commit('d2admin/ua/get') this.$store.commit("d2admin/ua/get");
// 初始化全屏监听 // 初始化全屏监听
this.$store.dispatch('d2admin/fullscreen/listen') this.$store.dispatch("d2admin/fullscreen/listen");
}, },
watch: { watch: {
// 检测路由变化切换侧边栏内容 // 检测路由变化切换侧边栏内容
'$route.matched': { "$route.matched": {
handler (matched) { handler(matched) {
if (matched.length > 0) { if (matched.length > 0) {
const _side = menuHeader.filter(menu => menu.path === matched[0].path) const _side = menuHeader.filter(
(menu) => menu.path === matched[0].path
);
if (_side.length > 0) { if (_side.length > 0) {
this.$store.commit('d2admin/menu/asideSet', _side[0].children) this.$store.commit("d2admin/menu/asideSet", _side[0].children);
} }
} }
}, },
immediate: true immediate: true,
} },
} },
}).$mount('#app') }).$mount("#app");

82
web/src/setting.js
View File

@ -3,76 +3,78 @@ export default {
// 支持快捷键 例如 ctrl+shift+s // 支持快捷键 例如 ctrl+shift+s
hotkey: { hotkey: {
search: { search: {
open: 's', open: "s",
close: 'esc' close: "esc",
} },
}, },
// 侧边栏默认配置 // 侧边栏默认配置
menu: { menu: {
asideCollapse: false, asideCollapse: false,
asideTransition: true asideTransition: true,
}, },
// 在读取持久化数据失败时默认页面 // 在读取持久化数据失败时默认页面
page: { page: {
opened: [ opened: [
{ {
name: 'index', name: "index",
fullPath: '/index', fullPath: "/index",
meta: { meta: {
title: '控制台', title: "控制台",
auth: false auth: false,
} },
} },
] ],
}, },
// 菜单搜索 // 菜单搜索
search: { search: {
enable: true enable: true,
}, },
// 注册的主题 // 注册的主题
theme: { theme: {
list: [ list: [
{ {
title: 'd2admin 经典', title: "d2admin 经典",
name: 'd2', name: "d2",
preview: 'image/theme/d2/preview@2x.png' preview: "image/theme/d2/preview@2x.png",
}, },
{ {
title: 'Chester', title: "Chester",
name: 'chester', name: "chester",
preview: 'image/theme/chester/preview@2x.jpg' preview: "image/theme/chester/preview@2x.jpg",
}, },
{ {
title: 'Element', title: "Element",
name: 'element', name: "element",
preview: 'image/theme/element/preview@2x.jpg' preview: "image/theme/element/preview@2x.jpg",
}, },
{ {
title: '紫罗兰', title: "紫罗兰",
name: 'violet', name: "violet",
preview: 'image/theme/violet/preview@2x.jpg' preview: "image/theme/violet/preview@2x.jpg",
}, },
{ {
title: '简约线条', title: "简约线条",
name: 'line', name: "line",
backgroundImage: 'image/theme/line/bg.jpg', backgroundImage: "image/theme/line/bg.jpg",
preview: 'image/theme/line/preview@2x.jpg' preview: "image/theme/line/preview@2x.jpg",
}, },
{ {
title: '流星', title: "流星",
name: 'star', name: "star",
backgroundImage: 'image/theme/star/bg.jpg', backgroundImage: "image/theme/star/bg.jpg",
preview: 'image/theme/star/preview@2x.jpg' preview: "image/theme/star/preview@2x.jpg",
}, },
{ {
title: 'Tomorrow Night Blue (vsCode)', title: "Tomorrow Night Blue (vsCode)",
name: 'tomorrow-night-blue', name: "tomorrow-night-blue",
preview: 'image/theme/tomorrow-night-blue/preview@2x.jpg' preview: "image/theme/tomorrow-night-blue/preview@2x.jpg",
} },
] ],
}, },
// 是否默认开启页面切换动画 // 是否默认开启页面切换动画
transition: { transition: {
active: true active: true,
} },
} // 设置默认主题
defaultTheme: "d2",
};

118
web/src/store/modules/d2admin/modules/account.js
View File

@ -6,11 +6,11 @@
* 联系Qq:1638245306 * 联系Qq:1638245306
* @文件介绍: 登录和登出 * @文件介绍: 登录和登出
*/ */
import { Message, MessageBox } from 'element-ui' import { Message, MessageBox } from "element-ui";
import util from '@/libs/util.js' import util from "@/libs/util.js";
import router from '@/router' import router from "@/router";
import store from '@/store/index' import store from "@/store/index";
import { SYS_USER_LOGIN, SYS_USER_LOGOUT } from '@/views/system/login/api' import { SYS_USER_LOGIN, SYS_USER_LOGOUT } from "@/views/system/login/api";
export default { export default {
namespaced: true, namespaced: true,
@ -22,95 +22,101 @@ export default {
* @param {Object} payload password {String} 密码 * @param {Object} payload password {String} 密码
* @param {Object} payload route {Object} 登录成功后定向的路由对象 任何 vue-router 支持的格式 * @param {Object} payload route {Object} 登录成功后定向的路由对象 任何 vue-router 支持的格式
*/ */
async login ({ dispatch }, { async login(
username = '', { dispatch },
password = '', { username = "", password = "", captcha = "", captchaKey = "" } = {}
captcha = '', ) {
captchaKey = ''
} = {}) {
let res = await SYS_USER_LOGIN({ let res = await SYS_USER_LOGIN({
username, username,
password, password,
captcha, captcha,
captchaKey captchaKey,
}) });
// 设置 cookie 一定要存 uuid 和 token 两个 cookie // 设置 cookie 一定要存 uuid 和 token 两个 cookie
// 整个系统依赖这两个数据进行校验和存储 // 整个系统依赖这两个数据进行校验和存储
// uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复 // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
// token 代表用户当前登录状态 建议在网络请求中携带 token // token 代表用户当前登录状态 建议在网络请求中携带 token
// 如有必要 token 需要定时更新，默认保存一天 // 如有必要 token 需要定时更新，默认保存一天
res = res.data res = res.data;
util.cookies.set('uuid', res.userId) util.cookies.set("uuid", res.userId);
util.cookies.set('token', res.access) util.cookies.set("token", res.access);
util.cookies.set('refresh', res.refresh) util.cookies.set("refresh", res.refresh);
// 设置 vuex 用户信息 // 设置 vuex 用户信息
await dispatch('d2admin/user/set', { name: res.name, user_id: res.userId, avatar: res.avatar }, { root: true }) await dispatch(
"d2admin/user/set",
{ name: res.name, user_id: res.userId, avatar: res.avatar },
{ root: true }
);
// 用户登录后从持久化数据加载一系列的设置 // 用户登录后从持久化数据加载一系列的设置
await dispatch('load') await dispatch("load");
}, },
/** /**
* @description 注销用户并返回登录页面 * @description 注销用户并返回登录页面
* @param {Object} context * @param {Object} context
* @param {Object} payload confirm {Boolean} 是否需要确认 * @param {Object} payload confirm {Boolean} 是否需要确认
*/ */
logout ({ commit, dispatch }, { confirm = false } = {}) { logout({ commit, dispatch }, { confirm = false } = {}) {
/** /**
* @description 注销 * @description 注销
*/ */
async function logout () { async function logout() {
await SYS_USER_LOGOUT({ refresh: util.cookies.get('refresh') }).then(() => { await SYS_USER_LOGOUT({ refresh: util.cookies.get("refresh") }).then(
// 删除cookie () => {
util.cookies.remove('token') // 删除cookie
util.cookies.remove('uuid') util.cookies.remove("token");
util.cookies.remove('refresh') util.cookies.remove("uuid");
}) util.cookies.remove("refresh");
}
);
// 清空 vuex 用户信息 // 清空 vuex 用户信息
await dispatch('d2admin/user/set', {}, { root: true }) await dispatch("d2admin/user/set", {}, { root: true });
store.commit('d2admin/menu/asideSet', []) // 设置侧边栏菜单 store.commit("d2admin/menu/asideSet", []); // 设置侧边栏菜单
store.commit('d2admin/search/init', []) // 设置搜索 store.commit("d2admin/search/init", []); // 设置搜索
sessionStorage.removeItem('menuData') sessionStorage.removeItem("menuData");
store.dispatch('d2admin/db/databaseClear') store.dispatch("d2admin/db/databaseClear");
// 跳转路由 // 跳转路由
router.push({ name: 'login' }) router.push({ name: "login" });
router.go(0) router.go(0);
} }
// 判断是否需要确认 // 判断是否需要确认
if (confirm) { if (confirm) {
commit('d2admin/gray/set', true, { root: true }) commit("d2admin/gray/set", true, { root: true });
MessageBox.confirm('确定要注销当前用户吗', '注销用户', { type: 'warning' }) MessageBox.confirm("确定要注销当前用户吗", "注销用户", {
type: "warning",
})
.then(() => { .then(() => {
commit('d2admin/gray/set', false, { root: true }) commit("d2admin/gray/set", false, { root: true });
logout() logout();
}) })
.catch(() => { .catch(() => {
commit('d2admin/gray/set', false, { root: true }) commit("d2admin/gray/set", false, { root: true });
Message({ message: '取消注销操作' }) Message({ message: "取消注销操作" });
}) });
} else { } else {
logout() logout();
} }
}, },
/** /**
* @description 用户登录后从持久化数据加载一系列的设置 * @description 用户登录后从持久化数据加载一系列的设置
* @param {Object} context * @param {Object} context
*/ */
async load ({ dispatch }) { async load({ dispatch }) {
// 加载用户名 // 加载用户名
await dispatch('d2admin/user/load', null, { root: true }) await dispatch("d2admin/user/load", null, { root: true });
// 加载主题 // 加载主题
await dispatch('d2admin/theme/load', null, { root: true }) await dispatch("d2admin/theme/load", null, { root: true });
// 加载页面过渡效果设置 // 加载页面过渡效果设置
await dispatch('d2admin/transition/load', null, { root: true }) await dispatch("d2admin/transition/load", null, { root: true });
// 持久化数据加载上次退出时的多页列表 // 持久化数据加载上次退出时的多页列表
await dispatch('d2admin/page/openedLoad', null, { root: true }) await dispatch("d2admin/page/openedLoad", null, { root: true });
// 持久化数据加载侧边栏配置 // 持久化数据加载侧边栏配置
await dispatch('d2admin/menu/asideLoad', null, { root: true }) await dispatch("d2admin/menu/asideLoad", null, { root: true });
// 持久化数据加载全局尺寸 // 持久化数据加载全局尺寸
await dispatch('d2admin/size/load', null, { root: true }) await dispatch("d2admin/size/load", null, { root: true });
// 持久化数据加载颜色设置 // 持久化数据加载颜色设置
await dispatch('d2admin/color/load', null, { root: true }) await dispatch("d2admin/color/load", null, { root: true });
} },
} },
} };

73
web/src/store/modules/d2admin/modules/theme.js
View File

@ -1,76 +1,71 @@
import { get } from 'lodash' import { get } from "lodash";
import setting from '@/setting.js' import setting from "@/setting.js";
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
// 主题 // 主题
list: get(setting, 'theme.list', []), list: get(setting, "theme.list", []),
// 现在激活的主题 这应该是一个名字 不是对象 // 现在激活的主题 这应该是一个名字 不是对象
activeName: get(setting, 'theme.list[0].name', 'd2') activeName: get(setting, "theme.list[0].name", "d2"),
}, },
getters: { getters: {
/** /**
* @description 返回当前的主题信息 不是一个名字 而是当前激活主题的所有数据 * @description 返回当前的主题信息 不是一个名字 而是当前激活主题的所有数据
* @param {Object} state state * @param {Object} state state
*/ */
activeSetting (state) { activeSetting(state) {
return state.list.find(theme => theme.name === state.activeName) return state.list.find((theme) => theme.name === state.activeName);
} },
}, },
actions: { actions: {
/** /**
* @description 激活一个主题 * @description 激活一个主题
* @param {String} themeValue 需要激活的主题名称 * @param {String} themeValue 需要激活的主题名称
*/ */
async set ({ state, commit, dispatch }, themeName) { async set({ state, commit, dispatch }, themeName) {
// 检查这个主题在主题列表里是否存在 // 检查这个主题在主题列表里是否存在
state.activeName = state.list.find(e => e.name === themeName) ? themeName : state.list[0].name state.activeName = state.list.find((e) => e.name === themeName)
? themeName
: setting.defaultTheme;
// 将 vuex 中的主题应用到 dom // 将 vuex 中的主题应用到 dom
commit('dom') commit("dom");
// 持久化 // 持久化
await dispatch('d2admin/db/set', { await dispatch(
dbName: 'sys', "d2admin/db/set",
path: 'theme.activeName', {
value: state.activeName, dbName: "sys",
user: true path: "theme.activeName",
}, { root: true }) value: state.activeName,
user: true,
},
{ root: true }
);
}, },
/** /**
* @description 从持久化数据加载主题设置 * @param {Object} context * @description 从持久化数据加载主题设置 * @param {Object} context
*/ */
async load ({ state, commit, dispatch }) { async load({ state, commit, dispatch }) {
// store 赋值 // store 赋值
const activeName = await dispatch('d2admin/db/get', { const activeName = setting.defaultTheme;
dbName: 'sys',
path: 'theme.activeName',
defaultValue: state.list[0].name,
user: true
}, { root: true })
// 检查这个主题在主题列表里是否存在 // 检查这个主题在主题列表里是否存在
if (state.list.find(e => e.name === activeName)) { if (state.list.find((e) => e.name === activeName)) {
state.activeName = activeName state.activeName = activeName;
} else { } else {
state.activeName = state.list[0].name state.activeName = setting.defaultTheme;
// 持久化 // 持久化
await dispatch('d2admin/db/set', {
dbName: 'sys',
path: 'theme.activeName',
value: state.activeName,
user: true
}, { root: true })
} }
// 将 vuex 中的主题应用到 dom // 将 vuex 中的主题应用到 dom
commit('dom') commit("dom");
} },
}, },
mutations: { mutations: {
/** /**
* @description 将 vuex 中的主题应用到 dom * @description 将 vuex 中的主题应用到 dom
* @param {Object} state state * @param {Object} state state
*/ */
dom (state) { dom(state) {
document.body.className = `theme-${state.activeName}` document.body.className = `theme-${state.activeName}`;
} },
} },
} };

34
web/yarn.lock
View File

@ -903,6 +903,13 @@
core-js-pure "^3.20.2" core-js-pure "^3.20.2"
regenerator-runtime "^0.13.4" regenerator-runtime "^0.13.4"
"@babel/runtime@^7.10.5", "@babel/runtime@^7.7.2":
version "7.19.4"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4": "@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
version "7.17.9" version "7.17.9"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
@ -6156,6 +6163,13 @@ import-from@^2.1.0:
dependencies: dependencies:
resolve-from "^3.0.0" resolve-from "^3.0.0"
import-html-entry@^1.14.0:
version "1.14.0"
resolved "https://registry.npmjs.org/import-html-entry/-/import-html-entry-1.14.0.tgz#9a05928373bb7e9362cd8dd428a82387a87524ff"
integrity sha512-CQQMV+2rxHCLMSXsajV1cjT1g6xi3ujMAPnGwR96xHaN5/JEVIOUGkM7LDRn73dk8E8NaHmOf3rvPPExPPe1xw==
dependencies:
"@babel/runtime" "^7.7.2"
import-local@^2.0.0: import-local@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d" resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@ -9295,6 +9309,16 @@ q@^1.1.2:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
qiankun@^2.7.2:
version "2.8.3"
resolved "https://registry.npmjs.org/qiankun/-/qiankun-2.8.3.tgz#752326bf655b710844362ee691a5f332160cd53c"
integrity sha512-bq09dwm29NybhoG8UI8z6fdY5weaQ2l1CTxZcnVIbWLVzpzNyoebnnBTGMuZyRsoSY3gflO96RC2jK7ARiOGvA==
dependencies:
"@babel/runtime" "^7.10.5"
import-html-entry "^1.14.0"
lodash "^4.17.11"
single-spa "^5.9.2"
qiniu-js@^2.5.4: qiniu-js@^2.5.4:
version "2.5.5" version "2.5.5"
resolved "https://registry.yarnpkg.com/qiniu-js/-/qiniu-js-2.5.5.tgz#77d295f222620f9377d6148f3f757d189a1e4977" resolved "https://registry.yarnpkg.com/qiniu-js/-/qiniu-js-2.5.5.tgz#77d295f222620f9377d6148f3f757d189a1e4977"
@ -10059,6 +10083,11 @@ simple-swizzle@^0.2.2:
dependencies: dependencies:
is-arrayish "^0.3.1" is-arrayish "^0.3.1"
single-spa@^5.9.2:
version "5.9.4"
resolved "https://registry.npmjs.org/single-spa/-/single-spa-5.9.4.tgz#2a995b0784867a3f60ceb458de295ee67f045077"
integrity sha512-QkEoh0AzGuU82qnbUUk0ydF78QbU5wMKqKKJn7uUQfBiOYlRQEfIOpLM4m23Sab+kTOLI1kbYhYeiQ7fX5KVVw==
sisteransi@^1.0.5: sisteransi@^1.0.5:
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@ -11340,6 +11369,11 @@ vue-i18n@^8.15.1, vue-i18n@^8.17.0:
resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.27.1.tgz#fe660f6c14793ae404d6a715875d772594a3324f" resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.27.1.tgz#fe660f6c14793ae404d6a715875d772594a3324f"
integrity sha512-lWrGm4F25qReJ7XxSnFVb2h3PfW54ldnM4C+YLBGGJ75+Myt/kj4hHSTKqsyDLamvNYpvINMicSOdW+7yuqgIQ== integrity sha512-lWrGm4F25qReJ7XxSnFVb2h3PfW54ldnM4C+YLBGGJ75+Myt/kj4hHSTKqsyDLamvNYpvINMicSOdW+7yuqgIQ==
vue-infinite-scroll@^2.0.2:
version "2.0.2"
resolved "https://registry.npmjs.org/vue-infinite-scroll/-/vue-infinite-scroll-2.0.2.tgz#ca37a91fe92ee0ad3b74acf8682c00917144b711"
integrity sha512-n+YghR059YmciANGJh9SsNWRi1YZEBVlODtmnb/12zI+4R72QZSWd+EuZ5mW6auEo/yaJXgxzwsuhvALVnm73A==
vue-jest@^3.0.5: vue-jest@^3.0.5:
version "3.0.7" version "3.0.7"
resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-3.0.7.tgz#a6d29758a5cb4d750f5d1242212be39be4296a33" resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-3.0.7.tgz#a6d29758a5cb4d750f5d1242212be39be4296a33"