mirror of https://github.com/halo-dev/halo-admin
ui build
parent
100298cde9
commit
8acbb1b57b
|
@ -11,4 +11,11 @@ themeApi.listFiles = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
themeApi.customTpls = () => {
|
||||||
|
return service({
|
||||||
|
url: `${baseUrl}/files/custom`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export default themeApi
|
export default themeApi
|
||||||
|
|
|
@ -3,12 +3,13 @@
|
||||||
<a-drawer
|
<a-drawer
|
||||||
width="300"
|
width="300"
|
||||||
placement="right"
|
placement="right"
|
||||||
:closable="false"
|
:closable="true"
|
||||||
@close="onClose"
|
@close="onClose"
|
||||||
:visible="visible"
|
:visible="visible"
|
||||||
:getContainer="() => $refs.settingDrawer"
|
:getContainer="() => $refs.settingDrawer"
|
||||||
:style="{}"
|
:style="{}"
|
||||||
:mask="false"
|
:mask="false"
|
||||||
|
:zIndex="9999"
|
||||||
>
|
>
|
||||||
<div class="setting-drawer-index-content">
|
<div class="setting-drawer-index-content">
|
||||||
<div :style="{ marginBottom: '24px' }">
|
<div :style="{ marginBottom: '24px' }">
|
||||||
|
@ -147,13 +148,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a-divider/>
|
<a-divider/>
|
||||||
<div :style="{ marginBottom: '24px' }">
|
|
||||||
<a-list :split="false">
|
|
||||||
<a-list-item>
|
|
||||||
<a-icon type="double-right" @click="toggle" class="iconClose"/>
|
|
||||||
</a-list-item>
|
|
||||||
</a-list>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
</div>
|
</div>
|
||||||
|
@ -289,10 +283,6 @@ export default {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.iconClose {
|
|
||||||
font-size: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.setting-drawer-index-handle {
|
.setting-drawer-index-handle {
|
||||||
|
|
|
@ -1,10 +1,166 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-header-index-wide"> Page Edit </div>
|
<div class="page-header-index-wide">
|
||||||
|
<a-row :gutter="12">
|
||||||
|
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||||
|
<a-card>
|
||||||
|
<div style="margin-bottom: 16px">
|
||||||
|
<a-input
|
||||||
|
v-decorator="['title', { rules: [{ required: true, message: '请输入页面标题' }] }]"
|
||||||
|
size="large"
|
||||||
|
placeholder="请输入页面标题"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<a-button type="primary" @click="showDrawer">发布</a-button>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card>
|
||||||
|
<div id="editor">
|
||||||
|
<mavon-editor v-model="value"/>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||||
|
<a-drawer
|
||||||
|
title="页面设置"
|
||||||
|
:width="drawerWidth"
|
||||||
|
:closable="true"
|
||||||
|
@close="onClose"
|
||||||
|
:visible="visible"
|
||||||
|
>
|
||||||
|
<div class="post-setting-drawer-content">
|
||||||
|
<div :style="{ marginBottom: '16px' }">
|
||||||
|
<h3 class="post-setting-drawer-title">基本设置</h3>
|
||||||
|
<div class="post-setting-drawer-item">
|
||||||
|
<a-form layout="vertical">
|
||||||
|
<a-form-item label="页面路径:" :help="'https://localhost:8090/p/'+postUrl">
|
||||||
|
<a-input v-model="postUrl"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="页面密码:">
|
||||||
|
<a-input type="password"/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="是否开启评论:">
|
||||||
|
<a-select defaultValue="1">
|
||||||
|
<a-select-option value="1">是</a-select-option>
|
||||||
|
<a-select-option value="0">否</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="自定义模板:">
|
||||||
|
<a-select>
|
||||||
|
<a-select-option v-for="tpl in customTpls" :key="tpl" :value="tpl">{{ tpl }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
|
||||||
|
<div :style="{ marginBottom: '16px' }">
|
||||||
|
<h3 class="post-setting-drawer-title">缩略图</h3>
|
||||||
|
<div class="post-setting-drawer-item">
|
||||||
|
<div class="post-thum">
|
||||||
|
<img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
</div>
|
||||||
|
<div class="postControl">
|
||||||
|
<a-button style="marginRight: 8px" @click="onClose">保存草稿</a-button>
|
||||||
|
<a-button @click="onClose" type="primary">发布</a-button>
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {}
|
import { mavonEditor } from 'mavon-editor'
|
||||||
</script>
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
|
import 'mavon-editor/dist/css/index.css'
|
||||||
|
import tagApi from '@/api/theme'
|
||||||
|
export default {
|
||||||
|
name: 'Editor',
|
||||||
|
components: {
|
||||||
|
mavonEditor
|
||||||
|
},
|
||||||
|
|
||||||
|
mixins: [mixin, mixinDevice],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
wrapperCol: {
|
||||||
|
xl: { span: 24 },
|
||||||
|
sm: { span: 24 },
|
||||||
|
xs: { span: 24 }
|
||||||
|
},
|
||||||
|
value: 'Hello World',
|
||||||
|
visible: false,
|
||||||
|
drawerWidth: '460',
|
||||||
|
postUrl: 'hello-world',
|
||||||
|
customTpls: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.isMobile()) {
|
||||||
|
this.drawerWidth = '100%'
|
||||||
|
} else {
|
||||||
|
this.drawerWidth = '460'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadCustomTpls()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadCustomTpls() {
|
||||||
|
tagApi.customTpls().then(response => {
|
||||||
|
this.customTpls = response.data.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showDrawer() {
|
||||||
|
this.visible = true
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
#editor {
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-note-wrapper {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-form-vertical .ant-form-item {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postControl {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid rgb(232, 232, 232);
|
||||||
|
padding: 10px 16px;
|
||||||
|
text-align: right;
|
||||||
|
left: 0px;
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
border-radius: 0px 0px 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-form-vertical .ant-form-item {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-thum .img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-header-index-wide">
|
<div class="page-header-index-wide">
|
||||||
<a-row :gutter="12">
|
<a-row :gutter="12">
|
||||||
<a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
|
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||||
<a-card>
|
<a-card>
|
||||||
<div style="margin-bottom: 16px">
|
<div style="margin-bottom: 16px">
|
||||||
<a-input
|
<a-input
|
||||||
|
@ -10,13 +10,7 @@
|
||||||
placeholder="请输入文章标题"
|
placeholder="请输入文章标题"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-bottom: 16px">
|
<a-button type="primary" @click="showDrawer">发布</a-button>
|
||||||
<a-input
|
|
||||||
addonBefore="https://ryanc.cc/archives/"
|
|
||||||
defaultValue="mysite"
|
|
||||||
style="width: 360px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
<a-card>
|
<a-card>
|
||||||
|
@ -26,28 +20,79 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
||||||
<a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
|
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
|
||||||
<a-card title="发布">
|
<a-drawer
|
||||||
<a-form layout="vertical">
|
title="文章设置"
|
||||||
<a-form-item label="开启评论:">
|
:width="drawerWidth"
|
||||||
<a-select defaultValue="true">
|
:closable="true"
|
||||||
<a-select-option value="true">是</a-select-option>
|
@close="onClose"
|
||||||
<a-select-option value="false">否</a-select-option>
|
:visible="visible"
|
||||||
</a-select>
|
>
|
||||||
</a-form-item>
|
<div class="post-setting-drawer-content">
|
||||||
<a-form-item label="文章密码:">
|
<div :style="{ marginBottom: '16px' }">
|
||||||
<a-input type="password"/>
|
<h3 class="post-setting-drawer-title">基本设置</h3>
|
||||||
</a-form-item>
|
<div class="post-setting-drawer-item">
|
||||||
<a-form-item>
|
<a-form layout="vertical">
|
||||||
<a-button type="primary">保存</a-button>
|
<a-form-item label="文章路径:" :help="'https://localhost:8090/archives/'+postUrl">
|
||||||
</a-form-item>
|
<a-input v-model="postUrl"/>
|
||||||
</a-form>
|
</a-form-item>
|
||||||
</a-card>
|
<a-form-item label="文章密码:">
|
||||||
<a-card title="分类目录"></a-card>
|
<a-input type="password"/>
|
||||||
<a-card title="标签"></a-card>
|
</a-form-item>
|
||||||
<a-card title="缩略图">
|
<a-form-item label="是否开启评论:">
|
||||||
<img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
|
<a-select defaultValue="1">
|
||||||
</a-card>
|
<a-select-option value="1">是</a-select-option>
|
||||||
|
<a-select-option value="0">否</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
|
||||||
|
<div :style="{ marginBottom: '16px' }">
|
||||||
|
<h3 class="post-setting-drawer-title">分类目录</h3>
|
||||||
|
<div class="post-setting-drawer-item">
|
||||||
|
<a-tree checkable :treeData="treeData" :defaultExpandAll="true">
|
||||||
|
<span slot="title0010" style="color: #1890ff">sss</span>
|
||||||
|
</a-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
|
||||||
|
<div :style="{ marginBottom: '16px' }">
|
||||||
|
<h3 class="post-setting-drawer-title">标签</h3>
|
||||||
|
<div class="post-setting-drawer-item">
|
||||||
|
<a-form layout="vertical">
|
||||||
|
<a-form-item>
|
||||||
|
<a-select mode="tags" placeholder="选择或输入标签">
|
||||||
|
<a-select-option
|
||||||
|
v-for="tag in tags"
|
||||||
|
:key="tag.id"
|
||||||
|
:value="tag.id.toString()"
|
||||||
|
>{{ tag.name }}</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
|
||||||
|
<div :style="{ marginBottom: '16px' }">
|
||||||
|
<h3 class="post-setting-drawer-title">缩略图</h3>
|
||||||
|
<div class="post-setting-drawer-item">
|
||||||
|
<div class="post-thum">
|
||||||
|
<img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-divider/>
|
||||||
|
</div>
|
||||||
|
<div class="postControl">
|
||||||
|
<a-button style="marginRight: 8px" @click="onClose">保存草稿</a-button>
|
||||||
|
<a-button @click="onClose" type="primary">发布</a-button>
|
||||||
|
</div>
|
||||||
|
</a-drawer>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
|
@ -55,12 +100,38 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mavonEditor } from 'mavon-editor'
|
import { mavonEditor } from 'mavon-editor'
|
||||||
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||||
import 'mavon-editor/dist/css/index.css'
|
import 'mavon-editor/dist/css/index.css'
|
||||||
|
import tagApi from '@/api/tag'
|
||||||
|
const treeData = [
|
||||||
|
{
|
||||||
|
title: '学习记录',
|
||||||
|
key: '0-0',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: 'Java 学习',
|
||||||
|
key: '0-0-0',
|
||||||
|
children: [{ title: 'JVM', key: '0-0-0-0' }, { title: 'Spring', key: '0-0-0-1' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'PHP 学习',
|
||||||
|
key: '0-0-1',
|
||||||
|
children: [{ key: '0-0-1-0', title: 'Composer' }, { key: '0-0-1-1', title: 'MySQL' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '生活记录',
|
||||||
|
key: '1-0'
|
||||||
|
}
|
||||||
|
]
|
||||||
export default {
|
export default {
|
||||||
name: 'Editor',
|
name: 'Editor',
|
||||||
components: {
|
components: {
|
||||||
mavonEditor
|
mavonEditor
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mixins: [mixin, mixinDevice],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
wrapperCol: {
|
wrapperCol: {
|
||||||
|
@ -68,7 +139,35 @@ export default {
|
||||||
sm: { span: 24 },
|
sm: { span: 24 },
|
||||||
xs: { span: 24 }
|
xs: { span: 24 }
|
||||||
},
|
},
|
||||||
value: 'Hello World'
|
value: 'Hello World',
|
||||||
|
visible: false,
|
||||||
|
drawerWidth: '460',
|
||||||
|
postUrl: 'hello-world',
|
||||||
|
tags: [],
|
||||||
|
treeData
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.isMobile()) {
|
||||||
|
this.drawerWidth = '100%'
|
||||||
|
} else {
|
||||||
|
this.drawerWidth = '460'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadTags()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadTags() {
|
||||||
|
tagApi.listAll(true).then(response => {
|
||||||
|
this.tags = response.data.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showDrawer() {
|
||||||
|
this.visible = true
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.visible = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -90,4 +189,24 @@ export default {
|
||||||
.ant-form-vertical .ant-form-item {
|
.ant-form-vertical .ant-form-item {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.postControl {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid rgb(232, 232, 232);
|
||||||
|
padding: 10px 16px;
|
||||||
|
text-align: right;
|
||||||
|
left: 0px;
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
border-radius: 0px 0px 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-form-vertical .ant-form-item {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-thum .img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
17
yarn.lock
17
yarn.lock
|
@ -2766,6 +2766,11 @@ code-point-at@^1.0.0:
|
||||||
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
|
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
|
||||||
integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
|
integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
|
||||||
|
|
||||||
|
codemirror@^5.22.0:
|
||||||
|
version "5.45.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.45.0.tgz#db5ebbb3bf44028c684053f3954d011efcec27ad"
|
||||||
|
integrity sha512-c19j644usCE8gQaXa0jqn2B/HN9MnB2u6qPIrrhrMkB+QAP42y8G4QnTwuwbVSoUS1jEl7JU9HZMGhCDL0nsAw==
|
||||||
|
|
||||||
collection-visit@^1.0.0:
|
collection-visit@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
|
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
|
||||||
|
@ -10346,6 +10351,13 @@ vue-clipboard2@^0.3.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
clipboard "^2.0.0"
|
clipboard "^2.0.0"
|
||||||
|
|
||||||
|
vue-codemirror-lite@^1.0.4:
|
||||||
|
version "1.0.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-codemirror-lite/-/vue-codemirror-lite-1.0.4.tgz#48a5cd7d17c0914503c8cd9d9b56b438e49c3410"
|
||||||
|
integrity sha1-SKXNfRfAkUUDyM2dm1a0OOScNBA=
|
||||||
|
dependencies:
|
||||||
|
codemirror "^5.22.0"
|
||||||
|
|
||||||
vue-cropper@0.4.9:
|
vue-cropper@0.4.9:
|
||||||
version "0.4.9"
|
version "0.4.9"
|
||||||
resolved "https://registry.yarnpkg.com/vue-cropper/-/vue-cropper-0.4.9.tgz#fe650f32516ecf29014bbd4a9079191c8dc5a5ae"
|
resolved "https://registry.yarnpkg.com/vue-cropper/-/vue-cropper-0.4.9.tgz#fe650f32516ecf29014bbd4a9079191c8dc5a5ae"
|
||||||
|
@ -10375,6 +10387,11 @@ vue-eslint-parser@^5.0.0:
|
||||||
esquery "^1.0.1"
|
esquery "^1.0.1"
|
||||||
lodash "^4.17.11"
|
lodash "^4.17.11"
|
||||||
|
|
||||||
|
vue-fragment@^1.5.0:
|
||||||
|
version "1.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/vue-fragment/-/vue-fragment-1.5.0.tgz#7739463b7680633f2b671aec9f1bfdd9a436da33"
|
||||||
|
integrity sha512-nobmbbOSOx59fm7U00BDz14Yvqitwx7NPQGYDTKg3+dNDGTDCRNy/q2kfr5hV4S0l4fQG0kvC+rbCmENLmHUSA==
|
||||||
|
|
||||||
vue-hot-reload-api@^2.3.0:
|
vue-hot-reload-api@^2.3.0:
|
||||||
version "2.3.3"
|
version "2.3.3"
|
||||||
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
|
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
|
||||||
|
|
Loading…
Reference in New Issue