优化maps页面

src/views/index/Maps.vue

@@ -2,34 +2,78 @@
   <div class="maps">
     <div class="page-header">
       <h1>最近地图上传</h1>
-    </div>
+      <div class="view-toggle-group icon-group header-toggle-group">
-    <div class="filters">
+        <button 
-      搜索：
+          class="view-toggle-btn icon-btn" 
-      <div class="search-box">
+          :class="{ active: viewMode === 'table' }" 
-        <input
+          @click="viewMode = 'table'"
-          type="text"
+          title="表格视图"
-          placeholder="搜索地图..."
-          v-model="searchValue"
-          @input="handleSearchInput"
-          @blur="handleSearchBlur"
         >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="13" x2="18" y2="13" stroke="currentColor" stroke-width="1.5"/></svg>
+        </button>
+        <button 
+          class="view-toggle-btn icon-btn" 
+          :class="{ active: viewMode === 'card' }" 
+          @click="viewMode = 'card'"
+          title="卡片视图"
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="2" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>
+        </button>
       </div>
-      玩家数：
-      <select v-model="playerCountFilter" class="filter-select" @change="handleFilterChange">
-        <option value="">全部</option>
-        <option v-for="n in [2,3,4,5,6,7,8]" :key="n" :value="n">{{ n }}人</option>
-      </select>
-      分类：
-      <select v-model="tagFilter" class="filter-select" @change="handleFilterChange">
-        <option value="">全部</option>
-        <option v-for="tag in tagOptions" :key="tag" :value="tag">{{ tag }}</option>
-      </select>
-      排序：
-      <select v-model="selectedOrder" class="filter-select" @change="handleFilterChange">
-        <option v-for="opt in orderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
-      </select>
     </div>
-    <div class="table-container">
+    <div class="filters-row">
+      <div class="filters">
+        <div class="search-box">
+          <span class="search-label">搜索：</span>
+          <input
+            type="text"
+            placeholder="搜索地图..."
+            v-model="searchValue"
+            @keyup.enter="handleSearch"
+            class="search-input"
+          >
+          <button v-if="searchValue" class="clear-btn" @click="clearSearch" title="清空">
+            <svg width="14" height="14" viewBox="0 0 20 20" fill="none"><line x1="5" y1="5" x2="15" y2="15" stroke="#bbb" stroke-width="2" stroke-linecap="round"/><line x1="15" y1="5" x2="5" y2="15" stroke="#bbb" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+          <button class="search-btn-icon" @click="handleSearch" title="搜索">
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="9" cy="9" r="7" stroke="#2563eb" stroke-width="2"/><line x1="14.4142" y1="14" x2="18" y2="17.5858" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/></svg>
+          </button>
+        </div>
+        <label>玩家数：</label>
+        <select v-model="playerCountFilter" class="filter-select" @change="handleFilterChange">
+          <option value="">全部</option>
+          <option v-for="n in [2,3,4,5,6,7,8]" :key="n" :value="n">{{ n }}人</option>
+        </select>
+        <label>分类：</label>
+        <select v-model="tagFilter" class="filter-select" @change="handleFilterChange">
+          <option value="">全部</option>
+          <option v-for="tag in tagOptions" :key="tag" :value="tag">{{ tag }}</option>
+        </select>
+        <label>排序：</label>
+        <select v-model="selectedOrder" class="filter-select" @change="handleFilterChange">
+          <option v-for="opt in orderOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+        </select>
+      </div>
+      <div class="view-toggle-group icon-group filters-toggle-group">
+        <button 
+          class="view-toggle-btn icon-btn" 
+          :class="{ active: viewMode === 'table' }" 
+          @click="viewMode = 'table'"
+          title="表格视图"
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="7" x2="18" y2="7" stroke="currentColor" stroke-width="1.5"/><line x1="2" y1="13" x2="18" y2="13" stroke="currentColor" stroke-width="1.5"/></svg>
+        </button>
+        <button 
+          class="view-toggle-btn icon-btn" 
+          :class="{ active: viewMode === 'card' }" 
+          @click="viewMode = 'card'"
+          title="卡片视图"
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="2" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><rect x="12" y="12" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/></svg>
+        </button>
+      </div>
+    </div>
+    <div class="table-container" v-if="viewMode === 'table'">
       <table class="maps-table">
         <thead>
           <tr>
