@tmagic/editor 1.5.7 → 1.5.8

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
 import type { Id, MNode, MPage, MPageFragment } from '@tmagic/core';
 import { getNodePath, isPage, isPageFragment, traverseNode } from '@tmagic/utils';
@@ -33,9 +33,9 @@ const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatu
   return map;
 };
 
-export const useNodeStatus = (services: Services | undefined) => {
-  const page = computed(() => services?.editorService.get('page'));
-  const nodes = computed(() => services?.editorService.get('nodes') || []);
+export const useNodeStatus = ({ editorService }: Services) => {
+  const page = computed(() => editorService.get('page'));
+  const nodes = computed(() => editorService.get('nodes'));
 
   /** 所有页面的节点状态 */
   const nodeStatusMaps = ref(new Map<Id, Map<Id, LayerNodeStatus>>());
@@ -83,7 +83,7 @@ export const useNodeStatus = (services: Services | undefined) => {
     },
   );
 
-  services?.editorService.on('add', (newNodes: MNode[]) => {
+  const addHandler = (newNodes: MNode[]) => {
     newNodes.forEach((node) => {
       if (isPage(node) || isPageFragment(node)) return;
 
@@ -96,14 +96,23 @@ export const useNodeStatus = (services: Services | undefined) => {
         });
       });
     });
-  });
+  };
+
+  editorService.on('add', addHandler);
 
