完成大部分

src/components/views/xmInfo.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { AgGridVue } from 'ag-grid-vue3'
-import type { ColDef } from 'ag-grid-community'
+import type { ColDef, FirstDataRenderedEvent, GridApi, GridReadyEvent, GridSizeChangedEvent } from 'ag-grid-community'
 import localforage from 'localforage'
 import { majorList } from '@/sql'
 import {  myTheme ,gridOptions} from '@/lib/diyAgGridOptions'
 import { decimalAggSum, sumByNumber } from '@/lib/decimal'
+import { formatThousands } from '@/lib/numberFormat'
 
 import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';
 // 精简的边框配置（细线条+浅灰色，弱化分割线视觉）
@@ -43,8 +44,9 @@ interface XmInfoState {
 const DB_KEY = 'xm-info-v3'
 const DEFAULT_PROJECT_NAME = 'xxx造价咨询服务'
 
-const projectName = ref(DEFAULT_PROJECT_NAME)
+const projectName = ref('')
 const detailRows = ref<DetailRow[]>([])
+const gridApi = ref<GridApi<DetailRow> | null>(null)
 const rootRef = ref<HTMLElement | null>(null)
 const gridSectionRef = ref<HTMLElement | null>(null)
 const agGridRef = ref<HTMLElement | null>(null)
@@ -211,11 +213,12 @@ const columnDefs: ColDef<DetailRow>[] = [
   {
     headerName: '造价金额(万元)',
     field: 'amount',
-    minWidth: 170,
+    headerClass: 'ag-right-aligned-header',
+    minWidth: 100,
       flex: 1, // 核心：开启弹性布局，自动占满剩余空间
 
     editable: params => !params.node?.group && !params.node?.rowPinned,
-    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'editable-cell-line' : ''),
+    cellClass: params => (!params.node?.group && !params.node?.rowPinned ? 'ag-right-aligned-cell editable-cell-line' : 'ag-right-aligned-cell'),
     cellClassRules: {
       'editable-cell-empty': params =>
         !params.node?.group && !params.node?.rowPinned && (params.value == null || params.value === '')
@@ -231,13 +234,13 @@ const columnDefs: ColDef<DetailRow>[] = [
         return '点击输入'
       }
       if (params.value == null) return ''
-      return Number(params.value).toFixed(2)
+      return formatThousands(params.value)
     }
   },
   {
     headerName: '用地面积(亩)',
     field: 'landArea',
-    minWidth: 170,
+    minWidth: 100,
       flex: 1, // 核心：开启弹性布局，自动占满剩余空间
 
     editable: params => !params.node?.group && !params.node?.rowPinned,
@@ -264,8 +267,7 @@ const columnDefs: ColDef<DetailRow>[] = [
 
 const autoGroupColumnDef: ColDef = {
   headerName: '专业编码以及工程专业名称',
-  minWidth: 320,
-  pinned: 'left',
+  minWidth: 200,
     flex:2, // 核心：开启弹性布局，自动占满剩余空间
 
   cellRendererParams: {
@@ -277,6 +279,11 @@ const autoGroupColumnDef: ColDef = {
     }
     const nodeId = String(params.value || '')
     return idLabelMap.get(nodeId) || nodeId
+  },
+  tooltipValueGetter: params => {
+    if (params.node?.rowPinned) return '总合计'
+    const nodeId = String(params.value || '')
+    return idLabelMap.get(nodeId) || nodeId
   }
 }
 
@@ -316,14 +323,18 @@ const loadFromIndexedDB = async () => {
   try {
     const data = await localforage.getItem<XmInfoState>(DB_KEY)
     if (data) {
+      console.log('loaded data:', data)
       projectName.value = data.projectName || DEFAULT_PROJECT_NAME
       detailRows.value = mergeWithDictRows(data.detailRows)
       return
     }
+      projectName.value =  DEFAULT_PROJECT_NAME
 
     detailRows.value = buildDefaultRows()
   } catch (error) {
     console.error('loadFromIndexedDB failed:', error)
+          projectName.value =  DEFAULT_PROJECT_NAME
+
     detailRows.value = buildDefaultRows()
   }
 }
@@ -385,6 +396,26 @@ const processCellFromClipboard = (params:any) => {
   return params.value;
 };
 
+const fitColumnsToGrid = () => {
+  if (!gridApi.value) return
+  requestAnimationFrame(() => {
+    gridApi.value?.sizeColumnsToFit({ defaultMinWidth: 80 })
+  })
+}
+
+const handleGridReady = (event: GridReadyEvent<DetailRow>) => {
+  gridApi.value = event.api
+  fitColumnsToGrid()
+}
+
+const handleGridSizeChanged = (_event: GridSizeChangedEvent<DetailRow>) => {
+  fitColumnsToGrid()
+}
+
+const handleFirstDataRendered = (_event: FirstDataRenderedEvent<DetailRow>) => {
+  fitColumnsToGrid()
+}
+
 const scrollToGridSection = () => {
   const target = gridSectionRef.value || agGridRef.value
   target?.scrollIntoView({ behavior: 'smooth', block: 'start' })
@@ -440,11 +471,14 @@ const scrollToGridSection = () => {
     :localeText="AG_GRID_LOCALE_CN"
     :tooltipShowDelay="500"
         :headerHeight="50"
+    :suppressHorizontalScroll="true"
     :processCellForClipboard="processCellForClipboard"
     :processCellFromClipboard="processCellFromClipboard"
     :undoRedoCellEditing="true"
     :undoRedoCellEditingLimit="20"
-
+    @grid-ready="handleGridReady"
+    @grid-size-changed="handleGridSizeChanged"
+    @first-data-rendered="handleFirstDataRendered"
   />
       </div>
     </div>