u
This commit is contained in:
1 parent
5136bb90bd
commit
603f938e96
17 files changed
+334
-654
No files matched your search
@@ -0,0 +1,162 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { arrow, useFloating, offset } from '@floating-ui/vue';
|
||||||
|
|
||||||
|
// 4 个方向按钮的 refs
|
||||||
|
const referenceBottom = ref(null);
|
||||||
|
const referenceTop = ref(null);
|
||||||
|
const referenceLeft = ref(null);
|
||||||
|
const referenceRight = ref(null);
|
||||||
|
|
||||||
|
const floatingBottom = ref(null);
|
||||||
|
const floatingTop = ref(null);
|
||||||
|
const floatingLeft = ref(null);
|
||||||
|
const floatingRight = ref(null);
|
||||||
|
|
||||||
|
const arrowBottom = ref(null);
|
||||||
|
const arrowTop = ref(null);
|
||||||
|
const arrowLeft = ref(null);
|
||||||
|
const arrowRight = ref(null);
|
||||||
|
|
||||||
|
// useFloating 分别初始化
|
||||||
|
const { floatingStyles: bottomStyles, middlewareData: bottomData } = useFloating(
|
||||||
|
referenceBottom,
|
||||||
|
floatingBottom,
|
||||||
|
{ placement: 'bottom-start', middleware: [offset(10), arrow({ element: arrowBottom })] }
|
||||||
|
);
|
||||||
|
|
||||||
|
const { floatingStyles: topStyles, middlewareData: topData } = useFloating(
|
||||||
|
referenceTop,
|
||||||
|
floatingTop,
|
||||||
|
{ placement: 'top', middleware: [offset(10), arrow({ element: arrowTop })] }
|
||||||
|
);
|
||||||
|
|
||||||
|
const { floatingStyles: leftStyles, middlewareData: leftData } = useFloating(
|
||||||
|
referenceLeft,
|
||||||
|
floatingLeft,
|
||||||
|
{ placement: 'left', middleware: [offset(10), arrow({ element: arrowLeft })] }
|
||||||
|
);
|
||||||
|
|
||||||
|
const { floatingStyles: rightStyles, middlewareData: rightData } = useFloating(
|
||||||
|
referenceRight,
|
||||||
|
floatingRight,
|
||||||
|
{ placement: 'right', middleware: [offset(10), arrow({ element: arrowRight })] }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<t-tooltip content="这是Tooltip内容">
|
||||||
|
<t-button>hover me</t-button>
|
||||||
|
<t-button>hover me</t-button>
|
||||||
|
</t-tooltip>
|
||||||
|
<div class="demo">
|
||||||
|
<!-- Bottom -->
|
||||||
|
<div class="item">
|
||||||
|
<button ref="referenceBottom">Bottom</button>
|
||||||
|
<div ref="floatingBottom" :style="bottomStyles" class="floating-box">
|
||||||
|
Bottom Floating
|
||||||
|
<div
|
||||||
|
ref="arrowBottom"
|
||||||
|
class="floating-arrow"
|
||||||
|
:style="{
|
||||||
|
left: bottomData.arrow?.x != null ? `${bottomData.arrow.x}px` : '',
|
||||||
|
top: bottomData.arrow?.y != null ? `${bottomData.arrow.y}px` : '',
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Top -->
|
||||||
|
<div class="item">
|
||||||
|
<button ref="referenceTop">Top</button>
|
||||||
|
<div ref="floatingTop" :style="topStyles" class="floating-box">
|
||||||
|
Top Floating
|
||||||
|
<div
|
||||||
|
ref="arrowTop"
|
||||||
|
class="floating-arrow"
|
||||||
|
:style="{
|
||||||
|
left: topData.arrow?.x != null ? `${topData.arrow.x}px` : '',
|
||||||
|
top: topData.arrow?.y != null ? `${topData.arrow.y}px` : '',
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Left -->
|
||||||
|
<div class="item">
|
||||||
|
<button ref="referenceLeft">Left</button>
|
||||||
|
<div ref="floatingLeft" :style="leftStyles" class="floating-box">
|
||||||
|
Left Floating
|
||||||
|
<div
|
||||||
|
ref="arrowLeft"
|
||||||
|
class="floating-arrow"
|
||||||
|
:style="{
|
||||||
|
left: leftData.arrow?.x != null ? `${leftData.arrow.x}px` : '',
|
||||||
|
top: leftData.arrow?.y != null ? `${leftData.arrow.y}px` : '',
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right -->
|
||||||
|
<div class="item">
|
||||||
|
<button ref="referenceRight">Right</button>
|
||||||
|
<div ref="floatingRight" :style="rightStyles" class="floating-box">
|
||||||
|
Right Floating
|
||||||
|
<div
|
||||||
|
ref="arrowRight"
|
||||||
|
class="floating-arrow"
|
||||||
|
:style="{
|
||||||
|
left: rightData.arrow?.x != null ? `${rightData.arrow.x}px` : '',
|
||||||
|
top: rightData.arrow?.y != null ? `${rightData.arrow.y}px` : '',
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.demo {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 120px;
|
||||||
|
padding: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-box {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #333;
|
||||||
|
color: #fff;
|
||||||
|
padding: 4px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 箭头 */
|
||||||
|
.floating-arrow {
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-arrow::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #333;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"Print AoDesignComponent TSX": {
|
||||||
|
"scope": "typescriptreact",
|
||||||
|
"prefix": "atsx",
|
||||||
|
"body": [
|
||||||
|
"import { defineComponent } from 'vue';",
|
||||||
|
"import { getPrefixCls } from '../_utils/getPrefixCls';",
|
||||||
|
"",
|
||||||
|
"export default defineComponent({",
|
||||||
|
" name: '${1:AoComponent}',",
|
||||||
|
" props: {",
|
||||||
|
" },",
|
||||||
|
" emits: [],",
|
||||||
|
" setup(props, { slots, emit }) {",
|
||||||
|
" const prefixCls = getPrefixCls('${2:component}');",
|
||||||
|
" return () => (",
|
||||||
|
" <div class={prefixCls}>",
|
||||||
|
" {slots.default?.()}",
|
||||||
|
" </div>",
|
||||||
|
" );",
|
||||||
|
" }",
|
||||||
|
"})"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Print AoDesignComponent SCSS": {
|
||||||
|
"scope": "scss",
|
||||||
|
"prefix": "ascss",
|
||||||
|
"body": [
|
||||||
|
"@use '../_styles/_variables.scss' as *;",
|
||||||
|
"@use 'sass:color';",
|
||||||
|
"",
|
||||||
|
"$${1:component}-prefix: #{$prefix}-${1:component};",
|
||||||
|
"",
|
||||||
|
".#{${1:component}-prefix} {",
|
||||||
|
"}"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -15,6 +15,7 @@
|
|||||||
"vue": "^3.3.0"
|
"vue": "^3.3.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@floating-ui/vue": "^1.1.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"sass": "^1.90.0",
|
"sass": "^1.90.0",
|
||||||
|
|||||||
@@ -1,58 +1,31 @@
|
|||||||
.popup-reference {
|
@use '../_styles/_variables.scss' as *;
|
||||||
display: inline-block; /* keeps reference size */
|
@use 'sass:color';
|
||||||
}
|
|
||||||
|
|
||||||
.popup {
|
$popup-prefix: "#{$prefix}-popup";
|
||||||
|
|
||||||
|
.#{$popup-prefix} {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #333;
|
background-color: #333;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 6px 10px;
|
padding: 4px 8px;
|
||||||
border-radius: 4px;
|
font-size: 12px;
|
||||||
font-size: 13px;
|
border-radius: 2px;
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
|
box-sizing: border-box;
|
||||||
|
|
||||||
.popup-content {
|
&-arrow {
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-arrow {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 8px;
|
||||||
height: 0;
|
height: 8px;
|
||||||
border-style: solid;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.popup-top .popup-arrow {
|
&-arrow::before {
|
||||||
bottom: -6px;
|
position: absolute;
|
||||||
left: 50%;
|
content: '';
|
||||||
transform: translateX(-50%);
|
width: 8px;
|
||||||
border-width: 6px 6px 0 6px;
|
height: 8px;
|
||||||
border-color: #333 transparent transparent transparent;
|
background: #333;
|
||||||
}
|
transform: rotate(45deg);
|
||||||
|
box-sizing: border-box;
|
||||||
&.popup-bottom .popup-arrow {
|
|
||||||
top: -6px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
border-width: 0 6px 6px 6px;
|
|
||||||
border-color: transparent transparent #333 transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.popup-left .popup-arrow {
|
|
||||||
right: -6px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-width: 6px 0 6px 6px;
|
|
||||||
border-color: transparent transparent transparent #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.popup-right .popup-arrow {
|
|
||||||
left: -6px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
border-width: 6px 6px 6px 0;
|
|
||||||
border-color: transparent #333 transparent transparent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,216 +1,113 @@
|
|||||||
import type { PropType } from 'vue'
|
import type { VNode } from 'vue'
|
||||||
import { cloneVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, Teleport } from 'vue'
|
import { arrow, offset, useFloating } from '@floating-ui/vue'
|
||||||
|
import { cloneVNode, defineComponent, ref, Teleport, onMounted } from 'vue'
|
||||||
|
|
||||||
type Placement = 'top' | 'bottom' | 'left' | 'right'
|
import { getPrefixCls } from '../_utils/getPrefixCls'
|
||||||
type Trigger = 'hover' | 'click'
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'APopup',
|
name: 'APopup',
|
||||||
props: {
|
props: {
|
||||||
placement: { type: String as PropType<Placement>, default: 'top' },
|
/**
|
||||||
trigger: { type: String as PropType<Trigger>, default: 'hover' },
|
* 触发方式
|
||||||
content: { type: String, required: true },
|
* - 'hover': 鼠标悬停显示/隐藏
|
||||||
attach: { type: [String, Object] as PropType<string | HTMLElement>, default: 'body' },
|
* - 'click': 点击切换显示/隐藏
|
||||||
|
* - 'focus': 聚焦显示,失焦隐藏
|
||||||
|
*/
|
||||||
|
trigger: {
|
||||||
|
type: String as () => 'hover' | 'click' | 'focus',
|
||||||
|
default: 'hover',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
setup(props, { slots }) {
|
setup(props, { slots }) {
|
||||||
const reference = ref<HTMLElement | null>(null)
|
const prefixCls = getPrefixCls('popup')
|
||||||
const popup = ref<HTMLElement | null>(null)
|
const triggerRef = ref<HTMLElement | null>(null)
|
||||||
|
const floatingRef = ref<HTMLElement | null>(null)
|
||||||
|
const arrowRef = ref<HTMLElement | null>(null)
|
||||||
const visible = ref(false)
|
const visible = ref(false)
|
||||||
|
|
||||||
const getAttachTarget = (): HTMLElement => {
|
// 使用 useFloating 管理浮动层和箭头
|
||||||
if (typeof props.attach === 'string') {
|
const { floatingStyles, middlewareData } = useFloating(
|
||||||
const el = document.querySelector(props.attach)
|
triggerRef,
|
||||||
return (el as HTMLElement) || document.body
|
floatingRef,
|
||||||
}
|
{
|
||||||
return props.attach as HTMLElement || document.body
|
placement: 'top',
|
||||||
}
|
middleware: [offset(10), arrow({ element: arrowRef })],
|
||||||
|
},
|
||||||
const show = async () => {
|
)
|
||||||
if (visible.value)
|
|
||||||
return
|
|
||||||
visible.value = true
|
|
||||||
await nextTick()
|
|
||||||
updatePosition()
|
|
||||||
attachPopupHover()
|
|
||||||
if (props.trigger === 'click')
|
|
||||||
document.addEventListener('click', onClickOutside)
|
|
||||||
}
|
|
||||||
|
|
||||||
const hide = () => {
|
|
||||||
if (!visible.value)
|
|
||||||
return
|
|
||||||
visible.value = false
|
|
||||||
if (props.trigger === 'click')
|
|
||||||
document.removeEventListener('click', onClickOutside)
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggle = () => (visible.value ? hide() : show())
|
|
||||||
|
|
||||||
const onClickOutside = (e: MouseEvent) => {
|
|
||||||
const t = e.target as Node
|
|
||||||
if (!reference.value || !popup.value)
|
|
||||||
return
|
|
||||||
if (!reference.value.contains(t) && !popup.value.contains(t))
|
|
||||||
hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
const updatePosition = () => {
|
|
||||||
if (!reference.value || !popup.value)
|
|
||||||
return
|
|
||||||
|
|
||||||
const attachTarget = getAttachTarget()
|
|
||||||
const rect = reference.value.getBoundingClientRect()
|
|
||||||
const attachRect = attachTarget === document.body ? { left: 0, top: 0 } : attachTarget.getBoundingClientRect()
|
|
||||||
const scrollX = attachTarget === document.body ? window.scrollX : attachTarget.scrollLeft
|
|
||||||
const scrollY = attachTarget === document.body ? window.scrollY : attachTarget.scrollTop
|
|
||||||
|
|
||||||
const tip = popup.value
|
|
||||||
const gap = 8
|
|
||||||
|
|
||||||
const prevDisplay = tip.style.display
|
|
||||||
tip.style.display = 'block'
|
|
||||||
tip.style.visibility = 'hidden'
|
|
||||||
const tipRect = tip.getBoundingClientRect()
|
|
||||||
tip.style.visibility = ''
|
|
||||||
tip.style.display = visible.value ? 'block' : prevDisplay || 'none'
|
|
||||||
|
|
||||||
let left = 0
|
|
||||||
let top = 0
|
|
||||||
let finalPlacement = props.placement
|
|
||||||
|
|
||||||
const baseX = rect.left - attachRect.left + scrollX
|
|
||||||
const baseY = rect.top - attachRect.top + scrollY
|
|
||||||
|
|
||||||
// 自动翻转逻辑
|
|
||||||
if (props.placement === 'top') {
|
|
||||||
left = baseX + rect.width / 2 - tipRect.width / 2
|
|
||||||
top = baseY - tipRect.height - gap
|
|
||||||
if (top < 0) {
|
|
||||||
finalPlacement = 'bottom'
|
|
||||||
top = baseY + rect.height + gap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (props.placement === 'bottom') {
|
|
||||||
left = baseX + rect.width / 2 - tipRect.width / 2
|
|
||||||
top = baseY + rect.height + gap
|
|
||||||
const maxY = attachTarget === document.body ? window.innerHeight + scrollY : attachTarget.clientHeight + scrollY
|
|
||||||
if (top + tipRect.height > maxY) {
|
|
||||||
finalPlacement = 'top'
|
|
||||||
top = baseY - tipRect.height - gap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (props.placement === 'left') {
|
|
||||||
left = baseX - tipRect.width - gap
|
|
||||||
top = baseY + rect.height / 2 - tipRect.height / 2
|
|
||||||
if (left < 0) {
|
|
||||||
finalPlacement = 'right'
|
|
||||||
left = baseX + rect.width + gap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
left = baseX + rect.width + gap
|
|
||||||
top = baseY + rect.height / 2 - tipRect.height / 2
|
|
||||||
const maxX = attachTarget === document.body ? window.innerWidth + scrollX : attachTarget.clientWidth + scrollX
|
|
||||||
if (left + tipRect.width > maxX) {
|
|
||||||
finalPlacement = 'left'
|
|
||||||
left = baseX - tipRect.width - gap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
left = Math.max(6, left)
|
|
||||||
top = Math.max(6, top)
|
|
||||||
|
|
||||||
tip.style.left = `${left}px`
|
|
||||||
tip.style.top = `${top}px`
|
|
||||||
|
|
||||||
const arrow = tip.querySelector('.popup-arrow') as HTMLElement
|
|
||||||
if (arrow) {
|
|
||||||
const minOffset = 12
|
|
||||||
if (finalPlacement === 'top' || finalPlacement === 'bottom') {
|
|
||||||
let arrowOffset = baseX + rect.width / 2 - left
|
|
||||||
arrowOffset = Math.min(Math.max(arrowOffset, minOffset), tipRect.width - minOffset)
|
|
||||||
arrow.style.left = `${arrowOffset}px`
|
|
||||||
arrow.style.top = ''
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
let arrowOffset = baseY + rect.height / 2 - top
|
|
||||||
arrowOffset = Math.min(Math.max(arrowOffset, minOffset), tipRect.height - minOffset)
|
|
||||||
arrow.style.top = `${arrowOffset}px`
|
|
||||||
arrow.style.left = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tip.className = `popup popup-${finalPlacement}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const attachPopupHover = () => {
|
|
||||||
if (!popup.value || props.trigger !== 'hover')
|
|
||||||
return
|
|
||||||
popup.value.addEventListener('mouseenter', show)
|
|
||||||
popup.value.addEventListener('mouseleave', hide)
|
|
||||||
}
|
|
||||||
|
|
||||||
const detachPopupHover = () => {
|
|
||||||
if (!popup.value)
|
|
||||||
return
|
|
||||||
popup.value.removeEventListener('mouseenter', show)
|
|
||||||
popup.value.removeEventListener('mouseleave', hide)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 监听 triggerRef 挂载完成
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (reference.value) {
|
console.log('triggerRef 已挂载:', triggerRef.value) // 正确打印
|
||||||
if (props.trigger === 'hover') {
|
// 可以在此处调用 useFloating 的更新逻辑(如果有需要)
|
||||||
reference.value.addEventListener('mouseenter', show)
|
|
||||||
reference.value.addEventListener('mouseleave', hide)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
reference.value.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
toggle()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.addEventListener('resize', updatePosition)
|
|
||||||
window.addEventListener('scroll', updatePosition, true)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
// 显示/隐藏/切换浮动层
|
||||||
if (reference.value) {
|
const showPopup = () => (visible.value = true)
|
||||||
reference.value.removeEventListener('mouseenter', show)
|
const hidePopup = () => (visible.value = false)
|
||||||
reference.value.removeEventListener('mouseleave', hide)
|
const togglePopup = () => (visible.value = !visible.value)
|
||||||
reference.value.removeEventListener('click', toggle)
|
|
||||||
}
|
|
||||||
detachPopupHover()
|
|
||||||
document.removeEventListener('click', onClickOutside)
|
|
||||||
window.removeEventListener('resize', updatePosition)
|
|
||||||
window.removeEventListener('scroll', updatePosition, true)
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => {
|
// 绑定事件
|
||||||
const defaultSlot = slots.default?.()
|
const eventProps: Record<string, (e: Event) => void> = {}
|
||||||
if (!defaultSlot || defaultSlot.length !== 1)
|
if (props.trigger === 'hover') {
|
||||||
return null
|
eventProps.onMouseenter = () => showPopup()
|
||||||
|
eventProps.onMouseleave = () => hidePopup()
|
||||||
|
}
|
||||||
|
else if (props.trigger === 'click') {
|
||||||
|
eventProps.onClick = () => togglePopup()
|
||||||
|
}
|
||||||
|
else if (props.trigger === 'focus') {
|
||||||
|
eventProps.onFocus = () => showPopup()
|
||||||
|
eventProps.onBlur = () => hidePopup()
|
||||||
|
}
|
||||||
|
|
||||||
// 克隆触发元素并绑定 ref 和事件
|
// 获取 reference 插槽或默认插槽
|
||||||
const triggerEl = cloneVNode(defaultSlot[0], { ref: reference })
|
const slotContent = slots.reference?.() || slots.default?.() || []
|
||||||
|
let triggerSlot: VNode | null = null
|
||||||
|
|
||||||
return (
|
// 单元素直接绑定事件,多元素套 span
|
||||||
<>
|
if (slotContent.length === 1) {
|
||||||
{triggerEl}
|
triggerSlot = cloneVNode(slotContent[0], {
|
||||||
<Teleport to={getAttachTarget()}>
|
ref: triggerRef,
|
||||||
<div
|
...eventProps,
|
||||||
ref={popup}
|
})
|
||||||
class={['popup', `popup-${props.placement}`]}
|
}
|
||||||
style={{ position: 'absolute', display: visible.value ? 'block' : 'none' }}
|
else if (slotContent.length > 1) {
|
||||||
aria-hidden={!visible.value}
|
triggerSlot = (
|
||||||
role="tooltip"
|
<span ref={triggerRef} style="display: inline-flex;">
|
||||||
>
|
{slotContent.map(vnode => cloneVNode(vnode, { ...eventProps }))}
|
||||||
<div class="popup-content">{props.content}</div>
|
</span>
|
||||||
<div class="popup-arrow" />
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<>
|
||||||
|
{/* 原位渲染触发元素 */}
|
||||||
|
{triggerSlot}
|
||||||
|
|
||||||
|
{/* 浮动层挂载到 body */}
|
||||||
|
<Teleport to="body">
|
||||||
|
{visible.value && (
|
||||||
|
<div ref={floatingRef} class={prefixCls} style={floatingStyles}>
|
||||||
|
Popup 内容
|
||||||
|
<div
|
||||||
|
class={`${prefixCls}-arrow`}
|
||||||
|
ref={arrowRef}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left:
|
||||||
|
middlewareData.value.arrow?.x != null
|
||||||
|
? `${middlewareData.value.arrow.x}px`
|
||||||
|
: undefined,
|
||||||
|
top:
|
||||||
|
middlewareData.value.arrow?.y != null
|
||||||
|
? `${middlewareData.value.arrow.y}px`
|
||||||
|
: undefined,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Teleport>
|
||||||
|
</>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
+3
@@ -69,6 +69,9 @@ importers:
|
|||||||
|
|
||||||
packages/ao-design:
|
packages/ao-design:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
'@floating-ui/vue':
|
||||||
|
specifier: ^1.1.9
|
||||||
|
version: 1.1.9(vue@3.5.19(typescript@5.8.3))
|
||||||
'@iconify/vue':
|
'@iconify/vue':
|
||||||
specifier: 5.0.0
|
specifier: 5.0.0
|
||||||
version: 5.0.0(vue@3.5.19(typescript@5.8.3))
|
version: 5.0.0(vue@3.5.19(typescript@5.8.3))
|
||||||
|
|||||||
@@ -1,112 +1,22 @@
|
|||||||
<!-- <script setup>
|
<script lang="ts">
|
||||||
import { arrow, offset, useFloating } from '@floating-ui/vue'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const reference = ref(null) // 按钮
|
|
||||||
const floating = ref(null) // tooltip
|
|
||||||
const floatingArrow = ref(null)
|
|
||||||
|
|
||||||
// 使用 useFloating 计算浮动位置
|
|
||||||
const { floatingStyles, middlewareData } = useFloating(reference, floating, {
|
|
||||||
middleware: [offset(8), arrow({ element: floatingArrow })],
|
|
||||||
placement: 'top',
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div style="padding: 100px;">
|
<div class="page-center">
|
||||||
<APopup />
|
<APopup trigger="click">
|
||||||
<button
|
<AButton style="margin-right: 12px;">
|
||||||
ref="reference" style="width: 200px;"
|
测试
|
||||||
>
|
</AButton>
|
||||||
Button
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div ref="floating" class="floating" :style="floatingStyles">
|
|
||||||
Tooltip
|
|
||||||
<div
|
|
||||||
ref="floatingArrow"
|
|
||||||
class="arrow"
|
|
||||||
:style="{
|
|
||||||
position: 'absolute',
|
|
||||||
left:
|
|
||||||
middlewareData.arrow?.x != null
|
|
||||||
? `${middlewareData.arrow.x}px`
|
|
||||||
: '',
|
|
||||||
top:
|
|
||||||
middlewareData.arrow?.y != null
|
|
||||||
? `${middlewareData.arrow.y}px`
|
|
||||||
: '',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<APopup content="提示内容" placement="left" trigger="hover">
|
|
||||||
<button>悬停或聚焦</button>
|
|
||||||
</APopup>
|
</APopup>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* tooltip 样式 */
|
.page-center {
|
||||||
.floating {
|
display: flex;
|
||||||
padding: 6px 12px;
|
justify-content: center; /* 水平居中 */
|
||||||
background-color: #000;
|
align-items: center; /* 垂直居中 */
|
||||||
color: #fff;
|
height: 800px; /* 高度撑满整个视口 */
|
||||||
border-radius: 2px;
|
|
||||||
font-size: 12px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
/* 箭头 */
|
</style>
|
||||||
.arrow {
|
|
||||||
position: absolute;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: #000;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
</style> -->
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const containerRef = ref<HTMLElement | null>(null)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div style="padding: 20px; display: flex; flex-direction: column; gap: 20px;">
|
|
||||||
<!-- 1. placement: 控制弹出方向 -->
|
|
||||||
<APopup placement="top" trigger="hover" content="上方 Tooltip">
|
|
||||||
<button>Hover Top</button>
|
|
||||||
</APopup>
|
|
||||||
|
|
||||||
<APopup placement="bottom" trigger="hover" content="下方 Tooltip">
|
|
||||||
<button>Hover Bottom</button>
|
|
||||||
</APopup>
|
|
||||||
|
|
||||||
<APopup placement="left" trigger="hover" content="左侧 Tooltip">
|
|
||||||
<button>Hover Left</button>
|
|
||||||
</APopup>
|
|
||||||
|
|
||||||
<APopup placement="right" trigger="hover" content="右侧 Tooltip">
|
|
||||||
<button>Hover Right</button>
|
|
||||||
</APopup>
|
|
||||||
|
|
||||||
<!-- 2. trigger: hover 或 click -->
|
|
||||||
<APopup placement="top" trigger="click" content="点击触发 Tooltip">
|
|
||||||
<button>Click Me</button>
|
|
||||||
</APopup>
|
|
||||||
|
|
||||||
<!-- 3. content: 弹出内容 -->
|
|
||||||
<APopup placement="bottom" trigger="hover" content="这是自定义内容">
|
|
||||||
<button>Hover Custom Content</button>
|
|
||||||
</APopup>
|
|
||||||
|
|
||||||
<!-- 4. attach: 弹出挂载容器 -->
|
|
||||||
<!-- 使用 ref 挂载 -->
|
|
||||||
<div ref="containerRef" style="position: relative; margin-top: 50px; height: 100px; border: 1px solid #ccc; padding: 10px;">
|
|
||||||
<APopup placement="right" trigger="hover" content="挂载到 ref 容器" :attach="containerRef">
|
|
||||||
<button>Hover Ref Container</button>
|
|
||||||
</APopup>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
|
import naive from 'naive-ui'
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import './style.scss'
|
import './style.scss'
|
||||||
|
|
||||||
|
createApp(App).use(naive).mount('#app')
|
||||||
createApp(App).mount('#app')
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
target/
|
|
||||||
!.mvn/wrapper/maven-wrapper.jar
|
|
||||||
!**/src/main/**/target/
|
|
||||||
!**/src/test/**/target/
|
|
||||||
|
|
||||||
### IntelliJ IDEA ###
|
|
||||||
.idea/modules.xml
|
|
||||||
.idea/jarRepositories.xml
|
|
||||||
.idea/compiler.xml
|
|
||||||
.idea/libraries/
|
|
||||||
*.iws
|
|
||||||
*.iml
|
|
||||||
*.ipr
|
|
||||||
|
|
||||||
### Eclipse ###
|
|
||||||
.apt_generated
|
|
||||||
.classpath
|
|
||||||
.factorypath
|
|
||||||
.project
|
|
||||||
.settings
|
|
||||||
.springBeans
|
|
||||||
.sts4-cache
|
|
||||||
|
|
||||||
### NetBeans ###
|
|
||||||
/nbproject/private/
|
|
||||||
/nbbuild/
|
|
||||||
/dist/
|
|
||||||
/nbdist/
|
|
||||||
/.nb-gradle/
|
|
||||||
build/
|
|
||||||
!**/src/main/**/build/
|
|
||||||
!**/src/test/**/build/
|
|
||||||
|
|
||||||
### VS Code ###
|
|
||||||
.vscode/
|
|
||||||
|
|
||||||
### Mac OS ###
|
|
||||||
.DS_Store
|
|
||||||
Generated
-10
@@ -1,10 +0,0 @@
|
|||||||
# Default ignored files
|
|
||||||
/shelf/
|
|
||||||
/workspace.xml
|
|
||||||
# Editor-based HTTP Client requests
|
|
||||||
/httpRequests/
|
|
||||||
# Environment-dependent path to Maven home directory
|
|
||||||
/mavenHomeManager.xml
|
|
||||||
# Datasource local storage ignored files
|
|
||||||
/dataSources/
|
|
||||||
/dataSources.local.xml
|
|
||||||
-7
@@ -1,7 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="Encoding">
|
|
||||||
<file url="file://$PROJECT_DIR$/src/main/java" charset="UTF-8" />
|
|
||||||
<file url="file://$PROJECT_DIR$/src/main/resources" charset="UTF-8" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
Generated
-14
@@ -1,14 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="ExternalStorageConfigurationManager" enabled="true" />
|
|
||||||
<component name="MavenProjectsManager">
|
|
||||||
<option name="originalFiles">
|
|
||||||
<list>
|
|
||||||
<option value="$PROJECT_DIR$/pom.xml" />
|
|
||||||
</list>
|
|
||||||
</option>
|
|
||||||
</component>
|
|
||||||
<component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
|
|
||||||
<output url="file://$PROJECT_DIR$/out" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
Generated
-6
@@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="VcsDirectoryMappings">
|
|
||||||
<mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
|
||||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
|
||||||
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
|
||||||
<modelVersion>4.0.0</modelVersion>
|
|
||||||
|
|
||||||
<groupId>com.email</groupId>
|
|
||||||
<artifactId>Email-Netty</artifactId>
|
|
||||||
<version>1.0-SNAPSHOT</version>
|
|
||||||
|
|
||||||
<properties>
|
|
||||||
<maven.compiler.source>8</maven.compiler.source>
|
|
||||||
<maven.compiler.target>8</maven.compiler.target>
|
|
||||||
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
|
|
||||||
</properties>
|
|
||||||
|
|
||||||
<dependencies>
|
|
||||||
<dependency>
|
|
||||||
<groupId>io.netty</groupId>
|
|
||||||
<artifactId>netty-all</artifactId>
|
|
||||||
<version>4.1.106.Final</version>
|
|
||||||
</dependency>
|
|
||||||
</dependencies>
|
|
||||||
|
|
||||||
</project>
|
|
||||||
@@ -1,144 +0,0 @@
|
|||||||
package com.email;
|
|
||||||
|
|
||||||
import io.netty.channel.ChannelHandlerContext;
|
|
||||||
import io.netty.channel.SimpleChannelInboundHandler;
|
|
||||||
|
|
||||||
import java.io.FileOutputStream;
|
|
||||||
import java.io.OutputStream;
|
|
||||||
import java.util.Base64;
|
|
||||||
import java.util.regex.Matcher;
|
|
||||||
import java.util.regex.Pattern;
|
|
||||||
|
|
||||||
public class ImapClientHandler extends SimpleChannelInboundHandler<String> {
|
|
||||||
|
|
||||||
private final String username;
|
|
||||||
private final String password;
|
|
||||||
|
|
||||||
private enum State { LOGIN, SELECT, FETCH, DONE }
|
|
||||||
private State state = State.LOGIN;
|
|
||||||
|
|
||||||
private int tagCounter = 1;
|
|
||||||
private StringBuilder headerBuffer = new StringBuilder();
|
|
||||||
private StringBuilder bodyBuffer = new StringBuilder();
|
|
||||||
private boolean inHeader = true;
|
|
||||||
private String boundary = null;
|
|
||||||
|
|
||||||
private boolean inAttachment = false;
|
|
||||||
private String currentFilename = null;
|
|
||||||
|
|
||||||
public ImapClientHandler(String username, String password) {
|
|
||||||
this.username = username;
|
|
||||||
this.password = password;
|
|
||||||
}
|
|
||||||
|
|
||||||
private String nextTag() {
|
|
||||||
return "a" + (tagCounter++);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Override
|
|
||||||
public void channelActive(ChannelHandlerContext ctx) {
|
|
||||||
System.out.println("Connected to IMAP server...");
|
|
||||||
}
|
|
||||||
|
|
||||||
@Override
|
|
||||||
protected void channelRead0(ChannelHandlerContext ctx, String line) {
|
|
||||||
line = line.trim();
|
|
||||||
if (line.isEmpty()) return;
|
|
||||||
|
|
||||||
System.out.println("S: " + line);
|
|
||||||
|
|
||||||
switch (state) {
|
|
||||||
case LOGIN:
|
|
||||||
if (line.startsWith("* OK")) {
|
|
||||||
ctx.writeAndFlush(nextTag() + " LOGIN " + username + " " + password + "\r\n");
|
|
||||||
} else if (line.contains("OK LOGIN")) {
|
|
||||||
state = State.SELECT;
|
|
||||||
ctx.writeAndFlush(nextTag() + " SELECT INBOX\r\n");
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case SELECT:
|
|
||||||
if (line.contains("OK [READ-WRITE]") || line.contains("OK [READ-ONLY]")) {
|
|
||||||
state = State.FETCH;
|
|
||||||
ctx.writeAndFlush(nextTag() + " FETCH 1:* (BODY.PEEK[])\r\n");
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case FETCH:
|
|
||||||
if (line.contains("OK FETCH completed")) {
|
|
||||||
state = State.DONE;
|
|
||||||
System.out.println("All emails fetched!");
|
|
||||||
ctx.close();
|
|
||||||
} else if (line.startsWith("*") && line.contains("FETCH")) {
|
|
||||||
// 新邮件开始
|
|
||||||
headerBuffer.setLength(0);
|
|
||||||
bodyBuffer.setLength(0);
|
|
||||||
inHeader = true;
|
|
||||||
inAttachment = false;
|
|
||||||
currentFilename = null;
|
|
||||||
boundary = null;
|
|
||||||
} else {
|
|
||||||
if (inHeader) {
|
|
||||||
headerBuffer.append(line).append("\r\n");
|
|
||||||
if (line.isEmpty()) { // header结束
|
|
||||||
inHeader = false;
|
|
||||||
|
|
||||||
// 解析邮件标题
|
|
||||||
Matcher subjectMatcher = Pattern.compile("(?i)^Subject: (.+)$", Pattern.MULTILINE).matcher(headerBuffer);
|
|
||||||
if (subjectMatcher.find()) {
|
|
||||||
String subject = subjectMatcher.group(1).trim();
|
|
||||||
System.out.println("Email Subject: " + subject);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析 boundary
|
|
||||||
Matcher m = Pattern.compile("boundary=\"([^\"]+)\"").matcher(headerBuffer);
|
|
||||||
if (m.find()) boundary = m.group(1);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// body部分
|
|
||||||
if (boundary != null && line.contains(boundary)) {
|
|
||||||
// attachment结束
|
|
||||||
if (inAttachment && currentFilename != null) {
|
|
||||||
saveAttachment(bodyBuffer.toString(), currentFilename);
|
|
||||||
System.out.println("Attachment saved: " + currentFilename);
|
|
||||||
bodyBuffer.setLength(0);
|
|
||||||
inAttachment = false;
|
|
||||||
currentFilename = null;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 检测附件开始
|
|
||||||
Matcher m = Pattern.compile("Content-Disposition: attachment; filename=\"([^\"]+)\"").matcher(line);
|
|
||||||
if (m.find()) {
|
|
||||||
currentFilename = m.group(1);
|
|
||||||
inAttachment = true;
|
|
||||||
bodyBuffer.setLength(0);
|
|
||||||
} else if (inAttachment) {
|
|
||||||
bodyBuffer.append(line);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case DONE:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private void saveAttachment(String base64Data, String filename) {
|
|
||||||
try {
|
|
||||||
byte[] data = Base64.getDecoder().decode(base64Data);
|
|
||||||
try (OutputStream os = new FileOutputStream(filename)) {
|
|
||||||
os.write(data);
|
|
||||||
}
|
|
||||||
} catch (Exception e) {
|
|
||||||
e.printStackTrace();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Override
|
|
||||||
public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) {
|
|
||||||
cause.printStackTrace();
|
|
||||||
ctx.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
package com.email;
|
|
||||||
|
|
||||||
import io.netty.bootstrap.Bootstrap;
|
|
||||||
import io.netty.channel.*;
|
|
||||||
import io.netty.channel.nio.NioEventLoopGroup;
|
|
||||||
import io.netty.channel.socket.SocketChannel;
|
|
||||||
import io.netty.channel.socket.nio.NioSocketChannel;
|
|
||||||
import io.netty.handler.codec.LineBasedFrameDecoder;
|
|
||||||
import io.netty.handler.codec.string.StringDecoder;
|
|
||||||
import io.netty.handler.ssl.SslContext;
|
|
||||||
import io.netty.handler.ssl.SslContextBuilder;
|
|
||||||
|
|
||||||
public class NettyImapClient {
|
|
||||||
|
|
||||||
private final String host;
|
|
||||||
private final int port;
|
|
||||||
private final String username;
|
|
||||||
private final String password;
|
|
||||||
|
|
||||||
public NettyImapClient(String host, int port, String username, String password) {
|
|
||||||
this.host = host;
|
|
||||||
this.port = port;
|
|
||||||
this.username = username;
|
|
||||||
this.password = password;
|
|
||||||
}
|
|
||||||
|
|
||||||
public void start() throws Exception {
|
|
||||||
EventLoopGroup group = new NioEventLoopGroup();
|
|
||||||
SslContext sslCtx = SslContextBuilder.forClient().build();
|
|
||||||
|
|
||||||
try {
|
|
||||||
Bootstrap b = new Bootstrap();
|
|
||||||
b.group(group)
|
|
||||||
.channel(NioSocketChannel.class)
|
|
||||||
.handler(new ChannelInitializer<SocketChannel>() {
|
|
||||||
@Override
|
|
||||||
protected void initChannel(SocketChannel ch) {
|
|
||||||
ChannelPipeline p = ch.pipeline();
|
|
||||||
p.addLast(sslCtx.newHandler(ch.alloc(), host, port));
|
|
||||||
p.addLast(new LineBasedFrameDecoder(8192));
|
|
||||||
p.addLast(new StringDecoder());
|
|
||||||
p.addLast(new ImapClientHandler(username, password));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ChannelFuture f = b.connect(host, port).sync();
|
|
||||||
f.channel().closeFuture().sync();
|
|
||||||
} finally {
|
|
||||||
group.shutdownGracefully();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public static void main(String[] args) throws Exception {
|
|
||||||
String host = "imap.qq.com"; // IMAP服务器
|
|
||||||
int port = 993; // SSL端口
|
|
||||||
String user = "717406575@qq.com";
|
|
||||||
String pass = "dhqesrwzgblrbcac"; // 授权码
|
|
||||||
|
|
||||||
new NettyImapClient(host, port, user, pass).start();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -98,7 +98,7 @@ nvm install 18.16.0
|
|||||||
(3)使用指定版本或切换到指定版本
|
(3)使用指定版本或切换到指定版本
|
||||||
|
|
||||||
```
|
```
|
||||||
nvm ues 18.16.0
|
nvm use 18.16.0
|
||||||
```
|
```
|
||||||
|
|
||||||

|

|
||||||
|
|||||||
Reference in new issue
Block a user