feat(client): tooltip for designable button

packages/client/src/components/admin-layout/index.tsx

@@ -50,10 +50,49 @@ import { MenuSelectedKeysContext } from '../../schemas/menu';
 
 function DesignableToggle() {
   const { designable, setDesignable } = useDesignableSwitchContext();
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    if (designable) {
+      return;
+    }
+    if (localStorage.getItem('hide-tip')) {
+      return;
+    }
+    setTimeout(() => {
+      setVisible(true);
+    }, 2000);
+  }, []);
   return (
+    <div>
+      <Tooltip
+        // color={'volcano'}
+        placement={'bottom'}
+        title={
+          <span>
+            点此进入界面配置{' '}
+            <a
+              onClick={() => {
+                localStorage.setItem('hide-tip', 'true');
+                setVisible(false);
+              }}
+            >
+              关闭
+            </a>
+          </span>
+        }
+        visible={visible}
+        onVisibleChange={(visible) => {
+          setVisible(visible);
+        }}
+      >
+        <span style={{ height: 45, width: 45, position: 'absolute' }}></span>
+      </Tooltip>
       <Tooltip title={'界面配置'}>
         <Button
-        className={cls('nb-designable-toggle', { active: designable })}
+          className={cls('nb-designable-toggle', {
+            'has-tip': visible,
+            active: designable,
+          })}
           type={'primary'}
           style={{ height: 46, border: 0 }}
           onClick={() => {
@@ -63,6 +102,7 @@ function DesignableToggle() {
           <HighlightOutlined />
         </Button>
       </Tooltip>
+    </div>
   );
 }
 

packages/client/src/components/admin-layout/style.less

@@ -70,6 +70,9 @@
   &.active {
     // background: #faad14 !important;
   }
+  &.has-tip {
+    background: #f18b62 !important;
+  }
 }
 
 .user-info {