App_Stuido 按钮功能实现圆按钮

//==================================================//==========BY_Ming.Li//==========杭州.萧山//==========2026.8.29//==================================================const Gen_Circle_Btn_VO1 = async () => {  // 1. 移除旧按钮（避免重复）  const oldBtn = document.querySelector('.fab-circle-btn');  if (oldBtn) oldBtn.remove();  // 2. 创建按钮元素  const btn = document.createElement('button');  btn.className = 'fab-circle-btn';  btn.setAttribute('aria-label', '圆形按钮');  // 3. 应用样式（完全居中，使用 calc 避免 transform 冲突）  Object.assign(btn.style, {    position: 'fixed',    top: 'calc(50% - 28px)',    // 垂直居中（56px 高度的一半）    left: 'calc(50% - 28px)',   // 水平居中（56px 宽度的一半）    zIndex: '1000',    width: '56px',    height: '56px',    borderRadius: '50%',    border: 'none',    background: 'linear-gradient(135deg, #FF6B35, #FF8A5C)',    color: '#fff',    fontSize: '32px',    fontWeight: '700',    boxShadow: '0 8px 24px rgba(255, 107, 53, 0.5)',    cursor: 'pointer',    display: 'flex',    alignItems: 'center',    justifyContent: 'center',    transition: 'transform 0.2s ease, box-shadow 0.2s ease',    outline: 'none',    userSelect: 'none',  });  btn.textContent = '+';  // 4. 交互反馈（悬停、点击）  // 悬停放大+阴影加深  btn.addEventListener('mouseenter', () => {    btn.style.transform = 'scale(1.05)';    btn.style.boxShadow = '0 12px 32px rgba(255, 107, 53, 0.6)';  });  btn.addEventListener('mouseleave', () => {    btn.style.transform = 'scale(1)';    btn.style.boxShadow = '0 8px 24px rgba(255, 107, 53, 0.5)';  });  // 点击反馈（按下缩小，弹起复原） + 业务逻辑  btn.addEventListener('mousedown', () => {    btn.style.transform = 'scale(0.92)';    btn.style.boxShadow = '0 4px 12px rgba(255, 107, 53, 0.3)';  });  btn.addEventListener('mouseup', () => {    btn.style.transform = 'scale(1)';    btn.style.boxShadow = '0 8px 24px rgba(255, 107, 53, 0.5)';  });  // 移动端触摸支持  btn.addEventListener('touchstart', () => {    btn.style.transform = 'scale(0.92)';  });  btn.addEventListener('touchend', () => {    btn.style.transform = 'scale(1)';  });  // 点击主逻辑（异步示例）  btn.addEventListener('click', async (e) => {    e.stopPropagation();    console.log('圆形按钮被点击');    // 模拟异步任务（如请求数据）    await new Promise((resolve) => setTimeout(resolve, 1000));    alert('按钮点击完成！');  });  // 5. 添加到页面  document.body.appendChild(btn);  console.log('圆形按钮已显示在屏幕中央');  // 6. 返回按钮元素（便于外部控制）  return btn;};export default Gen_Circle_Btn_VO1;