plain-design 1.0.0-beta.145 → 1.0.0-beta.147

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

@@ -1,154 +1,154 @@
-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, iAiConfiguration} from "../$ai";
-import $configuration from "../$configuration";
-import Scroll from "../Scroll";
-import {delay} from "@peryl/utils/delay";
-import {toArray} from "@peryl/utils/toArray";
-
-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[]>> },
-    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 = '';
-        state.histories.push({ role: 'user', content: userContent, id: uuid() });
-        await methods.scrollEnd();
-
-        const { message, chatData } = await $ai.chatSystem(userContent, props.systemContent, aiConfig);
-
-        /*可以手动处理返回的消息，自定义往对话框插入内容*/
-        const newHistory: iChatBoxHistory | iChatBoxHistory[] = await props.handleMessage?.({ message, userContent, chatData, addHistory: methods.addHistory }) || ({ role: 'assistant', content: message, id: uuid() });
-
-        state.histories.push(...toArray(newHistory));
-        await methods.scrollEnd();
-
-        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: {},
-      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 {
-  id: string,
-  role: 'user' | 'assistant';
-  content?: string,
-  render?: () => any,
-}
-
-export default AiChatBox;
+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, iAiConfiguration} from "../$ai";
+import $configuration from "../$configuration";
+import Scroll from "../Scroll";
+import {delay} from "@peryl/utils/delay";
+import {toArray} from "@peryl/utils/toArray";
+
+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[]>> },
+    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 = '';
+        state.histories.push({ role: 'user', content: userContent, id: uuid() });
+        await methods.scrollEnd();
+
+        const { message, chatData } = await $ai.chatSystem(userContent, props.systemContent, aiConfig);
+
+        /*可以手动处理返回的消息，自定义往对话框插入内容*/
+        const newHistory: iChatBoxHistory | iChatBoxHistory[] = await props.handleMessage?.({ message, userContent, chatData, addHistory: methods.addHistory }) || ({ role: 'assistant', content: message, id: uuid() });
+
+        state.histories.push(...toArray(newHistory));
+        await methods.scrollEnd();
+
+        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: {},
+      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 {
+  id: string,
+  role: 'user' | 'assistant';
+  content?: string,
+  render?: () => any,
+}
+
+export default AiChatBox;

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

@@ -1,139 +1,139 @@
-@include prefix(alert) {
-  $icon-width-large: 56px;
-  $icon-width-normal: 32px;
-  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: plv(line-height);
-  }
-
-  .alert-desc {
-    font-size: plv(font-size-small);
-    line-height: plv(line-height);
-  }
-
-  &.alert-has-icon {
-    padding-left: $icon-width-normal;
-
-    .alert-icon {
-      font-size: 1.2em;
-      position: absolute;
-      width: $icon-width-normal;
-      left: 0;
-      top: 0.075em;
-      padding-top: inherit;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  &.alert-has-close {
-    $close-width: 34px;
-    position: relative;
-    padding-right: $close-width;
-
-    .alert-close {
-      border-radius: inherit;
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: $close-width;
-      height: $close-width;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-  }
-
-  &.alert-has-desc {
-    .alert-label {
-      font-weight: 600;
-    }
-
-    .alert-icon {
-      font-size: 28px;
-    }
-
-    &.alert-align-left {
-      .alert-label, .alert-desc {
-        text-align: left
-      }
-    }
-
-    &.alert-align-center {
-      .alert-label, .alert-desc {
-        text-align: center
-      }
-    }
-
-    &.alert-align-right {
-      .alert-label, .alert-desc {
-        text-align: right
-      }
-    }
-  }
-
-  &:not(.alert-has-desc) {
-
-    &.alert-align-left {
-      text-align: left
-    }
-
-    &.alert-align-center {
-      text-align: center
-    }
-
-    &.alert-align-right {
-      text-align: right
-    }
-  }
-
-  &.alert-has-icon {
-    &:not(.alert-has-desc) {
-      .alert-label {
-        display: inline-block;
-      }
-    }
-
-    &.alert-has-desc {
-      padding-left: $icon-width-large;
-
-      .alert-icon {
-        width: $icon-width-large;
-      }
-    }
-  }
-
-  /*---------------------------------------theme-------------------------------------------*/
-
-  &.alert-theme-lite {
-    @include statusMixin(alert) {
-      border:solid 1px $color-3;
-      background-color: $color-light-2;
-      color: $color-6;
-      .alert-close {
-        &:hover {
-          background-color: $color-light-3;
-        }
-      }
-    }
-  }
-
-  &.alert-theme-deep {
-    @include statusMixin(alert) {
-      background-color: $color-6;
-      color: plv(pbfc);
-      .alert-close {
-        &:hover {
-          background-color: $color-8;
-        }
-      }
-    }
-  }
-}
+@include prefix(alert) {
+  $icon-width-large: 56px;
+  $icon-width-normal: 32px;
+  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: plv(line-height);
+  }
+
+  .alert-desc {
+    font-size: plv(font-size-small);
+    line-height: plv(line-height);
+  }
+
+  &.alert-has-icon {
+    padding-left: $icon-width-normal;
+
+    .alert-icon {
+      font-size: 1.2em;
+      position: absolute;
+      width: $icon-width-normal;
+      left: 0;
+      top: 0.075em;
+      padding-top: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &.alert-has-close {
+    $close-width: 34px;
+    position: relative;
+    padding-right: $close-width;
+
+    .alert-close {
+      border-radius: inherit;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: $close-width;
+      height: $close-width;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  &.alert-has-desc {
+    .alert-label {
+      font-weight: 600;
+    }
+
+    .alert-icon {
+      font-size: 28px;
+    }
+
+    &.alert-align-left {
+      .alert-label, .alert-desc {
+        text-align: left
+      }
+    }
+
+    &.alert-align-center {
+      .alert-label, .alert-desc {
+        text-align: center
+      }
+    }
+
+    &.alert-align-right {
+      .alert-label, .alert-desc {
+        text-align: right
+      }
+    }
+  }
+
+  &:not(.alert-has-desc) {
+
+    &.alert-align-left {
+      text-align: left
+    }
+
+    &.alert-align-center {
+      text-align: center
+    }
+
+    &.alert-align-right {
+      text-align: right
+    }
+  }
+
+  &.alert-has-icon {
+    &:not(.alert-has-desc) {
+      .alert-label {
+        display: inline-block;
+      }
+    }
+
+    &.alert-has-desc {
+      padding-left: $icon-width-large;
+
+      .alert-icon {
+        width: $icon-width-large;
+      }
+    }
+  }
+
+  /*---------------------------------------theme-------------------------------------------*/
+
+  &.alert-theme-lite {
+    @include statusMixin(alert) {
+      border:solid 1px $color-3;
+      background-color: $color-light-2;
+      color: $color-6;
+      .alert-close {
+        &:hover {
+          background-color: $color-light-3;
+        }
+      }
+    }
+  }
+
+  &.alert-theme-deep {
+    @include statusMixin(alert) {
+      background-color: $color-6;
+      color: plv(pbfc);
+      .alert-close {
+        &:hover {
+          background-color: $color-8;
+        }
+      }
+    }
+  }
+}