NyaHome/webui/src/pages/admin/AdminNyahome.vue

<script setup lang="ts">
import ConfigCard from "@/components/admin/ConfigCard.vue";
import {useHead} from "@unhead/vue";
import {ref} from "vue";
import {api} from "@/tools/web.ts";
import InDev from "@/components/InDev.vue";
import {useMessage} from "naive-ui";
import type {ReturnDto} from "@/types/response.ts";

interface SiteConfig {
  site_name: string;
  site_url: string;
  backend_url: string;

  jwt_secret_key: string;

  smtp_enable: boolean;
  smtp_sender: string;
  smtp_hostname: string;
  smtp_port: number;
  smtp_username: string;
  smtp_password: string;
  smtp_use_tls: boolean;
}

const MESSAGE = useMessage()

useHead({
  title: "NyaHome 管理后台"
})

const siteConfig = ref<SiteConfig | null>(null);

function getConfig() {
  api.get("/admin/site_config/")
      .then((res) => {
        siteConfig.value = res.data as SiteConfig
        MESSAGE.success("成功获取设置~")
      })
}

function saveConfig() {
  api.post("/admin/site_config/", JSON.stringify(siteConfig.value))
      .then((res) => {
        siteConfig.value = res.data as SiteConfig
        MESSAGE.success("保存并刷新设置成功~")
      })
}

const testMailTo = ref("25565@qq.com")

function sendTestMail() {
  api.post("/admin/email-test/", JSON.stringify({to: testMailTo.value}))
      .then(res => res.data as ReturnDto)
      .then(data => data.success)
      .then(success => {
        if (success) {
          MESSAGE.success("邮件发送成功，请稍等片刻，然后检查收件箱~")
        } else {
          MESSAGE.error("后端表示邮件发送失败，请检查日志输出。")
        }
      })
}

</script>

<template>
  <n-card>
    <template #header>
      <n-h3 prefix="bar" style="margin: 0;">NyaHome 管理后台</n-h3>
    </template>
    <template #header-extra>
      <n-flex>
        <n-button type="success" secondary @click="getConfig()">获取设置</n-button>
        <n-button type="error" secondary @click="saveConfig()">保存设置</n-button>
      </n-flex>
    </template>
  </n-card>

  <n-tabs type="card" v-if="siteConfig !== null">
    <n-tab-pane name="user" tab="用户" display-directive="show">
      <config-card title="全部用户">
        <in-dev/>
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="chatroom" tab="聊天室" display-directive="show">
      <config-card title="全部聊天室">
        <in-dev/>
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="script" tab="剧本" display-directive="show">
      <config-card title="全部剧本">
        <in-dev/>
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="site_info" tab="站点信息" display-directive="show">
      <n-flex vertical>
        <config-card title="基本信息">
          <n-form>
            <n-form-item label="站点名称">
              <n-input v-model:value="siteConfig.site_name"/>
            </n-form-item>
            <n-form-item label="站点地址">
              <n-input v-model:value="siteConfig.site_url"/>
            </n-form-item>
            <n-alert type="info" class="in-form-alert">
              如果您需要将 NyaHome 的前后端分开部署，则需要在此设置后端地址。您需要自行处理跨域问题。
            </n-alert>
            <n-form-item label="FastAPI 后端地址">
              <n-input v-model:value="siteConfig.backend_url"/>
            </n-form-item>
          </n-form>
        </config-card>

        <config-card title="搜索引擎设置与 SEO">
          <in-dev/>
        </config-card>
      </n-flex>
    </n-tab-pane>

    <n-tab-pane name="permission" tab="权限设置" display-directive="show">
      <config-card title="用户权限">
        <in-dev/>
      </config-card>
    </n-tab-pane>

    <n-tab-pane name="security" tab="安全设置" display-directive="show">
      <n-flex vertical>
        <config-card title="JWT">
          <n-form>
            <n-alert type="info" class="in-form-alert">
              JWT（Json Web Token）签名需要一个密钥，你可以手动提供一个，或者自行生成一个。<br/>
              修改此密钥会导致所有用户的登录状态丢失（你也会），请一次性设置一个足够安全的。
            </n-alert>
            <n-form-item label="JWT 密钥">
              <n-input v-model:value="siteConfig.jwt_secret_key"/>
            </n-form-item>
          </n-form>
        </config-card>
      </n-flex>
    </n-tab-pane>

    <n-tab-pane name="remote_service" tab="外部服务" display-directive="show">
      <n-flex vertical>
        <config-card title="邮件 SMTP">
          <n-form>
            <n-alert type="info" class="in-form-alert">
              NayHome 无法自己发送邮件，需要配置 SMTP 服务。<br/>
              或者你也可以关闭邮件功能，当然芒果还是建议你配置一下的。
            </n-alert>
            <n-form-item label="启用邮件功能（SMTP）">
              <n-switch v-model:value="siteConfig.smtp_enable"/>
            </n-form-item>
            <n-form-item label="发件人邮件地址">
              <n-input v-model:value="siteConfig.smtp_sender"/>
            </n-form-item>
            <n-form-item label="SMTP 主机名">
              <n-input v-model:value="siteConfig.smtp_hostname"/>
            </n-form-item>
            <n-form-item label="SMTP 端口">
              <n-input-number v-model:value="siteConfig.smtp_port"/>
            </n-form-item>
            <n-form-item label="SMTP 用户名">
              <n-input v-model:value="siteConfig.smtp_username"/>
            </n-form-item>
            <n-form-item label="SMTP 密码（一般应当是一个独立的应用程序密码）">
              <n-input v-model:value="siteConfig.smtp_password"/>
            </n-form-item>
            <n-form-item label="使用 TLS/SSL 加密">
              <n-switch v-model:value="siteConfig.smtp_use_tls"/>
            </n-form-item>
          </n-form>
          <template #action>
            <n-flex vertical>
              <n-text>你可以在这里测试 NayHome 的邮件系统能否使用上述 SMTP
                设置工作，这会发送一封测试邮件。
              </n-text>
              <n-input v-model:value="testMailTo"/>
              <n-button secondary type="warning" @click="sendTestMail()">发送测试邮件</n-button>
            </n-flex>
          </template>
        </config-card>
      </n-flex>
    </n-tab-pane>
  </n-tabs>

  <n-empty size="large" v-else description="请尝试手动获取设置..."/>
</template>

<style scoped>
.in-form-alert {
  margin-bottom: 16px;
}
</style>