feat: add land page

locales/en.json

@@ -39,6 +39,7 @@
     "Cloud management": "Cloud management",
     "Code": "Code",
     "Config": "Config",
+    "Contact your organization administrator to invite you to join": "Contact your organization administrator to invite you to join",
     "DB error": "DB error",
     "Dashboard": "Dashboard",
     "Data source: API call management": "Data source: API call management",
@@ -63,6 +64,7 @@
     "Good morning": "Good morning",
     "Group": "Group",
     "Hangzhou": "Hangzhou",
+    "Haven't join any org": "Haven't join any org",
     "Heyuan": "Heyuan",
     "Hong Kong": "Hong Kong",
     "Huhhot": "Huhhot",
@@ -89,6 +91,7 @@
     "Mon": "Mon",
     "Mumbai": "Mumbai",
     "New version available": "New version available",
+    "No matching organization": "No matching organization",
     "North China {num}": "North China {num}",
     "Note: The precondition to create access management is that the API must first complete the project association and version instance association.": "Note: The precondition to create access management is that the API must first complete the project association and version instance association.",
     "Note: The {resource} quota you entered has exceeded the remaining resources of the cluster in {workSpace}. Further allocation will preempt resources on a first-used, first-served basis.": "Note: The {resource} quota you entered has exceeded the remaining resources of the cluster in {workSpace}. Further allocation will preempt resources on a first-used, first-served basis.",
@@ -125,6 +128,7 @@
     "SMS Template Code": "SMS Template Code",
     "SMS signature": "SMS signature",
     "Sat": "Sat",
+    "Search results are empty": "Search results are empty",
     "September": "September",
     "Server address": "Server address",
     "Server port": "Server port",
@@ -171,7 +175,6 @@
     "You can use ClientID and ClientSecret below to access API instance after approval.": "You can use ClientID and ClientSecret below to access API instance after approval.",
     "You do not have enough permissions": "You do not have enough permissions",
     "You have a notification message from the Erda platform": "You have a notification message from the Erda platform",
-    "You haven't joined current organization.": "You haven't joined current organization.",
     "Zhangjiakou": "Zhangjiakou",
     "abnormal": "abnormal",
     "absolute time range": "absolute time range",
@@ -543,6 +546,7 @@
     "keywords": "keywords",
     "label": "label",
     "label tip": "label tip",
+    "land page": "land page",
     "last login time": "last login time",
     "last month": "last month",
     "last week": "last week",

locales/zh.json

@@ -39,6 +39,7 @@
     "Cloud management": "多云管理平台",
     "Code": "代码",
     "Config": "配置",
+    "Contact your organization administrator to invite you to join": "联系组织管理员，邀请您加入",
     "DB error": "数据库错误",
     "Dashboard": "大盘",
     "Data source: API call management": "数据来源：我的 API 申请调用管理",
@@ -63,6 +64,7 @@
     "Good morning": "上午好",
     "Group": "群组",
     "Hangzhou": "杭州",
+    "Haven't join any org": "暂无组织",
     "Heyuan": "河源",
     "Hong Kong": "香港",
     "Huhhot": "呼和浩特",
@@ -89,6 +91,7 @@
     "Mon": "一",
     "Mumbai": "孟买",
     "New version available": "新版本可用",
+    "No matching organization": "没有搜索到匹配的组织",
     "North China {num}": "华北{num}",
     "Note: The precondition to create access management is that the API must first complete the project association and version instance association.": "注意: 创建访问管理前置条件为，该 API 必须先完成项目关联 -> 版本实例关联",
     "Note: The {resource} quota you entered has exceeded the remaining resources of the cluster in {workSpace}. Further allocation will preempt resources on a first-used, first-served basis.": "注意：您填写的 {resource} 配额已超过该集群在{workSpace}的剩余资源，继续分配会按先用先得的方式抢占资源。",
@@ -125,6 +128,7 @@
     "SMS Template Code": "短信模板 Code",
     "SMS signature": "短信签名",
     "Sat": "六",
+    "Search results are empty": "搜索结果为空",
     "September": "9月",
     "Server address": "服务器地址",
     "Server port": "服务器端口",
