|
|
@@ -10,31 +10,32 @@
|
|
|
style="position: absolute"
|
|
|
>
|
|
|
<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>
|
|
|
+ <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>
|
|
|
|
|
|
<a-tooltip>
|
|
|
- <template slot="title">
|
|
|
- 亮色菜单风格
|
|
|
- </template>
|
|
|
+ <template slot="title">亮色菜单风格</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>
|
|
|
@@ -45,15 +46,16 @@
|
|
|
<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">
|
|
|
- {{ item.key }}
|
|
|
- </template>
|
|
|
+ <a-tooltip
|
|
|
+ class="setting-drawer-theme-color-colorBlock"
|
|
|
+ v-for="(item, index) in colorList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <template slot="title">{{ item.key }}</template>
|
|
|
<a-tag :color="item.color" @click="changeColor(item.color)">
|
|
|
<a-icon type="check" v-if="item.color === primaryColor"></a-icon>
|
|
|
</a-tag>
|
|
|
</a-tooltip>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
@@ -63,25 +65,27 @@
|
|
|
|
|
|
<div class="setting-drawer-index-blockChecbox">
|
|
|
<a-tooltip>
|
|
|
- <template slot="title">
|
|
|
- 侧边栏导航
|
|
|
- </template>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
@@ -90,10 +94,13 @@
|
|
|
<a-list :split="false">
|
|
|
<a-list-item>
|
|
|
<a-tooltip slot="actions">
|
|
|
- <template slot="title">
|
|
|
- 该设定仅 [顶部栏导航] 时有效
|
|
|
- </template>
|
|
|
- <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
|
|
|
+ <template slot="title">该设定仅 [顶部栏导航] 时有效</template>
|
|
|
+ <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>
|
|
|
@@ -103,13 +110,24 @@
|
|
|
</a-list-item-meta>
|
|
|
</a-list-item>
|
|
|
<a-list-item>
|
|
|
- <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
|
|
|
+ <a-switch
|
|
|
+ slot="actions"
|
|
|
+ size="small"
|
|
|
+ :defaultChecked="fixedHeader"
|
|
|
+ @change="handleFixedHeader"
|
|
|
+ />
|
|
|
<a-list-item-meta>
|
|
|
<div slot="title">固定 Header</div>
|
|
|
</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>
|
|
|
<a-tooltip slot="title" placement="left">
|
|
|
<template slot="title">固定 Header 时可配置</template>
|
|
|
@@ -117,10 +135,19 @@
|
|
|
</a-tooltip>
|
|
|
</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>
|
|
|
@@ -133,13 +160,23 @@
|
|
|
<div>
|
|
|
<a-list :split="false">
|
|
|
<a-list-item>
|
|
|
- <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
|
|
|
+ <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-switch
|
|
|
+ slot="actions"
|
|
|
+ size="small"
|
|
|
+ :defaultChecked="multiTab"
|
|
|
+ @change="onMultiTab"
|
|
|
+ />
|
|
|
<a-list-item-meta>
|
|
|
<div slot="title">多页签模式</div>
|
|
|
</a-list-item-meta>
|
|
|
@@ -149,22 +186,21 @@
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
<div :style="{ marginBottom: '24px' }">
|
|
|
- <a-button
|
|
|
- @click="doCopy"
|
|
|
- icon="copy"
|
|
|
- block
|
|
|
- >拷贝设置</a-button>
|
|
|
+ <a-button @click="doCopy" icon="copy" block>拷贝设置</a-button>
|
|
|
<a-alert type="warning" :style="{ marginTop: '24px' }">
|
|
|
<span slot="message">
|
|
|
配置栏只在开发环境用于预览,生产环境不会展现,请手动修改配置文件。修改配置文件后,需要清空本地缓存和LocalStorage
|
|
|
- <a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/config/defaultSettings.js" target="_blank">src/config/defaultSettings.js</a>
|
|
|
+ <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" slot="handle">
|
|
|
- <a-icon type="setting" v-if="!visible"/>
|
|
|
- <a-icon type="close" v-else/>
|
|
|
+ <a-icon type="setting" v-if="!visible" />
|
|
|
+ <a-icon type="close" v-else />
|
|
|
</div>
|
|
|
</a-drawer>
|
|
|
</div>
|
|
|
@@ -269,75 +305,73 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.setting-drawer-index-content {
|
|
|
+ .setting-drawer-index-blockChecbox {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .setting-drawer-index-content {
|
|
|
-
|
|
|
- .setting-drawer-index-blockChecbox {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .setting-drawer-index-item {
|
|
|
- margin-right: 16px;
|
|
|
- position: relative;
|
|
|
- border-radius: 4px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 48px;
|
|
|
- }
|
|
|
+ .setting-drawer-index-item {
|
|
|
+ margin-right: 16px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- .setting-drawer-index-selectIcon {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 100%;
|
|
|
- padding-top: 15px;
|
|
|
- padding-left: 24px;
|
|
|
- height: 100%;
|
|
|
- color: #1890ff;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 48px;
|
|
|
}
|
|
|
- }
|
|
|
- .setting-drawer-theme-color-colorBlock {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 2px;
|
|
|
- float: left;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 8px;
|
|
|
- padding-left: 0px;
|
|
|
- padding-right: 0px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-weight: 700;
|
|
|
|
|
|
- i {
|
|
|
- font-size: 14px;
|
|
|
+ .setting-drawer-index-selectIcon {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 24px;
|
|
|
+ height: 100%;
|
|
|
+ color: #1890ff;
|
|
|
+ font-size: @font-size-base;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .setting-drawer-index-handle {
|
|
|
- position: absolute;
|
|
|
- top: 240px;
|
|
|
- background: #1890ff;
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- right: 300px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ .setting-drawer-theme-color-colorBlock {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 2px;
|
|
|
+ float: left;
|
|
|
cursor: pointer;
|
|
|
- pointer-events: auto;
|
|
|
- z-index: 1001;
|
|
|
+ margin-right: 8px;
|
|
|
+ padding-left: 0px;
|
|
|
+ padding-right: 0px;
|
|
|
text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- border-radius: 4px 0 0 4px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
|
|
|
i {
|
|
|
- color: rgb(255, 255, 255);
|
|
|
- font-size: 20px;
|
|
|
+ font-size: @font-size-base;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.setting-drawer-index-handle {
|
|
|
+ position: absolute;
|
|
|
+ top: 240px;
|
|
|
+ background: #1890ff;
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ right: 300px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ pointer-events: auto;
|
|
|
+ z-index: 1001;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|