feat: 优化游戏体验和系统平衡性

- 修复商店物品名称显示问题，添加堆叠物品出售数量选择
- 自动战斗状态持久化，战斗结束显示"寻找中"状态
- 战斗日志显示经验获取详情（战斗经验、武器经验）
- 技能进度条显示当前/最大经验值
- 阅读自动解锁技能并持续获得阅读经验，背包可直接阅读
- 优化训练平衡：时长60秒，经验5点/秒，耐力消耗降低
- 实现自然回复系统：基于体质回复HP/耐力，休息提供3倍加成
- 战斗和训练时不进行自然回复

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

components/common/ProgressBar.vue

@@ -2,7 +2,7 @@
   <view class="progress-bar" :style="{ height }">
     <view class="progress-bar__fill" :style="fillStyle"></view>
     <view v-if="showText" class="progress-bar__text">
-      {{ value }}/{{ max }}
+      {{ displayValue }}/{{ displayMax }}
     </view>
   </view>
 </template>
@@ -22,6 +22,10 @@ const percentage = computed(() => {
   return Math.min(100, Math.max(0, (props.value / props.max) * 100))
 })
 
+const displayValue = computed(() => Math.floor(props.value))
+
+const displayMax = computed(() => Math.floor(props.max))
+
 const fillStyle = computed(() => ({
   width: `${percentage.value}%`,
   backgroundColor: props.color

components/drawers/InventoryDrawer.vue

@@ -55,6 +55,12 @@
           type="warning"
           @click="unequipItem"
         />
+        <TextButton
+          v-if="canRead"
+          text="阅读"
+          type="primary"
+          @click="readItem"
+        />
         <TextButton
           v-if="canUse"
           text="使用"
@@ -75,6 +81,7 @@ import { ref, computed } from 'vue'
 import { usePlayerStore } from '@/store/player'
 import { useGameStore } from '@/store/game'
 import { equipItem as equipItemUtil, unequipItemBySlot, useItem as useItemUtil } from '@/utils/itemSystem.js'
+import { startTask } from '@/utils/taskSystem.js'
 import FilterTabs from '@/components/common/FilterTabs.vue'
 import TextButton from '@/components/common/TextButton.vue'
 
@@ -112,6 +119,11 @@ const canUse = computed(() => {
   return selectedItem.value.type === 'consumable'
 })
 
+const canRead = computed(() => {
+  if (!selectedItem.value) return false
+  return selectedItem.value.type === 'book'
+})
+
 // 装备槽位映射
 const slotMap = {
   weapon: 'weapon',
@@ -163,11 +175,34 @@ function useItem() {
   if (!selectedItem.value) return
   const result = useItemUtil(player, game, selectedItem.value.id, 1)
   if (result.success) {
-    // 如果阅读任务，可以在这里处理
     selectedItem.value = null
   }
 }
 
+function readItem() {
+  if (!selectedItem.value) return
+
+  // 检查是否已经在阅读中
+  const existingTask = game.activeTasks?.find(t => t.type === 'reading')
+  if (existingTask) {
+    game.addLog('已经在阅读其他书籍了', 'error')
+    return
+  }
+
+  const result = startTask(game, player, 'reading', {
+    itemId: selectedItem.value.id,
+    duration: selectedItem.value.readingTime || 60
+  })
+
+  if (result.success) {
+    game.addLog(`开始阅读《${selectedItem.value.name}》`, 'info')
+    selectedItem.value = null
+    emit('close')  // 关闭背包以便看到阅读进度
+  } else {
+    game.addLog(result.message, 'error')
+  }
+}
+
 function sellItem() {
   if (!selectedItem.value) return
   // 已装备的物品不能出售
@@ -256,13 +291,6 @@ function sellItem() {
     font-size: 22rpx;
     margin-top: 4rpx;
   }
-}
-
-.quality-badge {
-  font-size: 18rpx;
-  opacity: 0.8;
-  margin-left: 8rpx;
-}
 
   &__equipped-badge {
     width: 32rpx;
@@ -278,6 +306,12 @@ function sellItem() {
   }
 }
 
+.quality-badge {
+  font-size: 18rpx;
+  opacity: 0.8;
+  margin-left: 8rpx;
+}
+
 .inventory-empty {
   padding: 80rpx;
   text-align: center;

components/drawers/ShopDrawer.vue

@@ -130,6 +130,34 @@
         </view>
       </view>
     </view>
+
+    <!-- 数量选择弹窗 -->
+    <view v-if="quantitySelector" class="item-detail-popup" @click="cancelQuantitySell">
+      <view class="item-detail" @click.stop>
+        <text class="item-detail__name">选择出售数量</text>
+        <view class="quantity-selector">
+          <text class="quantity-selector__item-name">{{ quantitySelector.item.icon }} {{ quantitySelector.item.name }}</text>
+          <text class="quantity-selector__available">拥有: {{ quantitySelector.maxCount }}</text>
+
+          <view class="quantity-selector__controls">
+            <TextButton text="-" type="default" @click="decreaseSellCount" :disabled="quantitySelector.selectedCount <= 1" />
+            <text class="quantity-selector__count">{{ quantitySelector.selectedCount }}</text>
+            <TextButton text="+" type="default" @click="increaseSellCount" :disabled="quantitySelector.selectedCount >= quantitySelector.maxCount" />
+          </view>
+
+          <TextButton text="全部" type="default" size="small" @click="setMaxSellCount" style="margin-top: 12rpx;" />
+
+          <view class="quantity-selector__preview">
+            <text class="quantity-selector__price-label">预计获得:</text>
+            <text class="quantity-selector__price">{{ getSellPrice(quantitySelector.item) * quantitySelector.selectedCount }} 铜币</text>
+          </view>
+        </view>
+        <view class="item-detail__actions">
+          <TextButton text="确认出售" type="primary" @click="confirmQuantitySell" />
+          <TextButton text="取消" @click="cancelQuantitySell" />
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -138,6 +166,7 @@ import { ref, computed } from 'vue'
 import { usePlayerStore } from '@/store/player'
 import { useGameStore } from '@/store/game'
 import { getShopConfig, getBuyPrice as calcBuyPrice, getSellPrice as calcSellPrice } from '@/config/shop.js'
+import { ITEM_CONFIG } from '@/config/items.js'
 import { addItemToInventory, removeItemFromInventory } from '@/utils/itemSystem.js'
 import FilterTabs from '@/components/common/FilterTabs.vue'
 import TextButton from '@/components/common/TextButton.vue'
@@ -149,6 +178,8 @@ const currentMode = ref('buy')
 const selectedItem = ref(null)
 const bulkMode = ref(false)
 const selectedItems = ref([])
+// 数量选择弹窗状态
+const quantitySelector = ref(null)  // { item: Object, maxCount: Number, selectedCount: Number }
 
 const emit = defineEmits(['close'])
 
@@ -171,10 +202,18 @@ const shopItems = computed(() => {
   return config.items
     .filter(item => item.stock === -1 || item.stock > 0)
     .map(shopItem => {
-      const itemConfig = { ...shopItem }
-      itemConfig.id = shopItem.itemId
-      return itemConfig
+      // 从 ITEM_CONFIG 获取完整物品信息
+      const itemConfig = ITEM_CONFIG[shopItem.itemId]
+      if (!itemConfig) return null
+
+      return {
+        ...itemConfig,        // 复制所有物品属性（name, icon, description等）
+        id: shopItem.itemId,  // 使用 itemId 作为 id
+        stock: shopItem.stock,
+        baseStock: shopItem.baseStock
+      }
     })
+    .filter(Boolean)
 })
 
 // 玩家可出售物品
@@ -248,7 +287,7 @@ function isItemSelected(item) {
 // 处理出售列表点击
 function handleSellItemClick(item) {
   if (bulkMode.value) {
-    // 批量模式：切换选中状态
+    // 批量模式：切换选中状态（批量出售出售全部）
     const index = selectedItems.value.findIndex(i =>
       (i.uniqueId && i.uniqueId === item.uniqueId) || i.id === item.id
     )
@@ -258,8 +297,18 @@ function handleSellItemClick(item) {
       selectedItems.value.push(item)
     }
   } else {
-    // 普通模式：显示详情
-    trySell(item)
+    // 普通模式：检查是否是堆叠物品
+    if (item.count > 1) {
+      // 堆叠物品：显示数量选择弹窗
+      quantitySelector.value = {
+        item: item,
+        maxCount: item.count,
+        selectedCount: 1
+      }
+    } else {
+      // 非堆叠物品：直接显示详情
+      trySell(item)
+    }
   }
 }
 
@@ -338,20 +387,68 @@ function confirmSell() {
   if (!selectedItem.value) return
 
   const item = selectedItem.value
-  const price = getSellPrice(item)
+  const sellCount = item.sellCount || 1
+  const price = getSellPrice(item) * sellCount
 
   // 移除物品
-  const result = removeItemFromInventory(player, item.uniqueId || item.id)
+  const result = removeItemFromInventory(player, item.uniqueId || item.id, sellCount)
 
   if (result.success) {
     // 增加金币
     player.currency.copper += price
-    game.addLog(`出售了 ${item.name}，获得 ${price} 铜币`, 'reward')
+    const countText = sellCount > 1 ? `x${sellCount}` : ''
+    game.addLog(`出售了 ${item.name}${countText}，获得 ${price} 铜币`, 'reward')
   }
 
   selectedItem.value = null
 }
 
+// 确认数量选择出售
+function confirmQuantitySell() {
+  if (!quantitySelector.value) return
+
+  const { item, selectedCount } = quantitySelector.value
+  const price = getSellPrice(item) * selectedCount
+
+  // 移除指定数量的物品
+  const result = removeItemFromInventory(player, item.uniqueId || item.id, selectedCount)
+
+  if (result.success) {
+    // 增加金币
+    player.currency.copper += price
+    game.addLog(`出售了 ${item.name}x${selectedCount}，获得 ${price} 铜币`, 'reward')
+  }
+
+  // 关闭弹窗
+  quantitySelector.value = null
+}
+
+// 取消数量选择
+function cancelQuantitySell() {
+  quantitySelector.value = null
+}
+
+// 增加出售数量
+function increaseSellCount() {
+  if (quantitySelector.value && quantitySelector.value.selectedCount < quantitySelector.value.maxCount) {
+    quantitySelector.value.selectedCount++
+  }
+}
+
+// 减少出售数量
+function decreaseSellCount() {
+  if (quantitySelector.value && quantitySelector.value.selectedCount > 1) {
+    quantitySelector.value.selectedCount--
+  }
+}
+
+// 设置最大出售数量
+function setMaxSellCount() {
+  if (quantitySelector.value) {
+    quantitySelector.value.selectedCount = quantitySelector.value.maxCount
+  }
+}
+
 function close() {
   emit('close')
 }
@@ -630,4 +727,58 @@ function close() {
     justify-content: flex-end;
   }
 }
+
+// 数量选择器样式
+.quantity-selector {
+  &__item-name {
+    display: block;
+    color: $text-primary;
+    font-size: 28rpx;
+    margin-bottom: 8rpx;
+  }
+
+  &__available {
+    display: block;
+    color: $text-secondary;
+    font-size: 24rpx;
+    margin-bottom: 16rpx;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24rpx;
+    margin-bottom: 16rpx;
+  }
+
+  &__count {
+    min-width: 80rpx;
+    text-align: center;
+    color: $text-primary;
+    font-size: 32rpx;
+    font-weight: bold;
+  }
+
+  &__preview {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16rpx;
+    background-color: $bg-tertiary;
+    border-radius: 8rpx;
+    margin-top: 16rpx;
+  }
+
+  &__price-label {
+    color: $text-secondary;
+    font-size: 24rpx;
+  }
+
+  &__price {
+    color: $accent;
+    font-size: 28rpx;
+    font-weight: bold;
+  }
+}
 </style>

components/panels/MapPanel.vue

@@ -32,6 +32,17 @@
       />
     </view>
 
+    <!-- 寻找敌人中状态 -->
+    <view v-if="game.isSearching && !game.inCombat" class="searching-status">
+      <text class="searching-status__title">🔍 寻找中...</text>
+      <text class="searching-status__desc">正在寻找新的敌人</text>
+      <view class="searching-status__dots">
+        <text class="dot">●</text>
+        <text class="dot">●</text>
+        <text class="dot">●</text>
+      </view>
+    </view>
+
     <!-- 区域列表 -->
     <view class="map-panel__locations-header">
       <text class="locations-title">可前往的区域</text>
@@ -380,6 +391,8 @@ function toggleAutoCombat() {
       }
     }
   } else {
+    // 关闭自动战斗时，清除寻找中状态
+    game.isSearching = false
     game.addLog('自动战斗已关闭', 'info')
   }
 }
@@ -472,6 +485,62 @@ function toggleAutoCombat() {
   }
 }
 
+// 寻找中状态样式
+.searching-status {
+  padding: 16rpx;
+  background-color: rgba($accent, 0.1);
+  border: 1rpx solid $accent;
+  border-radius: 12rpx;
+  margin-bottom: 16rpx;
+  text-align: center;
+
+  &__title {
+    display: block;
+    color: $accent;
+    font-size: 28rpx;
+    font-weight: bold;
+    margin-bottom: 8rpx;
+  }
+
+  &__desc {
+    display: block;
+    color: $text-secondary;
+    font-size: 24rpx;
+    margin-bottom: 12rpx;
+  }
+
+  &__dots {
+    display: flex;
+    justify-content: center;
+    gap: 12rpx;
+
+    .dot {
+      color: $accent;
+      font-size: 24rpx;
+      animation: pulse 1.5s ease-in-out infinite;
+
+      &:nth-child(2) {
+        animation-delay: 0.3s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.6s;
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
 .locations-title {
   color: $text-secondary;
   font-size: 24rpx;

components/panels/StatusPanel.vue

@@ -139,6 +139,7 @@
             height="8rpx"
             :showText="false"
           />
+          <text class="skill-item__progress">{{ skill.exp }}/{{ skill.maxExp }}</text>
         </view>
       </view>
       <view v-if="filteredSkills.length === 0" class="skill-empty">
@@ -261,7 +262,7 @@ import { usePlayerStore } from '@/store/player'
 import { useGameStore } from '@/store/game'
 import { SKILL_CONFIG } from '@/config/skills'
 import { ITEM_CONFIG } from '@/config/items'
-import { startTask } from '@/utils/taskSystem'
+import { startTask, endTask } from '@/utils/taskSystem'
 import { getSkillDisplayInfo } from '@/utils/skillSystem'
 import ProgressBar from '@/components/common/ProgressBar.vue'
 import StatItem from '@/components/common/StatItem.vue'
@@ -426,7 +427,7 @@ const trainingTask = computed(() => {
 function startTraining(skill) {
   const result = startTask(game, player, 'training', {
     skillId: skill.id,
-    duration: 300  // 5分钟
+    duration: 60  // 1分钟
   })
 
   if (result.success) {
@@ -438,7 +439,6 @@ function startTraining(skill) {
 
 function stopTraining() {
   if (trainingTask.value) {
-    const { endTask } = require('@/utils/taskSystem')
     endTask(game, player, trainingTask.value.taskId, false)
     game.addLog('停止了训练', 'info')
   }
@@ -631,6 +631,15 @@ function cancelActiveTask(task) {
   &__bar {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4rpx;
+  }
+
+  &__progress {
+    color: $text-muted;
+    font-size: 20rpx;
+    text-align: right;
   }
 }