feat: 新增错误状态

Author: zydemail

packages/pro-components/chat/chat-content/README.md

@@ -49,7 +49,8 @@ isComponent: true
 -- | -- | -- | -- | --
 content | Object | {} | 聊天内容对象，包含type和data字段 | Y
 role | String | '' | 消息角色，用于区分用户和助手的消息样式 | N
-
+status | String | '' | 消息角色，用于区分用户和助手的消息样式 | N
+markdownProps | Object | 详见chat-markdown | marked 解析器的配置选项 | N
 ### Content 对象结构
 
 ```typescript

packages/pro-components/chat/chat-content/chat-content.less

@@ -4,6 +4,7 @@
 
 @chat-content-user-text-color: var(--td-chat-content-user-text-color, @text-color-primary);
 @chat-content-assistant-text-color: var(--td-chat-content-assistant-text-color, @text-color-primary);
+@chat-content-error-text-color: var(--td-chat-content-error-text-color, @error-color);
 
 .@{chat-content} {
   font-size: 32rpx;
@@ -41,4 +42,8 @@
       border-radius: @radius-small;
     }
   }
+// 错误状态样式
+  &__error {
+    color: @chat-content-error-text-color;
+  }
 }

packages/pro-components/chat/chat-content/chat-content.ts

@@ -19,6 +19,14 @@ export default class ChatContent extends SuperComponent {
       type: String,
       value: '',
     },
+    status: {
+      type: String,
+      value: '',
+    },
+    markdownProps: {
+      type: Object,
+      value: {},
+    },
   };
 
   data = {
@@ -59,7 +67,8 @@ export default class ChatContent extends SuperComponent {
     },
 
     setTextInfo() {
-      if (this.properties.content.type === 'text') {
+      // error 状态下统一按纯文本处理，避免走 markdown 渲染
+      if (this.properties.content.type === 'text' || this.properties.status === 'error') {
         this.setData({
           textInfo: this.escape(this.properties.content.data || ''),
         });
@@ -78,10 +87,6 @@ export default class ChatContent extends SuperComponent {
     },
     attached() {
       this.setTextInfo();
-
-      // TODO: __anonymous ??
-      const mountedFn = function __anonymous() {};
-      mountedFn.call(this);
     },
 
     detached() {},

packages/pro-components/chat/chat-content/chat-content.wxml

@@ -1,16 +1,16 @@
 <wxs src="../../../components/common/utils.wxs" module="_" />
 
 <view class="class {{classPrefix}}" style="{{_._style([style, customStyle])}}">
-  <block wx:if="{{content.type === 'text'}}">
-    <view class="{{classPrefix}}__{{role}}">
+  <block wx:if="{{status === 'error' || content.type === 'text'}}">
+    <view class="{{classPrefix}}__{{role}} {{classPrefix}}__{{status}}">
       <view class="_pre">
         <rich-text nodes="{{textInfo}}" />
       </view>
     </view>
   </block>
   <block wx:else>
     <view class="{{classPrefix}}__assistant">
-      <t-chat-markdown content="{{textInfo}}"></t-chat-markdown>
+      <t-chat-markdown content="{{textInfo}}" options="{{markdownProps && markdownProps.options}}"></t-chat-markdown>
     </view>
   </block>
 </view>

packages/pro-components/chat/chat-markdown/README.md

@@ -55,9 +55,9 @@ isComponent: true
 -- | -- | -- | -- | --
 content | String | '' | Markdown 格式的文本内容 | N
 isMarkdown | Boolean | true | 是否启用 Markdown 解析，false 时作为普通文本显示 | N
-markedOptions | Object | 见下方说明 | marked 解析器的配置选项 | N
+options | Object | 见下方说明 | marked 解析器的配置选项 | N
 
-### markedOptions 配置
+### options 配置
 
 ```javascript
 {
@@ -147,7 +147,7 @@ t-class-link | 链接样式类
 ```html
 <t-chat-markdown 
   content="{{markdownText}}"
-  marked-options="{{{
+  options="{{{
     gfm: true,
     pedantic: false,
     smartLists: true,

packages/pro-components/chat/chat-markdown/chat-markdown.ts

@@ -25,8 +25,8 @@ export default class ChatMarkdown extends SuperComponent {
       type: Boolean,
       value: true,
     },
-    // 新增：marked配置选项
-    markedOptions: {
+    // 新增：marked配置选项（原 markedOptions 重命名为 options）
+    options: {
       type: Object,
       value: {
         gfm: true,
@@ -58,7 +58,7 @@ export default class ChatMarkdown extends SuperComponent {
     // 解析markdown文本
     parseMarkdown(markdown: string) {
       try {
-        const lexer = new Lexer(this.data.markedOptions);
+        const lexer = new Lexer(this.data.options);
         const tokens = lexer.lex(markdown);
 
         this.setData({ nodes: tokens });

packages/pro-components/chat/chat-message/README.md

@@ -39,6 +39,10 @@ isComponent: true
 
 {{ status }}
 
+### 错误状态
+
+{{ error }}
+
 ### 03 组件样式
 
 #### 气泡样式

packages/pro-components/chat/chat-message/_example/chat-message.json

@@ -6,6 +6,7 @@
     "style-component": "./style",
     "configure": "./configure",
     "status": "./status",
-    "content": "./content"
+    "content": "./content",
+    "error": "./error"
   }
 }

packages/pro-components/chat/chat-message/_example/chat-message.wxml

@@ -17,6 +17,9 @@
   <t-demo title="02 组件状态" desc="加载状态">
     <status />
   </t-demo>
+  <t-demo  desc="错误状态">
+    <error />
+  </t-demo>
   <t-demo title="03 组件样式" desc="气泡样式">
     <style-component />
   </t-demo>

packages/pro-components/chat/chat-message/_example/error/index.js

@@ -0,0 +1,14 @@
+Component({
+  data: {
+    message: {
+      role: 'assistant',
+      status: 'error',
+      content: [
+        {
+          type: 'text',
+          data: '！！！请求出错',
+        },
+      ],
+    },
+  },
+});