[update] 优化样式, 选择逻辑

TencentCloudBase · Sep 22, 2020 · 811e9a0 · 811e9a0
1 parent e489b93
commit 811e9a0
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 89 deletions.
diff --git a/.env.example b/.env.example
@@ -2,7 +2,7 @@
 TCB_ENVID=
 # 管理员账户名，账号名长度需要大于 4 位，支持字母和数字
 administratorName=admin
-# 管理员账号密码，密码支持字母、数字、字符、不能由纯字母或存数字组成
+# 管理员账号密码，8~32位，密码支持字母、数字、字符、不能由纯字母或存数字组成
 administratorPassword=
 # CMS 控制台路径，如 /tcb-cms/
 deployPath=

diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@
 TCB_ENVID=envId
 # 管理员账户名，账号名长度需要大于 4 位，支持字母和数字
 administratorName=admin
-# 管理员账号密码，密码支持字母、数字、字符、不能由纯字母或存数字组成
+# 管理员账号密码，8~32位，密码支持字母、数字、字符、不能由纯字母或存数字组成
 administratorPassword=82902Jkl
 # CMS 控制台路径，如 /tcb-cms/
 deployPath=/tcb-cms/

diff --git a/packages/admin/config/defaultSettings.ts b/packages/admin/config/defaultSettings.ts
@@ -3,7 +3,6 @@ import { Settings as LayoutSettings } from '@ant-design/pro-layout'
 
 export default {
   navTheme: 'light',
-  // 拂晓蓝
   primaryColor: '#0052d9',
   layout: 'mix',
   contentWidth: 'Fluid',

diff --git a/packages/admin/package.json b/packages/admin/package.json
@@ -34,7 +34,7 @@
     "@ant-design/pro-card": "^1.0.0-beta.6",
     "@ant-design/pro-layout": "^6.4.5",
     "@ant-design/pro-list": "^0.0.8",
-    "@ant-design/pro-table": "^2.5.15",
+    "@ant-design/pro-table": "2.5.14",
     "@umijs/hooks": "^1.9.3",
     "antd": "^4.5.4",
     "classnames": "^2.2.6",

diff --git a/packages/admin/src/components/HeaderTitle/index.tsx b/packages/admin/src/components/HeaderTitle/index.tsx
@@ -10,7 +10,7 @@ const HeaderTitle: React.SFC<{ collapsed: boolean }> = (props) => (
       history.push('/home')
     }}
   >
-    <img src={logo} alt="logo" />
+    <img src={logo} alt="logo" style={{ height: '35px', width: '35px' }} />
     <h1>{props.collapsed ? null : 'CloudBase CMS'}</h1>
   </a>
 )

diff --git a/packages/admin/src/global.less b/packages/admin/src/global.less
@@ -82,6 +82,9 @@ h4.ant-typography {
   font-size: 18px !important;
 }
 
