Merge pull request #260 from easyops-cn/steve/ai-portal-730

Steve/ai-portal-730

Author: weareoutman

bricks/ai-portal/src/show-cases/images/[email protected]

@@ -5,10 +5,10 @@ import "@next-core/theme";
 import { initializeI18n } from "@next-core/i18n";
 import type { Link, LinkProps } from "@next-bricks/basic/link";
 import { get } from "lodash";
-import { K, NS, locales, t } from "./i18n.js";
-import styleText from "./styles.shadow.css";
 import classNames from "classnames";
 import { getBasePath } from "@next-core/runtime";
+import { K, NS, locales, t } from "./i18n.js";
+import styleText from "./styles.shadow.css";
 
 initializeI18n(NS, locales);
 
@@ -109,7 +109,11 @@ function ShowCasesComponent({ list, taskUrlTemplate }: ShowCasesProps) {
                     }}
                   />
                 ) : (
-                  <span>{item.summary}</span>
+                  <span className="summary-1">
+                    <span className="summary-2">
+                      <span>{item.summary}</span>
+                    </span>
+                  </span>
                 )}
               </span>
               <span className="title">

bricks/ai-portal/src/show-cases/index.tsx

@@ -52,16 +52,14 @@
 .cases {
   display: grid;
   width: 100%;
-  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
-  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
+  gap: 24px;
   margin-top: 2em;
 }
 
 .link {
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow:
-    0px 1px 2px rgba(46, 41, 51, 0.08),
-    0px 2px 4px rgba(71, 63, 79, 0.08);
+  background: #fefefe;
+  border: 1px solid #e8e9ec;
   border-radius: 12px;
   overflow: hidden;
   display: block;
@@ -71,19 +69,18 @@
   display: flex;
   gap: 0;
   flex-direction: column;
-  height: 200px;
+  height: 218px;
 }
 
 .title {
-  font-size: 16px;
-  line-height: 24px;
   width: 100%;
-  height: 80px;
-  padding: 16px 15px 15px;
+  height: 76px;
+  padding: 16px 16px 15px;
   color: #262626;
-  border: 1px solid rgba(35, 33, 41, 0.05);
-  border-top: 0;
-  border-radius: 0 0 12px 12px;
+  border-top: 1px solid #e8e9ec;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
 
   span {
     display: -webkit-box;
@@ -96,23 +93,14 @@
 
 .placeholder {
   width: 100%;
-  background: #f8f8f8;
-  border: 1px solid rgba(35, 33, 41, 0.05);
-  border-radius: 12px 12px 0 0;
-  height: 120px;
+  height: 142px;
+  background: linear-gradient(308deg, #dee9fc 0%, #fcfbfd 100%, #fbf9fe 100%);
+  overflow: hidden;
 }
 
 .summary {
   color: rgba(0, 0, 0, 0.65);
-  padding: 15px;
-
-  span {
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    line-clamp: 4;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
+  padding: 27px 0 0 24px;
 }
 
 .thumbnail span {
@@ -125,9 +113,37 @@
 }
 
 .link:hover {
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.06);
 
   .title {
     color: var(--elevo-color-brand);
   }
 }
+
+.summary-1 {
+  display: block;
+  background-image: url("./images/[email protected]");
+  background-size: 237px 115px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  padding: 10px 0 0 10px;
+}
+
+.summary-2 {
+  display: block;
+  background: linear-gradient(90deg, #ffffff 0%, #e4ecfc 100%);
+  padding: 12px 15px 5px 15px;
+  border-top-left-radius: 12px;
+
+  span {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: 15px;
+    color: #525971;
+    line-height: 22px;
+    height: 88px;
+  }
+}

bricks/ai-portal/src/show-cases/styles.shadow.css

@@ -9,11 +9,18 @@ let count = 0;
 
 mermaid.initialize({
   startOnLoad: false,
+  theme: "base",
   themeVariables: {
     fontSize: "14px",
+    lineColor: "#979797",
+    primaryColor: "#DCD2F3",
+    primaryBorderColor: "#0000001A",
   },
 });
 
+const parser = new DOMParser();
+const serializer = new XMLSerializer();
+
 // Reference https://github.com/remcohaszing/rehype-mermaid
 export function rehypeMermaid() {
   return async (tree: RefractorElement) => {
@@ -39,8 +46,55 @@ export function rehypeMermaid() {
           const id = `mermaid-${count++}`;
 
           const { svg } = await mermaid.render(id, toString(node));
-          const replacements = fromHtmlIsomorphic(svg, { fragment: true })
-            .children as RefractorElement[];
+          const root = parser.parseFromString(svg, "text/html");
+          const svgElement = root.querySelector("svg") as SVGSVGElement;
+
+          const defs = root.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "defs"
+          );
+          defs.innerHTML = `<linearGradient id="linear-gradient-${id}" x1="0%" y1="0%" x2="0%" y2="100%">
+  <stop offset="0%" stop-color="#F0EBFA" />
+  <stop offset="75%" stop-color="#DED4F4" />
+  <stop offset="100%" stop-color="#C5C7FA" />
+</linearGradient>`;
+          svgElement.prepend(defs);
+
+          const style = root.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "style"
+          );
+          style.textContent = `
+#${id} .node rect,
+#${id} .node circle,
+#${id} .node ellipse,
+#${id} .node polygon,
+#${id} .node path {
+  fill: url(#linear-gradient-${id});
+}
+#${id} .node rect {
+  rx: 4;
+  ry: 4;
+}
+#${id} .labelBkg {
+  background-color: #f5f8ff;
+}
+#${id} .edgeLabel,
+#${id} .edgeLabel p {
+  background-color: transparent;
+}
+#${id} .edgeLabel {
+  color: #8c8c8c;
+  font-size: 12px;
+}
+`;
+          svgElement.appendChild(style);
+
+          const modifiedSvg = serializer.serializeToString(svgElement);
+
+          const replacements = fromHtmlIsomorphic(modifiedSvg, {
+            fragment: true,
+          }).children as RefractorElement[];
           parent.children.splice(index!, 1, ...replacements);
           parent.properties.className = (
             (parent.properties.className as string[]) || []