vue-clean-tabs 1.0.0 → 1.1.0

package/README.md

@@ -1,7 +1,14 @@
-# Vue Simple Tabs
+# Vue Clean Tabs
 
 🚀 一个轻量级、高度可配置的 Vue 3 简洁标签页组件，专注于简洁设计和灵活定制。
 
+## 🆕 v1.1.0 更新
+
+- ✨ **优化样式结构** - 简化CSS类名，提升可维护性
+- 🎯 **改进激活指示器** - 使用CSS伪元素实现更流畅的底部线条
+- 📱 **增强移动端适配** - 优化移动端样式和响应式体验
+- 🚀 **性能优化** - 减少内联样式，提升渲染性能
+
 ## ✨ 特性
 
 - 🪶 **轻量级设计** - 极简的 API 和最小的包体积
@@ -16,7 +23,7 @@
 ## 📦 安装
 
 ```bash
-npm install vue-simple-tabs
+npm install vue-clean-tabs
 ```
 
 ## 🚀 快速开始
@@ -33,16 +40,16 @@ npm install vue-simple-tabs
 </template>
 
 <script setup>
-import { ConfigurableSimpleTabs } from 'vue-simple-tabs';
+import { ConfigurableSimpleTabs } from "vue-clean-tabs";
 
 const tabs = [
-  { id: 'home', name: '首页' },
-  { id: 'about', name: '关于' },
-  { id: 'contact', name: '联系' },
+  { id: "home", name: "首页" },
+  { id: "about", name: "关于" },
+  { id: "contact", name: "联系" },
 ];
 
 const handleTabChange = (tabId, tab) => {
-  console.log('切换到:', tab.name);
+  console.log("切换到:", tab.name);
 };
 </script>
 ```
@@ -56,15 +63,15 @@ const handleTabChange = (tabId, tab) => {
 
 <script setup>
 const iconTabs = [
-  { 
-    id: 'home', 
-    name: '首页',
-    icon: '<svg>...</svg>' // SVG 图标
+  {
+    id: "home",
+    name: "首页",
+    icon: "<svg>...</svg>", // SVG 图标
   },
-  { 
-    id: 'user', 
-    name: '用户',
-    icon: '<svg>...</svg>'
+  {
+    id: "user",
+    name: "用户",
+    icon: "<svg>...</svg>",
   },
 ];
 </script>
@@ -74,18 +81,14 @@ const iconTabs = [
 
 ```vue
 <template>
