Electron 精美菜单设计

跟着珅聪学java2026-03-12 19:15

Electron 精美菜单设计

下面为你创建一个现代化的"新品展示"和"快捷下单"菜单，包含渐变色彩、图标、动画效果。

完整实现代码

1. 主进程 (main.js)

复制代码 
const { app, BrowserWindow, Menu, ipcMain, shell } = require('electron')
const path = require('path')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1400,
    height: 900,
    minWidth: 1200,
    minHeight: 700,
    frame: false,
    backgroundColor: '#0a0a0a',
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

  mainWindow.loadFile('index.html')

  // 创建现代化菜单
  createModernMenu()
}

// 创建现代化菜单
function createModernMenu() {
  const template = [
    {
      label: '🏠 首页',
      id: 'home',
      type: 'normal',
      click: () => {
        mainWindow.webContents.send('navigate', 'home')
      }
    },
    {
      label: '🆕 新品展示',
      id: 'newProducts',
      type: 'submenu',
      submenu: [
        {
          label: '🎨 春季新品',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('show-new-products', 'spring')
          }
        },
        {
          label: '☀️ 夏季特惠',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('show-new-products', 'summer')
          }
        },
        {
          label: '🍂 秋季限定',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('show-new-products', 'autumn')
          }
        },
        { type: 'separator' },
        {
          label: '📦 全部新品',
          type: 'normal',
          accelerator: 'CmdOrCtrl+N',
          click: () => {
            mainWindow.webContents.send('show-new-products', 'all')
          }
        }
      ]
    },
    {
      label: '⚡ 快捷下单',
      id: 'quickOrder',
      type: 'submenu',
      submenu: [
        {
          label: '🛒 快速购买',
          type: 'normal',
          accelerator: 'CmdOrCtrl+Q',
          click: () => {
            mainWindow.webContents.send('quick-order', 'buy')
          }
        },
        {
          label: '📋 批量下单',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('quick-order', 'batch')
          }
        },
        {
          label: '📱 扫码下单',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('quick-order', 'scan')
          }
        },
        { type: 'separator' },
        {
          label: '🎫 优惠券',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('quick-order', 'coupon')
          }
        },
        {
          label: '🚚 物流追踪',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('quick-order', 'track')
          }
        }
      ]
    },
    {
      label: '📊 订单管理',
      id: 'orders',
      type: 'submenu',
      submenu: [
        {
          label: '📄 待付款',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('order-action', 'pending')
          }
        },
        {
          label: '📦 待发货',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('order-action', 'shipping')
          }
        },
        {
          label: '✅ 已完成',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('order-action', 'completed')
          }
        },
        { type: 'separator' },
        {
          label: '📈 销售统计',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('order-action', 'stats')
          }
        }
      ]
    },
    {
      label: '⚙️ 设置',
      id: 'settings',
      type: 'submenu',
      submenu: [
        {
          label: '🎨 主题设置',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('open-settings', 'theme')
          }
        },
        {
          label: '🔔 通知设置',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('open-settings', 'notification')
          }
        },
        { type: 'separator' },
        {
          label: '🚪 退出登录',
          type: 'normal',
          click: () => {
            mainWindow.webContents.send('logout')
          }
        }
      ]
    }
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

