volcengine · yaozheng-fang · Aug 5, 2026 · Aug 4, 2026
diff --git a/OPENVIKING_CHANGE_PLAN.md b/OPENVIKING_CHANGE_PLAN.md
diff --git a/frontend/src/create/CustomCreate.css b/frontend/src/create/CustomCreate.css
@@ -2494,12 +2494,96 @@
   font-weight: 560;
 }
 
+.cw-env-field-title {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 5px;
+}
+
 .cw-env-field-label {
   min-width: 0;
   line-height: 1.4;
   overflow-wrap: anywhere;
 }
 
+.cw-env-help {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  flex: 0 0 15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid hsl(var(--border));
+  border-radius: 999px;
+  background: hsl(var(--background));
+  color: hsl(var(--muted-foreground));
+  cursor: default;
+  font-size: 10px;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.cw-env-help-popover {
+  position: absolute;
+  z-index: 80;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  width: max-content;
+  max-width: min(320px, 72vw);
+  padding: 7px 9px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 7px;
+  background: hsl(var(--foreground));
+  color: hsl(var(--background));
+  box-shadow: 0 10px 28px hsl(var(--foreground) / 0.14);
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1.45;
+  text-align: left;
+  white-space: normal;
+  transform: translateX(-50%);
+  opacity: 0;
+  pointer-events: none;
+  user-select: text;
+}
+
+.cw-env-help:hover .cw-env-help-popover,
+.cw-env-help:focus-visible .cw-env-help-popover,
+.cw-env-help:focus-within .cw-env-help-popover {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.cw-env-help:focus-visible {
+  outline: 2px solid hsl(var(--ring) / 0.55);
+  outline-offset: 2px;
+}
+
+.cw-env-link {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: hsl(var(--muted-foreground));
+  text-decoration: none;
+}
+
+.cw-env-link:hover {
+  background: hsl(var(--foreground) / 0.055);
+  color: hsl(var(--foreground));
+}
+
+.cw-env-link svg {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 13px;
+}
+
 .cw-env-field-head code {
   display: block;
   max-width: 100%;
@@ -2543,11 +2627,32 @@
     0 0 0 3px hsl(var(--ring) / 0.09),
     inset 0 1px 0 hsl(var(--foreground) / 0.015);
 }
+.cw-input[aria-invalid="true"] {
+  border-color: hsl(var(--destructive) / 0.7);
+  box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.08);
+}
 .cw-input.is-error {
   border-color: hsl(var(--destructive) / 0.6);
   box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.1);
 }
 
+.cw-env-textarea {
+  min-height: 96px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+.cw-env-error {
+  margin-top: -2px;
+  color: hsl(var(--destructive));
+  font-size: 11.5px;
+  line-height: 1.4;
+}
+
 .cw-textarea {
   width: 100%;
   padding: 11px 13px;

diff --git a/frontend/src/create/CustomCreate.tsx b/frontend/src/create/CustomCreate.tsx
@@ -18,6 +18,7 @@ import {
   ChevronRight,
   Cpu,
   Database,
+  ExternalLink,
   FolderUp,
   Globe,
   Info,
@@ -53,7 +54,9 @@ import {
   type EnvVar,
 } from "./veadkCatalog";
 import {
+  firstInvalidRuntimeEnv,
   runtimeEnvConfiguration,
+  runtimeEnvJsonError,
   runtimeEnvVars,
   type RuntimeEnvConfiguration,
   type RuntimeEnvSelection,
@@ -473,25 +476,74 @@ function RuntimeEnvFields({
   }
   return (
     <div className="cw-env-fields">
-      {env.map((item) => (
-        <label className="cw-env-field" key={item.key}>
-          <span className="cw-env-field-head">
-            <span className="cw-env-field-label">
-              {item.comment || item.key}
-              {item.required && <span className="cw-req">*</span>}
+      {env.map((item) => {
+        const value = values[item.key] ?? item.defaultValue ?? "";
+        const jsonError = runtimeEnvJsonError(item, values);
+        const controlId = `cw-env-${item.key}`;
+        return (
+          <label className="cw-env-field" key={item.key} htmlFor={controlId}>
+            <span className="cw-env-field-head">
+              <span className="cw-env-field-title">
+                <span className="cw-env-field-label">
+                  {item.comment || item.key}
+                  {item.required && <span className="cw-req">*</span>}
+                </span>
+                {item.help && (
+                  <span
+                    className="cw-env-help"
+                    tabIndex={0}
+                    data-help={item.help}
+                    aria-label={`${item.comment || item.key}说明：${item.help}`}
+                  >
+                    ?
+                    <span className="cw-env-help-popover" role="tooltip">
+                      {item.help}
+                    </span>
+                  </span>
+                )}
+                {item.link && (
+                  <a
+                    className="cw-env-link"
+                    href={item.link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    title={`打开 OpenViking ${item.link.label}`}
+                    aria-label={`打开 OpenViking ${item.link.label}`}
+                    onClick={(event) => event.stopPropagation()}
+                  >
+                    <ExternalLink aria-hidden="true" />
+                  </a>
+                )}
+              </span>
+              {item.comment && <code title={item.key}>{item.key}</code>}
             </span>
-            {item.comment && <code title={item.key}>{item.key}</code>}
-          </span>
-          <input
-            className="cw-input"
-            type={isSensitiveEnv(item.key) ? "password" : "text"}
-            value={values[item.key] ?? ""}
-            placeholder={item.placeholder || "请输入参数值"}
-            autoComplete="off"
-            onChange={(event) => onChange(item.key, event.currentTarget.value)}
-          />
-        </label>
-      ))}
+            {item.multiline || item.format === "json" ? (
+              <textarea
+                id={controlId}
+                className="cw-input cw-env-textarea"
+                value={value}
+                placeholder={item.placeholder || "请输入参数值"}
+                autoComplete="off"
+                spellCheck={false}
+                aria-invalid={!!jsonError}
+                onChange={(event) => onChange(item.key, event.currentTarget.value)}
+              />
+            ) : (
+              <input
+                id={controlId}
+                className="cw-input"
+                type={isSensitiveEnv(item.key) ? "password" : "text"}
+                value={value}
+                placeholder={item.placeholder || "请输入参数值"}
+                autoComplete="off"
+                aria-invalid={!!jsonError}
+                onChange={(event) => onChange(item.key, event.currentTarget.value)}
+              />
+            )}
+            {jsonError && <span className="cw-env-error">{jsonError}</span>}
+          </label>
+        );
+      })}
     </div>
   );
 }
@@ -2875,6 +2927,17 @@ export function CustomCreate({
       setWorkspaceMode("build");
       return;
     }
+    const invalidEnv = firstInvalidRuntimeEnv(
+      deploymentEnv.specs,
+      draft.deployment?.envValues ?? {},
+    );
+    if (invalidEnv) {
+      setBuildErr(
+        `${invalidEnv.spec.comment || invalidEnv.spec.key}：${invalidEnv.error}`,
+      );
+      setWorkspaceMode("build");
+      return;
+    }
     setBuilding(true);
     try {
       const releaseVariant = variantId