@vjsplus-j/v-ui

🎨 基于 Element Plus 的 Vue 3 UI 组件库 - 深度定制的暗黑主题组件

✨ 特性

• 🌑 深度暗黑主题 - 基于 galaxy-styles 的极致暗黑风格
• 💜 粉紫色主题 - 鲜艳的粉紫色主题色
• 🎯 Element Plus 封装 - 深度定制 Element Plus 组件
• 📦 开箱即用 - 完整的类型定义和样式
• 🔧 高度可定制 - 灵活的配置选项
• 🚀 TypeScript - 完整的 TypeScript 支持

📦 安装

npm install @vjsplus-j/v-ui
# or
yarn add @vjsplus-j/v-ui
# or
pnpm add @vjsplus-j/v-ui

🚀 快速开始

完整引入

import { createApp } from 'vue'
import VUI from '@vjsplus-j/v-ui'
import '@vjsplus-j/v-ui/dist/v-ui.css'
import App from './App.vue'

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

按需引入

import { VButton, VInput } from '@vjsplus-j/v-ui'
import '@vjsplus-j/v-ui/dist/v-ui.css'

💡 使用示例

VInput 输入框

<template>
  <!-- 基础用法 -->
  <v-input v-model="username" placeholder="Enter username">
    <template #prefix>
      <el-icon><User /></el-icon>
    </template>
  </v-input>

  <!-- 密码输入框 -->
  <v-input 
    v-model="password" 
    type="password"
    show-password
    placeholder="Enter password"
  >
    <template #prefix>
      <el-icon><Lock /></el-icon>
    </template>
  </v-input>

  <!-- 可清空 -->
  <v-input v-model="value" clearable placeholder="可清空" />
</template>

<script setup>
import { ref } from 'vue'
import { VInput } from '@vjsplus-j/v-ui'
import { User, Lock } from '@element-plus/icons-vue'

const username = ref('')
const password = ref('')
const value = ref('')
</script>

VButton 按钮

<template>
  <v-button type="primary">登录</v-button>
  <v-button type="success">成功</v-button>
  <v-button type="warning">警告</v-button>
  <v-button type="danger">危险</v-button>
</template>

VLink 链接

<template>
  <!-- 登录页面示例 -->
  <div class="login-footer">
    <span>Don't have an account?</span>
    <v-link type="primary" @click="handleSignUp">Sign Up</v-link>
  </div>
</template>

<script setup>
const handleSignUp = () => {
  router.push('/register')
}
</script>

📚 组件列表

基础组件

• [x] VButton - 按钮（粉紫色渐变 + 光晕）
• [x] VInput - 输入框（深蓝黑背景 + 紫色边框）
• [x] VLink - 链接（粉紫色 + 点击事件）
• [ ] VSelect - 选择器
• [ ] VSwitch - 开关
• [ ] VRadio - 单选框
• [ ] VCheckbox - 复选框

表单组件

• [ ] VForm - 表单
• [ ] VFormItem - 表单项
• [ ] VDatePicker - 日期选择器
• [ ] VTimePicker - 时间选择器

数据展示

• [ ] VTable - 表格
• [ ] VPagination - 分页
• [ ] VCard - 卡片
• [ ] VTag - 标签

反馈组件

• [ ] VDialog - 对话框
• [ ] VMessage - 消息提示
• [ ] VNotification - 通知
• [ ] VLoading - 加载

导航组件

• [ ] VMenu - 菜单
• [ ] VTabs - 标签页
• [ ] VBreadcrumb - 面包屑
• [ ] VDropdown - 下拉菜单

🎨 主题定制

V-UI 使用 @vjsplus-j/galaxy-styles 作为基础样式库，支持完整的主题定制。

颜色系统

// 主题色
$primary: #d946ef;  // 粉紫色
$success: #66bb6a;  // 绿色
$warning: #ffa726;  // 橙色
$danger: #ef5350;   // 红色
$info: #78909c;     // 灰蓝色

// 背景色
$bg-base: #050810;      // 深蓝黑
$bg-elevated: #0a0e27;  // 稍亮
$bg-overlay: #0f1729;   // 中等

📖 文档

完整文档请访问：https://vjsplus.github.io/v-ui

🤝 贡献

欢迎贡献代码！请查看 贡献指南

📄 许可证

MIT License

Copyright © 2025 李飞恒. All rights reserved.

🔗 相关项目

• @vjsplus-j/vue-starfall - Vue 3 星空主题背景组件库
• @vjsplus-j/galaxy-styles - 星空主题样式库