feat(CustomReply): 微调自定义回复页面，并将自定义回复调试日志开关挪至高级设置页 (#228)

src/components/misc/PageMiscAdvancedSettings.vue

@@ -42,6 +42,19 @@
       <el-switch v-model="config.enable"/>
     </el-form-item>
 
+    <h3>自定义回复</h3>
+    <el-form-item label="开启回复调试日志">
+      <template #label>
+        <span>回复调试日志</span>
+        <el-tooltip raw-content content="开启自定义回复调试日志，打印字符细节">
+          <el-icon>
+            <question-filled/>
+          </el-icon>
+        </el-tooltip>
+      </template>
+      <el-checkbox v-model="replyDebugMode">开启</el-checkbox>
+    </el-form-item>
+
     <h3>跑团日志</h3>
     <el-form-item label="自定义后端 URL">
       <template #label>
@@ -101,9 +114,11 @@ const config = ref<AdvancedConfig>({
   storyLogApiVersion: "",
   storyLogBackendToken: "",
 })
+const replyDebugMode = ref(false);
 
 onBeforeMount(async () => {
   config.value = await store.diceAdvancedConfigGet()
+  replyDebugMode.value = (await store.customReplyDebugModeGet()).value
   nextTick(() => {
     modified.value = false
   })
@@ -115,9 +130,13 @@ watch(() => config, (newValue, oldValue) => { //直接监听
 }, {
   deep: true
 });
+watch(() => replyDebugMode.value, (newValue, oldValue) => { //直接监听
+  modified.value = true
+});
 
 const submit = async () => {
   await store.diceAdvancedConfigSet(config.value)
+  store.customReplyDebugModeSet(replyDebugMode.value);
   config.value = await store.diceAdvancedConfigGet()
   modified.value = false
   emit('update:advanced-settings-show', config.value.show)
@@ -128,6 +147,7 @@ const submit = async () => {
 
 const submitGiveup = async () => {
   config.value = await store.diceAdvancedConfigGet()
+  replyDebugMode.value = (await store.customReplyDebugModeGet()).value
   modified.value = false
   nextTick(() => {
     modified.value = false

src/components/mod/PageCustomReply.vue

@@ -55,9 +55,9 @@
             :href="`${urlBase}/sd-api/configs/custom_reply/file_download?name=${encodeURIComponent(curFilename)}&token=${encodeURIComponent(store.token)}`">下载
           </el-button>
         </el-space>
-        <el-checkbox v-model="replyDebugMode">开启回复调试日志（打印字符细节）</el-checkbox>
+        <el-text class="mt-2" v-if="!cr.enable" type="warning">注意：启用后该文件中的自定义回复才会生效</el-text>
       </el-space>
-      <div class="reply-operation">
+      <div class="mt-4 sm:mt-0 reply-operation">
         <div>
           <el-tooltip content="新建一个自定义回复文件。">
             <el-button type="success" plain :icon="DocumentAdd" @click="customReplyFileNew">新建</el-button>
@@ -83,7 +83,8 @@
       <el-text type="danger" size="large" style="font-size: 1.5rem;">请先启用总开关！</el-text>
     </template>
     <template v-else>
-      <foldable-card ref="commonConditionsRef" type="div" :default-fold="true">
+      <foldable-card ref="commonConditionsRef" type="div" :default-fold="true"
+                     :class="cr.enable ? '' : 'disabled'">
         <template #title>
           <el-space size="large" wrap>
             <el-space size="small">
@@ -223,7 +224,6 @@ const fileItems = ref<any>([
 const uploadFileList = ref<any[]>([])
 
 const cr = ref<any>({ enable: true })
-const replyDebugMode = ref(false);
 
 const switchClick = () => {
   if (!store.curDice.config.customReplyConfigEnable) {
@@ -245,11 +245,6 @@ watch(() => cr.value, (newValue, oldValue) => { //直接监听
   modified.value = true
 }, { deep: true });
 
-watch(() => replyDebugMode.value, (newValue, oldValue) => {
-  store.customReplyDebugModeSet(newValue);
-}, { deep: true });
-
-
 watch(() => curFilename.value, (newValue, oldValue) => { //直接监听
   nextTick(() => {
     refreshCurrent();
@@ -463,9 +458,6 @@ onBeforeMount(async () => {
   fileItems.value = ret.items;
   curFilename.value = ret.items[0].filename;
   await store.diceConfigGet();
-  // 设置调试日志选项
-  ret = await store.customReplyDebugModeGet();
-  replyDebugMode.value = ret.value;
   await refreshCurrent();
 })
 

src/store/index.ts

@@ -476,7 +476,7 @@ export const useStore = defineStore('main', {
     },
 
     async customReplyDebugModeGet() {
-      const info = await backend.get(urlPrefix + '/configs/custom_reply/debug_mode')
+      const info: { value: boolean } = await backend.get(urlPrefix + '/configs/custom_reply/debug_mode')
       return info
     },