修改：修改网站样式
This commit is contained in:
jmal
parent
85ded1cdbf
commit
8a47f2cdb6
@ -51,6 +51,7 @@
|
|||||||
"v-contextmenu": "^2.9.0",
|
"v-contextmenu": "^2.9.0",
|
||||||
"v-viewer": "^1.5.1",
|
"v-viewer": "^1.5.1",
|
||||||
"vant": "2.5.0",
|
"vant": "2.5.0",
|
||||||
|
"vditor": "^3.6.1",
|
||||||
"viewerjs": "^1.5.0",
|
"viewerjs": "^1.5.0",
|
||||||
"vonic": "^1.1.3",
|
"vonic": "^1.1.3",
|
||||||
"vue": "2.6.10",
|
"vue": "2.6.10",
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
<el-dialog
|
<el-dialog
|
||||||
:title="selectTreeNode.showName"
|
:title="selectTreeNode.showName"
|
||||||
:visible.sync="visible"
|
:visible.sync="visible"
|
||||||
|
:append-to-body="appendToBody"
|
||||||
@close="clearTreeNode"
|
@close="clearTreeNode"
|
||||||
>
|
>
|
||||||
<el-tree
|
<el-tree
|
||||||
@ -38,6 +39,10 @@ import api from "@/api/file-api";
|
|||||||
export default {
|
export default {
|
||||||
name: "DirTree",
|
name: "DirTree",
|
||||||
props: {
|
props: {
|
||||||
|
appendToBody: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
currentDir: {
|
currentDir: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '/'
|
default: '/'
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
import { Icon } from 'ant-design-vue'
|
import { Icon } from 'ant-design-vue'
|
||||||
const IconFont = Icon.createFromIconfontCN({
|
const IconFont = Icon.createFromIconfontCN({
|
||||||
scriptUrl: '//at.alicdn.com/t/font_2024484_acokdskxqbj.js'
|
scriptUrl: '//at.alicdn.com/t/font_2024484_3royfgdezl.js'
|
||||||
})
|
})
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@ -5,47 +5,22 @@
|
|||||||
|
|
||||||
<div class="right-content">
|
<div class="right-content">
|
||||||
|
|
||||||
<!-- <div>-->
|
|
||||||
<!-- <el-menu class="el-menu-demo" mode="horizontal">-->
|
|
||||||
<!-- <el-menu-item index="1" href="/setting/manager-categories">-->
|
|
||||||
<!-- <router-link to="/setting/manager-cloud">-->
|
|
||||||
<!-- 网盘管理-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </el-menu-item>-->
|
|
||||||
<!-- <el-submenu index="2">-->
|
|
||||||
<!-- <template slot="title">管理</template>-->
|
|
||||||
<!-- <el-menu-item index="2-0">-->
|
|
||||||
<!-- <router-link to="/setting/manager-blog">-->
|
|
||||||
<!-- <svg-icon icon-class="blogger"></svg-icon>-->
|
|
||||||
<!-- 博客管理-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </el-menu-item>-->
|
|
||||||
<!-- <el-menu-item index="2-1">-->
|
|
||||||
<!-- <router-link to="/setting/manager-categories">-->
|
|
||||||
<!-- <svg-icon icon-class="leimupinleifenleileibie"></svg-icon>-->
|
|
||||||
<!-- 分类管理-->
|
|
||||||
<!-- </router-link>-->
|
|
||||||
<!-- </el-menu-item>-->
|
|
||||||
<!-- <el-menu-item index="2-2">-->
|
|
||||||
<!-- <svg-icon icon-class="biaoqian"></svg-icon>-->
|
|
||||||
<!-- 标签管理-->
|
|
||||||
<!-- </el-menu-item>-->
|
|
||||||
<!-- </el-submenu>-->
|
|
||||||
<!-- </el-menu>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
|
|
||||||
<div class="right-username">{{username}}</div>
|
<div class="right-username">{{username}}</div>
|
||||||
<div class="right-menu">
|
<div class="right-menu">
|
||||||
<el-dropdown class="avatar-container" trigger="click">
|
<el-dropdown class="avatar-container" trigger="click">
|
||||||
<div class="avatar-wrapper">
|
<div class="avatar-wrapper">
|
||||||
<!--<img :src="avatar" class="user-avatar">-->
|
|
||||||
<el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
|
<el-avatar :src="imageUrl+avatar" icon="el-icon-user-solid"></el-avatar>
|
||||||
<i class="el-icon-caret-bottom" />
|
<i class="el-icon-caret-bottom" />
|
||||||
</div>
|
</div>
|
||||||
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
||||||
<router-link to="/setting/user">
|
<router-link to="/setting/user">
|
||||||
<el-dropdown-item>
|
<el-dropdown-item>
|
||||||
<i class="el-icon-setting" />设置
|
<svg-icon icon-class="shezhi"></svg-icon>基本设置
|
||||||
|
</el-dropdown-item>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/setting/website/manager-blog">
|
||||||
|
<el-dropdown-item>
|
||||||
|
<svg-icon icon-class="wangzhan"></svg-icon>网站管理
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</router-link>
|
</router-link>
|
||||||
<!--<router-link to="/">-->
|
<!--<router-link to="/">-->
|
||||||
@ -57,7 +32,7 @@
|
|||||||
<!--<el-dropdown-item>Github</el-dropdown-item>-->
|
<!--<el-dropdown-item>Github</el-dropdown-item>-->
|
||||||
<!--</a>-->
|
<!--</a>-->
|
||||||
<el-dropdown-item divided @click.native="logout">
|
<el-dropdown-item divided @click.native="logout">
|
||||||
<span style="display:block;">退出登录</span>
|
<svg-icon icon-class="tuichudenglu"></svg-icon>退出登录
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
@ -151,7 +126,6 @@ export default {
|
|||||||
.right-menu {
|
.right-menu {
|
||||||
float: right;
|
float: right;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 50px;
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -177,7 +151,7 @@ export default {
|
|||||||
|
|
||||||
.avatar-container {
|
.avatar-container {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
|
cursor: pointer;
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -190,7 +164,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-icon-caret-bottom {
|
.el-icon-caret-bottom {
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -20px;
|
right: -20px;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
@ -198,8 +171,14 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.avatar-container:hover {
|
||||||
|
background-color: #00000006;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/deep/ .user-dropdown {
|
||||||
|
top: 50px;
|
||||||
|
}
|
||||||
/deep/ .el-menu--horizontal {
|
/deep/ .el-menu--horizontal {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
@ -211,4 +190,7 @@ export default {
|
|||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-dropdown-menu__item svg {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -6,6 +6,9 @@
|
|||||||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
|
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</app-link>
|
</app-link>
|
||||||
|
<el-menu-item v-if="onlyOneChild.path === '/setting/manager-users'">
|
||||||
|
<item title="sdf"/>
|
||||||
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
||||||
|
|||||||
@ -151,21 +151,6 @@ export const constantRoutes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
// {
|
|
||||||
// path: '/setting/user',
|
|
||||||
// component: Layout,
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// path: '',
|
|
||||||
// name: 'setting-user',
|
|
||||||
// component: () => import('@/views/setting/user/index'),
|
|
||||||
// meta: { title: '设置' },
|
|
||||||
// hidden: true
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
|
|
||||||
// {
|
// {
|
||||||
// path: '/demo',
|
// path: '/demo',
|
||||||
// component: Layout,
|
// component: Layout,
|
||||||
@ -182,6 +167,7 @@ export const constantRoutes = [
|
|||||||
{
|
{
|
||||||
path: '/markdown',
|
path: '/markdown',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'editor',
|
path: 'editor',
|
||||||
@ -201,7 +187,7 @@ export const constantRoutes = [
|
|||||||
name: 'article',
|
name: 'article',
|
||||||
component: () => import('@/views/public/article/index'),
|
component: () => import('@/views/public/article/index'),
|
||||||
hidden: true,
|
hidden: true,
|
||||||
meta: { keepAlive: true }
|
meta: { keepAlive: false }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -211,7 +197,7 @@ export const constantRoutes = [
|
|||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: `${document.location.protocol}//${window.location.host}/articles`,
|
path: `${document.location.protocol}//${window.location.host}/articles`,
|
||||||
meta: { title: '关联博客', icon: 'link', keepAlive: true }
|
meta: { title: '关联博客', icon: 'link', keepAlive: false }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -222,35 +208,61 @@ export const constantRoutes = [
|
|||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'setting-user',
|
name: 'setting-user',
|
||||||
component: () => import('@/views/setting/user/index'),
|
component: () => import('@/views/setting/user/tabs/cusomerInfo'),
|
||||||
meta: { title: '个人信息' , icon: 'UserSettings'}
|
meta: { title: '个人信息' , icon: 'UserSettings'}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/setting/manager-categories',
|
path: '/setting/manager-users',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'manager-categories',
|
name: 'manager-users',
|
||||||
component: () => import('@/views/setting/articles/categoryManager'),
|
component: () => import('@/views/setting/user/tabs/cusomerManager'),
|
||||||
meta: { title: '分类管理', icon: 'leimupinleifenleileibie' }
|
meta: { title: '用户管理' , icon: 'huaban'}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/setting/manager-blog',
|
path: '/setting/website',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
name: 'website',
|
||||||
|
meta: { title: '网站管理', icon: 'wangzhan'},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: 'manager-articles',
|
||||||
|
name: 'manager-articles',
|
||||||
|
component: () => import('@/views/setting/articles/articleManager'),
|
||||||
|
meta: { title: '文章管理' , icon: 'guanlizhuanjiawenzhang'}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'manager-blog',
|
||||||
name: 'manager-blog',
|
name: 'manager-blog',
|
||||||
component: () => import('@/views/setting/articles/blogManager'),
|
component: () => import('@/views/setting/articles/blogManager'),
|
||||||
meta: { title: '博客管理' , icon: 'blogger'}
|
meta: { title: '外观设置' , icon: 'pifu'}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'manager-categories',
|
||||||
|
name: 'manager-categories',
|
||||||
|
component: () => import('@/views/setting/articles/categoryManager'),
|
||||||
|
meta: { title: '分类管理', icon: 'fenlei' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: '/setting/manager-categories',
|
||||||
|
// component: Layout,
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: '',
|
||||||
|
// name: 'manager-categories',
|
||||||
|
// component: () => import('@/views/setting/articles/categoryManager'),
|
||||||
|
// meta: { title: '分类管理', icon: 'leimupinleifenleileibie' }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
path: '/setting/manager-cloud',
|
path: '/setting/manager-cloud',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
@ -266,12 +278,13 @@ export const constantRoutes = [
|
|||||||
{
|
{
|
||||||
path: '/articles',
|
path: '/articles',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'articles',
|
name: 'articles',
|
||||||
component: () => import('@/views/public/articles/index'),
|
component: () => import('@/views/public/articles/index'),
|
||||||
meta: { title: '文档列表', icon: 'md-list', keepAlive: true }
|
meta: { title: '文档列表', icon: 'md-list', keepAlive: false }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -212,16 +212,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.animateIn {
|
.animateIn {
|
||||||
transform: translateY(0px);
|
//-webkit-transform: translateY(0px);
|
||||||
|
//transform: translateY(0px);
|
||||||
}
|
}
|
||||||
.animateOut {
|
.animateOut {
|
||||||
|
-webkit-transform: translateY(-100%);
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.animateLeft {
|
.animateLeft {
|
||||||
|
-webkit-transform: translateX(-10rem);
|
||||||
transform: translateX(-10rem);
|
transform: translateX(-10rem);
|
||||||
}
|
}
|
||||||
.animateRight {
|
.animateRight {
|
||||||
|
-webkit-transform: translateX(0rem);
|
||||||
transform: translateX(0rem);
|
transform: translateX(0rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -567,6 +571,13 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.article-body {
|
||||||
|
padding: 20px 35px;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
/deep/ .markdown-body {
|
/deep/ .markdown-body {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
blockquote {
|
blockquote {
|
||||||
|
|||||||
@ -75,25 +75,24 @@
|
|||||||
margin: 2px 5px 2px 5px;
|
margin: 2px 5px 2px 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item.is-active {
|
.el-menu-item.is-active {
|
||||||
color: #409EFF;
|
color: #409EFF;
|
||||||
background-color: #d9d9d9 !important;
|
background-color: $menuHover !important;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin: 2px 5px 2px 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-active>.el-submenu__title {
|
.is-active>.el-submenu__title {
|
||||||
color: $subMenuActiveText !important;
|
//color: $subMenuActiveText !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .nest-menu .el-submenu>.el-submenu__title,
|
& .nest-menu .el-submenu>.el-submenu__title,
|
||||||
& .el-submenu .el-menu-item {
|
& .el-submenu .el-menu-item {
|
||||||
min-width: $sideBarWidth !important;
|
margin: 2px 5px;
|
||||||
background-color: $subMenuBg !important;
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $subMenuHover !important;
|
background-color: $subMenuHover !important;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,8 +6,8 @@ $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
|
|||||||
$menuBg:#f5f5f5;
|
$menuBg:#f5f5f5;
|
||||||
$menuHover:#d9d9d9;
|
$menuHover:#d9d9d9;
|
||||||
|
|
||||||
$subMenuBg:#1f2d3d;
|
$subMenuBg:#f5f5f5;
|
||||||
$subMenuHover:#001528;
|
$subMenuHover:#d9d9d9;
|
||||||
|
|
||||||
$sideBarWidth: 210px;
|
$sideBarWidth: 210px;
|
||||||
|
|
||||||
|
|||||||
@ -1,37 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-wechat-title="'编辑'+filename">
|
<div v-wechat-title="'编辑'+filename">
|
||||||
<dir-tree ref="dirTree">
|
<dir-tree ref="dirTree" :append-to-body='true'>
|
||||||
<el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
|
<el-button slot="footer" size="small" type="primary" @click="confirmSelectDir">确 定</el-button>
|
||||||
</dir-tree>
|
</dir-tree>
|
||||||
<el-header>
|
<el-header>
|
||||||
<div class="header-item">
|
<div class="header-item">
|
||||||
文章标题：
|
文章标题：
|
||||||
<el-input class="articles-title" placeholder="文章标题" v-model="filename"/>
|
<el-input class="articles-title" placeholder="文章标题" v-model="filename" size="small"/>
|
||||||
<el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" v-model="storageLocation" :readonly="true" @click="selectDir">
|
<el-input v-if="!editStatus" class="articles-storage" placeholder="存储位置" size="small" v-model="storageLocation" :readonly="true" @focus="selectDir">
|
||||||
<el-button slot="prepend" @click="selectDir">选择位置</el-button>
|
<el-button slot="prepend" size="small" @click="selectDir">保存位置</el-button>
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-button type="primary" @click="moreSetting = true">更多设置</el-button>
|
<el-button type="primary" @click="moreSetting = true" size="small">更多设置</el-button>
|
||||||
<el-button v-if="!editStatus" class="release-button" type="primary" @click="add" :loading="adding">发布文章</el-button>
|
<el-button v-if="!editStatus" class="release-button" type="primary" size="small" @click="add" :loading="adding">发布文章</el-button>
|
||||||
<el-button v-if="editStatus" class="release-button" type="primary" @click="update" :loading="updating">更新文章</el-button>
|
<el-button v-if="editStatus" class="release-button" type="primary" size="small" @click="update" :loading="updating">更新文章</el-button>
|
||||||
|
<el-button v-if="!editStatus" class="release-button" type="warning" size="small" @click="add" :loading="adding">保存草稿</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main>
|
<el-main>
|
||||||
<mavon-editor
|
<div id="vditor"></div>
|
||||||
v-model="content"
|
<!-- <mavon-editor-->
|
||||||
ref="md"
|
<!-- v-model="content"-->
|
||||||
@change="change"
|
<!-- ref="md"-->
|
||||||
codeStyle="atelier-dune-dark"
|
<!-- @change="change"-->
|
||||||
:style="{'height': clientHeight+'px'}"
|
<!-- codeStyle="atelier-dune-dark"-->
|
||||||
:imageFilter="imageFilter"
|
<!-- :style="{'height': clientHeight+'px'}"-->
|
||||||
@save="save"
|
<!-- :imageFilter="imageFilter"-->
|
||||||
@imgAdd="$imgAdd"
|
<!-- @save="save"-->
|
||||||
@imgDel="$imgDel"
|
<!-- @imgAdd="$imgAdd"-->
|
||||||
@fullScreen="fullScreen"
|
<!-- @imgDel="$imgDel"-->
|
||||||
/>
|
<!-- @fullScreen="fullScreen"-->
|
||||||
|
<!-- />-->
|
||||||
</el-main>
|
</el-main>
|
||||||
|
|
||||||
<el-drawer
|
<el-drawer
|
||||||
:visible.sync="moreSetting"
|
:visible.sync="moreSetting"
|
||||||
|
:append-to-body='true'
|
||||||
:with-header="false">
|
:with-header="false">
|
||||||
<div class="more-setting">
|
<div class="more-setting">
|
||||||
<h2>更多设置</h2>
|
<h2>更多设置</h2>
|
||||||
@ -52,9 +55,58 @@
|
|||||||
import uploadApi from '@/api/file-api'
|
import uploadApi from '@/api/file-api'
|
||||||
import DirTree from"@/components/FileTree/DirTree"
|
import DirTree from"@/components/FileTree/DirTree"
|
||||||
import fileConfig from '@/utils/file-config'
|
import fileConfig from '@/utils/file-config'
|
||||||
|
|
||||||
|
import Vditor from 'vditor'
|
||||||
|
import "vditor/src/assets/scss/index.scss"
|
||||||
|
|
||||||
|
let toolbar = [
|
||||||
|
'emoji',
|
||||||
|
'headings',
|
||||||
|
'bold',
|
||||||
|
'italic',
|
||||||
|
'strike',
|
||||||
|
'link',
|
||||||
|
'|',
|
||||||
|
'list',
|
||||||
|
'ordered-list',
|
||||||
|
'check',
|
||||||
|
'outdent',
|
||||||
|
'indent',
|
||||||
|
'|',
|
||||||
|
'quote',
|
||||||
|
'line',
|
||||||
|
'code',
|
||||||
|
'inline-code',
|
||||||
|
'insert-before',
|
||||||
|
'insert-after',
|
||||||
|
'|',
|
||||||
|
'upload',
|
||||||
|
'record',
|
||||||
|
'table',
|
||||||
|
'|',
|
||||||
|
'undo',
|
||||||
|
'redo',
|
||||||
|
'|',
|
||||||
|
'edit-mode',
|
||||||
|
'content-theme',
|
||||||
|
'code-theme',
|
||||||
|
'outline',
|
||||||
|
'preview',
|
||||||
|
{
|
||||||
|
name: 'more',
|
||||||
|
toolbar: [
|
||||||
|
'fullscreen',
|
||||||
|
'export',
|
||||||
|
'both',
|
||||||
|
'info',
|
||||||
|
'help',
|
||||||
|
],
|
||||||
|
}]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'MarkdownEditor',
|
||||||
components: {
|
components: {
|
||||||
DirTree
|
DirTree, Vditor
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -62,7 +114,7 @@
|
|||||||
content:"", // 输入的markdown
|
content:"", // 输入的markdown
|
||||||
html:'', // 及时转的html
|
html:'', // 及时转的html
|
||||||
filename: '新建文档',
|
filename: '新建文档',
|
||||||
clientHeight: document.documentElement.clientHeight - 135,
|
clientHeight: document.documentElement.clientHeight - 210,
|
||||||
updating: false,
|
updating: false,
|
||||||
adding: false,
|
adding: false,
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
@ -70,9 +122,30 @@
|
|||||||
selectLocationVisible: false,
|
selectLocationVisible: false,
|
||||||
moreSetting: false,
|
moreSetting: false,
|
||||||
markdownCover: null,
|
markdownCover: null,
|
||||||
|
contentEditor: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
this.contentEditor = new Vditor('vditor', {
|
||||||
|
height: this.clientHeight,
|
||||||
|
toolbar,
|
||||||
|
toolbarConfig: {
|
||||||
|
pin: true,
|
||||||
|
},
|
||||||
|
preview: {
|
||||||
|
mode: 'both',
|
||||||
|
hljs: {
|
||||||
|
lineNumber: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cache: {
|
||||||
|
enable: false,
|
||||||
|
},
|
||||||
|
after: () => {
|
||||||
|
this.contentEditor.setValue(this.content)
|
||||||
|
},
|
||||||
|
})
|
||||||
if(this.$route.query.id){
|
if(this.$route.query.id){
|
||||||
this.editStatus = true
|
this.editStatus = true
|
||||||
markdownApi.getMarkdown({
|
markdownApi.getMarkdown({
|
||||||
@ -134,7 +207,7 @@
|
|||||||
if(this.isFullScreen){
|
if(this.isFullScreen){
|
||||||
this.clientHeight = document.documentElement.clientHeight
|
this.clientHeight = document.documentElement.clientHeight
|
||||||
}else{
|
}else{
|
||||||
this.clientHeight = document.documentElement.clientHeight - 135
|
this.clientHeight = document.documentElement.clientHeight - 210
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
save(){
|
save(){
|
||||||
@ -206,13 +279,13 @@
|
|||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/deep/ .el-main {
|
/deep/ .el-main {
|
||||||
padding: 5px 20px 20px 20px;
|
padding: 30px 20px 20px 20px;
|
||||||
.v-note-wrapper {
|
.v-note-wrapper {
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/deep/ .el-header {
|
/deep/ .el-header {
|
||||||
padding: 7.5px 20px 10px 20px;
|
height: 43px!important;
|
||||||
}
|
}
|
||||||
/deep/ .el-input-group {
|
/deep/ .el-input-group {
|
||||||
width: unset;
|
width: unset;
|
||||||
|
|||||||
@ -28,16 +28,17 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="body-wrapper">
|
<div class="body-wrapper">
|
||||||
<el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
|
<el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
|
||||||
<mavon-editor
|
<div id="vditor" class="article-body"></div>
|
||||||
ref="md"
|
<!-- <mavon-editor-->
|
||||||
v-if="!showList"
|
<!-- ref="md"-->
|
||||||
v-model="content"
|
<!-- v-if="!showList"-->
|
||||||
:subfield="false"
|
<!-- v-model="content"-->
|
||||||
:boxShadow="true"
|
<!-- :subfield="false"-->
|
||||||
:toolbarsFlag="false"
|
<!-- :boxShadow="true"-->
|
||||||
codeStyle="atom-one-dark"
|
<!-- :toolbarsFlag="false"-->
|
||||||
defaultOpen="preview"
|
<!-- codeStyle="atom-one-dark"-->
|
||||||
/>
|
<!-- defaultOpen="preview"-->
|
||||||
|
<!-- />-->
|
||||||
</el-main>
|
</el-main>
|
||||||
<div v-show="titleList.length > 0" class="right-bj">
|
<div v-show="titleList.length > 0" class="right-bj">
|
||||||
<a-affix>
|
<a-affix>
|
||||||
@ -65,12 +66,14 @@
|
|||||||
import AlLoading from "@/components/loading/AlLoading";
|
import AlLoading from "@/components/loading/AlLoading";
|
||||||
import AlBackTop from "@/components/backtop/AlBackTop";
|
import AlBackTop from "@/components/backtop/AlBackTop";
|
||||||
import markdownApi from '@/api/markdown-api'
|
import markdownApi from '@/api/markdown-api'
|
||||||
import {addCodeBtn} from '@/assets/js/mavon-line'
|
|
||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
import ArticleTop from "@/views/public/article/ArticleTop";
|
import ArticleTop from "@/views/public/article/ArticleTop";
|
||||||
import {getSetting} from '@/api/user'
|
import {getSetting} from '@/api/user'
|
||||||
import SidebarNav from "@/views/public/article/SidebarNav";
|
import SidebarNav from "@/views/public/article/SidebarNav";
|
||||||
|
|
||||||
|
import VditorPreview from 'vditor/dist/method.min'
|
||||||
|
import "vditor/src/assets/scss/index.scss"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
|
components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
|
||||||
data() {
|
data() {
|
||||||
@ -90,6 +93,7 @@ export default {
|
|||||||
maxMenuHeight: document.documentElement.clientHeight - 155,
|
maxMenuHeight: document.documentElement.clientHeight - 155,
|
||||||
top: 70,
|
top: 70,
|
||||||
isEditor : false,
|
isEditor : false,
|
||||||
|
contentEditor: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -151,13 +155,26 @@ export default {
|
|||||||
const filename = res.data.name
|
const filename = res.data.name
|
||||||
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
|
this.pageTitle = filename.substring(0,filename.length - res.data.suffix.length-1)
|
||||||
this.content = res.data.contentText
|
this.content = res.data.contentText
|
||||||
|
|
||||||
|
const that = this
|
||||||
|
VditorPreview.preview(document.getElementById('vditor'),
|
||||||
|
this.content,{
|
||||||
|
speech: {
|
||||||
|
enable: true,
|
||||||
|
},
|
||||||
|
anchor: 1,
|
||||||
|
after() {
|
||||||
|
that.renderAfter()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
this.$nextTick(()=>{ // DOM更新之后获取子元素
|
this.$nextTick(()=>{ // DOM更新之后获取子元素
|
||||||
// 在文章最前面添加更新时间
|
// // 在文章最前面添加更新时间
|
||||||
let main = document.querySelector('.v-show-content.scroll-style.scroll-style-border-radius')
|
// let main = document.getElementById('vditor')
|
||||||
let p = document.createElement("p")
|
// let p = document.createElement("p")
|
||||||
p.className = "note-update-date"
|
// p.className = "note-update-date"
|
||||||
p.innerText = `本文最后更新于：${this.file.updateDate}`
|
// p.innerText = `本文最后更新于：${this.file.updateDate}`
|
||||||
main.insertBefore(p , main.childNodes[0])
|
// main.insertBefore(p , main.childNodes[0])
|
||||||
|
|
||||||
// 动态打字效果
|
// 动态打字效果
|
||||||
this.dynamicTyping()
|
this.dynamicTyping()
|
||||||
@ -166,124 +183,126 @@ export default {
|
|||||||
if(hTag){
|
if(hTag){
|
||||||
this.pageTitle = hTag.innerText
|
this.pageTitle = hTag.innerText
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
this.isLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
renderAfter(){
|
||||||
|
let headers = $('.article-body').find(":header")
|
||||||
|
let a = []
|
||||||
|
if(headers && headers.length >0 ){
|
||||||
|
const that = this
|
||||||
|
headers.each(function () {
|
||||||
|
const tagName = $(this).prop("tagName")
|
||||||
|
if(tagName === 'H3'){
|
||||||
|
let li = '<li class="pl h-3"><a href="#'+$(this).attr('id')+'">'+$(this).text()+'</a></li>'
|
||||||
|
a.push(li)
|
||||||
|
that.titleList.push(li)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>|<h3.*?<\/h3>|<h4.*?<\/h4>|<h5.*?<\/h5>|<h6.*?<\/h6>/g);
|
// for (let i = 0; i < a.length; i++) {
|
||||||
if(a && a.length >0 ){
|
// // a[i] = a[i].replace(/id="/g, 'href="#')
|
||||||
a = a.splice(a.length/2,a.length)
|
// if (i ===0 && a[i].indexOf('h1') !== -1) {
|
||||||
for (let i = 0; i < a.length; i++) {
|
// a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||||
a[i] = a[i].replace(/id="/g, 'href="#')
|
// }else if (a[i].indexOf('h1') !== -1) {
|
||||||
if (i ===0 && a[i].indexOf('h1') !== -1) {
|
// a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||||
a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
// }else if (a[i].indexOf('h2') !== -1) {
|
||||||
}else if (a[i].indexOf('h1') !== -1) {
|
// a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
|
||||||
a[i] = '<li first class="pl h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
// }else if (a[i].indexOf('h3') !== -1) {
|
||||||
}else if (a[i].indexOf('h2') !== -1) {
|
// a[i] = '<li class="pl h-3">' + a[i].replace(/<h3>|<\/h3>/g, '') + '</li>'
|
||||||
a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
|
// }else if (a[i].indexOf('h4') !== -1) {
|
||||||
}else if (a[i].indexOf('h3') !== -1) {
|
// a[i] = '<li class="pl h-4">' + a[i].replace(/<h4>|<\/h4>/g, '') + '</li>'
|
||||||
a[i] = '<li class="pl h-3">' + a[i].replace(/<h3>|<\/h3>/g, '') + '</li>'
|
// }else if (a[i].indexOf('h5') !== -1) {
|
||||||
}else if (a[i].indexOf('h4') !== -1) {
|
// a[i] = '<li class="pl h-5">' + a[i].replace(/<h5>|<\/h5>/g, '') + '</li>'
|
||||||
a[i] = '<li class="pl h-4">' + a[i].replace(/<h4>|<\/h4>/g, '') + '</li>'
|
// }else if (a[i].indexOf('h6') !== -1) {
|
||||||
}else if (a[i].indexOf('h5') !== -1) {
|
// a[i] = '<li class="pl h-6">' + a[i].replace(/<h6>|<\/h6>/g, '') + '</li>'
|
||||||
a[i] = '<li class="pl h-5">' + a[i].replace(/<h5>|<\/h5>/g, '') + '</li>'
|
// } else {
|
||||||
}else if (a[i].indexOf('h6') !== -1) {
|
// a[i] = '<li>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
||||||
a[i] = '<li class="pl h-6">' + a[i].replace(/<h6>|<\/h6>/g, '') + '</li>'
|
// }
|
||||||
} else {
|
// this.titleList.push(i)
|
||||||
a[i] = '<li>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
|
// }
|
||||||
}
|
$('.j-titleList').prepend(this.titleList)
|
||||||
this.titleList.push(i)
|
|
||||||
|
// 获取id数组
|
||||||
|
for (let i = 0; i < a.length; i++) {
|
||||||
|
a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
|
||||||
|
}
|
||||||
|
|
||||||
|
let beforeScrollTop = document.documentElement.scrollTop;
|
||||||
|
let fn = fn || function (direction) {
|
||||||
|
// 判断是上滑显示,下滑隐藏
|
||||||
|
const top = $('#top')
|
||||||
|
const toogleNav = $('#toggle-nav')
|
||||||
|
|
||||||
|
const body = document.getElementById("body")
|
||||||
|
|
||||||
|
if(direction === 'down'){
|
||||||
|
top.removeClass('animateIn')
|
||||||
|
top.addClass('animateOut')
|
||||||
|
toogleNav.removeClass('animateRight')
|
||||||
|
toogleNav.addClass('animateLeft')
|
||||||
|
if(body.style.transform.length > 0) {
|
||||||
|
document.getElementById("sidebar-nav").style.transform = ''
|
||||||
|
body.style.transform = ''
|
||||||
|
document.getElementById("toggle-nav").style.transform = ''
|
||||||
}
|
}
|
||||||
$('.j-titleList').prepend(a)
|
}
|
||||||
|
if(direction === 'up'){
|
||||||
|
top.removeClass('animateOut')
|
||||||
|
top.addClass('animateIn')
|
||||||
|
toogleNav.removeClass('animateLeft')
|
||||||
|
toogleNav.addClass('animateRight')
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
//获取id数组
|
$(window).on("scroll",function (event) {
|
||||||
for (let i = 0; i < a.length; i++) {
|
for (let i = 0; i < a.length; i++) {
|
||||||
a[i] = a[i].replace(/.*?#(.*)".*/g, '$1')
|
if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
|
||||||
|
$('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
|
||||||
|
$('.j-bj').css('top', i * 34)
|
||||||
}
|
}
|
||||||
|
|
||||||
let beforeScrollTop = document.documentElement.scrollTop;
|
|
||||||
let fn = fn || function (direction) {
|
|
||||||
// 判断是上滑显示,下滑隐藏
|
|
||||||
const top = $('#top')
|
|
||||||
const toogleNav = $('#toggle-nav')
|
|
||||||
|
|
||||||
const body = document.getElementById("body")
|
|
||||||
|
|
||||||
if(direction === 'down'){
|
|
||||||
top.removeClass('animateIn')
|
|
||||||
top.addClass('animateOut')
|
|
||||||
toogleNav.removeClass('animateRight')
|
|
||||||
toogleNav.addClass('animateLeft')
|
|
||||||
if(body.style.transform.length > 0) {
|
|
||||||
document.getElementById("sidebar-nav").style.transform = ''
|
|
||||||
body.style.transform = ''
|
|
||||||
document.getElementById("toggle-nav").style.transform = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(direction === 'up'){
|
|
||||||
top.removeClass('animateOut')
|
|
||||||
top.addClass('animateIn')
|
|
||||||
toogleNav.removeClass('animateLeft')
|
|
||||||
toogleNav.addClass('animateRight')
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
$(window).on("scroll",function (event) {
|
|
||||||
for (let i = 0; i < a.length; i++) {
|
|
||||||
if ($(window).scrollTop() > $('#' + a[i]).offset().top - 100 || $(this).scrollTop() + $(this).height() == $(document).height()) {
|
|
||||||
$('.j-titleList').find('li').eq(i).addClass('active').siblings('li').removeClass('active');
|
|
||||||
$('.j-bj').css('top', i * 34)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断是上滑还是下滑
|
|
||||||
var afterScrollTop = document.documentElement.scrollTop;
|
|
||||||
let delta = afterScrollTop - beforeScrollTop;
|
|
||||||
beforeScrollTop = afterScrollTop;
|
|
||||||
var scrollTop = $(this).scrollTop();
|
|
||||||
var scrollHeight = $(document).height();
|
|
||||||
var windowHeight = $(this).height();
|
|
||||||
var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
|
|
||||||
// 改变top bar 进度条
|
|
||||||
document.querySelector(".scrollbar").style.width = progress +'%'
|
|
||||||
|
|
||||||
if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
|
|
||||||
fn('bottom');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
|
|
||||||
fn('up');
|
|
||||||
} else {
|
|
||||||
if (Math.abs(delta) < 10) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
fn(delta > 0 ? "down" : "up");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
let $root = $('html, body');
|
|
||||||
$('.j-titleList li').on("click", function () {
|
|
||||||
let top = 70
|
|
||||||
if (typeof($(this).attr("first"))!=="undefined") {
|
|
||||||
// 点击第一个目录
|
|
||||||
top = 100
|
|
||||||
}
|
|
||||||
$root.animate({
|
|
||||||
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
|
|
||||||
}, 400)
|
|
||||||
return false
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const _this = this
|
// 判断是上滑还是下滑
|
||||||
setTimeout(function () {
|
var afterScrollTop = document.documentElement.scrollTop;
|
||||||
// 添加行数
|
let delta = afterScrollTop - beforeScrollTop;
|
||||||
const clientWidth = document.documentElement.clientWidth;
|
beforeScrollTop = afterScrollTop;
|
||||||
if(clientWidth > 425){
|
var scrollTop = $(this).scrollTop();
|
||||||
addCodeBtn();
|
var scrollHeight = $(document).height();
|
||||||
|
var windowHeight = $(this).height();
|
||||||
|
var progress = ((afterScrollTop + document.body.clientHeight)/scrollHeight) * 100
|
||||||
|
// 改变top bar 进度条
|
||||||
|
document.querySelector(".scrollbar").style.width = progress +'%'
|
||||||
|
|
||||||
|
if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
|
||||||
|
fn('bottom');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
|
||||||
|
fn('up');
|
||||||
|
} else {
|
||||||
|
if (Math.abs(delta) < 10) {
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
_this.isLoading = false
|
fn(delta > 0 ? "down" : "up");
|
||||||
},150)
|
}
|
||||||
})
|
})
|
||||||
})
|
|
||||||
}
|
let $root = $('html, body');
|
||||||
|
$('.j-titleList li').on("click", function () {
|
||||||
|
let top = 70
|
||||||
|
if (typeof($(this).attr("first"))!=="undefined") {
|
||||||
|
// 点击第一个目录
|
||||||
|
top = 100
|
||||||
|
}
|
||||||
|
$root.animate({
|
||||||
|
scrollTop: $($.attr(this.querySelector("a"), 'href')).offset().top - top
|
||||||
|
}, 400)
|
||||||
|
return false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
$(window).unbind("scroll")
|
$(window).unbind("scroll")
|
||||||
|
|||||||
48
src/views/setting/articles/articleManager.vue
Normal file
48
src/views/setting/articles/articleManager.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container" v-wechat-title="title">
|
||||||
|
<el-dialog title="新增文章" :fullscreen="true" :visible.sync="newArticleDialogVisible">
|
||||||
|
<markdown-editor></markdown-editor>
|
||||||
|
</el-dialog>
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div class="box-card-header">
|
||||||
|
<div class="clearfix card-header-back">
|
||||||
|
<span>文章管理</span>
|
||||||
|
<el-button class="card-button" size="mini" type="primary" @click="newArticle">新建文章</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import MarkdownEditor from '@/views/markdown/index'
|
||||||
|
export default {
|
||||||
|
name: 'articleManager',
|
||||||
|
components: {
|
||||||
|
MarkdownEditor
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: "文章管理",
|
||||||
|
newArticleDialogVisible: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
mounted() {
|
||||||
|
if(this.$route.query.markdown){
|
||||||
|
this.newArticleDialogVisible = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
newArticle() {
|
||||||
|
this.newArticleDialogVisible = true
|
||||||
|
this.$router.push({path:'/setting/website/manager-articles', query: {markdown: 'new'}})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "src/styles/setting";
|
||||||
|
</style>
|
||||||
@ -93,13 +93,9 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import categoryApi from "@/api/category";
|
import categoryApi from "@/api/category";
|
||||||
import CropperDialog from '@/components/Cropper/dialog'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'categoryManager',
|
name: 'categoryManager',
|
||||||
components: {
|
|
||||||
CropperDialog
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: "分类管理",
|
title: "分类管理",
|
||||||
|
|||||||
@ -1,8 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container" v-wechat-title="title">
|
<div class="app-container" v-wechat-title="title">
|
||||||
<el-card class="box-card">
|
<el-card class="box-card">
|
||||||
同步网盘
|
<div class="box-card-header">
|
||||||
<el-button type="primary" :loading="syncLoading" @click="sync"><i class="el-icon-upload el-icon--right"></i></el-button>
|
<div class="clearfix card-header-back">
|
||||||
|
<span>同步网盘</span>
|
||||||
|
<el-button class="card-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i class="el-icon-upload el-icon--right"></i></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -32,6 +36,6 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "src/styles/setting";
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -24,9 +24,13 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<el-card class="box-card">
|
<el-card class="box-card">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header">
|
||||||
<span>用户列表</span>
|
<div class="box-card-header">
|
||||||
<el-button class="card-button" type="text" @click="add">添加用户</el-button>
|
<div class="clearfix card-header-back">
|
||||||
|
<span>用户列表</span>
|
||||||
|
<el-button class="card-button" size="mini" type="primary" @click="add()">添加用户</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-table
|
<el-table
|
||||||
:data="userList"
|
:data="userList"
|
||||||
@ -254,14 +258,6 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!--<style src="@styles/cropper.css"></style>-->
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "src/styles/setting";
|
@import "src/styles/setting";
|
||||||
.card-button {
|
|
||||||
float: right;
|
|
||||||
padding: 3px 0;
|
|
||||||
}
|
|
||||||
.box-card {
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user