update : message

packages/aux-admin/aux-ui/main.ts

@@ -10,6 +10,7 @@ import nobleCardInstall,{NobleCard} from "./noble-card"
 import nobleSwiperInstall,{Swiper,SwiperItem} from "./swiper"
 import nobleCollapseInstall ,{NobleCollapse,NobleCollapseItem} from './noble-collapse'
 import collapseTransitionInstall ,{CollapseTransition} from './collapse-transition'
+import wiseMessageInstall, { Message as WiseMessage } from './wise-message';
 import "./styles/global.scss"
 const installs = [
     GfgButtonInstall,
@@ -22,7 +23,8 @@ const installs = [
     nobleCardInstall,
     nobleSwiperInstall,
     nobleCollapseInstall,
-    collapseTransitionInstall
+    collapseTransitionInstall,
+    wiseMessageInstall
 ]
 
 export {
@@ -38,7 +40,8 @@ export {
     SwiperItem,
     NobleCollapse,
     NobleCollapseItem,
-    CollapseTransition
+    CollapseTransition,
+    WiseMessage
 }
 export default {
     verison: '0.0.1',

packages/aux-admin/aux-ui/styles/global.scss

@@ -59,6 +59,7 @@ $globa-prefix: aux;
   --aux-fill-color-blank:#fff;
   --aux-transition-duration:.3s;
 
+// wise
 
 
   // Colors
@@ -69,6 +70,13 @@ $globa-prefix: aux;
   --white: #ffffff;
   --blue: #0071e3;
   --blueRgba: "0, 113, 227";
+  --black: #000000;
+  --primary:#409eff;
+  --success:#67c23a;
+  --warning:#e6a23c;
+  --danger:#f56c6c;
+  --error: #f56c6c;
+  --info:#909399;
 
   //fonts
   --fontL: "Source Sans Pro light";

packages/aux-admin/aux-ui/styles/icon.scss

@@ -1 +1 @@
-@import "//at.alicdn.com/t/c/font_3882013_ze9zyogk6e.css";
+@import "//at.alicdn.com/t/c/font_3882013_3q6kp24fxh9.css";

packages/aux-admin/aux-ui/wise-message/index.ts

@@ -1,15 +1,15 @@
 import type { App } from 'vue';
-import WiseMessage from './src/wise-message';
+import Message from './src/wise-message-service';
 
 export * from './src/wise-message-types';
 
-export { WiseMessage };
+export { Message };
 
 export default {
   title: 'WiseMessage 万设消息弹出框',
   category: '通用',
-  status: '1%', // TODO 组件完成状态，开发完组件新特性请及时更新该状态值；若组件开发完成则填入'100%'，并删除该注释
+  status: '100%', // TODO 组件完成状态，开发完组件新特性请及时更新该状态值；若组件开发完成则填入'100%'，并删除该注释
   install(app: App): void {
-    app.component(WiseMessage.name, WiseMessage);
+    app.config.globalProperties.$message = Message;
   }
 };

packages/aux-admin/aux-ui/wise-message/src/components/close-icon.tsx

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue';
+import { useNamespace } from '../../../shared/hooks/use-namespace';
+export default defineComponent({
+    emits: ['click'],
+    setup(props, { emit }) {
+        const ns = useNamespace('wise-message')
+        return () => (
+            <div class={ns.e('icon-close')} onClick={(e) => emit('click', e)}>
+                <i class="iconfont icon-times"></i>
+            </div>
+        );
+    },
+});

packages/aux-admin/aux-ui/wise-message/src/components/index.tsx

@@ -0,0 +1,25 @@
+
+
+export  function SuccessIcon() {
+  return (
+    <i class="iconfont icon-check-circle-fill"></i>
+  )
+}
+export  function InfoIcon() {
+  return (
+    <i class="iconfont icon-question-circle-fill"></i>
+  )
+}
+export  function WarningIcon() {
+  return (
+    <i class="iconfont icon-exclamationcircle-f"></i>
+  )
+}
+export function ErrorIcon() {
+  return (
+    <i class="iconfont icon-times-circle-fill"></i>
+  )
+}
+
+
+

packages/aux-admin/aux-ui/wise-message/src/instance.tsx

@@ -0,0 +1,51 @@
+import { shallowReactive,createApp,onUnmounted } from 'vue';
+import type { App } from 'vue';
+import type { EmitEventFn, WiseMessageOption } from './wise-message-types';
+import Message from './wise-message';
+
+export type MessageContext = {
+  id: string;
+  handler?: EmitEventFn;
+  props: WiseMessageOption;
+};
+
+export const instances: MessageContext[] = shallowReactive([]);
+
+export const getLastOffset = (id: string): number => {
+  const idx = instances.findIndex((instance) => instance.id === id);
+  return idx * 65 + 80;
+};
+
+export const deleteInstance = (id: string | undefined): number => {
+  const idx = instances.findIndex((instance) => instance.id === id);
+  if (idx !== -1) {
+    instances.splice(idx, 1);
+  }
+  return idx;
+};
+
+export const initInstance = (id: string, props: WiseMessageOption, message?: string): MessageContext => {
+  const container = document.createElement('div');
+  container.id = id;
+  const app: App = createApp({
+    setup() {
+      onUnmounted(() => {
+        document.body.removeChild(container);
+      });
+
+      return () => (
+        <Message {...props} id={id} onDestroy={app.unmount}>
+          {message}
+        </Message>
+      );
+    },
+  });
+
+  document.body.appendChild(container);
+  app.mount(container);
+
+  return {
+    id,
+    props,
+  };
+};

packages/aux-admin/aux-ui/wise-message/src/wise-message-service.tsx

@@ -0,0 +1,98 @@
+import { reactive } from 'vue';
+import {isString} from 'lodash-es'
+import { WiseMessageOption, VoidFn } from './wise-message-types';
+import { instances, initInstance, deleteInstance } from './instance';
+
+const defaultOptions: WiseMessageOption = {
+  duration: 3000,
+  type: 'normal',
+};
+
+const normalizeOptions = (params?: WiseMessageOption | string) => {
+  const options: WiseMessageOption =
+    !params || isString(params)
+      ? { message: params }
+      : params;
+
+  const normalized = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  return normalized;
+};
+
+
+let seed = 0;
+function open(options: WiseMessageOption): void {
+  const originOnClose: VoidFn | null = options.onClose || null;
+  const messageContent = options.message;
+  // let timer;
+  delete options.message;
+
+  const props = reactive({
+    ...defaultOptions,
+    ...options,
+    onClose: () => {
+      props.visible = false;
+      deleteInstance(props.id);
+      originOnClose?.();
+    },
+  });
+
+  seed ++;
+  const id = `message_${seed}`;
+  props.id = id;
+  const messageContext = initInstance(id,props, messageContent);
+  instances.push(messageContext);
+  props.visible = true;
+
+}
+
+function message(params: WiseMessageOption | string): void {
+  const options: WiseMessageOption = normalizeOptions(params);
+  open({
+    ...options,
+  });
+}
+
+function success(params: WiseMessageOption | string): void {
+  const options: WiseMessageOption = normalizeOptions(params);
+  open({
+    ...options,
+    type:'success'
+  });
+}
+
+function error(params: WiseMessageOption | string): void {
+  const options: WiseMessageOption = normalizeOptions(params);
+  open({
+    ...options,
+    type:'error'
+  });
+}
+
+function warning(params: WiseMessageOption | string): void {
+  const options: WiseMessageOption = normalizeOptions(params);
+  open({
+    ...options,
+    type:'warning'
+  });
+}
+
+function info(params: WiseMessageOption | string): void {
+  const options: WiseMessageOption = normalizeOptions(params);
+  open({
+    ...options,
+    type:'info'
+  });
+}
+
+const Message = Object.assign(message , {
+  success,
+  error,
+  warning,
+  info,
+});
+
+export default Message;

packages/aux-admin/aux-ui/wise-message/src/wise-message-types.ts

@@ -1,10 +1,56 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-
+export type MessageType = 'normal' | 'success' | 'error' | 'warning' | 'info';
 export const wiseMessageProps = {
-  // data: {
-  //   type: type,
-  //   default: defaultValue
-  // },
+  id: {
+    type: String,
+    default: '',
+  },
+  // 是否显示
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  // 消息内容
+  message: {
+    type: String,
+    default: '',
+  },
+  // 提示类型
+  type: {
+    type: String as PropType<MessageType>,
+    default: 'normal',
+  },
+  // 是否展示边框
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否展示阴影
+  shadow: {
+    type: Boolean,
+    default: true,
+  },
+  // 延迟时间
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  // 展示可关闭按钮
+  showClose: {
+    type: Boolean,
+    default: false,
+  },
+  // 关闭回调
+  onClose: {
+    type: Function as PropType<() => void>,
+  },
 } as const;
 
 export type WiseMessageProps = ExtractPropTypes<typeof wiseMessageProps>;
+
+export type EmitEventFn = (event: 'close' | 'destroy', result?: unknown) => void;
+
+
+export type WiseMessageOption = Partial<WiseMessageProps> & { message?: string };
+
+export type VoidFn = () => void;