1

index.html

@@ -10,6 +10,12 @@
   <script charset="utf-8"
     src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=3TGBZ-ZK7K5-CMNIK-ICIGZ-K6TYQ-HTBTZ"></script>
   <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    }
     html {
       overflow: hidden;
       width: 100vw;

src/assets/stylus/button.styl

@@ -14,16 +14,9 @@
   width: var(--el-component-custom-height) !important;
 }
 
-.el-button--default {
-  --el-button-text-color #5D87FF !important;
-  --el-button-bg-color #FFFFFF !important;
-  --el-button-border-color: #5D87FF !important;
-
-  --el-button-hover-text-color #5D87FF !important;
-  --el-button-hover-bg-color #EEF3FF !important;
-  --el-button-hover-border-color: #5D87FF !important;
-}
 
+// 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+/*
 .el-button--primary {
   --el-button-text-color #FFFFFF !important;
   --el-button-bg-color #5D87FF !important;
@@ -33,13 +26,135 @@
   --el-button-hover-bg-color: #8DABFF !important;
   --el-button-hover-border-color: #8DABFF !important;
 }
+*/
 
-.el-button--danger {
+/* ========== Default 按钮配置 ========== */
-  --el-button-text-color #FFFFFF !important;
+.el-button--default {
-  --el-button-bg-color rgb(255, 130, 132) !important;
+  --el-button-text-color: var(--el-color-default) !important;
-  --el-button-border-color: rgb(255, 130, 132) !important;
+  --el-button-bg-color: var(--el-color-white) !important;
+  --el-button-border-color: var(--el-border-color-light) !important;
 
-  --el-button-hover-text-color: #FFFFFF !important;
+  --el-button-hover-text-color: var(--el-color-primary) !important;
-  --el-button-hover-bg-color: rgb(255, 130, 132) !important;
+  --el-button-hover-bg-color: var(--el-color-primary-light-9) !important;
-  --el-button-hover-border-color: rgb(255, 130, 132) !important;
+  --el-button-hover-border-color: var(--el-color-primary-light-7) !important;
+
+  --el-button-active-text-color: var(--el-color-primary) !important;
+  --el-button-active-bg-color: var(--el-color-primary-light-9) !important;
+  --el-button-active-border-color: var(--el-color-primary) !important;
+
+
+  --el-button-outline-color: var(--el-color-default-dark-2) !important;
+  --el-button-hover-link-text-color: var(--el-text-color-regular) !important;
+
+  --el-button-disabled-text-color: var(--el-color-default-light-5) !important;
+  --el-button-disabled-bg-color: #F9FAFB !important;
+  --el-button-disabled-border-color: #F9FAFB !important;
+}
+
+/* ========== Primary 按钮配置 ========== */
+.el-button--primary {
+  --el-button-text-color: var(--el-color-primary) !important;
+  --el-button-bg-color: var(--el-bg-primary) !important;
+  --el-button-border-color: var(--el-bg-primary) !important;
+  --el-button-outline-color: var(--el-color-primary-light-5) !important;
+  --el-button-active-color: var(--el-color-primary-dark-2) !important;
+  --el-button-hover-text-color: var(--el-color-primary) !important;
+  --el-button-hover-link-text-color: var(--el-color-primary-light-5) !important;
+  --el-button-hover-bg-color: #E1E8FF !important;
+  --el-button-hover-border-color: #E1E8FF !important;
+  --el-button-active-bg-color: #D7E0FF !important;
+  --el-button-active-border-color: #D7E0FF !important;
+  --el-button-disabled-text-color: var(--el-color-primary-light-5) !important;
+  --el-button-disabled-bg-color: #F0F4FF !important;
+  --el-button-disabled-border-color: #F0F4FF !important;
+}
+
+/* ========== Success 按钮配置 ========== */
+.el-button--success {
+  --el-button-text-color: var(--el-color-success) !important;
+  --el-button-bg-color: var(--el-bg-success) !important;
+  --el-button-border-color: var(--el-bg-success) !important;
+  --el-button-outline-color: var(--el-color-success-light-5) !important;
+  --el-button-active-color: var(--el-color-success-dark-2) !important;
+  --el-button-hover-text-color: var(--el-color-success) !important;
+  --el-button-hover-link-text-color: var(--el-color-success-light-5) !important;
+  --el-button-hover-bg-color: oklch(0.97 0.02 140.1) !important;
+  --el-button-hover-border-color: oklch(0.97 0.02 140.1) !important;
+  --el-button-active-bg-color: oklch(0.95 0.02 140.1) !important;
+  --el-button-active-border-color: oklch(0.95 0.02 140.1) !important;
+  --el-button-disabled-text-color: var(--el-color-success-light-5) !important;
+  --el-button-disabled-bg-color: oklch(0.98 0.01 140.1) !important;
+  --el-button-disabled-border-color: oklch(0.98 0.01 140.1) !important;
+}
+
+/* ========== Warning 按钮配置 ========== */
+.el-button--warning {
+  --el-button-text-color: var(--el-color-warning) !important;
+  --el-button-bg-color: var(--el-bg-warning) !important;
+  --el-button-border-color: var(--el-bg-warning) !important;
+  --el-button-outline-color: var(--el-color-warning-light-5) !important;
+  --el-button-active-color: var(--el-color-warning-dark-2) !important;
+  --el-button-hover-text-color: var(--el-color-warning) !important;
+  --el-button-hover-link-text-color: var(--el-color-warning-light-5) !important;
+  --el-button-hover-bg-color: oklch(0.97 0.03 58.5) !important;
+  --el-button-hover-border-color: oklch(0.97 0.03 58.5) !important;
+  --el-button-active-bg-color: oklch(0.95 0.03 58.5) !important;
+  --el-button-active-border-color: oklch(0.95 0.03 58.5) !important;
+  --el-button-disabled-text-color: var(--el-color-warning-light-5) !important;
+  --el-button-disabled-bg-color: oklch(0.98 0.02 58.5) !important;
+  --el-button-disabled-border-color: oklch(0.98 0.02 58.5) !important;
+}
+
+/* ========== Info 按钮配置 ========== */
+.el-button--info {
+  --el-button-text-color: var(--el-color-info) !important;
+  --el-button-bg-color: var(--el-bg-info) !important;
+  --el-button-border-color: var(--el-bg-info) !important;
+  --el-button-outline-color: var(--el-color-info-light-5) !important;
+  --el-button-active-color: var(--el-color-info-dark-2) !important;
+  --el-button-hover-text-color: var(--el-color-info) !important;
+  --el-button-hover-link-text-color: var(--el-color-info-light-5) !important;
+  --el-button-hover-bg-color: oklch(0.97 0.03 224.26) !important;
+  --el-button-hover-border-color: oklch(0.97 0.03 224.26) !important;
+  --el-button-active-bg-color: oklch(0.95 0.03 224.26) !important;
+  --el-button-active-border-color: oklch(0.95 0.03 224.26) !important;
+  --el-button-disabled-text-color: var(--el-color-info-light-5) !important;
+  --el-button-disabled-bg-color: oklch(0.98 0.02 224.26) !important;
+  --el-button-disabled-border-color: oklch(0.98 0.02 224.26) !important;
+}
+
+/* ========== Danger 按钮配置 ========== */
+.el-button--danger {
+  --el-button-text-color: var(--el-color-danger) !important;
+  --el-button-bg-color: var(--el-bg-danger) !important;
+  --el-button-border-color: var(--el-bg-danger) !important;
+  --el-button-outline-color: var(--el-color-danger-light-5) !important;
+  --el-button-active-color: var(--el-color-danger-dark-2) !important;
+  --el-button-hover-text-color: var(--el-color-danger) !important;
+  --el-button-hover-link-text-color: var(--el-color-danger-light-5) !important;
+  --el-button-hover-bg-color: oklch(0.97 0.02 22.09) !important;
+  --el-button-hover-border-color: oklch(0.97 0.02 22.09) !important;
+  --el-button-active-bg-color: oklch(0.95 0.02 22.09) !important;
+  --el-button-active-border-color: oklch(0.95 0.02 22.09) !important;
+  --el-button-disabled-text-color: var(--el-color-danger-light-5) !important;
+  --el-button-disabled-bg-color: oklch(0.98 0.01 22.09) !important;
+  --el-button-disabled-border-color: oklch(0.98 0.01 22.09) !important;
+}
+
+/* ========== Text 按钮配置 ========== */
+.el-button--text {
+  --el-button-text-color: var(--el-color-text-btn) !important;
+  --el-button-bg-color: var(--el-bg-text) !important;
+  --el-button-border-color: var(--el-bg-text) !important;
+  --el-button-outline-color: var(--el-color-text-btn-light-5) !important;
+  --el-button-active-color: var(--el-color-text-btn-dark-2) !important;
+  --el-button-hover-text-color: var(--el-color-text-btn) !important;
+  --el-button-hover-link-text-color: var(--el-color-text-btn-light-5) !important;
+  --el-button-hover-bg-color: #F9FAFB !important;
+  --el-button-hover-border-color: #F9FAFB !important;
+  --el-button-active-bg-color: #E9EBF0 !important;
+  --el-button-active-border-color: #E9EBF0 !important;
+  --el-button-disabled-text-color: var(--el-color-text-btn-light-5) !important;
+  --el-button-disabled-bg-color: #FAFBFC !important;
+  --el-button-disabled-border-color: #FAFBFC !important;
 }

src/assets/stylus/form.styl

@@ -0,0 +1,41 @@
+
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before {
+  position: absolute;
+  top calc(50% - 16px)
+  left 0
+  width 7px !important;
+  text-align: center !important;
+  margin: 0 !important;
+}
+
+.el-form-item__label {
+  text-align-last: justify;
+  display: inline-block !important;
+  position: relative;
+  padding 0 12px 0 0 !important;
+}
+
+
+.el-form-item.is-required .el-form-item__label {
+  padding 0 12px !important;
+}
+
+.el-form-item.is-required ~ .el-form-item:not(.is-required) .el-form-item__label {
+  padding 0 12px !important;
+}
+
+.el-form-item:has(+ .el-form-item.is-required):not(.is-required) .el-form-item__label {
+  padding 0 12px !important;
+}
+
+.el-form-item.is-error {
+  .a-uploader {
+    .el-upload {
+      &.el-upload--text,
+      &.el-upload--picture,
+      &.el-upload--picture-card {
+        border-color: var(--el-color-danger);
+      }
+    }
+  }
+}

src/assets/stylus/index.styl

@@ -5,91 +5,7 @@
 @import "select-dropdown.styl"
 @import "dialog.styl"
 @import "table.styl"
-// 优化 Element Plus 组件库默认样式
+@import "message-box.styl"
-
+@import "scrollbar.styl"
-// -------------------------------- 修改 el-size=default 组件默认高度 start --------------------------------
+@import "form.styl"
-// 修改 el-button 高度
+@import "input.styl"
-
-// 修改 el-select 高度
-.el-select--default {
-  .el-select__wrapper {
-    min-height: var(--el-component-custom-height) !important;
-  }
-}
-
-// 修改 el-checkbox-button 高度
-.el-checkbox-button--default .el-checkbox-button__inner,
-  // 修改 el-radio-button 高度
-.el-radio-button--default .el-radio-button__inner {
-  padding: 10px 15px !important;
-}
-
-.el-scrollbar__bar.is-vertical {
-  width: 4px;
-}
-
-// -------------------------------- 修改 el-size=default 组件默认高度 end --------------------------------
-
-.el-input-number {
-  width 100% !important
-}
-
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before {
-  position: absolute;
-  top calc(50% - 16px)
-  left 0
-  width 7px !important;
-  text-align: center !important;
-  margin: 0 !important;
-}
-
-.el-form-item__label {
-  text-align-last: justify;
-  display: inline-block !important;
-  position: relative;
-  padding 0 12px 0 0 !important;
-}
-
-
-.el-form-item.is-required .el-form-item__label {
-  padding 0 12px !important;
-}
-
-.el-form-item.is-required ~ .el-form-item:not(.is-required) .el-form-item__label {
-  padding 0 12px !important;
-}
-
-.el-form-item:has(+ .el-form-item.is-required):not(.is-required) .el-form-item__label {
-  padding 0 12px !important;
-}
-
-.el-form-item.is-error {
-  .a-uploader {
-    .el-upload {
-      &.el-upload--text,
-      &.el-upload--picture,
-      &.el-upload--picture-card {
-        border-color: var(--el-color-danger);
-      }
-    }
-  }
-}
-
-.el-upload-list__item.is-success:focus .el-upload-list__item-status-label {
-  display: inline-flex !important;
-  opacity: 1 !important;
-}
-
-.el-upload-list__item.is-success:hover .el-upload-list__item-status-label {
-  display none !important;
-  opacity 0 !important;
-}
-
-
-.el-radio-group {
-  gap 10px
-
-  .el-radio {
-    margin 0 !important
-  }
-}

src/assets/stylus/input.styl

@@ -0,0 +1,25 @@
+.el-input-number {
+  width 100% !important
+}
+
+
+.el-select--default {
+  .el-select__wrapper {
+    min-height: var(--el-component-custom-height) !important;
+  }
+}
+
+
+.el-checkbox-button--default .el-checkbox-button__inner,
+.el-radio-group {
+  gap 10px
+
+  .el-radio {
+    margin 0 !important
+  }
+}
+
+.el-radio-button--default .el-radio-button__inner {
+  padding: 10px 15px !important;
+}
+

src/assets/stylus/message-box.styl

@@ -0,0 +1,10 @@
+.el-message-box {
+  --el-messagebox-width 300px !important
+  --el-messagebox-border-radius: 8px !important;
+  max-width unset !important
+  width unset !important;
+}
+
+.el-message-box__container {
+  justify-content center
+}

src/assets/stylus/root.styl

@@ -1,10 +1,79 @@
 body {
-  --custom-radius: 9px;
   --main-color: #5D87FF;
+  /* Primary 系列 (固定 #5D87FF 为主色，衍生色匹配 EBF0FF 风格) */
   --el-color-primary: #5D87FF !important;
-  --el-color-danger: oklch(73% .15 25.3) !important;
+  --el-color-primary-light-3: #85A5FF !important; /* 浅3度 - 悬浮背景/边框 */
+  --el-color-primary-light-5: #AAC0FF !important; /* 浅5度 - 禁用背景/边框、悬浮链接文字 */
+  --el-color-primary-light-7: #C9D4FF !important; /* 浅7度 - 极浅背景/辅助边框 */
+  --el-color-primary-light-8: #DCE4FF !important; /* 浅8度 - 最浅背景/分割线 */
+  --el-color-primary-light-9: #EBF0FF !important; /* 浅9度 - 近白色背景/高亮区 */
+  --el-color-primary-dark-2: #4A6FE6 !important; /* 深2度 - 激活背景/边框、激活文字 */
+
+  /* Success 系列 (OKLCH 转换为 HEX 格式) */
+  --el-color-success: #4CB772 !important; /* 原 oklch(68% .18 142.5) */
+  --el-color-success-light-3: #6FC78C !important; /* 原 oklch(72% .15 142.5) */
+  --el-color-success-light-5: #91D6A7 !important; /* 原 oklch(76% .12 142.5) */
+  --el-color-success-light-7: #B3E5C1 !important; /* 原 oklch(80% .09 142.5) */
+  --el-color-success-light-8: #D5F4DB !important; /* 原 oklch(84% .06 142.5) */
+  --el-color-success-light-9: #F7FFF6 !important; /* 原 oklch(88% .03 142.5) */
+  --el-color-success-dark-2: #38A85E !important; /* 原 oklch(64% .20 142.5) */
+
+  /* Warning 系列 (OKLCH 转换为 HEX 格式) */
+  --el-color-warning: #F2B84D !important; /* 原 oklch(75% .22 60.8) */
+  --el-color-warning-light-3: #F7CA74 !important; /* 原 oklch(78% .19 60.8) */
+  --el-color-warning-light-5: #FBDB9B !important; /* 原 oklch(81% .16 60.8) */
+  --el-color-warning-light-7: #FFEDC2 !important; /* 原 oklch(84% .13 60.8) */
+  --el-color-warning-light-8: #FFF8DF !important; /* 原 oklch(87% .10 60.8) */
+  --el-color-warning-light-9: #FFFEFC !important; /* 原 oklch(90% .07 60.8) */
+  --el-color-warning-dark-2: #E0A636 !important; /* 原 oklch(71% .24 60.8) */
+
+  /* Info 系列 (OKLCH 转换为 HEX 格式) */
+  --el-color-info: #6DA1F0 !important; /* 原 oklch(72% .19 231.6) */
+  --el-color-info-light-3: #8EB1F4 !important; /* 原 oklch(75% .16 231.6) */
+  --el-color-info-light-5: #AFC1F8 !important; /* 原 oklch(78% .13 231.6) */
+  --el-color-info-light-7: #D0D1FC !important; /* 原 oklch(81% .10 231.6) */
+  --el-color-info-light-8: #E1E1FE !important; /* 原 oklch(84% .07 231.6) */
+  --el-color-info-light-9: #F2F2FF !important; /* 原 oklch(87% .04 231.6) */
+  --el-color-info-dark-2: #578EE8 !important; /* 原 oklch(68% .21 231.6) */
+
+  /* Danger 系列 (OKLCH 转换为 HEX 格式) */
+  --el-color-danger: #ED7A69 !important; /* 原 oklch(73% .15 25.3) */
+  --el-color-danger-light-3: #F2998C !important; /* 原 oklch(76% .12 25.3) */
+  --el-color-danger-light-5: #F7B8AF !important; /* 原 oklch(79% .09 25.3) */
+  --el-color-danger-light-7: #FCD7D2 !important; /* 原 oklch(82% .06 25.3) */
+  --el-color-danger-light-8: #FFE6E5 !important; /* 原 oklch(85% .03 25.3) */
+  --el-color-danger-light-9: #FFF6F6 !important; /* 原 oklch(88% .00 25.3) */
+  --el-color-danger-dark-2: #E05F4D !important; /* 原 oklch(69% .17 25.3) */
+
+  /* Default 系列 (匹配十六进制配色风格) */
+  --el-color-default: #7987A1 !important;
+  --el-color-default-light-3: #8E9AB0 !important;
+  --el-color-default-light-5: #A3ABC0 !important;
+  --el-color-default-light-7: #B8C0D0 !important;
+  --el-color-default-light-8: #CCD5DF !important;
+  --el-color-default-light-9: #E1E9EE !important;
+  --el-color-default-dark-2: #6A788F !important;
+
+  /* Text 系列 (匹配十六进制配色风格) */
+  --el-color-text-btn: #4E5969 !important;
+  --el-color-text-btn-light-3: #616C7C !important;
+  --el-color-text-btn-light-5: #747F8F !important;
+  --el-color-text-btn-light-7: #878FAF !important;
+  --el-color-text-btn-light-8: #9AA4BF !important;
+  --el-color-text-btn-light-9: #ADB9CF !important;
+  --el-color-text-btn-dark-2: #3B4656 !important;
+
+  /* 通用背景色变量 (匹配你的 icon-btn 背景色) */
+  --el-bg-primary: #EBF0FF !important;
+  --el-bg-success: oklch(0.96 0.02 140.1) !important;
+  --el-bg-warning: oklch(0.96 0.03 58.5) !important;
+  --el-bg-info: oklch(0.96 0.03 224.26) !important;
+  --el-bg-danger: oklch(0.96 0.02 22.09) !important;
+  --el-bg-default: #F2F4F5 !important;
+  --el-bg-text: #F8F9FA !important;
+
+  --el-color-white: #FFFFFF !important;
 
-  --el-menu-level: 0;
   --el-font-weight-primary: 400 !important;
 
   --el-component-custom-height: 32px !important;
@@ -13,26 +82,12 @@ body {
 
   --el-border-radius-base: 4px !important;
 
-  --el-messagebox-border-radius: 8px !important;
   --el-border-color-light #EAEBF1 !important;
-  --border-base: 1px solid var(--el-border-color-light) !important;
 
-  .region .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    color: var(--theme-color) !important;
-  }
   letter-spacing: .5px;
   //user-select: none;
 }
 
-.el-message-box {
-  --el-messagebox-width 300px !important
-  max-width unset !important
-  width unset !important;
-}
-
-.el-message-box__container {
-  justify-content center
-}
 
 :focus-visible {
   outline none !important

src/assets/stylus/scrollbar.styl

@@ -0,0 +1,3 @@
+.el-scrollbar__bar.is-vertical {
+  width: 4px;
+}

src/assets/stylus/table.styl

@@ -57,13 +57,26 @@
       border-color #F2F4F5 !important
     }
 
-    .el-button--info.icon-btn {
+
+    .el-button--primary.icon-btn {
       color #5D87FF !important
       background-color #EBF0FF !important
       border-color #EBF0FF !important
     }
 
-    .el-button--primary.icon-btn {
+    .el-button--success.icon-btn {
+      color: oklch(68% .18 142.5) !important;
+      background-color: oklch(0.96 0.02 140.1) !important;
+      border-color: oklch(0.96 0.02 140.1) !important;
+    }
+
+    .el-button--warning.icon-btn {
+      color: oklch(75% .22 60.8) !important;
+      background-color: oklch(0.96 0.03 58.5) !important;
+      border-color: oklch(0.96 0.03 58.5) !important;
+    }
+
+    .el-button--info.icon-btn {
       color oklch(72% .19 231.6) !important
       background-color oklch(0.96 0.03 224.26) !important
       border-color oklch(0.96 0.03 224.26) !important
@@ -74,5 +87,11 @@
       background-color oklch(0.96 0.02 22.09) !important
       border-color oklch(0.96 0.02 22.09) !important
     }
+
+    .el-button--text.icon-btn {
+      color: #4E5969 !important;
+      background-color: #F8F9FA !important;
+      border-color: #F8F9FA !important;
+    }
   }
 }

src/components/a-form-panel/AFormPanel.tsx

@@ -17,15 +17,17 @@ import Utils from '@/common/utils'
 import FormUtil from '@/common/utils/formUtil.ts'
 import styles from '@/components/a-form-panel/a-form-panel.module.styl'
 
+type RuleType<T extends object> = Partial<Record<keyof T, Arrayable<FormItemRule>>>
+
 export interface FormPanelType<T extends object> {
   title: string
   detailsLoader: (id?: string) => Promise<T | undefined | null | void>
-  doSubmit: (data: T) => Promise<boolean | void>
+  doSubmit: (data: T) => Promise<boolean | undefined | null | void>
-  rules?: Partial<Record<keyof T, Arrayable<FormItemRule>>>
+  rules: RuleType<T>
-  labelWidth?: string
+  labelWidth: string
-  width?: string
+  width: string
-  modal?: boolean
+  modal: boolean
-  appendToBody?: boolean
+  appendToBody: boolean
 }
 
 const component = defineComponent(
@@ -110,9 +112,9 @@ export interface AFormPanelInstance extends InstanceType<typeof component> {
 }
 
 
-export function buildFormPanelProps<T extends object>(props: DeepPartial<FormPanelType<T>>) {
+export function buildFormPanelProps<T extends object>(props: Partial<Exclude<FormPanelType<T>, 'title' | 'detailsLoader' | 'doSubmit'>> & Pick<FormPanelType<T>, 'detailsLoader' | 'doSubmit'>) {
   if (props.labelWidth == null) {
-    props.labelWidth = '80px'
+    props.labelWidth = '90px'
   }
   if (props.appendToBody == null) {
     props.appendToBody = false
@@ -123,6 +125,9 @@ export function buildFormPanelProps<T extends object>(props: DeepPartial<FormPan
   if (props.modal == null) {
     props.modal = false
   }
+  if (props.rules == null) {
+    props.rules = {} as RuleType<T>
+  }
   return reactive({
     title: props.title!,
     detailsLoader: props.detailsLoader!,

src/components/a-icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* 项目名称 再昇云 */
-  src: url('@/components/a-icon/iconfont.woff2?t=1769666423879') format('woff2'),
+  src: url('@/components/a-icon/iconfont.woff2?t=1769832742609') format('woff2'),
-  url('@/components/a-icon/iconfont.woff?t=1769666423879') format('woff'),
+  url('@/components/a-icon/iconfont.woff?t=1769832742609') format('woff'),
-  url('@/components/a-icon/iconfont.ttf?t=1769666423879') format('truetype');
+  url('@/components/a-icon/iconfont.ttf?t=1769832742609') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-tiaozhang:before {
+  content: "\e6d6";
+}
+
+.icon-chongzhi0101:before {
+  content: "\e65f";
+}
+
 .icon-liandan:before {
   content: "\e65e";
 }

src/components/a-icon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "10107476",
+      "name": "调账",
+      "font_class": "tiaozhang",
+      "unicode": "e6d6",
+      "unicode_decimal": 59094
+    },
+    {
+      "icon_id": "651184",
+      "name": "充值",
+      "font_class": "chongzhi0101",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
     {
       "icon_id": "15056965",
       "name": "联单",

src/components/a-icon/iconfont.ts

@@ -5,6 +5,20 @@ export const icons = {
   'css_prefix_text': 'icon-',
   'description': '',
   'glyphs': [
+    {
+      'icon_id': '10107476',
+      'name': '调账',
+      'font_class': 'tiaozhang',
+      'unicode': 'e6d6',
+      'unicode_decimal': 59094,
+    },
+    {
+      'icon_id': '651184',
+      'name': '充值',
+      'font_class': 'chongzhi0101',
+      'unicode': 'e65f',
+      'unicode_decimal': 58975,
+    },
     {
       'icon_id': '15056965',
       'name': '联单',

src/components/a-page/a-table-page/a-table-page.module.styl

@@ -124,86 +124,6 @@
       }
     }
 
-    /*:global(.el-table) {
-      width 100%
-      height: 100%;
-
-      :global(.table-header) {
-        color #454C59
-
-        th {
-          background-color #EDF1F7
-          font-weight 500
-          position relative
-
-          & > div {
-            display flex
-            gap 5px
-            align-items center
-          }
-
-          &:not(:first-child) > div::before {
-            position: absolute;
-            top: 50%;
-            left: 1px;
-            width: 1px;
-            background-color: #D3D7DE;
-            transform: translateY(-50%);
-            content: "";
-            height 50%
-          }
-        }
-      }
-
-      :global(.table-cell) {
-        color #2F3540
-      }
-
-      .action-btn {
-        width 100%
-        display grid
-        grid-template-columns repeat(auto-fit, 32px)
-        grid-auto-rows: 32px;
-        gap: 10px;
-
-        .text-btn {
-          margin 0
-        }
-
-        .icon-btn {
-          margin 0
-          padding: 8px;
-          justify-content: center;
-          align-items: center;
-        }
-
-        :global(.el-button--default).icon-btn {
-          color #7987A1
-          background-color #F2F4F5
-          border-color #F2F4F5
-        }
-
-        :global(.el-button--info).icon-btn {
-          color #5D87FF
-          background-color #EBF0FF
-          border-color #EBF0FF
-        }
-
-        :global(.el-button--primary).icon-btn {
-          color oklch(72% .19 231.6)
-          background-color oklch(0.96 0.03 224.26)
-          border-color oklch(0.96 0.03 224.26)
-        }
-
-        :global(.el-button--danger).icon-btn {
-          color oklch(73% .15 25.3)
-          background-color oklch(0.96 0.02 22.09)
-          border-color oklch(0.96 0.02 22.09)
-        }
-      }
-    }
-*/
-
     :global(.el-pagination) {
       justify-content center
 

src/components/uploader/Uploader.vue

@@ -200,6 +200,17 @@ defineExpose({
         }
       }
     }
+
+    .el-upload-list__item.is-success:focus .el-upload-list__item-status-label {
+      display: inline-flex !important;
+      opacity: 1 !important;
+    }
+
+    .el-upload-list__item.is-success:hover .el-upload-list__item-status-label {
+      display none !important;
+      opacity 0 !important;
+    }
+
   }
 
   :deep(.el-icon--close-tip) {

src/pages/cst/customer/CustomerForm.vue

@@ -1,11 +1,8 @@
 <template>
   <AFormPanel
     ref="formPanel"
-    :rules="rules"
+    v-bind="formPanelProps">
-    :details-loader="detailsLoader"
+    <template #default="formData">
-    :do-submit="doSubmit"
-    :title="status === 'add' ? '新建客户' : '修改客户信息'">
-    <template #default="{formData}">
       <div class="form-items">
         <ElFormItem label="账号" prop="username">
           <ElInput :model-value="formData.username" disabled placeholder="账号"/>
@@ -37,13 +34,14 @@
 <script lang="ts" setup>
 import CustomerApi from '@/pages/cst/customer/customer-api.ts'
 import Strings from '@/common/utils/strings.ts'
-import { type FormRules } from 'element-plus'
+import AFormPanel, {
-import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 import {
   identityCategory,
   settlementWay,
 } from '@/pages/cst/customer/constants.ts'
-import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const props = withDefaults(defineProps<{
   research?: () => void
@@ -51,36 +49,38 @@ const props = withDefaults(defineProps<{
   research: () => {
   },
 })
-const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
 const status = ref<'add' | 'modify'>('add')
-const rules = reactive<FormRules<CustomerTypes.TableData>>({
+const formPanelProps = buildFormPanelProps<CustomerTypes.SearchCustomerResult>({
-  nickname: [ {required: true, message: '请填写客户姓名', trigger: 'blur'} ],
+  title: status.value === 'add' ? '新建客户' : '修改客户信息',
-  phone: [ {required: true, message: '请填写联系电话', trigger: 'blur'} ],
+  detailsLoader(id?: string) {
-  settlementWay: [ {required: true, message: '请选择结算方式', trigger: 'blur'} ],
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve()
+    } else {
+
+      status.value = 'modify'
+      return CustomerApi
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return CustomerApi.add(data)
+        .then(props.research)
+    } else {
+      return CustomerApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    nickname: [ {required: true, message: '请填写客户姓名', trigger: 'blur'} ],
+    phone: [ {required: true, message: '请填写联系电话', trigger: 'blur'} ],
+    settlementWay: [ {required: true, message: '请选择结算方式', trigger: 'blur'} ],
+  },
 })
 
-function detailsLoader(id?: string) {
-  if (Strings.isBlank(id)) {
-    status.value = 'add'
-    return Promise.resolve()
-  } else {
-
-    status.value = 'modify'
-    return CustomerApi
-      .detail(id!)
-      .then(res => res.data)
-  }
-}
-
-function doSubmit(data: CustomerTypes.TableData) {
-  if (status.value === 'add') {
-    return CustomerApi.add(data)
-      .then(props.research)
-  } else {
-    return CustomerApi.modify(data)
-      .then(props.research)
-  }
-}
 
 defineExpose({
   open(data?: CustomerTypes.SearchCustomerResult) {

src/pages/cst/project/ProjectForm.vue

@@ -1,12 +1,8 @@
 <template>
   <AFormPanel
     ref="formPanel"
-    :details-loader="detailsLoader"
+    v-bind="formPanelProps">
-    :do-submit="doSubmit"
+    <template #default="formData">
-    :rules="rules"
-    :title="status === 'add' ? '新建项目' : '修改项目'"
-  >
-    <template #default="{formData}">
       <div class="form-items">
         <ElFormItem label="项目名称" prop="projectName">
           <ElInput
@@ -111,37 +107,10 @@
 <script lang="ts" setup>
 import ProjectApi from '@/pages/cst/project/project-api.ts'
 import Strings from '@/common/utils/strings.ts'
-import { type FormRules } from 'element-plus'
+import AFormPanel, {
-import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
+  type AFormPanelInstance,
-import type { ComponentExposed } from 'vue-component-type-helpers'
+  buildFormPanelProps,
-
+} from '@/components/a-form-panel/AFormPanel.tsx'
-const rules = reactive<FormRules<ProjectTypes.SearchProjectResult>>({
-  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
-  projectName: [ {required: true, message: '请填写项目名称', trigger: 'blur'} ],
-  contractPicture: [ {required: true, message: '请填写合同图片', trigger: 'blur'} ],
-  transCustomerId: [ {required: true, message: '请填写运输方客户 Id', trigger: 'blur'} ],
-  transOrgId: [ {required: true, message: '请填写运输方企业 Id', trigger: 'blur'} ],
-  fringeCustomerId: [ {required: true, message: '请填写产废方/购买方客户 Id', trigger: 'blur'} ],
-  fringeOrgId: [ {required: true, message: '请填写产废方/购买方企业 Id', trigger: 'blur'} ],
-  province: [ {required: true, message: '请填写省；代码', trigger: 'blur'} ],
-  city: [ {required: true, message: '请填写市；代码', trigger: 'blur'} ],
-  area: [ {required: true, message: '请填写区县；代码', trigger: 'blur'} ],
-  town: [ {required: true, message: '请填写乡镇街道；代码', trigger: 'blur'} ],
-  provinceName: [ {required: true, message: '请填写省；名称', trigger: 'blur'} ],
-  cityName: [ {required: true, message: '请填写市；名称', trigger: 'blur'} ],
-  areaName: [ {required: true, message: '请填写区县；名称', trigger: 'blur'} ],
-  townName: [ {required: true, message: '请填写乡镇街道；名称', trigger: 'blur'} ],
-  address: [ {required: true, message: '请填写详细地址', trigger: 'blur'} ],
-  lng: [ {required: true, message: '请填写经度', trigger: 'blur'} ],
-  lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
-  contractStartDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
-  contractEndDate: [ {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'} ],
-})
 
 const props = withDefaults(defineProps<{
   research?: () => void
@@ -150,30 +119,58 @@ const props = withDefaults(defineProps<{
   },
 })
 
-const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
 const status = ref<'add' | 'modify'>('add')
-
+const formPanelProps = buildFormPanelProps<ProjectTypes.SearchProjectResult>({
-function detailsLoader(id?: string) {
+  title: status.value === 'add' ? '新建项目' : '修改项目',
-  if (Strings.isBlank(id)) {
+  detailsLoader(id?: string) {
-    status.value = 'add'
+    if (Strings.isBlank(id)) {
-    return Promise.resolve()
+      status.value = 'add'
-  } else {
+      return Promise.resolve()
-    status.value = 'modify'
+    } else {
-    return ProjectApi
+      status.value = 'modify'
-      .detail(id!)
+      return ProjectApi
-      .then(res => res.data)
+        .detail(id!)
-  }
+        .then(res => res.data)
-}
+    }
-
+  },
-function doSubmit(data: ProjectTypes.SearchProjectResult) {
+  doSubmit(data) {
-  if (status.value === 'add') {
+    if (status.value === 'add') {
-    return ProjectApi.add(data)
+      return ProjectApi.add(data)
-      .then(props.research)
+        .then(props.research)
-  } else {
+    } else {
-    return ProjectApi.modify(data)
+      return ProjectApi.modify(data)
-      .then(props.research)
+        .then(props.research)
-  }
+    }
-}
+  },
+  rules: {
+    id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
+    projectName: [ {required: true, message: '请填写项目名称', trigger: 'blur'} ],
+    contractPicture: [ {required: true, message: '请填写合同图片', trigger: 'blur'} ],
+    transCustomerId: [ {required: true, message: '请填写运输方客户 Id', trigger: 'blur'} ],
+    transOrgId: [ {required: true, message: '请填写运输方企业 Id', trigger: 'blur'} ],
+    fringeCustomerId: [ {required: true, message: '请填写产废方/购买方客户 Id', trigger: 'blur'} ],
+    fringeOrgId: [ {required: true, message: '请填写产废方/购买方企业 Id', trigger: 'blur'} ],
+    province: [ {required: true, message: '请填写省；代码', trigger: 'blur'} ],
+    city: [ {required: true, message: '请填写市；代码', trigger: 'blur'} ],
+    area: [ {required: true, message: '请填写区县；代码', trigger: 'blur'} ],
+    town: [ {required: true, message: '请填写乡镇街道；代码', trigger: 'blur'} ],
+    provinceName: [ {required: true, message: '请填写省；名称', trigger: 'blur'} ],
+    cityName: [ {required: true, message: '请填写市；名称', trigger: 'blur'} ],
+    areaName: [ {required: true, message: '请填写区县；名称', trigger: 'blur'} ],
+    townName: [ {required: true, message: '请填写乡镇街道；名称', trigger: 'blur'} ],
+    address: [ {required: true, message: '请填写详细地址', trigger: 'blur'} ],
+    lng: [ {required: true, message: '请填写经度', trigger: 'blur'} ],
+    lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
+    contractStartDate: [ {required: true, message: '请填写合同有效期', trigger: 'blur'} ],
+    contractEndDate: [ {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'} ],
+  },
+})
 
 defineExpose({
   open(data?: ProjectTypes.SearchProjectResult) {

src/pages/cst/station/StationForm.vue

@@ -1,13 +1,8 @@
 <template>
   <AFormPanel
     ref="formPanel"
-    :details-loader="detailsLoader"
+    v-bind="formPanelProps">
-    :do-submit="doSubmit"
+    <template #default="formData">
-    :rules="rules"
-    label-width="100px"
-    :title="status === 'add' ? '新建站点' : '修改站点'"
-  >
-    <template #default="{formData}">
       <div class="form-items">
         <ElFormItem label="站点名称" prop="stationName">
           <ElInput v-model="formData.stationName" placeholder="站点名称"/>
@@ -57,9 +52,10 @@
 <script lang="ts" setup>
 import StationApi from '@/pages/cst/station/station-api.ts'
 import Strings from '@/common/utils/strings.ts'
-import { type FormRules } from 'element-plus'
+import AFormPanel, {
-import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
+  type AFormPanelInstance,
-import type { ComponentExposed } from 'vue-component-type-helpers'
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 
 const props = withDefaults(defineProps<{
   research?: () => void
@@ -67,54 +63,54 @@ const props = withDefaults(defineProps<{
   research: () => {
   },
 })
-const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
 const status = ref<'add' | 'modify'>('add')
-
+const formPanelProps = buildFormPanelProps<ProjectTypes.SearchProjectResult>({
-const rules = reactive<FormRules<StationTypes.SearchStationResult>>({
+  title: status.value === 'add' ? '新建站点' : '修改站点',
-  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
+  detailsLoader(id?: string) {
-  orgId: [ {required: true, message: '请填写企业信息 Id', trigger: 'blur'} ],
+    if (Strings.isBlank(id)) {
-  stationName: [ {required: true, message: '请填写站点名称', trigger: 'blur'} ],
+      status.value = 'add'
-  province: [ {required: true, message: '请填写省；代码', trigger: 'blur'} ],
+      return Promise.resolve()
-  city: [ {required: true, message: '请填写市；代码', trigger: 'blur'} ],
+    } else {
-  area: [ {required: true, message: '请填写区县；代码', trigger: 'blur'} ],
+      status.value = 'modify'
-  town: [ {required: true, message: '请填写乡镇街道；代码', trigger: 'blur'} ],
+      return StationApi
-  provinceName: [ {required: true, message: '请填写省', trigger: 'blur'} ],
+        .detail(id!)
-  cityName: [ {required: true, message: '请填写市', trigger: 'blur'} ],
+        .then(res => res.data)
-  areaName: [ {required: true, message: '请填写区县', trigger: 'blur'} ],
+    }
-  townName: [ {required: true, message: '请填写乡镇街道', trigger: 'blur'} ],
+  },
-  address: [ {required: true, message: '请填写详细地址', trigger: 'blur'} ],
+  doSubmit(data) {
-  lng: [ {required: true, message: '请填写经度', trigger: 'blur'} ],
+    if (status.value === 'add') {
-  lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
+      return StationApi.add(data)
-  creatorId: [ {required: true, message: '请填写创建人', trigger: 'blur'} ],
+        .then(props.research)
-  modifierId: [ {required: true, message: '请填写修改人', trigger: 'blur'} ],
+    } else {
-  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
+      return StationApi.modify(data)
-  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
+        .then(props.research)
-  deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
+    }
+  },
+  rules: {
+    id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
+    orgId: [ {required: true, message: '请填写企业信息 Id', trigger: 'blur'} ],
+    stationName: [ {required: true, message: '请填写站点名称', trigger: 'blur'} ],
+    province: [ {required: true, message: '请填写省；代码', trigger: 'blur'} ],
+    city: [ {required: true, message: '请填写市；代码', trigger: 'blur'} ],
+    area: [ {required: true, message: '请填写区县；代码', trigger: 'blur'} ],
+    town: [ {required: true, message: '请填写乡镇街道；代码', trigger: 'blur'} ],
+    provinceName: [ {required: true, message: '请填写省', trigger: 'blur'} ],
+    cityName: [ {required: true, message: '请填写市', trigger: 'blur'} ],
+    areaName: [ {required: true, message: '请填写区县', trigger: 'blur'} ],
+    townName: [ {required: true, message: '请填写乡镇街道', trigger: 'blur'} ],
+    address: [ {required: true, message: '请填写详细地址', trigger: 'blur'} ],
+    lng: [ {required: true, message: '请填写经度', trigger: 'blur'} ],
+    lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
+    creatorId: [ {required: true, message: '请填写创建人', trigger: 'blur'} ],
+    modifierId: [ {required: true, message: '请填写修改人', trigger: 'blur'} ],
+    createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
+    modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
+    deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
+  },
 })
 
 
-function detailsLoader(id?: string) {
-  if (Strings.isBlank(id)) {
-    status.value = 'add'
-    return Promise.resolve()
-  } else {
-    status.value = 'modify'
-    return StationApi
-      .detail(id!)
-      .then(res => res.data)
-  }
-}
-
-function doSubmit(data: ProjectTypes.SearchProjectResult) {
-  if (status.value === 'add') {
-    return StationApi.add(data)
-      .then(props.research)
-  } else {
-    return StationApi.modify(data)
-      .then(props.research)
-  }
-}
-
 defineExpose({
   open(data?: ProjectTypes.SearchProjectResult) {
     formPanelIns.value?.open(data?.id)

src/pages/fin/bill/Bill.vue

@@ -1,113 +1,36 @@
 <template>
-  <FormPage
+  <ATablePage
-    ref="formPage"
+    v-bind="tablePageProps">
-    :action-column="actionColumn"
+    <template #highFormItem="formData">
-    :left-tools="leftTools"
+      <ElFormItem label="客户名称">
-    :paging="paging">
+        <ElInput v-model="formData.customerId" placeholder="客户名称"/>
-    <template #searchFormItem="{ searchForm }">
-      <ElFormItem label="Id">
-        <ElInput
-          v-model="searchForm.id"
-          placeholder="Id"/>
       </ElFormItem>
-      <ElFormItem label="用户 Id">
+      <ElFormItem label="组织名称">
-        <ElInput
+        <ElInput v-model="formData.orgId" placeholder="组织名称"/>
-          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
+        <ElInput v-model="formData.billPeriod" placeholder="账期"/>
-          v-model="searchForm.billPeriod"
-          placeholder="账期"/>
       </ElFormItem>
       <ElFormItem label="账单开始时间">
-        <ElInput
+        <ElInput v-model="formData.startTime" placeholder="账单开始时间"/>
-          v-model="searchForm.startTime"
-          placeholder="账单开始时间"/>
       </ElFormItem>
       <ElFormItem label="账单结束时间">
-        <ElInput
+        <ElInput v-model="formData.endTime" placeholder="账单结束时间"/>
-          v-model="searchForm.endTime"
-          placeholder="账单结束时间"/>
       </ElFormItem>
-      <ElFormItem label="订单数">
+    </template>
-        <ElInput
+    <template #simpleFormItem="formData">
-          v-model="searchForm.orderCount"
+      <ElFormItem label="客户名称">
-          placeholder="订单数"/>
+        <ElInput v-model="formData.customerId" placeholder="客户名称"/>
       </ElFormItem>
-      <ElFormItem label="总车数">
+      <ElFormItem label="账期">
-        <ElInput
+        <ElInput v-model="formData.billPeriod" placeholder="账期"/>
-          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="客户名称" prop="customerId"/>
-      <ElTableColumn label="用户 Id" prop="userId"/>
+      <ElTableColumn label="单位名称" prop="orgId"/>
-      <ElTableColumn label="客户 Id；cst_customer.id" prop="customerId"/>
+      <ElTableColumn label="账户类型" prop="accountType"/>
-      <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"/>
@@ -117,70 +40,36 @@
       <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"/>
+    <BillDetail ref="billDetail"/>
-    </Page>
+  </ATablePage>
 </template>
 
 <script lang="ts" setup>
 import BillApi from '@/pages/fin/bill/bill-api.ts'
-import BillForm from '@/pages/fin/bill/BillForm.vue'
+import BillDetail from '@/pages/fin/bill/BillDetail.vue'
-import FormPage, {
+import ATablePage, { buildTablePageProps } from '@/components/a-page/a-table-page/ATablePage.tsx'
-  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 billDetailIns = useTemplateRef<InstanceType<typeof BillDetail>>('billDetail')
-const billFormIns = useTemplateRef<InstanceType<typeof BillForm>>('billForm')
 
-function research() {
+const tablePageProps = buildTablePageProps<BillTypes.SearchBillParam, BillTypes.SearchBillResult>({
-  formPageIns.value?.doSearch()
+  searchForm: {
-}
+    paging: BillApi.paging,
-
+  },
-function paging(params: BillTypes.SearchBillParam) {
+  table: {
-  return BillApi.paging(params)
+    actionColumn: {
-}
+      tableActions: [
-
+        {
-const leftTools: ToolType[] = [
+          tooltip: '详情',
-  {
+          icon: 'Postcard',
-    icon: 'Plus',
+          type: 'info',
-    label: '新建',
+          action({row}) {
-    action() {
+            billDetailIns.value?.open(row)
-      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>

src/pages/fin/bill/BillDetail.vue

@@ -1,96 +1,66 @@
 <template>
-  <ElDialog v-model="showDialog"
+  <ADetailPanel
-    destroy-on-close
+    ref="detailPanel"
-    width="fit-content"
+    v-bind="detailPanelProps">
-    @close="dialogCloseHandler">
+    <template #default="detailData">
-    <ElDescriptions border title="对账单">
+      <ElDescriptions border title="对账单">
-      <ElDescriptionsItem label="Id" prop="id">
+        <ElDescriptionsItem label="客户名称">
-        {{ detailData.id }}
+          {{ detailData.customerId }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="用户 Id" prop="userId">
+        <ElDescriptionsItem label="企业名称">
-        {{ detailData.userId }}
+          {{ detailData.orgId }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="客户 Id；cst_customer.id" prop="customerId">
+        <ElDescriptionsItem label="账户类型">
-        {{ detailData.customerId }}
+          {{ detailData.accountType }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="组织 Id" prop="orgId">
+        <ElDescriptionsItem label="账期">
-        {{ detailData.orgId }}
+          {{ detailData.billPeriod }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+        <ElDescriptionsItem label="账单开始时间">
-        {{ detailData.accountType }}
+          {{ detailData.startTime }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="账期" prop="billPeriod">
+        <ElDescriptionsItem label="账单结束时间">
-        {{ detailData.billPeriod }}
+          {{ detailData.endTime }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="账单开始时间" prop="startTime">
+        <ElDescriptionsItem label="订单数">
-        {{ detailData.startTime }}
+          {{ detailData.orderCount }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="账单结束时间" prop="endTime">
+        <ElDescriptionsItem label="总车数">
-        {{ detailData.endTime }}
+          {{ detailData.carCount }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="订单数" prop="orderCount">
+        <ElDescriptionsItem label="总质量">
-        {{ detailData.orderCount }}
+          {{ detailData.totalWeight }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="总车数" prop="carCount">
+        <ElDescriptionsItem label="优惠金额">
-        {{ detailData.carCount }}
+          {{ detailData.discountMoney }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="总质量" prop="totalWeight">
+        <ElDescriptionsItem label="账单金额">
-        {{ detailData.totalWeight }}
+          {{ detailData.totalMoney }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="优惠金额" prop="discountMoney">
+        <ElDescriptionsItem label="备注">
-        {{ detailData.discountMoney }}
+          {{ detailData.memo }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="账单金额" prop="totalMoney">
+      </ElDescriptions>
-        {{ 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>
+  </ADetailPanel>
 </template>
 
 <script lang="ts" setup>
 import BillApi from '@/pages/fin/bill/bill-api.ts'
-import Utils from '@/common/utils'
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
 
-const showDialog = ref(false)
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<BillTypes.SearchBillResult>>('detailPanel')
-
+const detailPanelProps = buildDetailPanelProps<BillTypes.SearchBillResult>({
-const detailData = Utils.resetAble(reactive<BillTypes.SearchBillResult>({}))
+  title: '对账单详情',
-
+  detailsLoader: BillApi.detail,
-function dialogCloseHandler() {
+})
-  detailData.$reset()
-}
 
 defineExpose({
   open(data: BillTypes.SearchBillResult) {
-    showDialog.value = true
+    detailPanelIns.value?.open(data)
-    BillApi.detail(data.id!)
-      .then(res => {
-        detailData.$reset(res.data)
-      })
   },
 })
 </script>
-
-<style lang="stylus" scoped>
-
-</style>

src/pages/fin/bill/BillForm.vue

@@ -1,226 +1,144 @@
 <template>
-  <ElDialog v-model="showDialog"
+  <AFormPanel
-    :close-on-click-modal="false"
+    ref="formPanel"
-    destroy-on-close
+    v-bind="formPanelProps">
-    width="fit-content"
+    <template #default="formData">
-    @close="dialogCloseHandler">
+      <div class="form-items">
-    <ElForm ref="billForm"
+        <ElFormItem label="Id" prop="id">
-      :model="formData"
+          <ElInput v-model="formData.id" placeholder="Id"/>
-      :rules="rules"
+        </ElFormItem>
-      class="form-panel"
+        <ElFormItem label="用户 Id" prop="userId">
-      label-width="auto">
+          <ElInput v-model="formData.userId" placeholder="用户 Id"/>
-      <ElFormItem label="Id" prop="id">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="客户 Id；cst_customer.id" prop="customerId">
-          v-model="formData.id"
+          <ElInput v-model="formData.customerId" placeholder="客户 Id；cst_customer.id"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="Id"/>
+        <ElFormItem label="组织 Id" prop="orgId">
-      </ElFormItem>
+          <ElInput v-model="formData.orgId" placeholder="组织 Id"/>
-      <ElFormItem label="用户 Id" prop="userId">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
-          v-model="formData.userId"
+          <ElInput v-model="formData.accountType" placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="用户 Id"/>
+        <ElFormItem label="账期" prop="billPeriod">
-      </ElFormItem>
+          <ElInput v-model="formData.billPeriod" placeholder="账期"/>
-      <ElFormItem label="客户 Id；cst_customer.id" prop="customerId">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="账单开始时间" prop="startTime">
-          v-model="formData.customerId"
+          <ElInput v-model="formData.startTime" placeholder="账单开始时间"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="客户 Id；cst_customer.id"/>
+        <ElFormItem label="账单结束时间" prop="endTime">
-      </ElFormItem>
+          <ElInput v-model="formData.endTime" placeholder="账单结束时间"/>
-      <ElFormItem label="组织 Id" prop="orgId">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="订单数" prop="orderCount">
-          v-model="formData.orgId"
+          <ElInput v-model="formData.orderCount" placeholder="订单数"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="组织 Id"/>
+        <ElFormItem label="总车数" prop="carCount">
-      </ElFormItem>
+          <ElInput v-model="formData.carCount" placeholder="总车数"/>
-      <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="总质量" prop="totalWeight">
-          v-model="formData.accountType"
+          <ElInput v-model="formData.totalWeight" placeholder="总质量"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
+        <ElFormItem label="优惠金额" prop="discountMoney">
-      </ElFormItem>
+          <ElInput v-model="formData.discountMoney" placeholder="优惠金额"/>
-      <ElFormItem label="账期" prop="billPeriod">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="账单金额" prop="totalMoney">
-          v-model="formData.billPeriod"
+          <ElInput v-model="formData.totalMoney" placeholder="账单金额"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="账期"/>
+        <ElFormItem label="备注" prop="memo">
-      </ElFormItem>
+          <ElInput v-model="formData.memo" placeholder="备注"/>
-      <ElFormItem label="账单开始时间" prop="startTime">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="创建人 Id；sys_user.id" prop="creatorId">
-          v-model="formData.startTime"
+          <ElInput v-model="formData.creatorId" placeholder="创建人 Id；sys_user.id"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="账单开始时间"/>
+        <ElFormItem label="修改人 Id；sys_user.id" prop="modifierId">
-      </ElFormItem>
+          <ElInput v-model="formData.modifierId" placeholder="修改人 Id；sys_user.id"/>
-      <ElFormItem label="账单结束时间" prop="endTime">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="创建时间" prop="createTime">
-          v-model="formData.endTime"
+          <ElInput v-model="formData.createTime" placeholder="创建时间"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="账单结束时间"/>
+        <ElFormItem label="修改时间" prop="modifyTime">
-      </ElFormItem>
+          <ElInput v-model="formData.modifyTime" placeholder="修改时间"/>
-      <ElFormItem label="订单数" prop="orderCount">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
-          v-model="formData.orderCount"
+          <ElInput v-model="formData.deleted" placeholder="是否删除； 0-->未删除、1-->已删除"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="订单数"/>
+      </div>
-      </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>
+  </AFormPanel>
 </template>
 
 <script lang="ts" setup>
 import BillApi from '@/pages/fin/bill/bill-api.ts'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 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 props = withDefaults(defineProps<{
-const showDialog = ref(false)
+  research?: () => void
-const submiting = ref(false)
+}>(), {
-const status = ref<'add' | 'view' | 'modify'>('add')
+  research: () => {
-
-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)
-    }
   },
 })
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const status = ref<'add' | 'modify'>('add')
+const formPanelProps = buildFormPanelProps<BillTypes.SearchBillResult>({
+  title: status.value === 'add' ? '新建对账单' : '修改对账单信息',
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return BillApi
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return BillApi
+        .add(data)
+        .then(props.research)
+    } else {
+      return BillApi
+        .modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    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'} ],
+  },
+})
+
+defineExpose({
+  open(data?: BillTypes.SearchBillResult) {
+    formPanelIns.value?.open(data?.id)
+  },
+})
+
 </script>
 
 <style lang="stylus" scoped>
-.form-panel {
+.form-items {
-  padding 20px
+  grid-template-columns: 1fr 1fr;
 }
 </style>

src/pages/fin/money-account/MoneyAccount.vue

@@ -1,150 +1,112 @@
 <template>
-  <FormPage
+  <ATablePage
-    ref="formPage"
+    ref="tablePage"
-    :action-column="actionColumn"
+    v-bind="tablePageProps">
-    :left-tools="leftTools"
+    <template #highFormItem="formData">
-    :paging="paging">
-    <template #searchFormItem="{ searchForm }">
-      <ElFormItem label="Id">
-        <ElInput
-          v-model="searchForm.id"
-          placeholder="Id"/>
-      </ElFormItem>
       <ElFormItem label="账户编号">
-        <ElInput
+        <ElInput v-model="formData.sn" placeholder="账户编号"/>
-          v-model="searchForm.sn"
-          placeholder="账户编号"/>
       </ElFormItem>
-      <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业">
+      <ElFormItem label="客户名称">
-        <ElInput
+        <ElInput v-model="formData.customerName" placeholder="客户名称"/>
-          v-model="searchForm.accountType"
-          placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
       </ElFormItem>
-      <ElFormItem label="用户 Id">
+      <ElFormItem label="企业名称">
-        <ElInput
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
-          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
+        <ElInput v-model="formData.revenue" placeholder="营收余额"/>
-          v-model="searchForm.revenue"
-          placeholder="营收余额"/>
       </ElFormItem>
       <ElFormItem label="充值余额">
-        <ElInput
+        <ElInput v-model="formData.recharge" placeholder="充值余额"/>
-          v-model="searchForm.recharge"
-          placeholder="充值余额"/>
       </ElFormItem>
-      <ElFormItem label="创建人 Id；sys_user.id">
+    </template>
-        <ElInput
+    <template #simpleFormItem="formData">
-          v-model="searchForm.creatorId"
+      <ElFormItem>
-          placeholder="创建人 Id；sys_user.id"/>
+        <ElInput v-model="formData.sn" placeholder="账户编号"/>
       </ElFormItem>
-      <ElFormItem label="修改人 Id； sys_user.id">
+      <ElFormItem>
-        <ElInput
+        <ElInput v-model="formData.customerName" placeholder="客户名称"/>
-          v-model="searchForm.modifierId"
-          placeholder="修改人 Id； sys_user.id"/>
       </ElFormItem>
-      <ElFormItem label="创建时间">
+      <ElFormItem>
-        <ElInput
+        <ElInput v-model="formData.orgName" placeholder="企业名称"/>
-          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="账户类型" prop="accountType"/>
-      <ElTableColumn label="用户 Id" prop="userId"/>
+      <ElTableColumn label="客户名称" prop="customerId"/>
-      <ElTableColumn label="客户 Id" prop="customerId"/>
+      <ElTableColumn label="企业名称" prop="orgId"/>
-      <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"/>
+    <MoneyAccountForm ref="moneyAccountForm" :research="research"/>
-    </Page>
+    <MoneyAccountDetail ref="moneyAccountDetail"/>
+  </ATablePage>
 </template>
 
 <script lang="ts" setup>
-import MoneyAccountApi from '@/pages/fin/money/money-account-api.ts'
+import MoneyAccountApi from '@/pages/fin/money-account/money-account-api.ts'
-import MoneyAccountForm from '@/pages/fin/money/MoneyAccountForm.vue'
+import MoneyAccountForm from '@/pages/fin/money-account/MoneyAccountForm.vue'
-import FormPage, {
+import MoneyAccountDetail from '@/pages/fin/money-account/MoneyAccountDetail.vue'
-  type ActionColumnType,
+import ATablePage, {
-  type ToolType,
+  type ATablePageInstance,
-} from '@/components/page/FormPage.vue'
+  buildTablePageProps,
-import type { ComponentExposed } from 'vue-component-type-helpers'
+} from '@/components/a-page/a-table-page/ATablePage.tsx'
 
-const formPageIns = useTemplateRef<ComponentExposed<typeof FormPage>>('formPage')
+const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
 const moneyAccountFormIns = useTemplateRef<InstanceType<typeof MoneyAccountForm>>('moneyAccountForm')
+const moneyAccountDetailIns = useTemplateRef<InstanceType<typeof MoneyAccountDetail>>('moneyAccountDetail')
 
 function research() {
-  formPageIns.value?.doSearch()
+  tablePageIns.value?.doSearch()
 }
 
-function paging(params: MoneyAccountTypes.SearchMoneyAccountParam) {
+const tablePageProps = buildTablePageProps<MoneyAccountTypes.SearchMoneyAccountParam, MoneyAccountTypes.SearchMoneyAccountResult>({
-  return MoneyAccountApi.paging(params)
+  searchForm: {
-}
+    paging: MoneyAccountApi.paging,
-
+  },
-const leftTools: ToolType[] = [
+  toolBar: {
-  {
+    leftTools: [
-    icon: 'Plus',
+      {
-    label: '新建',
+        icon: 'Plus',
-    action() {
+        label: '新建',
-      moneyAccountFormIns.value?.open()
+        action() {
+          moneyAccountFormIns.value?.open()
+        },
+      },
+    ],
+  },
+  table: {
+    actionColumn: {
+      foldLimit: 4,
+      tableActions: [
+        {
+          tooltip: '详情',
+          icon: 'Postcard',
+          type: 'info',
+          action({row}) {
+            moneyAccountDetailIns.value?.open(row)
+          },
+        },
+        {
+          tooltip: '充值',
+          icon: 'chongzhi0101',
+          type: 'primary',
+          action({row}) {
+            moneyAccountFormIns.value?.open(row)
+          },
+        },
+        {
+          tooltip: '调账',
+          icon: 'tiaozhang',
+          type: 'info',
+          action({row}) {
+            moneyAccountFormIns.value?.open(row)
+          },
+        },
+      ],
     },
   },
-]
-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>

src/pages/fin/money-account/MoneyAccountDetail.vue

@@ -1,78 +1,48 @@
 <template>
-  <ElDialog v-model="showDialog"
+  <ADetailPanel
-    destroy-on-close
+    ref="detailPanel"
-    width="fit-content"
+    v-bind="detailPanelProps">
-    @close="dialogCloseHandler">
+    <template #default="detailData">
-    <ElDescriptions border title="资金账户表">
+      <ElDescriptions border title="资金账户表">
-      <ElDescriptionsItem label="Id" prop="id">
+        <ElDescriptionsItem label="账户编号">
-        {{ detailData.id }}
+          {{ detailData.sn }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="账户编号" prop="sn">
+        <ElDescriptionsItem label="账户类型">
-        {{ detailData.sn }}
+          {{ detailData.accountTypeTxt }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+        <ElDescriptionsItem label="客户名称">
-        {{ detailData.accountType }}
+          {{ detailData.customerId }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="用户 Id" prop="userId">
+        <ElDescriptionsItem label="企业名称">
-        {{ detailData.userId }}
+          {{ detailData.orgId }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="客户 Id" prop="customerId">
+        <ElDescriptionsItem label="营收余额">
-        {{ detailData.customerId }}
+          {{ detailData.revenue }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="组织 Id" prop="orgId">
+        <ElDescriptionsItem label="充值余额">
-        {{ detailData.orgId }}
+          {{ detailData.recharge }}
-      </ElDescriptionsItem>
+        </ElDescriptionsItem>
-      <ElDescriptionsItem label="营收余额" prop="revenue">
+      </ElDescriptions>
-        {{ 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>
+  </ADetailPanel>
 </template>
 
 <script lang="ts" setup>
-import MoneyAccountApi from '@/pages/fin/money/money-account-api.ts'
+import MoneyAccountApi from '@/pages/fin/money-account/money-account-api.ts'
-import Utils from '@/common/utils'
+import ADetailPanel, {
+  type ADetailPanelInstance,
+  buildDetailPanelProps,
+} from '@/components/a-detail-panel/ADetailPanel.tsx'
 
-const showDialog = ref(false)
+const detailPanelIns = useTemplateRef<ADetailPanelInstance<MoneyAccountTypes.SearchMoneyAccountResult>>('detailPanel')
-
+const detailPanelProps = buildDetailPanelProps<MoneyAccountTypes.SearchMoneyAccountResult>({
-const detailData = Utils.resetAble(reactive<MoneyAccountTypes.SearchMoneyAccountResult>({}))
+  title: '资金账户表详情',
-
+  detailsLoader: MoneyAccountApi.detail,
-function dialogCloseHandler() {
+})
-  detailData.$reset()
-}
 
 defineExpose({
   open(data: MoneyAccountTypes.SearchMoneyAccountResult) {
-    showDialog.value = true
+    detailPanelIns.value?.open(data)
-    MoneyAccountApi.detail(data.id!)
-      .then(res => {
-        detailData.$reset(res.data)
-      })
   },
 })
 </script>
-
-<style lang="stylus" scoped>
-
-</style>

src/pages/fin/money-account/MoneyAccountForm.vue

@@ -1,184 +1,146 @@
 <template>
-  <ElDialog v-model="showDialog"
+  <AFormPanel
-    :close-on-click-modal="false"
+    ref="formPanel"
-    destroy-on-close
+    v-bind="formPanelProps">
-    width="fit-content"
+    <template #default="formData">
-    @close="dialogCloseHandler">
+      <div class="form-items">
-    <ElForm ref="moneyAccountForm"
+        <ElFormItem label="Id" prop="id">
-      :model="formData"
+          <ElInput
-      :rules="rules"
+            v-model="formData.id"
-      class="form-panel"
+            placeholder="Id"/>
-      label-width="auto">
+        </ElFormItem>
-      <ElFormItem label="Id" prop="id">
+        <ElFormItem label="账户编号" prop="sn">
-        <ElInput
+          <ElInput
-          v-model="formData.id"
+            v-model="formData.sn"
-          :disabled="status === 'view'"
+            placeholder="账户编号"/>
-          placeholder="Id"/>
+        </ElFormItem>
-      </ElFormItem>
+        <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
-      <ElFormItem label="账户编号" prop="sn">
+          <ElInput
-        <ElInput
+            v-model="formData.accountType"
-          v-model="formData.sn"
+            placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="账户编号"/>
+        <ElFormItem label="用户 Id" prop="userId">
-      </ElFormItem>
+          <ElInput
-      <ElFormItem label="账户类型；account_type，GeRen-->个人、QiYe-->企业" prop="accountType">
+            v-model="formData.userId"
-        <ElInput
+            placeholder="用户 Id"/>
-          v-model="formData.accountType"
+        </ElFormItem>
-          :disabled="status === 'view'"
+        <ElFormItem label="客户 Id" prop="customerId">
-          placeholder="账户类型；account_type，GeRen-->个人、QiYe-->企业"/>
+          <ElInput
-      </ElFormItem>
+            v-model="formData.customerId"
-      <ElFormItem label="用户 Id" prop="userId">
+            placeholder="客户 Id"/>
-        <ElInput
+        </ElFormItem>
-          v-model="formData.userId"
+        <ElFormItem label="组织 Id" prop="orgId">
-          :disabled="status === 'view'"
+          <ElInput
-          placeholder="用户 Id"/>
+            v-model="formData.orgId"
-      </ElFormItem>
+            placeholder="组织 Id"/>
-      <ElFormItem label="客户 Id" prop="customerId">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="营收余额" prop="revenue">
-          v-model="formData.customerId"
+          <ElInput
-          :disabled="status === 'view'"
+            v-model="formData.revenue"
-          placeholder="客户 Id"/>
+            placeholder="营收余额"/>
-      </ElFormItem>
+        </ElFormItem>
-      <ElFormItem label="组织 Id" prop="orgId">
+        <ElFormItem label="充值余额" prop="recharge">
-        <ElInput
+          <ElInput
-          v-model="formData.orgId"
+            v-model="formData.recharge"
-          :disabled="status === 'view'"
+            placeholder="充值余额"/>
-          placeholder="组织 Id"/>
+        </ElFormItem>
-      </ElFormItem>
+        <ElFormItem label="创建人 Id；sys_user.id" prop="creatorId">
-      <ElFormItem label="营收余额" prop="revenue">
+          <ElInput
-        <ElInput
+            v-model="formData.creatorId"
-          v-model="formData.revenue"
+            placeholder="创建人 Id；sys_user.id"/>
-          :disabled="status === 'view'"
+        </ElFormItem>
-          placeholder="营收余额"/>
+        <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
-      </ElFormItem>
+          <ElInput
-      <ElFormItem label="充值余额" prop="recharge">
+            v-model="formData.modifierId"
-        <ElInput
+            placeholder="修改人 Id； sys_user.id"/>
-          v-model="formData.recharge"
+        </ElFormItem>
-          :disabled="status === 'view'"
+        <ElFormItem label="创建时间" prop="createTime">
-          placeholder="充值余额"/>
+          <ElInput
-      </ElFormItem>
+            v-model="formData.createTime"
-      <ElFormItem label="创建人 Id；sys_user.id" prop="creatorId">
+            placeholder="创建时间"/>
-        <ElInput
+        </ElFormItem>
-          v-model="formData.creatorId"
+        <ElFormItem label="修改时间" prop="modifyTime">
-          :disabled="status === 'view'"
+          <ElInput
-          placeholder="创建人 Id；sys_user.id"/>
+            v-model="formData.modifyTime"
-      </ElFormItem>
+            placeholder="修改时间"/>
-      <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
+        </ElFormItem>
-        <ElInput
+        <ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
-          v-model="formData.modifierId"
+          <ElInput
-          :disabled="status === 'view'"
+            v-model="formData.deleted"
-          placeholder="修改人 Id； sys_user.id"/>
+            placeholder="是否删除； 0-->未删除、1-->已删除"/>
-      </ElFormItem>
+        </ElFormItem>
-      <ElFormItem label="创建时间" prop="createTime">
+      </div>
-        <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>
+  </AFormPanel>
 </template>
 
 <script lang="ts" setup>
-import MoneyAccountApi from '@/pages/fin/money/money-account-api.ts'
+import MoneyAccountApi from '@/pages/fin/money-account/money-account-api.ts'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 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 props = withDefaults(defineProps<{
-const showDialog = ref(false)
+  research?: () => void
-const submiting = ref(false)
+}>(), {
-const status = ref<'add' | 'view' | 'modify'>('add')
+  research: () => {
-
-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)
-    }
   },
 })
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
+const status = ref<'add' | 'modify'>('add')
+const formPanelProps = buildFormPanelProps<MoneyAccountTypes.SearchMoneyAccountResult>({
+  title: status.value === 'add' ? '新建资金账户表' : '修改资金账户表信息',
+  detailsLoader(id?: string) {
+    if (Strings.isBlank(id)) {
+      status.value = 'add'
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return MoneyAccountApi
+        .detail(id!)
+        .then(res => res.data)
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return MoneyAccountApi
+        .add(data)
+        .then(props.research)
+    } else {
+      return MoneyAccountApi
+        .modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    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'} ],
+  },
+})
+
+defineExpose({
+  open(data?: MoneyAccountTypes.SearchMoneyAccountResult) {
+    formPanelIns.value?.open(data?.id)
+  },
+})
+
 </script>
 
 <style lang="stylus" scoped>
-.form-panel {
+.form-items {
-  padding 20px
+  grid-template-columns: 1fr 1fr;
 }
 </style>

src/pages/fin/money-account/constants.ts

@@ -0,0 +1,15 @@
+import { createEnum } from '@/common/utils/enums.ts'
+
+
+const accountTypeList = [
+  {
+    val: 'GeRen',
+    txt: '个人',
+  },
+  {
+    val: 'QiYe',
+    txt: '企业',
+  },
+] as const
+
+export const accountType = createEnum(accountTypeList)

src/pages/fin/money-flow/MoneyFlow.vue

@@ -19,15 +19,31 @@
           placeholder="资金账户"/>
       </ElFormItem>
     </template>
-
+    <template #simpleFormItem="formData">
+      <ElFormItem>
+        <ElInput
+          v-model="formData.orderSn"
+          placeholder="订单编号"/>
+      </ElFormItem>
+      <ElFormItem>
+        <ElInput
+          v-model="formData.trainNum"
+          placeholder="车次"/>
+      </ElFormItem>
+      <ElFormItem>
+        <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="moneyAccountSn"/>
       <ElTableColumn label="变动前余额" prop="beforeBalance"/>
       <ElTableColumn label="变动金额" prop="delta"/>
       <ElTableColumn label="变动后余额" prop="afterBalance"/>
-      <ElTableColumn label="变动类型" prop="moneyChangeCategory"/>
+      <ElTableColumn label="变动类型" prop="moneyChangeCategoryTxt"/>
       <!-- <ElTableColumn label="附件地址" prop="fileUrl"/> -->
       <ElTableColumn label="备注" prop="memo"/>
     </template>
@@ -39,11 +55,11 @@
 <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 MoneyFlowDetail from '@/pages/fin/money-flow/MoneyFlowDetail.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')
@@ -83,29 +99,6 @@ const tablePageProps = buildTablePageProps<MoneyFlowTypes.SearchMoneyFlowParam,
             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
-              })
-          },
-        },
       ],
     },
   },

src/pages/fin/money-flow/MoneyFlowDetail.vue

@@ -1,58 +1,33 @@
 <template>
   <ADetailPanel
     ref="detailPanel"
-    v-bind="detailPanelProps"
+    v-bind="detailPanelProps">
-  >
     <template #default="detailData">
       <ElDescriptions border title="资金流水">
-        <ElDescriptionsItem label="Id" prop="id">
+        <ElDescriptionsItem label="订单编号">
-          {{ detailData.id }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="订单 Id" prop="orderId">
-          {{ detailData.orderId }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="订单编号" prop="orderSn">
           {{ detailData.orderSn }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="车次" prop="trainNum">
+        <ElDescriptionsItem label="车次">
           {{ detailData.trainNum }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="资金账户 Id；fin_money_account.id" prop="moneyAccountId">
+        <ElDescriptionsItem label="变动前余额">
-          {{ detailData.moneyAccountId }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="变动前余额" prop="beforeBalance">
           {{ detailData.beforeBalance }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="变动金额；有正负" prop="delta">
+        <ElDescriptionsItem label="变动金额；有正负">
           {{ detailData.delta }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="变动后余额" prop="afterBalance">
+        <ElDescriptionsItem label="变动后余额">
           {{ detailData.afterBalance }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付" prop="moneyChangeCategory">
+        <ElDescriptionsItem label="变动类型">
-          {{ detailData.moneyChangeCategory }}
+          {{ detailData.moneyChangeCategoryTxt }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="附件地址" prop="fileUrl">
+        <ElDescriptionsItem label="附件地址">
           {{ detailData.fileUrl }}
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="备注" prop="memo">
+        <ElDescriptionsItem label="备注">
           {{ 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>

src/pages/fin/money-flow/MoneyFlowForm.vue

@@ -81,7 +81,6 @@ const props = withDefaults(defineProps<{
 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)) {
@@ -114,9 +113,6 @@ const formPanelProps = buildFormPanelProps<MoneyFlowTypes.SearchMoneyFlowResult>
     fileUrl: [ {required: true, message: '请填写附件地址', trigger: 'blur'} ],
     memo: [ {required: true, message: '请填写备注', trigger: 'blur'} ],
   },
-  width: '600px',
-  modal: true,
-  appendToBody: true,
 })
 
 defineExpose({
@@ -130,6 +126,5 @@ defineExpose({
 .form-items {
   grid-template-columns: 1fr 1fr;
 }
-
 </style>
 

src/pages/fin/money-flow/constants.ts

@@ -0,0 +1,27 @@
+import { createEnum } from '@/common/utils/enums.ts'
+
+
+const moneyChangeCategoryList = [
+  {
+    val: 'ChongZhi',
+    txt: '充值',
+  },
+  {
+    val: 'YingShou',
+    txt: '营收',
+  },
+  {
+    val: 'TuiKuan',
+    txt: '退款',
+  },
+  {
+    val: 'TiaoZhang',
+    txt: '调账',
+  },
+  {
+    val: 'ZhiFu',
+    txt: '支付',
+  },
+] as const
+
+export const moneyChangeCategory = createEnum(moneyChangeCategoryList)

src/pages/gds/goods-category/GoodsCategoryForm.vue

@@ -1,12 +1,8 @@
 <template>
   <AFormPanel
     ref="formPanel"
-    :title="status === 'add' ? '新建产品分类' : '修改产品分类'"
+    v-bind="formPanelProps">
-    :details-loader="detailsLoader"
+    <template #default="formData">
-    :do-submit="doSubmit"
-    :rules="rules"
-  >
-    <template #default="{formData}">
       <div class="form-items">
         <ElFormItem label="图片" prop="picture">
           <Uploader ref="uploader" v-model:file="formData.picture"/>
@@ -37,10 +33,11 @@
 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, {
-import AFormPanel from '@/components/a-form-panel/AFormPanel.tsx'
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} from '@/components/a-form-panel/AFormPanel.tsx'
 import { bizType } from '@/pages/gds/goods-category/constants.ts'
-import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const props = withDefaults(defineProps<{
   research?: () => void
@@ -48,41 +45,42 @@ const props = withDefaults(defineProps<{
   research: () => {
   },
 })
-const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
 const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
 const status = ref<'add' | 'modify'>('add')
-const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
+const formPanelProps = buildFormPanelProps<GoodsCategoryTypes.SearchGoodsCategoryResult>({
-  bizType: [ {required: true, message: '请填写业务类型', trigger: 'blur'} ],
+  title: status.value === 'add' ? '新建产品分类' : '修改产品分类',
-  sn: [ {required: true, message: '请填写国标码', trigger: 'blur'} ],
+  detailsLoader(id?: string) {
-  categoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
+    if (Strings.isBlank(id)) {
-  picture: [ {required: true, message: '请上传图片', trigger: 'blur'} ],
+      status.value = 'add'
-  sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
+      return Promise.resolve()
+    } else {
+      status.value = 'modify'
+      return GoodsCategoryApi.detail(id!)
+        .then((res) => {
+          if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
+          return res.data
+        })
+    }
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return GoodsCategoryApi.add(data)
+        .then(props.research)
+    } else {
+      return GoodsCategoryApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    bizType: [ {required: true, message: '请填写业务类型', trigger: 'blur'} ],
+    sn: [ {required: true, message: '请填写国标码', trigger: 'blur'} ],
+    categoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
+    picture: [ {required: true, message: '请上传图片', trigger: 'blur'} ],
+    sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
+  },
 })
 
-function detailsLoader(id?: string) {
-  if (Strings.isBlank(id)) {
-    status.value = 'add'
-    return Promise.resolve()
-  } else {
-    status.value = 'modify'
-    return GoodsCategoryApi.detail(id!)
-      .then((res) => {
-        if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
-        return res.data
-      })
-  }
-}
-
-function doSubmit(data: GoodsCategoryTypes.SearchGoodsCategoryResult) {
-  if (status.value === 'add') {
-    return GoodsCategoryApi.add(data)
-      .then(props.research)
-  } else {
-    return GoodsCategoryApi.modify(data)
-      .then(props.research)
-  }
-}
-
 defineExpose({
   open(data?: GoodsCategoryTypes.SearchGoodsCategoryResult) {
     formPanelIns.value?.open(data?.id)

src/pages/gds/goods/GoodsForm.vue

@@ -1,13 +1,8 @@
 <template>
   <AFormPanel
     ref="formPanel"
-    :title="status === 'add' ? '新建产品' : '修改产品'"
+    v-bind="formPanelProps">
-    :details-loader="detailsLoader"
+    <template #default="formData">
-    :do-submit="doSubmit"
-    label-width="90px"
-    :rules="rules"
-  >
-    <template #default="{formData}">
       <div class="form-items">
         <ElFormItem label="图片" prop="picture">
           <Uploader
@@ -87,11 +82,12 @@
 <script lang="ts" setup>
 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.tsx'
+import AFormPanel, {
+  type AFormPanelInstance,
+  buildFormPanelProps,
+} 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 {
   expenseStrategy,
   unit,
@@ -104,49 +100,50 @@ const props = withDefaults(defineProps<{
   },
 })
 
-const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
+const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
 const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
 const status = ref<'add' | 'modify'>('add')
-const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
+const formPanelProps = buildFormPanelProps<GoodsTypes.SearchGoodsResult>({
-  goodsCategoryId: [ {required: true, message: '请填写产品类型', trigger: 'blur'} ],
+  title: status.value === 'add' ? '新建产品' : '修改产品',
-  sn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
+  detailsLoader(id?: string) {
-  goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
+    if (Strings.isBlank(id)) {
-  specParams: [ {required: true, message: '请填写规格', trigger: 'blur'} ],
+      status.value = 'add'
-  picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
+      return Promise.resolve({
-  unit: [ {required: true, message: '请填写计量单位', trigger: 'blur'} ],
+        expenseStrategy: expenseStrategy.MianFei,
-  sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
+        unit: unit.Dun,
-  initialPrice: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
+        canuse: true,
-})
-
-function detailsLoader(id?: string) {
-  if (Strings.isBlank(id)) {
-    status.value = 'add'
-    return Promise.resolve({
-      expenseStrategy: expenseStrategy.MianFei,
-      unit: unit.Dun,
-      canuse: true,
-    })
-  } else {
-
-    status.value = 'modify'
-    return GoodsApi
-      .detail(id!)
-      .then((res) => {
-        if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
-        return res.data
       })
-  }
+    } else {
-}
 
-function doSubmit(data: GoodsTypes.SearchGoodsResult) {
+      status.value = 'modify'
-  if (status.value === 'add') {
+      return GoodsApi
-    return GoodsApi.add(data)
+        .detail(id!)
-      .then(props.research)
+        .then((res) => {
-  } else {
+          if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
-    return GoodsApi.modify(data)
+          return res.data
-      .then(props.research)
+        })
-  }
+    }
-}
+  },
+  doSubmit(data) {
+    if (status.value === 'add') {
+      return GoodsApi.add(data)
+        .then(props.research)
+    } else {
+      return GoodsApi.modify(data)
+        .then(props.research)
+    }
+  },
+  rules: {
+    goodsCategoryId: [ {required: true, message: '请填写产品类型', trigger: 'blur'} ],
+    sn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
+    goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
+    specParams: [ {required: true, message: '请填写规格', trigger: 'blur'} ],
+    picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
+    unit: [ {required: true, message: '请填写计量单位', trigger: 'blur'} ],
+    sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
+    initialPrice: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
+  },
+})
 
 defineExpose({
   open(data: GoodsTypes.SearchGoodsResult = {}) {

src/pages/home/Home.vue

@@ -1,19 +1,229 @@
 <script lang="ts" setup>
 
+import Page from '@/components/page/Page.vue'
 </script>
 
 <template>
-  <div>
+  <Page>
-    <div class="home">
+    <div class="welcome-container">
-      <div class="home-top">
+      <!-- 装饰元素 -->
-        <div class="home-top-title">
+      <div class="decor decor-1"></div>
-          首页
+      <div class="decor decor-2"></div>
-        </div>
+
+      <!-- 左侧内容区 -->
+      <div class="content">
+        <h1>欢迎使用<br><span>再昇云智能收运系统</span></h1>
+        <p>高效、安全、智能的一站式管理平台，助力您的业务腾飞。全新界面，极致体验，即刻开启您的数字化之旅。</p>
+        <!-- <a href="#" class="btn">进入系统</a> -->
+      </div>
+
+      <!-- 右侧图形区 -->
+      <div class="graphic">
+        <!-- <img class="welcome-svg" src="@/assets/images/zsy.png" alt=""> -->
+        <svg class="welcome-svg" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+          <!-- 背景圆形 -->
+          <circle class="circle-bg" cx="200" cy="200" r="180"/>
+
+          <!-- 主圆形 -->
+          <circle class="circle-primary" cx="200" cy="200" r="80"/>
+
+          <!-- 装饰线条 -->
+          <path class="path-line" d="M 80 200 Q 140 120 200 100 Q 260 120 320 200 Q 260 280 200 300 Q 140 280 80 200 Z"/>
+
+          <!-- 星形图标 -->
+          <g class="icon-star">
+            <path d="M200 60 L225 140 L310 140 L240 190 L260 270 L200 220 L140 270 L160 190 L90 140 L175 140 Z"/>
+          </g>
+
+          <!-- 小点装饰 -->
+          <circle cx="100" cy="100" fill="#5D87FF" r="8"/>
+          <circle cx="300" cy="300" fill="#5D87FF" r="8"/>
+          <circle cx="300" cy="100" fill="#5D87FF" r="8"/>
+          <circle cx="100" cy="300" fill="#5D87FF" r="8"/>
+        </svg>
       </div>
     </div>
-  </div>
+  </Page>
 </template>
 
 <style lang="stylus" scoped>
+/* 欢迎页容器 */
+.welcome-container {
+  width: 100%;
+  max-width: 1200px;
+  padding: 40px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+  position: relative;
+}
 
+/* 左侧内容区域 */
+.content {
+  flex: 1;
+  min-width: 300px;
+  z-index: 10;
+}
+
+.content h1 {
+  font-size: 3.5rem;
+  color: #2C3E50;
+  margin-bottom: 20px;
+  line-height: 1.2;
+}
+
+.content h1 span {
+  color: #5D87FF;
+}
+
+.content p {
+  font-size: 1.2rem;
+  color: #6C757D;
+  margin-bottom: 40px;
+  line-height: 1.6;
+  max-width: 500px;
+}
+
+/* 按钮样式 */
+.btn {
+  display: inline-block;
+  padding: 12px 36px;
+  background-color: #5D87FF;
+  color: white;
+  text-decoration: none;
+  border-radius: 50px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(93, 135, 255, 0.3);
+}
+
+.btn:hover {
+  background-color: #4A76EE;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(93, 135, 255, 0.4);
+}
+
+/* 右侧图形区域 */
+.graphic {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* SVG 图形样式 */
+.welcome-svg {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  animation: float 6s ease-in-out infinite;
+}
+
+/* SVG 元素动画 */
+.circle-bg {
+  fill: rgba(93, 135, 255, 0.1);
+}
+
+.circle-primary {
+  fill: #5D87FF;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+.path-line {
+  stroke: #5D87FF;
+  stroke-width: 2;
+  fill: none;
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: draw 3s ease forwards;
+}
+
+.icon-star {
+  fill: #5D87FF;
+  transform-origin: center;
+  animation: rotate 8s linear infinite;
+}
+
+/* 装饰元素 */
+.decor {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: rgba(93, 135, 255, 0.05);
+  z-index: 1;
+}
+
+.decor-1 {
+  top: 20px;
+  left: 20px;
+}
+
+.decor-2 {
+  bottom: 20px;
+  right: 20px;
+}
+
+/* 动画定义 */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
+@keyframes draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .content h1 {
+    font-size: 2.5rem;
+  }
+
+  .content p {
+    font-size: 1rem;
+  }
+
+  .welcome-container {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .content {
+    order: 2;
+  }
+
+  .graphic {
+    order: 1;
+  }
+}
 </style>

src/pages/order/book/BookDetail.vue

@@ -1,8 +1,7 @@
 <template>
   <ADetailPanel
     ref="detailPanel"
-    v-bind="detailPanelProps"
+    v-bind="detailPanelProps">
-  >
     <template #default="detailData">
       <ElDescriptions border class="description" title="订单信息">
         <ElDescriptionsItem label="订单编号">

src/pages/order/book/BookForm.vue

@@ -12,163 +12,136 @@
       <ElFormItem label="Id" prop="id">
         <ElInput
           v-model="formData.id"
-
           placeholder="Id"/>
       </ElFormItem>
       <ElFormItem label="订单编号" prop="sn">
         <ElInput
           v-model="formData.sn"
-
           placeholder="订单编号"/>
       </ElFormItem>
       <ElFormItem label="项目 Id" prop="projectId">
         <ElInput
           v-model="formData.projectId"
-
           placeholder="项目 Id"/>
       </ElFormItem>
       <ElFormItem label="下单人 Id；sys_user.id" prop="userId">
         <ElInput
           v-model="formData.userId"
-
           placeholder="下单人 Id；sys_user.id"/>
       </ElFormItem>
       <ElFormItem label="下单人客户 Id；cst_customer.id" prop="customerId">
         <ElInput
           v-model="formData.customerId"
-
           placeholder="下单人客户 Id；cst_customer.id"/>
       </ElFormItem>
       <ElFormItem label="下单人姓名" prop="contacts">
         <ElInput
           v-model="formData.contacts"
-
           placeholder="下单人姓名"/>
       </ElFormItem>
       <ElFormItem label="下单人联系方式" prop="phone">
         <ElInput
           v-model="formData.phone"
-
           placeholder="下单人联系方式"/>
       </ElFormItem>
       <ElFormItem label="下单时间" prop="orderTime">
         <ElInput
           v-model="formData.orderTime"
-
           placeholder="下单时间"/>
       </ElFormItem>
       <ElFormItem label="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出" prop="orderCategory">
         <ElInput
           v-model="formData.orderCategory"
-
           placeholder="订单类型；字典代码：order_category，HuiShouYuYue-->回收预约单、XiaoShouYuYue-->销售预约单、DuanBoRu-->短驳入、DuanBoChu-->短驳出"/>
       </ElFormItem>
       <ElFormItem label="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消" prop="orderStatus">
         <ElInput
           v-model="formData.orderStatus"
-
           placeholder="订单状态；字典代码：order_status，YiYuYue-->已预约、JinXingZhong-->进行中、YiWanCheng-->已完成、YiQuXiao-->已取消"/>
       </ElFormItem>
       <ElFormItem label="完结时间" prop="finishTime">
         <ElInput
           v-model="formData.finishTime"
-
           placeholder="完结时间"/>
       </ElFormItem>
       <ElFormItem label="运输企业 Id；cst_org.id" prop="transOrgId">
         <ElInput
           v-model="formData.transOrgId"
-
           placeholder="运输企业 Id；cst_org.id"/>
       </ElFormItem>
       <ElFormItem label="运输方客户 Id" prop="transCustomerId">
         <ElInput
           v-model="formData.transCustomerId"
-
           placeholder="运输方客户 Id"/>
       </ElFormItem>
       <ElFormItem label="指派清运公司时间" prop="assignmentTransTime">
         <ElInput
           v-model="formData.assignmentTransTime"
-
           placeholder="指派清运公司时间"/>
       </ElFormItem>
       <ElFormItem label="站点 Id；cst_station.id" prop="stationId">
         <ElInput
           v-model="formData.stationId"
-
           placeholder="站点 Id；cst_station.id"/>
       </ElFormItem>
       <ElFormItem label="站点名称；cst_station.station.name" prop="stationName">
         <ElInput
           v-model="formData.stationName"
-
           placeholder="站点名称；cst_station.station.name"/>
       </ElFormItem>
       <ElFormItem label="运距；单位：米" prop="transDistance">
         <ElInput
           v-model="formData.transDistance"
-
           placeholder="运距；单位：米"/>
       </ElFormItem>
       <ElFormItem label="预估量" prop="estimatedQuantity">
         <ElInput
           v-model="formData.estimatedQuantity"
-
           placeholder="预估量"/>
       </ElFormItem>
       <ElFormItem label="预估车数" prop="estimatedTrainNum">
         <ElInput
           v-model="formData.estimatedTrainNum"
-
           placeholder="预估车数"/>
       </ElFormItem>
       <ElFormItem label="产品 Id" prop="goodsId">
         <ElInput
           v-model="formData.goodsId"
-
           placeholder="产品 Id"/>
       </ElFormItem>
       <ElFormItem label="产品名称" prop="goodsName">
         <ElInput
           v-model="formData.goodsName"
-
           placeholder="产品名称"/>
       </ElFormItem>
       <ElFormItem label="计量单位；字典代码：unit" prop="unit">
         <ElInput
           v-model="formData.unit"
-
           placeholder="计量单位；字典代码：unit"/>
       </ElFormItem>
       <ElFormItem label="客户备注" prop="customerMemo">
         <ElInput
           v-model="formData.customerMemo"
-
           placeholder="客户备注"/>
       </ElFormItem>
       <ElFormItem label="创建人 Id； sys_user.id" prop="creatorId">
         <ElInput
           v-model="formData.creatorId"
-
           placeholder="创建人 Id； sys_user.id"/>
       </ElFormItem>
       <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
         <ElInput
           v-model="formData.modifierId"
-
           placeholder="修改人 Id； sys_user.id"/>
       </ElFormItem>
       <ElFormItem label="创建时间" prop="createTime">
         <ElInput
           v-model="formData.createTime"
-
           placeholder="创建时间"/>
       </ElFormItem>
       <ElFormItem label="修改时间" prop="modifyTime">
         <ElInput
           v-model="formData.modifyTime"
-
           placeholder="修改时间"/>
       </ElFormItem>
     </ElForm>