feat:【微服务全景图】优化

Tinie13 · May 9, 2024 · 3d259bf · 3d259bf
1 parent ba76000
commit 3d259bf
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 46 deletions.
diff --git a/src/components/home/OverViewImage/components/ControlPanel.jsx b/src/components/home/OverViewImage/components/ControlPanel.jsx
@@ -6,7 +6,7 @@ import { ProductPanel } from "./common/ProductPanel";
 
 export const ControlPanel = ({ }) => {
   return (
-    <ProductPanel title="控制面">
+    <ProductPanel title="控制面" panelSkewDir={-1}>
       <Product
         image={
           "https://gw.alicdn.com/imgextra/i3/O1CN01dI5UtV1iMnEY2sB3r_!!6000000004399-2-tps-216-154.png"

diff --git a/src/components/home/OverViewImage/components/GovernancePanel.jsx b/src/components/home/OverViewImage/components/GovernancePanel.jsx
@@ -6,7 +6,7 @@ import { ProductPanel } from "./common/ProductPanel";
 
 export const GovernancePanel = ({}) => {
   return (
-    <ProductPanel title="治理面" panelSkewDir={-1}>
+    <ProductPanel title="治理面">
       <Product
         // image={
         //   "https://gw.alicdn.com/imgextra/i4/O1CN012zo8OT21NEJMg5vvT_!!6000000006972-2-tps-216-174.png"

diff --git a/src/components/home/OverViewImage/components/TelemetryPanel.jsx b/src/components/home/OverViewImage/components/TelemetryPanel.jsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { Panel } from "./common/Panel";
 import { Product } from "./common/Product";
-import { hoverPrometheusData,hoverOpenTelemetryData } from "../utils";
+import { hoverPrometheusData,hoverOpenTelemetryData,hoveriLogtailData } from "../utils";
 import { ProductPanel } from "./common/ProductPanel";
 
 export const TelemetryPanel = () => {
   return (
-    <ProductPanel title="可观测" width="25%">
+    <ProductPanel title="可观测" >
       {/* <Product
         image={
           "https://gw.alicdn.com/imgextra/i1/O1CN01JpJfq81KvYW9T8HlT_!!6000000001226-2-tps-216-174.png"
@@ -25,6 +25,11 @@ export const TelemetryPanel = () => {
         label="Prometheus"
         hoverContent={hoverPrometheusData}
       />
+      <Product
+        logo="https://img.alicdn.com/imgextra/i3/O1CN01jYzUO31nQywwUzAAv_!!6000000005085-2-tps-80-80.png"
+        label="iLogtail"
+        hoverContent={hoveriLogtailData}
+      />
     </ProductPanel>
   );
 };
diff --git a/src/components/home/OverViewImage/index.jsx b/src/components/home/OverViewImage/index.jsx
@@ -58,51 +58,51 @@ function App({ colors = defaultColorConfig, linkStyle = "text-sm", className = '
         {...props}
       >
         <div class='hidden md:inline-block'>
-        <div class="flex justify-around flex-1 items-center">
-          <GovernancePanel />
-          <ControlPanel />
-        </div>
-        <div class="flex justify-around flex-[2]">
-          <DataPanel />
-        </div>
-        <div class="flex justify-around flex-1">
-          <OpsPanel />
-          <TelemetryPanel />
-          </div> 
+          <div class="flex justify-around flex-1 items-center">
+            <ControlPanel />
+            <GovernancePanel />
+          </div>
+          <div class="flex justify-around flex-[2]">
+            <DataPanel />
           </div>
-          <img class='md:hidden' alt='overview image' onClick={handleImageClick} src='https://img.alicdn.com/imgextra/i2/O1CN01OhhnzT1CtFbbiKTWq_!!6000000000138-0-tps-2792-1502.jpg' />
-          {isModalOpen && (
-        <div
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            zIndex: 1000,
-          }}
-          onClick={handleModalClick}
-        >
+          <div class="flex justify-around flex-1">
+            <OpsPanel />
+            <TelemetryPanel />
+          </div>
+        </div>
+        <img class='md:hidden' alt='overview image' onClick={handleImageClick} src='https://img.alicdn.com/imgextra/i2/O1CN01OhhnzT1CtFbbiKTWq_!!6000000000138-0-tps-2792-1502.jpg' />
+        {isModalOpen && (
           <div
             style={{
-              maxWidth: '80%',
-              maxHeight: '90%',
-              overflow: 'auto',
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              zIndex: 1000,
             }}
-            onClick={(e) => e.stopPropagation()} // 防止点击图片时也关闭遮罩层
+            onClick={handleModalClick}
           >
-            <img
-              src="https://img.alicdn.com/imgextra/i2/O1CN01OhhnzT1CtFbbiKTWq_!!6000000000138-0-tps-2792-1502.jpg"
-              alt="overview image"
-              style={{ maxWidth: '100%' }}
-            />
+            <div
+              style={{
+                maxWidth: '80%',
+                maxHeight: '90%',
+                overflow: 'auto',
+              }}
+              onClick={(e) => e.stopPropagation()} // 防止点击图片时也关闭遮罩层
+            >
+              <img
+                src="https://img.alicdn.com/imgextra/i2/O1CN01OhhnzT1CtFbbiKTWq_!!6000000000138-0-tps-2792-1502.jpg"
+                alt="overview image"
+                style={{ maxWidth: '100%' }}
+              />
+            </div>
           </div>
-        </div>
-      )}
+        )}
       </div>
     </AppContext.Provider>
   );

diff --git a/src/components/home/OverViewImage/utils.ts b/src/components/home/OverViewImage/utils.ts
@@ -222,13 +222,13 @@ export const hoverSCAData = {
       apiLink: "https://api.github.com/repos/alibaba/spring-cloud-alibaba",
     },
     官网: {
-      link: "https://spring.io/projects/spring-cloud-alibaba",
+      link: "https://sca.aliyun.com/",
     },
     最新版本: {
-      link: "https://github.com/alibaba/spring-cloud-alibaba/releases/tag/2021.0.4.0",
+      link: "https://sca.aliyun.com/docs/2023/overview/version-explain/",
     },
     快速入门: {
-      link: "https://github.com/alibaba/spring-cloud-alibaba/blob/2021.x/README-zh.md",
+      link: "https://sca.aliyun.com/docs/2023/user-guide/ai/quick-start/",
     },
     快速构建: {
       link: "https://start.aliyun.com/",
@@ -391,4 +391,26 @@ export const hoverOpenkruiseData = {
       link: "https://openkruise.io/zh/docs/installation",
     },
   },
+}
+
+export const hoveriLogtailData = {
+  title: "一款快速、轻量的可观测数据采集器。",
+  image:
+    "https://img.alicdn.com/imgextra/i4/O1CN01DkZf3V1cAWwyWl3PU_!!6000000003560-2-tps-372-80.png",
+  labels: ["可观测","日志","Metrics"],
+  links: {
+    Github: {
+      link: "https://github.com/alibaba/ilogtail",
+      apiLink: "https://api.github.com/repos/alibaba/ilogtail",
+    },
+    官网: {
+      link: "https://ilogtail.gitbook.io/ilogtail-docs",
+    },
+    最新版本: {
+      link: "https://github.com/alibaba/ilogtail/releases/tag/v1.8.8",
+    },
+    快速入门: {
+      link: "https://ilogtail.gitbook.io/ilogtail-docs/installation/quick-start",
+    },
+  },
 }