inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <script>
I 2 import { colorList } from '@/components/SettingDrawer/settingConfig'
3 import ASwitch from 'ant-design-vue/es/switch'
4 import AList from 'ant-design-vue/es/list'
5 import AListItem from 'ant-design-vue/es/list/Item'
6 import { mixin } from '@/utils/mixin'
7
8 const Meta = AListItem.Meta
9
10 export default {
11   components: {
12     AListItem,
13     AList,
14     ASwitch,
15     Meta
16   },
17   mixins: [mixin],
18   data () {
19     return {
20     }
21   },
22   filters: {
23     themeFilter (theme) {
24       const themeMap = {
25         'dark': '暗色',
26         'light': '白色'
27       }
28       return themeMap[theme]
29     }
30   },
31   methods: {
32     colorFilter (color) {
33       const c = colorList.find(o => o.color === color)
34       return c && c.key
35     },
36
37     onChange (checked) {
38       if (checked) {
39         this.$store.dispatch('ToggleTheme', 'dark')
40       } else {
41         this.$store.dispatch('ToggleTheme', 'light')
42       }
43     }
44   },
45   render () {
46     return (
47       <AList itemLayout="horizontal">
48         <AListItem>
49           <Meta>
50             <a slot="title">风格配色</a>
51             <span slot="description">
52                 整体风格配色设置
53             </span>
54           </Meta>
55           <div slot="actions">
56             <ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
57           </div>
58         </AListItem>
59         <AListItem>
60           <Meta>
61             <a slot="title">主题色</a>
62             <span slot="description">
63                 页面风格配色: <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
64             </span>
65           </Meta>
66         </AListItem>
67       </AList>
68     )
69   }
70 }
71 </script>
72
73 <style scoped>
74
75 </style>