officialblock 1.0.1 → 1.0.3

package/src/views/guide/Introduction.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="page">
+    <h1>介绍</h1>
+    
+    <p class="description">
+      OfficialBlock 是一个基于 Vue 3 + TypeScript 的组件库，提供了一系列高质量的 UI 组件，
+      帮助开发者快速构建现代化的 Web 应用程序。
+    </p>
+
+    <h2>特性</h2>
+    <ul class="feature-list">
+      <li>🚀 基于 Vue 3 Composition API</li>
+      <li>📦 开箱即用的高质量组件</li>
+      <li>🎨 精美的默认主题设计</li>
+      <li>💪 使用 TypeScript 编写，提供完整的类型定义</li>
+      <li>📱 支持响应式设计</li>
+      <li>🛠️ 支持按需引入</li>
+      <li>🌍 支持国际化</li>
+    </ul>
+
+    <h2>版本</h2>
+    <p>当前版本：<code class="version-tag">v1.0.1</code></p>
+
+    <h2>兼容性</h2>
+    <p>支持现代浏览器和 IE11+。</p>
+    
+    <div class="compatibility-table">
+      <table>
+        <thead>
+          <tr>
+            <th>浏览器</th>
+            <th>版本</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Chrome</td>
+            <td>≥ 85</td>
+          </tr>
+          <tr>
+            <td>Firefox</td>
+            <td>≥ 79</td>
+          </tr>
+          <tr>
+            <td>Safari</td>
+            <td>≥ 14</td>
+          </tr>
+          <tr>
+            <td>Edge</td>
+            <td>≥ 85</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h2>贡献</h2>
+    <p>
+      如果你在使用过程中发现任何问题，或者有好的建议，欢迎提交 
+      <a href="https://github.com/yourusername/officialblock/issues" target="_blank">Issue</a> 
+      或者 
+      <a href="https://github.com/yourusername/officialblock/pulls" target="_blank">Pull Request</a>。
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 页面逻辑
+</script>
+
+<style scoped>
+.page {
+  max-width: 800px;
+}
+
+.description {
+  font-size: 16px;
+  line-height: 1.6;
+  color: #606266;
+  margin-bottom: 32px;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 24px 0;
+}
+
+.feature-list li {
+  padding: 8px 0;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.version-tag {
+  background: #f0f9ff;
+  color: #409eff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+}
+
+.compatibility-table {
+  margin: 24px 0;
+}
+
+.compatibility-table table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.compatibility-table th,
+.compatibility-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.compatibility-table th {
+  background: #f8f9fa;
+  font-weight: 600;
+  color: #303133;
+}
+
+.compatibility-table td {
+  color: #606266;
+}
+
+.compatibility-table tr:last-child td {
+  border-bottom: none;
+}
+
+h1 {
+  color: #303133;
+  font-size: 32px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+
+h2 {
+  color: #303133;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 32px 0 16px 0;
+  border-bottom: 1px solid #e4e7ed;
+  padding-bottom: 8px;
+}
+
+p {
+  line-height: 1.6;
+  color: #606266;
+  margin-bottom: 16px;
+}
+
+a {
+  color: #409eff;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background: #f5f5f5;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+}
+</style>

package/src/views/guide/QuickStart.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="page">
+    <h1>快速开始</h1>
+    
+    <p>本节将介绍如何在项目中使用 OfficialBlock。</p>
+
+    <h2>完整引入</h2>
+    <p>如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。</p>
+    
+    <div class="code-block">
+      <pre><code>// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import OfficialBlock from 'officialblock'
+import 'officialblock/style.css'
+
+const app = createApp(App)
+app.use(OfficialBlock)
+app.mount('#app')</code></pre>
+      <button class="copy-btn" @click="copyCode(fullImportCode)">复制</button>
+    </div>
+
+    <h2>按需引入</h2>
+    <p>如果你只希望引入部分组件，比如 ArticleList，那么需要在代码中写入以下内容：</p>
+    
+    <div class="code-block">
+      <pre><code>// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { ArticleList, HeroSlide } from 'officialblock'
+import 'officialblock/style.css'
+
+const app = createApp(App)
+app.component('ArticleList', ArticleList)
+app.component('HeroSlide', HeroSlide)
+app.mount('#app')</code></pre>
+      <button class="copy-btn" @click="copyCode(partialImportCode)">复制</button>
+    </div>
+
+    <h3>在组件中使用</h3>
+    <div class="code-block">
+      <pre><code>&lt;template&gt;
+  &lt;div&gt;
+    &lt;ArticleList v-model="value" size="medium" /&gt;
+    &lt;HeroSlide :auto-play="true" /&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;script setup lang="ts"&gt;
+import { ref } from 'vue'
+import { ArticleList, HeroSlide } from 'officialblock'
+import 'officialblock/style.css'
+
+const value = ref('Hello World')
+&lt;/script&gt;</code></pre>
+      <button class="copy-btn" @click="copyCode(componentUsageCode)">复制</button>
+    </div>
+
+    <h2>全局配置</h2>
+    <p>在引入 OfficialBlock 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。</p>
+    
+    <div class="code-block">
+      <pre><code>import { createApp } from 'vue'
+import App from './App.vue'
+import OfficialBlock from 'officialblock'
+
+const app = createApp(App)
+app.use(OfficialBlock, {
+  // 全局组件大小
+  size: 'medium',
+  // 全局 z-index 配置
+  zIndex: 3000,
+})
+app.mount('#app')</code></pre>
+      <button class="copy-btn" @click="copyCode(globalConfigCode)">复制</button>
+    </div>
+
+    <h2>开始使用</h2>
+    <p>至此，一个基于 Vue 和 OfficialBlock 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。</p>
+
+    <div class="next-steps">
+      <h3>接下来你可以：</h3>
+      <ul>
+        <li>
+          <router-link to="/components/article-list">查看 ArticleList 组件文档</router-link>
+        </li>
+        <li>
+          <router-link to="/components/hero-slide">查看 HeroSlide 组件文档</router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const fullImportCode = `// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import OfficialBlock from 'officialblock'
+import 'officialblock/style.css'
+
+const app = createApp(App)
+app.use(OfficialBlock)
+app.mount('#app')`
+
+const partialImportCode = `// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { ArticleList, HeroSlide } from 'officialblock'
+import 'officialblock/style.css'
+
+const app = createApp(App)
+app.component('ArticleList', ArticleList)
+app.component('HeroSlide', HeroSlide)
+app.mount('#app')`
+
+const componentUsageCode = `<template>
+  <div>
+    <ArticleList v-model="value" size="medium" />
+    <HeroSlide :auto-play="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ArticleList, HeroSlide } from 'officialblock'
+import 'officialblock/style.css'
+
+const value = ref('Hello World')
+<\/script>`
+
+const globalConfigCode = `import { createApp } from 'vue'
+import App from './App.vue'
+import OfficialBlock from 'officialblock'
+
+const app = createApp(App)
+app.use(OfficialBlock, {
+  // 全局组件大小
+  size: 'medium',
+  // 全局 z-index 配置
+  zIndex: 3000,
+})
+app.mount('#app')`
+
+const copyCode = async (code: string) => {
+  try {
+    await navigator.clipboard.writeText(code)
+    console.log('代码已复制到剪贴板')
+  } catch (err) {
+    console.error('复制失败:', err)
+  }
+}
+</script>
+
+<style scoped>
+.page {
+  max-width: 800px;
+}
+
+.code-block {
+  position: relative;
+  margin: 16px 0;
+  background: #f8f9fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 20px;
+  overflow-x: auto;
+  background: transparent;
+}
+
+.code-block code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #303133;
+  background: transparent;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 6px 12px;
+  background: #409eff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.3s;
+}
+
+.copy-btn:hover {
+  background: #337ecc;
+}
+
+.next-steps {
+  background: #f0f9ff;
+  border: 1px solid #b3d8ff;
+  border-radius: 8px;
+  padding: 20px;
+  margin: 32px 0;
+}
+
+.next-steps h3 {
+  margin-top: 0;
+  color: #409eff;
+}
+
+.next-steps ul {
+  margin-bottom: 0;
+}
+
+.next-steps a {
+  color: #409eff;
+  text-decoration: none;
+}
+
+.next-steps a:hover {
+  text-decoration: underline;
+}
+
+h1 {
+  color: #303133;
+  font-size: 32px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+
+h2 {
+  color: #303133;
+  font-size: 24px;
+  font-weight: 600;
+  margin: 32px 0 16px 0;
+  border-bottom: 1px solid #e4e7ed;
+  padding-bottom: 8px;
+}
+
+h3 {
+  color: #303133;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 24px 0 12px 0;
+}
+
+p {
+  line-height: 1.6;
+  color: #606266;
+  margin-bottom: 16px;
+}
+
+ul {
+  color: #606266;
+  line-height: 1.6;
+}
+
+li {
+  margin-bottom: 8px;
+}
+</style>