diff --git a/react-ui/.storybook/tsconfig.json b/react-ui/.storybook/tsconfig.json index 601d7708..e30a508b 100644 --- a/react-ui/.storybook/tsconfig.json +++ b/react-ui/.storybook/tsconfig.json @@ -21,6 +21,7 @@ "incremental": true, // 通过读写磁盘上的文件来启用增量编译 "noFallthroughCasesInSwitch": true, // 报告switch语句中的fallthrough案例错误 "strictNullChecks": true, // 启用严格的null检查 + "importHelpers": true, "baseUrl": "./" } } diff --git a/react-ui/src/components/BasicTableInfo/index.less b/react-ui/src/components/BasicTableInfo/index.less index 479fe332..1207d033 100644 --- a/react-ui/src/components/BasicTableInfo/index.less +++ b/react-ui/src/components/BasicTableInfo/index.less @@ -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; diff --git a/react-ui/src/components/InfoGroup/index.less b/react-ui/src/components/InfoGroup/index.less index 4dccf4c7..94c56187 100644 --- a/react-ui/src/components/InfoGroup/index.less +++ b/react-ui/src/components/InfoGroup/index.less @@ -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; } diff --git a/react-ui/src/components/ResourceSelectorModal/index.less b/react-ui/src/components/ResourceSelectorModal/index.less index cffe4caf..1581e510 100644 --- a/react-ui/src/components/ResourceSelectorModal/index.less +++ b/react-ui/src/components/ResourceSelectorModal/index.less @@ -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; } } diff --git a/react-ui/src/pages/Experiment/Comparison/index.less b/react-ui/src/pages/Experiment/Comparison/index.less index 3be69ed9..4dce8268 100644 --- a/react-ui/src/pages/Experiment/Comparison/index.less +++ b/react-ui/src/pages/Experiment/Comparison/index.less @@ -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 { diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less index 61091050..25edd4bc 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ParameterRange/index.less @@ -15,7 +15,7 @@ } } &__desc { - margin-bottom: 20px; + margin-bottom: 15px; padding: 4px 8px; color: @text-color-tertiary; font-size: 13px; diff --git a/react-ui/src/pages/Model/components/ModelMetrics/index.less b/react-ui/src/pages/Model/components/ModelMetrics/index.less index 77b763d8..03123746 100644 --- a/react-ui/src/pages/Model/components/ModelMetrics/index.less +++ b/react-ui/src/pages/Model/components/ModelMetrics/index.less @@ -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 { diff --git a/react-ui/src/pages/Workspace/components/RobotFrame/index.less b/react-ui/src/pages/Workspace/components/RobotFrame/index.less index a203ecc3..f6ecbe07 100644 --- a/react-ui/src/pages/Workspace/components/RobotFrame/index.less +++ b/react-ui/src/pages/Workspace/components/RobotFrame/index.less @@ -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 { diff --git a/react-ui/src/stories/KFModal.mdx b/react-ui/src/stories/KFModal.mdx new file mode 100644 index 00000000..8bd711bf --- /dev/null +++ b/react-ui/src/stories/KFModal.mdx @@ -0,0 +1,45 @@ +import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks'; +import * as KFModalStories from "./KFModal.stories" + + + + +<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 /> + diff --git a/react-ui/src/stories/KFModal.stories.tsx b/react-ui/src/stories/KFModal.stories.tsx index 763aaf31..d1c30a91 100644 --- a/react-ui/src/stories/KFModal.stories.tsx +++ b/react-ui/src/stories/KFModal.stories.tsx @@ -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 = () => { diff --git a/react-ui/src/stories/docs/Colors.mdx b/react-ui/src/stories/docs/Colors.mdx new file mode 100644 index 00000000..c90bddc8 --- /dev/null +++ b/react-ui/src/stories/docs/Colors.mdx @@ -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> \ No newline at end of file diff --git a/react-ui/src/stories/docs/Git-Commit.mdx b/react-ui/src/stories/docs/Git-Commit.mdx new file mode 100644 index 00000000..26e81138 --- /dev/null +++ b/react-ui/src/stories/docs/Git-Commit.mdx @@ -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 框架" +``` + diff --git a/react-ui/src/stories/docs/Less.mdx b/react-ui/src/stories/docs/Less.mdx index 1b3a6632..2fc5b9bd 100644 --- a/react-ui/src/stories/docs/Less.mdx +++ b/react-ui/src/stories/docs/Less.mdx @@ -1,4 +1,4 @@ -import { Meta, Controls } from '@storybook/blocks'; +import { Meta } from '@storybook/blocks'; <Meta title="Documentation/Less" /> diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less index ff7813f9..d044889f 100644 --- a/react-ui/src/styles/theme.less +++ b/react-ui/src/styles/theme.less @@ -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%, diff --git a/react-ui/tsconfig.json b/react-ui/tsconfig.json index 55ce7f74..4eb2830b 100644 --- a/react-ui/tsconfig.json +++ b/react-ui/tsconfig.json @@ -21,6 +21,7 @@ "incremental": true, // 通过读写磁盘上的文件来启用增量编译 "noFallthroughCasesInSwitch": true, // 报告switch语句中的fallthrough案例错误 "strictNullChecks": true, // 启用严格的null检查 + "importHelpers": true, "baseUrl": "./", "paths": { "@/*": ["src/*"],