mirror of
https://github.com/WuKongIM/WuKongIMDocs
synced 2025-06-05 08:53:41 +00:00
Merge branch 'main' of https://github.com/WuKongIM/WuKongIMDocs
This commit is contained in:
commit
339f1dc80d
@ -1,5 +1,6 @@
|
|||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
import { usePrefersColor } from 'dumi/dist/client/theme-api/usePrefersColor';
|
import { usePrefersColor } from 'dumi/dist/client/theme-api/usePrefersColor';
|
||||||
|
|
||||||
const Home: any = () => {
|
const Home: any = () => {
|
||||||
@ -22,6 +23,63 @@ const Home: any = () => {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
var isPhone = true
|
||||||
|
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
|
||||||
|
isPhone = true
|
||||||
|
} else {
|
||||||
|
isPhone = false
|
||||||
|
}
|
||||||
|
|
||||||
|
var item1 = {
|
||||||
|
icon: './././imgs/ic_no_dependency.png',
|
||||||
|
title: '零依赖',
|
||||||
|
desc: '没有依赖任何第三方组件,部署简单,一条命令即可启动'
|
||||||
|
}
|
||||||
|
var item2 = {
|
||||||
|
icon: './././imgs/ic_self_developed.png',
|
||||||
|
title: '完全自研',
|
||||||
|
desc: '自研消息数据库,消息分区永久存储,自研二进制协议,支持自定义协议'
|
||||||
|
}
|
||||||
|
var item3 = {
|
||||||
|
icon: './././imgs/ic_secure.png',
|
||||||
|
title: '安全',
|
||||||
|
desc: '消息通道和消息内容全程加密,防中间人攻击和串改消息内容'
|
||||||
|
}
|
||||||
|
|
||||||
|
var item4 = {
|
||||||
|
icon: './././imgs/ic_function.png',
|
||||||
|
title: '功能强劲',
|
||||||
|
desc: 'MAC 笔记本单机测试 16w 多/秒的消息(包含存储)吞吐量,频道支持万人同时订阅'
|
||||||
|
}
|
||||||
|
|
||||||
|
var item5 = {
|
||||||
|
icon: './././imgs/ic_extend.png',
|
||||||
|
title: '扩展性强',
|
||||||
|
desc: '采用频道设计理念,目前支持群组频道,点对点频道,后续可以根据自己业务自定义频道可实现机器人频道,客服频道等等'
|
||||||
|
}
|
||||||
|
|
||||||
|
var item6 = {
|
||||||
|
icon: './././imgs/ic_compatibility.png',
|
||||||
|
title: '兼容性强',
|
||||||
|
desc: '同时无差别支持 tcp,websocket'
|
||||||
|
}
|
||||||
|
var list1 = []
|
||||||
|
var list2 = []
|
||||||
|
var list3 = []
|
||||||
|
|
||||||
|
list1.push(item1)
|
||||||
|
list1.push(item2)
|
||||||
|
if (!isPhone) {
|
||||||
|
list1.push(item3)
|
||||||
|
list2.push(item4)
|
||||||
|
list2.push(item5)
|
||||||
|
list2.push(item6)
|
||||||
|
} else {
|
||||||
|
list2.push(item3)
|
||||||
|
list2.push(item4)
|
||||||
|
list3.push(item5)
|
||||||
|
list3.push(item6)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="home-page">
|
<section className="home-page">
|
||||||
@ -43,42 +101,38 @@ const Home: any = () => {
|
|||||||
<div className={`card ${color}`}>
|
<div className={`card ${color}`}>
|
||||||
<div className='bg'>
|
<div className='bg'>
|
||||||
<label className="big-font">特性</label>
|
<label className="big-font">特性</label>
|
||||||
<div style={{ marginTop: '37px'}}>
|
<div style={{ marginTop: '37px', display: 'flex' }}>
|
||||||
<div style={{ display: 'flex' }}>
|
{
|
||||||
<div className='card-item'>
|
list1.map((item: any) =>
|
||||||
<img className="img" src='./././imgs/ic_no_dependency.png' />
|
<div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
|
||||||
<label className="characteristic-title">零依赖</label>
|
<img className="img" src={item.icon} />
|
||||||
<label className="characteristic-content">没有依赖任何第三方组件,部署简单,一条命令即可启动</label>
|
<label className="characteristic-title">{item.title}</label>
|
||||||
</div>
|
<label className="characteristic-content">{item.desc}</label>
|
||||||
<div className='card-item'>
|
</div>
|
||||||
<img className="img" src="./././imgs/ic_self_developed.png" />
|
)
|
||||||
<label className="characteristic-title">完全自研</label>
|
}
|
||||||
<label className="characteristic-content">自研消息数据库,消息分区永久存储,自研二进制协议,支持自定义协议</label>
|
</div>
|
||||||
</div>
|
<div style={{ display: 'flex' }}>
|
||||||
<div className='card-item'>
|
{
|
||||||
<img className="img" src="./././imgs/ic_secure.png" />
|
list2.map((item: any) =>
|
||||||
<label className="characteristic-title">安全</label>
|
<div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
|
||||||
<label className="characteristic-content">消息通道和消息内容全程加密,防中间人攻击和串改消息内容。</label>
|
<img className="img" src={item.icon} />
|
||||||
</div>
|
<label className="characteristic-title">{item.title}</label>
|
||||||
</div>
|
<label className="characteristic-content">{item.desc}</label>
|
||||||
<div style={{ display: 'flex', marginTop: '30px', paddingBottom: '30px' }}>
|
</div>
|
||||||
<div className='card-item'>
|
)
|
||||||
<img className="img" src="./././imgs/ic_function.png" />
|
}
|
||||||
<label className="characteristic-title">功能强劲</label>
|
</div>
|
||||||
<label className="characteristic-content">MAC 笔记本单机测试 16w 多/秒的消息(包含存储)吞吐量,频道支持万人同时订阅。</label>
|
<div style={{ display: 'flex' }} >
|
||||||
</div>
|
{
|
||||||
<div className='card-item'>
|
list3.map((item: any) =>
|
||||||
<img className="img" src="./././imgs/ic_extend.png" />
|
<div className='card-item' style={{ width: isPhone ? '50%' : '33.3%' }}>
|
||||||
<label className="characteristic-title">扩展性强</label>
|
<img className="img" src={item.icon} />
|
||||||
<label
|
<label className="characteristic-title">{item.title}</label>
|
||||||
className="characteristic-content">采用频道设计理念,目前支持群组频道,点对点频道,后续可以根据自己业务自定义频道可实现机器人频道,客服频道等等。</label>
|
<label className="characteristic-content">{item.desc}</label>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
@ -151,6 +151,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user