refactor(pinia): use pinia refactor store

This commit is contained in:
pengYYY 2022-02-28 18:28:14 +08:00
parent 47d0edd888
commit dd246e40b7
26 changed files with 457 additions and 518 deletions

View File

@ -21,15 +21,15 @@
"echarts": "~5.1.2", "echarts": "~5.1.2",
"hex-to-hsl": "^1.0.2", "hex-to-hsl": "^1.0.2",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.0.11",
"qrcode.vue": "^3.2.2", "qrcode.vue": "^3.2.2",
"tdesign-icons-vue-next": "^0.0.6", "tdesign-icons-vue-next": "^0.0.6",
"tdesign-vue-next": "0.8.1", "tdesign-vue-next": "0.9.2",
"tvision-color": "^1.3.1", "tvision-color": "^1.3.1",
"vue": "^3.2.31", "vue": "^3.2.31",
"vue-color-kit": "^1.0.5", "vue-color-kit": "^1.0.5",
"vue-router": "^4.0.11", "vue-router": "^4.0.11",
"vue3-clipboard": "^1.0.0", "vue3-clipboard": "^1.0.0"
"vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^15.0.0", "@commitlint/cli": "^15.0.0",

View File

@ -3,17 +3,17 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted } from 'vue'; import { computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import config from '@/config/style'; import config from '@/config/style';
import { useSettingStore } from '@/store';
const store = useStore(); const store = useSettingStore();
const mode = computed(() => { const mode = computed(() => {
return store.getters['setting/mode']; return store.displayMode;
}); });
onMounted(() => { onMounted(() => {
store.dispatch('setting/changeTheme', { ...config }); store.updateConfig({ ...config });
}); });
</script> </script>
<style lang="less"> <style lang="less">

View File

@ -3,8 +3,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { useStore } from 'vuex';
import { getBrandColor } from '@/config/color'; import { getBrandColor } from '@/config/color';
import { useSettingStore } from '@/store';
const store = useSettingStore();
const panelColor = const panelColor =
'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)'; 'conic-gradient(from 90deg at 50% 50%, #FF0000 -19.41deg, #FF0000 18.76deg, #FF8A00 59.32deg, #FFE600 99.87deg, #14FF00 141.65deg, #00A3FF 177.72deg, #0500FF 220.23deg, #AD00FF 260.13deg, #FF00C7 300.69deg, #FF0000 340.59deg, #FF0000 378.76deg)';
@ -15,11 +17,9 @@ const props = defineProps({
}, },
}); });
const store = useStore();
const style = computed(() => { const style = computed(() => {
const { value } = props; const { value } = props;
const { colorList } = store.state.setting; const { colorList } = store;
return { return {
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor, background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
}; };

View File

@ -35,5 +35,5 @@ export interface NotificationItem {
status: boolean; status: boolean;
collected: boolean; collected: boolean;
date: string; date: string;
quality: 'high' | 'low' | 'middle'; quality: string;
} }

View File

@ -12,7 +12,7 @@
<search :layout="layout" /> <search :layout="layout" />
</div> </div>
</template> </template>
<menu-content v-show="layout !== 'side'" class="header-menu" :nav-data="menu" /> <MenuContent v-show="layout !== 'side'" class="header-menu" :nav-data="menu" />
<template #operations> <template #operations>
<div class="operations-container"> <div class="operations-container">
<!-- 搜索框 --> <!-- 搜索框 -->
@ -65,9 +65,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { PropType, computed } from 'vue'; import { PropType, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { useSettingStore } from '@/store';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import tLogoFull from '@/assets/assets-logo-full.svg?component'; import tLogoFull from '@/assets/assets-logo-full.svg?component';
import { MenuRoute } from '@/interface'; import { MenuRoute } from '@/interface';
@ -107,11 +106,13 @@ const props = defineProps({
}, },
}); });
const store = useStore();
const router = useRouter(); const router = useRouter();
const settingStore = useSettingStore();
const toggleSettingPanel = () => { const toggleSettingPanel = () => {
store.commit('setting/toggleSettingPanel', true); settingStore.updateConfig({
showSettingPanel: true,
});
}; };
const active = computed(() => { const active = computed(() => {
@ -141,7 +142,9 @@ const menuCls = computed(() => {
}); });
const changeCollapsed = () => { const changeCollapsed = () => {
store.commit('setting/toggleSidebarCompact'); settingStore.updateConfig({
isSidebarCompact: !settingStore.isSidebarCompact,
});
}; };
const handleNav = (url) => { const handleNav = (url) => {

View File

@ -46,31 +46,29 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStore } from 'vuex'; import { storeToRefs } from 'pinia';
import { useNotificationStore } from '@/store';
import { NotificationItem } from '@/interface'; import { NotificationItem } from '@/interface';
const router = useRouter(); const router = useRouter();
const store = useStore(); const store = useNotificationStore();
const { msgData } = store.state.notification; const { msgData, unreadMsg } = storeToRefs(store);
const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
const setRead = (type: string, item?: NotificationItem) => { const setRead = (type: string, item?: NotificationItem) => {
const changeMsg = msgData; const changeMsg = msgData.value;
if (type === 'all') { if (type === 'all') {
changeMsg.forEach((e: NotificationItem) => { changeMsg.forEach((e) => {
e.status = false; e.status = false;
}); });
} else { } else {
changeMsg.forEach((e: NotificationItem) => { changeMsg.forEach((e) => {
if (e.id === item?.id) { if (e.id === item?.id) {
e.status = false; e.status = false;
} }
}); });
} }
store.commit('notification/setMsgData', changeMsg); store.setMsgData(changeMsg);
}; };
const goDetail = () => { const goDetail = () => {

View File

@ -39,8 +39,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
const layout = defineProps({ defineProps({
type: String, layout: String,
}); });
const isSearchFocus = ref(false); const isSearchFocus = ref(false);

View File

@ -1,18 +1,16 @@
import { defineComponent, PropType, computed, onMounted } from 'vue'; import { defineComponent, PropType, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import pgk from '../../../package.json'; import pgk from '../../../package.json';
import MenuContent from './MenuContent'; import MenuContent from './MenuContent';
import tLogo from '@/assets/assets-t-logo.svg?component'; import tLogo from '@/assets/assets-t-logo.svg?component';
import tLogoFull from '@/assets/assets-logo-full.svg?component'; import tLogoFull from '@/assets/assets-logo-full.svg?component';
import { useSettingStore } from '@/store';
const MIN_POINT = 992 - 1; const MIN_POINT = 992 - 1;
const useComputed = (props) => { const useComputed = (props) => {
const store = useStore(); const collapsed = computed(() => useSettingStore().isSidebarCompact);
const collapsed = computed(() => store.state.setting.isSidebarCompact);
const sideNavCls = computed(() => { const sideNavCls = computed(() => {
const { isCompact } = props; const { isCompact } = props;
@ -87,16 +85,20 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const store = useStore();
const router = useRouter(); const router = useRouter();
const settingStore = useSettingStore();
const changeCollapsed = () => { const changeCollapsed = () => {
store.commit('setting/toggleSidebarCompact'); settingStore.updateConfig({
isSidebarCompact: !settingStore.isSidebarCompact,
});
}; };
const autoCollapsed = () => { const autoCollapsed = () => {
const isCompact = window.innerWidth <= MIN_POINT; const isCompact = window.innerWidth <= MIN_POINT;
store.commit('setting/showSidebarCompact', isCompact); settingStore.updateConfig({
isSidebarCompact: isCompact,
});
}; };
onMounted(() => { onMounted(() => {

View File

@ -1,5 +1,8 @@
import { defineComponent } from 'vue'; import { defineComponent, computed } from 'vue';
import { mapGetters } from 'vuex'; import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { usePermissionStore, useSettingStore } from '@/store';
import TDesignHeader from './components/Header.vue'; import TDesignHeader from './components/Header.vue';
import TDesignBreadcrumb from './components/Breadcrumb.vue'; import TDesignBreadcrumb from './components/Breadcrumb.vue';
import TDesignFooter from './components/Footer.vue'; import TDesignFooter from './components/Footer.vue';
@ -8,112 +11,111 @@ import TDesignContent from './components/Content.vue';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import TdesignSetting from './setting.vue'; import TdesignSetting from './setting.vue';
import { SettingType } from '@/interface';
import '@/style/layout.less'; import '@/style/layout.less';
const name = `${prefix}-base-layout`; const name = `${prefix}-base-layout`;
export default defineComponent({ export default defineComponent({
name, name,
computed: { setup() {
...mapGetters({ const route = useRoute();
showSidebar: 'setting/showSidebar', const permissionStore = usePermissionStore();
showHeader: 'setting/showHeader', const settingStore = useSettingStore();
showHeaderLogo: 'setting/showHeaderLogo', const { routers: menuRouters } = storeToRefs(permissionStore);
showSidebarLogo: 'setting/showSidebarLogo', const setting = storeToRefs(settingStore);
showFooter: 'setting/showFooter',
mode: 'setting/mode', const mainLayoutCls = computed(() => [
menuRouters: 'permission/routers',
}),
setting(): SettingType {
return this.$store.state.setting;
},
mainLayoutCls() {
return [
{ {
't-layout--with-sider': this.showSidebar, 't-layout--with-sider': settingStore.showSidebar,
}, },
]; ]);
},
headerMenu() { const headerMenu = computed(() => {
const { layout, splitMenu } = this.$store.state.setting; if (settingStore.layout === 'mix') {
const { menuRouters } = this; if (settingStore.splitMenu) {
if (layout === 'mix') { console.log(menuRouters);
if (splitMenu) { return menuRouters.value.map((menu) => ({
return menuRouters.map((menu) => ({
...menu, ...menu,
children: [], children: [],
})); }));
} }
return []; return [];
} }
return menuRouters; return menuRouters.value;
}, });
sideMenu() {
const { layout, splitMenu } = this.$store.state.setting; const sideMenu = computed(() => {
let { menuRouters } = this; const { layout, splitMenu } = settingStore;
let newMenuRouters = menuRouters.value;
if (layout === 'mix' && splitMenu) { if (layout === 'mix' && splitMenu) {
menuRouters.forEach((menu) => { newMenuRouters.forEach((menu) => {
if (this.$route.path.indexOf(menu.path) === 0) { if (route.path.indexOf(menu.path) === 0) {
menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` })); newMenuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
} }
}); });
} }
return menuRouters; return newMenuRouters;
}, });
},
methods: { const renderSidebar = () => {
renderSidebar() {
return ( return (
this.showSidebar && ( settingStore.showSidebar && (
<TDesignSideNav <TDesignSideNav
showLogo={this.showSidebarLogo} showLogo={settingStore.showSidebarLogo}
layout={this.setting.layout} layout={settingStore.layout}
isFixed={this.setting.isSidebarFixed} isFixed={settingStore.isSidebarFixed}
menu={this.sideMenu} menu={sideMenu.value}
theme={this.mode} theme={settingStore.displayMode}
isCompact={this.setting.isSidebarCompact} isCompact={settingStore.isSidebarCompact}
/> />
) )
); );
}, };
renderHeader() {
const renderHeader = () => {
return ( return (
this.showHeader && ( settingStore.showHeader && (
<TDesignHeader <TDesignHeader
showLogo={this.showHeaderLogo} showLogo={settingStore.showHeaderLogo}
theme={this.mode} theme={settingStore.displayMode}
layout={this.setting.layout} layout={settingStore.layout}
isFixed={this.setting.isHeaderFixed} isFixed={settingStore.isHeaderFixed}
menu={this.headerMenu} menu={headerMenu.value}
isCompact={this.setting.isSidebarCompact} isCompact={settingStore.isSidebarCompact}
/> />
) )
); );
}, };
renderContent() {
const { showBreadcrumb } = this.setting; const renderFooter = () => {
const { showFooter } = this; return (
<t-footer class={`${prefix}-footer-layout`}>
<TDesignFooter />
</t-footer>
);
};
const renderContent = () => {
const { showBreadcrumb, showFooter } = settingStore;
return ( return (
<t-layout class={[`${prefix}-layout`]}> <t-layout class={[`${prefix}-layout`]}>
<t-content class={`${prefix}-content-layout`}> <t-content class={`${prefix}-content-layout`}>
{showBreadcrumb && <TDesignBreadcrumb />} {showBreadcrumb && <TDesignBreadcrumb />}
<TDesignContent /> <TDesignContent />
</t-content> </t-content>
{showFooter && this.renderFooter()} {showFooter && renderFooter()}
</t-layout> </t-layout>
); );
}, };
renderFooter() { return {
return ( setting,
<t-footer class={`${prefix}-footer-layout`}> mainLayoutCls,
<TDesignFooter /> renderSidebar,
</t-footer> renderHeader,
); renderContent,
};
}, },
},
render() { render() {
const { layout } = this.setting; const { layout } = this.setting;
const header = this.renderHeader(); const header = this.renderHeader();

View File

@ -92,11 +92,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch, onMounted, watchEffect } from 'vue'; import { ref, computed, watch, onMounted, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { ColorPicker } from 'vue-color-kit'; import { ColorPicker } from 'vue-color-kit';
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next'; import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
import { Color } from 'tvision-color'; import { Color } from 'tvision-color';
import useClipboard from 'vue-clipboard3'; import useClipboard from 'vue-clipboard3';
import { useSettingStore } from '@/store';
import 'vue-color-kit/dist/vue-color-kit.css'; import 'vue-color-kit/dist/vue-color-kit.css';
@ -110,6 +110,8 @@ import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
import SettingLightIcon from '@/assets/assets-setting-light.svg'; import SettingLightIcon from '@/assets/assets-setting-light.svg';
import SettingAutoIcon from '@/assets/assets-setting-auto.svg'; import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
const settingStore = useSettingStore();
const LAYOUT_OPTION = ['side', 'top', 'mix']; const LAYOUT_OPTION = ['side', 'top', 'mix'];
const COLOR_OPTIONS = ['default', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'dynamic']; const COLOR_OPTIONS = ['default', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'dynamic'];
const MODE_OPTIONS = [ const MODE_OPTIONS = [
@ -119,61 +121,63 @@ const MODE_OPTIONS = [
]; ];
const formData = ref({ ...STYLE_CONFIG }); const formData = ref({ ...STYLE_CONFIG });
const store = useStore();
const colors = ref(); const colors = ref();
const isColoPickerDisplay = ref(false); const isColoPickerDisplay = ref(false);
const showSettingPanel = computed({ const showSettingPanel = computed({
get() { get() {
return store.state.setting.showSettingPanel; return settingStore.showSettingPanel;
}, },
set(newVal) { set(newVal) {
store.commit('setting/toggleSettingPanel', newVal); settingStore.updateConfig({
showSettingPanel: newVal,
});
}, },
}); });
const mode = computed(() => { const mode = computed(() => {
return store.getters['setting/mode']; return settingStore.displayMode;
}); });
watch( watch(
() => colors.value, () => colors.value,
(newColor) => { (newColor) => {
const { hex } = newColor; const { hex } = newColor;
const { setting } = store.state;
// hex // hex
const newPalette = Color.getPaletteByGradation({ const newPalette = Color.getPaletteByGradation({
colors: [hex], colors: [hex],
step: 10, step: 10,
})[0]; })[0];
const { mode } = store.state.setting; const { mode } = settingStore;
const colorMap = generateColorMap(hex, newPalette, mode); const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark');
store.commit('setting/addColor', { [hex]: colorMap }); insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
insertThemeStylesheet(hex, colorMap, mode); settingStore.updateConfig({
[hex]: colorMap,
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex }); });
settingStore.changeBrandTheme(hex);
}, },
); );
const changeColor = (val) => { const changeColor = (val) => {
const { hex } = val; const { hex } = val;
const { setting } = store.state;
// hex // hex
const newPalette = Color.getPaletteByGradation({ const newPalette = Color.getPaletteByGradation({
colors: [hex], colors: [hex],
step: 10, step: 10,
})[0]; })[0];
const { mode } = store.state.setting; const { mode } = settingStore;
const colorMap = generateColorMap(hex, newPalette, mode); const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark');
store.commit('setting/addColor', { [hex]: colorMap }); settingStore.updateConfig({
[hex]: colorMap,
});
insertThemeStylesheet(hex, colorMap, mode); insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex }); settingStore.changeBrandTheme(hex);
}; };
onMounted(() => { onMounted(() => {
@ -212,7 +216,9 @@ const getModeIcon = (mode: string) => {
}; };
const handleCloseDrawer = () => { const handleCloseDrawer = () => {
store.commit('setting/toggleSettingPanel', false); settingStore.updateConfig({
showSettingPanel: false,
});
}; };
const getThumbnailUrl = (name: string): string => { const getThumbnailUrl = (name: string): string => {
@ -220,7 +226,7 @@ const getThumbnailUrl = (name: string): string => {
}; };
watchEffect(() => { watchEffect(() => {
store.dispatch('setting/changeTheme', formData.value); settingStore.updateConfig(formData.value);
}); });
</script> </script>
<style lang="less"> <style lang="less">

View File

@ -3,11 +3,11 @@ import { createApp } from 'vue';
import TDesign from 'tdesign-vue-next'; import TDesign from 'tdesign-vue-next';
import 'tdesign-vue-next/es/style/index.css'; import 'tdesign-vue-next/es/style/index.css';
import VueClipboard from 'vue3-clipboard'; import VueClipboard from 'vue3-clipboard';
import { store } from './store'; import { store } from './store';
import router from './router'; import router from './router';
import '@/style/index.less'; import '@/style/index.less';
import './permission'; import './permission';
import App from './App.vue'; import App from './App.vue';
const app = createApp(App); const app = createApp(App);

View File

@ -2,9 +2,7 @@ import dayjs from 'dayjs';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { Color } from 'tvision-color'; import { Color } from 'tvision-color';
import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color'; import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color';
import store from '@/store'; import { getSettingStore } from '@/store';
const { state } = store;
/** /**
* *
@ -14,8 +12,8 @@ const { state } = store;
* @returns {} * @returns {}
*/ */
export function getColorFromTheme(theme: string) { export function getColorFromTheme(theme: string) {
const { setting } = state as any; const settingStore = getSettingStore();
const { colorList, mode } = setting; const { colorList, mode } = settingStore;
const isDarkMode = mode === 'dark'; const isDarkMode = mode === 'dark';
let themeColorList = []; let themeColorList = [];
const themeColor = getBrandColor(theme, colorList); const themeColor = getBrandColor(theme, colorList);
@ -41,8 +39,9 @@ export function getColorFromTheme(theme: string) {
/** 图表颜色 */ /** 图表颜色 */
function chartListColor(): Array<string> { function chartListColor(): Array<string> {
const { setting } = state as any; const settingStore = getSettingStore();
const res = getColorFromTheme(setting.brandTheme); const { brandTheme } = settingStore;
const res = getColorFromTheme(brandTheme);
return res; return res;
} }
@ -1078,7 +1077,7 @@ export function getPieChartDataSet({
textColor, textColor,
placeholderColor, placeholderColor,
containerColor, containerColor,
}: { radius: number } & Record<string, string>) { }: { radius?: number } & Record<string, string>) {
return { return {
color: chartListColor(), color: chartListColor(),
tooltip: { tooltip: {

View File

@ -2,7 +2,7 @@
<div> <div>
<t-row :gutter="[16, 16]"> <t-row :gutter="[16, 16]">
<t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3"> <t-col v-for="(item, index) in PANE_LIST" :key="item.title" :xs="6" :xl="3">
<card :subtitle="item.title" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }"> <card :subtitle="item.title" size="small" :style="{ height: '168px' }" :class="{ 'main-color': index == 0 }">
<div class="dashboard-item"> <div class="dashboard-item">
<div class="dashboard-item-top"> <div class="dashboard-item-top">
<span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span> <span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
@ -204,12 +204,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue'; import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'; import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import { PieChart, LineChart, BarChart } from 'echarts/charts'; import { PieChart, LineChart, BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { useSettingStore } from '@/store';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';
// //
@ -241,10 +241,10 @@ const getThisMonth = (checkedValues?: string[]) => {
return `${date.getFullYear()}-${startMonth}${date2.getFullYear()}-${endMonth}`; return `${date.getFullYear()}-${startMonth}${date2.getFullYear()}-${endMonth}`;
}; };
const store = useStore(); const store = useSettingStore();
const resizeTime = ref(1); const resizeTime = ref(1);
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.chartColors);
// moneyCharts // moneyCharts
let moneyContainer: HTMLElement; let moneyContainer: HTMLElement;
@ -276,7 +276,7 @@ const renderStokeChart = () => {
stokeContainer = document.getElementById('stokeContainer'); stokeContainer = document.getElementById('stokeContainer');
} }
stokeChart = echarts.init(stokeContainer); stokeChart = echarts.init(stokeContainer);
stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...chartColors.value })); stokeChart.setOption(constructInitDataset({ dateTime: LAST_7_DAYS, ...(chartColors.value as any) }));
}; };
// monitorChart // monitorChart
@ -355,14 +355,14 @@ onUnmounted(() => {
const currentMonth = ref(getThisMonth()); const currentMonth = ref(getThisMonth());
watch( watch(
() => store.state.setting.brandTheme, () => store.brandTheme,
() => { () => {
changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]); changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
}, },
); );
watch( watch(
() => store.state.setting.mode, () => store.mode,
() => { () => {
[moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => { [moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
item.dispose(); item.dispose();
@ -374,10 +374,10 @@ watch(
const onCurrencyChange = (checkedValues: string[]) => { const onCurrencyChange = (checkedValues: string[]) => {
currentMonth.value = getThisMonth(checkedValues); currentMonth.value = getThisMonth(checkedValues);
monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...chartColors.value })); monitorChart.setOption(getLineChartDataSet({ dateTime: checkedValues, ...(chartColors.value as any) }));
}; };
const onStokeDataChange = (checkedValues: string[]) => { const onStokeDataChange = (checkedValues: string[]) => {
stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...chartColors.value })); stokeChart.setOption(constructInitDataset({ dateTime: checkedValues, ...(chartColors.value as any) }));
}; };
const rehandleClickOp = (val: MouseEvent) => { const rehandleClickOp = (val: MouseEvent) => {
console.log(val); console.log(val);

View File

@ -59,7 +59,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue'; import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'; import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
@ -70,14 +69,16 @@ import ProductCard from '@/components/card/Card.vue';
import { changeChartsTheme, getFolderLineDataSet, getScatterDataSet } from '../base/index'; import { changeChartsTheme, getFolderLineDataSet, getScatterDataSet } from '../base/index';
import { PANE_LIST_DATA, PRODUCT_LIST } from './constants'; import { PANE_LIST_DATA, PRODUCT_LIST } from './constants';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';
import { useSettingStore } from '@/store';
import Trend from '@/components/trend/index.vue'; import Trend from '@/components/trend/index.vue';
import Card from '@/components/card/index.vue'; import Card from '@/components/card/index.vue';
echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]); echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
const store = useStore(); const store = useSettingStore();
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.chartColors);
// lineChart logic // lineChart logic
let lineContainer: HTMLElement; let lineContainer: HTMLElement;
let lineChart: echarts.ECharts; let lineChart: echarts.ECharts;
@ -126,14 +127,14 @@ onUnmounted(() => {
}); });
watch( watch(
() => store.state.setting.mode, () => store.mode,
() => { () => {
renderCharts(); renderCharts();
}, },
); );
watch( watch(
() => store.state.setting.brandTheme, () => store.brandTheme,
() => { () => {
changeChartsTheme([lineChart, scatterChart]); changeChartsTheme([lineChart, scatterChart]);
}, },
@ -144,8 +145,8 @@ const onSatisfyChange = () => {
}; };
const onMaterialChange = (value: string[]) => { const onMaterialChange = (value: string[]) => {
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.chartColors);
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value })); lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...(chartColors.value as any) }));
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -70,12 +70,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onUnmounted, ref, watch, computed } from 'vue'; import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'; import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { BarChart, LineChart } from 'echarts/charts'; import { BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { useSettingStore } from '@/store';
import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index'; import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index';
import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants'; import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
@ -96,9 +96,9 @@ echarts.use([
CanvasRenderer, CanvasRenderer,
]); ]);
const store = useStore(); const store = useSettingStore();
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.chartColors);
const data = ref([]); const data = ref([]);
const pagination = ref({ const pagination = ref({
defaultPageSize: 10, defaultPageSize: 10,
@ -173,7 +173,7 @@ onMounted(() => {
}); });
watch( watch(
() => store.state.setting.brandTheme, () => store.brandTheme,
() => { () => {
changeChartsTheme([monitorChart, dataChart]); changeChartsTheme([monitorChart, dataChart]);
}, },

View File

@ -50,11 +50,12 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, ComputedRef } from 'vue'; import { ref, computed } from 'vue';
import { useStore } from 'vuex'; import { storeToRefs } from 'pinia';
import { NOTIFICATION_TYPES } from '@/constants'; import { NOTIFICATION_TYPES } from '@/constants';
import { NotificationItem } from '@/interface'; import { NotificationItem } from '@/interface';
import EmptyIcon from '@/assets/assets-empty.svg?component'; import EmptyIcon from '@/assets/assets-empty.svg?component';
import { useNotificationStore } from '@/store';
const TAB_LIST = [ const TAB_LIST = [
{ {
@ -76,14 +77,13 @@ const tabValue = ref('msgData');
const visible = ref(false); const visible = ref(false);
const selectedItem = ref<NotificationItem>(); const selectedItem = ref<NotificationItem>();
const store = useStore(); const store = useNotificationStore();
const { msgData, unreadMsg, readMsg } = storeToRefs(store);
const { msgData } = store.state.notification; const msgDataList = computed(() => {
if (tabValue.value === 'msgData') return msgData.value;
const msgDataList: ComputedRef<NotificationItem[]> = computed(() => { if (tabValue.value === 'unreadMsg') return unreadMsg.value;
if (tabValue.value === 'msgData') return msgData; if (tabValue.value === 'readMsg') return readMsg.value;
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
return []; return [];
}); });
@ -93,25 +93,25 @@ const handleClickDeleteBtn = (item: NotificationItem) => {
}; };
const setReadStatus = (item: NotificationItem) => { const setReadStatus = (item: NotificationItem) => {
const changeMsg = msgData; const changeMsg = msgData.value;
changeMsg.forEach((e: NotificationItem) => { changeMsg.forEach((e: NotificationItem) => {
if (e.id === item.id) { if (e.id === item.id) {
if (e.status) e.status = false; if (e.status) e.status = false;
} }
}); });
store.commit('notification/setMsgData', changeMsg); store.setMsgData(changeMsg);
}; };
const deleteMsg = () => { const deleteMsg = () => {
const item = selectedItem.value; const item = selectedItem.value;
const changeMsg = msgData; const changeMsg = msgData.value;
changeMsg.forEach((e: NotificationItem, index: number) => { changeMsg.forEach((e: NotificationItem, index: number) => {
if (e.id === item?.id) { if (e.id === item?.id) {
changeMsg.splice(index, 1); changeMsg.splice(index, 1);
} }
}); });
visible.value = false; visible.value = false;
store.commit('notification/setMsgData', changeMsg); store.setMsgData(changeMsg);
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -16,12 +16,14 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useStore } from 'vuex';
import LogoFullIcon from '@/assets/assets-logo-full.svg?component'; import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
import { useSettingStore } from '@/store';
const store = useStore(); const settingStore = useSettingStore();
const toggleSettingPanel = () => { const toggleSettingPanel = () => {
store.commit('setting/toggleSettingPanel', true); settingStore.updateConfig({
showSettingPanel: true,
});
}; };
const navToGitHub = () => { const navToGitHub = () => {

View File

@ -73,10 +73,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import QrcodeVue from 'qrcode.vue'; import QrcodeVue from 'qrcode.vue';
import { MessagePlugin } from 'tdesign-vue-next'; import { MessagePlugin } from 'tdesign-vue-next';
import { useCounter } from '@/hooks'; import { useCounter } from '@/hooks';
import { useUserStore } from '@/store';
const userStore = useUserStore();
const INITIAL_DATA = { const INITIAL_DATA = {
phone: '', phone: '',
@ -105,12 +107,12 @@ const switchType = (val: string) => {
}; };
const router = useRouter(); const router = useRouter();
const store = useStore();
const onSubmit = async ({ validateResult }) => { const onSubmit = async ({ validateResult }) => {
if (validateResult === true) { if (validateResult === true) {
try { try {
await store.dispatch('user/login', formData.value); await userStore.login(formData.value);
MessagePlugin.success('登陆成功'); MessagePlugin.success('登陆成功');
router.push({ router.push({
path: '/dashboard/base', path: '/dashboard/base',

View File

@ -91,11 +91,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue'; import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
import { useStore } from 'vuex';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'; import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts'; import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { useSettingStore } from '@/store';
import { LAST_7_DAYS } from '@/utils/date'; import { LAST_7_DAYS } from '@/utils/date';
import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants'; import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from './constants';
@ -111,8 +111,8 @@ echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendC
let lineContainer: HTMLElement; let lineContainer: HTMLElement;
let lineChart: echarts.ECharts; let lineChart: echarts.ECharts;
const store = useStore(); const store = useSettingStore();
const chartColors = computed(() => store.state.setting.chartColors); const chartColors = computed(() => store.chartColors);
const onLineChange = (value) => { const onLineChange = (value) => {
lineChart.setOption(getFolderLineDataSet(value)); lineChart.setOption(getFolderLineDataSet(value));
@ -166,7 +166,7 @@ const getIcon = (type) => {
}; };
watch( watch(
() => store.state.setting.brandTheme, () => store.brandTheme,
() => { () => {
changeChartsTheme([lineChart]); changeChartsTheme([lineChart]);
}, },

View File

@ -2,42 +2,47 @@ import { MessagePlugin } from 'tdesign-vue-next';
import NProgress from 'nprogress'; // progress bar import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css'; // progress bar style import 'nprogress/nprogress.css'; // progress bar style
import store from '@/store'; import { getPermissionStore, getUserStore } from '@/store';
import router from '@/router'; import router from '@/router';
const permissionStore = getPermissionStore();
const userStore = getUserStore();
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
const whiteListRouters = store.getters['permission/whiteListRouters']; const { whiteListRouters } = permissionStore;
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
NProgress.start(); NProgress.start();
const token = store.getters['user/token']; const { token } = userStore;
if (token) { if (token) {
if (to.path === '/login') { if (to.path === '/login') {
setTimeout(() => { setTimeout(() => {
store.dispatch('user/logout'); userStore.logout();
store.dispatch('permission/restore'); permissionStore.restore();
}); });
next(); next();
return; return;
} }
const roles = store.getters['user/roles']; const { roles } = userStore;
if (roles && roles.length > 0) { if (roles && roles.length > 0) {
next(); next();
} else { } else {
try { try {
await store.dispatch('user/getUserInfo'); await userStore.getUserInfo();
await store.dispatch('permission/initRoutes', store.getters['user/roles']); const { roles } = userStore;
await permissionStore.initRoutes(roles);
next({ ...to }); next({ ...to });
} catch (error) { } catch (error) {
console.log(error);
MessagePlugin.error(error); MessagePlugin.error(error);
await store.commit('user/removeToken'); await userStore.removeToken();
next(`/login?redirect=${to.path}`); next(`/login?redirect=${to.path}`);
NProgress.done(); NProgress.done();
} }

View File

@ -4,6 +4,8 @@ import baseRouters from './modules/base';
import componentsRouters from './modules/components'; import componentsRouters from './modules/components';
import othersRouters from './modules/others'; import othersRouters from './modules/others';
// 关于单层路由meta 中设置 { single: true } 即可为单层路由,{ hidden: true } 即可在侧边栏隐藏该路由
// 存放动态路由 // 存放动态路由
export const asyncRouterList: Array<RouteRecordRaw> = [...baseRouters, ...componentsRouters, ...othersRouters]; export const asyncRouterList: Array<RouteRecordRaw> = [...baseRouters, ...componentsRouters, ...othersRouters];

View File

@ -1,16 +1,12 @@
import { createStore } from 'vuex'; import { createPinia } from 'pinia';
import user from './modules/user';
import notification from './modules/notification';
import setting from './modules/setting';
import permission from './modules/permission';
export const store = createStore({ const store = createPinia();
modules: {
user, export { store };
setting,
notification, export * from './modules/notification';
permission, export * from './modules/permission';
}, export * from './modules/user';
}); export * from './modules/setting';
export default store; export default store;

View File

@ -1,8 +1,7 @@
// 定义的state初始值 import { defineStore } from 'pinia';
import { NotificationItem } from '@/interface'; import { NotificationItem } from '@/interface';
const state = { const msgData = [
msgData: [
{ {
id: '123', id: '123',
content: '腾讯大厦一楼改造施工项目 已通过审核!', content: '腾讯大厦一楼改造施工项目 已通过审核!',
@ -57,29 +56,21 @@ const state = {
date: '2021-01-01 08:00', date: '2021-01-01 08:00',
quality: 'low', quality: 'low',
}, },
], ];
};
type NotificationStateType = typeof state; type MsgDataType = typeof msgData;
type MsgDataType = typeof state.msgData;
const mutations = { export const useNotificationStore = defineStore('notification', {
setMsgData(state: NotificationStateType, data: MsgDataType) { state: () => ({
state.msgData = data; msgData,
}),
getters: {
unreadMsg: (state) => state.msgData.filter((item: NotificationItem) => item.status),
readMsg: (state) => state.msgData.filter((item: NotificationItem) => !item.status),
}, },
}; actions: {
setMsgData(data: MsgDataType) {
const getters = { this.msgData = data;
unreadMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => item.status), },
readMsg: (state: NotificationStateType) => state.msgData.filter((item: NotificationItem) => !item.status), },
}; });
const actions = {};
export default {
namespaced: true,
state,
mutations,
actions,
getters,
};

View File

@ -1,4 +1,6 @@
import { defineStore } from 'pinia';
import router, { asyncRouterList, page404 } from '@/router'; import router, { asyncRouterList, page404 } from '@/router';
import { store } from '@/store';
function filterPermissionsRouters(routes, roles) { function filterPermissionsRouters(routes, roles) {
const res = []; const res = [];
@ -18,28 +20,13 @@ function filterPermissionsRouters(routes, roles) {
return res; return res;
} }
const state = { export const usePermissionStore = defineStore('permission', {
state: () => ({
whiteListRouters: ['/login'], whiteListRouters: ['/login'],
routers: [], routers: [],
}; }),
actions: {
const mutations = { async initRoutes(roles) {
setRouters: (state, routers) => {
state.routers = routers;
},
};
const getters = {
routers: (state) => {
return state.routers;
},
whiteListRouters: (state) => {
return state.whiteListRouters;
},
};
const actions = {
async initRoutes({ commit }, roles) {
let accessedRouters; let accessedRouters;
// special token // special token
@ -49,26 +36,22 @@ const actions = {
accessedRouters = filterPermissionsRouters(asyncRouterList, roles); accessedRouters = filterPermissionsRouters(asyncRouterList, roles);
} }
commit('setRouters', accessedRouters); this.routers = accessedRouters;
// register routers // register routers
state.routers.concat(page404).forEach((item) => { accessedRouters.concat(page404).forEach((item) => {
router.addRoute(item); router.addRoute(item);
}); });
}, },
async restore({ commit, state }) { async restore() {
// remove routers this.routers.concat(page404).forEach((item) => {
state.routers.concat(page404).forEach((item) => { if (router.hasRoute(item.name)) router.removeRoute(item.name);
router.removeRoute(item.name);
}); });
commit('setRouters', []); this.routers = [];
}, },
}; },
});
export default { export function getPermissionStore() {
namespaced: true, return usePermissionStore(store);
state, }
mutations,
actions,
getters,
};

View File

@ -1,7 +1,8 @@
import { defineStore } from 'pinia';
import { COLOR_TOKEN, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
import STYLE_CONFIG from '@/config/style'; import STYLE_CONFIG from '@/config/style';
import { COLOR_TOKEN, ColorSeries, ColorToken, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color'; import { store } from '@/store';
// 定义的state初始值
const state = { const state = {
...STYLE_CONFIG, ...STYLE_CONFIG,
showSettingPanel: false, showSettingPanel: false,
@ -9,53 +10,13 @@ const state = {
chartColors: LIGHT_CHART_COLORS, chartColors: LIGHT_CHART_COLORS,
}; };
type IInitStateType = typeof state; export const useSettingStore = defineStore('setting', {
state: () => state,
interface IStateType extends IInitStateType { getters: {
isAsideFooter: boolean; showSidebar: (state) => state.layout !== 'top',
showSettingPanel: boolean; showSidebarLogo: (state) => state.layout === 'side',
} showHeaderLogo: (state) => state.layout !== 'side',
displayMode: (state) => {
const mutations = {
update(state: IStateType, payload: IStateType) {
state.showBreadcrumb = payload.showBreadcrumb;
state.mode = payload.mode;
state.layout = payload.layout;
state.isSidebarCompact = payload.isSidebarCompact;
state.splitMenu = payload.splitMenu;
state.isFooterAside = payload.isFooterAside;
state.isSidebarFixed = payload.isSidebarFixed;
state.isHeaderFixed = payload.isHeaderFixed;
state.showHeader = payload.showHeader;
state.showFooter = payload.showFooter;
state.backgroundTheme = payload.backgroundTheme;
state.brandTheme = payload.brandTheme;
},
toggleSidebarCompact(state: IStateType) {
state.isSidebarCompact = !state.isSidebarCompact;
},
showSidebarCompact(state: IStateType, payload: boolean) {
state.isSidebarCompact = payload;
},
toggleSettingPanel(state: IStateType, payload: boolean) {
state.showSettingPanel = payload;
},
addColor(state: IStateType, payload: ColorSeries) {
state.colorList = { ...state.colorList, ...payload };
},
changeChartColor(state: IStateType, payload: ColorToken) {
state.chartColors = { ...payload };
},
};
const getters = {
showHeader: (state: IStateType) => state.showHeader,
showSidebar: (state: IStateType) => state.layout !== 'top',
showSidebarLogo: (state: IStateType) => state.layout === 'side',
showHeaderLogo: (state: IStateType) => state.layout !== 'side',
showFooter: (state: IStateType) => state.showFooter,
mode: (state: IStateType) => {
if (state.mode === 'auto') { if (state.mode === 'auto') {
const media = window.matchMedia('(prefers-color-scheme:dark)'); const media = window.matchMedia('(prefers-color-scheme:dark)');
if (media.matches) { if (media.matches) {
@ -65,18 +26,12 @@ const getters = {
} }
return state.mode; return state.mode;
}, },
};
const actions = {
async changeTheme({ commit, dispatch }, payload) {
dispatch('changeMode', payload);
dispatch('changeBrandTheme', payload);
commit('update', payload);
}, },
async changeMode({ commit }, payload: IStateType) { actions: {
let theme = payload.mode; async changeMode(mode: 'dark' | 'light' | 'auto') {
let theme = mode;
if (payload.mode === 'auto') { if (mode === 'auto') {
const media = window.matchMedia('(prefers-color-scheme:dark)'); const media = window.matchMedia('(prefers-color-scheme:dark)');
if (media.matches) { if (media.matches) {
theme = 'dark'; theme = 'dark';
@ -88,19 +43,27 @@ const actions = {
document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : ''); document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '');
commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS); this.chartColor = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
}, },
changeBrandTheme(_: { state: IStateType }, payload: IStateType) { changeBrandTheme(brandTheme: string) {
const { brandTheme } = payload;
document.documentElement.setAttribute('theme-color', brandTheme); document.documentElement.setAttribute('theme-color', brandTheme);
}, },
}; updateConfig(payload) {
for (const key in payload) {
if (payload[key] !== undefined) {
this[key] = payload[key];
}
if (key === 'mode') {
this.changeMode(payload[key]);
}
if (key === 'brandTheme') {
this.changeBrandTheme(payload[key]);
}
}
},
},
});
export default { export function getSettingStore() {
namespaced: true, return useSettingStore(store);
state, }
mutations,
actions,
getters,
};

View File

@ -1,40 +1,23 @@
import { defineStore } from 'pinia';
import { TOKEN_NAME } from '@/config/global'; import { TOKEN_NAME } from '@/config/global';
import { store } from '@/store';
const InitUserInfo = { const InitUserInfo = {
roles: [], roles: [],
}; };
// 定义的state初始值 export const useUserStore = defineStore('user', {
const state = { state: () => ({
token: localStorage.getItem(TOKEN_NAME) || 'main_token', // 默认token不走权限 token: localStorage.getItem(TOKEN_NAME) || 'main_token', // 默认token不走权限
userInfo: InitUserInfo, userInfo: InitUserInfo,
}; }),
getters: {
const mutations = {
setToken(state, token) {
localStorage.setItem(TOKEN_NAME, token);
state.token = token;
},
removeToken(state) {
localStorage.removeItem(TOKEN_NAME);
state.token = '';
},
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
},
};
const getters = {
token: (state) => {
return state.token;
},
roles: (state) => { roles: (state) => {
return state.userInfo?.roles; return state.userInfo?.roles;
}, },
}; },
actions: {
const actions = { async login(userInfo) {
async login({ commit }, userInfo) {
const mockLogin = async (userInfo) => { const mockLogin = async (userInfo) => {
// 登录请求流程 // 登录请求流程
console.log(userInfo); console.log(userInfo);
@ -64,12 +47,12 @@ const actions = {
const res = await mockLogin(userInfo); const res = await mockLogin(userInfo);
if (res.code === 200) { if (res.code === 200) {
commit('setToken', res.data); this.token = res.data;
} else { } else {
throw res; throw res;
} }
}, },
async getUserInfo({ commit, state }) { async getUserInfo() {
const mockRemoteUserInfo = async (token) => { const mockRemoteUserInfo = async (token) => {
if (token === 'main_token') { if (token === 'main_token') {
return { return {
@ -83,20 +66,21 @@ const actions = {
}; };
}; };
const res = await mockRemoteUserInfo(state.token); const res = await mockRemoteUserInfo(this.token);
commit('setUserInfo', res); this.userInfo = res;
}, },
async logout({ commit }) { async logout() {
commit('removeToken'); localStorage.removeItem(TOKEN_NAME);
commit('setUserInfo', InitUserInfo); this.token = '';
this.userInfo = InitUserInfo;
}, },
}; async removeToken() {
this.token = '';
},
},
});
export default { export function getUserStore() {
namespaced: true, return useUserStore(store);
state, }
mutations,
actions,
getters,
};