hydros-login-page

Vue3 微信扫码登录组件，支持多项目复用。

安装

npm install hydros-login-page
# 或
pnpm add hydros-login-page

使用

1. 引入样式

在 main.ts 或入口文件中引入组件样式：

import 'hydros-login-page/style.css';

2. 使用组件

getState 已在组件内部实现，默认请求 /wxlogin/get_state：

<script setup>
import { HydrosLoginPage } from 'hydros-login-page';
</script>

<template>
  <HydrosLoginPage />
</template>

3. 完整配置示例

<script setup>
import { HydrosLoginPage } from 'hydros-login-page';
</script>

<template>
  <HydrosLoginPage
    api-base-url="https://your-api.com/engine/api/v1"
    get-state-path="/wxlogin/get_state"
    wx-app-id="wx949fdb28a1679160"
    wx-redirect-uri="https://your-domain.com/callback"
    login-title="登录到我的应用"
    brand-name="MY APP"
  />
</template>

4. 依赖说明

• Vue 3：peer dependency，需在项目中已安装
• Font Awesome（可选）：若使用默认品牌图标 fas fa-bolt，需在项目中引入 Font Awesome

<!-- 在 index.html 或 main.ts 中 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.x/css/all.min.css" />

Props

| 属性 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | apiBaseUrl | string | | '' | 获取 state 的接口 base URL，空则使用相对路径 | | getStatePath | string | | /wxlogin/get_state | 获取 state 的接口路径 | | wxAppId | string | | wx949fdb28a1679160 | 微信开放平台 AppID | | wxRedirectUri | string | | https://hydroos.cn/playground/ | 微信登录回调地址 | | qrExpiresIn | number | | 300 | 二维码过期时间（秒） | | loginTitle | string | | 登录到 Hydros | 登录标题 | | sloganBefore | string | | 先看 / | 标语前半部分 | | sloganHighlight | string | | 后跃。 | 标语高亮部分 | | brandName | string | | HYDROS | 品牌名称 | | brandIconClass | string | | fas fa-bolt | 品牌图标 CSS 类 | | loginTip | string | | 请使用微信扫码... | 登录提示（支持 HTML） | | agreementHtml | string | | 用户协议等 | 协议区域 HTML | | containerId | string | | hydros_login_container | 二维码容器 DOM id |

本地开发 / 未发布前使用

在包目录构建后，可在主项目中通过 npm link 或 workspace 引用：

cd packages/hydros-login-page
npm install
npm run build
npm link

在业务项目中：

npm link hydros-login-page

或在 package.json 中使用本地路径：

{
  "dependencies": {
    "hydros-login-page": "file:./packages/hydros-login-page"
  }
}

发布到 npm

cd packages/hydros-login-page
npm login
npm publish