perf(projects): manage menu: add transform to component

src/views/manage/menu/modules/menu-operate-drawer.vue

@@ -6,7 +6,7 @@ import { $t } from '@/locales';
 import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 import { getLocalIcons } from '@/utils/icon';
-import { getLayoutAndPage } from './shared';
+import { getLayoutAndPage, transformLayoutAndPageToComponent } from './shared';
 
 defineOptions({
   name: 'MenuOperateDrawer'
@@ -162,6 +162,9 @@ function closeDrawer() {
 
 async function handleSubmit() {
   await validate();
+
+  model.component = transformLayoutAndPageToComponent(model.layout, model.page);
+
   // request
   window.$message?.success($t('common.updateSuccess'));
   closeDrawer();

src/views/manage/menu/modules/shared.ts

@@ -1,9 +1,8 @@
 const LAYOUT_PREFIX = 'layout.';
 const VIEW_PREFIX = 'view.';
+const FIRST_LEVEL_ROUTE_COMPONENT_SPLIT = '$';
 
 export function getLayoutAndPage(component?: string | null) {
-  const FIRST_LEVEL_ROUTE_COMPONENT_SPLIT = '$';
-
   let layout = '';
   let page = '';
 
@@ -22,3 +21,22 @@ function getLayout(layout: string) {
 function getPage(page: string) {
   return page.startsWith(VIEW_PREFIX) ? page.replace(VIEW_PREFIX, '') : '';
 }
+
+export function transformLayoutAndPageToComponent(layout: string, page: string) {
+  const hasLayout = Boolean(layout);
+  const hasPage = Boolean(page);
+
+  if (hasLayout && hasPage) {
+    return `${LAYOUT_PREFIX}${layout}${FIRST_LEVEL_ROUTE_COMPONENT_SPLIT}${VIEW_PREFIX}${page}`;
+  }
+
+  if (hasLayout) {
+    return `${LAYOUT_PREFIX}${layout}`;
+  }
+
+  if (hasPage) {
+    return `${VIEW_PREFIX}${page}`;
+  }
+
+  return '';
+}