Skip to content

♻️ Refactor: extract reusable ResourceCard components - #3862

Open
ayiya12 wants to merge 4 commits into
developfrom
zjy/feat1
Open

♻️ Refactor: extract reusable ResourceCard components#3862
ayiya12 wants to merge 4 commits into
developfrom
zjy/feat1

Conversation

@ayiya12

@ayiya12 ayiya12 commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

1.ResourceCard.tsx:通用资源卡片内容模板
2.CreateResourceCard.tsx:用于“新建资源”的特殊卡片
3.ResourceCardGrid.tsx:卡片网格、搜索、筛选、分页、空状态容器
image

Comment on lines +56 to +60
{description ? (
<div className="mt-4 line-clamp-3 text-sm leading-6 text-slate-600">
{description}
</div>
) : null}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

description的下面是不是还加一排 tags的展示?
badge和tag两个概念可以区分

Comment on lines +35 to +40
<ResourceCardShell
onClick={onClick}
selected={selected}
className={className}
containerRef={containerRef}
>

@xuyaqist xuyaqist Sep 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shell的作用是什么?没有感觉这个前端组件的必要性,看是不是把它删掉呢。
只保留:

  1. CreateResourceCard,表示新建的卡片
  2. ResourceCard,表示一个可选择的卡片。
  3. ResourceCardGrid,包含上面的toolbar和下面的Card Grid,以及分页功能。如果用户要复用,就会直接使用这个ResourceCardGrid,不需要把toolbar单独拆分出来,因为Grid总是要包含search和分类,这些功能应该打包成一套。
    (1)支持传递一个参数,这个参数可控制是否展示CreateResourceCard
    (2)支持配置x和y,也就是几行几列。主要为了适配用户自定义个数。
  4. “我的智能体”搭配一些按钮“智能体仓库、导入智能体”,这个可以单独拆分出一个前端组件
Image 这个功能删掉吧,因为如果这个上面单独拆分成一个组件,感觉和下面重复了,会导致一个函数在多个组件中传递

Copilot AI lite review requested due to automatic review settings September 7, 2026 01:53

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

The grid empty-state logic conflicts with the provided total API (can show empty while data exists), and the PR description lists extracted components that are not present in the actual change set.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR introduces reusable frontend building blocks for rendering “resource” cards and a grid container, aiming to standardize card layout, creation affordance, and list UI (search/filter/pagination) across resource screens.

Changes:

  • Added a generic ResourceCard component that supports icons, badges, tags, actions, footer/meta, and an optional “clickable card” mode.
  • Added ResourceCardGrid to render a responsive grid with optional toolbar (search + filters), optional create-card slot, empty state, and pagination.
  • Added CreateResourceCard as a dedicated “new resource” dashed card button.
File summaries
File Description
frontend/components/resource/ResourceCardGrid.tsx Generic grid container with optional toolbar, create card slot, empty state, and pagination.
frontend/components/resource/ResourceCard.tsx Reusable resource card template supporting interactive and non-interactive variants.
frontend/components/resource/CreateResourceCard.tsx Specialized “create new resource” card button with icon + title.
Review details
  • Files reviewed: 3/3 changed files
  • Comments generated: 2
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread frontend/components/resource/ResourceCardGrid.tsx Outdated
Comment thread frontend/components/resource/ResourceCardGrid.tsx
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@xuyaqist

xuyaqist commented Sep 7, 2026

Copy link
Copy Markdown
Contributor
image 说这里还可以加1-2个图标按钮,比如说mcp的连通性校验

@ayiya12

ayiya12 commented Sep 7, 2026

Copy link
Copy Markdown
Contributor Author

增加headeractions
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants