RunForge-Frontend/src/layout/default-layout.vue

<template>
  <a-layout class="layout">
    <a-layout-header class="layout-navbar">
      <Navbar />
    </a-layout-header>
    <a-layout>
      <a-layout-sider class="layout-sider">
        <Menu class="menu-wrapper" />
      </a-layout-sider>
      <a-layout-content class="layout-content">
        <PageLayout style="margin-bottom: 30px;" />
        <Footer />
      </a-layout-content>
    </a-layout>

    <!-- <a-avatar class="aiButton" @click="chat = !chat">
      <img alt="avatar" src="@/assets/img/ai.png" />
    </a-avatar>

    <AIChat :visible="chat"/> -->
  </a-layout>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, onUnmounted } from 'vue'
import { eventBus } from '@/utils/eventBus'

import PageLayout from './page-layout.vue'
import Menu from '@/components/Menu/index.vue'
import Navbar from '@/components/Navbar/index.vue'
import Footer from '@/components/Footer/index.vue'
// import AIChat from '@/components/AIChat/index.vue'

const chat = ref(false)

// 按钮拖动
let isDragging = false
let offsetX = 0
let offsetY = 0
let button = null

function handleMouseDown(e) {
  isDragging = true
  const rect = button.getBoundingClientRect()
  offsetX = e.clientX - rect.left
  offsetY = e.clientY - rect.top

  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
}

function handleMouseMove(e) {
  if (!isDragging) return
  const x = e.clientX - offsetX
  const y = e.clientY - offsetY

  button.style.left = x + 'px'
  button.style.top = y + 'px'
  button.style.right = 'auto'
  button.style.bottom = 'auto'
}

function handleMouseUp() {
  isDragging = false
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
}

onMounted(() => {
  button = document.querySelector('.aiButton')
  if (button) {
    button.addEventListener('mousedown', handleMouseDown)
  }
  eventBus.on('closeAI', () => { chat.value = false })
})

onBeforeUnmount(() => {
  if (button) {
    button.removeEventListener('mousedown', handleMouseDown)
  }
})

onUnmounted(() => {
  eventBus.off('closeAI', () => { chat.value = false })
})

</script>

<style scoped lang="less">
@nav-size-height: 60px;

.layout {
  min-width: 1280px;
  width: 100%;
  height: 100%;
}

.layout-navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: @nav-size-height;
}

.layout-sider {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 100%;
  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

  &::after {
    position: absolute;
    top: 0;
    right: -1px;
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--color-border);
    content: '';
  }
}

.menu-wrapper {
  user-select: none;
  margin-top: 60px;
  overflow: auto;
  overflow-x: hidden;

  :deep(.arco-menu) {
    ::-webkit-scrollbar {
      width: 12px;
      height: 4px;
    }

    ::-webkit-scrollbar-thumb {
      border: 4px solid transparent;
      background-clip: padding-box;
      border-radius: 7px;
      background-color: var(--color-text-4);
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-text-3);
    }
  }
}

.layout-content {
  position: absolute;
  top: @nav-size-height;
  left: 200px;
  width: calc(100% - 200px);
  min-height: calc(100% - @nav-size-height);
  overflow-y: auto;
  background-color: var(--color-fill-2);
  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}

.aiButton {
  position: fixed;
  bottom: 100px;
  right: 60px;
  z-index: 200;
  width: 55px;
  height: 55px;
  background-color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.15);
  }
}
</style>