1

draggable-panels/src/App.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { usePanelStore } from './stores/panelStore'
+import Header from './components/Header.vue'
+import Footer from './components/Footer.vue'
+import MainLayout from './components/MainLayout.vue'
+
+const panelStore = usePanelStore()
+
+onMounted(() => {
+  panelStore.loadConfig()
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <Header />
+    <MainLayout />
+    <Footer />
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+</style>

draggable-panels/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

draggable-panels/src/components/Footer.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const currentTime = ref('')
+let timer: number | null = null
+
+const updateTime = () => {
+  const now = new Date()
+  currentTime.value = now.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  })
+}
+
+onMounted(() => {
+  updateTime()
+  timer = window.setInterval(updateTime, 1000)
+})
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
+</script>
+
+<template>
+  <footer class="app-footer">
+    <div class="footer-left"></div>
+    <div class="footer-right">
+      <span class="time">{{ currentTime }}</span>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.app-footer {
+  height: 24px;
+  background: #007acc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  flex-shrink: 0;
+}
+
+.footer-left {
+  flex: 1;
+}
+
+.footer-right {
+  display: flex;
+  align-items: center;
+}
+
+.time {
+  color: white;
+  font-size: 12px;
+}
+</style>

draggable-panels/src/components/Header.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { usePanelStore } from '../stores/panelStore'
+
+const panelStore = usePanelStore()
+
+const handleAddWindow = () => {
+  panelStore.addNewWindow()
+}
+</script>
+
+<template>
+  <header class="app-header">
+    <div class="header-left">
+      <span class="app-title">拖拽面板编辑器</span>
+    </div>
+    <div class="header-center">
+      <button class="add-tab-btn" @click="handleAddWindow">
+        <span class="icon">+</span>
+        <span>新增子窗口</span>
+      </button>
+    </div>
+    <div class="header-right"></div>
+  </header>
+</template>
+
+<style scoped>
+.app-header {
+  height: 48px;
+  background: #1e1e1e;
+  border-bottom: 1px solid #3c3c3c;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+
+.header-left {
+  flex: 1;
+}
+
+.app-title {
+  color: #cccccc;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.header-right {
+  flex: 1;
+}
+
+.add-tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px;
+  background: #0e639c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.2s;
+}
+
+.add-tab-btn:hover {
+  background: #1177bb;
+}
+
+.add-tab-btn .icon {
+  font-size: 16px;
+  font-weight: bold;
+}
+</style>

draggable-panels/src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

draggable-panels/src/components/MainLayout.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { usePanelStore } from '../stores/panelStore'
+import Panel from './Panel.vue'
+
+const panelStore = usePanelStore()
+
+const leftPanel = computed(() => panelStore.layout.leftPanel)
+const centerPanel = computed(() => panelStore.layout.centerPanel)
+const rightPanel = computed(() => panelStore.layout.rightPanel)
+</script>
+
+<template>
+  <div class="main-layout">
+    <div class="panel-container left-panel">
+      <div class="panel-header">左侧面板</div>
+      <Panel :panel="leftPanel" />
+    </div>
+    
+    <div class="panel-container center-panel">
+      <div class="panel-header">中间面板</div>
+      <Panel :panel="centerPanel" />
+    </div>
+    
+    <div class="panel-container right-panel">
+      <div class="panel-header">右侧面板</div>
+      <Panel :panel="rightPanel" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main-layout {
+  display: flex;
+  flex: 1;
+  gap: 4px;
+  padding: 4px;
+  background: #181818;
+  overflow: hidden;
+}
+
+.panel-container {
+  display: flex;
+  flex-direction: column;
+  background: #252526;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.left-panel {
+  flex: 0 0 250px;
+  min-width: 200px;
+}
+
+.center-panel {
+  flex: 1;
+  min-width: 300px;
+}
+
+.right-panel {
+  flex: 0 0 250px;
+  min-width: 200px;
+}
+
+.panel-header {
+  padding: 8px 12px;
+  background: #333333;
+  color: #888888;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid #3c3c3c;
+}
+</style>

