feat(site/blog): add projects infomation

site/blog/app/projects/ism-analysis/PicGallery.tsx → site/blog/app/projects/components/PicGallery.tsx

@@ -1,5 +1,7 @@
 "use client";
 import { useEffect } from "react";
+import Image from "next/image";
+
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import "photoswipe/style.css";
 
@@ -36,8 +38,9 @@ export default function PicGallery(props: PicGalleryProps) {
           key={props.id + "-" + index}
           target="_blank"
           rel="noreferrer"
+          className="relative aspect-[1/0.618]"
         >
-          <img src={image.thumbnail} alt="" />
+          <Image className="rounded" fill src={image.thumbnail} alt={props.id + "-" + index} />
         </a>
       ))}
     </div>

site/blog/app/projects/constant/projects.ts

@@ -18,11 +18,13 @@ export default [
     date: "202204",
   },
   {
-    key: "202210",
+    key: "kupo-monitor",
     name: "事中监控平台",
     labels: ["react", "antd", "antv"],
     icons: ["i-logos:react", "i-logos:antd", "i-logos:antv"],
     desc: "针对金融机构提供对各类金融活动产生的的事件进行监控管理降低业务风险。提供针对事件的预警管理、案件管理，以及黑白名单、规则引挚、策略包、数据看盘等方面功能。",
+    href: "projects/kupo-monitor",
+    date: "202210",
   },
   {
     key: "health-questionnaire",

site/blog/app/projects/ism-analysis/page.tsx

@@ -1,13 +1,14 @@
 import Footer from "@/app/components/Footer";
 import seo from "@/utils/seo";
+import Image from "next/image";
 
-import PicGallery from "./PicGallery";
+import PicGallery from "../components/PicGallery";
 
 export async function generateMetadata() {
   return seo({ title: "Projects" });
 }
 
-const pic_url = "/images/projects/ism-analysis/IMG_3008.jpg";
+const pic_url = "/images/projects/kupo-ism-analysis/IMG_3008.jpg";
 
 export default function Preview() {
   return (
@@ -17,6 +18,13 @@ export default function Preview() {
         <p>
           关注于银行金融方面规章制度的自动解析与分析，便于相关人员快速掌握规章制度。提供对制度的导入、解析、分词、标注、核对、图谱生成、对比等方面的支持。
         </p>
+        <h4>所用技术</h4>
+        <div>
+          react@^18、antd@^4、@ant-design/pro-components@^2、@antv/g6@^v4、@antv/g2@^4、umi@^4、less、
+          <a href="https://github.com/nlplab/brat" target="_blank">
+            brat
+          </a>
+        </div>
 
         <h4>项目展示</h4>
         <PicGallery
@@ -32,6 +40,13 @@ export default function Preview() {
             { url: pic_url, thumbnail: pic_url, width: 1600, height: 1200 },
           ]}
         />
+
+        <h4>前端架构</h4>
+        <div className="relative aspect-auto">
+          <img src="/images/projects/kupo-ism-analysis/architecture-diagram.jpeg" />
+        </div>
+        <h4>核心流程-图谱管理</h4>
+        <img src="/images/projects/kupo-ism-analysis/graph-management-flowchart.jpeg" />
       </div>
       <Footer className="prose mx-auto" />
     </>

site/blog/app/projects/kupo-monitor/page.tsx

@@ -0,0 +1,57 @@
+import Footer from "@/app/components/Footer";
+import seo from "@/utils/seo";
+import Image from "next/image";
+
+import PicGallery from "../components/PicGallery";
+
+export async function generateMetadata() {
+  return seo({ title: "Projects" });
+}
+
+const pic_url01 = "/images/projects/kupo-monitor/monitor-01.png";
+const pic_url02 = "/images/projects/kupo-monitor/monitor-02.png";
+const pic_url03 = "/images/projects/kupo-monitor/monitor-03.png";
+const pic_url04 = "/images/projects/kupo-monitor/monitor-04.png";
+const pic_url05 = "/images/projects/kupo-monitor/monitor-05.png";
+const pic_url06 = "/images/projects/kupo-monitor/monitor-06.png";
+const pic_urlDashboard = "/images/projects/kupo-monitor/monitor-dashboard.png";
+const pic_url08 = "/images/projects/kupo-monitor/rule-01.png";
+const pic_url09 = "/images/projects/kupo-monitor/rule-02.png";
+const pic_url10 = "/images/projects/kupo-monitor/rule-03.png";
+const pic_url11 = "/images/projects/kupo-monitor/rule-04.png";
+
+export default function Preview() {
+  return (
+    <>
+      <div className="prose mx-auto">
+        <h3>事中监控平台</h3>
+        <p>
+          针对金融机构提供对各类金融活动产生的的事件进行监控管理降低业务风险。提供针对事件的预警管理、案件管理，以及黑白名单、规则引挚、策略包、数据看盘等方面功能。
+        </p>
+        <h4>所用技术</h4>
+        <div>
+          react@^18、antd@^4、@ant-design/pro-components@^2、@antv/g6@^v4、@antv/g2@^4、@antv/l7@^4、umi@^4、less、qiankun
+        </div>
+
+        <h4>项目展示</h4>
+        <PicGallery
+          id="kupo-monitor"
+          images={[
+            { url: pic_url01, thumbnail: pic_url01, width: 1920, height: 946 },
+            { url: pic_url02, thumbnail: pic_url02, width: 1920, height: 946 },
+            { url: pic_url03, thumbnail: pic_url03, width: 1920, height: 946 },
+            { url: pic_url04, thumbnail: pic_url04, width: 1920, height: 946 },
+            { url: pic_url05, thumbnail: pic_url05, width: 1920, height: 946 },
+            { url: pic_url06, thumbnail: pic_url06, width: 1920, height: 946 },
+            { url: pic_urlDashboard, thumbnail: pic_urlDashboard, width: 1920, height: 1470 },
+            { url: pic_url08, thumbnail: pic_url08, width: 1920, height: 946 },
+            { url: pic_url09, thumbnail: pic_url09, width: 1920, height: 946 },
+            { url: pic_url10, thumbnail: pic_url10, width: 1920, height: 946 },
+            { url: pic_url11, thumbnail: pic_url11, width: 1920, height: 946 },
+          ]}
+        />
+      </div>
+      <Footer className="prose mx-auto" />
+    </>
+  );
+}