-  <ConfigurableSimpleTabs
-    :tabs="tabs"
-    :theme="customTheme"
-    size="large"
-  />
+  <ConfigurableSimpleTabs :tabs="tabs" :theme="customTheme" size="large" />
 </template>
 
 <script setup>
 const customTheme = {
-  activeTextColor: '#3b82f6',
-  indicatorColor: '#3b82f6',
-  backgroundColor: '#f8fafc',
+  activeTextColor: "#3b82f6",
+  indicatorColor: "#3b82f6",
+  backgroundColor: "#f8fafc",
 };
 </script>
 ```
@@ -102,19 +105,19 @@ const customTheme = {
 
 #### 可选属性
 
-| 属性            | 类型                        | 默认值       | 描述             |
-| --------------- | --------------------------- | ------------ | ---------------- |
-| `defaultActive` | `string`                    | 第一个标签   | 默认激活的标签ID |
-| `size`          | `'small' \| 'medium' \| 'large'` | `'medium'`   | 组件尺寸         |
-| `theme`         | `Partial<SimpleTabsTheme>`  | `defaultTheme` | 主题配置         |
-| `style`         | `Partial<StyleConfig>`      | `默认样式`   | 样式配置         |
-| `animation`     | `Partial<AnimationConfig>`  | `默认动画`   | 动画配置         |
-| `responsive`    | `Partial<ResponsiveConfig>` | `默认响应式` | 响应式配置       |
-| `className`     | `string`                    | `undefined`  | 自定义类名       |
-| `customStyle`   | `Record<string, any>`       | `undefined`  | 自定义样式       |
-| `block`         | `boolean`                   | `false`      | 块级显示         |
-| `centered`      | `boolean`                   | `false`      | 居中对齐         |
-| `scrollable`    | `boolean`                   | `false`      | 可滚动           |
+| 属性            | 类型                             | 默认值         | 描述             |
+| --------------- | -------------------------------- | -------------- | ---------------- |
+| `defaultActive` | `string`                         | 第一个标签     | 默认激活的标签ID |
+| `size`          | `'small' \| 'medium' \| 'large'` | `'medium'`     | 组件尺寸         |
+| `theme`         | `Partial<SimpleTabsTheme>`       | `defaultTheme` | 主题配置         |
+| `style`         | `Partial<StyleConfig>`           | `默认样式`     | 样式配置         |
+| `animation`     | `Partial<AnimationConfig>`       | `默认动画`     | 动画配置         |
+| `responsive`    | `Partial<ResponsiveConfig>`      | `默认响应式`   | 响应式配置       |
+| `className`     | `string`                         | `undefined`    | 自定义类名       |
+| `customStyle`   | `Record<string, any>`            | `undefined`    | 自定义样式       |
+| `block`         | `boolean`                        | `false`        | 块级显示         |
+| `centered`      | `boolean`                        | `false`        | 居中对齐         |
+| `scrollable`    | `boolean`                        | `false`        | 可滚动           |
 
 ### 类型定义
 
@@ -122,11 +125,11 @@ const customTheme = {
 
 ```typescript
 interface TabItem {
-  id: string;            // 唯一标识符
-  name: string;          // 显示名称
-  disabled?: boolean;    // 是否禁用
-  route?: string;        // 路由地址
-  icon?: string;         // 图标 HTML (SVG)
+  id: string; // 唯一标识符
+  name: string; // 显示名称
+  disabled?: boolean; // 是否禁用
+  route?: string; // 路由地址
+  icon?: string; // 图标 HTML (SVG)
 }
 ```
 
@@ -134,14 +137,14 @@ interface TabItem {
 
 ```typescript
 interface SimpleTabsTheme {
-  activeTextColor: string;      // 激活文字颜色
-  inactiveTextColor: string;    // 非激活文字颜色
-  hoverTextColor: string;       // 悬浮文字颜色
-  backgroundColor: string;      // 背景色
-  indicatorColor: string;       // 指示器颜色
-  fontFamily: string;          // 字体系列
-  borderColor?: string;        // 边框颜色
-  boxShadow?: string;          // 阴影
+  activeTextColor: string; // 激活文字颜色
+  inactiveTextColor: string; // 非激活文字颜色
+  hoverTextColor: string; // 悬浮文字颜色
+  backgroundColor: string; // 背景色
+  indicatorColor: string; // 指示器颜色
+  fontFamily: string; // 字体系列
+  borderColor?: string; // 边框颜色
+  boxShadow?: string; // 阴影
 }
 ```
 
@@ -149,20 +152,20 @@ interface SimpleTabsTheme {
 
 ```typescript
 interface StyleConfig {
-  padding: string;              // 内边距
-  fontSize: string;             // 字体大小
-  fontWeight: string;           // 字体粗细
-  indicatorHeight: string;      // 指示器高度
+  padding: string; // 内边距
+  fontSize: string; // 字体大小
+  fontWeight: string; // 字体粗细
+  indicatorHeight: string; // 指示器高度
   indicatorStyle: IndicatorStyle; // 指示器样式
-  borderRadius?: string;        // 圆角
-  gap?: string;                 // 标签间距
+  borderRadius?: string; // 圆角
+  gap?: string; // 标签间距
 }
 ```
 
 #### 指示器样式
 
 ```typescript
