feat(editor): 没有参考线时不显示参考线切换按钮

Made-with: Cursor

packages/editor/src/hooks/use-stage.ts

@@ -59,10 +59,12 @@ export const useStage = (stageOptions: StageOptions) => {
     },
   );
 
-  stage.mask?.setGuides([
-    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
-  ]);
+  const hGuidesCache = getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY));
+  const vGuidesCache = getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY));
+
+  stage.mask?.setGuides([hGuidesCache, vGuidesCache]);
+
+  uiService.set('hasGuides', hGuidesCache.length > 0 || vGuidesCache.length > 0);
 
   stage.on('page-el-update', () => {
     editorService.set('stageLoading', false);
@@ -124,6 +126,11 @@ export const useStage = (stageOptions: StageOptions) => {
   stage.on('change-guides', (e) => {
     uiService.set('showGuides', true);
 
+    uiService.set(
+      'hasGuides',
+      (stage.mask?.horizontalGuidelines.length ?? 0) > 0 || (stage.mask?.verticalGuidelines.length ?? 0) > 0,
+    );
+
     if (!root.value || !page.value) return;
 
     const storageKey = getGuideLineKey(

packages/editor/src/layouts/NavMenu.vue

@@ -37,6 +37,7 @@ const columnWidth = computed(() => uiService.get('columnWidth'));
 const keys = Object.values(ColumnLayout);
 
 const showGuides = computed((): boolean => uiService.get('showGuides'));
+const hasGuides = computed((): boolean => uiService.get('hasGuides'));
 const showRule = computed((): boolean => uiService.get('showRule'));
 const zoom = computed((): number => uiService.get('zoom'));
 
@@ -143,6 +144,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
       });
       break;
     case 'guides':
+      if (!hasGuides.value) break;
       config.push({
         type: 'button',
         className: 'guides',

packages/editor/src/services/ui.ts

@@ -55,6 +55,7 @@ const state = shallowReactive<UiState>({
       DEFAULT_RIGHT_COLUMN_WIDTH,
   },
   showGuides: true,
+  hasGuides: false,
   showRule: true,
   propsPanelSize: 'small',
   showAddPageButton: true,

packages/editor/src/type.ts

@@ -253,6 +253,8 @@ export interface UiState {
   columnWidth: GetColumnWidth;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
   showGuides: boolean;
+  /** 画布上是否存在参考线 */
+  hasGuides: boolean;
   /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
   showRule: boolean;
   /** 用于控制该属性配置表单内组件的尺寸 */