Merge pull request #2 from daylenjeez/feature-0.2.0-PartialRefactoring

# Vue3-Tabor v0.2.0

## ⚠️ BREAKING CHANGES

1. API Method Change: `useRouterTab(router)` replaces `useTabor()`. The new method no longer requires parameters

2. CSS Class Prefix Change: Class name prefix changed from `rt-` to `tabor-`. Custom styles need to be updated

## 🔄 Migration Guide
1. Replace all `useRouterTab()` calls with `useTabor()`
2. Update any custom CSS styles using the `rt-` prefix to use the `tabor-` prefix

Author: daylenjeez

README.en.md

@@ -94,7 +94,7 @@ app.mount("#app");
 When installing the plugin, you can pass the following configuration options:
 
 ```js
-app.use(RouterTab, {
+app.use(Tabor, {
   router: router,       // Required: Vue Router instance
   maxCache: 10,         // Optional: Maximum cache size, default is 10
 });
@@ -117,6 +117,18 @@ The `<vue-tabor>` component supports the following properties:
 | tabPrefix | Component | - | Tab prefix component |
 | language | String | 'zh' | UI language, options: 'zh', 'en' |
 
+### Internationalization
+
+vue3-tabor supports both Chinese and English languages, which can be configured as follows:
+
+```html
+<!-- Set to English -->
+<vue-tabor language="en" />
+
+<!-- Set to Chinese -->
+<vue-tabor language="zh" />
+```
+
 ### Style Variables
 
 vue3-tabor provides CSS variables that can be customized through the style prop or global CSS. Below are the available style variables:
@@ -222,12 +234,12 @@ For deeper customization needs, you can use the following methods:
 1. **Add custom styles using provided class names**:
    ```css
    /* Custom tab styles */
-   .rt-tabs .tab {
+   .tabor-tab {
      /* Custom styles */
    }
 
    /* Custom active tab styles */
-   .rt-tabs .tab.active {
+   .tabor-tab-active {
      /* Custom styles */
    }
    ```
@@ -239,18 +251,18 @@ For deeper customization needs, you can use the following methods:
 
 ### Instance Methods
 
-You can access the following methods through the injected `tabStore`:
+You can access the following methods through the `useTabor` hook:
 
 ```js
 // In your component
-import { inject } from 'vue';
+import { useTabor } from 'vue3-tabor'
 
 export default {
   setup() {
-    const tabStore = inject('tabStore');
+    const tabor = useTabor();
 
-    // Use tabStore methods
-    return { tabStore };
+    // Use tabor methods
+    return { tabor };
   }
 }
 ```
@@ -321,33 +333,6 @@ tabStore.open({
 });
 ```
 
-### Internationalization
-
-vue3-tabor supports both Chinese and English languages, which can be configured as follows:
-
-```html
-<!-- Set to English -->
-<vue-tabor language="en" />
-
-<!-- Set to Chinese -->
-<vue-tabor language="zh" />
-
-<!-- Hide language switch button -->
-<vue-tabor :showLanguageSwitch="false" />
-```
-
-You can also dynamically change the language using the API:
-
-```js
-import { setLanguage } from 'vue3-tabor/utils/i18n';
-
-// Switch to English
-setLanguage('en');
-
-// Switch to Chinese
-setLanguage('zh');
-```
-
 ## 🔧 Tech Stack
 
 - **💻 Vue 3**: Developed with the latest Vue 3.x version

README.md

@@ -94,7 +94,7 @@ app.mount("#app");
 在安装插件时，可以传入以下配置选项：
 
 ```js
-app.use(RouterTab, {
+app.use(Tabor, {
   router: router,       // 必需：Vue Router 实例
   maxCache: 10,         // 可选：最大缓存数量，默认为10
 });
@@ -129,18 +129,6 @@ vue3-tabor 支持中文和英文两种语言，可以通过以下方式进行配
 <vue-tabor language="zh" />
 ```
 
-你还可以通过 API 动态切换语言：
-
-```js
-import { setLanguage } from 'vue3-tabor/utils/i18n';
-
-// 切换为英文
-setLanguage('en');
-
-// 切换为中文
-setLanguage('zh');
-```
-
 ### 样式变量
 
 vue3-tabor 提供了以下 CSS 变量，可以通过 style 属性或全局 CSS 自定义主题样式：
@@ -246,12 +234,12 @@ vue3-tabor 提供了以下 CSS 变量，可以通过 style 属性或全局 CSS 
 1. **使用提供的类名添加自定义样式**：
    ```css
    /* 自定义标签样式 */
-   .rt-tabs .tab {
+   .tabor-tab {
      /* 自定义样式 */
    }
 
    /* 自定义激活标签样式 */
-   .rt-tabs .tab.active {
+   .tabor-tab-active {
      /* 自定义样式 */
    }
    ```
@@ -267,14 +255,14 @@ vue3-tabor 提供了以下 CSS 变量，可以通过 style 属性或全局 CSS 
 
 ```js
 // 在组件中使用
-import { inject } from 'vue';
+import { useTabor } from 'vue3-tabor'
 
 export default {
   setup() {
-    const tabStore = inject('tabStore');
+    const tabor = useTabor();
 
-    // 使用tabStore方法
-    return { tabStore };
+    // 使用tabor方法
+    return { tabor };
   }
 }
 ```

examples/package-lock.json

@@ -17,7 +17,6 @@
     "@vue/tsconfig": "^0.7.0",
     "typescript": "~5.7.2",
     "vite": "^6.2.0",
-    "vue-tsc": "^2.2.4",
-    "vue3-tabor": "^0.1.12"
+    "vue-tsc": "^2.2.4"
   }
 }

