From 39ce7e9dacd9de898cb93805b51808bacd12185a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B7=B1=E6=B5=B7=E5=A4=A7=E5=A4=A7ovo?= Date: Thu, 22 Feb 2024 19:27:32 +0800 Subject: [PATCH] chore: resource support to search description of function (#232) --- .../components/image/style/index.less | 6 +-- .../tokens/app/arcodesign/default/index.js | 5 +-- .../SiteGeneratePlugin/generate-resource.js | 7 +++- .../plugins/SiteGeneratePlugin/helpers.js | 12 ++++-- sites/pc/entry/header/index.tsx | 41 +++++++++++++++---- 5 files changed, 50 insertions(+), 21 deletions(-) diff --git a/packages/arcodesign/components/image/style/index.less b/packages/arcodesign/components/image/style/index.less index 684b4452..dac813b5 100644 --- a/packages/arcodesign/components/image/style/index.less +++ b/packages/arcodesign/components/image/style/index.less @@ -1,11 +1,11 @@ -@import "../../../style/mixin.less"; +@import '../../../style/mixin.less'; .@{prefix}-image { display: inline-block; position: relative; &.preview { - transition: all .3s ease-in-out; + transition: all 0.3s ease-in-out; .image-container, .image-loading-container .image-loading, @@ -109,7 +109,6 @@ } .image-error-container { - .image-retry-load { position: absolute; top: 0; @@ -127,7 +126,6 @@ } .image-loading-container { - .image-loading { position: absolute; top: 0; diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.js b/packages/arcodesign/tokens/app/arcodesign/default/index.js index bd416eb1..e93a7120 100644 --- a/packages/arcodesign/tokens/app/arcodesign/default/index.js +++ b/packages/arcodesign/tokens/app/arcodesign/default/index.js @@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", { }); exports["default"] = void 0; exports.getRem = getRem; - function getRem(px, baseFontSize) { var num = Math.round(px / Number(baseFontSize) * 1000000) / 1000000; return num ? "".concat(num, "rem") : num; } - var tokens = { "prefix": "arco", "base-font-size": "50", @@ -1076,5 +1074,4 @@ var tokens = { "skeleton-medium-gutter": "0.16rem", "skeleton-large-gutter": "0.4rem" }; -var _default = tokens; -exports["default"] = _default; \ No newline at end of file +var _default = exports["default"] = tokens; \ No newline at end of file diff --git a/scripts/sites/plugins/SiteGeneratePlugin/generate-resource.js b/scripts/sites/plugins/SiteGeneratePlugin/generate-resource.js index a8b24c18..055fd4b4 100644 --- a/scripts/sites/plugins/SiteGeneratePlugin/generate-resource.js +++ b/scripts/sites/plugins/SiteGeneratePlugin/generate-resource.js @@ -242,7 +242,11 @@ export default function Demo() { // 各部分内容使用======分隔开 const funcSplit = md.split(/=====+/); // 介绍 - const { source: introSource, name } = renderNavIntro( + const { + source: introSource, + name, + desc, + } = renderNavIntro( index === 0 ? typeStr + funcSplit[0] : funcSplit[0], localeMap.developmentResource[language], 'type', @@ -253,6 +257,7 @@ export default function Demo() { category, filename: mdFilename, functionName: name, + description: desc, }); // 代码 diff --git a/scripts/sites/plugins/SiteGeneratePlugin/helpers.js b/scripts/sites/plugins/SiteGeneratePlugin/helpers.js index 97b1fb54..6e827e3a 100644 --- a/scripts/sites/plugins/SiteGeneratePlugin/helpers.js +++ b/scripts/sites/plugins/SiteGeneratePlugin/helpers.js @@ -57,6 +57,7 @@ function renderNavIntro( } const renderer = new marked.Renderer(); let name = '', + desc = '', type = defaultType; renderer.heading = (text, level) => { if (level === 3) { @@ -76,6 +77,7 @@ function renderNavIntro( return ''; }; renderer.paragraph = text => { + desc = text; return `

${text.replace('\n', '
')}

`; }; const result = marked(readme, { renderer }); @@ -84,6 +86,7 @@ function renderNavIntro( source: result, name, type, + desc, }; } @@ -191,7 +194,10 @@ function renderDemoSource(demoPath, demoName, language = 'ch') { }; renderer.paragraph = text => { - paragraphSlotContent += `

${utils.getReadMeTextByLang(text, language)}

`; + paragraphSlotContent += `

${utils.getReadMeTextByLang( + text, + language, + )}

`; return ''; }; @@ -205,7 +211,7 @@ function renderDemoSource(demoPath, demoName, language = 'ch') { `; } return ''; - } + }; rendererStyle.heading = () => ''; rendererStyle.paragraph = () => ''; @@ -219,7 +225,7 @@ function renderDemoSource(demoPath, demoName, language = 'ch') { style, styleSource: utils.formatLessCode(styleSource), codeSource, - paragraphSlotContent + paragraphSlotContent, }; } diff --git a/sites/pc/entry/header/index.tsx b/sites/pc/entry/header/index.tsx index 2f4ea185..4ce370f4 100644 --- a/sites/pc/entry/header/index.tsx +++ b/sites/pc/entry/header/index.tsx @@ -13,10 +13,12 @@ import LogoPicture from '../../../components/logo-pic'; import './index.less'; const options = { - threshold: 0.3, + threshold: 0.6, includeMatches: true, - keys: ['functionName'], + keys: ['functionName', 'description'], }; +const AUTO_COMPLETE_WIDTH = 480; +const OPTION_HORIZONTAL_PADDING = 20; const fuse = new Fuse(searchResource, options); @@ -58,6 +60,7 @@ type IFunctionList = Record< { functionName: string; category: string; + description: string; }[] >; @@ -177,6 +180,17 @@ export default function Header(props: IHeaderProps) { return compName.replace(regExp, '$1'); } + function getCorrectStr(text: string, target: string, otherTextLength: number) { + const textWidth = + AUTO_COMPLETE_WIDTH - 2 * OPTION_HORIZONTAL_PADDING - 16 - otherTextLength * 13 * 0.647; + const displayLength = textWidth / 13 / 0.647; // 可以展示的字符数 + const targetIndex = text.indexOf(target); + if (displayLength < text.length && targetIndex + target.length > displayLength) { + return `...${text.slice(targetIndex + target.length - displayLength + 5)}`; + } + return text; + } + function getMatchMeta(inputValue: string) { return headerData.flattenMeta .filter(comp => ~comp.name.toLowerCase().indexOf(inputValue.toLowerCase())) @@ -212,10 +226,7 @@ export default function Header(props: IHeaderProps) { if (targetFileNameIndex === -1) { temp[contentItem.filename] = []; } - temp[contentItem.filename].push({ - functionName: contentItem.functionName, - category: contentItem.category, - }); + temp[contentItem.filename].push(contentItem); }); setFunctionList(temp); } @@ -273,7 +284,7 @@ export default function Header(props: IHeaderProps) { style={{ height: 'auto', lineHeight: 1.5715, - padding: '12px 20px', + padding: `12px ${OPTION_HORIZONTAL_PADDING}px`, }} key={index} value={index} @@ -303,7 +314,7 @@ export default function Header(props: IHeaderProps) { style={{ height: 'auto', lineHeight: 1.5715, - padding: '12px 20px', + padding: `12px ${OPTION_HORIZONTAL_PADDING}px`, }} key={`${ele.functionName}-${idx}`} value={`${ele.functionName}}-${idx}`} @@ -322,6 +333,18 @@ export default function Header(props: IHeaderProps) { __html: highlightStr(ele.functionName, value), }} /> +
))} @@ -383,7 +406,7 @@ export default function Header(props: IHeaderProps) { triggerProps={{ childrenPrefix: 'arco-search-input', unmountOnExit: false, - popupStyle: { width: 480, padding: 0 }, + popupStyle: { width: AUTO_COMPLETE_WIDTH, padding: 0 }, }} value={value} onChange={onChangeInput}