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

Former-commit-id: 27347ede51d0952d3422c3a6c3a86652f91e5639
This commit is contained in:
haoxr
2022-12-18 15:27:53 +08:00
parent fe49485563
commit 2a36afae16
27 changed files with 944 additions and 973 deletions

View File

@@ -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;