更新index.html，添加地址格式化函数并增强后端地址输入的提示和验证

index.html

@@ -223,7 +223,7 @@
             }
             
             .MuiTypography-h6 {
-                font-size: 1.1rem !important;
+                font-size: 1.1rem !重要;
             }
             
             /* 表单样式 */
@@ -405,6 +405,27 @@
             );
         });
 
+        // 在 App 组件外部添加地址格式化函数
+        const formatApiUrl = (url) => {
+            if (!url) return '';
+            
+            // 移除末尾的斜杠
+            url = url.replace(/\/+$/, '');
+            
+            // 如果不包含协议，添加 http://
+            if (!/^https?:\/\//i.test(url)) {
+                url = 'http://' + url;
+            }
+            
+            try {
+                // 使用 URL API 解析和规范化地址
+                const urlObj = new URL(url);
+                return urlObj.toString().replace(/\/+$/, '');
+            } catch (e) {
+                return url;
+            }
+        };
+
         function App() {
             const [tabValue, setTabValue] = React.useState(0);
             const [qrInput, setQrInput] = React.useState('');
@@ -431,7 +452,7 @@
                 ...JSON.parse(localStorage.getItem('customBackends') || '[]')
             ]);
             const [isDialogOpen, setIsDialogOpen] = React.useState(false);
-            const [newBackend, setNewBackend] = React.useState({ label: '', value: '' });
+            const [newBackend, setNewBackend] = React.useState({ label: '', value: '', formattedUrl: '' });
             const [snackbarOpen, setSnackbarOpen] = React.useState(false);
             const [snackbarMessage, setSnackbarMessage] = React.useState('');
             const [menuAnchorEl, setMenuAnchorEl] = React.useState(null);
@@ -554,7 +575,7 @@
 
             const handleDialogClose = () => {
                 setIsDialogOpen(false);
-                setNewBackend({ label: '', value: '' });
+                setNewBackend({ label: '', value: '', formattedUrl: '' });
             };
 
             const handleSaveBackend = () => {
@@ -610,6 +631,12 @@
                 handleMenuClose();
             };
 
+            const handleNewBackendChange = (e) => {
+                const value = e.target.value;
+                const formattedUrl = formatApiUrl(value);
+                setNewBackend(prev => ({...prev, value: value, formattedUrl: formattedUrl}));
+            };
+
             // 加载表单配置
             const [formConfigs, setFormConfigs] = React.useState(null);
 
@@ -759,6 +786,7 @@
                                             </MenuItem>
                                         ))}
                                 </Select>
+
                                 <Button
                                     variant="outlined"
                                     color="primary"
@@ -767,6 +795,20 @@
                                 >
                                     添加自定义后端
                                 </Button>                                
+                                
+                                {/* 新增认证提示区域 */}
+                                <Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
+                                    <Typography variant="body2" color="textSecondary">
+                                        ⚠️部分后端地址受ZeroTrust保护 可能需要认证后使用
+                                    </Typography>
+                                    <Button 
+                                        variant="text" 
+                                        color="primary"
+                                        onClick={() => window.open(apiBase, '_blank')}
+                                    >
+                                        前往认证
+                                    </Button>
+                                </Box>
                             </FormControl>
                         </Paper>
 
@@ -822,12 +864,33 @@
                                 label="后端地址"
                                 fullWidth
                                 value={newBackend.value}
-                                onChange={(e) => setNewBackend(prev => ({...prev, value: e.target.value}))}
+                                onChange={handleNewBackendChange}
+                                placeholder="example.com:2333"
+                                helperText={
+                                    <div style={{fontSize: '0.75rem', color: '#666'}}>
+                                        支持的格式:<br/>
+                                        - example.com<br/>
+                                        - example.com:2333<br/>
+                                        - http(s)://example.com<br/>
+                                        {newBackend.value && (
+                                            <>
+                                                <br/>
+                                                将被格式化为: <span style={{color: '#1976d2'}}>{newBackend.formattedUrl}</span>
+                                            </>
+                                        )}
+                                    </div>
+                                }
                             />
                         </DialogContent>
                         <DialogActions>
                             <Button onClick={handleDialogClose}>取消</Button>
-                            <Button onClick={handleSaveBackend} color="primary">保存</Button>
+                            <Button 
+                                onClick={() => handleSaveBackend()} 
+                                color="primary"
+                                disabled={!newBackend.label || !newBackend.value}
+                            >
+                                保存
+                            </Button>
                         </DialogActions>
                     </Dialog>