From 38de134161f6467ffc0d13eace8c6b127ec03fda Mon Sep 17 00:00:00 2001
From: brightzhli <864345220@qq.com>
Date: Tue, 18 Feb 2025 18:21:35 +0800
Subject: [PATCH] =?UTF-8?q?test(aigc):=20=E6=96=B0=E5=A2=9Eaigc=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/sidebar.config.ts       | 14 ++++++
 src/aigc/README.md           | 44 +++++++++++++++++
 src/aigc/_example/base.tsx   | 73 +++++++++++++++++++++++++++
 src/aigc/_example/bubble.tsx | 19 ++++++++
 src/aigc/_example/sender.tsx | 26 ++++++++++
 src/aigc/bubble.tsx          | 79 ++++++++++++++++++++++++++++++
 src/aigc/chat.tsx            | 82 +++++++++++++++++++++++++++++++
 src/aigc/index.ts            | 12 +++++
 src/aigc/sender.tsx          | 95 ++++++++++++++++++++++++++++++++++++
 src/index.ts                 |  1 +
 10 files changed, 445 insertions(+)
 create mode 100644 src/aigc/README.md
 create mode 100644 src/aigc/_example/base.tsx
 create mode 100644 src/aigc/_example/bubble.tsx
 create mode 100644 src/aigc/_example/sender.tsx
 create mode 100644 src/aigc/bubble.tsx
 create mode 100644 src/aigc/chat.tsx
 create mode 100644 src/aigc/index.ts
 create mode 100644 src/aigc/sender.tsx

diff --git a/site/sidebar.config.ts b/site/sidebar.config.ts
index 4b86a17..0b6f968 100644
--- a/site/sidebar.config.ts
+++ b/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',
diff --git a/src/aigc/README.md b/src/aigc/README.md
new file mode 100644
index 0000000..5996e2b
--- /dev/null
+++ b/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
+
diff --git a/src/aigc/_example/base.tsx b/src/aigc/_example/base.tsx
new file mode 100644
index 0000000..bdb3966
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/aigc/_example/bubble.tsx b/src/aigc/_example/bubble.tsx
new file mode 100644
index 0000000..702da87
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/aigc/_example/sender.tsx b/src/aigc/_example/sender.tsx
new file mode 100644
index 0000000..3b27e40
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/aigc/bubble.tsx b/src/aigc/bubble.tsx
new file mode 100644
index 0000000..9636db3
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/aigc/chat.tsx b/src/aigc/chat.tsx
new file mode 100644
index 0000000..731f8f5
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/aigc/index.ts b/src/aigc/index.ts
new file mode 100644
index 0000000..33d23bd
--- /dev/null
+++ b/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;
diff --git a/src/aigc/sender.tsx b/src/aigc/sender.tsx
new file mode 100644
index 0000000..927fdc4
--- /dev/null
+++ b/src/aigc/sender.tsx
@@ -0,0 +1,95 @@
+import '../input';
+import '../button';
+
+import { Component, tag } from 'omi';
+
+import { getClassPrefix } from '../_util/classname';
+import { StyledProps } from '../common';
+
+export type SenderProps = StyledProps & {
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  onChange?: (v: string) => void;
+  onSubmit?: (v: string) => void;
+};
+
+const className = `${getClassPrefix()}-chat-sender`;
+
+@tag('t-chat-sender')
+export default class Sender extends Component<SenderProps> {
+  static css = `
+    .${className}-wrapper {
+    }
+    .${className}-main {
+      display: flex;
+      align-items: center;
+    }
+  `;
+
+  static propTypes = {
+    value: String,
+    defaultValue: String,
+    placeholder: String,
+    onChange: Function,
+    onSubmit: Function,
+  };
+
+  static defaultProps = {};
+
+  private pValue = '';
+
+  className = className;
+
+  get inputValue() {
+    if (this.props.value !== undefined) return this.props.value;
+    return this.pValue;
+  }
+
+  handleChange = (v: string) => {
+    this.pValue = v;
+    this.update();
+
+    this.props.onChange?.(v);
+  };
+
+  handleSubmit = () => {
+    this.props.onSubmit?.(this.inputValue);
+
+    this.pValue = '';
+    this.update();
+  };
+
+  install(): void {
+    console.log('查看sender接收到的参数', this.props);
+    this.pValue = this.props.value || this.props.defaultValue;
+  }
+
+  render(props: SenderProps) {
+    const { placeholder } = props;
+
+    return (
+      <div className={`${this.className}-wrapper`}>
+        <div className={`${this.className}-header`}>
+          <slot name="header-content"></slot>
+        </div>
+        <div className={`${this.className}-main`}>
+          {/* 问题：转lightDOM后input点击会不断复制 */}
+          <t-input
+            className={`${this.className}-input`}
+            value={this.inputValue}
+            placeholder={placeholder}
+            onChange={this.handleChange}
+          />
+          {/* 问题：转lightDOM后slot渲染不出来 */}
+          <t-button className={`${this.className}-submit`} onClick={this.handleSubmit}>
+            提交
+          </t-button>
+        </div>
+        <div className={`${this.className}-footer`}>
+          <slot name="options"></slot>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index e336086..0526700 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 export * from './affix';
+export * from './aigc';
 export * from './alert';
 export * from './avatar';
 export * from './back-top';