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

package/examples/basic/icon/list.vue

@@ -0,0 +1,104 @@
+<template>
+  <demo-block 
+    title="图标集合" 
+    description="点击图标可复制图标名称。"
+  >
+    <div class="icon-list">
+      <div
+        class="icon-item"
+        v-for="item in iconList" 
+        :key="item"
+        @click="handleClick(item)"
+      >
+        <p-icon :target="item" :rotating="item === 'loading'" class="icon-icon"></p-icon>
+        <span class="icon-name">{{ item }}</span>
+      </div>
+    </div>
+
+    <template #code>
+      <pre><code>&lt;p-icon target="success"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="danger"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="warning"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="email"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="user"&gt;&lt;/p-icon&gt;
+&lt;p-icon target="home"&gt;&lt;/p-icon&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+import { message } from "@bin-ui/components";
+
+const iconList = [
+  'success', 'danger', 'warning', 'info',
+  'minus-circle', 'minus-bold',
+  'top', 'top-1', 'top-2',
+  'right', 'right-1', 'right-2',
+  'bottom', 'bottom-1', 'bottom-2',
+  'left', 'left-1', 'left-2',
+  'email', 'email-1', 'logout', 'remove',
+  'edit', 'user', 'user-1', 'loading',
+  'eye', 'other', 'tag', 'time',
+  'collect', 'collect-1', 'home',
+  'download', 'upload', 'close',
+]
+
+const handleClick = (target: string) => {
+  navigator.clipboard.writeText(target);
+  message({
+    type: 'success',
+    text: `已复制: ${target}`,
+    timeout: 1500
+  })
+}
+</script>
+
+<style scoped lang="less">
+.icon-list {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 1px;
+  background: #e4e7ed;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.icon-item {
+  height: 100px;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  user-select: none;
+
+  &:hover {
+    background: #ecf5ff;
+    color: #409eff;
+
+    .icon-icon {
+      color: #409eff;
+      transform: scale(1.2);
+    }
+  }
+
+  .icon-icon {
+    font-size: 28px;
+    color: #606266;
+    margin-bottom: 8px;
+    transition: all 0.3s;
+  }
+
+  .icon-name {
+    font-size: 12px;
+    color: #909399;
+    text-align: center;
+    padding: 0 4px;
+  }
+}
+</style>

