feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/community/component/src/infinite-list/components/empty/index.module.less

@@ -0,0 +1,44 @@
+.empty {
+  overflow: visible;
+  height: 100%;
+
+
+
+  .spin {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    :global {
+      .semi-spin-wrapper {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+
+
+      .semi-tabs-content {
+        padding: 0;
+      }
+
+      .semi-spin-children {
+        height: 100%;
+      }
+    }
+
+    .loading-text {
+      margin-left: 8px;
+
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 22px;
+      color: var(--semi-color-text-3, rgba(29, 28, 35, 35%));
+    }
+  }
+}

frontend/packages/community/component/src/infinite-list/components/empty/index.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { UIEmpty, Spin } from '@coze-arch/bot-semi';
+import { IllustrationFailure } from '@douyinfe/semi-illustrations';
+
+import { type EmptyProps } from '../../type';
+
+import s from './index.module.less';
+
+/* Plugin header */
+
+function Index(props: EmptyProps) {
+  const {
+    isLoading,
+    isSearching,
+    loadRetry,
+    isError,
+    renderEmpty,
+    text,
+    btn,
+    icon,
+  } = props;
+  return (
+    <div className={s.empty}>
+      {renderEmpty?.(props) ||
+        (!isError ? (
+          isLoading ? (
+            <Spin
+              tip={
+                <span className={s['loading-text']}>{I18n.t('Loading')}</span>
+              }
+              wrapperClassName={s.spin}
+              size="middle"
+            />
+          ) : (
+            <UIEmpty
+              isNotFound={!!isSearching}
+              empty={{
+                title: text?.emptyTitle || I18n.t('inifinit_list_empty_title'),
+                description: text?.emptyTitle ? text?.emptyDesc : '',
+                btnText: btn?.emptyText,
+                btnOnClick: btn?.emptyClick,
+                icon,
+              }}
+              notFound={{
+                title:
+                  text?.searchEmptyTitle || I18n.t('inifinit_search_not_found'),
+              }}
+            />
+          )
+        ) : (
+          <UIEmpty
+            empty={{
+              title: I18n.t('inifinit_list_load_fail'),
+              icon: <IllustrationFailure />,
+              btnText: loadRetry && I18n.t('inifinit_list_retry'),
+              btnOnClick: () => {
+                loadRetry?.();
+              },
+            }}
+          />
+        ))}
+    </div>
+  );
+}
+
+export default Index;

frontend/packages/community/component/src/infinite-list/components/footer/index.module.less

@@ -0,0 +1,55 @@
+.footer-container {
+  padding: 12px 0 28px;
+  text-align: center;
+
+  * {
+    vertical-align: middle;
+  }
+
+  .loading,
+  .error-retry {
+    margin-left: 10px;
+    line-height: 20px;
+    color: var(--semi-color-text-3, rgba(29, 28, 35, 35%));
+  }
+
+  .error-retry {
+    cursor: pointer;
+    color: var(--semi-color-focus-border, #4d53e8);
+  }
+
+  :global {
+    .semi-spin-middle > .semi-spin-wrapper {
+      height: 16px;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .load-more-btn {
+    font-weight: 600;
+    background: #fff;
+    border-radius: 40px;
+
+    span {
+      color: #1d1c23;
+    }
+
+    &:hover {
+      background: #fff;
+      border: none;
+    }
+  }
+
+  &.responsive-foot-container {
+    padding: 0 0 16px;
+
+    .load-more-btn {
+      height: 40px;
+      padding: 16px 24px;
+    }
+  }
+}

frontend/packages/community/component/src/infinite-list/components/footer/index.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import React from 'react';
+
+import classNames from 'classnames';
+import { I18n } from '@coze-arch/i18n';
+import { Spin, UIButton } from '@coze-arch/bot-semi';
+import { useIsResponsive } from '@coze-arch/bot-hooks';
+
+import { type FooterProps } from '../../type';
+
+import s from './index.module.less';
+
+/* Plugin header */
+
+function Index(props: FooterProps) {
+  const {
+    isLoading,
+    loadRetry,
+    isError,
+    renderFooter,
+    isNeedBtnLoadMore,
+    noMore,
+  } = props;
+  const isResponsive = useIsResponsive();
+
+  return (
+    <div
+      className={classNames(s['footer-container'], {
+        [s['responsive-foot-container']]: isResponsive,
+      })}
+    >
+      {renderFooter?.(props) ||
+        (isLoading ? (
+          <>
+            <Spin />
+            <span className={s.loading}>{I18n.t('Loading')}</span>
+          </>
+        ) : isError ? (
+          <>
+            <Spin />
+            <span className={s['error-retry']} onClick={loadRetry}>
+              {I18n.t('inifinit_list_retry')}
+            </span>
+          </>
+        ) : isNeedBtnLoadMore && !noMore ? (
+          <UIButton
+            onClick={loadRetry}
+            className={s['load-more-btn']}
+            theme="borderless"
+          >
+            {I18n.t('mkpl_load_btn')}
+          </UIButton>
+        ) : null)}
+    </div>
+  );
+}
+
+export default Index;