-  services?.editorService.on('remove', (nodes: MNode[]) => {
+  const removeHandler = (nodes: MNode[]) => {
     nodes.forEach((node) => {
       traverseNode(node, (node: MNode) => {
         nodeStatusMap.value?.delete(node.id);
       });
     });
+  };
+
+  editorService.on('remove', removeHandler);
+
+  onBeforeUnmount(() => {
+    editorService.off('remove', removeHandler);
+    editorService.off('add', addHandler);
   });
 
   return {

package/src/layouts/workspace/Breadcrumb.vue

@@ -8,28 +8,27 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import { getNodePath } from '@tmagic/utils';
 
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 
 defineOptions({
   name: 'MEditorBreadcrumb',
 });
 
-const services = inject<Services>('services');
-const editorService = services?.editorService;
+const { editorService } = useServices();
 
-const node = computed(() => editorService?.get('node'));
-const nodes = computed(() => editorService?.get('nodes') || []);
-const root = computed(() => editorService?.get('root'));
+const node = computed(() => editorService.get('node'));
+const nodes = computed(() => editorService.get('nodes'));
+const root = computed(() => editorService.get('root'));
 const path = computed(() => getNodePath(node.value?.id || '', root.value?.items || []));
 
 const select = async (node: MNode) => {
-  await editorService?.select(node);
-  editorService?.get('stage')?.select(node.id);
+  await editorService.select(node);
+  editorService.get('stage')?.select(node.id);
 };
 </script>

package/src/layouts/workspace/Workspace.vue

@@ -19,14 +19,8 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import type {
-  CustomContentMenuFunction,
-  MenuButton,
-  MenuComponent,
-  Services,
-  StageOptions,
-  WorkspaceSlots,
-} from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { CustomContentMenuFunction, MenuButton, MenuComponent, StageOptions, WorkspaceSlots } from '@editor/type';
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
@@ -50,7 +44,7 @@ withDefaults(
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const services = inject<Services>('services');
+const { editorService } = useServices();
 
-const page = computed(() => services?.editorService.get('page'));
+const page = computed(() => editorService.get('page'));
 </script>

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicTooltip } from '@tmagic/design';
@@ -31,20 +31,21 @@ import { getIdFromEl } from '@tmagic/utils';
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
+import { useServices } from '@editor/hooks/use-services';
 import { useNodeStatus } from '@editor/layouts/sidebar/layer/use-node-status';
-import type { Services, TreeNodeData } from '@editor/type';
+import type { TreeNodeData } from '@editor/type';
 
-const services = inject<Services>('services');
-const editorService = services?.editorService;
+const services = useServices();
+const { editorService } = services;
 
 const visible = ref(false);
 const buttonVisible = ref(false);
 const buttonEl = useTemplateRef<HTMLDivElement>('button');
 const boxRef = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
 
-const stage = computed(() => editorService?.get('stage'));
-const page = computed(() => editorService?.get('page'));
-const nodes = computed(() => editorService?.get('nodes') || []);
+const stage = computed(() => editorService.get('stage'));
+const page = computed(() => editorService.get('page'));
+const nodes = computed(() => editorService.get('nodes'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));
 
 const { nodeStatusMap } = useNodeStatus(services);
@@ -89,7 +90,7 @@ watch(
 );
 
 const clickHandler = async (event: MouseEvent, data: TreeNodeData) => {
-  await editorService?.select(data.id);
+  await editorService.select(data.id);
   stage.value?.select(data.id);
 };
 

package/src/layouts/workspace/viewer/Stage.vue

@@ -45,7 +45,6 @@
 <script lang="ts" setup>
 import {
   computed,
-  inject,
   markRaw,
   nextTick,
   onBeforeUnmount,
@@ -62,8 +61,9 @@ import StageCore, { getOffset, Runtime } from '@tmagic/stage';
 import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import { useServices } from '@editor/hooks';
 import { useStage } from '@editor/hooks/use-stage';
-import type { CustomContentMenuFunction, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import type { CustomContentMenuFunction, MenuButton, MenuComponent, StageOptions } from '@editor/type';
 import { DragType, Layout } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
@@ -91,22 +91,22 @@ const props = withDefaults(
 let stage: StageCore | null = null;
 let runtime: Runtime | null = null;
 
-const services = inject<Services>('services');
+const { editorService, uiService, keybindingService } = useServices();
 
-const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
+const stageLoading = computed(() => editorService.get('stageLoading'));
 
 const stageWrapRef = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
 const stageContainerEl = useTemplateRef<HTMLDivElement>('stageContainer');
 const menuRef = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
 
-const nodes = computed(() => services?.editorService.get('nodes') || []);
+const nodes = computed(() => editorService.get('nodes'));
 const isMultiSelect = computed(() => nodes.value.length > 1);
-const stageRect = computed(() => services?.uiService.get('stageRect'));
-const stageContainerRect = computed(() => services?.uiService.get('stageContainerRect'));
-const root = computed(() => services?.editorService.get('root'));
-const page = computed(() => services?.editorService.get('page'));
-const zoom = computed(() => services?.uiService.get('zoom') || 1);
-const node = computed(() => services?.editorService.get('node'));
+const stageRect = computed(() => uiService.get('stageRect'));
+const stageContainerRect = computed(() => uiService.get('stageContainerRect'));
+const root = computed(() => editorService.get('root'));
+const page = computed(() => editorService.get('page'));
+const zoom = computed(() => uiService.get('zoom'));
+const node = computed(() => editorService.get('node'));
 
 watchEffect(() => {
   if (stage || !page.value) return;
@@ -120,7 +120,7 @@ watchEffect(() => {
     stageWrapRef.value?.container?.focus();
   });
 
-  services?.editorService.set('stage', markRaw(stage));
+  editorService.set('stage', markRaw(stage));
 
   stage.mount(stageContainerEl.value);
 
@@ -141,7 +141,7 @@ watchEffect(() => {
 
 onBeforeUnmount(() => {
   stage?.destroy();
-  services?.editorService.set('stage', null);
+  editorService.set('stage', null);
 });
 
 watch(zoom, (zoom) => {
@@ -152,14 +152,14 @@ watch(zoom, (zoom) => {
 let timeoutId: NodeJS.Timeout | null = null;
 watch(page, (page) => {
   if (runtime && page) {
-    services?.editorService.set('stageLoading', true);
+    editorService.set('stageLoading', true);
 
     if (timeoutId) {
       globalThis.clearTimeout(timeoutId);
     }
 
     timeoutId = globalThis.setTimeout(() => {
-      services?.editorService.set('stageLoading', false);
+      editorService.set('stageLoading', false);
       timeoutId = null;
     }, 3000);
 
@@ -176,11 +176,11 @@ const rootChangeHandler = (root: MApp) => {
   }
 };
 
-services?.editorService.on('root-change', rootChangeHandler);
+editorService.on('root-change', rootChangeHandler);
 
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
-    services?.uiService.set('stageContainerRect', {
+    uiService.set('stageContainerRect', {
       width: contentRect.width,
       height: contentRect.height,
     });
@@ -190,16 +190,16 @@ const resizeObserver = new ResizeObserver((entries) => {
 onMounted(() => {
   if (stageWrapRef.value?.container) {
     resizeObserver.observe(stageWrapRef.value.container);
-    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
+    keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
   }
 });
 
 onBeforeUnmount(() => {
   stage?.destroy();
   resizeObserver.disconnect();
-  services?.editorService.set('stage', null);
-  services?.keybindingService.unregisterEl('stage');
-  services?.editorService.off('root-change', rootChangeHandler);
+  editorService.set('stage', null);
+  keybindingService.unregisterEl('stage');
+  editorService.off('root-change', rootChangeHandler);
 });
 
 const parseDSL = getEditorConfig('parseDSL');
@@ -236,11 +236,11 @@ const dropHandler = async (e: DragEvent) => {
   let parent: MContainer | undefined | null = page.value;
   const parentId = getIdFromEl()(parentEl);
   if (parentId) {
-    parent = services?.editorService.getNodeById(parentId, false) as MContainer;
+    parent = editorService.getNodeById(parentId, false) as MContainer;
   }
 
   if (parent && stageContainerEl.value && stage) {
-    const layout = await services?.editorService.getLayout(parent);
+    const layout = await editorService.getLayout(parent);
 
     const containerRect = stageContainerEl.value.getBoundingClientRect();
     const { scrollTop, scrollLeft } = stage.mask!;
@@ -275,7 +275,7 @@ const dropHandler = async (e: DragEvent) => {
 
     config.data.inputEvent = e;
 
-    services?.editorService.add(config.data, parent);
+    editorService.add(config.data, parent);
   }
 };
 </script>

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -13,18 +13,19 @@ import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
-import type { Services, StageOptions } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { StageOptions } from '@editor/type';
 
-const services = inject<Services>('services');
+const { stageOverlayService, editorService } = useServices();
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
 const stageOverlayEl = useTemplateRef<HTMLDivElement>('stageOverlay');
 
-const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
-const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);
-const wrapHeight = computed(() => services?.stageOverlayService.get('wrapHeight') || 0);
-const stage = computed(() => services?.editorService.get('stage'));
+const stageOverlayVisible = computed(() => stageOverlayService.get('stageOverlayVisible'));
+const wrapWidth = computed(() => stageOverlayService.get('wrapWidth'));
+const wrapHeight = computed(() => stageOverlayService.get('wrapHeight'));
+const stage = computed(() => editorService.get('stage'));
 
 const style = computed(() => ({
   width: `${wrapWidth.value}px`,
@@ -35,18 +36,16 @@ watch(stage, (stage) => {
   if (stage) {
     stage.on('dblclick', async (event: MouseEvent) => {
       const el = (await stage.actionManager?.getElementFromPoint(event)) || null;
-      services?.stageOverlayService.openOverlay(el);
+      stageOverlayService.openOverlay(el);
     });
   } else {
-    services?.stageOverlayService.closeOverlay();
+    stageOverlayService.closeOverlay();
   }
 });
 
 watch(stageOverlayEl, (stageOverlay) => {
-  if (!services) return;
-
-  const subStage = services.stageOverlayService.createStage(stageOptions);
-  services?.stageOverlayService.set('stage', subStage);
+  const subStage = stageOverlayService.createStage(stageOptions);
+  stageOverlayService.set('stage', subStage);
 
   if (stageOverlay && subStage) {
     subStage.mount(stageOverlay);
@@ -56,18 +55,18 @@ watch(stageOverlayEl, (stageOverlay) => {
     const { contentWindow } = renderer!;
     mask?.showRule(false);
 
-    services?.stageOverlayService.updateOverlay();
+    stageOverlayService.updateOverlay();
 
     contentWindow?.magic.onRuntimeReady({});
   }
 });
 
 onBeforeUnmount(() => {
-  services?.stageOverlayService.get('stage')?.destroy();
-  services?.stageOverlayService.set('stage', null);
+  stageOverlayService.get('stage')?.destroy();
+  stageOverlayService.set('stage', null);
 });
 
 const closeOverlayHandler = () => {
-  services?.stageOverlayService.closeOverlay();
+  stageOverlayService.closeOverlay();
 };
 </script>

package/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -3,15 +3,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, ref, useTemplateRef, watch } from 'vue';
+import { computed, markRaw, ref, useTemplateRef, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
+import { useServices } from '@editor/hooks/use-services';
 import CenterIcon from '@editor/icons/CenterIcon.vue';
-import { CustomContentMenuFunction, LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { CustomContentMenuFunction, LayerOffset, Layout, MenuButton, MenuComponent } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
 defineOptions({
@@ -29,14 +30,14 @@ const props = withDefaults(
   },
 );
 
-const services = inject<Services>('services');
-const editorService = services?.editorService;
+const services = useServices();
+const { editorService } = services;
 const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const canCenter = ref(false);
 
-const node = computed(() => editorService?.get('node'));
-const nodes = computed(() => editorService?.get('nodes'));
-const parent = computed(() => editorService?.get('parent'));
+const node = computed(() => editorService.get('node'));
+const nodes = computed(() => editorService.get('nodes'));
+const parent = computed(() => editorService.get('parent'));
 
 const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
   props.customContentMenu(
@@ -48,7 +49,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         display: () => canCenter.value,
         handler: () => {
           if (!nodes.value) return;
-          editorService?.alignCenter(nodes.value);
+          editorService.alignCenter(nodes.value);
         },
       },
       useCopyMenu(),
@@ -67,7 +68,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Top),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService?.moveLayer(1);
+          editorService.moveLayer(1);
         },
       },
       {
@@ -76,7 +77,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService?.moveLayer(-1);
+          editorService.moveLayer(-1);
         },
       },
       {
@@ -85,7 +86,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Top),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService?.moveLayer(LayerOffset.TOP);
+          editorService.moveLayer(LayerOffset.TOP);
         },
       },
       {
@@ -94,7 +95,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService?.moveLayer(LayerOffset.BOTTOM);
+          editorService.moveLayer(LayerOffset.BOTTOM);
         },
       },
       useMoveToMenu(services),
@@ -112,7 +113,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         type: 'button',
         text: '清空参考线',
         handler: () => {
-          editorService?.get('stage')?.clearGuides();
+          editorService.get('stage')?.clearGuides();
         },
       },
       ...props.stageContentMenu,
@@ -124,7 +125,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
 watch(
   parent,
   async () => {
-    if (!parent.value || !editorService) return (canCenter.value = false);
+    if (!parent.value) return (canCenter.value = false);
     const layout = await editorService.getLayout(parent.value);
     const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
     const isTypeConform = nodes.value?.every(

package/src/services/dep.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 import { reactive, shallowReactive } from 'vue';
+import { throttle } from 'lodash-es';
 
 import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
 import { DepTargetType, Watcher } from '@tmagic/core';
@@ -34,19 +35,32 @@ export interface DepEvents {
 
 interface State {
   collecting: boolean;
+  taskLength: number;
 }
 
 type StateKey = keyof State;
 
-const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
-
 class Dep extends BaseService {
   private state = shallowReactive<State>({
     collecting: false,
+    taskLength: 0,
   });
 
+  private idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
+
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
+  constructor() {
+    super();
+
+    this.idleTask.on(
+      'update-task-length',
+      throttle(({ length }) => {
+        this.set('taskLength', length);
+      }, 1000),
+    );
+  }
+
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
     this.state[name] = value;
   }
@@ -116,11 +130,11 @@ class Dep extends BaseService {
         resolve();
         return;
       }
-      idleTask.once('finish', () => {
+      this.idleTask.once('finish', () => {
         this.emit('collected', nodes, deep);
         this.set('collecting', false);
       });
-      idleTask.once('hight-level-finish', () => {
+      this.idleTask.once('hight-level-finish', () => {
         this.emit('ds-collected', nodes, deep);
         resolve();
       });
@@ -159,7 +173,7 @@ class Dep extends BaseService {
   }
 
   public clearIdleTasks() {
-    idleTask.clearTasks();
+    this.idleTask.clearTasks();
   }
 
   public on<Name extends keyof DepEvents, Param extends DepEvents[Name]>(
@@ -177,8 +191,8 @@ class Dep extends BaseService {
   }
 
   public reset() {
-    idleTask.removeAllListeners();
-    idleTask.clearTasks();
+    this.idleTask.removeAllListeners();
+    this.idleTask.clearTasks();
 
     for (const type of Object.keys(this.watcher.getTargetsList())) {
       this.removeTargets(type);
@@ -191,6 +205,7 @@ class Dep extends BaseService {
     this.removeAllListeners();
     this.reset();
     this.removeAllPlugins();
+    this.idleTask.removeAllListeners();
   }
 
   public emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param) {
@@ -198,7 +213,7 @@ class Dep extends BaseService {
   }
 
   private enqueueTask(node: MNode, target: Target, depExtendedData: DepExtendedData, deep: boolean) {
-    idleTask.enqueueTask(
+    this.idleTask.enqueueTask(
       ({ node, deep, target }) => {
         this.collectNode(node, target, depExtendedData, deep);
       },

package/src/services/ui.ts

@@ -31,6 +31,7 @@ import {
 } from '@editor/utils/const';
 
 import BaseService from './BaseService';
+import storageService, { Protocol } from './storage';
 
 const state = shallowReactive<UiState>({
   uiSelectMode: false,
@@ -46,9 +47,12 @@ const state = shallowReactive<UiState>({
     height: 817,
   },
   columnWidth: {
-    left: Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
+    left:
+      storageService.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_LEFT_COLUMN_WIDTH,
     center: 0,
-    right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
+    right:
+      storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
+      DEFAULT_RIGHT_COLUMN_WIDTH,
   },
   showGuides: true,
   showRule: true,

package/src/theme/common/var.scss

@@ -10,6 +10,7 @@ $nav--background-color: #ffffff;
 
 $sidebar-heder-background-color: $theme-color;
 $sidebar-content-background-color: #ffffff;
+$sidebar-heder-width: 40px;
 
 $page-bar-height: 32px;
 

package/src/theme/sidebar.scss

@@ -3,11 +3,12 @@
 .m-editor-sidebar {
   display: flex;
   height: 100%;
+  position: relative;
 
   .m-editor-sidebar-header {
     background: $sidebar-heder-background-color;
     height: 100%;
-    width: 40px;
+    width: $sidebar-heder-width;
 
     .m-editor-sidebar-header-item {
       line-height: 15px;
@@ -52,6 +53,24 @@
     overflow: auto;
   }
 
+  .m-editor-sidebar-tips {
+    position: absolute;
+    bottom: 0;
+    left: $sidebar-heder-width;
+    width: calc(100% - #{$sidebar-heder-width});
+    text-align: center;
+    background-color: rgba(252.5, 245.7, 235.5, 0.9);
+    color: #e6a23c;
+    padding: 5px 0;
+    font-size: 12px;
+
+    .close-icon {
+      cursor: pointer;
+      position: absolute;
+      right: 15px;
+    }
+  }
+
   .fold-icon {
     position: absolute;
     bottom: 8px;