import { LitElement, html, css } from "lit"; import { I18nProvider } from "@/components"; import { useMeta } from '@/utils'; const $t = new I18nProvider(); export default class extends LitElement { static properties = { inputValue: { type: String }, outputValue: { type: String }, error: { type: String }, hasProcessed: { type: Boolean }, isProcessing: { type: Boolean }, indentSize: { type: String }, keywordCase: { type: String }, copied: { type: Boolean }, }; static styles = css` .page { min-height: calc(100vh - 140px); padding: 10px; display: flex; align-items: flex-start; justify-content: center; } .main { width: 100%; max-width: 90vw; } .title { text-align: center; font-size: 1.6rem; font-weight: 600; margin-bottom: 4px; color: var(--ro-primary); } .sub-title { text-align: center; font-size: 0.9rem; color: #6b7280; margin-bottom: 16px; } .field-block { width: 100%; } textarea { min-height: 260px; width: 100%; border-radius: 18px; border: 1px solid #d1d5db; padding: 12px 14px; font-size: 0.85rem; box-sizing: border-box; resize: vertical; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre; } textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--ro-primary); } .controls-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .controls-left { flex: 1 1 140px; max-width: 180px; } .controls-mid { flex: 1 1 160px; max-width: 220px; } .controls-right { margin-left: auto; flex: 0 0 auto; } select { width: 100%; border-radius: 999px; padding: 6px 12px; border: 1px solid #d1d5db; font-size: 0.85rem; } select:focus { outline: none; border-color: var(--ro-primary); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3); } .btn { padding: 8px 20px; border-radius: 999px; cursor: pointer; font-size: 0.85rem; border: none; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-primary { background: var(--ro-primary); color: #fff; font-size: 1.2rem; transition: transform 0.08s ease, opacity 0.08s ease; } .btn-primary:hover { transform: translateY(-1px); } .btn-primary.loading { opacity: 0.7; cursor: default; transform: none; } .btn-secondary { padding: 0; border-radius: 999px; background: #fff; color: var(--ro-primary); border: 1px solid var(--ro-primary); font-weight: 500; font-size: 1.1rem; } .btn-secondary:hover { background: #f3f4f6; } .btn-secondary.copied { background: #e0f2fe; } .btn-icon { padding: 0; min-width: 32px; min-height: 32px; } hr { margin: 24px 0; } .error { color: #b91c1c; font-size: 0.85rem; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; white-space: pre-wrap; word-break: break-word; } .result-area { margin: 16px 0; } .result-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; gap: 6px; } .result-view { border-radius: 12px; border: 1px solid #d1d5de; background: #fff; } .sql-scroll { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.85rem; padding: 10px 12px; box-sizing: border-box; line-height: 1.5; } .sql-line { white-space: pre; } .sql-keyword { color: #005cc5; font-weight: 600; } .sql-function { color: #7c3aed; font-weight: 600; } .sql-string { color: #e36209; } .sql-number { color: #0b7285; } .sql-comment { color: #6a737d; font-style: italic; } .sql-operator { color: #24292e; } `; constructor() { super(); this.inputValue = ""; this.outputValue = ""; this.error = ""; this.hasProcessed = false; this.isProcessing = false; this.indentSize = "2"; this.keywordCase = "upper"; this.copied = false; } onInputChange(e) { this.inputValue = e.target.value; } onIndentChange(e) { this.indentSize = e.target.value || "2"; } onKeywordCaseChange(e) { this.keywordCase = e.target.value || "upper"; } keywordSet() { return new Set([ "SELECT", "FROM", "WHERE", "GROUP", "BY", "ORDER", "HAVING", "LIMIT", "OFFSET", "INSERT", "INTO", "VALUES", "UPDATE", "SET", "DELETE", "JOIN", "LEFT", "RIGHT", "INNER", "OUTER", "FULL", "ON", "UNION", "ALL", "DISTINCT", "AS", "AND", "OR", "NOT", "IN", "IS", "NULL", "CASE", "WHEN", "THEN", "ELSE", "END", "EXISTS", "LIKE", "BETWEEN", "CREATE", "ALTER", "DROP", "TABLE", "VIEW", "INDEX", "WITH", "RECURSIVE", ]); } commonFunctions() { return new Set([ "COUNT", "SUM", "AVG", "MIN", "MAX", "ROUND", "FLOOR", "CEIL", "ABS", "COALESCE", "NULLIF", "IFNULL", "NVL", "LOWER", "UPPER", "TRIM", "LTRIM", "RTRIM", "SUBSTR", "SUBSTRING", "LENGTH", "CHAR_LENGTH", "CONCAT", "REPLACE", "NOW", "CURRENT_DATE", "CURRENT_TIME", "CURRENT_TIMESTAMP", "DATE", "TIME", "TIMESTAMP", "EXTRACT", "DATE_TRUNC", "UNIX_SECONDS", "UNIX_MILLIS", "UNIX_MICROS", "TIMESTAMP_SECONDS", "TIMESTAMP_MILLIS", "TIMESTAMP_MICROS", "DATE_ADD", "DATE_SUB", "DATEDIFF", "DATE_DIFF", "TIMESTAMP_ADD", "TIMESTAMP_SUB", "CAST", "SAFE_CAST", "PARSE_DATE", "PARSE_TIMESTAMP", "FORMAT_DATE", "FORMAT_TIMESTAMP", "JSON_EXTRACT", "JSON_EXTRACT_SCALAR", "JSON_VALUE", "TO_JSON", "TO_JSON_STRING", "ARRAY_AGG", "GENERATE_ARRAY", "UNNEST", "REGEXP_CONTAINS", "REGEXP_EXTRACT", "SPLIT", ]); } formatKeyword(word) { const kws = this.keywordSet(); const up = word.toUpperCase(); if (!kws.has(up)) return word; return this.keywordCase === "lower" ? up.toLowerCase() : up; } tokenize(sql) { const out = []; let i = 0; while (i < sql.length) { const ch = sql[i]; if (/\s/.test(ch)) { i += 1; continue; } if (ch === "-" && sql[i + 1] === "-") { let j = i + 2; while (j < sql.length && sql[j] !== "\n") j += 1; out.push({ t: "comment", v: sql.slice(i, j) }); i = j; continue; } if (ch === "/" && sql[i + 1] === "*") { let j = i + 2; while (j < sql.length - 1 && !(sql[j] === "*" && sql[j + 1] === "/")) j += 1; j = Math.min(sql.length, j + 2); out.push({ t: "comment", v: sql.slice(i, j) }); i = j; continue; } if (ch === "'" || ch === '"' || ch === "`") { const q = ch; let j = i + 1; while (j < sql.length) { if (sql[j] === q) { if (q === "'" && sql[j + 1] === "'") { j += 2; continue; } j += 1; break; } j += 1; } out.push({ t: "string", v: sql.slice(i, j) }); i = j; continue; } if (/[(),;]/.test(ch)) { out.push({ t: "punct", v: ch }); i += 1; continue; } if (/[<>!=]/.test(ch)) { const next = sql[i + 1] || ""; if ((ch === "<" || ch === ">" || ch === "!") && next === "=") { out.push({ t: "op", v: ch + next }); i += 2; continue; } if (ch === "<" && next === ">") { out.push({ t: "op", v: "<>" }); i += 2; continue; } out.push({ t: "op", v: ch }); i += 1; continue; } let j = i; while (j < sql.length && /[^\s(),;<>!=]/.test(sql[j])) j += 1; out.push({ t: "word", v: sql.slice(i, j) }); i = j; } return out; } process() { if (this.isProcessing) return; this.isProcessing = true; this.error = ""; this.hasProcessed = false; this.outputValue = ""; const raw = (this.inputValue || "").trim(); if (!raw) { this.error = $t("sqlViewer_inputRequired"); this.isProcessing = false; return; } try { const indent = " ".repeat(parseInt(this.indentSize, 10) || 2); const tokens = this.tokenize(raw); const breakBefore = new Set([ "SELECT", "FROM", "WHERE", "GROUP", "ORDER", "HAVING", "LIMIT", "OFFSET", "INSERT", "UPDATE", "DELETE", "VALUES", "SET", "JOIN", "LEFT", "RIGHT", "INNER", "FULL", "UNION", "AND", "OR", ]); let level = 0; let line = ""; const lines = []; let prevWordUpper = ""; const parenStack = []; const pushLine = () => { const trimmed = line.trimEnd(); if (trimmed) lines.push(trimmed); line = ""; }; const appendToken = (txt, noLeadingSpace = false) => { if (!line) line = indent.repeat(level) + txt; else if (noLeadingSpace) line += txt; else line += " " + txt; }; for (const tk of tokens) { if (tk.t === "comment") { pushLine(); lines.push(indent.repeat(level) + tk.v); continue; } if (tk.t === "punct") { if (tk.v === "(") { const isBlockParen = prevWordUpper === "AS" || prevWordUpper === "IN" || prevWordUpper === "EXISTS"; appendToken("(", true); parenStack.push(isBlockParen ? "block" : "expr"); if (isBlockParen) { level += 1; pushLine(); } continue; } if (tk.v === ")") { const kind = parenStack.pop() || "expr"; if (kind === "block") { pushLine(); level = Math.max(0, level - 1); line = indent.repeat(level) + ")"; } else appendToken(")", true); continue; } if (tk.v === ",") { line += ","; pushLine(); continue; } if (tk.v === ";") { line += ";"; pushLine(); continue; } } if (tk.t === "word") { const kw = this.formatKeyword(tk.v); const up = tk.v.toUpperCase(); if (breakBefore.has(up) && line.trim()) pushLine(); appendToken(kw, false); prevWordUpper = up; continue; } if (tk.t === "op" || tk.t === "string") { appendToken(tk.v, false); continue; } } pushLine(); this.outputValue = lines .join("\n") .replace(/\n{3,}/g, "\n\n") .replace(/\(\s+/g, "("); this.hasProcessed = true; } catch (err) { this.error = err?.message || $t("sqlViewer_failed"); } finally { this.isProcessing = false; } } copyResult() { if (!this.outputValue) return; navigator?.clipboard?.writeText(this.outputValue).then(() => { this.copied = true; setTimeout(() => { this.copied = false; }, 1200); }); } renderSqlLine(line) { const parts = []; const re = /(--.*$|\/\*[\s\S]*?\*\/|`[^`]*`|'(?:''|[^'])*'|"(?:[^"\\]|\\.)*"|\d+(?:\.\d+)?|[a-zA-Z_][\w$]*|[(),.;*+=<>-])/g; let last = 0; let m; while ((m = re.exec(line)) !== null) { if (m.index > last) parts.push(line.slice(last, m.index)); const token = m[0]; const up = token.toUpperCase(); if (token.startsWith("--") || token.startsWith("/*")) parts.push(html`${token}`); else if ( (token.startsWith("'") && token.endsWith("'")) || (token.startsWith('"') && token.endsWith('"')) || (token.startsWith("`") && token.endsWith("`")) ) parts.push(html`${token}`); else if (/^\d/.test(token)) parts.push(html`${token}`); else if (this.keywordSet().has(up)) parts.push(html`${token}`); else { const isWord = /^[a-zA-Z_][\w$]*$/.test(token); const rest = line.slice(m.index + token.length); const calledLikeFunction = /^\s*\(/.test(rest); if (isWord && calledLikeFunction && this.commonFunctions().has(up)) parts.push(html`${token}`); else if (/^[(),.;*+=<>-]$/.test(token)) parts.push(html`${token}`); else parts.push(token); } last = re.lastIndex; } if (last < line.length) parts.push(line.slice(last)); return parts; } renderColoredSql() { if (!this.outputValue) return ""; return this.outputValue .split("\n") .map( (line) => html`

${this.renderSqlLine(line)}

`, ); } renderResult() { if (this.error) return html`

${this.error}

`; if (!this.hasProcessed) return ""; const copyBtnClass = "btn btn-secondary btn-icon" + (this.copied ? " copied" : ""); const copyTitle = this.copied ? $t("sqlViewer_copied") : $t("sqlViewer_copyFormatted"); const copyLabel = this.copied ? "✓" : "⧉"; return html`

${this.renderColoredSql()}

`; } render() { useMeta({ title: $t("sqlViewer_title"), meta: { description: { name: 'description', content: $t('sqlViewer_subtitle') }, } }) const processBtnClass = "btn btn-primary" + (this.isProcessing ? " loading" : ""); const processLabel = this.isProcessing ? $t("sqlViewer_processing") : $t("sqlViewer_process"); return html`

${$t("sqlViewer_title")}

${$t("sqlViewer_subtitle")}

${this.hasProcessed || this.error ? html`

${this.renderResult()}` : ""}

`; } }