-type IndicatorStyle = 'line' | 'dot' | 'pill' | 'underline';
+type IndicatorStyle = "line" | "dot" | "pill" | "underline";
 ```
 
 - `line` - 底部线条 (默认)
@@ -172,12 +175,12 @@ type IndicatorStyle = 'line' | 'dot' | 'pill' | 'underline';
 
 ### 事件
 
-| 事件名       | 参数                            | 描述                   |
-| ------------ | ------------------------------- | ---------------------- |
-| `tab-change` | `(tabId: string, tab: TabItem)` | 标签页切换时触发       |
-| `tab-click`  | `(tabId: string, tab: TabItem, event: Event)` | 标签页点击时触发 |
-| `tab-hover`  | `(tabId: string, tab: TabItem)` | 鼠标悬浮在标签页时触发 |
-| `tab-leave`  | `(tabId: string, tab: TabItem)` | 鼠标离开标签页时触发   |
+| 事件名       | 参数                                          | 描述                   |
+| ------------ | --------------------------------------------- | ---------------------- |
+| `tab-change` | `(tabId: string, tab: TabItem)`               | 标签页切换时触发       |
+| `tab-click`  | `(tabId: string, tab: TabItem, event: Event)` | 标签页点击时触发       |
+| `tab-hover`  | `(tabId: string, tab: TabItem)`               | 鼠标悬浮在标签页时触发 |
+| `tab-leave`  | `(tabId: string, tab: TabItem)`               | 鼠标离开标签页时触发   |
 
 ## 🎨 预设配置
 
@@ -186,22 +189,22 @@ type IndicatorStyle = 'line' | 'dot' | 'pill' | 'underline';
 ```typescript
 const sizeConfigs = {
   small: {
-    padding: '8px 10px',
-    fontSize: '14px',
-    fontWeight: '500',
-    indicatorHeight: '2px',
+    padding: "8px 10px",
+    fontSize: "14px",
+    fontWeight: "500",
+    indicatorHeight: "2px",
   },
   medium: {
-    padding: '14px 12px',
-    fontSize: '16px',
-    fontWeight: '600',
-    indicatorHeight: '2px',
+    padding: "14px 12px",
+    fontSize: "16px",
+    fontWeight: "600",
+    indicatorHeight: "2px",
   },
   large: {
-    padding: '16px 16px',
-    fontSize: '18px',
-    fontWeight: '700',
-    indicatorHeight: '3px',
+    padding: "16px 16px",
+    fontSize: "18px",
+    fontWeight: "700",
+    indicatorHeight: "3px",
   },
 };
 ```
@@ -210,12 +213,13 @@ const sizeConfigs = {
 
 ```typescript
 const defaultTheme = {
-  activeTextColor: 'rgb(20, 23, 26)',
-  inactiveTextColor: 'rgb(76, 82, 89)',
-  hoverTextColor: 'rgb(55, 65, 81)',
-  backgroundColor: '#ffffff',
-  indicatorColor: 'rgb(20, 23, 26)',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", "Inter", sans-serif',
+  activeTextColor: "rgb(20, 23, 26)",
+  inactiveTextColor: "rgb(76, 82, 89)",
+  hoverTextColor: "rgb(55, 65, 81)",
+  backgroundColor: "#ffffff",
+  indicatorColor: "rgb(20, 23, 26)",
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", "Inter", sans-serif',
 };
 ```
 
@@ -225,28 +229,16 @@ const defaultTheme = {
 
 ```vue
 <!-- 线条指示器 -->
-<ConfigurableSimpleTabs
-  :tabs="tabs"
-  :style="{ indicatorStyle: 'line' }"
-/>
+<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'line' }" />
 
 <!-- 下划线指示器 -->
-<ConfigurableSimpleTabs
-  :tabs="tabs"
-  :style="{ indicatorStyle: 'underline' }"
-/>
+<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'underline' }" />
 
 <!-- 圆点指示器 -->
