feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/studio/workspace/entry-base/src/components/creator.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { type FC } from 'react';
+
+import { Avatar } from '@coze-arch/coze-design';
+
+export interface CreatorProps {
+  avatar?: string;
+  name?: string;
+  extra?: string;
+}
+
+export const Creator: FC<CreatorProps> = ({ avatar, name, extra }) => (
+  <div className="flex items-center gap-x-[4px] h-[16px] coz-fg-secondary text-[12px] leading-16px">
+    {/* 社区版无多人协作功能，不展示资源所有者信息 */}
+    {IS_OPEN_SOURCE ? null : (
+      <>
+        <Avatar className="w-[16px] h-[16px] flex-shrink-0" src={avatar} />
+        <div className="text-nowrap">{name}</div>
+        <div className="w-3px h-3px rounded-full bg-[var(--coz-fg-secondary)]" />
+      </>
+    )}
+    <div className="text-ellipsis whitespace-nowrap overflow-hidden">
+      {extra}
+    </div>
+  </div>
+);

frontend/packages/studio/workspace/entry-base/src/components/layout/list.tsx

@@ -0,0 +1,140 @@
+/*
+ * 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, { type HTMLAttributes, forwardRef } from 'react';
+
+import classNames from 'classnames';
+
+export type LayoutBaseProps = HTMLAttributes<HTMLDivElement>;
+
+export const Layout = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={classNames(
+        restProps.className,
+        'min-h-[100%]',
+        'flex flex-col gap-[16px]',
+        'overflow-hidden',
+        'px-[24px] pt-[24px]',
+      )}
+    >
+      {children}
+    </div>
+  ),
+);
+
+export const Header = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={classNames(
+        restProps.className,
+        'flex-shrink-0',
+        'w-full h-[32px]',
+        'flex items-center justify-between',
+      )}
+    >
+      {children}
+    </div>
+  ),
+);
+
+export const HeaderTitle = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={classNames(
+        restProps.className,
+        'text-[20px] font-[500]',
+        'flex items-center gap-[8px]',
+      )}
+    >
+      {children}
+    </div>
+  ),
+);
+
+export const HeaderActions = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={classNames(
+        restProps.className,
+        'flex items-center gap-[8px] ml-[32px]',
+      )}
+    >
+      {children}
+    </div>
+  ),
+);
+
+export const SubHeader = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={classNames(
+        restProps.className,
+        'flex-shrink-0',
+        'w-full h-[32px]',
+        'flex items-center justify-between',
+      )}
+    >
+      {children}
+    </div>
+  ),
+);
+
+export const SubHeaderFilters = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={classNames(restProps.className, 'flex items-center gap-[8px]')}
+    >
+      {children}
+    </div>
+  ),
+);
+
+export const SubHeaderSearch = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div {...restProps} ref={ref} className={classNames(restProps.className)}>
+      {children}
+    </div>
+  ),
+);
+
+export const Content = forwardRef<HTMLDivElement, LayoutBaseProps>(
+  ({ children, ...restProps }, ref) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={classNames(
+        restProps.className,
+        'flex-grow',
+        'overflow-x-hidden overflow-y-auto',
+      )}
+    >
+      {children}
+    </div>
+  ),
+);

frontend/packages/studio/workspace/entry-base/src/components/workspace-empty.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { type FC } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { IconCozEmpty, IconCozBroom } from '@coze-arch/coze-design/icons';
+import { Button } from '@coze-arch/coze-design';
+
+interface WorkspaceEmptyProps {
+  onClear?: () => void; // 清空按钮点击事件
+  hasFilter?: boolean; // 是否有筛选项
+}
+
+export const WorkspaceEmpty: FC<WorkspaceEmptyProps> = ({
+  onClear,
+  hasFilter = false,
+}) => (
+  <div className="w-full h-full flex flex-col items-center pt-[120px]">
+    <IconCozEmpty className="w-[48px] h-[48px] coz-fg-dim" />
+    <div className="text-[16px] font-[500] leading-[22px] mt-[8px] mb-[16px] coz-fg-primary">
+      {I18n.t(
+        hasFilter ? 'library_empty_no_results_found_under' : 'search_not_found',
+      )}
+    </div>
+    {hasFilter ? (
+      <Button
+        color="primary"
+        icon={<IconCozBroom />}
+        onClick={() => {
+          onClear?.();
+        }}
+      >
+        {I18n.t('library_empty_clear_filters')}
+      </Button>
+    ) : null}
+  </div>
+);