From 4faf19d8ebc8ff21dcfca9f814124e565a199644 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 9 Mar 2022 20:58:11 +0800
Subject: [PATCH] fix: improve code

---
 packages/app/src/pages/document.ejs           | 13 +++++++++
 packages/client/src/global.less               | 27 +++++++++++++++++++
 packages/client/src/index.tsx                 |  1 +
 .../antd/input/EllipsisWithTooltip.tsx        | 14 +++++++---
 .../src/schema-component/antd/input/Input.tsx | 14 +++++++++-
 .../antd/markdown/Markdown.tsx                |  4 +++
 6 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 packages/app/src/pages/document.ejs
 create mode 100644 packages/client/src/global.less

diff --git a/packages/app/src/pages/document.ejs b/packages/app/src/pages/document.ejs
new file mode 100644
index 000000000..3079f0952
--- /dev/null
+++ b/packages/app/src/pages/document.ejs
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Your App</title>
+  <script>
+    showLog=true;function log(m){if(window.console&&showLog){console.log(m)}}function css_browser_selector(u){var uaInfo={},screens=[320,480,640,768,1024,1152,1280,1440,1680,1920,2560],allScreens=screens.length,ua=u.toLowerCase(),is=function(t){return RegExp(t,'i').test(ua)},version=function(p,n){n=n.replace('.','_');var i=n.indexOf('_'),ver='';while(i>0){ver+=' '+p+n.substring(0,i);i=n.indexOf('_',i+1)}ver+=' '+p+n;return ver},g='gecko',w='webkit',c='chrome',f='firefox',s='safari',o='opera',m='mobile',a='android',bb='blackberry',lang='lang_',dv='device_',html=document.documentElement,b=[(!/opera|webtv/i.test(ua)&&/msie\s(\d+)/.test(ua))||/trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/.test(ua)?'ie ie'+(/trident\/4\.0/.test(ua)?'8':RegExp.$1=='11.0'?'11':RegExp.$1):is('firefox/')?g+' '+f+(/firefox\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+f+RegExp.$2+' '+f+RegExp.$2+'_'+RegExp.$4:''):is('gecko/')?g:is('opera')?o+(/version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+o+RegExp.$2+' '+o+RegExp.$2+'_'+RegExp.$4:/opera(\s|\/)(\d+)\.(\d+)/.test(ua)?' '+o+RegExp.$2+' '+o+RegExp.$2+'_'+RegExp.$3:''):is('konqueror')?'konqueror':is('blackberry')?bb+(/Version\/(\d+)(\.(\d+)+)/i.test(ua)?' '+bb+RegExp.$1+' '+bb+RegExp.$1+RegExp.$2.replace('.','_'):/Blackberry ?(([0-9]+)([a-z]?))[\/|;]/gi.test(ua)?' '+bb+RegExp.$2+(RegExp.$3?' '+bb+RegExp.$2+RegExp.$3:''):''):is('android')?a+(/Version\/(\d+)(\.(\d+))+/i.test(ua)?' '+a+RegExp.$1+' '+a+RegExp.$1+RegExp.$2.replace('.','_'):'')+(/Android (.+); (.+) Build/i.test(ua)?' '+dv+RegExp.$2.replace(/ /g,'_').replace(/-/g,'_'):''):is('chrome')?w+' '+c+(/chrome\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+c+RegExp.$2+(RegExp.$4>0?' '+c+RegExp.$2+'_'+RegExp.$4:''):''):is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+s+RegExp.$2+' '+s+RegExp.$2+RegExp.$3.replace('.','_'):/ Safari\/(\d+)/i.test(ua)?RegExp.$1=='419'||RegExp.$1=='417'||RegExp.$1=='416'||RegExp.$1=='412'?' '+s+'2_0':RegExp.$1=='312'?' '+s+'1_3':RegExp.$1=='125'?' '+s+'1_2':RegExp.$1=='85'?' '+s+'1_0':'':''):is('mozilla/')?g:'',is('android|mobi|mobile|j2me|iphone|ipod|ipad|blackberry|playbook|kindle|silk',)?m:'',is('j2me')?'j2me':is('ipad|ipod|iphone')?(/CPU( iPhone)? OS (\d+[_|\.]\d+([_|\.]\d+)*)/i.test(ua)?'ios'+version('ios',RegExp.$2):'')+' '+(/(ip(ad|od|hone))/gi.test(ua)?RegExp.$1:''):is('playbook')?'playbook':is('kindle|silk')?'kindle':is('playbook')?'playbook':is('mac')?'mac'+(/mac os x ((\d+)[.|_](\d+))/.test(ua)?' mac'+RegExp.$2+' mac'+RegExp.$1.replace('.','_'):''):is('win')?'win'+(is('windows nt 6.2')?' win8':is('windows nt 6.1')?' win7':is('windows nt 6.0')?' vista':is('windows nt 5.2')||is('windows nt 5.1')?' win_xp':is('windows nt 5.0')?' win_2k':is('windows nt 4.0')||is('WinNT4.0')?' win_nt':''):is('freebsd')?'freebsd':is('x11|linux')?'linux':'',/[; |\[](([a-z]{2})(\-[a-z]{2})?)[)|;|\]]/i.test(ua)?(lang+RegExp.$2).replace('-','_')+(RegExp.$3!=''?(' '+lang+RegExp.$1).replace('-','_'):''):'',is('ipad|iphone|ipod')&&!is('safari')?'ipad_app':'',];console.debug(ua);function screenSize(){var w=window.outerWidth||html.clientWidth;var h=window.outerHeight||html.clientHeight;uaInfo.orientation=w<h?'portrait':'landscape';html.className=html.className.replace(/ ?orientation_\w+/g,'').replace(/ [min|max|cl]+[w|h]_\d+/g,'');for(var i=allScreens-1;i>=0;i--){if(w>=screens[i]){uaInfo.maxw=screens[i];break}}widthClasses='';for(var info in uaInfo){widthClasses+=' '+info+'_'+uaInfo[info]}html.className=html.className+widthClasses;return widthClasses}window.onresize=screenSize;screenSize();function retina(){var r=window.devicePixelRatio>1;if(r){html.className+=' retina'}else{html.className+=' non-retina'}}retina();var cssbs=b.join(' ')+' js ';html.className=(cssbs+html.className.replace(/\b(no[-|_]?)?js\b/g,'')).replace(/^ /,'').replace(/ +/g,' ');return cssbs}css_browser_selector(navigator.userAgent);
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/client/src/global.less b/packages/client/src/global.less
new file mode 100644
index 000000000..1412bdf03
--- /dev/null
+++ b/packages/client/src/global.less
@@ -0,0 +1,27 @@
+.win {
+  /* width */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #c0c0c0;
+    border-radius: 4px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+
+  .rc-virtual-list-scrollbar-thumb {
+    background: #c0c0c0 !important;
+  }
+}
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 6b7700106..0297aae6f 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -1,4 +1,5 @@
 import debug from 'debug';