@@ -171,7 +175,6 @@
     "You can use ClientID and ClientSecret below to access API instance after approval.": "待审批通过后, 您可以使用以下的 ClientID 和 ClientSecret 访问 API 实例。",
     "You do not have enough permissions": "您的权限不足",
     "You have a notification message from the Erda platform": "你有一条来自 Erda 平台的通知消息",
-    "You haven't joined current organization.": "您还未加入当前组织",
     "Zhangjiakou": "张家口",
     "abnormal": "异常",
     "absolute time range": "自定时间范围",
@@ -543,6 +546,7 @@
     "keywords": "关键词",
     "label": "标签",
     "label tip": "标签提示",
+    "land page": "着陆页",
     "last login time": "最近登录时间",
     "last month": "上个月",
     "last week": "上周",

shell/app/App-vite.tsx

@@ -20,7 +20,6 @@ import 'moment/locale/zh-cn';
 import { Pagination, message, ConfigProvider, Modal } from 'antd';
 import antd_zhCN from 'antd/es/locale-provider/zh_CN';
 import antd_enUS from 'antd/es/locale-provider/en_US';
-import { IconProvider, DEFAULT_ICON_CONFIGS } from '@icon-park/react/es/runtime';
 // core modules
 import { isZh } from 'core/i18n';
 import { startApp, registerModule } from 'core/index';
