ylrz_his_scrm_companyUI/src/views/live/liveConsole/LiveConsole.vue

<template>
  <div class="console">
    <div class="left-panel">
      <h2>学员列表</h2>
      <div class="search">
        <input type="text" placeholder="搜索用户昵称" v-model="searchKeyword">
        <button @click="searchUsers()">搜索</button>
      </div>
      <el-tabs class="live-console-tab-right" v-model="tabLeft.activeName" @tab-click="handleUserClick" :stretch="true">
        <el-tab-pane :label="alLabel" name="al">
          <el-scrollbar ref="manageLeftRef_al" style="height: 800px; width: 100%;">
            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in alDisplayList" :key="u.userId">
              <el-col :span="20">
                <el-row type="flex" align="middle">
                  <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                  <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4" >
                <el-popover
                  width="100"
                  trigger="click">
                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                  <i class="el-icon-more" slot="reference"></i>
                </el-popover>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane :label="onlineLabel" name="online">
          <el-scrollbar ref="manageLeftRef_online" style="height: 800px; width: 100%;">
            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in onlineDisplayList" :key="u.userId">
              <el-col :span="20">
                <el-row type="flex" align="middle">
                  <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                  <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4" >
                <el-popover
                  width="100"
                  trigger="click">
                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                  <i class="el-icon-more" slot="reference"></i>
                </el-popover>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane :label="offlineLabel" name="offline">
          <el-scrollbar ref="manageLeftRef_offline" style="height: 800px; width: 100%;">
            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in offlineDisplayList" :key="u.userId">
              <el-col :span="20">
                <el-row type="flex" align="middle">
                  <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                  <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4" >
                <el-popover
                  width="100"
                  trigger="click">
                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                  <i class="el-icon-more" slot="reference"></i>
                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                </el-popover>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane :label="silencedUserLabel" name="silenced">
          <el-scrollbar ref="manageLeftRef_silenced" style="height: 800px; width: 100%;">
            <el-row style="margin-top: 10px" type="flex" align="middle" v-for="u in silencedDisplayList" :key="u.userId">
              <el-col :span="20">
                <el-row type="flex" align="middle">
                  <el-col :span="4" style="padding-left: 10px;"><el-avatar :src="u.avatar"></el-avatar></el-col>
                  <el-col :span="19" :offset="1">{{ u.nickName }}</el-col>
                  <el-col :span="19" :offset="1">{{ u.userId }}</el-col>
                </el-row>
              </el-col>
              <el-col :span="4" >
                <el-popover
                  width="100"
                  trigger="click">
                  <a style="cursor: pointer;color: #ff0000;" @click="changeUserState(u)">{{ u.msgStatus === 1 ? '解禁' : '禁言' }}</a>
                  <a style="cursor: pointer;color: #ff0000;margin-left:10px" @click="blockUser(u)">拉黑</a>
                  <i class="el-icon-more" slot="reference"></i>
                </el-popover>
              </el-col>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="middle-panel">
      <h2>消息管理</h2>
      <div class="system-messages">
        <h3>系统消息</h3>
        <textarea placeholder="输入系统消息"></textarea>
        <div class="message-actions">
          <button>置顶消息</button>
          <button>弹窗消息</button>
        </div>
      </div>

      <div class="discussion-messages">
        <h3>讨论区消息</h3>
        <div class="message-settings">
          <label>
            <input type="checkbox" v-model="globalVisible">
            全局用户可见
          </label>
        </div>
        <div class="message-list">
          <div class="message-item" v-for="msg in messages" :key="msg.id">
            <div class="message-avatar">
              <img :src="msg.avatar" alt="用户头像">
            </div>
            <div class="message-content">
              <div class="message-user">{{ msg.user }}</div>
              <div class="message-text">{{ msg.text }}</div>
            </div>
            <div class="message-actions">
              <button @click="toggleVisible(msg)">
                {{ msg.isVisible ? '仅用户自见' : '全局可见' }}
              </button>
              <button @click="deleteMessage(msg)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-panel">
      <h2>运营工具</h2>
      <div class="live-player">
        <h3>直播预览</h3>
        <LivePlayer :stream-url="streamUrl" />
      </div>

      <div class="automation">
        <h3>运营自动化</h3>
        <div class="timeline">
          <h4>时间轴设置</h4>
          <div class="timeline-items">
            <div class="timeline-item" v-for="item in timelineItems" :key="item.time">
              <div class="time">{{ item.time }}</div>
              <div class="action">{{ item.action }}</div>
              <button class="delete" @click="removeTimelineItem(item)">删除</button>
            </div>
          </div>
          <button class="add" @click="addTimelineItem">添加时间节点</button>
        </div>
      </div>

      <div class="watermark">
        <h3>直播氛围自动化</h3>
        <div class="watermark-settings">
          <textarea placeholder="水军弹幕内容模板，每行一条"></textarea>
          <div class="watermark-options">
            <label>
              发送间隔:
              <input type="number" v-model.number="interval" min="1">
              秒
            </label>
            <label>
              <input type="checkbox" v-model="autoWatermark">
              启用水军自动化
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LivePlayer from './LivePlayer.vue';
import {blockUser, changeUserStatus, getLiveUserTotals, dashBoardWatchUserList} from '@/api/live/liveWatchUser'


