@vsoft_liu/components

VsoftLiu Vue 3 组件库。

组件

| 组件 | 说明 | |------|------| | VsoftFlex | 布局组件：header / main / footer 三段式，支持折叠、拖拽分割线、水平/垂直方向 | | VsoftTab | 选项卡组件：梯形标签样式，支持 top / bottom / left / right 四个位置 | | VsoftTabPanel | 选项卡面板：配合 VsoftTab 使用 |

安装

pnpm add @vsoft_liu/components

依赖私有 registry http://192.168.4.15:4873/。项目 .npmrc 需配置（registry 匿名访问会 401，token 行必须有）：

@vsoft_liu:registry=http://192.168.4.15:4873/
//192.168.4.15:4873/:_authToken=<token>

使用

按需引入

import { VsoftFlex, VsoftTab, VsoftTabPanel } from '@vsoft_liu/components'
import '@vsoft_liu/components/styles' // 样式需显式引入

全量注册（插件方式）

import { createApp } from 'vue'
import VsoftComponents from '@vsoft_liu/components'
import '@vsoft_liu/components/styles' // 样式需显式引入

app.use(VsoftComponents)

VsoftFlex 示例

<template>
  <VsoftFlex direction="vertical" :header-size="60" footer-size="60px" resizable>
    <template #header>头部</template>
    主体内容
    <template #footer>尾部</template>
  </VsoftFlex>
</template>

VsoftTab 示例

<template>
  <VsoftTab v-model="active" :tabs="tabs" tab-position="top">
    <VsoftTabPanel v-for="tab in tabs" :key="tab.name" :name="tab.name" :label="tab.label">
      {{ tab.name }} 内容
    </VsoftTabPanel>
  </VsoftTab>
</template>

开发

pnpm install    # 安装依赖
pnpm build      # 构建（prebuild 自动 patch 版本 +1 → vite 打包 → 类型声明）
pnpm publish    # 发布到私有 registry

构建产物（dist/）

dist/
├── vsoft-components.js    # ESM
├── vsoft-components.cjs   # CJS
├── vsoft-components.css   # 样式
└── *.d.ts                 # 类型声明