fix(pl): 将统计展开内容约束到表格可视宽度并保持左对齐。

web-admin/scripts/quota-statistics.test.ts

@@ -64,6 +64,7 @@ function deferred() {
   return { promise, resolve, reject }
 }
 function harness(fixed?: string) {
+  const viewportWidth = vue.ref(1120)
   const calls: any[] = [],
     permissions: any[] = [],
     unmount: Function[] = []
@@ -97,6 +98,7 @@ function harness(fixed?: string) {
       permissions.push(p)
       return p.promise
     },
+    useElementSize: () => ({ width: viewportWidth }),
     useListTableViewportHeight: () => ({ tableHeight: vue.ref(400) }),
     usePersistedListColumns,
     useServerColumnFilters,
@@ -126,11 +128,12 @@ function harness(fixed?: string) {
   const state = scope.run(() =>
     new Function(
       ...Object.keys(env),
-      `${code}; return { rows, fixedDetail, details, load, loadDetail, allowed, canEdit, keyword, setFilterState, page, total }`
+      `${code}; return { rows, fixedDetail, details, load, loadDetail, allowed, canEdit, keyword, setFilterState, page, total, expansionStyle }`
     )(...Object.values(env))
   )
   return {
     state,
+    viewportWidth,
     calls,
     permissions,
     props,
@@ -632,6 +635,7 @@ for (const wrapper of [
         usePersistedListColumns,
         useServerColumnFilters,
         createStatisticsLoader,
+        useElementSize: () => ({ width: vue.ref(1120) }),
         useListTableViewportHeight: () => ({ tableHeight: vue.ref(400) }),
         statusLabel: statisticsLabels.statusLabel,
         contractTypeLabel: statisticsLabels.contractTypeLabel
@@ -669,3 +673,23 @@ for (const wrapper of [
       app.unmount()
     })
 }
+
+test('expanded content follows the table viewport width and keeps alignment local', () => {
+  const h = harness()
+  assert.equal(h.state.expansionStyle.value.width, '1120px')
+  h.viewportWidth.value = 760
+  assert.equal(h.state.expansionStyle.value.width, '760px')
+  const sfc = parse(
+    readFileSync(
+      new URL('../src/views/pl/quota-statistics/StatisticsPanel.vue', import.meta.url),
+      'utf8'
+    )
+  ).descriptor
+  assert.match(
+    sfc.template!.content,
+    /class="view-section statistics-expansion"\s+:style="expansionStyle"/
+  )
+  assert.equal(sfc.styles[0].scoped, true)
+  assert.match(sfc.styles[0].content, /text-align: left/)
+  h.stop()
+})

web-admin/src/views/pl/quota-statistics/StatisticsPanel.vue

@@ -67,7 +67,11 @@
         >
           <el-table-column type="expand"
             ><template #default="{ row }">
-              <div v-loading="details[row.id]?.loading" class="view-section">
+              <div
+                v-loading="details[row.id]?.loading"
+                class="view-section statistics-expansion"
+                :style="expansionStyle"
+              >
                 <el-alert
                   v-if="details[row.id]?.error"
                   title="详情加载失败"
@@ -138,6 +142,7 @@
   </section>
 </template>
 <script setup lang="ts">
+  import { useElementSize } from '@vueuse/core'
   import { Edit, Refresh, RefreshLeft } from '@element-plus/icons-vue'
   import { fetchGetMenuCodes } from '@/api/auth'
   import { useUserStore } from '@/store/modules/user'
@@ -345,6 +350,10 @@
   const tableWrapRef = ref<HTMLElement | null>(null),
     pagerRef = ref<HTMLElement | null>(null),
     tableRef = ref()
+  const { width: tableViewportWidth } = useElementSize(tableWrapRef)
+  const expansionStyle = computed(() => ({
+    width: tableViewportWidth.value > 0 ? `${tableViewportWidth.value}px` : undefined
+  }))
   const { tableHeight } = useListTableViewportHeight({
     tableEl: tableWrapRef,
     pagerEl: pagerRef,
@@ -352,3 +361,12 @@
     enabled: computed(() => !props.embedded)
   })
 </script>
+
+<style scoped>
+  .statistics-expansion {
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 16px;
+    text-align: left;
+  }
+</style>