feat: 优化样式

zh-lx · Feb 24, 2023 · d8abbe0 · d8abbe0
1 parent 3d22d60
commit d8abbe0
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 6,283 deletions.
diff --git a/packages/core-vue/.vscode/extensions.json → .vscode/extensions.json b/packages/core-vue/.vscode/extensions.json → .vscode/extensions.json
diff --git a/packages/core-vue/src/components/file-bar/index.less b/packages/core-vue/src/components/file-bar/index.less
@@ -124,6 +124,7 @@
         border-left: 2px solid @brand;
         padding-left: 2px;
         background-color: @brand-light-bg;
+        color: @brand;
       }
     }
   }

diff --git a/...vue/src/components/menus/theme/index.less → .../core-vue/src/components/menus/index.less b/...vue/src/components/menus/theme/index.less → .../core-vue/src/components/menus/index.less
@@ -60,3 +60,57 @@
     background-position: 0 50%;
   }
 }
+
+/**
+ * mac主题色
+ */
+.code-sandbox-theme-mac {
+  min-width: 180px;
+  max-width: 300px;
+  color: @text-color;
+  font-size: 13px;
+  margin: 0;
+  padding: 5px 4px;
+  border: 0.5px solid @border-color;
+  border-radius: 5px;
+  background-color: @fill-gray-float;
+  box-shadow: @shadow-1-down;
+  li {
+    padding: 2.5px 26px 2.5px 8px;
+    border-radius: 3px;
+    &:hover {
+      color: @text-color-white;
+      background-color: @brand;
+      cursor: pointer;
+    }
+    &.skeleton {
+      padding: 2.5px 8px;
+      &::before {
+        background-image: linear-gradient(
+          -45deg,
+          #4c4c4f 40%,
+          #444 55%,
+          #4c4c4f 63%
+        );
+      }
+    }
+    &.menu-hr {
+      border-bottom: 1px solid @border-color-hover;
+      padding: 0;
+      margin: 5px 8px;
+    }
+    &.menu-disabled {
+      color: @text-color-disable;
+      &:hover {
+        color: @text-color-disable;
+        background-color: @fill-gray-float;
+      }
+    }
+  }
+  .code-sandbox-active-menu-item {
+    color: @brand;
+    &:active {
+      background-color: @brand-active;
+    }
+  }
+}
diff --git a/packages/core-vue/src/components/menus/index.ts b/packages/core-vue/src/components/menus/index.ts
@@ -1,4 +1,4 @@
-import { ConfigType, OptionsType, ItemType, LiType, AttrsType } from './types';
+import { ConfigType, OptionsType, ItemType, LiType, AttrsType } from './type';
 import {
   preventDefault,
   layoutMenuPositionEffect,

diff --git a/packages/core-vue/src/components/menus/theme/theme-mac.less b/packages/core-vue/src/components/menus/theme/theme-mac.less
diff --git a/packages/core-vue/src/components/menus/type.ts b/packages/core-vue/src/components/menus/type.ts
@@ -0,0 +1,75 @@
+export type HrType = {
+  type: 'hr';
+};
+
+export type LiType = {
+  type: 'li';
+  text: string;
+  disabled?: boolean;
+  // eslint-disable-next-line no-undef
+  callback: EventListener;
+  close?: boolean;
+};
+
+export interface AttrsType {
+  class?: string;
+  style?: string | { [key: string]: string };
+}
+
+// eslint-disable-next-line no-use-before-define
+export type ItemType = AttrsType & ElementType;
+
+export type UlType = {
+  type: 'ul';
+  text: string;
+  disabled?: boolean;
+  children: ItemType[];
+};
+export type ElementType = HrType | LiType | UlType;
+
+type GetKeysType<T> = T extends ElementType ? keyof T : never;
+
+type ElementKeysType = GetKeysType<ElementType>;
+
+export type ConfigType = {
+  el: string | HTMLElement;
+  mode?: 'context-menu' | 'nav-menu' | 'click'; // 模式, 默认为context-menu
+  theme?: string; // 主题样式, 默认为auto
+  minWidth?: string | number; // 最小宽度
+  maxWidth?: string | number; // 最大宽度
+  include?: string[] | RegExp; // 包含的元素
+  exclude?: string[] | RegExp; // 排除的元素
+  defaultProps?: {
+    // 默认参数配置项
+    [key in ElementKeysType]?: string;
+  };
+  beforeInit?: Function; // 初始化前
+  afterInit?: Function; // 初始化后
+  beforeShow?: Function; // 显示菜单前
+  afterShow?: Function; // 显示菜单后
+  beforeHide?: Function; // 隐藏菜单前
+  afterHide?: Function; // 隐藏菜单后
+};
+
+export type OptionsType =
+  | ItemType[]
+  | ((e: Event, config: ConfigType) => ItemType[] | Promise<ItemType[]>);
+
+export interface MenuElement extends HTMLElement {
+  direction?: LayoutMenuDirection;
+}
+
+// type RequireKeys = 'el'
+export const ConnectOffset = 5;
+
+export const ATTR_LIST = ['class', 'style'];
+
+export const SPLIT_SYMBOL = {
+  class: ' ',
+  style: ';',
+};
+
+export const enum LayoutMenuDirection {
+  Left = -1,
+  Right = 1,
+}
diff --git a/packages/core-vue/src/components/toolbar/icons/common.less b/packages/core-vue/src/components/toolbar/icons/common.less
@@ -3,10 +3,24 @@
   cursor: pointer;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: @border-radius-small;
   &:hover {
     color: @brand;
+    background-color: @fill;
   }
   &:active {
     color: @brand-active;
+    background-color: @fill;
   }
+  // &:hover {
+  //   color: @text-color;
+  //   background-color: @fill;
+  // }
+  // &:active {
+  //   color: @text-color;
+  //   background-color: @fill-active;
+  // }
 }
