From 71fec2e1dddc11195fd257e74600a286474e235a Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Thu, 11 Jun 2026 13:55:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(vimp):=20=E6=96=B0=E5=A2=9EScreenPanel?=
 =?UTF-8?q?=E5=92=8Cscreen-store=E6=94=AF=E6=8C=81=E5=A4=9A=E5=B1=8F?=
 =?UTF-8?q?=E5=A2=9E=E5=88=A0=E4=B8=8E=E9=87=8D=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新建 stores/screen.ts（id用 crypto.randomUUID 唯一生成、addScreen/removeScreen/renameScreen actions）
- 新建 screen-panel.vue 替换 canvas-area.vue（NTab + NTabs type=card + addable/closable）
- 添加屏幕增删的二次确认弹窗（window.$dialog.warning/info）
- 双击Tab弹出重命名输入框（沿用删除dialog的交互风格）
- 调整 onClose 入参命名为 id，语义与 store 一致
- 包裹 Tab 区域加 user-select: none，防止双击/拖动时文字被选中
- 附带：config-panel.vue 同步 Prettier 格式化（无逻辑改动）
---
 src/pages/vimp/components/canvas-area.vue  | 64 --------------
 src/pages/vimp/components/config-panel.vue | 46 +++++-----
 src/pages/vimp/components/screen-panel.vue | 97 ++++++++++++++++++++++
 src/pages/vimp/stores/index.ts             |  1 +
 src/pages/vimp/stores/screen.ts            | 58 +++++++++++++
 src/pages/vimp/vimp-page.vue               |  4 +-
 6 files changed, 177 insertions(+), 93 deletions(-)
 delete mode 100644 src/pages/vimp/components/canvas-area.vue
 create mode 100644 src/pages/vimp/components/screen-panel.vue
 create mode 100644 src/pages/vimp/stores/screen.ts

diff --git a/src/pages/vimp/components/canvas-area.vue b/src/pages/vimp/components/canvas-area.vue
deleted file mode 100644
index 2d103a4..0000000
--- a/src/pages/vimp/components/canvas-area.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { NTabs, NTabPane } from 'naive-ui'
-import { ref } from 'vue'
-
-const screens = [
-  { id: 'screen-1', name: '屏幕 1' },
-  { id: 'screen-2', name: '屏幕 2' },
-  { id: 'screen-3', name: '屏幕 3' },
-  { id: 'screen-4', name: '屏幕 4' },
-]
-
-const activeScreen = ref(screens[0]?.id ?? '')
-
-const onDragover = (e: DragEvent) => {
-  e.preventDefault()
-  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
-}
-
-const onDrop = (e: DragEvent) => {
-  e.preventDefault()
-  const type = e.dataTransfer?.getData('type')
-  if (!type) return
-  if (type === 'camera' || type === 'alarm') {
-    const code = e.dataTransfer.getData('code')
-    const name = e.dataTransfer.getData('name')
-    window.$message?.info(`播放：${JSON.stringify({ code, name })}`)
-  }
-}
-</script>
-
-<template>
-  <div :style="{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }">
-    <div :style="{ flexShrink: 0, padding: '0 8px' }">
-      <NTabs
-        v-model:value="activeScreen"
-        type="line"
-        size="small"
-        animated
-      >
-        <NTabPane
-          v-for="s in screens"
-          :key="s.id"
-          :name="s.id"
-          :tab="s.name"
-        />
-      </NTabs>
-    </div>
-    <div
-      :style="{
-        flex: 1,
-        minHeight: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: '#f5f5f5',
-        backgroundImage: 'linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%)',
-        backgroundSize: '16px 16px',
-        backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0',
-      }"
-      @dragover="onDragover"
-      @drop="onDrop"
-    />
-  </div>
-</template>
diff --git a/src/pages/vimp/components/config-panel.vue b/src/pages/vimp/components/config-panel.vue
index 1e97451..183f069 100644
--- a/src/pages/vimp/components/config-panel.vue
+++ b/src/pages/vimp/components/config-panel.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { NButton, NIcon, NTabPane, NTabs, NText } from 'naive-ui'
-import { ChevronRightIcon, DatabaseIcon, LayoutGridIcon, SlidersHorizontalIcon, ZapIcon, type Component } from 'lucide-vue-next'
-import { ref } from 'vue'
-import { useConfigPanelStore } from '../stores'
-import { storeToRefs } from 'pinia'
+import { NButton, NIcon, NTabPane, NTabs, NText } from 'naive-ui';
+import { ChevronRightIcon, DatabaseIcon, LayoutGridIcon, SlidersHorizontalIcon, ZapIcon } from 'lucide-vue-next';
+import { ref, type Component } from 'vue';
+import { useConfigPanelStore } from '../stores';
+import { storeToRefs } from 'pinia';
 
 interface ControlTabPane {
-  name: string
-  tab: string
-  icon: Component
+  name: string;
+  tab: string;
+  icon: Component;
 }
 
 const tabs: ControlTabPane[] = [
@@ -16,22 +16,22 @@ const tabs: ControlTabPane[] = [
   { name: 'config', tab: '属性', icon: SlidersHorizontalIcon },
   { name: 'data', tab: '数据', icon: DatabaseIcon },
   { name: 'interaction', tab: '事件', icon: ZapIcon },
-]
+];
 