examples/package.json

@@ -4,7 +4,7 @@ import App from './App.vue'
 import router from './router/index'
 import Tabor from 'vue3-tabor'
 
-import 'vue3-tabor/dist/assets/index.css'
+import '../../dist/assets/index.css'
 
 const app = createApp(App)
 app.use(router)

examples/src/main.ts

@@ -18,20 +18,20 @@ const router = createRouter({
       path: '/path',
       name: 'key_is_path',
       component: () => import('../views/Path.vue'),
-      meta:{
-        tabConfig:{
+      meta: {
+        tabConfig: {
           key: 'path'
         } satisfies TabConfig
       }
     },
     {
       path: '/full-path',
       name: 'full_path',
-      component: () => import('../views/fullPath.vue'),
-      meta:{
-        tabConfig:{
+      component: () => import('../views/FullPath.vue'),
+      meta: {
+        tabConfig: {
           key: 'fullPath',
-          name: (route:RouteLocationNormalized) =>  route.query.name as string
+          name: (route: RouteLocationNormalized) => route.query.name as string
         } satisfies TabConfig
       }
     }

examples/src/router/index.ts

@@ -1,26 +1,19 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { useTabStore } from 'vue3-tabor'
+import { useTabor } from 'vue3-tabor'
+const tabor = useTabor()
 
-const router = useRouter()
-const tabor = useTabStore(router)
 
 const goToPath = () => {
   tabor.open({
     path: '/path',
-    query: {
-      name: 'tom'
-    },
-  })
+  });
 }
 
 const goToFullPath = (name: string) => {
-  router.push({
+  tabor.open({
     path: '/full-path',
-    query: {
-      name
-    },
-  })
+    query: { name }
+  });
 }
 </script>
 
@@ -47,7 +40,7 @@ h1 {
   margin-bottom: 20px;
 }
 
-button{
+button {
   margin-right: 10px;
 }
 </style>

examples/src/views/Home.vue

@@ -1,6 +1,6 @@
 {
   "name": "vue3-tabor",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "description": "Vue 3 routing tabs with keepAlive support, browser-like tab navigation for Vue applications",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package.json

@@ -1,27 +1,24 @@
-import type { RouterTabStore } from "@tabor/store";
+import { TABOR_STORE_KEY, type TaborStore } from "@tabor/store";
 import {
   computed,
   defineComponent,
   inject,
 } from "vue";
 
 export default defineComponent({
-  name: "RtIframe",
+  name: "Iframe",
 
   setup() {
-    const tabStore = inject<RouterTabStore>("tabStore");
+    const taborStore = inject<TaborStore>(TABOR_STORE_KEY);
 
-    const iframes = computed(() => tabStore?.iframeTabs.value);
-    //TODO: 需要考虑iframe刷新
+    const iframes = computed(() => taborStore?.iframeTabs.value);
 
     return () => (
-      <div class="rt-iframe-container">
+      <div class="tabor-iframe-container">
         {iframes.value?.map((iframe) => {
-          const activeTabId = tabStore?.state.activeTab?.id;
-          // 条件 1：是否需要保留组件 (活跃 或 keepAlive)
+          const activeTabId = taborStore?.state.activeTab?.id;
           const shouldKeep = iframe.id === activeTabId || iframe.keepAlive;
 
-          // 条件 2：是否当前活跃需要显示
           const shouldShow = iframe.id === activeTabId;
 
           return shouldKeep ? (

src/components/page/iframe/index.tsx

@@ -1,3 +1,3 @@
-.rt-pages {
+.tabor-pages {
   padding: var(--page-padding);
 }