refactor: 优化pinia setup store组合式函数写法

Former-commit-id: 27347ede51d0952d3422c3a6c3a86652f91e5639

src/components/LangSelect/index.vue

@@ -1,36 +1,15 @@
-<template>
-  <el-dropdown class="lang-select" trigger="click" @command="handleSetLanguage">
-    <div class="lang-select__icon">
-      <svg-icon class-name="international-icon" icon-class="language" />
-    </div>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item :disabled="language === 'zh-cn'" command="zh-cn">
-          中文
-        </el-dropdown-item>
-        <el-dropdown-item :disabled="language === 'en'" command="en">
-          English
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-</template>
-
 <script setup lang="ts">
-import { computed } from 'vue';
-import useStore from '@/store';
 import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
 import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useAppStore } from '@/store/modules/app';
 
-const { app } = useStore();
-const language = computed(() => app.language);
-
+const appStore = useAppStore();
 const { locale } = useI18n();
 
-function handleSetLanguage(lang: string) {
+function handleLanguageChange(lang: string) {
   locale.value = lang;
-  app.setLanguage(lang);
+  appStore.changeLanguage(lang);
   if (lang == 'en') {
     ElMessage.success('Switch Language Successful!');
   } else {
@@ -39,6 +18,31 @@ function handleSetLanguage(lang: string) {
 }
 </script>
 
+<template>
+  <el-dropdown
+    class="lang-select"
+    trigger="click"
+    @command="handleLanguageChange"
+  >
+    <div class="lang-select__icon">
+      <svg-icon class-name="international-icon" icon-class="language" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          :disabled="appStore.language === 'zh-cn'"
+          command="zh-cn"
+        >
+          中文
+        </el-dropdown-item>
+        <el-dropdown-item :disabled="appStore.language === 'en'" command="en">
+          English
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
 <style lang="scss" scoped>
 .lang-select__icon {
   line-height: 50px;

src/components/RightPanel/index.vue

@@ -1,36 +1,16 @@
-<template>
-  <div ref="rightPanel" :class="{ show: show }">
-    <div class="right-panel-background" />
-    <div class="right-panel">
-      <div
-        class="right-panel__button"
-        :style="{ top: buttonTop + 'px', 'background-color': theme }"
-        @click="show = !show"
-      >
-        <Close class="icon" v-show="show" />
-        <Setting class="icon" v-show="!show" />
-      </div>
-      <div class="right-panel__items">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { addClass, removeClass } from '@/utils/index';
 
-import useStore from '@/store';
+import { useSettingsStore } from '@/store/modules/settings';
 
 // 图标依赖
 import { Close, Setting } from '@element-plus/icons-vue';
 import { ElColorPicker } from 'element-plus';
 
-const { setting } = useStore();
+const settingsStore = useSettingsStore();
 
-const theme = computed(() => setting.theme);
 const show = ref(false);
 
 defineProps({
@@ -87,6 +67,28 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+  <div ref="rightPanel" :class="{ show: show }">
+    <div class="right-panel-background" />
+    <div class="right-panel">
+      <div
+        class="right-panel__button"
+        :style="{
+          top: buttonTop + 'px',
+          'background-color': settingsStore.theme
+        }"
+        @click="show = !show"
+      >
+        <Close class="icon" v-show="show" />
+        <Setting class="icon" v-show="!show" />
+      </div>
+      <div class="right-panel__items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style>
 .showRightPanel {
   overflow: hidden;

src/components/SizeSelect/index.vue

@@ -1,14 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import { useAppStore } from '@/store/modules/app';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+const appStore = useAppStore();
+
+const sizeOptions = ref([
+  { label: '默认', value: 'default' },
+  { label: '大型', value: 'large' },
+  { label: '小型', value: 'small' }
+]);
+
+function handleSizeChange(size: string) {
+  appStore.changeSize(size);
+  ElMessage.success('切换布局大小成功');
+}
+</script>
+
 <template>
-  <el-dropdown class="size-select" trigger="click" @command="handleSetSize">
-    <div class="size-select__icon">
-      <svg-icon class-name="size-icon" icon-class="size" />
+  <el-dropdown trigger="click" @command="handleSizeChange">
+    <div style="line-height: 50px">
+      <svg-icon icon-class="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item
           v-for="item of sizeOptions"
           :key="item.value"
-          :disabled="(size || 'default') == item.value"
+          :disabled="appStore.size == item.value"
           :command="item.value"
         >
           {{ item.label }}
@@ -17,31 +38,3 @@
     </template>
   </el-dropdown>
 </template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { ElMessage } from 'element-plus';
-
-import useStore from '@/store';
-import SvgIcon from '@/components/SvgIcon/index.vue';
-
-const { app } = useStore();
-const size = computed(() => app.size);
-
-const sizeOptions = ref([
-  { label: '默认', value: 'default' },
-  { label: '大型', value: 'large' },
-  { label: '小型', value: 'small' }
-]);
-
-function handleSetSize(size: string) {
-  app.setSize(size);
-  ElMessage.success('切换布局大小成功');
-}
-</script>
-
-<style lang="scss" scoped>
-.size-select__icon {
-  line-height: 50px;
-}
-</style>

src/components/ThemePicker/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-color-picker
-    v-model="theme"
+    v-model="settingsStore.theme"
     :predefine="[
       '#409EFF',
       '#1890ff',
@@ -17,42 +17,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue';
-import useStore from '@/store';
-import { localStorage } from '@/utils/storage';
-
-// 参考连接:https://juejin.cn/post/7024025899813044232#heading-1
-import { mix } from '@/utils';
-// 白色混合色
-const mixWhite = '#ffffff';
-// 黑色混合色
-const mixBlack = '#000000';
-
-const node = document.documentElement;
-
-const { setting } = useStore();
-const theme = computed(() => setting.theme);
-
-watch(theme, (color: string) => {
-  node.style.setProperty('--el-color-primary', color);
-  localStorage.set('theme', color);
-
-  for (let i = 1; i < 10; i += 1) {
-    node.style.setProperty(
-      `--el-color-primary-light-${i}`,
-      mix(color, mixWhite, i * 0.1)
-    );
-  }
-  node.style.setProperty('--el-color-primary-dark', mix(color, mixBlack, 0.1));
-
-  localStorage.set('style', node.style.cssText);
-});
+import { useSettingsStore } from '@/store/modules/settings';
+const settingsStore = useSettingsStore();
 </script>
 
 <style>
 .theme-message,
 .theme-picker-dropdown {
-  z-index: 99999 !important;
+  z-index: 9999 !important;
 }
 
 .theme-picker .el-color-picker__trigger {