iProbe/otpm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

beta

Browse source
This commit is contained in:
“xHuPo” 2025-05-23 18:57:11 +08:00
parent a45ddf13d5
commit bcd986e3f7
46 changed files with 6166 additions and 454 deletions
Download patch file Download diff file Expand all files Collapse all files

48
miniprogram-example/pages/login/login.js Normal file
View file

@ -0,0 +1,48 @@
// login.js
import { wxLogin } from '../../services/auth';
Page({
data: {
loading: false
},
onLoad() {
// 页面加载时检查是否已经登录
const token = wx.getStorageSync('token');
if (token) {
this.redirectToHome();
}
},
// 处理登录按钮点击
handleLogin() {
if (this.data.loading) return;
this.setData({ loading: true });
wxLogin()
.then(() => {
wx.showToast({
title: '登录成功',
icon: 'success'
});
this.redirectToHome();
})
.catch(err => {
wx.showToast({
title: err.message || '登录失败',
icon: 'none'
});
})
.finally(() => {
this.setData({ loading: false });
});
},
// 跳转到首页
redirectToHome() {
wx.reLaunch({
url: '/pages/otp-list/index'
});
}
});

3
miniprogram-example/pages/login/login.json Normal file
View file

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

30
miniprogram-example/pages/login/login.wxml Normal file
View file

@ -0,0 +1,30 @@
<!-- login.wxml -->
<view class="container">
<view class="logo-container">
<image class="logo" src="/assets/images/logo.png" mode="aspectFit"></image>
<text class="app-name">OTPM 小程序</text>
</view>
<view class="login-container">
<text class="login-title">欢迎使用 OTPM</text>
<text class="login-subtitle">一次性密码管理工具</text>
<button
class="login-button {{loading ? 'loading' : ''}}"
type="primary"
bindtap="handleLogin"
disabled="{{loading}}"
>
<text wx:if="{{!loading}}">微信一键登录</text>
<view wx:else class="loading-container">
<view class="loading-icon"></view>
<text>登录中...</text>
</view>
</button>
<view class="privacy-policy">
<text>登录即表示您同意</text>
<navigator url="/pages/privacy/index" class="policy-link">《隐私政策》</navigator>
</view>
</view>
</view>

97
miniprogram-example/pages/login/login.wxss Normal file
View file

