feat: 主题配置 一键重置 支持

chore: title & ls_namespace
delete: 无用注释

.env

@@ -1,5 +1,5 @@
 # SPA Title
-VITE_APP_TITLE = vue3_element_admin
+VITE_APP_TITLE = Lance-Element-Admin
 
 # 公共基础路径
 VITE_PUBLIC_PATH = /

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue3_element_admin",
+  "name": "Lance-Element-Admin",
   "private": true,
   "version": "0.0.0",
   "description": " Vue3、TS、Element-Plus、Pinia 和 Vite",
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:LanceJiang/vue3_element_admin.git"
+    "url": "git@github.com:LanceJiang/Lance-Element-Admin.git"
   },
   "type": "module",
   "scripts": {

src/hooks/useTheme.ts

@@ -7,6 +7,7 @@ import { menuTheme } from '@/styles/theme/menu'
 import { asideTheme } from '@/styles/theme/aside'
 import { headerTheme } from '@/styles/theme/header'
 import { footerTheme } from '@/styles/theme/footer'
+import { defaultSettingState } from '@/settings.ts'
 
 /**
  * @description 全局主题 hooks
@@ -48,7 +49,6 @@ export const useTheme = () => {
 			weak: 'filter: invert(80%)'
 		}
 		body.setAttribute('style', styles[type])
-		// 关闭另一个模式
 		setting.changeSetting(type === 'grey' ? 'isWeak' : 'isGrey', false)
 	}
 
@@ -107,8 +107,20 @@ export const useTheme = () => {
 		if (isWeak.value) changeGreyOrWeak('weak', true)
 	}
 
+	const resetTheme = () => {
+		/*Object.keys(defaultSettingState).map(key => {
+			setting.changeSetting(key, defaultSettingState[key])
+		})*/
+		// setting.$reset()
+		Object.assign(setting.$state, defaultSettingState)
+		// initTheme()
+		switchDark()
+		changeGreyOrWeak('weak', false)
+	}
+
 	return {
 		initTheme,
+		resetTheme,
 		switchDark,
 		changeThemeColor,
 		changeGreyOrWeak,

src/layout/LayoutLeft/index.vue

@@ -28,8 +28,6 @@
 <script setup lang="ts" name="layoutLeft">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-// import { useAuthStore } from '@/stores/modules/auth'
-// import { useGlobalStore } from '@/stores/modules/global'
 import ToolBarLeft from '@/layout/components/Header/ToolBarLeft.vue'
 import ToolBarRight from '@/layout/components/Header/ToolBarRight.vue'
 import SubMenu from '@/layout/components/Menu/SubMenu.vue'
@@ -40,14 +38,8 @@ const title = import.meta.env.VITE_APP_TITLE
 
 const route = useRoute()
 const { permission, setting } = useStore()
-// const authStore = useAuthStore()
-// const globalStore = useGlobalStore()
-// const accordion = computed(() => globalStore.accordion)
-// const isCollapse = computed(() => globalStore.isCollapse)
-// const menuList = computed(() => authStore.showMenuListGet)
 const accordion = computed(() => setting.accordion)
 const isCollapse = computed(() => setting.isCollapse)
-// const isCollapse = computed(() => !app.sidebar.opened)
 
 const menuList = computed(() => permission.showMenuList)
 const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)

src/layout/LayoutLeftMix/index.vue

