fix(styles): sync global styles and activate panels when click contextmenu (#1246)

packages/canvas/container/src/components/CanvasMenu.vue

@@ -145,6 +145,8 @@ export default {
 
     // 计算上下文菜单位置，右键时显示，否则关闭
 
+    const { PLUGIN_NAME, activeSetting } = useLayout()
+
     const operations = {
       del() {
         removeNodeById(getCurrent().schema?.id)
@@ -153,10 +155,10 @@ export default {
         copyNode(getCurrent().schema?.id)
       },
       config() {
-        useLayout().activeSetting('props')
+        activeSetting(PLUGIN_NAME.Props)
       },
       bindEvent() {
-        useLayout().activeSetting('event')
+        activeSetting(PLUGIN_NAME.Event)
       },
       insert({ value }) {
         emit('insert', value)

packages/layout/src/DesignSettings.vue

@@ -198,7 +198,7 @@ export default {
 #tiny-engine-right-panel {
   height: calc(100vh - var(--base-top-panel-height));
   border-left: 1px solid var(--te-layout-common-border-color);
-  background: var(--ti-lowcode-common-component-bg);
+  background: var(--te-layout-common-bg-color);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -340,10 +340,10 @@ export default {
 
 @keyframes glow {
   0% {
-    box-shadow: inset 0px 0px 4px var(--ti-lowcode-canvas-handle-hover-bg);
+    box-shadow: inset 0px 0px 4px var(--te-layout-panel-active-color);
   }
   100% {
-    box-shadow: inset 0px 0px 14px var(--ti-lowcode-canvas-handle-hover-bg);
+    box-shadow: inset 0px 0px 14px var(--te-layout-panel-active-color);
   }
 }
 </style>

packages/layout/src/styles/vars.less

@@ -12,5 +12,5 @@
   --te-layout-common-icon-color: var(--te-common-icon-secondary);
   --te-layout-common-icon-bg-color-hover: var(--te-common-bg-disabled);
 
-  --te-layout-setting-bg-color-hover: var(--te-common-bg-primary-checked);
+  --te-layout-panel-active-color: var(--te-common-bg-primary-checked);
 }

packages/register/src/constants.ts

@@ -17,7 +17,8 @@ export const META_SERVICE = {
   Help: 'engine.service.help',
   Property: 'engine.service.property',
   Properties: 'engine.service.properties',
-  ThemeSwitch: 'engine.service.themeSwitch'
+  ThemeSwitch: 'engine.service.themeSwitch',
+  Style: 'engine.service.style'
 }
 
 export const META_APP = {

packages/register/src/hooks.ts

@@ -17,7 +17,8 @@ export const HOOK_NAME = {
   useModal: 'modal',
   useNotify: 'notify',
   useCustom: 'custom',
-  useMaterial: 'material'
+  useMaterial: 'material',
+  useStyle: 'style'
 }
 
 const hooksState = {
@@ -39,6 +40,7 @@ const hooksState = {
   [HOOK_NAME.useNotify]: {},
   [HOOK_NAME.useModal]: {},
   [HOOK_NAME.useMaterial]: {},
+  [HOOK_NAME.useStyle]: {},
   [HOOK_NAME.useCustom]: {} // 自定义
 }
 
@@ -67,6 +69,7 @@ export const useEnv = (...args: any[]) => getHook(HOOK_NAME.useEnv, args)
 export const useModal = (...args: any[]) => getHook(HOOK_NAME.useModal, args)
 export const useNotify = (...args: any[]) => getHook(HOOK_NAME.useNotify, args)
 export const useMaterial = (...args: any[]) => getHook(HOOK_NAME.useMaterial, args)
+export const useStyle = (...args: any[]) => getHook(HOOK_NAME.useStyle, args)
 export const useCustom = (...args: any[]) => getHook(HOOK_NAME.useCustom, args)
 
 export function initHook(

packages/settings/styles/index.ts

@@ -12,9 +12,13 @@
 
 import entry from './src/Main.vue'
 import metaData from './meta'
+import { default as StyleService } from './src/js/index'
 import './src/styles/vars.less'
 
 export default {
   ...metaData,
+  metas: [StyleService],
   entry
 }
+
+export { StyleService }

packages/settings/styles/src/components/classNamesContainer/index.vue

@@ -167,7 +167,8 @@ watch(
     classNameState.curSelector = className
     // 多类名的选择器的暂时不支持编辑，比如 .test1.test2
     classNameState.curSelectorEditable = getCurSelectorEditable(className)
-  }
+  },
+  { immediate: true }
 )
 
 const setSelectorProps = (type, value) => {

packages/settings/styles/src/js/index.ts

@@ -0,0 +1,14 @@
+import { HOOK_NAME, META_SERVICE, defineService } from '@opentiny/tiny-engine-meta-register'
+import useStyle from './useStyle'
+
+export default defineService({
+  id: META_SERVICE.Style,
+  type: 'MetaService',
+  apis: useStyle(),
+  composable: {
+    name: HOOK_NAME.useStyle
+  },
+  init: () => {
+    useStyle().initStylePanelWatch()
+  }
+})

packages/settings/styles/src/js/useStyle.ts

@@ -338,17 +338,11 @@ const updateStyle = (properties: any) => {
   updateRect()
 }
 
-let hasWatchInitialized = false
-
 export default () => {
-  if (!hasWatchInitialized) {
-    initStylePanelWatch()
-    hasWatchInitialized = true
-  }
-
   return {
     state,
-    updateStyle
+    updateStyle,
+    initStylePanelWatch
   }
 }