new style

src/components/CopyBlock/index.less

@@ -6,20 +6,36 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 80px;
-  height: 80px;
+  width: 40px;
+  height: 40px;
   font-size: 20px;
   background: #fff;
   border-radius: 40px;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
     0 1px 10px 0 rgba(0, 0, 0, 0.12);
   cursor: pointer;
+}
 
+.copy-block-view {
+  position: relative;
+  :global {
+    .ant-typography-copy {
+      position: absolute;
+      right: 5px;
+      bottom: 0px;
+    }
+  }
+  .copy-block-code {
+    color: #fff;
+    margin: 0 0.2em;
+    padding: 0.2em 0.4em 0.1em;
+    font-size: 85%;
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 3px;
+    display: inline-block;
+  }
   .copy-block-text {
     font-size: 12px;
+    margin: 0;
   }
 }
-.copy-block-code {
-  color: #fff;
-  background: #000;
-}

src/components/CopyBlock/index.tsx

@@ -17,9 +17,10 @@ const BlockCodeView: React.SFC<{
     url,
   )} --npm-client=cnpm  --path=${url}`;
   return (
-    <div>
+    <div className={styles['copy-block-view']}>
+      <p className={styles['copy-block-text']}>下载到项目中：</p>
       <Typography.Paragraph copyable>
-        <code className={styles['copy-block-code']}>{blockUrl}</code>
+        <div className={styles['copy-block-code']}>{blockUrl}</div>
       </Typography.Paragraph>
     </div>
   );
@@ -29,12 +30,7 @@ export default ({ url }: { url: string }) => {
   return (
     <Tooltip placement="topLeft" title={<BlockCodeView url={url} />} trigger="click">
       <div className={styles['copy-block']}>
-        <Icon type="code" />
-        <div className={styles['copy-block-text']}>
-          下载到
-          <br />
-          项目中
-        </div>
+        <Icon type="download" />
       </div>
     </Tooltip>
   );

src/layouts/BasicLayout.tsx

@@ -14,6 +14,7 @@ import {
   SettingDrawer,
 } from '@ant-design/pro-layout';
 import Link from 'umi/link';
+import { isAntDesignProOrDev } from '@/utils/utils';
 
 export interface BasicLayoutProps extends BasicLayoutComponentsProps, ConnectProps {
   breadcrumbNameMap: { [path: string]: MenuDataItem };
@@ -81,7 +82,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
       >
         {children}
       </BasicLayoutComponents>
-      {ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' && (
+      {isAntDesignProOrDev() && (
         <SettingDrawer
           settings={settings}
           onSettingChange={config =>
@@ -92,7 +93,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = props => {
           }
         />
       )}
-      <CopyBlock url={location!.pathname} />
+      {isAntDesignProOrDev() && <CopyBlock url={location!.pathname} />}
     </>
   );
 };

src/services/api.js

-import { stringify } from 'qs';
-import request from '@/utils/request';
-
-export async function queryProjectNotice() {
-  return request('/api/project/notice');
-}
-
-export async function queryActivities() {
-  return request('/api/activities');
-}
-
-export async function queryRule(params) {
-  return request(`/api/rule?${stringify(params)}`);
-}
-
-export async function removeRule(params) {
-  return request('/api/rule', {
-    method: 'POST',
-    data: {
-      ...params,
-      method: 'delete',
-    },
-  });
-}
-
-export async function addRule(params) {
-  return request('/api/rule', {
-    method: 'POST',
-    data: {
-      ...params,
-      method: 'post',
-    },
-  });
-}
-
-export async function updateRule(params = {}) {
-  return request(`/api/rule?${stringify(params.query)}`, {
-    method: 'POST',
-    data: {
-      ...params.body,
-      method: 'update',
-    },
-  });
-}
-
-export async function fakeSubmitForm(params) {
-  return request('/api/forms', {
-    method: 'POST',
-    data: params,
-  });
-}
-
-export async function fakeChartData() {
-  return request('/api/fake_chart_data');
-}
-
-export async function queryTags() {
-  return request('/api/tags');
-}
-
-export async function queryBasicProfile(id) {
-  return request(`/api/profile/basic?id=${id}`);
-}
-
-export async function queryAdvancedProfile() {
-  return request('/api/profile/advanced');
-}
-
-export async function queryFakeList(params) {
-  return request(`/api/fake_list?${stringify(params)}`);
-}
-
-export async function removeFakeList(params) {
-  const { count = 5, ...restParams } = params;
-  return request(`/api/fake_list?count=${count}`, {
-    method: 'POST',
-    data: {
-      ...restParams,
-      method: 'delete',
-    },
-  });
-}
-
-export async function addFakeList(params) {
-  const { count = 5, ...restParams } = params;
-  return request(`/api/fake_list?count=${count}`, {
-    method: 'POST',
-    data: {
-      ...restParams,
-      method: 'post',
-    },
-  });
-}
-
-export async function updateFakeList(params) {
-  const { count = 5, ...restParams } = params;
-  return request(`/api/fake_list?count=${count}`, {
-    method: 'POST',
-    data: {
-      ...restParams,
-      method: 'update',
-    },
-  });
-}
-
-export async function fakeAccountLogin(params) {
-  return request('/api/login/account', {
-    method: 'POST',
-    data: params,
-  });
-}
-
-export async function fakeRegister(params) {
-  return request('/api/register', {
-    method: 'POST',
-    data: params,
-  });
-}
-
-export async function queryNotices(params = {}) {
-  return request(`/api/notices?${stringify(params)}`);
-}
-
-export async function getFakeCaptcha(mobile) {
-  return request(`/api/captcha?mobile=${mobile}`);
-}

src/utils/utils.ts

@@ -4,3 +4,15 @@ const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(
 export function isUrl(path: string) {
   return reg.test(path);
 }
+
+// 给官方演示站点用，用于关闭真实开发环境不需要使用的特性
+export function isAntDesignProOrDev() {
+  const { NODE_ENV } = process.env;
+  if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
+    return true;
+  }
+  if (NODE_ENV === 'development') {
+    return true;
+  }
+  return window.location.hostname === 'preview.pro.ant.design';
+}