vue-chat-kit 0.3.10 → 0.3.11

package/src/styles/components/_main-area.scss

@@ -0,0 +1,94 @@
+// ==========================================
+// MainArea 组件样式
+// ==========================================
+
+.chat-main-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vck-bg);
+  min-width: 0;
+  height: 100%;
+}
+
+.friend-profile-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--vck-space-lg);
+}
+
+.profile-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  margin-bottom: var(--vck-space-lg);
+  box-shadow: var(--vck-shadow-sm);
+}
+
+.profile-name {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--vck-text-primary);
+  margin-bottom: var(--vck-space-md);
+}
+
+.profile-status {
+  display: flex;
+  align-items: center;
+  gap: var(--vck-space-sm);
+  font-size: 14px;
+  color: var(--vck-text-secondary);
+  margin-bottom: var(--vck-space-lg);
+}
+
+.profile-status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.profile-status-online {
+  background-color: var(--vck-success);
+}
+
+.profile-status-offline {
+  background-color: var(--vck-text-muted);
+}
+
+.profile-start-chat-btn {
+  padding: var(--vck-space) var(--vck-space-lg);
+  font-size: 16px;
+  border-radius: var(--vck-radius-full);
+  display: flex;
+  align-items: center;
+  gap: var(--vck-space-sm);
+}
+
+.chat-window-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.chat-empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--vck-bg-panel);
+}
+
+.empty-state-icon {
+  color: var(--vck-border-strong);
+  margin-bottom: var(--vck-space-md);
+}
+
+.empty-state-text {
+  color: var(--vck-text-muted);
+  font-size: 14px;
+}

package/src/styles/components/_sidebar.scss

