styles: launchpad AppStatusTag & workorder appendixs (#4740)

* styles: launchpad AppStatusTag & workorder appendixs

* fix:template deploy page language

* update .dockerignore

* lockFocusAcrossFrames={false}

frontend/.dockerignore

@@ -12,3 +12,5 @@
 **/dist/
 **/yalc.lock
 **/.gitignore
+**/providers/template/templates/
+**/providers/template/templates.json

frontend/desktop/src/services/enable.ts

@@ -11,7 +11,8 @@ export const enableApi = () => global.AppConfig.common.apiEnabled || false;
 export const enableOAuth2 = () => global.AppConfig.desktop.auth.idp.oauth2?.enabled || false;
 
 export const getTeamLimit = () => global.AppConfig.desktop.teamManagement?.maxTeamCount || 50;
-export const getTeamInviteLimit = () => global.AppConfig.desktop.teamManagement?.maxTeamMemberCount || 50;
+export const getTeamInviteLimit = () =>
+  global.AppConfig.desktop.teamManagement?.maxTeamMemberCount || 50;
 
 export const getRegionUid = () => global.AppConfig.cloud.regionUID;
 

frontend/providers/applaunchpad/src/components/AppStatusTag/index.tsx

@@ -27,10 +27,16 @@ const AppStatusTag = ({
       fontSize={'xs'}
       fontWeight={'bold'}
       alignItems={'center'}
-      w={'68px'}
+      minW={'68px'}
       gap={'4px'}
     >
-      <Box w={'6px'} h={'6px'} borderRadius={'10px'} backgroundColor={statusMap.dotColor} />
+      <Box
+        flexShrink={'0'}
+        w={'6px'}
+        h={'6px'}
+        borderRadius={'10px'}
+        backgroundColor={statusMap.dotColor}
+      />
       <Box>{t(statusMap.label)}</Box>
     </Flex>
   );

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

@@ -20,7 +20,7 @@ const ConfigMapDetailModal = ({
   onClose: () => void;
 }) => {
   return (
-    <Modal isOpen onClose={onClose}>
+    <Modal isOpen onClose={onClose} lockFocusAcrossFrames={false}>
       <ModalOverlay />
       <ModalContent top={'10vh'} minW={'600px'} backgroundColor={'#F5F5F5'}>
         <ModalHeader>{mountPath}</ModalHeader>

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

@@ -53,7 +53,7 @@ const DelModal = ({
   }, [appName, toast, t, onSuccess, onClose]);
 
   return (
-    <Modal isOpen onClose={onClose}>
+    <Modal isOpen onClose={onClose} lockFocusAcrossFrames={false}>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>{t('Deletion warning')} </ModalHeader>

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

@@ -108,7 +108,7 @@ const LogsModal = ({
   }, [appName, podName]);
 
   return (
-    <Modal isOpen={true} onClose={closeFn} isCentered={true}>
+    <Modal isOpen={true} onClose={closeFn} isCentered={true} lockFocusAcrossFrames={false}>
       <ModalOverlay />
       <ModalContent className={styles.logs} display={'flex'} maxW={'90vw'} h={'90vh'} m={0}>
         <ModalHeader py={'8px'}>

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

@@ -30,7 +30,7 @@ const MonitorModal = ({ onClose, isOpen }: { isOpen: boolean; onClose: () => voi
   const theme = useTheme();
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} autoFocus={false}>
+    <Modal isOpen={isOpen} onClose={onClose} autoFocus={false} lockFocusAcrossFrames={false}>
       <ModalOverlay />
       <ModalContent maxW={'90vw'}>
         <ModalHeader>{t('Real-time Monitoring')}</ModalHeader>

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

@@ -153,7 +153,7 @@ const Logs = ({
   }, [events, onCloseAnalysesModel, onEndAnalyses, onOpenAnalyses, onStartAnalyses, toast]);
 
   return (
-    <Modal isOpen={true} onClose={closeFn} size={'sm'} isCentered>
+    <Modal isOpen={true} onClose={closeFn} size={'sm'} isCentered lockFocusAcrossFrames={false}>
       <ModalOverlay />
       <ModalContent h={'90vh'} maxW={'90vw'} m={0} display={'flex'} flexDirection={'column'}>
         <ModalCloseButton fontSize={16} top={6} right={6} />
@@ -314,7 +314,7 @@ const Logs = ({
         </Grid>
       </ModalContent>
       {/* analyses modal */}
-      <Modal isOpen={isOpenAnalyses} onClose={onCloseAnalysesModel}>
+      <Modal isOpen={isOpenAnalyses} onClose={onCloseAnalysesModel} lockFocusAcrossFrames={false}>
         <ModalOverlay />
         <ModalContent maxW={'50vw'} h={'70vh'}>
           <ModalHeader>Pod {t('Intelligent Analysis')}</ModalHeader>

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

@@ -303,7 +303,7 @@ const PodFile = ({
 
   return (
     <>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered lockFocusAcrossFrames={false}>
         <ModalOverlay />
         <ModalContent h={'90vh'} maxW={'90vw'} m={0} display={'flex'} flexDirection={'column'}>
           <ModalHeader>
@@ -551,7 +551,7 @@ const PodFile = ({
           </ModalBody>
         </ModalContent>
       </Modal>
-      <Modal isOpen={isInternalOpen} onClose={onInternalClose}>
+      <Modal isOpen={isInternalOpen} onClose={onInternalClose} lockFocusAcrossFrames={false}>
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>

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

@@ -57,7 +57,7 @@ const ConfigmapModal = ({
 
   return (
     <>
-      <Modal isOpen onClose={closeCb}>
+      <Modal isOpen onClose={closeCb} lockFocusAcrossFrames={false}>
         <ModalOverlay />
         <ModalContent maxH={'90vh'} maxW={'90vw'} minW={'530px'} w={'auto'}>
           <ModalHeader>

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

@@ -61,7 +61,7 @@ const CustomAccessModal = ({
 
   return (
     <>
-      <Modal isOpen onClose={onClose}>
+      <Modal isOpen onClose={onClose} lockFocusAcrossFrames={false}>
         <ModalOverlay />
         <ModalContent maxH={'90vh'} maxW={'90vw'} width={'530px'}>
           <ModalHeader>{t('Custom Domain')}</ModalHeader>

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

@@ -67,7 +67,7 @@ const EditEnvs = ({
   }, [defaultEnv, inputVal, onClose, successCb]);
 
   return (
-    <Modal isOpen onClose={onClose}>
+    <Modal isOpen onClose={onClose} lockFocusAcrossFrames={false}>
       <ModalOverlay />
       <ModalContent maxH={'90vh'} maxW={'90vw'} minW={'530px'} w={'auto'}>
         <ModalHeader>{t('Edit Environment Variables')}</ModalHeader>

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

@@ -20,7 +20,7 @@ const ErrorModal = ({
   onClose: () => void;
 }) => {
   return (
-    <Modal isOpen={true} onClose={onClose}>
+    <Modal isOpen={true} onClose={onClose} lockFocusAcrossFrames={false}>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader display={'flex'} alignItems={'center'} color={'myRed.600'}>

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

@@ -72,7 +72,7 @@ const StoreModal = ({
 
   return (
     <>
-      <Modal isOpen onClose={closeCb}>
+      <Modal isOpen onClose={closeCb} lockFocusAcrossFrames={false}>
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>{textMap[type].title}</ModalHeader>

frontend/providers/template/src/pages/deploy/index.tsx

@@ -11,7 +11,7 @@ import type { QueryType, YamlItemType } from '@/types';
 import { ApplicationType, TemplateSourceType } from '@/types/app';
 import { serviceSideProps } from '@/utils/i18n';
 import { generateYamlList, parseTemplateString } from '@/utils/json-yaml';
-import { deepSearch, useCopyData } from '@/utils/tools';
+import { compareFirstLanguages, deepSearch, useCopyData } from '@/utils/tools';
 import { Box, Flex, Icon, Text } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import JSYAML from 'js-yaml';
@@ -350,6 +350,15 @@ export default function EditApp({ appName }: { appName?: string }) {
 }
 
 export async function getServerSideProps(content: any) {
+  const local =
+    content?.req?.cookies?.NEXT_LOCALE ||
+    compareFirstLanguages(content?.req?.headers?.['accept-language'] || 'zh');
+
+  content?.res.setHeader(
+    'Set-Cookie',
+    `NEXT_LOCALE=${local}; Max-Age=2592000; Secure; SameSite=None`
+  );
+
   const appName = content?.query?.templateName || '';
 
   return {

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

@@ -60,5 +60,6 @@
   "Copy": "Copy",
   "api is error": "api is error",
   "region": "region",
-  "userId": "userId"
-}
+  "userId": "userId",
+  "other": "other"
+}

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

@@ -60,5 +60,6 @@
   "Copy": "复制",
   "api is error": "api is error",
   "region": "可用区",
-  "userId": "用户ID"
-}
+  "userId": "用户ID",
+  "other": "其他"
+}

frontend/providers/workorder/src/constants/workorder.ts

@@ -35,6 +35,10 @@ export const OrderTypeList: {
   {
     id: WorkOrderType.FunctionServer,
     label: 'functionserver'
+  },
+  {
+    id: WorkOrderType.Other,
+    label: 'other'
   }
 ];
 

frontend/providers/workorder/src/pages/api/ai/fastgpt.ts

@@ -82,6 +82,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       res.write(value);
     }
   } catch (error) {
+    console.log(error);
     res.end();
   }
 }

frontend/providers/workorder/src/pages/api/platform/feishu.ts

@@ -1,5 +1,6 @@
 import { verifyAccessToken } from '@/services/backend/auth';
 import { jsonRes } from '@/services/backend/response';
+import { getRegionById } from '@/services/db/region';
 import { updateOrder } from '@/services/db/workorder';
 import { ApiResp } from '@/services/kubernet';
 import { WorkOrderType } from '@/types/workorder';
@@ -28,6 +29,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         message: "'token is invaild'"
       });
     }
+    const regionInfo = await getRegionById(payload.regionUid || '');
     const feishuUrl = process.env.ADMIN_FEISHU_URL;
     const feishuCallBackUrl = process.env.ADMIN_FEISHU_CALLBACK_URL;
     const title = switchToManual ? `工单：${orderId}，请求人工处理` : '有新的工单，请立即查看';
@@ -48,7 +50,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         elements: [
           {
             tag: 'markdown',
-            content: `**用户ID:** ${payload.userId}\n**可用区ID:** ${payload.regionUid}\n所属分类: ${type}\n描述信息: ${description}`
+            content: `**用户ID:** ${payload.userId}\n**可用区ID:** ${
+              regionInfo?.sealosRegionUid ? regionInfo.sealosRegionDomain : payload.regionUid
+            }\n所属分类: ${type}\n描述信息: ${description}`
           },
           {
             tag: 'action',

frontend/providers/workorder/src/pages/workorder/detail/components/AppBaseInfo.tsx

@@ -82,14 +82,16 @@ const AppBaseInfo = ({ app }: { app: WorkOrderDB }) => {
             mt="12px"
             gap="12px"
             py="16px"
-            pl="16px"
+            px="16px"
             borderRadius={'4px'}
             bg="#F8FAFB"
           >
             {appendixs?.map((item) => (
               <Flex h="22px" gap="8px" alignItems={'center'} key={item.fileName}>
                 {item.fileIcon}
-                <Text fontSize={'14px'}>{item.fileName}</Text>
+                <Text fontSize={'14px'} isTruncated>
+                  {item.fileName}
+                </Text>
                 <Icon
                   xmlns="http://www.w3.org/2000/svg"
                   width="16px"