diff --git a/plugins/addon/theme_configurator/template/admin/index.php b/plugins/addon/theme_configurator/template/admin/index.php
index 3bb840f..2de3b5a 100644
--- a/plugins/addon/theme_configurator/template/admin/index.php
+++ b/plugins/addon/theme_configurator/template/admin/index.php
@@ -1,82 +1,96 @@
-<!DOCTYPE html>
-<html lang="zh-cn">
+<link rel="stylesheet" href="/plugins/addon/theme_configurator/template/admin/theme.css" />
 
-<head>
-  <meta charset="UTF-8" />
-  <title>主题配置</title>
-  <style>
-    body {
-      padding: 24px;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-      background: #f5f6fa;
-    }
+<div id="theme-config-app" class="template" v-cloak>
+  <com-config>
+    <t-card class="theme-card">
+      <div class="theme-card__header">
+        <div>
+          <h3>主题配置</h3>
+          <p class="theme-desc">
+            在此集中维护 BlackFruit-UI 的导航、页脚、SEO、企业信息、轮播和侧边浮窗等配置。
+          </p>
+        </div>
+        <div>
+          <t-button variant="outline" @click="loadConfig" :loading="loading">
+            刷新
+          </t-button>
+          <t-button theme="primary" class="ml-10" @click="saveConfig" :loading="saving">
+            保存
+          </t-button>
+        </div>
+      </div>
+      <t-textarea v-model="configText" :autosize="{ minRows: 18, maxRows: 22 }" class="theme-textarea"
+        :placeholder="langPlaceholder"></t-textarea>
+      <p class="theme-tip">
+        JSON 结构与 `/console/v1/common` 返回值保持一致，保存后即可供前台调用。
+      </p>
+    </t-card>
+  </com-config>
+</div>
 
-    .card {
-      background: #fff;
-      border-radius: 8px;
-      padding: 24px;
-      box-shadow: 0 5px 16px rgba(0, 0, 0, 0.08);
-      max-width: 960px;
-      margin: 0 auto;
-    }
+<script src="/plugins/addon/theme_configurator/template/admin/lang/index.js"></script>
+<script>
+  (function () {
+    const host = location.origin;
+    const adminPath = location.pathname.split("/")[1];
+    const base = `${host}/${adminPath}/v1/theme/config`;
 
-    textarea {
-      width: 100%;
-      min-height: 280px;
-      border-radius: 8px;
-      border: 1px solid #dfe3ec;
-      padding: 12px;
-      font-family: "JetBrains Mono", Consolas, monospace;
-      font-size: 13px;
-      background: #0f172a;
-      color: #e2e8f0;
-    }
-
-    button {
-      margin-top: 16px;
-      padding: 10px 24px;
-      border: none;
-      border-radius: 6px;
-      background-color: #2563eb;
-      color: #fff;
-      cursor: pointer;
-      font-size: 14px;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="card">
-    <h2>主题配置 JSON</h2>
-    <p>此页面演示如何通过插件快速调整 BlackFruit-UI 的导航、页脚、SEO、轮播、侧边栏以及企业信息。直接编辑下方 JSON 提交即可。</p>
-    <textarea id="themeConfig"></textarea>
-    <button id="saveBtn">保存配置</button>
-  </div>
-
-  <script>
-    const input = document.getElementById("themeConfig");
-    const request = (url, options = {}) =>
-      fetch(url, Object.assign({ headers: { "Content-Type": "application/json" } }, options))
-        .then((res) => res.json());
-
-    request("/<?= DIR_ADMIN ?>/v1/theme/config").then((res) => {
-      input.value = JSON.stringify(res.data, null, 2);
+    new Vue({
+      el: "#theme-config-app",
+      data() {
+        return {
+          configText: "",
+          loading: false,
+          saving: false,
+          langPlaceholder: "请严格按照 JSON 格式填写主题配置...",
+        };
+      },
+      created() {
+        this.loadConfig();
+      },
+      methods: {
+        loadConfig() {
+          this.loading = true;
+          axios
+            .get(base, {
+              headers: {
+                Authorization: "Bearer " + localStorage.getItem("backJwt"),
+              },
+            })
+            .then((res) => {
+              const data = (res.data && res.data.data) || {};
+              this.configText = JSON.stringify(data, null, 2);
+            })
+            .finally(() => {
+              this.loading = false;
+            });
+        },
+        saveConfig() {
+          if (!this.configText.trim()) {
+            return this.$message.warning("内容不能为空");
+          }
+          let payload;
+          try {
+            payload = JSON.parse(this.configText);
+          } catch (err) {
+            return this.$message.error("JSON 解析失败：" + err.message);
+          }
+          this.saving = true;
+          axios
+            .post(base, payload, {
+              headers: {
+                Authorization: "Bearer " + localStorage.getItem("backJwt"),
+              },
+            })
+            .then((res) => {
+              this.$message.success(res.data.msg || "保存成功");
+              this.configText = JSON.stringify(res.data.data, null, 2);
+            })
+            .finally(() => {
+              this.saving = false;
+            });
+        },
+      },
     });
-
-    document.getElementById("saveBtn").addEventListener("click", () => {
-      try {
-        const payload = JSON.parse(input.value);
-        request("/<?= DIR_ADMIN ?>/v1/theme/config", {
-          method: "POST",
-          body: JSON.stringify(payload),
-        }).then((res) => {
-          alert(res.msg || "保存成功");
-        });
-      } catch (err) {
-        alert("JSON 解析失败: " + err.message);
-      }
-    });
-  </script>
-</body>
-
-</html>
+  })();
+</script>
diff --git a/plugins/addon/theme_configurator/template/admin/theme.css b/plugins/addon/theme_configurator/template/admin/theme.css
new file mode 100644
index 0000000..dc19c43
--- /dev/null
+++ b/plugins/addon/theme_configurator/template/admin/theme.css
@@ -0,0 +1,34 @@
+.theme-card {
+  margin: 20px;
+}
+
+.theme-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.theme-card__header h3 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.theme-desc {
+  margin: 4px 0 0;
+  color: #6b7280;
+}
+
+.theme-textarea textarea {
+  font-family: "JetBrains Mono", Consolas, monospace;
+}
+
+.theme-tip {
+  margin-top: 12px;
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
