
<script setup lang="ts">
import { api, siteSetting } from '@/api';
function changeSetting(id: string, content: string) {
    api.SettingController.updateSetting({ content }, id)
}

function changeCustomCSS(cssText: string) {
    let cssElement = document.getElementById("custom-css")
    siteSetting.css = cssText
    if (cssElement != null) cssElement.innerText = cssText
    api.SettingController.updateSetting({ "content": cssText }, siteSetting.keys.site.css)
}
</script>
<template>
    <el-input v-model="siteSetting.title" placeholder="网站标题"
        @change="changeSetting(siteSetting.keys.site.title, siteSetting.title)" show-word-limit maxlength="10" />
    <el-input v-model="siteSetting.footer" placeholder="页脚文本（支持HTML）"
        @change="changeSetting(siteSetting.keys.site.footer, siteSetting.footer)" show-word-limit maxlength="1024" />
    <el-input v-model="siteSetting.css" placeholder="自定义CSS" @change="changeCustomCSS(siteSetting.css)" type="textarea"
        autosize />
</template>

<style scoped>
.el-input {
    margin-bottom: 5px;
}
</style>