diff --git a/packages/app-card-ui/package.json b/packages/app-card-ui/package.json index 184914a..d868c13 100644 --- a/packages/app-card-ui/package.json +++ b/packages/app-card-ui/package.json @@ -1,6 +1,6 @@ { "name": "@serverless-cd/app-card-ui", - "version": "0.0.8", + "version": "0.0.13", "scripts": { "start": "dumi dev", "docs:build": "dumi build", @@ -19,7 +19,7 @@ "typings": "dist/esm/index.d.ts", "dependencies": { "@alicloud/console-components-slide-panel": "^2.2.14", - "@serverless-cd/ui-help": "^0.0.2", + "@serverless-cd/ui-help": "^0.0.9", "axios": "^1.2.2", "qs": "^6.11.0", "react-markdown": "^8.0.4", @@ -38,9 +38,13 @@ "access": "public" }, "devDependencies": { + "@alicloud/console-components": ">=1.0.0", + "@types/jest": "^29.5.6", "@types/qs": "^6.9.7", "dumi": "^1.1.0", - "father": "^4.0.0-rc.2" + "father": "^4.0.0-rc.2", + "moment": "^2.29.4", + "styled-components": "^6.1.0" }, "repository": "git@github.com:g-fengchen/ui.git" -} \ No newline at end of file +} diff --git a/packages/app-card-ui/src/components/readme/Nav.tsx b/packages/app-card-ui/src/components/readme/Nav.tsx index 9607e8c..c2052bc 100644 --- a/packages/app-card-ui/src/components/readme/Nav.tsx +++ b/packages/app-card-ui/src/components/readme/Nav.tsx @@ -7,6 +7,7 @@ export enum NavKey { codepre = 'codepre', appdetail = 'appdetail', usedetail = 'usedetail', + matters = 'matters', local_experience = 'local_experience', disclaimers = 'disclaimers', } @@ -27,9 +28,13 @@ const navs = [ title: i18n('ui.application.usage.document'), }, { - key: NavKey.local_experience, - title: i18n('ui.local_experience'), + key: NavKey.matters, + title: i18n('ui.application.matters.document'), }, + // { + // key: NavKey.local_experience, + // title: i18n('ui.local_experience'), + // }, { key: NavKey.disclaimers, title: i18n('ui.project.disclaimer'), @@ -68,6 +73,7 @@ const Nav: FC = (props) => { const scrollBottom = scrollHeight - scrollTop - clientHeight; const appdetail = document.getElementById(NavKey.appdetail); const usedetail = document.getElementById(NavKey.usedetail); + const matters = document.getElementById(NavKey.matters); const local_experience = document.getElementById(NavKey.local_experience); const disclaimers = document.getElementById(NavKey.disclaimers); @@ -81,6 +87,8 @@ const Nav: FC = (props) => { setActiveKey(NavKey.usedetail); } else if (scrollTop < disclaimers.offsetTop - FIX_HEIGHT) { setActiveKey(NavKey.local_experience); + } else if (scrollTop < matters.offsetTop - FIX_HEIGHT) { + setActiveKey(NavKey.matters); } }, 300); @@ -90,7 +98,7 @@ const Nav: FC = (props) => { const scrollElement = document.getElementsByClassName('panel-body')[0]; const anchorElement = document.getElementById(id); scrollElement.scrollTo({ - top: anchorElement.offsetTop - 90, + top: anchorElement?.offsetTop - 90, }); setTimeout(() => { scrollRef.current.listen = true; diff --git a/packages/app-card-ui/src/components/readme/index.tsx b/packages/app-card-ui/src/components/readme/index.tsx index 504977e..6a33ccf 100644 --- a/packages/app-card-ui/src/components/readme/index.tsx +++ b/packages/app-card-ui/src/components/readme/index.tsx @@ -1,16 +1,22 @@ -import React, { FC, useState, PropsWithChildren } from 'react'; +import { + Balloon, + Button, + Icon, + Loading, + Message, +} from '@alicloud/console-components'; import { SlidePanel } from '@alicloud/console-components-slide-panel'; -import { Loading, Balloon, Message, Button, Icon } from '@alicloud/console-components'; -import Nav, { NavKey } from './Nav'; -import ExternalLink from './ExternalLink'; -import ReactMarkdown from './ReactMarkdown'; -import GithubIcon from './GithubIcon'; import { parseReadme } from '@serverless-cd/ui-help'; -import { i18n, copyText, lang } from '../../utils'; import axios from 'axios'; +import { find, get, isEmpty, isFunction, map, isNumber } from 'lodash'; import qs from 'qs'; -import { get, isEmpty, map, find, isFunction } from 'lodash'; -import { IApiTypeVal, IApiType } from '../../types'; +import React, { FC, PropsWithChildren, useState } from 'react'; +import { IApiType, IApiTypeVal } from '../../types'; +import { copyText, i18n, lang } from '../../utils'; +import ExternalLink from './ExternalLink'; +import GithubIcon from './GithubIcon'; +import Nav, { NavKey } from './Nav'; +import ReactMarkdown from './ReactMarkdown'; function copy(val) { copyText(val); @@ -32,6 +38,7 @@ export type Props = PropsWithChildren & { visible?: boolean; env?: 'vscode' | 'web'; fetchReadme?: () => Promise; + isV3?: boolean; }; const AliReadme: FC = (props) => { @@ -46,11 +53,13 @@ const AliReadme: FC = (props) => { activeTab, fetchReadme, visible: readmeVisible = false, + isV3 = false, } = props; const [visible, setVisible] = useState(readmeVisible); const [loading, setLoading] = useState(false); const [readmeInfo, setReadmeInfo] = useState({}); + const fetchApps = async () => { try { const result = await axios({ @@ -85,9 +94,17 @@ const AliReadme: FC = (props) => { const fetchData = async () => { setLoading(true); - const [app, content] = await Promise.all([fetchApps(), fetchContent()]); - const appInfo = find(app, (item) => item.package === name); - if (content.match(/(?=)/)) { + const [content, appInfo] = await getTemplateInfo(name); + if (isNumber(name)) { + const data = parseReadme(content); + setReadmeInfo({ + ...data, + logo: get(appInfo, 'logo'), + description: get(appInfo, 'description'), + codeUrl: get(appInfo, 'codeUrl'), + previewUrl: get(appInfo, 'previewUrl'), + }); + } else if (content.match(/(?=)/)) { const data = parseReadme(content); setReadmeInfo({ ...data, @@ -102,6 +119,55 @@ const AliReadme: FC = (props) => { setLoading(false); }; + const getTemplateInfo = async (name) => { + const v3Info = await fetchV3(name); + if (isEmpty(v3Info)) { + const v2Info = await fetchV2(name); + return v2Info + } else { + return v3Info + } + } + + const fetchV3 = async (name) => { + const { version = {}, package: app = {} } = await getAppV3(name); + if (!isEmpty(version)) return [version.readme, app]; + else [] + }; + + const fetchV2 = async (name) => { + const [app, content] = await Promise.all([fetchApps(), fetchContent()]); + const appInfo = find(app, (item) => item.package === name); + return [content, appInfo] + }; + + const getAppV3 = async (projectName) => { + try { + const result = await axios({ + method: 'get', + url: `https://api.devsapp.cn/v3/console/project/${projectName}?lang=${lang()}`, + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + }); + const Response = get(result, 'data.body', {}); + + return { + ...Response, + package: { + ...get(Response, 'package', {}), + package: get(Response, 'package.name'), + codeUrl: get(Response, 'repo'), + previewUrl: get(Response, 'demo'), + logo: get(Response, 'logo'), + title: Response.name, + }, + }; + } catch (e) { + return {}; + } + }; + const doFetchReadme = async () => { setLoading(true); try { @@ -199,7 +265,9 @@ const AliReadme: FC = (props) => { }; const renderBody = () => { if (loading) { - return ; + return ( + + ); } // 兼容旧模版 if (typeof readmeInfo === 'string') { @@ -208,8 +276,14 @@ const AliReadme: FC = (props) => { return (