plain-design 1.0.0-beta.16 → 1.0.0-beta.160

package/src/packages/components/AiChatBox/index.tsx

@@ -0,0 +1,201 @@
+import {designComponent, getComponentCls, PropType, reactive, useClasses, useRefs} from "@peryl/react-compose";
+import Input from "../Input";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import i18n from "../i18n";
+import Button from "../Button";
+import './ai-chat-box.scss';
+import $message from "../$message";
+import {uuid} from "@peryl/utils/uuid";
+import {$ai, iAiChatResponse, iAiChatStreamParameter, iAiConfiguration, iAiHistory} from "../$ai";
+import $configuration from "../$configuration";
+import Scroll from "../Scroll";
+import {delay} from "@peryl/utils/delay";
+import {toArray} from "@peryl/utils/toArray";
+import {lastItem} from "@peryl/utils/lastItem";
+
+export const AiChatBox = designComponent({
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    /*ai配置信息*/
+    aiConfig: { type: Object as PropType<iAiConfiguration> },
+    /*填充高度*/
+    fitHeight: { type: Boolean },
+    /*已有的对话历史信息*/
+    histories: { type: Array as PropType<iChatBoxHistory[]> },
+    /*系统提示词*/
+    systemContent: { type: String },
+    /*手动处理大模型返回的message*/
+    handleMessage: { type: Function as PropType<(param: { message: string, userContent: string, chatData?: iAiChatResponse, addHistory: (history: iChatBoxHistory) => void }) => void | iChatBoxHistory | iChatBoxHistory[] | Promise<void | iChatBoxHistory | iChatBoxHistory[]>> },
+    handleReceive: { type: Function as PropType<(data: { fullText?: string, chunkText?: string }) => void> },
+    beforeSendUserContent: { type: Function as PropType<(data: { userContent: string, messages: iAiHistory[] }) => Promise<void>> },
+    handleChatStream: { type: Function as PropType<(parameter: iAiChatStreamParameter & { userContent: string }) => Promise<any>> },
+    inputMinHeight: { type: String, default: '80px' },
+    inputMaxHeight: { type: String, default: '225px' },
+  },
+  slots: ['prepend'],
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ scroll: Scroll });
+
+    useEdit();
+    const { styleComputed } = useStyle();
+
+    const aiConfig = props.aiConfig || $configuration.use('aiConfig');
+
+    const classes = useClasses(() => [
+      getComponentCls('ai-chat-box'),
+      `ai-chat-box-size-${styleComputed.value.size}`,
+      {
+        'ai-chat-box-fit-height': props.fitHeight
+      }
+    ]);
+
+    const state = reactive({
+      userContent: '',
+      histories: props.histories || [] as iChatBoxHistory[],
+      loading: false
+    });
+
+    const methods = {
+      scrollEnd: async () => {
+        if (!!refs.scroll) {
+          await delay(78);
+          refs.scroll.methods.scrollEnd();
+        }
+      },
+      addHistory: async (...history: iChatBoxHistory[]) => {
+        state.histories.push(...history);
+        await methods.scrollEnd();
+      },
+      send: async (userContent: string) => {
+        await delay(23);
+        state.userContent = '';
+        await methods.addHistory({ role: 'user', content: userContent, id: uuid() });
+
+        /*const { message, chatData } = await $ai.chatSystem(userContent, props.systemContent, aiConfig);*/
+        const messages: iAiHistory[] = [{ role: 'user', content: userContent }];
+        await props.beforeSendUserContent?.({ userContent, messages });
+        if (!!props.systemContent?.trim().length) {messages.unshift({ role: 'system', content: props.systemContent });}
+        let chatBoxHistory: iChatBoxHistory | undefined = undefined;
+        let message: string | undefined = undefined;
+
+        const aiChatStreamParameter: iAiChatStreamParameter & { userContent: string } = {
+          aiConfig,
+          messages,
+          userContent,
+          onReceiving: ({ fullText, chunkText }) => {
+            // console.log('receiving', fullText);
+            props.handleReceive?.({ fullText, chunkText });
+            if (!chatBoxHistory) {
+              state.histories.push({ role: 'assistant', content: '', id: uuid() });
+              chatBoxHistory = lastItem(state.histories);
+            }
+            chatBoxHistory!.content = fullText;
+            methods.scrollEnd();
+          },
+          onFinish: (fullText) => {
+            chatBoxHistory!.content = fullText;
+            message = fullText;
+          },
+        };
+
+        if (!!props.handleChatStream) {
+          await props.handleChatStream(aiChatStreamParameter);
+        } else {
+          await $ai.chatStream(aiChatStreamParameter);
+        }
+
+        if (!message) {
+          throw new Error('message is empty!');
+        }
+
+        /*可以手动处理返回的消息，自定义往对话框插入内容*/
+        const newHistory: void | iChatBoxHistory | iChatBoxHistory[] = await props.handleMessage?.({
+          message,
+          userContent,
+          // chatData,
+          addHistory: methods.addHistory
+        });
+
+        if (newHistory != null) {
+          await methods.addHistory(...toArray(newHistory));
+        }
+
+        return { message, /*chatData*/ };
+      },
+    };
+
+    const handler = {
+      onClickSend: async () => {
+        state.loading = true;
+        try {
+          const userContent = state.userContent;
+          if (!userContent?.trim().length) {
+            $message.error(i18n.$it('ai.require').d('提问的内容不能为空'));
+            return;
+          }
+          await methods.send(userContent);
+        } finally {
+          state.loading = false;
+        }
+      },
+    };
+
+    return {
+      refer: {
+        refs,
+        aiConfig,
+        state,
+        methods,
+      },
+      render: () => (
+        <div className={classes.value}>
+          {slots.prepend.isExist() && (
+            <div className="ai-chat-box-history-prepend">
+              {slots.prepend()}
+            </div>
+          )}
+          {(!!state.histories.length || props.fitHeight || slots.prepend.isExist()) && (
+            <div className="ai-chat-box-histories">
+              {(() => {
+                const content = state.histories.map((history) => (
+                  <div className="ai-chat-box-history-item" key={history.id} data-role={history.role}>
+                    <div className="ai-chat-box-history-item-inner">
+                      {!!history.render ? history.render() : history.content}
+                    </div>
+                  </div>
+                ));
+                if (props.fitHeight) {
+                  return <Scroll ref={onRef.scroll}>{content}</Scroll>;
+                } else {
+                  return content;
+                }
+              })()}
+            </div>
+          )}
+          <div className="ai-chat-box-input">
+            <Input
+              readonly={state.loading}
+              textarea
+              v-model={state.userContent}
+              placeholder={props.placeholder || i18n.$it('ai.placeholder').d('请输入要发送给ai的内容如：你是谁')}
+              minHeight={props.inputMinHeight}
+              maxHeight={props.inputMaxHeight}
+              onEnter={handler.onClickSend}
+            />
+            <Button shape="round" mode="fill" icon="pi-send" className="ai-chat-box-send-button" onClick={handler.onClickSend} loading={state.loading}/>
+          </div>
+        </div>
+      )
+    };
+  },
+});
+
+export interface iChatBoxHistory extends iAiHistory {
+  id: string,
+  render?: () => any,
+}
+
+export default AiChatBox;

