Newer
Older
KaiFengPC / src / layout / components / Settings / index.vue
@鲁yixuan 鲁yixuan on 14 Aug 7 KB updata
  1. <template>
  2. <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
  3. <div class="setting-drawer-title">
  4. <h3 class="drawer-title">主题风格设置</h3>
  5. </div>
  6. <div class="setting-drawer-block-checbox">
  7. <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
  8. <img src="@/assets/images/setting/dark.svg" alt="dark" />
  9. <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
  10. <i aria-label="图标: check" class="anticon anticon-check">
  11. <svg
  12. viewBox="64 64 896 896"
  13. data-icon="check"
  14. width="1em"
  15. height="1em"
  16. :fill="theme"
  17. aria-hidden="true"
  18. focusable="false"
  19. class
  20. >
  21. <path
  22. d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
  23. />
  24. </svg>
  25. </i>
  26. </div>
  27. </div>
  28. <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
  29. <img src="@/assets/images/setting/light.svg" alt="light" />
  30. <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
  31. <i aria-label="图标: check" class="anticon anticon-check">
  32. <svg
  33. viewBox="64 64 896 896"
  34. data-icon="check"
  35. width="1em"
  36. height="1em"
  37. :fill="theme"
  38. aria-hidden="true"
  39. focusable="false"
  40. class
  41. >
  42. <path
  43. d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
  44. />
  45. </svg>
  46. </i>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="drawer-item">
  51. <span>主题颜色</span>
  52. <span class="comp-style">
  53. <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" />
  54. </span>
  55. </div>
  56. <el-divider />
  57.  
  58. <h3 class="drawer-title">系统布局配置</h3>
  59.  
  60. <div class="drawer-item">
  61. <span>开启 TopNav</span>
  62. <span class="comp-style">
  63. <el-switch v-model="topNav" class="drawer-switch" />
  64. </span>
  65. </div>
  66.  
  67. <div class="drawer-item">
  68. <span>开启 Tags-Views</span>
  69. <span class="comp-style">
  70. <el-switch v-model="tagsView" class="drawer-switch" />
  71. </span>
  72. </div>
  73.  
  74. <div class="drawer-item">
  75. <span>固定 Header</span>
  76. <span class="comp-style">
  77. <el-switch v-model="fixedHeader" class="drawer-switch" />
  78. </span>
  79. </div>
  80.  
  81. <div class="drawer-item">
  82. <span>显示 Logo</span>
  83. <span class="comp-style">
  84. <el-switch v-model="sidebarLogo" class="drawer-switch" />
  85. </span>
  86. </div>
  87.  
  88. <div class="drawer-item">
  89. <span>动态标题</span>
  90. <span class="comp-style">
  91. <el-switch v-model="dynamicTitle" class="drawer-switch" />
  92. </span>
  93. </div>
  94.  
  95. <el-divider />
  96.  
  97. <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">确定配置</el-button>
  98. <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
  99. </el-drawer>
  100. </template>
  101.  
  102. <script setup>
  103. import variables from '@/assets/styles/variables.module.scss';
  104. import originElementPlus from 'element-plus/theme-chalk/index.css';
  105. import axios from 'axios';
  106. import { ElLoading, ElMessage } from 'element-plus';
  107. import { useDynamicTitle } from '@/utils/dynamicTitle';
  108. import useAppStore from '@/store/modules/app';
  109. import useSettingsStore from '@/store/modules/settings';
  110. import usePermissionStore from '@/store/modules/permission';
  111. import { handleThemeStyle } from '@/utils/theme';
  112.  
  113. const { proxy } = getCurrentInstance();
  114. const appStore = useAppStore();
  115. const settingsStore = useSettingsStore();
  116. const permissionStore = usePermissionStore();
  117. const showSettings = ref(false);
  118. const theme = ref(settingsStore.theme);
  119. const sideTheme = ref(settingsStore.sideTheme);
  120. const storeSettings = computed(() => settingsStore);
  121. const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
  122.  
  123. /** 是否需要topnav */
  124. const topNav = computed({
  125. get: () => storeSettings.value.topNav,
  126. set: val => {
  127. settingsStore.changeSetting({ key: 'topNav', value: val });
  128. if (!val) {
  129. appStore.toggleSideBarHide(false);
  130. permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
  131. }
  132. },
  133. });
  134. /** 是否需要tagview */
  135. const tagsView = computed({
  136. get: () => storeSettings.value.tagsView,
  137. set: val => {
  138. settingsStore.changeSetting({ key: 'tagsView', value: val });
  139. },
  140. });
  141. /**是否需要固定头部 */
  142. const fixedHeader = computed({
  143. get: () => storeSettings.value.fixedHeader,
  144. set: val => {
  145. settingsStore.changeSetting({ key: 'fixedHeader', value: val });
  146. },
  147. });
  148. /**是否需要侧边栏的logo */
  149. const sidebarLogo = computed({
  150. get: () => storeSettings.value.sidebarLogo,
  151. set: val => {
  152. settingsStore.changeSetting({ key: 'sidebarLogo', value: val });
  153. },
  154. });
  155. /**是否需要侧边栏的动态网页的title */
  156. const dynamicTitle = computed({
  157. get: () => storeSettings.value.dynamicTitle,
  158. set: val => {
  159. settingsStore.changeSetting({ key: 'dynamicTitle', value: val });
  160. // 动态设置网页标题
  161. useDynamicTitle();
  162. },
  163. });
  164.  
  165. function themeChange(val) {
  166. settingsStore.changeSetting({ key: 'theme', value: val });
  167. theme.value = val;
  168. handleThemeStyle(val);
  169. }
  170. function handleTheme(val) {
  171. settingsStore.changeSetting({ key: 'sideTheme', value: val });
  172. sideTheme.value = val;
  173. }
  174. function saveSetting() {
  175. proxy.$modal.loading('正在确定到本地,请稍候...');
  176. let layoutSetting = {
  177. topNav: storeSettings.value.topNav,
  178. tagsView: storeSettings.value.tagsView,
  179. fixedHeader: storeSettings.value.fixedHeader,
  180. sidebarLogo: storeSettings.value.sidebarLogo,
  181. dynamicTitle: storeSettings.value.dynamicTitle,
  182. sideTheme: storeSettings.value.sideTheme,
  183. theme: storeSettings.value.theme,
  184. };
  185. localStorage.setItem('layout-setting', JSON.stringify(layoutSetting));
  186. setTimeout(proxy.$modal.closeLoading(), 1000);
  187. }
  188. function resetSetting() {
  189. proxy.$modal.loading('正在清除设置缓存并刷新,请稍候...');
  190. localStorage.removeItem('layout-setting');
  191. setTimeout('window.location.reload()', 1000);
  192. }
  193. function openSetting() {
  194. showSettings.value = true;
  195. }
  196.  
  197. defineExpose({
  198. openSetting,
  199. });
  200. </script>
  201.  
  202. <style lang="scss" scoped>
  203. .setting-drawer-title {
  204. margin-bottom: 12px;
  205. color: rgba(0, 0, 0, 0.85);
  206. line-height: 22px;
  207. font-weight: bold;
  208. .drawer-title {
  209. font-size: 14px;
  210. }
  211. }
  212. .setting-drawer-block-checbox {
  213. display: flex;
  214. justify-content: flex-start;
  215. align-items: center;
  216. margin-top: 10px;
  217. margin-bottom: 20px;
  218.  
  219. .setting-drawer-block-checbox-item {
  220. position: relative;
  221. margin-right: 16px;
  222. border-radius: 2px;
  223. cursor: pointer;
  224.  
  225. img {
  226. width: 48px;
  227. height: 48px;
  228. }
  229.  
  230. .custom-img {
  231. width: 48px;
  232. height: 38px;
  233. border-radius: 5px;
  234. box-shadow: 1px 1px 2px #898484;
  235. }
  236.  
  237. .setting-drawer-block-checbox-selectIcon {
  238. position: absolute;
  239. top: 0;
  240. right: 0;
  241. width: 100%;
  242. height: 100%;
  243. padding-top: 15px;
  244. padding-left: 24px;
  245. color: #1890ff;
  246. font-weight: 700;
  247. font-size: 14px;
  248. }
  249. }
  250. }
  251.  
  252. .drawer-item {
  253. color: rgba(0, 0, 0, 0.65);
  254. padding: 12px 0;
  255. font-size: 14px;
  256.  
  257. .comp-style {
  258. float: right;
  259. margin: -3px 8px 0px 0px;
  260. }
  261. }
  262. </style>