lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：优化一些界面细节

Browse Source
This commit is contained in:
jmal 2021-01-22 18:16:56 +08:00
parent 8d140c3b92
commit 8342b47dd7
14 changed files with 140 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "jmal-cloud-view",
"version": "2.0.3",
"version": "2.0.4",
"description": "jmal cloud",
"author": "Jmal <zhushilun084@163.com>",
"license": "MIT",

71
src/layout/components/Navbar.vue
View File

@ -4,16 +4,17 @@
<breadcrumb class="breadcrumb-container" />
<div class="right-content">
<router-link v-if="isShow" to="/setting/website/manager-blog">
<div class="right-content-button">
<svg-icon icon-class="wangzhanguanli"></svg-icon>网站管理
</div>
</router-link>
<router-link v-if="isShow" target="_blank" to="/articles">
<div class="right-content-button">
<svg-icon icon-class="WEBSITE"></svg-icon>网站
</div>
</router-link>
<app-link
v-for="route in routes.topRouters"
:key="route.path"
:to="resolvePath(route.path)"
v-if="!route.children[0].hidden"
>
<div class="right-content-button">
<svg-icon :icon-class="route.children[0].meta.icon"></svg-icon>
{{route.children[0].name}}
</div>
</app-link>
<div class="right-username">{{showName}}</div>
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
@ -22,16 +23,16 @@
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link to="/setting/user">
<app-link
v-for="route in routes.rightTopRoutes"
:key="route.path"
:to="resolvePath(route.path)"
>
<el-dropdown-item>
<svg-icon icon-class="shezhi"></svg-icon>基本设置
<svg-icon :icon-class="route.children[0].meta.icon"></svg-icon>
{{route.children[0].name}}
</el-dropdown-item>
</router-link>
<router-link to="/setting/website/manager-blog">
<el-dropdown-item>
<svg-icon icon-class="wangzhanguanli"></svg-icon>网站管理
</el-dropdown-item>
</router-link>
</app-link>
<el-dropdown-item divided @click.native="logout">
<svg-icon icon-class="tuichudenglu"></svg-icon>退出登录
</el-dropdown-item>
@ -49,6 +50,10 @@ import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Icon from '@/components/Icon/Icon.vue'
import AppLink from './Sidebar/Link'
import store from "@/store"
import {isExternal} from "@/utils/validate";
import path from "path";
export default {
data() {
@ -62,14 +67,31 @@ export default {
components: {
Icon,
Breadcrumb,
Hamburger
Hamburger,
AppLink
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'showName'
])
]),
routes() {
let routes = {}
let topRouters = []
let rightTopRoutes = []
this.$router.options.routes.forEach(route => {
if(route.menuType === 3){
topRouters.push(route)
}
if(route.menuType === 4){
rightTopRoutes.push(route)
}
})
routes.topRouters = topRouters
routes.rightTopRoutes = rightTopRoutes
return routes
},
},
mounted() {
this.isShow = this.$pc;
@ -83,6 +105,15 @@ export default {
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
},
resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
return path.resolve(this.basePath, routePath)
}
}
}

6
src/layout/components/Sidebar/index.vue
View File

