minnan-demo-app/src/views/Config.vue

<template>
  <div class="config-container">
    <div class="editor-container">
      <vue-monaco-editor 
        v-model:value="code"
        :options="MONACO_EDITOR_OPTIONS" 
      />
    </div>
    <div class="footer">
      <div>
        <a-button @click="resetConfig">恢复默认</a-button>
        <a-button @click="showHelp = true">
          <QuestionCircleOutlined />
        </a-button>
      </div>
      <div>
        <a-button @click="closeConfig">取消</a-button>
        <a-button type="primary" @click="saveConfig">保存配置</a-button>
      </div>
    </div>
    <a-modal
      title="配置格式说明"
      v-model:visible="showHelp"
      :footer="null"
      width="600px"
    >
      <ScrollRect scroll="vertical" :height="260" containerClass="help-content">
        <div class="help-section">
          <p class="help-text">配置文件使用JSON格式，包含一个应用数组。每个应用对象支持以下字段：</p>
        </div>    
        <div class="help-section">
          <h4 class="help-field-title">必填字段</h4>
          <ul class="help-list">
            <li><code>id</code>: 应用ID（数字类型，唯一）</li>
            <li><code>title</code>: 应用显示标题（字符串类型）</li>
            <li><code>url</code>: 应用地址URL（字符串类型）</li>
          </ul>
        </div>      
        <div class="help-section">
          <h4 class="help-field-title">可选字段</h4>
          <ul class="help-list">
            <li><code>keepScreenSize</code>: 是否保持显示尺寸比例（布尔类型，默认false）</li>
            <li><code>aspectRatio</code>: 屏幕尺寸比例（字符串类型，例如 "16/9"）</li>
          </ul>
        </div>       
        <div class="help-section">
          <h4 class="help-field-title">配置示例</h4>
          <div class="help-code">
            <pre>{{ configExample }}</pre>
          </div>
        </div>       
        <div class="help-section">
          <h4 class="help-field-title">使用说明</h4>
          <ul class="help-list">
            <li>每个应用必须有唯一的ID</li>
            <li>URL必须是完整的地址（包含http://或https://）</li>
            <li>设置<code>keepScreenSize</code>为true时，建议同时设置<code>aspectRatio</code></li>
            <li>修改配置后点击"保存配置"按钮生效</li>
          </ul>
        </div>
      </ScrollRect>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { Modal } from 'ant-design-vue'
import { onMounted, ref } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { ScrollRect } from '@imengyu/vue-scroll-rect'

const code = ref('')
const MONACO_EDITOR_OPTIONS = {
  language: 'json',
}
const showHelp = ref(false)

const configExample = ref(`[
  {
    "id": 1,
    "title": "Google",
    "url": "https://www.google.com"
  },
  {
    "id": 2,
    "title": "百度",
    "url": "https://www.baidu.com",
    "keepScreenSize": true,
    "aspectRatio": "16/9"
  },
  {
    "id": 3,
    "title": "GitHub",
    "url": "https://github.com"
  }
]`)

onMounted(() => {
  window.electronAPI.loadAppsJson().then((data) => {
    code.value = JSON.stringify(data, null, 2)
  })
})

function resetConfig() {
  window.electronAPI.loadDefaultAppsJson().then((data) => {
    code.value = JSON.stringify(data, null, 2)
  })
}
function closeConfig() {
  window.close()
}
function saveConfig() {
  try {
    JSON.parse(code.value);
  } catch (error) {
    Modal.error({
      title: '解析JSON失败',
      content: '请检查JSON格式是否正确。' + error,
    });
    return;
  }
  window.electronAPI.saveAppsJson(code.value)
  Modal.success({
    title: '保存成功',
    content: '配置已保存。',
    onOk() {
      closeConfig()
    }
  })
}
</script>

<style lang="scss">
.config-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .editor-container {
    flex: 1;
    position: relative;
  }
  .footer {
    padding: 10px;
    gap: 6px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;

    > div {
      display: flex;
      flex-direction: row;
      gap: 6px;
    }
  }
}

.help-content {
  max-height: 60vh;
  padding-right: 10px;

  .help-section {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .help-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #e8e8e8;
  }

  .help-field-title {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin: 0 0 8px 0;
  }

  .help-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 12px 0;
  }

  .help-list {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 12px 0;
    padding-left: 20px;

    li {
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    code {
      background-color: #f5f5f5;
      padding: 2px 4px;
      border-radius: 3px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 13px;
      color: #d73a49;
    }
  }

  .help-code {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 12px;
    margin: 8px 0;

    pre {
      margin: 0;
      font-family: 'Courier New', Courier, monospace;
      font-size: 13px;
      line-height: 1.5;
      color: #24292e;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}
</style>