JCJY Components

Vue 3 组件库，当前版本为纯 Vue 组件实现，不依赖 Element Plus 与 TailwindCSS。

安装

npm install jcjy-components
# 或
pnpm add jcjy-components
# 或
yarn add jcjy-components

依赖要求

• Vue 3.0+

使用方法

1. 插件方式（推荐）

import { createApp } from "vue";
import App from "./App.vue";
import JcjyComponents from "jcjy-components";
import "jcjy-components/style.css";

const app = createApp(App);
app.use(JcjyComponents);
app.mount("#app");

2. 按需导入组件

import { AuthGateway } from "jcjy-components";
import "jcjy-components/style.css";

export default {
  components: {
    AuthGateway,
  },
};

TypeScript 支持

本库已内置类型声明，TS 项目可直接获得类型提示。

import type { AuthGatewayConfig } from "jcjy-components";

样式说明

• 请在宿主项目入口显式引入：import 'jcjy-components/style.css'
• 虽然组件已脱离 TailwindCSS 与 Element Plus，但样式仍会打包到 dist/jcjy-components.css
• 因此接入方仍必须引入：import 'jcjy-components/style.css'
• 不需要额外引入第三方 UI 样式库

组件列表

AuthGateway 认证网关

统一的认证组件，支持多种登录方式。

<template>
  <AuthGateway
    :config="config"
    :binding="binding"
    :login="login"
    :register="register"
    :wechat-config="wechatConfig"
  />
</template>

AuthGatewayConfig 中与登录页展示相关的行为：

• loginBackground 传值时，组件按该图片渲染登录页背景；若同时传 nb: "1"，则不显示背景图。
• loginBackground 不传或传空字符串时，组件不再使用内置默认图，而是显示内置的侧边宣传文案区。
• layout 仍支持 default、center、left，用于控制认证区在不同布局下的位置。

普通账号登录默认展示“记住我”：

• 勾选后登录，组件会把账号和原始密码保存到浏览器 localStorage，下次进入登录页自动回填。
• 未勾选登录时，组件会清理已保存的账号和密码。
• 保存时会对账号和密码做基于 charCodeAt 的可逆字符编码混淆，避免在 localStorage 中直接显示明文；该方式不等同安全加密，不能抵御同源脚本读取或有代码访问权限的人还原。

主题工具

import { theme } from "jcjy-components";

// 设置主题
await theme.setTheme("#409EFF");

// 根据 URL 参数设置主题
await theme.setThemeByUrl();

产物说明

发布包默认包含以下关键文件：

• dist/index.es.js（ESM）
• dist/index.umd.cjs（CJS）
• dist/jcjy-components.css（样式）
• dist/index.d.ts（类型声明）

注意事项

1. 宿主项目需要自行安装 vue（peerDependencies）
2. 当前版本无需安装 tailwindcss 与 element-plus
3. 若发布到 npm，请使用：pnpm push:npm

许可证

MIT License