@ -32,15 +32,15 @@ export default {
]),
routes() {
let routes = []
if(this.$route.path.startsWith("/setting")){
if(this.$route.meta.menuType === 0){
this.$router.options.routes.forEach(route => {
if(route.path.startsWith("/setting")){
if(route.menuType === 0){
routes.push(route)
}
})
} else {
this.$router.options.routes.forEach(route => {
if(!route.path.startsWith("/setting")){
if(route.menuType === 2){
routes.push(route)
}
})

2
src/permission.js
View File

@ -84,7 +84,7 @@ function setMenuList(next, to){
function findPath(menuList, to, parentPath){
for( let i = 0; i < menuList.length; i++) {
const menu = menuList[i]
if(menu.menuType > 0){
if(menu.menuType === 1){
continue
}
if(menu.children && menu.children.length > 0){

16
src/store/modules/user.js
View File

@ -134,12 +134,14 @@ const actions = {
}
function getMenuTree(menuList) {
menuList = menuList.filter(menu => menu.menuType === 0)
menuList = menuList.filter(menu => menu.menuType !== 1)
return menuList.map(menu => {
let router = {}
if(menu.children && menu.children.length){
router.meta = {title: menu.name, icon: menu.icon}
router.meta = {title: menu.name, icon: menu.icon, menuType: menu.menuType}
router.hidden = menu.hide
router.children = findChildren(menu.children)
router.menuType = menu.menuType
}
if(menu.component && menu.component.length > 0) {
router.children = [
@ -147,25 +149,29 @@ function getMenuTree(menuList) {
path: '',
name: menu.name,
component: loadView(menu.component),
meta: {title: menu.name, icon: menu.icon}
meta: {title: menu.name, icon: menu.icon, menuType: menu.menuType},
hidden: menu.hide
}
]
}
router.path = menu.path
router.component = Layout
router.menuType = menu.menuType
return router
})
}
function findChildren(childrenMenu){
let children = []
childrenMenu = childrenMenu.filter(menu => menu.menuType === 0)
childrenMenu = childrenMenu.filter(menu => menu.menuType !== 1)
childrenMenu.forEach(menu => {
let router = {
path: menu.path,
name: menu.name,
component: !menu.component || menu.component.length === 0 ? ParentView : loadView(menu.component),
meta: {title: menu.name, icon: menu.icon}
meta: {title: menu.name, icon: menu.icon, menuType: menu.menuType},
hidden: menu.hide,
menuType: menu.menuType
}
if(menu.children && menu.children.length){
if(!menu.component || menu.component.length === 0){

5
src/styles/setting.scss
View File

@ -71,7 +71,7 @@ a:hover {
float: right;
margin-top: -32px;
}
/deep/ .el-collapse-item__content {
/deep/ .el-collapse-item__content, /deep/.el-tab-pane {
background-color: #fafafa;
padding: 0 30px 20px;
}
@ -171,6 +171,9 @@ a:hover {
.text-align-right {
text-align: right;
}
.input-none-width {
width: unset;
}
@media screen and (max-width: 768px) {
.query-item {
margin-bottom: 10px;

6
src/views/markdown/index.vue
View File

@ -172,7 +172,6 @@
activeNames: ['1'],
file: {},
editStatus: false,
html:'', // 及时转的html
filename: '',
clientHeight: document.documentElement.clientHeight - 150,
updating: false,
@ -355,11 +354,6 @@
upload: this.markdownImageUplaod()
})
},
// 所有操作都会被解析重新渲染
change(value, render){
// render 为 markdown 解析后的结果[html]
this.html = render;
},
markdownImageUplaod(){
return {
accept: 'image/*,.mp3, .wav, .rar',

2
src/views/setting/articles/articleManager.vue
View File

@ -249,7 +249,7 @@ export default {
},
methods: {
setMaxHeight(){
this.tableMaxHeight = document.documentElement.clientHeight - 285
this.tableMaxHeight = document.documentElement.clientHeight - 265
},
//行拖拽
rowDrop() {

43
src/views/setting/articles/blogManager.vue
View File

@ -9,8 +9,9 @@
</div>
</div>
</a-affix>
<el-collapse v-model="activeNames">
<el-collapse-item title="网站首页背景" name="1">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="网站首页背景" name="1">
<div class="config-itme-label">站点背景大图：
</div>
<upload-image-input v-model="form.backgroundSite"/>
@ -21,8 +22,8 @@
<div class="config-itme-label">首页大图内描述：</div>
<el-input autosize type="textarea" v-model="form.backgroundDescSite"></el-input>
<span class="instruction">显示在博客首页大图内的描述。</span>
</el-collapse-item>
<el-collapse-item title="导航栏" name="2">
</el-tab-pane>
<el-tab-pane label="导航栏" name="2">
<div class="config-itme-label">导航栏顶部 - 网站 Logo / 站点名称：</div>
<el-input autosize type="textarea" width="100%" v-model="form.siteName"></el-input>
<span class="instruction">配置网站的 Logo，该选项仅作用于顶部导航条</span>
@ -47,10 +48,8 @@
</li>
</ul>
</div>
</el-collapse-item>
<el-collapse-item title="归档、分类、标签" name="3">
</el-tab-pane>
<el-tab-pane label="归档、分类、标签" name="3">
<div class="config-itme-label">页面显示与否：</div>
<el-checkbox-group v-model="form.alonePages">
<el-checkbox label="archives">归档</el-checkbox>
@ -68,14 +67,14 @@
<div class="config-itme-label">标签界面背景大图：</div>
<upload-image-input v-model="form.tagBackground"/>
<span class="instruction">在这里填入图片的URL地址, 以在分类页面显示一个背景大图。</span>
</el-collapse-item>
<el-collapse-item title="网站页脚" name="4">
</el-tab-pane>
<el-tab-pane label="网站页脚" name="4">
<div class="config-itme-label">版权信息：</div>
<el-input autosize type="textarea" width="100%" v-model="form.copyright"></el-input>
<div class="config-itme-label">备案许可号：</div>
<el-input autosize type="textarea" width="100%" v-model="form.recordPermissionNum"></el-input>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
@ -93,7 +92,7 @@ export default {
},
data() {
return {
activeNames: ['1'],
activeName: '1',
example: '<i class="fab fa-github">github</i>',
form: {
backgroundSite: '',
@ -114,8 +113,14 @@ export default {
computed: {},
mounted() {
this.getSetting()
if(this.$route.query.tab){
this.activeName = this.$route.query.tab
}
},
methods: {
handleClick(tab, event) {
this.$router.push({query: {tab: tab.name}})
},
preview(){
this.operatingButtons = []
if(this.form.operatingButtons) {
@ -213,5 +218,15 @@ export default {
color: #fff;
}
}
/deep/ .el-tabs__header {
margin: 0;
@media screen and (min-width: 768px) {
.el-tabs__nav {
padding: 0 20px;
}
.el-tabs__active-bar {
left: 20px;
}
}
}
</style>

4
src/views/setting/articles/tagManager.vue
View File

@ -257,9 +257,9 @@ export default {
/deep/ .el-checkbox.is-bordered {
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
color: #646568;
font-weight: 400;
padding: 5px 5px 5px 10px;
padding: 6px 5px 5px 10px;
}
/deep/ .el-checkbox.is-bordered.is-checked {
background-color: #ecf5ff;

8
src/views/setting/cloudManager.vue
View File

@ -9,10 +9,6 @@
</div>
</div>
<div>
<div class="config-itme-label">网盘同步：
<el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-refresh"></i></el-button>
</div>
<span class="instruction">一般用于初始化操作, 将文件数据同步到数据库</span>
<div class="config-itme-label">启用webp：
<el-switch
v-model="webpEnabled"
@ -26,6 +22,10 @@
将图片转换为webp格式存储，在不降低图片质量的情况下，极大降低图片文件的体积，建议开启.
<a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
</span>
<div class="config-itme-label">网盘同步：
<el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-refresh"></i></el-button>
</div>
<span class="instruction">一般用于初始化操作, 将文件数据同步到数据库</span>
</div>
</el-card>
</div>

8
src/views/setting/sys/cusomerInfo.vue
View File

@ -29,7 +29,7 @@
<el-button size="small" :loading="userUpdateLoading" type="primary" @click="onSavePassword">确 定</el-button>
</div>
</el-dialog>
<el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="120px">
<el-form ref="cusomerInfoForm" :model="cusomerInfoForm" label-width="80px">
<el-form-item label="头像" class="form-item-avatar">
<div style="height: 100px; width: 100px;">
<el-avatar icon="el-icon-user-solid" class="avatar-value" shape="circle" :size="100" fit="fit" :src="srcImage" ></el-avatar>
@ -44,13 +44,13 @@
<el-button size="mini" round @click="changePassword">修改密码</el-button>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="cusomerInfoForm.showName" />
<el-input v-model="cusomerInfoForm.showName" class="input-none-width"/>
</el-form-item>
<el-form-item label="标语">
<el-input class="form-slogan" v-model="cusomerInfoForm.slogan" />
</el-form-item>
<el-form-item label="个人简介">
<el-input type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
<el-input class="form-slogan" type="textarea" v-model="cusomerInfoForm.introduction"></el-input>
</el-form-item>
<el-form-item v-show="percentage > 0" label="使用情况">
<el-progress class="quota-space" :percentage="percentage" :format="progressFormat" :color="customColors"></el-progress>
@ -262,6 +262,8 @@
}
}
}
data.delete("createTime")
data.delete("updateTime")
return data
},
// 保存头像

34
src/views/setting/sys/menuManager.vue
View File

@ -47,13 +47,20 @@
<el-form-item label="排序号:" prop="sortNumber">
<el-input-number v-model="form.sortNumber" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="是否隐藏:" prop="hide">
<el-radio v-model="form.hide" :label="false">显示</el-radio>
<el-radio v-model="form.hide" :label="true">隐藏</el-radio>
</el-form-item>
<el-form-item label="菜单类型:" prop="menuType">
<el-radio v-model="form.menuType" :label="0">菜单</el-radio>
<el-radio v-model="form.menuType" :label="1">按钮</el-radio>
</el-form-item>
<el-form-item label="是否隐藏:" prop="hide">
<el-radio v-model="form.hide" :label="false">显示</el-radio>
<el-radio v-model="form.hide" :label="true">影藏</el-radio>
<el-form-item v-if="form.menuType !== 1" label="菜单位置:" prop="menuType">
<el-radio-group v-model="form.menuType" size="mini">
<el-radio-button :label="2">设置</el-radio-button>
<el-radio-button :label="3">顶部</el-radio-button>
<el-radio-button :label="4">右上</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
@ -131,7 +138,7 @@ export default {
dialogTitle: '',
updateLoading: false,
valid: true,
isExpand: true,
isExpand: false,
form: {
name: '',
parentId: '',
@ -173,16 +180,23 @@ export default {
}
}
},
{prop: 'menuType', label: '类型', width: 75, tag: true,
{prop: 'menuType', label: '类型', width: 100, tag: true,
formatData: (menuType)=> {
if(menuType === 0){
return ['菜单']
}else{
return ['按钮']
switch (menuType) {
case 0:
return ['首页菜单']
case 1:
return ['按钮']
case 2:
return ['设置菜单']
case 3:
return ['顶部菜单']
case 4:
return ['右上角菜单']
}
}
},
{prop: 'createTime', label: '创建时间'},
// {prop: 'createTime', label: '创建时间'},
{label: '操作', minWidth: this.$pc ? 0 : 130, active: [
{name: '修改', icon: 'el-icon-edit', handle: (row) => this.handleEdit(row.id)},
{name: '删除', icon: 'el-icon-delete', color: '#ff4d4f', handle: (row) => this.handleDelete([row.id])},

8
src/views/setting/sys/roleManager.vue
View File

@ -51,12 +51,12 @@
<el-input clearable placeholder="请输入" v-model="queryCondition.code" />
</el-form-item>
</el-col>
<el-col :sm="12" :md="6">
<el-form-item label="备注:">
<el-col :sm="12" :md="5" :xl="6">
<el-form-item label="备注:" label-width="50px">
<el-input clearable placeholder="请输入" v-model="queryCondition.remarks" />
</el-form-item>
</el-col>
<el-col :sm="12" :md="6">
<el-col :sm="12" :md="7" :xl="6">
<div class="el-form-actions">
<el-button class="card-btn-icon" size="medium" icon="el-icon-search" type="primary" @click="getRoleList()">查询</el-button>
<el-button class="card-btn-icon" size="medium" icon="el-icon-plus" type="primary" @click="add()">添加</el-button>
@ -68,7 +68,7 @@
</div>
</div>
<table-list
:less-client-height="290"
:less-client-height="280"
:tableData="dataList"
:loading="loading"
:tableHeader="tableHeader"