perf: perf ui、code warn、form validate prompt

rookie-luochao · Apr 27, 2024 · 5a74329 · 5a74329
1 parent d443813
commit 5a74329
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 47 deletions.
diff --git a/src/components/antd-config/index.tsx b/src/components/antd-config/index.tsx
@@ -1,9 +1,12 @@
 import { ConfigProvider } from "antd";
 import zhCN from "antd/locale/zh_CN";
+import { useTranslation } from "react-i18next";
 import { useConfigInfoStore } from "../../core/store";
 import { darkTheme, dsc } from "../../core/style/defaultStyleConfig";
+import { LangType } from "../../i18n/config";
 
 export function AntdConfigProviderWrap({ children }: { children: React.ReactNode }) {
+  const { i18n } = useTranslation();
   const { configInfo } = useConfigInfoStore();
   const isDarkTheme = configInfo?.theme === "dark";
 
@@ -22,7 +25,7 @@ export function AntdConfigProviderWrap({ children }: { children: React.ReactNode
 
   return (
     <ConfigProvider
-      locale={zhCN}
+      locale={i18n?.resolvedLanguage === LangType.zh ? zhCN : undefined}
       theme={{
         components: {
           Layout: {

diff --git a/src/components/curl/index.tsx b/src/components/curl/index.tsx
@@ -30,7 +30,7 @@ export function CreateCURL({ request }: { request: AxiosRequestConfig }) {
       <pre
         style={{
           width: 672,
-          fontSize: dsc.fontSize.s,
+          fontSize: dsc.fontSize.xs,
           backgroundColor: theme.color.primaryLight,
           color: theme.color.menuItem,
           ...httpCardWrapStyle,

diff --git a/src/components/github-star/index.tsx b/src/components/github-star/index.tsx
@@ -19,17 +19,20 @@ export default function GithubStar() {
   const isDarkTheme = configInfo?.theme === "dark";
   const [star, setStar] = useState(0);
   const [isFetched, setIsFetched] = useState(false);
+  const isPackage = import.meta.env.MODE === "package";
 
   useEffect(() => {
-    (async () => {
-      try {
-        const res = await getStar();
-        setStar(res.stargazers_count);
-        setIsFetched(true);
-      } catch (e) {
-        console.log("fetch github info error:", e);
-      }
-    })();
+    if (!isPackage) {
+      (async () => {
+        try {
+          const res = await getStar();
+          setStar(res.stargazers_count);
+          setIsFetched(true);
+        } catch (e) {
+          console.log("fetch github info error:", e);
+        }
+      })();
+    }
   }, []);
 
   async function getStar() {
@@ -46,22 +49,32 @@ export default function GithubStar() {
     return null;
   }
 
-  return (
-    <Tooltip
-      title={
-        <span>
-          {`${star}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
-          <span css={{ color: "gold" }}>&#9733;</span>
-        </span>
-      }
+  const githubLink = (
+    <a
+      href="https://github.com/rookie-luochao/openapi-ui"
+      target="_blank"
+      css={{ cursor: "pointer", opacity: 0.8, "&:hover": { opacity: 1 } }}
     >
-      <a
-        href="https://github.com/rookie-luochao/openapi-ui"
-        target="_blank"
-        css={{ cursor: "pointer", opacity: 0.8, "&:hover": { opacity: 1 } }}
-      >
-        <GithubIcon fill={isDarkTheme ? darkTheme.color.text : undefined} />
-      </a>
-    </Tooltip>
+      <GithubIcon fill={isDarkTheme ? darkTheme.color.text : undefined} />
+    </a>
+  );
+
+  return (
+    <>
+      {isPackage ? (
+        githubLink
+      ) : (
+        <Tooltip
+          title={
+            <span>
+              {`${star}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+              <span css={{ color: "gold" }}>&#9733;</span>
+            </span>
+          }
+        >
+          {githubLink}
+        </Tooltip>
+      )}
+    </>
   );
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -16,6 +16,7 @@ ReactDOM.createRoot(
 ).render(
   <StrictMode>
     <InitPackageConfig />
+    <ModifyAppTitle />
     <Global
       styles={{
         body: {
@@ -24,7 +25,6 @@ ReactDOM.createRoot(
         },
       }}
     />
-    <ModifyAppTitle />
     <ThemeWrap>
       <AntdConfigProviderWrap>
         <LazyImportComponent>

diff --git a/src/openapi/RequestParameterInput.tsx b/src/openapi/RequestParameterInput.tsx
@@ -20,12 +20,12 @@ function LabelStyleWrap({ children, required }: { required?: boolean; children?:
 
   return (
     <div
-      css={
+      css={[
+        { color: theme.color.title, whiteSpace: "nowrap" },
         required
           ? {
               position: "relative",
               fontWeight: "bold",
-              color: theme.color.title,
               "&:after": {
                 content: `"*"`,
                 color: theme.color.danger,
@@ -34,10 +34,8 @@ function LabelStyleWrap({ children, required }: { required?: boolean; children?:
                 marginLeft: 1,
               },
             }
-          : {
-              color: theme.color.title,
-            }
-      }
+          : null,
+      ]}
     >
       {children}
     </div>

diff --git a/src/openapi/SchemaView.tsx b/src/openapi/SchemaView.tsx
@@ -122,7 +122,7 @@ export function Description({
   }
 
   return (
-    <span style={style}>
+    <span style={{ ...style, whiteSpace: "break-spaces", textAlign: "right" }}>
       {prefix}
       {desc}
     </span>

diff --git a/src/postman/RequestBuilder.tsx b/src/postman/RequestBuilder.tsx
@@ -71,7 +71,9 @@ export function RequestBuilder() {
         <div style={{ display: "flex", alignItems: "center" }}>
           {t("postman.body")}&nbsp;
           <Tooltip title={t("postman.bodyTitleTip")} overlayInnerStyle={{ width: 260 }}>
-            <TipIcon />
+            <a style={{ display: "flex", alignItems: "center" }}>
+              <TipIcon />
+            </a>
           </Tooltip>
         </div>
       ),

diff --git a/src/postman/index.tsx b/src/postman/index.tsx
@@ -122,17 +122,15 @@ export default function Postman() {
             isZh ? { minHeight: defaultContentHeight - 32 - 12 } : {},
           ]}
         >
-          <div>
-            <Tabs
-              type="editable-card"
-              items={items}
-              activeKey={activeKey}
-              onChange={(newActiveKey: string) => {
-                setActiveKey(newActiveKey);
-              }}
-              onEdit={onEdit}
-            />
-          </div>
+          <Tabs
+            type="editable-card"
+            items={items}
+            activeKey={activeKey}
+            onChange={(newActiveKey: string) => {
+              setActiveKey(newActiveKey);
+            }}
+            onEdit={onEdit}
+          />
         </div>
         {isZh && <ICPRegistration />}
       </div>