@@ -62,6 +106,28 @@
           </tr>
         </tbody>
       </table>
+      <div v-if="maps.length === 0" class="empty-tip">暂无此地图</div>
+    </div>
+    <div v-else class="card-list-container">
+      <div class="card-list">
+        <div class="map-card" v-for="map in maps" :key="map.id" @click="goToMapDetail(map.id)">
+          <img :src="map.thumbnail" :alt="map.chinese_name" class="card-image" />
+          <div class="card-content">
+            <div class="card-title">{{ map.chinese_name }}</div>
+            <div class="card-author">作者：{{ map.user }}</div>
+            <div class="card-info">
+              <span>下载：{{ map.download_count }}</span>
+              <span>收藏：{{ map.favourite_count }}</span>
+              <span>玩家：{{ map.player_count }}</span>
+            </div>
+            <div class="card-date">{{ formatDate(map.create_time) }}</div>
+            <div class="tags">
+              <span v-for="tag in map.tags" :key="tag" class="tag">{{ tag }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="maps.length === 0" class="empty-tip">暂无此地图</div>
     </div>
     
     <!-- 分页控件 -->
@@ -71,7 +137,8 @@
         :disabled="currentPage === 1"
         @click="changePage(currentPage - 1)"
       >
-        上一页
+        <span class="page-btn-text desktop-only">上一页</span>
+        <span class="page-btn-arrow mobile-only">&#8592;</span>
       </button>
       
       <div class="page-numbers">
@@ -81,9 +148,7 @@
             class="page-number"
             :class="{ active: page === currentPage }"
             @click="changePage(page)"
-          >
+          >{{ page }}</button>
-            {{ page }}
-          </button>
           <span v-else class="page-ellipsis">{{ page }}</span>
         </template>
       </div>
@@ -93,7 +158,8 @@
         :disabled="!hasNextPage"
         @click="changePage(currentPage + 1)"
       >
-        下一页
+        <span class="page-btn-text desktop-only">下一页</span>
+        <span class="page-btn-arrow mobile-only">&#8594;</span>
       </button>
 
       <div class="page-jump">
@@ -108,11 +174,14 @@
         <button class="jump-btn" @click="handleJumpPage">跳转</button>
       </div>
     </div>
+    <button v-if="showBackTop" class="back-to-top-btn" @click="scrollToTop">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 19V5" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/><path d="M6 11L12 5L18 11" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/></svg>
+    </button>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { getMaps, getAllTags } from '../../api/maps.js'
 import '../../assets/styles/common.css'
@@ -124,6 +193,8 @@ const currentPage = ref(1)
 const totalPages = ref(1)
 const hasNextPage = ref(false)
 const jumpPage = ref('')
+const viewMode = ref('table')
+const showBackTop = ref(false)
 
 // 排序和筛选相关
 const orderOptions = [
@@ -190,18 +261,9 @@ const fetchMaps = async (page = 1) => {
   }
 }
 
-// 处理搜索输入
+// 搜索按钮和回车触发搜索
-const handleSearchInput = () => {
+const handleSearch = () => {
-  if (!searchValue.value) {
+  fetchMaps(1)
-    fetchMaps(1)
-  }
-}
-
-// 处理搜索框失去焦点
-const handleSearchBlur = () => {
-  if (searchValue.value) {
-    fetchMaps(1)
-  }
 }
 
 // 处理筛选条件变化
@@ -238,6 +300,7 @@ const changePage = (page) => {
 
 // 跳转到地图详情
 const goToMapDetail = (id) => {
+  sessionStorage.setItem('maps_view_mode', viewMode.value)
   router.push(`/map/${id}`)
 }
 
@@ -246,12 +309,34 @@ const formatDate = (dateString) => {
   return new Date(dateString).toLocaleDateString('zh-CN')
 }
 
+// 清除搜索内容
+const clearSearch = () => {
+  searchValue.value = ''
+  fetchMaps(1)
+}
+
+const handleScroll = () => {
+  showBackTop.value = window.scrollY > 200
+}
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
 onMounted(() => {
-  console.log('组件挂载')
+  const savedMode = sessionStorage.getItem('maps_view_mode')
+  if (savedMode) {
+    viewMode.value = savedMode
+  } else if (window.innerWidth <= 700) {
+    viewMode.value = 'card'
+  }
   fetchMaps(1)
   getAllTags().then(tags => {
     tagOptions.value = tags
   })
+  window.addEventListener('scroll', handleScroll)
+})
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
 })
 </script>
 
@@ -326,4 +411,467 @@ onMounted(() => {
 .jump-btn:hover {
   background: #1a237e;
 }
+.page-header {
+  display: block;
+  position: relative;
+  margin-bottom: 30px;
+}
+.page-header h1 {
+  margin-bottom: 0;
+}
+.view-toggle-group {
+  display: flex;
+  border-radius: 8px;
+  overflow: hidden;
+  border: none;
+}
+.view-toggle-btn {
+  background: #f5f7fa;
+  color: #2563eb;
+  border: none;
+  padding: 6px 22px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  outline: none;
+}
+.view-toggle-btn.active {
+  background: #2563eb;
+  color: #fff;
+  z-index: 1;
+}
+.view-toggle-btn:not(.active):hover {
+  background: #e3f0ff;
+  color: #1a237e;
+}
+.view-toggle-btn:first-child {
+  border-right: 1px solid #2563eb22;
+}
+.view-toggle-btn:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.card-list-container {
+  width: 100%;
+  margin-top: 20px;
+}
+.card-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+.map-card {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  padding: 16px;
+  cursor: pointer;
+  transition: box-shadow 0.2s, transform 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 280px;
+  max-height: 280px;
+  overflow: hidden;
+}
+.map-card:hover {
+  box-shadow: 0 4px 16px rgba(37,99,235,0.15);
+  transform: translateY(-2px) scale(1.03);
+}
+.card-image {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  background: #f5f5f5;
+  display: block;
+}
+.card-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  overflow: hidden;
+}
+.card-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #1a237e;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card-author {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 2px;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+}
+.card-info {
+  font-size: 13px;
+  color: #2563eb;
+  margin-bottom: 2px;
+  display: flex;
+  gap: 10px;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+}
+.card-date {
+  font-size: 12px;
+  color: #aaa;
+  margin-bottom: 2px;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+}
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin-top: 2px;
+}
+.tag {
+  padding: 2px 8px;
+  background: #f5f7fa;
+  color: #2563eb;
+  border-radius: 4px;
+  font-size: 12px;
+}
+@media (max-width: 1200px) {
+  .card-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 700px) {
+  .filters-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  .filters {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    width: 100%;
+  }
+  .search-box {
+    width: 100%;
+    margin-bottom: 0;
+  }
+  .search-input {
+    width: 100%;
+    min-width: 0;
+    font-size: 15px;
+  }
+  .filter-select {
+    width: 100%;
+    font-size: 15px;
+    margin-bottom: 0;
+  }
+  .view-toggle-group.icon-group {
+    margin-top: 4px;
+    justify-content: center;
+    width: 100%;
+  }
+  .icon-btn {
+    min-width: 40px;
+    height: 40px;
+  }
+  .filters label {
+    margin-bottom: 2px;
+    font-size: 14px;
+  }
+  .search-label {
+    display: none !important;
+  }
+  .header-toggle-group {
+    display: flex !important;
+    position: static;
+    justify-content: flex-end;
+    margin-top: 12px;
+    margin-bottom: 10px;
+    width: 100%;
+    background: none;
+    box-shadow: none;
+  }
+  .filters-toggle-group {
+    display: none !important;
+  }
+  .page-header {
+    display: block;
+    position: relative;
+    margin-bottom: 0;
+  }
+  .card-list {
+    grid-template-columns: 1fr;
+    width: 100%;
+  }
+  .map-card {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    margin: 0 auto;
+    box-sizing: border-box;
+    height: auto;
+    max-height: none;
+    padding: 16px 16px 24px 16px;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .card-image {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 12px;
+    object-fit: contain;
+    border-radius: 8px;
+    background: #f5f5f5;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .card-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    overflow: hidden;
+  }
+  .card-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #1a237e;
+    margin-bottom: 4px;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: initial;
+    text-align: left;
+    word-break: break-all;
+  }
+  .card-author {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 6px;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: initial;
+    text-align: left;
+  }
+  .card-info {
+    font-size: 13px;
+    color: #2563eb;
+    margin-bottom: 6px;
+    display: flex;
+    gap: 10px;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: initial;
+    text-align: left;
+  }
+  .card-date {
+    font-size: 12px;
+    color: #aaa;
+    margin-bottom: 6px;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: initial;
+    text-align: left;
+  }
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 2px;
+    width: 100%;
+    justify-content: flex-start;
+    margin-bottom: 0;
+  }
+  .tag {
+    padding: 4px 8px;
+    background: #f5f7fa;
+    color: #2563eb;
+    border-radius: 4px;
+    font-size: 12px;
+  }
+  .page-jump {
+    display: none !important;
+  }
+  .page-btn-text.desktop-only {
+    display: none !important;
+  }
+  .page-btn-arrow.mobile-only {
+    display: inline !important;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+  .back-to-top-btn {
+    position: fixed;
+    right: 18px;
+    bottom: 18px;
+    z-index: 999;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(37,99,235,0.12);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .back-to-top-btn:hover {
+    background: #e3f0ff;
+  }
+  .back-to-top-btn svg {
+    display: block;
+  }
+}
+@media (min-width: 701px) {
+  .header-toggle-group {
+    display: none !important;
+  }
+  .filters-toggle-group {
+    display: flex !important;
+  }
+  .page-btn-text.desktop-only {
+    display: inline !important;
+  }
+  .page-btn-arrow.mobile-only {
+    display: none !important;
+  }
+}
+.filters-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.icon-group {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  margin-top: 2px;
+}
+.icon-btn {
+  padding: 4px 8px;
+  min-width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+  color: #2563eb;
+  border: none;
+  border-radius: 0;
+  font-size: 16px;
+  transition: background 0.2s, color 0.2s;
+  outline: none;
+}
+.icon-btn.active {
+  background: #2563eb;
+  color: #fff;
+}
+.icon-btn:not(.active):hover {
+  background: #e3f0ff;
+  color: #1a237e;
+}
+.icon-btn:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  border-right: 1px solid #2563eb22;
+}
+.icon-btn:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.search-input {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 36px 0 12px;
+  font-size: 15px;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  background: #fff;
+}
+.search-btn-icon {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  background: #fff;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.2s;
+}
+.search-btn-icon:hover {
+  background: #e3f0ff;
+}
+.search-btn-icon svg {
+  display: block;
+}
+.empty-tip {
+  text-align: center;
+  color: #aaa;
+  font-size: 18px;
+  margin: 32px 0 24px 0;
+  letter-spacing: 2px;
+}
+.clear-btn {
+  position: absolute;
+  right: 38px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.2s;
+  z-index: 2;
+}
+.clear-btn:hover {
+  background: #f5f5f5;
+}
+.clear-btn svg {
+  display: block;
+}
+.search-label {
+  font-size: 15px;
+  color: #222;
+  margin-right: 6px;
+  white-space: nowrap;
+  display: inline-block;
+}
 </style>