officialblock 1.0.0 → 1.0.1

package/README.md

@@ -21,13 +21,29 @@ const app = createApp(App)
 app.use(OfficialBlock)
 
 // 现在可以在任何组件中使用
-// <ArticleList />
+// <ArticleList model-value="test" />
 // <HeroSlide />
 ```
 
 ### 方式二：按需引入组件
 
 ```javascript
+// Vue 3 Composition API
+<template>
+  <div>
+    <ArticleList model-value="Hello" />
+    <HeroSlide />
+  </div>
+</template>
+
+<script setup>
+import { ArticleList, HeroSlide } from 'officialblock'
+import 'officialblock/style.css'
+</script>
+```
+
+```javascript
+// Vue 3 Options API
 import { ArticleList, HeroSlide } from 'officialblock'
 import 'officialblock/style.css'
 
@@ -35,6 +51,11 @@ export default {
   components: {
     ArticleList,
     HeroSlide
+  },
+  data() {
+    return {
+      articleValue: 'Hello World'
+    }
   }
 }
 ```
@@ -56,13 +77,103 @@ app.use(HeroSlidePlugin)    // 只注册 HeroSlide 组件
 This package includes TypeScript definitions.
 
 ```typescript
-import type { ComponentProps, ComponentEmits, ComponentSlots } from 'officialblock'
+import type {
+  ComponentProps,
+  ComponentEmits,
+  ComponentSlots,
+  HeroSlideProps,
+  HeroSlideEmits,
+  SlideItem
+} from 'officialblock'
+
+// 使用类型
+const articleProps: ComponentProps = {
+  modelValue: 'Hello',
+  size: 'medium',
+  disabled: false
+}
+
+const heroProps: HeroSlideProps = {
+  autoPlayInterval: 5000,
+  showIndicators: true,
+  autoPlay: true
+}
 ```
 
 ## Components
 
-- **ArticleList**: 文章列表组件
-- **HeroSlide**: 轮播图组件
+### ArticleList 文章列表组件
+
+```vue
+<template>
+  <ArticleList
+    v-model="articleValue"
+    size="medium"
+    :disabled="false"
+    @change="handleChange"
+  >
+    <template #header="{ title }">
+      <h3>{{ title }}</h3>
+    </template>
+    <template #default="{ value }">
+      <p>当前值: {{ value }}</p>
+    </template>
+  </ArticleList>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ArticleList } from 'officialblock'
+
+const articleValue = ref('Hello World')
+
+const handleChange = (value) => {
+  console.log('值改变了:', value)
+}
+</script>
+```
+
+**Props:**
+- `modelValue`: 双向绑定的值
+- `size`: 组件尺寸 (`'small' | 'medium' | 'large'`)
+- `disabled`: 是否禁用
+
+**Events:**
+- `change`: 值改变时触发
+- `update:modelValue`: v-model 更新事件
+
+**Slots:**
+- `default`: 默认内容插槽
+- `header`: 头部内容插槽
+
+### HeroSlide 轮播图组件
+
+```vue
+<template>
+  <HeroSlide
+    :auto-play-interval="5000"
+    :show-indicators="true"
+    :auto-play="true"
+    @change="handleSlideChange"
+  />
+</template>
+
+<script setup>
+import { HeroSlide } from 'officialblock'
+
+const handleSlideChange = (index) => {
+  console.log('切换到第', index + 1, '张')
+}
+</script>
+```
+
+**Props:**
+- `autoPlayInterval`: 自动播放间隔时间（毫秒），默认 3000
+- `showIndicators`: 是否显示指示器，默认 true
+- `autoPlay`: 是否启用自动播放，默认 true
+
+**Events:**
+- `change`: 幻灯片切换时触发
 
 ## Development
 

package/dist/official-block.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),_={class:"content"},f=e.defineComponent({__name:"index",props:{size:{default:"medium"},disabled:{type:Boolean,default:!1},modelValue:{}},emits:["update:modelValue","change","focus"],setup(t,{emit:o}){const l=t,n=o,c=e.computed(()=>`Current value: ${l.modelValue}`);function a(){l.disabled||n("change",l.modelValue)}return(s,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["your-component",[`size-${s.size}`,{"is-disabled":s.disabled}]]),onClick:a},[e.renderSlot(s.$slots,"header",{title:c.value},void 0,!0),e.createElementVNode("div",_,[e.renderSlot(s.$slots,"default",{value:s.modelValue},()=>[e.createTextVNode(e.toDisplayString(s.modelValue),1)],!0)])],2))}}),v=(t,o)=>{const l=t.__vccOpts||t;for(const[n,c]of o)l[n]=c;return l},k=v(f,[["__scopeId","data-v-6e4f6df3"]]),d={install:t=>{t.component("ArticleList",k)}},S={class:"hero-slide"},g={class:"slide-container"},h={class:"slide-indicators"},B=["onClick"],y=e.defineComponent({__name:"index",setup(t){const o=e.ref(0),l=e.ref([{title:"轮播图标题 1",description:"这是第一张轮播图的描述内容"},{title:"轮播图标题 2",description:"这是第二张轮播图的描述内容"},{title:"轮播图标题 3",description:"这是第三张轮播图的描述内容"}]);let n=null;const c=p=>{o.value=p},a=()=>{o.value=(o.value+1)%l.value.length},s=()=>{n=window.setInterval(a,3e3)},m=()=>{n&&(clearInterval(n),n=null)};return e.onMounted(()=>{s()}),e.onUnmounted(()=>{m()}),(p,C)=>(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("div",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(r,i)=>(e.openBlock(),e.createElementBlock("div",{key:i,class:e.normalizeClass(["slide-item",{active:o.value===i}])},[e.createElementVNode("h2",null,e.toDisplayString(r.title),1),e.createElementVNode("p",null,e.toDisplayString(r.description),1)],2))),128))]),e.createElementVNode("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(r,i)=>(e.openBlock(),e.createElementBlock("span",{key:i,class:e.normalizeClass(["indicator",{active:o.value===i}]),onClick:$=>c(i)},null,10,B))),128))])]))}}),V=v(y,[["__scopeId","data-v-73cbd566"]]),u={install:t=>{t.component("HeroSlide",V)}},E={install:t=>{t.component("ArticleList",d),t.component("HeroSlide",u)}};exports.ArticleList=d;exports.ArticleListPlugin=d;exports.HeroSlide=u;exports.HeroSlidePlugin=u;exports.default=E;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),h={class:"content"},y=e.defineComponent({name:"ArticleList",__name:"index",props:{size:{default:"medium"},disabled:{type:Boolean,default:!1},modelValue:{}},emits:["update:modelValue","change","focus"],setup(t,{emit:i}){const n=t,a=i,o=e.computed(()=>`Current value: ${n.modelValue}`);function c(){n.disabled||a("change",n.modelValue)}return(l,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["your-component",[`size-${l.size}`,{"is-disabled":l.disabled}]]),onClick:c},[e.renderSlot(l.$slots,"header",{title:o.value},void 0,!0),e.createElementVNode("div",h,[e.renderSlot(l.$slots,"default",{value:l.modelValue},()=>[e.createTextVNode(e.toDisplayString(l.modelValue),1)],!0)])],2))}}),v=(t,i)=>{const n=t.__vccOpts||t;for(const[a,o]of i)n[a]=o;return n},u=v(y,[["__scopeId","data-v-03506405"]]),B={class:"hero-slide"},g={class:"slide-container"},S={key:0,class:"slide-indicators"},V=["onClick"],C=e.defineComponent({name:"HeroSlide",__name:"index",props:{autoPlayInterval:{default:3e3},showIndicators:{type:Boolean,default:!0},autoPlay:{type:Boolean,default:!0}},emits:["change","click"],setup(t,{emit:i}){const n=t,a=i,o=e.ref(0),c=e.ref([{title:"轮播图标题 1",description:"这是第一张轮播图的描述内容"},{title:"轮播图标题 2",description:"这是第二张轮播图的描述内容"},{title:"轮播图标题 3",description:"这是第三张轮播图的描述内容"}]);let l=null;const p=r=>{o.value=r,a("change",r)},_=()=>{o.value=(o.value+1)%c.value.length,a("change",o.value)},f=()=>{n.autoPlay&&(l=window.setInterval(_,n.autoPlayInterval))},k=()=>{l&&(clearInterval(l),l=null)};return e.onMounted(()=>{f()}),e.onUnmounted(()=>{k()}),(r,I)=>(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(d,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass(["slide-item",{active:o.value===s}])},[e.createElementVNode("h2",null,e.toDisplayString(d.title),1),e.createElementVNode("p",null,e.toDisplayString(d.description),1)],2))),128))]),r.showIndicators?(e.openBlock(),e.createElementBlock("div",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(d,s)=>(e.openBlock(),e.createElementBlock("span",{key:s,class:e.normalizeClass(["indicator",{active:o.value===s}]),onClick:L=>p(s)},null,10,V))),128))])):e.createCommentVNode("",!0)]))}}),m=v(C,[["__scopeId","data-v-4198d280"]]),E={install:t=>{t.component("ArticleList",u)}},P={install:t=>{t.component("HeroSlide",m)}},A={install:t=>{t.component("ArticleList",u),t.component("HeroSlide",m)}};exports.ArticleList=u;exports.ArticleListPlugin=E;exports.HeroSlide=m;exports.HeroSlidePlugin=P;exports.default=A;

package/dist/official-block.es.js

@@ -1,5 +1,6 @@
-import { defineComponent as k, computed as $, createElementBlock as i, openBlock as a, normalizeClass as m, renderSlot as f, createElementVNode as d, createTextVNode as V, toDisplayString as p, ref as h, onMounted as A, onUnmounted as C, Fragment as S, renderList as g } from "vue";
-const L = { class: "content" }, b = /* @__PURE__ */ k({
+import { defineComponent as k, computed as A, createElementBlock as n, openBlock as s, normalizeClass as p, renderSlot as f, createElementVNode as u, createTextVNode as B, toDisplayString as v, ref as h, onMounted as L, onUnmounted as H, createCommentVNode as b, Fragment as y, renderList as g } from "vue";
+const w = { class: "content" }, z = /* @__PURE__ */ k({
+  name: "ArticleList",
   __name: "index",
   props: {
     size: { default: "medium" },
@@ -7,86 +8,96 @@ const L = { class: "content" }, b = /* @__PURE__ */ k({
     modelValue: {}
   },
   emits: ["update:modelValue", "change", "focus"],
-  setup(e, { emit: l }) {
-    const t = e, o = l, c = $(() => `Current value: ${t.modelValue}`);
+  setup(e, { emit: c }) {
+    const o = e, a = c, l = A(() => `Current value: ${o.modelValue}`);
     function r() {
-      t.disabled || o("change", t.modelValue);
+      o.disabled || a("change", o.modelValue);
     }
-    return (n, v) => (a(), i("div", {
-      class: m(["your-component", [`size-${n.size}`, { "is-disabled": n.disabled }]]),
+    return (t, _) => (s(), n("div", {
+      class: p(["your-component", [`size-${t.size}`, { "is-disabled": t.disabled }]]),
       onClick: r
     }, [
-      f(n.$slots, "header", { title: c.value }, void 0, !0),
-      d("div", L, [
-        f(n.$slots, "default", { value: n.modelValue }, () => [
-          V(p(n.modelValue), 1)
+      f(t.$slots, "header", { title: l.value }, void 0, !0),
+      u("div", w, [
+        f(t.$slots, "default", { value: t.modelValue }, () => [
+          B(v(t.modelValue), 1)
         ], !0)
       ])
     ], 2));
   }
-}), y = (e, l) => {
-  const t = e.__vccOpts || e;
-  for (const [o, c] of l)
-    t[o] = c;
-  return t;
-}, H = /* @__PURE__ */ y(b, [["__scopeId", "data-v-6e4f6df3"]]), P = {
-  install: (e) => {
-    e.component("ArticleList", H);
-  }
-}, z = { class: "hero-slide" }, I = { class: "slide-container" }, B = { class: "slide-indicators" }, T = ["onClick"], w = /* @__PURE__ */ k({
+}), S = (e, c) => {
+  const o = e.__vccOpts || e;
+  for (const [a, l] of c)
+    o[a] = l;
+  return o;
+}, P = /* @__PURE__ */ S(z, [["__scopeId", "data-v-03506405"]]), N = { class: "hero-slide" }, T = { class: "slide-container" }, E = {
+  key: 0,
+  class: "slide-indicators"
+}, O = ["onClick"], D = /* @__PURE__ */ k({
+  name: "HeroSlide",
   __name: "index",
-  setup(e) {
-    const l = h(0), t = h([
+  props: {
+    autoPlayInterval: { default: 3e3 },
+    showIndicators: { type: Boolean, default: !0 },
+    autoPlay: { type: Boolean, default: !0 }
+  },
+  emits: ["change", "click"],
+  setup(e, { emit: c }) {
+    const o = e, a = c, l = h(0), r = h([
       { title: "轮播图标题 1", description: "这是第一张轮播图的描述内容" },
       { title: "轮播图标题 2", description: "这是第二张轮播图的描述内容" },
       { title: "轮播图标题 3", description: "这是第三张轮播图的描述内容" }
     ]);
-    let o = null;
-    const c = (_) => {
-      l.value = _;
-    }, r = () => {
-      l.value = (l.value + 1) % t.value.length;
-    }, n = () => {
-      o = window.setInterval(r, 3e3);
-    }, v = () => {
-      o && (clearInterval(o), o = null);
+    let t = null;
+    const _ = (d) => {
+      l.value = d, a("change", d);
+    }, C = () => {
+      l.value = (l.value + 1) % r.value.length, a("change", l.value);
+    }, I = () => {
+      o.autoPlay && (t = window.setInterval(C, o.autoPlayInterval));
+    }, $ = () => {
+      t && (clearInterval(t), t = null);
     };
-    return A(() => {
-      n();
-    }), C(() => {
-      v();
-    }), (_, D) => (a(), i("div", z, [
-      d("div", I, [
-        (a(!0), i(S, null, g(t.value, (u, s) => (a(), i("div", {
-          key: s,
-          class: m(["slide-item", { active: l.value === s }])
+    return L(() => {
+      I();
+    }), H(() => {
+      $();
+    }), (d, F) => (s(), n("div", N, [
+      u("div", T, [
+        (s(!0), n(y, null, g(r.value, (m, i) => (s(), n("div", {
+          key: i,
+          class: p(["slide-item", { active: l.value === i }])
         }, [
-          d("h2", null, p(u.title), 1),
-          d("p", null, p(u.description), 1)
+          u("h2", null, v(m.title), 1),
+          u("p", null, v(m.description), 1)
         ], 2))), 128))
       ]),
-      d("div", B, [
-        (a(!0), i(S, null, g(t.value, (u, s) => (a(), i("span", {
-          key: s,
-          class: m(["indicator", { active: l.value === s }]),
-          onClick: (F) => c(s)
-        }, null, 10, T))), 128))
-      ])
+      d.showIndicators ? (s(), n("div", E, [
+        (s(!0), n(y, null, g(r.value, (m, i) => (s(), n("span", {
+          key: i,
+          class: p(["indicator", { active: l.value === i }]),
+          onClick: (M) => _(i)
+        }, null, 10, O))), 128))
+      ])) : b("", !0)
     ]));
   }
-}), E = /* @__PURE__ */ y(w, [["__scopeId", "data-v-73cbd566"]]), N = {
+}), V = /* @__PURE__ */ S(D, [["__scopeId", "data-v-4198d280"]]), j = {
+  install: (e) => {
+    e.component("ArticleList", P);
+  }
+}, q = {
   install: (e) => {
-    e.component("HeroSlide", E);
+    e.component("HeroSlide", V);
   }
-}, O = {
+}, G = {
   install: (e) => {
-    e.component("ArticleList", P), e.component("HeroSlide", N);
+    e.component("ArticleList", P), e.component("HeroSlide", V);
   }
 };
 export {
   P as ArticleList,
-  P as ArticleListPlugin,
-  N as HeroSlide,
-  N as HeroSlidePlugin,
-  O as default
+  j as ArticleListPlugin,
+  V as HeroSlide,
+  q as HeroSlidePlugin,
+  G as default
 };

package/dist/official-block.umd.js

@@ -1 +1 @@
-(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.OfficialBlock={},l.Vue))})(this,function(l,e){"use strict";const k={class:"content"},h=e.defineComponent({__name:"index",props:{size:{default:"medium"},disabled:{type:Boolean,default:!1},modelValue:{}},emits:["update:modelValue","change","focus"],setup(t,{emit:o}){const n=t,i=o,a=e.computed(()=>`Current value: ${n.modelValue}`);function m(){n.disabled||i("change",n.modelValue)}return(s,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["your-component",[`size-${s.size}`,{"is-disabled":s.disabled}]]),onClick:m},[e.renderSlot(s.$slots,"header",{title:a.value},void 0,!0),e.createElementVNode("div",k,[e.renderSlot(s.$slots,"default",{value:s.modelValue},()=>[e.createTextVNode(e.toDisplayString(s.modelValue),1)],!0)])],2))}}),u=(t,o)=>{const n=t.__vccOpts||t;for(const[i,a]of o)n[i]=a;return n},S=u(h,[["__scopeId","data-v-6e4f6df3"]]),r={install:t=>{t.component("ArticleList",S)}},y={class:"hero-slide"},B={class:"slide-container"},g={class:"slide-indicators"},V=["onClick"],E=u(e.defineComponent({__name:"index",setup(t){const o=e.ref(0),n=e.ref([{title:"轮播图标题 1",description:"这是第一张轮播图的描述内容"},{title:"轮播图标题 2",description:"这是第二张轮播图的描述内容"},{title:"轮播图标题 3",description:"这是第三张轮播图的描述内容"}]);let i=null;const a=_=>{o.value=_},m=()=>{o.value=(o.value+1)%n.value.length},s=()=>{i=window.setInterval(m,3e3)},f=()=>{i&&(clearInterval(i),i=null)};return e.onMounted(()=>{s()}),e.onUnmounted(()=>{f()}),(_,A)=>(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(p,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,class:e.normalizeClass(["slide-item",{active:o.value===c}])},[e.createElementVNode("h2",null,e.toDisplayString(p.title),1),e.createElementVNode("p",null,e.toDisplayString(p.description),1)],2))),128))]),e.createElementVNode("div",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.value,(p,c)=>(e.openBlock(),e.createElementBlock("span",{key:c,class:e.normalizeClass(["indicator",{active:o.value===c}]),onClick:L=>a(c)},null,10,V))),128))])]))}}),[["__scopeId","data-v-73cbd566"]]),d={install:t=>{t.component("HeroSlide",E)}},C={install:t=>{t.component("ArticleList",r),t.component("HeroSlide",d)}};l.ArticleList=r,l.ArticleListPlugin=r,l.HeroSlide=d,l.HeroSlidePlugin=d,l.default=C,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.OfficialBlock={},l.Vue))})(this,function(l,e){"use strict";const k={class:"content"},h=e.defineComponent({name:"ArticleList",__name:"index",props:{size:{default:"medium"},disabled:{type:Boolean,default:!1},modelValue:{}},emits:["update:modelValue","change","focus"],setup(t,{emit:c}){const i=t,a=c,n=e.computed(()=>`Current value: ${i.modelValue}`);function r(){i.disabled||a("change",i.modelValue)}return(o,_)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["your-component",[`size-${o.size}`,{"is-disabled":o.disabled}]]),onClick:r},[e.renderSlot(o.$slots,"header",{title:n.value},void 0,!0),e.createElementVNode("div",k,[e.renderSlot(o.$slots,"default",{value:o.modelValue},()=>[e.createTextVNode(e.toDisplayString(o.modelValue),1)],!0)])],2))}}),f=(t,c)=>{const i=t.__vccOpts||t;for(const[a,n]of c)i[a]=n;return i},m=f(h,[["__scopeId","data-v-03506405"]]),y={class:"hero-slide"},B={class:"slide-container"},g={key:0,class:"slide-indicators"},S=["onClick"],u=f(e.defineComponent({name:"HeroSlide",__name:"index",props:{autoPlayInterval:{default:3e3},showIndicators:{type:Boolean,default:!0},autoPlay:{type:Boolean,default:!0}},emits:["change","click"],setup(t,{emit:c}){const i=t,a=c,n=e.ref(0),r=e.ref([{title:"轮播图标题 1",description:"这是第一张轮播图的描述内容"},{title:"轮播图标题 2",description:"这是第二张轮播图的描述内容"},{title:"轮播图标题 3",description:"这是第三张轮播图的描述内容"}]);let o=null;const _=d=>{n.value=d,a("change",d)},P=()=>{n.value=(n.value+1)%r.value.length,a("change",n.value)},A=()=>{i.autoPlay&&(o=window.setInterval(P,i.autoPlayInterval))},I=()=>{o&&(clearInterval(o),o=null)};return e.onMounted(()=>{A()}),e.onUnmounted(()=>{I()}),(d,$)=>(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(p,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass(["slide-item",{active:n.value===s}])},[e.createElementVNode("h2",null,e.toDisplayString(p.title),1),e.createElementVNode("p",null,e.toDisplayString(p.description),1)],2))),128))]),d.showIndicators?(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,(p,s)=>(e.openBlock(),e.createElementBlock("span",{key:s,class:e.normalizeClass(["indicator",{active:n.value===s}]),onClick:b=>_(s)},null,10,S))),128))])):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-4198d280"]]),V={install:t=>{t.component("ArticleList",m)}},C={install:t=>{t.component("HeroSlide",u)}},E={install:t=>{t.component("ArticleList",m),t.component("HeroSlide",u)}};l.ArticleList=m,l.ArticleListPlugin=V,l.HeroSlide=u,l.HeroSlidePlugin=C,l.default=E,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-.your-component[data-v-6e4f6df3]{padding:16px;border:1px solid #ddd;border-radius:8px;background:#fff;transition:all .3s ease}.your-component[data-v-6e4f6df3]:hover{border-color:#409eff;box-shadow:0 2px 8px #409eff33}.your-component.is-disabled[data-v-6e4f6df3]{opacity:.6;cursor:not-allowed;background:#f5f5f5}.your-component.size-small[data-v-6e4f6df3]{padding:8px;font-size:12px}.your-component.size-medium[data-v-6e4f6df3]{padding:16px;font-size:14px}.your-component.size-large[data-v-6e4f6df3]{padding:24px;font-size:16px}.content[data-v-6e4f6df3]{margin-top:8px}.hero-slide[data-v-73cbd566]{position:relative;width:100%;height:300px;overflow:hidden;border-radius:12px;box-shadow:0 4px 12px #0000001a}.slide-container[data-v-73cbd566]{position:relative;width:100%;height:100%}.slide-item[data-v-73cbd566]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;opacity:0;transition:opacity .5s ease-in-out;text-align:center;padding:20px;box-sizing:border-box}.slide-item.active[data-v-73cbd566]{opacity:1}.slide-item h2[data-v-73cbd566]{margin:0 0 16px;font-size:2rem;font-weight:600}.slide-item p[data-v-73cbd566]{margin:0;font-size:1.1rem;opacity:.9;max-width:600px}.slide-indicators[data-v-73cbd566]{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px}.indicator[data-v-73cbd566]{width:12px;height:12px;border-radius:50%;background:#ffffff80;cursor:pointer;transition:background .3s ease}.indicator.active[data-v-73cbd566]{background:#fff}.indicator[data-v-73cbd566]:hover{background:#fffc}
+.your-component[data-v-03506405]{padding:16px;border:1px solid #ddd;border-radius:8px;background:#fff;transition:all .3s ease}.your-component[data-v-03506405]:hover{border-color:#409eff;box-shadow:0 2px 8px #409eff33}.your-component.is-disabled[data-v-03506405]{opacity:.6;cursor:not-allowed;background:#f5f5f5}.your-component.size-small[data-v-03506405]{padding:8px;font-size:12px}.your-component.size-medium[data-v-03506405]{padding:16px;font-size:14px}.your-component.size-large[data-v-03506405]{padding:24px;font-size:16px}.content[data-v-03506405]{margin-top:8px}.hero-slide[data-v-4198d280]{position:relative;width:100%;height:300px;overflow:hidden;border-radius:12px;box-shadow:0 4px 12px #0000001a}.slide-container[data-v-4198d280]{position:relative;width:100%;height:100%}.slide-item[data-v-4198d280]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;opacity:0;transition:opacity .5s ease-in-out;text-align:center;padding:20px;box-sizing:border-box}.slide-item.active[data-v-4198d280]{opacity:1}.slide-item h2[data-v-4198d280]{margin:0 0 16px;font-size:2rem;font-weight:600}.slide-item p[data-v-4198d280]{margin:0;font-size:1.1rem;opacity:.9;max-width:600px}.slide-indicators[data-v-4198d280]{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px}.indicator[data-v-4198d280]{width:12px;height:12px;border-radius:50%;background:#ffffff80;cursor:pointer;transition:background .3s ease}.indicator.active[data-v-4198d280]{background:#fff}.indicator[data-v-4198d280]:hover{background:#fffc}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "officialblock",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue 3 article list component library",
   "author": "Your Name",
   "license": "MIT",

package/src/components/ArticleList/index.vue

@@ -15,6 +15,11 @@
 import { computed } from 'vue'
 import type { ComponentProps, ComponentEmits, ComponentSlots } from './type'
 
+// 定义组件名称
+defineOptions({
+  name: 'ArticleList'
+})
+
 const props = withDefaults(defineProps<ComponentProps>(), {
   size: 'medium',
   disabled: false

package/src/components/HeroSlide/index.ts

@@ -8,3 +8,4 @@ export default {
 } satisfies Plugin
 
 export { default as HeroSlide } from './index.vue'
+export type { HeroSlideProps, HeroSlideEmits, SlideItem } from './type'

package/src/components/HeroSlide/index.vue

@@ -11,7 +11,7 @@
         <p>{{ slide.description }}</p>
       </div>
     </div>
-    <div class="slide-indicators">
+    <div v-if="showIndicators" class="slide-indicators">
       <span
         v-for="(_, index) in slides"
         :key="index"
@@ -25,9 +25,23 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import type { HeroSlideProps, HeroSlideEmits, SlideItem } from './type'
+
+// 定义组件名称
+defineOptions({
+  name: 'HeroSlide'
+})
+
+const props = withDefaults(defineProps<HeroSlideProps>(), {
+  autoPlayInterval: 3000,
+  showIndicators: true,
+  autoPlay: true
+})
+
+const emit = defineEmits<HeroSlideEmits>()
 
 const currentSlide = ref(0)
-const slides = ref([
+const slides = ref<SlideItem[]>([
   { title: '轮播图标题 1', description: '这是第一张轮播图的描述内容' },
   { title: '轮播图标题 2', description: '这是第二张轮播图的描述内容' },
   { title: '轮播图标题 3', description: '这是第三张轮播图的描述内容' }
@@ -37,14 +51,18 @@ let autoPlayTimer: number | null = null
 
 const goToSlide = (index: number) => {
   currentSlide.value = index
+  emit('change', index)
 }
 
 const nextSlide = () => {
   currentSlide.value = (currentSlide.value + 1) % slides.value.length
+  emit('change', currentSlide.value)
 }
 
 const startAutoPlay = () => {
-  autoPlayTimer = window.setInterval(nextSlide, 3000)
+  if (props.autoPlay) {
+    autoPlayTimer = window.setInterval(nextSlide, props.autoPlayInterval)
+  }
 }
 
 const stopAutoPlay = () => {

package/src/components/HeroSlide/type.ts

@@ -0,0 +1,19 @@
+export interface HeroSlideProps {
+  /** 自动播放间隔时间（毫秒） */
+  autoPlayInterval?: number
+  /** 是否显示指示器 */
+  showIndicators?: boolean
+  /** 是否启用自动播放 */
+  autoPlay?: boolean
+}
+
+export interface HeroSlideEmits {
+  (e: 'change', index: number): void
+  (e: 'click', index: number): void
+}
+
+export interface SlideItem {
+  title: string
+  description: string
+  image?: string
+}

package/src/components/index.ts

@@ -0,0 +1,11 @@
+// 导出所有组件
+export { default as ArticleList } from './ArticleList/index.vue'
+export { default as HeroSlide } from './HeroSlide/index.vue'
+
+// 导出组件插件
+export { default as ArticleListPlugin } from './ArticleList/index'
+export { default as HeroSlidePlugin } from './HeroSlide/index'
+
+// 导出类型定义
+export type { ComponentProps, ComponentEmits, ComponentSlots } from './ArticleList/type'
+export type { HeroSlideProps, HeroSlideEmits, SlideItem } from './HeroSlide/type'

package/src/index.ts

@@ -1,22 +1,29 @@
 import type { App, Plugin } from 'vue'
-import ArticleList from './components/ArticleList'
-import HeroSlide from './components/HeroSlide'
+import { ArticleList, HeroSlide } from './components'
 
 // 全部引入插件
-export default {
+const OfficialBlock = {
   install: (app: App) => {
     app.component('ArticleList', ArticleList)
     app.component('HeroSlide', HeroSlide)
   },
 } satisfies Plugin
 
+// 默认导出插件
+export default OfficialBlock
+
 // 按需引入 - 导出组件
-export { ArticleList }
-export { HeroSlide }
+export { ArticleList, HeroSlide }
 
 // 按需引入 - 导出单个组件的插件
-export { default as ArticleListPlugin } from './components/ArticleList'
-export { default as HeroSlidePlugin } from './components/HeroSlide'
+export { ArticleListPlugin, HeroSlidePlugin } from './components'
 
 // 导出类型定义
-export type { ComponentProps, ComponentEmits, ComponentSlots } from './components/ArticleList/type'
+export type {
+  ComponentProps,
+  ComponentEmits,
+  ComponentSlots,
+  HeroSlideProps,
+  HeroSlideEmits,
+  SlideItem
+} from './components'

package/src/types.ts

@@ -0,0 +1,8 @@
+// 重新导出所有类型定义，确保类型能够正确生成
+export type { ComponentProps, ComponentEmits, ComponentSlots } from './components/ArticleList/type'
+export type { HeroSlideProps, HeroSlideEmits, SlideItem } from './components/HeroSlide/type'
+
+// 插件类型
+export interface OfficialBlockPlugin {
+  install: (app: any) => void
+}