ylrz_saas_his_scrm_companyUI/src/views/taskStatistics/callLog/callLogDetail.vue

<template>
  <div class="app-container">
    <!-- 统计概览 -->
    <el-row :gutter="24" class="baseInfo">
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="card-header">
            <span>记录总数</span>
          </div>
          <div class="content" v-loading="loading">
            <span class="card-number total">
              <count-to v-if="!loading" :start-val="0" :end-val="summary.totalCount || 0" :duration="2000" />
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="card-header">
            <span>接通量</span>
          </div>
          <div class="content" v-loading="loading">
            <span class="card-number success">
              <count-to v-if="!loading" :start-val="0" :end-val="summary.connectedCount || 0" :duration="2000" />
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="card-header">
            <span>计费分钟合计</span>
          </div>
          <div class="content" v-loading="loading">
            <span class="card-number billing">
              <count-to v-if="!loading" :start-val="0" :end-val="summary.totalBillingMinute || 0" :duration="2000" />
            </span>
            <span v-if="!loading" class="billing-unit">分钟</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="card-header">
            <span>接通率</span>
          </div>
          <div class="content" v-loading="loading">
            <span class="card-number rate">
              <count-to v-if="!loading" :start-val="0" :end-val="summary.connectRate || 0" :duration="2000" />%
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 筛选区域 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      size="small"
      label-width="100px"
      class="detail-query-form"
    >
      <el-form-item label="任务" prop="roboticId">
        <el-select
          v-model="queryParams.roboticId"
          filterable
          remote
          reserve-keyword
          clearable
          placeholder="请选择任务"
          style="width: 280px"
          :remote-method="searchRoboticTask"
          :loading="roboticLoading"
          @visible-change="handleRoboticDropdownVisible"
          @change="handleTaskChange"
        >
          <el-option
            v-for="item in roboticList"
            :key="item.id"
            :label="formatRoboticLabel(item)"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option label="执行中" :value="1" />
          <el-option label="成功" :value="2" />
          <el-option label="失败" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否接通" prop="isConnected">
        <el-select v-model="queryParams.isConnected" placeholder="请选择" clearable>
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="客户类型" prop="intention">
        <el-select v-model="queryParams.intention" placeholder="请选择" clearable>
          <el-option
            v-for="dict in intentionOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运行时间" prop="runDateRange">
        <el-date-picker
          v-model="runDateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="通话时长(秒)">
        <div class="call-time-range">
          <el-input
            v-model="queryParams.minCallTime"
            placeholder="最小时长"
            clearable
            @keyup.enter.native="handleQuery"
          />
          <span class="range-separator">至</span>
          <el-input
            v-model="queryParams.maxCallTime"
            placeholder="最大时长"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button
          v-hasPermi="['company:callphonelog:exportPhone']"
          type="warning"
          icon="el-icon-download"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <div v-hasPermi="['company:callphoneDetail:list']">
      <el-table
        border
        v-loading="loading"
        :data="list"
        height="520"
      >
        <el-table-column label="ID" align="center" prop="logId" width="80" fixed="left" />
        <el-table-column label="任务名称" align="center" prop="roboticName" min-width="150" show-overflow-tooltip />
        <el-table-column label="运行时间" align="center" prop="runTime" width="160">
          <template slot-scope="scope">
            <span>{{ formatDateTime(scope.row.runTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="warning" size="mini">执行中</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success" size="mini">成功</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="danger" size="mini">失败</el-tag>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="客户号码" align="center" prop="callerNum" width="155">
          <template slot-scope="scope">
            <span>{{ formatCallerNum(scope.row) }}</span>
            <el-button
              v-if="scope.row.callerNum || scope.row.customerId || scope.row.callerId"
              v-hasPermi="['crm:customer:queryPhone']"
              type="text"
              size="mini"
              icon="el-icon-view"
              @click="handleQueryPhone(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="客户类型" align="center" prop="intention" width="90">
          <template slot-scope="scope">
            <template v-for="dict in intentionOptions">
              <el-tag
                v-if="normalizeIntention(scope.row.intention) == dict.dictValue"
                :key="dict.dictValue"
                size="mini"
              >{{ dict.dictLabel }}</el-tag>
            </template>
            <span v-if="!matchIntentionDict(scope.row.intention)">--</span>
          </template>
        </el-table-column>
        <el-table-column label="通话时长(秒)" align="center" prop="callTime" width="105">
          <template slot-scope="scope">
            <span>{{ scope.row.callTime != null ? scope.row.callTime : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计费分钟" align="center" prop="billingMinute" width="95">
          <template slot-scope="scope">
            <span v-if="scope.row.billingMinute != null">{{ scope.row.billingMinute }}分钟</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="销售名称" align="center" prop="companyUserName" width="100" show-overflow-tooltip />
        <el-table-column
          v-if="checkPermi(['crm:customer:showCallInfo'])"
          label="录音"
          align="center"
          prop="recordPath"
          min-width="260"
        >
          <template slot-scope="scope">
            <audio v-if="scope.row.recordPath" controls :src="handleRecordPath(scope.row.recordPath)" />
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.contentList && checkPermi(['crm:customer:showCallInfo'])"
              size="mini"
              type="text"
              @click="handleViewChat(scope.row)"
            >查看对话</el-button>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 对话记录弹窗 -->
    <el-dialog
      title="通话详情"
      :visible.sync="chatDialogVisible"
      width="720px"
      append-to-body
      custom-class="chat-dialog"
      @close="handleChatClose"
    >
      <div v-if="chatList.length > 0" class="chat-summary">
        <div class="chat-summary-item">
          <span class="chat-summary-label">总条数：</span>
          <span class="chat-summary-value">{{ chatList.length }}</span>
        </div>
        <div class="chat-summary-item">
          <span class="chat-summary-label">机器人：</span>
          <span class="chat-summary-value blue">{{ chatStats.agentCount }}</span>
        </div>
        <div class="chat-summary-item">
          <span class="chat-summary-label">用户：</span>
          <span class="chat-summary-value green">{{ chatStats.userCount }}</span>
        </div>
        <div class="chat-summary-item">
          <span class="chat-summary-label">敏感词命中：</span>
          <span class="chat-summary-value red">{{ chatStats.sensitiveCount }}</span>
        </div>
      </div>
      <div v-if="chatList.length > 0" class="chat-container">
        <div
          v-for="(item, index) in chatList"
          :key="index"
          class="chat-item"
          :class="item.role === 'agent' ? 'chat-item-right' : 'chat-item-left'"
        >
          <div class="chat-avatar">
            <div
              class="chat-avatar-circle"
              :class="item.role === 'agent' ? 'avatar-agent' : 'avatar-user'"
            >
              <i :class="item.role === 'agent' ? 'el-icon-headset' : 'el-icon-user-solid'" />
            </div>
          </div>
          <div class="chat-content-wrap">
            <div class="chat-role-line">
              <span class="chat-role">{{ item.role === 'agent' ? '机器人' : '用户' }}</span>
              <span class="chat-index">#{{ index + 1 }}</span>
            </div>
            <div class="chat-bubble" v-html="item.content" />
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无通话内容" />
      <div slot="footer" class="dialog-footer chat-dialog-footer">
        <span class="chat-footer-tip">标红内容为命中的敏感词</span>
        <el-button @click="chatDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/common'
import { checkPermi } from '@/utils/permission'
import {
  listCallphoneDetail,
  getCallphoneDetailSummary,
  exportDetailPhone,
  queryCallphoneLogPhone
} from '@/api/company/callphone'
import { listRoboticSelectOptions, getRobotic } from '@/api/company/companyVoiceRobotic'
import { queryPhone } from '@/api/crm/customer'
import CountTo from 'vue-count-to'

export default {
  name: 'CallLogDetail',
  components: { CountTo },
  data() {
    return {
      loading: false,
      exportLoading: false,
      total: 0,
      list: [],
      roboticList: [],
      roboticLoading: false,
      roboticQueryParams: {
        pageNum: 1,
        pageSize: 20,
        name: null
      },
      runDateRange: [],
      intentionOptions: [],
      chatDialogVisible: false,
      chatList: [],
      taskInfo: {
        roboticId: null,
        roboticName: ''
      },
      summary: {
        totalCount: 0,
        connectedCount: 0,
        connectRate: 0,
        totalBillingMinute: 0
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roboticId: null,
        phone: null,
        status: null,
        isConnected: null,
        intention: null,
        minCallTime: null,
        maxCallTime: null,
        beginRunTime: null,
        endRunTime: null
      }
    }
  },
  computed: {
    chatStats() {
      const stats = { agentCount: 0, userCount: 0, sensitiveCount: 0 }
      this.chatList.forEach(item => {
        if (item.role === 'agent') stats.agentCount++
        else stats.userCount++
        const matches = (item.content || '').match(/<span[^>]*class="sensitive-word"[^>]*>/g)
        if (matches) stats.sensitiveCount += matches.length
      })
      return stats
    }
  },
  created() {
    this.initFromRoute()
    this.loadIntentionDict()
    this.ensureSelectedRoboticInOptions().finally(() => {
      this.getList()
    })
  },
  methods: {
    checkPermi,
    formatRoboticLabel(item) {
      if (!item) return ''
      return item.name ? `${item.name}（${item.id}）` : String(item.id)
    },
    normalizeIntention(intention) {
      if (intention === null || intention === undefined || intention === '') {
        return '0'
      }
      return String(intention)
    },
    matchIntentionDict(intention) {
      if (!Array.isArray(this.intentionOptions) || this.intentionOptions.length === 0) {
        return false
      }
      const value = this.normalizeIntention(intention)
      return this.intentionOptions.some(dict => String(dict.dictValue) === value)
    },
    initFromRoute() {
      const query = this.$route.query || {}
      this.taskInfo.roboticId = query.roboticId ? Number(query.roboticId) : null
      this.taskInfo.roboticName = query.roboticName || ''
      this.queryParams.roboticId = this.taskInfo.roboticId
    },
    ensureSelectedRoboticInOptions() {
      const roboticId = this.queryParams.roboticId
      if (!roboticId) {
        return Promise.resolve()
      }
      if (this.roboticList.some(item => item.id === roboticId)) {
        return Promise.resolve()
      }
      if (this.taskInfo.roboticName) {
        this.roboticList = [{ id: roboticId, name: this.taskInfo.roboticName }]
        return Promise.resolve()
      }
      return getRobotic(roboticId).then(res => {
        const data = res.data
        if (data && data.id) {
          this.roboticList = [{ id: data.id, name: data.name }]
          this.taskInfo.roboticName = data.name
        }
      }).catch(() => {})
    },
    loadRoboticOptions(reset = false) {
      if (reset) {
        this.roboticQueryParams.pageNum = 1
      }
      this.roboticLoading = true
      return listRoboticSelectOptions(this.roboticQueryParams).then(res => {
        const rows = res.rows || []
        if (reset || this.roboticQueryParams.pageNum === 1) {
          const selectedId = this.queryParams.roboticId
          const selected = selectedId
            ? this.roboticList.find(item => item.id === selectedId) || rows.find(item => item.id === selectedId)
            : null
          this.roboticList = selected && !rows.some(item => item.id === selected.id)
            ? [selected, ...rows]
            : rows
        } else {
          const existIds = new Set(this.roboticList.map(item => item.id))
          rows.forEach(item => {
            if (!existIds.has(item.id)) {
              this.roboticList.push(item)
            }
          })
        }
      }).catch(() => {
        if (reset || this.roboticQueryParams.pageNum === 1) {
          this.roboticList = []
        }
      }).finally(() => {
        this.roboticLoading = false
      })
    },
    searchRoboticTask(query) {
      this.roboticQueryParams.name = query || null
      this.loadRoboticOptions(true)
    },
    handleRoboticDropdownVisible(visible) {
      if (visible && this.roboticList.length === 0) {
        this.roboticQueryParams.name = null
        this.loadRoboticOptions(true)
      }
    },
    handleTaskChange(roboticId) {
      const task = this.roboticList.find(item => item.id === roboticId)
      this.taskInfo.roboticId = roboticId || null
      this.taskInfo.roboticName = task ? task.name : ''
      this.handleQuery()
    },
    loadIntentionDict() {
      this.getDicts('customer_intention_level').then(response => {
        if (response.data && response.data.length) {
          this.intentionOptions = response.data
        }
      }).catch(() => {})
    },
    desensitizePhone(phone) {
      if (!phone) return '--'
      if (String(phone).includes('****')) return phone
      if (phone.length < 7) return phone
      return phone.substring(0, 3) + '****' + phone.substring(phone.length - 4)
    },
    formatCallerNum(row) {
      if (row.callerNum) {
        return this.desensitizePhone(row.callerNum)
      }
      if (row.customerId || row.callerId) {
        return '******'
      }
      return '--'
    },
    formatDateTime(time) {
      if (!time) return '--'
      if (typeof time === 'string') return time.replace('T', ' ').substring(0, 16)
      return parseTime(time, '{y}-{m}-{d} {h}:{i}') || '--'
    },
    handleRecordPath(url) {
      if (!url) return ''
      if (url.startsWith('http')) {
        return process.env.VUE_APP_BASE_API + '/common/proxy/recording?url=' + encodeURIComponent(url)
      }
      const fullUrl = 'http://129.28.164.235:8899/recordings/files?filename=' + url
      return process.env.VUE_APP_BASE_API + '/common/proxy/recording?url=' + encodeURIComponent(fullUrl)
    },
    handleQueryPhone(row) {
      const customerId = row.customerId
      if (customerId) {
        queryPhone(customerId).then(response => {
          this.$alert(response.mobile, '手机号', { confirmButtonText: '确定' })
        })
        return
      }
      if (row.logId) {
        queryCallphoneLogPhone(row.logId).then(response => {
          this.$alert(response.mobile, '手机号', { confirmButtonText: '确定' })
        })
        return
      }
      this.$message.warning('无法查看手机号')
    },
    handleExport() {
      this.$confirm('是否确认导出当前筛选条件下的外呼记录（含解密手机号）？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.exportLoading = true
        return exportDetailPhone(this.getExportParams())
      }).then(response => {
        this.download(response.msg)
      }).finally(() => {
        this.exportLoading = false
      }).catch(() => {})
    },
    parseCallTime(val) {
      if (val === null || val === undefined || val === '') return null
      const num = Number(val)
      return isNaN(num) || num < 0 ? null : num
    },
    buildQueryParams() {
      const params = { ...this.queryParams }
      params.minCallTime = this.parseCallTime(params.minCallTime)
      params.maxCallTime = this.parseCallTime(params.maxCallTime)
      if (this.runDateRange && this.runDateRange.length === 2) {
        params.beginRunTime = this.runDateRange[0]
        params.endRunTime = this.runDateRange[1]
      } else {
        params.beginRunTime = null
        params.endRunTime = null
      }
      return params
    },
    getExportParams() {
      const params = this.buildQueryParams()
      delete params.pageNum
      delete params.pageSize
      return params
    },
    getSummary() {
      return getCallphoneDetailSummary(this.buildQueryParams()).then(res => {
        const data = res.data || {}
        this.summary = {
          totalCount: data.totalCount || 0,
          connectedCount: data.connectedCount || 0,
          connectRate: data.connectRate != null ? data.connectRate : 0,
          totalBillingMinute: data.totalBillingMinute || 0
        }
      }).catch(() => {
        this.summary = { totalCount: 0, connectedCount: 0, connectRate: 0, totalBillingMinute: 0 }
      })
    },
    getList() {
      this.loading = true
      const params = this.buildQueryParams()
      listCallphoneDetail(params).then(listRes => {
        this.list = listRes.rows || []
        this.total = listRes.total || 0
        if (this.list.length === 0 && this.total > 0 && this.queryParams.pageNum > 1) {
          this.queryParams.pageNum = 1
          this.getList()
          return
        }
      }).catch(() => {
        this.list = []
        this.total = 0
      }).finally(() => {
        this.loading = false
      })
      this.getSummary()
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.runDateRange = []
      this.resetForm('queryForm')
      this.queryParams.minCallTime = null
      this.queryParams.maxCallTime = null
      this.queryParams.beginRunTime = null
      this.queryParams.endRunTime = null
      const query = this.$route.query || {}
      this.queryParams.roboticId = query.roboticId ? Number(query.roboticId) : null
      this.taskInfo.roboticId = this.queryParams.roboticId
      this.taskInfo.roboticName = query.roboticName || ''
      this.ensureSelectedRoboticInOptions()
      this.handleQuery()
    },
    isSystemChatRole(role) {
      return String(role || '').toLowerCase() === 'system'
    },
    normalizeChatRole(role) {
      const r = String(role || '').toLowerCase()
      if (['agent', 'robot', 'ai', 'bot', 'assistant'].includes(r)) return 'agent'
      return 'user'
    },
    handleViewChat(row) {
      let list = []
      try {
        const raw = row.contentList
        list = typeof raw === 'string' ? JSON.parse(raw) : raw
      } catch (e) {
        list = []
      }
      this.chatList = (Array.isArray(list) ? list : [])
        .filter(item => item && !this.isSystemChatRole(item.role) && String(item.content || '').trim())
        .map(item => ({
          ...item,
          role: this.normalizeChatRole(item.role || item.speaker || item.from)
        }))
      this.chatDialogVisible = true
    },
    handleChatClose() {
      this.chatList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.baseInfo {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 10px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-3px);
}

.card-header {
  font-size: 14px;
  color: #666;
}

.content {
  height: 60px;
  display: flex;
  align-items: center;
}

.card-number {
  font-size: 28px;
  font-weight: bold;

  &.total { color: #409eff; }
  &.success { color: #67c23a; }
  &.rate { color: #e6a23c; }
  &.billing { color: #9b59b6; }
}

.billing-unit {
  margin-left: 4px;
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}

.detail-query-form {
  margin-bottom: 16px;
  padding: 16px 16px 4px;
  background: #fff;
  border-radius: 4px;
}

.call-time-range {
  display: inline-flex;
  align-items: center;
}

.call-time-range .el-input {
  width: 100px;
}

.range-separator {
  margin: 0 6px;
  color: #909399;
}
</style>

<style lang="scss">
.chat-dialog {
  margin-top: 5vh !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;

  .el-dialog__body {
    padding: 0;
    background-color: #f5f7fa;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
  }

  .chat-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #ebeef5;
    position: sticky;
    top: 0;
    z-index: 2;

    .chat-summary-label { color: #909399; font-size: 13px; }
    .chat-summary-value {
      font-weight: 600;
      &.blue { color: #409eff; }
      &.green { color: #67c23a; }
      &.red { color: #f56c6c; }
    }
  }

  .chat-container {
    padding: 16px 20px;
  }

  .chat-item {
    display: flex;
    margin-bottom: 14px;
    align-items: flex-start;
  }

  .chat-item-left {
    .chat-avatar { margin-right: 10px; }
    .chat-bubble {
      background: #fff;
      border: 1px solid #ebeef5;
      border-radius: 2px 8px 8px 8px;
    }
    .chat-role { color: #67c23a; }
  }

  .chat-item-right {
    flex-direction: row-reverse;
    .chat-avatar { margin-left: 10px; }
    .chat-content-wrap { align-items: flex-end; }
    .chat-role-line { flex-direction: row-reverse; }
    .chat-bubble {
      background: #ecf5ff;
      border: 1px solid #d9ecff;
      border-radius: 8px 2px 8px 8px;
    }
    .chat-role { color: #409eff; }
  }

  .chat-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;

    &.avatar-agent { background: #409eff; }
    &.avatar-user { background: #67c23a; }
  }

  .chat-content-wrap {
    display: flex;
    flex-direction: column;
    max-width: 70%;
  }

  .chat-role-line {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
  }

  .chat-index { color: #c0c4cc; }

  .chat-bubble {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;

    .sensitive-word {
      color: #f56c6c !important;
      font-weight: 600;
      background: rgba(245, 108, 108, 0.12);
      padding: 0 3px;
      border-radius: 2px;
    }
  }

  .chat-dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .chat-footer-tip {
      font-size: 12px;
      color: #909399;
    }
  }
}
</style>