diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 81319ba2..986b6360 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -579,26 +579,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
-  {
-    path: '/ai',
-    component: Layout,
-    name: 'Ai',
-    meta: {
-      hidden: true
-    },
-    children: [
-      {
-        path: 'image/square',
-        component: () => import('@/views/ai/image/square/index.vue'),
-        name: 'AiImageSquare',
-        meta: {
-          title: '绘图作品',
-          icon: 'ep:home-filled',
-          noCache: false
-        }
-      }
-    ]
-  },
+
   {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/Error/404.vue'),
@@ -609,38 +590,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       breadcrumb: false
     }
   },
-  {
-    path: '/iot',
-    component: Layout,
-    name: 'IOT',
-    meta: {
-      hidden: true
-    },
-    children: [
-      {
-        path: 'product/detail/:id',
-        name: 'IoTProductDetail',
-        meta: {
-          title: '产品详情',
-          noCache: true,
-          hidden: true,
-          activeMenu: '/iot/product'
-        },
-        component: () => import('@/views/iot/product/detail/index.vue')
-      },
-      {
-        path: 'device/detail/:id',
-        name: 'IoTDeviceDetail',
-        meta: {
-          title: '设备详情',
-          noCache: true,
-          hidden: true,
-          activeMenu: '/iot/device'
-        },
-        component: () => import('@/views/iot/device/detail/index.vue')
-      }
-    ]
-  },
+
   {
     path: '/mymes',
     component: Layout,
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 842c0f94..ff6f068a 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -5,11 +5,11 @@
   >
     <div class="relative mx-auto h-full flex">
       <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
       >
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
-          <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" width="32"/>
+          <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
           <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
         </div>
         <!-- 左边的背景图 + 欢迎语 -->
@@ -19,43 +19,46 @@
             enter-active-class="animate__animated animate__bounceInLeft"
             tag="div"
           >
-            <div class="flex items-center justify-center"><img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg"/></div>
-            <div key="2" class="text-3xl text-white flex items-center justify-center">{{ t('login.welcome') }}</div>
+            <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
+            <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
             <div key="3" class="mt-5 text-14px font-normal text-white">
               {{ t('login.message') }}
             </div>
           </TransitionGroup>
         </div>
       </div>
-      <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
         <!-- 右上角的主题、语言选择 -->
         <div
-          class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
+          class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end"
+          style="color: var(--el-text-color-primary);"
         >
           <div class="flex items-center at-2xl:hidden at-xl:hidden">
             <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
-            <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
+            <span class="text-20px font-bold" >{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-          <div class="flex items-center justify-end space-x-10px">
+          <div class="flex items-center justify-end space-x-10px h-48px">
             <ThemeSwitch />
-            <LocaleDropdown class="dark:text-white lt-xl:text-white" />
+            <LocaleDropdown />
           </div>
         </div>
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
           >
             <!-- 账号登录 -->
             <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
-<!--            &lt;!&ndash; 手机登录 &ndash;&gt;-->
-<!--            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
-<!--            &lt;!&ndash; 二维码登录 &ndash;&gt;-->
-<!--            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
-<!--            &lt;!&ndash; 注册 &ndash;&gt;-->
-<!--            <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
-<!--            &lt;!&ndash; 三方登录 &ndash;&gt;-->
-<!--            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
+            <!-- 手机登录 -->
+            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 二维码登录 -->
+            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 注册 -->
+            <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- 三方登录 -->
+            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
           </div>
         </Transition>
       </div>
@@ -64,10 +67,12 @@
 </template>
 <script lang="ts" setup>
 import { underlineToHump } from '@/utils'
+
 import { useDesign } from '@/hooks/web/useDesign'
 import { useAppStore } from '@/store/modules/app'
 import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
 import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
+
 import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
 
 defineOptions({ name: 'Login' })
@@ -100,3 +105,15 @@ $prefix-cls: #{$namespace}-login;
   }
 }
 </style>
+
+<style lang="scss">
+.dark .login-form {
+  .el-divider__text {
+    background-color: var(--login-bg-color);
+  }
+
+  .el-card {
+    background-color: var(--login-bg-color);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Login/SocialLogin.vue b/src/views/Login/SocialLogin.vue
index 3b98a865..37c50da1 100644
--- a/src/views/Login/SocialLogin.vue
+++ b/src/views/Login/SocialLogin.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     :class="prefixCls"
-    class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
+    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
   >
     <div class="relative mx-auto h-full flex">
       <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
+        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
       >
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
@@ -27,7 +27,9 @@
           </TransitionGroup>
         </div>
       </div>
-      <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
+      <div
+        class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto"
+      >
         <!-- 右上角的主题、语言选择 -->
         <div
           class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
@@ -36,7 +38,7 @@
             <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-          <div class="flex items-center justify-end space-x-10px">
+          <div class="flex items-center justify-end space-x-10px h-48px">
             <ThemeSwitch />
             <LocaleDropdown class="dark:text-white lt-xl:text-white" />
           </div>
@@ -44,7 +46,7 @@
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
+            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
           >
             <!-- 账号登录 -->
             <el-form
@@ -64,7 +66,7 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-                  <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
+                  <el-form-item v-if="loginData.tenantEnable" prop="tenantName">
                     <el-input
                       v-model="loginData.loginForm.tenantName"
                       :placeholder="t('login.tenantNamePlaceholder')"
@@ -112,9 +114,9 @@
                         </el-checkbox>
                       </el-col>
                       <el-col :offset="6" :span="12">
-                        <el-link style="float: right" type="primary">{{
-                          t('login.forgetPassword')
-                        }}</el-link>
+                        <el-link style="float: right" type="primary"
+                          >{{ t('login.forgetPassword') }}
+                        </el-link>
                       </el-col>
                     </el-row>
                   </el-form-item>
@@ -196,7 +198,7 @@ const loginData = reactive({
   captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE !== 'false',
   tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE !== 'false',
   loginForm: {
-    tenantName: '内蒙必硕',
+    tenantName: '芋道源码',
     username: 'admin',
     password: 'admin123',
     captchaVerification: '',
@@ -207,7 +209,7 @@ const loginData = reactive({
 // 获取验证码
 const getCode = async () => {
   // 情况一，未开启：则直接登录
-  if (loginData.captchaEnable) {
+  if (!loginData.captchaEnable) {
     await handleLogin({})
   } else {
     // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
@@ -274,10 +276,11 @@ const handleLogin = async (params) => {
     const code = route?.query?.code as string
     const state = route?.query?.state as string
 
+    const loginDataLoginForm = { ...loginData.loginForm }
     const res = await LoginApi.login({
       // 账号密码登录
-      username: loginData.loginForm.username,
-      password: loginData.loginForm.password,
+      username: loginDataLoginForm.username,
+      password: loginDataLoginForm.password,
       captchaVerification: params.captchaVerification,
       // 社交登录
       socialCode: code,
@@ -292,8 +295,8 @@ const handleLogin = async (params) => {
       text: '正在加载系统中...',
       background: 'rgba(0, 0, 0, 0.7)'
     })
-    if (loginData.loginForm.rememberMe) {
-      authUtil.setLoginForm(loginData.loginForm)
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
     } else {
       authUtil.removeLoginForm()
     }
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 6c5ba687..0bdf55c5 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -18,7 +18,6 @@
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
           <el-input
-            disabled
             v-model="loginData.loginForm.tenantName"
             :placeholder="t('login.tenantNamePlaceholder')"
             :prefix-icon="iconHouse"
@@ -83,34 +82,34 @@
         mode="pop"
         @success="handleLogin"
       />
-<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
-<!--        <el-form-item>-->
-<!--          <el-row :gutter="5" justify="space-between" style="width: 100%">-->
-<!--            <el-col :span="8">-->
-<!--              <XButton-->
-<!--                :title="t('login.btnMobile')"-->
-<!--                class="w-[100%]"-->
-<!--                @click="setLoginState(LoginStateEnum.MOBILE)"-->
-<!--              />-->
-<!--            </el-col>-->
-<!--            <el-col :span="8">-->
-<!--              <XButton-->
-<!--                :title="t('login.btnQRCode')"-->
-<!--                class="w-[100%]"-->
-<!--                @click="setLoginState(LoginStateEnum.QR_CODE)"-->
-<!--              />-->
-<!--            </el-col>-->
-<!--            <el-col :span="8">-->
-<!--              <XButton-->
-<!--                :title="t('login.btnRegister')"-->
-<!--                class="w-[100%]"-->
-<!--                @click="setLoginState(LoginStateEnum.REGISTER)"-->
-<!--              />-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </el-form-item>-->
-<!--      </el-col>-->
-      <!-- <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <el-row :gutter="5" justify="space-between" style="width: 100%">
+            <el-col :span="8">
+              <XButton
+                :title="t('login.btnMobile')"
+                class="w-[100%]"
+                @click="setLoginState(LoginStateEnum.MOBILE)"
+              />
+            </el-col>
+            <el-col :span="8">
+              <XButton
+                :title="t('login.btnQRCode')"
+                class="w-[100%]"
+                @click="setLoginState(LoginStateEnum.QR_CODE)"
+              />
+            </el-col>
+            <el-col :span="8">
+              <XButton
+                :title="t('login.btnRegister')"
+                class="w-[100%]"
+                @click="setLoginState(LoginStateEnum.REGISTER)"
+              />
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-col>
+      <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <div class="w-[100%] flex justify-between">
@@ -125,8 +124,22 @@
             />
           </div>
         </el-form-item>
-      </el-col> -->
-      
+      </el-col>
+      <el-divider content-position="center">萌新必读</el-divider>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <div class="w-[100%] flex justify-between">
+            <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>
+            <el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>
+            <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">
+              ⚡面试手册
+            </el-link>
+            <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">
+              🤝外包咨询
+            </el-link>
+          </div>
+        </el-form-item>
+      </el-col>
     </el-row>
   </el-form>
 </template>
@@ -171,9 +184,9 @@ const loginData = reactive({
   captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
   tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
   loginForm: {
-    tenantName: '内蒙必硕',
-    username: '',
-    password: '',
+    tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+    username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
+    password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
     captchaVerification: '',
     rememberMe: true // 默认记录我。如果不需要，可手动修改
   }
@@ -236,8 +249,9 @@ const handleLogin = async (params) => {
     if (!data) {
       return
     }
-    loginData.loginForm.captchaVerification = params.captchaVerification
-    const res = await LoginApi.login(loginData.loginForm)
+    const loginDataLoginForm = { ...loginData.loginForm }
+    loginDataLoginForm.captchaVerification = params.captchaVerification
+    const res = await LoginApi.login(loginDataLoginForm)
     if (!res) {
       return
     }
@@ -246,8 +260,8 @@ const handleLogin = async (params) => {
       text: '正在加载系统中...',
       background: 'rgba(0, 0, 0, 0.7)'
     })
-    if (loginData.loginForm.rememberMe) {
-      authUtil.setLoginForm(loginData.loginForm)
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
     } else {
       authUtil.removeLoginForm()
     }
diff --git a/src/views/Login/components/MobileForm.vue b/src/views/Login/components/MobileForm.vue
index 87f0aee5..7f5d9942 100644
--- a/src/views/Login/components/MobileForm.vue
+++ b/src/views/Login/components/MobileForm.vue
@@ -133,7 +133,7 @@ const loginData = reactive({
   },
   loginForm: {
     uuid: '',
-    tenantName: '内蒙必硕',
+    tenantName: '芋道源码',
     mobileNumber: '',
     code: ''
   }
diff --git a/src/views/Login/components/QrCodeForm.vue b/src/views/Login/components/QrCodeForm.vue
index 31d28453..2670d000 100644
--- a/src/views/Login/components/QrCodeForm.vue
+++ b/src/views/Login/components/QrCodeForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-row v-show="getShow" style="margin-right: -10px; margin-left: -10px">
+  <el-row v-show="getShow" class="login-form" style="margin-right: -10px; margin-left: -10px">
     <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
       <LoginFormTitle style="width: 100%" />
     </el-col>
diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue
index 23b3bd42..334887da 100644
--- a/src/views/Login/components/RegisterForm.vue
+++ b/src/views/Login/components/RegisterForm.vue
@@ -1,142 +1,279 @@
 <template>
-  <Form
+  <el-form
     v-show="getShow"
-    :rules="rules"
-    :schema="schema"
-    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
-    hide-required-asterisk
+    ref="formLogin"
+    :model="registerData.registerForm"
+    :rules="registerRules"
+    class="login-form"
     label-position="top"
+    label-width="120px"
     size="large"
-    @register="register"
   >
-    <template #title>
-      <LoginFormTitle style="width: 100%" />
-    </template>
-
-    <template #code="form">
-      <div class="w-[100%] flex">
-        <el-input v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
-      </div>
-    </template>
-
-    <template #register>
-      <div class="w-[100%]">
-        <XButton
-          :loading="loading"
-          :title="t('login.register')"
-          class="w-[100%]"
-          type="primary"
-          @click="loginRegister()"
-        />
-      </div>
-      <div class="mt-15px w-[100%]">
-        <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
-      </div>
-    </template>
-  </Form>
+    <el-row style="margin-right: -10px; margin-left: -10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <LoginFormTitle style="width: 100%" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item v-if="registerData.tenantEnable === 'true'" prop="tenantName">
+          <el-input
+            v-model="registerData.registerForm.tenantName"
+            :placeholder="t('login.tenantname')"
+            :prefix-icon="iconHouse"
+            link
+            type="primary"
+            size="large"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerData.registerForm.username"
+            :placeholder="t('login.username')"
+            size="large"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerData.registerForm.nickname"
+            placeholder="昵称"
+            size="large"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="password">
+          <el-input
+            v-model="registerData.registerForm.password"
+            type="password"
+            auto-complete="off"
+            :placeholder="t('login.password')"
+            size="large"
+            :prefix-icon="iconLock"
+            show-password
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="confirmPassword">
+          <el-input
+            v-model="registerData.registerForm.confirmPassword"
+            type="password"
+            size="large"
+            auto-complete="off"
+            :placeholder="t('login.checkPassword')"
+            :prefix-icon="iconLock"
+            show-password
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item>
+          <XButton
+            :loading="loginLoading"
+            :title="t('login.register')"
+            class="w-[100%]"
+            type="primary"
+            @click="getCode()"
+          />
+        </el-form-item>
+      </el-col>
+      <Verify
+        ref="verify"
+        :captchaType="captchaType"
+        :imgSize="{ width: '400px', height: '200px' }"
+        mode="pop"
+        @success="handleRegister"
+      />
+    </el-row>
+    <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
+  </el-form>
 </template>
 <script lang="ts" setup>
-import type { FormRules } from 'element-plus'
-
-import { useForm } from '@/hooks/web/useForm'
-import { useValidator } from '@/hooks/web/useValidator'
+import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { useIcon } from '@/hooks/web/useIcon'
+import * as authUtil from '@/utils/auth'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
 import { LoginStateEnum, useLoginState } from './useLogin'
-import { FormSchema } from '@/types/form'
 
 defineOptions({ name: 'RegisterForm' })
 
 const { t } = useI18n()
-const { required } = useValidator()
-const { register, elFormRef } = useForm()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
+const formLogin = ref()
 const { handleBackLogin, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
+const permissionStore = usePermissionStore()
+const redirect = ref<string>('')
+const loginLoading = ref(false)
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
 
-const schema = reactive<FormSchema[]>([
-  {
-    field: 'title',
-    colProps: {
-      span: 24
+const equalToPassword = (rule, value, callback) => {
+  if (registerData.registerForm.password !== value) {
+    callback(new Error('两次输入的密码不一致'))
+  } else {
+    callback()
+  }
+}
+
+const registerRules = {
+  tenantName: [
+    { required: true, trigger: 'blur', message: '请输入您所属的租户' },
+    { min: 2, max: 20, message: '租户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
+  ],
+  username: [
+    { required: true, trigger: 'blur', message: '请输入您的账号' },
+    { min: 4, max: 30, message: '用户账号长度必须介于 4 和 30 之间', trigger: 'blur' }
+  ],
+  nickname: [
+    { required: true, trigger: 'blur', message: '请输入您的昵称' },
+    { min: 0, max: 30, message: '昵称长度必须介于 0 和 30 之间', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入您的密码' },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
+  ]
+}
+
+const registerData = reactive({
+  isShowPassword: false,
+  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+  registerForm: {
+    tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+    nickname: '',
+    tenantId: 0,
+    username: '',
+    password: '',
+    confirmPassword: '',
+    captchaVerification: ''
+  }
+})
+
+// 提交注册
+const handleRegister = async (params: any) => {
+  loading.value = true
+  try {
+    if (registerData.tenantEnable) {
+      await getTenantId()
+      registerData.registerForm.tenantId = authUtil.getTenantId()
     }
-  },
-  {
-    field: 'username',
-    label: t('login.username'),
-    value: '',
-    component: 'Input',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      placeholder: t('login.usernamePlaceholder')
+
+    if (registerData.captchaEnable) {
+      registerData.registerForm.captchaVerification = params.captchaVerification
     }
-  },
-  {
-    field: 'password',
-    label: t('login.password'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
+
+    const res = await LoginApi.register(registerData.registerForm)
+    if (!res) {
+      return
     }
-  },
-  {
-    field: 'check_password',
-    label: t('login.checkPassword'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
+    loading.value = ElLoading.service({
+      lock: true,
+      text: '正在加载系统中...',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    authUtil.removeLoginForm()
+
+    authUtil.setToken(res)
+    if (!redirect.value) {
+      redirect.value = '/'
     }
-  },
-  {
-    field: 'code',
-    label: t('login.code'),
-    colProps: {
-      span: 24
+    // 判断是否为SSO登录
+    if (redirect.value.indexOf('sso') !== -1) {
+      window.location.href = window.location.href.replace('/login?redirect=', '')
+    } else {
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
     }
+  } finally {
+    loginLoading.value = false
+    loading.value.close()
+  }
+}
+
+// 获取验证码
+const getCode = async () => {
+  // 情况一，未开启：则直接注册
+  if (registerData.captchaEnable === 'false') {
+    await handleRegister({})
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行注册
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+
+// 获取租户 ID
+const getTenantId = async () => {
+  if (registerData.tenantEnable === 'true') {
+    const res = await LoginApi.getTenantIdByName(registerData.registerForm.tenantName)
+    authUtil.setTenantId(res)
+  }
+}
+
+// 根据域名，获得租户信息
+const getTenantByWebsite = async () => {
+  const website = location.host
+  const res = await LoginApi.getTenantByWebsite(website)
+  if (res) {
+    registerData.registerForm.tenantName = res.name
+    authUtil.setTenantId(res.id)
+  }
+}
+const loading = ref() // ElLoading.service 返回的实例
+
+watch(
+  () => currentRoute.value,
+  (route: RouteLocationNormalizedLoaded) => {
+    redirect.value = route?.query?.redirect as string
   },
   {
-    field: 'register',
-    colProps: {
-      span: 24
-    }
+    immediate: true
   }
-])
+)
+onMounted(() => {
+  // getCookie()
+  getTenantByWebsite()
+})
+</script>
 
-const rules: FormRules = {
-  username: [required()],
-  password: [required()],
-  check_password: [required()],
-  code: [required()]
+<style lang="scss" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
 }
 
-const loading = ref(false)
-
-const loginRegister = async () => {
-  const formRef = unref(elFormRef)
-  formRef?.validate(async (valid) => {
-    if (valid) {
-      try {
-        loading.value = true
-      } finally {
-        loading.value = false
-      }
-    }
-  })
+.login-code {
+  float: right;
+  width: 100%;
+  height: 38px;
+
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
 }
-</script>
+</style>
diff --git a/src/views/Login/components/SSOLogin.vue b/src/views/Login/components/SSOLogin.vue
index f31ab0e5..5ce34fb9 100644
--- a/src/views/Login/components/SSOLogin.vue
+++ b/src/views/Login/components/SSOLogin.vue
@@ -14,7 +14,7 @@
             <el-checkbox
               v-for="scope in queryParams.scopes"
               :key="scope"
-              :label="scope"
+              :value="scope"
               style="display: block; margin-bottom: -10px"
             >
               {{ formatScope(scope) }}
diff --git a/src/views/Profile/components/BasicInfo.vue b/src/views/Profile/components/BasicInfo.vue
index ddec27ce..8dfafa69 100644
--- a/src/views/Profile/components/BasicInfo.vue
+++ b/src/views/Profile/components/BasicInfo.vue
@@ -2,8 +2,8 @@
   <Form ref="formRef" :labelWidth="200" :rules="rules" :schema="schema">
     <template #sex="form">
       <el-radio-group v-model="form['sex']">
-        <el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
-        <el-radio :label="2">{{ t('profile.user.woman') }}</el-radio>
+        <el-radio :value="1">{{ t('profile.user.man') }}</el-radio>
+        <el-radio :value="2">{{ t('profile.user.woman') }}</el-radio>
       </el-radio-group>
     </template>
   </Form>
@@ -27,7 +27,7 @@ defineOptions({ name: 'BasicInfo' })
 
 const { t } = useI18n()
 const message = useMessage() // 消息弹窗
-const userStore = useUserStore() 
+const userStore = useUserStore()
 // 表单校验
 const rules = reactive<FormRules>({
   nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue
deleted file mode 100644
index bc846a3d..00000000
--- a/src/views/ai/chat/index.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <el-container>
-    <!-- 左侧：会话列表 -->
-    <el-aside width="260px" class="conversation-container">
-      <!-- 左顶部：新建对话 -->
-      <el-button class="w-1/1" type="primary">
-        <Icon icon="ep:plus" class="mr-5px" />
-        新建对话
-      </el-button>
-      <!-- 左顶部：搜索对话 -->
-      <el-input
-        v-model="searchName"
-        class="mt-10px"
-        placeholder="搜索历史记录"
-        @keyup="searchConversation"
-      >
-        <template #prefix>
-          <Icon icon="ep:search" />
-        </template>
-      </el-input>
-      <!-- 左中间：对话列表 -->
-      <div class="conversation-list" :style="{ height: leftHeight + 'px' }">
-        <el-row v-for="conversation in conversationList" :key="conversation.id">
-          <div
-            :class="conversation.id === conversationId ? 'conversation active' : 'conversation'"
-            @click="changeConversation(conversation)"
-          >
-            <el-image :src="conversation.avatar" class="avatar" />
-            <span class="title">{{ conversation.title }}</span>
-            <span class="button">
-              <!-- TODO 芋艿：缺置顶按钮 -->
-              <el-icon title="编辑" @click="updateConversationTitle(conversation)">
-                <Icon icon="ep:edit" />
-              </el-icon>
-              <el-icon title="删除会话" @click="deleteConversationTitle(conversation)">
-                <Icon icon="ep:delete" />
-              </el-icon>
-            </span>
-          </div>
-        </el-row>
-      </div>
-      <!-- 左底部：工具栏 TODO 芋艿：50% 不太对 -->
-      <div class="tool-box">
-        <sapn class="w-1/2"> <Icon icon="ep:user" /> 角色仓库 </sapn>
-        <sapn class="w-1/2"> <Icon icon="ep:delete" />清空未置顶对话</sapn>
-      </div>
-    </el-aside>
-    <!-- 右侧：会话详情 -->
-    <el-container class="detail-container">
-      <!-- 右顶部 TODO 芋艿：右对齐 -->
-      <el-header class="header">
-        <el-button>3.5-turbo-0125 <Icon icon="ep:setting" /></el-button>
-        <el-button>
-          <Icon icon="ep:user" />
-        </el-button>
-        <el-button>
-          <Icon icon="ep:download" />
-        </el-button>
-        <el-button>
-          <Icon icon="ep:arrow-up" />
-        </el-button>
-      </el-header>
-      <el-main>对话列表</el-main>
-      <el-footer>发送消息框</el-footer>
-    </el-container>
-  </el-container>
-</template>
-<script setup lang="ts">
-const conversationList = [
-  {
-    id: 1,
-    title: '测试标题',
-    avatar:
-      'http://test.yudao.iocoder.cn/96c787a2ce88bf6d0ce3cd8b6cf5314e80e7703cd41bf4af8cd2e2909dbd6b6d.png'
-  },
-  {
-    id: 2,
-    title: '测试对话',
-    avatar:
-      'http://test.yudao.iocoder.cn/96c787a2ce88bf6d0ce3cd8b6cf5314e80e7703cd41bf4af8cd2e2909dbd6b6d.png'
-  }
-]
-const conversationId = ref(1)
-const searchName = ref('')
-const leftHeight = window.innerHeight - 240 // TODO 芋艿：这里还不太对
-
-const changeConversation = (conversation) => {
-  console.log(conversation)
-  conversationId.value = conversation.id
-  // TODO 芋艿：待实现
-}
-
-const updateConversationTitle = (conversation) => {
-  console.log(conversation)
-  // TODO 芋艿：待实现
-}
-
-const deleteConversationTitle = (conversation) => {
-  console.log(conversation)
-  // TODO 芋艿：待实现
-}
-
-const searchConversation = () => {
-  // TODO 芋艿：待实现
-}
-</script>
-<style lang="scss" scoped>
-.conversation-container {
-  .conversation-list {
-    .conversation {
-      display: flex;
-      justify-content: flex-start;
-      width: 100%;
-      padding: 5px 5px 0 0;
-      cursor: pointer;
-      &.active {
-        // TODO 芋艿：这里不太对
-        background-color: #343540;
-        .button {
-          display: inline;
-        }
-      }
-      .title {
-        padding: 5px 10px;
-        max-width: 220px;
-        font-size: 14px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      .avatar {
-        width: 28px;
-        height: 28px;
-        border-radius: 50%;
-      }
-      .button {
-        position: absolute;
-        right: 2px;
-        top: 16px;
-        .el-icon {
-          margin-right: 5px;
-        }
-      }
-    }
-
-    .tool-box {
-      display: flex;
-      justify-content: flex-start;
-      padding: 0 20px 10px 20px;
-      border-top: 1px solid black;
-    }
-  }
-}
-
-.detail-container {
-  .header {
-    width: 100%;
-    height: 30px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding-top: 10px;
-  }
-}
-</style>
diff --git a/src/views/bpm/category/CategoryForm.vue b/src/views/bpm/category/CategoryForm.vue
index 5b771537..9c24b3ef 100644
--- a/src/views/bpm/category/CategoryForm.vue
+++ b/src/views/bpm/category/CategoryForm.vue
@@ -18,7 +18,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import { CommonStatusEnum } from '@/utils/constants'
 
 /** BPM 流程分类 表单 */
 defineOptions({ name: 'CategoryForm' })
@@ -57,7 +58,7 @@ const formData = ref({
   id: undefined,
   name: undefined,
   code: undefined,
-  status: undefined,
+  status: CommonStatusEnum.ENABLE,
   sort: undefined
 })
 const formRules = reactive({
@@ -116,7 +117,7 @@ const resetForm = () => {
     id: undefined,
     name: undefined,
     code: undefined,
-    status: undefined,
+    status: CommonStatusEnum.ENABLE,
     sort: undefined
   }
   formRef.value?.resetFields()
diff --git a/src/views/bpm/category/index.vue b/src/views/bpm/category/index.vue
index 0eed62ca..085b3715 100644
--- a/src/views/bpm/category/index.vue
+++ b/src/views/bpm/category/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -126,7 +126,6 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import CategoryForm from './CategoryForm.vue'
 
diff --git a/src/views/bpm/definition/index.vue b/src/views/bpm/definition/index.vue
index 8267f07d..55da993d 100644
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
 
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
@@ -70,13 +70,7 @@
 
   <!-- 弹窗：流程模型图的预览 -->
   <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <MyProcessViewer
-      key="designer"
-      v-model="bpmnXml"
-      :value="bpmnXml as any"
-      v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
-    />
+    <MyProcessViewer style="height: 700px" key="designer" :xml="bpmnXml" />
   </Dialog>
 </template>
 
@@ -118,7 +112,7 @@ const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
   if (row.formType == 10) {
     // 设置表单
     setConfAndFields2(formDetailPreview, row.formConf, row.formFields)
@@ -133,13 +127,13 @@ const handleFormDetail = async (row) => {
 
 /** 流程图的详情按钮操作 */
 const bpmnDetailVisible = ref(false)
-const bpmnXml = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const handleBpmnDetail = async (row) => {
-  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
+const bpmnXml = ref('')
+const handleBpmnDetail = async (row: any) => {
+  // 设置可见
+  bpmnXml.value = ''
   bpmnDetailVisible.value = true
+  // 加载 BPMN XML
+  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
 }
 
 /** 初始化 **/
diff --git a/src/views/bpm/form/editor/index.vue b/src/views/bpm/form/editor/index.vue
index 0d1230c4..12945e0f 100644
--- a/src/views/bpm/form/editor/index.vue
+++ b/src/views/bpm/form/editor/index.vue
@@ -1,14 +1,18 @@
 <template>
-  <ContentWrap>
+  <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0">
     <!-- 表单设计器 -->
-    <FcDesigner ref="designer" height="780px">
-      <template #handle>
-        <el-button round size="small" type="primary" @click="handleSave">
-          <Icon class="mr-5px" icon="ep:plus" />
-          保存
-        </el-button>
-      </template>
-    </FcDesigner>
+    <div
+      class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
+    >
+      <fc-designer class="my-designer" ref="designer" :config="designerConfig">
+        <template #handle>
+          <el-button size="small" type="success" plain @click="handleSave">
+            <Icon class="mr-5px" icon="ep:plus" />
+            保存
+          </el-button>
+        </template>
+      </fc-designer>
+    </div>
   </ContentWrap>
 
   <!-- 表单保存的弹窗 -->
@@ -22,7 +26,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -55,6 +59,35 @@ const { push, currentRoute } = useRouter() // 路由
 const { query } = useRoute() // 路由信息
 const { delView } = useTagsViewStore() // 视图操作
 
+// 表单设计器配置
+const designerConfig = ref({
+  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
+  autoActive: true, // 是否自动选中拖入的组件
+  useTemplate: false, // 是否生成vue2语法的模板组件
+  formOptions: {
+    form: {
+      labelWidth: '100px' // 设置默认的 label 宽度为 100px
+    }
+  }, // 定义表单配置默认值
+  fieldReadonly: false, // 配置field是否可以编辑
+  hiddenDragMenu: false, // 隐藏拖拽操作按钮
+  hiddenDragBtn: false, // 隐藏拖拽按钮
+  hiddenMenu: [], // 隐藏部分菜单
+  hiddenItem: [], // 隐藏部分组件
+  hiddenItemConfig: {}, // 隐藏组件的部分配置项
+  disabledItemConfig: {}, // 禁用组件的部分配置项
+  showSaveBtn: false, // 是否显示保存按钮
+  showConfig: true, // 是否显示右侧的配置界面
+  showBaseForm: true, // 是否显示组件的基础配置表单
+  showControl: true, // 是否显示组件联动
+  showPropsForm: true, // 是否显示组件的属性配置表单
+  showEventForm: true, // 是否显示组件的事件配置表单
+  showValidateForm: true, // 是否显示组件的验证配置表单
+  showFormConfig: true, // 是否显示表单配置
+  showInputData: true, // 是否显示录入按钮
+  showDevice: true, // 是否显示多端适配选项
+  appendConfigData: [] // 定义渲染规则所需的formData
+})
 const designer = ref() // 表单设计器
 useFormCreateDesigner(designer) // 表单设计器增强
 const dialogVisible = ref(false) // 弹窗是否展示
@@ -119,3 +152,13 @@ onMounted(async () => {
   setConfAndFields(designer, data.conf, data.fields)
 })
 </script>
+
+<style>
+.my-designer {
+  ._fc-l,
+  ._fc-m,
+  ._fc-r {
+    border-top: none;
+  }
+}
+</style>
diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index eb0dc507..46edd8f9 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="审批接入（流程表单）" url="https://doc.iocoder.cn/bpm/use-bpm-form/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -143,8 +143,9 @@ const openForm = (id?: number) => {
   const toRouter: { name: string; query?: { id: number } } = {
     name: 'BpmFormEditor'
   }
+  console.log(typeof id)
   // 表单新建的时候id传的是event需要排除
-  if (typeof id === 'number') {
+  if (typeof id === 'number' || typeof id === 'string') {
     toRouter.query = {
       id
     }
diff --git a/src/views/bpm/group/UserGroupForm.vue b/src/views/bpm/group/UserGroupForm.vue
index ac0cfcb3..3c825eb7 100644
--- a/src/views/bpm/group/UserGroupForm.vue
+++ b/src/views/bpm/group/UserGroupForm.vue
@@ -28,7 +28,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/bpm/group/index.vue b/src/views/bpm/group/index.vue
index 6b0fd2c7..62785a92 100644
--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
new file mode 100644
index 00000000..35465935
--- /dev/null
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -0,0 +1,532 @@
+<template>
+  <div class="flex items-center h-50px">
+    <!-- 头部：分类名 -->
+    <div class="flex items-center">
+      <el-tooltip content="拖动排序" v-if="isCategorySorting">
+        <Icon
+          :size="22"
+          icon="ic:round-drag-indicator"
+          class="ml-10px category-drag-icon cursor-move text-#8a909c"
+        />
+      </el-tooltip>
+      <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
+      <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
+    </div>
+    <!-- 头部：操作 -->
+    <div class="flex-1 flex" v-if="!isCategorySorting">
+      <div
+        v-if="categoryInfo.modelList.length > 0"
+        class="ml-20px flex items-center"
+        :class="[
+          'transition-transform duration-300 cursor-pointer',
+          isExpand ? 'rotate-180' : 'rotate-0'
+        ]"
+        @click="isExpand = !isExpand"
+      >
+        <Icon icon="ep:arrow-down-bold" color="#999" />
+      </div>
+      <div class="ml-auto flex items-center" :class="isModelSorting ? 'mr-15px' : 'mr-45px'">
+        <template v-if="!isModelSorting">
+          <el-button
+            v-if="categoryInfo.modelList.length > 0"
+            link
+            type="info"
+            class="mr-20px"
+            @click.stop="handleModelSort"
+          >
+            <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+            排序
+          </el-button>
+          <el-button v-else link type="info" class="mr-20px" @click.stop="openModelForm('create')">
+            <Icon icon="fa:plus" class="mr-5px" />
+            新建
+          </el-button>
+          <el-dropdown
+            @command="(command) => handleCategoryCommand(command, categoryInfo)"
+            placement="bottom"
+          >
+            <el-button link type="info">
+              <Icon icon="ep:setting" class="mr-5px" />
+              分类
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
+                <el-dropdown-item command="handleDeleteCategory"> 删除该类 </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+        <template v-else>
+          <el-button @click.stop="handleModelSortCancel"> 取 消 </el-button>
+          <el-button type="primary" @click.stop="handleModelSortSubmit"> 保存排序 </el-button>
+        </template>
+      </div>
+    </div>
+  </div>
+  <!-- 模型列表 -->
+  <el-collapse-transition>
+    <div v-show="isExpand">
+      <el-table
+        :class="categoryInfo.name"
+        ref="tableRef"
+        :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
+        :cell-style="{ paddingLeft: '10px' }"
+        :row-style="{ height: '68px' }"
+        :data="modelList"
+        row-key="id"
+      >
+        <el-table-column label="流程名" prop="name" min-width="150">
+          <template #default="scope">
+            <div class="flex items-center">
+              <el-tooltip content="拖动排序" v-if="isModelSorting">
+                <Icon
+                  icon="ic:round-drag-indicator"
+                  class="drag-icon cursor-move text-#8a909c mr-10px"
+                />
+              </el-tooltip>
+              <el-image :src="scope.row.icon" class="h-38px w-38px mr-10px rounded" />
+              {{ scope.row.name }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="可见范围" prop="startUserIds" min-width="100">
+          <template #default="scope">
+            <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+              全部可见
+            </el-text>
+            <el-text v-else-if="scope.row.startUsers.length == 1">
+              {{ scope.row.startUsers[0].nickname }}
+            </el-text>
+            <el-text v-else>
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                placement="top"
+                :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+              >
+                {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+              </el-tooltip>
+            </el-text>
+          </template>
+        </el-table-column>
+        <el-table-column label="表单信息" prop="formType" min-width="200">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.formType === BpmModelFormType.NORMAL"
+              type="primary"
+              link
+              @click="handleFormDetail(scope.row)"
+            >
+              <span>{{ scope.row.formName }}</span>
+            </el-button>
+            <el-button
+              v-else-if="scope.row.formType === BpmModelFormType.CUSTOM"
+              type="primary"
+              link
+              @click="handleFormDetail(scope.row)"
+            >
+              <span>{{ scope.row.formCustomCreatePath }}</span>
+            </el-button>
+            <label v-else>暂无表单</label>
+          </template>
+        </el-table-column>
+        <el-table-column label="最后发布" prop="deploymentTime" min-width="250">
+          <template #default="scope">
+            <div class="flex items-center">
+              <span v-if="scope.row.processDefinition" class="w-150px">
+                {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+              </span>
+              <el-tag v-if="scope.row.processDefinition">
+                v{{ scope.row.processDefinition.version }}
+              </el-tag>
+              <el-tag v-else type="warning">未部署</el-tag>
+              <el-tag
+                v-if="scope.row.processDefinition?.suspensionState === 2"
+                type="warning"
+                class="ml-10px"
+              >
+                已停用
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openModelForm('update', scope.row.id)"
+              v-hasPermi="['bpm:model:update']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              link
+              class="!ml-5px"
+              type="primary"
+              @click="handleDesign(scope.row)"
+              v-hasPermi="['bpm:model:update']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              设计
+            </el-button>
+            <el-button
+              link
+              class="!ml-5px"
+              type="primary"
+              @click="handleDeploy(scope.row)"
+              v-hasPermi="['bpm:model:deploy']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              发布
+            </el-button>
+            <el-dropdown
+              class="!align-middle ml-5px"
+              @command="(command) => handleModelCommand(command, scope.row)"
+              v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+            >
+              <el-button type="primary" link>更多</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    command="handleDefinitionList"
+                    v-if="checkPermi(['bpm:process-definition:query'])"
+                  >
+                    历史
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleChangeState"
+                    v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    type="danger"
+                    command="handleDelete"
+                    v-if="checkPermi(['bpm:model:delete'])"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    删除
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-collapse-transition>
+
+  <!-- 弹窗：重命名分类 -->
+  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameCategoryVisible" width="400">
+    <template #title>
+      <div class="pl-10px font-bold text-18px"> 重命名分类 </div>
+    </template>
+    <div class="px-30px">
+      <el-input v-model="renameCategoryForm.name" />
+    </div>
+    <template #footer>
+      <div class="pr-25px pb-25px">
+        <el-button @click="renameCategoryVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleRenameConfirm">确 定</el-button>
+      </div>
+    </template>
+  </Dialog>
+
+  <!-- 表单弹窗：添加流程模型 -->
+  <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
+</template>
+
+<script lang="ts" setup>
+import ModelForm from './ModelForm.vue'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import Sortable from 'sortablejs'
+import { propTypes } from '@/utils/propTypes'
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { useAppStore } from '@/store/modules/app'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'BpmModel' })
+
+const props = defineProps({
+  categoryInfo: propTypes.object.def([]), // 分类后的数据
+  isCategorySorting: propTypes.bool.def(false) // 是否分类在排序
+})
+const emit = defineEmits(['success'])
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
+
+const isModelSorting = ref(false) // 是否正处于排序状态
+const originalData: any = ref([]) // 原始数据
+const modelList: any = ref([]) // 模型列表
+const isExpand = ref(false) // 是否处于展开状态
+
+/** '更多'操作按钮 */
+const handleModelCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** '分类'操作按钮 */
+const handleCategoryCommand = async (command: string, row: any) => {
+  switch (command) {
+    case 'handleRename':
+      renameCategoryForm.value = await CategoryApi.getCategory(row.id)
+      renameCategoryVisible.value = true
+      break
+    case 'handleDeleteCategory':
+      await handleDeleteCategory()
+      break
+    default:
+      break
+  }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleModelDesign',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row: any) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 处理模型的排序 **/
+const handleModelSort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(props.categoryInfo.modelList)
+  isModelSorting.value = true
+  initSort()
+}
+
+/** 处理模型的排序提交 */
+const handleModelSortSubmit = async () => {
+  // 保存排序
+  const ids = modelList.value.map((item: any) => item.id)
+  await ModelApi.updateModelSortBatch(ids)
+  // 刷新列表
+  isModelSorting.value = false
+  message.success('排序模型成功')
+  emit('success')
+}
+
+/** 处理模型的排序取消 */
+const handleModelSortCancel = () => {
+  // 恢复初始数据
+  modelList.value = cloneDeep(originalData.value)
+  isModelSorting.value = false
+}
+
+/** 创建拖拽实例 */
+const tableRef = ref()
+const initSort = () => {
+  const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
+  Sortable.create(table, {
+    group: 'shared',
+    animation: 150,
+    draggable: '.el-table__row',
+    handle: '.drag-icon',
+    // 结束拖动事件
+    onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
+      if (oldDraggableIndex !== newDraggableIndex) {
+        modelList.value.splice(
+          newDraggableIndex,
+          0,
+          modelList.value.splice(oldDraggableIndex, 1)[0]
+        )
+      }
+    }
+  })
+}
+
+/** 更新 modelList 模型列表 */
+const updateModeList = () => {
+  modelList.value = cloneDeep(props.categoryInfo.modelList)
+  if (props.categoryInfo.modelList.length > 0) {
+    isExpand.value = true
+  }
+}
+
+/** 重命名弹窗确定 */
+const renameCategoryVisible = ref(false)
+const renameCategoryForm = ref({
+  name: ''
+})
+const handleRenameConfirm = async () => {
+  if (renameCategoryForm.value?.name.length === 0) {
+    return message.warning('请输入名称')
+  }
+  // 发起修改
+  await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
+  message.success('重命名成功')
+  // 刷新列表
+  renameCategoryVisible.value = false
+  emit('success')
+}
+
+/** 删除分类 */
+const handleDeleteCategory = async () => {
+  try {
+    if (props.categoryInfo.modelList.length > 0) {
+      return message.warning('该分类下仍有流程定义,不允许删除')
+    }
+    await message.confirm('确认删除分类吗?')
+    // 发起删除
+    await CategoryApi.deleteCategory(props.categoryInfo.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 添加流程模型弹窗 */
+const modelFormRef = ref()
+const openModelForm = (type: string, id?: number) => {
+  modelFormRef.value.open(type, id)
+}
+
+watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
+watch(
+  () => props.isCategorySorting,
+  (val) => {
+    if (val) isExpand.value = false
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss">
+.rename-dialog.el-dialog {
+  padding: 0 !important;
+
+  .el-dialog__header {
+    border-bottom: none;
+  }
+
+  .el-dialog__footer {
+    border-top: none !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+:deep() {
+  .el-table__cell {
+    overflow: hidden;
+    border-bottom: none !important;
+  }
+}
+</style>
diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index ce60edca..16d3c1d6 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -8,12 +8,7 @@
       label-width="110px"
     >
       <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="formData.key"
-          :disabled="!!formData.id"
-          placeholder="请输入流标标识"
-          style="width: 330px"
-        />
+        <el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
         <el-tooltip
           v-if="!formData.id"
           class="item"
@@ -35,7 +30,7 @@
           placeholder="请输入流程名称"
         />
       </el-form-item>
-      <el-form-item v-if="formData.id" label="流程分类" prop="category">
+      <el-form-item label="流程分类" prop="category">
         <el-select
           v-model="formData.category"
           clearable
@@ -50,73 +45,108 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item v-if="formData.id" label="流程图标" prop="icon">
-        <UploadImg v-model="formData.icon" :limit="1" height="128px" width="128px" />
+      <el-form-item label="流程图标" prop="icon">
+        <UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
       </el-form-item>
       <el-form-item label="流程描述" prop="description">
         <el-input v-model="formData.description" clearable type="textarea" />
       </el-form-item>
-      <div v-if="formData.id">
-        <el-form-item label="表单类型" prop="formType">
-          <el-radio-group v-model="formData.formType">
-            <el-radio
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
-              :key="dict.value"
-              :label="dict.value"
-            >
-              {{ dict.label }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
-          <el-select v-model="formData.formId" clearable style="width: 100%">
-            <el-option
-              v-for="form in formList"
-              :key="form.id"
-              :label="form.name"
-              :value="form.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单提交路由"
-          prop="formCustomCreatePath"
+      <el-form-item label="流程类型" prop="type">
+        <el-radio-group v-model="formData.type">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="表单类型" prop="formType">
+        <el-radio-group v-model="formData.formType">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
+        <el-select v-model="formData.formId" clearable style="width: 100%">
+          <el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.formType === 20"
+        label="表单提交路由"
+        prop="formCustomCreatePath"
+      >
+        <el-input
+          v-model="formData.formCustomCreatePath"
+          placeholder="请输入表单提交路由"
+          style="width: 330px"
+        />
+        <el-tooltip
+          class="item"
+          content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
+          effect="light"
+          placement="top"
         >
-          <el-input
-            v-model="formData.formCustomCreatePath"
-            placeholder="请输入表单提交路由"
-            style="width: 330px"
-          />
-          <el-tooltip
-            class="item"
-            content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
-            effect="light"
-            placement="top"
+          <i class="el-icon-question" style="padding-left: 5px"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
+        <el-input
+          v-model="formData.formCustomViewPath"
+          placeholder="请输入表单查看的组件地址"
+          style="width: 330px"
+        />
+        <el-tooltip
+          class="item"
+          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+          effect="light"
+          placement="top"
+        >
+          <i class="el-icon-question" style="padding-left: 5px"></i>
+        </el-tooltip>
+      </el-form-item>
+      <el-form-item label="是否可见" prop="visible">
+        <el-radio-group v-model="formData.visible">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value as string"
+            :label="dict.value"
           >
-            <i class="el-icon-question" style="padding-left: 5px"></i>
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单查看地址"
-          prop="formCustomViewPath"
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="谁可以发起" prop="startUserIds">
+        <el-select
+          v-model="formData.startUserIds"
+          multiple
+          placeholder="请选择可发起人，默认（不选择）则所有人都可以发起"
         >
-          <el-input
-            v-model="formData.formCustomViewPath"
-            placeholder="请输入表单查看的组件地址"
-            style="width: 330px"
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
           />
-          <el-tooltip
-            class="item"
-            content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail"
-            effect="light"
-            placement="top"
-          >
-            <i class="el-icon-question" style="padding-left: 5px"></i>
-          </el-tooltip>
-        </el-form-item>
-      </div>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="流程管理员" prop="managerUserIds">
+        <el-select v-model="formData.managerUserIds" multiple placeholder="请选择流程管理员">
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -125,45 +155,65 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { propTypes } from '@/utils/propTypes'
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { ElMessageBox } from 'element-plus'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
+import { UserVO } from '@/api/system/user'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
 
 defineOptions({ name: 'ModelForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const userStore = useUserStoreWithOut() // 用户信息缓存
+const props = defineProps({
+  categoryId: propTypes.number
+})
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  formType: 10,
+  id: undefined,
   name: '',
+  key: '',
   category: undefined,
   icon: undefined,
   description: '',
+  type: BpmModelType.BPMN,
+  formType: BpmModelFormType.NORMAL,
   formId: '',
   formCustomCreatePath: '',
-  formCustomViewPath: ''
+  formCustomViewPath: '',
+  visible: true,
+  startUserIds: [],
+  managerUserIds: []
 })
 const formRules = reactive({
-  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
-  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
-  icon: [{ required: true, message: '参数图标不能为空', trigger: 'blur' }],
-  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
+  icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
+  formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
+  formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
+  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
+  managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 const formList = ref([]) // 流程表单的下拉框的数据
 const categoryList = ref([]) // 流程分类列表
+const userList = ref<UserVO[]>([]) // 用户列表
 
 /** 打开弹窗 */
-const open = async (type: string, id?: number) => {
+const open = async (type: string, id?: string) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
@@ -176,11 +226,18 @@ const open = async (type: string, id?: number) => {
     } finally {
       formLoading.value = false
     }
+  } else {
+    formData.value.managerUserIds.push(userStore.getUser.id)
   }
   // 获得流程表单的下拉框的数据
   formList.value = await FormApi.getFormSimpleList()
   // 查询流程分类列表
   categoryList.value = await CategoryApi.getCategorySimpleList()
+  // 查询用户列表
+  userList.value = await UserApi.getSimpleUserList()
+  if (props.categoryId) {
+    formData.value.category = props.categoryId
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -199,10 +256,9 @@ const submitForm = async () => {
       await ModelApi.createModel(data)
       // 提示，引导用户做后续的操作
       await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 3 个步骤：' +
-          '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
-          '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>3. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+        '<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
+          '<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
+          '<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
           '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
         '重要提示',
         {
@@ -225,14 +281,20 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    formType: 10,
+    id: undefined,
     name: '',
+    key: '',
     category: undefined,
-    icon: '',
+    icon: undefined,
     description: '',
+    type: BpmModelType.BPMN,
+    formType: BpmModelFormType.NORMAL,
     formId: '',
     formCustomCreatePath: '',
-    formCustomViewPath: ''
+    formCustomViewPath: '',
+    visible: true,
+    startUserIds: [],
+    managerUserIds: []
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/bpm/model/ModelImportForm.vue b/src/views/bpm/model/ModelImportForm.vue
deleted file mode 100644
index 854a0b8c..00000000
--- a/src/views/bpm/model/ModelImportForm.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="导入流程" width="400">
-    <div>
-      <el-upload
-        ref="uploadRef"
-        v-model:file-list="fileList"
-        :action="importUrl"
-        :auto-upload="false"
-        :data="formData"
-        :disabled="formLoading"
-        :headers="uploadHeaders"
-        :limit="1"
-        :on-error="submitFormError"
-        :on-exceed="handleExceed"
-        :on-success="submitFormSuccess"
-        accept=".bpmn, .xml"
-        drag
-        name="bpmnFile"
-      >
-        <Icon class="el-icon--upload" icon="ep:upload-filled" />
-        <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
-        <template #tip>
-          <div class="el-upload__tip" style="color: red">
-            提示：仅允许导入“bpm”或“xml”格式文件！
-          </div>
-          <div>
-            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
-              <el-form-item label="流程标识" prop="key">
-                <el-input
-                  v-model="formData.key"
-                  placeholder="请输入流标标识"
-                  style="width: 250px"
-                />
-              </el-form-item>
-              <el-form-item label="流程名称" prop="name">
-                <el-input v-model="formData.name" clearable placeholder="请输入流程名称" />
-              </el-form-item>
-              <el-form-item label="流程描述" prop="description">
-                <el-input v-model="formData.description" clearable type="textarea" />
-              </el-form-item>
-            </el-form>
-          </div>
-        </template>
-      </el-upload>
-    </div>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import { getAccessToken, getTenantId } from '@/utils/auth'
-
-defineOptions({ name: 'ModelImportForm' })
-
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  key: '',
-  name: '',
-  description: ''
-})
-const formRules = reactive({
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-const uploadRef = ref() // 上传 Ref
-const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
-const uploadHeaders = ref() // 上传 Header 头
-const fileList = ref([]) // 文件列表
-
-/** 打开弹窗 */
-const open = async () => {
-  dialogVisible.value = true
-  resetForm()
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  if (fileList.value.length == 0) {
-    message.error('请上传文件')
-    return
-  }
-  // 提交请求
-  uploadHeaders.value = {
-    Authorization: 'Bearer ' + getAccessToken(),
-    'tenantId': getTenantId()
-  }
-  formLoading.value = true
-  uploadRef.value!.submit()
-}
-
-/** 文件上传成功 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitFormSuccess = async (response: any) => {
-  if (response.code !== 0) {
-    message.error(response.msg)
-    formLoading.value = false
-    return
-  }
-  // 提示成功
-  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
-  dialogVisible.value = false
-  // 发送操作成功的事件
-  emit('success')
-}
-
-/** 上传错误提示 */
-const submitFormError = (): void => {
-  message.error('导入流程失败，请您重新上传！')
-  formLoading.value = false
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  // 重置上传状态和文件
-  formLoading.value = false
-  uploadRef.value?.clearFiles()
-  // 重置表单
-  formData.value = {
-    key: '',
-    name: '',
-    description: ''
-  }
-  formRef.value?.resetFields()
-}
-
-/** 文件数超出提示 */
-const handleExceed = (): void => {
-  message.error('最多只能上传一个文件！')
-}
-</script>
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
index 29bca71c..1a41a50c 100644
--- a/src/views/bpm/model/editor/index.vue
+++ b/src/views/bpm/model/editor/index.vue
@@ -31,6 +31,7 @@ import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/d
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
 import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
 import * as ModelApi from '@/api/bpm/model'
+import { getForm, FormVO } from '@/api/bpm/form'
 
 defineOptions({ name: 'BpmModelEditor' })
 
@@ -38,6 +39,12 @@ const router = useRouter() // 路由
 const { query } = useRoute() // 路由的查询
 const message = useMessage() // 国际化
 
+// 表单信息
+const formFields = ref<string[]>([])
+const formType = ref(20)
+provide('formFields', formFields)
+provide('formType', formType)
+
 const xmlString = ref(undefined) // BPMN XML
 const modeler = ref(null) // BPMN Modeler
 const controlForm = ref({
@@ -58,17 +65,17 @@ const initModeler = (item) => {
 }
 
 /** 添加/修改模型 */
-const save = async (bpmnXml) => {
+const save = async (bpmnXml: string) => {
   const data = {
     ...model.value,
     bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
   } as unknown as ModelApi.ModelVO
   // 提交
   if (data.id) {
-    await ModelApi.updateModel(data)
+    await ModelApi.updateModelBpmn(data)
     message.success('修改成功')
   } else {
-    await ModelApi.createModel(data)
+    await ModelApi.updateModelBpmn(data)
     message.success('新增成功')
   }
   // 跳转回去
@@ -99,6 +106,13 @@ onMounted(async () => {
   </bpmndi:BPMNDiagram>
 </definitions>`
   }
+
+  formType.value = data.formType
+  if (data.formType === 10) {
+    const bpmnForm = (await getForm(data.formId)) as unknown as FormVO
+    formFields.value = bpmnForm?.fields
+  }
+
   model.value = {
     ...data,
     bpmnXml: undefined // 清空 bpmnXml 属性
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 2be243cb..bf43d292 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,409 +1,221 @@
 <template>
-
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建流程
-        </el-button>
-        <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
-          <Icon icon="ep:upload" class="mr-5px" /> 导入流程
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程标识" align="center" prop="key" width="200" />
-      <el-table-column label="流程名称" align="center" prop="name" width="200">
-        <template #default="scope">
-          <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
-            <span>{{ scope.row.name }}</span>
-          </el-button>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程图标" align="center" prop="icon" width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="w-32px h-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
+    <div class="flex justify-between pl-20px items-center">
+      <h3 class="font-extrabold">流程模型</h3>
+      <!-- 搜索工作栏 -->
+      <el-form
+        v-if="!isCategorySorting"
+        class="-mb-15px flex mr-10px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+        @submit.prevent
+      >
+        <el-form-item prop="name" class="ml-auto">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="搜索流程"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
           >
-            <span>{{ scope.row.formName }}</span>
+            <template #prefix>
+              <Icon icon="ep:search" class="mx-10px" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <!-- 右上角：新建模型、更多操作 -->
+        <el-form-item>
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新建模型
           </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
+        </el-form-item>
+        <el-form-item>
+          <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
+            <el-button class="w-30px" plain>
+              <Icon icon="ep:setting" />
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleCategoryAdd">
+                  <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
+                  新建分类
+                </el-dropdown-item>
+                <el-dropdown-item command="handleCategorySort">
+                  <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
+                  分类排序
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-form-item>
+      </el-form>
+      <div class="mr-20px" v-else>
+        <el-button @click="handleCategorySortCancel"> 取 消 </el-button>
+        <el-button type="primary" @click="handleCategorySortSubmit"> 保存排序 </el-button>
+      </div>
+    </div>
+
+    <el-divider />
+
+    <!-- 按照分类，展示其所属的模型列表 -->
+    <div class="px-15px">
+      <draggable
+        :disabled="!isCategorySorting"
+        v-model="categoryGroup"
+        item-key="id"
+        :animation="400"
+      >
+        <template #item="{ element }">
+          <ContentWrap
+            class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
+            v-loading="loading"
+            :body-style="{ padding: 0 }"
+            :key="element.id"
           >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="最新部署的流程定义" align="center">
-        <el-table-column
-          label="流程版本"
-          align="center"
-          prop="processDefinition.version"
-          width="100"
-        >
-          <template #default="scope">
-            <el-tag v-if="scope.row.processDefinition">
-              v{{ scope.row.processDefinition.version }}
-            </el-tag>
-            <el-tag v-else type="warning">未部署</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="激活状态"
-          align="center"
-          prop="processDefinition.version"
-          width="85"
-        >
-          <template #default="scope">
-            <el-switch
-              v-if="scope.row.processDefinition"
-              v-model="scope.row.processDefinition.suspensionState"
-              :active-value="1"
-              :inactive-value="2"
-              @change="handleChangeState(scope.row)"
+            <CategoryDraggableModel
+              :isCategorySorting="isCategorySorting"
+              :categoryInfo="element"
+              @success="getList"
             />
-          </template>
-        </el-table-column>
-        <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
-          <template #default="scope">
-            <span v-if="scope.row.processDefinition">
-              {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-            </span>
-          </template>
-        </el-table-column>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="240" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-          >
-            修改流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-          >
-            设计流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleSimpleDesign(scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-          >
-            仿钉钉设计流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-          >
-            发布流程
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            v-hasPermi="['bpm:process-definition:query']"
-            @click="handleDefinitionList(scope.row)"
-          >
-            流程定义
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['bpm:model:delete']"
-          >
-            删除
-          </el-button>
+          </ContentWrap>
         </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+      </draggable>
+    </div>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
   <ModelForm ref="formRef" @success="getList" />
-
-  <!-- 表单弹窗：导入流程 -->
-  <ModelImportForm ref="importFormRef" @success="getList" />
-
+  <!-- 表单弹窗：添加分类 -->
+  <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
   </Dialog>
-
-  <!-- 弹窗：流程模型图的预览 -->
-  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <MyProcessViewer
-      key="designer"
-      v-model="bpmnXML"
-      :value="bpmnXML as any"
-      v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
-    />
-  </Dialog>
 </template>
 
 <script lang="ts" setup>
-import { dateFormatter, formatDate } from '@/utils/formatTime'
-import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
+import draggable from 'vuedraggable'
+import { CategoryApi } from '@/api/bpm/category'
 import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
-import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { CategoryApi } from '@/api/bpm/category'
+import CategoryForm from '../category/CategoryForm.vue'
+import { cloneDeep } from 'lodash-es'
+import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
+const isCategorySorting = ref(false) // 是否 category 正处于排序状态
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
+  name: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ModelApi.getModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
+const categoryGroup: any = ref([]) // 按照 category 分组的数据
+const originalData: any = ref([]) // 原始数据
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.pageNo = 1
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-/** 添加/修改操作 */
-const importFormRef = ref()
-const openImportForm = () => {
-  importFormRef.value.open()
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
 
-/** 更新状态操作 */
-const handleChangeState = async (row) => {
-  const state = row.processDefinition.suspensionState
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    const statusState = state === 1 ? '激活' : '挂起'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, state)
-    // 刷新列表
-    await getList()
-  } catch {
-    // 取消后，进行恢复按钮
-    row.processDefinition.suspensionState = state === 1 ? 2 : 1
+/** 右上角设置按钮 */
+const handleCommand = (command: string) => {
+  switch (command) {
+    case 'handleCategoryAdd':
+      handleCategoryAdd()
+      break
+    case 'handleCategorySort':
+      handleCategorySort()
+      break
+    default:
+      break
   }
 }
 
-/** 设计流程 */
-const handleDesign = (row) => {
-  push({
-    name: 'BpmModelEditor',
-    query: {
-      modelId: row.id
-    }
-  })
+/** 新建分类 */
+const categoryFormRef = ref()
+const handleCategoryAdd = () => {
+  categoryFormRef.value.open('create')
 }
 
-const handleSimpleDesign = (row) => {
-  push({
-    name: 'SimpleWorkflowDesignEditor',
-    query: {
-      modelId: row.id
-    }
-  })
+/** 分类排序的提交 */
+const handleCategorySort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(categoryGroup.value)
+  isCategorySorting.value = true
 }
 
-/** 发布流程 */
-const handleDeploy = async (row) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
+/** 分类排序的取消 */
+const handleCategorySortCancel = () => {
+  // 恢复初始数据
+  categoryGroup.value = cloneDeep(originalData.value)
+  isCategorySorting.value = false
 }
 
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
+/** 分类排序的保存 */
+const handleCategorySortSubmit = async () => {
+  // 保存排序
+  const ids = categoryGroup.value.map((item: any) => item.id)
+  await CategoryApi.updateCategorySortBatch(ids)
+  // 刷新列表
+  isCategorySorting.value = false
+  message.success('排序分类成功')
+  await getList()
 }
 
-/** 流程表单的详情按钮操作 */
-const formDetailVisible = ref(false)
-const formDetailPreview = ref({
-  rule: [],
-  option: {}
-})
-const handleFormDetail = async (row) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
+/** 加载数据 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 查询模型 + 分裂的列表
+    const modelList = await ModelApi.getModelList(queryParams.name)
+    const categoryList = await CategoryApi.getCategorySimpleList()
+    // 按照 category 聚合
+    // 注意：必须一次性赋值给 categoryGroup，否则每次操作后，列表会重新渲染，滚动条的位置会偏离！！！
+    categoryGroup.value = categoryList.map((category: any) => ({
+      ...category,
+      modelList: modelList.filter((model: any) => model.categoryName == category.name)
+    }))
+  } finally {
+    loading.value = false
   }
 }
 
-/** 流程图的详情按钮操作 */
-const bpmnDetailVisible = ref(false)
-const bpmnXML = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const handleBpmnDetail = async (row) => {
-  const data = await ModelApi.getModel(row.id)
-  bpmnXML.value = data.bpmnXml || ''
-  bpmnDetailVisible.value = true
-}
-
 /** 初始化 **/
-onMounted(async () => {
-  await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
+onMounted(() => {
+  getList()
 })
 </script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-table--fit .el-table__inner-wrapper:before {
+    height: 0;
+  }
+  .el-card {
+    border-radius: 8px;
+  }
+  .el-form--inline .el-form-item {
+    margin-right: 10px;
+  }
+  .el-divider--horizontal {
+    margin-top: 6px;
+  }
+}
+</style>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
new file mode 100644
index 00000000..9cb64206
--- /dev/null
+++ b/src/views/bpm/model/index_old.vue
@@ -0,0 +1,404 @@
+<template>
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:model:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新建
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.formType === 10"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button
+            v-else-if="scope.row.formType === 20"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition?.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDesign(scope.row)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            设计
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDeploy(scope.row)"
+            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            发布
+          </el-button>
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+          >
+            <el-button type="primary" link>更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
+                >
+                  历史
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改流程 -->
+  <ModelForm ref="formRef" @success="getList" />
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import ModelForm from './ModelForm.vue'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+defineOptions({ name: 'BpmModel' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelList(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleModelDesign',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+})
+</script>
diff --git a/src/views/bpm/oa/leave/index.vue b/src/views/bpm/oa/leave/index.vue
index 6d5dbf3e..27dbc19e 100644
--- a/src/views/bpm/oa/leave/index.vue
+++ b/src/views/bpm/oa/leave/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="审批接入（业务表单）" url="https://doc.iocoder.cn/bpm/use-business-form/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -36,9 +36,9 @@
           value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>
-      <el-form-item label="审批结果" prop="result">
+      <el-form-item label="审批结果" prop="status">
         <el-select
-          v-model="queryParams.result"
+          v-model="queryParams.status"
           class="!w-240px"
           clearable
           placeholder="请选择审批结果"
@@ -81,7 +81,7 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column align="center" label="申请编号" prop="id" />
-      <el-table-column align="center" label="状态" prop="result">
+      <el-table-column align="center" label="状态" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
         </template>
diff --git a/src/views/bpm/processExpression/ProcessExpressionForm.vue b/src/views/bpm/processExpression/ProcessExpressionForm.vue
index acf0667c..2e5ed2e4 100644
--- a/src/views/bpm/processExpression/ProcessExpressionForm.vue
+++ b/src/views/bpm/processExpression/ProcessExpressionForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/bpm/processExpression/index.vue b/src/views/bpm/processExpression/index.vue
index a23eca9e..ec2de5ad 100644
--- a/src/views/bpm/processExpression/index.vue
+++ b/src/views/bpm/processExpression/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
new file mode 100644
index 00000000..3800f191
--- /dev/null
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -0,0 +1,261 @@
+<template>
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }">
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
+        <div class="text-#878c93 h-15px">流程：{{ selectProcessDefinition.name }}</div>
+        <el-divider class="!my-8px" />
+
+        <!-- 中间主要内容 tab 栏 -->
+        <el-tabs v-model="activeTab">
+          <!-- 表单信息 -->
+          <el-tab-pane label="表单填写" name="form" >
+            <div class="form-scroll-area" v-loading="processInstanceStartLoading">
+              <el-scrollbar>
+                <el-row>
+                  <el-col :span="17">
+                    <form-create
+                      :rule="detailForm.rule"
+                      v-model:api="fApi"
+                      v-model="detailForm.value"
+                      :option="detailForm.option"
+                      @submit="submitForm"
+                    />
+                  </el-col>
+
+                  <el-col :span="6" :offset="1">
+                    <!-- 流程时间线 -->
+                    <ProcessInstanceTimeline
+                      ref="timelineRef"
+                      :activity-nodes="activityNodes"
+                      :show-status-icon="false"
+                      @select-user-confirm="selectUserConfirm"
+                    />
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
+          <!-- 流程图 -->
+          <el-tab-pane label="流程图" name="diagram">
+            <div class="form-scroll-area">
+              <!-- BPMN 流程图预览 -->
+              <ProcessInstanceBpmnViewer
+                :bpmn-xml="bpmnXML"
+                v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
+              />
+
+              <!-- Simple 流程图预览 -->
+              <ProcessInstanceSimpleViewer
+                :simple-json="simpleJson"
+                v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
+              />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <!-- 底部操作栏 -->
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
+          <!-- 操作栏按钮 -->
+          <div
+            v-if="activeTab === 'form'"
+            class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+          >
+            <el-button plain type="success" @click="submitForm">
+              <Icon icon="ep:select" />&nbsp; 发起
+            </el-button>
+            <el-button plain type="danger" @click="handleCancel">
+              <Icon icon="ep:close" />&nbsp; 取消
+            </el-button>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelType } from '@/utils/constants'
+import { CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
+import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as DefinitionApi from '@/api/bpm/definition'
+import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
+
+defineOptions({ name: 'ProcessDefinitionDetail' })
+const props = defineProps<{
+  selectProcessDefinition: any
+}>()
+const emit = defineEmits(['cancel'])
+const processInstanceStartLoading = ref(false) // 流程实例发起中
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息弹窗
+const { delView } = useTagsViewStore() // 视图操作
+
+const detailForm: any = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程表单详情
+const fApi = ref<ApiAttrs>()
+// 指定审批人
+const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人或抄送人的任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const bpmnXML: any = ref(null) // BPMN 数据
+const simpleJson = ref<string | undefined>() // Simple 设计器数据 json 格式
+
+const activeTab = ref('form') // 当前的 Tab
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
+
+/** 设置表单信息、获取流程图数据 **/
+const initProcessInfo = async (row: any, formVariables?: any) => {
+  // 重置指定审批人
+  startUserSelectTasks.value = []
+  startUserSelectAssignees.value = {}
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+    for (const key in formVariables) {
+      if (!allowedFields.includes(key)) {
+        delete formVariables[key]
+      }
+    }
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+    await nextTick()
+    fApi.value?.btn.show(false) // 隐藏提交按钮
+    // 获取流程审批信息
+    await getApprovalDetail(row)
+
+    // 加载流程图
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml
+      simpleJson.value = processDefinitionDetail.simpleModel
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 获取审批详情 */
+const getApprovalDetail = async (row: any) => {
+  try {
+    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id })
+    if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+
+    // 获取发起人自选的任务
+    startUserSelectTasks.value = data.activityNodes?.filter(
+      (node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
+    )
+    if (startUserSelectTasks.value?.length > 0) {
+      for (const node of startUserSelectTasks.value) {
+        startUserSelectAssignees.value[node.id] = []
+      }
+    }
+
+    // 获取审批节点，显示 Timeline 的数据
+    activityNodes.value = data.activityNodes
+  } finally {
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async () => {
+  if (!fApi.value || !props.selectProcessDefinition) {
+    return
+  }
+  // 流程表单校验
+  await fApi.value.validate()
+  // 如果有指定审批人，需要校验
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const userTask of startUserSelectTasks.value) {
+      if (
+        Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
+        startUserSelectAssignees.value[userTask.id].length === 0
+      )
+        return message.warning(`请选择${userTask.name}的候选人`)
+    }
+  }
+
+  // 提交请求
+  processInstanceStartLoading.value = true
+  try {
+    await ProcessInstanceApi.createProcessInstance({
+      processDefinitionId: props.selectProcessDefinition.id,
+      variables: detailForm.value.value,
+      startUserSelectAssignees: startUserSelectAssignees.value
+    })
+    // 提示
+    message.success('发起流程成功')
+    // 跳转回去
+    delView(unref(currentRoute))
+    await push({
+      name: 'BpmProcessInstanceMy'
+    })
+  } finally {
+    processInstanceStartLoading.value = false
+  }
+}
+
+/** 取消发起审批 */
+const handleCancel = () => {
+  emit('cancel')
+}
+
+/** 选择发起人 */
+const selectUserConfirm = (id: string, userList: any[]) => {
+  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id)
+}
+
+defineExpose({ initProcessInfo })
+</script>
+
+<style lang="scss" scoped>
+$wrap-padding-height: 20px;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 105px;
+
+.processInstance-wrap-main {
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  overflow: auto;
+
+  .form-scroll-area {
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    overflow: auto;
+  }
+}
+
+.form-box {
+  :deep(.el-card) {
+    border: none;
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 204c5a14..284cbdb7 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -1,133 +1,115 @@
 <template>
-
-
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
-    <el-tabs tab-position="left" v-model="categoryActive">
-      <el-tab-pane
-        :label="category.name"
-        :name="category.code"
-        :key="category.code"
-        v-for="category in categoryList"
-      >
-        <el-row :gutter="20">
-          <el-col
-            :lg="6"
-            :sm="12"
-            :xs="24"
-            v-for="definition in categoryProcessDefinitionList"
-            :key="definition.id"
-          >
-            <el-card
-              shadow="hover"
-              class="mb-20px cursor-pointer"
-              @click="handleSelect(definition)"
+  <template v-if="!selectProcessDefinition">
+    <el-input
+      v-model="searchName"
+      class="!w-50% mb-15px"
+      placeholder="请输入流程名称"
+      clearable
+      @input="handleQuery"
+      @clear="handleQuery"
+    >
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+    <ContentWrap
+      :class="{ 'process-definition-container': filteredProcessDefinitionList?.length }"
+      class="position-relative pb-20px h-700px"
+      v-loading="loading"
+    >
+      <el-row v-if="filteredProcessDefinitionList?.length" :gutter="20" class="!flex-nowrap">
+        <el-col :span="5">
+          <div class="flex flex-col">
+            <div
+              v-for="category in availableCategories"
+              :key="category.code"
+              class="flex items-center p-10px cursor-pointer text-14px rounded-md"
+              :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
+              @click="handleCategoryClick(category)"
             >
-              <template #default>
-                <div class="flex">
-                  <el-image :src="definition.icon" class="w-32px h-32px" />
-                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
-                </div>
-              </template>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
-
-  <!-- 第二步，填写表单，进行流程的提交 -->
-  <ContentWrap v-else>
-    <el-card class="box-card">
-      <div class="clearfix">
-        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
-        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
-          <Icon icon="ep:delete" /> 选择其它流程
-        </el-button>
-      </div>
-      <el-col :span="16" :offset="6" style="margin-top: 20px">
-        <form-create
-          :rule="detailForm.rule"
-          v-model:api="fApi"
-          v-model="detailForm.value"
-          :option="detailForm.option"
-          @submit="submitForm"
-        >
-          <template #type-startUserSelect>
-            <el-col :span="24">
-              <el-card class="mb-10px">
-                <template #header>指定审批人</template>
-                <el-form
-                  :model="startUserSelectAssignees"
-                  :rules="startUserSelectAssigneesFormRules"
-                  ref="startUserSelectAssigneesFormRef"
+              {{ category.name }}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="19">
+          <el-scrollbar ref="scrollWrapper" height="700" @scroll="handleScroll">
+            <div
+              class="mb-20px pl-10px"
+              v-for="(definitions, categoryCode) in processDefinitionGroup"
+              :key="categoryCode"
+              :ref="`category-${categoryCode}`"
+            >
+              <h3 class="text-18px font-bold mb-10px mt-5px">
+                {{ getCategoryName(categoryCode as any) }}
+              </h3>
+              <div class="grid grid-cols-3 gap3">
+                <el-tooltip
+                  v-for="definition in definitions"
+                  :key="definition.id"
+                  :content="definition.description"
+                  :disabled="!definition.description || definition.description.trim().length === 0"
+                  placement="top"
                 >
-                  <el-form-item
-                    v-for="userTask in startUserSelectTasks"
-                    :key="userTask.id"
-                    :label="`任务【${userTask.name}】`"
-                    :prop="userTask.id"
+                  <el-card
+                    shadow="hover"
+                    class="cursor-pointer definition-item-card"
+                    @click="handleSelect(definition)"
                   >
-                    <el-select
-                      v-model="startUserSelectAssignees[userTask.id]"
-                      multiple
-                      placeholder="请选择审批人"
-                    >
-                      <el-option
-                        v-for="user in userList"
-                        :key="user.id"
-                        :label="user.nickname"
-                        :value="user.id"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-form>
-              </el-card>
-            </el-col>
-          </template>
-        </form-create>
-      </el-col>
-    </el-card>
-    <!-- 流程图预览 -->
-    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
-  </ContentWrap>
+                    <template #default>
+                      <div class="flex">
+                        <el-image :src="definition.icon" class="w-32px h-32px" />
+                        <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                      </div>
+                    </template>
+                  </el-card>
+                </el-tooltip>
+              </div>
+            </div>
+          </el-scrollbar>
+        </el-col>
+      </el-row>
+      <el-empty class="!py-200px" :image-size="200" description="没有找到搜索结果" v-else />
+    </ContentWrap>
+  </template>
+
+  <!-- 第二步，填写表单，进行流程的提交 -->
+  <ProcessDefinitionDetail
+    v-else
+    ref="processDefinitionDetailRef"
+    :selectProcessDefinition="selectProcessDefinition"
+    @cancel="selectProcessDefinition = undefined"
+  />
 </template>
+
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
-import { CategoryApi } from '@/api/bpm/category'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import * as UserApi from '@/api/system/user'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
+import { groupBy } from 'lodash-es'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
+const { proxy } = getCurrentInstance() as any
 const route = useRoute() // 路由
-const { push, currentRoute } = useRouter() // 路由
 const message = useMessage() // 消息
-const { delView } = useTagsViewStore() // 视图操作
 
-const processInstanceId = route.query.processInstanceId
+const searchName = ref('') // 当前搜索关键字
+const processInstanceId: any = route.query.processInstanceId // 流程实例编号。场景：重新发起时
 const loading = ref(true) // 加载中
-const categoryList = ref([]) // 分类的列表
-const categoryActive = ref('') // 选中的分类
+const categoryList: any = ref([]) // 分类的列表
+const categoryActive: any = ref({}) // 选中的分类
 const processDefinitionList = ref([]) // 流程定义的列表
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    // 流程分类
-    categoryList.value = await CategoryApi.getCategorySimpleList()
-    if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0].code
-    }
-    // 流程定义
-    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
-      suspensionState: 1
-    })
+    // 所有流程分类数据
+    await getCategoryList()
+    // 所有流程定义数据
+    await getProcessDefinitionList()
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
@@ -137,7 +119,7 @@ const getList = async () => {
         return
       }
       const processDefinition = processDefinitionList.value.find(
-        (item) => item.key == processInstance.processDefinition?.key
+        (item: any) => item.key == processInstance.processDefinition?.key
       )
       if (!processDefinition) {
         message.error('重新发起流程失败，原因：流程定义不存在')
@@ -150,108 +132,168 @@ const getList = async () => {
   }
 }
 
-/** 选中分类对应的流程定义列表 */
-const categoryProcessDefinitionList = computed(() => {
-  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+/** 获取所有流程分类数据 */
+const getCategoryList = async () => {
+  try {
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+  } finally {
+  }
+}
+
+/** 获取所有流程定义数据 */
+const getProcessDefinitionList = async () => {
+  try {
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+    // 初始化过滤列表为全部流程定义
+    filteredProcessDefinitionList.value = processDefinitionList.value
+
+    // 在获取完所有数据后，设置第一个有效分类为激活状态
+    if (availableCategories.value.length > 0 && !categoryActive.value?.code) {
+      categoryActive.value = availableCategories.value[0]
+    }
+  } finally {
+  }
+}
+
+/** 搜索流程 */
+const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
+const handleQuery = () => {
+  if (searchName.value.trim()) {
+    // 如果有搜索关键字，进行过滤
+    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+      (definition: any) => definition.name.toLowerCase().includes(searchName.value.toLowerCase()) // 假设搜索依据是流程定义的名称
+    )
+  } else {
+    // 如果没有搜索关键字，恢复所有数据
+    filteredProcessDefinitionList.value = processDefinitionList.value
+  }
+}
+
+/** 流程定义的分组 */
+const processDefinitionGroup: any = computed(() => {
+  if (!processDefinitionList.value?.length) {
+    return {}
+  }
+
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
+  // 按照 categoryList 的顺序重新组织数据
+  const orderedGroup = {}
+  categoryList.value.forEach((category: any) => {
+    if (grouped[category.code]) {
+      orderedGroup[category.code] = grouped[category.code]
+    }
+  })
+  return orderedGroup
 })
 
+/** 左侧分类切换 */
+const handleCategoryClick = (category: any) => {
+  categoryActive.value = category
+  const categoryRef = proxy.$refs[`category-${category.code}`] // 获取点击分类对应的 DOM 元素
+  if (categoryRef?.length) {
+    const scrollWrapper = proxy.$refs.scrollWrapper // 获取右侧滚动容器
+    const categoryOffsetTop = categoryRef[0].offsetTop
+
+    // 滚动到对应位置
+    scrollWrapper.scrollTo({ top: categoryOffsetTop, behavior: 'smooth' })
+  }
+}
+
+/** 通过分类 code 获取对应的名称 */
+const getCategoryName = (categoryCode: string) => {
+  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)?.name
+}
+
 // ========== 表单相关 ==========
-const fApi = ref<ApiAttrs>()
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-}) // 流程表单详情
 const selectProcessDefinition = ref() // 选择的流程定义
-
-// 指定审批人
-const bpmnXML = ref(null) // BPMN 数据
-const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
-const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
-const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
-const userList = ref<any[]>([]) // 用户列表
+const processDefinitionDetailRef = ref()
 
 /** 处理选择流程的按钮操作 **/
-const handleSelect = async (row, formVariables) => {
+const handleSelect = async (row, formVariables?) => {
   // 设置选择的流程
   selectProcessDefinition.value = row
+  // 初始化流程定义详情
+  await nextTick()
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
+}
 
-  // 重置指定审批人
-  startUserSelectTasks.value = []
-  startUserSelectAssignees.value = {}
-  startUserSelectAssigneesFormRules.value = {}
-
-  // 情况一：流程表单
-  if (row.formType == 10) {
-    // 设置表单
-    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-    // 加载流程图
-    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
-    if (processDefinitionDetail) {
-      bpmnXML.value = processDefinitionDetail.bpmnXml
-      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+/** 处理滚动事件，和左侧分类联动 */
+const handleScroll = (e: any) => {
+  // 直接使用事件对象获取滚动位置
+  const scrollTop = e.scrollTop
 
-      // 设置指定审批人
-      if (startUserSelectTasks.value?.length > 0) {
-        detailForm.value.rule.push({
-          type: 'startUserSelect',
-          props: {
-            title: '指定审批人'
-          }
-        })
-        // 设置校验规则
-        for (const userTask of startUserSelectTasks.value) {
-          startUserSelectAssignees.value[userTask.id] = []
-          startUserSelectAssigneesFormRules.value[userTask.id] = [
-            { required: true, message: '请选择审批人', trigger: 'blur' }
-          ]
+  // 获取所有分类区域的位置信息
+  const categoryPositions = categoryList.value
+    .map((category: CategoryVO) => {
+      const categoryRef = proxy.$refs[`category-${category.code}`]
+      if (categoryRef?.[0]) {
+        return {
+          code: category.code,
+          offsetTop: categoryRef[0].offsetTop,
+          height: categoryRef[0].offsetHeight
         }
-        // 加载用户列表
-        userList.value = await UserApi.getSimpleUserList()
       }
-    }
-    // 情况二：业务表单
-  } else if (row.formCustomCreatePath) {
-    await push({
-      path: row.formCustomCreatePath
+      return null
     })
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-  }
-}
+    .filter(Boolean)
 
-/** 提交按钮 */
-const submitForm = async (formData) => {
-  if (!fApi.value || !selectProcessDefinition.value) {
-    return
-  }
-  // 如果有指定审批人，需要校验
-  if (startUserSelectTasks.value?.length > 0) {
-    await startUserSelectAssigneesFormRef.value.validate()
+  // 查找当前滚动位置对应的分类
+  let currentCategory = categoryPositions[0]
+  for (const position of categoryPositions) {
+    // 为了更好的用户体验，可以添加一个缓冲区域（比如 50px）
+    if (scrollTop >= position.offsetTop - 50) {
+      currentCategory = position
+    } else {
+      break
+    }
   }
 
-  // 提交请求
-  fApi.value.btn.loading(true)
-  try {
-    await ProcessInstanceApi.createProcessInstance({
-      processDefinitionId: selectProcessDefinition.value.id,
-      variables: formData,
-      startUserSelectAssignees: startUserSelectAssignees.value
-    })
-    // 提示
-    message.success('发起流程成功')
-    // 跳转回去
-    delView(unref(currentRoute))
-    await push({
-      name: 'BpmProcessInstanceMy'
-    })
-  } finally {
-    fApi.value.btn.loading(false)
+  // 更新当前 active 的分类
+  if (currentCategory && categoryActive.value.code !== currentCategory.code) {
+    categoryActive.value = categoryList.value.find(
+      (c: CategoryVO) => c.code === currentCategory.code
+    )
   }
 }
 
+/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
+const availableCategories = computed(() => {
+  if (!categoryList.value?.length || !processDefinitionGroup.value) {
+    return []
+  }
+
+  // 获取所有有流程的分类代码
+  const availableCategoryCodes = Object.keys(processDefinitionGroup.value)
+
+  // 过滤出有流程的分类
+  return categoryList.value.filter((category: CategoryVO) =>
+    availableCategoryCodes.includes(category.code)
+  )
+})
+
 /** 初始化 */
 onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.process-definition-container::before {
+  content: '';
+  border-left: 1px solid #e6e6e6;
+  position: absolute;
+  left: 20.8%;
+  height: 100%;
+}
+:deep() {
+  .definition-item-card {
+    .el-card__body {
+      padding: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/create/index_old.vue b/src/views/bpm/processInstance/create/index_old.vue
new file mode 100644
index 00000000..83e1ff46
--- /dev/null
+++ b/src/views/bpm/processInstance/create/index_old.vue
@@ -0,0 +1,267 @@
+<template>
+  <doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
+
+  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
+    <el-tabs tab-position="left" v-model="categoryActive">
+      <el-tab-pane
+        :label="category.name"
+        :name="category.code"
+        :key="category.code"
+        v-for="category in categoryList"
+      >
+        <el-row :gutter="20">
+          <el-col
+            :lg="6"
+            :sm="12"
+            :xs="24"
+            v-for="definition in categoryProcessDefinitionList"
+            :key="definition.id"
+          >
+            <el-card
+              shadow="hover"
+              class="mb-20px cursor-pointer"
+              @click="handleSelect(definition)"
+            >
+              <template #default>
+                <div class="flex">
+                  <el-image :src="definition.icon" class="w-32px h-32px" />
+                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                </div>
+              </template>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+
+  <!-- 第二步，填写表单，进行流程的提交 -->
+  <ContentWrap v-else>
+    <el-card class="box-card">
+      <div class="clearfix">
+        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
+        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
+          <Icon icon="ep:delete" /> 选择其它流程
+        </el-button>
+      </div>
+      <el-col :span="16" :offset="6" style="margin-top: 20px">
+        <form-create
+          :rule="detailForm.rule"
+          v-model:api="fApi"
+          v-model="detailForm.value"
+          :option="detailForm.option"
+          @submit="submitForm"
+        >
+          <template #type-startUserSelect>
+            <el-col :span="24">
+              <el-card class="mb-10px">
+                <template #header>指定审批人</template>
+                <el-form
+                  :model="startUserSelectAssignees"
+                  :rules="startUserSelectAssigneesFormRules"
+                  ref="startUserSelectAssigneesFormRef"
+                >
+                  <el-form-item
+                    v-for="userTask in startUserSelectTasks"
+                    :key="userTask.id"
+                    :label="`任务【${userTask.name}】`"
+                    :prop="userTask.id"
+                  >
+                    <el-select
+                      v-model="startUserSelectAssignees[userTask.id]"
+                      multiple
+                      placeholder="请选择审批人"
+                    >
+                      <el-option
+                        v-for="user in userList"
+                        :key="user.id"
+                        :label="user.nickname"
+                        :value="user.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </el-card>
+            </el-col>
+          </template>
+        </form-create>
+      </el-col>
+    </el-card>
+    <!-- 流程图预览 -->
+    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import { CategoryApi } from '@/api/bpm/category'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'BpmProcessInstanceCreate' })
+
+const route = useRoute() // 路由
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息
+const { delView } = useTagsViewStore() // 视图操作
+
+const processInstanceId = route.query.processInstanceId
+const loading = ref(true) // 加载中
+const categoryList = ref([]) // 分类的列表
+const categoryActive = ref('') // 选中的分类
+const processDefinitionList = ref([]) // 流程定义的列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+    if (categoryList.value.length > 0) {
+      categoryActive.value = categoryList.value[0].code
+    }
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+
+    // 如果 processInstanceId 非空，说明是重新发起
+    if (processInstanceId?.length > 0) {
+      const processInstance = await ProcessInstanceApi.getProcessInstance(processInstanceId)
+      if (!processInstance) {
+        message.error('重新发起流程失败，原因：流程实例不存在')
+        return
+      }
+      const processDefinition = processDefinitionList.value.find(
+        (item) => item.key == processInstance.processDefinition?.key
+      )
+      if (!processDefinition) {
+        message.error('重新发起流程失败，原因：流程定义不存在')
+        return
+      }
+      await handleSelect(processDefinition, processInstance.formVariables)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 选中分类对应的流程定义列表 */
+const categoryProcessDefinitionList = computed(() => {
+  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+})
+
+// ========== 表单相关 ==========
+const fApi = ref<ApiAttrs>()
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程表单详情
+const selectProcessDefinition = ref() // 选择的流程定义
+
+// 指定审批人
+const bpmnXML = ref(null) // BPMN 数据
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row, formVariables) => {
+  // 设置选择的流程
+  selectProcessDefinition.value = row
+
+  // 重置指定审批人
+  startUserSelectTasks.value = []
+  startUserSelectAssignees.value = {}
+  startUserSelectAssigneesFormRules.value = {}
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+    for (const key in formVariables) {
+      if (!allowedFields.includes(key)) {
+        delete formVariables[key]
+      }
+    }
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+
+    // 加载流程图
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml
+      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+
+      // 设置指定审批人
+      if (startUserSelectTasks.value?.length > 0) {
+        detailForm.value.rule.push({
+          type: 'startUserSelect',
+          props: {
+            title: '指定审批人'
+          }
+        })
+        // 设置校验规则
+        for (const userTask of startUserSelectTasks.value) {
+          startUserSelectAssignees.value[userTask.id] = []
+          startUserSelectAssigneesFormRules.value[userTask.id] = [
+            { required: true, message: '请选择审批人', trigger: 'blur' }
+          ]
+        }
+        // 加载用户列表
+        userList.value = await UserApi.getSimpleUserList()
+      }
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async (formData) => {
+  if (!fApi.value || !selectProcessDefinition.value) {
+    return
+  }
+  // 如果有指定审批人，需要校验
+  if (startUserSelectTasks.value?.length > 0) {
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstance({
+      processDefinitionId: selectProcessDefinition.value.id,
+      variables: formData,
+      startUserSelectAssignees: startUserSelectAssignees.value
+    })
+    // 提示
+    message.success('发起流程成功')
+    // 跳转回去
+    delView(unref(currentRoute))
+    await push({
+      name: 'BpmProcessInstanceMy'
+    })
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 8912593a..781263d2 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -1,54 +1,61 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header>
-      <span class="el-icon-picture-outline">流程图</span>
-    </template>
-    <MyProcessViewer
-      key="designer"
-      :activityData="activityList"
-      :prefix="bpmnControlForm.prefix"
-      :processInstanceData="processInstance"
-      :taskData="tasks"
-      :value="bpmnXml"
-      v-bind="bpmnControlForm"
-    />
+    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
   </el-card>
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
-import * as ActivityApi from '@/api/bpm/activity'
 
 defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 
 const props = defineProps({
-  loading: propTypes.bool, // 是否加载中
-  id: propTypes.string, // 流程实例的编号
-  processInstance: propTypes.any, // 流程实例的信息
-  tasks: propTypes.array, // 流程任务的数组
-  bpmnXml: propTypes.string // BPMN XML
+  loading: propTypes.bool.def(false), // 是否加载中
+  bpmnXml: propTypes.string, // BPMN XML
+  modelView: propTypes.object
 })
 
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const activityList = ref([]) // 任务列表
+const view = ref({
+  bpmnXml: ''
+}) // BPMN 流程图数据
+
 
 /** 只有 loading 完成时，才去加载流程列表 */
 watch(
-  () => props.loading,
-  async (value) => {
-    if (value && props.id) {
-      activityList.value = await ActivityApi.getActivityList({
-        processInstanceId: props.id
-      })
+  () => props.modelView,
+  async (newModelView) => {
+    // 加载最新
+    if (newModelView) {
+      //@ts-ignore
+      view.value = newModelView
     }
   }
 )
+
+/** 监听 bpmnXml */
+watch(
+  () => props.bpmnXml,
+  (value) => {
+    view.value.bpmnXml = value
+  }
+)
 </script>
-<style>
+<style lang="scss" scoped>
 .box-card {
+  height: 100%;
   width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: 0;
+
+  :deep(.el-card__body) {
+    height: 100%;
+    padding: 0;
+  }
+
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
new file mode 100644
index 00000000..894a5d44
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -0,0 +1,989 @@
+<template>
+  <div
+    class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+  >
+    <!-- 【通过】按钮 -->
+    <el-popover
+      :visible="popOverVisible.approve"
+      placement="top-end"
+      :width="420"
+      trigger="click"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
+    >
+      <template #reference>
+        <el-button plain type="success" @click="openPopover('approve')">
+          <Icon icon="ep:select" />&nbsp; {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
+        </el-button>
+      </template>
+      <!-- 审批表单 -->
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="approveFormRef"
+          :model="approveReasonForm"
+          :rules="approveReasonRule"
+          label-width="100px"
+        >
+          <el-card v-if="runningTask?.formId > 0" class="mb-15px !-mt-10px">
+            <template #header>
+              <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
+            </template>
+            <form-create
+              v-model="approveForm.value"
+              v-model:api="approveFormFApi"
+              :option="approveForm.option"
+              :rule="approveForm.rule"
+            />
+          </el-card>
+          <el-form-item label="审批意见" prop="reason">
+            <el-input
+              v-model="approveReasonForm.reason"
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="4"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="success" @click="handleAudit(true, approveFormRef)">
+              {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
+            </el-button>
+            <el-button @click="closePropover('approve', approveFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!-- 【拒绝】按钮 -->
+    <el-popover
+      :visible="popOverVisible.reject"
+      placement="top-end"
+      :width="420"
+      trigger="click"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
+    >
+      <template #reference>
+        <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
+          <Icon icon="ep:close" />&nbsp; {{ getButtonDisplayName(OperationButtonType.REJECT) }}
+        </el-button>
+      </template>
+      <!-- 审批表单 -->
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="rejectFormRef"
+          :model="rejectReasonForm"
+          :rules="rejectReasonRule"
+          label-width="100px"
+        >
+          <el-form-item label="审批意见" prop="reason">
+            <el-input
+              v-model="rejectReasonForm.reason"
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="4"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="danger" @click="handleAudit(false,rejectFormRef)">
+              {{ getButtonDisplayName(OperationButtonType.REJECT) }}
+            </el-button>
+            <el-button @click="closePropover('reject', rejectFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!-- 【抄送】按钮 -->
+    <el-popover
+      :visible="popOverVisible.copy"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.COPY)"
+    >
+      <template #reference>
+        <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="svg-icon:send" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.COPY) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="copyFormRef"
+          :model="copyForm"
+          :rules="copyFormRule"
+          label-width="100px"
+        >
+          <el-form-item label="抄送人" prop="copyUserIds">
+            <el-select
+              v-model="copyForm.copyUserIds"
+              clearable
+              style="width: 100%"
+              multiple
+              placeholder="请选择抄送人"
+            >
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="抄送意见" prop="copyReason">
+            <el-input
+              v-model="copyForm.copyReason"
+              clearable
+              placeholder="请输入抄送意见"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleCopy">
+              {{ getButtonDisplayName(OperationButtonType.COPY) }}
+            </el-button>
+            <el-button @click="closePropover('copy', copyFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!-- 【转办】按钮 -->
+    <el-popover
+      :visible="popOverVisible.transfer"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
+    >
+      <template #reference>
+        <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="fa:share-square-o" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="transferFormRef"
+          :model="transferForm"
+          :rules="transferFormRule"
+          label-width="100px"
+        >
+          <el-form-item label="新审批人" prop="assigneeUserId">
+            <el-select v-model="transferForm.assigneeUserId" clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批意见" prop="reason">
+            <el-input
+              v-model="transferForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleTransfer()">
+              {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+            </el-button>
+            <el-button @click="closePropover('transfer', transferFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!-- 【委派】按钮 -->
+    <el-popover
+      :visible="popOverVisible.delegate"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.DELEGATE)"
+    >
+      <template #reference>
+        <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="ep:position" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="delegateFormRef"
+          :model="delegateForm"
+          :rules="delegateFormRule"
+          label-width="100px"
+        >
+          <el-form-item label="接收人" prop="delegateUserId">
+            <el-select v-model="delegateForm.delegateUserId" clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批意见" prop="reason">
+            <el-input
+              v-model="delegateForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleDelegate()">
+              {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+            </el-button>
+            <el-button @click="closePropover('delegate', delegateFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+    <el-popover
+      :visible="popOverVisible.addSign"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.ADD_SIGN)"
+    >
+      <template #reference>
+        <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="ep:plus" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="addSignFormRef"
+          :model="addSignForm"
+          :rules="addSignFormRule"
+          label-width="100px"
+        >
+          <el-form-item label="加签处理人" prop="addSignUserIds">
+            <el-select v-model="addSignForm.addSignUserIds" multiple clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批意见" prop="reason">
+            <el-input
+              v-model="addSignForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('before')">
+              向前{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+            </el-button>
+            <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('after')">
+              向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+            </el-button>
+            <el-button @click="closePropover('addSign', addSignFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!-- 【减签】按钮 -->
+    <el-popover
+      :visible="popOverVisible.deleteSign"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="runningTask?.children.length > 0"
+    >
+      <template #reference>
+        <div @click="openPopover('deleteSign')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="deleteSignFormRef"
+          :model="deleteSignForm"
+          :rules="deleteSignFormRule"
+          label-width="100px"
+        >
+          <el-form-item label="减签人员" prop="deleteSignTaskId">
+            <el-select v-model="deleteSignForm.deleteSignTaskId" clearable style="width: 100%">
+              <el-option
+                v-for="item in runningTask.children"
+                :key="item.id"
+                :label="getDeleteSignUserLabel(item)"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批意见" prop="reason">
+            <el-input
+              v-model="deleteSignForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handlerDeleteSign()">
+              减签
+            </el-button>
+            <el-button @click="closePropover('deleteSign', deleteSignFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!-- 【退回】按钮 -->
+    <el-popover
+      :visible="popOverVisible.return"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)"
+    >
+      <template #reference>
+        <div @click="openPopover('return')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="ep:back" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="returnFormRef"
+          :model="returnForm"
+          :rules="returnFormRule"
+          label-width="100px"
+        >
+          <el-form-item label="退回节点" prop="targetTaskDefinitionKey">
+            <el-select v-model="returnForm.targetTaskDefinitionKey" clearable style="width: 100%">
+              <el-option
+                v-for="item in returnList"
+                :key="item.taskDefinitionKey"
+                :label="item.name"
+                :value="item.taskDefinitionKey"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="退回理由" prop="returnReason">
+            <el-input
+              v-model="returnForm.returnReason"
+              clearable
+              placeholder="请输入退回理由"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleReturn()">
+              {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+            </el-button>
+            <el-button @click="closePropover('return', returnFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
+    <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+    <el-popover
+      :visible="popOverVisible.cancel"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="
+        userId === processInstance?.startUser?.id && !isEndProcessStatus(processInstance?.status)
+      "
+    >
+      <template #reference>
+        <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 取消
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="cancelFormRef"
+          :model="cancelForm"
+          :rules="cancelFormRule"
+          label-width="100px"
+        >
+          <el-form-item label="取消理由" prop="cancelReason">
+            <span class="text-#878c93 text-12px">&nbsp; 取消后，该审批流程将自动结束</span>
+            <el-input
+              v-model="cancelForm.cancelReason"
+              clearable
+              placeholder="请输入取消理由"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">
+              确认
+            </el-button>
+            <el-button @click="closePropover('cancel', cancelFormRef)"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+    <!-- 【再次提交】 按钮-->
+    <div
+      @click="handleReCreate()"
+      class="hover-bg-gray-100 rounded-xl p-6px"
+      v-if="
+        userId === processInstance?.startUser?.id &&
+        isEndProcessStatus(processInstance?.status) &&
+        processDefinition?.formType === 10
+      "
+    >
+      <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import * as TaskApi from '@/api/bpm/task'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as UserApi from '@/api/system/user'
+import {
+  OperationButtonType,
+  OPERATION_BUTTON_NAME
+} from '@/components/SimpleProcessDesignerV2/src/consts'
+import { BpmProcessInstanceStatus, BpmModelFormType } from '@/utils/constants'
+import type { FormInstance, FormRules } from 'element-plus'
+defineOptions({ name: 'ProcessInstanceBtnContainer' })
+
+const router = useRouter() // 路由
+const message = useMessage() // 消息弹窗
+
+const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+const props = defineProps< {
+  processInstance: any,  // 流程实例信息
+  processDefinition: any,  // 流程定义信息
+  userOptions: UserApi.UserVO[],
+  normalForm: any, // 流程表单 formCreate
+  normalFormApi: any, // 流程表单 formCreate Api
+  writableFields: string[] // 流程表单可以编辑的字段
+}>()
+
+const formLoading = ref(false) // 表单加载中
+const popOverVisible = ref({
+  approve: false,
+  reject: false,
+  transfer: false,
+  delegate: false,
+  addSign: false,
+  return: false,
+  copy: false,
+  cancel: false,
+  deleteSign: false
+}) // 气泡卡是否展示
+const returnList = ref([] as any) // 退回节点
+
+// ========== 审批信息 ==========
+const runningTask = ref<any>() // 运行中的任务
+const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
+const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
+
+// 审批通过意见表单
+const approveFormRef = ref<FormInstance>()
+const approveReasonForm = reactive({
+  reason: ''
+})
+const approveReasonRule = reactive<FormRules<typeof approveReasonForm>>({
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+})
+// 拒绝表单
+const rejectFormRef = ref<FormInstance>()
+const rejectReasonForm = reactive({
+  reason: ''
+})
+const rejectReasonRule = reactive<FormRules<typeof rejectReasonForm>>({
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+})
+
+// 抄送表单
+const copyFormRef = ref<FormInstance>()
+const copyForm = reactive({
+  copyUserIds: [],
+  copyReason: ''
+})
+const copyFormRule = reactive<FormRules<typeof copyForm>>({
+  copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }]
+})
+
+// 转办表单
+const transferFormRef = ref<FormInstance>()
+const transferForm = reactive({
+  assigneeUserId: undefined,
+  reason: ''
+})
+const transferFormRule = reactive<FormRules<typeof transferForm>>({
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+})
+
+// 委派表单
+const delegateFormRef = ref<FormInstance>()
+const delegateForm = reactive({
+  delegateUserId: undefined,
+  reason: ''
+})
+const delegateFormRule = reactive<FormRules<typeof delegateForm>>({
+  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+})
+
+// 加签表单
+const addSignFormRef = ref<FormInstance>()
+const addSignForm = reactive({
+  addSignUserIds: undefined,
+  reason: ''
+})
+const addSignFormRule = reactive<FormRules<typeof addSignForm>>({
+  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+})
+
+// 减签表单
+const deleteSignFormRef = ref<FormInstance>()
+const deleteSignForm = reactive({
+  deleteSignTaskId: undefined,
+  reason: ''
+})
+const deleteSignFormRule = reactive<FormRules<typeof deleteSignForm>>({
+  deleteSignTaskId: [{ required: true, message: '减签人员不能为空', trigger: 'change' }],
+ reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+})
+
+// 退回表单
+const returnFormRef = ref<FormInstance>()
+const returnForm = reactive({
+  targetTaskDefinitionKey: undefined,
+  returnReason: ''
+})
+const returnFormRule = reactive<FormRules<typeof returnForm>>({
+  targetTaskDefinitionKey: [{ required: true, message: '退回节点不能为空', trigger: 'change' }],
+  returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }]
+})
+
+// 取消表单
+const cancelFormRef = ref<FormInstance>()
+const cancelForm = reactive({
+  cancelReason: ''
+})
+const cancelFormRule = reactive<FormRules<typeof cancelForm>>({
+  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
+})
+
+/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
+watch(
+  () => approveFormFApi.value,
+  (val) => {
+    val?.btn?.show(false)
+    val?.resetBtn?.show(false)
+  },
+  {
+    deep: true
+  }
+)
+
+/** 弹出气泡卡 */
+const openPopover = async (type: string) => {
+  if (type === 'approve') {
+    // 校验流程表单
+     const valid = await validateNormalForm();
+     if (!valid) {
+      message.warning('表单校验不通过，请先完善表单!!')
+      return;
+     }
+  }
+  if (type === 'return') {
+    // 获取退回节点
+    returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id)
+    if (returnList.value.length === 0) {
+      message.warning('当前没有可退回的节点')
+      return
+    }
+  }
+  Object.keys(popOverVisible.value).forEach((item) => {
+    popOverVisible.value[item] = item === type
+  })
+  // await nextTick()
+  // formRef.value.resetFields()
+}
+
+/** 关闭气泡卡 */
+const closePropover = (type: string, formRef: FormInstance | undefined) => {
+  if (formRef) {
+    formRef.resetFields()
+  } 
+  popOverVisible.value[type] = false
+}
+
+/** 处理审批通过和不通过的操作 */
+const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) => {
+  formLoading.value = true
+  try {
+    // 校验表单
+    if (!formRef) return
+    await formRef.validate()
+    if (pass) {
+       // 获取修改的流程变量, 暂时只支持流程表单
+       const variables = getUpdatedProcessInstanceVaiables();
+      // 审批通过数据
+      const data = {
+        id: runningTask.value.id,
+        reason: approveReasonForm.reason,
+        variables // 审批通过, 把修改的字段值赋于流程实例变量
+      }
+      // 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
+      // TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
+      const formCreateApi = approveFormFApi.value
+      if (Object.keys(formCreateApi)?.length > 0) {
+        await formCreateApi.validate()
+        // @ts-ignore
+        data.variables = approveForm.value.value
+      }
+      await TaskApi.approveTask(data)
+      popOverVisible.value.approve = false
+      message.success('审批通过成功')
+    } else {
+       // 审批不通过数据
+       const data = {
+        id: runningTask.value.id,
+        reason: rejectReasonForm.reason,
+      }
+      await TaskApi.rejectTask(data)
+      popOverVisible.value.reject = false
+      message.success('审批不通过成功')
+    }
+    // 重置表单
+    formRef.resetFields()
+    // 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理抄送 */
+const handleCopy = async () => {
+  formLoading.value = true
+  try {
+    // 1. 校验表单
+    if (!copyFormRef.value) return
+    await copyFormRef.value.validate()
+    // 2. 提交抄送
+    const data = {
+      id: runningTask.value.id,
+      reason: copyForm.copyReason,
+      copyUserIds:copyForm.copyUserIds
+    }
+    await TaskApi.copyTask(data)
+    copyFormRef.value.resetFields()
+    popOverVisible.value.copy = false
+    message.success('操作成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理转交 */
+const handleTransfer = async () => {
+  formLoading.value = true
+  try {
+    // 1.1 校验表单
+    if (!transferFormRef.value) return
+    await transferFormRef.value.validate()
+    // 1.2 提交转交
+    const data = {
+      id: runningTask.value.id,
+      reason: transferForm.reason,
+      assigneeUserId: transferForm.assigneeUserId
+    }
+    await TaskApi.transferTask(data)
+    transferFormRef.value.resetFields()
+    popOverVisible.value.transfer = false
+    message.success('操作成功')
+    // 2. 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理委派 */
+const handleDelegate = async () => {
+  formLoading.value = true
+  try {
+ 
+    // 1.1 校验表单
+    if (!delegateFormRef.value) return
+    await delegateFormRef.value.validate()
+    // 1.2 处理委派
+    const data = {
+      id: runningTask.value.id,
+      reason: delegateForm.reason,
+      delegateUserId: delegateForm.delegateUserId
+    }
+
+    await TaskApi.delegateTask(data)
+    popOverVisible.value.delegate = false
+    delegateFormRef.value.resetFields()
+    message.success('操作成功')
+    // 2. 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理加签 */
+const handlerAddSign = async (type: string) => {
+  formLoading.value = true
+  try {
+    // 1.1 校验表单
+    if (!addSignFormRef.value) return
+    await addSignFormRef.value.validate()
+    // 1.2 提交加签
+    const data = {
+      id: runningTask.value.id,
+      type,
+      reason: addSignForm.reason,
+      userIds: addSignForm.addSignUserIds
+    }
+    await TaskApi.signCreateTask(data)
+    message.success('操作成功')
+    addSignFormRef.value.resetFields()
+    popOverVisible.value.addSign = false
+    // 2 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理退回 */
+const handleReturn = async () => {
+  formLoading.value = true
+  try {
+    // 1.1 校验表单
+    if (!returnFormRef.value) return
+    await returnFormRef.value.validate()
+    // 1.2 提交退回
+    const data = {
+      id: runningTask.value.id,
+      reason: returnForm.returnReason,
+      targetTaskDefinitionKey: returnForm.targetTaskDefinitionKey
+    }
+
+    await TaskApi.returnTask(data)
+    popOverVisible.value.return = false
+    returnFormRef.value.resetFields()
+    message.success('操作成功')
+    // 2 重新加载数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理取消 */
+const handleCancel = async () => {
+  formLoading.value = true
+  try {
+    // 1.1 校验表单
+    if (!cancelFormRef.value) return
+    await cancelFormRef.value.validate()
+    // 1.2 提交取消
+    await ProcessInstanceApi.cancelProcessInstanceByStartUser(
+      props.processInstance.id,
+      cancelForm.cancelReason
+    )
+    popOverVisible.value.return = false
+    message.success('操作成功')
+    cancelFormRef.value.resetFields()
+    // 2 重新加载数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理再次提交 */
+const handleReCreate = async () => {
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: props.processInstance?.id }
+  })
+}
+
+/** 获取减签人员标签 */
+const getDeleteSignUserLabel = (task: any): string => {
+  const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName
+  const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname
+  return `${nickname} ( 所属部门：${deptName} )`
+}
+/** 处理减签 */
+const handlerDeleteSign = async () => {
+  formLoading.value = true
+  try {
+    // 1.1 校验表单
+    if (!deleteSignFormRef.value) return
+    await deleteSignFormRef.value.validate()
+    // 1.2 提交减签
+    const data = {
+      id: deleteSignForm.deleteSignTaskId,
+      reason: deleteSignForm.reason
+    }
+    await TaskApi.signDeleteTask(data)
+    message.success('减签成功')
+    deleteSignFormRef.value.resetFields()
+    popOverVisible.value.deleteSign = false
+    // 2 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+/** 重新加载数据 */
+const reload = () => {
+  emit('success')
+}
+
+/** 任务是否为处理中状态 */
+const isHandleTaskStatus = () => {
+  let canHandle = false
+  if (TaskApi.TaskStatusEnum.RUNNING === runningTask.value?.status) {
+    canHandle = true
+  }
+  return canHandle
+}
+
+/** 流程状态是否为结束状态 */
+const isEndProcessStatus = (status: number) => {
+  let isEndStatus = false
+  if (
+    BpmProcessInstanceStatus.APPROVE === status ||
+    BpmProcessInstanceStatus.REJECT === status ||
+    BpmProcessInstanceStatus.CANCEL === status
+  ) {
+    isEndStatus = true
+  }
+  return isEndStatus
+}
+
+/** 是否显示按钮 */
+const isShowButton = (btnType: OperationButtonType): boolean => {
+  let isShow = true
+  if (runningTask.value?.buttonsSetting && runningTask.value?.buttonsSetting[btnType]) {
+    isShow = runningTask.value.buttonsSetting[btnType].enable
+  }
+  return isShow
+}
+
+/** 获取按钮的显示名称 */
+const getButtonDisplayName = (btnType: OperationButtonType) => {
+  let displayName = OPERATION_BUTTON_NAME.get(btnType)
+  if (runningTask.value?.buttonsSetting && runningTask.value?.buttonsSetting[btnType]) {
+    displayName = runningTask.value.buttonsSetting[btnType].displayName
+  }
+  return displayName
+}
+
+const loadTodoTask = (task: any) => {
+  approveForm.value = {}
+  approveFormFApi.value = {}
+  runningTask.value = task
+  // 处理 approve 表单.
+  if (task && task.formId && task.formConf) {
+    const tempApproveForm = {}
+    setConfAndFields2(tempApproveForm, task.formConf, task.formFields, task.formVariables)
+    approveForm.value = tempApproveForm
+  } else {
+    approveForm.value = {} // 占位，避免为空
+  }
+}
+
+/** 校验流程表单 */
+const validateNormalForm = async () => {
+  if (props.processDefinition?.formType === BpmModelFormType.NORMAL) {
+    let valid = true
+    try {
+      await props.normalFormApi?.validate()
+    } catch {
+      valid = false;
+    }
+    return valid;
+  } else {
+    return true;
+  }
+}
+/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
+const getUpdatedProcessInstanceVaiables = ()=> {
+  const variables = {}
+  props.writableFields.forEach( (field) => {
+    const fieldValue = props.normalFormApi.getValue(field)
+    variables[field] = fieldValue;
+  })
+  return variables
+}
+
+defineExpose({ loadTodoTask })
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-affix--fixed) {
+  background-color: var(--el-bg-color);
+}
+
+.btn-container {
+  > div {
+    display: flex;
+    margin: 0 8px;
+    cursor: pointer;
+    align-items: center;
+
+    &:hover {
+      color: #6db5ff;
+    }
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
new file mode 100644
index 00000000..0808bec9
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -0,0 +1,168 @@
+<template>
+  <div v-loading="loading" class="process-viewer-container">
+    <SimpleProcessViewer
+      :flow-node="simpleModel"
+      :tasks="tasks"
+      :process-instance="processInstance"
+      class="process-viewer"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
+defineOptions({ name: 'BpmProcessInstanceSimpleViewer' })
+
+const props = defineProps({
+  loading: propTypes.bool.def(false), // 是否加载中
+  modelView: propTypes.object,
+  simpleJson: propTypes.string // Simple 模型结构数据 (json 格式)
+})
+const simpleModel = ref()
+// 用户任务
+const tasks = ref([])
+// 流程实例
+const processInstance = ref()
+
+/** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
+watch(
+  () => props.modelView,
+  async (newModelView) => {
+    if (newModelView) {
+      tasks.value = newModelView.tasks
+      processInstance.value = newModelView.processInstance
+      // 已经拒绝的活动节点编号集合，只包括 UserTask
+      const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
+      // 进行中的活动节点编号集合， 只包括 UserTask
+      const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
+      // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+      const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
+      // 已经完成的连线节点编号集合，只包括 SequenceFlow
+      const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
+      setSimpleModelNodeTaskStatus(
+        newModelView.simpleModel,
+        newModelView.processInstance.status,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds
+      )
+      simpleModel.value = newModelView.simpleModel
+    }
+  }
+)
+/** 监控模型结构数据 */
+watch(
+  () => props.simpleJson,
+  async (value) => {
+    if (value) {
+      simpleModel.value = JSON.parse(value)
+    }
+  }
+)
+const setSimpleModelNodeTaskStatus = (
+  simpleModel: SimpleFlowNode | undefined,
+  processStatus: number,
+  rejectedTaskActivityIds: string[],
+  unfinishedTaskActivityIds: string[],
+  finishedActivityIds: string[],
+  finishedSequenceFlowActivityIds: string[]
+) => {
+  if (!simpleModel) {
+    return
+  }
+  // 结束节点
+  if (simpleModel.type === NodeType.END_EVENT_NODE) {
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = processStatus
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+    return
+  }
+
+  // 审批节点
+  if (
+    simpleModel.type === NodeType.START_USER_NODE ||
+    simpleModel.type === NodeType.USER_TASK_NODE
+  ) {
+    simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    if (rejectedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.REJECT
+    } else if (unfinishedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.RUNNING
+    } else if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    }
+    // TODO 是不是还缺一个 cancel 的状态
+  }
+
+  // 抄送节点
+  if (simpleModel.type === NodeType.COPY_TASK_NODE) {
+    // 抄送节点 只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+  // 条件节点 对应 SequenceFlow
+  if (simpleModel.type === NodeType.CONDITION_NODE) {
+    // 条件节点。只有通过和未执行状态
+    if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+
+  // 网关节点
+  if (
+    simpleModel.type === NodeType.CONDITION_BRANCH_NODE ||
+    simpleModel.type === NodeType.PARALLEL_BRANCH_NODE ||
+    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE
+  ) {
+    // 网关节点。只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+    simpleModel.conditionNodes?.forEach((node) => {
+      setSimpleModelNodeTaskStatus(
+        node,
+        processStatus,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds
+      )
+    })
+  }
+
+  setSimpleModelNodeTaskStatus(
+    simpleModel.childNode,
+    processStatus,
+    rejectedTaskActivityIds,
+    unfinishedTaskActivityIds,
+    finishedActivityIds,
+    finishedSequenceFlowActivityIds
+  )
+}
+</script>
+
+<style lang="scss" scoped>
+.process-viewer-container {
+  height: 100%;
+  width: 100%;
+  
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
index f82e8003..8690e58f 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -1,85 +1,50 @@
 <template>
-  <el-card v-loading="loading" class="box-card">
-    <template #header>
-      <span class="el-icon-picture-outline">审批记录</span>
-    </template>
-    <el-col :offset="3" :span="17">
-      <div class="block">
-        <el-timeline>
-          <el-timeline-item
-            v-if="processInstance.endTime"
-            :type="getProcessInstanceTimelineItemType(processInstance)"
-          >
-            <p style="font-weight: 700">
-              结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
-              <dict-tag
-                :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
-                :value="processInstance.status"
-              />
-            </p>
-          </el-timeline-item>
-          <el-timeline-item
-            v-for="(item, index) in tasks"
-            :key="index"
-            :type="getTaskTimelineItemType(item)"
-          >
-            <p style="font-weight: 700">
-              审批任务：{{ item.name }}
-              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
-              <el-button
-                class="ml-10px"
-                v-if="!isEmpty(item.children)"
-                @click="openChildrenTask(item)"
-                size="small"
-              >
-                <Icon icon="ep:memo" /> 子任务
-              </el-button>
-              <el-button
-                class="ml-10px"
-                size="small"
-                v-if="item.formId > 0"
-                @click="handleFormDetail(item)"
-              >
-                <Icon icon="ep:document" /> 查看表单
-              </el-button>
-            </p>
-            <el-card :body-style="{ padding: '10px' }">
-              <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
-                审批人：{{ item.assigneeUser.nickname }}
-                <el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
-              </label>
-              <label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
-              <label style="font-weight: normal; color: #8a909c">
-                {{ formatDate(item?.createTime) }}
-              </label>
-              <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
-                审批时间：
-              </label>
-              <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
-                {{ formatDate(item?.endTime) }}
-              </label>
-              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
-                耗时：
-              </label>
-              <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
-                {{ formatPast2(item?.durationInMillis) }}
-              </label>
-              <p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item type="success">
-            <p style="font-weight: 700">
-              发起流程：【{{ processInstance.startUser?.nickname }}】在
-              {{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
-            </p>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-    </el-col>
-  </el-card>
+  <el-table :data="tasks" border header-cell-class-name="table-header-gray">
+    <el-table-column label="审批节点" prop="name" min-width="120" align="center" />
+    <el-table-column label="审批人" min-width="100" align="center">
+      <template #default="scope">
+        {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      :formatter="dateFormatter"
+      align="center"
+      label="开始时间"
+      prop="createTime"
+      min-width="140"
+    />
+    <el-table-column
+      :formatter="dateFormatter"
+      align="center"
+      label="结束时间"
+      prop="endTime"
+      min-width="140"
+    />
+    <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="审批建议" prop="reason" min-width="200">
+      <template #default="scope">
+        {{ scope.row.reason }}
+        <el-button
+          class="ml-10px"
+          size="small"
+          v-if="scope.row.formId > 0"
+          @click="handleFormDetail(scope.row)"
+        >
+          <Icon icon="ep:document" /> 查看表单
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100">
+      <template #default="scope">
+        {{ formatPast2(scope.row.durationInMillis) }}
+      </template>
+    </el-table-column>
+  </el-table>
 
-  <!-- 弹窗：子任务  -->
-  <TaskSignList ref="taskSignListRef" @success="refresh" />
   <!-- 弹窗：表单 -->
   <Dialog title="表单详情" v-model="taskFormVisible" width="600">
     <form-create
@@ -91,61 +56,20 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { formatDate, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
 import { DICT_TYPE } from '@/utils/dict'
-import { isEmpty } from '@/utils/is'
-import TaskSignList from './dialog/TaskSignList.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import * as TaskApi from '@/api/bpm/task'
 
 defineOptions({ name: 'BpmProcessInstanceTaskList' })
 
-defineProps({
-  loading: propTypes.bool, // 是否加载中
-  processInstance: propTypes.object, // 流程实例
-  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+const props = defineProps({
+  loading: propTypes.bool.def(false), // 是否加载中
+  id: propTypes.string // 流程实例的编号
 })
-
-/** 获得流程实例对应的颜色 */
-const getProcessInstanceTimelineItemType = (item: any) => {
-  if (item.status === 2) {
-    return 'success'
-  }
-  if (item.status === 3) {
-    return 'danger'
-  }
-  if (item.status === 4) {
-    return 'warning'
-  }
-  return ''
-}
-
-/** 获得任务对应的颜色 */
-const getTaskTimelineItemType = (item: any) => {
-  if ([0, 1, 6, 7].includes(item.status)) {
-    return 'primary'
-  }
-  if (item.status === 2) {
-    return 'success'
-  }
-  if (item.status === 3) {
-    return 'danger'
-  }
-  if (item.status === 4) {
-    return 'info'
-  }
-  if (item.status === 5) {
-    return 'warning'
-  }
-  return ''
-}
-
-/** 子任务 */
-const taskSignListRef = ref()
-const openChildrenTask = (item: any) => {
-  taskSignListRef.value.open(item)
-}
+const tasks = ref([]) // 流程任务的数组
 
 /** 查看表单 */
 const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
@@ -155,7 +79,7 @@ const taskForm = ref({
   value: {}
 }) // 流程任务的表单详情
 const taskFormVisible = ref(false)
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
   // 设置表单
   setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
   // 弹窗打开
@@ -167,9 +91,13 @@ const handleFormDetail = async (row) => {
   fApi.value?.fapi?.disabled(true)
 }
 
-/** 刷新数据 */
-const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
-const refresh = () => {
-  emit('refresh')
-}
+/** 只有 loading 完成时，才去加载流程列表 */
+watch(
+  () => props.loading,
+  async (value) => {
+    if (value) {
+      tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id)
+    }
+  }
+)
 </script>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
new file mode 100644
index 00000000..56b466a9
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -0,0 +1,292 @@
+<!-- 审批详情的右侧：审批流 -->
+<template>
+  <el-timeline class="pt-20px">
+    <!-- 遍历每个审批节点 -->
+    <el-timeline-item
+      v-for="(activity, index) in activityNodes"
+      :key="index"
+      size="large"
+      :icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
+      :color="getApprovalNodeColor(activity.status)"
+    >
+      <template #dot>
+        <div
+          class="position-absolute left--10px top--6px rounded-full border border-solid border-#dedede w-30px h-30px flex justify-center items-center bg-#3f73f7 p-5px"
+        >
+          <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
+          <div
+            v-if="showStatusIcon"
+            class="position-absolute top-17px left-17px rounded-full flex items-center p-1px border-2 border-white border-solid"
+            :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
+          >
+            <el-icon :size="11" color="#fff">
+              <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
+            </el-icon>
+          </div>
+        </div>
+      </template>
+      <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}`">
+        <!-- 第一行：节点名称、时间 -->
+        <div class="flex w-full">
+          <div class="font-bold"> {{ activity.name }}</div>
+          <!-- 信息：时间 -->
+          <div
+            v-if="activity.status !== TaskStatusEnum.NOT_START"
+            class="text-#a5a5a5 text-13px mt-1 ml-auto"
+          >
+            {{ getApprovalNodeTime(activity) }}
+          </div>
+        </div>
+        <!-- 需要自定义选择审批人 -->
+        <div
+          class="flex flex-wrap gap2 items-center"
+          v-if="
+            isEmpty(activity.tasks) &&
+            isEmpty(activity.candidateUsers) &&
+            CandidateStrategy.START_USER_SELECT === activity.candidateStrategy
+          "
+        >
+          <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
+
+          <el-tooltip content="添加用户" placement="left">
+            <el-button
+              class="!px-6px"
+              @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
+            >
+              <img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" />
+            </el-button>
+          </el-tooltip>
+          <div
+            v-for="(user, idx1) in customApproveUsers[activity.id]"
+            :key="idx1"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+          >
+            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar class="!m-5px" :size="28" v-else>
+              {{ user.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ user.nickname }}
+          </div>
+        </div>
+        <div v-else class="flex items-center flex-wrap mt-1 gap2">
+          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
+          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
+            <div
+              class="position-relative flex flex-wrap gap2"
+              v-if="task.assigneeUser || task.ownerUser"
+            >
+              <!-- 信息：头像昵称 -->
+              <div
+                class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+              >
+                <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
+                  <el-avatar
+                    class="!m-5px"
+                    :size="28"
+                    v-if="task.assigneeUser?.avatar"
+                    :src="task.assigneeUser?.avatar"
+                  />
+                  <el-avatar class="!m-5px" :size="28" v-else>
+                    {{ task.assigneeUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.assigneeUser?.nickname }}
+                </template>
+                <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
+                  <el-avatar
+                    class="!m-5px"
+                    :size="28"
+                    v-if="task.ownerUser?.avatar"
+                    :src="task.ownerUser?.avatar"
+                  />
+                  <el-avatar class="!m-5px" :size="28" v-else>
+                    {{ task.ownerUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.ownerUser?.nickname }}
+                </template>
+                <!-- 信息：任务 ICON -->
+                <div
+                  v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
+                  class="position-absolute top-19px left-23px rounded-full flex items-center p-1px border-2 border-white border-solid"
+                  :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
+                >
+                  <Icon :size="11" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
+                </div>
+              </div>
+            </div>
+            <teleport defer :to="`#activity-task-${activity.id}`">
+              <div
+                v-if="
+                  task.reason &&
+                  [NodeType.USER_TASK_NODE, NodeType.END_EVENT_NODE].includes(activity.nodeType)
+                "
+                class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+              >
+                审批意见：{{ task.reason }}
+              </div>
+            </teleport>
+          </div>
+          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
+          <div
+            v-for="(user, idx1) in activity.candidateUsers"
+            :key="idx1"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+          >
+            <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar class="!m-5px" :size="28" v-else>
+              {{ user.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ user.nickname }}
+
+            <!-- 信息：任务 ICON -->
+            <div
+              v-if="showStatusIcon"
+              class="position-absolute top-20px left-24px rounded-full flex items-center p-1px border-2 border-white border-solid"
+              :style="{ backgroundColor: statusIconMap2['-1']?.color }"
+            >
+              <Icon :size="11" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-timeline-item>
+  </el-timeline>
+
+  <!-- 用户选择弹窗 -->
+  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import { NodeType, CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { isEmpty } from '@/utils/is'
+import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
+import starterSvg from '@/assets/svgs/bpm/starter.svg'
+import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
+import copySvg from '@/assets/svgs/bpm/copy.svg'
+import conditionSvg from '@/assets/svgs/bpm/condition.svg'
+import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+import finishSvg from '@/assets/svgs/bpm/finish.svg'
+
+defineOptions({ name: 'BpmProcessInstanceTimeline' })
+withDefaults(
+  defineProps<{
+    activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+    showStatusIcon?: boolean // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true // 默认值为 true
+  }
+)
+
+// 审批节点
+const statusIconMap2 = {
+  // 未开始
+  '-1': { color: '#909398', icon: 'ep-clock' },
+  // 待审批
+  '0': { color: '#00b32a', icon: 'ep:loading' },
+  // 审批中
+  '1': { color: '#448ef7', icon: 'ep:loading' },
+  // 审批通过
+  '2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
+  // 审批不通过
+  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
+  // 取消
+  '4': { color: '#cccccc', icon: 'ep:delete-filled' },
+  // 退回
+  '5': { color: '#f46b6c', icon: 'ep:remove-filled' },
+  // 委派中
+  '6': { color: '#448ef7', icon: 'ep:loading' },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: 'ep:circle-check-filled' }
+}
+
+const statusIconMap = {
+  // 审批未开始
+  '-1': { color: '#909398', icon: Clock },
+  '0': { color: '#00b32a', icon: Clock },
+  // 审批中
+  '1': { color: '#448ef7', icon: Loading },
+  // 审批通过
+  '2': { color: '#00b32a', icon: Check },
+  // 审批不通过
+  '3': { color: '#f46b6c', icon: Close },
+  // 已取消
+  '4': { color: '#cccccc', icon: Delete },
+  // 退回
+  '5': { color: '#f46b6c', icon: Minus },
+  // 委派中
+  '6': { color: '#448ef7', icon: Loading },
+  // 审批通过中
+  '7': { color: '#00b32a', icon: Check }
+}
+
+const nodeTypeSvgMap = {
+  // 结束节点
+  [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
+  // 发起人节点
+  [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
+  // 审批人节点
+  [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
+  // 抄送人节点
+  [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
+  // 条件分支节点
+  [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
+  // 并行分支节点
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
+}
+
+// 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
+const onlyStatusIconShow = [-1, 0, 1]
+
+// timeline时间线上icon图标
+const getApprovalNodeImg = (nodeType: NodeType) => {
+  return nodeTypeSvgMap[nodeType]?.svg
+}
+
+const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
+  if (taskStatus == TaskStatusEnum.NOT_START) {
+    return statusIconMap[taskStatus]?.icon
+  }
+
+  if (
+    nodeType === NodeType.START_USER_NODE ||
+    nodeType === NodeType.USER_TASK_NODE ||
+    nodeType === NodeType.END_EVENT_NODE
+  ) {
+    return statusIconMap[taskStatus]?.icon
+  }
+}
+
+const getApprovalNodeColor = (taskStatus: number) => {
+  return statusIconMap[taskStatus]?.color
+}
+
+const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
+  if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
+    return `${formatDate(node.startTime)}`
+  }
+  if (node.endTime) {
+    return `${formatDate(node.endTime)}`
+  }
+  if (node.startTime) {
+    return `${formatDate(node.startTime)}`
+  }
+}
+
+// 选择自定义审批人
+const userSelectFormRef = ref()
+const handleSelectUser = (activityId, selectedList) => {
+  userSelectFormRef.value.open(activityId, selectedList)
+}
+const emit = defineEmits<{
+  selectUserConfirm: [id: any, userList: any[]]
+}>()
+const customApproveUsers: any = ref({}) // key：activityId，value：用户列表
+// 选择完成
+const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
+  customApproveUsers.value[activityId] = userList || []
+  emit('selectUserConfirm', activityId, userList)
+}
+</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue
deleted file mode 100644
index 178b1b97..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="委派任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="接收人" prop="delegateUserId">
-        <el-select v-model="formData.delegateUserId" clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="委派理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入委派理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'BpmTaskDelegateForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  delegateUserId: undefined,
-  reason: ''
-})
-const formRules = ref({
-  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '委派理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.delegateTask(formData.value)
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    delegateUserId: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
deleted file mode 100644
index a1391697..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="回退任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="退回节点" prop="targetTaskDefinitionKey">
-        <el-select v-model="formData.targetTaskDefinitionKey" clearable style="width: 100%">
-          <el-option
-            v-for="item in returnList"
-            :key="item.taskDefinitionKey"
-            :label="item.name"
-            :value="item.taskDefinitionKey"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="回退理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入回退理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" name="TaskRollbackDialogForm" setup>
-import * as TaskApi from '@/api/bpm/task'
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  targetTaskDefinitionKey: undefined,
-  reason: ''
-})
-const formRules = ref({
-  targetTaskDefinitionKey: [{ required: true, message: '必须选择回退节点', trigger: 'change' }],
-  reason: [{ required: true, message: '回退理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const returnList = ref([] as any)
-/** 打开弹窗 */
-const open = async (id: string) => {
-  returnList.value = await TaskApi.getTaskListByReturn(id)
-  if (returnList.value.length === 0) {
-    message.warning('当前没有可回退的节点')
-    return false
-  }
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.returnTask(formData.value)
-    message.success('回退成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    targetTaskDefinitionKey: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue
deleted file mode 100644
index 9e4998c1..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="加签" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="加签处理人" prop="userIds">
-        <el-select v-model="formData.userIds" multiple clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="加签理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入加签理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm('before')">
-        向前加签
-      </el-button>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm('after')">
-        向后加签
-      </el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'TaskSignCreateForm' })
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  userIds: [],
-  type: '',
-  reason: ''
-})
-const formRules = ref({
-  userIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '加签理由不能为空', trigger: 'change' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async (type: string) => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  formData.value.type = type
-  try {
-    await TaskApi.signCreateTask(formData.value)
-    message.success('加签成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    userIds: [],
-    type: '',
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
deleted file mode 100644
index 19bb2dce..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="减签" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="减签任务" prop="id">
-        <el-radio-group v-model="formData.id">
-          <el-radio-button v-for="item in childrenTaskList" :key="item.id" :label="item.id">
-            {{ item.name }}
-            ({{ item.assigneeUser?.deptName || item.ownerUser?.deptName }} -
-            {{ item.assigneeUser?.nickname || item.ownerUser?.nickname }})
-          </el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="减签理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入减签理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import { isEmpty } from '@/utils/is'
-
-defineOptions({ name: 'TaskSignDeleteForm' })
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  reason: ''
-})
-const formRules = ref({
-  id: [{ required: true, message: '必须选择减签任务', trigger: 'change' }],
-  reason: [{ required: true, message: '减签理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const childrenTaskList = ref([])
-/** 打开弹窗 */
-const open = async (id: string) => {
-  childrenTaskList.value = await TaskApi.getChildrenTaskList(id)
-  if (isEmpty(childrenTaskList.value)) {
-    message.warning('当前没有可减签的任务')
-    return false
-  }
-  dialogVisible.value = true
-  resetForm()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.signDeleteTask(formData.value)
-    message.success('减签成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
deleted file mode 100644
index 648e86b5..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <el-drawer v-model="drawerVisible" title="子任务" size="880px">
-    <!-- 当前任务 -->
-    <template #header>
-      <h4>【{{ parentTask.name }} 】审批人：{{ parentTask?.assigneeUser?.nickname }}</h4>
-      <el-button
-        style="margin-left: 5px"
-        v-if="isSignDeleteButtonVisible(parentTask)"
-        type="danger"
-        plain
-        @click="handleSignDelete(parentTask)"
-      >
-        <Icon icon="ep:remove" /> 减签
-      </el-button>
-    </template>
-    <!-- 子任务列表 -->
-    <el-table :data="parentTask.children" style="width: 100%" row-key="id" border>
-      <el-table-column prop="assigneeUser.nickname" label="审批人" min-width="100">
-        <template #default="scope">
-          {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="assigneeUser.deptName" label="所在部门" min-width="100">
-        <template #default="scope">
-          {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
-        </template>
-      </el-table-column>
-      <el-table-column label="审批状态" prop="status" width="120">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="提交时间"
-        align="center"
-        prop="createTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column
-        label="结束时间"
-        align="center"
-        prop="endTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="操作" prop="operation" width="90">
-        <template #default="scope">
-          <el-button
-            v-if="isSignDeleteButtonVisible(scope.row)"
-            type="danger"
-            plain
-            size="small"
-            @click="handleSignDelete(scope.row)"
-          >
-            <Icon icon="ep:remove" /> 减签
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 减签 -->
-    <TaskSignDeleteForm ref="taskSignDeleteFormRef" @success="handleSignDeleteSuccess" />
-  </el-drawer>
-</template>
-<script lang="ts" setup>
-import { isEmpty } from '@/utils/is'
-import { DICT_TYPE } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
-import TaskSignDeleteForm from './TaskSignDeleteForm.vue'
-
-defineOptions({ name: 'TaskSignList' })
-
-const message = useMessage() // 消息弹窗
-const drawerVisible = ref(false) // 抽屉的是否展示
-const parentTask = ref({} as any)
-
-/** 打开弹窗 */
-const open = async (task: any) => {
-  if (isEmpty(task.children)) {
-    message.warning('该任务没有子任务')
-    return
-  }
-  parentTask.value = task
-  // 展开抽屉
-  drawerVisible.value = true
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 发起减签 */
-const taskSignDeleteFormRef = ref()
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const handleSignDelete = (item: any) => {
-  taskSignDeleteFormRef.value.open(item.id)
-}
-const handleSignDeleteSuccess = () => {
-  emit('success')
-  // 关闭抽屉
-  drawerVisible.value = false
-}
-
-/** 是否显示减签按钮 */
-const isSignDeleteButtonVisible = (task: any) => {
-  return task && task.children && !isEmpty(task.children)
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue
deleted file mode 100644
index c1012ac9..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="转派任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="新审批人" prop="assigneeUserId">
-        <el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="转派理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入转派理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'TaskTransferForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  assigneeUserId: undefined,
-  reason: ''
-})
-const formRules = ref({
-  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '转派理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.transferTask(formData.value)
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    assigneeUserId: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index f3072e56..9809f7a8 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -1,174 +1,170 @@
 <template>
-  <ContentWrap>
-    <!-- 审批信息 -->
-    <el-card
-      v-for="(item, index) in runningTasks"
-      :key="index"
-      v-loading="processInstanceLoading"
-      class="box-card"
-    >
-      <template #header>
-        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
-      </template>
-      <el-col :offset="6" :span="16">
-        <el-form
-          :ref="'form' + index"
-          :model="auditForms[index]"
-          :rules="auditRule"
-          label-width="100px"
-        >
-          <el-form-item v-if="processInstance && processInstance.name" label="流程名">
-            {{ processInstance.name }}
-          </el-form-item>
-          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-            {{ processInstance?.startUser.nickname }}
-            <el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag>
-          </el-form-item>
-          <el-card v-if="runningTasks[index].formId > 0" class="mb-15px !-mt-10px">
-            <template #header>
-              <span class="el-icon-picture-outline">
-                填写表单【{{ runningTasks[index]?.formName }}】
-              </span>
-            </template>
-            <form-create
-              v-model="approveForms[index].value"
-              v-model:api="approveFormFApis[index]"
-              :option="approveForms[index].option"
-              :rule="approveForms[index].rule"
-            />
-          </el-card>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input
-              v-model="auditForms[index].reason"
-              placeholder="请输入审批建议"
-              type="textarea"
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }" class="position-relative">
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
+        <img
+          class="position-absolute right-20px"
+          width="150"
+          :src="auditIconsMap[processInstance.status]"
+          alt=""
+        />
+        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
+        <el-divider class="!my-8px" />
+        <div class="flex items-center gap-5 mb-10px h-40px">
+          <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
+          <dict-tag
+            v-if="processInstance.status"
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="processInstance.status"
+          />
+        </div>
+
+        <div class="flex items-center gap-5 mb-10px text-13px h-35px">
+          <div
+            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
+          >
+            <el-avatar
+              :size="28"
+              v-if="processInstance?.startUser?.avatar"
+              :src="processInstance?.startUser?.avatar"
             />
-          </el-form-item>
-          <el-form-item label="抄送人" prop="copyUserIds">
-            <el-select v-model="auditForms[index].copyUserIds" multiple placeholder="请选择抄送人">
-              <el-option
-                v-for="item in userOptions"
-                :key="item.id"
-                :label="item.nickname"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-form>
-        <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
-          <el-button type="success" @click="handleAudit(item, true)">
-            <Icon icon="ep:select" />
-            通过
-          </el-button>
-          <el-button type="danger" @click="handleAudit(item, false)">
-            <Icon icon="ep:close" />
-            不通过
-          </el-button>
-          <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
-            <Icon icon="ep:edit" />
-            转办
-          </el-button>
-          <el-button type="primary" @click="handleDelegate(item)">
-            <Icon icon="ep:position" />
-            委派
-          </el-button>
-          <el-button type="primary" @click="handleSign(item)">
-            <Icon icon="ep:plus" />
-            加签
-          </el-button>
-          <el-button type="warning" @click="handleBack(item)">
-            <Icon icon="ep:back" />
-            回退
-          </el-button>
+            <el-avatar :size="28" v-else-if="processInstance?.startUser?.nickname">
+              {{ processInstance?.startUser?.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ processInstance?.startUser?.nickname }}
+          </div>
+          <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
         </div>
-      </el-col>
-    </el-card>
 
-    <!-- 申请信息 -->
-    <el-card v-loading="processInstanceLoading" class="box-card">
-      <template #header>
-        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
-      </template>
-      <!-- 情况一：流程表单 -->
-      <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
-        <form-create
-          v-model="detailForm.value"
-          v-model:api="fApi"
-          :option="detailForm.option"
-          :rule="detailForm.rule"
-        />
-      </el-col>
-      <!-- 情况二：业务表单 -->
-      <div v-if="processInstance?.processDefinition?.formType === 20">
-        <BusinessFormComponent :id="processInstance.businessKey" />
-      </div>
-    </el-card>
+        <el-tabs v-model="activeTab">
+          <!-- 表单信息 -->
+          <el-tab-pane label="审批详情" name="form">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <el-row>
+                  <el-col :span="17" class="!flex !flex-col formCol">
+                    <!-- 表单信息 -->
+                    <div
+                      v-loading="processInstanceLoading"
+                      class="form-box flex flex-col mb-30px flex-1"
+                    >
+                      <!-- 情况一：流程表单 -->
+                      <el-col v-if="processDefinition?.formType === BpmModelFormType.NORMAL">
+                        <form-create
+                          v-model="detailForm.value"
+                          v-model:api="fApi"
+                          :option="detailForm.option"
+                          :rule="detailForm.rule"
+                        />
+                      </el-col>
+                      <!-- 情况二：业务表单 -->
+                      <div v-if="processDefinition?.formType === BpmModelFormType.CUSTOM">
+                        <BusinessFormComponent :id="processInstance.businessKey" />
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="7">
+                    <!-- 审批记录时间线 -->
+                    <ProcessInstanceTimeline :activity-nodes="activityNodes" />
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
 
-    <!-- 审批记录 -->
-    <ProcessInstanceTaskList
-      :loading="tasksLoad"
-      :process-instance="processInstance"
-      :tasks="tasks"
-      @refresh="getTaskList"
-    />
+          <!-- 流程图 -->
+          <el-tab-pane label="流程图" name="diagram">
+            <div class="form-scroll-area">
+              <ProcessInstanceSimpleViewer
+                v-show="
+                  processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
+              <ProcessInstanceBpmnViewer
+                v-show="
+                  processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
+            </div>
+          </el-tab-pane>
 
-    <!-- 高亮流程图 -->
-    <ProcessInstanceBpmnViewer
-      :id="`${id}`"
-      :bpmn-xml="bpmnXml"
-      :loading="processInstanceLoading"
-      :process-instance="processInstance"
-      :tasks="tasks"
-    />
+          <!-- 流转记录 -->
+          <el-tab-pane label="流转记录" name="record">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <ProcessInstanceTaskList :loading="processInstanceLoading" :id="id" />
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
 
-    <!-- 弹窗：转派审批人 -->
-    <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
-    <!-- 弹窗：回退节点 -->
-    <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
-    <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
-    <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-    <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
+          <!-- 流转评论 TODO 待开发 -->
+          <el-tab-pane label="流转评论" name="comment" v-if="false">
+            <div class="form-scroll-area">
+              <el-scrollbar> 流转评论 </el-scrollbar>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
+          <!-- 操作栏按钮 -->
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :userOptions="userOptions"
+            :normal-form="detailForm"
+            :normal-form-api="fApi"
+            :writable-fields="writableFields"
+            @success="refresh"
+          />
+        </div>
+      </el-scrollbar>
+    </div>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { useUserStore } from '@/store/modules/user'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
+import { BpmModelType, BpmModelFormType } from '@/utils/constants'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { registerComponent } from '@/utils/routerHelper'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
-import TaskReturnForm from './dialog/TaskReturnForm.vue'
-import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
-import TaskTransferForm from './dialog/TaskTransferForm.vue'
-import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
-import { registerComponent } from '@/utils/routerHelper'
-import { isEmpty } from '@/utils/is'
-import * as UserApi from '@/api/system/user'
+import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
+import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
+import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import runningSvg from '@/assets/svgs/bpm/running.svg'
+import approveSvg from '@/assets/svgs/bpm/approve.svg'
+import rejectSvg from '@/assets/svgs/bpm/reject.svg'
+import cancelSvg from '@/assets/svgs/bpm/cancel.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
-
-const { query } = useRoute() // 查询参数
+const props = defineProps<{
+  id: string // 流程实例的编号
+  taskId?: string // 任务编号
+  activityId?: string //流程活动编号，用于抄送查看
+}>()
 const message = useMessage() // 消息弹窗
-const { proxy } = getCurrentInstance() as any
-
-const userId = useUserStore().getUser.id // 当前登录的编号
-const id = query.id as unknown as string // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
-const bpmnXml = ref('') // BPMN XML
-const tasksLoad = ref(true) // 任务的加载中
-const tasks = ref<any[]>([]) // 任务列表
-// ========== 审批信息 ==========
-const runningTasks = ref<any[]>([]) // 运行中的任务
-const auditForms = ref<any[]>([]) // 审批任务的表单
-const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
-})
-const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
-const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
+const processDefinition = ref<any>({}) // 流程定义
+const processModelView = ref<any>({}) // 流程模型视图
+const operationButtonRef = ref() // 操作按钮组件 ref
+const auditIconsMap = {
+  [TaskStatusEnum.RUNNING]: runningSvg,
+  [TaskStatusEnum.APPROVE]: approveSvg,
+  [TaskStatusEnum.REJECT]: rejectSvg,
+  [TaskStatusEnum.CANCEL]: cancelSvg
+}
 
 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
@@ -178,199 +174,129 @@ const detailForm = ref({
   value: {}
 }) // 流程实例的表单详情
 
-/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
-watch(
-  () => approveFormFApis.value,
-  (value) => {
-    value?.forEach((api) => {
-      api.btn.show(false)
-      api.resetBtn.show(false)
-    })
-  },
-  {
-    deep: true
-  }
-)
-
-/** 处理审批通过和不通过的操作 */
-const handleAudit = async (task, pass) => {
-  // 1.1 获得对应表单
-  const index = runningTasks.value.indexOf(task)
-  const auditFormRef = proxy.$refs['form' + index][0]
-  // 1.2 校验表单
-  const elForm = unref(auditFormRef)
-  if (!elForm) return
-  const valid = await elForm.validate()
-  if (!valid) return
-
-  // 2.1 提交审批
-  const data = {
-    id: task.id,
-    reason: auditForms.value[index].reason,
-    copyUserIds: auditForms.value[index].copyUserIds
-  }
-  if (pass) {
-    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
-    const formCreateApi = approveFormFApis.value[index]
-    if (formCreateApi) {
-      await formCreateApi.validate()
-      data.variables = approveForms.value[index].value
-    }
-    await TaskApi.approveTask(data)
-    message.success('审批通过成功')
-  } else {
-    await TaskApi.rejectTask(data)
-    message.success('审批不通过成功')
-  }
-  // 2.2 加载最新数据
-  getDetail()
-}
-
-/** 转派审批人 */
-const taskTransferFormRef = ref()
-const openTaskUpdateAssigneeForm = (id: string) => {
-  taskTransferFormRef.value.open(id)
-}
-
-/** 处理审批退回的操作 */
-const taskDelegateForm = ref()
-const handleDelegate = async (task) => {
-  taskDelegateForm.value.open(task.id)
-}
-
-/** 处理审批退回的操作 */
-const taskReturnFormRef = ref()
-const handleBack = async (task: any) => {
-  taskReturnFormRef.value.open(task.id)
-}
-
-/** 处理审批加签的操作 */
-const taskSignCreateFormRef = ref()
-const handleSign = async (task: any) => {
-  taskSignCreateFormRef.value.open(task.id)
-}
+const writableFields: Array<string> = [] // 表单可以编辑的字段
 
 /** 获得详情 */
 const getDetail = () => {
-  // 1. 获得流程实例相关
-  getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
-  getTaskList()
+  getApprovalDetail()
+
+  getProcessModelView()
 }
 
 /** 加载流程实例 */
-const BusinessFormComponent = ref(null) // 异步组件
-const getProcessInstance = async () => {
+const BusinessFormComponent = ref<any>(null) // 异步组件
+/** 获取审批详情 */
+const getApprovalDetail = async () => {
+  processInstanceLoading.value = true
   try {
-    processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(id)
+    const param = {
+      processInstanceId: props.id,
+      activityId: props.activityId,
+      taskId: props.taskId
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param)
     if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    if (!data.processDefinition || !data.processInstance) {
       message.error('查询不到流程信息！')
       return
     }
-    processInstance.value = data
+    processInstance.value = data.processInstance
+    processDefinition.value = data.processDefinition
 
     // 设置表单信息
-    const processDefinition = data.processDefinition
-    if (processDefinition.formType === 10) {
-      setConfAndFields2(
-        detailForm,
-        processDefinition.formConf,
-        processDefinition.formFields,
-        data.formVariables
-      )
+    if (processDefinition.value.formType === BpmModelFormType.NORMAL) {
+      // 获取表单字段权限
+      const formFieldsPermission = data.formFieldsPermission
+      // 清空可编辑字段为空
+      writableFields.splice(0)
+      if (detailForm.value.rule?.length > 0) {
+        // 避免刷新 form-create 显示不了
+        detailForm.value.value = processInstance.value.formVariables
+      } else {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.value.formConf,
+          processDefinition.value.formFields,
+          processInstance.value.formVariables
+        )
+      }
       nextTick().then(() => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
+        //@ts-ignore
         fApi.value?.disabled(true)
+        // 设置表单字段权限
+        if (formFieldsPermission) {
+          Object.keys(data.formFieldsPermission).forEach((item) => {
+            setFieldPermission(item, formFieldsPermission[item])
+          })
+        }
       })
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
       BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
 
-    // 加载流程图
-    bpmnXml.value = (
-      await DefinitionApi.getProcessDefinition(processDefinition.id as number)
-    )?.bpmnXml
+    // 获取审批节点，显示 Timeline 的数据
+    activityNodes.value = data.activityNodes
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask)
   } finally {
     processInstanceLoading.value = false
   }
 }
 
-/** 加载任务列表 */
-const getTaskList = async () => {
-  runningTasks.value = []
-  auditForms.value = []
-  approveForms.value = []
-  approveFormFApis.value = []
-  try {
-    // 获得未取消的任务
-    tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(id)
-    tasks.value = []
-    // 1.1 移除已取消的审批
-    data.forEach((task) => {
-      if (task.status !== 4) {
-        tasks.value.push(task)
-      }
-    })
-    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
-    tasks.value.sort((a, b) => {
-      // 有已完成的情况，按照完成时间倒序
-      if (a.endTime && b.endTime) {
-        return b.endTime - a.endTime
-      } else if (a.endTime) {
-        return 1
-      } else if (b.endTime) {
-        return -1
-        // 都是未完成，按照创建时间倒序
-      } else {
-        return b.createTime - a.createTime
-      }
-    })
-
-    // 获得需要自己审批的任务
-    loadRunningTask(tasks.value)
-  } finally {
-    tasksLoad.value = false
+/** 获取流程模型视图*/
+const getProcessModelView = async () => {
+  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
+    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
+    processModelView.value = {
+      bpmnXml: ''
+    }
+  }
+  const data = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+  if (data) {
+    processModelView.value = data
   }
 }
 
+// 审批节点信息
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 /**
- * 设置 runningTasks 中的任务
+ * 设置表单权限
  */
-const loadRunningTask = (tasks) => {
-  tasks.forEach((task) => {
-    if (!isEmpty(task.children)) {
-      loadRunningTask(task.children)
-    }
-    // 2.1 只有待处理才需要
-    if (task.status !== 1 && task.status !== 6) {
-      return
-    }
-    // 2.2 自己不是处理人
-    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-      return
-    }
-    // 2.3 添加到处理任务
-    runningTasks.value.push({ ...task })
-    auditForms.value.push({
-      reason: '',
-      copyUserIds: []
-    })
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === FieldPermissionType.READ) {
+    //@ts-ignore
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === FieldPermissionType.WRITE) {
+    //@ts-ignore
+    fApi.value?.disabled(false, field)
+    // 加入可以编辑的字段
+    writableFields.push(field)
+  }
+  if (permission === FieldPermissionType.NONE) {
+    //@ts-ignore
+    fApi.value?.hidden(true, field)
+  }
+}
 
-    // 2.4 处理 approve 表单
-    if (task.formId && task.formConf) {
-      const approveForm = {}
-      setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariable)
-      approveForms.value.push(approveForm)
-    } else {
-      approveForms.value.push({}) // 占位，避免为空
-    }
-  })
+/**
+ * 操作成功后刷新
+ */
+const refresh = () => {
+  // 重新获取详情
+  getDetail()
 }
 
+/** 当前的Tab */
+const activeTab = ref('form')
+
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {
@@ -379,3 +305,50 @@ onMounted(async () => {
   userOptions.value = await UserApi.getSimpleUserList()
 })
 </script>
+
+<style lang="scss" scoped>
+$wrap-padding-height: 20px;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 194px;
+
+.processInstance-wrap-main {
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  overflow: auto;
+
+  .form-scroll-area {
+    display: flex;
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    overflow: auto;
+    flex-direction: column;
+
+    :deep(.box-card) {
+      height: 100%;
+      flex: 1;
+
+      .el-card__body {
+        height: 100%;
+        padding: 0;
+      }
+    }
+  }
+}
+
+.form-box {
+  :deep(.el-card) {
+    border: none;
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 018a4a98..a47b8bf7 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -10,7 +10,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="流程名称" prop="name">
+      <el-form-item label="" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入流程名称"
@@ -19,21 +19,20 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="所属流程" prop="processDefinitionId">
-        <el-input
-          v-model="queryParams.processDefinitionId"
-          placeholder="请输入流程定义的编号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
       </el-form-item>
-      <el-form-item label="流程分类" prop="category">
+
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
+      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
+        <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 RE:done & to check-->
         <el-select
           v-model="queryParams.category"
           placeholder="请选择流程分类"
           clearable
-          class="!w-240px"
+          class="!w-155px"
+          @change="handleQuery"
         >
           <el-option
             v-for="category in categoryList"
@@ -43,12 +42,14 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="流程状态" prop="status">
+
+      <el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
         <el-select
           v-model="queryParams.status"
           placeholder="请选择流程状态"
           clearable
-          class="!w-240px"
+          class="!w-155px"
+          @change="handleQuery"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
@@ -58,28 +59,69 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="发起时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          v-hasPermi="['bpm:process-instance:query']"
-          @click="handleCreate()"
+
+      <!-- 高级筛选 -->
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
+      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+        <el-popover
+          :visible="showPopover"
+          persistent
+          :width="400"
+          :show-arrow="false"
+          placement="bottom-end"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
-        </el-button>
+          <template #reference>
+            <el-button @click="showPopover = !showPopover">
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选
+            </el-button>
+          </template>
+          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+            <el-select
+              v-model="queryParams.category"
+              placeholder="请选择流程发起人"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="category in categoryList"
+                :key="category.code"
+                :label="category.name"
+                :value="category.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="所属流程"
+            class="bold-label"
+            label-position="top"
+            prop="processDefinitionKey"
+          >
+            <el-input
+              v-model="queryParams.processDefinitionKey"
+              placeholder="请输入流程定义的标识"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-390px"
+            />
+          </el-form-item>
+          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <!-- TODO tuituiji：参考钉钉，1）按照清空、取消、确认排序。2）右对齐。3）确认增加 primary -->
+          <el-form-item class="bold-label" label-position="top">
+            <el-button @click="handleQuery"> 确认</el-button>
+            <el-button @click="showPopover = false"> 取消</el-button>
+            <el-button @click="resetQuery"> 清空</el-button>
+          </el-form-item>
+        </el-popover>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -95,6 +137,8 @@
         min-width="100"
         fixed="left"
       />
+      <!-- TODO @芋艿：摘要 -->
+      <!-- TODO tuituiji：参考钉钉；1）审批中时，展示审批任务；2）非审批中，展示状态 -->
       <el-table-column label="流程状态" prop="status" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
@@ -114,7 +158,7 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
+      <!--<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
         <template #default="scope">
           {{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
         </template>
@@ -126,7 +170,7 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />
+      -->
       <el-table-column label="操作" align="center" fixed="right" width="180">
         <template #default="scope">
           <el-button
@@ -146,7 +190,7 @@
           >
             取消
           </el-button>
-          <el-button link type="primary" v-else @click="handleCreate(scope.row.id)">
+          <el-button link type="primary" v-else @click="handleCreate(scope.row)">
             重新发起
           </el-button>
         </template>
@@ -162,11 +206,14 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
+// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。 RE:done & to check
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import { ProcessInstanceVO } from '@/api/bpm/processInstance'
+import * as DefinitionApi from '@/api/bpm/definition'
 
 defineOptions({ name: 'BpmProcessInstanceMy' })
 
@@ -181,13 +228,13 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: '',
-  processDefinitionId: undefined,
+  processDefinitionKey: undefined,
   category: undefined,
   status: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -201,6 +248,8 @@ const getList = async () => {
   }
 }
 
+const showPopover = ref(false)
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -214,15 +263,26 @@ const resetQuery = () => {
 }
 
 /** 发起流程操作 **/
-const handleCreate = (id) => {
-  router.push({
+const handleCreate = async (row?: ProcessInstanceVO) => {
+  // 如果是【业务表单】，不支持重新发起
+  if (row?.id) {
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
+      row.processDefinitionId
+    )
+    if (processDefinitionDetail.formType === 20) {
+      message.error('重新发起流程失败，原因：该流程使用业务表单，不支持重新发起')
+      return
+    }
+  }
+  // 跳转发起流程界面
+  await router.push({
     name: 'BpmProcessInstanceCreate',
-    query: { processInstanceId: id }
+    query: { processInstanceId: row?.id }
   })
 }
 
 /** 查看详情 */
-const handleDetail = (row) => {
+const handleDetail = (row: ProcessInstanceVO) => {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
@@ -232,7 +292,7 @@ const handleDetail = (row) => {
 }
 
 /** 取消按钮操作 */
-const handleCancel = async (row) => {
+const handleCancel = async (row: ProcessInstanceVO) => {
   // 二次确认
   const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
     confirmButtonText: t('common.ok'),
@@ -258,3 +318,8 @@ onMounted(async () => {
   categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
+<style>
+.bold-label .el-form-item__label {
+  font-weight: bold; /* 将字体加粗 */
+}
+</style>
diff --git a/src/views/bpm/processInstance/manager/index.vue b/src/views/bpm/processInstance/manager/index.vue
index 38c6d5ad..21e3a9ea 100644
--- a/src/views/bpm/processInstance/manager/index.vue
+++ b/src/views/bpm/processInstance/manager/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -76,9 +76,13 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
+          class="!w-240px"
         />
       </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
     </el-form>
   </ContentWrap>
 
diff --git a/src/views/bpm/processListener/ProcessListenerForm.vue b/src/views/bpm/processListener/ProcessListenerForm.vue
index 8d4e9796..a9684dff 100644
--- a/src/views/bpm/processListener/ProcessListenerForm.vue
+++ b/src/views/bpm/processListener/ProcessListenerForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/bpm/processListener/index.vue b/src/views/bpm/processListener/index.vue
index d9668177..8b5c36e7 100644
--- a/src/views/bpm/processListener/index.vue
+++ b/src/views/bpm/processListener/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="执行监听器、任务监听器" url="https://doc.iocoder.cn/bpm/listener/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/bpm/simple/SimpleModelDesign.vue b/src/views/bpm/simple/SimpleModelDesign.vue
new file mode 100644
index 00000000..1740e03f
--- /dev/null
+++ b/src/views/bpm/simple/SimpleModelDesign.vue
@@ -0,0 +1,19 @@
+<template>
+  <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
+    <SimpleProcessDesigner :model-id="modelId" @success="close" />
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
+
+defineOptions({
+  name: 'SimpleModelDesign'
+})
+const router = useRouter() // 路由
+const { query } = useRoute() // 路由的查询
+const modelId = query.modelId as string
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
deleted file mode 100644
index 144615e0..00000000
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div>
-    <section class="dingflow-design">
-      <div class="box-scale">
-        <nodeWrap v-model:nodeConfig="nodeConfig" />
-        <div class="end-node">
-          <div class="end-node-circle"></div>
-          <div class="end-node-text">流程结束</div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts" setup>
-import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
-defineOptions({ name: 'SimpleWorkflowDesignEditor' })
-let nodeConfig = ref({
-  nodeName: '发起人',
-  type: 0,
-  id: 'root',
-  formPerms: {},
-  nodeUserList: [],
-  childNode: {}
-})
-</script>
-<style>
-@import url('@/components/SimpleProcessDesigner/theme/workflow.css');
-</style>
\ No newline at end of file
diff --git a/src/views/bpm/task/copy/index.vue b/src/views/bpm/task/copy/index.vue
index b61ab101..f32a52a5 100644
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@@ -1,5 +1,9 @@
 <!-- 工作流 - 抄送我的流程 -->
 <template>
+  <doc-alert
+    title="审批转办、委派、抄送"
+    url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+  />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -7,6 +11,7 @@
       <el-form-item label="流程名称" prop="name">
         <el-input
           v-model="queryParams.processInstanceName"
+          @keyup.enter="handleQuery"
           class="!w-240px"
           clearable
           placeholder="请输入流程名称"
@@ -40,7 +45,12 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column align="center" label="流程名" prop="processInstanceName" min-width="180" />
-      <el-table-column align="center" label="流程发起人" prop="startUserName" min-width="100" />
+      <el-table-column
+        align="center"
+        label="流程发起人"
+        prop="startUser.nickname"
+        min-width="100"
+      />
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -48,8 +58,11 @@
         prop="processInstanceStartTime"
         width="180"
       />
-      <el-table-column align="center" label="抄送任务" prop="taskName" min-width="180" />
-      <el-table-column align="center" label="抄送人" prop="creatorName" min-width="100" />
+      <el-table-column align="center" label="抄送节点" prop="activityName" min-width="180" />
+      <el-table-column align="center" label="抄送人" min-width="100">
+        <template #default="scope"> {{ scope.row.createUser?.nickname || '系统' }} </template>
+      </el-table-column>
+      <el-table-column align="center" label="抄送意见" prop="reason" width="150" />
       <el-table-column
         align="center"
         label="抄送时间"
@@ -106,11 +119,16 @@ const getList = async () => {
 
 /** 处理审批按钮 */
 const handleAudit = (row: any) => {
+  const query = {
+    id: row.processInstanceId,
+    activityId: undefined
+  }
+  if (row.activityId) {
+    query.activityId = row.activityId
+  }
   push({
     name: 'BpmProcessInstanceDetail',
-    query: {
-      id: row.processInstanceId
-    }
+    query: query
   })
 }
 
diff --git a/src/views/bpm/task/done/index.vue b/src/views/bpm/task/done/index.vue
index 1f6f1e86..4d9cbd58 100644
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -1,5 +1,11 @@
 <template>
-
+  <doc-alert title="审批通过、不通过、驳回" url="https://doc.iocoder.cn/bpm/task-todo-done/" />
+  <doc-alert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+  <doc-alert
+    title="审批转办、委派、抄送"
+    url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+  />
+  <doc-alert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -10,7 +16,7 @@
       class="-mb-15px"
       label-width="68px"
     >
-      <el-form-item label="任务名称" prop="name">
+      <el-form-item label="" prop="name">
         <el-input
           v-model="queryParams.name"
           class="!w-240px"
@@ -19,27 +25,96 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-          end-placeholder="结束日期"
-          start-placeholder="开始日期"
-          type="daterange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon class="mr-5px" icon="ep:search" />
           搜索
         </el-button>
-        <el-button @click="resetQuery">
-          <Icon class="mr-5px" icon="ep:refresh" />
-          重置
-        </el-button>
       </el-form-item>
+
+      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-155px"
+          @change="handleQuery"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择流程状态"
+          clearable
+          class="!w-155px"
+          @change="handleQuery"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item> 
+
+      <!-- 高级筛选 -->
+      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+        <el-popover
+          :visible="showPopover"
+          persistent
+          :width="400"
+          :show-arrow="false"
+          placement="bottom-end"
+        >
+          <template #reference>
+            <el-button @click="showPopover = !showPopover" >
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+            </el-button>
+            
+          </template>
+          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+            <el-select
+              v-model="queryParams.category"
+              placeholder="请选择流程发起人"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="category in categoryList"
+                :key="category.code"
+                :label="category.name"
+                :value="category.code"
+              />
+            </el-select>
+          </el-form-item>          
+          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item class="bold-label" label-position="top">
+            <el-button @click="handleQuery"> 确认</el-button>
+            <el-button @click="showPopover = false"> 取消</el-button>
+            <el-button @click="resetQuery"> 清空</el-button>
+        </el-form-item>
+        </el-popover>
+      </el-form-item>
+
     </el-form>
   </ContentWrap>
 
@@ -104,9 +179,10 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { DICT_TYPE } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import * as TaskApi from '@/api/bpm/task'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 
 defineOptions({ name: 'BpmTodoTask' })
 
@@ -119,9 +195,13 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: '',
+  category: undefined,  
+  status: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
+const showPopover = ref(false)
 
 /** 查询任务列表 */
 const getList = async () => {
@@ -152,13 +232,15 @@ const handleAudit = (row: any) => {
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
     }
   })
 }
 
 /** 初始化 **/
-onMounted(() => {
-  getList()
+onMounted(async () => {
+  await getList()
+  categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
diff --git a/src/views/bpm/task/manager/index.vue b/src/views/bpm/task/manager/index.vue
index d42bd29e..688e5150 100644
--- a/src/views/bpm/task/manager/index.vue
+++ b/src/views/bpm/task/manager/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/bpm/task/todo/index.vue b/src/views/bpm/task/todo/index.vue
index beca15dc..32129376 100644
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@@ -1,5 +1,11 @@
 <template>
-
+  <doc-alert title="审批通过、不通过、驳回" url="https://doc.iocoder.cn/bpm/task-todo-done/" />
+  <doc-alert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+  <doc-alert
+    title="审批转办、委派、抄送"
+    url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+  />
+  <doc-alert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -10,7 +16,7 @@
       class="-mb-15px"
       label-width="68px"
     >
-      <el-form-item label="任务名称" prop="name">
+      <el-form-item label="" prop="name">
         <el-input
           v-model="queryParams.name"
           class="!w-240px"
@@ -19,27 +25,79 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-          end-placeholder="结束日期"
-          start-placeholder="开始日期"
-          type="daterange"
-          value-format="YYYY-MM-DD HH:mm:ss"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon class="mr-5px" icon="ep:search" />
           搜索
         </el-button>
-        <el-button @click="resetQuery">
-          <Icon class="mr-5px" icon="ep:refresh" />
-          重置
-        </el-button>
       </el-form-item>
+
+      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-155px"
+          @change="handleQuery"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+
+      <!-- 高级筛选 -->
+      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+        <el-popover
+          :visible="showPopover"
+          persistent
+          :width="400"
+          :show-arrow="false"
+          placement="bottom-end"
+        >
+          <template #reference>
+            <el-button @click="showPopover = !showPopover" >
+              <Icon icon="ep:plus" class="mr-5px" />高级筛选 
+            </el-button>
+            
+          </template>
+          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+            <el-select
+              v-model="queryParams.category"
+              placeholder="请选择流程发起人"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="category in categoryList"
+                :key="category.code"
+                :label="category.name"
+                :value="category.code"
+              />
+            </el-select>
+          </el-form-item>          
+          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item class="bold-label" label-position="top">
+            <el-button @click="handleQuery"> 确认</el-button>
+            <el-button @click="showPopover = false"> 取消</el-button>
+            <el-button @click="resetQuery"> 清空</el-button>
+        </el-form-item>
+        </el-popover>
+      </el-form-item>
+
     </el-form>
   </ContentWrap>
 
@@ -89,6 +147,7 @@
 <script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as TaskApi from '@/api/bpm/task'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 
 defineOptions({ name: 'BpmTodoTask' })
 
@@ -101,9 +160,11 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: '',
+  category: undefined,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 
 /** 查询任务列表 */
 const getList = async () => {
@@ -117,6 +178,8 @@ const getList = async () => {
   }
 }
 
+const showPopover = ref(false)
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -134,13 +197,15 @@ const handleAudit = (row: any) => {
   push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
     }
   })
 }
 
 /** 初始化 **/
-onMounted(() => {
-  getList()
+onMounted(async () => {
+  await getList()
+  categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
diff --git a/src/views/crm/backlog/index.vue b/src/views/crm/backlog/index.vue
index aad46226..49a1d4ce 100644
--- a/src/views/crm/backlog/index.vue
+++ b/src/views/crm/backlog/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="【通用】跟进记录、待办事项" url="https://doc.iocoder.cn/crm/follow-up/" />
 
   <el-row :gutter="20">
     <el-col :span="4" class="min-w-[200px]">
diff --git a/src/views/crm/business/index.vue b/src/views/crm/business/index.vue
index 6ef1866e..84e447c0 100644
--- a/src/views/crm/business/index.vue
+++ b/src/views/crm/business/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【商机】商机管理、商机状态" url="https://doc.iocoder.cn/crm/business/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/business/status/index.vue b/src/views/crm/business/status/index.vue
index 32c5c7ee..ef514888 100644
--- a/src/views/crm/business/status/index.vue
+++ b/src/views/crm/business/status/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【商机】商机管理、商机状态" url="https://doc.iocoder.cn/crm/business/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/clue/ClueForm.vue b/src/views/crm/clue/ClueForm.vue
index 82a13204..3562c1cb 100644
--- a/src/views/crm/clue/ClueForm.vue
+++ b/src/views/crm/clue/ClueForm.vue
@@ -127,6 +127,7 @@
               placeholder="选择下次联系时间"
               type="datetime"
               value-format="x"
+              class="!w-1/1"
             />
           </el-form-item>
         </el-col>
diff --git a/src/views/crm/clue/index.vue b/src/views/crm/clue/index.vue
index 053736f2..f90d497b 100644
--- a/src/views/crm/clue/index.vue
+++ b/src/views/crm/clue/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【线索】线索管理" url="https://doc.iocoder.cn/crm/clue/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/contact/ContactForm.vue b/src/views/crm/contact/ContactForm.vue
index ac749da9..81813e6a 100644
--- a/src/views/crm/contact/ContactForm.vue
+++ b/src/views/crm/contact/ContactForm.vue
@@ -90,7 +90,7 @@
               <el-radio
                 v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
@@ -153,6 +153,7 @@
               placeholder="选择下次联系时间"
               type="datetime"
               value-format="x"
+              class="!w-1/1"
             />
           </el-form-item>
         </el-col>
diff --git a/src/views/crm/contact/index.vue b/src/views/crm/contact/index.vue
index 476781bb..ec26f1e9 100644
--- a/src/views/crm/contact/index.vue
+++ b/src/views/crm/contact/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/contract/config/index.vue b/src/views/crm/contract/config/index.vue
index e1015695..c5921233 100644
--- a/src/views/crm/contract/config/index.vue
+++ b/src/views/crm/contract/config/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【合同】合同管理、合同提醒" url="https://doc.iocoder.cn/crm/contract/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <el-form
@@ -26,8 +27,8 @@
             @change="changeNotifyEnable"
             class="ml-4"
           >
-            <el-radio :label="false" size="large">不提醒</el-radio>
-            <el-radio :label="true" size="large">提醒</el-radio>
+            <el-radio :value="false" size="large">不提醒</el-radio>
+            <el-radio :value="true" size="large">提醒</el-radio>
           </el-radio-group>
         </el-form-item>
         <div v-if="formData.notifyEnabled">
diff --git a/src/views/crm/contract/detail/index.vue b/src/views/crm/contract/detail/index.vue
index 0829e100..9d5e14ca 100644
--- a/src/views/crm/contract/detail/index.vue
+++ b/src/views/crm/contract/detail/index.vue
@@ -36,7 +36,7 @@
           ref="permissionListRef"
           :biz-id="contract.id!"
           :biz-type="BizTypeEnum.CRM_CONTRACT"
-          :show-action="false"
+          :show-action="true"
           @quit-team="close"
         />
       </el-tab-pane>
diff --git a/src/views/crm/contract/index.vue b/src/views/crm/contract/index.vue
index 938e64ae..0c9d7286 100644
--- a/src/views/crm/contract/index.vue
+++ b/src/views/crm/contract/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【合同】合同管理、合同提醒" url="https://doc.iocoder.cn/crm/contract/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/customer/CustomerForm.vue b/src/views/crm/customer/CustomerForm.vue
index 82869719..9a904d2e 100644
--- a/src/views/crm/customer/CustomerForm.vue
+++ b/src/views/crm/customer/CustomerForm.vue
@@ -127,6 +127,7 @@
               placeholder="选择下次联系时间"
               type="datetime"
               value-format="x"
+              class="!w-1/1"
             />
           </el-form-item>
         </el-col>
diff --git a/src/views/crm/customer/index.vue b/src/views/crm/customer/index.vue
index 91f0389c..86bddc0e 100644
--- a/src/views/crm/customer/index.vue
+++ b/src/views/crm/customer/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/customer/limitConfig/index.vue b/src/views/crm/customer/limitConfig/index.vue
index 86136c57..01f3ef6b 100644
--- a/src/views/crm/customer/limitConfig/index.vue
+++ b/src/views/crm/customer/limitConfig/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <!-- 列表 -->
   <ContentWrap>
diff --git a/src/views/crm/customer/pool/index.vue b/src/views/crm/customer/pool/index.vue
index 3d1ae53e..eab90e0c4 100644
--- a/src/views/crm/customer/pool/index.vue
+++ b/src/views/crm/customer/pool/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/customer/poolConfig/index.vue b/src/views/crm/customer/poolConfig/index.vue
index 9713c916..28d58a66 100644
--- a/src/views/crm/customer/poolConfig/index.vue
+++ b/src/views/crm/customer/poolConfig/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【客户】客户管理、公海客户" url="https://doc.iocoder.cn/crm/customer/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <el-form
@@ -26,8 +27,8 @@
         <!-- 表单 -->
         <el-form-item label="客户公海规则设置" prop="enabled">
           <el-radio-group v-model="formData.enabled" @change="changeEnable" class="ml-4">
-            <el-radio :label="false" size="large">不启用</el-radio>
-            <el-radio :label="true" size="large">启用</el-radio>
+            <el-radio :value="false" size="large">不启用</el-radio>
+            <el-radio :value="true" size="large">启用</el-radio>
           </el-radio-group>
         </el-form-item>
         <div v-if="formData.enabled">
@@ -43,8 +44,8 @@
               @change="changeNotifyEnable"
               class="ml-4"
             >
-              <el-radio :label="false" size="large">不提醒</el-radio>
-              <el-radio :label="true" size="large">提醒</el-radio>
+              <el-radio :value="false" size="large">不提醒</el-radio>
+              <el-radio :value="true" size="large">提醒</el-radio>
             </el-radio-group>
           </el-form-item>
           <div v-if="formData.notifyEnabled">
diff --git a/src/views/crm/permission/components/PermissionForm.vue b/src/views/crm/permission/components/PermissionForm.vue
index 9cf8867f..632a3471 100644
--- a/src/views/crm/permission/components/PermissionForm.vue
+++ b/src/views/crm/permission/components/PermissionForm.vue
@@ -23,7 +23,7 @@
             v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PERMISSION_LEVEL)"
             :key="dict.value"
           >
-            <el-radio v-if="dict.value != PermissionLevelEnum.OWNER" :label="dict.value">
+            <el-radio v-if="dict.value != PermissionLevelEnum.OWNER" :value="dict.value">
               {{ dict.label }}
             </el-radio>
           </template>
@@ -34,9 +34,9 @@
         label="同时添加至"
       >
         <el-checkbox-group v-model="formData.toBizTypes">
-          <el-checkbox :label="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
-          <el-checkbox :label="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
-          <el-checkbox :label="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
+          <el-checkbox :value="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
+          <el-checkbox :value="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
+          <el-checkbox :value="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
     </el-form>
diff --git a/src/views/crm/permission/components/TransferForm.vue b/src/views/crm/permission/components/TransferForm.vue
index 311071be..43d5af74 100644
--- a/src/views/crm/permission/components/TransferForm.vue
+++ b/src/views/crm/permission/components/TransferForm.vue
@@ -20,8 +20,8 @@
       </el-form-item>
       <el-form-item label="老负责人">
         <el-radio-group v-model="oldOwnerHandler" @change="handleOwnerChange">
-          <el-radio :label="false" size="large">移除</el-radio>
-          <el-radio :label="true" size="large">加入团队</el-radio>
+          <el-radio :value="false" size="large">移除</el-radio>
+          <el-radio :value="true" size="large">加入团队</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item v-if="oldOwnerHandler" label="老负责人权限级别" prop="oldOwnerPermissionLevel">
@@ -30,7 +30,7 @@
             v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PERMISSION_LEVEL)"
             :key="dict.value"
           >
-            <el-radio v-if="dict.value != PermissionLevelEnum.OWNER" :label="dict.value">
+            <el-radio v-if="dict.value != PermissionLevelEnum.OWNER" :value="dict.value">
               {{ dict.label }}
             </el-radio>
           </template>
@@ -38,9 +38,9 @@
       </el-form-item>
       <el-form-item v-if="bizType === BizTypeEnum.CRM_CUSTOMER" label="同时转移">
         <el-checkbox-group v-model="formData.toBizTypes">
-          <el-checkbox :label="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
-          <el-checkbox :label="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
-          <el-checkbox :label="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
+          <el-checkbox :value="BizTypeEnum.CRM_CONTACT">联系人</el-checkbox>
+          <el-checkbox :value="BizTypeEnum.CRM_BUSINESS">商机</el-checkbox>
+          <el-checkbox :value="BizTypeEnum.CRM_CONTRACT">合同</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
     </el-form>
diff --git a/src/views/crm/product/category/index.vue b/src/views/crm/product/category/index.vue
index 80a07d5b..631c170a 100644
--- a/src/views/crm/product/category/index.vue
+++ b/src/views/crm/product/category/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="【产品】产品管理、产品分类" url="https://doc.iocoder.cn/crm/product/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/product/detail/index.vue b/src/views/crm/product/detail/index.vue
index ff9efd9e..65fdd0f9 100644
--- a/src/views/crm/product/detail/index.vue
+++ b/src/views/crm/product/detail/index.vue
@@ -24,7 +24,7 @@ defineOptions({ name: 'CrmProductDetail' })
 
 const route = useRoute()
 const message = useMessage()
-const id = Number(route.params.id) // 编号
+const id = route.params.id // 编号
 const loading = ref(true) // 加载中
 const product = ref<ProductApi.ProductVO>({} as ProductApi.ProductVO) // 详情
 
diff --git a/src/views/crm/product/index.vue b/src/views/crm/product/index.vue
index 8f35d3e1..5d656dfd 100644
--- a/src/views/crm/product/index.vue
+++ b/src/views/crm/product/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="【产品】产品管理、产品分类" url="https://doc.iocoder.cn/crm/product/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/receivable/ReceivableForm.vue b/src/views/crm/receivable/ReceivableForm.vue
index a44164a3..61fac08d 100644
--- a/src/views/crm/receivable/ReceivableForm.vue
+++ b/src/views/crm/receivable/ReceivableForm.vue
@@ -124,6 +124,7 @@
               placeholder="选择回款日期"
               type="date"
               value-format="x"
+              class="!w-100%"
             />
           </el-form-item>
         </el-col>
diff --git a/src/views/crm/receivable/index.vue b/src/views/crm/receivable/index.vue
index 1b5a6907..6928942f 100644
--- a/src/views/crm/receivable/index.vue
+++ b/src/views/crm/receivable/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【回款】回款管理、回款计划" url="https://doc.iocoder.cn/crm/receivable/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/receivable/plan/ReceivablePlanForm.vue b/src/views/crm/receivable/plan/ReceivablePlanForm.vue
index 0d4ef179..f321592a 100644
--- a/src/views/crm/receivable/plan/ReceivablePlanForm.vue
+++ b/src/views/crm/receivable/plan/ReceivablePlanForm.vue
@@ -89,6 +89,7 @@
               placeholder="选择计划回款日期"
               type="date"
               value-format="x"
+              class="!w-100%"
             />
           </el-form-item>
         </el-col>
diff --git a/src/views/crm/receivable/plan/index.vue b/src/views/crm/receivable/plan/index.vue
index 635ba2bc..43abe154 100644
--- a/src/views/crm/receivable/plan/index.vue
+++ b/src/views/crm/receivable/plan/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="【回款】回款管理、回款计划" url="https://doc.iocoder.cn/crm/receivable/" />
+  <doc-alert title="【通用】数据权限" url="https://doc.iocoder.cn/crm/permission/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/crm/statistics/performance/components/ContractCountPerformance.vue b/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
index f911bb2d..fa5a897b 100644
--- a/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
+++ b/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
@@ -1,5 +1,4 @@
 <!-- 员工业绩统计 -->
-<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
 <template>
   <!-- Echarts图 -->
   <el-card shadow="never">
@@ -64,13 +63,13 @@ const echartsOption = reactive<EChartsOption>({
       data: []
     },
     {
-      name: '同比增长率（%）',
+      name: '环比增长率（%）',
       type: 'line',
       yAxisIndex: 1,
       data: []
     },
     {
-      name: '环比增长率（%）',
+      name: '同比增长率（%）',
       type: 'line',
       yAxisIndex: 1,
       data: []
@@ -173,7 +172,9 @@ const loadData = async () => {
       (s: StatisticsPerformanceRespVO) => s.lastMonthCount
     )
     echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
-      s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
+      s.lastMonthCount !== 0
+        ? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
+        : 'NULL'
     )
   }
   if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
@@ -181,7 +182,9 @@ const loadData = async () => {
       (s: StatisticsPerformanceRespVO) => s.lastYearCount
     )
     echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
-      s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
+      s.lastYearCount !== 0
+        ? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
+        : 'NULL'
     )
   }
 
@@ -197,8 +200,8 @@ const tableData = reactive([
   { title: '当月合同数量统计（个）' },
   { title: '上月合同数量统计（个）' },
   { title: '去年当月合同数量统计（个）' },
-  { title: '同比增长率（%）' },
-  { title: '环比增长率（%）' }
+  { title: '环比增长率（%）' },
+  { title: '同比增长率（%）' }
 ])
 
 // 定义 convertListData 方法，数据行列转置，展示每月数据
@@ -214,9 +217,13 @@ const convertListData = () => {
     tableData[1]['prop' + index] = item.lastMonthCount
     tableData[2]['prop' + index] = item.lastYearCount
     tableData[3]['prop' + index] =
-      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+      item.lastMonthCount !== 0
+        ? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
+        : 'NULL'
     tableData[4]['prop' + index] =
-      item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
+      item.lastYearCount !== 0
+        ? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
+        : 'NULL'
   })
 }
 
diff --git a/src/views/crm/statistics/performance/components/ContractPricePerformance.vue b/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
index f97b612c..dd52d9fb 100644
--- a/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
+++ b/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
@@ -1,5 +1,4 @@
 <!-- 员工业绩统计 -->
-<!-- TODO @scholar:参考 ReceivablePricePerformance 建议改 -->
 <template>
   <!-- Echarts图 -->
   <el-card shadow="never">
@@ -64,13 +63,13 @@ const echartsOption = reactive<EChartsOption>({
       data: []
     },
     {
-      name: '同比增长率（%）',
+      name: '环比增长率（%）',
       type: 'line',
       yAxisIndex: 1,
       data: []
     },
     {
-      name: '环比增长率（%）',
+      name: '同比增长率（%）',
       type: 'line',
       yAxisIndex: 1,
       data: []
@@ -173,7 +172,9 @@ const loadData = async () => {
       (s: StatisticsPerformanceRespVO) => s.lastMonthCount
     )
     echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
-      s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
+      s.lastMonthCount !== 0
+        ? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
+        : 'NULL'
     )
   }
   if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
@@ -181,7 +182,9 @@ const loadData = async () => {
       (s: StatisticsPerformanceRespVO) => s.lastYearCount
     )
     echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
-      s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
+      s.lastYearCount !== 0
+        ? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
+        : 'NULL'
     )
   }
 
@@ -197,8 +200,8 @@ const tableData = reactive([
   { title: '当月合同金额统计（元）' },
   { title: '上月合同金额统计（元）' },
   { title: '去年当月合同金额统计（元）' },
-  { title: '同比增长率（%）' },
-  { title: '环比增长率（%）' }
+  { title: '环比增长率（%）' },
+  { title: '同比增长率（%）' }
 ])
 
 // 定义 init 方法
@@ -214,9 +217,13 @@ const convertListData = () => {
     tableData[1]['prop' + index] = item.lastMonthCount
     tableData[2]['prop' + index] = item.lastYearCount
     tableData[3]['prop' + index] =
-      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+      item.lastMonthCount !== 0
+        ? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
+        : 'NULL'
     tableData[4]['prop' + index] =
-      item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
+      item.lastYearCount !== 0
+        ? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
+        : 'NULL'
   })
 }
 
diff --git a/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue b/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
index 14f59909..169f074b 100644
--- a/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
+++ b/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
@@ -17,7 +17,6 @@
         :prop="item.prop"
         align="center"
       >
-        <!-- TODO @scholar：IDEA 爆红的处理 -->
         <template #default="scope">
           {{ scope.row[item.prop] }}
         </template>
@@ -64,13 +63,13 @@ const echartsOption = reactive<EChartsOption>({
       data: []
     },
     {
-      name: '同比增长率（%）',
+      name: '环比增长率（%）',
       type: 'line',
       yAxisIndex: 1,
       data: []
     },
     {
-      name: '环比增长率（%）',
+      name: '同比增长率（%）',
       type: 'line',
       yAxisIndex: 1,
       data: []
@@ -121,7 +120,6 @@ const echartsOption = reactive<EChartsOption>({
       type: 'value',
       name: '',
       axisTick: {
-        // TODO @scholar：IDEA 爆红的处理
         alignWithLabel: true,
         lineStyle: {
           width: 0
@@ -174,7 +172,9 @@ const loadData = async () => {
       (s: StatisticsPerformanceRespVO) => s.lastMonthCount
     )
     echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
-      s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
+      s.lastMonthCount !== 0
+        ? (((s.currentMonthCount - s.lastMonthCount) / s.lastMonthCount) * 100).toFixed(2)
+        : 'NULL'
     )
   }
   if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
@@ -182,7 +182,9 @@ const loadData = async () => {
       (s: StatisticsPerformanceRespVO) => s.lastYearCount
     )
     echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
-      s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
+      s.lastYearCount !== 0
+        ? (((s.currentMonthCount - s.lastYearCount) / s.lastYearCount) * 100).toFixed(2)
+        : 'NULL'
     )
   }
 
@@ -193,14 +195,13 @@ const loadData = async () => {
 }
 
 // 初始化数据
-// TODO @scholar：加个 as any[]，避免 idea 爆红
-const columnsData = reactive([] as any[])
+const columnsData = reactive([])
 const tableData = reactive([
   { title: '当月回款金额统计（元）' },
   { title: '上月回款金额统计（元）' },
   { title: '去年当月回款金额统计（元）' },
-  { title: '同比增长率（%）' },
-  { title: '环比增长率（%）' }
+  { title: '环比增长率（%）' },
+  { title: '同比增长率（%）' }
 ])
 
 // 定义 init 方法
@@ -215,11 +216,14 @@ const convertListData = () => {
     tableData[0]['prop' + index] = item.currentMonthCount
     tableData[1]['prop' + index] = item.lastMonthCount
     tableData[2]['prop' + index] = item.lastYearCount
-    // TODO @scholar：百分比，使用 erpCalculatePercentage 直接计算；如果是 0，则返回 0，统一就好哈；
     tableData[3]['prop' + index] =
-      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+      item.lastMonthCount !== 0
+        ? (((item.currentMonthCount - item.lastMonthCount) / item.lastMonthCount) * 100).toFixed(2)
+        : 'NULL'
     tableData[4]['prop' + index] =
-      item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
+      item.lastYearCount !== 0
+        ? (((item.currentMonthCount - item.lastYearCount) / item.lastYearCount) * 100).toFixed(2)
+        : 'NULL'
   })
 }
 
diff --git a/src/views/crm/statistics/performance/index.vue b/src/views/crm/statistics/performance/index.vue
index 4a443c55..822afec9 100644
--- a/src/views/crm/statistics/performance/index.vue
+++ b/src/views/crm/statistics/performance/index.vue
@@ -73,7 +73,7 @@
 import * as DeptApi from '@/api/system/dept'
 import * as UserApi from '@/api/system/user'
 import { useUserStore } from '@/store/modules/user'
-import { beginOfDay, formatDate } from '@/utils/formatTime'
+import { beginOfDay, endOfDay, formatDate } from '@/utils/formatTime'
 import { defaultProps, handleTree } from '@/utils/tree'
 import ContractCountPerformance from './components/ContractCountPerformance.vue'
 import ContractPricePerformance from './components/ContractPricePerformance.vue'
@@ -85,8 +85,8 @@ const queryParams = reactive({
   deptId: useUserStore().getUser.deptId,
   userId: undefined,
   times: [
-    // 默认显示当年的数据
-    formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)))
+    formatDate(beginOfDay(new Date(new Date().getFullYear(), 0, 1))),
+    formatDate(endOfDay(new Date(new Date().getFullYear(), 11, 31)))
   ]
 })
 
@@ -100,31 +100,20 @@ const userListByDeptId = computed(() =>
     : []
 )
 
-// TODO @scholar：改成尾注释，保证 vue 内容短一点；变量名小写
 // 活跃标签
 const activeTab = ref('ContractCountPerformance')
-// 1.员工合同数量统计
-const ContractCountPerformanceRef = ref()
-// 2.员工合同金额统计
-const ContractPricePerformanceRef = ref()
-// 3.员工回款金额统计
-const ReceivablePricePerformanceRef = ref()
+const ContractCountPerformanceRef = ref() // 员工合同数量统计
+const ContractPricePerformanceRef = ref() // 员工合同金额统计
+const ReceivablePricePerformanceRef = ref() // 员工回款金额统计
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   // 从 queryParams.times[0] 中获取到了年份
   const selectYear = parseInt(queryParams.times[0])
+  queryParams.times[0] = formatDate(beginOfDay(new Date(selectYear, 0, 1)))
+  queryParams.times[1] = formatDate(endOfDay(new Date(selectYear, 11, 31)))
 
-  // 创建一个新的 Date 对象，设置为指定的年份的第一天
-  const fullDate = new Date(selectYear, 0, 1, 0, 0, 0)
-
-  // 将完整的日期时间格式化为需要的字符串形式，比如 2004-01-01 00:00:00
-  // TODO @scholar：看看，是不是可以使用 year 哈
-  queryParams.times[0] = `${fullDate.getFullYear()}-${String(fullDate.getMonth() + 1).padStart(
-    2,
-    '0'
-  )}-${String(fullDate.getDate()).padStart(2, '0')} ${String(fullDate.getHours()).padStart(2, '0')}:${String(fullDate.getMinutes()).padStart(2, '0')}:${String(fullDate.getSeconds()).padStart(2, '0')}`
-
+  // 执行查询
   switch (activeTab.value) {
     case 'ContractCountPerformance':
       ContractCountPerformanceRef.value?.loadData?.()
diff --git a/src/views/infra/apiAccessLog/index.vue b/src/views/infra/apiAccessLog/index.vue
index 2398f550..570f579e 100644
--- a/src/views/infra/apiAccessLog/index.vue
+++ b/src/views/infra/apiAccessLog/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/apiErrorLog/index.vue b/src/views/infra/apiErrorLog/index.vue
index a199a67b..ca145a76 100644
--- a/src/views/infra/apiErrorLog/index.vue
+++ b/src/views/infra/apiErrorLog/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index 571acffe..ed1091e7 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -1,16 +1,17 @@
 <template>
-  <ContentWrap>
-    <el-row>
-      <el-col>
-        <div class="float-right mb-2">
-          <el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
-          <el-button size="small" type="success" @click="showOption">生成 Options</el-button>
-          <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
-        </div>
-      </el-col>
-    </el-row>
+  <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0">
     <!-- 表单设计器 -->
-    <FcDesigner ref="designer" height="780px" />
+    <div
+      class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
+    >
+      <fc-designer class="my-designer" ref="designer" :config="designerConfig">
+        <template #handle>
+          <el-button size="small" type="primary" plain @click="showJson">生成JSON</el-button>
+          <el-button size="small" type="success" plain @click="showOption">生成Options</el-button>
+          <el-button size="small" type="danger" plain @click="showTemplate">生成组件</el-button>
+        </template>
+      </fc-designer>
+    </div>
   </ContentWrap>
 
   <!-- 弹窗：表单预览 -->
@@ -43,6 +44,35 @@ defineOptions({ name: 'InfraBuild' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
 
+// 表单设计器配置
+const designerConfig = ref({
+  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
+  autoActive: true, // 是否自动选中拖入的组件
+  useTemplate: false, // 是否生成vue2语法的模板组件
+  formOptions: {
+    form: {
+      labelWidth: '100px' // 设置默认的 label 宽度为 100px
+    }
+  }, // 定义表单配置默认值
+  fieldReadonly: false, // 配置field是否可以编辑
+  hiddenDragMenu: false, // 隐藏拖拽操作按钮
+  hiddenDragBtn: false, // 隐藏拖拽按钮
+  hiddenMenu: [], // 隐藏部分菜单
+  hiddenItem: [], // 隐藏部分组件
+  hiddenItemConfig: {}, // 隐藏组件的部分配置项
+  disabledItemConfig: {}, // 禁用组件的部分配置项
+  showSaveBtn: false, // 是否显示保存按钮
+  showConfig: true, // 是否显示右侧的配置界面
+  showBaseForm: true, // 是否显示组件的基础配置表单
+  showControl: true, // 是否显示组件联动
+  showPropsForm: true, // 是否显示组件的属性配置表单
+  showEventForm: true, // 是否显示组件的事件配置表单
+  showValidateForm: true, // 是否显示组件的验证配置表单
+  showFormConfig: true, // 是否显示表单配置
+  showInputData: true, // 是否显示录入按钮
+  showDevice: true, // 是否显示多端适配选项
+  appendConfigData: [] // 定义渲染规则所需的formData
+})
 const designer = ref() // 表单设计器
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
@@ -140,3 +170,13 @@ onMounted(async () => {
   hljs.registerLanguage('json', json)
 })
 </script>
+
+<style>
+.my-designer {
+  ._fc-l,
+  ._fc-m,
+  ._fc-r {
+    border-top: none;
+  }
+}
+</style>
diff --git a/src/views/infra/codegen/components/ColumInfoForm.vue b/src/views/infra/codegen/components/ColumInfoForm.vue
index 737c2e2b..f5260226 100644
--- a/src/views/infra/codegen/components/ColumInfoForm.vue
+++ b/src/views/infra/codegen/components/ColumInfoForm.vue
@@ -37,26 +37,26 @@
     </el-table-column>
     <el-table-column label="插入" min-width="4%">
       <template #default="scope">
-        <el-checkbox v-model="scope.row.createOperation" false-label="false" true-label="true" />
+        <el-checkbox v-model="scope.row.createOperation" false-value="false" true-value="true" />
       </template>
     </el-table-column>
     <el-table-column label="编辑" min-width="4%">
       <template #default="scope">
-        <el-checkbox v-model="scope.row.updateOperation" false-label="false" true-label="true" />
+        <el-checkbox v-model="scope.row.updateOperation" false-value="false" true-value="true" />
       </template>
     </el-table-column>
     <el-table-column label="列表" min-width="4%">
       <template #default="scope">
         <el-checkbox
           v-model="scope.row.listOperationResult"
-          false-label="false"
-          true-label="true"
+          false-value="false"
+          true-value="true"
         />
       </template>
     </el-table-column>
     <el-table-column label="查询" min-width="4%">
       <template #default="scope">
-        <el-checkbox v-model="scope.row.listOperation" false-label="false" true-label="true" />
+        <el-checkbox v-model="scope.row.listOperation" false-value="false" true-value="true" />
       </template>
     </el-table-column>
     <el-table-column label="查询方式" min-width="10%">
@@ -75,7 +75,7 @@
     </el-table-column>
     <el-table-column label="允许空" min-width="5%">
       <template #default="scope">
-        <el-checkbox v-model="scope.row.nullable" false-label="false" true-label="true" />
+        <el-checkbox v-model="scope.row.nullable" false-value="false" true-value="true" />
       </template>
     </el-table-column>
     <el-table-column label="显示类型" min-width="12%">
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
index d2a01cc0..aaf176fb 100644
--- a/src/views/infra/codegen/components/GenerateInfoForm.vue
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -285,8 +285,8 @@
             </span>
           </template>
           <el-radio-group v-model="formData.subJoinMany" placeholder="请选择">
-            <el-radio :label="true">一对多</el-radio>
-            <el-radio :label="false">一对一</el-radio>
+            <el-radio :value="true">一对多</el-radio>
+            <el-radio :value="false">一对一</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-col>
diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index a25b956c..69c3d125 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -1,4 +1,8 @@
 <template>
+  <doc-alert title="代码生成（单表）" url="https://doc.iocoder.cn/new-feature/" />
+  <doc-alert title="代码生成（树表）" url="https://doc.iocoder.cn/new-feature/tree/" />
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
+  <doc-alert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
 
   <!-- 搜索 -->
   <ContentWrap>
diff --git a/src/views/infra/config/ConfigForm.vue b/src/views/infra/config/ConfigForm.vue
index f61face0..4f7333a6 100644
--- a/src/views/infra/config/ConfigForm.vue
+++ b/src/views/infra/config/ConfigForm.vue
@@ -24,7 +24,7 @@
           <el-radio
             v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
             :key="dict.value as string"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index 36833a59..c7838c27 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="配置中心" url="https://doc.iocoder.cn/config-center/" />
 
   <!-- 搜索 -->
   <ContentWrap>
diff --git a/src/views/infra/demo/demo01/Demo01ContactForm.vue b/src/views/infra/demo/demo01/Demo01ContactForm.vue
index 5d28112a..f317fe76 100644
--- a/src/views/infra/demo/demo01/Demo01ContactForm.vue
+++ b/src/views/infra/demo/demo01/Demo01ContactForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/infra/demo/demo01/index.vue b/src/views/infra/demo/demo01/index.vue
index 8a42ca8e..e111ab63 100644
--- a/src/views/infra/demo/demo01/index.vue
+++ b/src/views/infra/demo/demo01/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="代码生成（单表）" url="https://doc.iocoder.cn/new-feature/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/demo/demo02/index.vue b/src/views/infra/demo/demo02/index.vue
index 60949438..9faa8c96 100644
--- a/src/views/infra/demo/demo02/index.vue
+++ b/src/views/infra/demo/demo02/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="代码生成（树表）" url="https://doc.iocoder.cn/new-feature/tree/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
index 758c7e5d..b73f4233 100644
--- a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
+++ b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/infra/demo/demo03/erp/index.vue b/src/views/infra/demo/demo03/erp/index.vue
index 78c62764..e0f1cf48 100644
--- a/src/views/infra/demo/demo03/erp/index.vue
+++ b/src/views/infra/demo/demo03/erp/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
index 98c1b7bf..8621593b 100644
--- a/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
+++ b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/infra/demo/demo03/inner/index.vue b/src/views/infra/demo/demo03/inner/index.vue
index 4b40defd..9b32460a 100644
--- a/src/views/infra/demo/demo03/inner/index.vue
+++ b/src/views/infra/demo/demo03/inner/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
index 4815357e..42613c4d 100644
--- a/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
+++ b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/infra/demo/demo03/normal/index.vue b/src/views/infra/demo/demo03/normal/index.vue
index 481673f5..8a5dc1a9 100644
--- a/src/views/infra/demo/demo03/normal/index.vue
+++ b/src/views/infra/demo/demo03/normal/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/druid/index.vue b/src/views/infra/druid/index.vue
index 14b39afa..2ac99d23 100644
--- a/src/views/infra/druid/index.vue
+++ b/src/views/infra/druid/index.vue
@@ -1,7 +1,9 @@
 <template>
+  <doc-alert title="数据库 MyBatis" url="https://doc.iocoder.cn/mybatis/" />
+  <doc-alert title="多数据源（读写分离）" url="https://doc.iocoder.cn/dynamic-datasource/" />
 
-  <ContentWrap>
-    <IFrame v-if="!loading" :src="url" />
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
+    <IFrame v-if="!loading" v-loading="loading" :src="url" />
   </ContentWrap>
 </template>
 <script lang="ts" setup>
diff --git a/src/views/infra/file/index.vue b/src/views/infra/file/index.vue
index e1d2ffd6..3fcda6e8 100644
--- a/src/views/infra/file/index.vue
+++ b/src/views/infra/file/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
   <!-- 搜索 -->
   <ContentWrap>
     <el-form
@@ -14,6 +15,7 @@
           placeholder="请输入文件路径"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="文件类型" prop="type" width="80">
@@ -22,6 +24,7 @@
           placeholder="请输入文件类型"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
@@ -32,6 +35,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
diff --git a/src/views/infra/fileConfig/FileConfigForm.vue b/src/views/infra/fileConfig/FileConfigForm.vue
index 4d89d0ad..88e0bd56 100644
--- a/src/views/infra/fileConfig/FileConfigForm.vue
+++ b/src/views/infra/fileConfig/FileConfigForm.vue
@@ -66,8 +66,8 @@
       </el-form-item>
       <el-form-item v-if="formData.storage === 11" label="连接模式" prop="config.mode">
         <el-radio-group v-model="formData.config.mode">
-          <el-radio key="Active" label="Active">主动模式</el-radio>
-          <el-radio key="Passive" label="Passive">被动模式</el-radio>
+          <el-radio key="Active" value="Active">主动模式</el-radio>
+          <el-radio key="Passive" value="Passive">被动模式</el-radio>
         </el-radio-group>
       </el-form-item>
       <!-- S3 -->
diff --git a/src/views/infra/fileConfig/index.vue b/src/views/infra/fileConfig/index.vue
index bc6452ea..3eea1062 100644
--- a/src/views/infra/fileConfig/index.vue
+++ b/src/views/infra/fileConfig/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
 
   <!-- 搜索 -->
   <ContentWrap>
@@ -206,7 +206,8 @@ const handleMaster = async (id) => {
 const handleTest = async (id) => {
   try {
     const response = await FileConfigApi.testFileConfig(id)
-    message.alert('测试通过，上传文件成功！访问地址：' + response)
+    await message.confirm('是否要访问该文件？', '测试上传成功')
+    window.open(response, '_blank')
   } catch {}
 }
 
diff --git a/src/views/infra/job/index.vue b/src/views/infra/job/index.vue
index 06f7b2e3..29460030 100644
--- a/src/views/infra/job/index.vue
+++ b/src/views/infra/job/index.vue
@@ -1,4 +1,7 @@
 <template>
+  <doc-alert title="定时任务" url="https://doc.iocoder.cn/job/" />
+  <doc-alert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+  <doc-alert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -232,11 +235,7 @@ const handleChangeStatus = async (row: JobApi.JobVO) => {
     message.success(text + '成功')
     // 刷新列表
     await getList()
-  } catch {
-    // 取消后，进行恢复按钮
-    row.status =
-      row.status === InfraJobStatusEnum.NORMAL ? InfraJobStatusEnum.STOP : InfraJobStatusEnum.NORMAL
-  }
+  } catch {}
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/infra/job/logger/JobLogDetail.vue b/src/views/infra/job/logger/JobLogDetail.vue
index 1a84e4e8..7216f527 100644
--- a/src/views/infra/job/logger/JobLogDetail.vue
+++ b/src/views/infra/job/logger/JobLogDetail.vue
@@ -26,7 +26,7 @@
         <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="detailData.status" />
       </el-descriptions-item>
       <el-descriptions-item label="执行结果">
-        {{ detailData.duration + ' result' }}
+        {{ detailData.result }}
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
diff --git a/src/views/infra/job/logger/index.vue b/src/views/infra/job/logger/index.vue
index dcd6d715..3d2be80f 100644
--- a/src/views/infra/job/logger/index.vue
+++ b/src/views/infra/job/logger/index.vue
@@ -1,4 +1,7 @@
 <template>
+  <doc-alert title="定时任务" url="https://doc.iocoder.cn/job/" />
+  <doc-alert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+  <doc-alert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/infra/redis/index.vue b/src/views/infra/redis/index.vue
index 5378f02b..e047d747 100644
--- a/src/views/infra/redis/index.vue
+++ b/src/views/infra/redis/index.vue
@@ -1,5 +1,6 @@
 <template>
-
+  <doc-alert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
+  <doc-alert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
   <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
     <el-row>
       <!-- 基本信息 -->
diff --git a/src/views/infra/server/index.vue b/src/views/infra/server/index.vue
index 40f46d5e..6dcdec6c 100644
--- a/src/views/infra/server/index.vue
+++ b/src/views/infra/server/index.vue
@@ -1,7 +1,7 @@
 <template>
+  <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
 
-
-  <ContentWrap>
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
diff --git a/src/views/infra/skywalking/index.vue b/src/views/infra/skywalking/index.vue
index b5bdbc41..f5055d73 100644
--- a/src/views/infra/skywalking/index.vue
+++ b/src/views/infra/skywalking/index.vue
@@ -1,7 +1,7 @@
 <template>
+  <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
 
-
-  <ContentWrap>
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
     <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
diff --git a/src/views/infra/swagger/index.vue b/src/views/infra/swagger/index.vue
index 2474ddef..7ed35f83 100644
--- a/src/views/infra/swagger/index.vue
+++ b/src/views/infra/swagger/index.vue
@@ -1,7 +1,8 @@
 <template>
+  <doc-alert title="接口文档" url="https://doc.iocoder.cn/api-doc/" />
 
-  <ContentWrap>
-    <IFrame :src="src" />
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
   </ContentWrap>
 </template>
 <script lang="ts" setup>
diff --git a/src/views/infra/webSocket/index.vue b/src/views/infra/webSocket/index.vue
index df38c2f7..37f1322e 100644
--- a/src/views/infra/webSocket/index.vue
+++ b/src/views/infra/webSocket/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="WebSocket 实时通信" url="https://doc.iocoder.cn/websocket/" />
 
   <div class="flex">
     <!-- 左侧：建立连接、发送消息 -->
@@ -28,8 +29,8 @@
         :autosize="{ minRows: 2, maxRows: 4 }"
         :disabled="!getIsOpen"
         clearable
-        type="textarea"
         placeholder="请输入你要发送的消息"
+        type="textarea"
       />
       <el-select v-model="sendUserId" class="mt-4" placeholder="请选择发送人">
         <el-option key="" label="所有人" value="" />
@@ -70,7 +71,7 @@
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import { useWebSocket } from '@vueuse/core'
-import { getAccessToken } from '@/utils/auth'
+import { getRefreshToken } from '@/utils/auth'
 import * as UserApi from '@/api/system/user'
 
 defineOptions({ name: 'InfraWebSocket' })
@@ -78,14 +79,16 @@ defineOptions({ name: 'InfraWebSocket' })
 const message = useMessage() // 消息弹窗
 
 const server = ref(
-  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') + '?token=' + getAccessToken()
+  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+    '?token=' +
+    getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
 ) // WebSocket 服务地址
 const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 连接是否打开
 const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 连接的展示颜色
 
 /** 发起 WebSocket 连接 */
 const { status, data, send, close, open } = useWebSocket(server.value, {
-  autoReconnect: false,
+  autoReconnect: true,
   heartbeat: true
 })
 
diff --git a/src/views/mall/home/components/OperationDataCard.vue b/src/views/mall/home/components/OperationDataCard.vue
index b905203b..64d89f7a 100644
--- a/src/views/mall/home/components/OperationDataCard.vue
+++ b/src/views/mall/home/components/OperationDataCard.vue
@@ -11,9 +11,9 @@
         @click="handleClick(item.routerName)"
       >
         <CountTo
-          :prefix="item.prefix"
-          :end-val="item.value"
           :decimals="item.decimals"
+          :end-val="item.value"
+          :prefix="item.prefix"
           class="text-3xl"
         />
         <span class="text-center">{{ item.name }}</span>
@@ -53,10 +53,18 @@ const data = reactive({
 /** 查询订单数据 */
 const getOrderData = async () => {
   const orderCount = await TradeStatisticsApi.getOrderCount()
-  data.orderUndelivered.value = orderCount.undelivered
-  data.orderAfterSaleApply.value = orderCount.afterSaleApply
-  data.orderWaitePickUp.value = orderCount.pickUp
-  data.withdrawAuditing.value = orderCount.auditingWithdraw
+  if (orderCount.undelivered != null) {
+    data.orderUndelivered.value = orderCount.undelivered
+  }
+  if (orderCount.afterSaleApply != null) {
+    data.orderAfterSaleApply.value = orderCount.afterSaleApply
+  }
+  if (orderCount.pickUp != null) {
+    data.orderWaitePickUp.value = orderCount.pickUp
+  }
+  if (orderCount.auditingWithdraw != null) {
+    data.withdrawAuditing.value = orderCount.auditingWithdraw
+  }
 }
 
 /** 查询商品数据 */
@@ -83,6 +91,13 @@ const handleClick = (routerName: string) => {
   router.push({ name: routerName })
 }
 
+/** 激活时 */
+onActivated(() => {
+  getOrderData()
+  getProductData()
+  getWalletRechargeData()
+})
+
 /** 初始化 **/
 onMounted(() => {
   getOrderData()
diff --git a/src/views/mall/home/components/TradeTrendCard.vue b/src/views/mall/home/components/TradeTrendCard.vue
index a8cab828..ad1270ea 100644
--- a/src/views/mall/home/components/TradeTrendCard.vue
+++ b/src/views/mall/home/components/TradeTrendCard.vue
@@ -6,7 +6,7 @@
         <!-- 查询条件 -->
         <div class="flex flex-row items-center gap-2">
           <el-radio-group v-model="timeRangeType" @change="handleTimeRangeTypeChange">
-            <el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :label="key">
+            <el-radio-button v-for="[key, value] in timeRange.entries()" :key="key" :value="key">
               {{ value.name }}
             </el-radio-button>
           </el-radio-group>
@@ -186,7 +186,7 @@ const getOrderCountTrendComparison = async (
     dates.push(item.value.date)
     if (series.length === 2) {
       series[0].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
-      series[1].data.push(fenToYuan(item?.value?.orderPayCount || 0)) // 当前数量
+      series[1].data.push(item?.value?.orderPayCount || 0) // 当前数量
     } else {
       series[0].data.push(fenToYuan(item?.reference?.orderPayPrice || 0)) // 对照金额
       series[1].data.push(fenToYuan(item?.value?.orderPayPrice || 0)) // 当前金额
diff --git a/src/views/mall/home/index.vue b/src/views/mall/home/index.vue
index 349cf955..89baf334 100644
--- a/src/views/mall/home/index.vue
+++ b/src/views/mall/home/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="商城手册（功能开启）" url="https://doc.iocoder.cn/mall/build/" />
 
   <div class="flex flex-col">
     <!-- 数据对照 -->
diff --git a/src/views/mall/product/brand/BrandForm.vue b/src/views/mall/product/brand/BrandForm.vue
index ab347378..7486dbee 100644
--- a/src/views/mall/product/brand/BrandForm.vue
+++ b/src/views/mall/product/brand/BrandForm.vue
@@ -21,7 +21,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/mall/product/brand/index.vue b/src/views/mall/product/brand/index.vue
index 354b834f..3e34b938 100644
--- a/src/views/mall/product/brand/index.vue
+++ b/src/views/mall/product/brand/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="商城手册（功能开启）" url="https://doc.iocoder.cn/mall/build/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mall/product/category/CategoryForm.vue b/src/views/mall/product/category/CategoryForm.vue
index 7f209275..8e89ae25 100644
--- a/src/views/mall/product/category/CategoryForm.vue
+++ b/src/views/mall/product/category/CategoryForm.vue
@@ -33,7 +33,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/mall/product/category/index.vue b/src/views/mall/product/category/index.vue
index f621c890..a47684b5 100644
--- a/src/views/mall/product/category/index.vue
+++ b/src/views/mall/product/category/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【商品】商品分类" url="https://doc.iocoder.cn/mall/product-category/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
@@ -55,7 +56,7 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" min-width="180">
         <template #default="scope">
           <el-button
             link
@@ -65,6 +66,15 @@
           >
             编辑
           </el-button>
+          <el-button
+            link
+            type="primary"
+            v-if="scope.row.parentId > 0"
+            @click="handleViewSpu(scope.row.id)"
+            v-hasPermi="['product:spu:query']"
+          >
+            查看商品
+          </el-button>
           <el-button
             link
             type="danger"
@@ -141,6 +151,15 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 查看商品操作 */
+const router = useRouter() // 路由
+const handleViewSpu = (id: number) => {
+  router.push({
+    name: 'ProductSpu',
+    query: { categoryId: id }
+  })
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()
diff --git a/src/views/mall/product/comment/index.vue b/src/views/mall/product/comment/index.vue
index 778ce9c1..c5989746 100644
--- a/src/views/mall/product/comment/index.vue
+++ b/src/views/mall/product/comment/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【商品】商品评价" url="https://doc.iocoder.cn/mall/product-comment/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -10,19 +11,34 @@
       label-width="68px"
     >
       <el-form-item label="回复状态" prop="replyStatus">
-        <el-select v-model="queryParams.replyStatus">
+        <el-select v-model="queryParams.replyStatus" class="!w-240px">
           <el-option label="已回复" :value="true" />
           <el-option label="未回复" :value="false" />
         </el-select>
       </el-form-item>
       <el-form-item label="商品名称" prop="spuName">
-        <el-input v-model="queryParams.spuName" placeholder="请输入商品名称" />
+        <el-input
+          v-model="queryParams.spuName"
+          placeholder="请输入商品名称"
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
       </el-form-item>
       <el-form-item label="用户名称" prop="userNickname">
-        <el-input v-model="queryParams.userNickname" placeholder="请输入用户名称" />
+        <el-input
+          v-model="queryParams.userNickname"
+          placeholder="请输入用户名称"
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
       </el-form-item>
       <el-form-item label="订单编号" prop="orderId">
-        <el-input v-model="queryParams.orderId" placeholder="请输入订单编号" />
+        <el-input
+          v-model="queryParams.orderId"
+          placeholder="请输入订单编号"
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
       </el-form-item>
       <el-form-item label="评论时间" prop="createTime">
         <el-date-picker
diff --git a/src/views/mall/product/property/index.vue b/src/views/mall/product/property/index.vue
index 465d4647..ac3401a2 100644
--- a/src/views/mall/product/property/index.vue
+++ b/src/views/mall/product/property/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【商品】商品属性" url="https://doc.iocoder.cn/mall/product-property/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mall/product/property/value/index.vue b/src/views/mall/product/property/value/index.vue
index d708172c..f0a6ef48 100644
--- a/src/views/mall/product/property/value/index.vue
+++ b/src/views/mall/product/property/value/index.vue
@@ -105,7 +105,7 @@ const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  propertyId: Number(params.propertyId),
+  propertyId: params.propertyId,
   name: undefined
 })
 const queryFormRef = ref() // 搜索的表单
diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue
index 2befe640..2ffb37d0 100644
--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/src/views/mall/product/spu/components/SkuList.vue
@@ -24,7 +24,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
@@ -168,7 +168,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
@@ -248,7 +248,7 @@
       >
         <template #default="{ row }">
           <span style="font-weight: bold; color: #40aaff">
-            {{ row.properties[index]?.valueName }}
+            {{ row.properties?.[index]?.valueName }}
           </span>
         </template>
       </el-table-column>
@@ -260,17 +260,17 @@
     </el-table-column>
     <el-table-column align="center" label="销售价(元)" min-width="80">
       <template #default="{ row }">
-        {{ row.price }}
+        {{ formatToFraction(row.price) }}
       </template>
     </el-table-column>
     <el-table-column align="center" label="市场价(元)" min-width="80">
       <template #default="{ row }">
-        {{ row.marketPrice }}
+        {{ formatToFraction(row.marketPrice) }}
       </template>
     </el-table-column>
     <el-table-column align="center" label="成本价(元)" min-width="80">
       <template #default="{ row }">
-        {{ row.costPrice }}
+        {{ formatToFraction(row.costPrice) }}
       </template>
     </el-table-column>
     <el-table-column align="center" label="库存" min-width="80">
@@ -284,7 +284,7 @@
 </template>
 <script lang="ts" setup>
 import { PropType, Ref } from 'vue'
-import { copyValueToTarget } from '@/utils'
+import { copyValueToTarget, formatToFraction } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
 import { UploadImg } from '@/components/UploadFile'
 import type { Property, Sku, Spu } from '@/api/mall/product/spu'
@@ -292,6 +292,7 @@ import { createImageViewer } from '@/components/ImageViewer'
 import { RuleConfig } from '@/views/mall/product/spu/components/index'
 import { PropertyAndValues } from './index'
 import { ElTable } from 'element-plus'
+import { isEmpty } from '@/utils/is'
 
 defineOptions({ name: 'SkuList' })
 const message = useMessage() // 消息弹窗
@@ -340,11 +341,22 @@ const imagePreview = (imgUrl: string) => {
 
 /** 批量添加 */
 const batchAdd = () => {
+  validateProperty()
   formData.value!.skus!.forEach((item) => {
     copyValueToTarget(item, skuList.value[0])
   })
 }
-
+/** 校验商品属性属性值 */
+const validateProperty = () => {
+  // 校验商品属性属性值是否为空，有一个为空都不给过
+  const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！'
+  for (const item of props.propertyList) {
+    if (!item.values || isEmpty(item.values)) {
+      message.warning(warningInfo)
+      throw new Error(warningInfo)
+    }
+  }
+}
 /** 删除 sku */
 const deleteSku = (row) => {
   const index = formData.value!.skus!.findIndex(
@@ -358,6 +370,7 @@ const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表
  * 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
  */
 const validateSku = () => {
+  validateProperty()
   let warningInfo = '请检查商品各行相关属性配置，'
   let validate = true // 默认通过
   for (const sku of formData.value!.skus!) {
@@ -421,7 +434,7 @@ watch(
 const generateTableData = (propertyList: any[]) => {
   // 构建数据结构
   const propertyValues = propertyList.map((item) =>
-    item.values.map((v) => ({
+    item.values.map((v: any) => ({
       propertyId: item.id,
       propertyName: item.name,
       valueId: v.id,
@@ -464,15 +477,14 @@ const generateTableData = (propertyList: any[]) => {
  */
 const validateData = (propertyList: any[]) => {
   const skuPropertyIds: number[] = []
-  formData.value!.skus!.forEach(
-    (sku) =>
-      sku.properties
-        ?.map((property) => property.propertyId)
-        ?.forEach((propertyId) => {
-          if (skuPropertyIds.indexOf(propertyId!) === -1) {
-            skuPropertyIds.push(propertyId!)
-          }
-        })
+  formData.value!.skus!.forEach((sku) =>
+    sku.properties
+      ?.map((property) => property.propertyId)
+      ?.forEach((propertyId) => {
+        if (skuPropertyIds.indexOf(propertyId!) === -1) {
+          skuPropertyIds.push(propertyId!)
+        }
+      })
   )
   const propertyIds = propertyList.map((item) => item.id)
   return skuPropertyIds.length === propertyIds.length
@@ -543,7 +555,7 @@ watch(
       return
     }
     // 添加新属性没有属性值也不做处理
-    if (propertyList.some((item) => item.values!.length === 0)) {
+    if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
       return
     }
     // 生成 table 数据，即 sku 列表
diff --git a/src/views/mall/product/spu/components/SkuTableSelect.vue b/src/views/mall/product/spu/components/SkuTableSelect.vue
index 13d6ad19..307208c6 100644
--- a/src/views/mall/product/spu/components/SkuTableSelect.vue
+++ b/src/views/mall/product/spu/components/SkuTableSelect.vue
@@ -3,7 +3,7 @@
     <el-table v-loading="loading" :data="list" show-overflow-tooltip>
       <el-table-column label="#" width="55">
         <template #default="{ row }">
-          <el-radio :label="row.id" v-model="selectedSkuId" @change="handleSelected(row)"
+          <el-radio :value="row.id" v-model="selectedSkuId" @change="handleSelected(row)"
             >&nbsp;
           </el-radio>
         </template>
diff --git a/src/views/mall/product/spu/components/SpuShowcase.vue b/src/views/mall/product/spu/components/SpuShowcase.vue
index 8bee4004..b8527e05 100644
--- a/src/views/mall/product/spu/components/SpuShowcase.vue
+++ b/src/views/mall/product/spu/components/SpuShowcase.vue
@@ -85,6 +85,7 @@ const openSpuTableSelect = () => {
 
 /**
  * 选择商品后触发
+ *
  * @param spus 选中的商品列表
  */
 const handleSpuSelected = (spus: ProductSpuApi.Spu | ProductSpuApi.Spu[]) => {
@@ -94,6 +95,7 @@ const handleSpuSelected = (spus: ProductSpuApi.Spu | ProductSpuApi.Spu[]) => {
 
 /**
  * 删除商品
+ *
  * @param index 商品索引
  */
 const handleRemoveSpu = (index: number) => {
diff --git a/src/views/mall/product/spu/components/SpuTableSelect.vue b/src/views/mall/product/spu/components/SpuTableSelect.vue
index 8028f749..4775e117 100644
--- a/src/views/mall/product/spu/components/SpuTableSelect.vue
+++ b/src/views/mall/product/spu/components/SpuTableSelect.vue
@@ -70,7 +70,7 @@
         <!-- 2. 单选模式 -->
         <el-table-column label="#" width="55" v-else>
           <template #default="{ row }">
-            <el-radio :label="row.id" v-model="selectedSpuId" @change="handleSingleSelected(row)">
+            <el-radio :value="row.id" v-model="selectedSpuId" @change="handleSingleSelected(row)">
               <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
               &nbsp;
             </el-radio>
diff --git a/src/views/mall/product/spu/form/DeliveryForm.vue b/src/views/mall/product/spu/form/DeliveryForm.vue
index 1503122d..6800d237 100644
--- a/src/views/mall/product/spu/form/DeliveryForm.vue
+++ b/src/views/mall/product/spu/form/DeliveryForm.vue
@@ -6,7 +6,7 @@
         <el-checkbox
           v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE)"
           :key="dict.value"
-          :label="dict.value"
+          :value="dict.value"
         >
           {{ dict.label }}
         </el-checkbox>
diff --git a/src/views/mall/product/spu/form/InfoForm.vue b/src/views/mall/product/spu/form/InfoForm.vue
index 76a09706..28bd309b 100644
--- a/src/views/mall/product/spu/form/InfoForm.vue
+++ b/src/views/mall/product/spu/form/InfoForm.vue
@@ -45,7 +45,7 @@
         :show-word-limit="true"
         class="w-80!"
         maxlength="128"
-        placeholder="请输入商品名称"
+        placeholder="请输入商品简介"
         type="textarea"
       />
     </el-form-item>
diff --git a/src/views/mall/product/spu/form/ProductAttributes.vue b/src/views/mall/product/spu/form/ProductAttributes.vue
index 28962f47..1bb24ffe 100644
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/src/views/mall/product/spu/form/ProductAttributes.vue
@@ -3,7 +3,7 @@
   <el-col v-for="(item, index) in attributeList" :key="index">
     <div>
       <el-text class="mx-1">属性名：</el-text>
-      <el-tag class="mx-1" :closable="!isDetail" type="success" @close="handleCloseProperty(index)">
+      <el-tag :closable="!isDetail" class="mx-1" type="success" @close="handleCloseProperty(index)">
         {{ item.name }}
       </el-tag>
     </div>
@@ -12,22 +12,34 @@
       <el-tag
         v-for="(value, valueIndex) in item.values"
         :key="value.id"
-        class="mx-1"
         :closable="!isDetail"
+        class="mx-1"
         @close="handleCloseValue(index, valueIndex)"
       >
         {{ value.name }}
       </el-tag>
-      <el-input
+      <el-select
         v-show="inputVisible(index)"
         :id="`input${index}`"
         :ref="setInputRef"
         v-model="inputValue"
-        class="!w-20"
+        :reserve-keyword="false"
+        allow-create
+        class="!w-30"
+        default-first-option
+        filterable
         size="small"
         @blur="handleInputConfirm(index, item.id)"
+        @change="handleInputConfirm(index, item.id)"
         @keyup.enter="handleInputConfirm(index, item.id)"
-      />
+      >
+        <el-option
+          v-for="item2 in attributeOptions"
+          :key="item2.id"
+          :label="item2.name"
+          :value="item2.name"
+        />
+      </el-select>
       <el-button
         v-show="!inputVisible(index)"
         class="button-new-tag ml-1"
@@ -42,9 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ElInput } from 'element-plus'
 import * as PropertyApi from '@/api/mall/product/property'
-import { PropertyVO } from '@/api/mall/product/property'
 import { PropertyAndValues } from '@/views/mall/product/spu/components'
 import { propTypes } from '@/utils/propTypes'
 
@@ -59,16 +69,17 @@ const inputVisible = computed(() => (index: number) => {
   if (attributeIndex.value === null) return false
   if (attributeIndex.value === index) return true
 })
-const inputRef = ref([]) //标签输入框Ref
+const inputRef = ref<any[]>([]) //标签输入框Ref
 /** 解决 ref 在 v-for 中的获取问题*/
-const setInputRef = (el) => {
+const setInputRef = (el: any) => {
   if (el === null || typeof el === 'undefined') return
   // 如果不存在 id 相同的元素才添加
-  if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
+  if (!inputRef.value.some((item) => item.inputRef?.attributes.id === el.inputRef?.attributes.id)) {
     inputRef.value.push(el)
   }
 }
 const attributeList = ref<PropertyAndValues[]>([]) // 商品属性列表
+const attributeOptions = ref([] as PropertyApi.PropertyValueVO[]) // 商品属性名称下拉框
 const props = defineProps({
   propertyList: {
     type: Array,
@@ -81,7 +92,7 @@ watch(
   () => props.propertyList,
   (data) => {
     if (!data) return
-    attributeList.value = data
+    attributeList.value = data as any
   },
   {
     deep: true,
@@ -97,19 +108,40 @@ const handleCloseValue = (index: number, valueIndex: number) => {
 /** 删除属性*/
 const handleCloseProperty = (index: number) => {
   attributeList.value?.splice(index, 1)
+  emit('success', attributeList.value)
 }
 
 /** 显示输入框并获取焦点 */
-const showInput = async (index) => {
+const showInput = async (index: number) => {
   attributeIndex.value = index
   inputRef.value[index].focus()
+  // 获取属性下拉选项
+  await getAttributeOptions(attributeList.value[index].id)
 }
 
 /** 输入框失去焦点或点击回车时触发 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const handleInputConfirm = async (index: number, propertyId: number) => {
   if (inputValue.value) {
-    // 保存属性值
+    // 1. 重复添加校验
+    if (attributeList.value[index].values.find((item) => item.name === inputValue.value)) {
+      message.warning('已存在相同属性值，请重试')
+      attributeIndex.value = null
+      inputValue.value = ''
+      return
+    }
+
+    // 2.1 情况一：属性值已存在，则直接使用并结束
+    const existValue = attributeOptions.value.find((item) => item.name === inputValue.value)
+    if (existValue) {
+      attributeIndex.value = null
+      inputValue.value = ''
+      attributeList.value[index].values.push({ id: existValue.id, name: existValue.name })
+      emit('success', attributeList.value)
+      return
+    }
+
+    // 2.2 情况二：新属性值，则进行保存
     try {
       const id = await PropertyApi.createPropertyValue({ propertyId, name: inputValue.value })
       attributeList.value[index].values.push({ id, name: inputValue.value })
@@ -122,4 +154,9 @@ const handleInputConfirm = async (index: number, propertyId: number) => {
   attributeIndex.value = null
   inputValue.value = ''
 }
+
+/** 获取商品属性下拉选项 */
+const getAttributeOptions = async (propertyId: number) => {
+  attributeOptions.value = await PropertyApi.getPropertyValueSimpleList(propertyId)
+}
 </script>
diff --git a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
index 9a8eee00..f45281b1 100644
--- a/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
+++ b/src/views/mall/product/spu/form/ProductPropertyAddForm.vue
@@ -7,9 +7,25 @@
       :model="formData"
       :rules="formRules"
       label-width="80px"
+      @keydown.enter.prevent="submitForm"
     >
       <el-form-item label="属性名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名称" />
+        <el-select
+          v-model="formData.name"
+          :reserve-keyword="false"
+          allow-create
+          class="!w-360px"
+          default-first-option
+          filterable
+          placeholder="请选择属性名称。如果不存在，可手动输入选择"
+        >
+          <el-option
+            v-for="item in attributeOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.name"
+          />
+        </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -36,6 +52,7 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 const attributeList = ref([]) // 商品属性列表
+const attributeOptions = ref([] as PropertyApi.PropertyVO[]) // 商品属性名称下拉框
 const props = defineProps({
   propertyList: {
     type: Array,
@@ -59,15 +76,39 @@ watch(
 const open = async () => {
   dialogVisible.value = true
   resetForm()
+  // 加载列表
+  await getAttributeOptions()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
 const submitForm = async () => {
-  // 校验表单
+  // 1.1 重复添加校验
+  for (const attrItem of attributeList.value) {
+    if (attrItem.name === formData.value.name) {
+      return message.error('该属性已存在，请勿重复添加')
+    }
+  }
+  // 1.2 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
   if (!valid) return
+
+  // 2.1 情况一：属性名已存在，则直接使用并结束
+  const existProperty = attributeOptions.value.find((item) => item.name === formData.value.name)
+  if (existProperty) {
+    // 添加到属性列表
+    attributeList.value.push({
+      id: existProperty.id,
+      ...formData.value,
+      values: []
+    })
+    // 关闭弹窗
+    dialogVisible.value = false
+    return
+  }
+
+  // 2.2 情况二：如果是不存在的属性，则需要执行新增
   // 提交请求
   formLoading.value = true
   try {
@@ -79,6 +120,7 @@ const submitForm = async () => {
       ...formData.value,
       values: []
     })
+    // 关闭弹窗
     message.success(t('common.createSuccess'))
     dialogVisible.value = false
   } finally {
@@ -93,4 +135,14 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+/** 获取商品属性下拉选项 */
+const getAttributeOptions = async () => {
+  formLoading.value = true
+  try {
+    attributeOptions.value = await PropertyApi.getPropertySimpleList()
+  } finally {
+    formLoading.value = false
+  }
+}
 </script>
diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue
index 0bd79723..18cd0296 100644
--- a/src/views/mall/product/spu/form/SkuForm.vue
+++ b/src/views/mall/product/spu/form/SkuForm.vue
@@ -1,20 +1,27 @@
 <!-- 商品发布 - 库存价格 -->
 <template>
-  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="isDetail">
-    <el-form-item label="分销类型" props="subCommissionType">
+  <el-form
+    ref="formRef"
+    v-loading="formLoading"
+    :disabled="isDetail"
+    :model="formData"
+    :rules="rules"
+    label-width="120px"
+  >
+    <el-form-item label="分销类型" prop="subCommissionType">
       <el-radio-group
         v-model="formData.subCommissionType"
-        @change="changeSubCommissionType"
         class="w-80"
+        @change="changeSubCommissionType"
       >
-        <el-radio :label="false">默认设置</el-radio>
-        <el-radio :label="true" class="radio">单独设置</el-radio>
+        <el-radio :value="false">默认设置</el-radio>
+        <el-radio :value="true" class="radio">单独设置</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="商品规格" props="specType">
-      <el-radio-group v-model="formData.specType" @change="onChangeSpec" class="w-80">
-        <el-radio :label="false" class="radio">单规格</el-radio>
-        <el-radio :label="true">多规格</el-radio>
+    <el-form-item label="商品规格" prop="specType">
+      <el-radio-group v-model="formData.specType" class="w-80" @change="onChangeSpec">
+        <el-radio :value="false" class="radio">单规格</el-radio>
+        <el-radio :value="true">多规格</el-radio>
       </el-radio-group>
     </el-form-item>
     <!-- 多规格添加-->
@@ -29,22 +36,22 @@
     <el-form-item v-if="formData.specType" label="商品属性">
       <el-button class="mb-10px mr-15px" @click="attributesAddFormRef.open">添加属性</el-button>
       <ProductAttributes
+        :is-detail="isDetail"
         :property-list="propertyList"
         @success="generateSkus"
-        :is-detail="isDetail"
       />
     </el-form-item>
     <template v-if="formData.specType && propertyList.length > 0">
-      <el-form-item label="批量设置" v-if="!isDetail">
+      <el-form-item v-if="!isDetail" label="批量设置">
         <SkuList :is-batch="true" :prop-form-data="formData" :property-list="propertyList" />
       </el-form-item>
       <el-form-item label="规格列表">
         <SkuList
           ref="skuListRef"
+          :is-detail="isDetail"
           :prop-form-data="formData"
           :property-list="propertyList"
           :rule-config="ruleConfig"
-          :is-detail="isDetail"
         />
       </el-form-item>
     </template>
@@ -94,7 +101,7 @@ const ruleConfig: RuleConfig[] = [
 ]
 
 const message = useMessage() // 消息弹窗
-
+const formLoading = ref(false)
 const props = defineProps({
   propFormData: {
     type: Object as PropType<Spu>,
@@ -181,7 +188,7 @@ const onChangeSpec = () => {
 }
 
 /** 调用 SkuList generateTableData 方法*/
-const generateSkus = (propertyList) => {
+const generateSkus = (propertyList: any[]) => {
   skuListRef.value.generateTableData(propertyList)
 }
 </script>
diff --git a/src/views/mall/product/spu/form/index.vue b/src/views/mall/product/spu/form/index.vue
index de874524..c4e4b7b2 100644
--- a/src/views/mall/product/spu/form/index.vue
+++ b/src/views/mall/product/spu/form/index.vue
@@ -63,7 +63,7 @@ import SkuForm from './SkuForm.vue'
 import DeliveryForm from './DeliveryForm.vue'
 import { convertToInteger, floatToFixed2, formatToFraction } from '@/utils'
 
-defineOptions({ name: 'ProductSpuForm' })
+defineOptions({ name: 'ProductSpuAdd' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
diff --git a/src/views/mall/product/spu/index.vue b/src/views/mall/product/spu/index.vue
index 398e69d5..0451ef3a 100644
--- a/src/views/mall/product/spu/index.vue
+++ b/src/views/mall/product/spu/index.vue
@@ -1,5 +1,6 @@
 <!-- 商品中心 - 商品列表  -->
 <template>
+  <doc-alert title="【商品】商品 SPU 与 SKU" url="https://doc.iocoder.cn/mall/product-spu-sku/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
@@ -243,6 +244,7 @@ import * as ProductCategoryApi from '@/api/mall/product/category'
 defineOptions({ name: 'ProductSpu' })
 
 const message = useMessage() // 消息弹窗
+const route = useRoute() // 路由
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由跳转
 
@@ -430,6 +432,11 @@ onActivated(() => {
 
 /** 初始化 **/
 onMounted(async () => {
+  // 解析路由的 categoryId
+  if (route.query.categoryId) {
+    queryParams.value.categoryId = Number(route.query.categoryId)
+  }
+  // 获得商品信息
   await getTabsCount()
   await getList()
   // 获得分类树
diff --git a/src/views/mall/promotion/article/ArticleForm.vue b/src/views/mall/promotion/article/ArticleForm.vue
index 1e44fad6..3f269cb0 100644
--- a/src/views/mall/promotion/article/ArticleForm.vue
+++ b/src/views/mall/promotion/article/ArticleForm.vue
@@ -51,7 +51,7 @@
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
@@ -64,7 +64,7 @@
               <el-radio
                 v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
@@ -77,7 +77,7 @@
               <el-radio
                 v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
diff --git a/src/views/mall/promotion/article/category/ArticleCategoryForm.vue b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
index e029195d..2e6e9e29 100644
--- a/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
+++ b/src/views/mall/promotion/article/category/ArticleCategoryForm.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】内容管理" url="https://doc.iocoder.cn/mall/promotion-content/" />
 
   <Dialog v-model="dialogVisible" :title="dialogTitle">
     <el-form
@@ -19,7 +20,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/mall/promotion/article/index.vue b/src/views/mall/promotion/article/index.vue
index 323204df..875168eb 100644
--- a/src/views/mall/promotion/article/index.vue
+++ b/src/views/mall/promotion/article/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】内容管理" url="https://doc.iocoder.cn/mall/promotion-content/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -79,6 +80,7 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="ID" min-width="180" prop="id" />
       <el-table-column align="center" label="封面" min-width="80" prop="picUrl">
         <template #default="{ row }">
           <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
diff --git a/src/views/mall/promotion/banner/BannerForm.vue b/src/views/mall/promotion/banner/BannerForm.vue
index 03bca0f9..9d1b7fc7 100644
--- a/src/views/mall/promotion/banner/BannerForm.vue
+++ b/src/views/mall/promotion/banner/BannerForm.vue
@@ -34,7 +34,7 @@
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
@@ -47,7 +47,7 @@
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_BANNER_POSITION)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
diff --git a/src/views/mall/promotion/banner/index.vue b/src/views/mall/promotion/banner/index.vue
index acc91033..e25431af 100644
--- a/src/views/mall/promotion/banner/index.vue
+++ b/src/views/mall/promotion/banner/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】内容管理" url="https://doc.iocoder.cn/mall/promotion-content/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/promotion/bargain/activity/index.vue b/src/views/mall/promotion/bargain/activity/index.vue
index 3ba7a0f2..40449fea 100644
--- a/src/views/mall/promotion/bargain/activity/index.vue
+++ b/src/views/mall/promotion/bargain/activity/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】砍价活动" url="https://doc.iocoder.cn/mall/promotion-bargain/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/promotion/bargain/record/index.vue b/src/views/mall/promotion/bargain/record/index.vue
index f7677eb6..306d8ea1 100644
--- a/src/views/mall/promotion/bargain/record/index.vue
+++ b/src/views/mall/promotion/bargain/record/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】砍价活动" url="https://doc.iocoder.cn/mall/promotion-bargain/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/promotion/combination/activity/index.vue b/src/views/mall/promotion/combination/activity/index.vue
index 2ee8fe35..a40044df 100644
--- a/src/views/mall/promotion/combination/activity/index.vue
+++ b/src/views/mall/promotion/combination/activity/index.vue
@@ -1,29 +1,30 @@
 <template>
+  <doc-alert title="【营销】拼团活动" url="https://doc.iocoder.cn/mall/promotion-combination/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="活动名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入活动名称"
+          class="!w-240px"
           clearable
+          placeholder="请输入活动名称"
           @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="活动状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          placeholder="请选择活动状态"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择活动状态"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -34,15 +35,22 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
         <el-button
-          type="primary"
+          v-hasPermi="['promotion:combination-activity:create']"
           plain
+          type="primary"
           @click="openForm('create')"
-          v-hasPermi="['promotion:combination-activity:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
         </el-button>
       </el-form-item>
     </el-form>
@@ -50,77 +58,77 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="活动编号" prop="id" min-width="80" />
-      <el-table-column label="活动名称" prop="name" min-width="140" />
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column label="活动编号" min-width="80" prop="id" />
+      <el-table-column label="活动名称" min-width="140" prop="name" />
       <el-table-column label="活动时间" min-width="210">
         <template #default="scope">
           {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
           ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
         </template>
       </el-table-column>
-      <el-table-column label="商品图片" prop="spuName" min-width="80">
+      <el-table-column label="商品图片" min-width="80" prop="spuName">
         <template #default="scope">
           <el-image
+            :preview-src-list="[scope.row.picUrl]"
             :src="scope.row.picUrl"
             class="h-40px w-40px"
-            :preview-src-list="[scope.row.picUrl]"
             preview-teleported
           />
         </template>
       </el-table-column>
-      <el-table-column label="商品标题" prop="spuName" min-width="300" />
+      <el-table-column label="商品标题" min-width="300" prop="spuName" />
       <el-table-column
+        :formatter="fenToYuanFormat"
         label="原价"
-        prop="marketPrice"
         min-width="100"
-        :formatter="fenToYuanFormat"
+        prop="marketPrice"
       />
-      <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+      <el-table-column label="拼团价" min-width="100" prop="seckillPrice">
         <template #default="scope">
           {{ formatCombinationPrice(scope.row.products) }}
         </template>
       </el-table-column>
-      <el-table-column label="开团组数" prop="groupCount" min-width="100" />
-      <el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
-      <el-table-column label="购买次数" prop="recordCount" min-width="100" />
-      <el-table-column label="活动状态" align="center" prop="status" min-width="100">
+      <el-table-column label="开团组数" min-width="100" prop="groupCount" />
+      <el-table-column label="成团组数" min-width="100" prop="groupSuccessCount" />
+      <el-table-column label="购买次数" min-width="100" prop="recordCount" />
+      <el-table-column align="center" label="活动状态" min-width="100" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
         align="center"
+        label="创建时间"
         prop="createTime"
-        :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="150px" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" width="150px">
         <template #default="scope">
           <el-button
+            v-hasPermi="['promotion:combination-activity:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['promotion:combination-activity:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-if="scope.row.status === 0"
+            v-hasPermi="['promotion:combination-activity:close']"
             link
             type="danger"
             @click="handleClose(scope.row.id)"
-            v-if="scope.row.status === 0"
-            v-hasPermi="['promotion:combination-activity:close']"
           >
             关闭
           </el-button>
           <el-button
+            v-else
+            v-hasPermi="['promotion:combination-activity:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-else
-            v-hasPermi="['promotion:combination-activity:delete']"
           >
             删除
           </el-button>
@@ -129,9 +137,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -140,12 +148,11 @@
   <CombinationActivityForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
 import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
 import CombinationActivityForm from './CombinationActivityForm.vue'
-import { formatDate } from '@/utils/formatTime'
 import { fenToYuanFormat } from '@/utils/formatter'
 import { fenToYuan } from '@/utils'
 
@@ -164,7 +171,6 @@ const queryParams = reactive({
   status: null
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
 /** 查询列表 */
 const getList = async () => {
@@ -196,12 +202,11 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
-// TODO 芋艿：这里要改下
 /** 关闭按钮操作 */
 const handleClose = async (id: number) => {
   try {
     // 关闭的二次确认
-    await message.confirm('确认关闭该秒杀活动吗？')
+    await message.confirm('确认关闭该拼团活动吗？')
     // 发起关闭
     await CombinationActivityApi.closeCombinationActivity(id)
     message.success('关闭成功')
diff --git a/src/views/mall/promotion/combination/components/CombinationShowcase.vue b/src/views/mall/promotion/combination/components/CombinationShowcase.vue
new file mode 100644
index 00000000..ba88434b
--- /dev/null
+++ b/src/views/mall/promotion/combination/components/CombinationShowcase.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="flex flex-wrap items-center gap-8px">
+    <div
+      v-for="(combinationActivity, index) in Activitys"
+      :key="combinationActivity.id"
+      class="select-box spu-pic"
+    >
+      <el-tooltip :content="combinationActivity.name">
+        <div class="relative h-full w-full">
+          <el-image :src="combinationActivity.picUrl" class="h-full w-full" />
+          <Icon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </el-tooltip>
+    </div>
+    <el-tooltip content="选择活动" v-if="canAdd">
+      <div class="select-box" @click="openCombinationActivityTableSelect">
+        <Icon icon="ep:plus" />
+      </div>
+    </el-tooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <CombinationTableSelect
+    ref="combinationActivityTableSelectRef"
+    :multiple="limit != 1"
+    @change="handleActivitySelected"
+  />
+</template>
+<script lang="ts" setup>
+import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
+import { propTypes } from '@/utils/propTypes'
+import { oneOfType } from 'vue-types'
+import { isArray } from '@/utils/is'
+import CombinationTableSelect from '@/views/mall/promotion/combination/components/CombinationTableSelect.vue'
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'CombinationShowcase' })
+
+const props = defineProps({
+  modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
+  // 限制数量：默认不限制
+  limit: propTypes.number.def(Number.MAX_VALUE),
+  disabled: propTypes.bool.def(false)
+})
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true
+  // 情况三：检查已添加数量是否小于限制数量
+  return Activitys.value.length < props.limit
+})
+
+// 拼团活动列表
+const Activitys = ref<CombinationActivityApi.CombinationActivityVO[]>([])
+
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = isArray(props.modelValue)
+      ? // 情况一：多选
+        props.modelValue
+      : // 情况二：单选
+        props.modelValue
+        ? [props.modelValue]
+        : []
+    // 不需要返显
+    if (ids.length === 0) {
+      Activitys.value = []
+      return
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      Activitys.value.length === 0 ||
+      Activitys.value.some((combinationActivity) => !ids.includes(combinationActivity.id!))
+    ) {
+      Activitys.value = await CombinationActivityApi.getCombinationActivityListByIds(ids)
+    }
+  },
+  { immediate: true }
+)
+
+/** 活动表格选择对话框 */
+const combinationActivityTableSelectRef = ref()
+// 打开对话框
+const openCombinationActivityTableSelect = () => {
+  combinationActivityTableSelectRef.value.open(Activitys.value)
+}
+
+/**
+ * 选择活动后触发
+ * @param activityVOs 选中的活动列表
+ */
+const handleActivitySelected = (
+  activityVOs:
+    | CombinationActivityApi.CombinationActivityVO
+    | CombinationActivityApi.CombinationActivityVO[]
+) => {
+  Activitys.value = isArray(activityVOs) ? activityVOs : [activityVOs]
+  emitActivityChange()
+}
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  Activitys.value.splice(index, 1)
+  emitActivityChange()
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const combinationActivity = Activitys.value.length > 0 ? Activitys.value[0] : null
+    emit('update:modelValue', combinationActivity?.id || 0)
+    emit('change', combinationActivity)
+  } else {
+    emit(
+      'update:modelValue',
+      Activitys.value.map((combinationActivity) => combinationActivity.id)
+    )
+    emit('change', Activitys.value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/src/views/mall/promotion/combination/components/CombinationTableSelect.vue b/src/views/mall/promotion/combination/components/CombinationTableSelect.vue
new file mode 100644
index 00000000..36395214
--- /dev/null
+++ b/src/views/mall/promotion/combination/components/CombinationTableSelect.vue
@@ -0,0 +1,345 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择活动" width="70%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <el-form-item label="活动名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入活动名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="活动状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择活动状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column width="55" v-if="multiple">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column label="#" width="55" v-else>
+          <template #default="{ row }">
+            <el-radio
+              :value="row.id"
+              v-model="selectedActivityId"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" prop="id" min-width="80" />
+        <el-table-column label="活动名称" prop="name" min-width="140" />
+        <el-table-column label="活动时间" min-width="210">
+          <template #default="scope">
+            {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
+            ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商品图片" prop="spuName" min-width="80">
+          <template #default="scope">
+            <el-image
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              :preview-src-list="[scope.row.picUrl]"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" prop="spuName" min-width="300" />
+        <el-table-column
+          label="原价"
+          prop="marketPrice"
+          min-width="100"
+          :formatter="fenToYuanFormat"
+        />
+        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+          <template #default="scope">
+            {{ formatCombinationPrice(scope.row.products) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
+        <el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
+        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
+        <el-table-column label="活动状态" align="center" prop="status" min-width="100">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer v-if="multiple">
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { handleTree } from '@/utils/tree'
+
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import { propTypes } from '@/utils/propTypes'
+import { CHANGE_EVENT } from 'element-plus'
+import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { fenToYuan } from '@/utils'
+
+type CombinationActivityVO = Required<CombinationActivityApi.CombinationActivityVO>
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'CombinationTableSelect' })
+
+defineProps({
+  // 多选模式
+  multiple: propTypes.bool.def(false)
+})
+
+// 列表的总页数
+const total = ref(0)
+// 列表的数据
+const list = ref<CombinationActivityVO[]>([])
+// 列表的加载中
+const loading = ref(false)
+// 弹窗的是否展示
+const dialogVisible = ref(false)
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: undefined
+})
+
+/** 打开弹窗 */
+const open = (CombinationList?: CombinationActivityVO[]) => {
+  // 重置
+  checkedActivitys.value = []
+  checkedStatus.value = {}
+  isCheckAll.value = false
+  isIndeterminate.value = false
+
+  // 处理已选中
+  if (CombinationList && CombinationList.length > 0) {
+    checkedActivitys.value = [...CombinationList]
+    checkedStatus.value = Object.fromEntries(
+      CombinationList.map((activityVO) => [activityVO.id, true])
+    )
+  }
+
+  dialogVisible.value = true
+  resetQuery()
+}
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open })
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CombinationActivityApi.getCombinationActivityPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id] = checkedStatus.value[activityVO.id] || false)
+    )
+    // 计算全选框状态
+    calculateIsCheckAll()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: '',
+    createTime: []
+  }
+  getList()
+}
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatCombinationPrice = (products) => {
+  const combinationPrice = Math.min(...products.map((item) => item.combinationPrice))
+  return `￥${fenToYuan(combinationPrice)}`
+}
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedActivitys = ref<CombinationActivityVO[]>([])
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+// 选中的活动 activityId
+const selectedActivityId = ref()
+/** 单选中时触发 */
+const handleSingleSelected = (combinationActivityVO: CombinationActivityVO) => {
+  emits(CHANGE_EVENT, combinationActivityVO)
+  // 关闭弹窗
+  dialogVisible.value = false
+  // 记住上次选择的ID
+  selectedActivityId.value = combinationActivityVO.id
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits(CHANGE_EVENT, [...checkedActivitys.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [CombinationActivityApi: CombinationActivityVO | CombinationActivityVO[] | any]
+}>()
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((combinationActivity) => handleCheckOne(checked, combinationActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param combinationActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  combinationActivity: CombinationActivityVO,
+  isCalcCheckAll: boolean
+) => {
+  if (checked) {
+    checkedActivitys.value.push(combinationActivity)
+    checkedStatus.value[combinationActivity.id] = true
+  } else {
+    const index = findCheckedIndex(combinationActivity)
+    if (index > -1) {
+      checkedActivitys.value.splice(index, 1)
+      checkedStatus.value[combinationActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (activityVO: CombinationActivityVO) =>
+  checkedActivitys.value.findIndex((item) => item.id === activityVO.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((activityVO) => checkedStatus.value[activityVO.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((activityVO) => checkedStatus.value[activityVO.id])
+}
+
+// 分类列表
+const categoryList = ref()
+// 分类树
+const categoryTreeList = ref()
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获得分类树
+  categoryList.value = await ProductCategoryApi.getCategoryList({})
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId')
+})
+</script>
diff --git a/src/views/mall/promotion/combination/record/index.vue b/src/views/mall/promotion/combination/record/index.vue
index caef4026..223a7237 100644
--- a/src/views/mall/promotion/combination/record/index.vue
+++ b/src/views/mall/promotion/combination/record/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】拼团活动" url="https://doc.iocoder.cn/mall/promotion-combination/" />
 
   <!-- 统计信息展示 -->
   <el-row :gutter="12">
diff --git a/src/views/mall/promotion/components/SpuAndSkuList.vue b/src/views/mall/promotion/components/SpuAndSkuList.vue
index facc6cf3..1a0598ca 100644
--- a/src/views/mall/promotion/components/SpuAndSkuList.vue
+++ b/src/views/mall/promotion/components/SpuAndSkuList.vue
@@ -29,6 +29,16 @@
     </el-table-column>
     <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
     <el-table-column align="center" label="库存" min-width="90" prop="stock" />
+    <el-table-column
+      v-if="spuData.length > 1 && deletable"
+      align="center"
+      label="操作"
+      min-width="90"
+    >
+      <template #default="scope">
+        <el-button link type="primary" @click="deleteSpu(scope.row.id)"> 删除</el-button>
+      </template>
+    </el-table-column>
   </el-table>
 </template>
 <script generic="T extends Spu" lang="ts" setup>
@@ -40,16 +50,19 @@ import { SpuProperty } from '@/views/mall/promotion/components/index'
 
 defineOptions({ name: 'PromotionSpuAndSkuList' })
 
+const message = useMessage() // 消息弹窗
+
 const props = defineProps<{
   spuList: T[]
   ruleConfig: RuleConfig[]
   spuPropertyListP: SpuProperty<T>[]
+  deletable?: boolean // SPU 是否可删除；
 }>()
 
 const spuData = ref<Spu[]>([]) // spu 详情数据列表
 const skuListRef = ref() // 商品属性列表Ref
 const spuPropertyList = ref<SpuProperty<T>[]>([]) // spuId 对应的 sku 的属性列表
-const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
+const expandRowKeys = ref<string[]>([]) // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
 
 /**
  * 获取所有 sku 活动配置
@@ -58,10 +71,10 @@ const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属
  */
 const getSkuConfigs = (extendedAttribute: string) => {
   skuListRef.value.validateSku()
-  const seckillProducts = []
+  const seckillProducts: any[] = []
   spuPropertyList.value.forEach((item) => {
-    item.spuDetail.skus.forEach((sku) => {
-      seckillProducts.push(sku[extendedAttribute])
+    item.spuDetail.skus?.forEach((sku: any) => {
+      seckillProducts.push(sku[extendedAttribute] as any)
     })
   })
   return seckillProducts
@@ -77,6 +90,19 @@ const imagePreview = (imgUrl: string) => {
   })
 }
 
+// 删除时的触发事件
+const emits = defineEmits<{
+  (e: 'delete', spuId: number): void
+}>()
+
+/** 多选时可以删除 SPU **/
+const deleteSpu = async (spuId: number) => {
+  await message.confirm('是否删除商品编号为' + spuId + '的数据？')
+  const index = spuData.value.findIndex((item) => item.id == spuId)
+  spuData.value.splice(index, 1)
+  emits('delete', spuId)
+}
+
 /**
  * 将传进来的值赋值给 skuList
  */
@@ -98,10 +124,10 @@ watch(
   () => props.spuPropertyListP,
   (data) => {
     if (!data) return
-    spuPropertyList.value = data as SpuProperty<T>[]
+    spuPropertyList.value = data as SpuProperty<T>[] as any
     // 解决如果之前选择的是单规格 spu 的话后面选择多规格 sku 多规格属性信息不展示的问题。解决方法：让 SkuList 组件重新渲染（行折叠会干掉包含的组件展开时会重新加载）
     setTimeout(() => {
-      expandRowKeys.value = data.map((item) => item.spuId)
+      expandRowKeys.value = data.map((item) => item.spuId + '')
     }, 200)
   },
   {
diff --git a/src/views/mall/promotion/components/SpuSelect.vue b/src/views/mall/promotion/components/SpuSelect.vue
index fd7dffe0..648a8635 100644
--- a/src/views/mall/promotion/components/SpuSelect.vue
+++ b/src/views/mall/promotion/components/SpuSelect.vue
@@ -115,7 +115,7 @@ import { getPropertyList, PropertyAndValues, SkuList } from '@/views/mall/produc
 import { ElTable } from 'element-plus'
 import { dateFormatter } from '@/utils/formatTime'
 import { createImageViewer } from '@/components/ImageViewer'
-import { formatToFraction } from '@/utils'
+import { floatToFixed2, formatToFraction } from '@/utils'
 import { defaultProps, handleTree } from '@/utils/tree'
 
 import * as ProductCategoryApi from '@/api/mall/product/category'
@@ -228,6 +228,13 @@ const expandChange = async (row: ProductSpuApi.Spu, expandedRows?: ProductSpuApi
   }
   // 获取 SPU 详情
   const res = (await ProductSpuApi.getSpu(row.id as number)) as ProductSpuApi.Spu
+  res.skus?.forEach((item) => {
+    item.price = floatToFixed2(item.price)
+    item.marketPrice = floatToFixed2(item.marketPrice)
+    item.costPrice = floatToFixed2(item.costPrice)
+    item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
+    item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
+  })
   propertyList.value = getPropertyList(res)
   spuData.value = res
   isExpand.value = true
diff --git a/src/views/mall/promotion/coupon/components/CouponSelect.vue b/src/views/mall/promotion/coupon/components/CouponSelect.vue
index 715dcb7d..66151ebc 100644
--- a/src/views/mall/promotion/coupon/components/CouponSelect.vue
+++ b/src/views/mall/promotion/coupon/components/CouponSelect.vue
@@ -33,32 +33,6 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="优惠券状态" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            class="!w-240px"
-            clearable
-            placeholder="请选择优惠券状态"
-          >
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="创建时间" prop="createTime">
-          <el-date-picker
-            v-model="queryParams.createTime"
-            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-240px"
-            end-placeholder="结束日期"
-            start-placeholder="开始日期"
-            type="daterange"
-            value-format="YYYY-MM-DD HH:mm:ss"
-          />
-        </el-form-item>
         <el-form-item>
           <el-button @click="handleQuery">
             <Icon class="mr-5px" icon="ep:search" />
@@ -118,13 +92,6 @@
             <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
           </template>
         </el-table-column>
-        <el-table-column
-          :formatter="dateFormatter"
-          align="center"
-          label="创建时间"
-          prop="createTime"
-          width="180"
-        />
       </el-table>
       <!-- 分页 -->
       <Pagination
@@ -148,19 +115,21 @@ import {
   takeLimitCountFormat,
   validityTypeFormat
 } from '@/views/mall/promotion/coupon/formatter'
-import { dateFormatter } from '@/utils/formatTime'
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { CouponTemplateTakeTypeEnum } from '@/utils/constants'
 
 defineOptions({ name: 'CouponSelect' })
 
-defineProps<{
-  multipleSelection: CouponTemplateApi.CouponTemplateVO[]
+const props = defineProps<{
+  multipleSelection?: CouponTemplateApi.CouponTemplateVO[]
+  takeType: number // 领取方式
 }>()
 const emit = defineEmits<{
-  (e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[])
+  (e: 'update:multipleSelection', v: CouponTemplateApi.CouponTemplateVO[]): void
+  (e: 'change', v: CouponTemplateApi.CouponTemplateVO[]): void
 }>()
 const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('选择优惠卷') // 弹窗的标题
+const dialogTitle = ref('选择优惠劵') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -169,18 +138,18 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: null,
-  status: null,
   discountType: null,
-  type: null,
-  createTime: []
+  canTakeTypes: [CouponTemplateTakeTypeEnum.USER.type] // 只获得直接领取的券
 })
 const queryFormRef = ref() // 搜索的表单
+const selectedCouponList = ref<CouponTemplateApi.CouponTemplateVO[]>([]) // 选择的数据
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
     // 执行查询
+    queryParams.canTakeTypes = [props.takeType] as any
     const data = await CouponTemplateApi.getCouponTemplatePage(queryParams)
     list.value = data.list
     total.value = data.total
@@ -209,11 +178,15 @@ const open = async () => {
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 const handleSelectionChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
-  emit('update:multipleSelection', val)
+  if (props.multipleSelection) {
+    emit('update:multipleSelection', val)
+    return
+  }
+  selectedCouponList.value = val
 }
 
 const submitForm = () => {
   dialogVisible.value = false
+  emit('change', selectedCouponList.value)
 }
-// TODO @puhui999：提前 todo，先不用改；未来单独成组件，其它模块可以服用；例如说，满减送，可以选择优惠劵；
 </script>
diff --git a/src/views/mall/promotion/coupon/components/CouponSendForm.vue b/src/views/mall/promotion/coupon/components/CouponSendForm.vue
index be0223a0..4b9edb7c 100644
--- a/src/views/mall/promotion/coupon/components/CouponSendForm.vue
+++ b/src/views/mall/promotion/coupon/components/CouponSendForm.vue
@@ -67,7 +67,7 @@
             :disabled="sendLoading"
             :loading="sendLoading"
             @click="handleSendCoupon(scope.row.id)"
-            v-hasPermi="['member:level:update']"
+            v-hasPermi="['promotion:coupon:send']"
           >
             发送
           </el-button>
diff --git a/src/views/mall/promotion/coupon/formatter.ts b/src/views/mall/promotion/coupon/formatter.ts
index f00138a6..8005d0c0 100644
--- a/src/views/mall/promotion/coupon/formatter.ts
+++ b/src/views/mall/promotion/coupon/formatter.ts
@@ -16,10 +16,14 @@ export const discountFormat = (row: CouponTemplateVO) => {
 
 // 格式化【领取上限】
 export const takeLimitCountFormat = (row: CouponTemplateVO) => {
-  if (row.takeLimitCount === -1) {
-    return '无领取限制'
+  if (row.takeLimitCount) {
+    if (row.takeLimitCount === -1) {
+      return '无领取限制'
+    }
+    return `${row.takeLimitCount} 张/人`
+  } else {
+    return ' '
   }
-  return `${row.takeLimitCount} 张/人`
 }
 
 // 格式化【有效期限】
@@ -33,8 +37,19 @@ export const validityTypeFormat = (row: CouponTemplateVO) => {
   return '未知【' + row.validityType + '】'
 }
 
+// 格式化【totalCount】
+export const totalCountFormat = (row: CouponTemplateVO) => {
+  if (row.totalCount === -1) {
+    return '不限制'
+  }
+  return row.totalCount
+}
+
 // 格式化【剩余数量】
 export const remainedCountFormat = (row: CouponTemplateVO) => {
+  if (row.totalCount === -1) {
+    return '不限制'
+  }
   return row.totalCount - row.takeCount
 }
 
diff --git a/src/views/mall/promotion/coupon/index.vue b/src/views/mall/promotion/coupon/index.vue
index abd17ef5..25d2e942 100755
--- a/src/views/mall/promotion/coupon/index.vue
+++ b/src/views/mall/promotion/coupon/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】优惠劵" url="https://doc.iocoder.cn/mall/promotion-coupon/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue b/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
index 408f381a..b076dea1 100644
--- a/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
+++ b/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
@@ -10,12 +10,24 @@
       <el-form-item label="优惠券名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入优惠券名称" />
       </el-form-item>
+      <el-form-item label="优惠券描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          :autosize="{ minRows: 2, maxRows: 2 }"
+          :clearable="true"
+          :show-word-limit="true"
+          class="w-1/1!"
+          maxlength="512"
+          placeholder="请输入优惠券描述"
+          type="textarea"
+        />
+      </el-form-item>
       <el-form-item label="优惠劵类型" prop="productScope">
         <el-radio-group v-model="formData.productScope">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -40,7 +52,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -101,8 +113,9 @@
       </el-form-item>
       <el-form-item label="领取方式" prop="takeType">
         <el-radio-group v-model="formData.takeType">
-          <el-radio :key="1" :label="1">直接领取</el-radio>
-          <el-radio :key="2" :label="2">指定发放</el-radio>
+          <el-radio :key="1" :value="1">直接领取</el-radio>
+          <el-radio :key="2" :value="2">指定发放</el-radio>
+          <el-radio :key="2" :value="3">新人劵</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item v-if="formData.takeType === 1" label="发放数量" prop="totalCount">
@@ -130,7 +143,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_COUPON_TEMPLATE_VALIDITY_TYPE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -144,7 +157,6 @@
         <el-date-picker
           v-model="formData.validTimes"
           :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
-          style="width: 240px"
           type="datetimerange"
           value-format="x"
         />
@@ -218,6 +230,7 @@ const formData = ref({
   fixedStartTerm: undefined,
   fixedEndTerm: undefined,
   productScope: PromotionProductScopeEnum.ALL.scope,
+  description: undefined,
   productScopeValues: [], // 商品范围：值为 品类编号列表 或 商品编号列表 ，用于提交
   productCategoryIds: [], // 仅用于表单，不提交
   productSpuIds: [] // 仅用于表单，不提交
@@ -297,7 +310,9 @@ const submitForm = async () => {
       validEndTime:
         formData.value.validTimes && formData.value.validTimes.length === 2
           ? formData.value.validTimes[1]
-          : undefined
+          : undefined,
+      totalCount: formData.value.takeType === 1 ? formData.value.totalCount : -1,
+      takeLimitCount: formData.value.takeType === 1 ? formData.value.takeLimitCount : -1
     } as unknown as CouponTemplateApi.CouponTemplateVO
 
     // 设置商品范围
@@ -323,6 +338,7 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     name: undefined,
+    description: undefined,
     discountType: PromotionDiscountTypeEnum.PRICE.type,
     discountPrice: undefined,
     discountPercent: undefined,
diff --git a/src/views/mall/promotion/coupon/template/index.vue b/src/views/mall/promotion/coupon/template/index.vue
index d2211683..bc121ead 100755
--- a/src/views/mall/promotion/coupon/template/index.vue
+++ b/src/views/mall/promotion/coupon/template/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】优惠劵" url="https://doc.iocoder.cn/mall/promotion-coupon/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
@@ -108,7 +109,12 @@
         prop="validityType"
         width="185"
       />
-      <el-table-column align="center" label="发放数量" prop="totalCount" />
+      <el-table-column
+        :formatter="totalCountFormat"
+        align="center"
+        label="发放数量"
+        prop="totalCount"
+      />
       <el-table-column
         :formatter="remainedCountFormat"
         align="center"
@@ -188,6 +194,7 @@ import {
   discountFormat,
   remainedCountFormat,
   takeLimitCountFormat,
+  totalCountFormat,
   validityTypeFormat
 } from '@/views/mall/promotion/coupon/formatter'
 
diff --git a/src/views/mall/promotion/discountActivity/DiscountActivityForm.vue b/src/views/mall/promotion/discountActivity/DiscountActivityForm.vue
index d7a98061..6c2469f6 100644
--- a/src/views/mall/promotion/discountActivity/DiscountActivityForm.vue
+++ b/src/views/mall/promotion/discountActivity/DiscountActivityForm.vue
@@ -8,26 +8,40 @@
       :schema="allSchemas.formSchema"
     >
       <!-- 先选择 -->
-      <!-- TODO @zhangshuai：商品允许选择多个 -->
-      <!-- TODO @zhangshuai：选择后的 SKU，需要后面加个【删除】按钮 -->
-      <!-- TODO @zhangshuai：展示的金额，貌似不对，大了 100 倍，需要看下 -->
-      <!-- TODO @zhangshuai：“优惠类型”，是每个 SKU 可以自定义已设置哈。因为每个商品 SKU 的折扣和减少价格，可能不同。具体交互，可以注册一个 youzan.com 看看；它的交互方式是，如果设置了“优惠金额”，则算“减价”；如果再次设置了“折扣百分比”，就算“打折”；这样形成一个互斥的优惠类型 -->
       <template #spuId>
         <el-button @click="spuSelectRef.open()">选择商品</el-button>
         <SpuAndSkuList
           ref="spuAndSkuListRef"
+          :deletable="true"
           :rule-config="ruleConfig"
           :spu-list="spuList"
           :spu-property-list-p="spuPropertyList"
+          @delete="deleteSpu"
         >
           <el-table-column align="center" label="优惠金额" min-width="168">
-            <template #default="{ row: sku }">
-              <el-input-number v-model="sku.productConfig.discountPrice" :min="0" class="w-100%" />
+            <template #default="{ row }">
+              <el-input-number
+                v-model="row.productConfig.discountPrice"
+                :max="parseFloat(fenToYuan(row.price))"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="w-100%"
+                @change="handleSkuDiscountPriceChange(row)"
+              />
             </template>
           </el-table-column>
           <el-table-column align="center" label="折扣百分比(%)" min-width="168">
-            <template #default="{ row: sku }">
-              <el-input-number v-model="sku.productConfig.discountPercent" class="w-100%" />
+            <template #default="{ row }">
+              <el-input-number
+                v-model="row.productConfig.discountPercent"
+                :max="100"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="w-100%"
+                @change="handleSkuDiscountPercentChange(row)"
+              />
             </template>
           </el-table-column>
         </SpuAndSkuList>
@@ -43,10 +57,12 @@
 <script lang="ts" setup>
 import { SpuAndSkuList, SpuProperty, SpuSelect } from '../components'
 import { allSchemas, rules } from './discountActivity.data'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, debounce } from 'lodash-es'
 import * as DiscountActivityApi from '@/api/mall/promotion/discount/discountActivity'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
+import { convertToInteger, erpCalculatePercentage, fenToYuan, yuanToFen } from '@/utils'
+import { PromotionDiscountTypeEnum } from '@/utils/constants'
 
 defineOptions({ name: 'PromotionDiscountActivityForm' })
 
@@ -62,11 +78,17 @@ const formRef = ref() // 表单 Ref
 
 const spuSelectRef = ref() // 商品和属性选择 Ref
 const spuAndSkuListRef = ref() // sku 限时折扣  配置组件Ref
-const ruleConfig: RuleConfig[] = []
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.discountPrice',
+    rule: (arg) => arg > 0,
+    message: '商品优惠金额不能为 0 ！！！'
+  }
+]
 const spuList = ref<DiscountActivityApi.SpuExtension[]>([]) // 选择的 spu
 const spuPropertyList = ref<SpuProperty<DiscountActivityApi.SpuExtension>[]>([])
+const spuIds = ref<number[]>([])
 const selectSpu = (spuId: number, skuIds: number[]) => {
-  formRef.value.setValues({ spuId })
   getSpuDetails(spuId, skuIds)
 }
 /**
@@ -75,14 +97,22 @@ const selectSpu = (spuId: number, skuIds: number[]) => {
 const getSpuDetails = async (
   spuId: number,
   skuIds: number[] | undefined,
-  products?: DiscountActivityApi.DiscountProductVO[]
+  products?: DiscountActivityApi.DiscountProductVO[],
+  type?: string
 ) => {
-  const spuProperties: SpuProperty<DiscountActivityApi.SpuExtension>[] = []
+  // 如果已经包含 SPU 则跳过
+  if (spuIds.value.includes(spuId)) {
+    if (type !== 'load') {
+      message.error('数据重复选择！')
+    }
+    return
+  }
+  spuIds.value.push(spuId)
   const res = (await ProductSpuApi.getSpuDetailList([spuId])) as DiscountActivityApi.SpuExtension[]
   if (res.length == 0) {
     return
   }
-  spuList.value = []
+  //spuList.value = []
   // 因为只能选择一个
   const spu = res[0]
   const selectSkus =
@@ -90,25 +120,28 @@ const getSpuDetails = async (
   selectSkus?.forEach((sku) => {
     let config: DiscountActivityApi.DiscountProductVO = {
       skuId: sku.id!,
-      spuId: spu.id,
+      spuId: spu.id!,
       discountType: 1,
       discountPercent: 0,
       discountPrice: 0
     }
     if (typeof products !== 'undefined') {
       const product = products.find((item) => item.skuId === sku.id)
+      if (product) {
+        product.discountPercent = fenToYuan(product.discountPercent) as any
+        product.discountPrice = fenToYuan(product.discountPrice) as any
+      }
       config = product || config
     }
     sku.productConfig = config
   })
   spu.skus = selectSkus as DiscountActivityApi.SkuExtension[]
-  spuProperties.push({
+  spuPropertyList.value.push({
     spuId: spu.id!,
     spuDetail: spu,
     propertyList: getPropertyList(spu)
   })
   spuList.value.push(spu)
-  spuPropertyList.value = spuProperties
 }
 
 // ================= end =================
@@ -126,8 +159,15 @@ const open = async (type: string, id?: number) => {
       const data = (await DiscountActivityApi.getDiscountActivity(
         id
       )) as DiscountActivityApi.DiscountActivityVO
-      const supId = data.products[0].spuId
-      await getSpuDetails(supId!, data.products?.map((sku) => sku.skuId), data.products)
+      for (let productsKey in data.products) {
+        const supId = data.products[productsKey].spuId
+        await getSpuDetails(
+          supId!,
+          data.products?.map((sku) => sku.skuId),
+          data.products,
+          'load'
+        )
+      }
       formRef.value.setValues(data)
     } finally {
       formLoading.value = false
@@ -146,12 +186,13 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formRef.value.formModel as DiscountActivityApi.DiscountActivityVO
-    // 获取 折扣商品配置
+    // 获取折扣商品配置
     const products = cloneDeep(spuAndSkuListRef.value.getSkuConfigs('productConfig'))
     products.forEach((item: DiscountActivityApi.DiscountProductVO) => {
-      item.discountType = data['discountType']
+      item.discountPercent = convertToInteger(item.discountPercent)
+      item.discountPrice = convertToInteger(item.discountPrice)
     })
+    const data = cloneDeep(formRef.value.formModel) as DiscountActivityApi.DiscountActivityVO
     data.products = products
     // 真正提交
     if (formType.value === 'create') {
@@ -169,11 +210,56 @@ const submitForm = async () => {
   }
 }
 
+/** 处理 sku 优惠金额变动 */
+const handleSkuDiscountPriceChange = debounce((row: any) => {
+  // 校验边界
+  if (row.productConfig.discountPrice <= 0) {
+    return
+  }
+
+  // 设置优惠类型：满减
+  row.productConfig.discountType = PromotionDiscountTypeEnum.PRICE.type
+  // 设置折扣
+  row.productConfig.discountPercent = erpCalculatePercentage(
+    row.price - yuanToFen(row.productConfig.discountPrice),
+    row.price
+  )
+}, 200)
+/** 处理 sku 优惠折扣变动 */
+const handleSkuDiscountPercentChange = debounce((row: any) => {
+  // 校验边界
+  if (row.productConfig.discountPercent <= 0 || row.productConfig.discountPercent >= 100) {
+    return
+  }
+
+  // 设置优惠类型：折扣
+  row.productConfig.discountType = PromotionDiscountTypeEnum.PERCENT.type
+  // 设置满减金额
+  row.productConfig.discountPrice = fenToYuan(
+    row.price - row.price * (row.productConfig.discountPercent / 100.0 || 0)
+  )
+}, 200)
+
 /** 重置表单 */
 const resetForm = async () => {
   spuList.value = []
   spuPropertyList.value = []
+  spuIds.value = []
   await nextTick()
   formRef.value.getElFormRef().resetFields()
 }
+
+/**
+ * 删除 SPU
+ */
+const deleteSpu = (spuId: number) => {
+  spuIds.value.splice(
+    spuIds.value.findIndex((item) => item == spuId),
+    1
+  )
+  spuPropertyList.value.splice(
+    spuPropertyList.value.findIndex((item) => item.spuId == spuId),
+    1
+  )
+}
 </script>
diff --git a/src/views/mall/promotion/discountActivity/discountActivity.data.ts b/src/views/mall/promotion/discountActivity/discountActivity.data.ts
index d79dcab7..81540b0f 100644
--- a/src/views/mall/promotion/discountActivity/discountActivity.data.ts
+++ b/src/views/mall/promotion/discountActivity/discountActivity.data.ts
@@ -1,10 +1,8 @@
 import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
 import { dateFormatter2 } from '@/utils/formatTime'
 
-// TODO @zhangshai：
 // 表单校验
 export const rules = reactive({
-  spuId: [required],
   name: [required],
   startTime: [required],
   endTime: [required],
@@ -72,17 +70,6 @@ const crudSchemas = reactive<CrudSchema[]>([
       width: 120
     }
   },
-  {
-    label: '优惠类型',
-    field: 'discountType',
-    dictType: DICT_TYPE.PROMOTION_DISCOUNT_TYPE,
-    dictClass: 'number',
-    isSearch: true,
-    form: {
-      component: 'Radio',
-      value: 1
-    }
-  },
   {
     label: '活动商品',
     field: 'spuId',
diff --git a/src/views/mall/promotion/discountActivity/index.vue b/src/views/mall/promotion/discountActivity/index.vue
index b0321bcc..1841603a 100644
--- a/src/views/mall/promotion/discountActivity/index.vue
+++ b/src/views/mall/promotion/discountActivity/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】限时折扣" url="https://doc.iocoder.cn/mall/promotion-discount/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -69,17 +70,17 @@
           ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
         </template>
       </el-table-column>
-      <el-table-column label="商品图片" prop="spuName" min-width="80">
-        <template #default="scope">
-          <el-image
-            :src="scope.row.picUrl"
-            class="h-40px w-40px"
-            :preview-src-list="[scope.row.picUrl]"
-            preview-teleported
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="商品标题" prop="spuName" min-width="300" />
+<!--      <el-table-column label="商品图片" prop="spuName" min-width="80">-->
+<!--        <template #default="scope">-->
+<!--          <el-image-->
+<!--            :src="scope.row.picUrl"-->
+<!--            class="h-40px w-40px"-->
+<!--            :preview-src-list="[scope.row.picUrl]"-->
+<!--            preview-teleported-->
+<!--          />-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+<!--      <el-table-column label="商品标题" prop="spuName" min-width="300" />-->
       <el-table-column label="活动状态" align="center" prop="status" min-width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
diff --git a/src/views/mall/promotion/diy/page/index.vue b/src/views/mall/promotion/diy/page/index.vue
index cc55c229..f2253325 100644
--- a/src/views/mall/promotion/diy/page/index.vue
+++ b/src/views/mall/promotion/diy/page/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】商城装修" url="https://doc.iocoder.cn/mall/diy/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue
index e7838f29..82edbe5f 100644
--- a/src/views/mall/promotion/diy/template/decorate.vue
+++ b/src/views/mall/promotion/diy/template/decorate.vue
@@ -18,7 +18,7 @@
         @change="handleTemplateItemChange"
       >
         <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
-          <el-radio-button :label="index">
+          <el-radio-button :value="index">
             <Icon :icon="item.icon" :size="24" />
           </el-radio-button>
         </el-tooltip>
diff --git a/src/views/mall/promotion/diy/template/index.vue b/src/views/mall/promotion/diy/template/index.vue
index 44ea3f50..50c5d292 100644
--- a/src/views/mall/promotion/diy/template/index.vue
+++ b/src/views/mall/promotion/diy/template/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】商城装修" url="https://doc.iocoder.cn/mall/diy/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
new file mode 100644
index 00000000..075edc33
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -0,0 +1,254 @@
+<template>
+  <el-aside class="kefu pt-5px h-100%" width="260px">
+    <div class="color-[#999] font-bold my-10px">
+      会话记录({{ kefuStore.getConversationList.length }})
+    </div>
+    <div
+      v-for="item in kefuStore.getConversationList"
+      :key="item.id"
+      :class="{ active: item.id === activeConversationId, pinned: item.adminPinned }"
+      class="kefu-conversation px-10px flex items-center"
+      @click="openRightMessage(item)"
+      @contextmenu.prevent="rightClick($event as PointerEvent, item)"
+    >
+      <div class="flex justify-center items-center w-100%">
+        <div class="flex justify-center items-center w-50px h-50px">
+          <!-- 头像 + 未读 -->
+          <el-badge
+            :hidden="item.adminUnreadMessageCount === 0"
+            :max="99"
+            :value="item.adminUnreadMessageCount"
+          >
+            <el-avatar :src="item.userAvatar" alt="avatar" />
+          </el-badge>
+        </div>
+        <div class="ml-10px w-100%">
+          <div class="flex justify-between items-center w-100%">
+            <span class="username">{{ item.userNickname }}</span>
+            <span class="color-[#999]" style="font-size: 13px">
+              {{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
+            </span>
+          </div>
+          <!-- 最后聊天内容 -->
+          <div
+            v-dompurify-html="
+              getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
+            "
+            class="last-message flex items-center color-[#999]"
+          >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右键，进行操作（类似微信） -->
+    <ul v-show="showRightMenu" :style="rightMenuStyle" class="right-menu-ul">
+      <li
+        v-show="!rightClickConversation.adminPinned"
+        class="flex items-center"
+        @click.stop="updateConversationPinned(true)"
+      >
+        <Icon class="mr-5px" icon="ep:top" />
+        置顶会话
+      </li>
+      <li
+        v-show="rightClickConversation.adminPinned"
+        class="flex items-center"
+        @click.stop="updateConversationPinned(false)"
+      >
+        <Icon class="mr-5px" icon="ep:bottom" />
+        取消置顶
+      </li>
+      <li class="flex items-center" @click.stop="deleteConversation">
+        <Icon class="mr-5px" color="red" icon="ep:delete" />
+        删除会话
+      </li>
+      <li class="flex items-center" @click.stop="closeRightMenu">
+        <Icon class="mr-5px" color="red" icon="ep:close" />
+        取消
+      </li>
+    </ul>
+  </el-aside>
+</template>
+
+<script lang="ts" setup>
+import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { useEmoji } from './tools/emoji'
+import { formatPast } from '@/utils/formatTime'
+import { KeFuMessageContentTypeEnum } from './tools/constants'
+import { useAppStore } from '@/store/modules/app'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
+
+defineOptions({ name: 'KeFuConversationList' })
+
+const message = useMessage() // 消息弹窗
+const appStore = useAppStore()
+const kefuStore = useMallKefuStore() // 客服缓存
+const { replaceEmoji } = useEmoji()
+const activeConversationId = ref(-1) // 选中的会话
+const collapse = computed(() => appStore.getCollapse) // 折叠菜单
+
+/** 计算消息最后发送时间距离现在过去了多久 */
+const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>())
+const calculationLastMessageTime = () => {
+  kefuStore.getConversationList?.forEach((item) => {
+    lastMessageTimeMap.value.set(item.id, formatPast(item.lastMessageTime, 'YYYY-MM-DD'))
+  })
+}
+defineExpose({ calculationLastMessageTime })
+
+/** 打开右侧的消息列表 */
+const emits = defineEmits<{
+  (e: 'change', v: KeFuConversationRespVO): void
+}>()
+const openRightMessage = (item: KeFuConversationRespVO) => {
+  // 同一个会话则不处理
+  if (activeConversationId.value === item.id) {
+    return
+  }
+  activeConversationId.value = item.id
+  emits('change', item)
+}
+
+/** 获得消息类型 */
+const getConversationDisplayText = computed(
+  () => (lastMessageContentType: number, lastMessageContent: string) => {
+    switch (lastMessageContentType) {
+      case KeFuMessageContentTypeEnum.SYSTEM:
+        return '[系统消息]'
+      case KeFuMessageContentTypeEnum.VIDEO:
+        return '[视频消息]'
+      case KeFuMessageContentTypeEnum.IMAGE:
+        return '[图片消息]'
+      case KeFuMessageContentTypeEnum.PRODUCT:
+        return '[商品消息]'
+      case KeFuMessageContentTypeEnum.ORDER:
+        return '[订单消息]'
+      case KeFuMessageContentTypeEnum.VOICE:
+        return '[语音消息]'
+      case KeFuMessageContentTypeEnum.TEXT:
+        return replaceEmoji(jsonParse(lastMessageContent).text || lastMessageContent)
+      default:
+        return ''
+    }
+  }
+)
+
+//======================= 右键菜单 =======================
+const showRightMenu = ref(false) // 显示右键菜单
+const rightMenuStyle = ref<any>({}) // 右键菜单 Style
+const rightClickConversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 右键选中的会话对象
+
+/** 打开右键菜单 */
+const rightClick = (mouseEvent: PointerEvent, item: KeFuConversationRespVO) => {
+  rightClickConversation.value = item
+  // 显示右键菜单
+  showRightMenu.value = true
+  rightMenuStyle.value = {
+    top: mouseEvent.clientY - 110 + 'px',
+    left: collapse.value ? mouseEvent.clientX - 80 + 'px' : mouseEvent.clientX - 210 + 'px'
+  }
+}
+/** 关闭右键菜单 */
+const closeRightMenu = () => {
+  showRightMenu.value = false
+}
+
+/** 置顶会话 */
+const updateConversationPinned = async (adminPinned: boolean) => {
+  // 1. 会话置顶/取消置顶
+  await KeFuConversationApi.updateConversationPinned({
+    id: rightClickConversation.value.id,
+    adminPinned
+  })
+  message.notifySuccess(adminPinned ? '置顶成功' : '取消置顶成功')
+  // 2. 关闭右键菜单，更新会话列表
+  closeRightMenu()
+  await kefuStore.updateConversation(rightClickConversation.value.id)
+}
+
+/** 删除会话 */
+const deleteConversation = async () => {
+  // 1. 删除会话
+  await message.confirm('您确定要删除该会话吗？')
+  await KeFuConversationApi.deleteConversation(rightClickConversation.value.id)
+  // 2. 关闭右键菜单，更新会话列表
+  closeRightMenu()
+  kefuStore.deleteConversation(rightClickConversation.value.id)
+}
+
+/** 监听右键菜单的显示状态，添加点击事件监听器 */
+watch(showRightMenu, (val) => {
+  if (val) {
+    document.body.addEventListener('click', closeRightMenu)
+  } else {
+    document.body.removeEventListener('click', closeRightMenu)
+  }
+})
+
+const timer = ref<any>()
+/** 初始化 */
+onMounted(() => {
+  timer.value = setInterval(calculationLastMessageTime, 1000 * 10) // 十秒计算一次
+})
+/** 组件卸载前 */
+onBeforeUnmount(() => {
+  clearInterval(timer.value)
+})
+</script>
+
+<style lang="scss" scoped>
+.kefu {
+  background-color: #e5e4e4;
+
+  &-conversation {
+    height: 60px;
+    //background-color: #fff;
+    //transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
+
+    .username {
+      min-width: 0;
+      max-width: 60%;
+    }
+
+    .last-message {
+      font-size: 13px;
+    }
+
+    .last-message,
+    .username {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+    }
+  }
+
+  .active {
+    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+  }
+
+  .right-menu-ul {
+    position: absolute;
+    background-color: var(--app-content-bg-color);
+    padding: 5px;
+    margin: 0;
+    list-style-type: none; /* 移除默认的项目符号 */
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+    width: 130px;
+
+    li {
+      padding: 8px 16px;
+      cursor: pointer;
+      border-radius: 12px;
+      transition: background-color 0.3s; /* 平滑过渡 */
+      &:hover {
+        background-color: var(--left-menu-bg-active-color); /* 悬停时的背景颜色 */
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
new file mode 100644
index 00000000..577df673
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -0,0 +1,525 @@
+<template>
+  <el-container v-if="showKeFuMessageList" class="kefu">
+    <el-header class="kefu-header">
+      <div class="kefu-title">{{ conversation.userNickname }}</div>
+    </el-header>
+    <el-main class="kefu-content overflow-visible">
+      <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
+        <div v-if="refreshContent" ref="innerRef" class="w-[100%] px-10px">
+          <!-- 消息列表 -->
+          <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
+            <div class="flex justify-center items-center mb-20px">
+              <!-- 日期 -->
+              <div
+                v-if="
+                  item.contentType !== KeFuMessageContentTypeEnum.SYSTEM && showTime(item, index)
+                "
+                class="date-message"
+              >
+                {{ formatDate(item.createTime) }}
+              </div>
+              <!-- 系统消息 -->
+              <div
+                v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
+                class="system-message"
+              >
+                {{ item.content }}
+              </div>
+            </div>
+            <div
+              :class="[
+                item.senderType === UserTypeEnum.MEMBER
+                  ? `ss-row-left`
+                  : item.senderType === UserTypeEnum.ADMIN
+                    ? `ss-row-right`
+                    : ''
+              ]"
+              class="flex mb-20px w-[100%]"
+            >
+              <el-avatar
+                v-if="item.senderType === UserTypeEnum.MEMBER"
+                :src="conversation.userAvatar"
+                alt="avatar"
+                class="w-60px h-60px"
+              />
+              <div
+                :class="{
+                  'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
+                }"
+              >
+                <!-- 文本消息 -->
+                <MessageItem :message="item">
+                  <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
+                    <div
+                      v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
+                      class="line-height-normal text-justify h-1/1 w-full"
+                    ></div>
+                  </template>
+                </MessageItem>
+                <!-- 图片消息 -->
+                <MessageItem :message="item">
+                  <el-image
+                    v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
+                    :initial-index="0"
+                    :preview-src-list="[getMessageContent(item).picUrl || item.content]"
+                    :src="getMessageContent(item).picUrl || item.content"
+                    class="w-200px mx-10px"
+                    fit="contain"
+                    preview-teleported
+                  />
+                </MessageItem>
+                <!-- 商品消息 -->
+                <MessageItem :message="item">
+                  <ProductItem
+                    v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
+                    :picUrl="getMessageContent(item).picUrl"
+                    :price="getMessageContent(item).price"
+                    :sales-count="getMessageContent(item).salesCount"
+                    :spuId="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
+                    :title="getMessageContent(item).spuName"
+                    class="max-w-300px mx-10px"
+                  />
+                </MessageItem>
+                <!-- 订单消息 -->
+                <MessageItem :message="item">
+                  <OrderItem
+                    v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
+                    :message="item"
+                    class="max-w-100% mx-10px"
+                  />
+                </MessageItem>
+              </div>
+              <el-avatar
+                v-if="item.senderType === UserTypeEnum.ADMIN"
+                :src="item.senderAvatar"
+                alt="avatar"
+              />
+            </div>
+          </div>
+        </div>
+      </el-scrollbar>
+      <div
+        v-show="showNewMessageTip"
+        class="newMessageTip flex items-center cursor-pointer"
+        @click="handleToNewMessage"
+      >
+        <span>有新消息</span>
+        <Icon class="ml-5px" icon="ep:bottom" />
+      </div>
+    </el-main>
+    <el-footer class="kefu-footer">
+      <div class="chat-tools flex items-center">
+        <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+        <PictureSelectUpload
+          class="ml-15px mt-3px cursor-pointer"
+          @send-picture="handleSendPicture"
+        />
+      </div>
+      <el-input
+        v-model="message"
+        :rows="6"
+        placeholder="输入消息，Enter发送，Shift+Enter换行"
+        style="border-style: none"
+        type="textarea"
+        @keyup.enter.prevent="handleSendMessage"
+      />
+    </el-footer>
+  </el-container>
+  <el-container v-else class="kefu">
+    <el-main>
+      <el-empty description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
+</template>
+
+<script lang="ts" setup>
+import { ElScrollbar as ElScrollbarType } from 'element-plus'
+import { KeFuMessageApi, KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
+import PictureSelectUpload from './tools/PictureSelectUpload.vue'
+import ProductItem from './message/ProductItem.vue'
+import OrderItem from './message/OrderItem.vue'
+import { Emoji, useEmoji } from './tools/emoji'
+import { KeFuMessageContentTypeEnum } from './tools/constants'
+import { isEmpty } from '@/utils/is'
+import { UserTypeEnum } from '@/utils/constants'
+import { formatDate } from '@/utils/formatTime'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { debounce } from 'lodash-es'
+import { jsonParse } from '@/utils'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
+
+dayjs.extend(relativeTime)
+
+defineOptions({ name: 'KeFuMessageList' })
+
+const message = ref('') // 消息弹窗
+const { replaceEmoji } = useEmoji()
+const messageTool = useMessage()
+const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
+const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
+const showNewMessageTip = ref(false) // 显示有新消息提示
+const queryParams = reactive({
+  conversationId: 0,
+  createTime: undefined
+})
+const total = ref(0) // 消息总条数
+const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+const kefuStore = useMallKefuStore() // 客服缓存
+
+/** 获悉消息内容 */
+const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
+/** 获得消息列表 */
+const getMessageList = async () => {
+  const res = await KeFuMessageApi.getKeFuMessageList(queryParams)
+  if (isEmpty(res)) {
+    // 当返回的是空列表说明没有消息或者已经查询完了历史消息
+    skipGetMessageList.value = true
+    return
+  }
+  queryParams.createTime = formatDate(res.at(-1).createTime) as any
+
+  // 情况一：加载最新消息
+  if (!queryParams.createTime) {
+    messageList.value = res
+  } else {
+    // 情况二：加载历史消息
+    for (const item of res) {
+      pushMessage(item)
+    }
+  }
+  refreshContent.value = true
+}
+
+/** 添加消息 */
+const pushMessage = (message: any) => {
+  if (messageList.value.some((val) => val.id === message.id)) {
+    return
+  }
+  messageList.value.push(message)
+}
+
+/** 按照时间倒序，获取消息列表 */
+const getMessageList0 = computed(() => {
+  messageList.value.sort((a: any, b: any) => a.createTime - b.createTime)
+  return messageList.value
+})
+
+/** 刷新消息列表 */
+const refreshMessageList = async (message?: any) => {
+  if (!conversation.value) {
+    return
+  }
+
+  if (typeof message !== 'undefined') {
+    // 当前查询会话与消息所属会话不一致则不做处理
+    if (message.conversationId !== conversation.value.id) {
+      return
+    }
+    pushMessage(message)
+  } else {
+    queryParams.createTime = undefined
+    await getMessageList()
+  }
+
+  if (loadHistory.value) {
+    // 右下角显示有新消息提示
+    showNewMessageTip.value = true
+  } else {
+    // 滚动到最新消息处
+    await handleToNewMessage()
+  }
+}
+
+/** 获得新会话的消息列表, 点击切换时，读取缓存；然后异步获取新消息，merge 下； */
+const getNewMessageList = async (val: KeFuConversationRespVO) => {
+  // 1. 缓存当前会话消息列表
+  kefuStore.saveMessageList(conversation.value.id, messageList.value)
+  // 2.1 会话切换,重置相关参数
+  messageList.value = kefuStore.getConversationMessageList(val.id) || []
+  total.value = messageList.value.length || 0
+  loadHistory.value = false
+  refreshContent.value = false
+  skipGetMessageList.value = false
+  // 2.2 设置会话相关属性
+  conversation.value = val
+  queryParams.conversationId = val.id
+  queryParams.createTime = undefined
+  // 3. 获取消息
+  await refreshMessageList()
+}
+defineExpose({ getNewMessageList, refreshMessageList })
+
+const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
+const skipGetMessageList = ref(false) // 跳过消息获取
+
+/** 处理表情选择 */
+const handleEmojiSelect = (item: Emoji) => {
+  message.value += item.name
+}
+
+/** 处理图片发送 */
+const handleSendPicture = async (picUrl: string) => {
+  // 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.IMAGE,
+    content: JSON.stringify({ picUrl })
+  }
+  await sendMessage(msg)
+}
+
+/** 发送文本消息 */
+const handleSendMessage = async (event: any) => {
+  // shift 不发送
+  if (event.shiftKey) {
+    return
+  }
+  // 1. 校验消息是否为空
+  if (isEmpty(unref(message.value))) {
+    messageTool.notifyWarning('请输入消息后再发送哦！')
+    return
+  }
+  // 2. 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.TEXT,
+    content: JSON.stringify({ text: message.value })
+  }
+  await sendMessage(msg)
+}
+
+/** 真正发送消息 【共用】*/
+const sendMessage = async (msg: any) => {
+  // 发送消息
+  await KeFuMessageApi.sendKeFuMessage(msg)
+  message.value = ''
+  // 加载消息列表
+  await refreshMessageList()
+  // 更新会话缓存
+  await kefuStore.updateConversation(conversation.value.id)
+}
+
+/** 滚动到底部 */
+const innerRef = ref<HTMLDivElement>()
+const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
+const scrollToBottom = async () => {
+  // 1. 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
+  if (loadHistory.value) {
+    return
+  }
+  // 2.1 滚动到最新消息，关闭新消息提示
+  await nextTick()
+  scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
+  showNewMessageTip.value = false
+  // 2.2 消息已读
+  await KeFuMessageApi.updateKeFuMessageReadStatus(conversation.value.id)
+}
+
+/** 查看新消息 */
+const handleToNewMessage = async () => {
+  loadHistory.value = false
+  await scrollToBottom()
+}
+
+const loadHistory = ref(false) // 加载历史消息
+/** 处理消息列表滚动事件(debounce 限流) */
+const handleScroll = debounce(({ scrollTop }) => {
+  if (skipGetMessageList.value) {
+    return
+  }
+  // 触顶自动加载下一页数据
+  if (Math.floor(scrollTop) === 0) {
+    handleOldMessage()
+  }
+  const wrap = scrollbarRef.value?.wrapRef
+  // 触底重置
+  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
+    loadHistory.value = false
+    refreshMessageList()
+  }
+}, 200)
+/** 加载历史消息 */
+const handleOldMessage = async () => {
+  // 记录已有页面高度
+  const oldPageHeight = innerRef.value?.clientHeight
+  if (!oldPageHeight) {
+    return
+  }
+  loadHistory.value = true
+  await getMessageList()
+  // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
+  scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
+}
+
+/**
+ * 是否显示时间
+ *
+ * @param {*} item - 数据
+ * @param {*} index - 索引
+ */
+const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
+  if (unref(messageList.value)[index + 1]) {
+    let dateString = dayjs(unref(messageList.value)[index + 1].createTime).fromNow()
+    return dateString !== dayjs(unref(item).createTime).fromNow()
+  }
+  return false
+})
+</script>
+
+<style lang="scss" scoped>
+.kefu {
+  background-color: #f5f5f5;
+  position: relative;
+  width: calc(100% - 300px - 260px);
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    background-color: var(--el-border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
+
+  .kefu-header {
+    background-color: #f5f5f5;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+
+  &-content {
+    margin: 0;
+    padding: 10px;
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    .newMessageTip {
+      position: absolute;
+      bottom: 35px;
+      right: 35px;
+      background-color: var(--app-content-bg-color);
+      padding: 10px;
+      border-radius: 30px;
+      font-size: 12px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+    }
+
+    .ss-row-left {
+      justify-content: flex-start;
+
+      .kefu-message {
+        background-color: #fff;
+        margin-left: 10px;
+        margin-top: 3px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
+      }
+    }
+
+    .ss-row-right {
+      justify-content: flex-end;
+
+      .kefu-message {
+        background-color: rgb(206, 223, 255);
+        margin-right: 10px;
+        margin-top: 3px;
+        border-top-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
+      }
+    }
+
+    // 消息气泡
+    .kefu-message {
+      color: #414141;
+      font-weight: 500;
+      padding: 5px 10px;
+      width: auto;
+      max-width: 50%;
+      //text-align: left;
+      //display: inline-block !important;
+      //word-break: break-all;
+      transition: all 0.2s;
+
+      &:hover {
+        transform: scale(1.03);
+      }
+    }
+
+    .date-message,
+    .system-message {
+      width: fit-content;
+      background-color: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      padding: 0 5px;
+      color: #fff;
+      font-size: 10px;
+    }
+  }
+
+  .kefu-footer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin: 0;
+    padding: 0;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    .chat-tools {
+      width: 100%;
+      height: 44px;
+    }
+  }
+
+  ::v-deep(textarea) {
+    resize: none;
+    background-color: #f5f5f5;
+  }
+
+  :deep(.el-input__wrapper) {
+    box-shadow: none !important;
+    border-radius: 0;
+  }
+
+  ::v-deep(.el-textarea__inner) {
+    box-shadow: none !important;
+  }
+}
+</style>
diff --git a/src/views/mall/promotion/kefu/components/asserts/a.png b/src/views/mall/promotion/kefu/components/asserts/a.png
new file mode 100644
index 00000000..32939004
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/a.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/aini.png b/src/views/mall/promotion/kefu/components/asserts/aini.png
new file mode 100644
index 00000000..02cf5c49
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/aini.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/aixin.png b/src/views/mall/promotion/kefu/components/asserts/aixin.png
new file mode 100644
index 00000000..25e64223
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/aixin.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/baiyan.png b/src/views/mall/promotion/kefu/components/asserts/baiyan.png
new file mode 100644
index 00000000..d16260af
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/baiyan.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/bizui.png b/src/views/mall/promotion/kefu/components/asserts/bizui.png
new file mode 100644
index 00000000..a3b18002
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/bizui.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/buhaoyisi.png b/src/views/mall/promotion/kefu/components/asserts/buhaoyisi.png
new file mode 100644
index 00000000..54c4b3f7
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/buhaoyisi.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/bukesiyi.png b/src/views/mall/promotion/kefu/components/asserts/bukesiyi.png
new file mode 100644
index 00000000..5f272e3e
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/bukesiyi.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/dajing.png b/src/views/mall/promotion/kefu/components/asserts/dajing.png
new file mode 100644
index 00000000..8649727e
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/dajing.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/danao.png b/src/views/mall/promotion/kefu/components/asserts/danao.png
new file mode 100644
index 00000000..aa85a294
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/danao.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/daxiao.png b/src/views/mall/promotion/kefu/components/asserts/daxiao.png
new file mode 100644
index 00000000..26206bc0
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/daxiao.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/dianzan.png b/src/views/mall/promotion/kefu/components/asserts/dianzan.png
new file mode 100644
index 00000000..2e7f00eb
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/dianzan.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/emo.png b/src/views/mall/promotion/kefu/components/asserts/emo.png
new file mode 100644
index 00000000..9c845516
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/emo.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/esi.png b/src/views/mall/promotion/kefu/components/asserts/esi.png
new file mode 100644
index 00000000..84e9726f
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/esi.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/fadai.png b/src/views/mall/promotion/kefu/components/asserts/fadai.png
new file mode 100644
index 00000000..0772de26
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/fadai.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/fankun.png b/src/views/mall/promotion/kefu/components/asserts/fankun.png
new file mode 100644
index 00000000..6e18dac3
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/fankun.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/feiwen.png b/src/views/mall/promotion/kefu/components/asserts/feiwen.png
new file mode 100644
index 00000000..be976165
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/feiwen.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/fennu.png b/src/views/mall/promotion/kefu/components/asserts/fennu.png
new file mode 100644
index 00000000..20c57338
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/fennu.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/ganga.png b/src/views/mall/promotion/kefu/components/asserts/ganga.png
new file mode 100644
index 00000000..30ec329d
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/ganga.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/ganmao.png b/src/views/mall/promotion/kefu/components/asserts/ganmao.png
new file mode 100644
index 00000000..35bbb89f
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/ganmao.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/hanyan.png b/src/views/mall/promotion/kefu/components/asserts/hanyan.png
new file mode 100644
index 00000000..a0bc838b
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/hanyan.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/haochi.png b/src/views/mall/promotion/kefu/components/asserts/haochi.png
new file mode 100644
index 00000000..2e52b6be
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/haochi.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/hongxin.png b/src/views/mall/promotion/kefu/components/asserts/hongxin.png
new file mode 100644
index 00000000..65b5de8f
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/hongxin.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/huaixiao.png b/src/views/mall/promotion/kefu/components/asserts/huaixiao.png
new file mode 100644
index 00000000..bc0e76c4
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/huaixiao.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/jingkong.png b/src/views/mall/promotion/kefu/components/asserts/jingkong.png
new file mode 100644
index 00000000..7aa65845
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/jingkong.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/jingshu.png b/src/views/mall/promotion/kefu/components/asserts/jingshu.png
new file mode 100644
index 00000000..0e984d68
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/jingshu.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/jingya.png b/src/views/mall/promotion/kefu/components/asserts/jingya.png
new file mode 100644
index 00000000..9ba6bab3
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/jingya.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/kaixin.png b/src/views/mall/promotion/kefu/components/asserts/kaixin.png
new file mode 100644
index 00000000..29c9f5dd
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/kaixin.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/keai.png b/src/views/mall/promotion/kefu/components/asserts/keai.png
new file mode 100644
index 00000000..d3b582c6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/keai.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/keshui.png b/src/views/mall/promotion/kefu/components/asserts/keshui.png
new file mode 100644
index 00000000..cef489ea
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/keshui.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/kun.png b/src/views/mall/promotion/kefu/components/asserts/kun.png
new file mode 100644
index 00000000..1ddc388a
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/kun.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/lengku.png b/src/views/mall/promotion/kefu/components/asserts/lengku.png
new file mode 100644
index 00000000..c5c6feeb
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/lengku.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/liuhan.png b/src/views/mall/promotion/kefu/components/asserts/liuhan.png
new file mode 100644
index 00000000..e6ddc6f4
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/liuhan.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/liukoushui.png b/src/views/mall/promotion/kefu/components/asserts/liukoushui.png
new file mode 100644
index 00000000..3e2fba65
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/liukoushui.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/liulei.png b/src/views/mall/promotion/kefu/components/asserts/liulei.png
new file mode 100644
index 00000000..dbf82040
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/liulei.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/mengbi.png b/src/views/mall/promotion/kefu/components/asserts/mengbi.png
new file mode 100644
index 00000000..a4206eef
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/mengbi.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/mianwubiaoqing.png b/src/views/mall/promotion/kefu/components/asserts/mianwubiaoqing.png
new file mode 100644
index 00000000..6f315b98
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/mianwubiaoqing.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/nanguo.png b/src/views/mall/promotion/kefu/components/asserts/nanguo.png
new file mode 100644
index 00000000..19b9fb94
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/nanguo.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/outu.png b/src/views/mall/promotion/kefu/components/asserts/outu.png
new file mode 100644
index 00000000..2f9a06d6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/outu.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/picture.svg b/src/views/mall/promotion/kefu/components/asserts/picture.svg
new file mode 100644
index 00000000..8811d495
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/asserts/picture.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1720063872285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6895"
+     width="200" height="200">
+    <path d="M782.16 880.98c-179.31 23.91-361 23.91-540.32 0C138.89 867.25 62 779.43 62 675.57V348.43c0-103.86 76.89-191.69 179.84-205.41 179.31-23.91 361-23.91 540.31 0C885.11 156.75 962 244.57 962 348.43v327.13c0 103.87-76.89 191.69-179.84 205.42z"
+          fill="#FF554D" p-id="6896"></path>
+    <path d="M226.11 596.86c-9.74 47.83 17.26 95.6 63.48 111.3C333.49 723.08 394.55 737 469.53 737c59.25 0 105.46-8.69 140.23-19.7 51.59-16.34 79.94-71.16 63.37-122.68-24.47-76.11-65.57-180.7-106.68-180.7-64.62 0-64.62 96.92-64.62 96.92S437.22 317 372.61 317c-82.11 0-117.85 139.12-146.5 279.86z"
+          fill="#FFFFFF" p-id="6897"></path>
+    <path d="M782 347m-60 0a60 60 0 1 0 120 0 60 60 0 1 0-120 0Z" fill="#FFBC55" p-id="6898"></path>
+</svg>
diff --git a/src/views/mall/promotion/kefu/components/asserts/shengqi.png b/src/views/mall/promotion/kefu/components/asserts/shengqi.png
new file mode 100644
index 00000000..7dce41dc
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/shengqi.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/shuizhuo.png b/src/views/mall/promotion/kefu/components/asserts/shuizhuo.png
new file mode 100644
index 00000000..97d0f0a6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/shuizhuo.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/tianshi.png b/src/views/mall/promotion/kefu/components/asserts/tianshi.png
new file mode 100644
index 00000000..eb922dd7
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/tianshi.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/xiaodiaoya.png b/src/views/mall/promotion/kefu/components/asserts/xiaodiaoya.png
new file mode 100644
index 00000000..29fbc0e1
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/xiaodiaoya.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/xiaoku.png b/src/views/mall/promotion/kefu/components/asserts/xiaoku.png
new file mode 100644
index 00000000..88a169d4
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/xiaoku.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/xinsui.png b/src/views/mall/promotion/kefu/components/asserts/xinsui.png
new file mode 100644
index 00000000..a0f572a1
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/xinsui.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/xiong.png b/src/views/mall/promotion/kefu/components/asserts/xiong.png
new file mode 100644
index 00000000..43dfd709
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/xiong.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/yiwen.png b/src/views/mall/promotion/kefu/components/asserts/yiwen.png
new file mode 100644
index 00000000..4c0da709
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/yiwen.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/yun.png b/src/views/mall/promotion/kefu/components/asserts/yun.png
new file mode 100644
index 00000000..56e5d021
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/yun.png differ
diff --git a/src/views/mall/promotion/kefu/components/asserts/ziya.png b/src/views/mall/promotion/kefu/components/asserts/ziya.png
new file mode 100644
index 00000000..593ef5e6
Binary files /dev/null and b/src/views/mall/promotion/kefu/components/asserts/ziya.png differ
diff --git a/src/views/mall/promotion/kefu/components/index.ts b/src/views/mall/promotion/kefu/components/index.ts
new file mode 100644
index 00000000..0f60a6e4
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/index.ts
@@ -0,0 +1,5 @@
+import KeFuConversationList from './KeFuConversationList.vue'
+import KeFuMessageList from './KeFuMessageList.vue'
+import MemberInfo from './member/MemberInfo.vue'
+
+export { KeFuConversationList, KeFuMessageList, MemberInfo }
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
new file mode 100644
index 00000000..849992b3
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -0,0 +1,252 @@
+<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
+<template>
+  <el-container class="kefu">
+    <el-header class="kefu-header">
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('会员信息') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('会员信息')"
+      >
+        会员信息
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('最近浏览') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('最近浏览')"
+      >
+        最近浏览
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('交易订单') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('交易订单')"
+      >
+        交易订单
+      </div>
+    </el-header>
+    <el-main class="kefu-content p-10px!">
+      <div v-if="!isEmpty(conversation)" v-loading="loading">
+        <!-- 基本信息 -->
+        <UserBasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
+          <template #header>
+            <CardTitle title="基本信息" />
+          </template>
+        </UserBasicInfo>
+        <!-- 账户信息 -->
+        <el-card v-if="activeTab === '会员信息'" class="h-full mt-10px" shadow="never">
+          <template #header>
+            <CardTitle title="账户信息" />
+          </template>
+          <UserAccountInfo :column="1" :user="user" :wallet="wallet" />
+        </el-card>
+      </div>
+      <div v-show="!isEmpty(conversation)">
+        <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
+          <!-- 最近浏览 -->
+          <ProductBrowsingHistory v-if="activeTab === '最近浏览'" ref="productBrowsingHistoryRef" />
+          <!-- 交易订单 -->
+          <OrderBrowsingHistory v-if="activeTab === '交易订单'" ref="orderBrowsingHistoryRef" />
+        </el-scrollbar>
+      </div>
+      <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
+</template>
+
+<script lang="ts" setup>
+import ProductBrowsingHistory from './ProductBrowsingHistory.vue'
+import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { isEmpty } from '@/utils/is'
+import { debounce } from 'lodash-es'
+import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
+import { CardTitle } from '@/components/Card'
+import UserBasicInfo from '@/views/member/user/detail/UserBasicInfo.vue'
+import UserAccountInfo from '@/views/member/user/detail/UserAccountInfo.vue'
+import * as UserApi from '@/api/member/user'
+import * as WalletApi from '@/api/pay/wallet/balance'
+
+defineOptions({ name: 'MemberBrowsingHistory' })
+
+const activeTab = ref('会员信息')
+const tabActivation = computed(() => (tab: string) => activeTab.value === tab)
+
+/** tab 切换 */
+const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
+const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
+const handleClick = async (tab: string) => {
+  activeTab.value = tab
+  await nextTick()
+  await getHistoryList()
+}
+
+/** 获得历史数据 */
+const getHistoryList = async () => {
+  switch (activeTab.value) {
+    case '会员信息':
+      await getUserData()
+      await getUserWallet()
+      break
+    case '最近浏览':
+      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
+      break
+    case '交易订单':
+      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value)
+      break
+    default:
+      break
+  }
+}
+
+/** 加载下一页数据 */
+const loadMore = async () => {
+  switch (activeTab.value) {
+    case '会员信息':
+      break
+    case '最近浏览':
+      await productBrowsingHistoryRef.value?.loadMore()
+      break
+    case '交易订单':
+      await orderBrowsingHistoryRef.value?.loadMore()
+      break
+    default:
+      break
+  }
+}
+
+/** 浏览历史初始化 */
+const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
+const initHistory = async (val: KeFuConversationRespVO) => {
+  activeTab.value = '会员信息'
+  conversation.value = val
+  await nextTick()
+  await getHistoryList()
+}
+defineExpose({ initHistory })
+
+/** 处理消息列表滚动事件(debounce 限流) */
+const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()
+const handleScroll = debounce(() => {
+  const wrap = scrollbarRef.value?.wrapRef
+  // 触底重置
+  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
+    loadMore()
+  }
+}, 200)
+
+/** 查询用户钱包信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+const getUserWallet = async () => {
+  if (!conversation.value.userId) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  wallet.value =
+    (await WalletApi.getWallet({ userId: conversation.value.userId })) || WALLET_INIT_DATA
+}
+
+/** 获得用户 */
+const loading = ref(true) // 加载中
+const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
+const getUserData = async () => {
+  loading.value = true
+  try {
+    user.value = await UserApi.getUser(conversation.value.userId)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.kefu {
+  position: relative;
+  width: 300px !important;
+  background-color: #f5f5f5;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    background-color: var(--el-border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
+
+  &-header {
+    background-color: #f5f5f5;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    &-item {
+      height: 100%;
+      width: 100%;
+      position: relative;
+
+      &-activation::before {
+        content: '';
+        position: absolute; /* 绝对定位 */
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0; /* 覆盖整个元素 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+      }
+
+      &:hover::before {
+        content: '';
+        position: absolute; /* 绝对定位 */
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0; /* 覆盖整个元素 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+      }
+    }
+  }
+
+  &-content {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  &-tabs {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.header-title {
+  border-bottom: #e4e0e0 solid 1px;
+}
+</style>
diff --git a/src/views/mall/promotion/kefu/components/member/OrderBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/member/OrderBrowsingHistory.vue
new file mode 100644
index 00000000..8fb8891c
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/member/OrderBrowsingHistory.vue
@@ -0,0 +1,44 @@
+<template>
+  <OrderItem v-for="item in list" :key="item.id" :order="item" class="mb-10px" />
+</template>
+
+<script lang="ts" setup>
+import OrderItem from '@/views/mall/promotion/kefu/components/message/OrderItem.vue'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { getOrderPage } from '@/api/mall/trade/order'
+import { concat } from 'lodash-es'
+
+defineOptions({ name: 'OrderBrowsingHistory' })
+
+const list = ref<any>([]) // 列表
+const total = ref(0) // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0
+})
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+}) // 跳过消息获取
+
+/** 获得浏览记录 */
+const getHistoryList = async (val: KeFuConversationRespVO) => {
+  queryParams.userId = val.userId
+  const res = await getOrderPage(queryParams)
+  total.value = res.total
+  list.value = res.list
+}
+
+/** 加载下一页数据 */
+const loadMore = async () => {
+  if (skipGetMessageList.value) {
+    return
+  }
+  queryParams.pageNo += 1
+  const res = await getOrderPage(queryParams)
+  total.value = res.total
+  concat(list.value, res.list)
+}
+defineExpose({ getHistoryList, loadMore })
+</script>
diff --git a/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
new file mode 100644
index 00000000..a9b38561
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
@@ -0,0 +1,57 @@
+<template>
+  <ProductItem
+    v-for="item in list"
+    :key="item.id"
+    :picUrl="item.picUrl"
+    :price="item.price"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
+    :title="item.spuName"
+    class="mb-10px"
+  />
+</template>
+
+<script lang="ts" setup>
+import { getBrowseHistoryPage } from '@/api/mall/product/history'
+import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { concat } from 'lodash-es'
+
+defineOptions({ name: 'ProductBrowsingHistory' })
+
+const list = ref<any>([]) // 列表
+const total = ref(0) // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0,
+  userDeleted: false
+})
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+}) // 跳过消息获取
+
+/** 获得浏览记录 */
+const getHistoryList = async (val: KeFuConversationRespVO) => {
+  queryParams.userId = val.userId
+  const res = await getBrowseHistoryPage(queryParams)
+  total.value = res.total
+  list.value = res.list
+}
+
+/** 加载下一页数据 */
+const loadMore = async () => {
+  if (skipGetMessageList.value) {
+    return
+  }
+  queryParams.pageNo += 1
+  const res = await getBrowseHistoryPage(queryParams)
+  total.value = res.total
+  concat(list.value, res.list)
+}
+defineExpose({ getHistoryList, loadMore })
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/mall/promotion/kefu/components/message/MessageItem.vue b/src/views/mall/promotion/kefu/components/message/MessageItem.vue
new file mode 100644
index 00000000..325a3639
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/MessageItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <!-- 消息组件 -->
+  <div
+    :class="[
+      message.senderType === UserTypeEnum.MEMBER
+        ? `ml-10px`
+        : message.senderType === UserTypeEnum.ADMIN
+          ? `mr-10px`
+          : ''
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UserTypeEnum } from '@/utils/constants'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+
+defineOptions({ name: 'MessageItem' })
+defineProps<{
+  message: KeFuMessageRespVO
+}>()
+</script>
diff --git a/src/views/mall/promotion/kefu/components/message/OrderItem.vue b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
new file mode 100644
index 00000000..9385f10b
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
@@ -0,0 +1,181 @@
+<template>
+  <div v-if="isObject(getMessageContent)">
+    <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
+      <div class="order-card-header flex items-center justify-between p-x-5px">
+        <div class="order-no">
+          订单号：
+          <span style="cursor: pointer" @click="openDetail(getMessageContent.id)">
+            {{ getMessageContent.no }}
+          </span>
+        </div>
+        <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
+          {{ formatOrderStatus(getMessageContent) }}
+        </div>
+      </div>
+      <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
+        <ProductItem
+          :num="item.count"
+          :picUrl="item.picUrl"
+          :price="item.price"
+          :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+          :spu-id="item.spuId"
+          :title="item.spuName"
+        />
+      </div>
+      <div class="pay-box flex justify-end pr-5px">
+        <div class="flex items-center">
+          <div class="discounts-title pay-color"
+            >共 {{ getMessageContent?.productCount }} 件商品,总金额:
+          </div>
+          <div class="discounts-money pay-color">
+            ￥{{ fenToYuan(getMessageContent?.payPrice) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { fenToYuan, jsonParse } from '@/utils'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { isObject } from '@/utils/is'
+import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
+
+const { push } = useRouter()
+
+defineOptions({ name: 'OrderItem' })
+const props = defineProps<{
+  message?: KeFuMessageRespVO
+  order?: any
+}>()
+
+const getMessageContent = computed(() =>
+  typeof props.message !== 'undefined' ? jsonParse(props!.message!.content) : props.order
+)
+
+/** 查看订单详情 */
+const openDetail = (id: number) => {
+  console.log(getMessageContent)
+  push({ name: 'TradeOrderDetail', params: { id } })
+}
+
+/**
+ * 格式化订单状态的颜色
+ *
+ * @param order 订单
+ * @return {string} 颜色的 class 名称
+ */
+function formatOrderColor(order: any) {
+  if (order.status === 0) {
+    return 'info-color'
+  }
+  if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) {
+    return 'warning-color'
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'success-color'
+  }
+  return 'danger-color'
+}
+
+/**
+ * 格式化订单状态
+ *
+ * @param order 订单
+ */
+function formatOrderStatus(order: any) {
+  if (order.status === 0) {
+    return '待付款'
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货'
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销'
+  }
+  if (order.status === 20) {
+    return '待收货'
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价'
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成'
+  }
+  return '已关闭'
+}
+</script>
+
+<style lang="scss" scoped>
+.order-list-card-box {
+  border-radius: 10px;
+  padding: 10px;
+  border: 1px var(--el-border-color) solid;
+  background-color: #fff; // 透明色，暗黑模式下也能体现
+
+  .order-card-header {
+    height: 28px;
+    font-weight: bold;
+
+    .order-no {
+      font-size: 13px;
+
+      span {
+        &:hover {
+          text-decoration: underline;
+          color: var(--left-menu-bg-active-color);
+        }
+      }
+    }
+
+    .order-state {
+      font-size: 13px;
+    }
+  }
+
+  .pay-box {
+    padding-top: 10px;
+    font-weight: bold;
+
+    .discounts-title {
+      font-size: 16px;
+      line-height: normal;
+    }
+
+    .discounts-money {
+      font-size: 16px;
+      line-height: normal;
+      font-family: OPPOSANS;
+    }
+
+    .pay-color {
+      font-size: 13px;
+    }
+  }
+}
+
+.warning-color {
+  color: #faad14;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.danger-color {
+  color: #ff3000;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.success-color {
+  color: #52c41a;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.info-color {
+  color: #999999;
+  font-size: 11px;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
new file mode 100644
index 00000000..bc6cd979
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="product-warp" style="cursor: pointer" @click.stop="openDetail(spuId)">
+    <!-- 左侧商品图片-->
+    <div class="product-warp-left mr-24px">
+      <el-image
+        :initial-index="0"
+        :preview-src-list="[picUrl]"
+        :src="picUrl"
+        class="product-warp-left-img"
+        fit="contain"
+        preview-teleported
+        @click.stop
+      />
+    </div>
+    <!-- 右侧商品信息 -->
+    <div class="product-warp-right">
+      <div class="description">{{ title }}</div>
+      <div class="my-5px">
+        <span class="mr-20px">库存: {{ stock || 0 }}</span>
+        <span>销量: {{ salesCount || 0 }}</span>
+      </div>
+      <div class="flex justify-between items-center">
+        <span class="price">￥{{ fenToYuan(price) }}</span>
+        <el-button size="small" text type="primary">详情</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { fenToYuan } from '@/utils'
+
+const { push } = useRouter()
+
+defineOptions({ name: 'ProductItem' })
+defineProps({
+  spuId: {
+    type: Number,
+    default: 0
+  },
+  picUrl: {
+    type: String,
+    default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  price: {
+    type: [String, Number],
+    default: ''
+  },
+  salesCount: {
+    type: [String, Number],
+    default: ''
+  },
+  stock: {
+    type: [String, Number],
+    default: ''
+  }
+})
+
+/** 查看商品详情 */
+const openDetail = (spuId: number) => {
+  push({ name: 'ProductSpuDetail', params: { id: spuId } })
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.product-warp {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+
+  &-left {
+    width: 70px;
+
+    &-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+    }
+  }
+
+  &-right {
+    flex: 1;
+
+    .description {
+      width: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      display: -webkit-box;
+      -webkit-line-clamp: 1; /* 显示一行 */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .price {
+      color: #ff3000;
+    }
+  }
+}
+</style>
diff --git a/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue b/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
new file mode 100644
index 00000000..43c096db
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
@@ -0,0 +1,42 @@
+<!-- emoji 表情选择组件 -->
+<template>
+  <el-popover :width="500" placement="top" trigger="click">
+    <template #reference>
+      <Icon :size="30" class="ml-10px cursor-pointer" icon="twemoji:grinning-face" />
+    </template>
+    <ElScrollbar height="300px">
+      <ul class="ml-2 flex flex-wrap px-2">
+        <li
+          v-for="(item, index) in emojiList"
+          :key="index"
+          :style="{
+            borderColor: 'var(--el-color-primary)',
+            color: 'var(--el-color-primary)'
+          }"
+          :title="item.name"
+          class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
+          @click="handleSelect(item)"
+        >
+          <img :src="item.url" class="w-24px h-24px" />
+        </li>
+      </ul>
+    </ElScrollbar>
+  </el-popover>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'EmojiSelectPopover' })
+import { Emoji, useEmoji } from './emoji'
+
+const { getEmojiList } = useEmoji()
+const emojiList = computed(() => getEmojiList())
+
+/** 选择 emoji 表情 */
+const emits = defineEmits<{
+  (e: 'select-emoji', v: Emoji)
+}>()
+const handleSelect = (item: Emoji) => {
+  // 整个 emoji 数据传递出去，方便以后输入框直接显示表情
+  emits('select-emoji', item)
+}
+</script>
diff --git a/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue b/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
new file mode 100644
index 00000000..9742353a
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
@@ -0,0 +1,93 @@
+<!-- 图片选择 -->
+<template>
+  <div>
+    <img :src="Picture" class="w-35px h-35px" @click="selectAndUpload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Picture from '@/views/mall/promotion/kefu/components/asserts/picture.svg'
+import * as FileApi from '@/api/infra/file'
+
+defineOptions({ name: 'PictureSelectUpload' })
+
+const message = useMessage() // 消息弹窗
+
+/** 选择并上传文件 */
+const emits = defineEmits<{
+  (e: 'send-picture', v: string): void
+}>()
+const selectAndUpload = async () => {
+  const files: any = await getFiles()
+  message.success('图片发送中请稍等。。。')
+  const res = await FileApi.updateFile({ file: files[0].file })
+  emits('send-picture', res.data)
+}
+
+/**
+ * 唤起文件选择窗口，并获取选择的文件
+ *
+ * @param {Object} options - 配置选项
+ * @param {boolean} [options.multiple=true] - 是否支持多选
+ * @param {string} [options.accept=''] - 文件上传格式限制
+ * @param {number} [options.limit=1] - 单次上传最大文件数
+ * @param {number} [options.fileSize=500] - 单个文件大小限制（单位：MB）
+ * @returns {Promise<Array>} 选择的文件列表，每个文件带有一个uid
+ */
+async function getFiles(options = {}) {
+  const { multiple, accept, limit, fileSize } = {
+    multiple: true,
+    accept: 'image/jpeg, image/png, image/gif', // 默认选择图片
+    limit: 1,
+    fileSize: 500,
+    ...options
+  }
+
+  // 创建文件选择元素
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.style.display = 'none'
+  if (multiple) input.multiple = true
+  if (accept) input.accept = accept
+
+  // 将文件选择元素添加到文档中
+  document.body.appendChild(input)
+
+  // 触发文件选择元素的点击事件
+  input.click()
+
+  // 等待文件选择元素的 change 事件
+  try {
+    return await new Promise((resolve, reject) => {
+      input.addEventListener('change', (event: any) => {
+        const filesArray = Array.from(event?.target?.files || [])
+
+        // 从文档中移除文件选择元素
+        document.body.removeChild(input)
+
+        // 判断是否超出上传数量限制
+        if (filesArray.length > limit) {
+          reject({ errorType: 'limit', files: filesArray })
+          return
+        }
+
+        // 判断是否超出上传文件大小限制
+        const overSizedFiles = filesArray.filter((file: File) => file.size / 1024 ** 2 > fileSize)
+        if (overSizedFiles.length > 0) {
+          reject({ errorType: 'fileSize', files: overSizedFiles })
+          return
+        }
+
+        // 生成文件列表，并添加 uid
+        const fileList = filesArray.map((file, index) => ({ file, uid: Date.now() + index }))
+        resolve(fileList)
+      })
+    })
+  } catch (error) {
+    console.error('选择文件出错:', error)
+    throw error
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/mall/promotion/kefu/components/tools/constants.ts b/src/views/mall/promotion/kefu/components/tools/constants.ts
new file mode 100644
index 00000000..750e7f55
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/tools/constants.ts
@@ -0,0 +1,17 @@
+// 客服消息类型枚举类
+export const KeFuMessageContentTypeEnum = {
+  TEXT: 1, // 文本消息
+  IMAGE: 2, // 图片消息
+  VOICE: 3, // 语音消息
+  VIDEO: 4, // 视频消息
+  SYSTEM: 5, // 系统消息
+  // ========== 商城特殊消息 ==========
+  PRODUCT: 10, //  商品消息
+  ORDER: 11 //  订单消息"
+}
+
+// Promotion 的 WebSocket 消息类型枚举类
+export const WebSocketMessageTypeConstants = {
+  KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
+  KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change' // 客服消息管理员已读
+}
diff --git a/src/views/mall/promotion/kefu/components/tools/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts
new file mode 100644
index 00000000..3755e38b
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/tools/emoji.ts
@@ -0,0 +1,129 @@
+import { isEmpty } from '@/utils/is'
+
+const emojiList = [
+  { name: '[笑掉牙]', file: 'xiaodiaoya.png' },
+  { name: '[可爱]', file: 'keai.png' },
+  { name: '[冷酷]', file: 'lengku.png' },
+  { name: '[闭嘴]', file: 'bizui.png' },
+  { name: '[生气]', file: 'shengqi.png' },
+  { name: '[惊恐]', file: 'jingkong.png' },
+  { name: '[瞌睡]', file: 'keshui.png' },
+  { name: '[大笑]', file: 'daxiao.png' },
+  { name: '[爱心]', file: 'aixin.png' },
+  { name: '[坏笑]', file: 'huaixiao.png' },
+  { name: '[飞吻]', file: 'feiwen.png' },
+  { name: '[疑问]', file: 'yiwen.png' },
+  { name: '[开心]', file: 'kaixin.png' },
+  { name: '[发呆]', file: 'fadai.png' },
+  { name: '[流泪]', file: 'liulei.png' },
+  { name: '[汗颜]', file: 'hanyan.png' },
+  { name: '[惊悚]', file: 'jingshu.png' },
+  { name: '[困~]', file: 'kun.png' },
+  { name: '[心碎]', file: 'xinsui.png' },
+  { name: '[天使]', file: 'tianshi.png' },
+  { name: '[晕]', file: 'yun.png' },
+  { name: '[啊]', file: 'a.png' },
+  { name: '[愤怒]', file: 'fennu.png' },
+  { name: '[睡着]', file: 'shuizhuo.png' },
+  { name: '[面无表情]', file: 'mianwubiaoqing.png' },
+  { name: '[难过]', file: 'nanguo.png' },
+  { name: '[犯困]', file: 'fankun.png' },
+  { name: '[好吃]', file: 'haochi.png' },
+  { name: '[呕吐]', file: 'outu.png' },
+  { name: '[龇牙]', file: 'ziya.png' },
+  { name: '[懵比]', file: 'mengbi.png' },
+  { name: '[白眼]', file: 'baiyan.png' },
+  { name: '[饿死]', file: 'esi.png' },
+  { name: '[凶]', file: 'xiong.png' },
+  { name: '[感冒]', file: 'ganmao.png' },
+  { name: '[流汗]', file: 'liuhan.png' },
+  { name: '[笑哭]', file: 'xiaoku.png' },
+  { name: '[流口水]', file: 'liukoushui.png' },
+  { name: '[尴尬]', file: 'ganga.png' },
+  { name: '[惊讶]', file: 'jingya.png' },
+  { name: '[大惊]', file: 'dajing.png' },
+  { name: '[不好意思]', file: 'buhaoyisi.png' },
+  { name: '[大闹]', file: 'danao.png' },
+  { name: '[不可思议]', file: 'bukesiyi.png' },
+  { name: '[爱你]', file: 'aini.png' },
+  { name: '[红心]', file: 'hongxin.png' },
+  { name: '[点赞]', file: 'dianzan.png' },
+  { name: '[恶魔]', file: 'emo.png' }
+]
+
+export interface Emoji {
+  name: string
+  url: string
+}
+
+export const useEmoji = () => {
+  const emojiPathList = ref<any[]>([])
+
+  /** 加载本地图片 */
+  const initStaticEmoji = async () => {
+    const pathList = import.meta.glob(
+      '@/views/mall/promotion/kefu/components/asserts/*.{png,jpg,jpeg,svg}'
+    )
+    for (const path in pathList) {
+      const imageModule: any = await pathList[path]()
+      emojiPathList.value.push({ path: path, src: imageModule.default })
+    }
+  }
+
+  /** 初始化 */
+  onMounted(async () => {
+    if (isEmpty(emojiPathList.value)) {
+      await initStaticEmoji()
+    }
+  })
+
+  /**
+   * 将文本中的表情替换成图片
+   *
+   * @return 替换后的文本
+   * @param content 消息内容
+   */
+  const replaceEmoji = (content: string) => {
+    let newData = content
+    if (typeof newData !== 'object') {
+      const reg = /\[(.+?)]/g // [] 中括号
+      const zhEmojiName = newData.match(reg)
+      if (zhEmojiName) {
+        zhEmojiName.forEach((item) => {
+          const emojiFile = getEmojiFileByName(item)
+          newData = newData.replace(
+            item,
+            `<img style="width: 20px;height: 20px;margin:0 1px 3px 1px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
+          )
+        })
+      }
+    }
+    return newData
+  }
+
+  /**
+   * 获得所有表情
+   *
+   * @return 表情列表
+   */
+  function getEmojiList(): Emoji[] {
+    return emojiList.map((item) => ({
+      url: getEmojiFileByName(item.name),
+      name: item.name
+    })) as Emoji[]
+  }
+
+  function getEmojiFileByName(name: string) {
+    for (const emoji of emojiList) {
+      if (emoji.name === name) {
+        const emojiPath = emojiPathList.value.find(
+          (item: { path: string; src: string }) => item.path.indexOf(emoji.file) > -1
+        )
+        return emojiPath ? emojiPath.src : undefined
+      }
+    }
+    return false
+  }
+
+  return { replaceEmoji, getEmojiList }
+}
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
new file mode 100644
index 00000000..f0fa2a02
--- /dev/null
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <el-container class="kefu-layout">
+    <!-- 会话列表 -->
+    <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
+    <!-- 会话详情（选中会话的消息列表） -->
+    <KeFuMessageList ref="keFuChatBoxRef" />
+    <!-- 会员信息（选中会话的会员信息） -->
+    <MemberInfo ref="memberInfoRef" />
+  </el-container>
+</template>
+
+<script lang="ts" setup>
+import { KeFuConversationList, KeFuMessageList, MemberInfo } from './components'
+import { WebSocketMessageTypeConstants } from './components/tools/constants'
+import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { getRefreshToken } from '@/utils/auth'
+import { useWebSocket } from '@vueuse/core'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
+
+defineOptions({ name: 'KeFu' })
+
+const message = useMessage() // 消息弹窗
+const kefuStore = useMallKefuStore() // 客服缓存
+
+// ======================= WebSocket start =======================
+const server = ref(
+  (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+    '?token=' +
+    getRefreshToken() // 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：WebSocket 无法方便的刷新访问令牌
+) // WebSocket 服务地址
+
+/** 发起 WebSocket 连接 */
+const { data, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true
+})
+
+/** 监听 WebSocket 数据 */
+watchEffect(() => {
+  if (!data.value) {
+    return
+  }
+  try {
+    // 1. 收到心跳
+    if (data.value === 'pong') {
+      return
+    }
+    // 2.1 解析 type 消息类型
+    const jsonMessage = JSON.parse(data.value)
+    const type = jsonMessage.type
+    if (!type) {
+      message.error('未知的消息类型：' + data.value)
+      return
+    }
+    // 2.2 消息类型：KEFU_MESSAGE_TYPE
+    if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+      const message = JSON.parse(jsonMessage.content)
+      // 刷新会话列表
+      kefuStore.updateConversation(message.conversationId)
+      // 刷新消息列表
+      keFuChatBoxRef.value?.refreshMessageList(message)
+      return
+    }
+    // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+    if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+      // 更新会话已读
+      kefuStore.updateConversationStatus(jsonParse(jsonMessage.content))
+    }
+  } catch (error) {
+    console.error(error)
+  }
+})
+// ======================= WebSocket end =======================
+
+/** 加载指定会话的消息列表 */
+const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>()
+const handleChange = (conversation: KeFuConversationRespVO) => {
+  keFuChatBoxRef.value?.getNewMessageList(conversation)
+  memberInfoRef.value?.initHistory(conversation)
+}
+
+const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
+/** 初始化 */
+onMounted(() => {
+  /** 加载会话列表 */
+  kefuStore.setConversationList().then(() => {
+    keFuConversationRef.value?.calculationLastMessageTime()
+  })
+  // 打开 websocket 连接
+  open()
+})
+
+/** 销毁 */
+onBeforeUnmount(() => {
+  // 关闭 websocket 连接
+  close()
+})
+</script>
+
+<style lang="scss">
+.kefu-layout {
+  position: absolute;
+  flex: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+/* 定义滚动条样式 */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 6px;
+}
+
+/* 定义滚动条轨道 内阴影+圆角 */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+/* 定义滑块 内阴影+圆角 */
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
+  background-color: rgba(240, 240, 240, 0.5);
+}
+</style>
diff --git a/src/views/mall/promotion/point/activity/PointActivityForm.vue b/src/views/mall/promotion/point/activity/PointActivityForm.vue
new file mode 100644
index 00000000..a09565cb
--- /dev/null
+++ b/src/views/mall/promotion/point/activity/PointActivityForm.vue
@@ -0,0 +1,227 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
+    <Form
+      ref="formRef"
+      v-loading="formLoading"
+      :isCol="true"
+      :rules="rules"
+      :schema="allSchemas.formSchema"
+    >
+      <!-- 先选择 -->
+      <template #spuId>
+        <el-button v-if="!isFormUpdate" @click="spuSelectRef.open()">选择商品</el-button>
+        <SpuAndSkuList
+          ref="spuAndSkuListRef"
+          :rule-config="ruleConfig"
+          :spu-list="spuList"
+          :spu-property-list-p="spuPropertyList"
+        >
+          <el-table-column align="center" label="可兑换库存" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number
+                v-model="sku.productConfig.stock"
+                :max="sku.stock"
+                :min="0"
+                class="w-100%"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="可兑换次数" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number v-model="sku.productConfig.count" :min="0" class="w-100%" />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="所需积分" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number v-model="sku.productConfig.point" :min="0" class="w-100%" />
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="所需金额(元)" min-width="168">
+            <template #default="{ row: sku }">
+              <el-input-number
+                v-model="sku.productConfig.price"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="w-100%"
+              />
+            </template>
+          </el-table-column>
+        </SpuAndSkuList>
+      </template>
+    </Form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <SpuSelect ref="spuSelectRef" :isSelectSku="true" @confirm="selectSpu" />
+</template>
+<script lang="ts" setup>
+import { SpuAndSkuList, SpuProperty, SpuSelect } from '../../components'
+import { allSchemas, rules } from './pointActivity.data'
+import { cloneDeep } from 'lodash-es'
+import {
+  PointActivityApi,
+  PointActivityVO,
+  PointProductVO,
+  SkuExtension,
+  SpuExtension
+} from '@/api/mall/promotion/point'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { getPropertyList, RuleConfig } from '@/views/mall/product/spu/components'
+import { convertToInteger, formatToFraction } from '@/utils'
+
+defineOptions({ name: 'PromotionSeckillActivityForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
+const isFormUpdate = ref(false) // 是否更新表单
+
+// ================= 商品选择相关 =================
+
+const spuSelectRef = ref() // 商品和属性选择 Ref
+const spuAndSkuListRef = ref() // sku 积分商城商品配置组件Ref
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换库存必须大于等于 1 ！！！'
+  },
+  {
+    name: 'productConfig.point',
+    rule: (arg) => arg >= 1,
+    message: '商品所需兑换积分必须大于等于 1 ！！！'
+  },
+  {
+    name: 'productConfig.count',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换次数必须大于等于 1 ！！！'
+  }
+]
+const spuList = ref<SpuExtension[]>([]) // 选择的 spu
+const spuPropertyList = ref<SpuProperty<SpuExtension>[]>([])
+const selectSpu = (spuId: number, skuIds: number[]) => {
+  formRef.value.setValues({ spuId })
+  getSpuDetails(spuId, skuIds)
+}
+/**
+ * 获取 SPU 详情
+ */
+const getSpuDetails = async (
+  spuId: number,
+  skuIds: number[] | undefined,
+  products?: PointProductVO[]
+) => {
+  const spuProperties: SpuProperty<SpuExtension>[] = []
+  const res = (await ProductSpuApi.getSpuDetailList([spuId])) as SpuExtension[]
+  if (res.length == 0) {
+    return
+  }
+  spuList.value = []
+  // 因为只能选择一个
+  const spu = res[0]
+  const selectSkus =
+    typeof skuIds === 'undefined' ? spu?.skus : spu?.skus?.filter((sku) => skuIds.includes(sku.id!))
+  selectSkus?.forEach((sku) => {
+    let config: PointProductVO = {
+      skuId: sku.id!,
+      stock: 0,
+      price: 0,
+      point: 0,
+      count: 0
+    }
+    if (typeof products !== 'undefined') {
+      const product = products.find((item) => item.skuId === sku.id)
+      if (product) {
+        product.price = formatToFraction(product.price) as any
+      }
+      config = product || config
+    }
+    sku.productConfig = config
+  })
+  spu.skus = selectSkus as SkuExtension[]
+  spuProperties.push({
+    spuId: spu.id!,
+    spuDetail: spu,
+    propertyList: getPropertyList(spu)
+  })
+  spuList.value.push(spu)
+  spuPropertyList.value = spuProperties
+}
+
+// ================= end =================
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  await resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = (await PointActivityApi.getPointActivity(id)) as PointActivityVO
+      isFormUpdate.value = true
+      await getSpuDetails(
+        data.spuId!,
+        data.products?.map((sku) => sku.skuId),
+        data.products
+      )
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    // 获取秒杀商品配置
+    const products = cloneDeep(spuAndSkuListRef.value.getSkuConfigs('productConfig'))
+    products.forEach((item: PointProductVO) => {
+      item.price = convertToInteger(item.price)
+    })
+    const data = formRef.value.formModel as PointActivityVO
+    data.products = products
+    // 真正提交
+    if (formType.value === 'create') {
+      await PointActivityApi.createPointActivity(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await PointActivityApi.updatePointActivity(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = async () => {
+  spuList.value = []
+  spuPropertyList.value = []
+  isFormUpdate.value = false
+  await nextTick()
+  formRef.value.getElFormRef().resetFields()
+}
+</script>
diff --git a/src/views/mall/promotion/point/activity/index.vue b/src/views/mall/promotion/point/activity/index.vue
new file mode 100644
index 00000000..ceceb7b5
--- /dev/null
+++ b/src/views/mall/promotion/point/activity/index.vue
@@ -0,0 +1,219 @@
+<template>
+  <doc-alert title="【营销】积分商城活动" url="https://doc.iocoder.cn/mall/promotion-point/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="68px"
+    >
+      <el-form-item label="活动状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-240px"
+          clearable
+          placeholder="请选择活动状态"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:point-activity:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column label="活动编号" min-width="80" prop="id" />
+      <el-table-column label="商品图片" min-width="80" prop="spuName">
+        <template #default="scope">
+          <el-image
+            :preview-src-list="[scope.row.picUrl]"
+            :src="scope.row.picUrl"
+            class="h-40px w-40px"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="商品标题" min-width="300" prop="spuName" />
+      <el-table-column
+        :formatter="fenToYuanFormat"
+        label="原价"
+        min-width="100"
+        prop="marketPrice"
+      />
+      <el-table-column label="原价" min-width="100" prop="marketPrice" />
+      <el-table-column align="center" label="活动状态" min-width="100" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="库存" min-width="80" prop="stock" />
+      <el-table-column align="center" label="总库存" min-width="80" prop="totalStock" />
+      <el-table-column align="center" label="已兑换数量" min-width="100" prop="redeemedQuantity">
+        <template #default="{ row }">
+          {{ getRedeemedQuantity(row) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
+        width="180px"
+      />
+      <el-table-column align="center" fixed="right" label="操作" width="150px">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['promotion:point-activity:update']"
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-if="scope.row.status === 0"
+            v-hasPermi="['promotion:point-activity:close']"
+            link
+            type="danger"
+            @click="handleClose(scope.row.id)"
+          >
+            关闭
+          </el-button>
+          <el-button
+            v-else
+            v-hasPermi="['promotion:point-activity:delete']"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <PointActivityForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import PointActivityForm from './PointActivityForm.vue'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { PointActivityApi } from '@/api/mall/promotion/point'
+
+defineOptions({ name: 'PointActivity' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: null
+})
+const queryFormRef = ref() // 搜索的表单
+const getRedeemedQuantity = computed(() => (row: any) => (row.totalStock || 0) - (row.stock || 0)) // 获得商品已兑换数量
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PointActivityApi.getPointActivityPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 关闭按钮操作 */
+const handleClose = async (id: number) => {
+  try {
+    // 关闭的二次确认
+    await message.confirm('确认关闭该积分商城活动吗？')
+    // 发起关闭
+    await PointActivityApi.closePointActivity(id)
+    message.success('关闭成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await PointActivityApi.deletePointActivity(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
+</script>
diff --git a/src/views/mall/promotion/point/activity/pointActivity.data.ts b/src/views/mall/promotion/point/activity/pointActivity.data.ts
new file mode 100644
index 00000000..a3334eac
--- /dev/null
+++ b/src/views/mall/promotion/point/activity/pointActivity.data.ts
@@ -0,0 +1,55 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+
+// 表单校验
+export const rules = reactive({
+  spuId: [required],
+  sort: [required]
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: '排序',
+    field: 'sort',
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 80
+    }
+  },
+  {
+    label: '积分商城活动商品',
+    field: 'spuId',
+    isTable: true,
+    isSearch: false,
+    form: {
+      colProps: {
+        span: 24
+      }
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    isSearch: false,
+    form: {
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 4
+      },
+      colProps: {
+        span: 24
+      }
+    },
+    table: {
+      width: 300
+    }
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/src/views/mall/promotion/point/components/PointShowcase.vue b/src/views/mall/promotion/point/components/PointShowcase.vue
new file mode 100644
index 00000000..82e490c5
--- /dev/null
+++ b/src/views/mall/promotion/point/components/PointShowcase.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="flex flex-wrap items-center gap-8px">
+    <div
+      v-for="(pointActivity, index) in pointActivityList"
+      :key="pointActivity.id"
+      class="select-box spu-pic"
+    >
+      <el-tooltip :content="pointActivity.name">
+        <div class="relative h-full w-full">
+          <el-image :src="pointActivity.picUrl" class="h-full w-full" />
+          <Icon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </el-tooltip>
+    </div>
+    <el-tooltip v-if="canAdd" content="选择活动">
+      <div class="select-box" @click="openSeckillActivityTableSelect">
+        <Icon icon="ep:plus" />
+      </div>
+    </el-tooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <PointTableSelect
+    ref="pointActivityTableSelectRef"
+    :multiple="limit != 1"
+    @change="handleActivitySelected"
+  />
+</template>
+<script lang="ts" setup>
+import PointTableSelect from './PointTableSelect.vue'
+import { PointActivityApi, PointActivityVO } from '@/api/mall/promotion/point'
+import { propTypes } from '@/utils/propTypes'
+import { oneOfType } from 'vue-types'
+import { isArray } from '@/utils/is'
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'PointShowcase' })
+
+const props = defineProps({
+  modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
+  // 限制数量：默认不限制
+  limit: propTypes.number.def(Number.MAX_VALUE),
+  disabled: propTypes.bool.def(false)
+})
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true
+  // 情况三：检查已添加数量是否小于限制数量
+  return pointActivityList.value.length < props.limit
+})
+
+// 拼团活动列表
+const pointActivityList = ref<PointActivityVO[]>([])
+
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = isArray(props.modelValue)
+      ? // 情况一：多选
+        props.modelValue
+      : // 情况二：单选
+        props.modelValue
+        ? [props.modelValue]
+        : []
+    // 不需要返显
+    if (ids.length === 0) {
+      pointActivityList.value = []
+      return
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      pointActivityList.value.length === 0 ||
+      pointActivityList.value.some((pointActivity) => !ids.includes(pointActivity.id!))
+    ) {
+      pointActivityList.value = await PointActivityApi.getPointActivityListByIds(ids)
+    }
+  },
+  { immediate: true }
+)
+
+/** 活动表格选择对话框 */
+const pointActivityTableSelectRef = ref()
+// 打开对话框
+const openSeckillActivityTableSelect = () => {
+  pointActivityTableSelectRef.value.open(pointActivityList.value)
+}
+
+/**
+ * 选择活动后触发
+ * @param activityList 选中的活动列表
+ */
+const handleActivitySelected = (activityList: PointActivityVO | PointActivityVO[]) => {
+  pointActivityList.value = isArray(activityList) ? activityList : [activityList]
+  emitActivityChange()
+}
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  pointActivityList.value.splice(index, 1)
+  emitActivityChange()
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const pointActivity = pointActivityList.value.length > 0 ? pointActivityList.value[0] : null
+    emit('update:modelValue', pointActivity?.id || 0)
+    emit('change', pointActivity)
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((pointActivity) => pointActivity.id)
+    )
+    emit('change', pointActivityList.value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/src/views/mall/promotion/point/components/PointTableSelect.vue b/src/views/mall/promotion/point/components/PointTableSelect.vue
new file mode 100644
index 00000000..d68b5f15
--- /dev/null
+++ b/src/views/mall/promotion/point/components/PointTableSelect.vue
@@ -0,0 +1,300 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择活动" width="70%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <el-form-item label="活动状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            class="!w-240px"
+            clearable
+            placeholder="请选择活动状态"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column v-if="multiple" width="55">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column v-else label="#" width="55">
+          <template #default="{ row }">
+            <el-radio
+              v-model="selectedActivityId"
+              :value="row.id"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" min-width="80" prop="id" />
+        <el-table-column label="商品图片" min-width="80" prop="spuName">
+          <template #default="scope">
+            <el-image
+              :preview-src-list="[scope.row.picUrl]"
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" min-width="300" prop="spuName" />
+        <el-table-column
+          :formatter="fenToYuanFormat"
+          label="原价"
+          min-width="100"
+          prop="marketPrice"
+        />
+        <el-table-column label="原价" min-width="100" prop="marketPrice" />
+        <el-table-column align="center" label="活动状态" min-width="100" prop="status">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="库存" min-width="80" prop="stock" />
+        <el-table-column align="center" label="总库存" min-width="80" prop="totalStock" />
+        <el-table-column align="center" label="已兑换数量" min-width="100" prop="redeemedQuantity">
+          <template #default="{ row }">
+            {{ getRedeemedQuantity(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="创建时间"
+          prop="createTime"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template v-if="multiple" #footer>
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { CHANGE_EVENT } from 'element-plus'
+import { PointActivityApi, PointActivityVO } from '@/api/mall/promotion/point'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'PointTableSelect' })
+
+defineProps({
+  // 多选模式
+  multiple: propTypes.bool.def(false)
+})
+
+// 列表的总页数
+const total = ref(0)
+// 列表的数据
+const list = ref<PointActivityVO[]>([])
+// 列表的加载中
+const loading = ref(false)
+// 弹窗的是否展示
+const dialogVisible = ref(false)
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: undefined
+})
+const getRedeemedQuantity = computed(() => (row: any) => (row.totalStock || 0) - (row.stock || 0)) // 获得商品已兑换数量
+/** 打开弹窗 */
+const open = (pointList?: PointActivityVO[]) => {
+  // 重置
+  checkedActivities.value = []
+  checkedStatus.value = {}
+  isCheckAll.value = false
+  isIndeterminate.value = false
+
+  // 处理已选中
+  if (pointList && pointList.length > 0) {
+    checkedActivities.value = [...pointList]
+    checkedStatus.value = Object.fromEntries(pointList.map((activityVO) => [activityVO.id, true]))
+  }
+
+  dialogVisible.value = true
+  resetQuery()
+}
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open })
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PointActivityApi.getPointActivityPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id] = checkedStatus.value[activityVO.id] || false)
+    )
+    // 计算全选框状态
+    calculateIsCheckAll()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: null,
+    status: undefined
+  }
+  getList()
+}
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedActivities = ref<PointActivityVO[]>([])
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+// 选中的活动 activityId
+const selectedActivityId = ref()
+/** 单选中时触发 */
+const handleSingleSelected = (pointActivityVO: PointActivityVO) => {
+  emits(CHANGE_EVENT, pointActivityVO)
+  // 关闭弹窗
+  dialogVisible.value = false
+  // 记住上次选择的ID
+  selectedActivityId.value = pointActivityVO.id
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits(CHANGE_EVENT, [...checkedActivities.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  (e: CHANGE_EVENT, v: PointActivityVO | PointActivityVO[] | any): void
+}>()
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((pointActivity) => handleCheckOne(checked, pointActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param pointActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  pointActivity: PointActivityVO,
+  isCalcCheckAll: boolean
+) => {
+  if (checked) {
+    checkedActivities.value.push(pointActivity)
+    checkedStatus.value[pointActivity.id] = true
+  } else {
+    const index = findCheckedIndex(pointActivity)
+    if (index > -1) {
+      checkedActivities.value.splice(index, 1)
+      checkedStatus.value[pointActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (activityVO: PointActivityVO) =>
+  checkedActivities.value.findIndex((item) => item.id === activityVO.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((activityVO) => checkedStatus.value[activityVO.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((activityVO) => checkedStatus.value[activityVO.id])
+}
+</script>
diff --git a/src/views/mall/promotion/rewardActivity/RewardForm.vue b/src/views/mall/promotion/rewardActivity/RewardForm.vue
index 9fb69a56..64a2dd4a 100644
--- a/src/views/mall/promotion/rewardActivity/RewardForm.vue
+++ b/src/views/mall/promotion/rewardActivity/RewardForm.vue
@@ -1,11 +1,11 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="80px"
-      v-loading="formLoading"
     >
       <el-form-item label="活动名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入活动名称" />
@@ -13,10 +13,11 @@
       <el-form-item label="活动时间" prop="startAndEndTime">
         <el-date-picker
           v-model="formData.startAndEndTime"
-          type="datetimerange"
-          range-separator="-"
-          :start-placeholder="t('common.startTimeText')"
           :end-placeholder="t('common.endTimeText')"
+          :start-placeholder="t('common.startTimeText')"
+          range-separator="-"
+          type="datetimerange"
+          value-format="x"
         />
       </el-form-item>
       <el-form-item label="条件类型" prop="conditionType">
@@ -31,81 +32,9 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="优惠设置">
-        <template v-for="(item, index) in formData.rules" :key="index">
-          <el-row type="flex">
-            <el-col :span="24" style="font-weight: bold; display: flex">
-              活动层级{{ index + 1 }}
-              <el-button
-                link
-                type="danger"
-                style="margin-left: auto"
-                v-if="index != 0"
-                @click="deleteActivityRule(index)"
-              >
-                删除
-              </el-button>
-            </el-col>
-            <e-form :ref="'formRef' + index" :model="item">
-              <el-form-item
-                label="优惠门槛:"
-                prop="limit"
-                label-width="100px"
-                style="padding-left: 50px"
-              >
-                满
-                <el-input
-                  style="width: 150px; padding: 0 10px"
-                  v-model="item.limit"
-                  type="number"
-                  placeholder=""
-                />
-                元
-              </el-form-item>
-              <el-form-item label="优惠内容:" label-width="100px" style="padding-left: 50px">
-                <el-checkbox-group v-model="activityRules[index]" style="width: 100%">
-                  <el-col :span="24">
-                    <el-checkbox label="订单金额优惠" name="type" />
-                    <el-form-item v-if="activityRules[index].includes('订单金额优惠')">
-                      减
-                      <el-input
-                        style="width: 150px; padding: 0 20px"
-                        v-model="item.discountPrice"
-                        type="number"
-                        placeholder=""
-                      />
-                      元
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="24">
-                    <el-checkbox v-model="item.freeDelivery" label="包邮" name="type" />
-                  </el-col>
-                  <el-col :span="24">
-                    <el-checkbox label="送积分" name="type" />
-                    <el-form-item v-if="activityRules[index].includes('送积分')">
-                      送
-                      <el-input
-                        style="width: 150px; padding: 0 20px"
-                        v-model="item.point"
-                        type="number"
-                        placeholder=""
-                      />
-                      积分
-                    </el-form-item>
-                  </el-col>
-                  <!-- 优惠券待处理  也可以参考优惠劵的SpuShowcase-->
-                  <!-- TODO 待实现！-->
-                  <el-col :span="24">
-                    <el-checkbox label="送优惠券" name="type" />
-                  </el-col>
-                </el-checkbox-group>
-              </el-form-item>
-            </e-form>
-          </el-row>
-        </template>
-        <!-- TODO 实现：建议改成放在每一个【活动层级】的下面，有点类似主子表 -->
-        <el-button type="primary" @click="addActivityStratum">添加活动层级</el-button>
+        <RewardRule ref="rewardRuleRef" v-model="formData" />
       </el-form-item>
-      <el-form-item label="活动商品" prop="productScope">
+      <el-form-item label="活动范围" prop="productScope">
         <el-radio-group v-model="formData.productScope">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE)"
@@ -116,90 +45,63 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <!-- TODO：活动商品的开发，可以参考优惠劵的，已经搞好啦； -->
       <el-form-item
         v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
         prop="productSpuIds"
       >
-        <el-select
-          v-model="formData.productSpuIds"
-          placeholder="请选择活动商品"
-          clearable
-          size="small"
-          multiple
-          filterable
-          style="width: 400px"
-        >
-          <el-option v-for="item in productSpus" :key="item.id" :label="item.name" :value="item.id">
-            <span style="float: left">{{ item.name }}</span>
-            <span style="float: right; font-size: 13px; color: #8492a6">
-              ￥{{ (item.price / 100.0).toFixed(2) }}
-            </span>
-          </el-option>
-        </el-select>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </el-form-item>
+      <el-form-item
+        v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
+        label="分类"
+        prop="productCategoryIds"
+      >
+        <ProductCategorySelect v-model="formData.productCategoryIds" :multiple="true" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { getSpuSimpleList } from '@/api/mall/product/spu'
+import RewardRule from './components/RewardRule.vue'
+import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as RewardActivityApi from '@/api/mall/promotion/reward/rewardActivity'
 import { PromotionConditionTypeEnum, PromotionProductScopeEnum } from '@/utils/constants'
+import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
+import { cloneDeep } from 'lodash-es'
+import { fenToYuan, yuanToFen } from '@/utils'
 
-/** 初始化 **/
-onMounted(() => {
-  getSpuSimpleList().then((response) => {
-    productSpus.value = response
-  })
-})
 defineOptions({ name: 'ProductBrandForm' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const productSpus = ref<any[]>([]) // 商品数据
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  name: undefined,
-  startAndEndTime: undefined,
-  startTime: undefined,
-  endTime: undefined,
+const formData = ref<RewardActivityApi.RewardActivityVO>({
   conditionType: PromotionConditionTypeEnum.PRICE.type,
-  remark: undefined,
   productScope: PromotionProductScopeEnum.ALL.scope,
-  productSpuIds: undefined,
-  rules: [
-    {
-      limit: undefined,
-      discountPrice: undefined,
-      freeDelivery: undefined,
-      point: undefined,
-      couponIds: [],
-      couponCounts: []
-    }
-  ]
-})
-const activityRules = reactive([]) // 优惠设置。每个元素都是一个 []，放“包邮”、“送积分”、“订单金额优惠”
+  rules: []
+} as RewardActivityApi.RewardActivityVO)
 const formRules = reactive({
   name: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
   startAndEndTime: [{ required: true, message: '活动时间不能为空', trigger: 'blur' }],
   conditionType: [{ required: true, message: '条件类型不能为空', trigger: 'change' }],
   productScope: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }],
-  productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }]
+  productSpuIds: [{ required: true, message: '商品不能为空', trigger: 'blur' }],
+  productCategoryIds: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }]
 })
-const formRef = ref([]) // 表单 Ref
+const formRef = ref() // 表单 Ref
+const rewardRuleRef = ref<InstanceType<typeof RewardRule>>() // 活动规则 Ref
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -211,24 +113,19 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      let data = await RewardActivityApi.getReward(id)
-      data.startAndEndTime = [new Date(data.startTime), new Date(data.endTime)]
-      activityRules.splice(0, activityRules.length)
-      data.rules.forEach((item) => {
-        // TODO 是不是不用 reactive，直接 [] 就可以了？
-        let array: string[] = reactive([])
-        if (item.freeDelivery) {
-          array.push('包邮')
+      const data = await RewardActivityApi.getReward(id)
+      // 转区段时间
+      data.startAndEndTime = [data.startTime, data.endTime]
+      // 规则分转元
+      data.rules?.forEach((item: any) => {
+        item.discountPrice = fenToYuan(item.discountPrice || 0)
+        if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = fenToYuan(item.limit || 0)
         }
-        if (item.point) {
-          array.push('送积分')
-        }
-        if (item.discountPrice) {
-          array.push('订单金额优惠')
-        }
-        activityRules.push(array)
       })
       formData.value = data
+      // 获得商品范围
+      await getProductScope()
     } finally {
       formLoading.value = false
     }
@@ -240,26 +137,29 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   // 校验表单
-  if (!formRef) return
+  if (!formRef.value) return
   const valid = await formRef.value.validate()
   if (!valid) return
-  // 处理下数据兼容接口
-  formData.value.startTime = +new Date(formData.value.startAndEndTime[0])
-  formData.value.endTime = +new Date(formData.value.startAndEndTime[1])
-  activityRules.forEach((item, index) => {
-    formData.value.rules[index].freeDelivery = !!item.includes('包邮')
-    if (!item.includes('送积分')) {
-      formData.value.rules[index].point = undefined
-    }
-    if (!item.includes('订单金额优惠')) {
-      formData.value.rules[index].discountPrice = undefined
-    }
-  })
 
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as RewardActivityApi.DiscountActivityVO
+    // 设置活动规则优惠券
+    rewardRuleRef.value?.setRuleCoupon()
+    const data = cloneDeep(formData.value)
+    // 时间段转换
+    data.startTime = data.startAndEndTime![0]
+    data.endTime = data.startAndEndTime![1]
+    delete data.startAndEndTime
+    // 规则元转分
+    data.rules.forEach((item) => {
+      item.discountPrice = yuanToFen(item.discountPrice || 0)
+      if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+        item.limit = yuanToFen(item.limit || 0)
+      }
+    })
+    // 设置商品范围
+    setProductScopeValues(data)
     if (formType.value === 'create') {
       await RewardActivityApi.createRewardActivity(data)
       message.success(t('common.createSuccess'))
@@ -275,51 +175,50 @@ const submitForm = async () => {
   }
 }
 
-const addActivityStratum = () => {
-  formData.value.rules.push({
-    limit: undefined,
-    discountPrice: undefined,
-    freeDelivery: undefined,
-    point: undefined,
-    couponIds: [],
-    couponCounts: []
-  })
-  activityRules.push([])
-}
-
-const deleteActivityRule = (index) => {
-  formData.value.rules.splice(index, 1)
-  activityRules.splice(index, 1)
-}
-
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: undefined,
-    name: undefined,
-    startAndEndTime: undefined,
-    startTime: undefined,
-    endTime: undefined,
     conditionType: PromotionConditionTypeEnum.PRICE.type,
-    remark: undefined,
     productScope: PromotionProductScopeEnum.ALL.scope,
-    productSpuIds: undefined,
-    rules: [
-      {
-        limit: undefined,
-        discountPrice: undefined,
-        freeDelivery: undefined,
-        point: undefined,
-        couponIds: [],
-        couponCounts: []
+    rules: []
+  } as RewardActivityApi.RewardActivityVO
+}
+
+/** 获得商品范围 */
+const getProductScope = async () => {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.SPU.scope:
+      // 设置商品编号
+      formData.value.productSpuIds = formData.value.productScopeValues
+      break
+    case PromotionProductScopeEnum.CATEGORY.scope:
+      await nextTick()
+      let productCategoryIds = formData.value.productScopeValues as any
+      if (Array.isArray(productCategoryIds) && productCategoryIds.length === 1) {
+        // 单选时使用数组不能反显
+        productCategoryIds = productCategoryIds[0]
       }
-    ]
+      // 设置品类编号
+      formData.value.productCategoryIds = productCategoryIds
+      break
+    default:
+      break
+  }
+}
+
+/** 设置商品范围 */
+function setProductScopeValues(data: any) {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.SPU.scope:
+      data.productScopeValues = formData.value.productSpuIds
+      break
+    case PromotionProductScopeEnum.CATEGORY.scope:
+      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
+        ? formData.value.productCategoryIds
+        : [formData.value.productCategoryIds]
+      break
+    default:
+      break
   }
-  activityRules.splice(0, activityRules.length)
-  activityRules.push(reactive([]))
-  // 解决下有时刷新页面第一次点编辑报错
-  nextTick(() => {
-    formRef.value?.resetFields()
-  })
 }
 </script>
diff --git a/src/views/mall/promotion/rewardActivity/components/RewardRule.vue b/src/views/mall/promotion/rewardActivity/components/RewardRule.vue
new file mode 100644
index 00000000..2c63a427
--- /dev/null
+++ b/src/views/mall/promotion/rewardActivity/components/RewardRule.vue
@@ -0,0 +1,138 @@
+<template>
+  <!-- 满减送活动规则组件 -->
+  <el-row>
+    <template v-if="formData.rules">
+      <el-col v-for="(rule, index) in formData.rules" :key="index" :span="24">
+        <span class="font-bold">活动层级{{ index + 1 }}</span>
+        <el-button v-if="index !== 0" link type="danger" @click="deleteRule(index)">
+          删除
+        </el-button>
+        <el-form ref="formRef" :model="rule">
+          <el-form-item label="优惠门槛:" label-width="100px" prop="limit">
+            满
+            <el-input-number
+              v-if="PromotionConditionTypeEnum.PRICE.type === formData.conditionType"
+              v-model="rule.limit"
+              :min="0"
+              :precision="2"
+              :step="0.1"
+              class="w-150px! p-x-20px!"
+              placeholder=""
+              type="number"
+              controls-position="right"
+            />
+            <el-input
+              v-else
+              v-model="rule.limit"
+              :min="0"
+              class="w-150px! p-x-20px!"
+              placeholder=""
+              type="number"
+            />
+            {{ PromotionConditionTypeEnum.PRICE.type === formData.conditionType ? '元' : '件' }}
+          </el-form-item>
+          <el-form-item label="优惠内容:" label-width="100px">
+            <el-col :span="24">
+              订单金额优惠
+              <el-form-item>
+                减
+                <el-input-number
+                  v-model="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="w-150px! p-x-20px!"
+                  controls-position="right"
+                />
+                元
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <span>包邮：</span>
+              <el-switch
+                v-model="rule.freeDelivery"
+                active-text="是"
+                inactive-text="否"
+                inline-prompt
+              />
+            </el-col>
+            <el-col :span="24">
+              <span>送积分：</span>
+              <el-form-item>
+                送
+                <el-input
+                  v-model="rule.point"
+                  class="w-150px! p-x-20px!"
+                  placeholder=""
+                  type="number"
+                />
+                积分
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <span>送优惠券：</span>
+              <RewardRuleCouponSelect ref="rewardRuleCouponSelectRef" v-model="rule!" />
+            </el-col>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </template>
+    <el-col :span="24" class="mt-10px">
+      <el-button type="primary" @click="addRule">添加优惠规则</el-button>
+    </el-col>
+    <el-col :span="24">
+      <el-tag type="warning"> 赠送积分为 0 时不赠送。未选优惠券时不赠送。</el-tag>
+    </el-col>
+  </el-row>
+</template>
+
+<script lang="ts" setup>
+import RewardRuleCouponSelect from './RewardRuleCouponSelect.vue'
+import { RewardActivityVO } from '@/api/mall/promotion/reward/rewardActivity'
+import { PromotionConditionTypeEnum } from '@/utils/constants'
+import { useVModel } from '@vueuse/core'
+import { isEmpty } from '@/utils/is'
+
+defineOptions({ name: 'RewardRule' })
+
+const props = defineProps<{
+  modelValue: RewardActivityVO
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void
+  (e: 'deleteRule', v: number): void
+}>()
+
+const formData = useVModel(props, 'modelValue', emits) // 活动数据
+const rewardRuleCouponSelectRef = ref<InstanceType<typeof RewardRuleCouponSelect>[]>() // 活动规则优惠券 Ref
+
+/** 删除优惠规则 */
+const deleteRule = (ruleIndex: number) => {
+  formData.value.rules.splice(ruleIndex, 1)
+}
+
+/** 添加优惠规则 */
+const addRule = () => {
+  if (isEmpty(formData.value.rules)) {
+    formData.value.rules = []
+  }
+  formData.value.rules.push({
+    limit: 0,
+    discountPrice: 0,
+    freeDelivery: false,
+    point: 0
+  })
+}
+
+/** 设置规则优惠券-提交时 */
+const setRuleCoupon = () => {
+  if (isEmpty(rewardRuleCouponSelectRef.value)) {
+    return
+  }
+
+  rewardRuleCouponSelectRef.value?.forEach((item) => item.setGiveCouponList())
+}
+
+defineExpose({ setRuleCoupon })
+</script>
diff --git a/src/views/mall/promotion/rewardActivity/components/RewardRuleCouponSelect.vue b/src/views/mall/promotion/rewardActivity/components/RewardRuleCouponSelect.vue
new file mode 100644
index 00000000..ccadd0b9
--- /dev/null
+++ b/src/views/mall/promotion/rewardActivity/components/RewardRuleCouponSelect.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-button class="ml-10px" type="text" @click="selectCoupon">添加优惠劵</el-button>
+
+  <div
+    v-for="(item, index) in list"
+    :key="item.id"
+    class="coupon-list-item p-x-10px mb-10px flex justify-between"
+  >
+    <div class="coupon-list-item-left flex items-center flex-wrap">
+      <div class="mr-10px"> 优惠券名称：{{ item.name }}</div>
+      <div class="mr-10px">
+        范围：
+        <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="item.productScope" />
+      </div>
+      <div class="flex items-center">
+        优惠：
+        <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="item.discountType" />
+        {{ discountFormat(item) }}
+      </div>
+    </div>
+    <div class="coupon-list-item-right">
+      送
+      <el-input v-model="item.giveCount" class="w-150px! p-x-20px!" placeholder="" type="number" />
+      张
+      <el-button class="ml-20px" link type="danger" @click="deleteCoupon(index)">删除</el-button>
+    </div>
+  </div>
+
+  <!-- 优惠券选择 -->
+  <CouponSelect
+    ref="couponSelectRef"
+    :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
+    @change="handleCouponChange"
+  />
+</template>
+
+<script lang="ts" setup>
+import { CouponSelect } from '@/views/mall/promotion/coupon/components'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { RewardRule } from '@/api/mall/promotion/reward/rewardActivity'
+import { DICT_TYPE } from '@/utils/dict'
+import { CouponTemplateTakeTypeEnum } from '@/utils/constants'
+import { discountFormat } from '@/views/mall/promotion/coupon/formatter'
+import { isEmpty } from '@/utils/is'
+import { useVModel } from '@vueuse/core'
+
+defineOptions({ name: 'RewardRuleCouponSelect' })
+
+const props = defineProps<{
+  modelValue: RewardRule
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void
+}>()
+
+const rewardRule = useVModel(props, 'modelValue', emits) // 赠送规则
+const list = ref<GiveCouponVO[]>([]) // 选择的优惠券列表
+
+/** 选择赠送的优惠类型拓展 */
+interface GiveCouponVO extends CouponTemplateApi.CouponTemplateVO {
+  giveCount?: number
+}
+
+/** 选择优惠券 */
+const couponSelectRef = ref<InstanceType<typeof CouponSelect>>() // 优惠券选择
+const selectCoupon = () => {
+  couponSelectRef.value?.open()
+}
+
+/** 选择优惠券后的回调 */
+const handleCouponChange = (val: CouponTemplateApi.CouponTemplateVO[]) => {
+  for (const item of val) {
+    if (list.value.some((v) => v.id === item.id)) {
+      continue
+    }
+    list.value.push(item)
+  }
+}
+
+/** 删除优惠券 */
+const deleteCoupon = (index: number) => {
+  list.value.splice(index, 1)
+}
+
+/** 初始化赠送的优惠券列表 */
+const initGiveCouponList = async () => {
+  // 校验优惠券存在
+  if (isEmpty(rewardRule.value) || isEmpty(rewardRule.value.giveCouponTemplateCounts)) {
+    return
+  }
+  const tempLateIds = Object.keys(rewardRule.value.giveCouponTemplateCounts!).map((item) =>
+    parseInt(item)
+  )
+  const data = await CouponTemplateApi.getCouponTemplateList(tempLateIds)
+  if (!data) {
+    return
+  }
+  // 回显
+  data.forEach((coupon) => {
+    list.value.push({
+      ...coupon,
+      giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id]
+    })
+  })
+}
+
+/** 设置赠送的优惠券 */
+const setGiveCouponList = () => {
+  if (isEmpty(rewardRule.value) || isEmpty(list.value)) {
+    return
+  }
+
+  // 设置优惠券和其数量的对应
+  list.value.forEach((rule) => {
+    if (!rewardRule.value.giveCouponTemplateCounts) {
+      rewardRule.value.giveCouponTemplateCounts = {}
+    }
+    rewardRule.value.giveCouponTemplateCounts[rule.id] = rule.giveCount!
+  })
+}
+defineExpose({ setGiveCouponList })
+
+/** 组件初始化 */
+onMounted(async () => {
+  await nextTick()
+  await initGiveCouponList()
+})
+</script>
+
+<style lang="scss" scoped>
+.coupon-list-item {
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+</style>
diff --git a/src/views/mall/promotion/rewardActivity/index.vue b/src/views/mall/promotion/rewardActivity/index.vue
index fa5f143c..544420e1 100644
--- a/src/views/mall/promotion/rewardActivity/index.vue
+++ b/src/views/mall/promotion/rewardActivity/index.vue
@@ -1,32 +1,33 @@
 <template>
+  <doc-alert title="【营销】满减送" url="https://doc.iocoder.cn/mall/promotion-record/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="活动名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入活动名称"
+          class="!w-240px"
           clearable
+          placeholder="请输入活动名称"
           @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="活动状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          placeholder="请选择活动状态"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择活动状态"
         >
           <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_ACTIVITY_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
@@ -36,24 +37,31 @@
       <el-form-item label="活动时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="活动开始日期"
-          end-placeholder="活动结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-240px"
+          end-placeholder="活动结束日期"
+          start-placeholder="活动开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
         <el-button
-          type="primary"
+          v-hasPermi="['promotion:reward-activity:create']"
           plain
+          type="primary"
           @click="openForm('create')"
-          v-hasPermi="['product:brand:create']"
         >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
         </el-button>
       </el-form-item>
     </el-form>
@@ -61,47 +69,61 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
+    <el-table v-loading="loading" :data="list" default-expand-all row-key="id">
       <el-table-column label="活动名称" prop="name" />
+      <el-table-column label="活动范围" prop="productScope" >
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
+        </template>
+      </el-table-column>
       <el-table-column
-        label="活动开始时间"
+        :formatter="dateFormatter"
         align="center"
+        label="活动开始时间"
         prop="startTime"
-        :formatter="dateFormatter"
       />
       <el-table-column
-        label="活动结束时间"
+        :formatter="dateFormatter"
         align="center"
+        label="活动结束时间"
         prop="endTime"
-        :formatter="dateFormatter"
       />
-      <el-table-column label="状态" align="center" prop="status">
+      <el-table-column align="center" label="状态" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.PROMOTION_ACTIVITY_STATUS" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
         align="center"
+        label="创建时间"
         prop="createTime"
         width="180"
-        :formatter="dateFormatter"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column align="center" label="操作">
         <template #default="scope">
           <el-button
+            v-hasPermi="['promotion:reward-activity:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['product:brand:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-if="scope.row.status === 0"
+            v-hasPermi="['promotion:reward-activity:close']"
+            link
+            type="danger"
+            @click="handleClose(scope.row.id)"
+          >
+            关闭
+          </el-button>
+          <el-button
+            v-hasPermi="['promotion:reward-activity:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['product:brand:delete']"
           >
             删除
           </el-button>
@@ -110,9 +132,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -167,9 +189,22 @@ const resetQuery = () => {
 }
 
 /** 添加/修改操作 */
-const formRef = ref()
+const formRef = ref<InstanceType<typeof RewardForm>>()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formRef.value?.open(type, id)
+}
+
+/** 关闭按钮操作 */
+const handleClose = async (id: number) => {
+  try {
+    // 关闭的二次确认
+    await message.confirm('确认关闭该满减活动吗？')
+    // 发起关闭
+    await RewardActivityApi.closeRewardActivity(id)
+    message.success('关闭成功')
+    // 刷新列表
+    await getList()
+  } catch {}
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/mall/promotion/seckill/activity/index.vue b/src/views/mall/promotion/seckill/activity/index.vue
index e91ac3da..bffe265a 100644
--- a/src/views/mall/promotion/seckill/activity/index.vue
+++ b/src/views/mall/promotion/seckill/activity/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】秒杀活动" url="https://doc.iocoder.cn/mall/promotion-seckill/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/promotion/seckill/components/SeckillShowcase.vue b/src/views/mall/promotion/seckill/components/SeckillShowcase.vue
new file mode 100644
index 00000000..a924e8ca
--- /dev/null
+++ b/src/views/mall/promotion/seckill/components/SeckillShowcase.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="flex flex-wrap items-center gap-8px">
+    <div
+      v-for="(seckillActivity, index) in Activitys"
+      :key="seckillActivity.id"
+      class="select-box spu-pic"
+    >
+      <el-tooltip :content="seckillActivity.name">
+        <div class="relative h-full w-full">
+          <el-image :src="seckillActivity.picUrl" class="h-full w-full" />
+          <Icon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </el-tooltip>
+    </div>
+    <el-tooltip content="选择活动" v-if="canAdd">
+      <div class="select-box" @click="openSeckillActivityTableSelect">
+        <Icon icon="ep:plus" />
+      </div>
+    </el-tooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <SeckillTableSelect
+    ref="seckillActivityTableSelectRef"
+    :multiple="limit != 1"
+    @change="handleActivitySelected"
+  />
+</template>
+<script lang="ts" setup>
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { propTypes } from '@/utils/propTypes'
+import { oneOfType } from 'vue-types'
+import { isArray } from '@/utils/is'
+import SeckillTableSelect from '@/views/mall/promotion/seckill/components/SeckillTableSelect.vue'
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'SeckillShowcase' })
+
+const props = defineProps({
+  modelValue: oneOfType<number | Array<number>>([Number, Array]).isRequired,
+  // 限制数量：默认不限制
+  limit: propTypes.number.def(Number.MAX_VALUE),
+  disabled: propTypes.bool.def(false)
+})
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true
+  // 情况三：检查已添加数量是否小于限制数量
+  return Activitys.value.length < props.limit
+})
+
+// 拼团活动列表
+const Activitys = ref<SeckillActivityApi.SeckillActivityVO[]>([])
+
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = isArray(props.modelValue)
+      ? // 情况一：多选
+        props.modelValue
+      : // 情况二：单选
+        props.modelValue
+        ? [props.modelValue]
+        : []
+    // 不需要返显
+    if (ids.length === 0) {
+      Activitys.value = []
+      return
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      Activitys.value.length === 0 ||
+      Activitys.value.some((seckillActivity) => !ids.includes(seckillActivity.id!))
+    ) {
+      Activitys.value = await SeckillActivityApi.getSeckillActivityListByIds(ids)
+    }
+  },
+  { immediate: true }
+)
+
+/** 活动表格选择对话框 */
+const seckillActivityTableSelectRef = ref()
+// 打开对话框
+const openSeckillActivityTableSelect = () => {
+  seckillActivityTableSelectRef.value.open(Activitys.value)
+}
+
+/**
+ * 选择活动后触发
+ * @param activityVOs 选中的活动列表
+ */
+const handleActivitySelected = (
+  activityVOs: SeckillActivityApi.SeckillActivityVO | SeckillActivityApi.SeckillActivityVO[]
+) => {
+  Activitys.value = isArray(activityVOs) ? activityVOs : [activityVOs]
+  emitActivityChange()
+}
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  Activitys.value.splice(index, 1)
+  emitActivityChange()
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const seckillActivity = Activitys.value.length > 0 ? Activitys.value[0] : null
+    emit('update:modelValue', seckillActivity?.id || 0)
+    emit('change', seckillActivity)
+  } else {
+    emit(
+      'update:modelValue',
+      Activitys.value.map((seckillActivity) => seckillActivity.id)
+    )
+    emit('change', Activitys.value)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/src/views/mall/promotion/seckill/components/SeckillTableSelect.vue b/src/views/mall/promotion/seckill/components/SeckillTableSelect.vue
new file mode 100644
index 00000000..3e4e67e9
--- /dev/null
+++ b/src/views/mall/promotion/seckill/components/SeckillTableSelect.vue
@@ -0,0 +1,343 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="选择活动" width="70%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <el-form-item label="活动名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入活动名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="活动状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择活动状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column width="55" v-if="multiple">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column label="#" width="55" v-else>
+          <template #default="{ row }">
+            <el-radio
+              :value="row.id"
+              v-model="selectedActivityId"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" prop="id" min-width="80" />
+        <el-table-column label="活动名称" prop="name" min-width="140" />
+        <el-table-column label="活动时间" min-width="210">
+          <template #default="scope">
+            {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
+            ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商品图片" prop="spuName" min-width="80">
+          <template #default="scope">
+            <el-image
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              :preview-src-list="[scope.row.picUrl]"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" prop="spuName" min-width="300" />
+        <el-table-column
+          label="原价"
+          prop="marketPrice"
+          min-width="100"
+          :formatter="fenToYuanFormat"
+        />
+        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+          <template #default="scope">
+            {{ formatSeckillPrice(scope.row.products) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
+        <el-table-column label="成团组数" prop="groupSuccessCount" min-width="100" />
+        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
+        <el-table-column label="活动状态" align="center" prop="status" min-width="100">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer v-if="multiple">
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { handleTree } from '@/utils/tree'
+
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import { propTypes } from '@/utils/propTypes'
+import { CHANGE_EVENT } from 'element-plus'
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import { fenToYuanFormat } from '@/utils/formatter'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { fenToYuan } from '@/utils'
+
+type SeckillActivityVO = Required<SeckillActivityApi.SeckillActivityVO>
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'SeckillTableSelect' })
+
+defineProps({
+  // 多选模式
+  multiple: propTypes.bool.def(false)
+})
+
+// 列表的总页数
+const total = ref(0)
+// 列表的数据
+const list = ref<SeckillActivityVO[]>([])
+// 列表的加载中
+const loading = ref(false)
+// 弹窗的是否展示
+const dialogVisible = ref(false)
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: undefined
+})
+
+/** 打开弹窗 */
+const open = (SeckillList?: SeckillActivityVO[]) => {
+  // 重置
+  checkedActivitys.value = []
+  checkedStatus.value = {}
+  isCheckAll.value = false
+  isIndeterminate.value = false
+
+  // 处理已选中
+  if (SeckillList && SeckillList.length > 0) {
+    checkedActivitys.value = [...SeckillList]
+    checkedStatus.value = Object.fromEntries(SeckillList.map((activityVO) => [activityVO.id, true]))
+  }
+
+  dialogVisible.value = true
+  resetQuery()
+}
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open })
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await SeckillActivityApi.getSeckillActivityPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id] = checkedStatus.value[activityVO.id] || false)
+    )
+    // 计算全选框状态
+    calculateIsCheckAll()
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: undefined,
+    createTime: []
+  }
+  getList()
+}
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatSeckillPrice = (products) => {
+  const seckillPrice = Math.min(...products.map((item) => item.seckillPrice))
+  return `￥${fenToYuan(seckillPrice)}`
+}
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedActivitys = ref<SeckillActivityVO[]>([])
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+// 选中的活动 activityId
+const selectedActivityId = ref()
+/** 单选中时触发 */
+const handleSingleSelected = (seckillActivityVO: SeckillActivityVO) => {
+  emits(CHANGE_EVENT, seckillActivityVO)
+  // 关闭弹窗
+  dialogVisible.value = false
+  // 记住上次选择的ID
+  selectedActivityId.value = seckillActivityVO.id
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits(CHANGE_EVENT, [...checkedActivitys.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [SeckillActivityApi: SeckillActivityVO | SeckillActivityVO[] | any]
+}>()
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((seckillActivity) => handleCheckOne(checked, seckillActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param seckillActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  seckillActivity: SeckillActivityVO,
+  isCalcCheckAll: boolean
+) => {
+  if (checked) {
+    checkedActivitys.value.push(seckillActivity)
+    checkedStatus.value[seckillActivity.id] = true
+  } else {
+    const index = findCheckedIndex(seckillActivity)
+    if (index > -1) {
+      checkedActivitys.value.splice(index, 1)
+      checkedStatus.value[seckillActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (activityVO: SeckillActivityVO) =>
+  checkedActivitys.value.findIndex((item) => item.id === activityVO.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((activityVO) => checkedStatus.value[activityVO.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((activityVO) => checkedStatus.value[activityVO.id])
+}
+
+// 分类列表
+const categoryList = ref()
+// 分类树
+const categoryTreeList = ref()
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获得分类树
+  categoryList.value = await ProductCategoryApi.getCategoryList({})
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId')
+})
+</script>
diff --git a/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
index a7ce5fe7..185b2569 100644
--- a/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
+++ b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
@@ -32,7 +32,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/mall/promotion/seckill/config/index.vue b/src/views/mall/promotion/seckill/config/index.vue
index dbd0600c..9fa2c1e3 100644
--- a/src/views/mall/promotion/seckill/config/index.vue
+++ b/src/views/mall/promotion/seckill/config/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【营销】秒杀活动" url="https://doc.iocoder.cn/mall/promotion-seckill/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/statistics/member/index.vue b/src/views/mall/statistics/member/index.vue
index 25af5ac4..0e1bbaf6 100644
--- a/src/views/mall/statistics/member/index.vue
+++ b/src/views/mall/statistics/member/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【统计】会员、商品、交易统计" url="https://doc.iocoder.cn/mall/statistics/" />
 
   <div class="flex flex-col">
     <el-row :gutter="16" class="summary">
diff --git a/src/views/mall/statistics/product/index.vue b/src/views/mall/statistics/product/index.vue
index 0376ef59..d1bcba63 100644
--- a/src/views/mall/statistics/product/index.vue
+++ b/src/views/mall/statistics/product/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【统计】会员、商品、交易统计" url="https://doc.iocoder.cn/mall/statistics/" />
 
   <!-- 商品概览 -->
   <ProductSummary />
diff --git a/src/views/mall/statistics/trade/index.vue b/src/views/mall/statistics/trade/index.vue
index 9dbdf2c0..0a25fd74 100644
--- a/src/views/mall/statistics/trade/index.vue
+++ b/src/views/mall/statistics/trade/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【统计】会员、商品、交易统计" url="https://doc.iocoder.cn/mall/statistics/" />
 
   <div class="flex flex-col">
     <el-row :gutter="16" class="summary">
diff --git a/src/views/mall/trade/afterSale/detail/index.vue b/src/views/mall/trade/afterSale/detail/index.vue
index 26df0d34..024f4895 100644
--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
@@ -325,13 +325,13 @@ onMounted(async () => {
     align-items: center;
     min-height: 30px;
     padding: 10px;
-    background-color: #f7f8fa;
+    background-color: var(--app-content-bg-color);
 
     &::before {
       position: absolute;
       top: 10px;
       left: 13px;
-      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+      border-color: transparent var(--app-content-bg-color) transparent transparent; /* 尖角颜色，左侧朝向 */
       border-style: solid;
       border-width: 8px; /* 调整尖角大小 */
       content: '';
diff --git a/src/views/mall/trade/afterSale/index.vue b/src/views/mall/trade/afterSale/index.vue
index c4bba98a..0c4d0b85 100644
--- a/src/views/mall/trade/afterSale/index.vue
+++ b/src/views/mall/trade/afterSale/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【交易】售后退款" url="https://doc.iocoder.cn/mall/trade-aftersale/" />
 
   <!-- 搜索 -->
   <ContentWrap>
@@ -80,7 +81,7 @@
         <el-date-picker
           v-model="queryParams.createTime"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-260px"
+          class="!w-280px"
           end-placeholder="自定义时间"
           start-placeholder="自定义时间"
           type="daterange"
@@ -134,7 +135,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="订单金额" prop="refundPrice">
+      <el-table-column align="center" label="订单金额" min-width="120" prop="refundPrice">
         <template #default="scope">
           <span>{{ fenToYuan(scope.row.refundPrice) }} 元</span>
         </template>
@@ -205,6 +206,7 @@ const queryParams = reactive({
   way: null,
   type: null
 })
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -215,23 +217,26 @@ const getList = async () => {
       delete data.status
     }
     // 执行查询
-    const res = (await AfterSaleApi.getAfterSalePage(data)) as AfterSaleApi.TradeAfterSaleVO[]
-    list.value = res.list
+    const res = await AfterSaleApi.getAfterSalePage(data)
+    list.value = res.list as AfterSaleApi.TradeAfterSaleVO[]
     total.value = res.total
   } finally {
     loading.value = false
   }
 }
+
 /** 搜索按钮操作 */
 const handleQuery = async () => {
   queryParams.pageNo = 1
   await getList()
 }
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   handleQuery()
 }
+
 /** tab 切换 */
 const tabClick = async (tab: TabsPaneContext) => {
   queryParams.status = tab.paneName
@@ -245,7 +250,7 @@ const openAfterSaleDetail = (id: number) => {
 
 /** 查看订单详情 */
 const openOrderDetail = (id: number) => {
-  push({ name: 'TradeOrderDetail', params: { orderId: id } })
+  push({ name: 'TradeOrderDetail', params: { id } })
 }
 
 /** 商品图预览 */
diff --git a/src/views/mall/trade/brokerage/record/index.vue b/src/views/mall/trade/brokerage/record/index.vue
index 32d17a09..8f138adc 100644
--- a/src/views/mall/trade/brokerage/record/index.vue
+++ b/src/views/mall/trade/brokerage/record/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【交易】分销返佣" url="https://doc.iocoder.cn/mall/trade-brokerage/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue b/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
index 54e3c16d..20b4a9ab 100644
--- a/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
+++ b/src/views/mall/trade/brokerage/user/BrokerageOrderListDialog.vue
@@ -12,8 +12,8 @@
         <el-form-item label="用户类型" prop="level">
           <el-radio-group v-model="queryParams.level" @change="handleQuery">
             <el-radio-button checked>全部</el-radio-button>
-            <el-radio-button label="1">一级推广人</el-radio-button>
-            <el-radio-button label="2">二级推广人</el-radio-button>
+            <el-radio-button value="1">一级推广人</el-radio-button>
+            <el-radio-button value="2">二级推广人</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="状态" prop="status">
diff --git a/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue b/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue
index 87dc8f67..732f4bbb 100644
--- a/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue
+++ b/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue
@@ -12,8 +12,8 @@
         <el-form-item label="用户类型" prop="level">
           <el-radio-group v-model="queryParams.level" @change="handleQuery">
             <el-radio-button checked>全部</el-radio-button>
-            <el-radio-button label="1">一级推广人</el-radio-button>
-            <el-radio-button label="2">二级推广人</el-radio-button>
+            <el-radio-button value="1">一级推广人</el-radio-button>
+            <el-radio-button value="2">二级推广人</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="绑定时间" prop="bindUserTime">
diff --git a/src/views/mall/trade/brokerage/user/index.vue b/src/views/mall/trade/brokerage/user/index.vue
index 596dad4d..22daf1b2 100644
--- a/src/views/mall/trade/brokerage/user/index.vue
+++ b/src/views/mall/trade/brokerage/user/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【交易】分销返佣" url="https://doc.iocoder.cn/mall/trade-brokerage/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/trade/brokerage/withdraw/index.vue b/src/views/mall/trade/brokerage/withdraw/index.vue
index a54d93ae..762451f1 100644
--- a/src/views/mall/trade/brokerage/withdraw/index.vue
+++ b/src/views/mall/trade/brokerage/withdraw/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【交易】分销返佣" url="https://doc.iocoder.cn/mall/trade-brokerage/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/mall/trade/config/index.vue b/src/views/mall/trade/config/index.vue
index 03bbe17a..6aa4b979 100644
--- a/src/views/mall/trade/config/index.vue
+++ b/src/views/mall/trade/config/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="【交易】交易订单" url="https://doc.iocoder.cn/mall/trade-order/" />
+  <doc-alert title="【交易】购物车" url="https://doc.iocoder.cn/mall/trade-cart/" />
 
   <ContentWrap>
     <el-form
@@ -80,7 +82,7 @@
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_ENABLED_CONDITION)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
@@ -97,7 +99,7 @@
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_BIND_MODE)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
@@ -180,7 +182,7 @@
               <el-checkbox
                 v-for="dict in getIntDictOptions(DICT_TYPE.BROKERAGE_WITHDRAW_TYPE)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-checkbox>
diff --git a/src/views/mall/trade/delivery/express/ExpressForm.vue b/src/views/mall/trade/delivery/express/ExpressForm.vue
index 232fb793..8b759f28 100644
--- a/src/views/mall/trade/delivery/express/ExpressForm.vue
+++ b/src/views/mall/trade/delivery/express/ExpressForm.vue
@@ -25,7 +25,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/mall/trade/delivery/express/index.vue b/src/views/mall/trade/delivery/express/index.vue
index a830e482..1cde87d1 100644
--- a/src/views/mall/trade/delivery/express/index.vue
+++ b/src/views/mall/trade/delivery/express/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【交易】快递发货" url="https://doc.iocoder.cn/mall/trade-delivery-express/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue b/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue
index edbcbc3a..547aece6 100644
--- a/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue
+++ b/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.EXPRESS_CHARGE_MODE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/mall/trade/delivery/expressTemplate/index.vue b/src/views/mall/trade/delivery/expressTemplate/index.vue
index eff8b9e1..9d0688a9 100644
--- a/src/views/mall/trade/delivery/expressTemplate/index.vue
+++ b/src/views/mall/trade/delivery/expressTemplate/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【交易】快递发货" url="https://doc.iocoder.cn/mall/trade-delivery-express/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mall/trade/delivery/pickUpOrder/index.vue b/src/views/mall/trade/delivery/pickUpOrder/index.vue
index bdca0c42..e864dd3e 100644
--- a/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="【交易】交易订单" url="https://doc.iocoder.cn/mall/trade-order/" />
+  <doc-alert title="【交易】购物车" url="https://doc.iocoder.cn/mall/trade-cart/" />
 
   <!-- 搜索 -->
   <ContentWrap>
@@ -24,9 +26,8 @@
         <el-select
           v-model="queryParams.pickUpStoreId"
           class="!w-280px"
-          clearable
-          multiple
           placeholder="全部"
+          @change="handleQuery"
         >
           <el-option
             v-for="item in pickUpStoreList"
@@ -71,10 +72,22 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button @click="handlePickup" type="success" plain v-hasPermi="['trade:order:pick-up']">
+        <el-button
+          @click="handlePickup"
+          type="success"
+          plain
+          v-hasPermi="['trade:order:pick-up']"
+          :disabled="isUse"
+        >
           <Icon class="mr-5px" icon="ep:check" />
           核销
         </el-button>
+        <el-button type="primary" @click="connectToSerialPort" :disabled="serialPort || isUse">
+          连接扫描枪
+        </el-button>
+        <el-button type="danger" @click="cutPort" :disabled="!serialPort || isUse">
+          断开扫描枪
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -214,18 +227,20 @@ import { DeliveryTypeEnum } from '@/utils/constants'
 import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'
 import { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
 import OrderPickUpForm from '@/views/mall/trade/order/form/OrderPickUpForm.vue'
+import { ref, onMounted } from 'vue'
+import { useUserStore } from '@/store/modules/user'
+const message = useMessage() // 消息弹窗
+
+const port = ref('')
+const ports = ref([])
+const reader = ref('')
 
 defineOptions({ name: 'PickUpOrder' })
 
-// 列表的加载中
-const loading = ref(true)
-// 列表的总页数
-const total = ref(2)
-// 列表的数据
-const list = ref<TradeOrderApi.OrderVO[]>([])
-// 搜索的表单
-const queryFormRef = ref<FormInstance>()
-// 初始表单参数
+const loading = ref(true) // 列表的加载中
+const total = ref(2) // 列表的总页数
+const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
+const queryFormRef = ref<FormInstance>() // 搜索的表单
 const INIT_QUERY_PARAMS = {
   // 页数
   pageNo: 1,
@@ -236,14 +251,15 @@ const INIT_QUERY_PARAMS = {
   // 配送方式
   deliveryType: DeliveryTypeEnum.PICK_UP.type,
   // 自提门店
-  pickUpStoreId: undefined
-}
-// 表单搜索
-const queryParams = ref({ ...INIT_QUERY_PARAMS })
-// 订单搜索类型 queryParam
-const queryType = reactive({ queryParam: 'no' })
-// 订单统计数据
-const summary = ref<TradeOrderSummaryRespVO>()
+  pickUpStoreId: -1
+} // 初始表单参数
+
+const queryParams = ref({ ...INIT_QUERY_PARAMS }) // 表单搜索
+const queryType = reactive({ queryParam: 'no' }) // 订单搜索类型 queryParam
+const summary = ref<TradeOrderSummaryRespVO>() // 订单统计数据
+
+const serialPort = ref(false) // 是否连接扫码枪
+const isUse = ref(true) // 是否可核销
 
 // 订单聚合搜索 select 类型配置（动态搜索）
 const dynamicSearchList = ref([
@@ -292,13 +308,21 @@ const handleQuery = async () => {
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   queryParams.value = { ...INIT_QUERY_PARAMS }
+  if (pickUpStoreList.value.length > 0) {
+    queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+  }
   handleQuery()
 }
 
 /** 自提门店精简列表 */
 const pickUpStoreList = ref<DeliveryPickUpStoreVO[]>([])
 const getPickUpStoreList = async () => {
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
+  // 移除自己无法核销的门店
+  const userId = useUserStore().getUser.id
+  pickUpStoreList.value = pickUpStoreList.value.filter((item) =>
+    item.verifyUserIds?.includes(userId)
+  )
 }
 
 /** 显示核销表单 */
@@ -307,10 +331,96 @@ const handlePickup = () => {
   pickUpForm.value.open()
 }
 
+/** 连接扫码枪 */
+const connectToSerialPort = async () => {
+  try {
+    // 判断浏览器支持串口通信
+    if (
+      'serial' in navigator &&
+      navigator.serial != null &&
+      typeof navigator.serial === 'object' &&
+      'requestPort' in navigator.serial
+    ) {
+      // 提示用户选择一个串口
+      port.value = await navigator.serial.requestPort()
+    } else {
+      message.error('浏览器不支持扫码枪连接，请更换浏览器重试')
+      return
+    }
+
+    // 获取用户之前授予该网站访问权限的所有串口。
+    ports.value = await navigator.serial.getPorts()
+
+    // console.log(port.value, ports.value);
+    // console.log(port.value)
+    // 等待串口打开
+    await port.value.open({ baudRate: 9600, dataBits: 8, stopBits: 2 })
+
+    // console.log(typeof port.value);
+    message.success('成功连接扫码枪')
+    serialPort.value = true
+    // readData(port.value);
+    readData()
+  } catch (error) {
+    // 处理连接串口出错的情况
+    console.log('Error connecting to serial port:', error)
+  }
+}
+
+/** 监听扫码枪输入 */
+const readData = async () => {
+  reader.value = port.value.readable.getReader()
+  let data = '' //扫码数据
+  // 监听来自串口的数据
+  while (true) {
+    const { value, done } = await reader.value.read()
+    if (done) {
+      // 允许稍后关闭串口
+      reader.value.releaseLock()
+      break
+    }
+    // 获取发送的数据
+    const serialData = new TextDecoder().decode(value)
+    data = `${data}${serialData}`
+    if (serialData.includes('\r')) {
+      //读取结束
+      let codeData = data.replace('\r', '')
+      data = '' //清空下次读取不会叠加
+      console.log(`二维码数据:${codeData}`)
+      //处理拿到数据逻辑
+      pickUpForm.value.open(codeData)
+    }
+  }
+}
+
+/** 断开扫码枪 */
+const cutPort = async () => {
+  if (port.value !== '') {
+    await reader.value.cancel()
+    await port.value.close()
+    port.value = ''
+    console.log('断开扫码枪连接')
+    message.success('已成功断开扫码枪连接')
+    serialPort.value = false
+  } else {
+    message.warning('请先连接或打开扫码枪')
+  }
+}
+
 /** 初始化 **/
-onMounted(() => {
-  getList()
-  getPickUpStoreList()
+onMounted(async () => {
+  await getPickUpStoreList()
+  if (pickUpStoreList.value.length === 0) {
+    message.error('当前登录人没绑定任何自提点')
+    loading.value = false
+    isUse.value = true
+    return
+  }
+
+  // 查询
+  queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+  isUse.value = false
+  await getList()
 })
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue b/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
new file mode 100644
index 00000000..8ea04a13
--- /dev/null
+++ b/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
@@ -0,0 +1,143 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="20%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="门店名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入门店名称" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="门店店员" prop="verifyUserIds">
+            <el-button type="primary" @click="storeStaffTableSelect.open()">选择店员</el-button>
+          </el-form-item>
+          <!-- 店员列表 -->
+          <ContentWrap v-if="formData.verifyUsers.length > 0">
+            <el-table :data="formData.verifyUsers">
+              <el-table-column label="编号" align="center" prop="id" />
+              <el-table-column
+                label="用户昵称"
+                align="center"
+                prop="nickname"
+                :show-overflow-tooltip="true"
+              />
+              <el-table-column label="状态" align="center" key="status">
+                <template #default="scope">
+                  <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="操作">
+                <template #default="scope">
+                  <el-button
+                    v-hasPermi="['trade:delivery:pick-up-store:delete']"
+                    link
+                    type="danger"
+                    @click="handleDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </ContentWrap>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+
+  <!-- 选择员工弹窗 -->
+  <StoreStaffTableSelect ref="storeStaffTableSelect" @change="handleSelect" />
+</template>
+<script setup lang="ts">
+import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
+import StoreStaffTableSelect from './components/StoreStaffTableSelect.vue'
+import { DICT_TYPE } from '@/utils/dict'
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  name: '',
+  verifyUserIds: [],
+  verifyUsers: []
+})
+const formRules = reactive({})
+const formRef = ref() // 表单 Ref
+const storeStaffTableSelect = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = '绑定自提门店员工'
+  resetForm()
+  formLoading.value = true
+  try {
+    formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = {
+      id: formData.value.id,
+      verifyUserIds: formData.value.verifyUsers.map((item: any) => item.id)
+    }
+    await DeliveryPickUpStoreApi.bindStoreStaffId(data)
+    message.success('绑定成功')
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理选择员工操作 */
+const handleSelect = (checkedUsers: []) => {
+  formData.value.verifyUsers = checkedUsers
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  const index = formData.value.verifyUsers.findIndex((item: any) => {
+    if (item.id == id) {
+      return true
+    }
+  })
+  formData.value.verifyUsers.splice(index, 1)
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    verifyUserIds: [],
+    verifyUsers: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue b/src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue
index 59005588..077ba672 100644
--- a/src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/PickUpStoreForm.vue
@@ -20,7 +20,7 @@
               <el-radio
                 v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
                 :key="dict.value"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </el-radio>
@@ -106,14 +106,8 @@
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
-    <el-dialog
-      v-model="mapDialogVisible"
-      title="获取经纬度"
-      append-to-body
-      width="500px"
-      class="mapBox"
-    >
-      <iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="tencentLbsUrl"></iframe>
+    <el-dialog v-model="mapDialogVisible" title="获取经纬度" append-to-body>
+      <IFrame class="h-609px" :src="tencentLbsUrl" />
     </el-dialog>
   </Dialog>
 </template>
@@ -266,8 +260,3 @@ onMounted(async () => {
   await initTencentLbsMap()
 })
 </script>
-<style lang="scss">
-.mapBox .el-dialog__body {
-  height: 640px !important;
-}
-</style>
diff --git a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
new file mode 100644
index 00000000..4256fbc2
--- /dev/null
+++ b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
@@ -0,0 +1,265 @@
+<!-- TODO 芋艿：这块后续抽个独立的组件出来 -->
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
+    <el-row :gutter="20">
+      <!-- 左侧部门树 -->
+      <el-col :span="4" :xs="24">
+        <ContentWrap class="h-1/1">
+          <DeptTree @node-click="handleDeptNodeClick" />
+        </ContentWrap>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <!-- 搜索 -->
+        <ContentWrap>
+          <el-form
+            class="-mb-15px"
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="用户名称" prop="username">
+              <el-input
+                v-model="queryParams.username"
+                placeholder="请输入用户名称"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="手机号码" prop="mobile">
+              <el-input
+                v-model="queryParams.mobile"
+                placeholder="请输入手机号码"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                class="!w-240px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间" prop="createTime">
+              <el-date-picker
+                v-model="queryParams.createTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="datetimerange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+              <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <ContentWrap>
+          <el-table v-loading="loading" :data="list">
+            <el-table-column width="55">
+              <template #header>
+                <el-checkbox
+                  v-model="isCheckAll"
+                  :indeterminate="isIndeterminate"
+                  @change="handleCheckAll"
+                />
+              </template>
+              <template #default="{ row }">
+                <el-checkbox
+                  v-model="checkedStatus[row.id]"
+                  @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="用户编号" align="center" key="id" prop="id" />
+            <el-table-column
+              label="用户名称"
+              align="center"
+              prop="username"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="用户昵称"
+              align="center"
+              prop="nickname"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="部门"
+              align="center"
+              key="deptName"
+              prop="deptName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+            <el-table-column label="状态" key="status">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              :formatter="dateFormatter"
+              width="180"
+            />
+          </el-table>
+          <Pagination
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as UserApi from '@/api/system/user'
+import DeptTree from '@/views/system/user/DeptTree.vue'
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedUsers = ref([])
+// 选中状态：key为用户ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+const dialogTitle = '选择店员'
+const dialogVisible = ref(false)
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  roleId: 5,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  await getList()
+}
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  loading.value = true
+  try {
+    await getList()
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((combinationActivity) => handleCheckOne(checked, combinationActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param combinationActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (checked: boolean, combinationActivity, isCalcCheckAll: boolean) => {
+  if (checked) {
+    checkedUsers.value.push(combinationActivity as never)
+    checkedStatus.value[combinationActivity.id] = true
+  } else {
+    const index = findCheckedIndex(combinationActivity)
+    if (index > -1) {
+      checkedUsers.value.splice(index, 1)
+      checkedStatus.value[combinationActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (user) => checkedUsers.value.findIndex((item) => item.id === user.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((user) => checkedStatus.value[user.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((user) => checkedStatus.value[user.id])
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits('change', [...checkedUsers.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [CombinationActivityApi: any]
+}>()
+</script>
diff --git a/src/views/mall/trade/delivery/pickUpStore/index.vue b/src/views/mall/trade/delivery/pickUpStore/index.vue
index b2b0dc9a..c7684bec 100644
--- a/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="【交易】快递发货" url="https://doc.iocoder.cn/mall/trade-delivery-express/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
@@ -92,7 +93,7 @@
         prop="createTime"
         width="180"
       />
-      <el-table-column align="center" label="操作">
+      <el-table-column align="center" label="操作" min-width="110">
         <template #default="scope">
           <el-button
             v-hasPermi="['trade:delivery:pick-up-store:update']"
@@ -102,6 +103,14 @@
           >
             编辑
           </el-button>
+          <el-button
+            v-hasPermi="['trade:delivery:pick-up-store:update']"
+            link
+            type="primary"
+            @click="openFormBind(scope.row.id)"
+          >
+            绑定店员
+          </el-button>
           <el-button
             v-hasPermi="['trade:delivery:pick-up-store:delete']"
             link
@@ -114,12 +123,16 @@
       </el-table-column>
     </el-table>
   </ContentWrap>
+
   <!-- 表单弹窗：添加/修改 -->
   <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：绑定店员 -->
+  <DeliveryPickUpStoreBindForm ref="formBindRef" />
 </template>
 <script lang="ts" name="DeliveryPickUpStore" setup>
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import DeliveryPickUpStoreForm from './PickUpStoreForm.vue'
+import DeliveryPickUpStoreBindForm from './DeliveryPickUpStoreBindForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 
@@ -145,6 +158,11 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+const formBindRef = ref()
+const openFormBind = (id?: number) => {
+  formBindRef.value.open(id)
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
diff --git a/src/views/mall/trade/order/components/OrderTableColumn.vue b/src/views/mall/trade/order/components/OrderTableColumn.vue
index 5d1e25ee..adad3056 100644
--- a/src/views/mall/trade/order/components/OrderTableColumn.vue
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -41,7 +41,7 @@
           <template #header>
             <div
               class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
-              style="background-color: #f7f7f7"
+              style="background-color: var(--app-content-bg-color)"
             >
               <span class="mr-20px">订单号：{{ scope.row.no }} </span>
               <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
diff --git a/src/views/mall/trade/order/detail/index.vue b/src/views/mall/trade/order/detail/index.vue
index 67e54767..d521c2a3 100644
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -397,13 +397,14 @@ onMounted(async () => {
     align-items: center;
     min-height: 30px;
     padding: 10px;
-    background-color: #f7f8fa;
+    border-radius: var(--el-card-border-radius);
+    background-color: var(--app-content-bg-color);
 
     &::before {
       position: absolute;
       top: 10px;
       left: 13px; /* 将伪元素水平居中 */
-      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+      border-color: transparent var(--app-content-bg-color) transparent transparent; /* 尖角颜色，左侧朝向 */
       border-style: solid;
       border-width: 8px; /* 调整尖角大小 */
       content: ''; /* 必须设置 content 属性 */
diff --git a/src/views/mall/trade/order/form/OrderDeliveryForm.vue b/src/views/mall/trade/order/form/OrderDeliveryForm.vue
index 3b98c2e6..d901c156 100644
--- a/src/views/mall/trade/order/form/OrderDeliveryForm.vue
+++ b/src/views/mall/trade/order/form/OrderDeliveryForm.vue
@@ -3,8 +3,8 @@
     <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
       <el-form-item label="发货方式">
         <el-radio-group v-model="expressType">
-          <el-radio border label="express">快递物流</el-radio>
-          <el-radio border label="none">无需发货</el-radio>
+          <el-radio border value="express">快递物流</el-radio>
+          <el-radio border value="none">无需发货</el-radio>
         </el-radio-group>
       </el-form-item>
       <template v-if="expressType === 'express'">
diff --git a/src/views/mall/trade/order/form/OrderPickUpForm.vue b/src/views/mall/trade/order/form/OrderPickUpForm.vue
index 529263c4..ccc6c1db 100644
--- a/src/views/mall/trade/order/form/OrderPickUpForm.vue
+++ b/src/views/mall/trade/order/form/OrderPickUpForm.vue
@@ -13,7 +13,7 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button type="primary" :disabled="formLoading" @click="getOrderByPickUpVerifyCode">
+      <el-button type="primary" :disabled="formLoading" @click="getOrderByPickUpVerifyCodeClick">
         查询
       </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -52,9 +52,14 @@ const formRef = ref() // 表单 Ref
 const orderDetails = ref<OrderVO>({})
 
 /** 打开弹窗 */
-const open = async () => {
+const open = async (pickUpVerifyCode: string) => {
   resetForm()
-  dialogVisible.value = true
+  if(pickUpVerifyCode != null){
+    formData.value.pickUpVerifyCode = pickUpVerifyCode;
+    await getOrderByPickUpVerifyCode()
+  }else{
+    dialogVisible.value = true
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -83,18 +88,21 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
-/** 查询核销码对应的订单 */
-const getOrderByPickUpVerifyCode = async () => {
+const getOrderByPickUpVerifyCodeClick = async () => {
   // 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
   if (!valid) return
+  await getOrderByPickUpVerifyCode()
+}
 
+/** 查询核销码对应的订单 */
+const getOrderByPickUpVerifyCode = async () => {
   formLoading.value = true
   const data = await TradeOrderApi.getOrderByPickUpVerifyCode(formData.value.pickUpVerifyCode)
   formLoading.value = false
   if (data?.deliveryType !== DeliveryTypeEnum.PICK_UP.type) {
-    message.error('请输入正确的核销码')
+    message.error('未查询到订单')
     return
   }
   if (data?.status !== TradeOrderStatusEnum.UNDELIVERED.status) {
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index 3c9326ab..9407aeac 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="【交易】交易订单" url="https://doc.iocoder.cn/mall/trade-order/" />
+  <doc-alert title="【交易】购物车" url="https://doc.iocoder.cn/mall/trade-cart/" />
 
   <!-- 搜索 -->
   <ContentWrap>
@@ -349,7 +351,7 @@ const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
diff --git a/src/views/member/config/index.vue b/src/views/member/config/index.vue
index ed6da6c8..2593509f 100644
--- a/src/views/member/config/index.vue
+++ b/src/views/member/config/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员手册（功能开启）" url="https://doc.iocoder.cn/member/build/" />
 
   <ContentWrap>
     <el-form
diff --git a/src/views/member/group/GroupForm.vue b/src/views/member/group/GroupForm.vue
index 14510b0f..f87030b7 100644
--- a/src/views/member/group/GroupForm.vue
+++ b/src/views/member/group/GroupForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/member/group/index.vue b/src/views/member/group/index.vue
index e8455833..ba925d6e 100644
--- a/src/views/member/group/index.vue
+++ b/src/views/member/group/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员用户、标签、分组" url="https://doc.iocoder.cn/member/user/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/member/level/LevelForm.vue b/src/views/member/level/LevelForm.vue
index 7e6873cc..2aa49480 100644
--- a/src/views/member/level/LevelForm.vue
+++ b/src/views/member/level/LevelForm.vue
@@ -67,7 +67,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/member/level/index.vue b/src/views/member/level/index.vue
index 3512587b..3743eac9 100644
--- a/src/views/member/level/index.vue
+++ b/src/views/member/level/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/member/point/record/index.vue b/src/views/member/point/record/index.vue
index be3f7a1b..9676c2ed 100644
--- a/src/views/member/point/record/index.vue
+++ b/src/views/member/point/record/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/member/signin/config/SignInConfigForm.vue b/src/views/member/signin/config/SignInConfigForm.vue
index 616fd8fc..9e0a629a 100644
--- a/src/views/member/signin/config/SignInConfigForm.vue
+++ b/src/views/member/signin/config/SignInConfigForm.vue
@@ -24,7 +24,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/member/signin/config/index.vue b/src/views/member/signin/config/index.vue
index 9d5d727e..14a84cdb 100644
--- a/src/views/member/signin/config/index.vue
+++ b/src/views/member/signin/config/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/member/signin/record/index.vue b/src/views/member/signin/record/index.vue
index 97582db4..e80e8546 100644
--- a/src/views/member/signin/record/index.vue
+++ b/src/views/member/signin/record/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员等级、积分、签到" url="https://doc.iocoder.cn/member/level/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/member/tag/index.vue b/src/views/member/tag/index.vue
index d248e1ec..59efc5e7 100644
--- a/src/views/member/tag/index.vue
+++ b/src/views/member/tag/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员用户、标签、分组" url="https://doc.iocoder.cn/member/user/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/member/user/UserForm.vue b/src/views/member/user/UserForm.vue
index 0da4ef61..70d83138 100644
--- a/src/views/member/user/UserForm.vue
+++ b/src/views/member/user/UserForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -35,7 +35,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/member/user/components/UserBalanceUpdateForm.vue b/src/views/member/user/components/UserBalanceUpdateForm.vue
new file mode 100644
index 00000000..36137cf7
--- /dev/null
+++ b/src/views/member/user/components/UserBalanceUpdateForm.vue
@@ -0,0 +1,144 @@
+<template>
+  <Dialog v-model="dialogVisible" title="修改用户余额" width="600">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="130px"
+    >
+      <el-form-item label="用户编号" prop="id">
+        <el-input v-model="formData.id" class="!w-240px" disabled />
+      </el-form-item>
+      <el-form-item label="用户昵称" prop="nickname">
+        <el-input v-model="formData.nickname" class="!w-240px" disabled />
+      </el-form-item>
+      <el-form-item label="变动前余额(元)" prop="balance">
+        <el-input :model-value="formData.balance" class="!w-240px" disabled />
+      </el-form-item>
+      <el-form-item label="变动类型" prop="changeType">
+        <el-radio-group v-model="formData.changeType">
+          <el-radio :label="1">增加</el-radio>
+          <el-radio :label="-1">减少</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="变动余额(元)" prop="changeBalance">
+        <el-input-number
+          v-model="formData.changeBalance"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="变动后余额(元)">
+        <el-input :model-value="balanceResult" class="!w-240px" disabled />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as UserApi from '@/api/member/user'
+import * as WalletApi from '@/api/pay/wallet/balance'
+import { convertToInteger, formatToFraction } from '@/utils'
+
+/** 修改用户余额表单 */
+defineOptions({ name: 'UpdateBalanceForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  nickname: undefined,
+  balance: '0',
+  changeBalance: 0,
+  changeType: 1
+})
+const formRules = reactive({
+  changeBalance: [{ required: true, message: '变动余额不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id?: number) => {
+  dialogVisible.value = true
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const user = await UserApi.getUser(id)
+      const wallet = await WalletApi.getWallet({ userId: user.id || 0 })
+      formData.value.id = user.id
+      formData.value.nickname = user.nickname
+      formData.value.balance = formatToFraction(wallet.balance)
+      formData.value.changeType = 1 // 默认增加余额
+      formData.value.changeBalance = 0 // 变动余额默认0
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  if (formData.value.changeBalance <= 0) {
+    message.error('变动余额不能为零')
+    return
+  }
+  if (convertToInteger(balanceResult.value) < 0) {
+    message.error('变动后的余额不能小于 0')
+    return
+  }
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    await WalletApi.updateWalletBalance({
+      userId: formData.value.id,
+      balance: convertToInteger(formData.value.changeBalance) * formData.value.changeType
+    })
+
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    nickname: undefined,
+    balance: '0',
+    changeBalance: 0,
+    changeType: 1
+  }
+  formRef.value?.resetFields()
+}
+
+/** 变动后的余额 */
+const balanceResult = computed(() =>
+  formatToFraction(
+    convertToInteger(formData.value.balance) +
+      convertToInteger(formData.value.changeBalance) * formData.value.changeType
+  )
+)
+</script>
diff --git a/src/views/member/user/UserLevelUpdateForm.vue b/src/views/member/user/components/UserLevelUpdateForm.vue
similarity index 100%
rename from src/views/member/user/UserLevelUpdateForm.vue
rename to src/views/member/user/components/UserLevelUpdateForm.vue
diff --git a/src/views/member/user/UserPointUpdateForm.vue b/src/views/member/user/components/UserPointUpdateForm.vue
similarity index 88%
rename from src/views/member/user/UserPointUpdateForm.vue
rename to src/views/member/user/components/UserPointUpdateForm.vue
index 967ebe03..ad673bea 100644
--- a/src/views/member/user/UserPointUpdateForm.vue
+++ b/src/views/member/user/components/UserPointUpdateForm.vue
@@ -1,11 +1,11 @@
 <template>
-  <Dialog title="修改用户积分" v-model="dialogVisible" width="600">
+  <Dialog v-model="dialogVisible" title="修改用户积分" width="600">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="100px"
-      v-loading="formLoading"
     >
       <el-form-item label="用户编号" prop="id">
         <el-input v-model="formData.id" class="!w-240px" disabled />
@@ -18,24 +18,24 @@
       </el-form-item>
       <el-form-item label="变动类型" prop="changeType">
         <el-radio-group v-model="formData.changeType">
-          <el-radio :label="1">增加</el-radio>
-          <el-radio :label="-1">减少</el-radio>
+          <el-radio :value="1">增加</el-radio>
+          <el-radio :value="-1">减少</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="变动积分" prop="changePoint">
-        <el-input-number v-model="formData.changePoint" class="!w-240px" :min="0" :precision="0" />
+        <el-input-number v-model="formData.changePoint" :min="0" :precision="0" class="!w-240px" />
       </el-form-item>
       <el-form-item label="变动后积分">
         <el-input-number v-model="pointResult" class="!w-240px" disabled />
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import * as UserApi from '@/api/member/user'
 
 /** 修改用户积分表单 */
@@ -115,8 +115,9 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     nickname: undefined,
-    levelId: undefined,
-    reason: undefined
+    point: 0,
+    changePoint: 0,
+    changeType: 1
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/member/user/components/balance-list.vue b/src/views/member/user/components/balance-list.vue
deleted file mode 100644
index 3e9d1785..00000000
--- a/src/views/member/user/components/balance-list.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'BalanceList'
-})
-</script>
-
-<!-- TODO @芋艿：未来实现，等周建的 -->
-<template>
-  <div>余额列表</div>
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/src/views/member/user/detail/UserAccountInfo.vue b/src/views/member/user/detail/UserAccountInfo.vue
index 56a6ab63..fad174a8 100644
--- a/src/views/member/user/detail/UserAccountInfo.vue
+++ b/src/views/member/user/detail/UserAccountInfo.vue
@@ -1,82 +1,60 @@
 <template>
-  <el-descriptions :column="2">
+  <el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
     <el-descriptions-item>
       <template #label>
-        <descriptions-item-label label=" 等级 " icon="svg-icon:member_level" />
+        <descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
       </template>
       {{ user.levelName || '无' }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <descriptions-item-label label=" 成长值 " icon="ep:suitcase" />
+        <descriptions-item-label icon="ep:suitcase" label=" 成长值 " />
       </template>
       {{ user.experience || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <descriptions-item-label label=" 当前积分 " icon="ep:coin" />
+        <descriptions-item-label icon="ep:coin" label=" 当前积分 " />
       </template>
       {{ user.point || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <descriptions-item-label label=" 总积分 " icon="ep:coin" />
+        <descriptions-item-label icon="ep:coin" label=" 总积分 " />
       </template>
       {{ user.totalPoint || 0 }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <descriptions-item-label label=" 当前余额 " icon="svg-icon:member_balance" />
+        <descriptions-item-label icon="svg-icon:member_balance" label=" 当前余额 " />
       </template>
       {{ fenToYuan(wallet.balance || 0) }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <descriptions-item-label label=" 支出金额 " icon="svg-icon:member_expenditure_balance" />
+        <descriptions-item-label icon="svg-icon:member_expenditure_balance" label=" 支出金额 " />
       </template>
       {{ fenToYuan(wallet.totalExpense || 0) }}
     </el-descriptions-item>
     <el-descriptions-item>
       <template #label>
-        <descriptions-item-label label=" 充值金额 " icon="svg-icon:member_recharge_balance" />
+        <descriptions-item-label icon="svg-icon:member_recharge_balance" label=" 充值金额 " />
       </template>
       {{ fenToYuan(wallet.totalRecharge || 0) }}
     </el-descriptions-item>
   </el-descriptions>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { DescriptionsItemLabel } from '@/components/Descriptions'
 import * as UserApi from '@/api/member/user'
 import * as WalletApi from '@/api/pay/wallet/balance'
-import { UserTypeEnum } from '@/utils/constants'
 import { fenToYuan } from '@/utils'
 
-const props = defineProps<{ user: UserApi.UserVO }>() // 用户信息
-const WALLET_INIT_DATA = {
-  balance: 0,
-  totalExpense: 0,
-  totalRecharge: 0
-} as WalletApi.WalletVO // 钱包初始化数据
-const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
-
-/** 查询用户钱包信息 */
-const getUserWallet = async () => {
-  if (!props.user.id) {
-    wallet.value = WALLET_INIT_DATA
-    return
-  }
-  const params = { userId: props.user.id }
-  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
-}
-
-/** 监听用户编号变化 */
-watch(
-  () => props.user.id,
-  () => getUserWallet(),
-  { immediate: true }
-)
+withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; column?: number }>(), {
+  column: 2
+}) // 用户信息
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .cell-item {
   display: inline;
 }
@@ -84,4 +62,23 @@ watch(
 .cell-item::after {
   content: ':';
 }
+
+.kefu-descriptions {
+  ::v-deep(.el-descriptions__cell) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .el-descriptions__label {
+      width: 120px;
+      display: block;
+      text-align: left;
+    }
+
+    .el-descriptions__content {
+      flex: 1;
+      text-align: end;
+    }
+  }
+}
 </style>
diff --git a/src/views/member/user/detail/UserAftersaleList.vue b/src/views/member/user/detail/UserAftersaleList.vue
new file mode 100644
index 00000000..03f3a535
--- /dev/null
+++ b/src/views/member/user/detail/UserAftersaleList.vue
@@ -0,0 +1,276 @@
+<template>
+  <!-- 搜索 -->
+  <ContentWrap>
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
+      <el-form-item label="商品名称" prop="spuName">
+        <el-input
+          v-model="queryParams.spuName"
+          class="!w-280px"
+          clearable
+          placeholder="请输入商品 SPU 名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="退款编号" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          class="!w-280px"
+          clearable
+          placeholder="请输入退款编号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="orderNo">
+        <el-input
+          v-model="queryParams.orderNo"
+          class="!w-280px"
+          clearable
+          placeholder="请输入订单编号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="售后状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后状态"
+        >
+          <el-option label="全部" value="0" />
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="售后方式" prop="way">
+        <el-select
+          v-model="queryParams.way"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后方式"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="售后类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后类型"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-280px"
+          end-placeholder="自定义时间"
+          start-placeholder="自定义时间"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-tabs v-model="queryParams.status" @tab-click="tabClick">
+      <el-tab-pane
+        v-for="item in statusTabs"
+        :key="item.label"
+        :label="item.label"
+        :name="item.value"
+      />
+    </el-tabs>
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="退款编号" min-width="200" prop="no" />
+      <el-table-column align="center" label="订单编号" min-width="200" prop="orderNo">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openOrderDetail(row.orderId)">
+            {{ row.orderNo }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品信息" min-width="600" prop="spuName">
+        <template #default="{ row }">
+          <div class="flex items-center">
+            <el-image
+              :src="row.picUrl"
+              class="mr-10px h-30px w-30px"
+              @click="imagePreview(row.picUrl)"
+            />
+            <span class="mr-10px">{{ row.spuName }}</span>
+            <el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
+              {{ property.propertyName }}: {{ property.valueName }}
+            </el-tag>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="订单金额" min-width="120" prop="refundPrice">
+        <template #default="scope">
+          <span>{{ fenToYuan(scope.row.refundPrice) }} 元</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="申请时间" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ formatDate(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="售后状态" width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="售后方式">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="scope.row.way" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="120">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { createImageViewer } from '@/components/ImageViewer'
+import { TabsPaneContext } from 'element-plus'
+import { cloneDeep } from 'lodash-es'
+import { fenToYuan } from '@/utils'
+
+defineOptions({ name: 'UserAfterSaleList' })
+
+const { push } = useRouter() // 路由跳转
+const props = defineProps<{
+  userId: number
+}>()
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
+const statusTabs = ref([
+  {
+    label: '全部',
+    value: '0'
+  }
+])
+const queryFormRef = ref() // 搜索的表单
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  no: null,
+  status: '0',
+  orderNo: null,
+  spuName: null,
+  createTime: [],
+  way: null,
+  type: null,
+  userId: null
+})
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = cloneDeep(queryParams.value)
+    // 处理掉全部的状态，不传就是全部
+    if (data.status === '0') {
+      delete data.status
+    }
+    // 执行查询
+    if (props.userId) {
+      data.userId = props.userId as any
+    }
+    const res = await AfterSaleApi.getAfterSalePage(data)
+    list.value = res.list as AfterSaleApi.TradeAfterSaleVO[]
+    total.value = res.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = async () => {
+  queryParams.value.pageNo = 1
+  await getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** tab 切换 */
+const tabClick = async (tab: TabsPaneContext) => {
+  queryParams.value.status = tab.paneName as any
+  await getList()
+}
+
+/** 处理退款 */
+const openAfterSaleDetail = (id: number) => {
+  push({ name: 'TradeAfterSaleDetail', params: { id } })
+}
+
+/** 查看订单详情 */
+const openOrderDetail = (id: number) => {
+  push({ name: 'TradeOrderDetail', params: { id } })
+}
+
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
+onMounted(async () => {
+  await getList()
+  // 设置 statuses 过滤
+  for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+    statusTabs.value.push({
+      label: dict.label,
+      value: dict.value
+    })
+  }
+})
+</script>
diff --git a/src/views/member/user/detail/UserBalanceList.vue b/src/views/member/user/detail/UserBalanceList.vue
new file mode 100644
index 00000000..08179e07
--- /dev/null
+++ b/src/views/member/user/detail/UserBalanceList.vue
@@ -0,0 +1,67 @@
+<template>
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="关联业务标题" prop="title" />
+      <el-table-column align="center" label="交易金额" prop="price">
+        <template #default="{ row }"> {{ fenToYuan(row.price) }} 元</template>
+      </el-table-column>
+      <el-table-column align="center" label="钱包余额" prop="balance">
+        <template #default="{ row }"> {{ fenToYuan(row.balance) }} 元</template>
+      </el-table-column>
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="交易时间"
+        prop="createTime"
+        width="180px"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import * as WalletTransactionApi from '@/api/pay/wallet/transaction'
+import { fenToYuan } from '@/utils'
+
+defineOptions({ name: 'UserBalanceList' })
+const props = defineProps({
+  walletId: {
+    type: Number,
+    required: false
+  }
+})
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  walletId: null
+})
+const list = ref([]) // 列表的数据
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.walletId = props.walletId as any
+    const data = await WalletTransactionApi.getWalletTransactionPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/member/user/detail/UserBasicInfo.vue b/src/views/member/user/detail/UserBasicInfo.vue
index 075450e9..0fe25380 100644
--- a/src/views/member/user/detail/UserBasicInfo.vue
+++ b/src/views/member/user/detail/UserBasicInfo.vue
@@ -3,83 +3,163 @@
     <template #header>
       <slot name="header"></slot>
     </template>
-    <el-row>
+    <el-row v-if="mode === 'member'">
       <el-col :span="4">
-        <ElAvatar shape="square" :size="140" :src="user.avatar || undefined" />
+        <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
       </el-col>
       <el-col :span="20">
         <el-descriptions :column="2">
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="用户名" icon="ep:user" />
+              <descriptions-item-label icon="ep:user" label="用户名" />
             </template>
             {{ user.name || '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="昵称" icon="ep:user" />
+              <descriptions-item-label icon="ep:user" label="昵称" />
             </template>
             {{ user.nickname }}
           </el-descriptions-item>
           <el-descriptions-item label="手机号">
             <template #label>
-              <descriptions-item-label label="手机号" icon="ep:phone" />
+              <descriptions-item-label icon="ep:phone" label="手机号" />
             </template>
             {{ user.mobile }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="性别" icon="fa:mars-double" />
+              <descriptions-item-label icon="fa:mars-double" label="性别" />
             </template>
             <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="所在地" icon="ep:location" />
+              <descriptions-item-label icon="ep:location" label="所在地" />
             </template>
             {{ user.areaName }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="注册 IP" icon="ep:position" />
+              <descriptions-item-label icon="ep:position" label="注册 IP" />
             </template>
             {{ user.registerIp }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="生日" icon="fa:birthday-cake" />
+              <descriptions-item-label icon="fa:birthday-cake" label="生日" />
             </template>
-            {{ user.birthday ? formatDate(user.birthday) : '空' }}
+            {{ user.birthday ? formatDate(user.birthday as any) : '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="注册时间" icon="ep:calendar" />
+              <descriptions-item-label icon="ep:calendar" label="注册时间" />
             </template>
-            {{ user.createTime ? formatDate(user.createTime) : '空' }}
+            {{ user.createTime ? formatDate(user.createTime as any) : '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="最后登录时间" icon="ep:calendar" />
+              <descriptions-item-label icon="ep:calendar" label="最后登录时间" />
             </template>
-            {{ user.loginDate ? formatDate(user.loginDate) : '空' }}
+            {{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
           </el-descriptions-item>
         </el-descriptions>
       </el-col>
     </el-row>
+    <template v-if="mode === 'kefu'">
+      <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
+      <el-descriptions :column="1" class="kefu-descriptions">
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:user" label="用户名" />
+          </template>
+          {{ user.name || '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:user" label="昵称" />
+          </template>
+          {{ user.nickname }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:phone" label="手机号" />
+          </template>
+          {{ user.mobile }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="fa:mars-double" label="性别" />
+          </template>
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:location" label="所在地" />
+          </template>
+          {{ user.areaName }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:position" label="注册 IP" />
+          </template>
+          {{ user.registerIp }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="fa:birthday-cake" label="生日" />
+          </template>
+          {{ user.birthday ? formatDate(user.birthday as any) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:calendar" label="注册时间" />
+          </template>
+          {{ user.createTime ? formatDate(user.createTime as any) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:calendar" label="最后登录时间" />
+          </template>
+          {{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </template>
   </el-card>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as UserApi from '@/api/member/user'
 import { DescriptionsItemLabel } from '@/components/Descriptions/index'
 
-const { user } = defineProps<{ user: UserApi.UserVO }>()
+withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
+  mode: 'member'
+})
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
+::v-deep(.kefu-descriptions) {
+  .el-descriptions__cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .el-descriptions__label {
+      width: 120px;
+      display: block;
+      text-align: left;
+    }
+
+    .el-descriptions__content {
+      flex: 1;
+      text-align: end;
+    }
+  }
+}
 </style>
diff --git a/src/views/member/user/detail/UserBrokerageList.vue b/src/views/member/user/detail/UserBrokerageList.vue
index db88787b..68c3c849 100644
--- a/src/views/member/user/detail/UserBrokerageList.vue
+++ b/src/views/member/user/detail/UserBrokerageList.vue
@@ -11,8 +11,8 @@
       <el-form-item label="用户类型" prop="level">
         <el-radio-group v-model="queryParams.level" @change="handleQuery">
           <el-radio-button checked>全部</el-radio-button>
-          <el-radio-button label="1">一级推广人</el-radio-button>
-          <el-radio-button label="2">二级推广人</el-radio-button>
+          <el-radio-button value="1">一级推广人</el-radio-button>
+          <el-radio-button value="2">二级推广人</el-radio-button>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="绑定时间" prop="bindUserTime">
diff --git a/src/views/member/user/detail/UserOrderList.vue b/src/views/member/user/detail/UserOrderList.vue
index b6870bc3..92ee70d9 100644
--- a/src/views/member/user/detail/UserOrderList.vue
+++ b/src/views/member/user/detail/UserOrderList.vue
@@ -267,13 +267,13 @@ const getList = async () => {
 
 /** 查看订单详情 */
 const openDetail = (id: number) => {
-  push({ name: 'TradeOrderDetail', params: { orderId: id } })
+  push({ name: 'TradeOrderDetail', params: { id } })
 }
 
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
diff --git a/src/views/member/user/detail/index.vue b/src/views/member/user/detail/index.vue
index 6237cca6..9818219a 100644
--- a/src/views/member/user/detail/index.vue
+++ b/src/views/member/user/detail/index.vue
@@ -7,7 +7,7 @@
           <template #header>
             <div class="card-header">
               <CardTitle title="基本信息" />
-              <el-button type="primary" size="small" text @click="openForm('update')">
+              <el-button size="small" text type="primary" @click="openForm('update')">
                 编辑
               </el-button>
             </div>
@@ -16,16 +16,16 @@
       </el-col>
       <!-- 右上角：账户信息 -->
       <el-col :span="10" class="detail-info-item">
-        <el-card shadow="never" class="h-full">
+        <el-card class="h-full" shadow="never">
           <template #header>
             <CardTitle title="账户信息" />
           </template>
-          <UserAccountInfo :user="user" />
+          <UserAccountInfo :user="user" :wallet="wallet" />
         </el-card>
       </el-col>
       <!-- 下边：账户明细 -->
       <!-- TODO 芋艿：【订单管理】【售后管理】【收藏记录】-->
-      <el-card header="账户明细" style="width: 100%; margin-top: 20px" shadow="never">
+      <el-card header="账户明细" shadow="never" style="width: 100%; margin-top: 20px">
         <template #header>
           <CardTitle title="账户明细" />
         </template>
@@ -39,15 +39,18 @@
           <el-tab-pane label="成长值" lazy>
             <UserExperienceRecordList :user-id="id" />
           </el-tab-pane>
-          <!-- TODO @jason：增加一个余额变化； -->
-          <el-tab-pane label="余额" lazy>余额(WIP)</el-tab-pane>
+          <el-tab-pane label="余额" lazy>
+            <UserBalanceList :wallet-id="wallet.id" />
+          </el-tab-pane>
           <el-tab-pane label="收货地址" lazy>
             <UserAddressList :user-id="id" />
           </el-tab-pane>
           <el-tab-pane label="订单管理" lazy>
             <UserOrderList :user-id="id" />
           </el-tab-pane>
-          <el-tab-pane label="售后管理" lazy>售后管理(WIP)</el-tab-pane>
+          <el-tab-pane label="售后管理" lazy>
+            <UserAfterSaleList :user-id="id" />
+          </el-tab-pane>
           <el-tab-pane label="收藏记录" lazy>
             <UserFavoriteList :user-id="id" />
           </el-tab-pane>
@@ -65,7 +68,8 @@
   <!-- 表单弹窗：添加/修改 -->
   <UserForm ref="formRef" @success="getUserData(id)" />
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
+import * as WalletApi from '@/api/pay/wallet/balance'
 import * as UserApi from '@/api/member/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import UserForm from '@/views/member/user/UserForm.vue'
@@ -79,6 +83,8 @@ import UserOrderList from './UserOrderList.vue'
 import UserPointList from './UserPointList.vue'
 import UserSignList from './UserSignList.vue'
 import UserFavoriteList from './UserFavoriteList.vue'
+import UserAfterSaleList from './UserAftersaleList.vue'
+import UserBalanceList from './UserBalanceList.vue'
 import { CardTitle } from '@/components/Card/index'
 import { ElMessage } from 'element-plus'
 
@@ -107,7 +113,25 @@ const getUserData = async (id: number) => {
 const { currentRoute } = useRouter() // 路由
 const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
-const id = Number(route.params.id)
+const id = route.params.id
+/* 用户钱包相关信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+
+/** 查询用户钱包信息 */
+const getUserWallet = async () => {
+  if (!id) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  const params = { userId: id }
+  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
+}
+
 onMounted(() => {
   if (!id) {
     ElMessage.warning('参数错误，会员编号不能为空！')
@@ -115,9 +139,10 @@ onMounted(() => {
     return
   }
   getUserData(id)
+  getUserWallet()
 })
 </script>
-<style scoped lang="css">
+<style lang="css" scoped>
 .detail-info-item:first-child {
   padding-left: 0 !important;
 }
diff --git a/src/views/member/user/index.vue b/src/views/member/user/index.vue
index 2712370e..1c873bf4 100644
--- a/src/views/member/user/index.vue
+++ b/src/views/member/user/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="会员用户、标签、分组" url="https://doc.iocoder.cn/member/user/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -139,7 +140,7 @@
                 'member:user:update',
                 'member:user:update-level',
                 'member:user:update-point',
-                'member:user:update-balance'
+                'pay:wallet:update-balance'
               ]"
               @command="(command) => handleCommand(command, scope.row)"
             >
@@ -168,10 +169,10 @@
                     修改积分
                   </el-dropdown-item>
                   <el-dropdown-item
-                    v-if="checkPermi(['member:user:update-balance'])"
+                    v-if="checkPermi(['pay:wallet:update-balance'])"
                     command="handleUpdateBlance"
                   >
-                    修改余额(WIP)
+                    修改余额
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
@@ -195,6 +196,8 @@
   <UserLevelUpdateForm ref="updateLevelFormRef" @success="getList" />
   <!-- 修改用户积分弹窗 -->
   <UserPointUpdateForm ref="updatePointFormRef" @success="getList" />
+  <!-- 修改用户余额弹窗 -->
+  <UserBalanceUpdateForm ref="UpdateBalanceFormRef" @success="getList" />
   <!-- 发送优惠券弹窗 -->
   <CouponSendForm ref="couponSendFormRef" />
 </template>
@@ -206,8 +209,9 @@ import UserForm from './UserForm.vue'
 import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
 import MemberLevelSelect from '@/views/member/level/components/MemberLevelSelect.vue'
 import MemberGroupSelect from '@/views/member/group/components/MemberGroupSelect.vue'
-import UserLevelUpdateForm from './UserLevelUpdateForm.vue'
-import UserPointUpdateForm from './UserPointUpdateForm.vue'
+import UserLevelUpdateForm from './components/UserLevelUpdateForm.vue'
+import UserPointUpdateForm from './components/UserPointUpdateForm.vue'
+import UserBalanceUpdateForm from './components/UserBalanceUpdateForm.vue'
 import { CouponSendForm } from '@/views/mall/promotion/coupon/components'
 import { checkPermi } from '@/utils/permission'
 
@@ -232,6 +236,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const updateLevelFormRef = ref() // 修改会员等级表单
 const updatePointFormRef = ref() // 修改会员积分表单
+const UpdateBalanceFormRef = ref() // 修改用户余额表单
 const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
 
 /** 查询列表 */
@@ -298,7 +303,7 @@ const handleCommand = (command: string, row: UserApi.UserVO) => {
       updatePointFormRef.value.open(row.id)
       break
     case 'handleUpdateBlance':
-      // todo @jason：增加一个【修改余额】
+      UpdateBalanceFormRef.value.open(row.id)
       break
     default:
       break
diff --git a/src/views/mp/account/index.vue b/src/views/mp/account/index.vue
index 10aba09a..65517070 100644
--- a/src/views/mp/account/index.vue
+++ b/src/views/mp/account/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="公众号接入" url="https://doc.iocoder.cn/mp/account/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
@@ -36,7 +37,7 @@
       <el-table-column label="appId" align="center" prop="appId" width="180" />
       <el-table-column label="服务器地址(URL)" align="center" prop="appId" width="360">
         <template #default="scope">
-          {{ 'http://服务端地址/mp/open/' + scope.row.appId }}
+          {{ 'http://服务端地址/admin-api/mp/open/' + scope.row.appId }}
         </template>
       </el-table-column>
       <el-table-column label="二维码" align="center" prop="qrCodeUrl">
diff --git a/src/views/mp/autoReply/index.vue b/src/views/mp/autoReply/index.vue
index 1ccaed61..0b006470 100644
--- a/src/views/mp/autoReply/index.vue
+++ b/src/views/mp/autoReply/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mp/components/wx-account-select/main.vue b/src/views/mp/components/wx-account-select/main.vue
index 2a6ca50f..4df4cbe7 100644
--- a/src/views/mp/components/wx-account-select/main.vue
+++ b/src/views/mp/components/wx-account-select/main.vue
@@ -6,6 +6,11 @@
 
 <script lang="ts" setup>
 import * as MpAccountApi from '@/api/mp/account'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+
+const message = useMessage() // 消息弹窗
+const { delView } = useTagsViewStore() // 视图操作
+const { push, currentRoute } = useRouter() // 路由
 
 defineOptions({ name: 'WxAccountSelect' })
 
@@ -22,6 +27,12 @@ const emit = defineEmits<{
 
 const handleQuery = async () => {
   accountList.value = await MpAccountApi.getSimpleAccountList()
+  if (accountList.value.length == 0) {
+    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置')
+    delView(unref(currentRoute))
+    await push({ name: 'MpAccount' })
+    return
+  }
   // 默认选中第一个
   if (accountList.value.length > 0) {
     account.id = accountList.value[0].id
diff --git a/src/views/mp/draft/editor-config.ts b/src/views/mp/draft/editor-config.ts
index f109d954..ee3b95ec 100644
--- a/src/views/mp/draft/editor-config.ts
+++ b/src/views/mp/draft/editor-config.ts
@@ -32,7 +32,7 @@ export const createEditorConfig = (
         headers: {
           Accept: '*',
           Authorization: 'Bearer ' + getAccessToken(),
-          'tenantId': getTenantId()
+          'tenant-id': getTenantId()
         },
 
         // 跨域是否传递 cookie ，默认为 false
diff --git a/src/views/mp/draft/index.vue b/src/views/mp/draft/index.vue
index 46f7d94f..db24596a 100644
--- a/src/views/mp/draft/index.vue
+++ b/src/views/mp/draft/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index a465d0b6..2ed8ae77 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mp/material/index.vue b/src/views/mp/material/index.vue
index e7a9c7a7..de060429 100644
--- a/src/views/mp/material/index.vue
+++ b/src/views/mp/material/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
     <el-form class="-mb-15px" :inline="true" label-width="68px">
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index dfd67c0c..8cc8f586 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -1,5 +1,5 @@
 <template>
-
+  <doc-alert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
   <!-- 搜索工作栏 -->
   <ContentWrap>
     <el-form class="-mb-15px" ref="queryFormRef" :inline="true" label-width="68px">
diff --git a/src/views/mp/statistics/index.vue b/src/views/mp/statistics/index.vue
index 37ca2a00..d36de0a2 100644
--- a/src/views/mp/statistics/index.vue
+++ b/src/views/mp/statistics/index.vue
@@ -3,14 +3,7 @@
   <ContentWrap>
     <el-form class="-mb-15px" ref="queryForm" :inline="true" label-width="68px">
       <el-form-item label="公众号" prop="accountId">
-        <el-select v-model="accountId" @change="getSummary" class="!w-240px">
-          <el-option
-            v-for="item in accountList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <WxAccountSelect @change="onAccountChanged" />
       </el-form-item>
       <el-form-item label="时间范围" prop="dateRange">
         <el-date-picker
@@ -76,7 +69,7 @@
 <script lang="ts" setup>
 import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
 import * as StatisticsApi from '@/api/mp/statistics'
-import * as MpAccountApi from '@/api/mp/account'
+import WxAccountSelect from '@/views/mp/components/wx-account-select'
 
 defineOptions({ name: 'MpStatistics' })
 
@@ -88,7 +81,6 @@ const dateRange = ref([
   endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
 ])
 const accountId = ref(-1) // 选中的公众号编号
-const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
 
 const xAxisDate = ref([] as any[]) // X 轴的日期范围
 // 用户增减数据图表配置项
@@ -230,13 +222,10 @@ const interfaceSummaryOption = reactive({
   ]
 })
 
-/** 加载公众号账号的列表 */
-const getAccountList = async () => {
-  accountList.value = await MpAccountApi.getSimpleAccountList()
-  // 默认选中第一个
-  if (accountList.value.length > 0) {
-    accountId.value = accountList.value[0].id!
-  }
+/** 侦听公众号变化 **/
+const onAccountChanged = (id: number) => {
+  accountId.value = id
+  getSummary()
 }
 
 /** 加载数据 */
@@ -357,12 +346,4 @@ const interfaceSummaryChart = async () => {
     })
   } catch {}
 }
-
-/** 初始化 */
-onMounted(async () => {
-  // 获取公众号下拉列表
-  await getAccountList()
-  // 加载数据
-  getSummary()
-})
 </script>
diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
index 5aec1522..df76ce98 100644
--- a/src/views/mp/tag/index.vue
+++ b/src/views/mp/tag/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="公众号标签" url="https://doc.iocoder.cn/mp/tag/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/mp/user/index.vue b/src/views/mp/user/index.vue
index 2abff07c..6147351a 100644
--- a/src/views/mp/user/index.vue
+++ b/src/views/mp/user/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/pay/app/components/AppForm.vue b/src/views/pay/app/components/AppForm.vue
index b99766c1..edac374e 100644
--- a/src/views/pay/app/components/AppForm.vue
+++ b/src/views/pay/app/components/AppForm.vue
@@ -10,12 +10,15 @@
       <el-form-item label="应用名" prop="name">
         <el-input v-model="formData.name" placeholder="请输入应用名" />
       </el-form-item>
+      <el-form-item label="应用标识" prop="appKey">
+        <el-input v-model="formData.appKey" placeholder="请输入应用标识" />
+      </el-form-item>
       <el-form-item label="开启状态" prop="status">
         <el-radio-group v-model="formData.status">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -27,6 +30,9 @@
       <el-form-item label="退款结果的回调地址" prop="refundNotifyUrl">
         <el-input v-model="formData.refundNotifyUrl" placeholder="请输入退款结果的回调地址" />
       </el-form-item>
+      <el-form-item label="转账结果的回调地址" prop="transferNotifyUrl">
+        <el-input v-model="formData.transferNotifyUrl" placeholder="请输入转账结果的回调地址" />
+      </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
@@ -55,16 +61,16 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   name: undefined,
-  packageId: undefined,
-  contactName: undefined,
-  contactMobile: undefined,
-  accountCount: undefined,
-  expireTime: undefined,
-  domain: undefined,
-  status: CommonStatusEnum.ENABLE
+  appKey: undefined,
+  status: CommonStatusEnum.ENABLE,
+  remark: undefined,
+  orderNotifyUrl: undefined,
+  refundNotifyUrl: undefined,
+  transferNotifyUrl: undefined
 })
 const formRules = reactive({
   name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
+  appKey: [{ required: true, message: '应用标识不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
   orderNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
   refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }]
@@ -123,7 +129,9 @@ const resetForm = () => {
     status: CommonStatusEnum.ENABLE,
     remark: undefined,
     orderNotifyUrl: undefined,
-    refundNotifyUrl: undefined
+    refundNotifyUrl: undefined,
+    transferNotifyUrl: undefined,
+    appKey: undefined
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/pay/app/components/channel/AlipayChannelForm.vue b/src/views/pay/app/components/channel/AlipayChannelForm.vue
index 169ef8ea..89a141e6 100644
--- a/src/views/pay/app/components/channel/AlipayChannelForm.vue
+++ b/src/views/pay/app/components/channel/AlipayChannelForm.vue
@@ -1,162 +1,182 @@
 <template>
   <div>
-    <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="830px">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="830px" @closed="close">
       <el-form
         ref="formRef"
+        v-loading="formLoading"
         :model="formData"
-        :formRules="formRules"
+        :rules="formRules"
         label-width="100px"
-        v-loading="formLoading"
       >
-        <el-form-item label-width="180px" label="渠道费率" prop="feeRate">
-          <el-input v-model="formData.feeRate" placeholder="请输入渠道费率" clearable>
+        <el-form-item label="渠道费率" label-width="180px" prop="feeRate">
+          <el-input v-model="formData.feeRate" clearable placeholder="请输入渠道费率">
             <template #append>%</template>
           </el-input>
         </el-form-item>
-        <el-form-item label-width="180px" label="开放平台 APPID" prop="config.appId">
-          <el-input v-model="formData.config.appId" placeholder="请输入开放平台 APPID" clearable />
+        <el-form-item label="开放平台 APPID" label-width="180px" prop="config.appId">
+          <el-input v-model="formData.config.appId" clearable placeholder="请输入开放平台 APPID" />
         </el-form-item>
-        <el-form-item label-width="180px" label="渠道状态" prop="status">
+        <el-form-item label="渠道状态" label-width="180px" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio
               v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
               :key="parseInt(dict.value)"
-              :label="parseInt(dict.value)"
+              :value="parseInt(dict.value)"
             >
               {{ dict.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label-width="180px" label="网关地址" prop="config.serverUrl">
+        <el-form-item label="网关地址" label-width="180px" prop="config.serverUrl">
           <el-radio-group v-model="formData.config.serverUrl">
-            <el-radio label="https://openapi.alipay.com/gateway.do">线上环境</el-radio>
-            <el-radio label="https://openapi-sandbox.dl.alipaydev.com/gateway.do">
+            <el-radio value="https://openapi.alipay.com/gateway.do">线上环境</el-radio>
+            <el-radio value="https://openapi-sandbox.dl.alipaydev.com/gateway.do">
               沙箱环境
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label-width="180px" label="算法类型" prop="config.signType">
+        <el-form-item label="算法类型" label-width="180px" prop="config.signType">
           <el-radio-group v-model="formData.config.signType">
-            <el-radio key="RSA2" label="RSA2">RSA2</el-radio>
+            <el-radio key="RSA2" value="RSA2">RSA2</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label-width="180px" label="公钥类型" prop="config.mode">
+        <el-form-item label="公钥类型" label-width="180px" prop="config.mode">
           <el-radio-group v-model="formData.config.mode">
-            <el-radio key="公钥模式" :label="1">公钥模式</el-radio>
-            <el-radio key="证书模式" :label="2">证书模式</el-radio>
+            <el-radio key="公钥模式" :value="1">公钥模式</el-radio>
+            <el-radio key="证书模式" :value="2">证书模式</el-radio>
           </el-radio-group>
         </el-form-item>
         <div v-if="formData.config.mode === 1">
-          <el-form-item label-width="180px" label="应用私钥" prop="config.privateKey">
+          <el-form-item label="应用私钥" label-width="180px" prop="config.privateKey">
             <el-input
-              type="textarea"
-              :autosize="{ minRows: 8, maxRows: 8 }"
               v-model="formData.config.privateKey"
-              placeholder="请输入应用私钥"
-              clearable
+              :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              clearable
+              placeholder="请输入应用私钥"
+              type="textarea"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="支付宝公钥" prop="config.alipayPublicKey">
+          <el-form-item label="支付宝公钥" label-width="180px" prop="config.alipayPublicKey">
             <el-input
-              type="textarea"
-              :autosize="{ minRows: 8, maxRows: 8 }"
               v-model="formData.config.alipayPublicKey"
-              placeholder="请输入支付宝公钥"
-              clearable
+              :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              clearable
+              placeholder="请输入支付宝公钥"
+              type="textarea"
             />
           </el-form-item>
         </div>
         <div v-if="formData.config.mode === 2">
-          <el-form-item label-width="180px" label="应用私钥" prop="config.privateKey">
+          <el-form-item label="应用私钥" label-width="180px" prop="config.privateKey">
             <el-input
-              type="textarea"
-              :autosize="{ minRows: 8, maxRows: 8 }"
               v-model="formData.config.privateKey"
-              placeholder="请输入应用私钥"
-              clearable
+              :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              clearable
+              placeholder="请输入应用私钥"
+              type="textarea"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="商户公钥应用证书" prop="config.appCertContent">
+          <el-form-item label="商户公钥应用证书" label-width="180px" prop="config.appCertContent">
             <el-input
               v-model="formData.config.appCertContent"
-              type="textarea"
-              placeholder="请上传商户公钥应用证书"
-              readonly
               :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              placeholder="请上传商户公钥应用证书"
+              readonly
+              type="textarea"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="">
+          <el-form-item label="" label-width="180px">
             <el-upload
-              action=""
               ref="privateKeyContentFile"
-              :limit="1"
               :accept="fileAccept"
-              :http-request="appCertUpload"
               :before-upload="fileBeforeUpload"
+              :http-request="appCertUpload"
+              :limit="1"
+              action=""
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon class="mr-5px" icon="ep:upload" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
           <el-form-item
-            label-width="180px"
             label="支付宝公钥证书"
+            label-width="180px"
             prop="config.alipayPublicCertContent"
           >
             <el-input
               v-model="formData.config.alipayPublicCertContent"
-              type="textarea"
-              placeholder="请上传支付宝公钥证书"
-              readonly
               :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              placeholder="请上传支付宝公钥证书"
+              readonly
+              type="textarea"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="">
+          <el-form-item label="" label-width="180px">
             <el-upload
               ref="privateCertContentFile"
-              action=""
-              :limit="1"
               :accept="fileAccept"
               :before-upload="fileBeforeUpload"
               :http-request="alipayPublicCertUpload"
+              :limit="1"
+              action=""
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon class="mr-5px" icon="ep:upload" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
-          <el-form-item label-width="180px" label="根证书" prop="config.rootCertContent">
+          <el-form-item label="根证书" label-width="180px" prop="config.rootCertContent">
             <el-input
               v-model="formData.config.rootCertContent"
-              type="textarea"
-              placeholder="请上传根证书"
-              readonly
               :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              placeholder="请上传根证书"
+              readonly
+              type="textarea"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="">
+          <el-form-item label="" label-width="180px">
             <el-upload
               ref="privateCertContentFile"
-              :limit="1"
               :accept="fileAccept"
-              action=""
               :before-upload="fileBeforeUpload"
               :http-request="rootCertUpload"
+              :limit="1"
+              action=""
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon class="mr-5px" icon="ep:upload" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
         </div>
-        <el-form-item label-width="180px" label="备注" prop="remark">
+
+        <el-form-item label="接口内容加密方式" label-width="180px" prop="config.encryptType">
+          <el-radio-group v-model="formData.config.encryptType">
+            <el-radio key="NONE" label="">无加密</el-radio>
+            <el-radio key="AES" label="AES">AES</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="formData.config.encryptType === 'AES'">
+          <el-form-item label="接口内容加密密钥" label-width="180px" prop="config.encryptKey">
+            <el-input
+              v-model="formData.config.encryptKey"
+              clearable
+              placeholder="请输入接口内容加密密钥"
+            />
+          </el-form-item>
+        </div>
+
+        <el-form-item label="备注" label-width="180px" prop="remark">
           <el-input v-model="formData.remark" :style="{ width: '100%' }" />
         </el-form-item>
       </el-form>
@@ -195,7 +215,9 @@ const formData = ref<any>({
     alipayPublicKey: '',
     appCertContent: '',
     alipayPublicCertContent: '',
-    rootCertContent: ''
+    rootCertContent: '',
+    encryptType: '',
+    encryptKey: ''
   }
 })
 const formRules = {
@@ -213,7 +235,8 @@ const formRules = {
   'config.alipayPublicCertContent': [
     { required: true, message: '请上传支付宝公钥证书', trigger: 'blur' }
   ],
-  'config.rootCertContent': [{ required: true, message: '请上传指定根证书', trigger: 'blur' }]
+  'config.rootCertContent': [{ required: true, message: '请上传指定根证书', trigger: 'blur' }],
+  'config.encryptKey': [{ required: true, message: '请输入接口内容加密密钥', trigger: 'blur' }]
 }
 const fileAccept = '.crt'
 const formRef = ref() // 表单 Ref
@@ -281,7 +304,9 @@ const resetForm = (appId, code) => {
       alipayPublicKey: '',
       appCertContent: '',
       alipayPublicCertContent: '',
-      rootCertContent: ''
+      rootCertContent: '',
+      encryptType: '',
+      encryptKey: ''
     }
   }
   formRef.value?.resetFields()
diff --git a/src/views/pay/app/components/channel/MockChannelForm.vue b/src/views/pay/app/components/channel/MockChannelForm.vue
index 49cb3abc..f7ebe7f2 100644
--- a/src/views/pay/app/components/channel/MockChannelForm.vue
+++ b/src/views/pay/app/components/channel/MockChannelForm.vue
@@ -1,25 +1,25 @@
 <template>
   <div>
-    <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
       <el-form
         ref="formRef"
+        v-loading="formLoading"
         :model="formData"
         :rules="formRules"
         label-width="100px"
-        v-loading="formLoading"
       >
-        <el-form-item label-width="180px" label="渠道状态" prop="status">
+        <el-form-item label="渠道状态" label-width="180px" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio
               v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
               :key="parseInt(dict.value)"
-              :label="parseInt(dict.value)"
+              :value="parseInt(dict.value)"
             >
               {{ dict.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label-width="180px" label="备注" prop="remark">
+        <el-form-item label="备注" label-width="180px" prop="remark">
           <el-input v-model="formData.remark" :style="{ width: '100%' }" />
         </el-form-item>
       </el-form>
diff --git a/src/views/pay/app/components/channel/WalletChannelForm.vue b/src/views/pay/app/components/channel/WalletChannelForm.vue
index cbdb542a..71da0ded 100644
--- a/src/views/pay/app/components/channel/WalletChannelForm.vue
+++ b/src/views/pay/app/components/channel/WalletChannelForm.vue
@@ -1,25 +1,25 @@
 <template>
   <div>
-    <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
       <el-form
         ref="formRef"
+        v-loading="formLoading"
         :model="formData"
         :rules="formRules"
         label-width="100px"
-        v-loading="formLoading"
       >
-        <el-form-item label-width="180px" label="渠道状态" prop="status">
+        <el-form-item label="渠道状态" label-width="180px" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio
               v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
               :key="parseInt(dict.value)"
-              :label="parseInt(dict.value)"
+              :value="parseInt(dict.value)"
             >
               {{ dict.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label-width="180px" label="备注" prop="remark">
+        <el-form-item label="备注" label-width="180px" prop="remark">
           <el-input v-model="formData.remark" :style="{ width: '100%' }" />
         </el-form-item>
       </el-form>
diff --git a/src/views/pay/app/components/channel/WeixinChannelForm.vue b/src/views/pay/app/components/channel/WeixinChannelForm.vue
index 34e92c69..15c37ef4 100644
--- a/src/views/pay/app/components/channel/WeixinChannelForm.vue
+++ b/src/views/pay/app/components/channel/WeixinChannelForm.vue
@@ -1,159 +1,130 @@
 <template>
   <div>
-    <Dialog v-model="dialogVisible" :title="dialogTitle" @close="close" width="800px">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
       <el-form
         ref="formRef"
+        v-loading="formLoading"
         :model="formData"
         :rules="formRules"
         label-width="120px"
-        v-loading="formLoading"
       >
-        <el-form-item label-width="180px" label="渠道费率" prop="feeRate">
+        <el-form-item label="渠道费率" label-width="180px" prop="feeRate">
           <el-input
             v-model="formData.feeRate"
-            placeholder="请输入渠道费率"
-            clearable
             :style="{ width: '100%' }"
+            clearable
+            placeholder="请输入渠道费率"
           >
             <template #append>%</template>
           </el-input>
         </el-form-item>
-        <el-form-item label-width="180px" label="微信 APPID" prop="config.appId">
+        <el-form-item label="微信 APPID" label-width="180px" prop="config.appId">
           <el-input
             v-model="formData.config.appId"
-            placeholder="请输入微信 APPID"
-            clearable
             :style="{ width: '100%' }"
+            clearable
+            placeholder="请输入微信 APPID"
           />
         </el-form-item>
-        <el-form-item label-width="180px" label="商户号" prop="config.mchId">
+        <el-form-item label="商户号" label-width="180px" prop="config.mchId">
           <el-input v-model="formData.config.mchId" :style="{ width: '100%' }" />
         </el-form-item>
-        <el-form-item label-width="180px" label="渠道状态" prop="status">
+        <el-form-item label="渠道状态" label-width="180px" prop="status">
           <el-radio-group v-model="formData.status">
             <el-radio
               v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
               :key="parseInt(dict.value)"
-              :label="parseInt(dict.value)"
+              :value="parseInt(dict.value)"
             >
               {{ dict.label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label-width="180px" label="API 版本" prop="config.apiVersion">
+        <el-form-item label="API 版本" label-width="180px" prop="config.apiVersion">
           <el-radio-group v-model="formData.config.apiVersion">
-            <el-radio label="v2">v2</el-radio>
-            <el-radio label="v3">v3</el-radio>
+            <el-radio value="v2">v2</el-radio>
+            <el-radio value="v3">v3</el-radio>
           </el-radio-group>
         </el-form-item>
         <div v-if="formData.config.apiVersion === 'v2'">
-          <el-form-item label-width="180px" label="商户密钥" prop="config.mchKey">
-            <el-input
-              v-model="formData.config.mchKey"
-              placeholder="请输入商户密钥"
-              clearable
-              :style="{ width: '100%' }"
-              type="textarea"
-              :autosize="{ minRows: 8, maxRows: 8 }"
-            />
+          <el-form-item label="商户密钥" label-width="180px" prop="config.mchKey">
+            <el-input v-model="formData.config.mchKey" clearable placeholder="请输入商户密钥" />
           </el-form-item>
           <el-form-item
-            label-width="180px"
             label="apiclient_cert.p12 证书"
+            label-width="180px"
             prop="config.keyContent"
           >
             <el-input
               v-model="formData.config.keyContent"
-              type="textarea"
-              placeholder="请上传 apiclient_cert.p12 证书"
-              readonly
               :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              placeholder="请上传 apiclient_cert.p12 证书"
+              readonly
+              type="textarea"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="">
+          <el-form-item label="" label-width="180px">
             <el-upload
+              :before-upload="p12FileBeforeUpload"
+              :http-request="keyContentUpload"
               :limit="1"
               accept=".p12"
               action=""
-              :before-upload="p12FileBeforeUpload"
-              :http-request="keyContentUpload"
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon class="mr-5px" icon="ep:upload" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
         </div>
         <div v-if="formData.config.apiVersion === 'v3'">
-          <el-form-item label-width="180px" label="API V3 密钥" prop="config.apiV3Key">
+          <el-form-item label="API V3 密钥" label-width="180px" prop="config.apiV3Key">
             <el-input
               v-model="formData.config.apiV3Key"
-              placeholder="请输入 API V3 密钥"
               clearable
-              :style="{ width: '100%' }"
-              type="textarea"
-              :autosize="{ minRows: 8, maxRows: 8 }"
+              placeholder="请输入 API V3 密钥"
             />
           </el-form-item>
           <el-form-item
-            label-width="180px"
             label="apiclient_key.pem 证书"
+            label-width="180px"
             prop="config.privateKeyContent"
           >
             <el-input
               v-model="formData.config.privateKeyContent"
-              type="textarea"
-              placeholder="请上传 apiclient_key.pem 证书"
-              readonly
               :autosize="{ minRows: 8, maxRows: 8 }"
               :style="{ width: '100%' }"
+              placeholder="请上传 apiclient_key.pem 证书"
+              readonly
+              type="textarea"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="" prop="privateKeyContentFile">
+          <el-form-item label="" label-width="180px" prop="privateKeyContentFile">
             <el-upload
               ref="privateKeyContentFile"
+              :before-upload="pemFileBeforeUpload"
+              :http-request="privateKeyContentUpload"
               :limit="1"
               accept=".pem"
               action=""
-              :before-upload="pemFileBeforeUpload"
-              :http-request="privateKeyContentUpload"
             >
               <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
+                <Icon class="mr-5px" icon="ep:upload" />
+                点击上传
               </el-button>
             </el-upload>
           </el-form-item>
-          <el-form-item
-            label-width="180px"
-            label="apiclient_cert.pem证书"
-            prop="config.privateCertContent"
-          >
+          <el-form-item label="证书序列号" label-width="180px" prop="config.certSerialNo">
             <el-input
-              v-model="formData.config.privateCertContent"
-              type="textarea"
-              placeholder="请上传apiclient_cert.pem证书"
-              readonly
-              :autosize="{ minRows: 8, maxRows: 8 }"
-              :style="{ width: '100%' }"
+              v-model="formData.config.certSerialNo"
+              clearable
+              placeholder="请输入证书序列号"
             />
           </el-form-item>
-          <el-form-item label-width="180px" label="" prop="privateCertContentFile">
-            <el-upload
-              ref="privateCertContentFile"
-              :limit="1"
-              accept=".pem"
-              action=""
-              :before-upload="pemFileBeforeUpload"
-              :http-request="privateCertContentUpload"
-            >
-              <el-button type="primary">
-                <Icon icon="ep:upload" class="mr-5px" /> 点击上传
-              </el-button>
-            </el-upload>
-          </el-form-item>
         </div>
-        <el-form-item label-width="180px" label="备注" prop="remark">
+        <el-form-item label="备注" label-width="180px" prop="remark">
           <el-input v-model="formData.remark" :style="{ width: '100%' }" />
         </el-form-item>
       </el-form>
@@ -190,7 +161,7 @@ const formData = ref<any>({
     mchKey: '',
     keyContent: '',
     privateKeyContent: '',
-    privateCertContent: '',
+    certSerialNo: '',
     apiV3Key: ''
   }
 })
@@ -207,9 +178,7 @@ const formRules = {
   'config.privateKeyContent': [
     { required: true, message: '请上传 apiclient_key.pem 证书', trigger: 'blur' }
   ],
-  'config.privateCertContent': [
-    { required: true, message: '请上传 apiclient_cert.pem证 书', trigger: 'blur' }
-  ],
+  'config.certSerialNo': [{ required: true, message: '请输入证书序列号', trigger: 'blur' }],
   'config.apiV3Key': [{ required: true, message: '请上传 api V3 密钥值', trigger: 'blur' }]
 }
 const formRef = ref() // 表单 Ref
@@ -275,7 +244,7 @@ const resetForm = (appId, code) => {
       mchKey: '',
       keyContent: '',
       privateKeyContent: '',
-      privateCertContent: '',
+      certSerialNo: '',
       apiV3Key: ''
     }
   }
@@ -283,12 +252,11 @@ const resetForm = (appId, code) => {
 }
 
 /**
- * apiclient_cert.p12、apiclient_cert.pem、apiclient_key.pem 上传前的校验
+ * apiclient_cert.p12、apiclient_key.pem 上传前的校验
  */
 const fileBeforeUpload = (file, fileAccept) => {
   let format = '.' + file.name.split('.')[1]
   if (format !== fileAccept) {
-    debugger
     message.error('请上传指定格式"' + fileAccept + '"文件')
     return false
   }
@@ -310,7 +278,7 @@ const pemFileBeforeUpload = (file) => {
 /**
  * 读取 apiclient_key.pem 到 privateKeyContent 字段
  */
-const privateKeyContentUpload = (event) => {
+const privateKeyContentUpload = async (event) => {
   const readFile = new FileReader()
   readFile.onload = (e: any) => {
     formData.value.config.privateKeyContent = e.target.result
@@ -318,21 +286,10 @@ const privateKeyContentUpload = (event) => {
   readFile.readAsText(event.file)
 }
 
-/**
- * 读取 apiclient_cert.pem 到 privateCertContent 字段
- */
-const privateCertContentUpload = (event) => {
-  const readFile = new FileReader()
-  readFile.onload = (e: any) => {
-    formData.value.config.privateCertContent = e.target.result
-  }
-  readFile.readAsText(event.file)
-}
-
 /**
  * 读取 apiclient_cert.p12 到 keyContent 字段
  */
-const keyContentUpload = (event) => {
+const keyContentUpload = async (event) => {
   const readFile = new FileReader()
   readFile.onload = (e: any) => {
     formData.value.config.keyContent = e.target.result.split(',')[1]
diff --git a/src/views/pay/app/index.vue b/src/views/pay/app/index.vue
index fe98eb2a..4c3364e7 100644
--- a/src/views/pay/app/index.vue
+++ b/src/views/pay/app/index.vue
@@ -1,28 +1,29 @@
 <template>
+  <doc-alert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
   <!-- 搜索 -->
   <ContentWrap>
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="应用名" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入应用名"
+          class="!w-240px"
           clearable
+          placeholder="请输入应用名"
           @keyup.enter="handleQuery"
-          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="开启状态" prop="status">
         <el-select
           v-model="queryParams.status"
-          placeholder="请选择开启状态"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择开启状态"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -35,19 +36,26 @@
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
-        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
-        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['pay:app:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button v-hasPermi="['pay:app:create']" plain type="primary" @click="openForm('create')">
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
         </el-button>
       </el-form-item>
     </el-form>
@@ -56,9 +64,9 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="应用编号" align="center" prop="id" />
-      <el-table-column label="应用名" align="center" prop="name" />
-      <el-table-column label="开启状态" align="center" prop="status">
+      <el-table-column align="center" label="应用标识" prop="appKey" />
+      <el-table-column align="center" label="应用名" min-width="90" prop="name" />
+      <el-table-column align="center" label="开启状态" prop="status">
         <template #default="scope">
           <el-switch
             v-model="scope.row.status"
@@ -68,205 +76,81 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="支付宝配置" align="center">
-        <el-table-column :label="PayChannelEnum.ALIPAY_APP.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_APP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
-              circle
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_APP.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_PC.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_PC.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_PC.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_WAP.name" align="center">
+      <el-table-column align="center" label="支付宝配置">
+        <el-table-column
+          v-for="channel in alipayChannels"
+          :key="channel.code"
+          :label="channel.name.replace('支付宝', '')"
+          align="center"
+        >
           <template #default="scope">
             <el-button
-              type="success"
+              v-if="isChannelExists(scope.row.channelCodes, channel.code)"
               circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_WAP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_WAP.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_QR.name" align="center">
-          <template #default="scope">
-            <el-button
+              size="small"
               type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_QR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
+              @click="openChannelForm(scope.row, channel.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
             <el-button
               v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_QR.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.ALIPAY_BAR.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
               circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.ALIPAY_BAR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
+              size="small"
               type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.ALIPAY_BAR.code)"
+              @click="openChannelForm(scope.row, channel.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column label="微信配置" align="center">
-        <el-table-column :label="PayChannelEnum.WX_LITE.name" align="center">
+      <el-table-column align="center" label="微信配置">
+        <el-table-column
+          v-for="channel in wxChannels"
+          :key="channel.code"
+          :label="channel.name.replace('微信', '')"
+          align="center"
+        >
           <template #default="scope">
             <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_LITE.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
+              v-if="isChannelExists(scope.row.channelCodes, channel.code)"
               circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_LITE.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.WX_PUB.name" align="center">
-          <template #default="scope">
-            <el-button
+              size="small"
               type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_PUB.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
+              @click="openChannelForm(scope.row, channel.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
             <el-button
               v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_PUB.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.WX_APP.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
               circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_APP.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
+              size="small"
               type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_APP.code)"
-            >
-              <Icon icon="ep:close" />
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column :label="PayChannelEnum.WX_BAR.name" align="center">
-          <template #default="scope">
-            <el-button
-              type="success"
-              circle
-              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WX_BAR.code)"
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
-            >
-              <Icon icon="ep:check" />
-            </el-button>
-            <el-button
-              v-else
-              type="danger"
-              circle
-              @click="openChannelForm(scope.row, PayChannelEnum.WX_BAR.code)"
+              @click="openChannelForm(scope.row, channel.code)"
             >
               <Icon icon="ep:close" />
             </el-button>
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column label="钱包支付配置" align="center">
+      <el-table-column align="center" label="钱包支付配置">
         <el-table-column :label="PayChannelEnum.WALLET.name" align="center">
           <template #default="scope">
             <el-button
-              type="success"
-              circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WALLET.code)"
+              circle
+              size="small"
+              type="success"
               @click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
             <el-button
               v-else
-              type="danger"
               circle
+              size="small"
+              type="danger"
               @click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
             >
               <Icon icon="ep:close" />
@@ -274,21 +158,23 @@
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column label="模拟支付配置" align="center">
+      <el-table-column align="center" label="模拟支付配置">
         <el-table-column :label="PayChannelEnum.MOCK.name" align="center">
           <template #default="scope">
             <el-button
-              type="success"
-              circle
               v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.MOCK.code)"
+              circle
+              size="small"
+              type="success"
               @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
             >
               <Icon icon="ep:check" />
             </el-button>
             <el-button
               v-else
-              type="danger"
               circle
+              size="small"
+              type="danger"
               @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
             >
               <Icon icon="ep:close" />
@@ -296,21 +182,21 @@
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column label="操作" align="center" min-width="110" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" min-width="110">
         <template #default="scope">
           <el-button
+            v-hasPermi="['pay:app:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['pay:app:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-hasPermi="['pay:app:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['pay:app:delete']"
           >
             删除
           </el-button>
@@ -319,9 +205,9 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -337,12 +223,11 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as AppApi from '@/api/pay/app'
 import AppForm from './components/AppForm.vue'
-import { PayChannelEnum } from '@/utils/constants'
+import { CommonStatusEnum, PayChannelEnum } from '@/utils/constants'
 import AlipayChannelForm from './components/channel/AlipayChannelForm.vue'
 import WeixinChannelForm from './components/channel/WeixinChannelForm.vue'
 import MockChannelForm from './components/channel/MockChannelForm.vue'
 import WalletChannelForm from './components/channel/WalletChannelForm.vue'
-import { CommonStatusEnum } from '@/utils/constants'
 
 defineOptions({ name: 'PayApp' })
 
@@ -364,6 +249,23 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 
+const alipayChannels = [
+  PayChannelEnum.ALIPAY_APP,
+  PayChannelEnum.ALIPAY_PC,
+  PayChannelEnum.ALIPAY_WAP,
+  PayChannelEnum.ALIPAY_QR,
+  PayChannelEnum.ALIPAY_BAR
+]
+
+const wxChannels = [
+  PayChannelEnum.WX_LITE,
+  PayChannelEnum.WX_PUB,
+  PayChannelEnum.WX_APP,
+  PayChannelEnum.WX_NATIVE,
+  PayChannelEnum.WX_WAP,
+  PayChannelEnum.WX_BAR
+]
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
diff --git a/src/views/pay/cashier/index.vue b/src/views/pay/cashier/index.vue
index 12723dba..46d82f38 100644
--- a/src/views/pay/cashier/index.vue
+++ b/src/views/pay/cashier/index.vue
@@ -231,7 +231,7 @@ const getDetail = async () => {
     goReturnUrl('cancel')
     return
   }
-  const data = await PayOrderApi.getOrder(id.value)
+  const data = await PayOrderApi.getOrder(id.value, true)
   payOrder.value = data
   // 1.2 无法查询到支付信息
   if (!data) {
diff --git a/src/views/pay/demo/order/index.vue b/src/views/pay/demo/order/index.vue
index 26341751..32f0de13 100644
--- a/src/views/pay/demo/order/index.vue
+++ b/src/views/pay/demo/order/index.vue
@@ -1,4 +1,8 @@
 <template>
+  <doc-alert title="支付宝支付接入" url="https://doc.iocoder.cn/pay/alipay-pay-demo/" />
+  <doc-alert title="支付宝、微信退款接入" url="https://doc.iocoder.cn/pay/refund-demo/" />
+  <doc-alert title="微信公众号支付接入" url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/" />
+  <doc-alert title="微信小程序支付接入" url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/" />
 
   <!-- 操作工具栏 -->
   <el-row :gutter="10" class="mb8">
@@ -143,7 +147,7 @@ const handlePay = (row: any) => {
     name: 'PayCashier',
     query: {
       id: row.payOrderId,
-      returnUrl: encodeURIComponent('/pay/demo-order?id=' + row.id)
+      returnUrl: encodeURIComponent('/pay/demo/order?id=' + row.id)
     }
   })
 }
diff --git a/src/views/pay/demo/transfer/DemoTransferForm.vue b/src/views/pay/demo/transfer/DemoTransferForm.vue
index e5448f10..0eb7acd2 100644
--- a/src/views/pay/demo/transfer/DemoTransferForm.vue
+++ b/src/views/pay/demo/transfer/DemoTransferForm.vue
@@ -12,7 +12,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
             :disabled="dict.value === 2 || dict.value === 3 || dict.value === 4"
           >
             {{ dict.label }}
diff --git a/src/views/pay/notify/index.vue b/src/views/pay/notify/index.vue
index 0690841b..5daf754f 100644
--- a/src/views/pay/notify/index.vue
+++ b/src/views/pay/notify/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/pay/order/OrderDetail.vue b/src/views/pay/order/OrderDetail.vue
index 4f05c14a..895bc160 100644
--- a/src/views/pay/order/OrderDetail.vue
+++ b/src/views/pay/order/OrderDetail.vue
@@ -62,7 +62,9 @@
     <el-divider />
     <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
       <el-descriptions-item label="支付通道异步回调内容">
-        <el-text>{{ detailData.extension.channelNotifyData }}</el-text>
+        <el-text style="white-space: pre-wrap; word-break: break-word">
+          {{ detailData.extension.channelNotifyData }}
+        </el-text>
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index 29fab7bb..9ba19227 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -1,4 +1,7 @@
 <template>
+  <doc-alert title="支付宝支付接入" url="https://doc.iocoder.cn/pay/alipay-pay-demo/" />
+  <doc-alert title="微信公众号支付接入" url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/" />
+  <doc-alert title="微信小程序支付接入" url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/" />
 
   <ContentWrap>
     <el-form
@@ -94,7 +97,7 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['system:tenant:export']"
+          v-hasPermi="['pay:order:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -189,6 +192,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import * as OrderApi from '@/api/pay/order'
 import OrderDetail from './OrderDetail.vue'
 import download from '@/utils/download'
+import { getAppList } from '@/api/pay/app'
 
 defineOptions({ name: 'PayOrder' })
 
@@ -260,6 +264,7 @@ const openDetail = (id: number) => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  appList.value = await getAppList()
 })
 </script>
 <style>
diff --git a/src/views/pay/refund/RefundDetail.vue b/src/views/pay/refund/RefundDetail.vue
index 72f7a8c1..20a16549 100644
--- a/src/views/pay/refund/RefundDetail.vue
+++ b/src/views/pay/refund/RefundDetail.vue
@@ -62,7 +62,9 @@
     </el-descriptions>
     <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
       <el-descriptions-item label="支付通道异步回调内容">
-        {{ refundDetail.channelNotifyData }}
+        <el-text style="white-space: pre-wrap; word-break: break-word">
+          {{ refundDetail.channelNotifyData }}
+        </el-text>
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
diff --git a/src/views/pay/refund/index.vue b/src/views/pay/refund/index.vue
index bfdc6223..2a985688 100644
--- a/src/views/pay/refund/index.vue
+++ b/src/views/pay/refund/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="支付宝、微信退款接入" url="https://doc.iocoder.cn/pay/refund-demo/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
@@ -120,7 +121,7 @@
         label="创建时间"
         align="center"
         prop="createTime"
-        width="180"
+        width="170"
         :formatter="dateFormatter"
       />
       <el-table-column label="支付金额" align="center" prop="payPrice" width="100">
@@ -156,7 +157,7 @@
           </p>
         </template>
       </el-table-column>
-      <el-table-column label="退款状态" align="center" prop="status">
+      <el-table-column label="退款状态" align="center" prop="status" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PAY_REFUND_STATUS" :value="scope.row.status" />
         </template>
diff --git a/src/views/pay/transfer/CreatePayTransfer.vue b/src/views/pay/transfer/CreatePayTransfer.vue
index 31706504..68a6db30 100644
--- a/src/views/pay/transfer/CreatePayTransfer.vue
+++ b/src/views/pay/transfer/CreatePayTransfer.vue
@@ -28,13 +28,13 @@
       <div>
         <el-radio-group v-model="channelCode">
           <el-radio
-            label="alipay_pc"
+            value="alipay_pc"
             :disabled="transfer.type === 2 || transfer.type === 3 || transfer.type === 4"
           >
             <img :src="svg_alipay_app" />
           </el-radio>
           <el-radio
-            label="wx_app"
+            value="wx_app"
             :disabled="transfer.type === 1 || transfer.type === 3 || transfer.type === 4"
           >
             <img :src="svg_wx_app" />
diff --git a/src/views/pay/wallet/balance/index.vue b/src/views/pay/wallet/balance/index.vue
index 296b567b..1a37eeca 100644
--- a/src/views/pay/wallet/balance/index.vue
+++ b/src/views/pay/wallet/balance/index.vue
@@ -8,15 +8,30 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="用户昵称" prop="nickname">
+      <el-form-item label="用户编号" prop="userId">
         <el-input
-          v-model="queryParams.nickname"
-          placeholder="请输入用户昵称"
+          v-model="queryParams.userId"
+          placeholder="请输入用户编号"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
+      <el-form-item label="用户类型" prop="userType">
+        <el-select
+          v-model="queryParams.userType"
+          placeholder="请选择用户类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
@@ -39,12 +54,7 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="用户昵称" align="center" prop="nickname" />
-      <el-table-column label="头像" align="center" prop="avatar" width="80px">
-        <template #default="scope">
-          <img :src="scope.row.avatar" style="width: 40px" />
-        </template>
-      </el-table-column>
+      <el-table-column label="用户编号" align="center" prop="userId" />
       <el-table-column label="用户类型" align="center" prop="userType">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
@@ -97,20 +107,17 @@ import WalletForm from './WalletForm.vue'
 
 defineOptions({ name: 'WalletBalance' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  nickname: null,
+  userId: null,
+  userType: null,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
 /** 查询列表 */
 const getList = async () => {
diff --git a/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue b/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue
index 0153225e..e7a7328d 100644
--- a/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue
+++ b/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue
@@ -21,7 +21,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/pay/wallet/transaction/WalletTransactionList.vue b/src/views/pay/wallet/transaction/WalletTransactionList.vue
index c440778b..49c5d972 100644
--- a/src/views/pay/wallet/transaction/WalletTransactionList.vue
+++ b/src/views/pay/wallet/transaction/WalletTransactionList.vue
@@ -1,28 +1,28 @@
 <template>
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="钱包编号" align="center" prop="walletId" />
-      <el-table-column label="关联业务标题" align="center" prop="title" />
-      <el-table-column label="交易金额" align="center" prop="price">
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="钱包编号" prop="walletId" />
+      <el-table-column align="center" label="关联业务标题" prop="title" />
+      <el-table-column align="center" label="交易金额" prop="price">
         <template #default="{ row }"> {{ fenToYuan(row.price) }} 元</template>
       </el-table-column>
-      <el-table-column label="钱包余额" align="center" prop="balance">
+      <el-table-column align="center" label="钱包余额" prop="balance">
         <template #default="{ row }"> {{ fenToYuan(row.balance) }} 元</template>
       </el-table-column>
       <el-table-column
-        label="交易时间"
+        :formatter="dateFormatter"
         align="center"
+        label="交易时间"
         prop="createTime"
-        :formatter="dateFormatter"
         width="180px"
       />
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
@@ -31,12 +31,18 @@
 <script lang="ts" setup>
 import { dateFormatter } from '@/utils/formatTime'
 import * as WalletTransactionApi from '@/api/pay/wallet/transaction'
+import * as WalletApi from '@/api/pay/wallet/balance'
 import { fenToYuan } from '@/utils'
+
 defineOptions({ name: 'WalletTransactionList' })
-const { walletId }: { walletId: number } = defineProps({
+const props = defineProps({
   walletId: {
     type: Number,
     required: false
+  },
+  userId: {
+    type: Number,
+    required: false
   }
 })
 
@@ -52,7 +58,12 @@ const list = ref([]) // 列表的数据
 const getList = async () => {
   loading.value = true
   try {
-    queryParams.walletId = walletId
+    if (props.userId) {
+      const wallet = await WalletApi.getWallet({ userId: props.userId })
+      queryParams.walletId = wallet.id as any
+    } else {
+      queryParams.walletId = props.walletId as any
+    }
     const data = await WalletTransactionApi.getWalletTransactionPage(queryParams)
     list.value = data.list
     total.value = data.total
@@ -65,4 +76,4 @@ onMounted(() => {
   getList()
 })
 </script>
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/report/goview/index.vue b/src/views/report/goview/index.vue
index 7d9a36a1..038b0624 100644
--- a/src/views/report/goview/index.vue
+++ b/src/views/report/goview/index.vue
@@ -1,6 +1,7 @@
 <template>
-  <ContentWrap>
+  <doc-alert title="大屏设计器" url="https://doc.iocoder.cn/report/screen/" />
 
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
     <IFrame :src="src" />
   </ContentWrap>
 </template>
diff --git a/src/views/report/jmreport/index.vue b/src/views/report/jmreport/index.vue
index 2054e420..37861519 100644
--- a/src/views/report/jmreport/index.vue
+++ b/src/views/report/jmreport/index.vue
@@ -1,14 +1,15 @@
 <template>
-  <ContentWrap>
+  <doc-alert title="报表设计器" url="https://doc.iocoder.cn/report/" />
 
+  <ContentWrap :bodyStyle="{ padding: '0px' }" class="!mb-0">
     <IFrame :src="src" />
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { getAccessToken } from '@/utils/auth'
+import { getRefreshToken } from '@/utils/auth'
 
 defineOptions({ name: 'JimuReport' })
 
-const BASE_URL = import.meta.env.VITE_BASE_URL
-const src = ref(BASE_URL + '/jmreport/list?token=' + getAccessToken())
+// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：积木报表无法方便的刷新访问令牌
+const src = ref(import.meta.env.VITE_BASE_URL + '/jmreport/list?token=' + getRefreshToken())
 </script>
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index 0013d7b6..72cbcad2 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -1,5 +1,6 @@
 <template>
-  
+  <doc-alert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
+
   <!-- 操作栏 -->
   <ContentWrap>
     <el-button type="primary" plain @click="openForm()">
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index e99d7f8a..5e47846b 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -8,11 +8,12 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="部门名称" prop="title">
+      <el-form-item label="部门名称" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入部门名称"
           clearable
+          @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
diff --git a/src/views/system/dict/DictTypeForm.vue b/src/views/system/dict/DictTypeForm.vue
index 5e416d78..b9159b50 100644
--- a/src/views/system/dict/DictTypeForm.vue
+++ b/src/views/system/dict/DictTypeForm.vue
@@ -22,7 +22,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/dict/data/DictDataForm.vue b/src/views/system/dict/data/DictDataForm.vue
index 2094371d..bab18dbf 100644
--- a/src/views/system/dict/data/DictDataForm.vue
+++ b/src/views/system/dict/data/DictDataForm.vue
@@ -28,7 +28,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/loginlog/index.vue b/src/views/system/loginlog/index.vue
index 45053592..eea2f198 100644
--- a/src/views/system/loginlog/index.vue
+++ b/src/views/system/loginlog/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -63,9 +64,9 @@
           <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
         </template>
       </el-table-column>
-      <el-table-column label="用户名称" align="center" prop="username" width="150" />
+      <el-table-column label="用户名称" align="center" prop="username" width="180" />
       <el-table-column label="登录地址" align="center" prop="userIp" width="180" />
-      <el-table-column label="浏览器" align="center" prop="userAgent" width="180"/>
+      <el-table-column label="浏览器" align="center" prop="userAgent" />
       <el-table-column label="登陆结果" align="center" prop="result">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
diff --git a/src/views/system/mail/account/account.data.ts b/src/views/system/mail/account/account.data.ts
index 23b1f084..6de394e6 100644
--- a/src/views/system/mail/account/account.data.ts
+++ b/src/views/system/mail/account/account.data.ts
@@ -25,12 +25,26 @@ const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '邮箱',
     field: 'mail',
-    isSearch: true
+    isSearch: true,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '用户名',
     field: 'username',
-    isSearch: true
+    isSearch: true,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '密码',
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index e02f74fb..8706338e 100644
--- a/src/views/system/mail/account/index.vue
+++ b/src/views/system/mail/account/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="邮件配置" url="https://doc.iocoder.cn/mail" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/system/mail/log/index.vue b/src/views/system/mail/log/index.vue
index 466bc020..810ee227 100644
--- a/src/views/system/mail/log/index.vue
+++ b/src/views/system/mail/log/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="邮件配置" url="https://doc.iocoder.cn/mail" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/system/mail/log/log.data.ts b/src/views/system/mail/log/log.data.ts
index 62cbf516..594a5d5f 100644
--- a/src/views/system/mail/log/log.data.ts
+++ b/src/views/system/mail/log/log.data.ts
@@ -21,7 +21,10 @@ const crudSchemas = reactive<CrudSchema[]>([
       componentProps: {
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
         type: 'daterange',
-        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')],
+        style: {
+          width: '240px'
+        }
       }
     },
     detail: {
@@ -36,7 +39,14 @@ const crudSchemas = reactive<CrudSchema[]>([
     label: '用户编号',
     field: 'userId',
     isSearch: true,
-    isTable: false
+    isTable: false,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '用户类型',
@@ -44,7 +54,14 @@ const crudSchemas = reactive<CrudSchema[]>([
     dictType: DICT_TYPE.USER_TYPE,
     dictClass: 'number',
     isSearch: true,
-    isTable: false
+    isTable: false,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '邮件标题',
@@ -65,7 +82,14 @@ const crudSchemas = reactive<CrudSchema[]>([
     field: 'sendStatus',
     dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
     dictClass: 'string',
-    isSearch: true
+    isSearch: true,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '邮箱账号',
@@ -79,6 +103,9 @@ const crudSchemas = reactive<CrudSchema[]>([
         optionsAlias: {
           labelField: 'mail',
           valueField: 'id'
+        },
+        style: {
+          width: '240px'
         }
       }
     }
@@ -93,7 +120,14 @@ const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '模板编号',
     field: 'templateId',
-    isSearch: true
+    isSearch: true,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '模板编码',
diff --git a/src/views/system/mail/template/index.vue b/src/views/system/mail/template/index.vue
index 4d7eae99..0d736207 100644
--- a/src/views/system/mail/template/index.vue
+++ b/src/views/system/mail/template/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="邮件配置" url="https://doc.iocoder.cn/mail" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/system/mail/template/template.data.ts b/src/views/system/mail/template/template.data.ts
index e68f875a..c11d5fe9 100644
--- a/src/views/system/mail/template/template.data.ts
+++ b/src/views/system/mail/template/template.data.ts
@@ -22,12 +22,26 @@ const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '模板编码',
     field: 'code',
-    isSearch: true
+    isSearch: true,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '模板名称',
     field: 'name',
-    isSearch: true
+    isSearch: true,
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '模板标题',
@@ -59,6 +73,9 @@ const crudSchemas = reactive<CrudSchema[]>([
         optionsAlias: {
           labelField: 'mail',
           valueField: 'id'
+        },
+        style: {
+          width: '240px'
         }
       }
     },
@@ -82,7 +99,14 @@ const crudSchemas = reactive<CrudSchema[]>([
     field: 'status',
     isSearch: true,
     dictType: DICT_TYPE.COMMON_STATUS,
-    dictClass: 'number'
+    dictClass: 'number',
+    search: {
+      componentProps: {
+        style: {
+          width: '240px'
+        }
+      }
+    }
   },
   {
     label: '备注',
@@ -100,7 +124,10 @@ const crudSchemas = reactive<CrudSchema[]>([
       componentProps: {
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
         type: 'daterange',
-        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')],
+        style: {
+          width: '240px'
+        }
       }
     }
   },
diff --git a/src/views/system/menu/MenuForm.vue b/src/views/system/menu/MenuForm.vue
index 2b4a90d1..ac37937c 100644
--- a/src/views/system/menu/MenuForm.vue
+++ b/src/views/system/menu/MenuForm.vue
@@ -25,7 +25,7 @@
           <el-radio-button
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
             :key="dict.label"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio-button>
@@ -66,7 +66,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.label"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -77,8 +77,8 @@
           <Tooltip message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" title="显示状态" />
         </template>
         <el-radio-group v-model="formData.visible">
-          <el-radio key="true" :label="true" border>显示</el-radio>
-          <el-radio key="false" :label="false" border>隐藏</el-radio>
+          <el-radio key="true" :value="true" border>显示</el-radio>
+          <el-radio key="false" :value="false" border>隐藏</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item v-if="formData.type !== 3" label="总是显示" prop="alwaysShow">
@@ -89,8 +89,8 @@
           />
         </template>
         <el-radio-group v-model="formData.alwaysShow">
-          <el-radio key="true" :label="true" border>总是</el-radio>
-          <el-radio key="false" :label="false" border>不是</el-radio>
+          <el-radio key="true" :value="true" border>总是</el-radio>
+          <el-radio key="false" :value="false" border>不是</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item v-if="formData.type === 2" label="缓存状态" prop="keepAlive">
@@ -101,8 +101,8 @@
           />
         </template>
         <el-radio-group v-model="formData.keepAlive">
-          <el-radio key="true" :label="true" border>缓存</el-radio>
-          <el-radio key="false" :label="false" border>不缓存</el-radio>
+          <el-radio key="true" :value="true" border>缓存</el-radio>
+          <el-radio key="false" :value="false" border>不缓存</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 217438fc..b2c93bbe 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+  <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue3/route/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
@@ -82,9 +84,17 @@
       <el-table-column :show-overflow-tooltip="true" label="权限标识" prop="permission" />
       <el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" />
       <el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" />
-      <el-table-column label="状态" prop="status" width="80">
+      <el-table-column label="状态" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          <el-switch
+            class="ml-4px"
+            v-model="scope.row.status"
+            v-hasPermi="['system:menu:update']"
+            :active-value="CommonStatusEnum.ENABLE"
+            :inactive-value="CommonStatusEnum.DISABLE"
+            :loading="menuStatusUpdating[scope.row.id]"
+            @change="(val) => handleStatusChanged(scope.row, val as number)"
+          />
         </template>
       </el-table-column>
       <el-table-column align="center" label="操作">
@@ -125,8 +135,10 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { handleTree } from '@/utils/tree'
 import * as MenuApi from '@/api/system/menu'
+import { MenuVO } from '@/api/system/menu'
 import MenuForm from './MenuForm.vue'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { CommonStatusEnum } from '@/utils/constants'
 
 defineOptions({ name: 'SystemMenu' })
 
@@ -206,6 +218,21 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 开启/关闭菜单的状态 */
+const menuStatusUpdating = ref({}) // 菜单状态更新中的 menu 映射。key：菜单编号，value：是否更新中
+const handleStatusChanged = async (menu: MenuVO, val: number) => {
+  // 1. 标记 menu.id 更新中
+  menuStatusUpdating.value[menu.id] = true
+  try {
+    // 2. 发起更新状态
+    menu.status = val
+    await MenuApi.updateMenu(menu)
+  } finally {
+    // 3. 标记 menu.id 更新完成
+    menuStatusUpdating.value[menu.id] = false
+  }
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()
diff --git a/src/views/system/notify/message/index.vue b/src/views/system/notify/message/index.vue
index 5e520be8..94844118 100644
--- a/src/views/system/notify/message/index.vue
+++ b/src/views/system/notify/message/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/notify/my/index.vue b/src/views/system/notify/my/index.vue
index 14416358..ae4b9c52 100644
--- a/src/views/system/notify/my/index.vue
+++ b/src/views/system/notify/my/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/notify/template/NotifyTemplateForm.vue b/src/views/system/notify/template/NotifyTemplateForm.vue
index a734e2d6..beb28634 100644
--- a/src/views/system/notify/template/NotifyTemplateForm.vue
+++ b/src/views/system/notify/template/NotifyTemplateForm.vue
@@ -34,7 +34,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/notify/template/NotifyTemplateSendForm.vue b/src/views/system/notify/template/NotifyTemplateSendForm.vue
index 126067c1..4c3e9c45 100644
--- a/src/views/system/notify/template/NotifyTemplateSendForm.vue
+++ b/src/views/system/notify/template/NotifyTemplateSendForm.vue
@@ -20,7 +20,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/notify/template/index.vue b/src/views/system/notify/template/index.vue
index 9f8a3808..5aef80d2 100644
--- a/src/views/system/notify/template/index.vue
+++ b/src/views/system/notify/template/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
 
   <!-- 搜索工作栏 -->
   <ContentWrap>
diff --git a/src/views/system/oauth2/client/ClientForm.vue b/src/views/system/oauth2/client/ClientForm.vue
index 5d13f71b..563682a0 100644
--- a/src/views/system/oauth2/client/ClientForm.vue
+++ b/src/views/system/oauth2/client/ClientForm.vue
@@ -27,7 +27,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/oauth2/client/index.vue b/src/views/system/oauth2/client/index.vue
index 0824cdf9..fceee571 100644
--- a/src/views/system/oauth2/client/index.vue
+++ b/src/views/system/oauth2/client/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="OAuth 2.0（SSO 单点登录)" url="https://doc.iocoder.cn/oauth2/" />
 
   <!-- 搜索 -->
   <ContentWrap>
diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue
index 90a9d894..2a94f8e7 100644
--- a/src/views/system/oauth2/token/index.vue
+++ b/src/views/system/oauth2/token/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="OAuth 2.0（SSO 单点登录)" url="https://doc.iocoder.cn/oauth2/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/operatelog/index.vue b/src/views/system/operatelog/index.vue
index 5b3892b0..3f221b7e 100644
--- a/src/views/system/operatelog/index.vue
+++ b/src/views/system/operatelog/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
@@ -12,7 +13,8 @@
       <el-form-item label="操作人" prop="userId">
         <el-select
           v-model="queryParams.userId"
-          multiple
+          clearable
+          filterable
           placeholder="请输入操作人员"
           class="!w-240px"
         >
@@ -33,10 +35,10 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="操作模块" prop="subType">
+      <el-form-item label="操作名" prop="subType">
         <el-input
           v-model="queryParams.subType"
-          placeholder="请输入操作模块"
+          placeholder="请输入操作名"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
@@ -59,7 +61,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="业务编号" prop="bizId">
@@ -103,7 +105,7 @@
         :formatter="dateFormatter"
       />
       <el-table-column label="业务编号" align="center" prop="bizId" width="120" />
-      <el-table-column label="IP" align="center" prop="userIp" width="120" />
+      <el-table-column label="操作 IP" align="center" prop="userIp" width="120" />
       <el-table-column label="操作" align="center" fixed="right" width="60">
         <template #default="scope">
           <el-button
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index dd06c2ad..ee0f0e77 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -13,6 +13,7 @@
           v-model="queryParams.name"
           placeholder="请输入岗位名称"
           clearable
+          class="!w-240px"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
@@ -21,11 +22,12 @@
           v-model="queryParams.code"
           placeholder="请输入岗位编码"
           clearable
+          class="!w-240px"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
diff --git a/src/views/system/role/RoleAssignMenuForm.vue b/src/views/system/role/RoleAssignMenuForm.vue
index c3294a52..7c81ef79 100644
--- a/src/views/system/role/RoleAssignMenuForm.vue
+++ b/src/views/system/role/RoleAssignMenuForm.vue
@@ -8,7 +8,7 @@
         <el-tag>{{ formData.code }}</el-tag>
       </el-form-item>
       <el-form-item label="菜单权限">
-        <el-card class="cardHeight">
+        <el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
           <template #header>
             全选/全不选:
             <el-switch
@@ -151,10 +151,3 @@ const handleCheckedTreeExpand = () => {
   }
 }
 </script>
-<style lang="scss" scoped>
-.cardHeight {
-  width: 100%;
-  max-height: 400px;
-  overflow-y: scroll;
-}
-</style>
diff --git a/src/views/system/role/RoleDataPermissionForm.vue b/src/views/system/role/RoleDataPermissionForm.vue
index 476a623c..758d47ad 100644
--- a/src/views/system/role/RoleDataPermissionForm.vue
+++ b/src/views/system/role/RoleDataPermissionForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="dialogVisible" title="菜单权限" width="800">
+  <Dialog v-model="dialogVisible" title="数据权限" width="800">
     <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
       <el-form-item label="角色名称">
         <el-tag>{{ formData.name }}</el-tag>
@@ -21,9 +21,9 @@
     <el-form-item
       v-if="formData.dataScope === SystemDataScopeEnum.DEPT_CUSTOM"
       label="权限范围"
-      style="display: flex"
+      label-width="80px"
     >
-      <el-card class="card" shadow="never">
+      <el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
         <template #header>
           全选/全不选:
           <el-switch
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index ddc2d1eb..6af7d0f1 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+  <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/sms/channel/SmsChannelForm.vue b/src/views/system/sms/channel/SmsChannelForm.vue
index 049868a3..926c28f4 100644
--- a/src/views/system/sms/channel/SmsChannelForm.vue
+++ b/src/views/system/sms/channel/SmsChannelForm.vue
@@ -25,7 +25,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/sms/channel/index.vue b/src/views/system/sms/channel/index.vue
index c39510cc..f681b409 100644
--- a/src/views/system/sms/channel/index.vue
+++ b/src/views/system/sms/channel/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="短信配置" url="https://doc.iocoder.cn/sms/" />
 
   <ContentWrap>
     <el-form
@@ -13,11 +14,17 @@
           v-model="queryParams.signature"
           placeholder="请输入短信签名"
           clearable
+          class="!w-240px"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="启用状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择启用状态"
+          class="!w-240px"
+          clearable
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
@@ -34,6 +41,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
diff --git a/src/views/system/sms/log/index.vue b/src/views/system/sms/log/index.vue
index 894e9279..e1a5a233 100644
--- a/src/views/system/sms/log/index.vue
+++ b/src/views/system/sms/log/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="短信配置" url="https://doc.iocoder.cn/sms/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/sms/template/SmsTemplateForm.vue b/src/views/system/sms/template/SmsTemplateForm.vue
index 9750e8a7..f339136a 100644
--- a/src/views/system/sms/template/SmsTemplateForm.vue
+++ b/src/views/system/sms/template/SmsTemplateForm.vue
@@ -44,7 +44,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/sms/template/index.vue b/src/views/system/sms/template/index.vue
index 5176de3e..a59c48dd 100644
--- a/src/views/system/sms/template/index.vue
+++ b/src/views/system/sms/template/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="短信配置" url="https://doc.iocoder.cn/sms/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/social/client/SocialClientForm.vue b/src/views/system/social/client/SocialClientForm.vue
index e6f92bd6..cbfe195b 100644
--- a/src/views/system/social/client/SocialClientForm.vue
+++ b/src/views/system/social/client/SocialClientForm.vue
@@ -15,7 +15,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -26,7 +26,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -49,7 +49,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/social/client/index.vue b/src/views/system/social/client/index.vue
index fc08ebd8..fa49018c 100644
--- a/src/views/system/social/client/index.vue
+++ b/src/views/system/social/client/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="三方登录" url="https://doc.iocoder.cn/social-user/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/social/user/index.vue b/src/views/system/social/user/index.vue
index 1c62d9eb..dda9eb82 100644
--- a/src/views/system/social/user/index.vue
+++ b/src/views/system/social/user/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="三方登录" url="https://doc.iocoder.cn/social-user/" />
 
   <ContentWrap>
     <!-- 搜索工作栏 -->
diff --git a/src/views/system/tenant/TenantForm.vue b/src/views/system/tenant/TenantForm.vue
index 4d5fde5a..205a2cf0 100644
--- a/src/views/system/tenant/TenantForm.vue
+++ b/src/views/system/tenant/TenantForm.vue
@@ -62,7 +62,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index a2701634..ae9a2b79 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -1,5 +1,5 @@
 <template>
-  
+  <doc-alert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
 
   <!-- 搜索 -->
   <ContentWrap>
diff --git a/src/views/system/tenantPackage/TenantPackageForm.vue b/src/views/system/tenantPackage/TenantPackageForm.vue
index 74928892..2003c9c5 100644
--- a/src/views/system/tenantPackage/TenantPackageForm.vue
+++ b/src/views/system/tenantPackage/TenantPackageForm.vue
@@ -11,7 +11,7 @@
         <el-input v-model="formData.name" placeholder="请输入套餐名" />
       </el-form-item>
       <el-form-item label="菜单权限">
-        <el-card class="cardHeight">
+        <el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
           <template #header>
             全选/全不选:
             <el-switch
@@ -45,7 +45,7 @@
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
             :key="dict.value"
-            :label="dict.value"
+            :value="dict.value"
           >
             {{ dict.label }}
           </el-radio>
@@ -185,10 +185,3 @@ const handleCheckedTreeExpand = () => {
   }
 }
 </script>
-<style lang="scss" scoped>
-.cardHeight {
-  width: 100%;
-  max-height: 400px;
-  overflow-y: scroll;
-}
-</style>
diff --git a/src/views/system/tenantPackage/index.vue b/src/views/system/tenantPackage/index.vue
index cebd1a9b..7ee111cc 100644
--- a/src/views/system/tenantPackage/index.vue
+++ b/src/views/system/tenantPackage/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <doc-alert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
 
   <!-- 搜索 -->
   <ContentWrap>
diff --git a/src/views/system/user/UserForm.vue b/src/views/system/user/UserForm.vue
index f359c0e9..630688a3 100644
--- a/src/views/system/user/UserForm.vue
+++ b/src/views/system/user/UserForm.vue
@@ -140,7 +140,6 @@ const formRules = reactive<FormRules>({
   ],
   mobile: [
     {
-      required: true,
       pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
       message: '请输入正确的手机号码',
       trigger: 'blur'
diff --git a/src/views/system/user/UserImportForm.vue b/src/views/system/user/UserImportForm.vue
index edff90e9..8447b286 100644
--- a/src/views/system/user/UserImportForm.vue
+++ b/src/views/system/user/UserImportForm.vue
@@ -76,7 +76,7 @@ const submitForm = async () => {
   // 提交请求
   uploadHeaders.value = {
     Authorization: 'Bearer ' + getAccessToken(),
-    'tenantId': getTenantId()
+    'tenant-id': getTenantId()
   }
   formLoading.value = true
   uploadRef.value!.submit()
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 3e1dd289..4f04dff5 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,5 +1,7 @@
 <template>
-
+  <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+  <doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
+  <doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
 
   <el-row :gutter="20">
     <!-- 左侧部门树 -->