diff --git a/packages/core-vue/src/components/toolbar/index.less b/packages/core-vue/src/components/toolbar/index.less
@@ -14,12 +14,7 @@
   .toolbar-right {
     display: flex;
     align-items: center;
-    .toolbar-icon {
-      margin-left: 4px;
-      &:first-of-type {
-        margin-left: 0;
-      }
-    }
+    gap: @gap-1;
   }
 }
 .code-sandbox-toolbar-top {

diff --git a/packages/core-vue/src/main.ts b/packages/core-vue/src/main.ts
@@ -1,8 +1,7 @@
 import { defineCustomElement } from 'vue';
 import CodeSandboxVue from './components/index.ce.vue';
 import globalStyle from '@/style/global.less?inline';
-import MenuThemeStyle from '@/components/menus/theme/index.less?inline';
-import MenuThemeMacStyle from '@/components/menus/theme/theme-mac.less?inline';
+import MenuStyle from '@/components/menus/index.less?inline';
 import { CodeSandboxOptions, HTMLCodeSandboxElement } from './type';
 
 const CodeSandboxClass = defineCustomElement(CodeSandboxVue);
@@ -13,8 +12,7 @@ customElements.define('code-sandbox', CodeSandboxClass);
 (function () {
   const style = document.createElement('style');
   style.setAttribute('type', 'text/css');
-  style.innerText =
-    globalStyle + '\n' + MenuThemeStyle + '\n' + MenuThemeMacStyle;
+  style.innerText = globalStyle + '\n' + MenuStyle;
   document.body.append(style);
 })();
 

diff --git a/packages/core-vue/src/style/base.less b/packages/core-vue/src/style/base.less
@@ -86,27 +86,16 @@
 @cyan-9: #076d59;
 @cyan-10: #004d40;
 
-@blue-1: #e8f2ff;
-@blue-2: #c3dcfe;
-@blue-3: #9fc3fd;
-@blue-4: #7aa8fd;
-@blue-5: #568afc;
-@blue-6: #326bfb;
-@blue-7: #1f4bcf;
-@blue-8: #1030a4;
-@blue-9: #061b78;
-@blue-10: #000b4d;
-
-@brand-1: #e8f7ff;
-@brand-2: #bae6ff;
-@brand-3: #8bd1ff;
-@brand-4: #5db9ff;
-@brand-5: #2e9eff;
-@brand-6: #007fff;
-@brand-7: #0062d2;
-@brand-8: #0048a6;
-@brand-9: #003079;
-@brand-10: #001c4d;
+@brand-1: #e8f5ff;
+@brand-2: #bae0ff;
+@brand-3: #8bc7ff;
+@brand-4: #5dabff;
+@brand-5: #2e8cff;
+@brand-6: #006aff;
+@brand-7: #0051d2;
+@brand-8: #003aa6;
+@brand-9: #002679;
+@brand-10: #00164d;
 
 @purple-1: #f5e8ff;
 @purple-2: #dec0f6;
@@ -242,27 +231,16 @@
 @dark-cyan-9: #c9f5e2;
 @dark-cyan-10: #f0fff8;
 
-@dark-blue-1: #000b4d;
-@dark-blue-2: #081d78;
-@dark-blue-3: #1735a4;
-@dark-blue-4: #2b54cf;
-@dark-blue-5: #4679fb;
-@dark-blue-6: #588bfc;
-@dark-blue-7: #7eabfd;
-@dark-blue-8: #a4c6fd;
-@dark-blue-9: #cbe1fe;
-@dark-blue-10: #f2f8ff;
-
-@dark-brand-1: #001c4d;
-@dark-brand-2: #043279;
-@dark-brand-3: #0a4ea6;
-@dark-brand-4: #136cd2;
-@dark-brand-5: #1f8eff;
-@dark-brand-6: #269aff;
-@dark-brand-7: #57b6ff;
-@dark-brand-8: #87cfff;
-@dark-brand-9: #b8e5ff;
-@dark-brand-10: #e8f7ff;
+@dark-brand-1: #00164d;
+@dark-brand-2: #042879;
+@dark-brand-3: #0a40a6;
+@dark-brand-4: #135dd2;
+@dark-brand-5: #1f7cff;
+@dark-brand-6: #2688ff;
+@dark-brand-7: #57a8ff;
+@dark-brand-8: #87c5ff;
+@dark-brand-9: #b8dfff;
+@dark-brand-10: #e8f5ff;
 
 @dark-purple-1: #16004d;
 @dark-purple-2: #26056e;