-.ant-pro-global-header-layout-mix {
-  background-image: linear-gradient(125deg, #002766 20%, #0050b3 20%) !important;
+#root .ant-pro-global-header-layout-mix {
+  // background-color: #262F3E !important;
+  background: #262f3e !important;
+  background: -webkit-linear-gradient(to right, #262f3e, #536976) !important;
+  background: linear-gradient(to right, #262f3e, #536976) !important;
 }
diff --git a/packages/admin/src/pages/index.less b/packages/admin/src/pages/index.less
@@ -1,73 +1,83 @@
 .home {
-    height: 100%;
-    margin: -24px;
+  height: 100%;
+  margin: -24px;
 
-    .header {
-        position: relative;
-        background-color: #fff;
-        box-shadow: 0 2px 8px #f0f1f2;
-        font-weight: bolder;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+  .header {
+    position: relative;
+    background: #262f3e;
+    background: -webkit-linear-gradient(to right, #262f3e, #536976);
+    background: linear-gradient(to right, #262f3e, #536976);
 
-        .title {
-            font-size: 1.5rem;
-        }
+    color: #fff;
+    box-shadow: 0 2px 8px #f0f1f2;
+    font-weight: bolder;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+
+    .title {
+      color: #fff;
+      height: 32px;
+      line-height: 32px;
+      margin-bottom: 0;
+      font-size: 18px;
+      font-weight: bold;
     }
+  }
 }
 
 .footer {
-    text-align: center;
-    margin-bottom: -40px;
+  text-align: center;
+  margin-bottom: -40px;
 }
 
 .account {
-    position: absolute;
-    right: 40px;
+  position: absolute;
+  right: 40px;
 }
 
 .logo {
-    width: 35px;
-    height: 35px;
-    margin-right: 10px;
+  width: 35px;
+  height: 35px;
+  margin-right: 10px;
 }
 
 .content {
-    padding: 30px 0;
+  padding: 30px 0;
 }
 
 .project {
-    min-height: 8rem;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    margin: 20px 10px;
+  min-height: 8rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 20px 10px;
 
-    &-title {
-        margin-top: 2em;
-        max-width: 100px;
-    }
+  &-title {
+    margin-top: 2em;
+    max-width: 100px;
+  }
 
-    &-desc {
-        max-width: 100px;
-    }
+  &-desc {
+    max-width: 100px;
+    height: 30px;
+  }
 
-    &-logo {
-        background-color: black;
-        color: rgb(255, 255, 255);
-        font-size: 32px;
-        line-height: 80px;
-        text-align: center;
-        font-weight: 600;
-        width: 80px;
-        height: 80px;
-        min-height: 80px;
-        min-width: 80px;
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        border-radius: 8px;
-    }
+  &-logo {
+    background-color: #262f3e;
+    color: rgb(255, 255, 255);
+    font-size: 32px;
+    line-height: 80px;
+    text-align: center;
+    font-weight: 600;
+    width: 80px;
+    height: 80px;
+    min-height: 80px;
+    min-width: 80px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 8px;
+  }
 }
diff --git a/packages/admin/src/pages/index.tsx b/packages/admin/src/pages/index.tsx
@@ -41,7 +41,7 @@ export default (): React.ReactNode => {
     <Layout className={styles.home}>
       <Header className={styles.header}>
         <img className={styles.logo} src={logo} alt="logo" />
-        <span className={styles.title}>CloudBase CMS</span>
+        <h1 className={styles.title}>CloudBase CMS</h1>
         <div className={styles.account}>
           <AvatarDropdown />
         </div>
@@ -53,7 +53,7 @@ export default (): React.ReactNode => {
             md={{ offset: 4 }}
             lg={{ offset: 6 }}
             xl={{ offset: 6 }}
-            xxl={{ offset: 8 }}
+            xxl={{ offset: 6 }}
           />
           <Col flex="1 1 auto">
             <Row gutter={[24, 40]}>
@@ -86,9 +86,9 @@ export default (): React.ReactNode => {
                         </Typography.Title>
                       </Tooltip>
                       <Tooltip title={project.description}>
-                        <Typography.Paragraph ellipsis className={styles['project-desc']}>
+                        <Typography.Text ellipsis className={styles['project-desc']}>
                           {project.description}
-                        </Typography.Paragraph>
+                        </Typography.Text>
                       </Tooltip>
                     </div>
                   </Card>
@@ -102,7 +102,7 @@ export default (): React.ReactNode => {
             md={{ offset: 4 }}
             lg={{ offset: 6 }}
             xl={{ offset: 6 }}
-            xxl={{ offset: 8 }}
+            xxl={{ offset: 6 }}
           />
         </Row>
       </Content>

diff --git a/packages/admin/src/pages/project/content/ContentTable.tsx b/packages/admin/src/pages/project/content/ContentTable.tsx
@@ -148,6 +148,11 @@ export const ContentTable: React.FC<{
             key="button"
             icon={<PlusOutlined />}
             onClick={() => {
+              if (!currentSchema?._id) {
+                message.error('请选择需要创建的内容类型！')
+                return
+              }
+
               ctx.setState({
                 contentAction: 'create',
                 selectedContent: null,

diff --git a/packages/admin/src/pages/project/content/components/FieldComponents.tsx b/packages/admin/src/pages/project/content/components/FieldComponents.tsx
@@ -241,7 +241,9 @@ export const ConnectEditor: React.FC<{
           </Option>
         ))
       ) : (
-        <Option value="">空</Option>
+        <Option value="" disabled>
+          空
+        </Option>
       )}
     </Select>
   )
@@ -573,7 +575,9 @@ export function getFieldFormItem(field: SchemaFieldV2, key: number) {
                 </Option>
               ))
             ) : (
-              <Option value="">空</Option>
+              <Option value="" disabled>
+                空
+              </Option>
             )}
           </Select>
         </Form.Item>

diff --git a/packages/admin/src/pages/project/content/components/SearchForm.tsx b/packages/admin/src/pages/project/content/components/SearchForm.tsx
@@ -167,7 +167,9 @@ export function getSearchFieldItem(field: SchemaFieldV2, key: number) {
                 </Option>
               ))
             ) : (
-              <Option value="">空</Option>
+              <Option value="" disabled>
+                空
+              </Option>
             )}
           </Select>
         </Form.Item>

diff --git a/packages/admin/src/pages/project/content/index.tsx b/packages/admin/src/pages/project/content/index.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'umi'
 import { useConcent } from 'concent'
 import ProCard from '@ant-design/pro-card'
-import { Menu, Spin, Empty, Row, Col } from 'antd'
+import { Menu, Spin, Empty, Row, Col, Typography } from 'antd'
 import { PageContainer } from '@ant-design/pro-layout'
 import React, { useEffect, useRef, useState } from 'react'
 import { ContentDrawer } from './components'

diff --git a/packages/admin/src/pages/project/schema/FieldModal.tsx b/packages/admin/src/pages/project/schema/FieldModal.tsx
@@ -195,7 +195,7 @@ export const CreateFieldModal: React.FC<{
                         </Option>
                       ))
                     ) : (
-                      <Option value="" key={selectedField.name}>
+                      <Option value="" key={selectedField.name} disabled>
                         空
                       </Option>
                     )}

diff --git a/packages/admin/src/pages/system/setting/RoleCreating/RolePermission.tsx b/packages/admin/src/pages/system/setting/RoleCreating/RolePermission.tsx
@@ -279,7 +279,7 @@ const ResourceSelect: React.FC<{
             )
           default:
             return (
-              <Select.Option key="index" value="">
+              <Select.Option key="index" value="" disabled>
                 空
               </Select.Option>
             )

diff --git a/packages/admin/yarn.lock b/packages/admin/yarn.lock
@@ -82,25 +82,25 @@
     umi-utils "^1.5.1"
     yargs-parser "^16.1.0"
 
-"@ant-design/pro-field@0.0.19":
-  version "0.0.19"
-  resolved "https://registry.yarnpkg.com/@ant-design/pro-field/-/pro-field-0.0.19.tgz#e517ead7f4ee5f9d44366b742a7a34c0b0259ff4"
-  integrity sha512-6JFx1MYeSZycN/POpXIYiCE20E51FW6mWvylaW3ak0HkdK3lJW1l1SMMHLJpEFIQw/H1glro9MJC8KPvYcWZcg==
+"@ant-design/pro-field@0.0.18":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@ant-design/pro-field/-/pro-field-0.0.18.tgz#00190093e26b2f94f71a6c4f19e34594a9b955f8"
+  integrity sha512-ONlmFfFP118bL3MK1jV1eyAZZjRBHmBUFN9Q6iJVGecfiIu2RF9LAZGLuIusQC4bZcZ9xbyCO6yp/mtE864EPA==
   dependencies:
     classnames "^2.2.6"
     lodash.isequal "^4.5.0"
     lodash.tonumber "^4.0.3"
     moment "^2.27.0"
 
-"@ant-design/pro-form@1.0.0-beta.17":
-  version "1.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@ant-design/pro-form/-/pro-form-1.0.0-beta.17.tgz#417aa824aa8b307d3924e43c5af86fba01eb9b0f"
-  integrity sha512-GpQz1EFT1Wy8dyoFNMLNSVCEpdjOifAx1uvhig5jwtHP5zEHQIuuI0GrPlZQTtqSBCdpRS+NHh5N+TENZdMiZg==
+"@ant-design/pro-form@1.0.0-beta.16":
+  version "1.0.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@ant-design/pro-form/-/pro-form-1.0.0-beta.16.tgz#a0cf85bf70b2e3ebfea9cc72c1cd1dc84fa88cbc"
+  integrity sha512-t7GXxBhK/7a39oWi0GxfpiL03HmIfqC17OIzUcLcJUwDYYkVOPGxxr/nFLhSrUCqkv0qO2dHQG0Bl1k1ejAUQA==
   dependencies:
     "@ant-design/icons" "^4.2.1"
-    "@ant-design/pro-field" "0.0.19"
+    "@ant-design/pro-field" "0.0.18"
     "@ant-design/pro-provider" "0.0.5"
-    "@ant-design/pro-utils" "0.0.7"
+    "@ant-design/pro-utils" "0.0.6"
     classnames "^2.2.6"
     rc-resize-observer "^0.2.3"
     use-media-antd-query "^1.0.2"
@@ -155,16 +155,16 @@
   dependencies:
     rc-util "^5.0.1"
 
-"@ant-design/pro-table@^2.5.15":
-  version "2.5.15"
-  resolved "https://registry.yarnpkg.com/@ant-design/pro-table/-/pro-table-2.5.15.tgz#c6be89aada631fc7b4dd2bbc0f1cefcb5946c700"
-  integrity sha512-vW7vQ/fcATrCaA+93fnX/ZH1fIVXS7hoomraOaX+rezdRIQPydnMuQl9b3rEG4irp6pfOx3VxPQJGEUZC4cduA==
+"@ant-design/pro-table@2.5.14":
+  version "2.5.14"
+  resolved "https://registry.yarnpkg.com/@ant-design/pro-table/-/pro-table-2.5.14.tgz#20efd291c195d569a404c302c601dc39b6d28cf9"
+  integrity sha512-0hR+vE1v5AUFIGD5vvYq9tYdvI0J320dBQybog7VvyQPAds9GXXBbRxqIDf6H9tALE2i6Wh3D+yeWLDa5ktO7g==
   dependencies:
     "@ant-design/icons" "^4.1.0"
-    "@ant-design/pro-field" "0.0.19"
-    "@ant-design/pro-form" "1.0.0-beta.17"
+    "@ant-design/pro-field" "0.0.18"
+    "@ant-design/pro-form" "1.0.0-beta.16"
     "@ant-design/pro-provider" "0.0.5"
-    "@ant-design/pro-utils" "0.0.7"
+    "@ant-design/pro-utils" "0.0.6"
     antd "^4.1.5"
     classnames "^2.2.6"
     dnd-core "^10.0.2"
@@ -186,10 +186,10 @@
     lodash.isequal "^4.5.0"
     rc-util "^5.0.6"
 
-"@ant-design/pro-utils@0.0.7":
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/@ant-design/pro-utils/-/pro-utils-0.0.7.tgz#757290a7fa19c05fb2ba524ea54a6bfab17f12f3"
-  integrity sha512-uOGCiILLx5Pvy26lUQ6OtYbZpPql59ZQL5HZt5nClV5BlpK3PYfOffRhJrtf6qIy6kzTxyIrn1UsKPTJMUvicg==
+"@ant-design/pro-utils@0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@ant-design/pro-utils/-/pro-utils-0.0.6.tgz#d5518474fd55049b88647591ccd2483e28b83f20"
+  integrity sha512-TozPfUJOavdV+OfRtdWaM7V2gnEOMMFwyWL98/zdJdlJvyswJj6IDyg0LmJX3sYzbk1Y3Y8SUjq2oRPOXeRP6Q==
   dependencies:
     "@types/lodash.isequal" "^4.5.5"
     lodash.isequal "^4.5.0"