@flexem/chat-box 1.0.0

package/miniprogram_dist/components/sidebar/index.js

@@ -0,0 +1,506 @@
+/**
+ * 侧边栏组件
+ * 对话列表管理、编辑模式、用户信息显示
+ */
+
+const api = require('../../utils/api.js');
+
+Component({
+  properties: {
+    // 是否显示侧边栏
+    visible: {
+      type: Boolean,
+      value: false
+    },
+    // API 基础地址
+    baseUrl: {
+      type: String,
+      value: ''
+    },
+    // 用户 Token
+    token: {
+      type: String,
+      value: ''
+    },
+    // 当前会话 ID
+    currentSessionId: {
+      type: String,
+      value: ''
+    },
+    // 用户名
+    username: {
+      type: String,
+      value: ''
+    },
+    // 用户头像
+    userAvatar: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    sessions: [],           // 所有会话列表
+    todaySessions: [],      // 今天的会话
+    thisWeekSessions: [],   // 本周的会话
+    earlierSessions: [],    // 更早的会话
+    isEditMode: false,      // 是否编辑模式
+    isLoading: false,       // 是否加载中
+    hasMore: true,          // 是否有更多数据
+    currentPage: 1,         // 当前页码
+    pageSize: 20,           // 每页数量
+    searchKeyword: ''       // 搜索关键词
+  },
+
+  observers: {
+    'visible': function(visible) {
+      if (visible && this.data.sessions.length === 0) {
+        this.loadSessions();
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 加载会话列表
+     */
+    async loadSessions(isRefresh = true) {
+      if (this.data.isLoading) return;
+      if (!this.properties.baseUrl || !this.properties.token) {
+        console.error('缺少 baseUrl 或 token');
+        return;
+      }
+
+      this.setData({ isLoading: true });
+
+      try {
+        const page = isRefresh ? 1 : this.data.currentPage;
+        const result = await api.getChatSessions(
+          this.properties.baseUrl,
+          this.properties.token,
+          page,
+          this.data.pageSize
+        );
+
+        // 支持多种 API 返回格式: items, data.items, records, data, 直接数组
+        const resultData = result.items || result.data?.items || result.records || result.data || result || [];
+        const sessions = this.processSessionData(Array.isArray(resultData) ? resultData : []);
+        const grouped = this.groupSessionsByDate(sessions);
+
+        if (isRefresh) {
+          this.setData({
+            sessions: sessions,
+            todaySessions: grouped.today,
+            thisWeekSessions: grouped.thisWeek,
+            earlierSessions: grouped.earlier,
+            currentPage: 2,
+            hasMore: sessions.length >= this.data.pageSize
+          });
+        } else {
+          const allSessions = [...this.data.sessions, ...sessions];
+          const allGrouped = this.groupSessionsByDate(allSessions);
+          this.setData({
+            sessions: allSessions,
+            todaySessions: allGrouped.today,
+            thisWeekSessions: allGrouped.thisWeek,
+            earlierSessions: allGrouped.earlier,
+            currentPage: this.data.currentPage + 1,
+            hasMore: sessions.length >= this.data.pageSize
+          });
+        }
+      } catch (error) {
+        console.error('加载会话列表失败', error);
+        if (error.code === 401) {
+          this.triggerEvent('login');
+        } else {
+          wx.showToast({
+            title: error.message || '加载失败',
+            icon: 'none'
+          });
+        }
+      } finally {
+        this.setData({ isLoading: false });
+      }
+    },
+
+    /**
+     * 处理会话数据
+     */
+    processSessionData(sessions) {
+      return sessions.map(session => {
+        // 支持多种时间字段格式
+        const createTime = new Date(session.created_at || session.create_time || session.createTime);
+        return {
+          id: session.id,
+          title: session.title || '新对话',
+          createTime: createTime,
+          timeText: this.formatTimeText(createTime),
+          configs: session.configs || {}
+        };
+      });
+    },
+
+    /**
+     * 按日期分组会话
+     */
+    groupSessionsByDate(sessions) {
+      const now = new Date();
+      const today = new Date(now);
+      today.setHours(0, 0, 0, 0);
+
+      // 获取本周一的日期
+      const weekStart = new Date(today);
+      const dayOfWeek = weekStart.getDay();
+      const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 周日为0，需要特殊处理
+      weekStart.setDate(weekStart.getDate() - diff);
+
+      const grouped = {
+        today: [],
+        thisWeek: [],
+        earlier: []
+      };
+
+      sessions.forEach(session => {
+        const sessionDate = new Date(session.createTime);
+        sessionDate.setHours(0, 0, 0, 0);
+
+        if (sessionDate.getTime() === today.getTime()) {
+          grouped.today.push(session);
+        } else if (sessionDate.getTime() >= weekStart.getTime()) {
+          grouped.thisWeek.push(session);
+        } else {
+          grouped.earlier.push(session);
+        }
+      });
+
+      return grouped;
+    },
+
+    /**
+     * 格式化时间文本
+     */
+    formatTimeText(date) {
+      const now = new Date();
+      const diff = now.getTime() - date.getTime();
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+
+      // 今天
+      if (diff < 24 * 60 * 60 * 1000 && now.getDate() === date.getDate()) {
+        return `${hours}:${minutes}`;
+      }
+
+      // 本周（非今天）- 显示星期几
+      const today = new Date(now);
+      today.setHours(0, 0, 0, 0);
+      const weekStart = new Date(today);
+      const dayOfWeek = weekStart.getDay();
+      const weekDiff = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+      weekStart.setDate(weekStart.getDate() - weekDiff);
+
+      const sessionDate = new Date(date);
+      sessionDate.setHours(0, 0, 0, 0);
+
+      if (sessionDate.getTime() >= weekStart.getTime()) {
+        const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+        return `${weekdays[date.getDay()]} ${hours}:${minutes}`;
+      }
+
+      // 更早 - 显示年月日
+      const year = date.getFullYear();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+
+    /**
+     * 加载更多
+     */
+    loadMore() {
+      if (!this.data.hasMore || this.data.isLoading) return;
+      this.loadSessions(false);
+    },
+
+    /**
+     * 滚动到底部自动加载更多
+     */
+    onScrollToLower() {
+      this.loadMore();
+    },
+
+    /**
+     * 切换编辑模式
+     */
+    toggleEditMode() {
+      this.setData({
+        isEditMode: !this.data.isEditMode
+      });
+    },
+
+    /**
+     * 选择会话
+     */
+    onSelectSession(e) {
+      if (this.data.isEditMode) return;
+      const session = e.currentTarget.dataset.session;
+      this.triggerEvent('select', { session });
+      this.onClose();
+    },
+
+    /**
+     * 新建对话
+     */
+    async onNewChat() {
+      if (!this.properties.baseUrl || !this.properties.token) {
+        this.triggerEvent('login');
+        return;
+      }
+
+      wx.showLoading({ title: '创建中...' });
+
+      try {
+        const result = await api.createChatSession(
+          this.properties.baseUrl,
+          this.properties.token,
+          '新对话'
+        );
+
+        const newSession = {
+          id: result.id,
+          title: result.title || '新对话',
+          createTime: new Date(),
+          timeText: this.formatTimeText(new Date()),
+          configs: result.configs || {}
+        };
+
+        // 添加到列表顶部
+        const todaySessions = [newSession, ...this.data.todaySessions];
+        const sessions = [newSession, ...this.data.sessions];
+
+        this.setData({
+          sessions,
+          todaySessions
+        });
+
+        this.triggerEvent('select', { session: newSession });
+        this.onClose();
+      } catch (error) {
+        console.error('创建对话失败', error);
+        if (error.code === 401) {
+          this.triggerEvent('login');
+        } else {
+          wx.showToast({
+            title: error.message || '创建失败',
+            icon: 'none'
+          });
+        }
+      } finally {
+        wx.hideLoading();
+      }
+    },
+
+    /**
+     * 重命名对话
+     */
+    onRename(e) {
+      const session = e.currentTarget.dataset.session;
+
+      wx.showModal({
+        title: '重命名',
+        editable: true,
+        placeholderText: '请输入新标题',
+        content: session.title,
+        success: async (res) => {
+          if (res.confirm && res.content && res.content.trim()) {
+            try {
+              await api.renameChatSession(
+                this.properties.baseUrl,
+                this.properties.token,
+                session.id,
+                res.content.trim()
+              );
+
+              // 更新本地数据
+              this.updateSessionTitle(session.id, res.content.trim());
+
+              wx.showToast({
+                title: '重命名成功',
+                icon: 'success'
+              });
+            } catch (error) {
+              console.error('重命名失败', error);
+              wx.showToast({
+                title: error.message || '重命名失败',
+                icon: 'none'
+              });
+            }
+          }
+        }
+      });
+    },
+
+    /**
+     * 更新会话标题
+     */
+    updateSessionTitle(sessionId, newTitle) {
+      const updateList = (list) => {
+        return list.map(item => {
+          if (item.id === sessionId) {
+            return { ...item, title: newTitle };
+          }
+          return item;
+        });
+      };
+
+      this.setData({
+        sessions: updateList(this.data.sessions),
+        todaySessions: updateList(this.data.todaySessions),
+        thisWeekSessions: updateList(this.data.thisWeekSessions),
+        earlierSessions: updateList(this.data.earlierSessions)
+      });
+    },
+
+    /**
+     * 删除对话
+     */
+    onDelete(e) {
+      const session = e.currentTarget.dataset.session;
+
+      wx.showModal({
+        title: '确认删除',
+        content: `确定要删除「${session.title}」吗？`,
+        confirmColor: '#f44336',
+        success: async (res) => {
+          if (res.confirm) {
+            try {
+              await api.deleteChatSession(
+                this.properties.baseUrl,
+                this.properties.token,
+                session.id
+              );
+
+              // 从本地列表中移除
+              this.removeSession(session.id);
+
+              wx.showToast({
+                title: '删除成功',
+                icon: 'success'
+              });
+
+              // 如果删除的是当前会话，通知父组件
+              if (session.id === this.properties.currentSessionId) {
+                this.triggerEvent('delete', { sessionId: session.id });
+              }
+            } catch (error) {
+              console.error('删除失败', error);
+              wx.showToast({
+                title: error.message || '删除失败',
+                icon: 'none'
+              });
+            }
+          }
+        }
+      });
+    },
+
+    /**
+     * 从列表中移除会话
+     */
+    removeSession(sessionId) {
+      const filterList = (list) => list.filter(item => item.id !== sessionId);
+
+      this.setData({
+        sessions: filterList(this.data.sessions),
+        todaySessions: filterList(this.data.todaySessions),
+        thisWeekSessions: filterList(this.data.thisWeekSessions),
+        earlierSessions: filterList(this.data.earlierSessions)
+      });
+    },
+
+    /**
+     * 搜索输入
+     */
+    onSearchInput(e) {
+      this.setData({
+        searchKeyword: e.detail.value
+      });
+    },
+
+    /**
+     * 执行搜索
+     */
+    async onSearch() {
+      const keyword = this.data.searchKeyword.trim();
+      if (!keyword) {
+        this.loadSessions();
+        return;
+      }
+
+      this.setData({ isLoading: true });
+
+      try {
+        const result = await api.searchChats(
+          this.properties.baseUrl,
+          this.properties.token,
+          keyword
+        );
+
+        const sessions = this.processSessionData(result || []);
+        const grouped = this.groupSessionsByDate(sessions);
+
+        this.setData({
+          sessions: sessions,
+          todaySessions: grouped.today,
+          thisWeekSessions: grouped.thisWeek,
+          earlierSessions: grouped.earlier,
+          hasMore: false
+        });
+      } catch (error) {
+        console.error('搜索失败', error);
+        wx.showToast({
+          title: error.message || '搜索失败',
+          icon: 'none'
+        });
+      } finally {
+        this.setData({ isLoading: false });
+      }
+    },
+
+    /**
+     * 清除搜索
+     */
+    clearSearch() {
+      this.setData({ searchKeyword: '' });
+      this.loadSessions();
+    },
+
+    /**
+     * 关闭侧边栏
+     */
+    onClose() {
+      this.setData({ isEditMode: false });
+      this.triggerEvent('close');
+    },
+
+    /**
+     * 点击遮罩关闭
+     */
+    onMaskTap() {
+      this.onClose();
+    },
+
+    /**
+     * 阻止冒泡
+     */
+    preventBubble() {
+      // 阻止事件冒泡
+    },
+
+    /**
+     * 刷新列表
+     */
+    refresh() {
+      this.loadSessions(true);
+    }
+  }
+});

package/miniprogram_dist/components/sidebar/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/miniprogram_dist/components/sidebar/index.wxml

@@ -0,0 +1,137 @@
+<view class="sidebar-wrapper {{visible ? 'show' : ''}}">
+  <view class="sidebar-container" catchtap="preventBubble">
+    <!-- 顶部标题栏（只有关闭按钮） -->
+    <view class="sidebar-header">
+      <view class="close-btn" bindtap="onClose">
+        <image class="close-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-close.svg" mode="aspectFit" />
+      </view>
+    </view>
+
+    <!-- 标题行（对话列表 + 编辑按钮） -->
+    <view class="title-row">
+      <text class="sidebar-title">对话列表</text>
+      <text class="edit-btn" bindtap="toggleEditMode">{{isEditMode ? '完成' : '编辑'}}</text>
+    </view>
+    <!-- 新建对话按钮（暂时隐藏）
+    <view class="new-chat-btn" bindtap="onNewChat">
+      <text class="new-chat-icon">+</text>
+      <text class="new-chat-text">开始新对话</text>
+    </view>
+    -->
+
+    <!-- 搜索框（暂时隐藏）
+    <view class="search-box">
+      <input
+        class="search-input"
+        placeholder="搜索对话..."
+        value="{{searchKeyword}}"
+        bindinput="onSearchInput"
+        bindconfirm="onSearch"
+      />
+      <view wx:if="{{searchKeyword}}" class="search-clear" bindtap="clearSearch">
+        <text>×</text>
+      </view>
+    </view>
+    -->
+
+    <!-- 对话列表 -->
+    <scroll-view class="session-list" scroll-y="true" enhanced="true" show-scrollbar="false" bindscrolltolower="onScrollToLower" lower-threshold="100">
+      <!-- 今天的对话 -->
+      <view wx:if="{{todaySessions.length > 0}}" class="session-group">
+        <text class="group-title">今天</text>
+        <view
+          wx:for="{{todaySessions}}"
+          wx:key="id"
+          class="session-item {{currentSessionId === item.id ? 'active' : ''}}"
+          bindtap="onSelectSession"
+          data-session="{{item}}"
+        >
+          <view class="session-content">
+            <text class="session-title">{{item.title || '新对话'}}</text>
+            <text class="session-time">{{item.timeText}}</text>
+          </view>
+          <view wx:if="{{isEditMode}}" class="session-actions">
+            <view class="action-btn rename-btn" catchtap="onRename" data-session="{{item}}">
+              <image class="action-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-edit.svg" mode="aspectFit" />
+            </view>
+            <view class="action-btn delete-btn" catchtap="onDelete" data-session="{{item}}">
+              <image class="action-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-delete.svg" mode="aspectFit" />
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 本周的对话 -->
+      <view wx:if="{{thisWeekSessions.length > 0}}" class="session-group">
+        <text class="group-title">本周</text>
+        <view
+          wx:for="{{thisWeekSessions}}"
+          wx:key="id"
+          class="session-item {{currentSessionId === item.id ? 'active' : ''}}"
+          bindtap="onSelectSession"
+          data-session="{{item}}"
+        >
+          <view class="session-content">
+            <text class="session-title">{{item.title || '新对话'}}</text>
+            <text class="session-time">{{item.timeText}}</text>
+          </view>
+          <view wx:if="{{isEditMode}}" class="session-actions">
+            <view class="action-btn rename-btn" catchtap="onRename" data-session="{{item}}">
+              <image class="action-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-edit.svg" mode="aspectFit" />
+            </view>
+            <view class="action-btn delete-btn" catchtap="onDelete" data-session="{{item}}">
+              <image class="action-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-delete.svg" mode="aspectFit" />
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 更早的对话 -->
+      <view wx:if="{{earlierSessions.length > 0}}" class="session-group">
+        <text class="group-title">更早</text>
+        <view
+          wx:for="{{earlierSessions}}"
+          wx:key="id"
+          class="session-item {{currentSessionId === item.id ? 'active' : ''}}"
+          bindtap="onSelectSession"
+          data-session="{{item}}"
+        >
+          <view class="session-content">
+            <text class="session-title">{{item.title || '新对话'}}</text>
+            <text class="session-time">{{item.timeText}}</text>
+          </view>
+          <view wx:if="{{isEditMode}}" class="session-actions">
+            <view class="action-btn rename-btn" catchtap="onRename" data-session="{{item}}">
+              <image class="action-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-edit.svg" mode="aspectFit" />
+            </view>
+            <view class="action-btn delete-btn" catchtap="onDelete" data-session="{{item}}">
+              <image class="action-icon" src="/miniprogram_npm/@flexem/chat-box/assets/icons/icon-delete.svg" mode="aspectFit" />
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 空状态 -->
+      <view wx:if="{{!todaySessions.length && !thisWeekSessions.length && !earlierSessions.length}}" class="empty-state">
+        <text class="empty-text">暂无对话记录</text>
+      </view>
+
+      <!-- 加载更多 -->
+      <view wx:if="{{hasMore}}" class="load-more" bindtap="loadMore">
+        <text>{{isLoading ? '加载中...' : '加载更多'}}</text>
+      </view>
+    </scroll-view>
+
+    <!-- 底部用户信息 -->
+    <view class="sidebar-footer">
+      <view class="user-info">
+        <image
+          class="user-avatar"
+          src="{{userAvatar || '/miniprogram_npm/@flexem/chat-box/assets/icons/icon-avatar-default.svg'}}"
+          mode="aspectFill"
+        />
+        <text class="username">{{username || '未登录'}}</text>
+      </view>
+    </view>
+  </view>
+</view>