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

update system settings

Browse Source
This commit is contained in:
landaiqing 2023-12-26 22:37:41 +08:00
parent 0903b040af
commit bf741a6145
13 changed files with 772 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -194,7 +194,7 @@ export default {
},
mounted() {
this.GetAllComment();
// this.GetAllComment();
if(this.UrlId && this.UrlObj.icon){
this.getQR(this.UrlId, this.UrlObj.icon);
}
@ -207,16 +207,16 @@ export default {
if(this.UrlId){
this.ViewByTime(this.UrlId)
}
this.funFrame();
// this.funFrame();
},
computed: {},
methods: {
// 渲染iframe：
funFrame(){
var iframe = document.getElementById("myframe");
var url = this.UrlObj.url;
iframe.src = url;
},
// funFrame(){
// var iframe = document.getElementById("myframe");
// var url = this.UrlObj.url;
// iframe.src = url;
// },
// 递归获取指定根目录下的所有评论：
func0(commentId){
@ -414,7 +414,7 @@ export default {
},
// 向管理员反馈
WarnToAdmin() {
this.GetAllComment();
// this.GetAllComment();
console.log(this.allcomment);
}
}

2
src/components/setting/category/CategoryManage.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
<div class="main" style="text-shadow: 0 0 20px var(--font-border);overflow: scroll">
<div class="HeadLine" style="margin-top:30px;margin-left:15px;">
<div class="HeadSquare" ></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-grid"></i>分类管理</div>

36
src/components/setting/home/HomeEChart.vue
View File

@ -1,36 +0,0 @@
<template>
<div id="main">
</div>
</template>
<script>
import * as echarts from 'echarts'
import Vue from "vue";
Vue.prototype.$echarts = echarts;
export default {
name: "HomeEChart",
data() {
return {
}
},
mounted() {
},
created() {
},
computed: {},
methods: {
}
}
</script>
<style scoped>
.main{
width: 600px;
height: 500px;
}
</style>

5
src/components/setting/home/PersonalHomePage.vue
View File

@ -9,7 +9,7 @@
<InfoCard v-if="this.infoData.urlListNum && this.infoData.name1 && this.infoData.icon1" :info="this.infoData.urlListNum" :name="this.infoData.name1" :icon="this.infoData.icon1"></InfoCard>
<InfoCard v-if="this.infoData.cateNum && this.infoData.name2 && this.infoData.icon2" :info="this.infoData.cateNum" :name="this.infoData.name2" :icon="this.infoData.icon2" style="margin-left: 10px"></InfoCard>
</div>
<!-- <HomeEChart style="margin-left: 40px"></HomeEChart>-->
</div>
</div>
</div>
@ -17,13 +17,12 @@
<script>
import PersonalInfoCard from "@/components/setting/home/PersonalInfoCard.vue";
import InfoCard from "@/components/setting/home/InfoCard.vue";
import HomeEChart from "@/components/setting/home/HomeEChart.vue";
import axios from "axios";
import Vue from "vue";
export default {
name: "PersonalHomePage",
components: {HomeEChart, InfoCard, PersonalInfoCard},
components: { InfoCard, PersonalInfoCard},
data() {
return {
infoData:{

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

@ -1,16 +1,16 @@
<template>
<div class="card" data-state="#about">
<div class="card-header">
<div class="card-cover" style="background-image: url('https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80')"></div>
<img class="card-avatar" src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80" alt="avatar">
<h1 class="card-fullname">William Rocheald</h1>
<h2 class="card-jobtitle">UI Developer</h2>
<div class="card-cover" style="background-image: url('@/assets/img/image_processing20200722-26968-18w1tkd.jpg')"></div>
<img class="card-avatar" src='@/assets/img/image_processing20200722-26968-18w1tkd.jpg' alt="avatar">
<h1 class="card-fullname">UserName</h1>
<h2 class="card-jobtitle">common user</h2>
</div>
<div class="card-main">
<div class="card-section is-active" id="about">
<div class="card-content">
<div class="card-subtitle">ABOUT</div>
<p class="card-desc">Whatever tattooed stumptown art party sriracha gentrify hashtag intelligentsia readymade schlitz brooklyn disrupt.
<p class="card-desc">用户描述
</p>
</div>
<div class="card-social">
@ -28,7 +28,7 @@
</div>
<div class="card-section" id="experience">
<div class="card-content">
<div class="card-subtitle">WORK EXPERIENCE</div>
<div class="card-subtitle">登录日志</div>
<div class="card-timeline">
<div class="card-item" data-year="2014">
<div class="card-item-title">Front-end Developer at <span>JotForm</span></div>
@ -73,9 +73,9 @@
</div>
</div>
<div class="card-buttons">
<button data-section="#about" class="is-active">ABOUT</button>
<button data-section="#experience">EXPERIENCE</button>
<button data-section="#contact">CONTACT</button>
<button data-section="#about" class="is-active">我的</button>
<button data-section="#experience">修改</button>
<button data-section="#contact">联系方式</button>
</div>
</div>
</div>
@ -123,7 +123,7 @@ export default {
.card {
max-width: 340px;
width: 340px;
margin: auto;
overflow-y: auto;
position: relative;

2
src/components/setting/importExport/ImportExport.vue
View File

@ -8,7 +8,7 @@
</div>
<div style="margin-top: 20px;display: flex;align-items: center;flex-direction: column">
<span class="title">导出数据</span>
<span class="title">导出数据（.excel）</span>
<div>
<Export></Export>
</div>

38
src/components/setting/layout/SettingLeftSide.vue
View File

@ -33,27 +33,39 @@ export default {
methods: {
getAuth(){
let _this=this;
axios({
method: 'post',
url: '/api/Auth/retAllAuth',
}).then(function (res) {
if(res.data.code!==200){
if(localStorage.getItem('userRole')&& localStorage.getItem('Authorization')){
axios({
method: 'post',
url: '/api/Auth/retAllAuth',
params:{
isMenu:localStorage.getItem('userRole')
},
}).then(function (res) {
if(res.data.code!==200){
Vue.prototype.$notify.error({
title: '错误',
message: "Auth Get ERROR!",
offset: 0
});
}else{
_this.authList=res.data.data;
}
}).catch((error)=>{
Vue.prototype.$notify.error({
title: '错误',
message: "Auth Get ERROR!",
message: error,
offset: 0
});
}else{
_this.authList=res.data.data;
}
}).catch((error)=>{
})
}else{
Vue.prototype.$notify.error({
title: '错误',
message: error,
message: "登录状态失效，请重新登录！",
offset: 0
});
})
}
},
}

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

@ -1,6 +1,11 @@
<template>
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
<div class="main" style="text-shadow: 0 0 20px var(--font-border);"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="var(--theme-bg-color)"
>
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-open"></i>基础样式</div>
@ -9,21 +14,21 @@
<div class="base-style-content" >
<div class="min-content">
<span class="min-title">Logo(浅色模式)</span>
<UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
<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 style="margin-top: 10px;z-index:998"></UploadComponent>
<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>
<UploadComponent style="margin-top: 10px;z-index:998"></UploadComponent>
<UploadComponent style="margin-top: 10px;" :config-name="favicon"></UploadComponent>
</div>
</div>
<div class="color-select">
<span class="theme-color-select">主题色：</span>
<el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>
</div>
<!-- <div class="color-select">-->
<!-- <span class="theme-color-select">主题色：</span>-->
<!-- <el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>-->
<!-- </div>-->
</div>
<div class="background-img" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;display: flex;flex-direction: column">
<div class="HeadLine" style="margin-top:15px;margin-left:-5px;">
@ -34,14 +39,16 @@
<div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">浅色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
<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="input"
placeholder="请输入链接"
v-model="dark_bg"
clearable
style="margin-top:10px;">
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>
@ -51,13 +58,15 @@
<div style="display: flex;flex-direction: column;margin-top:20px">
<span class="min-title">深色模式</span>
<div class="img-card">
<UploadComponent style="margin-left: 20px;z-index:998"></UploadComponent>
<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="input"
clearable style="margin-top:10px;">
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>
@ -76,18 +85,9 @@
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0" >
</el-switch>
</div>
<div style="margin-top:20px">
<span class="min-title" style="margin-top:20px">默认深色：</span>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0" >
active-value="1"
inactive-value="0"
@change="setConfig('open_dark_light',value,'String')">
</el-switch>
</div>
<div style="width:100%;height:50px"></div>
@ -99,27 +99,135 @@
import UploadComponent from "@/components/setting/system/Upload.vue";
import axios from "axios";
import Vue from "vue";
export default {
name:"AppearanceSettings",
components: {UploadComponent},
data() {
return {
color:'#409EFF',
input: '',
value:'',
// color:'#409EFF',
dark_bg:null,
light_bg:null,
value:null,
favicon:"favicon",
dark_logo:'dark_logo',
light_logo:'light_logo',
dark_bg_file:'dark_bg_file',
light_bg_file:'light_bg_file',
loading:true,
}},
mounted() {
},
created() {
this.getConfig('open_dark_light');
this.getConfig('dark_bg');
this.getConfig('light_bg');
},
computed: {
},
methods: {
setConfig(name,value,type){
let _this = this;
if (localStorage.getItem('userId')&&localStorage.getItem('Authorization')) {
if(value!==''){
axios({
method: 'post',
url: '/api//updateConfig',
params: {
name:name,
value:value,
type:type,
},
}).then(function (res) {
if(res.data!== "更新成功!"){
Vue.prototype.$notify.error({
title: '错误',
message: "更新失败！",
offset: 0
});
}else {
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "更新成功！"),
type: 'success',
offset: 0
});
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
}else {
Vue.prototype.$notify.error({
title: '错误',
message: "不能为空",
offset: 0
});
}
} else {
Vue.prototype.$notify.error({
title: '错误',
message: '登录状态失效，请重新登录！',
offset: 0
});
}
},
getConfig(name){
let _this=this;
if(localStorage.getItem('userRole') === '0' && localStorage.getItem('Authorization')){
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) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
}else{
return false
}
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "权限不够！",
offset: 0
});
}
},
}
}
</script>

346
src/components/setting/system/FunctionSettings.vue
View File

@ -1,113 +1,247 @@
<template>
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
<div class="main" style="text-shadow: 0 0 20px var(--font-border);"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="var(--theme-bg-color)">
<div class="nav-function">
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
<div class="HeadSquare"></div>
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-location"></i>导航设置</div>
</div>
<div class="nav-function-content" style="font-family: SimHei;font-size:18px;font-weight:600;">
<el-card style="width:600px;background-color: var(--theme-bg-color);border-width:5px;margin-top:10px;border-color:var(--border-color)">
<el-card
style="width:600px;background-color: var(--theme-bg-color);border-width:5px;margin-top:10px;border-color:var(--border-color)">
<span class="min-title">导航菜单</span>
<div v-for="(item,index) in form" :key="index" style="margin-top: 15px;display: flex;align-items: center">
<el-input
placeholder="名称"
v-model="form.name"
v-model="form[index].navName"
clearable style="width: 200px">
</el-input>
<el-input
placeholder="链接"
v-model="form.url"
v-model="form[index].url"
clearable style="width: 200px;margin-left: 10px">
</el-input>
<i @click="deleteItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;color:var(--theme-color)"
class="el-icon-circle-close"></i>
<el-tooltip class="item" effect="dark" content="确定修改" placement="top">
<i @click="addNav(index)" class="ok el-icon-circle-check"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除导航" placement="top">
<i @click="deleteNav(form[index].navName,index)"
class="delete el-icon-circle-close"></i>
</el-tooltip>
</div>
<i @click="addItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;margin-top:20px;color:var(--theme-color)"
class="el-icon-circle-plus-outline"></i>
<el-tooltip class="item" effect="dark" content="添加导航" placement="bottom">
<i @click="addItem"
class="add el-icon-circle-plus-outline"></i>
</el-tooltip>
</el-card>
<el-card style="width:600px;background-color: var(--theme-bg-color);border-width:5px;margin-top:10px;border-color:var(--border-color)">
<span class="min-title">搜索工具</span>
<div v-for="(item,index) in searchList" :key="index"
style="display: flex;flex-direction: row;align-items: center;margin-top:20px;">
<div class="reach-card">
<span style="margin-left: 10px">{{ item.name }}</span>
<i @click="openSearchDialog" style="margin-right: 10px" class="el-icon-s-tools"></i>
</div>
<i @click="deleteSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;color:var(--theme-color)"
class="el-icon-circle-close"></i>
</div>
<i @click="addSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;margin-top:20px;color:var(--theme-color)"
class="el-icon-circle-plus-outline"></i>
</el-card>
<!-- <el-card style="width:600px;background-color: var(&#45;&#45;theme-bg-color);border-width:5px;margin-top:10px;border-color:var(&#45;&#45;border-color)">-->
<!-- <span class="min-title">搜索工具</span>-->
<!-- <div v-for="(item,index) in searchList" :key="index"-->
<!-- style="display: flex;flex-direction: row;align-items: center;margin-top:20px;">-->
<!-- <div class="reach-card">-->
<!-- <span style="margin-left: 10px">{{ item.name }}</span>-->
<!-- <i @click="openSearchDialog" style="margin-right: 10px" class="el-icon-s-tools"></i>-->
<!-- </div>-->
<!-- <i @click="deleteSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;color:var(&#45;&#45;theme-color)"-->
<!-- class="el-icon-circle-close"></i>-->
<!-- </div>-->
<!-- <i @click="addSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px;margin-top:20px;color:var(&#45;&#45;theme-color)"-->
<!-- class="el-icon-circle-plus-outline"></i>-->
<!-- </el-card>-->
<el-dialog
title="搜索设置"
:visible="DialogVisible"
width="30vw"
append-to-body
:show-close="true"
:close-on-click-modal="true"
:before-close="befoClose"
center>
<div>
<div class="search-content">
<label>名称：</label>
<el-input
placeholder="名称"
clearable style="width: 350px;margin-left: 10px">
</el-input>
</div>
<div class="search-content">
<label>参数：</label>
<el-input
placeholder="参数"
clearable style="width: 350px;margin-left: 10px">
</el-input>
</div>
<span>说明： 用【{keywords}】代替关键词例如：https://www.google.com/search?q={keywords}</span>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="DialogVisible = false">移除</el-button>
<el-button type="primary" @click="DialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
<!-- <el-dialog-->
<!-- title="搜索设置"-->
<!-- :visible="DialogVisible"-->
<!-- width="30vw"-->
<!-- append-to-body-->
<!-- :show-close="true"-->
<!-- :close-on-click-modal="true"-->
<!-- :before-close="befoClose"-->
<!-- center>-->
<!-- <div>-->
<!-- <div class="search-content">-->
<!-- <label>名称：</label>-->
<!-- <el-input-->
<!-- placeholder="名称"-->
<!-- clearable style="width: 350px;margin-left: 10px">-->
<!-- </el-input>-->
<!-- </div>-->
<!-- <div class="search-content">-->
<!-- <label>参数：</label>-->
<!-- <el-input-->
<!-- placeholder="参数"-->
<!-- clearable style="width: 350px;margin-left: 10px">-->
<!-- </el-input>-->
<!-- </div>-->
<!-- <span>说明： 用【{keywords}】代替关键词例如：https://www.google.com/search?q={keywords}</span>-->
<!-- </div>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="DialogVisible = false">移除</el-button>-->
<!-- <el-button type="primary" @click="DialogVisible = false">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import Vue from "vue";
export default {
name: "FunctionSettings",
components: {},
data() {
return {
DialogVisible:false,
input: '',
form: [{
name: null,
url: null,
}],
searchList: [{
name: '百度',
url: ''
}]
// DialogVisible:false,
// input: '',
form: [],
// searchList: [{
// name: '百度',
// url: ''
// }]
loading:true,
}
},
mounted() {
this.getNav();
},
created() {
},
computed: {},
methods: {
openSearchDialog(){
this.DialogVisible=true;
getNav() {
let _this = this;
if (localStorage.getItem('userId') && localStorage.getItem('Authorization')) {
axios({
method: 'post',
url: '/api/selectAllNav',
}).then(function (res) {
if(res.data){
_this.form=res.data;
_this.loading=false;
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: '登录状态失效，请重新登录！',
offset: 0
});
}
},
befoClose(){
this.DialogVisible=false;
deleteNav(navName,index) {
let _this = this;
if (localStorage.getItem('userId') && localStorage.getItem('Authorization')) {
if (navName) {
axios({
method: 'get',
url: '/api/deleteNav',
params: {
navName:navName
}
}).then(function (res) {
if (res.data !== "删除成功") {
Vue.prototype.$notify.error({
title: '错误',
message: "删除失败",
offset: 0
});
} else {
Vue.prototype.$notify.success({
title: 'OK',
message: "删除成功！",
offset: 0
});
_this.getNav();
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "导航名称为空！",
offset: 0
});
this.form.splice(index, 1)
}
} else {
Vue.prototype.$notify.error({
title: '错误',
message: '登录状态失效，请重新登录！',
offset: 0
});
}
},
addNav(index) {
let _this = this;
if (localStorage.getItem('userId') && localStorage.getItem('Authorization')) {
if (this.form[index].navName && this.form[index].url) {
axios({
method: 'get',
url: '/api/addNav',
params: {
navName: _this.form[index].navName,
url: _this.form[index].url,
status: '0',
}
}).then(function (res) {
if (res.data !== "添加成功") {
Vue.prototype.$notify.error({
title: '错误',
message: "添加失败",
offset: 0
});
} else {
Vue.prototype.$notify.success({
title: 'OK',
message: "添加成功！",
offset: 0
});
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "请填写完整内容！",
offset: 0
});
}
} else {
Vue.prototype.$notify.error({
title: '错误',
message: '登录状态失效，请重新登录！',
offset: 0
});
}
},
addItem() {
this.form.push({
@ -115,24 +249,31 @@ export default {
url: ''
})
},
addSearchItem() {
this.searchList.push({
name: '',
url: ''
})
},
deleteItem(item, index) {
if(this.form.length<=1){//如果只有一个输入框则不可以删除
return false
}
this.form.splice(index, 1)
},
deleteSearchItem(item, index) {
if(this.searchList.length<=1){//如果只有一个输入框则不可以删除
return false
}
this.searchList.splice(index, 1)
}
// deleteItem(item, index) {
// if (this.form.length <= 1) {//如果只有一个输入框则不可以删除
// return false
// }
// this.form.splice(index, 1)
// },
// openSearchDialog(){
// this.DialogVisible=true;
// },
// befoClose(){
// this.DialogVisible=false;
// },
// addSearchItem() {
// this.searchList.push({
// name: '',
// url: ''
// })
// },
// deleteSearchItem(item, index) {
// if(this.searchList.length<=1){//如果只有一个输入框则不可以删除
// return false
// }
// this.searchList.splice(index, 1)
// }
}
}
@ -147,7 +288,7 @@ export default {
}
.nav-function-content {
margin-top:20px;
margin-top: 20px;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
@ -178,10 +319,37 @@ export default {
margin-top: 5px;
}
.search-content{
.search-content {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 5px;
}
.add {
margin-top: 10px;
}
.ok, .delete, .add {
font-size: 25px;
font-weight: bolder;
margin-left: 10px;
color: var(--theme-color);
}
.ok:hover {
font-size: 30px;
color: green;
}
.delete:hover {
font-size: 30px;
color: red;
}
.add:hover {
font-size: 30px;
color: #5ddcff;
}
</style>

321
src/components/setting/system/InformationSettings.vue
View File

@ -1,5 +1,9 @@
<template>
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
<div class="main" style="text-shadow: 0 0 20px var(--font-border);"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="var(--theme-bg-color)">
<div class="LeftPart" style="width:70%">
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
<div class="HeadSquare"></div>
@ -14,10 +18,12 @@
<div class="LineInput">
<span class="min-title">站名:</span>
<el-input
placeholder="请输入内容"
v-model="input"
placeholder="请输入站名"
v-model="website_name"
clearable
style="width: 400px;margin-top:10px">
style="margin-top:10px"
@change="setInfoConfig('website_name',website_name,'String')"
>
</el-input>
</div>
<div class="LineInput">
@ -26,8 +32,9 @@
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="textarea"
style="width: 500px;margin-top:10px">
v-model="seo_desc"
style="margin-top:10px"
@change="setInfoConfig('seo_desc',seo_desc,'String')">
</el-input>
</div>
<div class="LineInput">
@ -36,52 +43,54 @@
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="textarea"
style="width: 500px;margin-top:10px">
v-model="seo_key_words"
style="margin-top:10px"
@change="setInfoConfig('seo_key_words',seo_key_words,'String')">
</el-input>
</div>
<div class="LineInput">
<span class="min-title">底部链接（可用作友链）：</span>
<div v-for="(item, index) in form" :key="index" style="margin-top:10px;">
<el-card style="width:500px;height:180px;background-color: var(--theme-bg-color)">
<el-form>
<el-form-item
label="名称"
style="color:var(--theme-color)"
:prop="'dynamicItem.' + index + '.name'"
:rules="{
required: true, message: '名称不能为空', trigger: 'blur'
}"
>
<el-input style="width: 300px" v-model="item.name"></el-input>
</el-form-item>
<el-form-item
label="链接"
style="color:var(--theme-color)"
:prop="'dynamicItem.' + index + '.phone'"
:rules="[
{required: true, message: 'url不能为空', trigger: 'blur'},
]"
>
<el-input style="width: 300px" v-model="item.url"></el-input>
</el-form-item>
<el-form-item style="color:var(--theme-color);">
<i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>
</el-form-item>
</el-form>
</el-card>
<!-- <div class="LineInput">-->
<!-- <span class="min-title">底部链接（可用作友链）：</span>-->
<!-- <div v-for="(item, index) in form" :key="index" style="margin-top:10px;">-->
<!-- <el-card style="width:500px;height:180px;background-color: var(&#45;&#45;theme-bg-color)">-->
<!-- <el-form>-->
<!-- <el-form-item-->
<!-- label="名称"-->
<!-- style="color:var(&#45;&#45;theme-color)"-->
<!-- :prop="'dynamicItem.' + index + '.name'"-->
<!-- :rules="{-->
<!-- required: true, message: '名称不能为空', trigger: 'blur'-->
<!-- }"-->
<!-- >-->
<!-- <el-input style="width: 300px" v-model="item.name"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item-->
<!-- label="链接"-->
<!-- style="color:var(&#45;&#45;theme-color)"-->
<!-- :prop="'dynamicItem.' + index + '.phone'"-->
<!-- :rules="[-->
<!-- {required: true, message: 'url不能为空', trigger: 'blur'},-->
<!-- ]"-->
<!-- >-->
<!-- <el-input style="width: 300px" v-model="item.url"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item style="color:var(&#45;&#45;theme-color);">-->
<!-- <i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-card>-->
</div>
<el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>
</div>
<!-- </div>-->
<!-- <el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>-->
<!-- </div>-->
<div class="LineInput" style="margin-top:25px!important;">
<span class="min-title">底部信息：</span>
<el-input
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="textarea"
style="width: 500px;margin-top:10px">
v-model="bottom_info"
style="margin-top:10px"
@change="setInfoConfig('bottom_info',bottom_info,'String')">
</el-input>
</div>
<div style="display: flex;flex-direction: column">
@ -90,8 +99,9 @@
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="textarea"
style="width: 500px;margin-top:10px">
v-model="copyright_info"
style="margin-top:10px"
@change="setInfoConfig('copyright_info',copyright_info,'String')">
</el-input>
</div>
<div style="display: flex;flex-direction: column">
@ -100,8 +110,9 @@
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="textarea"
style="width: 500px;margin-top:10px">
v-model="icp_info"
style="margin-top:10px"
@change="setInfoConfig('icp_info',icp_info,'String')">
</el-input>
</div>
</div>
@ -117,43 +128,44 @@
<span class="min-title">代理网站提示语:</span>
<el-input
placeholder="请输入内容"
v-model="input"
v-model="proxy_prompts"
clearable
style="width: 500px;margin-top:10px">
style="margin-top:10px"
@change="setInfoConfig('proxy_prompts',proxy_prompts,'String')">
</el-input>
</div>
<div class="LineInput">
<span class="min-title">社交媒体：</span>
<div v-for="(item, index) in form" :key="index" style="margin-top:10px">
<el-card style="width:500px;height:180px;background-color: var(--theme-bg-color)">
<el-form >
<el-form-item
label="名称"
:prop="'dynamicItem.' + index + '.name'"
:rules="{
required: true, message: '名称不能为空', trigger: 'blur'
}"
>
<el-input style="width: 400px" v-model="item.name"></el-input>
</el-form-item>
<el-form-item
label="链接"
:prop="'dynamicItem.' + index + '.phone'"
:rules="[
{required: true, message: 'url不能为空', trigger: 'blur'},
]"
>
<el-input style="width: 400px" v-model="item.url"></el-input>
</el-form-item>
<el-form-item style="color:var(--theme-color);">
<i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>
</el-form-item>
</el-form>
</el-card>
<!-- <div class="LineInput">-->
<!-- <span class="min-title">社交媒体：</span>-->
<!-- <div v-for="(item, index) in form" :key="index" style="margin-top:10px">-->
<!-- <el-card style="width:500px;height:180px;background-color: var(&#45;&#45;theme-bg-color)">-->
<!-- <el-form >-->
<!-- <el-form-item-->
<!-- label="名称"-->
<!-- :prop="'dynamicItem.' + index + '.name'"-->
<!-- :rules="{-->
<!-- required: true, message: '名称不能为空', trigger: 'blur'-->
<!-- }"-->
<!-- >-->
<!-- <el-input style="width: 400px" v-model="item.name"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item-->
<!-- label="链接"-->
<!-- :prop="'dynamicItem.' + index + '.phone'"-->
<!-- :rules="[-->
<!-- {required: true, message: 'url不能为空', trigger: 'blur'},-->
<!-- ]"-->
<!-- >-->
<!-- <el-input style="width: 400px" v-model="item.url"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item style="color:var(&#45;&#45;theme-color);">-->
<!-- <i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-card>-->
</div>
<el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>
</div>
<!-- </div>-->
<!-- <el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>-->
<!-- </div>-->
</el-card>
</div>
</div>
@ -191,36 +203,155 @@
</div>
</template>
<script>
import axios from "axios";
import Vue from "vue";
export default {
name: "InformationSettings",
components: {},
data() {
return {
input: '',
textarea: '',
form: [{
name: null,
url: null,
}]
website_name: null,
seo_desc : null,
seo_key_words: null,
bottom_info: null,
copyright_info: null,
icp_info: null,
proxy_prompts: null,
// form: [{
// name: null,
// url: null,
// }]
loading:true,
}
},
mounted() {
this.getInfoConfig('website_name');
this.getInfoConfig('seo_desc');
this.getInfoConfig('seo_key_words');
this.getInfoConfig('bottom_info');
this.getInfoConfig('copyright_info');
this.getInfoConfig('icp_info');
this.getInfoConfig('proxy_prompts');
},
created() {
},
computed: {},
methods: {
addItem() {
this.form.push({
name: '',
url: ''
})
setInfoConfig(name,value,type){
let _this = this;
if (localStorage.getItem('userId')&&localStorage.getItem('Authorization')) {
if(value!==''){
axios({
method: 'post',
url: '/api//updateConfig',
params: {
name:name,
value:value,
type:type,
},
}).then(function (res) {
if(res.data!== "更新成功!"){
Vue.prototype.$notify.error({
title: '错误',
message: "更新失败！",
offset: 0
});
}else {
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "更新成功！"),
type: 'success',
offset: 0
});
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
}else {
Vue.prototype.$notify.error({
title: '错误',
message: "不能为空!",
offset: 0
});
}
} else {
Vue.prototype.$notify.error({
title: '错误',
message: '登录状态失效，请重新登录！',
offset: 0
});
}
},
deleteItem(item, index) {
this.form.splice(index, 1)
}
getInfoConfig(name){
let _this=this;
if(localStorage.getItem('userRole') === '0' && localStorage.getItem('Authorization')){
axios({
method: 'get',
url: '/api/getConfig',
params:{
name:name
}
}).then(function (res) {
if(res){
if(res.data.website_name){
_this.website_name=res.data.website_name.value;
}
if(res.data.seo_desc){
_this.seo_desc=res.data.seo_desc.value;
}
if(res.data.seo_key_words){
_this.seo_key_words=res.data.seo_key_words.value;
}
if(res.data.bottom_info){
_this.bottom_info=res.data.bottom_info.value;
}
if(res.data.copyright_info){
_this.copyright_info=res.data.copyright_info.value;
}
if(res.data.icp_info){
_this.icp_info=res.data.icp_info.value;
}
if(res.data.proxy_prompts){
_this.proxy_prompts=res.data.proxy_prompts.value;
}
_this.loading=false;
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "权限不够！",
offset: 0
});
}
},
// addItem() {
// this.form.push({
// name: '',
// url: ''
// })
// },
// deleteItem(item, index) {
// this.form.splice(index, 1)
// }
}
}

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

@ -7,13 +7,17 @@
:auto-upload="true"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:on-preview="handlePictureCardPreview"
:limit="1"
name="multipartFile"
>
<img v-if="imageUrl" width="200px" height="200px" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
>
<img v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-upload>
</template>
<script>
import axios from "axios";
@ -22,65 +26,74 @@ import Vue from "vue";
export default {
name: "UploadComponent",
components: {},
props:{
configName:String,
},
data() {
return {
imageUrl: '',
dialogImageUrl: '',
dialogVisible: false
}
},
mounted() {
this.getImage(this.configName);
},
created() {
},
computed: {},
methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//上传图标事件
selectPicUpload(obj) {
// let _this = this;
let fd = new FormData(); //参数的格式是formData格式的
fd.append("multipartFile", obj.file); //参数
console.log(fd.get('multipartFile'))
if (localStorage.getItem('userRole') === '0'&&localStorage.getItem('Authorization')) {
axios({
method: 'post',
url: '/api/uploadfile',
headers: {'Content-Type': 'multipart/form-data;charset=utf-8'},
params:{
if(this.configName){
let _this = this;
axios({
method: 'post',
url: '/upload/uploadfile',
params:{
cate:'img',
name:'dark_logo',
name: this.configName,
},
data:fd,
}).then(function (res) {
if(res.data.msg!=="添加成功！"){
Vue.prototype.$notify.error({
title: '错误',
message: "上传失败！",
offset: 0
});
},
data:{
multipartFile:fd,
}else {
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, "上传成功！"),
type: 'success',
offset: 0
});
_this.getImage(_this.configName);
}
}).catch((error) => {
console.log(error)
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
}else{
return false;
}
}).then(function (res) {
console.log(res);
// if(res.data.msg!=="添加成功！"){
// Vue.prototype.$notify.error({
// title: '错误',
// message: "上传失败！",
// offset: 0
// });
//
// }else {
// Vue.prototype.$notify({
// title: '成功',
// message: ('i', {style: 'color: teal'}, "上传成功！"),
// type: 'success',
// offset: 0
// });
// _this.imageUrl=_this.getImage('dark_logo');
// }
}).catch((error) => {
console.log(error)
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
} else {
Vue.prototype.$notify.error({
@ -91,17 +104,19 @@ export default {
}
},
getImage(name){
let _this=this;
if (localStorage.getItem('userRole') ==='0' && localStorage.getItem('Authorization')) {
if(name){
axios({
method: 'get',
url: '/api/getAttachment',
responseType: 'arraybuffer',
params: {
name:name
},
}).then(function (res) {
if(res){
return res;
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
}else{
return false;
}
@ -113,11 +128,12 @@ export default {
});
})
}else{
Vue.prototype.$notify.error({
title: '错误',
message: "不存在！",
offset: 0
});
return false;
// Vue.prototype.$notify.error({
// title: '错误',
// message: "不存在！",
// offset: 0
// });
}

54
src/main.js
View File

@ -7,34 +7,34 @@ import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.prototype.axios = axios;
// 请求拦截器, 每次请求都会在请求头中携带token
// axios.interceptors.request.use((config) => {
// if(localStorage.getItem('Authorization')) {
// config.headers.Authorization = localStorage.getItem('Authorization')
// }
// return config;
// }, (error) => {
// return Promise.reject(error);
// })
//
axios.interceptors.request.use((config) => {
if(localStorage.getItem('Authorization')) {
config.headers.Authorization = localStorage.getItem('Authorization')
}
return config;
}, (error) => {
return Promise.reject(error);
})
// //http reponse响应拦截器
// axios.interceptors.response.use(
// response =>{
// return response;
// },
// error=>{
// if(error.response){
// switch(error.response.status){
// case 401:
// localStorage.removeItem('Authorization');
// router.replace({
// path: '/home',
// query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
// }).then( r =>{
//
// })
// }
// }
// })
axios.interceptors.response.use(
response =>{
return response;
},
error=>{
if(error.response){
switch(error.response.status){
case 401:
localStorage.removeItem('Authorization');
router.replace({
path: '/home',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
}).then( r =>{
})
}
}
})
// home-style
import './assets/css/home-style.css'

11
vue.config.js
View File

@ -36,7 +36,16 @@ module.exports = defineConfig({
}
},
'/upload': {
//后端接口的baseurl
target: 'http://localhost:8080',
//是否允许跨域
changeOrigin: true,
pathRewrite: {
//这里的作用是使用去掉api
'^/upload': ''
}
},
'/dev': {
//后端接口的baseurl