V1.1.0

src/article/demo/basic.md

+---
+order: 0
+title: 基本
+---
+article 文章模块
+
+````jsx
+/**
+ * transform: true
+ */
+import React from 'react';
+import { Article } from 'yjtec-ms';
+const {Detail} = Article;
+const back = e => {
+  console.log('back');
+}
+
+const Example =  props => {
+  return(
+    <div>
+      <Detail
+        data={{
+          content:'文章内容',
+          title:"这个是标题",
+          annex:[
+            {name:'附件',url:'http://www.baidu.com'}
+          ]
+        }}
+        loading={false}
+        onBack={back}
+      />
+     </div>
+  )
+}
+
+export default Example;
+
+````
+

src/article/demo/list.md

+---
+order: 0
+title: 列表
+---
+article 文章列表
+
+````jsx
+/**
+ * transform: true
+ */
+import React from 'react';
+import { Article } from 'yjtec-ms';
+const {List} = Article;
+
+const Example =  props => {
+  const data = [
+    {
+        "id":1464,
+        "class_name":"全景学院",
+        "title":"erwetdhggd",
+        "cover_image":"http://test360vrsh.oss-cn-qingdao.aliyuncs.com/article/2020-07-18/k47JuZ5HqhEehBySs3jkJFDcvpLhMCCU5OBXoOhV.png",
+        "weigh":0,
+        "is_check":1,
+        "is_recommend":0,
+        "pageview":0,
+        "link_num":0,
+        "comment_num":0,
+        "favorites_num":0,
+        "describe":"tyutyu",
+        "created_at":"2020-07-18 16:24:22",
+        "updated_at":"2020-07-18 17:03:20"
+    },
+    {
+        "id":1463,
+        "class_name":"全景学院",
+        "title":"asdfasdf",
+        "cover_image":"http://test360vrsh.oss-cn-qingdao.aliyuncs.com/article/2020-07-18/lvvFT424xDDNFlQgtoHLKw8Nq4zm5bjlQQOwli6G.png",
+        "weigh":0,
+        "is_check":1,
+        "is_recommend":0,
+        "pageview":0,
+        "link_num":0,
+        "comment_num":0,
+        "favorites_num":0,
+        "describe":"234",
+        "created_at":"2020-07-18 16:23:57",
+        "updated_at":"2020-07-18 17:03:21"
+    },
+    {
+        "id":1461,
+        "class_name":"全景学院",
+        "title":"平遥古城",
+        "cover_image":"http://test360vrsh.oss-cn-qingdao.aliyuncs.com/article/2020-07-18/r7Qn0aLirX0be1fEFGyXlPvN96xJcPpgjw6kqqst.jpeg",
+        "weigh":0,
+        "is_check":1,
+        "is_recommend":0,
+        "pageview":0,
+        "link_num":0,
+        "comment_num":0,
+        "favorites_num":0,
+        "describe":"颠三倒四多",
+        "created_at":"2020-07-18 15:35:30",
+        "updated_at":"2020-07-18 17:03:22"
+    },
+    {
+        "id":1458,
+        "class_name":"全景学院",
+        "title":"LivepanoVR全景嵌入人物视频",
+        "cover_image":"http://test360vrsh.oss-cn-qingdao.aliyuncs.com/article/2020-07-18/3tzTX9790yDyH4rLr95ZuZzhk9sQO8CvRZJPh6SI.jpeg",
+        "weigh":0,
+        "is_check":1,
+        "is_recommend":0,
+        "pageview":0,
+        "link_num":0,
+        "comment_num":0,
+        "favorites_num":0,
+        "describe":"livepano 即完全无缝融合到全景图中的变形热点视频。这种无缝融合是真正无缝，从而让观者产生沉浸感和真实感。",
+        "created_at":"2020-07-18 15:18:03",
+        "updated_at":"2020-07-18 17:03:22"
+    }
+];
+
+  const onClick  = id => {
+    console.log(id);
+  }
+  return(
+    <div>
+      <List
+        data={data}
+        loading={false}
+        onClick={onClick}
+        pagination={{total:20}}
+      />
+     </div>
+  )
+}
+
+export default Example;
+
+````
+

src/article/style/index.less

