From f425103307c771840a26ed5d7177f9f49804c3e8 Mon Sep 17 00:00:00 2001 From: KubeSphere CI Bot <47586280+ks-ci-bot@users.noreply.github.com> Date: Mon, 30 Dec 2024 14:48:14 +0800 Subject: [PATCH] [master] feat: Add KubeSphere App Store usage guide (#4405) feat: Add KubeSphere App Store usage guide Signed-off-by: leioy Co-authored-by: leioy --- locales/en/ent-appStore-list.js | 12 ++ locales/es/ent-appStore-list.js | 12 ++ locales/tc/ent-appStore-list.js | 8 + locales/zh/ent-appStore-list.js | 8 + .../components/Apps/AppsDashBoard/Card.tsx | 56 +++++++ .../Apps/AppsDashBoard/UseGuide.tsx | 157 ++++++++++++++++++ .../components/Apps/AppsDashBoard/index.tsx | 3 +- 7 files changed, 255 insertions(+), 1 deletion(-) create mode 100644 packages/shared/src/components/Apps/AppsDashBoard/Card.tsx create mode 100644 packages/shared/src/components/Apps/AppsDashBoard/UseGuide.tsx diff --git a/locales/en/ent-appStore-list.js b/locales/en/ent-appStore-list.js index af622c2f498..8a3a6c51cde 100644 --- a/locales/en/ent-appStore-list.js +++ b/locales/en/ent-appStore-list.js @@ -68,4 +68,16 @@ module.exports = { VERSION_ACTIVATE_SUCCESSFUL: 'Successfully published .', SYSTEM_REPO_TYPE: 'System Warehouse', OWNER_REPO_TYPE: 'Private Warehouse', + USE_GUIDE_TITLE: 'KubeSphere App Store Usage Guide', + USE_GUIDE_DESC: + 'KubeSphere App Store provides an internal global application distribution platform for enterprises, where all applications must pass the approval of "KubeSphere App Store Management" and be listed. KubeSphere is not responsible for the after-sales maintenance of applications in the App Store.', + USE_GUIDE_DESC2: + 'If you need to create an application through KubeSphere App Store Management, please refer to the following steps:', + USE_GUIDE_STEP_1: 'Install the "KubeSphere App Store Management" extension component', + USE_GUIDE_STEP_2: + 'Create an application template in a self-built enterprise space and submit for approval', + USE_GUIDE_STEP_3: + '"Platform administrator" completes the application template approval through "KubeSphere App Store Management" and lists it in the App Store', + USE_GUIDE_STEP_4: + 'Then, users in each project can create applications through KubeSphere App Store', }; diff --git a/locales/es/ent-appStore-list.js b/locales/es/ent-appStore-list.js index 13bf7d22e4b..f794e293354 100644 --- a/locales/es/ent-appStore-list.js +++ b/locales/es/ent-appStore-list.js @@ -67,4 +67,16 @@ module.exports = { VERSION_ACTIVATE_SUCCESSFUL: 'Lanzamiento exitoso .', SYSTEM_REPO_TYPE: 'Almacén del sistema', OWNER_REPO_TYPE: 'Almacén propio', + USE_GUIDE_TITLE: 'Guía de uso de KubeSphere App Store', + USE_GUIDE_DESC: + 'KubeSphere App Store proporciona una plataforma de distribución de aplicaciones a nivel interno visible para todas las empresas, donde todas las aplicaciones deben pasar por la aprobación de "KubeSphere App Store Management" y ser listadas. KubeSphere no se hace responsable de la garantía de las aplicaciones en la App Store.', + USE_GUIDE_DESC2: + 'Si necesita crear una aplicación a través de KubeSphere App Store Management, por favor consulte los siguientes pasos:', + USE_GUIDE_STEP_1: 'Instale el componente de extensión "KubeSphere App Store Management"', + USE_GUIDE_STEP_2: + 'Cree una plantilla de aplicación en un espacio de empresa personalizado y envíela para su aprobación', + USE_GUIDE_STEP_3: + '"El administrador del sistema" aprueba la plantilla de aplicación a través de "KubeSphere App Store Management" y la lista en la App Store', + USE_GUIDE_STEP_4: + 'Luego, los usuarios de cada proyecto pueden crear aplicaciones a través de KubeSphere App Store', }; diff --git a/locales/tc/ent-appStore-list.js b/locales/tc/ent-appStore-list.js index b3773d131f9..ac5bc87e4bf 100644 --- a/locales/tc/ent-appStore-list.js +++ b/locales/tc/ent-appStore-list.js @@ -66,4 +66,12 @@ module.exports = { VERSION_ACTIVATE_SUCCESSFUL: '發佈成功。', SYSTEM_REPO_TYPE: '系統倉庫', OWNER_REPO_TYPE: '自有倉庫', + USE_GUIDE_TITLE: 'KubeSphere 應用商店使用指南', + USE_GUIDE_DESC: + 'KubeSphere 應用商店提供了面向企業內部全局可見的應用分發平台，其中所有應用均需通過 "KubeSphere 應用商店管理" 審核並上架，KubeSphere 不承擔應用商店中應用的售後維保。', + USE_GUIDE_DESC2: '若需通過KubeSphere 應用商店管理創建應用，請參考以下步驟：', + USE_GUIDE_STEP_1: '安裝"KubeSphere 應用商店管理"擴展組件', + USE_GUIDE_STEP_2: '在自建的企業空間中創建應用模板，並提交審核', + USE_GUIDE_STEP_3: '"平台管理員"通過"KubeSphere應用商店管理"完成應用模板審核後，上架到應用商店', + USE_GUIDE_STEP_4: '隨後，各項目中的用戶可以通過KubeSphere 應用商店創建應用', }; diff --git a/locales/zh/ent-appStore-list.js b/locales/zh/ent-appStore-list.js index 4d24336ac93..7015e146388 100644 --- a/locales/zh/ent-appStore-list.js +++ b/locales/zh/ent-appStore-list.js @@ -65,4 +65,12 @@ module.exports = { VERSION_ACTIVATE_SUCCESSFUL: '发布成功。', SYSTEM_REPO_TYPE: '系统仓库', OWNER_REPO_TYPE: '自有仓库', + USE_GUIDE_TITLE: 'KubeSphere 应用商店使用指南', + USE_GUIDE_DESC: + 'KubeSphere 应用商店提供了面向企业内部全局可见的应用分发平台，其中所有应用均需通过 "KubeSphere 应用商店管理" 审核并上架，KubeSphere 不承担应用商店中应用的售后维保。', + USE_GUIDE_DESC2: '若需通过KubeSphere 应用商店管理创建应用，请参考以下步骤：', + USE_GUIDE_STEP_1: '安装"KubeSphere 应用商店管理"扩展组件', + USE_GUIDE_STEP_2: '在自建的企业空间中创建应用模板，并提交审核', + USE_GUIDE_STEP_3: '"平台管理员"通过"KubeSphere应用商店管理"完成应用模板审核后，上架到应用商店', + USE_GUIDE_STEP_4: '随后，各项目中的用户可以通过KubeSphere 应用商店创建应用', }; diff --git a/packages/shared/src/components/Apps/AppsDashBoard/Card.tsx b/packages/shared/src/components/Apps/AppsDashBoard/Card.tsx new file mode 100644 index 00000000000..8c39c03151c --- /dev/null +++ b/packages/shared/src/components/Apps/AppsDashBoard/Card.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import styled from 'styled-components'; + +const CardWrapper = styled.div` + display: flex; + justify-content: center; + flex-direction: column; + background: #fff; + border-radius: 4px; + box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06); + @media (max-width: 768px) { + padding-left: 0; + } + + @media (min-width: 1164px) { + padding-left: 117px; + } +`; + +const CardHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 20px; + + .title { + display: flex; + align-items: center; + gap: 8px; + font-size: 14px; + font-weight: 600; + color: #242e42; + } +`; + +const CardContent = styled.div``; + +interface CardProps { + title: React.ReactNode; + operations?: React.ReactNode; + children?: React.ReactNode; +} + +export const Card: React.FC = ({ title, operations, children }) => { + return ( + + +
{title}
+ {operations &&
{operations}
} + + {children} + + ); +}; + +export default Card; diff --git a/packages/shared/src/components/Apps/AppsDashBoard/UseGuide.tsx b/packages/shared/src/components/Apps/AppsDashBoard/UseGuide.tsx new file mode 100644 index 00000000000..22e043c4642 --- /dev/null +++ b/packages/shared/src/components/Apps/AppsDashBoard/UseGuide.tsx @@ -0,0 +1,157 @@ +import React, { useEffect } from 'react'; +import Icon from '../../Icon'; +import { Card } from './Card'; +import styled from 'styled-components'; +import { openpitrixStore } from '../../../stores'; + +const GuideWrapper = styled.div` + margin-bottom: 12px; +`; + +const GuideContent = styled.div` + padding: 12px 20px; +`; + +const StepList = styled.div` + display: flex; + margin-top: 12px; +`; + +const Step = styled.div` + display: flex; + align-items: flex-start; + flex: 1; + position: relative; + background-color: #f9fbfd; + padding: 12px; + border-radius: 4px; + min-height: 84px; + + &:not(:last-child)::after { + content: ''; + position: absolute; + right: -36px; + top: 50%; + transform: translateY(-50%); + width: 36px; + display: flex; + justify-content: center; + } + + .step-icon { + width: 40px; + height: 40px; + margin-right: 8px; + } + + .step-content { + flex: 1; + } + + .step-title { + margin-bottom: 4px; + } + + .step-desc { + color: #79879c; + font-size: 12px; + } +`; + +const IconWrapper = styled(Icon)` + cursor: pointer; +`; + +const { useAppList } = openpitrixStore; +export const UseGuide: React.FC = () => { + const { data } = useAppList( + { workspace: undefined }, + { + autoFetch: true, + + params: { + status: 'active', + noLimit: true, + categoryID: 'all', + otherQuery: { label: 'application.kubesphere.io/repo-name=upload' }, + }, + }, + ); + + const [isGuideVisible, setIsGuideVisible] = React.useState(false); + + useEffect(() => { + setIsGuideVisible(!data?.length); + }, [data]); + + const steps = [ + { + icon: 'plug-circle-duotone', + title: t('USE_GUIDE_STEP_1'), + }, + { + icon: 'apps-duotone', + title: t('USE_GUIDE_STEP_2'), + }, + { + icon: 'cloud-shield-duotone', + title: t('USE_GUIDE_STEP_3'), + }, + { + icon: 'apps', + title: t('USE_GUIDE_STEP_4'), + }, + ]; + + return ( + + + + {t('USE_GUIDE_TITLE')} + + } + operations={ + setIsGuideVisible(!isGuideVisible)} + /> + } + > + {isGuideVisible && ( + +
{t('USE_GUIDE_DESC')}
+
{t('USE_GUIDE_DESC2')}
+ + {steps.map((step, index) => ( + + + +
+
{`${index + 1}. ${step.title}`}
+
+ + {index < steps.length - 1 && ( + + )} + + ))} + + + )} + + + ); +}; + +export default UseGuide; diff --git a/packages/shared/src/components/Apps/AppsDashBoard/index.tsx b/packages/shared/src/components/Apps/AppsDashBoard/index.tsx index b5200d31b2d..88b8bd49ff1 100644 --- a/packages/shared/src/components/Apps/AppsDashBoard/index.tsx +++ b/packages/shared/src/components/Apps/AppsDashBoard/index.tsx @@ -12,7 +12,7 @@ import { getDisplayName } from '../../../utils'; import type { CategoryDetail } from '../../../types'; import Toolbar from './Toolbar'; import Categories from './Categories'; - +import UseGuide from './UseGuide'; import { PageMain } from './styles'; const { useCategoryList } = openpitrixStore; @@ -85,6 +85,7 @@ export function AppsDashBoard(): JSX.Element { return ( <> +