bricks-ui-library 0.0.1

package/README.md

@@ -0,0 +1,173 @@
+# Bricks UI Library
+
+一个基于 Vue 3 的组件库，用于开发纯展示类组件。
+
+## 安装
+
+```bash
+npm install bricks-ui-library @iconify/vue
+# 或
+yarn add bricks-ui-library @iconify/vue
+# 或
+pnpm add bricks-ui-library @iconify/vue
+```
+
+> 注意：如果您的项目使用图标功能，需要安装 `@iconify/vue` 依赖。
+
+## 使用
+
+### 全局注册
+
+```javascript
+import { createApp } from 'vue'
+import BricksUiLibrary from 'bricks-ui-library'
+import 'bricks-ui-library/dist/style.css' // 如果有样式文件
+
+const app = createApp(App)
+
+// 全局注册所有组件
+app.use(BricksUiLibrary)
+
+app.mount('#app')
+```
+
+### 按需引入
+
+```javascript
+import { HelloWorld, TheWelcome } from 'bricks-ui-library'
+
+export default {
+  components: {
+    HelloWorld,
+    TheWelcome
+  }
+}
+```
+
+## 组件列表
+
+### HelloWorld
+
+展示文本信息的组件。
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | string | 'Hello World!' | 展示的主标题文本 |
+| subtitle | string | 'This is a sample component' | 展示的副标题文本 |
+| titleColor | string | '#42b883' | 标题颜色 |
+| subtitleColor | string | '#7f8c8d' | 副标题颜色 |
+| showSubtitle | boolean | true | 是否显示副标题 |
+
+#### 示例
+
+```vue
+<template>
+  <HelloWorld 
+    title="Welcome to Bricks UI" 
+    subtitle="A component library for Vue 3" 
+    :show-subtitle="true"
+  />
+</template>
+```
+
+### TheWelcome
+
+展示欢迎信息列表的组件。
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| items | Array | 见源码 | 欢迎项数据 |
+| title | string | 'Welcome to Your Component Library' | 组件标题 |
+
+#### 示例
+
+```vue
+<template>
+  <TheWelcome 
+    title="Custom Welcome Content"
+    :items="[
+      {
+        icon: 'features',
+        heading: 'Feature Rich',
+        content: 'Our components are designed to be flexible and customizable.'
+      }
+    ]"
+  />
+</template>
+```
+
+### WelcomeItem
+
+展示单个欢迎项的组件。
+
+#### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| icon | string | '' | 图标名称 (支持 Iconify 图标，如 'mdi:home') |
+| heading | string | 'Item Title' | 标题内容 |
+| content | string | 'Item content description' | 内容文本 |
+| vertical | boolean | false | 是否垂直布局 |
+| iconSize | string | '1.5rem' | 图标大小 |
+
+#### 图标支持
+
+组件支持使用 Iconify 图标库中的图标。您可以通过 `icon` 属性传入图标名称，格式为 `集合名称:图标名称`，例如：
+
+- `mdi:home` - Material Design Icons 的 home 图标
+- `fa:heart` - Font Awesome 的 heart 图标
+- `carbon:logo-github` - Carbon 的 GitHub 图标
+
+您也可以通过插槽自定义图标内容。
+
+#### 示例
+
+```vue
+<template>
+  <WelcomeItem 
+    icon="mdi:star" 
+    heading="Featured Item" 
+    content="This is a featured item with a star icon"
+    :vertical="true"
+  />
+</template>
+```
+
+或者使用插槽自定义图标：
+
+```vue
+<template>
+  <WelcomeItem 
+    heading="Custom Icon Item" 
+    content="This item has a custom icon"
+  >
+    <template #icon>
+      <div class="custom-icon">⭐</div>
+    </template>
+  </WelcomeItem>
+</template>
+```
+
+## 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建组件库
+pnpm build-lib
+
+# 构建开发应用
+pnpm build
+```
+
+## 贡献
+
+欢迎提交 issue 和 pull request 来帮助改进这个组件库。

package/dist/bricks-ui-library.css

@@ -0,0 +1 @@
+.hello-world[data-v-029130f9]{text-align:center}.title[data-v-029130f9]{font-weight:500;font-size:2.6rem;position:relative;top:-10px}.subtitle[data-v-029130f9]{font-size:1.2rem}@media(min-width:1024px){.hello-world[data-v-029130f9]{text-align:left}}.item[data-v-207e41b6]{margin-top:2rem;display:flex;position:relative;padding:1rem;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px #0000000d}.item.vertical[data-v-207e41b6]{flex-direction:column;align-items:center;text-align:center}.icon-wrapper[data-v-207e41b6]{display:flex;align-items:center;justify-content:center;flex-shrink:0}.default-icon[data-v-207e41b6]{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;background-color:#f0f0f0;color:#666;font-weight:700}.details[data-v-207e41b6]{flex:1;margin-left:1rem}.vertical .details[data-v-207e41b6]{margin-left:0;margin-top:1rem}.heading[data-v-207e41b6]{font-size:1.2rem;font-weight:500;margin-bottom:.4rem;color:#2c3e50}.content[data-v-207e41b6]{color:#666;line-height:1.5}@media(min-width:1024px){.item[data-v-207e41b6]{margin-top:0;padding:1.2rem}.default-icon[data-v-207e41b6]{width:50px;height:50px;font-size:1.5rem}.item.vertical[data-v-207e41b6]{padding:1.5rem}}.welcome-container[data-v-95e350f3]{max-width:900px;margin:0 auto;padding:2rem 1rem}.welcome-title[data-v-95e350f3]{text-align:center;margin-bottom:2rem;font-size:1.8rem;color:#2c3e50}.icon-placeholder[data-v-95e350f3]{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,#42b883,#35495e);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.2rem}