801 lines
53 KiB
HTML
801 lines
53 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}通讯录管理 - 机器人管理后台{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-shell contacts-page">
|
|
<div class="page-hero">
|
|
<div class="page-hero-copy">
|
|
<div class="page-eyebrow">Contacts Workspace</div>
|
|
<h1>通讯录管理</h1>
|
|
<p>把联系人、群组、公众号和公共好友统一放进一个更现代的联络工作台里。</p>
|
|
</div>
|
|
<div class="page-hero-actions">
|
|
<el-input placeholder="搜索联系人 / 群组..." v-model="searchQuery" class="hero-search" clearable>
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
</el-input>
|
|
<el-button type="success" @click="updateContacts">更新通讯录</el-button>
|
|
<el-button type="primary" @click="refreshContacts">刷新数据</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-row :gutter="16" class="overview-grid">
|
|
<el-col :span="6">
|
|
<el-card class="overview-card overview-card--primary" shadow="hover">
|
|
<div class="overview-label">总联系人数</div>
|
|
<div class="overview-value">{% raw %}{{ statistics.total }}{% endraw %}</div>
|
|
<div class="overview-note">系统已收录联系人总量</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card class="overview-card" shadow="hover">
|
|
<div class="overview-label">群组数</div>
|
|
<div class="overview-value">{% raw %}{{ statistics.groups }}{% endraw %}</div>
|
|
<div class="overview-note">活跃或可管理的群组</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card class="overview-card" shadow="hover">
|
|
<div class="overview-label">个人联系人数</div>
|
|
<div class="overview-value">{% raw %}{{ statistics.personal }}{% endraw %}</div>
|
|
<div class="overview-note">私聊联系人规模</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card class="overview-card overview-card--soft" shadow="hover">
|
|
<div class="overview-label">公众号数</div>
|
|
<div class="overview-value">{% raw %}{{ statistics.official }}{% endraw %}</div>
|
|
<div class="overview-note">已同步的公众号账号</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-card class="workspace-card" shadow="hover">
|
|
<div slot="header" class="workspace-header">
|
|
<div>
|
|
<h3>联系人分类视图</h3>
|
|
<p>按群组、个人、公众号和公共好友切换查看，减少跳页成本。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick" class="contacts-tabs">
|
|
<el-tab-pane label="群组" name="groups">
|
|
<el-table :data="filteredGroups" style="width: 100%">
|
|
<el-table-column type="index" width="54"></el-table-column>
|
|
<el-table-column label="群组信息" min-width="320">
|
|
<template slot-scope="scope">
|
|
<div class="entity-cell">
|
|
<div class="entity-avatar entity-avatar--group">
|
|
<i class="el-icon-user-solid"></i>
|
|
</div>
|
|
<div class="entity-copy">
|
|
<div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
|
|
<div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="220">
|
|
<template slot-scope="scope">
|
|
<div class="action-row">
|
|
<el-button size="mini" type="primary" plain @click="viewGroupDetails(scope.row)">查看详情</el-button>
|
|
<el-button size="mini" type="success" @click="openChatDialog(scope.row)">聊天</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="个人联系人" name="personal">
|
|
<el-table :data="filteredPersonal" style="width: 100%">
|
|
<el-table-column type="index" width="54"></el-table-column>
|
|
<el-table-column label="联系人" min-width="320">
|
|
<template slot-scope="scope">
|
|
<div class="entity-cell">
|
|
<el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
|
|
<img src="/static/logo.png"/>
|
|
</el-avatar>
|
|
<div class="entity-copy">
|
|
<div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
|
|
<div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="220">
|
|
<template slot-scope="scope">
|
|
<div class="action-row">
|
|
<el-button size="mini" type="primary" plain @click="viewUserDetails(scope.row)">查看详情</el-button>
|
|
<el-button size="mini" type="success" @click="openChatDialog(scope.row)">聊天</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="公众号" name="official">
|
|
<el-table :data="filteredOfficial" style="width: 100%">
|
|
<el-table-column type="index" width="54"></el-table-column>
|
|
<el-table-column label="公众号" min-width="320">
|
|
<template slot-scope="scope">
|
|
<div class="entity-cell">
|
|
<el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
|
|
<img src="/static/logo.png"/>
|
|
</el-avatar>
|
|
<div class="entity-copy">
|
|
<div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
|
|
<div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="160">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="primary" plain @click="viewOfficialDetails(scope.row)">查看详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="公共好友" name="public">
|
|
<el-table :data="filteredPublic" style="width: 100%">
|
|
<el-table-column type="index" width="54"></el-table-column>
|
|
<el-table-column label="好友信息" min-width="320">
|
|
<template slot-scope="scope">
|
|
<div class="entity-cell">
|
|
<el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
|
|
<img src="/static/logo.png"/>
|
|
</el-avatar>
|
|
<div class="entity-copy">
|
|
<div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
|
|
<div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="160">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="primary" plain @click="viewPublicDetails(scope.row)">查看详情</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<div class="pagination-container" v-if="activeTab === 'groups' && groupsList.length > 10">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="groupsList.length"></el-pagination>
|
|
</div>
|
|
<div class="pagination-container" v-if="activeTab === 'personal' && personalList.length > 10">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="personalList.length"></el-pagination>
|
|
</div>
|
|
<div class="pagination-container" v-if="activeTab === 'official' && officialList.length > 10">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="officialList.length"></el-pagination>
|
|
</div>
|
|
<div class="pagination-container" v-if="activeTab === 'public' && publicList.length > 10">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="publicList.length"></el-pagination>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-dialog title="群组详情" :visible.sync="groupDetailDialogVisible" width="72%">
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="群ID">{% raw %}{{ currentGroup.wxid }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="群名称">{% raw %}{{ currentGroup.name }}{% endraw %}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<div class="group-members-section">
|
|
<div class="section-title">
|
|
<h3>群成员列表</h3>
|
|
<div class="section-actions">
|
|
<el-input placeholder="搜索群成员..." v-model="groupMemberSearchQuery" class="group-search" clearable></el-input>
|
|
<el-button size="mini" type="success" @click="refreshCurrentGroupContexts">刷新本群摘要</el-button>
|
|
</div>
|
|
</div>
|
|
<el-table :data="filteredGroupMembers" style="width: 100%" v-loading="groupMembersLoading" class="group-members-table">
|
|
<el-table-column type="index" width="54"></el-table-column>
|
|
<el-table-column label="成员" min-width="280" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<div class="entity-cell">
|
|
<el-avatar size="small" :src="getHeadImage(scope.row.wxid)" @error="() => true">
|
|
<img src="/static/logo.png"/>
|
|
</el-avatar>
|
|
<div class="entity-copy">
|
|
<div class="entity-title">{% raw %}{{ scope.row.name || '-' }}{% endraw %}</div>
|
|
<div class="entity-subtitle">{% raw %}{{ scope.row.wxid }}{% endraw %}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="display_name" label="群昵称" min-width="180" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="状态" width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag size="mini" :type="scope.row.status === 1 ? 'success' : 'info'">
|
|
{% raw %}{{ scope.row.status === 1 ? '在群' : '已退群' }}{% endraw %}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="latest_active_time" label="活跃时间" width="168" show-overflow-tooltip>
|
|
<template slot-scope="scope">{% raw %}{{ scope.row.latest_active_time || '-' }}{% endraw %}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="activity_level" label="互动强度" width="110"></el-table-column>
|
|
<el-table-column label="回复建议" min-width="260" show-overflow-tooltip>
|
|
<template slot-scope="scope">{% raw %}{{ scope.row.response_style_hint || '-' }}{% endraw %}</template>
|
|
</el-table-column>
|
|
<el-table-column label="后台摘要" width="110" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="primary" plain @click="openMemberContextDialog(scope.row)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination-container" v-if="groupMembersList.length > 10">
|
|
<el-pagination @size-change="handleGroupMembersSizeChange" @current-change="handleGroupMembersCurrentChange" :current-page="groupMembersCurrentPage" :page-sizes="[10, 20, 50, 100]" :page-size="groupMembersPageSize" layout="total, sizes, prev, pager, next, jumper" :total="groupMembersList.length"></el-pagination>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="用户详情" :visible.sync="userDetailDialogVisible" width="50%">
|
|
<div class="detail-avatar-wrap">
|
|
<el-avatar size="large" :src="getHeadImage(currentUser.wxid)" @error="() => true" class="detail-avatar">
|
|
<img src="/static/logo.png"/>
|
|
</el-avatar>
|
|
</div>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="微信ID">{% raw %}{{ currentUser.wxid }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="昵称">{% raw %}{{ currentUser.name }}{% endraw %}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="成员交互摘要" :visible.sync="memberContextDialogVisible" width="52%">
|
|
<div v-loading="memberContextLoading">
|
|
<el-alert
|
|
title="该摘要仅供后台调优参考，不会在群内对用户显式展示。"
|
|
type="info"
|
|
:closable="false"
|
|
show-icon>
|
|
</el-alert>
|
|
|
|
<div class="member-context-toolbar">
|
|
<div class="member-context-title">
|
|
<strong>{% raw %}{{ currentContextMember.name || currentContextMember.wxid || '成员' }}{% endraw %}</strong>
|
|
<span>{% raw %}{{ currentContextMember.wxid || '' }}{% endraw %}</span>
|
|
</div>
|
|
<el-button size="mini" type="success" @click="refreshMemberContext">刷新摘要</el-button>
|
|
</div>
|
|
|
|
<el-empty
|
|
v-if="!memberContextLoading && !memberContext"
|
|
description="暂无后台摘要，可手动刷新后稍等查看。">
|
|
</el-empty>
|
|
|
|
<el-descriptions :column="1" border v-if="memberContext">
|
|
<el-descriptions-item label="互动强度">{% raw %}{{ memberContext.activity_level || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="表达特征">{% raw %}{{ memberContext.message_pattern || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="互动风格">{% raw %}{{ memberContext.interaction_style || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="性格倾向（长期观察）">{% raw %}{{ ((memberContext.meta || {}).temperament_tendency) || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="回复建议">{% raw %}{{ memberContext.response_style_hint || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="观察跨度">
|
|
{% raw %}{{ ((memberContext.meta || {}).observation_days || 0) }}{% endraw %} 天
|
|
<el-tag
|
|
v-if="(memberContext.meta || {}).stable_ready"
|
|
size="mini"
|
|
type="success"
|
|
class="context-tag">
|
|
已进入长期画像
|
|
</el-tag>
|
|
<el-tag
|
|
v-else
|
|
size="mini"
|
|
type="info"
|
|
class="context-tag">
|
|
仍在积累
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="长期关注">
|
|
<el-tag v-for="item in (memberContext.topics_of_interest || [])" :key="item" size="mini" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!(memberContext.topics_of_interest || []).length">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="身份线索">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).identity_traits) || [])" :key="item" size="mini" type="info" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).identity_traits) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="技能画像">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).skill_profile) || [])" :key="item" size="mini" type="success" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).skill_profile) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="家庭线索">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).family_profile) || [])" :key="item" size="mini" type="warning" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).family_profile) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="人生阶段线索">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).life_stage_profile) || [])" :key="item" size="mini" type="warning" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).life_stage_profile) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="价值偏好">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).value_profile) || [])" :key="item" size="mini" type="primary" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).value_profile) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="长期特征">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).stable_traits) || [])" :key="item" size="mini" type="warning" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).stable_traits) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="习惯模式">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).habit_patterns) || [])" :key="item" size="mini" type="info" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).habit_patterns) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="长期回复偏好">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).long_term_reply_preferences) || [])" :key="item" size="mini" type="success" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).long_term_reply_preferences) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="群中角色">{% raw %}{{ ((memberContext.meta || {}).group_role) || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="决策风格">{% raw %}{{ ((memberContext.meta || {}).decision_profile) || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="近期话题">
|
|
<el-tag v-for="item in (memberContext.recent_focus || [])" :key="item" size="mini" type="success" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!(memberContext.recent_focus || []).length">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="近期状态">
|
|
<el-tag v-for="item in (((memberContext.meta || {}).recent_state) || [])" :key="item" size="mini" type="primary" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!((((memberContext.meta || {}).recent_state) || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="显著特征">
|
|
<el-tag v-for="item in ((memberContext.meta || {}).engagement_traits || [])" :key="item" size="mini" type="warning" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!(((memberContext.meta || {}).engagement_traits || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="回复避坑">
|
|
<el-tag v-for="item in ((memberContext.meta || {}).reply_taboos || [])" :key="item" size="mini" type="danger" class="context-tag">{% raw %}{{ item }}{% endraw %}</el-tag>
|
|
<span v-if="!(((memberContext.meta || {}).reply_taboos || []).length)">-</span>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="摘要说明">{% raw %}{{ memberContext.summary_text || '-' }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="样本消息">{% raw %}{{ memberContext.source_message_count || 0 }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="历史样本">{% raw %}{{ ((memberContext.meta || {}).history_message_count) || 0 }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="摘要层级">
|
|
日 {% raw %}{{ ((memberContext.meta || {}).digest_daily_count) || 0 }}{% endraw %}
|
|
/ 周 {% raw %}{{ ((memberContext.meta || {}).digest_weekly_count) || 0 }}{% endraw %}
|
|
/ 月 {% raw %}{{ ((memberContext.meta || {}).digest_monthly_count) || 0 }}{% endraw %}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="累计刷新">{% raw %}{{ ((memberContext.meta || {}).profile_iterations) || 0 }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="最后更新">{% raw %}{{ memberContext.last_profiled_at || '-' }}{% endraw %}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="公众号详情" :visible.sync="officialDetailDialogVisible" width="50%">
|
|
<div class="detail-avatar-wrap">
|
|
<el-avatar size="large" :src="getHeadImage(currentOfficial.wxid)" @error="() => true" class="detail-avatar">
|
|
<img src="/static/logo.png"/>
|
|
</el-avatar>
|
|
</div>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="公众号ID">{% raw %}{{ currentOfficial.wxid }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="公众号名称">{% raw %}{{ currentOfficial.name }}{% endraw %}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="公共好友详情" :visible.sync="publicDetailDialogVisible" width="50%">
|
|
<div class="detail-avatar-wrap">
|
|
<el-avatar size="large" :src="currentPublic.small_head_img_url" @error="() => true" class="detail-avatar">
|
|
<img src="/static/logo.png"/>
|
|
</el-avatar>
|
|
</div>
|
|
<el-descriptions :column="1" border>
|
|
<el-descriptions-item label="ID">{% raw %}{{ currentPublic.wxid }}{% endraw %}</el-descriptions-item>
|
|
<el-descriptions-item label="名称">{% raw %}{{ currentPublic.name }}{% endraw %}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="聊天" :visible.sync="chatDialogVisible" width="60%" :close-on-click-modal="true">
|
|
<div class="chat-container">
|
|
<div class="message-list" ref="messageList">
|
|
{% raw %}
|
|
<div v-for="(msg, index) in chatMessages" :key="index" class="message-item" :class="{'message-self': msg.isSelf}">
|
|
<div class="message-content">
|
|
<div v-if="msg.type === 'text'" v-text="msg.content"></div>
|
|
<div v-else-if="msg.type === 'image'"><img :src="msg.content" style="max-width: 200px; max-height: 200px;"></div>
|
|
<div v-else-if="msg.type === 'emoji'"><img :src="msg.content" class="chat-emoji-preview"></div>
|
|
<div v-else-if="msg.type === 'voice'"><audio controls :src="msg.content"></audio></div>
|
|
<div v-else-if="msg.type === 'video'"><video controls :src="msg.content" style="max-width: 200px;"></video></div>
|
|
<div v-else-if="msg.type === 'link'"><a :href="msg.content.url" target="_blank" v-text="msg.content.title"></a><p v-text="msg.content.description"></p></div>
|
|
</div>
|
|
<div class="message-time" v-text="msg.time"></div>
|
|
</div>
|
|
{% endraw %}
|
|
</div>
|
|
<div class="input-area">
|
|
<div v-if="emojiPanelVisible" class="emoji-panel" v-loading="emojiAssetsLoading">
|
|
<div class="emoji-panel-header">
|
|
<span>后台表情资产</span>
|
|
<el-button size="mini" type="text" @click="loadEmojiAssets">刷新</el-button>
|
|
</div>
|
|
<el-empty v-if="!emojiAssetsLoading && !emojiAssets.length" description="暂无可用表情资产"></el-empty>
|
|
<div v-else class="emoji-grid">
|
|
{% raw %}
|
|
<div v-for="asset in emojiAssets" :key="asset.md5" class="emoji-card" @click="sendEmojiMessage(asset)">
|
|
<img :src="asset.file_path" class="emoji-thumb">
|
|
<div class="emoji-meta">
|
|
<div class="emoji-meta-line">{{ asset.source_name || asset.source_wxid || '未知来源' }}</div>
|
|
<div class="emoji-meta-line">{{ asset.source_chatroom_name || asset.source_chatroom_id || '全局资产' }}</div>
|
|
</div>
|
|
</div>
|
|
{% endraw %}
|
|
</div>
|
|
</div>
|
|
<el-input type="textarea" :rows="3" placeholder="请输入消息..." v-model="messageInput" @keyup.enter.native="sendTextMessage"></el-input>
|
|
<div class="toolbar">
|
|
<el-upload class="upload-demo" action="#" :http-request="uploadImage" :show-file-list="false"><el-button size="small" type="primary">图片</el-button></el-upload>
|
|
<el-upload class="upload-demo" action="#" :http-request="uploadVoice" :show-file-list="false"><el-button size="small" type="primary">语音</el-button></el-upload>
|
|
<el-upload class="upload-demo" action="#" :http-request="uploadVideo" :show-file-list="false"><el-button size="small" type="primary">视频</el-button></el-upload>
|
|
<el-button size="small" type="primary" @click="showLinkDialog">链接</el-button>
|
|
<el-button size="small" :type="emojiPanelVisible ? 'warning' : 'primary'" @click="toggleEmojiPanel">表情</el-button>
|
|
<el-button size="small" type="success" @click="sendTextMessage">发送</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="发送链接" :visible.sync="linkDialogVisible" width="34%">
|
|
<el-form :model="linkForm" label-width="80px">
|
|
<el-form-item label="链接"><el-input v-model="linkForm.url" placeholder="请输入链接"></el-input></el-form-item>
|
|
<el-form-item label="标题"><el-input v-model="linkForm.title" placeholder="请输入标题"></el-input></el-form-item>
|
|
<el-form-item label="描述"><el-input type="textarea" v-model="linkForm.description" placeholder="请输入描述"></el-input></el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="linkDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="sendLinkMessage">发送</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
mixins: [baseApp],
|
|
data() {
|
|
return {
|
|
activeTab: 'groups',
|
|
searchQuery: '',
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
groupsList: [],
|
|
personalList: [],
|
|
officialList: [],
|
|
publicList: [],
|
|
headImages: {},
|
|
statistics: { total: 0, groups: 0, personal: 0, official: 0, public: 0 },
|
|
groupDetailDialogVisible: false,
|
|
userDetailDialogVisible: false,
|
|
officialDetailDialogVisible: false,
|
|
publicDetailDialogVisible: false,
|
|
currentGroup: {}, currentUser: {}, currentOfficial: {}, currentPublic: {},
|
|
groupMembersList: [], groupMembersCurrentPage: 1, groupMembersPageSize: 10, groupMemberSearchQuery: '', groupMembersLoading: false,
|
|
memberContextDialogVisible: false, memberContextLoading: false, memberContext: null, currentContextMember: {},
|
|
memberContextEnabled: false,
|
|
chatDialogVisible: false, currentChatUser: null, messageInput: '', chatMessages: [],
|
|
emojiPanelVisible: false, emojiAssetsLoading: false, emojiAssets: [],
|
|
linkDialogVisible: false,
|
|
linkForm: { url: '', title: '', description: '' }
|
|
};
|
|
},
|
|
computed: {
|
|
filteredGroups() {
|
|
const query = this.searchQuery.toLowerCase();
|
|
const list = !query ? this.groupsList : this.groupsList.filter(group => group.wxid.toLowerCase().includes(query) || group.name.toLowerCase().includes(query));
|
|
return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
|
|
},
|
|
filteredPersonal() {
|
|
const query = this.searchQuery.toLowerCase();
|
|
const list = !query ? this.personalList : this.personalList.filter(user => user.wxid.toLowerCase().includes(query) || user.name.toLowerCase().includes(query));
|
|
return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
|
|
},
|
|
filteredOfficial() {
|
|
const query = this.searchQuery.toLowerCase();
|
|
const list = !query ? this.officialList : this.officialList.filter(official => official.wxid.toLowerCase().includes(query) || official.name.toLowerCase().includes(query));
|
|
return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
|
|
},
|
|
filteredPublic() {
|
|
const query = this.searchQuery.toLowerCase();
|
|
const list = !query ? this.publicList : this.publicList.filter(item => item.wxid.toLowerCase().includes(query) || item.name.toLowerCase().includes(query));
|
|
return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
|
|
},
|
|
filteredGroupMembers() {
|
|
const query = this.groupMemberSearchQuery.toLowerCase();
|
|
const list = !query ? this.groupMembersList : this.groupMembersList.filter(member => member.wxid.toLowerCase().includes(query) || (member.name && member.name.toLowerCase().includes(query)));
|
|
return list.slice((this.groupMembersCurrentPage - 1) * this.groupMembersPageSize, this.groupMembersCurrentPage * this.groupMembersPageSize);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.currentView = '10';
|
|
this.loadContactsData();
|
|
},
|
|
methods: {
|
|
loadContactsData() {
|
|
axios.get('/contacts/api/statistics').then(response => { if (response.data.success) this.statistics = response.data.data; }).catch(error => { console.error('加载联系人统计数据失败:', error); this.$message.error('加载联系人统计数据失败'); });
|
|
axios.get('/contacts/api/groups').then(response => { if (response.data.success) { const groups = response.data.data.groups; this.groupsList = Object.entries(groups).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载群组数据失败:', error); this.$message.error('加载群组数据失败'); });
|
|
axios.get('/contacts/api/personal').then(response => { if (response.data.success) { const personal = response.data.data.personal; this.personalList = Object.entries(personal).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载个人联系人数据失败:', error); this.$message.error('加载个人联系人数据失败'); });
|
|
axios.get('/contacts/api/official').then(response => { if (response.data.success) { const official = response.data.data.official; this.officialList = Object.entries(official).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载公众号数据失败:', error); this.$message.error('加载公众号数据失败'); });
|
|
axios.get('/contacts/api/public').then(response => { if (response.data.success) { const publicFriends = response.data.data.public; this.publicList = Object.entries(publicFriends).map(([wxid, name]) => ({ wxid, name })); } }).catch(error => { console.error('加载公共好友数据失败:', error); this.$message.error('加载公共好友数据失败'); });
|
|
axios.get('/contacts/api/head_images').then(response => { if (response.data.success) this.headImages = response.data.data.head_images; }).catch(error => { console.error('加载联系人头像数据失败:', error); this.$message.error('加载联系人头像数据失败'); });
|
|
},
|
|
updateContacts() {
|
|
this.$message.info('正在更新通讯录...');
|
|
axios.post('/contacts/api/update').then(res => { if (res.data.success) { this.$message.success('通讯录更新成功！'); this.refreshContacts(); } else { this.$message.error(res.data.message || '通讯录更新失败'); } }).catch(() => { this.$message.error('通讯录更新请求失败'); });
|
|
},
|
|
refreshContacts() { this.loadContactsData(); this.$message.success('联系人数据已刷新'); },
|
|
handleTabClick() { this.currentPage = 1; },
|
|
getHeadImage(wxid) { return this.headImages[wxid] || ''; },
|
|
handleSizeChange(size) { this.pageSize = size; },
|
|
handleCurrentChange(page) { this.currentPage = page; },
|
|
viewGroupDetails(group) { this.currentGroup = group; this.groupDetailDialogVisible = true; this.loadGroupMembers(group.wxid); },
|
|
viewUserDetails(user) { this.currentUser = user; this.userDetailDialogVisible = true; },
|
|
viewOfficialDetails(official) { this.currentOfficial = official; this.officialDetailDialogVisible = true; },
|
|
viewPublicDetails(publicFriend) { this.currentPublic = publicFriend; this.publicDetailDialogVisible = true; },
|
|
loadGroupMembers(roomid) {
|
|
this.groupMembersLoading = true; this.groupMembersList = []; this.groupMembersCurrentPage = 1;
|
|
axios.get(`/contacts/api/group_members/${roomid}`).then(response => {
|
|
if (response.data.success) {
|
|
const members = response.data.data.members;
|
|
this.memberContextEnabled = !!response.data.data.member_context_enabled;
|
|
this.groupMembersList = members.map(item => ({ wxid: item.wxid, name: item.nick_name, display_name: item.display_name, status: item.status, latest_active_time: item.latest_active_time, small_head_img_url: item.small_head_img_url, activity_level: item.activity_level, response_style_hint: item.response_style_hint, summary_text: item.summary_text, last_profiled_at: item.last_profiled_at }));
|
|
} else { this.$message.error('获取群成员失败'); }
|
|
}).catch(error => { console.error('加载群成员数据失败:', error); this.$message.error('加载群成员数据失败'); }).finally(() => { this.groupMembersLoading = false; });
|
|
},
|
|
handleGroupMembersSizeChange(size) { this.groupMembersPageSize = size; },
|
|
handleGroupMembersCurrentChange(page) { this.groupMembersCurrentPage = page; },
|
|
refreshCurrentGroupContexts() {
|
|
if (!this.currentGroup.wxid) return;
|
|
if (!this.memberContextEnabled) {
|
|
this.$message.warning('该群未启用成员交互摘要功能');
|
|
return;
|
|
}
|
|
this.groupMembersLoading = true;
|
|
axios.post('/contacts/api/group_member_context/refresh', { roomid: this.currentGroup.wxid })
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.$message.success(response.data.message || '本群成员交互摘要刷新任务已提交');
|
|
setTimeout(() => this.loadGroupMembers(this.currentGroup.wxid), 2500);
|
|
} else {
|
|
this.$message.error('刷新本群成员交互摘要失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('刷新本群成员交互摘要失败:', error);
|
|
this.$message.error('刷新本群成员交互摘要失败');
|
|
})
|
|
.finally(() => { this.groupMembersLoading = false; });
|
|
},
|
|
openMemberContextDialog(member) {
|
|
if (!this.memberContextEnabled) {
|
|
this.$message.warning('该群未启用成员交互摘要功能');
|
|
return;
|
|
}
|
|
this.currentContextMember = member;
|
|
this.memberContextDialogVisible = true;
|
|
this.loadMemberContext();
|
|
},
|
|
loadMemberContext() {
|
|
if (!this.currentGroup.wxid || !this.currentContextMember.wxid) return;
|
|
this.memberContextLoading = true;
|
|
this.memberContext = null;
|
|
axios.get(`/contacts/api/group_member_context/${this.currentGroup.wxid}/${this.currentContextMember.wxid}`)
|
|
.then(response => {
|
|
if (response.data.success) {
|
|
this.memberContext = response.data.data.context;
|
|
} else {
|
|
this.$message.error('加载成员交互摘要失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载成员交互摘要失败:', error);
|
|
this.$message.error('加载成员交互摘要失败');
|
|
})
|
|
.finally(() => { this.memberContextLoading = false; });
|
|
},
|
|
refreshMemberContext() {
|
|
if (!this.currentGroup.wxid || !this.currentContextMember.wxid) return;
|
|
this.memberContextLoading = true;
|
|
axios.post('/contacts/api/group_member_context/refresh', {
|
|
roomid: this.currentGroup.wxid,
|
|
wxid: this.currentContextMember.wxid
|
|
}).then(response => {
|
|
if (response.data.success) {
|
|
this.$message.success(response.data.message || '成员交互摘要刷新任务已提交');
|
|
setTimeout(() => this.loadMemberContext(), 2500);
|
|
} else {
|
|
this.$message.error('刷新成员交互摘要失败');
|
|
}
|
|
}).catch(error => {
|
|
console.error('刷新成员交互摘要失败:', error);
|
|
this.$message.error('刷新成员交互摘要失败');
|
|
}).finally(() => { this.memberContextLoading = false; });
|
|
},
|
|
openChatDialog(user) {
|
|
this.currentChatUser = user;
|
|
this.chatDialogVisible = true;
|
|
this.chatMessages = [];
|
|
this.emojiPanelVisible = false;
|
|
this.loadEmojiAssets();
|
|
},
|
|
async sendTextMessage() {
|
|
if (!this.messageInput.trim()) return;
|
|
try {
|
|
const response = await axios.post('/contacts/api/send_message', { wxid: this.currentChatUser.wxid, type: 'text', content: this.messageInput });
|
|
if (response.data.success) { this.chatMessages.push({ type: 'text', content: this.messageInput, isSelf: true, time: new Date().toLocaleTimeString() }); this.messageInput = ''; this.$nextTick(() => { this.scrollToBottom(); }); }
|
|
} catch (error) { this.$message.error('发送消息失败'); }
|
|
},
|
|
async uploadImage(options) {
|
|
const formData = new FormData(); formData.append('file', options.file); formData.append('wxid', this.currentChatUser.wxid); formData.append('type', 'image');
|
|
try { const response = await axios.post('/contacts/api/send_message', formData); if (response.data.success) { this.chatMessages.push({ type: 'image', content: response.data.url, isSelf: true, time: new Date().toLocaleTimeString() }); this.$nextTick(() => { this.scrollToBottom(); }); } } catch (error) { this.$message.error('发送图片失败'); }
|
|
},
|
|
async uploadVoice(options) {
|
|
const formData = new FormData(); formData.append('file', options.file); formData.append('wxid', this.currentChatUser.wxid); formData.append('type', 'voice');
|
|
try { const response = await axios.post('/contacts/api/send_message', formData); if (response.data.success) { this.chatMessages.push({ type: 'voice', content: response.data.url, isSelf: true, time: new Date().toLocaleTimeString() }); this.$nextTick(() => { this.scrollToBottom(); }); } } catch (error) { this.$message.error('发送语音失败'); }
|
|
},
|
|
async uploadVideo(options) {
|
|
const formData = new FormData(); formData.append('file', options.file); formData.append('wxid', this.currentChatUser.wxid); formData.append('type', 'video');
|
|
try { const response = await axios.post('/contacts/api/send_message', formData); if (response.data.success) { this.chatMessages.push({ type: 'video', content: response.data.url, isSelf: true, time: new Date().toLocaleTimeString() }); this.$nextTick(() => { this.scrollToBottom(); }); } } catch (error) { this.$message.error('发送视频失败'); }
|
|
},
|
|
toggleEmojiPanel() {
|
|
this.emojiPanelVisible = !this.emojiPanelVisible;
|
|
if (this.emojiPanelVisible && !this.emojiAssets.length) {
|
|
this.loadEmojiAssets();
|
|
}
|
|
},
|
|
async loadEmojiAssets() {
|
|
this.emojiAssetsLoading = true;
|
|
const roomid = this.currentChatUser && this.currentChatUser.wxid && this.currentChatUser.wxid.endsWith('@chatroom')
|
|
? this.currentChatUser.wxid
|
|
: '';
|
|
try {
|
|
const response = await axios.get('/contacts/api/emoji_assets', { params: { limit: 80, roomid } });
|
|
if (response.data.success) {
|
|
this.emojiAssets = response.data.data.assets || [];
|
|
} else {
|
|
this.$message.error('加载表情资产失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('加载表情资产失败:', error);
|
|
this.$message.error('加载表情资产失败');
|
|
} finally {
|
|
this.emojiAssetsLoading = false;
|
|
}
|
|
},
|
|
async sendEmojiMessage(asset) {
|
|
if (!asset || !asset.md5 || !asset.total_length) {
|
|
this.$message.warning('表情资产参数不完整');
|
|
return;
|
|
}
|
|
try {
|
|
const response = await axios.post('/contacts/api/send_message', {
|
|
wxid: this.currentChatUser.wxid,
|
|
type: 'emoji',
|
|
content: {
|
|
md5: asset.md5,
|
|
total_length: asset.total_length
|
|
}
|
|
});
|
|
if (response.data.success) {
|
|
this.chatMessages.push({ type: 'emoji', content: asset.file_path, isSelf: true, time: new Date().toLocaleTimeString() });
|
|
this.$nextTick(() => { this.scrollToBottom(); });
|
|
} else {
|
|
this.$message.error(response.data.message || '发送表情失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('发送表情失败:', error);
|
|
this.$message.error('发送表情失败');
|
|
}
|
|
},
|
|
showLinkDialog() { this.linkForm = { url: '', title: '', description: '' }; this.linkDialogVisible = true; },
|
|
async sendLinkMessage() {
|
|
if (!this.linkForm.url) { this.$message.warning('请输入链接'); return; }
|
|
try {
|
|
const response = await axios.post('/contacts/api/send_message', { wxid: this.currentChatUser.wxid, type: 'link', content: this.linkForm });
|
|
if (response.data.success) { this.chatMessages.push({ type: 'link', content: this.linkForm, isSelf: true, time: new Date().toLocaleTimeString() }); this.linkDialogVisible = false; this.$nextTick(() => { this.scrollToBottom(); }); }
|
|
} catch (error) { this.$message.error('发送链接失败'); }
|
|
},
|
|
scrollToBottom() { const messageList = this.$refs.messageList; if (messageList) messageList.scrollTop = messageList.scrollHeight; }
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.page-shell { display: flex; flex-direction: column; gap: 16px; }
|
|
.page-hero {
|
|
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 24px;
|
|
background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.9));
|
|
border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
|
|
}
|
|
.page-hero-actions { display: flex; align-items: center; gap: 12px; }
|
|
.hero-search { width: 260px; }
|
|
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6366f1; font-weight: 700; margin-bottom: 8px; }
|
|
.page-hero-copy h1 { font-size: 30px; line-height: 1.1; margin-bottom: 10px; color: #0f172a; }
|
|
.page-hero-copy p { color: #64748b; font-size: 14px; }
|
|
.overview-grid .el-col { margin-bottom: 16px; }
|
|
.overview-card { min-height: 112px; }
|
|
.overview-card--primary { background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important; }
|
|
.overview-card--soft { background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important; }
|
|
.overview-label { font-size: 13px; color: #64748b; margin-bottom: 14px; }
|
|
.overview-value { font-size: 30px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
|
|
.overview-note { font-size: 12px; color: #94a3b8; }
|
|
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
|
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
|
|
.workspace-header p { font-size: 13px; color: #64748b; }
|
|
.entity-cell { display: flex; align-items: center; gap: 12px; }
|
|
.entity-avatar {
|
|
width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
|
|
background: rgba(79,70,229,0.10); color: #4f46e5; font-size: 14px; flex-shrink: 0;
|
|
}
|
|
.entity-avatar--group { background: rgba(16,185,129,0.12); color: #10b981; }
|
|
.entity-title { font-size: 14px; font-weight: 600; color: #0f172a; }
|
|
.entity-subtitle { margin-top: 4px; font-size: 12px; color: #94a3b8; }
|
|
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.pagination-container { margin-top: 20px; text-align: right; }
|
|
.group-members-section { margin-top: 20px; }
|
|
.group-members-table .entity-cell { min-width: 0; }
|
|
.group-members-table .entity-copy { min-width: 0; overflow: hidden; }
|
|
.group-members-table .entity-title,
|
|
.group-members-table .entity-subtitle {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.section-title {
|
|
margin: 20px 0 15px 0; border-bottom: 1px solid rgba(148,163,184,0.12); padding-bottom: 10px;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
.section-actions { display: flex; align-items: center; gap: 10px; }
|
|
.section-title h3 { margin: 0; font-size: 18px; color: #0f172a; }
|
|
.group-search { width: 220px; }
|
|
.detail-avatar-wrap { text-align: center; margin-bottom: 20px; }
|
|
.detail-avatar { width: 100px; height: 100px; }
|
|
.member-context-toolbar {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0;
|
|
}
|
|
.member-context-title { display: flex; flex-direction: column; gap: 4px; color: #475569; }
|
|
.context-tag { margin-right: 8px; margin-bottom: 8px; }
|
|
.chat-container { display: flex; flex-direction: column; height: 500px; }
|
|
.message-list {
|
|
flex: 1; overflow-y: auto; padding: 20px; background: rgba(248,250,252,0.82); border: 1px solid rgba(148,163,184,0.12);
|
|
border-radius: 18px;
|
|
}
|
|
.message-item { margin-bottom: 15px; display: flex; flex-direction: column; }
|
|
.message-self { align-items: flex-end; }
|
|
.message-content {
|
|
max-width: 70%; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.92); color: #0f172a;
|
|
border: 1px solid rgba(148,163,184,0.12); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
|
|
}
|
|
.message-self .message-content { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #ffffff; }
|
|
.message-time { font-size: 12px; color: #94a3b8; margin-top: 5px; }
|
|
.input-area { padding: 20px 0 0; }
|
|
.toolbar { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.chat-emoji-preview { width: 96px; height: 96px; object-fit: contain; display: block; }
|
|
.emoji-panel {
|
|
margin-bottom: 12px; padding: 12px; border: 1px solid rgba(148,163,184,0.14);
|
|
border-radius: 16px; background: rgba(248,250,252,0.86);
|
|
}
|
|
.emoji-panel-header {
|
|
display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
|
|
color: #334155; font-size: 13px; font-weight: 600;
|
|
}
|
|
.emoji-grid {
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
|
|
max-height: 240px; overflow-y: auto;
|
|
}
|
|
.emoji-card {
|
|
padding: 10px; border-radius: 14px; background: #ffffff; border: 1px solid rgba(148,163,184,0.12);
|
|
cursor: pointer; transition: all .2s ease;
|
|
}
|
|
.emoji-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
|
|
border-color: rgba(79,70,229,0.24);
|
|
}
|
|
.emoji-thumb { width: 72px; height: 72px; display: block; margin: 0 auto 8px; object-fit: contain; }
|
|
.emoji-meta { font-size: 11px; color: #64748b; line-height: 1.4; }
|
|
.emoji-meta-line {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
{% endblock %}
|