打分界面

src/views/index/MapDetail.vue

@@ -44,7 +44,59 @@
         
         <div class="actions">
           <a :href="map.zip_file" class="download-btn" download>下载地图</a>
-          <a class="score-btn">地图评分</a>
+          <a class="score-btn" @click="showScoreDialog = true">地图评分</a>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 评分弹窗 -->
+    <div class="score-dialog" v-if="showScoreDialog">
+      <div class="dialog-overlay" @click="showScoreDialog = false"></div>
+      <div class="dialog-content">
+        <div class="dialog-header">
+          <h2>评分</h2>
+          <button class="close-btn" @click="showScoreDialog = false">&times;</button>
+        </div>
+        <div class="dialog-body">
+          <div class="score-section">
+            <h3>地图评分</h3>
+            <div class="rating">
+              <span 
+                v-for="star in 5" 
+                :key="'map-'+star" 
+                class="star"
+                :class="{ active: star <= mapScore }"
+                @click="mapScore = star"
+              >★</span>
+            </div>
+            <!-- <textarea 
+              v-model="mapComment" 
+              placeholder="请输入对地图的评价（选填）"
+              class="comment-input"
+            ></textarea> -->
+          </div>
+          
+          <div class="score-section">
+            <h3>作者评分</h3>
+            <div class="rating">
+              <span 
+                v-for="star in 5" 
+                :key="'author-'+star" 
+                class="star"
+                :class="{ active: star <= authorScore }"
+                @click="authorScore = star"
+              >★</span>
+            </div>
+            <!-- <textarea 
+              v-model="authorComment" 
+              placeholder="请输入对作者的评价（选填）"
+              class="comment-input"
+            ></textarea> -->
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <button class="cancel-btn" @click="showScoreDialog = false">取消</button>
+          <button class="submit-btn" @click="submitScores">提交评分</button>
         </div>
       </div>
     </div>
@@ -60,6 +112,13 @@ const route = useRoute()
 const router = useRouter()
 const map = ref(null)
 
+// 评分相关的响应式变量
+const showScoreDialog = ref(false)
+const mapScore = ref(0)
+const authorScore = ref(0)
+const mapComment = ref('')
+const authorComment = ref('')
+
 const fetchMapDetail = async () => {
   try {
     map.value = await getMapDetail(route.params.id)
@@ -76,6 +135,36 @@ const formatDate = (dateString) => {
   return new Date(dateString).toLocaleDateString('zh-CN')
 }
 
+// 提交评分
+const submitScores = async () => {
+  if (mapScore.value === 0 || authorScore.value === 0) {
+    alert('请为地图和作者都进行评分')
+    return
+  }
+  
+  try {
+    // TODO: 调用评分 API
+    console.log('提交评分:', {
+      mapScore: mapScore.value,
+      authorScore: authorScore.value,
+      mapComment: mapComment.value,
+      authorComment: authorComment.value
+    })
+    
+    // 关闭弹窗并重置表单
+    showScoreDialog.value = false
+    mapScore.value = 0
+    authorScore.value = 0
+    mapComment.value = ''
+    authorComment.value = ''
+    
+    alert('评分成功！')
+  } catch (error) {
+    console.error('评分失败:', error)
+    alert('评分失败，请稍后重试')
+  }
+}
+
 onMounted(() => {
   fetchMapDetail()
 })
@@ -263,4 +352,146 @@ onMounted(() => {
     font-size: 0.85rem;
   }
 }
+
+/* 评分弹窗样式 */
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+
+.dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 500px;
+  z-index: 101;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.dialog-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #666;
+  padding: 0 5px;
+}
+
+.score-section {
+  margin-bottom: 20px;
+}
+
+.score-section h3 {
+  margin: 0 0 10px;
+  font-size: 1rem;
+  color: #444;
+}
+
+.rating {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.star {
+  font-size: 24px;
+  cursor: pointer;
+  color: #ddd;
+  transition: color 0.2s;
+}
+
+.star:hover,
+.star.active {
+  color: #ffd700;
+}
+
+.comment-input {
+  width: 100%;
+  height: 80px;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  resize: vertical;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+}
+
+.cancel-btn,
+.submit-btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.cancel-btn {
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  color: #666;
+}
+
+.cancel-btn:hover {
+  background: #eee;
+}
+
+.submit-btn {
+  background: #007bff;
+  border: 1px solid #0056b3;
+  color: white;
+}
+
+.submit-btn:hover {
+  background: #0056b3;
+}
+
+/* 移动端适配 */
+@media (max-width: 480px) {
+  .dialog-content {
+    width: 95%;
+    padding: 15px;
+  }
+  
+  .star {
+    font-size: 20px;
+  }
+  
+  .comment-input {
+    height: 60px;
+  }
+}
 </style>