添加加入pawsql的按钮

Author: lhy

src/i18n/en.json

@@ -51,6 +51,7 @@
   "form.config.email.label": "PawSQL Account",
   "form.config.password.label": "Password",
   "form.config.backendUrl.label": "PawSQL Server Address",
+  "form.config.joinPawSQL": "Join PawSQL",
   "form.config.description": "PawSQL Client enables developers to access core capabilities of the PawSQL directly within VSCode enviroment. PawSQL provides sophisticated SQL optimization features including smart index recommendations and query rewrites. More about PawSQL's capabilities, please visit ",
   "form.config.documentation.link": "docs.pawsql.com",
   "form.config.save": "Save",

src/i18n/zh-cn.json

@@ -51,6 +51,7 @@
   "form.config.email.label": "PawSQL 账号",
   "form.config.password.label": "密码",
   "form.config.backendUrl.label": "PawSQL 服务器",
+  "form.config.joinPawSQL": "加入PawSQL",
   "form.config.description": "PawSQL Client让开发者能够在VS Code开发环境中直接使用PawSQL优化引擎的强大功能，包括智能索引推荐、查询重写建议、自动化性能验证等。想要了解更多关于PawSQL的优化能力，请参考",
   "form.config.documentation.link": "PawSQL官方文档",
   "form.config.save": "保存",

src/webview/components/ConfigForm.tsx

@@ -121,22 +121,22 @@ const ConfigForm: React.FC<ConfigFormProps> = ({
         </Typography>
       </div>
       <TextField
-          fullWidth
-          name="backendUrl"
-          label={formatMessage({ id: "form.config.backendUrl.label" })}
-          variant="outlined"
-          margin="normal"
-          value={formState.backendUrl}
-          onChange={handleInputChange}
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <PublicIcon sx={{ color: "#666" }} />
-              </InputAdornment>
-            ),
-          }}
-          sx={{ mb: 2 }}
-        />
+        fullWidth
+        name="backendUrl"
+        label={formatMessage({ id: "form.config.backendUrl.label" })}
+        variant="outlined"
+        margin="normal"
+        value={formState.backendUrl}
+        onChange={handleInputChange}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <PublicIcon sx={{ color: "#666" }} />
+            </InputAdornment>
+          ),
+        }}
+        sx={{ mb: 2 }}
+      />
       <form onSubmit={handleSubmit}>
         <TextField
           fullWidth
@@ -190,10 +190,32 @@ const ConfigForm: React.FC<ConfigFormProps> = ({
               boxShadow: "0 4px 8px rgba(0, 0, 0, 0.15)",
             },
             transition: "all 0.3s ease",
+            mb: 2,
           }}
         >
           <FormattedMessage id="form.config.save" />
         </Button>
+
+        {/* 新增的“Join PawSQL”按钮 */}
+        <Button
+          variant="outlined"
+          fullWidth
+          onClick={() => openExternalLink("https://www.pawsql.com/signup")}
+          sx={{
+            height: "48px",
+            fontSize: "16px",
+            color: "#007acc",
+            borderColor: "#007acc",
+            textTransform: "none",
+            "&:hover": {
+              backgroundColor: "#f0f8ff",
+              borderColor: "#005999",
+            },
+            transition: "all 0.3s ease",
+          }}
+        >
+          <FormattedMessage id="form.config.joinPawSQL" />
+        </Button>
       </form>
       <Snackbar
         open={snackbarOpen}