Browse Source

chore: 颜色整理

pull/172/head
cp3hnu 11 months ago
parent
commit
fb71c68216
15 changed files with 171 additions and 27 deletions
  1. +1
    -0
      react-ui/.storybook/tsconfig.json
  2. +2
    -2
      react-ui/src/components/BasicTableInfo/index.less
  3. +1
    -1
      react-ui/src/components/InfoGroup/index.less
  4. +7
    -7
      react-ui/src/components/ResourceSelectorModal/index.less
  5. +2
    -2
      react-ui/src/pages/Experiment/Comparison/index.less
  6. +1
    -1
      react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less
  7. +1
    -1
      react-ui/src/pages/Model/components/ModelMetrics/index.less
  8. +1
    -1
      react-ui/src/pages/Workspace/components/RobotFrame/index.less
  9. +45
    -0
      react-ui/src/stories/KFModal.mdx
  10. +3
    -2
      react-ui/src/stories/KFModal.stories.tsx
  11. +77
    -0
      react-ui/src/stories/docs/Colors.mdx
  12. +25
    -0
      react-ui/src/stories/docs/Git-Commit.mdx
  13. +1
    -1
      react-ui/src/stories/docs/Less.mdx
  14. +3
    -9
      react-ui/src/styles/theme.less
  15. +1
    -0
      react-ui/tsconfig.json

+ 1
- 0
react-ui/.storybook/tsconfig.json View File

@@ -21,6 +21,7 @@
"incremental": true, // 通过读写磁盘上的文件来启用增量编译
"noFallthroughCasesInSwitch": true, // 报告switch语句中的fallthrough案例错误
"strictNullChecks": true, // 启用严格的null检查
"importHelpers": true,
"baseUrl": "./"
}
}

+ 2
- 2
react-ui/src/components/BasicTableInfo/index.less View File

@@ -4,7 +4,7 @@
flex-wrap: wrap;
align-items: stretch;
width: 100%;
border: 1px solid @border-color-base;
border: 1px solid @border-color;
border-bottom: none;
border-radius: 4px;

@@ -12,7 +12,7 @@
display: flex;
align-items: stretch;
width: 25%;
border-bottom: 1px solid @border-color-base;
border-bottom: 1px solid @border-color;

&__label {
flex: none;


+ 1
- 1
react-ui/src/components/InfoGroup/index.less View File

@@ -4,7 +4,7 @@
&__content {
padding: 20px @content-padding;
background-color: white;
border: 1px solid @border-color-base;
border: 1px solid @border-color;
border-top: none;
border-radius: 0 0 4px 4px;
}


+ 7
- 7
react-ui/src/components/ResourceSelectorModal/index.less View File

@@ -22,8 +22,8 @@
height: 398px;
margin-right: 15px;
padding: 15px;
background-color: @background-color-primary;
border: 1px solid @border-color;
background-color: rgba(22, 100, 255, 0.03);
border: 1px solid rgba(22, 100, 255, 0.3);
border-radius: 8px;

&__search {
@@ -31,7 +31,7 @@
padding-left: 0;
background-color: transparent;
border-width: 0;
border-bottom: 1px solid @border-color-secondary;
border-bottom: 1px solid rgba(22, 100, 255, 0.1);
border-radius: 0;
}

@@ -45,8 +45,8 @@
width: calc(100% - 488px - 15px);
height: 398px;
padding: 15px;
background-color: @background-color-primary;
border: 1px solid @border-color;
background-color: rgba(22, 100, 255, 0.03);
border: 1px solid rgba(22, 100, 255, 0.3);
border-radius: 8px;

&__title {
@@ -56,7 +56,7 @@
color: @text-color;
font-size: @font-size;
line-height: 46px;
border-bottom: 1px solid @border-color-secondary;
border-bottom: 1px solid rgba(22, 100, 255, 0.1);
}
&__files {
height: calc(100% - 75px);
@@ -68,7 +68,7 @@
color: @text-color-secondary;
font-size: 13px;
word-break: break-all;
background: @background-color-gray;
background: rgba(4, 3, 3, 0.06);
border-radius: 4px;
}
}


