diff --git a/apps/web-ele/.env.development b/apps/web-ele/.env.development
index 77c13d3..7fc6645 100644
--- a/apps/web-ele/.env.development
+++ b/apps/web-ele/.env.development
@@ -4,7 +4,9 @@ VITE_PORT=5777
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://127.0.0.1:48080
+#VITE_BASE_URL=http://127.0.0.1:48080
+VITE_BASE_URL=http://test.yihuiyong.cn:48080
+
 # 接口地址
 VITE_GLOB_API_URL=/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
diff --git a/apps/web-ele/src/api/database/materials/index.ts b/apps/web-ele/src/api/database/materials/index.ts
new file mode 100644
index 0000000..66596c0
--- /dev/null
+++ b/apps/web-ele/src/api/database/materials/index.ts
@@ -0,0 +1,238 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MaterialsApi {
+  /** 工料机-分类 */
+  // export interface Catalogs {
+  //   createTime: number,
+  //   updateTime: number,
+  //   creator: string,
+  //   updater: string,
+  //   deleted: number,
+  //   tenantId: number,
+  //   id?: number,
+  //   type: string
+  //   versionNo: string,
+  //   name: string
+  // }
+  export interface Catalogs {
+    id?: number,
+    parentId: number,
+    code: string,
+    name: string,
+    nodeType: string,
+    sortOrder: number,
+    attributes: CatalogItemAttributes,
+    children?: Catalogs[]
+  }
+  // export interface Acea {
+  //   id?: number,
+  //   parentId: number,
+  //   code: string,
+  //   name: string,
+  //   nodeType: string,
+  //   sortOrder: number,
+  //   attributes: object,
+  //   children:Acea[]
+  // }
+  export interface AddCategories {
+    id?: number,
+    parentId: number,
+    code?: string,
+    name: string,
+    nodeType: string, // "specialty"
+    sortOrder: number,
+  }
+
+  /** 工料机项属性 */
+  export interface CatalogItemAttributes {
+    spec?: string;
+    grade?: string;
+    standard?: string;
+    [key: string]: any;
+  }
+
+  /** 工料机项 */
+  export interface CatalogItems {
+    id: number;
+    catalogItemId: number;
+    name: string;
+    categoryId: number;
+    categoryName: string;
+    type: string;
+    unit: string;
+    taxRate: number;
+    taxExclBasePrice: number | null;
+    taxInclBasePrice: number | null;
+    taxExclCompilePrice: number | null;
+    taxInclCompilePrice: number | null;
+    calcBase: string | null;
+    isMerged: number | null;
+    attributes: CatalogItemAttributes;
+    createTime: number;
+    updateTime: number;
+    categoryTreeId: number | null;
+    categoryTreeName: string | null;
+  }
+
+  export interface ResourceItems {
+    createTime: number;
+    updateTime: number;
+    creator: string | null;
+    updater: string | null;
+    deleted: number;
+    tenantId: number;
+    id: number;
+    code: string,
+    name: string,
+    spec?: string;//attributes?.spec 
+    unit: string;
+    taxRate: number;
+    //类别ID- ResourceItemDo.categoryId
+    categoryName: string;//→从 yhy_resource_category.name 获取
+    taxExclBasePrice: string;
+    taxInclBasePrice: string;
+    taxExclCompilePrice: string;
+    taxInclCompilePrice: string;
+    attributes: CatalogItemAttributes;
+    // 虚拟字段（计算合价）
+    taxExclBaseTotal?: number;
+    taxInclBaseTotal?: number;
+    taxExclCompileTotal?: number;
+    taxInclCompileTotal?: number;
+  }
+  export interface ResourceCategories {
+    code: string;
+    name: string;
+    sortOrder: number;
+    taxExclBaseCode: string;
+    taxInclBaseCode: string;
+    taxExclCompileCode: string;
+    taxInclCompileCode: string;
+    attributes: {
+      description?: string;
+      [key: string]: any;
+    };
+  }
+  
+}
+//【第一层】资源库版本
+// export function getCatalogsList() {
+//   return requestClient.get<MaterialsApi.Catalogs[]>('/core/resource/catalogs');
+// }
+
+//【第二层】工料机机类树
+export function getCatalogsTreeList() {
+  return requestClient.get<MaterialsApi.Catalogs[]>('/core/resource/category-tree/tree');
+}
+export function getCategoriesTree(id: any) {
+  return requestClient.get<MaterialsApi.Catalogs[]>(`/core/resource/category-tree/${id}/categories`);
+}
+export function createCategoriesTree(data: MaterialsApi.AddCategories) {
+  return requestClient.post('/core/resource/category-tree', data);
+}
+export function updateCategoriesTree(data:MaterialsApi.AddCategories) {
+  return requestClient.put('/core/resource/category-tree', data);
+}
+export function deleteCategoriesTree(id: number) {
+  return requestClient.delete(`core/resource/category-tree/${id}`);
+}
+//6.6 添加树节点与类别的关联
+export function createCategoryTreeMapping(data: any) {
+  return requestClient.post('/core/resource/category-tree/mapping', data);
+}
+export function deleteCategoryTreeMapping(categoryTreeId: any, categoryId: any) {
+  return requestClient.delete(`/core/resource/category-tree/mapping/${categoryTreeId}/${categoryId}`);
+}
+
+
+//【第三层】工料机目录树
+export function getCatalogsTreeItems(id: any) {
+  return requestClient.get<MaterialsApi.Catalogs[]>(`/core/resource/catalog-items/${id}/tree`);
+}
+
+// 2.2 创建工料机目录树节点
+export function createCatalogItem(data: {
+  categoryTreeId: number | string;
+  code: string;
+  name: string;
+  parentId?: number | string | null;
+  sortOrder?: number;
+  attributes?: any;
+}) {
+  return requestClient.post<number | string>('/core/resource/catalog-items', data);
+}
+
+// 2.3 更新工料机目录树节点
+export function updateCatalogItem(data: {
+  id: number | string;
+  categoryTreeId?: number | string;
+  code?: string;
+  name?: string;
+  unit?: string;
+  parentId?: number | string | null;
+  parentPath?: string[];
+  sortOrder?: number;
+  attributes?: any;
+}) {
+  return requestClient.put('/core/resource/catalog-items', data);
+}
+
+// 2.4 删除工料机目录树节点
+export function deleteCatalogItem(id: number | string) {
+  return requestClient.delete(`/core/resource/catalog-items/${id}`);
+}
+
+// 2.5 获取目录树节点允许的类别列表
+export function getCatalogItemsAllowedList(id: number) {
+  return requestClient.get<any[]>(`/core/resource/catalog-items/${id}/allowed-categories`);
+}
+
+// 2.6 交换两个目录树节点的排序
+export function swapCatalogItemSort(nodeId1: number | string, nodeId2: number | string) {
+  return requestClient.put('/core/resource/catalog-items/swap-sort', {
+    nodeId1,
+    nodeId2
+  });
+}
+
+// 【第四层】工料机项
+export function getCatalogItemsPage(params: PageParam) {
+  return requestClient.get<PageResult<MaterialsApi.CatalogItems>>(
+    'core/resource/items',
+    { params },
+  );
+}
+//3.4 创建工料机项
+export function createResourceItems(data: any) {
+  return requestClient.post('/core/resource/items', data);
+}
+//3.6 更新工料机项
+export function updateResourceItems(data: any) {
+  return requestClient.put('/core/resource/items', data);
+}
+//3.7 删除工料机项
+export function deleteResourceItems(id: number) {
+  return requestClient.delete(`/core/resource/items/${id}`);
+}
+
+//【第五层】复合工料机价格
+export function getResourceItemsPage(params: any) {
+  return requestClient.get<PageResult<MaterialsApi.ResourceItems>>(
+    '/core/resource/merged/page',
+    { params },
+  );
+}
+//5.1 创建复合工料机
+export function createResourceMerged(data: any) {
+  return requestClient.post('/core/resource/merged/create', data);
+}
+//5.2 更新复合工料机
+export function updateResourceMerged(data: any) {
+  return requestClient.put('/core/resource/merged/update', data);
+}
+// 5.3 删除复合工料机
+export function deleteResourceMerged(id: number) {
+  return requestClient.delete(`/core/resource/merged/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/database/materials/root.ts b/apps/web-ele/src/api/database/materials/root.ts
new file mode 100644
index 0000000..96f97a7
--- /dev/null
+++ b/apps/web-ele/src/api/database/materials/root.ts
@@ -0,0 +1,45 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MaterialsApi {
+  /** 工料机-根节点 */
+  export interface Root {
+    id?: number;
+    code: string;
+    name: string;
+    sortOrder: number;
+    taxExclBaseCode: string;
+    taxInclBaseCode: string;
+    taxExclCompileCode: string;
+    taxInclCompileCode: string;
+    attributes?: {
+      description?: string;
+      [key: string]: any;
+    };
+    createTime?: number;
+    updateTime?: number;
+    creator?: string;
+    updater?: string;
+    deleted?: number;
+    tenantId?: number;
+  }
+  
+}
+
+//工料机类别字典（辅助数据）
+export function getCategoriesList() {
+  return requestClient.get<MaterialsApi.Root[]>('/core/resource/categories');
+}
+//5.3 创建类别
+export function createCategories(data: any) {
+  return requestClient.post<MaterialsApi.Root>(`/core/resource/categories`,data);
+}
+//5.4 更新类别
+export function updateCategories(data: MaterialsApi.Root) {
+  return requestClient.put<MaterialsApi.Root>(`/core/resource/categories`,data);
+}
+//5.5 删除类别
+export function deleteCategories(id: number) {
+  return requestClient.delete(`/core/resource/categories/${id}`);
+}
diff --git a/apps/web-ele/src/api/database/quota/fee.ts b/apps/web-ele/src/api/database/quota/fee.ts
new file mode 100644
index 0000000..1989d57
--- /dev/null
+++ b/apps/web-ele/src/api/database/quota/fee.ts
@@ -0,0 +1,22 @@
+
+import { requestClient } from '#/api/request';
+
+/** 3.8 查看分部分项工程费列表 */
+export function getQuotaFeeItemListWithRate(id: any) {
+  return requestClient.get<any>(`/core/quota/fee/item/list-with-rate?catalogItemId=${id}`);
+}
+
+/** 获取工料机类别字典（含价格代码） */
+export function getCategoriesByCatalogItem(catalogItemId: number | string) {
+  return requestClient.get<any>(`/core/quota/catalog-item/${catalogItemId}/categories`);
+}
+
+/** 更新取费项 */
+export function updateQuotaFeeItem(data: any) {
+  return requestClient.put<any>('/core/quota/fee/item/update', data);
+}
+
+/** 创建取费项 */
+export function createQuotaFeeItem(data: any) {
+  return requestClient.post<any>('/core/quota/fee/item/create', data);
+}
\ No newline at end of file
diff --git a/apps/web-ele/src/api/database/quota/index.ts b/apps/web-ele/src/api/database/quota/index.ts
new file mode 100644
index 0000000..bb3a6a8
--- /dev/null
+++ b/apps/web-ele/src/api/database/quota/index.ts
@@ -0,0 +1,537 @@
+
+import { requestClient } from '#/api/request';
+
+export namespace QuotaApi {
+  /** 定额目录条目属性 */
+  export interface CatalogItemAttributes {
+    node_type?: string; // 'specialty'
+    specialty_locked?: boolean;
+    remark?: string;
+    [key: string]: any;
+  }
+
+  /** 定额专业节点（第一层） */
+  export interface CatalogItem {
+    id: number;
+    code: string;
+    name: string;
+    parentId?: number | null; // 支持树形结构
+    sortOrder: number;
+    categoryTreeId?: number | null; // 绑定的工料机专业ID
+    attributes: CatalogItemAttributes;
+    children?: CatalogItem[]; // 子节点（树形结构）
+  }
+
+  /** 定额子目树节点属性 */
+  export interface CatalogTreeAttributes {
+    content_type?: string; // 'directory' | 'content'
+    remark?: string;
+    [key: string]: any;
+  }
+
+  /** 定额子目树节点（第二层） */
+  export interface CatalogTreeNode {
+    id: number | string; // 支持大整数，使用字符串
+    catalogItemId: number; // 关联第一层定额专业
+    code: string;
+    name: string;
+    parentId: number | string | null; // 支持大整数，使用字符串
+    sortOrder: number;
+    unit?: string;
+    attributes: CatalogTreeAttributes;
+    children?: CatalogTreeNode[];
+  }
+
+  /** 定额子目 */
+  export interface QuotaItem {
+    id: number;
+    catalogItemId: number;
+    unit: string;
+    basePrice: number;
+    attributes: any;
+    resources?: QuotaResource[];
+    createTime: number;
+    updateTime: number;
+  }
+
+  /** 定额工料机组成 */
+  export interface QuotaResource {
+    id: number;
+    quotaItemId: number;
+    resourceItemId: number;
+    resourceCode: string;
+    resourceName: string;
+    resourceUnit: string;
+    resourcePrice: number;
+    dosage: number;
+    attributes: any;
+    isMerged: any;
+    mergedItems: any;
+  }
+
+  /** 创建定额目录条目参数 */
+  export interface CreateCatalogItemParams {
+    code: string;
+    name: string;
+    parentId?: number | null;
+    sortOrder?: number;
+    unit?: string;
+    attributes?: CatalogItemAttributes;
+  }
+
+  /** 更新定额目录条目参数 */
+  export interface UpdateCatalogItemParams {
+    id: number;
+    code?: string;
+    name?: string;
+    sortOrder?: number;
+    unit?: string;
+  }
+
+  /** 绑定工料机专业参数 */
+  export interface BindSpecialtyParams {
+    catalogItemId: number | string; // 支持雪花ID（字符串）
+    categoryTreeId: number | string; // 支持雪花ID（字符串）
+  }
+}
+
+// ==================== 定额专业管理（第一层） ====================
+
+/** 1.4 获取定额专业节点详情 */
+export function getQuotaCatalogItem(id: number | string) {
+  return requestClient.get<QuotaApi.CatalogItem>(
+    `/core/quota/catalog-item/get?id=${id}`
+  );
+}
+
+/** 1.2 获取定额专业树结构 */
+export function getQuotaCatalogItemTree(params?: { exclude?: string }) {
+  return requestClient.get<QuotaApi.CatalogItem[]>(
+    '/core/quota/catalog-item/tree',
+    { params }
+  );
+}
+
+/** 1.5 获取定额专业节点列表 */
+export function getQuotaCatalogItemList() {
+  return requestClient.get<QuotaApi.CatalogItem[]>(
+    '/core/quota/catalog-item/list'
+  );
+}
+
+/** 1.1 创建定额专业节点 */
+export function createQuotaCatalogItem(data: QuotaApi.CreateCatalogItemParams) {
+  return requestClient.post('/core/quota/catalog-item/create', data);
+}
+
+/** 1.2 更新定额专业节点 */
+export function updateQuotaCatalogItem(data: QuotaApi.UpdateCatalogItemParams) {
+  return requestClient.put('/core/quota/catalog-item/update', data);
+}
+
+/** 1.3 删除定额专业节点 */
+export function deleteQuotaCatalogItem(id: number | string) {
+  return requestClient.delete(`/core/quota/catalog-item/delete?id=${id}`);
+}
+
+/** 1.6 绑定工料机专业 */
+export function bindQuotaSpecialty(data: QuotaApi.BindSpecialtyParams) {
+  return requestClient.post('/core/quota/catalog-item/bind-specialty', data);
+}
+
+// ==================== 定额子目树管理（第二层） ====================
+
+/** 2.4 获取定额子目树节点详情 */
+export function getQuotaCatalogTreeNode(id: number | string) {
+  return requestClient.get<QuotaApi.CatalogTreeNode>(
+    `/core/quota/catalog-tree/get?id=${id}`
+  );
+}
+
+/** 2.5 获取定额子目树节点列表 */
+export function getQuotaCatalogTreeList(catalogItemId: number | string) {
+  return requestClient.get<QuotaApi.CatalogTreeNode[]>(
+    '/core/quota/catalog-tree/list',
+    { params: { catalogItemId } }
+  );
+}
+
+/** 2.6 获取定额子目树结构 */
+export function getQuotaCatalogTree(catalogItemId: number | string) {
+  return requestClient.get<QuotaApi.CatalogTreeNode[]>(
+    '/core/quota/catalog-tree/tree',
+    { params: { catalogItemId } }
+  );
+}
+
+/** 2.1 创建定额子目树节点 */
+export function createQuotaCatalogTreeNode(data: {
+  catalogItemId: number;
+  parentId?: number | string | null; // 支持大整数，使用字符串
+  code: string;
+  name: string;
+  unit?: string;
+  contentType?: 'directory' | 'content';
+  sortOrder?: number;
+  attributes?: any;
+}) {
+  return requestClient.post<number | string>('/core/quota/catalog-tree/create', data);
+}
+
+/** 2.2 更新定额子目树节点 */
+export function updateQuotaCatalogTreeNode(data: {
+  id: number;
+  catalogItemId?: number;
+  parentId?: number | null;
+  code?: string;
+  name?: string;
+  unit?: string;
+  contentType?: 'directory' | 'content';
+  sortOrder?: number;
+  attributes?: any;
+}) {
+  return requestClient.put('/core/quota/catalog-tree/update', data);
+}
+
+/** 2.3 删除定额子目树节点 */
+export function deleteQuotaCatalogTreeNode(id: number | string) {
+  return requestClient.delete(`/core/quota/catalog-tree/delete?id=${id}`);
+}
+
+/** 2.7 交换两个节点的排序 */
+export function swapQuotaCatalogTreeSort(nodeId1: number | string, nodeId2: number | string) {
+  return requestClient.put('/core/quota/catalog-tree/swap-sort', {
+    nodeId1,
+    nodeId2
+  });
+}
+
+/** 2.8 根据费率模式节点查询子目录树 */
+export function getQuotaCatalogTreeByRateModeNode(rateModeNodeId: number | string) {
+  return requestClient.get<QuotaApi.CatalogTreeNode[]>(
+    '/core/quota/catalog-tree/list-by-rate-mode-node',
+    { params: { rateModeNodeId } }
+  );
+}
+
+// ==================== 定额子目管理（第四层） ====================
+
+/** 2.4 获取定额子目详情 */
+export function getQuotaItem(id: number) {
+  return requestClient.get<QuotaApi.QuotaItem>(
+    `/core/quota/item/get?id=${id}`
+  );
+}
+
+/** 2.5 获取定额子目列表 */
+export function getQuotaItemList(catalogItemId: number | string) {
+  return requestClient.get<QuotaApi.QuotaItem[]>(
+    '/core/quota/item/list',
+    { params: { catalogItemId } }
+  );
+}
+
+/** 2.1 创建定额子目 */
+export function createQuotaItem(data: any) {
+  return requestClient.post('/core/quota/item/create', data);
+}
+
+/** 2.2 更新定额子目 */
+export function updateQuotaItem(data: any) {
+  return requestClient.put('/core/quota/item/update', data);
+}
+
+/** 2.3 删除定额子目 */
+export function deleteQuotaItem(id: number) {
+  return requestClient.delete(`/core/quota/item/delete?id=${id}`);
+}
+
+/** 2.6 计算定额基价 */
+export function calculateQuotaPrice(id: number) {
+  return requestClient.post(`/core/quota/item/calculate-price?id=${id}`);
+}
+
+// ==================== 定额工料机组成管理 ====================
+
+/** 3.4 获取定额工料机组成列表 */
+export function getQuotaResourceList(quotaItemId: number) {
+  return requestClient.get<QuotaApi.QuotaResource[]>(
+    '/core/quota/resource/list',
+    { params: { quotaItemId } }
+  );
+}
+
+/** 3.5 获取可选的工料机列表（已过滤范围，支持模糊查询） */
+export function getAvailableResourceList(quotaItemId: number, params?: { code?: string; name?: string; spec?: string }) {
+  return requestClient.get<any[]>(
+    '/core/quota/resource/available-list',
+    { params: { quotaItemId, ...params } }
+  );
+}
+
+/** 3.1 添加定额工料机组成 */
+export function createQuotaResource(data: any) {
+  return requestClient.post('/core/quota/resource/create', data);
+}
+
+/** 3.2 更新定额工料机组成 */
+export function updateQuotaResource(data: any) {
+  return requestClient.put('/core/quota/resource/update', data);
+}
+
+/** 3.3 删除定额工料机组成 */
+export function deleteQuotaResource(id: number) {
+  return requestClient.delete(`/core/quota/resource/delete?id=${id}`);
+}
+
+// ==================== 定额调整设置管理（第五层） ====================
+
+/** 5.1 创建调整设置 */
+export function createAdjustmentSetting(data: any) {
+  return requestClient.post('/core/quota/adjustment-setting/create', data);
+}
+
+/** 5.2 更新调整设置 */
+export function updateAdjustmentSetting(data: any) {
+  return requestClient.put('/core/quota/adjustment-setting/update', data);
+}
+
+/** 5.3 删除调整设置 */
+export function deleteAdjustmentSetting(id: number) {
+  return requestClient.delete(`/core/quota/adjustment-setting/delete?id=${id}`);
+}
+
+/** 5.4 获取调整设置详情 */
+export function getAdjustmentSetting(id: number) {
+  return requestClient.get<any>(`/core/quota/adjustment-setting/get?id=${id}`);
+}
+
+/** 5.5 获取调整设置列表 */
+export function getAdjustmentSettingList(quotaItemId: number) {
+  return requestClient.get<any[]>(
+    '/core/quota/adjustment-setting/list',
+    { params: { quotaItemId } }
+  );
+}
+
+/** 5.6 交换排序 */
+export function swapAdjustmentSettingSort(id1: number, id2: number) {
+  return requestClient.post('/core/quota/adjustment-setting/swap-sort', {
+    id1,
+    id2
+  });
+}
+
+// ==================== 定额调整明细管理（第六层） ====================
+
+/** 6.1 创建调整明细 */
+export function createAdjustmentDetail(data: any) {
+  return requestClient.post('/core/quota/adjustment-detail/create', data);
+}
+
+/** 6.2 更新调整明细 */
+export function updateAdjustmentDetail(data: any) {
+  return requestClient.put('/core/quota/adjustment-detail/update', data);
+}
+
+/** 6.3 删除调整明细 */
+export function deleteAdjustmentDetail(id: number) {
+  return requestClient.delete(`/core/quota/adjustment-detail/delete?id=${id}`);
+}
+
+/** 6.4 获取调整明细详情 */
+export function getAdjustmentDetail(id: number) {
+  return requestClient.get<any>(`/core/quota/adjustment-detail/get?id=${id}`);
+}
+
+/** 6.5 获取调整明细列表 */
+export function getAdjustmentDetailList(quotaItemId: number) {
+  return requestClient.get<any[]>(
+    '/core/quota/adjustment-detail/list',
+    { params: { quotaItemId } }
+  );
+}
+
+/** 6.6 交换排序 */
+export function swapAdjustmentDetailSort(id1: number, id2: number) {
+  return requestClient.post('/core/quota/adjustment-detail/swap-sort', {
+    id1,
+    id2
+  });
+}
+
+/** 6.8 获取调整设置与明细的组合列表 */
+export function getAdjustmentCombinedList(quotaItemId: number) {
+  return requestClient.get<any[]>(
+    '/core/quota/adjustment-detail/combined-list',
+    { params: { quotaItemId } }
+  );
+}
+
+// ==================== 定额费率管理 ====================
+
+/** 7.1 创建费率模式节点 */
+export function createRateModeNode(data: {
+  parentId: number | string;
+  code: string;
+  name: string;
+  sortOrder?: number;
+}) {
+  return requestClient.post<number | string>(
+    '/core/quota/rate/item/create-mode-node',
+    data
+  );
+}
+/** 3.8 查看分部分项工程费列表 */
+export function getQuotaRateItemTree(id: any) {
+  return requestClient.get<any>(`/core/quota/rate/item/tree?catalogItemId=${id}`);
+}
+
+/** 7.2 创建费率项 */
+export function createRateItem(data: any) {
+  return requestClient.post('/core/quota/rate/item/create', data);
+}
+
+/** 7.3 更新费率项 */
+export function updateRateItem(data: any) {
+  return requestClient.put('/core/quota/rate/item/update', data);
+}
+
+/** 7.4 删除费率项 */
+export function deleteRateItem(id: number | string) {
+  return requestClient.delete(`/core/quota/rate/item/delete?id=${id}`);
+}
+
+/** 7.5 获取费率项详情 */
+export function getRateItem(id: number | string) {
+  return requestClient.get<any>(`/core/quota/rate/item/get?id=${id}`);
+}
+
+/** 7.6 配置动态取值规则 */
+export function configValueRules(data: {
+  rateItemId: number | string;
+  tiers?: Array<{
+    seq: number;
+    threshold: number;
+    compareType: string;
+    fieldValues: Record<string, number>;
+  }>;
+  increments?: Array<{
+    seq: number;
+    step: number;
+    baseThreshold: number;
+    fieldIncrements: Record<string, number>;
+  }>;
+}) {
+  return requestClient.post('/core/quota/rate/item/config-value-rules', data);
+}
+
+/** 7.7 计算动态字段值 */
+export function calculateDynamicFields(rateItemId: number | string, baseValue: number) {
+  return requestClient.get<Record<number, number>>(
+    '/core/quota/rate/item/calculate-fields',
+    { params: { rateItemId, baseValue } }
+  );
+}
+
+/** 7.8 交换费率项排序 */
+export function swapRateItemSort(nodeId1: number | string, nodeId2: number | string) {
+  return requestClient.post('/core/quota/rate/item/swap-sort', {
+    nodeId1,
+    nodeId2
+  });
+}
+
+/** 7.9 移动费率项到指定位置 */
+export function moveRateItemNode(nodeId: number | string, targetNodeId: number | string) {
+  return requestClient.post('/core/quota/rate/item/move-node', {
+    nodeId1: nodeId,
+    nodeId2: targetNodeId
+  });
+}
+
+// ==================== 定额费率字段管理 ====================
+
+/** 8.1 保存费率字段 */
+export function saveRateField(data: {
+  id?: number | string;
+  catalogItemId: number | string;
+  rateItemId?: number | string;
+  fieldIndex: number;
+  fieldValue?: number;
+  fieldLabelId?: number | string;
+  bindingIds?: Array<number | string>;
+}) {
+  return requestClient.post('/core/quota/rate/field/save', data);
+}
+
+/** 8.2 更新字段绑定 */
+export function updateFieldBinding(
+  catalogItemId: number | string,
+  fieldIndex: number,
+  bindingIds: Array<number | string>
+) {
+  return requestClient.post('/core/quota/rate/field/update-binding', bindingIds, {
+    params: { catalogItemId, fieldIndex }
+  });
+}
+
+/** 8.3 获取费率字段列表 */
+export function getRateFieldList(catalogItemId: number | string) {
+  return requestClient.get<any[]>(
+    '/core/quota/rate/field/list',
+    { params: { catalogItemId } }
+  );
+}
+
+// ==================== 字段标签字典管理 ====================
+
+/** 9.1 创建字段标签 */
+export function createFieldLabel(data: {
+  catalogItemId: number | string;
+  labelName: string;
+}) {
+  return requestClient.post<number>('/core/quota/rate-field-label/create', data);
+}
+
+/** 9.2 更新字段标签 */
+export function updateFieldLabel(data: {
+  id: number | string;
+  catalogItemId: number | string;
+  labelName: string;
+}) {
+  return requestClient.put<boolean>('/core/quota/rate-field-label/update', data);
+}
+
+/** 9.3 删除字段标签 */
+export function deleteFieldLabel(id: number | string) {
+  return requestClient.delete('/core/quota/rate-field-label/delete', {
+    params: { id }
+  });
+}
+
+/** 9.4 获取字段标签详情 */
+export function getFieldLabel(id: number | string) {
+  return requestClient.get('/core/quota/rate-field-label/get', {
+    params: { id }
+  });
+}
+
+/** 9.5 获取字段标签列表 */
+export function getFieldLabelList(catalogItemId: number | string) {
+  return requestClient.get<Array<{
+    id: number;
+    catalogItemId: number;
+    labelName: string;
+    sortOrder: number;
+  }>>('/core/quota/rate-field-label/list', {
+    params: { catalogItemId }
+  });
+}
+
+/** 9.6 交换字段标签排序 */
+export function swapFieldLabelSort(labelId1: number | string, labelId2: number | string) {
+  return requestClient.post('/core/quota/rate-field-label/swap-sort', null, {
+    params: { labelId1, labelId2 }
+  });
+}
diff --git a/apps/web-ele/src/components/db-calc/index.ts b/apps/web-ele/src/components/db-calc/index.ts
new file mode 100644
index 0000000..c380ba0
--- /dev/null
+++ b/apps/web-ele/src/components/db-calc/index.ts
@@ -0,0 +1 @@
+export { default as DbCalc } from './index.vue';
diff --git a/apps/web-ele/src/components/db-calc/index.vue b/apps/web-ele/src/components/db-calc/index.vue
new file mode 100644
index 0000000..c2a8eab
--- /dev/null
+++ b/apps/web-ele/src/components/db-calc/index.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { ElButton, ElDialog, ElInput } from 'element-plus'
+import Handsontable from 'handsontable'
+import 'handsontable/dist/handsontable.full.css'
+import { computed, nextTick, ref, watch } from 'vue'
+
+interface TableColumn {
+  prop: string
+  label: string
+}
+
+interface Props {
+  modelValue: boolean
+  currentValue?: string
+  tableData?: any[]
+  tableColumn?: TableColumn[]
+  tableProp?: string // 指定点击单元格时获取哪个字段的值
+  mode?: 'resource' | 'fee' // 模式：resource=工料机（返回类别ID），fee=定额取费（返回对象）
+}
+
+interface ConfirmResult {
+  formula: string
+  variables: Record<string, number | { categoryId: number; priceField: string }>
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm', result: ConfirmResult): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  currentValue: '',
+  tableData: () => [],
+  tableColumn: () => [],
+  tableProp: 'code', // 默认使用 code 字段
+  mode: 'resource' // 默认为工料机模式
+})
+
+const emit = defineEmits<Emits>()
+
+// Handsontable 相关
+const tableContainer = ref<HTMLElement | null>(null)
+let hotInstance: Handsontable | null = null
+
+// 计算基数弹窗数据 - 使用 computed 从 props 获取
+const calcTableData = computed(() => props.tableData || [])
+
+// 运算符号按钮
+const operators = ['+', '-', '*', '/', '(', ')']
+
+// 当前编辑的值
+const editValue = ref<string>('')
+
+// 监听 props.currentValue 变化
+watch(() => props.currentValue, (newVal) => {
+  editValue.value = newVal || ''
+}, { immediate: true })
+
+// 监听弹窗关闭，清空编辑值
+watch(() => props.modelValue, (newVal) => {
+  if (!newVal) {
+    editValue.value = ''
+    if (hotInstance) {
+      hotInstance.destroy()
+      hotInstance = null
+    }
+  } else {
+    editValue.value = props.currentValue || ''
+    // 弹窗打开时初始化表格
+    nextTick(() => {
+      initHandsontable()
+    })
+  }
+})
+
+// 初始化 Handsontable
+const initHandsontable = () => {
+  if (!tableContainer.value || hotInstance) return
+  
+  // 转换列配置
+  const columns = props.tableColumn.map(col => ({
+    data: col.prop,
+    title: col.label,
+    readOnly: true
+  }))
+  
+  console.log('=== Handsontable 初始化 ===')
+  console.log('表格数据:', calcTableData.value)
+  console.log('列配置:', columns)
+  console.log('原始列配置:', props.tableColumn)
+  
+  hotInstance = new Handsontable(tableContainer.value, {
+    data: calcTableData.value,
+    columns: columns,
+    colHeaders: true,
+    rowHeaders: false,
+    height: 300,
+    licenseKey: 'non-commercial-and-evaluation',
+    readOnly: true,
+    afterOnCellMouseDown: (_event: MouseEvent, coords: { row: number; col: number }) => {
+      if (coords.row >= 0 && coords.col >= 0) {
+        const rowData = hotInstance?.getSourceDataAtRow(coords.row) as any
+        const colProp = props.tableColumn[coords.col]?.prop
+        
+        // 跳过序号列和类别列（不允许点击）
+        if (colProp === 'id' || colProp === 'name') {
+          return
+        }
+        
+        // 使用 tableProp 指定的字段获取值
+        const targetProp = props.tableProp
+        const value = rowData?.[targetProp]
+        
+        if (value !== undefined && value !== null) {
+          const cellValue = Array.isArray(value) ? value.join('') : String(value)
+          editValue.value += cellValue
+        }
+      }
+    }
+  })
+}
+
+// 添加运算符
+const addOperator = (op: string) => {
+  editValue.value += op
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+
+// 提取公式中使用的变量，构建 variables 对象
+const extractVariables = (formula: string): Record<string, number | { categoryId: number; priceField: string }> => {
+  const variables: Record<string, number | { categoryId: number; priceField: string }> = {}
+  
+  if (!formula || !props.tableData || props.tableData.length === 0) {
+    return variables
+  }
+  
+  // 创建正则表达式，将运算符和数字替换为空格，用于分割
+  const operatorPattern = operators.map(op => {
+    // 转义特殊字符
+    return op.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  }).join('|')
+  
+  // 移除运算符、数字、小数点和空格，剩下的就是变量代码
+  const cleanFormula = formula.replace(new RegExp(`(${operatorPattern}|\\d+\\.?\\d*|\\s+)`, 'g'), ' ')
+  
+  // 分割出所有可能的变量代码
+  const potentialCodes = cleanFormula.split(/\s+/).filter(code => code.trim() !== '')
+  
+  // 价格字段类型映射
+  const priceFieldMap: Record<string, string> = {
+    'taxExclBaseCode': 'tax_excl_base_price',
+    'taxInclBaseCode': 'tax_incl_base_price',
+    'taxExclCompileCode': 'tax_excl_compile_price',
+    'taxInclCompileCode': 'tax_incl_compile_price'
+  }
+  
+  // 遍历 tableData，检查公式中是否包含该项的所有价格代码
+  props.tableData.forEach((item: any) => {
+    // 检查所有可能的价格代码字段
+    const priceCodeFields = ['taxExclBaseCode', 'taxInclBaseCode', 'taxExclCompileCode', 'taxInclCompileCode', 'code']
+    
+    priceCodeFields.forEach(field => {
+      const codeValue = item[field]
+      if (codeValue && potentialCodes.includes(codeValue)) {
+        if (item.id !== undefined) {
+          // 根据模式返回不同格式
+          if (props.mode === 'resource') {
+            // 工料机模式：直接返回类别ID
+            variables[codeValue] = item.id
+          } else {
+            // 定额取费模式：返回对象 { categoryId, priceField }
+            const priceFieldType = priceFieldMap[field] || 'tax_excl_base_price'
+            variables[codeValue] = {
+              categoryId: item.id,
+              priceField: priceFieldType
+            }
+          }
+        }
+      }
+    })
+  })
+  
+  return variables
+}
+
+// 保存计算数据
+const handleConfirm = () => {
+  const variables = extractVariables(editValue.value)
+  
+  const result: ConfirmResult = {
+    formula: editValue.value,
+    variables: variables
+  }
+  
+  // 只触发 confirm 事件，不自动关闭弹窗
+  // 让父组件在保存成功后再关闭弹窗
+  emit('confirm', result)
+  // 移除自动关闭逻辑
+  // emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <ElDialog 
+    :model-value="modelValue" 
+    @update:model-value="emit('update:modelValue', $event)"
+    title="计算基数设置" 
+    width="800px" 
+    :close-on-click-modal="false"
+  >
+    <div style="margin-bottom: 15px;">
+      <div style="margin-bottom: 10px; color: #909399; font-size: 13px;">
+        限数字:0-9及小数点。运算符号:+加、-减、*乘、/除、()英文括号，代码。
+      </div>
+      <ElInput 
+        size="large"
+        v-model="editValue" 
+        style="width: 100%;"
+        placeholder="点击表格单元格或运算符按钮添加内容"
+        clearable
+      />
+    </div>
+    
+    <div style="margin-bottom: 15px;">
+      <span style="margin-right: 10px;">运算符号:</span>
+      <ElButton 
+        v-for="op in operators" 
+        :key="op" 
+        size="large"
+        @click="addOperator(op)"
+        style="margin-right: 5px; font-size: 20px;"
+      >
+        {{ op }}
+      </ElButton>
+    </div>
+
+    <div ref="tableContainer" style="width: 100%; margin-bottom: 15px;"></div>
+    
+    <template #footer>
+      <ElButton @click="handleClose">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+</style>
diff --git a/apps/web-ele/src/components/db-hst/README.md b/apps/web-ele/src/components/db-hst/README.md
new file mode 100644
index 0000000..0e3d9df
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/README.md
@@ -0,0 +1,75 @@
+# 右键菜单组件使用说明
+
+## 功能特性
+
+### 全局菜单管理
+- 当打开一个右键菜单时，会自动关闭其他已打开的菜单
+- 支持多个菜单组件实例共存，互不干扰
+- 自动清理资源，防止内存泄漏
+- **Handsontable 内置右键菜单与自定义菜单互斥**
+
+## 组件集成
+
+### 1. db-hst 组件（Handsontable）
+- 使用自定义右键菜单组件 `contextmenu.vue`（空白区域右键）
+- 使用 Handsontable 内置 `contextMenu`（单元格右键）
+- 两种菜单互斥，打开一个会自动关闭另一个
+
+### 2. db-tree 组件（Element Plus Tree）
+使用 Element Plus Dropdown 实现的右键菜单
+
+## 工作原理
+
+### contextMenuManager（全局菜单管理器）
+- 维护所有活动菜单的关闭回调函数
+- 当新菜单打开时，通知管理器关闭其他菜单
+- 组件卸载时自动取消注册
+
+### 使用流程
+1. 组件挂载时，向管理器注册关闭回调
+2. 打开菜单前，调用 `contextMenuManager.notifyOpening()`
+3. 管理器关闭其他菜单，保留当前菜单
+4. 组件卸载时，自动取消注册
+
+### db-hst 组件特殊处理
+- 在 `afterOnCellContextMenu` 钩子中关闭自定义菜单
+- 确保 Handsontable 内置菜单打开时，自定义菜单被关闭
+
+## 示例代码
+
+### 在组件中使用
+```typescript
+// 在组件中使用
+import { contextMenuManager } from './contextMenuManager'
+
+// 注册菜单
+const unregister = contextMenuManager.register(hideContextMenu)
+
+// 打开菜单时
+const showMenu = () => {
+  contextMenuManager.notifyOpening(hideContextMenu)
+  // 显示菜单逻辑
+}
+
+// 组件卸载时
+onUnmounted(() => {
+  unregister()
+})
+```
+
+### Handsontable 配置
+```typescript
+const settings = {
+  // ... 其他配置
+  afterOnCellContextMenu: () => {
+    // 关闭自定义菜单
+    contextMenuRef.value?.hideContextMenu?.()
+  }
+}
+```
+
+## 注意事项
+- 确保每个菜单组件都正确注册和取消注册
+- 打开菜单前必须调用 `notifyOpening()`
+- 关闭回调函数应该是幂等的（可以多次调用）
+- Handsontable 的 `contextMenu` 配置与自定义菜单会自动互斥
diff --git a/apps/web-ele/src/components/db-hst/base.ts b/apps/web-ele/src/components/db-hst/base.ts
new file mode 100644
index 0000000..72f47bd
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/base.ts
@@ -0,0 +1,41 @@
+import {ref } from 'vue'
+// 边框样式配置
+export const borderStyle = {
+  width: 2,
+  color: '#0000ff',
+  style: 'solid'
+}
+
+// 构建当前选中行的边框配置
+export const selectCellBorderStyle = (_this:any, row: any) => {
+    const hot = _this as any
+    // 构建当前选中行的边框配置
+    if (row < 0) return
+    const colCount = hot.countCols()
+    if (colCount <= 0) return
+
+    const customBorders = hot.getPlugin('customBorders')
+    customBorders.clearBorders()
+    customBorders.setBorders([[row, 0, row, colCount - 1]], { top: borderStyle, bottom: borderStyle })
+    customBorders.setBorders([[row, 0, row, 0]], { start: borderStyle })
+    customBorders.setBorders([[row, colCount - 1, row, colCount - 1]], { end: borderStyle })
+}
+
+// 构建当前选中行的背景色配置
+export const selectedVisualRowRange = ref<{ from: number; to: number } | null>(null)
+
+export const setSelectedVisualRows = (row: number, row2: number) => {
+  if (row < 0 || row2 < 0) {
+    selectedVisualRowRange.value = null
+    return
+  }
+  const from = Math.min(row, row2)
+  const to = Math.max(row, row2)
+  selectedVisualRowRange.value = { from, to }
+}
+
+export const isVisualRowSelected = (visualRowIndex: number) => {
+  const range = selectedVisualRowRange.value
+  if (!range) return false
+  return visualRowIndex >= range.from && visualRowIndex <= range.to
+}
\ No newline at end of file
diff --git a/apps/web-ele/src/components/db-hst/contextMenuManager.ts b/apps/web-ele/src/components/db-hst/contextMenuManager.ts
new file mode 100644
index 0000000..2fa2e2a
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/contextMenuManager.ts
@@ -0,0 +1,56 @@
+/**
+ * 全局右键菜单管理器
+ * 用于管理多个右键菜单实例，确保同一时间只有一个菜单处于打开状态
+ */
+
+type MenuCloseCallback = () => void
+
+class ContextMenuManager {
+  private activeMenus: Set<MenuCloseCallback> = new Set()
+
+  /**
+   * 注册一个菜单实例
+   * @param closeCallback 关闭菜单的回调函数
+   * @returns 取消注册的函数
+   */
+  register(closeCallback: MenuCloseCallback): () => void {
+    this.activeMenus.add(closeCallback)
+    
+    // 返回取消注册的函数
+    return () => {
+      this.activeMenus.delete(closeCallback)
+    }
+  }
+
+  /**
+   * 关闭所有已注册的菜单
+   */
+  closeAll(): void {
+    this.activeMenus.forEach(callback => {
+      try {
+        callback()
+      } catch (error) {
+        console.error('关闭菜单时出错:', error)
+      }
+    })
+  }
+
+  /**
+   * 通知即将打开新菜单，关闭其他所有菜单
+   * @param currentCloseCallback 当前菜单的关闭回调（不会被关闭）
+   */
+  notifyOpening(currentCloseCallback: MenuCloseCallback): void {
+    this.activeMenus.forEach(callback => {
+      if (callback !== currentCloseCallback) {
+        try {
+          callback()
+        } catch (error) {
+          console.error('关闭其他菜单时出错:', error)
+        }
+      }
+    })
+  }
+}
+
+// 导出单例实例
+export const contextMenuManager = new ContextMenuManager()
diff --git a/apps/web-ele/src/components/db-hst/contextmenu.vue b/apps/web-ele/src/components/db-hst/contextmenu.vue
new file mode 100644
index 0000000..ba4b830
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/contextmenu.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, computed } from 'vue'
+import { contextMenuManager } from './contextMenuManager'
+
+// 接收父组件传递的 props
+const props = defineProps<{
+  hotTableComponent?: any
+  menuItems?: Array<{
+    key: string
+    name: string
+    callback?: (hotInstance: any) => void
+    separator?: boolean
+  }>
+}>()
+
+// 自定义右键菜单状态
+const contextMenu = reactive({
+  visible: false,
+  x: 0,
+  y: 0,
+  row: -1,  // 记录右键点击的行索引
+  col: -1   // 记录右键点击的列索引
+})
+
+// 默认菜单项
+const defaultMenuItems = [
+  {
+    key: 'addRow',
+    name: '新增一行',
+    callback: (hotInstance: any) => {
+      const rowCount = hotInstance.countRows()
+      hotInstance.alter('insert_row_below', rowCount - 1, 1)
+    }
+  }
+]
+
+// 合并默认菜单和自定义菜单
+const menuItems = computed(() => {
+  return props.menuItems && props.menuItems.length > 0 
+    ? props.menuItems 
+    : defaultMenuItems
+})
+
+// 获取 hotInstance
+const getHotInstance = () => {
+  return props.hotTableComponent?.hotInstance
+}
+
+
+// 处理右键菜单
+const handleContextMenu = (event: MouseEvent) => {
+  // 如果没有菜单项，不处理右键菜单
+  if (!props.menuItems || props.menuItems.length === 0) {
+    return
+  }
+  
+  const target = event.target as HTMLElement
+  
+  // 判断是否点击在空白区域（非单元格区域）
+  // 检查是否点击在 td 或 th 元素上
+  const isCell = target.closest('td') || target.closest('th')
+  
+  if (!isCell) {
+    // 点击在空白区域，显示自定义菜单
+    event.preventDefault()
+    
+    // 菜单尺寸（需要与 CSS 中的实际尺寸匹配）
+    const menuWidth = 180
+    const menuItemHeight = 32 // 单个菜单项高度（padding + font-size）
+    const menuPadding = 8 // 菜单上下 padding
+    const menuHeight = menuItems.value.length * menuItemHeight + menuPadding
+    
+    // 获取容器元素（Handsontable 的容器）
+    const container = target.closest('.handsontable') as HTMLElement || target.closest('[class*="hot-"]') as HTMLElement
+    
+    // 如果找到容器，使用容器边界；否则使用视口边界
+    let viewportWidth = window.innerWidth
+    let viewportHeight = window.innerHeight
+    let offsetX = 0
+    let offsetY = 0
+    
+    if (container) {
+      const rect = container.getBoundingClientRect()
+      viewportWidth = rect.right
+      viewportHeight = rect.bottom
+      offsetX = rect.left
+      offsetY = rect.top
+    }
+    
+    // 计算菜单位置，确保不超出边界
+    let x = event.clientX
+    let y = event.clientY
+    
+    // 如果右侧空间不足，向左显示
+    if (x + menuWidth > viewportWidth) {
+      x = Math.max(offsetX + 10, viewportWidth - menuWidth - 10)
+    }
+    
+    // 如果底部空间不足，向上显示
+    if (y + menuHeight > viewportHeight) {
+      y = Math.max(offsetY + 10, viewportHeight - menuHeight - 10)
+    }
+    
+    // 确保不会超出左边界和上边界
+    x = Math.max(offsetX + 10, x)
+    y = Math.max(offsetY + 10, y)
+    
+    // 使用统一的显示方法
+    showContextMenu(x, y)
+  }
+}
+
+// 隐藏右键菜单
+const hideContextMenu = () => {
+  contextMenu.visible = false
+}
+
+// 显示右键菜单（在打开前先关闭其他菜单）
+const showContextMenu = (x: number, y: number) => {
+  // 通知管理器即将打开新菜单，关闭其他菜单
+  contextMenuManager.notifyOpening(hideContextMenu)
+  
+  contextMenu.visible = true
+  contextMenu.x = x
+  contextMenu.y = y
+}
+
+// 菜单项点击处理
+const handleMenuAction = (item: any) => {
+  console.log('菜单操作:', item.key)
+  
+  const hotInstance = getHotInstance()
+  if (!hotInstance) {
+    console.warn('hotInstance 未初始化')
+    hideContextMenu()
+    return
+  }
+  
+  // 执行自定义回调
+  if (item.callback && typeof item.callback === 'function') {
+    item.callback(hotInstance)
+  }
+  
+  hideContextMenu()
+}
+
+// 暴露方法给父组件
+defineExpose({
+  handleContextMenu,
+  hideContextMenu
+})
+
+// 取消注册函数
+let unregister: (() => void) | null = null
+
+onMounted(() => {
+  // 注册到全局菜单管理器
+  unregister = contextMenuManager.register(hideContextMenu)
+  
+  // 监听全局点击事件，隐藏菜单
+  document.addEventListener('click', hideContextMenu)
+})
+
+onUnmounted(() => {
+  // 取消注册
+  if (unregister) {
+    unregister()
+  }
+  
+  document.removeEventListener('click', hideContextMenu)
+})
+</script>
+
+<template>
+    <!-- 自定义右键菜单 -->
+    <div 
+      v-if="contextMenu.visible" 
+      class="custom-context-menu"
+      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+      @click.stop
+    >
+      <template v-for="(item, index) in menuItems" :key="item.key || index">
+        <!-- 分隔线 -->
+        <div v-if="'separator' in item && item.separator" class="menu-separator"></div>
+        <!-- 菜单项 -->
+        <div v-else class="menu-item" @click="handleMenuAction(item)">
+          <span>{{ item.name }}</span>
+        </div>
+      </template>
+    </div>
+</template>
+
+<style lang="css">
+/* 自定义右键菜单样式 */
+.custom-context-menu {
+  position: fixed;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10000;
+  min-width: 180px;
+  padding: 4px 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial, sans-serif;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+.menu-item span{
+  font-size: 14px;
+  margin-inline: calc(2* 4px);
+}
+.menu-item:hover {
+  background-color: #f5f5f5;
+}
+
+.menu-separator {
+  height: 1px;
+  background-color: #e8e8e8;
+  margin: 4px 0;
+}
+</style>
diff --git a/apps/web-ele/src/components/db-hst/dropdown.ts b/apps/web-ele/src/components/db-hst/dropdown.ts
index e2a3b17..78e8a34 100644
--- a/apps/web-ele/src/components/db-hst/dropdown.ts
+++ b/apps/web-ele/src/components/db-hst/dropdown.ts
@@ -13,22 +13,38 @@ const closeDropdown = () => {
 const openDropdown = (
   td: HTMLTableCellElement,
   value: unknown,
-  source: string[],
+  source: any[],
   onSelect: (opt: string) => void,
   isOptionDisabled?: (opt: string) => boolean,
+  onAfterSelect?: (oldValue: unknown, newValue: string, optData?: any) => void,
 ) => {
   closeDropdown()
   const menu = document.createElement('div')
   menu.className = 'ht-dropdown-menu'
   const frag = document.createDocumentFragment()
+  
   for (const opt of source) {
+    // 支持对象格式 {value, label} 和字符串格式
+    const optValue = typeof opt === 'object' && opt !== null ? opt.value : opt
+    const optLabel = typeof opt === 'object' && opt !== null ? opt.label : opt
+    
     const item = document.createElement('div')
     item.className = 'ht-dropdown-item'
-    item.textContent = opt
-    if (String(value) === String(opt)) item.classList.add('is-selected')
-    const disabled = isDisabled.value && isOptionDisabled?.(opt) === true
+    item.textContent = optLabel ?? ''
+    if (String(value) === String(optValue)) item.classList.add('is-selected')
+    const disabled = isDisabled.value && isOptionDisabled?.(String(optValue)) === true
     if (disabled) { item.classList.add('is-disabled'); item.setAttribute('aria-disabled', 'true') }
-    item.onclick = (e) => { e.stopPropagation(); if (disabled) return; onSelect(opt); closeDropdown() }
+    item.onclick = (e) => { 
+      e.stopPropagation(); 
+      if (disabled) return; 
+      onSelect(String(optValue)); 
+      // 调用选择后的回调，传递旧值、新值和完整数据
+      if (onAfterSelect) {
+        const optData = typeof opt === 'object' && opt !== null ? opt.data : undefined
+        onAfterSelect(value, String(optValue), optData)
+      }
+      closeDropdown() 
+    }
     frag.appendChild(item)
   }
   menu.appendChild(frag)
@@ -51,23 +67,71 @@ const openDropdown = (
   currentOnDocClick = (ev: MouseEvent) => { const target = ev.target as Node; if (currentDropdownEl && !currentDropdownEl.contains(target)) closeDropdown() }
   document.addEventListener('click', currentOnDocClick, true)
 }
+
 export function handlerDropdownRenderer(instance: any, td: HTMLTableCellElement, row: number, column: number, prop: string | number, value: any, cellProperties: any) {
   td.innerHTML = ''
+  
+  // 检查是否需要设置验证背景色
+  const cellMeta = instance.getCellMeta(row, column)
+  const isValid = cellMeta?.valid !== false
+  
+  // 如果单元格被标记为无效，设置红色背景
+  if (!isValid) {
+    td.style.backgroundColor = '#ffbeba' // 淡红色背景
+  } else {
+    td.style.backgroundColor = '' // 清除背景色
+  }
+  
   const wrapper = document.createElement('div')
   wrapper.className = 'ht-cell-dropdown'
   const valueEl = document.createElement('span')
   valueEl.className = 'ht-cell-value'
-  valueEl.textContent = value ?? ''
+  
+  // 基于列配置启用"唯一选择"禁用逻辑
+  isDisabled.value = Boolean(cellProperties?.isOnlySelect)
+  
+  //TODO 暂时性，后面要删除
+  // 如果 isOnlySelect 为 true，设置当前单元格为只读
+  const isReadOnly = isDisabled.value && value !== null && value !== undefined && String(value).trim() !== ''
+  if (isReadOnly) {
+    instance.setCellMeta(row, column, 'readOnly', true)
+    // 添加只读样式
+    wrapper.classList.add('is-readonly')
+    td.style.cursor = 'not-allowed'
+    td.style.opacity = '0.6'
+  } else {
+    instance.setCellMeta(row, column, 'readOnly', false)
+    td.style.cursor = 'pointer'
+    td.style.opacity = '1'
+  }
+  
+  const source: any[] = Array.isArray(cellProperties?.source)
+    ? cellProperties.source
+    : Array.isArray(cellProperties?.customDropdownSource)
+    ? cellProperties.customDropdownSource
+    : []
+  
+  // 根据 value 查找对应的 label 显示
+  let displayText = value ?? ''
+  if (value !== null && value !== undefined) {
+    const matchedOption = source.find(opt => {
+      const optValue = typeof opt === 'object' && opt !== null ? opt.value : opt
+      return String(optValue) === String(value)
+    })
+    if (matchedOption) {
+      displayText = typeof matchedOption === 'object' && matchedOption !== null 
+        ? matchedOption.label 
+        : matchedOption
+    }
+  }
+  
+  valueEl.textContent = displayText
   const caretEl = document.createElement('span')
   caretEl.className = 'ht-cell-caret'
   wrapper.appendChild(valueEl)
   wrapper.appendChild(caretEl)
   td.appendChild(wrapper)
-  const source: string[] = Array.isArray(cellProperties?.source)
-    ? cellProperties.source
-    : Array.isArray(cellProperties?.customDropdownSource)
-    ? cellProperties.customDropdownSource
-    : []
+  
   let disabledSet = new Set<string>()
   if (isDisabled.value) {
     const colValues = instance.getSourceDataAtCol(column) as unknown[]
@@ -75,6 +139,32 @@ export function handlerDropdownRenderer(instance: any, td: HTMLTableCellElement,
     disabledSet = new Set((Array.isArray(colValues) ? colValues : []).map(v => String(v)))
     disabledSet.delete(currentStr)
   } 
-  wrapper.onclick = (e) => { e.stopPropagation(); openDropdown(td, value, source, (opt) => instance.setDataAtCell(row, column, opt), (opt) => isDisabled.value && disabledSet.has(String(opt))) }
+  
+  //在 dropdown 的点击事件中阻止冒泡（推荐）
+  wrapper.onclick = (e) => { 
+    e.stopPropagation()
+    e.preventDefault()
+    //TODO 暂时性，后面要删除
+    // 如果是只读状态，不打开下拉框
+    if (isReadOnly) {
+      return
+    }
+    
+    const onAfterSelect = cellProperties?.onAfterSelect
+    openDropdown(
+      td, 
+      value, 
+      source, 
+      (opt) => instance.setDataAtCell(row, column, opt), 
+      (opt) => isDisabled.value && disabledSet.has(String(opt)),
+      onAfterSelect ? (oldValue, newValue, optData) => onAfterSelect(instance, row, column, oldValue, newValue, optData) : undefined
+    ) 
+  }
+  
+  // 阻止 mousedown 事件冒泡，防止触发 beforeOnCellMouseDown
+  wrapper.onmousedown = (e) => {
+    e.stopPropagation()
+  }
+  
   return td
 }
\ No newline at end of file
diff --git a/apps/web-ele/src/components/db-hst/index.vue b/apps/web-ele/src/components/db-hst/index.vue
index c3f7f9a..3670ef0 100644
--- a/apps/web-ele/src/components/db-hst/index.vue
+++ b/apps/web-ele/src/components/db-hst/index.vue
@@ -6,16 +6,28 @@ import { HotTable } from '@handsontable/vue3'
 import { registerLanguageDictionary, zhCN } from 'handsontable/i18n'
 import { registerAllModules } from 'handsontable/registry'
 import 'handsontable/styles/handsontable.css'
-import 'handsontable/styles/ht-theme-main.css'
+// import 'handsontable/styles/ht-theme-main.css'
+import 'handsontable/styles/ht-theme-classic.css';
 registerAllModules()
 registerLanguageDictionary(zhCN)
 import { handlerDropdownRenderer } from './dropdown'
 import { handlerTableRenderer } from './table'
+import { handlerDuplicateCodeRenderer } from './text'
 import { computeCodeColWidth,codeRenderer } from './tree'
+import ContextMenu from './contextmenu.vue'
+import { handleRowOperation } from '#/components/db-hst/tree'
 // import { sourceDataObject } from './mockData'
 // const language = ref('zh-CN')
 defineOptions({ name: 'DbHst' });
-const componentProps = defineProps<{ settings?: any }>()
+const componentProps = defineProps<{ 
+  settings?: any
+  contextMenuItems?: Array<{
+    key: string
+    name: string
+    callback?: (hotInstance: any) => void
+    separator?: boolean
+  }>
+}>()
 // 导入和注册插件和单元格类型
 // import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
 // import { registerPlugin, UndoRedo } from 'handsontable/plugins';
@@ -24,13 +36,15 @@ const componentProps = defineProps<{ settings?: any }>()
 // const tableHeight = computed(() => componentProps.height ?? 0)
 // const defaultData = ref<any[][]>(Array.from({ length: 30 }, () => Array(componentProps.columns?.length ?? 0).fill('')))
 const hotTableComponent = ref<any>(null)
-
+const selectedRow = ref<number | null>(null) // 记录当前选中的行
 const codeColWidth = ref<number>(120)
 
 
 // const colHeaders = ref<string[]>([])
 let defaultSettings = {
-  themeName: 'ht-theme-main',
+  // themeName: 'ht-theme-main',
+  themeName: 'ht-theme-classic',
+  
   language: 'zh-CN',
   // data: sourceDataObject,
   // colWidths: [100, 120, 100, 100, 100, 100],
@@ -40,7 +54,7 @@ let defaultSettings = {
   //   return (index + 1) * 40;
   // },
   // colWidths: undefined,
-  rowHeights: '23px',  // 固定行高  
+  rowHeights: 23,  // 固定行高  
   wordWrap: false,// 禁止单元格内容自动换行
 
   //manualColumnMove: true,
@@ -90,25 +104,69 @@ let defaultSettings = {
     
   //   return cellProperties;
   // },
-  modifyColWidth: (width: number, col: number) => {
-    const hot = hotInstance.value
-    if (!hot) return width
-    const codeCol = hot.propToCol('code')
-    // console.log('modifyColWidth',codeCol,width)
-    return col === codeCol ? (codeColWidth.value ?? width) : width
-  },
-  afterChange: (changes: any, source: string) => {
-    if (!changes || !hotInstance.value) return
-    if (source !== 'edit' && source !== 'Autofill' && source !== 'UndoRedo') return
-    const hot = hotInstance.value
-    const codeCol = hot.propToCol('code')
-    const hasCodeEdit = changes.some((c: any) => c && (c[1] === 'code' || c[1] === codeCol))
-    // console.log('afterChange',changes,hasCodeEdit, codeCol)
-    if (!hasCodeEdit) return
-    codeColWidth.value = computeCodeColWidth(hot)
-    // console.log('afterChange',codeColWidth.value)
-    hot.render()
-    // console.log('afterChange',codeColWidth.value)
+  // afterSelection(row1: number, _col1: number, _row2: number, _col2: number) {
+  //   const hot = this as any
+  //   if (selectedRow.value !== null && selectedRow.value !== row1) {
+  //     const colCount = hot.countCols()
+  //     for (let c = 0; c < colCount; c++) {
+  //       const meta = hot.getCellMeta(selectedRow.value, c)
+  //       const classes = (meta.className || '').split(' ').filter(Boolean)
+  //       const idx = classes.indexOf('row-highlight')
+  //       if (idx !== -1) classes.splice(idx, 1)
+  //       hot.setCellMeta(selectedRow.value, c, 'className', classes.join(' '))
+  //     }
+  //   }
+
+  //   selectedRow.value = row1
+
+  //   const colCount = hot.countCols()
+  //   for (let c = 0; c < colCount; c++) {
+  //     const meta = hot.getCellMeta(row1, c)
+  //     const classes = (meta.className || '').split(' ').filter(Boolean)
+  //     if (!classes.includes('row-highlight')) classes.push('row-highlight')
+  //     hot.setCellMeta(row1, c, 'className', classes.join(' '))
+  //   }
+
+  //   hot.render()
+  // },
+  //afterDeselect() {
+    // const hot = this as any
+    // if (selectedRow.value === null) return
+    // const colCount = hot.countCols()
+    // for (let c = 0; c < colCount; c++) {
+    //   const meta = hot.getCellMeta(selectedRow.value, c)
+    //   const classes = (meta.className || '').split(' ').filter(Boolean)
+    //   const idx = classes.indexOf('row-highlight')
+    //   if (idx !== -1) classes.splice(idx, 1)
+    //   hot.setCellMeta(selectedRow.value, c, 'className', classes.join(' '))
+    // }
+    // selectedRow.value = null
+    // hot.render()
+  //},
+  
+  // modifyColWidth(width: number, col: number) {
+  //   const hot = hotInstance.value
+  //   if (!hot) return width
+  //   const codeCol = hot.propToCol('code')
+  //   // console.log('modifyColWidth',codeCol,width)
+  //   return col === codeCol ? (codeColWidth.value ?? width) : width
+  // },
+  // afterChange(changes: any, source: string) {
+  //   if (!changes || !hotInstance.value) return
+  //   if (source !== 'edit' && source !== 'Autofill' && source !== 'UndoRedo') return
+  //   const hot = hotInstance.value
+  //   const codeCol = hot.propToCol('code')
+  //   const hasCodeEdit = changes.some((c: any) => c && (c[1] === 'code' || c[1] === codeCol))
+  //   // console.log('afterChange',changes,hasCodeEdit, codeCol)
+  //   if (!hasCodeEdit) return
+  //   codeColWidth.value = computeCodeColWidth(hot)
+  //   // console.log('afterChange',codeColWidth.value)
+  //   hot.render()
+  //   // console.log('afterChange',codeColWidth.value)
+  // },
+  afterOnCellContextMenu: () => {
+    // Handsontable 内置右键菜单打开后，关闭自定义菜单
+    contextMenuRef.value?.hideContextMenu?.()
   },
 }
 // 合并外部 settings 和默认配置
@@ -116,6 +174,12 @@ let hotSettings = {}
   // 保留必要的回调函数
 
 const hotInstance = ref<any>(null)
+const contextMenuRef = ref<any>(null)
+
+// 处理右键菜单事件
+const handleContextMenu = (event: MouseEvent) => {
+  contextMenuRef.value?.handleContextMenu(event)
+}
 
 onMounted(() => {
   hotInstance.value = hotTableComponent.value?.hotInstance
@@ -127,15 +191,17 @@ watch(
   () => componentProps.settings,
   (newSettings) => {
     if (!newSettings) return
+    
     const merged = {
       ...defaultSettings,
       ...newSettings,
     }
     Object.assign(hotSettings, merged)
     hotSettings = merged
+    
     // console.log(merged)
   },
-  {  immediate: true }
+  {  immediate: true,deep:true }
 )
 
 const loadData = (rows: any[][]) => {
@@ -143,12 +209,51 @@ const loadData = (rows: any[][]) => {
   if (!hotInstance.value) return
   // hotInstance.value.loadData(rows.length === 0?defaultData.value:rows)
   hotInstance.value.loadData(rows)
-  console.log('Source Data:', hotInstance.value.getSourceData());
+  //console.log('Source Data:', hotInstance.value.getSourceData());
 }
 
 const updateCodeColWidth = () => {
   if (!hotInstance.value) return
-  codeColWidth.value = computeCodeColWidth(hotInstance.value)
+  const newWidth = computeCodeColWidth(hotInstance.value)
+  
+  // 如果宽度没有变化，不需要更新
+  if (newWidth === codeColWidth.value) return
+  
+  codeColWidth.value = newWidth
+  
+  // 查找配置了 code: true 的列
+  const currentSettings = hotInstance.value.getSettings()
+  const columns = currentSettings.columns || []
+  const codeColIndex = columns.findIndex((col: any) => col.code === true)
+  
+  if (codeColIndex !== null && codeColIndex >= 0) {
+    // 获取当前列数
+    const colCount = hotInstance.value.countCols()
+    const currentColWidths = currentSettings.colWidths
+    
+    // 构建新的列宽数组
+    const newColWidths: number[] = []
+    for (let i = 0; i < colCount; i++) {
+      if (i === codeColIndex) {
+        newColWidths[i] = codeColWidth.value
+      } else {
+        // 获取其他列的当前宽度
+        if (Array.isArray(currentColWidths)) {
+          newColWidths[i] = currentColWidths[i] || 100
+        } else if (typeof currentColWidths === 'function') {
+          newColWidths[i] = 100
+        } else {
+          newColWidths[i] = currentColWidths || 100
+        }
+      }
+    }
+    console.log(newColWidths)
+    // 更新列宽
+    hotInstance.value.updateSettings({
+      colWidths: newColWidths
+    })
+  }
+  
   hotInstance.value.render()
 }
 defineExpose({ loadData, hotTableComponent, hotInstance, updateCodeColWidth, codeColWidth })
@@ -156,11 +261,15 @@ defineExpose({ loadData, hotTableComponent, hotInstance, updateCodeColWidth, cod
 
 Handsontable.renderers.registerRenderer("db-table", handlerTableRenderer);
 Handsontable.renderers.registerRenderer("db-dropdown", handlerDropdownRenderer);
-
+Handsontable.renderers.registerRenderer("db-duplicate", handlerDuplicateCodeRenderer);
 </script>
 
 <template>
-   <hot-table  ref="hotTableComponent" :settings="hotSettings"></hot-table>
+  <div @contextmenu="handleContextMenu">
+    <hot-table ref="hotTableComponent" :settings="hotSettings"></hot-table>
+    <ContextMenu ref="contextMenuRef" :hotTableComponent="hotTableComponent" :menuItems="componentProps.contextMenuItems" />
+  </div>
+   
   <!-- <div id="hot-dialog-container" style="display:none">
     <div class="ht-dialog-content">
       <h3>执行操作</h3>
@@ -214,14 +323,14 @@ Handsontable.renderers.registerRenderer("db-dropdown", handlerDropdownRenderer);
 .ht_master .wtHolder::-webkit-scrollbar-thumb:hover {
     background-color: #555;
 } */
-
+/* 滚动条width */
 .ht_master .wtHolder{
   /* overflow: hidden !important; */
     scrollbar-width: thin;
     scrollbar-color: #a6a8ac #ecf0f1;
 }
 /* dropdown */
-.ht-cell-dropdown { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; box-sizing: border-box; height: 100%; }
+.ht-cell-dropdown { display: flex; align-items: center; justify-content: center; width: 100%; position: relative; box-sizing: border-box; height: 100%; }
 .ht-cell-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ht-cell-value:empty::after { content: "\200b"; }
 .ht-cell-caret { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #979797; }
@@ -283,66 +392,86 @@ Handsontable.renderers.registerRenderer("db-dropdown", handlerDropdownRenderer);
 .hot-dropdown-search-input { width: 100%; padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; outline: none; transition: border-color 0.2s; }
 .hot-dropdown-search-input:focus { border-color: #3b82f6; }
 .hot-dropdown-table-wrapper { overflow: auto; flex: 1; }
-.hot-dropdown-table { width: 100%; border-collapse: collapse; font-size: 12px; }
-.hot-dropdown-table thead th { position: sticky; top: 0; background: #f9fafb; font-weight: 600; color: #374151; padding: 8px; border-bottom: 1px solid #e5e7eb; text-align: left; }
+.hot-dropdown-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: center; }
+.hot-dropdown-table thead th { position: sticky; top: 0; background: #f9fafb; font-weight: 600; color: #374151; padding: 8px; border-bottom: 1px solid #e5e7eb; text-align: center; }
 .hot-dropdown-table tbody td { padding: 8px; border-bottom: 1px solid #f3f4f6; color: #374151; }
 .hot-dropdown-row { cursor: pointer; }
 .hot-dropdown-row:hover { background: #f3f4f6; }
 
-/** 指引线line */
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty{
-  position: relative;
-    display: inline-block;
-    width: 5px;
-    height: 1px;
-    order: -2;
+
+/* 整行高亮样式 */
+.row-highlight {
+  background-color: #e9ecfc !important; /* 浅蓝色背景 */
 }
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty:last-child {
-    padding-left: calc(var(--ht-icon-size) + 5px);
+
+/* 确保 Handsontable 右键菜单在 ElDialog 之上 - 必须是全局样式 */
+.handsontable.htDropdownMenu:not(.htGhostTable),
+.handsontable.htContextMenu:not(.htGhostTable),
+.handsontable.htFiltersConditionsMenu:not(.htGhostTable) {
+  z-index: 9999 !important;
 }
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty::before{
-  content: '';
-  position: absolute;
-  top: -13px;
-  height: 26px;
-  width: 1px;
-  border-left: 1px solid #ababab;
+
+.ht-id-cell {
+  position: relative !important;
+  z-index: 3 !important;
+  overflow: visible !important;
 }
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty::after{
-  content: '';
+
+.ht-id-icon {
   position: absolute;
   top: 0px;
-  width: 16px;
-  height: 1px;
-  border-top: 1px solid #ababab;
-}
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty{
-      padding-left: 7px;
+  right: -14px;
+  width: 14px;
+  height: 14px;
+  display: none;
+  cursor: pointer;
+  z-index: 4;
 }
 
-/* 最后一个 ht_nestingLevel_empty（rowHeader 前面的那个） */
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty + .rowHeader {
-  /* 通过相邻选择器反向选择 */
-  padding-left: 10px !important
-}
-/* 选择后面还有 ht_nestingLevel_empty 的元素（不是最后一个） */
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty:has(+ .ht_nestingLevel_empty)::before {
-  /* 你的样式 */
-  /* height: 0px; */
-}
-/* 选择后面还有 ht_nestingLevel_empty 的元素（不是最后一个） */
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty:has(+ .ht_nestingLevel_empty)::after {
-  /* 你的样式 */
-  width: 0px !important;
+.ht-id-cell.current .ht-id-icon,
+.ht-id-cell.area .ht-id-icon {
+  display: inline-flex;
 }
 
-/* 或者用这个：选择后面不是 ht_nestingLevel_empty 的那个 */
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty:not(:has(+ .ht_nestingLevel_empty))::before {
-  /* height: 13px; */
+.handsontable {
+  --ht-tree-line-color: #7c7c7c;
+  --ht-tree-line-style: solid;
+  --ht-tree-line-width: 1px;
+  --ht-tree-indent: 14px;
+}
+/** 新树形连接线 */
+.handsontable .ht_treeCell {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
 }
 
-tbody[role="rowgroup"] tr[role="row"] td .ht_nestingLevel_empty:not(:has(+ .ht_nestingLevel_empty))::after {
-  /* 你的特殊样式 */
-  
+.handsontable .ht_treeIndentLayer {
+  flex: 0 0 auto;
+  height: 100%;
 }
+
+.handsontable .ht_treeContent {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.handsontable .ht_treeToggleSpacer {
+  display: inline-block;
+  width: var(--ht-icon-size);
+  height: var(--ht-icon-size);
+  flex: 0 0 auto;
+}
+
+
+.handsontable .ht_treeContent {
+  min-width: 0;
+}
+
+/* 整行高亮样式 */
+.handsontable td.ht_rowHighlight:not(.current):not(.area) {
+  background-color: #e9ecfc;
+}
+
 </style>
diff --git a/apps/web-ele/src/components/db-hst/nestedRows.ts b/apps/web-ele/src/components/db-hst/nestedRows.ts
new file mode 100644
index 0000000..b1f526d
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/nestedRows.ts
@@ -0,0 +1,490 @@
+import { useDebounceFn } from '@vueuse/core'
+import { ref } from 'vue'
+export type TreeNode = Record<string, unknown> & {
+  __id?: string
+  __children?: TreeNode[]
+  level?: string | null
+}
+
+type FlatRowMeta = {
+  id: string
+  hasChildren: boolean
+  lineKey: string
+  path: string
+  node: TreeNode
+  siblings: TreeNode[]
+  indexWithinParent: number
+  depth: number
+}
+
+type FlatTreeIndex = {
+  root: TreeNode[]
+  rows: TreeNode[]
+  metaByRow: FlatRowMeta[]
+}
+
+type TreeLinePaint = {
+  key: string
+  width: string
+  backgroundImage: string
+  backgroundSize: string
+  backgroundPosition: string
+}
+
+type UseParentChildLineOptions = {
+  getHotInstance: () => any
+}
+
+export const useParentChildLineNestedRowsFalse = (options: UseParentChildLineOptions) => {
+  const treeLinePaintCache = new Map<string, TreeLinePaint>()
+  const collapsedNodeIds = ref(new Set<string>())
+  const sourceTreeData = ref<TreeNode[]>([])
+  const flatIndex = ref<FlatTreeIndex | null>(null)
+
+  let nextNodeId = 1
+
+  const maybeBumpNextNodeId = (id: string) => {
+    if (!/^\d+$/.test(id)) return
+    const num = Number(id)
+    if (!Number.isSafeInteger(num)) return
+    if (num >= nextNodeId) nextNodeId = num + 1
+  }
+
+  const getNodeId = (node: TreeNode) => {
+    if (node.__id) {
+      maybeBumpNextNodeId(node.__id)
+      return node.__id
+    }
+    const id = String(nextNodeId++)
+    node.__id = id
+    return id
+  }
+
+  const normalizeNode = (node: TreeNode): TreeNode => {
+    getNodeId(node)
+    if (!Array.isArray(node.__children)) node.__children = []
+    return node
+  }
+
+  const buildFlatTreeIndex = (root: TreeNode[], collapsedIds: Set<string>): FlatTreeIndex => {
+    const rows: TreeNode[] = []
+    const metaByRow: FlatRowMeta[] = []
+
+    const visit = (list: TreeNode[], depth: number, flagsStr: string, basePath: string) => {
+      for (let index = 0; index < list.length; index++) {
+        const node = normalizeNode(list[index])
+        const id = getNodeId(node)
+
+        const isLast = index === list.length - 1
+        const children = node.__children ?? []
+        const hasChildren = children.length > 0
+        const path = depth === 0 ? String(index) : `${basePath}-${index + 1}`
+        const lineKey = depth <= 0 ? '0' : `${depth}|${isLast ? 1 : 0}|${flagsStr}`
+
+        rows.push(node)
+        metaByRow.push({
+          id,
+          depth,
+          hasChildren,
+          lineKey,
+          path,
+          node,
+          siblings: list,
+          indexWithinParent: index,
+        })
+
+        if (hasChildren && !collapsedIds.has(id)) {
+          const nextFlagsStr = depth >= 1 ? `${flagsStr}${isLast ? '0' : '1'}` : flagsStr
+          visit(children, depth + 1, nextFlagsStr, path)
+        }
+      }
+    }
+
+    visit(root, 0, '', '')
+    return { root, rows, metaByRow }
+  }
+
+  const getTreeLinePaint = (key: string) => {
+    const cached = treeLinePaintCache.get(key)
+    if (cached) return cached
+
+    if (key === '0') {
+      const empty = { key, width: '0px', backgroundImage: '', backgroundSize: '', backgroundPosition: '' }
+      treeLinePaintCache.set(key, empty)
+      return empty
+    }
+
+    const firstSep = key.indexOf('|')
+    const secondSep = key.indexOf('|', firstSep + 1)
+    const level = Number(key.slice(0, firstSep))
+    const isLast = key.slice(firstSep + 1, secondSep) === '1'
+    const flagsStr = key.slice(secondSep + 1)
+
+    const color = 'var(--ht-tree-line-color)'
+    const width = 'var(--ht-tree-line-width)'
+    const indent = 'var(--ht-tree-indent)'
+
+    const images: string[] = []
+    const sizes: string[] = []
+    const positions: string[] = []
+
+    for (let i = 0; i < flagsStr.length; i++) {
+      if (flagsStr.charCodeAt(i) !== 49) continue
+      images.push(`linear-gradient(${color}, ${color})`)
+      sizes.push(`${width} 100%`)
+      positions.push(`calc(${indent} * ${i} + (${indent} / 2)) 0`)
+    }
+
+    const selfDepth = level - 1
+    images.push(`linear-gradient(${color}, ${color})`)
+    sizes.push(`${width} ${isLast ? '50%' : '100%'}`)
+    positions.push(`calc(${indent} * ${selfDepth} + (${indent} / 2)) 0`)
+
+    images.push(`linear-gradient(to right, ${color}, ${color})`)
+    sizes.push(`calc(${indent} / 2) ${width}`)
+    positions.push(`calc(${indent} * ${selfDepth} + (${indent} / 2)) 50%`)
+
+    const paint = {
+      key,
+      width: `calc(var(--ht-tree-indent) * ${level})`,
+      backgroundImage: images.join(', '),
+      backgroundSize: sizes.join(', '),
+      backgroundPosition: positions.join(', '),
+    }
+    if (treeLinePaintCache.size > 5000) treeLinePaintCache.clear()
+    treeLinePaintCache.set(key, paint)
+    return paint
+  }
+
+  const getTreeCellDom = (TD: HTMLTableCellElement) => {
+    const currentTreeCell = TD.firstElementChild as HTMLElement | null
+    if (currentTreeCell && currentTreeCell.classList.contains('ht_treeCell')) {
+      const indentLayer = currentTreeCell.firstElementChild as HTMLElement
+      const content = currentTreeCell.lastElementChild as HTMLElement
+      return {
+        treeCell: currentTreeCell,
+        indentLayer,
+        content,
+        toggleEl: content.firstElementChild as HTMLElement,
+        textEl: content.lastElementChild as HTMLElement,
+      }
+    }
+
+    const treeCell = document.createElement('div')
+    treeCell.className = 'ht_treeCell'
+    treeCell.style.pointerEvents = 'none'
+    const indentLayer = document.createElement('span')
+    indentLayer.className = 'ht_treeIndentLayer'
+    // indentLayer 不需要交互，让事件穿透
+    //indentLayer.style.pointerEvents = 'none'
+
+    const content = document.createElement('div')
+    content.className = 'ht_treeContent'
+    // content 需要响应点击（折叠/展开按钮），但允许右键菜单冒泡
+    //content.style.pointerEvents = 'none'
+
+    const toggleSpacer = document.createElement('span')
+    toggleSpacer.className = 'ht_treeToggleSpacer'
+    const text = document.createElement('span')
+    text.className = 'rowHeader'
+
+    content.appendChild(toggleSpacer)
+    content.appendChild(text)
+    treeCell.appendChild(indentLayer)
+    treeCell.appendChild(content)
+    TD.replaceChildren(treeCell)
+
+    return {
+      treeCell,
+      indentLayer,
+      content,
+      toggleEl: toggleSpacer,
+      textEl: text,
+    }
+  }
+
+  const rebuildDataFromTree = (hotOverride?: any) => {
+    const index = buildFlatTreeIndex(sourceTreeData.value, collapsedNodeIds.value)
+    flatIndex.value = index
+    const hot = hotOverride ?? options.getHotInstance()
+    if (hot) hot.loadData(index.rows)
+  }
+
+  const toggleNodeCollapsed = (nodeId: string) => {
+    if (collapsedNodeIds.value.has(nodeId)) collapsedNodeIds.value.delete(nodeId)
+    else collapsedNodeIds.value.add(nodeId)
+    rebuildDataFromTree()
+  }
+
+  const normalizeTreeData = (input: unknown): TreeNode[] => {
+    const root = Array.isArray(input)
+      ? (input as TreeNode[])
+      : input && typeof input === 'object'
+        ? [input as TreeNode]
+        : []
+    const stack: unknown[] = [...root]
+
+    while (stack.length) {
+      const current = stack.pop()
+      if (!current || typeof current !== 'object') continue
+      const node = current as TreeNode
+
+      const maybeChildren = (node as any).__children
+      if (!Array.isArray(maybeChildren)) {
+        const altChildren = (node as any).children
+        node.__children = Array.isArray(altChildren) ? (altChildren as TreeNode[]) : []
+      } else {
+        node.__children = maybeChildren as TreeNode[]
+      }
+
+      for (let i = node.__children.length - 1; i >= 0; i--) {
+        const child = node.__children[i]
+        if (!child || typeof child !== 'object') node.__children.splice(i, 1)
+      }
+
+      normalizeNode(node)
+      for (let i = 0; i < node.__children.length; i++) stack.push(node.__children[i])
+    }
+
+    return root
+  }
+
+  const load = (data: unknown) => {
+    collapsedNodeIds.value.clear()
+    treeLinePaintCache.clear()
+    nextNodeId = 1
+    sourceTreeData.value = normalizeTreeData(data)
+    rebuildDataFromTree()
+  }
+
+  const createNode = (dataSchema: any): TreeNode => {
+    const node = {
+      ...dataSchema,
+      __children: [],
+    } as TreeNode
+    normalizeNode(node)
+    return node
+  }
+
+  const getSelectedVisualRowRange = (hot: any): { startRow: number; amount: number } | null => {
+    const sel = hot.getSelectedLast?.() ?? hot.getSelected?.()?.[0]
+    if (!sel) return null
+
+    const [r1, , r2] = sel as [number, number, number, number]
+    const startRow = Math.min(r1, r2)
+    const endRow = Math.max(r1, r2)
+    return { startRow, amount: endRow - startRow + 1 }
+  }
+
+  const collectDescendantIds = (node: TreeNode): string[] => {
+    const ids: string[] = []
+    const stack: TreeNode[] = [...(node.__children ?? [])]
+    while (stack.length) {
+      const current = stack.pop()!
+      if (current.__id) ids.push(current.__id)
+      if (Array.isArray(current.__children) && current.__children.length) stack.push(...current.__children)
+    }
+    return ids
+  }
+
+  const handleRowOperation = (hot: any, type: 'above' | 'below' | 'child'| 'append'|'delete') => {
+    if (!hot) return
+    const index = flatIndex.value
+    if (!index) return
+
+    if (type === 'append') {
+      index.root.push(createNode(hot.getSettings().dataSchema))
+      rebuildDataFromTree(hot)
+      return
+    }
+
+    if (type === 'delete') {
+      const range = getSelectedVisualRowRange(hot)
+      if (!range) return
+
+      const selected = index.metaByRow.slice(range.startRow, range.startRow + range.amount)
+      const uniqueById = new Map<string, FlatRowMeta>()
+      for (const meta of selected) uniqueById.set(meta.id, meta)
+
+      const metas = [...uniqueById.values()]
+      metas.sort((a, b) => b.depth - a.depth)
+
+      const collapsed = collapsedNodeIds.value
+      const bySiblings = new Map<TreeNode[], FlatRowMeta[]>()
+      for (const meta of metas) {
+        const list = bySiblings.get(meta.siblings)
+        if (list) list.push(meta)
+        else bySiblings.set(meta.siblings, [meta])
+      }
+
+      for (const meta of metas) {
+        for (const descendantId of collectDescendantIds(meta.node)) collapsed.delete(descendantId)
+        collapsed.delete(meta.id)
+      }
+
+      for (const [siblings, list] of bySiblings.entries()) {
+        const sorted = [...list].sort((a, b) => b.indexWithinParent - a.indexWithinParent)
+        for (const meta of sorted) siblings.splice(meta.indexWithinParent, 1)
+      }
+
+      rebuildDataFromTree(hot)
+      return
+    }
+
+    const selection = hot.getSelectedLast?.() ?? hot.getSelected?.()?.[0]
+    if (!selection) return
+    const [r1] = selection as [number, number, number, number]
+    const meta = index.metaByRow[r1]
+    if (!meta) return
+
+    if (type === 'child') {
+      meta.node.__children ??= []
+      meta.node.__children.push(createNode(hot.getSettings().dataSchema))
+      collapsedNodeIds.value.delete(meta.id)
+      rebuildDataFromTree(hot)
+      return
+    }
+
+    meta.siblings.splice(type === 'above' ? meta.indexWithinParent : meta.indexWithinParent + 1, 0, createNode(hot.getSettings().dataSchema))
+    rebuildDataFromTree(hot)
+  }
+
+  const codeRenderer = (
+    hot: any,
+    TD: HTMLTableCellElement,
+    row: number,
+    col: number,
+    prop: any,
+    value: any,
+    cellProperties: any
+  ) => {
+     // 检查是否需要设置验证背景色
+    const cellMeta = hot.getCellMeta(row, col)
+    const isValid = cellMeta?.valid !== false
+
+    // 如果单元格被标记为无效，设置红色背景
+    if (!isValid) {
+      TD.style.backgroundColor = '#ffbeba' // 淡红色背景
+    } else {
+      //TD.style.backgroundColor = cellProperties.className == "row-highlight"?'#e9ecfc':'' // 清除背景色
+    }
+
+    const meta = flatIndex.value?.metaByRow?.[row]
+    const key = meta?.lineKey ?? '0'
+
+    const { indentLayer, content, toggleEl, textEl } = getTreeCellDom(TD)
+    if (indentLayer.dataset.paintKey !== key) {
+      indentLayer.dataset.paintKey = key
+      const paint = getTreeLinePaint(key)
+      indentLayer.style.width = paint.width
+      indentLayer.style.backgroundImage = paint.backgroundImage
+      indentLayer.style.backgroundSize = paint.backgroundSize
+      indentLayer.style.backgroundPosition = paint.backgroundPosition
+      indentLayer.style.backgroundRepeat = paint.backgroundImage ? 'no-repeat' : ''
+    }
+
+    if (meta?.hasChildren && meta?.id) {
+      const isCollapsed = collapsedNodeIds.value.has(meta.id)
+      const needsButton = toggleEl.tagName !== 'DIV' || !toggleEl.classList.contains('ht_nestingButton')
+      const btn = needsButton ? document.createElement('div') : toggleEl
+      btn.className = `ht_nestingButton ${isCollapsed ? 'ht_nestingExpand' : 'ht_nestingCollapse'}`
+      btn.dataset.nodeId = meta.id
+      // 确保按钮可以响应点击事件
+      btn.style.pointerEvents = 'auto'
+      if (!(btn as any).__htTreeToggleBound) {
+        ;(btn as any).__htTreeToggleBound = true
+        btn.addEventListener('mousedown', (ev) => {
+          ev.stopPropagation()
+          ev.preventDefault()
+          const nodeId = (ev.currentTarget as HTMLElement | null)?.dataset.nodeId
+          if (!nodeId) return
+          toggleNodeCollapsed(nodeId)
+        })
+      }
+      if (needsButton) content.replaceChild(btn, toggleEl)
+    } else {
+      const needsSpacer = toggleEl.tagName !== 'SPAN' || !toggleEl.classList.contains('ht_treeToggleSpacer')
+      if (needsSpacer) {
+        const spacer = document.createElement('span')
+        spacer.className = 'ht_treeToggleSpacer'
+        content.replaceChild(spacer, toggleEl)
+      }
+    }
+
+    textEl.textContent = value == null ? '' : String(value)
+
+    return TD
+  }
+
+  const levelRenderer = (
+    hot: any,
+    TD: HTMLTableCellElement,
+    row: number,
+    col: number,
+    prop: any,
+    value: any,
+    cellProperties: any
+  ) => {
+    TD.textContent = flatIndex.value?.metaByRow?.[row]?.path ?? ''
+    return TD
+  }
+  const initSchema = (columns: any[]) => {
+    let rowSchema: any = {__id:null, level: null, __children: []}
+    // 根据 columns 的 data 字段生成对象结构
+    columns.forEach((col: any) => {
+      if (col.data && col.data !== 'level' && col.data !== '__children'&& col.data !== '__id') {
+        rowSchema[col.data] = null
+      }
+    })
+    return rowSchema
+  }
+
+  //把最后一次选中的行重新选回来,保持高亮
+  const highlightDeselect = (_this: any, coords: any) => {
+    if (coords !== null) queueMicrotask(() => _this.selectCell(coords?.row, coords?.col))
+  }
+
+  return {
+    load,
+    initSchema,
+    highlightDeselect,
+    codeRenderer,
+    levelRenderer,
+    handleRowOperation,
+    flatIndex,
+  }
+}
+
+
+///当设置 manualColumnResize: true 时，双击列边界触发自动适应列宽的方法是 autoColumnSize 插件。
+function applyDblClickAutoFit (hot: any, visualCol: number) {
+  const autoFit = useDebounceFn(()=>{
+    if (!hot || !Number.isInteger(visualCol)) return
+    const manualColumnResize = hot.getPlugin?.('manualColumnResize')
+    if (!manualColumnResize?.setManualSize) return
+
+    const baseWidth = hot.getColWidth?.(visualCol) ?? 0
+    const hookedWidth = hot.runHooks?.('beforeColumnResize', baseWidth, visualCol, true)
+    const newWidth = typeof hookedWidth === 'number' ? hookedWidth : baseWidth
+
+    manualColumnResize.setManualSize(visualCol, newWidth)
+    manualColumnResize.saveManualColumnWidths?.()
+    hot.runHooks?.('afterColumnResize', newWidth, visualCol, true)
+    hot.view?.adjustElementsSize?.()
+    hot.render?.()
+  },300)
+  autoFit()
+}
+export function applyAutoFitColum (hot: any, changes: any[]) {
+  const columns = hot.getSettings?.().columns
+  for (const change of changes) {
+      const [, prop, oldValue, newValue] = change
+      if (!columns || !Array.isArray(columns)) continue
+      const visualCol = columns.findIndex((col) => col?.autoWidth === true && col?.data === prop)
+      if (visualCol < 0) continue
+      if (oldValue === newValue) continue
+      applyDblClickAutoFit(hot, visualCol)
+      console.log('scheduleDblClickAutoFit')
+      break
+    }
+}
diff --git a/apps/web-ele/src/components/db-hst/popover.ts b/apps/web-ele/src/components/db-hst/popover.ts
new file mode 100644
index 0000000..059b684
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/popover.ts
@@ -0,0 +1,169 @@
+import Handsontable from 'handsontable'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
+
+type SelectRenderDeps = {
+  visible: Ref<boolean>
+  buttonRef: Ref<HTMLElement | null | undefined>
+}
+
+// 设置全局点击监听器的 Hook
+export const usePopoverClickOutside = (
+  visible: Ref<boolean>,
+  onClickOutside: () => void
+) => {
+  const handler = (event: PointerEvent) => {
+    visible.value = false
+    onClickOutside()
+  }
+  onMounted(() => {
+    document.addEventListener('pointerdown', handler, true)
+  })
+
+  onUnmounted(() => {
+    document.removeEventListener('pointerdown', handler, true)
+  })
+
+  return handler
+}
+
+const debounce = <T extends (...args: any[]) => void>(func: T, wait: number) => {
+  let timeout: ReturnType<typeof setTimeout> | undefined
+  return function (this: unknown, ...args: Parameters<T>) {
+    const context = this
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      func.apply(context, args)
+    }, wait)
+  }
+}
+
+export const createPopoverCellRenderer = ({ visible, buttonRef }: SelectRenderDeps) => {
+  const openPopover = (container: HTMLElement, virtualEl: HTMLElement) => {
+    buttonRef.value = virtualEl
+    visible.value = true
+  }
+  return (
+    instance: Handsontable,
+    td: HTMLTableCellElement,
+    row: number,
+    col: number,
+    prop: any,
+    value: any,
+    cellProperties: any
+  ) => {
+    const rowData = instance.getSourceDataAtRow(row)
+    //parent存在并ture时，或者，没有parent对象时
+    if((rowData.hasOwnProperty('parent') && rowData?.parent) || !rowData.hasOwnProperty('parent')){
+        
+      td.innerHTML = ''
+
+      const container = document.createElement('div')
+      container.style.display = 'flex'
+      container.style.alignItems = 'center'
+      container.style.justifyContent = 'space-between'
+      container.style.width = '100%'
+      container.style.height = '100%'
+
+      const input = document.createElement('input')
+      input.type = 'text'
+      input.value = value || ''
+      input.style.flex = '1'
+      input.style.border = 'none'
+      input.style.outline = 'none'
+      input.style.background = 'transparent'
+      input.style.padding = '0'
+      input.style.width = '100%'
+      input.style.fontSize = 'inherit'
+      input.style.fontFamily = 'inherit'
+
+      input.setAttribute('data-cell-row', row.toString())
+      input.setAttribute('data-cell-col', col.toString())
+
+      input.addEventListener('keydown', (e) => {
+        e.stopPropagation()
+      })
+      input.addEventListener('keyup', (e) => {
+        e.stopPropagation()
+      })
+      input.addEventListener('keypress', (e) => {
+        e.stopPropagation()
+      })
+      input.addEventListener('mousedown', (e) => {
+        e.stopPropagation()
+      })
+      input.addEventListener('click', (e) => {
+        e.stopPropagation()
+        openPopover(container, input)
+      })
+
+      const debouncedInputHandler = debounce((newValue: string) => {
+        console.log(`输入变化（防抖后） - 行: ${row}, 列: ${col}, 新值: ${newValue}`)
+
+        openPopover(container, input)
+
+        if (cellProperties.inputCallback && typeof cellProperties.inputCallback === 'function') {
+          const rowData = (instance as any).getSourceDataAtRow(row)
+          cellProperties.inputCallback(row, col, prop, newValue, rowData, instance, td)
+        }
+      }, 300)
+
+      input.addEventListener('input', (e) => {
+        const target = e.target as HTMLInputElement
+        const newValue = target.value
+
+        console.log(`输入中 - 行: ${row}, 列: ${col}, 新值: ${newValue}`)
+
+        debouncedInputHandler(newValue)
+      })
+      input.addEventListener('focus', () => {
+        console.log(`输入框获得焦点 - 行: ${row}, 列: ${col}`)
+        
+        openPopover(container, input)
+
+        if (cellProperties.focusCallback && typeof cellProperties.focusCallback === 'function') {
+          const rowData = (instance as any).getSourceDataAtRow(row)
+          cellProperties.focusCallback(row, col, prop, input.value, rowData, instance, td)
+        }
+      })
+      
+      
+
+      input.addEventListener('blur', () => {
+        console.log(`输入框失焦 - 行: ${row}, 列: ${col}, 最终值: ${input.value}`)
+      })
+
+      const searchIcon = document.createElement('span')
+      searchIcon.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.35-4.35"></path>
+    </svg>`
+      searchIcon.style.cursor = 'pointer'
+      searchIcon.style.marginLeft = '5px'
+      searchIcon.style.fontSize = '14px'
+      searchIcon.style.flexShrink = '0'
+
+      searchIcon.addEventListener('click', (e) => {
+        e.stopPropagation()
+        console.log(`搜索图标被点击 - 行: ${row}, 列: ${col}, 值: ${input.value}`)
+
+        openPopover(container, searchIcon)
+
+        if (cellProperties.selectCallback && typeof cellProperties.selectCallback === 'function') {
+          const rowData = (instance as any).getSourceDataAtRow(row)
+          cellProperties.selectCallback(row, col, prop, input.value, rowData, instance, td)
+        }
+      })
+
+      container.appendChild(input)
+      container.appendChild(searchIcon)
+      td.appendChild(container)
+    }else{
+      td.innerHTML = value || ''
+    }
+    
+    
+
+    return td
+  }
+}
diff --git a/apps/web-ele/src/components/db-hst/popover.vue b/apps/web-ele/src/components/db-hst/popover.vue
new file mode 100644
index 0000000..c22e7dc
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/popover.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElPopover, ElTableV2 } from 'element-plus'
+import type { PopoverInstance, RowEventHandlers } from 'element-plus'
+
+interface Props {
+  visible: boolean
+  buttonRef: HTMLElement | null | undefined
+  columns: any[]
+  data: any[]
+  rowEventHandlers?: RowEventHandlers
+  width?: number
+  height?: number
+  popperHeight?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 955,
+  height: 350,
+  popperHeight: '380px'
+})
+
+const emit = defineEmits<{
+  'end-reached': []
+}>()
+
+const popoverRef = ref<PopoverInstance>()
+
+// 暴露 popoverRef 供父组件调用
+defineExpose({ popoverRef })
+</script>
+
+<template>
+  <ElPopover
+    ref="popoverRef"
+    :virtual-ref="buttonRef"
+    virtual-triggering
+    :visible="visible"
+    placement="bottom"
+    :width="width"
+    :popper-style="{ height: popperHeight }"
+  >
+    <ElTableV2
+      :columns="columns"
+      :data="data"
+      :width="width - 25"
+      :height="height"
+      fixed
+      :row-height="25"
+      :header-height="25"
+      :row-event-handlers="rowEventHandlers"
+      :cell-props="{
+        style: {
+          background: 'transparent !important'
+        }
+      }"
+      :teleported="false"
+      @end-reached="emit('end-reached')"
+    />
+  </ElPopover>
+</template>
diff --git a/apps/web-ele/src/components/db-hst/table.ts b/apps/web-ele/src/components/db-hst/table.ts
index 5f18bc6..3de748d 100644
--- a/apps/web-ele/src/components/db-hst/table.ts
+++ b/apps/web-ele/src/components/db-hst/table.ts
@@ -4,31 +4,62 @@ let currentAnchor: { instance: any; row: number; col: number; td: HTMLTableCellE
 
 const clamp = (x: number, min: number, max: number) => (x < min ? min : x > max ? max : x)
 
+/**
+ * 获取嵌套属性值的辅助函数
+ * @param obj 对象
+ * @param path 属性路径，如 'calcBase.formula'
+ * @returns 属性值
+ */
+const getNestedValue = (obj: any, path: string): any => {
+  if (!path || !obj) return ''
+  
+  const keys = path.split('.')
+  let value = obj
+  
+  for (const key of keys) {
+    if (value === null || value === undefined) return ''
+    value = value[key]
+  }
+  
+  return value ?? ''
+}
+
 /**
  * 创建表格数据结构的辅助函数
  * @param dataSource 数据源数组
  * @param fieldKeys 字段键数组，按顺序对应表格列
- * @param getLabelFn 获取标签的函数
+ * @param getDisplayText 获取显示文本的函数
  * @returns 格式化后的表格行HTML和数据属性
  */
 export function createTableDataStructure(
   dataSource: any[],
   fieldKeys: string[],
-  getLabelFn?: (item: any) => string
+  getDisplayText?: (item: any) => string
 ) {
-  const getLabel = getLabelFn ?? ((x: any) => x?.name ?? '')
+  const getLabel = getDisplayText ?? ((x: any) => x?.name ?? '')
   
   return dataSource.map(item => {
-    // 动态生成单元格
-    const cells = fieldKeys.map(key => `<td>${String(item?.[key] ?? '')}</td>`).join('')
+    // 动态生成单元格 - 支持嵌套属性
+    const cells = fieldKeys.map(key => {
+      const value = getNestedValue(item, key)
+      return `<td>${String(value)}</td>`
+    }).join('')
     
-    // 动态生成 data 属性
+    // 动态生成 data 属性 - 支持嵌套属性
     const dataAttrs = fieldKeys
-      .map(key => `data-${key.toLowerCase()}="${String(item?.[key] ?? '')}"`)
+      .map(key => {
+        const value = getNestedValue(item, key)
+        // 将嵌套路径转换为有效的 data 属性名，如 'calcBase.formula' -> 'calcbase-formula'
+        const attrName = key.toLowerCase().replace(/\./g, '-')
+        return `data-${attrName}="${String(value)}"`
+      })
       .join(' ')
     
+    // 将完整的 item 数据序列化存储
+    const itemDataJson = JSON.stringify(item).replace(/"/g, '&quot;')
+    
     return {
-      html: `<tr class="hot-dropdown-row" data-label="${String(getLabel(item) ?? '')}" ${dataAttrs}>${cells}</tr>`,
+      html: `<tr class="hot-dropdown-row" data-label="${String(getLabel(item) ?? '')}" data-item="${itemDataJson}" ${dataAttrs}>${cells}</tr>`,
       data: item
     }
   })
@@ -93,21 +124,18 @@ export function handlerTableRenderer(instance: any, td: HTMLTableCellElement, ro
     return el
   }
 
-  const labelFn: ((x: any) => string) | undefined = cellProperties.customGetLabel
-
   const display = createEl('div', 'hot-dropdown-display')
-  const labelText = typeof value === 'string' ? value : labelFn?.(value) ?? (value && typeof value === 'object' ? String(value.name ?? '') : '')
+  const labelText = typeof value === 'string' ? value : (value && typeof value === 'object' ? String(value.name ?? '') : '')
   if (labelText && labelText.length > 0) display.appendChild(createEl('span', 'hot-dropdown-text', labelText))
   else display.appendChild(createEl('span', 'hot-dropdown-placeholder', '选择'))
 
   const trigger = createEl('button', 'hot-dropdown-trigger', '▼') as HTMLButtonElement
   trigger.type = 'button'
 
-  const buildDropdown = () => {
-    const src = cellProperties.customDropdownSource as any[] | undefined
+  const buildDropdown = async () => {
     const headers: string[] | undefined = cellProperties.customTableHeaders
     const dropdown = createEl('div', 'hot-dropdown')
-    const getLabel = labelFn ?? ((x: any) => x?.name ?? '')
+    const getDisplayText = (x: any) => x?.name ?? ''
     
     // 创建搜索栏
     const searchContainer = createEl('div', 'hot-dropdown-search')
@@ -119,29 +147,51 @@ export function handlerTableRenderer(instance: any, td: HTMLTableCellElement, ro
     const theadHtml = headers && headers.length ? `<thead><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr></thead>` : ''
     
     // 使用自定义字段键或默认字段键
-    const fieldKeys = cellProperties.customFieldKeys || ['code', 'name', 'spec', 'category', 'unit', 'taxRate', 'priceExTax', 'priceInTax', 'priceExTaxComp', 'priceInTaxComp', 'calcBase']
-    
-    const rowsHtml = Array.isArray(src)
-      ? createTableDataStructure(src, fieldKeys, labelFn).map(row => row.html).join('')
-      : ''
+    const fieldKeys = cellProperties.customFieldKeys || []
     
+    // 创建加载提示
     const tableEl = createEl('div', 'hot-dropdown-table-wrapper')
-    tableEl.innerHTML = `<table class="hot-dropdown-table">${theadHtml}<tbody>${rowsHtml}</tbody></table>`
+    tableEl.innerHTML = `<table class="hot-dropdown-table">${theadHtml}<tbody><tr><td colspan="${fieldKeys.length}" style="text-align: center; padding: 20px;">加载中...</td></tr></tbody></table>`
     
     dropdown.appendChild(searchContainer)
     dropdown.appendChild(tableEl)
     
-    const tbody = dropdown.querySelector('tbody') as HTMLTableSectionElement
-    const allRows = Array.from(tbody.querySelectorAll('tr')) as HTMLTableRowElement[]
+    // 异步加载数据
+    let src: any[] = []
+    const dataSource = cellProperties.customDropdownSource
     
-    // 搜索功能 - 动态搜索所有字段
+    if (typeof dataSource === 'function') {
+      try {
+        src = await dataSource()
+      } catch (error) {
+        console.error('加载下拉数据失败:', error)
+        tableEl.innerHTML = `<table class="hot-dropdown-table">${theadHtml}<tbody><tr><td colspan="${fieldKeys.length}" style="text-align: center; padding: 20px; color: red;">加载失败</td></tr></tbody></table>`
+        return dropdown
+      }
+    } else if (Array.isArray(dataSource)) {
+      src = dataSource
+    }
+    
+    // 渲染数据
+    const rowsHtml = Array.isArray(src) && src.length > 0
+      ? createTableDataStructure(src, fieldKeys, getDisplayText).map(row => row.html).join('')
+      : `<tr><td colspan="${fieldKeys.length}" style="text-align: center; padding: 20px;">暂无数据</td></tr>`
+    
+    tableEl.innerHTML = `<table class="hot-dropdown-table">${theadHtml}<tbody>${rowsHtml}</tbody></table>`
+    
+    const tbody = dropdown.querySelector('tbody') as HTMLTableSectionElement
+    const allRows = Array.from(tbody.querySelectorAll('tr.hot-dropdown-row')) as HTMLTableRowElement[]
+    
+    // 搜索功能 - 动态搜索所有字段（支持嵌套属性）
     const searchFieldKeys = cellProperties.customSearchFields || cellProperties.customFieldKeys || ['code', 'name', 'spec', 'category', 'unit']
     searchInput.addEventListener('input', (ev) => {
       ev.stopPropagation()
       const keyword = searchInput.value.toLowerCase().trim()
       allRows.forEach(tr => {
         const matches = searchFieldKeys.some((key: string) => {
-          const value = (tr.dataset[key.toLowerCase()] ?? '').toLowerCase()
+          // 将嵌套路径转换为 data 属性名，如 'calcBase.formula' -> 'calcbase-formula'
+          const attrName = key.toLowerCase().replace(/\./g, '-')
+          const value = (tr.dataset[attrName] ?? '').toLowerCase()
           return value.includes(keyword)
         })
         tr.style.display = matches ? '' : 'none'
@@ -154,9 +204,25 @@ export function handlerTableRenderer(instance: any, td: HTMLTableCellElement, ro
     tbody.addEventListener('click', (ev) => {
       ev.stopPropagation()
       const tr = (ev.target as HTMLElement).closest('tr') as HTMLTableRowElement | null
-      if (!tr) return
-      const next = tr.dataset.label ?? ''
-      instance.setDataAtCell(row, column, next)
+      if (!tr || !tr.classList.contains('hot-dropdown-row')) return
+      
+      // 从 data-item 属性中恢复完整的 item 数据
+      const itemJson = tr.dataset.item ?? '{}'
+      const selectedItem = JSON.parse(itemJson.replace(/&quot;/g, '"'))
+      
+      // 获取当前行的完整数据
+      const currentRowData = instance.getSourceDataAtRow(row)
+      
+      // 调用自定义回调函数
+      const callbackFn = cellProperties.customCallbackRow
+      if (typeof callbackFn === 'function') {
+        callbackFn(currentRowData, selectedItem, row, column, instance)
+      } else {
+        // 默认行为：设置显示文本
+        const displayValue = tr.dataset.label ?? ''
+        instance.setDataAtCell(row, column, displayValue)
+      }
+      
       if (dropdown.parentNode) dropdown.parentNode.removeChild(dropdown)
       currentDropdownEl = null
       if (currentOnDocClick) {
@@ -171,11 +237,11 @@ export function handlerTableRenderer(instance: any, td: HTMLTableCellElement, ro
     return dropdown
   }
 
-  const openDropdown = () => {
+  const openDropdown = async () => {
     if (currentDropdownEl && currentDropdownEl.parentNode) currentDropdownEl.parentNode.removeChild(currentDropdownEl)
     if (currentOnDocClick) document.removeEventListener('click', currentOnDocClick)
 
-    const dropdown = buildDropdown()
+    const dropdown = await buildDropdown()
     document.body.appendChild(dropdown)
     currentDropdownEl = dropdown
     currentAnchor = { instance, row, col: column, td }
diff --git a/apps/web-ele/src/components/db-hst/text.ts b/apps/web-ele/src/components/db-hst/text.ts
new file mode 100644
index 0000000..3b1fe41
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/text.ts
@@ -0,0 +1,28 @@
+
+export function handlerDuplicateCodeRenderer(instance: any, td: HTMLTableCellElement, row: number, column: number, prop: string | number, value: any, cellProperties: any){
+  td.textContent = value || ''
+  // 检查是否需要设置验证背景色
+  const cellMeta = instance.getCellMeta(row, column)
+  const isValid = cellMeta?.valid !== false
+  
+  // 如果单元格被标记为无效，设置红色背景
+  if (!isValid) {
+    td.style.backgroundColor = '#fa4d3233' // 淡红色背景
+  } else {
+    td.style.backgroundColor = '' // 清除背景色
+  }
+  // 检查当前值是否重复（排除空值）
+  if (value && value.toString().trim() !== '') {
+    // 获取所有数据
+    const data = instance.getSourceData()
+    const duplicateCount = data.filter((item: any) => item.code === value).length
+    if (duplicateCount > 1) {
+      td.style.color = 'red'
+      td.style.fontWeight = 'bold'
+    } else {
+      td.style.color = ''
+      td.style.fontWeight = ''
+    }
+  }
+  return td
+}
\ No newline at end of file
diff --git a/apps/web-ele/src/components/db-hst/tree.ts b/apps/web-ele/src/components/db-hst/tree.ts
index fc742e6..a865510 100644
--- a/apps/web-ele/src/components/db-hst/tree.ts
+++ b/apps/web-ele/src/components/db-hst/tree.ts
@@ -1,3 +1,38 @@
+import { getTreeLine, getTreeLinePaint, getTreeCellDom } from './treeLine'
+
+// 通用的验证 renderer，用于显示验证背景色
+export const validationRenderer = (
+  hot: any,
+  TD: HTMLTableCellElement,
+  row: number,
+  col: number,
+  prop: any,
+  value: any,
+  cellProperties: any
+) => {
+  // 清空单元格
+  while (TD.firstChild) TD.removeChild(TD.firstChild)
+  
+  // 检查是否需要设置验证背景色
+  const columns = this.getSettings().columns || []
+  const currentColumn = columns[col]
+  const isEmpty = value === null || value === undefined || String(value).trim() === ''
+  
+  // 如果列配置了 allowInvalid: true 且值为空，设置红色背景
+  if (currentColumn?.allowInvalid === true && isEmpty) {
+    TD.style.backgroundColor = '#ff4d4f20' // 淡红色背景
+  } else {
+    TD.style.backgroundColor = '' // 清除背景色
+  }
+  
+  // 创建文本节点
+  const text = document.createElement('span')
+  text.textContent = value == null ? '' : String(value)
+  TD.appendChild(text)
+  
+  return TD
+}
+
 export const codeRenderer = (
   hot: any,
   TD: HTMLTableCellElement,
@@ -7,43 +42,71 @@ export const codeRenderer = (
   value: any,
   cellProperties: any
 ) => {
-  while (TD.firstChild) TD.removeChild(TD.firstChild)
+  
+   // 检查是否需要设置验证背景色
+  const cellMeta = hot.getCellMeta(row, col)
+  const isValid = cellMeta?.valid !== false
+  
+  // 如果单元格被标记为无效，设置红色背景
+  if (!isValid) {
+    TD.style.backgroundColor = '#fa4d3233' // 淡红色背景
+  } else {
+    TD.style.backgroundColor = cellProperties.className == "row-highlight"?'#e9ecfc':'' // 清除背景色
+  }
+  
   const nestedRowsPlugin = hot.getPlugin('nestedRows')
   const physicalRow = nestedRowsPlugin ? nestedRowsPlugin.collapsingUI.translateTrimmedRow(row) : hot.toPhysicalRow(row)
-  const rowObj = hot.getSourceDataAtRow(physicalRow)
-  const container = document.createElement('div')
-  container.style.display = 'flex'
-  container.style.alignItems = 'center'
-  container.style.gap = '6px'
-  const level = nestedRowsPlugin?.dataManager.getRowLevel(physicalRow) ?? 0
-  for (let i = 0; i < (level || 0); i++) {
-    const spacer = document.createElement('span')
-    spacer.className = 'ht_nestingLevel_empty'
-    container.appendChild(spacer)
+  const dataManager = nestedRowsPlugin?.dataManager
+
+  const dataNode = dataManager?.getDataObject?.(physicalRow)
+  const root = (dataManager?.getData?.() as any[] | undefined) ?? []
+  const line = nestedRowsPlugin && dataManager && dataNode && Array.isArray(root)
+    ? getTreeLine(dataNode, dataManager, root)
+    : ({ key: '0', hasChildren: false } as const)
+
+  const { indentLayer, content, toggleEl, textEl } = getTreeCellDom(TD)
+  if (indentLayer.dataset.paintKey !== line.key) {
+    indentLayer.dataset.paintKey = line.key
+    const paint = getTreeLinePaint(line.key)
+    indentLayer.style.width = paint.width
+    indentLayer.style.backgroundImage = paint.backgroundImage
+    indentLayer.style.backgroundSize = paint.backgroundSize
+    indentLayer.style.backgroundPosition = paint.backgroundPosition
+    indentLayer.style.backgroundRepeat = paint.backgroundImage ? 'no-repeat' : ''
   }
-  if (rowObj && Array.isArray(rowObj.__children) && rowObj.__children.length > 0) {
-     
-    const isCollapsed = nestedRowsPlugin?.collapsingUI.areChildrenCollapsed(physicalRow) ?? false
-    const btn = document.createElement('div')
+
+  if (line.hasChildren && nestedRowsPlugin) {
+    const isCollapsed = nestedRowsPlugin.collapsingUI.areChildrenCollapsed(physicalRow)
+    const needsButton = toggleEl.tagName !== 'DIV' || !toggleEl.classList.contains('ht_nestingButton')
+    const btn = needsButton ? document.createElement('div') : toggleEl
     btn.className = `ht_nestingButton ${isCollapsed ? 'ht_nestingExpand' : 'ht_nestingCollapse'}`
-    btn.addEventListener('mousedown', (ev) => {
-      if (ev.button !== 0) return
-      ev.stopPropagation()
-      ev.preventDefault()
-      if (!nestedRowsPlugin) return
-      const nowCollapsed = nestedRowsPlugin.collapsingUI.areChildrenCollapsed(physicalRow)
-      if (nowCollapsed) nestedRowsPlugin.collapsingUI.expandChildren(physicalRow)
-      else nestedRowsPlugin.collapsingUI.collapseChildren(physicalRow)
-    })
-    container.appendChild(btn)
-  }/*else{
-    container.classList.add('text-relative')
-  }*/
-  const text = document.createElement('span')
-  text.textContent = value == null ? '' : String(value)
-  text.classList.add('rowHeader')
+    btn.dataset.row = String(physicalRow)
+    if (!(btn as any).__htTreeToggleBound) {
+      ;(btn as any).__htTreeToggleBound = true
+      btn.addEventListener('mousedown', (ev) => {
+        ev.stopPropagation()
+        ev.preventDefault()
+        const rowStr = (ev.currentTarget as HTMLElement | null)?.dataset.row
+        const targetRow = rowStr ? Number(rowStr) : NaN
+        if (!nestedRowsPlugin || Number.isNaN(targetRow)) return
+        const nowCollapsed = nestedRowsPlugin.collapsingUI.areChildrenCollapsed(targetRow)
+        if (nowCollapsed) nestedRowsPlugin.collapsingUI.expandChildren(targetRow)
+        else nestedRowsPlugin.collapsingUI.collapseChildren(targetRow)
+      })
+    }
+    if (needsButton) content.replaceChild(btn, toggleEl)
+  } else {
+    const needsSpacer = toggleEl.tagName !== 'SPAN' || !toggleEl.classList.contains('ht_treeToggleSpacer')
+    if (needsSpacer) {
+      const spacer = document.createElement('span')
+      spacer.className = 'ht_treeToggleSpacer'
+      content.replaceChild(spacer, toggleEl)
+    }
+  }
+
+  textEl.textContent = value == null ? '' : String(value)
   //解决右键行头触发上下文菜单事件
-  text.addEventListener('contextmenu', (ev) => {
+  textEl.addEventListener('contextmenu', (ev) => {
     ev.preventDefault()
     ev.stopPropagation()
     const e = new MouseEvent('contextmenu', {
@@ -56,19 +119,52 @@ export const codeRenderer = (
     })
     TD.dispatchEvent(e)
   })
-  container.appendChild(text)
-  TD.appendChild(container)
+}
 
-  return TD
+// codeRenderer 的编辑后回调处理
+export const handleCodeCallback = (hot: any, changes: any[], codeCallbackRow?: Function) => {
+  if (!changes || !codeCallbackRow) return
+  
+  const columns = hot.getSettings().columns || []
+  
+  changes.forEach(([row, prop, oldValue, newValue]) => {
+    // 查找当前列配置
+    const colIndex = hot.propToCol(prop)
+    const currentColumn = columns[colIndex]
+    
+    //console.log('currentColumn?.code',currentColumn?.code)
+    // 只处理配置了 code: true 的列的变化
+    if (currentColumn?.code === true && oldValue !== newValue) {
+      const nestedRowsPlugin = hot.getPlugin('nestedRows')
+      const physicalRow = nestedRowsPlugin ? nestedRowsPlugin.collapsingUI.translateTrimmedRow(row) : hot.toPhysicalRow(row)
+      const currentRowData = hot.getSourceDataAtRow(physicalRow)
+      
+      // 调用回调函数，传递参数：当前行数据、旧值、新值、行索引、列索引、实例
+      if (typeof codeCallbackRow === 'function') {
+        codeCallbackRow(currentRowData, oldValue, newValue, row, colIndex, hot)
+      }
+    }
+  })
 }
 
 export const computeCodeColWidth = (hot: any): number => {
-//   if (!hot) return codeColWidth.value
+  if (!hot) return 120
+  
+  // 查找配置了 code: true 的列
+  const columns = hot.getSettings().columns || []
+  const codeColumn = columns.find((col: any) => col.code === true)
+  
+  if (!codeColumn || !codeColumn.data) return 120
+  
   const data = hot.getSourceData() || []
+  const codeDataKey = codeColumn.data
+  
+  // 计算该列的最大长度
   const maxLen = data.reduce((m: number, r: any) => {
-    const v = r && r.code != null ? String(r.code) : ''
+    const v = r && r[codeDataKey] != null ? String(r[codeDataKey]) : ''
     return Math.max(m, v.length)
   }, 0)
+  
   const charWidth = 9
   const basePadding = 24
   const nested = hot.getPlugin('nestedRows')
@@ -84,100 +180,71 @@ export const computeCodeColWidth = (hot: any): number => {
   return Math.min(Math.max(80, width), 480)
 }
 
-// 工具函数：解析 level 字符串
-const parseLevel = (level: string): number[] => 
-  level?.split('-').map(n => Number(n)).filter(n => !Number.isNaN(n)) ?? []
 
-// 工具函数：根据 level 获取容器和索引
-const getContainerAndIndexByLevel = (data: any[], level: string) => {
-  const seg = parseLevel(level)
-  if (seg.length === 0) return null
-  if (seg.length === 1) return { container: data, index: seg[0], parentLevel: null }
-  
-  let parent = data[seg[0]]
-  for (let i = 1; i < seg.length - 1; i++) {
-    if (!Array.isArray(parent.__children)) parent.__children = []
-    parent = parent.__children[seg[i] - 1]
-    if (!parent) return null
+const createNode = (dataSchema: any,level: string): any => ({
+  ...dataSchema,
+  level,
+  __children: []
+})
+const getSelectedVisualRowRange = (hot: any): { startRow: number; amount: number } | null => {
+const sel = hot.getSelectedLast?.() ?? hot.getSelected?.()?.[0]
+if (!sel) return null
+
+const [r1, , r2] = sel as [number, number, number, number]
+const startRow = Math.min(r1, r2)
+const endRow = Math.max(r1, r2)
+return { startRow, amount: endRow - startRow + 1 }
+}
+/** 生成树结构 */
+const computeRowPath = (node: any, dm: any, root: any[]): string => {
+  const chain: any[] = []
+  for (let n = node; n; n = dm.getRowParent(n)) chain.unshift(n)
+  const segs: string[] = [String(root.indexOf(chain[0]))]
+  for (let i = 1; i < chain.length; i++) segs.push(String((chain[i - 1].__children?.indexOf(chain[i]) ?? -1) + 1))
+  return segs.join('-')
+}
+
+export const handleRowOperation = (hot: any, type: 'above' | 'below' | 'child' | 'append' | 'delete') => {
+  //空白处右键 新增行
+  if (type === 'append') {
+    //const root = hot.getSourceData() as any[]
+    // 使用正确的 level 格式：索引值（从0开始）
+    // hot.getSettings().data.push(createNode(hot.getSettings().dataSchema, "0"))
+    // hot.loadData(hot.getSettings().data)
+    // console.log('append',root,hot.getSettings().data)
+    const root = hot.getSourceData() as any[]
+    hot.alter('insert_row_below', root.length, 1, 'insert_row_alter')
+    console.log('append',root)
+    return
   }
-  
-  const container = Array.isArray(parent.__children) ? parent.__children : (parent.__children = [])
-  const index = seg[seg.length - 1] - 1
-  const parentLevel = seg.slice(0, -1).join('-')
-  return { container, index, parentLevel }
-}
-
-// 工具函数：根据 level 查找节点
-const findNodeByLevel = (data: any[], level: string) => {
-  const loc = getContainerAndIndexByLevel(data, level)
-  return loc ? (loc.container[loc.index] ?? null) : null
-}
-
-// 工具函数：重新索引 level
-const reindexLevels = (container: any[], parentLevel: string | null): void => {
- container.forEach((row, i) => {
-    const currentLevel = parentLevel == null ? String(i) : `${parentLevel}-${i + 1}`
-    row.level = currentLevel
-    if (Array.isArray(row.__children) && row.__children.length > 0) {
-      reindexLevels(row.__children, currentLevel)
-    }
-  })
-}
-
-// 统一的行操作处理函数
-export const handleRowOperation = (hot: any, type: 'above' | 'below' | 'child' | 'delete') => {
-  const selected = hot.getSelected()
-  if (!selected || selected.length === 0) return
-  
-  const row = selected[0][0]
-  const nestedRowsPlugin = hot.getPlugin('nestedRows')
-  if (!nestedRowsPlugin) return
-  
-  const physicalRow = nestedRowsPlugin ? nestedRowsPlugin.collapsingUI.translateTrimmedRow(row) : hot.toPhysicalRow(row)
-  const rowData = hot.getSourceDataAtRow(physicalRow)
-  const currentLevel = String(rowData.level ?? '')
-  const data = JSON.parse(JSON.stringify(hot.getSettings().data))
   if (type === 'delete') {
-    // 删除行
-    const loc = getContainerAndIndexByLevel(data, currentLevel)
-    if (!loc) return
-    const { container, index, parentLevel } = loc
-    container.splice(index, 1)
-    reindexLevels(container, parentLevel)
-  } else {
-    // 根据 columns 配置动态生成 newRow 对象结构
-    const columns = hot.getSettings().columns || []
-    const newRow: any = {
-      level: null,
-      __children: []
-    }
-    
-    // 根据 columns 的 data 字段生成对象结构
-    columns.forEach((col: any) => {
-      if (col.data && col.data !== 'level' && col.data !== '__children') {
-        newRow[col.data] = null
-      }
-    })
-    
-    if (type === 'child') {
-      // 添加子行
-      const parentNode = findNodeByLevel(data, currentLevel)
-      if (!parentNode) return
-      if (!Array.isArray(parentNode.__children)) parentNode.__children = []
-      const nextIndex = parentNode.__children.length + 1
-      newRow.level = `${currentLevel}-${nextIndex}`
-      parentNode.__children.push(newRow)
-    } else {
-      // 在上方或下方插入行
-      const loc = getContainerAndIndexByLevel(data, currentLevel)
-      if (!loc) return
-      const { container, index, parentLevel } = loc
-      const insertIndex = type === 'above' ? Math.max(index, 0) : Math.max(index + 1, 0)
-      container.splice(insertIndex, 0, newRow)
-      reindexLevels(container, parentLevel)
-    }
+    const range = getSelectedVisualRowRange(hot)
+    if (!range) return
+    hot.alter('remove_row', range.startRow, range.amount, 'remove_row_alter')
+    return
   }
-  hot.updateSettings({ data })
-  // nestedRowsPlugin.headersUI.updateRowHeaderWidth()
-  hot.render()
+  const sel = hot.getSelected()
+  if (!sel?.length) return
+  const plugin = hot.getPlugin('nestedRows')
+  if (!plugin) return
+  const dm = plugin.dataManager
+  const row = plugin.collapsingUI.translateTrimmedRow(sel[0][0])
+  const target = dm.getDataObject(row)
+  const parent = dm.getRowParent(row)
+  const root = dm.getRawSourceData() as any[]
+  
+  console.log('target',target)
+  if (type === 'child') {
+    const base = target.level && typeof target.level === 'string' ? target.level : computeRowPath(target, dm, root)
+    const next = (target.__children?.length ?? 0) + 1
+    ;(target.__children ??= []).push(createNode(hot.getSettings().dataSchema,`${base}-${next}`))
+    hot.loadData(root)
+    return
+  }
+
+  const list = parent ? parent.__children : root
+  const pos = dm.getRowIndexWithinParent(row)
+  const lvl = String(dm.getRowLevel(row) ?? 0)
+  list.splice(type === 'above' ? pos : pos + 1, 0, createNode(hot.getSettings().dataSchema,lvl))
+  hot.loadData(root)
 }
diff --git a/apps/web-ele/src/components/db-hst/treeLine.ts b/apps/web-ele/src/components/db-hst/treeLine.ts
new file mode 100644
index 0000000..78106e8
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/treeLine.ts
@@ -0,0 +1,140 @@
+type TreeLinePaint = {
+  key: string
+  width: string
+  backgroundImage: string
+  backgroundSize: string
+  backgroundPosition: string
+}
+
+let treeLineCache = new WeakMap<any, { key: string; hasChildren: boolean }>()
+const treeLinePaintCache = new Map<string, TreeLinePaint>()
+
+export const resetTreeLineCaches = () => {
+  treeLineCache = new WeakMap<any, { key: string; hasChildren: boolean }>()
+  treeLinePaintCache.clear()
+}
+
+export const getTreeLine = (node: any, dataManager: any, root: any[]) => {
+  const cached = treeLineCache.get(node)
+  if (cached) return cached
+
+  const level = Math.max(0, dataManager.getRowLevel(node) ?? 0)
+  const hasChildren = !!(node && Array.isArray(node.__children) && node.__children.length)
+
+  if (level <= 0) {
+    const next = { key: '0', hasChildren }
+    treeLineCache.set(node, next)
+    return next
+  }
+
+  const isLast = (n: any) => {
+    const parent = dataManager.getRowParent(n)
+    const siblings = (parent ? parent.__children : root) as any[] | undefined
+    if (!Array.isArray(siblings) || siblings.length === 0) return true
+    return siblings[siblings.length - 1] === n
+  }
+
+  const flags: boolean[] = []
+  let parent = dataManager.getRowParent(node)
+  while (parent && (dataManager.getRowLevel(parent) ?? 0) > 0) {
+    flags.push(!isLast(parent))
+    parent = dataManager.getRowParent(parent)
+  }
+  flags.reverse()
+
+  const key = `${level}|${isLast(node) ? 1 : 0}|${flags.map(v => (v ? '1' : '0')).join('')}`
+  const next = { key, hasChildren }
+  treeLineCache.set(node, next)
+  return next
+}
+
+export const getTreeLinePaint = (key: string) => {
+  const cached = treeLinePaintCache.get(key)
+  if (cached) return cached
+
+  if (key === '0') {
+    const empty = { key, width: '0px', backgroundImage: '', backgroundSize: '', backgroundPosition: '' }
+    treeLinePaintCache.set(key, empty)
+    return empty
+  }
+
+  const [levelStr, isLastStr, flagsStr] = key.split('|')
+  const level = Number(levelStr)
+  const isLast = isLastStr === '1'
+  const flags = flagsStr ? flagsStr.split('').map(v => v === '1') : []
+
+  const color = 'var(--ht-tree-line-color)'
+  const width = 'var(--ht-tree-line-width)'
+  const indent = 'var(--ht-tree-indent)'
+
+  const images: string[] = []
+  const sizes: string[] = []
+  const positions: string[] = []
+
+  for (let i = 0; i < flags.length; i++) {
+    if (!flags[i]) continue
+    images.push(`linear-gradient(${color}, ${color})`)
+    sizes.push(`${width} 100%`)
+    positions.push(`calc(${indent} * ${i} + (${indent} / 2)) 0`)
+  }
+
+  const selfDepth = level - 1
+  images.push(`linear-gradient(${color}, ${color})`)
+  sizes.push(`${width} ${isLast ? '50%' : '100%'}`)
+  positions.push(`calc(${indent} * ${selfDepth} + (${indent} / 2)) 0`)
+
+  images.push(`linear-gradient(to right, ${color}, ${color})`)
+  sizes.push(`calc(${indent} / 2) ${width}`)
+  positions.push(`calc(${indent} * ${selfDepth} + (${indent} / 2)) 50%`)
+
+  const paint = {
+    key,
+    width: `calc(var(--ht-tree-indent) * ${level})`,
+    backgroundImage: images.join(', '),
+    backgroundSize: sizes.join(', '),
+    backgroundPosition: positions.join(', '),
+  }
+  treeLinePaintCache.set(key, paint)
+  return paint
+}
+
+export const getTreeCellDom = (TD: HTMLTableCellElement) => {
+  const currentTreeCell = TD.firstElementChild as HTMLElement | null
+  if (currentTreeCell && currentTreeCell.classList.contains('ht_treeCell')) {
+    const indentLayer = currentTreeCell.firstElementChild as HTMLElement
+    const content = currentTreeCell.lastElementChild as HTMLElement
+    return {
+      treeCell: currentTreeCell,
+      indentLayer,
+      content,
+      toggleEl: content.firstElementChild as HTMLElement,
+      textEl: content.lastElementChild as HTMLElement,
+    }
+  }
+
+  const treeCell = document.createElement('div')
+  treeCell.className = 'ht_treeCell'
+
+  const indentLayer = document.createElement('span')
+  indentLayer.className = 'ht_treeIndentLayer'
+
+  const content = document.createElement('div')
+  content.className = 'ht_treeContent'
+  const toggleSpacer = document.createElement('span')
+  toggleSpacer.className = 'ht_treeToggleSpacer'
+  const text = document.createElement('span')
+  text.className = 'rowHeader'
+  content.appendChild(toggleSpacer)
+  content.appendChild(text)
+  treeCell.appendChild(indentLayer)
+  treeCell.appendChild(content)
+  TD.replaceChildren(treeCell)
+
+  return {
+    treeCell,
+    indentLayer,
+    content,
+    toggleEl: toggleSpacer,
+    textEl: text,
+  }
+}
\ No newline at end of file
diff --git a/apps/web-ele/src/components/db-hst/validator.ts b/apps/web-ele/src/components/db-hst/validator.ts
new file mode 100644
index 0000000..5b9a3eb
--- /dev/null
+++ b/apps/web-ele/src/components/db-hst/validator.ts
@@ -0,0 +1,89 @@
+// 验证行
+export const validatorRow = (_this: any,changes: any) => {
+// 获取列配置
+    const columns = _this.getSettings().columns;
+    
+    // 收集所有需要验证的行（去重）
+    const rowsToValidate = new Set<number>();
+    
+    for (let i = 0; i < changes.length; i++) {
+      const currChange = changes[i];
+      const row = currChange[0];      // 当前修改的行索引
+      const prop = currChange[1];     // 当前修改的列（属性名）
+      const oldValue = currChange[2]; // 修改前的值
+      const newValue = currChange[3]; // 修改后的值
+      
+    //   console.log(`行${row}, 列${prop}, 从 ${oldValue} 改为 ${newValue}`)
+      
+      // 将当前行加入待验证列表
+      rowsToValidate.add(row);
+    }
+    let hasEmptyCell = false
+    // 验证所有受影响的行
+    for (const row of rowsToValidate) {
+    //   console.log(`验证第 ${row} 行的所有必填列`)
+      
+      // 遍历所有列，验证 required: true 的列
+      columns.forEach((columnConfig: any, colIndex: number) => {
+        if (columnConfig.required === true) {
+          // 获取当前单元格的值
+          const cellValue = _this.getDataAtCell(row, colIndex);
+          
+          // 检查值是否为空（null、undefined、空字符串）
+          let isEmpty = false
+          
+          // 对于 使用 db-dropdown renderer，需要特殊处理
+          if (columnConfig.renderer === 'db-dropdown' || columnConfig.renderer === 'db-duplicate') {
+            // 检查值是否为空或不在 source 列表中
+            isEmpty = cellValue === null || cellValue === undefined || cellValue === ''
+            
+            // 如果有值，还需要验证是否在允许的选项中
+            if (!isEmpty && Array.isArray(columnConfig.source)) {
+              const validValues = columnConfig.source.map((opt: any) => 
+                typeof opt === 'object' && opt !== null ? opt.value : opt
+              )
+              isEmpty = !validValues.includes(cellValue)
+            }
+          } else {
+            // 其他列的常规验证
+            isEmpty = cellValue === null || cellValue === undefined || cellValue === ''
+          }
+         
+          if (isEmpty) {
+            // 值为空，标记为无效
+            _this.setCellMeta(row, colIndex, 'valid', false);
+            hasEmptyCell = true
+            // console.log(`  列 ${columnConfig.data} (索引${colIndex}) 值为空，标记为无效`);
+          } else {
+            // 对于 numeric 类型，额外验证是否为有效数字
+            if (columnConfig.type === 'numeric') {
+              const numValue = Number(cellValue)
+              if (isNaN(numValue)) {
+                // 不是有效数字，标记为无效
+                _this.setCellMeta(row, colIndex, 'valid', false);
+                hasEmptyCell = true
+                // console.log(`  列 ${columnConfig.data} (索引${colIndex}) 不是有效数字，标记为无效`);
+              } else {
+                // 是有效数字，标记为有效
+                _this.setCellMeta(row, colIndex, 'valid', true);
+                // console.log(`  列 ${columnConfig.data} (索引${colIndex}) 是有效数字，标记为有效`);
+              }
+            } else {
+              // 值不为空，标记为有效
+              _this.setCellMeta(row, colIndex, 'valid', true);
+              //console.log(`  列 ${columnConfig.data} (索引${colIndex}) 值不为空，标记为有效`);
+            }
+          }
+        }
+      });
+    }
+    
+    // 重新渲染表格以显示验证状态
+    _this.render();
+    // 如果有空单元格，提前返回，不执行后续操作
+    if(hasEmptyCell){
+      console.log('存在空单元格，验证失败，不执行后续操作')
+      return false
+    }
+    return true
+}
\ No newline at end of file
diff --git a/apps/web-ele/src/components/db-tree/contextMenu.ts b/apps/web-ele/src/components/db-tree/contextMenu.ts
index 7c9a435..a71d748 100644
--- a/apps/web-ele/src/components/db-tree/contextMenu.ts
+++ b/apps/web-ele/src/components/db-tree/contextMenu.ts
@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { ref } from 'vue'
 import type { DropdownInstance, TreeV2Instance } from 'element-plus'
+import { contextMenuManager } from '../db-hst/contextMenuManager'
 
 interface NodeBase<T> { id: string; label: string; children?: T[] }
 type NodeType<T> = T & NodeBase<T>
@@ -31,11 +32,19 @@ interface LevelConfig {
   addKey?: string
   addText?: string
   allowDelete?: boolean
+  condition?: (node: any) => boolean  // 添加条件判断函数，用于控制是否显示添加菜单
+  sort?: string  // 排序字段名，如 'sortOrder'
+  customMenuItems?: Array<{ key: string; text: string; condition?: (node: any) => boolean }>  // 自定义菜单项
+  onAdd?: (parentNode: any, newNode: any, allChildren: any[]) => void | Promise<void>
+  onDelete?: (node: any) => void | Promise<void>
+  onCustomCommand?: (cmd: string, node: any) => void | Promise<void>  // 自定义命令处理
 }
 
 interface HierarchyConfig {
   rootKey: string
   rootText: string
+  onRootAdd?: (newNode: any, allRootNodes: any[]) => void | Promise<void>
+  onRootDelete?: (node: any) => void | Promise<void>
   levels: LevelConfig[]
 }
 
@@ -73,7 +82,9 @@ class HierarchyContextMenuHandler<T> implements ContextMenuHandler<T> {
     }
     
     const depth = getDepth(node, ctx)
+    console.log('getMenuItems - 节点:', node, '深度:', depth)
     const levelConfig = this.config.levels.find(l => l.depth === depth)
+    console.log('找到的 levelConfig:', levelConfig)
     
     if (!levelConfig) {
       // 未配置的层级，只显示删除
@@ -82,9 +93,26 @@ class HierarchyContextMenuHandler<T> implements ContextMenuHandler<T> {
     
     const items: MenuItem[] = []
     
-    // 添加子级菜单项
+    // 添加子级菜单项（检查条件）
     if (levelConfig.addKey && levelConfig.addText) {
-      items.push({ key: levelConfig.addKey, text: levelConfig.addText })
+      console.log('检查 addKey 条件, levelConfig.condition:', levelConfig.condition)
+      // 如果有条件函数，检查是否满足条件
+      if (!levelConfig.condition || levelConfig.condition(node)) {
+        console.log('条件满足，添加菜单项:', levelConfig.addText)
+        items.push({ key: levelConfig.addKey, text: levelConfig.addText })
+      } else {
+        console.log('条件不满足，不添加菜单项')
+      }
+    }
+    
+    // 添加自定义菜单项
+    if (levelConfig.customMenuItems) {
+      for (const customItem of levelConfig.customMenuItems) {
+        // 如果有条件函数，检查是否满足条件
+        if (!customItem.condition || customItem.condition(node)) {
+          items.push({ key: customItem.key, text: customItem.text })
+        }
+      }
     }
     
     // 删除菜单项
@@ -100,7 +128,26 @@ class HierarchyContextMenuHandler<T> implements ContextMenuHandler<T> {
     if (!node && cmd === this.config.rootKey) {
       const next = ctx.createNode('root')
       next.label = this.config.rootText.replace('添加', '')
+      
+      // 先添加到数据中
       ctx.setData([...ctx.dataRef.value, next])
+      
+      // 调用根节点添加回调，传入所有根节点数据
+      if (this.config.onRootAdd) {
+        try {
+          await this.config.onRootAdd(next, ctx.dataRef.value)
+          // 回调完成后，重新设置数据以确保更新
+          ctx.setData([...ctx.dataRef.value])
+        } catch (error) {
+          // 如果回调失败，移除刚添加的节点
+          const index = ctx.dataRef.value.findIndex(n => n.id === next.id)
+          if (index !== -1) {
+            ctx.dataRef.value.splice(index, 1)
+            ctx.setData([...ctx.dataRef.value])
+          }
+          throw error
+        }
+      }
       return
     }
     
@@ -110,29 +157,108 @@ class HierarchyContextMenuHandler<T> implements ContextMenuHandler<T> {
     if (cmd === 'delete') {
       const target = ctx.locate(node.id)
       if (!target) return
+      
+      // 查找当前节点的层级配置
+      const depth = getDepth(node, ctx)
+      const levelConfig = this.config.levels.find(l => l.depth === depth)
+      
+      // 如果是根节点（depth === -1 或 parent === null），调用根节点删除回调
+      if (!target.parent && this.config.onRootDelete) {
+        await this.config.onRootDelete(node)
+      } else if (levelConfig?.onDelete) {
+        // 否则调用层级删除回调
+        await levelConfig.onDelete(node)
+      }
+      
       target.container.splice(target.index, 1)
       ctx.setData([...ctx.dataRef.value])
       return
     }
     
-    // 查找匹配的层级配置
-    const depth = getDepth(node, ctx)
-    const levelConfig = this.config.levels.find(l => l.depth === depth && l.addKey === cmd)
-    
-    if (levelConfig) {
-      const target = ctx.locate(node.id)
-      if (!target) return
+      // 查找匹配的层级配置
+      const depth = getDepth(node, ctx)
+      const levelConfig = this.config.levels.find(l => l.depth === depth && l.addKey === cmd)
       
-      const next = ctx.createNode(node.id)
-      next.label = levelConfig.addText?.replace('添加', '') || '新目录'
+      if (levelConfig) {
+        const target = ctx.locate(node.id)
+        if (!target) return
+        
+        target.node.children = target.node.children || []
+        
+        // 如果配置了排序字段，先对现有子节点排序
+        if (levelConfig.sort) {
+          const sortField = levelConfig.sort
+          target.node.children.sort((a: any, b: any) => {
+            const aVal = a[sortField] ?? 0
+            const bVal = b[sortField] ?? 0
+            return aVal - bVal
+          })
+          
+          // 计算新节点的排序号（取最大值 + 1）
+          const maxSort = target.node.children.reduce((max: number, child: any) => {
+            const childSort = child[sortField] ?? 0
+            return Math.max(max, childSort)
+          }, 0)
+          
+          const next = ctx.createNode(node.id)
+          next.label = levelConfig.addText?.replace('添加', '') || '新目录'
+          ;(next as any)[sortField] = maxSort + 1
+          
+          target.node.children.push(next)
+          ctx.setData([...ctx.dataRef.value])
+          ctx.expandNode(target.node.id)
+          
+          // 调用添加回调，传递父节点的所有子节点
+          if (levelConfig.onAdd) {
+            try {
+              await levelConfig.onAdd(node, next, target.node.children)
+              // 回调完成后，重新设置数据以确保更新
+              ctx.setData([...ctx.dataRef.value])
+            } catch (error) {
+              // 如果回调失败，移除刚添加的节点
+              const index = target.node.children!.findIndex(n => n.id === next.id)
+              if (index !== -1) {
+                target.node.children!.splice(index, 1)
+                ctx.setData([...ctx.dataRef.value])
+              }
+              throw error
+            }
+          }
+        } else {
+          // 没有配置排序字段，使用原逻辑
+          const next = ctx.createNode(node.id)
+          next.label = levelConfig.addText?.replace('添加', '') || '新目录'
+          
+          target.node.children.push(next)
+          ctx.setData([...ctx.dataRef.value])
+          ctx.expandNode(target.node.id)
+          
+          // 调用添加回调，传递父节点的所有子节点
+          if (levelConfig.onAdd) {
+            try {
+              await levelConfig.onAdd(node, next, target.node.children)
+              // 回调完成后，重新设置数据以确保更新
+              ctx.setData([...ctx.dataRef.value])
+            } catch (error) {
+              // 如果回调失败，移除刚添加的节点
+              const index = target.node.children!.findIndex(n => n.id === next.id)
+              if (index !== -1) {
+                target.node.children!.splice(index, 1)
+                ctx.setData([...ctx.dataRef.value])
+              }
+              throw error
+            }
+          }
+        }
+        return
+      }
       
-      target.node.children = target.node.children || []
-      target.node.children.push(next)
-      ctx.setData([...ctx.dataRef.value])
-      ctx.expandNode(target.node.id)
-      ctx.setCurrentKey(next.id)
+      // 处理自定义命令
+      const customLevelConfig = this.config.levels.find(l => l.depth === getDepth(node, ctx))
+      if (customLevelConfig?.onCustomCommand) {
+        await customLevelConfig.onCustomCommand(cmd, node)
+      }
     }
-  }
 }
 
 /**
@@ -170,7 +296,7 @@ class DefaultContextMenuHandler<T> implements ContextMenuHandler<T> {
       target.node.children.push(ctx.createNode(target.node.id))
       ctx.setData([...ctx.dataRef.value])
       ctx.expandNode(target.node.id)
-      ctx.setCurrentKey(target.node.id)
+      // ctx.setCurrentKey(target.node.id)
       return
     }
     if (cmd === 'rename') { ctx.startEdit(node); return }
@@ -191,10 +317,22 @@ class DbTreeContextMenu<T> {
 
   private config: ContextMenuConfig<T>
   private handler: ContextMenuHandler<T>
+  private unregister: (() => void) | null = null
 
   constructor(config: ContextMenuConfig<T>, handler?: ContextMenuHandler<T>) {
     this.config = config
     this.handler = handler ?? new DefaultContextMenuHandler<T>()
+    
+    // 注册到全局菜单管理器
+    this.unregister = contextMenuManager.register(this.closeContextMenu)
+  }
+  
+  destroy() {
+    // 取消注册
+    if (this.unregister) {
+      this.unregister()
+      this.unregister = null
+    }
   }
 
   private createNode = (prefix: string): NodeType<T> => {
@@ -223,18 +361,30 @@ class DbTreeContextMenu<T> {
   getMenuItems = (): MenuItem[] => this.handler.getMenuItems(this.currentNode.value, this.ctx())
 
   openContextMenu = (event: MouseEvent, nodeData: NodeType<T>) => {
-    const { clientX, clientY } = event
-    this.position.value = DOMRect.fromRect({ x: clientX, y: clientY })
+    // console.log('openContextMenu',nodeData)
+    // 通知管理器即将打开新菜单，关闭其他菜单
+    contextMenuManager.notifyOpening(this.closeContextMenu)
+    
     event.preventDefault()
+    const { clientX, clientY } = event
     this.currentNode.value = nodeData
+    const items = this.handler.getMenuItems(this.currentNode.value, this.ctx())
+    if (!items.length) return
+    this.position.value = DOMRect.fromRect({ x: clientX, y: clientY })
     this.dropdownRef.value?.handleOpen()
   }
 
   openBlankContextMenu = (event: MouseEvent) => {
-    const { clientX, clientY } = event
-    this.position.value = DOMRect.fromRect({ x: clientX, y: clientY })
+    // console.log('openBlankContextMenu')
+    // 通知管理器即将打开新菜单，关闭其他菜单
+    contextMenuManager.notifyOpening(this.closeContextMenu)
+    
     event.preventDefault()
+    const { clientX, clientY } = event
     this.currentNode.value = null
+    const items = this.handler.getMenuItems(this.currentNode.value, this.ctx())
+    if (!items.length) return
+    this.position.value = DOMRect.fromRect({ x: clientX, y: clientY })
     this.dropdownRef.value?.handleOpen()
   }
 
diff --git a/apps/web-ele/src/components/db-tree/index.vue b/apps/web-ele/src/components/db-tree/index.vue
index dc90c79..8dcb0bd 100644
--- a/apps/web-ele/src/components/db-tree/index.vue
+++ b/apps/web-ele/src/components/db-tree/index.vue
@@ -7,11 +7,12 @@
       placeholder="请输入关键字"
       @input="onQueryChanged"
     />
+    <!-- @contextmenu="openBlankContextMenu" -->
     <ElTreeV2
       class="treeLine-2"
       :indent="0"
       ref="treeRef"
-      style="max-width: 600px"
+      
       :data="data"
       :props="props"
       :filter-method="filterMethod"
@@ -19,49 +20,64 @@
       :height="treeHeight"
       @node-expand="onNodeExpand"
       @node-collapse="onNodeCollapse"
-      @contextmenu="openBlankContextMenu"
+      @contextmenu="handleContextMenu"
+      @nodeContextmenu="handleNodeContextMenu"
       highlight-current
       scrollbar-always-on
+      :expand-on-click-node="false"
+      @nodeClick="onNodeSingleClick"
     >
       <template #default="{ node, data: nodeData }">
         <!-- 根据层级生成占位符，level 1 不需要占位 -->
+         <!-- :style="{ paddingLeft: node.isLeaf ? '0px' : '0px' }" -->
         <span v-for="i in (node.level - 1)" :key="i" class="node_nestingLevel_empty"></span>
-        <div class="node-content-wrapper" :style="{ paddingLeft: node.isLeaf ? '0px' : '11px' }">
-          <span class="node-icon-wrapper">
-            <IconifyIcon 
-              v-if="!node.isLeaf" 
-              :icon="node.expanded ? 'ep:remove' : 'ep:circle-plus'" 
-              class="custom-expand-icon"
-            />
-          </span>
-          <template v-if="editingId === nodeData.id">
-            <ElInput
-              :id="`edit-${nodeData.id}`"
-              v-model="editingLabel"
-              @blur="saveEdit"
-              @keydown.enter.prevent="saveEdit"
-              @keydown.esc.prevent="cancelEdit"
-              @click.stop
-              size="small"
-              class="node-edit-input"
-            />
-          </template>
-          <template v-else>
-            <span
-              class="node-label"
-              :style="getNodeStyles(nodeData)"
-              draggable="true"
-              @dragstart="onDragStart(nodeData, $event)"
-              @dragover.prevent="onDragOver(nodeData, $event)"
-              @drop.prevent="onDrop(nodeData, $event)"
-              @dragend="onDragEnd"
-              @contextmenu.stop="(e) => openContextMenu(e, nodeData)"
-              @click="onNodeSingleClick(nodeData, $event)"
-              @dblclick.stop="onNodeDblClick(nodeData, $event)"
-            >
-              {{ nodeData.label }}
+        <div class="node-content-wrapper" :style="{ paddingLeft: '5px' }">
+          <div class="node-left-content">
+            <span class="node-icon-wrapper" >
+              <IconifyIcon 
+                v-if="!node.isLeaf" 
+                :icon="node.expanded ? 'ep:remove' : 'ep:circle-plus'" 
+                class="custom-expand-icon"
+                @click.stop="onNodeIconWrapperClick(node)"
+              />
             </span>
-          </template>
+            <template v-if="editingId === nodeData.id">
+              <ElInput
+                :id="`edit-${nodeData.id}`"
+                v-model="editingLabel"
+                @blur="saveEdit"
+                @keydown.enter.prevent="saveEdit"
+                @keydown.esc.prevent="cancelEdit"
+                @click.stop
+                size="small"
+                class="node-edit-input"
+              />
+            </template>
+            <template v-else>
+               <!-- @contextmenu.stop="(e) => openContextMenu(e, nodeData)" -->
+              <span
+                class="node-label"
+                :style="getNodeStyles(nodeData)"
+                draggable="true"
+                @dragstart="onDragStart(nodeData, $event)"
+                @dragover.prevent="onDragOver(nodeData, $event)"
+                @drop.prevent="onDrop(nodeData, $event)"
+                @dragend="onDragEnd"
+                @dblclick.stop="onNodeDblClick(nodeData, $event)"
+              >
+                {{ nodeData.label }}
+              </span>
+            </template>
+          </div>
+          <!-- 默认是type="info"，有值时type="primary" -->
+          <el-button
+            v-if="node.isLeaf && shouldShowDecideButton(nodeData)"
+            :type="nodeData.selected?'primary':'info'"
+            circle
+            size="small"
+            :class="['decide-button', { 'decide-button-highlight': isDecideHighlighted(nodeData) }]"
+            @click.stop="onDecideClick(nodeData, $event)"
+          >{{ decideText }}</el-button>
         </div>
       </template>
     </ElTreeV2>
@@ -91,18 +107,27 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, computed, watch } from 'vue'
-import { ElTreeV2, ElDropdown, ElDropdownMenu, ElDropdownItem, ElInput } from 'element-plus'
-import type { TreeNodeData, TreeV2Instance } from 'element-plus'
 import { IconifyIcon } from '@vben/icons'
-import { useContextMenu } from './contextMenu'
+import type { TreeNodeData, TreeV2Instance } from 'element-plus'
+import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElInput, ElTreeV2 } from 'element-plus'
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
 import type { ContextMenuHandler, HierarchyConfig } from './contextMenu'
-import { useInlineEdit } from './inlineEdit'
+import { useContextMenu } from './contextMenu'
 import { useDragAndDrop } from './draggable'
-
+import { useInlineEdit } from './inlineEdit'
 defineOptions({ name: 'DbTree' });
-const componentProps = defineProps<{ height?: number; data?: Tree[]; defaultExpandedKeys?: number | string | string[]; contextMenuHandler?: ContextMenuHandler<Tree> | HierarchyConfig; search?: boolean }>()
-const emit = defineEmits<{ (e: 'select', node: Tree): void }>()
+const componentProps = defineProps<{ 
+  height?: number; 
+  data?: Tree[]; 
+  defaultExpandedKeys?: number | string | string[]; 
+  contextMenuHandler?: ContextMenuHandler<Tree> | HierarchyConfig; 
+  search?: boolean; 
+  decide?: boolean; 
+  decideText?: string; 
+  decideHighlightKey?: string;
+  decideFilter?: (node: Tree) => boolean; // 新增：过滤哪些节点可以显示工字按钮
+}>()
+const emit = defineEmits<{ (e: 'select', node: Tree): void; (e: 'edit-save', node: Tree, oldLabel: string, newLabel: string): void; (e: 'decide', node: Tree): void }>()
 
 interface Tree {
   id: string
@@ -122,6 +147,14 @@ watch(
 
 const treeHeight = computed(() => componentProps.height ?? 400)
 const isSearchEnabled = computed(() => componentProps.search ?? true)
+const isDecideEnabled = computed(() => componentProps.decide ?? false)
+const decideText = computed(() => componentProps.decideText ?? '定')
+const decideHighlightKey = computed(() => componentProps.decideHighlightKey ?? '')
+const decideFilter = computed(() => componentProps.decideFilter ?? (() => true)) // 默认所有节点都可以显示
+const isContextMenuEnabled = computed(() => {
+  // console.log(componentProps.contextMenuHandler)
+  return componentProps.contextMenuHandler ?? false
+})
 const props = {
   value: 'id',
   label: 'label',
@@ -173,6 +206,17 @@ const onQueryChanged = (query: string) => {
 const filterMethod = (query: string, node: TreeNodeData) =>
   node.label!.includes(query)
 
+const isDecideHighlighted = (nodeData: Tree) => {
+  const key = decideHighlightKey.value
+  if (!key) return false
+  return Boolean((nodeData as Record<string, any>)[key])
+}
+
+const shouldShowDecideButton = (nodeData: Tree) => {
+  if (!isDecideEnabled.value) return false
+  return decideFilter.value(nodeData)
+}
+
 type LocateResult = { node: Tree; parent: Tree | null; container: Tree[]; index: number }
 
 const locate = (id: string): LocateResult | null => {
@@ -187,36 +231,97 @@ const locate = (id: string): LocateResult | null => {
   }
   return null
 }
-
-const { editingId, editingLabel, editingOriginalLabel, startEdit, saveEdit, cancelEdit } = useInlineEdit<Tree>({ dataRef: data, locate })
+type TreeKey = string | number
+interface TreeNode {
+  key: TreeKey
+  level: number
+  parent?: TreeNode
+  children?: TreeNode[]
+  data: TreeNodeData
+  disabled?: boolean
+  label?: string
+  isLeaf?: boolean
+  expanded?: boolean
+  isEffectivelyChecked?: boolean
+}
+const onNodeIconWrapperClick = (node: TreeNode) => {
+  if (!treeRef.value) return
+  if (node.isLeaf) return
+  if (node.expanded) treeRef.value.collapseNode(node)
+  else treeRef.value.expandNode(node)
+}
+const handleEditSave = async (node: Tree, oldLabel: string, newLabel: string) => {
+  emit('edit-save', node, oldLabel, newLabel)
+}
+const { editingId, editingLabel, editingOriginalLabel, startEdit, saveEdit, cancelEdit } = useInlineEdit<Tree>({ dataRef: data, locate, onSave: handleEditSave })
 const { dropdownRef, position, triggerRef, currentNode, openContextMenu, openBlankContextMenu, closeContextMenu, onGlobalCommand, getMenuItems } = useContextMenu<Tree>({ dataRef: data, treeRef, expandedKeysRef: expandedKeys, locate, startEdit }, componentProps.contextMenuHandler)
 const { draggingId, dropState, getNodeStyles, onDragStart, onDragOver, onDrop, onDragEnd } = useDragAndDrop<Tree>({ dataRef: data, treeRef, expandedKeysRef: expandedKeys, locate })
 
+// 包装右键菜单处理函数，根据 isContextMenuEnabled 决定是否执行
+const handleContextMenu = (e: MouseEvent) => {
+  // 始终阻止浏览器默认右键菜单
+  e.preventDefault()
+  
+  if (isContextMenuEnabled.value) {
+    openBlankContextMenu(e)
+  }
+}
+
+const handleNodeContextMenu = (e: MouseEvent, data: Tree) => {
+  // 始终阻止浏览器默认右键菜单
+  e.preventDefault()
+  
+  if (isContextMenuEnabled.value) {
+    openContextMenu(e, data)
+  }
+}
+
 //防止误触发
 let clickTimer: ReturnType<typeof setTimeout> | null = null
-const clickDelayMs = 250
-const triggerSingleClick = (node: Tree) => {
-  closeContextMenu()
-  emit('select', node)
-}
+
 const onNodeSingleClick = (node: Tree, e: MouseEvent) => {
+  // 清除之前的定时器
   if (clickTimer) {
     clearTimeout(clickTimer)
     clickTimer = null
   }
+  
+  // 单击延迟执行，避免与双击冲突
   clickTimer = setTimeout(() => {
-    triggerSingleClick(node)
+    closeContextMenu()
+    emit('select', node)
     clickTimer = null
-  }, clickDelayMs)
+  }, 250)
 }
+
 const onNodeDblClick = (node: Tree, e: MouseEvent) => {
+  console.log('onNodeDblClick')
+  
+  // 清除单击定时器，避免触发单击事件
   if (clickTimer) {
     clearTimeout(clickTimer)
     clickTimer = null
   }
+  
+  // 直接启动编辑，不需要防抖
   startEdit(node)
 }
 
+const onDecideClick = (node: Tree, e: MouseEvent) => {
+  // 阻止事件冒泡和默认行为
+  e.stopPropagation()
+  e.preventDefault()
+  
+  // 清除可能存在的单击定时器
+  if (clickTimer) {
+    clearTimeout(clickTimer)
+    clickTimer = null
+  }
+  
+  // 触发 decide 事件
+  emit('decide', node)
+}
+
 const onNodeExpand = (data: TreeNodeData) => {
   const key = (data as any)[props.value] as string
   if (!key) return
@@ -233,6 +338,25 @@ const onNodeCollapse = (data: TreeNodeData) => {
   }
 }
 
+// 暴露方法给父组件
+const setCurrentKey = (key: string | number | null) => {
+  if (treeRef.value) {
+    treeRef.value.setCurrentKey(key)
+  }
+}
+
+defineExpose({
+  setCurrentKey
+})
+
+// 组件卸载时清理
+onUnmounted(() => {
+  // 如果 contextMenu 实例有 destroy 方法，调用它
+  if (typeof (dropdownRef.value as any)?.destroy === 'function') {
+    (dropdownRef.value as any).destroy()
+  }
+})
+
 </script>
 
 <style lang="scss" scoped>
@@ -244,9 +368,23 @@ const onNodeCollapse = (data: TreeNodeData) => {
   // gap: 8px;
 }
 .treeLine-2 {
+    :deep(.el-tree__empty-block) {
+      height: v-bind('treeHeight + "px"');
+    }
+  
+    :deep(.el-tree-node.is-current > .el-tree-node__content) {
+      // 设置颜色
+      background-color: #e9ecfc !important; // 透明度为0.2的skyblue，作者比较喜欢的颜色 
+      color: #273fe2; // 节点的字体颜色
+      // font-weight: bold; // 字体加粗
+      box-shadow: inset 2px 0 0 0 #0000ff !important;
+    }
+    // :deep(.el-tree .el-tree-node.is-current > .el-tree-node__content) {
+    //     box-shadow: inset 2px 0 0 0 var(--992e623a);
+    // }
     .node_nestingLevel_empty {
       display: inline-block;
-      padding-left: 18px;
+      padding-left: 13px;
     }
     .node_nestingLevel_empty::before {
       content: '';
@@ -271,6 +409,16 @@ const onNodeCollapse = (data: TreeNodeData) => {
       align-items: center;
       gap: 0px;
       line-height: 1;
+      width: 100%;
+      justify-content: space-between;
+    }
+    
+    .node-left-content {
+      display: flex;
+      align-items: center;
+      gap: 0px;
+      flex: 1;
+      min-width: 0;
     }
     
     .node-icon-wrapper {
@@ -303,19 +451,34 @@ const onNodeCollapse = (data: TreeNodeData) => {
       flex: 1;
       min-width: 100px;
     }
+    
+    .decide-button {
+      width: 20px !important;
+      height: 20px !important;
+      padding: 0 !important;
+      font-size: 12px !important;
+      min-width: 20px !important;
+      margin-left: 4px;
+    }
+    .decide-button-highlight {
+      background-color: #cfe8ff !important;
+      border-color: #cfe8ff !important;
+      color: #1f3b66 !important;
+    }
     /* 选择后面还有 ht_nestingLevel_empty 的元素（不是最后一个） */
     .node_nestingLevel_empty:has(+ .node_nestingLevel_empty)::after {
       /* 你的样式 */
       width: 0px;
     }
     :deep(.el-tree-node){
-      left: -9px !important;
+      // left: -9px !important;
+
     }
     :deep(.el-tree-node__expand-icon){
       display: none !important;
     }
-  //  :deep(.el-tree-node__content){
-  //     display: none !important;
-  //   }
+    :deep(.el-tree-node .el-tree-node__content){
+      // padding-left: 5px !important;
+    }
 }
 </style>
diff --git a/apps/web-ele/src/components/db-tree/inlineEdit.ts b/apps/web-ele/src/components/db-tree/inlineEdit.ts
index ab8d650..e380f25 100644
--- a/apps/web-ele/src/components/db-tree/inlineEdit.ts
+++ b/apps/web-ele/src/components/db-tree/inlineEdit.ts
@@ -7,8 +7,9 @@ type LocateResult<T> = { node: NodeType<T>; parent: NodeType<T> | null; containe
 export const useInlineEdit = <T>(params: {
   dataRef: Ref<NodeType<T>[]>;
   locate: (id: string) => LocateResult<T>;
+  onSave?: (node: NodeType<T>, oldLabel: string, newLabel: string) => void | Promise<void>;
 }) => {
-  const { dataRef, locate } = params
+  const { dataRef, locate, onSave } = params
   const editingId = ref<string | null>(null)
   const editingLabel = ref('')
   const editingOriginalLabel = ref('')
@@ -24,12 +25,18 @@ export const useInlineEdit = <T>(params: {
     })
   }
 
-  const saveEdit = () => {
+  const saveEdit = async () => {
     if (!editingId.value) return
     const target = locate(editingId.value)
     if (!target) { editingId.value = null; return }
     const next = editingLabel.value.trim()
-    if (next) target.node.label = next
+    const oldLabel = editingOriginalLabel.value
+    if (next && next !== oldLabel) {
+      target.node.label = next
+      if (onSave) {
+        await onSave(target.node, oldLabel, next)
+      }
+    }
     dataRef.value = [...dataRef.value]
     editingId.value = null
   }
diff --git a/apps/web-ele/src/router/routes/modules/database.ts b/apps/web-ele/src/router/routes/modules/database.ts
new file mode 100644
index 0000000..8b4419d
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/database.ts
@@ -0,0 +1,18 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/database/entry/add',
+    component: () => import('#/views/database/entry/add.vue'),
+    name: 'EntryAdd',
+    meta: {
+      title: '信息价录入',
+      icon: 'ant-design:history-outlined',
+      activePath: '/database/entry',
+      keepAlive: false,
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/views/database/entry/add.ts b/apps/web-ele/src/views/database/entry/add.ts
new file mode 100644
index 0000000..a1546f9
--- /dev/null
+++ b/apps/web-ele/src/views/database/entry/add.ts
@@ -0,0 +1,182 @@
+import { ref, nextTick } from 'vue'
+import { selectCellBorderStyle } from '#/components/db-hst/base'
+import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
+import Handsontable from 'handsontable'
+export const createUploadPhotoRender = (callbacks: {
+  onPreview: (value: string) => void;
+  onUpload: (row: number, col: number, value: string) => void;
+}) => {
+  return (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
+    td.innerHTML = '';
+    
+    // 创建 flex 容器
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.alignItems = 'center';
+    container.style.justifyContent = 'space-between';
+    container.style.gap = '4px';
+    container.style.width = '100%';
+    container.style.height = '100%';
+    
+    // 左侧图片容器
+    const imgContainer = document.createElement('div');
+    imgContainer.style.flex = '1';
+    imgContainer.style.display = 'flex';
+    imgContainer.style.alignItems = 'center';
+    imgContainer.style.overflow = 'hidden';
+
+    if (value) {
+      const img = document.createElement('img');
+      img.src = value
+      img.style.maxWidth = '25px';
+      img.style.maxHeight = '25px';
+      img.style.objectFit = 'contain';
+      img.style.cursor = 'pointer';
+      
+      // 点击图片预览
+      img.addEventListener('click', (event) => {
+        event.stopPropagation();
+        callbacks.onPreview(value);
+      });
+      
+      img.addEventListener('mousedown', (event) => {
+        event.preventDefault();
+      });
+      imgContainer.appendChild(img);
+    }
+
+    //右侧上传图标
+    const uploadIcon = document.createElement('span');
+    uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M11 16V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16zm-5 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>';
+    uploadIcon.style.cursor = 'pointer';
+    uploadIcon.style.color = '#979797';
+    uploadIcon.style.display = 'flex';
+    uploadIcon.style.alignItems = 'center';
+    uploadIcon.style.flexShrink = '0';
+    
+    uploadIcon.addEventListener('click', (event) => {
+      event.stopPropagation();
+      callbacks.onUpload(row, col, value || '');
+    });
+
+    uploadIcon.addEventListener('mousedown', (event) => {
+      event.preventDefault();
+    });
+
+    container.appendChild(imgContainer);
+    container.appendChild(uploadIcon);
+    td.appendChild(container);
+
+    return td;
+  };
+}
+
+export const createMorePriceRender = (callbacks: {
+  onSelectPrice: (row: number) => void;
+}) => {
+  return (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
+    td.innerHTML = '';
+    td.style.padding = '2px';
+    td.style.display = 'flex';
+    td.style.alignItems = 'center';
+    td.style.justifyContent = 'space-between';
+    td.style.gap = '4px';
+
+    // 左侧价格文本
+    const priceText = document.createElement('span');
+    priceText.textContent = value || '';
+    priceText.style.flex = '1';
+    priceText.style.overflow = 'hidden';
+    priceText.style.textOverflow = 'ellipsis';
+    priceText.style.whiteSpace = 'nowrap';
+
+    // 右侧选择图标
+    const selectIcon = document.createElement('span');
+    selectIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z"/></svg>';
+    selectIcon.style.cursor = 'pointer';
+    selectIcon.style.color = '#979797';
+    selectIcon.style.display = 'flex';
+    selectIcon.style.alignItems = 'center';
+    selectIcon.style.flexShrink = '0';
+    
+    selectIcon.addEventListener('click', (event) => {
+      event.stopPropagation();
+      callbacks.onSelectPrice(row);
+    });
+
+    selectIcon.addEventListener('mousedown', (event) => {
+      event.preventDefault();
+    });
+
+    td.appendChild(priceText);
+    td.appendChild(selectIcon);
+
+    return td;
+  };
+}
+
+export const createIdCellRenderer = (callbacks: {
+  onShowMorePrice: (row: number, col: number, value: any) => void;
+}) => {
+  return (
+    instance: any,
+    TD: HTMLTableCellElement,
+    row: number,
+    col: number,
+    prop: string | number,
+    value: any,
+    cellProperties: any
+  ) => {
+    Handsontable.renderers.TextRenderer(instance, TD, row, col, prop, value, cellProperties)
+    TD.classList.add('ht-id-cell')
+    // TD.style.textAlign = 'center'
+
+    const existingIcon = TD.querySelector('.ht-id-icon') as HTMLElement | null
+    if (existingIcon) existingIcon.remove()
+
+    const iconButton = document.createElement('div')
+    iconButton.className = 'ht-id-icon'
+    iconButton.title = '查看历史价格'
+    iconButton.innerHTML = '<svg t="1766623587261" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13644" width="16" height="16"><path d="M981.25962 291.954992a476.085215 476.085215 0 0 0-110.062711-152.296077 511.919586 511.919586 0 0 0-160.828069-102.383917 546.474158 546.474158 0 0 0-396.73768 0 511.919586 511.919586 0 0 0-162.534468 102.383917A478.218213 478.218213 0 0 0 42.74038 291.954992a451.769035 451.769035 0 0 0-42.659966 187.277249 461.154227 461.154227 0 0 0 127.979897 316.110344l23.036381 196.662441a36.260971 36.260971 0 0 0 35.834371 31.994974 36.260971 36.260971 0 0 0 17.917185-4.692596l148.45668-85.319931a547.327357 547.327357 0 0 0 358.343711-13.651189 511.919586 511.919586 0 0 0 162.534468-102.383917A478.218213 478.218213 0 0 0 981.25962 666.936089a453.902033 453.902033 0 0 0 0-374.981097z m-691.091441 243.161803a55.031355 55.031355 0 1 1 55.031356-55.031355 55.031355 55.031355 0 0 1-53.324957 55.031355z m220.125422 0a55.031355 55.031355 0 1 1 55.031356-55.031355A55.031355 55.031355 0 0 1 512 535.116795z m220.125422 0a55.031355 55.031355 0 1 1 55.031356-55.031355 55.031355 55.031355 0 0 1-53.751557 55.031355z" fill="#1a42e8" p-id="13645"></path></svg>'
+
+    iconButton.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      callbacks.onShowMorePrice(row, col, value)
+    })
+
+    iconButton.addEventListener('mousedown', (event) => {
+      event.preventDefault()
+    })
+
+    TD.appendChild(iconButton)
+  }
+}
+export const contextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
+export const moreContextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/entry/add.vue b/apps/web-ele/src/views/database/entry/add.vue
new file mode 100644
index 0000000..e7ddcaa
--- /dev/null
+++ b/apps/web-ele/src/views/database/entry/add.vue
@@ -0,0 +1,638 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed, readonly, } from 'vue'
+import { Page } from '@vben/common-ui';
+import { ElSplitter,ElSplitterPanel,ElInput,ElCard, ElMessage, ElImage,ElPopover, ElDatePickerPanel,ElText } from 'element-plus';
+import { useElementSize } from '@vueuse/core'
+import { DbTree } from '#/components/db-tree';
+import { DbHst } from '#/components/db-hst';
+import type { UploadProps } from 'element-plus'
+import HistoryDialog from './components/HistoryDialog.vue'
+import { createDateRangeRenderer } from './index'
+import { IconifyIcon } from '@vben/icons';
+import { validatorRow } from '#/components/db-hst/validator'
+import { createUploadPhotoRender, createMorePriceRender, createIdCellRenderer, contextMenuItems, moreContextMenuItems } from './add'
+import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
+// import { sourceDataObject } from '#/components/db-hst/mockData'
+const containerRef = ref<HTMLElement | null>(null)
+const { height: containerHeight } = useElementSize(containerRef)
+// const topContainerRef = ref<HTMLElement | null>(null)
+// const { height: topContainerHeight } = useElementSize(topContainerRef)
+const hstContainerRef = ref<HTMLElement | null>(null)
+const { height: hstContainerHeight } = useElementSize(hstContainerRef)
+
+type Tree = { id: string; label: string; children?: Tree[] }
+const categoryTreeData = ref<Tree[]>([
+  {
+    id: '1',
+    label: '行业总类',
+    children: [
+      {
+        id: '2',
+        label: '广东',
+        children: [
+          { id: '3', label: '行业1' },
+          { id: '4', label: '行业2' },
+          { id: '5', label: '行业3' }
+        ]
+      }
+    ]
+  },
+  {
+    id: '11',
+    label: '行业2',
+    children: [
+      {
+        id: '12',
+        label: '广西',
+        children: [
+          { id: '13', label: '行业5' },
+          { id: '14', label: '行业6' },
+          { id: '15', label: '行业7' }
+        ]
+      }
+    ]
+  }
+])
+// const colHeaders = ref<string[]>(topColHeaders)
+
+const hstRef = ref<any>(null)
+
+
+
+
+
+// 创建回调函数
+const handlePhotoPreview = (value: string) => {
+  previewImageUrl.value = value
+  previewVisible.value = true
+}
+
+const handlePhotoUpload = (row: number, col: number, value: string) => {
+  currentUploadRow.value = row
+  currentUploadCol.value = col
+  uploadImageUrl.value = value
+  uploadDialogVisible.value = true
+}
+
+const handlePriceSelect = (row: number) => {
+  currentPriceRow.value = row
+  morePriceDialogVisible.value = true
+}
+
+const handleShowMorePrice = (row: number, col: number, value: any) => {
+  currentPriceRow.value = row
+  morePriceDialogVisible.value = true
+  console.log('查看历史价格:', { row, col, value })
+}
+const handleMorePriceDialogClose = () => {
+  morePriceDialogVisible.value = false
+}
+const handleSelectPrice = (row: any) => {
+  // 选择价格后更新表格数据
+  if (hstRef.value?.hotInstance) {
+    const colIndex = hstRef.value.hotInstance.propToCol('priceExcludeTax')
+    hstRef.value.hotInstance.setDataAtCell(currentPriceRow.value, colIndex, row.priceExcludeTax)
+    
+    const taxRateIndex = hstRef.value.hotInstance.propToCol('taxRate')
+    hstRef.value.hotInstance.setDataAtCell(currentPriceRow.value, taxRateIndex, row.taxRate)
+    
+    const priceIncludeTaxIndex = hstRef.value.hotInstance.propToCol('priceIncludeTax')
+    hstRef.value.hotInstance.setDataAtCell(currentPriceRow.value, priceIncludeTaxIndex, row.priceIncludeTax)
+  }
+  
+  ElMessage.success('价格已更新')
+  handleMorePriceDialogClose()
+}
+// 上传处理
+const handleUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
+  // 这里假设上传成功后返回图片URL
+  // 实际项目中需要根据后端返回的数据结构调整
+  const imageUrl = URL.createObjectURL(uploadFile.raw!)
+  uploadImageUrl.value = imageUrl
+  
+  // 更新表格数据
+  if (hstRef.value?.hotInstance) {
+    hstRef.value.hotInstance.setDataAtCell(currentUploadRow.value, currentUploadCol.value, imageUrl)
+  }
+}
+const handleHistoryConfirm = (node: any) => {
+  console.log('确认选择的历史节点:', node)
+  // 这里可以根据选中的节点加载对应的表格数据
+}
+
+// 更多价格对话框相关
+const morePriceDialogVisible = ref(false)
+const currentPriceRow = ref<number>(0)
+const morePriceTableData = ref<any[]>([
+  {
+    id: 1,
+    priceDate: '2024-01',
+    priceExcludeTax: '1250.00',
+    taxRate: '13',
+    priceIncludeTax: '1412.50'
+  },
+  {
+    id: 2,
+    priceDate: '2024-02',
+    priceExcludeTax: '1280.00',
+    taxRate: '13',
+    priceIncludeTax: '1446.40'
+  },
+  {
+    id: 3,
+    priceDate: '2024-03',
+    priceExcludeTax: '1300.00',
+    taxRate: '13',
+    priceIncludeTax: '1469.00'
+  }
+])
+
+// 历史信息对话框相关
+const historyDialogVisible = ref(false)
+
+
+const columns = ref<any[]>([
+  {type:'text',data:'number',title:'序号'},
+  {type:'text',data:'code',title:'编码'},
+  {type:'text',data:'name',title:'名称'},
+  {type:'text',data:'model',title:'型号规格'},
+  {type:'text',data:'unit',title:'单位',width: 50, className: 'htCenter'},
+  {type:'numeric',data:'priceExcludeTax',title:'除税编制价'},
+  {type:'numeric',data:'taxRate',title:'税率%',width: 60, renderer: createIdCellRenderer({
+    onShowMorePrice: handleShowMorePrice
+  }), className: 'ht-id-cell htCenter'},
+  {type:'numeric',data:'priceIncludeTax',title:'含税编制价'},
+  {type:'text',data:'drawing',title:'图样(仅供参考)',readOnly: true,
+    renderer: createUploadPhotoRender({
+    onPreview: handlePhotoPreview,
+    onUpload: handlePhotoUpload
+  })},
+  {type:'text',data:'category',title:'分类',renderer: 'db-dropdown',
+  source: ['措施类1', '措施类2', '措施类3', '措施类3'],
+  readOnly: true,},
+  // {type:'text',data:'servicePrice',title:'劳务单价',renderer: createMorePriceRender({
+  //   onSelectPrice: handlePriceSelect
+  // })},
+  {type:'text',data:'remark',title:'备注'},
+// {type:'text',data:'',title:'操作'},
+])
+// const colHeaders = ref<string[]>(topColHeaders)
+
+
+const mockData = ()=>{
+    // 生成模拟数据
+    const mockData = Array.from({ length: 30 }, (_, index) => ({
+      code: `DTL${String(index + 1).padStart(6, '0')}`,
+      name: `明细项目${index + 1}`,
+      model: `型号${index + 1}-规格${index + 1}`,
+      unit: ['个', '米', '吨', '套', '台'][index % 5],
+      priceExcludeTax: (Math.random() * 1000 + 100).toFixed(2),
+      taxRate: ['13', '9', '6', '3'][index % 4],
+      priceIncludeTax: (Math.random() * 1200 + 120).toFixed(2),
+      drawing: ``,
+      category: ['材料', '设备', '人工', '机械'][index % 4],
+      servicePrice: (Math.random() * 500 + 50).toFixed(2),
+      remark: `备注${index + 1}`,
+    }))
+    return mockData;
+}
+let dbSettings = {
+  data:mockData(),
+  columns: columns.value,
+  contextMenu: {
+    items: {
+      row_above: {
+        name: '在上方插入行',
+        // callback: function(key: string, selection: any[]) {
+        //   const selectedRow = selection[0].start.row
+        //   this.alter('insert_row_above', selectedRow, 1)
+        // },
+      },
+      row_below: {
+        name: '在下方插入行',
+        // callback: function(key: string, selection: any[]) {
+        //   const selectedRow = selection[0].start.row
+        //   this.alter('insert_row_below', selectedRow, 1)
+        // },
+      },
+      remove_row: {
+        name: '移除行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowData = this.getSourceDataAtRow(selectedRow)
+          
+          if (rowData?.id) {
+            this.alter('remove_row', selectedRow, 1)
+            // 如果有 ID，可以调用删除 API
+            // deleteResourceMerged(rowData.id).then(res => {
+            //   console.log('deleteResourceMerged',res)
+            // })
+          } else {
+            // 没有 ID 直接删除
+            this.alter('remove_row', selectedRow, 1)
+          }
+        },
+      }
+    }
+  },
+  afterChange(changes, source)  {
+    console.log('source',source)
+    if (!changes || source === 'loadData' || source === 'updateId') return
+    
+    // 如果有空单元格，提前返回，不执行后续操作
+    if(!validatorRow(this, changes)){
+      return
+    }
+    //console.log('currChange', currChange)
+    const row = changes[0][0]; // 获取行索引
+    const rowData = this.getSourceDataAtRow(row)
+    
+    // 构建更新数据
+    const sendData: any = {
+      // catalogItemId: catalogItemId.value,
+      // categoryId: categoryId,
+      ...rowData
+    }
+
+    if (rowData.id == null) {
+      console.log('moreDbSettings-create',  sendData )
+      // 调用创建接口
+      // createResourceItems(sendData).then(res => {
+      //   console.log('createResourceItems', res)
+      //   // 更新当前行ID - 使用自定义source避免循环
+      //   this.setDataAtRowProp(row, 'id', res, 'updateId');
+      //   ElMessage.success('新增成功')
+      // }).catch(err => {
+      //   console.error('新增失败', err)
+      //   // ElMessage.error('新增失败')
+      // })
+    } else {
+      // 调用更新接口
+      console.log('moreDbSettings-update', sendData)
+      // 实现更新接口调用
+      // updateResourceItems(sendData).then(res => {
+      //   console.log('updateResourceItems', res)
+      // }).catch(err => {
+      //   console.error('更新失败', err)
+      //   // ElMessage.error('更新失败')
+      // })
+    }
+  }
+}
+
+// 上传对话框相关
+const uploadDialogVisible = ref(false)
+const currentUploadRow = ref<number>(0)
+const currentUploadCol = ref<number>(0)
+const uploadImageUrl = ref<string>('')
+  // 图片预览相关
+const previewImageUrl = ref<string>('')
+const previewVisible = ref(false)
+const handleBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  if (!rawFile.type.startsWith('image/')) {
+    console.error('只能上传图片文件!')
+    return false
+  }
+  if (rawFile.size / 1024 / 1024 > 5) {
+    console.error('图片大小不能超过 5MB!')
+    return false
+  }
+  return true
+}
+
+const handleUploadChange: UploadProps['onChange'] = (uploadFile) => {
+  if (uploadFile.raw) {
+    const imageUrl = URL.createObjectURL(uploadFile.raw)
+    uploadImageUrl.value = imageUrl
+    
+    // 更新表格数据
+    if (hstRef.value?.hotInstance) {
+      hstRef.value.hotInstance.setDataAtCell(currentUploadRow.value, currentUploadCol.value, imageUrl)
+    }
+    handleDialogClose()
+  }
+}
+
+const handleRemoveImage = () => {
+  uploadImageUrl.value = ''
+  if (hstRef.value?.hotInstance) {
+    hstRef.value.hotInstance.setDataAtCell(currentUploadRow.value, currentUploadCol.value, '')
+  }
+}
+
+const handleDialogClose = () => {
+  uploadDialogVisible.value = false
+}
+
+const handlePreviewClose = () => {
+  previewVisible.value = false
+  previewImageUrl.value = ''
+}
+
+
+const categoryHandleSelect = (node: Tree) => {
+  console.log('categoryhandleSelect',node)
+}
+const detailHandleSelect = (node: Tree) => {
+  // if (topHstRef.value && typeof topHstRef.value.loadData === 'function') {
+  //   // console.log('hstData.value',hstData.value)
+  //   // topHstRef.value.loadData(topHstData.value)
+  // }
+}
+const search = ref()
+const handleQuery = () => {
+  console.log('handleQuery')
+}
+
+const moreHstRef = ref()
+// Popover 相关
+const popoverDateRangeRef = ref()
+const visibleDateRange = ref(false)
+const popoverDate = ref<[Date, Date]>()
+const currentEditingRow = ref()
+const handleCalendarChange = (val: any) =>{
+  nextTick(()=>{
+    console.log('handleCalendarChange',val, popoverDate.value)
+    if(val[0] != null && val[1] != null){
+      visibleDateRange.value = false
+      setTimeout(() => {
+        // 更新当前行的数据
+        if (currentEditingRow.value >= 0 && popoverDate.value && hstRef.value?.hotInstance) {
+          const [startDate, endDate] = popoverDate.value
+          const dateRangeStr = `${startDate} ~ ${endDate}`
+          
+          // 更新 Handsontable 中的数据
+          moreHstRef.value.hotInstance.setDataAtRowProp(currentEditingRow.value, 'time', dateRangeStr)
+          
+          console.log(`已更新第 ${currentEditingRow.value} 行的价格时间段为: ${dateRangeStr}`)
+        }
+      }, 200);
+    }
+  })
+}
+// 创建更多价格时间段渲染器
+const dateRangeRenderer = createDateRangeRenderer({
+  onDateIconClick: (row: number, data: any, event: MouseEvent) => {
+    console.log('时间图标点击:', data)
+    // 先关闭 popover
+    visibleDateRange.value = false
+    // 使用 nextTick 确保 DOM 更新后再打开
+    nextTick(() => {
+      currentEditingRow.value = row
+      popoverDateRangeRef.value = event.target
+      visibleDateRange.value = true
+    })
+  }
+})
+
+const moreColumns = ref<any[]>([
+  {type:'text',data:'time',title:'价格时间段',width: 200, renderer: dateRangeRenderer},
+  {type:'numeric',data:'priceExcludeTax',title:'除税单价'},
+  {type:'numeric',data:'taxRate',title:'税率%',width: 60},
+  {type:'numeric',data:'priceIncludeTax',title:'含税单价'},
+])
+let moreDbSettings = {
+  data: [],
+  columns: moreColumns.value,
+  height: 300,
+  contextMenu: {
+    items: {
+      row_above: {
+        name: '在上方插入行',
+        // callback: function(key: string, selection: any[]) {
+        //   const selectedRow = selection[0].start.row
+        //   this.alter('insert_row_above', selectedRow, 1)
+        // },
+      },
+      row_below: {
+        name: '在下方插入行',
+        // callback: function(key: string, selection: any[]) {
+        //   const selectedRow = selection[0].start.row
+        //   this.alter('insert_row_below', selectedRow, 1)
+        // },
+      },
+      remove_row: {
+        name: '移除行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowData = this.getSourceDataAtRow(selectedRow)
+          
+          if (rowData?.id) {
+            this.alter('remove_row', selectedRow, 1)
+            // 如果有 ID，可以调用删除 API
+            // deleteResourceMerged(rowData.id).then(res => {
+            //   console.log('deleteResourceMerged',res)
+            // })
+          } else {
+            // 没有 ID 直接删除
+            this.alter('remove_row', selectedRow, 1)
+          }
+        },
+      }
+    }
+  },
+  afterChange(changes, source)  {
+    console.log('source',source)
+    if (!changes || source === 'loadData' || source === 'updateId') return
+    
+    // 如果有空单元格，提前返回，不执行后续操作
+    if(!validatorRow(this, changes)){
+      return
+    }
+    //console.log('currChange', currChange)
+    const row = changes[0][0]; // 获取行索引
+    const rowData = this.getSourceDataAtRow(row)
+    
+    // 构建更新数据
+    const sendData: any = {
+      // catalogItemId: catalogItemId.value,
+      // categoryId: categoryId,
+      ...rowData
+    }
+
+    if (rowData.id == null) {
+      console.log('moreDbSettings-create',  sendData )
+      // 调用创建接口
+      // createResourceItems(sendData).then(res => {
+      //   console.log('createResourceItems', res)
+      //   // 更新当前行ID - 使用自定义source避免循环
+      //   this.setDataAtRowProp(row, 'id', res, 'updateId');
+      //   ElMessage.success('新增成功')
+      // }).catch(err => {
+      //   console.error('新增失败', err)
+      //   // ElMessage.error('新增失败')
+      // })
+    } else {
+      // 调用更新接口
+      console.log('moreDbSettings-update', sendData)
+      // 实现更新接口调用
+      // updateResourceItems(sendData).then(res => {
+      //   console.log('updateResourceItems', res)
+      // }).catch(err => {
+      //   console.error('更新失败', err)
+      //   // ElMessage.error('更新失败')
+      // })
+    }
+  }
+}
+
+function onBottomHeight(height: number){
+  if (hstRef.value?.hotInstance) {
+    hstRef.value.hotInstance.updateSettings({
+      height: height
+    })
+    
+    // hstRef.value.loadData(bootomMock())
+    hstRef.value.hotInstance.render()
+    console.log('onResizeEnd-hstRef',height);
+  }
+}
+
+
+onMounted(() => {
+  setTimeout(() => {
+    onBottomHeight(hstContainerHeight.value)
+  }, 200);
+})
+onUnmounted(() => {
+})
+
+</script>
+
+<template>
+<Page auto-content-height>
+  <ElCard class="w-full border-radius-0" body-class="!p-0" header-class="!p-1">
+    <template #header>
+      <div class="card-header">
+        <ElText class="mx-1">信息价名称: 珠海市</ElText>
+        <!-- <span>信息价名称: 珠海市</span> -->
+        <ElInput
+          v-model="search"
+          style="width: 300px"
+          placeholder="请输入"
+          class="input-with-select"
+          size="small"
+        >
+          <template #append>
+            <ElButton @click="handleQuery" size="small"><IconifyIcon icon="ep:search"/></ElButton>
+          </template>
+        </ElInput>
+        <ElButton @click="historyDialogVisible = true" type="primary" size="small" style="float: right;">调用历史信息</ElButton>
+      </div>
+    </template>
+  </ElCard>
+   <ElSplitter >
+      <ElSplitterPanel size="15%" :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
+            <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2"  :search="false" />
+        </ElCard>
+      </ElSplitterPanel>
+      <ElSplitterPanel :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="hstContainerRef">
+            <DbHst ref="hstRef" :settings="dbSettings" :contextMenuItems="contextMenuItems"></DbHst>
+        </ElCard>
+      </ElSplitterPanel>
+    </ElSplitter>
+    <!-- 历史信息对话框 -->
+    <HistoryDialog 
+      v-model:visible="historyDialogVisible"
+      @confirm="handleHistoryConfirm"
+    />
+    <!-- 上传图片对话框 -->
+    <ElDialog 
+      v-model="uploadDialogVisible" 
+      title="上传图片" 
+      width="500px"
+      @close="handleDialogClose"
+    >
+      <div class="upload-container">
+        <!-- <div v-if="uploadImageUrl" class="image-preview">
+          <img :src="uploadImageUrl" alt="预览图片" />
+          <ElButton type="danger" size="small" @click="handleRemoveImage" class="remove-btn">
+            删除图片
+          </ElButton>
+        </div> -->
+        
+        <ElUpload
+          class="upload-demo"
+          drag
+          :auto-upload="false"
+          :show-file-list="false"
+          :before-upload="handleBeforeUpload"
+          :on-change="handleUploadChange"
+          accept="image/*"
+        >
+          <div class="flex flex-col items-center justify-center py-5">
+            <IconifyIcon icon="ep:upload-filled" class="mb-2.5 text-gray-400" style="font-size: 2.75rem !important;"/>
+            <div class="ant-upload-text text-base text-gray-400">
+                拖拽文件至此，或者
+                <em class="cursor-pointer not-italic text-blue-500">
+                  选择文件
+                </em>
+              </div>
+              <div class="mt-2.5 text-sm text-gray-400">
+                已支持 pg/png 每个文件不超过
+                1 MB。
+              </div>
+          </div>
+        </ElUpload>
+      </div>
+      
+      <template #footer>
+        <ElButton @click="handleDialogClose">关闭</ElButton>
+      </template>
+    </ElDialog>
+
+    <!-- 图片预览对话框 -->
+    <ElDialog 
+      v-model="previewVisible" 
+      title="图片预览" 
+      width="800px"
+      @close="handlePreviewClose"
+    >
+      <div class="preview-image-container">
+        <ElImage 
+          :src="previewImageUrl" 
+          fit="contain"
+          :preview-src-list="[previewImageUrl]"
+          :initial-index="0"
+          style="width: 100%; max-height: 600px;"
+        />
+      </div>
+      
+      <template #footer>
+        <ElButton @click="handlePreviewClose">关闭</ElButton>
+      </template>
+    </ElDialog>
+
+    <!-- 更多价格对话框 -->
+    <ElDialog 
+      v-model="morePriceDialogVisible" 
+      title="历史价格信息" 
+      width="700px"
+      @close="handleMorePriceDialogClose"
+    >
+      <div class="more-price-container">
+        <DbHst ref="moreHstRef" :settings="moreDbSettings" :contextMenuItems="moreContextMenuItems"></DbHst>
+      </div>
+      
+      <template #footer>
+        <ElButton @click="handleMorePriceDialogClose">关闭</ElButton>
+      </template>
+    </ElDialog>
+
+    <ElPopover
+      :virtual-ref="popoverDateRangeRef"
+      virtual-triggering
+      :visible="visibleDateRange"
+      :popper-style="{padding: '0px !important'}"
+      :width="648"
+    >
+      <ElDatePickerPanel v-model="popoverDate" type="daterange" size="small" @calendar-change="handleCalendarChange" value-format="YYYY-MM-DD"/>
+    </ElPopover>
+</Page>
+</template>
+
+<style lang="css">
+    
+</style>
diff --git a/apps/web-ele/src/views/database/entry/components/AddDialog.vue b/apps/web-ele/src/views/database/entry/components/AddDialog.vue
new file mode 100644
index 0000000..99219ad
--- /dev/null
+++ b/apps/web-ele/src/views/database/entry/components/AddDialog.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElMessage } from 'element-plus'
+
+interface AddForm {
+  name: string
+  priceDate: string
+}
+
+interface AttachmentData {
+  id: number
+  name: string
+  priceDate: string
+  attachment: string
+  attachmentUrl: string
+}
+
+const props = defineProps<{
+  visible: boolean
+  data: AttachmentData[]
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'update:data': [value: AttachmentData[]]
+}>()
+
+const addFormRef = ref()
+const addForm = ref<AddForm>({
+  name: '',
+  priceDate: ''
+})
+
+const addFormRules = {
+  name: [
+    { required: true, message: '请输入信息价名称', trigger: 'blur' }
+  ],
+  priceDate: [
+    { required: true, message: '请选择价格时间', trigger: 'change' }
+  ]
+}
+
+const handleSubmit = async () => {
+  if (!addFormRef.value) return
+  
+  await addFormRef.value.validate((valid: boolean) => {
+    if (valid) {
+      const newId = props.data.length > 0 
+        ? Math.max(...props.data.map(item => item.id)) + 1 
+        : 1
+      
+      const newData = [...props.data, {
+        id: newId,
+        name: addForm.value.name,
+        priceDate: addForm.value.priceDate,
+        attachment: '',
+        attachmentUrl: ''
+      }]
+      
+      emit('update:data', newData)
+      ElMessage.success('新增成功')
+      handleClose()
+    } else {
+      ElMessage.error('请填写完整信息')
+      return false
+    }
+  })
+}
+
+const handleClose = () => {
+  addFormRef.value?.resetFields()
+  addForm.value = {
+    name: '',
+    priceDate: ''
+  }
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <ElDialog 
+    :model-value="visible"
+    title="新增信息价" 
+    width="500px"
+    @update:model-value="emit('update:visible', $event)"
+    @close="handleClose"
+  >
+    <ElForm 
+      ref="addFormRef" 
+      :model="addForm" 
+      :rules="addFormRules" 
+      label-width="120px"
+    >
+      <ElFormItem label="信息价名称" prop="name">
+        <ElInput 
+          v-model="addForm.name" 
+          placeholder="请输入信息价名称"
+          clearable
+        />
+      </ElFormItem>
+      
+      <ElFormItem label="价格时间" prop="priceDate">
+        <ElDatePicker
+          v-model="addForm.priceDate"
+          type="daterange"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          style="width: 100%"
+        />
+      </ElFormItem>
+    </ElForm>
+    
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <ElButton @click="handleClose">取消</ElButton>
+        <ElButton type="primary" @click="handleSubmit">确定</ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+:deep(.el-form) {
+  padding: 20px 20px 0;
+}
+</style>
diff --git a/apps/web-ele/src/views/database/entry/components/AttachmentDialog.vue b/apps/web-ele/src/views/database/entry/components/AttachmentDialog.vue
new file mode 100644
index 0000000..f9b066f
--- /dev/null
+++ b/apps/web-ele/src/views/database/entry/components/AttachmentDialog.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElDialog, ElDatePicker, ElTable, ElTableColumn, ElButton, ElMessage } from 'element-plus'
+
+interface AttachmentData {
+  id: number
+  name: string
+  priceDate: string
+  attachment: string
+  attachmentUrl: string
+}
+
+const props = defineProps<{
+  visible: boolean
+  data: AttachmentData[]
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'update:data': [value: AttachmentData[]]
+}>()
+
+const attachmentDateRange = ref<[Date, Date] | null>(null)
+
+const filteredAttachmentData = computed(() => {
+  if (!attachmentDateRange.value || attachmentDateRange.value.length !== 2) {
+    return props.data
+  }
+  
+  const [startDate, endDate] = attachmentDateRange.value
+  return props.data.filter(item => {
+    const itemDate = new Date(item.priceDate)
+    return itemDate >= startDate && itemDate <= endDate
+  })
+})
+
+const handleUpload = (row: AttachmentData) => {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = '.pdf,.doc,.docx,.xls,.xlsx,.zip'
+  
+  input.onchange = (e: any) => {
+    const file = e.target.files[0]
+    if (file) {
+      const fileUrl = URL.createObjectURL(file)
+      row.attachment = file.name
+      row.attachmentUrl = fileUrl
+      ElMessage.success('上传成功')
+    }
+  }
+  
+  input.click()
+}
+
+const handleDownload = (row: AttachmentData) => {
+  if (!row.attachmentUrl && !row.attachment) {
+    ElMessage.warning('暂无附件可下载')
+    return
+  }
+  
+  if (row.attachmentUrl) {
+    const link = document.createElement('a')
+    link.href = row.attachmentUrl
+    link.download = row.attachment
+    link.click()
+    ElMessage.success('下载成功')
+  } else {
+    ElMessage.info('模拟下载: ' + row.attachment)
+  }
+}
+
+const handleDelete = (row: AttachmentData) => {
+  const index = props.data.findIndex(item => item.id === row.id)
+  if (index > -1) {
+    const newData = [...props.data]
+    newData.splice(index, 1)
+    emit('update:data', newData)
+    ElMessage.success('删除成功')
+  }
+}
+
+const handleClose = () => {
+  attachmentDateRange.value = null
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <ElDialog 
+    :model-value="visible"
+    title="附件管理" 
+    width="900px"
+    @update:model-value="emit('update:visible', $event)"
+    @close="handleClose"
+  >
+    <div class="attachment-container">
+      <div class="mb-4  items-center gap-2">
+        <span>价格时间段：</span>
+        <ElDatePicker
+          v-model="attachmentDateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          style="width: 300px"
+        />
+      </div>
+
+      <ElTable :data="filteredAttachmentData" border stripe style="width: 100%">
+        <ElTableColumn prop="name" label="信息价名称" width="200" />
+        <ElTableColumn prop="priceDate" label="价格时间段" width="150" />
+        <ElTableColumn prop="attachment" label="附件" min-width="200">
+          <template #default="{ row }">
+            <span v-if="row.attachment">{{ row.attachment }}</span>
+            <span v-else class="text-gray-400">暂无附件</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <div class="flex gap-2">
+              <ElButton type="primary" size="small" link @click="handleUpload(row)">
+                上传
+              </ElButton>
+              <ElButton 
+                type="success" 
+                size="small" 
+                @click="handleDownload(row)"
+                :disabled="!row.attachment"
+                link
+              >
+                下载
+              </ElButton>
+              <ElButton type="danger" size="small" link @click="handleDelete(row)">
+                删除
+              </ElButton>
+            </div>
+          </template>
+        </ElTableColumn>
+      </ElTable>
+    </div>
+    
+    <template #footer>
+      <ElButton @click="handleClose">关闭</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+.attachment-container {
+  padding: 10px 0;
+}
+</style>
diff --git a/apps/web-ele/src/views/database/entry/components/CopyDialog.vue b/apps/web-ele/src/views/database/entry/components/CopyDialog.vue
new file mode 100644
index 0000000..a806b2c
--- /dev/null
+++ b/apps/web-ele/src/views/database/entry/components/CopyDialog.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ElDialog, ElTable, ElTableColumn, ElButton, ElMessage } from 'element-plus'
+
+interface CopyData {
+  id: number
+  serialNumber: string
+  tenantName: string
+  specialty: string
+  region: string
+  priceDate: string
+  priceName: string
+  priceCount: number
+  attachment: string
+  published: boolean
+}
+
+const props = defineProps<{
+  visible: boolean
+  data: CopyData[]
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'update:data': [value: CopyData[]]
+}>()
+
+const handleTogglePublish = (row: CopyData) => {
+  row.published = !row.published
+  const status = row.published ? '已发布' : '未发布'
+  ElMessage.success(`状态已更新为：${status}`)
+}
+
+const handleClose = () => {
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <ElDialog 
+    :model-value="visible"
+    title="软件商信息价管理" 
+    width="1200px"
+    @update:model-value="emit('update:visible', $event)"
+    @close="handleClose"
+  >
+    <div class="copy-container">
+      <ElTable :data="data" border stripe style="width: 100%" max-height="600">
+        <ElTableColumn prop="serialNumber" label="序号" width="80" fixed="left" />
+        <ElTableColumn prop="tenantName" label="租户名称" width="120" />
+        <ElTableColumn prop="specialty" label="专业" width="120" />
+        <ElTableColumn prop="region" label="地区" width="120" />
+        <ElTableColumn prop="priceDate" label="价格时间段" width="120" />
+        <ElTableColumn prop="priceName" label="信息价名称" width="150" />
+        <ElTableColumn prop="priceCount" label="信息价条数" width="120" align="center" />
+        <ElTableColumn prop="attachment" label="附件" min-width="150">
+          <template #default="{ row }">
+            <span v-if="row.attachment">{{ row.attachment }}</span>
+            <span v-else class="text-gray-400">暂无附件</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="操作" width="120" fixed="right" align="center">
+          <template #default="{ row }">
+            <ElButton 
+              :type="row.published ? 'success' : 'info'" 
+              size="small" 
+              @click="handleTogglePublish(row)"
+            >
+              {{ row.published ? '已发布' : '未发布' }}
+            </ElButton>
+          </template>
+        </ElTableColumn>
+      </ElTable>
+    </div>
+    
+    <template #footer>
+      <ElButton @click="handleClose">关闭</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+.copy-container {
+  padding: 10px 0;
+}
+</style>
diff --git a/apps/web-ele/src/views/database/entry/components/HistoryDialog.vue b/apps/web-ele/src/views/database/entry/components/HistoryDialog.vue
new file mode 100644
index 0000000..af6cf80
--- /dev/null
+++ b/apps/web-ele/src/views/database/entry/components/HistoryDialog.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElDialog, ElRow, ElCol, ElTreeV2, ElTable, ElTableColumn, ElButton, ElSplitter, ElSplitterPanel, ElImage } from 'element-plus'
+import { useElementSize } from '@vueuse/core'
+import { DbTree } from '#/components/db-tree';
+const containerRef = ref<HTMLElement | null>(null)
+const { height: containerHeight } = useElementSize(containerRef)
+interface HistoryTreeNode {
+  id: string
+  label: string
+  children?: HistoryTreeNode[]
+}
+
+interface HistoryTableData {
+  id: number
+  name: string
+  model: string
+  unit: string
+  drawing: string
+  category: string
+}
+
+const props = defineProps<{
+  visible: boolean
+  // treeData: HistoryTreeNode[]
+  // tableData: HistoryTableData[]
+}>()
+const treeData = ref<HistoryTreeNode[]>([
+  {
+    id: '1',
+    label: '2024年',
+    children: [
+      {
+        id: '1-1',
+        label: '2024-01',
+        children: [
+          { id: '1-1-1', label: '广东省信息价' },
+          { id: '1-1-2', label: '广西省信息价' }
+        ]
+      },
+      {
+        id: '1-2',
+        label: '2024-02',
+        children: [
+          { id: '1-2-1', label: '广东省信息价' },
+          { id: '1-2-2', label: '广西省信息价' }
+        ]
+      }
+    ]
+  },
+  {
+    id: '2',
+    label: '2023年',
+    children: [
+      {
+        id: '2-1',
+        label: '2023-12',
+        children: [
+          { id: '2-1-1', label: '广东省信息价' },
+          { id: '2-1-2', label: '广西省信息价' }
+        ]
+      }
+    ]
+  }
+])
+
+const tableData = ref<HistoryTableData[]>([
+  {
+    id: 1,
+    name: '水泥',
+    model: 'P.O 42.5',
+    unit: '吨',
+    drawing: 'https://via.placeholder.com/400x300',
+    category: '材料'
+  },
+  {
+    id: 2,
+    name: '钢筋',
+    model: 'HRB400E Φ12',
+    unit: '吨',
+    drawing: 'https://via.placeholder.com/400x300',
+    category: '材料'
+  },
+  {
+    id: 3,
+    name: '混凝土',
+    model: 'C30',
+    unit: '立方米',
+    drawing: '',
+    category: '材料'
+  },
+  {
+    id: 4,
+    name: '砖',
+    model: 'MU10',
+    unit: '千块',
+    drawing: 'https://via.placeholder.com/400x300',
+    category: '材料'
+  },
+  {
+    id: 5,
+    name: '挖掘机',
+    model: '1m³',
+    unit: '台班',
+    drawing: '',
+    category: '机械'
+  },
+  {
+    id: 4,
+    name: '砖',
+    model: 'MU10',
+    unit: '千块',
+    drawing: 'https://via.placeholder.com/400x300',
+    category: '材料'
+  },
+  {
+    id: 5,
+    name: '挖掘机',
+    model: '1m³',
+    unit: '台班',
+    drawing: '',
+    category: '机械'
+  }
+])
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'confirm': [node: any]
+}>()
+
+const selectedHistoryNode = ref<any>(null)
+
+const handleTreeSelect = (node: any) => {
+  selectedHistoryNode.value = node
+  console.log('选中的历史节点:', node)
+}
+const handleSelectionChange = (newSelection: any[]) => {
+  console.log('handleSelectionChange:', newSelection)
+}
+
+const handleConfirm = () => {
+  // emit('confirm', selectedHistoryNode.value)
+  handleClose()
+}
+
+const handleClose = () => {
+  // selectedHistoryNode.value = null
+  emit('update:visible', false)
+}
+</script>
+
+<template>
+  <ElDialog 
+    :model-value="visible"
+    title="调用历史信息" 
+    width="50%"
+    @update:model-value="emit('update:visible', $event)"
+    @close="handleClose"
+  >
+    <div class="history-container" ref="containerRef">
+      <ElSplitter >
+      <ElSplitterPanel size="20%" :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
+            <DbTree :height="containerHeight" :data="treeData" @select="handleTreeSelect" :defaultExpandedKeys="2"  :search="false" />
+        </ElCard>
+      </ElSplitterPanel>
+      <ElSplitterPanel :min="200">
+        <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
+            <ElTable :data="tableData" border stripe style="width: 100%" height="380" @selection-change="handleSelectionChange">
+              <ElTableColumn type="selection" width="55" />
+              <ElTableColumn prop="name" label="名称" width="150" />
+              <ElTableColumn prop="model" label="型号规格" width="150" />
+              <ElTableColumn prop="unit" label="单位" width="100" align="center" />
+              <ElTableColumn prop="drawing" label="图样(仅供参考)" width="150" align="center">
+                <template #default="{ row }">
+                  <ElImage 
+                    v-if="row.drawing"
+                    :src="row.drawing" 
+                    :preview-src-list="[row.drawing]"
+                    fit="cover"
+                    style="width: 60px; height: 60px; cursor: pointer;"
+                    preview-teleported
+                  />
+                  <span v-else class="text-gray-400">暂无图样</span>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn prop="category" label="分类" min-width="120" />
+            </ElTable>
+        </ElCard>
+      </ElSplitterPanel>
+    </ElSplitter>
+    </div>
+    
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <ElButton @click="handleClose">取消</ElButton>
+        <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+.history-container {
+  padding: 10px 0;
+  height: 400px;
+}
+
+.history-tree-container {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #f5f7fa;
+}
+
+.history-table-container {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+}
+</style>
diff --git a/apps/web-ele/src/views/database/entry/index.ts b/apps/web-ele/src/views/database/entry/index.ts
new file mode 100644
index 0000000..02cd4f2
--- /dev/null
+++ b/apps/web-ele/src/views/database/entry/index.ts
@@ -0,0 +1,322 @@
+import { ref, nextTick } from 'vue'
+import { selectCellBorderStyle } from '#/components/db-hst/base'
+import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
+
+// 操作列回调函数类型
+export interface OperationCallbacks {
+  onUpload?: (row: number, data: any) => void
+  onComplete?: (row: number, data: any) => void
+  onPublish?: (row: number, data: any) => void
+  onView?: (row: number, data: any) => void
+}
+
+// 价格时间段渲染器回调类型
+export interface DateRangeCallbacks {
+  onDateIconClick?: (row: number, data: any, event: MouseEvent) => void
+}
+
+// 附件下载渲染器回调类型
+export interface AttachmentCallbacks {
+  onDownload?: (row: number, data: any) => void
+}
+
+// 价格时间段渲染器
+export function createDateRangeRenderer(callbacks: DateRangeCallbacks) {
+  return function dateRangeRenderer(instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) {
+    td.innerHTML = ''
+    
+    const container = document.createElement('div')
+    container.style.display = 'flex'
+    container.style.alignItems = 'center'
+    container.style.justifyContent = 'space-between'
+    container.style.gap = '8px'
+    // container.style.padding = '0 8px'
+    
+    // 文字部分
+    const textSpan = document.createElement('span')
+    textSpan.textContent = value || ''
+    textSpan.style.flex = '1'
+    
+    // 时间图标
+    const iconSpan = document.createElement('span')
+    iconSpan.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+        <line x1="16" y1="2" x2="16" y2="6"></line>
+        <line x1="8" y1="2" x2="8" y2="6"></line>
+        <line x1="3" y1="10" x2="21" y2="10"></line>
+      </svg>
+    `
+    iconSpan.style.cssText = `
+      cursor: pointer;
+      color: #bbbbbbff;
+      display: flex;
+      align-items: center;
+      transition: all 0.3s;
+    `
+    
+    // iconSpan.addEventListener('mouseenter', () => {
+    //   iconSpan.style.color = '#66b1ff'
+    //   iconSpan.style.transform = 'scale(1.1)'
+    // })
+    
+    // iconSpan.addEventListener('mouseleave', () => {
+    //   iconSpan.style.color = '#409eff'
+    //   iconSpan.style.transform = 'scale(1)'
+    // })
+    
+    iconSpan.addEventListener('click', (e) => {
+      e.stopPropagation()
+      const rowData = instance.getSourceDataAtRow(row)
+      console.log('时间图标点击 - 行:', row, '数据:', rowData)
+      
+      if (callbacks.onDateIconClick) {
+        callbacks.onDateIconClick(row, rowData, e)
+      }
+    })
+    
+    container.appendChild(textSpan)
+    container.appendChild(iconSpan)
+    td.appendChild(container)
+    
+    return td
+  }
+}
+
+// 附件下载渲染器
+export function createAttachmentRenderer(callbacks: AttachmentCallbacks) {
+  return function attachmentRenderer(instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) {
+    td.innerHTML = ''
+    
+    if (!value) {
+      td.textContent = '-'
+      td.style.textAlign = 'center'
+      td.style.color = '#999'
+      return td
+    }
+    
+    const container = document.createElement('div')
+    container.style.display = 'flex'
+    container.style.alignItems = 'center'
+    container.style.justifyContent = 'center'
+    container.style.gap = '6px'
+    
+    // 下载图标
+    const iconSpan = document.createElement('span')
+    iconSpan.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+        <polyline points="7 10 12 15 17 10"></polyline>
+        <line x1="12" y1="15" x2="12" y2="3"></line>
+      </svg>
+    `
+    iconSpan.style.cssText = `
+      display: flex;
+      align-items: center;
+      color: #409eff;
+    `
+    
+    // 文件名
+    const textSpan = document.createElement('span')
+    textSpan.textContent = '下载'
+    textSpan.style.cssText = `
+      cursor: pointer;
+      color: #409eff;
+      font-size: 12px;
+      text-decoration: underline;
+      transition: all 0.3s;
+    `
+    
+    // 鼠标悬停效果
+    const handleMouseEnter = () => {
+      textSpan.style.color = '#66b1ff'
+      iconSpan.style.color = '#66b1ff'
+    }
+    
+    const handleMouseLeave = () => {
+      textSpan.style.color = '#409eff'
+      iconSpan.style.color = '#409eff'
+    }
+    
+    container.addEventListener('mouseenter', handleMouseEnter)
+    container.addEventListener('mouseleave', handleMouseLeave)
+    
+    // 点击下载
+    container.addEventListener('click', (e) => {
+      e.stopPropagation()
+      const rowData = instance.getSourceDataAtRow(row)
+      console.log('下载附件 - 行:', row, '数据:', rowData)
+      
+      if (callbacks.onDownload) {
+        callbacks.onDownload(row, rowData)
+      }
+    })
+    
+    container.style.cursor = 'pointer'
+    container.appendChild(iconSpan)
+    container.appendChild(textSpan)
+    td.appendChild(container)
+    
+    return td
+  }
+}
+
+// 操作列渲染器
+export function createOperationRenderer(callbacks: OperationCallbacks) {
+  return function operationRenderer(instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) {
+    td.innerHTML = ''
+    
+    const container = document.createElement('div')
+    container.style.display = 'flex'
+    container.style.gap = '4px'
+    container.style.justifyContent = 'center'
+    container.style.alignItems = 'center'
+    container.style.flexWrap = 'wrap'
+    
+    const actions = [
+      { text: '附件上传', color: '#409eff', callback: callbacks.onUpload },
+      { text: '完成', color: '#409eff', callback: callbacks.onComplete },
+      { text: '发布', color: '#409eff', callback: callbacks.onPublish },
+      { text: '查看', color: '#409eff', callback: callbacks.onView }
+    ]
+    
+    actions.forEach(action => {
+      const btn = document.createElement('span')
+      btn.textContent = action.text
+      btn.style.cssText = `
+        cursor: pointer;
+        color: ${action.color};
+        font-size: 12px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        transition: all 0.3s;
+        white-space: nowrap;
+      `
+      
+      // btn.addEventListener('mouseenter', () => {
+      //   btn.style.backgroundColor = action.color
+      //   btn.style.color = '#fff'
+      // })
+      
+      // btn.addEventListener('mouseleave', () => {
+      //   btn.style.backgroundColor = 'transparent'
+      //   btn.style.color = action.color
+      // })
+      
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation()
+        const rowData = instance.getSourceDataAtRow(row)
+        console.log(`${action.text} 操作 - 行:`, row, '数据:', rowData)
+        
+        // 调用回调函数
+        if (action.callback) {
+          action.callback(row, rowData)
+        }
+      })
+      
+      container.appendChild(btn)
+    })
+    
+    td.appendChild(container)
+    return td
+  }
+}
+
+export const contextMenuHandler = {
+  rootKey: 'add-category',
+  rootText: '添加总类',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('添加总类:', newNode, '所有根节点:', allRootNodes)
+    
+    // 计算所有根节点的最大 sortOrder
+    const maxSortOrder = allRootNodes.reduce((max, node) => {
+      const sortOrder = node.sortOrder ?? 0
+      return Math.max(max, sortOrder)
+    }, 0)
+    
+    const newSortOrder = maxSortOrder + 1
+    newNode.code = 'ROOT'
+    newNode.sortOrder = newSortOrder
+    
+    console.log('新节点 sortOrder:', newSortOrder)
+  },
+  onRootDelete: async (node: any) => {
+    console.log('删除总类:', node)
+    // TODO: 调用 API 删除根节点
+    // await deleteCategories(node.id)
+  },
+  levels: [
+    {
+      depth: 0,
+      addKey: 'add-province',
+      addText: '添加省市',
+      sort: 'sortOrder',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加省市 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        
+        // 计算当前父节点下所有子节点的最大 sortOrder
+        const maxSortOrder = allChildren.reduce((max, child) => {
+          const sortOrder = child.sortOrder ?? 0
+          return Math.max(max, sortOrder)
+        }, 0)
+        
+        console.log('父节点下子节点最大 sortOrder:', maxSortOrder)
+        
+        // TODO: 调用 API 保存
+      },
+      onDelete: async (node: any) => {
+        console.log('删除省市:', node)
+        // TODO: 调用 API 删除
+        // await deleteCatalog(node.id)
+      }
+    },
+    {
+      depth: 1,
+      addKey: 'add-specialty',
+      addText: '添加工料机专业',
+      sort: 'sortOrder',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加工料机专业 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        
+        // 计算当前父节点下所有子节点的最大 sortOrder
+        const maxSortOrder = allChildren.reduce((max, child) => {
+          const sortOrder = child.sortOrder ?? 0
+          return Math.max(max, sortOrder)
+        }, 0)
+        
+        console.log('父节点下子节点最大 sortOrder:', maxSortOrder)
+        
+        // TODO: 调用 API 保存
+      },
+      onDelete: async (node: any) => {
+        console.log('删除工料机专业:', node)
+        // TODO: 调用 API 删除
+        // await deleteCatalog(node.id)
+      }
+    },
+    {
+      depth: 2,
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除第三层节点:', node)
+        // TODO: 调用 API 删除第三层节点
+      }
+    }
+  ]
+}
+export const contextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/entry/index.vue b/apps/web-ele/src/views/database/entry/index.vue
index 12f1911..9b1efb6 100644
--- a/apps/web-ele/src/views/database/entry/index.vue
+++ b/apps/web-ele/src/views/database/entry/index.vue
@@ -1,64 +1,208 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, nextTick } from 'vue'
 import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard,ElInput,ElButton,ElDialog,ElUpload,ElImage,ElTable,ElTableColumn,ElDatePicker,
-  ElMessage,ElForm,ElFormItem,ElRow,ElCol,ElTreeV2 } from 'element-plus';
+import { ElSplitter,ElSplitterPanel,ElCard,ElButton,ElDialog,ElUpload,ElImage,ElDatePicker,ElMessage,ElPopover, ElDatePickerPanel } from 'element-plus';
 import { useElementSize } from '@vueuse/core'
 import { DbTree } from '#/components/db-tree';
 import { DbHst } from '#/components/db-hst';
-import { IconifyIcon } from '@vben/icons';
 import type { UploadProps } from 'element-plus'
-import { computed } from 'vue'
-
+import AttachmentDialog from './components/AttachmentDialog.vue'
+import AddDialog from './components/AddDialog.vue'
+import CopyDialog from './components/CopyDialog.vue'
+import { useRouter } from 'vue-router';
+const { push } = useRouter();
+import { contextMenuHandler, createOperationRenderer, createDateRangeRenderer, createAttachmentRenderer, contextMenuItems } from './index'
+import { validatorRow } from '#/components/db-hst/validator'
 const containerRef = ref<HTMLElement | null>(null)
 const { height: containerHeight } = useElementSize(containerRef)
 type Tree = { id: string; label: string; children?: Tree[] }
-const categoryTreeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '信息价目录',
-    children: [
-      {
-        id: '2',
-        label: '广东',
-        children: [
-          { id: '3', label: '信息价1' },
-          { id: '4', label: '信息价2' },
-          { id: '5', label: '信息价3' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '信息价目录2',
-    children: [
-      {
-        id: '12',
-        label: '广西',
-        children: [
-          { id: '13', label: '信息价5' },
-          { id: '14', label: '信息价6' },
-          { id: '15', label: '信息价7' }
-        ]
-      }
-    ]
-  }
-])
 
-// 上传对话框相关
-const uploadDialogVisible = ref(false)
-const currentUploadRow = ref<number>(0)
-const currentUploadCol = ref<number>(0)
-const uploadImageUrl = ref<string>('')
+// 专业选择
+const selectedSpecialty = ref<string>('建筑工程')
+
+// 不同专业的树形数据
+const treeDataMap: Record<string, Tree[]> = {
+  '建筑工程': [
+    {
+      id: '1',
+      label: '建筑材料',
+      children: [
+        {
+          id: '1-1',
+          label: '广东省',
+          children: [
+            { id: '1-1-1', label: '水泥' },
+            { id: '1-1-2', label: '钢筋' },
+            { id: '1-1-3', label: '混凝土' },
+            { id: '1-1-4', label: '砖块' }
+          ]
+        },
+        {
+          id: '1-2',
+          label: '广西省',
+          children: [
+            { id: '1-2-1', label: '水泥' },
+            { id: '1-2-2', label: '钢筋' },
+            { id: '1-2-3', label: '混凝土' }
+          ]
+        }
+      ]
+    },
+    {
+      id: '2',
+      label: '建筑机械',
+      children: [
+        {
+          id: '2-1',
+          label: '广东省',
+          children: [
+            { id: '2-1-1', label: '挖掘机' },
+            { id: '2-1-2', label: '塔吊' },
+            { id: '2-1-3', label: '混凝土泵车' }
+          ]
+        }
+      ]
+    }
+  ],
+  '市政工程': [
+    {
+      id: '3',
+      label: '市政材料',
+      children: [
+        {
+          id: '3-1',
+          label: '广东省',
+          children: [
+            { id: '3-1-1', label: '沥青' },
+            { id: '3-1-2', label: '路缘石' },
+            { id: '3-1-3', label: '井盖' },
+            { id: '3-1-4', label: '管道' }
+          ]
+        },
+        {
+          id: '3-2',
+          label: '湖南省',
+          children: [
+            { id: '3-2-1', label: '沥青' },
+            { id: '3-2-2', label: '路缘石' },
+            { id: '3-2-3', label: '排水管' }
+          ]
+        }
+      ]
+    },
+    {
+      id: '4',
+      label: '市政设备',
+      children: [
+        {
+          id: '4-1',
+          label: '广东省',
+          children: [
+            { id: '4-1-1', label: '摊铺机' },
+            { id: '4-1-2', label: '压路机' },
+            { id: '4-1-3', label: '铣刨机' }
+          ]
+        }
+      ]
+    }
+  ],
+  '装饰装修': [
+    {
+      id: '5',
+      label: '装修材料',
+      children: [
+        {
+          id: '5-1',
+          label: '广东省',
+          children: [
+            { id: '5-1-1', label: '瓷砖' },
+            { id: '5-1-2', label: '地板' },
+            { id: '5-1-3', label: '涂料' },
+            { id: '5-1-4', label: '吊顶材料' }
+          ]
+        },
+        {
+          id: '5-2',
+          label: '浙江省',
+          children: [
+            { id: '5-2-1', label: '瓷砖' },
+            { id: '5-2-2', label: '木地板' },
+            { id: '5-2-3', label: '墙纸' }
+          ]
+        }
+      ]
+    },
+    {
+      id: '6',
+      label: '装修设备',
+      children: [
+        {
+          id: '6-1',
+          label: '广东省',
+          children: [
+            { id: '6-1-1', label: '电钻' },
+            { id: '6-1-2', label: '切割机' },
+            { id: '6-1-3', label: '打磨机' }
+          ]
+        }
+      ]
+    }
+  ],
+  '安装工程': [
+    {
+      id: '7',
+      label: '安装材料',
+      children: [
+        {
+          id: '7-1',
+          label: '广东省',
+          children: [
+            { id: '7-1-1', label: '电线电缆' },
+            { id: '7-1-2', label: '开关插座' },
+            { id: '7-1-3', label: '配电箱' },
+            { id: '7-1-4', label: '灯具' }
+          ]
+        },
+        {
+          id: '7-2',
+          label: '江苏省',
+          children: [
+            { id: '7-2-1', label: '电线电缆' },
+            { id: '7-2-2', label: '配电设备' },
+            { id: '7-2-3', label: '管道阀门' }
+          ]
+        }
+      ]
+    },
+    {
+      id: '8',
+      label: '安装设备',
+      children: [
+        {
+          id: '8-1',
+          label: '广东省',
+          children: [
+            { id: '8-1-1', label: '电焊机' },
+            { id: '8-1-2', label: '切管机' },
+            { id: '8-1-3', label: '套丝机' }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+const categoryTreeData = ref<Tree[]>(treeDataMap['建筑工程'])
+
+// 专业选择变化处理
+const handleSpecialtyChange = (value: string) => {
+  categoryTreeData.value = treeDataMap[value] || []
+  console.log('专业切换:', value)
+}
 
-// 图片预览相关
-const previewImageUrl = ref<string>('')
-const previewVisible = ref(false)
 
 // 附件管理相关
 const attachmentDialogVisible = ref(false)
-const attachmentDateRange = ref<[Date, Date] | null>(null)
 const attachmentTableData = ref<any[]>([
   {
     id: 1,
@@ -83,34 +227,8 @@ const attachmentTableData = ref<any[]>([
   }
 ])
 
-const filteredAttachmentData = computed(() => {
-  if (!attachmentDateRange.value || attachmentDateRange.value.length !== 2) {
-    return attachmentTableData.value
-  }
-  
-  const [startDate, endDate] = attachmentDateRange.value
-  return attachmentTableData.value.filter(item => {
-    const itemDate = new Date(item.priceDate)
-    return itemDate >= startDate && itemDate <= endDate
-  })
-})
-
 // 新增对话框相关
 const addDialogVisible = ref(false)
-const addFormRef = ref()
-const addForm = ref({
-  name: '',
-  priceDate: ''
-})
-
-const addFormRules = {
-  name: [
-    { required: true, message: '请输入信息价名称', trigger: 'blur' }
-  ],
-  priceDate: [
-    { required: true, message: '请选择价格时间', trigger: 'change' }
-  ]
-}
 
 // 复制（软件商）对话框相关
 const copyDialogVisible = ref(false)
@@ -153,488 +271,303 @@ const copyTableData = ref<any[]>([
   }
 ])
 
-// 更多价格对话框相关
-const morePriceDialogVisible = ref(false)
-const currentPriceRow = ref<number>(0)
-const morePriceTableData = ref<any[]>([
-  {
-    id: 1,
-    priceDate: '2024-01',
-    priceExcludeTax: '1250.00',
-    taxRate: '13',
-    priceIncludeTax: '1412.50'
-  },
-  {
-    id: 2,
-    priceDate: '2024-02',
-    priceExcludeTax: '1280.00',
-    taxRate: '13',
-    priceIncludeTax: '1446.40'
-  },
-  {
-    id: 3,
-    priceDate: '2024-03',
-    priceExcludeTax: '1300.00',
-    taxRate: '13',
-    priceIncludeTax: '1469.00'
-  }
-])
 
-// 历史信息对话框相关
-const historyDialogVisible = ref(false)
-const historyTreeData = ref<any[]>([
-  {
-    id: '1',
-    label: '2024年',
-    children: [
-      {
-        id: '1-1',
-        label: '2024-01',
-        children: [
-          { id: '1-1-1', label: '广东省信息价' },
-          { id: '1-1-2', label: '广西省信息价' }
-        ]
-      },
-      {
-        id: '1-2',
-        label: '2024-02',
-        children: [
-          { id: '1-2-1', label: '广东省信息价' },
-          { id: '1-2-2', label: '广西省信息价' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '2',
-    label: '2023年',
-    children: [
-      {
-        id: '2-1',
-        label: '2023-12',
-        children: [
-          { id: '2-1-1', label: '广东省信息价' },
-          { id: '2-1-2', label: '广西省信息价' }
-        ]
-      }
-    ]
-  }
-])
 
-const historyTableData = ref<any[]>([
-  {
-    id: 1,
-    name: '水泥',
-    model: 'P.O 42.5',
-    unit: '吨',
-    drawing: '',
-    category: '材料'
-  },
-  {
-    id: 2,
-    name: '钢筋',
-    model: 'HRB400E Φ12',
-    unit: '吨',
-    drawing: '',
-    category: '材料'
-  },
-  {
-    id: 3,
-    name: '混凝土',
-    model: 'C30',
-    unit: '立方米',
-    drawing: '',
-    category: '材料'
-  },
-  {
-    id: 4,
-    name: '砖',
-    model: 'MU10',
-    unit: '千块',
-    drawing: '',
-    category: '材料'
-  },
-  {
-    id: 5,
-    name: '挖掘机',
-    model: '1m³',
-    unit: '台班',
-    drawing: '',
-    category: '机械'
-  }
-])
-
-const selectedHistoryNode = ref<any>(null)
-
-const uploadPhotoRender = (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
-  td.innerHTML = '';
-  td.style.padding = '2px';
-  td.style.display = 'flex';
-  td.style.alignItems = 'center';
-  td.style.justifyContent = 'space-between';
-  td.style.gap = '4px';
-
-  // 左侧图片容器
-  const imgContainer = document.createElement('div');
-  imgContainer.style.flex = '1';
-  imgContainer.style.display = 'flex';
-  imgContainer.style.alignItems = 'center';
-  imgContainer.style.overflow = 'hidden';
-
-  if (value) {
-    const img = document.createElement('img');
-    img.src = value
-    img.style.maxWidth = '40px';
-    img.style.maxHeight = '40px';
-    img.style.objectFit = 'contain';
-    img.style.cursor = 'pointer';
+// Popover 相关
+const popoverDateRangeRef = ref()
+const visibleDateRange = ref(false)
+const popoverDate = ref<[Date, Date]>()
+const currentEditingRow = ref()
+// 点击外部关闭 popover
+const handleClickOutside = (e: MouseEvent) => {
+  if (visibleDateRange.value) {
+    const target = e.target as HTMLElement
+    // 检查点击是否在 popover 或触发元素内
+    const popoverEl = document.querySelector('.el-popover')
+    const isClickInside = popoverEl?.contains(target) || 
+                         target.closest('.el-popover') ||
+                         target.closest('svg') // 日历图标
     
-    // 点击图片预览
-    img.addEventListener('click', (event) => {
-      event.stopPropagation();
-      previewImageUrl.value = value;
-      previewVisible.value = true;
-    });
-    
-    img.addEventListener('mousedown', (event) => {
-      event.preventDefault();
-    });
-    imgContainer.appendChild(img);
+    if (!isClickInside) {
+      visibleDateRange.value = false
+    }
   }
-
-  // 右侧上传图标
-  const uploadIcon = document.createElement('span');
-  uploadIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M11 16V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16zm-5 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"/></svg>';
-  uploadIcon.style.cursor = 'pointer';
-  uploadIcon.style.color = '#979797';
-  uploadIcon.style.display = 'flex';
-  uploadIcon.style.alignItems = 'center';
-  uploadIcon.style.flexShrink = '0';
-  
-  uploadIcon.addEventListener('click', (event) => {
-    event.stopPropagation();
-    currentUploadRow.value = row;
-    currentUploadCol.value = col;
-    uploadImageUrl.value = value || '';
-    uploadDialogVisible.value = true;
-  });
-
-  uploadIcon.addEventListener('mousedown', (event) => {
-    event.preventDefault();
-  });
-
-  td.appendChild(imgContainer);
-  td.appendChild(uploadIcon);
-
-  return td;
 }
 
-const morePriceRender = (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
-  td.innerHTML = '';
-  td.style.padding = '2px';
-  td.style.display = 'flex';
-  td.style.alignItems = 'center';
-  td.style.justifyContent = 'space-between';
-  td.style.gap = '4px';
-
-  // 左侧价格文本
-  const priceText = document.createElement('span');
-  priceText.textContent = value || '';
-  priceText.style.flex = '1';
-  priceText.style.overflow = 'hidden';
-  priceText.style.textOverflow = 'ellipsis';
-  priceText.style.whiteSpace = 'nowrap';
-
-  // 右侧选择图标
-  const selectIcon = document.createElement('span');
-  selectIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z"/></svg>';
-  selectIcon.style.cursor = 'pointer';
-  selectIcon.style.color = '#979797';
-  selectIcon.style.display = 'flex';
-  selectIcon.style.alignItems = 'center';
-  selectIcon.style.flexShrink = '0';
-  
-  selectIcon.addEventListener('click', (event) => {
-    event.stopPropagation();
-    currentPriceRow.value = row;
-    morePriceDialogVisible.value = true;
-  });
-
-  selectIcon.addEventListener('mousedown', (event) => {
-    event.preventDefault();
-  });
-
-  td.appendChild(priceText);
-  td.appendChild(selectIcon);
-
-  return td;
+const handleCalendarChange = (val: any) =>{
+  nextTick(()=>{
+    console.log('handleCalendarChange',val, popoverDate.value)
+    if(val[0] != null && val[1] != null){
+      visibleDateRange.value = false
+      setTimeout(() => {
+        // 更新当前行的数据
+        if (currentEditingRow.value >= 0 && popoverDate.value && hstRef.value?.hotInstance) {
+          const [startDate, endDate] = popoverDate.value
+          const dateRangeStr = `${startDate} ~ ${endDate}`
+          
+          // 更新 Handsontable 中的数据
+          hstRef.value.hotInstance.setDataAtRowProp(currentEditingRow.value, 'code', dateRangeStr)
+          
+          console.log(`已更新第 ${currentEditingRow.value} 行的价格时间段为: ${dateRangeStr}`)
+        }
+      }, 200);
+    }
+  })
 }
+
+// 价格时间段图标点击回调
+const handleDateIconClick = (row: number, data: any, event: MouseEvent) => {
+  console.log('时间图标点击:', data)
+  // 先关闭 popover
+  visibleDateRange.value = false
+  // 使用 nextTick 确保 DOM 更新后再打开
+  nextTick(() => {
+    currentEditingRow.value = row
+    popoverDateRangeRef.value = event.target
+    visibleDateRange.value = true
+  })
+}
+
+// 创建价格时间段渲染器
+const dateRangeRenderer = createDateRangeRenderer({
+  onDateIconClick: handleDateIconClick
+})
+
+// 附件下载回调函数
+const handleDownload = (row: number, data: any) => {
+  console.log('下载附件:', data)
+  
+  // 获取附件文件名
+  const fileName = data.attachment
+  if (!fileName) {
+    ElMessage.warning('没有可下载的附件')
+    return
+  }
+  
+  // TODO: 实际项目中应该从后端获取文件 URL
+  // 这里模拟下载
+  ElMessage.success(`正在下载: ${fileName}`)
+  
+  // 示例：如果有实际的文件 URL，可以这样下载
+  // const link = document.createElement('a')
+  // link.href = data.attachmentUrl || `/api/download/${fileName}`
+  // link.download = fileName
+  // link.click()
+}
+
+// 创建附件下载渲染器
+const attachmentRenderer = createAttachmentRenderer({
+  onDownload: handleDownload
+})
+
+// 操作列回调函数
+const handleUpload = (row: number, data: any) => {
+  console.log('附件上传:', data)
+  ElMessage.info(`附件上传: ${data.name}`)
+  // TODO: 打开上传对话框
+}
+
+const handleComplete = (row: number, data: any) => {
+  console.log('完成:', data)
+  ElMessage.success(`完成: ${data.name}`)
+  // TODO: 调用完成接口
+}
+
+const handlePublish = (row: number, data: any) => {
+  console.log('发布:', data)
+  ElMessage.warning(`发布: ${data.name}`)
+  // TODO: 调用发布接口
+}
+
+const handleView = (row: number, data: any) => {
+  console.log('查看:', data)
+  ElMessage.info(`查看: ${data.name}`)
+  // TODO: 打开查看对话框
+  push({
+    name: 'EntryAdd',
+    query: data?.number ? { id: data.number } : {},
+  });
+}
+
+// 创建操作列渲染器
+const operationRenderer = createOperationRenderer({
+  onUpload: handleUpload,
+  onComplete: handleComplete,
+  onPublish: handlePublish,
+  onView: handleView
+})
+
 const columns = ref<any[]>([
-  {type:'text',data:'code',title:'序号编码'},
-  {type:'text',data:'name',title:'名称'},
-  {type:'text',data:'model',title:'型号规格'},
-  {type:'text',data:'unit',title:'单位',width: 50},
-  {type:'text',data:'priceExcludeTax',title:'除税编制价'},
-  {type:'text',data:'taxRate',title:'税率%',width: 60},
-  {type:'text',data:'priceIncludeTax',title:'含税编制价'},
-  {type:'text',data:'drawing',title:'图样(仅供参考)',renderer: uploadPhotoRender},
-  {type:'text',data:'category',title:'分类',renderer: 'db-dropdown',
-  source: ['措施类1', '措施类2', '措施类3', '措施类3'],
-  readOnly: true,},
-  {type:'text',data:'servicePrice',title:'劳务单价',renderer: morePriceRender},
-  {type:'text',data:'remark',title:'备注'},
-{type:'text',data:'',title:'操作'},
+  {type:'text',data:'number',title:'序号',width: 40},
+  //TODO 这里需要两个参数，一个显示一个赋值
+  {type:'text',data:'code',title:'价格时间段',width: 200, renderer: dateRangeRenderer, readOnly: true},
+  {type:'text',data:'name',title:'信息价名称',width: 150, allowInvalid: true},
+  {type:'text',data:'model',title:'地区', allowInvalid: true},
+  {type:'text',data:'time',title:'发布时间', allowInvalid: true},
+  {type:'text',data:'attachment',title:'附件下载',width: 100, renderer: attachmentRenderer, readOnly: true},
+  {type:'text',data:'operation',title:'操作',width: 200, renderer: operationRenderer, readOnly: true},
 ])
 // const colHeaders = ref<string[]>(topColHeaders)
 
 const hstRef = ref<any>(null)
 
 const mockData = ()=>{
-    // 生成模拟数据
-    const mockData = Array.from({ length: 30 }, (_, index) => ({
-      code: `DTL${String(index + 1).padStart(6, '0')}`,
-      name: `明细项目${index + 1}`,
-      model: `型号${index + 1}-规格${index + 1}`,
-      unit: ['个', '米', '吨', '套', '台'][index % 5],
-      priceExcludeTax: (Math.random() * 1000 + 100).toFixed(2),
-      taxRate: ['13', '9', '6', '3'][index % 4],
-      priceIncludeTax: (Math.random() * 1200 + 120).toFixed(2),
-      drawing: ``,
-      category: ['材料', '设备', '人工', '机械'][index % 4],
-      servicePrice: (Math.random() * 500 + 50).toFixed(2),
-      remark: `备注${index + 1}`,
-    }))
+    // 根据columns生成模拟数据
+    const regions = ['广东省', '广西省', '湖南省', '浙江省', '江苏省']
+    const priceNames = ['建筑工程信息价', '市政工程信息价', '装饰装修信息价', '安装工程信息价']
+    
+    const mockData = Array.from({ length: 30 }, (_, index) => {
+     
+      const month = (index % 12) + 1
+       const year = `20${String(month).padStart(2, '0')}`
+      const priceDate = `${year}-${String(month).padStart(2, '0')}`
+      const region = regions[index % regions.length]
+      const priceName = priceNames[index % priceNames.length]
+      
+      return {
+        number: index + 1,
+        code: priceDate,
+        name: `${region}${priceName}`,
+        model: region,
+        time: `${priceDate}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')}`,
+        attachment: `${region}${priceName}_${priceDate}.pdf`,
+      }
+    })
     return mockData;
 }
 let dbSettings = {
   data:mockData(),
   columns: columns.value,
+  contextMenu: {
+    items: {
+      row_above: {
+        name: '在上方插入行',
+        // callback: function(key: string, selection: any[]) {
+        //   const selectedRow = selection[0].start.row
+        //   this.alter('insert_row_above', selectedRow, 1)
+        // },
+      },
+      row_below: {
+        name: '在下方插入行',
+        // callback: function(key: string, selection: any[]) {
+        //   const selectedRow = selection[0].start.row
+        //   this.alter('insert_row_below', selectedRow, 1)
+        // },
+      },
+      remove_row: {
+        name: '移除行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowData = this.getSourceDataAtRow(selectedRow)
+          
+          if (rowData?.id) {
+            this.alter('remove_row', selectedRow, 1)
+            // 如果有 ID，可以调用删除 API
+            // deleteResourceMerged(rowData.id).then(res => {
+            //   console.log('deleteResourceMerged',res)
+            // })
+          } else {
+            // 没有 ID 直接删除
+            this.alter('remove_row', selectedRow, 1)
+          }
+        },
+      }
+    }
+  },
+  afterChange(changes, source)  {
+    console.log('source',source)
+    if (!changes || source === 'loadData' || source === 'updateId') return
+    
+    // 如果有空单元格，提前返回，不执行后续操作
+    if(!validatorRow(this, changes)){
+      return
+    }
+    //console.log('currChange', currChange)
+    const row = changes[0][0]; // 获取行索引
+    const rowData = this.getSourceDataAtRow(row)
+    
+    // 构建更新数据
+    const sendData: any = {
+      // catalogItemId: catalogItemId.value,
+      // categoryId: categoryId,
+      ...rowData
+    }
+
+    if (rowData.id == null) {
+      console.log('handleSaveResourceItem-create',  sendData )
+      // 调用创建接口
+      // createResourceItems(sendData).then(res => {
+      //   console.log('createResourceItems', res)
+      //   // 更新当前行ID - 使用自定义source避免循环
+      //   this.setDataAtRowProp(row, 'id', res, 'updateId');
+      //   ElMessage.success('新增成功')
+      // }).catch(err => {
+      //   console.error('新增失败', err)
+      //   // ElMessage.error('新增失败')
+      // })
+    } else {
+      // 调用更新接口
+      console.log('handleSaveResourceItem-update', sendData)
+      // 实现更新接口调用
+      // updateResourceItems(sendData).then(res => {
+      //   console.log('updateResourceItems', res)
+      // }).catch(err => {
+      //   console.error('更新失败', err)
+      //   // ElMessage.error('更新失败')
+      // })
+    }
+  }
 }
 const searchText = ref('')
 
+
 const categoryHandleSelect = (node: Tree) => {
   console.log('categoryhandleSelect',node)
 }
 
+const handleSearch = () => {
+console.log('handleSearch')
+hstRef.value.loadData(mockData())
+hstRef.value.hotInstance.render()
+}
 const handleAttachment = () => {
   attachmentDialogVisible.value = true
 }
 
-const handleAttachmentUpload = (row: any) => {
-  // 创建文件选择器
-  const input = document.createElement('input')
-  input.type = 'file'
-  input.accept = '.pdf,.doc,.docx,.xls,.xlsx,.zip'
-  
-  input.onchange = (e: any) => {
-    const file = e.target.files[0]
-    if (file) {
-      // 这里应该上传到服务器，现在只是模拟
-      const fileUrl = URL.createObjectURL(file)
-      row.attachment = file.name
-      row.attachmentUrl = fileUrl
-      ElMessage.success('上传成功')
-    }
-  }
-  
-  input.click()
-}
-
-const handleAttachmentDownload = (row: any) => {
-  if (!row.attachmentUrl && !row.attachment) {
-    ElMessage.warning('暂无附件可下载')
-    return
-  }
-  
-  // 这里应该从服务器下载，现在只是模拟
-  if (row.attachmentUrl) {
-    const link = document.createElement('a')
-    link.href = row.attachmentUrl
-    link.download = row.attachment
-    link.click()
-    ElMessage.success('下载成功')
-  } else {
-    ElMessage.info('模拟下载: ' + row.attachment)
-  }
-}
-
-const handleAttachmentDelete = (row: any) => {
-  const index = attachmentTableData.value.findIndex(item => item.id === row.id)
-  if (index > -1) {
-    attachmentTableData.value.splice(index, 1)
-    ElMessage.success('删除成功')
-  }
-}
-
-const handleAttachmentDialogClose = () => {
-  attachmentDialogVisible.value = false
-  attachmentDateRange.value = null
-}
-
 const handleAdd = () => {
   addDialogVisible.value = true
 }
 
-const handleAddSubmit = async () => {
-  if (!addFormRef.value) return
-  
-  await addFormRef.value.validate((valid: boolean) => {
-    if (valid) {
-      // 这里应该调用后端接口保存数据
-      const newId = attachmentTableData.value.length > 0 
-        ? Math.max(...attachmentTableData.value.map(item => item.id)) + 1 
-        : 1
-      
-      attachmentTableData.value.push({
-        id: newId,
-        name: addForm.value.name,
-        priceDate: addForm.value.priceDate,
-        attachment: '',
-        attachmentUrl: ''
-      })
-      
-      ElMessage.success('新增成功')
-      handleAddDialogClose()
-    } else {
-      ElMessage.error('请填写完整信息')
-      return false
-    }
-  })
-}
-
-const handleAddDialogClose = () => {
-  addDialogVisible.value = false
-  addFormRef.value?.resetFields()
-  addForm.value = {
-    name: '',
-    priceDate: ''
-  }
-}
-
 const handleCopy = () => {
   copyDialogVisible.value = true
 }
 
-const handleTogglePublish = (row: any) => {
-  row.published = !row.published
-  const status = row.published ? '已发布' : '未发布'
-  ElMessage.success(`状态已更新为：${status}`)
-}
 
-const handleCopyDialogClose = () => {
-  copyDialogVisible.value = false
-}
 
-const handleHistory = () => {
-  historyDialogVisible.value = true
-}
 
-const handleHistoryTreeSelect = (node: any) => {
-  selectedHistoryNode.value = node
-  console.log('选中的历史节点:', node)
-  // 这里可以根据选中的节点加载对应的表格数据
-}
 
-const handleHistoryDialogClose = () => {
-  historyDialogVisible.value = false
-  selectedHistoryNode.value = null
-}
-
-const handleMorePriceDialogClose = () => {
-  morePriceDialogVisible.value = false
-}
-
-const handleSelectPrice = (row: any) => {
-  // 选择价格后更新表格数据
-  if (hstRef.value?.hotInstance) {
-    const colIndex = hstRef.value.hotInstance.propToCol('priceExcludeTax')
-    hstRef.value.hotInstance.setDataAtCell(currentPriceRow.value, colIndex, row.priceExcludeTax)
-    
-    const taxRateIndex = hstRef.value.hotInstance.propToCol('taxRate')
-    hstRef.value.hotInstance.setDataAtCell(currentPriceRow.value, taxRateIndex, row.taxRate)
-    
-    const priceIncludeTaxIndex = hstRef.value.hotInstance.propToCol('priceIncludeTax')
-    hstRef.value.hotInstance.setDataAtCell(currentPriceRow.value, priceIncludeTaxIndex, row.priceIncludeTax)
-  }
-  
-  ElMessage.success('价格已更新')
-  handleMorePriceDialogClose()
-}
-const onSearch = () => {
-  console.log('onSearch')
-}
-
-// 上传处理
-const handleUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
-  // 这里假设上传成功后返回图片URL
-  // 实际项目中需要根据后端返回的数据结构调整
-  const imageUrl = URL.createObjectURL(uploadFile.raw!)
-  uploadImageUrl.value = imageUrl
-  
-  // 更新表格数据
-  if (hstRef.value?.hotInstance) {
-    hstRef.value.hotInstance.setDataAtCell(currentUploadRow.value, currentUploadCol.value, imageUrl)
-  }
-}
-
-const handleBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  if (!rawFile.type.startsWith('image/')) {
-    console.error('只能上传图片文件!')
-    return false
-  }
-  if (rawFile.size / 1024 / 1024 > 5) {
-    console.error('图片大小不能超过 5MB!')
-    return false
-  }
-  return true
-}
-
-const handleUploadChange: UploadProps['onChange'] = (uploadFile) => {
-  if (uploadFile.raw) {
-    const imageUrl = URL.createObjectURL(uploadFile.raw)
-    uploadImageUrl.value = imageUrl
-    
-    // 更新表格数据
-    if (hstRef.value?.hotInstance) {
-      hstRef.value.hotInstance.setDataAtCell(currentUploadRow.value, currentUploadCol.value, imageUrl)
-    }
-    handleDialogClose()
-  }
-}
-
-const handleRemoveImage = () => {
-  uploadImageUrl.value = ''
-  if (hstRef.value?.hotInstance) {
-    hstRef.value.hotInstance.setDataAtCell(currentUploadRow.value, currentUploadCol.value, '')
-  }
-}
-
-const handleDialogClose = () => {
-  uploadDialogVisible.value = false
-}
-
-const handlePreviewClose = () => {
-  previewVisible.value = false
-  previewImageUrl.value = ''
-}
 function onHstHeight(height: number){
   if (hstRef.value?.hotInstance) {
     hstRef.value.hotInstance.updateSettings({
-      height: height-15-43
+      height: height-35
     })
     
     hstRef.value.hotInstance.render()
     console.log('onResizeEnd-onHstHeight',height);
   }
 }
-
-
 onMounted(() => {
   setTimeout(() => {
     onHstHeight(containerHeight.value)
   }, 200);
+  
+  // 添加全局点击事件监听
+  document.addEventListener('click', handleClickOutside)
 })
+
 onUnmounted(() => {
+  // 移除全局点击事件监听
+  document.removeEventListener('click', handleClickOutside)
 })
 
 </script>
@@ -643,338 +576,85 @@ onUnmounted(() => {
 <Page auto-content-height>
    <ElSplitter >
       <ElSplitterPanel collapsible size="15%" :min="200">
+        
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-            <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2"  :search="false" />
+          <el-form label-position="left" label-width="auto" style="padding: 0px 5px;">
+          <el-form-item label="专业" style="margin-bottom: 0px;">
+            <el-select 
+              v-model="selectedSpecialty" 
+              placeholder="请选择专业" 
+              size="small"
+              @change="handleSpecialtyChange"
+              style="width: 100%;"
+            >
+              <el-option label="建筑工程" value="建筑工程" />
+              <el-option label="市政工程" value="市政工程" />
+              <el-option label="装饰装修" value="装饰装修" />
+              <el-option label="安装工程" value="安装工程" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+            <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" 
+            :defaultExpandedKeys="2"  :search="false" :context-menu-handler="contextMenuHandler"/>
         </ElCard>
       </ElSplitterPanel>
       <ElSplitterPanel collapsible :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
             <template #header>
               <div class="flex items-center justify-between">
-                <ElInput v-model="searchText" placeholder="搜索" clearable style="width: 200px" >
-                     <template #append>
-                         <ElButton @click="onSearch" >
-                            <IconifyIcon icon="lucide:search" class="cursor-pointer"/>
-                        </ElButton>
-                    </template>
-                </ElInput>
                 <div class="flex gap-2">
-                  <ElButton @click="handleAttachment" type="primary">附件</ElButton>
-                  <ElButton @click="handleAdd" type="primary">新增</ElButton>
-                  <ElButton @click="handleCopy" type="primary">复制（软件商按钮）</ElButton>
-                  <ElButton @click="handleHistory" type="primary">调用历史信息</ElButton>
+                  <ElDatePicker
+                    v-model="searchText"
+                    type="daterange"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    size="small"
+                    style="width: 300px"
+                  />
+                  <ElButton @click="handleSearch" type="primary" size="small">查询</ElButton>
+                </div>
+                <div class="flex gap-2">
+                  <ElButton @click="handleAttachment" type="primary" size="small">附件</ElButton>
+                  <ElButton @click="handleAdd" type="primary" size="small">新增</ElButton>
+                  <ElButton @click="handleCopy" type="primary" size="small">复制（软件商按钮）</ElButton>
+                  <!-- <ElButton @click="handleHistory" type="primary" size="small">调用历史信息</ElButton> -->
                 </div>
               </div>
             </template>
-            <DbHst ref="hstRef" :settings="dbSettings"></DbHst>
+            <DbHst ref="hstRef" :settings="dbSettings" :contextMenuItems="contextMenuItems"></DbHst>
         </ElCard>
       </ElSplitterPanel>
     </ElSplitter>
 
-    <!-- 上传图片对话框 -->
-    <ElDialog 
-      v-model="uploadDialogVisible" 
-      title="上传图片" 
-      width="500px"
-      @close="handleDialogClose"
+    <ElPopover
+      :virtual-ref="popoverDateRangeRef"
+      virtual-triggering
+      :visible="visibleDateRange"
+      :popper-style="{padding: '0px !important'}"
+      :width="648"
     >
-      <div class="upload-container">
-        <!-- <div v-if="uploadImageUrl" class="image-preview">
-          <img :src="uploadImageUrl" alt="预览图片" />
-          <ElButton type="danger" size="small" @click="handleRemoveImage" class="remove-btn">
-            删除图片
-          </ElButton>
-        </div> -->
-        
-        <ElUpload
-          class="upload-demo"
-          drag
-          :auto-upload="false"
-          :show-file-list="false"
-          :before-upload="handleBeforeUpload"
-          :on-change="handleUploadChange"
-          accept="image/*"
-        >
-          <div class="flex flex-col items-center justify-center py-5">
-            <IconifyIcon icon="ep:upload-filled" class="mb-2.5 text-gray-400" style="font-size: 2.75rem !important;"/>
-            <div class="ant-upload-text text-base text-gray-400">
-                拖拽文件至此，或者
-                <em class="cursor-pointer not-italic text-blue-500">
-                  选择文件
-                </em>
-              </div>
-              <div class="mt-2.5 text-sm text-gray-400">
-                已支持 pg/png 每个文件不超过
-                1 MB。
-              </div>
-          </div>
-        </ElUpload>
-      </div>
-      
-      <template #footer>
-        <ElButton @click="handleDialogClose">关闭</ElButton>
-      </template>
-    </ElDialog>
-
-    <!-- 图片预览对话框 -->
-    <ElDialog 
-      v-model="previewVisible" 
-      title="图片预览" 
-      width="800px"
-      @close="handlePreviewClose"
-    >
-      <div class="preview-image-container">
-        <ElImage 
-          :src="previewImageUrl" 
-          fit="contain"
-          :preview-src-list="[previewImageUrl]"
-          :initial-index="0"
-          style="width: 100%; max-height: 600px;"
-        />
-      </div>
-      
-      <template #footer>
-        <ElButton @click="handlePreviewClose">关闭</ElButton>
-      </template>
-    </ElDialog>
+      <ElDatePickerPanel v-model="popoverDate" type="daterange" size="small" @calendar-change="handleCalendarChange" value-format="YYYY-MM-DD"/>
+    </ElPopover>
 
     <!-- 附件管理对话框 -->
-    <ElDialog 
-      v-model="attachmentDialogVisible" 
-      title="附件管理" 
-      width="900px"
-      @close="handleAttachmentDialogClose"
-    >
-      <div class="attachment-container">
-        <!-- 时间查询 -->
-        <div class="mb-4 flex items-center gap-2">
-          <span>价格时间段：</span>
-          <ElDatePicker
-            v-model="attachmentDateRange"
-            type="monthrange"
-            range-separator="至"
-            start-placeholder="开始月份"
-            end-placeholder="结束月份"
-            format="YYYY-MM"
-            value-format="YYYY-MM"
-            style="width: 300px"
-          />
-        </div>
-
-        <!-- 附件表格 -->
-        <ElTable :data="filteredAttachmentData" border stripe style="width: 100%">
-          <ElTableColumn prop="name" label="信息价名称" width="200" />
-          <ElTableColumn prop="priceDate" label="价格时间段" width="150" />
-          <ElTableColumn prop="attachment" label="附件" min-width="200">
-            <template #default="{ row }">
-              <span v-if="row.attachment">{{ row.attachment }}</span>
-              <span v-else class="text-gray-400">暂无附件</span>
-            </template>
-          </ElTableColumn>
-          <ElTableColumn label="操作" width="200" fixed="right">
-            <template #default="{ row }">
-              <div class="flex gap-2">
-                <ElButton 
-                  type="primary" 
-                  size="small" 
-                  @click="handleAttachmentUpload(row)"
-                >
-                  上传
-                </ElButton>
-                <ElButton 
-                  type="success" 
-                  size="small" 
-                  @click="handleAttachmentDownload(row)"
-                  :disabled="!row.attachment"
-                >
-                  下载
-                </ElButton>
-                <ElButton 
-                  type="danger" 
-                  size="small" 
-                  @click="handleAttachmentDelete(row)"
-                >
-                  删除
-                </ElButton>
-              </div>
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      
-      <template #footer>
-        <ElButton @click="handleAttachmentDialogClose">关闭</ElButton>
-      </template>
-    </ElDialog>
+    <AttachmentDialog 
+      v-model:visible="attachmentDialogVisible"
+      v-model:data="attachmentTableData"
+    />
 
     <!-- 新增对话框 -->
-    <ElDialog 
-      v-model="addDialogVisible" 
-      title="新增信息价" 
-      width="500px"
-      @close="handleAddDialogClose"
-    >
-      <ElForm 
-        ref="addFormRef" 
-        :model="addForm" 
-        :rules="addFormRules" 
-        label-width="120px"
-      >
-        <ElFormItem label="信息价名称" prop="name">
-          <ElInput 
-            v-model="addForm.name" 
-            placeholder="请输入信息价名称"
-            clearable
-          />
-        </ElFormItem>
-        
-        <ElFormItem label="价格时间" prop="priceDate">
-          <ElDatePicker
-            v-model="addForm.priceDate"
-            type="month"
-            placeholder="请选择价格时间"
-            format="YYYY-MM"
-            value-format="YYYY-MM"
-            style="width: 100%"
-          />
-        </ElFormItem>
-      </ElForm>
-      
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <ElButton @click="handleAddDialogClose">取消</ElButton>
-          <ElButton type="primary" @click="handleAddSubmit">确定</ElButton>
-        </div>
-      </template>
-    </ElDialog>
+    <AddDialog 
+      v-model:visible="addDialogVisible"
+      v-model:data="attachmentTableData"
+    />
 
     <!-- 复制（软件商）对话框 -->
-    <ElDialog 
-      v-model="copyDialogVisible" 
-      title="软件商信息价管理" 
-      width="1200px"
-      @close="handleCopyDialogClose"
-    >
-      <div class="copy-container">
-        <!-- 软件商表格 -->
-        <ElTable :data="copyTableData" border stripe style="width: 100%" max-height="600">
-          <ElTableColumn prop="serialNumber" label="序号" width="80" fixed="left" />
-          <ElTableColumn prop="tenantName" label="租户名称" width="120" />
-          <ElTableColumn prop="specialty" label="专业" width="120" />
-          <ElTableColumn prop="region" label="地区" width="120" />
-          <ElTableColumn prop="priceDate" label="价格时间段" width="120" />
-          <ElTableColumn prop="priceName" label="信息价名称" width="150" />
-          <ElTableColumn prop="priceCount" label="信息价条数" width="120" align="center" />
-          <ElTableColumn prop="attachment" label="附件" min-width="150">
-            <template #default="{ row }">
-              <span v-if="row.attachment">{{ row.attachment }}</span>
-              <span v-else class="text-gray-400">暂无附件</span>
-            </template>
-          </ElTableColumn>
-          <ElTableColumn label="操作" width="120" fixed="right" align="center">
-            <template #default="{ row }">
-              <ElButton 
-                :type="row.published ? 'success' : 'info'" 
-                size="small" 
-                @click="handleTogglePublish(row)"
-              >
-                {{ row.published ? '已发布' : '未发布' }}
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      
-      <template #footer>
-        <ElButton @click="handleCopyDialogClose">关闭</ElButton>
-      </template>
-    </ElDialog>
+    <CopyDialog 
+      v-model:visible="copyDialogVisible"
+      v-model:data="copyTableData"
+    />
 
-    <!-- 历史信息对话框 -->
-    <ElDialog 
-      v-model="historyDialogVisible" 
-      title="调用历史信息" 
-      width="1200px"
-      @close="handleHistoryDialogClose"
-    >
-      <div class="history-container">
-        <ElRow :gutter="20">
-          <!-- 左侧树形结构 -->
-          <ElCol :span="6">
-            <div class="history-tree-container">
-              <ElTreeV2
-                :data="historyTreeData"
-                :props="{ label: 'label', children: 'children' }"
-                :height="500"
-                @node-click="handleHistoryTreeSelect"
-                default-expand-all
-              />
-            </div>
-          </ElCol>
-          
-          <!-- 右侧表格 -->
-          <ElCol :span="18">
-            <div class="history-table-container">
-              <ElTable :data="historyTableData" border stripe style="width: 100%" max-height="500">
-                <ElTableColumn prop="name" label="名称" width="150" />
-                <ElTableColumn prop="model" label="型号规格" width="150" />
-                <ElTableColumn prop="unit" label="单位" width="100" align="center" />
-                <ElTableColumn prop="drawing" label="图样(仅供参考)" width="150">
-                  <template #default="{ row }">
-                    <span v-if="row.drawing">{{ row.drawing }}</span>
-                    <span v-else class="text-gray-400">暂无图样</span>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn prop="category" label="分类" min-width="120" />
-              </ElTable>
-            </div>
-          </ElCol>
-        </ElRow>
-      </div>
-      
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <ElButton @click="handleHistoryDialogClose">取消</ElButton>
-          <ElButton type="primary" @click="handleHistoryDialogClose">确定</ElButton>
-        </div>
-      </template>
-    </ElDialog>
-
-    <!-- 更多价格对话框 -->
-    <ElDialog 
-      v-model="morePriceDialogVisible" 
-      title="历史价格信息" 
-      width="700px"
-      @close="handleMorePriceDialogClose"
-    >
-      <div class="more-price-container">
-        <ElTable :data="morePriceTableData" border stripe style="width: 100%" max-height="400">
-          <ElTableColumn prop="priceDate" label="价格时间段" width="150" align="center" />
-          <ElTableColumn prop="priceExcludeTax" label="除税单价" width="150" align="right" />
-          <ElTableColumn prop="taxRate" label="税率" width="100" align="center">
-            <template #default="{ row }">
-              {{ row.taxRate }}%
-            </template>
-          </ElTableColumn>
-          <ElTableColumn prop="priceIncludeTax" label="含税单价" width="150" align="right" />
-          <ElTableColumn label="操作" width="100" align="center" fixed="right">
-            <template #default="{ row }">
-              <ElButton 
-                type="primary" 
-                size="small" 
-                @click="handleSelectPrice(row)"
-              >
-                选择
-              </ElButton>
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      
-      <template #footer>
-        <ElButton @click="handleMorePriceDialogClose">关闭</ElButton>
-      </template>
-    </ElDialog>
+    
 </Page>
 </template>
 
@@ -1018,35 +698,6 @@ onUnmounted(() => {
       min-height: 400px;
     }
     
-    .attachment-container {
-      padding: 10px 0;
-    }
-    
-    .el-form {
-      padding: 20px 20px 0;
-    }
-    
-    .copy-container {
-      padding: 10px 0;
-    }
-    
-    .history-container {
-      padding: 10px 0;
-    }
-    
-    .history-tree-container {
-      border: 1px solid #dcdfe6;
-      border-radius: 4px;
-      padding: 10px;
-      background-color: #f5f7fa;
-    }
-    
-    .history-table-container {
-      border: 1px solid #dcdfe6;
-      border-radius: 4px;
-      padding: 10px;
-    }
-    
     .more-price-container {
       padding: 10px 0;
     }
diff --git a/apps/web-ele/src/views/database/feature/index.vue b/apps/web-ele/src/views/database/feature/index.vue
index c853a2e..e6525ea 100644
--- a/apps/web-ele/src/views/database/feature/index.vue
+++ b/apps/web-ele/src/views/database/feature/index.vue
@@ -49,7 +49,7 @@ const categoryTreeData = ref<Tree[]>([
   }
 ])
 const topColumns = ref<any[]>([
-{type:'text',data:'code',title:'编码', renderer: codeRenderer},
+{type:'text',data:'code',title:'编码', renderer: codeRenderer, code:true},
 {type:'text',data:'name',title:'名称'},
 {type:'text',data:'unit',title:'单位'},
 ])
diff --git a/apps/web-ele/src/views/database/interface/project.vue b/apps/web-ele/src/views/database/interface/project.vue
index 14a7d34..b7faab4 100644
--- a/apps/web-ele/src/views/database/interface/project.vue
+++ b/apps/web-ele/src/views/database/interface/project.vue
@@ -233,12 +233,12 @@ onUnmounted(() => {
 <template>
 <Page auto-content-height>
    <ElSplitter >
-      <ElSplitterPanel collapsible size="15%" :min="200">
+      <ElSplitterPanel size="15%" :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
             <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2"  :search="false" />
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel collapsible :min="200">
+      <ElSplitterPanel :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
             <DbHst ref="bottomHstRef" :settings="bottomDbSettings"></DbHst>
         </ElCard>
diff --git a/apps/web-ele/src/views/database/interface/unit/FieldName.vue b/apps/web-ele/src/views/database/interface/unit/FieldName.vue
index c7e493f..1cf959e 100644
--- a/apps/web-ele/src/views/database/interface/unit/FieldName.vue
+++ b/apps/web-ele/src/views/database/interface/unit/FieldName.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 const hstRef = ref<any>(null)
 const columns = ref<any[]>([
   { type: 'text', data: 'seq', title: '序', width: 40 },
-  { type: 'text', data: 'code', title: '编码', renderer: codeRenderer },
+  { type: 'text', data: 'code', title: '编码', renderer: codeRenderer, code:true },
   { type: 'text', data: 'category', title: '类别' },
   { type: 'text', data: 'name', title: '名称' },
   { type: 'text', data: 'feature', title: '项目特征' },
diff --git a/apps/web-ele/src/views/database/interface/unit/VariableSettings.vue b/apps/web-ele/src/views/database/interface/unit/VariableSettings.vue
index 50b3917..2dfee7e 100644
--- a/apps/web-ele/src/views/database/interface/unit/VariableSettings.vue
+++ b/apps/web-ele/src/views/database/interface/unit/VariableSettings.vue
@@ -77,7 +77,7 @@ const dialogRenderer = (instance: any, td: HTMLElement, row: number, col: number
   
 const columns = ref<any[]>([
   { type: 'text', data: 'seq', title: '序', width: 40 },
-  { type: 'text', data: 'name', title: '费用名称', renderer: codeRenderer },
+  { type: 'text', data: 'name', title: '费用名称', renderer: codeRenderer , code:true},
   { type: 'text', data: 'spec', title: '费用代码', width: 300,renderer: dialogRenderer },
   { type: 'text', data: 'cardinal', title: '计算基数（用户端不显示）', width: 200 },
 ])
diff --git a/apps/web-ele/src/views/database/list/catalog.ts b/apps/web-ele/src/views/database/list/catalog.ts
index 0514400..801b784 100644
--- a/apps/web-ele/src/views/database/list/catalog.ts
+++ b/apps/web-ele/src/views/database/list/catalog.ts
@@ -39,28 +39,107 @@ export const treeData = ref<Tree[]>([
 export const contextMenuHandler = {
   rootKey: 'add-category',
   rootText: '添加定额',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('添加总类:', newNode, '所有根节点:', allRootNodes)
+    
+    // 计算所有根节点的最大 sortOrder
+    const maxSortOrder = allRootNodes.reduce((max, node) => {
+      const sortOrder = node.sortOrder ?? 0
+      return Math.max(max, sortOrder)
+    }, 0)
+    
+    const newSortOrder = maxSortOrder + 1
+    newNode.code = 'ROOT'
+    newNode.sortOrder = newSortOrder
+    
+    console.log('新节点 sortOrder:', newSortOrder)
+  },
+  onRootDelete: async (node: any) => {
+    console.log('删除总类:', node)
+    // TODO: 调用 API 删除根节点
+    // await deleteCategories(node.id)
+  },
   levels: [
     {
       depth: 0,
       addKey: 'add-province',
       addText: '添加省市',
-      allowDelete: true
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加省市 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        
+        // 计算当前父节点下所有子节点的最大 sortOrder
+        const maxSortOrder = allChildren.reduce((max, child) => {
+          const sortOrder = child.sortOrder ?? 0
+          return Math.max(max, sortOrder)
+        }, 0)
+        
+        console.log('父节点下子节点最大 sortOrder:', maxSortOrder)
+        
+        // TODO: 调用 API 保存省市节点
+      },
+      onDelete: async (node: any) => {
+        console.log('删除省市:', node)
+        // TODO: 调用 API 删除节点
+        // await deleteCatalog(node.id)
+      }
     },
     {
       depth: 1,
       addKey: 'add-name',
       addText: '添加名称',
-      allowDelete: true
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加名称 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        
+        // 计算当前父节点下所有子节点的最大 sortOrder
+        const maxSortOrder = allChildren.reduce((max, child) => {
+          const sortOrder = child.sortOrder ?? 0
+          return Math.max(max, sortOrder)
+        }, 0)
+        
+        console.log('父节点下子节点最大 sortOrder:', maxSortOrder)
+        
+        // TODO: 调用 API 保存省市节点
+      },
+      onDelete: async (node: any) => {
+        console.log('删除名称:', node)
+        // TODO: 调用 API 删除省市节点
+        // await deleteCatalog(node.id)
+      }
     },
     {
       depth: 2,
       addKey: 'add-model',
       addText: '添加模式',
-      allowDelete: true
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加模式 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        
+        // 计算当前父节点下所有子节点的最大 sortOrder
+        const maxSortOrder = allChildren.reduce((max, child) => {
+          const sortOrder = child.sortOrder ?? 0
+          return Math.max(max, sortOrder)
+        }, 0)
+        
+        console.log('父节点下子节点最大 sortOrder:', maxSortOrder)
+        
+        // TODO: 调用 API 创建
+      },
+      onDelete: async (node: any) => {
+        console.log('删除:', node)
+        // TODO: 调用 API 删除
+        // await deleteCatalog(node.id)
+      }
     },
     {
       depth: 3,
-      allowDelete: true
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除第三层节点:', node)
+        // TODO: 调用 API 删除第三层节点
+        // await deleteCategoriesTree(node.id)
+      }
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/list/config.vue b/apps/web-ele/src/views/database/list/config.vue
index be6d837..be1cebd 100644
--- a/apps/web-ele/src/views/database/list/config.vue
+++ b/apps/web-ele/src/views/database/list/config.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed } from 'vue'
 import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard,ElDialog,ElTable,ElTableColumn,ElButton,ElInput,ElAlert } from 'element-plus';
+import { ElSplitter,ElSplitterPanel,ElCard,ElDialog,ElTable,ElTableColumn,ElButton,ElInput,ElAlert,ElTreeV2 } from 'element-plus';
 import { useElementSize } from '@vueuse/core'
 import { DbTree } from '#/components/db-tree';
 import { DbHst } from '#/components/db-hst';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
 
 import { treeData as catalogTreeData, contextMenuHandler as catalogContextMenuHandler } from './catalog';
 import { treeData as topTreeData, contextMenuHandler as topContextMenuHandler } from './catalog';
-import { dbSettings as projectDbSettings } from './project';
-import { dbSettings as subDbSettings } from './sub';
-import { dbSettings as guideDbSettings } from './guide';
-import { dbSettings as bottomDbSettings } from './rightHst';
+import { dbSettings as projectDbSettings, contextMenuItems as projectContextMenuItems, initProjectHst, load as projectLoad } from './project';
+import { dbSettings as subDbSettings, contextMenuItems as subContextMenuItems, setEditDescCallback, initSubHst, load as subLoad } from './sub';
+import { dbSettings as guideDbSettings, contextMenuItems as guideContextMenuItems, initGuideHst, load as guideLoad } from './guide';
+import { dbSettings as bottomDbSettings, contextMenuItems as bottomContextMenuItems, initBottomHst, load as bottomLoad } from './rightHst';
 
 
 const containerRef = ref<HTMLElement | null>(null)
@@ -29,66 +30,221 @@ const subHstRef = ref<any>(null)
 const guideHstRef = ref<any>(null)
 const bottomHstRef = ref<any>(null)
 
+// Dialog state
+const dialogVisible = ref(false)
+const dialogTreeData = ref<any[]>([])
+const selectedNode = ref<any>(null)
+
+// Rich text editor dialog state
+const richTextDialogVisible = ref(false)
+const richTextContent = ref('')
+const currentEditRow = ref<number>(-1)
+const currentEditCol = ref<number>(-1)
+
+// 生成100条模拟数据
+function generateMockData() {
+  const units = ['项', 'm', 'm²', 'm³', 't', 'kg', '个', '套', '台', '组']
+  const categories = ['土建工程', '装饰工程', '安装工程', '市政工程', '园林工程', '钢结构工程', '幕墙工程', '消防工程', '电气工程', '给排水工程']
+  const subCategories = ['基础工程', '主体结构', '屋面工程', '门窗工程', '防水工程', '保温工程', '抹灰工程', '涂饰工程', '吊顶工程', '地面工程']
+  
+  const data = []
+  
+  for (let i = 1; i <= 100; i++) {
+    const categoryIndex = (i - 1) % categories.length
+    const hasChildren = i <= 50 // 前50条有子项
+    
+    const item: any = {
+      code: `PRJ${String(i).padStart(3, '0')}`,
+      name: `${categories[categoryIndex]}-${i}`,
+      unit: units[i % units.length],
+      __children: []
+    }
+    
+    // 为前50条数据添加2-5个子项
+    if (hasChildren) {
+      const childCount = Math.floor(Math.random() * 4) + 2 // 2-5个子项
+      for (let j = 1; j <= childCount; j++) {
+        const subItem: any = {
+          code: `${item.code}-${String(j).padStart(3, '0')}`,
+          name: `${subCategories[j % subCategories.length]}-${i}-${j}`,
+          unit: units[(i + j) % units.length],
+          __children: []
+        }
+        
+        // 部分子项再添加孙项
+        if (i <= 20 && j <= 2) {
+          const grandChildCount = Math.floor(Math.random() * 3) + 1 // 1-3个孙项
+          for (let k = 1; k <= grandChildCount; k++) {
+            subItem.__children.push({
+              code: `${subItem.code}-${String(k).padStart(3, '0')}`,
+              name: `细项-${i}-${j}-${k}`,
+              unit: units[(i + j + k) % units.length],
+              __children: []
+            })
+          }
+        }
+        
+        item.__children.push(subItem)
+      }
+    }
+    
+    data.push(item)
+  }
+  
+  return data
+}
+
 
 const treeHandleSelect = (node: any) => {
-  console.log('treeHandleSelect',node)
+  console.log('treeHandleSelect', node)
+  
+  // 使用 projectLoad 加载数据到 projectHstRef
+  if (node && projectHstRef.value?.hotInstance) {
+    // 根据树节点加载对应的数据
+    // 示例1: 如果 node 包含数据数组
+    // projectLoad(node.data)
+    
+    // 示例2: 如果需要根据 node.id 从 API 获取数据
+    // fetchProjectData(node.id).then(data => {
+    //   projectLoad(data)
+    // })
+    
+    // 示例3: 加载模拟数据（用于测试）
+    const mockData = generateMockData()
+    projectLoad(mockData)
+  }
 }
 function onResizeEnd(index: number, sizes: number[]) {
   // 通过 hotInstance 来操作 Handsontable
-  console.log(index,sizes)
+  // console.log(index,sizes)
   onTopHeight(sizes[0])
   onBottomHeight(sizes[1])
 }
 function onTopHeight(height: number){
-  // if (topHstRef.value?.hotInstance) {
-  //   topHstRef.value.hotInstance.updateSettings({
-  //     height: height-15,
-  //   })
-    
-  //   topHstRef.value.hotInstance.render()
-    
-  //   // console.log('onResizeEnd-onTopHeight',height, 'codeColWidth:', topHstRef.value.codeColWidth);
-  // }
+  topContainerHeight.value = height
 }
 function onBottomHeight(height: number){
-  // if (bottomHstRef.value?.hotInstance) {
-  //   bottomHstRef.value.hotInstance.updateSettings({
-  //     height: height-15
-  //   })
-    
-  //   // bottomHstRef.value.loadData(bootomMock())
-  //   // bottomHstRef.value.hotInstance.render()
-  //   console.log('onResizeEnd-bottomHstRef',height);
-  // }
+  if (bottomHstRef.value?.hotInstance) {
+    bottomHstRef.value.hotInstance.updateSettings({
+      height: height
+    })
+    bottomHstRef.value.hotInstance.render()
+  }
+}
+function onDecide(node: any){
+  console.log('onDecide',node)
+  selectedNode.value = node
+  // 设置弹窗树数据（这里使用示例数据，你可以根据需要修改）
+  dialogTreeData.value = [
+    {
+      id: '1',
+      label: '选项 1',
+      children: [
+        { id: '1-1', label: '选项 1-1' },
+        { id: '1-2', label: '选项 1-2' }
+      ]
+    },
+    {
+      id: '2',
+      label: '选项 2',
+      children: [
+        { id: '2-1', label: '选项 2-1' },
+        { id: '2-2', label: '选项 2-2' }
+      ]
+    }
+  ]
+  dialogVisible.value = true
+}
+
+function handleDialogTreeClick(data: any) {
+  console.log('选中的树节点:', data)
+}
+
+function handleDialogConfirm() {
+    selectedNode.value.selected = true
+  console.log('确认选择:', selectedNode.value)
+
+  dialogVisible.value = false
+}
+
+function handleDialogCancel() {
+  dialogVisible.value = false
+}
+
+// 处理富文本编辑
+function handleEditDesc(row: number, col: number, value: string) {
+  currentEditRow.value = row
+  currentEditCol.value = col
+  richTextContent.value = value
+  richTextDialogVisible.value = true
+}
+
+// 确认富文本编辑
+function handleRichTextConfirm() {
+  if (subHstRef.value?.hotInstance && currentEditRow.value >= 0) {
+    subHstRef.value.hotInstance.setDataAtCell(currentEditRow.value, currentEditCol.value, richTextContent.value)
+  }
+  richTextDialogVisible.value = false
+}
+
+// 取消富文本编辑
+function handleRichTextCancel() {
+  richTextDialogVisible.value = false
 }
 
 onMounted(() => {
+  
+  // 设置编辑回调
+  setEditDescCallback(handleEditDesc)
   setTimeout(() => {
     // onTopHeight(topContainerHeight.value)
     // onBottomHeight(bottomContainerHeight.value)
 
     if (projectHstRef.value?.hotInstance) {
+      // 初始化 projectHstRef
+      initProjectHst(projectHstRef, (row: number | null) => {
+        console.log('projectHstRef-选中的行:', row)
+        // 在这里处理点击事件
+        subLoad(generateMockData())
+      })
       projectHstRef.value?.hotInstance.updateSettings({
-        height: containerHeight.value - 15
+        height: containerHeight.value
       })
       // 更新 code 列的宽度
-      projectHstRef.value.updateCodeColWidth()
+      // projectHstRef.value.updateCodeColWidth()
     }
     if (subHstRef.value?.hotInstance) {
+      // 初始化 subHstRef
+      initSubHst(subHstRef, (row: number | null) => {
+        console.log('subHstRef-选中的行:', row)
+        // 在这里处理点击事件
+        guideLoad(generateMockData())
+      })
       subHstRef.value?.hotInstance.updateSettings({
-        height: containerHeight.value - 15
+        height: containerHeight.value
       })
       
     }
     if (guideHstRef.value?.hotInstance) {
+      // 初始化 guideHstRef
+      initGuideHst(guideHstRef, (row: number | null) => {
+        console.log('guideHstRef-选中的行:', row)
+        // 在这里处理点击事件
+        bottomLoad(generateMockData())
+      })
       guideHstRef.value?.hotInstance.updateSettings({
-        height: containerHeight.value - 15
+        height: containerHeight.value
       })
     }
 
     if (bottomHstRef.value?.hotInstance) {
+      // 初始化 bottomHstRef
+      initBottomHst(bottomHstRef, (row: number | null) => {
+        console.log('bottomHstRef-选中的行:', row)
+        // 在这里处理点击事件
+      })
       bottomHstRef.value?.hotInstance.updateSettings({
-        height: containerHeight.value
+        height: bottomContainerHeight.value
       })
     }
     
@@ -102,41 +258,85 @@ onUnmounted(() => {
 <template>
 <Page auto-content-height>
    <ElSplitter >
-      <ElSplitterPanel collapsible size="15%" :min="200">
+      <ElSplitterPanel size="15%" :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-            <DbTree :height="containerHeight" :data="catalogTreeData" @select="treeHandleSelect" :defaultExpandedKeys="3" :context-menu-handler="catalogContextMenuHandler"  :search="false" />
+            <DbTree :height="containerHeight" :data="catalogTreeData" @select="treeHandleSelect"
+             :defaultExpandedKeys="3" :context-menu-handler="catalogContextMenuHandler"  :search="false" 
+             :decide="true" @decide="onDecide"
+             :contextmenu="true"
+             />
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel collapsible  :min="200">
+      <ElSplitterPanel  :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" >
-            <DbHst ref="projectHstRef" :settings="projectDbSettings"></DbHst>
+            <DbHst ref="projectHstRef" :settings="projectDbSettings" :contextMenuItems="projectContextMenuItems"></DbHst>
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel collapsible  :min="200">
+      <ElSplitterPanel  :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" >
-            <DbHst ref="subHstRef" :settings="subDbSettings"></DbHst>
+            <DbHst ref="subHstRef" :settings="subDbSettings" :contextMenuItems="subContextMenuItems"></DbHst>
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel collapsible size="18%" :min="200">
+      <ElSplitterPanel size="18%" :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" >
-            <DbHst ref="guideHstRef" :settings="guideDbSettings"></DbHst>
+            <DbHst ref="guideHstRef" :settings="guideDbSettings" :contextMenuItems="guideContextMenuItems"></DbHst>
         </ElCard>
-      </ElSplitterPanel>
+      </ElSplitterPanel :min="200">
       <ElSplitterPanel size="20%">
         <ElSplitter layout="vertical" @resize-end="onResizeEnd">
-          <ElSplitterPanel collapsible size="50%" :min="200">
+          <ElSplitterPanel  size="50%" :min="200">
             <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="topContainerRef">
-                <DbTree :height="topContainerHeight" :data="topTreeData" @select="treeHandleSelect" :defaultExpandedKeys="3" :context-menu-handler="topContextMenuHandler"  :search="false" />
+              <!-- :context-menu-handler="topContextMenuHandler" -->
+                <DbTree :height="topContainerHeight" :data="topTreeData" @select="treeHandleSelect" 
+                :defaultExpandedKeys="3" :search="false" />
             </ElCard>
           </ElSplitterPanel>
-          <ElSplitterPanel collapsible :min="200">
+          <ElSplitterPanel :min="200">
             <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="bottomContainerRef">
-                <DbHst ref="bottomHstRef" :settings="bottomDbSettings"></DbHst>
+                <DbHst ref="bottomHstRef" :settings="bottomDbSettings" :contextMenuItems="bottomContextMenuItems"></DbHst>
             </ElCard>
           </ElSplitterPanel>
         </ElSplitter>
       </ElSplitterPanel>
     </ElSplitter>
+
+    <!-- 树选择弹窗 -->
+    <ElDialog
+      v-model="dialogVisible"
+      title="选择节点"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <ElTreeV2
+        :data="dialogTreeData"
+        :props="{ value: 'id', label: 'label', children: 'children' }"
+        :height="400"
+        highlight-current
+        @node-click="handleDialogTreeClick"
+      />
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton @click="handleDialogCancel">取消</ElButton>
+          <ElButton type="primary" @click="handleDialogConfirm">确定</ElButton>
+        </span>
+      </template>
+    </ElDialog>
+
+    <!-- 富文本编辑弹窗 -->
+    <ElDialog
+      v-model="richTextDialogVisible"
+      title="编辑清单说明"
+      width="800px"
+      :close-on-click-modal="false"
+    >
+      <RichTextarea v-model="richTextContent" height="400px" />
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton @click="handleRichTextCancel">取消</ElButton>
+          <ElButton type="primary" @click="handleRichTextConfirm">确定</ElButton>
+        </span>
+      </template>
+    </ElDialog>
 </Page>
 </template>
 
diff --git a/apps/web-ele/src/views/database/list/guide.ts b/apps/web-ele/src/views/database/list/guide.ts
index 1db5a3f..5deeced 100644
--- a/apps/web-ele/src/views/database/list/guide.ts
+++ b/apps/web-ele/src/views/database/list/guide.ts
@@ -1,33 +1,108 @@
 //清单指引
-import { ref } from 'vue'
-const columns = ref<any[]>([
-{type:'text',data:'code',title:'编码'},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'unit',title:'单位',width:30},
+import { ref, nextTick } from 'vue'
+import type { Ref } from 'vue'
+import { useParentChildLineNestedRowsFalse } from '#/components/db-hst/nestedRows'
 
-])
+// 用于存储 guideHstRef 的引用
+let guideHstRef: Ref<any> | null = null
+const selectedRow = ref<any>(null) // 记录当前选中的行
 
-const mockData = ()=>{
-   const units = ['m³', 'm²', 'm', 'kg', 't', '个', '套', '台', '块', '根']
-   const categories = ['混凝土', '钢材', '木材', '砖瓦', '管材', '电缆', '涂料', '五金', '设备', '其他']
-   
-   const mockData = Array.from({ length: 30 }, (_, index) => ({
-      code: `A${String(index + 1).padStart(6, '0')}`,
-      name: `${categories[index % categories.length]}材料${index + 1}`,
-      unit: units[index % units.length],
-    }))
-    return mockData;
+// 回调函数，供 config.vue 使用
+let onCellMouseDownCallback: ((row: number | null) => void) | null = null
+
+// 初始化函数，由 config.vue 调用
+export function initGuideHst(hstRef: Ref<any>, callback?: (row: number | null) => void) {
+  guideHstRef = hstRef
+  onCellMouseDownCallback = callback || null
 }
-let rowSchema: any = {}
-// 根据 columns 的 data 字段生成对象结构
-columns.value.forEach((col: any) => {
-  if (col.data) {
-    rowSchema[col.data] = null
-  }
+
+const { load: originalLoad, codeRenderer, handleRowOperation, initSchema, highlightDeselect } = useParentChildLineNestedRowsFalse({
+  getHotInstance: () => guideHstRef?.value?.hotInstance,
 })
-export let dbSettings = {
-  data: mockData(),
-  dataSchema: rowSchema,
-  colWidths: 100,
-  columns: columns.value
+// 包装 load 函数，在加载前重置选中行
+export function load(data: any[]) {
+  selectedRow.value = null
+  return originalLoad(data)
 }
+const columns:any[] = [
+{type:'text',data:'number',title:'序号', width: 50},
+{type:'text',data:'code',title:'编码',renderer: codeRenderer, code:true},
+{type:'text',data:'name',title:'名称'},
+{type:'text',data:'unit',title:'单位',width:50, className: 'htCenter'},
+
+]
+
+export let dbSettings = {
+  data: [],
+  dataSchema: initSchema(columns),
+  colWidths: 160,
+  columns: columns,
+  rowHeaders: false,
+  nestedRows: false,
+  bindRowsWithHeaders: true,
+  contextMenu: {
+    items: {
+      custom_row_above: {
+        name: '在上方插入行',
+        callback: function() {
+          handleRowOperation(this, 'above')
+        }
+      },
+      custom_row_below: {
+        name: '在下方插入行',
+        callback: function() {
+          handleRowOperation(this, 'below')
+        }
+      },
+      separator1: '---------',
+      custom_add_child: {
+        name: '添加子行',
+        callback: function() {
+          handleRowOperation(this, 'child')
+        }
+      },
+      separator2: '---------',
+      remove_row: {
+        name: '删除行',
+        callback: function() {
+          handleRowOperation(this, 'delete')
+        }
+      },
+      // separator3: '---------',
+      // undo: {},
+      // redo: {}
+    }
+  },
+  currentRowClassName: 'row-highlight',
+  beforeOnCellMouseDown(event: MouseEvent, coords: any, TD: HTMLTableCellElement){
+    // 只能单击
+    if (event.button !== 0) {
+      return // 直接返回，不执行后续逻辑
+    }
+    selectedRow.value = coords
+    
+    // 触发回调函数
+    if (onCellMouseDownCallback) {
+      onCellMouseDownCallback(selectedRow.value)
+    }
+  },
+  afterDeselect(){
+    highlightDeselect(this, selectedRow.value)
+  }
+}
+// 定义 topHstRef 的自定义右键菜单
+export const contextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      handleRowOperation(hotInstance, 'append')
+      
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/list/project.ts b/apps/web-ele/src/views/database/list/project.ts
index 491e32c..2c927c5 100644
--- a/apps/web-ele/src/views/database/list/project.ts
+++ b/apps/web-ele/src/views/database/list/project.ts
@@ -1,75 +1,47 @@
 //工程
-import { ref } from 'vue'
-import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
-const columns = ref<any[]>([
-{type:'text',data:'code',title:'编号',renderer: codeRenderer},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'unit',title:'单位', width: 50},
-])
-const mockData = ()=>{
-    const mockData = []
-    let codeCounter = 1
-    
-    // 生成5个父级工程项目
-    for (let i = 0; i < 5; i++) {
-        const parentCode = `PRJ${String(codeCounter++).padStart(2, '0')}`
-        const parent = {
-            code: parentCode,
-            name: `工程分类${i + 1}`,
-            unit: ['项', 'm³', 'm²', 't', '套'][i % 5],
-            level: String(i),
-            __children: []
-        }
-        
-        // 为每个父级生成2-4个子项
-        const childCount = Math.floor(Math.random() * 3) + 2
-        for (let j = 0; j < childCount; j++) {
-            const childCode = `${parentCode}-${String(j + 1).padStart(3, '0')}`
-            const child = {
-                code: childCode,
-                name: `${parent.name}-子项${j + 1}`,
-                unit: ['m³', 'm²', 't', '套', '台'][j % 5],
-                level: `${i}-${j + 1}`,
-                __children: []
-            }
-            
-            // 为部分子项生成孙项
-            if (j === 0 && i < 3) {
-                const grandChildCount = Math.floor(Math.random() * 2) + 1
-                for (let k = 0; k < grandChildCount; k++) {
-                    const grandChild = {
-                        code: `${childCode}-${String(k + 1).padStart(2, '0')}`,
-                        name: `${child.name}-明细${k + 1}`,
-                        unit: ['m³', 'm²', 't', 'kg', '个'][k % 5],
-                        level: `${i}-${j + 1}-${k + 1}`,
-                        __children: []
-                    }
-                    child.__children.push(grandChild)
-                }
-            }
-            
-            parent.__children.push(child)
-        }
-        
-        mockData.push(parent)
-    }
-    
-    return mockData
+import { ref, nextTick } from 'vue'
+import type { Ref } from 'vue'
+import { useParentChildLineNestedRowsFalse } from '#/components/db-hst/nestedRows'
+
+// 用于存储 projectHstRef 的引用
+let projectHstRef: Ref<any> | null = null
+const selectedRow = ref<any>(null) // 记录当前选中的行
+
+// 回调函数，供 config.vue 使用
+let onCellMouseDownCallback: ((row: number | null) => void) | null = null
+
+// 初始化函数，由 config.vue 调用
+export function initProjectHst(hstRef: Ref<any>, callback?: (row: number | null) => void) {
+  projectHstRef = hstRef
+  onCellMouseDownCallback = callback || null
 }
-let rowSchema: any = {level: null, __children: []}
-// 根据 columns 的 data 字段生成对象结构
-columns.value.forEach((col: any) => {
-  if (col.data && col.data !== 'level' && col.data !== '__children') {
-    rowSchema[col.data] = null
-  }
+
+const { load: originalLoad, codeRenderer, handleRowOperation, initSchema, highlightDeselect } = useParentChildLineNestedRowsFalse({
+  getHotInstance: () => projectHstRef?.value?.hotInstance,
 })
+
+// 包装 load 函数，在加载前重置选中行
+export function load(data: any[]) {
+  selectedRow.value = null
+  return originalLoad(data)
+}
+const columns:any[] = [
+{type:'text',data:'number',title:'序号', width: 50, className: 'htCenter'},
+{type:'text',data:'code',title:'编号',renderer: codeRenderer, code:true},
+{type:'text',data:'name',title:'名称'},
+{type:'text',data:'unit',title:'单位', width: 60, className: 'htCenter'},
+{type:'text',data:'text1',title:'编码增加数', width: 100},
+{type:'text',data:'text2',title:'尾节点', width: 100},
+{type:'text',data:'text3',title:'子目编码增加数', width: 110},
+]
+
 export let dbSettings = {
-  data: mockData(),
-  dataSchema: rowSchema,
+  data: [],
+  dataSchema: initSchema(columns),
   colWidths: 160,
-  columns: columns.value,
+  columns: columns,
   rowHeaders: false,
-  nestedRows: true,
+  nestedRows: false,
   bindRowsWithHeaders: true,
   contextMenu: {
     items: {
@@ -104,5 +76,37 @@ export let dbSettings = {
       // redo: {}
     }
   },
+  currentRowClassName: 'row-highlight',
+  beforeOnCellMouseDown(event: MouseEvent, coords: any, TD: HTMLTableCellElement){
+    // 只能单击
+    if (event.button !== 0) {
+      return // 直接返回，不执行后续逻辑
+    }
+    selectedRow.value = coords
+
+    // 触发回调函数
+    if (onCellMouseDownCallback) {
+      onCellMouseDownCallback(selectedRow.value)
+    }
+  },
+  afterDeselect(){
+    highlightDeselect(this, selectedRow.value)
+  }
 }
 
+// 定义 topHstRef 的自定义右键菜单
+export const contextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      handleRowOperation(hotInstance, 'append')
+      
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/list/rightHst.ts b/apps/web-ele/src/views/database/list/rightHst.ts
index c7e73ff..4ee4cd4 100644
--- a/apps/web-ele/src/views/database/list/rightHst.ts
+++ b/apps/web-ele/src/views/database/list/rightHst.ts
@@ -1,33 +1,108 @@
 //右下角
-import { ref } from 'vue'
-const columns = ref<any[]>([
-{type:'text',data:'code',title:'编码'},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'unit',title:'单位',width:30},
+import { ref, nextTick } from 'vue'
+import type { Ref } from 'vue'
+import { useParentChildLineNestedRowsFalse } from '#/components/db-hst/nestedRows'
 
-])
+// 用于存储 bottomHstRef 的引用
+let bottomHstRef: Ref<any> | null = null
+const selectedRow = ref<number | null>(null) // 记录当前选中的行
 
-const mockData = ()=>{
-   const units = ['m³', 'm²', 'm', 'kg', 't', '个', '套', '台', '块', '根']
-   const categories = ['混凝土', '钢材', '木材', '砖瓦', '管材', '电缆', '涂料', '五金', '设备', '其他']
-   
-   const mockData = Array.from({ length: 30 }, (_, index) => ({
-      code: `B${String(index + 1).padStart(6, '0')}`,
-      name: `${categories[index % categories.length]}材料${index + 1}`,
-      unit: units[index % units.length],
-    }))
-    return mockData;
+// 回调函数，供 config.vue 使用
+let onCellMouseDownCallback: ((row: number | null) => void) | null = null
+
+// 初始化函数，由 config.vue 调用
+export function initBottomHst(hstRef: Ref<any>, callback?: (row: number | null) => void) {
+  bottomHstRef = hstRef
+  onCellMouseDownCallback = callback || null
 }
-let rowSchema: any = {}
-// 根据 columns 的 data 字段生成对象结构
-columns.value.forEach((col: any) => {
-  if (col.data) {
-    rowSchema[col.data] = null
-  }
+
+const { load: originalLoad, codeRenderer, handleRowOperation, initSchema, highlightDeselect } = useParentChildLineNestedRowsFalse({
+  getHotInstance: () => bottomHstRef?.value?.hotInstance,
 })
-export let dbSettings = {
-  data: mockData(),
-  dataSchema: rowSchema,
-  colWidths: 100,
-  columns: columns.value
+// 包装 load 函数，在加载前重置选中行
+export function load(data: any[]) {
+  selectedRow.value = null
+  return originalLoad(data)
 }
+const columns :any[] = [
+  {type:'text',data:'number',title:'序号', width: 50},
+{type:'text',data:'code',title:'编码'},
+{type:'text',data:'name',title:'名称', className: 'htCenter'},
+{type:'text',data:'unit',title:'单位',width:50},
+
+]
+
+export let dbSettings = {
+  data: [],
+  dataSchema: initSchema(columns),
+  colWidths: 100,
+  columns: columns,
+  rowHeaders: false,
+  nestedRows: false,
+  bindRowsWithHeaders: true,
+  contextMenu: {
+    items: {
+      custom_row_above: {
+        name: '在上方插入行',
+        callback: function() {
+          handleRowOperation(this, 'above')
+        }
+      },
+      custom_row_below: {
+        name: '在下方插入行',
+        callback: function() {
+          handleRowOperation(this, 'below')
+        }
+      },
+      separator1: '---------',
+      custom_add_child: {
+        name: '添加子行',
+        callback: function() {
+          handleRowOperation(this, 'child')
+        }
+      },
+      separator2: '---------',
+      remove_row: {
+        name: '删除行',
+        callback: function() {
+          handleRowOperation(this, 'delete')
+        }
+      },
+      // separator3: '---------',
+      // undo: {},
+      // redo: {}
+    }
+  },
+  currentRowClassName: 'row-highlight',
+  beforeOnCellMouseDown(event: MouseEvent, coords: any, TD: HTMLTableCellElement){
+    // 只能单击
+    if (event.button !== 0) {
+      return // 直接返回，不执行后续逻辑
+    }
+    selectedRow.value = coords
+    
+    // 触发回调函数
+    if (onCellMouseDownCallback) {
+      onCellMouseDownCallback(selectedRow.value)
+    }
+  },
+  afterDeselect(){
+    highlightDeselect(this, selectedRow.value)
+  }
+}
+// 定义 topHstRef 的自定义右键菜单
+export const contextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      handleRowOperation(hotInstance, 'below')
+      
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
diff --git a/apps/web-ele/src/views/database/list/sub.ts b/apps/web-ele/src/views/database/list/sub.ts
index a18415b..bce035e 100644
--- a/apps/web-ele/src/views/database/list/sub.ts
+++ b/apps/web-ele/src/views/database/list/sub.ts
@@ -1,35 +1,144 @@
 //清单子目
-import { ref } from 'vue'
-const columns = ref<any[]>([
-{type:'text',data:'code',title:'编码'},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'unit',title:'单位',width:30},
-{type:'text',data:'desc',title:'清单说明'},
+import { ref, nextTick } from 'vue'
+import type { Ref } from 'vue'
+import { useParentChildLineNestedRowsFalse } from '#/components/db-hst/nestedRows'
+import { selectCellBorderStyle } from '#/components/db-hst/base'
 
-])
+// 用于存储 subHstRef 的引用
+let subHstRef: Ref<any> | null = null
+const selectedRow = ref<any>(null) // 记录当前选中的行
 
-const mockData = ()=>{
-   const units = ['m³', 'm²', 'm', 'kg', 't', '个', '套', '台', '块', '根']
-   const categories = ['混凝土', '钢材', '木材', '砖瓦', '管材', '电缆', '涂料', '五金', '设备', '其他']
-   
-   const mockData = Array.from({ length: 30 }, (_, index) => ({
-      code: `MAT${String(index + 1).padStart(6, '0')}`,
-      name: `${categories[index % categories.length]}材料${index + 1}`,
-      unit: units[index % units.length],
-      desc: `这是详细说明，`
-    }))
-    return mockData;
+// 回调函数，供 config.vue 使用
+let onCellMouseDownCallback: ((row: number | null) => void) | null = null
+
+// 初始化函数，由 config.vue 调用
+export function initSubHst(hstRef: Ref<any>, callback?: (row: number | null) => void) {
+  subHstRef = hstRef
+  onCellMouseDownCallback = callback || null
 }
-let rowSchema: any = {}
-// 根据 columns 的 data 字段生成对象结构
-columns.value.forEach((col: any) => {
-  if (col.data) {
-    rowSchema[col.data] = null
-  }
+
+const { load: originalLoad, codeRenderer, handleRowOperation, initSchema, highlightDeselect } = useParentChildLineNestedRowsFalse({
+  getHotInstance: () => subHstRef?.value?.hotInstance,
 })
-export let dbSettings = {
-  data: mockData(),
-  dataSchema: rowSchema,
-  colWidths: 100,
-  columns: columns.value
+
+// 包装 load 函数，在加载前重置选中行
+export function load(data: any[]) {
+  selectedRow.value = null
+  return originalLoad(data)
 }
+// 用于存储编辑回调函数
+let editDescCallback: ((row: number, col: number, value: string) => void) | null = null
+
+// 设置编辑回调
+export function setEditDescCallback(callback: (row: number, col: number, value: string) => void) {
+  editDescCallback = callback
+}
+
+// 自定义渲染器
+function editRenderer(instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) {
+  // 清空单元格内容
+  td.innerHTML = ''
+  
+  // 创建链接元素
+  const link = document.createElement('a')
+  link.href = 'javascript:void(0)'
+  link.textContent = '说明'
+  // link.textContent = value || '点击编辑'
+  link.style.color = '#409eff'
+  link.style.textDecoration = 'underline'
+  link.style.cursor = 'pointer'
+
+  // 点击事件
+  link.addEventListener('mousedown', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (editDescCallback) {
+      editDescCallback(row, col, value || '')
+    }
+  })
+  
+  td.appendChild(link)
+  return td
+}
+const columns:any[] = [
+  {type:'text',data:'number',title:'序号', width: 50},
+  {type:'text',data:'code',title:'编码'},
+  {type:'text',data:'name',title:'名称'},
+  {type:'text',data:'unit',title:'单位',width:50, className: 'htCenter'},
+  {type:'text',data:'desc',title:'清单说明',renderer: editRenderer},
+]
+
+export let dbSettings = {
+  data: [],
+  dataSchema: initSchema(columns),
+  colWidths: 100,
+  columns: columns,
+  rowHeaders: false,
+  nestedRows: false,
+  bindRowsWithHeaders: true,
+  contextMenu: {
+    items: {
+      custom_row_above: {
+        name: '在上方插入行',
+        callback: function() {
+          handleRowOperation(this, 'above')
+        }
+      },
+      custom_row_below: {
+        name: '在下方插入行',
+        callback: function() {
+          handleRowOperation(this, 'below')
+        }
+      },
+      separator1: '---------',
+      custom_add_child: {
+        name: '添加子行',
+        callback: function() {
+          handleRowOperation(this, 'child')
+        }
+      },
+      separator2: '---------',
+      remove_row: {
+        name: '删除行',
+        callback: function() {
+          handleRowOperation(this, 'delete')
+        }
+      },
+      // separator3: '---------',
+      // undo: {},
+      // redo: {}
+    }
+  },
+  currentRowClassName: 'row-highlight',
+  beforeOnCellMouseDown(event: MouseEvent, coords: any, TD: HTMLTableCellElement){
+    // 只能单击
+    if (event.button !== 0) {
+      return // 直接返回，不执行后续逻辑
+    }
+    selectedRow.value = coords
+    
+    // 触发回调函数
+    if (onCellMouseDownCallback) {
+      onCellMouseDownCallback(selectedRow.value)
+    }
+  },
+  afterDeselect(){
+    highlightDeselect(this, selectedRow.value)
+  }
+}
+// 定义 topHstRef 的自定义右键菜单
+export const contextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      handleRowOperation(hotInstance, 'below')
+      
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
diff --git a/apps/web-ele/src/views/database/materials/category.ts b/apps/web-ele/src/views/database/materials/category.ts
index 8680f19..cac465f 100644
--- a/apps/web-ele/src/views/database/materials/category.ts
+++ b/apps/web-ele/src/views/database/materials/category.ts
@@ -1,22 +1,426 @@
-export const materialsColHeaders: string[] = [
-  '名称',
-  '类别',
-  '除税基价代码',
-  '含税基价代码',
-  '除税编制代码',
-  '含税编制代码',
+import { createCatalogItem, createCategoriesTree, deleteCatalogItem, deleteCategoriesTree } from '#/api/database/materials/index';
+import { deleteCategories } from '#/api/database/materials/root';
+import { ElMessage } from 'element-plus';
+type Tree = { id: string; label: string; children?: Tree[]; [key: string]: any }
+
+// 生成随机6位数字+英文字符串
+const generateRandomCode = (): string => {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+  for (let i = 0; i < 6; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+// 递归转换树结构：name -> label，保留所有原始属性
+export const transformTreeData = (data: any[]): Tree[] => {
+  return data.map(item => ({
+    ...item, // 保留所有原始属性
+    id: String(item.id), // 确保ID是字符串
+    label: item.name,
+    children: item.children && item.children.length > 0
+      ? transformTreeData(item.children)
+      : []
+  }))
+}
+// 自定义 renderer：检测重复的 code 值并标红
+/*const duplicateCodeRenderer = (instance: any, td: HTMLElement, _row: number, _col: number, _prop: string, value: any, _cellProperties: any) => {
+  // 检查是否需要设置验证背景色
+  // const columns = instance.getSettings().columns || []
+  // const currentColumn = columns[_col]
+  // const isEmpty = value === null || value === undefined || String(value).trim() === ''
+
+  // // 如果列配置了 allowInvalid: true 且值为空，设置红色背景
+  // if (currentColumn?.allowInvalid === true && isEmpty) {
+
+  // } else {
+  //   td.style.backgroundColor = '' // 清除背景色
+  // }
+  // 默认渲染
+  td.textContent = value || ''
+
+  // 获取所有数据
+  const data = instance.getSourceData()
+
+  // 检查当前值是否重复（排除空值）
+  if (value && value.toString().trim() !== '') {
+    const duplicateCount = data.filter((item: any) => item.code === value).length
+    if (duplicateCount > 1) {
+      td.style.color = 'red'
+      td.style.fontWeight = 'bold'
+    } else {
+      td.style.color = ''
+      td.style.fontWeight = ''
+    }
+  }else{
+
+    // td.style.backgroundColor = '#ff4d4f20' // 淡红色背景
+  }
+
+  return td
+}*/
+
+// export const materialsColumns:any[] = [
+// //   {type:'text',data:'sort',title:'⇅', renderer: manualRowMoveRenderer,
+// //   width: 40,
+// //     readOnly: true,
+// //     editor: false,
+// // },
+// {type:'text',data:'sortOrder',title:'序号', allowInvalid: true},
+// {type:'text',data:'name',title:'名称', allowInvalid: true},
+// {type:'text',data:'code',title:'类别', allowInvalid: true,
+//   renderer: 'db-dropdown',
+//   // source 会在 category.vue 中动态设置
+//   onAfterSelect: (instance: any, row: number, column: number, selectedValue: string, optData?: any) => {
+//     console.log('选择后回调:', { row, column, selectedValue, optData })
+//     // 可以在这里处理选择后的逻辑，例如：
+//     // 1. 根据选中的类别自动填充其他字段
+//     // 2. 触发相关数据更新
+//     // 3. 验证或联动其他列
+//     if (optData) {
+//       // 如果需要根据选中的数据更新其他列，可以这样做：
+//       // instance.setDataAtRowProp(row, 'otherField', optData.someValue, 'autofill')
+//     }
+//     // const data = {
+//     //   categoryTreeId: 5,
+//     //   categoryId: 1,
+//     //   sortOrder: 1
+//     // }
+//   }
+// },
+// ]
+export const rootColum: any[] = [
+{type:'text',data:'sortOrder',title:'序号', required: true, allowInvalid: true, className: 'htCenter'},
+{type:'text',data:'name',title:'名称', required: true, allowInvalid: true},
+{type:'text',data:'code',title:'类别', required: true, allowInvalid: true},
+{type:'text',data:'taxExclBaseCode',title:'除税基价代码', required: true, allowInvalid: true, className: 'htRight'},
+{type:'text',data:'taxInclBaseCode',title:'含税基价代码', required: true, allowInvalid: true, className: 'htRight'},
+{type:'text',data:'taxExclCompileCode',title:'除税编制代码', required: true, allowInvalid: true, className: 'htRight'},
+{type:'text',data:'taxInclCompileCode',title:'含税编制代码', required: true, allowInvalid: true, className: 'htRight'},
 ]
 
-export const materialsColumns:any[] = [
-{type:'text',data:'code',title:'编码'},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'category',title:'类别',
-  renderer: 'db-dropdown',
-  source: ['人', '人机', '材', '机'],
-  readOnly: true,
-},
-{type:'text',data:'priceExTax',title:'除税基价代码'},
-{type:'text',data:'priceInTax',title:'含税基价代码'},
-{type:'text',data:'priceExTaxComp',title:'除税编制代码'},
-{type:'text',data:'priceInTaxComp',title:'含税编制代码'},
-]
+
+// 直接使用配置对象，DbTree 会自动创建 HierarchyContextMenuHandler
+export const contextMenuHandler = {
+  rootKey: 'add-category',
+  rootText: '添加工料机总类',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('添加工料机总类:', newNode, '所有根节点:', allRootNodes)
+
+    // 计算根节点数量作为新的 sortOrder
+    const newSortOrder = allRootNodes.length + 1
+    newNode.code = 'ROOT'
+    newNode.sortOrder = newSortOrder
+
+    console.log('新节点 sortOrder:', newSortOrder)
+    // TODO: 有BUG添加时list不出现
+    // await createCategories({ name: newNode.label, code: newNode.code, sortOrder: newNode.sortOrder }).then(res=>{
+    //   if(res){
+    //     newNode.id = res
+    //   }
+    // })
+  },
+  onRootDelete: async (node: any) => {
+    console.log('删除工料机总类:', node)
+    // 调用 API 删除根节点
+    await deleteCategories(node.id)
+  },
+  levels: [
+    {
+      depth: 0,
+      addKey: 'add-province',
+      addText: '添加省市',
+      sort: 'sortOrder',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加省市 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+
+        // 检查父节点ID是否有效（不是临时ID）
+        if (parentNode.id.includes('-')) {
+          console.error('父节点未保存，无法添加子节点')
+          throw new Error('请先保存父节点')
+        }
+
+        // 计算子节点数量作为新的 sortOrder
+        const newSortOrder = allChildren.length + 1
+
+        console.log('父节点下子节点数量:', allChildren.length, '新 sortOrder:', newSortOrder)
+
+        // 调用 API 保存省市节点 - 直接使用字符串ID
+        // 生成唯一的编码：region + 随机字符串
+        const uniqueCode = 'region-' + generateRandomCode()
+
+        await createCategoriesTree({
+          parentId: parentNode.id, // 直接使用字符串ID
+          code: uniqueCode,
+          name: newNode.label,
+          nodeType: "region",
+          sortOrder: newSortOrder
+        }).then(res => {
+          if(res){
+            newNode.id = String(res)
+          }
+        })
+      },
+      onDelete: async (node: any) => {
+        console.log('删除省市:', node)
+        // 调用 API 删除省市节点
+        await deleteCategoriesTree(node.id)
+      }
+    },
+    {
+      depth: 1,
+      addKey: 'add-specialty',
+      addText: '添加工料机专业',
+      sort: 'sortOrder',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加工料机专业 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+
+        // 检查父节点ID是否有效（不是临时ID）
+        if (parentNode.id.includes('-')) {
+          console.error('父节点未保存，无法添加子节点')
+          throw new Error('请先保存父节点')
+        }
+
+        // 计算子节点数量作为新的 sortOrder
+        const newSortOrder = allChildren.length + 1
+
+        console.log('父节点下子节点数量:', allChildren.length, '新 sortOrder:', newSortOrder)
+
+        // 调用 API 保存工料机专业节点 - 直接使用字符串ID
+        // 生成唯一的编码：specialty + 随机字符串
+        const uniqueCode = 'specialty-' + generateRandomCode()
+
+        await createCategoriesTree({
+          parentId: parentNode.id, // 直接使用字符串ID
+          code: uniqueCode,
+          name: newNode.label,
+          nodeType: "specialty",
+          sortOrder: newSortOrder
+        }).then(res=>{
+          if(res){
+            newNode.id = String(res)
+          }
+          console.log(res)
+        })
+      },
+      onDelete: async (node: any) => {
+        console.log('删除工料机专业:', node)
+        // 调用 API 删除工料机专业节点
+        await deleteCategoriesTree(node.id)
+      }
+    },
+    {
+      depth: 2,
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除第三层节点:', node)
+        // TODO: 调用 API 删除第三层节点
+        await deleteCategoriesTree(node.id)
+      }
+    }
+  ]
+}
+export const createCatalogueMenuHandler = (getCategoryTreeId: () => number | string | null) => ({
+  rootKey: 'add-catalogue',
+  rootText: '添加目录',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('添加目录:', newNode, '所有根节点:', allRootNodes)
+
+    const categoryTreeId = getCategoryTreeId()
+    if (!categoryTreeId) {
+      ElMessage.error('请先选择工料机专业')
+      throw new Error('categoryTreeId 未提供')
+    }
+
+    // 计算根节点数量作为新的 sortOrder
+    const newSortOrder = allRootNodes.length + 1
+    
+    // 生成 code
+    const code = newNode.label + generateRandomCode()
+
+    try {
+      // 调用API创建根目录节点
+      const id = await createCatalogItem({
+        categoryTreeId: categoryTreeId,
+        code: code,
+        name: newNode.label,
+        parentId: null,
+        sortOrder: newSortOrder
+      })
+
+      // 更新节点数据
+      newNode.id = String(id)
+      newNode.code = code
+      newNode.sortOrder = newSortOrder
+
+      console.log('目录创建成功，新ID:', id)
+      ElMessage.success('添加成功')
+    } catch (error) {
+      console.error('添加目录失败:', error)
+      ElMessage.error('添加失败')
+      throw error
+    }
+  },
+  onRootDelete: async (node: any) => {
+    console.log('删除目录:', node)
+
+    try {
+      await deleteCatalogItem(node.id)
+      ElMessage.success('删除成功')
+    } catch (error) {
+      console.error('删除目录失败:', error)
+      ElMessage.error('删除失败')
+      throw error
+    }
+  },
+  levels: [
+    {
+      depth: 0,
+      addKey: 'add-material',
+      addText: '添加子目录',
+      sort: 'sortOrder',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加子目录 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+
+        const categoryTreeId = getCategoryTreeId()
+        if (!categoryTreeId) {
+          ElMessage.error('请先选择工料机专业')
+          throw new Error('categoryTreeId 未提供')
+        }
+
+        // 检查父节点ID是否有效（不是临时ID）
+        if (parentNode.id.includes('-')) {
+          ElMessage.error('请先保存父节点')
+          throw new Error('父节点未保存')
+        }
+
+        // 计算子节点数量作为新的 sortOrder
+        const newSortOrder = allChildren.length + 1
+        
+        // 生成 code
+        const code = newNode.label + generateRandomCode()
+
+        console.log('父节点下子节点数量:', allChildren.length, '新 sortOrder:', newSortOrder)
+
+        try {
+          // 调用API创建子目录节点
+          const id = await createCatalogItem({
+            categoryTreeId: categoryTreeId,
+            code: code,
+            name: newNode.label,
+            parentId: parentNode.id, // 直接使用字符串ID
+            sortOrder: newSortOrder
+          })
+
+          // 更新节点数据
+          newNode.id = String(id)
+          newNode.code = code
+          newNode.sortOrder = newSortOrder
+          
+          console.log('子目录创建成功，新ID:', id)
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加子目录失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('删除目录:', node)
+
+        try {
+          await deleteCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除目录失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
+    },
+    {
+      depth: 1,
+      addKey: 'add-material-child',
+      addText: '添加材料',
+      sort: 'sortOrder',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加材料 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+
+        const categoryTreeId = getCategoryTreeId()
+        if (!categoryTreeId) {
+          ElMessage.error('请先选择工料机专业')
+          throw new Error('categoryTreeId 未提供')
+        }
+
+        // 检查父节点ID是否有效（不是临时ID）
+        if (parentNode.id.includes('-')) {
+          ElMessage.error('请先保存父节点')
+          throw new Error('父节点未保存')
+        }
+
+        // 计算子节点数量作为新的 sortOrder
+        const newSortOrder = allChildren.length + 1
+        
+        // 生成 code
+        const code = newNode.label + generateRandomCode()
+
+        console.log('父节点下子节点数量:', allChildren.length, '新 sortOrder:', newSortOrder)
+
+        try {
+          // 调用API创建材料节点
+          const id = await createCatalogItem({
+            categoryTreeId: categoryTreeId,
+            code: code,
+            name: newNode.label,
+            parentId: parentNode.id, // 直接使用字符串ID
+            sortOrder: newSortOrder
+          })
+
+          // 更新节点数据
+          newNode.id = String(id)
+          newNode.code = code
+          newNode.sortOrder = newSortOrder
+          
+          console.log('材料创建成功，新ID:', id)
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加材料失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('删除材料:', node)
+
+        try {
+          await deleteCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除材料失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
+    },
+    {
+      depth: 2,
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除目录:', node)
+
+        try {
+          await deleteCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除目录失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
+    }
+  ]
+})
diff --git a/apps/web-ele/src/views/database/materials/category.vue b/apps/web-ele/src/views/database/materials/category.vue
index 8bd3cb0..b9863c6 100644
--- a/apps/web-ele/src/views/database/materials/category.vue
+++ b/apps/web-ele/src/views/database/materials/category.vue
@@ -1,81 +1,31 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch } from 'vue'
-import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard,ElScrollbar } from 'element-plus';
-import { DbTree } from '#/components/db-tree';
+import {
+    createCategoryTreeMapping,
+    deleteCategoryTreeMapping,
+    getCatalogsTreeList, getCategoriesTree,
+    updateCategoriesTree
+} from '#/api/database/materials/index';
 import { DbHst } from '#/components/db-hst';
-import { useElementSize } from '@vueuse/core'
-// import { materialsColumns } from './category'
-import { manualRowMoveRenderer } from '#/components/db-hst/sort'
+
+import { validatorRow } from '#/components/db-hst/validator';
+import { DbTree } from '#/components/db-tree';
+import { Page } from '@vben/common-ui';
+import { useElementSize } from '@vueuse/core';
+import { ElCard, ElMessage, ElSplitter, ElSplitterPanel } from 'element-plus';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { contextMenuHandler, rootColum, transformTreeData } from './category';
+
+import { createCategories, deleteCategories, getCategoriesList, updateCategories } from '#/api/database/materials/root';
 //获取元素高度
 const containerRef = ref<HTMLElement | null>(null)
 const { height: containerHeight } = useElementSize(containerRef)
 type Tree = { id: string; label: string; children?: Tree[] }
 
-const treeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '工料机总类',
-    children: [
-      {
-        id: '2',
-        label: '广东',
-        children: [
-          { id: '3', label: '广东工民建工料机' },
-          { id: '4', label: '广东公路工料机' },
-          { id: '5', label: '广东水利工料机' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '工料机总类2',
-    children: [
-      {
-        id: '12',
-        label: '广西',
-        children: [
-          { id: '13', label: '工料机1' },
-          { id: '14', label: '工料机1' },
-          { id: '15', label: '工料机2' }
-        ]
-      }
-    ]
-  }
-])
+const treeData = ref<Tree[]>([])
 const dbHstRef = ref<any>(null)
-const handleSelect = (node: Tree) => {
-  if (dbHstRef.value && typeof dbHstRef.value.loadData === 'function') {
-    // console.log('hstData.value',hstData.value)
-    // dbHstRef.value.loadData(dbHstRef.value.defaultData(hstData.value))
-  }
-}
 
-// 直接使用配置对象，DbTree 会自动创建 HierarchyContextMenuHandler
-const contextMenuHandler = {
-  rootKey: 'add-category',
-  rootText: '添加总类',
-  levels: [
-    {
-      depth: 0,
-      addKey: 'add-province',
-      addText: '添加省市',
-      allowDelete: true
-    },
-    {
-      depth: 1,
-      addKey: 'add-specialty',
-      addText: '添加工料机专业',
-      allowDelete: true
-    },
-    {
-      depth: 2,
-      allowDelete: true
-    }
-  ]
-}
 
+const currentNode = ref<any>(null)
 
 const materialsColumns:any[] = [
 //   {type:'text',data:'sort',title:'⇅', renderer: manualRowMoveRenderer,
@@ -83,55 +33,304 @@ const materialsColumns:any[] = [
 //     readOnly: true,
 //     editor: false,
 // },
-{type:'text',data:'code',title:'编码'},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'category',title:'类别',
+{type:'text',data:'sortOrder',title:'序号',readOnly: true, allowInvalid: true, className: 'htCenter'},
+{type:'text',data:'name',title:'名称',readOnly: true, allowInvalid: true},
+{type:'text',data:'code',title:'类别', allowInvalid: true,
   renderer: 'db-dropdown',
-  source: ['人', '人机', '材', '机'],
-  readOnly: true,
-},
-{type:'text',data:'priceExTax',title:'除税基价代码'},
-{type:'text',data:'priceInTax',title:'含税基价代码'},
-{type:'text',data:'priceExTaxComp',title:'除税编制代码'},
-{type:'text',data:'priceInTaxComp',title:'含税编制代码'},
-]
-let i = 0
-const emptyRow = materialsColumns.reduce((acc, col) => {
-      acc[col.data] = ''
-      return acc
-    }, {} as Record<string, any>)
-const test =  Array.from({ length: 30 }, () => ({ ...emptyRow }));
-test.forEach(e=>{
-  e.code = i++
-})
+  isOnlySelect: true,
+  // source 会在 category.vue 中动态设置
+  onAfterSelect: (instance: any, row: number, column: number, oldValue: any, newValue: string, optData?: any) => {
+    console.log('选择后回调:', { row, column, oldValue, newValue, optData })
 
-let dbSettings = {
-  columns: materialsColumns,
-  data: test,
-  // manualRowMove: true,
+    if(newValue == oldValue){
+      return
+    }
+
+    const sortOrder = Math.max(...instance.getSourceData().map(item => Number(item.sortOrder ?? 0))) + 1
+    const data = {
+      categoryTreeId: currentNode.value.id,
+      categoryId: optData.id,
+      sortOrder: sortOrder
+    }
+    createCategoryTreeMapping(data).then(res=>{
+      const rowData = instance.getSourceDataAtRow(row)
+      instance.setDataAtRowProp([
+        [row, 'id', optData.id],
+        [row, 'sortOrder', rowData.sortOrder ?? sortOrder ],
+        [row, 'name', optData.name],
+        // [row, 'code', selectedValue]
+      ],'createMapping')
+      ElMessage.success('绑定成功')
+    }).catch(err => {
+      console.error('绑定失败', err)
+      ElMessage.error('绑定失败')
+    })
+    console.log(data)
+  }
 }
+]
+
+let rootSettings = {
+  columns: rootColum,
+  // startRows: 1,
+  data: [],
+  // manualRowMove: true,
+  contextMenu: {
+    items: {
+      remove_row: {
+        name: '移除行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowData = this.getSourceDataAtRow(selectedRow)
+          console.log('删除工料机类别字典:', rowData)
+          if (rowData?.id) {
+            deleteCategories(rowData.id).then(res => {
+              console.log('deleteCategories 成功')
+              ElMessage.success('删除成功')
+              this.alter('remove_row', selectedRow, 1)
+            }).catch(err => {
+              console.error('删除失败', err)
+            })
+          } else {
+            // 没有 ID 直接删除
+            this.alter('remove_row', selectedRow, 1)
+          }
+        },
+      }
+    }
+  },
+  async afterChange(changes, source)  {
+    console.log('source',source)
+    if (!changes || source === 'loadData' || source === 'updateId' || source === 'createMapping') return
+    // 如果有空单元格，提前返回，不执行后续操作
+    if(!validatorRow(this, changes)){
+      return
+    }
+    
+    const row = changes[0][0]; // 获取行索引
+    const rowData = this.getSourceDataAtRow(row)
+
+    if (rowData.id == null) {
+      console.log('创建工料机类别字典',  rowData )
+      // 调用创建接口 - 使用工料机类别字典接口
+      createCategories(rowData).then(res => {
+        console.log('createCategories 成功', res)
+        // 更新当前行ID - 使用自定义source避免循环
+        this.setDataAtRowProp(row, 'id', res, 'updateId');
+        ElMessage.success('新增成功')
+      }).catch(err => {
+        console.error('新增失败', err)
+      })
+    } else {
+      // 调用更新接口 - 使用工料机类别字典接口
+      console.log('更新工料机类别字典', rowData)
+      updateCategories(rowData).then(res => {
+        console.log('updateCategories 成功', res)
+        ElMessage.success('更新成功')
+      }).catch(err => {
+        console.error('更新失败', err)
+      })
+    }
+  }
+}
+let treeSettings = {
+  columns: materialsColumns,
+  // startRows: 1,
+  data: [],
+  // manualRowMove: true,
+  contextMenu: {
+    items: {
+      remove_row: {
+        name: '移除行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowData = this.getSourceDataAtRow(selectedRow)
+          console.log(currentNode.value.id,rowData.id)
+          if (rowData?.id) {
+            deleteCategoryTreeMapping(currentNode.value.id,rowData.id).then(res => {
+              console.log('deleteCategoryTreeMapping')
+              ElMessage.success('删除成功')
+              this.alter('remove_row', selectedRow, 1)
+            }).catch(err => {
+              console.error('删除失败', err)
+              ElMessage.error('删除失败')
+            })
+          } else {
+            // 没有 ID 直接删除
+            this.alter('remove_row', selectedRow, 1)
+          }
+        },
+      }
+    }
+  },
+  //需要重置
+  afterChange(changes, source)  {
+  }
+}
+let dbSettings = {
+  ...rootSettings
+}
+
+const handleSelect = (node: any) => {
+  if (dbHstRef.value && typeof dbHstRef.value.loadData === 'function') {
+    console.log('handleSelect',node)
+    currentNode.value = node
+    
+    // 检查是否是临时ID（包含'-'）
+    if (node.id.includes('-')) {
+      console.warn('临时节点，无法加载数据:', node.id)
+      return
+    }
+    
+    // 如果是省市节点（非ROOT），显示空白页并禁用右键菜单
+    if(node.nodeType == "region" && node.code != "ROOT"){
+      contextMenuItems.value = [] // 清空自定义右键菜单
+      const emptySettings = {
+        columns: [],
+        data: [],
+        contextMenu: false, // 禁用右键菜单
+        readOnly: true
+      }
+      dbHstRef?.value.hotInstance.updateSettings(emptySettings)
+      dbHstRef.value.loadData([])
+      dbHstRef.value.hotInstance.render()
+      return
+    }
+    
+    if(node.nodeType == "region" && node.code == "ROOT"){
+      // 恢复自定义右键菜单
+      contextMenuItems.value = [
+        {
+          key: 'row_above',
+          name: '新增行',
+          callback: (hotInstance: any) => {
+            if(currentNode.value == null){
+              ElMessage.error("请选择节点");
+              return
+            }
+            hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+            nextTick(() => {
+              hotInstance.render()
+            })
+          }
+        }
+      ]
+      dbHstRef?.value.hotInstance.updateSettings(rootSettings)
+      dbHstRef.value.hotInstance.render()
+      getCategoriesList().then(res=>{
+        console.log('region:', res)
+        
+        dbHstRef.value.loadData(res)
+        
+      })
+    }else {
+      // 恢复自定义右键菜单
+      contextMenuItems.value = [
+        {
+          key: 'row_above',
+          name: '新增行',
+          callback: (hotInstance: any) => {
+            if(currentNode.value == null){
+              ElMessage.error("请选择节点");
+              return
+            }
+            hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+            nextTick(() => {
+              hotInstance.render()
+            })
+          }
+        }
+      ]
+      dbHstRef?.value.hotInstance.updateSettings(treeSettings)
+      dbHstRef.value.hotInstance.render()
+      getCategoriesTree(node.id).then(res=>{
+        console.log('getCategories:', res)
+        dbHstRef.value.loadData(res)
+        dbHstRef.value.hotInstance.render()
+      })
+      setTimeout(() => {
+        getCategoriesList().then(res=>{
+          //{id: 5, code: "设", name: "设备费", sortOrder: 5}
+          //res.data
+          const transformedData = res.map((item: any) => ({
+            value: item.code,
+            label: item.code,
+            data: item
+          }))
+          // catalogsList.value = transformedData
+          console.log('getCatalogItemsAllowedList',transformedData)
+
+          // 更新 topHstRef 的 type 列的 source
+          if (dbHstRef.value?.hotInstance) {
+            const typeColIndex = materialsColumns.findIndex((col: any) => col.data === 'code')
+            if (typeColIndex !== -1) {
+              const columns = dbHstRef.value.hotInstance.getSettings().columns
+              columns[typeColIndex].source = transformedData
+              dbHstRef.value.hotInstance.updateSettings({
+                columns: columns
+              })
+            }
+          }
+        })
+      }, 500);
+    }
+  }
+}
+
+const handleEditSave = async (node: any, oldLabel: string, newLabel: string) => {
+  console.log('节点编辑保存:', { node, oldLabel, newLabel })
+  
+  // 处理省市节点和工料机专业节点的更新
+  if(node.nodeType == "region" || node.nodeType == "specialty"){
+    const {id,parentId,code,nodeType,sortOrder} = node
+    await updateCategoriesTree({id,parentId,code,name:newLabel,nodeType,sortOrder}).then(res=>{
+      ElMessage.success('更新成功')
+    }).catch(err => {
+      console.error('更新失败', err)
+      ElMessage.error('更新失败')
+    })
+  }
+  
+}
+const contextMenuItems = ref([
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      if(currentNode.value == null){
+        ElMessage.error("请选择节点");
+        return
+      }
+      // 执行新增行操作
+      hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+      
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+])
+
+// const loadingPlugin = ref()
 onMounted(() => {
+  getCatalogsTreeList().then(res=>{
+    console.log('原始数据:', res)
+    treeData.value = transformTreeData(res)
+    console.log('转换后数据:', treeData.value)
+  })
+
   setTimeout(() => {
-    console.log('containerHeight.value',containerHeight.value)
+    // console.log('containerHeight.value',containerHeight.value)
     dbHstRef?.value.hotInstance.updateSettings({
       height: containerHeight.value,
     })
-    
-    // 生成模拟数据
-    const categories = ['人', '人机', '材', '机']
-    const mockData = Array.from({ length: 300 }, (_, index) => ({
-      code: `MAT${String(index + 1).padStart(6, '0')}`,
-      name: `材料名称${index + 1}`,
-      category: categories[index % categories.length],
-      priceExTax: `EX${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
-      priceInTax: `IN${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
-      priceExTaxComp: `EXCOMP${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
-      priceInTaxComp: `INCOMP${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
-    }))
-    
-    dbHstRef?.value.loadData(mockData)
-    dbHstRef?.value.hotInstance.render()
-    
+    // loadingPlugin.value = dbHstRef?.value.hotInstance.getPlugin('loading');
+    // loadingPlugin.value.show();
+    // loadingPlugin.value.hide();
+    // dbHstRef?.value.loadData(mockData)
+    // dbHstRef?.value.hotInstance.render()
+
   }, 200);
 })
 onUnmounted(() => {})
@@ -142,12 +341,13 @@ onUnmounted(() => {})
   <ElSplitter>
     <ElSplitterPanel size="15%" :min="200">
       <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-          <DbTree :height="containerHeight" :data="treeData" @select="handleSelect" :defaultExpandedKeys="2" :context-menu-handler="contextMenuHandler" :search="false" />
+          <DbTree :height="containerHeight" :data="treeData" @select="handleSelect" @edit-save="handleEditSave" 
+          :defaultExpandedKeys="2" :context-menu-handler="contextMenuHandler" :search="false" />
       </ElCard>
     </ElSplitterPanel>
     <ElSplitterPanel :min="200">
-      <ElCard class="w-full h-full" body-class="!p-0 h-full" >
-        <DbHst ref="dbHstRef" :settings="dbSettings" class=""></DbHst>
+      <ElCard class="w-full h-full" body-class="!p-0 h-full">
+        <DbHst ref="dbHstRef" :settings="dbSettings" :contextMenuItems="contextMenuItems"></DbHst>
       </ElCard>
     </ElSplitterPanel>
   </ElSplitter>
diff --git a/apps/web-ele/src/views/database/materials/composables/useBottomTable.ts b/apps/web-ele/src/views/database/materials/composables/useBottomTable.ts
new file mode 100644
index 0000000..dc65a5c
--- /dev/null
+++ b/apps/web-ele/src/views/database/materials/composables/useBottomTable.ts
@@ -0,0 +1,182 @@
+import { deleteResourceMerged, getResourceItemsPage, updateResourceMerged } from '#/api/database/materials/index'
+import { DICT_TYPE } from '@vben/constants'
+import { getDictOptions } from '@vben/hooks'
+import { ElMessage } from 'element-plus'
+import { nextTick, ref } from 'vue'
+// import { getResourceItemsPage, deleteResourceMerged } from '#/api/database/materials/index'
+
+// 字典渲染器
+const dictRenderer = (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
+  const source = cellProperties.source || []
+  const option = source.find((item: any) => item.value === value)
+  td.innerHTML = option?.label || value || ''
+  td.style.textAlign = 'center'
+  return td
+}
+export const useBottomTable = (mergedId: any) => {
+  const bottomHstRef = ref<any>(null)
+
+  // 处理定额消耗量失去焦点事件
+  const handleQuotaConsumptionBlur = async (row: number, col: number, hotInstance: any) => {
+    const rowData = hotInstance.getSourceDataAtRow(row)
+    
+    // 只有当行数据存在ID时才更新（已保存的数据）
+    if (!rowData?.id) {
+      ElMessage.warning('请先保存数据后再修改定额消耗量')
+      return
+    }
+
+    // 验证必要字段
+    if (!rowData.sourceId) {
+      ElMessage.error('数据源ID不存在，无法更新')
+      return
+    }
+
+    // 获取定额消耗量的值
+    const quotaConsumption = rowData.quotaConsumption
+
+    try {
+      // 调用更新接口，只更新定额消耗量字段
+      await updateResourceMerged({
+        id: rowData.id,
+        mergedId: mergedId.value,
+        sourceId: rowData.sourceId,
+        quotaConsumption: quotaConsumption
+      })
+      
+      ElMessage.success('定额消耗量更新成功')
+    } catch (error) {
+      ElMessage.error('定额消耗量更新失败')
+      console.error('更新定额消耗量失败:', error)
+    }
+  }
+
+  const bottomColumns = ref<any[]>([
+    { type: 'text', data: 'code', title: '编码', readOnly: true },
+    { type: 'text', data: 'name', title: '名称', readOnly: true},
+    { type: 'text', data: 'spec', title: '型号规格', readOnly: true },
+    { type: 'text', data: 'categoryName', title: '类别', readOnly: true },
+    { type: 'text', data: 'unit', title: '单位', readOnly: true,
+      renderer: dictRenderer, source: getDictOptions(DICT_TYPE.MATERIAL_UNIT, 'string')
+    },
+    { type: 'numeric', data: 'taxRate', title: '税率', readOnly: true },
+    { type: 'numeric', data: 'taxExclBasePrice', title: '除税基价', readOnly: true },
+    { type: 'numeric', data: 'taxInclBasePrice', title: '含税基价', readOnly: true },
+    { type: 'numeric', data: 'taxExclCompilePrice', title: '除税编制价', readOnly: true },
+    { type: 'numeric', data: 'taxInclCompilePrice', title: '含税编制价', readOnly: true },
+    { type: 'numeric', data: 'quotaConsumption', title: '定额消耗量' },
+    { type: 'numeric', data: 'taxExclBaseTotal', title: '除税基价合价', readOnly: true },
+    { type: 'numeric', data: 'taxInclBaseTotal', title: '含税基价合价', readOnly: true },
+    { type: 'numeric', data: 'taxExclCompileTotal', title: '除税编制价合价', readOnly: true },
+    { type: 'numeric', data: 'taxInclCompileTotal', title: '含税编制价合价', readOnly: true },
+  ])
+
+  const bottomContextMenuItems = [
+    {
+      key: 'row_above',
+      name: '新增行',
+      callback: (hotInstance: any) => {
+        if (mergedId.value == null) {
+          ElMessage.error("请选择上方某一行")
+          return
+        }
+        hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+      }
+    },
+  ]
+
+  const bottomDbSettings = {
+    data: [],
+    columns: bottomColumns.value,
+    colWidths: 110,
+    afterChange: (changes: any, source: string) => {
+      // 只处理用户编辑触发的变更
+      if (source === 'edit' && changes) {
+        changes.forEach((change: any) => {
+          const [row, prop, oldValue, newValue] = change
+          
+          // 只处理定额消耗量字段的变更
+          if (prop === 'quotaConsumption' && oldValue !== newValue) {
+            const hotInstance = bottomHstRef.value?.hotInstance
+            if (hotInstance) {
+              handleQuotaConsumptionBlur(row, 0, hotInstance)
+            }
+          }
+        })
+      }
+    },
+    contextMenu: {
+      items: {
+        row_above: {
+          name: '在上方插入行',
+          callback: function(key: string, selection: any[]) {
+            const selectedRow = selection[0].start.row
+            this.alter('insert_row_above', selectedRow, 1)
+          },
+        },
+        row_below: {
+          name: '在下方插入行',
+          callback: function(key: string, selection: any[]) {
+            const selectedRow = selection[0].start.row
+            this.alter('insert_row_below', selectedRow, 1)
+          },
+        },
+        remove_row: {
+          name: '移除行',
+          callback: function(key: string, selection: any[]) {
+            const selectedRow = selection[0].start.row
+            const rowData = this.getSourceDataAtRow(selectedRow)
+
+            if (rowData?.id) {
+              this.alter('remove_row', selectedRow, 1)
+              deleteResourceMerged(rowData.id).then(res => {
+                console.log('deleteResourceMerged', res)
+              })
+            } else {
+              this.alter('remove_row', selectedRow, 1)
+            }
+          },
+        }
+      }
+    }
+  }
+
+  const loadData = async (mergedIdValue: number) => {
+    if (!mergedIdValue) {
+      bottomHstRef.value?.loadData([])
+      return
+    }
+
+    const res = await getResourceItemsPage({ mergedId: mergedIdValue })
+    bottomHstRef.value?.loadData(res.list)
+    bottomHstRef.value?.hotInstance?.render()
+    return res
+  }
+
+  const updateHeight = (height: number) => {
+    if (bottomHstRef.value?.hotInstance) {
+      bottomHstRef.value.hotInstance.updateSettings({ height })
+    }
+  }
+
+  const updateNameColumn = (selectRender: any, callbacks: any) => {
+    bottomColumns.value = bottomColumns.value.map(col =>
+      col.data === 'name'
+        ? { ...col, renderer: selectRender, ...callbacks }
+        : col
+    )
+
+    bottomDbSettings.columns = bottomColumns.value
+  }
+
+  return {
+    bottomHstRef,
+    bottomColumns,
+    bottomDbSettings,
+    bottomContextMenuItems,
+    loadData,
+    updateHeight,
+    updateNameColumn,
+    handleQuotaConsumptionBlur
+  }
+}
diff --git a/apps/web-ele/src/views/database/materials/composables/useCalcDialog.ts b/apps/web-ele/src/views/database/materials/composables/useCalcDialog.ts
new file mode 100644
index 0000000..0f638c0
--- /dev/null
+++ b/apps/web-ele/src/views/database/materials/composables/useCalcDialog.ts
@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+
+export const useCalcDialog = (hotInstanceRef: any) => {
+  const calcDialogVisible = ref(false)
+  const currentRow = ref<number>(0)
+  const currentCalcValue = ref<string>('')
+
+  const openDialog = (row: number) => {
+    currentRow.value = row
+
+    if (hotInstanceRef.value?.hotInstance) {
+      const currentValue = hotInstanceRef.value.hotInstance.getDataAtRowProp(row, 'calcBase')
+      if (currentValue && typeof currentValue === 'object' && currentValue.formula) {
+        currentCalcValue.value = currentValue.formula
+      } else if (typeof currentValue === 'string') {
+        currentCalcValue.value = currentValue
+      } else {
+        currentCalcValue.value = ''
+      }
+    }
+
+    calcDialogVisible.value = true
+  }
+
+  const handleConfirm = (result: { formula: string; variables: Record<string, number | { categoryId: number; priceField: string }> }) => {
+    if (hotInstanceRef.value?.hotInstance && result.formula) {
+      hotInstanceRef.value.hotInstance.setDataAtRowProp([
+        [currentRow.value, 'calcBase', result],
+        [currentRow.value, 'calcBase.formula', result.formula]
+      ])
+      hotInstanceRef.value.hotInstance.render()
+    }
+  }
+
+  return {
+    calcDialogVisible,
+    currentCalcValue,
+    openDialog,
+    handleConfirm
+  }
+}
diff --git a/apps/web-ele/src/views/database/materials/composables/useCategoryTree.ts b/apps/web-ele/src/views/database/materials/composables/useCategoryTree.ts
new file mode 100644
index 0000000..d24d22f
--- /dev/null
+++ b/apps/web-ele/src/views/database/materials/composables/useCategoryTree.ts
@@ -0,0 +1,27 @@
+import { ref } from 'vue'
+import { getCatalogsTreeList, getCatalogItemsAllowedList } from '#/api/database/materials/index'
+import { transformTreeData } from '../category'
+
+export const useCategoryTree = () => {
+  const categoryTreeData = ref<any[]>([])
+  const catalogsTreeId = ref<string>()
+
+  const loadCategoryTree = async () => {
+    const res = await getCatalogsTreeList()
+    categoryTreeData.value = transformTreeData(res)
+    return res
+  }
+
+  const handleSelect = async (node: any) => {
+    catalogsTreeId.value = node.id
+    const res = await getCatalogItemsAllowedList(node.id)
+    return res
+  }
+
+  return {
+    categoryTreeData,
+    catalogsTreeId,
+    loadCategoryTree,
+    handleSelect
+  }
+}
diff --git a/apps/web-ele/src/views/database/materials/composables/useDetailTree.ts b/apps/web-ele/src/views/database/materials/composables/useDetailTree.ts
new file mode 100644
index 0000000..6b182c6
--- /dev/null
+++ b/apps/web-ele/src/views/database/materials/composables/useDetailTree.ts
@@ -0,0 +1,75 @@
+import { getCatalogsTreeItems, updateCatalogItem } from '#/api/database/materials/index'
+import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
+import { createCatalogueMenuHandler, transformTreeData } from '../category'
+
+export const useDetailTree = (catalogsTreeId: any) => {
+  const detailTreeData = ref<any[]>([])
+  const catalogItemId = ref<number | null>()
+  // const catalogsTreeId = ref<string>()
+
+  const catalogueMenuHandler = createCatalogueMenuHandler(()=>catalogsTreeId.value)
+
+  const loadDetailTree = async (catalogId: string) => {
+    const res = await getCatalogsTreeItems(catalogId)
+    detailTreeData.value = transformTreeData(res)
+    return res
+  }
+
+  const handleSelect = (node: any) => {
+    catalogItemId.value = parseInt(node.id)
+    return catalogItemId.value
+  }
+
+  const handleEditSave = async (node: any, oldLabel: string, newLabel: string) => {
+    console.log('保存节点名称修改 - 完整节点数据:', node)
+    console.log('旧名称:', oldLabel, '新名称:', newLabel)
+    
+    // 检查节点ID是否有效（不是临时ID）
+    if (node.id.includes('-')) {
+      ElMessage.error('请先保存节点')
+      throw new Error('节点未保存')
+    }
+    
+    // 确保 code 字段存在，如果不存在则使用 name 或 label
+    const code = node.code || node.name || node.label || newLabel
+    
+    // 从 path 数组中提取 parentPath（去掉最后一个元素，即当前节点的 code）
+    let parentPath: string[] | undefined = undefined
+    if (node.path && Array.isArray(node.path) && node.path.length > 1) {
+      parentPath = node.path.slice(0, -1)
+    }
+    
+    console.log('计算的 parentPath:', parentPath)
+    
+    try {
+      // 调用API更新节点名称，使用 parentPath 而不是 parentId
+      await updateCatalogItem({
+        id: node.id,
+        categoryTreeId: catalogsTreeId.value,
+        code: code,
+        name: newLabel,
+        unit: node.unit,
+        parentPath: parentPath,
+        sortOrder: node.sortOrder,
+        attributes: node.attributes
+      })
+      
+      ElMessage.success('修改成功')
+    } catch (error) {
+      console.error('修改节点名称失败:', error)
+      ElMessage.error('修改失败')
+      throw error
+    }
+  }
+
+  return {
+    detailTreeData,
+    catalogItemId,
+    catalogsTreeId,
+    catalogueMenuHandler,
+    loadDetailTree,
+    handleSelect,
+    handleEditSave
+  }
+}
diff --git a/apps/web-ele/src/views/database/materials/composables/useItemSelect.ts b/apps/web-ele/src/views/database/materials/composables/useItemSelect.ts
new file mode 100644
index 0000000..075096b
--- /dev/null
+++ b/apps/web-ele/src/views/database/materials/composables/useItemSelect.ts
@@ -0,0 +1,179 @@
+import { createResourceMerged, getCatalogItemsPage, updateResourceMerged } from '#/api/database/materials/index'
+import { createPopoverCellRenderer, usePopoverClickOutside } from '#/components/db-hst/popover'
+import { DICT_TYPE } from '@vben/constants'
+import { getDictOptions } from '@vben/hooks'
+import type { PopoverInstance, RowEventHandlers } from 'element-plus'
+import { computed, h, reactive, ref } from 'vue'
+
+export const useItemSelect = (mergedId: any, catalogItemId: any) => {
+  const visible = ref(false)
+  const buttonRef = ref<HTMLElement | null>()
+  const popoverRef = ref<PopoverInstance>()
+  const popoverTableData = ref<any[]>([])
+  const itemSelectPopover = ref<any>()
+
+  const popoverPagination = reactive({
+    pageNo: 1,
+    pageSize: 20,
+    total: 0,
+    loading: false,
+    hasMore: true
+  })
+
+  const unitLabelByValue = computed(() => new Map(getDictOptions(DICT_TYPE.MATERIAL_UNIT, 'string').map((option) => [option.value, option.label])))
+
+  const selectRender = createPopoverCellRenderer({
+    visible,
+    buttonRef,
+  })
+
+  const columnsStyle = {
+    borderLeft: '1px solid #e4e4e7',
+    background: '#f0f0f0',
+    color: '#373737',
+    fontWeight: 400
+  }
+
+  const popoverColumns = computed(() => [
+    { key: 'code', dataKey: 'code', title: '编码', width: 120 },
+    { key: 'name', dataKey: 'name', title: '名称', width: 150 },
+    { key: 'spec', dataKey: 'spec', title: '型号规格', width: 120 },
+    { key: 'type', dataKey: 'type', title: '类别', width: 60, align: 'center' },
+    { key: 'unit', dataKey: 'unit', title: '单位', width: 60, align: 'center', cellRenderer: ({ cellData }: { cellData: any }) => {
+      const label = cellData == null ? '' : unitLabelByValue.value.get(cellData) ?? String(cellData)
+      return h('span', label)
+    }, },
+    { key: 'taxRate', dataKey: 'taxRate', title: '税率', width: 60, align: 'right' },
+    { key: 'taxExclBasePrice', dataKey: 'taxExclBasePrice', title: '除税基价', width: 90, align: 'right' },
+    { key: 'taxInclBasePrice', dataKey: 'taxInclBasePrice', title: '含税基价', width: 90, align: 'right' },
+    { key: 'taxExclCompilePrice', dataKey: 'taxExclCompilePrice', title: '除税编制价', width: 90, align: 'right' },
+    { key: 'taxInclCompilePrice', dataKey: 'taxInclCompilePrice', title: '含税编制价', width: 90, align: 'right' },
+  ].map(item => ({
+    ...item,
+    style: {
+      ...columnsStyle,
+      ...(item.key === 'taxInclCompilePrice' ? { borderRight: '1px solid #e4e4e7' } : {})
+    }
+  })))
+
+  const onClickOutside = () => {
+    popoverRef.value?.hide()
+  }
+
+  usePopoverClickOutside(visible, onClickOutside)
+
+  const getTableDataList = async (query: any, append: boolean = false) => {
+    if (popoverPagination.loading) return
+
+    popoverPagination.loading = true
+    try {
+      const res = await getCatalogItemsPage({
+        ...query,
+        catalogItemId: catalogItemId.value,  // 添加 catalogItemId 参数
+        includeChildren: true,  // 包含子节点
+        pageNo: popoverPagination.pageNo,
+        pageSize: popoverPagination.pageSize
+      })
+
+      popoverPagination.total = res.total || 0
+      popoverPagination.hasMore = (popoverPagination.pageNo * popoverPagination.pageSize) < popoverPagination.total
+
+      if (append) {
+        popoverTableData.value = [...popoverTableData.value, ...(res.list || [])]
+      } else {
+        popoverTableData.value = res.list || []
+      }
+
+      return res.list || []
+    } finally {
+      popoverPagination.loading = false
+    }
+  }
+
+  const handleTableEndReached = () => {
+    if (popoverPagination.hasMore && !popoverPagination.loading) {
+      popoverPagination.pageNo++
+      getTableDataList({}, true)
+    }
+  }
+
+  const rowEventHandlers: RowEventHandlers = {
+    onClick: ({ rowIndex, event, rowData }) => {
+      event.stopPropagation()
+      visible.value = false
+      onClickOutside()
+
+      const { row, col, prop, value, currentRowData, instance, td } = itemSelectPopover.value
+
+      setTimeout(() => {
+        instance.setDataAtRowProp([
+          [row, 'code', rowData.code || ''],
+          [row, 'name', rowData.name || ''],
+          [row, 'spec', rowData.spec || ''],
+          [row, 'type', rowData.type || ''],
+          [row, 'unit', rowData.unit || ''],
+          [row, 'categoryName', rowData.categoryName || ''],
+          [row, 'taxRate', rowData.taxRate || ''],
+          [row, 'taxExclBasePrice', rowData.taxExclBasePrice],
+          [row, 'taxInclBasePrice', rowData.taxInclBasePrice],
+          [row, 'taxExclCompilePrice', rowData.taxExclCompilePrice],
+          [row, 'taxInclCompilePrice', rowData.taxInclCompilePrice],
+          [row, 'mergedId', mergedId.value],
+          [row, 'sourceId', rowData.id],
+        ])
+        instance.render()
+        console.log(rowData,{ mergedId: mergedId.value, sourceId: rowData.id })
+        if (currentRowData.id == null) {
+          createResourceMerged({ mergedId: mergedId.value, sourceId: rowData.id }).then(res => {
+            instance.setDataAtRowProp([
+              [row, 'id', res],
+            ],'updateId')
+          })
+        } else {
+          updateResourceMerged({
+            id: currentRowData.id,
+            mergedId: mergedId.value,
+            sourceId: rowData.id,
+            quotaConsumption: currentRowData.quotaConsumption || null
+          }).then(res => {
+            console.log('updateResourceMerged', res)
+          })
+        }
+      }, 200)
+    },
+  }
+
+  const createCallbacks = () => ({
+    focusCallback: async (row: any, col: any, prop: any, value: any, rowData: any, instance: any, td: any) => {
+      popoverPagination.pageNo = 1
+      popoverPagination.hasMore = true
+      await getTableDataList({}, false)
+      itemSelectPopover.value = { row, col, prop, value, currentRowData: rowData, instance, td }
+    },
+    selectCallback: async (row: any, col: any, prop: any, value: any, rowData: any, instance: any, td: any) => {
+      popoverPagination.pageNo = 1
+      popoverPagination.hasMore = true
+      await getTableDataList({}, false)
+      itemSelectPopover.value = { row, col, prop, value, currentRowData: rowData, instance, td }
+    },
+    inputCallback: async (row: any, col: any, prop: any, value: any, rowData: any, instance: any, td: any) => {
+      popoverPagination.pageNo = 1
+      popoverPagination.hasMore = true
+      await getTableDataList({ name: value.trim() }, false)
+      itemSelectPopover.value = { row, col, prop, value, currentRowData: rowData, instance, td }
+    }
+  })
+
+  return {
+    visible,
+    buttonRef,
+    popoverRef,
+    popoverTableData,
+    popoverColumns,
+    popoverPagination,
+    selectRender,
+    rowEventHandlers,
+    handleTableEndReached,
+    createCallbacks
+  }
+}
diff --git a/apps/web-ele/src/views/database/materials/composables/useTopTable.ts b/apps/web-ele/src/views/database/materials/composables/useTopTable.ts
new file mode 100644
index 0000000..0a18da9
--- /dev/null
+++ b/apps/web-ele/src/views/database/materials/composables/useTopTable.ts
@@ -0,0 +1,231 @@
+import { createResourceItems, deleteResourceItems, getCatalogItemsAllowedList, getCatalogItemsPage, updateResourceItems } from '#/api/database/materials/index'
+import { useParentChildLineNestedRowsFalse } from '#/components/db-hst/nestedRows'
+import { validatorRow } from '#/components/db-hst/validator'
+import { DICT_TYPE } from '@vben/constants'
+import { getDictOptions } from '@vben/hooks'
+import { ElMessage } from 'element-plus'
+import { nextTick, ref } from 'vue'
+import { nameRenderer } from '../machine'
+
+export const useTopTable = (catalogItemId: any, mergedId: any, onMergedIdChange?: (id: number) => void) => {
+  const topHstRef = ref<any>(null)
+  const selectedRow = ref<any>(null)
+  const calcTableData = ref<any[]>([])
+
+  const { load, codeRenderer, levelRenderer, handleRowOperation, initSchema, highlightDeselect } = useParentChildLineNestedRowsFalse({
+    getHotInstance: () => topHstRef.value?.hotInstance,
+  })
+
+  const topColumns:any[] = [
+    { type: 'text', data: 'code', title: '编码', renderer: codeRenderer, required: true, autoWidth: true },
+    { type: 'text', data: 'name', title: '名称', required: true, renderer: nameRenderer },
+    { type: 'text', data: 'spec', title: '型号规格', required: true },
+    { type: 'text', data: 'type', title: '类别', required: true, renderer: 'db-dropdown', source: [] },
+    { type: 'text', data: 'unit', title: '单位', required: true, renderer: 'db-dropdown', source: getDictOptions(DICT_TYPE.MATERIAL_UNIT, 'string') },
+    { type: 'numeric', data: 'taxRate', title: '税率', required: true },
+    { type: 'numeric', data: 'taxExclBasePrice', title: '除税基价代码' },
+    { type: 'numeric', data: 'taxInclBasePrice', title: '含税基价代码' },
+    { type: 'numeric', data: 'taxExclCompilePrice', title: '除税编制代码' },
+    { type: 'numeric', data: 'taxInclCompilePrice', title: '含税编制代码' },
+  ]
+
+  const topContextMenuItems = [
+    {
+      key: 'row_above',
+      name: '新增行',
+      callback: (hotInstance: any) => {
+        if (catalogItemId.value == null) {
+          ElMessage.error("请选择")
+          return
+        }
+        handleRowOperation(hotInstance, 'append')
+        nextTick(() => {
+          hotInstance.render()
+        })
+      }
+    },
+  ]
+
+  const topDbSettings = {
+    data: [],
+    dataSchema: initSchema(topColumns),
+    colWidths: 100,
+    columns: topColumns,
+    rowHeaders: false,
+    nestedRows: false,
+    bindRowsWithHeaders: true,
+    contextMenu: {
+      items: {
+        custom_row_above: {
+          name: '在上方插入行',
+          callback: function() {
+            handleRowOperation(this, 'above')
+          }
+        },
+        custom_row_below: {
+          name: '在下方插入行',
+          callback: function() {
+            handleRowOperation(this, 'below')
+          }
+        },
+        separator2: '---------',
+        remove_row: {
+          name: '删除行',
+          callback: function() {
+            const selected = this.getSelected()
+            const row = selected[0][0]
+            const rowData = this.getSourceDataAtRow(row)
+            handleRowOperation(this, 'delete')
+            deleteResourceItems(rowData.id).then(res => {
+              console.log('deleteResourceItems', res)
+            })
+          }
+        },
+      }
+    },
+    currentRowClassName: 'row-highlight',
+    beforeOnCellMouseDown(event: MouseEvent, coords: any, TD: HTMLTableCellElement) {
+      if (event.button !== 0) return
+      selectedRow.value = coords
+      const rowObj = topHstRef.value.hotInstance.getSourceDataAtRow(coords.row)
+      if (rowObj?.id) {
+        mergedId.value = rowObj.id
+        if (onMergedIdChange) {
+          onMergedIdChange(rowObj.id)
+        }
+      }
+    },
+    afterChange(changes, source) {
+      if (!changes || source === 'loadData' || source === 'updateId') return
+      selectedRow.value = null
+      // applyAutoFitColum(this, changes)
+
+      if (!validatorRow(this, changes)) return
+
+      const row = changes[0][0]
+      const rowData = this.getSourceDataAtRow(row)
+      // 从 type 列获取对应的 categoryId
+      // calcTableData 包含 {id, code, name} 的类别数据
+      const selectedCategory = calcTableData.value.find((cat: any) => cat.code === rowData.type)
+      const categoryId = selectedCategory?.id || null
+      const sendData: any = {
+        catalogItemId: catalogItemId.value,
+        categoryId: categoryId,
+        ...rowData
+      }
+
+      if (rowData.id == null) {
+        createResourceItems(sendData).then(res => {
+          this.setDataAtRowProp(row, 'id', res, 'updateId')
+          ElMessage.success('新增成功')
+        }).catch(err => {
+          console.error('新增失败', err)
+        })
+      } else {
+        updateResourceItems(sendData).then(res => {
+          console.log('updateResourceItems', res)
+        }).catch(err => {
+          console.error('更新失败', err)
+        })
+      }
+    },
+    afterDeselect(){
+      highlightDeselect(this, selectedRow.value)
+    }
+  }
+
+  const transformToHierarchicalData = (items: any[], parentLevel: string | null = null): any[] => {
+    return items.map((item, index) => {
+      //const currentLevel = parentLevel === null ? String(index) : `${parentLevel}-${index + 1}`
+
+      const transformedItem: any = {
+        ...item,
+        id: item.id || null,
+        level: null,
+        __children: []
+        
+      }
+
+      topColumns.forEach((col: any) => {
+        if (col.data.includes('.')) {
+          const keys = col.data.split('.')
+          const rootKey = keys[0]
+          transformedItem[rootKey] = item[rootKey] || {}
+          let value = item
+          for (const key of keys) {
+            value = value?.[key]
+            if (value === undefined || value === null) break
+          }
+          transformedItem[col.data] = value || null
+        }
+      })
+      if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+        transformedItem.__children = transformToHierarchicalData(item.children, null)
+      }
+      return transformedItem
+    })
+  }
+
+  const loadData = async (catalogId: number) => {
+    catalogItemId.value = catalogId
+    mergedId.value = null
+    selectedRow.value = null
+    topHstRef.value.hotInstance.deselectCell()
+    // 清空底部表格数据
+    if (onMergedIdChange) {
+      onMergedIdChange(null as any)
+    }
+
+    const res = await getCatalogItemsPage({ catalogItemId: catalogId, pageNo: 1, pageSize: 10 })
+  
+    const hierarchicalData = transformToHierarchicalData(res.list || [])
+
+    load(hierarchicalData)
+
+    return res
+  }
+
+  const loadAllowedCategories = async () => {
+    const res = await getCatalogItemsAllowedList(catalogItemId.value)
+    const transformedData = res.map((item: any) => ({
+      id: item.id,
+      code: item.code,
+      name: item.name,  // 添加 name 字段用于表格显示
+      value: item.code,
+      label: item.name
+    }))
+    calcTableData.value = transformedData
+
+    if (topHstRef.value?.hotInstance) {
+      const typeColIndex = topColumns.findIndex((col: any) => col.data === 'type')
+      if (typeColIndex !== -1) {
+        const columns = topHstRef.value.hotInstance.getSettings().columns
+        columns[typeColIndex].source = transformedData
+        topHstRef.value.hotInstance.updateSettings({ columns: columns })
+      }
+    }
+  }
+
+  const updateHeight = (height: number) => {
+    if (topHstRef.value?.hotInstance) {
+      topHstRef.value.hotInstance.updateSettings({ height: height - 8 })
+      topHstRef.value.updateCodeColWidth()
+    }
+  }
+  const loadTopDataClear = ()=>{
+    selectedRow.value = null
+    topHstRef.value.hotInstance.deselectCell()
+    load([])
+  }
+  return {
+    topHstRef,
+    topColumns,
+    topDbSettings,
+    topContextMenuItems,
+    calcTableData,
+    loadData,
+    loadAllowedCategories,
+    updateHeight,
+    loadTopDataClear
+  }
+}
diff --git a/apps/web-ele/src/views/database/materials/machine.ts b/apps/web-ele/src/views/database/materials/machine.ts
index a480e30..0f05a9f 100644
--- a/apps/web-ele/src/views/database/materials/machine.ts
+++ b/apps/web-ele/src/views/database/materials/machine.ts
@@ -1,13 +1,107 @@
-export const topColHeaders: string[] = [
-  '编码',
-  '名称',
-  '型号规格',
-  '类别',
-  '单位',
-  '税率',
-  '除税基价',
-  '含税基价',
-  '除税编制价',
-  '含税编制价',
-  '计算基数'
-]
+export const nameRenderer = (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
+  // 清空单元格内容
+  td.innerHTML = ''
+  // 检查是否需要设置验证背景色
+  const cellMeta = instance.getCellMeta(row, col)
+  const isValid = cellMeta?.valid !== false
+  
+  // 如果单元格被标记为无效，设置红色背景
+  if (!isValid) {
+    td.style.backgroundColor = '#ffbeba' // 淡红色背景
+  } else {
+    td.style.backgroundColor = '' // 清除背景色
+  }
+
+  
+  // 获取当前行数据
+  const rowData = instance.getSourceDataAtRow(row)
+  const isMerged = rowData?.isMerged
+  
+  // 创建容器
+  const container = document.createElement('div')
+  container.style.cssText = 'display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 5px;'
+  
+  // 创建文本显示
+  const textSpan = document.createElement('span')
+  textSpan.textContent = value || ''
+  textSpan.style.cssText = 'flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'
+  
+  container.appendChild(textSpan)
+  // 当 isMerged === 1 或 isMerged === true 时显示复合工料机图标
+  if (isMerged === 1 || isMerged === true) {
+    // 创建复合工料机图标（文件夹加号图标）
+    const iconSpan = document.createElement('span')
+    iconSpan.innerHTML = '<svg t="1766906584191" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7071" width="16" height="16"><path d="M905.874286 157.549714H417.499429l-70.948572-133.851428c0-15.798857-15.725714-23.698286-31.451428-23.698286H118.125714C55.149714 0 0 55.149714 0 118.125714v787.748572C0 968.850286 55.149714 1024 118.125714 1024h787.748572c62.976 0 118.125714-55.149714 118.125714-118.125714V275.675429c0-62.976-55.149714-118.125714-118.125714-118.125715z m39.350857 748.251429c0 23.698286-15.725714 39.497143-39.350857 39.497143H118.125714c-23.625143 0-39.350857-15.798857-39.350857-39.497143V118.198857c0-23.625143 15.725714-39.350857 39.350857-39.350857h173.348572l70.875428 133.851429c0 15.798857 15.725714 23.698286 31.451429 23.698285h512c23.698286 0 39.497143 15.725714 39.497143 39.350857v630.198858l-0.073143-0.146286z" fill="#2c48fc" p-id="7072"></path><path d="M475.428571 548.571429v-146.285715a36.571429 36.571429 0 0 1 73.142858 0v146.285715h146.285714a36.571429 36.571429 0 0 1 0 73.142857h-146.285714v146.285714a36.571429 36.571429 0 1 1-73.142858 0v-146.285714h-146.285714a36.571429 36.571429 0 0 1 0-73.142857h146.285714z" fill="#2c48fc" p-id="7073"></path></svg>'
+    iconSpan.style.cssText = 'margin-left: 5px; display: inline-flex; align-items: center; flex-shrink: 0;'
+    iconSpan.title = '复合工料机'
+    
+    container.appendChild(iconSpan)
+  }
+  
+  td.appendChild(container)
+  
+  return td
+}
+
+export const calcRenderer = (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
+  // 清空单元格内容
+  td.innerHTML = ''
+  
+  // 获取当前行数据
+  const rowData = instance.getSourceDataAtRow(row)
+  const unit = rowData?.unit
+  
+  // 只有当 unit === '%' 时才可编辑，否则设置为只读
+  if (unit !== '%') {
+    cellProperties.readOnly = true
+    // 添加只读样式
+    td.style.backgroundColor = '#f5f5f5'
+    td.style.color = '#999'
+    td.textContent = value || ''
+    return td
+  }
+  
+  // 创建容器
+  const container = document.createElement('div')
+  container.style.cssText = 'display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 5px;'
+  
+  // 创建文本显示
+  const textSpan = document.createElement('span')
+  textSpan.textContent = value || ''
+  textSpan.style.cssText = 'flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'
+  
+  container.appendChild(textSpan)
+  
+  // 只有当 unit == '%' 时才显示编辑图标
+  if (unit === '%') {
+    // 创建编辑图标
+    const iconSpan = document.createElement('span')
+    iconSpan.innerHTML = '<svg t="1766200593500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8130" width="16" height="16"><path d="M251.2 387H320v68.8c0 1.8 1.8 3.2 4 3.2h48c2.2 0 4-1.4 4-3.3V387h68.8c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H376v-68.8c0-1.8-1.8-3.2-4-3.2h-48c-2.2 0-4 1.4-4 3.2V331h-68.8c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m328 0h193.6c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H579.2c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m0 265h193.6c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H579.2c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m0 104h193.6c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H579.2c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m-195.7-81l61.2-74.9c4.3-5.2 0.7-13.1-5.9-13.1H388c-2.3 0-4.5 1-5.9 2.9l-34 41.6-34-41.6c-1.5-1.8-3.7-2.9-5.9-2.9h-50.9c-6.6 0-10.2 7.9-5.9 13.1l61.2 74.9-62.7 76.8c-4.4 5.2-0.8 13.1 5.8 13.1h50.8c2.3 0 4.5-1 5.9-2.9l35.5-43.5 35.5 43.5c1.5 1.8 3.7 2.9 5.9 2.9h50.8c6.6 0 10.2-7.9 5.9-13.1L383.5 675z" p-id="8131"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-36 732H180V180h664v664z" p-id="8132"></path></svg>'
+    iconSpan.style.cssText = 'cursor: pointer; margin-left: 5px; display: inline-flex; align-items: center; color: black; pointer-events: auto;'
+    iconSpan.title = '计算基数设置'
+    // iconSpan.className = 'calc-icon-btn'
+    
+    // 处理点击事件的函数
+    const handleClick = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+      
+      console.log('图标被点击了', { row, col, value, rowData })
+      
+      // 调用 calcCallback 回调
+      if (cellProperties.calcCallback && typeof cellProperties.calcCallback === 'function') {
+        cellProperties.calcCallback(rowData, value, row, col, instance)
+      }
+    }
+    
+    // 同时绑定 mousedown 和 click 事件
+    iconSpan.addEventListener('mousedown', handleClick, true)
+    // iconSpan.addEventListener('click', handleClick, true)//不知道为什么不生效
+    
+    container.appendChild(iconSpan)
+  }
+  
+  td.appendChild(container)
+  
+  return td
+}
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/materials/machine.vue b/apps/web-ele/src/views/database/materials/machine.vue
index d7be0bd..c3f6eb7 100644
--- a/apps/web-ele/src/views/database/materials/machine.vue
+++ b/apps/web-ele/src/views/database/materials/machine.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed } from 'vue'
-import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard } from 'element-plus';
+import { DbCalc } from '#/components/db-calc'
+import { DbHst } from '#/components/db-hst'
+import { DbTree } from '#/components/db-tree'
+import { Page } from '@vben/common-ui'
 import { useElementSize } from '@vueuse/core'
-import { DbTree } from '#/components/db-tree';
-import { DbHst } from '#/components/db-hst';
-import { topColHeaders } from './machine'
-import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
-// import { sourceDataObject } from '#/components/db-hst/mockData'
+import { ElCard, ElSplitter, ElSplitterPanel, ElTableV2 } from 'element-plus'
+import { onMounted, ref } from 'vue'
+import { useBottomTable } from './composables/useBottomTable'
+import { useCalcDialog } from './composables/useCalcDialog'
+import { useCategoryTree } from './composables/useCategoryTree'
+import { useDetailTree } from './composables/useDetailTree'
+import { useItemSelect } from './composables/useItemSelect'
+import { useTopTable } from './composables/useTopTable'
+import { calcRenderer } from './machine'
+
 const containerRef = ref<HTMLElement | null>(null)
 const { height: containerHeight } = useElementSize(containerRef)
 const topContainerRef = ref<HTMLElement | null>(null)
@@ -15,409 +21,209 @@ const { height: topContainerHeight } = useElementSize(topContainerRef)
 const bottomContainerRef = ref<HTMLElement | null>(null)
 const { height: bottomContainerHeight } = useElementSize(bottomContainerRef)
 
-type Tree = { id: string; label: string; children?: Tree[] }
-const categoryTreeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '工料机总类',
-    children: [
-      {
-        id: '2',
-        label: '广东',
-        children: [
-          { id: '3', label: '广东工民建工料机' },
-          { id: '4', label: '广东公路工料机' },
-          { id: '5', label: '广东水利工料机' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '工料机总类2',
-    children: [
-      {
-        id: '12',
-        label: '广西',
-        children: [
-          { id: '13', label: '工料机1' },
-          { id: '14', label: '工料机1' },
-          { id: '15', label: '工料机2' }
-        ]
-      }
-    ]
-  }
-])
-const detailTreeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '目录1',
-    children: [
-      {
-        id: '2',
-        label: '黑色及有色金属',
-        children: [
-          { id: '3', label: '钢筋' },
-          { id: '4', label: '钢丝' },
-          { id: '5', label: '钢纹线、网丝束' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '目录2',
-    children: [
-      {
-        id: '12',
-        label: '塑料、塑胶及非金属',
-        children: [
-          { id: '13', label: '塑料' },
-          { id: '14', label: '塑胶' },
-          { id: '15', label: '非金属' }
-        ]
-      }
-    ]
-  }
-])
-const topColumns = ref<any[]>([
-{type:'text',data:'code',title:'编码', renderer: codeRenderer},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'spec',title:'型号规格'},
-{type:'text',data:'category',title:'类别'},
-{type:'text',data:'unit',title:'单位'},
-{type:'text',data:'taxRate',title:'税率'},
-{type:'text',data:'priceExTax',title:'除税基价'},
-{type:'text',data:'priceInTax',title:'含税基价'},
-{type:'text',data:'priceExTaxComp',title:'除税编制价'},
-{type:'text',data:'priceInTaxComp',title:'含税编制价'},
-{type:'text',data:'calcBase',title:'计算基数'}
-])
-const tableHeaders = ref<string[]>([
-  '编码',
-  '名称',
-  '型号规格',
-  '类别',
-  '单位',
-  '税率',
-  '除税基价',
-  '含税基价',
-  '除税编制价',
-  '含税编制价',
-  '计算基数'
-])
+const mergedId = ref<number>()
+const detailTreeRef = ref<any>()
 
-// 生成 tableData 模拟数据
-const generateTableData = () => {
-  const categories = ['人', '人机', '材', '机']
-  const units = ['台', '个', 't', 'm³', 'm²', 'kg']
-  
-  return Array.from({ length: 20 }, (_, index) => ({
-    code: `TBL${String(index + 1).padStart(6, '0')}`,
-    name: `表格项目${index + 1}`,
-    spec: `规格${index + 1}`,
-    category: categories[index % categories.length],
-    unit: units[index % units.length],
-    taxRate: `${(Math.random() * 0.13 + 0.03).toFixed(2)}`,
-    priceExTax: (Math.random() * 8000 + 800).toFixed(2),
-    priceInTax: (Math.random() * 9000 + 900).toFixed(2),
-    priceExTaxComp: (Math.random() * 8500 + 850).toFixed(2),
-    priceInTaxComp: (Math.random() * 9500 + 950).toFixed(2),
-    calcBase: (Math.random() * 80 + 1).toFixed(2)
-  }))
-}
+const {
+  categoryTreeData,
+  catalogsTreeId,
+  loadCategoryTree,
+  handleSelect: categoryHandleSelect
+} = useCategoryTree()
 
-const tableData = ref<any[]>(generateTableData())
-const bottomColumns = ref<any[]>([
-  {type:'text',data:'code',title:'编码'},
-  {type:'text',data:'name',title:'名称',
-    renderer: 'db-table',
-    customDropdownSource: tableData.value,
-    customGetLabel: (item: any) => item?.name,
-    customTableHeaders: tableHeaders.value,
-    // 自定义字段键，按顺序对应表头
-    customFieldKeys: ['code', 'name', 'spec', 'category', 'unit', 'taxRate', 'priceExTax', 'priceInTax', 'priceExTaxComp', 'priceInTaxComp', 'calcBase'],
-    // 自定义搜索字段
-    customSearchFields: ['code', 'name', 'spec', 'category', 'unit']
-  },
-  {type:'text',data:'spec',title:'型号规格'},
-{type:'text',data:'category',title:'类别'},
-{type:'text',data:'unit',title:'单位'},
-{type:'text',data:'taxRate',title:'税率'},
-{type:'text',data:'priceExTax',title:'除税基价'},
+const {
+  detailTreeData,
+  catalogItemId,
+  catalogsTreeId: detailCatalogsTreeId,
+  catalogueMenuHandler,
+  loadDetailTree,
+  handleSelect: detailHandleSelect,
+  handleEditSave: handleCatalogItemEditSave
+} = useDetailTree(catalogsTreeId)
 
-{type:'text',data:'priceExTax1',title:'除税编制价'},
-{type:'text',data:'priceExTax2',title:'含税编制价'},
-{type:'text',data:'priceExTax3',title:'定额消耗量'},
-{type:'text',data:'priceExTax4',title:'含税编制合价'},
-{type:'text',data:'priceExTax5',title:'除税基价合价'},
-{type:'text',data:'priceExTax6',title:'含税基价合价'},
-{type:'text',data:'priceExTax7',title:'除税编制合价'},
-{type:'text',data:'calcBase',title:'计算基数(隐藏)'},
+const {
+  bottomHstRef,
+  bottomDbSettings,
+  bottomContextMenuItems,
+  loadData: loadBottomData,
+  updateHeight: updateBottomHeight,
+  updateNameColumn
+} = useBottomTable(mergedId)
 
-])
-// const colHeaders = ref<string[]>(topColHeaders)
-const topHstRef = ref<any>(null)
-const bottomHstRef = ref<any>(null)
-let rowSchema: any = {level: null,__children: []}
-    
-// 根据 columns 的 data 字段生成对象结构
-topColumns.value.forEach((col: any) => {
-  if (col.data && col.data !== 'level' && col.data !== '__children') {
-    rowSchema[col.data] = null
+const {
+  topHstRef,
+  topColumns,
+  topDbSettings,
+  topContextMenuItems,
+  calcTableData,
+  loadData: loadTopData,
+  loadAllowedCategories,
+  loadTopDataClear
+} = useTopTable(catalogItemId, mergedId, loadBottomData)
+
+const {
+  calcDialogVisible,
+  currentCalcValue,
+  openDialog: openCalcDialog,
+  handleConfirm: handleCalcConfirm
+} = useCalcDialog(topHstRef)
+
+const {
+  visible,
+  buttonRef,
+  popoverRef,
+  popoverTableData,
+  popoverColumns,
+  selectRender,
+  rowEventHandlers,
+  handleTableEndReached,
+  createCallbacks
+} = useItemSelect(mergedId, catalogItemId)
+
+const itemCallbacks = createCallbacks()
+
+topColumns.push({
+  type: 'text',
+  data: 'calcBase.formula',
+  title: '计算基数',
+  renderer: calcRenderer,
+  calcCallback: (_currentRowData: any, _value: any, row: number) => {
+    openCalcDialog(row)
   }
 })
-// console.log(rowSchema)
 
-const topMock = ()=>{
-  // 生成带层级结构的模拟数据
-  const categories = ['人', '人机', '材', '机']
-  const units = ['台', '个', 't', 'm³', 'm²', 'kg']
-  
-  const mockData = []
-  let codeCounter = 1
-  
-  // 生成5个父级项目
-  for (let i = 0; i < 5; i++) {
-    const parentCode = `MAC${String(codeCounter++).padStart(6, '0')}`
-    const parent = {
-      code: parentCode,
-      name: `机械设备分类${i + 1}`,
-      spec: `规格${i + 1}`,
-      category: categories[i % categories.length],
-      unit: units[i % units.length],
-      taxRate: `${(Math.random() * 0.13 + 0.03).toFixed(2)}`,
-      priceExTax: (Math.random() * 10000 + 1000).toFixed(2),
-      priceInTax: (Math.random() * 11000 + 1100).toFixed(2),
-      priceExTaxComp: (Math.random() * 10500 + 1050).toFixed(2),
-      priceInTaxComp: (Math.random() * 11500 + 1150).toFixed(2),
-      calcBase: (Math.random() * 100 + 1).toFixed(2),
-      level: String(i),
-      __children: []
-    }
+updateNameColumn(selectRender, itemCallbacks)
+
+const handleCategorySelect = async (node: any) => {
+  console.log(node)
+  await categoryHandleSelect(node)
+  // 同步更新 detailTree 的 catalogsTreeId
+  detailCatalogsTreeId.value = node.id
+  await loadDetailTree(node.id)
+  await loadTopDataClear()
+  detailTreeRef?.value.setCurrentKey(null)
+}
+
+const handleDetailSelect = async (node: any) => {
+  const id = detailHandleSelect(node)
+  if (id) {
     
-    // 为每个父级生成2-4个子项
-    const childCount = Math.floor(Math.random() * 3) + 2
-    for (let j = 0; j < childCount; j++) {
-      const childCode = `${parentCode}-${String(j + 1).padStart(3, '0')}`
-      const child = {
-        code: childCode,
-        name: `${parent.name}-子项${j + 1}`,
-        spec: `规格${i + 1}-${j + 1}`,
-        category: categories[(i + j) % categories.length],
-        unit: units[(i + j) % units.length],
-        taxRate: `${(Math.random() * 0.13 + 0.03).toFixed(2)}`,
-        priceExTax: (Math.random() * 5000 + 500).toFixed(2),
-        priceInTax: (Math.random() * 5500 + 550).toFixed(2),
-        priceExTaxComp: (Math.random() * 5200 + 520).toFixed(2),
-        priceInTaxComp: (Math.random() * 5700 + 570).toFixed(2),
-        calcBase: (Math.random() * 50 + 1).toFixed(2),
-        level: `${i}-${j + 1}`,
-        __children: []
-      }
-      
-      // 为部分子项生成孙项
-      if (j === 0 && i < 3) {
-        const grandChildCount = Math.floor(Math.random() * 2) + 1
-        for (let k = 0; k < grandChildCount; k++) {
-          const grandChild = {
-            code: `${childCode}-${String(k + 1).padStart(2, '0')}`,
-            name: `${child.name}-明细${k + 1}`,
-            spec: `规格${i + 1}-${j + 1}-${k + 1}`,
-            category: categories[(i + j + k) % categories.length],
-            unit: units[(i + j + k) % units.length],
-            taxRate: `${(Math.random() * 0.13 + 0.03).toFixed(2)}`,
-            priceExTax: (Math.random() * 2000 + 200).toFixed(2),
-            priceInTax: (Math.random() * 2200 + 220).toFixed(2),
-            priceExTaxComp: (Math.random() * 2100 + 210).toFixed(2),
-            priceInTaxComp: (Math.random() * 2300 + 230).toFixed(2),
-            calcBase: (Math.random() * 20 + 1).toFixed(2),
-            level: `${i}-${j + 1}-${k + 1}`,
-            __children: []
-          }
-          child.__children.push(grandChild)
-        }
-      }
-      
-      parent.__children.push(child)
-    }
-    
-    mockData.push(parent)
+    await loadAllowedCategories()
+    await loadTopData(id)
   }
-  
-  return mockData
 }
 
-let topDbSettings = {
-  data: topMock(),
-  dataSchema: rowSchema,
-  colWidths: 120,
-  columns: topColumns.value,
-  // preventOverflow: 'horizontal',
-  rowHeaders: false,
-  nestedRows: true,
-  bindRowsWithHeaders: true,
-  contextMenu: {
-    items: {
-      custom_row_above: {
-        name: '在上方插入行',
-        callback: function() {
-          handleRowOperation(this, 'above')
-        }
-      },
-      custom_row_below: {
-        name: '在下方插入行',
-        callback: function() {
-          handleRowOperation(this, 'below')
-        }
-      },
-      separator1: '---------',
-      custom_add_child: {
-        name: '添加子行',
-        callback: function() {
-          handleRowOperation(this, 'child')
-        }
-      },
-      separator2: '---------',
-      remove_row: {
-        name: '删除行',
-        callback: function() {
-          handleRowOperation(this, 'delete')
-        }
-      },
-      // separator3: '---------',
-      // undo: {},
-      // redo: {}
-    }
-  },
-}
-const bootomMock = ()=>{
-    // 生成模拟数据
-    const categories = ['人', '人机', '材', '机']
-    const units = ['台', '个', 't', 'm³', 'm²', 'kg']
-    const mockData = Array.from({ length: 30 }, (_, index) => ({
-      code: `DTL${String(index + 1).padStart(6, '0')}`,
-      name: `明细项目${index + 1}`,
-      spec: `规格${index + 1}`,
-      category: categories[index % categories.length],
-      unit: units[index % units.length],
-      taxRate: `${(Math.random() * 0.13 + 0.03).toFixed(2)}`,
-      priceExTax: (Math.random() * 5000 + 500).toFixed(2),
-      priceExTax1: (Math.random() * 5200 + 520).toFixed(2),
-      priceExTax2: (Math.random() * 5800 + 580).toFixed(2),
-      priceExTax3: (Math.random() * 10 + 1).toFixed(2),
-      priceExTax4: (Math.random() * 60000 + 6000).toFixed(2),
-      priceExTax5: (Math.random() * 55000 + 5500).toFixed(2),
-      priceExTax6: (Math.random() * 62000 + 6200).toFixed(2),
-      priceExTax7: (Math.random() * 58000 + 5800).toFixed(2),
-      calcBase: (Math.random() * 100 + 1).toFixed(2)
-    }))
-    return mockData;
-}
-let bottomDbSettings = {
-  columns: bottomColumns.value,
-}
-const categoryHandleSelect = (node: Tree) => {
-  console.log('categoryhandleSelect',node)
-}
-
-const detailHandleSelect = (node: Tree) => {
-  if (topHstRef.value && typeof topHstRef.value.loadData === 'function') {
-    // console.log('hstData.value',hstData.value)
-    // topHstRef.value.loadData(topHstData.value)
-  }
-  // // 访问内部的 hotTableComponent
-  // if (dbHstRef.value?.hotTableComponent) {
-  //   console.log('hotTableComponent', dbHstRef.value.hotTableComponent)
-  // }
-  // // 访问 hotInstance
-  // if (dbHstRef.value?.hotInstance) {
-  //   dbHstRef.value?.hotInstance.loadData(topHstData.value)
-  //   console.log('hotInstance', dbHstRef.value.hotInstance)
-  // }
-}
-// watch(
-//   () => topContainerHeight.value,
-//   (val) => {
-//     console.log('topContainerHeight', val);
-//   },
-//   { immediate: true },
-// )
-function onResizeEnd(index: number, sizes: number[]) {
-  // 通过 hotInstance 来操作 Handsontable
-  console.log(index,sizes)
+const onResizeEnd = (_index: number, sizes: number[]) => {
   onTopHeight(sizes[0])
   onBottomHeight(sizes[1])
 }
-function onTopHeight(height: number){
+
+const onTopHeight = (height: number) => {
   if (topHstRef.value?.hotInstance) {
-    topHstRef.value.hotInstance.updateSettings({
-      height: height,
-    })
-    
-    // topHstRef.value.loadData(topMock())
-    
-    // 更新 code 列的宽度
-    topHstRef.value.updateCodeColWidth()
-    
-    console.log('onResizeEnd-onTopHeight',height, 'codeColWidth:', topHstRef.value.codeColWidth);
-  }
-}
-function onBottomHeight(height: number){
-  if (bottomHstRef.value?.hotInstance) {
-    bottomHstRef.value.hotInstance.updateSettings({
-      height: height
-    })
-    
-    bottomHstRef.value.loadData(bootomMock())
-    bottomHstRef.value.hotInstance.render()
-    console.log('onResizeEnd-bottomHstRef',height);
+    topHstRef.value.hotInstance.updateSettings({ height: height - 8 })
   }
 }
 
+const onBottomHeight = (height: number) => {
+  updateBottomHeight(height)
+}
+
+onMounted(async () => {
+  await loadCategoryTree()
 
-onMounted(() => {
   setTimeout(() => {
     onTopHeight(topContainerHeight.value)
     onBottomHeight(bottomContainerHeight.value)
-  }, 200);
+  }, 200)
 })
-onUnmounted(() => {
-})
-
 </script>
 
 <template>
-<Page auto-content-height>
-   <ElSplitter >
-      <ElSplitterPanel collapsible size="15%" :min="200">
+  <Page auto-content-height>
+    <ElSplitter>
+      <ElSplitterPanel size="15%" :min="100">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-            <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2"  :search="false" />
+          <DbTree
+            :height="containerHeight"
+            :data="categoryTreeData"
+            @select="handleCategorySelect"
+            :defaultExpandedKeys="2"
+            :search="false"
+          />
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel collapsible size="15%" :min="200">
+
+      <ElSplitterPanel size="15%" :min="100">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
-            <DbTree :height="containerHeight" :data="detailTreeData" @select="detailHandleSelect" :defaultExpandedKeys="2"  :search="false" />
+          <DbTree
+            ref="detailTreeRef"
+            :height="containerHeight"
+            :data="detailTreeData"
+            @select="handleDetailSelect"
+            @edit-save="handleCatalogItemEditSave"
+            :defaultExpandedKeys="2"
+            :search="false"
+            :context-menu-handler="catalogueMenuHandler"
+          />
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel >
+
+      <ElSplitterPanel :min="200">
         <ElSplitter layout="vertical" @resize-end="onResizeEnd">
-          <ElSplitterPanel collapsible size="60%" :min="200">
+          <ElSplitterPanel size="60%" :min="200">
             <ElCard class="w-full h-full" body-class="!p-0 h-full" ref="topContainerRef">
-                <DbHst ref="topHstRef" :settings="topDbSettings"></DbHst>
+              <DbHst ref="topHstRef" :settings="topDbSettings" :contextMenuItems="topContextMenuItems" />
             </ElCard>
           </ElSplitterPanel>
-          <ElSplitterPanel collapsible :min="200">
+
+          <ElSplitterPanel :min="200">
             <ElCard class="w-full h-full" body-class="!p-0 h-full" ref="bottomContainerRef">
-                <DbHst ref="bottomHstRef" :settings="bottomDbSettings"></DbHst>
+              <DbHst ref="bottomHstRef" :settings="bottomDbSettings" :contextMenuItems="bottomContextMenuItems" />
             </ElCard>
           </ElSplitterPanel>
         </ElSplitter>
       </ElSplitterPanel>
     </ElSplitter>
-</Page>
+
+    <ElPopover
+      ref="popoverRef"
+      :virtual-ref="buttonRef"
+      virtual-triggering
+      :visible="visible"
+      placement="bottom"
+      :width="955"
+      :popper-style="{ height: '380px' }"
+    >
+      <ElTableV2
+        :columns="popoverColumns"
+        :data="popoverTableData"
+        :width="930"
+        :height="350"
+        fixed
+        :row-height="25"
+        :header-height="25"
+        :row-event-handlers="rowEventHandlers"
+        :cell-props="{ style: { background: 'transparent !important' } }"
+        :teleported="false"
+        @end-reached="handleTableEndReached"
+      />
+    </ElPopover>
+
+    <DbCalc
+      v-model="calcDialogVisible"
+      :current-value="currentCalcValue"
+      @confirm="handleCalcConfirm"
+      :table-data="calcTableData"
+      :table-column="[
+        { prop: 'id', label: '序号' },
+        { prop: 'name', label: '名称' },
+        { prop: 'code', label: '类型' }
+      ]"
+      table-prop="code"
+      mode="resource"
+    />
+  </Page>
 </template>
 
 <style lang="css">
-    
 </style>
diff --git a/apps/web-ele/src/views/database/quota/charging.vue b/apps/web-ele/src/views/database/quota/charging.vue
index 7662392..dec83c0 100644
--- a/apps/web-ele/src/views/database/quota/charging.vue
+++ b/apps/web-ele/src/views/database/quota/charging.vue
@@ -1,88 +1,126 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed } from 'vue'
-import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard,ElDialog,ElTable,ElTableColumn,ElButton,ElInput,ElAlert } from 'element-plus';
-import { useElementSize } from '@vueuse/core'
-import { DbTree } from '#/components/db-tree';
+import { DbCalc } from '#/components/db-calc';
 import { DbHst } from '#/components/db-hst';
-
+import { codeRenderer, handleCodeCallback } from '#/components/db-hst/tree';
+import { DbTree } from '#/components/db-tree';
+import { Page } from '@vben/common-ui';
+import { useElementSize } from '@vueuse/core';
+import { ElCard, ElMessage, ElSplitter, ElSplitterPanel } from 'element-plus';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+// 导入定额API
+import {
+  createQuotaFeeItem,
+  getCategoriesByCatalogItem,
+  getQuotaFeeItemListWithRate,
+  updateQuotaFeeItem
+} from '#/api/database/quota/fee';
+import {
+  getQuotaCatalogItemTree
+} from '#/api/database/quota/index';
+import { resetTreeLineCaches } from '#/components/db-hst/treeLine';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 const containerRef = ref<HTMLElement | null>(null)
 const { height: containerHeight } = useElementSize(containerRef)
 
-type Tree = { id: string; label: string; children?: Tree[] }
-const treeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '定额库',
-    children: [
-      {
-        id: '2',
-        label: '广东',
-        children: [
-          { id: '3', label: '广东工民建工料机定额' },
-          { id: '4', label: '广东公路工料机定额' },
-          { id: '5', label: '广东水利工料机定额' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '定额库2',
-    children: [
-      {
-        id: '12',
-        label: '广西',
-        children: [
-          { id: '13', label: '工料机1费率库' },
-          { id: '14', label: '工料机2费率库' },
-          { id: '15', label: '工料机3费率库' }
-        ]
-      }
-    ]
+type Tree = { id: string; label: string; children?: Tree[]; [key: string]: any }
+const treeData = ref<Tree[]>([])
+
+// 转换后端数据为树形结构
+const transformTreeData = (data: any[]): Tree[] => {
+  if (!data || !Array.isArray(data)) {
+    console.warn('transformTreeData: 数据不是数组', data)
+    return []
   }
-])
+
+  return data.map(item => {
+    const treeNode: Tree = {
+      ...item, // 保留所有原始属性
+      id: String(item.id),
+      label: item.name || item.label || '未命名',
+    }
+
+    // 只有当 children 存在且长度大于 0 时才递归处理
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      treeNode.children = transformTreeData(item.children)
+    }
+
+    return treeNode
+  })
+}
+
+// 加载定额专业树（第一层）
+const loadCategoryTree = async () => {
+  try {
+    const res = await getQuotaCatalogItemTree()
+    console.log('定额专业树原始数据:', res)
+    treeData.value = transformTreeData(res)
+    console.log('定额专业树转换后数据:', treeData.value)
+  } catch (error) {
+    console.error('加载定额专业树失败:', error)
+  }
+}
 
 const calcRenderer = (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
   // 清空单元格内容
   td.innerHTML = ''
-  
+
+  // 设置单元格样式，使其可点击
+  td.style.cursor = 'pointer'
+
   // 创建容器
   const container = document.createElement('div')
   container.style.cssText = 'display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 5px;'
-  
+
   // 创建文本显示
   const textSpan = document.createElement('span')
   textSpan.textContent = value || ''
   textSpan.style.cssText = 'flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'
-  
-  // 创建编辑图标
+
+  // 创建计算器图标（与工料机的计算基数图标一致）
   const iconSpan = document.createElement('span')
-  iconSpan.innerHTML = '<svg viewBox="0 0 1024 1024" width="14" height="14" fill="currentColor"><path d="M862.709333 116.042667a32 32 0 0 1 45.248 0l0.032 0.032a32 32 0 0 1 0 45.248L455.445333 613.866667a32 32 0 1 1-45.258666-45.258667L862.709333 116.042667z m-64 64L346.165333 632.586667a32 32 0 0 0 45.258667 45.258666L844.010667 225.28a32 32 0 1 0-45.258667-45.258667zM704 512a32 32 0 0 1 64 0v352a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96V352a96 96 0 0 1 96-96h352a32 32 0 0 1 0 64H160a32 32 0 0 0-32 32v512a32 32 0 0 0 32 32h512a32 32 0 0 0 32-32V512z"/></svg>'
-  iconSpan.style.cssText = 'cursor: pointer; margin-left: 5px; display: inline-flex; align-items: center; color: black;'
+  iconSpan.innerHTML = '<svg t="1766200593500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8130" width="16" height="16"><path d="M251.2 387H320v68.8c0 1.8 1.8 3.2 4 3.2h48c2.2 0 4-1.4 4-3.3V387h68.8c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H376v-68.8c0-1.8-1.8-3.2-4-3.2h-48c-2.2 0-4 1.4-4 3.2V331h-68.8c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m328 0h193.6c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H579.2c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m0 265h193.6c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H579.2c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m0 104h193.6c1.8 0 3.2-1.8 3.2-4v-48c0-2.2-1.4-4-3.3-4H579.2c-1.8 0-3.2 1.8-3.2 4v48c0 2.2 1.4 4 3.2 4z m-195.7-81l61.2-74.9c4.3-5.2 0.7-13.1-5.9-13.1H388c-2.3 0-4.5 1-5.9 2.9l-34 41.6-34-41.6c-1.5-1.8-3.7-2.9-5.9-2.9h-50.9c-6.6 0-10.2 7.9-5.9 13.1l61.2 74.9-62.7 76.8c-4.4 5.2-0.8 13.1 5.8 13.1h50.8c2.3 0 4.5-1 5.9-2.9l35.5-43.5 35.5 43.5c1.5 1.8 3.7 2.9 5.9 2.9h50.8c6.6 0 10.2-7.9 5.9-13.1L383.5 675z" p-id="8131"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-36 732H180V180h664v664z" p-id="8132"></path></svg>'
+  iconSpan.style.cssText = 'margin-left: 5px; display: inline-flex; align-items: center; color: black;'
   iconSpan.title = '计算基数设置'
-  
-  // 点击图标打开弹窗
-  iconSpan.addEventListener('click', (e) => {
+
+  // 点击整个单元格打开弹窗
+  td.addEventListener('click', (e) => {
     e.stopPropagation()
     openCalcDialog(row)
   })
-  
+
   container.appendChild(textSpan)
   container.appendChild(iconSpan)
   td.appendChild(container)
-  
+
   return td
 }
-
+const codeColWidth = ref()
 const topColumns = ref<any[]>([
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'calcBase',title:'计算基数', renderer: calcRenderer},
-{type:'text',data:'rateCode',title:'费率代号(%)'},
+  {type:'text',data:'number',title:'序号', readOnly: true},
+{type:'text',data:'rateItemName',title:'名称', renderer: codeRenderer, code:true, allowInvalid: true,
+  codeCallbackRow: (currentRowData: any, oldValue: any, newValue: any, row: number, col: number, instance: any) => {
+    // 当 code 列编辑后的回调 - 更新列宽
+    console.log('code 列编辑，触发列宽更新')
+
+    // 使用 nextTick 确保数据已更新到 DOM
+    nextTick(() => {
+      if (topHstRef?.value.updateCodeColWidth) {
+        topHstRef.value.updateCodeColWidth()
+        console.log('code 列宽已更新为:', topHstRef?.value.codeColWidth)
+      }
+    })
+  }},
+{type:'text',data:'calcBase.formula',title:'计算基数', renderer: calcRenderer},
+{type:'text',data:'ratePercentage',title:'费率代号(%)'},
 {type:'text',data:'code',title:'代号'},
-{type:'text',data:'costOwnership',title:'费用归属'},
-{type:'text',data:'baseDesc',title:'基数说明'},
-{type:'checkbox',data:'variable',title:'变量'}
+{type:'text',data:'feeCategory',title:'费用归属', allowInvalid: true,
+  renderer: 'db-dropdown',
+  source: getDictOptions(DICT_TYPE.QUOTA_FEE_ATTRIBUTION, 'string'),
+},
+{type:'text',data:'baseDescription',title:'基数说明'},
+{type:'checkbox',data:'hidden',title:'隐藏', className: 'htCenter'},
+{type:'checkbox',data:'variable',title:'变量', className: 'htCenter'}
 ])
 
 
@@ -95,10 +133,11 @@ topColumns.value.forEach((col: any) => {
   }
 })
 // console.log(rowSchema)
-// Dialog相关状态
-const dialogVisible = ref(false)
+
+// DbCalc 组件相关状态
 const calcDialogVisible = ref(false)
 const currentRow = ref<number>(0)
+const currentCalcValue = ref<string>('')
 
 // 生成随机4位英文字母
 const generateRandomCode = () => {
@@ -110,136 +149,621 @@ const generateRandomCode = () => {
   return result
 }
 
-// 计算基数弹窗数据
-const calcTableData = ref<any[]>([
-  { category: '直接费', priceExTax: generateRandomCode(), priceInTax: generateRandomCode(), compileExTax: generateRandomCode(), compileInTax: generateRandomCode() },
-  { category: '间接费', priceExTax: generateRandomCode(), priceInTax: generateRandomCode(), compileExTax: generateRandomCode(), compileInTax: generateRandomCode() },
-  { category: '利润', priceExTax: generateRandomCode(), priceInTax: generateRandomCode(), compileExTax: generateRandomCode(), compileInTax: generateRandomCode() },
-  { category: '税金', priceExTax: generateRandomCode(), priceInTax: generateRandomCode(), compileExTax: generateRandomCode(), compileInTax: generateRandomCode() }
-])
+// 当前选中的树节点ID（使用字符串类型，避免大整数精度问题）
+const selectedCatalogItemId = ref<string | null>(null)
 
-// 运算符号按钮
-const operators = ['+', '-', '*', '/', '(', ')']
+// 计算基数弹窗数据（从接口加载）
+const calcTableData = ref<any[]>([])
 
-const openDialog = (row: number) => {
-  currentRow.value = row
-  dialogVisible.value = true
+// 加载类别字典数据
+const loadCategoryData = async (catalogItemId: string) => {
+  console.log('=== 加载类别字典数据 ===')
+  console.log('catalogItemId:', catalogItemId)
+
+  try {
+    console.log('调用接口: getCategoriesByCatalogItem')
+    const categories = await getCategoriesByCatalogItem(catalogItemId)
+    console.log('接口返回数据:', categories)
+
+    // 转换数据格式，为每个类别添加 code 字段（用于 DbCalc 组件的变量匹配）
+    calcTableData.value = categories.map((category: any) => ({
+      ...category,
+      code: category.taxExclBaseCode // 使用 taxExclBaseCode 作为 code
+    }))
+
+    console.log('转换后的表格数据:', calcTableData.value)
+  } catch (error) {
+    console.error('加载类别字典失败:', error)
+    // 如果加载失败，使用空数据
+    calcTableData.value = []
+  }
 }
 
-const openCalcDialog = (row: number) => {
+// DbCalc 表格列配置
+const calcTableColumns = [
+  { prop: 'id', label: '序号' },
+  { prop: 'name', label: '类别' },
+  { prop: 'taxExclBaseCode', label: '除税基价代码' },
+  { prop: 'taxInclBaseCode', label: '含税基价代码' },
+  { prop: 'taxExclCompileCode', label: '除税编制代码' },
+  { prop: 'taxInclCompileCode', label: '含税编制代码' }
+]
+
+// 打开计算基数弹窗
+const openCalcDialog = async (row: number) => {
+  console.log('=== 打开计算基数弹窗 ===')
+  console.log('当前行:', row)
+  console.log('选中的节点ID:', selectedCatalogItemId.value)
+
   currentRow.value = row
-  calcDialogVisible.value = true
-  // 清空之前的编辑值
-  currentEditValue.value = ''
-  currentEditCell.value = null
-  
-  // 获取当前行的计算基数值，如果有的话显示在输入框中
+
+  // 获取当前行的计算基数值
   if (topHstRef.value?.hotInstance) {
     const currentValue = topHstRef.value.hotInstance.getDataAtRowProp(row, 'calcBase')
-    if (currentValue) {
-      currentEditValue.value = currentValue
+    // 如果是对象，取 formula 属性；否则直接使用值
+    if (currentValue && typeof currentValue === 'object' && currentValue.formula) {
+      currentCalcValue.value = currentValue.formula
+    } else if (typeof currentValue === 'string') {
+      currentCalcValue.value = currentValue
+    } else {
+      currentCalcValue.value = ''
     }
+    console.log('当前计算基数值:', currentCalcValue.value)
   }
-}
 
-// 插入运算符到指定行列
-const insertOperator = (rowIndex: number, field: string, operator: string) => {
-  if (!calcTableData.value[rowIndex][field]) {
-    calcTableData.value[rowIndex][field] = []
+  // 加载类别字典数据（如果有选中的节点）
+  if (selectedCatalogItemId.value) {
+    console.log('开始加载类别字典数据...')
+    await loadCategoryData(selectedCatalogItemId.value)
+    console.log('类别字典数据加载完成，数据条数:', calcTableData.value.length)
+  } else {
+    console.warn('未选中树节点，无法加载类别字典数据')
   }
-  calcTableData.value[rowIndex][field].push(operator)
+
+  calcDialogVisible.value = true
+  console.log('弹窗已打开')
 }
 
-// 当前编辑的值 - 改为字符串
-const currentEditValue = ref<string>('')
-const currentEditCell = ref<{ rowIndex: number; field: string } | null>(null)
+// 处理 DbCalc 确认事件
+const handleCalcConfirm = async (result: { formula: string; variables: Record<string, { categoryId: number; priceField: string }> }) => {
+  console.log('计算基数确认:', result)
 
-// 处理单元格点击 - 累计添加到 currentEditValue
-const handleCellClick = (row: any, column: any, cell: HTMLElement, event: Event) => {
-  const field = column.property
-  if (field && field !== 'category') {
-    const rowIndex = calcTableData.value.findIndex(r => r === row)
-    currentEditCell.value = { rowIndex, field }
-    
-    // 获取单元格的值
-    const value = row[field]
-    console.log(value)
-    const cellValue = Array.isArray(value) ? value.join('') : value
-    
-    // 累计添加到 currentEditValue，而不是替换
-    currentEditValue.value += cellValue
-  }
-}
-
-// 添加运算符
-const addOperator = (op: string) => {
-  currentEditValue.value += op
-}
-
-// 保存计算数据
-const saveCalcData = () => {
   // 更新 Handsontable 中对应行的计算基数值
-  if (topHstRef.value?.hotInstance && currentEditValue.value) {
-    topHstRef.value.hotInstance.setDataAtRowProp(currentRow.value, 'calcBase', currentEditValue.value)
-    topHstRef.value.hotInstance.render()
-  }
-  
-  console.log('保存计算数据:', calcTableData.value)
-  console.log('更新计算基数:', currentEditValue.value, '到行:', currentRow.value)
-  
-  calcDialogVisible.value = false
-  currentEditValue.value = ''
-  currentEditCell.value = null
-}
+  if (topHstRef.value?.hotInstance && result.formula) {
+    // 立即保存到后端
+    const rowData = topHstRef.value.hotInstance.getSourceDataAtRow(currentRow.value)
 
-const topMock = ()=>{
-    // 生成父子级模拟数据
-    const mockData: any[] = []
-    
-    // 根据 topColumns 生成模拟数据
-    for (let i = 1; i <= 10; i++) {
-      const row: any = {}
-      topColumns.value.forEach((col: any) => {
-        if (col.data === 'name') {
-          row[col.data] = `费率项${i}`
-        } else if (col.data === 'calcBase') {
-          row[col.data] = `基数${i}`
-        } else if (col.data === 'rateCode') {
-          row[col.data] = `${(Math.random() * 10).toFixed(2)}%`
-        } else if (col.data === 'code') {
-          row[col.data] = `CODE${i.toString().padStart(3, '0')}`
-        } else if (col.data === 'costOwnership') {
-          row[col.data] = ['直接费', '间接费', '利润', '税金'][i % 4]
-        } else if (col.data === 'baseDesc') {
-          row[col.data] = `基数说明${i}`
-        } else if (col.data === 'variable') {
-          row[col.data] = false
-        }
-      })
-      mockData.push(row)
+    // 构建保存数据
+    const sendData: any = {
+      catalogItemId: selectedCatalogItemId.value,
+      rateItemId: rowData.rateItemId,
+      customCode: rowData.feeItemCustomCode || rowData.rateItemCustomCode,
+      name: rowData.feeItemName || rowData.rateItemName,
+      calcBase: result,
+      rateCode: rowData.ratePercentage || rowData.rateCode,
+      code: rowData.code,
+      feeCategory: rowData.feeCategory,
+      baseDescription: rowData.baseDescription,
+      sortOrder: rowData.sortOrder,
+      hidden: rowData.hidden,
+      variable: rowData.variable
     }
-    
-    return mockData;
+
+    try {
+      let feeItemId = rowData.feeItemId
+
+      // 如果 feeItemId 不存在，先创建取费项
+      if (!feeItemId) {
+        console.log('feeItemId 不存在，自动创建取费项:', sendData)
+        const createResult = await createQuotaFeeItem(sendData)
+        feeItemId = createResult.data || createResult
+        console.log('取费项创建成功，ID:', feeItemId)
+
+        // 更新行数据中的取费项相关字段
+        topHstRef.value.hotInstance.setDataAtRowProp([
+          [currentRow.value, 'feeItemId', feeItemId],
+          [currentRow.value, 'feeItemName', sendData.name],
+          [currentRow.value, 'feeItemCustomCode', sendData.customCode],
+          [currentRow.value, 'calcBase', result],
+          [currentRow.value, 'calcBase.formula', result.formula]
+        ])
+      } else {
+        // 如果 feeItemId 存在，更新取费项
+        sendData.id = feeItemId
+        console.log('更新取费项:', sendData)
+        await updateQuotaFeeItem(sendData)
+        console.log('取费项更新成功')
+
+        // 保存成功后更新表格数据
+        topHstRef.value.hotInstance.setDataAtRowProp([
+          [currentRow.value, 'calcBase', result],
+          [currentRow.value, 'calcBase.formula', result.formula]
+        ])
+      }
+
+      topHstRef.value.hotInstance.render()
+
+      ElMessage.success('计算基数保存成功')
+
+      // 保存成功后关闭弹窗
+      calcDialogVisible.value = false
+    } catch (err: any) {
+      console.error('计算基数保存失败', err)
+      console.error('错误详情:', err.message, err.response?.data)
+      const errorMsg = err.response?.data?.msg || err.message || '计算基数保存失败'
+      ElMessage.error(errorMsg)
+      // 保存失败不关闭弹窗，让用户可以修改后重试
+    }
+  }
+
+  console.log('更新计算基数:', result, '到行:', currentRow.value)
+  console.log('公式:', result.formula)
+  console.log('变量映射:', result.variables)
 }
+
+// 重新计算所有行的序号
+const recalculateNumbers = () => {
+  if (!topHstRef.value?.hotInstance) return
+
+  const hot = topHstRef.value.hotInstance
+  const sourceData = hot.getSourceData()
+
+  // 递归计算序号
+  const calculateNumbers = (items: any[], parentNumber: string = '') => {
+    items.forEach((item, index) => {
+      // 生成序号
+      const currentNumber = parentNumber === ''
+        ? String(index + 1)  // 根节点：1, 2, 3...
+        : `${parentNumber}.${index + 1}`  // 子节点：1.1, 1.2, 2.1...
+
+      // 更新序号
+      item.number = currentNumber
+
+      // 递归处理子节点
+      if (item.__children && item.__children.length > 0) {
+        calculateNumbers(item.__children, currentNumber)
+      }
+    })
+  }
+
+  calculateNumbers(sourceData)
+  hot.render()
+}
+
+function isSingleEmptyObjArr(target:any) {
+  // 3个条件同时满足：是数组 + 长度为1 + 第一个元素是纯空对象
+  return Array.isArray(target)
+    && target.length === 1
+    && Object.keys(target[0]).length === 0;
+}
+
+// 保存上一次选中的单元格位置和原始数据
+let lastSelectedCell = { row: -1, col: -1, originalData: null as any }
+
 let topDbSettings = {
-  data: topMock(),
+  data: [{}],
   dataSchema: rowSchema,
-  colWidths: 120,
+  colWidths: [40, 150, 150, 100, 80, 100, 150, 60, 60],  // 序号40, 名称150, 计算基数150, 费率代号100, 代号80, 费用归属100, 基数说明150, 隐藏60, 变量60
   columns: topColumns.value,
-}
+  manualRowMove: true,
+  rowHeaders: false,
+  nestedRows: true,
+  bindRowsWithHeaders: true,
+  contextMenu: false,  // 禁用右键菜单
+  afterLoadData(sourceData: any, initialLoad: any, source: any){
+    console.log('afterLoadData',sourceData, initialLoad, source)
+    resetTreeLineCaches()
 
-const treeHandleSelect = (node: Tree) => {
-  console.log('treeHandleSelect',node)
-}
+    // 重置 lastSelectedCell，避免在加载新数据后仍然保留旧数据的引用
+    lastSelectedCell = { row: -1, col: -1, originalData: null }
 
+    if(isSingleEmptyObjArr(sourceData) || source == 'init'){
+        setTimeout(() => {
+          topHstRef.value.hotInstance.alter('remove_row', topHstRef.value.hotInstance.countRows()-1, 1)
+        }, 10);
+    }
+  },
+  afterCreateRow() {
+    // 添加行后重新计算序号
+    nextTick(() => {
+      recalculateNumbers()
+    })
+  },
+  afterRemoveRow() {
+    // 删除行后重新计算序号
+    nextTick(() => {
+      recalculateNumbers()
+    })
+  },
+  modifyColWidth(width: number, col: number) {
+    const hot = topHstRef.value.hotInstance
+    if (!hot) return width
+
+    // 查找配置了 code: true 的列
+    const codeColumn = topColumns.value.find((col: any) => col.code === true)
+    if (!codeColumn) return width
+
+    const codeCol = hot.propToCol(codeColumn.data)
+    //console.log('modifyColWidth',codeCol,width)
+    return col === codeCol ? (codeColWidth.value ?? width) : width
+  },
+  afterSelection(row: number, col: number, row2: number, col2: number) {
+    const hot = topHstRef.value?.hotInstance
+    if (!hot) return
+
+    // 当选中新单元格时，检查是否需要保存上一个单元格所在行的数据
+    if (lastSelectedCell.row !== -1 && lastSelectedCell.originalData) {
+      // 获取上一行的当前数据
+      const rowData = hot.getSourceDataAtRow(lastSelectedCell.row)
+      if (rowData && rowData.feeItemId) {
+        // 检查需要监控的字段是否有变化
+        const fieldsToCheck = ['ratePercentage', 'code', 'feeCategory', 'baseDescription', 'hidden', 'variable']
+        let hasChanges = false
+
+        for (const field of fieldsToCheck) {
+          const oldValue = lastSelectedCell.originalData[field]
+          const newValue = rowData[field]
+
+          // 比较值是否发生变化（处理 null、undefined、空字符串等情况）
+          if (oldValue !== newValue) {
+            // 特殊处理：null、undefined、空字符串视为相同
+            const normalizedOld = oldValue === null || oldValue === undefined || oldValue === '' ? null : oldValue
+            const normalizedNew = newValue === null || newValue === undefined || newValue === '' ? null : newValue
+
+            if (normalizedOld !== normalizedNew) {
+              hasChanges = true
+              console.log(`字段 ${field} 发生变化:`, { old: oldValue, new: newValue })
+              break
+            }
+          }
+        }
+
+        // 只有当数据真正发生变化时才保存
+        if (hasChanges) {
+          // 构建更新数据
+          const sendData: any = {
+            id: rowData.feeItemId,
+            catalogItemId: selectedCatalogItemId.value,
+            rateItemId: rowData.rateItemId,
+            customCode: rowData.feeItemCustomCode,
+            name: rowData.feeItemName,
+            calcBase: rowData.calcBase,
+            rateCode: rowData.ratePercentage,
+            code: rowData.code,
+            feeCategory: rowData.feeCategory,
+            baseDescription: rowData.baseDescription,
+            sortOrder: rowData.sortOrder,
+            hidden: rowData.hidden,
+            variable: rowData.variable
+          }
+
+          // 调用更新接口
+          console.log('检测到数据变化，自动保存:', sendData)
+          updateQuotaFeeItem(sendData).then(res => {
+            console.log('自动保存成功', res)
+          }).catch((err: any) => {
+            console.error('自动保存失败', err)
+            const errorMsg = err.response?.data?.msg || err.message || '保存失败'
+            ElMessage.error(errorMsg)
+          })
+        } else {
+          console.log('数据未发生变化，跳过保存')
+        }
+      }
+    }
+
+    // 保存当前选中单元格所在行的原始数据（用于下次比较）
+    const currentRowData = hot.getSourceDataAtRow(row)
+    if (currentRowData && currentRowData.feeItemId) {
+      lastSelectedCell = {
+        row,
+        col,
+        originalData: {
+          ratePercentage: currentRowData.ratePercentage,
+          code: currentRowData.code,
+          feeCategory: currentRowData.feeCategory,
+          baseDescription: currentRowData.baseDescription,
+          hidden: currentRowData.hidden,
+          variable: currentRowData.variable
+        }
+      }
+    } else {
+      lastSelectedCell = { row, col, originalData: null }
+    }
+  },
+  afterDeselect() {
+    // 当表格失去焦点时（点击表格外的区域），保存最后编辑的数据
+    const hot = topHstRef.value?.hotInstance
+    if (!hot) return
+
+    if (lastSelectedCell.row !== -1 && lastSelectedCell.originalData) {
+      // 获取最后选中行的当前数据
+      const rowData = hot.getSourceDataAtRow(lastSelectedCell.row)
+      if (rowData && rowData.feeItemId) {
+        // 检查需要监控的字段是否有变化
+        const fieldsToCheck = ['ratePercentage', 'code', 'feeCategory', 'baseDescription', 'hidden', 'variable']
+        let hasChanges = false
+
+        for (const field of fieldsToCheck) {
+          const oldValue = lastSelectedCell.originalData[field]
+          const newValue = rowData[field]
+
+          // 比较值是否发生变化（处理 null、undefined、空字符串等情况）
+          if (oldValue !== newValue) {
+            // 特殊处理：null、undefined、空字符串视为相同
+            const normalizedOld = oldValue === null || oldValue === undefined || oldValue === '' ? null : oldValue
+            const normalizedNew = newValue === null || newValue === undefined || newValue === '' ? null : newValue
+
+            if (normalizedOld !== normalizedNew) {
+              hasChanges = true
+              console.log(`[失去焦点] 字段 ${field} 发生变化:`, { old: oldValue, new: newValue })
+              break
+            }
+          }
+        }
+
+        // 只有当数据真正发生变化时才保存
+        if (hasChanges) {
+          // 构建更新数据
+          const sendData: any = {
+            id: rowData.feeItemId,
+            catalogItemId: selectedCatalogItemId.value,
+            rateItemId: rowData.rateItemId,
+            customCode: rowData.feeItemCustomCode,
+            name: rowData.feeItemName,
+            calcBase: rowData.calcBase,
+            rateCode: rowData.ratePercentage,
+            code: rowData.code,
+            feeCategory: rowData.feeCategory,
+            baseDescription: rowData.baseDescription,
+            sortOrder: rowData.sortOrder,
+            hidden: rowData.hidden,
+            variable: rowData.variable
+          }
+
+          // 调用更新接口
+          console.log('[失去焦点] 检测到数据变化，自动保存:', sendData)
+          updateQuotaFeeItem(sendData).then(res => {
+            console.log('[失去焦点] 自动保存成功', res)
+          }).catch((err: any) => {
+            console.error('[失去焦点] 自动保存失败', err)
+            const errorMsg = err.response?.data?.msg || err.message || '保存失败'
+            ElMessage.error(errorMsg)
+          })
+        } else {
+          console.log('[失去焦点] 数据未发生变化，跳过保存')
+        }
+      }
+
+      // 重置 lastSelectedCell
+      lastSelectedCell = { row: -1, col: -1, originalData: null }
+    }
+  },
+  afterChange(changes: any, source: any) {
+    console.log('afterChange', changes, source)
+    if (!changes || source === 'loadData' || source === 'updateId' || source === 'createSuccess' || source === 'createFailed') return
+
+    // 处理 code 列的回调
+    const codeColumn = topColumns.value.find((col: any) => col.code === true)
+    if (codeColumn?.codeCallbackRow) {
+      handleCodeCallback(this, changes, codeColumn.codeCallbackRow)
+    }
+
+    // 处理数据变更并保存
+    changes.forEach(async ([row, prop, oldValue, newValue]: [number, string, any, any]) => {
+      const rowData = this.getSourceDataAtRow(row)
+      if (!rowData) return
+
+      // 如果值没有改变，不触发保存
+      const oldValueNormalized = oldValue === null || oldValue === undefined || oldValue === '' ? null : oldValue
+      const newValueNormalized = newValue === null || newValue === undefined || newValue === '' ? null : newValue
+
+      if (oldValueNormalized == newValueNormalized) {
+        console.log('值未改变，跳过保存:', { prop, oldValue: oldValueNormalized, newValue: newValueNormalized })
+        return
+      }
+
+      console.log('值已改变，触发保存:', { prop, oldValue: oldValueNormalized, newValue: newValueNormalized })
+
+      // 处理新增行：当填写完 feeItemName 字段后自动创建
+      if (!rowData.feeItemId && prop === 'feeItemName' && newValue) {
+        try {
+          // 调用创建接口
+          const createData: any = {
+            catalogItemId: selectedCatalogItemId.value,
+            rateItemId: rowData.rateItemId,
+            name: newValue
+          }
+
+          console.log('创建新取费项:', createData)
+          const result = await createQuotaFeeItem(createData)
+          console.log('创建成功，返回结果:', result)
+
+          // 更新行数据的 feeItemId 和相关字段
+          const newId = result.data || result
+          const hot = this as any
+          hot.setDataAtRowProp([
+            [row, 'feeItemId', newId],
+            [row, 'feeItemName', newValue]
+          ], 'createSuccess')
+
+          ElMessage.success('创建成功')
+        } catch (error: any) {
+          console.error('创建取费项失败:', error)
+          const errorMsg = error.response?.data?.msg || error.message || '创建失败'
+          ElMessage.error(errorMsg)
+          // 创建失败，清空 name 字段
+          this.setDataAtRowProp(row, 'feeItemName', null, 'createFailed')
+        }
+        return
+      }
+
+      // 如果没有 feeItemId，跳过保存（需要先创建）
+      if (!rowData.feeItemId) {
+        console.log('没有 feeItemId，跳过保存')
+        return
+      }
+
+      // 当下拉菜单或复选框字段改变时，立即保存
+      if (['feeCategory', 'hidden', 'variable'].includes(prop)) {
+        try {
+          const updateData: any = {
+            id: rowData.feeItemId,
+            catalogItemId: selectedCatalogItemId.value,
+            rateItemId: rowData.rateItemId,
+            customCode: rowData.feeItemCustomCode,
+            name: rowData.feeItemName,
+            calcBase: rowData.calcBase,
+            rateCode: rowData.ratePercentage,
+            code: rowData.code,
+            feeCategory: rowData.feeCategory,
+            baseDescription: rowData.baseDescription,
+            sortOrder: rowData.sortOrder,
+            hidden: rowData.hidden,
+            variable: rowData.variable
+          }
+
+          await updateQuotaFeeItem(updateData)
+          console.log('更新取费项成功:', updateData)
+          ElMessage.success('保存成功')
+        } catch (error: any) {
+          console.error('更新取费项失败:', error)
+          const errorMsg = error.response?.data?.msg || error.message || '保存失败'
+          ElMessage.error(errorMsg)
+        }
+      }
+
+      // 当其他字段改变时（如 feeItemName, feeItemCustomCode, code, ratePercentage, baseDescription）
+      if (['feeItemName', 'feeItemCustomCode', 'code', 'ratePercentage', 'baseDescription'].includes(prop)) {
+        try {
+          const updateData: any = {
+            id: rowData.feeItemId,
+            catalogItemId: selectedCatalogItemId.value,
+            rateItemId: rowData.rateItemId,
+            customCode: rowData.feeItemCustomCode,
+            name: rowData.feeItemName,
+            calcBase: rowData.calcBase,
+            rateCode: rowData.ratePercentage,
+            code: rowData.code,
+            feeCategory: rowData.feeCategory,
+            baseDescription: rowData.baseDescription,
+            sortOrder: rowData.sortOrder,
+            hidden: rowData.hidden,
+            variable: rowData.variable
+          }
+
+          await updateQuotaFeeItem(updateData)
+          console.log('更新取费项成功:', updateData)
+          ElMessage.success('保存成功')
+        } catch (error: any) {
+          console.error('更新取费项失败:', error)
+          const errorMsg = error.response?.data?.msg || error.message || '保存失败'
+          ElMessage.error(errorMsg)
+        }
+      }
+    })
+  }
+}
+const transformToHierarchicalData = (items: any[], parentLevel: string | null = null, parentNumber: string = ''): any[] => {
+  return items.map((item, index) => {
+    // 根级别：'0', '1', '2'
+    // 子级别：'0-1', '0-2', '1-1'
+    const currentLevel = parentLevel === null ? String(index) : `${parentLevel}-${index + 1}`
+
+    // 生成序号：父节点为 1, 2, 3...，子节点为 1.1, 1.2, 2.1, 2.2...
+    const currentNumber = parentNumber === ''
+      ? String(index + 1)  // 根节点：1, 2, 3...
+      : `${parentNumber}.${index + 1}`  // 子节点：1.1, 1.2, 2.1...
+
+    const transformedItem: any = {
+      ...item, // 保留所有原始字段（包括 feeItemId, rateItemId 等）
+      id: item.id || null,
+      level: currentLevel,
+      number: currentNumber,  // 添加序号字段
+      __children: []
+    }
+
+    // 根据 topColumns 的 data 字段动态构建对象
+    topColumns.value.forEach((col: any) => {
+      if (col.data && col.data !== 'level' && col.data !== '__children' && col.data !== 'id' && col.data !== 'number') {
+        // 处理嵌套属性，如 'calcBase.formula'
+        if (col.data.includes('.')) {
+          const keys = col.data.split('.')
+          const rootKey = keys[0]
+
+          // 保存完整的嵌套对象到根属性
+          transformedItem[rootKey] = item[rootKey] || {}
+
+          // 同时保存嵌套路径的值，供 Handsontable 使用
+          let value = item
+          for (const key of keys) {
+            value = value?.[key]
+            if (value === undefined || value === null) break
+          }
+          transformedItem[col.data] = value || null
+        } else {
+          // 普通属性直接赋值
+          transformedItem[col.data] = item[col.data] || null
+        }
+
+      }
+    })
+
+    // 如果有子项，递归处理（传递当前序号作为父序号）
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      transformedItem.__children = transformToHierarchicalData(item.children, currentLevel, currentNumber)
+    }
+
+    return transformedItem
+  })
+}
+const treeHandleSelect = async (node: Tree) => {
+  console.log('=== 树节点选中 ===')
+  console.log('选中的节点:', node)
+
+  // 检查节点类型，只有 rate_mode 类型的节点才加载数据
+  const nodeType = node.nodeType || node.attributes?.node_type
+  if (nodeType !== 'rate_mode') {
+    console.log('非 rate_mode 节点，显示空白页')
+    // 清空选中的节点ID
+    selectedCatalogItemId.value = null
+    // 显示空表格
+    topHstRef.value.loadData([{}])
+    return
+  }
+
+  // 保存当前选中的节点ID（使用字符串，避免大整数精度问题）
+  selectedCatalogItemId.value = String(node.id)
+  console.log('保存的节点ID:', selectedCatalogItemId.value)
+
+  try {
+    // 加载取费项列表
+    const trees = await getQuotaFeeItemListWithRate(node.id)
+    console.log('getQuotaFeeItemListWithRate 返回数据:',trees)
+    topHstRef.value.loadData(trees.length==0?[{}]:transformToHierarchicalData(trees))
+  } catch (error: any) {
+    console.error('加载取费项列表失败:', error)
+    // 如果是节点类型错误，静默处理，显示空表格
+    const errorMsg = error.response?.data?.msg || error.message || ''
+    if (errorMsg.includes('rate_mode')) {
+      console.log('节点类型不匹配，显示空白页')
+      selectedCatalogItemId.value = null
+    } else {
+      // 其他错误才提示
+      ElMessage.error('加载数据失败')
+    }
+    // 加载失败时显示空表格
+    topHstRef.value.loadData([{}])
+  }
+}
 function onTopHeight(height: number){
   if (topHstRef.value?.hotInstance) {
     topHstRef.value.hotInstance.updateSettings({
       height: height-15,
     })
-    
+
     topHstRef.value.hotInstance.render()
-    
+
     // console.log('onResizeEnd-onTopHeight',height, 'codeColWidth:', topHstRef.value.codeColWidth);
   }
 }
@@ -247,33 +771,61 @@ function onTopHeight(height: number){
 // 直接使用配置对象，DbTree 会自动创建 HierarchyContextMenuHandler
 const contextMenuHandler = {
   rootKey: 'add-category',
-  rootText: '添加定额',
+  rootText: '添加总类',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('添加总类:', newNode, '所有根节点:', allRootNodes)
+  },
+  onRootDelete: async (node: any) => {
+    console.log('删除总类:', node)
+    // TODO: 调用 API 删除根节点
+    // await deleteCategories(node.id)
+  },
   levels: [
     {
       depth: 0,
       addKey: 'add-province',
       addText: '添加省市',
-      allowDelete: true
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加省市 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+      },
+      onDelete: async (node: any) => {
+        console.log('删除省市:', node)
+        // TODO: 调用 API 删除省市节点
+        // await deleteCatalog(node.id)
+      }
     },
     {
       depth: 1,
-      addKey: 'add-name',
-      addText: '添加名称',
-      allowDelete: true
+      addKey: 'add-specialty',
+      addText: '添加类名',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加类名 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+      },
+      onDelete: async (node: any) => {
+        console.log('删除省市:', node)
+        // TODO: 调用 API 删除省市节点
+        // await deleteCatalog(node.id)
+      }
     },
     {
       depth: 2,
-      addKey: 'add-model',
-      addText: '添加模式',
-      allowDelete: true
-    },
-    {
-      depth: 3,
-      allowDelete: true
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除第三层节点:', node)
+        // TODO: 调用 API 删除第三层节点
+      }
     }
   ]
 }
+// 禁用右键菜单，不提供任何菜单项
+const topContextMenuItems: any[] = []
+
 onMounted(() => {
+  // 加载定额专业树
+  loadCategoryTree()
+
   setTimeout(() => {
     onTopHeight(containerHeight.value)
   }, 200);
@@ -288,60 +840,29 @@ onUnmounted(() => {
    <ElSplitter >
       <ElSplitterPanel collapsible size="15%" :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-            <DbTree :height="containerHeight" :data="treeData" @select="treeHandleSelect" :defaultExpandedKeys="3" :context-menu-handler="contextMenuHandler"  :search="false" />
+            <DbTree :height="containerHeight" :data="treeData" @select="treeHandleSelect"
+            :defaultExpandedKeys="3" :context-menu-handler="contextMenuHandler"  :search="false" />
         </ElCard>
       </ElSplitterPanel>
       <ElSplitterPanel collapsible :min="200">
         <ElCard class="w-full h-full" body-class="!p-0 h-full">
-            <DbHst ref="topHstRef" :settings="topDbSettings"></DbHst>
+            <div @contextmenu.prevent>
+              <DbHst ref="topHstRef" :settings="topDbSettings" :contextMenuItems="topContextMenuItems"></DbHst>
+            </div>
         </ElCard>
       </ElSplitterPanel>
     </ElSplitter>
 
     <!-- 计算基数设置弹窗 -->
-    <ElDialog v-model="calcDialogVisible" title="计算基数设置" width="50%" :close-on-click-modal="false">
-      <div style="margin-bottom: 15px;">
-        <div style="margin-bottom: 10px; color: #909399; font-size: 13px;">
-          限数字:0-9及小数点。运算符号:+加、-减、*乘、/除、()英文括号，代码。
-        </div>
-        <ElInput 
-          size="large"
-          v-model="currentEditValue" 
-          style="width: 100%;"
-          placeholder="点击表格单元格或运算符按钮添加内容"
-        />
-      </div>
-      
-      <div style="margin-bottom: 15px;">
-        <span style="margin-right: 10px;">运算符号:</span>
-        <ElButton 
-          v-for="op in operators" 
-          :key="op" 
-          size="large"
-          @click="addOperator(op)"
-          style="margin-right: 5px;font-size: 20px;"
-        >
-          {{ op }}
-        </ElButton>
-      </div>
-
-      <ElTable :data="calcTableData" border style="width: 100%" @cell-click="handleCellClick">
-        <ElTableColumn prop="category" label="类别" width="100" fixed />
-        <ElTableColumn prop="priceExTax" label="除税基价代码" min-width="200">
-        </ElTableColumn>
-        <ElTableColumn prop="priceInTax" label="含税基价代码" min-width="200">
-        </ElTableColumn>
-        <ElTableColumn prop="compileExTax" label="除税编制代码" min-width="200">
-        </ElTableColumn>
-        <ElTableColumn prop="compileInTax" label="含税编制代码" min-width="200">
-        </ElTableColumn>
-      </ElTable>
-      
-      <template #footer>
-        <ElButton @click="calcDialogVisible = false">取消</ElButton>
-        <ElButton type="primary" @click="saveCalcData">确定</ElButton>
-      </template>
-    </ElDialog>
+    <DbCalc
+      v-model="calcDialogVisible"
+      :current-value="currentCalcValue"
+      :table-data="calcTableData"
+      :table-column="calcTableColumns"
+      table-prop="taxExclBaseCode"
+      mode="fee"
+      @confirm="handleCalcConfirm"
+    />
 </Page>
 </template>
 
diff --git a/apps/web-ele/src/views/database/quota/price.vue b/apps/web-ele/src/views/database/quota/price.vue
index 834de0d..a35d8f7 100644
--- a/apps/web-ele/src/views/database/quota/price.vue
+++ b/apps/web-ele/src/views/database/quota/price.vue
@@ -1,17 +1,40 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed } from 'vue'
-import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard,ElTabs,ElTabPane } from 'element-plus';
-import { useElementSize } from '@vueuse/core'
-import { DbTree } from '#/components/db-tree';
+<script setup lang="ts">
 import { DbHst } from '#/components/db-hst';
+import { DbTree } from '#/components/db-tree';
+import type { ContextMenuHandler } from '#/components/db-tree/contextMenu';
+import { createHierarchyContextMenuHandler } from '#/components/db-tree/contextMenu';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { useElementSize } from '@vueuse/core';
+import { ElButton, ElCard, ElDialog, ElMessage, ElSplitter, ElSplitterPanel, ElTabPane, ElTabs, ElTreeV2 } from 'element-plus';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { validatorRow } from '#/components/db-hst/validator';
 // 懒加载各个标签页组件
-import SubItemMaterials from './price/SubItemMaterials.vue'
-import MarketMaterials from './price/MarketMaterials.vue'
-import QuotaAdjustmentSetting from './price/QuotaAdjustmentSetting.vue'
-import QuotaAdjustment from './price/QuotaAdjustment.vue'
-import QuotaDescription from './price/QuotaDescription.vue'
+import MarketMaterials from './price/MarketMaterials.vue';
+import QuotaAdjustment from './price/QuotaAdjustment.vue';
+import QuotaAdjustmentSetting from './price/QuotaAdjustmentSetting.vue';
+import QuotaDescription from './price/QuotaDescription.vue';
+import SubItemMaterials from './price/SubItemMaterials.vue';
 // import BaseSummary from './price/BaseSummary.vue'
+// 导入定额API
+import { getCatalogsTreeList } from '#/api/database/materials';
+import {
+  bindQuotaSpecialty,
+  createQuotaCatalogItem,
+  createQuotaCatalogTreeNode,
+  createQuotaItem,
+  deleteQuotaCatalogItem,
+  deleteQuotaCatalogTreeNode,
+  getQuotaCatalogItemTree,
+  getQuotaCatalogTree,
+  getQuotaItemList,
+  updateQuotaCatalogItem,
+  updateQuotaCatalogTreeNode,
+  updateQuotaItem
+} from '#/api/database/quota/index';
 
 const containerRef = ref<HTMLElement | null>(null)
 const activeTab = ref('subItem')
@@ -22,80 +45,269 @@ const bottomContainerRef = ref<HTMLElement | null>(null)
 const { height: bottomContainerHeight } = useElementSize(bottomContainerRef)
 const bottomPanelHeight = ref<number>(0)
 
-type Tree = { id: string; label: string; children?: Tree[] }
-const categoryTreeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '定额总类',
-    children: [
-      {
-        id: '2',
-        label: '广东',
-        children: [
-          { id: '3', label: '广东工民建工料机定额' },
-          { id: '4', label: '广东公路工料机定额' },
-          { id: '5', label: '广东水利工料机定额' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '定额总类2',
-    children: [
-      {
-        id: '12',
-        label: '广西',
-        children: [
-          { id: '13', label: '工料机1定额' },
-          { id: '14', label: '工料机2定额' },
-          { id: '15', label: '工料机3定额' }
-        ]
-      }
-    ]
+type Tree = { id: string; label: string; children?: Tree[]; [key: string]: any }
+const selectedRow = ref<any>(null)
+const subItemMaterialsRef = ref()
+  
+const categoryTreeData = ref<Tree[]>([])
+// Dialog state (定字按钮)
+const dialogVisible = ref(false)
+const dialogTreeData = ref<any[]>([])
+const selectedNode = ref<any>(null)
+const dialogSelectedNode = ref<any>(null)
+const dialogSelectedNodeKey = ref<string | number | null>(null)
+const dialogExpandedKeys = ref<Array<string | number>>([])
+const isDialogConfirmDisabled = computed(() => {
+  if (!selectedNode.value) return true
+  if (selectedNode.value.categoryTreeId) return true
+  if (!dialogSelectedNode.value) return true
+  return (dialogSelectedNode.value.nodeType ?? dialogSelectedNode.value.node_type) !== 'specialty'
+})
+
+// 转换后端数据为树形结构
+const transformTreeData = (data: any[]): Tree[] => {
+  if (!data || !Array.isArray(data)) {
+    console.warn('transformTreeData: 数据不是数组', data)
+    return []
   }
-])
-const detailTreeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '目录',
-    children: [
-      {
-        id: '2',
-        label: '黑色及有色金属工程',
-        children: [
-          { id: '3', label: '钢筋工程' },
-          { id: '4', label: '钢丝工程' },
-          { id: '5', label: '钢纹线、网丝束工程' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '目录2',
-    children: [
-      {
-        id: '12',
-        label: '塑料、塑胶及非金属工程',
-        children: [
-          { id: '13', label: '塑料工程' },
-          { id: '14', label: '塑胶工程' },
-          { id: '15', label: '非金属工程' }
-        ]
-      }
-    ]
+  
+  return data.map(item => {
+    const treeNode: Tree = {
+      ...item, // 保留所有原始属性
+      id: String(item.id),
+      label: item.name || item.label || '未命名',
+    }
+    
+    // 只有当 children 存在且长度大于 0 时才递归处理
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      treeNode.children = transformTreeData(item.children)
+    }
+    
+    return treeNode
+  })
+}
+
+type ResourceTreeNode = {
+  id: string | number
+  name?: string
+  label?: string
+  nodeType?: string
+  node_type?: string
+  children?: ResourceTreeNode[]
+  [key: string]: any
+}
+
+const transformResourceTreeData = (data: ResourceTreeNode[]): ResourceTreeNode[] => {
+  if (!data || !Array.isArray(data)) return []
+  return data.map((item) => ({
+    ...item,
+    nodeType: item.nodeType ?? item.node_type,
+    label: item.name || item.label || '未命名',
+    children: item.children ? transformResourceTreeData(item.children) : undefined
+  }))
+}
+
+const isSameNodeId = (a: string | number, b: string | number) => String(a) === String(b)
+
+const findResourceNode = (nodes: ResourceTreeNode[], targetId: string | number): ResourceTreeNode | null => {
+  const stack = [...nodes]
+  while (stack.length) {
+    const node = stack.pop()!
+    if (isSameNodeId(node.id, targetId)) return node
+    if (node.children?.length) stack.push(...node.children)
   }
-])
+  return null
+}
+
+const findResourceNodePath = (
+  nodes: ResourceTreeNode[],
+  targetId: string | number,
+  path: Array<string | number> = []
+): Array<string | number> => {
+  for (const node of nodes) {
+    const nextPath = [...path, node.id]
+    if (isSameNodeId(node.id, targetId)) return nextPath
+    if (node.children?.length) {
+      const childPath = findResourceNodePath(node.children, targetId, nextPath)
+      if (childPath.length) return childPath
+    }
+  }
+  return []
+}
+
+// 加载定额专业树（第一层）
+const loadCategoryTree = async () => {
+  try {
+    const res = await getQuotaCatalogItemTree({ exclude: 'rate_mode' })
+    console.log('定额专业树原始数据:', res)
+    categoryTreeData.value = transformTreeData(res)
+    console.log('定额专业树转换后数据:', categoryTreeData.value)
+  } catch (error) {
+    console.error('加载定额专业树失败:', error)
+  }
+}
+const detailTreeData = ref<Tree[]>([])
+const quotaItemsData = ref<any[]>([]) // 定额子目列表数据（第三层）
+const quotaResourcesData = ref<any[]>([]) // 工料机组成列表数据（第四层）
+const selectedCatalogTreeNodeId = ref<number | string | null>(null) // 当前选中的第二层节点ID
+const selectedQuotaItemId = ref<number | null>(null) // 当前选中的第三层定额子目ID
+const selectCatalogItemId = ref<number | string | null>(null)
+const selectedCategoryNode = ref<Tree | null>(null) // 当前选中的专业树节点
+const selectedDetailTreeNode = ref<Tree | null>(null) // 当前选中的子目树节点
+
+// 计算属性：判断是否允许在子目录树中进行操作
+const isDetailTreeEditable = computed(() => {
+  // 只有选中了 specialty 类型的节点才允许编辑子目录树
+  return selectedCategoryNode.value?.attributes?.node_type === 'specialty'
+})
+
+// 计算属性：判断是否允许在定额子目表格中进行操作
+const isQuotaItemEditable = computed(() => {
+  if (!selectedDetailTreeNode.value) return false
+  
+  // 检查所有可能的 contentType 位置
+  const contentType = (selectedDetailTreeNode.value as any).contentType || 
+                     selectedDetailTreeNode.value.attributes?.contentType || 
+                     (selectedDetailTreeNode.value.attributes as any)?.content_type
+  
+  return contentType === 'content'
+})
+
+// 添加调试信息
+watch(detailTreeData, (newVal) => {
+  console.log('detailTreeData 已更新:', newVal)
+  console.log('detailTreeData 长度:', newVal?.length)
+}, { deep: true })
+
+watch(quotaItemsData, (newVal) => {
+  console.log('quotaItemsData 已更新:', newVal)
+  console.log('quotaItemsData 长度:', newVal?.length)
+}, { deep: true })
+
+watch(quotaResourcesData, (newVal) => {
+  console.log('quotaResourcesData 已更新:', newVal)
+  console.log('quotaResourcesData 长度:', newVal?.length)
+}, { deep: true })
+
+// 加载定额子目树（第二层）
+const loadDetailTree = async (catalogItemId: number | string) => {
+  try {
+    console.log('开始加载定额子目树, catalogItemId:', catalogItemId)
+    selectCatalogItemId.value = catalogItemId
+    const res = await getQuotaCatalogTree(catalogItemId as any)
+    console.log('定额子目树原始数据:', res)
+    console.log('定额子目树数据类型:', typeof res, Array.isArray(res))
+    console.log('定额子目树数据长度:', res?.length)
+    
+    if (res && Array.isArray(res) && res.length > 0) {
+      const transformed = transformTreeData(res)
+      console.log('定额子目树转换后数据:', transformed)
+      console.log('定额子目树转换后长度:', transformed.length)
+      
+      // 先清空再赋值，确保触发响应式更新
+      detailTreeData.value = []
+      await nextTick()
+      detailTreeData.value = transformed
+    } else {
+      console.warn('定额子目树数据为空或格式不正确')
+      detailTreeData.value = []
+    }
+  } catch (error) {
+    console.error('加载定额子目树失败:', error)
+    detailTreeData.value = []
+  }
+}
+
+// 加载定额子目列表（第三层）
+const loadQuotaItems = async (catalogTreeNodeId: number | string) => {
+  try {
+    console.log('开始加载定额子目列表, catalogTreeNodeId:', catalogTreeNodeId)
+    selectedCatalogTreeNodeId.value = catalogTreeNodeId
+    
+    const res = await getQuotaItemList(catalogTreeNodeId)
+    console.log('定额子目列表原始数据:', res)
+    console.log('定额子目列表数据类型:', typeof res, Array.isArray(res))
+    console.log('定额子目列表数据长度:', res?.length)
+    
+    if (res && Array.isArray(res)) {
+      // 转换数据格式以匹配表格列
+      const transformedData = res.map(item => ({
+        id: item.id,
+        code: item.attributes?.code || '', // 从 attributes 中获取编码
+        name: item.attributes?.name || '', // 从 attributes 中获取名称
+        unit: item.unit || '',
+        laborCost: item.basePrice || 0, // 除税定额单价（使用 basePrice）
+        machineCost: item.attributes?.machineCost || 0, // 含税定额单价
+        materialCost: item.attributes?.materialCost || 0, // 除税编制单价
+        priceInTaxComp: item.attributes?.priceInTaxComp || 0, // 含税编制单价
+        attributes: item.attributes || {},
+        createTime: item.createTime,
+        updateTime: item.updateTime
+      }))
+      
+      quotaItemsData.value = transformedData
+      console.log('定额子目列表转换后数据:', quotaItemsData.value)
+      
+      // 更新顶部表格数据
+      if (topHstRef.value && typeof topHstRef.value.loadData === 'function') {
+        topHstRef.value.loadData(transformedData)
+      }
+    } else {
+      console.warn('定额子目列表数据为空或格式不正确')
+      quotaItemsData.value = []
+    }
+  } catch (error) {
+    console.error('加载定额子目列表失败:', error)
+    quotaItemsData.value = []
+  }
+}
+
+// 加载定额工料机组成列表（第四层）
+const loadQuotaResources = async (quotaItemId: number) => {
+  try {
+    console.log('开始加载工料机组成列表, quotaItemId:', quotaItemId)
+    selectedQuotaItemId.value = quotaItemId
+    subItemMaterialsRef?.value.loadQuotaResources(quotaItemId)
+    /*const res = await getQuotaResourceList(quotaItemId)
+    console.log('工料机组成列表原始数据:', res)
+    console.log('工料机组成列表数据类型:', typeof res, Array.isArray(res))
+    console.log('工料机组成列表数据长度:', res?.length)
+    
+    if (res && Array.isArray(res)) {
+      
+      bottomHstRef.value.buildLoad(quotaItemId)
+      // quotaResourcesData.value = transformedData
+      // console.log('工料机组成列表转换后数据:', quotaResourcesData.value)
+      
+      // // 更新底部表格数据
+      // if (bottomHstRef.value && typeof bottomHstRef.value.loadData === 'function') {
+      //   bottomHstRef.value.loadData(transformedData)
+      // }
+    } else {
+      console.warn('工料机组成列表数据为空或格式不正确')
+      // quotaResourcesData.value = []
+      // // 清空底部表格
+      // if (bottomHstRef.value && typeof bottomHstRef.value.loadData === 'function') {
+      //   bottomHstRef.value.loadData([])
+      // }
+    }*/
+  } catch (error) {
+    console.error('加载工料机组成列表失败:', error)
+    // quotaResourcesData.value = []
+  }
+}
 
 const topColumns = ref<any[]>([
-{type:'text',data:'code',title:'编码'},
-{type:'text',data:'name',title:'名称'},
-{type:'text',data:'unit',title:'单位'},
-{type:'text',data:'priceExTax',title:'除税定额单价'},
-{type:'text',data:'priceInTax',title:'含税定额单价'},
-{type:'text',data:'priceExTaxComp',title:'除税编制单价'},
-{type:'text',data:'priceInTaxComp',title:'含税编制单价'}
+{type:'text',data:'code',title:'编码', allowInvalid: true},
+{type:'text',data:'name',title:'名称', allowInvalid: true},
+{type:'text',data:'unit',title:'单位', allowInvalid: true,
+  renderer: 'db-dropdown',
+  source: getDictOptions(DICT_TYPE.MATERIAL_UNIT, 'string'),
+},
+{type:'numeric',data:'laborCost',title:'除税定额单价', allowInvalid: true},
+{type:'numeric',data:'machineCost',title:'含税定额单价', allowInvalid: true},
+{type:'numeric',data:'materialCost',title:'除税编制单价', allowInvalid: true},
+{type:'numeric',data:'priceInTaxComp',title:'含税编制单价', allowInvalid: true}
 ])
 
 const bottomColumns = ref<any[]>([
@@ -104,22 +316,31 @@ const bottomColumns = ref<any[]>([
   {type:'text',data:'spec',title:'型号规格'},
 {type:'text',data:'category',title:'类别'},
 {type:'text',data:'unit',title:'单位'},
-{type:'text',data:'taxRate',title:'税率'},
-{type:'text',data:'priceExTax',title:'除税基价'},
+{type:'numeric',data:'taxRate',title:'税率'},
+{type:'numeric',data:'priceExTax',title:'除税基价'},
 
-{type:'text',data:'priceExTax1',title:'除税编制价'},
-{type:'text',data:'priceExTax2',title:'含税编制价'},
-{type:'text',data:'priceExTax3',title:'定额消耗量'},
-{type:'text',data:'priceExTax4',title:'含税编制合价'},
-{type:'text',data:'priceExTax5',title:'除税基价合价'},
-{type:'text',data:'priceExTax6',title:'含税基价合价'},
-{type:'text',data:'priceExTax7',title:'除税编制合价'},
+{type:'numeric',data:'priceExTax1',title:'除税编制价'},
+{type:'numeric',data:'priceExTax2',title:'含税编制价'},
+{type:'numeric',data:'priceExTax3',title:'定额消耗量'},
+{type:'numeric',data:'priceExTax4',title:'含税编制合价'},
+{type:'numeric',data:'priceExTax5',title:'除税基价合价'},
+{type:'numeric',data:'priceExTax6',title:'含税基价合价'},
+{type:'numeric',data:'priceExTax7',title:'除税编制合价'},
 {type:'text',data:'calcBase',title:'计算基数(隐藏)'},
 
 ])
 
 const topHstRef = ref<any>(null)
 const bottomHstRef = ref<any>(null)
+
+// 顶部表格行选择事件处理
+const onTopRowSelect = (row: any, rowIndex: number) => {
+  console.log('顶部表格行选择:', row, rowIndex)
+  // 当选中定额子目时，加载其工料机组成列表
+  if (row && row.id) {
+    loadQuotaResources(row.id)
+  }
+}
 let rowSchema: any = {}
 // 根据 columns 的 data 字段生成对象结构
 topColumns.value.forEach((col: any) => {
@@ -128,62 +349,437 @@ topColumns.value.forEach((col: any) => {
   }
 })
 // console.log(rowSchema)
-const topMock = ()=>{
-    // 生成模拟数据
-    const categories = ['人', '人机', '材', '机']
-    const units = ['台', '个', 't', 'm³', 'm²', 'kg']
-    const mockData = Array.from({ length: 30 }, (_, index) => ({
-      code: `DTL${String(index + 1).padStart(6, '0')}`,
-    //   name: `明细项目${index + 1}`,
-    //   spec: `规格${index + 1}`,
-    //   category: categories[index % categories.length],
-    //   unit: units[index % units.length],
-    //   taxRate: `${(Math.random() * 0.13 + 0.03).toFixed(2)}`,
-    //   priceExTax: (Math.random() * 5000 + 500).toFixed(2),
-    //   priceExTax1: (Math.random() * 5200 + 520).toFixed(2),
-    //   priceExTax2: (Math.random() * 5800 + 580).toFixed(2),
-    //   priceExTax3: (Math.random() * 10 + 1).toFixed(2),
-    //   priceExTax4: (Math.random() * 60000 + 6000).toFixed(2),
-    //   priceExTax5: (Math.random() * 55000 + 5500).toFixed(2),
-    //   priceExTax6: (Math.random() * 62000 + 6200).toFixed(2),
-    //   priceExTax7: (Math.random() * 58000 + 5800).toFixed(2),
-      calcBase: (Math.random() * 100 + 1).toFixed(2)
-    }))
-    return mockData;
-}
 let topDbSettings = {
-  data: topMock(),
+  data: [], // 初始为空，等待从接口加载
   dataSchema: rowSchema,
   colWidths: 120,
   columns: topColumns.value,
-  contextMenu: ['row_above','row_below','cut','copy','remove_row']
+  contextMenu: {
+    items: {
+      row_above: {
+        name: '在上方插入行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          this.alter('insert_row_above', selectedRow, 1)
+        },
+      },
+      row_below: {
+        name: '在下方插入行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          this.alter('insert_row_below', selectedRow, 1)
+        },
+      },
+      remove_row: {
+        name: '移除行',
+        callback: function(key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowData = this.getSourceDataAtRow(selectedRow)
+          
+          if (rowData?.id) {
+            this.alter('remove_row', selectedRow, 1)
+            // 如果有 ID，可以调用删除 API
+            // deleteResourceMerged(rowData.id).then(res => {
+            //   console.log('deleteResourceMerged',res)
+            // })
+          } else {
+            // 没有 ID 直接删除
+            this.alter('remove_row', selectedRow, 1)
+          }
+        },
+      }
+    }
+  },
+  currentRowClassName: 'row-highlight',
+  beforeOnCellMouseDown(event: MouseEvent, coords: any, TD: HTMLTableCellElement) {
+    selectedRow.value = coords
+    // 当选择单元格时触发
+    if (topHstRef.value?.hotInstance) {
+      const selectedData = topHstRef.value.hotInstance.getDataAtRow(coords.row)
+      if (selectedData && quotaItemsData.value[coords.row]) {
+        onTopRowSelect(quotaItemsData.value[coords.row], coords.row)
+      }
+    }
+  },
+  afterChange(changes, source)  {
+    console.log('source',source)
+    if (!changes || source === 'loadData' || source === 'updateId') return
+    
+    // 处理 code 列的回调
+    // const codeColumn = topColumns.value.find((col: any) => col.data === 'code')
+    // if (codeColumn?.codeCallbackRow) {
+    //   handleCodeCallback(this, changes, codeColumn.codeCallbackRow)
+    // }
+    
+    // 如果有空单元格，提前返回，不执行后续操作
+    if(!validatorRow(this, changes)){
+      return
+    }
+    //console.log('currChange', currChange)
+    const row = changes[0][0]; // 获取行索引
+    const rowData = this.getSourceDataAtRow(row)
+    
+    // 检查是否选择了第二层节点
+    if (!selectedCatalogTreeNodeId.value) {
+      ElMessage.error('请先选择定额子目树节点')
+      return
+    }
+    
+    // 构建更新数据 - catalogItemId 应该是第二层树节点ID
+    const sendData: any = {
+      catalogItemId: selectedCatalogTreeNodeId.value,
+      unit: rowData.unit || '',
+      basePrice: rowData.laborCost || 0, // 除税定额单价对应 basePrice
+      attributes: {
+        // 保存其他价格字段到 attributes
+        machineCost: rowData.machineCost || 0, // 含税定额单价
+        materialCost: rowData.materialCost || 0, // 除税编制单价
+        priceInTaxComp: rowData.priceInTaxComp || 0, // 含税编制单价
+        code: rowData.code || '',
+        name: rowData.name || ''
+      }
+    }
 
+    if (rowData.id == null) {
+      console.log('afterChange-create',  sendData )
+      // 调用创建接口
+      createQuotaItem(sendData).then(res => {
+        console.log('createQuotaItem', res)
+        // 更新当前行ID - 使用自定义source避免循环
+        this.setDataAtRowProp(row, 'id', res, 'updateId');
+        ElMessage.success('新增成功')
+      }).catch(err => {
+        console.error('新增失败', err)
+        ElMessage.error('新增失败')
+      })
+    } else {
+      // 调用更新接口
+      sendData.id = rowData.id
+      console.log('afterChange-update', sendData)
+      updateQuotaItem(sendData).then(res => {
+        console.log('updateQuotaItem', res)
+        ElMessage.success('更新成功')
+      }).catch(err => {
+        console.error('更新失败', err)
+        ElMessage.error('更新失败')
+      })
+    }
+  },
+  afterDeselect(){
+    if (selectedRow.value !== null) queueMicrotask(() => this.selectCell(selectedRow.value?.row, selectedRow.value?.col))
+  }
 }
-
+// 定义 topHstRef 的自定义右键菜单（使用计算属性）
+const topContextMenuItems = computed(() => {
+  // 只有选中了 contentType 为 'content' 的节点才显示右键菜单
+  if (!isQuotaItemEditable.value) {
+    return []
+  }
+  
+  return [
+    {
+      key: 'row_above',
+      name: '新增行',
+      callback: (hotInstance: any) => {
+        if(selectCatalogItemId.value == null){
+          ElMessage.error("请选择");
+          return
+        }
+        // 执行新增行操作
+        hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+        
+        // 等待 DOM 更新后重新渲染以应用验证样式
+        nextTick(() => {
+          hotInstance.render()
+        })
+      }
+    },
+  ]
+})
 let bottomDbSettings = {
+  data: [], // 初始为空，等待从接口加载
   columns: bottomColumns.value,
 }
 const categoryHandleSelect = (node: Tree) => {
-  console.log('categoryhandleSelect',node)
+  console.log('categoryHandleSelect', node)
+  
+  // 保存选中的节点
+  selectedCategoryNode.value = node
+  
+  // 清空第三层（定额子目列表）和第四层（工料机组成）数据
+  quotaItemsData.value = []
+  selectedQuotaItemId.value = null
+  
+  // 清空顶部表格
+  if (topHstRef.value?.hotInstance) {
+    topHstRef.value.hotInstance.loadData([])
+  }
+  
+  // 当选中定额专业节点时，加载其子目树
+  if (node.id) {
+    // 检查是否是临时ID（包含'-'）
+    const idStr = String(node.id)
+    if (idStr.includes('-')) {
+      ElMessage.warning('请先保存定额专业节点')
+      return
+    }
+    
+    // 只有 specialty 类型的节点才加载子目树
+    if (node.attributes?.node_type === 'specialty') {
+      // 直接使用原始 ID，不转换为数字（避免精度丢失）
+      loadDetailTree(node.id as any)
+    } else {
+      // 如果是 region 类型，清空子目树
+      detailTreeData.value = []
+    }
+  }
+}
+
+// 处理第一层树节点重命名保存
+const handleCategoryTreeEditSave = async (node: Tree, oldLabel: string, newLabel: string) => {
+  console.log('handleCategoryTreeEditSave', node, oldLabel, newLabel)
+  
+  // 如果名称没有变化，直接返回
+  if (oldLabel === newLabel) {
+    return
+  }
+  
+  // 检查是否是临时ID
+  if (String(node.id).includes('-')) {
+    ElMessage.warning('请先保存节点')
+    return
+  }
+  
+  try {
+    // 调用更新接口（第一层使用 updateQuotaCatalogItem）
+    await updateQuotaCatalogItem({
+      id: node.id as any,
+      code: (node as any).code || newLabel,
+      name: newLabel,
+      sortOrder: (node as any).sortOrder
+    })
+    
+    ElMessage.success('更新成功')
+    
+    // 重新加载树数据以确保显示最新的名称
+    await loadCategoryTree()
+  } catch (error) {
+    console.error('更新节点名称失败:', error)
+    ElMessage.error('更新失败')
+    
+    // 恢复旧名称
+    node.label = oldLabel
+  }
 }
 
 const detailHandleSelect = (node: Tree) => {
-  if (topHstRef.value && typeof topHstRef.value.loadData === 'function') {
-    // console.log('hstData.value',hstData.value)
-    // topHstRef.value.loadData(topHstData.value)
+  console.log('detailHandleSelect', node)
+  
+  // 保存选中的子目树节点
+  selectedDetailTreeNode.value = node
+  selectedRow.value = null
+  // 清空第四层（工料机组成）数据
+  selectedQuotaItemId.value = null
+  subItemMaterialsRef?.value.clear()
+  // 当选中定额子目树节点时，加载定额子目列表
+  if (node.id) {
+    // 检查是否是临时ID（包含'-'）
+    if (node.id.includes('-')) {
+      console.warn('临时节点，无法加载数据:', node.id)
+      ElMessage.warning('请先保存节点')
+      return
+    }
+    
+    // 检查 contentType（可能在不同位置）
+    const contentType = (node as any).contentType || 
+                       node.attributes?.contentType || 
+                       (node.attributes as any)?.content_type
+    
+    if (contentType === 'content') {
+      // 直接使用字符串ID，不转换为数字
+      loadQuotaItems(node.id)
+    } else {
+      // 如果是 directory 类型，清空定额子目列表
+      quotaItemsData.value = []
+      if (topHstRef.value?.hotInstance) {
+        topHstRef.value.hotInstance.loadData([])
+      }
+    }
   }
 }
 
+// 处理第二层树节点重命名保存
+const handleDetailTreeEditSave = async (node: Tree, oldLabel: string, newLabel: string) => {
+  console.log('handleDetailTreeEditSave', node, oldLabel, newLabel)
+  
+  // 如果名称没有变化，直接返回
+  if (oldLabel === newLabel) {
+    return
+  }
+  
+  // 检查是否是临时ID
+  if (node.id.includes('-')) {
+    ElMessage.warning('请先保存节点')
+    return
+  }
+  
+  // 检查是否选中了定额专业节点
+  if (!selectCatalogItemId.value) {
+    ElMessage.error('请先选择定额专业节点')
+    return
+  }
+  
+  try {
+    // 获取节点的 contentType
+    const contentType = (node as any).contentType || 
+                       node.attributes?.contentType || 
+                       (node.attributes as any)?.content_type || 
+                       'directory'
+    
+    // 调用更新接口
+    await updateQuotaCatalogTreeNode({
+      id: node.id as any,
+      catalogItemId: selectCatalogItemId.value as any, // 必需字段
+      code: (node as any).code || newLabel,
+      name: newLabel,
+      unit: (node as any).unit,
+      contentType: contentType, // 必需字段
+      sortOrder: (node as any).sortOrder,
+      attributes: node.attributes
+    })
+    
+    ElMessage.success('更新成功')
+    
+    // 重新加载树数据以确保显示最新的名称
+    if (selectCatalogItemId.value) {
+      await loadDetailTree(selectCatalogItemId.value)
+    }
+  } catch (error) {
+    console.error('更新节点名称失败:', error)
+    ElMessage.error('更新失败')
+    
+    // 恢复旧名称
+    node.label = oldLabel
+  }
+}
+
+async function onDecide(node: any){
+  selectedNode.value = node
+  dialogVisible.value = true
+  dialogTreeData.value = []
+  dialogSelectedNode.value = null
+  dialogSelectedNodeKey.value = null
+  dialogExpandedKeys.value = []
+
+  try {
+    const res = await getCatalogsTreeList()
+    const treeData = transformResourceTreeData(Array.isArray(res) ? res : [])
+    dialogTreeData.value = treeData
+
+    // 收集所有节点ID用于默认展开
+    const allNodeIds: Array<string | number> = []
+    const collectNodeIds = (nodes: ResourceTreeNode[]) => {
+      for (const node of nodes) {
+        if (node.children && node.children.length > 0) {
+          allNodeIds.push(node.id)
+          collectNodeIds(node.children)
+        }
+      }
+    }
+    collectNodeIds(treeData)
+    
+    // 设置所有节点为展开状态
+    dialogExpandedKeys.value = allNodeIds
+
+    const boundId = node?.categoryTreeId
+    if (boundId !== undefined && boundId !== null) {
+      const boundNode = findResourceNode(treeData, boundId)
+      if (boundNode) {
+        dialogSelectedNode.value = boundNode
+        dialogSelectedNodeKey.value = boundNode.id
+      }
+    }
+  } catch (error) {
+    console.error('加载工料机机类树失败:', error)
+    ElMessage.error('加载工料机机类树失败')
+  }
+}
+
+// Rich text editor dialog state
+const richTextDialogVisible = ref(false)
+const richTextContent = ref('')
+const onRichText = (node: any)=>{
+ richTextDialogVisible.value = true
+}
+// 确认富文本编辑
+function handleRichTextConfirm() {
+  richTextDialogVisible.value = false
+}
+
+// 取消富文本编辑
+function handleRichTextCancel() {
+  richTextDialogVisible.value = false
+}
+function handleDialogTreeClick(data: any) {
+  if (selectedNode.value?.categoryTreeId) {
+    return
+  }
+  dialogSelectedNode.value = data
+  dialogSelectedNodeKey.value = data?.id ?? null
+}
+
+async function handleDialogConfirm() {
+  if (isDialogConfirmDisabled.value) return
+  
+  // 保持 ID 为字符串格式，避免精度丢失
+  const catalogItemId = selectedNode.value?.id
+  if (!catalogItemId) {
+    ElMessage.warning('请先保存节点')
+    return
+  }
+  
+  const categoryTreeId = dialogSelectedNode.value?.id
+  if (!categoryTreeId) {
+    ElMessage.error('工料机机类节点无效')
+    return
+  }
+
+  console.log('绑定参数:', { catalogItemId, categoryTreeId })
+  console.log('catalogItemId 类型:', typeof catalogItemId, '值:', catalogItemId)
+  console.log('categoryTreeId 类型:', typeof categoryTreeId, '值:', categoryTreeId)
+
+  try {
+    await bindQuotaSpecialty({
+      catalogItemId: catalogItemId as any, // 保持原始类型（字符串或数字）
+      categoryTreeId: categoryTreeId as any
+    })
+    ElMessage.success('绑定成功')
+    dialogVisible.value = false
+    await loadCategoryTree()
+  } catch (error) {
+    console.error('绑定失败:', error)
+    ElMessage.error('绑定失败')
+  }
+}
+
+function handleDialogCancel() {
+  dialogVisible.value = false
+}
+
 function onResizeEnd(index: number, sizes: number[]) {
   // 通过 hotInstance 来操作 Handsontable
   console.log(index,sizes)
-  onTopHeight(sizes[0])
-  onBottomHeight(sizes[1])
+  if (sizes[0] !== undefined) {
+    onTopHeight(sizes[0])
+  }
+  if (sizes[1] !== undefined) {
+    onBottomHeight(sizes[1])
+  }
 }
 function onTopHeight(height: number){
   if (topHstRef.value?.hotInstance) {
     topHstRef.value.hotInstance.updateSettings({
-      height: height-15,
+      height: height - 8,
     })
     
     
@@ -196,34 +792,392 @@ function onBottomHeight(height: number){
   bottomPanelHeight.value = height
 }
 
-// 直接使用配置对象，DbTree 会自动创建 HierarchyContextMenuHandler
+// 第一层树的右键菜单配置
 const contextMenuHandler = {
   rootKey: 'add-category',
-  rootText: '添加定额总类',
+  rootText: '添加总类',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('添加总类:', newNode, '所有根节点:', allRootNodes)
+  },
+  onRootDelete: async (node: any) => {
+    console.log('删除总类:', node)
+    // TODO: 调用 API 删除根节点
+    // await deleteCategories(node.id)
+  },
   levels: [
     {
       depth: 0,
       addKey: 'add-province',
       addText: '添加省市',
-      allowDelete: true
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加省市 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        try {
+          const maxSortOrder = allChildren.reduce((max, node) => {
+            const sortOrder = (node as any).sortOrder || 0
+            return sortOrder > max ? sortOrder : max
+          }, 0)
+          // 保持 ID 为原始类型，避免精度丢失
+          const parentId = parentNode?.id
+          const id = await createQuotaCatalogItem({
+            code: newNode.label,
+            name: newNode.label,
+            parentId: parentId || null,
+            sortOrder: maxSortOrder + 1,
+            attributes: {
+              node_type: 'region'
+            }
+          })
+          newNode.id = String(id)
+          newNode.sortOrder = maxSortOrder + 1
+          newNode.attributes = {
+            ...(newNode.attributes || {}),
+            node_type: 'region'
+          }
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加省市失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('删除省市:', node)
+        try {
+          await deleteQuotaCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除省市失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
     },
     {
       depth: 1,
       addKey: 'add-specialty',
-      addText: '添加定额专业',
-      allowDelete: true
+      addText: '添加类名',
+      allowDelete: true,
+      customMenuItems: [
+        {
+          key: 'bind-specialty',
+          text: '绑定',
+          condition: (node: any) => {
+            // 只有定额专业节点才显示绑定菜单
+            return node.attributes?.node_type === 'specialty'
+          }
+        }
+      ],
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加类名 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        try {
+          const maxSortOrder = allChildren.reduce((max, node) => {
+            const sortOrder = (node as any).sortOrder || 0
+            return sortOrder > max ? sortOrder : max
+          }, 0)
+          
+          // 保持 ID 为原始类型，避免精度丢失
+          const parentId = parentNode?.id
+          const id = await createQuotaCatalogItem({
+            code: newNode.label,
+            name: newNode.label,
+            parentId: parentId || null,
+            sortOrder: maxSortOrder + 1,
+            attributes: {
+              node_type: 'specialty'
+            }
+          })
+          newNode.id = String(id)
+          newNode.sortOrder = maxSortOrder + 1
+          newNode.attributes = {
+            ...(newNode.attributes || {}),
+            node_type: 'specialty'
+          }
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加类名失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('删除类名:', node)
+        try {
+          await deleteQuotaCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除类名失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      },
+      onCustomCommand: async (cmd: string, node: any) => {
+        if (cmd === 'bind-specialty') {
+          console.log('绑定定额专业:', node)
+          
+          // TODO: 打开绑定对话框，让用户选择工料机专业
+          // 临时实现：使用 prompt 获取工料机专业ID
+          const categoryTreeId = prompt('请输入要绑定的工料机专业ID:')
+          
+          if (categoryTreeId) {
+            try {
+              await bindQuotaSpecialty({
+                catalogItemId: node.id, // 保持原始类型
+                categoryTreeId: categoryTreeId as any
+              })
+              
+              ElMessage.success('绑定成功')
+              
+              // 重新加载树以更新数据
+              await loadCategoryTree()
+            } catch (error) {
+              console.error('绑定失败:', error)
+              ElMessage.error('绑定失败')
+            }
+          }
+        }
+      }
     },
     {
       depth: 2,
-      allowDelete: true
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除第三层节点:', node)
+        try {
+          await deleteQuotaCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除第三层节点失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
     }
   ]
 }
+
+// 第二层树的右键菜单配置
+const detailContextMenuHandler = {
+  rootKey: 'add-root-directory',
+  rootText: '添加根目录',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('第二层-添加根目录:', newNode, '所有根节点:', allRootNodes)
+    
+    if (!selectCatalogItemId.value) {
+      ElMessage.error('请先选择定额专业')
+      throw new Error('请先选择定额专业')
+    }
+    
+    try {
+      // 计算排序号 - 从实际数据中获取，而不是从 ID
+      const maxSortOrder = allRootNodes.reduce((max, node) => {
+        // 如果节点有 sortOrder 属性，使用它；否则使用 0
+        const sortOrder = (node as any).sortOrder || 0
+        return sortOrder > max ? sortOrder : max
+      }, 0)
+      
+      // 调用创建接口
+      const id = await createQuotaCatalogTreeNode({
+        catalogItemId: selectCatalogItemId.value,
+        parentId: null,
+        code: newNode.label,
+        name: newNode.label,
+        contentType: 'directory',
+        sortOrder: maxSortOrder + 1
+      })
+      
+      // 更新节点ID（这个会被 contextMenu.ts 中的 ctx.setData 应用）
+      newNode.id = String(id)
+      
+      console.log('第二层-根目录创建成功，新ID:', id)
+      ElMessage.success('添加成功')
+    } catch (error) {
+      console.error('添加根目录失败:', error)
+      ElMessage.error('添加失败')
+      throw error
+    }
+  },
+  onRootDelete: async (node: any) => {
+    console.log('第二层-删除根目录:', node)
+    
+    try {
+      await deleteQuotaCatalogTreeNode(node.id as any)
+      ElMessage.success('删除成功')
+    } catch (error) {
+      console.error('删除根目录失败:', error)
+      ElMessage.error('删除失败')
+      throw error
+    }
+  },
+  levels: [
+    {
+      depth: 0,
+      addKey: 'add-subdirectory',
+      addText: '添加子目录',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('第二层-添加子目录 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        
+        if (!selectCatalogItemId.value) {
+          ElMessage.error('请先选择定额专业')
+          throw new Error('请先选择定额专业')
+        }
+        
+        try {
+          // 计算排序号 - 从实际数据中获取
+          const maxSortOrder = allChildren.reduce((max, node) => {
+            const sortOrder = (node as any).sortOrder || 0
+            return sortOrder > max ? sortOrder : max
+          }, 0)
+          
+          // 检查父节点ID是否有效（不是临时ID）
+          if (parentNode.id.includes('-')) {
+            ElMessage.error('请先保存父节点')
+            throw new Error('父节点未保存')
+          }
+          
+          // 调用创建接口 - 直接使用字符串ID，不转换为数字
+          const id = await createQuotaCatalogTreeNode({
+            catalogItemId: selectCatalogItemId.value,
+            parentId: parentNode.id, // 直接使用字符串ID
+            code: newNode.label,
+            name: newNode.label,
+            contentType: 'directory',
+            sortOrder: maxSortOrder + 1
+          })
+          
+          // 更新节点ID
+          newNode.id = String(id)
+          
+          console.log('第二层-子目录创建成功，新ID:', id)
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加子目录失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('第二层-删除子目录:', node)
+        
+        try {
+          await deleteQuotaCatalogTreeNode(node.id as any)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除子目录失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
+    },
+    {
+      depth: 1,
+      addKey: 'add-content',
+      addText: '添加内容节点',
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('第二层-添加内容节点 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        
+        if (!selectCatalogItemId.value) {
+          ElMessage.error('请先选择定额专业')
+          throw new Error('请先选择定额专业')
+        }
+        
+        try {
+          // 计算排序号 - 从实际数据中获取
+          const maxSortOrder = allChildren.reduce((max, node) => {
+            const sortOrder = (node as any).sortOrder || 0
+            return sortOrder > max ? sortOrder : max
+          }, 0)
+          
+          // 检查父节点ID是否有效（不是临时ID）
+          if (parentNode.id.includes('-')) {
+            ElMessage.error('请先保存父节点')
+            throw new Error('父节点未保存')
+          }
+          
+          // 调用创建接口 - 直接使用字符串ID，不转换为数字
+          const id = await createQuotaCatalogTreeNode({
+            catalogItemId: selectCatalogItemId.value,
+            parentId: parentNode.id, // 直接使用字符串ID
+            code: newNode.label,
+            name: newNode.label,
+            contentType: 'content',
+            sortOrder: maxSortOrder + 1
+          })
+          
+          // 更新节点ID
+          newNode.id = String(id)
+          
+          console.log('第二层-内容节点创建成功，新ID:', id)
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加内容节点失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('第二层-删除内容节点:', node)
+        
+        try {
+          await deleteQuotaCatalogTreeNode(node.id as any)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除内容节点失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
+    },
+    {
+      depth: 2,
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('第二层-删除第三层节点:', node)
+        
+        try {
+          await deleteQuotaCatalogTreeNode(node.id as any)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除第三层节点失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
+    }
+  ]
+}
+
+const detailContextMenuHandlerImpl = createHierarchyContextMenuHandler<Tree>(detailContextMenuHandler)
+const detailContextMenuHandlerWithRootGuard: ContextMenuHandler<Tree> = {
+  getMenuItems: (node, ctx) => {
+    if (!isDetailTreeEditable.value) return []
+    if (!node && detailTreeData.value.length > 0) return []
+    return detailContextMenuHandlerImpl.getMenuItems(node, ctx)
+  },
+  execute: (cmd, node, ctx) => {
+    if (!isDetailTreeEditable.value) return
+    if (!node && detailTreeData.value.length > 0 && cmd === detailContextMenuHandler.rootKey) {
+      return
+    }
+    return detailContextMenuHandlerImpl.execute(cmd, node, ctx)
+  }
+}
+
+// 计算属性：根据选中的节点类型决定是否启用子目录树的右键菜单
+const detailContextMenuHandlerComputed = computed(() => {
+  return detailContextMenuHandlerWithRootGuard
+})
+
 onMounted(() => {
+  // 加载定额目录树
+  loadCategoryTree()
+  
   setTimeout(() => {
     onTopHeight(topContainerHeight.value)
 
-    // onBottomHeight(bottomContainerHeight.value)
+    onBottomHeight(bottomContainerHeight.value)
     // console.log(bottomContainerHeight.value)
   }, 200);
 })
@@ -235,37 +1189,70 @@ onUnmounted(() => {
 <template>
 <Page auto-content-height>
    <ElSplitter >
-      <ElSplitterPanel collapsible size="15%" :min="200">
+      <ElSplitterPanel size="15%" :min="100">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-            <DbTree :height="containerHeight" :data="categoryTreeData" @select="categoryHandleSelect" :defaultExpandedKeys="2" :context-menu-handler="contextMenuHandler"  :search="false" />
+            <DbTree 
+              :height="containerHeight" 
+              :data="categoryTreeData" 
+              @select="categoryHandleSelect" 
+              @edit-save="handleCategoryTreeEditSave"
+              :defaultExpandedKeys="2" 
+              :context-menu-handler="contextMenuHandler"  
+              :search="false" 
+              :decide="true" 
+              decide-text="工" 
+              decide-highlight-key="categoryTreeId" 
+              :decide-filter="(node) => node.attributes?.node_type === 'specialty'"
+              @decide="onDecide" 
+            />
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel collapsible size="15%" :min="200">
+      <ElSplitterPanel size="15%" :min="100">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full">
-            <DbTree :height="containerHeight" :data="detailTreeData" @select="detailHandleSelect" :defaultExpandedKeys="2"  :search="false" />
+            <DbTree 
+              :height="containerHeight" 
+              :data="detailTreeData" 
+              @select="detailHandleSelect" 
+              @edit-save="handleDetailTreeEditSave"
+              :defaultExpandedKeys="2" 
+              :context-menu-handler="detailContextMenuHandlerComputed" 
+              :search="false" 
+              :decide="true" 
+              decide-text="注" 
+              @decide="onRichText" 
+            />
         </ElCard>
       </ElSplitterPanel>
-      <ElSplitterPanel >
+      <ElSplitterPanel :min="200">
         <ElSplitter layout="vertical" @resize-end="onResizeEnd">
-          <ElSplitterPanel collapsible size="60%" :min="200">
-            <ElCard class="w-full h-full" body-class="!p-0 h-full" ref="topContainerRef">
-                <DbHst ref="topHstRef" :settings="topDbSettings"></DbHst>
+          <ElSplitterPanel size="60%" :min="200">
+            <ElCard class="w-full h-full" body-class="!p-0 h-full" ref="topContainerRef" @contextmenu.prevent>
+                <DbHst ref="topHstRef" :settings="topDbSettings" :contextMenuItems="topContextMenuItems"></DbHst>
             </ElCard>
           </ElSplitterPanel>
-          <ElSplitterPanel collapsible :min="200">
+          <ElSplitterPanel :min="200">
             <ElCard class="w-full h-full" body-class="!p-0 h-full" ref="bottomContainerRef">
                   <ElTabs v-model="activeTab" type="border-card" class="quota-tabs">
                     <ElTabPane label="子目工料机" name="subItem" lazy>
-                      <SubItemMaterials v-if="activeTab === 'subItem'" :height="bottomPanelHeight" />
+                      <SubItemMaterials 
+                        ref="subItemMaterialsRef"
+                        v-if="activeTab === 'subItem'" 
+                        :height="bottomPanelHeight" 
+                        :quotaItemId="selectedQuotaItemId"
+                      />
                     </ElTabPane>
-                    <ElTabPane label="市场主材设备" name="market" lazy>
+                    <ElTabPane label="市场主材设备?" name="market" lazy>
                       <MarketMaterials v-if="activeTab === 'market'" :height="bottomPanelHeight"/>
                     </ElTabPane>
                     <ElTabPane label="定额调整设置" name="adjustQuery" lazy>
-                      <QuotaAdjustmentSetting v-if="activeTab === 'adjustQuery'" :height="bottomPanelHeight"/>
+                      <QuotaAdjustmentSetting 
+                        v-if="activeTab === 'adjustQuery'" 
+                        :height="bottomPanelHeight"
+                        :quotaItemId="selectedQuotaItemId"
+                      />
                     </ElTabPane>
                     <ElTabPane label="定额调整" name="adjust" lazy>
-                      <QuotaAdjustment v-if="activeTab === 'adjust'" :height="bottomPanelHeight"/>
+                      <QuotaAdjustment v-if="activeTab === 'adjust'" :height="bottomPanelHeight" :quotaItemId="selectedQuotaItemId"/>
                     </ElTabPane>
                     <ElTabPane label="定额说明" name="description" lazy>
                       <QuotaDescription v-if="activeTab === 'description'" :height="bottomPanelHeight"/>
@@ -279,6 +1266,45 @@ onUnmounted(() => {
         </ElSplitter>
       </ElSplitterPanel>
     </ElSplitter>
+
+    <!-- 树选择弹窗 -->
+    <ElDialog
+      v-model="dialogVisible"
+      title="选择节点"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <ElTreeV2
+        :data="dialogTreeData"
+        :props="{ value: 'id', label: 'label', children: 'children' }"
+        :height="400"
+        highlight-current
+        :current-node-key="dialogSelectedNodeKey"
+        :default-expanded-keys="dialogExpandedKeys"
+        @node-click="handleDialogTreeClick"
+      />
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton @click="handleDialogCancel">取消</ElButton>
+          <ElButton type="primary" :disabled="isDialogConfirmDisabled" @click="handleDialogConfirm">确定</ElButton>
+        </span>
+      </template>
+    </ElDialog>
+    <!-- 富文本编辑弹窗 -->
+    <ElDialog
+      v-model="richTextDialogVisible"
+      title="编辑清单说明"
+      width="800px"
+      :close-on-click-modal="false"
+    >
+      <RichTextarea v-model="richTextContent" height="400px" />
+      <template #footer>
+        <span class="dialog-footer">
+          <ElButton @click="handleRichTextCancel">取消</ElButton>
+          <ElButton type="primary" @click="handleRichTextConfirm">确定</ElButton>
+        </span>
+      </template>
+    </ElDialog>
 </Page>
 </template>
 
diff --git a/apps/web-ele/src/views/database/quota/price/MarketMaterials.vue b/apps/web-ele/src/views/database/quota/price/MarketMaterials.vue
index 0349b8f..10501df 100644
--- a/apps/web-ele/src/views/database/quota/price/MarketMaterials.vue
+++ b/apps/web-ele/src/views/database/quota/price/MarketMaterials.vue
@@ -57,7 +57,7 @@ watch(
     console.log('MarketMaterials newHeight', newHeight)
     if (newHeight && hstRef.value?.hotInstance) {
       hstRef.value.hotInstance.updateSettings({
-        height: newHeight - 50 - 15// 减去 tabs 头部和 padding 的高度,滚动条
+        height: newHeight - 50// 减去 tabs 头部和 padding 的高度,滚动条
       })
       hstRef.value.hotInstance.render()
     }
diff --git a/apps/web-ele/src/views/database/quota/price/QuotaAdjustment.ts b/apps/web-ele/src/views/database/quota/price/QuotaAdjustment.ts
new file mode 100644
index 0000000..ee8d5a3
--- /dev/null
+++ b/apps/web-ele/src/views/database/quota/price/QuotaAdjustment.ts
@@ -0,0 +1,43 @@
+// import { ref } from 'vue'
+// import { getDictOptions } from '@vben/hooks';
+// import { DICT_TYPE } from '@vben/constants';
+// const settingRender = (
+//   instance: any,
+//   TD: HTMLTableCellElement,
+//   row: number,
+//   col: number,
+//   prop: any,
+//   value: any,
+//   cellProperties: any
+// ) => {
+//   TD.innerHTML = ''
+  
+//   const container = document.createElement('div')
+//   container.style.display = 'flex'
+//   container.style.alignItems = 'center'
+//   container.style.justifyContent = 'center'
+//   container.style.cursor = 'pointer'
+//   container.style.color = '#006be6'
+//   container.style.padding = '0 5px'
+  
+//   const textSpan = document.createElement('span')
+//   textSpan.textContent = '编辑'
+  
+//   container.addEventListener('click', (e) => {
+//     e.stopPropagation()
+//   })
+  
+//   container.appendChild(textSpan)
+//   TD.appendChild(container)
+  
+//   return TD
+// }
+
+// export const columns = ref<any[]>([
+//   { type: 'text', data: 'sorderId', title: '序号' },
+//   { type: 'text', data: 'name', title: '名称' },
+//   { type: 'text', data: 'value', title: '定额值' },
+//   { type: 'numeric', data: 'coefficient2', title: '调整' },
+//   { type: 'numeric', data: 'coefficient1', title: '调整内容' },
+//   { type: 'text', data: 'setting', title: '设置', renderer: settingRender, readOnly: true }
+// ])
diff --git a/apps/web-ele/src/views/database/quota/price/QuotaAdjustment.vue b/apps/web-ele/src/views/database/quota/price/QuotaAdjustment.vue
index 2d9ff72..b349193 100644
--- a/apps/web-ele/src/views/database/quota/price/QuotaAdjustment.vue
+++ b/apps/web-ele/src/views/database/quota/price/QuotaAdjustment.vue
@@ -1,56 +1,152 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-import { DbHst } from '#/components/db-hst'
+import { getAdjustmentCombinedList } from '#/api/database/quota';
+import { DbHst } from '#/components/db-hst';
+import { nextTick, onMounted, ref, watch } from 'vue';
 
 const props = defineProps<{
   height?: number
+  quotaItemId?: number
 }>()
 
 const topHstRef = ref<any>(null)
-const bottomHstRef = ref<any>(null)
 
-// 第一个表格：调整、附注名称、附注内容
+// 第一个表格：序号、名称、调整
 const topColumns = ref<any[]>([
-  { type: 'checkbox', data: 'adjustment', title: '调整' },
-  { type: 'text', data: 'noteName', title: '附注名称' },
-  { type: 'text', data: 'noteContent', title: '附注内容' }
+  { 
+    type: 'text', 
+    data: 'sortOrder', 
+    title: '序号', 
+    readOnly: true, 
+    width: 80,
+    renderer: (_instance: any, td: HTMLTableCellElement, row: number) => {
+      td.innerHTML = String(row + 1)
+      td.style.textAlign = 'center'
+      td.style.color = '#909399'
+      return td
+    }
+  },
+  { type: 'text', data: 'name', title: '名称', readOnly: true },
+  { 
+    type: 'text', 
+    data: 'adjustment', 
+    title: '调整',
+    className: 'htCenter',
+    renderer: (instance: any, td: HTMLTableCellElement, row: number, _col: number, _prop: string, value: any, cellProperties: any) => {
+      const rowData = instance.getSourceDataAtRow(row)
+      const adjustmentType = rowData?.adjustmentType
+      
+      // 清空单元格
+      td.innerHTML = ''
+      td.style.textAlign = 'center'
+      td.style.verticalAlign = 'middle'
+      
+      // 根据调整类型决定显示方式
+      if (adjustmentType === 'dynamic_merge' || adjustmentType === 'dynamic_adjust') {
+        // 录入框：使用默认的文本渲染（双击可编辑）
+        cellProperties.readOnly = false
+        td.innerHTML = value || ''
+        return td
+      } else {
+        // 复选框：居中显示，禁止双击编辑
+        cellProperties.readOnly = true
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkbox.checked = value === true || value === 1 || value === '1'
+        checkbox.style.cssText = 'cursor: pointer;'
+        
+        // 监听复选框变化
+        checkbox.addEventListener('change', (e) => {
+          const target = e.target as HTMLInputElement
+          instance.setDataAtRowProp(row, 'adjustment', target.checked)
+        })
+        
+        // 阻止双击事件
+        td.addEventListener('dblclick', (e) => {
+          e.stopPropagation()
+        })
+        
+        td.appendChild(checkbox)
+        return td
+      }
+    }
+  },
 ])
 
-const topMockData = () => {
-  return Array.from({ length: 10 }, (_, index) => ({
-    adjustment: index % 2 === 0, // checkbox 类型使用 boolean 值
-    noteName: `附注${index + 1}`,
-    noteContent: `附注内容说明${index + 1}`
-  }))
-}
-
-const topSettings = {
-  data: topMockData(),
+const topSettings = ref({
+  data: [],
   columns: topColumns.value,
   colWidths: 150,
-  height: 135
-}
+  height: 135,
+  readOnly: false, // 改为可编辑，因为调整字段需要编辑
+})
 
-// 第二个表格：名称、定额值、实际值
-const bottomColumns = ref<any[]>([
-  { type: 'text', data: 'name', title: '名称' },
-  { type: 'text', data: 'quotaValue', title: '定额值' },
-  { type: 'text', data: 'actualValue', title: '实际值' }
-])
+// 加载调整设置与明细的组合列表数据
+const loadAdjustmentDetails = async () => {
+  if (!props.quotaItemId) {
+    console.warn('quotaItemId is required')
+    // 清空表格
+    if (topHstRef.value?.hotInstance) {
+      topHstRef.value.hotInstance.loadData([])
+    }
+    return
+  }
 
-const bottomMockData = () => {
-  return Array.from({ length: 10 }, (_, index) => ({
-    name: `项目${index + 1}`,
-    quotaValue: (Math.random() * 100 + 10).toFixed(2),
-    actualValue: (Math.random() * 100 + 10).toFixed(2)
-  }))
-}
-
-const bottomSettings = {
-  data: bottomMockData(),
-  columns: bottomColumns.value,
-  colWidths: 150,
-  height: 135
+  try {
+    console.log('开始加载调整明细列表, quotaItemId:', props.quotaItemId)
+    const response = await getAdjustmentCombinedList(props.quotaItemId)
+    console.log('接口返回数据:', response)
+    
+    // 组合列表返回的是调整设置数组，每个设置包含其明细
+    // 需要将其展平为表格行数据
+    const flattenedData: any[] = []
+    
+    if (response && Array.isArray(response)) {
+      response.forEach((setting: any) => {
+        console.log('处理调整设置:', setting)
+        
+        // 从 adjustmentRules 中提取 type
+        const adjustmentType = setting.adjustmentRules?.type || setting.adjustmentType
+        console.log('提取的 adjustmentType:', adjustmentType)
+        
+        // 如果有明细，展开明细
+        if (setting.details && Array.isArray(setting.details) && setting.details.length > 0) {
+          setting.details.forEach((detail: any, index: number) => {
+            flattenedData.push({
+              sortOrder: detail.sortOrder || (index + 1),
+              name: setting.name, // 使用调整设置的名称
+              quotaValue: setting.quotaValue, // 使用调整设置的定额值
+              adjustmentType: adjustmentType, // 使用从 adjustmentRules 提取的 type
+              adjustmentCode: detail.adjustmentCode, // 明细的调整代码
+              adjustment: detail.adjustment, // 明细的调整内容
+              settingId: setting.id,
+              detailId: detail.id
+            })
+          })
+        } else {
+          // 如果没有明细，只显示调整设置本身
+          flattenedData.push({
+            sortOrder: setting.sortOrder || 0,
+            name: setting.name,
+            quotaValue: setting.quotaValue,
+            adjustmentType: adjustmentType, // 使用从 adjustmentRules 提取的 type
+            adjustmentCode: '',
+            adjustment: setting.adjustmentContent || '', // 使用调整设置的调整内容
+            settingId: setting.id,
+            detailId: null
+          })
+        }
+      })
+    }
+    
+    console.log('展平后的数据:', flattenedData)
+    
+    // 更新表格数据
+    if (topHstRef.value?.hotInstance) {
+      topHstRef.value.hotInstance.loadData(flattenedData)
+    }
+  } catch (error) {
+    console.error('Failed to load adjustment combined list:', error)
+  }
 }
 
 watch(
@@ -58,41 +154,50 @@ watch(
   (newHeight) => {
     console.log('QuotaAdjustment newHeight', newHeight)
     if (newHeight) {
-      const tableHeight = (newHeight - 50 - 15) / 2 // 平均分配给两个表格
-      
-      if (topHstRef.value?.hotInstance) {
-        topHstRef.value.hotInstance.updateSettings({
-          height: tableHeight
-        })
-        topHstRef.value.hotInstance.render()
-      }
-      
-      if (bottomHstRef.value?.hotInstance) {
-        bottomHstRef.value.hotInstance.updateSettings({
-          height: tableHeight
-        })
-        bottomHstRef.value.hotInstance.render()
-      }
+      const tableHeight = newHeight - 50
+      nextTick(() => {
+        if (topHstRef.value?.hotInstance) {
+          topHstRef.value.hotInstance.updateSettings({
+            height: tableHeight
+          })
+          topHstRef.value.hotInstance.render()
+        }
+      })
     }
   },
   { immediate: true }
 )
 
+watch(
+  () => props.quotaItemId,
+  (newQuotaItemId) => {
+    console.log('QuotaAdjustment: quotaItemId changed to', newQuotaItemId)
+    if (newQuotaItemId) {
+      loadAdjustmentDetails()
+    } else {
+      // 清空表格
+      if (topHstRef.value?.hotInstance) {
+        topHstRef.value.hotInstance.loadData([])
+      }
+    }
+  }
+  // 移除 immediate: true，避免与 onMounted 重复调用
+)
+
 onMounted(() => {
-  console.log('QuotaAdjustment mounted')
+  console.log('QuotaAdjustment mounted, quotaItemId:', props.quotaItemId)
+  // onMounted 时调用一次
+  if (props.quotaItemId) {
+    loadAdjustmentDetails()
+  }
 })
 
-defineExpose({ topHstRef, bottomHstRef })
+defineExpose({ topHstRef, loadAdjustmentDetails })
 </script>
 
 <template>
   <div class="w-full h-full flex flex-col gap-2">
-    <div class="flex-1">
-      <DbHst ref="topHstRef" :settings="topSettings" />
-    </div>
-    <div class="flex-1">
-      <DbHst ref="bottomHstRef" :settings="bottomSettings" />
-    </div>
+    <DbHst ref="topHstRef" :settings="topSettings" />
   </div>
 </template>
 
diff --git a/apps/web-ele/src/views/database/quota/price/QuotaAdjustmentSetting.ts b/apps/web-ele/src/views/database/quota/price/QuotaAdjustmentSetting.ts
new file mode 100644
index 0000000..83b92d8
--- /dev/null
+++ b/apps/web-ele/src/views/database/quota/price/QuotaAdjustmentSetting.ts
@@ -0,0 +1,113 @@
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { ref } from 'vue';
+//调整人材机消耗量 表头：名称，类别，系数
+export const tab1Columns = ref<any[]>([
+  { type: 'text', data: 'name', title: '名称' },
+  { 
+    type: 'text', 
+    data: 'category', 
+    title: '类别',
+    renderer: 'db-dropdown',
+    source: [
+      { label: '人工', value: '人工' },
+      { label: '材料', value: '材料' },
+      { label: '机械', value: '机械' }
+    ]
+  },
+  { 
+    type: 'numeric', 
+    data: 'coefficient', 
+    title: '系数',
+    numericFormat: {
+      pattern: '0,0.000',
+      culture: 'en-US'
+    },
+    validator: (value: any, callback: (valid: boolean) => void) => {
+      // 允许空值、数字（包括负数和小数）
+      if (value === null || value === undefined || value === '') {
+        callback(true)
+        return
+      }
+      // 验证是否为有效数字（支持负数和小数）
+      const numValue = Number(value)
+      callback(!isNaN(numValue))
+    }
+  },
+])
+//动态合并定额 表头：序号，编码，名称，最小值，最大值，分母值，基础值，取值规则
+export const tab2Columns = ref<any[]>([
+  { 
+    type: 'text', 
+    data: 'index', 
+    title: '序号', 
+    readOnly: true,
+    renderer: (instance: any, td: HTMLTableCellElement, row: number) => {
+      td.innerHTML = String(row + 1)
+      td.style.textAlign = 'center'
+      td.style.color = '#909399'
+      return td
+    }
+  },
+  { type: 'text', data: 'code', title: '编码' },
+  { type: 'text', data: 'name', title: '名称' },
+  { type: 'numeric', data: 'minValue', title: '最小值' },
+  { type: 'numeric', data: 'maxValue', title: '最大值' },
+  { type: 'numeric', data: 'denominatorValue', title: '分母值' },
+  { type: 'numeric', data: 'baseValue', title: '基础值' },
+  { type: 'text', data: 'valueRule', title: '取值规则',
+    renderer: 'db-dropdown',
+    source: getDictOptions(DICT_TYPE.DYNAMIC_MERGE_RULE, 'string')
+    },
+])
+
+//增减材料消耗量 表头：序号，编码，名称，增减定额消耗量数值
+export const tab3Columns = ref<any[]>([
+  { 
+    type: 'text', 
+    data: 'index', 
+    title: '序号', 
+    readOnly: true,
+    renderer: (instance: any, td: HTMLTableCellElement, row: number) => {
+      td.innerHTML = String(row + 1)
+      td.style.textAlign = 'center'
+      td.style.color = '#909399'
+      return td
+    }
+  },
+  { type: 'text', data: 'code', title: '编码' },
+  { type: 'text', data: 'name', title: '名称' },
+  { 
+    type: 'numeric', 
+    data: 'consumptionValue', 
+    title: '增减定额消耗量数值',
+    numericFormat: {
+      pattern: '0,0.000',
+      culture: 'en-US'
+    },
+    validator: (value: any, callback: (valid: boolean) => void) => {
+      // 允许空值、数字（包括负数和小数）
+      if (value === null || value === undefined || value === '') {
+        callback(true)
+        return
+      }
+      // 验证是否为有效数字（支持负数和小数）
+      const numValue = Number(value)
+      callback(!isNaN(numValue))
+    }
+  },
+])
+
+//动态调整人材机消耗量 表头：类别，系数设置，最小值，最大值。分母值，基础值，取值规则
+export const tab4Columns = ref<any[]>([
+  { type: 'text', data: 'category', title: '类别' },
+  { type: 'numeric', data: 'coefficientSetting', title: '系数设置' },
+  { type: 'numeric', data: 'minValue', title: '最小值' },
+  { type: 'numeric', data: 'maxValue', title: '最大值' },
+  { type: 'numeric', data: 'denominatorValue', title: '分母值' },
+  { type: 'numeric', data: 'baseValue', title: '基础值' },
+  { type: 'text', data: 'valueRule', title: '取值规则' ,
+     renderer: 'db-dropdown',
+    source: getDictOptions(DICT_TYPE.DYNAMIC_TALENT_MATERIAL_MACHINE_RULE, 'string')
+  },
+])
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/quota/price/QuotaAdjustmentSetting.vue b/apps/web-ele/src/views/database/quota/price/QuotaAdjustmentSetting.vue
index 5b895cf..d320956 100644
--- a/apps/web-ele/src/views/database/quota/price/QuotaAdjustmentSetting.vue
+++ b/apps/web-ele/src/views/database/quota/price/QuotaAdjustmentSetting.vue
@@ -1,148 +1,534 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import { ElDialog,ElTabPane, ElTable ,ElTableColumn,ElInput,ElButton} from 'element-plus';
-import { DbHst } from '#/components/db-hst'
+import { createAdjustmentSetting, deleteAdjustmentSetting, getAdjustmentSettingList, updateAdjustmentSetting } from '#/api/database/quota/index';
+import { DbHst } from '#/components/db-hst';
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { tab1Columns, tab2Columns, tab3Columns, tab4Columns } from './QuotaAdjustmentSetting';
 
 const props = defineProps<{
   height?: number
+  quotaItemId?: number | null
 }>()
 
 const hstRef = ref<any>(null)
+const topHstRef = ref<any>(null)
+const adjustmentSettingsData = ref<any[]>([])
+
+// 加载调整设置列表
+const loadAdjustmentSettings = async (quotaItemId: number) => {
+  try {
+    console.log('开始加载调整设置列表, quotaItemId:', quotaItemId)
+
+    const res = await getAdjustmentSettingList(quotaItemId)
+    console.log('调整设置列表原始数据:', res)
+
+    if (res && Array.isArray(res)) {
+      adjustmentSettingsData.value = res.map(item => ({
+        id: item.id,
+        name: item.name || '',
+        adjustType: item.adjustmentType || '',
+        adjustRule: item.adjustmentRules ? JSON.stringify(item.adjustmentRules) : ''
+      }))
+
+      console.log('调整设置列表转换后数据:', adjustmentSettingsData.value)
+
+      // 更新表格数据
+      if (hstRef.value?.hotInstance) {
+        hstRef.value.hotInstance.loadData(adjustmentSettingsData.value)
+      }
+    } else {
+      console.warn('调整设置列表数据为空或格式不正确')
+      adjustmentSettingsData.value = []
+      if (hstRef.value?.hotInstance) {
+        hstRef.value.hotInstance.loadData([])
+      }
+    }
+  } catch (error) {
+    console.error('加载调整设置列表失败:', error)
+    adjustmentSettingsData.value = []
+  }
+}
+
   // 弹窗相关
 const dialogVisible = ref(false)
-const activeTab = ref('tab1')
+const activeTab = ref('tab1Settings')
 const currentCell = reactive({ row: 0, col: 0 })
 // Tab 标签映射
 const tabLabels: Record<string, string> = {
-  'tab1': '调整工料机系数',
-  'tab2': '动态合并定额',
-  'tab3': '增减耗量',
-  'tab4': '动态调整人材机消耗量'
+  'tab1Columns': '调整人材机消耗量',
+  'tab2Columns': '动态合并定额',
+  'tab3Columns': '增减材料消耗量',
+  'tab4Columns': '动态调整人材机消耗量'
+}
+const typeLists: any = [
+  {label:'调整人材机消耗量',value: 1,tab:'tab1Columns'},
+  {label:'动态合并定额',value: 2,tab:'tab2Columns'},
+  {label:'增减材料消耗量',value: 3,tab:'tab3Columns'},
+  {label:'动态调整人材机消耗量',value: 4,tab:'tab4Columns'}
+]
+
+// 列配置映射
+const tabColumnsMap: Record<string, any> = {
+  'tab1Columns': tab1Columns,
+  'tab2Columns': tab2Columns,
+  'tab3Columns': tab3Columns,
+  'tab4Columns': tab4Columns
 }
 
-// Tab1: 调整工料机系数
-const coefficientData = ref([
-  { category: '人工', coefficient: 2, selected: false },
-  { category: '材料', coefficient: 1.5, selected: false },
-  { category: '机具', coefficient: 1.5, selected: false },
-  { category: '其他', coefficient: 2, selected: false }
-])
+const dbSettings = ref<any>({
+  data: [],
+  columns: [],
+  colWidths: 150,
+  height: 270
+})
 
-// Tab2: 动态合并定额
-const quotaMergeData = ref([
-  { code: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' }
-])
-
-// Tab3: 增减耗量
-const consumptionData = ref([
-  { code: '', name: '', value: '' }
-])
-
-// Tab4: 动态调整人材机消耗量
-const dynamicAdjustData = ref([
-  { name: '', category: '', coefficient: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' }
-])
-
-const tabDialog = ( hot: any,
-  TD: HTMLTableCellElement,
-  row: number,
-  col: number,
-  prop: any,
-  value: any,
-  cellProperties: any)=>{
-    TD.innerHTML = ''
-    
-    const container = document.createElement('div')
-    container.style.display = 'flex'
-    container.style.alignItems = 'center'
-    container.style.justifyContent = 'space-between'
-    container.style.padding = '0 5px'
-    
-    const textSpan = document.createElement('span')
-    textSpan.textContent = value || ''
-    
-    const iconSpan = document.createElement('span')
-    iconSpan.innerHTML = '▼'
-    iconSpan.style.cursor = 'pointer'
-    iconSpan.style.marginLeft = '5px'
-    iconSpan.style.fontSize = '12px'
-    iconSpan.style.color = '#909399'
-    
-    iconSpan.addEventListener('click', (e) => {
-      e.stopPropagation()
-      currentCell.row = row
-      currentCell.col = col
-      dialogVisible.value = true
-    })
-    
-    container.appendChild(textSpan)
-    container.appendChild(iconSpan)
-    TD.appendChild(container)
-    
-    return TD;
-}
 const handleClose = () => {
   dialogVisible.value = false
 }
 
 const handleConfirm = () => {
-  if (hstRef?.value.hotInstance) {
-    const tabLabel = tabLabels[activeTab.value]
-    hstRef?.value.hotInstance.setDataAtCell(currentCell.row, currentCell.col, tabLabel)
+  if (!topHstRef.value?.hotInstance || !hstRef.value?.hotInstance) {
+    ElMessage.error('表格实例未初始化')
+    return
   }
-  dialogVisible.value = false
-}
 
-const addRow = (tabName: string) => {
-  switch(tabName) {
-    case 'tab2':
-      quotaMergeData.value.push({ code: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' })
-      break
-    case 'tab3':
-      consumptionData.value.push({ code: '', name: '', value: '' })
-      break
-    case 'tab4':
-      dynamicAdjustData.value.push({ name: '', category: '', coefficient: '', minValue: '', maxValue: '', denominatorValue: '', baseValue: '', rule: '' })
-      break
+  try {
+    // 获取弹窗内表格的数据
+    const dialogData = topHstRef.value.hotInstance.getData()
+    
+    // 过滤掉空行
+    const validData = dialogData.filter((row: any) => {
+      return row && row.some((cell: any) => cell !== null && cell !== '')
+    })
+
+    if (validData.length === 0) {
+      ElMessage.warning('请至少填写一行数据')
+      return
+    }
+
+    // 根据当前 tab 构建对应的 JSON 结构
+    let adjustmentRules: any = {}
+    
+    switch(activeTab.value) {
+      case 'tab1Columns': // 调整人材机消耗量
+        adjustmentRules = {
+          type: 'adjust_coefficient',
+          items: validData.map((row: any) => ({
+            name: row[0] || '',
+            category: row[1] || '',
+            coefficient: row[2] || 0
+          }))
+        }
+        break
+        
+      case 'tab2Columns': // 动态合并定额
+        adjustmentRules = {
+          type: 'dynamic_merge',
+          items: validData.map((row: any) => ({
+            // 不保存序号，序号是自动生成的
+            code: row[1] || '',
+            name: row[2] || '',
+            minValue: row[3] || 0,
+            maxValue: row[4] || 0,
+            denominatorValue: row[5] || 0,
+            baseValue: row[6] || 0,
+            valueRule: row[7] || ''
+          }))
+        }
+        break
+        
+      case 'tab3Columns': // 增减材料消耗量
+        adjustmentRules = {
+          type: 'consumption_adjustment',
+          items: validData.map((row: any) => ({
+            // 不保存序号，序号是自动生成的
+            code: row[1] || '',
+            name: row[2] || '',
+            consumptionValue: row[3] || 0
+          }))
+        }
+        break
+        
+      case 'tab4Columns': // 动态调整人材机消耗量
+        adjustmentRules = {
+          type: 'dynamic_adjust',
+          items: validData.map((row: any) => ({
+            category: row[0] || '',
+            coefficientSetting: row[1] || 0,
+            minValue: row[2] || 0,
+            maxValue: row[3] || 0,
+            denominatorValue: row[4] || 0,
+            baseValue: row[5] || 0,
+            valueRule: row[6] || ''
+          }))
+        }
+        break
+    }
+
+    // 将 JSON 对象转换为字符串
+    const adjustRuleStr = JSON.stringify(adjustmentRules)
+    
+    // 更新主表当前行的 adjustRule 字段
+    hstRef.value.hotInstance.setDataAtRowProp(currentCell.row, 'adjustRule', adjustRuleStr)
+    
+    // 关闭弹窗
+    dialogVisible.value = false
+    
+    ElMessage.success('保存成功')
+  } catch (error) {
+    console.error('保存失败:', error)
+    ElMessage.error('保存失败')
   }
 }
 
+const settingRender = (
+  instance: any,
+  TD: HTMLTableCellElement,
+  row: number,
+  col: number,
+  _prop: any,
+  _value: any,
+  _cellProperties: any
+) => {
+  TD.innerHTML = ''
+
+  const container = document.createElement('div')
+  container.style.display = 'flex'
+  container.style.alignItems = 'center'
+  container.style.justifyContent = 'center'
+  container.style.cursor = 'pointer'
+  container.style.color = '#006be6'
+  container.style.padding = '0 5px'
+
+  const textSpan = document.createElement('span')
+  textSpan.textContent = '编辑'
+
+  container.addEventListener('click', (e) => {
+    e.stopPropagation()
+    const rowObj = instance.getSourceDataAtRow(row)
+    if(rowObj.adjustType) {
+      // 根据 adjustType 找到对应的 tab
+      const typeItem = typeLists.find((item: any) => item.value == rowObj.adjustType)
+      if(typeItem && typeItem.tab) {
+        activeTab.value = typeItem.tab
+        // 更新 dbSettings 的列配置
+        updateDbSettings(typeItem.tab)
+        
+        // 加载已有的调整规则数据
+        loadAdjustmentRulesData(rowObj.adjustRule, typeItem.tab)
+      }
+      currentCell.row = row
+      currentCell.col = col
+      dialogVisible.value = true
+    }
+  })
+
+  container.appendChild(textSpan)
+  TD.appendChild(container)
+
+  return TD
+}
+
+// 加载调整规则数据到弹窗表格
+const loadAdjustmentRulesData = (adjustRuleStr: string, tabName: string) => {
+  try {
+    if (!adjustRuleStr) {
+      // 如果没有数据，加载空数组
+      dbSettings.value.data = []
+      return
+    }
+
+    const adjustmentRules = JSON.parse(adjustRuleStr)
+    let tableData: any[] = []
+
+    switch(tabName) {
+      case 'tab1Columns': // 调整人材机消耗量
+        if (adjustmentRules.items && Array.isArray(adjustmentRules.items)) {
+          tableData = adjustmentRules.items.map((item: any) => ({
+            name: item.name || '',
+            category: item.category || '',
+            coefficient: item.coefficient || 0
+          }))
+        }
+        break
+        
+      case 'tab2Columns': // 动态合并定额
+        if (adjustmentRules.items && Array.isArray(adjustmentRules.items)) {
+          tableData = adjustmentRules.items.map((item: any) => ({
+            // 序号不需要加载，会自动生成
+            code: item.code || '',
+            name: item.name || '',
+            minValue: item.minValue || 0,
+            maxValue: item.maxValue || 0,
+            denominatorValue: item.denominatorValue || 0,
+            baseValue: item.baseValue || 0,
+            valueRule: item.valueRule || ''
+          }))
+        }
+        break
+        
+      case 'tab3Columns': // 增减材料消耗量
+        if (adjustmentRules.items && Array.isArray(adjustmentRules.items)) {
+          tableData = adjustmentRules.items.map((item: any) => ({
+            // 序号不需要加载，会自动生成
+            code: item.code || '',
+            name: item.name || '',
+            consumptionValue: item.consumptionValue || 0
+          }))
+        }
+        break
+        
+      case 'tab4Columns': // 动态调整人材机消耗量
+        if (adjustmentRules.items && Array.isArray(adjustmentRules.items)) {
+          tableData = adjustmentRules.items.map((item: any) => ({
+            category: item.category || '',
+            coefficientSetting: item.coefficientSetting || 0,
+            minValue: item.minValue || 0,
+            maxValue: item.maxValue || 0,
+            denominatorValue: item.denominatorValue || 0,
+            baseValue: item.baseValue || 0,
+            valueRule: item.valueRule || ''
+          }))
+        }
+        break
+    }
+
+    dbSettings.value.data = tableData
+    
+    // 等待 DOM 更新后加载数据
+    nextTick(() => {
+      if (topHstRef.value?.hotInstance) {
+        topHstRef.value.hotInstance.loadData(tableData)
+      }
+    })
+  } catch (error) {
+    console.error('加载调整规则数据失败:', error)
+    dbSettings.value.data = []
+  }
+}
+
+// 更新 dbSettings 配置
+const updateDbSettings = (tabName: string) => {
+  const columns = tabColumnsMap[tabName]
+  if (columns) {
+    dbSettings.value = {
+      data: [],
+      columns: columns.value,
+      colWidths: 150,
+      height: 270
+    }
+    // 等待 DOM 更新后重新渲染表格
+    nextTick(() => {
+      if (topHstRef.value?.hotInstance) {
+        // topHstRef.value.hotInstance.updateSettings({
+        //   columns : columns.value,
+        //   data: []
+        // })
+        // topHstRef.value.hotInstance.loadData([])
+        topHstRef.value.hotInstance.render()
+      }
+    })
+  }
+}
 const columns = ref<any[]>([
+  { 
+    type: 'text', 
+    data: 'index', 
+    title: '序号', 
+    width: 60,
+    readOnly: true,
+    renderer: (_instance: any, td: HTMLTableCellElement, row: number) => {
+      td.innerHTML = String(row + 1)
+      td.style.textAlign = 'center'
+      td.style.color = '#909399'
+      return td
+    }
+  },
   { type: 'text', data: 'name', title: '名称' },
-  { type: 'text', data: 'quotaValue', title: '定额值' },
-  { type: 'text', data: 'adjustContent', title: '调整内容' },
-  { type: 'text', data: 'adjustType', title: '调整类型', renderer: tabDialog, width: 200},
-  { type: 'text', data: 'adjustRule', title: '调整规则' }
+  { type: 'text', data: 'adjustType', title: '调整类型', renderer: 'db-dropdown', width: 200,
+    source: typeLists,
+    onAfterSelect: (_instance: any, row: number, column: number, oldValue: any, newValue: string, _optData?: any) => {
+      console.log('选择后回调:', { row, column, oldValue, newValue })
+      if(newValue == oldValue){
+        return
+      }
+    }
+  },
+  { type: 'text', data: 'adjustRule', title: '设置', renderer: settingRender, readOnly: true }
 ])
 
-const mockData = () => {
-  const types = ['人工调整', '材料调整', '机械调整', '综合调整']
-  const rules = ['系数调整', '价格调整', '数量调整', '比例调整']
-  return Array.from({ length: 10 }, (_, index) => ({
-    name: `调整项${index + 1}`,
-    quotaValue: (Math.random() * 100 + 10).toFixed(2),
-    adjustContent: `调整内容说明${index + 1}`,
-    adjustType: '',
-    adjustRule: rules[index % rules.length]
-  }))
-}
-
 const settings = {
-  data: mockData(),
+  data: [], // 初始为空，等待从接口加载
   columns: columns.value,
   colWidths: 120,
-  height: 270
+  height: 170,
+  contextMenu: {
+    items: {
+      row_above: {
+        name: '在上方插入行',
+        callback: function(_key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          this.alter('insert_row_above', selectedRow, 1)
+        },
+      },
+      row_below: {
+        name: '在下方插入行',
+        callback: function(_key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          this.alter('insert_row_below', selectedRow, 1)
+        },
+      },
+      remove_row: {
+        name: '移除行',
+        callback: function(_key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowData = this.getSourceDataAtRow(selectedRow)
+
+          if (rowData?.id) {
+            this.alter('remove_row', selectedRow, 1)
+            // 调用删除 API
+            deleteAdjustmentSetting(rowData.id).then(res => {
+              console.log('删除调整设置成功', res)
+              ElMessage.success('删除成功')
+            }).catch(err => {
+              console.error('删除调整设置失败:', err)
+              ElMessage.error('删除失败')
+            })
+          } else {
+            // 没有 ID 直接删除
+            this.alter('remove_row', selectedRow, 1)
+          }
+        },
+      }
+    }
+  },
+  afterChange(changes: any, source: string) {
+    console.log('afterChange', changes, source)
+
+    // 忽略特定来源的变更
+    if (!changes || source === 'loadData' || source === 'updateId') {
+      return
+    }
+
+    const row = changes[0][0]
+    const rowData = this.getSourceDataAtRow(row)
+
+    // 检查必填字段是否都已填写
+    if (!rowData.name || !rowData.adjustType) {
+      console.log('必填字段未完整，跳过保存')
+      return
+    }
+
+    // 检查是否选择了定额子目
+    if (!props.quotaItemId) {
+      ElMessage.error('请先选择定额子目')
+      return
+    }
+
+    // 构建保存数据
+    const saveData: any = {
+      quotaItemId: props.quotaItemId,
+      name: rowData.name || '',
+      adjustmentType: rowData.adjustType || '',
+      adjustmentRules: rowData.adjustRule ? JSON.parse(rowData.adjustRule) : {}
+    }
+
+    if (rowData.id == null) {
+      // 调用创建接口
+      console.log('afterChange-create', saveData)
+      createAdjustmentSetting(saveData).then(res => {
+        console.log('createAdjustmentSetting', res)
+        // 更新当前行ID
+        this.setDataAtRowProp(row, 'id', res, 'updateId')
+        ElMessage.success('新增成功')
+      }).catch(err => {
+        console.error('新增失败', err)
+        ElMessage.error('新增失败')
+      })
+    } else {
+      // 调用更新接口
+      saveData.id = rowData.id
+      console.log('afterChange-update', saveData)
+      updateAdjustmentSetting(saveData).then(res => {
+        console.log('updateAdjustmentSetting', res)
+        ElMessage.success('更新成功')
+      }).catch(err => {
+        console.error('更新失败', err)
+        ElMessage.error('更新失败')
+      })
+    }
+  }
 }
+// 计算属性：根据是否选择了定额子目来决定是否显示右键菜单
+const contextMenuItems = computed(() => {
+  // 如果没有选择定额子目，返回空数组（不显示右键菜单）
+  if (!props.quotaItemId) {
+    return []
+  }
+
+  // 如果选择了定额子目，返回完整的右键菜单
+  return [
+    {
+      key: 'row_above',
+      name: '新增行',
+      callback: (hotInstance: any) => {
+        // 执行新增行操作
+        hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+        //TODO 指定的tab
+        // 等待 DOM 更新后重新渲染以应用验证样式
+        nextTick(() => {
+          hotInstance.render()
+        })
+      }
+    },
+  ]
+})
+const dialogContextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      hotInstance.alter('insert_row_below', hotInstance.countRows(), 1)
+      //TODO 指定的tab
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
+
+// 监听 quotaItemId 变化
+watch(
+  () => props.quotaItemId,
+  (newQuotaItemId) => {
+    console.log('QuotaAdjustmentSetting: quotaItemId 变化:', newQuotaItemId)
+    if (newQuotaItemId) {
+      loadAdjustmentSettings(newQuotaItemId)
+    } else {
+      // 清空数据
+      adjustmentSettingsData.value = []
+      if (hstRef.value?.hotInstance) {
+        hstRef.value.hotInstance.loadData([])
+      }
+    }
+  },
+  { immediate: true }
+)
+
 watch(
   () => props.height,
   (newHeight) => {
     console.log('QuotaAdjustmentQuery newHeight', newHeight)
+    nextTick(() => {
     if (newHeight && hstRef.value?.hotInstance) {
       hstRef.value.hotInstance.updateSettings({
-        height: newHeight - 50 - 15// 减去 tabs 头部和 padding 的高度,滚动条
+        height: newHeight - 50// 减去 tabs 头部和 padding 的高度,滚动条
       })
       hstRef.value.hotInstance.render()
     }
+    })
   },
   { immediate: true }
 )
@@ -154,18 +540,20 @@ defineExpose({ hstRef })
 </script>
 
 <template>
-  <div class="w-full h-full">
-    <DbHst ref="hstRef" :settings="settings" />
+  <div class="w-full h-full" @contextmenu.prevent>
+    <DbHst ref="hstRef" :settings="settings" :contextMenuItems="contextMenuItems"/>
 
     <ElDialog
       v-model="dialogVisible"
-      title="调数类型"
-      width="50%"
+      :title="tabLabels[activeTab] || '调整设置'"
+      width="60%"
       :before-close="handleClose"
+      :destroy-on-close="true"
     >
-      <ElTabs v-model="activeTab">
-        <!-- Tab1: 调整工料机系数 -->
-        <ElTabPane label="调整工料机系数" name="tab1">
+    <DbHst v-if="dialogVisible" ref="topHstRef" :settings="dbSettings" :contextMenuItems="dialogContextMenuItems"></DbHst>
+      <!-- <ElTabs v-model="activeTab" :tab-position="'top'">
+
+        <ElTabPane v-if="activeTab === 'tab1'" label="调整工料机系数" name="tab1">
           <ElTable :data="coefficientData" border style="width: 50%">
             <ElTableColumn type="selection" width="55" />
             <ElTableColumn prop="category" label="类别" width="200" />
@@ -177,8 +565,7 @@ defineExpose({ hstRef })
           </ElTable>
         </ElTabPane>
 
-        <!-- Tab2: 动态合并定额 -->
-        <ElTabPane label="动态合并定额" name="tab2">
+        <ElTabPane v-if="activeTab === 'tab2'" label="动态合并定额" name="tab2">
           <ElTable :data="quotaMergeData" border style="width: 100%">
             <ElTableColumn prop="code" label="编码" width="120">
               <template #default="scope">
@@ -214,8 +601,8 @@ defineExpose({ hstRef })
           <ElButton @click="addRow('tab2')" style="margin-top: 10px">添加行</ElButton>
         </ElTabPane>
 
-        <!-- Tab3: 增减耗量 -->
-        <ElTabPane label="增减耗量" name="tab3">
+
+        <ElTabPane v-if="activeTab === 'tab3'" label="增减耗量" name="tab3">
           <ElTable :data="consumptionData" border style="width: 100%">
             <ElTableColumn prop="code" label="编码" width="200">
               <template #default="scope">
@@ -236,8 +623,8 @@ defineExpose({ hstRef })
           <ElButton @click="addRow('tab3')" style="margin-top: 10px">添加行</ElButton>
         </ElTabPane>
 
-        <!-- Tab4: 动态调整人材机消耗量 -->
-        <ElTabPane label="动态调整人材机消耗量" name="tab4">
+
+        <ElTabPane v-if="activeTab === 'tab4'" label="动态调整人材机消耗量" name="tab4">
           <ElTable :data="dynamicAdjustData" border style="width: 100%">
             <ElTableColumn prop="name" label="名称" width="120">
               <template #default="scope">
@@ -286,7 +673,7 @@ defineExpose({ hstRef })
           </ElTable>
           <ElButton @click="addRow('tab4')" style="margin-top: 10px">添加行</ElButton>
         </ElTabPane>
-      </ElTabs>
+      </ElTabs> -->
 
       <template #footer>
         <span class="dialog-footer">
@@ -296,7 +683,7 @@ defineExpose({ hstRef })
       </template>
   </ElDialog>
   </div>
-  
+
 </template>
 
 <style scoped>
diff --git a/apps/web-ele/src/views/database/quota/price/SubItemMaterials.vue b/apps/web-ele/src/views/database/quota/price/SubItemMaterials.vue
index 6f9e236..a42daf8 100644
--- a/apps/web-ele/src/views/database/quota/price/SubItemMaterials.vue
+++ b/apps/web-ele/src/views/database/quota/price/SubItemMaterials.vue
@@ -1,53 +1,508 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { createQuotaResource, deleteQuotaResource, getAvailableResourceList, getQuotaResourceList, updateQuotaResource } from '#/api/database/quota/index'
 import { DbHst } from '#/components/db-hst'
-
+import { useParentChildLineNestedRowsFalse } from '#/components/db-hst/nestedRows'
+import { createPopoverCellRenderer, usePopoverClickOutside } from '#/components/db-hst/popover'
+import DbHstPopover from '#/components/db-hst/popover.vue'
+import { DICT_TYPE } from '@vben/constants'
+import { getDictOptions } from '@vben/hooks'
+import type { RowEventHandlers } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { computed, h, nextTick, onMounted, reactive, ref, watch } from 'vue'
 const props = defineProps<{
   height?: number
+  quotaItemId?: number | null
 }>()
 
 const hstRef = ref<any>(null)
+//const quotaResourcesData = ref<any[]>([])
+const visible = ref(false)
+const buttonRef = ref<HTMLElement | null>()
+const popoverComponentRef = ref<any>(null)
 
-const columns = ref<any[]>([
-  { type: 'text', data: 'code', title: '编码' },
-  { type: 'text', data: 'name', title: '名称' },
-  { type: 'text', data: 'spec', title: '型号规格' },
-  { type: 'text', data: 'unit', title: '单位' },
-  { type: 'text', data: 'category', title: '类别' },
-  { type: 'text', data: 'taxRate', title: '税率' },
-  { type: 'text', data: 'basePriceExTax', title: '除税基价' },
-  { type: 'text', data: 'basePriceInTax', title: '含税基价' },
-  { type: 'text', data: 'compilePriceExTax', title: '除税编制价' },
-  { type: 'text', data: 'compilePriceInTax', title: '含税编制价' },
-  { type: 'text', data: 'quotaQuantity', title: '定额消耗量' },
-  { type: 'text', data: 'adjustQuantity', title: '调整消耗量' }
+const onClickOutside = () => {
+  popoverComponentRef.value?.popoverRef?.hide()
+}
+// 使用 popover 点击外部关闭的 Hook
+usePopoverClickOutside(visible, onClickOutside)
+
+// 分页状态管理
+const popoverPagination = reactive({
+  pageNo: 1,
+  pageSize: 20,
+  total: 0,
+  loading: false,
+  hasMore: true
+})
+
+const getTableDataList = async (_query?: any, append: boolean = false) => {
+  if (popoverPagination.loading || !props.quotaItemId) return
+  
+  popoverPagination.loading = true
+  try {
+    // 构建查询参数
+    const queryParams: { code?: string; name?: string; spec?: string } = {}
+    if (_query?.code) queryParams.code = _query.code
+    if (_query?.name) queryParams.name = _query.name
+    if (_query?.spec) queryParams.spec = _query.spec
+    
+    const res: any = await getAvailableResourceList(props.quotaItemId, queryParams)
+    console.log('getAvailableResourceList==', res)
+    
+    const dataList = Array.isArray(res) ? res : (res?.list || [])
+    const total = Array.isArray(res) ? res.length : (res?.total || 0)
+    
+    popoverPagination.total = total
+    popoverPagination.hasMore = (popoverPagination.pageNo * popoverPagination.pageSize) < popoverPagination.total
+    
+    if (append) {
+      // 追加数据（滚动加载）
+      popoverTableData.value = [...popoverTableData.value, ...dataList]
+    } else {
+      // 替换数据（首次加载或搜索）
+      popoverTableData.value = dataList
+    }
+  } finally {
+    popoverPagination.loading = false
+  }
+}
+
+// 滚动到底部加载更多
+const handleTableEndReached = () => {
+  if (popoverPagination.hasMore && !popoverPagination.loading) {
+    popoverPagination.pageNo++
+    getTableDataList({}, true) // append = true
+  }
+}
+const unitLabelByValue = computed(() => new Map(getDictOptions(DICT_TYPE.MATERIAL_UNIT, 'string').map((option) => [option.value, option.label])))
+
+const columnsStyle = {
+  borderLeft: '1px solid #e4e4e7',
+  background: '#f0f0f0',
+  color: '#373737',
+  fontWeight: 400
+}
+
+// 为 ElTableV2 定义 columns
+const popoverColumns = computed(() => [
+  { key: 'code', dataKey: 'code', title: '编码', width: 120 },
+  { key: 'name', dataKey: 'name', title: '名称', width: 150 },
+  { key: 'spec', dataKey: 'spec', title: '型号规格', width: 120 },
+  { key: 'type', dataKey: 'type', title: '类别', width: 60 },
+  { key: 'unit', dataKey: 'unit', title: '单位', width: 60, cellRenderer: ({ cellData }: { cellData: any }) => {
+      const label = cellData == null ? '' : unitLabelByValue.value.get(cellData) ?? String(cellData)
+      return h('span', label)
+    } },
+  { key: 'taxRate', dataKey: 'taxRate', title: '税率', width: 60 },
+  { key: 'taxExclBasePrice', dataKey: 'taxExclBasePrice', title: '除税基价', width: 90 },
+  { key: 'taxInclBasePrice', dataKey: 'taxInclBasePrice', title: '含税基价', width: 90 },
+  { key: 'taxExclCompilePrice', dataKey: 'taxExclCompilePrice', title: '除税编制价', width: 90 },
+  { key: 'taxInclCompilePrice', dataKey: 'taxInclCompilePrice', title: '含税编制价', width: 90 },
+].map(item => ({ 
+  ...item, 
+  style: { 
+    ...columnsStyle,
+    ...(item.key === 'taxInclCompilePrice' ? { borderRight: '1px solid #e4e4e7' } : {})
+  } 
+})))
+const rowEventHandlers: RowEventHandlers = {
+  onClick: ({ rowIndex, event, rowData }) => {
+    console.log('点击了行:', rowIndex, rowData, itemSelectPopover.value)
+    event.stopPropagation()
+    visible.value = false
+    onClickOutside()
+    
+    const { row, currentRowData, instance } = itemSelectPopover.value
+    // 使用 setDataAtRowProp 的数组格式批量更新（一次调用，避免多次渲染）
+    // 格式: [[row, prop, value], [row, prop, value], ...]
+    setTimeout(async () => {
+      instance.setDataAtRowProp([
+        [row, 'code', rowData.code || ''],
+        [row, 'name', rowData.name || ''],
+        [row, 'spec', rowData.spec || ''],
+        [row, 'unit', rowData.unit || ''],
+        [row, 'category', rowData.type || ''], // 使用 type 字段（material/labor/machine）
+        [row, 'taxRate', rowData.taxRate || 0],
+        [row, 'basePriceExTax', rowData.taxExclBasePrice || 0],
+        [row, 'basePriceInTax', rowData.taxInclBasePrice || 0],
+        [row, 'compilePriceExTax', rowData.taxExclCompilePrice || 0],
+        [row, 'compilePriceInTax', rowData.taxInclCompilePrice || 0],
+        [row, 'resourceItemId', rowData.id],
+      ], 'selectResource')
+      instance.render()
+      
+      // 如果是新行（没有ID），调用创建接口
+      if (currentRowData.id == null) {
+        try {
+          const createData = {
+            quotaItemId: props.quotaItemId,
+            resourceItemId: rowData.id,
+            dosage: currentRowData.quotaQuantity || 0,
+            attributes: {}
+          }
+          
+          const newId = await createQuotaResource(createData)
+          console.log('创建定额工料机组成成功, ID:', newId)
+          
+          // 更新行ID
+          instance.setDataAtRowProp([
+            [row, 'id', newId],
+          ], 'updateId')
+          
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('创建定额工料机组成失败:', error)
+          ElMessage.error('添加失败')
+        }
+      } else {
+        // 如果已有ID，调用更新接口
+        try {
+          const updateData = {
+            id: currentRowData.id,
+            quotaItemId: props.quotaItemId,
+            resourceItemId: rowData.id,
+            dosage: currentRowData.quotaQuantity || 0,
+            attributes: {}
+          }
+          
+          await updateQuotaResource(updateData)
+          console.log('更新定额工料机组成成功')
+          ElMessage.success('更新成功')
+        } catch (error) {
+          console.error('更新定额工料机组成失败:', error)
+          ElMessage.error('更新失败')
+        }
+      }
+    }, 200)
+  },
+}
+
+const popoverTableData = ref<any[]>([])
+const selectRender = createPopoverCellRenderer({
+  visible,
+  buttonRef,
+})
+const { load, codeRenderer, handleRowOperation } = useParentChildLineNestedRowsFalse({
+  getHotInstance: () => hstRef.value.hotInstance,
+})
+const itemSelectPopover = ref<any>()
+
+// 工料机类型映射
+const resourceTypeMap = new Map([
+  ['material', '材料'],
+  ['labor', '人工'],
+  ['machine', '机械']
 ])
 
-const mockData = () => {
-  const categories = ['人', '人机', '材', '机']
-  const units = ['工日', 't', 'm³', 'kg', 'm²']
-  return Array.from({ length: 20 }, (_, index) => ({
-    code: `SUB${String(index + 1).padStart(6, '0')}`,
-    name: `子目项${index + 1}`,
-    spec: `规格${index + 1}`,
-    unit: units[index % units.length],
-    category: categories[index % categories.length],
-    taxRate: `${(Math.random() * 5 + 8).toFixed(2)}%`,
-    basePriceExTax: (Math.random() * 1000 + 100).toFixed(2),
-    basePriceInTax: (Math.random() * 1100 + 110).toFixed(2),
-    compilePriceExTax: (Math.random() * 1200 + 120).toFixed(2),
-    compilePriceInTax: (Math.random() * 1300 + 130).toFixed(2),
-    quotaQuantity: (Math.random() * 10 + 1).toFixed(3),
-    adjustQuantity: (Math.random() * 10 + 1).toFixed(3)
-  }))
+const columns = ref<any[]>([
+  { type: 'text', data: 'code', title: '编码', renderer: codeRenderer, allowInvalid: true, autoWidth: true },
+  { 
+    type: 'text', 
+    data: 'name', 
+    title: '名称',
+    readOnly: true,
+    renderer: selectRender,
+    focusCallback: async (row: any, _col: any, _prop: any, _value: any, rowData: any, instance: any, _td: any) => {
+      // 获得焦点时加载第一页数据
+      popoverPagination.pageNo = 1
+      popoverPagination.hasMore = true
+      await getTableDataList({}, false)
+      console.log('focusCallback-popoverTableData 已加载:', popoverTableData.value)
+      itemSelectPopover.value = { row, currentRowData: rowData, instance }
+    },
+    selectCallback: async (row: any, _col: any, _prop: any, _value: any, rowData: any, instance: any, _td: any) => {
+      // 点击搜索图标时重置分页并加载第一页
+      popoverPagination.pageNo = 1
+      popoverPagination.hasMore = true
+      await getTableDataList({}, false)
+      console.log('selectCallback-popoverTableData 已更新:', popoverTableData.value)
+      itemSelectPopover.value = { row, currentRowData: rowData, instance }
+    },
+    inputCallback: async (row: any, _col: any, _prop: any, value: any, rowData: any, instance: any, _td: any) => {
+      // 输入时重置分页并根据输入值过滤数据
+      popoverPagination.pageNo = 1
+      popoverPagination.hasMore = true
+      await getTableDataList({ name: value.trim() }, false)
+      console.log('inputCallback 根据输入过滤后的数据:', popoverTableData.value)
+      itemSelectPopover.value = { row, currentRowData: rowData, instance }
+    }
+  },
+  { type: 'text', data: 'spec', title: '型号规格', readOnly: true },
+  { 
+    type: 'text', 
+    data: 'unit', 
+    title: '单位', 
+    readOnly: true,
+    renderer: function(instance: any, td: any, row: any, col: any, prop: any, value: any, cellProperties: any) {
+      // 使用字典将单位值转换为标签
+      const label = value == null ? '' : unitLabelByValue.value.get(value) ?? String(value)
+      td.innerHTML = label
+      return td
+    }
+  },
+  { 
+    type: 'text', 
+    data: 'category', 
+    title: '类别', 
+    readOnly: true,
+    renderer: function(instance: any, td: any, row: any, col: any, prop: any, value: any, cellProperties: any) {
+      // 将 resourceType 转换为中文
+      const label = value == null ? '' : resourceTypeMap.get(value) ?? String(value)
+      td.innerHTML = label
+      return td
+    }
+  },
+  { type: 'numeric', data: 'taxRate', title: '税率', readOnly: true },
+  { type: 'numeric', data: 'basePriceExTax', title: '除税基价', readOnly: true },
+  { type: 'numeric', data: 'basePriceInTax', title: '含税基价', readOnly: true },
+  { type: 'numeric', data: 'compilePriceExTax', title: '除税编制价', readOnly: true },
+  { type: 'numeric', data: 'compilePriceInTax', title: '含税编制价', readOnly: true },
+  { type: 'numeric', data: 'quotaQuantity', title: '定额消耗量' },
+  { type: 'numeric', data: 'adjustQuantity', title: '调整消耗量' },
+  { type: 'numeric', data: 'totalBasePriceExTax', title: '除税基价合价', readOnly: true },
+  { type: 'numeric', data: 'totalBasePriceInTax', title: '含税基价合价', readOnly: true },
+  { type: 'numeric', data: 'totalCompilePriceExTax', title: '除税编制价合价', readOnly: true },
+  { type: 'numeric', data: 'totalCompilePriceInTax', title: '含税编制价合价', readOnly: true },
+  { type: 'text', data: 'calcBase.formula', title: '计算基数', readOnly: true }
+])
+
+// 递归转换数据，将 mergedItems 转换为 __children
+const transformItem = (item: any): any => {
+  const transformed: any = {
+    ...item,
+    code: item.resourceCode || '', // 工料机编码
+    name: item.resourceName || '', // 工料机名称
+    spec: item.resourceSpec || '', // 型号规格
+    unit: item.resourceUnit || '', // 工料机单位
+    category: item.resourceType || '', // 类别：使用 resourceType（material/labor/machine）
+    taxRate: item.resourceTaxRate || 0, // 税率
+    basePriceExTax: item.resourceTaxExclBasePrice || 0, // 除税基价
+    basePriceInTax: item.resourceTaxInclBasePrice || 0, // 含税基价
+    compilePriceExTax: item.resourceTaxExclCompilePrice || 0, // 除税编制价
+    compilePriceInTax: item.resourceTaxInclCompilePrice || 0, // 含税编制价
+    quotaQuantity: item.dosage || 0, // 定额消耗量
+    adjustQuantity: item.attributes?.adjustQuantity || 0, // 调整消耗量
+    // 虚拟字段：合价 = 单价 × 定额消耗量
+    totalBasePriceExTax: Number(((item.resourceTaxExclBasePrice || 0) * (item.dosage || 0)).toFixed(2)), // 除税基价合价
+    totalBasePriceInTax: Number(((item.resourceTaxInclBasePrice || 0) * (item.dosage || 0)).toFixed(2)), // 含税基价合价
+    totalCompilePriceExTax: Number(((item.resourceTaxExclCompilePrice || 0) * (item.dosage || 0)).toFixed(2)), // 除税编制价合价
+    totalCompilePriceInTax: Number(((item.resourceTaxInclCompilePrice || 0) * (item.dosage || 0)).toFixed(2)), // 含税编制价合价
+    calcBase: item.calcBase || {}, // 计算基数
+    resourceItemId: item.resourceItemId, // 保存原始工料机项ID
+    quotaItemId: item.quotaItemId, // 保存定额子目ID
+    attributes: item.attributes || {},
+    isMerged: item.isMerged,
+    parent: false
+  }
+  // 如果存在 mergedItems，递归转换为 __children
+  if (item.mergedItems && Array.isArray(item.mergedItems) && item.mergedItems.length > 0) {
+    transformed.__children = item.mergedItems.map(transformItem)
+  }
+
+  return transformed
 }
 
+// 加载工料机组成列表
+const loadQuotaResources = async (quotaItemId: number) => {
+  try {
+    console.log('SubItemMaterials: 开始加载工料机组成列表, quotaItemId:', quotaItemId)
+    const res = await getQuotaResourceList(quotaItemId)
+    console.log('SubItemMaterials: 工料机组成列表原始数据:', res)
+    
+    if (res && Array.isArray(res)) {
+      // 转换数据格式以匹配表格列，并递归处理 mergedItems
+      const transformedData = res.map(transformItem)
+       // 计算合价
+      transformedData.forEach(item => {
+        // 除税基价合价 = 除税基价 * 定额消耗量
+        item.priceExTax5 = Number((item.priceExTax * item.priceExTax3).toFixed(2))
+        
+        // 如果有损耗率，需要考虑损耗
+        const lossRate = item.attributes?.loss_rate || 0
+        if (lossRate > 0) {
+          item.priceExTax5 = Number((item.priceExTax * item.priceExTax3 * (1 + lossRate)).toFixed(2))
+        }
+        item.parent = true
+      })
+      //quotaResourcesData.value = transformedData
+      console.log('SubItemMaterials: 工料机组成列表转换后数据:', transformedData)
+      load(transformedData)
+    } else {
+      console.warn('SubItemMaterials: 工料机组成列表数据为空或格式不正确')
+      load([])
+    }
+  } catch (error) {
+    console.error('SubItemMaterials: 加载工料机组成列表失败:', error)
+    load([])
+  }
+}
+let rowSchema: any = {__id: null, level: null,__children: [], calcBase: {}}
+    
+// 根据 columns 的 data 字段生成对象结构
+columns.value.forEach((col: any) => {
+  if (col.data && col.data !== 'level' && col.data !== '__children' && col.data !== '__id') {
+    rowSchema[col.data] = null
+  }
+})
 const settings = {
-  data: mockData(),
+  data: [], // 初始为空，等待从接口加载
+  dataSchema: rowSchema,
   columns: columns.value,
   colWidths: 120,
-  height: 270
+  height: 270,
+  rowHeaders: false,
+  nestedRows: false,
+  bindRowsWithHeaders: true,
+  contextMenu: {
+    items: {
+      custom_row_above: {
+        name: '在上方插入行',
+        callback: function() {
+          handleRowOperation(this, 'above')
+        }
+      },
+      custom_row_below: {
+        name: '在下方插入行',
+        callback: function() {
+          handleRowOperation(this, 'below')
+        }
+      },
+      // separator1: '---------',
+      // custom_add_child: {
+      //   name: '添加子行',
+      //   callback: function() {
+      //     handleRowOperation(this, 'child')
+      //   }
+      // },
+      separator2: '---------',
+      remove_row: {
+        name: '删除行',
+        callback: function() {
+          let selected = this.getSelected()
+          const row = selected[0][0]
+          const rowData = this.getSourceDataAtRow(row)
+         
+          // console.log(rowData)
+          if (rowData?.id) {
+            // 调用删除 API
+            deleteQuotaResource(rowData.id).then(res => {
+              console.log('删除定额工料机组成成功', res)
+              ElMessage.success('删除成功')
+               handleRowOperation(this, 'delete')
+            }).catch(err => {
+              console.error('删除定额工料机组成失败:', err)
+              ElMessage.error('删除失败')
+            })
+          } else {
+            // 没有 ID 直接删除
+             handleRowOperation(this, 'delete')
+          }
+        }
+      },
+      // separator3: '---------',
+      // undo: {},
+      // redo: {}
+    }
+  },
+  afterChange(changes: any, source: string) {
+    console.log('afterChange', changes, source)
+    
+    // 忽略特定来源的变更
+    if (!changes || source === 'loadData' || source === 'updateId' || source === 'selectResource' || source === 'updateTotal') {
+      return
+    }
+    
+    // 只处理 quotaQuantity 和 adjustQuantity 字段的变更
+    changes.forEach(([row, prop, oldValue, newValue]: any) => {
+      if (prop === 'quotaQuantity' || prop === 'adjustQuantity') {
+        const rowData = this.getSourceDataAtRow(row)
+        
+        // 当定额消耗量改变时，重新计算合价
+        if (prop === 'quotaQuantity') {
+          const dosage = newValue || 0
+          const basePriceExTax = rowData.basePriceExTax || 0
+          const basePriceInTax = rowData.basePriceInTax || 0
+          const compilePriceExTax = rowData.compilePriceExTax || 0
+          const compilePriceInTax = rowData.compilePriceInTax || 0
+          
+          // 更新合价字段
+          this.setDataAtRowProp([
+            [row, 'totalBasePriceExTax', Number((basePriceExTax * dosage).toFixed(2))],
+            [row, 'totalBasePriceInTax', Number((basePriceInTax * dosage).toFixed(2))],
+            [row, 'totalCompilePriceExTax', Number((compilePriceExTax * dosage).toFixed(2))],
+            [row, 'totalCompilePriceInTax', Number((compilePriceInTax * dosage).toFixed(2))]
+          ], 'updateTotal')
+        }
+        
+        // 如果有ID，调用更新接口
+        if (rowData?.id && props.quotaItemId) {
+          const updateData = {
+            id: rowData.id,
+            quotaItemId: props.quotaItemId,
+            resourceItemId: rowData.resourceItemId,
+            dosage: rowData.quotaQuantity || 0,
+            attributes: {
+              adjustQuantity: rowData.adjustQuantity || 0
+            }
+          }
+          
+          updateQuotaResource(updateData).then(() => {
+            console.log('更新定额消耗量成功')
+          }).catch(err => {
+            console.error('更新定额消耗量失败:', err)
+            ElMessage.error('更新失败')
+          })
+        }
+      }
+    })
+  }
 }
+// 计算属性：根据是否选择了定额子目来决定是否显示右键菜单
+const contextMenuItems = computed(() => {
+  // 如果没有选择定额子目，返回空数组（不显示右键菜单）
+  if (!props.quotaItemId) {
+    return []
+  }
+  
+  // 如果选择了定额子目，返回完整的右键菜单
+  return [
+    {
+      key: 'row_above',
+      name: '新增行',
+      callback: (hotInstance: any) => {
+        // 执行新增行操作
+        handleRowOperation(hotInstance, 'append')
+        
+        // 等待 DOM 更新后重新渲染以应用验证样式
+        nextTick(() => {
+          hotInstance.render()
+        })
+      }
+    }
+  ]
+})
+const clear = ()=>{
+  load([])
+}
+// 监听 quotaItemId 变化
+/*watch(
+  () => props.quotaItemId,
+  (oldQuotaItemId,newQuotaItemId) => {
+    console.log('SubItemMaterials: quotaItemId 变化:', oldQuotaItemId,newQuotaItemId)
+    if (newQuotaItemId) {
+      // loadQuotaResources(newQuotaItemId)
+    } else {
+      // 清空数据
+      // quotaResourcesData.value = []
+      if (hstRef.value?.hotInstance) {
+        // hstRef.value.hotInstance.loadData([])
+        load([])
+      }
+      
+    }
+  },
+  { immediate: true,deep: true }
+)*/
 
 watch(
   () => props.height,
@@ -55,7 +510,7 @@ watch(
     console.log('SubItemMaterials newHeight', newHeight)
     if (newHeight && hstRef.value?.hotInstance) {
       hstRef.value.hotInstance.updateSettings({
-        height: newHeight - 50 - 15// 减去 tabs 头部和 padding 的高度,滚动条
+        height: newHeight - 50// 减去 tabs 头部和 padding 的高度,滚动条
       })
       hstRef.value.hotInstance.render()
     }
@@ -64,17 +519,29 @@ watch(
 )
 
 onMounted(() => {
-  console.log('SubItemMaterials mounted')
+  console.log('SubItemMaterials mounted, quotaItemId:', props.quotaItemId)
+  if(props.quotaItemId){
+    loadQuotaResources(props.quotaItemId)
+  }
 })
 
-defineExpose({ hstRef })
+defineExpose({ hstRef, loadQuotaResources, clear })
 </script>
 
 <template>
-  <div class="w-full h-full">
-    <DbHst ref="hstRef" :settings="settings" />
+  <div class="w-full h-full" @contextmenu.prevent>
+    <DbHst ref="hstRef" :settings="settings" :contextMenuItems="contextMenuItems" />
   </div>
+  <DbHstPopover
+    ref="popoverComponentRef"
+    :visible="visible"
+    :button-ref="buttonRef"
+    :columns="popoverColumns"
+    :data="popoverTableData"
+    :row-event-handlers="rowEventHandlers"
+    @end-reached="handleTableEndReached"
+  />
 </template>
 
 <style scoped>
-</style>
+</style>
\ No newline at end of file
diff --git a/apps/web-ele/src/views/database/quota/rate.vue b/apps/web-ele/src/views/database/quota/rate.vue
index 7ec0d4b..645d574 100644
--- a/apps/web-ele/src/views/database/quota/rate.vue
+++ b/apps/web-ele/src/views/database/quota/rate.vue
@@ -1,57 +1,286 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref, nextTick, createVNode, render, watch,computed } from 'vue'
-import { Page } from '@vben/common-ui';
-import { ElSplitter,ElSplitterPanel,ElCard,ElDialog,ElTable,ElTableColumn,ElButton } from 'element-plus';
-import { useElementSize } from '@vueuse/core'
-import { DbTree } from '#/components/db-tree';
 import { DbHst } from '#/components/db-hst';
-import { handleRowOperation, codeRenderer } from '#/components/db-hst/tree'
-import { manualRowMoveRenderer } from '#/components/db-hst/sort'
+import { manualRowMoveRenderer } from '#/components/db-hst/sort';
+
+import { applyAutoFitColum, useParentChildLineNestedRowsFalse } from '#/components/db-hst/nestedRows';
+import { DbTree } from '#/components/db-tree';
+import { Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { useElementSize } from '@vueuse/core';
+import { ElButton, ElCard, ElDialog, ElDrawer, ElMessage, ElSplitter, ElSplitterPanel, ElTreeV2 } from 'element-plus';
+import { computed, nextTick, onMounted, ref } from 'vue';
+// 导入定额API
+import {
+    configValueRules,
+    createFieldLabel,
+    createQuotaCatalogItem,
+    createRateItem,
+    createRateModeNode,
+    deleteQuotaCatalogItem,
+    deleteRateItem,
+    getFieldLabelList,
+    getQuotaCatalogItemTree,
+    getQuotaCatalogTreeByRateModeNode,
+    getQuotaRateItemTree,
+    getRateFieldList,
+    moveRateItemNode,
+    saveRateField,
+    updateFieldBinding,
+    updateFieldLabel,
+    updateRateItem
+} from '#/api/database/quota/index';
 
 const containerRef = ref<HTMLElement | null>(null)
 const { height: containerHeight } = useElementSize(containerRef)
 
-type Tree = { id: string; label: string; children?: Tree[] }
-const treeData = ref<Tree[]>([
-  {
-    id: '1',
-    label: '单价费率库',
-    children: [
-      {
-        id: '2',
-        label: '广东',
-        children: [
-          { id: '3', label: '广东工民建工料机定额' },
-          { id: '4', label: '广东公路工料机定额' },
-          { id: '5', label: '广东水利工料机定额' }
-        ]
-      }
-    ]
-  },
-  {
-    id: '11',
-    label: '单价费率库2',
-    children: [
-      {
-        id: '12',
-        label: '广西',
-        children: [
-          { id: '13', label: '工料机1费率库' },
-          { id: '14', label: '工料机2费率库' },
-          { id: '15', label: '工料机3费率库' }
-        ]
-      }
-    ]
+type Tree = { id: string; label: string; children?: Tree[]; [key: string]: any }
+const treeData = ref<Tree[]>([])
+
+// 转换后端数据为树形结构
+const transformTreeData = (data: any[]): Tree[] => {
+  if (!data || !Array.isArray(data)) {
+    console.warn('transformTreeData: 数据不是数组', data)
+    return []
   }
-])
 
+  return data.map(item => {
+    const treeNode: Tree = {
+      ...item, // 保留所有原始属性
+      id: String(item.id),
+      label: item.name || item.label || '未命名',
+    }
 
-// 自定义渲染器：根据checkbox状态显示'更多'按钮
-const settingRenderer = (instance: any, td: HTMLElement, row: number, col: number, prop: string, value: any, cellProperties: any) => {
-  td.innerHTML = ''
-  const rowData = instance.getSourceDataAtRow(row)
+    // 只有当 children 存在且长度大于 0 时才递归处理
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      treeNode.children = transformTreeData(item.children)
+    }
+
+    return treeNode
+  })
+}
+
+// 加载定额专业树（第一层）
+const loadCategoryTree = async () => {
+  try {
+    const res = await getQuotaCatalogItemTree()
+    console.log('定额专业树原始数据:', res)
+    treeData.value = transformTreeData(res)
+    console.log('定额专业树转换后数据:', treeData.value)
+  } catch (error) {
+    console.error('加载定额专业树失败:', error)
+  }
+}
+
+// 抽屉相关
+const drawer = ref(false)
+const drawerTreeRef = ref<InstanceType<typeof ElTreeV2>>()
+const currentFieldName = ref('')
+const currentFieldIndex = ref(0)
+const currentRateModeNodeId = ref<number | string | null>(null)
+
+// 树形数据 - 从接口加载
+const drawerTreeData = ref<any[]>([])
+
+// 加载抽屉树数据
+const loadDrawerTreeData = async () => {
+  if (!currentRateModeNodeId.value) {
+    console.warn('未设置费率模式节点ID')
+    return
+  }
+
+  try {
+    const data = await getQuotaCatalogTreeByRateModeNode(currentRateModeNodeId.value)
+    console.log('加载抽屉树数据:', data)
+
+    // 转换为 ElTreeV2 需要的格式，并处理禁用逻辑
+    const transformToTreeData = (items: any[]): any[] => {
+      return items.map(item => {
+        // 检查该节点是否被其他字段绑定
+        const boundByOtherFields = item.boundFieldIndexes &&
+          item.boundFieldIndexes.length > 0 &&
+          !item.boundFieldIndexes.includes(currentFieldIndex.value)
+
+        return {
+          id: String(item.id),
+          label: item.name,
+          disabled: boundByOtherFields,  // 如果被其他字段绑定，则禁用
+          children: item.children && item.children.length > 0
+            ? transformToTreeData(item.children)
+            : undefined
+        }
+      })
+    }
+
+    drawerTreeData.value = transformToTreeData(data)
+
+    // 等待树渲染完成后设置选中状态
+    await nextTick()
+
+    if (drawerTreeRef.value) {
+      // 先清空所有选中状态
+      drawerTreeRef.value.setCheckedKeys([])
+
+      // 设置已选中的节点
+      const fieldConfig = fieldConfigs.value[currentFieldName.value]
+      if (fieldConfig?.bindingIds && fieldConfig.bindingIds.length > 0) {
+        const checkedKeys = fieldConfig.bindingIds.map(id => String(id))
+        drawerTreeRef.value.setCheckedKeys(checkedKeys)
+        console.log('已设置选中节点:', checkedKeys)
+      } else {
+        console.log('没有已保存的绑定节点')
+      }
+    }
+  } catch (error) {
+    console.error('加载抽屉树数据失败:', error)
+    ElMessage.error('加载定额子目树失败')
+  }
+}
+
+const treeProps = {
+  value: 'id',
+  label: 'label',
+  children: 'children'
+}
+
+// 存储字段配置（从接口加载）- 必须在 generateDialogColumns 之前定义
+const fieldConfigs = ref<Record<string, { label: string; labelId?: number; bindingIds: number[] }>>({})
+
+// 计算当前字段的标签名称
+const currentFieldLabel = computed(() => {
+  if (!currentFieldName.value) return ''
+  const fieldConfig = fieldConfigs.value[currentFieldName.value]
   
-  if (rowData && rowData.priceExTax) {
+  // 如果有自定义标签，使用标签
+  if (fieldConfig?.label) {
+    return fieldConfig.label
+  }
+  
+  // 否则从 fieldKey 提取索引，显示为"字段N"
+  const match = currentFieldName.value.match(/field(\d+)/)
+  if (match) {
+    return `字段${match[1]}`
+  }
+  
+  return currentFieldName.value
+})
+
+// 打开字段配置抽屉
+const openFieldDrawer = (fieldKey: string) => {
+  currentFieldName.value = fieldKey
+  // 从 fieldKey 中提取字段索引（例如 "field1" -> 1）
+  const match = fieldKey.match(/field(\d+)/)
+  if (match) {
+    currentFieldIndex.value = Number.parseInt(match[1])
+  }
+
+  // 从当前选中的树节点获取费率模式节点ID
+  // 这里需要从 treeHandleSelect 中保存的节点信息获取
+  if (currentRateModeNodeId.value) {
+    loadDrawerTreeData()
+  }
+
+  drawer.value = true
+}
+
+// 保存字段绑定
+const saveFieldBinding = async () => {
+  // 1. 获取树组件的选中节点
+  if (!drawerTreeRef.value) {
+    ElMessage.error('树组件未初始化')
+    return
+  }
+
+  const checkedKeys = drawerTreeRef.value.getCheckedKeys() as string[]
+  console.log('选中的节点:', checkedKeys)
+
+  // 2. 验证费率模式节点ID
+  if (!currentRateModeNodeId.value) {
+    ElMessage.error('未选择费率模式节点')
+    return
+  }
+
+  try {
+    // 3. 调用绑定接口（基于费率模式节点，影响所有费率项）
+    // 注意：保持字符串格式，避免大整数精度丢失
+    await updateFieldBinding(
+      currentRateModeNodeId.value,
+      currentFieldIndex.value,
+      checkedKeys  // 直接传递字符串数组
+    )
+
+    // 4. 更新本地配置（保持字符串格式）
+    const fieldConfig = fieldConfigs.value[currentFieldName.value]
+    if (fieldConfig) {
+      fieldConfig.bindingIds = checkedKeys.map(k => Number(k))  // 本地配置可以转换
+    }
+
+    console.log('保存字段绑定成功:', {
+      catalogItemId: currentRateModeNodeId.value,
+      fieldIndex: currentFieldIndex.value,
+      bindingIds: checkedKeys
+    })
+
+    ElMessage.success('保存成功')
+    drawer.value = false
+  } catch (error) {
+    console.error('保存字段绑定失败:', error)
+    ElMessage.error('保存失败')
+  }
+}
+
+// 生成列配置
+const generateColumns = () => {
+  const columns = [...topColumns.value]
+
+  // 添加20个字段列
+  for (let i = 1; i <= 20; i++) {
+    columns.push({
+      data: `field${i}`,
+      type: 'text',
+      title: `字段${i}`,
+      // 动态字段的可编辑性由 cells 函数控制
+    })
+  }
+
+  return columns
+}
+
+// 生成弹窗列配置
+const generateDialogColumns = () => {
+  const columns = [...dialogColumns.value]
+
+  // 添加20个字段列，使用动态标签
+  for (let i = 1; i <= 20; i++) {
+    const fieldKey = `field${i}`
+    const fieldConfig = fieldConfigs.value[fieldKey]
+    const fieldLabel = fieldConfig?.label || `字段${i}`
+
+    columns.push({
+      data: fieldKey,
+      type: 'text',
+      title: fieldLabel
+    })
+  }
+
+  return columns
+}
+// 自定义渲染器：根据 isEditable 显示'更多'按钮
+const settingRenderer = (instance: any, td: HTMLElement, rowIndex: number) => {
+  td.innerHTML = ''
+  td.style.textAlign = 'center'
+  const rowData = instance.getSourceDataAtRow(rowIndex)
+
+  console.log('settingRenderer - rowIndex:', rowIndex, 'rowData:', {
+    id: rowData?.id,
+    isEditable: rowData?.isEditable,
+    valueMode: rowData?.valueMode,
+    nodeType: rowData?.nodeType
+  })
+
+  // 当 isEditable 为 true 时显示"更多"按钮（用于配置动态规则）
+  // 当 isEditable 为 false 时不显示按钮（字段可直接录入）
+  if (rowData && rowData.isEditable === true) {
     const link = document.createElement('a')
     link.textContent = '更多'
     link.style.color = '#409eff'
@@ -59,33 +288,158 @@ const settingRenderer = (instance: any, td: HTMLElement, row: number, col: numbe
     link.style.textDecoration = 'underline'
     link.onclick = (e) => {
       e.preventDefault()
-      openDialog(row)
+      openDialog(rowIndex)
     }
     td.appendChild(link)
   }
-  
+
+  return td
+}
+const { load,codeRenderer,levelRenderer, handleRowOperation: baseHandleRowOperation, flatIndex } = useParentChildLineNestedRowsFalse({
+  getHotInstance: () => topHstRef.value.hotInstance,
+})
+
+// 重写 handleRowOperation，在插入子项时立即创建后端记录
+const handleRowOperation = async (hot: any, type: 'above' | 'below' | 'child'| 'append'|'delete') => {
+  // 如果是插入子项，先创建后端记录
+  if (type === 'child') {
+    const selection = hot.getSelectedLast?.() ?? hot.getSelected?.()?.[0]
+    if (!selection) return
+
+    const [row] = selection as [number, number, number, number]
+    const index = flatIndex.value
+    if (!index || !index.metaByRow || !index.metaByRow[row]) return
+
+    const meta = index.metaByRow[row]
+    const parentId = meta.node.id
+
+    if (!parentId) {
+      ElMessage.error('父节点ID不存在，无法创建子项')
+      return
+    }
+
+    if (!currentRateModeNodeId.value) {
+      ElMessage.error('未选择费率模式节点')
+      return
+    }
+
+    try {
+      // 调用后端API创建子项
+      const createData: any = {
+        catalogItemId: currentRateModeNodeId.value,
+        parentId: parentId,
+        name: '新子项',  // 默认名称
+        nodeType: 'value',  // 创建数值节点，用于配置字段值
+        isEditable: false
+      }
+
+      console.log('创建子项:', createData)
+      const result = await createRateItemApi(createData)
+      const newId = result.data || result
+      console.log('创建成功，ID:', newId)
+
+      ElMessage.success('创建成功')
+
+      // 重新加载数据
+      if (currentRateModeNodeId.value) {
+        await treeHandleSelect({ id: String(currentRateModeNodeId.value) } as Tree)
+      }
+    } catch (error) {
+      console.error('创建子项失败:', error)
+      ElMessage.error('创建失败')
+    }
+    return
+  }
+
+  // 如果是删除操作，先调用后端 API
+  if (type === 'delete') {
+    const selection = hot.getSelectedLast?.() ?? hot.getSelected?.()?.[0]
+    if (!selection) return
+
+    const [row] = selection as [number, number, number, number]
+    const rowData = hot.getSourceDataAtRow(row)
+
+    if (!rowData || !rowData.id) {
+      ElMessage.warning('该行没有ID，无法删除')
+      return
+    }
+
+    try {
+      // 调用后端 API 删除
+      await deleteRateItem(rowData.id)
+      console.log('删除成功:', rowData.id)
+      ElMessage.success('删除成功')
+
+      // 重新加载数据
+      if (currentRateModeNodeId.value) {
+        await treeHandleSelect({ id: String(currentRateModeNodeId.value) } as Tree)
+      }
+    } catch (error) {
+      console.error('删除失败:', error)
+      ElMessage.error('删除失败')
+    }
+    return
+  }
+
+  // 其他操作使用基础实现
+  baseHandleRowOperation(hot, type)
+}
+// 自定义渲染器：根据 nodeType 决定是否显示复选框
+const isEditableRenderer = (instance: any, td: HTMLElement, row: number, col: number, prop: any, value: any) => {
+  td.innerHTML = ''
+  td.style.textAlign = 'center'
+  const rowData = instance.getSourceDataAtRow(row)
+
+  // 只有 directory 节点才显示复选框
+  if (rowData && rowData.nodeType === 'directory') {
+    const checkbox = document.createElement('input')
+    checkbox.type = 'checkbox'
+    checkbox.checked = value === true
+    checkbox.style.cursor = 'pointer'
+
+    // 点击复选框时更新数据
+    checkbox.addEventListener('change', (e) => {
+      const checked = (e.target as HTMLInputElement).checked
+      instance.setDataAtRowProp(row, prop, checked, 'edit')
+      
+      // 刷新该行的虚拟字段列（field1-field20），以更新样式
+      nextTick(() => {
+        // 获取字段列的索引（假设从第6列开始是field1）
+        for (let i = 1; i <= 20; i++) {
+          const fieldCol = instance.propToCol(`field${i}`)
+          if (fieldCol !== null && fieldCol !== undefined) {
+            instance.render()
+            break // 只需要触发一次 render
+          }
+        }
+      })
+    })
+
+    td.appendChild(checkbox)
+  }
+  // value 节点不显示任何内容
+
   return td
 }
 
 const topColumns = ref<any[]>([
 {type:'text',data:'sort',title:'⇅', renderer: manualRowMoveRenderer,
-  width: 40,
     readOnly: true,
     editor: false,
 },
-{type:'text',data:'code',title:'编码', renderer: codeRenderer},
-{type:'text',data:'name',title:'费率项'},
-{type:'text',data:'unit',title:'费率代号(%)'},
-{type:'checkbox',data:'priceExTax',title:'埴',width: 40},
-{type:'text',data:'priceInTax',title:'设置',width: 60, renderer: settingRenderer, readOnly: true}
+{type:'text',data:'number',title:'序号', readOnly: true},
+{type:'text',data:'name',title:'费率项', renderer: codeRenderer, autoWidth:true, allowInvalid: true,},
+{type:'text',data:'rateCode',title:'费率代号(%)'},
+{type:'text',data:'isEditable',title:'填', renderer: isEditableRenderer, readOnly: true},
+{type:'text',data:'priceInTax',title:'设置', renderer: settingRenderer, readOnly: true}
 ])
 
 
 const topHstRef = ref<any>(null)
-let rowSchema: any = {}
+let rowSchema: any = {__id: null,level: null, __children: []}
 // 根据 columns 的 data 字段生成对象结构
 topColumns.value.forEach((col: any) => {
-  if (col.data ) {
+  if (col.data && col.data !== 'level' && col.data !== '__children' && col.data !== '__id') {
     rowSchema[col.data] = null
   }
 })
@@ -93,118 +447,1041 @@ topColumns.value.forEach((col: any) => {
 // Dialog相关状态
 const dialogVisible = ref(false)
 const currentRow = ref<number>(0)
-const dialogTableData = ref<any[]>([
-  { base: '基数1', method: '小于等于', earthwork: '10', stonework: '20', transport: '30', pavement: '40', col1: '', col2: '' },
-  { base: '基数2', method: '每增加', earthwork: '15', stonework: '25', transport: '35', pavement: '45', col1: '', col2: '' }
+const currentRowName = ref<string>('')
+const dialogHstRef = ref<any>(null)
+
+// 弹窗表格列配置
+const dialogColumns = ref<any[]>([
+  { type: 'text', data: 'seq', title: '序号', width: 60 },
+  { type: 'text', data: 'threshold', title: '基数', width: 100 },
+  {
+    type: 'text',
+    data: 'compareType',
+    title: '比较类型',
+    width: 100,
+    renderer: 'db-dropdown',
+    source: getDictOptions(DICT_TYPE.RATE_SETTING_VALUE_METHOD, 'string')
+  },
+  // 暂时屏蔽步长和基准阈值字段（默认使用阶梯规则）
+  // { type: 'text', data: 'step', title: '步长(万元)', width: 100 },
+  // { type: 'text', data: 'baseThreshold', title: '基准阈值', width: 100 },
 ])
 
-const openDialog = (row: number) => {
-  currentRow.value = row
-  dialogVisible.value = true
+// 弹窗表格数据
+const dialogTableData = ref<any[]>([])
+
+// 弹窗表格 schema
+let dialogRowSchema: any = {}
+dialogColumns.value.forEach((col: any) => {
+  if (col.data) {
+    dialogRowSchema[col.data] = null
+  }
+})
+
+// 弹窗表格配置
+let dialogDbSettings = {
+  data: dialogTableData.value,
+  dataSchema: dialogRowSchema,
+  colWidths: 80,
+  columns: generateDialogColumns(),
+  colHeader: false,
+  rowHeaders: false,
+  height: 300,
+  contextMenu: {
+    items: {
+      add_row: {
+        name: '添加行',
+        callback: function(this: any, _key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          const rowCount = this.countRows()
+
+          // 在选中行下方插入新行
+          this.alter('insert_row_below', selectedRow, 1)
+
+          // 设置新行的默认值
+          const newRowIndex = selectedRow + 1
+          this.setDataAtRowProp(newRowIndex, 'seq', rowCount + 1)
+          this.setDataAtRowProp(newRowIndex, 'compareType', 'lte')
+          this.setDataAtRowProp(newRowIndex, 'ruleType', 'tier')
+        },
+      },
+      remove_row: {
+        name: '删除行',
+        callback: function(this: any, _key: string, selection: any[]) {
+          const selectedRow = selection[0].start.row
+          this.alter('remove_row', selectedRow, 1)
+        },
+      }
+    }
+  },
 }
 
-const topMock = ()=>{
-    // 生成父子级模拟数据
-    const mockData: any[] = []
-    
-    // 生成5个父级数据
-    for (let i = 1; i <= 5; i++) {
-      const parent = {
-        code: `FL${String(i).padStart(6, '0')}`,
-        name: `费率项目${i}`,
-        unit: `${(Math.random() * 15 + 1).toFixed(2)}`,
-        priceExTax: i % 2 === 0, // checkbox值改为boolean
-        priceInTax: '',
-        __children: [] as any[]
+// 保存动态取值规则
+const saveDialogData = async () => {
+  if (!dialogHstRef.value?.hotInstance) return
+
+  const dialogData = dialogHstRef.value.hotInstance.getSourceData()
+  const rowData = topHstRef.value?.hotInstance?.getSourceDataAtRow(currentRow.value)
+
+  if (!rowData || !rowData.id) {
+    ElMessage.error('未找到费率项数据')
+    return
+  }
+
+  console.log('saveDialogData: 开始保存', {
+    rowIndex: currentRow.value,
+    rowId: rowData.id,
+    dialogData
+  })
+
+  // 分离阶梯规则和增量规则
+  const tiers: any[] = []
+  const increments: any[] = []
+
+  dialogData.forEach((item: any) => {
+    // 只处理阶梯规则（已屏蔽增量规则）
+    if (item.ruleType === 'tier' || !item.ruleType) {
+      const tier: any = {
+        seq: item.seq || 0,
+        threshold: item.threshold || 0,
+        compareType: item.compareType || 'lte',
+        fieldValues: {}
       }
-      
-      // 为每个父级生成3-5个子级
-      const childCount = Math.floor(Math.random() * 3) + 3
-      for (let j = 1; j <= childCount; j++) {
-        const child = {
-          code: `FL${String(i).padStart(6, '0')}-${String(j).padStart(3, '0')}`,
-          name: `费率子项${i}-${j}`,
-          unit: `${(Math.random() * 15 + 1).toFixed(2)}`,
-          priceExTax: j % 2 === 1, // checkbox值改为boolean
-          priceInTax: ''
+
+      // 提取字段值
+      for (let i = 1; i <= 20; i++) {
+        const fieldKey = `field${i}`
+        if (item[fieldKey] !== null && item[fieldKey] !== undefined && item[fieldKey] !== '') {
+          tier.fieldValues[i] = item[fieldKey]
         }
-        parent.__children.push(child)
       }
-      
-      mockData.push(parent)
+
+      tiers.push(tier)
+    } else if (item.ruleType === 'increment') {
+      const increment: any = {
+        seq: item.seq,
+        step: item.step,
+        baseThreshold: item.baseThreshold,
+        fieldIncrements: {}
+      }
+
+      // 提取字段增量
+      for (let i = 1; i <= 20; i++) {
+        const fieldKey = `field${i}`
+        if (item[fieldKey] !== null && item[fieldKey] !== undefined && item[fieldKey] !== '') {
+          increment.fieldIncrements[i] = item[fieldKey]
+        }
+      }
+
+      increments.push(increment)
     }
-    
-    return mockData;
+  })
+
+  console.log('saveDialogData: 提取的规则', { tiers, increments })
+
+  try {
+    // 调用 API 保存到后端
+    await configValueRules({
+      rateItemId: rowData.id,
+      tiers: tiers,
+      increments: increments.length > 0 ? increments : undefined
+    })
+
+    console.log('saveDialogData: API保存成功')
+
+    // 更新本地数据 - 使用 setDataAtRowProp 确保 Handsontable 检测到变化
+    const hot = topHstRef.value?.hotInstance
+    if (hot) {
+      // 构建新的 settings 对象
+      const newSettings = {
+        ...(rowData.settings || {}),
+        valueRules: {
+          tiers: tiers,
+          ...(increments.length > 0 ? { increments } : {})
+        }
+      }
+
+      // 使用 setDataAtRowProp 更新，触发 Handsontable 的变更检测
+      hot.setDataAtRowProp(currentRow.value, 'settings', newSettings, 'updateId')
+      hot.setDataAtRowProp(currentRow.value, 'valueMode', 'dynamic', 'updateId')
+
+      console.log('saveDialogData: 本地数据已更新', {
+        rowIndex: currentRow.value,
+        newSettings
+      })
+    }
+
+    dialogVisible.value = false
+    ElMessage.success('保存成功')
+  } catch (error) {
+    console.error('保存动态规则失败:', error)
+    ElMessage.error('保存失败')
+  }
 }
-let topDbSettings = {
-  data: topMock(),
-  dataSchema: rowSchema,
-  colWidths: 120,
-  columns: topColumns.value,
-  manualRowMove: true,
-  rowHeaders: false,
-  nestedRows: true,
-  bindRowsWithHeaders: true,
-  afterChange: (changes: any, source: string) => {
-    if (source === 'edit' && changes) {
-      changes.forEach(([row, prop]: [number, string]) => {
-        if (prop === 'priceExTax' && topHstRef.value?.hotInstance) {
-          // 当checkbox改变时，重新渲染设置列
-          topHstRef.value.hotInstance.render()
+
+const openDialog = (rowIndex: number) => {
+  currentRow.value = rowIndex
+  const rowData = topHstRef.value?.hotInstance?.getSourceDataAtRow(rowIndex)
+
+  if (!rowData) {
+    console.warn('openDialog: 未找到行数据', rowIndex)
+    return
+  }
+
+  // 设置当前编辑的费率项名称
+  currentRowName.value = rowData.name || `费率项 ${rowIndex + 1}`
+
+  console.log('openDialog: 打开弹窗', {
+    rowIndex,
+    rowId: rowData.id,
+    rowName: currentRowName.value,
+    settings: rowData.settings,
+    valueRules: rowData.settings?.valueRules
+  })
+
+  // 加载动态取值规则到弹窗表格
+  const dialogData: any[] = []
+
+  if (rowData.settings?.valueRules) {
+    const { tiers, increments } = rowData.settings.valueRules
+
+    console.log('openDialog: 提取规则', { tiers, increments })
+
+    // 处理阶梯规则
+    if (tiers && Array.isArray(tiers)) {
+      tiers.forEach((tier: any) => {
+        const rowItem: any = {
+          seq: tier.seq,
+          threshold: tier.threshold,
+          compareType: tier.compareType,
+          ruleType: 'tier'
+        }
+
+        // 添加字段值
+        if (tier.fieldValues) {
+          Object.keys(tier.fieldValues).forEach(fieldIndex => {
+            rowItem[`field${fieldIndex}`] = tier.fieldValues[fieldIndex]
+          })
+        }
+
+        dialogData.push(rowItem)
+      })
+    }
+
+    // 处理增量规则
+    if (increments && Array.isArray(increments)) {
+      increments.forEach((inc: any) => {
+        const rowItem: any = {
+          seq: inc.seq,
+          step: inc.step,
+          baseThreshold: inc.baseThreshold,
+          ruleType: 'increment'
+        }
+
+        // 添加字段增量
+        if (inc.fieldIncrements) {
+          Object.keys(inc.fieldIncrements).forEach(fieldIndex => {
+            rowItem[`field${fieldIndex}`] = inc.fieldIncrements[fieldIndex]
+          })
+        }
+
+        dialogData.push(rowItem)
+      })
+    }
+  } else {
+    console.log('openDialog: 没有找到规则数据，显示空表格')
+  }
+
+  console.log('openDialog: 弹窗数据', dialogData)
+
+  dialogVisible.value = true
+
+  // 等待弹窗渲染后加载数据并更新列配置
+  nextTick(() => {
+    if (dialogHstRef.value?.hotInstance) {
+      // 重新生成列配置以使用最新的字段标签
+      dialogHstRef.value.hotInstance.updateSettings({
+        columns: generateDialogColumns()
+      })
+
+      if (dialogData.length > 0) {
+        console.log('openDialog: 加载数据到弹窗表格', dialogData)
+        dialogHstRef.value.loadData(dialogData)
+      } else {
+        console.log('openDialog: 清空弹窗表格')
+        dialogHstRef.value.loadData([])
+      }
+      dialogHstRef.value.hotInstance.render()
+    }
+  })
+}
+// 重新计算所有行的序号
+const recalculateNumbers = () => {
+  if (!topHstRef.value?.hotInstance) return
+
+  const hot = topHstRef.value.hotInstance
+  const plugin = hot.getPlugin('nestedRows')
+  if (!plugin) return
+
+  // 递归计算序号
+  const calculateNumbers = (parentRow: number | null, parentNumber: string = '') => {
+    const children = parentRow === null
+      ? plugin.dataManager.getRootNodes()
+      : plugin.dataManager.getRowChildren(parentRow)
+
+    if (!children) return
+
+    children.forEach((child: any, index: number) => {
+      const rowIndex = hot.toPhysicalRow(child.row)
+      if (rowIndex === null || rowIndex === undefined) return
+
+      // 生成序号
+      const currentNumber = parentNumber === ''
+        ? String(index + 1)  // 根节点：1, 2, 3...
+        : `${parentNumber}.${index + 1}`  // 子节点：1.1, 1.2, 2.1...
+
+      // 更新序号
+      hot.setDataAtRowProp(rowIndex, 'number', currentNumber, 'recalculate')
+
+      // 递归处理子节点
+      if (plugin.dataManager.hasChildren(child.row)) {
+        calculateNumbers(child.row, currentNumber)
+      }
+    })
+  }
+
+  calculateNumbers(null)
+  hot.render()
+}
+
+// 防抖：避免短时间内多次调用排序接口
+let sortingInProgress = false
+let sortingTimeout: ReturnType<typeof setTimeout> | null = null
+
+// 执行排序的函数
+const performSort = async (movedRows: number[], finalIndex: number) => {
+  const hot = topHstRef.value?.hotInstance
+  if (!hot) return
+
+  // 设置排序进行中标志
+  sortingInProgress = true
+
+  try {
+    // 获取移动的行数据
+    if (movedRows.length === 0) return
+
+    const originalIndex = movedRows[0]
+    if (originalIndex === undefined) return
+
+    // 注意：移动后，行的实际位置是 finalIndex
+    const movedRowData = hot.getSourceDataAtRow(finalIndex)
+
+    if (!movedRowData || !movedRowData.id) {
+      console.warn('移动的行没有ID，无法保存排序')
+      return
+    }
+
+    console.log('移动行信息:', {
+      originalIndex: originalIndex,
+      finalIndex: finalIndex,
+      movedRowId: movedRowData.id,
+      movedRowLevel: movedRowData.level
+    })
+
+    // 查找目标位置的同级节点（移动到该节点之前）
+    let targetRowData = null
+
+    // 从 finalIndex 开始向后查找第一个同级节点
+    for (let i = finalIndex + 1; i < hot.countRows(); i++) {
+      const rowData = hot.getSourceDataAtRow(i)
+      if (!rowData || !rowData.id) continue
+
+      // 跳过自己
+      if (rowData.id === movedRowData.id) continue
+
+      // 检查是否同级
+      if (rowData.level && movedRowData.level) {
+        const movedLevel = movedRowData.level.split('-')
+        const rowLevel = rowData.level.split('-')
+
+        if (movedLevel.length === rowLevel.length) {
+          const isSameParent = movedLevel.slice(0, -1).join('-') === rowLevel.slice(0, -1).join('-')
+          if (isSameParent) {
+            targetRowData = rowData
+            break
+          }
+        }
+      }
+    }
+
+    if (!targetRowData || !targetRowData.id) {
+      console.warn('未找到目标节点，无法保存排序')
+      return
+    }
+
+    // 确保不是同一个节点
+    if (targetRowData.id === movedRowData.id) {
+      console.warn('目标节点和移动节点是同一个，跳过排序')
+      return
+    }
+
+    console.log('找到目标节点:', {
+      targetRowId: targetRowData.id,
+      targetRowLevel: targetRowData.level
+    })
+
+    console.log('准备移动节点:', {
+      movedId: movedRowData.id,
+      targetId: targetRowData.id
+    })
+
+    // 调用后端接口移动节点（移动到目标节点之前）
+    await moveRateItemNode(movedRowData.id, targetRowData.id)
+    console.log('移动保存成功')
+
+    // 重置标志，允许后续操作
+    sortingInProgress = false
+
+    // 重新加载数据以确保显示正确
+    if (currentRateModeNodeId.value) {
+      await treeHandleSelect({ id: String(currentRateModeNodeId.value) } as Tree)
+      console.log('数据已重新加载')
+    } else {
+      // 如果没有模式节点ID，只重新计算序号
+      nextTick(() => {
+        recalculateNumbers()
+      })
+    }
+  } catch (error: any) {
+    console.error('排序保存失败:', error)
+    ElMessage.error('排序保存失败: ' + (error?.message || '未知错误'))
+    // 重置标志
+    sortingInProgress = false
+  }
+}
+
+const transformToHierarchicalData = (items: any[], parentLevel: string | null = null, parentNumber: string = ''): any[] => {
+  return items.map((item, index) => {
+    // 根级别：'0', '1', '2'
+    // 子级别：'0-1', '0-2', '1-1'
+    const currentLevel = parentLevel === null ? String(index) : `${parentLevel}-${index + 1}`
+
+    // 生成序号：父节点为 1, 2, 3...，子节点为 1.1, 1.2, 2.1, 2.2...
+    const currentNumber = parentNumber === ''
+      ? String(index + 1)  // 根节点：1, 2, 3...
+      : `${parentNumber}.${index + 1}`  // 子节点：1.1, 1.2, 2.1...
+
+    const transformedItem: any = {
+      id: item.id || null,
+      level: currentLevel,
+      number: currentNumber,  // 添加序号字段
+      __children: [],
+      // 保存原始数据用于判断
+      nodeType: item.nodeType,
+      valueMode: item.valueMode,
+      settings: item.settings
+    }
+
+    // 根据 topColumns 的 data 字段动态构建对象
+    topColumns.value.forEach((col: any) => {
+      if (col.data && col.data !== 'level' && col.data !== '__children' && col.data !== 'id' && col.data !== 'number') {
+        transformedItem[col.data] = item[col.data] || null
+      }
+    })
+
+    // 确保 isEditable 字段正确映射（复选框列绑定的是 isEditable）
+    if (item.isEditable !== undefined) {
+      transformedItem.isEditable = item.isEditable
+    }
+
+    // 处理动态字段值（field1-field20）
+    if (item.fields && Array.isArray(item.fields)) {
+      item.fields.forEach((field: any) => {
+        const fieldKey = `field${field.fieldIndex}`
+        transformedItem[fieldKey] = field.fieldValue
+        // 保存字段标签和绑定信息
+        if (!transformedItem._fieldMeta) {
+          transformedItem._fieldMeta = {}
+        }
+        transformedItem._fieldMeta[fieldKey] = {
+          label: field.fieldLabel,
+          bindingIds: field.bindingIds
         }
       })
     }
+
+    // 如果有子项，递归处理（传递当前序号作为父序号）
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      transformedItem.__children = transformToHierarchicalData(item.children, currentLevel, currentNumber)
+    }
+
+    return transformedItem
+  })
+}
+
+// 渲染字段表头（带配置图标）
+const renderFieldHeader = (col: number, TH: HTMLTableCellElement) => {
+  if (col < 6 || col > 25) return
+
+  const fieldNum = col - 5
+  const fieldKey = `field${fieldNum}`
+  const fieldConfig = fieldConfigs.value[fieldKey]
+  const fieldName = fieldConfig?.label || `字段${fieldNum}`
+
+  // 检查是否已经渲染过，避免重复创建
+  const existingHeader = TH.querySelector('.field-header')
+  if (existingHeader) {
+    // 只更新输入框的值，不重新创建
+    const existingInput = existingHeader.querySelector('.field-input') as HTMLInputElement
+    if (existingInput && existingInput.value !== fieldName) {
+      existingInput.value = fieldName
+    }
+    return
+  }
+
+  TH.innerHTML = ''
+
+  const container = document.createElement('div')
+  container.className = 'field-header'
+
+  const input = document.createElement('input')
+  input.type = 'text'
+  input.className = 'field-input'
+  input.value = fieldName
+  input.placeholder = '输入字段名'
+
+  // 阻止输入框事件冒泡，避免触发表格排序等操作
+  input.addEventListener('mousedown', (e) => e.stopPropagation())
+  input.addEventListener('click', (e) => e.stopPropagation())
+
+  // 保存字段标签的函数
+  const saveFieldLabel = async () => {
+    const newLabel = input.value.trim()
+    if (!newLabel) {
+      ElMessage.warning('字段名不能为空')
+      input.value = fieldName
+      return
+    }
+
+    if (newLabel === fieldName) {
+      console.log('字段名未改变，无需保存')
+      return
+    }
+
+    console.log('字段名更新:', { fieldKey, oldLabel: fieldName, newLabel })
+
+    // 更新本地配置
+    if (!fieldConfigs.value[fieldKey]) {
+      fieldConfigs.value[fieldKey] = { label: newLabel, bindingIds: [] }
+    } else {
+      fieldConfigs.value[fieldKey].label = newLabel
+    }
+
+    // 保存字段标签到字典（只需要更新字典，不需要更新所有费率项）
+    if (!currentRateModeNodeId.value) {
+      console.warn('未选择费率模式节点，无法保存')
+      ElMessage.warning('请先选择费率模式节点')
+      return
+    }
+
+    try {
+      let labelId = fieldConfigs.value[fieldKey].labelId
+
+      // 如果没有labelId，创建新标签
+      if (!labelId) {
+        console.log('准备创建字段标签:', {
+          catalogItemId: currentRateModeNodeId.value,
+          labelName: newLabel
+        })
+        const result = await createFieldLabel({
+          catalogItemId: currentRateModeNodeId.value,
+          labelName: newLabel
+        })
+        console.log('创建字段标签返回结果:', result)
+        // 从返回结果中提取ID（CommonResult包装）
+        labelId = result.data || result
+        fieldConfigs.value[fieldKey].labelId = labelId
+        console.log('创建字段标签成功，labelId:', labelId)
+        ElMessage.success(`字段"${newLabel}"创建成功`)
+      } else {
+        // 更新现有标签
+        console.log('准备更新字段标签:', {
+          id: labelId,
+          catalogItemId: currentRateModeNodeId.value,
+          labelName: newLabel
+        })
+        const result = await updateFieldLabel({
+          id: labelId,
+          catalogItemId: currentRateModeNodeId.value,
+          labelName: newLabel
+        })
+        console.log('更新字段标签返回结果:', result)
+        console.log('更新字段标签成功:', labelId)
+        ElMessage.success(`字段"${newLabel}"更新成功`)
+      }
+
+      // 重新渲染表头以显示新标签
+      nextTick(() => {
+        if (topHstRef.value?.hotInstance) {
+          topHstRef.value.hotInstance.render()
+        }
+      })
+    } catch (error) {
+      console.error('保存字段标签失败:', error)
+      // 打印详细错误信息
+      if (error && typeof error === 'object') {
+        console.error('错误详情:', {
+          message: (error as any).message,
+          response: (error as any).response,
+          data: (error as any).data,
+          stack: (error as any).stack
+        })
+      }
+      ElMessage.error(`保存字段标签失败: ${(error as any)?.message || '未知错误'}`)
+      // 恢复原值
+      input.value = fieldName
+      fieldConfigs.value[fieldKey].label = fieldName
+    }
+  }
+
+  // 输入框失焦时保存
+  input.addEventListener('blur', saveFieldLabel)
+
+  // 按 Enter 键时保存并失焦
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      input.blur()
+    } else if (e.key === 'Escape') {
+      // 按 Esc 键取消编辑
+      input.value = fieldName
+      input.blur()
+    }
+  })
+
+  const iconBtn = document.createElement('span')
+  iconBtn.className = 'field-icon'
+  iconBtn.innerHTML = '<svg t="1766498662656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11080" width="16" height="16"><path d="M218.517333 245.013333l120.661334-120.682666 60.352 60.352-181.013334 181.013333-120.682666-120.682667 60.330666-60.330666 60.352 60.330666zM917.333333 277.333333H448V192h469.333333v85.333333zM218.517333 522.346667l120.661334-120.682667 60.352 60.352-181.013334 181.013333-120.682666-120.682666 60.330666-60.330667 60.352 60.330667zM917.333333 576H448v-85.333333h469.333333v85.333333zM218.517333 799.68l120.661334-120.682667 60.352 60.352-181.013334 181.013334-120.682666-120.682667 60.330666-60.330667 60.352 60.330667zM917.333333 874.666667H448v-85.333334h469.333333v85.333334z" p-id="11081" fill="#1296db"></path></svg>'
+  iconBtn.addEventListener('click', (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    openFieldDrawer(fieldKey)
+  })
+
+  container.appendChild(input)
+  container.appendChild(iconBtn)
+  TH.appendChild(container)
+}
+
+// 保存 API 函数引用，供 afterChange 使用
+const createRateItemApi = createRateItem
+const updateRateItemApi = updateRateItem
+const saveRateFieldApi = saveRateField
+
+let topDbSettings = {
+  data: [],
+  dataSchema: rowSchema,
+  colWidths: [40,40,150,100,60,60,...Array.from({ length: 20 }, (_) => 80)],
+  columns: generateColumns(),
+  className: 'htCenter',
+  manualRowMove: true,
+  rowHeaders: false,
+  nestedRows: false,
+  bindRowsWithHeaders: true,
+  // 控制单元格的可编辑性
+  cells(row: number, col: number) {
+    const cellProperties: any = {}
+    const hot = topHstRef.value?.hotInstance
+    if (!hot) return cellProperties
+
+    const rowData = hot.getSourceDataAtRow(row)
+    if (!rowData) return cellProperties
+
+    const colData = hot.colToProp(col)
+
+    // 如果是动态字段列（field1-field20）
+    if (typeof colData === 'string' && colData.startsWith('field')) {
+      // 当 isEditable 为 false 时字段可编辑（直接录入）
+      // 当 isEditable 为 true 时字段不可编辑（通过"更多"按钮配置动态规则）
+      if (rowData.isEditable === false || rowData.isEditable === null || rowData.isEditable === undefined) {
+        cellProperties.readOnly = false
+        cellProperties.className = 'field-cell-center' // 添加居中对齐类
+      } else {
+        cellProperties.readOnly = true
+        cellProperties.className = 'htDimmed field-cell-center' // 禁用时也居中
+      }
+    }
+
+    return cellProperties
   },
   contextMenu: {
+    callback: function(key: string, selection: any[], clickEvent: any) {
+      // 这个回调会在菜单项被点击时调用
+    },
     items: {
-      custom_row_above: {
-        name: '在上方插入行',
-        callback: function() {
-          handleRowOperation(this, 'above')
-        }
-      },
-      custom_row_below: {
-        name: '在下方插入行',
-        callback: function() {
-          handleRowOperation(this, 'below')
-        }
-      },
-      separator1: '---------',
       custom_add_child: {
-        name: '添加子行',
+        name: '插入子项',
+        hidden: function() {
+          // 在 Handsontable 的 contextMenu 中，this 指向菜单项配置对象
+          // 需要通过其他方式获取 hot 实例
+          const hot = topHstRef.value?.hotInstance
+          if (!hot) return true
+
+          const selection = hot.getSelectedLast()
+          if (!selection) return true
+
+          const [row] = selection
+          const rowData = hot.getSourceDataAtRow(row)
+          if (!rowData) return true
+
+          // 只在一级节点显示
+          const level = rowData.level || '0'
+          const levelDepth = level.includes('-') ? level.split('-').length : 1
+          return levelDepth !== 1
+        },
         callback: function() {
           handleRowOperation(this, 'child')
         }
       },
-      separator2: '---------',
+      separator1: {
+        name: '---------',
+        hidden: function() {
+          const hot = topHstRef.value?.hotInstance
+          if (!hot) return true
+
+          const selection = hot.getSelectedLast()
+          if (!selection) return true
+
+          const [row] = selection
+          const rowData = hot.getSourceDataAtRow(row)
+          if (!rowData) return true
+
+          // 只在一级节点显示分隔符
+          const level = rowData.level || '0'
+          const levelDepth = level.includes('-') ? level.split('-').length : 1
+          return levelDepth !== 1
+        }
+      },
       remove_row: {
-        name: '删除行',
+        name: '删除',
         callback: function() {
           handleRowOperation(this, 'delete')
         }
-      },
-      // separator3: '---------',
-      // undo: {},
-      // redo: {}
+      }
     }
   },
+  afterChange(changes: any, source: string) {
+    console.log('afterChange', changes, source)
+    if (!changes || source === 'loadData' || source === 'updateId') return
 
+    // 处理 code 列的回调 - 使用防抖优化列宽自动调整
+    applyAutoFitColum(this, changes)
+
+    // 处理数据变更并保存
+    changes.forEach(async ([row, prop, oldValue, newValue]: [number, string, any, any]) => {
+      const rowData = this.getSourceDataAtRow(row)
+      if (!rowData) return
+
+      // 如果值没有改变，不触发保存
+      // 使用宽松相等（==）来处理类型转换问题（如 2 == '2'）
+      // 同时处理 null/undefined/空字符串的情况
+      const oldValueNormalized = oldValue === null || oldValue === undefined || oldValue === '' ? null : oldValue
+      const newValueNormalized = newValue === null || newValue === undefined || newValue === '' ? null : newValue
+
+      if (oldValueNormalized == newValueNormalized) {
+        console.log('值未改变，跳过保存:', {
+          prop,
+          oldValue: oldValueNormalized,
+          newValue: newValueNormalized
+        })
+        return
+      }
+
+      console.log('值已改变，触发保存:', {
+        prop,
+        oldValue: oldValueNormalized,
+        newValue: newValueNormalized
+      })
+
+      // 处理新增行：当填写完 name 字段后自动创建
+      if (!rowData.id && prop === 'name' && newValue) {
+        try {
+          // 获取父节点信息
+          const hot = this as any
+          let parentId = null
+
+          // 使用 flatIndex 获取父节点信息
+          const index = flatIndex.value
+          if (index && index.metaByRow && index.metaByRow[row]) {
+            const meta = index.metaByRow[row]
+            // 如果 depth > 0，说明是子节点，需要找父节点
+            if (meta.depth > 0) {
+              // 向上查找父节点（depth 比当前小 1 的节点）
+              for (let i = row - 1; i >= 0; i--) {
+                const parentMeta = index.metaByRow[i]
+                if (parentMeta && parentMeta.depth === meta.depth - 1 && parentMeta.node.id) {
+                  parentId = parentMeta.node.id
+                  break
+                }
+              }
+            }
+          }
+
+          // 调用创建接口
+          const createData: any = {
+            catalogItemId: currentRateModeNodeId.value,
+            name: newValue,
+            nodeType: 'directory',  // 默认创建目录节点
+            isEditable: false
+          }
+
+          if (parentId) {
+            createData.parentId = parentId
+          }
+
+          console.log('创建新费率项:', createData)
+          const result = await createRateItemApi(createData)
+          console.log('创建成功，返回结果:', result)
+
+          // 更新行数据的 id
+          const newId = result.data || result
+          hot.setDataAtRowProp(row, 'id', newId, 'createSuccess')
+
+          ElMessage.success('创建成功')
+        } catch (error) {
+          console.error('创建费率项失败:', error)
+          ElMessage.error('创建失败')
+          // 创建失败，清空 name 字段
+          this.setDataAtRowProp(row, 'name', null, 'createFailed')
+        }
+        return
+      }
+
+      // 当 isEditable 改变时
+      if (prop === 'isEditable') {
+        try {
+          await updateRateItemApi({
+            id: rowData.id,
+            isEditable: newValue
+          })
+          console.log('更新 isEditable 成功:', rowData.id, newValue)
+          // 重新渲染以更新"更多"按钮的显示状态
+          if (topHstRef.value?.hotInstance) {
+            topHstRef.value.hotInstance.render()
+          }
+        } catch (error) {
+          console.error('更新 isEditable 失败:', error)
+          ElMessage.error('保存失败')
+        }
+      }
+
+      // 当其他字段改变时（如 name, rateCode 等）
+      if (['number', 'name', 'rateCode'].includes(prop)) {
+        try {
+          const updateData: any = {
+            id: rowData.id
+          }
+
+          // 映射字段名
+          if (prop === 'number') {
+            updateData.customCode = newValue
+          } else if (prop === 'name') {
+            updateData.name = newValue
+          } else if (prop === 'rateCode') {
+            updateData.rateCode = newValue
+          }
+
+          await updateRateItemApi(updateData)
+          console.log('更新费率项成功:', updateData)
+        } catch (error) {
+          console.error('更新费率项失败:', error)
+          ElMessage.error('保存失败')
+        }
+      }
+
+      // 当字段值改变时（field1-field20）
+      if (typeof prop === 'string' && prop.startsWith('field')) {
+        const match = prop.match(/field(\d+)/)
+        // 只有当 isEditable 为 false 时才保存字段值（直接录入模式）
+        if (match && (rowData.isEditable === false || rowData.isEditable === null || rowData.isEditable === undefined)) {
+          const fieldIndex = Number.parseInt(match[1])
+          const fieldConfig = fieldConfigs.value[prop]
+
+          try {
+            await saveRateFieldApi({
+              catalogItemId: currentRateModeNodeId.value,  // 添加费率模式节点ID
+              rateItemId: rowData.id,
+              fieldIndex: fieldIndex,
+              fieldValue: newValue,
+              fieldLabelId: fieldConfig?.labelId
+            })
+            console.log('更新字段值成功:', prop, newValue)
+            ElMessage.success('保存成功')
+          } catch (error) {
+            console.error('更新字段值失败:', error)
+            ElMessage.error('保存字段值失败')
+          }
+        }
+      }
+    })
+  },
+  // 初始化后执行一次 - 设置自定义表头
+  afterInit() {
+    const hot = this as any
+    // 获取表头行
+    const thead = hot.rootElement?.querySelector('thead')
+    if (!thead) return
+
+    const headerCells = thead.querySelectorAll('th')
+    headerCells.forEach((th: any, index: number) => {
+      // 只处理字段列（索引 6-25）
+      if (index >= 6 && index <= 25) {
+        renderFieldHeader(index, th)
+      }
+    })
+  },
+  // 自定义表头渲染 - 仅用于保持表头样式
+  afterGetColHeader(col: number, TH: HTMLTableCellElement) {
+    // 只在需要时重新渲染（比如列宽改变、滚动等）
+    if (col < 6 || col > 25) return
+    // 检查是否已有自定义表头
+    if (!TH.querySelector('.field-header')) {
+      renderFieldHeader(col, TH)
+    }
+  },
+  // 添加行后重新计算序号
+  afterCreateRow() {
+    nextTick(() => {
+      recalculateNumbers()
+    })
+  },
+  // 移动行前的钩子（用于调试）
+  beforeRowMove(movedRows: number[], finalIndex: number, dropIndex: number | undefined, movePossible: boolean) {
+    console.log('beforeRowMove 被调用:', {
+      movedRows,
+      finalIndex,
+      dropIndex,
+      movePossible
+    })
+    return true // 允许移动
+  },
+  // 移动行后重新计算序号并保存排序
+  afterRowMove(movedRows: number[], finalIndex: number, dropIndex: number | undefined, movePossible: boolean, orderChanged: boolean) {
+    console.log('afterRowMove 被调用:', {
+      movedRows,
+      finalIndex,
+      dropIndex,
+      movePossible,
+      orderChanged,
+      sortingInProgress
+    })
+
+    // 如果正在处理排序，跳过
+    if (sortingInProgress) {
+      console.log('排序正在进行中，跳过本次调用')
+      return
+    }
+
+    // 只有当排序真正改变时才处理
+    if (!orderChanged || !movePossible) {
+      console.log('跳过处理: orderChanged=', orderChanged, 'movePossible=', movePossible)
+      return
+    }
+
+    // 清除之前的定时器
+    if (sortingTimeout) {
+      clearTimeout(sortingTimeout)
+    }
+
+    // 设置防抖定时器（300ms）
+    sortingTimeout = setTimeout(() => {
+      performSort(movedRows, finalIndex)
+    }, 300)
+  },
+  // 删除行后重新计算序号
+  afterRemoveRow() {
+    nextTick(() => {
+      recalculateNumbers()
+    })
+  }
 }
 
-const treeHandleSelect = (node: Tree) => {
+const treeHandleSelect = async (node: Tree) => {
   console.log('treeHandleSelect',node)
-}
 
+  // 保存当前选中的节点ID（用于抽屉加载）
+  currentRateModeNodeId.value = node.id
+
+  // 加载字段标签字典
+  try {
+    const fieldLabels = await getFieldLabelList(node.id)
+    console.log('字段标签字典:', fieldLabels)
+
+    // 初始化字段配置（使用字典数据）
+    fieldConfigs.value = {}
+    fieldLabels.forEach((label: any, index: number) => {
+      const fieldKey = `field${index + 1}`
+      fieldConfigs.value[fieldKey] = {
+        label: label.labelName,
+        labelId: label.id,
+        bindingIds: []
+      }
+    })
+  } catch (error) {
+    console.error('加载字段标签字典失败:', error)
+    // 如果加载失败，使用默认配置
+    fieldConfigs.value = {}
+  }
+
+  // 加载字段绑定数据（基于catalog_item_id）
+  try {
+    const fieldBindings = await getRateFieldList(node.id)
+    console.log('字段绑定数据:', fieldBindings)
+
+    // 更新字段配置中的绑定信息
+    fieldBindings.forEach((field: any) => {
+      const fieldKey = `field${field.fieldIndex}`
+      if (fieldConfigs.value[fieldKey]) {
+        fieldConfigs.value[fieldKey].bindingIds = field.bindingIds || []
+      }
+    })
+  } catch (error) {
+    console.error('加载字段绑定数据失败:', error)
+  }
+
+  const trees = await getQuotaRateItemTree(node.id)
+
+  load(transformToHierarchicalData(trees))
+
+  // 重新渲染表头以显示字段标签
+  nextTick(() => {
+    if (topHstRef.value?.hotInstance) {
+      topHstRef.value.hotInstance.render()
+    }
+  })
+
+  console.log('getQuotaRateItemTree',trees)
+  console.log('字段配置:', fieldConfigs.value)
+}
+/**
+ * 判断是否为 [{}] 结构（仅含一个空对象的数组）
+ */
+function isSingleEmptyObjArr(target: any): boolean {
+  // 3个条件同时满足：是数组 + 长度为1 + 第一个元素是纯空对象
+  return Array.isArray(target)
+    && target.length === 1
+    && Object.keys(target[0]).length === 0
+}
 function onTopHeight(height: number){
   if (topHstRef.value?.hotInstance) {
     topHstRef.value.hotInstance.updateSettings({
-      height: height-15,
+      height: height,
     })
     // 更新 code 列的宽度
-    topHstRef.value.updateCodeColWidth()
-    
+    // topHstRef.value.updateCodeColWidth()
+
     topHstRef.value.hotInstance.render()
-    
+
     // console.log('onResizeEnd-onTopHeight',height, 'codeColWidth:', topHstRef.value.codeColWidth);
   }
 }
@@ -212,39 +1489,218 @@ function onTopHeight(height: number){
 // 直接使用配置对象，DbTree 会自动创建 HierarchyContextMenuHandler
 const contextMenuHandler = {
   rootKey: 'add-category',
-  rootText: '添加单价费率库',
+  rootText: '添加总类',
+  onRootAdd: async (newNode: any, allRootNodes: any[]) => {
+    console.log('添加总类:', newNode, '所有根节点:', allRootNodes)
+  },
+  onRootDelete: async (node: any) => {
+    console.log('删除总类:', node)
+  },
   levels: [
     {
       depth: 0,
       addKey: 'add-province',
       addText: '添加省市',
-      allowDelete: true
+      allowDelete: true,
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加省市 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        try {
+          const maxSortOrder = allChildren.reduce((max, node) => {
+            const sortOrder = (node as any).sortOrder || 0
+            return sortOrder > max ? sortOrder : max
+          }, 0)
+
+          const parentId = parentNode?.id
+          const id = await createQuotaCatalogItem({
+            code: newNode.label,
+            name: newNode.label,
+            parentId: parentId || null,
+            sortOrder: maxSortOrder + 1,
+            attributes: {
+              node_type: 'region'
+            }
+          })
+          newNode.id = String(id)
+          newNode.sortOrder = maxSortOrder + 1
+          newNode.attributes = {
+            ...(newNode.attributes || {}),
+            node_type: 'region'
+          }
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加省市失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('删除省市:', node)
+        try {
+          await deleteQuotaCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除省市失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
     },
     {
       depth: 1,
-      addKey: 'add-name',
-      addText: '添加名称',
-      allowDelete: true
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除省市节点:', node)
+        try {
+          await deleteQuotaCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除省市节点失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
     },
     {
       depth: 2,
-      addKey: 'add-model',
-      addText: '添加模式',
-      allowDelete: true
+      addKey: 'add-rate-mode',
+      addText: '添加费率模式',
+      allowDelete: true,
+      // 只有当节点是 specialty 类型时才显示"添加费率模式"
+      condition: (node: any) => {
+        console.log('检查节点条件 (depth 2):', node)
+        console.log('node.attributes:', node?.attributes)
+        console.log('node.node_type:', node?.node_type)
+        const nodeType = node?.attributes?.node_type || node?.node_type
+        console.log('最终 nodeType:', nodeType)
+        const result = nodeType === 'specialty'
+        console.log('condition 结果:', result)
+        return result
+      },
+      onAdd: async (parentNode: any, newNode: any, allChildren: any[]) => {
+        console.log('添加费率模式 - 父节点:', parentNode, '新节点:', newNode, '所有子节点:', allChildren)
+        try {
+          const maxSortOrder = allChildren.reduce((max, node) => {
+            const sortOrder = (node as any).sortOrder || 0
+            return sortOrder > max ? sortOrder : max
+          }, 0)
+
+          const parentId = parentNode?.id
+          // 使用费率模式节点创建接口
+          const id = await createRateModeNode({
+            parentId: parentId,
+            code: newNode.label,
+            name: newNode.label,
+            sortOrder: maxSortOrder + 1
+          })
+          newNode.id = String(id)
+          newNode.sortOrder = maxSortOrder + 1
+          newNode.attributes = {
+            ...(newNode.attributes || {}),
+            node_type: 'rate_mode'
+          }
+          ElMessage.success('添加成功')
+        } catch (error) {
+          console.error('添加费率模式失败:', error)
+          ElMessage.error('添加失败')
+          throw error
+        }
+      },
+      onDelete: async (node: any) => {
+        console.log('删除节点:', node)
+        try {
+          await deleteQuotaCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除节点失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
     },
     {
       depth: 3,
-      allowDelete: true
+      allowDelete: true,
+      onDelete: async (node: any) => {
+        console.log('删除第四层节点:', node)
+        try {
+          await deleteQuotaCatalogItem(node.id)
+          ElMessage.success('删除成功')
+        } catch (error) {
+          console.error('删除第四层节点失败:', error)
+          ElMessage.error('删除失败')
+          throw error
+        }
+      }
     }
   ]
 }
+const topContextMenuItems = [
+  {
+    key: 'row_above',
+    name: '新增行',
+    callback: (hotInstance: any) => {
+      // 执行新增行操作
+      handleRowOperation(hotInstance, 'append')
+      // 等待 DOM 更新后重新渲染以应用验证样式
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+]
+const dialogContextMenuItems = [
+  {
+    key: 'add_row',
+    name: '添加行',
+    callback: (hotInstance: any) => {
+      const selected = hotInstance.getSelected()
+      const rowCount = hotInstance.countRows()
+
+      // 如果有选中行，在选中行下方插入；否则在末尾添加
+      const insertRow = selected && selected.length > 0 ? selected[0][0] : rowCount - 1
+
+      const newRow: any = {
+        seq: rowCount + 1,
+        threshold: null,
+        compareType: 'lte',
+        ruleType: 'tier'
+      }
+
+      hotInstance.alter('insert_row_below', insertRow, 1)
+      const newRowIndex = insertRow + 1
+      hotInstance.setDataAtRowProp(newRowIndex, 'seq', newRow.seq)
+      hotInstance.setDataAtRowProp(newRowIndex, 'ruleType', newRow.ruleType)
+      hotInstance.setDataAtRowProp(newRowIndex, 'compareType', newRow.compareType)
+
+      nextTick(() => {
+        hotInstance.render()
+      })
+    }
+  },
+  {
+    key: 'remove_row',
+    name: '删除行',
+    callback: (hotInstance: any) => {
+      const selected = hotInstance.getSelected()
+      if (selected && selected.length > 0) {
+        const row = selected[0][0]
+        hotInstance.alter('remove_row', row, 1)
+        nextTick(() => {
+          hotInstance.render()
+        })
+      }
+    }
+  }
+]
+
 onMounted(() => {
+  // 加载定额专业树
+  loadCategoryTree()
+
   setTimeout(() => {
     onTopHeight(containerHeight.value)
   }, 200);
 })
-onUnmounted(() => {
-})
 
 </script>
 
@@ -253,42 +1709,115 @@ onUnmounted(() => {
    <ElSplitter >
       <ElSplitterPanel collapsible size="15%" :min="200">
         <ElCard class="w-full h-full border-radius-0" body-class="!p-0 h-full" ref="containerRef">
-            <DbTree :height="containerHeight" :data="treeData" @select="treeHandleSelect" :defaultExpandedKeys="3" :context-menu-handler="contextMenuHandler"  :search="false" />
+            <DbTree :height="containerHeight" :data="treeData" @select="treeHandleSelect"
+            :defaultExpandedKeys="3" :context-menu-handler="contextMenuHandler"  :search="false" />
         </ElCard>
       </ElSplitterPanel>
       <ElSplitterPanel collapsible :min="200">
         <ElCard class="w-full h-full" body-class="!p-0 h-full">
-            <DbHst ref="topHstRef" :settings="topDbSettings"></DbHst>
+            <DbHst ref="topHstRef" :settings="topDbSettings" :contextMenuItems="topContextMenuItems"></DbHst>
         </ElCard>
       </ElSplitterPanel>
     </ElSplitter>
 
-    <!-- 弹窗 -->
-    <ElDialog v-model="dialogVisible" title="费率详细设置" width="50%" :close-on-click-modal="false">
-      <ElTable :data="dialogTableData" border style="width: 100%">
-        <ElTableColumn prop="base" label="基数" width="120" />
-        <ElTableColumn prop="method" label="取值方式" width="150">
-          <template #default="{ row }">
-            <el-select v-model="row.method" placeholder="请选择">
-              <el-option label="小于等于" value="小于等于" />
-              <el-option label="每增加" value="每增加" />
-            </el-select>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn prop="earthwork" label="土方" width="100" />
-        <ElTableColumn prop="stonework" label="石方" width="100" />
-        <ElTableColumn prop="transport" label="运输" width="100" />
-        <ElTableColumn prop="pavement" label="路面" width="100" />
-        <ElTableColumn prop="col1" label="插入列1" width="" />
-        <ElTableColumn prop="col2" label="插入列2" width="" />
-      </ElTable>
+    <!-- 费率详细设置弹窗 -->
+    <ElDialog
+      v-model="dialogVisible"
+      :title="`费率详细设置 - ${currentRowName}`"
+      width="60%"
+      append-to-body
+      :modal="true"
+    >
+      <DbHst ref="dialogHstRef" :settings="dialogDbSettings" :contextMenuItems="dialogContextMenuItems"></DbHst>
       <template #footer>
         <ElButton @click="dialogVisible = false">取消</ElButton>
-        <ElButton type="primary" @click="dialogVisible = false">确定</ElButton>
+        <ElButton type="primary" @click="saveDialogData">确定</ElButton>
       </template>
     </ElDialog>
+
+    <ElDrawer
+      v-model="drawer"
+      direction="rtl"
+      size="400px"
+      :title="currentFieldLabel"
+      resizable
+    >
+      <ElTreeV2
+        ref="drawerTreeRef"
+        :data="drawerTreeData"
+        :props="treeProps"
+        show-checkbox
+        :height="400"
+      />
+
+      <template #footer>
+        <div class="drawer-footer">
+          <el-button @click="drawer = false">取消</el-button>
+          <el-button type="primary" @click="saveFieldBinding">确认</el-button>
+        </div>
+      </template>
+    </ElDrawer>
 </Page>
 </template>
 
-<style lang="css">
+<style lang="scss">
+.field-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  width: 100%;
+
+  .field-input {
+    flex: 1;
+    min-width: 0;
+    height: 24px;
+    padding: 0 6px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    font-size: 13px;
+    line-height: 22px;
+    background-color: transparent;
+    color: inherit;
+    outline: none;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: #d9d9d9;
+      background-color: #fafafa;
+    }
+
+    &:focus {
+      border-color: #409eff;
+      background-color: #fff;
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+
+    &::placeholder {
+      color: #c0c4cc;
+    }
+  }
+
+  .field-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      display: block;
+    }
+  }
+}
+
+// 虚拟字段单元格居中对齐
+.field-cell-center {
+  text-align: center !important;
+}
 </style>
diff --git a/apps/web-ele/vite.config.mts b/apps/web-ele/vite.config.mts
index 8a36bcb..6b76e97 100644
--- a/apps/web-ele/vite.config.mts
+++ b/apps/web-ele/vite.config.mts
@@ -1,5 +1,6 @@
 import { defineConfig } from '@vben/vite-config';
 
+import { codeInspectorPlugin } from 'code-inspector-plugin';
 import ElementPlus from 'unplugin-element-plus/vite';
 
 export default defineConfig(async () => {
@@ -10,6 +11,9 @@ export default defineConfig(async () => {
         ElementPlus({
           format: 'esm',
         }),
+        codeInspectorPlugin({
+          bundler: 'vite',
+        }),
       ],
       server: {
         proxy: {
diff --git a/package.json b/package.json
index cb63ee0..f731cea 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@vitejs/plugin-vue-jsx": "catalog:",
     "@vue/test-utils": "catalog:",
     "autoprefixer": "catalog:",
+    "code-inspector-plugin": "^1.3.4",
     "cross-env": "catalog:",
     "cspell": "catalog:",
     "happy-dom": "catalog:",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 83a09f9..267e4b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -656,6 +656,9 @@ importers:
       autoprefixer:
         specifier: 'catalog:'
         version: 10.4.22(postcss@8.5.6)
+      code-inspector-plugin:
+        specifier: ^1.3.4
+        version: 1.3.4
       cross-env:
         specifier: 'catalog:'
         version: 7.0.3
@@ -2689,6 +2692,24 @@ packages:
     resolution: {integrity: sha512-Nu8ahitGFFJztxUml9oD/DLb7Z28C8cd8F46IVQ7y5Btz575pvMY8AqZsXkX7Gds29eCKdMgIHjIvzskHgPSFg==}
     engines: {node: '>=18.0.0'}
 
+  '@code-inspector/core@1.3.4':
+    resolution: {integrity: sha512-AUFtDH/hngBHrNVwW1z44ogZkaGhfmFQJZjyQrSCp+mERVQqa4QNGQpRqiIEWVCwJ2e3GCuwxeAr/k48r1nscA==}
+
+  '@code-inspector/esbuild@1.3.4':
+    resolution: {integrity: sha512-VVZLPnaUNtX4fm07bKBkdIn2t1H0jPzah3fHd/CtNO82mnT1H3hZCuvtlO4jQZnErWC1KYJUEDrEe4T5TA5giQ==}
+
+  '@code-inspector/mako@1.3.4':
+    resolution: {integrity: sha512-SvjZSfLXgiWDMmJ9+YfPqbE2WVbXCNPjREclEJfqkM2qS/oRPmHw/O81p5wh6dN48gzVadLKEOPtSE0+FURJgQ==}
+
+  '@code-inspector/turbopack@1.3.4':
+    resolution: {integrity: sha512-zsv2ppMFedNZetrlN4PEW4B2vAheu3yUfrmSKfZlXEb8YT378sq+49+57aP/E1Q8cHRzowy4GItuPKwAy7TTVQ==}
+
+  '@code-inspector/vite@1.3.4':
+    resolution: {integrity: sha512-BcRnQFwt8yQ4CcbN7yPf/Vmon3yfS5lPpcH0QAcjD03r61if5fmix29f65Rf/WxzlVyBkk7148xaIVQ3iT2Yjg==}
+
+  '@code-inspector/webpack@1.3.4':
+    resolution: {integrity: sha512-lqsDOSmKXgOYvlurWL4SHaNItNCNZDVbFJlroM4ECnOGt/iNUI0UwaFxn9U5NeKff7fnTmdH8Hrz2IaMR4FVTg==}
+
   '@codemirror/autocomplete@6.20.0':
     resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
 
@@ -5496,6 +5517,10 @@ packages:
     resolution: {integrity: sha512-2bxTP2yUH7AJj/VAXfcA+4IcWGdQ87HwBANLt5XxGTeomo8yG0y95N1um9i5StvhT/Bl0/2cARA5v1PpPXUxUA==}
     engines: {node: '>=14.16'}
 
+  chalk@4.1.1:
+    resolution: {integrity: sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==}
+    engines: {node: '>=10'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -5614,6 +5639,9 @@ packages:
     resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
 
+  code-inspector-plugin@1.3.4:
+    resolution: {integrity: sha512-735rAAc655oSAMd/6+PIsjpgB5jwugDISom9WFwhNUbOuFHiL2PYwshMmfIhAtOgECl+7g6o50rBIIYwCEa8xg==}
+
   codemirror@5.65.20:
     resolution: {integrity: sha512-i5dLDDxwkFCbhjvL2pNjShsojoL3XHyDwsGv1jqETUoW+lzpBKKqNTUWgQwVAOa0tUm4BwekT455ujafi8payA==}
 
@@ -7788,6 +7816,9 @@ packages:
     resolution: {integrity: sha512-7W0vV3rqv5tokqkBAFV1LbR7HPOWzXQDpDgEuib/aJ1jsZZx6x3c2mBI+TJhJzOhkGeaLbCKEHXEXLfirtG2JA==}
     engines: {node: '>=18'}
 
+  launch-ide@1.3.1:
+    resolution: {integrity: sha512-opTthrpkuhi1Y8yFn6TWUeycyiI1aiZpVuTV4HQFUfVut7nMYGr5nQ8heYHrRJH2KYISLVYwz+QFRNZxFlbQmA==}
+
   lazystream@1.0.1:
     resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
     engines: {node: '>= 0.6.3'}
@@ -8724,6 +8755,10 @@ packages:
   popmotion@11.0.5:
     resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}
 
+  portfinder@1.0.38:
+    resolution: {integrity: sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==}
+    engines: {node: '>= 10.12'}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -12059,6 +12094,48 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
+  '@code-inspector/core@1.3.4':
+    dependencies:
+      '@vue/compiler-dom': 3.5.25
+      chalk: 4.1.2
+      dotenv: 16.6.1
+      launch-ide: 1.3.1
+      portfinder: 1.0.38
+    transitivePeerDependencies:
+      - supports-color
+
+  '@code-inspector/esbuild@1.3.4':
+    dependencies:
+      '@code-inspector/core': 1.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@code-inspector/mako@1.3.4':
+    dependencies:
+      '@code-inspector/core': 1.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@code-inspector/turbopack@1.3.4':
+    dependencies:
+      '@code-inspector/core': 1.3.4
+      '@code-inspector/webpack': 1.3.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@code-inspector/vite@1.3.4':
+    dependencies:
+      '@code-inspector/core': 1.3.4
+      chalk: 4.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@code-inspector/webpack@1.3.4':
+    dependencies:
+      '@code-inspector/core': 1.3.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@codemirror/autocomplete@6.20.0':
     dependencies:
       '@codemirror/language': 6.11.3
@@ -15179,6 +15256,11 @@ snapshots:
     dependencies:
       chalk: 5.6.2
 
+  chalk@4.1.1:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -15336,6 +15418,18 @@ snapshots:
 
   cluster-key-slot@1.1.2: {}
 
+  code-inspector-plugin@1.3.4:
+    dependencies:
+      '@code-inspector/core': 1.3.4
+      '@code-inspector/esbuild': 1.3.4
+      '@code-inspector/mako': 1.3.4
+      '@code-inspector/turbopack': 1.3.4
+      '@code-inspector/vite': 1.3.4
+      '@code-inspector/webpack': 1.3.4
+      chalk: 4.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   codemirror@5.65.20: {}
 
   codemirror@6.65.7: {}
@@ -17678,6 +17772,11 @@ snapshots:
     dependencies:
       package-json: 10.0.1
 
+  launch-ide@1.3.1:
+    dependencies:
+      chalk: 4.1.2
+      dotenv: 16.6.1
+
   lazystream@1.0.1:
     dependencies:
       readable-stream: 2.3.8
@@ -18672,6 +18771,13 @@ snapshots:
       style-value-types: 5.1.2
       tslib: 2.4.0
 
+  portfinder@1.0.38:
+    dependencies:
+      async: 3.2.6
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-antd-fixes@0.2.0(postcss@8.5.6):