-const PANEL_WIDTH_EXPANDED = '320px'
-const PANEL_WIDTH_COLLAPSED = '72px'
-const TAB_WIDTH = '72px'
+const PANEL_WIDTH_EXPANDED = '320px';
+const PANEL_WIDTH_COLLAPSED = '72px';
+const TAB_WIDTH = '72px';
 
-const activeTab = ref(tabs[0]?.name ?? '')
+const activeTab = ref(tabs[0]?.name ?? '');
 
-const configPanelStore = useConfigPanelStore()
-const { collapsed } = storeToRefs(configPanelStore)
+const configPanelStore = useConfigPanelStore();
+const { collapsed } = storeToRefs(configPanelStore);
 
 const expandConfigPanel = () => {
   if (collapsed.value) {
-    configPanelStore.toggleCollapsed()
+    configPanelStore.toggleCollapsed();
   }
-}
+};
 </script>
 
 <template>
@@ -107,22 +107,14 @@ const expandConfigPanel = () => {
             '--n-tab-gap-vertical': '0',
           }"
         >
-          <NTabPane
-            v-for="t in tabs"
-            :key="t.name"
-            :name="t.name"
-            :tab="t.tab"
-            :tab-props="{ onClick: () => expandConfigPanel() }"
-          >
+          <NTabPane v-for="t in tabs" :key="t.name" :name="t.name" :tab="t.tab" :tab-props="{ onClick: () => expandConfigPanel() }">
             <template #tab>
               <div :style="{ width: '48px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
                 <NIcon :size="18" :component="t.icon" />
                 <div :style="{ fontSize: '12px' }">{{ t.tab }}</div>
               </div>
             </template>
-            <div :style="{ padding: '20px', textAlign: 'center', fontSize: '12px' }">
-              {{ t.tab }}面板（占位）
-            </div>
+            <div :style="{ padding: '20px', textAlign: 'center', fontSize: '12px' }">{{ t.tab }}面板（占位）</div>
           </NTabPane>
         </NTabs>
       </div>