+import './global.less';
 debug.log = console.log.bind(console);
 
 export * from './acl';
diff --git a/packages/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx b/packages/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
index 8a8ad6144..cf201841a 100644
--- a/packages/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
+++ b/packages/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
@@ -21,10 +21,16 @@ export const EllipsisWithTooltip = (props) => {
       onVisibleChange={(visible) => {
         setVisible(ellipsis && visible);
       }}
-      content={props.children}
-      overlayStyle={{
-        width: 300,
-      }}
+      content={
+        <div
+          style={{
+            width: 300,
+            overflowX: 'auto',
+          }}
+        >
+          {props.children}
+        </div>
+      }
     >
       <div
         style={{ ...ellipsisDefaultStyle }}
diff --git a/packages/client/src/schema-component/antd/input/Input.tsx b/packages/client/src/schema-component/antd/input/Input.tsx
index 47d14a5a2..0fe86c39d 100644
--- a/packages/client/src/schema-component/antd/input/Input.tsx
+++ b/packages/client/src/schema-component/antd/input/Input.tsx
@@ -21,7 +21,19 @@ export const Input: ComposedInput = connect(
   mapReadPretty(ReadPretty.Input),
 );
 
-Input.TextArea = connect(AntdInput.TextArea, mapReadPretty(ReadPretty.TextArea));
+Input.TextArea = connect(
+  AntdInput.TextArea,
+  mapProps((props, field) => {
+    return {
+      autoSize: {
+        maxRows: 10,
+        minRows: 3,
+      },
+      ...props,
+    };
+  }),
+  mapReadPretty(ReadPretty.TextArea),
+);
 Input.URL = connect(AntdInput, mapReadPretty(ReadPretty.URL));
 
 export default Input;
diff --git a/packages/client/src/schema-component/antd/markdown/Markdown.tsx b/packages/client/src/schema-component/antd/markdown/Markdown.tsx
index 3b5f1e96d..0b170dd7a 100644
--- a/packages/client/src/schema-component/antd/markdown/Markdown.tsx
+++ b/packages/client/src/schema-component/antd/markdown/Markdown.tsx
@@ -10,6 +10,10 @@ export const Markdown: any = connect(
   AntdInput.TextArea,
   mapProps((props: any, field) => {
     return {
+      autoSize: {
+        maxRows: 10,
+        minRows: 3,
+      },
       ...props,
       suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
     };