Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!2714 改进:公告UI界面优化&组件依赖放入组件库

Browse Source
pull/2850/MERGE
彭泽 3 months ago committed by ChenX
parent 230122383c
commit 4b17042b7c
8 changed files with 147 additions and 47 deletions
Show Stats Download Patch File Download Diff File

4
config/webpack.dll.ts
Unescape View File

@ -22,6 +22,10 @@ const vendors = [
"react-split",
"js-angusj-clipper/web",
"react-window",
"react-markdown",
"react-zmage",
"remark-gfm",
"swiper",
//如果你想调试threejs的代码,那么你应该注释掉下面的代码,然后重新构建dll
"three",
"three/examples/jsm/loaders/FBXLoader",

1
package.json
Unescape View File

@ -135,6 +135,7 @@
"stats.js": "^0.17.0",
"swiper": "6.8.4",
"three": "npm:three-cf@0.122.6",
"swiper": "6.8.4",
"xaop": "^2.1.0"
},
"resolutions": {

3
src/Common/HostUrl.ts
Unescape View File

@ -208,4 +208,5 @@ export const PrivateModule = {
export const FBXURL = CURRENT_HOST + "/CAD-ossUploadSign";
//通知
export const NOTICE = CURRENT_HOST + "/CAD-notices";
export const NOTICE = CURRENT_HOST + "/CAD-notices"; //通知得公告数据
export const NOTICEPNG = ResourcesCDN_HOST + "/Notice.png";//通知得头部LOGO

67
src/Notice/NoticeBody.tsx
Unescape View File

@ -8,7 +8,7 @@ import SwiperCore, { Autoplay, Navigation, Pagination } from 'swiper/core';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';
import { CURRENT_HOST } from "../Common/HostUrl";
import { CURRENT_HOST, NOTICEPNG } from "../Common/HostUrl";
import { NoticeGroup, TabsExampleState } from "./NoticeGroup";
SwiperCore.use([Autoplay, Pagination, Navigation]);
export class NoticeBody extends React.Component<NoticeGroup, TabsExampleState, {}>
@ -18,15 +18,16 @@ export class NoticeBody extends React.Component<NoticeGroup, TabsExampleState, {
animate: true,
navbarTabId: 1,
};
render()
{
return (
<div>
{
<div id="Notice">
<div><h3 style={{ margin: "0 0 5px 0", textAlign: "center" }}>通知公告</h3></div>
<div style={{ width: "650px", height: "400px" }}>
<div>
<img className="backGround" src={NOTICEPNG} alt="" />
</div>
<div style={{ width: "650px", height: "300px" }}>
<Tabs id="TabsExample" selectedTabId={this.state.navbarTabId} animate
key="vertical"
renderActiveTabPanelOnly
@ -49,50 +50,65 @@ export class NoticeBody extends React.Component<NoticeGroup, TabsExampleState, {
}
// 通知
const Notice: FC<NoticeGroup> = observer(({ data }) =>
<div>
</div>
);
const Message: FC<NoticeGroup> = observer(({ data }) =>
<div style={{ height: "100%" }}>
<div >
<div>
<div style={{ marginLeft: "15px" }}>
{
data.map((data) =>
{
// 纯文字
if (Number(data.notice_type) == 1)
{
return Number(data.notice_type) == 1 && <div style={{ marginTop: "10px", whiteSpace: "pre-wrap" }}>{data.notice_content}</div>;
return <div>
<div className="update">
<h2 style={{ fontWeight: "600", }}>功能更新</h2>
<span className="date">{data.update_date}</span>
</div>
<div style={{ marginTop: "10px", whiteSpace: "pre-wrap" }}>{data.notice_content}</div>
</div>;
}
// 纯图片
if (Number(data.notice_type) == 2)
{
let Img = JSON.parse(data.notice_content);
let img = JSON.parse(data.notice_content);
let imgstr = [];
for (let Imginfo of Object.keys(Img))
for (let Imginfo of Object.keys(img))
{
imgstr.push(<Zmage src={`${CURRENT_HOST}/${Img[Imginfo]}`} alt="" />);
imgstr.push(<Zmage src={`${CURRENT_HOST}/${img[Imginfo]}`} alt="" />);
}
return imgstr;
return <div>
<div className="update">
<h2 style={{ fontWeight: "600" }}>功能更新</h2>
<span className="date">{data.update_date}</span>
</div>{imgstr}
</div>;
}
// 图文模式
if (Number(data.notice_type) == 3)
{
return <div className="Markdown"><ReactMarkdown remarkPlugins={[gfm]}>{data.notice_content}</ReactMarkdown></div>;
return <div className="Markdown">
<div className="update">
<h2 style={{ fontWeight: "600" }}>功能更新</h2>
<span className="date">{data.update_date}</span>
</div><ReactMarkdown remarkPlugins={[gfm]}>{data.notice_content}</ReactMarkdown>
</div>;
}
// 轮播图
if (Number(data.notice_type) == 4)
{
let Swipers = JSON.parse(data.notice_content);
let swipers = JSON.parse(data.notice_content);
let swiper = [];
for (let Swiperinfo of Object.keys(Swipers))
for (let Swiperinfo of Object.keys(swipers))
{
swiper.push(<SwiperSlide className="NoticeImg">
<Zmage zoomOptions={{ maxZoom: 5, minZoom: 1 }} style={{ maxWidth: '100%', minWidth: '0' }} src={`${CURRENT_HOST}/${Swipers[Swiperinfo]}`} alt="" />
<Zmage zoomOptions={{ maxZoom: 5, minZoom: 1 }} style={{ maxWidth: '100%', minWidth: '0' }} src={`${CURRENT_HOST}/${swipers[Swiperinfo]}`} alt="" />
</SwiperSlide>);
}
return <Swiper
return <div>
<div className="update">
<h2 style={{ fontWeight: "600" }}>功能更新</h2>
<span className="date">{data.update_date}</span>
</div><Swiper
spaceBetween={50}
slidesPerView={1}
pagination={{
@ -102,8 +118,7 @@ const Message: FC<NoticeGroup> = observer(({ data }) =>
scrollbar={{ draggable: true }}
>
{swiper}
</Swiper>;
</Swiper></div>;
}
//视频
if (Number(data.notice_type) == 5)
@ -114,7 +129,11 @@ const Message: FC<NoticeGroup> = observer(({ data }) =>
{
video.push(<video style={{ width: "100%" }} controls src={`${Video[VideoInfo]}`}></video>);
}
return video;
return <div>
<div className="update">
<h2 style={{ fontWeight: "600" }}>功能更新</h2>
<span className="date">{data.update_date}</span>
</div>{video}</div>;
}
})
}

1
src/Notice/NoticeGroup.tsx
Unescape View File

@ -15,6 +15,7 @@ interface NoticeProp
notice_group_type: string; //通知群组类型
notice_group: string; //通知群组
notice_content: string; //通知内容
update_date: string; //通知日期
}
export interface TabsExampleState

4
src/UI/Components/MainContent/Login.tsx
Unescape View File

@ -74,7 +74,8 @@ export function saveLoginInfos(data: IResponseData)
@inject('store')
@observer
export default class Login extends React.Component<{ store?: TopPanelStore; }, ILoginState> {
export default class Login extends React.Component<{ store?: TopPanelStore; }, ILoginState>
{
@observable isLoginIng = false;
@ -189,6 +190,7 @@ export default class Login extends React.Component<{ store?: TopPanelStore; }, I
});
}
}
this.isLoginIng = false;
};
render()

15
src/UI/Css/golden.less
Unescape View File

@ -318,4 +318,19 @@
.styleWithTheme {
background-color: @fileName_bg;
}
//公告
#Notice {
.bp3-tab-list {
background-color: @fileName_bg;
}
.bp3-tabs {
.bp3-tab-panel {
background-color: @fileName_bg ;
}
}
}
}

81
src/UI/Css/style.less
Unescape View File

@ -1107,8 +1107,11 @@ img {
//-------通知样式开始----------
.bp3-toast {
max-width: 700px;
max-height: 350px;
overflow: hidden;
.bp3-button-group {
padding: 0px !important;
margin-left: -10px;
}
#Notice {
min-height: 200px;
@ -1119,6 +1122,18 @@ img {
float: left;
}
.swiper-container-pointer-events {
height: 280px !important;
}
.backGround {
width: 100%;
height: 80px;
background-image: url(https://cdn.qicad.com/banner.webp);
background-size: cover;
background-position: center;
}
.bp3-running-text table th,
table.bp3-html-table th,
.bp3-running-text table td,
@ -1130,13 +1145,25 @@ img {
}
.bp3-tab-list {
height: 350px;
overflow: scroll;
height: 300px;
margin-top: 5px;
background-color: #fff;
overflow: auto;
border-radius: 5px;
>*:not(:last-child) {
margin-right: 0px !important;
}
.bp3-tab-indicator-wrapper {
width: 100px;
}
}
.bp3-tabs {
width: 650px;
height: 250px;
height: 300px;
position: relative;
.Markdown a {
@ -1145,14 +1172,47 @@ img {
}
.bp3-tab-panel {
height: 300px !important;
overflow: scroll;
height: 290px !important;
width: 100%;
padding-left: 0px !important;
margin: 10px 0 0 20px;
background-color: #fff;
border-radius: 5px;
overflow: auto;
.update {
display: flex;
border-bottom: 1px solid #ccc;
justify-content: space-between;
.date {
line-height: 60px;
margin-right: 10px;
}
}
.Markdown {
.update {
display: flex;
border-bottom: 1px solid #ccc;
justify-content: space-between;
.date {
line-height: 60px;
margin-right: 10px;
}
}
}
.swiper-pagination-bullets {
left: -60px;
}
}
.bp3-tab {
width: 100px;
text-align: center;
margin-top: 5px;
}
}
@ -1161,12 +1221,9 @@ img {
}
.NoticeImg {
max-width: 100%;
min-width: 0;
img {
width: auto;
height: auto;
width: 600px;
height: 280px;
}
}

Write Preview
Loading…
Cancel
Save