+ 2
- 2
react-ui/src/pages/Experiment/Comparison/index.less View File

@@ -29,7 +29,7 @@
div {
flex: 1;
height: 1px;
background-color: @border-color-base;
background-color: @border-color;
}

p {
@@ -45,7 +45,7 @@
.ant-table-thead {
.ant-table-cell {
background-color: rgb(247, 247, 247);
border-color: @border-color-base !important;
border-color: @border-color !important;
}
}
.ant-table-tbody {


+ 1
- 1
react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less View File

@@ -15,7 +15,7 @@
}
}
&__desc {
margin-bottom: 20px;
margin-bottom: 15px;
padding: 4px 8px;
color: @text-color-tertiary;
font-size: 13px;


+ 1
- 1
react-ui/src/pages/Model/components/ModelMetrics/index.less View File

@@ -12,7 +12,7 @@
.ant-table-thead {
.ant-table-cell {
background-color: rgb(247, 247, 247);
border-color: @border-color-base !important;
border-color: @border-color !important;
}
}
.ant-table-tbody {


+ 1
- 1
react-ui/src/pages/Workspace/components/RobotFrame/index.less View File

@@ -23,7 +23,7 @@
width: 100%;
height: 60px;
padding: 0 15px;
border-bottom: 1px solid @border-color-base;
border-bottom: 1px solid @border-color;
}

&__iframe {


+ 45
- 0
react-ui/src/stories/KFModal.mdx View File

@@ -0,0 +1,45 @@
import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
import * as KFModalStories from "./KFModal.stories"
<Meta of={KFModalStories} />

<Title />
<Subtitle />
<Description />

## Usage

为了风格统一,应用中的其它 Modal 应该使用 **KFModal** 进行封装,例如 **CodeSelectorModal**

```ts
export interface CodeSelectorModalProps extends Omit<ModalProps, 'onOk'> {
onOk?: (params: CodeConfigData | undefined) => void;
}

function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
return (
<KFModal
{...rest}
title="选择代码配置"
image={require('@/assets/img/modal-code-config.png')}
width={920}
footer={null}
destroyOnClose
>
<div>children</div>
</KFModal>
);
}

export default CodeSelectorModal;

```

## Primary

<Primary />

<Controls />

<Stories />

+ 3
- 2
react-ui/src/stories/KFModal.stories.tsx View File

@@ -15,7 +15,7 @@ const meta = {
layout: 'centered',
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
tags: ['!autodocs'],
// More on argTypes: https://storybook.js.org/docs/api/argtypes
argTypes: {
// backgroundColor: { control: 'color' },
@@ -38,6 +38,7 @@ export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
/** 作为子组件时,通过 `open` 属性打开或关闭 */
export const Primary: Story = {
args: {
title: '创建实验',
@@ -71,7 +72,7 @@ export const Primary: Story = {
},
};

/** 通过 `openAntdModal` 函数打开 */
/** 推荐通过 `openAntdModal` 函数打开 */
export const OpenByFunction: Story = {
render: function Render() {
const handleClick = () => {


+ 77
- 0
react-ui/src/stories/docs/Colors.mdx View File

@@ -0,0 +1,77 @@

import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';

<Meta title="Documentation/Colors" />

# Colors

<ColorPalette>
<ColorItem
title="theme.color.primary"
subtitle="主题色"
colors={{ "primary-color": '#1664ff' }}
/>
<ColorItem
title="theme.color.primary-hover"
subtitle="主题色:hover"
colors={{ "primary-color-hover": "#69b1ff" }}
/>
<ColorItem
title="theme.color.underline"
subtitle="链接的下划线"
colors={{ "underline-color": "#5d93ff" }}
/>
<ColorItem
title="theme.color.success"
subtitle="成功色"
colors={{ "success-color": '#6ac21d' }}
/>
<ColorItem
title="theme.color.error"
subtitle="失败色"
colors={{ "error-color": '#c73131' }}
/>
<ColorItem
title="theme.color.warning"
subtitle="警告色"
colors={{ "warning-color": '#f98e1b' }}
/>
<ColorItem
title="theme.color.warning"
subtitle="终止"
colors={{ "abort-color": '#8a8a8a' }}
/>
<ColorItem
title="theme.color.warning"
subtitle="等待运行"
colors={{ "pending-color": '#ecb934' }}
/>
<ColorItem
title="theme.color.background"
subtitle="背景色"
colors={{
"background-color": '#f9fafb',
"sider-background-color": '#f2f5f7'
}}
/>
<ColorItem
title="theme.color.font"
subtitle="字体颜色"
colors={{
"text-color": '#1d1d20',
"text-color-secondary": '#575757',
"text-color-tertiary": '#8a8a8a',
"text-disabled-color": 'rgba(0, 0, 0, 0.25)',
}}
/>
<ColorItem
title="theme.color.placeholder"
subtitle="placeholder 颜色"
colors={{ "text-placeholder-color": 'rgba(0, 0, 0, 0.25)' }}
/>
<ColorItem
title="theme.color.border"
subtitle="边框色"
colors={{ "border-color": '#eaeaea' }}
/>
</ColorPalette>

+ 25
- 0
react-ui/src/stories/docs/Git-Commit.mdx View File

@@ -0,0 +1,25 @@
import { Meta } from '@storybook/blocks';

<Meta title="Documentation/Git Commit" />

# Git 提交规范

遵循 [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines) 规范:

- feat: 增加新功能
- fix: 修复 bug
- build: 更改构建系统或外部依赖(例如:gulp, broccoli, npm)
- ci: 更改CI配置文件和脚本(例如:Travis, Circle, BrowserStack, SauceLabs)
- docs: 更改文档
- perf: 提高性能的修改
- refactor: 重构,但是即不是新增功能,也不是修复 bug
- style: 修改格式或样式,但是不会影响代码的运行(例如:删除空白、添加分号等)
- test: 添加测试
- chore: 其它不修改 src 或测试文件的更改

例如

```sh
$ git commit -m "feat: 集成 Storybook 框架"
```


+ 1
- 1
react-ui/src/stories/docs/Less.mdx View File

@@ -1,4 +1,4 @@
import { Meta, Controls } from '@storybook/blocks';
import { Meta } from '@storybook/blocks';

<Meta title="Documentation/Less" />



+ 3
- 9
react-ui/src/styles/theme.less View File

@@ -8,6 +8,7 @@
@primary-color: #1664ff; // 主色调
@primary-color-secondary: #4e89ff;
@primary-color-hover: #69b1ff;
@sider-background-color: #f2f5f7; // 侧边栏背景颜色
@background-color: #f9fafb; // 页面背景颜色
@text-color: #1d1d20;
@text-color-secondary: #575757;
@@ -20,19 +21,12 @@
@abort-color: #8a8a8a;
@pending-color: #ecb934;
@underline-color: #5d93ff;
@border-color: #eaeaea;

@border-color-base: #eaeaea;
@border-color: rgba(22, 100, 255, 0.3);
@border-color-secondary: rgba(22, 100, 255, 0.1);
@background-color-primary: rgba(22, 100, 255, 0.03);
@background-color-gray: rgba(4, 3, 3, 0.06);

@link-hover-color: #69b1ff;
@heading-color: rgba(0, 0, 0, 0.85);
@input-icon-hover-color: rgba(0, 0, 0, 0.85);

@link-hover-color: #69b1ff;
@sider-background-color: #f2f5f7;

@workspace-background: linear-gradient(
179.03deg,
rgba(138, 138, 138, 0.06) 0%,


+ 1
- 0
react-ui/tsconfig.json View File

@@ -21,6 +21,7 @@
"incremental": true, // 通过读写磁盘上的文件来启用增量编译
"noFallthroughCasesInSwitch": true, // 报告switch语句中的fallthrough案例错误
"strictNullChecks": true, // 启用严格的null检查
"importHelpers": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],


Loading…
Cancel
Save