完成主题编辑页面

pull/9/head
ruibaby 2019-04-01 22:26:55 +08:00
parent d582b85bc8
commit 535199530e
5 changed files with 172 additions and 104 deletions

View File

@ -18,6 +18,7 @@
"viser-vue": "^2.4.5",
"vue": "^2.6.10",
"vue-clipboard2": "^0.3.0",
"vue-codemirror-lite": "^1.0.4",
"vue-cropper": "0.4.9",
"vue-ls": "^3.2.1",
"vue-router": "^3.0.2",

View File

@ -1,36 +1,41 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col
:xl="10"
:lg="10"
:md="10"
:sm="24"
:xs="24"
class="a-col"
>
<a-card
hoverable
title="添加菜单"
>
<a-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
<a-card hoverable title="添加菜单">
<a-form layout="horizontal">
<a-form-item label="名称:" help="*页面上所显示的名称">
<a-input />
</a-form-item>
<a-form-item label="路径:" help="*菜单的路径">
<a-input />
</a-form-item>
<a-form-item label="上级菜单:">
<a-select>
<a-select-option value="1">上级菜单</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="排序编号:">
<a-input type="number" />
</a-form-item>
<a-form-item label="图标:" help="*请根据主题的支持选填">
<a-input />
</a-form-item>
<a-form-item label="打开方式:">
<a-select defaultValue="_self">
<a-select-option value="_self">当前窗口</a-select-option>
<a-select-option value="_blank">新窗口</a-select-option>
</a-select>
</a-form-item>
<a-form-item>
<a-button type="primary">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col
:xl="14"
:lg="14"
:md="14"
:sm="24"
:xs="24"
class="a-col"
>
<a-card
hoverable
title="所有菜单"
>
所有菜单
<a-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
<a-card hoverable title="所有菜单">
<a-table :columns="columns" :dataSource="data" :loading="loading"> </a-table>
</a-card>
</a-col>
</a-row>
@ -38,7 +43,33 @@
</template>
<script>
export default {}
const columns = [
{
title: '名称',
dataIndex: 'name'
},
{
title: '路径',
dataIndex: 'url'
},
{
title: '排序',
dataIndex: 'sort'
},
{
title: '图标',
dataIndex: 'icon'
}
]
export default {
data() {
return {
data: [],
loading: false,
columns
}
}
}
</script>
<style scoped>

View File

@ -1,10 +1,63 @@
<template>
<div class="page-header-index-wide"> Theme Edit </div>
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
<a-card hoverable>
<codemirror :value="value"></codemirror>
</a-card>
</a-col>
<a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
<a-card hoverable title="Anatole 主题">
<a-directory-tree multiple @select="onSelect" @expand="onExpand">
<a-tree-node title="source" key="0-0">
<a-tree-node title="css" key="0-0-1">
<a-tree-node title="style.css" key="0-0-1-2" isLeaf />
</a-tree-node>
<a-tree-node title="js" key="0-0-2" isLeaf />
<a-tree-node title="images" key="0-0-3" isLeaf />
</a-tree-node>
<a-tree-node title="module" key="0-1">
<a-tree-node title="options.ftl" key="0-1-0" isLeaf />
</a-tree-node>
<a-tree-node title="index.ftl" key="0-2-0" />
<a-tree-node title="posts.ftl" key="0-3-0" />
<a-tree-node title="category.ftl" key="0-4-0" />
<a-tree-node title="tags.ftl" key="0-5-0" />
<a-tree-node title="links.ftl" key="0-6-0" />
<a-tree-node title="page_author.ftl" key="0-7-0" />
<a-tree-node title="page_search.ftl" key="0-8-0" />
</a-directory-tree>
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
export default {}
import { codemirror } from 'vue-codemirror-lite'
export default {
components: {
codemirror
},
data() {
return {
value: 'Hello World'
}
},
methods: {
onSelect(keys) {
console.log('Trigger Select', keys)
},
onExpand() {
console.log('Trigger Expand')
}
}
}
</script>
<style scoped>
<style>
.CodeMirror-gutters {
border-right: 1px solid #fff3f3;
background-color: #ffffff;
}
</style>

View File

@ -1,36 +1,32 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col
:xl="10"
:lg="10"
:md="10"
:sm="24"
:xs="24"
class="a-col"
>
<a-card
hoverable
title="添加分类目录"
>
<a-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
<a-card hoverable title="添加分类目录">
<a-form layout="horizontal">
<a-form-item label="名称:" help="*页面上所显示的名称">
<a-input />
</a-form-item>
<a-form-item label="路径名称:" help="*这是文章路径上显示的名称,最好为英文">
<a-input />
</a-form-item>
<a-form-item label="上级目录:">
<a-select>
<a-select-option value="1">上级目录</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="描述:" help="*分类描述,部分主题可显示">
<a-input type="textarea" :autosize="{ minRows: 3 }" />
</a-form-item>
<a-form-item>
<a-button type="primary">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col
:xl="14"
:lg="14"
:md="14"
:sm="24"
:xs="24"
class="a-col"
>
<a-card
hoverable
title="所有分类"
>
所有分类
<a-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
<a-card hoverable title="所有分类">
<a-table :columns="columns" :dataSource="data" :loading="loading"> </a-table>
</a-card>
</a-col>
</a-row>
@ -38,7 +34,33 @@
</template>
<script>
export default {}
const columns = [
{
title: '名称',
dataIndex: 'name'
},
{
title: '路径',
dataIndex: 'slugName'
},
{
title: '描述',
dataIndex: 'description'
},
{
title: '文章数',
dataIndex: 'posts.count'
}
]
export default {
data() {
return {
data: [],
loading: false,
columns
}
}
}
</script>
<style scoped>

View File

@ -1,57 +1,24 @@
<template>
<div class="page-header-index-wide">
<a-row :gutter="12">
<a-col
:xl="10"
:lg="10"
:md="10"
:sm="24"
:xs="24"
class="a-col"
>
<a-card
hoverable
title="添加标签"
>
<a-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
<a-card hoverable title="添加标签">
<a-form layout="horizontal">
<a-form-item
label="名称:"
help="*页面上所显示的名称"
>
<a-form-item label="名称:" help="*页面上所显示的名称">
<a-input v-model="tagToCreate.name" />
</a-form-item>
<a-form-item
label="路径名称:"
help="*这是文章路径上显示的名称,最好为英文"
>
<a-form-item label="路径名称:" help="*这是文章路径上显示的名称,最好为英文">
<a-input v-model="tagToCreate.slugName" />
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="createTag"
>保存</a-button>
<a-button type="primary" @click="createTag"></a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col
:xl="14"
:lg="14"
:md="14"
:sm="24"
:xs="24"
class="a-col"
>
<a-card
hoverable
title="所有标签"
>
<a-tooltip
placement="topLeft"
v-for="tag in tags"
:key="tag.id"
>
<a-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
<a-card hoverable title="所有标签">
<a-tooltip placement="topLeft" v-for="tag in tags" :key="tag.id">
<template slot="title">
<span>{{ tag.postCount }} 篇文章</span>
</template>
@ -100,9 +67,3 @@ export default {
}
}
</script>
<style scoped>
.a-col{
padding:6px;
}
</style>