nuxt-app/app/components/agent/AgentSidebar.vue

<script setup lang="ts">
import type { AgentSessionItem } from "~/composables/useAgentSessions";

const props = defineProps<{
  sessions: AgentSessionItem[];
  currentSessionId: string | null;
  loggedIn: boolean;
  user: { name?: string | null; email?: string | null; role?: string | null } | null;
  collapsed: boolean;
}>();

const emit = defineEmits<{
  newSession: [];
  select: [id: string];
  rename: [id: string, title: string];
  delete: [id: string];
  login: [];
  toggle: [];
}>();

const isAdmin = computed(() => props.user?.role === "admin");
</script>

<template>
  <aside class="agent-sidebar" :class="{ collapsed }">
    <div class="sidebar-header">
      <button class="new-chat-btn" @click="emit('newSession')">
        <Icon name="lucide:plus" />
        <span>新对话</span>
      </button>
      <button class="collapse-btn" @click="emit('toggle')">
        <Icon :name="collapsed ? 'lucide:chevrons-right' : 'lucide:chevrons-left'" />
      </button>
    </div>

    <div class="sidebar-sessions">
      <AgentSidebarItem
        v-for="s in sessions"
        :key="s.id"
        :session="s"
        :active="s.id === currentSessionId"
        @select="emit('select', s.id)"
        @rename="(title) => emit('rename', s.id, title)"
        @delete="emit('delete', s.id)"
      />
      <div v-if="sessions.length === 0" class="empty-sessions">
        暂无对话
      </div>
    </div>

    <div class="sidebar-footer">
      <div v-if="loggedIn" class="footer-links">
        <NuxtLink to="/settings" class="footer-link">
          <Icon name="lucide:settings" />
          <span>设置</span>
        </NuxtLink>
        <NuxtLink v-if="isAdmin" to="/admin/dashboard" class="footer-link">
          <Icon name="lucide:shield" />
          <span>管理后台</span>
        </NuxtLink>
      </div>
      <template v-if="loggedIn && user">
        <div class="user-info">
          <div class="user-avatar">
            {{ (user.name || user.email || "?").charAt(0).toUpperCase() }}
          </div>
          <div class="user-meta">
            <div class="user-name">{{ user.name || "用户" }}</div>
            <div class="user-email">{{ user.email }}</div>
          </div>
        </div>
      </template>
      <template v-else>
        <button class="login-btn" @click="emit('login')">
          <Icon name="lucide:log-in" />
          <span>登录以保存对话</span>
        </button>
      </template>
    </div>
  </aside>
</template>

<style scoped>
.agent-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-soft);
  border-right: 1px solid var(--color-hairline);
  transition: width 0.2s ease;
  overflow: hidden;
}

.agent-sidebar.collapsed {
  width: 0;
  border-right: none;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  flex-shrink: 0;
}

.new-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 10px 14px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 0.15s;
}

.new-chat-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-canvas);
}

.collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 16px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.collapse-btn:hover {
  background: var(--color-surface-card);
  color: var(--color-ink);
}

.sidebar-sessions {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.empty-sessions {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--color-hairline);
}

.footer-links {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: none;
  transition: all 0.15s;
}

.footer-link:hover {
  background: var(--color-surface-card);
  color: var(--color-ink);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-meta {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-email {
  font-size: 12px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-body);
  cursor: pointer;
  transition: all 0.15s;
}

.login-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
</style>