github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

ui build

pull/3445/head
ruibaby 2019-04-05 13:05:12 +08:00
parent 8acbb1b57b
commit 10e9e91c96
6 changed files with 111 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/category.js Normal file
View File

@ -0,0 +1,14 @@
import service from '@/utils/service'
const baseUrl = '/admin/api/categories'
const categoryApi = {}
categoryApi.listAll = () => {
return service({
url: `${baseUrl}`,
method: 'get'
})
}
export default categoryApi

4
src/views/comment/CommentList.vue
View File

@ -11,7 +11,7 @@
</a-col> </a-col>
<a-col :md="6" :sm="24"> <a-col :md="6" :sm="24">
<a-form-item label="评论状态"> <a-form-item label="评论状态">
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0"> <a-select v-model="queryParam.status" placeholder="请选择" defaultValue="0">
<a-select-option value="0">已发布</a-select-option> <a-select-option value="0">已发布</a-select-option>
<a-select-option value="1">待审核</a-select-option> <a-select-option value="1">待审核</a-select-option>
<a-select-option value="2">回收站</a-select-option> <a-select-option value="2">回收站</a-select-option>
@ -41,7 +41,7 @@
</a-dropdown> </a-dropdown>
</div> </div>
<div style="margin-top:15px"> <div style="margin-top:15px">
<a-table :columns="columns" :dataSource="data"> <a-table :columns="columns">
<a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a> <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
<span slot="customTitle"><a-icon type="smile-o" /> Name</span> <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
<span slot="tags" slot-scope="tags"> <span slot="tags" slot-scope="tags">

9
src/views/interface/ThemeEdit.vue
View File

@ -3,7 +3,14 @@
<a-row :gutter="12"> <a-row :gutter="12">
<a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24"> <a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
<a-card> <a-card>
<codemirror :value="value"></codemirror> <a-form layout="vertical">
<a-form-item>
<codemirror :value="value"></codemirror>
</a-form-item>
<a-form-item>
<a-button type="primary">保存</a-button>
</a-form-item>
</a-form>
</a-card> </a-card>
</a-col> </a-col>
<a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24"> <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">

64
src/views/post/PostEdit.vue
View File

