37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | {this.setState({inputVal: value})}}
53 | />
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | );
66 | }
67 | }
68 |
69 | export default RunCode;
70 |
--------------------------------------------------------------------------------
/online-code-frontend/src/components/ProcessDesign/index.scss:
--------------------------------------------------------------------------------
1 | .next-shell-content-inner {
2 | width: 100%;
3 | height: 100%;
4 | }
5 |
6 | .next-tabs-tabpane.active {
7 | width: 100%;
8 | height: 100%;
9 | }
10 |
11 | .next-tabs-tab.active .next-tabs-tab-close {
12 | color: #fff;
13 | }
14 |
15 | .next-tabs-capsule>.next-tabs-bar .next-tabs-tab {
16 | border-radius: unset !important;
17 | }
18 |
19 | .containers {
20 | background-color: #ffffff;
21 | width: 100%;
22 | display: flex;
23 | height: 100%;
24 | }
25 |
--------------------------------------------------------------------------------
/online-code-frontend/src/components/pages/Notice/index.module.css:
--------------------------------------------------------------------------------
1 | .noticeIcon {
2 | width: 40px;
3 | line-height: 50px;
4 | text-align: center;
5 | cursor: pointer;
6 | }
7 |
8 | .close {
9 | display: none;
10 | cursor: pointer;
11 | }
12 |
13 | .noticeContainer {
14 | width: 270px;
15 | background: var(--color-white, #fff);
16 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
17 | }
18 |
19 | .noticeContainer :global .next-list-header {
20 | margin: 0 12px;
21 | }
22 | .noticeContainer :global .next-list-footer {
23 | border: 0;
24 | }
25 |
26 | .noticeContainer :global .next-list-item-title,
27 | .noticeContainer :global .next-list-item {
28 | font-weight: normal;
29 | }
30 |
31 | .noticeContainer :global .next-list-item {
32 | padding: 8px 12px;
33 | font-size: var(--font-size-caption, 12px);
34 | }
35 |
36 | .noticeItem:hover {
37 | background: var(--color-fill1-2, #f2f3f7);
38 | }
39 |
40 | .noticeItem:hover :global .close {
41 | display: block;
42 | }
43 |
44 | .title,
45 | .footer {
46 | height: 16px;
47 | font-weight: normal;
48 | line-height: 16px;
49 | }
50 |
51 | .title h4 {
52 | display: inline-block;
53 | margin: 0;
54 | color: var(--color-text1-4, #333);
55 | font-size: var(--font-size-body-1, 12px);
56 | line-height: 16px;
57 | }
58 |
59 | .footer {
60 | text-align: center;
61 | }
62 |
63 | .footer a {
64 | color: var(--color-text1-3, #666);
65 | font-size: var(--font-size-caption, 12px);
66 | cursor: pointer;
67 | }
68 |
69 | .empty :global .next-list-item-content {
70 | align-items: center;
71 | height: 40px;
72 | }
73 |
74 | .clear {
75 | float: right;
76 | color: var(--color-text1-3, #666);
77 | font-size: var(--font-size-caption, 12px);
78 | cursor: pointer;
79 | }
80 |
--------------------------------------------------------------------------------
/online-code-frontend/src/components/pages/Notice/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Icon, Badge, Overlay, Avatar, Message, List } from '@alifd/next';
3 | import styles from './index.module.css';
4 |
5 | export interface INotcieItem {
6 | id: number;
7 | name: string;
8 | message: string;
9 | avatar: string;
10 | }
11 |
12 | const { Popup } = Overlay;
13 | const defaultNoticeList: INotcieItem[] = [
14 | {
15 | id: 1,
16 | name: 'Aric',
17 | avatar: 'https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png',
18 | message: '新标识怎么去掉?',
19 | },
20 | {
21 | id: 2,
22 | name: 'Mark',
23 | avatar: 'https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png',
24 | message: '如何查看新增页面?',
25 | },
26 | ];
27 | export interface NoticeProps {
28 | noticeList?: INotcieItem[];
29 | }
30 |
31 | const Notice: React.FC