WebCode/WebCodeCli/Components/AutoCompleteDropdown.razor at main · lusile2024/WebCode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
@namespace WebCodeCli.Components

@if (_isVisible && _suggestions.Any())
{
    <div class="autocomplete-dropdown absolute z-50 bg-white border-2 border-gray-300 rounded-xl shadow-2xl overflow-hidden animate-slideDown"
         style="@GetPositionStyle()">
        <!-- 头部提示 -->
        <div class="px-4 py-2 bg-gradient-to-r from-gray-50 to-white border-b border-gray-200 text-xs text-gray-500 flex items-center justify-between">
            <span>↑↓ 选择  Enter 确认  Esc 关闭</span>
            <span class="text-gray-400">@_suggestions.Count 条建议</span>
        </div>

        <!-- 建议列表 -->
        <div class="max-h-64 overflow-y-auto">
            @for (var i = 0; i < _suggestions.Count; i++)
            {
                var index = i; // 捕获索引变量
                var suggestion = _suggestions[i];
                var isSelected = index == _selectedIndex;

                <div class="@GetSuggestionClass(isSelected) px-4 py-3 cursor-pointer transition-all duration-150"
                     @onclick="() => SelectSuggestion(index)"
                     @onmouseenter="() => _selectedIndex = index">
                    <div class="flex items-start gap-3">
                        <!-- 图标 -->
                        <div class="flex-shrink-0 mt-0.5">
                            @if (suggestion.Type == SuggestionType.History)
                            {
                                <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            }
                            else
                            {
                                <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                </svg>
                            }
                        </div>

                        <!-- 内容 -->
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-gray-800 truncate">
                                @HighlightMatch(suggestion.Text, _searchText)
                            </div>
                            @if (!string.IsNullOrEmpty(suggestion.Description))
                            {
                                <div class="text-xs text-gray-500 mt-1 truncate">
                                    @suggestion.Description
                                </div>
                            }
                            <div class="flex items-center gap-2 mt-1">
                                <span class="text-xs @GetTypeTagClass(suggestion.Type) px-2 py-0.5 rounded-full">
                                    @GetTypeLabel(suggestion.Type)
                                </span>
                                @if (suggestion.UsageCount > 0)
                                {
                                    <span class="text-xs text-gray-400">
                                        使用 @suggestion.UsageCount 次
                                    </span>
                                }
                            </div>
                        </div>

                        <!-- 选中指示器 -->
                        @if (isSelected)
                        {
                            <div class="flex-shrink-0">
                                <svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                        }
                    </div>
                </div>
            }
        </div>

        <!-- 底部提示 -->
        @if (_showTemplateHint)
        {
            <div class="px-4 py-2 bg-purple-50 border-t border-purple-200 text-xs text-purple-700 flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>输入 &#64; 符号可快速插入模板</span>
            </div>
        }
    </div>
}

<style>
    @@keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-slideDown {
        animation: slideDown 0.2s ease-out;
    }

    .autocomplete-dropdown {
        min-width: 300px;
        max-width: 600px;
    }
</style>