feat: 习惯官网

.dumi/pages/index.tsx

@@ -0,0 +1,75 @@
+import React, { useRef } from 'react';
+import './style.scss';
+import { usePrefersColor } from 'dumi/dist/client/theme-api/usePrefersColor';
+
+const Home: any = () => {
+    document.title = '悟空IM';
+    const ref = useRef<HTMLDivElement>(null);
+    const [color] = usePrefersColor();
+    return (
+        <section className="home-page">
+            <div className="banner">
+              
+                <div className={`content ${color}`} style={{backgroundImage:'url(./././imgs/ic_bg.png)'}}>
+               
+                    <label className="center-title">悟空IM</label>
+                    <label className="center-small-text">让信息传递更简单</label>
+                    <div className={`btn-view ${color}`}>
+                        <a href="/guide" className="btn">立即上手</a>
+                        <a style={{ marginLeft: '30px' }} target="_blank" href="https://github.com/WuKongIM/WuKongIM"
+                            className="btn">Github</a>
+                    </div>
+                    <p className="content-text">悟空IM是高性能通用即时通讯服务，支持聊天应用，消息推送，物联网通讯，音视频信令，直播弹幕，客服系统，AI 通讯，即时社区等场景。</p>
+                </div>
+
+                <div className="des">
+                    <div className={`card ${color}`}>
+                        <div className='bg'>
+                            <label className="big-font">特性</label>
+                            <div style={{ marginTop: '37px', marginLeft: '50px', marginRight: '50px' }}>
+                                <div style={{ display: 'flex' }}>
+                                    <div className='card-item'>
+                                        <img className="img" src='./././imgs/ic_no_dependency.png' />
+                                        <label className="characteristic-title">零依赖</label>
+                                        <label className="characteristic-content">没有依赖任何第三方组件，部署简单，一条命令即可启动</label>
+                                    </div>
+                                    <div className='card-item'>
+                                        <img className="img" src="./././imgs/ic_self_developed.png" />
+                                        <label className="characteristic-title">完全自研</label>
+                                        <label className="characteristic-content">自研消息数据库，消息分区永久存储，自研二进制协议，支持自定义协议</label>
+                                    </div>
+                                    <div className='card-item'>
+                                        <img className="img" src="./././imgs/ic_secure.png" />
+                                        <label className="characteristic-title">安全</label>
+                                        <label className="characteristic-content">消息通道和消息内容全程加密，防中间人攻击和串改消息内容。</label>
+                                    </div>
+                                </div>
+                                <div style={{ display: 'flex', marginTop: '30px', paddingBottom: '30px' }}>
+                                    <div className='card-item'>
+                                        <img className="img" src="./././imgs/ic_function.png" />
+                                        <label className="characteristic-title">功能强劲</label>
+                                        <label className="characteristic-content">MAC 笔记本单机测试 16w 多/秒的消息(包含存储)吞吐量，频道支持万人同时订阅。</label>
+                                    </div>
+                                    <div className='card-item'>
+                                        <img className="img" src="./././imgs/ic_extend.png" />
+                                        <label className="characteristic-title">扩展性强</label>
+                                        <label
+                                            className="characteristic-content">采用频道设计理念，目前支持群组频道，点对点频道，后续可以根据自己业务自定义频道可实现机器人频道，客服频道等等。</label>
+                                    </div>
+                                    <div className='card-item'>
+                                        <img className="img" src="./././imgs/ic_compatibility.png" />
+                                        <label className="characteristic-title">兼容性强</label>
+                                        <label className="characteristic-content">同时无差别支持 tcp，websocket</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+    );
+};
+
+export default Home;

.dumi/pages/style.scss

