@flexem/chat-box 1.0.0

package/miniprogram_dist/components/sidebar/index.wxss

@@ -0,0 +1,264 @@
+/* 外层包裹器 */
+.sidebar-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 85vw;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.sidebar-wrapper.show {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+/* 侧边栏容器 */
+.sidebar-container {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部标题栏（只有关闭按钮） */
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  padding: 0 16rpx;
+  padding-top: env(safe-area-inset-top);
+  height: 88rpx;
+}
+
+.close-btn {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-icon {
+  width: 52rpx;
+  height: 52rpx;
+}
+
+/* 标题行（对话列表 + 编辑按钮） */
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 30rpx;
+}
+
+.sidebar-title {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.edit-btn {
+  font-size: 28rpx;
+  color: #007aff;
+  padding: 10rpx 0;
+}
+
+/* 新建对话按钮 */
+.new-chat-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20rpx 30rpx;
+  padding: 24rpx;
+  background-color: #007aff;
+  border-radius: 12rpx;
+  gap: 10rpx;
+}
+
+.new-chat-icon {
+  font-size: 36rpx;
+  color: #fff;
+  font-weight: bold;
+}
+
+.new-chat-text {
+  font-size: 30rpx;
+  color: #fff;
+}
+
+/* 搜索框 */
+.search-box {
+  position: relative;
+  margin: 0 30rpx 20rpx;
+}
+
+.search-input {
+  width: 100%;
+  height: 72rpx;
+  padding: 0 70rpx 0 30rpx;
+  background-color: #f5f5f5;
+  border-radius: 36rpx;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+
+.search-clear {
+  position: absolute;
+  right: 20rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ccc;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 24rpx;
+}
+
+/* 对话列表 */
+.session-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.session-group {
+  padding: 0 30rpx;
+  margin-bottom: 20rpx;
+}
+
+.group-title {
+  display: block;
+  font-size: 24rpx;
+  color: #999;
+  padding: 20rpx 0 10rpx;
+}
+
+/* 对话项 */
+.session-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 20rpx;
+  border-radius: 12rpx;
+  margin-bottom: 8rpx;
+  transition: background-color 0.2s;
+}
+
+.session-item:active {
+  background-color: #f0f0f0;
+}
+
+.session-item.active {
+  background-color: #e6f2ff;
+}
+
+.session-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.session-title {
+  display: block;
+  font-size: 30rpx;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-time {
+  display: block;
+  font-size: 22rpx;
+  color: #999;
+  margin-top: 6rpx;
+}
+
+/* 操作按钮 */
+.session-actions {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  margin-left: 20rpx;
+}
+
+.action-btn {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.rename-btn {
+  background-color: transparent;
+}
+
+.delete-btn {
+  background-color: transparent;
+}
+
+.action-icon {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+}
+
+/* 加载更多 */
+.load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx;
+}
+
+.load-more text {
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 底部用户信息 */
+.sidebar-footer {
+  padding: 30rpx;
+  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #eee;
+  background-color: #fff;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.user-avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+}
+
+.username {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}