diff --git a/src/assets/stylus/root.styl b/src/assets/stylus/root.styl
index a5d4bce..f515993 100644
--- a/src/assets/stylus/root.styl
+++ b/src/assets/stylus/root.styl
@@ -20,8 +20,8 @@ body {
   .region .el-radio-button__original-radio:checked + .el-radio-button__inner {
     color: var(--theme-color) !important;
   }
-  letter-spacing: 1px;
-  user-select: none;
+  letter-spacing: .5px;
+  //user-select: none;
 }
 
 .el-message-box {
diff --git a/src/common/utils/desensitize.ts b/src/common/utils/desensitize.ts
new file mode 100644
index 0000000..9077625
--- /dev/null
+++ b/src/common/utils/desensitize.ts
@@ -0,0 +1,54 @@
+import Strings from '@/common/utils/strings.ts'
+
+export default {
+  mobile: (value: string) => {
+    if (Strings.isBlank(value)) {
+      return ''
+    }
+
+    if (!/^1[3-9]\d{9}$/.test(value)) {
+      return value
+    }
+    return value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+  },
+  idcard: (value: string) => {
+    if (Strings.isBlank(value)) {
+      return ''
+    }
+    if (value.length !== 18) {
+      return value
+    }
+    return value.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2')
+  },
+  email: (value: string) => {
+    if (Strings.isBlank(value)) {
+      return ''
+    }
+    const emailRegex = /^(\w)\w*@(\w+\.\w+)$/
+    if (!emailRegex.test(value)) {
+      return value
+    }
+    return value.replace(emailRegex, '$1****@$2')
+  },
+  bankCard: (value: string) => {
+    if (Strings.isBlank(value)) {
+      return ''
+    }
+    if (value.length < 10) {
+      return value
+    }
+    return value.replace(/(\d{6})\d+(\d{4})$/, '$1****$2')
+  },
+  name: (value: string) => {
+    if (Strings.isBlank(value)) {
+      return ''
+    }
+    if (value.length === 1) {
+      return value
+    } else if (value.length === 2) {
+      return value.replace(/(.)./, '$1*')
+    } else {
+      return value.replace(/(.).*(.)/, '$1*$2')
+    }
+  },
+}
diff --git a/src/components/a-desensitize/ADesensitize.vue b/src/components/a-desensitize/ADesensitize.vue
new file mode 100644
index 0000000..eb8ca97
--- /dev/null
+++ b/src/components/a-desensitize/ADesensitize.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import Desensitize from '@/common/utils/desensitize'
+
+const props = withDefaults(defineProps<{
+  value: string
+  type: keyof typeof Desensitize
+  show?: boolean
+}>(), {show: false})
+
+const showOriginal = ref(false)
+
+watch(
+  () => props.show,
+  (val) => {
+    showOriginal.value = val
+  })
+
+let clickTimer: number | null = null
+const transformedValue = computed(() => (showOriginal.value ? props.value : (Desensitize[props.type]?.(props.value) ?? props.value)))
+
+const handleClick = () => {
+  if (clickTimer) clearTimeout(clickTimer)
+  clickTimer = window.setTimeout(() => {
+    showOriginal.value = !showOriginal.value
+    clickTimer = null
+  }, 300)
+}
+
+const handleDblClick = async () => {
+  if (clickTimer) {
+    clearTimeout(clickTimer)
+    clickTimer = null
+  }
+  try {
+    await navigator.clipboard.writeText(props.value)
+    ElMessage.success('复制成功')
+  } catch (err) {
+    ElMessage.error('复制失败，请手动复制')
+  }
+}
+</script>
+
+<template>
+  <span
+    class="desensitize-txt"
+    @click="handleClick"
+    @dblclick.stop="handleDblClick"
+  >
+    {{ transformedValue }}
+  </span>
+</template>
+
+<style lang="stylus" scoped>
+.desensitize-txt {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  user-select none
+
+  &:hover {
+    color: var(--main-color);
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/components/a-form-panel/AFormPanel.tsx b/src/components/a-form-panel/AFormPanel.tsx
new file mode 100644
index 0000000..4eebfaf
--- /dev/null
+++ b/src/components/a-form-panel/AFormPanel.tsx
@@ -0,0 +1,138 @@
+import type { Arrayable } from 'element-plus/es/utils'
+import {
+  ElButton,
+  ElForm,
+  ElLoading,
+  ElMessage,
+  type FormInstance,
+  type FormItemRule,
+} from 'element-plus'
+import {
+  defineComponent,
+  withDirectives,
+} from 'vue'
+import type { SetupContext } from '@vue/runtime-core'
+import ADialog from '@/components/a-dialog/ADialog.vue'
+import Utils from '@/common/utils'
+import FormUtil from '@/common/utils/formUtil.ts'
+import styles from '@/components/a-form-panel/a-form-panel.module.styl'
+
+export interface FormPanelType<T extends object> {
+  title: string
+  detailsLoader: (id?: string) => Promise<T | undefined | null | void>
+  doSubmit: (data: T) => Promise<boolean | void>
+  rules?: Partial<Record<keyof T, Arrayable<FormItemRule>>>
+  labelWidth?: string
+  width?: string
+  modal?: boolean
+  appendToBody?: boolean
+}
+
+const component = defineComponent(
+  <T extends object>(props: FormPanelType<T>, {slots, expose}: SetupContext) => {
+    const formIns = useTemplateRef<FormInstance>('formRef')
+    const showDialog = ref(false)
+    const loading = ref(false)
+
+    const formData = Utils.resetAble(reactive<T>({} as T))
+
+    function dialogCloseHandler() {
+      formData.$reset()
+    }
+
+    const submiting = ref(false)
+
+    function submitHandler() {
+      submiting.value = true
+      FormUtil.submit(formIns, () => props.doSubmit(formData.$clone() as T))
+        .then(res => {
+          ElMessage.success('提交成功')
+          if ((res ?? true)) {
+            showDialog.value = false
+          }
+        })
+        .finally(() => {
+          submiting.value = false
+        })
+    }
+
+    const open = (id?: string) => {
+      loading.value = true
+      props.detailsLoader(id)
+        .then(res => {
+          formData.$reset((res ?? {}) as any)
+        })
+        .finally(() => {
+          loading.value = false
+        })
+      showDialog.value = true
+    }
+    expose({open})
+
+    return () => (<ADialog
+      show={showDialog.value}
+      onUpdate:show={val => showDialog.value = val}
+      closed={dialogCloseHandler}
+      submit-handler={submitHandler}
+      title={props.title}
+      width={props.width}
+      append-to-body={props.appendToBody}
+      modal={props.modal}
+    >
+      {{
+        default: () => withDirectives(<ElForm
+            ref="formRef"
+            label-width={props.labelWidth}
+            model={formData}
+            rules={props.rules}
+            class={styles.formPanel}>
+            {
+              slots.default?.(formData as T)
+            }
+          </ElForm>,
+          [ [ ElLoading.directive, loading.value ] ]),
+        footer: () => (
+          <>
+            <ElButton onClick={() => showDialog.value = false}>关闭</ElButton>
+            <ElButton loading={submiting.value} type="primary" onClick={submitHandler}>提交</ElButton>
+          </>
+        ),
+      }}
+    </ADialog>)
+  },
+  {
+    name: 'AFormPanel',
+    props: [ 'title', 'detailsLoader', 'doSubmit', 'rules', 'labelWidth', 'width', 'modal', 'appendToBody' ],
+  })
+
+export interface AFormPanelInstance extends InstanceType<typeof component> {
+  open: (id?: string) => void
+}
+
+
+export function buildFormPanelProps<T extends object>(props: DeepPartial<FormPanelType<T>>) {
+  if (props.labelWidth == null) {
+    props.labelWidth = '80px'
+  }
+  if (props.appendToBody == null) {
+    props.appendToBody = false
+  }
+  if (props.width == null) {
+    props.width = 'fit-content'
+  }
+  if (props.modal == null) {
+    props.modal = false
+  }
+  return reactive({
+    title: props.title!,
+    detailsLoader: props.detailsLoader!,
+    doSubmit: props.doSubmit!,
+    rules: props.rules,
+    labelWidth: props.labelWidth!,
+    width: props.width!,
+    modal: props.modal!,
+    appendToBody: props.appendToBody!,
+  } as FormPanelType<T>)
+}
+
+export default component
diff --git a/src/components/a-form-panel/AFormPanel.vue b/src/components/a-form-panel/AFormPanel.vue
deleted file mode 100644
index 3508090..0000000
--- a/src/components/a-form-panel/AFormPanel.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script generic="T extends object" lang="ts" setup>
-import ADialog from '@/components/a-dialog/ADialog.vue'
-import Utils from '@/common/utils'
-import type { Arrayable } from 'element-plus/es/utils'
-import {
-  ElMessage,
-  type FormInstance,
-  type FormItemRule,
-} from 'element-plus'
-import FormUtil from '@/common/utils/formUtil.ts'
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    detailsLoader: (id?: string) => Promise<T | undefined | null | void>
-    doSubmit: (data: T) => Promise<boolean | void>
-    rules?: Partial<Record<string, Arrayable<FormItemRule>>>
-    labelWidth?: string
-    width?: string
-    modal?: boolean
-    appendToBody?: boolean
-  }>(),
-  {
-    rules: () => ({} as Partial<Record<string, Arrayable<FormItemRule>>>),
-    labelWidth: '80px',
-  })
-
-const formIns = useTemplateRef<FormInstance>('formRef')
-const showDialog = ref(false)
-const loading = ref(false)
-
-const formData = Utils.resetAble(reactive<T>({} as T))
-
-function dialogCloseHandler() {
-  formData.$reset()
-}
-
-const submiting = ref(false)
-
-function submitHandler() {
-  submiting.value = true
-  FormUtil.submit(formIns, () => props.doSubmit(formData.$clone() as T))
-    .then(res => {
-      ElMessage.success('提交成功')
-      if ((res ?? true)) {
-        showDialog.value = false
-      }
-    })
-    .finally(() => {
-      submiting.value = false
-    })
-}
-
-defineExpose({
-  open(id?: string) {
-    loading.value = true
-    props.detailsLoader(id)
-      .then(res => {
-        formData.$reset((res ?? {}) as any)
-      })
-      .finally(() => {
-        loading.value = false
-      })
-    showDialog.value = true
-  },
-})
-</script>
-
-<template>
-  <ADialog
-    v-model:show="showDialog"
-    :closed="dialogCloseHandler"
-    :submit-handler="submitHandler"
-    :title="title"
-    :width="width"
-    :append-to-body="appendToBody"
-    :modal="modal"
-  >
-    <ElForm
-      ref="formRef"
-      v-loading="loading"
-      :label-width="labelWidth" :model="formData"
-      :rules="rules"
-      class="form-panel">
-      <slot :formData="formData as T"/>
-    </ElForm>
-    <template #footer>
-      <ElButton @click="showDialog = false">关闭</ElButton>
-      <ElButton :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
-    </template>
-  </ADialog>
-</template>
-
-<style lang="stylus">
-.form-panel > div:first-child {
-  padding 20px
-  display: grid;
-  gap: 0 30px;
-}
-</style>
diff --git a/src/components/a-form-panel/a-form-panel.module.styl b/src/components/a-form-panel/a-form-panel.module.styl
new file mode 100644
index 0000000..b8cf544
--- /dev/null
+++ b/src/components/a-form-panel/a-form-panel.module.styl
@@ -0,0 +1,5 @@
+.form-panel > div:first-child {
+  padding 20px
+  display: grid;
+  gap: 0 30px;
+}
diff --git a/src/components/a-form-panel/a-form-panel.ts b/src/components/a-form-panel/a-form-panel.ts
new file mode 100644
index 0000000..636be21
--- /dev/null
+++ b/src/components/a-form-panel/a-form-panel.ts
@@ -0,0 +1,29 @@
+import type { Arrayable } from 'element-plus/es/utils'
+import type { FormItemRule } from 'element-plus'
+
+export interface FormPanelType<T = any> {
+  title: string
+  detailsLoader: (id?: string) => Promise<T | undefined | null | void>
+  doSubmit: (data: T) => Promise<boolean | void>
+  rules?: Partial<Record<string, Arrayable<FormItemRule>>>
+  labelWidth: string
+  width: string
+  modal: boolean
+  appendToBody: boolean
+}
+
+export function buildFormPanelProps<T = any>(props: DeepPartial<FormPanelType<T>>) {
+  if (props.labelWidth == null) {
+    props.labelWidth = '80px'
+  }
+  if (props.appendToBody == null) {
+    props.appendToBody = false
+  }
+  if (props.width == null) {
+    props.width = 'fit-content'
+  }
+  if (props.modal == null) {
+    props.modal = false
+  }
+  return reactive(props as FormPanelType<T>)
+}
diff --git a/src/components/a-page/a-table-page/ATablePage.tsx b/src/components/a-page/a-table-page/ATablePage.tsx
index 57f1b6f..629b480 100644
--- a/src/components/a-page/a-table-page/ATablePage.tsx
+++ b/src/components/a-page/a-table-page/ATablePage.tsx
@@ -142,10 +142,16 @@ interface FormPropsType<P, T extends DefaultRow> {
  * 页布局配置
  */
 interface PageLayoutType {
+  /**
+   * 查询表单高度，传入数字时，单位：fr，传入字符串时不会而外添加单位，，默认：1fr
+   */
+  searchFormHeight: number | string
   /**
    * 数据表格高度，传入数字时，单位：fr，传入字符串时不会而外添加单位，，默认：9fr
    */
   dataListHeight: number | string
+  showHighForm: boolean
+  enableHighForm: boolean
 }
 
 interface ATablePageType<P extends object, T extends DefaultRow> {
@@ -187,10 +193,22 @@ function buildSearchForm<P, T extends DefaultRow>(searchForm: DeepPartial<FormPr
 }
 
 function buildPageLayout(pageLayout: DeepPartial<PageLayoutType> = {}) {
+  if (pageLayout.searchFormHeight == null) {
+    pageLayout.searchFormHeight = 1
+  }
+
   if (pageLayout.dataListHeight == null) {
     pageLayout.dataListHeight = 9
   }
 
+  if (pageLayout.showHighForm == null) {
+    pageLayout.showHighForm = false
+  }
+
+  if (pageLayout.enableHighForm == null) {
+    pageLayout.enableHighForm = true
+  }
+
   return pageLayout
 }
 
@@ -211,13 +229,16 @@ function buildTable<P extends object, T extends object>(table: DeepPartial<Table
       if (tableAction.confirm.confirmButtonText == null) tableAction.confirm.confirmButtonText = '是'
       if (tableAction.confirm.width == null) tableAction.confirm.width = '180'
     }
+    if (tableAction.type == null) {
+      tableAction.type = 'primary'
+    }
   }
   if (table.actionColumn.foldLimit == null) {
     table.actionColumn.foldLimit = 3
   }
 
   if (table.actionColumn.width == null) {
-    table.actionColumn.width = Math.min(table.actionColumn.tableActions.length, table.actionColumn.foldLimit) * 50
+    table.actionColumn.width = Math.min(table.actionColumn.tableActions.length, table.actionColumn.foldLimit) * 50 + 10
   }
 
   if (table.emptyText == null) {
@@ -262,7 +283,7 @@ const component = defineComponent(
 
     const totalCount = ref(0)
     const loading = ref<boolean>(false)
-    const showHighForm = ref<boolean>(false)
+    const showHighForm = ref<boolean>(props.pageLayout.showHighForm)
 
     const doSearch = () => {
       loading.value = true
@@ -331,8 +352,10 @@ const component = defineComponent(
 
     const pageCssParam = computed(() => {
       const dataListHeight = props.pageLayout.dataListHeight
+      const searchFormHeight = props.pageLayout.searchFormHeight
       return {
         '--data-list-height': Types.isString(dataListHeight) ? dataListHeight : dataListHeight + 'fr',
+        '--search-form-height': Types.isString(searchFormHeight) ? searchFormHeight : searchFormHeight + 'fr',
       }
     })
     const actionColumnBtnRender = (scope: ColumnScopeType<T>, tableAction: TableActionType<T>) => {
@@ -466,10 +489,14 @@ const component = defineComponent(
         }}
       </ElTableColumn>)
     }
+    const sortChangeHandler = ({prop, order}: { prop: string, order: 'ascending' | 'descending' | null }) => {
+      formData.orders = order == null ? undefined : (prop + ':' + (order == 'ascending' ? 'asc' : 'desc'))
+      doSearch()
+    }
     onMounted(doSearch)
     return () => (<APage class={[ styles.tablePage, showHighForm.value ? '' : styles.folder ]} style={pageCssParam.value}>
       <div class={styles.searchFormWrapper} style={highFormCssParam.value}>
-        <ElScrollbar>
+        {props.pageLayout.enableHighForm ? (<ElScrollbar>
           {/*@ts-ignore*/}
           <ElForm class={styles.searchForm} onSubmit={withModifiers(doSearch, [ 'prevent' ])} labelWidth={props.searchForm.highForm.labelWidth + 'px'}>
             {
@@ -477,7 +504,7 @@ const component = defineComponent(
             }
             <button style="display: none" type="submit"/>
           </ElForm>
-        </ElScrollbar>
+        </ElScrollbar>) : <></>}
       </div>
       <div class={styles.dataList}>
         <div class={styles.toolBar}>
@@ -530,9 +557,11 @@ const component = defineComponent(
                   <ElButton icon={elIcons.Download} loading={loading.value} type="default" onClick={doExport}/>
                 </ElTooltip>)
               }
-              <ElTooltip content={showHighForm.value ? '关闭高级搜索' : '打开高级搜索'} placement="top">
-                <ElButton class={showHighForm.value ? styles.filterBtnActive : ''} icon={elIcons.Filter} type="default" onClick={showHighFormHandle}/>
-              </ElTooltip>
+              {
+                props.pageLayout.enableHighForm ? (<ElTooltip
+                  content={showHighForm.value ? '关闭高级搜索' : '打开高级搜索'} placement="top">
+                  <ElButton class={showHighForm.value ? styles.filterBtnActive : ''} icon={elIcons.Filter} type="default" onClick={showHighFormHandle}/>
+                </ElTooltip>) : <></>}
             </div>
           </div>
         </div>
@@ -548,6 +577,7 @@ const component = defineComponent(
             cell-class-name="table-cell"
             header-row-class-name="table-header"
             class="data-table"
+            onSort-change={sortChangeHandler}
           >
             {
               slots.columns?.()
diff --git a/src/components/a-page/a-table-page/a-table-page.module.styl b/src/components/a-page/a-table-page/a-table-page.module.styl
index 78f12d5..91120f6 100644
--- a/src/components/a-page/a-table-page/a-table-page.module.styl
+++ b/src/components/a-page/a-table-page/a-table-page.module.styl
@@ -1,6 +1,6 @@
 .table-page {
   grid-template-columns 1fr
-  grid-template-rows: minmax(74px, 1fr) minmax(277px, var(--data-list-height));
+  grid-template-rows: minmax(74px, var(--search-form-height)) minmax(277px, var(--data-list-height));
   grid-auto-rows: minmax(0, auto);
   gap 10px
 
@@ -74,11 +74,13 @@
 
       .tool-bar-right {
         display grid
-        grid-template-columns: minmax(200px, 1fr) 150px;
+        grid-template-columns: minmax(200px, 1fr) auto;
         grid-auto-rows: 32px;
         gap 10px
 
         & > div:first-child {
+          justify-self: end;
+
           :global(.el-form) {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
@@ -92,7 +94,10 @@
 
         & > div:last-child {
           display: flex;
-          justify-content: space-evenly;
+          gap 10px
+          justify-content: flex-end;
+          min-width 65px
+          max-width 150px
 
           :global(.el-button--default) {
             width 32px
@@ -119,7 +124,6 @@
       }
     }
 
-
     /*:global(.el-table) {
       width 100%
       height: 100%;
@@ -199,6 +203,7 @@
       }
     }
 */
+
     :global(.el-pagination) {
       justify-content center
 
diff --git a/src/components/a-table-column/ADesensitizeColumn.vue b/src/components/a-table-column/ADesensitizeColumn.vue
new file mode 100644
index 0000000..2ed396e
--- /dev/null
+++ b/src/components/a-table-column/ADesensitizeColumn.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import ADesensitize from '@/components/a-desensitize/ADesensitize.vue'
+
+const showDesensitize = ref(false)
+
+defineProps<{
+  label: string
+  prop: string
+  desensitizeType: 'mobile' | 'idcard' | 'email' | 'bankCard' | 'name'
+}>()
+
+</script>
+
+<template>
+  <ElTableColumn :label="label">
+    <template #default="scope">
+      <span>
+        <slot :scope="scope"/>
+      <ADesensitize :show="showDesensitize" :type="desensitizeType" :value="scope.row[prop]"/>
+      </span>
+    </template>
+    <template #header>
+      <span class="desensitize-header" @click="showDesensitize = !showDesensitize">
+        {{ label }}
+      </span>
+    </template>
+  </ElTableColumn>
+</template>
+
+<style lang="stylus" scoped>
+.desensitize-header {
+  display: inline-block;
+  cursor: pointer;
+  user-select none
+
+  &:hover {
+    color: var(--main-color);
+    text-decoration: underline;
+  }
+}
+</style>
diff --git a/src/dts/components.d.ts b/src/dts/components.d.ts
index 9c8065c..c718434 100644
--- a/src/dts/components.d.ts
+++ b/src/dts/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@@ -33,6 +34,7 @@ declare module 'vue' {
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconCircleClose: typeof import('@element-plus/icons-vue')['CircleClose']
+    ElIconPicture: typeof import('@element-plus/icons-vue')['Picture']
     ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
@@ -53,6 +55,8 @@ declare module 'vue' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTransfer: typeof import('element-plus/es')['ElTransfer']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -70,6 +74,7 @@ declare global {
   const ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
   const ElButton: typeof import('element-plus/es')['ElButton']
   const ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+  const ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
   const ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
   const ElContainer: typeof import('element-plus/es')['ElContainer']
   const ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
@@ -86,6 +91,7 @@ declare global {
   const ElHeader: typeof import('element-plus/es')['ElHeader']
   const ElIcon: typeof import('element-plus/es')['ElIcon']
   const ElIconCircleClose: typeof import('@element-plus/icons-vue')['CircleClose']
+  const ElIconPicture: typeof import('@element-plus/icons-vue')['Picture']
   const ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
   const ElImage: typeof import('element-plus/es')['ElImage']
   const ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
@@ -106,6 +112,8 @@ declare global {
   const ElTabs: typeof import('element-plus/es')['ElTabs']
   const ElTag: typeof import('element-plus/es')['ElTag']
   const ElTooltip: typeof import('element-plus/es')['ElTooltip']
+  const ElTransfer: typeof import('element-plus/es')['ElTransfer']
+  const ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
   const ElUpload: typeof import('element-plus/es')['ElUpload']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/pages/cst/customer/CustomerForm.vue b/src/pages/cst/customer/CustomerForm.vue
index 9138a08..4938a65 100644
--- a/src/pages/cst/customer/CustomerForm.vue
+++ b/src/pages/cst/customer/CustomerForm.vue
@@ -1,9 +1,9 @@
 <template>
   <AFormPanel
     ref="formPanel"
+    :rules="rules"
     :details-loader="detailsLoader"
     :do-submit="doSubmit"
-    :rules="rules"
     :title="status === 'add' ? '新建客户' : '修改客户信息'">
     <template #default="{formData}">
       <div class="form-items">
@@ -38,7 +38,7 @@
 import CustomerApi from '@/pages/cst/customer/customer-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import {
   identityCategory,
   settlementWay,
@@ -83,7 +83,7 @@ function doSubmit(data: CustomerTypes.TableData) {
 }
 
 defineExpose({
-  open(data?: CustomerTypes.TableData) {
+  open(data?: CustomerTypes.SearchCustomerResult) {
     formPanelIns.value?.open(data?.id)
   },
 })
diff --git a/src/pages/cst/customer/constants.ts b/src/pages/cst/customer/constants.ts
index 46bdc88..f78d979 100644
--- a/src/pages/cst/customer/constants.ts
+++ b/src/pages/cst/customer/constants.ts
@@ -15,6 +15,17 @@ const settlementWayList = [
   },
 ] as const
 
+const orgCategoryList = [
+  {
+    val: 'GeRen',
+    txt: '个人',
+  },
+  {
+    val: 'QiYe',
+    txt: '企业',
+  },
+] as const
+
 const identityCategoryList = [
   {
     val: 'ChanFei',
@@ -40,3 +51,4 @@ const identityCategoryList = [
 
 export const settlementWay = createEnum(settlementWayList)
 export const identityCategory = createEnum(identityCategoryList)
+export const orgCategory = createEnum(orgCategoryList)
diff --git a/src/pages/cst/customer/customer.d.ts b/src/pages/cst/customer/customer.d.ts
index e6575e5..30ea766 100644
--- a/src/pages/cst/customer/customer.d.ts
+++ b/src/pages/cst/customer/customer.d.ts
@@ -38,7 +38,7 @@ declare global {
       manager?: boolean
     }
 
-    interface SearchCustomerResult {
+    interface SearchCustomerResult extends CustomerInfo {
       // 用户 Id；一个用户可以有多个身份
       userId?: string
       username?: string
@@ -46,6 +46,8 @@ declare global {
       nickname?: string
       // 客户联系电话
       phone?: string
+      orgCategory?: string
+      orgCategoryTxt?: string
       customerInfos?: CustomerInfo[]
     }
 
diff --git a/src/pages/cst/customer/purchaser/Purchaser.vue b/src/pages/cst/customer/purchaser/Purchaser.vue
new file mode 100644
index 0000000..3a8fc47
--- /dev/null
+++ b/src/pages/cst/customer/purchaser/Purchaser.vue
@@ -0,0 +1,144 @@
+<template>
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
+      <ElFormItem label="账号">
+        <ElInput v-model="formData.username" placeholder="账号"/>
+      </ElFormItem>
+      <ElFormItem label="客户姓名">
+        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
+      </ElFormItem>
+      <ElFormItem label="联系电话">
+        <ElInput v-model="formData.phone" placeholder="联系电话"/>
+      </ElFormItem>
+      <ElFormItem label="企业名称">
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
+      </ElFormItem>
+      <ElFormItem label="主体类型">
+        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
+          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="结算方式">
+        <ElSelect v-model="formData.settlementWay" placeholder="结算方式">
+          <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="注册时间">
+        <ADtPicker v-model="formData.regdateTimes" :change-handler="research"/>
+      </ElFormItem>
+    </template>
+    <template #simpleFormItem="formData">
+      <ElFormItem>
+        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
+          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.phone" placeholder="联系电话"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
+      </ElFormItem>
+    </template>
+    <template #columns>
+      <ElTableColumn label="账号" prop="username"/>
+      <ADesensitizeColumn desensitize-type="name" label="客户姓名" prop="nickname"/>
+      <ADesensitizeColumn desensitize-type="mobile" label="联系电话" prop="phone"/>
+      <ElTableColumn label="主体类型">
+        <template #default="scope">
+          <!-- <span>
+             <AIcon v-if="scope.row.identityCategory === identityCategory.ChanFei" name="kehu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.YunShu" name="yunshu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.XiaoNa" name="xiaonachang" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.CaiGou" name="icon-cart" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.SiJi" name="siji" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
+           </span> -->
+          <span>
+            <AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--main-color); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.orgCategory === orgCategory.QiYe" name="yunshu" style="color: var(--el-color-danger); font-weight: 600"/>
+            <span style="margin-left: 8px">{{ scope.row.orgCategoryTxt }}</span>
+          </span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="企业名称" prop="orgName">
+        <template #default="scope">
+          <span>{{ scope.row.orgName ?? '-' }}</span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="结算方式" prop="">
+        <template #default="scope">
+         <span>
+            <AIcon v-if="scope.row.settlementWay === settlementWay.YueJie" name="yuejie" style="color: var(--el-color-success); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.settlementWay === settlementWay.YuE" name="yue" style="color: var(--el-color-success); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.settlementWay === settlementWay.XianFu" name="weixin" style="color: var(--el-color-success); font-weight: 600"/>
+            <span style="margin-left: 8px">{{ scope.row.settlementWayTxt }}</span>
+          </span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="企业负责人">
+        <template #default="scope">
+          <ElTag v-if="scope.row.manager" type="success">是</ElTag>
+          <ElTag v-else type="danger">否</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="注册时间" prop="regdate"/>
+    </template>
+    <CustomerForm ref="customerForm" :research="research"/>
+  </ATablePage>
+</template>
+
+<script lang="ts" setup>
+import CustomerApi from '@/pages/cst/customer/customer-api.ts'
+import CustomerForm from '@/pages/cst/customer/CustomerForm.vue'
+import {
+  orgCategory,
+  settlementWay,
+} from '@/pages/cst/customer/constants.ts'
+import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
+import AIcon from '@/components/a-icon/AIcon.vue'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
+import ADesensitizeColumn from '@/components/a-table-column/ADesensitizeColumn.vue'
+
+const customerFormIns = useTemplateRef<InstanceType<typeof CustomerForm>>('customerForm')
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
+
+function research() {
+  tablePageIns.value?.doSearch()
+}
+
+const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, CustomerTypes.SearchCustomerResult>({
+  pageLayout: {
+    searchFormHeight: '165px',
+    dataListHeight: 1,
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          action({row}) {
+            customerFormIns.value?.open(row)
+          },
+        },
+      ],
+    },
+  },
+  searchForm: {
+    highForm: {
+      contentWidth: 342,
+    },
+    paging: CustomerApi.paging,
+  },
+})
+
+</script>
diff --git a/src/pages/cst/customer/purchaser/page.ts b/src/pages/cst/customer/purchaser/page.ts
new file mode 100644
index 0000000..31a0560
--- /dev/null
+++ b/src/pages/cst/customer/purchaser/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/cst/customer/purchaser/Purchaser.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/cst/customer/transport/Transport.vue b/src/pages/cst/customer/transport/Transport.vue
new file mode 100644
index 0000000..b8679d7
--- /dev/null
+++ b/src/pages/cst/customer/transport/Transport.vue
@@ -0,0 +1,143 @@
+<template>
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
+      <ElFormItem label="账号">
+        <ElInput v-model="formData.username" placeholder="账号"/>
+      </ElFormItem>
+      <ElFormItem label="客户姓名">
+        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
+      </ElFormItem>
+      <ElFormItem label="联系电话">
+        <ElInput v-model="formData.phone" placeholder="联系电话"/>
+      </ElFormItem>
+      <ElFormItem label="企业名称">
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
+      </ElFormItem>
+      <ElFormItem label="主体类型">
+        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
+          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="结算方式">
+        <ElSelect v-model="formData.settlementWay" placeholder="结算方式">
+          <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="注册时间">
+        <ADtPicker v-model="formData.regdateTimes" :change-handler="research"/>
+      </ElFormItem>
+    </template>
+    <template #simpleFormItem="formData">
+      <ElFormItem>
+        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
+          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.phone" placeholder="联系电话"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
+      </ElFormItem>
+    </template>
+    <template #columns>
+      <ElTableColumn label="账号" prop="username"/>
+      <ADesensitizeColumn desensitize-type="name" label="客户姓名" prop="nickname"/>
+      <ADesensitizeColumn desensitize-type="mobile" label="联系电话" prop="phone"/>
+      <ElTableColumn label="主体类型">
+        <template #default="scope">
+          <!-- <span>
+             <AIcon v-if="scope.row.identityCategory === identityCategory.ChanFei" name="kehu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.YunShu" name="yunshu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.XiaoNa" name="xiaonachang" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.CaiGou" name="icon-cart" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.SiJi" name="siji" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
+           </span> -->
+          <span>
+            <AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--main-color); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.orgCategory === orgCategory.QiYe" name="yunshu" style="color: var(--el-color-danger); font-weight: 600"/>
+            <span style="margin-left: 8px">{{ scope.row.orgCategoryTxt }}</span>
+          </span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="企业名称" prop="orgName">
+        <template #default="scope">
+          <span>{{ scope.row.orgName ?? '-' }}</span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="结算方式" prop="">
+        <template #default="scope">
+         <span>
+            <AIcon v-if="scope.row.settlementWay === settlementWay.YueJie" name="yuejie" style="color: var(--el-color-success); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.settlementWay === settlementWay.YuE" name="yue" style="color: var(--el-color-success); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.settlementWay === settlementWay.XianFu" name="weixin" style="color: var(--el-color-success); font-weight: 600"/>
+            <span style="margin-left: 8px">{{ scope.row.settlementWayTxt }}</span>
+          </span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="企业负责人">
+        <template #default="scope">
+          <ElTag v-if="scope.row.manager" type="success">是</ElTag>
+          <ElTag v-else type="danger">否</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="注册时间" prop="regdate"/>
+    </template>
+    <CustomerForm ref="customerForm" :research="research"/>
+  </ATablePage>
+</template>
+
+<script lang="ts" setup>
+import CustomerApi from '@/pages/cst/customer/customer-api.ts'
+import CustomerForm from '@/pages/cst/customer/CustomerForm.vue'
+import {
+  orgCategory,
+  settlementWay,
+} from '@/pages/cst/customer/constants.ts'
+import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
+import AIcon from '@/components/a-icon/AIcon.vue'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
+import ADesensitizeColumn from '@/components/a-table-column/ADesensitizeColumn.vue'
+
+const customerFormIns = useTemplateRef<InstanceType<typeof CustomerForm>>('customerForm')
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
+
+function research() {
+  tablePageIns.value?.doSearch()
+}
+
+const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, CustomerTypes.SearchCustomerResult>({
+  pageLayout: {
+    searchFormHeight: '165px',
+    dataListHeight: 1,
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          action({row}) {
+            customerFormIns.value?.open(row)
+          },
+        },
+      ],
+    },
+  },
+  searchForm: {
+    highForm: {
+      contentWidth: 342,
+    },
+    paging: CustomerApi.paging,
+  },
+})
+</script>
diff --git a/src/pages/cst/customer/transport/page.ts b/src/pages/cst/customer/transport/page.ts
new file mode 100644
index 0000000..98fb85c
--- /dev/null
+++ b/src/pages/cst/customer/transport/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/cst/customer/transport/Transport.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/cst/customer/waste-prod/WasteProd.vue b/src/pages/cst/customer/waste-prod/WasteProd.vue
new file mode 100644
index 0000000..3a8fc47
--- /dev/null
+++ b/src/pages/cst/customer/waste-prod/WasteProd.vue
@@ -0,0 +1,144 @@
+<template>
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
+      <ElFormItem label="账号">
+        <ElInput v-model="formData.username" placeholder="账号"/>
+      </ElFormItem>
+      <ElFormItem label="客户姓名">
+        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
+      </ElFormItem>
+      <ElFormItem label="联系电话">
+        <ElInput v-model="formData.phone" placeholder="联系电话"/>
+      </ElFormItem>
+      <ElFormItem label="企业名称">
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
+      </ElFormItem>
+      <ElFormItem label="主体类型">
+        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
+          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="结算方式">
+        <ElSelect v-model="formData.settlementWay" placeholder="结算方式">
+          <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="注册时间">
+        <ADtPicker v-model="formData.regdateTimes" :change-handler="research"/>
+      </ElFormItem>
+    </template>
+    <template #simpleFormItem="formData">
+      <ElFormItem>
+        <ElSelect v-model="formData.identityCategory" placeholder="主体类型">
+          <ElOption v-for="item in orgCategory" :key="item.val" :label="item.txt" :value="item.val"/>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.phone" placeholder="联系电话"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
+      </ElFormItem>
+    </template>
+    <template #columns>
+      <ElTableColumn label="账号" prop="username"/>
+      <ADesensitizeColumn desensitize-type="name" label="客户姓名" prop="nickname"/>
+      <ADesensitizeColumn desensitize-type="mobile" label="联系电话" prop="phone"/>
+      <ElTableColumn label="主体类型">
+        <template #default="scope">
+          <!-- <span>
+             <AIcon v-if="scope.row.identityCategory === identityCategory.ChanFei" name="kehu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.YunShu" name="yunshu" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.XiaoNa" name="xiaonachang" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.CaiGou" name="icon-cart" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <AIcon v-else-if="scope.row.identityCategory === identityCategory.SiJi" name="siji" style="color: var(&#45;&#45;main-color); font-weight: 600"/>
+             <span style="margin-left: 8px">{{ scope.row.identityCategoryTxt }}</span>
+           </span> -->
+          <span>
+            <AIcon v-if="scope.row.orgCategory === orgCategory.GeRen" name="kehu" style="color: var(--main-color); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.orgCategory === orgCategory.QiYe" name="yunshu" style="color: var(--el-color-danger); font-weight: 600"/>
+            <span style="margin-left: 8px">{{ scope.row.orgCategoryTxt }}</span>
+          </span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="企业名称" prop="orgName">
+        <template #default="scope">
+          <span>{{ scope.row.orgName ?? '-' }}</span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="结算方式" prop="">
+        <template #default="scope">
+         <span>
+            <AIcon v-if="scope.row.settlementWay === settlementWay.YueJie" name="yuejie" style="color: var(--el-color-success); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.settlementWay === settlementWay.YuE" name="yue" style="color: var(--el-color-success); font-weight: 600"/>
+            <AIcon v-else-if="scope.row.settlementWay === settlementWay.XianFu" name="weixin" style="color: var(--el-color-success); font-weight: 600"/>
+            <span style="margin-left: 8px">{{ scope.row.settlementWayTxt }}</span>
+          </span>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="企业负责人">
+        <template #default="scope">
+          <ElTag v-if="scope.row.manager" type="success">是</ElTag>
+          <ElTag v-else type="danger">否</ElTag>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="注册时间" prop="regdate"/>
+    </template>
+    <CustomerForm ref="customerForm" :research="research"/>
+  </ATablePage>
+</template>
+
+<script lang="ts" setup>
+import CustomerApi from '@/pages/cst/customer/customer-api.ts'
+import CustomerForm from '@/pages/cst/customer/CustomerForm.vue'
+import {
+  orgCategory,
+  settlementWay,
+} from '@/pages/cst/customer/constants.ts'
+import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
+import AIcon from '@/components/a-icon/AIcon.vue'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
+import ADesensitizeColumn from '@/components/a-table-column/ADesensitizeColumn.vue'
+
+const customerFormIns = useTemplateRef<InstanceType<typeof CustomerForm>>('customerForm')
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
+
+function research() {
+  tablePageIns.value?.doSearch()
+}
+
+const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, CustomerTypes.SearchCustomerResult>({
+  pageLayout: {
+    searchFormHeight: '165px',
+    dataListHeight: 1,
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          action({row}) {
+            customerFormIns.value?.open(row)
+          },
+        },
+      ],
+    },
+  },
+  searchForm: {
+    highForm: {
+      contentWidth: 342,
+    },
+    paging: CustomerApi.paging,
+  },
+})
+
+</script>
diff --git a/src/pages/cst/customer/waste-prod/page.ts b/src/pages/cst/customer/waste-prod/page.ts
new file mode 100644
index 0000000..d973e8a
--- /dev/null
+++ b/src/pages/cst/customer/waste-prod/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/cst/customer/waste-prod/WasteProd.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/cst/driver/Driver.vue b/src/pages/cst/driver/Driver.vue
index ef1cc08..6a4b224 100644
--- a/src/pages/cst/driver/Driver.vue
+++ b/src/pages/cst/driver/Driver.vue
@@ -1,34 +1,33 @@
 <template>
-  <FormPage
-    ref="formPage"
-    :action-column="actionColumn"
-    :paging="paging">
-    <template #searchFormItem="{searchForm}">
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
       <ElFormItem label="归属用户">
-        <ElInput v-model="searchForm.userId" placeholder="归属用户"/>
+        <ElInput v-model="formData.userId" placeholder="归属用户"/>
       </ElFormItem>
       <ElFormItem label="驾驶证编号">
-        <ElInput v-model="searchForm.drivingLicenceNo" placeholder="驾驶证编号"/>
+        <ElInput v-model="formData.drivingLicenceNo" placeholder="驾驶证编号"/>
       </ElFormItem>
       <ElFormItem label="司机姓名">
-        <ElInput v-model="searchForm.driverName" placeholder="司机姓名"/>
+        <ElInput v-model="formData.driverName" placeholder="司机姓名"/>
       </ElFormItem>
       <ElFormItem label="手机号">
-        <ElInput v-model="searchForm.phone" placeholder="手机号"/>
+        <ElInput v-model="formData.phone" placeholder="手机号"/>
       </ElFormItem>
       <ElFormItem label="创建时间">
-        <ElInput v-model="searchForm.createTime" placeholder="创建时间"/>
+        <ElInput v-model="formData.createTime" placeholder="创建时间"/>
       </ElFormItem>
       <ElFormItem label="修改时间">
-        <ElInput v-model="searchForm.modifyTime" placeholder="修改时间"/>
+        <ElInput v-model="formData.modifyTime" placeholder="修改时间"/>
       </ElFormItem>
     </template>
-    <template #simpleSearchFormItem="{searchForm}">
+    <template #simpleFormItem="formData">
       <ElFormItem>
-        <ElInput v-model="searchForm.driverName" placeholder="司机姓名"/>
+        <ElInput v-model="formData.driverName" placeholder="司机姓名"/>
       </ElFormItem>
       <ElFormItem>
-        <ElInput v-model="searchForm.phone" placeholder="手机号"/>
+        <ElInput v-model="formData.phone" placeholder="手机号"/>
       </ElFormItem>
     </template>
     <template #columns>
@@ -36,62 +35,65 @@
       <ElTableColumn label="归属公司" prop="orgName"/>
       <ElTableColumn label="驾驶证编号" prop="drivingLicenceNo"/>
       <ElTableColumn label="手机号" prop="phone"/>
-      <ElTableColumn label="驾驶证有效期" prop="licenceStartTime"/>
-      <ElTableColumn label="驾驶证有效期" prop="licenceEndTime"/>
-      <ElTableColumn label="忙碌中" prop="busy"/>
-      <ElTableColumn label="创建时间" prop="createTime"/>
-      <ElTableColumn label="修改时间" prop="modifyTime"/>
+      <ElTableColumn label="驾驶证有效期" prop="licenceStartTime">
+        <template #default="{ row }">
+          {{ row.licenceStartTime + ' 至 ' + (row.licenceEndTime ?? '永久') }}
+        </template>
+      </ElTableColumn>
+      <ElTableColumn label="状态" prop="busy" width="100">
+        <template #default="{ row }">
+          <ElTag :type="row.busy ? 'warning' : 'success'">{{ row.busy ? '运输中' : '空闲' }}</ElTag>
+        </template>
+      </ElTableColumn>
     </template>
     <DriverForm ref="driverForm" :research="research"/>
     <DriverDetail ref="driverDetail" @edit-succ="research"/>
-  </FormPage>
+  </ATablePage>
 </template>
 
 <script lang="ts" setup>
 import DriverApi from '@/pages/cst/driver/driver-api.ts'
 import DriverForm from '@/pages/cst/driver/DriverForm.vue'
 import DriverDetail from '@/pages/cst/driver/DriverDetail.vue'
-import FormPage from '@/components/page/FormPage.vue'
-import type { ActionColumnType } from '@/components/page/a-page-type.ts'
-import type { ComponentExposed } from 'vue-component-type-helpers'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
 
 const driverDetailIns = useTemplateRef<InstanceType<typeof DriverDetail>>('driverDetail')
-const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
 
-const actionColumn = reactive<ActionColumnType<DriverTypes.SearchDriverResult>>({
-  tableActions: [
-    {
-      tooltip: '详情',
-      icon: 'Postcard',
-      action({row}) {
-        driverDetailIns.value?.open(row)
-      },
-    },
-    {
-      icon: 'Delete',
-      loading: false,
-      type: 'danger',
-      tooltip: '删除',
-      confirm: {
-        title: '是否删除当前数据',
-      },
-      action({row}) {
-        return DriverApi.del([ row.id! ])
-          .then(() => {
-            ElMessage.success('删除成功')
-            return true
-          })
-      },
-    },
-  ],
-})
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 
 function research() {
-  formPageIns.value?.doSearch()
+  tablePageIns.value?.doSearch()
 }
 
-function paging(param: DriverTypes.SearchDriverParam) {
-  return DriverApi.paging(param)
-}
+const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, CustomerTypes.SearchCustomerResult>({
+  pageLayout: {
+    searchFormHeight: '125px',
+    dataListHeight: 1,
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '详情',
+          icon: 'Postcard',
+          type: 'primary',
+          action({row}) {
+            driverDetailIns.value?.open(row)
+          },
+        },
+      ],
+    },
+  },
+  searchForm: {
+    highForm: {
+      contentWidth: 342,
+    },
+    paging: DriverApi.paging,
+  },
+})
+
 
 </script>
diff --git a/src/pages/cst/driver/DriverDetail.vue b/src/pages/cst/driver/DriverDetail.vue
index 727dab4..961370b 100644
--- a/src/pages/cst/driver/DriverDetail.vue
+++ b/src/pages/cst/driver/DriverDetail.vue
@@ -1,124 +1,54 @@
 <template>
-  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
-    <el-descriptions class="margin-top" title="司机详情" :column="3" border>
-      <el-descriptions-item label="司机姓名">
-        {{ formData.driverName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="所属公司">
-        {{ formData.orgName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="证书编号">
-        {{ formData?.drivingLicenceNo }}
-      </el-descriptions-item>
-      <el-descriptions-item label="手机号">
-        {{ formData.phone }}
-      </el-descriptions-item>
-      <el-descriptions-item label="创建时间">
-        {{ formData.createTime }}
-      </el-descriptions-item>
-      <el-descriptions-item label="修改时间">
-        {{ formData.modifyTime }}
-      </el-descriptions-item>
-      <el-descriptions-item label="驾驶证">
-        <el-image style="width: 100px; height: 100px" :src="AppApi.fileUrl(formData.drivingLicence)" :preview-src-list="[AppApi.fileUrl(formData.drivingLicence)]" show-progress></el-image>
-      </el-descriptions-item>
-      <el-descriptions-item label="驾驶证有效期"> {{ formData.licenceStartTime }} ~ {{ formData.licenceEndTime }} </el-descriptions-item>
-      <!-- <el-descriptions-item>
-        <el-tag size="small">School</el-tag>
-      </el-descriptions-item> -->
-    </el-descriptions>
-    <template #footer>
-      <ElButton @click="showDialog = false">关闭</ElButton>
+  <ADetailPanel
+    ref="detailPanel"
+    v-bind="detailPanelProps"
+  >
+    <template #default="detailData">
+      <ElDescriptions :column="3" border title="司机详情">
+        <ElDescriptionsItem label="司机姓名">
+          {{ detailData.driverName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="所属公司">
+          {{ detailData.orgName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="证书编号">
+          {{ detailData?.drivingLicenceNo }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="手机号">
+          {{ detailData.phone }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">
+          {{ detailData.createTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="修改时间">
+          {{ detailData.modifyTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="驾驶证">
+          <ElImage :preview-src-list="[AppApi.fileUrl(detailData.drivingLicence)]" :src="AppApi.fileUrl(detailData.drivingLicence)" show-progress style="width: 100px; height: 100px"></ElImage>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="驾驶证有效期"> {{ detailData.licenceStartTime + ' 至 ' + (detailData.licenceEndTime ?? '永久') }}</ElDescriptionsItem>
+      </ElDescriptions>
     </template>
-  </ElDialog>
+  </ADetailPanel>
 </template>
 
 <script lang="ts" setup>
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
 import DriverApi from '@/pages/cst/driver/driver-api.ts'
-import Strings from '@/common/utils/strings.ts'
-// import FormUtil from '@/common/utils/formUtil.ts'
-// import {
-//   ElMessage,
-//   type FormInstance,
-//   type FormRules,
-// } from 'element-plus'
 import AppApi from '@/common/app/app-api.ts'
 
-const emits = defineEmits(["editSucc"]);
-const showDialog = ref(false);
-// const submiting = ref(false);
-const status = ref<"add" | "view" | "modify">("add");
-
-// const driverFormIns = useTemplateRef<FormInstance>("driverForm");
-
-const formData = ref<DriverTypes.SearchDriverResult>({});
-// const rules = reactive<FormRules<DriverTypes.SearchDriverResult>>({
-//   id: [{ required: true, message: "请填写Id", trigger: "blur" }],
-//   userId: [{ required: true, message: "请填写归属用户 Id；sys_user.id", trigger: "blur" }],
-//   customerId: [{ required: true, message: "请填写归属客户 Id；cst_customer.id", trigger: "blur" }],
-//   orgId: [{ required: true, message: "请填写归属公司 Id；cst_org.id", trigger: "blur" }],
-//   drivingLicenceNo: [{ required: true, message: "请填写驾驶证编号", trigger: "blur" }],
-//   driverName: [{ required: true, message: "请填写司机姓名", trigger: "blur" }],
-//   phone: [{ required: true, message: "请填写手机号", trigger: "blur" }],
-//   drivingLicence: [{ required: true, message: "请填写驾驶证图片", trigger: "blur" }],
-//   licenceStartTime: [{ required: true, message: "请填写驾驶证有效期", trigger: "blur" }],
-//   licenceEndTime: [{ required: true, message: "请填写驾驶证有效期", trigger: "blur" }],
-//   busy: [{ required: true, message: "请填写忙碌中", trigger: "blur" }],
-//   creatorId: [{ required: true, message: "请填写创建人 Id；sys_user.id", trigger: "blur" }],
-//   modifierId: [{ required: true, message: "请填写修改人 Id； sys_user.id", trigger: "blur" }],
-//   createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
-//   modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
-//   deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
-// });
-
-function dialogCloseHandler() {
-  formData.value = {};
-}
-
-// function submitHandler() {
-//   if (status.value === "view") return;
-//   submiting.value = true;
-//   if (formData.value.id != null) {
-//     FormUtil.submit(driverFormIns, () => DriverApi.modify(formData.value))
-//       .then(() => {
-//         ElMessage.success("修改成功");
-//         emits("editSucc");
-//         showDialog.value = false;
-//       })
-//       .finally(() => {
-//         submiting.value = false;
-//       });
-//   } else {
-//     FormUtil.submit(driverFormIns, () => DriverApi.add(formData.value))
-//       .then(() => {
-//         ElMessage.success("添加成功");
-//         emits("editSucc");
-//         showDialog.value = false;
-//       })
-//       .finally(() => {
-//         submiting.value = false;
-//       });
-//   }
-// }
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<DriverTypes.SearchDriverResult>>('detailPanel')
+const detailPanelProps = buildDetailPanelProps<DriverTypes.SearchDriverResult>({
+  title: '司机详情',
+  detailsLoader: DriverApi.detail,
+})
 
 defineExpose({
-  open(data: DriverTypes.SearchDriverResult = {}) {
-    showDialog.value = true;
-    if (!Strings.isBlank(data.id)) {
-      status.value = "modify";
-      DriverApi.detail(data.id!).then((res) => {
-        formData.value = res.data;
-      });
-    } else {
-      status.value = "add";
-      formData.value = data;
-    }
+  open(data: DriverTypes.SearchDriverResult) {
+    detailPanelIns.value?.open(data)
   },
-});
+})
 </script>
-
-<style lang="stylus" scoped>
-.form-panel {
-  padding 20px
-}
-</style>
diff --git a/src/pages/cst/driver/DriverForm.vue b/src/pages/cst/driver/DriverForm.vue
index 5225423..6d4c9b9 100644
--- a/src/pages/cst/driver/DriverForm.vue
+++ b/src/pages/cst/driver/DriverForm.vue
@@ -67,7 +67,7 @@
 import DriverApi from '@/pages/cst/driver/driver-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const props = withDefaults(defineProps<{
diff --git a/src/pages/cst/org/OrgForm.vue b/src/pages/cst/org/OrgForm.vue
index 329b638..4235be5 100644
--- a/src/pages/cst/org/OrgForm.vue
+++ b/src/pages/cst/org/OrgForm.vue
@@ -156,7 +156,7 @@
 <script lang="ts" setup>
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import OrgApi from '@/pages/cst/org/org-api.ts'
 
diff --git a/src/pages/cst/project/ProjectForm.vue b/src/pages/cst/project/ProjectForm.vue
index 20f1ddf..058cc7d 100644
--- a/src/pages/cst/project/ProjectForm.vue
+++ b/src/pages/cst/project/ProjectForm.vue
@@ -112,7 +112,7 @@
 import ProjectApi from '@/pages/cst/project/project-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const rules = reactive<FormRules<ProjectTypes.SearchProjectResult>>({
diff --git a/src/pages/cst/station/Station.vue b/src/pages/cst/station/Station.vue
index 6d46c67..7bbb368 100644
--- a/src/pages/cst/station/Station.vue
+++ b/src/pages/cst/station/Station.vue
@@ -1,60 +1,14 @@
 <template>
-  <FormPage
-    ref="formPage"
-    :action-column="actionColumn"
-    :left-tools="leftTools"
-    :paging="paging">
-    <template #searchFormItem="{ searchForm }">
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+
+    <template #simpleFormItem="formData">
       <ElFormItem label="站点名称">
         <ElInput
-          v-model="searchForm.stationName"
+          v-model="formData.stationName"
           placeholder="站点名称"/>
       </ElFormItem>
-      <ElFormItem label="省">
-        <ElInput
-          v-model="searchForm.provinceName"
-          placeholder="请输入省"/>
-      </ElFormItem>
-      <ElFormItem label="市">
-        <ElInput
-          v-model="searchForm.cityName"
-          placeholder="请输入市"/>
-      </ElFormItem>
-      <ElFormItem label="区县">
-        <ElInput
-          v-model="searchForm.areaName"
-          placeholder="请输入区县"/>
-      </ElFormItem>
-      <ElFormItem label="乡镇街道">
-        <ElInput
-          v-model="searchForm.townName"
-          placeholder="请输入乡镇街道"/>
-      </ElFormItem>
-      <ElFormItem label="详细地址">
-        <ElInput
-          v-model="searchForm.address"
-          placeholder="详细地址"/>
-      </ElFormItem>
-      <ElFormItem label="经度">
-        <ElInput
-          v-model="searchForm.lng"
-          placeholder="经度"/>
-      </ElFormItem>
-      <ElFormItem label="纬度">
-        <ElInput
-          v-model="searchForm.lat"
-          placeholder="纬度"/>
-      </ElFormItem>
-      <ElFormItem label="创建时间">
-        <ElInput
-          v-model="searchForm.createTime"
-          placeholder="创建时间"/>
-      </ElFormItem>
-      <ElFormItem label="修改时间">
-        <ElInput
-          v-model="searchForm.modifyTime"
-          placeholder="修改时间"/>
-      </ElFormItem>
     </template>
     <template #columns>
       <ElTableColumn label="所属公司" prop="org.orgName"/>
@@ -63,72 +17,84 @@
       <ElTableColumn label="市" prop="cityName"/>
       <ElTableColumn label="区县" prop="areaName"/>
       <ElTableColumn label="乡镇街道" prop="townName"/>
-      <ElTableColumn label="详细地址" prop="address" width="160px"/>
-      <ElTableColumn label="经度" prop="lng" width="100px"/>
-      <ElTableColumn label="纬度" prop="lat" width="100px"/>
-      <ElTableColumn label="创建时间" prop="createTime" width="170px"/>
-      <ElTableColumn label="修改时间" prop="modifyTime" width="170px"/>
+      <ElTableColumn label="详细地址" prop="address" show-overflow-tooltip width="160px"/>
+      <!-- <ElTableColumn label="经度" prop="lng" width="100px"/> -->
+      <!-- <ElTableColumn label="纬度" prop="lat" width="100px"/> -->
     </template>
     <StationForm ref="stationForm" :research="research"/>
-  </FormPage>
+  </ATablePage>
 </template>
 
 <script lang="ts" setup>
 import StationApi from '@/pages/cst/station/station-api.ts'
 import StationForm from '@/pages/cst/station/StationForm.vue'
 import FormPage from '@/components/page/FormPage.vue'
-import type {
-  ActionColumnType,
-  ToolType,
-} from '@/components/page/a-page-type.ts'
 import type { ComponentExposed } from 'vue-component-type-helpers'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
 
 const stationFormIns = useTemplateRef<InstanceType<typeof StationForm>>('stationForm')
-const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
-
-const actionColumn = reactive<ActionColumnType<StationTypes.SearchStationResult>>({
-  tableActions: [
-    {
-      tooltip: '编辑',
-      icon: 'Edit',
-      action({row}) {
-        stationFormIns.value?.open(row)
-      },
-    },
-    {
-      icon: 'Delete',
-      loading: false,
-      type: 'danger',
-      tooltip: '删除',
-      confirm: {
-        title: '是否删除当前数据',
-      },
-      action({row}) {
-        return StationApi.del([ row.id! ])
-          .then(() => {
-            ElMessage.success('删除成功')
-            return true
-          })
-      },
-    },
-  ],
-})
-const leftTools: ToolType[] = [
-  {
-    icon: 'Plus',
-    label: '新建',
-    action() {
-      stationFormIns.value?.open()
-    },
-  },
-]
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 
 function research() {
-  formPageIns.value?.doSearch()
+  tablePageIns.value?.doSearch()
 }
 
-function paging(params: StationTypes.SearchStationParam) {
-  return StationApi.paging(params)
-}
+const tablePageProps = buildTablePageProps<StationTypes.SearchStationParam, StationTypes.SearchStationResult>({
+  pageLayout: {
+    enableHighForm: false,
+  },
+  toolBar: {
+    leftTools: [
+      {
+        icon: 'Plus',
+        label: '新建',
+        action() {
+          stationFormIns.value?.open()
+        },
+      },
+    ],
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          action({row}) {
+            stationFormIns.value?.open(row)
+          },
+        },
+        {
+          icon: 'Delete',
+          loading: false,
+          type: 'danger',
+          tooltip: '删除',
+          confirm: {
+            title: '是否删除当前数据',
+          },
+          action({row}) {
+            return StationApi.del([ row.id! ])
+              .then(() => {
+                ElMessage.success('删除成功')
+                return true
+              })
+          },
+        },
+      ],
+    },
+  },
+  searchForm: {
+    highForm: {
+      contentWidth: 342,
+    },
+    paging: StationApi.paging,
+  },
+})
+
+
+const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
 
 </script>
diff --git a/src/pages/cst/station/StationForm.vue b/src/pages/cst/station/StationForm.vue
index c013846..68ca8a1 100644
--- a/src/pages/cst/station/StationForm.vue
+++ b/src/pages/cst/station/StationForm.vue
@@ -4,13 +4,11 @@
     :details-loader="detailsLoader"
     :do-submit="doSubmit"
     :rules="rules"
+    label-width="100px"
     :title="status === 'add' ? '新建站点' : '修改站点'"
   >
     <template #default="{formData}">
       <div class="form-items">
-        <ElFormItem label="企业信息 Id" prop="orgId">
-
-        </ElFormItem>
         <ElFormItem label="站点名称" prop="stationName">
           <ElInput v-model="formData.stationName" placeholder="站点名称"/>
         </ElFormItem>
@@ -27,6 +25,7 @@
           <ElInput v-model="formData.town"  placeholder="乡镇街道；代码" />
         </ElFormItem> -->
         <ElFormItem label="详细地址" prop="address">
+          <ElInput v-model="formData.address" placeholder="详细地址"/>
         </ElFormItem>
         <ElFormItem label="省" prop="provinceName">
           <ElInput v-model="formData.provinceName" placeholder="省"/>
@@ -48,7 +47,7 @@
           <ElInput v-model="formData.lat" placeholder="纬度"/>
         </ElFormItem>
 
-        <div id="container" style="width: 100%; height: 400px"></div>
+        <div id="container"></div>
 
       </div>
     </template>
@@ -59,7 +58,7 @@
 import StationApi from '@/pages/cst/station/station-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const props = withDefaults(defineProps<{
@@ -124,7 +123,7 @@ defineExpose({
 </script>
 
 <style lang="stylus" scoped>
-.form-panel {
-  padding 20px
+.form-items {
+  grid-template-columns: 1fr 1fr;
 }
 </style>
diff --git a/src/pages/cst/truck/Truck.vue b/src/pages/cst/truck/Truck.vue
index a7e6ced..f39fd5c 100644
--- a/src/pages/cst/truck/Truck.vue
+++ b/src/pages/cst/truck/Truck.vue
@@ -1,25 +1,24 @@
 <template>
-  <FormPage
-    ref="formPage"
-    :action-column="actionColumn"
-    :paging="paging">
-    <template #searchFormItem="{ searchForm }">
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
       <ElFormItem label="车牌">
-        <ElInput v-model="searchForm.licensePlate" placeholder="车牌"/>
+        <ElInput v-model="formData.licensePlate" placeholder="车牌"/>
       </ElFormItem>
       <ElFormItem label="车架号">
-        <ElInput v-model="searchForm.vnCode" placeholder="车架号"/>
+        <ElInput v-model="formData.vnCode" placeholder="车架号"/>
       </ElFormItem>
       <ElFormItem label="归属客户">
-        <ElInput v-model="searchForm.customerName" placeholder="归属客户"/>
+        <ElInput v-model="formData.customerName" placeholder="归属客户"/>
       </ElFormItem>
       <ElFormItem label="归属企业">
-        <ElInput v-model="searchForm.orgName" placeholder="归属企业"/>
+        <ElInput v-model="formData.orgName" placeholder="归属企业"/>
       </ElFormItem>
     </template>
-    <template #simpleSearchFormItem="{ searchForm }">
+    <template #simpleFormItem="formData">
       <ElFormItem>
-        <ElInput v-model="searchForm.licensePlate" placeholder="车牌"/>
+        <ElInput v-model="formData.licensePlate" placeholder="车牌"/>
       </ElFormItem>
     </template>
     <template #columns>
@@ -28,15 +27,15 @@
       <ElTableColumn label="车牌号" prop="licensePlate"/>
       <ElTableColumn label="车架号" prop="vnCode"/>
       <ElTableColumn label="车辆类型" prop="truckCategory"/>
-      <ElTableColumn label="车辆图片" width="80">
+      <ElTableColumn label="车辆图片" width="100">
         <template #default="{ row }">
           <ElImage
             :preview-src-list="[AppApi.fileUrl(row.picture)]"
             :src="AppApi.fileUrl(row.picture)" preview-teleported show-progress
-            style="width: 32px; height: 32px"/>
+            style="width: 23px; height: 23px;display: block;"/>
         </template>
       </ElTableColumn>
-      <ElTableColumn label="状态" prop="busy" width="80">
+      <ElTableColumn label="状态" prop="busy" width="100">
         <template #default="{ row }">
           <ElTag :type="row.busy ? 'warning' : 'success'">{{ row.busy ? '运输中' : '空闲' }}</ElTag>
         </template>
@@ -44,7 +43,7 @@
     </template>
     <TruckForm ref="truckForm" :research="research"/>
     <TruckDetail ref="truckDetail"/>
-  </FormPage>
+  </ATablePage>
 </template>
 
 <script lang="ts" setup>
@@ -52,46 +51,43 @@ import TruckApi from '@/pages/cst/truck/truck-api.ts'
 import TruckForm from '@/pages/cst/truck/TruckForm.vue'
 import TruckDetail from '@/pages/cst/truck/TruckDetail.vue'
 import AppApi from '@/common/app/app-api.ts'
-import FormPage from '@/components/page/FormPage.vue'
-import type { ActionColumnType } from '@/components/page/a-page-type.ts'
-import type { ComponentExposed } from 'vue-component-type-helpers'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
 
 const truckDetailIns = useTemplateRef<InstanceType<typeof TruckDetail>>('truckDetail')
-const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
-
-const actionColumn = reactive<ActionColumnType<TruckTypes.SearchTruckResult>>({
-  tableActions: [
-    {
-      tooltip: '详情',
-      icon: 'Postcard',
-      action({row}) {
-        truckDetailIns.value?.open(row)
-      },
-    },
-    /*  {
-      icon: 'Delete',
-      loading: false,
-      type: 'danger',
-      tooltip: '删除',
-      confirm: {
-        title: '是否删除当前数据',
-      },
-      action({row}) {
-        return TruckApi.del([ row.id! ])
-          .then(() => {
-            ElMessage.success('删除成功')
-            return true
-          })
-      },
-     }, */
-  ],
-})
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 
 function research() {
-  formPageIns.value?.doSearch()
+  tablePageIns.value?.doSearch()
 }
 
-function paging(params: TruckTypes.SearchTruckParam) {
-  return TruckApi.paging(params)
-}
+const tablePageProps = buildTablePageProps<CustomerTypes.SearchCustomerParam, CustomerTypes.SearchCustomerResult>({
+  pageLayout: {
+    searchFormHeight: '125px',
+    dataListHeight: 1,
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '详情',
+          icon: 'Postcard',
+          type: 'primary',
+          action({row}) {
+            truckDetailIns.value?.open(row)
+          },
+        },
+      ],
+    },
+  },
+  searchForm: {
+    highForm: {
+      contentWidth: 342,
+    },
+    paging: TruckApi.paging,
+  },
+})
+
 </script>
diff --git a/src/pages/cst/truck/TruckDetail.vue b/src/pages/cst/truck/TruckDetail.vue
index 10e29db..53a47ad 100644
--- a/src/pages/cst/truck/TruckDetail.vue
+++ b/src/pages/cst/truck/TruckDetail.vue
@@ -1,149 +1,75 @@
 <template>
-  <ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
-    <el-descriptions class="margin-top" title="车辆详情" :column="3" border>
-      <el-descriptions-item label="车牌">
-        {{ formData.licensePlate }}
-      </el-descriptions-item>
+  <ADetailPanel
+    ref="detailPanel"
+    v-bind="detailPanelProps"
+  >
+    <template #default="detailData">
+      <ElDescriptions :column="3" border>
+        <ElDescriptionsItem label="车牌">
+          {{ detailData.licensePlate }}
+        </ElDescriptionsItem>
 
+        <ElDescriptionsItem label="行驶证图片">
+          <ElImage v-for="(item,i) in detailData.truckLicense" :key="i" :preview-src-list="[AppApi.fileUrl(item)]" :src="AppApi.fileUrl(item)" show-progress style="width: 32px; height: 32px"></ElImage>
+        </ElDescriptionsItem>
 
+        <ElDescriptionsItem label="行驶证有效期">
+          {{ detailData.licenseStartDate }} ~ {{ detailData.licenseEndDate }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="车架号">
+          {{ detailData.vnCode }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="合格证图片">
+          <ElImage v-for="(item,i) in detailData.qualification" :key="i" :preview-src-list="[AppApi.fileUrl(item)]" :src="AppApi.fileUrl(item)" show-progress style="width: 32px; height: 32px"></ElImage>
+        </ElDescriptionsItem>
 
-      <el-descriptions-item label="行驶证图片">
-        <el-image v-for="(item,i) in formData.truckLicense" :key="i" style="width: 100px; height: 100px" :src="AppApi.fileUrl(item)" :preview-src-list="[AppApi.fileUrl(item)]" show-progress></el-image>
-      </el-descriptions-item>
+        <ElDescriptionsItem label="合格证有效期">
+          {{ detailData.qualificationStartDate }} ~ {{ detailData.qualificationEndDate }}
+        </ElDescriptionsItem>
 
-      <el-descriptions-item label="行驶证有效期">
-        {{ formData.licenseStartDate }} ~ {{ formData.licenseEndDate }}
-      </el-descriptions-item>
-      <el-descriptions-item label="车架号">
-        {{ formData.vnCode }}
-      </el-descriptions-item>
-      <el-descriptions-item label="合格证图片">
-        <el-image v-for="(item,i) in formData.qualification" :key="i" style="width: 100px; height: 100px" :src="AppApi.fileUrl(item)" :preview-src-list="[AppApi.fileUrl(item)]" show-progress></el-image>
-      </el-descriptions-item>
+        <ElDescriptionsItem label="最大载重">
+          {{ Number(detailData.carryingCapacity) / 1000 }}吨
+        </ElDescriptionsItem>
 
-      <el-descriptions-item label="合格证有效期">
-        {{ formData.qualificationStartDate }} ~ {{ formData.qualificationEndDate }}
-      </el-descriptions-item>
+        <ElDescriptionsItem label="状态">
+          {{ detailData.busy ? '运输中' : '空闲' }}
+        </ElDescriptionsItem>
 
-      <el-descriptions-item label="最大载重">
-        {{ Number(formData.carryingCapacity)/1000 }}吨
-      </el-descriptions-item>
+        <ElDescriptionsItem label="车辆图片">
+          <ElImage :preview-src-list="[AppApi.fileUrl(detailData.picture)]" :src="AppApi.fileUrl(detailData.picture)" show-progress style="width: 32px; height: 32px"></ElImage>
+        </ElDescriptionsItem>
 
-      <el-descriptions-item label="状态">
-        {{ formData.busy?'运输中':'空闲' }}
-      </el-descriptions-item>
-
-      <el-descriptions-item label="车辆图片">
-        <el-image style="width: 100px; height: 100px" :src="AppApi.fileUrl(formData.picture)" :preview-src-list="[AppApi.fileUrl(formData.picture)]" show-progress></el-image>
-      </el-descriptions-item>
-
-      <el-descriptions-item label="车辆类型">
-        {{ formData.truckCategory }}
-      </el-descriptions-item>
-      <el-descriptions-item label="创建时间">
-        {{ formData.createTime }}
-      </el-descriptions-item>
-      <el-descriptions-item label="修改时间">
-        {{ formData.modifyTime }}
-      </el-descriptions-item>
-    </el-descriptions>
-    <template #footer>
-      <ElButton @click="showDialog = false">关闭</ElButton>
+        <ElDescriptionsItem label="车辆类型">
+          {{ detailData.truckCategory }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">
+          {{ detailData.createTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="修改时间">
+          {{ detailData.modifyTime }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
     </template>
-  </ElDialog>
+  </ADetailPanel>
 </template>
 
 <script lang="ts" setup>
 import TruckApi from '@/pages/cst/truck/truck-api.ts'
-import Strings from '@/common/utils/strings.ts'
-// import FormUtil from '@/common/utils/formUtil.ts'
-// import {
-//   ElMessage,
-//   type FormInstance,
-//   type FormRules,
-// } from 'element-plus'
 import AppApi from '@/common/app/app-api.ts'
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
 
-const emits = defineEmits(["editSucc"]);
-const showDialog = ref(false);
-// const submiting = ref(false);
-const status = ref<"add" | "view" | "modify">("add");
-
-// const truckFormIns = useTemplateRef<FormInstance>("truckForm");
-
-const formData = ref<TruckTypes.SearchTruckResult>({});
-// const rules = reactive<FormRules<TruckTypes.SearchTruckResult>>({
-//   id: [{ required: true, message: "请填写Id", trigger: "blur" }],
-//   customerId: [{ required: true, message: "请填写归属客户 Id；cst_customer.id", trigger: "blur" }],
-//   orgId: [{ required: true, message: "请填写归属企业", trigger: "blur" }],
-//   licensePlate: [{ required: true, message: "请填写车牌", trigger: "blur" }],
-//   truckLicense: [{ required: true, message: "请填写行驶证图片", trigger: "blur" }],
-//   vnCode: [{ required: true, message: "请填写车架号", trigger: "blur" }],
-//   qualification: [{ required: true, message: "请填写合格证图片", trigger: "blur" }],
-//   carryingCapacity: [{ required: true, message: "请填写最大载重；单位：千克", trigger: "blur" }],
-//   tareWeight: [{ required: true, message: "请填写皮重；单位：千克", trigger: "blur" }],
-//   licenseStartDate: [{ required: true, message: "请填写行驶证有效期", trigger: "blur" }],
-//   licenseEndDate: [{ required: true, message: "请填写行驶证有效期", trigger: "blur" }],
-//   qualificationStartDate: [{ required: true, message: "请填写合格证有效期", trigger: "blur" }],
-//   qualificationEndDate: [{ required: true, message: "请填写合格证有效期", trigger: "blur" }],
-//   truckCategory: [{ required: true, message: "请填写车辆类型", trigger: "blur" }],
-//   picture: [{ required: true, message: "请填写车辆图片", trigger: "blur" }],
-//   busy: [{ required: true, message: "请填写忙碌中", trigger: "blur" }],
-//   creatorId: [{ required: true, message: "请填写创建人 Id； sys_user.id", trigger: "blur" }],
-//   modifierId: [{ required: true, message: "请填写修改人 Id； sys_user.id", trigger: "blur" }],
-//   createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
-//   modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
-//   deleted: [{ required: true, message: "请填写是否删除； 0-->未删除、1-->已删除", trigger: "blur" }],
-// });
-
-function dialogCloseHandler() {
-  formData.value = {};
-}
-
-// function submitHandler() {
-//   if (status.value === "view") return;
-//   submiting.value = true;
-//   if (formData.value.id != null) {
-//     FormUtil.submit(truckFormIns, () => TruckApi.modify(formData.value))
-//       .then(() => {
-//         ElMessage.success("修改成功");
-//         emits("editSucc");
-//         showDialog.value = false;
-//       })
-//       .finally(() => {
-//         submiting.value = false;
-//       });
-//   } else {
-//     FormUtil.submit(truckFormIns, () => TruckApi.add(formData.value))
-//       .then(() => {
-//         ElMessage.success("添加成功");
-//         emits("editSucc");
-//         showDialog.value = false;
-//       })
-//       .finally(() => {
-//         submiting.value = false;
-//       });
-//   }
-// }
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<TruckTypes.SearchTruckResult>>('detailPanel')
+const detailPanelProps = buildDetailPanelProps<TruckTypes.SearchTruckResult>({
+  title: '车辆详情',
+  detailsLoader: TruckApi.detail,
+})
 
 defineExpose({
-  open(data: TruckTypes.SearchTruckResult = {}) {
-    showDialog.value = true;
-    if (!Strings.isBlank(data.id)) {
-      status.value = "modify";
-      TruckApi.detail(data.id!).then((res) => {
-        formData.value = res.data;
-      });
-    } else {
-      status.value = "add";
-      formData.value = data;
-    }
+  open(data: TruckTypes.SearchTruckResult) {
+    detailPanelIns.value?.open(data)
   },
-});
+})
 </script>
-
-<style lang="stylus" scoped>
-.form-panel {
-  padding 20px
-}
-</style>
diff --git a/src/pages/cst/truck/TruckForm.vue b/src/pages/cst/truck/TruckForm.vue
index 34e057c..4309813 100644
--- a/src/pages/cst/truck/TruckForm.vue
+++ b/src/pages/cst/truck/TruckForm.vue
@@ -88,7 +88,7 @@ import TruckApi from '@/pages/cst/truck/truck-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 
 const props = withDefaults(defineProps<{
   research?: () => void
diff --git a/src/pages/fin/bill/Bill.vue b/src/pages/fin/bill/Bill.vue
new file mode 100644
index 0000000..d6ad652
--- /dev/null
+++ b/src/pages/fin/bill/Bill.vue
@@ -0,0 +1,186 @@
+<template>
+  <FormPage
+    ref="formPage"
+    :action-column="actionColumn"
+    :left-tools="leftTools"
+    :paging="paging">
+    <template #searchFormItem="{ searchForm }">
+      <ElFormItem label="Id">
+        <ElInput
+          v-model="searchForm.id"
+          placeholder="Id"/>
+      </ElFormItem>
+      <ElFormItem label="用户 Id">
+        <ElInput
+          v-model="searchForm.userId"
+          placeholder="用户 Id"/>
+      </ElFormItem>
+      <ElFormItem label="客户 Id；cst_customer.id">
+        <ElInput
+          v-model="searchForm.customerId"
+          placeholder="客户 Id；cst_customer.id"/>
+      </ElFormItem>
+      <ElFormItem label="组织 Id">
+        <ElInput
+          v-model="searchForm.orgId"
+          placeholder="组织 Id"/>
+      </ElFormItem>
+      <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业">
+        <ElInput
+          v-model="searchForm.accountType"
+          placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
+      </ElFormItem>
+      <ElFormItem label="账期">
+        <ElInput
+          v-model="searchForm.billPeriod"
+          placeholder="账期"/>
+      </ElFormItem>
+      <ElFormItem label="账单开始时间">
+        <ElInput
+          v-model="searchForm.startTime"
+          placeholder="账单开始时间"/>
+      </ElFormItem>
+      <ElFormItem label="账单结束时间">
+        <ElInput
+          v-model="searchForm.endTime"
+          placeholder="账单结束时间"/>
+      </ElFormItem>
+      <ElFormItem label="订单数">
+        <ElInput
+          v-model="searchForm.orderCount"
+          placeholder="订单数"/>
+      </ElFormItem>
+      <ElFormItem label="总车数">
+        <ElInput
+          v-model="searchForm.carCount"
+          placeholder="总车数"/>
+      </ElFormItem>
+      <ElFormItem label="总质量">
+        <ElInput
+          v-model="searchForm.totalWeight"
+          placeholder="总质量"/>
+      </ElFormItem>
+      <ElFormItem label="优惠金额">
+        <ElInput
+          v-model="searchForm.discountMoney"
+          placeholder="优惠金额"/>
+      </ElFormItem>
+      <ElFormItem label="账单金额">
+        <ElInput
+          v-model="searchForm.totalMoney"
+          placeholder="账单金额"/>
+      </ElFormItem>
+      <ElFormItem label="备注">
+        <ElInput
+          v-model="searchForm.memo"
+          placeholder="备注"/>
+      </ElFormItem>
+      <ElFormItem label="创建人 Id；sys_user.id">
+        <ElInput
+          v-model="searchForm.creatorId"
+          placeholder="创建人 Id；sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="修改人 Id；sys_user.id">
+        <ElInput
+          v-model="searchForm.modifierId"
+          placeholder="修改人 Id；sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="创建时间">
+        <ElInput
+          v-model="searchForm.createTime"
+          placeholder="创建时间"/>
+      </ElFormItem>
+      <ElFormItem label="修改时间">
+        <ElInput
+          v-model="searchForm.modifyTime"
+          placeholder="修改时间"/>
+      </ElFormItem>
+      <ElFormItem label="是否删除； 0-->未删除、1-->已删除">
+        <ElInput
+          v-model="searchForm.deleted"
+          placeholder="是否删除； 0-->未删除、1-->已删除"/>
+      </ElFormItem>
+    </template>
+
+    <template #columns>
+      <ElTableColumn label="Id" prop="id"/>
+      <ElTableColumn label="用户 Id" prop="userId"/>
+      <ElTableColumn label="客户 Id；cst_customer.id" prop="customerId"/>
+      <ElTableColumn label="组织 Id" prop="orgId"/>
+      <ElTableColumn label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType"/>
+      <ElTableColumn label="账期" prop="billPeriod"/>
+      <ElTableColumn label="账单开始时间" prop="startTime"/>
+      <ElTableColumn label="账单结束时间" prop="endTime"/>
+      <ElTableColumn label="订单数" prop="orderCount"/>
+      <ElTableColumn label="总车数" prop="carCount"/>
+      <ElTableColumn label="总质量" prop="totalWeight"/>
+      <ElTableColumn label="优惠金额" prop="discountMoney"/>
+      <ElTableColumn label="账单金额" prop="totalMoney"/>
+      <ElTableColumn label="备注" prop="memo"/>
+      <ElTableColumn label="创建人 Id；sys_user.id" prop="creatorId"/>
+      <ElTableColumn label="修改人 Id；sys_user.id" prop="modifierId"/>
+      <ElTableColumn label="创建时间" prop="createTime"/>
+      <ElTableColumn label="修改时间" prop="modifyTime"/>
+      <ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/>
+    </template>
+    <BillForm ref="billForm" @edit-succ="research"/>
+    </Page>
+</template>
+
+<script lang="ts" setup>
+import BillApi from '@/pages/fin/bill/bill-api.ts'
+import BillForm from '@/pages/fin/bill/BillForm.vue'
+import FormPage, {
+  type ActionColumnType,
+  type ToolType,
+} from '@/components/page/FormPage.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
+const billFormIns = useTemplateRef<InstanceType<typeof BillForm>>('billForm')
+
+function research() {
+  formPageIns.value?.doSearch()
+}
+
+function paging(params: BillTypes.SearchBillParam) {
+  return BillApi.paging(params)
+}
+
+const leftTools: ToolType[] = [
+  {
+    icon: 'Plus',
+    label: '新建',
+    action() {
+      billFormIns.value?.open()
+    },
+  },
+]
+const actionColumn = reactive<ActionColumnType<BillTypes.SearchBillResult>>({
+  tableActions: [
+    {
+      tooltip: '编辑',
+      icon: 'Edit',
+      action({row}) {
+        billFormIns.value?.open(row)
+      },
+    },
+    {
+      icon: 'Delete',
+      loading: false,
+      type: 'danger',
+      tooltip: '删除',
+      confirm: {
+        title: '是否删除当前数据',
+      },
+      action({row}) {
+        return BillApi.del([ row.id! ])
+          .then(() => {
+            ElMessage.success('删除成功')
+            return true
+          })
+      },
+    },
+  ],
+})
+</script>
diff --git a/src/pages/fin/bill/BillDetail.vue b/src/pages/fin/bill/BillDetail.vue
new file mode 100644
index 0000000..a0c0d94
--- /dev/null
+++ b/src/pages/fin/bill/BillDetail.vue
@@ -0,0 +1,96 @@
+<template>
+  <ElDialog v-model="showDialog"
+    destroy-on-close
+    width="fit-content"
+    @close="dialogCloseHandler">
+    <ElDescriptions border title="对账单">
+      <ElDescriptionsItem label="Id" prop="id">
+        {{ detailData.id }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="用户 Id" prop="userId">
+        {{ detailData.userId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="客户 Id；cst_customer.id" prop="customerId">
+        {{ detailData.customerId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="组织 Id" prop="orgId">
+        {{ detailData.orgId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+        {{ detailData.accountType }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="账期" prop="billPeriod">
+        {{ detailData.billPeriod }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="账单开始时间" prop="startTime">
+        {{ detailData.startTime }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="账单结束时间" prop="endTime">
+        {{ detailData.endTime }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="订单数" prop="orderCount">
+        {{ detailData.orderCount }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="总车数" prop="carCount">
+        {{ detailData.carCount }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="总质量" prop="totalWeight">
+        {{ detailData.totalWeight }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="优惠金额" prop="discountMoney">
+        {{ detailData.discountMoney }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="账单金额" prop="totalMoney">
+        {{ detailData.totalMoney }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="备注" prop="memo">
+        {{ detailData.memo }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="创建人 Id；sys_user.id" prop="creatorId">
+        {{ detailData.creatorId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="修改人 Id；sys_user.id" prop="modifierId">
+        {{ detailData.modifierId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="创建时间" prop="createTime">
+        {{ detailData.createTime }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="修改时间" prop="modifyTime">
+        {{ detailData.modifyTime }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
+        {{ detailData.deleted }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+    <template #footer>
+      <ElButton type="primary" @click="showDialog = false">关闭</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+import BillApi from '@/pages/fin/bill/bill-api.ts'
+import Utils from '@/common/utils'
+
+const showDialog = ref(false)
+
+const detailData = Utils.resetAble(reactive<BillTypes.SearchBillResult>({}))
+
+function dialogCloseHandler() {
+  detailData.$reset()
+}
+
+defineExpose({
+  open(data: BillTypes.SearchBillResult) {
+    showDialog.value = true
+    BillApi.detail(data.id!)
+      .then(res => {
+        detailData.$reset(res.data)
+      })
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
diff --git a/src/pages/fin/bill/BillForm.vue b/src/pages/fin/bill/BillForm.vue
new file mode 100644
index 0000000..b9f4694
--- /dev/null
+++ b/src/pages/fin/bill/BillForm.vue
@@ -0,0 +1,226 @@
+<template>
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="fit-content"
+    @close="dialogCloseHandler">
+    <ElForm ref="billForm"
+      :model="formData"
+      :rules="rules"
+      class="form-panel"
+      label-width="auto">
+      <ElFormItem label="Id" prop="id">
+        <ElInput
+          v-model="formData.id"
+          :disabled="status === 'view'"
+          placeholder="Id"/>
+      </ElFormItem>
+      <ElFormItem label="用户 Id" prop="userId">
+        <ElInput
+          v-model="formData.userId"
+          :disabled="status === 'view'"
+          placeholder="用户 Id"/>
+      </ElFormItem>
+      <ElFormItem label="客户 Id；cst_customer.id" prop="customerId">
+        <ElInput
+          v-model="formData.customerId"
+          :disabled="status === 'view'"
+          placeholder="客户 Id；cst_customer.id"/>
+      </ElFormItem>
+      <ElFormItem label="组织 Id" prop="orgId">
+        <ElInput
+          v-model="formData.orgId"
+          :disabled="status === 'view'"
+          placeholder="组织 Id"/>
+      </ElFormItem>
+      <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+        <ElInput
+          v-model="formData.accountType"
+          :disabled="status === 'view'"
+          placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
+      </ElFormItem>
+      <ElFormItem label="账期" prop="billPeriod">
+        <ElInput
+          v-model="formData.billPeriod"
+          :disabled="status === 'view'"
+          placeholder="账期"/>
+      </ElFormItem>
+      <ElFormItem label="账单开始时间" prop="startTime">
+        <ElInput
+          v-model="formData.startTime"
+          :disabled="status === 'view'"
+          placeholder="账单开始时间"/>
+      </ElFormItem>
+      <ElFormItem label="账单结束时间" prop="endTime">
+        <ElInput
+          v-model="formData.endTime"
+          :disabled="status === 'view'"
+          placeholder="账单结束时间"/>
+      </ElFormItem>
+      <ElFormItem label="订单数" prop="orderCount">
+        <ElInput
+          v-model="formData.orderCount"
+          :disabled="status === 'view'"
+          placeholder="订单数"/>
+      </ElFormItem>
+      <ElFormItem label="总车数" prop="carCount">
+        <ElInput
+          v-model="formData.carCount"
+          :disabled="status === 'view'"
+          placeholder="总车数"/>
+      </ElFormItem>
+      <ElFormItem label="总质量" prop="totalWeight">
+        <ElInput
+          v-model="formData.totalWeight"
+          :disabled="status === 'view'"
+          placeholder="总质量"/>
+      </ElFormItem>
+      <ElFormItem label="优惠金额" prop="discountMoney">
+        <ElInput
+          v-model="formData.discountMoney"
+          :disabled="status === 'view'"
+          placeholder="优惠金额"/>
+      </ElFormItem>
+      <ElFormItem label="账单金额" prop="totalMoney">
+        <ElInput
+          v-model="formData.totalMoney"
+          :disabled="status === 'view'"
+          placeholder="账单金额"/>
+      </ElFormItem>
+      <ElFormItem label="备注" prop="memo">
+        <ElInput
+          v-model="formData.memo"
+          :disabled="status === 'view'"
+          placeholder="备注"/>
+      </ElFormItem>
+      <ElFormItem label="创建人 Id；sys_user.id" prop="creatorId">
+        <ElInput
+          v-model="formData.creatorId"
+          :disabled="status === 'view'"
+          placeholder="创建人 Id；sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="修改人 Id；sys_user.id" prop="modifierId">
+        <ElInput
+          v-model="formData.modifierId"
+          :disabled="status === 'view'"
+          placeholder="修改人 Id；sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="创建时间" prop="createTime">
+        <ElInput
+          v-model="formData.createTime"
+          :disabled="status === 'view'"
+          placeholder="创建时间"/>
+      </ElFormItem>
+      <ElFormItem label="修改时间" prop="modifyTime">
+        <ElInput
+          v-model="formData.modifyTime"
+          :disabled="status === 'view'"
+          placeholder="修改时间"/>
+      </ElFormItem>
+      <ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
+        <ElInput
+          v-model="formData.deleted"
+          :disabled="status === 'view'"
+          placeholder="是否删除； 0-->未删除、1-->已删除"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
+      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+import BillApi from '@/pages/fin/bill/bill-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import FormUtil from '@/common/utils/formUtil.ts'
+import Utils from '@/common/utils'
+import {
+  ElMessage,
+  type FormInstance,
+  type FormRules,
+} from 'element-plus'
+
+const emits = defineEmits([ 'editSucc' ])
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+
+const billFormIns = useTemplateRef<FormInstance>('billForm')
+
+const formData = Utils.resetAble(reactive<BillTypes.SearchBillResult>({}))
+const rules = reactive<FormRules<BillTypes.SearchBillResult>>({
+  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
+  userId: [ {required: true, message: '请填写用户 Id', trigger: 'blur'} ],
+  customerId: [ {required: true, message: '请填写客户 Id；cst_customer.id', trigger: 'blur'} ],
+  orgId: [ {required: true, message: '请填写组织 Id', trigger: 'blur'} ],
+  accountType: [ {required: true, message: '请填写账户类型；account_type，GeRen-->个人、QiYe-->企业', trigger: 'blur'} ],
+  billPeriod: [ {required: true, message: '请填写账期', trigger: 'blur'} ],
+  startTime: [ {required: true, message: '请填写账单开始时间', trigger: 'blur'} ],
+  endTime: [ {required: true, message: '请填写账单结束时间', trigger: 'blur'} ],
+  orderCount: [ {required: true, message: '请填写订单数', trigger: 'blur'} ],
+  carCount: [ {required: true, message: '请填写总车数', trigger: 'blur'} ],
+  totalWeight: [ {required: true, message: '请填写总质量', trigger: 'blur'} ],
+  discountMoney: [ {required: true, message: '请填写优惠金额', trigger: 'blur'} ],
+  totalMoney: [ {required: true, message: '请填写账单金额', trigger: 'blur'} ],
+  memo: [ {required: true, message: '请填写备注', trigger: 'blur'} ],
+  creatorId: [ {required: true, message: '请填写创建人 Id；sys_user.id', trigger: 'blur'} ],
+  modifierId: [ {required: true, message: '请填写修改人 Id；sys_user.id', trigger: 'blur'} ],
+  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
+  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
+  deleted: [ {required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur'} ],
+})
+
+function dialogCloseHandler() {
+  formData.$reset()
+}
+
+function submitHandler() {
+  if (status.value === 'view') return
+  submiting.value = true
+  if (formData.id != null) {
+    FormUtil.submit(billFormIns, () => BillApi.modify(formData))
+      .then(() => {
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  } else {
+    FormUtil.submit(billFormIns, () => BillApi.add(formData))
+      .then(() => {
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  }
+}
+
+defineExpose({
+  open(data: BillTypes.SearchBillResult = {}) {
+    showDialog.value = true
+    if (!Strings.isBlank(data.id)) {
+      status.value = 'modify'
+      BillApi.detail(data.id!)
+        .then(res => {
+          formData.$reset(res.data)
+        })
+    } else {
+      status.value = 'add'
+      formData.$reset(data)
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.form-panel {
+  padding 20px
+}
+</style>
diff --git a/src/pages/fin/bill/bill-api.ts b/src/pages/fin/bill/bill-api.ts
new file mode 100644
index 0000000..5bd9b36
--- /dev/null
+++ b/src/pages/fin/bill/bill-api.ts
@@ -0,0 +1,22 @@
+import {
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: BillTypes.SearchBillParam) {
+    return get<G.PageResult<BillTypes.SearchBillResult>>('/bill/paging', data)
+  },
+  detail(id: string) {
+    return get<BillTypes.SearchBillResult>('/bill/detail', {id})
+  },
+  add(data: BillTypes.AddBillParam) {
+    return post('/bill/add', data)
+  },
+  modify(data: BillTypes.ModifyBillParam) {
+    return post('/bill/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/bill/del', ids)
+  },
+}
diff --git a/src/pages/fin/bill/bill.d.ts b/src/pages/fin/bill/bill.d.ts
new file mode 100644
index 0000000..e7b6b04
--- /dev/null
+++ b/src/pages/fin/bill/bill.d.ts
@@ -0,0 +1,169 @@
+export {}
+
+declare global {
+  namespace BillTypes {
+    interface SearchBillParam extends G.PageParam {
+      // Id
+      id?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id；cst_customer.id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 账期
+      billPeriod?: string
+      // 账单开始时间
+      startTime?: string
+      // 账单结束时间
+      endTime?: string
+      // 订单数
+      orderCount?: number
+      // 总车数
+      carCount?: number
+      // 总质量
+      totalWeight?: number
+      // 优惠金额
+      discountMoney?: string
+      // 账单金额
+      totalMoney?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface SearchBillResult {
+      // Id
+      id?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id；cst_customer.id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 账期
+      billPeriod?: string
+      // 账单开始时间
+      startTime?: string
+      // 账单结束时间
+      endTime?: string
+      // 订单数
+      orderCount?: number
+      // 总车数
+      carCount?: number
+      // 总质量
+      totalWeight?: number
+      // 优惠金额
+      discountMoney?: string
+      // 账单金额
+      totalMoney?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface AddBillParam {
+      // Id
+      id?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id；cst_customer.id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 账期
+      billPeriod?: string
+      // 账单开始时间
+      startTime?: string
+      // 账单结束时间
+      endTime?: string
+      // 订单数
+      orderCount?: number
+      // 总车数
+      carCount?: number
+      // 总质量
+      totalWeight?: number
+      // 优惠金额
+      discountMoney?: string
+      // 账单金额
+      totalMoney?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface ModifyBillParam {
+      // Id
+      id?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id；cst_customer.id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 账期
+      billPeriod?: string
+      // 账单开始时间
+      startTime?: string
+      // 账单结束时间
+      endTime?: string
+      // 订单数
+      orderCount?: number
+      // 总车数
+      carCount?: number
+      // 总质量
+      totalWeight?: number
+      // 优惠金额
+      discountMoney?: string
+      // 账单金额
+      totalMoney?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id；sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+  }
+}
diff --git a/src/pages/fin/bill/page.ts b/src/pages/fin/bill/page.ts
new file mode 100644
index 0000000..8e1e93f
--- /dev/null
+++ b/src/pages/fin/bill/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/fin/bill/Bill.vue'),
+} as RouterTypes.RouteConfig
\ No newline at end of file
diff --git a/src/pages/fin/money-account/MoneyAccount.vue b/src/pages/fin/money-account/MoneyAccount.vue
new file mode 100644
index 0000000..aa38d6a
--- /dev/null
+++ b/src/pages/fin/money-account/MoneyAccount.vue
@@ -0,0 +1,150 @@
+<template>
+  <FormPage
+    ref="formPage"
+    :action-column="actionColumn"
+    :left-tools="leftTools"
+    :paging="paging">
+    <template #searchFormItem="{ searchForm }">
+      <ElFormItem label="Id">
+        <ElInput
+          v-model="searchForm.id"
+          placeholder="Id"/>
+      </ElFormItem>
+      <ElFormItem label="账户编号">
+        <ElInput
+          v-model="searchForm.sn"
+          placeholder="账户编号"/>
+      </ElFormItem>
+      <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业">
+        <ElInput
+          v-model="searchForm.accountType"
+          placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
+      </ElFormItem>
+      <ElFormItem label="用户 Id">
+        <ElInput
+          v-model="searchForm.userId"
+          placeholder="用户 Id"/>
+      </ElFormItem>
+      <ElFormItem label="客户 Id">
+        <ElInput
+          v-model="searchForm.customerId"
+          placeholder="客户 Id"/>
+      </ElFormItem>
+      <ElFormItem label="组织 Id">
+        <ElInput
+          v-model="searchForm.orgId"
+          placeholder="组织 Id"/>
+      </ElFormItem>
+      <ElFormItem label="营收余额">
+        <ElInput
+          v-model="searchForm.revenue"
+          placeholder="营收余额"/>
+      </ElFormItem>
+      <ElFormItem label="充值余额">
+        <ElInput
+          v-model="searchForm.recharge"
+          placeholder="充值余额"/>
+      </ElFormItem>
+      <ElFormItem label="创建人 Id；sys_user.id">
+        <ElInput
+          v-model="searchForm.creatorId"
+          placeholder="创建人 Id；sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="修改人 Id； sys_user.id">
+        <ElInput
+          v-model="searchForm.modifierId"
+          placeholder="修改人 Id； sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="创建时间">
+        <ElInput
+          v-model="searchForm.createTime"
+          placeholder="创建时间"/>
+      </ElFormItem>
+      <ElFormItem label="修改时间">
+        <ElInput
+          v-model="searchForm.modifyTime"
+          placeholder="修改时间"/>
+      </ElFormItem>
+      <ElFormItem label="是否删除； 0-->未删除、1-->已删除">
+        <ElInput
+          v-model="searchForm.deleted"
+          placeholder="是否删除； 0-->未删除、1-->已删除"/>
+      </ElFormItem>
+    </template>
+
+    <template #columns>
+      <ElTableColumn label="Id" prop="id"/>
+      <ElTableColumn label="账户编号" prop="sn"/>
+      <ElTableColumn label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType"/>
+      <ElTableColumn label="用户 Id" prop="userId"/>
+      <ElTableColumn label="客户 Id" prop="customerId"/>
+      <ElTableColumn label="组织 Id" prop="orgId"/>
+      <ElTableColumn label="营收余额" prop="revenue"/>
+      <ElTableColumn label="充值余额" prop="recharge"/>
+      <ElTableColumn label="创建人 Id；sys_user.id" prop="creatorId"/>
+      <ElTableColumn label="修改人 Id； sys_user.id" prop="modifierId"/>
+      <ElTableColumn label="创建时间" prop="createTime"/>
+      <ElTableColumn label="修改时间" prop="modifyTime"/>
+      <ElTableColumn label="是否删除； 0-->未删除、1-->已删除" prop="deleted"/>
+    </template>
+    <MoneyAccountForm ref="moneyAccountForm" @edit-succ="research"/>
+    </Page>
+</template>
+
+<script lang="ts" setup>
+import MoneyAccountApi from '@/pages/fin/money/money-account-api.ts'
+import MoneyAccountForm from '@/pages/fin/money/MoneyAccountForm.vue'
+import FormPage, {
+  type ActionColumnType,
+  type ToolType,
+} from '@/components/page/FormPage.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
+const moneyAccountFormIns = useTemplateRef<InstanceType<typeof MoneyAccountForm>>('moneyAccountForm')
+
+function research() {
+  formPageIns.value?.doSearch()
+}
+
+function paging(params: MoneyAccountTypes.SearchMoneyAccountParam) {
+  return MoneyAccountApi.paging(params)
+}
+
+const leftTools: ToolType[] = [
+  {
+    icon: 'Plus',
+    label: '新建',
+    action() {
+      moneyAccountFormIns.value?.open()
+    },
+  },
+]
+const actionColumn = reactive<ActionColumnType<MoneyAccountTypes.SearchMoneyAccountResult>>({
+  tableActions: [
+    {
+      tooltip: '编辑',
+      icon: 'Edit',
+      action({row}) {
+        moneyAccountFormIns.value?.open(row)
+      },
+    },
+    {
+      icon: 'Delete',
+      loading: false,
+      type: 'danger',
+      tooltip: '删除',
+      confirm: {
+        title: '是否删除当前数据',
+      },
+      action({row}) {
+        return MoneyAccountApi.del([ row.id! ])
+          .then(() => {
+            ElMessage.success('删除成功')
+            return true
+          })
+      },
+    },
+  ],
+})
+</script>
diff --git a/src/pages/fin/money-account/MoneyAccountDetail.vue b/src/pages/fin/money-account/MoneyAccountDetail.vue
new file mode 100644
index 0000000..762f6ad
--- /dev/null
+++ b/src/pages/fin/money-account/MoneyAccountDetail.vue
@@ -0,0 +1,78 @@
+<template>
+  <ElDialog v-model="showDialog"
+    destroy-on-close
+    width="fit-content"
+    @close="dialogCloseHandler">
+    <ElDescriptions border title="资金账户表">
+      <ElDescriptionsItem label="Id" prop="id">
+        {{ detailData.id }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="账户编号" prop="sn">
+        {{ detailData.sn }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+        {{ detailData.accountType }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="用户 Id" prop="userId">
+        {{ detailData.userId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="客户 Id" prop="customerId">
+        {{ detailData.customerId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="组织 Id" prop="orgId">
+        {{ detailData.orgId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="营收余额" prop="revenue">
+        {{ detailData.revenue }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="充值余额" prop="recharge">
+        {{ detailData.recharge }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="创建人 Id；sys_user.id" prop="creatorId">
+        {{ detailData.creatorId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="修改人 Id； sys_user.id" prop="modifierId">
+        {{ detailData.modifierId }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="创建时间" prop="createTime">
+        {{ detailData.createTime }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="修改时间" prop="modifyTime">
+        {{ detailData.modifyTime }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
+        {{ detailData.deleted }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+    <template #footer>
+      <ElButton type="primary" @click="showDialog = false">关闭</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+import MoneyAccountApi from '@/pages/fin/money/money-account-api.ts'
+import Utils from '@/common/utils'
+
+const showDialog = ref(false)
+
+const detailData = Utils.resetAble(reactive<MoneyAccountTypes.SearchMoneyAccountResult>({}))
+
+function dialogCloseHandler() {
+  detailData.$reset()
+}
+
+defineExpose({
+  open(data: MoneyAccountTypes.SearchMoneyAccountResult) {
+    showDialog.value = true
+    MoneyAccountApi.detail(data.id!)
+      .then(res => {
+        detailData.$reset(res.data)
+      })
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
diff --git a/src/pages/fin/money-account/MoneyAccountForm.vue b/src/pages/fin/money-account/MoneyAccountForm.vue
new file mode 100644
index 0000000..4f88241
--- /dev/null
+++ b/src/pages/fin/money-account/MoneyAccountForm.vue
@@ -0,0 +1,184 @@
+<template>
+  <ElDialog v-model="showDialog"
+    :close-on-click-modal="false"
+    destroy-on-close
+    width="fit-content"
+    @close="dialogCloseHandler">
+    <ElForm ref="moneyAccountForm"
+      :model="formData"
+      :rules="rules"
+      class="form-panel"
+      label-width="auto">
+      <ElFormItem label="Id" prop="id">
+        <ElInput
+          v-model="formData.id"
+          :disabled="status === 'view'"
+          placeholder="Id"/>
+      </ElFormItem>
+      <ElFormItem label="账户编号" prop="sn">
+        <ElInput
+          v-model="formData.sn"
+          :disabled="status === 'view'"
+          placeholder="账户编号"/>
+      </ElFormItem>
+      <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+        <ElInput
+          v-model="formData.accountType"
+          :disabled="status === 'view'"
+          placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
+      </ElFormItem>
+      <ElFormItem label="用户 Id" prop="userId">
+        <ElInput
+          v-model="formData.userId"
+          :disabled="status === 'view'"
+          placeholder="用户 Id"/>
+      </ElFormItem>
+      <ElFormItem label="客户 Id" prop="customerId">
+        <ElInput
+          v-model="formData.customerId"
+          :disabled="status === 'view'"
+          placeholder="客户 Id"/>
+      </ElFormItem>
+      <ElFormItem label="组织 Id" prop="orgId">
+        <ElInput
+          v-model="formData.orgId"
+          :disabled="status === 'view'"
+          placeholder="组织 Id"/>
+      </ElFormItem>
+      <ElFormItem label="营收余额" prop="revenue">
+        <ElInput
+          v-model="formData.revenue"
+          :disabled="status === 'view'"
+          placeholder="营收余额"/>
+      </ElFormItem>
+      <ElFormItem label="充值余额" prop="recharge">
+        <ElInput
+          v-model="formData.recharge"
+          :disabled="status === 'view'"
+          placeholder="充值余额"/>
+      </ElFormItem>
+      <ElFormItem label="创建人 Id；sys_user.id" prop="creatorId">
+        <ElInput
+          v-model="formData.creatorId"
+          :disabled="status === 'view'"
+          placeholder="创建人 Id；sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
+        <ElInput
+          v-model="formData.modifierId"
+          :disabled="status === 'view'"
+          placeholder="修改人 Id； sys_user.id"/>
+      </ElFormItem>
+      <ElFormItem label="创建时间" prop="createTime">
+        <ElInput
+          v-model="formData.createTime"
+          :disabled="status === 'view'"
+          placeholder="创建时间"/>
+      </ElFormItem>
+      <ElFormItem label="修改时间" prop="modifyTime">
+        <ElInput
+          v-model="formData.modifyTime"
+          :disabled="status === 'view'"
+          placeholder="修改时间"/>
+      </ElFormItem>
+      <ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
+        <ElInput
+          v-model="formData.deleted"
+          :disabled="status === 'view'"
+          placeholder="是否删除； 0-->未删除、1-->已删除"/>
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
+      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+import MoneyAccountApi from '@/pages/fin/money/money-account-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import FormUtil from '@/common/utils/formUtil.ts'
+import Utils from '@/common/utils'
+import {
+  ElMessage,
+  type FormInstance,
+  type FormRules,
+} from 'element-plus'
+
+const emits = defineEmits([ 'editSucc' ])
+const showDialog = ref(false)
+const submiting = ref(false)
+const status = ref<'add' | 'view' | 'modify'>('add')
+
+const moneyAccountFormIns = useTemplateRef<FormInstance>('moneyAccountForm')
+
+const formData = Utils.resetAble(reactive<MoneyAccountTypes.SearchMoneyAccountResult>({}))
+const rules = reactive<FormRules<MoneyAccountTypes.SearchMoneyAccountResult>>({
+  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
+  sn: [ {required: true, message: '请填写账户编号', trigger: 'blur'} ],
+  accountType: [ {required: true, message: '请填写账户类型；account_type，GeRen-->个人、QiYe-->企业', trigger: 'blur'} ],
+  userId: [ {required: true, message: '请填写用户 Id', trigger: 'blur'} ],
+  customerId: [ {required: true, message: '请填写客户 Id', trigger: 'blur'} ],
+  orgId: [ {required: true, message: '请填写组织 Id', trigger: 'blur'} ],
+  revenue: [ {required: true, message: '请填写营收余额', trigger: 'blur'} ],
+  recharge: [ {required: true, message: '请填写充值余额', trigger: 'blur'} ],
+  creatorId: [ {required: true, message: '请填写创建人 Id；sys_user.id', trigger: 'blur'} ],
+  modifierId: [ {required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur'} ],
+  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
+  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
+  deleted: [ {required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur'} ],
+})
+
+function dialogCloseHandler() {
+  formData.$reset()
+}
+
+function submitHandler() {
+  if (status.value === 'view') return
+  submiting.value = true
+  if (formData.id != null) {
+    FormUtil.submit(moneyAccountFormIns, () => MoneyAccountApi.modify(formData))
+      .then(() => {
+        ElMessage.success('修改成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  } else {
+    FormUtil.submit(moneyAccountFormIns, () => MoneyAccountApi.add(formData))
+      .then(() => {
+        ElMessage.success('添加成功')
+        emits('editSucc')
+        showDialog.value = false
+      })
+      .finally(() => {
+        submiting.value = false
+      })
+  }
+}
+
+defineExpose({
+  open(data: MoneyAccountTypes.SearchMoneyAccountResult = {}) {
+    showDialog.value = true
+    if (!Strings.isBlank(data.id)) {
+      status.value = 'modify'
+      MoneyAccountApi.detail(data.id!)
+        .then(res => {
+          formData.$reset(res.data)
+        })
+    } else {
+      status.value = 'add'
+      formData.$reset(data)
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.form-panel {
+  padding 20px
+}
+</style>
diff --git a/src/pages/fin/money-account/money-account-api.ts b/src/pages/fin/money-account/money-account-api.ts
new file mode 100644
index 0000000..b30feb2
--- /dev/null
+++ b/src/pages/fin/money-account/money-account-api.ts
@@ -0,0 +1,22 @@
+import {
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: MoneyAccountTypes.SearchMoneyAccountParam) {
+    return get<G.PageResult<MoneyAccountTypes.SearchMoneyAccountResult>>('/money_account/paging', data)
+  },
+  detail(id: string) {
+    return get<MoneyAccountTypes.SearchMoneyAccountResult>('/money_account/detail', {id})
+  },
+  add(data: MoneyAccountTypes.AddMoneyAccountParam) {
+    return post('/money_account/add', data)
+  },
+  modify(data: MoneyAccountTypes.ModifyMoneyAccountParam) {
+    return post('/money_account/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/money_account/del', ids)
+  },
+}
diff --git a/src/pages/fin/money-account/money-account.d.ts b/src/pages/fin/money-account/money-account.d.ts
new file mode 100644
index 0000000..8024744
--- /dev/null
+++ b/src/pages/fin/money-account/money-account.d.ts
@@ -0,0 +1,121 @@
+export {}
+
+declare global {
+  namespace MoneyAccountTypes {
+    interface SearchMoneyAccountParam extends G.PageParam {
+      // Id
+      id?: string
+      // 账户编号
+      sn?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 营收余额
+      revenue?: string
+      // 充值余额
+      recharge?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface SearchMoneyAccountResult {
+      // Id
+      id?: string
+      // 账户编号
+      sn?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 营收余额
+      revenue?: string
+      // 充值余额
+      recharge?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface AddMoneyAccountParam {
+      // Id
+      id?: string
+      // 账户编号
+      sn?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 营收余额
+      revenue?: string
+      // 充值余额
+      recharge?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface ModifyMoneyAccountParam {
+      // Id
+      id?: string
+      // 账户编号
+      sn?: string
+      // 账户类型；account_type，GeRen-->个人、QiYe-->企业
+      accountType?: string
+      // 用户 Id
+      userId?: string
+      // 客户 Id
+      customerId?: string
+      // 组织 Id
+      orgId?: string
+      // 营收余额
+      revenue?: string
+      // 充值余额
+      recharge?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+  }
+}
diff --git a/src/pages/fin/money-account/page.ts b/src/pages/fin/money-account/page.ts
new file mode 100644
index 0000000..bc50555
--- /dev/null
+++ b/src/pages/fin/money-account/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/fin/money-account/MoneyAccount.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/fin/money-flow/MoneyFlow.vue b/src/pages/fin/money-flow/MoneyFlow.vue
new file mode 100644
index 0000000..bb9ca2f
--- /dev/null
+++ b/src/pages/fin/money-flow/MoneyFlow.vue
@@ -0,0 +1,114 @@
+<template>
+  <ATablePage
+    ref="tablePage"
+    v-bind="tablePageProps">
+    <template #highFormItem="formData">
+      <ElFormItem label="订单编号">
+        <ElInput
+          v-model="formData.orderSn"
+          placeholder="订单编号"/>
+      </ElFormItem>
+      <ElFormItem label="车次">
+        <ElInput
+          v-model="formData.trainNum"
+          placeholder="车次"/>
+      </ElFormItem>
+      <ElFormItem label="资金账户">
+        <ElInput
+          v-model="formData.moneyAccountId"
+          placeholder="资金账户"/>
+      </ElFormItem>
+    </template>
+
+    <template #columns>
+      <ElTableColumn label="订单编号" prop="orderSn"/>
+      <ElTableColumn label="车次" prop="trainNum"/>
+      <ElTableColumn label="资金账户" prop="moneyAccountId"/>
+      <ElTableColumn label="变动前余额" prop="beforeBalance"/>
+      <ElTableColumn label="变动金额" prop="delta"/>
+      <ElTableColumn label="变动后余额" prop="afterBalance"/>
+      <ElTableColumn label="变动类型" prop="moneyChangeCategory"/>
+      <!-- <ElTableColumn label="附件地址" prop="fileUrl"/> -->
+      <ElTableColumn label="备注" prop="memo"/>
+    </template>
+    <MoneyFlowForm ref="moneyFlowForm" :research="research"/>
+    <MoneyFlowDetail ref="moneyFlowDetail"/>
+  </ATablePage>
+</template>
+
+<script lang="ts" setup>
+import MoneyFlowApi from '@/pages/fin/money-flow/money-flow-api.ts'
+import MoneyFlowForm from '@/pages/fin/money-flow/MoneyFlowForm.vue'
+import ATablePage, {
+  type ATablePageInstance,
+  buildTablePageProps,
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
+import MoneyFlowDetail from '@/pages/fin/money-flow/MoneyFlowDetail.vue'
+
+const moneyFlowFormIns = useTemplateRef<InstanceType<typeof MoneyFlowForm>>('moneyFlowForm')
+const moneyFlowDetailIns = useTemplateRef<InstanceType<typeof MoneyFlowDetail>>('moneyFlowDetail')
+
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
+
+function research() {
+  tablePageIns.value?.doSearch()
+}
+
+const tablePageProps = buildTablePageProps<MoneyFlowTypes.SearchMoneyFlowParam, MoneyFlowTypes.SearchMoneyFlowResult>({
+  searchForm: {
+    highForm: {
+      contentWidth: 342,
+    },
+    paging: MoneyFlowApi.paging,
+  },
+  toolBar: {
+    leftTools: [
+      {
+        icon: 'Plus',
+        label: '新建',
+        action() {
+          moneyFlowFormIns.value?.open()
+        },
+      },
+    ],
+  },
+  table: {
+    actionColumn: {
+      tableActions: [
+        {
+          tooltip: '详情',
+          icon: 'Postcard',
+          type: 'info',
+          action({row}) {
+            moneyFlowDetailIns.value?.open(row)
+          },
+        },
+        {
+          tooltip: '编辑',
+          icon: 'Edit',
+          action({row}) {
+            moneyFlowFormIns.value?.open(row)
+          },
+        },
+        {
+          icon: 'Delete',
+          loading: false,
+          type: 'danger',
+          tooltip: '删除',
+          confirm: {
+            title: '是否删除当前数据',
+          },
+          action({row}) {
+            return MoneyFlowApi.del([ row.id! ])
+              .then(() => {
+                ElMessage.success('删除成功')
+                return true
+              })
+          },
+        },
+      ],
+    },
+  },
+})
+
+</script>
diff --git a/src/pages/fin/money-flow/MoneyFlowDetail.vue b/src/pages/fin/money-flow/MoneyFlowDetail.vue
new file mode 100644
index 0000000..ff07b06
--- /dev/null
+++ b/src/pages/fin/money-flow/MoneyFlowDetail.vue
@@ -0,0 +1,80 @@
+<template>
+  <ADetailPanel
+    ref="detailPanel"
+    v-bind="detailPanelProps"
+  >
+    <template #default="detailData">
+      <ElDescriptions border title="资金流水">
+        <ElDescriptionsItem label="Id" prop="id">
+          {{ detailData.id }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单 Id" prop="orderId">
+          {{ detailData.orderId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="订单编号" prop="orderSn">
+          {{ detailData.orderSn }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="车次" prop="trainNum">
+          {{ detailData.trainNum }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="资金账户 Id；fin_money_account.id" prop="moneyAccountId">
+          {{ detailData.moneyAccountId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="变动前余额" prop="beforeBalance">
+          {{ detailData.beforeBalance }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="变动金额；有正负" prop="delta">
+          {{ detailData.delta }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="变动后余额" prop="afterBalance">
+          {{ detailData.afterBalance }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付" prop="moneyChangeCategory">
+          {{ detailData.moneyChangeCategory }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="附件地址" prop="fileUrl">
+          {{ detailData.fileUrl }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="备注" prop="memo">
+          {{ detailData.memo }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建人 Id；sys_user.id" prop="creatorId">
+          {{ detailData.creatorId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="修改人 Id； sys_user.id" prop="modifierId">
+          {{ detailData.modifierId }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间" prop="createTime">
+          {{ detailData.createTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="修改时间" prop="modifyTime">
+          {{ detailData.modifyTime }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
+          {{ detailData.deleted }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </template>
+  </ADetailPanel>
+</template>
+
+<script lang="ts" setup>
+import MoneyFlowApi from '@/pages/fin/money-flow/money-flow-api.ts'
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
+
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<MoneyFlowTypes.SearchMoneyFlowResult>>('detailPanel')
+const detailPanelProps = buildDetailPanelProps<MoneyFlowTypes.SearchMoneyFlowResult>({
+  title: '资金流水详情',
+  detailsLoader: MoneyFlowApi.detail,
+})
+
+defineExpose({
+  open(data: MoneyFlowTypes.SearchMoneyFlowResult) {
+    detailPanelIns.value?.open(data)
+  },
+})
+</script>
+
diff --git a/src/pages/fin/money-flow/MoneyFlowForm.vue b/src/pages/fin/money-flow/MoneyFlowForm.vue
new file mode 100644
index 0000000..82ce455
--- /dev/null
+++ b/src/pages/fin/money-flow/MoneyFlowForm.vue
@@ -0,0 +1,135 @@
+<template>
+  <AFormPanel
+    ref="formPanel"
+    v-bind="formPanelProps">
+    <template #default="formData">
+      <div class="form-items">
+        <ElFormItem label="订单编号" prop="orderSn">
+          <ElInput
+            v-model="formData.orderSn"
+            :disabled="status === 'view'"
+            placeholder="订单编号"/>
+        </ElFormItem>
+        <ElFormItem label="车次" prop="trainNum">
+          <ElInput
+            v-model="formData.trainNum"
+            :disabled="status === 'view'"
+            placeholder="车次"/>
+        </ElFormItem>
+        <ElFormItem label="资金账户" prop="moneyAccountId">
+          <ElInput
+            v-model="formData.moneyAccountId"
+            :disabled="status === 'view'"
+            placeholder="资金账户 Id；fin_money_account.id"/>
+        </ElFormItem>
+        <ElFormItem label="变动前余额" prop="beforeBalance">
+          <ElInput
+            v-model="formData.beforeBalance"
+            :disabled="status === 'view'"
+            placeholder="变动前余额"/>
+        </ElFormItem>
+        <ElFormItem label="变动金额" prop="delta">
+          <ElInput
+            v-model="formData.delta"
+            :disabled="status === 'view'"
+            placeholder="变动金额；有正负"/>
+        </ElFormItem>
+        <ElFormItem label="变动后余额" prop="afterBalance">
+          <ElInput
+            v-model="formData.afterBalance"
+            :disabled="status === 'view'"
+            placeholder="变动后余额"/>
+        </ElFormItem>
+        <ElFormItem label="变动类型" prop="moneyChangeCategory">
+          <ElInput
+            v-model="formData.moneyChangeCategory"
+            :disabled="status === 'view'"
+            placeholder="变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付"/>
+        </ElFormItem>
+        <ElFormItem label="附件地址" prop="fileUrl">
+          <ElInput
+            v-model="formData.fileUrl"
+            :disabled="status === 'view'"
+            placeholder="附件地址"/>
+        </ElFormItem>
+        <ElFormItem label="备注" prop="memo">
+          <ElInput
+            v-model="formData.memo"
+            :disabled="status === 'view'"
+            placeholder="备注"/>
+        </ElFormItem>
+      </div>
+    </template>
+  </AFormPanel>
+</template>
+
+<script lang="ts" setup>
+import MoneyFlowApi from '@/pages/fin/money-flow/money-flow-api.ts'
+import Strings from '@/common/utils/strings.ts'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
+
+const props = withDefaults(defineProps<{
+  research?: () => void
+}>(), {
+  research: () => {
+  },
+})
+
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const status = ref<'add' | 'view' | 'modify'>('add')
+const formPanelProps = buildFormPanelProps<MoneyFlowTypes.SearchMoneyFlowResult>({
+  labelWidth: '100px',
+  title: status.value === 'add' ? '新建资金流水' : '修改资金流水信息',
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return MoneyFlowApi
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return MoneyFlowApi.add(data)
+        .then(props.research)
+    } else {
+      return MoneyFlowApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    orderSn: [ {required: true, message: '请填写订单编号', trigger: 'blur'} ],
+    trainNum: [ {required: true, message: '请填写车次', trigger: 'blur'} ],
+    moneyAccountId: [ {required: true, message: '请填写资金账户 Id；fin_money_account.id', trigger: 'blur'} ],
+    beforeBalance: [ {required: true, message: '请填写变动前余额', trigger: 'blur'} ],
+    delta: [ {required: true, message: '请填写变动金额；有正负', trigger: 'blur'} ],
+    afterBalance: [ {required: true, message: '请填写变动后余额', trigger: 'blur'} ],
+    moneyChangeCategory: [ {required: true, message: '请填写变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付', trigger: 'blur'} ],
+    fileUrl: [ {required: true, message: '请填写附件地址', trigger: 'blur'} ],
+    memo: [ {required: true, message: '请填写备注', trigger: 'blur'} ],
+  },
+  width: '600px',
+  modal: true,
+  appendToBody: true,
+})
+
+defineExpose({
+  open(data?: MoneyFlowTypes.SearchMoneyFlowResult) {
+    formPanelIns.value?.open(data?.id)
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.form-items {
+  grid-template-columns: 1fr 1fr;
+}
+
+</style>
+
diff --git a/src/pages/fin/money-flow/money-flow-api.ts b/src/pages/fin/money-flow/money-flow-api.ts
new file mode 100644
index 0000000..095ef47
--- /dev/null
+++ b/src/pages/fin/money-flow/money-flow-api.ts
@@ -0,0 +1,22 @@
+import {
+  get,
+  post,
+} from '@/common/utils/http-util.ts'
+
+export default {
+  paging(data: MoneyFlowTypes.SearchMoneyFlowParam) {
+    return get<G.PageResult<MoneyFlowTypes.SearchMoneyFlowResult>>('/money_flow/paging', data)
+  },
+  detail(id: string) {
+    return get<MoneyFlowTypes.SearchMoneyFlowResult>('/money_flow/detail', {id})
+  },
+  add(data: MoneyFlowTypes.AddMoneyFlowParam) {
+    return post('/money_flow/add', data)
+  },
+  modify(data: MoneyFlowTypes.ModifyMoneyFlowParam) {
+    return post('/money_flow/modify', data)
+  },
+  del(ids: string[]) {
+    return post('/money_flow/del', ids)
+  },
+}
diff --git a/src/pages/fin/money-flow/money-flow.d.ts b/src/pages/fin/money-flow/money-flow.d.ts
new file mode 100644
index 0000000..9982fe8
--- /dev/null
+++ b/src/pages/fin/money-flow/money-flow.d.ts
@@ -0,0 +1,145 @@
+export {}
+
+declare global {
+  namespace MoneyFlowTypes {
+    interface SearchMoneyFlowParam extends G.PageParam {
+      // Id
+      id?: string
+      // 订单 Id
+      orderId?: string
+      // 订单编号
+      orderSn?: string
+      // 车次
+      trainNum?: number
+      // 资金账户 Id；fin_money_account.id
+      moneyAccountId?: string
+      // 变动前余额
+      beforeBalance?: string
+      // 变动金额；有正负
+      delta?: string
+      // 变动后余额
+      afterBalance?: string
+      // 变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付
+      moneyChangeCategory?: string
+      // 附件地址
+      fileUrl?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface SearchMoneyFlowResult {
+      // Id
+      id?: string
+      // 订单 Id
+      orderId?: string
+      // 订单编号
+      orderSn?: string
+      // 车次
+      trainNum?: number
+      // 资金账户 Id；fin_money_account.id
+      moneyAccountId?: string
+      // 变动前余额
+      beforeBalance?: string
+      // 变动金额；有正负
+      delta?: string
+      // 变动后余额
+      afterBalance?: string
+      // 变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付
+      moneyChangeCategory?: string
+      // 附件地址
+      fileUrl?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface AddMoneyFlowParam {
+      // Id
+      id?: string
+      // 订单 Id
+      orderId?: string
+      // 订单编号
+      orderSn?: string
+      // 车次
+      trainNum?: number
+      // 资金账户 Id；fin_money_account.id
+      moneyAccountId?: string
+      // 变动前余额
+      beforeBalance?: string
+      // 变动金额；有正负
+      delta?: string
+      // 变动后余额
+      afterBalance?: string
+      // 变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付
+      moneyChangeCategory?: string
+      // 附件地址
+      fileUrl?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+
+    interface ModifyMoneyFlowParam {
+      // Id
+      id?: string
+      // 订单 Id
+      orderId?: string
+      // 订单编号
+      orderSn?: string
+      // 车次
+      trainNum?: number
+      // 资金账户 Id；fin_money_account.id
+      moneyAccountId?: string
+      // 变动前余额
+      beforeBalance?: string
+      // 变动金额；有正负
+      delta?: string
+      // 变动后余额
+      afterBalance?: string
+      // 变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付
+      moneyChangeCategory?: string
+      // 附件地址
+      fileUrl?: string
+      // 备注
+      memo?: string
+      // 创建人 Id；sys_user.id
+      creatorId?: string
+      // 修改人 Id； sys_user.id
+      modifierId?: string
+      // 创建时间
+      createTime?: string
+      // 修改时间
+      modifyTime?: string
+      // 是否删除； 0-->未删除、1-->已删除
+      deleted?: boolean
+    }
+  }
+}
diff --git a/src/pages/fin/money-flow/page.ts b/src/pages/fin/money-flow/page.ts
new file mode 100644
index 0000000..d15b20b
--- /dev/null
+++ b/src/pages/fin/money-flow/page.ts
@@ -0,0 +1,3 @@
+export default {
+  component: () => import('@/pages/fin/money-flow/MoneyFlow.vue'),
+} as RouterTypes.RouteConfig
diff --git a/src/pages/gds/goods-category/GoodsCategoryForm.vue b/src/pages/gds/goods-category/GoodsCategoryForm.vue
index 18c11ac..32ef990 100644
--- a/src/pages/gds/goods-category/GoodsCategoryForm.vue
+++ b/src/pages/gds/goods-category/GoodsCategoryForm.vue
@@ -38,7 +38,7 @@ import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import Uploader from '@/components/uploader/Uploader.vue'
 import { type FormRules } from 'element-plus'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import { bizType } from '@/pages/gds/goods-category/constants.ts'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
diff --git a/src/pages/gds/goods/GoodsForm.vue b/src/pages/gds/goods/GoodsForm.vue
index 31e0dba..0ed681d 100644
--- a/src/pages/gds/goods/GoodsForm.vue
+++ b/src/pages/gds/goods/GoodsForm.vue
@@ -89,7 +89,7 @@ import GoodsApi from '@/pages/gds/goods/goods-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import Uploader from '@/components/uploader/Uploader.vue'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import GoodsCategoryDropTable from '@/pages/gds/goods-category/GoodsCategoryDropTable.vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import {
diff --git a/src/pages/order/book/Book.vue b/src/pages/order/book/Book.vue
index 4d18564..6412a9c 100644
--- a/src/pages/order/book/Book.vue
+++ b/src/pages/order/book/Book.vue
@@ -59,7 +59,7 @@
       <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
       <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
 
-      <ElTableColumn label="车次" prop="trainNum" width="80"/>
+      <ElTableColumn label="车次" prop="trainNum" width="70"/>
       <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
       <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
       <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
@@ -67,14 +67,14 @@
       <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
       <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
       <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="140"/>
+      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
       <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="140"/>
+      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
       <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt"/>
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
 
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt"/>
+      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
 
 
       <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
diff --git a/src/pages/order/cancel/Cancel.vue b/src/pages/order/cancel/Cancel.vue
index 7882c46..d212733 100644
--- a/src/pages/order/cancel/Cancel.vue
+++ b/src/pages/order/cancel/Cancel.vue
@@ -59,7 +59,7 @@
       <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
       <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
 
-      <ElTableColumn label="车次" prop="trainNum" width="80"/>
+      <ElTableColumn label="车次" prop="trainNum" width="70"/>
       <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
       <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
       <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
@@ -67,14 +67,14 @@
       <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
       <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
       <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="140"/>
+      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
       <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="140"/>
+      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
       <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt"/>
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
 
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt"/>
+      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
 
 
       <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
diff --git a/src/pages/order/history/History.vue b/src/pages/order/history/History.vue
index 6e639ca..6cb15c6 100644
--- a/src/pages/order/history/History.vue
+++ b/src/pages/order/history/History.vue
@@ -59,7 +59,7 @@
       <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
       <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
 
-      <ElTableColumn label="车次" prop="trainNum" width="80"/>
+      <ElTableColumn label="车次" prop="trainNum" width="70"/>
       <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
       <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
       <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
@@ -67,14 +67,14 @@
       <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
       <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
       <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="140"/>
+      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
       <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="140"/>
+      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
       <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt"/>
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
 
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt"/>
+      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
 
 
       <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
diff --git a/src/pages/order/realtime/Realtime.vue b/src/pages/order/realtime/Realtime.vue
index 62431d0..1e6c52f 100644
--- a/src/pages/order/realtime/Realtime.vue
+++ b/src/pages/order/realtime/Realtime.vue
@@ -59,7 +59,7 @@
       <ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
       <!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
 
-      <ElTableColumn label="车次" prop="trainNum" width="80"/>
+      <ElTableColumn label="车次" prop="trainNum" width="70"/>
       <ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
       <!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
       <!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
@@ -67,14 +67,14 @@
       <ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
       <!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
       <!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
-      <ElTableColumn label="进场时间" prop="inTime" width="140"/>
+      <ElTableColumn label="进场时间" prop="inTime" width="130"/>
       <!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
-      <ElTableColumn label="出场时间" prop="outTime" width="140"/>
+      <ElTableColumn label="出场时间" prop="outTime" width="130"/>
       <!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
-      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt"/>
+      <ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
 
-      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt"/>
-      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt"/>
+      <ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
+      <ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
 
 
       <!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
diff --git a/src/pages/wh/in-order/InOrderForm.vue b/src/pages/wh/in-order/InOrderForm.vue
index 29ee582..2c3076f 100644
--- a/src/pages/wh/in-order/InOrderForm.vue
+++ b/src/pages/wh/in-order/InOrderForm.vue
@@ -56,7 +56,7 @@ import InOrderApi from '@/pages/wh/in-order/in-order-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 
 const props = withDefaults(defineProps<{
   research?: () => void
diff --git a/src/pages/wh/inventory/InventoryForm.vue b/src/pages/wh/inventory/InventoryForm.vue
index 10bab9a..d9d2da7 100644
--- a/src/pages/wh/inventory/InventoryForm.vue
+++ b/src/pages/wh/inventory/InventoryForm.vue
@@ -5,6 +5,7 @@
     :do-submit="doSubmit"
     :rules="rules"
     :title="status === 'add' ? '新建项目' : '修改项目'"
+
   >
     <template #default="{formData}">
       <div class="form-items">
@@ -52,7 +53,7 @@ import InventoryApi from '@/pages/wh/inventory/inventory-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 
 const props = withDefaults(defineProps<{
   research?: () => void
diff --git a/src/pages/wh/out-order/OutOrderForm.vue b/src/pages/wh/out-order/OutOrderForm.vue
index da703a2..08a1524 100644
--- a/src/pages/wh/out-order/OutOrderForm.vue
+++ b/src/pages/wh/out-order/OutOrderForm.vue
@@ -67,7 +67,7 @@ import SalesOrderApi from '@/pages/wh/sales-order/sales-order-api.ts'
 import WarehouseApi from '@/pages/wh/warehouse/warehouse-api.ts'
 import ASelect from '@/components/a-select/ASelect.vue'
 import UserApi from '@/pages/sys/user/user-api.ts'
-import type AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import type AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const props = withDefaults(defineProps<{
diff --git a/src/pages/wh/purchase-order/PurchaseOrderForm.vue b/src/pages/wh/purchase-order/PurchaseOrderForm.vue
index 36963d1..1c491b1 100644
--- a/src/pages/wh/purchase-order/PurchaseOrderForm.vue
+++ b/src/pages/wh/purchase-order/PurchaseOrderForm.vue
@@ -53,7 +53,7 @@ import PurchaseOrderApi from '@/pages/wh/purchase-order/purchase-order-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 
 const props = withDefaults(defineProps<{
   research?: () => void
diff --git a/src/pages/wh/sales-order/SalesOrderForm.vue b/src/pages/wh/sales-order/SalesOrderForm.vue
index a4dddd4..d7a52a2 100644
--- a/src/pages/wh/sales-order/SalesOrderForm.vue
+++ b/src/pages/wh/sales-order/SalesOrderForm.vue
@@ -70,7 +70,7 @@ import SalesOrderApi from '@/pages/wh/sales-order/sales-order-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 import { salesOrderStatus } from '@/pages/wh/sales-order/constants.ts'
 
 const props = withDefaults(defineProps<{
diff --git a/src/pages/wh/warehouse/WarehouseForm.vue b/src/pages/wh/warehouse/WarehouseForm.vue
index 209c1bf..256fc9a 100644
--- a/src/pages/wh/warehouse/WarehouseForm.vue
+++ b/src/pages/wh/warehouse/WarehouseForm.vue
@@ -31,7 +31,7 @@ import WarehouseApi from '@/pages/wh/warehouse/warehouse-api.ts'
 import Strings from '@/common/utils/strings.ts'
 import { type FormRules } from 'element-plus'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
+import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
 
 const props = withDefaults(defineProps<{
   research?: () => void