zhuoyi-ui

Zhuoyi UI

Zhuoyi UI 是一个基于 Vue 3、TypeScript 和 Element Plus 的业务组件库，封装了常用基础组件、带接口能力的业务组件、主题切换、语言切换、请求注入和常用指令。

安装

npm install zhuoyi-ui

同时请在业务项目中安装并配置以下 peer dependencies：

npm install vue element-plus pinia vue-i18n vue-router

快速开始

全量注册

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import ZhuoyiUI from 'zhuoyi-ui';
import 'zhuoyi-ui/style.css';
import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);
app.use(ZhuoyiUI);
app.mount('#app');

按需使用

<script setup lang="ts">
import { ref } from 'vue';
import { ZyButtonNav, ZyCascader } from 'zhuoyi-ui';
import 'zhuoyi-ui/style.css';

const active = ref('left');
const area = ref(['resource', 'media']);
const options = [
  {
    value: 'resource',
    label: '资源管理',
    children: [
      { value: 'media', label: '媒体库' },
      { value: 'map', label: '地图服务' },
    ],
  },
];
</script>

<template>
  <ZyButtonNav type="left" :actived="active === 'left'" @click="active = 'left'">
    左侧导航
  </ZyButtonNav>

  <ZyCascader v-model:value="area" :options="options" clearable />
</template>

能力概览

• 基础组件：ZyButtonNav、ZyPrettyBtn、ZyStyleBtn、ZyBaseBtn、ZyIcon、ZyPopover、ZyFloatPanel、ZyDialogBase、ZyTimeLable、ZyCascader、ZyTable、ZyPagination、ZySelectSigle、ZySelectMultiple、ZyNavBase、ZyBlockTitle、ZyBlockLayout 等。
• 业务组件：ZyNavHome、ZyNoticeData、ZyNoticeDetailData、ZyUserOperate。
• Hooks：useTheme、useLanguage、useNamespace。
• 工具：setRequest、getRequest、apiClient、pxToRem、convertStylesToRem。
• 指令：dragDirective、permissionDirective、smoothScrollDirective。

请求注入

带接口能力的组件不会强绑定业务项目的请求封装。请在应用初始化时通过 setRequest 注入请求实例：

import { createApp } from 'vue';
import ZhuoyiUI, { setRequest } from 'zhuoyi-ui';
import request from '@/utils/request';
import App from './App.vue';

setRequest(request);

createApp(App).use(ZhuoyiUI).mount('#app');

注入的 request 可以是 axios 实例，也可以是兼容 axios 调用方式的请求函数。鉴权、错误提示、baseURL 和拦截器由业务项目统一维护。

主题与语言

组件库内置 blue 和 green 两套主题，可通过 useTheme 切换；内置中文和英文语言包，可通过 useLanguage 切换。

import { useLanguage, useTheme } from 'zhuoyi-ui';

const { currentTheme, setTheme, toggleTheme } = useTheme();
const { currentLanguage, setLanguage, toggleLanguage } = useLanguage();

本地开发

pnpm install
pnpm run dev
pnpm run docs:dev

构建与发布

pnpm run build
npm publish

发布前请确认：

• package.json 中的 version 已更新。
• 已执行 pnpm run build，并确认 dist 产物正常。
• 已登录正确的 npm 账号：npm whoami。

License

MIT