Console 提供 Toast / Notification 组件以提示接口或者操作等异常 #2534
Assignees
Labels
area/console
Issues or PRs related to the Halo Console
kind/feature
Categorizes issue or PR as related to a new feature.
Milestone
Comments
f2c-ci-robot
bot
added
the
kind/feature
f2c-ci-robot
bot
added
the
area/console
f2c-ci-robot bot
pushed a commit
to halo-dev/console
that referenced
this issue
Oct 17, 2022
#### What type of PR is this?
/kind feature
/milestone 2.0
#### What this PR does / why we need it:
添加 Toast 组件。
特性：
1. 支持相同消息合并。
2. 支持鼠标悬停。
使用方式：
```vue
import { Toast } from '@halo-dev/components'
Toast.success("Hello", { //props })
Toast.info("Hello", { //props })
Toast.warning("Hello", { //props })
Toast.error("Hello", { //props })
```
props：
```ts
export interface ToastProps {
type?: Type;
content?: string;
duration?: number;
closable?: boolean;
frozenOnHover?: boolean;
count?: 0;
onClose?: () => void;
}
```
Toast 方法不仅可以在 Vue 单组件中使用，理论上在任何地方均可使用。
#### Which issue(s) this PR fixes:
Fixes halo-dev/halo#2534
#### Screenshots:
<img width="752" alt="image" src="https://user-images.githubusercontent.com/21301288/196099183-09e64daf-0077-4373-9603-5d4349dfce3d.png">
#### Special notes for your reviewer:
/cc @halo-dev/sig-halo-console
测试方式：
https://halo-admin-ui-git-fork-ruibaby-feat-toast-component-halo-dev.vercel.app/story/src-components-toast-toast-story-vue?variantId=_default
测试功能是否正常。
#### Does this PR introduce a user-facing change?
```release-note
添加 Toast 组件
```
f2c-ci-robot bot
pushed a commit
to halo-dev/console
that referenced
this issue
Oct 18, 2022
… login (#645) #### What type of PR is this? /kind feature /milestone 2.0 #### What this PR does / why we need it: 为登录操作和加载插件资源添加异常提示。 #### Which issue(s) this PR fixes: Fixes halo-dev/halo#2534 #### Screenshots: <img width="650" alt="image" src="https://user-images.githubusercontent.com/21301288/196105634-ece58153-d9e0-450d-8068-8cda1bed8bcc.png"> <img width="634" alt="image" src="https://user-images.githubusercontent.com/21301288/196105704-e3a59808-8a33-456d-b668-13e891512353.png"> #### Special notes for your reviewer: 目前还没有处理全局的接口请求异常，需要后端修改异常返回结构。 /cc @halo-dev/sig-halo-console #### Does this PR introduce a user-facing change? <!-- 如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。 否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change）， Release Note 需要以 `action required` 开头。 If no, just write "NONE" in the release-note block below. If yes, a release note is required: Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required". --> ```release-note 为登录操作和加载插件资源添加异常提示。 ```
JohnNiang
pushed a commit
to JohnNiang/halo
that referenced
this issue
Mar 2, 2023
#### What type of PR is this?
/kind feature
/milestone 2.0
#### What this PR does / why we need it:
添加 Toast 组件。
特性：
1. 支持相同消息合并。
2. 支持鼠标悬停。
使用方式：
```vue
import { Toast } from '@halo-dev/components'
Toast.success("Hello", { //props })
Toast.info("Hello", { //props })
Toast.warning("Hello", { //props })
Toast.error("Hello", { //props })
```
props：
```ts
export interface ToastProps {
type?: Type;
content?: string;
duration?: number;
closable?: boolean;
frozenOnHover?: boolean;
count?: 0;
onClose?: () => void;
}
```
Toast 方法不仅可以在 Vue 单组件中使用，理论上在任何地方均可使用。
#### Which issue(s) this PR fixes:
Fixes halo-dev#2534
#### Screenshots:
<img width="752" alt="image" src="https://user-images.githubusercontent.com/21301288/196099183-09e64daf-0077-4373-9603-5d4349dfce3d.png">
#### Special notes for your reviewer:
/cc @halo-dev/sig-halo-console
测试方式：
https://halo-admin-ui-git-fork-ruibaby-feat-toast-component-halo-dev.vercel.app/story/src-components-toast-toast-story-vue?variantId=_default
测试功能是否正常。
#### Does this PR introduce a user-facing change?
```release-note
添加 Toast 组件
```
JohnNiang
pushed a commit
to JohnNiang/halo
that referenced
this issue
Mar 2, 2023
… login (halo-dev/console#645) #### What type of PR is this? /kind feature /milestone 2.0 #### What this PR does / why we need it: 为登录操作和加载插件资源添加异常提示。 #### Which issue(s) this PR fixes: Fixes halo-dev#2534 #### Screenshots: <img width="650" alt="image" src="https://user-images.githubusercontent.com/21301288/196105634-ece58153-d9e0-450d-8068-8cda1bed8bcc.png"> <img width="634" alt="image" src="https://user-images.githubusercontent.com/21301288/196105704-e3a59808-8a33-456d-b668-13e891512353.png"> #### Special notes for your reviewer: 目前还没有处理全局的接口请求异常，需要后端修改异常返回结构。 /cc @halo-dev/sig-halo-console #### Does this PR introduce a user-facing change? <!-- 如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。 否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change）， Release Note 需要以 `action required` 开头。 If no, just write "NONE" in the release-note block below. If yes, a release note is required: Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required". --> ```release-note 为登录操作和加载插件资源添加异常提示。 ```
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
你当前使用的版本
2.0.0-alpha.1
描述一下此特性
目前 Console 是没有使用提示框来提示使用者操作是否有异常的。期望提供 Toast 或者 Notification 组件以支持。
/kind feature
/area console
/milestone 2.0
/assign
附加信息
No response
The text was updated successfully, but these errors were encountered: