mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 02:56:35 +08:00
Merge pull request #75 from Tencent/reafactor/pinia
refactor(pinia): use pinia refactor store
This commit is contained in:
yuyang
GitHub
commit
20d059ce54
|
|
@ -21,15 +21,15 @@
|
|||
"echarts": "~5.1.2",
|
||||
"hex-to-hsl": "^1.0.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.11",
|
||||
"qrcode.vue": "^3.2.2",
|
||||
"tdesign-icons-vue-next": "^0.0.6",
|
||||
"tdesign-vue-next": "0.8.1",
|
||||
"tdesign-vue-next": "0.9.2",
|
||||
"tvision-color": "^1.3.1",
|
||||
"vue": "^3.2.31",
|
||||
"vue-color-kit": "^1.0.5",
|
||||
"vue-router": "^4.0.11",
|
||||
"vue3-clipboard": "^1.0.0",
|
||||
"vuex": "^4.0.2"
|
||||
"vue3-clipboard": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^15.0.0",
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import config from '@/config/style';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
const store = useStore();
|
||||
const store = useSettingStore();
|
||||
|
||||
const mode = computed(() => {
|
||||
return store.getters['setting/mode'];
|
||||
return store.displayMode;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('setting/changeTheme', { ...config });
|
||||
store.updateConfig({ ...config });
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { getBrandColor } from '@/config/color';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
const store = useSettingStore();
|
||||
|
||||
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)';
|
||||
|
|
@ -15,11 +17,9 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const style = computed(() => {
|
||||
const { value } = props;
|
||||
const { colorList } = store.state.setting;
|
||||
const { colorList } = store;
|
||||
return {
|
||||
background: value !== 'dynamic' ? getBrandColor(value, colorList)['@brand-color'] : panelColor,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import hexToHsl from 'hex-to-hsl';
|
||||
/* eslint-disable indent */
|
||||
export type ColorToken = Record<string, string>;
|
||||
export type ColorSeries = Record<string, ColorToken>;
|
||||
export type TColorToken = Record<string, string>;
|
||||
export type TColorSeries = Record<string, TColorToken>;
|
||||
|
||||
export const defaultLightColor = [
|
||||
'#0052d9',
|
||||
|
|
@ -24,7 +24,7 @@ export const defaultDarkColor = [
|
|||
'#ab87d5',
|
||||
];
|
||||
|
||||
export const BACKGROUND_TOKEN: ColorSeries = {
|
||||
export const BACKGROUND_TOKEN: TColorSeries = {
|
||||
BLUE_GREY: {
|
||||
'@gray-color-1': '#F1F2F5',
|
||||
'@gray-color-2': '#EBEDF1',
|
||||
|
|
@ -60,7 +60,7 @@ export const BACKGROUND_TOKEN: ColorSeries = {
|
|||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const NEUTRAL_GREY_TOKEN: ColorToken = {
|
||||
export const NEUTRAL_GREY_TOKEN: TColorToken = {
|
||||
'@gray-color-1': '#F3F3F3',
|
||||
'@gray-color-2': '#EEEEEE',
|
||||
'@gray-color-3': '#E7E7E7',
|
||||
|
|
@ -77,7 +77,7 @@ export const NEUTRAL_GREY_TOKEN: ColorToken = {
|
|||
'@gray-color-14': '#181818',
|
||||
};
|
||||
|
||||
export const COLOR_TOKEN: ColorSeries = {
|
||||
export const COLOR_TOKEN: TColorSeries = {
|
||||
DEFAULT: {
|
||||
'@brand-color': '#0052D9',
|
||||
'@brand-color-1': '#e0ebff',
|
||||
|
|
@ -185,35 +185,37 @@ export const COLOR_TOKEN: ColorSeries = {
|
|||
},
|
||||
};
|
||||
|
||||
export const LIGHT_CHART_COLORS: ColorToken = {
|
||||
export const LIGHT_CHART_COLORS = {
|
||||
textColor: 'rgba(0, 0, 0, 0.9)',
|
||||
placeholderColor: 'rgba(0, 0, 0, 0.35)',
|
||||
borderColor: '#dcdcdc',
|
||||
containerColor: '#fff',
|
||||
};
|
||||
|
||||
export const DARK_CHART_COLORS: ColorToken = {
|
||||
export const DARK_CHART_COLORS = {
|
||||
textColor: 'rgba(255, 255, 255, 0.9)',
|
||||
placeholderColor: 'rgba(255, 255, 255, 0.35)',
|
||||
borderColor: '#5e5e5e',
|
||||
containerColor: '#242424',
|
||||
};
|
||||
|
||||
export type TChartColor = typeof LIGHT_CHART_COLORS;
|
||||
|
||||
function toUnderline(name: string): string {
|
||||
return name.replace(/([A-Z])/g, '_$1').toUpperCase();
|
||||
}
|
||||
|
||||
export function getGreyColor(type: string): ColorToken {
|
||||
export function getGreyColor(type: string): TColorToken {
|
||||
const name = toUnderline(type);
|
||||
return BACKGROUND_TOKEN[name] || {};
|
||||
}
|
||||
|
||||
export function getBrandColor(type: string, colorList: ColorSeries): ColorToken {
|
||||
export function getBrandColor(type: string, colorList: TColorSeries): TColorToken {
|
||||
const name = /^#[A-F\d]{6}$/i.test(type) ? type : toUnderline(type);
|
||||
return colorList[name || 'DEFAULT'];
|
||||
}
|
||||
|
||||
export function getColorList(colorArray: Array<ColorToken>): Array<string> {
|
||||
export function getColorList(colorArray: Array<TColorToken>): Array<string> {
|
||||
const pureColorList = [];
|
||||
colorArray.map((colorToken) => Object.keys(colorToken).map((key) => pureColorList.push(colorToken[key])));
|
||||
|
||||
|
|
@ -262,7 +264,7 @@ export function generateColorMap(theme: string, colorPalette: Array<string>, mod
|
|||
};
|
||||
return colorMap;
|
||||
}
|
||||
export function insertThemeStylesheet(theme: string, colorMap: ColorToken, mode: 'light' | 'dark') {
|
||||
export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: 'light' | 'dark') {
|
||||
const isDarkMode = mode === 'dark';
|
||||
const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
|
||||
|
||||
|
|
|
|||
|
|
@ -35,5 +35,5 @@ export interface NotificationItem {
|
|||
status: boolean;
|
||||
collected: boolean;
|
||||
date: string;
|
||||
quality: 'high' | 'low' | 'middle';
|
||||
quality: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<search :layout="layout" />
|
||||
</div>
|
||||
</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>
|
||||
<div class="operations-container">
|
||||
<!-- 搜索框 -->
|
||||
|
|
@ -65,9 +65,8 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
|
||||
import { useSettingStore } from '@/store';
|
||||
import { prefix } from '@/config/global';
|
||||
import tLogoFull from '@/assets/assets-logo-full.svg?component';
|
||||
import { MenuRoute } from '@/interface';
|
||||
|
|
@ -107,11 +106,13 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const settingStore = useSettingStore();
|
||||
|
||||
const toggleSettingPanel = () => {
|
||||
store.commit('setting/toggleSettingPanel', true);
|
||||
settingStore.updateConfig({
|
||||
showSettingPanel: true,
|
||||
});
|
||||
};
|
||||
|
||||
const active = computed(() => {
|
||||
|
|
@ -141,7 +142,9 @@ const menuCls = computed(() => {
|
|||
});
|
||||
|
||||
const changeCollapsed = () => {
|
||||
store.commit('setting/toggleSidebarCompact');
|
||||
settingStore.updateConfig({
|
||||
isSidebarCompact: !settingStore.isSidebarCompact,
|
||||
});
|
||||
};
|
||||
|
||||
const handleNav = (url) => {
|
||||
|
|
|
|||
|
|
@ -46,31 +46,29 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useNotificationStore } from '@/store';
|
||||
import { NotificationItem } from '@/interface';
|
||||
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const { msgData } = store.state.notification;
|
||||
|
||||
const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
|
||||
const store = useNotificationStore();
|
||||
const { msgData, unreadMsg } = storeToRefs(store);
|
||||
|
||||
const setRead = (type: string, item?: NotificationItem) => {
|
||||
const changeMsg = msgData;
|
||||
const changeMsg = msgData.value;
|
||||
if (type === 'all') {
|
||||
changeMsg.forEach((e: NotificationItem) => {
|
||||
changeMsg.forEach((e) => {
|
||||
e.status = false;
|
||||
});
|
||||
} else {
|
||||
changeMsg.forEach((e: NotificationItem) => {
|
||||
changeMsg.forEach((e) => {
|
||||
if (e.id === item?.id) {
|
||||
e.status = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
store.commit('notification/setMsgData', changeMsg);
|
||||
store.setMsgData(changeMsg);
|
||||
};
|
||||
|
||||
const goDetail = () => {
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const layout = defineProps({
|
||||
type: String,
|
||||
defineProps({
|
||||
layout: String,
|
||||
});
|
||||
|
||||
const isSearchFocus = ref(false);
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
import { defineComponent, PropType, computed, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import { prefix } from '@/config/global';
|
||||
import pgk from '../../../package.json';
|
||||
import MenuContent from './MenuContent';
|
||||
import tLogo from '@/assets/assets-t-logo.svg?component';
|
||||
import tLogoFull from '@/assets/assets-logo-full.svg?component';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
const MIN_POINT = 992 - 1;
|
||||
|
||||
const useComputed = (props) => {
|
||||
const store = useStore();
|
||||
|
||||
const collapsed = computed(() => store.state.setting.isSidebarCompact);
|
||||
const collapsed = computed(() => useSettingStore().isSidebarCompact);
|
||||
|
||||
const sideNavCls = computed(() => {
|
||||
const { isCompact } = props;
|
||||
|
|
@ -87,16 +85,20 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
setup(props) {
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const settingStore = useSettingStore();
|
||||
|
||||
const changeCollapsed = () => {
|
||||
store.commit('setting/toggleSidebarCompact');
|
||||
settingStore.updateConfig({
|
||||
isSidebarCompact: !settingStore.isSidebarCompact,
|
||||
});
|
||||
};
|
||||
|
||||
const autoCollapsed = () => {
|
||||
const isCompact = window.innerWidth <= MIN_POINT;
|
||||
store.commit('setting/showSidebarCompact', isCompact);
|
||||
settingStore.updateConfig({
|
||||
isSidebarCompact: isCompact,
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { usePermissionStore, useSettingStore } from '@/store';
|
||||
|
||||
import TDesignHeader from './components/Header.vue';
|
||||
import TDesignBreadcrumb from './components/Breadcrumb.vue';
|
||||
import TDesignFooter from './components/Footer.vue';
|
||||
|
|
@ -8,112 +11,111 @@ import TDesignContent from './components/Content.vue';
|
|||
|
||||
import { prefix } from '@/config/global';
|
||||
import TdesignSetting from './setting.vue';
|
||||
import { SettingType } from '@/interface';
|
||||
import '@/style/layout.less';
|
||||
|
||||
const name = `${prefix}-base-layout`;
|
||||
|
||||
export default defineComponent({
|
||||
name,
|
||||
computed: {
|
||||
...mapGetters({
|
||||
showSidebar: 'setting/showSidebar',
|
||||
showHeader: 'setting/showHeader',
|
||||
showHeaderLogo: 'setting/showHeaderLogo',
|
||||
showSidebarLogo: 'setting/showSidebarLogo',
|
||||
showFooter: 'setting/showFooter',
|
||||
mode: 'setting/mode',
|
||||
menuRouters: 'permission/routers',
|
||||
}),
|
||||
setting(): SettingType {
|
||||
return this.$store.state.setting;
|
||||
},
|
||||
mainLayoutCls() {
|
||||
return [
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const permissionStore = usePermissionStore();
|
||||
const settingStore = useSettingStore();
|
||||
const { routers: menuRouters } = storeToRefs(permissionStore);
|
||||
const setting = storeToRefs(settingStore);
|
||||
|
||||
const mainLayoutCls = computed(() => [
|
||||
{
|
||||
't-layout--with-sider': this.showSidebar,
|
||||
't-layout--with-sider': settingStore.showSidebar,
|
||||
},
|
||||
];
|
||||
},
|
||||
headerMenu() {
|
||||
const { layout, splitMenu } = this.$store.state.setting;
|
||||
const { menuRouters } = this;
|
||||
if (layout === 'mix') {
|
||||
if (splitMenu) {
|
||||
return menuRouters.map((menu) => ({
|
||||
]);
|
||||
|
||||
const headerMenu = computed(() => {
|
||||
if (settingStore.layout === 'mix') {
|
||||
if (settingStore.splitMenu) {
|
||||
console.log(menuRouters);
|
||||
return menuRouters.value.map((menu) => ({
|
||||
...menu,
|
||||
children: [],
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
}
|
||||
return menuRouters;
|
||||
},
|
||||
sideMenu() {
|
||||
const { layout, splitMenu } = this.$store.state.setting;
|
||||
let { menuRouters } = this;
|
||||
return menuRouters.value;
|
||||
});
|
||||
|
||||
const sideMenu = computed(() => {
|
||||
const { layout, splitMenu } = settingStore;
|
||||
let newMenuRouters = menuRouters.value;
|
||||
if (layout === 'mix' && splitMenu) {
|
||||
menuRouters.forEach((menu) => {
|
||||
if (this.$route.path.indexOf(menu.path) === 0) {
|
||||
menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
|
||||
newMenuRouters.forEach((menu) => {
|
||||
if (route.path.indexOf(menu.path) === 0) {
|
||||
newMenuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
|
||||
}
|
||||
});
|
||||
}
|
||||
return menuRouters;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
renderSidebar() {
|
||||
return newMenuRouters;
|
||||
});
|
||||
|
||||
const renderSidebar = () => {
|
||||
return (
|
||||
this.showSidebar && (
|
||||
settingStore.showSidebar && (
|
||||
<TDesignSideNav
|
||||
showLogo={this.showSidebarLogo}
|
||||
layout={this.setting.layout}
|
||||
isFixed={this.setting.isSidebarFixed}
|
||||
menu={this.sideMenu}
|
||||
theme={this.mode}
|
||||
isCompact={this.setting.isSidebarCompact}
|
||||
showLogo={settingStore.showSidebarLogo}
|
||||
layout={settingStore.layout}
|
||||
isFixed={settingStore.isSidebarFixed}
|
||||
menu={sideMenu.value}
|
||||
theme={settingStore.displayMode}
|
||||
isCompact={settingStore.isSidebarCompact}
|
||||
/>
|
||||
)
|
||||
);
|
||||
},
|
||||
renderHeader() {
|
||||
};
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
this.showHeader && (
|
||||
settingStore.showHeader && (
|
||||
<TDesignHeader
|
||||
showLogo={this.showHeaderLogo}
|
||||
theme={this.mode}
|
||||
layout={this.setting.layout}
|
||||
isFixed={this.setting.isHeaderFixed}
|
||||
menu={this.headerMenu}
|
||||
isCompact={this.setting.isSidebarCompact}
|
||||
showLogo={settingStore.showHeaderLogo}
|
||||
theme={settingStore.displayMode}
|
||||
layout={settingStore.layout}
|
||||
isFixed={settingStore.isHeaderFixed}
|
||||
menu={headerMenu.value}
|
||||
isCompact={settingStore.isSidebarCompact}
|
||||
/>
|
||||
)
|
||||
);
|
||||
},
|
||||
renderContent() {
|
||||
const { showBreadcrumb } = this.setting;
|
||||
const { showFooter } = this;
|
||||
};
|
||||
|
||||
const renderFooter = () => {
|
||||
return (
|
||||
<t-footer class={`${prefix}-footer-layout`}>
|
||||
<TDesignFooter />
|
||||
</t-footer>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
const { showBreadcrumb, showFooter } = settingStore;
|
||||
return (
|
||||
<t-layout class={[`${prefix}-layout`]}>
|
||||
<t-content class={`${prefix}-content-layout`}>
|
||||
{showBreadcrumb && <TDesignBreadcrumb />}
|
||||
<TDesignContent />
|
||||
</t-content>
|
||||
{showFooter && this.renderFooter()}
|
||||
{showFooter && renderFooter()}
|
||||
</t-layout>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
renderFooter() {
|
||||
return (
|
||||
<t-footer class={`${prefix}-footer-layout`}>
|
||||
<TDesignFooter />
|
||||
</t-footer>
|
||||
);
|
||||
return {
|
||||
setting,
|
||||
mainLayoutCls,
|
||||
renderSidebar,
|
||||
renderHeader,
|
||||
renderContent,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { layout } = this.setting;
|
||||
const header = this.renderHeader();
|
||||
|
|
|
|||
|
|
@ -92,24 +92,23 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, watchEffect } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { ColorPicker } from 'vue-color-kit';
|
||||
import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
|
||||
import { Color } from 'tvision-color';
|
||||
import useClipboard from 'vue-clipboard3';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
import 'vue-color-kit/dist/vue-color-kit.css';
|
||||
|
||||
import STYLE_CONFIG from '@/config/style';
|
||||
import { insertThemeStylesheet, generateColorMap } from '@/config/color';
|
||||
|
||||
import Thumbnail from '@/components/thumbnail/index.vue';
|
||||
import ColorContainer from '@/components/color/index.vue';
|
||||
|
||||
import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
|
||||
import SettingLightIcon from '@/assets/assets-setting-light.svg';
|
||||
import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
|
||||
|
||||
const settingStore = useSettingStore();
|
||||
|
||||
const LAYOUT_OPTION = ['side', 'top', 'mix'];
|
||||
const COLOR_OPTIONS = ['default', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'dynamic'];
|
||||
const MODE_OPTIONS = [
|
||||
|
|
@ -119,61 +118,63 @@ const MODE_OPTIONS = [
|
|||
];
|
||||
|
||||
const formData = ref({ ...STYLE_CONFIG });
|
||||
const store = useStore();
|
||||
const colors = ref();
|
||||
const isColoPickerDisplay = ref(false);
|
||||
|
||||
const showSettingPanel = computed({
|
||||
get() {
|
||||
return store.state.setting.showSettingPanel;
|
||||
return settingStore.showSettingPanel;
|
||||
},
|
||||
set(newVal) {
|
||||
store.commit('setting/toggleSettingPanel', newVal);
|
||||
set(newVal: boolean) {
|
||||
settingStore.updateConfig({
|
||||
showSettingPanel: newVal,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const mode = computed(() => {
|
||||
return store.getters['setting/mode'];
|
||||
return settingStore.displayMode;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => colors.value,
|
||||
(newColor) => {
|
||||
const { hex } = newColor;
|
||||
const { setting } = store.state;
|
||||
|
||||
// hex 主题色
|
||||
const newPalette = Color.getPaletteByGradation({
|
||||
colors: [hex],
|
||||
step: 10,
|
||||
})[0];
|
||||
const { mode } = store.state.setting;
|
||||
const colorMap = generateColorMap(hex, newPalette, mode);
|
||||
const { mode } = settingStore;
|
||||
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);
|
||||
|
||||
store.dispatch('setting/changeTheme', { ...setting, brandTheme: hex });
|
||||
settingStore.updateConfig({
|
||||
[hex]: colorMap,
|
||||
});
|
||||
settingStore.changeBrandTheme(hex);
|
||||
},
|
||||
);
|
||||
|
||||
const changeColor = (val) => {
|
||||
const { hex } = val;
|
||||
const { setting } = store.state;
|
||||
// hex 主题色
|
||||
const newPalette = Color.getPaletteByGradation({
|
||||
colors: [hex],
|
||||
step: 10,
|
||||
})[0];
|
||||
const { mode } = store.state.setting;
|
||||
const colorMap = generateColorMap(hex, newPalette, mode);
|
||||
const { mode } = settingStore;
|
||||
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(() => {
|
||||
|
|
@ -212,7 +213,9 @@ const getModeIcon = (mode: string) => {
|
|||
};
|
||||
|
||||
const handleCloseDrawer = () => {
|
||||
store.commit('setting/toggleSettingPanel', false);
|
||||
settingStore.updateConfig({
|
||||
showSettingPanel: false,
|
||||
});
|
||||
};
|
||||
|
||||
const getThumbnailUrl = (name: string): string => {
|
||||
|
|
@ -220,7 +223,7 @@ const getThumbnailUrl = (name: string): string => {
|
|||
};
|
||||
|
||||
watchEffect(() => {
|
||||
store.dispatch('setting/changeTheme', formData.value);
|
||||
settingStore.updateConfig(formData.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import { createApp } from 'vue';
|
|||
import TDesign from 'tdesign-vue-next';
|
||||
import 'tdesign-vue-next/es/style/index.css';
|
||||
import VueClipboard from 'vue3-clipboard';
|
||||
|
||||
import { store } from './store';
|
||||
import router from './router';
|
||||
import '@/style/index.less';
|
||||
import './permission';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
import dayjs from 'dayjs';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { Color } from 'tvision-color';
|
||||
import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color';
|
||||
import store from '@/store';
|
||||
|
||||
const { state } = store;
|
||||
import { getBrandColor, defaultLightColor, defaultDarkColor, TChartColor } from '@/config/color';
|
||||
import { getSettingStore } from '@/store';
|
||||
|
||||
/**
|
||||
* 依据主题类型获取颜色
|
||||
|
|
@ -14,8 +12,8 @@ const { state } = store;
|
|||
* @returns {}
|
||||
*/
|
||||
export function getColorFromTheme(theme: string) {
|
||||
const { setting } = state as any;
|
||||
const { colorList, mode } = setting;
|
||||
const settingStore = getSettingStore();
|
||||
const { colorList, mode } = settingStore;
|
||||
const isDarkMode = mode === 'dark';
|
||||
let themeColorList = [];
|
||||
const themeColor = getBrandColor(theme, colorList);
|
||||
|
|
@ -41,8 +39,9 @@ export function getColorFromTheme(theme: string) {
|
|||
|
||||
/** 图表颜色 */
|
||||
function chartListColor(): Array<string> {
|
||||
const { setting } = state as any;
|
||||
const res = getColorFromTheme(setting.brandTheme);
|
||||
const settingStore = getSettingStore();
|
||||
const { brandTheme } = settingStore;
|
||||
const res = getColorFromTheme(brandTheme);
|
||||
|
||||
return res;
|
||||
}
|
||||
|
|
@ -178,7 +177,7 @@ export function constructInitDataset({
|
|||
dateTime = [],
|
||||
placeholderColor,
|
||||
borderColor,
|
||||
}: { dateTime: Array<string> } & Record<string, string>) {
|
||||
}: { dateTime: Array<string> } & TChartColor) {
|
||||
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
|
||||
const divideNum = 10;
|
||||
const timeArray = [];
|
||||
|
|
@ -276,7 +275,7 @@ export function getSmoothLineDataSet({
|
|||
dateTime = [],
|
||||
placeholderColor,
|
||||
borderColor,
|
||||
}: { dateTime?: Array<string> } & Record<string, string>) {
|
||||
}: { dateTime?: Array<string> } & TChartColor) {
|
||||
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
|
||||
if (dateTime.length > 0) {
|
||||
const divideNum = 7;
|
||||
|
|
@ -383,7 +382,7 @@ export function getFolderLineDataSet({
|
|||
dateTime = [],
|
||||
placeholderColor,
|
||||
borderColor,
|
||||
}: { dateTime?: Array<string> } & Record<string, string>) {
|
||||
}: { dateTime?: Array<string> } & TChartColor) {
|
||||
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
if (dateTime.length > 0) {
|
||||
const divideNum = 7;
|
||||
|
|
@ -543,7 +542,7 @@ export function getLineChartDataSet({
|
|||
dateTime = [],
|
||||
placeholderColor,
|
||||
borderColor,
|
||||
}: { dateTime?: Array<string> } & Record<string, string>) {
|
||||
}: { dateTime?: Array<string> } & TChartColor) {
|
||||
const divideNum = 10;
|
||||
const timeArray = [];
|
||||
const inArray = [];
|
||||
|
|
@ -679,7 +678,7 @@ export function getScatterDataSet({
|
|||
dateTime = [],
|
||||
placeholderColor,
|
||||
borderColor,
|
||||
}: { dateTime?: Array<string> } & Record<string, string>): any {
|
||||
}: { dateTime?: Array<string> } & TChartColor): any {
|
||||
const divideNum = 40;
|
||||
const timeArray = [];
|
||||
const inArray = [];
|
||||
|
|
@ -975,7 +974,7 @@ export function get2ColBarChartDataSet({
|
|||
isMonth = false,
|
||||
placeholderColor,
|
||||
borderColor,
|
||||
}: { isMonth?: boolean } & Record<string, string>) {
|
||||
}: { isMonth?: boolean } & TChartColor) {
|
||||
let lastYearListCopy = lastYearList.concat([]);
|
||||
let thisYearListCopy = lastYearList.concat([]);
|
||||
|
||||
|
|
@ -1078,7 +1077,7 @@ export function getPieChartDataSet({
|
|||
textColor,
|
||||
placeholderColor,
|
||||
containerColor,
|
||||
}: { radius: number } & Record<string, string>) {
|
||||
}: { radius?: number } & Record<string, string>) {
|
||||
return {
|
||||
color: chartListColor(),
|
||||
tooltip: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<t-row :gutter="[16, 16]">
|
||||
<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-top">
|
||||
<span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
|
||||
|
|
@ -204,12 +204,12 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch, ref, onUnmounted, nextTick, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
|
||||
import { PieChart, LineChart, BarChart } from 'echarts/charts';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { useSettingStore } from '@/store';
|
||||
import { LAST_7_DAYS } from '@/utils/date';
|
||||
|
||||
// 导入样式
|
||||
|
|
@ -241,10 +241,10 @@ const getThisMonth = (checkedValues?: string[]) => {
|
|||
return `${date.getFullYear()}-${startMonth} 至 ${date2.getFullYear()}-${endMonth}`;
|
||||
};
|
||||
|
||||
const store = useStore();
|
||||
const store = useSettingStore();
|
||||
const resizeTime = ref(1);
|
||||
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
const chartColors = computed(() => store.chartColors);
|
||||
|
||||
// moneyCharts
|
||||
let moneyContainer: HTMLElement;
|
||||
|
|
@ -355,14 +355,14 @@ onUnmounted(() => {
|
|||
const currentMonth = ref(getThisMonth());
|
||||
|
||||
watch(
|
||||
() => store.state.setting.brandTheme,
|
||||
() => store.brandTheme,
|
||||
() => {
|
||||
changeChartsTheme([refundChart, stokeChart, monitorChart, countChart]);
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.state.setting.mode,
|
||||
() => store.mode,
|
||||
() => {
|
||||
[moneyChart, refundChart, stokeChart, monitorChart, countChart].forEach((item) => {
|
||||
item.dispose();
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
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 { PANE_LIST_DATA, PRODUCT_LIST } from './constants';
|
||||
import { LAST_7_DAYS } from '@/utils/date';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
import Trend from '@/components/trend/index.vue';
|
||||
import Card from '@/components/card/index.vue';
|
||||
|
||||
echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, ScatterChart, CanvasRenderer]);
|
||||
|
||||
const store = useStore();
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
const store = useSettingStore();
|
||||
const chartColors = computed(() => store.chartColors);
|
||||
|
||||
// lineChart logic
|
||||
let lineContainer: HTMLElement;
|
||||
let lineChart: echarts.ECharts;
|
||||
|
|
@ -126,14 +127,14 @@ onUnmounted(() => {
|
|||
});
|
||||
|
||||
watch(
|
||||
() => store.state.setting.mode,
|
||||
() => store.mode,
|
||||
() => {
|
||||
renderCharts();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => store.state.setting.brandTheme,
|
||||
() => store.brandTheme,
|
||||
() => {
|
||||
changeChartsTheme([lineChart, scatterChart]);
|
||||
},
|
||||
|
|
@ -144,7 +145,7 @@ const onSatisfyChange = () => {
|
|||
};
|
||||
|
||||
const onMaterialChange = (value: string[]) => {
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
const chartColors = computed(() => store.chartColors);
|
||||
lineChart.setOption(getFolderLineDataSet({ dateTime: value, ...chartColors.value }));
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -70,12 +70,12 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
import { TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
|
||||
import { BarChart, LineChart } from 'echarts/charts';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
import { changeChartsTheme, getSmoothLineDataSet, get2ColBarChartDataSet } from '../../dashboard/base/index';
|
||||
import { BASE_INFO_DATA, TABLE_COLUMNS as columns } from './constants';
|
||||
|
|
@ -96,9 +96,9 @@ echarts.use([
|
|||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
const store = useStore();
|
||||
const store = useSettingStore();
|
||||
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
const chartColors = computed(() => store.chartColors);
|
||||
const data = ref([]);
|
||||
const pagination = ref({
|
||||
defaultPageSize: 10,
|
||||
|
|
@ -173,7 +173,7 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
watch(
|
||||
() => store.state.setting.brandTheme,
|
||||
() => store.brandTheme,
|
||||
() => {
|
||||
changeChartsTheme([monitorChart, dataChart]);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -50,11 +50,12 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, ComputedRef } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { ref, computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { NOTIFICATION_TYPES } from '@/constants';
|
||||
import { NotificationItem } from '@/interface';
|
||||
import EmptyIcon from '@/assets/assets-empty.svg?component';
|
||||
import { useNotificationStore } from '@/store';
|
||||
|
||||
const TAB_LIST = [
|
||||
{
|
||||
|
|
@ -76,14 +77,13 @@ const tabValue = ref('msgData');
|
|||
const visible = ref(false);
|
||||
const selectedItem = ref<NotificationItem>();
|
||||
|
||||
const store = useStore();
|
||||
const store = useNotificationStore();
|
||||
const { msgData, unreadMsg, readMsg } = storeToRefs(store);
|
||||
|
||||
const { msgData } = store.state.notification;
|
||||
|
||||
const msgDataList: ComputedRef<NotificationItem[]> = computed(() => {
|
||||
if (tabValue.value === 'msgData') return msgData;
|
||||
if (tabValue.value === 'unreadMsg') return store.getters['notification/unreadMsg'];
|
||||
if (tabValue.value === 'readMsg') return store.getters['notification/readMsg'];
|
||||
const msgDataList = computed(() => {
|
||||
if (tabValue.value === 'msgData') return msgData.value;
|
||||
if (tabValue.value === 'unreadMsg') return unreadMsg.value;
|
||||
if (tabValue.value === 'readMsg') return readMsg.value;
|
||||
return [];
|
||||
});
|
||||
|
||||
|
|
@ -93,25 +93,25 @@ const handleClickDeleteBtn = (item: NotificationItem) => {
|
|||
};
|
||||
|
||||
const setReadStatus = (item: NotificationItem) => {
|
||||
const changeMsg = msgData;
|
||||
const changeMsg = msgData.value;
|
||||
changeMsg.forEach((e: NotificationItem) => {
|
||||
if (e.id === item.id) {
|
||||
if (e.status) e.status = false;
|
||||
}
|
||||
});
|
||||
store.commit('notification/setMsgData', changeMsg);
|
||||
store.setMsgData(changeMsg);
|
||||
};
|
||||
|
||||
const deleteMsg = () => {
|
||||
const item = selectedItem.value;
|
||||
const changeMsg = msgData;
|
||||
const changeMsg = msgData.value;
|
||||
changeMsg.forEach((e: NotificationItem, index: number) => {
|
||||
if (e.id === item?.id) {
|
||||
changeMsg.splice(index, 1);
|
||||
}
|
||||
});
|
||||
visible.value = false;
|
||||
store.commit('notification/setMsgData', changeMsg);
|
||||
store.setMsgData(changeMsg);
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,14 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from 'vuex';
|
||||
import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
const store = useStore();
|
||||
const settingStore = useSettingStore();
|
||||
const toggleSettingPanel = () => {
|
||||
store.commit('setting/toggleSettingPanel', true);
|
||||
settingStore.updateConfig({
|
||||
showSettingPanel: true,
|
||||
});
|
||||
};
|
||||
|
||||
const navToGitHub = () => {
|
||||
|
|
|
|||
|
|
@ -73,10 +73,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useStore } from 'vuex';
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import { MessagePlugin } from 'tdesign-vue-next';
|
||||
import { useCounter } from '@/hooks';
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const INITIAL_DATA = {
|
||||
phone: '',
|
||||
|
|
@ -105,12 +107,12 @@ const switchType = (val: string) => {
|
|||
};
|
||||
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
const onSubmit = async ({ validateResult }) => {
|
||||
if (validateResult === true) {
|
||||
try {
|
||||
await store.dispatch('user/login', formData.value);
|
||||
await userStore.login(formData.value);
|
||||
|
||||
MessagePlugin.success('登陆成功');
|
||||
router.push({
|
||||
path: '/dashboard/base',
|
||||
|
|
|
|||
|
|
@ -91,11 +91,11 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, onUnmounted, watch, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { useSettingStore } from '@/store';
|
||||
|
||||
import { LAST_7_DAYS } from '@/utils/date';
|
||||
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 lineChart: echarts.ECharts;
|
||||
const store = useStore();
|
||||
const chartColors = computed(() => store.state.setting.chartColors);
|
||||
const store = useSettingStore();
|
||||
const chartColors = computed(() => store.chartColors);
|
||||
|
||||
const onLineChange = (value) => {
|
||||
lineChart.setOption(getFolderLineDataSet(value));
|
||||
|
|
@ -166,7 +166,7 @@ const getIcon = (type) => {
|
|||
};
|
||||
|
||||
watch(
|
||||
() => store.state.setting.brandTheme,
|
||||
() => store.brandTheme,
|
||||
() => {
|
||||
changeChartsTheme([lineChart]);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,42 +2,47 @@ import { MessagePlugin } from 'tdesign-vue-next';
|
|||
import NProgress from 'nprogress'; // progress bar
|
||||
import 'nprogress/nprogress.css'; // progress bar style
|
||||
|
||||
import store from '@/store';
|
||||
import { getPermissionStore, getUserStore } from '@/store';
|
||||
import router from '@/router';
|
||||
|
||||
const permissionStore = getPermissionStore();
|
||||
const userStore = getUserStore();
|
||||
|
||||
NProgress.configure({ showSpinner: false });
|
||||
|
||||
const whiteListRouters = store.getters['permission/whiteListRouters'];
|
||||
const { whiteListRouters } = permissionStore;
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
NProgress.start();
|
||||
|
||||
const token = store.getters['user/token'];
|
||||
const { token } = userStore;
|
||||
|
||||
if (token) {
|
||||
if (to.path === '/login') {
|
||||
setTimeout(() => {
|
||||
store.dispatch('user/logout');
|
||||
store.dispatch('permission/restore');
|
||||
userStore.logout();
|
||||
permissionStore.restore();
|
||||
});
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
const roles = store.getters['user/roles'];
|
||||
const { roles } = userStore;
|
||||
|
||||
if (roles && roles.length > 0) {
|
||||
next();
|
||||
} else {
|
||||
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 });
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
MessagePlugin.error(error);
|
||||
await store.commit('user/removeToken');
|
||||
await userStore.removeToken();
|
||||
next(`/login?redirect=${to.path}`);
|
||||
NProgress.done();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import baseRouters from './modules/base';
|
|||
import componentsRouters from './modules/components';
|
||||
import othersRouters from './modules/others';
|
||||
|
||||
// 关于单层路由，meta 中设置 { single: true } 即可为单层路由，{ hidden: true } 即可在侧边栏隐藏该路由
|
||||
|
||||
// 存放动态路由
|
||||
export const asyncRouterList: Array<RouteRecordRaw> = [...baseRouters, ...componentsRouters, ...othersRouters];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
import { createStore } from 'vuex';
|
||||
import user from './modules/user';
|
||||
import notification from './modules/notification';
|
||||
import setting from './modules/setting';
|
||||
import permission from './modules/permission';
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
export const store = createStore({
|
||||
modules: {
|
||||
user,
|
||||
setting,
|
||||
notification,
|
||||
permission,
|
||||
},
|
||||
});
|
||||
const store = createPinia();
|
||||
|
||||
export { store };
|
||||
|
||||
export * from './modules/notification';
|
||||
export * from './modules/permission';
|
||||
export * from './modules/user';
|
||||
export * from './modules/setting';
|
||||
|
||||
export default store;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
// 定义的state初始值
|
||||
import { defineStore } from 'pinia';
|
||||
import { NotificationItem } from '@/interface';
|
||||
|
||||
const state = {
|
||||
msgData: [
|
||||
const msgData = [
|
||||
{
|
||||
id: '123',
|
||||
content: '腾讯大厦一楼改造施工项目 已通过审核！',
|
||||
|
|
@ -57,29 +56,21 @@ const state = {
|
|||
date: '2021-01-01 08:00',
|
||||
quality: 'low',
|
||||
},
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
type NotificationStateType = typeof state;
|
||||
type MsgDataType = typeof state.msgData;
|
||||
type MsgDataType = typeof msgData;
|
||||
|
||||
const mutations = {
|
||||
setMsgData(state: NotificationStateType, data: MsgDataType) {
|
||||
state.msgData = data;
|
||||
export const useNotificationStore = defineStore('notification', {
|
||||
state: () => ({
|
||||
msgData,
|
||||
}),
|
||||
getters: {
|
||||
unreadMsg: (state) => state.msgData.filter((item: NotificationItem) => item.status),
|
||||
readMsg: (state) => state.msgData.filter((item: NotificationItem) => !item.status),
|
||||
},
|
||||
};
|
||||
|
||||
const getters = {
|
||||
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,
|
||||
};
|
||||
actions: {
|
||||
setMsgData(data: MsgDataType) {
|
||||
this.msgData = data;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
import router, { asyncRouterList, page404 } from '@/router';
|
||||
import { store } from '@/store';
|
||||
|
||||
function filterPermissionsRouters(routes, roles) {
|
||||
function filterPermissionsRouters(routes: Array<RouteRecordRaw>, roles: Array<unknown>) {
|
||||
const res = [];
|
||||
routes.forEach((route) => {
|
||||
const children = [];
|
||||
|
|
@ -18,28 +21,13 @@ function filterPermissionsRouters(routes, roles) {
|
|||
return res;
|
||||
}
|
||||
|
||||
const state = {
|
||||
export const usePermissionStore = defineStore('permission', {
|
||||
state: () => ({
|
||||
whiteListRouters: ['/login'],
|
||||
routers: [],
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
setRouters: (state, routers) => {
|
||||
state.routers = routers;
|
||||
},
|
||||
};
|
||||
|
||||
const getters = {
|
||||
routers: (state) => {
|
||||
return state.routers;
|
||||
},
|
||||
whiteListRouters: (state) => {
|
||||
return state.whiteListRouters;
|
||||
},
|
||||
};
|
||||
|
||||
const actions = {
|
||||
async initRoutes({ commit }, roles) {
|
||||
}),
|
||||
actions: {
|
||||
async initRoutes(roles: Array<unknown>) {
|
||||
let accessedRouters;
|
||||
|
||||
// special token
|
||||
|
|
@ -49,26 +37,22 @@ const actions = {
|
|||
accessedRouters = filterPermissionsRouters(asyncRouterList, roles);
|
||||
}
|
||||
|
||||
commit('setRouters', accessedRouters);
|
||||
this.routers = accessedRouters;
|
||||
|
||||
// register routers
|
||||
state.routers.concat(page404).forEach((item) => {
|
||||
accessedRouters.concat(page404).forEach((item: RouteRecordRaw) => {
|
||||
router.addRoute(item);
|
||||
});
|
||||
},
|
||||
async restore({ commit, state }) {
|
||||
// remove routers
|
||||
state.routers.concat(page404).forEach((item) => {
|
||||
router.removeRoute(item.name);
|
||||
async restore() {
|
||||
this.routers.concat(page404).forEach((item: RouteRecordRaw) => {
|
||||
if (router.hasRoute(item.name)) router.removeRoute(item.name);
|
||||
});
|
||||
commit('setRouters', []);
|
||||
this.routers = [];
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
getters,
|
||||
};
|
||||
export function getPermissionStore() {
|
||||
return usePermissionStore(store);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { COLOR_TOKEN, ColorSeries, ColorToken, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
|
||||
import { store } from '@/store';
|
||||
|
||||
// 定义的state初始值
|
||||
const state = {
|
||||
...STYLE_CONFIG,
|
||||
showSettingPanel: false,
|
||||
|
|
@ -9,53 +10,15 @@ const state = {
|
|||
chartColors: LIGHT_CHART_COLORS,
|
||||
};
|
||||
|
||||
type IInitStateType = typeof state;
|
||||
export type TState = typeof state;
|
||||
|
||||
interface IStateType extends IInitStateType {
|
||||
isAsideFooter: boolean;
|
||||
showSettingPanel: boolean;
|
||||
}
|
||||
|
||||
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) => {
|
||||
export const useSettingStore = defineStore('setting', {
|
||||
state: () => state,
|
||||
getters: {
|
||||
showSidebar: (state) => state.layout !== 'top',
|
||||
showSidebarLogo: (state) => state.layout === 'side',
|
||||
showHeaderLogo: (state) => state.layout !== 'side',
|
||||
displayMode: (state) => {
|
||||
if (state.mode === 'auto') {
|
||||
const media = window.matchMedia('(prefers-color-scheme:dark)');
|
||||
if (media.matches) {
|
||||
|
|
@ -65,18 +28,12 @@ const getters = {
|
|||
}
|
||||
return state.mode;
|
||||
},
|
||||
};
|
||||
|
||||
const actions = {
|
||||
async changeTheme({ commit, dispatch }, payload) {
|
||||
dispatch('changeMode', payload);
|
||||
dispatch('changeBrandTheme', payload);
|
||||
commit('update', payload);
|
||||
},
|
||||
async changeMode({ commit }, payload: IStateType) {
|
||||
let theme = payload.mode;
|
||||
actions: {
|
||||
async changeMode(mode: 'dark' | 'light' | 'auto') {
|
||||
let theme = mode;
|
||||
|
||||
if (payload.mode === 'auto') {
|
||||
if (mode === 'auto') {
|
||||
const media = window.matchMedia('(prefers-color-scheme:dark)');
|
||||
if (media.matches) {
|
||||
theme = 'dark';
|
||||
|
|
@ -88,19 +45,27 @@ const actions = {
|
|||
|
||||
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) {
|
||||
const { brandTheme } = payload;
|
||||
|
||||
changeBrandTheme(brandTheme: string) {
|
||||
document.documentElement.setAttribute('theme-color', brandTheme);
|
||||
},
|
||||
};
|
||||
updateConfig(payload: Partial<TState>) {
|
||||
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 {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
getters,
|
||||
};
|
||||
export function getSettingStore() {
|
||||
return useSettingStore(store);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,24 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { TOKEN_NAME } from '@/config/global';
|
||||
import { store } from '@/store';
|
||||
|
||||
const InitUserInfo = {
|
||||
roles: [],
|
||||
};
|
||||
|
||||
// 定义的state初始值
|
||||
const state = {
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => ({
|
||||
token: localStorage.getItem(TOKEN_NAME) || 'main_token', // 默认token不走权限
|
||||
userInfo: InitUserInfo,
|
||||
};
|
||||
|
||||
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;
|
||||
},
|
||||
}),
|
||||
getters: {
|
||||
roles: (state) => {
|
||||
return state.userInfo?.roles;
|
||||
},
|
||||
};
|
||||
|
||||
const actions = {
|
||||
async login({ commit }, userInfo) {
|
||||
const mockLogin = async (userInfo) => {
|
||||
},
|
||||
actions: {
|
||||
async login(userInfo: Record<string, unknown>) {
|
||||
const mockLogin = async (userInfo: Record<string, unknown>) => {
|
||||
// 登录请求流程
|
||||
console.log(userInfo);
|
||||
// const { account, password } = userInfo;
|
||||
|
|
@ -64,13 +47,13 @@ const actions = {
|
|||
|
||||
const res = await mockLogin(userInfo);
|
||||
if (res.code === 200) {
|
||||
commit('setToken', res.data);
|
||||
this.token = res.data;
|
||||
} else {
|
||||
throw res;
|
||||
}
|
||||
},
|
||||
async getUserInfo({ commit, state }) {
|
||||
const mockRemoteUserInfo = async (token) => {
|
||||
async getUserInfo() {
|
||||
const mockRemoteUserInfo = async (token: string) => {
|
||||
if (token === 'main_token') {
|
||||
return {
|
||||
name: 'td_main',
|
||||
|
|
@ -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 }) {
|
||||
commit('removeToken');
|
||||
commit('setUserInfo', InitUserInfo);
|
||||
async logout() {
|
||||
localStorage.removeItem(TOKEN_NAME);
|
||||
this.token = '';
|
||||
this.userInfo = InitUserInfo;
|
||||
},
|
||||
};
|
||||
async removeToken() {
|
||||
this.token = '';
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
getters,
|
||||
};
|
||||
export function getUserStore() {
|
||||
return useUserStore(store);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user