Add images carousel

docs/practice/cases.md

@@ -15,7 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。
 
 ### 金融云
 
-<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
+<img as-cover class="preview-img" width="420" alt="图例1" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
+<img class="preview-img" width="420" alt="图例2" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
+<img class="preview-img" width="420" alt="图例3" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
 
 是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
 
@@ -25,7 +27,7 @@ Ant Design 是面向中后台的 UI 设计语言。
 
 ### OceanBase Cloud Platform
 
-<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
+<img class="preview-img" width="420" alt="图例3" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
 
 OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
 

docs/spec/introduce.md

@@ -5,9 +5,9 @@
 
 ---
 
-Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
+Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
 
-<img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
 
 Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
 

scripts/demo.js

@@ -145,11 +145,20 @@ window.BrowserDemo = React.createClass({
   }
 });
 
-var Modal = antd.Modal;
-var PriviewImg = React.createClass({
+/*
+<Carousel>
+  <div><img src={this.props.src} /></div>
+  <div><img src={this.props.src} /></div>
+  <div><img src={this.props.src} /></div>
+</Carousel>
+*/
+
+const { Modal, Carousel } = antd;
+const PriviewImg = React.createClass({
   getInitialState() {
     return {
       visible: false,
+      current: 0,
     };
   },
   showImageModal() {
@@ -162,21 +171,38 @@ var PriviewImg = React.createClass({
       visible: false
     });
   },
+  handleImgChange(current) {
+    this.setState({ current });
+  },
   render() {
     const goodCls = this.props.good ? 'good' : '';
     const badCls = this.props.bad ? 'bad' : '';
+    const imgsPack = this.props.imgsPack || [{
+      src: this.props.src,
+      alt: this.props.alt,
+    }];
+    const current = this.state.current;
     return (
       <div className="preview-image-box" style={{ width: this.props.width }}>
         <div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
           <img src={this.props.src} onClick={this.showImageModal} alt="Sample Picture" />
         </div>
-        <div className="preview-image-description">{this.props.alt}</div>
-        <Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
-          <div className="image-modal-container">
-            <img src={this.props.src} />
-          </div>
-          <div className="preview-image-description">{this.props.alt}</div>
-          <a className="outside-link" href={this.props.src} target="_blank">查看原图</a>
+        <div className="preview-image-title">{this.props.alt}</div>
+        <div className="preview-image-description">{this.props.description}</div>
+        <Modal className="image-modal" width="840" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
+          <Carousel afterChange={this.handleImgChange}>
+            {
+              imgsPack.map((img, i) =>
+                <div key={i}>
+                  <div className="image-modal-container">
+                    <img src={img.src} />
+                  </div>
+                </div>
+              )
+            }
+          </Carousel>
+          <div className="preview-image-title">{imgsPack[current].alt}</div>
+          <a className="outside-link" href={imgsPack[current].src} target="_blank">查看原图</a>
         </Modal>
       </div>
     );
@@ -187,24 +213,46 @@ InstantClickChangeFns.push(function() {
   const previewImageBoxes = $('.preview-img').parent();
   previewImageBoxes.each(function(i, box) {
     box = $(box);
-    const priviewImgs = [];
+    let priviewImgs = [];
     const priviewImgNodes = box.find('.preview-img');
+
+    // 判断是否要做成图片集合
+    // 指定了封面图片就是
+    let coverImg;
     priviewImgNodes.each(function(i, img) {
-      priviewImgs.push(
-        <PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'}
-          alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
-      );
-    });
-    let mountNode = $('<div class="preview-image-boxes"></div>');
-    if (priviewImgNodes.length === 1) {
-      let width = priviewImgNodes.eq(0).attr('width') || '';
-      if (width && width.indexOf('%') < 0) {
-        width += 'px';
+      if (img.hasAttribute('as-cover')) {
+        coverImg = img;
+        return false;
       }
-      mountNode = $('<div class="preview-image-boxes" style="width: ' + width + '"></div>');
+    });
+
+    if (coverImg) {
+      const imgs = [];
+      priviewImgNodes.each((i, img) => imgs.push(img));
+      priviewImgs = <PriviewImg src={coverImg.src} alt={coverImg.alt} imgsPack={imgs} />;
+    } else {
+      priviewImgNodes.each(function(i, img) {
+        priviewImgs.push(
+          <PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'}
+            alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
+        );
+      });
+    }
+
+    // 计算宽度
+    let width = 'auto';
+    if (priviewImgs.length === 1) {
+      width = priviewImgNodes[0].getAttribute('width') || '';
+    } else if (coverImg) {
+      width = coverImg.getAttribute('width');
+    }
+    if (width && width.indexOf('%') < 0 && width !== 'auto') {
+      width += 'px';
     }
+
+    let mountNode = $('<div class="preview-image-boxes ' + (coverImg ? 'pack' : '') + '" style="width: ' + width + '"></div>')[0];
     box.replaceWith(mountNode);
-    ReactDOM.render(<span>{priviewImgs}</span>, mountNode[0]);
+    ReactDOM.render(<span>{priviewImgs}</span>, mountNode);
   });
 });
 

site/static/style.css

@@ -1298,6 +1298,12 @@ a.entry-link:hover .anticon-smile {
   left: 0;
 }
 
+.preview-image-title {
+  font-size: 12px;
+  margin-top: 8px;
+  color: #666;
+}
+
 .preview-image-description {
   font-size: 12px;
   margin-top: 8px;
@@ -1311,7 +1317,7 @@ a.entry-link:hover .anticon-smile {
 }
 
 .preview-image-box img:hover {
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
 }
 
 .outside-link:after {
@@ -1326,19 +1332,40 @@ a.entry-link:hover .anticon-smile {
 }
 
 .image-modal-container {
-  padding: 8px 8px 32px 8px;
+  position: relative;
 }
 
 .image-modal .ant-modal-header {
   display: none;
 }
 
+.image-modal .ant-carousel .slick-slider {
+  padding-bottom: 24px;
+}
+
+.image-modal .ant-carousel .slick-dots {
+  text-align: left;
+  bottom: -6px;
+}
+
+.image-modal .ant-carousel .slick-dots li {
+  margin: 0;
+}
+
+.image-modal .preview-image-title {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  display: inline-block;
+  transform: translateX(-50%);;
+}
+
 .image-modal .outside-link {
   position: absolute;
   right: 16px;
-  bottom: 16px;
+  bottom: 12px;
 }
 
 .image-modal img {
-  max-width: 100%;
+  width: 100%;
 }

site/templates/home.html

@@ -231,6 +231,10 @@
     background: #000;
   }
 
+  .anticon-right {
+    transform: scale(0.6);
+  }
+
   footer ul li > h2 {
     color: #777;
   }