@@ -80,7 +79,9 @@ const start = (userData: ILoginUser, orgs: ORG.IOrg[]) => {
   startApp().then(async (App) => {
     // get the organization info first, or will get org is undefined when need org info (like issueStore)
     const orgName = get(location.pathname.split('/'), '[1]');
-    await orgStore.effects.getOrgByDomain({ orgName });
+    if (orgName) {
+      await orgStore.effects.getOrgByDomain({ orgName });
+    }
     [
       import('layout/entry'),
       import('org/entry'),
@@ -146,11 +147,6 @@ const init = (userData: ILoginUser) => {
       // TODO check if admin has org permissions
       getJoinedOrgs().then((orgResult) => {
         const orgs = orgResult.data?.list || [];
-        if (location.pathname === '/') {
-          // replace to default org
-          const defaultOrgPath = `/${orgs?.[0]?.name || '-'}`;
-          history.replace(defaultOrgPath);
-        }
         start(perRes, orgs);
       });
     });

shell/app/App.tsx

@@ -20,7 +20,6 @@ import 'moment/locale/zh-cn';
 import { Pagination, message, ConfigProvider, Modal } from 'antd';
 import antd_zhCN from 'antd/es/locale-provider/zh_CN';
 import antd_enUS from 'antd/es/locale-provider/en_US';
-import { IconProvider, DEFAULT_ICON_CONFIGS } from '@icon-park/react/es/runtime';
 // core modules
 import { isZh } from 'core/i18n';
 import { startApp, registerModule } from 'core/index';
@@ -77,7 +76,9 @@ const start = (userData: ILoginUser, orgs: ORG.IOrg[]) => {
   startApp().then(async (App) => {
     // get the organization info first, or will get org is undefined when need org info (like issueStore)
     const orgName = get(location.pathname.split('/'), '[1]');
-    await orgStore.effects.getOrgByDomain({ orgName });
+    if (orgName) {
+      await orgStore.effects.getOrgByDomain({ orgName });
+    }
     [
       import('layout/entry'),
       import('org/entry'),
@@ -144,11 +145,6 @@ const init = (userData: ILoginUser) => {
       // TODO check if admin has org permissions
       getJoinedOrgs().then((orgResult) => {
         const orgs = orgResult.data?.list || [];
-        if (location.pathname === '/') {
-          // replace to default org
-          const defaultOrgPath = `/${orgs?.[0]?.name || '-'}`;
-          history.replace(defaultOrgPath);
-        }
         start(perRes, orgs);
       });
     });

shell/app/common/utils/go-to.tsx

@@ -119,11 +119,11 @@ const pathFormat = (url: string) => (params: object) => {
 goTo.pagePrefix = '__dice__'; // 防止goTo传入同名参数
 
 export enum pages {
+  landPage = '',
   noAuth = '/{orgName}/noAuth',
   perm = '/{orgName}/perm?scope={scope}',
   inviteToOrg = '/{orgName}/inviteToOrg',
   freshMan = '/{orgName}/freshMan',
-  notFound = '/{orgName}/notFound',
 
   // dop
   orgRoot = '/{orgName}',

shell/app/layout/common/error-page.tsx

@@ -13,12 +13,13 @@
 
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Icon as CustomIcon } from 'common';
+import { ErdaIcon, Icon as CustomIcon } from 'common';
 import { Button, Spin } from 'antd';
 import i18n from 'i18n';
 import { goTo } from 'common/utils';
 import userStore from 'app/user/stores';
 import permStore from 'user/stores/permission';
+import springBg from 'app/images/land-spring.jpg';
 
 import './error-page.scss';
 
@@ -134,17 +135,61 @@ const NotFound = ({ message, force }: { message?: string; force?: boolean }) =>
 };
 
 const NotJoinOrg = () => {
-  const joinOrgTip = userStore.useStore((s) => s.joinOrgTip);
+  const [orgs] = userStore.useStore((s) => [s.orgs]);
+  const [activeOrg, setActiveOrg] = React.useState<any>(null);
+  const [showOptions, setShowOptions] = React.useState(false);
+  const [filterKey, setFilterKey] = React.useState('');
+
+  const filteredList = orgs.filter((org) => org.displayName?.toLowerCase().includes(filterKey.toLowerCase()));
 
   return (
-    <div className="basic-error-page">
-      <div className="info">
-        <CustomIcon type="no-auth" color />
-        <div className="desc">
-          <span>{i18n.t("You haven't joined current organization.")}</span>
-          <span className="contact-info">
-            {i18n.t('please contact')} {joinOrgTip}
-          </span>
+    <div className="land-page flex items-center justify-center h-full">
+      <div className="absolute left-20 top-5">
+        <ErdaIcon className="text-white" size={60} type="erda" />
+      </div>
+      <img className="bg-image" src={springBg} alt="background-image" />
+      <div className="content text-white z-10">
+        <div className="title">
+          <div>{i18n.t('layout:Global optimization')}</div>
+          <div>{i18n.t('layout:Help enterprises to create an agile R & D organization')}</div>
+        </div>
+        <div className="mt-8 org-select-text">{i18n.t('layout:Choose your organization space')}</div>
+        <div
+          className={`mt-4 rounded-sm h-16 py-5 text-default cursor-pointer flex items-center justify-between org-select  ${
+            showOptions ? 'showOptions' : ''
+          }`}
+        >
+          <input
+            className="input"
+            type="text"
+            value={activeOrg?.displayName || filterKey}
+            onChange={(e) => setFilterKey(e.target.value)}
+            onFocus={() => setShowOptions(true)}
+            onBlur={() => setShowOptions(false)}
+          />
+          <div className="tip text-default-6">{i18n.t('layout:Organizational space')}</div>
+          <ErdaIcon className="icon mr-6" size={20} type="caret-down" />
+          <div className="options">
+            {filteredList.map((org) => {
+              return (
+                <a key={org.id} href={`/${org.name}`}>
+                  <div
+                    className={`option flex items-center px-2 h-[76px] cursor-pointer hover:bg-default-04 ${
+                      org.id === activeOrg?.id ? 'active' : ''
+                    }`}
+                    onMouseEnter={() => setActiveOrg(org)}
+                    onMouseLeave={() => setActiveOrg(null)}
+                  >
+                    <img className="w-10 h-10 rounded-sm mr-2" src={org.logo} alt="" />
+                    <div>
+                      <div className="org-name">{org.displayName}</div>
+                      <div className="org-sub-name text-xs text-desc">{org.desc}</div>
+                    </div>
+                  </div>
+                </a>
+              );
+            })}
+          </div>
         </div>
       </div>
     </div>

shell/app/layout/pages/page-container/error-layout.scss → shell/app/layout/pages/page-container/layout.scss

@@ -5,3 +5,9 @@
   flex-direction: column;
   overflow: hidden;
 }
+
+.empty-layout {
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}

shell/app/layout/pages/page-container/error-layout.tsx → shell/app/layout/pages/page-container/layout.tsx

@@ -15,7 +15,7 @@ import Header from 'layout/pages/page-container/components/header';
 import Navigation from 'layout/pages/page-container/components/navigation';
 import React from 'react';
 import './page-container.scss';
-import './error-layout.scss';
+import './layout.scss';
 
 interface IProps {
   layoutClass: string;
@@ -33,3 +33,7 @@ export const ErrorLayout = ({ layoutClass, children }: IProps) => {
     </div>
   );
 };
+
+export const EmptyLayout = ({ children }: IProps) => {
+  return <div className="empty-layout">{children}</div>;
+};

shell/app/layout/pages/page-container/page-container.tsx

@@ -34,13 +34,14 @@ import routeInfoStore from 'core/stores/route';
 import { LSObserver } from 'common/utils';
 import { Card } from 'antd';
 import Shell from './components/shell';
-import { ErrorLayout } from './error-layout';
+import { ErrorLayout, EmptyLayout } from './layout';
 import { eventHub } from 'common/utils/event-hub';
 import orgStore from 'app/org-home/stores/org';
 import './page-container.scss';
 
 const layoutMap = {
   error: ErrorLayout,
+  empty: EmptyLayout,
 };
 
 interface IProps {

shell/app/layout/router.ts → shell/app/layout/router.tsx

@@ -11,38 +11,24 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
+import React from 'react';
 import i18n from 'core/i18n';
+import { Redirect } from 'react-router-dom';
 
 function getLayoutRouter(): RouteConfigItem[] {
   return [
     {
       path: 'noAuth',
       toMark: 'orgIndex',
-      breadcrumbName: i18n.t('layout:error page'),
-      getComp: (cb) => cb(import('layout/common/error-page'), 'NoAuth'),
-      layout: {
-        use: 'error',
-        noWrapper: true,
+      render: () => {
+        return <Redirect to="" />;
       },
     },
     {
       path: 'freshMan',
       toMark: 'orgIndex',
-      breadcrumbName: i18n.t('layout:error page'),
-      getComp: (cb) => cb(import('layout/common/error-page'), 'NotJoinOrg'),
-      layout: {
-        use: 'error',
-        noWrapper: true,
-      },
-    },
-    {
-      path: 'notFound',
-      toMark: 'orgIndex',
-      breadcrumbName: i18n.t('layout:error page'),
-      getComp: (cb) => cb(import('layout/common/error-page'), 'NotFound'),
-      layout: {
-        use: 'error',
-        noWrapper: true,
+      render: () => {
+        return <Redirect to="" />;
       },
     },
     {

shell/app/locales/en.json

@@ -1942,12 +1942,15 @@
     "site management": "site management"
   },
   "layout": {
+    "Choose your organization space": "Choose your organization space",
+    "Global optimization": "Global optimization",
+    "Help enterprises to create an agile R & D organization": "Help enterprises to create an agile R & D organization",
+    "Organizational space": "Organizational space",
     "announcement": "announcement",
     "approval": "approval",
     "back to application list": "back to application list",
     "back to dop": "back to DevOps platform",
     "certificate": "certificate",
-    "error page": "error page",
     "join organization": "join organization",
     "logout": "logout",
     "mobile development management": "mobile development management",
@@ -2503,7 +2506,6 @@
     "specified path": "specified path",
     "splice the URL with the prefix removed, and forward the request": "splice the URL with the prefix removed, and forward the request",
     "stack information": "stack information",
-    "start time": "start time",
     "statistics details": "statistics details",
     "status code": "status code",
     "stopped instance": "stopped instance",

shell/app/locales/zh.json

@@ -1942,12 +1942,15 @@
     "site management": "站点管理"
   },
   "layout": {
+    "Choose your organization space": "选择您的组织空间",
+    "Global optimization": "全局优化",
+    "Help enterprises to create an agile R & D organization": "助力企业打造敏捷型研发组织",
+    "Organizational space": "组织空间",
     "announcement": "公告",
     "approval": "审批管理",
     "back to application list": "返回应用列表",
     "back to dop": "返回 DevOps 平台",
     "certificate": "证书管理",
-    "error page": "错误页面",
     "join organization": "加入组织",
     "logout": "退出登录",
     "mobile development management": "移动开发管理",
@@ -2503,7 +2506,6 @@
     "specified path": "指定路径",
     "splice the URL with the prefix removed, and forward the request": "拼接移除前缀的URL，转发请求",
     "stack information": "堆栈信息",
-    "start time": "起始时间",
     "statistics details": "统计详情",
     "status code": "状态码",
     "stopped instance": "停止实例",