@aochuang/client-sdk 1.0.278

package/components/account-select/account-select-skeleton.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="sdk-account-select-skeleton">
+        <div 
+            class="sdk-account-select-skeleton__item"
+            v-for="index in 30"
+            :key="index"
+        >
+            <div class="sdk-account-select-skeleton__avatar">
+                <ui-skeleton width="32px" height="32px" radius="4px"></ui-skeleton>
+            </div>
+            <div class="sdk-account-select-skeleton__main">
+                <div class="sdk-account-select-skeleton__name">
+                    <ui-skeleton width="85%" height="18px"></ui-skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import UiSkeleton from '@aochuang/common/components/skeleton'
+
+export default {
+    name: 'SdkAccountSelectSkeleton',
+    components: {
+        UiSkeleton
+    }
+}
+</script>
+<style>
+.sdk-account-select-skeleton{
+    height: 100%;
+    overflow: hidden;
+}
+.sdk-account-select-skeleton:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(225,224,212,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+}
+.sdk-account-select-skeleton__item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 6px 12px;
+}
+.sdk-account-select-skeleton__avatar{
+    margin-right: 12px;
+}
+.sdk-account-select-skeleton__main{
+    flex: 1;
+    min-height: 0;
+}
+</style>

package/components/account-select/account-select.vue

