Skip to content

Commit d8abbe0

Browse files
committed
feat: 优化样式
1 parent 3d22d60 commit d8abbe0

File tree

11 files changed

+168
-6283
lines changed

11 files changed

+168
-6283
lines changed
File renamed without changes.

packages/core-vue/src/components/file-bar/index.less

+1
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@
124124
border-left: 2px solid @brand;
125125
padding-left: 2px;
126126
background-color: @brand-light-bg;
127+
color: @brand;
127128
}
128129
}
129130
}

packages/core-vue/src/components/menus/theme/index.less renamed to packages/core-vue/src/components/menus/index.less

+54
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,57 @@
6060
background-position: 0 50%;
6161
}
6262
}
63+
64+
/**
65+
* mac主题色
66+
*/
67+
.code-sandbox-theme-mac {
68+
min-width: 180px;
69+
max-width: 300px;
70+
color: @text-color;
71+
font-size: 13px;
72+
margin: 0;
73+
padding: 5px 4px;
74+
border: 0.5px solid @border-color;
75+
border-radius: 5px;
76+
background-color: @fill-gray-float;
77+
box-shadow: @shadow-1-down;
78+
li {
79+
padding: 2.5px 26px 2.5px 8px;
80+
border-radius: 3px;
81+
&:hover {
82+
color: @text-color-white;
83+
background-color: @brand;
84+
cursor: pointer;
85+
}
86+
&.skeleton {
87+
padding: 2.5px 8px;
88+
&::before {
89+
background-image: linear-gradient(
90+
-45deg,
91+
#4c4c4f 40%,
92+
#444 55%,
93+
#4c4c4f 63%
94+
);
95+
}
96+
}
97+
&.menu-hr {
98+
border-bottom: 1px solid @border-color-hover;
99+
padding: 0;
100+
margin: 5px 8px;
101+
}
102+
&.menu-disabled {
103+
color: @text-color-disable;
104+
&:hover {
105+
color: @text-color-disable;
106+
background-color: @fill-gray-float;
107+
}
108+
}
109+
}
110+
.code-sandbox-active-menu-item {
111+
color: @brand;
112+
&:active {
113+
background-color: @brand-active;
114+
}
115+
}
116+
}

packages/core-vue/src/components/menus/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ConfigType, OptionsType, ItemType, LiType, AttrsType } from './types';
1+
import { ConfigType, OptionsType, ItemType, LiType, AttrsType } from './type';
22
import {
33
preventDefault,
44
layoutMenuPositionEffect,

packages/core-vue/src/components/menus/theme/theme-mac.less

-53
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
export type HrType = {
2+
type: 'hr';
3+
};
4+
5+
export type LiType = {
6+
type: 'li';
7+
text: string;
8+
disabled?: boolean;
9+
// eslint-disable-next-line no-undef
10+
callback: EventListener;
11+
close?: boolean;
12+
};
13+
14+
export interface AttrsType {
15+
class?: string;
16+
style?: string | { [key: string]: string };
17+
}
18+
19+
// eslint-disable-next-line no-use-before-define
20+
export type ItemType = AttrsType & ElementType;
21+
22+
export type UlType = {
23+
type: 'ul';
24+
text: string;
25+
disabled?: boolean;
26+
children: ItemType[];
27+
};
28+
export type ElementType = HrType | LiType | UlType;
29+
30+
type GetKeysType<T> = T extends ElementType ? keyof T : never;
31+
32+
type ElementKeysType = GetKeysType<ElementType>;
33+
34+
export type ConfigType = {
35+
el: string | HTMLElement;
36+
mode?: 'context-menu' | 'nav-menu' | 'click'; // 模式, 默认为context-menu
37+
theme?: string; // 主题样式, 默认为auto
38+
minWidth?: string | number; // 最小宽度
39+
maxWidth?: string | number; // 最大宽度
40+
include?: string[] | RegExp; // 包含的元素
41+
exclude?: string[] | RegExp; // 排除的元素
42+
defaultProps?: {
43+
// 默认参数配置项
44+
[key in ElementKeysType]?: string;
45+
};
46+
beforeInit?: Function; // 初始化前
47+
afterInit?: Function; // 初始化后
48+
beforeShow?: Function; // 显示菜单前
49+
afterShow?: Function; // 显示菜单后
50+
beforeHide?: Function; // 隐藏菜单前
51+
afterHide?: Function; // 隐藏菜单后
52+
};
53+
54+
export type OptionsType =
55+
| ItemType[]
56+
| ((e: Event, config: ConfigType) => ItemType[] | Promise<ItemType[]>);
57+
58+
export interface MenuElement extends HTMLElement {
59+
direction?: LayoutMenuDirection;
60+
}
61+
62+
// type RequireKeys = 'el'
63+
export const ConnectOffset = 5;
64+
65+
export const ATTR_LIST = ['class', 'style'];
66+
67+
export const SPLIT_SYMBOL = {
68+
class: ' ',
69+
style: ';',
70+
};
71+
72+
export const enum LayoutMenuDirection {
73+
Left = -1,
74+
Right = 1,
75+
}

packages/core-vue/src/components/toolbar/icons/common.less

+14
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,24 @@
33
cursor: pointer;
44
display: flex;
55
align-items: center;
6+
justify-content: center;
7+
width: 18px;
8+
height: 18px;
9+
border-radius: @border-radius-small;
610
&:hover {
711
color: @brand;
12+
background-color: @fill;
813
}
914
&:active {
1015
color: @brand-active;
16+
background-color: @fill;
1117
}
18+
// &:hover {
19+
// color: @text-color;
20+
// background-color: @fill;
21+
// }
22+
// &:active {
23+
// color: @text-color;
24+
// background-color: @fill-active;
25+
// }
1226
}

