feat(applaunchpad): Improve domain handling for legacy and new domains

docs/website/src/hooks/useWindow.ts

@@ -4,6 +4,7 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 interface SemParams {
   bd_vid: string;
   keywords: string;
+  s: string;
 }
 
 export default function useWindow() {
@@ -13,7 +14,7 @@ export default function useWindow() {
     isBrowser ? document.documentElement.lang : 'en'
   );
   const [cloudUrl, setCloudUrl] = useState('https://cloud.sealos.io');
-  const [semParams, setSemParams] = useState<SemParams>({ bd_vid: '', keywords: '' });
+  const [semParams, setSemParams] = useState<SemParams>({ bd_vid: '', keywords: '', s: '' });
 
   useEffect(() => {
     if (!isBrowser) return;

docs/website/src/pages/components/Header/index.tsx

@@ -142,7 +142,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
           )}
           <a
             className="start-now-button"
-            href={`${cloudUrl}?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}`}
+            href={`${cloudUrl}?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&s=${semParams.s}`}
             target="_blank"
           >
             {i18nObj.startNow}
@@ -201,7 +201,7 @@ const HomeHeader = ({ isPc }: { isPc: boolean }) => {
           )}
           <a
             className="start-now-button"
-            href={`${cloudUrl}?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}`}
+            href={`${cloudUrl}?bd_vid=${semParams.bd_vid}&k=${semParams.keywords}&s=${semParams.s}`}
             target="_blank"
           >
             {i18nObj.startNow}

docs/website/src/pages/index.tsx

@@ -50,6 +50,9 @@ const Home = () => {
     const k = urlParams.get('k');
     if (k) params.keywords = k;
 
+    const s = urlParams.get('s');
+    if (s) params.s = s;
+
     if (Object.keys(params).length > 0) {
       sessionStorage.setItem('sealos_sem', JSON.stringify(params));
     }

docs/website/src/pages/self-hosting/index.tsx

@@ -27,6 +27,9 @@ export default function Pricing() {
     const k = urlParams.get('k');
     if (k) params.keywords = k;
 
+    const s = urlParams.get('s');
+    if (s) params.s = s;
+
     if (Object.keys(params).length > 0) {
       sessionStorage.setItem('sealos_sem', JSON.stringify(params));
     }

frontend/providers/applaunchpad/public/locales/en/common.json

@@ -265,5 +265,6 @@
   "within_1_hour": "Within 1 hour",
   "within_1_day": "Within 1 day",
   "terminated_logs": "Terminated logs",
-  "no_logs_for_now": "No logs for now"
-}
+  "no_logs_for_now": "No logs for now",
+  "or": "or"
+}

frontend/providers/applaunchpad/public/locales/zh/common.json

@@ -265,5 +265,6 @@
   "within_1_hour": "一小时内",
   "within_1_day": "一天内",
   "terminated_logs": "中断前",
-  "no_logs_for_now": "暂无日志"
+  "no_logs_for_now": "暂无日志",
+  "or": "或"
 }

frontend/providers/applaunchpad/src/api/platform.ts

@@ -16,9 +16,6 @@ export const getUserQuota = () =>
 
 export const postAuthCname = (data: AuthCnamePrams) => POST('/api/platform/authCname', data);
 
-// abandoned
-export const getPlatformEnv = () => GET<EnvResponse>('/api/platform/getEnv');
-
 export const updateDesktopGuide = (payload: UpdateUserGuideParams) =>
   POST('/api/guide/updateGuide', payload);
 

frontend/providers/applaunchpad/src/constants/editApp.ts

@@ -1,3 +1,4 @@
+import { SEALOS_DOMAIN, SEALOS_USER_DOMAIN } from '@/store/static';
 import type { AppEditType } from '@/types/app';
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 12);
@@ -38,7 +39,8 @@ export const defaultEditVal: AppEditType = {
       protocol: 'HTTP',
       openPublicDomain: false,
       publicDomain: '',
-      customDomain: ''
+      customDomain: '',
+      domain: ''
     }
   ],
   envs: [],

frontend/providers/applaunchpad/src/mock/apps.ts

