fix: the useMessage icon style problem

vben
1 parent 8f5016e3
Showing 5 changed files with 11 additions and 3 deletions
CHANGELOG.zh_CN.md
src/design/ant/index.less
src/hooks/core/types.ts
src/hooks/web/useMessage.tsx
src/views/demo/feat/msg/index.vue
@@ -27,6 +27,7 @@
 - 修复热更新时多次注册组件警告问题
 - 修复登录后出现登录标签页
 - 修复路由切换参数消失问题
+- 修复 useMessage 图标样式问题
 ## 2.0.0-rc.5 (2020-10-26)
@@ -27,6 +27,10 @@
   color: @error-color !important;
 }
+.modal-icon-info {
+  color: @primary-color !important;
+}
+
 .ant-modal-mask {
   background-color: rgba(0, 0, 0, 0.2);
 }
@@ -87,6 +87,6 @@ export interface MessageOptions {
   offset?: number;
 }
 export interface ModalOptionsEx extends Omit<ModalOptions, 'iconType'> {
-  iconType: 'warning' | 'success' | 'error';
+  iconType: 'warning' | 'success' | 'error' | 'info';
 }
 export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;
@@ -13,6 +13,8 @@ function getIcon(iconType: string) {
     return <InfoCircleFilled class="modal-icon-warning" />;
   } else if (iconType === 'success') {
     return <CheckCircleFilled class="modal-icon-success" />;
+  } else if (iconType === 'info') {
+    return <InfoCircleFilled class="modal-icon-info" />;
   } else {
     return <CloseCircleFilled class="modal-icon-error" />;
   }
@@ -49,7 +51,7 @@ function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOp
   };
 }
 function createSuccessModal(options: ModalOptionsPartial) {
-  return Modal.success(createModalOptions(options, 'check'));
+  return Modal.success(createModalOptions(options, 'success'));
 }
 function createErrorModal(options: ModalOptionsPartial) {
   return Modal.error(createModalOptions(options, 'close'));
@@ -58,7 +60,7 @@ function createInfoModal(options: ModalOptionsPartial) {
   return Modal.info(createModalOptions(options, 'info'));
 }
 function createWarningModal(options: ModalOptionsPartial) {
-  return Modal.warning(createModalOptions(options, 'info'));
+  return Modal.warning(createModalOptions(options, 'warning'));
 }
 notification.config({
@@ -13,6 +13,7 @@
     </CollapseContainer>
     <CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Comfirm">
+      <a-button @click="handleConfirm('info')" class="mr-2">Info</a-button>
       <a-button @click="handleConfirm('warning')" color="warning" class="mr-2">Warning</a-button>
       <a-button @click="handleConfirm('success')" color="success" class="mr-2">Success</a-button>
       <a-button @click="handleConfirm('error')" color="error" class="mr-2">Error</a-button>