chore: replace all cn comments of fe to en version by volc api (#320)
This commit is contained in:
@@ -36,9 +36,9 @@
|
||||
border-radius: 6px;
|
||||
|
||||
/*
|
||||
* 如此写边框和设置背景色的原因
|
||||
* 1、边框是内边框,处于图片的边缘上,因此需要用after来写
|
||||
* 2、背景色用before实体来写,是由于 border和背景色都是透明色,重叠会导致颜色加重,出现边框
|
||||
* The reason for writing borders and setting background colors like this
|
||||
* 1. The border is the inner border, which is on the edge of the picture, so you need to use after to write
|
||||
* 2. The background color is written with the before entity, because the border and background colors are both transparent colors. Overlapping will cause the color to increase and the border will appear.
|
||||
*/
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
@@ -46,7 +46,7 @@ interface HeaderProps {
|
||||
action: 'cancel' | 'add',
|
||||
event?: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
|
||||
) => boolean | Promise<boolean>;
|
||||
/**兼容UI1.0&2.0 全部替换后去除 */
|
||||
/**Compatible with UI 1.0 & 2.0 Remove after all replacements */
|
||||
isNewStyle?: boolean;
|
||||
isForbiddenIconClick?: boolean;
|
||||
}
|
||||
@@ -72,7 +72,7 @@ export const FavoriteBtn = forwardRef((props: HeaderProps, ref) => {
|
||||
const refFavoriteBtn = useRef<FavoriteIconBtnRef>(null);
|
||||
const [favoriteNumberAdd, setFavoriteNumberAdd] = useState(0);
|
||||
|
||||
// 该数字不能小于0, 防止出现异常数字
|
||||
// The number cannot be less than 0 to prevent abnormal numbers
|
||||
const favoriteNum = Math.max(
|
||||
0,
|
||||
(Number(favoriteCount) || 0) + (Number(favoriteNumberAdd) || 0),
|
||||
@@ -100,7 +100,7 @@ export const FavoriteBtn = forwardRef((props: HeaderProps, ref) => {
|
||||
isForbiddenClick={isForbiddenIconClick}
|
||||
onChange={value => {
|
||||
setFavoriteNumberAdd(prevNumber =>
|
||||
//该值再 1和 -1 之间。
|
||||
//The value is between 1 and -1.
|
||||
Math.min(Math.max(prevNumber + (Number(value) || 0), -1), 1),
|
||||
);
|
||||
}}
|
||||
|
||||
@@ -35,7 +35,7 @@ export const useFavoriteStatusRequest = ({
|
||||
setIsFavorite(!isCurFavorite);
|
||||
try {
|
||||
await ProductApi.PublicFavoriteProduct({
|
||||
// 后端不能处理空字符串
|
||||
// Backend cannot handle empty strings
|
||||
product_id: productId || undefined,
|
||||
entity_type: entityType as ProductEntityType,
|
||||
is_cancel: isCurFavorite,
|
||||
|
||||
@@ -51,7 +51,7 @@ export const useFavoriteChange = ({
|
||||
});
|
||||
const refIsChange = useRef(false);
|
||||
|
||||
// 改变状态前,先做前置请求,判断是否需要放弃本次状态变更,如果 onClickBefore 返回 false,则不进行变更。
|
||||
// Before changing the state, make a pre-request to determine whether the state change needs to be abandoned. If onClickBefore returns false, no change will be made.
|
||||
const onClickBeforeHandle = useMemoizedFn(
|
||||
async (
|
||||
action: ClickAction,
|
||||
@@ -70,7 +70,7 @@ export const useFavoriteChange = ({
|
||||
const onClick = useCallback(
|
||||
async (event?: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
|
||||
if (refIsChange.current) {
|
||||
// 进行中,直接返回,不做处理
|
||||
// In progress, return directly, no processing
|
||||
event?.stopPropagation?.();
|
||||
event?.preventDefault?.();
|
||||
return;
|
||||
|
||||
@@ -27,11 +27,11 @@ export interface FavoriteCommParams {
|
||||
action: 'cancel' | 'add',
|
||||
event?: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
|
||||
) => boolean | Promise<boolean>;
|
||||
onChange?: (num) => void; // 当收藏状态真正变化的时候,回调
|
||||
onChange?: (num) => void; // When the collection status really changes, call back
|
||||
}
|
||||
|
||||
export interface FavoriteIconBtnProps extends FavoriteCommParams {
|
||||
onFavoriteStateChange?: (isFavorite: boolean) => void; // 当收藏icon的显示状态变化的时候,回调
|
||||
onFavoriteStateChange?: (isFavorite: boolean) => void; // When the display state of the favorite icon changes, call back
|
||||
isVisible: boolean;
|
||||
onReportTea?: (action: 'cancel' | 'add') => void;
|
||||
unCollectedIconCls?: string;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import {
|
||||
useState,
|
||||
useRef,
|
||||
@@ -31,13 +31,13 @@ import {
|
||||
|
||||
import { type ScrollProps, type InfiniteListDataProps } from '../type';
|
||||
|
||||
/* 滚动Hooks */
|
||||
/* Rolling Hooks */
|
||||
|
||||
function useForwardFunc<T>(
|
||||
dataInfo: InfiniteListDataProps<T>,
|
||||
mutate: Dispatch<SetStateAction<InfiniteListDataProps<T>>>,
|
||||
) {
|
||||
// 手动插入数据,不通过接口
|
||||
// Insert data manually, without going through the interface
|
||||
const insertData = (item, index) => {
|
||||
dataInfo.list.splice(index, 0, item);
|
||||
mutate({
|
||||
@@ -46,7 +46,7 @@ function useForwardFunc<T>(
|
||||
});
|
||||
};
|
||||
|
||||
// 手动删除数据,不通过接口
|
||||
// Delete data manually, without going through the interface
|
||||
const removeData = index => {
|
||||
dataInfo.list.splice(index, 1);
|
||||
mutate({
|
||||
@@ -60,7 +60,7 @@ function useForwardFunc<T>(
|
||||
return { insertData, removeData, getDataList };
|
||||
}
|
||||
|
||||
// eslint-disable-next-line max-lines-per-function, @coze-arch/max-line-per-function -- 看了下代码行数不太好优化
|
||||
// eslint-disable-next-line max-lines-per-function, @coze-arch/max-line-per-function -- the number of lines of code is not very good optimization
|
||||
function useScroll<T>(props: ScrollProps<T>) {
|
||||
const {
|
||||
targetRef,
|
||||
@@ -84,12 +84,12 @@ function useScroll<T>(props: ScrollProps<T>) {
|
||||
reload,
|
||||
} = useInfiniteScroll<InfiniteListDataProps<T>>(
|
||||
async current => {
|
||||
// 此处逻辑如此复杂,是解决Scroll中的bug。
|
||||
// useInfiniteScroll中的cancel只是取消了一次请求,但是数据会根据current重新设置一遍。
|
||||
// The logic here is so complex that it solves the bug in Scroll.
|
||||
// The cancel in useInfiniteScroll simply cancels a request, but the data is reset based on the current.
|
||||
const fetchNo = refFetchNo.current;
|
||||
if (refResolve.current) {
|
||||
// 保证顺序执行,如果有当前方法,就取消上一次的请求,防止出现由于网络原因导致数据覆盖问题
|
||||
// 同时发出A1,A2,三次请求,但是A1先到达,然后请求了B1, 但是A1过慢,导致了A1覆盖了B1的请求。
|
||||
// Guaranteed sequential execution, if there is a current method, cancel the last request to prevent data overwriting problems due to network reasons
|
||||
// At the same time, A1, A2, and three requests were issued, but A1 arrived first, and then B1 was requested, but A1 was too slow, causing A1 to overwrite B1's request.
|
||||
refResolve.current({
|
||||
...(current || {}),
|
||||
list: [],
|
||||
@@ -106,7 +106,7 @@ function useScroll<T>(props: ScrollProps<T>) {
|
||||
// @ts-expect-error -- linter-disable-autofix
|
||||
refResolve.current = null;
|
||||
|
||||
// 切换Tab的时候,如果此时正在请求,防止数据的残留界面显示
|
||||
// When switching tabs, if you are requesting at this time, prevent the residual interface display of the data
|
||||
if (refFetchNo.current !== fetchNo) {
|
||||
if (current) {
|
||||
current.list = [];
|
||||
@@ -119,7 +119,7 @@ function useScroll<T>(props: ScrollProps<T>) {
|
||||
return result as InfiniteListDataProps<T>;
|
||||
},
|
||||
{
|
||||
target: isLoadingError || isNeedBtnLoadMore ? null : targetRef, //失败的时候,通过去掉target的事件绑定,禁止滚动加载。
|
||||
target: isLoadingError || isNeedBtnLoadMore ? null : targetRef, //When it fails, scrolling loading is prohibited by removing the event binding of the target.
|
||||
threshold,
|
||||
onBefore: () => {
|
||||
//setIsLoadingError(false);
|
||||
@@ -131,8 +131,8 @@ function useScroll<T>(props: ScrollProps<T>) {
|
||||
}
|
||||
},
|
||||
onError: e => {
|
||||
// 如果在请求第一页数据时发生错误,并且当前列表不为空,则reset数据
|
||||
// 这个case只有当resetDataIfReload设置为false时才会发生
|
||||
// If an error occurs when requesting the first page of data and the current list is not empty, reset the data
|
||||
// This case only occurs when resetDataIfReload is set to false
|
||||
// @ts-expect-error -- linter-disable-autofix
|
||||
if (dataInfo.nextPage === 1 && (dataInfo?.list?.length ?? 0) > 0) {
|
||||
// @ts-expect-error -- linter-disable-autofix
|
||||
@@ -200,7 +200,7 @@ function useScroll<T>(props: ScrollProps<T>) {
|
||||
isLoading,
|
||||
loadMore: () => {
|
||||
if (!isLoading) {
|
||||
//如果已经有数据加载中了,需要禁止重复加载。
|
||||
//If there is already data loading, you need to prohibit repeated loading.
|
||||
loadMore();
|
||||
}
|
||||
},
|
||||
|
||||
@@ -76,12 +76,12 @@ function Index<T extends object>(props: InfiniteListProps<T>, ref) {
|
||||
onChangeState?.(isLoading, dataList);
|
||||
}, [dataList, isLoading]);
|
||||
|
||||
// 根据白名单对列表移动端进行移动端适配
|
||||
// Adapt the mobile end of the list according to the whitelist
|
||||
|
||||
return (
|
||||
<div className={cls(s['height-whole-100'], containerClassName)}>
|
||||
{!dataList?.length || !canShowData ? (
|
||||
/** 数据为空的时候,操作如何显示空页面 */
|
||||
/** How to display an empty page when the data is empty */
|
||||
<Empty
|
||||
isError={canShowData ? isLoadingError : false}
|
||||
isSearching={isSearching}
|
||||
@@ -123,7 +123,7 @@ function Index<T extends object>(props: InfiniteListProps<T>, ref) {
|
||||
className={
|
||||
typeof itemClassName === 'string'
|
||||
? itemClassName
|
||||
: itemClassName?.(item) // 支持动态行className
|
||||
: itemClassName?.(item) // Support dynamic row className
|
||||
}
|
||||
>
|
||||
{renderItem?.(item, number)}
|
||||
|
||||
@@ -26,7 +26,7 @@ export interface EmptyProps {
|
||||
isError?: boolean;
|
||||
isLoading?: boolean;
|
||||
isSearching?: boolean;
|
||||
loadRetry?: () => void; //重试加载
|
||||
loadRetry?: () => void; //retry loading
|
||||
text?: {
|
||||
emptyTitle?: string;
|
||||
emptyDesc?: string;
|
||||
@@ -43,12 +43,12 @@ export interface EmptyProps {
|
||||
) => React.ReactNode | null;
|
||||
}
|
||||
export interface FooterProps {
|
||||
isError?: boolean; // 是否加载出错
|
||||
isLoading?: boolean; // 是否加载中
|
||||
noMore?: boolean; //没有更多数据
|
||||
isError?: boolean; // Whether loading error
|
||||
isLoading?: boolean; // Is it loading?
|
||||
noMore?: boolean; //No more data.
|
||||
isNeedBtnLoadMore?: boolean;
|
||||
dataNum?: number;
|
||||
loadRetry?: () => void; //重试加载
|
||||
loadRetry?: () => void; //retry loading
|
||||
renderFooter?: (
|
||||
footerProps: Omit<FooterProps, 'renderFooter'>,
|
||||
) => React.ReactNode | null;
|
||||
@@ -62,13 +62,13 @@ export interface InfiniteListDataProps<T> {
|
||||
}
|
||||
|
||||
export interface ScrollProps<T> {
|
||||
threshold?: number; //距离下方多长距离,开始加载数据
|
||||
targetRef?: RefObject<HTMLDivElement>; // 监听滚动的Dom 引用
|
||||
loadData: (current) => Promise<InfiniteListDataProps<T>>; // 加载更多数据
|
||||
reloadDeps?: unknown[]; // 重新加载数据依赖
|
||||
threshold?: number; //How far is it from below to start loading data?
|
||||
targetRef?: RefObject<HTMLDivElement>; // Listening for scrolling Dom references
|
||||
loadData: (current) => Promise<InfiniteListDataProps<T>>; // Load more data
|
||||
reloadDeps?: unknown[]; // Reloading data dependencies
|
||||
isNeedBtnLoadMore?: boolean;
|
||||
isLoading?: boolean; // 是否加载中
|
||||
resetDataIfReload?: boolean; // 当reload时,是否先reset列表已存在数据,默认为true
|
||||
isLoading?: boolean; // Is it loading?
|
||||
resetDataIfReload?: boolean; // When reloading, whether to reset the existing data in the list first, the default is true
|
||||
}
|
||||
|
||||
export interface InfiniteListProps<T>
|
||||
@@ -77,8 +77,8 @@ export interface InfiniteListProps<T>
|
||||
'className' | 'emptyContent' | 'grid' | 'renderItem'
|
||||
> {
|
||||
containerClassName?: string;
|
||||
canShowData?: boolean; //是否能够显示数据了
|
||||
isSearching?: boolean; // 是否搜索中,主要是用于错误显示的时候,选择文案使用
|
||||
canShowData?: boolean; //Can the data be displayed?
|
||||
isSearching?: boolean; // Whether it is in the search, it is mainly used for error display, select Copy to use
|
||||
itemClassName?: string | ((item: T) => string);
|
||||
isNeedBtnLoadMore?: boolean;
|
||||
isResponsive?: boolean;
|
||||
@@ -103,5 +103,5 @@ export interface InfiniteListRef {
|
||||
reload: () => void;
|
||||
insertData: (item, index) => void;
|
||||
removeData: (index) => void;
|
||||
getDataList: () => unknown[]; // 获取当前列表数据
|
||||
getDataList: () => unknown[]; // Get current list data
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user