package/src/packages/components/Alert/alert.scss

@@ -4,15 +4,16 @@
   border-radius: plv(box-size-normal-border-radius);
   position: relative;
   padding: 8px 16px;
+  line-height: initial;
 
   .alert-label {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .alert-desc {
     font-size: plv(font-size-small);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   &.alert-has-icon {
@@ -23,7 +24,7 @@
       position: absolute;
       width: $icon-width-normal;
       left: 0;
-      top: 0.15em;
+      top: 0.075em;
       padding-top: inherit;
       display: inline-flex;
       align-items: center;
@@ -37,6 +38,7 @@
     padding-right: $close-width;
 
     .alert-close {
+      border-radius: inherit;
       position: absolute;
       top: 0;
       right: 0;
@@ -112,6 +114,7 @@
 
   &.alert-theme-lite {
     @include statusMixin(alert) {
+      border:solid 1px $color-3;
       background-color: $color-light-2;
       color: $color-6;
       .alert-close {
@@ -125,7 +128,7 @@
   &.alert-theme-deep {
     @include statusMixin(alert) {
       background-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       .alert-close {
         &:hover {
           background-color: $color-8;

package/src/packages/components/Alert/index.tsx

@@ -1,5 +1,5 @@
 import './alert.scss';
-import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, useRefs} from "@peryl/react-compose";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import CollapseTransition from "../CollapseTransition";
 import Icon from "../Icon";
@@ -17,7 +17,7 @@ export const Alert = designComponent({
     theme: { type: String, default: 'lite' },                     // 主题，lite轻色，deep深色
     noClose: { type: Boolean },                                   // 禁用关闭
     icon: { type: String as PropType<string | null | undefined>, default: undefined },     // 显示的图标
-    message: { type: String },                                    // desc内容消息
+    description: { type: String },                                    // desc内容消息
   },
   slots: ['desc', 'close', 'default'],
   setup({ props, slots, attrs }) {
@@ -46,7 +46,7 @@ export const Alert = designComponent({
       `alert-align-${props.align}`,
       {
         'alert-has-icon': !!icon.value,
-        'alert-has-desc': !!props.message || slots.desc.isExist(),
+        'alert-has-desc': !!props.description || slots.desc.isExist(),
         'alert-has-close': !props.noClose,
       }
     ]);
@@ -76,9 +76,9 @@ export const Alert = designComponent({
                   {slots.default(props.label)}
                 </div>
               )}
-              {(props.message || slots.desc.isExist()) && (
+              {(props.description || slots.desc.isExist()) && (
                 <div className="alert-desc">
-                  {slots.desc(props.message)}
+                  {slots.desc(props.description)}
                 </div>
               )}
             </div>

package/src/packages/components/Application/index.tsx

@@ -1,16 +1,18 @@
-import {computed, designComponent, getComponentPrefix, PropType} from "plain-design-composition";
+import {computed, designComponent, getComponentPrefix, PropType} from "@peryl/react-compose";
 import {ApplicationConfigurationProvider, ApplicationHooks, iApplicationConfiguration} from "./utils/application.utils";
 import {DeepPartial} from "../../utils/type";
 import './application.scss';
 import {useApplicationService} from "./service/useApplicationService";
 import {createThemeConfigurationData} from "./theme/theme";
-import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
 import {useApplicationPopup} from "../usePopup/usePopupManager";
 
 export const Application = designComponent({
   name: 'application',
   props: {
-    configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, }
+    configuration: { type: Object as PropType<DeepPartial<iApplicationConfiguration>>, },
+    defaultInputMode: { type: String as PropType<typeof InputMode.TYPE>, default: InputMode.flat },
+    defaultButtonMode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.stroke },
   },
   slots: ['default'],
   setup({ props, slots }) {
@@ -21,7 +23,8 @@ export const Application = designComponent({
       default: {
         size: ThemeSize.normal,
         shape: ThemeShape.square,
-        inputMode: 'flat',
+        inputMode: props.defaultInputMode,
+        buttonMode: props.defaultButtonMode,
         ...props.configuration?.default,
       },
     }));

package/src/packages/components/Application/service/createApplicationService.tsx

@@ -1,6 +1,6 @@
 import {ApplicationHolder, iApplicationHolderData, iApplicationManagerData} from "./useApplicationService";
-import {defer} from "plain-utils/utils/defer";
-import {App} from "plain-design-composition";
+import {defer} from "@peryl/utils/defer";
+import {App} from "@peryl/react-compose";
 import {createError} from "../../../utils/createError";
 
 export function createApplicationService<ManagerComponent extends { use: { class: { props: { getManagerData: () => iApplicationManagerData }, event: { emit: { onReady: () => void } } } } },

package/src/packages/components/Application/service/createApplicationServiceComponent.tsx

@@ -1,4 +1,4 @@
-import {designComponent, onMounted, RenderNode} from "plain-design-composition";
+import {designComponent, onMounted, RenderNode} from "@peryl/react-compose";
 
 /**
  * 创建应用服务组件

package/src/packages/components/Application/service/createApplicationServiceManager.tsx

@@ -1,6 +1,6 @@
-import {designComponent, onMounted, PropType, ref, toRaw, useRefList} from "plain-design-composition";
+import {designComponent, onMounted, PropType, ref, toRaw, useRefList} from "@peryl/react-compose";
 import {iApplicationManagerData} from "./useApplicationService";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 import {createServiceReadyObserver} from "../utils/createServiceReadyObserver";
 
 const nextCount = createCounter('manager-service');
@@ -84,8 +84,11 @@ export function createApplicationServiceManager<Option extends { hold?: boolean
                 option={item}
                 ref={onRefList(i)}
                 onDestroy={() => {
-                  options.value.splice(i, 1);
-                  optionIds.splice(i, 1);
+                  const index = options.value.indexOf(item);
+                  if (index > -1) {
+                    options.value.splice(index, 1);
+                    optionIds.splice(index, 1);
+                  }
                 }}
                 onReady={() => serviceReadyObserver.onReady({ option: item, ins: refList[i] })}
               />

package/src/packages/components/Application/service/useApplicationService.tsx

@@ -1,7 +1,8 @@
-import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "plain-design-composition";
-import {defer, DFD} from 'plain-utils/utils/defer';
-import {createCounter} from "plain-utils/utils/createCounter";
+import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "@peryl/react-compose";
+import {defer, DFD} from '@peryl/utils/defer';
+import {createCounter} from "@peryl/utils/createCounter";
 import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
+import {$previewer} from "../../$previewer";
 
 /**
  * applications渲染manager数组的时候，给manager传递的 getManagerData函数的返回值类型
@@ -104,6 +105,7 @@ export function useApplicationService() {
       render: () => (
         <Portal to="body">
           <div className={getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}>
+            {$previewer.render()}
             {state.managers.map(({ getManagerData, RenderComponent, dfd, id }, index) => {
               return (
                 <RenderComponent

package/src/packages/components/Application/theme/theme.ts

@@ -5,12 +5,22 @@ import {clearFields} from "../../../utils/clearFields";
 
 /*默认的基础色*/
 export const BaseColors = {
-  gray: '',
-  secondary: '',
-  primary: '#452feb',
-  success: '#00b42a',
-  warn: '#ff7d00',
-  error: '#f53f3f',
+  dark: {
+    gray: '',
+    secondary: '',
+    primary: '#5e53ff',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
+  light: {
+    gray: '',
+    secondary: '',
+    primary: '#452feb',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
 };
 
 /*基础的灰色*/
@@ -67,7 +77,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
 
   return {
     /*---------------------------------------base-------------------------------------------*/
-    'font-family': "Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif",
+    'font-family': `v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
     'scrollbar-size': '9px',
     'border-color': "rgba(0, 0, 0, .06)",
     'background-color': "#ffffff",
@@ -75,6 +85,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'background-hover': referenceVariable("gray-2"),
     'scrollbar-color': referenceVariable("gray-3"),
     'loading-mask-color': 'rgba(255,255,255,0.5)',
+    'line-height': '1.5715',
 
     'font-size-mini': '12px',
     'font-size-small': '12px',
@@ -87,12 +98,17 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'text-3': 'rgba(0,0,0,0.45)',
     'text-4': 'rgba(0,0,0,0.25)',
     'text-placeholder': 'rgba(0,0,0,0.35)',
+    /*---------------------------------------background-color-------------------------------------------*/
+    'bg-1': '#f2f3f5',
+    'bg-2': '#FFFFFF',
+    'bg-3': '#FFFFFF',
+    'bg-4': '#FFFFFF',
     /*---------------------------------------margin-------------------------------------------*/
     /*height of sizes*/
-    'margin-mini': '12px',
+    'margin-mini': '8px',
     'margin-small': '12px',
     'margin-normal': '16px',
-    'margin-large': '16px',
+    'margin-large': '20px',
     /*---------------------------------------box-------------------------------------------*/
     /*min-width of sizes*/
     'box-size-mini-min-width': '',
@@ -100,10 +116,10 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'box-size-normal-min-width': '68px',
     'box-size-large-min-width': '88px',
     /*height of sizes*/
-    'box-size-mini-height': '24px',
-    'box-size-small-height': '28px',
-    'box-size-normal-height': '32px',
-    'box-size-large-height': '36px',
+    'box-size-mini-height': '26px',
+    'box-size-small-height': '30px',
+    'box-size-normal-height': '34px',
+    'box-size-large-height': '40px',
     /*padding x of sizes*/
     'box-size-mini-padding': '0 11px',
     'box-size-small-padding': '0 15px',
@@ -116,15 +132,23 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'box-size-large-font-size': referenceVariable('font-size-normal'),
     /*border radius of sizes*/
     'box-size-mini-border-radius': '2px',
-    'box-size-small-border-radius': '2px',
-    'box-size-normal-border-radius': '2px',
-    'box-size-large-border-radius': '2px',
+    'box-size-small-border-radius': '4px',
+    'box-size-normal-border-radius': '6px',
+    'box-size-large-border-radius': '8px',
     /*---------------------------------------input-------------------------------------------*/
-    'input-padding-x': '11px',
+    'input-padding-x-mini': '9px',
+    'input-padding-x-small': '11px',
+    'input-padding-x-normal': '13px',
+    'input-padding-x-large': '15px',
+
+    'input-clear-size-mini': '16px',
+    'input-clear-size-small': '18px',
+    'input-clear-size-normal': '21px',
+    'input-clear-size-large': '23px',
     /*---------------------------------------dialog-------------------------------------------*/
     'dialog-mask-color': 'rgba(0,0,0,0.3)',
-    'dialog-head-padding-x': '20px',
-    'dialog-body-padding': '16px 20px',
+    'dialog-head-padding-x': '16px',
+    'dialog-body-padding': '16px 16px',
     'dialog-foot-padding': '8px 16px',
     'dialog-head-size': '48px',
     /*---------------------------------------message-------------------------------------------*/
@@ -160,11 +184,6 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'dropdown-size-normal-padding-y': '6px',
     'dropdown-size-large-padding-x': '10px',
     'dropdown-size-large-padding-y': '6px',
-    /*---------------------------------------input-------------------------------------------*/
-    'input-clear-size-mini': '16px',
-    'input-clear-size-small': '16px',
-    'input-clear-size-normal': '20px',
-    'input-clear-size-large': '20px',
     /*---------------------------------------tag-------------------------------------------*/
     'tag-size-mini-height': '20px',
     'tag-size-small-height': '22px',
@@ -181,7 +200,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
 }
 
 /*基础色*/
-type iThemeBaseColors = keyof typeof BaseColors
+type iThemeBaseColors = keyof typeof BaseColors.dark
 /*其他主题变量*/
 type iThemeOtherVars = keyof ReturnType<typeof createOtherVars>
 /*基础色衍生的变量*/
@@ -196,7 +215,7 @@ export interface iThemeConfiguration {
 
 export function createThemeConfigurationData(prefix: string | null, config?: DeepPartial<iThemeConfiguration>): iThemeConfiguration {
   const dark = config?.dark == undefined ? false : config.dark;
-  const base = { ...BaseColors, ...clearFields(config?.base) };
+  const base = { ...dark ? BaseColors.dark : BaseColors.light, ...clearFields(config?.base) };
   const referenceVariable = (varName: string): string => `var(--${!!prefix ? prefix + '-' : ''}${varName})`;
 
   const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
@@ -230,6 +249,7 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
       ...secondaryColorList,
       ...createGrayColors(dark, false),
       ...createGrayColors(dark, true),
+      ...base.primary.toLowerCase() === '#ffffff' ? { 'pbfc': 'black' } : { 'pbfc': 'white' },
       ...dark ? {
         'background-hover': '#3c3c4d',
         'scrollbar-color': '#141414',
@@ -242,6 +262,10 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
         'text-2': 'rgba(255,255,255,0.65)',
         'text-3': 'rgba(255,255,255,0.45)',
         'text-4': 'rgba(255,255,255,0.25)',
+        'bg-1': '#101014',
+        'bg-2': '#18181c',
+        'bg-3': '#18181c',
+        'bg-4': '#242429',
         'text-placeholder': 'rgba(255,255,255,0.35)',
         'dialog-mask-color': 'rgba(0,0,0,0.75)',
         // 'table-head-background': '#252527',

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,14 +1,11 @@
-import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
+import {ComputedRef, createRenderHook, inject, provide} from "@peryl/react-compose";
 import {iThemeConfiguration} from "../theme/theme";
-import {ThemeShape, ThemeSize} from "../../../uses/useStyle";
+import {UseStyleProvideData} from "../../../uses/useStyle";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export interface iApplicationConfiguration {
   theme: iThemeConfiguration;
-  default: {
-    size: typeof ThemeSize.TYPE,
-    shape: typeof ThemeShape.TYPE,
-    inputMode: 'flat' | 'stroke',
-  },
+  default: UseStyleProvideData['default'];
 }
 
 export const ApplicationConfigurationProvider = (() => {
@@ -21,6 +18,4 @@ export const ApplicationConfigurationProvider = (() => {
 
 export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
 
-export const ApplicationHooks = {
-  onRender: createRenderHook(),
-};
+export const ApplicationHooks = { onRender: createRenderHook({ effects: createEffects().effects }), };

package/src/packages/components/Application/utils/createServiceReadyObserver.ts

@@ -1,4 +1,4 @@
-import {createHooks, toRaw} from "plain-design-composition";
+import {createHooks, toRaw} from "@peryl/react-compose";
 
 export function createServiceReadyObserver<Option>() {
   const hook = createHooks<(data: { option: Option, ins: any }) => void>();

package/src/packages/components/ArrowStep/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "@peryl/react-compose";
 import Triangle from "../Triangle";
 import {ArrowStepCollector} from "../ArrowStepGroup";
 import {StepStatus, StepUtils} from "../StepGroup/step.utils";

package/src/packages/components/ArrowStepGroup/arrow-step.scss

@@ -32,7 +32,7 @@
       align-items: center;
       justify-content: center;
       padding: 0 16px;
-      color: white;
+      color: plv(pbfc);
     }
 
     .#{componentName(triangle)} {
@@ -73,7 +73,7 @@
     &.arrow-step-status-process, &.arrow-step-status-finish {
       .arrow-step-content {
         background-color: plv(primary-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -84,7 +84,7 @@
     &.arrow-step-status-success {
       .arrow-step-content {
         background-color: plv(success-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -95,12 +95,25 @@
     &.arrow-step-status-error {
       .arrow-step-content {
         background-color: plv(error-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
         color: plv(error-6);
       }
     }
+
+    &:first-child {
+      .arrow-step-content {
+        border-top-left-radius: plv(box-size-normal-border-radius);
+        border-bottom-left-radius: plv(box-size-normal-border-radius);
+      }
+    }
+    &:last-child {
+      .arrow-step-content {
+        border-top-right-radius: plv(box-size-normal-border-radius);
+        border-bottom-right-radius: plv(box-size-normal-border-radius);
+      }
+    }
   }
 }

package/src/packages/components/ArrowStepGroup/index.tsx

@@ -1,9 +1,9 @@
 import './arrow-step.scss';
-import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../Dialog";
 import {StepUtils} from "../StepGroup/step.utils";
 import ArrowStep from "../ArrowStep";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export const ArrowStepGroup = designComponent({
   name: 'arrow-step-group',