fix: ui problem of compact theme (#1670)

* fix: graphical interface override tabs

* fix: link of markdown too longer

* fix: page tab designer override in compact theme

* feat: url should be ellipsis

packages/core/client/src/schema-component/antd/action/Action.tsx

@@ -46,10 +46,6 @@ export const actionDesignerCss = css`
     display: none;
     background: rgba(241, 139, 98, 0.06);
     border: 0;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     pointer-events: none;
     > .general-schema-designer-icons {
       position: absolute;

packages/core/client/src/schema-component/antd/index.less

@@ -18,9 +18,11 @@
 
 :root {
   --nb-spacing: 24px;
+  --nb-designer-offset: -10px;
 }
 .theme-compact {
   --nb-spacing: 16px;
+  --nb-designer-offset: -6px;
   .ant-formily-item {
     margin-bottom: 16px;
   }

packages/core/client/src/schema-component/antd/input/ReadPretty.tsx

@@ -6,6 +6,7 @@ import { useCompile } from '../..';
 import { EllipsisWithTooltip } from './EllipsisWithTooltip';
 import { HTMLEncode } from './shared';
 import { cx, css } from '@emotion/css';
+import { Typography } from 'antd';
 
 type Composed = {
   Input: React.FC<InputProps & { ellipsis?: any }>;
@@ -40,17 +41,22 @@ ReadPretty.TextArea = (props) => {
   const { autop = true, ellipsis, text } = props;
   const html = (
     <div
-      style={{lineHeight: 1.612}}
+      style={{ lineHeight: 1.612 }}
       dangerouslySetInnerHTML={{
         __html: HTMLEncode(value).split('\n').join('<br/>'),
       }}
     />
   );
 
-  const content = ellipsis ?
-    (<EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
+  const content = ellipsis ? (
+    <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
       {text || value}
-    </EllipsisWithTooltip>) : (autop ? html : value);
+    </EllipsisWithTooltip>
+  ) : autop ? (
+    html
+  ) : (
+    value
+  );
   return (
     <div className={cls(prefixCls, props.className)} style={props.style}>
       {props.addonBefore}
@@ -101,9 +107,9 @@ ReadPretty.Html = (props) => {
 ReadPretty.URL = (props) => {
   const prefixCls = usePrefixCls('description-url', props);
   const content = props.value && (
-    <a target={'_blank'} href={props.value as any}>
+    <Typography.Link ellipsis target={'_blank'} href={props.value as any}>
       {props.value}
-    </a>
+    </Typography.Link>
   );
   return (
     <div className={cls(prefixCls, props.className)} style={props.style}>
@@ -120,11 +126,15 @@ ReadPretty.JSON = (props) => {
   const prefixCls = usePrefixCls('json', props);
   return (
     <pre
-      className={cx(prefixCls, props.className, css`
-        margin-bottom: 0;
-        line-height: 1.5;
-        font-size: 90%;
-      `)}
+      className={cx(
+        prefixCls,
+        props.className,
+        css`
+          margin-bottom: 0;
+          line-height: 1.5;
+          font-size: 90%;
+        `,
+      )}
       style={props.style}
     >
       {props.value != null ? JSON.stringify(props.value, null, props.space ?? 2) : ''}

packages/core/client/src/schema-component/antd/markdown/style.less

@@ -1,5 +1,8 @@
 .nb-markdown {
   line-height: 1.612;
+  a {
+    word-break: break-all;
+  }
 }
 
 .nb-markdown > *:last-child {

packages/core/client/src/schema-component/antd/page/Page.tsx

@@ -26,10 +26,10 @@ const designerCss = css`
   }
   &.nb-action-link {
     > .general-schema-designer {
-      top: -10px;
-      bottom: -10px;
-      left: -10px;
-      right: -10px;
+      top: var(--nb-designer-offset);
+      bottom: var(--nb-designer-offset);
+      right: var(--nb-designer-offset);
+      left: var(--nb-designer-offset);
     }
   }
   > .general-schema-designer {
@@ -42,10 +42,6 @@ const designerCss = css`
     display: none;
     background: rgba(241, 139, 98, 0.06);
     border: 0;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     pointer-events: none;
     > .general-schema-designer-icons {
       position: absolute;
@@ -88,10 +84,6 @@ const pageDesignerCss = css`
     display: none;
     /* background: rgba(241, 139, 98, 0.06); */
     border: 0;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     pointer-events: none;
     > .general-schema-designer-icons {
       z-index: 9999;

packages/plugins/graph-collection-manager/src/client/GraphCollectionShortcut.tsx

@@ -117,7 +117,7 @@ export const GraphCollectionPane = () => {
       className={css`
         height: calc(100vh - 160px);
         overflow: auto;
-        margin: -24px;
+        margin: calc(var(--nb-spacing) * -1);
         position: relative;
       `}
       id="graph_container"