officialblock 1.0.0

package/README.md

@@ -0,0 +1,82 @@
+# OfficialBlock
+
+A Vue 3 article list component library.
+
+## Installation
+
+```bash
+npm install officialblock
+```
+
+## Usage
+
+### 方式一：全部引入
+
+```javascript
+import { createApp } from 'vue'
+import OfficialBlock from 'officialblock'
+import 'officialblock/style.css'
+
+const app = createApp(App)
+app.use(OfficialBlock)
+
+// 现在可以在任何组件中使用
+// <ArticleList />
+// <HeroSlide />
+```
+
+### 方式二：按需引入组件
+
+```javascript
+import { ArticleList, HeroSlide } from 'officialblock'
+import 'officialblock/style.css'
+
+export default {
+  components: {
+    ArticleList,
+    HeroSlide
+  }
+}
+```
+
+### 方式三：按需引入插件
+
+```javascript
+import { createApp } from 'vue'
+import { ArticleListPlugin, HeroSlidePlugin } from 'officialblock'
+import 'officialblock/style.css'
+
+const app = createApp(App)
+app.use(ArticleListPlugin)  // 只注册 ArticleList 组件
+app.use(HeroSlidePlugin)    // 只注册 HeroSlide 组件
+```
+
+### TypeScript Support
+
+This package includes TypeScript definitions.
+
+```typescript
+import type { ComponentProps, ComponentEmits, ComponentSlots } from 'officialblock'
+```
+
+## Components
+
+- **ArticleList**: 文章列表组件
+- **HeroSlide**: 轮播图组件
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```
+
+## License
+
+MIT

package/dist/official-block.cjs.js

@@ -0,0 +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;

package/dist/official-block.es.js

@@ -0,0 +1,92 @@
+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({
+  __name: "index",
+  props: {
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: !1 },
+    modelValue: {}
+  },
+  emits: ["update:modelValue", "change", "focus"],
+  setup(e, { emit: l }) {
+    const t = e, o = l, c = $(() => `Current value: ${t.modelValue}`);
+    function r() {
+      t.disabled || o("change", t.modelValue);
+    }
+    return (n, v) => (a(), i("div", {
+      class: m(["your-component", [`size-${n.size}`, { "is-disabled": n.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)
+        ], !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({
+  __name: "index",
+  setup(e) {
+    const l = h(0), t = 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);
+    };
+    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 }])
+        }, [
+          d("h2", null, p(u.title), 1),
+          d("p", null, p(u.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))
+      ])
+    ]));
+  }
+}), E = /* @__PURE__ */ y(w, [["__scopeId", "data-v-73cbd566"]]), N = {
+  install: (e) => {
+    e.component("HeroSlide", E);
+  }
+}, O = {
+  install: (e) => {
+    e.component("ArticleList", P), e.component("HeroSlide", N);
+  }
+};
+export {
+  P as ArticleList,
+  P as ArticleListPlugin,
+  N as HeroSlide,
+  N as HeroSlidePlugin,
+  O as default
+};

package/dist/official-block.umd.js

@@ -0,0 +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"}})});

package/dist/style.css

@@ -0,0 +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}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "officialblock",
+  "private": false,
+  "version": "1.0.0",
+  "description": "A Vue 3 article list component library",
+  "author": "Your Name",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "vue3",
+    "component",
+    "article",
+    "list"
+  ],
+  "homepage": "https://github.com/yourusername/officialblock#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/officialblock.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/officialblock/issues"
+  },
+  "main": "./dist/official-block.umd.js",
+  "module": "./dist/official-block.es.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/official-block.es.js",
+      "require": "./dist/official-block.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.10",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.17",
+    "vue-tsc": "^2.2.12"
+  }
+}

package/src/App.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="app">
+    <header class="header">
+      <h1>OfficialBlock 组件库</h1>
+      <p>本地开发预览</p>
+    </header>
+
+    <main class="main">
+      <section class="component-section">
+        <h2>HeroSlide 轮播组件</h2>
+        <div class="component-demo">
+          <HeroSlide />
+        </div>
+      </section>
+
+      <section class="component-section">
+        <h2>ArticleList 文章列表组件</h2>
+        <div class="component-demo">
+          <ArticleList
+            v-model="articleValue"
+            size="medium"
+            :disabled="false"
+            @change="(value) => console.log('ArticleList changed:', value)"
+          >
+            <template #header="{ title }">
+              <h3>{{ title }}</h3>
+            </template>
+            <template #default="{ value }">
+              <p>当前值: {{ value }}</p>
+            </template>
+          </ArticleList>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ArticleList } from './components/ArticleList'
+import { HeroSlide } from './components/HeroSlide'
+
+// 为 ArticleList 组件提供响应式数据
+const articleValue = ref('Hello World')
+</script>
+
+<style scoped>
+.app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 40px;
+  padding: 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 12px;
+}
+
+.header h1 {
+  margin: 0 0 10px 0;
+  font-size: 2.5rem;
+  font-weight: 600;
+}
+
+.header p {
+  margin: 0;
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.component-section {
+  background: #f8f9fa;
+  border-radius: 12px;
+  padding: 24px;
+  border: 1px solid #e9ecef;
+}
+
+.component-section h2 {
+  margin: 0 0 20px 0;
+  color: #495057;
+  font-size: 1.5rem;
+  font-weight: 500;
+  border-bottom: 2px solid #dee2e6;
+  padding-bottom: 10px;
+}
+
+.component-demo {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  border: 1px solid #dee2e6;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+</style>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/ArticleList/index.ts

@@ -0,0 +1,11 @@
+import type { App, Plugin } from 'vue'
+import ArticleList from './index.vue'
+
+export default {
+  install: (app: App) => {
+    app.component('ArticleList', ArticleList)
+  },
+} satisfies Plugin
+
+export { default as ArticleList } from './index.vue'
+export type { ComponentProps, ComponentEmits, ComponentSlots } from './type'

package/src/components/ArticleList/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div 
+    class="your-component"
+    :class="[`size-${size}`, { 'is-disabled': disabled }]"
+    @click="handleClick"
+  >
+    <slot name="header" :title="title"></slot>
+    <div class="content">
+      <slot :value="modelValue">{{ modelValue }}</slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { ComponentProps, ComponentEmits, ComponentSlots } from './type'
+
+const props = withDefaults(defineProps<ComponentProps>(), {
+  size: 'medium',
+  disabled: false
+})
+
+const emit = defineEmits<ComponentEmits>()
+defineSlots<ComponentSlots>()
+
+const title = computed(() => `Current value: ${props.modelValue}`)
+
+function handleClick() {
+  if (!props.disabled) {
+    emit('change', props.modelValue)
+  }
+}
+</script>
+
+<style scoped>
+.your-component {
+  padding: 16px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+  transition: all 0.3s ease;
+}
+
+.your-component:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+}
+
+.your-component.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: #f5f5f5;
+}
+
+.your-component.size-small {
+  padding: 8px;
+  font-size: 12px;
+}
+
+.your-component.size-medium {
+  padding: 16px;
+  font-size: 14px;
+}
+
+.your-component.size-large {
+  padding: 24px;
+  font-size: 16px;
+}
+
+.content {
+  margin-top: 8px;
+}
+</style>

package/src/components/ArticleList/type.ts

@@ -0,0 +1,23 @@
+import type { VNode } from 'vue';
+
+export interface ComponentProps {
+  /** 控制组件尺寸 */
+  size?: 'small' | 'medium' | 'large'
+  /** 是否禁用状态 */
+  disabled?: boolean
+  /** 双向绑定的值 */
+  modelValue: string | number
+}
+
+export interface ComponentEmits {
+  (e: 'update:modelValue', value: string | number): void
+  (e: 'change', value: string | number): void
+  (e: 'focus', event: FocusEvent): void
+}
+
+export type ComponentSlots = {
+  /** 默认插槽内容 */
+  default?: (props: { value: string | number }) => VNode[]
+  /** 头部内容 */
+  header?: (props: { title: string }) => VNode[]
+}

package/src/components/HeroSlide/index.ts

@@ -0,0 +1,10 @@
+import type { App, Plugin } from 'vue'
+import HeroSlide from './index.vue'
+
+export default {
+  install: (app: App) => {
+    app.component('HeroSlide', HeroSlide)
+  },
+} satisfies Plugin
+
+export { default as HeroSlide } from './index.vue'

package/src/components/HeroSlide/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="hero-slide">
+    <div class="slide-container">
+      <div
+        v-for="(slide, index) in slides"
+        :key="index"
+        class="slide-item"
+        :class="{ active: currentSlide === index }"
+      >
+        <h2>{{ slide.title }}</h2>
+        <p>{{ slide.description }}</p>
+      </div>
+    </div>
+    <div class="slide-indicators">
+      <span
+        v-for="(_, index) in slides"
+        :key="index"
+        class="indicator"
+        :class="{ active: currentSlide === index }"
+        @click="goToSlide(index)"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const currentSlide = ref(0)
+const slides = ref([
+  { title: '轮播图标题 1', description: '这是第一张轮播图的描述内容' },
+  { title: '轮播图标题 2', description: '这是第二张轮播图的描述内容' },
+  { title: '轮播图标题 3', description: '这是第三张轮播图的描述内容' }
+])
+
+let autoPlayTimer: number | null = null
+
+const goToSlide = (index: number) => {
+  currentSlide.value = index
+}
+
+const nextSlide = () => {
+  currentSlide.value = (currentSlide.value + 1) % slides.value.length
+}
+
+const startAutoPlay = () => {
+  autoPlayTimer = window.setInterval(nextSlide, 3000)
+}
+
+const stopAutoPlay = () => {
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer)
+    autoPlayTimer = null
+  }
+}
+
+onMounted(() => {
+  startAutoPlay()
+})
+
+onUnmounted(() => {
+  stopAutoPlay()
+})
+</script>
+
+<style scoped>
+.hero-slide {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.slide-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.slide-item {
+  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 0%, #764ba2 100%);
+  color: white;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  text-align: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.slide-item.active {
+  opacity: 1;
+}
+
+.slide-item h2 {
+  margin: 0 0 16px 0;
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+.slide-item p {
+  margin: 0;
+  font-size: 1.1rem;
+  opacity: 0.9;
+  max-width: 600px;
+}
+
+.slide-indicators {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+
+.indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.indicator.active {
+  background: white;
+}
+
+.indicator:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+</style>

package/src/index.ts

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

package/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/types/index.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'vue'
+import type { ComponentProps, ComponentEmits, ComponentSlots } from '../src/components/ArticleList/type'
+
+declare module 'vue' {
+  interface GlobalComponents {
+    ArticleList: Component<ComponentProps, ComponentEmits, ComponentSlots>
+  }
+}
+
+export {}