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

优化Bot频道分类管理UI

Browse Source 
改进内容：
- 将"新建分类"功能从页面底部移至顶部工具栏
- 在分类筛选器旁添加"+"按钮，点击打开对话框
- 新增 BotChannelCategoryDialog 对话框组件
  - 支持创建分类（输入名称和描述）
  - 保留编辑模式接口（待后续实现）
- 删除原有页面底部的分类创建表单
- 提升用户体验，操作更集中便捷

UI改进：
- 分类筛选器 + 新建按钮 紧密集成
- 对话框使用 MudDialog 标准样式
- 保持与现有对话框一致的交互体验

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
meoacgxandClaude committed 2025-12-20 21:55:44 +08:00
1 parent 654a8fe1a3
commit ce8ee3dd4c
2 files changed
+111 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/TelegramPanel.Web/Components/Dialogs/BotChannelCategoryDialog.razor
+97
View File
@@ -0,0 +1,97 @@
@namespace TelegramPanel.Web.Components.Dialogs
@inject BotManagementService BotManagement
@inject ISnackbar Snackbar
@using TelegramPanel.Data.Entities
<MudDialog>
<DialogContent>
<MudStack Spacing="2">
<MudTextField @bind-Value="name" Label="分类名称" Variant="Variant.Outlined" Required="true"
MaxLength="100" Counter="100" />
<MudTextField @bind-Value="description" Label="描述（可选）" Variant="Variant.Outlined" Lines="3"
MaxLength="500" Counter="500" />
</MudStack>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Text" Color="Color.Default" OnClick="Cancel" Disabled="@saving">取消</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Save" Disabled="@saving">
@if (saving)
{
<MudProgressCircular Size="Size.Small" Indeterminate="true" Class="mr-2" />
<span>保存中...</span>
}
else
{
<span>保存</span>
}
</MudButton>
</DialogActions>
</MudDialog>
@code
{
[CascadingParameter] private MudDialogInstance MudDialog { get; set; } = default!;
[Parameter] public int BotId { get; set; }
[Parameter] public BotChannelCategory? Category { get; set; }
private bool saving;
private string name = "";
private string description = "";
protected override void OnInitialized()
{
// 如果传入了分类，说明是编辑模式
if (Category != null)
{
name = Category.Name ?? "";
description = Category.Description ?? "";
}
}
private void Cancel()
{
MudDialog.Cancel();
}
private async Task Save()
{
if (saving)
return;
name = (name ?? string.Empty).Trim();
if (string.IsNullOrWhiteSpace(name))
{
Snackbar.Add("请输入分类名称", Severity.Warning);
return;
}
saving = true;
try
{
if (Category == null)
{
// 新增模式：使用现有的 CreateCategoryAsync 方法
var category = await BotManagement.CreateCategoryAsync(BotId, name, description);
Snackbar.Add("分类创建成功", Severity.Success);
MudDialog.Close(DialogResult.Ok(category));
}
else
{
// 编辑模式：需要更新方法（暂未实现）
Category.Name = name;
Category.Description = description;
// TODO: 需要实现 UpdateCategoryAsync 方法
Snackbar.Add("分类更新功能待实现", Severity.Warning);
MudDialog.Close(DialogResult.Ok(Category));
}
}
catch (Exception ex)
{
Snackbar.Add($"保存失败：{ex.Message}", Severity.Error);
}
finally
{
saving = false;
}
}
}
src/TelegramPanel.Web/Components/Pages/BotChannelsHome.razor
+14 -45
View File
@@ -32,7 +32,7 @@
<MudSpacer />
<MudSelect @bind-Value="filterCategoryId" Label="分类" Variant="Variant.Outlined" Dense="true" Class="mr-2" Style="min-width: 160px;"
<MudSelect @bind-Value="filterCategoryId" Label="分类" Variant="Variant.Outlined" Dense="true" Style="min-width: 160px;"
Disabled="@(selectedBotId <= 0)">
<MudSelectItem Value="0">全部分类</MudSelectItem>
<MudSelectItem Value="-1">未分类</MudSelectItem>
@@ -42,6 +42,10 @@
}
</MudSelect>
<MudIconButton Icon="@Icons.Material.Filled.Add" Color="Color.Primary" Size="Size.Small"
Title="新建分类" OnClick="OpenCreateCategoryDialog"
Disabled="@(selectedBotId <= 0)" Class="mr-2" />
<MudTextField @bind-Value="search" Placeholder="搜索频道..." Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"
Immediate="true" Disabled="@(selectedBotId <= 0)" />
@@ -122,28 +126,6 @@
</MudCardContent>
</MudCard>
@if (selectedBotId > 0)
{
<MudCard Class="mt-4">
<MudCardContent>
<MudText Typo="Typo.h6" Class="mb-2">新增分类</MudText>
<MudGrid>
<MudItem xs="12" md="4">
<MudTextField @bind-Value="newCategoryName" Label="分类名称" Variant="Variant.Outlined" Required="true" />
</MudItem>
<MudItem xs="12" md="6">
<MudTextField @bind-Value="newCategoryDesc" Label="描述（可选）" Variant="Variant.Outlined" />
</MudItem>
<MudItem xs="12" md="2" Class="d-flex align-end">
<MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@loading" OnClick="CreateCategoryAsync">
创建
</MudButton>
</MudItem>
</MudGrid>
</MudCardContent>
</MudCard>
}
@code {
[SupplyParameterFromQuery(Name = "botId")]
public int? BotIdQuery { get; set; }
@@ -161,9 +143,6 @@
private int filterCategoryId = 0;
private string search = "";
private string newCategoryName = "";
private string newCategoryDesc = "";
private IEnumerable<BotChannel> filtered => selectedBotId <= 0
? Enumerable.Empty<BotChannel>()
: channels.Where(c =>
@@ -285,33 +264,23 @@
}
}
private async Task CreateCategoryAsync()
private async Task OpenCreateCategoryDialog()
{
if (selectedBotId <= 0)
return;
if (string.IsNullOrWhiteSpace(newCategoryName))
var parameters = new DialogParameters
{
Snackbar.Add("请输入分类名称", Severity.Warning);
return;
}
["BotId"] = selectedBotId
};
var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Small, FullWidth = true };
var dialog = DialogService.Show<BotChannelCategoryDialog>("新建分类", parameters, options);
var result = await dialog.Result;
loading = true;
try
if (!result.Canceled)
{
await BotManagement.CreateCategoryAsync(selectedBotId, newCategoryName, newCategoryDesc);
newCategoryName = "";
newCategoryDesc = "";
// 重新加载分类列表
await LoadBotData();
Snackbar.Add("分类已创建", Severity.Success);
}
catch (Exception ex)
{
Snackbar.Add($"创建失败：{ex.Message}", Severity.Error);
}
finally
{
loading = false;
}
}