u

code/base-project/base-vue/packages/ao-design/package.json

@@ -10,6 +10,10 @@
       "*": ["./src/*"]
     }
   },
+  "files": [
+    "src/**/*.scss",
+    "src/**/*.ts"
+  ],
   "peerDependencies": {
     "@iconify/vue": "5.0.0",
     "vue": "^3.3.0"

code/base-project/base-vue/packages/ao-design/src/_styles/_variables.scss

@@ -84,3 +84,9 @@ $shadow-surface: var(--ao-shadow-surface);
 $shadow-popup: var(--ao-shadow-popup);
 // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
 $shadow-overlay: var(--ao-shadow-overlay);
+
+// 内投影
+$shadow-inset-top: var(--ao-shadow-inset-top);
+$shadow-inset-right: var(--ao-shadow-inset-right);
+$shadow-inset-bottom: var(--ao-shadow-inset-bottom);
+$shadow-inset-left: var(--ao-shadow-inset-left);

code/base-project/base-vue/packages/ao-design/src/_styles/index.scss

@@ -1 +1,2 @@
 @use './theme/index.scss' as *;
+

code/base-project/base-vue/packages/ao-design/src/_styles/theme/_dark.scss

@@ -63,4 +63,10 @@
   --ao-shadow-popup: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
   // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
   --ao-shadow-overlay: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
+
+  // 内投影
+  --ao-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
+  --ao-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
+  --ao-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
+  --ao-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
 }

code/base-project/base-vue/packages/ao-design/src/_styles/theme/_light.scss

@@ -66,4 +66,10 @@
   // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
   --ao-shadow-overlay:
     0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
+
+  // 内投影 
+  --ao-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
+  --ao-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
+  --ao-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
+  --ao-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
 }

code/base-project/base-vue/packages/ao-design/src/button/index.tsx

@@ -1,7 +1,6 @@
 import { computed, defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import Icon from '../icon'
-import './index.scss'
 
 export default defineComponent({
   name: 'Button',

code/base-project/base-vue/packages/ao-design/src/icon/index.scss

@@ -6,6 +6,12 @@ $icon-prefix: #{$prefix}-icon;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 1em;
+  height: 1em;
+  svg {
+    width: 1em;
+    height: 1em;
+  }
   &-spin {
     animation: spin 1s linear infinite;
     --rotate-angle: 360deg;

code/base-project/base-vue/packages/ao-design/src/icon/index.tsx

@@ -2,30 +2,39 @@ import type { PropType } from 'vue'
 import { Icon } from '@iconify/vue'
 import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
-import './index.scss'
 
 export default defineComponent({
   name: 'Icon',
   props: {
     icon: { type: String as PropType<string>, required: true },
-    size: { type: Number, default: 16 },
+    size: { type: Number },
     color: { type: String, default: 'currentColor' },
     spin: { type: Boolean, default: false },
   },
-  setup(props) {
+  setup(props, { slots }) {
     const prefixCls = getPrefixCls('icon')
-
+    const fontStyle = {
+      ...(props.size ? { fontSize: `${props.size}px` } : {}), // size 存在才设置
+      verticalAlign: 'middle',
+    }
     return () => (
       <i
         class={[prefixCls, props.spin && `${prefixCls}-spin`]}
+        style={fontStyle}
       >
-        <Icon
-          icon={props.icon}
-          width={props.size}
-          height={props.size}
-          color={props.color}
-          style={{ verticalAlign: 'middle' }}
-        />
+        {slots.default
+          ? (
+              slots.default()
+            )
+          : props.icon
+            ? (
+                <Icon
+                  icon={props.icon}
+                  color={props.color}
+                  style={{ verticalAlign: 'middle' }}
+                />
+              )
+            : null}
       </i>
     )
   },

code/base-project/base-vue/packages/ao-design/src/index.scss

@@ -4,5 +4,6 @@
 @use './input/index.scss' as *;
 @use './textarea/index.scss' as *;
 @use './group/index.scss' as *;
-@use "./popup/index.scss" as *;
-
+@use './popup/index.scss' as *;
+@use './icon/index.scss' as *;
+@use './message/index.scss' as *;

code/base-project/base-vue/packages/ao-design/src/index.ts

@@ -3,6 +3,8 @@ import type { App, Component } from 'vue'
 
 import * as comps from './components'
 
+import { useMessage } from './message'
+
 // 按需导出组件（可单独 import）
 export * from './components'
 
@@ -13,7 +15,7 @@ const allComponents = Object.values(comps).filter(
 
 export interface AoDesignOptions {
   prefix?: string
-  components?: Component[] // 按需注册时传入需要注册的组件
+  components?: Component[]
 }
 
 const AoDesign = {
@@ -38,4 +40,4 @@ const AoDesign = {
   },
 }
 
-export default AoDesign
+export { AoDesign, useMessage }

code/base-project/base-vue/packages/ao-design/src/message/index.scss

@@ -0,0 +1,128 @@
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
+
+$message-prefix: #{$prefix}-message;
+
+.#{$message-prefix} {
+  &-wrapper {
+    position: fixed;
+    z-index: 6000;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  &-item {
+    display: inline-flex;
+    align-items: center;
+    outline: 0;
+    width: fit-content;
+    vertical-align: middle;
+    border-radius: $border-radius;
+    padding: 6px 12px;
+    background-color: $bg-color-container;
+    color: $text-color-base;
+    box-shadow: $shadow-overlay;
+    box-sizing: border-box;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  &-content {
+    font-size: 14px;
+    line-height: 1;
+  }
+  &-icon {
+    flex-shrink: 0;
+    margin-right: 8px;
+  }
+
+  &-close {
+    flex-shrink: 0;
+    margin-left: 6px;
+    color: $text-color-assist;
+    cursor: pointer;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    &:hover {
+      background-color: $default-color-hover;
+    }
+  }
+
+  &-info {
+    color: $primary-color;
+  }
+  &-success {
+    color: $success-color;
+  }
+  &-warning {
+    color: $warning-color;
+  }
+  &-error {
+    color: $danger-color;
+  }
+  &-loading {
+    color: $primary-color;
+  }
+  &-placement {
+    &-top {
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: column;
+      align-items: center;
+    }
+    &-bottom {
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: column-reverse;
+      align-items: center;
+    }
+    &-left {
+      top: 50%;
+      left: 20px;
+      transform: translateY(-50%);
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    &-right {
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    // 组合方向
+    &-top-start {
+      top: 20px;
+      left: 20px;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    &-top-end {
+      top: 20px;
+      right: 20px;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+    &-bottom-start {
+      bottom: 20px;
+      left: 20px;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+    }
+    &-bottom-end {
+      bottom: 20px;
+      right: 20px;
+      flex-direction: column-reverse;
+      align-items: flex-end;
+    }
+    &-center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}

code/base-project/base-vue/packages/ao-design/src/message/index.ts

@@ -0,0 +1,176 @@
+import { createApp, h } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Icon from '../icon/index'
+
+type Placement
+  = | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'center'
+
+interface MessageOptions {
+  message: string
+  type?: 'info' | 'success' | 'warning' | 'error' | 'loading'
+  placement?: Placement
+  duration?: number
+  showClose?: boolean
+}
+
+interface MessageHandle {
+  close: () => void
+}
+
+interface MessageFn {
+  (msg: string | MessageOptions): MessageHandle
+  info: (msg: string | MessageOptions) => MessageHandle
+  success: (msg: string | MessageOptions) => MessageHandle
+  warning: (msg: string | MessageOptions) => MessageHandle
+  error: (msg: string | MessageOptions) => MessageHandle
+  closeAll: () => void
+}
+
+const prefixCls = getPrefixCls('message')
+const containers: Partial<Record<Placement, HTMLElement>> = {}
+const instances: MessageHandle[] = []
+
+function getContainer(placement: Placement = 'top') {
+  if (!containers[placement]) {
+    const wrapper = document.createElement('div')
+    wrapper.className = `${prefixCls}-wrapper ${prefixCls}-placement-${placement}`
+    document.body.appendChild(wrapper)
+    containers[placement] = wrapper
+  }
+  return containers[placement]!
+}
+
+function getTransform(placement: Placement, hidden: boolean) {
+  if (placement.startsWith('top'))
+    return hidden ? 'translateY(-10px)' : 'translateY(0)'
+  if (placement.startsWith('bottom'))
+    return hidden ? 'translateY(10px)' : 'translateY(0)'
+  if (placement.startsWith('left'))
+    return hidden ? 'translateX(-10px)' : 'translateX(0)'
+  if (placement.startsWith('right'))
+    return hidden ? 'translateX(10px)' : 'translateX(0)'
+  if (placement === 'center')
+    return hidden ? 'scale(0.8)' : 'scale(1)'
+  return hidden ? 'translateY(-10px)' : 'translateY(0)'
+}
+
+export function useMessage(): MessageFn {
+  const createMessage = (
+    msg: string | MessageOptions,
+    defaultType: 'info' | 'success' | 'warning' | 'error' | 'loading' = 'info',
+  ): MessageHandle => {
+    const opts: MessageOptions = typeof msg === 'string'
+      ? { message: msg, type: defaultType }
+      : { ...msg, type: msg.type || defaultType }
+
+    const { message, type, placement = 'top', duration = 3000 } = opts
+    const container = getContainer(placement)
+
+    let timer: number | undefined
+
+    const iconMap: Record<string, string> = {
+      success: 'ix:success-filled',
+      error: 'ix:error-filled',
+      warning: 'ix:warning-filled',
+      info: 'ix:info-filled',
+      loading: 'mingcute:loading-line',
+    }
+
+    let handle: MessageHandle
+
+    const app = createApp({
+      render() {
+        return h(
+          'div',
+          {
+            class: [`${prefixCls}-item`],
+            style: {
+              opacity: 0,
+              transform: getTransform(placement, true),
+              transition: 'all 0.3s ease-in-out',
+            },
+          },
+          [
+            h(Icon, {
+              icon: iconMap[type ?? 'info'],
+              size: 20,
+              class: `${prefixCls}-icon ${prefixCls}-${type ?? 'info'}`,
+              spin: type === 'loading',
+            }),
+            h('span', { class: `${prefixCls}-content` }, message),
+            opts.showClose
+              ? h(Icon, {
+                  icon: 'ix:close',
+                  size: 14,
+                  class: `${prefixCls}-close`,
+                  onClick: () => handle?.close?.(),
+                })
+              : null,
+          ],
+        )
+      },
+    })
+
+    const vm = app.mount(document.createElement('div'))
+    container.appendChild(vm.$el)
+
+    // 出现动画
+    requestAnimationFrame(() => {
+      Object.assign(vm.$el.style, {
+        opacity: '1',
+        transform: getTransform(placement, false),
+      })
+    })
+
+    handle = {
+      close: () => {
+        if (timer)
+          clearTimeout(timer)
+
+        Object.assign(vm.$el.style, {
+          opacity: '0',
+          transform: getTransform(placement, true),
+        })
+
+        setTimeout(() => {
+          if (container.contains(vm.$el))
+            container.removeChild(vm.$el)
+          app.unmount()
+          const index = instances.indexOf(handle)
+          if (index !== -1)
+            instances.splice(index, 1)
+        }, 300)
+      },
+    }
+
+    instances.push(handle)
+
+    // 自动关闭
+    if (duration > 0) {
+      timer = window.setTimeout(() => {
+        handle.close()
+      }, duration)
+    }
+
+    return handle
+  }
+
+  const api = ((msg: string | MessageOptions) => createMessage(msg)) as MessageFn
+  api.info = msg => createMessage(msg, 'info')
+  api.success = msg => createMessage(msg, 'success')
+  api.warning = msg => createMessage(msg, 'warning')
+  api.error = msg => createMessage(msg, 'error')
+  api.closeAll = () => {
+    instances.slice().forEach(instance => instance.close())
+  }
+
+  return api
+}

code/base-project/base-vue/packages/ao-design/src/popup/index.scss

@@ -9,10 +9,11 @@ $popup-prefix: '#{$prefix}-popup';
   color: $text-color-base;
   padding: 4px 8px;
   font-size: 13px;
-  border-radius: 2px;
+  border-radius: $border-radius;
   z-index: 1000;
   box-sizing: border-box;
   text-align: center;
+  box-shadow: $shadow-popup, $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;
   &-arrow {
     position: absolute;
     width: 8px;
@@ -28,53 +29,38 @@ $popup-prefix: '#{$prefix}-popup';
       transform-origin: center;
     }
   }
-  // 上方弹出，阴影主方向靠下（轻微），边缘明显
-  &[data-popup-placement^='top'] {
-    box-shadow:
-      0 4px 8px rgba(0, 0, 0, 0.06),
-      0 0 4px rgba(0, 0, 0, 0.12); //
-  }
-
-  // 下方弹出，阴影主方向靠上，边缘明显
-  &[data-popup-placement^='bottom'] {
-    box-shadow:
-      0 -4px 8px rgba(0, 0, 0, 0.06),
-      0 0 4px rgba(0, 0, 0, 0.12);
-  }
-
-  // 左侧弹出，阴影主方向靠右，边缘明显
-  &[data-popup-placement^='left'] {
-    box-shadow:
-      4px 0 8px rgba(0, 0, 0, 0.06),
-      0 0 4px rgba(0, 0, 0, 0.12);
-  }
-
-  // 右侧弹出，阴影主方向靠左，边缘明显
-  &[data-popup-placement^='right'] {
-    box-shadow:
-      -4px 0 8px rgba(0, 0, 0, 0.06),
-      0 0 4px rgba(0, 0, 0, 0.12);
-  }
 
   // 上方弹出，箭头在底部
   &[data-popup-placement^='top'] > &-arrow {
     bottom: -4px;
   }
+  &[data-popup-placement^='top'] > &-arrow::before {
+    box-shadow: $shadow-inset-left, $shadow-inset-bottom;
+  }
 
   // 下方弹出，箭头在顶部
   &[data-popup-placement^='bottom'] > &-arrow {
     top: -4px;
   }
+  &[data-popup-placement^='bottom'] > &-arrow::before {
+    box-shadow: $shadow-inset-top, $shadow-inset-right;
+  }
 
   // 左侧弹出，箭头在右侧
   &[data-popup-placement^='left'] > &-arrow {
     right: -4px;
   }
+  &[data-popup-placement^='left'] > &-arrow::before {
+    box-shadow: $shadow-inset-left, $shadow-inset-top;
+  }
 
   // 右侧弹出，箭头在左侧
   &[data-popup-placement^='right'] > &-arrow {
     left: -4px;
   }
+  &[data-popup-placement^='right'] > &-arrow::before {
+    box-shadow: $shadow-inset-right, $shadow-inset-bottom;
+  }
 }
 
 /* 普通淡入淡出动画 */

code/base-project/base-vue/packages/ao-design/src/popup/index.tsx

@@ -1,4 +1,4 @@
-import type { PropType, VNode } from 'vue'
+import type { PropType } from 'vue'
 import { arrow, autoUpdate, flip, offset, useFloating } from '@floating-ui/vue'
 
 import {

code/base-project/base-vue/packages/ao-design/src/spin/index.tsx

@@ -2,7 +2,6 @@ import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 import Icon from '../icon'
-import './index.scss'
 
 export default defineComponent({
   name: 'Spin',