feat(web): use laf ai to generate code (#1029)

* feat: use laf AI to generate code
labring · Apr 17, 2023 · f1eac71 · f1eac71
1 parent 3c32ced
commit f1eac71
Show file tree

Hide file tree

Showing 8 changed files with 315 additions and 43 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -159,7 +159,7 @@
     "ID": "ID",
     "IDTip": "Please enter a valid ID number",
     "Name": "Real name",
-    "Registered": "Regist",
+    "Registered": "RegTime",
     "SendCode": "Send Code",
     "Tel": "Mobile",
     "TelTip": "Please enter a valid Mobile phone number",

diff --git a/web/src/components/Editor/CodeViewer.tsx b/web/src/components/Editor/CodeViewer.tsx
@@ -0,0 +1,253 @@
+import SyntaxHighlighter from "react-syntax-highlighter";
+
+type CodeViewerProps = {
+  code: string;
+  language: string;
+  showNumber?: boolean;
+  colorMode?: string;
+};
+
+const CodeViewerStyle: any = {
+  hljs: {
+    display: "block",
+    overflowX: "auto",
+    padding: "0.5em",
+    color: "#000",
+    background: "#f8f8ff",
+  },
+  "hljs-comment": {
+    color: "#408080",
+    fontStyle: "italic",
+  },
+  "hljs-quote": {
+    color: "#408080",
+    fontStyle: "italic",
+  },
+  "hljs-keyword": {
+    color: "#954121",
+  },
+  "hljs-selector-tag": {
+    color: "#954121",
+  },
+  "hljs-literal": {
+    color: "#954121",
+  },
+  "hljs-subst": {
+    color: "#954121",
+  },
+  "hljs-number": {
+    color: "#b0caa4",
+  },
+  "hljs-string": {
+    color: "#0451a5",
+  },
+
+  "hljs-selector-id": {
+    color: "#19469d",
+  },
+  "hljs-selector-class": {
+    color: "#19469d",
+  },
+  "hljs-section": {
+    color: "#19469d",
+  },
+  "hljs-type": {
+    color: "#19469d",
+  },
+  "hljs-params": {
+    color: "#00f",
+  },
+  "hljs-title": {
+    color: "#458",
+    fontWeight: "bold",
+  },
+  "hljs-tag": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-name": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-attr": {
+    color: "#a31515",
+    fontWeight: "normal",
+  },
+  "hljs-attribute": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-variable": {
+    color: "#008080",
+  },
+  "hljs-template-variable": {
+    color: "#008080",
+  },
+  "hljs-regexp": {
+    color: "#b68",
+  },
+  "hljs-link": {
+    color: "#b68",
+  },
+  "hljs-symbol": {
+    color: "#990073",
+  },
+  "hljs-bullet": {
+    color: "#990073",
+  },
+  "hljs-built_in": {
+    color: "#0086b3",
+  },
+  "hljs-builtin-name": {
+    color: "#0086b3",
+  },
+  "hljs-meta": {
+    color: "#999",
+    fontWeight: "bold",
+  },
+  "hljs-deletion": {
+    background: "#fdd",
+  },
+  "hljs-addition": {
+    background: "#dfd",
+  },
+  "hljs-emphasis": {
+    fontStyle: "italic",
+  },
+  "hljs-strong": {
+    fontWeight: "bold",
+  },
+};
+
+const JSONViewerDarkStyle: any = {
+  hljs: {
+    display: "block",
+    overflowX: "auto",
+    padding: "0.5em",
+    color: "#000",
+    background: "#f8f8ff",
+  },
+  "hljs-comment": {
+    color: "#408080",
+    fontStyle: "italic",
+  },
+  "hljs-quote": {
+    color: "#408080",
+    fontStyle: "italic",
+  },
+  "hljs-keyword": {
+    color: "#954121",
+  },
+  "hljs-selector-tag": {
+    color: "#954121",
+  },
+  "hljs-literal": {
+    color: "#954121",
+  },
+  "hljs-subst": {
+    color: "#954121",
+  },
+  "hljs-number": {
+    color: "#b0caa4",
+  },
+  "hljs-string": {
+    color: "#ce9178",
+  },
+
+  "hljs-selector-id": {
+    color: "#19469d",
+  },
+  "hljs-selector-class": {
+    color: "#19469d",
+  },
+  "hljs-section": {
+    color: "#19469d",
+  },
+  "hljs-type": {
+    color: "#19469d",
+  },
+  "hljs-params": {
+    color: "#00f",
+  },
+  "hljs-title": {
+    color: "#458",
+    fontWeight: "bold",
+  },
+  "hljs-tag": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-name": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-attr": {
+    color: "#9bdcfe",
+    fontWeight: "normal",
+  },
+  "hljs-attribute": {
+    color: "#000080",
+    fontWeight: "normal",
+  },
+  "hljs-variable": {
+    color: "#008080",
+  },
+  "hljs-template-variable": {
+    color: "#008080",
+  },
+  "hljs-regexp": {
+    color: "#b68",
+  },
+  "hljs-link": {
+    color: "#b68",
+  },
+  "hljs-symbol": {
+    color: "#990073",
+  },
+  "hljs-bullet": {
+    color: "#990073",
+  },
+  "hljs-built_in": {
+    color: "#0086b3",
+  },
+  "hljs-builtin-name": {
+    color: "#0086b3",
+  },
+  "hljs-meta": {
+    color: "#999",
+    fontWeight: "bold",
+  },
+  "hljs-deletion": {
+    background: "#fdd",
+  },
+  "hljs-addition": {
+    background: "#dfd",
+  },
+  "hljs-emphasis": {
+    fontStyle: "italic",
+  },
+  "hljs-strong": {
+    fontWeight: "bold",
+  },
+};
+export default function CodeViewer(props: CodeViewerProps) {
+  const { code, language, colorMode = "light" } = props;
+  const lightTheme = { background: "#fdfdfe" };
+  const darkTheme = {
+    background: "#202631",
+    color: "#f0f0f0",
+  };
+
+  return (
+    <div>
+      <SyntaxHighlighter
+        wrapLongLines={true}
+        language={language}
+        style={colorMode === "dark" ? JSONViewerDarkStyle : CodeViewerStyle}
+        customStyle={colorMode === "dark" ? darkTheme : lightTheme}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
@@ -5,6 +5,7 @@ type JSONViewerProps = {
   language?: string;
   showNumber?: boolean;
   colorMode?: string;
+  className?: string;
 };
 
 const JSONViewerStyle: any = {
@@ -235,7 +236,7 @@ const JSONViewerDarkStyle: any = {
   },
 };
 export default function JSONViewer(props: JSONViewerProps) {
-  const { code, language = "json", colorMode = "light" } = props;
+  const { code, language = "json", colorMode = "light", ...rest } = props;
   const lightTheme = { background: "#fdfdfe" };
   const darkTheme = {
     background: "#202631",
@@ -248,6 +249,7 @@ export default function JSONViewer(props: JSONViewerProps) {
         maxHeight: 390,
         overflow: "auto",
       }}
+      {...rest}
     >
       <SyntaxHighlighter
         language={language}

diff --git a/web/src/components/EmptyBox/index.tsx b/web/src/components/EmptyBox/index.tsx
@@ -10,7 +10,7 @@ export default function EmptyBox(props: {
 }) {
   const { children, hideIcon, className } = props;
   return (
-    <Center className={clsx("h-full w-full flex-col", className)}>
+    <Center className={clsx("h-full w-full flex-1 flex-col", className)}>
       {hideIcon ? null : (
         <Icon
           width="150"

diff --git a/web/src/pages/app/functions/mods/ConsolePanel/index.tsx b/web/src/pages/app/functions/mods/ConsolePanel/index.tsx
@@ -31,7 +31,10 @@ function ConsolePanel() {
   return (
     <Panel className="flex-1">
       <Panel.Header title="Console"></Panel.Header>
-      <div className="text-sm relative overflow-y-auto px-2 font-mono " style={{ height: "100%" }}>
+      <div
+        className="text-sm relative flex flex-col overflow-y-auto px-2 font-mono"
+        style={{ height: "100%" }}
+      >
         {currentRequestId && (
           <p className="mb-1 ml-1">
             RequestID: {currentRequestId} <CopyText text={String(currentRequestId)} />