@@ -0,0 +1,83 @@
+// ==========================================
+// Sidebar 组件样式
+// ==========================================
+
+.chat-sidebar {
+  width: 60px;
+  background: var(--vck-bg-sidebar);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--vck-space-md) 0;
+  flex-shrink: 0;
+  border-right: 1px solid var(--vck-border);
+}
+
+.sidebar-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--vck-radius-md);
+  overflow: hidden;
+  cursor: pointer;
+  margin-bottom: var(--vck-space);
+  border: 2px solid var(--vck-avatar-border);
+  transition: var(--vck-transition-fast);
+
+  &:hover {
+    transform: scale(1.05);
+    border-color: var(--vck-primary);
+  }
+}
+
+.sidebar-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sidebar-nav-item {
+  width: 44px;
+  height: 44px;
+  border-radius: var(--vck-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: var(--vck-transition-fast);
+  margin-bottom: var(--vck-space-sm);
+  position: relative;
+}
+
+.sidebar-nav-item-active {
+  background: var(--vck-bg-active);
+
+  .el-icon {
+    color: var(--vck-primary);
+  }
+}
+
+.sidebar-nav-item-inactive {
+  color: var(--vck-text-secondary);
+
+  &:hover {
+    background: var(--vck-bg-hover);
+  }
+}
+
+.sidebar-nav-badge {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  background: var(--vck-danger);
+  color: var(--vck-text-white);
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  line-height: 1;
+  min-width: 18px;
+  text-align: center;
+}
+
+.sidebar-spacer {
+  flex: 1;
+}

package/src/styles/index.scss

@@ -0,0 +1,18 @@
+// ==================== 主样式入口 ====================
+// 引入变量和基础样式
+@use './base';
+
+// 引入组件样式
+@use './components/chat-panel';
+@use './components/sidebar';
+@use './components/content-list';
+@use './components/chat-window';
+@use './components/group-sidebar';
+@use './components/main-area';
+@use './components/dialogs';
+@use './components/avatar-crop';
+@use './components/emoji-picker';
+@use './components/context-menu';
+@use './components/add-friend-dialog';
+@use './components/create-group-dialog';
+@use './components/group-detail-dialog';

package/src/styles/themes/_dark.scss

@@ -0,0 +1,68 @@
+// ==========================================
+// 深色主题（参照微信深色模式配色）
+// ==========================================
+
+[data-theme="dark"] {
+  // 主要颜色
+  --vck-primary: #07c160;
+  --vck-primary-hover: #06ad56;
+  --vck-success: #10b981;
+  --vck-success-hover: #059669;
+  --vck-warning: #f59e0b;
+  --vck-warning-hover: #d97706;
+  --vck-danger: #ef4444;
+  --vck-danger-hover: #dc2626;
+  --vck-info: #3b82f6;
+
+  // 背景色
+  --vck-bg: #1a1a1a;
+  --vck-bg-panel: #262626;
+  --vck-bg-sidebar: #191919;
+  --vck-bg-chat: #141414;
+  --vck-bg-bubble-self: #06ad56;
+  --vck-bg-bubble-other: #262626;
+  --vck-bg-hover: rgba(255, 255, 255, 0.08);
+  --vck-bg-active: rgba(7, 193, 96, 0.18);
+  --vck-bg-input: #202020;
+
+  // 文字颜色
+  --vck-text-primary: #f2f2f2;
+  --vck-text-secondary: #9e9e9e;
+  --vck-text-muted: #6b6b6b;
+  --vck-text-white: #ffffff;
+  --vck-text-placeholder: #6b6b6b;
+
+  // 边框
+  --vck-border: #2e2e2e;
+  --vck-border-light: #232323;
+  --vck-border-strong: #383838;
+
+  // 阴影
+  --vck-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
+  --vck-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --vck-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
+
+  // 其他
+  --vck-avatar-border: #2e2e2e;
+  --vck-scrollbar: #4d4d4d;
+  --vck-scrollbar-hover: #666666;
+
+  // 圆角（继承自浅色主题）
+  --vck-radius-sm: 4px;
+  --vck-radius: 6px;
+  --vck-radius-md: 8px;
+  --vck-radius-lg: 12px;
+  --vck-radius-xl: 16px;
+  --vck-radius-full: 9999px;
+
+  // 间距（继承自浅色主题）
+  --vck-space-xs: 4px;
+  --vck-space-sm: 8px;
+  --vck-space: 12px;
+  --vck-space-md: 16px;
+  --vck-space-lg: 24px;
+
+  // 过渡（继承自浅色主题）
+  --vck-transition: all 0.3s ease;
+  --vck-transition-fast: all 0.2s ease;
+}

package/src/styles/themes/_index.scss

@@ -0,0 +1,7 @@
+// ==========================================
+// 主题系统入口
+// ==========================================
+
+// 引入各个主题
+@use './light';
+@use './dark';

package/src/styles/themes/_light.scss

@@ -0,0 +1,69 @@
+// ==========================================
+// 浅色主题（参照微信配色）
+// ==========================================
+
+:root,
+[data-theme="light"] {
+  // 主要颜色
+  --vck-primary: #07c160;
+  --vck-primary-hover: #06ad56;
+  --vck-success: #10b981;
+  --vck-success-hover: #059669;
+  --vck-warning: #f59e0b;
+  --vck-warning-hover: #d97706;
+  --vck-danger: #ef4444;
+  --vck-danger-hover: #dc2626;
+  --vck-info: #3b82f6;
+
+  // 背景色
+  --vck-bg: #ffffff;
+  --vck-bg-panel: #f5f5f5;
+  --vck-bg-sidebar: #ededed;
+  --vck-bg-chat: #f2f2f2;
+  --vck-bg-bubble-self: #95ec69;
+  --vck-bg-bubble-other: #ffffff;
+  --vck-bg-hover: rgba(0, 0, 0, 0.06);
+  --vck-bg-active: rgba(7, 193, 96, 0.12);
+  --vck-bg-input: #ffffff;
+
+  // 文字颜色
+  --vck-text-primary: #181818;
+  --vck-text-secondary: #868686;
+  --vck-text-muted: #b2b2b2;
+  --vck-text-white: #ffffff;
+  --vck-text-placeholder: #b2b2b2;
+
+  // 边框
+  --vck-border: #e5e5e5;
+  --vck-border-light: #f0f0f0;
+  --vck-border-strong: #dcdcdc;
+
+  // 阴影
+  --vck-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --vck-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+  --vck-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
+
+  // 其他
+  --vck-avatar-border: #e5e5e5;
+  --vck-scrollbar: #c8c8c8;
+  --vck-scrollbar-hover: #999999;
+
+  // 圆角
+  --vck-radius-sm: 4px;
+  --vck-radius: 6px;
+  --vck-radius-md: 8px;
+  --vck-radius-lg: 12px;
+  --vck-radius-xl: 16px;
+  --vck-radius-full: 9999px;
+
+  // 间距
+  --vck-space-xs: 4px;
+  --vck-space-sm: 8px;
+  --vck-space: 12px;
+  --vck-space-md: 16px;
+  --vck-space-lg: 24px;
+
+  // 过渡
+  --vck-transition: all 0.3s ease;
+  --vck-transition-fast: all 0.2s ease;
+}