chore: 颜色整理

react-ui/.storybook/tsconfig.json

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

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;

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;
   }

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;
       }
     }

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 {

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;

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 {

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 {

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"
+ 
+<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 />
+ 

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 = () => {

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>

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 框架"
+```
+

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" />
 

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%,

react-ui/tsconfig.json

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