Hugging Face's logo

Spaces:
yangtb24
/
pre
Sleeping

App Files Community
pre
File size: 11,426 Bytes 
bbb6398
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
 
<!-- 现代化API密钥编辑模态框 -->
<div 

    x-cloak

    x-show="showEditModal" 

    class="fixed inset-0 overflow-y-auto z-50"

    x-transition:enter="transition ease-out duration-300"

    x-transition:enter-start="opacity-0"

    x-transition:enter-end="opacity-100"

    x-transition:leave="transition ease-in duration-200"

    x-transition:leave-start="opacity-100"

    x-transition:leave-end="opacity-0"

>
    <div class="flex items-center justify-center min-h-screen p-4">
        <!-- 高斯模糊背景 -->
        <div 

            x-cloak

            @click="showEditModal = false"

            x-show="showEditModal" 

            x-transition:enter="transition ease-out duration-300"

            x-transition:enter-start="opacity-0 backdrop-blur-none"

            x-transition:enter-end="opacity-80 backdrop-blur-md"

            x-transition:leave="transition ease-in duration-200"

            x-transition:leave-start="opacity-80 backdrop-blur-md"

            x-transition:leave-end="opacity-0 backdrop-blur-none"

            class="fixed inset-0 bg-gray-900/60 backdrop-blur-md"

        ></div>
        
        <!-- 模态框卡片 -->
        <div 

            x-cloak

            x-show="showEditModal" 

            @click.away="showEditModal = false" 

            x-transition:enter="transition ease-out duration-300"

            x-transition:enter-start="opacity-0 transform scale-95 translate-y-4"

            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"

            x-transition:leave="transition ease-in duration-200"

            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"

            x-transition:leave-end="opacity-0 transform scale-95 translate-y-4"

            class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden w-4/5 max-w-3xl max-h-[80vh] z-50 relative border border-gray-200 dark:border-gray-700 flex flex-col"

        >
            <!-- 顶部图案装饰 -->
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600"></div>
            
            <!-- 模态框标题栏 -->
            <div class="px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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" />
                    </svg>
                    编辑API密钥
                </h3>
                <button 

                    @click="showEditModal = false" 

                    class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors focus:outline-none rounded-full p-1"

                    aria-label="关闭"

                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="px-6 pb-6 flex-grow overflow-y-auto">
                <form @submit.prevent="updateApiKey()" class="space-y-5">
                    <!-- 名称输入卡片 -->
                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 transition-all duration-300 hover:shadow-md border border-gray-100 dark:border-gray-700">
                        <label for="edit-name" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 2a1 1 0 00-1 1v1a1 1 0 002 0V3a1 1 0 00-1-1zM4 4h3a3 3 0 006 0h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm2.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm2.45 4a2.5 2.5 0 10-4.9 0h4.9zM12 9a1 1 0 100 2h3a1 1 0 100-2h-3zm-1 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z" clip-rule="evenodd" />
                            </svg>
                            密钥标识名称 <span class="text-gray-400 text-xs ml-1">(可选)</span>
                        </label>
                        <div class="mt-1 relative rounded-md shadow-sm">
                            <input 

                                type="text" 

                                id="edit-name" 

                                x-model="editKey.name"

                                placeholder="为密钥添加易于识别的名称"

                                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm pl-3 pr-10 py-2.5 text-sm transition-colors duration-200 focus:outline-none"

                                autocomplete="off"

                            >
                            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                </svg>
                            </div>
                        </div>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">好的命名有助于快速找到特定密钥</p>
                    </div>
                    
                    <!-- API密钥输入卡片 -->
                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 transition-all duration-300 hover:shadow-md border border-gray-100 dark:border-gray-700">
                        <label for="edit-key" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-primary-500" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v-1l1-1 1-1-.257-.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
                            </svg>
                            API密钥 <span class="text-red-500 ml-1">*</span>
                        </label>
                        <div class="mt-1">
                            <input 

                                type="text" 

                                id="edit-key" 

                                x-model="editKey.key"

                                placeholder="在此输入您的API密钥"

                                class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm pl-3 pr-3 py-2.5 text-sm font-mono transition-colors duration-200 focus:outline-none"

                                required

                                spellcheck="false"

                                autocomplete="off"

                                autocorrect="off"

                                autocapitalize="off"

                            >
                        </div>
                    </div>
                    
                    <!-- 错误消息 -->
                    <div 

                        x-show="errorMessage" 

                        x-text="errorMessage"

                        class="p-3 text-sm text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 rounded-lg"

                    ></div>
                    
                    <!-- 按钮组 -->
                    <div class="flex justify-end space-x-3 mt-6">
                        <button 

                            type="button" 

                            @click="showEditModal = false"

                            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none transition-colors duration-200"

                        >
                            取消
                        </button>
                        <button 

                            type="submit"

                            :disabled="isSubmitting"

                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none transition-colors duration-200 space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"

                        >
                            <span x-show="!isSubmitting" class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                                保存修改
                            </span>
                            <span x-show="isSubmitting" class="flex items-center">
                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                处理中...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- 键盘快捷键提示 -->
            <div class="absolute bottom-3 left-6 text-xs text-gray-400 dark:text-gray-500 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                Esc 关闭 | Alt+Enter 提交
            </div>
        </div>
    </div>
</div>