-<ConfigurableSimpleTabs
-  :tabs="tabs"
-  :style="{ indicatorStyle: 'dot' }"
-/>
+<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'dot' }" />
 
 <!-- 药丸指示器 -->
-<ConfigurableSimpleTabs
-  :tabs="tabs"
-  :style="{ indicatorStyle: 'pill' }"
-/>
+<ConfigurableSimpleTabs :tabs="tabs" :style="{ indicatorStyle: 'pill' }" />
 ```
 
 ### 深色主题
@@ -259,7 +251,7 @@ const defaultTheme = {
     inactiveTextColor: '#9ca3af',
     hoverTextColor: '#d1d5db',
     backgroundColor: '#1f2937',
-    indicatorColor: '#3b82f6'
+    indicatorColor: '#3b82f6',
   }"
 />
 ```
@@ -267,11 +259,7 @@ const defaultTheme = {
 ### 滚动标签页
 
 ```vue
-<ConfigurableSimpleTabs
-  :tabs="manyTabs"
-  scrollable
-  :style="{ gap: '32px' }"
-/>
+<ConfigurableSimpleTabs :tabs="manyTabs" scrollable :style="{ gap: '32px' }" />
 ```
 
 ### 居中对齐
@@ -287,10 +275,7 @@ const defaultTheme = {
 ### 禁用动画
 
 ```vue
-<ConfigurableSimpleTabs
-  :tabs="tabs"
-  :animation="{ enabled: false }"
-/>
+<ConfigurableSimpleTabs :tabs="tabs" :animation="{ enabled: false }" />
 ```
 
 ### 自定义响应式
@@ -302,8 +287,8 @@ const defaultTheme = {
     mobileBreakpoint: 1024,
     mobileStyle: {
       padding: '12px 8px',
-      fontSize: '14px'
-    }
+      fontSize: '14px',
+    },
   }"
 />
 ```
@@ -314,20 +299,17 @@ const defaultTheme = {
 
 ```vue
 <template>
-  <ConfigurableSimpleTabs
-    ref="tabsRef"
-    :tabs="tabs"
-  />
+  <ConfigurableSimpleTabs ref="tabsRef" :tabs="tabs" />
   <button @click="switchTab">切换到联系页</button>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const tabsRef = ref();
 
 const switchTab = () => {
-  tabsRef.value.setActiveTab('contact');
+  tabsRef.value.setActiveTab("contact");
 };
 </script>
 ```
@@ -336,20 +318,17 @@ const switchTab = () => {
 
 ```vue
 <template>
-  <ConfigurableSimpleTabs
-    :tabs="routeTabs"
-    @tab-change="handleTabChange"
-  />
+  <ConfigurableSimpleTabs :tabs="routeTabs" @tab-change="handleTabChange" />
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 
 const routeTabs = [
-  { id: 'home', name: '首页', route: '/' },
-  { id: 'about', name: '关于', route: '/about' },
+  { id: "home", name: "首页", route: "/" },
+  { id: "about", name: "关于", route: "/about" },
 ];
 
 const handleTabChange = (tabId, tab) => {
@@ -364,19 +343,14 @@ const handleTabChange = (tabId, tab) => {
 
 ```vue
 <template>
-  <ConfigurableSimpleTabs
-    :tabs="dynamicTabs"
-    @tab-change="handleTabChange"
-  />
+  <ConfigurableSimpleTabs :tabs="dynamicTabs" @tab-change="handleTabChange" />
   <button @click="addTab">添加标签页</button>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
-const dynamicTabs = ref([
-  { id: 'tab1', name: '标签1' },
-]);
+const dynamicTabs = ref([{ id: "tab1", name: "标签1" }]);
 
 let tabCounter = 1;
 
@@ -448,3 +422,4 @@ MIT License
 ---
 
 Made with ❤️ by SkillHarbor
+