新增功能

2026-03-09 09:55:04 +08:00
parent 7b76671988
commit 02ae537b4c
12 changed files with 2019 additions and 22 deletions
@@ -0,0 +1,63 @@
+<template>
+  <div class="side-tab" :class="{ dark: isDark }">
+    <!-- 用户头像 -->
+    <div class="avatar-wrapper">
+      <Avatar class="avatar" :src="loginUserInfo?.avatarUrl" />
+      <div class="tooltip">
+        <div class="tooltip-name">{{ loginUserInfo?.userName || '未命名' }}</div>
+        <div class="tooltip-id">ID: {{ loginUserInfo?.userId }}</div>
+      </div>
+    </div>
+    <!-- Tab 切换 -->
+    <div class="tabs">
+      <div 
+        class="tab-item"
+        :class="{ active: props.activeTab === 'conversations' }"
+        @click="handleTabChange('conversations')"
+        title="会话"
+      >
+        <IconChatNew size="24" />
+      </div>
+      <div 
+        class="tab-item"
+        :class="{ active: props.activeTab === 'contacts' }"
+        @click="handleTabChange('contacts')"
+        title="联系人"
+      >
+        <IconContacts size="24" />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useLoginState, useUIKit, Avatar } from '@tencentcloud/chat-uikit-vue3';
+import { IconChatNew, IconContacts } from '@tencentcloud/uikit-base-component-vue3';
+
+const { theme } = useUIKit();
+const { loginUserInfo } = useLoginState();
+
+const isDark = computed(() => theme.value === 'dark' || theme.value === 'serious');
+
+interface Props {
+  activeTab?: 'conversations' | 'contacts';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeTab: 'conversations'
+});
+
+const emit = defineEmits<{
+  tabChange: [tab: 'conversations' | 'contacts'];
+}>();
+
+const handleTabChange = (tab: 'conversations' | 'contacts') => {
+  emit('tabChange', tab);
+};
+</script>
+
+<style scoped>
+.side-tab{width:72px;height:100vh;background:var(--bg-color-function);display:flex;flex-direction:column;align-items:center;padding:20px 0;transition:background 0.3s;}.avatar-wrapper{position:relative;margin-bottom:24px;cursor:pointer;}.avatar-wrapper:hover:deep(.avatar){transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15);}.tooltip{position:absolute;left:60px;top:50%;transform:translateY(-50%);padding:8px 12px;background:rgba(0,0,0,0.85);color:#fff;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:all 0.3s;z-index:1000;}.tooltip::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:rgba(0,0,0,0.85);}.avatar-wrapper:hover .tooltip{opacity:1;visibility:visible;}.tooltip-name{font-size:14px;font-weight:500;margin-bottom:4px;}.tooltip-id{font-size:12px;opacity:0.8;}.tabs{display:flex;flex-direction:column;gap:16px;}.tab-item{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;transition:all 0.3s;color:var(--text-color-primary);}.tab-item:hover{background:rgba(0,0,0,0.05);}.tab-item.active{background:var(--button-color-primary-default);color:var(--text-color-button);}.side-tab.dark{background:#1a1a1a;}.side-tab.dark .avatar-wrapper:hover:deep(.avatar){box-shadow:0 4px 12px rgba(255,255,255,0.2);}.side-tab.dark .tooltip{background:rgba(255,255,255,0.95);color:#1a1a1a;}.side-tab.dark .tooltip::before{border-right-color:rgba(255,255,255,0.95);}.side-tab.dark .tab-item:hover{background:rgba(255,255,255,0.1);}.side-tab.dark .tab-item.active{background:#1890ff;color:#fff;}
+</style>