108 lines
No EOL
4 KiB
Text
108 lines
No EOL
4 KiB
Text
<view class="container {{loading ? 'is-loading' : ''}}">
|
|
<!-- 加载状态 -->
|
|
<view class="loading-container" wx:if="{{loading}}">
|
|
<view class="loading"></view>
|
|
</view>
|
|
|
|
<!-- 错误提示 -->
|
|
<view class="error-message" wx:if="{{error}}">{{error}}</view>
|
|
|
|
<!-- 令牌列表 -->
|
|
<scroll-view
|
|
class="scroll-view"
|
|
scroll-y="true"
|
|
enable-flex="true"
|
|
catch:touchmove="{{loading ? 'catchTouchMove' : ''}}"
|
|
>
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:if="{{!loading && tokens.length === 0}}">
|
|
<text class="empty-icon">🔐</text>
|
|
<text class="empty-title">暂无验证器</text>
|
|
<text class="empty-desc">点击下方按钮添加新的验证器</text>
|
|
</view>
|
|
|
|
<!-- 令牌列表 -->
|
|
<view class="token-list" wx:else>
|
|
<view
|
|
class="token-item {{token.type === 'totp' && remainingSeconds[token.id] <= 5 ? 'warn' : ''}}"
|
|
wx:for="{{tokens}}"
|
|
wx:key="id"
|
|
wx:for-item="token"
|
|
bindtap="handleTokenTap"
|
|
data-token-id="{{token.id}}"
|
|
>
|
|
<view class="token-content">
|
|
<!-- 令牌头部 -->
|
|
<view class="token-header">
|
|
<text class="token-type {{token.type}}">{{token.type === 'totp' ? 'TOTP' : 'HOTP'}}</text>
|
|
<text class="token-issuer">{{token.issuer || '未知服务'}}</text>
|
|
</view>
|
|
|
|
<!-- 令牌主体 -->
|
|
<view class="token-body">
|
|
<view class="code-container">
|
|
<text class="code">{{token.code || '------'}}</text>
|
|
<view class="code-actions">
|
|
<!-- HOTP刷新按钮 -->
|
|
<view
|
|
wx:if="{{token.type === 'hotp'}}"
|
|
class="refresh-btn {{token.refreshing ? 'refreshing' : ''}}"
|
|
catch:tap="refreshHotpToken"
|
|
data-token-id="{{token.id}}"
|
|
hover-class="button-hover"
|
|
>
|
|
<text class="refresh-icon {{token.refreshing ? 'spin' : ''}}">🔄</text>
|
|
</view>
|
|
<!-- 编辑按钮 -->
|
|
<view
|
|
class="edit-btn"
|
|
catch:tap="editToken"
|
|
data-token-id="{{token.id}}"
|
|
hover-class="button-hover"
|
|
>
|
|
<text class="edit-icon">✏️</text>
|
|
</view>
|
|
<!-- 删除按钮 -->
|
|
<view
|
|
class="delete-btn"
|
|
catch:tap="deleteToken"
|
|
data-id="{{token.id}}"
|
|
hover-class="button-hover"
|
|
>
|
|
<text class="delete-icon">🗑️</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 令牌信息 -->
|
|
<view class="token-info">
|
|
<!-- TOTP信息 -->
|
|
<view class="totp-info {{remainingSeconds[token.id] <= 5 ? 'warn' : ''}}" wx:if="{{token.type === 'totp'}}">
|
|
<text class="remaining-time">剩余 {{remainingSeconds[token.id]}} 秒</text>
|
|
<view class="progress-bar {{remainingSeconds[token.id] <= 5 ? 'warn' : ''}}">
|
|
<view class="progress" style="width: {{(remainingSeconds[token.id] / (token.period || 30)) * 100}}%"></view>
|
|
</view>
|
|
</view>
|
|
<!-- HOTP信息 -->
|
|
<view class="counter-info" wx:if="{{token.type === 'hotp'}}">
|
|
<text>计数器: {{token.counter || 0}}</text>
|
|
<text class="hint">点击刷新按钮生成新的验证码</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 广告容器 -->
|
|
<view class="ad-container" wx:if="{{!loading && tokens.length > 0}}">
|
|
<!-- 这里可以放广告组件 -->
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 添加按钮 -->
|
|
<view class="add-button" bindtap="showAddTokenMenu" hover-class="button-hover">
|
|
<text class="add-icon">+</text>
|
|
<text class="add-text">添加验证器</text>
|
|
</view>
|
|
</view> |