refactor: improve entity component layout for better device responsiveness #7383

ruibaby · 2025-04-24T08:55:17Z

What type of PR is this?

/area ui
/kind improvement

What this PR does / why we need it:

Refactor Entity-related components to better adapt to different devices.

Note: It should be noted that the current solution includes breaking updates, and if the plugin uses this component, it needs to be adapted. Although this change will not cause functional problems, it will only affect the style. ~~This is just an attempt at the moment, I will also try other solutions to ensure compatibility~~

before:

after:

Screen.Recording.2025-04-24.at.16.52.26.mov

Which issue(s) this PR fixes:

Fixes #7360
Fixes #7357
Fixes #5483
Fixes #2699
Fixes #7130
Fixes #7393

Special notes for your reviewer:

All data lists need to be tested.

Adaptation for plugin

If this component is used in a plugin, the plugin needs to actively adapt to it. Although it will not cause functional issues, it may result in style problems.

Adaptation method:

Before adapting, make sure that the ⁠@halo-dev/components package has been upgraded to version 2.21.0.
The adaptation is very simple: just wrap the ⁠VEntity component(s) with a ⁠VEntityContainer component, for example:

<script lang="ts" setup>
import { VEntity, VEntityContainer } from "@halo-dev/components"
</script>

<template>
  <VEntityContainer>
    <VEntity />
    <VEntity />
  </VEntityContainer>
</template>

 Finally, please make sure to update the ⁠requires field in ⁠plugin.yaml to ⁠>=2.21.0.

Does this PR introduce a user-facing change?

优化 Console 和 UC 中数据列表的 UI 在不同尺寸设备下的表现

f2c-ci-robot · 2025-04-24T08:55:26Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from ruibaby. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

pkg-pr-new · 2025-04-24T08:57:08Z

Open in StackBlitz

@halo-dev/api-client

npm i https://pkg.pr.new/@halo-dev/api-client@7383

@halo-dev/components

npm i https://pkg.pr.new/@halo-dev/components@7383

@halo-dev/richtext-editor

npm i https://pkg.pr.new/@halo-dev/richtext-editor@7383

@halo-dev/console-shared

npm i https://pkg.pr.new/@halo-dev/console-shared@7383

@halo-dev/ui-plugin-bundler-kit

npm i https://pkg.pr.new/@halo-dev/ui-plugin-bundler-kit@7383

commit: 4f3ce29

codecov · 2025-04-24T09:03:29Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 59.47%. Comparing base (d382b45) to head (4f3ce29).
Report is 4 commits behind head on main.

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #7383      +/-   ##
============================================
- Coverage     59.52%   59.47%   -0.05%     
+ Complexity     3804     3803       -1     
============================================
  Files           677      677              
  Lines         23225    23225              
  Branches       1496     1496              
============================================
- Hits          13825    13814      -11     
- Misses         8762     8771       +9     
- Partials        638      640       +2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…eness Signed-off-by: Ryan Wang <i@ryanc.cc>

Signed-off-by: Ryan Wang <i@ryanc.cc>

sonarqubecloud · 2025-05-20T03:53:52Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Copilot

Pull Request Overview

This PR refactors various Entity-related components to improve device responsiveness, with several style and structural updates that affect how data lists are rendered. Key changes include replacing traditional HTML list elements (ul/li) with the VEntityContainer component, updating unique keys for v-for iterations, and minor style adjustments (e.g. scoped styles and additional attributes).

Reviewed Changes

Copilot reviewed 47 out of 47 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
ui/console-src/modules/system/backup/tabs/List.vue	Replaced the ul/li list with VEntityContainer for rendering backup items.
ui/console-src/modules/system/auth-providers/components/AuthProvidersSection.vue	Updated the draggable list structure by removing the li wrapper and using VEntityContainer.
ui/console-src/modules/interface/themes/components/preview/ThemePreviewModal.vue	Switched from an unordered list to VEntityContainer for theme previews.
ui/console-src/modules/interface/menus/components/MenuList.vue	Modified the menu list rendering to use VEntityContainer instead of ul/li.
ui/console-src/modules/interface/menus/Menus.vue	Changed style encapsulation to scoped styles with :deep selectors.
ui/console-src/modules/contents/posts/widgets/RecentPublishedWidget.vue	Updated the list rendering from ul/li to VEntityContainer for recent posts.
ui/console-src/modules/contents/posts/tags/TagList.vue	Replaced traditional list markup with VEntityContainer in the tag list.
ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue	Removed margin classes from VSpace, affecting spacing in the title field.
Others	Similar list refactoring and style updates across categories, deleted lists, pages, comments, attachments, etc.

Comments suppressed due to low confidence (3)

ui/console-src/modules/system/auth-providers/components/AuthProvidersSection.vue:42

Removing the
wrapper in the draggable list may alter the DOM structure expected by VueDraggable, potentially affecting drag functionality. Verify that the updated structure functions as intended with the draggable component.

<AuthProviderListItem v-for="authProvider in modelValue" :key="authProvider.name" :auth-provider="authProvider" @reload="onReload" />

ui/console-src/modules/system/backup/tabs/List.vue:29

Replacing the
```
<VEntityContainer>
```
ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue:39
- [nitpick] The removal of margin classes (e.g. 'mt-1 sm:mt-0') from VSpace may alter the intended spacing of the title field. Confirm that this change is deliberate to maintain layout consistency across devices.
```
<VSpace>
```

JohnNiang

目前，仍然无法切换至 console 或者 uc，且没有登出按钮。

ruibaby · 2025-05-21T02:36:26Z

All data lists need to be tested.

此 PR 仅优化使用 VEntity 实现的各种数据列表。

JohnNiang

It works very well.

/approve

Refactor data list using ⁠VEntityContainer to optimize display across devices of various sizes. See halo-dev/halo#7383 Note: Updating to this version requires Halo >= 2.21.0. ```release-note 适配 Halo 2.21.0 的数据列表样式 ```

#### What type of PR is this? /area ui /kind bug /milestone 2.21.x #### What this PR does / why we need it: Resolve ui issue of global search component cause by #7383 #### Which issue(s) this PR fixes: Fixes #7478 #### Special notes for your reviewer: #### Does this PR introduce a user-facing change? ```release-note 修复 2.21.0-alpha.1 中 Console 的全局搜索样式问题。 ```

f2c-ci-robot bot added area/ui Issues or PRs related to the Halo UI kind/improvement Categorizes issue or PR as related to a improvement. do-not-merge/release-note-label-needed Indicates that a PR should not merge because it's missing one of the release note labels. labels Apr 24, 2025

f2c-ci-robot bot requested review from LIlGG and wan92hen April 24, 2025 08:55

ruibaby changed the title ~~refactor: improve entity component layout for better device responsiveness~~ WIP: refactor: improve entity component layout for better device responsiveness Apr 24, 2025

QingFeng-awa mentioned this pull request Apr 27, 2025

优化用户角色显示在小屏幕上的表现 #7393

Closed

3 tasks

refactor: improve entity component layout for better device responsiv…

58cead9

…eness Signed-off-by: Ryan Wang <i@ryanc.cc>

ruibaby force-pushed the entity-responsive branch from 58e99b0 to 58cead9 Compare May 12, 2025 09:21

ruibaby added 2 commits May 14, 2025 11:27

Merge branch 'main' into entity-responsive

a61537a

Merge branch 'main' into entity-responsive

985103a

JohnNiang added this to the 2.21.x milestone May 15, 2025

ruibaby added 4 commits May 15, 2025 16:34

Merge branch 'main' into entity-responsive

58d0635

Merge branch 'main' into entity-responsive

4c83eb3

Resolve CSS style conflicts

0383241

Signed-off-by: Ryan Wang <i@ryanc.cc>

Update missing translaions

4f3ce29

Signed-off-by: Ryan Wang <i@ryanc.cc>

ruibaby changed the title ~~WIP: refactor: improve entity component layout for better device responsiveness~~ refactor: improve entity component layout for better device responsiveness May 20, 2025

ruibaby requested review from JohnNiang and guqing May 20, 2025 03:53

JohnNiang requested a review from Copilot May 20, 2025 03:56

Copilot AI reviewed May 20, 2025

View reviewed changes

f2c-ci-robot bot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label May 20, 2025

JohnNiang reviewed May 21, 2025

View reviewed changes

JohnNiang approved these changes May 21, 2025

View reviewed changes

JohnNiang merged commit b309bc5 into halo-dev:main May 21, 2025
10 of 11 checks passed

ruibaby deleted the entity-responsive branch May 21, 2025 04:29

ruibaby mentioned this pull request May 29, 2025

Refactor group list using VEntityContainer halo-sigs/plugin-photos#65

Merged

This was referenced May 30, 2025

fix: resolve ui issue of global search component #7485

Merged

Refactor data list using VEntityContainer halo-sigs/plugin-links#104

Merged

JohnNiang modified the milestones: 2.21.x, 2.21.0 Jun 4, 2025

JohnNiang mentioned this pull request Jun 19, 2025

插件页面在一些情况下显示异常 #7576

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

refactor: improve entity component layout for better device responsiveness #7383

refactor: improve entity component layout for better device responsiveness #7383

Uh oh!

ruibaby commented Apr 24, 2025 •

edited

Loading

Uh oh!

f2c-ci-robot bot commented Apr 24, 2025

Uh oh!

pkg-pr-new bot commented Apr 24, 2025 •

edited

Loading

Uh oh!

codecov bot commented Apr 24, 2025 •

edited

Loading

Uh oh!

sonarqubecloud bot commented May 20, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

JohnNiang left a comment

Uh oh!

ruibaby commented May 21, 2025

Uh oh!

JohnNiang left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

refactor: improve entity component layout for better device responsiveness #7383

refactor: improve entity component layout for better device responsiveness #7383

Uh oh!

Conversation

ruibaby commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What type of PR is this?

What this PR does / why we need it:

Which issue(s) this PR fixes:

Special notes for your reviewer:

Adaptation for plugin

Does this PR introduce a user-facing change?

Uh oh!

f2c-ci-robot bot commented Apr 24, 2025

Uh oh!

pkg-pr-new bot commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

sonarqubecloud bot commented May 20, 2025

Quality Gate passed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

JohnNiang left a comment

Choose a reason for hiding this comment

Uh oh!

ruibaby commented May 21, 2025

Uh oh!

JohnNiang left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ruibaby commented Apr 24, 2025 •

edited

Loading

pkg-pr-new bot commented Apr 24, 2025 •

edited

Loading

codecov bot commented Apr 24, 2025 •

edited

Loading