Skip to content

添加钉钉开发平台集成页面 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

添加钉钉开发平台集成页面 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 209 additions & 0 deletions DingDevPlatForm/components/DingTalkDeveloperPlatform/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
@color-1: #007fff;
@color-2: #171a1d;
@color-3: #0089ff;
@color-4: #747677;
@color-5: #fff;
@color-6: #eaeced;
@color-7: #e0e2e4;
@font-size-base: 14px;
@margin-md: 16px;
@margin-sm: 12px;
@margin-xss: 4px;
@padding-lg: 24px;
@padding-md: 16px;
@padding-sm: 12px;

.wrapper {
display: flex;
flex-direction: column;
width: 871.5px;
padding: @padding-md 10px @padding-sm;
background-color: @color-5;
}

.platformHeader {
display: flex;
flex-direction: row;
align-items: center;
align-self: flex-start;
}

.logoImage {
flex-shrink: 0;
width: 35px;
height: 42px;
border-radius: 3px;
}

.platformLink {
margin-left: @margin-xss;
white-space: nowrap;
color: @color-1;
font-size: 27px;
}

.platformDescription {
margin-top: 18px;
margin-left: @margin-xss;
color: @color-2;
font-size: 33px;
font-weight: bold;
}

.platformOptions {
display: flex;
flex-direction: column;
margin-top: 14px;
margin-left: 2px;
}

.internalAppSection {
display: flex;
flex-direction: column;
padding: 22px 438px 26px 25px;
border: solid 1px @color-6;
border-radius: 11px;
background-color: @color-5;
}

.componentSharedYdo6 {
margin-left: 2px;
color: @color-2;
font-size: 18px;
font-weight: bold;
}

.internalAppText {
margin-top: @margin-sm;
margin-left: 2px;
white-space: nowrap;
color: @color-4;
font-size: @font-size-base;
}

.componentSharedXmy3 {
color: @color-3;
font-size: @font-size-base;
}

.internalAppButton {
align-self: flex-start;
min-width: 100px;
height: 36px;
margin-top: 14px;
border: none;
}

.thirdPartyAppSection {
display: flex;
flex-direction: column;
margin-top: 20px;
margin-right: 2px;
padding: 22px @padding-lg 30px;
border: solid 1px @color-6;
border-radius: 12px;
background-color: @color-5;
}

.thirdPartyAppTitle {
display: flex;
flex-direction: column;
align-self: flex-start;
margin-left: 2px;
}

.thirdPartyAppDescription {
display: flex;
flex-direction: column;
margin-top: @margin-sm;
}

.thirdPartyAppText {
margin-left: 2px;
white-space: nowrap;
color: @color-4;
font-size: @font-size-base;
}

.thirdPartyAppActions {
display: flex;
flex-direction: row;
align-items: center;
align-self: flex-start;
margin-top: 14px;
}

.thirdPartyAppButton {
min-width: 102px;
height: 36px;
border: none;
}

.whatIsThirdPartyAppLink {
margin-left: 20px;
white-space: nowrap;
color: @color-3;
font-size: @font-size-base;
}

.sectionDivider {
height: 1px;
margin-top: 20px;
margin-left: 2px;
background-color: @color-7;
}

.additionalResources {
display: flex;
flex-direction: row;
align-items: center;
align-self: flex-start;
margin-top: 18px;
}

.resourceLinks {
display: flex;
flex-direction: row;
align-items: center;
}

.componentCommonQay8 {
flex-shrink: 0;
width: 16px;
height: 16px;
}

.componentCommonQay8:nth-child(1) {
border-radius: 9px;
}

.componentSharedLes5 {
margin-left: 2px;
white-space: nowrap;
color: @color-3;
font-size: @font-size-base;
}

.componentCommonQay8:nth-child(2) {
margin-left: 14px;
border-radius: 9px;
}

.componentCommonQay8:nth-child(3) {
margin-left: 14px;
border-radius: 8px;
}

.officialWebsiteLink {
margin-left: @margin-xss;
white-space: nowrap;
color: @color-3;
font-size: @font-size-base;
}

.serviceGroupInfo {
margin-left: @margin-md;
white-space: nowrap;
color: @color-3;
font-size: @font-size-base;
}
93 changes: 93 additions & 0 deletions DingDevPlatForm/components/DingTalkDeveloperPlatform/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React from 'react';
import { Button, Divider } from 'antd';

import styles from './index.less';

const DingTalkDeveloperPlatform: React.FC = () => {
const onGoNowClick = () => {};

const onGoNowClick2 = () => {};

return (
<div className={styles.wrapper}>
<div className={styles.platformHeader}>
<img
alt=""
src="https://weavefox.alipay.com/assets/fd7c8cbc-3a70-4767-9c2b-1e496376f3bf.png"
className={styles.logoImage}
/>
<a className={styles.platformLink}>钉钉开放平台</a>
</div>
<span className={styles.platformDescription}>
集团开发者请根据开发类型选择相应平台
</span>
<div className={styles.platformOptions}>
<div className={styles.internalAppSection}>
<span className={styles.componentSharedYdo6}>开发阿里巴巴内部应用</span>
<span className={styles.internalAppText}>
开发仅限集团内部使用的应用，请移步
<a className={styles.componentSharedXmy3}>轻研·阿里钉开放平台</a>
</span>
<Button
type="primary"
onClick={onGoNowClick}
className={styles.internalAppButton}
>
立即前往
</Button>
</div>
<div className={styles.thirdPartyAppSection}>
<div className={styles.thirdPartyAppTitle}>
<span className={styles.componentSharedYdo6}>开发第三方企业应用</span>
<div className={styles.thirdPartyAppDescription}>
<span className={styles.thirdPartyAppText}>
开发上架到钉钉应用市场的应用，可在开发者后台选择其他组织开发
</span>
<div className={styles.thirdPartyAppActions}>
<Button
type="primary"
onClick={onGoNowClick2}
className={styles.thirdPartyAppButton}
>
立即前往
</Button>
<a className={styles.whatIsThirdPartyAppLink}>
什么是三方应用?
</a>
</div>
</div>
</div>
<Divider className={styles.sectionDivider} />
<div className={styles.additionalResources}>
<div className={styles.resourceLinks}>
<img
alt=""
src="https://weavefox.alipay.com/assets/780af746-7b08-4ea3-9ef4-89a79ddd72ca.png"
className={styles.componentCommonQay8}
/>
<a className={styles.componentSharedLes5}>接入流程</a>
<img
alt=""
src="https://weavefox.alipay.com/assets/61f51495-82bd-4e6a-aa12-523d73f66bc8.png"
className={styles.componentCommonQay8}
/>
<a className={styles.componentSharedLes5}>开发文档</a>
<img
alt=""
src="https://weavefox.alipay.com/assets/e1f688d7-6907-49d0-aabe-007337c1665c.png"
className={styles.componentCommonQay8}
/>
</div>
<a className={styles.officialWebsiteLink}>钉钉开放平台官网</a>
<span className={styles.serviceGroupInfo}>
<a className={styles.componentSharedXmy3}>内部服务群:</a>
33317273
</span>
</div>
</div>
</div>
</div>
);
};

export default DingTalkDeveloperPlatform;
8 changes: 8 additions & 0 deletions DingDevPlatForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import DingTalkDeveloperPlatform from './components/DingTalkDeveloperPlatform';

const MyPageComponent: React.FC = () => {
return <DingTalkDeveloperPlatform />;
};

export default MyPageComponent;