+@articlePrefixCls: yms-article;
+.@{articlePrefixCls} {
+    background: #fff;
+    border: 1px dashed #ddd;
+    border-radius: 3px;
+    line-height: 28px;
+    padding: 2px 5px;
+    font-size: 14px;
+    margin-bottom: 15px;
+    &-more {
+        float: right;
+        cursor: pointer;
+        color: #666;
+    }
+    .anticon {
+        color: rgb(255, 145, 0);
+        margin-left: 5px;
+        font-size: 18px; //vertical-align: middle;
+        position: relative;
+        top: 2px;
+    }
+}
+.@{articlePrefixCls}-detail {
+    &-title {
+        font-size: 20px;
+        text-align: center;
+        font-weight: bold;
+        margin-bottom: 20px;
+        margin-top: 20px;
+    }
+    &-content {
+        width: 100%;
+        overflow: auto;
+        :global {
+            img {
+                max-width: 100%;
+            }
+        }
+    }
+    .ant-btn {
+        margin-bottom: 15px;
+    }
+}
+.@{articlePrefixCls}-list {
+    p {
+        font-size: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        /* autoprefixer: on */
+        -webkit-line-clamp: 4;
+    }
+    &-desc {
+        font-size: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        /* autoprefixer: on */
+        -webkit-line-clamp: 4;
+    }
+    &-other {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
+    .ant-list-item-meta-description {
+        position: relative;
+        height: 120px;
+    }
+    .ant-list-item-meta-title {
+        font-size: 18px;
+    }
+}
\ No newline at end of file

src/article/style/index.tsx

+import './index.less';

src/article/Detail.tsx

+import classnames from 'classnames';
+import * as React from 'react';
+import { DetailPropsType, DataType } from './PropsType';
+import { Button, Spin, Icon } from 'antd';
+import Zip from '../zip';
+export interface DetailProps extends DetailPropsType {
+  prefixCls?: string;
+  className?: string;
+}
+
+export default class Detail extends React.Component<DetailProps, any> {
+  static defaultProps = {
+    prefixCls: 'yms-article-detail',
+    loading: true,
+    onBack() {},
+  };
+  render() {
+    const { prefixCls, className, loading, onBack, data } = this.props;
+    const { content = '', annex = [], title = '' } = data as DataType;
+    return (
+      <div className={`${prefixCls}`}>
+        <Button type="primary" onClick={onBack}>
+          返回
+        </Button>
+        <div className={`${prefixCls}-title`}>{title}</div>
+        {loading ? (
+          <Spin />
+        ) : (
+          <div className={`${prefixCls}-content`} dangerouslySetInnerHTML={{ __html: content }} />
+        )}
+        <Zip style={{ marginTop: '10px' }} data={annex} />
+      </div>
+    );
+  }
+}

src/article/List.tsx

+import classnames from 'classnames';
+import * as React from 'react';
+import { ListPropsType, ItemType } from './PropsType';
+import { List } from 'antd';
+import OssImg from '../oss-img';
+const ListItem = List.Item;
+export interface ListProps extends ListPropsType {
+  prefixCls?: string;
+  className?: string;
+}
+
+export default class ArticleList extends React.Component<ListProps, any> {
+  static defaultProps = {
+    prefixCls: 'yms-article-list',
+    data: [],
+    onClick: () => {},
+    pagination: {},
+  };
+  onClick(id: number | undefined) {
+    if (this.props.onClick && id) {
+      this.props.onClick(id);
+    }
+  }
+  render() {
+    const { prefixCls, className, pagination, loading, onClick, data, ...restProps } = this.props;
+    const wrapCls = classnames(prefixCls, className);
+    return (
+      <List
+        itemLayout="horizontal"
+        dataSource={data}
+        loading={loading}
+        className={wrapCls}
+        pagination={pagination}
+        renderItem={(item) => (
+          <ListItem key={item.id} onClick={() => this.onClick(item.id)}>
+            <List.Item.Meta
+              key={item.id}
+              avatar={<OssImg src={item.cover_image} />}
+              title={item.title}
+              description={[
+                <div key={`${item.id}-desc`} className={`${prefixCls}-desc`}>
+                  {item.describe}
+                </div>,
+                <div key={`${item.id}-time`} className={`${prefixCls}-other`}>
+                  {item.created_at}
+                </div>,
+              ]}
+            />
+          </ListItem>
+        )}
+      />
+    );
+  }
+}

src/article/PropsType.tsx

+import * as React from 'react';
+
+export interface DetailPropsType {
+  data?: object;
+  onBack?: () => void;
+  loading?: boolean;
+}
+export interface DataType {
+  annex?: any;
+  content?: string;
+  title?: string;
+}
+
+export interface ListPropsType {
+  data?: ItemType[];
+  onClick?: (id: number) => void;
+  loading?: boolean;
+  pagination?: object;
+  [key: string]: any;
+}
+export interface ItemType {
+  id: number;
+  cover_image?: string;
+  title?: string;
+  describe?: string;
+  created_at?: string;
+  [key: string]: any;
+}

src/article/index.tsx

+import classnames from 'classnames';
+import * as React from 'react';
+import ArticleDetail from './Detail';
+import ArticleList from './List';
+export interface ArticleProps {
+  prefixCls?: string;
+}
+export default class Article extends React.Component<ArticleProps, any> {
+  static Detail = ArticleDetail;
+  static List = ArticleList;
+  render() {
+    return <div>article</div>;
+  }
+}

src/demo/demo/basic.md

+---
+order: 0
+title: 基本
+---
+demo
+
+````tsx
+import * as React from 'react';
+import { Demo } from 'yjtec-ms';
+const Example:React.FC = props => {
+  return(
+    <Demo />
+  )
+}
+
+export default Example;
+````
+

src/demo/style/index.tsx

+import './index.less';
\ No newline at end of file

src/demo/index.md

+---
+category: Components
+subtitle: 例子
+type: 例子
+title: Demo
+---
+this is demo 
\ No newline at end of file