Skip to content

Commit

Permalink
feat: optimized ui
Browse files Browse the repository at this point in the history
  • Loading branch information
tikazyq committed Oct 16, 2024
1 parent 0802e59 commit 1e94324
Show file tree
Hide file tree
Showing 12 changed files with 53 additions and 70 deletions.
4 changes: 1 addition & 3 deletions src/components/core/git/GitForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ defineOptions({ name: 'ClGitForm' });
pattern: /^https?:\/\/|^git@/,
}"
>
<div style="display: flex; align-items: center; gap: 5px">
<div style="display: flex; align-items: center; gap: 5px; width: 100%">
<el-input
v-model="form.url"
:placeholder="t('components.git.form.repoUrl')"
Expand Down Expand Up @@ -181,5 +181,3 @@ defineOptions({ name: 'ClGitForm' });
</template>
</cl-form>
</template>

<style lang="scss" scoped></style>
2 changes: 1 addition & 1 deletion src/components/core/git/GitLogsDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const dialogVisible = computed(() => activeDialogKey.value === 'logs');
const logsViewRef = ref<typeof ClLogsView>();
let handle: number;
let handle: any;
const update = () => {
if (dialogVisible) {
handle = setInterval(async () => {
Expand Down
2 changes: 0 additions & 2 deletions src/components/ui/file/FileActions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -75,5 +75,3 @@ defineOptions({ name: 'ClFileActions' });
</cl-nav-action-item>
</cl-nav-action-group>
</template>

<style lang="scss" scoped></style>
2 changes: 1 addition & 1 deletion src/interfaces/store/modules/layout.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ declare global {

interface LayoutStoreMutations extends MutationTree<LayoutStoreState> {
setMenuItems: StoreMutation<LayoutStoreState, MenuItem[]>;
setSideBarCollapsed: StoreMutation<LayoutStoreState, boolean>;
setSidebarCollapsed: StoreMutation<LayoutStoreState, boolean>;
setTabs: StoreMutation<LayoutStoreState, Tab[]>;
setActiveTabId: StoreMutation<LayoutStoreState, number>;
addTab: StoreMutation<LayoutStoreState, Tab>;
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/components/Sidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const onMenuItemClick = (_: string, indexPath: string[]) => {
const toggleSidebar = () => {
store.commit(
`${storeNamespace}/setSideBarCollapsed`,
`${storeNamespace}/setSidebarCollapsed`,
!sidebarCollapsed.value
);
};
Expand Down
4 changes: 3 additions & 1 deletion src/store/modules/layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { plainClone } from '@/utils/object';
import { normalizeTree } from '@/utils/tree';
import { getDefaultMenuItems } from '@/router';
import { isPro } from '@/utils';
import { saveLocalStorage } from '@/utils/storage';

// persistent sidebar collapsed
const getDefaultSidebarCollapsed = (): boolean => {
Expand Down Expand Up @@ -104,8 +105,9 @@ export default {
setMenuItems(state: LayoutStoreState, items: MenuItem[]) {
state.menuItems = items;
},
setSideBarCollapsed(state: LayoutStoreState, value: boolean) {
setSidebarCollapsed(state: LayoutStoreState, value: boolean) {
state.sidebarCollapsed = value;
saveLocalStorage('sidebarCollapsed', value);
},
setTabs(state: LayoutStoreState, tabs: Tab[]) {
state.tabs = tabs;
Expand Down
19 changes: 19 additions & 0 deletions src/utils/storage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,22 @@ export const loadLocalStorage = (key: string): any => {
export const saveLocalStorage = (key: string, data: any) => {
localStorage.setItem(key, JSON.stringify(data));
};

export const loadNamespaceLocalStorage = (ns: StoreNamespace, key: string) => {
const data = loadLocalStorage(key);
if (!data) return {};
return data[ns] || {};
};

export const saveNamespaceLocalStorage = (
ns: StoreNamespace,
key: string,
values: Record<string, any>
) => {
const existingValues = loadLocalStorage(key) || {};
existingValues[ns] = {
...existingValues[ns],
...values,
};
saveLocalStorage(key, existingValues);
};
54 changes: 18 additions & 36 deletions src/utils/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,27 @@ import { useService } from '@/services';
import { plainClone } from '@/utils/object';
import { emptyObjectFunc } from '@/utils/func';
import { translate } from '@/utils/i18n';
import {
loadNamespaceLocalStorage,
saveNamespaceLocalStorage,
} from '@/utils/storage';

// i18n
const t = translate;

// New utility functions to handle global layout settings
const GLOBAL_LAYOUT_KEY = 'globalLayoutSettings';

const getGlobalLayoutSettings = (): Record<string, any> => {
const savedSettings = localStorage.getItem(GLOBAL_LAYOUT_KEY);
return savedSettings ? JSON.parse(savedSettings) : {};
};

const saveGlobalLayoutSettings = (settings: Record<string, any>) => {
localStorage.setItem(GLOBAL_LAYOUT_KEY, JSON.stringify(settings));
};

const getNamespaceLayoutSettings = (ns: string): Record<string, any> => {
const globalSettings = getGlobalLayoutSettings();
return globalSettings[ns] || {};
};

const saveNamespaceLayoutSettings = (ns: string, settings: Record<string, any>) => {
const globalSettings = getGlobalLayoutSettings();
globalSettings[ns] = settings;
console.debug('saveNamespaceLayoutSettings', globalSettings);
saveGlobalLayoutSettings(globalSettings);
};
export const globalLayoutSettingsKey = 'globalLayoutSettings';

export const getDefaultStoreState = <T = any>(
ns: StoreNamespace
): BaseStoreState<T> => {
const namespaceSettings = getNamespaceLayoutSettings(ns);
const namespaceSettings = loadNamespaceLocalStorage(
ns,
globalLayoutSettingsKey
);
const defaultPagination = getDefaultPagination();
const tablePagination = {
...defaultPagination,
...namespaceSettings.pagination
...namespaceSettings.pagination,
};

return {
Expand Down Expand Up @@ -160,19 +145,16 @@ export const getDefaultStoreMutations = <T = any>(): BaseStoreMutations<T> => {
pagination: TablePagination
) => {
state.tablePagination = pagination;
const namespaceSettings = getNamespaceLayoutSettings(state.ns);
namespaceSettings.pagination = {
...namespaceSettings.pagination,
...pagination
};
saveNamespaceLayoutSettings(state.ns, namespaceSettings);
saveNamespaceLocalStorage(state.ns, globalLayoutSettingsKey, {
pagination,
});
},
resetTablePagination: (state: BaseStoreState<T>) => {
const defaultPagination = getDefaultPagination();
state.tablePagination = defaultPagination;
const namespaceSettings = getNamespaceLayoutSettings(state.ns);
delete namespaceSettings.pagination;
saveNamespaceLayoutSettings(state.ns, namespaceSettings);
const pagination = getDefaultPagination();
state.tablePagination = pagination;
saveNamespaceLocalStorage(state.ns, globalLayoutSettingsKey, {
pagination,
});
},
setTableListFilter: (
state: BaseStoreState<T>,
Expand Down
13 changes: 0 additions & 13 deletions src/views/git/detail/GitDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const router = useRouter();
const ns = 'git';
const store = useStore<RootStoreState>();
const { git: state } = store.state;
const {
activeId,
Expand All @@ -39,17 +38,6 @@ const {
// update tab disabled keys
const { form } = useGit(store);
let handle: any;
watch(
form,
debounce(() => {
clearInterval(handle);
handle = setInterval(
() => store.dispatch(`${ns}/getById`, activeId.value),
5000
);
})
);
// get local and remote branches
const getBranches = debounce(() => {
Expand All @@ -76,7 +64,6 @@ const reset = () => {
store.commit(`${ns}/resetGitBranches`);
store.commit(`${ns}/resetGitRemoteBranches`);
store.commit(`${ns}/resetGitChanges`);
clearInterval(handle);
};
onBeforeUnmount(reset);
watch(activeId, reset);
Expand Down
2 changes: 0 additions & 2 deletions src/views/git/detail/actions/GitDetailActionsFiles.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,3 @@ defineOptions({ name: 'ClGitDetailActionsFiles' });
<template>
<cl-file-actions :ns="ns" :active-id="activeId" />
</template>

<style scoped lang="scss"></style>
1 change: 0 additions & 1 deletion src/views/git/list/GitList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ defineOptions({ name: 'ClGitList' });
</cl-list-layout>
</template>

<style scoped lang="scss"></style>
<style scoped>
.git-list:deep(.git-status) {
margin-right: 0;
Expand Down
18 changes: 9 additions & 9 deletions src/views/home/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -178,14 +178,14 @@ const getTaskStatusColorByLabel = (label: string) => {
const tasksByStatusData = ref([]);
const tasksByStatusChartData = computed<ChartData>(() => {
return {
labels: tasksByStatusData.value.map((d: any) =>
labels: tasksByStatusData.value?.map((d: any) =>
t('components.task.status.label.' + d.status)
),
datasets: [
{
label: t('views.home.metrics.tasks'),
data: tasksByStatusData.value.map((d: any) => d.tasks),
backgroundColor: tasksByStatusData.value.map((d: any) =>
data: tasksByStatusData.value?.map((d: any) => d.tasks),
backgroundColor: tasksByStatusData.value?.map((d: any) =>
getTaskStatusColorByLabel(d.status)
),
},
Expand All @@ -204,12 +204,12 @@ const tasksByStatusChartOptions = ref<ChartOptions>({
const tasksByNodeData = ref([]);
const tasksByNodeChartData = computed<ChartData>(() => {
return {
labels: tasksByNodeData.value.map((d: any) => d.node_name),
labels: tasksByNodeData.value?.map((d: any) => d.node_name),
datasets: [
{
label: t('views.home.metrics.tasks'),
data: tasksByNodeData.value.map((d: any) => d.tasks),
backgroundColor: tasksByNodeData.value.map(
data: tasksByNodeData.value?.map((d: any) => d.tasks),
backgroundColor: tasksByNodeData.value?.map(
(_: any, index: number) => colorPalette[index % colorPalette.length]
),
},
Expand All @@ -228,12 +228,12 @@ const tasksByNodeChartOptions = ref<ChartOptions>({
const tasksBySpiderData = ref([]);
const tasksBySpiderChartData = computed<ChartData>(() => {
return {
labels: tasksBySpiderData.value.map((d: any) => d.spider_name),
labels: tasksBySpiderData.value?.map((d: any) => d.spider_name),
datasets: [
{
label: t('views.home.metrics.tasks'),
data: tasksBySpiderData.value.map((d: any) => d.tasks),
backgroundColor: tasksBySpiderData.value.map(
data: tasksBySpiderData.value?.map((d: any) => d.tasks),
backgroundColor: tasksBySpiderData.value?.map(
(_: any, index: number) => colorPalette[index % colorPalette.length]
),
},
Expand Down

0 comments on commit 1e94324

Please sign in to comment.