draggable-panels/src/components/Panel.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import draggable from 'vuedraggable'
+import { usePanelStore } from '../stores/panelStore'
+import type { Panel, TabItem } from '../types'
+
+const props = defineProps<{
+  panel: Panel
+}>()
+
+const panelStore = usePanelStore()
+
+// 使用computed来获取tabs的响应式引用
+const tabs = computed({
+  get: () => props.panel.tabs,
+  set: (value: TabItem[]) => {
+    props.panel.tabs = value
+  }
+})
+
+const activeTabId = computed(() => props.panel.activeTabId)
+
+const activeTab = computed(() => 
+  props.panel.tabs.find(t => t.id === activeTabId.value)
+)
+
+const handleTabClick = (tabId: string) => {
+  panelStore.setActiveTab(props.panel.id, tabId)
+}
+
+const handleCloseTab = (tabId: string, event: Event) => {
+  event.stopPropagation()
+  panelStore.closeTab(props.panel.id, tabId)
+}
+
+// 拖拽结束后更新状态
+const onDragEnd = () => {
+  // vuedraggable会自动更新数组，Pinia的watch会自动触发保存
+}
+</script>
+
+<template>
+  <div class="panel">
+    <div class="panel-tabs">
+      <draggable
+        v-model="tabs"
+        :group="{ name: 'tabs', pull: true, put: true }"
+        item-key="id"
+        class="tabs-container"
+        :animation="200"
+        ghost-class="tab-ghost"
+        chosen-class="tab-chosen"
+        drag-class="tab-drag"
+        @end="onDragEnd"
+      >
+        <template #item="{ element }">
+          <div 
+            class="tab-item" 
+            :class="{ active: element.id === activeTabId }"
+            @click="handleTabClick(element.id)"
+          >
+            <span class="tab-title">{{ element.title }}</span>
+            <button 
+              class="tab-close" 
+              @click="handleCloseTab(element.id, $event)"
+            >
+              ×
+            </button>
+          </div>
+        </template>
+      </draggable>
+    </div>
+    <div class="panel-content">
+      <div v-if="activeTab" class="content-wrapper">
+        <p>{{ activeTab.content }}</p>
+        <p class="tab-info">Tab ID: {{ activeTab.id }}</p>
+      </div>
+      <div v-else class="empty-panel">
+        <span>暂无内容</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #1e1e1e;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.panel-tabs {
+  background: #252526;
+  border-bottom: 1px solid #3c3c3c;
+  min-height: 35px;
+}
+
+.tabs-container {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 35px;
+  align-items: flex-end;
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #2d2d2d;
+  color: #969696;
+  border-right: 1px solid #3c3c3c;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s;
+  font-size: 13px;
+}
+
+.tab-item:hover {
+  background: #323232;
+  color: #cccccc;
+}
+
+.tab-item.active {
+  background: #1e1e1e;
+  color: #ffffff;
+  border-bottom: 2px solid #007acc;
+}
+
+.tab-title {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tab-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: transparent;
+  border: none;
+  color: #969696;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 3px;
+  line-height: 1;
+}
+
+.tab-close:hover {
+  background: #4a4a4a;
+  color: #ffffff;
+}
+
+.panel-content {
+  flex: 1;
+  padding: 16px;
+  overflow: auto;
+}
+
+.content-wrapper {
+  color: #cccccc;
+}
+
+.tab-info {
+  margin-top: 12px;
+  font-size: 12px;
+  color: #666666;
+}
+
+.empty-panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #666666;
+}
+
+/* 拖拽样式 */
+.tab-ghost {
+  opacity: 0.5;
+  background: #0e639c !important;
+}
+
+.tab-chosen {
+  background: #0e639c !important;
+  color: white !important;
+}
+
+.tab-drag {
+  opacity: 0.9;
+  transform: rotate(2deg);
+}
+</style>

draggable-panels/src/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import './style.css'
+import App from './App.vue'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.mount('#app')

draggable-panels/src/stores/panelStore.ts