@@ -48,8 +48,6 @@
 <script setup lang="ts" name="layoutLeftMix">
 import { ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-// import { useAuthStore } from '@/stores/modules/auth'
-// import { useGlobalStore } from '@/stores/modules/global'
 import AppMain from '@/layout/components/AppMain.vue'
 import ToolBarLeft from '@/layout/components/Header/ToolBarLeft.vue'
 import ToolBarRight from '@/layout/components/Header/ToolBarRight.vue'
@@ -62,11 +60,6 @@ const title = import.meta.env.VITE_APP_TITLE
 const route = useRoute()
 const router = useRouter()
 const { permission, setting, app } = useStore()
-// const authStore = useAuthStore()
-// const globalStore = useGlobalStore()
-// const accordion = computed(() => globalStore.accordion)
-// const isCollapse = computed(() => globalStore.isCollapse)
-// const menuList = computed(() => authStore.showMenuListGet)
 const accordion = computed(() => setting.accordion)
 const isCollapse = computed(() => setting.isCollapse)
 const menuList = computed(() => permission.showMenuList)

src/layout/LayoutTop/index.vue

@@ -47,7 +47,6 @@
 
 <script setup lang="ts" name="layoutTop">
 import { computed } from 'vue'
-// import { useAuthStore } from '@/stores/modules/auth'
 import { useRoute, useRouter } from 'vue-router'
 import AppMain from '@/layout/components/AppMain.vue'
 import ToolBarRight from '@/layout/components/Header/ToolBarRight.vue'
@@ -61,8 +60,6 @@ const title = import.meta.env.VITE_APP_TITLE
 const { permission, setting, app } = useStore()
 const route = useRoute()
 const router = useRouter()
-// const authStore = useAuthStore()
-// const menuList = computed(() => authStore.showMenuListGet)
 const menuList = computed(() => permission.showMenuList)
 const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
 

src/layout/components/Footer/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="layout-footer">
-		<a href="https://github.com/LanceJiang" target="_blank"> 2028 © vue3_element_admin By aizuda. </a>
+		<a href="https://github.com/LanceJiang" target="_blank"> 2028 © Lance-Element-Admin By aizuda. </a>
 	</div>
 </template>
 

src/layout/components/Header/ToolBarLeft.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script setup lang="ts">
-// import { useGlobalStore } from '@/stores/modules/global'
 import useStore from '@/store'
 import CollapseIcon from './components/CollapseIcon.vue'
 import Breadcrumb from './components/Breadcrumb.vue'

src/layout/components/Settings/index.vue

@@ -114,24 +114,19 @@
 
 			<div class="drawer-item">
 				<span>页面切换动画类型</span>
-				<el-select v-model="animateMode" style="width: 100px;">
+				<el-select v-model="animateMode" style="width: 100px">
 					<el-option v-for="v of animateList" :key="v.value" :value="v.value" :label="v.label" />
 				</el-select>
 			</div>
-		</el-scrollbar>
-
 
-		<!--
-				<div class="drawer-item">
-					<span>固定 Header</span>
-					<el-switch v-model="fixedHeader" />
-				</div>
-		-->
+			<el-divider class="local-divider">
+				<el-icon><Operation /></el-icon>主题配置
+			</el-divider>
 
-		<!--		<div class="drawer-item">
-					<span>侧边栏 Logo</span>
-					<el-switch v-model="sidebarLogo" />
-				</div>-->
+			<div class="drawer-item">
+				<el-button type="warning" style="width: 100%" @click="resetTheme"> 重置当前配置 </el-button>
+			</div>
+		</el-scrollbar>
 	</div>
 </template>
 
@@ -146,14 +141,12 @@ import { useTheme } from '@/hooks/useTheme'
 import useStore from '@/store'
 
 const { setting } = useStore()
-const { switchDark, changeGreyOrWeak, setAsideTheme, setHeaderTheme, setFooterTheme } = useTheme()
+const { switchDark, changeGreyOrWeak, setAsideTheme, setHeaderTheme, setFooterTheme, resetTheme } = useTheme()
 // const isDark = useDark()
 // const toggleDark = () => useToggle(isDark)
 
 // const state = reactive({
-// 	fixedHeader: setting.fixedHeader,
 // 	tagsView: setting.tagsView,
-// 	sidebarLogo: setting.sidebarLogo
 // })
 const animateList = [
 	{
@@ -189,14 +182,12 @@ const {
 	asideInverted,
 	headerInverted,
 	footerInverted,
-	fixedHeader,
 	footer,
 	breadcrumb,
 	breadcrumbIcon,
 	tagsView,
 	animate,
-	animateMode,
-	sidebarLogo
+	animateMode
 } = storeToRefs(setting)
 
 function themeChange(val: any) {
@@ -209,13 +200,6 @@ const setLayout = (val: LayoutType) => {
 	setAsideTheme()
 }
 
-// watch(
-// 	() => state.fixedHeader,
-// 	value => {
-// 		setting.changeSetting('fixedHeader', value)
-// 	}
-// )
-
 // watch(
 // 	() => state.tagsView,
 // 	value => {
@@ -223,12 +207,6 @@ const setLayout = (val: LayoutType) => {
 // 	}
 // )
 
-// watch(
-// 	() => state.sidebarLogo,
-// 	value => {
-// 		setting.changeSetting('sidebarLogo', value)
-// 	}
-// )
 </script>
 
 <style lang="scss" scoped>

src/layout/index.vue

@@ -10,10 +10,7 @@
 <script setup lang="ts" name="layout">
 import { computed, type Component } from 'vue'
 import { LayoutType } from '@/store/interface'
-// import { AppMain, Settings, TagsView } from './components/index'
 import useStore from '@/store'
-// import { useGlobalStore } from "@/stores/modules/global";
-// import ThemeDrawer from './components/ThemeDrawer/index.vue'
 import RightPanel from '@/components/RightPanel/index.vue'
 import LayoutTop from './LayoutTop/index.vue'
 import LayoutTopMix from './LayoutTopMix/index.vue'
@@ -28,8 +25,6 @@ const LayoutComponents: Record<LayoutType, Component> = {
 	leftMix: LayoutLeftMix
 }
 const { setting } = useStore()
-// const globalStore = useGlobalStore();
-// const layout = computed(() => setting.layout)
 const layout = computed(() => setting.layout)
 const showSettings = computed(() => setting.showSettings)
 </script>

src/settings.ts

@@ -1,6 +1,6 @@
 import { SettingState } from '@/types'
-
-const defaultSettingState: SettingState = {
+import { name } from '@/../package.json'
+export const defaultSettingState: SettingState = {
 	showSettings: true,
 	/** 主题模式 */
 	// 主题颜色
@@ -35,15 +35,15 @@ const defaultSettingState: SettingState = {
 	isCollapse: false,
 	// 标签展示
 	tagsView: true,
-	// todo???
+	/*// todo???
 	fixedHeader: true,
 	// 是否显示Logo
-	sidebarLogo: true,
+	sidebarLogo: true,*/
 	// 手风琴
 	accordion: true
 }
 const defaultSettings = {
-	title: 'vue3_admin',
+	title: name,
 
 	...defaultSettingState
 }

src/store/modules/settings.ts

@@ -3,7 +3,7 @@ import { SettingState } from '@/types'
 import defaultSettings from '@/settings'
 // import { ls } from '@/utils'
 
-// const { layout, themeColor, isDark, showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+// const { layout, themeColor, isDark, showSettings, tagsView } = defaultSettings
 
 export const useSettingStore = defineStore({
 	id: 'setting',
@@ -13,9 +13,7 @@ export const useSettingStore = defineStore({
 	// 	themeColor,
 	// 	isDark,
 	// 	showSettings,
-	// 	tagsView,
-	// 	fixedHeader,
-	// 	sidebarLogo
+	// 	tagsView
 	// }),
 	actions: {
 		async changeSetting(...payload: [string, any]) {
@@ -31,12 +29,6 @@ export const useSettingStore = defineStore({
 				// case 'showSettings':
 				// 	this.showSettings = value
 				// 	break
-				// case 'fixedHeader':
-				// 	this.fixedHeader = value
-				// 	break
-				// case 'sidebarLogo':
-				// 	this.sidebarLogo = value
-				// 	break
 				default:
 					// eslint-disable-next-line
 					// @ts-ignore

src/types/store.d.ts

@@ -49,10 +49,6 @@ export interface SettingState {
 	footerInverted: boolean
 	// 多页签
 	tagsView: boolean
-	// 固定 Header
-	fixedHeader: boolean
-	// 侧边栏 Logo
-	sidebarLogo: boolean
 	// 手风琴
 	accordion: boolean
 	// 面包屑

src/utils/vueStorage.ts

@@ -1,6 +1,7 @@
 import Storage from 'vue-ls'
+import defaultSettings from '@/settings'
 const options = {
-	namespace: 'vue3_admin_', // key prefix
+	namespace: `${defaultSettings.title}_`, // key prefix
 	name: 'ls', // name variable Vue.[ls] or this.[$ls],
 	storage: 'local' // storage name session, local, memory
 }