@ikun2274/spiritechoui 0.1.50 → 0.1.60

package/package.json

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

package/readme.md

@@ -20,11 +20,15 @@ npm uninstall @ikun2274/spiritechoui
 
 #### 0.1.3 (2025-11-06-13:25)
 
-
+### 0.1.51 (2036-2-14 11:17)
+```
+更新了代码块组件
+```
+### 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 speButton from './components/Basic/Button.vue';
+import speinput from './components/form/SpInput.vue';
 import speblock from './components/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; // 注销子组件
+}