Merge branch 'master' into 3.4

src/Column/ColumnDetail.tsx

@@ -48,32 +48,31 @@ const ColumnDetail: React.FC<IColumnDetailProps> = props => {
     refreshArcticleDetail()
   }
   const formatRender = (data: IColumnDetail) => {
-    if (data.HasPermission && data.HasPermission !== ColumnHasPermissionType.OK) {
+    if (data.HasPermission && data.HasPermission !== ColumnHasPermissionType.OK && !data?.IsShowWxPay) {
       return (
         <div className={styles['art-nopower-bg']}>
-          {data?.IsShowWxPay && !media.isSmallMax ? ( // 暂时这么写
+          {/* {data?.IsShowWxPay && !media.isSmallMax ? ( // 暂时这么写
             <PayNoPermission
               dataInfo={data as IColumnDetail}
               tryType={ITryType.YanxuanSpecial}
               border={true}
               onRefresh={handleToRefresh}
             />
-          ) : (
-            <NoPermission
-              hasPermission={data?.HasPermission}
-              detailID={data.Id}
-              specialType={ISpecialType.YanxuanSpecial}
-              tryType={ITryType.YanxuanSpecial}
-              border={true}
-            />
-          )}
+          ) : ( */}
+          <NoPermission
+            hasPermission={data?.HasPermission}
+            detailID={data.Id}
+            specialType={ISpecialType.YanxuanSpecial}
+            tryType={ITryType.YanxuanSpecial}
+            border={true}
+          />
         </div>
       )
     }
     if (login2p.userInfo?.UserId === data.UserId || data.IsApprovalAdmin || data.Status === 3) {
       return (
         <div className={`${styles['columndetail-page']}`}>
-          <ColumnContent detail={data as IColumnDetail} onCollect={handleToRefresh} />
+          <ColumnContent detail={data as IColumnDetail} onCollect={handleToRefresh} handleToRefresh={handleToRefresh} />
         </div>
       )
     }
@@ -89,7 +88,7 @@ const ColumnDetail: React.FC<IColumnDetailProps> = props => {
       <ValidateEmpty loading={loading} data={data}>
         {data && formatRender(data)}
       </ValidateEmpty>
-      {data?.Status === 3 && (
+      {data?.Status === 3 && data.HasPermission === ColumnHasPermissionType.OK && (
         <div className={`${styles['statement-wrapper']}`}>
           <strong>郑重声明：</strong>
           <p>

src/Column/components/ColumnContent.tsx

@@ -14,6 +14,8 @@ import { FilesSvg } from 'Column/ColumnEditor'
 import { ColumnStatus } from './ColumnCenter'
 import AskAdd from 'Material/components/AskAdd'
 
+import { ITryType, INewPermissionType } from 'Material/components/NoPermission'
+import PayNoPermission from 'Material/components/PayNoPermission'
 import styles from '../css/ColumnDetail.module.scss'
 import 'froala-editor/css/froala_style.min.css'
 import 'froala-editor/css/froala_editor.pkgd.min.css'
@@ -33,11 +35,12 @@ interface IColumnContentProps {
   type?: 'detail' | 'list' | 'preview' | 'check' // detail-详情页，list-列表页，preview-预览页,check-审查页
   onCollect?: (ID: number) => void // 收藏回调(预览时没有收藏功能)
   onClose?: () => void
+  handleToRefresh?: () => void
 }
 
 /**笔记/观点 */
 const ColumnContent: React.FC<IColumnContentProps> = props => {
-  const { detail, type = 'detail', onClose, onCollect } = props
+  const { detail, type = 'detail', onClose, onCollect, handleToRefresh } = props
   const login2p = useLogin2p()
   const history = useHistory()
   const [bigImg, setBigImg] = useState<string>() // 展开的图片
@@ -137,7 +140,10 @@ const ColumnContent: React.FC<IColumnContentProps> = props => {
   }
   // 如果是列表显示，隐藏img标签
   const handleHideImg = (html: string) => {
-    if (type === 'list') {
+    if (
+      type === 'list' ||
+      ((detail as IColumnDetail)?.IsShowWxPay && (detail as IColumnDetail)?.HasPermission !== INewPermissionType.OK)
+    ) {
       return html.replace(/<img[^>]*>/gi, '')
     }
     return html
@@ -227,135 +233,157 @@ const ColumnContent: React.FC<IColumnContentProps> = props => {
       <div className="com-fz18 com-fw-bold m-b-sm">{detail.Title}</div>
       <div
         className={`fr-element fr-view ${
-          type === 'list' || (type === 'detail' && !login2p.jwt) ? 'note-content' : 'columndetail-content'
+          type === 'list' ||
+          (type === 'detail' && !login2p.jwt) ||
+          ((detail as IColumnDetail)?.IsShowWxPay && (detail as IColumnDetail)?.HasPermission !== INewPermissionType.OK)
+            ? 'note-content'
+            : 'columndetail-content'
         } `}
         dangerouslySetInnerHTML={{
           __html: handleHideImg(detail.Content)
         }}
       />
-      {type === 'list' && (
-        <div className="g-flex g-flex-v-center g-flex-between m-b-md note-showmore-line">
-          <div className="g-flex g-flex-v-center">
-            <div className="note-pv">
-              <EyeOutlined size={14} className="pv-icon" />
-              <span>{(detail as IColumnDetail).Pv || 0}</span>
-            </div>
-            {(detail as IColumnDetail)?.IsCollect ? (
-              <StarFilled
-                className="collect-icon"
-                onClick={handleOnCollect.bind(this, (detail as IColumnDetail)?.IsCollect)}
-              />
-            ) : (
-              <StarOutlined
-                className="collect-icon"
-                onClick={handleOnCollect.bind(this, (detail as IColumnDetail)?.IsCollect)}
-              />
-            )}
-            <span className="collect-count">{(detail as IColumnDetail)?.CollectNum}</span>
-          </div>
-          <div className="note-showmore-btn" onClick={handleToDetail}>
-            查看全文
-          </div>
-        </div>
-      )}
+      {(detail as IColumnDetail)?.IsShowWxPay &&
+        (detail as IColumnDetail)?.HasPermission !== INewPermissionType.OK && ( // 暂时这么写
+          <PayNoPermission
+            dataInfo={detail as IColumnDetail}
+            tryType={ITryType.YanxuanSpecial}
+            border={false}
+            onRefresh={handleToRefresh}
+          />
+        )}
 
-      {!login2p.jwt && type === 'detail' ? (
-        <div className="please-login-btn" onClick={handleToShowMore}>
-          请登录后查看更多内容
-        </div>
-      ) : (
+      {(detail as IColumnDetail)?.HasPermission === INewPermissionType.OK && (
         <>
-          <div className="operate-file-wrapper">
-            {detail?.Docs?.map((item: IDocsList, index: number) => (
-              <div className="operate-file-item com-cursor-p" key={index} onClick={handlePreviewFile.bind(this, item)}>
-                <div className="g-flex g-flex-v-center">
-                  {item.DocIcon ? (
-                    <img src={item.DocIcon} className="operate-file-type" alt="图标" />
-                  ) : (
-                    computeFileSvgShow(item.DocName, 'svg')
-                  )}
-                  <span className="operate-file-text">{item.DocName}</span>
+          {type === 'list' && (
+            <div className="g-flex g-flex-v-center g-flex-between m-b-md note-showmore-line">
+              <div className="g-flex g-flex-v-center">
+                <div className="note-pv">
+                  <EyeOutlined size={14} className="pv-icon" />
+                  <span>{(detail as IColumnDetail).Pv || 0}</span>
                 </div>
-              </div>
-            ))}
-          </div>
-          <div className="operate-file-wrapper">
-            {detail?.ImgUrlList?.map((item, index) => (
-              <React.Fragment key={index}>
-                {item && (
-                  <div className="operate-image-item" key={item} onClick={handleOnClickPicture.bind(this, item)}>
-                    <img src={item} alt={'图片' + item} className="operate-image" />
-                  </div>
+                {(detail as IColumnDetail)?.IsCollect ? (
+                  <StarFilled
+                    className="collect-icon"
+                    onClick={handleOnCollect.bind(this, (detail as IColumnDetail)?.IsCollect)}
+                  />
+                ) : (
+                  <StarOutlined
+                    className="collect-icon"
+                    onClick={handleOnCollect.bind(this, (detail as IColumnDetail)?.IsCollect)}
+                  />
                 )}
-              </React.Fragment>
-            ))}
-          </div>
-          <div className="columndetail-category-label g-flex g-flex-v-center g-flex-wap">
-            {type !== 'list' ? (
-              <>
-                {detail?.IndustryTags?.map(item => (
-                  <div className="select-item" key={item}>
-                    <span>{item}</span>
-                  </div>
-                ))}
-                {detail?.CompanyTags?.map(item => (
-                  <div className="select-item" key={item}>
-                    <span>{item}</span>
+                <span className="collect-count">{(detail as IColumnDetail)?.CollectNum}</span>
+              </div>
+              <div className="note-showmore-btn" onClick={handleToDetail}>
+                查看全文
+              </div>
+            </div>
+          )}
+
+          {!login2p.jwt && type === 'detail' ? (
+            <div className="please-login-btn" onClick={handleToShowMore}>
+              请登录后查看更多内容
+            </div>
+          ) : (
+            <>
+              <div className="operate-file-wrapper">
+                {detail?.Docs?.map((item: IDocsList, index: number) => (
+                  <div
+                    className="operate-file-item com-cursor-p"
+                    key={index}
+                    onClick={handlePreviewFile.bind(this, item)}
+                  >
+                    <div className="g-flex g-flex-v-center">
+                      {item.DocIcon ? (
+                        <img src={item.DocIcon} className="operate-file-type" alt="图标" />
+                      ) : (
+                        computeFileSvgShow(item.DocName, 'svg')
+                      )}
+                      <span className="operate-file-text">{item.DocName}</span>
+                    </div>
                   </div>
                 ))}
-              </>
-            ) : (
-              <>
-                {(detail as IColumnDetail)?.TagList?.map(item => (
-                  <div className="select-item" key={item}>
-                    <span>{item}</span>
-                  </div>
+              </div>
+              <div className="operate-file-wrapper">
+                {detail?.ImgUrlList?.map((item, index) => (
+                  <React.Fragment key={index}>
+                    {item && (
+                      <div className="operate-image-item" key={item} onClick={handleOnClickPicture.bind(this, item)}>
+                        <img src={item} alt={'图片' + item} className="operate-image" />
+                      </div>
+                    )}
+                  </React.Fragment>
                 ))}
-              </>
-            )}
-          </div>
-          {type === 'detail' && (detail as IColumnDetail).Status === ColumnStatus.Published && (
-            <div
-              className="columndetail-collect"
-              onClick={handleOnCollect.bind(this, (detail as IColumnDetail)?.IsCollect)}
-            >
-              {(detail as IColumnDetail)?.IsCollect ? (
-                <StarFilled size={20} className={`option-icon`} />
-              ) : (
-                <StarOutlined size={20} className="option-icon" />
+              </div>
+              <div className="columndetail-category-label g-flex g-flex-v-center g-flex-wap">
+                {type !== 'list' ? (
+                  <>
+                    {detail?.IndustryTags?.map(item => (
+                      <div className="select-item" key={item}>
+                        <span>{item}</span>
+                      </div>
+                    ))}
+                    {detail?.CompanyTags?.map(item => (
+                      <div className="select-item" key={item}>
+                        <span>{item}</span>
+                      </div>
+                    ))}
+                  </>
+                ) : (
+                  <>
+                    {(detail as IColumnDetail)?.TagList?.map(item => (
+                      <div className="select-item" key={item}>
+                        <span>{item}</span>
+                      </div>
+                    ))}
+                  </>
+                )}
+              </div>
+              {type === 'detail' && (detail as IColumnDetail).Status === ColumnStatus.Published && (
+                <div
+                  className="columndetail-collect"
+                  onClick={handleOnCollect.bind(this, (detail as IColumnDetail)?.IsCollect)}
+                >
+                  {(detail as IColumnDetail)?.IsCollect ? (
+                    <StarFilled size={20} className={`option-icon`} />
+                  ) : (
+                    <StarOutlined size={20} className="option-icon" />
+                  )}
+                  <span className="option-text">{(detail as IColumnDetail)?.IsCollect ? '已' : ''}收藏</span>
+                </div>
               )}
-              <span className="option-text">{(detail as IColumnDetail)?.IsCollect ? '已' : ''}收藏</span>
-            </div>
+            </>
           )}
-        </>
-      )}
 
-      {type === 'check' && (
-        <>
-          <div className="check-operate-wrapper">
-            <div className="operate-nomal-btn save-btn" onClick={handleToClick.bind(this, 'modify')}>
-              修改
-            </div>
-            <div className="operate-nomal-btn reject-btn" onClick={handleToClick.bind(this, 'reject')}>
-              驳回
-            </div>
-            <div className="operate-nomal-btn publish-btn" onClick={handleToClick.bind(this, 'pass')}>
-              通过
-            </div>
-          </div>
-          {visibleAsk ? (
-            <AskAdd
-              title="驳回"
-              placeholder="请输入驳回理由"
-              visible={visibleAsk}
-              ID={detail.Id}
-              onApply={handleApplyContent}
-              onCloseModel={handleOkAsk}
-            />
-          ) : null}
+          {type === 'check' && (
+            <>
+              <div className="check-operate-wrapper">
+                <div className="operate-nomal-btn save-btn" onClick={handleToClick.bind(this, 'modify')}>
+                  修改
+                </div>
+                <div className="operate-nomal-btn reject-btn" onClick={handleToClick.bind(this, 'reject')}>
+                  驳回
+                </div>
+                <div className="operate-nomal-btn publish-btn" onClick={handleToClick.bind(this, 'pass')}>
+                  通过
+                </div>
+              </div>
+              {visibleAsk ? (
+                <AskAdd
+                  title="驳回"
+                  placeholder="请输入驳回理由"
+                  visible={visibleAsk}
+                  ID={detail.Id}
+                  onApply={handleApplyContent}
+                  onCloseModel={handleOkAsk}
+                />
+              ) : null}
+            </>
+          )}
+          <Picture visible={!!bigImg} imgSrc={bigImg} onClose={handleToCloseBigImg} />
         </>
       )}
-      <Picture visible={!!bigImg} imgSrc={bigImg} onClose={handleToCloseBigImg} />
     </div>
   )
 }

src/Material/MaterialInfo.tsx

@@ -116,35 +116,28 @@ const MaterialInfo: React.FC<IMaterialInfoProps> = props => {
     })
   }
   const handleToRefresh = () => {
-    refreshArcticleDetail()
+    console.log('有没有触发')
+
+    // refreshArcticleDetail()
   }
   return (
     <Spin spinning={infoLoading}>
       <AskAdd visible={visibleAsk} ID={props.articleID} onApply={handleApplyComment} onCloseModel={handleOkAsk} />
       <ValidateEmpty loading={infoLoading} data={data}>
-        {data?.HasPermission && data?.HasPermission !== INewPermissionType.OK ? (
+        {data?.HasPermission && data?.HasPermission !== INewPermissionType.OK && !data?.IsShowWxPay ? (
           <div className={styles['art-nopower-bg']}>
-            {data?.IsShowWxPay && !media.isSmallMax ? ( // 暂时这么写
-              <PayNoPermission
-                dataInfo={data as IArcticleInfo}
-                tryType={ITryType.Article}
-                border={true}
-                onRefresh={handleToRefresh}
-              />
-            ) : (
-              <NoPermission
-                hasPermission={data?.HasPermission}
-                seller={data?.Detail?.Seller}
-                detailID={props.articleID}
-                tryType={ITryType.Article}
-                specialType={specialType}
-                border={true}
-              />
-            )}
+            <NoPermission
+              hasPermission={data?.HasPermission}
+              seller={data?.Detail?.Seller}
+              detailID={props.articleID}
+              tryType={ITryType.Article}
+              specialType={specialType}
+              border={true}
+            />
           </div>
         ) : (
           <div className={styles['art-white-bg']}>
-            {login2p.jwt ? (
+            {login2p.jwt && data?.HasPermission && data?.HasPermission === INewPermissionType.OK ? (
               <div className={styles['material-info-option']}>
                 <span className="material-option-item" onClick={() => setVisibleAsk(true)}>
                   <img src={CommentFillSvg} alt="icon" className="option-icon" />
@@ -170,22 +163,24 @@ const MaterialInfo: React.FC<IMaterialInfoProps> = props => {
                 </span>
               </div>
             ) : null}
-            {data && <Research info={data as IArcticleInfo} />}
-            <div className={`${styles['statement-wrapper']}`}>
-              <strong>郑重声明：</strong>
-              <p>
-                察研科技研选平台（以下简称“本平台”）所载内容仅供上海察研科技有限公司（以下简称“察研科技”）正式签约客户参考使用，察研科技不因任何机构或个人登录或浏览本页面内容而将该机构或个人视为察研科技的服务对象。
-              </p>
-              <p>
-                本平台所载信息为用户投稿、公开信息及从第三方合法取得的市场、行业及企业相关等信息，上述信息涉及的观点、陈述、判断等与察研科技立场无关，察研科技对此表述中立。察研科技并不对上述信息的准确性、真实性、可用性、安全性、完整性、正当性做出保证，您应当自行决定是否采纳并自行承担相应的责任。察研科技不对您因使用察研科技提供的任何信息做出的任何决策承担责任。
-              </p>
-              <p>
-                本平台所载信息、意见不构成任何买卖证券、基金及其他金融工具的投资决策建议或推荐，且在任何时候均不构成对任何人具有针对性的、指导具体投资的操作意见，您应当对本平台中的信息和意见进行评估，全面认识金融市场的风险收益特征，根据自身情况自主作出决策并自行承担风险。市场有风险，投资需谨慎。
-              </p>
-              <p>
-                未经察研科技书面许可，任何机构或个人不得以翻版、复制、发表、引用或再次分发他人等任何形式侵犯本平台发布的所有内容的版权。如因侵权行为给察研科技造成任何直接或间接的损失，察研科技保留追究一切法律责任的权利。
-              </p>
-            </div>
+            {data && <Research info={data as IArcticleInfo} handleToRefresh={handleToRefresh} />}
+            {data?.HasPermission && data?.HasPermission === INewPermissionType.OK && (
+              <div className={`${styles['statement-wrapper']}`}>
+                <strong>郑重声明：</strong>
+                <p>
+                  察研科技研选平台（以下简称“本平台”）所载内容仅供上海察研科技有限公司（以下简称“察研科技”）正式签约客户参考使用，察研科技不因任何机构或个人登录或浏览本页面内容而将该机构或个人视为察研科技的服务对象。
+                </p>
+                <p>
+                  本平台所载信息为用户投稿、公开信息及从第三方合法取得的市场、行业及企业相关等信息，上述信息涉及的观点、陈述、判断等与察研科技立场无关，察研科技对此表述中立。察研科技并不对上述信息的准确性、真实性、可用性、安全性、完整性、正当性做出保证，您应当自行决定是否采纳并自行承担相应的责任。察研科技不对您因使用察研科技提供的任何信息做出的任何决策承担责任。
+                </p>
+                <p>
+                  本平台所载信息、意见不构成任何买卖证券、基金及其他金融工具的投资决策建议或推荐，且在任何时候均不构成对任何人具有针对性的、指导具体投资的操作意见，您应当对本平台中的信息和意见进行评估，全面认识金融市场的风险收益特征，根据自身情况自主作出决策并自行承担风险。市场有风险，投资需谨慎。
+                </p>
+                <p>
+                  未经察研科技书面许可，任何机构或个人不得以翻版、复制、发表、引用或再次分发他人等任何形式侵犯本平台发布的所有内容的版权。如因侵权行为给察研科技造成任何直接或间接的损失，察研科技保留追究一切法律责任的权利。
+                </p>
+              </div>
+            )}
           </div>
         )}
       </ValidateEmpty>

src/Material/components/Item.component.tsx

@@ -13,6 +13,7 @@ import ProductInteriorCard from './ProductInteriorCard'
 import IndustrialSourceCard from './IndustrialSourceCard'
 import ReportSelectionCard from './ReportSelectionCard'
 import YanxuanSpecialCard from './YanxuanSpecialCard'
+import YanxuanSpecialAuthorCard from './YanxuanSpecialAuthorCard'
 
 export enum IItemType {
   MyChart = 'myChart', // 我收藏的图表
@@ -33,7 +34,8 @@ export enum IItemType {
   Industrialsource = 'industrialsource', // 产业资源包
   ReportSelection = 'reportselection', // 重点公司展示样式
   YanxuanSpecial = 'yanxuanspecial', // 专栏笔记/观点
-  AskserieVideo = 'askserievideo' // 问系列视频
+  AskserieVideo = 'askserievideo', // 问系列视频
+  YanxuanSpecialAuthor = 'yanxuanspecialauthor' // 专栏作者
 }
 interface IItemComponentProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -80,6 +82,7 @@ const ItemComponent: React.FC<IItemComponentProps> = props => {
       {itemType === IItemType.Industrialsource && <IndustrialSourceCard item={item.IndustrialResource} />}
       {itemType === IItemType.ReportSelection && <ReportSelectionCard item={item.ReportSelection} />}
       {itemType === IItemType.YanxuanSpecial && <YanxuanSpecialCard item={item.YanxuanSpecial} />}
+      {itemType === IItemType.YanxuanSpecialAuthor && <YanxuanSpecialAuthorCard item={item.YanxuanSpecialAuthor} />}
     </>
   )
 }

src/Material/components/PayNoPermission.tsx

@@ -198,7 +198,7 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
         {tryType !== ITryType.Activity ? <img src={NoPowerImg} alt="无权限" className="nopower-big-img" /> : null}
         <div className="nopower-content-wrapper">
           <div className={tryType !== ITryType.Activity ? 'nopower-title' : 'nopower-activity-title'}>
-            {tryType === ITryType.Activity ? '暂无权限参加此活动' : '暂无权限查看此报告'}
+            {tryType === ITryType.Activity ? '暂无权限参加此活动' : '暂无权限查看完整报告'}
           </div>
           <div className="nopower-text">
             {payType === PayType.Card ? (

src/Material/components/Research.container.tsx

@@ -12,13 +12,15 @@ import { useMedia } from 'Context/Media/MediaContext'
 import { useLogin2p } from 'Login2p/Login2pContext'
 import styles from '../css/MaterialInfo.module.scss'
 import NButton from 'components/NButton/NButton'
-
+import PayNoPermission from './PayNoPermission'
+import { ITryType, INewPermissionType } from './NoPermission'
 type ResearchContainerProps = {
   info: IArcticleInfo
+  handleToRefresh?: () => void
 }
 
 const ResearchContainer: React.FC<ResearchContainerProps> = props => {
-  const { info } = props
+  const { info, handleToRefresh } = props
   // const [showDisclaimers, setShowDisclaimers] = useState(false)
 
   const { data: hotList, run } = useRequest(MaterialService.getArcticleHotList, {
@@ -53,7 +55,6 @@ const ResearchContainer: React.FC<ResearchContainerProps> = props => {
   const handleOpenToPage = (path: string) => {
     window.open(path)
   }
-
   return info ? (
     <div className={styles['research-container']}>
       <div className="reserch-breadcrumb">
@@ -94,14 +95,6 @@ const ResearchContainer: React.FC<ResearchContainerProps> = props => {
               <div className="gray-text fz12">{dayjs(info.Detail.PublishDate).format('YYYY-MM-DD HH:mm')}</div>
             </div>
           </div>
-          {/* <p className="gray-text">
-              注：请务必阅读{' '}
-              <span className="line-text" onClick={() => setShowDisclaimers(!showDisclaimers)}>
-                免责声明
-              </span>
-            </p>
-            {showDisclaimers && <p className="gray-text">{info.Detail.Disclaimers}</p>} */}
-
           <Row gutter={24}>
             <Col
               xs={{ span: 24, offset: 0 }}
@@ -153,6 +146,15 @@ const ResearchContainer: React.FC<ResearchContainerProps> = props => {
                   className={`acticle-content ${!login2p.jwt ? 'line-four' : ''}`}
                 />
               </Watermark>
+              {info?.IsShowWxPay &&
+                info?.HasPermission !== INewPermissionType.OK && ( // 暂时这么写
+                  <PayNoPermission
+                    dataInfo={info as IArcticleInfo}
+                    tryType={ITryType.Article}
+                    border={false}
+                    onRefresh={handleToRefresh}
+                  />
+                )}
               {!login2p.jwt && (
                 <NButton type="primary" onClick={handleToShowMore} size="big-large" className="m-center">
                   请登录后查看更多内容
@@ -161,7 +163,7 @@ const ResearchContainer: React.FC<ResearchContainerProps> = props => {
             </Col>
           </Row>
         </Col>
-        {!!hotList?.length && (
+        {!!hotList?.length && info?.HasPermission === INewPermissionType.OK && (
           <Col
             xs={{ span: 0, offset: 0 }}
             sm={{ span: 0, offset: 0 }}

src/Material/components/YanxuanSpecialAuthorCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import dayjs from 'dayjs'
+
+import { EyeOutlined } from '@ant-design/icons'
+
+import { IYanxuanSpecialAuthorItem } from 'Newest/Newest.service'
+import styles from '../css/ItemComponent.module.scss'
+export interface IYanxuanSpecialCardProps {
+  item: IYanxuanSpecialAuthorItem
+  title?: string // 标红的标题
+}
+/**专栏笔记/观点组件 */
+const YanxuanSpecialCard: React.FC<IYanxuanSpecialCardProps> = props => {
+  const { item, title } = props
+  const handleToDetail = () => {
+    window.open(`/column/view/${item.Id}`)
+  }
+  if (!item) return null
+  return (
+    <div className={styles['item-article']} onClick={handleToDetail}>
+      <div className="item-article-title-author">
+        <div
+          className="item-article-title-content"
+          dangerouslySetInnerHTML={{
+            __html: `<img src=${
+              item.LabelKeywordImgLink || 'https://hzstatic.hzinsights.com/cygx_web/config/zhuanlan.png'
+            } class="mfyx-label-img" />`
+          }}
+        />
+      </div>
+
+      <div>
+        <div className={styles['head-img-specia-nick']}>
+          <img src={item?.HeadImg} alt="" />
+          <div className={styles['specia-nick-name']}>
+            <div>{item?.SpecialName}</div>
+            <div>{item?.NickName}</div>
+          </div>
+        </div>
+        <p className={styles['author-introduce-box']}>{item?.Introduction}</p>
+        <div className={styles['columnindex-count-wrapper']}>
+          <div className={styles['columnindex-count-item']}>
+            <div className={styles['columnindex-count']}>{item?.SpecialArticleNum || 0}</div>
+            <div className={styles['columnindex-count-title']}>文章</div>
+          </div>
+          <div className={styles['columnindex-count-item']}>
+            <div className={styles['columnindex-count']}>{item?.CollectNum || 0}</div>
+            <div className={styles['columnindex-count-title']}>被收藏</div>
+          </div>
+          <div className={styles['columnindex-count-item']}>
+            <div className={styles['columnindex-count']}>{item?.FansNum || 0}</div>
+            <div className={styles['columnindex-count-title']}>粉丝</div>
+          </div>
+        </div>
+      </div>
+      <div className="item-time-right item-article-flex">
+        <div className="item-article-pv"></div>
+        <div className="item-article-publistdate">{dayjs(item.LatestPublishDate || '').format('YYYY-MM-DD')}</div>
+      </div>
+    </div>
+  )
+}
+
+export default YanxuanSpecialCard

src/Material/css/ItemComponent.module.scss

@@ -29,9 +29,9 @@
       font-size: 16px;
       line-height: 24px;
       color: #333333;
-      padding-top: 16px;      
+      padding-top: 16px;
       border-bottom: 1px solid #ebebeb;
-      .item-article-title-content{
+      .item-article-title-content {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
@@ -339,3 +339,71 @@
     }
   }
 }
+.item-article-title-author {
+  height: 20px;
+}
+.head-img-specia-nick {
+  display: flex;
+  width: 100%;
+  height: 65px;
+  margin-top: 10px;
+  img {
+    width: 60px;
+    height: 60px;
+    border-radius: 4px;
+  }
+  .specia-nick-name {
+    margin-left: 10px;
+    padding: 3px 0 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #999999;
+    div {
+      white-space: nowrap; 
+      overflow: hidden; 
+      text-overflow: ellipsis; 
+    }
+    :nth-child(1) {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 25px;
+      color: #000000;
+    }
+  }
+}
+.author-introduce-box {
+  height: 83px;
+  padding: 10px 4px !important;
+  font-size: 14px;
+  color: #999999;
+  margin: 10px 0 !important;
+  background-color: #f8f8fa;
+}
+.columnindex-count-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  background: #f9f9f9;
+  padding: 10px 0px;
+  margin-bottom: 10px;
+  .columnindex-count-item {
+    flex: 1;
+    text-align: center;
+    border-right: 1px solid #f0f1f3;
+    &:last-child {
+      margin-right: 0;
+      border-right: none;
+    }
+    .columnindex-count {
+      font-size: 16px;
+      font-weight: bold;
+      color: #f1a84a;
+      line-height: 25px;
+    }
+    .columnindex-count-title {
+      line-height: 20px;
+      color: #666666;
+    }
+  }
+}

src/Newest/Newest.service.ts

@@ -94,6 +94,19 @@ export interface IYanxuanSpecialItem extends IColumnDetail {
   BodyHighlight: string[] // 标红的内容
   LabelKeywordImgLink: string
 }
+
+export interface IYanxuanSpecialAuthorItem extends IColumnDetail {
+  FansNum: number
+  LatestPublishDate: string
+  Annotation: string
+  AuthorStatus: number
+  BodyHighlight: string[] // 标红的内容
+  LabelKeywordImgLink: string
+  SpecialArticleNum: number
+  CollectNum: number
+  FollowNum: number
+}
+
 export interface IReportSelectionItem {
   Abstract: string
   ArticleId: number