fix: 修改antd3.1产生的样式问题

2025-02-23 13:59:28 +08:00 · 2018-02-05 17:13:38 +08:00 · 2018-02-05 17:13:38 +08:00 · d8eecf35bb
commit d8eecf35bb
parent e29868497b
20 changed files with 51 additions and 13 deletions
--- a/client/components/Breadcrumb/Breadcrumb.scss
+++ b/client/components/Breadcrumb/Breadcrumb.scss
@ -6,6 +6,8 @@
    float: left;
    color: #fff;
    padding-left: 16px;
+    line-height: unset;
+  
  }
  .ant-breadcrumb a {
    color: #fff;
--- a/client/components/ModalPostman/index.js
+++ b/client/components/ModalPostman/index.js
@ -174,6 +174,7 @@ class ModalPostman extends Component {
        width={1024}
        maskClosable={false}
        okText="插入"
+        cancelText="取消"
      >

        <Row className="modal-postman-form" type="flex">
--- a/client/components/Subnav/Subnav.scss
+++ b/client/components/Subnav/Subnav.scss
@ -6,6 +6,9 @@
  box-shadow: 0 0 .04rem rgba(0, 0, 0, .08);
  font-size: .14rem;
  border: none;
+  .ant-menu {
+    font-size: unset;
+   }
  .m-subnav-menu {
    border: none;
    padding: 0 .24rem;
--- a/client/components/TimeLine/TimeLine.scss
+++ b/client/components/TimeLine/TimeLine.scss
@ -42,6 +42,7 @@
        .ant-timeline-item-head-custom {
          padding: 0;
          width: 0;
+          left: -14px;
        }
        .ant-timeline-item-head{
          // width: 40px;
--- a/client/components/UsernameAutoComplete/UsernameAutoComplete.js
+++ b/client/components/UsernameAutoComplete/UsernameAutoComplete.js
@ -112,7 +112,7 @@ class UsernameAutoComplete extends Component {
        notFoundContent={fetching ? <span style={{color:'red'}}> 当前用户不存在</span> : null}
        onSearch={this.handleSearch}
        onChange={this.handleChange}
-        size="large"
+        
      >
        {children}
      </Select>
--- a/client/containers/Group/Group.js
+++ b/client/containers/Group/Group.js
@ -51,7 +51,7 @@ export default class Group extends Component {
        </Sider>
        <Layout>
          <Content style={{ height: '100%', margin: '0 24px 0 16px', overflow: 'initial', backgroundColor: '#fff' }}>
-            <Tabs type="card" className="m-tab" style={{ height: '100%' }}>
+            <Tabs type="card" size="large" className="m-tab" style={{ height: '100%' }}>
              <TabPane tab="项目列表" key="1"><ProjectList /></TabPane>
              {this.props.currGroup.type === 'public' ? <TabPane tab="成员列表" key="2"><MemberList /></TabPane> : null}
              {["admin", "owner", "guest", "dev"].indexOf(this.props.curUserRoleInGroup) > -1 || this.props.curUserRole === "admin" ? <TabPane tab="分组动态" key="3"><GroupLog /></TabPane> : ""}
--- a/client/containers/Group/GroupList/GroupList.js
+++ b/client/containers/Group/GroupList/GroupList.js
@ -256,6 +256,8 @@ export default class GroupList extends Component {
            onOk={this.addGroup}
            onCancel={this.hideModal}
            className="add-group-modal"
+            okText="确认"
+            cancelText="取消"
          >
            <Row gutter={6} className="modal-input">
              <Col span="5"><div className="label">分组名：</div></Col>
--- a/client/containers/Group/MemberList/MemberList.js
+++ b/client/containers/Group/MemberList/MemberList.js
@ -253,6 +253,8 @@ class MemberList extends Component {
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
+          okText="确认"
+          cancelText="取消"
        >
          <Row gutter={6} className="modal-input">
            <Col span="5"><div className="label usernamelabel">用户名: </div></Col>
@ -263,7 +265,7 @@ class MemberList extends Component {
          <Row gutter={6} className="modal-input">
            <Col span="5"><div className="label usernameauth">权限: </div></Col>
            <Col span="15">
-              <Select size="large" defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
+              <Select defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
                <Option value="owner">组长</Option>
                <Option value="dev">开发者</Option>
                <Option value="guest">访客</Option>
--- a/client/containers/Group/ProjectList/ProjectList.js
+++ b/client/containers/Group/ProjectList/ProjectList.js
@ -125,7 +125,7 @@ class ProjectList extends Component {
        {
          followProject.map((item, index) => {
            return (
-              <Col xs={8} md={6} xl={4} key={index}>
+              <Col xs={8} lg={6} xxl={4} key={index}>
                <ProjectCard projectData={item} callbackResult={this.receiveRes} />
              </Col>)
          })
@ -138,7 +138,7 @@ class ProjectList extends Component {
        {
          noFollow.map((item, index) => {
            return (
-              <Col xs={8} md={6} xl={4} key={index}>
+              <Col xs={8} lg={6} xxl={4} key={index}>
                <ProjectCard projectData={item} callbackResult={this.receiveRes} />
              </Col>)
          })
@ -180,7 +180,7 @@ class ProjectList extends Component {
          {
            this.props.currGroup.type === 'private' ? <OwnerSpace /> : projectData.length ? projectData.map((item, index) => {
              return (
-                <Col xs={8} md={6} xl={4} key={index}>
+                <Col xs={8} lg={6} xxl={4} key={index}>
                  <ProjectCard projectData={item} callbackResult={this.receiveRes} />
                </Col>);
            }) : <ErrMsg type="noProject" />
--- a/client/containers/Project/Interface/Interface.js
+++ b/client/containers/Project/Interface/Interface.js
@ -93,7 +93,7 @@ class Interface extends Component {
      <Layout style={{minHeight: 'calc(100vh - 156px)', marginLeft: '24px', marginTop: '24px'}}>
        <Sider style={{ height: '100%' }} width={300}>
          <div className="left-menu">
-            <Tabs type="card" activeKey={activeKey} onChange={this.onChange}>
+            <Tabs type="card" size= "large" activeKey={activeKey} onChange={this.onChange}>
              <Tabs.TabPane tab="接口列表" key="api">
                
              </Tabs.TabPane>
--- a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
+++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
@ -24,6 +24,8 @@ const ColModalForm = Form.create()((props) => {
      title={title}
      onCancel={onCancel}
      onOk={onCreate}
+      okText="确认"
+      cancelText="取消"
    >
      <Form layout="vertical">
        <FormItem label="集合名">
@ -170,6 +172,8 @@ export default class InterfaceColMenu extends Component {
    confirm({
      title: '您确认删除此测试集合',
      content: '温馨提示：该操作会删除该集合下所有测试用例，用例删除后无法恢复',
+      okText:"确认",
+      cancelText:"取消",
      async onOk() {
        const res = await axios.get('/api/col/del_col?col_id=' + colId)
        if (!res.data.errcode) {
@ -239,6 +243,8 @@ export default class InterfaceColMenu extends Component {
    confirm({
      title: '您确认删除此测试用例',
      content: '温馨提示：用例删除后无法恢复',
+      okText:"确认",
+      cancelText:"取消",
      async onOk() {
        const res = await axios.get('/api/col/del_case?caseid=' + caseId)
        if (!res.data.errcode) {
@ -525,6 +531,8 @@ export default class InterfaceColMenu extends Component {
          onCancel={this.handleImportCancel}
          className="import-case-modal"
          width={800}
+          okText="确认"
+          cancelText="取消"
        >
          <ImportInterface onChange={this.selectInterface} list={this.props.list} />
        </Modal>
--- a/client/containers/Project/Interface/InterfaceList/InterfaceContent.js
+++ b/client/containers/Project/Interface/InterfaceList/InterfaceContent.js
@ -127,7 +127,7 @@ class Content extends Component {

    plugin.emitHook('interface_tab', InterfaceTabs);

-    const tabs = <Tabs onChange={this.onChange} activeKey={this.state.curtab} defaultActiveKey="view"   >
+    const tabs = <Tabs size="large" onChange={this.onChange} activeKey={this.state.curtab} defaultActiveKey="view"   >
      {Object.keys(InterfaceTabs).map(key=>{
        let item = InterfaceTabs[key];
        return <TabPane tab={item.name} key={key}></TabPane>
--- a/client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
+++ b/client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
@ -198,6 +198,8 @@ class InterfaceMenu extends Component {
    const ref = confirm({
      title: '您确认删除此接口????',
      content: '温馨提示：接口删除后，无法恢复',
+      okText:"确认",
+      cancelText:"取消",
      async onOk() {
        await that.props.deleteInterfaceData(id, that.props.projectId)
        await that.getList()
@ -216,6 +218,8 @@ class InterfaceMenu extends Component {
    const ref = confirm({
      title: '确定删除此接口分类吗？',
      content: '温馨提示：该操作会删除该分类下所有接口，接口删除后无法恢复',
+      okText:"确认",
+      cancelText:"取消",
      async onOk() {
        await that.props.deleteInterfaceCatData(catid, that.props.projectId)
        await that.getList()
--- a/client/containers/Project/Interface/interface.scss
+++ b/client/containers/Project/Interface/interface.scss
@ -18,7 +18,7 @@
        background-color: $color-bg-gray;
    }
    .ant-tabs-tab{
-        min-width: 50%;
+        min-width: 49.4%;
    }
    .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
        height: 39px;
--- a/client/containers/Project/Setting/ProjectMember/ProjectMember.js
+++ b/client/containers/Project/Setting/ProjectMember/ProjectMember.js
@ -221,17 +221,19 @@ class ProjectMember extends Component {
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
+            okText="确认"
+            cancelText="取消"
          >
            <Row gutter={6} className="modal-input">
-              <Col span="5"><div className="label">用户名: </div></Col>
+              <Col span="5"><div className="label usernamelabel">用户名: </div></Col>
              <Col span="15">
                <UsernameAutoComplete callbackState={this.onUserSelect} />
              </Col>
            </Row>
            <Row gutter={6} className="modal-input">
-              <Col span="5"><div className="label">权限: </div></Col>
+              <Col span="5"><div className="label usernamelabel">权限: </div></Col>
              <Col span="15">
-                <Select size="large" defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
+                <Select  defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
                  <Option value="owner">组长</Option>
                  <Option value="dev">开发者</Option>
                  <Option value="guest">访客</Option>
--- a/client/containers/Project/Setting/Setting.js
+++ b/client/containers/Project/Setting/Setting.js
@ -16,7 +16,7 @@ class Setting extends Component {
    const id = this.props.match.params.id;
    return (
      <div className="g-row">
-        <Tabs type="card" className="has-affix-footer">
+        <Tabs size="large" type="card" className="has-affix-footer">
          <TabPane tab="项目配置" key="1">
            <ProjectMessage projectId={+id}/>
          </TabPane>
--- a/client/containers/Project/Setting/Setting.scss
+++ b/client/containers/Project/Setting/Setting.scss
@ -216,3 +216,7 @@
    }
  }
 }
+
+.radio.ant-radio-wrapper{
+  line-height: unset
+}
--- a/client/styles/common.scss
+++ b/client/styles/common.scss
@ -168,6 +168,12 @@ em {
  border: none;
 }

+.ant-tabs.ant-tabs-card > .ant-tabs-content{
+  margin-top: -1px;
+}
+
+
+
 // 页面级底部固定 需要添加padding以保证页面底部不被覆盖
 // .has-affix-footer {
 //   padding-bottom: .92rem;
--- a/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js
+++ b/exts/yapi-plugin-advanced-mock/MockCol/CaseDesModal.js
@ -325,6 +325,8 @@ export default class CaseDesModal extends Component {
        onCancel={() => onCancel()}
        afterClose={() => this.setState({ paramsForm: 'form' })}
        className="case-des-modal"
+        okText="确认"
+        cancelText="取消"
      >
        <Form>
          <h2 className="sub-title" style={{ marginTop: 0 }}>基本信息</h2>
--- a/package.json
+++ b/package.json
@ -29,6 +29,7 @@
    "ajv": "^5.5.1",
    "ajv-i18n": "^2.2.0",
    "antd": "^3.1.6",
+    "anujs": "^1.2.8",
    "axios": "^0.16.2",
    "deep-extend": "^0.5.0",
    "deref": "^0.7.0",