@@ -268,7 +268,8 @@ export const MOCK_APP_DETAIL: AppDetailType = {
       protocol: 'HTTP',
       openPublicDomain: false,
       publicDomain: '',
-      customDomain: ''
+      customDomain: '',
+      domain: ''
     }
   ],
   envs: [],

frontend/providers/applaunchpad/src/pages/api/platform/getInitData.ts

@@ -16,12 +16,14 @@ export type Response = {
   CURRENCY: Coin;
   guideEnabled: boolean;
   fileMangerConfig: FileMangerType;
+  SEALOS_USER_DOMAIN: string[];
 };
 
 export const defaultAppConfig: AppConfigType = {
   cloud: {
     domain: 'cloud.sealos.io',
-    port: ''
+    port: '',
+    userDomain: ['cloud.sealos.io']
   },
   common: {
     guideEnabled: false,
@@ -74,6 +76,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       const gpuNodes = await getGpuNode();
       global.AppConfig.common.gpuEnabled = gpuNodes.length > 0;
     }
+
     jsonRes<Response>(res, {
       data: {
         SEALOS_DOMAIN: global.AppConfig.cloud.domain,
@@ -83,7 +86,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         FORM_SLIDER_LIST_CONFIG: global.AppConfig.launchpad.appResourceFormSliderConfig,
         guideEnabled: global.AppConfig.common.guideEnabled,
         fileMangerConfig: global.AppConfig.launchpad.fileManger,
-        CURRENCY: Coin.shellCoin
+        CURRENCY: Coin.shellCoin,
+        SEALOS_USER_DOMAIN: global.AppConfig.cloud.userDomain || []
       }
     });
   } catch (error) {

frontend/providers/applaunchpad/src/pages/app/detail/components/AppMainInfo.tsx

@@ -4,7 +4,7 @@ import { MyTooltip } from '@sealos/ui';
 import PodLineChart from '@/components/PodLineChart';
 import { ProtocolList } from '@/constants/app';
 import { MOCK_APP_DETAIL } from '@/mock/apps';
-import { DOMAIN_PORT, SEALOS_DOMAIN } from '@/store/static';
+import { DOMAIN_PORT } from '@/store/static';
 import type { AppDetailType } from '@/types/app';
 import { useCopyData } from '@/utils/tools';
 import { getUserNamespace } from '@/utils/user';
@@ -27,7 +27,7 @@ const AppMainInfo = ({ app = MOCK_APP_DETAIL }: { app: AppDetailType }) => {
           ? `${ProtocolList.find((item) => item.value === network.protocol)?.label}${
               network.customDomain
                 ? network.customDomain
-                : `${network.publicDomain}.${SEALOS_DOMAIN}${DOMAIN_PORT}`
+                : `${network.publicDomain}.${network.domain}${DOMAIN_PORT}`
             }`
           : ''
       })),