@@ -0,0 +1,162 @@
+.home-page {
+  font-size: 14px;
+
+  .banner {
+    max-width: calc(100% - 80px);
+    margin-right: auto;
+    margin-left: auto;
+
+    a {
+      text-decoration: none;
+      list-style: none;
+      background-color: transparent;
+      outline: none;
+      cursor: pointer;
+    }
+
+    .center-title {
+      font-weight: bold;
+      font-size: 100px;
+      margin-top: 10%;
+      display: block;
+      align-content: center;
+    }
+
+    .center-small-text {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+    }
+
+    .des {
+      margin-top: -150px;
+      position: inherit;
+      text-align: center;
+      margin-left: 15%;
+      width: 70%;
+    }
+
+    .content {
+      display: flow-root;
+      text-align: center;
+      width: 100%;
+      height: 100vh;
+      background-repeat: repeat;
+      background-position: 50%;
+
+      .content-text {
+        font-size: 14px;
+        padding-top: 62px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        line-height: 20px;
+        margin-left: 30%;
+        color: #000;
+        margin-right: 30%;
+      }
+
+      &.dark {
+        .content-text {
+          color: #8590a0;
+        }
+      }
+    }
+  }
+
+  .btn-view {
+    margin-top: 50px;
+
+    .btn {
+      cursor: pointer;
+      text-decoration: none;
+      -moz-border-radius: 4px;
+      /*Gecko(Firefox内核)浏览器圆角样式*/
+      -webkit-border-radius: 30px;
+      /*webkit(Chrome内核)浏览器圆角样式*/
+      border-radius: 30px;
+      /*Trident(IE内核)浏览器圆角样式*/
+      color: #df5d2a !important;
+      background: #fff;
+      padding: 8px 18px 8px 18px !important;
+      border: 1px solid #df5d2a;
+    }
+
+    &.dark {
+      .btn {
+        color: #9f4522 !important;
+        background: #141414;
+        border: 1px solid #9f4522;
+      }
+    }
+  }
+
+  .card {
+    .bg {
+      background: #fff !important;
+      box-shadow: 0px 0px 100px 1PX #f8f8f7;
+    }
+
+    .card-item {
+      display: inline-block;
+      text-align: center;
+      width: 33.33%;
+    }
+
+    .img {
+      width: 100px;
+      height: 100px;
+    }
+
+    .big-font {
+      display: block;
+      padding-top: 40px;
+      font-size: 30px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      line-height: 42px;
+    }
+
+    .characteristic-title {
+      font-size: 14px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      margin-top: 10px;
+      color: #333333;
+      display: block;
+      line-height: 20px;
+    }
+
+
+    .characteristic-content {
+      font-size: 12px;
+      display: block;
+      margin-left: 20px;
+      margin-right: 20px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #999999;
+      line-height: 17px;
+      margin-top: 5px;
+    }
+
+    &.dark {
+      .bg {
+        background: #0a0909 !important;
+        box-shadow: 0px 0px 100px 1PX #282828;
+      }
+
+      .big-font {
+        color: #fff;
+      }
+
+      .characteristic-title {
+        color: #d1d0d0;
+      }
+
+      .characteristic-content {
+        color: #8590a0;
+      }
+    }
+  }
+}

.dumirc.ts

@@ -4,6 +4,10 @@ export default defineConfig({
   themeConfig: {
     logo: '/logo.png',
     name: '悟空IM',
+    hd: { rules: [] },
+    socialLinks: {
+      github: 'https://github.com/WuKongIM/WuKongIM',
+    },
     footer: "Copyright © 2023 | Powered by 悟空IM | <a href='https://beian.miit.gov.cn/' style='color:gray'>ICP备案号：沪ICP备2021032718号-2</a>",
   },
   headScripts: ["https://hm.baidu.com/hm.js?219604efa41d5fcab346766087ead60a"] // 百度统计

docs/index.md

@@ -1,4 +1,4 @@
----
+<!-- ---
 title: 悟空IM
 hero:
   title: 悟空IM
@@ -22,4 +22,5 @@ hero:
 #     emoji: 🚀
 #     description: Put ! description here
 footer: Open-source Apache 2.0 Licensed | Copyright © 2020<br />Powered by 上海信必达网络科技
----
+--- -->
+<!-- <embed src="./index.html"></embed> -->

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "jsx": "react",
+    "jsx": "react",
     "strict": true,
     "skipLibCheck": true,
     "esModuleInterop": true,