tuikit-atomicx-vue3 0.1.0

package/src/components/CoGuestPanel/CoGuestPanel.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="panel-content">
+    <div class="panel-header">
+      <div class="tabs">
+        <button
+          :class="['tab-item', { active: activeTab === 'applications' }]"
+          @click="activeTab = 'applications'"
+        >
+          {{ t('Application for live') }}
+        </button>
+        <button
+          :class="['tab-item', { active: activeTab === 'invitations' }]"
+          @click="activeTab = 'invitations'"
+        >
+          {{ t('Invite for live') }}
+        </button>
+      </div>
+    </div>
+    <div class="panel-body">
+      <div
+        v-if="activeTab === 'applications'"
+        class="applications-content"
+      >
+        <div
+          v-if="receivedCoGuestUserList.length > 0"
+          class="user-list-container"
+        >
+          <div class="user-list">
+            <div
+              v-for="user in receivedCoGuestUserList"
+              :key="user.userId"
+              class="user-item"
+            >
+              <div class="user-item-left">
+                <Avatar :src="user.avatarUrl" :size="40" />
+              </div>
+              <div class="user-item-right">
+                <div class="user-info">
+                  <span class="user-name">{{ user.userName || user.userId }}</span>
+                </div>
+                <div class="user-actions">
+                  <TUIButton @click="acceptCoGuestRequest({ userId: user.userId })">
+                    {{ t('Accept') }}
+                  </TUIButton>
+                  <TUIButton
+                    color="red"
+                    @click="rejectCoGuestRequest({ userId: user.userId })"
+                  >
+                    {{
+                      t('Reject')
+                    }}
+                  </TUIButton>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          v-else
+          class="empty-state"
+        >
+          <span>{{ t('No application for live') }}</span>
+        </div>
+      </div>
+      <div
+        v-if="activeTab === 'invitations'"
+        class="invitations-content"
+      >
+        <div class="user-list-container">
+          <div class="user-list-title">
+            <span class="user-list-title-text">{{ t('Current seat') }}</span>
+            <span class="user-list-title-count">
+              {{ `(${userListInCoGuest.length}/${ seatList.length})` }}
+            </span>
+          </div>
+          <div class="user-list">
+            <div
+              v-for="user in userListInCoGuest"
+              :key="user.userId"
+              class="user-item"
+            >
+              <div class="user-item-left">
+                <Avatar :src="user.avatarUrl" :size="40" />
+              </div>
+              <div class="user-item-right">
+                <div class="user-info">
+                  <span class="user-name">{{ user.userName || user.userId }}</span>
+                  <span
+                    v-if="user.userId === loginUserInfo?.userId"
+                    class="is-me"
+                  >{{ `(${t('Me')})` }}</span>
+                </div>
+                <div
+                  v-if="user.userId !== loginUserInfo?.userId"
+                  class="user-actions"
+                >
+                  <TUIButton
+                    color="gray"
+                    @click="disconnect(user.userId)"
+                  >
+                    {{ t('Disconnect') }}
+                  </TUIButton>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="userListInCoGuest.length === 0"
+            class="empty-state"
+          >
+            <span>{{ t('Seat is empty') }}</span>
+          </div>
+        </div>
+        <div
+          v-if="sentCoGuestUserList.length > 0"
+          class="user-list-container"
+        >
+          <div class="user-list-title">
+            <span class="user-list-title-text">{{ t('Inviting') }}</span>
+          </div>
+          <div class="user-list">
+            <div
+              v-for="user in sentCoGuestUserList"
+              :key="user.userId"
+              class="user-item"
+            >
+              <div class="user-item-left">
+                <Avatar :src="user.avatarUrl" :size="40" />
+              </div>
+              <div class="user-item-right">
+                <div class="user-info">
+                  <span class="user-name">{{ user.userName || user.userId }}</span>
+                </div>
+                <div class="user-actions">
+                  <TUIButton
+                    color="gray"
+                    @click="cancelCoGuestRequest({ userId: user.userId })"
+                  >
+                    {{
+                      t('Cancel')
+                    }}
+                  </TUIButton>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="user-list-container">
+          <div class="user-list-title">
+            <span class="user-list-title-text">{{ t('Invite more') }}</span>
+          </div>
+          <div class="user-list">
+            <div
+              v-for="user in availableCoGuestUserList"
+              :key="user.userId"
+              class="user-item"
+            >
+              <div class="user-item-left">
+                <Avatar :src="user.avatarUrl" :size="40" />
+              </div>
+              <div class="user-item-right">
+                <div class="user-info">
+                  <span class="user-name">{{ user.userName || user.userId }}</span>
+                </div>
+                <div class="user-actions">
+                  <TUIButton
+                    color="gray"
+                    @click="sendCoGuestRequest({ userId: user.userId })"
+                  >
+                    {{
+                      t('Invite')
+                    }}
+                  </TUIButton>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="availableCoGuestUserList.length === 0"
+            class="empty-state"
+          >
+            <span>{{ t('No invited users yet') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useCoGuestState } from '../../states/CoGuestState';
+import { useLoginState } from '../../states/LoginState';
+import { useSeatStore } from '../../states/SeatStore';
+import { Avatar } from '../Avatar';
+
+const { t } = useUIKit();
+
+const { loginUserInfo } = useLoginState();
+const { seatList } = useSeatStore();
+
+const {
+  receivedCoGuestUserList,
+  availableCoGuestUserList,
+  sentCoGuestUserList,
+  userListInCoGuest,
+  sendCoGuestRequest,
+  acceptCoGuestRequest,
+  rejectCoGuestRequest,
+  cancelCoGuestRequest,
+  disconnect,
+} = useCoGuestState();
+
+const activeTab = ref('applications');
+</script>
+
+<style lang="scss" scoped>
+.panel-content {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  max-height: 80vh;
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+
+    .tabs {
+      display: flex;
+      gap: 24px;
+      flex-grow: 1;
+
+      .tab-item {
+        background: none;
+        border: none;
+        color: var(--text-color-secondary);
+        font-size: 16px;
+        padding: 12px 0;
+        cursor: pointer;
+        position: relative;
+        transition: color 0.3s ease;
+
+        &.active {
+          color: var(--text-color-link);
+          font-weight: 500;
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background-color: var(--text-color-link);
+            border-radius: 1.5px;
+          }
+        }
+      }
+    }
+  }
+
+  .panel-body {
+    margin-top: 12px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #414756;
+      border-radius: 2px;
+    }
+  }
+}
+
+.applications-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+}
+
+.invitations-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+}
+
+.user-list-container {
+  display: flex;
+  flex-direction: column;
+  .user-list-title {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-secondary);
+    font-size: 14px;
+    font-weight: 400;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .user-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .user-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 50px;
+    box-sizing: border-box;
+
+    .user-item-left {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    .user-item-right {
+      flex: 1;
+      display: flex;
+      height: 100%;
+      align-items: center;
+      border-bottom: 1px solid var(--stroke-color-secondary);
+    }
+
+    .user-info {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .user-name {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--text-color-primary);
+      }
+    }
+  }
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex: 1;
+  color: var(--text-color-secondary);
+  min-height: 60px;
+}
+</style>