frontend/providers/applaunchpad/src/pages/app/edit/components/CustomAccessModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import {
   Box,
   ModalBody,
@@ -15,20 +15,22 @@ import {
   ModalHeader
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { SEALOS_DOMAIN } from '@/store/static';
 import { Tip } from '@sealos/ui';
 import { InfoOutlineIcon } from '@chakra-ui/icons';
 import { useRequest } from '@/hooks/useRequest';
 import { postAuthCname } from '@/api/platform';
+import { SEALOS_USER_DOMAIN } from '@/store/static';
 
 export type CustomAccessModalParams = {
   publicDomain: string;
   customDomain: string;
+  domain: string;
 };
 
 const CustomAccessModal = ({
   publicDomain,
   customDomain,
+  domain,
   onClose,
   onSuccess
 }: CustomAccessModalParams & { onClose: () => void; onSuccess: (e: string) => void }) => {
@@ -41,7 +43,11 @@ const CustomAccessModal = ({
     mb: 2
   };
 
-  const completePublicDomain = useMemo(() => `${publicDomain}.${SEALOS_DOMAIN}`, [publicDomain]);
+  const completePublicDomain = useMemo(() => `${publicDomain}.${domain}`, [publicDomain, domain]);
+
+  const cnameTips = useMemo(() => {
+    return SEALOS_USER_DOMAIN.map((item) => `${publicDomain}.${item}`).join(` ${t('or')} `);
+  }, [publicDomain, t]);
 
   const { mutate: authCNAME, isLoading } = useRequest({
     mutationFn: async () => {
@@ -95,7 +101,9 @@ const CustomAccessModal = ({
               size={'sm'}
               whiteSpace={'pre-wrap'}
               icon={<InfoOutlineIcon />}
-              text={`${t('CNAME Tips', { domain: completePublicDomain })}`}
+              text={`${t('CNAME Tips', {
+                domain: customDomain ? cnameTips : completePublicDomain
+              })}`}
             />
           </ModalBody>
           <ModalFooter>

frontend/providers/applaunchpad/src/pages/app/edit/components/Form.tsx

@@ -5,7 +5,7 @@ import { defaultSliderKey, ProtocolList } from '@/constants/app';
 import { GpuAmountMarkList } from '@/constants/editApp';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
-import { SEALOS_DOMAIN } from '@/store/static';
+import { SEALOS_DOMAIN, SEALOS_USER_DOMAIN } from '@/store/static';
 import { useUserStore } from '@/store/user';
 import type { QueryType } from '@/types';
 import type { AppEditType } from '@/types/app';
@@ -802,7 +802,8 @@ const Form = ({
                               protocol: 'HTTP',
                               openPublicDomain: false,
                               publicDomain: '',
-                              customDomain: ''
+                              customDomain: '',
+                              domain: SEALOS_DOMAIN
                             })
                           }
                         >
@@ -826,7 +827,8 @@ const Form = ({
                             networkName: network.networkName || `network-${nanoid()}`,
                             protocol: network.protocol || 'HTTP',
                             openPublicDomain: e.target.checked,
-                            publicDomain: network.publicDomain || nanoid()
+                            publicDomain: network.publicDomain || nanoid(),
+                            domain: network.domain || SEALOS_DOMAIN
                           });
                         }}
                       />
@@ -867,7 +869,7 @@ const Form = ({
                             <Box flex={1} userSelect={'all'} className="textEllipsis">
                               {network.customDomain
                                 ? network.customDomain
-                                : `${network.publicDomain}.${SEALOS_DOMAIN}`}
+                                : `${network.publicDomain}.${network.domain}`}
                             </Box>
                             <Box
                               fontSize={'11px'}
@@ -876,7 +878,8 @@ const Form = ({
                               onClick={() =>
                                 setCustomAccessModalData({
                                   publicDomain: network.publicDomain,
-                                  customDomain: network.customDomain
+                                  customDomain: network.customDomain,
+                                  domain: network.domain
                                 })
                               }
                             >

frontend/providers/applaunchpad/src/store/static.ts

@@ -2,6 +2,7 @@ import { getInitData } from '@/api/platform';
 import { Coin } from '@/constants/app';
 
 export let SEALOS_DOMAIN = 'cloud.sealos.io';
+export let SEALOS_USER_DOMAIN = ['cloud.sealos.io'];
 export let DOMAIN_PORT = '';
 export let INGRESS_SECRET = 'wildcard-cert';
 export let SHOW_EVENT_ANALYZE = false;
@@ -13,6 +14,7 @@ export const loadInitData = async () => {
   try {
     const res = await getInitData();
     SEALOS_DOMAIN = res.SEALOS_DOMAIN;
+    SEALOS_USER_DOMAIN = res.SEALOS_USER_DOMAIN;
     DOMAIN_PORT = res.DOMAIN_PORT;
     INGRESS_SECRET = res.INGRESS_SECRET;
     SHOW_EVENT_ANALYZE = res.SHOW_EVENT_ANALYZE;

frontend/providers/applaunchpad/src/types/app.d.ts

@@ -76,8 +76,9 @@ export interface AppEditType {
     port: number;
     protocol: ProtocolType;
     openPublicDomain: boolean;
-    publicDomain: string; // default domain
+    publicDomain: string; // default domain // domainPrefix
     customDomain: string; // custom domain
+    domain: string;
   }[];
   envs: {
     key: string;

frontend/providers/applaunchpad/src/types/index.d.ts

@@ -27,6 +27,7 @@ export type AppConfigType = {
   cloud: {
     domain: string;
     port?: string;
+    userDomain: string[];
   };
   common: {
     guideEnabled: boolean;