From 4aae9cf21a572d130a81b18d5beca4e171f05769 Mon Sep 17 00:00:00 2001 From: huangqiao <3029858210@qq.com> Date: Mon, 23 Jun 2025 23:08:14 +0800 Subject: [PATCH] feat: update components --- .../DingTalkDeveloperPlatform/index.less | 209 ++++++++++++++++++ .../DingTalkDeveloperPlatform/index.tsx | 93 ++++++++ DingDevPlatForm/index.tsx | 8 + 3 files changed, 310 insertions(+) create mode 100644 DingDevPlatForm/components/DingTalkDeveloperPlatform/index.less create mode 100644 DingDevPlatForm/components/DingTalkDeveloperPlatform/index.tsx create mode 100644 DingDevPlatForm/index.tsx diff --git a/DingDevPlatForm/components/DingTalkDeveloperPlatform/index.less b/DingDevPlatForm/components/DingTalkDeveloperPlatform/index.less new file mode 100644 index 0000000..d86a468 --- /dev/null +++ b/DingDevPlatForm/components/DingTalkDeveloperPlatform/index.less @@ -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; +} diff --git a/DingDevPlatForm/components/DingTalkDeveloperPlatform/index.tsx b/DingDevPlatForm/components/DingTalkDeveloperPlatform/index.tsx new file mode 100644 index 0000000..63f3839 --- /dev/null +++ b/DingDevPlatForm/components/DingTalkDeveloperPlatform/index.tsx @@ -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 ( +
+
+ + 钉钉开放平台 +
+ + 集团开发者请根据开发类型选择相应平台 + +
+
+ 开发阿里巴巴内部应用 + + 开发仅限集团内部使用的应用，请移步 + 轻研·阿里钉开放平台 + + +
+
+
+ 开发第三方企业应用 +
+ + 开发上架到钉钉应用市场的应用，可在开发者后台选择其他组织开发 + +
+ + + 什么是三方应用? + +
+
+
+ +
+ + 钉钉开放平台官网 + + 内部服务群: + 33317273 + +
+
+
+
+ ); +}; + +export default DingTalkDeveloperPlatform; diff --git a/DingDevPlatForm/index.tsx b/DingDevPlatForm/index.tsx new file mode 100644 index 0000000..74f2b48 --- /dev/null +++ b/DingDevPlatForm/index.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import DingTalkDeveloperPlatform from './components/DingTalkDeveloperPlatform'; + +const MyPageComponent: React.FC = () => { + return ; +}; + +export default MyPageComponent;