Skip to content

Commit

Permalink
feat: persistent save tab, fix #359
Browse files Browse the repository at this point in the history
  • Loading branch information
anncwb committed Apr 10, 2021
1 parent 2037293 commit 967b28c
Show file tree
Hide file tree
Showing 12 changed files with 335 additions and 378 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.zh_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
- 移除 `useDebounceFn` 使用`vueuse`-`useDebounceFn`代替
- 移除 `useThrottle` 使用`vueuse`-`useThrottleFn`代替

### ✨ Features

- 标签页支持持久化保存

### ✨ Refactor

- 移除 `useElResize`
Expand Down
2 changes: 1 addition & 1 deletion build/vite/plugin/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function configThemePlugin(isBuild: boolean): Plugin[] {
// black: '#0e1117',
// #8b949e
'text-color-secondary': '#8b949e',
// 'border-color-base': '#30363d',
'border-color-base': '#303030',
// 'border-color-split': '#30363d',
'item-active-bg': '#111b26',
},
Expand Down
7 changes: 6 additions & 1 deletion src/components/Tree/src/TreeHeader.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="flex px-2 py-1.5 items-center border-b-1">
<div class="flex px-2 py-1.5 items-center basic-tree-header">
<slot name="headerTitle" v-if="$slots.headerTitle"></slot>
<BasicTitle :helpMessage="helpMessage" v-if="!$slots.headerTitle && title">
{{ title }}
Expand Down Expand Up @@ -138,3 +138,8 @@
},
});
</script>
<style lang="less" scoped>
.basic-tree-header {
border-bottom: 1px solid @border-color-base;
}
</style>
2 changes: 2 additions & 0 deletions src/enums/cacheEnum.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__';
// lock info
export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__';

export const MULTIPLE_TABS_KEY = 'MULTIPLE_TABS__KEY__';

export const APP_DARK_MODE_KEY_ = '__APP__DARK__MODE__';

// base global local key
Expand Down
2 changes: 1 addition & 1 deletion src/router/routes/modules/demo/page.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const page: AppRouteModule = {
path: '/page-demo',
name: 'PageDemo',
component: LAYOUT,
redirect: '/page-demo/exception',
redirect: '/page-demo/form/basic',
meta: {
icon: 'ion:aperture-outline',
title: t('routes.demo.page.page'),
Expand Down
2 changes: 1 addition & 1 deletion src/settings/projectSetting.ts
Original file line number Diff line number Diff line change
Expand Up @@ -114,13 +114,13 @@ const setting: ProjectConfig = {

// Multi-label
multiTabsSetting: {
cache: false,
// Turn on
show: true,
// Is it possible to drag and drop sorting tabs
canDrag: true,
// Turn on quick actions
showQuick: true,

// Whether to show the refresh button
showRedo: true,
// Whether to show the collapse button
Expand Down
4 changes: 2 additions & 2 deletions src/store/modules/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { resetRouter } from '/@/router';
import { deepMerge } from '/@/utils';

interface AppState {
darkMode: ThemeEnum;
darkMode?: ThemeEnum;
// Page loading status
pageLoading: boolean;
// project config
Expand All @@ -24,7 +24,7 @@ let timeId: TimeoutHandle;
export const useAppStore = defineStore({
id: 'app',
state: (): AppState => ({
darkMode: ThemeEnum.LIGHT,
darkMode: undefined,
pageLoading: false,
projectConfig: Persistent.getLocal(PROJ_CFG_KEY),
beforeMiniInfo: {},
Expand Down
9 changes: 8 additions & 1 deletion src/store/modules/multipleTab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,14 @@ import { defineStore } from 'pinia';
import { store } from '/@/store';

import { useGo, useRedo } from '/@/hooks/web/usePage';
import { Persistent } from '/@/utils/cache/persistent';

import { PageEnum } from '/@/enums/pageEnum';
import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
import { getRawRoute } from '/@/utils';
import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum';

import projectSetting from '/@/settings/projectSetting';

export interface MultipleTabState {
cacheTabList: Set<string>;
Expand All @@ -21,13 +25,15 @@ function handleGotoPage(router: Router) {
go(unref(router.currentRoute).path, true);
}

const cacheTab = projectSetting.multiTabsSetting.cache;

export const useMultipleTabStore = defineStore({
id: 'app-multiple-tab',
state: (): MultipleTabState => ({
// Tabs that need to be cached
cacheTabList: new Set(),
// multiple tab list
tabList: [],
tabList: cacheTab ? Persistent.getLocal(MULTIPLE_TABS_KEY) || [] : [],
// Index of the last moved tab
lastDragEndIndex: 0,
}),
Expand Down Expand Up @@ -135,6 +141,7 @@ export const useMultipleTabStore = defineStore({
// Add tab
this.tabList.push(route);
this.updateCacheTab();
cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
},

async closeTab(tab: RouteLocationNormalized, router: Router) {
Expand Down
3 changes: 3 additions & 0 deletions src/utils/cache/persistent.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { LockInfo, UserInfo } from '/#/store';
import type { ProjectConfig } from '/#/config';
import type { RouteLocationNormalized } from 'vue-router';

import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
import { Memory } from './memory';
Expand All @@ -11,6 +12,7 @@ import {
PROJ_CFG_KEY,
APP_LOCAL_CACHE_KEY,
APP_SESSION_CACHE_KEY,
MULTIPLE_TABS_KEY,
} from '/@/enums/cacheEnum';
import { DEFAULT_CACHE_TIME } from '/@/settings/encryptionSetting';
import { toRaw } from 'vue';
Expand All @@ -21,6 +23,7 @@ interface BasicStore {
[ROLES_KEY]: string[];
[LOCK_INFO_KEY]: LockInfo;
[PROJ_CFG_KEY]: ProjectConfig;
[MULTIPLE_TABS_KEY]: RouteLocationNormalized[];
}

type LocalStore = BasicStore;
Expand Down
2 changes: 1 addition & 1 deletion src/views/demo/feat/ws/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@

<div class="max-h-80 overflow-auto">
<ul>
<li v-for="item in getList" class="border-b-1 mt-2" :key="item.time">
<li v-for="item in getList" class="mt-2" :key="item.time">
<div class="flex items-center">
<span class="mr-2 text-primary font-medium">收到消息:</span>
<span>{{ formatToDateTime(item.time) }}</span>
Expand Down
1 change: 1 addition & 0 deletions types/config.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface MenuSetting {
}

export interface MultiTabsSetting {
cache: boolean;
show: boolean;
showQuick: boolean;
canDrag: boolean;
Expand Down
Loading

0 comments on commit 967b28c

Please sign in to comment.