@ -0,0 +1,97 @@
/* login.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
padding: 60rpx 40rpx;
box-sizing: border-box;
background-color: #f8f8f8;
}
.logo-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 80rpx;
}
.logo {
width: 180rpx;
height: 180rpx;
margin-bottom: 20rpx;
}
.app-name {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.login-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100rpx;
}
.login-title {
font-size: 48rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.login-subtitle {
font-size: 28rpx;
color: #666;
margin-bottom: 80rpx;
}
.login-button {
width: 80%;
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
.login-button.loading {
background-color: #8cc4ff;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
}
.loading-icon {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
border: 4rpx solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.privacy-policy {
margin-top: 40rpx;
font-size: 24rpx;
color: #999;
}
.policy-link {
color: #1890ff;
display: inline;
}

169
miniprogram-example/pages/otp-add/index.js Normal file
View file

@ -0,0 +1,169 @@
// otp-add/index.js
import { createOTP } from '../../services/otp';
Page({
data: {
form: {
name: '',
issuer: '',
secret: '',
algorithm: 'SHA1',
digits: 6,
period: 30
},
algorithms: ['SHA1', 'SHA256', 'SHA512'],
digitOptions: [6, 8],
periodOptions: [30, 60],
submitting: false,
scanMode: false
},
// 处理输入变化
handleInputChange(e) {
const { field } = e.currentTarget.dataset;
const { value } = e.detail;
this.setData({
[`form.${field}`]: value
});
},
// 处理选择器变化
handlePickerChange(e) {
const { field } = e.currentTarget.dataset;
const { value } = e.detail;
const options = this.data[`${field}Options`] || this.data[field];
const selectedValue = options[value];
this.setData({
[`form.${field}`]: selectedValue
});
},
// 扫描二维码
handleScanQRCode() {
this.setData({ scanMode: true });
wx.scanCode({
scanType: ['qrCode'],
success: (res) => {
try {
// 解析otpauth://协议的URL
const url = res.result;
if (url.startsWith('otpauth://totp/')) {
const parsedUrl = new URL(url);
const path = parsedUrl.pathname.substring(1); // 移除开头的斜杠
// 解析路径中的issuer和name
let issuer = '';
let name = path;
if (path.includes(':')) {
const parts = path.split(':');
issuer = parts[0];
name = parts[1];
}
// 从查询参数中获取其他信息
const secret = parsedUrl.searchParams.get('secret') || '';
const algorithm = parsedUrl.searchParams.get('algorithm') || 'SHA1';
const digits = parseInt(parsedUrl.searchParams.get('digits') || '6');
const period = parseInt(parsedUrl.searchParams.get('period') || '30');
// 如果查询参数中有issuer，优先使用
if (parsedUrl.searchParams.get('issuer')) {
issuer = parsedUrl.searchParams.get('issuer');
}
this.setData({
form: {
name,
issuer,
secret,
algorithm,
digits,
period
}
});
wx.showToast({
title: '二维码解析成功',
icon: 'success'
});
} else {
wx.showToast({
title: '不支持的二维码格式',
icon: 'none'
});
}
} catch (err) {
wx.showToast({
title: '二维码解析失败',
icon: 'none'
});
}
},
fail: () => {
wx.showToast({
title: '扫描取消',
icon: 'none'
});
},
complete: () => {
this.setData({ scanMode: false });
}
});
},
// 提交表单
handleSubmit() {
const { form } = this.data;
// 表单验证
if (!form.name) {
wx.showToast({
title: '请输入名称',
icon: 'none'
});
return;
}
if (!form.secret) {
wx.showToast({
title: '请输入密钥',
icon: 'none'
});
return;
}
this.setData({ submitting: true });
createOTP(form)
.then(() => {
wx.showToast({
title: '添加成功',
icon: 'success'
});
// 返回上一页
setTimeout(() => {
wx.navigateBack();
}, 1500);
})
.catch(err => {
wx.showToast({
title: err.message || '添加失败',
icon: 'none'
});
})
.finally(() => {
this.setData({ submitting: false });
});
},
// 取消
handleCancel() {
wx.navigateBack();
}
});

3
miniprogram-example/pages/otp-add/index.json Normal file
View file

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

119
miniprogram-example/pages/otp-add/index.wxml Normal file
View file

@ -0,0 +1,119 @@
<!-- otp-add/index.wxml -->
<view class="container">
<view class="header">
<text class="title">添加OTP</text>
</view>
<view class="form-container">
<view class="form-group">
<text class="form-label">名称 <text class="required">*</text></text>
<input
class="form-input"
placeholder="请输入OTP名称"
value="{{form.name}}"
bindinput="handleInputChange"
data-field="name"
/>
</view>
<view class="form-group">
<text class="form-label">发行方</text>
<input
class="form-input"
placeholder="请输入发行方名称"
value="{{form.issuer}}"
bindinput="handleInputChange"
data-field="issuer"
/>
</view>
<view class="form-group">
<text class="form-label">密钥 <text class="required">*</text></text>
<view class="secret-input-container">
<input
class="form-input"
placeholder="请输入密钥或扫描二维码"
value="{{form.secret}}"
bindinput="handleInputChange"
data-field="secret"
/>
<view class="scan-button" bindtap="handleScanQRCode" wx:if="{{!scanMode}}">
<text class="scan-icon">🔍</text>
</view>
<view class="scanning-indicator" wx:else>
<view class="scanning-spinner"></view>
</view>
</view>
</view>
<view class="form-group">
<text class="form-label">算法</text>
<picker
mode="selector"
range="{{algorithms}}"
value="{{algorithms.indexOf(form.algorithm)}}"
bindchange="handlePickerChange"
data-field="algorithm"
>
<view class="picker-view">
<text>{{form.algorithm}}</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view>
<view class="form-row">
<view class="form-group half">
<text class="form-label">位数</text>
<picker
mode="selector"
range="{{digitOptions}}"
value="{{digitOptions.indexOf(form.digits)}}"
bindchange="handlePickerChange"
data-field="digits"
>
<view class="picker-view">
<text>{{form.digits}}</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view>
<view class="form-group half">
<text class="form-label">周期(秒)</text>
<picker
mode="selector"
range="{{periodOptions}}"
value="{{periodOptions.indexOf(form.period)}}"
bindchange="handlePickerChange"
data-field="period"
>
<view class="picker-view">
<text>{{form.period}}</text>
<text class="picker-arrow">▼</text>
</view>
</picker>
</view>
</view>
</view>
<view class="button-group">
<button
class="cancel-button"
bindtap="handleCancel"
disabled="{{submitting}}"
>取消</button>
<button
class="submit-button {{submitting ? 'loading' : ''}}"
bindtap="handleSubmit"
disabled="{{submitting}}"
>
<text wx:if="{{!submitting}}">保存</text>
<view wx:else class="loading-container">
<view class="loading-icon"></view>
<text>保存中...</text>
</view>
</button>
</view>
</view>

176
miniprogram-example/pages/otp-add/index.wxss Normal file
View file

@ -0,0 +1,176 @@
/* otp-add/index.wxss */
.container {
min-height: 100vh;
background-color: #f8f8f8;
padding: 0 0 40rpx 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 32rpx;
background-color: #ffffff;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.form-container {
background-color: #ffffff;
padding: 32rpx;
margin: 32rpx;
border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.form-group {
margin-bottom: 32rpx;
}
.form-row {
display: flex;
justify-content: space-between;
}
.form-group.half {
width: 48%;
}
.form-label {
display: block;
font-size: 28rpx;
color: #666666;
margin-bottom: 12rpx;
}
.required {
color: #ff4d4f;
}
.form-input {
width: 100%;
height: 80rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 0 24rpx;
font-size: 28rpx;
color: #333333;
box-sizing: border-box;
}
.secret-input-container {
position: relative;
}
.scan-button {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.scan-icon {
font-size: 40rpx;
color: #1890ff;
}
.scanning-indicator {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
width: 40rpx;
height: 40rpx;
}
.scanning-spinner {
width: 40rpx;
height: 40rpx;
border: 4rpx solid #f3f3f3;
border-top: 4rpx solid #1890ff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.picker-view {
width: 100%;
height: 80rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 0 24rpx;
font-size: 28rpx;
color: #333333;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.picker-arrow {
font-size: 24rpx;
color: #999999;
}
.button-group {
display: flex;
justify-content: space-between;
padding: 32rpx;
}
.cancel-button, .submit-button {
width: 48%;
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
}
.cancel-button {
background-color: #f5f5f5;
color: #666666;
}
.submit-button {
background-color: #1890ff;
color: #ffffff;
}
.submit-button.loading {
background-color: #8cc4ff;
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
}
.loading-icon {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
border: 4rpx solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
}

213
miniprogram-example/pages/otp-list/index.js Normal file
View file

@ -0,0 +1,213 @@
// otp-list/index.js
import { getOTPList, getOTPCode, deleteOTP } from '../../services/otp';
import { checkLoginStatus } from '../../services/auth';
Page({
data: {
otpList: [],
loading: true,
refreshing: false
},
onLoad() {
this.checkLogin();
},
onShow() {
// 每次页面显示时刷新OTP列表
if (!this.data.loading) {
this.fetchOTPList();
}
},
// 下拉刷新
onPullDownRefresh() {
this.setData({ refreshing: true });
this.fetchOTPList().finally(() => {
wx.stopPullDownRefresh();
this.setData({ refreshing: false });
});
},
// 检查登录状态
checkLogin() {
checkLoginStatus().then(isLoggedIn => {
if (isLoggedIn) {
this.fetchOTPList();
} else {
wx.redirectTo({
url: '/pages/login/login'
});
}
});
},
// 获取OTP列表
fetchOTPList() {
this.setData({ loading: true });
return getOTPList()
.then(res => {
if (res.data && Array.isArray(res.data)) {
this.setData({
otpList: res.data,
loading: false
});
// 获取每个OTP的当前验证码
this.refreshOTPCodes();
}
})
.catch(err => {
wx.showToast({
title: '获取OTP列表失败',
icon: 'none'
});
this.setData({ loading: false });
});
},
// 刷新所有OTP的验证码
refreshOTPCodes() {
const { otpList } = this.data;
// 为每个OTP获取当前验证码
const promises = otpList.map(otp => {
return getOTPCode(otp.id)
.then(res => {
if (res.data && res.data.code) {
return {
id: otp.id,
code: res.data.code,
expiresIn: res.data.expires_in || 30
};
}
return null;
})
.catch(() => null);
});
Promise.all(promises).then(results => {
const updatedList = [...this.data.otpList];
results.forEach(result => {
if (result) {
const index = updatedList.findIndex(otp => otp.id === result.id);
if (index !== -1) {
updatedList[index] = {
...updatedList[index],
currentCode: result.code,
expiresIn: result.expiresIn
};
}
}
});
this.setData({ otpList: updatedList });
// 设置定时器，每秒更新倒计时
this.startCountdown();
});
},
// 开始倒计时
startCountdown() {
// 清除之前的定时器
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
}
// 创建新的定时器，每秒更新一次
this.countdownTimer = setInterval(() => {
const { otpList } = this.data;
let needRefresh = false;
const updatedList = otpList.map(otp => {
if (!otp.countdown) {
otp.countdown = otp.expiresIn || 30;
}
otp.countdown -= 1;
// 如果倒计时结束，标记需要刷新
if (otp.countdown <= 0) {
needRefresh = true;
}
return otp;
});
this.setData({ otpList: updatedList });
// 如果有OTP需要刷新，重新获取验证码
if (needRefresh) {
this.refreshOTPCodes();
}
}, 1000);
},
// 添加新的OTP
handleAddOTP() {
wx.navigateTo({
url: '/pages/otp-add/index'
});
},
// 编辑OTP
handleEditOTP(e) {
const { id } = e.currentTarget.dataset;
wx.navigateTo({
url: `/pages/otp-edit/index?id=${id}`
});
},
// 删除OTP
handleDeleteOTP(e) {
const { id, name } = e.currentTarget.dataset;
wx.showModal({
title: '确认删除',
content: `确定要删除 ${name} 吗？`,
confirmColor: '#ff4d4f',
success: (res) => {
if (res.confirm) {
deleteOTP(id)
.then(() => {
wx.showToast({
title: '删除成功',
icon: 'success'
});
this.fetchOTPList();
})
.catch(err => {
wx.showToast({
title: '删除失败',
icon: 'none'
});
});
}
}
});
},
// 复制验证码
handleCopyCode(e) {
const { code } = e.currentTarget.dataset;
wx.setClipboardData({
data: code,
success: () => {
wx.showToast({
title: '验证码已复制',
icon: 'success'
});
}
});
},
onUnload() {
// 页面卸载时清除定时器
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
}
}
});

