feat: add transcode workspace and media browser

frontend/src/views/SettingsView.vue

@@ -179,6 +179,7 @@ const form = reactive<SystemSettings>({
   webhookTimeoutSeconds: 15,
   notifyWebhookOnLiveStarted: true,
   notifyWebhookOnException: true,
+  webhookBodyTemplate: "",
   douyinUserAgent: "",
   douyinReferer: "https://live.douyin.com/",
   douyinCookie: ""
@@ -217,6 +218,34 @@ const emailTemplateTokens = [
   "{{occurredAtUtc}}"
 ];
 
+const webhookTemplateTokens = [
+  "{{appName}}",
+  "{{eventType}}",
+  "{{sentAtUtc}}",
+  "{{summary}}",
+  "{{detail}}",
+  "{{source}}",
+  "{{liveRoom.id}}",
+  "{{liveRoom.platform}}",
+  "{{liveRoom.roomId}}",
+  "{{liveRoom.title}}",
+  "{{liveRoom.anchorName}}",
+  "{{liveRoom.sourceUrl}}",
+  "{{recordTask.id}}",
+  "{{recordTask.recordSessionId}}",
+  "{{recordTask.status}}",
+  "{{recordTask.segmentIndex}}",
+  "{{recordTask.outputFilePath}}",
+  "{{report.date}}",
+  "{{report.summary.activeLiveRoomCount}}",
+  "{{report.summary.sessionCount}}",
+  "{{report.summary.segmentCount}}",
+  "{{report.summary.totalDurationSeconds}}",
+  "{{report.summary.warningCount}}",
+  "{{report.summary.errorCount}}",
+  "{{report.summary.totalDanmakuCount}}"
+];
+
 const eventScriptEnvironmentExamples = [
   { name: "LIVE_RECORDER_EVENT", example: "segment_completed", scope: "全部事件" },
   { name: "LIVE_RECORDER_PLATFORM", example: "Douyin", scope: "全部事件" },
@@ -404,7 +433,8 @@ async function testWebhook() {
     const { data } = await apiClient.post<WebhookTestResult>("/settings/test-webhook", {
       webhookUrl: form.webhookUrl,
       webhookHeaders: form.webhookHeaders,
-      webhookTimeoutSeconds: form.webhookTimeoutSeconds
+      webhookTimeoutSeconds: form.webhookTimeoutSeconds,
+      webhookBodyTemplate: form.webhookBodyTemplate
     });
     webhookTestResult.value = data;
     ElMessage[data.success ? "success" : "warning"](data.message);
@@ -1331,8 +1361,24 @@ onMounted(loadSettings);
                 />
               </el-form-item>
             </el-col>
+            <el-col :span="24">
+              <el-form-item label="自定义 JSON Body 模板">
+                <el-input
+                  v-model="form.webhookBodyTemplate"
+                  type="textarea"
+                  :rows="8"
+                  placeholder="{&#10;  &quot;event&quot;: &quot;{{eventType}}&quot;,&#10;  &quot;summary&quot;: &quot;{{summary}}&quot;,&#10;  &quot;roomId&quot;: &quot;{{liveRoom.roomId}}&quot;&#10;}"
+                />
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-form>
+        <div class="template-help">
+          <div class="template-help__label">Webhook 变量</div>
+          <div class="token-list">
+            <span v-for="token in webhookTemplateTokens" :key="token" class="token-chip">{{ token }}</span>
+          </div>
+        </div>
 
         <div class="action-strip">
           <div class="helper-text">测试会发送一份样例 live_started 负载，直接使用当前表单里的 URL、请求头和超时配置。</div>