@@ -0,0 +1,180 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+import type { LayoutConfig, TabItem, Panel } from '../types'
+
+// 生成唯一ID
+const generateId = () => Math.random().toString(36).substring(2, 9)
+
+// 默认配置
+const getDefaultLayout = (): LayoutConfig => ({
+  leftPanel: {
+    id: 'left',
+    tabs: [
+      { id: generateId(), title: '资源管理器', content: '左侧面板内容1' }
+    ],
+    activeTabId: null
+  },
+  centerPanel: {
+    id: 'center',
+    tabs: [
+      { id: generateId(), title: '欢迎页', content: '中间面板内容1' }
+    ],
+    activeTabId: null
+  },
+  rightPanel: {
+    id: 'right',
+    tabs: [
+      { id: generateId(), title: '大纲', content: '右侧面板内容1' }
+    ],
+    activeTabId: null
+  }
+})
+
+// 初始化每个面板的activeTabId
+const initActiveTabIds = (layout: LayoutConfig): LayoutConfig => {
+  const panels: (keyof LayoutConfig)[] = ['leftPanel', 'centerPanel', 'rightPanel']
+  panels.forEach(key => {
+    const panel = layout[key]
+    if (panel.tabs.length > 0 && !panel.activeTabId) {
+      panel.activeTabId = panel.tabs[0].id
+    }
+  })
+  return layout
+}
+
+export const usePanelStore = defineStore('panel', () => {
+  // 布局配置
+  const layout = ref<LayoutConfig>(initActiveTabIds(getDefaultLayout()))
+  
+  // 是否已加载配置
+  const isLoaded = ref(false)
+
+  // 加载配置
+  const loadConfig = async () => {
+    try {
+      const response = await fetch('/api/config')
+      if (response.ok) {
+        const config = await response.json()
+        if (config && config.layout) {
+          layout.value = initActiveTabIds(config.layout)
+        }
+      }
+    } catch (error) {
+      console.log('使用默认配置')
+    }
+    isLoaded.value = true
+  }
+
+  // 保存配置
+  const saveConfig = async () => {
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          layout: layout.value,
+          lastUpdated: new Date().toISOString()
+        })
+      })
+    } catch (error) {
+      console.error('保存配置失败:', error)
+    }
+  }
+
+  // 监听变化并自动保存
+  watch(layout, () => {
+    if (isLoaded.value) {
+      saveConfig()
+    }
+  }, { deep: true })
+
+  // 获取面板
+  const getPanel = (panelId: string): Panel | undefined => {
+    const panels = [layout.value.leftPanel, layout.value.centerPanel, layout.value.rightPanel]
+    return panels.find(p => p.id === panelId)
+  }
+
+  // 添加新Tab
+  const addTab = (panelId: string, tab?: Partial<TabItem>) => {
+    const panel = getPanel(panelId)
+    if (panel) {
+      const newTab: TabItem = {
+        id: generateId(),
+        title: tab?.title || `新窗口 ${panel.tabs.length + 1}`,
+        content: tab?.content || '新窗口内容'
+      }
+      panel.tabs.push(newTab)
+      panel.activeTabId = newTab.id
+    }
+  }
+
+  // 关闭Tab
+  const closeTab = (panelId: string, tabId: string) => {
+    const panel = getPanel(panelId)
+    if (panel) {
+      const index = panel.tabs.findIndex(t => t.id === tabId)
+      if (index > -1) {
+        panel.tabs.splice(index, 1)
+        // 更新激活的Tab
+        if (panel.activeTabId === tabId) {
+          panel.activeTabId = panel.tabs.length > 0 
+            ? panel.tabs[Math.max(0, index - 1)].id 
+            : null
+        }
+      }
+    }
+  }
+
+  // 设置激活的Tab
+  const setActiveTab = (panelId: string, tabId: string) => {
+    const panel = getPanel(panelId)
+    if (panel) {
+      panel.activeTabId = tabId
+    }
+  }
+
+  // 移动Tab到另一个面板
+  const moveTab = (fromPanelId: string, toPanelId: string, tabId: string, toIndex?: number) => {
+    const fromPanel = getPanel(fromPanelId)
+    const toPanel = getPanel(toPanelId)
+    
+    if (fromPanel && toPanel) {
+      const tabIndex = fromPanel.tabs.findIndex(t => t.id === tabId)
+      if (tabIndex > -1) {
+        const [tab] = fromPanel.tabs.splice(tabIndex, 1)
+        
+        if (toIndex !== undefined) {
+          toPanel.tabs.splice(toIndex, 0, tab)
+        } else {
+          toPanel.tabs.push(tab)
+        }
+        
+        // 更新激活状态
+        toPanel.activeTabId = tab.id
+        
+        if (fromPanel.activeTabId === tabId && fromPanel.tabs.length > 0) {
+          fromPanel.activeTabId = fromPanel.tabs[0].id
+        } else if (fromPanel.tabs.length === 0) {
+          fromPanel.activeTabId = null
+        }
+      }
+    }
+  }
+
+  // 在默认面板添加新窗口
+  const addNewWindow = () => {
+    addTab('center')
+  }
+
+  return {
+    layout,
+    isLoaded,
+    loadConfig,
+    saveConfig,
+    addTab,
+    closeTab,
+    setActiveTab,
+    moveTab,
+    addNewWindow
+  }
+})

draggable-panels/src/style.css

@@ -0,0 +1,31 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: dark;
+  color: #cccccc;
+  background-color: #1e1e1e;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}

draggable-panels/src/types/index.ts

@@ -0,0 +1,26 @@
+// Tab项接口
+export interface TabItem {
+  id: string
+  title: string
+  content?: string
+}
+
+// 面板接口
+export interface Panel {
+  id: string
+  tabs: TabItem[]
+  activeTabId: string | null
+}
+
+// 布局配置接口
+export interface LayoutConfig {
+  leftPanel: Panel
+  centerPanel: Panel
+  rightPanel: Panel
+}
+
+// 全局配置接口
+export interface AppConfig {
+  layout: LayoutConfig
+  lastUpdated: string
+}