@aochuang/client-sdk 1.0.278

package/components/chat-editor/index.js

@@ -0,0 +1,12 @@
+import ChatEditor from './chat-editor.vue'
+import ChatEditorButton from './chat-editor-button/chat-editor-button.vue'
+import ChatEditorToolbar from './chat-editor-toolbar/chat-editor-toolbar.vue'
+import ChatEditorToolbarItem from './chat-editor-toolbar/chat-editor-toolbar-item.vue'
+
+export {
+    ChatEditor,
+    ChatEditorButton,
+    ChatEditorToolbar,
+    ChatEditorToolbarItem
+}
+export default ChatEditor

package/components/chat-editor/utils.js

@@ -0,0 +1,189 @@
+/**
+ * 找到字符串中离光标最近的字符串片段
+ * 智能检测场景：
+ * 1. 如果光标前最近的非空白字符是 @，则提取 @ 之后的字符（@ 成员场景）
+ * 2. 否则，提取最近的非空白字符串（普通输入场景）
+ * 
+ * @param {string} inputStr - 输入的原始字符串
+ * @param {number} cursorPos - 光标位置（从0开始的索引，需在[0, inputStr.length]范围内）
+ * @returns {Object} 包含最近字符串的信息：
+ *   - nearest: 离光标最近的字符串片段（无则为空）
+ *   - start: 该字符串在原字符串中的起始索引
+ *   - end: 该字符串在原字符串中的结束索引（不包含）
+ *   - isAtContext: 是否在 @ 上下文中（用于外部判断）
+ */
+export function getNearestString (inputStr, cursorPos) {
+    // 边界处理：光标位置超出有效范围时修正
+    const safeCursorPos = Math.max(0, Math.min(cursorPos, inputStr.length));
+    
+    // 特殊情况：字符串为空
+    if (inputStr.length === 0) {
+      return { nearest: '', start: 0, end: 0, isAtContext: false };
+    }
+  
+    // 1. 智能检测：从光标位置往前查找，判断是否在 @ 上下文中
+    let isAtContext = false;
+    let atPosition = -1;
+    
+    for (let i = safeCursorPos - 1; i >= 0; i--) {
+      const char = inputStr[i];
+      if (char === '@') {
+        // 找到 @，说明在 @ 上下文中
+        isAtContext = true;
+        atPosition = i;
+        break;
+      }
+      if (/\s/.test(char)) {
+        // 遇到空白字符，停止查找（说明不在 @ 上下文中）
+        break;
+      }
+    }
+    
+    // 2. 根据上下文选择拆分模式
+    let splitRegex, isSeparator;
+    
+    if (isAtContext) {
+      // @ 成员场景：按 @ 字符拆分
+      splitRegex = /(@)/;
+      isSeparator = (part) => part === '@';
+    } else {
+      // 普通输入场景：按空白字符拆分
+      splitRegex = /(\s+)/;
+      isSeparator = (part) => /\s+/.test(part);
+    }
+    
+    // 拆分字符串（保留分隔符，用于定位）
+    const parts = inputStr.split(splitRegex);
+  
+    // 2. 计算每个片段的起止位置
+    const segments = [];
+    let currentPos = 0;
+    for (const part of parts) {
+      if (part === '') continue; // 跳过空字符串
+      
+      const start = currentPos;
+      const end = currentPos + part.length;
+      segments.push({
+        text: part,
+        start,
+        end,
+        isSeparator: isSeparator(part) // 标记是否为分隔符片段
+      });
+      currentPos = end;
+    }
+  
+    // 3. 找到光标所在的片段或最近的片段
+    let cursorSegment = null;
+    let cursorSegmentIndex = -1;
+    
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      // 光标在片段内部或末尾
+      if (safeCursorPos >= seg.start && safeCursorPos <= seg.end) {
+        cursorSegment = seg;
+        cursorSegmentIndex = i;
+        break;
+      }
+    }
+    
+    // 如果没有找到片段（光标在片段之间），找最近的片段
+    if (!cursorSegment && segments.length > 0) {
+      for (let i = 0; i < segments.length; i++) {
+        const seg = segments[i];
+        if (safeCursorPos < seg.start) {
+          // 光标在这个片段之前，选择这个片段或前一个片段
+          if (i > 0) {
+            const prevSeg = segments[i - 1];
+            const distToPrev = safeCursorPos - prevSeg.end;
+            const distToNext = seg.start - safeCursorPos;
+            if (distToPrev <= distToNext) {
+              cursorSegment = prevSeg;
+              cursorSegmentIndex = i - 1;
+            } else {
+              cursorSegment = seg;
+              cursorSegmentIndex = i;
+            }
+          } else {
+            cursorSegment = seg;
+            cursorSegmentIndex = i;
+          }
+          break;
+        }
+      }
+      // 如果光标在所有片段之后
+      if (!cursorSegment) {
+        cursorSegment = segments[segments.length - 1];
+        cursorSegmentIndex = segments.length - 1;
+      }
+    }
+  
+    // 4. 确定离光标最近的字符串片段
+    let nearest = '';
+    let start = 0;
+    let end = 0;
+  
+    if (cursorSegment) {
+      if (!cursorSegment.isSeparator) {
+        // 光标在非分隔符字符串中 → 直接返回该字符串
+        nearest = cursorSegment.text;
+        start = cursorSegment.start;
+        end = cursorSegment.end;
+      } else {
+        // 光标在分隔符区域
+        // 如果是 at 上下文且分隔符是 @，直接返回 @
+        if (isAtContext && cursorSegment.text === '@') {
+          nearest = '@';
+          start = cursorSegment.start;
+          end = cursorSegment.end;
+        } else {
+          // 其他情况：比较左右两侧最近的非分隔符字符串
+          const segIndex = cursorSegmentIndex;
+        
+        // 左侧最近的非分隔符字符串（从光标片段向左查找）
+        let leftNearest = null;
+        for (let i = segIndex - 1; i >= 0; i--) {
+          if (!segments[i].isSeparator) {
+            leftNearest = segments[i];
+            break;
+          }
+        }
+        
+        // 右侧最近的非分隔符字符串（从光标片段向右查找）
+        let rightNearest = null;
+        for (let i = segIndex + 1; i < segments.length; i++) {
+          if (!segments[i].isSeparator) {
+            rightNearest = segments[i];
+            break;
+          }
+        }
+  
+        // 计算距离并选择最近的
+        if (leftNearest && rightNearest) {
+          const leftDist = safeCursorPos - leftNearest.end; // 光标到左侧字符串结束的距离
+          const rightDist = rightNearest.start - safeCursorPos; // 光标到右侧字符串开始的距离
+          if (leftDist <= rightDist) {
+            nearest = leftNearest.text;
+            start = leftNearest.start;
+            end = leftNearest.end;
+          } else {
+            nearest = rightNearest.text;
+            start = rightNearest.start;
+            end = rightNearest.end;
+          }
+        } else if (leftNearest) {
+          // 只有左侧有非分隔符字符串
+          nearest = leftNearest.text;
+          start = leftNearest.start;
+          end = leftNearest.end;
+        } else if (rightNearest) {
+          // 只有右侧有非分隔符字符串
+          nearest = rightNearest.text;
+          start = rightNearest.start;
+          end = rightNearest.end;
+        }
+        // 若两侧都没有，则返回空（全是分隔符的情况）
+        }
+      }
+    }
+    return { nearest, start, end, isAtContext };
+  }

