feat(core): guard service (#9816)

packages/frontend/component/src/ui/menu/styles.css.ts

@@ -51,7 +51,7 @@ export const menuItem = style({
     '&.block': {
       maxWidth: '100%',
     },
-    '&[data-disabled]': {
+    '&[data-disabled], &.disabled': {
       vars: {
         [iconColor]: cssVarV2('icon/disable'),
         [labelColor]: cssVarV2('text/secondary'),

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -16,13 +16,15 @@ export const useMenuItem = <T extends MenuItemProps>({
   checked,
   selected,
   block,
+  disabled,
   ...otherProps
 }: T) => {
   const className = clsx(
     styles.menuItem,
     {
-      danger: type === 'danger',
-      warning: type === 'warning',
+      danger: disabled ? false : type === 'danger',
+      warning: disabled ? false : type === 'warning',
+      disabled,
       checked,
       selected,
       block,