QuickActionsPanel.razor

@namespace WebCodeCli.Components

<div class="quick-actions-panel bg-white rounded-lg shadow-sm border border-gray-200 mb-2 sm:mb-3">
    <!-- 可点击的标题栏 -->
    <button @onclick="ToggleCollapse" 
            class="w-full flex items-center justify-between p-2 sm:p-3 hover:bg-gray-50 transition-colors rounded-t-lg">
        <div class="flex items-center gap-1.5 sm:gap-2">
            <svg class="w-3 h-3 sm:w-4 sm:h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
            <span class="text-xs sm:text-sm font-bold text-gray-800">@LocalizedTitle</span>
            <span class="text-[10px] text-gray-400">(@_actions.Count(a => a.IsEnabled) 项)</span>
        </div>
        <div class="flex items-center gap-1">
            <button @onclick="ToggleCustomize" 
                    @onclick:stopPropagation="true"
                    class="p-1 sm:p-1.5 hover:bg-gray-200 rounded transition-colors"
                    title="@LocalizedCustomize">
                <svg class="w-3 h-3 sm:w-3.5 sm:h-3.5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
            </button>
            <svg class="w-3 h-3 sm:w-4 sm:h-4 text-gray-500 transition-transform @(_isCollapsed ? "" : "rotate-180")" 
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </div>
    </button>

    <!-- 可折叠的内容区 -->
    @if (!_isCollapsed)
    {
        <div class="px-2 pb-2 sm:px-3 sm:pb-3 border-t border-gray-100">
            @if (_isLoading)
            {
                <div class="flex items-center justify-center py-4">
                    <div class="animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-t-gray-700"></div>
                </div>
            }
            else
            {
                <div class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-1.5 sm:gap-2 mt-2">
                    @foreach (var action in _actions.Where(a => a.IsEnabled).OrderBy(a => a.Order))
                    {
                        <button @onclick="() => OnActionClick(action)"
                                class="quick-action-btn group bg-gradient-to-br from-gray-50 to-white hover:from-gray-100 hover:to-gray-50 border border-gray-200 hover:border-gray-400 rounded-lg p-2 transition-all duration-200 flex flex-col items-center justify-center gap-1 hover:shadow-md active:scale-95"
                                title="@action.Title">
                            <span class="text-lg sm:text-xl group-hover:scale-110 transition-transform duration-200">@action.Icon</span>
                            <span class="text-[10px] sm:text-xs font-semibold text-gray-700 text-center line-clamp-2 leading-tight">@action.Title</span>
                            @if (!string.IsNullOrEmpty(action.Hotkey))
                            {
                                <span class="text-[9px] text-gray-400 font-mono hidden sm:block">@action.Hotkey</span>
                            }
                        </button>
                    }
                </div>
            }
        </div>
    }
</div>

<!-- 自定义管理模态框 -->
@if (_showCustomizeModal)
{
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4" @onclick="CloseCustomizeModal">
        <div class="bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden transform transition-all" @onclick:stopPropagation="true">
            <!-- 头部 -->
            <div class="flex items-center justify-between p-6 border-b-2 border-gray-200 bg-gray-50">
                <h3 class="text-xl font-bold text-gray-800 flex items-center gap-2">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    @T("quickActions.manage")
                </h3>
                <button @onclick="CloseCustomizeModal" class="p-2 hover:bg-gray-200 rounded-lg transition-colors">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <!-- 内容 -->
            <div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 200px);">
                <div class="mb-4">
                    <button @onclick="ShowAddDialog" class="btn-primary w-full sm:w-auto flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        @T("quickActions.addCustom")
                    </button>
                </div>

                <div class="space-y-3">
                    @foreach (var action in _actions.OrderBy(a => a.Order))
                    {
                        <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl border border-gray-200 hover:border-gray-300 transition-colors">
                            <div class="flex items-center gap-2 flex-shrink-0">
                                <input type="checkbox" 
                                       checked="@action.IsEnabled" 
                                       @onchange="() => ToggleActionEnabled(action)"
                                       class="w-5 h-5 rounded border-gray-300 text-gray-700 focus:ring-gray-500" />
                                <span class="text-2xl">@action.Icon</span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-semibold text-gray-800 truncate">@action.Title</h4>
                                <p class="text-xs text-gray-500 truncate">@action.Content</p>
                            </div>
                            <div class="flex items-center gap-1 flex-shrink-0">
                                @if (action.IsCustom)
                                {
                                    <button @onclick="() => ShowEditDialog(action)" class="p-2 hover:bg-gray-200 rounded-lg transition-colors" title="@T("common.edit")">
                                        <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                        </svg>
                                    </button>
                                    <button @onclick="() => DeleteAction(action)" class="p-2 hover:bg-red-100 rounded-lg transition-colors" title="@T("common.delete")">
                                        <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                        </svg>
                                    </button>
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>

            <!-- 底部 -->
            <div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
                <button @onclick="CloseCustomizeModal" class="btn-default">
                    @T("common.close")
                </button>
            </div>
        </div>
    </div>
}

<!-- 添加/编辑操作对话框 -->
@if (_showActionDialog)
{
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-4" @onclick="CloseActionDialog">
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full transform transition-all" @onclick:stopPropagation="true">
            <div class="flex items-center justify-between p-6 border-b-2 border-gray-200 bg-gray-50">
                <h3 class="text-xl font-bold text-gray-800">
                    @(_editingAction == null ? T("quickActions.addAction") : T("quickActions.editAction"))
                </h3>
                <button @onclick="CloseActionDialog" class="p-2 hover:bg-gray-200 rounded-lg transition-colors">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            <div class="p-6 space-y-4">
                <div>
                    <label class="label">@T("quickActions.actionTitle") *</label>
                    <input @bind="_actionForm.Title" type="text" class="input-field" placeholder="@T("quickActions.actionTitlePlaceholder")" maxlength="50" />
                </div>

                <div>
                    <label class="label">@T("quickActions.actionContent") *</label>
                    <textarea @bind="_actionForm.Content" rows="4" class="input-field" placeholder="@T("quickActions.actionContentPlaceholder")" maxlength="500"></textarea>
                </div>

                <div>
                    <label class="label">@T("quickActions.actionIcon")</label>
                    <input @bind="_actionForm.Icon" type="text" class="input-field" placeholder="🔧" maxlength="10" />
                </div>

                <div>
                    <label class="label">@T("quickActions.actionHotkey")</label>
                    <input @bind="_actionForm.Hotkey" type="text" class="input-field" placeholder="@T("quickActions.actionHotkeyPlaceholder")" maxlength="20" />
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50">
                <button @onclick="CloseActionDialog" class="btn-default">
                    @T("common.cancel")
                </button>
                <button @onclick="SaveAction" 
                        disabled="@(string.IsNullOrWhiteSpace(_actionForm.Title) || string.IsNullOrWhiteSpace(_actionForm.Content))"
                        class="btn-primary">
                    @T("common.save")
                </button>
            </div>
        </div>
    </div>
}

<style>
    .quick-action-btn {
        min-height: 56px;
    }

    @@media (max-width: 640px) {
        .quick-action-btn {
            min-height: 50px;
        }
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>