feat 支持内部页面通过外部打开

2025-09-07 12:48:06 +00:00 · 2022-11-23 21:26:00 +08:00
parent 1ae75d1a46
commit 06b1edb140
16 changed files with 576 additions and 51 deletions
--- a/src/components/SimpleMenu/src/SimpleMenu.vue
+++ b/src/components/SimpleMenu/src/SimpleMenu.vue
@@ -24,7 +24,7 @@
  import { propTypes } from '/@/utils/propTypes'
  import { REDIRECT_NAME } from '/@/router/constant'
  import { useRouter } from 'vue-router'
-  import { isFunction, isUrl } from '/@/utils/is'
+  import { isFunction, isOutsideUrl, isUrl } from "/@/utils/is";
  import { openWindow } from '/@/utils'

  import { useOpenKeys } from './useOpenKeys'
@@ -116,9 +116,14 @@
        setOpenKeys(path)
      }

+      /**
+       * 点击菜单
+       */
      async function handleSelect(key: string) {
-        if (isUrl(key)) {
-          openWindow(key)
+        // 判断是否需要通过外部打开
+        const path = isOutsideUrl(key)
+        if (path) {
+          openWindow(path)
          return
        }
        const { beforeClickFn } = props
--- a/src/hooks/web/usePage.ts
+++ b/src/hooks/web/usePage.ts
@@ -19,6 +19,7 @@ function handleError(e: Error) {
 export function useGo(_router?: Router) {
  const { push, replace } = _router || useRouter()
  function go(opt: RouteLocationRawEx = PageEnum.BASE_HOME, isReplace = false) {
+    // console.log(opt,isReplace)
    if (!opt) {
      return
    }
--- a/src/router/helper/menuHelper.ts
+++ b/src/router/helper/menuHelper.ts
@@ -2,7 +2,7 @@ import { AppRouteModule } from '/@/router/types'
 import type { MenuModule, Menu, AppRouteRecordRaw } from '/@/router/types'
 import { findPath, treeMap } from '/@/utils/helper/treeHelper'
 import { cloneDeep } from 'lodash-es'
-import { isUrl } from '/@/utils/is'
+import { isOutsideUrl } from '/@/utils/is'
 import { RouteParams } from 'vue-router'
 import { toRaw } from 'vue'
 import { PermMenu } from '/@/api/sys/model/menuModel'
@@ -23,9 +23,9 @@ function joinParentPath(menus: Menu[], parentPath = '') {
    // 请注意，以 / 开头的嵌套路径将被视为根路径。
    // This allows you to leverage the component nesting without having to use a nested URL.
    // 这允许你利用组件嵌套，而无需使用嵌套 URL。
-    if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
+    if (!(menu.path.startsWith('/') || isOutsideUrl(menu.path))) {
      // path doesn't start with /, nor is it a url, join parent path
-      // 路径不以 / 开头，也不是 url，加入父路径
+      // 路径不以 / 开头，也不是外部打开的路径，加入父路径
      menu.path = `${parentPath}/${menu.path}`
    }
    if (menu?.children?.length) {
--- a/src/router/helper/routeHelper.ts
+++ b/src/router/helper/routeHelper.ts
@@ -5,6 +5,7 @@ import { getParentLayout, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant
 import { cloneDeep, omit } from 'lodash-es'
 import { warn } from '/@/utils/log'
 import { createRouter, createWebHashHistory } from 'vue-router'
+import XEUtils from 'xe-utils'

 const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue')

@@ -24,6 +25,10 @@ function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
  if (!routes) return
  routes.forEach((item) => {
    const { component, name } = item
+    // 名称为空就随机生成
+    if (!item.name) {
+      item.name = String(XEUtils.random(1, 999999))
+    }
    // 内部打开, 是否是 Iframe 方式, redirect配置作为内部打开的地址
    if ((item.component as string).toUpperCase() === 'IFRAME') {
      item.meta.frameSrc = item.redirect
--- a/src/router/routes/modules/dashboard.ts
+++ b/src/router/routes/modules/dashboard.ts
--- a/src/router/routes/modules/system.ts
+++ b/src/router/routes/modules/system.ts
@@ -1,33 +0,0 @@
-import type { AppRouteModule } from '/@/router/types'
-import { LAYOUT } from '/@/router/constant'
-
-const system: AppRouteModule = {
-  path: '/system1',
-  name: 'System1',
-  component: LAYOUT,
-  redirect: '/system1/client',
-  meta: {
-    icon: 'simple-icons:about-dot-me',
-    title: '系统管理1',
-  },
-  children: [
-    {
-      path: 'client',
-      name: 'ClientList',
-      component: () => import('/@/views/modules/system/client/ClientList.vue'),
-      meta: {
-        title: '终端管理',
-      },
-    },
-    {
-      path: 'loginType',
-      name: 'LoginTypeList',
-      component: () => import('/@/views/modules/system/loginType/LoginTypeList.vue'),
-      meta: {
-        title: '登录方式',
-      },
-    },
-  ],
-}
-
-export default system
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -119,7 +119,7 @@ const setting: ProjectConfig = {

  // 多标签配置
  multiTabsSetting: {
-    // 缓存
+    // 缓存 自动还原原来已打开的标签
    cache: false,
    // Turn on
    show: true,
--- a/src/store/modules/multipleTab.ts
+++ b/src/store/modules/multipleTab.ts
@@ -28,7 +28,6 @@ function handleGotoPage(router: Router) {

 const getToTarget = (tabItem: RouteLocationNormalized) => {
  const { params, path, query } = tabItem
-  console.log(123)
  return {
    params: params || {},
    path,
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -15,6 +15,7 @@ export function getPopupContainer(node?: HTMLElement): HTMLElement {

 /**
 * Add the object as a parameter to the URL
+ * 将对象作为参数添加到URL
 * @param baseUrl url
 * @param obj
 * @returns {string}
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -1,3 +1,5 @@
+import { router } from '/@/router'
+
 const toString = Object.prototype.toString

 export function is(val: unknown, type: string) {
@@ -97,3 +99,20 @@ export function isUrl(path: string): boolean {
    /^(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?(\/#\/)?(?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
  return reg.test(path)
 }
+
+/**
+ * 是否从外部打开的链接
+ * @return 打开的地址, 为空字符则说明无法打开
+ */
+export function isOutsideUrl(path: string): string {
+  if (isUrl(path)) {
+    return path
+  }
+  if (path.startsWith('outside://')) {
+    // 转换成项目内路由地址
+    const routerPath = path.substring(11)
+    const to = router.resolve(routerPath)
+    return to.href
+  }
+  return ''
+}
--- a/src/views/modules/payment/channel/alipay/AlipayConfigList.vue
+++ b/src/views/modules/payment/channel/alipay/AlipayConfigList.vue
@@ -34,7 +34,7 @@
            <a-tag color="red" v-else>未启用</a-tag>
          </template>
        </vxe-column>
-        <vxe-column fixed="right" width="200" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="180" :showOverflow="false" title="操作">
          <template #default="{ row }">
            <a-link @click="show(row)">查看</a-link>
            <a-divider type="vertical" />
@@ -81,7 +81,7 @@
  import { FormEditType } from '/@/enums/formTypeEnum'
  import { useMessage } from '/@/hooks/web/useMessage'
  import { QueryField } from '/@/components/Bootx/Query/Query'
-  import ALink from "/@/components/Link/Link.vue";
+  import ALink from '/@/components/Link/Link.vue'

  // 使用hooks
  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
--- a/src/views/modules/payment/channel/wechat/WechatPayConfig.api.ts
+++ b/src/views/modules/payment/channel/wechat/WechatPayConfig.api.ts
@@ -0,0 +1,137 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity, KeyValue } from '/#/web'
+
+/**
+ * 分页
+ */
+export function page(params) {
+  return defHttp.get<Result<PageResult<WechatPayConfig>>>({
+    url: '/wechat/pay/page',
+    params,
+  })
+}
+
+/**
+ * 查询全部
+ */
+export function findAll() {
+  return defHttp.get<Result<WechatPayConfig[]>>({
+    url: '/wechat/pay/findAll',
+  })
+}
+
+/**
+ * 获取单条
+ */
+export function get(id) {
+  return defHttp.get<Result<WechatPayConfig>>({
+    url: '/wechat/pay/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export function add(obj: WechatPayConfig) {
+  return defHttp.post({
+    url: '/wechat/pay/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export function update(obj: WechatPayConfig) {
+  return defHttp.post({
+    url: '/wechat/pay/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export function del(id) {
+  return defHttp.delete({
+    url: '/wechat/pay/delete',
+    params: { id },
+  })
+}
+
+/**
+ * 获取微信支持支付方式
+ */
+export function findPayWayList() {
+  return defHttp.get<Result<KeyValue[]>>({
+    url: '/wechat/pay/findPayWayList',
+  })
+}
+
+/**
+ * 启用指定的微信配置
+ */
+export function setUpActivity(id) {
+  return defHttp.post({
+    url: '/wechat/pay/setUpActivity',
+    params: { id },
+  })
+}
+
+/**
+ * 清除指定的微信配置
+ */
+export function clearActivity(id) {
+  return defHttp.post({
+    url: '/wechat/pay/clearActivity',
+    params: { id },
+  })
+}
+
+/**
+ * 微信支付配置
+ */
+export interface WechatPayConfig extends BaseEntity {
+  // 名称
+  name?: string
+  // 微信应用AppId
+  appId?: string
+  // 商户号
+  mchId?: string
+  // 服务商应用编号
+  apiVersion?: string
+  // 商户平台「API安全」中的 APIv2 密钥
+  apiKeyV2?: string
+  // 商户平台「API安全」中的 APIv3 密钥
+  apiKeyV3?: string
+  // APPID对应的接口密码，用于获取接口调用凭证access_token时使用
+  appSecret?: string
+  // p12的文件id
+  p12?: string | null
+  // API 证书中的 cert.pem
+  certPem?: string
+  // API 证书中的 key.pem
+  keyPem?: string
+  // 应用域名，回调中会使用此参数
+  domain?: string
+  // 服务器异步通知页面路径
+  notifyUrl?: string
+  // 页面跳转同步通知页面路径
+  returnUrl?: string
+  // 支持的支付类型
+  payWays?: string
+  // 是否沙箱环境
+  sandbox?: boolean
+  // 超时配置
+  expireTime?: number
+  // 支持的支付类型
+  payWayList?: KeyValue[]
+  // 是否启用
+  activity?: boolean
+  // 状态
+  state?: number
+  // 备注
+  remark?: string
+}
--- a/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
+++ b/src/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue
@@ -0,0 +1,208 @@
+<template>
+  <basic-drawer
+    showFooter
+    v-bind="$attrs"
+    :title="title"
+    :width="modalWidth"
+    :visible="visible"
+    :maskClosable="false"
+    @close="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form
+        class="small-from-item"
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :validate-trigger="['blur', 'change']"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="主键" :hidden="true">
+          <a-input v-model:value="form.id" :disabled="showable" />
+        </a-form-item>
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
+        </a-form-item>
+        <a-form-item label="微信应用AppId" name="appId">
+          <a-input v-model:value="form.appId" :disabled="showable" placeholder="请输入微信应用AppId" />
+        </a-form-item>
+        <a-form-item label="商户号" name="mchId">
+          <a-input v-model:value="form.mchId" :disabled="showable" placeholder="请输入商户号" />
+        </a-form-item>
+        <a-form-item label="服务商应用编号" name="apiVersion">
+          <a-input v-model:value="form.apiVersion" :disabled="showable" placeholder="请输入服务商应用编号" />
+        </a-form-item>
+        <a-form-item label="商户平台「API安全」中的 APIv2 密钥" name="apiKeyV2">
+          <a-input v-model:value="form.apiKeyV2" :disabled="showable" placeholder="请输入商户平台「API安全」中的 APIv2 密钥" />
+        </a-form-item>
+        <a-form-item label="商户平台「API安全」中的 APIv3 密钥" name="apiKeyV3">
+          <a-input v-model:value="form.apiKeyV3" :disabled="showable" placeholder="请输入商户平台「API安全」中的 APIv3 密钥" />
+        </a-form-item>
+        <a-form-item label="APPID对应的接口密码，用于获取接口调用凭证access_token时使用" name="appSecret">
+          <a-input
+            v-model:value="form.appSecret"
+            :disabled="showable"
+            placeholder="请输入APPID对应的接口密码，用于获取接口调用凭证access_token时使用"
+          />
+        </a-form-item>
+        <a-form-item label="p12的文件id" name="p12">
+          <a-input v-model:value="form.p12" :disabled="showable" placeholder="请输入p12的文件id" />
+        </a-form-item>
+        <a-form-item label="API 证书中的 cert.pem" name="certPem">
+          <a-input v-model:value="form.certPem" :disabled="showable" placeholder="请输入API 证书中的 cert.pem" />
+        </a-form-item>
+        <a-form-item label="API 证书中的 key.pem" name="keyPem">
+          <a-input v-model:value="form.keyPem" :disabled="showable" placeholder="请输入API 证书中的 key.pem" />
+        </a-form-item>
+        <a-form-item label="应用域名，回调中会使用此参数" name="domain">
+          <a-input v-model:value="form.domain" :disabled="showable" placeholder="请输入应用域名，回调中会使用此参数" />
+        </a-form-item>
+        <a-form-item label="服务器异步通知页面路径" name="notifyUrl">
+          <a-input v-model:value="form.notifyUrl" :disabled="showable" placeholder="请输入服务器异步通知页面路径" />
+        </a-form-item>
+        <a-form-item label="页面跳转同步通知页面路径" name="returnUrl">
+          <a-input v-model:value="form.returnUrl" :disabled="showable" placeholder="请输入页面跳转同步通知页面路径" />
+        </a-form-item>
+        <a-form-item label="支持的支付类型" name="payWays">
+          <a-input v-model:value="form.payWays" :disabled="showable" placeholder="请输入支持的支付类型" />
+        </a-form-item>
+        <a-form-item label="是否沙箱环境" name="sandbox">
+          <a-input v-model:value="form.sandbox" :disabled="showable" placeholder="请输入是否沙箱环境" />
+        </a-form-item>
+        <a-form-item label="超时配置" name="expireTime">
+          <a-input v-model:value="form.expireTime" :disabled="showable" placeholder="请输入超时配置" />
+        </a-form-item>
+        <a-form-item label="是否启用" name="activity">
+          <a-input v-model:value="form.activity" :disabled="showable" placeholder="请输入是否启用" />
+        </a-form-item>
+        <a-form-item label="状态" name="state">
+          <a-input v-model:value="form.state" :disabled="showable" placeholder="请输入状态" />
+        </a-form-item>
+        <a-form-item label="备注" name="remark">
+          <a-input v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </basic-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { computed, nextTick, reactive } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { add, get, update, WechatPayConfig } from './WechatPayConfig.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicDrawer } from '/@/components/Drawer'
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    diffForm,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let rawForm
+  let form = $ref({
+    id: null,
+    name: '',
+    mchId: '',
+    appId: '',
+    appSecret: '',
+    apiVersion: 'api_v2',
+    p12: null,
+    apiKeyV2: '',
+    apiKeyV3: '',
+    keyPem: '',
+    certPem: '',
+    domain: '',
+    notifyUrl: '',
+    returnUrl: '',
+    expireTime: 15,
+    payWayList: [],
+    sandbox: false,
+    remark: '',
+  } as WechatPayConfig)
+  // 校验
+  const rules = computed(() => {
+    return {
+      name: [{ required: true, message: '请输入配置名称' }],
+      mchId: [{ required: true, message: '请输入商户号' }],
+      appId: [{ required: true, message: '请输入应用编号' }],
+      notifyUrl: [{ required: true, message: '请输入异步通知页面地址' }],
+      returnUrl: [{ required: true, message: '请输入同步通知页面地址' }],
+      domain: [{ required: true, message: '请输入请求应用域名' }],
+      // apiVersion: [ { required: true, message: '请选择API版本' } ],
+      apiKeyV2: [{ required: form.apiVersion === 'api_v2', message: '请输入V2秘钥' }],
+      apiKeyV3: [{ required: form.apiVersion === 'api_v3', message: '请输入V3秘钥' }],
+      // keyPem: [ { required: true, message: '请填入私钥内容' } ],
+      // certPem: [ { required: true, message: '请填入证书内容' } ],
+      sandbox: [{ required: true, message: '请选择是否为沙箱环境' }],
+      expireTime: [{ required: true, message: '请输入默认超时配置' }],
+      payWayList: [{ required: true, message: '请选择支持的支付类型' }],
+    } as Record<string, Rule[]>
+  })
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id, editType: FormEditType) {
+    initFormEditType(editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 获取信息
+  function getInfo(id, editType: FormEditType) {
+    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        rawForm = { ...data }
+        form = data
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  function handleOk() {
+    formRef.validate().then(async () => {
+      confirmLoading.value = true
+      if (formEditType.value === FormEditType.Add) {
+        await add(form)
+      } else if (formEditType.value === FormEditType.Edit) {
+        await update({ ...form, ...diffForm(rawForm, form, 'phone', 'email') })
+      }
+      confirmLoading.value = false
+      handleCancel()
+      emits('ok')
+    })
+  }
+
+  // 重置表单
+  function resetForm() {
+    nextTick(() => {
+      formRef.resetFields()
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>
--- a/src/views/modules/payment/channel/wechat/WechatPayConfigList.vue
+++ b/src/views/modules/payment/channel/wechat/WechatPayConfigList.vue
@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="name" title="名称" />
+        <vxe-column field="mchId" title="商户号" />
+        <vxe-column field="appId" title="应用编号" />
+        <!--      <vxe-column field="apiVersion" title="API版本" >-->
+        <!--        <template v-slot="{row}">-->
+        <!--          {{ dictConvert('wechatApiVersion',row.apiVersion) }}-->
+        <!--        </template>-->
+        <!--      </vxe-column>-->
+        <vxe-column field="sandbox" title="沙箱">
+          <template #default="{ row }">
+            <a-tag v-if="row.sandbox">是</a-tag>
+            <a-tag v-else>否</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="activity" title="活动状态">
+          <template #default="{ row }">
+            <a-tag color="green" v-if="row.activity">启用</a-tag>
+            <a-tag color="red" v-else>未启用</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column field="createTime" title="创建时间" />
+        <vxe-column fixed="right" width="180" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a-link @click="show(row)">查看</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <span>
+              <a-link @click="edit(row)">编辑</a-link>
+            </span>
+            <a-divider type="vertical" />
+            <a-dropdown>
+              <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /></a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a-link v-if="!row.activity" @click="setup(row)">启用</a-link>
+                    <a-link v-else danger @click="clear(row)">停用</a-link>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-link danger @click="remove(row)">删除</a-link>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <wechat-pay-config-edit ref="wechatPayConfigEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { del, page, clearActivity, setUpActivity } from './WechatPayConfig.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import WechatPayConfigEdit from './WechatPayConfigEdit.vue'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { QueryField, STRING } from '/@/components/Bootx/Query/Query'
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  // 查询条件
+  const fields = [
+    { field: 'name', type: STRING, name: '名称', placeholder: '请输入名称' },
+    { field: 'appId', type: STRING, name: 'AppId', placeholder: '请输入AppId' },
+    { field: 'mchId', type: STRING, name: '商户号', placeholder: '请输入商户号' },
+  ] as QueryField[]
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const wechatPayConfigEdit = $ref<any>()
+
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable.connect(xToolbar)
+  }
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    wechatPayConfigEdit.init(null, FormEditType.Add)
+  }
+  // 编辑
+  function edit(record) {
+    wechatPayConfigEdit.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    wechatPayConfigEdit.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  function remove(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否删除该数据',
+      onOk: () => {
+        del(record.id).then(() => {
+          createMessage.success('删除成功')
+          queryPage()
+        })
+      },
+    })
+  }
+  function setup(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否启用此配置',
+      onOk: () => {
+        loading.value = true
+        setUpActivity(record.id).then(() => {
+          queryPage()
+        })
+      },
+    })
+  }
+  function clear(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否停用此配置',
+      onOk: () => {
+        loading.value = true
+        clearActivity(record.id).then(() => {
+          queryPage()
+        })
+      },
+    })
+  }
+</script>
+
+<style lang="less" scoped></style>
--- a/src/views/modules/system/menu/MenuEdit.vue
+++ b/src/views/modules/system/menu/MenuEdit.vue
@@ -29,18 +29,24 @@
            <basic-title
              helpMessage="此处名称应和vue组件的name属性保持一致。
              路由名称不能重复，主要用于路由缓存功能。
-              如果路由名称和vue组件的name属性不一致，则会导致路由缓存失效。"
+              如果路由名称和vue组件的name属性不一致，则会导致路由缓存失效。不填则随机自动生成"
              >路由名称</basic-title
            >
          </template>
          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入路由名称" />
        </a-form-item>
-        <a-form-item label="访问路径" name="path">
+        <a-form-item name="path">
+          <template #label>
+            <basic-title
+              helpMessage="输入网址或以outside://开头会的路径从外部打开页面，请求路径后添加?onlytab=1&__full__参数后，只显示显示标签页内容，"
+              >访问路径</basic-title
+            >
+          </template>
          <a-input v-model:value="form.path" :disabled="showable" placeholder="请输入访问路径" />
        </a-form-item>
        <a-form-item name="component">
          <template #label>
-            <basic-title help-message="Layout 和 Iframe可以直接输入，为空为在新页面打开访问地址，自定义组件需要输入/src/views/下的全路径">
+            <basic-title help-message="Layout 和 Iframe可以直接输入，新页面打开访问地址为空不填写，自定义组件需要输入/src/views/下的全路径">
              组件
            </basic-title>
          </template>
@@ -115,7 +121,7 @@
    return {
      parentId: [{ required: form.menuType === 1, message: '请选择父级菜单', trigger: ['blur', 'change'] }],
      title: [{ required: true, message: '请输入菜单名称', trigger: ['blur', 'change'] }],
-      name: [{ required: true, message: '请输入路由名称', trigger: ['blur', 'change'] }],
+      // name: [{ required: true, message: '请输入路由名称', trigger: ['blur', 'change'] }],
      path: [{ required: true, message: '请输入菜单路径', trigger: ['blur', 'change'] }],
      url: [{ required: true, message: '请输入菜单路径', trigger: ['blur', 'change'] }],
    } as Record<string, Rule[]>
--- a/types/vue-router.d.ts
+++ b/types/vue-router.d.ts
@@ -23,13 +23,13 @@ declare module 'vue-router' {
    frameSrc?: string
    // current page transition 当前页面转换
    transitionName?: string
-    // Whether the route has been dynamically added
+    // 路由是否已动态添加 Whether the route has been dynamically added
    hideBreadcrumb?: boolean
-    // Hide submenu
+    // 隐藏子菜单 Hide submenu
    hideChildrenInMenu?: boolean
-    // Carrying parameters
+    // 携带参数 Carrying parameters
    carryParam?: boolean
-    // Used internally to mark single-level menus
+    // 内部用于标记单层菜单 Used internally to mark single-level menus
    single?: boolean
    // Currently active menu
    currentActiveMenu?: string