pcl-mob-design

通信行业专属 Vue 3 组件库，包含网络配置、设备管理、诊断工具等场景常用组件，基于 Element Plus 开发。

✨ 特性

• 🎯 场景化：针对通信行业常见交互场景设计，开箱即用
• 🎨 统一风格：基于 Element Plus，视觉风格统一
• ⌨️ 体验优秀：参考操作系统原生交互，符合运维人员使用习惯
• 🔧 TypeScript 支持：完整的类型定义
• 📦 按需引入：支持 ES Module 按需引入

📦 安装

npm install pcl-mob-design element-plus

yarn add pcl-mob-design element-plus

🚀 使用

全量引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import PclMobDesign from 'pcl-mob-design'
import 'pcl-mob-design/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(PclMobDesign)
app.mount('#app')

按需引入

<template>
  <PmIpSegmentInput v-model="ip" />
  <PmSubnetMaskInput v-model="mask" />
</template>

<script setup lang="ts">
import { PmIpSegmentInput, PmSubnetMaskInput } from 'pcl-mob-design'
import { ref } from 'vue'

const ip = ref('192.168.1.1')
const mask = ref('255.255.255.0')
</script>

🧩 组件列表

基础通用组件

| 组件名 | 说明 | |--------|------| | PmButton | 按钮组件 | | PmInput | 输入框组件 | | PmInputNumber | 数字输入框组件 | | PmSelect | 下拉选择器组件 | | PmYamlEditor | YAML 编辑器 | | PmIpSegmentInput | IPv4分段输入框（Windows系统风格） | | PmIpv6AddressInput | IPv6地址分段输入框 | | PmIpCalculator | IP地址计算器 | | PmMacVendorLookup | MAC地址厂商查询 | | PmAsNumberInput | AS号输入框 | | PmSignalStrength | 信号强度显示 | | PmOpticalPower | 光功率显示 |

网络配置类

| 组件名 | 说明 | |--------|------| | PmIpPortInput | IP+端口组合输入 | | PmSubnetMaskInput | 子网掩码输入 | | PmVlanConfig | VLAN 配置 | | PmFirewallRule | 防火墙规则 | | PmStaticRouteInput | 静态路由配置 |

设备管理类

| 组件名 | 说明 | |--------|------| | PmMacAddressInput | MAC 地址输入 | | PmDeviceStatusBadge | 设备状态标签 | | PmSystemLogViewer | 系统日志查看器 |

诊断工具类

| 组件名 | 说明 | |--------|------| | PmPingTest | Ping 测试工具 | | PmTraceroute | 路由追踪 | | PmSpeedTest | 带宽测速 |

监控展示类

| 组件名 | 说明 | |--------|------| | PmAlarmList | 告警列表 | | PmPortStatus | 端口状态 | | PmRealTimeChart | 实时图表 | | PmTrafficGauge | 流量仪表盘 | | PmMiniTopology | 迷你网络拓扑图 |

无线相关

| 组件名 | 说明 | |--------|------| | PmWifiScan | WIFI 扫描 | | PmClientList | 关联客户端列表 |

📄 文档

在线文档

⌨️ 开发

# 安装依赖
npm install

# 启动开发服务（文档站点）
npm run dev

# 类型检查
npm run type-check

# 构建文档站点
npm run build

# 构建NPM包
npm run build:lib

📝 License

MIT