3
miniprogram-example/pages/otp-list/index.json Normal file
View file

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

59
miniprogram-example/pages/otp-list/index.wxml Normal file
View file

@ -0,0 +1,59 @@
<!-- otp-list/index.wxml -->
<view class="container">
<view class="header">
<text class="title">我的OTP列表</text>
<view class="add-button" bindtap="handleAddOTP">
<text class="add-icon">+</text>
</view>
</view>
<!-- 加载中 -->
<view class="loading-container" wx:if="{{loading}}">
<view class="loading-spinner"></view>
<text class="loading-text">加载中...</text>
</view>
<!-- OTP列表 -->
<view class="otp-list" wx:else>
<block wx:if="{{otpList.length > 0}}">
<view class="otp-item" wx:for="{{otpList}}" wx:key="id">
<view class="otp-info">
<view class="otp-name-row">
<text class="otp-name">{{item.name}}</text>
<text class="otp-issuer">{{item.issuer}}</text>
</view>
<view class="otp-code-row" bindtap="handleCopyCode" data-code="{{item.currentCode}}">
<text class="otp-code">{{item.currentCode || '******'}}</text>
<text class="copy-hint">点击复制</text>
</view>
<view class="otp-countdown">
<progress
percent="{{(item.countdown / item.expiresIn) * 100}}"
stroke-width="3"
activeColor="{{item.countdown < 10 ? '#ff4d4f' : '#1890ff'}}"
backgroundColor="#e9e9e9"
/>
<text class="countdown-text">{{item.countdown || 0}}s</text>
</view>
</view>
<view class="otp-actions">
<view class="action-button edit" bindtap="handleEditOTP" data-id="{{item.id}}">
<text class="action-icon">✎</text>
</view>
<view class="action-button delete" bindtap="handleDeleteOTP" data-id="{{item.id}}" data-name="{{item.name}}">
<text class="action-icon">✕</text>
</view>
</view>
</view>
</block>
<!-- 空状态 -->
<view class="empty-state" wx:else>
<image class="empty-image" src="/assets/images/empty.png" mode="aspectFit"></image>
<text class="empty-text">暂无OTP，点击右上角添加</text>
</view>
</view>
</view>

