新增FloatPanel组件

components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     EditorFloatMenu: typeof import('./src/components/editor/EditorFloatMenu.vue')['default']
     EditorStatus: typeof import('./src/components/editor/EditorStatus.vue')['default']
     EditorTools: typeof import('./src/components/editor/EditorTools.vue')['default']
+    FloatPanel: typeof import('./src/components/FloatPanel.vue')['default']
     InputText: typeof import('primevue/inputtext')['default']
     ListSelect: typeof import('./src/components/ListSelect.vue')['default']
     PageTabs: typeof import('./src/components/PageTabs.vue')['default']

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.0.7",
+    "@vueuse/core": "^11.1.0",
     "debounce": "^2.1.1",
     "dexie": "^4.0.8",
     "md5": "^2.3.0",

src/components/FloatPanel.vue

@@ -0,0 +1,35 @@
+<template>
+  <div ref="mainRef" class="FloatPanel" :style="style">
+    <div ref="headerRef" class="FloatPanelHeader">
+      <span>{{ title }}</span>
+      <button title="关闭面板">
+        <i class="i i-close"></i>
+      </button>
+    </div>
+    <div class="FloatPanelBody">123</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useDraggable } from "@vueuse/core";
+
+defineOptions({
+  name: "FloatPanel",
+});
+
+const props = defineProps<{
+  title: string;
+}>();
+
+const mainRef = ref<HTMLElement>();
+const headerRef = ref<HTMLElement>();
+
+const { style } = useDraggable(mainRef, {
+  handle: headerRef,
+  initialValue: {
+    x: 200,
+    y: 200,
+  },
+});
+</script>

src/styles/Default.css

@@ -143,30 +143,6 @@ label {
   font-size: 0.8rem;
 }
 
-.FloatPanel {
-  position: fixed;
-  background-color: var(--p-content-background);
-  border: 1px solid var(--p-content-border-color);
-  border-radius: var(--p-border-radius-xs);
-  z-index: 6;
-
-  .FloatPanelHeader {
-    font-weight: bold;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0px 0.75rem;
-    border-bottom: 1px solid var(--p-content-border-color);
-  }
-
-  .FloatPanelBody {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 0.5rem 0.75rem;
-  }
-}
-
 /* Custom components style */
 .Tree {
   user-select: none;
@@ -342,6 +318,33 @@ label {
   }
 }
 
+.FloatPanel {
+  position: fixed;
+  background-color: var(--p-content-background);
+  border: 1px solid var(--p-content-border-color);
+  border-radius: var(--p-border-radius-xs);
+  z-index: 6;
+  min-width: 200px;
+
+  .FloatPanelHeader {
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 0.75rem;
+    border-bottom: 1px solid var(--p-content-border-color);
+    cursor: move;
+    user-select: none;
+  }
+
+  .FloatPanelBody {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0.5rem 0.75rem;
+  }
+}
+
 /* PrimeVue override style */
 .p-dialog {
   min-width: 500px;