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-16 22:51:38 +08:00
parent eb2eb04fe8
commit ef38ad3565
14 changed files with 119 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ShowFile/SelectFile.vue
View File

@ -95,4 +95,9 @@ export default {
background: linear-gradient(rgba(255,255,255,0), #fff);
}
}
@media screen and (max-width: 768px) {
/deep/ .el-dialog {
width: 100% !important;
}
}
</style>

3
src/components/ShowFile/ShowFile.vue
View File

@ -1067,6 +1067,9 @@ export default {
this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 5) : Math.round(clientWidth / 100 - 4)
} else {
this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 3) : Math.round(clientWidth / 100 - 2)
if(clientWidth < 768){
this.gridColumnNum = 2
}
}
if(clientWidth < 900){
this.showUpdateDateItem = false

33
src/components/table/TableList.vue
View File

@ -2,6 +2,7 @@
<template>
<div class="table-temp">
<el-table
ref="tableData"
:data="tableData"
:max-height="tableMaxHeight"
row-key="id"
@ -9,7 +10,7 @@
size="medium"
fit
highlight-current-row
default-expand-all
:default-expand-all="isExpand"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
v-loading="loading"
@selection-change="handleSelectionChange"
@ -27,7 +28,7 @@
:label="item.label"
:fixed="item.fixed"
:width="item.width"
:min-widitem="item.minWidth"
:min-width="item.minWidth"
:align="item.align || 'center'"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
@ -103,6 +104,10 @@ export default {
type: Boolean,
default: true
},
isExpand: {
type: Boolean,
default: true
},
pagination: {
type: Object,
default: {
@ -120,7 +125,7 @@ export default {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
}
},
};
},
mounted() {
@ -159,6 +164,22 @@ export default {
//调用父组件方法
this.$emit('sortChange', { backData: column });
},
// 是否展开table(展开与折叠切换)
handleExpand() {
this.$nextTick(() => {
this.forArr(this.tableData, this.isExpand)
})
},
// 遍历
forArr(arr, isExpand) {
arr.forEach(i => {
// toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
this.$refs.tableData.toggleRowExpansion(i, isExpand)
if (i.children) {
this.forArr(i.children, isExpand)
}
})
},
}
}
</script>
@ -187,6 +208,12 @@ export default {
.el-button {
padding: 0;
}
.el-table__body-wrapper{
//&::-webkit-scrollbar {
// width: 10px;
// height: 10px;
//}
}
}
/deep/.el-pagination {
margin-top: 15px;

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

@ -4,16 +4,16 @@
<breadcrumb class="breadcrumb-container" />
<div class="right-content">
<router-link to="/setting/website/manager-blog">
<div class="right-content-button">
<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 target="_blank" to="/articles">
<div class="right-content-button">
</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>
</div>
</router-link>
<div class="right-username">{{showName}}</div>
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
@ -53,6 +53,7 @@ import Icon from '@/components/Icon/Icon.vue'
export default {
data() {
return {
isShow: true,
activeIndex: '1',
imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
defaultAvatar: require('../../assets/img/default-avatar.png')
@ -70,6 +71,9 @@ export default {
'showName'
])
},
mounted() {
this.isShow = this.$pc;
},
methods: {
handleSelect(key, keyPath) {
},
@ -119,7 +123,7 @@ export default {
.right-username {
line-height: 50px;
margin-right: 10px;
margin: 0 10px;
}
}
@ -194,7 +198,6 @@ export default {
.right-content-button {
line-height: 50px;
margin-right: 10px;
padding: 0 10px;
&:hover {
background-color: #00000006;

4
src/layout/index.vue
View File

@ -67,8 +67,8 @@ export default {
if(!ws.isConnected){
toConnection(this.$store.state.user.name,this.$store.state.user.token);
}
if(this.$route.path.startsWith('/articles')){
this.isShow = false
if(this.$route.path.startsWith('/setting')){
this.isShow = true
}
}else{
this.isShow = false

8
src/styles/home-index.scss
View File

@ -385,3 +385,11 @@
padding: 10px;
}
}
@media screen and (max-width: 768px) {
.dashboard-container {
min-width: 100px !important;
}
.info-statistics {
width: 100% !important;
}
}

14
src/styles/index.scss
View File

@ -13,11 +13,11 @@ body {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;;
}
/deep/::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
height: 10px;
}
///deep/::-webkit-scrollbar {
// /*滚动条整体样式*/
// width: 10px;
// height: 10px;
//}
/deep/::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
height: 30px;
@ -107,9 +107,6 @@ div:focus {
padding: 4px 3px 15px 15px;
}
.al-icon-picker-popper {
.popper__arrow {
left: 35px!important;
}
.el-card {
margin: 10px 12px 0 0;
}
@ -162,6 +159,7 @@ div:focus {
.al-file-sort-item {
.al-file-sort-item-icon {
font-weight: 600;
margin-right: 0;
}
}
.al-file-sort-item.active {

16
src/styles/setting.scss
View File

@ -18,7 +18,6 @@ a:hover {
/deep/.box-card {
margin: 0 auto;
max-width: 1240px;
min-width: 640px;
.clearfix {
font-size: 16px;
font-weight: 600;
@ -180,5 +179,20 @@ a:hover {
.search-form .el-form-actions {
text-align: right;
}
/deep/ .el-dialog {
margin-top: 10vh!important;
}
.dialog-avatar {
/deep/.el-dialog {
min-width: 100px;
width: 100%;
.container {
display: block;
.img-container {
width: unset;
}
}
}
}
}

8
src/utils/iconfont-find.js
View File

@ -1,9 +1,9 @@
// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
console.log(iconNames.slice(0,80))
console.log(iconNames.slice(80,130))
// const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
// const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
// console.log(iconNames.slice(0,80))
// console.log(iconNames.slice(80,130))
export const icon = {
list: ["emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui", "maren", "zhutou", "qie", "youling",

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

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

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

@ -322,5 +322,16 @@
padding: 30px 12px;
}
}
.el-button+.el-button {
margin-left: 0;
}
}
@media screen and (max-width: 768px) {
/deep/ .el-divider--vertical {
display: none;
}
.avatar-preview {
display: none;
}
}
</style>

9
src/views/setting/sys/cusomerManager.vue
View File

@ -135,9 +135,9 @@ export default {
sortOrder: ''
},
tableHeader: [
{prop: 'username',label: '用户账号',sortable: 'custom'},
{prop: 'showName',label: '用户名',sortable: 'custom'},
{prop: 'roles',label: '角色', tag: true,
{prop: 'username', minWidth: 110, label: '用户账号',sortable: 'custom'},
{prop: 'showName', minWidth: 100, label: '用户名',sortable: 'custom'},
{prop: 'roles', minWidth: 120, label: '角色', tag: true,
formatData: (roles)=> {
if(roles){
let tagNames = this.roleList.map(role => {
@ -152,7 +152,7 @@ export default {
},
{prop: 'quota',label: '配额(G)',sortable: 'custom'},
{prop: 'createTime',label: '创建时间',sortable: 'custom'},
{label: '操作',active: [
{label: '操作', minWidth: 130, active: [
{name: '修改', icon: 'el-icon-edit', handle: (row) => this.handleEdit(row.id,row.username)},
{name: '删除', icon: 'el-icon-delete', color: '#ff4d4f', handle: (row) => this.handleDelete([row.id])},
],
@ -188,7 +188,6 @@ export default {
resize(){
let clientWidth = document.querySelector(".container").clientWidth
const monbile = clientWidth <= 768;
this.tableHeader[2].disabled = monbile
this.tableHeader[3].disabled = monbile
this.tableHeader[4].disabled = monbile
},

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

@ -17,9 +17,6 @@
<el-form-item label="菜单名称:" prop="name">
<el-input placeholder="请输入菜单名称" v-model="form.name" />
</el-form-item>
<!-- <el-form-item label="菜单图标:" prop="icon">-->
<!-- <el-input placeholder="请输入菜单图标" v-model="form.icon" />-->
<!-- </el-form-item>-->
<el-form-item label="菜单图标:" prop="icon">
<icon-select v-model="form.icon"></icon-select>
</el-form-item>
@ -85,6 +82,7 @@
<div class="el-form-actions">
<el-button class="card-btn-icon" size="medium" icon="el-icon-search" type="primary" @click="getMenuTree()">查询</el-button>
<el-button class="card-btn-icon" size="medium" icon="el-icon-plus" type="primary" @click="add()">添加</el-button>
<el-button class="card-btn-icon" size="medium" :icon="isExpand ? 'el-icon-remove-outline': 'el-icon-circle-plus-outline'" type="primary" @click="handleExpand()">{{isExpand ? "折叠" : "展开"}}</el-button>
</div>
</el-col>
</el-row>
@ -92,12 +90,14 @@
</div>
</div>
<table-list
ref="tableMenu"
:has-selection="false"
:tableData="dataList"
:less-client-height="210"
:loading="loading"
:tableHeader="tableHeader"
:pagination="pagination"
:is-expand.sync="isExpand"
@pageChange="pageChange"
@selectFun="selectFun"
@sortChange="sortChange"
@ -131,6 +131,7 @@ export default {
dialogTitle: '',
updateLoading: false,
valid: true,
isExpand: true,
form: {
name: '',
parentId: '',
@ -182,7 +183,7 @@ export default {
}
},
{prop: 'createTime', label: '创建时间'},
{label: '操作',active: [
{label: '操作', minWidth: 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])},
],
@ -253,6 +254,11 @@ export default {
this.$refs.managerForm.resetFields()
this.$refs.selectTree.clearHandle()
},
// 展开与折叠table
handleExpand() {
this.isExpand = !this.isExpand
this.$refs.tableMenu.handleExpand()
},
// 设置formData
setFormData() {
let data = new FormData();

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

@ -127,11 +127,11 @@ export default {
sortOrder: ''
},
tableHeader: [
{prop: 'name',label: '角色名称',sortable: 'custom'},
{prop: 'code',label: '角色标识',sortable: 'custom'},
{prop: 'remarks',label: '备注',sortable: 'custom'},
{prop: 'name',label: '角色名称', minWidth: 110, sortable: 'custom'},
{prop: 'code',label: '角色标识', minWidth: 110, sortable: 'custom'},
{prop: 'remarks',label: '备注', minWidth: 110, sortable: 'custom'},
{prop: 'createTime',label: '创建时间',sortable: 'custom'},
{label: '操作',active: [
{label: '操作', minWidth: 160, active: [
{name: '修改', icon: 'el-icon-edit', handle: (row) => this.handleEdit(row.id)},
{name: '分配权限', icon: 'el-icon-finished', handle: (row) => this.authorization(row.id)},
],