From 7c5c723ac375b113e31b3ba86be53cc16e6ff2a0 Mon Sep 17 00:00:00 2001
From: kylin <260987762@qq.com>
Date: Mon, 25 Nov 2024 18:18:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dtabs=20=E5=92=8C=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E5=A4=9A=E4=BD=99=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/cn/other/components/DemoProTabs2.vue     | 27 ---------
 docs/cn/other/tabs.md                         |  2 -
 .../src/components/ProBreadcrumb.vue          |  2 +-
 .../src/components/ProCheckbox.vue            |  2 +-
 .../k-naiveui-pro/src/components/ProTabs.vue  | 58 +++++++++----------
 5 files changed, 31 insertions(+), 60 deletions(-)
 delete mode 100644 docs/cn/other/components/DemoProTabs2.vue

diff --git a/docs/cn/other/components/DemoProTabs2.vue b/docs/cn/other/components/DemoProTabs2.vue
deleted file mode 100644
index de63cd5..0000000
--- a/docs/cn/other/components/DemoProTabs2.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<docs lang="md">
----
-title: 自定义 `storageKey`
----
-</docs>
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { ProTabData } from 'k-naiveui-pro'
-import {createDiscreteApi} from "naive-ui";
-
-const { message} = createDiscreteApi(
-    ['message'],
-)
-
-const tabs = ref<ProTabData[]>([
-  { icon: 'mdi:home', title: '首页', path: '/home' },
-  { icon: 'mdi:account', title: '我的账户', path: '/account' },
-  { icon: 'mdi:settings', title: '设置', path: '/settings' }
-])
-
-function handleTabSelect(path: string) {
-  message.info(path)
-}
-</script>
-<template>
-  <ProTabs v-model="tabs" storageKey="my-custom-tabs" @select="handleTabSelect" />
-</template>
\ No newline at end of file
diff --git a/docs/cn/other/tabs.md b/docs/cn/other/tabs.md
index c421cf5..b890ced 100644
--- a/docs/cn/other/tabs.md
+++ b/docs/cn/other/tabs.md
@@ -4,14 +4,12 @@
 
 <demo path="./components/DemoProTabs" />
 
-<demo path="./components/DemoProTabs2" />
 
 ## **属性 (Props)**
 
 | 参数             | 类型             | 默认值         | 描述                             |
 |----------------|----------------|-------------|--------------------------------|
 | **v-model**    | `ProTabData[]` | `[]`        | 绑定的标签页数据数组，使用 `v-model` 进行双向绑定 |
-| **storageKey** | `string`       | `'proTabs'` | 本地存储的键名，用于保存标签页数据和选中状态         |
 
 ## **ProTabData 配置**
 
diff --git a/packages/k-naiveui-pro/src/components/ProBreadcrumb.vue b/packages/k-naiveui-pro/src/components/ProBreadcrumb.vue
index fd3d7e9..a8e6c07 100644
--- a/packages/k-naiveui-pro/src/components/ProBreadcrumb.vue
+++ b/packages/k-naiveui-pro/src/components/ProBreadcrumb.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineProps, toRefs, defineEmits } from 'vue';
+import { computed, toRefs } from 'vue';
 import { Icon } from '@iconify/vue';
 import clsx from 'clsx';
 