// 显示关于对话框
function showAboutDialog() {
  const aboutWindow = new BrowserWindow({
    width: 400,
    height: 500,
    parent: mainWindow,
    modal: true,
    frame: false,
    resizable: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  aboutWindow.loadFile('about.html')
}

// 窗口控制
ipcMain.on('minimize-window', () => {
  mainWindow.minimize()
})

ipcMain.on('maximize-window', () => {
  if (mainWindow.isMaximized()) {
    mainWindow.unmaximize()
  } else {
    mainWindow.maximize()
  }
})

ipcMain.on('close-window', () => {
  mainWindow.close()
})

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

2. 主页面 (index.html)

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电商管理系统</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- 自定义标题栏 -->
  <div class="title-bar">
    <div class="title-bar-left">
      <span class="logo">🛍️</span>
      <span class="app-name">电商管理系统</span>
    </div>
    <div class="title-bar-center">
      <div class="search-box">
        <input type="text" placeholder="搜索商品...">
        <button>🔍</button>
      </div>
    </div>
    <div class="title-bar-right">
      <button class="window-btn" id="minimizeBtn">─</button>
      <button class="window-btn" id="maximizeBtn">□</button>
      <button class="window-btn close-btn" id="closeBtn">✕</button>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="main-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <div class="sidebar-section">
        <h3 class="section-title">📦 商品管理</h3>
        <ul class="menu-list">
          <li class="menu-item active" data-page="home">
            <span class="icon">🏠</span>
            <span class="text">首页</span>
          </li>
          <li class="menu-item" data-page="products">
            <span class="icon">📦</span>
            <span class="text">商品列表</span>
          </li>
          <li class="menu-item" data-page="categories">
            <span class="icon">🏷️</span>
            <span class="text">分类管理</span>
          </li>
        </ul>
      </div>

      <div class="sidebar-section">
        <h3 class="section-title">🆕 新品展示</h3>
        <ul class="menu-list">
          <li class="menu-item" data-page="new-spring">
            <span class="icon">🌸</span>
            <span class="text">春季新品</span>
            <span class="badge new">NEW</span>
          </li>
          <li class="menu-item" data-page="new-summer">
            <span class="icon">☀️</span>
            <span class="text">夏季特惠</span>
            <span class="badge hot">HOT</span>
          </li>
          <li class="menu-item" data-page="new-autumn">
            <span class="icon">🍂</span>
            <span class="text">秋季限定</span>
          </li>
        </ul>
      </div>

      <div class="sidebar-section">
        <h3 class="section-title">⚡ 快捷下单</h3>
        <ul class="menu-list">
          <li class="menu-item" data-page="quick-buy">
            <span class="icon">🛒</span>
            <span class="text">快速购买</span>
            <span class="shortcut">Ctrl+Q</span>
          </li>
          <li class="menu-item" data-page="batch-order">
            <span class="icon">📋</span>
            <span class="text">批量下单</span>
          </li>
          <li class="menu-item" data-page="scan-order">
            <span class="icon">📱</span>
            <span class="text">扫码下单</span>
          </li>
        </ul>
      </div>

      <div class="sidebar-section">
        <h3 class="section-title">📊 数据统计</h3>
        <ul class="menu-list">
          <li class="menu-item" data-page="sales">
            <span class="icon">📈</span>
            <span class="text">销售统计</span>
          </li>
          <li class="menu-item" data-page="orders">
            <span class="icon">📄</span>
            <span class="text">订单管理</span>
          </li>
        </ul>
      </div>
    </aside>

    <!-- 内容区 -->
    <main class="content">
      <div class="welcome-card">
        <h1>🎉 欢迎使用电商管理系统</h1>
        <p>选择左侧菜单开始使用</p>
      </div>

      <!-- 新品展示卡片 -->
      <div class="product-showcase">
        <h2 class="section-header">
          <span>🆕 新品展示</span>
          <a href="#" class="view-all">查看全部 →</a>
        </h2>
        <div class="product-grid">
          <div class="product-card">
            <div class="product-image">
              <img src="https://via.placeholder.com/200x200/667eea/ffffff?text=Product+1" alt="产品1">
              <span class="product-badge new">新品</span>
            </div>
            <div class="product-info">
              <h3>时尚运动鞋</h3>
              <p class="price">¥299.00</p>
              <p class="description">舒适透气，潮流百搭</p>
              <button class="btn btn-primary">立即购买</button>
            </div>
          </div>
          <div class="product-card">
            <div class="product-image">
              <img src="https://via.placeholder.com/200x200/764ba2/ffffff?text=Product+2" alt="产品2">
              <span class="product-badge hot">热卖</span>
            </div>
            <div class="product-info">
              <h3>智能手表</h3>
              <p class="price">¥599.00</p>
              <p class="description">多功能健康监测</p>
              <button class="btn btn-primary">立即购买</button>
            </div>
          </div>
          <div class="product-card">
            <div class="product-image">
              <img src="https://via.placeholder.com/200x200/f093fb/ffffff?text=Product+3" alt="产品3">
              <span class="product-badge sale">特价</span>
            </div>
            <div class="product-info">
              <h3>无线耳机</h3>
              <p class="price">¥199.00</p>
              <p class="description">降噪蓝牙5.0</p>
              <button class="btn btn-primary">立即购买</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷下单区域 -->
      <div class="quick-order-section">
        <h2 class="section-header">
          <span>⚡ 快捷下单</span>
        </h2>
        <div class="order-options">
          <div class="order-card" data-action="buy">
            <div class="order-icon">🛒</div>
            <h3>快速购买</h3>
            <p>一键下单，极速配送</p>
            <button class="btn btn-quick">立即购买</button>
          </div>
          <div class="order-card" data-action="batch">
            <div class="order-icon">📋</div>
            <h3>批量下单</h3>
            <p>多商品同时采购</p>
            <button class="btn btn-quick">批量采购</button>
          </div>
          <div class="order-card" data-action="scan">
            <div class="order-icon">📱</div>
            <h3>扫码下单</h3>
            <p>扫描二维码快速下单</p>
            <button class="btn btn-quick">扫码购买</button>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script src="renderer.js"></script>
</body>
</html>

3. 样式文件 (styles.css)

复制代码 
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #ffffff;
  min-height: 100vh;
  overflow: hidden;
}

/* 标题栏 */
.title-bar {
  height: 50px;
  background: linear-gradient(90deg, #0f0f23 0%, #1a1a3e 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  -webkit-app-region: drag;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.title-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  font-size: 24px;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.title-bar-center {
  flex: 1;
  max-width: 400px;
  margin: 0 20px;
}

.search-box {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.search-box:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 15px;
  color: #fff;
  outline: none;
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-box button {
  background: linear-gradient(90deg, #667eea, #764ba2);
  border: none;
  padding: 8px 15px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-box button:hover {
  opacity: 0.8;
}

.title-bar-right {
  display: flex;
  -webkit-app-region: no-drag;
}

.window-btn {
  width: 40px;
  height: 30px;
  background: transparent;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.window-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.close-btn:hover {
  background: #e81123;
  color: #fff;
}

/* 主容器 */
.main-container {
  display: flex;
  height: calc(100vh - 50px);
}

/* 侧边栏 */
.sidebar {
  width: 260px;
  background: linear-gradient(180deg, #0f0f23 0%, #1a1a3e 100%);
  padding: 20px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  padding: 0 20px;
  margin-bottom: 10px;
}

.menu-list {
  list-style: none;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  margin: 2px 10px;
  border-radius: 8px;
}

.menu-item:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #fff;
}

.menu-item.active {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), transparent);
  color: #667eea;
  border-left: 3px solid #667eea;
}

.menu-item .icon {
  font-size: 18px;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.menu-item .text {
  flex: 1;
  font-size: 14px;
}

.menu-item .badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
}

.badge.new {
  background: linear-gradient(90deg, #00b894, #00cec9);
  color: #fff;
}

.badge.hot {
  background: linear-gradient(90deg, #e17055, #d63031);
  color: #fff;
}

.badge.sale {
  background: linear-gradient(90deg, #fdcb6e, #e17055);
  color: #fff;
}

.menu-item .shortcut {
  font-size: 11px;
  color: #666;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

/* 内容区 */
.content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

.welcome-card {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 30px;
}

.welcome-card h1 {
  font-size: 32px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-card p {
  color: #888;
  font-size: 16px;
}

/* 新品展示区 */
.product-showcase {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header span {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.view-all {
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.view-all:hover {
  color: #764ba2;
  text-decoration: underline;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.product-card {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(102, 126, 234, 0.3);
}

.product-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.1);
}

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.product-info {
  padding: 20px;
}

.product-info h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
}

.product-info .price {
  font-size: 22px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 8px;
}

.product-info .description {
  font-size: 13px;
  color: #888;
  margin-bottom: 15px;
}

/* 按钮样式 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(90deg, #667eea, #764ba2);
  color: #fff;
  width: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* 快捷下单区 */
.quick-order-section {
  margin-bottom: 30px;
}

.order-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.order-card {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.order-card:hover {
  transform: translateY(-5px);
  border-color: #667eea;
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
}

.order-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.order-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #fff;
}

.order-card p {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
}

.btn-quick {
  background: linear-gradient(90deg, #00b894, #00cec9);
  color: #fff;
  width: 100%;
}

.btn-quick:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 184, 148, 0.4);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f0f23;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-card,
.product-card,
.order-card {
  animation: fadeIn 0.5s ease forwards;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }

4. 渲染进程脚本 (renderer.js)

复制代码 
const { ipcRenderer } = require('electron')

// 窗口控制
document.getElementById('minimizeBtn').addEventListener('click', () => {
  ipcRenderer.send('minimize-window')
})

document.getElementById('maximizeBtn').addEventListener('click', () => {
  ipcRenderer.send('maximize-window')
})

document.getElementById('closeBtn').addEventListener('click', () => {
  ipcRenderer.send('close-window')
})

// 菜单项点击
document.querySelectorAll('.menu-item').forEach(item => {
  item.addEventListener('click', () => {
    // 移除其他活动状态
    document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'))
    // 添加当前活动状态
    item.classList.add('active')
    
    const page = item.dataset.page
    console.log('导航到:', page)
  })
})

// 快捷下单卡片点击
document.querySelectorAll('.order-card').forEach(card => {
  card.addEventListener('click', (e) => {
    if (e.target.tagName === 'BUTTON') return
    
    const action = card.dataset.action
    console.log('快捷下单:', action)
  })
})

// 接收主进程消息
ipcRenderer.on('navigate', (event, page) => {
  console.log('导航到:', page)
})

ipcRenderer.on('show-new-products', (event, season) => {
  console.log('显示新品:', season)
})

ipcRenderer.on('quick-order', (event, type) => {
  console.log('快捷下单:', type)
})

效果预览

这个实现包含：

  1. 渐变配色​ - 使用紫色/蓝色渐变，现代感强

  2. 圆角设计​ - 所有卡片、按钮都使用圆角

  3. 悬停动效​ - 卡片上浮、图片放大、按钮发光

  4. 徽章标签​ - NEW、HOT、SALE 等状态标识

  5. 快捷键提示​ - 显示 Ctrl+Q 等快捷键

  6. 自定义标题栏​ - 无边框设计，带搜索框

  7. 平滑动画​ - 页面加载时的淡入效果

直接复制代码到对应文件即可运行！

相关推荐
日光倾2 小时前
【Vue.js 入门笔记】闭包和对象引用
前端·vue.js·笔记
一只程序熊2 小时前
UniappX 未找到 “video“ 组件，已自动当做 “view“ 组件处理。请确保代码正确，或重新生成自定义基座后再试。
前端
林小帅2 小时前
【笔记】xxx 技术分享文档模板
前端
雾岛心情2 小时前
【HTML&CSS】HTML为文字添加格式和内容
前端·css·html
xcLeigh2 小时前
Oracle 替换工程实践深度解析：金仓数据库破解 PL/SQL 兼容与跨交易日数据一致性核心难题
数据库·sql·oracle·数据迁移·金仓·kingbasees
软件开发技术深度爱好者2 小时前
基于 Python tkinter 开发的SQLite数据库可视化小工具
数据库·sqlite
泯仲2 小时前
从零起步学习MySQL 第四章：DQL查询全解析
数据库·mysql
原来是猿3 小时前
MYSQL【库操作】
数据库·mysql
皮皮哎哟3 小时前
嵌入式数据库从入门到精通
linux·数据库·sqlite3·sqlite3_open
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04得物前端部门，没了05OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07OpenClaw macOS 完整安装与本地模型配置教程（实战版）08Window 10部署openclaw报错node.exe : npm error code 12809OpenClaw 接入 QQ Bot 完整实践指南10OpenClaw-VSCode：在 VS Code 里玩转 OpenClaw，远程管理+SSH 双剑合璧