feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/studio/components/src/link-list/index.module.less

@@ -0,0 +1,29 @@
+.link-list {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+
+  .link-list-item {
+    padding: 0 18px;
+    color: rgb(255 255 255 / 60%);
+    font-size: 14px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+
+    .click-area {
+      display: flex;
+      align-items: center;
+
+      &.pointer {
+        cursor: pointer;
+        user-select: none;
+
+        &:hover,
+        &:active {
+          color: #fff;
+        }
+      }
+    }
+  }
+}

frontend/packages/studio/components/src/link-list/index.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 ReactNode, type CSSProperties } from 'react';
+
+import classNames from 'classnames';
+import { Space } from '@coze-arch/bot-semi';
+
+import s from './index.module.less';
+
+export interface LinkListItem {
+  extra?: string;
+  icon?: ReactNode;
+  label: string;
+  link?: string;
+  onClick?: () => void;
+}
+
+export const LinkList = ({
+  className,
+  style,
+  data,
+  pointerClassName,
+  itemClassName,
+}: {
+  className?: string;
+  style?: CSSProperties;
+  data: LinkListItem[];
+  pointerClassName?: string;
+  itemClassName?: string;
+}) => (
+  <div className={classNames(s['link-list'], className)} style={style}>
+    {data?.map(item => (
+      <div
+        className={classNames(s['link-list-item'], itemClassName)}
+        key={`link-list-${item.label}`}
+      >
+        {!!item.extra && <span style={{ marginRight: 4 }}>{item.extra}</span>}
+        <div
+          className={classNames(
+            s['click-area'],
+            (item.link || item.onClick) && s.pointer,
+            (item.link || item.onClick) && pointerClassName,
+          )}
+          onClick={() => {
+            if (item.link) {
+              window.open(item.link);
+            } else {
+              item.onClick?.();
+            }
+          }}
+        >
+          <Space spacing={4}>
+            {item.icon}
+            {item.label}
+          </Space>
+        </div>
+      </div>
+    ))}
+  </div>
+);