@qi-tian-da-sheng/bin-project-ui 1.0.0

package/examples/App.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="demo-container">
+    <!-- 顶部导航栏 -->
+    <header class="demo-header">
+      <div class="header-content">
+        <h1 class="logo">Bin UI</h1>
+        <div class="header-nav">
+          <a href="https://gitee.com/pixelate/piexl-ui" target="_blank" class="nav-link">Gitee</a>
+        </div>
+      </div>
+    </header>
+
+    <!-- 主体内容 -->
+    <div class="demo-main">
+      <!-- 侧边栏 -->
+      <aside class="demo-sidebar">
+        <nav class="nav-menu">
+          <div class="nav-group">
+            <div class="nav-group-title">基础组件</div>
+            <a 
+              v-for="item in basicComponents" 
+              :key="item.path"
+              :class="['nav-item', { active: currentComponent === item.path }]"
+              @click="currentComponent = item.path"
+            >
+              {{ item.name }}
+            </a>
+          </div>
+
+          <div class="nav-group">
+            <div class="nav-group-title">数据录入</div>
+            <a 
+              v-for="item in formComponents" 
+              :key="item.path"
+              :class="['nav-item', { active: currentComponent === item.path }]"
+              @click="currentComponent = item.path"
+            >
+              {{ item.name }}
+            </a>
+          </div>
+
+          <div class="nav-group">
+            <div class="nav-group-title">数据展示</div>
+            <a 
+              v-for="item in dataComponents" 
+              :key="item.path"
+              :class="['nav-item', { active: currentComponent === item.path }]"
+              @click="currentComponent = item.path"
+            >
+              {{ item.name }}
+            </a>
+          </div>
+
+          <div class="nav-group">
+            <div class="nav-group-title">导航</div>
+            <a 
+              v-for="item in naviComponents" 
+              :key="item.path"
+              :class="['nav-item', { active: currentComponent === item.path }]"
+              @click="currentComponent = item.path"
+            >
+              {{ item.name }}
+            </a>
+          </div>
+
+          <div class="nav-group">
+            <div class="nav-group-title">反馈</div>
+            <a 
+              v-for="item in feedbackComponents" 
+              :key="item.path"
+              :class="['nav-item', { active: currentComponent === item.path }]"
+              @click="currentComponent = item.path"
+            >
+              {{ item.name }}
+            </a>
+          </div>
+
+          <div class="nav-group">
+            <div class="nav-group-title">布局</div>
+            <a 
+              v-for="item in layoutComponents" 
+              :key="item.path"
+              :class="['nav-item', { active: currentComponent === item.path }]"
+              @click="currentComponent = item.path"
+            >
+              {{ item.name }}
+            </a>
+          </div>
+        </nav>
+      </aside>
+
+      <!-- 内容区域 -->
+      <main class="demo-content">
+        <component :is="componentMap[currentComponent]" />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, markRaw } from 'vue'
+import ButtonIndex from "./basic/button/ButtonIndex.vue";
+import IconIndex from "./basic/icon/IconIndex.vue";
+import DialogIndex from "./feedback/dialog/DialogIndex.vue";
+import MessageIndex from "./feedback/message/MessageIndex.vue";
+import ConfirmIndex from "./feedback/confirm/ConfirmIndex.vue";
+import NotifyIndex from "./feedback/notify/NotifyIndex.vue";
+import DrawerIndex from "./feedback/drawer/DrawerIndex.vue";
+import BadgeIndex from "./data/badge/BadgeIndex.vue";
+import TooltipIndex from "./data/tooltip/TooltipIndex.vue";
+import InputIndex from "./dataInput/input/InputIndex.vue";
+import SwitchIndex from "./dataInput/switch/SwitchIndex.vue";
+import DropdownIndex from "./navi/dropdown/DropdownIndex.vue";
+import DividerIndex from "./layout/divider/DividerIndex.vue";
+import PopconfirmIndex from "./feedback/popconfirm/PopconfirmIndex.vue";
+import GridIndex from "./layout/grid/GridIndex.vue";
+import TagIndex from "./data/tag/TagIndex.vue";
+import LayoutIndex from "./layout/layoutContainer/LayoutIndex.vue";
+import TabsIndex from "./navi/tabs/TabsIndex.vue";
+
+const currentComponent = ref('button')
+
+const basicComponents = [
+  { name: 'Button 按钮', path: 'button' },
+  { name: 'Icon 图标', path: 'icon' },
+]
+
+const formComponents = [
+  { name: 'Input 输入框', path: 'input' },
+  { name: 'Switch 开关', path: 'switch' },
+]
+
+const dataComponents = [
+  { name: 'Badge 徽章', path: 'badge' },
+  { name: 'Tag 标签', path: 'tag' },
+  { name: 'Tooltip 文字提示', path: 'tooltip' },
+]
+
+const naviComponents = [
+  { name: 'Dropdown 下拉菜单', path: 'dropdown' },
+  { name: 'Tabs 标签页', path: 'tabs' },
+]
+
+const feedbackComponents = [
+  { name: 'Dialog 对话框', path: 'dialog' },
+  { name: 'Drawer 抽屉', path: 'drawer' },
+  { name: 'Message 消息提示', path: 'message' },
+  { name: 'Notify 通知', path: 'notify' },
+  { name: 'Confirm 确认框', path: 'confirm' },
+  { name: 'Popconfirm 气泡确认框', path: 'popconfirm' },
+]
+
+const layoutComponents = [
+  { name: 'Layout 布局容器', path: 'layout' },
+  { name: 'Grid 栅格', path: 'grid' },
+  { name: 'Divider 分割线', path: 'divider' },
+]
+
+const componentMap: Record<string, any> = {
+  button: markRaw(ButtonIndex),
+  icon: markRaw(IconIndex),
+  input: markRaw(InputIndex),
+  switch: markRaw(SwitchIndex),
+  badge: markRaw(BadgeIndex),
+  tag: markRaw(TagIndex),
+  tooltip: markRaw(TooltipIndex),
+  dropdown: markRaw(DropdownIndex),
+  tabs: markRaw(TabsIndex),
+  dialog: markRaw(DialogIndex),
+  drawer: markRaw(DrawerIndex),
+  message: markRaw(MessageIndex),
+  notify: markRaw(NotifyIndex),
+  confirm: markRaw(ConfirmIndex),
+  popconfirm: markRaw(PopconfirmIndex),
+  layout: markRaw(LayoutIndex),
+  grid: markRaw(GridIndex),
+  divider: markRaw(DividerIndex),
+}
+</script>
+
+<style scoped lang="less">
+.demo-container {
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
+.demo-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  z-index: 1000;
+
+  .header-content {
+    height: 100%;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .logo {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #409eff;
+  }
+
+  .header-nav {
+    display: flex;
+    gap: 24px;
+  }
+
+  .nav-link {
+    color: #606266;
+    text-decoration: none;
+    font-size: 14px;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+
+.demo-main {
+  display: flex;
+  margin: 0 auto;
+  padding-top: 60px;
+}
+
+.demo-sidebar {
+  position: fixed;
+  top: 60px;
+  left: 0;
+  bottom: 0;
+  width: 260px;
+  background: #fff;
+  border-right: 1px solid #e4e7ed;
+  overflow-y: auto;
+  padding: 20px 0;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #dcdfe6;
+    border-radius: 3px;
+  }
+}
+
+.nav-menu {
+  padding: 0 20px;
+}
+
+.nav-group {
+  margin-bottom: 24px;
+
+  &-title {
+    font-size: 13px;
+    color: #909399;
+    font-weight: 600;
+    margin-bottom: 8px;
+    padding: 0 8px;
+  }
+}
+
+.nav-item {
+  display: block;
+  padding: 8px 16px;
+  color: #606266;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 4px;
+  text-decoration: none;
+
+  &:hover {
+    background: #f5f7fa;
+    color: #409eff;
+  }
+
+  &.active {
+    background: #ecf5ff;
+    color: #409eff;
+    font-weight: 500;
+  }
+}
+
+.demo-content {
+  flex: 1;
+  margin-left: 260px;
+  padding: 40px;
+  min-height: calc(100vh - 60px);
+}
+
+@media (max-width: 768px) {
+  .demo-sidebar {
+    transform: translateX(-100%);
+  }
+
+  .demo-content {
+    margin-left: 0;
+  }
+}
+</style>

package/examples/basic/button/ButtonIndex.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Button 按钮</h1>
+      <p class="page-description">常用的操作按钮。</p>
+    </div>
+
+    <basics-button />
+    <icon-button />
+    <loading-button />
+
+    <api-table title="Button Props" :data="buttonProps" />
+    <api-table title="Button Events" :data="buttonEvents" :headers="eventHeaders" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconButton from "./icon.vue";
+import BasicsButton from "./basic.vue";
+import LoadingButton from "./loading.vue";
+import ApiTable from "../../components/ApiTable.vue";
+
+const buttonProps = [
+  { name: 'type', description: '按钮类型', type: "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'cyan'", default: '-' },
+  { name: 'variant', description: '按钮风格', type: "'fantasy' | 'empty'", default: '-' },
+  { name: 'status', description: '按钮状态', type: "'round' | 'circle'", default: '-' },
+  { name: 'size', description: '按钮尺寸', type: "'large' | 'small'", default: '-' },
+  { name: 'disabled', description: '是否禁用', type: 'boolean', default: 'false' },
+  { name: 'loading', description: '是否加载中', type: 'boolean', default: 'false' },
+  { name: 'prefix-icon', description: '前置图标', type: 'string', default: '-' },
+  { name: 'suffix-icon', description: '后置图标', type: 'string', default: '-' },
+]
+
+const eventHeaders = {
+  name: '事件名',
+  description: '说明',
+  type: '回调参数',
+  default: '-'
+}
+
+const buttonEvents = [
+  { name: 'click', description: '点击按钮时触发', type: 'MouseEvent', default: '-' },
+]
+</script>
+
+<style scoped lang="less">
+.component-page {
+  .page-header {
+    margin-bottom: 32px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  .page-title {
+    margin: 0 0 12px;
+    font-size: 28px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .page-description {
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.6;
+  }
+}
+</style>

package/examples/basic/button/basic.vue

@@ -0,0 +1,101 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="使用 type、variant 属性来定义按钮的样式。"
+  >
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button>Default</p-button>
+      <p-button type="primary">Primary</p-button>
+      <p-button type="success">Success</p-button>
+      <p-button type="info">Info</p-button>
+      <p-button type="danger">Danger</p-button>
+      <p-button type="warning">Warning</p-button>
+      <p-button type="cyan">Cyan</p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-button&gt;Default&lt;/p-button&gt;
+&lt;p-button type="primary"&gt;Primary&lt;/p-button&gt;
+&lt;p-button type="success"&gt;Success&lt;/p-button&gt;
+&lt;p-button type="info"&gt;Info&lt;/p-button&gt;
+&lt;p-button type="danger"&gt;Danger&lt;/p-button&gt;
+&lt;p-button type="warning"&gt;Warning&lt;/p-button&gt;
+&lt;p-button type="cyan"&gt;Cyan&lt;/p-button&gt;</code></pre>
+    </template>
+  </demo-block>
+
+  <demo-block 
+    title="Fantasy 风格" 
+    description="使用 variant='fantasy' 创建幻彩风格的按钮。"
+  >
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button variant="fantasy">Fantasy</p-button>
+      <p-button variant="fantasy" type="primary">Primary</p-button>
+      <p-button variant="fantasy" type="success">Success</p-button>
+      <p-button variant="fantasy" type="info">Info</p-button>
+      <p-button variant="fantasy" type="danger">Danger</p-button>
+      <p-button variant="fantasy" type="warning">Warning</p-button>
+      <p-button variant="fantasy" type="cyan">Cyan</p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-button variant="fantasy"&gt;Fantasy&lt;/p-button&gt;
+&lt;p-button variant="fantasy" type="primary"&gt;Primary&lt;/p-button&gt;
+&lt;p-button variant="fantasy" type="success"&gt;Success&lt;/p-button&gt;</code></pre>
+    </template>
+  </demo-block>
+
+  <demo-block 
+    title="空心按钮" 
+    description="使用 variant='empty' 创建空心按钮。"
+  >
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button status="round" variant="empty">Empty</p-button>
+      <p-button status="round" variant="empty" type="primary">Primary</p-button>
+      <p-button status="round" variant="empty" type="success">Success</p-button>
+      <p-button status="round" variant="empty" type="info">Info</p-button>
+      <p-button status="round" variant="empty" type="danger">Danger</p-button>
+      <p-button status="round" variant="empty" type="warning">Warning</p-button>
+      <p-button status="round" variant="empty" type="cyan">Cyan</p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-button variant="empty"&gt;Empty&lt;/p-button&gt;
+&lt;p-button variant="empty" type="primary"&gt;Primary&lt;/p-button&gt;
+&lt;p-button variant="empty" type="success"&gt;Success&lt;/p-button&gt;</code></pre>
+    </template>
+  </demo-block>
+
+  <demo-block 
+    title="圆形按钮" 
+    description="使用 status='circle' 创建圆形图标按钮。"
+  >
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button status="circle" prefix-icon="eye"></p-button>
+      <p-button status="circle" prefix-icon="edit" type="primary"></p-button>
+      <p-button status="circle" prefix-icon="user" type="success"></p-button>
+      <p-button status="circle" prefix-icon="collect" type="info"></p-button>
+      <p-button status="circle" prefix-icon="close" type="danger"></p-button>
+      <p-button status="circle" prefix-icon="upload" type="warning"></p-button>
+      <p-button status="circle" prefix-icon="download" type="cyan"></p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-button status="circle" prefix-icon="eye"&gt;&lt;/p-button&gt;
+&lt;p-button status="circle" prefix-icon="edit" type="primary"&gt;&lt;/p-button&gt;
+&lt;p-button status="circle" prefix-icon="user" type="success"&gt;&lt;/p-button&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+</script>
+
+<style scoped lang="less">
+.p-row {
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+}
+</style>

package/examples/basic/button/icon.vue

@@ -0,0 +1,32 @@
+<template>
+  <demo-block 
+    title="图标按钮" 
+    description="使用 prefix-icon 和 suffix-icon 属性来添加图标。"
+  >
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button prefix-icon="search" type="primary">Search</p-button>
+      <p-button suffix-icon="upload" type="success">Upload</p-button>
+      <p-button prefix-icon="edit">Edit</p-button>
+      <p-button prefix-icon="close" type="danger">Delete</p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-button prefix-icon="search" type="primary"&gt;Search&lt;/p-button&gt;
+&lt;p-button suffix-icon="upload" type="success"&gt;Upload&lt;/p-button&gt;
+&lt;p-button prefix-icon="edit"&gt;Edit&lt;/p-button&gt;
+&lt;p-button prefix-icon="close" type="danger"&gt;Delete&lt;/p-button&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+</script>
+
+<style scoped lang="less">
+.p-row {
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+}
+</style>

package/examples/basic/button/loading.vue

@@ -0,0 +1,65 @@
+<template>
+  <demo-block 
+    title="禁用状态" 
+    description="按钮不可用状态。"
+  >
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button disabled>Disabled</p-button>
+      <p-button disabled type="primary">Primary</p-button>
+      <p-button disabled type="success">Success</p-button>
+      <p-button disabled type="danger">Danger</p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-button disabled&gt;Disabled&lt;/p-button&gt;
+&lt;p-button disabled type="primary"&gt;Primary&lt;/p-button&gt;
+&lt;p-button disabled type="success"&gt;Success&lt;/p-button&gt;</code></pre>
+    </template>
+  </demo-block>
+
+  <demo-block 
+    title="加载中" 
+    description="点击按钮后进行数据加载操作，在按钮上显示加载状态。"
+  >
+    <p-row justify-content="flex-start" :gutter="10" wrap>
+      <p-button :loading="isLoading" type="primary" @click="isLoading = !isLoading">
+        {{ isLoading ? 'Loading...' : 'Click to Load' }}
+      </p-button>
+      <p-button loading type="success">Loading</p-button>
+      <p-button loading type="info">Loading</p-button>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;script setup&gt;
+import { ref } from 'vue'
+const isLoading = ref(false)
+&lt;/script&gt;
+
+&lt;template&gt;
+  &lt;p-button 
+    :loading="isLoading" 
+    type="primary" 
+    @click="isLoading = !isLoading"
+  &gt;
+    {{ isLoading ? 'Loading...' : 'Click to Load' }}
+  &lt;/p-button&gt;
+  &lt;p-button loading type="success"&gt;Loading&lt;/p-button&gt;
+&lt;/template&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import DemoBlock from "../../components/DemoBlock.vue";
+
+const isLoading = ref(false)
+</script>
+
+<style scoped lang="less">
+.p-row {
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+}
+</style>

package/examples/basic/icon/IconIndex.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Icon 图标</h1>
+      <p class="page-description">语义化的矢量图形，提供丰富的图标集合。</p>
+    </div>
+
+    <basic-icon />
+    <list-icon />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from "./basic.vue";
+import ListIcon from "./list.vue";
+</script>
+
+<style scoped lang="less">
+.component-page {
+  .page-header {
+    margin-bottom: 32px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  .page-title {
+    margin: 0 0 12px;
+    font-size: 28px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .page-description {
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.6;
+  }
+}
+</style>

package/examples/basic/icon/basic.vue

@@ -0,0 +1,34 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="使用 target 属性指定图标名称。"
+  >
+    <p-row justify-content="flex-start" :gutter="20" wrap>
+      <p-icon target="home" style="font-size: 32px;"></p-icon>
+      <p-icon target="edit" style="font-size: 32px;"></p-icon>
+      <p-icon target="add" style="font-size: 32px;"></p-icon>
+      <p-icon target="remove" style="font-size: 32px;"></p-icon>
+      <p-icon target="search" style="font-size: 32px;"></p-icon>
+      <p-icon target="user" style="font-size: 32px;"></p-icon>
+      <p-icon target="email" style="font-size: 32px;"></p-icon>
+      <p-icon target="loading" rotating style="font-size: 32px;"></p-icon>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-icon target="home"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="edit"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="add"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="loading" rotating&gt;&lt;/p-icon&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+</script>
+
+<style scoped lang="less">
+.p-row {
+  color: #606266;
+}
+</style>