inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div class="setting-drawer">
3     <a-drawer
4       width="300"
5       placement="right"
6       @close="onClose"
7       :closable="false"
8       :visible="visible"
9       :drawer-style="{ position: 'absolute' }"
10       style="position: absolute"
11     >
12       <div class="setting-drawer-index-content">
13
14         <div :style="{ marginBottom: '24px' }">
15           <h3 class="setting-drawer-index-title">整体风格设置</h3>
16
17           <div class="setting-drawer-index-blockChecbox">
18             <a-tooltip>
19               <template slot="title">
20                 暗色菜单风格
21               </template>
22               <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
23                 <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
24                 <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
25                   <a-icon type="check"/>
26                 </div>
27               </div>
28             </a-tooltip>
29
30             <a-tooltip>
31               <template slot="title">
32                 亮色菜单风格
33               </template>
34               <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
35                 <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
36                 <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
37                   <a-icon type="check"/>
38                 </div>
39               </div>
40             </a-tooltip>
41           </div>
42         </div>
43
44         <div :style="{ marginBottom: '24px' }">
45           <h3 class="setting-drawer-index-title">主题色</h3>
46
47           <div style="height: 20px">
48             <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
49               <template slot="title">
50                 {{ item.key }}
51               </template>
52               <a-tag :color="item.color" @click="changeColor(item.color)">
53                 <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
54               </a-tag>
55             </a-tooltip>
56
57           </div>
58         </div>
59         <a-divider />
60
61         <div :style="{ marginBottom: '24px' }">
62           <h3 class="setting-drawer-index-title">导航模式</h3>
63
64           <div class="setting-drawer-index-blockChecbox">
65             <a-tooltip>
66               <template slot="title">
67                 侧边栏导航
68               </template>
69               <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
70                 <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">
71                 <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
72                   <a-icon type="check"/>
73                 </div>
74               </div>
75             </a-tooltip>
76
77             <a-tooltip>
78               <template slot="title">
79                 顶部栏导航
80               </template>
81               <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
82                 <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
83                 <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
84                   <a-icon type="check"/>
85                 </div>
86               </div>
87             </a-tooltip>
88           </div>
89           <div :style="{ marginTop: '24px' }">
90             <a-list :split="false">
91               <a-list-item>
92                 <a-tooltip slot="actions">
93                   <template slot="title">
94                     该设定仅 [顶部栏导航] 时有效
95                   </template>
96                   <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
97                     <a-select-option value="Fixed">固定</a-select-option>
98                     <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
99                   </a-select>
100                 </a-tooltip>
101                 <a-list-item-meta>
102                   <div slot="title">内容区域宽度</div>
103                 </a-list-item-meta>
104               </a-list-item>
105               <a-list-item>
106                 <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
107                 <a-list-item-meta>
108                   <div slot="title">固定 Header</div>
109                 </a-list-item-meta>
110               </a-list-item>
111               <a-list-item>
112                 <a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
113                 <a-list-item-meta>
114                   <a-tooltip slot="title" placement="left">
115                     <template slot="title">固定 Header 时可配置</template>
116                     <div :style="{ opacity: !fixedHeader ? '0.5' : '1' }">下滑时隐藏 Header</div>
117                   </a-tooltip>
118                 </a-list-item-meta>
119               </a-list-item>
120               <a-list-item >
121                 <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" />
122                 <a-list-item-meta>
123                   <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div>
124                 </a-list-item-meta>
125               </a-list-item>
126             </a-list>
127           </div>
128         </div>
129         <a-divider />
130
131         <div :style="{ marginBottom: '24px' }">
132           <h3 class="setting-drawer-index-title">其他设置</h3>
133           <div>
134             <a-list :split="false">
135               <a-list-item>
136                 <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
137                 <a-list-item-meta>
138                   <div slot="title">色弱模式</div>
139                 </a-list-item-meta>
140               </a-list-item>
141               <a-list-item>
142                 <a-switch slot="actions" size="small" :defaultChecked="multiTab" @change="onMultiTab" />
143                 <a-list-item-meta>
144                   <div slot="title">多页签模式</div>
145                 </a-list-item-meta>
146               </a-list-item>
147             </a-list>
148           </div>
149         </div>
150         <a-divider />
151         <div :style="{ marginBottom: '24px' }">
152           <a-button
153             @click="doCopy"
154             icon="copy"
155             block
156           >拷贝设置</a-button>
157           <a-alert type="warning" :style="{ marginTop: '24px' }">
158             <span slot="message">
159               配置栏只在开发环境用于预览,生产环境不会展现,请手动修改配置文件。修改配置文件后,需要清空本地缓存和LocalStorage
160               <a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/config/defaultSettings.js" target="_blank">src/config/defaultSettings.js</a>
161             </span>
162           </a-alert>
163         </div>
164       </div>
165       <div class="setting-drawer-index-handle" @click="toggle" slot="handle">
166         <a-icon type="setting" v-if="!visible"/>
167         <a-icon type="close" v-else/>
168       </div>
169     </a-drawer>
170   </div>
171 </template>
172
173 <script>
174 /* import { DetailList } from '@/components'
175 import SettingItem from './SettingItem' */
176 import config from '@/config/defaultSettings'
177 import { updateTheme, updateColorWeak, colorList } from './settingConfig'
178 import { mixin, mixinDevice } from '@/utils/mixin'
179
180 export default {
181   components: {
182     // DetailList,
183     // SettingItem
184   },
185   mixins: [mixin, mixinDevice],
186   data () {
187     return {
188       visible: false,
189       colorList
190     }
191   },
192   watch: {
193
194   },
195   mounted () {
196     updateTheme(this.primaryColor)
197     if (this.colorWeak !== config.colorWeak) {
198       updateColorWeak(this.colorWeak)
199     }
200   },
201   methods: {
202     showDrawer () {
203       this.visible = true
204     },
205     onClose () {
206       this.visible = false
207     },
208     toggle () {
209       this.visible = !this.visible
210     },
211     onColorWeak (checked) {
212       this.$store.dispatch('ToggleWeak', checked)
213       updateColorWeak(checked)
214     },
215     onMultiTab (checked) {
216       this.$store.dispatch('ToggleMultiTab', checked)
217     },
218     handleMenuTheme (theme) {
219       this.$store.dispatch('ToggleTheme', theme)
220     },
221     doCopy () {
222       // get current settings from mixin or this.$store.state.app, pay attention to the property name
223       const text = `export default {
224   primaryColor: '${this.primaryColor}', // primary color of ant design
225   navTheme: '${this.navTheme}', // theme for nav menu
226   layout: '${this.layoutMode}', // nav menu position: sidemenu or topmenu
227   contentWidth: '${this.contentWidth}', // layout of content: Fluid or Fixed, only works when layout is topmenu
228   fixedHeader: ${this.fixedHeader}, // sticky header
229   fixSiderbar: ${this.fixSiderbar}, // sticky siderbar
230   autoHideHeader: ${this.autoHideHeader}, //  auto hide header
231   colorWeak: ${this.colorWeak},
232   multiTab: ${this.multiTab},
233   production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true',
234   // vue-ls options
235   storageOptions: {
236     namespace: 'pro__',
237     name: 'ls',
238     storage: 'local',
239   }
240 }`
241       this.$copyText(text).then(message => {
242         console.log('copy', message)
243         this.$message.success('复制完毕')
244       }).catch(err => {
245         console.log('copy.err', err)
246         this.$message.error('复制失败')
247       })
248     },
249     handleLayout (mode) {
250       this.$store.dispatch('ToggleLayoutMode', mode)
251       // 因为顶部菜单不能固定左侧菜单栏,所以强制关闭
252       this.handleFixSiderbar(false)
253     },
254     handleContentWidthChange (type) {
255       this.$store.dispatch('ToggleContentWidth', type)
256     },
257     changeColor (color) {
258       if (this.primaryColor !== color) {
259         this.$store.dispatch('ToggleColor', color)
260         updateTheme(color)
261       }
262     },
263     handleFixedHeader (fixed) {
264       this.$store.dispatch('ToggleFixedHeader', fixed)
265     },
266     handleFixedHeaderHidden (autoHidden) {
267       this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
268     },
269     handleFixSiderbar (fixed) {
270       if (this.layoutMode === 'topmenu') {
271         this.$store.dispatch('ToggleFixSiderbar', false)
272         return
273       }
274       this.$store.dispatch('ToggleFixSiderbar', fixed)
275     }
276   }
277 }
278 </script>
279
280 <style lang="less" scoped>
281
282   .setting-drawer-index-content {
283
284     .setting-drawer-index-blockChecbox {
285       display: flex;
286
287       .setting-drawer-index-item {
288         margin-right: 16px;
289         position: relative;
290         border-radius: 4px;
291         cursor: pointer;
292
293         img {
294           width: 48px;
295         }
296
297         .setting-drawer-index-selectIcon {
298           position: absolute;
299           top: 0;
300           right: 0;
301           width: 100%;
302           padding-top: 15px;
303           padding-left: 24px;
304           height: 100%;
305           color: #1890ff;
306           font-size: 14px;
307           font-weight: 700;
308         }
309       }
310     }
311     .setting-drawer-theme-color-colorBlock {
312       width: 20px;
313       height: 20px;
314       border-radius: 2px;
315       float: left;
316       cursor: pointer;
317       margin-right: 8px;
318       padding-left: 0px;
319       padding-right: 0px;
320       text-align: center;
321       color: #fff;
322       font-weight: 700;
323
324       i {
325         font-size: 14px;
326       }
327     }
328   }
329
330   .setting-drawer-index-handle {
331     position: absolute;
332     top: 240px;
333     background: #1890ff;
334     width: 48px;
335     height: 48px;
336     right: 300px;
337     display: flex;
338     justify-content: center;
339     align-items: center;
340     cursor: pointer;
341     pointer-events: auto;
342     z-index: 1001;
343     text-align: center;
344     font-size: 16px;
345     border-radius: 4px 0 0 4px;
346
347     i {
348       color: rgb(255, 255, 255);
349       font-size: 20px;
350     }
351   }
352 </style>