From 19e43d5260e84f8ce0ab98efaf51827916d9a6a7 Mon Sep 17 00:00:00 2001 From: "DESKTOP-HR0JS52\\jun" Date: Sun, 30 Oct 2022 17:31:55 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=BC=96=E5=86=99=E4=B8=AA=E4=BA=BA?= =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ImageComponent.md" | 19 ++- .../View.md" | 29 +++-- src/components/View/index.tsx | 6 +- .../user/userinfo/index.module.scss | 56 ++++++++ .../apps/management/user/userinfo/index.tsx | 121 +++++++++++++++--- src/public/img/icon/user/default.png | Bin 0 -> 6065 bytes 6 files changed, 189 insertions(+), 42 deletions(-) create mode 100644 src/pages/apps/management/user/userinfo/index.module.scss create mode 100644 src/public/img/icon/user/default.png diff --git "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md" "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md" index 3e057d1..025445f 100644 --- "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md" +++ "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/ImageComponent.md" @@ -3,6 +3,11 @@ ## 基本用法 ### 图片 + +``` +import { IMAGE_TYPE } from '@/common/constants' +``` + ```typescript jsx Image
+ ```typescript jsx export interface Image { type: number @@ -36,6 +43,7 @@ export interface Image { ``` ### type 类型常量 + ```typescript jsx // 图标类型 const IMAGE_TYPE = { @@ -44,3 +52,4 @@ const IMAGE_TYPE = { ALI: 2 // 阿里图标库 } ``` + diff --git "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md" "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md" index 203b191..b23bdec 100644 --- "a/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md" +++ "b/docs/\345\205\254\345\205\261\347\273\204\344\273\266/View.md" @@ -16,20 +16,21 @@ ## API -| 参数 | 说明 | 类型 | 默认值 | -|------------|-----------------------|-------------------------------------|-------| -| className | 最外层 div className 属性 | string | - | -| breadcrumb | 面包屑 | [BreadcrumbData](#BreadcrumbData)[] | - | -| back | 后退方法 | (e:MouseEvent) => void | - | -| extra | 操作区，位于 title 行的行尾行 | ReactNode | - | -| title | 自定义标题文字 | ReactNode | - | -| subTitle | 自定义二级标题文字 | ReactNode | - | -| footer | View的页脚，一般用于渲染 TabBar | ReactNode | - | -| style | 最外层 div style 属性 | CSSProperties | - | -| border | 是否显示边框 | boolean | false | -| margin | 是否显示外边距，24px | boolean | true | -| padding | 是否显示内边距，24px | boolean | true | -| radius | 是否边框圆角 | boolean | true | +| 参数 | 说明 | 类型 | 默认值 | +|------------------|-----------------------|-------------------------------------|-------| +| className | 最外层 div className 属性 | string | - | +| breadcrumb | 面包屑 | [BreadcrumbData](#BreadcrumbData)[] | - | +| back | 后退方法 | (e:MouseEvent) => void | - | +| extra | 操作区，位于 title 行的行尾行 | ReactNode | - | +| title | 自定义标题文字 | ReactNode | - | +| subTitle | 自定义二级标题文字 | ReactNode | - | +| footer | View的页脚，一般用于渲染 TabBar | ReactNode | - | +| style | 最外层 div style 属性 | CSSProperties | - | +| border | 是否显示边框 | boolean | false | +| margin | 是否显示外边距，24px | boolean | true | +| padding | 是否显示内边距，24px | boolean | true | +| radius | 是否边框圆角 | boolean | true | +| contentClassName | children className属性 | string | - | ### children View内容定义 diff --git a/src/components/View/index.tsx b/src/components/View/index.tsx index b20a018..9649de5 100644 --- a/src/components/View/index.tsx +++ b/src/components/View/index.tsx @@ -24,6 +24,7 @@ interface Props { margin?: boolean padding?: boolean radius?: boolean + contentClassName?: string } const View: React.FC = ({ @@ -39,7 +40,8 @@ const View: React.FC = ({ border = false, margin = true, padding = true, - radius = true + radius = true, + contentClassName }) => { return (
= ({
{extra &&
{extra}
}
- {children} +
{children}
{footer && ( <>
diff --git a/src/pages/apps/management/user/userinfo/index.module.scss b/src/pages/apps/management/user/userinfo/index.module.scss new file mode 100644 index 0000000..727be66 --- /dev/null +++ b/src/pages/apps/management/user/userinfo/index.module.scss @@ -0,0 +1,56 @@ +$color: #999; + +.box { + width: 100%; + height: 100%; + overflow: auto; +} + +.userinfo { + min-width: 783px; +} + +.header { + display: flex; +} + +.icon { + width: 60px; + height: 60px; +} + +.headerItemBox { + padding: 6px 25px 0; + border-right: 1px solid $color; +} + +.headerItemLabel { + color: $color; +} + +.headerItemValue { + font-weight: bold; + text-align: center; + margin-top: 4px; +} + +.nameBox { + width: 140px; + padding-left: 15px; +} + +.name { + font-weight: bold; +} + +.role { + color: $color +} + +.logout { + margin-top: 3px; +} + +.date { + color: $color; +} diff --git a/src/pages/apps/management/user/userinfo/index.tsx b/src/pages/apps/management/user/userinfo/index.tsx index 6c52668..6dcb107 100644 --- a/src/pages/apps/management/user/userinfo/index.tsx +++ b/src/pages/apps/management/user/userinfo/index.tsx @@ -1,29 +1,108 @@ import React from 'react' import View from '@/components/View' -import { Button, Tabs } from 'antd' +import { Button, List, Typography } from 'antd' +import { InfoCircleFilled } from '@ant-design/icons' +import styles from './index.module.scss' +import userIcon from '@img/icon/user/default.png' +import ImageComponent from '@/components/ImageComponent' +import { IMAGE_TYPE } from '@/common/constants' +import classnames from 'classnames' + +const data = [ + { + id: 1, + title: '你有一个事项未处理', + date: '2022/09/21 13:56', + typeText: '紧急', + type: 1 + }, + { + id: 2, + title: '你有一个事项未处理', + date: '2022/09/21 13:56', + typeText: '紧急', + type: 1 + }, + { + id: 3, + title: '你有一个事项未处理', + date: '2022/09/21 13:56', + typeText: '普通', + type: 0 + } +] const Userinfo: React.FC = () => { - const items = [ - { label: '选项一', key: '1' }, - { label: '选项二', key: '2' } - ] return ( -
- 按钮} - back={(e: any) => console.log(e)} - title="主标题" - subTitle="副标题asd" - footer={}> - info - - 按钮}> - content - +
+
+ +
+ +
+
+
李元芳
+
集团总经理
+
+
+
代办事项
+
12
+
+
+
今日任务
+
16
+
+
+
我的计划
+
7
+
+
+
完成事项
+
10
+
+
+
+
+ +
+
+ +
+
+ + + ( + + + } + title={item.title} + /> +
{item.date}
+ + )} + /> + +
) } diff --git a/src/public/img/icon/user/default.png b/src/public/img/icon/user/default.png new file mode 100644 index 0000000000000000000000000000000000000000..f26a73fc45953c7b4acd49789bad59a8f54b52a0 GIT binary patch literal 6065 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 fTJAPZ4n__(_8+`Q9Paz*0DzX7p6V~ Date: Sun, 30 Oct 2022 17:33:39 +0800 Subject: [PATCH 2/2] eslint --- src/common/utils/common.ts | 2 ++ .../apps/management/user/userinfo/index.module.scss | 10 +++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/common/utils/common.ts b/src/common/utils/common.ts index 87d3a8a..6d6a16f 100644 --- a/src/common/utils/common.ts +++ b/src/common/utils/common.ts @@ -40,7 +40,9 @@ export function treeToList(tree: any, config = DEFAULT_CONFIG): T { const { children } = config const result: any = [...tree] for (let i = 0; i < result.length; i++) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion if (!result[i][children!]) continue + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion result.splice(i + 1, 0, ...result[i][children!]) } return result diff --git a/src/pages/apps/management/user/userinfo/index.module.scss b/src/pages/apps/management/user/userinfo/index.module.scss index 727be66..0b60c20 100644 --- a/src/pages/apps/management/user/userinfo/index.module.scss +++ b/src/pages/apps/management/user/userinfo/index.module.scss @@ -1,9 +1,9 @@ $color: #999; .box { + overflow: auto; width: 100%; height: 100%; - overflow: auto; } .userinfo { @@ -20,8 +20,8 @@ $color: #999; } .headerItemBox { - padding: 6px 25px 0; border-right: 1px solid $color; + padding: 6px 25px 0; } .headerItemLabel { @@ -29,14 +29,14 @@ $color: #999; } .headerItemValue { + margin-top: 4px; font-weight: bold; text-align: center; - margin-top: 4px; } .nameBox { - width: 140px; padding-left: 15px; + width: 140px; } .name { @@ -44,7 +44,7 @@ $color: #999; } .role { - color: $color + color: $color; } .logout { -- Gitee