mirror of https://github.com/halo-dev/halo
ui build
ruibaby
parent
8acbb1b57b
commit
10e9e91c96
|
|
@ -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
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<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="1">待审核</a-select-option>
|
||||
<a-select-option value="2">回收站</a-select-option>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</a-dropdown>
|
||||
</div>
|
||||
<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>
|
||||
<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
|
||||
<span slot="tags" slot-scope="tags">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,14 @@
|
|||
<a-row :gutter="12">
|
||||
<a-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
|
||||
<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-col>
|
||||
<a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
|
||||
|
|
|
|||
|
|
@ -15,29 +15,23 @@
|
|||
|
||||
<a-card>
|
||||
<div id="editor">
|
||||
<mavon-editor v-model="value"/>
|
||||
<mavon-editor :toolbars="markdownOption" v-model="value" :boxShadow="false" :ishljs = "true"/>
|
||||
</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"
|
||||
>
|
||||
<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/archives/'+postUrl">
|
||||
<a-input v-model="postUrl"/>
|
||||
<a-form-item label="文章路径：" :help="'https://localhost:8090/archives/' + postUrl">
|
||||
<a-input v-model="postUrl" />
|
||||
</a-form-item>
|
||||
<a-form-item label="文章密码：">
|
||||
<a-input type="password"/>
|
||||
<a-input type="password" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否开启评论：">
|
||||
<a-select defaultValue="1">
|
||||
|
|
@ -48,7 +42,7 @@
|
|||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-divider />
|
||||
|
||||
<div :style="{ marginBottom: '16px' }">
|
||||
<h3 class="post-setting-drawer-title">分类目录</h3>
|
||||
|
|
@ -58,7 +52,7 @@
|
|||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-divider />
|
||||
|
||||
<div :style="{ marginBottom: '16px' }">
|
||||
<h3 class="post-setting-drawer-title">标签</h3>
|
||||
|
|
@ -66,27 +60,25 @@
|
|||
<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-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/>
|
||||
<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">
|
||||
<img class="img" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-divider />
|
||||
</div>
|
||||
<div class="postControl">
|
||||
<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 'mavon-editor/dist/css/index.css'
|
||||
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 = [
|
||||
{
|
||||
title: '学习记录',
|
||||
|
|
@ -144,7 +156,8 @@ export default {
|
|||
drawerWidth: '460',
|
||||
postUrl: 'hello-world',
|
||||
tags: [],
|
||||
treeData
|
||||
treeData,
|
||||
markdownOption: toolbars
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -206,7 +219,12 @@ export default {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post-thum .img{
|
||||
.post-thum .img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mavonEditor {
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<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="1">草稿箱</a-select-option>
|
||||
<a-select-option value="2">回收站</a-select-option>
|
||||
|
|
@ -20,10 +20,8 @@
|
|||
</a-col>
|
||||
<a-col :md="6" :sm="24">
|
||||
<a-form-item label="分类目录">
|
||||
<a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
|
||||
<a-select-option value="0">xx</a-select-option>
|
||||
<a-select-option value="1">xx</a-select-option>
|
||||
<a-select-option value="2">xx</a-select-option>
|
||||
<a-select v-model="queryParam.categoryId" placeholder="请选择分类">
|
||||
<a-select-option v-for="category in categories" :key="category.id">{{ category.name }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
|
@ -39,7 +37,9 @@
|
|||
</div>
|
||||
|
||||
<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-menu slot="overlay">
|
||||
<a-menu-item key="1"> <a-icon type="delete" />回收站 </a-menu-item>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</a-dropdown>
|
||||
</div>
|
||||
<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>
|
||||
<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
|
||||
<span slot="tags" slot-scope="tags">
|
||||
|
|
@ -71,6 +71,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import categoryApi from '@/api/category'
|
||||
export default {
|
||||
name: 'PostList',
|
||||
components: {},
|
||||
|
|
@ -120,10 +121,19 @@ export default {
|
|||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
options: {},
|
||||
optionAlertShow: false
|
||||
optionAlertShow: false,
|
||||
categories: []
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
created() {
|
||||
this.loadCategories()
|
||||
},
|
||||
methods: {
|
||||
loadCategories() {
|
||||
categoryApi.listAll().then(response => {
|
||||
this.categories = response.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide page-header-wrapper-grid-content-main">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="24" :lg="10">
|
||||
<a-card :bordered="false" :bodyStyle="{ padding: '16' }">
|
||||
<a-col :lg="10" :md="24">
|
||||
<a-card :bodyStyle="{ padding: '16' }" :bordered="false">
|
||||
<div class="profile-center-avatarHolder">
|
||||
<div class="avatar">
|
||||
<img :src="user.avatar || 'https://gravatar.loli.net/avatar/?s=256&d=mm'" />
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
<a-divider />
|
||||
<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.linkCount || 0 }} 个标签。</a-list-item>
|
||||
<a-list-item>累计获得了 {{ counts.commentCount || 0 }} 条评论。</a-list-item>
|
||||
|
|
@ -33,11 +33,11 @@
|
|||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="24" :lg="14">
|
||||
<a-card :bordered="false" title="个人资料" :bodyStyle="{ padding: '0' }">
|
||||
<a-col :lg="14" :md="24">
|
||||
<a-card :bodyStyle="{ padding: '0' }" :bordered="false" title="个人资料">
|
||||
<div class="card-container">
|
||||
<a-tabs type="card">
|
||||
<a-tab-pane tab="基本资料" key="1">
|
||||
<a-tab-pane key="1" tab="基本资料">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="用户名：">
|
||||
<a-input v-model="user.username" />
|
||||
|
|
@ -49,31 +49,31 @@
|
|||
<a-input v-model="user.email" />
|
||||
</a-form-item>
|
||||
<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-button type="primary" @click="updateProfile">保存</a-button>
|
||||
<a-button @click="updateProfile" type="primary">保存</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="密码" key="2">
|
||||
<a-tab-pane key="2" tab="密码">
|
||||
<a-form layout="vertical">
|
||||
<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 label="新密码：">
|
||||
<a-input v-model="passwordParam.newPassword" type="password" />
|
||||
<a-input type="password" v-model="passwordParam.newPassword" />
|
||||
</a-form-item>
|
||||
<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-button
|
||||
type="primary"
|
||||
:disabled="passwordUpdateButtonDisabled"
|
||||
@click="updatePassword"
|
||||
>确认更改</a-button
|
||||
>
|
||||
type="primary"
|
||||
>确认更改
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
|
|
@ -88,6 +88,7 @@
|
|||
<script>
|
||||
import userApi from '@/api/user'
|
||||
import adminApi from '@/api/admin'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
|
|
@ -127,7 +128,7 @@ export default {
|
|||
updatePassword() {
|
||||
// Check confirm password
|
||||
if (this.passwordParam.newPassword !== this.passwordParam.confirmPassword) {
|
||||
this.$message.error('确认密码和新密码不匹配')
|
||||
this.$message.error('确认密码和新密码不匹配！')
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -136,6 +137,7 @@ export default {
|
|||
updateProfile() {
|
||||
userApi.updateProfile(this.user).then(response => {
|
||||
this.user = response.data.data
|
||||
this.$message.success('资料更新成功！')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -148,9 +150,11 @@ export default {
|
|||
height: 100%;
|
||||
min-height: 100%;
|
||||
transition: 0.3s;
|
||||
|
||||
.profile-center-avatarHolder {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
|
||||
& > .avatar {
|
||||
margin: 0 auto;
|
||||
width: 104px;
|
||||
|
|
@ -158,11 +162,13 @@ export default {
|
|||
margin-bottom: 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 20px;
|
||||
|
|
@ -171,12 +177,14 @@ export default {
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-center-detail {
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
padding-left: 26px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
|
|
@ -192,6 +200,7 @@ export default {
|
|||
.card-container {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.card-container > .ant-tabs-card > .ant-tabs-content {
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
|
@ -214,6 +223,7 @@ export default {
|
|||
border-color: #fff;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ant-form-vertical .ant-form-item {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue