Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Console 端的系统设置、主题管理、插件详情页面的 VCard 组件使用错误 #3226

Closed
ruibaby opened this issue Feb 4, 2023 · 1 comment · Fixed by halo-dev/console#839
Closed

Console 端的系统设置、主题管理、插件详情页面的 VCard 组件使用错误 #3226

ruibaby opened this issue Feb 4, 2023 · 1 comment · Fixed by halo-dev/console#839
Assignees
@ruibaby
Labels
area/console Issues or PRs related to the Halo Console kind/improvement Categorizes issue or PR as related to a improvement.
Milestone
2.3.0

Comments

@ruibaby
Copy link
Member

ruibaby commented Feb 4, 2023

是什么版本出现了此问题？

2.2.0

使用的什么数据库？

H2

使用的哪种方式部署？

Docker

在线站点地址

https://halo.run

发生了什么？

如插件详情页面：

代码位置：https://github.com/halo-dev/console/blob/561b8da237706eff44b0119f70aec4e09e5c05f4/src/modules/system/plugins/layouts/PluginLayout.vue#L163-L187

<div class="m-0 md:m-4">
  <VCard :body-class="['!p-0']">
    <template #header>
      <VTabbar
        v-model:active-id="activeTab"
        :items="tabs"
        class="w-full !rounded-none"
        type="outline"
        @change="handleTabChange"
      ></VTabbar>
    </template>
  </VCard>
  <div class="bg-white">
    <RouterView :key="activeTab" v-slot="{ Component }">
      <template v-if="Component">
        <Suspense>
          <component :is="Component"></component>
          <template #fallback>
            <VLoading />
          </template>
        </Suspense>
      </template>
    </RouterView>
  </div>
</div>

其中 RouterView 部分应该放置在 VCard 组件中，否则会造成样式与其他地方不一致，请看：

image

/area console
/kind improvement

相关日志输出

No response

附加信息

No response
@f2c-ci-robot f2c-ci-robot bot added area/console Issues or PRs related to the Halo Console kind/improvement Categorizes issue or PR as related to a improvement. labels Feb 4, 2023
@ruibaby ruibaby added the good first issue Denotes an issue ready for a new contributor, according to the "help wanted" guidelines. label Feb 4, 2023
@ruibaby
Copy link
Member Author

ruibaby commented Feb 7, 2023

/assign

@ruibaby ruibaby removed the good first issue Denotes an issue ready for a new contributor, according to the "help wanted" guidelines. label Feb 7, 2023
@ruibaby ruibaby mentioned this issue Feb 7, 2023
Merged
@ruibaby ruibaby added this to the 2.3.x milestone Feb 7, 2023
f2c-ci-robot bot pushed a commit to halo-dev/console that referenced this issue Feb 8, 2023
@ruibaby
perf: improve usage of the card component in some pages (#839)
b83d3e4 
#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

优化部分页面 VCard 组件的用法，修复样式问题。

#### Which issue(s) this PR fixes:

Fixes halo-dev/halo#3226

#### Screenshots:

before:

<img width="1417" alt="image" src="https://user-images.githubusercontent.com/21301288/217179383-d1dff4f5-4350-4881-aed6-c6bf2cc184c5.png">

after:

<img width="1430" alt="image" src="https://user-images.githubusercontent.com/21301288/217179173-f61cf787-f34f-43a3-88c3-08fac6c31879.png">

#### Special notes for your reviewer:

测试方式：

1. 检查主题详情页面、插件详情页面、系统设置页面的内容区域，底部的圆角是否生效。

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端主题详情、插件详情、系统设置中卡片组件的样式。
```
@ruibaby ruibaby modified the milestones: 2.3.x, 2.3.0 Feb 9, 2023
JohnNiang pushed a commit to JohnNiang/halo that referenced this issue Mar 2, 2023
@ruibaby
perf: improve usage of the card component in some pages (halo-dev/con…
d0acbee 
…sole#839)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

优化部分页面 VCard 组件的用法，修复样式问题。

#### Which issue(s) this PR fixes:

Fixes halo-dev#3226

#### Screenshots:

before:

<img width="1417" alt="image" src="https://user-images.githubusercontent.com/21301288/217179383-d1dff4f5-4350-4881-aed6-c6bf2cc184c5.png">

after:

<img width="1430" alt="image" src="https://user-images.githubusercontent.com/21301288/217179173-f61cf787-f34f-43a3-88c3-08fac6c31879.png">

#### Special notes for your reviewer:

测试方式：

1. 检查主题详情页面、插件详情页面、系统设置页面的内容区域，底部的圆角是否生效。

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端主题详情、插件详情、系统设置中卡片组件的样式。
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ruibaby ruibaby

Labels
area/console Issues or PRs related to the Halo Console kind/improvement Categorizes issue or PR as related to a improvement.
Projects
None yet
Milestone
2.3.0
Development

Successfully merging a pull request may close this issue.

perf: improve usage of the card component in some pages ruibaby/halo-console
1 participant
@ruibaby