feat(projects): Iframe 类型菜单传参更改

docs/sql/sys_menu.sql

@@ -29,8 +29,8 @@ UPDATE `sys_menu` SET `icon` = 'gg:debug', `menu_name` = 'route.demo_tree' WHERE
 UPDATE `sys_menu` SET `path` = 'oss/config', `component` = 'system/oss-config/index', `icon` = 'hugeicons:configuration-01', `menu_name` = 'route.system_oss-config' WHERE `menu_id` = 133;
 
 -- IFrame 类型
-UPDATE `sys_menu` SET `component` = 'FrameView', `query_param` = 'https://ruoyi.xlsea.cn/admin/', `is_frame` = 2, `icon` = 'bx:bxl-spring-boot', `menu_name` = 'menu.monitor_admin' WHERE `menu_id` = 117;
+UPDATE `sys_menu` SET `component` = 'FrameView', `query_param` = '{"url": "https://ruoyi.xlsea.cn/admin/"}', `is_frame` = 2, `icon` = 'bx:bxl-spring-boot', `menu_name` = 'menu.monitor_admin' WHERE `menu_id` = 117;
-UPDATE `sys_menu` SET `component` = 'FrameView', `query_param` = 'https://preview.snailjob.opensnail.com/', `is_frame` = 2, `icon` = 'gridicons:scheduled', `menu_name` = 'menu.monitor_snail-job' WHERE `menu_id` = 120;
+UPDATE `sys_menu` SET `component` = 'FrameView', `query_param` = '{"url": "https://preview.snailjob.opensnail.com/"}', `is_frame` = 2, `icon` = 'gridicons:scheduled', `menu_name` = 'menu.monitor_snail-job' WHERE `menu_id` = 120;
 -- 外链类型
 UPDATE `sys_menu` SET `path` = 'https://gitee.com/xlsea/ruoyi-plus-soybean', `component` = 'FrameView', `icon` = 'local-icon-gitee', `menu_name` = 'RuoYi-Plus-Soybean' WHERE `menu_id` = 4;
 

src/store/modules/route/index.ts

@@ -142,10 +142,12 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
         route.name = random;
         route.component = 'layout.base$view.iframe-page';
       } else {
-        route.props = {
+        try {
-          // @ts-expect-error no query field
+          route.props = {
-          url: route.query
+            // @ts-expect-error no query field
-        };
+            url: JSON.parse(route.query)?.url
+          };
+        } catch {}
       }
       route.component = parent && !isExternalLink ? 'view.iframe-page' : 'layout.base$view.iframe-page';
     } else if (!isLayout && !isParentLayout) {

src/views/system/menu/index.vue

@@ -322,6 +322,14 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     }
   }
 ];
+
+const renderIframeQuery = (queryParam: string) => {
+  try {
+    return JSON.parse(queryParam || '{}')?.url;
+  } catch {
+    return queryParam;
+  }
+};
 </script>
 
 <template>
@@ -461,12 +469,15 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
             >
               {{ currentMenu.path }}
             </NDescriptionsItem>
-            <NDescriptionsItem
+            <NDescriptionsItem v-if="isMenu && !isExternalType && !isIframeType" :label="$t('page.system.menu.query')">
-              v-if="isMenu && !isExternalType"
-              :label="!isIframeType ? $t('page.system.menu.query') : $t('page.system.menu.iframeQuery')"
-            >
               {{ currentMenu.queryParam }}
             </NDescriptionsItem>
+            <NDescriptionsItem
+              v-if="isMenu && !isExternalType && isIframeType"
+              :label="$t('page.system.menu.iframeQuery')"
+            >
+              {{ renderIframeQuery(currentMenu.queryParam) }}
+            </NDescriptionsItem>
             <NDescriptionsItem v-if="!isCatalog" :label="$t('page.system.menu.perms')">
               {{ currentMenu.perms }}
             </NDescriptionsItem>

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

@@ -133,7 +133,14 @@ function handleInitModel() {
     if (model.isFrame === '1') {
       const queryObj: { [key: string]: string } = JSON.parse(model.queryParam || '{}');
       queryList.value = Object.keys(queryObj).map(item => ({ key: item, value: queryObj[item] }));
+      return;
     }
+
+    try {
+      if (model.isFrame === '2') {
+        model.queryParam = JSON.parse(model.queryParam || '{}')?.url || '';
+      }
+    } catch {}
   }
 }
 
@@ -173,7 +180,7 @@ function processQueryParam(queryParam: string | null | undefined): string {
 
   // iframe类型，直接使用原始参数
   if (isIframeType.value) {
-    return queryParam || '';
+    return queryParam ? `{"url": "${queryParam}"}` : '';
   }
 
   return '';