packages/core-vue/src/components/toolbar/index.less

+1-6
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,7 @@
1414
.toolbar-right {
1515
display: flex;
1616
align-items: center;
17-
.toolbar-icon {
18-
margin-left: 4px;
19-
&:first-of-type {
20-
margin-left: 0;
21-
}
22-
}
17+
gap: @gap-1;
2318
}
2419
}
2520
.code-sandbox-toolbar-top {

packages/core-vue/src/main.ts

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { defineCustomElement } from 'vue';
22
import CodeSandboxVue from './components/index.ce.vue';
33
import globalStyle from '@/style/global.less?inline';
4-
import MenuThemeStyle from '@/components/menus/theme/index.less?inline';
5-
import MenuThemeMacStyle from '@/components/menus/theme/theme-mac.less?inline';
4+
import MenuStyle from '@/components/menus/index.less?inline';
65
import { CodeSandboxOptions, HTMLCodeSandboxElement } from './type';
76

87
const CodeSandboxClass = defineCustomElement(CodeSandboxVue);
@@ -13,8 +12,7 @@ customElements.define('code-sandbox', CodeSandboxClass);
1312
(function () {
1413
const style = document.createElement('style');
1514
style.setAttribute('type', 'text/css');
16-
style.innerText =
17-
globalStyle + '\n' + MenuThemeStyle + '\n' + MenuThemeMacStyle;
15+
style.innerText = globalStyle + '\n' + MenuStyle;
1816
document.body.append(style);
1917
})();
2018

packages/core-vue/src/style/base.less

+20-42
Original file line numberDiff line numberDiff line change
@@ -86,27 +86,16 @@
8686
@cyan-9: #076d59;
8787
@cyan-10: #004d40;
8888

89-
@blue-1: #e8f2ff;
90-
@blue-2: #c3dcfe;
91-
@blue-3: #9fc3fd;
92-
@blue-4: #7aa8fd;
93-
@blue-5: #568afc;
94-
@blue-6: #326bfb;
95-
@blue-7: #1f4bcf;
96-
@blue-8: #1030a4;
97-
@blue-9: #061b78;
98-
@blue-10: #000b4d;
99-
100-
@brand-1: #e8f7ff;
101-
@brand-2: #bae6ff;
102-
@brand-3: #8bd1ff;
103-
@brand-4: #5db9ff;
104-
@brand-5: #2e9eff;
105-
@brand-6: #007fff;
106-
@brand-7: #0062d2;
107-
@brand-8: #0048a6;
108-
@brand-9: #003079;
109-
@brand-10: #001c4d;
89+
@brand-1: #e8f5ff;
90+
@brand-2: #bae0ff;
91+
@brand-3: #8bc7ff;
92+
@brand-4: #5dabff;
93+
@brand-5: #2e8cff;
94+
@brand-6: #006aff;
95+
@brand-7: #0051d2;
96+
@brand-8: #003aa6;
97+
@brand-9: #002679;
98+
@brand-10: #00164d;
11099

111100
@purple-1: #f5e8ff;
112101
@purple-2: #dec0f6;
@@ -242,27 +231,16 @@
242231
@dark-cyan-9: #c9f5e2;
243232
@dark-cyan-10: #f0fff8;
244233

245-
@dark-blue-1: #000b4d;
246-
@dark-blue-2: #081d78;
247-
@dark-blue-3: #1735a4;
248-
@dark-blue-4: #2b54cf;
249-
@dark-blue-5: #4679fb;
250-
@dark-blue-6: #588bfc;
251-
@dark-blue-7: #7eabfd;
252-
@dark-blue-8: #a4c6fd;
253-
@dark-blue-9: #cbe1fe;
254-
@dark-blue-10: #f2f8ff;
255-
256-
@dark-brand-1: #001c4d;
257-
@dark-brand-2: #043279;
258-
@dark-brand-3: #0a4ea6;
259-
@dark-brand-4: #136cd2;
260-
@dark-brand-5: #1f8eff;
261-
@dark-brand-6: #269aff;
262-
@dark-brand-7: #57b6ff;
263-
@dark-brand-8: #87cfff;
264-
@dark-brand-9: #b8e5ff;
265-
@dark-brand-10: #e8f7ff;
234+
@dark-brand-1: #00164d;
235+
@dark-brand-2: #042879;
236+
@dark-brand-3: #0a40a6;
237+
@dark-brand-4: #135dd2;
238+
@dark-brand-5: #1f7cff;
239+
@dark-brand-6: #2688ff;
240+
@dark-brand-7: #57a8ff;
241+
@dark-brand-8: #87c5ff;
242+
@dark-brand-9: #b8dfff;
243+
@dark-brand-10: #e8f5ff;
266244

267245
@dark-purple-1: #16004d;
268246
@dark-purple-2: #26056e;

0 commit comments

Comments
 (0)