@ -15,29 +15,23 @@
<a-card> <a-card>
<div id="editor"> <div id="editor">
<mavon-editor v-model="value"/> <mavon-editor :toolbars="markdownOption" v-model="value" :boxShadow="false" :ishljs = "true"/>
</div> </div>
</a-card> </a-card>
</a-col> </a-col>
<a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24"> <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
<a-drawer <a-drawer title="文章设置" :width="drawerWidth" :closable="true" @close="onClose" :visible="visible">
title="文章设置"
:width="drawerWidth"
:closable="true"
@close="onClose"
:visible="visible"
>
<div class="post-setting-drawer-content"> <div class="post-setting-drawer-content">
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">基本设置</h3> <h3 class="post-setting-drawer-title">基本设置</h3>
<div class="post-setting-drawer-item"> <div class="post-setting-drawer-item">
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item label="文章路径：" :help="'https://localhost:8090/archives/'+postUrl"> <a-form-item label="文章路径：" :help="'https://localhost:8090/archives/' + postUrl">
<a-input v-model="postUrl"/> <a-input v-model="postUrl" />
</a-form-item> </a-form-item>
<a-form-item label="文章密码："> <a-form-item label="文章密码：">
<a-input type="password"/> <a-input type="password" />
</a-form-item> </a-form-item>
<a-form-item label="是否开启评论："> <a-form-item label="是否开启评论：">
<a-select defaultValue="1"> <a-select defaultValue="1">
@ -48,7 +42,7 @@
</a-form> </a-form>
</div> </div>
</div> </div>
<a-divider/> <a-divider />
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">分类目录</h3> <h3 class="post-setting-drawer-title">分类目录</h3>
@ -58,7 +52,7 @@
</a-tree> </a-tree>
</div> </div>
</div> </div>
<a-divider/> <a-divider />
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">标签</h3> <h3 class="post-setting-drawer-title">标签</h3>
@ -66,27 +60,25 @@
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item> <a-form-item>
<a-select mode="tags" placeholder="选择或输入标签"> <a-select mode="tags" placeholder="选择或输入标签">
<a-select-option <a-select-option v-for="tag in tags" :key="tag.id" :value="tag.id.toString()">{{
v-for="tag in tags" tag.name
:key="tag.id" }}</a-select-option>
:value="tag.id.toString()"
>{{ tag.name }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-form> </a-form>
</div> </div>
</div> </div>
<a-divider/> <a-divider />
<div :style="{ marginBottom: '16px' }"> <div :style="{ marginBottom: '16px' }">
<h3 class="post-setting-drawer-title">缩略图</h3> <h3 class="post-setting-drawer-title">缩略图</h3>
<div class="post-setting-drawer-item"> <div class="post-setting-drawer-item">
<div class="post-thum"> <div class="post-thum">
<img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"> <img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" />
</div> </div>
</div> </div>
</div> </div>
<a-divider/> <a-divider />
</div> </div>
<div class="postControl"> <div class="postControl">
<a-button style="marginRight: 8px" @click="onClose">保存草稿</a-button> <a-button style="marginRight: 8px" @click="onClose">保存草稿</a-button>
@ -103,6 +95,26 @@ import { mavonEditor } from 'mavon-editor'
import { mixin, mixinDevice } from '@/utils/mixin.js' 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' import tagApi from '@/api/tag'
const toolbars = {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
readmodel: true, // 沉浸式阅读
undo: true, // 上一步
redo: true, // 下一步
navigation: true, // 导航目录
subfield: true, // 单双栏模式
preview: true // 预览
}
const treeData = [ const treeData = [
{ {
title: '学习记录', title: '学习记录',
@ -144,7 +156,8 @@ export default {
drawerWidth: '460', drawerWidth: '460',
postUrl: 'hello-world', postUrl: 'hello-world',
tags: [], tags: [],
treeData treeData,
markdownOption: toolbars
} }
}, },
mounted() { mounted() {
@ -206,7 +219,12 @@ export default {
padding-bottom: 0; padding-bottom: 0;
} }
.post-thum .img{ .post-thum .img {
width: 100%; width: 100%;
} }
.mavonEditor {
width: 100%;
height: 560px;
}
</style> </style>

30
src/views/post/PostList.vue
View File

@ -11,7 +11,7 @@
</a-col> </a-col>
<a-col :md="6" :sm="24"> <a-col :md="6" :sm="24">
<a-form-item label="文章状态"> <a-form-item label="文章状态">
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0"> <a-select v-model="queryParam.status" placeholder="请选择文章状态" defaultValue="0">
<a-select-option value="0">已发布</a-select-option> <a-select-option value="0">已发布</a-select-option>
<a-select-option value="1">草稿箱</a-select-option> <a-select-option value="1">草稿箱</a-select-option>
<a-select-option value="2">回收站</a-select-option> <a-select-option value="2">回收站</a-select-option>
@ -20,10 +20,8 @@
</a-col> </a-col>
<a-col :md="6" :sm="24"> <a-col :md="6" :sm="24">
<a-form-item label="分类目录"> <a-form-item label="分类目录">
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0"> <a-select v-model="queryParam.categoryId" placeholder="请选择分类">
<a-select-option value="0">xx</a-select-option> <a-select-option v-for="category in categories" :key="category.id">{{ category.name }}</a-select-option>
<a-select-option value="1">xx</a-select-option>
<a-select-option value="2">xx</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -39,7 +37,9 @@
</div> </div>
<div class="table-operator"> <div class="table-operator">
<a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button> <router-link :to="{name:'PostEdit'}">
<a-button type="primary" icon="plus">写文章</a-button>
</router-link>
<a-dropdown> <a-dropdown>
<a-menu slot="overlay"> <a-menu slot="overlay">
<a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item> <a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item>
@ -51,7 +51,7 @@
</a-dropdown> </a-dropdown>
</div> </div>
<div style="margin-top:15px"> <div style="margin-top:15px">
<a-table :columns="columns" :dataSource="data"> <a-table :columns="columns">
<a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a> <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
<span slot="customTitle"><a-icon type="smile-o" /> Name</span> <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
<span slot="tags" slot-scope="tags"> <span slot="tags" slot-scope="tags">
@ -71,6 +71,7 @@
</template> </template>
<script> <script>
import categoryApi from '@/api/category'
export default { export default {
name: 'PostList', name: 'PostList',
components: {}, components: {},
@ -120,10 +121,19 @@ export default {
selectedRowKeys: [], selectedRowKeys: [],
selectedRows: [], selectedRows: [],
options: {}, options: {},
optionAlertShow: false optionAlertShow: false,
categories: []
} }
}, },
created() {}, created() {
methods: {} this.loadCategories()
},
methods: {
loadCategories() {
categoryApi.listAll().then(response => {
this.categories = response.data.data
})
}
}
} }
</script> </script>

