feat(config-generator): show placeholder preview for invalid inputs

Keep the preview visible when validation fails: invalid field values are
rendered as <placeholder> next to the warnings instead of hiding the whole
preview. Export keeps the strict projection, so copy and download stay
disabled until every field is valid.

Assisted-by: opencode:deepseek-v4-flash

Author: Itsusinn

AGENTS.md

@@ -18,7 +18,7 @@ npm ci --prefix config-generator
 npm run dev --prefix config-generator
 ```
 
-Open `http://127.0.0.1:8080/`. No Python or Zensical server is needed. Its application-schema selector currently provides independent TUIC server and client generators, covering multiple users, three certificate modes, SOCKS5 authentication, logging, connections, TCP/UDP forwarding, Quinn/quiche backends, outbound and ACL routing, DNS/GeoData, RESTful management, and HTTP/3 masquerading. The page has two regions: a selection region with the generator form, and a preview region that renders the live generated config with syntax highlighting, per-line XML explanations on hover or keyboard focus, validation, and copy/download.
+Open `http://127.0.0.1:8080/`. No Python or Zensical server is needed. Its application-schema selector currently provides independent TUIC server and client generators, covering multiple users, three certificate modes, SOCKS5 authentication, logging, connections, TCP/UDP forwarding, Quinn/quiche backends, outbound and ACL routing, DNS/GeoData, RESTful management, and HTTP/3 masquerading. The page has two regions: a selection region with the generator form, and a preview region that renders the live generated config with syntax highlighting, per-line XML explanations on hover or keyboard focus, validation, and copy/download. Invalid inputs keep the preview visible: flagged values are shown as `<placeholder>` alongside the validation warnings, while copy and download stay disabled until every field is valid.
 
 When [just](https://just.systems/) is installed, the repository root provides shortcuts:
 

config-generator/AGENTS.md

@@ -21,7 +21,7 @@ try {
 
 `schema/example.xml` 是不含 TUIC 字段的任务清单示例，具有不同的品牌、输入名、集合、三个输出和导出命令。相同 Rust/Svelte 代码直接呈现它，不需要增加分支或修改 HTML。环境变量变更和选中文件变更均会触发 Cargo 重新嵌入；这是构建时切换，网页不下载外部 XML、不读取网络配置。上面的 `--outDir` 相对 `config-generator/`，保留默认 `dist/` 和组合站点产物；最后重新生成默认 `pkg/`，避免后续 Vite 开发会话继续使用示例 WASM。
 
-Svelte 通过 WASM `Engine` 提交 `set`、`set-row`、`add`、`remove`、`generate` 和 `generate-row` 操作。Rust `Session` 统一处理状态和 XML 联动，再返回已计算可见性、错误及预览的显示快照。前端不接收条件表达式，也不解释 DSL。集合行以独立字符串标识作为 Svelte 的 keyed each 键，业务字段 `id` 不受影响；复制下载另行请求原始导出文本。此界面重构不改变 DSL v5 语法。
+Svelte 通过 WASM `Engine` 提交 `set`、`set-row`、`add`、`remove`、`generate` 和 `generate-row` 操作。Rust `Session` 统一处理状态和 XML 联动，再返回已计算可见性、错误及预览的显示快照。前端不接收条件表达式，也不解释 DSL。集合行以独立字符串标识作为 Svelte 的 keyed each 键，业务字段 `id` 不受影响；复制下载另行请求原始导出文本。校验不通过时预览不再隐藏：无效输入值在预览中显示为 `<placeholder>`，并保留警告；导出仍走严格投影，校验通过前复制和下载保持禁用。此界面重构不改变 DSL v5 语法。
 
 ## DSL 概要
 

config-generator/src/dsl.rs

@@ -15,6 +15,9 @@ pub use metadata::{Export, Generator, Notice, Section, Ui};
 pub use preview::PreviewLine;
 use serde_json::{Map, Value};
 
+/// Display-only substitute for invalid input values in the preview. Never exported.
+pub const PLACEHOLDER: &str = "<placeholder>";
+
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct DslError(pub String);
 impl fmt::Display for DslError {
@@ -311,6 +314,62 @@ impl Document {
 		self.output(&self.outputs, root, root)?
 			.ok_or_else(|| self.outputs.error("根输出不可省略"))
 	}
+	/// Best-effort projection for the preview: invalid inputs become [`PLACEHOLDER`] so the
+	/// output structure stays visible. Export always uses the strict [`Self::project`].
+	pub fn project_preview(&self, root: &Value) -> Option<Value> {
+		let state = self.preview_state(root);
+		self.output_mode(&self.outputs, &state, &state, true).ok().flatten()
+	}
+	/// Replaces values flagged by validation with the placeholder, leaving structural fields
+	/// (output format, mode, collection selection) untouched.
+	fn preview_state(&self, root: &Value) -> Value {
+		let mut state = root.clone();
+		let errors = self.validate(root);
+		if errors.is_empty() {
+			return state;
+		}
+		let excluded: BTreeSet<&str> = self
+			.ui
+			.mode_field
+			.iter()
+			.chain(self.ui.format_field.iter())
+			.chain(self.collections.iter().filter_map(|c| c.selected_by.as_ref()))
+			.map(String::as_str)
+			.collect();
+		for path in errors.keys() {
+			if let Some((collection, index, key)) = self.row_error_path(path) {
+				if excluded.contains(key)
+					|| !self
+						.collections
+						.iter()
+						.any(|c| c.name == collection && c.fields.iter().any(|f| f.key == key))
+				{
+					continue;
+				}
+				if let Some(object) = state
+					.get_mut(collection)
+					.and_then(Value::as_array_mut)
+					.and_then(|rows| rows.get_mut(index))
+					.and_then(Value::as_object_mut)
+				{
+					object.insert(key.into(), Value::String(PLACEHOLDER.into()));
+				}
+			} else if !excluded.contains(path.as_str()) && self.fields.iter().any(|f| &f.key == path) {
+				state[path.as_str()] = Value::String(PLACEHOLDER.into());
+			}
+		}
+		state
+	}
+	fn row_error_path<'a>(&self, path: &'a str) -> Option<(&'a str, usize, &'a str)> {
+		let mut parts = path.split('.');
+		let collection = parts.next()?;
+		let index = parts.next()?.parse::<usize>().ok()?;
+		let key = parts.next()?;
+		if parts.next().is_some() {
+			return None;
+		}
+		Some((collection, index, key))
+	}
 	/// Renders one top-level output as annotated lines from its declared descriptions.
 	pub fn preview_lines(&self, export: &str, value: &Value, format: &str) -> Result<Vec<PreviewLine>, DslError> {
 		let node = self
@@ -322,6 +381,9 @@ impl Document {
 		preview::render(node, value, &self.fields, format)
 	}
 	fn output(&self, node: &Element, root: &Value, row: &Value) -> Result<Option<Value>, DslError> {
+		self.output_mode(node, root, row, false)
+	}
+	fn output_mode(&self, node: &Element, root: &Value, row: &Value, lenient: bool) -> Result<Option<Value>, DslError> {
 		if !self.visible(node, root, row)? {
 			return Ok(None);
 		}
@@ -330,7 +392,7 @@ impl Document {
 				"outputs" | "object" => {
 					let mut output = Map::new();
 					for child in &node.children {
-						if let Some(value) = self.output(child, root, row)? {
+						if let Some(value) = self.output_mode(child, root, row, lenient)? {
 							output.insert(child.required("name")?.into(), value);
 						}
 					}
@@ -354,20 +416,30 @@ impl Document {
 						{
 							continue;
 						}
-						if let Some(value) = self.output(node.single()?, root, item)? {
+						if let Some(value) = self.output_mode(node.single()?, root, item, lenient)? {
 							if node.tag == "record" {
 								let key = transform(
 									node,
 									lookup(node, node.required("key")?, root, item)?.clone(),
 									node.attr("key-transform"),
-								)?;
-								let key = key
-									.as_str()
-									.filter(|s| !s.is_empty())
-									.ok_or_else(|| node.error("映射键必须是非空字符串"))?;
-								if record.insert(key.into(), value).is_some() {
+								);
+								let key = match key {
+									Ok(key) => key,
+									Err(_) if lenient => Value::String(PLACEHOLDER.into()),
+									Err(error) => return Err(error),
+								};
+								let key = match key.as_str().filter(|s| !s.is_empty()) {
+									Some(key) => key.to_owned(),
+									None if lenient => PLACEHOLDER.into(),
+									None => return Err(node.error("映射键必须是非空字符串")),
+								};
+								if record.contains_key(&key) {
+									if lenient {
+										continue;
+									}
 									return Err(node.error("映射键在规范化后重复"));
 								}
+								record.insert(key, value);
 							} else {
 								items.push(value);
 							}
@@ -379,11 +451,14 @@ impl Document {
 						Value::Array(items)
 					}
 				}
-				_ => {
-					let v = self.eval(node, root, row)?;
+				_ => match self.eval(node, root, row).and_then(|v| {
 					self.scalar_type(node, &v)?;
-					v
-				}
+					Ok(v)
+				}) {
+					Ok(v) => v,
+					Err(_) if lenient => Value::String(PLACEHOLDER.into()),
+					Err(e) => return Err(e),
+				},
 			};
 			if node.attr("omit-empty") == Some("true")
 				&& (value.as_array().is_some_and(Vec::is_empty) || value.as_object().is_some_and(Map::is_empty))
@@ -446,7 +521,9 @@ impl Document {
 				Value::Object(result)
 			}
 			_ => {
-				self.scalar_type(node, value)?;
+				if value.as_str() != Some(PLACEHOLDER) {
+					self.scalar_type(node, value)?;
+				}
 				value.clone()
 			}
 		};

config-generator/src/session/view.rs

@@ -108,6 +108,7 @@ impl Session {
 		let root = &self.state.data;
 		let errors = doc.validate(root);
 		let selected = self.selected(requested);
+		let format = self.format();
 		let built = build_configs(doc, root).and_then(|configs| {
 			let configs = if reveal {
 				configs
@@ -119,8 +120,19 @@ impl Session {
 			Ok((export.name.clone(), config.clone()))
 		});
 		let (valid, preview_lines) = match &built {
-			Ok((name, config)) => (true, preview_lines(doc, name, config, self.format())),
-			Err(_) => (false, Vec::new()),
+			Ok((name, config)) => (true, preview_lines(doc, name, config, format)),
+			// Invalid inputs no longer hide the preview: render the structure with placeholders.
+			Err(_) => (
+				false,
+				selected
+					.and_then(|export| {
+						let configs = doc.project_preview(root)?;
+						let configs = if reveal { configs } else { doc.redact(&configs).ok()? };
+						Some((export.name.clone(), configs.get(&export.name)?.clone()))
+					})
+					.map(|(name, config)| preview_lines(doc, &name, &config, format))
+					.unwrap_or_default(),
+			),
 		};
 		Snapshot {
 			ui: Branding {

config-generator/tests/decoupled.rs

@@ -42,6 +42,12 @@ fn unrelated_description_drives_the_complete_engine() -> Result {
 	state.data["first"] = "20".into();
 	assert!(doc.validate(&state.data).contains_key("last"));
 	assert!(build_configs(&doc, &state.data).is_err());
+	state.data["project"] = String::new().into();
+	assert!(doc.validate(&state.data).contains_key("project"));
+	assert!(build_configs(&doc, &state.data).is_err());
+	let preview = doc.project_preview(&state.data).ok_or("preview")?;
+	assert_eq!(preview["snapshot"]["title"], "<placeholder>");
+	assert_eq!(preview["snapshot"]["items"][0]["name"], "item");
 	Ok(())
 }
 

config-generator/tests/schemas.rs

@@ -61,6 +61,34 @@ fn split_schemas_preserve_standalone_tuic_outputs() -> Result {
 	Ok(())
 }
 
+#[test]
+fn invalid_defaults_still_render_a_placeholder_preview() -> Result {
+	for schema in ["tuic-server", "tuic-client"] {
+		let document = document_for(schema)?;
+		let state = State::new(document);
+		assert!(!document.validate(&state.data).is_empty(), "{schema}");
+		assert!(build_configs(document, &state.data).is_err(), "{schema}");
+		let preview = document.project_preview(&state.data).ok_or("preview")?;
+		for export in &document.exports {
+			let Some(config) = preview.get(export.name.as_str()) else {
+				continue;
+			};
+			let json = document
+				.preview_lines(&export.name, config, "json")?
+				.iter()
+				.map(|line| line.text.clone())
+				.collect::<Vec<_>>()
+				.join("\n");
+			assert!(
+				json.contains("<placeholder>"),
+				"{schema} {}: invalid defaults should surface placeholders",
+				export.name
+			);
+		}
+	}
+	Ok(())
+}
+
 #[test]
 fn generated_tuic_configs_are_annotated_across_formats() -> Result {
 	for (schema, required, value, marker) in [

config-generator/tests/session.rs

@@ -96,6 +96,19 @@ fn preview_export_resets_and_conditional_output_share_one_engine() -> Result {
 	Ok(())
 }
 
+#[test]
+fn invalid_inputs_keep_preview_with_placeholders() -> Result {
+	let mut s = Session::new(Document::parse(XML)?);
+	s.initialize(&mut random)?;
+	action(&mut s, json!({"type":"set", "field":"project", "value":""}))?;
+	let view = s.snapshot("snapshot", false);
+	assert!(!view.valid);
+	assert!(view.errors.contains_key("project"));
+	assert_eq!(preview_json(&view)?["title"], "<placeholder>");
+	assert!(s.export("snapshot").is_err());
+	Ok(())
+}
+
 #[test]
 fn failed_randomness_and_invalid_actions_do_not_partially_mutate_state() -> Result {
 	let mut s = Session::new(Document::parse(XML)?);

config-generator/tests/xml_dsl.rs

@@ -113,6 +113,29 @@ fn named_values_conditions_and_ipv6_endpoint() -> Result {
 	Ok(())
 }
 
+#[test]
+fn preview_uses_placeholders_for_invalid_inputs() -> Result {
+	let source = description(
+		r#"
+ <field name="name" type="string" default="demo" label="名称" rule="required"/>
+ <field name="timeout" type="string" default="30" label="超时" rule="seconds"/>
+ "#,
+		r#"<validators><validator name="required" kind="required" message="必填。"/><validator name="seconds" kind="integer" min="1" message="必须为正整数。"/></validators>"#,
+		r#"<object name="out"><string name="name" from="/name"/><string name="timeout" from="/timeout" transform="integer" unit="s"/></object>"#,
+	);
+	let doc = Document::parse(&source)?;
+	let mut state = doc.defaults();
+	assert!(doc.project(&state).is_ok());
+	state["name"] = String::new().into();
+	state["timeout"] = "bad".into();
+	assert!(!doc.validate(&state).is_empty());
+	assert!(doc.project(&state).is_err());
+	let preview = doc.project_preview(&state).ok_or("preview")?;
+	assert_eq!(preview["out"]["name"], "<placeholder>");
+	assert_eq!(preview["out"]["timeout"], "<placeholder>");
+	Ok(())
+}
+
 #[test]
 fn output_and_option_descriptions_annotate_the_projection() -> Result {
 	let source = description(

config-generator/ui/OutputPanel.svelte

@@ -58,15 +58,15 @@
     </label>
   </div>
   <div class="cg-errors" hidden={!errors.length}>
-    <p>完成以下字段后即可生成：</p>
+    <p>以下字段需要修正，预览中已用 &lt;placeholder&gt; 替代：</p>
     <ul>{#each errors as [key, message] (key)}
       <li><button type="button" onclick={() => focusError(key)}>{message}</button></li>
     {/each}</ul>
   </div>
   {#if view.preview_lines.length}
     <PreviewDocument lines={view.preview_lines} {format} />
   {:else}
-    <div class="cg-code"><code>填写左侧配置，预览将在校验通过后显示。</code></div>
+    <div class="cg-code"><code>无法生成预览，请检查配置。</code></div>
   {/if}
   <div class="cg-actions">
     <button type="button" disabled={!view.valid} onclick={copy}>复制配置</button>