Skip to content

Commit

Permalink
chore: resource support to search description of function (#232)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shenhaidada
shenhaidada authored Feb 22, 2024
1 parent 6879ad7 commit 39ce7e9
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 21 deletions.
6 changes: 2 additions & 4 deletions packages/arcodesign/components/image/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -109,7 +109,6 @@
}

.image-error-container {

.image-retry-load {
position: absolute;
top: 0;
Expand All @@ -127,7 +126,6 @@
}

.image-loading-container {

.image-loading {
position: absolute;
top: 0;
Expand Down
5 changes: 1 addition & 4 deletions packages/arcodesign/tokens/app/arcodesign/default/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -1076,5 +1074,4 @@ var tokens = {
"skeleton-medium-gutter": "0.16rem",
"skeleton-large-gutter": "0.4rem"
};
var _default = tokens;
exports["default"] = _default;
var _default = exports["default"] = tokens;
7 changes: 6 additions & 1 deletion scripts/sites/plugins/SiteGeneratePlugin/generate-resource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -253,6 +257,7 @@ export default function Demo() {
category,
filename: mdFilename,
functionName: name,
description: desc,
});

// 代码
Expand Down
12 changes: 9 additions & 3 deletions scripts/sites/plugins/SiteGeneratePlugin/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ function renderNavIntro(
}
const renderer = new marked.Renderer();
let name = '',
desc = '',
type = defaultType;
renderer.heading = (text, level) => {
if (level === 3) {
Expand All @@ -76,6 +77,7 @@ function renderNavIntro(
return '';
};
renderer.paragraph = text => {
desc = text;
return `<p class="demo-comp-desc">${text.replace('\n', '<br>')}</p>`;
};
const result = marked(readme, { renderer });
Expand All @@ -84,6 +86,7 @@ function renderNavIntro(
source: result,
name,
type,
desc,
};
}

Expand Down Expand Up @@ -191,7 +194,10 @@ function renderDemoSource(demoPath, demoName, language = 'ch') {
};

renderer.paragraph = text => {
paragraphSlotContent += `<p className='demo-code-desc-content'>${utils.getReadMeTextByLang(text, language)}</p>`;
paragraphSlotContent += `<p className='demo-code-desc-content'>${utils.getReadMeTextByLang(
text,
language,
)}</p>`;
return '';
};

Expand All @@ -205,7 +211,7 @@ function renderDemoSource(demoPath, demoName, language = 'ch') {
</div>`;
}
return '';
}
};
rendererStyle.heading = () => '';
rendererStyle.paragraph = () => '';

Expand All @@ -219,7 +225,7 @@ function renderDemoSource(demoPath, demoName, language = 'ch') {
style,
styleSource: utils.formatLessCode(styleSource),
codeSource,
paragraphSlotContent
paragraphSlotContent,
};
}

Expand Down
41 changes: 32 additions & 9 deletions sites/pc/entry/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -58,6 +60,7 @@ type IFunctionList = Record<
{
functionName: string;
category: string;
description: string;
}[]
>;

Expand Down Expand Up @@ -177,6 +180,17 @@ export default function Header(props: IHeaderProps) {
return compName.replace(regExp, '<span class="highlight-word">$1</span>');
}

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()))
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}`}
Expand All @@ -322,6 +333,18 @@ export default function Header(props: IHeaderProps) {
__html: highlightStr(ele.functionName, value),
}}
/>
<div
dangerouslySetInnerHTML={{
__html: highlightStr(
getCorrectStr(
ele.description,
value,
ele.functionName.length + ele.category.length + 4,
),
value,
),
}}
/>
</Space>
</Option>
))}
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 39ce7e9

Please sign in to comment.