init: init proj

web/src/pages/SettingsPage.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { NButton, NCard, NInput, NSpace, NTabPane, NTabs, useMessage } from 'naive-ui';
+import { getAdminToken, setAdminToken } from '../api/client';
+import { useSubscriptionsStore } from '../stores/subscriptions';
+
+const store = useSubscriptionsStore();
+const message = useMessage();
+
+const sections = ref<Record<string, string>>({});
+const adminToken = ref(getAdminToken());
+const activeSection = ref('General');
+
+onMounted(async () => {
+  await store.fetchAll();
+});
+
+watch(
+  () => store.settings,
+  (s) => {
+    if (!s) return;
+    sections.value = { ...s.surgeSections };
+  },
+  { immediate: true }
+);
+
+async function saveSections() {
+  await store.saveSettings({ surgeSections: sections.value });
+  message.success('已保存');
+}
+
+function saveAdminToken() {
+  setAdminToken(adminToken.value.trim());
+  message.success(adminToken.value.trim() ? '已保存到本浏览器' : '已清除');
+}
+</script>
+
+<template>
+  <div>
+    <h1 class="display page-title">设置</h1>
+
+    <NCard title="管理鉴权" size="small" class="block">
+      <p class="hint">
+        服务端设置了 ADMIN_TOKEN 环境变量时，管理接口需要携带同样的 token。此处保存的值仅存在本浏览器 localStorage。
+      </p>
+      <NSpace>
+        <NInput v-model:value="adminToken" type="password" show-password-on="click" placeholder="ADMIN_TOKEN" class="mono" style="width: 320px" />
+        <NButton @click="saveAdminToken">保存</NButton>
+      </NSpace>
+    </NCard>
+
+    <NCard title="Surge 原文段落" size="small" class="block">
+      <p class="hint">
+        这些段落按原文透传进 Surge 配置（[General]、[MITM] 等），此处直接编辑文本。ShadowRocket／ClashMeta 不使用这些内容。
+      </p>
+      <NTabs v-model:value="activeSection" type="line" size="small">
+        <NTabPane v-for="(content, name) in sections" :key="name" :name="String(name)" :tab="String(name)">
+          <NInput
+            v-model:value="sections[String(name)]"
+            type="textarea"
+            :rows="16"
+            class="mono section-editor"
+          />
+        </NTabPane>
+      </NTabs>
+      <NButton type="primary" style="margin-top: 12px" @click="saveSections">保存段落</NButton>
+    </NCard>
+  </div>
+</template>
+
+<style scoped>
+.page-title {
+  font-size: 20px;
+  margin: 0 0 20px;
+}
+
+.block {
+  margin-bottom: 16px;
+  max-width: 860px;
+}
+
+.hint {
+  color: var(--muted);
+  font-size: 12px;
+  margin: 0 0 12px;
+}
+
+.section-editor :deep(textarea) {
+  font-family: var(--font-mono) !important;
+  font-size: 12px;
+}
+</style>