goodrain · ZhangSetSail · Apr 10, 2026 · Apr 10, 2026
diff --git a/src/components/CreateComponentModal/index.js b/src/components/CreateComponentModal/index.js
@@ -108,6 +108,7 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
   const [currentDatabaseType, setCurrentDatabaseType] = useState(null);
   const [showDatabaseForm, setShowDatabaseForm] = useState(false);
   const [virtualMachineImages, setVirtualMachineImages] = useState([]);
+  const [vmAssetCatalogVisible, setVmAssetCatalogVisible] = useState(false);
 
   // 插件相关状态
   const [availablePlugins, setAvailablePlugins] = useState([]);
@@ -1398,6 +1399,7 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
       setLocalMarketPage(1);
       setLocalMarketActiveTab('all');
       setCurrentFormType('');
+      setVmAssetCatalogVisible(false);
       setHasInitialized(false); // 重置初始化标志
     }
   }, [visible, initialView, hasInitialized]);
@@ -1524,6 +1526,10 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
 
   const handleBack = () => {
     if (currentView === 'form') {
+      if (currentFormType === 'vm' && vmAssetCatalogVisible) {
+        setVmAssetCatalogVisible(false);
+        return;
+      }
       setCurrentFormType('');
       popViewHistory();
     } else if (currentView === 'plugin') {
@@ -2021,6 +2027,7 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
       case 'thirdList':
         return selectedOauthService ? formatMessage({ id: 'componentOverview.body.CreateComponentModal.repo' }, { name: selectedOauthService.name }) : formatMessage({ id: 'componentOverview.body.CreateComponentModal.source_repo' });
       case 'form':
+        if (currentFormType === 'vm' && vmAssetCatalogVisible) return formatMessage({ id: 'Vm.assetCatalog.title' });
         if (currentFormType === 'docker') return formatMessage({ id: 'componentOverview.body.CreateComponentModal.container' });
         if (currentFormType === 'docker-compose') return formatMessage({ id: 'componentOverview.body.CreateComponentModal.docker_compose' });
         if (currentFormType === 'code-custom') return formatMessage({ id: 'componentOverview.body.CreateComponentModal.source_code' });
@@ -2076,6 +2083,9 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
     const showSaaSPrice = PluginUtils.isInstallPlugin(pluginsList, 'rainbond-bill');
     // 表单视图需要显示提交按钮
     if (currentView === 'form') {
+      if (currentFormType === 'vm' && vmAssetCatalogVisible) {
+        return null;
+      }
       return (
         <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <Button type="primary" onClick={handleFooterSubmit} loading={false}>
@@ -2275,7 +2285,9 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
         onCancel={handleClose}
         footer={getModalFooter()}
         width={
-          (currentView === 'imageRepo' || currentView === 'thirdList') ? 700 : 600
+          (currentView === 'imageRepo' || currentView === 'thirdList')
+            ? 700
+            : 600
         }
         className={styles.createComponentModal}
         bodyStyle={
@@ -2508,6 +2520,9 @@ const CreateComponentModal = ({ visible, onCancel, dispatch, currentEnterprise,
                 archInfo={archInfo}
                 virtualMachineImage={virtualMachineImages}
                 onRefreshAssets={fetchVirtualMachineImages}
+                showAssetCatalog={vmAssetCatalogVisible}
+                onOpenAssetCatalog={() => setVmAssetCatalogVisible(true)}
+                onCloseAssetCatalog={() => setVmAssetCatalogVisible(false)}
                 showSubmitBtn={false}
               />
             )}

diff --git a/src/components/GlobalRouter/index.js b/src/components/GlobalRouter/index.js
@@ -27,9 +27,25 @@ const getIcon = icon => {
   return <span className={styles.menuIcon}>{icon}</span>;
 };
 
+const UpgradeStatusIcon = ({ className }) => (
+  <svg
+    className={className}
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M323.904 651.072a32 32 0 0 1 17.024 17.024L416 845.76l75.072-177.664a32 32 0 0 1 17.024-17.024L685.76 576 508.16 500.928a32 32 0 0 1-17.024-17.024L416 306.24 340.928 483.84a32 32 0 0 1-17.024 17.024L146.24 576l177.664 75.072zM51.52 605.44a32 32 0 0 1 0-59.008l235.52-99.456 99.456-235.52a32 32 0 0 1 59.008 0l99.456 235.52 235.52 99.456a32 32 0 0 1 0 59.008l-235.52 99.456-99.456 235.52a32 32 0 0 1-59.008 0l-99.456-235.52-235.52-99.456z m688.64-249.28L704 448l-36.224-91.776L576 320l91.776-36.224L704 192l36.224 91.776L832 320l-91.776 36.224z m151.04-169.088L864 256l-27.136-68.864L768 160l68.864-27.136L864 64l27.136 68.864L960 160l-68.864 27.136z m0 704L864 960l-27.136-68.864L768 864l68.864-27.136L864 768l27.136 68.864L960 864l-68.864 27.136z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 @connect(({ loading, global, user }) => ({
   viewLoading: loading.effects['user/addCollectionView'],
   collapsed: global.collapsed,
+  rainbondInfo: global.rainbondInfo,
   currentUser: user.currentUser
 }))
 export default class GlobalRouter extends PureComponent {
@@ -39,21 +55,87 @@ export default class GlobalRouter extends PureComponent {
     const teamName = globalUtil.getCurrTeamName();
     const regionName = globalUtil.getCurrRegionName();
     this.state = {
-      expandedKeys: [] // 展开的子菜单 keys
+      expandedKeys: [], // 展开的子菜单 keys
+      hasUpgradeVersion: false
     };
   }
 
   componentDidMount() {
     // 初始化展开状态
     this.initExpandedKeys();
+    this.fetchPlatformUpdateStatus();
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.location?.pathname !== this.props.location?.pathname) {
       this.initExpandedKeys();
     }
+
+    if (
+      prevProps.currentUser?.is_enterprise_admin !== this.props.currentUser?.is_enterprise_admin ||
+      prevProps.currentUser?.enterprise_id !== this.props.currentUser?.enterprise_id ||
+      prevProps.currentEnterprise?.enterprise_id !== this.props.currentEnterprise?.enterprise_id ||
+      prevProps.rainbondInfo?.version?.value !== this.props.rainbondInfo?.version?.value
+    ) {
+      this.fetchPlatformUpdateStatus();
+    }
   }
 
+  getEnterpriseId = () => {
+    const { currentEnterprise, currentUser, pathname } = this.props;
+    if (currentEnterprise?.enterprise_id) {
+      return currentEnterprise.enterprise_id;
+    }
+    if (currentUser?.enterprise_id) {
+      return currentUser.enterprise_id;
+    }
+    const match = pathname && pathname.match(/\/enterprise\/([^/]+)/);
+    return match ? match[1] : '';
+  };
+
+  fetchPlatformUpdateStatus = () => {
+    const { dispatch, currentUser, rainbondInfo } = this.props;
+    const enterpriseId = this.getEnterpriseId();
+    const currentVersion = rainbondInfo?.version?.value
+      ? rainbondInfo.version.value.split('-')[0]
+      : '';
+
+    if (!currentUser?.is_enterprise_admin || !enterpriseId || !currentVersion) {
+      if (this.state.hasUpgradeVersion) {
+        this.setState({ hasUpgradeVersion: false });
+      }
+      return;
+    }
+
+    dispatch({
+      type: 'global/fetchAllVersion',
+      callback: res => {
+        const list = Array.isArray(res && res.response_data) ? res.response_data : [];
+        const latestVersion = list[0];
+        const hasUpgradeVersion =
+          !!latestVersion && latestVersion.split('-')[0] !== currentVersion;
+        this.setState({ hasUpgradeVersion });
+      },
+      handleError: () => {
+        this.setState({ hasUpgradeVersion: false });
+      }
+    });
+  };
+
+  handleUpgradeNavigation = () => {
+    const { dispatch, isMobile, onCollapse } = this.props;
+    const enterpriseId = this.getEnterpriseId();
+    if (!enterpriseId) {
+      return;
+    }
+
+    if (isMobile) {
+      onCollapse?.(true);
+    }
+
+    dispatch(routerRedux.push(`/enterprise/${enterpriseId}/setting?type=updateVersion`));
+  };
+
   /**
    * 初始化展开的菜单
    */
@@ -350,6 +432,47 @@ export default class GlobalRouter extends PureComponent {
     return button;
   };
 
+  renderUpgradeEntry = () => {
+    const { collapsed, currentUser } = this.props;
+    const { hasUpgradeVersion } = this.state;
+
+    if (!currentUser?.is_enterprise_admin || !hasUpgradeVersion) {
+      return null;
+    }
+
+    if (collapsed) {
+      return (
+        <Tooltip
+          title={formatMessage({ id: 'platformUpgrade.index.clicktoupload' })}
+          placement="right"
+        >
+          <div
+            className={styles.upgradeShortcut}
+            onClick={this.handleUpgradeNavigation}
+          >
+            <UpgradeStatusIcon className={styles.upgradeStatusIcon} />
+          </div>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <div
+        className={styles.upgradeCard}
+        onClick={this.handleUpgradeNavigation}
+      >
+        <div className={styles.upgradeCardIcon}>
+          <UpgradeStatusIcon className={styles.upgradeStatusIcon} />
+        </div>
+        <div className={styles.upgradeCardContent}>
+          <div className={styles.upgradeCardTitle}>
+            {formatMessage({ id: 'enterpriseOverview.overview.UpdateVersion.title' })}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   render() {
     const { showMenu, collapsed } = this.props;
 
@@ -365,8 +488,9 @@ export default class GlobalRouter extends PureComponent {
           </nav>
         </div>
 
-        {/* 底部：收起按钮 */}
+        {/* 底部：升级提示和收起按钮 */}
         <div className={styles.menuFooter}>
+          {this.renderUpgradeEntry()}
           {this.renderCollapseButton()}
         </div>
       </div>

diff --git a/src/components/GlobalRouter/index.less b/src/components/GlobalRouter/index.less
@@ -89,6 +89,79 @@
 // ==================== 底部区域 ====================
 .menuFooter {
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.upgradeCard {
+  display: flex;
+  align-items: center;
+  margin: 8px 12px 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid fade(@success-color, 24%);
+  background: linear-gradient(180deg, fade(@success-color, 12%) 0%, fade(@success-color, 4%) 100%);
+  cursor: pointer;
+  transition: background @transition-duration @transition-timing,
+              box-shadow @transition-duration @transition-timing,
+              border-color @transition-duration @transition-timing;
+
+  &:hover {
+    background: linear-gradient(180deg, fade(@success-color, 16%) 0%, fade(@success-color, 8%) 100%);
+    border-color: fade(@success-color, 36%);
+    box-shadow: 0 8px 20px fade(@success-color, 14%);
+  }
+}
+
+.upgradeCardIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: fade(@success-color, 14%);
+  color: @success-color;
+  font-size: 16px;
+}
+
+.upgradeCardContent {
+  min-width: 0;
+  margin-left: 8px;
+}
+
+.upgradeCardTitle {
+  color: @heading-color;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.upgradeShortcut {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 12px 8px 0;
+  border-radius: 8px;
+  color: @success-color;
+  cursor: pointer;
+  transition: background @transition-duration @transition-timing,
+              color @transition-duration @transition-timing;
+
+  &:hover {
+    background: fade(@success-color, 12%);
+    color: @success-color;
+  }
+}
+
+.upgradeStatusIcon {
+  display: block;
+  width: 18px;
+  height: 18px;
+  color: currentColor;
 }
 
 // ==================== 视图切换器 ====================
@@ -492,6 +565,10 @@
       background: #d9d9d9;
     }
   }
+
+  .upgradeCard {
+    display: none;
+  }
 }
 
 // ==================== 折叠状态下的视图切换器 ====================