yu-zhi-ran/platform/frontend/navigation-component.js

// 公共导航组件定义
const NavigationComponent = {
  props: {
    currentPage: {
      type: String,
      required: true,
      validator: (value) => ['dashboard', 'topics', 'logs', 'users', 'admin'].includes(value)
    },
    isAdmin: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <div class="navigation-wrapper">
      <!-- PC 左边栏 -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <h3>宇之然平台</h3>
        </div>
        <nav class="sidebar-nav">
          <button 
            class="sidebar-btn" 
            :class="{ active: currentPage === 'dashboard' }"
            @click="$emit('navigate', '/')"
          >📊 系统概览</button>
          <button 
            class="sidebar-btn" 
            :class="{ active: currentPage === 'topics' }"
            @click="$emit('navigate', 'topics.html')"
          >📋 选题管理</button>
          <button 
            class="sidebar-btn" 
            :class="{ active: currentPage === 'logs' }"
            @click="$emit('navigate', 'logs.html')"
          >📄 系统日志</button>
          <button 
            v-if="isAdmin" 
            class="sidebar-btn" 
            :class="{ active: currentPage === 'users' }"
            @click="$emit('navigate', 'users.html')"
          >👥 用户管理</button>
          <button 
            v-if="isAdmin" 
            class="sidebar-btn" 
            :class="{ active: currentPage === 'admin' }"
            @click="$emit('navigate', 'admin.html')"
          >⚙️ 系统管理</button>
        </nav>
      </aside>

      <!-- H5 底部导航 -->
      <nav class="mobile-nav">
        <button 
          class="mobile-nav-btn" 
          :class="{ active: currentPage === 'dashboard' }"
          @click="$emit('navigate', '/')"
        >📊 概览</button>
        <button 
          class="mobile-nav-btn" 
          :class="{ active: currentPage === 'topics' }"
          @click="$emit('navigate', 'topics.html')"
        >📋 选题</button>
        <button 
          class="mobile-nav-btn" 
          :class="{ active: currentPage === 'logs' }"
          @click="$emit('navigate', 'logs.html')"
        >📄 日志</button>
        <button 
          v-if="isAdmin" 
          class="mobile-nav-btn" 
          :class="{ active: currentPage === 'users' }"
          @click="$emit('navigate', 'users.html')"
        >👥 用户</button>
        <button 
          v-if="isAdmin" 
          class="mobile-nav-btn" 
          :class="{ active: currentPage === 'admin' }"
          @click="$emit('navigate', 'admin.html')"
        >⚙️ 系统</button>
      </nav>
    </div>
  `
};

// 注入公共样式（如果尚未注入）
function injectNavigationStyles() {
  if (document.getElementById('navigation-styles')) return;
  
  const styles = `
    /* 导航组件样式 */
    .navigation-wrapper .sidebar {
      width: 180px;
      background: white;
      padding: 12px;
      box-shadow: 2px 0 8px rgba(0,0,0,0.05);
      position: fixed;
      left: 0;
      top: 60px;
      bottom: 0;
      overflow-y: auto;
      z-index: 100;
    }
    .navigation-wrapper .sidebar-header {
      padding: 12px 8px 16px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 12px;
    }
    .navigation-wrapper .sidebar-header h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    .navigation-wrapper .sidebar-btn {
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border: none;
      background: transparent;
      border-radius: 8px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: all 0.3s;
      color: #606266;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .navigation-wrapper .sidebar-btn:hover {
      background: #f5f7fa;
      color: #409eff;
    }
    .navigation-wrapper .sidebar-btn.active {
      background: #ecf5ff;
      color: #409eff;
      font-weight: 600;
    }
    .navigation-wrapper .mobile-nav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
      padding: 8px 0;
      z-index: 1000;
      justify-content: space-around;
    }
    .navigation-wrapper .mobile-nav-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 4px;
      text-align: center;
      font-size: 11px;
      color: #606266;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .navigation-wrapper .mobile-nav-btn:hover {
      color: #409eff;
    }
    .navigation-wrapper .mobile-nav-btn.active {
      color: #409eff;
      font-weight: 600;
    }
    @media (max-width: 768px) {
      .navigation-wrapper .sidebar {
        display: none !important;
      }
      .navigation-wrapper .mobile-nav {
        display: flex;
      }
    }
    @media (min-width: 769px) {
      .navigation-wrapper .mobile-nav {
        display: none !important;
      }
    }
  `;
  
  const styleEl = document.createElement('style');
  styleEl.id = 'navigation-styles';
  styleEl.textContent = styles;
  document.head.appendChild(styleEl);
}

// 安装组件到Vue应用
function installNavigation(app, options = {}) {
  injectNavigationStyles();
  
  app.component('navigation-component', NavigationComponent);
  
  // 添加全局redirectToPage方法（兼容旧代码）
  app.config.globalProperties.$redirectToPage = (path) => {
    window.location.href = path;
  };
  
  return app;
}

// 导出到全局（兼容直接使用）
if (typeof window !== 'undefined') {
  window.NavigationComponent = NavigationComponent;
  window.installNavigation = installNavigation;
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = { NavigationComponent, installNavigation };
}