Test/aigc 分支测试代码

site/sidebar.config.ts

@@ -60,6 +60,20 @@ export default [
       },
     ],
   },
+  {
+    title: 'aigc测试',
+    name: 'aigc',
+    type: 'component', // 组件文档
+    children: [
+      {
+        title: 'aigc组件',
+        name: 'aigc',
+        path: '/webcomponents/components/aigc',
+        component: () => import('tdesign-web-components/aigc/README.md'),
+      },
+    ],
+    tag: '',
+  },
   {
     title: '基础',
     name: 'base',

src/aigc/README.md

@@ -0,0 +1,44 @@
+---
+title: 测试aigc组件
+description: checklist https://doc.weixin.qq.com/sheet/e3_AXAAewbeAO8xD7yb5SGThe8S115hM?scode=AJEAIQdfAAoxc1ymeqAXAAewbeAO8&tab=BB08J2
+isComponent: true
+usage: { title: '', description: '' }
+spline: base
+---
+
+### 基础测试
+
+{{ base }}
+
+### 输入框
+
+{{ sender }}
+
+### 消息
+
+{{ bubble }}
+
+## API
+
+### Button Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
+loading | Boolean | false | 是否显示为加载状态 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+ignoreAttrs | `Array<string>` | [] | 在host标签上忽略的属性，例如`['style']`就不会生成style属性 | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
+

src/aigc/_example/base.tsx

@@ -0,0 +1,73 @@
+import 'tdesign-web-components/aigc';
+
+import { uniqueId } from 'lodash-es';
+import { Component } from 'omi';
+import type { BubbleProps } from 'tdesign-web-components/aigc';
+
+const mockUserMsg: BubbleProps = {
+  content: '用户消息',
+  placement: 'end',
+};
+const mockAIMsg: BubbleProps = {
+  content: 'AI回复',
+};
+
+export default class BaseExample extends Component {
+  messages: BubbleProps[] = [
+    {
+      content: '我是你的AI助手',
+    },
+    {
+      content: '我是用户',
+      placement: 'end',
+    },
+  ];
+
+  value: string = 'chat默认';
+
+  private appendMessage = (msg: BubbleProps) => {
+    this.messages = [...this.messages, msg];
+    this.update();
+    console.log('触发了message', this.messages);
+  };
+
+  onChange = (v) => {
+    this.value = v;
+    this.update();
+    console.log('输入', v);
+  };
+
+  onSubmit = (v) => {
+    console.log('提交', v);
+    this.appendMessage({
+      ...mockUserMsg,
+      key: uniqueId(),
+      content: v,
+    });
+
+    setTimeout(() => {
+      this.appendMessage({
+        ...mockAIMsg,
+        key: uniqueId(),
+      });
+    }, 1000);
+  };
+
+  render() {
+    return (
+      <t-chat
+        messages={this.messages}
+        inputValue={this.value}
+        placeholder="请输入内容"
+        onInputChange={this.onChange}
+        onSubmit={this.onSubmit}
+      >
+        <div slot="header">插入的header</div>
+        <div slot="main-top">插入的main-top</div>
+        <div slot="main-bottom">插入的main-bottom</div>
+        <div slot="input-header">插入的input-header</div>
+        <div slot="input-options">插入的input-options</div>
+      </t-chat>
+    );
+  }
+}

src/aigc/_example/bubble.tsx

@@ -0,0 +1,19 @@
+import 'tdesign-web-components/aigc';
+
+import { Component } from 'omi';
+
+export default class BubbleExample extends Component {
+  render() {
+    return (
+      <div>
+        <t-chat-message
+          content="我是消息111"
+          placement="end"
+          header={<span>插入的header</span>}
+          footer={<span>插入的footer</span>}
+        />
+        <t-chat-bubble content="我是消息222"></t-chat-bubble>
+      </div>
+    );
+  }
+}

src/aigc/_example/sender.tsx

@@ -0,0 +1,26 @@
+import 'tdesign-web-components/aigc';
+
+import { Component } from 'omi';
+
+export default class SenderExample extends Component {
+  value: string = '默认';
+
+  onChange = (v) => {
+    this.value = v;
+    this.update();
+    console.log('输入', v);
+  };
+
+  onSubmit = (v) => {
+    console.log('提交', v);
+  };
+
+  render() {
+    return (
+      <t-chat-sender value={this.value} placeholder="请输入" onChange={this.onChange} onSubmit={this.onSubmit}>
+        <span slot="header-content">插入的header-content</span>
+        <span slot="options">插入的options</span>
+      </t-chat-sender>
+    );
+  }
+}

src/aigc/bubble.tsx

@@ -0,0 +1,79 @@
+import { Component, tag } from 'omi';
+
+import classname, { getClassPrefix } from '../_util/classname';
+import { StyledProps, TNode } from '../common';
+
+export type BubbleProps = StyledProps & {
+  key?: string | number;
+  content: string;
+  placement?: 'start' | 'end';
+  header?: TNode;
+  footer?: TNode;
+  messageRender?: (content: string) => TNode;
+};
+
+const className = `${getClassPrefix()}-chat-bubble`;
+
+@tag('t-chat-bubble')
+export default class Bubble extends Component<BubbleProps> {
+  static css = `
+    .${className}-wrapper {
+      --${className}-background: #eee;
+
+      margin: 8px 0;
+      display: flex;
+      width: 100%;
+    }
+    .${className}-end {
+      justify-content: flex-end;
+    }
+    .${className}-content-container {
+      padding: 12px 16px;
+      border-radius: 8px;
+      background: var(--${className}-background);
+    }
+  `;
+
+  static propTypes = {
+    key: [String, Number],
+    content: String,
+    header: [String, Number, Object, Function],
+    footer: [String, Number, Object, Function],
+    placement: String,
+  };
+
+  static defaultProps = {
+    placement: 'start',
+  };
+
+  className = className;
+
+  install(): void {
+    console.log('查看bubble接收到的参数', this.props);
+  }
+
+  renderContent() {
+    if (!this.props.messageRender) {
+      return this.props.content;
+    }
+    return this.props.messageRender(this.props.content);
+  }
+
+  render(props: BubbleProps) {
+    const { placement, header, footer } = props;
+
+    return (
+      <div
+        className={classname(`${this.className}-wrapper`, {
+          [`${this.className}-end`]: placement === 'end',
+        })}
+      >
+        <div className={`${this.className}-main`}>
+          {header ? <header className={`${this.className}-header`}>{header}</header> : null}
+          <div className={`${this.className}-content-container`}>{this.renderContent()}</div>
+          {footer ? <footer className={`${this.className}-footer`}>{footer}</footer> : null}
+        </div>
+      </div>
+    );
+  }
+}

src/aigc/chat.tsx

@@ -0,0 +1,82 @@
+import './sender';
+import './bubble';
+
+import { Component, tag } from 'omi';
+
+import { getClassPrefix } from '../_util/classname';
+import { StyledProps } from '../common';
+import { BubbleProps } from './bubble';
+
+export type ChatProps = StyledProps & {
+  // message
+  messages?: BubbleProps[];
+  onMessageChange?: (v: BubbleProps[]) => void;
+  // input
+  inputValue?: string;
+  inputDefaultValue?: string;
+  placeholder?: string;
+  onInputChange?: (v: string) => void;
+  onSubmit?: (v: string) => void;
+};
+
+const className = `${getClassPrefix()}-chat`;
+
+@tag('t-chat')
+export default class Chat extends Component<ChatProps> {
+  static css = [];
+
+  static propTypes = {
+    messages: Array,
+    onMessageChange: Function,
+    inputValue: String,
+    inputDefaultValue: String,
+    placeholder: String,
+    onInputChange: Function,
+    'input-change': Function,
+    onSubmit: Function,
+    submit: Function,
+  };
+
+  static defaultProps = {
+    messages: [],
+  };
+
+  className = className;
+
+  private renderMessage() {
+    return this.props.messages?.map((message) => <t-chat-bubble key={message.key || message.content} {...message} />);
+  }
+
+  install(): void {
+    console.log('查看chat接收到的参数', this.props);
+  }
+
+  render(props: ChatProps) {
+    const { inputValue, inputDefaultValue, onInputChange, onSubmit, placeholder } = props;
+
+    return (
+      <div className={`${className}-wrapper`}>
+        <header className={`${className}-header`}>
+          <slot name="header"></slot>
+        </header>
+        <main className={`${className}-main`}>
+          <slot name="main-top"></slot>
+          <div className={`${className}-main-content`}>{this.renderMessage()}</div>
+          <slot name="main-bottom"></slot>
+        </main>
+        <footer className={`${className}-footer`}>
+          <t-chat-sender
+            value={inputValue}
+            defaultValue={inputDefaultValue}
+            placeholder={placeholder}
+            onChange={onInputChange}
+            onSubmit={onSubmit}
+          >
+            <slot name="input-header" slot="header-content"></slot>
+            <slot name="input-options" slot="options"></slot>
+          </t-chat-sender>
+        </footer>
+      </div>
+    );
+  }
+}

src/aigc/index.ts

@@ -0,0 +1,12 @@
+import _Bubble from './bubble';
+import _Chat from './chat';
+import _Sender from './sender';
+
+export type { ChatProps } from './chat';
+export type { SenderProps } from './sender';
+export type { BubbleProps } from './bubble';
+
+export const Chat = _Chat;
+export const Sender = _Sender;
+export const Bubble = _Bubble;
+export default Chat;