examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: 添加 eslint-plugin-unicorn 依赖，更新 ESLint 配置以支持新规则
All checks were successful
/ depcheck (push) Successful in 2m3s
Details
/ build-and-deploy-to-vercel (push) Successful in 2m52s
Details
/ lint-build-and-check (push) Successful in 2m57s
Details
/ surge (push) Successful in 2m32s
Details
/ playwright (push) Successful in 3m10s
Details

Browse Source
This commit is contained in:
严浩
2025-03-14 12:50:54 +08:00
parent 8b12d3e3dd
commit 31909c906d
24 changed files with 520 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/layouts/sakai-vue/AppConfigurator.vue
View File

@ -430,91 +430,89 @@ function applyTheme(type: string, color: any) {
function getPresetExt() {
const color = primaryColors.value.find((c) => c.name === layoutConfig.primary)!;
if (color.name === 'noir') {
return {
semantic: {
colorScheme: {
dark: {
highlight: {
background: '{primary.50}',
color: '{primary.950}',
focusBackground: '{primary.300}',
focusColor: '{primary.950}',
return color.name === 'noir'
? {
semantic: {
colorScheme: {
dark: {
highlight: {
background: '{primary.50}',
color: '{primary.950}',
focusBackground: '{primary.300}',
focusColor: '{primary.950}',
},
primary: {
activeColor: '{primary.300}',
color: '{primary.50}',
contrastColor: '{primary.950}',
hoverColor: '{primary.200}',
},
},
primary: {
activeColor: '{primary.300}',
color: '{primary.50}',
contrastColor: '{primary.950}',
hoverColor: '{primary.200}',
light: {
highlight: {
background: '{primary.950}',
color: '#ffffff',
focusBackground: '{primary.700}',
focusColor: '#ffffff',
},
primary: {
activeColor: '{primary.700}',
color: '{primary.950}',
contrastColor: '#ffffff',
hoverColor: '{primary.800}',
},
},
},
light: {
highlight: {
background: '{primary.950}',
color: '#ffffff',
focusBackground: '{primary.700}',
focusColor: '#ffffff',
},
primary: {
activeColor: '{primary.700}',
color: '{primary.950}',
contrastColor: '#ffffff',
hoverColor: '{primary.800}',
},
primary: {
50: '{surface.50}',
100: '{surface.100}',
200: '{surface.200}',
300: '{surface.300}',
400: '{surface.400}',
500: '{surface.500}',
600: '{surface.600}',
700: '{surface.700}',
800: '{surface.800}',
900: '{surface.900}',
950: '{surface.950}',
},
},
primary: {
50: '{surface.50}',
100: '{surface.100}',
200: '{surface.200}',
300: '{surface.300}',
400: '{surface.400}',
500: '{surface.500}',
600: '{surface.600}',
700: '{surface.700}',
800: '{surface.800}',
900: '{surface.900}',
950: '{surface.950}',
},
},
};
} else {
return {
semantic: {
colorScheme: {
dark: {
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
color: 'rgba(255,255,255,.87)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
focusColor: 'rgba(255,255,255,.87)',
}
: {
semantic: {
colorScheme: {
dark: {
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
color: 'rgba(255,255,255,.87)',
focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
focusColor: 'rgba(255,255,255,.87)',
},
primary: {
activeColor: '{primary.200}',
color: '{primary.400}',
contrastColor: '{surface.900}',
hoverColor: '{primary.300}',
},
},
primary: {
activeColor: '{primary.200}',
color: '{primary.400}',
contrastColor: '{surface.900}',
hoverColor: '{primary.300}',
},
},
light: {
highlight: {
background: '{primary.50}',
color: '{primary.700}',
focusBackground: '{primary.100}',
focusColor: '{primary.800}',
},
primary: {
activeColor: '{primary.700}',
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.600}',
light: {
highlight: {
background: '{primary.50}',
color: '{primary.700}',
focusBackground: '{primary.100}',
focusColor: '{primary.800}',
},
primary: {
activeColor: '{primary.700}',
color: '{primary.500}',
contrastColor: '#ffffff',
hoverColor: '{primary.600}',
},
},
},
primary: color.palette,
},
primary: color.palette,
},
};
}
};
}
function onMenuModeChange() {

4
src/layouts/sakai-vue/AppLayout.vue
View File

@ -12,8 +12,8 @@ const { isSidebarActive, layoutConfig, layoutState } = useLayout();
const outsideClickListener = ref(null as null | Parameters<typeof document.addEventListener>[1]);
watch(isSidebarActive, (newVal) => {
if (newVal) {
watch(isSidebarActive, (newValue) => {
if (newValue) {
bindOutsideClickListener();
} else {
unbindOutsideClickListener();

39
src/layouts/sakai-vue/AppMenu.vue
View File

@ -33,31 +33,28 @@ const menuItems = computed(() => {
parentId,
};
});
const groupItems = flatArray.reduce(
(acc, flatArrItem) => {
if (
!acc.some((item) => item.id === flatArrItem.parentId) && //
flatArrItem.parentId !== '_ROOT_'
) {
let groupItemParentId = flatArrItem.parentId.replace(/\/[^/]+$/, '');
if (groupItemParentId === flatArrItem.parentId) groupItemParentId = '_ROOT_';
acc.push({
id: flatArrItem.parentId,
label: `Group ${flatArrItem.parentId}`,
parentId: groupItemParentId,
});
}
return acc;
},
[] as Record<string, string>[],
);
console.debug(`groupItems :>> `, groupItems);
const tree = arrayToTree(flatArray.concat(groupItems), { id: 'id', parentId: 'parentId', rootId: '_ROOT_' });
const groupItems: Record<string, string>[] = [];
for (const flatArrayItem of flatArray) {
if (
!groupItems.some((item) => item.id === flatArrayItem.parentId) && //
flatArrayItem.parentId !== '_ROOT_'
) {
let groupItemParentId = flatArrayItem.parentId.replace(/\/[^/]+$/, '');
if (groupItemParentId === flatArrayItem.parentId) groupItemParentId = '_ROOT_';
groupItems.push({
id: flatArrayItem.parentId,
label: `Group ${flatArrayItem.parentId}`,
parentId: groupItemParentId,
});
}
}
console.debug(`groupItems :>>`, groupItems);
const tree = arrayToTree([...flatArray, ...groupItems], { id: 'id', parentId: 'parentId', rootId: '_ROOT_' });
// 递归把 children 改为 items
function _convertChildrenToItems(tree: MenuItemWithRoute[]) {
return tree.map((item) => {
if (item.children.length) {
if (item.children.length > 0) {
item.items = _convertChildrenToItems(item.children);
} else {
item.command = (/* event */) => {