package/examples/components/ApiTable.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="api-section">
+    <h2 class="api-title">{{ title }}</h2>
+    <div class="api-table-wrapper">
+      <table class="api-table">
+        <thead>
+          <tr>
+            <th>{{ headers.name || '属性名' }}</th>
+            <th>{{ headers.description || '说明' }}</th>
+            <th>{{ headers.type || '类型' }}</th>
+            <th>{{ headers.default || '默认值' }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in data" :key="index">
+            <td><code>{{ item.name }}</code></td>
+            <td>{{ item.description }}</td>
+            <td><code class="type">{{ item.type }}</code></td>
+            <td><code class="default">{{ item.default }}</code></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ApiItem {
+  name: string
+  description: string
+  type: string
+  default: string
+}
+
+interface Headers {
+  name?: string
+  description?: string
+  type?: string
+  default?: string
+}
+
+const props = withDefaults(defineProps<{
+  title: string
+  data: ApiItem[]
+  headers?: Headers
+}>(), {
+  headers: () => ({})
+})
+</script>
+
+<style scoped lang="less">
+.api-section {
+  margin-top: 48px;
+  padding-top: 32px;
+  border-top: 1px solid #e4e7ed;
+}
+
+.api-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 24px;
+}
+
+.api-table-wrapper {
+  overflow-x: auto;
+}
+
+.api-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 14px;
+
+  thead {
+    background: #f5f7fa;
+
+    th {
+      padding: 12px 16px;
+      text-align: left;
+      font-weight: 600;
+      color: #303133;
+      border-bottom: 1px solid #e4e7ed;
+      white-space: nowrap;
+
+      &:not(:last-child) {
+        border-right: 1px solid #e4e7ed;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      transition: background 0.2s;
+
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #e4e7ed;
+      }
+
+      td {
+        padding: 12px 16px;
+        color: #606266;
+        line-height: 1.6;
+
+        &:not(:last-child) {
+          border-right: 1px solid #e4e7ed;
+        }
+
+        code {
+          padding: 2px 6px;
+          background: #f5f7fa;
+          border: 1px solid #e4e7ed;
+          border-radius: 3px;
+          font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+          font-size: 13px;
+
+          &.type {
+            color: #409eff;
+          }
+
+          &.default {
+            color: #67c23a;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/examples/components/DemoBlock.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="demo-block">
+    <div class="demo-block__title" v-if="title">
+      {{ title }}
+    </div>
+    <div class="demo-block__description" v-if="description">
+      {{ description }}
+    </div>
+    <div class="demo-block__content">
+      <slot />
+    </div>
+    <div class="demo-block__footer" v-if="$slots.code">
+      <div class="demo-block__control" @click="showCode = !showCode">
+        <span>{{ showCode ? '隐藏代码' : '显示代码' }}</span>
+        <i :class="showCode ? 'arrow-up' : 'arrow-down'"></i>
+      </div>
+      <transition name="code-slide">
+        <div class="demo-block__code" v-show="showCode">
+          <slot name="code" />
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  title?: string
+  description?: string
+}>()
+
+const showCode = ref(false)
+</script>
+
+<style scoped lang="less">
+.demo-block {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  margin-bottom: 24px;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #303133;
+    padding: 20px 24px 0;
+    margin-bottom: 12px;
+  }
+
+  &__description {
+    font-size: 14px;
+    color: #606266;
+    padding: 0 24px;
+    margin-bottom: 16px;
+    line-height: 1.6;
+  }
+
+  &__content {
+    padding: 24px;
+    border-top: 1px solid #f5f7fa;
+  }
+
+  &__footer {
+    border-top: 1px solid #e4e7ed;
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px;
+    cursor: pointer;
+    color: #606266;
+    font-size: 14px;
+    transition: all 0.3s;
+    user-select: none;
+
+    &:hover {
+      background: #f5f7fa;
+      color: #409eff;
+    }
+
+    .arrow-up,
+    .arrow-down {
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+    }
+
+    .arrow-down {
+      border-top: 5px solid currentColor;
+    }
+
+    .arrow-up {
+      border-bottom: 5px solid currentColor;
+    }
+  }
+
+  &__code {
+    border-top: 1px solid #e4e7ed;
+    background: #fafafa;
+    overflow: hidden;
+
+    :deep(pre) {
+      margin: 0;
+      padding: 20px;
+      overflow-x: auto;
+      background: transparent;
+      
+      code {
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        color: #303133;
+      }
+    }
+  }
+}
+
+.code-slide-enter-active,
+.code-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.code-slide-enter-from,
+.code-slide-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+.code-slide-enter-to,
+.code-slide-leave-from {
+  max-height: 800px;
+  opacity: 1;
+}
+</style>

package/examples/components/page-styles.less

@@ -0,0 +1,22 @@
+/* 通用组件页面样式 */
+.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;
+  }
+}

package/examples/data/badge/BadgeIndex.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Badge 徽章</h1>
+      <p class="page-description">出现在按钮、图标旁的数字或状态标记。</p>
+    </div>
+
+    <basic-badge />
+    <max-badge />
+    <use-badge />
+    <variant-badge />
+
+    <api-table title="Badge Props" :data="badgeProps" />
+    <api-table title="Badge Methods" :data="badgeMethods" :headers="methodHeaders" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicBadge from "./basic.vue";
+import MaxBadge from "./max.vue";
+import UseBadge from "./use.vue";
+import VariantBadge from "./variant.vue";
+import ApiTable from "../../components/ApiTable.vue";
+
+const badgeProps = [
+  { name: 'value', description: '徽章显示值', type: 'string | number', default: '-' },
+  { name: 'maxvalue', description: '最大值，超过显示为 maxvalue+', type: 'string | number', default: '-' },
+  { name: 'type', description: '徽章类型', type: "'primary' | 'success' | 'info' | 'warning' | 'danger' | 'cyan'", default: 'danger' },
+  { name: 'variant', description: '徽章风格', type: "'dot' | 'text'", default: 'text' },
+  { name: 'hidden', description: '是否隐藏徽章', type: 'boolean', default: 'false' },
+]
+
+const methodHeaders = {
+  name: '方法名',
+  description: '说明',
+  type: '参数',
+  default: '返回值'
+}
+
+const badgeMethods = [
+  { name: 'hidden', description: '隐藏徽章', type: '-', default: '-' },
+  { name: 'show', description: '显示徽章', type: '-', default: '-' },
+  { name: 'setTxt', description: '设置徽章文本', type: 'text: string | number', default: '-' },
+  { name: 'stop', description: '移除徽章元素', type: '-', 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/data/badge/basic.vue

@@ -0,0 +1,45 @@
+<template>
+  <demo-block 
+    title="基础用法" 
+    description="展示新消息数量。定义 value 属性，它接受 Number 或者 String。"
+  >
+    <p-row justify-content="flex-start" :gutter="30">
+      <p-badge :value="12">
+        <p-button>Comments</p-button>
+      </p-badge>
+
+      <p-badge value="new" type="success">
+        <p-button>Reply</p-button>
+      </p-badge>
+
+      <p-badge :value="12" type="info">
+        <p-button>Messages</p-button>
+      </p-badge>
+
+      <p-badge type="warning">
+        <p-button>Notice</p-button>
+      </p-badge>
+    </p-row>
+
+    <template #code>
+      <pre><code>&lt;p-badge :value="12"&gt;
+  &lt;p-button&gt;Comments&lt;/p-button&gt;
+&lt;/p-badge&gt;
+
+&lt;p-badge value="new" type="success"&gt;
+  &lt;p-button&gt;Reply&lt;/p-button&gt;
+&lt;/p-badge&gt;
+
+&lt;p-badge :value="12" type="info"&gt;
+  &lt;p-button&gt;Messages&lt;/p-button&gt;
+&lt;/p-badge&gt;</code></pre>
+    </template>
+  </demo-block>
+</template>
+
+<script setup lang="ts">
+import DemoBlock from "../../components/DemoBlock.vue";
+</script>
+
+<style scoped lang="less">
+</style>

package/examples/data/badge/max.vue

@@ -0,0 +1,32 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="25">
+    <p-button @click="foo">click me</p-button>
+    <p-badge :value="num">
+      <p-button>default</p-button>
+    </p-badge>
+
+    <p-badge :value="num" maxvalue="110">
+      <p-button>default</p-button>
+    </p-badge>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const num = ref(90);
+
+const foo = () => num.value++;
+
+</script>
+
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+
+
+

package/examples/data/badge/use.vue

@@ -0,0 +1,32 @@
+<template>
+  <p-row justify-content="flex-start" :gutter="25">
+    <p-button ref="btn" @click="foo">click me</p-button>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import {useBadge} from "@bin-ui/hooks";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+
+const btn = ref(null);
+const value = ref(90);
+
+const badge = useBadge(btn, {
+  value
+});
+
+const foo = () => {
+  value.value++;
+}
+
+</script>
+
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+
+

package/examples/data/badge/variant.vue

@@ -0,0 +1,79 @@
+<template>
+	<p-row justify-content="flex-start" :gutter="25">
+		<p-badge value="new">
+			<p-button>default</p-button>
+		</p-badge>
+		<p-badge value="new" type="success">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="info">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="warning">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="danger">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="cyan">
+			<p-button>comments</p-button>
+		</p-badge>
+	</p-row>
+	<p-row justify-content="flex-start" :gutter="25">
+		<p-badge value="new" variant="fantasy">
+			<p-button>default</p-button>
+		</p-badge>
+		<p-badge value="new" type="success" variant="fantasy">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="info" variant="fantasy">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="warning" variant="fantasy">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="danger" variant="fantasy">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="cyan" variant="fantasy">
+			<p-button>comments</p-button>
+		</p-badge>
+	</p-row>
+	<p-row justify-content="flex-start" :gutter="25">
+		<p-badge value="new" variant="empty">
+			<p-button>default</p-button>
+		</p-badge>
+		<p-badge value="new" type="success" variant="empty">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="info" variant="empty">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="warning" variant="empty">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="danger" variant="empty">
+			<p-button>comments</p-button>
+		</p-badge>
+		<p-badge value="new" type="cyan" variant="empty">
+			<p-button>comments</p-button>
+		</p-badge>
+	</p-row>
+
+</template>
+
+<script setup lang="ts">
+
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PBadge from "@bin-ui/components/badge/src/badge.vue";
+</script>
+
+<style scoped lang="less">
+.p-row {
+  margin-bottom: 20px;
+}
+</style>
+
+
+