主界面加入底部操作栏

src/App.vue

@@ -1,5 +1,6 @@
 <script setup>
 import VirtualList from './components/VirtualList.vue'
+import { ref } from 'vue'
 
 // 虚拟列表配置
 const listConfig = {
@@ -20,15 +21,64 @@ const listData = Array.from({ length: 100 }, (_, i) => ({
 const handleSelect = (item) => {
   console.log('Selected:', item)
 }
+
+// 菜单配置
+const menuItems = [
+  { id: 'refresh', label: '刷新列表' },
+  { id: 'clear', label: '清空选择' },
+  { id: 'export', label: '导出数据' },
+]
+
+// 控制菜单显示状态
+const showMenu = ref(false)
+
+// 菜单点击处理
+const handleMenuClick = (item) => {
+  console.log('Menu clicked:', item)
+  showMenu.value = false
+}
+
+// 切换菜单显示状态
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value
+}
 </script>
 
 <template>
   <div class="app-container">
-    <VirtualList 
+    <div class="main-content">
-      :data="listData" 
+      <VirtualList 
-      :config="listConfig" 
+        :data="listData" 
-      @select="handleSelect" 
+        :config="listConfig" 
-    />
+        @select="handleSelect" 
+      />
+    </div>
+    <div class="toolbar">
+      <div class="toolbar-content">
+        <div class="total-count">
+          共 {{ listData.length }} 项
+        </div>
+        <div class="toolbar-spacer"></div>
+        <div class="menu-trigger" @click="toggleMenu">
+          <svg viewBox="0 0 24 24" width="16" height="16">
+            <circle cx="12" cy="6" r="2" fill="currentColor"/>
+            <circle cx="12" cy="12" r="2" fill="currentColor"/>
+            <circle cx="12" cy="18" r="2" fill="currentColor"/>
+          </svg>
+          <!-- 弹出菜单 -->
+          <div v-if="showMenu" class="popup-menu">
+            <div
+              v-for="item in menuItems"
+              :key="item.id"
+              class="menu-item"
+              @click="handleMenuClick(item)"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -47,5 +97,77 @@ html, body {
 <style scoped>
 .app-container {
   height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1;
+  min-height: 0; /* 重要：防止内容溢出 */
+}
+
+.toolbar {
+  height: 40px;
+  border-top: 1px solid #e8e8e8;
+  background-color: #fff;
+  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 1;
+}
+
+.toolbar-content {
+  height: 100%;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+}
+
+.total-count {
+  font-size: 13px;
+  color: #666;
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+.menu-trigger {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #666;
+  border-radius: 4px;
+}
+
+.menu-trigger:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.popup-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  min-width: 120px;
+  padding: 4px 0;
+}
+
+.menu-item {
+  padding: 8px 16px;
+  font-size: 13px;
+  color: #333;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
 }
 </style>