diff --git a/src/pages/vimp/components/screen-panel.vue b/src/pages/vimp/components/screen-panel.vue
new file mode 100644
index 0000000..ba0208b
--- /dev/null
+++ b/src/pages/vimp/components/screen-panel.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { NInput, NTabs, NTab } from 'naive-ui';
+import { h, ref } from 'vue';
+import { useScreenStore } from '../stores';
+import { storeToRefs } from 'pinia';
+
+const screenStore = useScreenStore();
+const { screens, activeScreenId } = storeToRefs(screenStore);
+
+const onAdd = () => {
+  screenStore.addScreen();
+};
+
+const onClose = (id: string) => {
+  const screen = screens.value.find(s => s.id === id)
+  if (!screen) return
+  window.$dialog.warning({
+    title: '删除屏幕',
+    content: `确认删除屏幕"${screen.name}"吗？此操作无法撤销。`,
+    positiveText: '删除',
+    negativeText: '取消',
+    onPositiveClick: () => {
+      screenStore.removeScreen(id)
+    },
+  })
+};
+
+const renameValue = ref('');
+
+const onTabDblclick = (id: string) => {
+  const screen = screens.value.find(s => s.id === id)
+  if (!screen) return
+  renameValue.value = screen.name
+  window.$dialog.info({
+    title: '重命名屏幕',
+    positiveText: '确认',
+    negativeText: '取消',
+    content: () =>
+      h(NInput, {
+        value: renameValue.value,
+        'onUpdate:value': (v: string) => {
+          renameValue.value = v
+        },
+        placeholder: '请输入屏幕名称',
+        autofocus: true,
+        onKeyup: (e: KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            handleRenameConfirm(id)
+          }
+        },
+      }),
+    onPositiveClick: () => {
+      handleRenameConfirm(id)
+    },
+  })
+};
+
+const handleRenameConfirm = (id: string) => {
+  screenStore.renameScreen(id, renameValue.value)
+};
+
+const onDragover = (e: DragEvent) => {
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+}
+
+const onDrop = (e: DragEvent) => {
+  e.preventDefault()
+  // TODO: 放置占位组件（等 grid-layout-plus 接入后实现）
+}
+</script>
+
+<template>
+  <div :style="{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }">
+    <div :style="{ flexShrink: 0, padding: '0 8px', userSelect: 'none' }">
+      <NTabs v-model:value="activeScreenId" type="card" size="small" animated :addable="true" @add="onAdd" @close="onClose">
+        <NTab v-for="s in screens" :key="s.id" :name="s.id" :tab="s.name" closable @dblclick="onTabDblclick(s.id)" />
+      </NTabs>
+    </div>
+    <div
+      :style="{
+        flex: 1,
+        minHeight: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#f5f5f5',
+        backgroundImage:
+          'linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%)',
+        backgroundSize: '16px 16px',
+        backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0',
+      }"
+      @dragover="onDragover"
+      @drop="onDrop"
+    />
+  </div>
+</template>
diff --git a/src/pages/vimp/stores/index.ts b/src/pages/vimp/stores/index.ts
index e0e1af0..d86e9ac 100644
--- a/src/pages/vimp/stores/index.ts
+++ b/src/pages/vimp/stores/index.ts
@@ -2,3 +2,4 @@ export * from './alarm';
 export * from './camera';
 export * from './config-panel';
 export * from './resource-panel';
+export * from './screen';
diff --git a/src/pages/vimp/stores/screen.ts b/src/pages/vimp/stores/screen.ts
new file mode 100644
index 0000000..306f0f1
--- /dev/null
+++ b/src/pages/vimp/stores/screen.ts
@@ -0,0 +1,58 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface Screen {
+  id: string
+  name: string
+}
+
+let counter = 4
+
+const genId = (): string => `screen-${crypto.randomUUID()}`
+
+const defaultName = (n: number): string => `屏幕 ${n}`
+
+export const useScreenStore = defineStore('vimp-screen', () => {
+  const screens = ref<Screen[]>([
+    { id: 'screen-1', name: '屏幕 1' },
+    { id: 'screen-2', name: '屏幕 2' },
+    { id: 'screen-3', name: '屏幕 3' },
+    { id: 'screen-4', name: '屏幕 4' },
+  ])
+
+  const activeScreenId = ref<string>(screens.value[0]?.id ?? '')
+
+  const addScreen = () => {
+    const id = genId()
+    screens.value.push({ id, name: defaultName(screens.value.length + 1) })
+    activeScreenId.value = id
+  }
+
+  const removeScreen = (id: string) => {
+    if (screens.value.length <= 1) return
+    const index = screens.value.findIndex(s => s.id === id)
+    if (index === -1) return
+    screens.value.splice(index, 1)
+    if (activeScreenId.value === id) {
+      const fallback = screens.value[index] ?? screens.value[index - 1]
+      if (fallback) activeScreenId.value = fallback.id
+    }
+  }
+
+  const renameScreen = (id: string, name: string) => {
+    const target = screens.value.find(s => s.id === id)
+    if (!target) return
+    const trimmed = name.trim()
+    if (trimmed.length === 0) return
+    if (trimmed === target.name) return
+    target.name = trimmed
+  }
+
+  return {
+    screens,
+    activeScreenId,
+    addScreen,
+    removeScreen,
+    renameScreen,
+  }
+})
diff --git a/src/pages/vimp/vimp-page.vue b/src/pages/vimp/vimp-page.vue
index e5a6e2c..580955f 100644
--- a/src/pages/vimp/vimp-page.vue
+++ b/src/pages/vimp/vimp-page.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import ResourcePanel from './components/resource-panel.vue'
 import ConfigPanel from './components/config-panel.vue'
-import CanvasArea from './components/canvas-area.vue'
+import ScreenPanel from './components/screen-panel.vue'
 </script>
 
 <template>
   <div style="height: 100%; display: flex; overflow: hidden">
     <ResourcePanel />
-    <CanvasArea />
+    <ScreenPanel />
     <ConfigPanel />
   </div>
 </template>