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-03 01:28:04 +08:00
parent 551a2946a7
commit 0cdc6ae5b4
8 changed files with 149 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/global.less
View File

@ -504,7 +504,4 @@ body {
}
}
}
.ant-card-body{
padding: 16px!important;
}
}

5
src/components/page/GlobalLayout.vue
View File

@ -67,7 +67,6 @@
<a-layout-footer style="padding: 0">
<global-footer />
</a-layout-footer>
<setting-drawer></setting-drawer>
</a-layout>
</a-layout>
</template>
@ -76,7 +75,6 @@
import SideMenu from '@/components/menu/SideMenu'
import GlobalHeader from '@/components/page/GlobalHeader'
import GlobalFooter from '@/components/page/GlobalFooter'
import SettingDrawer from '@/components/setting/SettingDrawer'
import { asyncRouterMap } from '@/config/router.config.js'
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
@ -87,8 +85,7 @@ export default {
components: {
SideMenu,
GlobalHeader,
GlobalFooter,
SettingDrawer
GlobalFooter
},
mixins: [mixin, mixinDevice],
data() {

153
src/components/setting/SettingDrawer.vue
View File

@ -8,21 +8,20 @@
:visible="visible"
:getContainer="() => $refs.settingDrawer"
:style="{}"
:mask="false"
>
<div class="setting-drawer-index-content">
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">整体风格设置</h3>
<div class="setting-drawer-index-blockChecbox">
<a-tooltip>
<template slot="title">
暗色菜单风格
</template>
<div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
<img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark" />
<div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
<a-icon type="check"/>
<a-icon type="check" />
</div>
</div>
</a-tooltip>
@ -32,9 +31,9 @@
亮色菜单风格
</template>
<div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
<img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light" />
<div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
<a-icon type="check"/>
<a-icon type="check" />
</div>
</div>
</a-tooltip>
@ -43,7 +42,6 @@
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">主题色</h3>
<div style="height: 20px">
<a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
<template slot="title">
@ -53,7 +51,6 @@
<a-icon type="check" v-if="item.color === primaryColor"></a-icon>
</a-tag>
</a-tooltip>
</div>
</div>
<a-divider />
@ -62,29 +59,19 @@
<h3 class="setting-drawer-index-title">导航模式</h3>
<div class="setting-drawer-index-blockChecbox">
<a-tooltip>
<template slot="title">
侧边栏导航
</template>
<div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">
<img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu" />
<div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
<a-icon type="check"/>
<a-icon type="check" />
</div>
</div>
</a-tooltip>
<a-tooltip>
<template slot="title">
顶部栏导航
</template>
<div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu" />
<div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
<a-icon type="check"/>
<a-icon type="check" />
</div>
</div>
</a-tooltip>
</div>
<div :style="{ marginTop: '24px' }">
<a-list :split="false">
@ -93,7 +80,12 @@
<template slot="title">
该设定仅 [顶部栏导航] 时有效
</template>
<a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
<a-select
size="small"
style="width: 80px;"
:defaultValue="contentWidth"
@change="handleContentWidthChange"
>
<a-select-option value="Fixed">固定</a-select-option>
<a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
</a-select>
@ -109,60 +101,45 @@
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
<a-switch
slot="actions"
size="small"
:disabled="!fixedHeader"
:defaultChecked="autoHideHeader"
@change="handleFixedHeaderHidden"
/>
<a-list-item-meta>
<div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">下滑时隐藏 Header</div>
<div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">
下滑时隐藏 Header
</div>
</a-list-item-meta>
</a-list-item>
<a-list-item >
<a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" />
<a-list-item>
<a-switch
slot="actions"
size="small"
:disabled="layoutMode === 'topmenu'"
:defaultChecked="fixSiderbar"
@change="handleFixSiderbar"
/>
<a-list-item-meta>
<div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div>
<div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">
固定侧边菜单
</div>
</a-list-item-meta>
</a-list-item>
</a-list>
</div>
</div>
<a-divider />
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">其他设置</h3>
<div>
<a-list :split="false">
<a-list-item>
<a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
<a-list-item-meta>
<div slot="title">色弱模式</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
<a-switch slot="actions" size="small" :defaultChecked="multiTab" @change="onMultiTab" />
<a-list-item-meta>
<div slot="title">多页签模式</div>
</a-list-item-meta>
<a-icon type="double-right" @click="toggle" class="iconClose"/>
</a-list-item>
</a-list>
</div>
</div>
<a-divider />
<div :style="{ marginBottom: '24px' }">
<a-button
@click="doCopy"
icon="copy"
block
>拷贝设置</a-button>
<a-alert type="warning" :style="{ marginTop: '24px' }">
<span slot="message">
配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
<a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/config/defaultSettings.js" target="_blank">src/config/defaultSettings.js</a>
</span>
</a-alert>
</div>
</div>
<div class="setting-drawer-index-handle" @click="toggle">
<a-icon type="setting" v-if="!visible"/>
<a-icon type="close" v-else/>
</div>
</a-drawer>
</div>
</template>
@ -171,7 +148,7 @@
import DetailList from '@/components/tools/DetailList'
import SettingItem from '@/components/setting/SettingItem'
import config from '@/config/defaultSettings'
import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
import { updateTheme, colorList } from '@/components/tools/setting'
import { mixin, mixinDevice } from '@/utils/mixin'
export default {
@ -187,9 +164,7 @@ export default {
baseConfig: Object.assign({}, config)
}
},
watch: {
},
watch: {},
mounted() {
const vm = this
setTimeout(() => {
@ -199,9 +174,6 @@ export default {
if (this.primaryColor !== config.primaryColor) {
updateTheme(this.primaryColor)
}
if (this.colorWeak !== config.colorWeak) {
updateColorWeak(this.colorWeak)
}
},
methods: {
showDrawer() {
@ -213,45 +185,10 @@ export default {
toggle() {
this.visible = !this.visible
},
onColorWeak(checked) {
this.baseConfig.colorWeak = checked
this.$store.dispatch('ToggleWeak', checked)
updateColorWeak(checked)
},
onMultiTab(checked) {
this.baseConfig.multiTab = checked
this.$store.dispatch('ToggleMultiTab', checked)
},
handleMenuTheme(theme) {
this.baseConfig.navTheme = theme
this.$store.dispatch('ToggleTheme', theme)
},
doCopy() {
const text = `export default {
primaryColor: '${this.baseConfig.primaryColor}', // primary color of ant design
navTheme: '${this.baseConfig.navTheme}', // theme for nav menu
layout: '${this.baseConfig.layout}', // nav menu position: sidemenu or topmenu
contentWidth: '${this.baseConfig.contentWidth}', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: ${this.baseConfig.fixedHeader}, // sticky header
fixSiderbar: ${this.baseConfig.fixSiderbar}, // sticky siderbar
autoHideHeader: ${this.baseConfig.autoHideHeader}, // auto hide header
colorWeak: ${this.baseConfig.colorWeak},
multiTab: ${this.baseConfig.multiTab},
// vue-ls options
storageOptions: {
namespace: 'pro__',
name: 'ls',
storage: 'local',
}
}`
this.$copyText(text).then(message => {
console.log('copy', message)
this.$message.success('复制完毕')
}).catch(err => {
console.log('copy.err', err)
this.$message.error('复制失败')
})
},
handleLayout(mode) {
this.baseConfig.layout = mode
this.$store.dispatch('ToggleLayoutMode', mode)
@ -292,9 +229,7 @@ export default {
</script>
<style lang="less" scoped>
.setting-drawer-index-content {
.setting-drawer-index-content {
.setting-drawer-index-blockChecbox {
display: flex;
@ -339,9 +274,13 @@ export default {
font-size: 14px;
}
}
.iconClose{
font-size: 24px;
cursor: pointer;
}
}
.setting-drawer-index-handle {
.setting-drawer-index-handle {
position: absolute;
top: 240px;
background: #1890ff;
@ -362,5 +301,5 @@ export default {
color: rgb(255, 255, 255);
font-size: 20px;
}
}
}
</style>

2
src/components/tools/HeaderComment.vue
View File

@ -25,7 +25,7 @@
</template>
<span @click="fetchComment" class="header-comment">
<a-badge dot>
<a-icon type="bell"/>
<a-icon type="bell" />
</a-badge>
</span>
</a-popover>

18
src/components/tools/UserMenu.vue
View File

@ -2,12 +2,12 @@
<div class="user-wrapper">
<a href="/" target="_blank">
<span class="action">
<a-icon type="link"></a-icon>
<a-icon type="link" />
</span>
</a>
<a href="javascript:void(0)" @click="showOptionModal">
<span class="action">
<a-icon type="setting"></a-icon>
<a-icon type="setting" />
</span>
</a>
<header-comment class="action"/>
@ -31,25 +31,30 @@
</a-menu-item>
</a-menu>
</a-dropdown>
<a-modal title="样式设置" v-model="optionVisible"></a-modal>
<setting-drawer ref="drawer"></setting-drawer>
</div>
</template>
<script>
import HeaderComment from './HeaderComment'
import SettingDrawer from '@/components/setting/SettingDrawer'
import { mapActions, mapGetters } from 'vuex'
export default {
name: 'UserMenu',
components: {
HeaderComment
HeaderComment,
SettingDrawer
},
data() {
return {
optionVisible: false,
optionVisible: true,
avatar: 'https://gravatar.loli.net/avatar/?s=256&d=mm'
}
},
mounted() {
this.optionVisible = this.$refs.drawer.visible
},
methods: {
...mapActions(['Logout']),
...mapGetters(['nickname']),
@ -76,7 +81,8 @@ export default {
})
},
showOptionModal() {
this.optionVisible = true
this.optionVisible = this.$refs.drawer.visible
this.$refs.drawer.toggle()
}
}
}

21
src/components/tools/setting.js
View File

@ -5,11 +5,11 @@ let lessNodesAppended
const colorList = [
{
key: '薄暮',
key: '红色',
color: '#F5222D'
},
{
key: '火山',
key: '浅红色',
color: '#FA541C'
},
{
@ -17,23 +17,23 @@ const colorList = [
color: '#FAAD14'
},
{
key: '明青',
key: '青色',
color: '#13C2C2'
},
{
key: '极光绿',
key: '绿色',
color: '#52C41A'
},
{
key: '拂晓蓝（默认）',
key: '默认',
color: '#1890FF'
},
{
key: '极客蓝',
key: '蓝色',
color: '#2F54EB'
},
{
key: '酱紫',
key: '紫色',
color: '#722ED1'
}
]
@ -95,9 +95,4 @@ const updateTheme = primaryColor => {
}
}
const updateColorWeak = colorWeak => {
// document.body.className = colorWeak ? 'colorWeak' : '';
colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
}
export { updateTheme, colorList, updateColorWeak }
export { updateTheme, colorList }

8
src/views/system/OptionForm.vue
View File

@ -600,16 +600,16 @@ export default {
},
handleAttachChange(e) {
switch (e) {
case '0':
case '3':
case 'local':
case 'smms':
this.upyunFormHidden = false
this.qiniuFormHidden = false
break
case '1':
case 'ypyun':
this.upyunFormHidden = true
this.qiniuFormHidden = false
break
case '2':
case 'qnyun':
this.qiniuFormHidden = true
this.upyunFormHidden = false
break

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

@ -1,14 +1,11 @@
<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">
<a-col :md="24" :lg="10">
<a-card :bordered="false" :bodyStyle="{ padding: '16' }">
<div class="profile-center-avatarHolder">
<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'" />
</div>
<div class="username">{{ user.nickname }}</div>
<div class="bio">{{ user.description }}</div>
@ -25,10 +22,7 @@
</div>
<a-divider />
<div class="general-profile">
<a-list
itemLayout="horizontal"
:loading="countsLoading"
>
<a-list itemLayout="horizontal" :loading="countsLoading">
<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>
@ -39,21 +33,11 @@
</div>
</a-card>
</a-col>
<a-col
:md="24"
:lg="14"
>
<a-card
:bordered="false"
title="个人资料"
:bodyStyle="{ padding: '0' }"
>
<a-col :md="24" :lg="14">
<a-card :bordered="false" title="个人资料" :bodyStyle="{ padding: '0' }">
<div class="card-container">
<a-tabs type="card">
<a-tab-pane
tab="基本资料"
key="1"
>
<a-tab-pane tab="基本资料" key="1">
<a-form layout="vertical">
<a-form-item label="用户名：">
<a-input v-model="user.username" />
@ -65,49 +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 type="textarea" :autosize="{ minRows: 5 }" v-model="user.description" />
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="updateProfile"
>保存</a-button>
<a-button type="primary" @click="updateProfile">保存</a-button>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane
tab="密码"
key="2"
>
<a-tab-pane tab="密码" key="2">
<a-form layout="vertical">
<a-form-item label="原密码：">
<a-input
v-model="passwordParam.oldPassword"
type="password"
/>
<a-input v-model="passwordParam.oldPassword" type="password" />
</a-form-item>
<a-form-item label="新密码：">
<a-input
v-model="passwordParam.newPassword"
type="password"
/>
<a-input v-model="passwordParam.newPassword" type="password" />
</a-form-item>
<a-form-item label="确认密码：">
<a-input
v-model="passwordParam.confirmPassword"
type="password"
/>
<a-input v-model="passwordParam.confirmPassword" type="password" />
</a-form-item>
<a-form-item>
<a-button
type="primary"
:disabled="passwordUpdateButtonDisabled"
@click="updatePassword"
>确认更改</a-button>
>确认更改</a-button
>
</a-form-item>
</a-form>
</a-tab-pane>