okooooooo/Telegram-Panel
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): 优化账号列表与Bot频道移动端布局

Browse Source
This commit is contained in:
meoacgx committed 2025-12-26 21:59:14 +08:00
1 parent 9fb9e271c5
commit b3366dc003
4 files changed
+125 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/TelegramPanel.Web/Components/App.razor
+1
View File
@@ -7,6 +7,7 @@
<base href="/" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="app.css" rel="stylesheet" />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
src/TelegramPanel.Web/Components/Pages/Accounts.razor
+61 -29
View File
@@ -20,8 +20,8 @@
<MudTable ServerData="LoadAccountsServerData" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@loading"
MultiSelection="true" @bind-SelectedItems="selectedAccounts" @ref="_table">
<ToolBarContent>
<MudStack Spacing="1">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Style="flex-wrap: wrap;">
<MudStack Spacing="1" Style="width: 100%;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="tp-flex-wrap">
<MudText Typo="Typo.h6">已导入账号 (@totalCount)</MudText>
@if (selectedAccounts.Count > 0)
{
@@ -34,8 +34,10 @@
</MudButton>
</MudStack>
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Style="flex-wrap: wrap;">
<MudSelect @bind-Value="filterCategoryId" @bind-Value:after="OnFiltersChanged" Label="分类" Variant="Variant.Outlined" Dense="true" Class="mr-2" Style="min-width: 160px;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="tp-flex-wrap" Style="gap: 6px;">
<MudSelect @bind-Value="filterCategoryId" @bind-Value:after="OnFiltersChanged" Label="分类" Variant="Variant.Outlined" Dense="true"
Class="tp-input-full-xs"
Style="min-width: 180px; flex: 0 1 220px;">
<MudSelectItem Value="0">全部分类</MudSelectItem>
@foreach (var c in categories)
{
@@ -43,15 +45,18 @@
}
</MudSelect>
<MudTextField @bind-Value="searchString" Placeholder="搜索账号..." Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0 tp-input-full-xs"
Style="min-width: 220px; flex: 1 1 260px;"
Immediate="true" @bind-Value:after="OnSearchChanged" />
<MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@SelectionToggleIcon"
Class="tp-hide-xs tp-nowrap"
Disabled="@(loading || accounts.Count == 0)" OnClick="CycleSelectionToggle" Size="Size.Small">
@SelectionToggleText
</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Info" StartIcon="@Icons.Material.Filled.Sync"
Class="tp-hide-xs tp-nowrap"
Disabled="@loading" OnClick="BatchRefreshTelegramStatus" Size="Size.Small">
批量刷新状态
</MudButton>
@@ -59,11 +64,15 @@
<MudMenu Dense="true" Disabled="@loading">
<ActivatorContent>
<MudButton Variant="Variant.Outlined" Color="Color.Default" StartIcon="@Icons.Material.Filled.MoreHoriz"
Class="tp-nowrap"
Disabled="@loading" Size="Size.Small">
批量操作
</MudButton>
</ActivatorContent>
<ChildContent>
<MudMenuItem Disabled="@(accounts.Count == 0)" Icon="@SelectionToggleIcon" OnClick="CycleSelectionToggle">@SelectionToggleText</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.Sync" Disabled="@loading" OnClick="BatchRefreshTelegramStatus">批量刷新状态</MudMenuItem>
<MudDivider />
<MudMenuItem Disabled="@(selectedAccounts.Count == 0)" OnClick="OpenBatchJoinSubscribe">批量加群/订阅（已选）</MudMenuItem>
<MudMenuItem Disabled="@(selectedAccounts.Count == 0)" OnClick="OpenBatchLeaveUnsubscribe">批量退群/退订（已选）</MudMenuItem>
<MudMenuItem Disabled="@(selectedAccounts.Count == 0)" OnClick="OpenBatchChangeTwoFactorPassword">修改二级密码（已选）</MudMenuItem>
@@ -131,30 +140,53 @@
</MudTd>
<MudTd DataLabel="最后数据同步"><PanelTime Value="context.LastSyncAt" /></MudTd>
<MudTd DataLabel="操作">
<MudIconButton Icon="@Icons.Material.Filled.Info" Size="Size.Small" Color="Color.Info"
OnClick="@(() => ShowDetails(context))" Title="查看详情" />
<MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small" Color="Color.Info"
Disabled="@loading" OnClick="@(() => OpenEditUserProfile(context))" Title="编辑用户资料" />
<MudIconButton Icon="@Icons.Material.Filled.Sync" Size="Size.Small" Color="Color.Primary"
Disabled="@loading" OnClick="@(() => RefreshTelegramStatus(context))" Title="刷新 Telegram 状态" />
<MudIconButton Icon="@Icons.Material.Filled.GroupAdd" Size="Size.Small" Color="Color.Success"
Disabled="@loading" OnClick="@(() => OpenJoinSubscribe(context))" Title="加群/订阅" />
<MudIconButton Icon="@Icons.Material.Filled.ExitToApp" Size="Size.Small" Color="Color.Warning"
Disabled="@loading" OnClick="@(() => OpenLeaveUnsubscribe(context))" Title="退群/退订" />
<MudIconButton Icon="@Icons.Material.Filled.MarkEmailUnread" Size="Size.Small" Color="Color.Info"
Disabled="@loading" OnClick="@(() => OpenSystemInbox(context))" Title="系统通知（验证码）" />
<MudIconButton Icon="@Icons.Material.Filled.Devices" Size="Size.Small" Color="Color.Info"
Disabled="@loading" OnClick="@(() => OpenDevices(context))" Title="在线设备" />
<MudIconButton Icon="@Icons.Material.Filled.Password" Size="Size.Small" Color="Color.Warning"
Disabled="@loading" OnClick="@(() => OpenChangeTwoFactorPassword(context))" Title="修改二级密码" />
<MudIconButton Icon="@Icons.Material.Filled.AlternateEmail" Size="Size.Small" Color="Color.Warning"
Disabled="@loading" OnClick="@(() => OpenChangeTwoFactorRecoveryEmail(context))" Title="绑定/换绑找回邮箱" />
<MudIconButton Icon="@(context.IsActive ? Icons.Material.Filled.Stop : Icons.Material.Filled.PlayArrow)"
Size="Size.Small" Color="@(context.IsActive ? Color.Warning : Color.Success)"
OnClick="@(() => ToggleActive(context))"
Title="@(context.IsActive ? "停用" : "启用")" />
<MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error"
OnClick="@(() => DeleteAccount(context))" Title="删除账号" />
<div class="tp-actions-inline">
<MudIconButton Icon="@Icons.Material.Filled.Info" Size="Size.Small" Color="Color.Info"
OnClick="@(() => ShowDetails(context))" Title="查看详情" />
<MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small" Color="Color.Info"
Disabled="@loading" OnClick="@(() => OpenEditUserProfile(context))" Title="编辑用户资料" />
<MudIconButton Icon="@Icons.Material.Filled.Sync" Size="Size.Small" Color="Color.Primary"
Disabled="@loading" OnClick="@(() => RefreshTelegramStatus(context))" Title="刷新 Telegram 状态" />
<MudIconButton Icon="@Icons.Material.Filled.GroupAdd" Size="Size.Small" Color="Color.Success"
Disabled="@loading" OnClick="@(() => OpenJoinSubscribe(context))" Title="加群/订阅" />
<MudIconButton Icon="@Icons.Material.Filled.ExitToApp" Size="Size.Small" Color="Color.Warning"
Disabled="@loading" OnClick="@(() => OpenLeaveUnsubscribe(context))" Title="退群/退订" />
<MudIconButton Icon="@Icons.Material.Filled.MarkEmailUnread" Size="Size.Small" Color="Color.Info"
Disabled="@loading" OnClick="@(() => OpenSystemInbox(context))" Title="系统通知（验证码）" />
<MudIconButton Icon="@Icons.Material.Filled.Devices" Size="Size.Small" Color="Color.Info"
Disabled="@loading" OnClick="@(() => OpenDevices(context))" Title="在线设备" />
<MudIconButton Icon="@Icons.Material.Filled.Password" Size="Size.Small" Color="Color.Warning"
Disabled="@loading" OnClick="@(() => OpenChangeTwoFactorPassword(context))" Title="修改二级密码" />
<MudIconButton Icon="@Icons.Material.Filled.AlternateEmail" Size="Size.Small" Color="Color.Warning"
Disabled="@loading" OnClick="@(() => OpenChangeTwoFactorRecoveryEmail(context))" Title="绑定/换绑找回邮箱" />
<MudIconButton Icon="@(context.IsActive ? Icons.Material.Filled.Stop : Icons.Material.Filled.PlayArrow)"
Size="Size.Small" Color="@(context.IsActive ? Color.Warning : Color.Success)"
OnClick="@(() => ToggleActive(context))"
Title="@(context.IsActive ? "停用" : "启用")" />
<MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Small" Color="Color.Error"
OnClick="@(() => DeleteAccount(context))" Title="删除账号" />
</div>
<MudMenu Icon="@Icons.Material.Filled.MoreVert" Size="Size.Small" Class="tp-actions-menu">
<MudMenuItem Icon="@Icons.Material.Filled.Info" OnClick="@(() => ShowDetails(context))">查看详情</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.Edit" Disabled="@loading" OnClick="@(() => OpenEditUserProfile(context))">编辑用户资料</MudMenuItem>
<MudDivider />
<MudMenuItem Icon="@Icons.Material.Filled.Sync" Disabled="@loading" OnClick="@(() => RefreshTelegramStatus(context))">刷新 Telegram 状态</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.GroupAdd" Disabled="@loading" OnClick="@(() => OpenJoinSubscribe(context))">加群/订阅</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.ExitToApp" Disabled="@loading" OnClick="@(() => OpenLeaveUnsubscribe(context))">退群/退订</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.MarkEmailUnread" Disabled="@loading" OnClick="@(() => OpenSystemInbox(context))">系统通知（验证码）</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.Devices" Disabled="@loading" OnClick="@(() => OpenDevices(context))">在线设备</MudMenuItem>
<MudDivider />
<MudMenuItem Icon="@Icons.Material.Filled.Password" Disabled="@loading" OnClick="@(() => OpenChangeTwoFactorPassword(context))">修改二级密码</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.AlternateEmail" Disabled="@loading" OnClick="@(() => OpenChangeTwoFactorRecoveryEmail(context))">绑定/换绑找回邮箱</MudMenuItem>
<MudDivider />
<MudMenuItem Icon="@(context.IsActive ? Icons.Material.Filled.Stop : Icons.Material.Filled.PlayArrow)"
Disabled="@loading"
OnClick="@(() => ToggleActive(context))">
@(context.IsActive ? "停用" : "启用")
</MudMenuItem>
<MudMenuItem Icon="@Icons.Material.Filled.Delete" Disabled="@loading" OnClick="@(() => DeleteAccount(context))">删除账号</MudMenuItem>
</MudMenu>
</MudTd>
</RowTemplate>
<NoRecordsContent>
src/TelegramPanel.Web/Components/Pages/BotChannelsHome.razor
+10 -5
View File
@@ -18,9 +18,10 @@
MultiSelection="true" @bind-SelectedItems="selected" @ref="_table">
<ToolBarContent>
<MudStack Spacing="1" Style="width: 100%;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Style="flex-wrap: wrap;">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="tp-flex-wrap">
<MudSelect T="int" Value="@selectedBotId" ValueChanged="@(async (int id) => await OnSelectedBotChanged(id))" Label="选择机器人"
Variant="Variant.Outlined" Dense="true" Style="min-width: 260px;">
Variant="Variant.Outlined" Dense="true" Class="tp-input-full-xs"
Style="min-width: 260px; flex: 1 1 260px;">
<MudSelectItem Value="0">-- 请选择机器人 --</MudSelectItem>
@foreach (var b in bots)
{
@@ -37,10 +38,13 @@
<MudChip T="string" Size="Size.Small" Color="Color.Info">已选 @selected.Count</MudChip>
}
<MudSpacer />
<div class="tp-hide-xs">
<MudSpacer />
</div>
<MudSelect @bind-Value="filterCategoryId" @bind-Value:after="OnFiltersChanged" Label="分类" Variant="Variant.Outlined" Dense="true"
Style="min-width: 160px;" Disabled="@(selectedBotId <= 0)">
Class="tp-input-full-xs"
Style="min-width: 160px; flex: 0 1 200px;" Disabled="@(selectedBotId <= 0)">
<MudSelectItem Value="0">全部分类</MudSelectItem>
<MudSelectItem Value="-1">未分类</MudSelectItem>
@foreach (var c in categories)
@@ -54,7 +58,8 @@
Disabled="@(selectedBotId <= 0)" />
<MudTextField @bind-Value="search" Placeholder="搜索频道..." Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0 tp-input-full-xs"
Style="min-width: 220px; flex: 1 1 260px;"
Immediate="true" Disabled="@(selectedBotId <= 0)" @bind-Value:after="OnSearchChanged" />
<MudIconButton Icon="@(_actionsExpanded ? Icons.Material.Filled.ExpandLess : Icons.Material.Filled.ExpandMore)"
src/TelegramPanel.Web/wwwroot/app.css
+53
View File
@@ -0,0 +1,53 @@
/* 移动端自适应增强：避免按钮文字被挤成“竖排” */
.tp-flex-wrap {
flex-wrap: wrap !important;
}
.tp-nowrap {
white-space: nowrap !important;
}
.tp-only-xs {
display: none;
}
.tp-actions-inline {
display: inline-flex;
gap: 4px;
flex-wrap: nowrap;
}
.tp-actions-menu {
display: none;
}
@media (max-width: 600px) {
/* MudStack 在小屏下允许换行，优先换行而不是压缩到极窄导致逐字换行 */
.mud-stack-root.tp-flex-wrap {
row-gap: 8px;
}
/* 输入框在小屏更容易占满一行 */
.tp-input-full-xs {
flex: 1 1 100% !important;
min-width: 100% !important;
}
.tp-hide-xs {
display: none !important;
}
.tp-only-xs {
display: inherit !important;
}
/* 小屏把行内操作收纳成菜单，避免一堆图标挤在一行 */
.tp-actions-inline {
display: none !important;
}
.tp-actions-menu {
display: inline-flex !important;
}
}