package/components/chat-friend-profile/chat-friend-profile.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="sdk-chat-friend-profile">
+        <template v-if="loading">
+            <span class="sdk-chat-friend-profile__loading">数据加载中...</span>
+        </template>
+        <template v-else-if="friendData">
+            <div class="sdk-chat-friend-profile__row">
+                <div class="sdk-chat-friend-profile__col">
+                    <span class="sdk-chat-friend-profile__name">
+                        <slot name="name" :data="friendData"></slot>
+                    </span>
+                </div>
+                <div class="sdk-chat-friend-profile__col" v-if="$slots['head-left']">
+                    <slot name="head-left"></slot>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="sdk-chat-friend-profile__exception">未找到好友数据</div>
+        </template>
+    </div>
+</template>
+<script>
+export default {
+    name: 'SdkChatFriendProfile',
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        queryMethod: {
+            type: Function,
+            required: true
+        }
+    },
+    data () {
+        return {
+            loading: false,
+            friendData: null
+        }
+    },
+    watch: {
+        id () {
+            this.refreshData()
+        }
+    },
+    created () {
+        this.refreshData()
+    },
+    methods: {
+        refreshData () {
+            this.loading = true
+            this.queryMethod().then(rs => {
+                this.friendData = rs
+            }).finally(() => {
+                this.loading = false
+            })
+        }
+    }
+}
+</script>
+<style>
+.sdk-chat-friend-profile{
+    line-height: 1.5em;
+}
+.sdk-chat-friend-profile__loading{
+    min-height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.sdk-chat-friend-profile__row{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+    min-height: 32px;
+}
+.sdk-chat-friend-profile__row:not(:last-child) {
+    margin-bottom: 3px;
+}
+.sdk-chat-friend-profile__col{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+}
+.sdk-chat-friend-profile__col:last-child {
+    min-width: 0;
+}
+.sdk-chat-friend-profile__col:not(:first-child){
+    margin-left: 12px;
+}
+.sdk-chat-friend-profile__quota{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+    font-size: 12px;
+}
+.sdk-chat-friend-profile__quota-label{
+    color: #666;
+    white-space: nowrap;
+}
+.sdk-chat-friend-profile__quota-target {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.sdk-chat-friend-profile__name{
+    font-weight: bold;
+    min-width: 0;
+}
+.sdk-chat-friend-profile__exception{
+    color: #999;
+}
+</style>

package/components/chat-friend-profile/index.js

@@ -0,0 +1,3 @@
+import ChatFriendProfile from './chat-friend-profile.vue'
+
+export default ChatFriendProfile

package/components/chat-layout/chat-layout.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="sdk-chat-layout">
+        <template v-if="$slots.top">
+            <div class="sdk-chat-layout__top">
+                <slot name="top"></slot>
+            </div>
+        </template>
+        <div class="sdk-chat-layout__head">
+            <div class="sdk-chat-layout__head-left">
+                <slot name="head-left"></slot>
+            </div>
+            <div class="sdk-chat-layout__head-right">
+                <slot name="head-right"></slot>
+            </div>
+        </div>
+        <div class="sdk-chat-layout__body">
+            <bi-resizable
+                direction="vertical"
+                :initialSize="260"
+                :minSize="260"
+                :maxSize="480"
+            >
+                <template v-if="$slots.foot">
+                    <template slot="panel"> 
+                        <slot name="foot"></slot>
+                    </template>
+                </template>
+                <template slot="content">
+                    <slot></slot>
+                </template>
+            </bi-resizable>
+        </div>
+    </div>
+</template>
+<script>
+import BiResizable from '@aochuang/common/common/resizable'
+
+export default {
+    name: 'SdkChatLayout',
+    components: {
+        BiResizable
+    }
+}
+</script>
+<style>
+.sdk-chat-layout{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.sdk-chat-layout__head{
+    border-bottom: 1px solid #eee;
+    padding: 8px 12px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+.sdk-chat-layout__head-left{
+    min-width: 0;
+}
+.sdk-chat-layout__head-right{
+    margin-left: 24px;
+}
+.sdk-chat-layout__body{
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    z-index: 10;
+}
+</style>

package/components/chat-layout/index.js

@@ -0,0 +1,3 @@
+import ChatLayout from './chat-layout.vue'
+
+export default ChatLayout