@ikun2274/spiritechoui 0.1.51 → 0.1.61

package/dist/spiritechoui.es.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString, defineComponent, withDirectives, vModelDynamic, ref, vShow } from "vue";
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString, defineComponent, withDirectives, vModelDynamic, ref, vShow, computed, provide, Fragment, renderList, inject, onMounted, createCommentVNode } from "vue";
 class MyUI {
   /**
    * 支持 app.use(MyUI) 注册的静态方法
@@ -59,7 +59,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$2 = {
+const _sfc_main$4 = {
   props: {
     // 文本样式类型
     textType: {
@@ -106,8 +106,8 @@ const _sfc_main$2 = {
     }
   }
 };
-const _hoisted_1$2 = ["disabled"];
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$4 = ["disabled"];
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
     class: normalizeClass(["SpiritEchoBtn", [
       `SpiritEchoBtn--${$props.type}`,
@@ -124,10 +124,10 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
         style: normalizeStyle($props.textStyle)
       }, toDisplayString($props.text), 7)
     ])
-  ], 14, _hoisted_1$2);
+  ], 14, _hoisted_1$4);
 }
-const speButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-const _sfc_main$1 = defineComponent({
+const speButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = defineComponent({
   name: "SpInput",
   props: {
     modelValue: {
@@ -242,10 +242,10 @@ const _sfc_main$1 = defineComponent({
   }
 });
 const SpInput_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$1 = { class: "SPInput-container" };
-const _hoisted_2$1 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+const _hoisted_1$3 = { class: "SPInput-container" };
+const _hoisted_2$2 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
     withDirectives(createElementVNode("input", {
       type: _ctx.type,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
@@ -258,13 +258,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("blur", $event)),
       onChange: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change", $event)),
       class: "SPInput"
-    }, null, 40, _hoisted_2$1), [
+    }, null, 40, _hoisted_2$2), [
       [vModelDynamic, _ctx.inputValue]
     ])
   ]);
 }
-const speinput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const _sfc_main = defineComponent({
+const speinput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const _sfc_main$2 = defineComponent({
   name: "SimpleCodeDemo",
   // 仅接收一个核心prop：源码字符串
   props: {
@@ -280,21 +280,21 @@ const _sfc_main = defineComponent({
     return { isShowCode };
   }
 });
-const SPEBlock_vue_vue_type_style_index_0_scoped_e0daeed3_lang = "";
-const _hoisted_1 = { class: "code-demo" };
-const _hoisted_2 = ["innerHTML"];
-const _hoisted_3 = { class: "code-area" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
+const SPEBlock_vue_vue_type_style_index_0_scoped_e583bfde_lang = "";
+const _hoisted_1$2 = { class: "code-demo" };
+const _hoisted_2$1 = ["innerHTML"];
+const _hoisted_3$1 = { class: "code-area" };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
     createElementVNode("div", {
       class: "demo-preview",
       innerHTML: _ctx.sourceCode
-    }, null, 8, _hoisted_2),
+    }, null, 8, _hoisted_2$1),
     createElementVNode("div", {
       class: "toggle-btn",
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.isShowCode = !_ctx.isShowCode)
     }, toDisplayString(_ctx.isShowCode ? "收起源码" : "查看源码"), 1),
-    withDirectives(createElementVNode("div", _hoisted_3, [
+    withDirectives(createElementVNode("div", _hoisted_3$1, [
       createElementVNode("pre", null, [
         createElementVNode("code", null, toDisplayString(_ctx.sourceCode), 1)
       ])
@@ -303,21 +303,109 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const speblock = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e0daeed3"]]);
+const speblock = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-e583bfde"]]);
+const Tabs_vue_vue_type_style_index_0_scoped_fe4030ae_lang = "";
+const _sfc_main$1 = {
+  name: "Tabs",
+  props: {
+    modelValue: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const panes = ref([]);
+    const addPane = (pane) => {
+      panes.value.push(pane);
+    };
+    const activeName = computed(() => props.modelValue);
+    provide("TabsContext", {
+      activeName,
+      addPane
+    });
+    const handleTabClick = (name) => {
+      emit("update:modelValue", name);
+    };
+    return {
+      panes,
+      handleTabClick
+    };
+  }
+};
+const _hoisted_1$1 = { class: "tabs" };
+const _hoisted_2 = { class: "tabs-header" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "tabs-content" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
+    createElementVNode("div", _hoisted_2, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($setup.panes, (pane) => {
+        return openBlock(), createElementBlock("div", {
+          key: pane.name,
+          class: normalizeClass(["tab-item", { active: $props.modelValue === pane.name }]),
+          onClick: ($event) => $setup.handleTabClick(pane.name)
+        }, toDisplayString(pane.label), 11, _hoisted_3);
+      }), 128))
+    ]),
+    createElementVNode("div", _hoisted_4, [
+      renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ])
+  ]);
+}
+const speTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-fe4030ae"]]);
+const TabPane_vue_vue_type_style_index_0_scoped_3fe96054_lang = "";
+const _sfc_main = {
+  name: "TabPane",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const TabsContext = inject("TabsContext");
+    const activeName = TabsContext.activeName;
+    onMounted(() => {
+      TabsContext.addPane({
+        name: props.name,
+        label: props.label
+      });
+    });
+    return {
+      activeName
+    };
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "tab-pane"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return $setup.activeName === $props.name ? (openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ])) : createCommentVNode("", true);
+}
+const speTabPane = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3fe96054"]]);
 const injector = new ComponentInjector(MyUI);
-injector.register("form", "speButton", speButton, {
+injector.register("basic", "speButton", speButton, {
   type: "default",
   size: "medium"
 });
 injector.register("form", "speinput", speinput);
 injector.register("tool", "speblock", speblock);
+injector.register("navigation", "speTabs", speTabs);
+injector.register("navigation", "speTabPane", speTabPane);
 MyUI.install = (app) => {
-  app.component("SPE-Button", MyUI.form.speButton({}));
+  app.component("SPE-Button", MyUI.basic.speButton({}));
   app.component("SPE-Input", MyUI.form.speinput({}));
-  app.component(
-    "SPE-Block",
-    MyUI.tool.speblock({})
-  );
+  app.component("SPE-Block", MyUI.tool.speblock({}));
+  app.component("SPE-Tabs", MyUI.navigation.speTabs({}));
+  app.component("SPE-TabPane", MyUI.navigation.speTabPane({}));
 };
 export {
   MyUI

package/dist/spiritechoui.umd.js

@@ -62,7 +62,7 @@ var __publicField = (obj, key, value) => {
     }
     return target;
   };
-  const _sfc_main$2 = {
+  const _sfc_main$4 = {
     props: {
       // 文本样式类型
       textType: {
@@ -109,8 +109,8 @@ var __publicField = (obj, key, value) => {
       }
     }
   };
-  const _hoisted_1$2 = ["disabled"];
-  function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _hoisted_1$4 = ["disabled"];
+  function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("button", {
       class: vue.normalizeClass(["SpiritEchoBtn", [
         `SpiritEchoBtn--${$props.type}`,
@@ -127,10 +127,10 @@ var __publicField = (obj, key, value) => {
           style: vue.normalizeStyle($props.textStyle)
         }, vue.toDisplayString($props.text), 7)
       ])
-    ], 14, _hoisted_1$2);
+    ], 14, _hoisted_1$4);
   }
-  const speButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-  const _sfc_main$1 = vue.defineComponent({
+  const speButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+  const _sfc_main$3 = vue.defineComponent({
     name: "SpInput",
     props: {
       modelValue: {
@@ -245,10 +245,10 @@ var __publicField = (obj, key, value) => {
     }
   });
   const SpInput_vue_vue_type_style_index_0_lang = "";
-  const _hoisted_1$1 = { class: "SPInput-container" };
-  const _hoisted_2$1 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
-  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+  const _hoisted_1$3 = { class: "SPInput-container" };
+  const _hoisted_2$2 = ["type", "placeholder", "disabled", "maxlength", "name", "readonly"];
+  function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
       vue.withDirectives(vue.createElementVNode("input", {
         type: _ctx.type,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
@@ -261,13 +261,13 @@ var __publicField = (obj, key, value) => {
         onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("blur", $event)),
         onChange: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change", $event)),
         class: "SPInput"
-      }, null, 40, _hoisted_2$1), [
+      }, null, 40, _hoisted_2$2), [
         [vue.vModelDynamic, _ctx.inputValue]
       ])
     ]);
   }
-  const speinput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-  const _sfc_main = vue.defineComponent({
+  const speinput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+  const _sfc_main$2 = vue.defineComponent({
     name: "SimpleCodeDemo",
     // 仅接收一个核心prop：源码字符串
     props: {
@@ -283,21 +283,21 @@ var __publicField = (obj, key, value) => {
       return { isShowCode };
     }
   });
-  const SPEBlock_vue_vue_type_style_index_0_scoped_e0daeed3_lang = "";
-  const _hoisted_1 = { class: "code-demo" };
-  const _hoisted_2 = ["innerHTML"];
-  const _hoisted_3 = { class: "code-area" };
-  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+  const SPEBlock_vue_vue_type_style_index_0_scoped_e583bfde_lang = "";
+  const _hoisted_1$2 = { class: "code-demo" };
+  const _hoisted_2$1 = ["innerHTML"];
+  const _hoisted_3$1 = { class: "code-area" };
+  function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
       vue.createElementVNode("div", {
         class: "demo-preview",
         innerHTML: _ctx.sourceCode
-      }, null, 8, _hoisted_2),
+      }, null, 8, _hoisted_2$1),
       vue.createElementVNode("div", {
         class: "toggle-btn",
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.isShowCode = !_ctx.isShowCode)
       }, vue.toDisplayString(_ctx.isShowCode ? "收起源码" : "查看源码"), 1),
-      vue.withDirectives(vue.createElementVNode("div", _hoisted_3, [
+      vue.withDirectives(vue.createElementVNode("div", _hoisted_3$1, [
         vue.createElementVNode("pre", null, [
           vue.createElementVNode("code", null, vue.toDisplayString(_ctx.sourceCode), 1)
         ])
@@ -306,21 +306,109 @@ var __publicField = (obj, key, value) => {
       ])
     ]);
   }
-  const speblock = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e0daeed3"]]);
+  const speblock = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__scopeId", "data-v-e583bfde"]]);
+  const Tabs_vue_vue_type_style_index_0_scoped_fe4030ae_lang = "";
+  const _sfc_main$1 = {
+    name: "Tabs",
+    props: {
+      modelValue: {
+        type: String,
+        required: true
+      }
+    },
+    emits: ["update:modelValue"],
+    setup(props, { emit }) {
+      const panes = vue.ref([]);
+      const addPane = (pane) => {
+        panes.value.push(pane);
+      };
+      const activeName = vue.computed(() => props.modelValue);
+      vue.provide("TabsContext", {
+        activeName,
+        addPane
+      });
+      const handleTabClick = (name) => {
+        emit("update:modelValue", name);
+      };
+      return {
+        panes,
+        handleTabClick
+      };
+    }
+  };
+  const _hoisted_1$1 = { class: "tabs" };
+  const _hoisted_2 = { class: "tabs-header" };
+  const _hoisted_3 = ["onClick"];
+  const _hoisted_4 = { class: "tabs-content" };
+  function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+      vue.createElementVNode("div", _hoisted_2, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($setup.panes, (pane) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: pane.name,
+            class: vue.normalizeClass(["tab-item", { active: $props.modelValue === pane.name }]),
+            onClick: ($event) => $setup.handleTabClick(pane.name)
+          }, vue.toDisplayString(pane.label), 11, _hoisted_3);
+        }), 128))
+      ]),
+      vue.createElementVNode("div", _hoisted_4, [
+        vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ])
+    ]);
+  }
+  const speTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-fe4030ae"]]);
+  const TabPane_vue_vue_type_style_index_0_scoped_3fe96054_lang = "";
+  const _sfc_main = {
+    name: "TabPane",
+    props: {
+      name: {
+        type: String,
+        required: true
+      },
+      label: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      const TabsContext = vue.inject("TabsContext");
+      const activeName = TabsContext.activeName;
+      vue.onMounted(() => {
+        TabsContext.addPane({
+          name: props.name,
+          label: props.label
+        });
+      });
+      return {
+        activeName
+      };
+    }
+  };
+  const _hoisted_1 = {
+    key: 0,
+    class: "tab-pane"
+  };
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return $setup.activeName === $props.name ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ])) : vue.createCommentVNode("", true);
+  }
+  const speTabPane = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3fe96054"]]);
   const injector = new ComponentInjector(MyUI);
-  injector.register("form", "speButton", speButton, {
+  injector.register("basic", "speButton", speButton, {
     type: "default",
     size: "medium"
   });
   injector.register("form", "speinput", speinput);
   injector.register("tool", "speblock", speblock);
+  injector.register("navigation", "speTabs", speTabs);
+  injector.register("navigation", "speTabPane", speTabPane);
   MyUI.install = (app) => {
-    app.component("SPE-Button", MyUI.form.speButton({}));
+    app.component("SPE-Button", MyUI.basic.speButton({}));
     app.component("SPE-Input", MyUI.form.speinput({}));
-    app.component(
-      "SPE-Block",
-      MyUI.tool.speblock({})
-    );
+    app.component("SPE-Block", MyUI.tool.speblock({}));
+    app.component("SPE-Tabs", MyUI.navigation.speTabs({}));
+    app.component("SPE-TabPane", MyUI.navigation.speTabPane({}));
   };
   exports2.MyUI = MyUI;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });

package/dist/style.css

@@ -106,16 +106,16 @@
 }
 .SPInput:read-only {
   background-color: #f5f7fa;
-}.code-demo[data-v-e0daeed3] {
+}.code-demo[data-v-e583bfde] {
   border: 1px solid rgba(221, 216, 216, 0.4666666667);
   margin: 10px 0;
   align-items: center;
 }
-.code-demo .demo-preview[data-v-e0daeed3] {
+.code-demo .demo-preview[data-v-e583bfde] {
   padding: 20px;
   background: #ffffff;
 }
-.code-demo .toggle-btn[data-v-e0daeed3] {
+.code-demo .toggle-btn[data-v-e583bfde] {
   padding: 8px;
   text-align: center;
   background: #ebecec;
@@ -123,14 +123,14 @@
   border-top: 1px solid #eee;
   user-select: none;
 }
-.code-demo .code-area[data-v-e0daeed3] {
+.code-demo .code-area[data-v-e583bfde] {
   background: #fbfbfb;
   padding: 20px;
   border-top: 1px solid #eee;
   font-family: Consolas, Monaco, "Courier New", monospace;
 }
-.code-demo .code-area pre[data-v-e0daeed3],
-.code-demo .code-area code[data-v-e0daeed3] {
+.code-demo .code-area pre[data-v-e583bfde],
+.code-demo .code-area code[data-v-e583bfde] {
   margin: 0;
   font-size: 14px;
   line-height: 1.5;
@@ -138,4 +138,28 @@
   white-space: pre-wrap;
   word-break: break-all;
   line-height: 1.8;
-}
+}
+.tabs[data-v-fe4030ae] {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+.tabs-header[data-v-fe4030ae] {
+  display: flex;
+  border-bottom: 1px solid #e4e7ed;
+}
+.tab-item[data-v-fe4030ae] {
+  padding: 10px 20px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+.tab-item.active[data-v-fe4030ae] {
+  border-bottom-color: #409eff;
+  color: #409eff;
+}
+.tabs-content[data-v-fe4030ae] {
+  padding: 20px;
+}
+
+.tab-pane[data-v-3fe96054] {
+  /* 可自定义内容区样式 */
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikun2274/spiritechoui",
-  "version": "0.1.51",
+  "version": "0.1.61",
   "main": "dist/spiritechoui.umd.cjs",
   "module": "dist/spiritechoui.es.js",
   "exports": {

package/readme.md

@@ -1,6 +1,5 @@
 #  我的第一个UI组件库 SpiritEchoUI
 
-###  目前还是0.1.5版本   
 
 
 ## 安装组件
@@ -24,11 +23,11 @@ npm uninstall @ikun2274/spiritechoui
 ```
 更新了代码块组件
 ```
-
+### 0.1.60 (2036-2-14 15:57)
+```
+更新了Tab＆TabPane
+```
 
 ## 后续规划
 
 
-#### v0.2.x：新增表单组件（输入框、选择器等），完善按钮与表单的联动。
-#### v0.3.x：补充布局工具类，支持更灵活的响应式场景。
-#### v0.4.x：还不知道

package/src/components/Navigation/TabPane.vue

@@ -0,0 +1,45 @@
+<template>
+  <div v-if="activeName === name" class="tab-pane">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { inject, onMounted } from 'vue';
+
+export default {
+  name: 'TabPane',
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const TabsContext = inject('TabsContext');
+    const activeName = TabsContext.activeName;
+
+    // 挂载时注册到 Tabs
+    onMounted(() => {
+      TabsContext.addPane({
+        name: props.name,
+        label: props.label
+      });
+    });
+
+    return {
+      activeName
+    };
+  }
+};
+</script>
+
+<style scoped>
+.tab-pane {
+  /* 可自定义内容区样式 */
+}
+</style>

package/src/components/Navigation/Tabs.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="tabs">
+    <div class="tabs-header">
+      <div
+        v-for="pane in panes"
+        :key="pane.name"
+        :class="['tab-item', { active: modelValue === pane.name }]"
+        @click="handleTabClick(pane.name)"
+      >
+        {{ pane.label }}
+      </div>
+    </div>
+    <div class="tabs-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, provide, computed } from 'vue';
+
+export default {
+  name: 'Tabs',
+  props: {
+    modelValue: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const panes = ref([]);
+
+    // 提供给子组件的注册方法
+    const addPane = (pane) => {
+      panes.value.push(pane);
+    };
+
+    // 共享激活状态
+    const activeName = computed(() => props.modelValue);
+    provide('TabsContext', {
+      activeName,
+      addPane
+    });
+
+    // 点击切换标签
+    const handleTabClick = (name) => {
+      emit('update:modelValue', name);
+    };
+
+    return {
+      panes,
+      handleTabClick
+    };
+  }
+};
+</script>
+
+<style scoped>
+.tabs {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+.tabs-header {
+  display: flex;
+  border-bottom: 1px solid #e4e7ed;
+}
+.tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+.tab-item.active {
+  border-bottom-color: #409eff;
+  color: #409eff;
+}
+.tabs-content {
+  padding: 20px;
+}
+</style>

package/src/registerComponents.js

@@ -1,32 +1,40 @@
 // 组件库内部的 registerComponents.js 示例
 import MyUI from './MyUI';
 import ComponentInjector from './ComponentInjector';
-
 //引入组件
-import speButton from './components/Button.vue';
-import speinput from './components/SpInput.vue';
-import speblock from './components/SPEBlock.vue'
+import speButton from './components/Basic/Button.vue';
+import speinput from './components/form/SpInput.vue';
+import speblock from './components/Tool/SPEBlock.vue'
 
-const injector = new ComponentInjector(MyUI);
 
-injector.register('form', 'speButton', speButton, {
+import speTabs from './components/Navigation/Tabs.vue'
+import speTabPane from './components/Navigation/TabPane.vue'
+
+/////////////////
+const injector = new ComponentInjector(MyUI);
+injector.register('basic', 'speButton', speButton, {
   type: 'default',
   size: 'medium'
 });
-//假设有第二个组件
+
 injector.register('form', 'speinput', speinput);
 injector.register('tool', 'speblock', speblock);
-
 //Spirit EchoUI
+injector.register('navigation', 'speTabs', speTabs);
+injector.register('navigation', 'speTabPane', speTabPane);
+
+
 
-//全局激活组件
 
+
+//全局激活组件
 MyUI.install = (app) => {
-  app.component('SPE-Button', MyUI.form.speButton({}));
+  app.component('SPE-Button', MyUI.basic.speButton({}));
   app.component('SPE-Input', MyUI.form.speinput({}));
-  app.component('SPE-Block', MyUI.tool.speblock({})
-  );
+  app.component('SPE-Block', MyUI.tool.speblock({}));
 
+  app.component('SPE-Tabs', MyUI.navigation.speTabs({}));
+  app.component('SPE-TabPane', MyUI.navigation.speTabPane({}));
 
 };
 

package/src/type/global.d.ts

@@ -1,10 +1,10 @@
 // src/types/global.d.ts
-import { SpInput } from "../components/SpInput.vue";
-import { Button } from "../components/Button.vue"; // 若有其他组件也需声明
+import { SpInput } from "../components/form/SpInput.vue";
+import { Button } from "../components/Basic/Button.vue"; // 若有其他组件也需声明
 
 declare module "vue" {
   export interface GlobalComponents {
     SpInput: typeof SpInput;
     Button: typeof Button;
   }
-}
+}

package/src/type/types.ts

@@ -0,0 +1,13 @@
+// types.ts
+export interface TabPaneProps {
+  name: string; // 唯一标识
+  label: string; // 标签文本
+  disabled?: boolean; // 是否禁用
+}
+
+export interface TabsProvide {
+  activeName: import("vue").ComputedRef<string>; // 当前激活的标签名
+  changeTab: (name: string) => void; // 切换标签方法
+  addPane: (pane: TabPaneProps) => void; // 注册子组件
+  removePane: (name: string) => void; // 注销子组件
+}