export default {
  components: {
    LivePlayer
  },
  props: {
    liveId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      searchKeyword: '',
      globalVisible: true,
      interval: 10,
      autoWatermark: false,
      streamUrl: 'rtmp://your-live-stream-url',
      users: [
        { id: 1, name: '用户1', avatar: 'https://via.placeholder.com/40', status: 'online', statusText: '在线', silenced: false, msgStatus: false },
        { id: 2, name: '用户2', avatar: 'https://via.placeholder.com/40', status: 'online', statusText: '在线', silenced: false, msgStatus: true },
        { id: 3, name: '用户3', avatar: 'https://via.placeholder.com/40', status: 'offline', statusText: '离线', silenced: true, msgStatus: false },
        { id: 4, name: '用户4', avatar: 'https://via.placeholder.com/40', status: 'online', statusText: '在线', silenced: false, msgStatus: false },
        { id: 5, name: '用户5', avatar: 'https://via.placeholder.com/40', status: 'offline', statusText: '离线', silenced: false, msgStatus: false }
      ],
      messages: [
        { id: 1, user: '用户1', avatar: 'https://via.placeholder.com/30', text: '这个产品怎么样？', isVisible: true },
        { id: 2, user: '用户2', avatar: 'https://via.placeholder.com/30', text: '看起来不错', isVisible: true },
        { id: 3, user: '用户3', avatar: 'https://via.placeholder.com/30', text: '有优惠吗？', isVisible: true }
      ],
      timelineItems: [
        { time: '09:00', action: '置顶欢迎消息' },
        { time: '09:30', action: '上架主推商品' }
      ],
      userTotal: {
        online: 0,       // 在线总人数
        offline: 0,      // 离线总人数
        silenced: 0,      // 禁言总人数
        al: 0
      },
      tabLeft: {
        activeName: "online",
      },
      loadMsgMaxPage: 2,
      liveWsUrl: process.env.VUE_APP_LIVE_WS_URL + '/app/webSocket',
      alDisplayList: [],
      onlineDisplayList: [],    // 在线用户显示列表
      offlineDisplayList: [],   // 离线用户显示列表
      silencedDisplayList: [],  // 禁言用户显示列表
      // 各Tab的分页参数
      pageParams: {
        al: {
          currentPage: 1,
          pageSize: 20,
          prevPage: 0,
          totalLoaded: 0,
          total: 0,
          hasMore: true,
          hasPrev: false
        },
        online: {
          currentPage: 1,       // 当前页（下一页加载用）
          pageSize: 20,       // 当前页（下一页加载用）
          prevPage: 0,          // 上一页页码（上一页加载用）
          totalLoaded: 0,       // 已加载总条数
          total: 0,             // 总数据量
          hasMore: true,        // 是否有下一页
          hasPrev: false        // 是否有上一页
        },
        offline: {
          currentPage: 1,
          pageSize: 20,
          prevPage: 0,
          totalLoaded: 0,
          total: 0,
          hasMore: true,
          hasPrev: false
        },
        silenced: {
          currentPage: 1,
          pageSize: 20,
          prevPage: 0,
          totalLoaded: 0,
          total: 0,
          hasMore: true,
          hasPrev: false
        }
      },
      scrLoading: {
        al: { next: false, prev: false },
        online: { next: false, prev: false },
        offline: { next: false, prev: false },
        silenced: { next: false, prev: false }
      }
    };
  },
  computed: {
    onlineLabel() {
      return `在线(${this.userTotal.online})`;
    },
    alLabel() {
      return `全部(${this.userTotal.al})`;
    },
    offlineLabel() {
      return `离线(${this.userTotal.offline})`;
    },
    silencedUserLabel() {
      return `禁言(${this.userTotal.silenced})`;
    }
  },
  created() {
    if(!this.liveId) return
    this.getList()
    this.handleUserClick({name:'online'})
  },
  mounted() {
    this.$nextTick(() => {
      this.restoreChatScrollPosition();
    });
    this.initScrollListeners();
  },
  methods: {
    changeUserState(u) {
      // 修改状态
      changeUserStatus({liveId: u.liveId, userId: u.userId}).then(response => {
        let { code } = response;
        if (200 === code) {
          u.msgStatus = u.msgStatus === 0 ? 1 : 0
          // 同步更新消息列表中相同用户的状态
          this.msgList.forEach(msg => {
            if (msg.userId === u.userId) {
              msg.msgStatus = u.msgStatus;
            }
          });

          this.userList.forEach(user => {
            if (user.userId === u.userId) {
              user.msgStatus = u.msgStatus;
            }
          });
          // 4. 关键：重新筛选所有Tab的显示列表，确保状态同步
          this.refreshUserDisplayLists(u);

          let msg = u.msgStatus === 0 ? "已解禁" : "已禁言"
          this.msgSuccess(msg);
          return
        }
        this.msgError("操作失败");
      })
    },
    blockUser(u){
      this.$confirm('是否确认封禁用户账号为:"' + u.nickName + '-' + u.userId + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return blockUser(u.userId);
      }).then(() => {
        let msg = {
          msg: "",
          liveId: this.liveId,
          userId: u.userId,
          userType: 0,
          cmd: 'blockUser',
          avatar: this.$store.state.user.user.avatar,
          nickName: this.$store.state.user.user.nickName
        }
        this.socket.send(JSON.stringify(msg))
        this.msgSuccess("封禁成功");
      }).catch(() => {});
    },
    searchUsers(){
      this.resetUserParams()
      this.loadNextPage()
    },
    handleUserClick(tab){
      const tabName = tab.name;
      const params = this.pageParams[tabName];
      const displayList = this[`${tabName}DisplayList`];
      // 首次切换到该Tab或列表为空时初始化
      if (displayList.length < 20) {
        // 重置分页参数
        params.currentPage = 1;
        params.pageSize = 20;
        params.prevPage = 0;
        params.totalLoaded = 0;
        params.hasMore = true;
        params.hasPrev = false;
        // 加载第一页
        this.loadNextPage(tabName);
      } else {
        // 非首次切换，恢复滚动位置
        this.$nextTick(() => {
          const scrollEl = this.getScrollElement(tabName);
          if (scrollEl) {
            scrollEl.scrollTop = this.tabScrollPositions[tabName] || 0;
          }
        });
      }
    },
    loadNextPage(tabName) {
      const params = this.pageParams[tabName];
      const displayList = this[`${tabName}DisplayList`];

      // 若没有更多数据或正在加载，直接返回
      if (!params.hasMore || this.scrLoading[tabName].next) {
        return;
      }

      this.scrLoading[tabName].next = true;
      const queryParams = {
        liveId: this.liveId,
        pageNum: params.currentPage,
        pageSize: 20,
        online: tabName === 'online' ? 0 : 1,
        msgStatus: tabName === 'silenced' ? 1 : 0,
        all: tabName === 'al' ? 1 : 0,
        userName: this.searchKeyword
      };
      // 调用接口加载对应状态的分页数据（需后端支持按状态筛选）
      dashBoardWatchUserList(queryParams).then(response => {
        this.scrLoading[tabName].next = false;
        if (response.code !== 200) return;

        const { rows, total } = response;
        params.total = total; // 记录总数据量
        // 过滤重复数据（基于userId）
        const newRows = rows.filter(row =>
          !displayList.some(u => u.userId === row.userId)
        );
        displayList.push(...newRows)
        // 添加新数据并限制最大长度（避免内存占用过大）
        if (displayList.length >= 40) { // 最大保留100条
          this[`${tabName}DisplayList`] = displayList.slice(-40);
          // 记录滚动位置（用于加载后校准）
          const scrollEl = this.getScrollElement(tabName);
          // 校准滚动位置（保持视觉连续性）
          this.$nextTick(() => {
            if (scrollEl) {
              scrollEl.scrollTop = scrollEl.scrollHeight * 0.5;
            }
          });
        }
        // 更新分页状态
        params.hasMore = params.currentPage * params.pageSize < total;
        params.currentPage += 1;
        params.hasPrev = params.currentPage > 2; // 当前页>2时一定有上一页
        params.prevPage = params.currentPage - 2;
      }).catch(() => {
        this.scrLoading[tabName].next = false;
      });
    },
    // 新增：加载上一页（向上滚动时）
    loadPrevPage(tabName) {
      const params = this.pageParams[tabName];
      const displayList = this[`${tabName}DisplayList`];
      // 边界校验：无上一页/正在加载/当前页<=1
      console.log(`加载 ${tabName} 上一页`);
      console.log(!params.hasPrev || this.scrLoading[tabName].prev || params.currentPage <= 1)
      if (!params.hasPrev || this.scrLoading[tabName].prev || params.currentPage <= 1) {
        return;
      }
      this.scrLoading[tabName].prev = true;
      const targetPage = params.prevPage > 0 ? params.prevPage : params.currentPage - 2;
      const queryParams = {
        liveId: this.liveId,
        pageNum: targetPage,
        pageSize: 20,
        online: tabName === 'online' ? 0 : 1,
        msgStatus: tabName === 'silenced' ? 1 : 0,
        all: tabName === 'al' ? 1 : 0,
        userName: this.searchKeyword
      };
      dashBoardWatchUserList(queryParams).then(response => {
        this.scrLoading[tabName].prev = false;
        if (response.code !== 200) return;

        const { rows } = response;
        if (rows.length === 0) {
          params.hasPrev = false;
          return;
        }

        // 记录滚动位置（用于加载后校准）
        const scrollEl = this.getScrollElement(tabName);
        const scrollTop = scrollEl?.scrollTop || 0;
        const itemHeight = 80; // 预估行高（根据实际样式调整）
        const newItemsHeight = rows.length * itemHeight;

        // 过滤重复数据并添加到列表头部
        const newRows = rows.filter(row => !displayList.some(u => u.userId === row.userId));
        this[`${tabName}DisplayList`] = [...newRows, ...displayList];
        params.totalLoaded += newRows.length;

        // 限制最大长度
        if (this[`${tabName}DisplayList`].length > 40) {
          this[`${tabName}DisplayList`] = this[`${tabName}DisplayList`].slice(0, 40);
        }

        // 更新分页状态
        params.prevPage = targetPage - 1;
        params.hasPrev = targetPage > 1; // 上一页页码>1时还有更多上一页
        params.currentPage = params.currentPage - 1;
        if(params.currentPage * 20 < params.total) params.hasMore = true;
        // 校准滚动位置（保持视觉连续性）
        this.$nextTick(() => {
          if (scrollEl) {
            scrollEl.scrollTop = scrollEl.scrollHeight * 0.5;
          }
        });
      }).catch(() => {
        this.scrLoading[tabName].prev = false;
      });
    },
    getList() {
      this.resetUserParams()
      this.resetMsgParams()
      // this.loadUserList()
      this.loadUserTotals(); // 先加载总人数
      // this.handleClick('online')
      // this.handleClick({name:'online'})
      // this.loadMsgList()
    },
    loadUserTotals() {
      if (!this.liveId) return;
      // 假设后端提供一个接口返回总人数（如果没有，可通过首次加载全量数据后统计）
      getLiveUserTotals({ liveId: this.liveId }).then(res => {
        if (res.code === 200) {
          this.userTotal = res.data; // { online, offline, silenced }
        }
      });
    },
    toggleBlack(user) {
      user.isBlack = !user.isBlack;
    },
    toggleMute(user) {
      user.isMuted = !user.isMuted;
    },
    toggleVisible(msg) {
      msg.isVisible = !msg.isVisible;
    },
    deleteMessage(msg) {
      const index = this.messages.indexOf(msg);
      if (index > -1) {
        this.messages.splice(index, 1);
      }
    },
    addTimelineItem() {
      this.timelineItems.push({ time: '00:00', action: '新动作' });
    },
    removeTimelineItem(item) {
      const index = this.timelineItems.indexOf(item);
      if (index > -1) {
        this.timelineItems.splice(index, 1);
      }
    },
    resetUserParams() {
      // 重置各Tab的显示列表和分页参数
      this.alDisplayList = [];
      this.onlineDisplayList = [];   // 在线用户显示列表
      this.offlineDisplayList = [];   // 离线用户显示列表
      this.silencedDisplayList = [];  // 禁言用户显示列表
      this.pageParams=  {
        al: {
          currentPage: 1,
            pageSize: 20,
            prevPage: 0,
            totalLoaded: 0,
            total: 0,
            hasMore: true,
            hasPrev: false
        },
        online: {
          currentPage: 1,       // 当前页（下一页加载用）
            pageSize: 20,       // 当前页（下一页加载用）
            prevPage: 0,          // 上一页页码（上一页加载用）
            totalLoaded: 0,       // 已加载总条数
            total: 0,             // 总数据量
            hasMore: true,        // 是否有下一页
            hasPrev: false        // 是否有上一页
        },
        offline: {
          currentPage: 1,
            pageSize: 20,
            prevPage: 0,
            totalLoaded: 0,
            total: 0,
            hasMore: true,
            hasPrev: false
        },
        silenced: {
          currentPage: 1,
            pageSize: 20,
            prevPage: 0,
            totalLoaded: 0,
            total: 0,
            hasMore: true,
            hasPrev: false
        }
      },
      this.scrLoading = {
        al: { next: false, prev: false },
        online: { next: false, prev: false },
        offline: { next: false, prev: false },
        silenced: { next: false, prev: false }
      }
    },
    resetMsgParams() {
      // 消息参数保留
      this.msgList = [];
      this.msgParams = {
        pageNum: 1,
        pageSize: 10,
        liveId: this.liveId
      };
    },
    getScrollElement(tabName) {
      const scrollRefs = {
        al: this.$refs.manageLeftRef_al,
        online: this.$refs.manageLeftRef_online,
        offline: this.$refs.manageLeftRef_offline,
        silenced: this.$refs.manageLeftRef_silenced
      };
      return scrollRefs[tabName]?.wrap;
    },
    // 初始化滚动监听（在mounted中调用）
    initScrollListeners() {
      // 为每个Tab的滚动容器添加监听
      this.$nextTick(() => {
        const scrollRefs = {
          al: this.$refs.manageLeftRef_al,
          online: this.$refs.manageLeftRef_online,
          offline: this.$refs.manageLeftRef_offline,
          silenced: this.$refs.manageLeftRef_silenced
        };

        Object.keys(scrollRefs).forEach(tabName => {
          const scrollEl = scrollRefs[tabName]?.wrap;
          if (scrollEl) {
            scrollEl.addEventListener('scroll', () =>
              this.handleTabScroll(tabName, scrollEl)
            );
          }
        });
      });
    },
    // 处理Tab滚动事件（判断是否触底）
    handleTabScroll(tabName, scrollEl) {
      const { scrollTop, scrollHeight, clientHeight } = scrollEl;
      const bottomThreshold = 50; // 距离底部100px触发下一页
      const topThreshold = 50;    // 距离顶部100px触发上一页

      // 加载下一页（滚动到底部附近）
      if (scrollHeight - scrollTop - clientHeight < bottomThreshold) {
        this.loadNextPage(tabName);
      }

      // 加载上一页（滚动到顶部附近）
      if (scrollTop < topThreshold) {
        this.loadPrevPage(tabName);
      }
    },
    // 恢复聊天滚动位置
    restoreChatScrollPosition() {
      if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
        this.$refs.manageRightRef.wrap.scrollTop = this.chatScrollTop;
      }
    },
    // 保存聊天滚动位置
    saveChatScrollPosition() {
      if (this.$refs.manageRightRef && this.$refs.manageRightRef.wrap) {
        this.chatScrollTop = this.$refs.manageRightRef.wrap.scrollHeight - this.$refs.manageRightRef.wrap.clientHeight;
      }
    },
  },
  // 使用 deactivated 和 activated 钩子替代 beforeDestroy 和 destroyed
  deactivated() {
    this.saveChatScrollPosition();
  },
  activated() {
    this.$nextTick(() => {
      this.restoreChatScrollPosition();
    });
    // todo yhq
    // this.$nextTick(() => {
    //   const video = this.$refs.videoPlayer;
    //   if (video != null) {
    //     this.initVideoPlayer(this.liveInfo.startTime)
    //   }
    // })
  },
};
</script>

