feat: add MCP server configuration and enhance scheduler task modal with advanced settings

.mcp.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "nuxt-remote": {
+      "type": "http",
+      "url": "https://nuxt.com/mcp"
+    },
+    "nuxt-ui-remote": {
+      "type": "http",
+      "url": "https://ui.nuxt.com/mcp"
+    }
+  }
+}

AGENTS.md

@@ -1,4 +1,4 @@
-## 开发页面时必须加载
+## 开发页面时必须加载如下mcp
 
-- nuxt-ui
+- nuxt-remote
-- nuxt
+- nuxt-ui-remote

app/components/SchedulerTaskModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from "vue"
+import type { SelectItem } from "@nuxt/ui"
 
 const props = defineProps({
   task: { type: Object as PropType<any>, default: null },
@@ -29,6 +30,23 @@ const form = reactive({
 
 const saving = ref(false)
 const error = ref("")
+const showAdvanced = ref(false)
+
+const typeItems: SelectItem[] = [
+  { label: "Function", value: "function" },
+  { label: "HTTP Request", value: "http" },
+]
+
+const httpMethodItems: SelectItem[] = [
+  { label: "GET", value: "GET" },
+  { label: "POST", value: "POST" },
+  { label: "PUT", value: "PUT" },
+  { label: "DELETE", value: "DELETE" },
+]
+
+const functionItems = computed<SelectItem[]>(() =>
+  props.registeredFunctions.map((f) => ({ label: f, value: f }))
+)
 
 const cronPresets = [
   { label: "Every minute", value: "* * * * *" },
@@ -68,127 +86,135 @@ async function save() {
     saving.value = false
   }
 }
+
+function onOverlayClick(e: MouseEvent) {
+  if ((e.target as HTMLElement).dataset.overlay === "true") {
+    emit("close")
+  }
+}
 </script>
 
 <template>
-  <UModal :open="true" @close="emit('close')">
+  <div
-    <template #header>
+    data-overlay="true"
-      <h2 class="text-lg font-semibold">{{ isEdit ? 'Edit' : 'Create' }} Task</h2>
+    class="fixed inset-0 z-50 flex items-start justify-center pt-[10vh] bg-black/40"
-    </template>
+    @click="onOverlayClick"
-
+  >
-    <div class="space-y-4 p-4">
+    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[80vh] overflow-y-auto">
-      <UAlert v-if="error" color="red" :title="error" />
+      <!-- Header -->
-
+      <div class="flex items-center justify-between px-6 py-4 border-b">
-      <div>
+        <h2 class="text-lg font-semibold">{{ isEdit ? 'Edit' : 'Create' }} Task</h2>
-        <label class="block text-sm font-medium mb-1">Name</label>
+        <UButton
-        <UInput v-model="form.name" placeholder="Task name" />
+          variant="ghost"
-      </div>
+          color="neutral"
-
+          size="sm"
-      <div>
+          icon="i-lucide-x"
-        <label class="block text-sm font-medium mb-1">Type</label>
+          square
-        <USelect
+          @click="emit('close')"
-          v-model="form.type"
-          :options="[
-            { label: 'Function', value: 'function' },
-            { label: 'HTTP Request', value: 'http' },
-          ]"
         />
       </div>
 
-      <div>
+      <!-- Body -->
-        <label class="block text-sm font-medium mb-1">Cron Expression</label>
+      <div class="space-y-4 p-6">
-        <UInput v-model="form.cronExpression" placeholder="0 9 * * *" />
+        <div v-if="error" class="bg-red-50 text-red-700 rounded-lg px-4 py-3 text-sm">
-        <div class="flex gap-1 mt-1 flex-wrap">
+          {{ error }}
-          <UButton
-            v-for="preset in cronPresets"
-            :key="preset.value"
-            size="xs"
-            variant="ghost"
-            @click="form.cronExpression = preset.value"
-          >
-            {{ preset.label }}
-          </UButton>
         </div>
-      </div>
 
-      <!-- Function fields -->
+        <UFormField label="Name" required>
-      <template v-if="form.type === 'function'">
+          <UInput v-model="form.name" placeholder="Task name" />
-        <div>
+        </UFormField>
-          <label class="block text-sm font-medium mb-1">Function</label>
+
-          <USelect
+        <UFormField label="Type" required>
-            v-model="form.functionName"
+          <USelect v-model="form.type" :items="typeItems" />
-            :options="registeredFunctions.map((f: string) => ({ label: f, value: f }))"
+        </UFormField>
-            placeholder="Select function"
+
-          />
+        <UFormField label="Cron Expression" required>
-        </div>
+          <UInput v-model="form.cronExpression" placeholder="0 9 * * *" />
-        <div>
+          <div class="flex gap-1 mt-1.5 flex-wrap">
-          <label class="block text-sm font-medium mb-1">Payload (JSON)</label>
+            <UButton
-          <UInput v-model="form.functionPayload" placeholder='{"key": "value"}' />
+              v-for="preset in cronPresets"
-        </div>
+              :key="preset.value"
-      </template>
+              size="xs"
+              variant="ghost"
+              @click="form.cronExpression = preset.value"
+            >
+              {{ preset.label }}
+            </UButton>
+          </div>
+        </UFormField>
 
-      <!-- HTTP fields -->
+        <!-- Function fields -->
-      <template v-if="form.type === 'http'">
+        <template v-if="form.type === 'function'">
-        <div class="grid grid-cols-4 gap-2">
+          <UFormField label="Function" required>
-          <div class="col-span-1">
-            <label class="block text-sm font-medium mb-1">Method</label>
             <USelect
-              v-model="form.httpMethod"
+              v-model="form.functionName"
-              :options="['GET','POST','PUT','DELETE'].map(m => ({ label: m, value: m }))"
+              :items="functionItems"
+              placeholder="Select function"
             />
+          </UFormField>
+          <UFormField label="Payload (JSON)">
+            <UInput v-model="form.functionPayload" placeholder='{"key": "value"}' />
+          </UFormField>
+        </template>
+
+        <!-- HTTP fields -->
+        <template v-if="form.type === 'http'">
+          <div class="grid grid-cols-4 gap-3">
+            <UFormField label="Method" class="col-span-1">
+              <USelect v-model="form.httpMethod" :items="httpMethodItems" />
+            </UFormField>
+            <UFormField label="URL" required class="col-span-3">
+              <UInput v-model="form.httpUrl" placeholder="https://example.com/api" />
+            </UFormField>
           </div>
-          <div class="col-span-3">
+          <UFormField label="Headers (JSON)">
-            <label class="block text-sm font-medium mb-1">URL</label>
+            <UInput v-model="form.httpHeaders" placeholder='{"Authorization": "Bearer ..."}' />
-            <UInput v-model="form.httpUrl" placeholder="https://example.com/api" />
+          </UFormField>
-          </div>
+          <UFormField label="Body">
-        </div>
+            <UTextarea v-model="form.httpBody" :rows="3" />
-        <div>
+          </UFormField>
-          <label class="block text-sm font-medium mb-1">Headers (JSON)</label>
+        </template>
-          <UInput v-model="form.httpHeaders" placeholder='{"Authorization": "Bearer ..."}' />
+
-        </div>
+        <!-- Advanced settings -->
-        <div>
+        <div class="border rounded-lg">
-          <label class="block text-sm font-medium mb-1">Body</label>
+          <button
-          <UInput v-model="form.httpBody" />
+            type="button"
-        </div>
+            class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium hover:bg-gray-50 rounded-lg transition-colors"
-      </template>
+            @click="showAdvanced = !showAdvanced"
-
+          >
-      <!-- Advanced settings -->
+            <span>Advanced</span>
-      <details class="border rounded-lg p-3">
+            <UIcon
-        <summary class="text-sm font-medium cursor-pointer">Advanced</summary>
+              :name="showAdvanced ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-        <div class="space-y-3 mt-3">
+              class="size-4 text-gray-400"
-          <label class="flex items-center gap-2">
+            />
-            <input type="checkbox" v-model="form.catchUp" />
+          </button>
-            <span class="text-sm">Catch up missed executions after restart</span>
+          <div v-if="showAdvanced" class="space-y-4 px-4 pb-4 border-t pt-4">
-          </label>
+            <div class="flex flex-col gap-3">
-          <label class="flex items-center gap-2">
+              <UCheckbox v-model="form.catchUp" label="Catch up missed executions after restart" />
-            <input type="checkbox" v-model="form.enabled" />
+              <UCheckbox v-model="form.enabled" label="Enabled" />
-            <span class="text-sm">Enabled</span>
-          </label>
-          <div class="grid grid-cols-3 gap-3">
-            <div>
-              <label class="block text-xs font-medium mb-1">Max Retries</label>
-              <UInput v-model.number="form.maxRetries" type="number" min="0" />
-            </div>
-            <div>
-              <label class="block text-xs font-medium mb-1">Retry Delay (s)</label>
-              <UInput v-model.number="form.retryDelaySeconds" type="number" min="1" />
             </div>
-            <div>
+            <div class="grid grid-cols-3 gap-3">
-              <label class="block text-xs font-medium mb-1">Timeout (s)</label>
+              <UFormField label="Max Retries">
-              <UInput v-model.number="form.timeoutSeconds" type="number" min="1" />
+                <UInput v-model.number="form.maxRetries" type="number" :min="0" />
+              </UFormField>
+              <UFormField label="Retry Delay (s)">
+                <UInput v-model.number="form.retryDelaySeconds" type="number" :min="1" />
+              </UFormField>
+              <UFormField label="Timeout (s)">
+                <UInput v-model.number="form.timeoutSeconds" type="number" :min="1" />
+              </UFormField>
             </div>
           </div>
         </div>
-      </details>
+      </div>
-    </div>
 
-    <template #footer>
+      <!-- Footer -->
-      <div class="flex justify-end gap-2">
+      <div class="flex justify-end gap-2 px-6 py-4 border-t bg-gray-50 rounded-b-xl">
         <UButton variant="ghost" @click="emit('close')">Cancel</UButton>
         <UButton :loading="saving" @click="save">
           {{ isEdit ? 'Update' : 'Create' }}
         </UButton>
       </div>
-    </template>
+    </div>
-  </UModal>
+  </div>
 </template>

app/pages/admin/scheduler/[id]/index.vue

@@ -28,8 +28,10 @@ function statusColor(status: string): "success" | "error" | "warning" | "neutral
   }
 }
 
-function timeAgo(ts: number): string {
+function timeAgo(ts: number | string): string {
-  const diff = Date.now() - ts
+  const t = typeof ts === "string" ? new Date(ts).getTime() : ts
+  const diff = Date.now() - t
+  if (isNaN(diff)) return ""
   const mins = Math.floor(diff / 60000)
   if (mins < 1) return "just now"
   if (mins < 60) return `${mins}m ago`

app/pages/admin/scheduler/index.vue

@@ -22,14 +22,6 @@ const statsData = computed(() => (stats.data.value ?? {}) as {
 const showCreateModal = ref(false)
 const editingTask = ref<TaskRow | null>(null)
 
-const columns: any[] = [
-  { key: "name", label: "Name" },
-  { key: "cronExpression", label: "Cron" },
-  { key: "type", label: "Type" },
-  { key: "enabled", label: "Status" },
-  { key: "actions", label: "" },
-]
-
 function statusBadge(enabled: number) {
   return enabled
     ? { label: "Active", color: "success" as const }
@@ -98,42 +90,52 @@ function onModalClose() {
     </div>
 
     <!-- Task table -->
-    <div class="rounded-lg border">
+    <div class="rounded-lg border overflow-hidden">
-      <UTable :rows="taskList" :columns="columns">
+      <table class="w-full">
-        <template #enabled-data="{ row }">
+        <thead>
-          <UBadge :color="statusBadge((row as unknown as TaskRow).enabled).color" variant="subtle">
+          <tr class="bg-gray-50 border-b">
-            {{ statusBadge((row as unknown as TaskRow).enabled).label }}
+            <th class="text-left px-4 py-3 text-sm font-medium text-gray-500">Name</th>
-          </UBadge>
+            <th class="text-left px-4 py-3 text-sm font-medium text-gray-500">Cron</th>
-        </template>
+            <th class="text-left px-4 py-3 text-sm font-medium text-gray-500">Type</th>
-        <template #actions-data="{ row: r }">
+            <th class="text-left px-4 py-3 text-sm font-medium text-gray-500">Status</th>
-          <div class="flex gap-1 justify-end">
+            <th class="text-right px-4 py-3 text-sm font-medium text-gray-500">Actions</th>
-            <UButton
+          </tr>
-              size="xs"
+        </thead>
-              variant="ghost"
+        <tbody>
-              @click="handleTrigger((r as unknown as TaskRow).id)"
+          <tr v-if="taskList.length === 0">
-            >Trigger</UButton>
+            <td colspan="5" class="text-center px-4 py-8 text-sm text-gray-400">No tasks yet</td>
-            <UButton
+          </tr>
-              size="xs"
+          <tr
-              variant="ghost"
+            v-for="t in taskList"
-              @click="handleToggle((r as unknown as TaskRow).id, !(r as unknown as TaskRow).enabled)"
+            :key="t.id"
-            >
+            class="border-b last:border-b-0 hover:bg-gray-50"
-              {{ (r as unknown as TaskRow).enabled ? "Pause" : "Resume" }}
+          >
-            </UButton>
+            <td class="px-4 py-3 text-sm">{{ t.name }}</td>
-            <UButton
+            <td class="px-4 py-3 text-sm font-mono">{{ t.cronExpression }}</td>
-              size="xs"
+            <td class="px-4 py-3 text-sm">
-              variant="ghost"
+              <UBadge :color="t.type === 'function' ? 'info' : 'primary'" variant="subtle" size="sm">
-              :to="`/admin/scheduler/${(r as unknown as TaskRow).id}`"
+                {{ t.type }}
-            >Detail</UButton>
+              </UBadge>
-            <UButton size="xs" variant="ghost" @click="openEdit(r as unknown as TaskRow)">Edit</UButton>
+            </td>
-            <UButton
+            <td class="px-4 py-3">
-              size="xs"
+              <UBadge :color="statusBadge(t.enabled).color" variant="subtle" size="sm">
-              variant="ghost"
+                {{ statusBadge(t.enabled).label }}
-              color="error"
+              </UBadge>
-              @click="handleDelete((r as unknown as TaskRow).id)"
+            </td>
-            >Delete</UButton>
+            <td class="px-4 py-3">
-          </div>
+              <div class="flex gap-1 justify-end">
-        </template>
+                <UButton size="xs" variant="ghost" @click="handleTrigger(t.id)">Trigger</UButton>
-      </UTable>
+                <UButton size="xs" variant="ghost" @click="handleToggle(t.id, !t.enabled)">
+                  {{ t.enabled ? 'Pause' : 'Resume' }}
+                </UButton>
+                <UButton size="xs" variant="ghost" :to="`/admin/scheduler/${t.id}`">Detail</UButton>
+                <UButton size="xs" variant="ghost" @click="openEdit(t)">Edit</UButton>
+                <UButton size="xs" variant="ghost" color="error" @click="handleDelete(t.id)">Delete</UButton>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
 
     <!-- Create/Edit Modal -->

server/scheduler/engine.ts

@@ -133,10 +133,13 @@ async function executeHttpTask(task: TaskRow): Promise<void> {
 
     const timeoutSignal = AbortSignal.timeout(task.timeoutSeconds * 1000);
 
+    const method = (task.httpMethod ?? "GET").toUpperCase();
+    const hasBody = ["POST", "PUT", "PATCH", "DELETE"].includes(method);
+
     const response = await fetch(task.httpUrl, {
-      method: (task.httpMethod ?? "GET").toUpperCase(),
+      method,
-      headers: { "Content-Type": "application/json", ...headers },
+      headers: hasBody ? { "Content-Type": "application/json", ...headers } : headers,
-      body: task.httpBody ?? undefined,
+      body: hasBody ? (task.httpBody ?? undefined) : undefined,
       signal: timeoutSignal,
     });