feat: add connection tip for docker container user (#927)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/i18n/cn/common.ts

@@ -2,12 +2,12 @@ const commonTrans = {
   attu: {
     admin: 'Attu',
     address: 'Milvus 地址',
-    fileIssue: '提交问题',
-    fileMilvusIssue: '提交 Milvus 问题',
+    fileIssue: '提交 Issue',
+    fileMilvusIssue: '提交 Milvus Issue',
     discord: 'Discord',
-    token: 'Token',
+    token: 'token',
     authentication: '认证',
-    connectTitle: '连接到 Milvus 服务器',
+    connectTitle: '连接 Milvus 服务器',
     unAuth: '用户名或密码不正确',
     username: '用户名',
     password: '密码',
@@ -17,13 +17,15 @@ const commonTrans = {
     prometheusAddress: 'Prometheus 地址',
     prometheusInstance: 'Prometheus 实例',
     prometheusNamespace: 'Prometheus 命名空间',
-    connectionTip: '支持自托管 Milvus 或 Zilliz 云专用集群。',
+    connectionTip: '支持自托管 Milvus 或 Zilliz Cloud Dedicated 集群。',
     checkHealth: '检查健康状态',
     version: '版本',
-    clearHistory: '清空所有历史',
-    officeHours: 'Office Hours',
-    docs: 'Docs',
+    clearHistory: '清除所有历史记录',
+    officeHours: '联系专家',
+    docs: '文档',
     community: '社区',
+    dockerWarning:
+      'Attu 运行在容器内，“127.0.0.1”或“localhost”指向的是 Attu 容器自身。请使用 Attu 容器可以访问的 Milvus 服务器 IP 地址或主机名。',
   },
   status: {
     loaded: '已加载',

client/src/i18n/en/common.ts

@@ -25,6 +25,7 @@ const commonTrans = {
     officeHours: 'Office Hours',
     docs: 'Docs',
     community: 'Community',
+    dockerWarning: 'Attu is running in a container, "127.0.0.1" or "localhost" refers to the Attu container itself. Please use the IP address or hostname of the Milvus server that Attu can access.',
   },
   status: {
     loaded: 'Loaded',

client/src/pages/connect/AuthForm.tsx

@@ -24,6 +24,7 @@ import Box from '@mui/material/Box';
 import type { Theme } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
+import { isElectron } from '@/http/Axios';
 
 // Add Connection type definition back
 type Connection = AuthReq & {
@@ -354,6 +355,38 @@ export const AuthForm = () => {
           </Typography>
         </Box>
 
+        {!isElectron &&
+          (authReq.address.toLowerCase().includes('127.0.0.1') ||
+            authReq.address.toLowerCase().includes('localhost')) && (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: 1,
+                padding: (theme: Theme) => theme.spacing(1, 2),
+                marginBottom: (theme: Theme) => theme.spacing(2),
+                backgroundColor: (theme: Theme) => theme.palette.warning.light,
+                borderRadius: 1,
+                '& svg': {
+                  color: (theme: Theme) => theme.palette.warning.main,
+                  fontSize: 20,
+                  marginTop: 0.5,
+                },
+              }}
+            >
+              <Icons.error />
+              <Typography
+                sx={{
+                  fontSize: 13,
+                  color: (theme: Theme) => theme.palette.warning.dark,
+                  lineHeight: 1.5,
+                }}
+              >
+                {commonTrans('attu.dockerWarning')}
+              </Typography>
+            </Box>
+          )}
+
         {/* Replace address input with Autocomplete */}
         <Autocomplete
           freeSolo={true}