@veltra/desktop 1.0.0

package/dist/components/theme/style2.css

@@ -0,0 +1,377 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-theme {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-height: calc(100vh - 160px);
+  padding: 14px;
+  border: var(--u-border);
+  border-radius: var(--u-radius-large);
+  background: radial-gradient(circle at top right, rgba(30, 136, 229, 0.14), transparent 36%), linear-gradient(180deg, var(--u-bg-color-top) 0%, var(--u-bg-color-middle) 100%);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px) saturate(150%);
+  overflow: hidden;
+}
+.u-theme__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 4px;
+}
+.u-theme__header-copy strong {
+  display: block;
+  font-size: 16px;
+  color: var(--u-text-color-title);
+}
+.u-theme__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.u-theme__tag {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: rgba(30, 136, 229, 0.08);
+  color: var(--u-color-primary);
+  font-size: 12px;
+  font-weight: 700;
+}
+.u-theme__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.u-theme__search {
+  flex: 1;
+  min-width: 0;
+}
+.u-theme__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  gap: 16px;
+}
+.u-theme__toggle, .u-theme__preset, .u-theme__nav-item {
+  appearance: none;
+  border: none;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+}
+.u-theme__toggle {
+  flex-shrink: 0;
+  height: var(--u-form-component-height-default);
+  padding: 0 14px;
+  border-radius: 999px;
+  color: var(--u-text-color-second);
+  background: rgba(148, 163, 184, 0.12);
+  transition: all 0.22s ease;
+}
+.u-theme__toggle:hover {
+  background: rgba(148, 163, 184, 0.18);
+  color: var(--u-text-color-title);
+}
+.u-theme__toggle.is-active {
+  background: rgba(30, 136, 229, 0.12);
+  color: var(--u-color-primary);
+  box-shadow: inset 0 0 0 1px rgba(30, 136, 229, 0.18);
+}
+.u-theme__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 220px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+.u-theme__nav::-webkit-scrollbar {
+  width: 4px;
+}
+.u-theme__nav::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: rgba(148, 163, 184, 0.2);
+}
+.u-theme__nav-item {
+  display: grid;
+  gap: 3px;
+  padding: 10px 12px;
+  text-align: left;
+  border-radius: var(--u-radius-default);
+  background: var(--u-bg-color-top);
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  transition: all 0.22s ease;
+}
+.u-theme__nav-item:hover {
+  transform: translateY(-1px);
+  background: var(--u-bg-color-hover);
+  border-color: rgba(30, 136, 229, 0.16);
+}
+.u-theme__nav-item.is-active {
+  background: linear-gradient(135deg, rgba(30, 136, 229, 0.14), var(--u-bg-color-top));
+  border-color: rgba(30, 136, 229, 0.22);
+  box-shadow: 0 8px 20px rgba(30, 136, 229, 0.12);
+}
+.u-theme__nav-item.is-disabled {
+  opacity: 0.55;
+}
+.u-theme__nav-main {
+  font-size: var(--u-font-size-main-default);
+  font-weight: 600;
+  color: var(--u-text-color-title);
+}
+.u-theme__nav-meta {
+  font-size: var(--u-font-size-assist-default);
+  line-height: 1.4;
+  color: var(--u-text-color-second);
+}
+.u-theme__panel {
+  flex: 1;
+  min-height: 0;
+  border-radius: var(--u-radius-large);
+  background: linear-gradient(180deg, var(--u-bg-color-top), var(--u-bg-color-middle));
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.u-theme__panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 14px 12px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+.u-theme__panel-title {
+  margin: 0;
+  font-size: 15px;
+  color: var(--u-text-color-title);
+}
+.u-theme__panel-desc {
+  margin: 4px 0 0;
+  font-size: var(--u-font-size-assist-default);
+  line-height: 1.45;
+  color: var(--u-text-color-second);
+}
+.u-theme__panel-count {
+  flex-shrink: 0;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(30, 136, 229, 0.08);
+  color: var(--u-color-primary);
+  font-size: var(--u-font-size-assist-default);
+  font-weight: 700;
+}
+.u-theme__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+  padding: 12px 14px 14px;
+  overflow-y: auto;
+  align-items: start;
+  align-content: start;
+}
+.u-theme__item {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-radius: var(--u-radius-default);
+  background: var(--u-bg-color-top);
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  transition: all 0.22s ease;
+}
+.u-theme__item:hover {
+  border-color: rgba(30, 136, 229, 0.16);
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
+}
+.u-theme__item.is-changed {
+  background: linear-gradient(135deg, rgba(30, 136, 229, 0.08), var(--u-bg-color-top));
+  border-color: rgba(30, 136, 229, 0.18);
+}
+.u-theme__item-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+.u-theme__item-copy {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+.u-theme__item-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+.u-theme__item-label {
+  font-size: var(--u-font-size-main-default);
+  font-weight: 600;
+  color: var(--u-text-color-title);
+}
+.u-theme__item-code-label {
+  flex-shrink: 0;
+  font-size: 11px;
+  line-height: 1.3;
+  color: var(--u-text-color-assist);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.u-theme__item-code {
+  font-size: 11px;
+  line-height: 1.3;
+  color: var(--u-text-color-second);
+  word-break: break-all;
+}
+.u-theme__item-badge {
+  flex-shrink: 0;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(30, 136, 229, 0.1);
+  color: var(--u-color-primary);
+  font-size: 11px;
+  font-weight: 700;
+}
+.u-theme__item-hint {
+  margin: 0;
+  font-size: var(--u-font-size-assist-default);
+  line-height: 1.45;
+  color: var(--u-text-color-second);
+}
+.u-theme__palette-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.u-theme__palette-custom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.u-theme__palette-custom .u-palette {
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
+}
+.u-theme__palette-custom .u-input {
+  flex: 1;
+  width: 0;
+}
+.u-theme__palette-var {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.u-theme__palette-var .u-select {
+  flex: 1;
+  width: 0;
+}
+.u-theme__palette-var-label {
+  font-size: var(--u-font-size-assist-default);
+  color: var(--u-text-color-second);
+  flex-shrink: 0;
+  width: 68px;
+  text-align: right;
+}
+.u-theme__empty {
+  padding: 24px 16px;
+  text-align: center;
+}
+.u-theme__empty strong {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--u-text-color-title);
+}
+.u-theme__empty p {
+  margin: 0;
+  font-size: var(--u-font-size-main-small);
+  color: var(--u-text-color-second);
+}
+.u-theme__actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) repeat(2, auto);
+  gap: 8px;
+  align-items: center;
+}
+.u-theme__preset-group {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+.u-theme__preset {
+  flex: 1;
+  min-width: 0;
+  height: var(--u-form-component-height-default);
+  padding: 0 12px;
+  border-radius: var(--u-radius-default);
+  background: var(--u-bg-color-top);
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  color: var(--u-text-color-main);
+  transition: all 0.22s ease;
+}
+.u-theme__preset:hover {
+  border-color: rgba(30, 136, 229, 0.18);
+  color: var(--u-color-primary);
+  background: var(--u-bg-color-hover);
+}
+.u-theme__action-btn {
+  min-width: 74px;
+}
+.u-theme .u-input,
+.u-theme .u-number-input,
+.u-theme .u-select {
+  width: 100%;
+}
+@media (max-width: 480px) {
+  .u-theme {
+    padding: 12px;
+    gap: 10px;
+  }
+  .u-theme__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .u-theme__body {
+    flex-direction: column;
+  }
+  .u-theme__nav {
+    width: auto;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: visible;
+    padding-bottom: 4px;
+  }
+  .u-theme__nav-item {
+    flex-shrink: 0;
+  }
+  .u-theme__toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .u-theme__actions {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/components/theme/theme.js

@@ -0,0 +1,307 @@
+import _sfc_main$1 from "../button/button.js";
+import input_default from "../input/input.js";
+import _sfc_main$2 from "../number-input/number-input.js";
+import _sfc_main$3 from "../select/select.js";
+import _sfc_main$4 from "../palette/palette.js";
+import { THEME_SECTIONS } from "./schema.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx } from "vue";
+import { bem } from "@veltra/utils";
+import { UITheme, currentTheme, darkTheme, lightTheme, loadTheme } from "@veltra/styles/theme";
+//#region src/components/theme/theme.vue
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { style: {
+	"display": "flex",
+	"align-items": "center",
+	"gap": "8px"
+} };
+const _hoisted_3 = { style: { "font-size": "13px" } };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "UTheme",
+	__name: "theme",
+	props: { theme: {} },
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const cls = bem("theme");
+		const keyword = shallowRef("");
+		const changedOnly = shallowRef(false);
+		const activeSection = shallowRef(THEME_SECTIONS[0].key);
+		const colorVarOptions = computed(() => {
+			const options = [];
+			THEME_SECTIONS.forEach((section) => {
+				section.fields.forEach((field) => {
+					if (field.kind === "palette") {
+						const varName = `var(${getCssVarName(field.path)})`;
+						options.push({
+							label: `${field.label}`,
+							value: varName
+						});
+					}
+				});
+			});
+			return options;
+		});
+		const editorTheme = shallowRef();
+		const baselineTheme = shallowRef(createThemeSnapshot(lightTheme.theme));
+		const baselineLabel = shallowRef("浅色预设");
+		const lightPreset = createThemeSnapshot(lightTheme.theme);
+		const darkPreset = createThemeSnapshot(darkTheme.theme);
+		watch(computed(() => {
+			return props.theme ?? currentTheme.value ?? lightTheme;
+		}), (theme) => {
+			if (!props.theme && theme === editorTheme.value) return;
+			const nextTheme = props.theme ? theme : new UITheme(createThemeSnapshot(theme.theme));
+			editorTheme.value = nextTheme;
+			baselineTheme.value = createThemeSnapshot(nextTheme.theme);
+			baselineLabel.value = theme === darkTheme ? "深色预设" : theme === lightTheme ? "浅色预设" : props.theme ? "外部主题" : "当前主题";
+			if (!props.theme && currentTheme.value !== nextTheme) loadTheme(nextTheme);
+		}, { immediate: true });
+		const changedFieldKeys = computed(() => {
+			const keys = /* @__PURE__ */ new Set();
+			THEME_SECTIONS.forEach((section) => {
+				section.fields.forEach((field) => {
+					if (getByPath(editorTheme.value?.theme ?? lightTheme.theme, field.path) !== getByPath(baselineTheme.value, field.path)) keys.add(field.key);
+				});
+			});
+			return keys;
+		});
+		const sectionStates = computed(() => {
+			const normalizedKeyword = keyword.value.trim().toLowerCase();
+			return THEME_SECTIONS.map((section) => {
+				const sectionMatched = `${section.title} ${section.description}`.toLowerCase().includes(normalizedKeyword);
+				const visibleFields = section.fields.filter((field) => {
+					if (!(!normalizedKeyword || sectionMatched || `${field.label} ${field.key} ${getThemePath(field.path)} ${getCssVarName(field.path)}`.toLowerCase().includes(normalizedKeyword))) return false;
+					if (changedOnly.value && !changedFieldKeys.value.has(field.key)) return false;
+					return true;
+				});
+				const changedCount = section.fields.filter((field) => {
+					return changedFieldKeys.value.has(field.key);
+				}).length;
+				return {
+					...section,
+					visibleFields,
+					changedCount
+				};
+			});
+		});
+		watchEffect(() => {
+			if (sectionStates.value.find((section) => {
+				return section.key === activeSection.value && section.visibleFields.length;
+			})) return;
+			activeSection.value = sectionStates.value.find((section) => section.visibleFields.length)?.key ?? THEME_SECTIONS[0].key;
+		});
+		const activeState = computed(() => {
+			return sectionStates.value.find((section) => section.key === activeSection.value) ?? sectionStates.value[0];
+		});
+		function createThemeSnapshot(theme) {
+			return JSON.parse(JSON.stringify(theme));
+		}
+		function getByPath(source, path) {
+			return path.reduce((current, key) => current?.[key], source);
+		}
+		function setByPath(source, path, value) {
+			let current = source;
+			path.slice(0, -1).forEach((key) => {
+				current = current[key];
+			});
+			current[path[path.length - 1]] = value;
+		}
+		function getCssVarName(path) {
+			return `--u-${path.join("-")}`;
+		}
+		function getThemePath(path) {
+			return path.reduce((expression, key) => {
+				if (/^[A-Za-z_$][\w$]*$/.test(key)) return `${expression}.${key}`;
+				return `${expression}['${key}']`;
+			}, "theme");
+		}
+		function getFieldComponent(field) {
+			switch (field.kind) {
+				case "number": return _sfc_main$2;
+				case "select": return _sfc_main$3;
+				default: return input_default;
+			}
+		}
+		function getFieldValue(field) {
+			return getByPath(editorTheme.value?.theme ?? lightTheme.theme, field.path);
+		}
+		function getFieldProps(field) {
+			switch (field.kind) {
+				case "number": return {
+					min: field.min,
+					max: field.max,
+					step: field.step,
+					suffix: field.suffix
+				};
+				case "select": return {
+					options: field.options,
+					clearable: false,
+					placeholder: "请选择"
+				};
+				case "input": return { placeholder: field.placeholder };
+				default: return {};
+			}
+		}
+		function updateField(field, value) {
+			if (!editorTheme.value) return;
+			const normalizedValue = field.kind === "number" ? typeof value === "number" ? value : Number(value || 0) : String(value ?? "");
+			setByPath(editorTheme.value.theme, field.path, normalizedValue);
+			editorTheme.value.render();
+		}
+		function isFieldChanged(field) {
+			return changedFieldKeys.value.has(field.key);
+		}
+		function applySnapshot(snapshot, label) {
+			if (!editorTheme.value) return;
+			Object.assign(editorTheme.value.theme, createThemeSnapshot(snapshot));
+			baselineTheme.value = createThemeSnapshot(editorTheme.value.theme);
+			if (label) baselineLabel.value = label;
+			editorTheme.value.render();
+		}
+		function applyPreset(type) {
+			applySnapshot(type === "dark" ? darkPreset : lightPreset, type === "dark" ? "深色预设" : "浅色预设");
+		}
+		function handleResetTheme() {
+			if (!editorTheme.value) return;
+			Object.assign(editorTheme.value.theme, createThemeSnapshot(baselineTheme.value));
+			editorTheme.value.render();
+		}
+		function handleExportTheme() {
+			if (!editorTheme.value) return;
+			const themeConfig = JSON.stringify(createThemeSnapshot(editorTheme.value.theme), null, 2);
+			const blob = new Blob([themeConfig], { type: "application/json" });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = "theme-config.json";
+			a.click();
+			URL.revokeObjectURL(url);
+		}
+		__expose({
+			reset: handleResetTheme,
+			exportTheme: handleExportTheme,
+			applyLightPreset: () => applyPreset("light"),
+			applyDarkPreset: () => applyPreset("dark")
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).b) }, [
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("header")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("header-copy")) }, [..._cache[4] || (_cache[4] = [createElementVNode("strong", null, "主题变量配置", -1)])], 2), createElementVNode("div", { class: normalizeClass(unref(cls).e("tags")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("tag")) }, "基线 " + toDisplayString(baselineLabel.value), 3), createElementVNode("span", { class: normalizeClass(unref(cls).e("tag")) }, toDisplayString(changedFieldKeys.value.size) + " 改动", 3)], 2)], 2),
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("toolbar")) }, [createVNode(unref(input_default), {
+					modelValue: keyword.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => keyword.value = $event),
+					class: normalizeClass(unref(cls).e("search")),
+					placeholder: "搜索变量名、中文标签或分组"
+				}, null, 8, ["modelValue", "class"]), createElementVNode("button", {
+					type: "button",
+					class: normalizeClass([unref(cls).e("toggle"), unref(bem).is("active", changedOnly.value)]),
+					onClick: _cache[1] || (_cache[1] = ($event) => changedOnly.value = !changedOnly.value)
+				}, toDisplayString(changedOnly.value ? "查看全部" : "仅看改动"), 3)], 2),
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("body")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("nav")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(sectionStates.value, (section) => {
+					return openBlock(), createElementBlock("button", {
+						key: section.key,
+						type: "button",
+						class: normalizeClass([
+							unref(cls).e("nav-item"),
+							unref(bem).is("active", activeSection.value === section.key),
+							unref(bem).is("disabled", !section.visibleFields.length)
+						]),
+						onClick: ($event) => activeSection.value = section.key
+					}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("nav-main")) }, toDisplayString(section.title), 3), createElementVNode("span", { class: normalizeClass(unref(cls).e("nav-meta")) }, [createTextVNode(toDisplayString(section.visibleFields.length) + "/" + toDisplayString(section.fields.length) + " ", 1), section.changedCount ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" · " + toDisplayString(section.changedCount) + " 改动 ", 1)], 64)) : createCommentVNode("v-if", true)], 2)], 10, _hoisted_1);
+				}), 128))], 2), createElementVNode("div", { class: normalizeClass(unref(cls).e("panel")) }, [activeState.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("panel-head"))
+				}, [createElementVNode("div", null, [createElementVNode("h4", { class: normalizeClass(unref(cls).e("panel-title")) }, toDisplayString(activeState.value.title), 3), createElementVNode("p", { class: normalizeClass(unref(cls).e("panel-desc")) }, toDisplayString(activeState.value.description), 3)]), createElementVNode("div", { class: normalizeClass(unref(cls).e("panel-count")) }, toDisplayString(activeState.value.visibleFields.length) + " 项", 3)], 2)) : createCommentVNode("v-if", true), activeState.value?.visibleFields.length ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(cls).e("list"))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(activeState.value.visibleFields, (field) => {
+					return openBlock(), createElementBlock("div", {
+						key: field.key,
+						class: normalizeClass([unref(cls).e("item"), unref(bem).is("changed", isFieldChanged(field))])
+					}, [
+						createElementVNode("div", { class: normalizeClass(unref(cls).e("item-head")) }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("item-copy")) }, [
+							createElementVNode("label", { class: normalizeClass(unref(cls).e("item-label")) }, toDisplayString(field.label), 3),
+							createElementVNode("div", { class: normalizeClass(unref(cls).e("item-meta")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("item-code-label")) }, "Theme", 2), createElementVNode("code", { class: normalizeClass(unref(cls).e("item-code")) }, toDisplayString(getThemePath(field.path)), 3)], 2),
+							createElementVNode("div", { class: normalizeClass(unref(cls).e("item-meta")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("item-code-label")) }, "CSS", 2), createElementVNode("code", { class: normalizeClass(unref(cls).e("item-code")) }, toDisplayString(getCssVarName(field.path)), 3)], 2)
+						], 2), isFieldChanged(field) ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("item-badge"))
+						}, " 已修改 ", 2)) : createCommentVNode("v-if", true)], 2),
+						field.kind === "palette" ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("palette-field"))
+						}, [field.path[0] === "color" ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("palette-custom"))
+						}, [createVNode(unref(_sfc_main$4), {
+							"model-value": String(getFieldValue(field) ?? ""),
+							"onUpdate:modelValue": (value) => updateField(field, value)
+						}, null, 8, ["model-value", "onUpdate:modelValue"]), createVNode(unref(input_default), {
+							"model-value": String(getFieldValue(field) ?? ""),
+							placeholder: "例如：#1E88E5",
+							"onUpdate:modelValue": (value) => updateField(field, value)
+						}, null, 8, ["model-value", "onUpdate:modelValue"])], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(unref(cls).e("palette-custom")) }, [createVNode(unref(_sfc_main$4), {
+							"model-value": String(getFieldValue(field) ?? "").startsWith("var") ? "" : String(getFieldValue(field) ?? ""),
+							"onUpdate:modelValue": (value) => updateField(field, value)
+						}, null, 8, ["model-value", "onUpdate:modelValue"]), createVNode(unref(input_default), {
+							"model-value": String(getFieldValue(field) ?? ""),
+							placeholder: "输入颜色或变量",
+							"onUpdate:modelValue": (value) => updateField(field, value)
+						}, null, 8, ["model-value", "onUpdate:modelValue"])], 2), createElementVNode("div", { class: normalizeClass(unref(cls).e("palette-var")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("palette-var-label")) }, "或选择变量", 2), createVNode(unref(_sfc_main$3), {
+							"model-value": String(getFieldValue(field) ?? "").startsWith("var") ? String(getFieldValue(field) ?? "") : "",
+							options: colorVarOptions.value,
+							clearable: "",
+							placeholder: "选择预设变量",
+							"onUpdate:modelValue": (value) => updateField(field, value ?? "")
+						}, {
+							default: withCtx(({ option }) => [createElementVNode("div", _hoisted_2, [createElementVNode("div", { style: normalizeStyle(`width: 14px; height: 14px; border-radius: 4px; background: ${option.value}`) }, null, 4), createElementVNode("span", _hoisted_3, toDisplayString(option.label), 1)])]),
+							_: 1
+						}, 8, [
+							"model-value",
+							"options",
+							"onUpdate:modelValue"
+						])], 2)], 64))], 2)) : (openBlock(), createBlock(resolveDynamicComponent(getFieldComponent(field)), mergeProps({
+							key: 1,
+							"model-value": getFieldValue(field)
+						}, { ref_for: true }, getFieldProps(field), { "onUpdate:modelValue": (value) => updateField(field, value) }), null, 16, ["model-value", "onUpdate:modelValue"])),
+						field.hint || field.placeholder ? (openBlock(), createElementBlock("p", {
+							key: 2,
+							class: normalizeClass(unref(cls).e("item-hint"))
+						}, toDisplayString(field.hint ?? field.placeholder), 3)) : createCommentVNode("v-if", true)
+					], 2);
+				}), 128))], 2)) : (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(cls).e("empty"))
+				}, [..._cache[5] || (_cache[5] = [createElementVNode("strong", null, "没有匹配项", -1), createElementVNode("p", null, "换一个关键字，或关闭“仅看改动”后再继续筛选。", -1)])], 2))], 2)], 2),
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("actions")) }, [
+					createElementVNode("div", { class: normalizeClass(unref(cls).e("preset-group")) }, [createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(unref(cls).e("preset")),
+						onClick: _cache[2] || (_cache[2] = ($event) => applyPreset("light"))
+					}, " 浅色预设 ", 2), createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(unref(cls).e("preset")),
+						onClick: _cache[3] || (_cache[3] = ($event) => applyPreset("dark"))
+					}, " 深色预设 ", 2)], 2),
+					createVNode(unref(_sfc_main$1), {
+						class: normalizeClass(unref(cls).e("action-btn")),
+						onClick: handleResetTheme
+					}, {
+						default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode(" 重置 ", -1)])]),
+						_: 1
+					}, 8, ["class"]),
+					createVNode(unref(_sfc_main$1), {
+						class: normalizeClass(unref(cls).e("action-btn")),
+						type: "primary",
+						onClick: handleExportTheme
+					}, {
+						default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" 导出 ", -1)])]),
+						_: 1
+					}, 8, ["class"])
+				], 2)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=theme.js.map