201
miniprogram-example/pages/otp-list/index.wxss Normal file
View file

@ -0,0 +1,201 @@
/* otp-list/index.wxss */
.container {
min-height: 100vh;
background-color: #f8f8f8;
padding: 0 0 40rpx 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx 32rpx;
background-color: #ffffff;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.add-button {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
background-color: #1890ff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}
.add-icon {
color: #ffffff;
font-size: 40rpx;
line-height: 1;
}
/* 加载状态 */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 0;
}
.loading-spinner {
width: 64rpx;
height: 64rpx;
border: 6rpx solid #f3f3f3;
border-top: 6rpx solid #1890ff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #999999;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* OTP列表 */
.otp-list {
padding: 20rpx 32rpx;
}
.otp-item {
background-color: #ffffff;
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.otp-info {
flex: 1;
margin-right: 20rpx;
}
.otp-name-row {
display: flex;
align-items: center;
margin-bottom: 16rpx;
}
.otp-name {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-right: 16rpx;
}
.otp-issuer {
font-size: 24rpx;
color: #666666;
background-color: #f5f5f5;
padding: 4rpx 12rpx;
border-radius: 8rpx;
}
.otp-code-row {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.otp-code {
font-size: 44rpx;
font-family: monospace;
font-weight: bold;
color: #1890ff;
letter-spacing: 4rpx;
margin-right: 16rpx;
}
.copy-hint {
font-size: 24rpx;
color: #999999;
}
.otp-countdown {
position: relative;
width: 100%;
}
.countdown-text {
position: absolute;
right: 0;
top: -30rpx;
font-size: 24rpx;
color: #999999;
}
/* OTP操作按钮 */
.otp-actions {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.action-button {
width: 56rpx;
height: 56rpx;
border-radius: 28rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.action-button.edit {
background-color: #f0f7ff;
}
.action-button.delete {
background-color: #fff1f0;
}
.action-icon {
font-size: 32rpx;
}
.edit .action-icon {
color: #1890ff;
}
.delete .action-icon {
color: #ff4d4f;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 0;
}
.empty-image {
width: 240rpx;
height: 240rpx;
margin-bottom: 32rpx;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}