package/src/components/CoGuestPanel/i18n/en-US/index.ts

@@ -0,0 +1,16 @@
+export const resource = {
+  'Application for live': 'Application for live',
+  'Invite for live': 'Invite for live',
+  'Seat is empty': 'Seat is empty',
+  'No invited users yet': 'No invited users yet',
+  'Current seat': 'Current seat',
+  Accept: 'Accept',
+  Reject: 'Reject',
+  Disconnect: 'Disconnect',
+  Cancel: 'Cancel',
+  Invite: 'Invite',
+  'Invite more': 'Invite more',
+  Inviting: 'Inviting',
+  'No application for live': 'No application for live',
+  Me: 'Me',
+};

package/src/components/CoGuestPanel/i18n/index.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/src/components/CoGuestPanel/i18n/zh-CN/index.ts

@@ -0,0 +1,16 @@
+export const resource = {
+  'Application for live': '连麦申请',
+  'Invite for live': '邀请连麦',
+  'Seat is empty': '麦位空闲',
+  'No invited users yet': '暂无可邀请用户',
+  'Current seat': '当前麦位',
+  Accept: '接受',
+  Reject: '拒绝',
+  Disconnect: '断开连麦',
+  Cancel: '取消',
+  Invite: '邀请',
+  'Invite more': '邀请更多',
+  Inviting: '邀请中',
+  'No application for live': '暂无连麦申请',
+  Me: '我',
+};

package/src/components/CoGuestPanel/index.ts

@@ -0,0 +1,7 @@
+import CoGuestPanel from './CoGuestPanel.vue';
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n';
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+export { CoGuestPanel };

package/src/components/ConversationList/ConversationList.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { useConversationListState } from '../../states/ConversationListState';
+
+const {
+  conversationList,
+  switchConversation,
+} = useConversationListState();
+
+function handleConversationClick(conversationID: string) {
+  switchConversation(conversationID);
+}
+</script>
+
+<template>
+  <div class="conversation-list">
+    <div
+      v-for="conversation in conversationList"
+      :key="conversation.conversationID"
+      class="conversationItem"
+    >
+      <div
+        class="conversation-item"
+        @click="handleConversationClick(conversation.conversationID)"
+      >
+        {{ conversation.getShowName() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.conversation-list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  gap: 8px;
+}
+
+.conversation-item {
+  height: 80px;
+  font-size: 14px;
+  background-color: aquamarine;
+  cursor: pointer;
+}
+</style>

package/src/components/ConversationList/index.ts

@@ -0,0 +1,5 @@
+import ConversationList from './ConversationList.vue';
+
+export {
+  ConversationList,
+};