ai-write/src/components/GlobalSidebar.vue

<template>
  <aside class="sidebar">
    <!-- Logo/Home -->
    <div class="sidebar-logo">
      🚀
    </div>

    <!-- 导航项 -->
    <nav class="sidebar-nav">
      <button
        v-for="item in navItems"
        :key="item.id"
        @click="switchPage(item.id)"
        :class="['nav-item', { active: currentPage === item.id }]"
        :title="item.label"
      >
        <span class="nav-icon">{{ item.icon }}</span>

        <!-- Tooltip -->
        <div class="nav-tooltip">
          {{ item.label }}
          <div class="nav-tooltip-arrow"></div>
        </div>

        <!-- Active Indicator -->
        <div v-if="currentPage === item.id" class="nav-indicator"></div>
      </button>
    </nav>

    <!-- 底部：设置 -->
    <div class="sidebar-footer">
      <button
        @click="switchPage('settings')"
        :class="['nav-item', { active: currentPage === 'settings' }]"
        title="设置"
      >
        <span class="nav-icon">⚙️</span>
        <div class="nav-tooltip">
          设置
          <div class="nav-tooltip-arrow"></div>
        </div>
      </button>
    </div>
  </aside>
</template>

<script setup>
import { computed } from 'vue'
import { useAppStore } from '../stores/app'

const appStore = useAppStore()
const currentPage = computed(() => appStore.currentPage)

const navItems = [
  { id: 'writer', label: 'AI 写作', icon: '✍️' },
  { id: 'analysis', label: '范式库', icon: '🎯' },
  { id: 'paradigmWriter', label: '范式写作', icon: '📝' },
  { id: 'documents', label: '文稿库', icon: '📂' },
  { id: 'materials', label: '素材库', icon: '📚' },
  { id: 'rewrite', label: '范式润色', icon: '🎨' },
  { id: 'compare', label: '对照检查', icon: '🔍' },
  { id: 'diffAnnotation', label: '差异标注', icon: '📊' }
]

const switchPage = (page) => {
  appStore.setCurrentPage(page)
}
</script>

<style scoped>
/* 侧边栏容器 */
.sidebar {
  width: 64px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6) 0;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-default);
  flex-shrink: 0;
  z-index: 50;
}

/* Logo */
.sidebar-logo {
  margin-bottom: var(--space-8);
  font-size: var(--text-2xl);
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
}

/* 导航区域 */
.sidebar-nav {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* 导航项 */
.nav-item {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition-normal);
  cursor: pointer;
  background: transparent;
  border: none;
}

.nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.nav-item.active {
  background: var(--accent-primary);
  color: var(--text-inverse);
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
}

.nav-icon {
  font-size: var(--text-xl);
}

/* Tooltip */
.nav-tooltip {
  position: absolute;
  left: 100%;
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  white-space: nowrap;
  z-index: 50;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-default);
  pointer-events: none;
}

.nav-item:hover .nav-tooltip {
  opacity: 1;
  visibility: visible;
}

.nav-tooltip-arrow {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  rotate: 45deg;
}

/* 激活指示器 */
.nav-indicator {
  position: absolute;
  left: 0;
  width: 4px;
  height: 24px;
  background: var(--accent-primary);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* 底部区域 */
.sidebar-footer {
  margin-top: auto;
}
</style>