refactor/ui: 优化 TOTP 生成器界面和功能
- 更新了 accounts.json 中的示例账户信息 - 修改了 manifest.json 中的包名 - 调整了 index.ux 中的列表项样式 - 移除了 index.ux 中的详情页面相关代码
This commit is contained in:
parent
6a35928e78
commit
17d5662453
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"accounts": [
|
"accounts": [
|
||||||
{
|
{
|
||||||
"name": "Example Service 1",
|
"name": "Microsoft",
|
||||||
"username": "user1",
|
"username": "example@outlook.com",
|
||||||
"secret": "JBSWY3DPEHPK3PXP",
|
"secret": "JBSWY3DPEHPK3PXP",
|
||||||
"enabled": true,
|
"enabled": true,
|
||||||
"type": "totp"
|
"type": "totp"
|
||||||
@ -37,7 +37,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"settings": {
|
"settings": {
|
||||||
"title": "TOTP验证器",
|
"title": "TOTP",
|
||||||
"refreshInterval": 20,
|
"refreshInterval": 20,
|
||||||
"maxDisplayAccounts": 10
|
"maxDisplayAccounts": 10
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"package": "com.example.totp.authenticator",
|
"package": "com.deepfal.totp.authenticator",
|
||||||
"name": "TOTP",
|
"name": "TOTP",
|
||||||
"versionName": "1.0.0",
|
"versionName": "1.0.0",
|
||||||
"versionCode": 1,
|
"versionCode": 1,
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<list-item class="totp-item" style="height: 115px; margin-bottom: 10px; background-color: #1a1a1a; border-radius: 15px; border: 1px solid #333; flex-direction: column; justify-content: space-between; padding: 8px;" type="account" for="{{totpList}}" onclick="showDetail($idx)">
|
<list-item class="totp-item" style="height: 115px; margin-bottom: 10px; background-color: #1a1a1a; border-radius: 15px; border: 1px solid #333; flex-direction: column; justify-content: space-between; padding: 8px;" type="account" for="{{totpList}}" onclick="showDetail($idx)">
|
||||||
<div style="flex-direction: column; width: 100%; margin-bottom: 8px;">
|
<div style="flex-direction: column; width: 100%; margin-bottom: 8px;">
|
||||||
<text style="font-size: 24px; color: #fff; font-weight: bold; margin-bottom: 3px; text-align: left; width: 100%; line-height: 26px;">{{$item.name}}</text>
|
<text style="font-size: 24px; color: #fff; font-weight: bold; margin-bottom: 3px; text-align: left; width: 100%; line-height: 26px;">{{$item.name}}</text>
|
||||||
<text style="font-size: 18px; color: #999; text-align: left; width: 100%; line-height: 20px;" show="{{$item.usr}}">{{$item.usr}}</text>
|
<text style="font-size: 18px; color: #999; text-align: left; width: 100%; line-height: 22px;" show="{{$item.usr}}">{{$item.usr}}</text>
|
||||||
</div>
|
</div>
|
||||||
<div style="align-items: center; justify-content: center; width: 100%; height: 45px;">
|
<div style="align-items: center; justify-content: center; width: 100%; height: 45px;">
|
||||||
<text style="font-size: 32px; color: #00ff88; font-family: monospace; font-weight: bold; letter-spacing: 4px; text-align: center; width: 100%; line-height: 36px;">{{$item.otp}}</text>
|
<text style="font-size: 32px; color: #00ff88; font-family: monospace; font-weight: bold; letter-spacing: 4px; text-align: center; width: 100%; line-height: 36px;">{{$item.otp}}</text>
|
||||||
@ -344,6 +344,7 @@ export default {
|
|||||||
mode: 'short'
|
mode: 'short'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -432,128 +433,4 @@ export default {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
transition: color 500ms ease-out;
|
transition: color 500ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 详情页面 */
|
|
||||||
.detail-page {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #000;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-content {
|
|
||||||
flex: 1;
|
|
||||||
padding: 40px 20px 20px 20px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-service {
|
|
||||||
font-size: 28px;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-account {
|
|
||||||
font-size: 22px;
|
|
||||||
color: #999;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-code-container {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
height: 120px;
|
|
||||||
width: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-code-row {
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-code-digit {
|
|
||||||
width: 30px;
|
|
||||||
height: 50px;
|
|
||||||
/* background-color: rgba(0, 255, 136, 0.1);
|
|
||||||
border: 1px solid rgba(0, 255, 136, 0.3);
|
|
||||||
border-radius: 8px; */
|
|
||||||
margin: 0 1px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-code-num {
|
|
||||||
font-size: 32px;
|
|
||||||
color: #00ff88;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: monospace;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-code-line {
|
|
||||||
font-size: 36px;
|
|
||||||
color: #00ff88;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: monospace;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 44px;
|
|
||||||
margin: 0px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-code-single {
|
|
||||||
font-size: 32px;
|
|
||||||
color: #00ff88;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: monospace;
|
|
||||||
letter-spacing: 3px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-time {
|
|
||||||
font-size: 22px;
|
|
||||||
color: #AAA;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 底部按钮容器 */
|
|
||||||
.detail-footer {
|
|
||||||
height: 100px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-back-btn {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
border-radius: 35px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-back-icon {
|
|
||||||
font-size: 28px;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user