<style scoped>
.console {
  display: flex;
  height: 100vh;
}

.left-panel, .middle-panel, .right-panel {
  padding: 20px;
  box-sizing: border-box;
}

.left-panel {
  width: 30%;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.middle-panel {
  width: 40%;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.right-panel {
  width: 30%;
  background: #f8fafc;
}

.search {
  margin: 10px 0;
}

.search input {
  width: 70%;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}

.search button {
  padding: 8px 15px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tabs {
  display: flex;
  margin: 10px 0;
}

.tabs button {
  padding: 8px 15px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
}

.tabs button.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.user-list {
  max-height: 600px;
  overflow-y: auto;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.user-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: bold;
}

.user-status {
  font-size: 12px;
  color: #64748b;
}

.online {
  color: #10b981;
}

.offline {
  color: #94a3b8;
}

.user-actions {
  display: flex;
}

.user-actions button {
  padding: 5px 10px;
  margin-left: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.block {
  background: #ef4444;
  color: #fff;
}

.unblock {
  background: #10b981;
  color: #fff;
}

.mute {
  background: #f59e0b;
  color: #fff;
}

.unmute {
  background: #3b82f6;
  color: #fff;
}

.system-messages, .discussion-messages {
  margin: 20px 0;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.system-messages textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
}

.message-actions {
  margin-top: 10px;
}

.message-actions button {
  padding: 5px 10px;
  margin-right: 5px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.message-list {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
}

.message-item {
  display: flex;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.message-avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.message-content {
  flex: 1;
}

.message-user {
  font-weight: bold;
}

.message-text {
  font-size: 14px;
  color: #64748b;
}

.message-actions button {
  padding: 3px 8px;
  font-size: 12px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.live-player, .automation, .watermark {
  margin: 20px 0;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.timeline-items {
  margin: 10px 0;
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

.delete {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
}

.add {
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
}

.watermark-settings textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
}

.watermark-options {
  margin-top: 10px;
}

.watermark-options label {
  display: block;
  margin-bottom: 5px;
}
</style>