feat: merge to local

2025-03-07 14:16:52 +08:00 · 2017-08-24 14:18:44 +08:00 · 2017-08-24 14:18:44 +08:00 · 788a8be353
commit 788a8be353
parent 1682da97a6 ea1049a9ab
6 changed files with 76 additions and 77 deletions
--- a/client/components/ProjectCard/ProjectCard.scss
+++ b/client/components/ProjectCard/ProjectCard.scss
@ -11,12 +11,19 @@
    .m-card, .card-btns {
      transform: translateY(-4px);
    }
+    .m-card .ant-card-body {
+      box-shadow: 0 4px 8px rgba(50, 50, 93, 0.11), 0 4px 6px rgba(0, 0, 0, 0.08);
+    }
  }
  &:active {
    .m-card, .card-btns {
      transform: translateY(4px);
    }
  }
+  // 覆盖 card 组件 hover 状态的默认阴影样式
+  .ant-card:not(.ant-card-no-hovering):hover {
+    box-shadow: none;
+  }
  // 卡片右上角按钮
  .card-btns {
    position: absolute;
@ -47,6 +54,7 @@
    border-radius: 4px;
    padding-top: .24rem + .16rem + 1rem;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+    transition: all .2s;
  }
  .ui-logo {
    width: 1rem;
--- a/client/containers/Home/Home.js
+++ b/client/containers/Home/Home.js
@ -8,11 +8,8 @@ import { logoSVG } from '../../common.js';

 // import Intro from '../../components/Intro/Intro'
 import { changeMenuItem } from '../../reducer/modules/menu'
-import { OverPack } from 'rc-scroll-anim'
-import TweenOne from 'rc-tween-one'
-import QueueAnim from 'rc-queue-anim';

-const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
+// const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };

 const HomeGuest = () => (
  <div className="g-body">
@ -56,43 +53,25 @@ const HomeGuest = () => (
    </div>
    <div className="feat-part section-feature">
      <div className="container home-section">
-        <OverPack
-          playScale={[0.2,0.1]}
-        >
-          <TweenOne
-            key="feat-motion-one"
-            animation={oneAnim}
-          >
-            <h3 className="title">为API开发者设计的管理平台</h3>
-            <span className="desc">YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。</span>
-          </TweenOne>
-          <Row key="feat-motion-row">
-            <QueueAnim
-              delay = {200}
-              interval ={200}
-              leaveReverse={true}
-              ease = 'easeOutQuad'
-              animConfig ={{ opacity:[1,0],y: '+=30' }}
-              key="feat-motion-queue"
-            >
-              <Col span={8} className="section-item" key="feat-wrapper-1">
-                <Icon type="api" className="img" />
-                <h4 className="title">项目接口管理</h4>
-                <span className="desc">提供基本的项目分组，项目管理，接口管理功能</span>
-              </Col>
-              <Col span={8} className="section-item" key="feat-wrapper-2">
-                <Icon type="code-o" className="img" />
-                <h4 className="title">可部署</h4>
-                <span className="desc">用户只需配置接口的基本路径，通过将线上域名指到我们的YApi平台服务器，就可使用mockServer服务</span>
-              </Col>
-              <Col span={8} className="section-item" key="feat-wrapper-3">
-                <Icon type="team" className="img" />
-                <h4 className="title">用户管理</h4>
-                <span className="desc">提供基本的用户注册登录管理等功能，集成了去哪儿QSSO登录</span>
-              </Col>
-            </QueueAnim>
-          </Row>
-        </OverPack>
+        <h3 className="title">为API开发者设计的管理平台</h3>
+        <span className="desc">YApi让接口开发更简单高效，让接口的管理更具可读性、可维护性，让团队协作更合理。</span>
+        <Row key="feat-motion-row">
+          <Col span={8} className="section-item" key="feat-wrapper-1">
+            <Icon type="api" className="img" />
+            <h4 className="title">项目接口管理</h4>
+            <span className="desc">提供基本的项目分组，项目管理，接口管理功能</span>
+          </Col>
+          <Col span={8} className="section-item" key="feat-wrapper-2">
+            <Icon type="code-o" className="img" />
+            <h4 className="title">可部署</h4>
+            <span className="desc">用户只需配置接口的基本路径，通过将线上域名指到我们的YApi平台服务器，就可使用mockServer服务</span>
+          </Col>
+          <Col span={8} className="section-item" key="feat-wrapper-3">
+            <Icon type="team" className="img" />
+            <h4 className="title">用户管理</h4>
+            <span className="desc">提供基本的用户注册登录管理等功能，集成了去哪儿QSSO登录</span>
+          </Col>
+        </Row>
      </div>
    </div>
    <div className="feat-part m-mock m-skew home-section">
@ -110,15 +89,15 @@ const HomeGuest = () => (
              <p className="mock-desc">通过学习一些简单的 Mock 模板规则即可轻松编写接口，这将大大提高定义接口的效率，并且无需为编写 Mock 数据烦恼: 所有的数据都可以实时随机生成。</p>
              <div className="code">
                <ol start="1">
-                  <li className="alt"><span className="orderNum orderNum-first">1</span><span><span>&#123;&ensp;&ensp;</span></span></li>
-                  <li className=""><span className="orderNum">2</span><span>&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;errcode|200-500&quot;</span><span>:&ensp;<span className="number">200</span>,&ensp;&ensp;</span></span></li>
-                  <li className="alt"><span className="orderNum">3</span><span>&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;errmsg|4-8&quot;</span><span>:&ensp;</span><span className="string">&quot;@string&quot;</span><span>,&ensp;&ensp;</span></span></li>
-                  <li className=""><span className="orderNum">4</span><span>&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;data&quot;</span><span>:&ensp;&#123;&ensp;&ensp;</span></span></li>
-                  <li className="alt"><span className="orderNum">5</span><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;boolean|1&quot;</span><span>:&ensp;</span><span className="keyword">true</span><span>,&ensp;&ensp;</span></span></li>
-                  <li className=""><span className="orderNum">6</span><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;array|4&quot;</span><span>:&ensp;<span className="number">1</span>,&ensp;&ensp;</span></span></li>
-                  <li className="alt"><span className="orderNum">7</span><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;combine&quot;</span><span>:&ensp;</span><span className="string">&quot;@boolean&ensp;&amp;&ensp;@array&quot;</span><span>&ensp;&ensp;</span></span></li>
-                  <li className=""><span className="orderNum">8</span><span>&ensp;&ensp;&ensp;&ensp;&#125;&ensp;&ensp;</span></li>
-                  <li className="alt"><span className="orderNum orderNum-last">9</span><span>&#125;&ensp;&ensp;</span></li>
+                  <li className="item"><span className="orderNum orderNum-first">1</span><span><span>&#123;&ensp;&ensp;</span></span></li>
+                  <li className="item"><span className="orderNum">2</span><span>&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;errcode|200-500&quot;</span><span>:&ensp;<span className="number">200</span>,&ensp;&ensp;</span></span></li>
+                  <li className="item"><span className="orderNum">3</span><span>&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;errmsg|4-8&quot;</span><span>:&ensp;</span><span className="string">&quot;@string&quot;</span><span>,&ensp;&ensp;</span></span></li>
+                  <li className="item"><span className="orderNum">4</span><span>&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;data&quot;</span><span>:&ensp;&#123;&ensp;&ensp;</span></span></li>
+                  <li className="item"><span className="orderNum">5</span><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;boolean|1&quot;</span><span>:&ensp;</span><span className="keyword">true</span><span>,&ensp;&ensp;</span></span></li>
+                  <li className="item"><span className="orderNum">6</span><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;array|4&quot;</span><span>:&ensp;<span className="number">1</span>,&ensp;&ensp;</span></span></li>
+                  <li className="item"><span className="orderNum">7</span><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<span className="string">&quot;combine&quot;</span><span>:&ensp;</span><span className="string">&quot;@boolean&ensp;&amp;&ensp;@array&quot;</span><span>&ensp;&ensp;</span></span></li>
+                  <li className="item"><span className="orderNum">8</span><span>&ensp;&ensp;&ensp;&ensp;&#125;&ensp;&ensp;</span></li>
+                  <li className="item"><span className="orderNum orderNum-last">9</span><span>&#125;&ensp;&ensp;</span></li>
                </ol>
              </div>
            </Card>
@ -146,7 +125,7 @@ const HomeGuest = () => (
    </div>
    <div className="home-section section-manage">
      <div className="container">
-        <Row className="row-card">
+        <Row className="row-card" style={{marginBottom: '.48rem'}}>
          <Col span={7} className="section-card">
            <Card>
              <div className="section-block block-first">
--- a/client/containers/Home/Home.scss
+++ b/client/containers/Home/Home.scss
@ -351,6 +351,9 @@ $color-bg-lightblue: #c6e2ff;
      box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
      border: none;
    }
+    .ant-card:not(.ant-card-no-hovering):hover {
+      box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
+    }
    .ant-card-head {
      background-color: $color-blue-grey-lighter;
      border-top-left-radius: .04rem;
@ -399,6 +402,11 @@ $color-bg-lightblue: #c6e2ff;
    .keyword {
      color: #2359f1;
    }
+    .item {
+      overflow: hidden;
+      text-overflow:ellipsis;
+      white-space: nowrap;
+    }
  }
  .mock-after {
    .ant-card-head {
--- a/client/containers/User/Profile.js
+++ b/client/containers/User/Profile.js
@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Row, Col, Input, Button, Select, message, Upload} from 'antd'
+import { Row, Col, Input, Button, Select, message, Upload, Tooltip} from 'antd'
 import axios from 'axios';
 import {formatTime} from '../../common.js'
 import PropTypes from 'prop-types'
@ -365,17 +365,21 @@ class AvatarUpload extends Component {
    // console.log(this.props.uid);
    
    return <div className="avatar-box">
-      <Upload
-        className="avatar-uploader"
-        name="basecode"
-        showUploadList={false}
-        action="/api/user/upload_avatar"
-        beforeUpload={beforeUpload}
-        onChange={this.handleChange.bind(this)} >
-        {/*<Avatar size="large" src={imageUrl}  />*/}
-        <img className = "avatar" src = {imageUrl} />
-      </Upload>
-      <span className="avatarChange">点击头像更换<br></br>只支持jpg、png格式且大小不超过200kb的图片</span>
+      <Tooltip placement="left" title={<div>点击头像更换 (只支持jpg、png格式且大小不超过200kb的图片)</div>}>
+        <div>
+          <Upload
+            className="avatar-uploader"
+            name="basecode"
+            showUploadList={false}
+            action="/api/user/upload_avatar"
+            beforeUpload={beforeUpload}
+            onChange={this.handleChange.bind(this)} >
+            {/*<Avatar size="large" src={imageUrl}  />*/}
+            <img className = "avatar" src = {imageUrl} />
+          </Upload>
+        </div>
+      </Tooltip>
+      <span className="avatarChange"></span>
    </div>
  }
 }
--- a/client/containers/User/index.scss
+++ b/client/containers/User/index.scss
@ -28,7 +28,6 @@
  }
  .user-name{
    padding: .24rem;
-    // text-align: center;
    background-color: #34495e;
    color: white;
    font-size: 18px;
@ -60,7 +59,6 @@

  .user-profile {
    -webkit-box-flex: 1;
-    padding: 32px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
    background: #FFF;
    border-radius: .04rem;
@ -68,14 +66,16 @@
    position: relative;
    .bacToPer{
      position: absolute;
-      right: 40px;
-      top: 40px;
+      right: 8px;
+      top: 8px;
      z-index: 3;
    }
    .user-item-body{
+      width: 80%;
+      margin: 0px auto;
      padding: 32px;
-      background-color: #ececec;
      position: relative;
+      // box-shadow: 0 4px 6px rgba(50, 50, 93, 0.3), 0 1px 3px rgba(0, 0, 0, 0.01);
      .user-item-mask-top{
        position: absolute;
        top: 0px;
@ -100,9 +100,9 @@
        position: relative;
        z-index: 3;
        padding: 8px 0px;
+        
        .maoboli{
-          background-color: rgba(225,225,225,0.60);
-          // filter: blur(3px);
+          background-color: rgba(225,225,225,0.16);
          position: absolute;
          width: 100%;
          height: 100%;
@ -119,7 +119,6 @@
      margin: 5px;
      margin-left: 0px;
      margin-bottom: 16px;
-      // border-bottom: 1px solid #f1f3f6;
      padding-bottom: 16px;
      font-size: 14px;
      #old_password,#password,#verify_pass{
@ -135,11 +134,9 @@
        }
      }
      .ant-col-4{
-        color: rgba(0,0,0,0.85);
+        color: rgba(0,0,0,0.66);
        padding: 0px 16px;
        text-indent: .7em;
-        // background-color: #f1f3f6;
-        border-left: 4px solid #f1f3f6;
        margin-right: 30px;
        white-space: nowrap;
      }
@ -147,7 +144,6 @@
        padding-right: 15px;
      }
      .text-button{
-        // font-size: 12px;
        color: #657289;
        cursor: pointer
      }
@ -160,6 +156,7 @@
  }
  .avatar-uploader{
    border: none;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.31), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  .avatar-uploader,
  .avatar-uploader-trigger{
@ -171,7 +168,6 @@
  .avatar{
    width: 100px;
    min-height: 100px;
-    // border-radius: 50px;
  }
  .avatarImg{
    width: 100px;
@ -180,6 +176,7 @@
    height: 100px;
    background-color: white;
    margin: 0px auto;
+    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.31), 0 1px 3px rgba(0, 0, 0, 0.08);
    img{
      width: 100%;
    }
@ -195,6 +192,7 @@
  .avatar-box{
    width: 100px;
    margin: 0px auto;
+    position: relative;
  }
  .avatarCon{
    background: gray;
@ -257,6 +255,8 @@
    padding: 8px;
    margin-left: -100px;
    color: #ececec;
+    position: absolute;
+    top: 0px;
  }


--- a/server/controllers/interfaceCol.js
+++ b/server/controllers/interfaceCol.js
@ -21,7 +21,7 @@ class interfaceColController extends baseController{
     * @example
     */
    async list(ctx){
-        try {
+        try {   
            let id = ctx.query.project_id;
            let result = await this.colModel.list(id);