42
src/views/user/Profile.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="page-header-index-wide page-header-wrapper-grid-content-main"> <div class="page-header-index-wide page-header-wrapper-grid-content-main">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :md="24" :lg="10"> <a-col :lg="10" :md="24">
<a-card :bordered="false" :bodyStyle="{ padding: '16' }"> <a-card :bodyStyle="{ padding: '16' }" :bordered="false">
<div class="profile-center-avatarHolder"> <div class="profile-center-avatarHolder">
<div class="avatar"> <div class="avatar">
<img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" /> <img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" />
@ -22,7 +22,7 @@
</div> </div>
<a-divider /> <a-divider />
<div class="general-profile"> <div class="general-profile">
<a-list itemLayout="horizontal" :loading="countsLoading"> <a-list :loading="countsLoading" itemLayout="horizontal">
<a-list-item>累计发表了 {{ counts.postCount || 0 }} 篇文章。</a-list-item> <a-list-item>累计发表了 {{ counts.postCount || 0 }} 篇文章。</a-list-item>
<a-list-item>累计创建了 {{ counts.linkCount || 0 }} 个标签。</a-list-item> <a-list-item>累计创建了 {{ counts.linkCount || 0 }} 个标签。</a-list-item>
<a-list-item>累计获得了 {{ counts.commentCount || 0 }} 条评论。</a-list-item> <a-list-item>累计获得了 {{ counts.commentCount || 0 }} 条评论。</a-list-item>
@ -33,11 +33,11 @@
</div> </div>
</a-card> </a-card>
</a-col> </a-col>
<a-col :md="24" :lg="14"> <a-col :lg="14" :md="24">
<a-card :bordered="false" title="个人资料" :bodyStyle="{ padding: '0' }"> <a-card :bodyStyle="{ padding: '0' }" :bordered="false" title="个人资料">
<div class="card-container"> <div class="card-container">
<a-tabs type="card"> <a-tabs type="card">
<a-tab-pane tab="基本资料" key="1"> <a-tab-pane key="1" tab="基本资料">
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item label="用户名："> <a-form-item label="用户名：">
<a-input v-model="user.username" /> <a-input v-model="user.username" />
@ -49,31 +49,31 @@
<a-input v-model="user.email" /> <a-input v-model="user.email" />
</a-form-item> </a-form-item>
<a-form-item label="个人说明："> <a-form-item label="个人说明：">
<a-input type="textarea" :autosize="{ minRows: 5 }" v-model="user.description" /> <a-input :autosize="{ minRows: 5 }" type="textarea" v-model="user.description" />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button type="primary" @click="updateProfile">保存</a-button> <a-button @click="updateProfile" type="primary">保存</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-tab-pane> </a-tab-pane>
<a-tab-pane tab="密码" key="2"> <a-tab-pane key="2" tab="密码">
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item label="原密码："> <a-form-item label="原密码：">
<a-input v-model="passwordParam.oldPassword" type="password" /> <a-input type="password" v-model="passwordParam.oldPassword" />
</a-form-item> </a-form-item>
<a-form-item label="新密码："> <a-form-item label="新密码：">
<a-input v-model="passwordParam.newPassword" type="password" /> <a-input type="password" v-model="passwordParam.newPassword" />
</a-form-item> </a-form-item>
<a-form-item label="确认密码："> <a-form-item label="确认密码：">
<a-input v-model="passwordParam.confirmPassword" type="password" /> <a-input type="password" v-model="passwordParam.confirmPassword" />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-button <a-button
type="primary"
:disabled="passwordUpdateButtonDisabled" :disabled="passwordUpdateButtonDisabled"
@click="updatePassword" @click="updatePassword"
>确认更改</a-button type="primary"
> >确认更改
</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-tab-pane> </a-tab-pane>
@ -88,6 +88,7 @@
<script> <script>
import userApi from '@/api/user' import userApi from '@/api/user'
import adminApi from '@/api/admin' import adminApi from '@/api/admin'
export default { export default {
components: {}, components: {},
data() { data() {
@ -127,7 +128,7 @@ export default {
updatePassword() { updatePassword() {
// Check confirm password // Check confirm password
if (this.passwordParam.newPassword !== this.passwordParam.confirmPassword) { if (this.passwordParam.newPassword !== this.passwordParam.confirmPassword) {
this.$message.error('确认密码和新密码不匹配') this.$message.error('确认密码和新密码不匹配！')
return return
} }
@ -136,6 +137,7 @@ export default {
updateProfile() { updateProfile() {
userApi.updateProfile(this.user).then(response => { userApi.updateProfile(this.user).then(response => {
this.user = response.data.data this.user = response.data.data
this.$message.success('资料更新成功！')
}) })
} }
} }
@ -148,9 +150,11 @@ export default {
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
transition: 0.3s; transition: 0.3s;
.profile-center-avatarHolder { .profile-center-avatarHolder {
text-align: center; text-align: center;
margin-bottom: 24px; margin-bottom: 24px;
& > .avatar { & > .avatar {
margin: 0 auto; margin: 0 auto;
width: 104px; width: 104px;
@ -158,11 +162,13 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
img { img {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
.username { .username {
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
font-size: 20px; font-size: 20px;
@ -171,12 +177,14 @@ export default {
margin-bottom: 4px; margin-bottom: 4px;
} }
} }
.profile-center-detail { .profile-center-detail {
p { p {
margin-bottom: 8px; margin-bottom: 8px;
padding-left: 26px; padding-left: 26px;
position: relative; position: relative;
} }
i { i {
position: absolute; position: absolute;
height: 14px; height: 14px;
@ -192,6 +200,7 @@ export default {
.card-container { .card-container {
background: #f5f5f5; background: #f5f5f5;
} }
.card-container > .ant-tabs-card > .ant-tabs-content { .card-container > .ant-tabs-card > .ant-tabs-content {
margin-top: -16px; margin-top: -16px;
} }
@ -214,6 +223,7 @@ export default {
border-color: #fff; border-color: #fff;
background: #fff; background: #fff;
} }
.ant-form-vertical .ant-form-item { .ant-form-vertical .ant-form-item {
padding-bottom: 0; padding-bottom: 0;
} }