diff --git a/packages/k-naiveui-pro/src/components/ProCheckbox.vue b/packages/k-naiveui-pro/src/components/ProCheckbox.vue
index a223260..ed4cad7 100644
--- a/packages/k-naiveui-pro/src/components/ProCheckbox.vue
+++ b/packages/k-naiveui-pro/src/components/ProCheckbox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, toRefs } from 'vue'
+import { toRefs } from 'vue'
 
 export interface ProCheckboxOption {
   label: string
diff --git a/packages/k-naiveui-pro/src/components/ProTabs.vue b/packages/k-naiveui-pro/src/components/ProTabs.vue
index 47bb5f3..435fe0d 100644
--- a/packages/k-naiveui-pro/src/components/ProTabs.vue
+++ b/packages/k-naiveui-pro/src/components/ProTabs.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import {toRefs} from 'vue';
+import {ref} from 'vue';
 import { Icon } from '@iconify/vue';
-import {useLocalStorage} from "@vueuse/core";
 
 export interface ProTabData {
-  icon?: string;
-  title?: string;
-  path?: string;
+  icon?: string; // 图标的名称
+  title?: string; // 选项卡的标题
+  path?: string; // 路由路径
 }
 
 export interface ProTabsProps {
@@ -14,47 +13,43 @@ export interface ProTabsProps {
 }
 
 defineOptions({ name: 'ProTabs', inheritAttrs: false });
-const modelValue = defineModel({default: []})
-const props = withDefaults(defineProps<ProTabsProps>(), {
-  storageKey: 'proTabs',
-});
-const emit = defineEmits<{
-  (e: 'select', path: string): void
-}>()
-const {storageKey} = toRefs(props)
-const tabHistory = useLocalStorage<ProTabData[]>(storageKey.value, modelValue.value || []);
-const selected = useLocalStorage<number>(`${storageKey.value}-selected`, 0);
 
+const modelValue = defineModel<ProTabData[]>({ default: [] });
+const emit = defineEmits<{
+  (e: 'select', path: string): void; // 选项卡切换事件
+}>();
+// 当前选中的选项卡索引
+const selected = ref(0);
 
 
+// 删除选项卡（第一个选项卡不可删除）
 function handleRemove(index: number) {
-  if (index >= 0 && index < modelValue.value.length) {
-    modelValue.value.splice(index, 1);
-    tabHistory.value = [...modelValue.value];
-    selected.value = selected.value >= tabHistory.value.length ? tabHistory.value.length - 1 : selected.value;
+  if (index === 0) return; // 阻止删除第一个选项卡
+  modelValue.value.splice(index, 1); // 移除选项卡
+  if (selected.value >= modelValue.value.length) {
+    selected.value = modelValue.value.length - 1; // 更新选中状态
   }
-
 }
 
+// 横向滚动逻辑
 const horizontalScroll = (event: WheelEvent) => {
   const { deltaY } = event;
   const proTabs = document.querySelector('.pro-tabs');
   if (proTabs) {
-    proTabs.scrollLeft += deltaY;
+    proTabs.scrollLeft += deltaY; // 横向滚动
   }
-}
+};
 
+// 选项卡切换逻辑
 function handleSelect(index: number) {
-  selected.value = index
-  emit('select', tabHistory.value[index].path || '')
+  selected.value = index; // 更新当前选中的索引
+  emit('select', modelValue.value[index].path || ''); // 触发选中事件
 }
-
-
 </script>
 
 <template>
   <n-el
-      class="pro-tabs flex space-x-1 w-full h-[40px] px-[20px] overflow-x-auto overflow-x-hidden  text-ellipsis whitespace-nowrap items-center scroll-smooth"
+      class="pro-tabs flex space-x-1 w-full h-[40px] px-[20px] overflow-x-auto overflow-x-hidden text-ellipsis whitespace-nowrap items-center scroll-smooth"
       @wheel="horizontalScroll"
   >
     <n-el
@@ -62,12 +57,17 @@ function handleSelect(index: number) {
         :key="index"
         class="flex flex-row cursor-pointer items-center pl-2 pr-2 space-x-2 border dark:border-gray-800 rounded hover:border-[var(--primary-color-hover)] hover:text-[var(--primary-color-hover)]"
         :class="{ 'border-[var(--primary-color-pressed)] text-[var(--primary-color-pressed)]': selected === index }"
-        @click="()=> handleSelect(index)"
+        @click="() => handleSelect(index)"
         @wheel="horizontalScroll"
     >
       <Icon v-if="tab.icon" :icon="tab.icon" />
       <span>{{ tab.title }}</span>
-      <Icon icon="carbon:close" @click.stop="handleRemove(index)" />
+      <!-- 删除按钮（第一个选项卡禁用删除） -->
+      <Icon
+          v-if="index !== 0"
+      icon="carbon:close"
+      @click.stop="handleRemove(index)"
+      />
     </n-el>
   </n-el>
 </template>