@@ -0,0 +1,205 @@
+<template>
+    <div class="sdk-account-select">
+        <template v-if="loading">
+            <account-select-skeleton></account-select-skeleton>
+        </template>
+        <template v-else>
+            <template v-if="allowAllAccount">
+                <div 
+                    class="sdk-account-select__item is-all" :class="{'is-active': !value}"
+                    @click="handleAccountItemClick(null)"
+                >
+                    <div class="sdk-account-select__item-avatar">
+                        <svg t="1744099218020" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11301" width="200" height="200"><path d="M382.62258422 539.16358718l5.87182835-1.378603 0.61271229-0.2042379a38.65194652 38.65194652 0 0 0 26.60193435-36.20109595 38.2945309 38.2945309 0 0 0-24.81485624-35.4862654 85.67763005 85.67763005 0 0 1-48.60852444-77.61024921c0-38.75406546 33.18859325-70.10452116 65.96871142-80.92910803l3.52309744-1.22542527 1.17436512-3.62521569c6.02500608-19.09620632 15.11357503-36.96698736 27.06146892-52.99963083l0.40847441-0.66377175a216.49174726 216.49174726 0 0 1 6.53560012-10.31399354l7.40360909-11.02882477-13.02014008-0.66377177a22.26188742 22.26188742 0 0 1-2.55296882-0.30635614 33.95448399 33.95448399 0 0 0-5.10593763-0.4084751C346.67678494 226.06750336 275.80637307 298.82711158 275.80637307 388.23207626c0 37.06910562 12.40742778 72.75960822 35.1288498 101.65921473C233.27391419 534.82354026 185.22704258 619.7352803 185.43128049 711.64215359v47.84263442c0 21.18964057 16.7474747 38.39664984 37.32440227 38.39664915H283.97587287v-7.45466855c0-20.01527477 1.83813758-32.57588098 5.92288782-53.25492751l1.78707812-8.98644999h-39.82631233v-16.54323752c0.10211896-81.69499874 54.02081822-152.87176677 130.81411721-172.47856641h-0.05105948z m535.20436276-49.2722962a164.30906663 164.30906663 0 0 0 35.07779032-101.60815526c0-89.45602415-70.87041188-162.21563237-157.92664561-162.21563236a33.85236503 33.85236503 0 0 0-5.10593695 0.51059403 28.59324967 28.59324967 0 0 1-2.55296882 0.25529668l-12.96908131 0.66377177 7.40360909 11.07988424c2.34873091 3.47203727 4.54428412 6.89301575 6.53560013 10.26293406l0.40847509 0.71483125c11.94789391 16.03264347 21.03646216 33.85236503 27.06146824 52.99963082l1.1743658 3.57415621 3.52309675 1.22542528c34.36295908 11.38624039 70.97253011 43.60470574 70.97253081 80.87804856a85.67763005 85.67763005 0 0 1-48.65958389 77.61024919 38.2945309 38.2945309 0 0 0-24.81485628 35.4862654c0 16.18582188 10.72246863 30.73774339 26.5508749 36.20109664l6.43348116 1.63389969c76.793299 19.60679969 130.71199826 90.78356769 130.8651767 172.47856642v16.5432375h-44.83013103l1.78707811 8.98645c4.03369077 20.16845317 5.92288713 33.2907122 5.92288784 53.30598698v7.45466856h61.22018939c20.52586881 0 37.27334351-17.1559498 37.324403-38.39664985v-47.84263372c0.25529667-92.00899296-47.74051477-176.9207323-125.40182344-221.80192209z" fill="currentColor" p-id="11302"></path><path d="M744.78672704 486.11289688A186.21353843 186.21353843 0 0 0 810.39802285 344.52525227C810.34696336 239.85353413 722.42272064 154.5843792 614.33002544 154.5843792 506.28838902 154.5843792 418.3641463 239.85353413 418.3641463 344.57631104c0 54.4292933 23.69154991 105.38654865 65.50917756 141.53658583a320.29545571 320.29545571 0 0 0-134.28615448 107.93951749 302.42467466 302.42467466 0 0 0-56.93120267 176.66543562v60.86277448c0 20.83222497 17.51336542 37.83499633 38.95830266 37.83499634h565.48257161c21.44493724 0 38.80512424-16.84959365 38.90724319-37.78393684v-60.91383398c0-63.46680209-19.70891861-124.58487324-56.93120266-176.66543562a320.29545571 320.29545571 0 0 0-134.28615448-107.93951748z m-130.4567016 42.37928116c143.06836725 0 259.38162176 112.6880395 259.38162177 251.26318142v25.01909345H354.94840371v-25.01909346c0-138.57514193 116.36431396-251.26318143 259.43268121-251.26318141H614.33002544zM485.50722353 344.32101436c0-68.77697762 57.79921162-124.78911114 128.82280191-124.78911112 71.02358959 0 128.87386068 55.96107405 128.87386069 124.78911112 0 68.8280364-57.85027109 124.78911114-128.87386068 124.78911114-70.97253011 0-128.8228019-55.96107405-128.82280192-124.78911114z" fill="currentColor" p-id="11303"></path></svg>
+                    </div>
+                    <div class="sdk-account-select__item-main">
+                        <div class="sdk-account-select__item-main-row">
+                            <span class="sdk-account-select__item-name">全部微号</span>
+                        </div>
+                    </div> 
+                    <slot name="all"></slot>
+                </div>
+            </template>
+            <template v-if="data && data.length">
+                <div 
+                    class="sdk-account-select__item"
+                    :class="{'is-active': value === item.id}"
+                    v-for="item in data"
+                    :key="item.id"
+                    @click="handleAccountItemClick(item)"
+                    @contextmenu="handleAccountItemContext(item, $event)"
+                >
+                    <div class="sdk-account-select__item-avatar">
+                        <ui-image class="sdk-account-select__item-avatar-image" :src="item[avatarField]"></ui-image>
+                        <span class="sdk-account-select__item-network" :class="[{'is-online': item[aliveField], 'is-offline': !item[aliveField]}]" :title="item[aliveField] ? '在线' : '离线'"></span>
+                    </div>
+                    <div class="sdk-account-select__item-main">
+                        <div class="sdk-account-select__item-main-row">
+                            <span class="sdk-account-select__item-name">
+                                <slot name="name" :item="item">{{ item[nameField] }}</slot> 
+                            </span>
+                        </div>
+                    </div>
+                    <slot name="addon" :item="item"></slot>
+                </div>
+            </template>
+            <template v-else>
+                <span class="sdk-account-select__empty">暂无数据</span>
+            </template>
+        </template>
+    </div>
+</template>
+<script>
+import UiImage from '../../common/image'
+import AccountSelectSkeleton from './account-select-skeleton.vue'
+
+export default {
+    name: 'SdkAccountSelect',
+    components: {
+        UiImage,
+        AccountSelectSkeleton
+    },
+    props: {
+        data: {
+            type: Array
+        },
+        allowAllAccount: {
+            type: Boolean,
+            default: true
+        },
+        avatarField: {
+            type: String,
+            default: 'avatar'
+        },
+        nameField: {
+            type: String,
+            default: 'name'
+        },
+        aliveField: {
+            type: String,
+            default: 'wechatAlive'
+        },
+        value: {
+            type: String
+        },
+        queryMethod: {
+            type: Function
+        }
+    },
+    data () {
+        return {
+            loading: false
+        }
+    },
+    created () {
+        this.reload()
+    },
+    methods: {
+        reload () {
+            return this.loadData()
+        },
+        loadData () {
+            if (!this.queryMethod) {
+                return
+            }
+            this.loading = true
+            return this.queryMethod().finally(() => {
+                this.loading = false
+            })
+        },
+        handleAccountItemContext (item, evt) {
+            this.$emit('item-contextmenu', item, evt)
+        },
+        handleAccountItemClick (item) {
+            this.$emit('input', item ? item.id : null)
+        }
+    }
+}
+</script>
+<style>
+.sdk-account-select{
+    padding: 6px 0;
+    overflow: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    word-break: break-all;
+}
+.sdk-account-select__item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 6px;
+    border-radius: 3px;
+    margin: 0 6px;
+    cursor: pointer;
+    transition: all .25s;
+    position: relative;
+}
+.sdk-account-select__item:not(:last-child) {
+    margin-bottom: 2px;
+}
+.sdk-account-select__item-network{
+    position: absolute;
+    right: -3px;
+    bottom: -3px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: 1px solid #fff;
+    box-sizing: content-box;
+}
+.sdk-account-select__item-network.is-online {
+    background-color: #08bb07;
+}
+.sdk-account-select__item-network.is-offline {
+    background-color: #ddd;
+}
+.sdk-account-select__item:hover {
+    background-color: rgba(0,0,0,.06);
+}
+.sdk-account-select__item.is-active {
+    background: linear-gradient(to right,  rgba(56,120,232,1) 0%,rgba(79,160,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    color: #fff;
+}
+.sdk-account-select__item.is-all .sdk-account-select__item-avatar{
+    background-color: #f1f4f8;
+    color: #666;
+}
+.sdk-account-select__item-avatar{
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    border-radius: 3px;
+    margin-right: 6px;
+    position: relative;
+}
+.sdk-account-select__item-avatar svg {
+    width: 100%;
+    height: 100%;
+}
+.sdk-account-select__item-avatar-image{
+    width: 100%;
+    height: 100%;
+    border-radius: 3px;
+}
+.sdk-account-select__empty{
+    color: #999;
+    font-size: 12px;
+    text-align: center;
+    display: block;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.sdk-account-select__item-name{
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/components/account-select/all.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744098731580" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11146" xmlns:xlink="http://www.w3.org/1999/xlink" width="242.7734375" height="200"><path d="M282.479177 550.912l8.411429-1.974857 0.877714-0.292572a55.369143 55.369143 0 0 0 38.107429-51.858285 54.857143 54.857143 0 0 0-35.547429-50.834286 122.733714 122.733714 0 0 1-69.632-111.177143c0-55.515429 47.542857-100.425143 94.500571-115.931428l5.046858-1.755429 1.682285-5.193143c8.630857-27.355429 21.650286-52.955429 38.765715-75.922286l0.585142-0.950857a310.125714 310.125714 0 0 1 9.362286-14.774857l10.605714-15.798857-18.651428-0.950857a31.890286 31.890286 0 0 1-3.657143-0.438857 48.64 48.64 0 0 0-7.314286-0.585143C230.986606 102.4 129.46432 206.628571 129.46432 334.701714c0 53.101714 17.773714 104.228571 50.322286 145.627429C68.53632 544.694857-0.291109 666.331429 0.001463 797.988571v68.534858c0 30.354286 23.990857 55.003429 53.467428 55.003428H141.167177v-10.678857c0-28.672 2.633143-46.665143 8.484572-76.288l2.56-12.873143h-57.051429v-23.698286c0.146286-117.028571 77.385143-218.989714 187.392-247.076571h-0.073143z m766.683429-70.582857a235.373714 235.373714 0 0 0 50.249143-145.554286c0-128.146286-101.522286-232.374857-226.230858-232.374857a48.493714 48.493714 0 0 0-7.314285 0.731429 40.96 40.96 0 0 1-3.657143 0.365714l-18.578286 0.950857 10.605714 15.872c3.364571 4.973714 6.509714 9.874286 9.362286 14.701714l0.585143 1.024c17.115429 22.966857 30.134857 48.493714 38.765714 75.922286l1.682286 5.12 5.046857 1.755429c49.225143 16.310857 101.668571 62.464 101.668572 115.858285a122.733714 122.733714 0 0 1-69.705143 111.177143 54.857143 54.857143 0 0 0-35.547429 50.834286c0 23.186286 15.36 44.032 38.034286 51.858286l9.216 2.340571c110.006857 28.086857 187.245714 130.048 187.465143 247.076571v23.698286h-64.219429l2.56 12.873143c5.778286 28.891429 8.484571 47.689143 8.484572 76.361143v10.678857h87.698285c29.403429 0 53.394286-24.576 53.467429-55.003429v-68.534857c0.365714-131.803429-68.388571-253.44-179.638857-317.732571z" fill="currentColor" p-id="11147"></path><path d="M801.281463 474.916571A266.752 266.752 0 0 0 895.270034 272.091429C895.196891 122.148571 769.244891 0 614.401463 0 459.631177 0 333.679177 122.148571 333.679177 272.164571c0 77.970286 33.938286 150.966857 93.842286 202.752a458.825143 458.825143 0 0 0-192.365714 154.624 433.225143 433.225143 0 0 0-81.554286 253.074286v87.186286c0 29.842286 25.088 54.198857 55.808 54.198857h810.057143c30.72 0 55.588571-24.137143 55.734857-54.125714v-87.259429c0-90.916571-28.233143-178.468571-81.554286-253.074286a458.825143 458.825143 0 0 0-192.365714-154.624z m-186.88 60.708572c204.946286 0 371.565714 161.426286 371.565714 359.936v35.84H242.835749v-35.84c0-198.509714 166.692571-359.936 371.638857-359.936H614.401463zM429.862034 271.798857c0-98.523429 82.797714-178.761143 184.539429-178.761143 101.741714 0 184.612571 80.164571 184.612571 178.761143 0 98.596571-82.870857 178.761143-184.612571 178.761143-101.668571 0-184.539429-80.164571-184.539429-178.761143z" fill="currentColor" p-id="11148"></path></svg>

package/components/account-select/index.js

@@ -0,0 +1,3 @@
+import AccountSelect from './account-select.vue'
+
+export default AccountSelect

package/components/chat-editor/MENTION_TOKEN_SUMMARY.md

@@ -0,0 +1,74 @@
+# @ 群成员 Token 改造总结
+
+## 背景
+
+群聊 @ 成员原来只在输入框里保存普通文本，例如 `@张三 `。
+当群里存在多个同名成员时，发送前只能按昵称从成员列表里反查 ID，
+最终可能把消息 @ 到错误的人。
+
+## 最终方案
+
+将编辑器从纯文本 textarea 改为 `contenteditable` 编辑器，并把 @ 成员做成
+不可拆分的 DOM token：
+
+```html
+<span data-mention-id="xxx" contenteditable="false">@张三</span>
+```
+
+用户看到的仍然是 `@张三`，但发送时不再靠昵称匹配，而是直接从 token 的
+`data-mention-id` 读取真实成员 ID。
+
+## 核心改动
+
+- 将 `components/chat-editor/chat-editor.vue` 的输入区从 `ui-textarea` 改为 `contenteditable`。
+- 新增 @ 实体相关 API：
+  - `insertMention(mention)`
+  - `getMentions()`
+  - `clearMentions()`
+- 保持原有文本接口兼容：
+  - `setInputText(text)`
+  - `getInputText()`
+  - `insertInputText(text)`
+  - `insertSuggestionsText(text)`
+  - `focus()`
+- 群聊发送逻辑优先从 mention token 中读取 `atIds`。
+- 手动输入的 @ 文本仍做兼容，但只对昵称唯一的成员生效；同名昵称不再猜测。
+
+## 安全处理
+
+- 不允许把任意 HTML 直接粘贴进 `contenteditable`。
+- 粘贴时只白名单恢复本编辑器生成的 mention token。
+- 其他 HTML 内容全部降级为纯文本。
+- mention 文本通过 `textContent` 写入，不使用 `innerHTML`，避免 XSS 注入。
+
+## 编辑行为
+
+- mention token 使用 `contenteditable="false"`，浏览器删除、复制时会把一个 @ 成员当成整体。
+- 同名成员也能区分，因为每个 token 都带有自己的 `data-mention-id`。
+- 在本编辑器内复制粘贴 @ 成员时，可以保留成员 ID。
+- 从外部来源复制的内容会按普通文本处理，不信任外部 HTML。
+
+## 兼容点
+
+- `disabled` 不再依赖 textarea 原生能力，改为：
+  - `contenteditable=false`
+  - 事件入口统一 guard
+  - 保留原 disabled 遮罩样式
+- `maxlength` 需要手动实现，因为 `contenteditable` 没有 textarea 原生 maxlength：
+  - `beforeinput` 拦截超长输入
+  - 粘贴和程序插入按剩余长度裁剪
+  - 输入后做兜底截断
+- 快捷语自动完成继续复用原来的 nearest-word 逻辑。
+- @ 成员自动完成会从最近的 `@` 开始替换，避免留下半截输入内容。
+
+## 涉及文件
+
+- `components/chat-editor/chat-editor.vue`
+- `src/entries/chat/views/chat/chat-panel/chat-panel-editor/chat-panel-editor.vue`
+- `src/entries/chat/views/chat/chat-panel/chat-panel-room.vue`
+
+## 验证情况
+
+- Vue SFC script/template 解析通过。
+- `git diff --check` 通过。
+

package/components/chat-editor/chat-editor-button/chat-editor-button.vue

@@ -0,0 +1,78 @@
+<template>
+    <ui-tooltip :disabled="!tips" :content="tips">
+        <div class="sdk-chat-editor-button" :class="{'is-active': active}" @click.stop="handleClick">
+            <template v-if="loading">
+                <ui-loading size="mini"></ui-loading>
+            </template>
+            <template v-else>
+                <template v-if="icon">
+                    <span class="sdk-chat-editor-button__icon" v-html="icon"></span>
+                </template>
+                <template v-else-if="$slots.icon">
+                    <slot name="icon"></slot>
+                </template>
+            </template>
+            <span class="sdk-chat-editor-button__text" v-if="text">{{ text }}</span>
+        </div>
+    </ui-tooltip>
+</template>
+<script>
+import { Tooltip as UiTooltip, Loading as UiLoading } from '@aochuang/common/components'
+
+export default {
+    name: 'SdkChatEditorButton',
+    components: {
+        UiLoading,
+        UiTooltip
+    },
+    props: {
+        tips: {
+            type: String
+        },
+        icon: {
+            type: String
+        },
+        text: {
+            type: String
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        active: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        handleClick (evt) {
+            if (this.loading) {
+                return
+            }
+            this.$emit('click', evt)
+        }
+    }
+}
+</script>
+<style>
+.sdk-chat-editor-button{
+    color: #999;
+    transition: all .25s;
+    cursor: pointer;
+}
+.sdk-chat-editor-button.is-active, 
+.sdk-chat-editor-button:hover {
+    color: #0052CC;
+}
+.sdk-chat-editor-button__icon{
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    border-radius: 3px;
+}
+.sdk-chat-editor-button__icon svg {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+}
+</style>