LoveNav/love-nav-vue
LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
landaiqing 2023-12-28 16:18:19 +08:00
parent 76907fb95c
commit 7d9186d31c
15 changed files with 487 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/css/home-style.css
View File

@ -208,6 +208,9 @@ body.light-mode .video-bg:before {
.notify {
position: relative;
}
.notify2 {
position: relative;
}
.notify:before {
content: "";
position: absolute;
@ -224,6 +227,21 @@ body.light-mode .video-bg:before {
}
}
.notify2:before {
content: "";
position: absolute;
background-color: #3af06e;
width: 6px;
height: 6px;
border-radius: 50%;
right: 20px;
top: 16px;
}
@media screen and (max-width: 1055px) {
.notify2 {
display: none;
}
}
.menu-circle {
width: 15px;
height: 15px;
@ -618,7 +636,7 @@ body.light-mode .video-bg:before {
.status {
/*margin-left: auto;*/
width: 140px;
width: 700px;
font-size: 15px;
position: relative;
text-align: left;
@ -789,6 +807,7 @@ body.light-mode .video-bg:before {
align-items: center;
font-size: 14px;
font-weight: 400;
margin-top: 20px;
}
.checkbox-wrapper + .checkbox-wrapper {
margin: 20px 0 40px;

BIN
src/assets/img/NAV.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

81
src/components/detail/NavDetail.vue
View File

@ -48,8 +48,15 @@
</div>
</div>
<div id="网站信息" class="NavInfo" style="margin-top:35px;margin-left:50px;width:220px;">
<span style="font-size:30px;font-family: STHupo">{{ UrlObj.name }}</span><br/>
<div class="NavInfo">
<el-tooltip placement="top"
trigger="hover"
effect="dark"
v-if="UrlObj.name"
:content="UrlObj.name"
>
<span style="font-size:30px;font-family: STHupo;overflow-x: scroll;white-space: nowrap;height: 50px"><marquee behavior="scroll" direction="left">{{ UrlObj.name }}</marquee></span><br/>
</el-tooltip>
<div class="NavInfo">
<span style="width:200px">创建时间：{{ Cdate }}</span><br/>
<span style="width:200px">所属标签：{{BelongTo}}</span><br/>
<div style="display: flex;flex-direction: row">
@ -135,7 +142,7 @@
</div>
</div>
<!--用户评论-->
<div v-show="update" id="用户评论" class="JustBack" style="width:670px;
<div id="用户评论" v-show="update" class="JustBack" style="width:670px;
height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
<div style="width:670px;height:auto;display:flex;
flex-direction: column; flex-wrap: nowrap;">
@ -234,8 +241,8 @@
{{dateFormat('YYYY-mm-dd',item2.commentTime)}}
</div>
<div style="display: flex;flex-direction: row-reverse;width:100%;height:42px;margin-top:6px">
<span style="font-size:18px;font-family: STHupo;line-height:40px;margin-left:5px;margin-left:10px;">{{item.likeCount}}</span>
<el-button type="danger" class="el-icon-thumb" size="medium" plain circle style="margin-top:6px;margin-left:20px;" >
<span style="font-size:18px;font-family: STHupo;line-height:40px;margin-left:5px;margin-left:10px;">{{item2.likeCount}}</span>
<el-button type="danger" class="el-icon-thumb" @click="LikeMe(item2.id)" size="medium" plain circle style="margin-top:6px;margin-left:20px;" >
</el-button>
<span style="font-size:18px;font-family: STHupo;line-height:40px;margin-left:10px">回复</span>
<el-button type="success" class="el-icon-chat-dot-square" size="medium"
@ -356,18 +363,18 @@ export default {
// 弹出页：
openAddCategory:false,
// 回复谁？
rootid:'',
rootid:null,
// 所属标签：
BelongTo:'',
BelongTo:null,
// 总星级：
SumStar:'',
SumStar:null,
// 表单：
form:{
urlId:'',
userId:'',
content:'',
rootCommentId:'',
rating:'',
urlId:null,
userId:null,
content:null,
rootCommentId:null,
rating:null,
},
rules: {
rating: [{ required: 'true', message: '请输入评分！', trigger: 'blur' }],
@ -384,6 +391,7 @@ export default {
this.GetAllCate();
},
created() {
this.addViewByTime();
this.UrlId = this.$route.query.uid;
this.GetNav(this.UrlId);
@ -402,11 +410,11 @@ export default {
this.reload();
//表单重置
that.form = {
urlId:'',
userId:'',
content:'',
rootCommentId:'',
rating:'',
urlId:null,
userId:null,
content:null,
rootCommentId:null,
rating:null,
}
// 后关闭
this.openAddCategory=false;
@ -433,7 +441,7 @@ export default {
var _this = this;
_this.form.rating = 0;
_this.form.rootCommentId = _this.rootid;
console.log(this.form);
// console.log(this.form);
if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
_this.$refs[rulelist].validate((valid)=>{
if(valid){
@ -465,11 +473,11 @@ export default {
});
this.closeDialog();
this.form = {
urlId:'',
userId:'',
content:'',
rootCommentId:'',
rating:'',
urlId:null,
userId:null,
content:null,
rootCommentId:null,
rating:null,
}
}
})
@ -488,11 +496,11 @@ export default {
//提交评论：
submitComment(rulelist){
var _this = this;
console.log(this.form);
// console.log(this.form);
if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
_this.$refs[rulelist].validate((valid)=>{
if(valid){
console.log(this.form);
// console.log(this.form);
axios({
method: 'post',
// 请求的地址
@ -521,11 +529,11 @@ export default {
});
this.closeDialog();
this.form = {
urlId:'',
userId:'',
content:'',
rootCommentId:'',
rating:'',
urlId:null,
userId:null,
content:null,
rootCommentId:null,
rating:null,
}
}
})
@ -612,7 +620,7 @@ export default {
var that = this;
if(comment.nextNodes.length != 0){
var rootUser = comment.user.userLogin;
console.log(comment.user.userLogin);
// console.log(comment.user.userLogin);
that.rootId_AllComment[String(rootId)] = that.rootId_AllComment[String(rootId)].concat(comment.nextNodes);
Object.keys(comment.nextNodes).forEach(key => {
that.$set(comment.nextNodes[key],'RootUser',rootUser);
@ -658,7 +666,14 @@ export default {
_this.func0(res.data[key],res.data[key].id);
})
_this.SumStar = sum / _this.allcomment.length;
console.log(_this.SumStar);
// console.log(_this.SumStar);
})
},
addViewByTime(){
axios.get('/api/addUrlAccessViews', {
params: {
urlId: this.$route.query.uid,
}
})
},
// 日访问：

35
src/components/home/Carousel.vue
View File

@ -1,7 +1,7 @@
<template>
<el-carousel :interval="5000" trigger="click" type="card" height="200px">
<el-carousel-item v-for="item in urls" :key="item">
<el-image :src="item" fit="scale-down" @click="goToLink('https://landaiqing.space')">
<el-carousel-item v-if="banner" v-for="(item,index) in banner" :key="index">
<el-image v-if="item.imgUrl && item.url" :src="item.imgUrl" fit="scale-down" @click="goToLink(item.url)">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
@ -10,30 +10,43 @@
</el-carousel>
</template>
<script>
import axios from "axios";
export default {
name:"CarouselComponent",
components:{
},
data() {
return {
urls: [
'https://pic.imgdb.cn/item/65622651c458853aef5576d1.jpg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
]
banner:[],
}},
mounted() {
},
created() {
this.getBanners();
},
computed: {
},
methods: {
getBanners(){
var that=this;
axios({
method: 'get',
// 请求的地址
url: '/api/banners/view_banner',
// URL 中的查询参数
}).then((res)=>{
that.banner=res.data;
}).catch((error)=>{
})
},
goToLink(url){
window.open(url,'_blank')
}

73
src/components/home/HomeHeader.vue
View File

@ -1,10 +1,18 @@
<template>
<div class="header">
<el-image v-if="imageUrl" style="width: 50px;height:auto;margin-right: 20px" :src="'data:image/jpg;base64,'+imageUrl">
<div slot="error" class="image-slot">
<img style="width: 100%;margin-top: 5px" :src="require('@/assets/img/NAV.png')" alt="图标">
</div>
</el-image>
<div class="menu-circle"></div>
<div class="header-menu">
<router-link class="menu-link notify" active-class="is-active" v-for="(item,index) in tabList"
v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
<router-link class="menu-link notify2" active-class="is-active" v-for="(item,index) in tabList"
v-if="tabList.length>0" :key="index" :to="item.path">{{ item.libel }}
</router-link>
<a class="menu-link notify" style="cursor: pointer" v-for="(item2,index2) in otherNav"
v-if="otherNav" target="_blank" :key="item2.index2" :href="item2.url">{{ item2.navName }}
</a>
</div>
<!-- <div class="search-bar">-->
<!-- <input type="text" placeholder="Search">-->
@ -336,9 +344,10 @@ export default {
repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
},
userToken: '',
isLogin: true,
searchDialog:false,
otherNav:[],
imageUrl:null,
}
},
@ -347,19 +356,70 @@ export default {
this.toggleActive();
// this.reacherBarFun();
this.changeImg();
this.getOtherNav();
},
created() {
this.getImageByConfig('logo');
},
computed: {},
methods: {
...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
getImageByConfig(name){
let _this=this;
if(name){
axios({
method: 'get',
url: '/api/getAttachment',
responseType: 'arraybuffer',
params: {
name:name
},
}).then(function (res) {
if(res.data){
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
}else{
return false;
}
}).catch((error) => {
})
}else{
return false;
}
},
getOtherNav() {
let _this = this;
axios({
method: 'post',
url: '/api/selectAllNav',
}).then(function (res) {
if(res.data){
_this.otherNav=res.data;
}else{
return false;
}
}).catch((error) => {
// Vue.prototype.$notify.error({
// title: '错误',
// message: error,
// offset: 0
// });
})
},
openSearchDialog(){
if(localStorage.getItem('userId') && localStorage.getItem('Authorization')){
this.searchDialog=true;
}else{
Vue.prototype.$notify.info({
title: '提示',
message: "登录状态失效，请重新登录！",
message: "请登录后搜索！",
offset: 0
});
}
@ -499,10 +559,9 @@ export default {
offset: 0
});
// console.log(res);
// _this.userToken = 'Bearer ' + res.data.token;
_this.userToken = res.data.token;
_this.changeLogin({Authorization: _this.userToken});
_this.changeLogin({Authorization: res.data.token});
_this.setUserId({userId: res.data.Id});
_this.setUserRole({userRole: res.data.roleId});
_this.closeLoginDialog();

2
src/components/home/NavList.vue
View File

@ -22,7 +22,7 @@
<!-- <div class="app-card__subtext">{{nav.desc}}</div>-->
<div class="dividing-line"></div>
<div class="app-card-buttons">
<el-tooltip class="item" effect="dark" content="访问需要代理" placement="bottom">
<el-tooltip v-if="nav.agentHint" class="item" effect="dark" :content="nav.agentHint" placement="bottom">
<i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
</el-tooltip>
<!-- <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->

47
src/components/home/Notice.vue
View File

@ -11,9 +11,12 @@
<span class="status">
<!-- <span class="status-circle"></span>-->
<span>测试公告！！！！！</span>
<span>测试公告！！！！！</span>
<span>测试公告！！！！！</span>
<marquee behavior="scroll" direction="left" width="">
<span v-if="notice" v-for="(item,index) in notice" :key="index" style="margin-left: 20px">
{{ index+1+': '+item.title}}
</span>
</marquee>
<!-- <span>测试公告！！！！！</span>-->
</span>
<div class="button-wrapper">
<button class="content-button status-button">查看详情</button>
@ -24,18 +27,15 @@
<path d="M15 9l-6 6M9 9l6 6"></path>
</svg>
</div>
<div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
<div class="checkbox-wrapper">
<input type="checkbox" id="check1" class="checkbox">
<label for="check1">Import previous settings and preferences</label>
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="check2" class="checkbox">
<label for="check2">Remove old versions</label>
<!-- <div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>-->
<div v-if="notice" class="checkbox-wrapper" v-for="(item,index) in notice" :key="index">
<input type="checkbox" :id="index" class="checkbox">
<label v-if="item.content" :for="index"><el-link v-if="item.url" :underline="false" :href="item.url" target="_blank"> {{index+1+'：'+item.content}} </el-link></label>
</div>
<div class="content-button-wrapper">
<button class="content-button status-button open close">取消</button>
<button class="content-button status-button">确定</button>
<!-- <button class="content-button status-button open close">取消</button>-->
<button class="content-button status-button open close">确定</button>
</div>
</div>
<i @click="closeNotice" style="margin-left: 10px;" class="close-notice el-icon-circle-close"></i>
@ -45,22 +45,41 @@
</div>
</template>
<script>
import axios from "axios";
export default {
name:"NoticeComponent",
data() {
return {
isShow:true,
notice:[],
}},
mounted() {
},
created() {
this.getNotice();
},
computed: {
},
methods: {
getNotice(){
var that=this;
axios({
method: 'get',
// 请求的地址
url: '/api/notice/select',
// URL 中的查询参数
}).then((res)=>{
that.notice=res.data;
}).catch((error)=>{
})
},
closeNotice(){
this.isShow=false;
}

8
src/components/setting/home/PersonalInfoCard.vue
View File

@ -4,8 +4,11 @@
<div class="card-cover"
style="background-image: url('https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg')"></div>
<!-- <img class="card-avatar" src="https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg" alt="avatar">-->
<el-avatar v-if="user.avatar===null" class="card-avatar" alt="avatar"> {{user.userLogin}}</el-avatar>
<el-avatar v-if="user.avatar!==null" class="card-avatar" :src="user.avatar" alt="avatar"></el-avatar>
<el-image v-if="user.avatar" class="card-avatar" :src="user.avatar" alt="avatar">
<div slot="error" class="image-slot">
<img style="width: 100%;margin-top: 5px" :src="require('@/assets/img/NAV.png')" alt="图标">
</div>
</el-image>
<h1 v-if="user.nickname===null" class="card-fullname">{{user.userLogin}}</h1>
<h1 v-if="user.nickname!==null" class="card-fullname">{{user.nickname}}</h1>
<h2 v-if="user.roleId===1" class="card-jobtitle">common user</h2>
@ -217,6 +220,7 @@ export default {
message: "修改成功！",
offset: 0
});
_this.resetForm('updateForm');
_this.getUserAllInfo();
}
}).catch((error) => {

62
src/components/setting/layout/SettingHeader.vue
View File

@ -1,11 +1,16 @@
<template>
<div class="header">
<el-image v-if="imageUrl" style="width: 50px;height:auto;margin-right: 20px" :src="'data:image/jpg;base64,'+imageUrl">
<div slot="error" class="image-slot">
<img style="width: 100%;margin-top: 5px" :src="require('@/assets/img/NAV.png')" alt="图标">
</div>
</el-image>
<div class="menu-circle"></div>
<div class="header-menu">
</div>
<div class="search-bar">
<input type="text" placeholder="Search">
</div>
<!-- <div class="search-bar">-->
<!-- <input type="text" placeholder="Search">-->
<!-- </div>-->
<div class="header-profile">
<div class="notification">
<span class="notification-number">3</span>
@ -34,6 +39,7 @@
<script>
import $ from 'jquery'
import Vue from "vue";
import axios from "axios";
export default {
name:"SettingHeader",
components:{
@ -42,18 +48,66 @@ export default {
data() {
return {
loginDialogVisible:false,
imageUrl:null,
}},
mounted() {
this.toggleActive();
// this.reacherBarFun();
},
created() {
this.getImageByConfig('logo');
},
computed: {
},
methods: {
getImageByConfig(name){
let _this=this;
if (localStorage.getItem('userId') && localStorage.getItem('Authorization')) {
if(name){
axios({
method: 'get',
url: '/api/getAttachment',
responseType: 'arraybuffer',
params: {
name:name
},
}).then(function (res) {
if(res.data){
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
}else{
return false;
}
}).catch((error) => {
// Vue.prototype.$notify.error({
// title: '错误',
// message: error,
// offset: 0
// });
})
}else{
return false;
// Vue.prototype.$notify.error({
// title: '错误',
// message: "不存在！",
// offset: 0
// });
}
} else {
Vue.prototype.$notify.error({
title: '错误',
message: '登录状态失效，请重新登录！',
offset: 0
});
}
},
handleCommand(cmditem) {
if (!cmditem) {
this.$message("菜单选项缺少command属性");

77
src/components/setting/system/AppearanceSettings.vue
View File

@ -13,16 +13,20 @@
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600">
<div class="base-style-content" >
<div class="min-content">
<span class="min-title">Logo(浅色模式)</span>
<UploadComponent :config-name="light_logo" style="margin-top: 10px;"></UploadComponent>
</div>
<div class="min-content" style="margin-left: 50px">
<span class="min-title">Logo(深色模式)</span>
<UploadComponent :config-name="dark_logo" style="margin-top: 10px;"></UploadComponent>
<span class="min-title">Logo</span>
<div class="img-card">
<UploadComponent :config-name="logo" style="margin-top: 10px;"></UploadComponent>
</div>
</div>
<!-- <div class="min-content" style="margin-left: 50px">-->
<!-- <span class="min-title">Logo(深色模式)</span>-->
<!-- <UploadComponent :config-name="dark_logo" style="margin-top: 10px;"></UploadComponent>-->
<!-- </div>-->
<div class="min-content" style="margin-left: 50px">
<span class="min-title">Favicon</span>
<div class="img-card">
<UploadComponent style="margin-top: 10px;" :config-name="favicon"></UploadComponent>
</div>
</div>
</div>
<!-- <div class="color-select">-->
@ -39,37 +43,37 @@
<div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">浅色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px;" :config-name="light_bg_file"></UploadComponent>
<div class="img-url">
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
<el-input
placeholder="请输入链接"
v-model="dark_bg"
clearable
style="margin-top:10px;width: 420px"
@change="setConfig('dark_bg',dark_bg,'String')"
>
</el-input>
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
</div>
<UploadComponent :config-name="light_bg_file"></UploadComponent>
<!-- <div class="img-url">-->
<!-- <span class="min-title"><i class="el-icon-link"></i>图片链接</span>-->
<!-- <el-input-->
<!-- placeholder="请输入链接"-->
<!-- v-model="dark_bg"-->
<!-- clearable-->
<!-- style="margin-top:10px;width: 420px"-->
<!-- @change="setConfig('dark_bg',dark_bg,'String')"-->
<!-- >-->
<!-- </el-input>-->
<!-- <span class="min-title" style="margin-top:20px">支持随机图链接</span>-->
<!-- </div>-->
</div>
</div>
<div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">深色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px" :config-name="dark_bg_file"></UploadComponent>
<div class="img-url">
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
<el-input
placeholder="请输入链接"
v-model="light_bg"
clearable style="margin-top:10px;width: 420px"
@change="setConfig('dark_bg',light_bg,'String')"
>
</el-input>
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
</div>
<UploadComponent :config-name="dark_bg_file"></UploadComponent>
<!-- <div class="img-url">-->
<!-- <span class="min-title"><i class="el-icon-link"></i>图片链接</span>-->
<!-- <el-input-->
<!-- placeholder="请输入链接"-->
<!-- v-model="light_bg"-->
<!-- clearable style="margin-top:10px;width: 420px"-->
<!-- @change="setConfig('dark_bg',light_bg,'String')"-->
<!-- >-->
<!-- </el-input>-->
<!-- <span class="min-title" style="margin-top:20px">支持随机图链接</span>-->
<!-- </div>-->
</div>
</div>
</div>
@ -112,8 +116,7 @@ export default {
light_bg:null,
value:null,
favicon:"favicon",
dark_logo:'dark_logo',
light_logo:'light_logo',
logo:'logo',
dark_bg_file:'dark_bg_file',
light_bg_file:'light_bg_file',
loading:true,
@ -123,8 +126,7 @@ export default {
},
created() {
this.getConfig('open_dark_light');
this.getConfig('dark_bg');
this.getConfig('light_bg');
},
computed: {
@ -138,7 +140,7 @@ export default {
if(value!==''){
axios({
method: 'post',
url: '/api//updateConfig',
url: '/api/updateConfig',
params: {
name:name,
value:value,
@ -280,9 +282,10 @@ export default {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border-radius: 20px;
margin-top:20px;
width: 800px;
width: 250px;
height: 200px;
background-color: var(--theme-bg-color);
color: var(--theme-color);

12
src/components/setting/system/Upload.vue
View File

@ -9,7 +9,11 @@
name="multipartFile"
>
<img v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" />
<el-image v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" >
<div slot="error" class="image-slot">
<img style="width: 100%" :src="require('@/assets/img/null.png')" alt="图标">
</div>
</el-image>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
@ -103,7 +107,7 @@ export default {
name:name
},
}).then(function (res) {
if(res!==undefined){
if(res.data){
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
}else{
return false;
@ -137,9 +141,9 @@ export default {
const isJPG = file.type === "image/jpeg";
const isJPG2 = file.type === "image/jpg";
const isPNG = file.type === "image/png";
// const isGif = file.type === "image/gif";
const isIcon = file.type === "image/x-icon";
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isJPG && !isJPG2 && !isPNG) {
if (!isJPG && !isJPG2 && !isPNG && !isIcon) {
this.$message.warning("只支持jpg,png,jpeg,gif格式图片");
}
if (!isLt5M) {

2
src/router/index.js
View File

@ -177,7 +177,7 @@ const router = new VueRouter({
})
// // 导航守卫：使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/home' || to.path === '/news') {
if (to.path === '/home' || to.path === '/news' || to.path === '/nav') {
next();
} else {
let token = localStorage.getItem('Authorization');

8
src/store/index.js
View File

@ -5,7 +5,7 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
theme:'dark',
theme:localStorage.getItem('theme') ? localStorage.getItem('theme') : '',
userId:localStorage.getItem('userId') ? localStorage.getItem('userId') : '',
userRole:localStorage.getItem('userRole') ? localStorage.getItem('userRole') : '',
// 存储token
@ -14,9 +14,9 @@ export default new Vuex.Store({
getters: {
},
mutations: {
SET_THEME:(state,data)=>{
state.theme=data;
window.sessionStorage.setItem('theme',data);
setTheme:(state,data)=>{
state.theme=data.theme;
localStorage.setItem('theme',data.theme);
},
changeLogin (state, user) {
state.Authorization = user.Authorization;

93
src/views/Index.vue
View File

@ -4,12 +4,17 @@
<!-- </div>-->
<body translate="no">
<div class="video-bg">
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
<el-image v-if="imageUrl" style="width: 100%;height: 100%" :src="'data:image/jpg;base64,'+imageUrl">
<div slot="error" class="image-slot">
<img style="width: 100%" :src="require('@/assets/img/macos-big-sur-1280x720-dark-wwdc-2020-22655.jpg')" alt="背景">
</div>
</el-image>
<video v-else width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
<source src="../assets/video/background.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="dark-light" @click="changeStyle">
<div v-if="value==='1'" class="dark-light" @click="changeStyle">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
@ -32,6 +37,7 @@ import HomeHeader from "@/components/home/HomeHeader.vue";
import LeftSide from "@/components/home/LeftSide.vue";
import axios from "axios";
import Vue from "vue";
import {mapMutations} from "vuex";
export default {
@ -43,15 +49,14 @@ export default {
data() {
return {
isLight: false,
darkMode: window.sessionStorage.getItem('theme'),
folderTrue: [],
folderFalse: [],
value:null,
imageUrl:null,
}
},
mounted() {
let nowDate = new Date()
let hour = nowDate.getHours()
//黑夜时
@ -59,25 +64,92 @@ export default {
this.goDark()
}
//根据本地存储状态哦按段
if (this.darkMode === 'dark') {
if (localStorage.getItem('theme') === 'dark') {
this.goDark()
}else{
this.goLight();
}
},
created() {
this.getConfig('open_dark_light');
},
computed: {},
methods: {
...mapMutations(['setTheme']),
getConfig(name) {
let _this = this;
if (name) {
axios({
method: 'get',
url: '/api/getConfig',
params: {
name: name
}
}).then(function (res) {
if (res) {
if (res.data.open_dark_light) {
_this.value = res.data.open_dark_light.value;
}
// if(res.data.dark_bg){
// _this.dark_bg=res.data.dark_bg.value;
// }
// if(res.data.light_bg){
// _this.light_bg=res.data.light_bg.value;
// }
// _this.loading=false;
}
}).catch((error) => {
})
} else {
return false
}
},
getImageByConfig(name){
let _this=this;
if(name){
axios({
method: 'get',
url: '/api/getAttachment',
responseType: 'arraybuffer',
params: {
name:name
},
}).then(function (res) {
if(res.data){
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
}else{
return false;
}
}).catch((error) => {
})
}else{
return false;
// Vue.prototype.$notify.error({
// title: '错误',
// message: "不存在！",
// offset: 0
// });
}
},
goDark() {
this.getImageByConfig('dark_bg_file');
//黑夜的
document.body.classList.remove('light-mode')
window.sessionStorage.setItem('theme', 'dark')
this.setTheme({theme:'dark'})
},
goLight() {
this.getImageByConfig('light_bg_file');
//白天的
document.body.classList.add('light-mode')
window.sessionStorage.setItem('theme', 'light')
this.setTheme({theme:'light'});
},
changeStyle() {
this.isLight = !this.isLight
@ -94,9 +166,6 @@ export default {
// document.body.classList.toggle('light-mode');
// });
// }
}
}
</script>

110
src/views/Settings.vue
View File

@ -3,15 +3,15 @@
<!-- <HomePage></HomePage>-->
<!-- </div>-->
<body translate="no">
<div class="video-bg">
<div class="video-bg">
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
<source src="../assets/video/background.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="dark-light">
<div v-if="value==='1'" class="dark-light">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
stroke-linejoin="round">
stroke-linejoin="round" @click="changeStyle">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</div>
@ -31,7 +31,8 @@
// @ is an alias to /src
import SettingHeader from "@/components/setting/layout/SettingHeader.vue";
import SettingLeftSide from "@/components/setting/layout/SettingLeftSide.vue";
import axios from "axios";
import {mapMutations} from "vuex";
export default {
name: 'SettingsView',
@ -40,23 +41,106 @@ export default {
SettingHeader,
},
data() {
return {}
return {
value:null,
}
},
mounted() {
this.toggleDarkLight();
},
created() {
this.getConfig('open_dark_light');
},
computed: {},
methods:{
toggleDarkLight() {
const toggleButton = document.querySelector('.dark-light');
...mapMutations(['setTheme']),
getConfig(name) {
let _this = this;
if (name) {
axios({
method: 'get',
url: '/api/getConfig',
params: {
name: name
}
}).then(function (res) {
if (res) {
if (res.data.open_dark_light) {
_this.value = res.data.open_dark_light.value;
}
// if(res.data.dark_bg){
// _this.dark_bg=res.data.dark_bg.value;
// }
// if(res.data.light_bg){
// _this.light_bg=res.data.light_bg.value;
// }
// _this.loading=false;
}
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('light-mode');
});
}
}).catch((error) => {
})
} else {
return false
}
},
getImageByConfig(name){
let _this=this;
if(name){
axios({
method: 'get',
url: '/api/getAttachment',
responseType: 'arraybuffer',
params: {
name:name
},
}).then(function (res) {
if(res.data){
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
}else{
return false;
}
}).catch((error) => {
})
}else{
return false;
// Vue.prototype.$notify.error({
// title: '错误',
// message: "不存在！",
// offset: 0
// });
}
},
goDark() {
this.getImageByConfig('dark_bg_file');
//黑夜的
document.body.classList.remove('light-mode');
this.setTheme({theme:'dark'});
},
goLight() {
this.getImageByConfig('light_bg_file');
//白天的
document.body.classList.add('light-mode')
this.setTheme({theme:'light'});
},
changeStyle() {
this.isLight = !this.isLight
if (this.isLight !== true) {
this.goDark();
} else {
this.goLight();
}
},
// toggleDarkLight() {
// const toggleButton = document.querySelector('.dark-light');
//
// toggleButton.addEventListener('click', () => {
// document.body.classList.toggle('light-mode');
// });
// }
}
}
</script>