fix: js library ui

Esieve · Esieve · commit 4b986b1320cc · 2023-03-23T14:08:08.000+08:00
diff --git a/client/packages/openblocks/src/components/JSLibraryModal.tsx b/client/packages/openblocks/src/components/JSLibraryModal.tsx
@@ -22,7 +22,6 @@ import { LoadingOutlined } from "@ant-design/icons";
 import { RecommendedJSLibraryMeta } from "api/jsLibraryApi";
 import log from "loglevel";
 import { TacoMarkDown } from "components/markdown";
-import { HelpText } from "components/HelpText";
 
 const ModalLabel = styled.div`
   display: flex;
@@ -209,6 +208,13 @@ const Error = (props: {
   </ErrorWrapper>
 );
 
+const HelpText = styled(TacoMarkDown)`
+  font-size: 13px;
+  color: ${GreyTextColor};
+  margin: 8px 0;
+  line-height: 13px;
+`;
+
 interface JSLibraryModalProps {
   trigger: ReactNode;
   runInHost: boolean;
@@ -268,9 +274,7 @@ export function JSLibraryModal(props: JSLibraryModalProps) {
         width="648px"
       >
         <div style={{ lineHeight: "10px" }}>URL</div>
-        <HelpText style={{ lineHeight: "13px", margin: "8px 0 " }}>
-          {trans("preLoad.urlTooltip")}
-        </HelpText>
+        <HelpText>{trans("preLoad.urlTooltip")}</HelpText>
         <InputWrapper>
           <Input
             status={urlError || installError ? "error" : undefined}
@@ -326,12 +330,16 @@ export function JSLibraryModal(props: JSLibraryModalProps) {
           />
         )}
 
-        <div style={{ marginTop: "24px" }}>{trans("preLoad.recommended")}</div>
-        <JSLibraryRecommends>
-          {recommends.map((r, idx) => (
-            <JSLibraryCard key={idx} meta={r} {...props} setError={setInstallError} />
-          ))}
-        </JSLibraryRecommends>
+        {recommends.length > 0 && (
+          <>
+            <div style={{ marginTop: "24px" }}>{trans("preLoad.recommended")}</div>
+            <JSLibraryRecommends>
+              {recommends.map((r, idx) => (
+                <JSLibraryCard key={idx} meta={r} {...props} setError={setInstallError} />
+              ))}
+            </JSLibraryRecommends>
+          </>
+        )}
       </CustomModal>
     </div>
   );
diff --git a/client/packages/openblocks/src/i18n/locales/en.ts b/client/packages/openblocks/src/i18n/locales/en.ts
@@ -1921,7 +1921,8 @@ export const en = {
     jsLibraryHelpText:
       "Add JavaScript libraries to your current application via URL addresses. lodash, moment, uuid, numbro are built into the system for immediate use.  JavaScript libraries are loaded before the application is initialized, which can have an impact on application performance.",
     exportedAs: "Exported as",
-    urlTooltip: "URL address of the JavaScript library, unpkg.com or jsdelivr.net is recommended",
+    urlTooltip:
+      "URL address of the JavaScript library, [unpkg.com](https://unpkg.com/) or [jsdelivr.net](https://www.jsdelivr.com/) is recommended",
     recommended: "Recommended",
     viewJSLibraryDocument: "Document",
     jsLibraryURLError: "Invalid URL",
@@ -1931,8 +1932,8 @@ export const en = {
     jsLibraryInstallSuccess: "JavaScript library installed successfully",
     jsLibraryInstallFailed: "JavaScript library installation failed",
     jsLibraryInstallFailedCloud:
-      "JavaScript library installation failed. Perhaps the library is not available in the sandbox, [Documentation](https://docs.openblocks.dev/build-apps/write-javascript/use-third-party-libraries#manually-import-libraries)\n{message}",
-    jsLibraryInstallFailedHost: "JavaScript library installation failed\n{message}",
+      "Perhaps the library is not available in the sandbox, [Documentation](https://docs.openblocks.dev/build-apps/write-javascript/use-third-party-libraries#manually-import-libraries)\n{message}",
+    jsLibraryInstallFailedHost: "{message}",
     add: "Add New",
     jsHelpText: "Add a global method or variable to the current application.",
     cssHelpText:
