对接首页通知公告和友情链接和关于我们

2025-07-11 09:59:16 +08:00
parent 20145e4c51
commit 56c2af09c2
24 changed files with 194 additions and 89 deletions
--- a/config/proxy.ts
+++ b/config/proxy.ts
@ -7,7 +7,7 @@ export default {
    // },
    '/api': {
    //   target: 'http://10.0.0.125:18012',//测试环境
-      target: 'http://10.0.0.10:18012',//连接天宫的ng
+      target: 'http://10.0.0.10:18013',//连接天宫的ng
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/assets/img/logoWhite.png
+++ b/src/assets/img/logoWhite.png
--- a/src/global.less
+++ b/src/global.less
@ -24,7 +24,7 @@ body,
  // height: calc(100% - 60px);
  // overflow: auto;
  // padding: 15px 0;
-  background: rgba(@gray, 0.3);
+  background: #F9FAFB;
  .layout-content-main {
    width: @width;
    margin: 0 auto;
--- a/src/layouts/Footer.tsx
+++ b/src/layouts/Footer.tsx
@ -41,7 +41,7 @@ const Footer: React.FC = () => {
      <Divider style={{ borderColor: 'rgb(0,78,145)' }} />
      <div className="footer-content">
        <div className="copyright">
-          <img src={require('@/assets/logo.svg')} className="footerLogo" alt="" />
+          <img src={require('@/assets/img/logoWhite.png')} className="footerLogo" alt="" />
          <div className="copyright-text">
            <div className="copyright-text-item">
              <span>网站首页</span>
--- a/src/layouts/Header.less
+++ b/src/layouts/Header.less
@ -65,7 +65,7 @@
      align-items: center;
      justify-content: space-between;
      .footerLogo{
-        width: 80px;
+        height: 48px;
      }
      .copyright-text{
        text-align: right;
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@ -3,6 +3,7 @@ import notice from './en-US/notice';
 import help from './en-US/help';
 import policy from './en-US/policy';
 import register from './en-US/register';
+import home from './en-US/home';

 export default {
   'menu.首页': 'Home',
@ -66,4 +67,7 @@ export default {

  // Registration module
  ...register,
+
+  // Home module
+  ...home,
 };
--- a/src/locales/en-US/home.ts
+++ b/src/locales/en-US/home.ts
@ -0,0 +1,6 @@
+export default {
+  'home.data.contactsPhone': 'contactsPhoneEn',
+  'home.data.contactsEmail': 'contactsEmailEn',
+  'home.data.address': 'addressEn',
+  'home.data.addressEn': 'address',
+};
--- a/src/locales/en-US/notice.ts
+++ b/src/locales/en-US/notice.ts
@ -26,4 +26,9 @@ export default {
  'notice.message.getDetailFailed': 'Failed to get notification detail',
  'notice.message.getDetailError': 'Error getting notification detail, please try again later',
  'notice.message.idNotExist': 'Notice ID cannot be empty',
+
+  "notice.data.content": "contentEn",
+  "notice.data.title": "titleEn",
+  "notice.detail": "View Details",
+
 };
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@ -3,6 +3,7 @@ import notice from './zh-CN/notice';
 import help from './zh-CN/help';
 import policy from './zh-CN/policy';
 import register from './zh-CN/register';
+import home from './zh-CN/home';

 export default {
  'menu.首页': '首页',
@ -66,4 +67,7 @@ export default {

  // 注册模块
  ...register,
+
+  // Home module
+  ...home,
 };
--- a/src/locales/zh-CN/home.ts
+++ b/src/locales/zh-CN/home.ts
@ -0,0 +1,6 @@
+export default {
+  'home.data.contactsPhone': 'contactsPhone',
+  'home.data.contactsEmail': 'contactsEmail',
+  'home.data.address': 'address',
+  'home.data.addressEn': 'addressEn',
+};
--- a/src/locales/zh-CN/notice.ts
+++ b/src/locales/zh-CN/notice.ts
@ -26,4 +26,7 @@ export default {
  'notice.message.getDetailFailed': '获取通知详情失败',
  'notice.message.getDetailError': '获取通知详情出错，请稍后重试',
  'notice.message.idNotExist': '通知ID不能为空',
+  "notice.data.content": "content",
+  "notice.data.title": "title",
+  "notice.detail": "查看详情",
 };
--- a/src/pages/announce/announceInfo.tsx
+++ b/src/pages/announce/announceInfo.tsx
@ -121,7 +121,7 @@ const AnnounceInfo: React.FC = () => {
  }

  return (
-    <div className={styles.announceInfoContainer}>
+    <div className={`${styles.announceInfoContainer} layout-content-main`}>
      <div className={styles.announceInfoHeader}>
        <Button
          type="link"
--- a/src/pages/download/download.tsx
+++ b/src/pages/download/download.tsx
@ -104,7 +104,7 @@ const DownloadPage: React.FC = () => {
  };

  return (
-    <div className={styles.downloadContainer}>
+    <div className={`${styles.downloadContainer} layout-content-main`}>
      <Row gutter={16} className={styles.downloadRow}>
        <Col span={4} className={styles.menuCol}>
          <Menu
--- a/src/pages/help/help.less
+++ b/src/pages/help/help.less
@ -2,7 +2,7 @@
  width: 100%;
  min-height: calc(100vh - 200px);
  padding: 40px;
-  background-color: #f5f5f5;
+  // background-color: #f5f5f5;

  .help-header {
    display: flex;
--- a/src/pages/help/help.tsx
+++ b/src/pages/help/help.tsx
@ -108,7 +108,7 @@ const HelpPage: React.FC = () => {
  ];

  return (
-    <div className="help-container">
+    <div className="help-container layout-content-main">
      <div className="help-header">
        <Title level={2}>{intl.formatMessage({ id: 'help.title' })}</Title>
        <Button
--- a/src/pages/help/helpQuestion.tsx
+++ b/src/pages/help/helpQuestion.tsx
@ -123,7 +123,7 @@ const HelpQuestionPage: React.FC = () => {
  };

  return (
-    <div className={styles.helpQuestionContainer}>
+    <div className={`${styles.helpQuestionContainer} layout-content-main`}>
      <div className={styles.header}>
        <Button
          type="link"
--- a/src/pages/index/index.less
+++ b/src/pages/index/index.less
@ -31,43 +31,70 @@
 }
 .noticeList {
  padding: 10px 0;
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  .noticeName {
-    font-size: 18px;
+  .noticeTitle {
+    font-size: 22px;
    font-weight: 600;
-    color: @main-danger-color;
-    width: 50px;
-    line-height: 20px;
-    text-align: center;
+    color: @main-color;
+    padding: 10px 7px;
  }
  .noticeItem {
-    margin-right: 20px;
-    flex: 1;
-    width: 0;
-    .cardTitle {
+    background-color: #fff;
+    padding: 24px;
+    border-radius: 16px;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
+    height: 249px;
+    .title {
+      margin: 14px 0;
+      font-size: 20px;
+      font-weight: 600;
+      // 超过两行显示省略号
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      height: 63px;
+    }
+    .content{
+      font-size: 16px;
+      color: @main-text-color-2;
+      // 超过两行显示省略号
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .button{
+      color: @main-color;
+      font-size: 16px;
+      margin-top: 14px;
+      cursor: pointer;
+    }
+    .header {
      display: flex;
      justify-content: space-between;
-      .cardTitleText {
-        font-size: 18px;
-        font-weight: 600;
-        color: @main-color;
-        cursor: pointer;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      .cardTitleTime {
+      align-items: center;
+      .time {
+        font-size: 14px;
        color: @main-text-color-2;
      }
-    }
-    .cardContent {
-      color: @main-text-color-2;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      margin-bottom: 0;
+      .type {
+        display: inline-block;
+        background-color: @main-color;
+        color: #fff;
+        font-size: 12px;
+        padding: 4px 8px;
+        border-radius: 20px;
+        &.primary {
+          background-color: rgba(59, 130, 246, 0.1);
+          color: #3b82f6;
+        }
+        &.danger {
+          background-color: rgba(255, 77, 77, 0.1);
+          color: #ff4d4d;
+        }
+      }
    }
  }
 }
@ -136,7 +163,7 @@
      }
    }
  }
-  .search{
+  .search {
    height: 100%;
  }
 }
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@ -3,27 +3,24 @@ import { Card, Row, Col, Tabs, Table, Button, Space } from 'antd';
 import { useIntl, Link, history } from 'umi';
 import './index.less';
 import IconFont from '@/components/IconFont/IconFont';
-import LinkComponent from './Link';
 import Search from '../announce/Search';
 import type { SearchFormData } from '../announce/Search';
+// 获取友情链接
+import { getCoscoPortalsLinksFriendshipConnections } from '@/servers/api';
+// 获取关于我们
+import { getAboutUs } from '@/servers/api/about';
+// 获取通知公告
+import { getNoticeList } from '@/servers/api/notice';
+import { filterHtmlTag } from '@/utils/utils';
 const IndexPage: React.FC = () => {
  const intl = useIntl();
  const [noticeLoading, setNoticeLoading] = useState(false);
-  const [noticeList, setNoticeList] = useState([
-    {
-      title: 'CA使用通知',
-      id: '1',
-      content: '系统将于2022年5月27日期开始对全流程使用CA服务，届时全部投标供应商需办理CA。',
-      time: '2022-05-27',
-    },
-    {
-      title: '5月27日系统优化升级通知',
-      id: '2',
-      content:
-        '系统将于2022年5月27日（周五）22:00--2022年5月28日（周六）6:00进行系统优化升级，届时系统将暂停服务。',
-      time: '2022-05-27',
-    },
-  ]);
+  // 友情链接
+  const [friendshipConnections, setFriendshipConnections] = useState<API.CoscoPortalsLinks[]>([]);
+  // 关于我们
+  const [aboutUs, setAboutUs] = useState<API.AboutUsData>({});
+  // 通知公告
+  const [noticeList, setNoticeList] = useState<API.NoticeRecord[]>([]);
  const typeList = [
    {
      key: '1',
@ -132,6 +129,24 @@ const IndexPage: React.FC = () => {
    },
  ];

+  useEffect(() => {
+    // 友情链接
+    getCoscoPortalsLinksFriendshipConnections().then((res) => {
+      setFriendshipConnections(res.data);
+    });
+    // 关于我们
+    getAboutUs().then((res) => {
+      setAboutUs(res.data);
+    });
+    // 通知公告
+    getNoticeList({
+      pageNo: '1',
+      pageSize: '4',
+    }).then((res) => {
+      setNoticeList(res.data.records);
+    });
+  }, []);
+
  const toSystem = (type: string) => {
    console.log(type);
    history.push({
@ -171,29 +186,7 @@ const IndexPage: React.FC = () => {
  return (
    <div>
      <img className="banner" src={require('@/assets/img/banner.jpg')} alt="" />
-      {/* 通知列表 */}
-      <div className="noticeList layout-content-main">
-        <div className="noticeName">通知公告</div>
-        {noticeList.map((item) => (
-          <div className="noticeItem" key={item.id}>
-            <div className="cardTitle">
-              <span
-                className="cardTitleText"
-                onClick={() => {
-                  history.push({
-                    pathname: '/announce/announceInfo',
-                    search: '?id=' + item.id,
-                  });
-                }}
-              >
-                {item.title}
-              </span>
-              <span className="cardTitleTime">{item.time}</span>
-            </div>
-            <p className="cardContent">{item.content}</p>
-          </div>
-        ))}
-      </div>
+
      <div className="loginType">
        <div className="layout-content-main">
          <Row gutter={20}>
@ -248,6 +241,50 @@ const IndexPage: React.FC = () => {
          </Row>
        </div>
      </div>
+
+      {/* 通知列表 */}
+      <div className="noticeList">
+        <div className="layout-content-main">
+          <div className="noticeTitle">
+            通知公告
+          </div>
+          <Row gutter={32}>
+            {noticeList.map((item) => (
+              <Col span={6} key={item.id}>
+                <div className="noticeItem" >
+                  <div className='header'>
+                    <span className='time'>{item.publishTime}</span>
+                    <span className={`type ${item.columnType === 'notice' ? 'primary' : 'danger'}`}>{item.columnType === 'notice' ? '公告' : '通知'}</span>
+                  </div>
+                  <div className='title'>{item[intl.formatMessage({ id: 'notice.data.title' }) as keyof typeof item]}</div>
+                  <div className='content'>{filterHtmlTag(item[intl.formatMessage({ id: 'notice.data.content' }) as keyof typeof item] || '')}</div>
+                  <div className="button" onClick={() => {
+                    history.push({
+                      pathname: '/announce/announceInfo',
+                      search: '?id=' + item.id,
+                    });
+                  }}>{intl.formatMessage({ id: 'notice.detail' })}&gt;</div>
+                  {/* <div className="cardTitle">
+                    <span
+                      className="cardTitleText"
+                      onClick={() => {
+                        history.push({
+                          pathname: '/announce/announceInfo',
+                          search: '?id=' + item.id,
+                        });
+                      }}
+                    >
+                      {item.title}
+                    </span>
+                    <span className="cardTitleTime">{item.time}</span>
+                  </div> */}
+                  {/* <p className="cardContent">{item.content}</p> */}
+                </div>
+              </Col>
+            ))}
+          </Row>
+        </div>
+      </div>
      <div className="layout-content-main announce">
        <Row gutter={40}>
          <Col span={5}>
@ -293,20 +330,21 @@ const IndexPage: React.FC = () => {
        <div className="layout-content-main">
          <Row gutter={40}>
            <Col span={16}>
-              <div className="blockTitle">问题咨询</div>
+              <div className="blockTitle">问题咨询方式</div>
              <div className="borderBox">
+                {/* addressImg */}
                <img src={require('@/assets/img/location.png')} alt="" />
                <div className="questionItem">
                  <IconFont type="icon-dizhi" className="icon" />
-                  北京市前门大街173号
+                  {aboutUs[intl.formatMessage({ id: 'home.data.address' })]}
                </div>
                <div className="questionItem">
                  <IconFont type="icon-dianhua" className="icon" />
-                  17676373746
+                  {aboutUs[intl.formatMessage({ id: 'home.data.contactsPhone' })]}
                </div>
                <div className="questionItem">
                  <IconFont type="icon-youxiang" className="icon" />
-                  i723648723@383.com
+                  {aboutUs[intl.formatMessage({ id: 'home.data.contactsEmail' })]}
                </div>
              </div>
            </Col>
@ -343,9 +381,9 @@ const IndexPage: React.FC = () => {
        <div className="layout-content-main">
          <div className="linkTitle">友情链接</div>
          <Card>
-            {Array.from({ length: 12 }).map((item, index) => (
-              <Card.Grid key={index} style={{ width: '16.6667%', height: '130px' }}>
-                <img src={require('@/assets/img/banner.jpg')} alt="" />
+            {friendshipConnections.map((item, index) => (
+              <Card.Grid key={item.id} style={{ width: '16.6667%', height: '130px' }}>
+                <img src={item.url} alt="" />
              </Card.Grid>
            ))}
          </Card>
--- a/src/pages/notice/notice.tsx
+++ b/src/pages/notice/notice.tsx
@ -120,7 +120,7 @@ const NoticePage: React.FC = () => {
  ];

  return (
-    <div className={styles.noticeContainer}>
+    <div className={`${styles.noticeContainer} layout-content-main`}>
      <Row gutter={10} className={styles.noticeRow}>
        <Col span={3} className={styles.menuCol}>
          <Menu
--- a/src/pages/policy/policy.tsx
+++ b/src/pages/policy/policy.tsx
@ -93,7 +93,7 @@ const PolicyPage: React.FC = () => {
  ];

  return (
-    <div className={styles.policyContainer}>
+    <div className={`${styles.policyContainer} layout-content-main`}>
      <div className={styles.policyTable}>
        <ConfigProvider
          renderEmpty={() => (
--- a/src/servers/api/about.ts
+++ b/src/servers/api/about.ts
@ -3,6 +3,6 @@ import request from '@/utils/request';
 /**
 * 获取关于我们信息
 */
-export async function getAboutUs(): Promise<API.Response<API.AboutUsData>> {
+export async function getAboutUs(): Promise<API.APIResponse<API.AboutUsData>> {
  return request('/homePage/getAboutUs');
 }
--- a/src/servers/api/index.ts
+++ b/src/servers/api/index.ts
@ -1,8 +1,16 @@
 // 首页api

+// 查询友情链接分类及链接
 import request from '@/utils/request';
 export async function getCoscoPortalsLinksClassification() {
  return request<API.APIResponse<API.CoscoPortalsLinksClassification>>('/homePage/coscoPortalsLinksClassification/getAll', {
    method: 'get',
  });
 }
+
+// 查询友情链接12个 /homePage/coscoPortalsLinks/friendshipConnections
+export async function getCoscoPortalsLinksFriendshipConnections() {
+  return request<API.APIResponse<API.CoscoPortalsLinks[]>>('/homePage/coscoPortalsLinks/friendshipConnections', {
+    method: 'get',
+  });
+}
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -33,3 +33,7 @@ export const validateFileSize = (file: File, maxSize: number,type: string[]) =>
  }
  return isValidFormat && isLtMaxSize;
 };
+// 过滤html标签正则工具
+export const filterHtmlTag = (html: string) => {
+  return html.replace(/<[^>]*>?/g, '');
+};