feat(player): PC 端投注/资金/充值/返水列表改为弹窗详情

列表点击与深链统一打开桌面弹窗，并补齐冻结余额文案与审核日志补全。

apps/player/src/views/desktop/DesktopRechargeHistoryView.vue

@@ -1,30 +1,50 @@
 <script setup lang="ts">
-import { ref, onMounted, onActivated } from 'vue';
+import { ref, onMounted, onActivated, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { RouterLink } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import api from '../../api';
 import GoldSpinner from '../../components/GoldSpinner.vue';
 import Pagination from '../../components/desktop/Pagination.vue';
 import DesktopWalletPageHeader from '../../components/desktop/DesktopWalletPageHeader.vue';
+import DesktopRechargeDetailModal from '../../components/desktop/DesktopRechargeDetailModal.vue';
 import { formatMoney } from '../../utils/localeDisplay';
+import { enrichDepositOrder, findDepositOrderById, type PlayerDepositOrder } from '../../utils/depositOrderLookup';
 
 const COL_COUNT = 5;
 
 const { t, locale } = useI18n();
+const route = useRoute();
+const router = useRouter();
 
-type RechargeOrder = {
-  id: string;
-  orderNo: string;
-  amount: string;
-  status: string;
-  methodType?: string;
-  bankName?: string | null;
-  paymentMethodName?: string | null;
-  approvedAmount?: string | null;
-  createdAt: string;
-};
+const detailModalVisible = ref(false);
+const detailOrder = ref<PlayerDepositOrder | null>(null);
 
-const items = ref<RechargeOrder[]>([]);
+async function openDetail(order: PlayerDepositOrder) {
+  detailOrder.value = await enrichDepositOrder(order);
+  detailModalVisible.value = true;
+}
+
+async function openDetailFromQuery() {
+  const orderId = route.query.orderId;
+  if (typeof orderId !== 'string' || !orderId) return;
+
+  const existing = items.value.find((order) => order.id === orderId);
+  const order = existing ?? await findDepositOrderById(orderId);
+  if (order) openDetail(order);
+
+  const { orderId: _removed, ...rest } = route.query;
+  void router.replace({ path: route.path, query: rest });
+}
+
+watch(() => route.query.orderId, () => {
+  void openDetailFromQuery();
+});
+
+watch(detailModalVisible, (visible) => {
+  if (!visible) detailOrder.value = null;
+});
+
+const items = ref<PlayerDepositOrder[]>([]);
 const loading = ref(true);
 const page = ref(1);
 const pageSize = ref(20);
@@ -46,10 +66,16 @@ async function loadPage(p: number) {
   }
 }
 
-onMounted(() => loadPage(1));
-onActivated(() => loadPage(page.value));
+onMounted(async () => {
+  await loadPage(1);
+  await openDetailFromQuery();
+});
+onActivated(async () => {
+  await loadPage(page.value);
+  await openDetailFromQuery();
+});
 
-function methodLabel(order: RechargeOrder) {
+function methodLabel(order: PlayerDepositOrder) {
   if (order.methodType === 'USDT') return 'USDT';
   return order.paymentMethodName || order.bankName || order.methodType || '-';
 }
@@ -96,8 +122,13 @@ function statusLabel(status: string) {
               </td>
             </tr>
             <template v-else-if="items.length">
-              <tr v-for="order in items" :key="order.id" class="hover-row">
-                <td class="order-no">{{ order.orderNo || order.id }}</td>
+              <tr
+                v-for="order in items"
+                :key="order.id"
+                class="hover-row clickable-row"
+                @click="openDetail(order)"
+              >
+                <td class="id-cell">{{ order.orderNo || order.id }}</td>
                 <td>{{ methodLabel(order) }}</td>
                 <td class="num-cell">{{ formatMoney(order.amount, locale) }}</td>
                 <td>
@@ -125,12 +156,7 @@ function statusLabel(status: string) {
         />
       </div>
     </section>
+
+    <DesktopRechargeDetailModal v-model:visible="detailModalVisible" :order="detailOrder" />
   </div>
 </template>
-
-<style scoped>
-.order-no {
-  font-weight: 700;
-  color: var(--primary-light);
-}
-</style>