@epxing/business 5.3.0-beta.1 → 5.3.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epxing/business",
-  "version": "5.3.0-beta.1",
+  "version": "5.3.0-beta.3",
   "description": "平台业务组件与页面（Login/base/custom-bpmn 等；不含 designer 懒注册）",
   "type": "module",
   "exports": {
@@ -10,6 +10,11 @@
       "default": "./dist/src/index.js"
     },
     "./src": "./dist/src/index.js",
+    "./app": {
+      "types": "./types/app.d.ts",
+      "import": "./dist/src/views/App.js",
+      "default": "./dist/src/views/App.js"
+    },
     "./user-find": {
       "types": "./types/user-find.d.ts",
       "import": "./dist/src/components/UserFind.js",
@@ -100,11 +105,12 @@
     "tiny-svg": "^4.1.4",
     "@hufe921/canvas-editor": "^0.9.100",
     "@hufe921/canvas-editor-plugin-docx": "^0.0.5",
-    "@epxing/dashboard": "^5.3.0-beta.1",
-    "@epxing/core": "^5.3.0-beta.1",
-    "@epxing/components": "^5.3.0-beta.1",
-    "@epxing/utils": "^5.3.0-beta.1",
-    "@epxing/theme": "^5.3.0-beta.1"
+    "@epxing/components": "^5.3.0-beta.3",
+    "@epxing/dashboard": "^5.3.0-beta.3",
+    "@epxing/core": "^5.3.0-beta.3",
+    "@epxing/icons": "^5.3.0-beta.3",
+    "@epxing/utils": "^5.3.0-beta.3",
+    "@epxing/theme": "^5.3.0-beta.3"
   },
   "peerDependencies": {
     "vue": "3.5.39",
@@ -123,7 +129,8 @@
     "./dist/src/store/**",
     "./dist/src/mixins/**",
     "./dist/src/runtime-utils/util.js",
-    "./dist/src/runtime-services.js"
+    "./dist/src/runtime-services.js",
+    "./dist/**/*.js"
   ],
   "publishConfig": {
     "access": "public",

package/src/base/AiSkillEditor.vue

@@ -435,6 +435,8 @@ export default {
   name: 'epx-base-ai-skill-editor',
   mixins: [component],
   props: {
+    // 接收父表单实例，避免被作为 DOM 属性透传导致记忆设置渲染失败。
+    form: Object,
     value: {
       type: String,
       default: ''

package/src/base/AppConfigFormItem.vue

@@ -2,18 +2,41 @@
 // @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
 
 import AddFormItem from '@epxing/components/src/add-form-item'
+import TableForm from '@epxing/components/src/form'
+import AppSettings from '@epxing/components/src/app-settings/AppSettings.vue'
+import AppAppearancePreview from '@epxing/components/src/app-settings/AppAppearancePreview.vue'
+import { createAppUiDraft } from '@epxing/core/src/app-ui-settings'
+import { captureRef } from '@epxing/core/src/capture-ref'
 export default {
   name: 'epx-base-app-config-form-item',
   extends: AddFormItem,
+  components: { AppSettings, AppAppearancePreview, TableForm },
   data () {
     return {
       config: {},
-      fieldsConfigs: []
+      fieldsConfigs: [],
+      layoutFieldsConfigs: [],
+      activeGroup: 'theme',
+      uiDraft: {},
+      initialConfig: '{}',
+      syncingDraft: true,
+      settingsGroups: [
+        { key: 'theme', label: '主题与配色' },
+        { key: 'layout', label: '导航与布局' },
+        { key: 'style', label: '界面风格' },
+        { key: 'tabs', label: '页签设置' },
+        { key: 'page', label: '页面与效果' }
+      ]
     }
   },
   computed: {
+    readOnly () { return ['DETAIL', 'READONLY'].includes(this.componentType) },
     showFieldsConfigs () {
-      return this.fieldsConfigs.filter(item => {
+      return this.layoutFieldsConfigs.filter(item => {
+        const themeKeys = ['navBackgroundColorType', 'navBackgroundColor']
+        const pageKeys = ['pageBackgroundType', 'pageBackgroundColor', 'pageBackgroundGradient', 'pageBackgroundImage', 'pageBackgroundSize']
+        const group = themeKeys.includes(item.key) ? 'theme' : pageKeys.includes(item.key) ? 'page' : 'layout'
+        if (group !== this.activeGroup) return false
         let flag = true
         if (item.showFlag) {
           for (const key in item.showFlag) {
@@ -30,10 +53,20 @@ export default {
   watch: {
     config: {
       handler (v) {
+        if (this.syncingDraft || this.readOnly) return
         const APP_CONFIG = JSON.stringify(v)
         this.$emit('change', { ...this.data, APP_CONFIG })
       },
       deep: true
+    },
+    uiDraft: {
+      deep: true,
+      handler (value) {
+        if (!this.syncingDraft && !this.readOnly) this.config.uiDefaults = JSON.parse(JSON.stringify(value))
+      }
+    },
+    'formData.APP_CONFIG' (value) {
+      if (value !== JSON.stringify(this.config)) this.loadConfig(value)
     }
   },
   methods: {
@@ -76,6 +109,7 @@ export default {
           key: 'navBackgroundColor',
           label: '自定义导航背景色',
           type: 'color',
+          showFlag: { navBackgroundColorType: 'custom' },
           predefineColors: []
         },
         {
@@ -188,69 +222,34 @@ export default {
           defaultValue: 992
         }
       ]
-      if (this.appConfig['SYSTEM|TYPE'] === 'hall') {
-        fieldsConfigs.splice(9, 0, {
-          key: 'componentMargin',
-          label: '页面组件间距',
-          type: 'radio',
-          options: [
-            {
-              label: '小',
-              value: 'small'
-            },
-            {
-              label: '中',
-              value: 'medium'
-            },
-            {
-              label: '默认',
-              value: 'base'
-            }
-          ],
-          defaultValue: 'base'
-        },
-        {
-          key: 'borderRadius',
-          label: '圆角',
-          type: 'radio',
-          options: [
-            {
-              label: '无',
-              value: 'zero'
-            },
-            {
-              label: '默认',
-              value: 'base'
-            },
-            {
-              label: '中',
-              value: 'medium'
-            },
-            {
-              label: '大',
-              value: 'large'
-            }
-          ],
-          defaultValue: 'base'
-        })
-      }
       for (const item of fieldsConfigs) {
         item.state = pageType
         if (item.options) item.options = item.options.map(item => ({ id: item.value, code: item.value, name: item.label, preview: item.preview }))
       }
-      this.fieldsConfigs = fieldsConfigs
+      this.layoutFieldsConfigs = fieldsConfigs
+      // 父表单只提交 APP_CONFIG；导航等草稿字段均封装在该 JSON 内。
+      this.fieldsConfigs = [{ attriName: 'APP_CONFIG', state: 'HIDDEN' }]
     },
     changeConfigItem (key, value) {
+      if (this.readOnly) return
       this.config[key] = value
     },
     save () {
+      if (this.readOnly) return
+      // 优先交给父表单整表提交，保留应用的名称、权限等其他字段。
+      if (this.form?.submitForm && !this.isEdit) {
+        this.$nextTick(() => this.form.submitForm())
+        return
+      }
       const params = {}
       const submitFlag = true
       const { submitParams: querySumitParams = {} } = this.$query
       if (this.formData[this.$metaKey]) {
         params[`bean.${this.$metaKey}`] = this.formData[this.$metaKey]
       }
-      params['bean.APP_CONFIG'] = this.formData.APP_CONFIG
+      Object.entries({ ...this.formData, APP_CONFIG: JSON.stringify(this.config) }).forEach(([key, value]) => {
+        params[`bean.${key}`] = value
+      })
 
       // 表单校验
       const { componentEvents = {} } = this.$configs
@@ -276,53 +275,112 @@ export default {
         })
     },
     switchNav (value, item) {
-      if (item.state !== 'DETAIL') {
+      if (!['DETAIL', 'READONLY'].includes(item.state)) {
         this.config[item.key] = value
       }
     },
+    loadConfig (value = '{}') {
+      this.syncingDraft = true
+      const config = JSON.parse(value || '{}')
+      this.initialConfig = JSON.stringify(config)
+      for (const item of this.layoutFieldsConfigs) {
+        if (config[item.key] === undefined && item.defaultValue !== undefined) config[item.key] = item.defaultValue
+      }
+      this.config = config
+      this.uiDraft = createAppUiDraft(config)
+      this.$nextTick(() => { this.syncingDraft = false })
+    },
+    restorePlatform () {
+      if (this.readOnly) return
+      this.uiDraft = createAppUiDraft()
+      const businessKeys = ['appPageType', 'pageId', 'navComponent', 'navOperates', 'mobileSize']
+      for (const field of this.layoutFieldsConfigs) {
+        if (businessKeys.includes(field.key)) continue
+        if (field.defaultValue !== undefined) this.config[field.key] = field.defaultValue
+        else delete this.config[field.key]
+      }
+    },
+    discardDraft () {
+      const initial = this.initialConfig
+      this.loadConfig(initial)
+      this.$emit('change', { ...this.data, APP_CONFIG: initial })
+    },
     renderForm () {
       return (
-        <el-form class="app-config-form" inline label-position="right" label-width="140px">
+        <section class="epx-app-interface-settings">
+          <div hidden>
+            <TableForm ref={captureRef(this, 'form')} fieldsConfigs={this.fieldsConfigs} modelValue={{ ...this.data, APP_CONFIG: JSON.stringify(this.config) }} type="auto" showRelyFlag={false} valueRelyFlag={false} requiredRelyFlag={false} />
+          </div>
+          <div class="epx-app-interface-settings__heading">
+            <p>设置当前应用的默认外观；用户的个人选择优先。右侧预览不会改变当前界面。</p>
+          </div>
+          <div class="epx-app-interface-settings__workspace">
+            <nav class="epx-app-interface-settings__nav" aria-label="界面设置分组">
+              {this.settingsGroups.map(group => (
+                <button type="button" key={group.key} class={{ 'is-active': this.activeGroup === group.key }} aria-current={this.activeGroup === group.key ? 'page' : undefined} onClick={() => { this.activeGroup = group.key }}>{group.label}</button>
+              ))}
+            </nav>
+            <div class="epx-app-interface-settings__editor">
+              <h4>{this.settingsGroups.find(group => group.key === this.activeGroup)?.label}</h4>
+              <AppSettings embedded settings={this.uiDraft} sections={[this.activeGroup]} disabled={this.readOnly} />
+              {this.renderLayoutFields()}
+            </div>
+            <AppAppearancePreview config={this.config} settings={this.uiDraft} title={this.data.NAME || '应用名称'} />
+          </div>
+          {!this.readOnly && <div class="epx-app-interface-settings__actions">
+            <el-button onClick={this.restorePlatform}>恢复平台默认</el-button>
+            <el-button onClick={this.discardDraft}>撤销本次修改</el-button>
+            <el-button type="primary" onClick={this.save}>保存</el-button>
+          </div>}
+        </section>
+      )
+    },
+    renderLayoutFields () {
+      return (
+        <el-form disabled={this.readOnly} class="epx-base-app-config-form-item__form">
           {
             this.showFieldsConfigs.map(item => (
-              <el-form-item label={`${item.label}`} style={item.block ? { width: '100%' } : null}>
-                {
-                  item.key === 'navType' ? (
-                    <div class={['nav-type', { 'is-disabled': item.state === 'DETAIL' }]}>
-                      {
-                        item.options.map(option => (
-                          <div class={['nav-type__item', { 'is-active': this.config[item.key] === option.id }]} key={option.id} onClick={this.switchNav.bind(this, option.id, item)}>
-                            <div>
-                              <img src={option.preview} />
-                            </div>
-                            <p>{option.name}</p>
-                          </div>
-                        ))
-                      }
-                    </div>
-                  ) : item.type === 'radio' ? (
-                    <epx-radio v-model={this.config[item.key]} fieldConfigs={{ state: item.state, attriName: item.key, attriLabel: item.label, options: item.options }}></epx-radio>
-                  ) : item.type === 'object' ? (
-                    <epx-visual-config-object v-model={this.config[item.key]} label={item.label} object={item.object} flag={item.flag} dataKey={item.dataKey} state={item.state}></epx-visual-config-object>
-                  ) : item.type === 'color' ? (
-                    <el-color-picker v-model={this.config[item.key]} predefine={item.predefineColors} disabled={item.state === 'DETAIL'}></el-color-picker>
-                  ) : item.type === 'gradient' ? (
-                    <epx-color-picker v-model={this.config[item.key]} disabled={item.state === 'DETAIL'}></epx-color-picker>
-                  ) : item.type === 'photo' ? (
-                    <epx-photo v-model={this.config[item.key]} fieldConfigs={{ state: item.state, attriName: item.key, attriLabel: item.label }}></epx-photo>
-                  ) : item.type === 'num' ? (
-                    <epx-number v-model={this.config[item.key]} fieldConfigs={{ state: item.state, attriName: item.key, attriLabel: item.label, value: item.defaultValue }}></epx-number>
-                  ) : item.type === 'operates' ? (
-                    <epx-visual-config-operate
-                      value={this.config[item.key]}
-                      state={item.state}
-                      onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
-                    />
-                  ) : (
-                    <epx-input class="input" v-model={this.config[item.key]} fieldConfigs={{ state: item.state, attriName: item.key, attriLabel: item.label }}></epx-input>
-                  )
-                }
-              </el-form-item>
+              <div key={item.key} class={['epx-app-interface-settings__field', { 'epx-app-interface-settings__field--block': item.block || item.type === 'radio' }]}>
+                <span class="epx-app-interface-settings__label">{item.label}</span>
+                <div class="epx-app-interface-settings__control">
+                  {
+                    item.key === 'navType' ? (
+                      <div class="nav-type" role="group" aria-label={item.label}>
+                        {
+                          item.options.map(option => (
+                            <button type="button" class={['nav-type__item', { 'is-active': this.config[item.key] === option.id }]} key={option.id} disabled={this.readOnly} aria-pressed={this.config[item.key] === option.id} onClick={this.switchNav.bind(this, option.id, item)}>
+                              <img src={option.preview} alt="" />
+                              <span>{option.name}</span>
+                            </button>
+                          ))
+                        }
+                      </div>
+                    ) : item.type === 'radio' ? (
+                      <el-radio-group v-model={this.config[item.key]} size="small" aria-label={item.label}>
+                        {item.options.map(option => <el-radio-button key={option.id} value={option.id}>{option.name}</el-radio-button>)}
+                      </el-radio-group>
+                    ) : item.type === 'object' ? (
+                      <epx-visual-config-object value={this.config[item.key]} onChangeConfigs={this.changeConfigItem.bind(this, item.key)} label={item.label} object={item.object} flag={item.flag} dataKey={item.dataKey} state={item.state}></epx-visual-config-object>
+                    ) : item.type === 'color' ? (
+                      <el-color-picker v-model={this.config[item.key]} predefine={item.predefineColors} disabled={this.readOnly}></el-color-picker>
+                    ) : item.type === 'gradient' ? (
+                      <epx-color-picker v-model={this.config[item.key]} disabled={this.readOnly}></epx-color-picker>
+                    ) : item.type === 'photo' ? (
+                      <epx-photo v-model={this.config[item.key]} fieldConfigs={{ state: item.state, attriName: item.key, attriLabel: item.label }}></epx-photo>
+                    ) : ['num', 'number'].includes(item.type) ? (
+                      <epx-number v-model={this.config[item.key]} fieldConfigs={{ state: item.state, attriName: item.key, attriLabel: item.label, value: item.defaultValue }}></epx-number>
+                    ) : item.type === 'operates' ? (
+                      <epx-visual-config-operate
+                        value={this.config[item.key]}
+                        state={item.state}
+                        onChangeConfigs={this.changeConfigItem.bind(this, item.key)}
+                      />
+                    ) : (
+                      <epx-input class="input" v-model={this.config[item.key]} fieldConfigs={{ state: item.state, attriName: item.key, attriLabel: item.label }}></epx-input>
+                    )
+                  }
+                </div>
+              </div>
             ))
           }
 
@@ -331,74 +389,82 @@ export default {
     }
   },
   created () {
-    const { APP_CONFIG = '{}' } = this.data
-    const appConfig = JSON.parse(APP_CONFIG)
-    for (const item of this.fieldsConfigs) {
-      if (!appConfig[item.key] && item.defaultValue) {
-        appConfig[item.key] = item.defaultValue
-      }
-    }
-    this.config = appConfig
+    this.loadConfig(this.data.APP_CONFIG)
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.app-config-form {
-
-    :deep(.el-form-item) {
-      padding: 10px;
-      width: calc(50% - 30px);
-      margin-bottom: 0;
-    }
-    :deep(.el-form-item__label::after) {
-      content: ': '
-    }
-
-}
-
-.nav-type {
-  display: flex;
-  flex-wrap: wrap;
-  &.is-disabled {
-    .nav-type__item {
-      >div {
-        cursor: not-allowed;
-      }
-    }
+<style lang="scss">
+// 通过表单根类隔离样式，避免继承渲染时丢失 scoped 标记导致预览恢复原图尺寸。
+.epx-base-app-config-form-item__form {
+  .nav-type {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--epx-space-2);
   }
-}
 
-.nav-type__item {
-  width: 200px;
-  margin-right: 20px;
-  text-align: center;
-  >div {
-    background: #eee;
+  .nav-type__item {
+    min-width: 0;
+    padding: var(--epx-space-1);
+    text-align: center;
+    font: inherit;
+    font-size: var(--epx-font-size-s);
+    color: var(--epx-text-secondary);
+    background: transparent;
+    border: 1px solid var(--epx-border);
     border-radius: var(--epx-radius-base);
-    border: 1px solid transparent;
-    overflow: hidden;
     cursor: pointer;
-    transition: all .5s;
-  }
-  img {
-    width: 100%;
-    opacity: 0.5;
-    transition: all .5s;
-  }
-  &:hover {
     img {
-      opacity: 1;
+      display: block;
+      width: 100%;
+      aspect-ratio: 10 / 7;
+      object-fit: contain;
+      margin-bottom: var(--epx-space-1);
     }
-  }
-  &.is-active {
-    @include font_color_primary;
-    >div {
+    &:focus-visible {
+      outline: 2px solid var(--el-color-primary);
+      outline-offset: 2px;
+    }
+    &:hover:not(:disabled), &.is-active {
+      @include font_color_primary;
       @include border_color_primary;
     }
-    img {
-      opacity: 1;
+    &:disabled {
+      cursor: not-allowed;
+      opacity: .6;
     }
   }
 }
+
+.epx-app-interface-settings {
+  &__heading { margin-bottom: 20px; }
+  &__heading p { margin: 0; color: var(--el-text-color-secondary); font-size: 13px; }
+  &__workspace { display: grid; grid-template-columns: 140px minmax(300px, 1fr) minmax(300px, 420px); gap: 20px; align-items: start; }
+  &__nav { display: flex; flex-direction: column; gap: 6px; }
+  &__nav button { border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; padding: 12px; cursor: pointer; }
+  &__nav button.is-active { background: var(--el-color-primary-light-9); color: var(--el-color-primary); }
+  &__editor { min-width: 0; }
+  &__editor h4 { margin: 0 0 12px; }
+  &__field { display: flex; align-items: center; justify-content: space-between; gap: var(--epx-space-2); min-height: 40px; padding: var(--epx-space-1) var(--epx-space-4); }
+  &__label { flex-shrink: 0; font-size: var(--epx-font-size-base); color: var(--epx-text); }
+  &__control { min-width: 0; max-width: 100%; }
+  &__field--block { flex-direction: column; align-items: stretch; padding-bottom: var(--epx-space-2); }
+  &__field--block .el-radio-group { display: flex; width: 100%; }
+  &__field--block .el-radio-button { flex: 1; }
+  &__field--block .el-radio-button__inner { width: 100%; padding-left: 0; padding-right: 0; }
+  &__control .el-input-number { width: 150px; }
+  &__editor .epx-app-settings__body { padding: 0; }
+  &__editor .el-collapse { border: 0; }
+  &__editor .el-collapse-item__header { display: none; }
+  &__actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--el-border-color-light); padding-top: 16px; margin-top: 20px; }
+  @media (max-width: 1200px) {
+    &__workspace { grid-template-columns: 130px minmax(0, 1fr); }
+    .epx-app-appearance-preview { grid-column: 2; }
+  }
+  @media (max-width: 650px) {
+    &__workspace { display: flex; flex-direction: column; }
+    &__nav { flex-direction: row; flex-wrap: wrap; }
+    &__editor, .epx-app-appearance-preview { width: 100%; }
+  }
+}
 </style>

package/src/base/CommonFieldList.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="jsx">
 // @jsx-vue3（T30 JSX 批③：scopedSlots 集群 Vue3 化）
 import EntitySubList from '@epxing/components/src/entity-sub-list'
 import draggable from '@epxing/core/src/components/draggable'
@@ -324,7 +324,7 @@ export default {
           modelValue={this.showFieldDialog}
           {...{ 'onUpdate:modelValue': v => { this.showFieldDialog = v } }}
           append-to-body={true}
-          class="show-field-dialog"
+          class="show-field-dialog epx-common-field-dialog"
           destroy-on-close
           width="800px"
           top="10vh"
@@ -402,7 +402,7 @@ export default {
     },
     renderNameDialog () {
       return (
-        <el-dialog modelValue={this.addCommonFieldDialod} {...{ 'onUpdate:modelValue': v => { this.addCommonFieldDialod = v } }} width="400px" title="新增常用导出字段" v-slots={{
+        <el-dialog class="epx-common-field-dialog" modelValue={this.addCommonFieldDialod} {...{ 'onUpdate:modelValue': v => { this.addCommonFieldDialod = v } }} width="400px" title="新增常用导出字段" v-slots={{
           footer: () => (<span class="dialog-footer">
             <el-button onClick={() => { this.addCommonFieldDialod = false }}>取 消</el-button>
             <el-button type="primary" onClick={this.saveCommonField.bind(this)}>确 定</el-button>
@@ -1248,7 +1248,9 @@ $paddingSize: 16px;
 }
 </style>
 
-<style scoped lang="scss">
+<style lang="scss">
+// 父类调用渲染函数时不会附加本组件的 scoped 标记，弹窗使用独立容器限定样式。
+.epx-common-field-dialog {
 .field-setting {
   display: flex;
   width: 100%;
@@ -1301,7 +1303,7 @@ $paddingSize: 16px;
   flex: 1;
   overflow: auto;
 
-    :deep(.el-tree-node__content) {
+    .el-tree-node__content {
       height: 48px;
     }
 
@@ -1342,7 +1344,7 @@ $paddingSize: 16px;
 .setting-field__row {
   margin-bottom: 10px;
 
-    :deep(>.el-form-item) {
+    >.el-form-item {
       vertical-align: auto;
       width: 100%;
       display: flex;
@@ -1394,4 +1396,5 @@ $paddingSize: 16px;
     width: 90px;
   }
 }
+}
 </style>

package/src/base/ConfigModuleIndex.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="content" v-if="data.ID">
       <keep-alive>
-        <epx-menu id="menu" v-if="showMenu && uiShowSideNav" :showNav="false" class="aside hidden-sm-and-down" :modules="menu" :moduleName="`${data.NAME || $t('application')}${$t('configuration')}`" :subTitle="data['CLIENT#']" :toPages="toPages" :clickItem="toPage"></epx-menu>
+        <epx-menu id="menu" v-if="showMenu && uiShowSideNav" :showNav="false" class="aside hidden-sm-and-down" :modules="menu" :activeMenuId="configMenuKey" :moduleName="`${data.NAME || $t('application')}${$t('configuration')}`" :subTitle="data['CLIENT#']" :toPages="toPages" :clickItem="toPage"></epx-menu>
       </keep-alive>
       <div class="main">
         <epx-router-view ref="router" v-if="menu.length>0" :init-route="initRoute"></epx-router-view>
@@ -20,6 +20,7 @@
 <script>
 import ModuleIndexVue from '@epxing/components/src/menu-index'
 import { openExternalMenu } from '@epxing/utils/src/menu-open'
+import { findMenuByKey, getRouteMenuKey } from '@epxing/core/src/menu-route'
 const _comp = {
   name: 'epx-base-config-module-index',
   extends: ModuleIndexVue,
@@ -28,7 +29,42 @@ const _comp = {
       data: {}
     }
   },
+  computed: {
+    configMenuKey () {
+      return this.$route.name === 'system' ? getRouteMenuKey(this.$route) : ''
+    },
+    initRoute () {
+      const menu = findMenuByKey(this.menu, this.configMenuKey)
+      if (menu && menu.OPEN_TYPE !== '1') {
+        return { moduleId: menu.ID, component: 'module-list-page', pageId: menu.MAIN_PAGE, menuTitle: menu.text }
+      }
+      return ModuleIndexVue.computed.initRoute.call(this)
+    }
+  },
+  watch: {
+    configMenuKey: 'restoreMenuFromRoute',
+    menu: 'restoreMenuFromRoute',
+    'data.ID': 'restoreMenuFromRoute'
+  },
   methods: {
+    restoreMenuFromRoute () {
+      if (this.$route.name !== 'system') return
+      // 等专用菜单和系统上下文就绪后，沿用原有点击入口，保留页面参数与打开方式。
+      this.$nextTick(() => {
+        const view = this.$refs.router
+        if (!view || !this.data.ID) return
+        const menu = findMenuByKey(this.menu, this.configMenuKey)
+        if (menu) {
+          if (view.route?.moduleId === menu.ID) return
+          const activeTab = this.$tabs.find(tab => tab.active)
+          if (menu.OPEN_TYPE === '1' && activeTab?.moduleId === menu.ID) return
+          this.toPage(menu)
+        } else if (!this.configMenuKey) {
+          view.clearPage()
+          view.createPage(this.initRoute)
+        }
+      })
+    },
     getInfo () {
       const { name, params = {}, query = {} } = this.$route
       const { system: querySystem = '' } = query