From 0ade339435869d89ef758e7bd30430fbbd58216b Mon Sep 17 00:00:00 2001
From: liuhuibin <1650243281@qq.com>
Date: Mon, 27 Apr 2026 14:54:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0HLS=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=8D=8F=E8=AE=AE=E6=94=AF=E6=8C=81=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=8B=9B=E6=A0=87=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |    1 +
 src/components/layout/GlobalShell.vue |   32 +-
 src/router/modules/tendering.js       |    8 +
 src/views/supervision/video/index.vue |  394 +++++---
 src/views/tendering/award/index.vue   |   27 +-
 src/views/tendering/task/index.vue    | 1281 +++++++++++++++++++++++++
 6 files changed, 1599 insertions(+), 144 deletions(-)
 create mode 100644 src/views/tendering/task/index.vue

diff --git a/package.json b/package.json
index 2709f2d..4b95adf 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^1.7.7",
     "element-plus": "^2.8.1",
+    "hls.js": "^1.6.16",
     "less": "^4.2.0",
     "naive-ui": "^2.44.1",
     "vue": "^3.4.37",
diff --git a/src/components/layout/GlobalShell.vue b/src/components/layout/GlobalShell.vue
index 12aedd3..6acd063 100644
--- a/src/components/layout/GlobalShell.vue
+++ b/src/components/layout/GlobalShell.vue
@@ -20,11 +20,7 @@
             'menu-entry--children': Boolean(item.children?.length),
           }"
         >
-          <button
-            type="button"
-            class="menu-strip__item"
-            @click="handleMenuClick(item)"
-          >
+          <button type="button" class="menu-strip__item" @click="handleMenuClick(item)">
             {{ item.label }}
           </button>
 
@@ -49,22 +45,11 @@
       </nav>
 
       <div class="action-strip">
-        <button
-          type="button"
-          class="ai-badge"
-          aria-label="AI 助手"
-          @click="handlePrototypeNotice"
-        >
+        <button type="button" class="ai-badge" aria-label="AI 助手" @click="handlePrototypeNotice">
           <span class="ai-badge__icon">AI</span>
         </button>
 
-        <button
-          type="button"
-          class="log-button"
-          @click="handlePrototypeNotice"
-        >
-          导出工作日志
-        </button>
+        <button type="button" class="log-button" @click="handlePrototypeNotice">导出工作日志</button>
 
         <button
           type="button"
@@ -142,7 +127,12 @@ const menuItems = [
   {
     label: '招投标信息管理',
     routeName: 'TenderProjectManagement',
-    activeNames: ['TenderProjectManagement', 'AwardProjectManagement', 'SectorManagement'],
+    activeNames: [
+      'TenderProjectManagement',
+      'AwardProjectManagement',
+      'SectorManagement',
+      'TenderTaskConfig',
+    ],
     children: [
       {
         label: '招标项目管理',
@@ -158,6 +148,10 @@ const menuItems = [
         label: '板块管理',
         routeName: 'SectorManagement',
       },
+      {
+        label: '任务配置',
+        routeName: 'TenderTaskConfig',
+      },
     ],
   },
   { label: '系统管理' },
diff --git a/src/router/modules/tendering.js b/src/router/modules/tendering.js
index 18402ce..0d45e20 100644
--- a/src/router/modules/tendering.js
+++ b/src/router/modules/tendering.js
@@ -23,4 +23,12 @@ export default [
       title: '板块管理',
     },
   },
+  {
+    path: '/tendering/task-config',
+    name: 'TenderTaskConfig',
+    component: () => import('@/views/tendering/task/index.vue'),
+    meta: {
+      title: '任务配置',
+    },
+  },
 ];
diff --git a/src/views/supervision/video/index.vue b/src/views/supervision/video/index.vue
index 3535a11..5221804 100644
--- a/src/views/supervision/video/index.vue
+++ b/src/views/supervision/video/index.vue
@@ -47,6 +47,19 @@
           class="filter-field filter-field--code"
           placeholder="国标号"
         />
+        <el-select
+          v-model="filters.videoProtocol"
+          clearable
+          class="filter-field"
+          placeholder="视频协议"
+        >
+          <el-option
+            v-for="option in protocolOptions"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
         <el-select
           v-model="filters.status"
           clearable
@@ -63,10 +76,8 @@
     <div class="panel-card">
       <div class="table-toolbar">
         <div class="table-toolbar__group">
-          <el-button type="primary" @click="openCreateDialog">新增视频点位</el-button>
-          <el-button :disabled="!selectedIds.length" @click="deleteSelected">
-            批量删除
-          </el-button>
+          <el-button type="primary" @click="openCreateDialog">新增监控视频</el-button>
+          <el-button :disabled="!selectedIds.length" @click="deleteSelected">批量删除</el-button>
         </div>
 
         <div class="table-toolbar__summary">
@@ -83,19 +94,29 @@
       >
         <el-table-column type="selection" width="52" />
         <el-table-column label="工程名称" prop="projectName" min-width="220" show-overflow-tooltip />
-        <el-table-column label="主要工程地点" prop="projectLocation" min-width="200" show-overflow-tooltip />
-        <el-table-column label="摄像机点位" prop="cameraPoint" min-width="180" show-overflow-tooltip />
-        <el-table-column label="通道号" prop="channelCode" min-width="140" show-overflow-tooltip />
         <el-table-column
-          label="国标号"
-          prop="nationalStandardCode"
-          min-width="210"
+          label="主要工程地点"
+          prop="projectLocation"
+          min-width="180"
           show-overflow-tooltip
-        >
+        />
+        <el-table-column label="摄像机点位" prop="cameraPoint" min-width="180" show-overflow-tooltip />
+        <el-table-column label="通道号" prop="channelCode" min-width="120" show-overflow-tooltip />
+        <el-table-column label="国标号" prop="nationalStandardCode" min-width="210" show-overflow-tooltip>
           <template #default="{ row }">
             <span class="code-badge">{{ row.nationalStandardCode }}</span>
           </template>
         </el-table-column>
+        <el-table-column label="视频协议" prop="videoProtocol" min-width="120">
+          <template #default="{ row }">
+            <span class="protocol-badge">{{ formatProtocol(row.videoProtocol) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="播放链接" prop="playUrl" min-width="280" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="link-text">{{ row.playUrl }}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="状态" prop="status" min-width="110">
           <template #default="{ row }">
             <span
@@ -115,11 +136,7 @@
                 直播
               </button>
               <button type="button" class="row-action" @click="openEditDialog(row)">编辑</button>
-              <button
-                type="button"
-                class="row-action row-action--danger"
-                @click="deleteRecord(row)"
-              >
+              <button type="button" class="row-action row-action--danger" @click="deleteRecord(row)">
                 删除
               </button>
             </div>
@@ -147,7 +164,7 @@
     <el-dialog
       v-model="dialogVisible"
       :title="`${editingRecordId ? '编辑' : '新增'}监控视频`"
-      width="760px"
+      width="820px"
       destroy-on-close
     >
       <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="110px">
@@ -169,10 +186,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="主要工程地点">
-            <el-input
-              :model-value="formModel.projectLocation || '请选择工程名称后自动带出'"
-              disabled
-            />
+            <el-input :model-value="formModel.projectLocation || '选择项目后自动带出'" disabled />
           </el-form-item>
           <el-form-item label="摄像机点位" prop="cameraPoint">
             <el-input v-model="formModel.cameraPoint" placeholder="请输入摄像机点位" />
@@ -183,6 +197,19 @@
           <el-form-item label="国标号" prop="nationalStandardCode">
             <el-input v-model="formModel.nationalStandardCode" placeholder="请输入国标号" />
           </el-form-item>
+          <el-form-item label="视频协议" prop="videoProtocol">
+            <el-select v-model="formModel.videoProtocol" placeholder="请选择视频协议" class="select-field">
+              <el-option
+                v-for="option in protocolOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="播放链接" prop="playUrl" class="form-grid__span-2">
+            <el-input v-model="formModel.playUrl" placeholder="请输入播放链接" />
+          </el-form-item>
           <el-form-item label="状态" prop="status">
             <el-select v-model="formModel.status" placeholder="请选择状态" class="select-field">
               <el-option label="在线" value="在线" />
@@ -206,7 +233,7 @@
     <el-dialog
       v-model="liveDialogVisible"
       title="视频直播"
-      width="900px"
+      width="960px"
       destroy-on-close
       @closed="handleLiveDialogClosed"
     >
@@ -236,6 +263,10 @@
               <span class="live-meta-item__label">通道号</span>
               <strong class="live-meta-item__value">{{ liveRecord.channelCode || '-' }}</strong>
             </div>
+            <div class="live-meta-item">
+              <span class="live-meta-item__label">视频协议</span>
+              <strong class="live-meta-item__value">{{ formatProtocol(liveRecord.videoProtocol) }}</strong>
+            </div>
             <div class="live-meta-item">
               <span class="live-meta-item__label">国标号</span>
               <strong class="live-meta-item__value">{{ liveRecord.nationalStandardCode }}</strong>
@@ -258,7 +289,7 @@
           ></video>
           <div class="live-screen__overlay"></div>
           <div v-if="isStartingLive" class="live-screen__mask">
-            <span>正在连接摄像头...</span>
+            <span>正在连接视频流...</span>
           </div>
           <div v-else-if="liveError" class="live-screen__mask live-screen__mask--error">
             <p>{{ liveError }}</p>
@@ -277,6 +308,7 @@
 </template>
 
 <script setup>
+import Hls from 'hls.js';
 import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import storage from '@/utils/storage';
@@ -284,6 +316,8 @@ import storage from '@/utils/storage';
 const STORAGE_KEY = 'admin-pc:supervision-videos';
 const DEFAULT_WEBRTC_STREAM_URL =
   'webrtc://104.168.15.133:15123/proxy/sms/index/api/webrtc?app=rtp&stream=chhv1os&type=play';
+const DEFAULT_HLS_STREAM_URL = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
+
 const locationOptions = [
   '江苏省/南京市',
   '江苏省/无锡市',
@@ -300,6 +334,11 @@ const locationOptions = [
   '江苏省/宿迁市',
 ];
 
+const protocolOptions = [
+  { label: 'WebRTC', value: 'webrtc' },
+  { label: 'HLS', value: 'hls' },
+];
+
 const initialRecords = [
   {
     id: 'video_1',
@@ -308,6 +347,8 @@ const initialRecords = [
     cameraPoint: '1号塔吊西南侧',
     channelCode: 'CH-001',
     nationalStandardCode: 'GB34020000001320000001',
+    videoProtocol: 'webrtc',
+    playUrl: DEFAULT_WEBRTC_STREAM_URL,
     status: '在线',
     creator: '王敏',
     updatedAt: '2026-04-27 09:12:00',
@@ -319,6 +360,8 @@ const initialRecords = [
     cameraPoint: '南门车辆通道',
     channelCode: 'CH-002',
     nationalStandardCode: 'GB34020000001320000002',
+    videoProtocol: 'hls',
+    playUrl: DEFAULT_HLS_STREAM_URL,
     status: '在线',
     creator: '李峰',
     updatedAt: '2026-04-27 09:18:00',
@@ -330,6 +373,8 @@ const initialRecords = [
     cameraPoint: '主设备吊装区',
     channelCode: 'CH-003',
     nationalStandardCode: 'GB34020000001320000003',
+    videoProtocol: 'webrtc',
+    playUrl: DEFAULT_WEBRTC_STREAM_URL,
     status: '离线',
     creator: '陈宇',
     updatedAt: '2026-04-27 09:26:00',
@@ -341,6 +386,8 @@ const initialRecords = [
     cameraPoint: '材料堆场东口',
     channelCode: 'CH-004',
     nationalStandardCode: 'GB34020000001320000004',
+    videoProtocol: 'hls',
+    playUrl: DEFAULT_HLS_STREAM_URL,
     status: '在线',
     creator: '赵晴',
     updatedAt: '2026-04-27 09:33:00',
@@ -352,6 +399,8 @@ const initialRecords = [
     cameraPoint: '外立面登高作业区',
     channelCode: 'CH-005',
     nationalStandardCode: 'GB34020000001320000005',
+    videoProtocol: 'webrtc',
+    playUrl: DEFAULT_WEBRTC_STREAM_URL,
     status: '离线',
     creator: '顾晨',
     updatedAt: '2026-04-27 09:44:00',
@@ -363,6 +412,8 @@ const initialRecords = [
     cameraPoint: '钢结构拼装场',
     channelCode: 'CH-006',
     nationalStandardCode: 'GB34020000001320000006',
+    videoProtocol: 'hls',
+    playUrl: DEFAULT_HLS_STREAM_URL,
     status: '在线',
     creator: '刘颖',
     updatedAt: '2026-04-27 09:55:00',
@@ -374,6 +425,8 @@ const initialRecords = [
     cameraPoint: '桥面摊铺区',
     channelCode: 'CH-007',
     nationalStandardCode: 'GB34020000001320000007',
+    videoProtocol: 'webrtc',
+    playUrl: DEFAULT_WEBRTC_STREAM_URL,
     status: '在线',
     creator: '王敏',
     updatedAt: '2026-04-27 10:08:00',
@@ -385,6 +438,8 @@ const initialRecords = [
     cameraPoint: '访客登记口',
     channelCode: 'CH-008',
     nationalStandardCode: 'GB34020000001320000008',
+    videoProtocol: 'hls',
+    playUrl: DEFAULT_HLS_STREAM_URL,
     status: '离线',
     creator: '李峰',
     updatedAt: '2026-04-27 10:14:00',
@@ -396,6 +451,8 @@ const initialRecords = [
     cameraPoint: 'AGV调度主通道',
     channelCode: 'CH-009',
     nationalStandardCode: 'GB34020000001320000009',
+    videoProtocol: 'webrtc',
+    playUrl: DEFAULT_WEBRTC_STREAM_URL,
     status: '在线',
     creator: '陈宇',
     updatedAt: '2026-04-27 10:27:00',
@@ -407,6 +464,8 @@ const initialRecords = [
     cameraPoint: '冷机吊装通道',
     channelCode: 'CH-010',
     nationalStandardCode: 'GB34020000001320000010',
+    videoProtocol: 'hls',
+    playUrl: DEFAULT_HLS_STREAM_URL,
     status: '离线',
     creator: '赵晴',
     updatedAt: '2026-04-27 10:36:00',
@@ -425,6 +484,7 @@ const liveRecord = ref(null);
 const isStartingLive = ref(false);
 const liveError = ref('');
 const rtcPeerConnection = ref(null);
+const hlsPlayer = ref(null);
 
 const filters = reactive({
   projectName: '',
@@ -432,6 +492,7 @@ const filters = reactive({
   cameraPoint: '',
   channelCode: '',
   nationalStandardCode: '',
+  videoProtocol: '',
   status: '',
 });
 
@@ -441,18 +502,27 @@ const createEmptyForm = () => ({
   cameraPoint: '',
   channelCode: '',
   nationalStandardCode: '',
+  videoProtocol: 'webrtc',
+  playUrl: DEFAULT_WEBRTC_STREAM_URL,
   status: '在线',
   creator: '管理员',
   updatedAt: '',
 });
 
-const normalizeRecord = (record) => ({
-  ...createEmptyForm(),
-  ...record,
-  projectLocation: normalizeProjectLocation(record?.projectLocation),
-  creator: record?.creator || '管理员',
-  updatedAt: record?.updatedAt || formatCurrentDateTime(),
-});
+const normalizeRecord = (record) => {
+  const protocol = normalizeProtocol(record?.videoProtocol);
+  const playUrl = normalizePlayUrl(protocol, record?.playUrl);
+
+  return {
+    ...createEmptyForm(),
+    ...record,
+    projectLocation: normalizeProjectLocation(record?.projectLocation),
+    videoProtocol: protocol,
+    playUrl,
+    creator: record?.creator || '管理员',
+    updatedAt: record?.updatedAt || formatCurrentDateTime(),
+  };
+};
 
 const buildSeededRecords = () => {
   const storedRecords = storage.getLocalStorage(STORAGE_KEY);
@@ -474,21 +544,20 @@ const buildSeededRecords = () => {
 
 const records = ref(buildSeededRecords());
 const formModel = reactive(createEmptyForm());
+
 const projectOptions = computed(() => {
   const projectMap = new Map();
 
   records.value.forEach((record) => {
-    if (!record.projectName) {
+    if (!record.projectName || projectMap.has(record.projectName)) {
       return;
     }
 
-    if (!projectMap.has(record.projectName)) {
-      projectMap.set(record.projectName, {
-        label: record.projectName,
-        value: record.projectName,
-        location: normalizeProjectLocation(record.projectLocation),
-      });
-    }
+    projectMap.set(record.projectName, {
+      label: record.projectName,
+      value: record.projectName,
+      location: normalizeProjectLocation(record.projectLocation),
+    });
   });
 
   return [...projectMap.values()];
@@ -499,34 +568,32 @@ const formRules = {
   cameraPoint: [{ required: true, message: '请输入摄像机点位', trigger: 'blur' }],
   channelCode: [{ required: true, message: '请输入通道号', trigger: 'blur' }],
   nationalStandardCode: [{ required: true, message: '请输入国标号', trigger: 'blur' }],
+  videoProtocol: [{ required: true, message: '请选择视频协议', trigger: 'change' }],
+  playUrl: [{ required: true, message: '请输入播放链接', trigger: 'blur' }],
   status: [{ required: true, message: '请选择状态', trigger: 'change' }],
   creator: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
 };
 
 const filteredRecords = computed(() =>
   records.value.filter((record) => {
-    const matchesProjectName = filters.projectName
-      ? record.projectName === filters.projectName
-      : true;
-
+    const matchesProjectName = filters.projectName ? record.projectName === filters.projectName : true;
     const matchesLocation = filters.projectLocation
       ? record.projectLocation === filters.projectLocation
       : true;
-
     const matchesCameraPoint = filters.cameraPoint
       ? record.cameraPoint.toLowerCase().includes(filters.cameraPoint.trim().toLowerCase())
       : true;
-
     const matchesChannelCode = filters.channelCode
       ? record.channelCode.toLowerCase().includes(filters.channelCode.trim().toLowerCase())
       : true;
-
     const matchesCode = filters.nationalStandardCode
       ? record.nationalStandardCode
           .toLowerCase()
           .includes(filters.nationalStandardCode.trim().toLowerCase())
       : true;
-
+    const matchesProtocol = filters.videoProtocol
+      ? record.videoProtocol === filters.videoProtocol
+      : true;
     const matchesStatus = filters.status ? record.status === filters.status : true;
 
     return (
@@ -535,6 +602,7 @@ const filteredRecords = computed(() =>
       matchesCameraPoint &&
       matchesChannelCode &&
       matchesCode &&
+      matchesProtocol &&
       matchesStatus
     );
   }),
@@ -562,6 +630,7 @@ const resetFilters = () => {
   filters.cameraPoint = '';
   filters.channelCode = '';
   filters.nationalStandardCode = '';
+  filters.videoProtocol = '';
   filters.status = '';
   currentPage.value = 1;
 };
@@ -574,7 +643,7 @@ const openCreateDialog = () => {
 
 const openEditDialog = (record) => {
   editingRecordId.value = record.id;
-  Object.assign(formModel, createEmptyForm(), record);
+  Object.assign(formModel, createEmptyForm(), normalizeRecord(record));
   syncProjectLocation(record.projectName);
   dialogVisible.value = true;
 };
@@ -589,13 +658,15 @@ const submitForm = async () => {
     ? records.value.find((record) => record.id === editingRecordId.value) || null
     : null;
 
-  const payload = {
+  const protocol = normalizeProtocol(formModel.videoProtocol);
+  const payload = normalizeRecord({
     ...(existingRecord || {}),
-    ...createEmptyForm(),
     ...formModel,
     id: editingRecordId.value || `video_${Date.now()}`,
+    videoProtocol: protocol,
+    playUrl: normalizePlayUrl(protocol, formModel.playUrl),
     updatedAt: formatCurrentDateTime(),
-  };
+  });
 
   if (editingRecordId.value) {
     records.value = records.value.map((record) =>
@@ -676,7 +747,7 @@ const openLiveDialog = async (record) => {
     return;
   }
 
-  liveRecord.value = record;
+  liveRecord.value = normalizeRecord(record);
   liveDialogVisible.value = true;
   await startLiveStream();
 };
@@ -693,7 +764,7 @@ const handleLiveDialogClosed = () => {
 };
 
 const startLiveStream = async () => {
-  if (!liveDialogVisible.value) {
+  if (!liveDialogVisible.value || !liveRecord.value) {
     return;
   }
 
@@ -708,72 +779,122 @@ const startLiveStream = async () => {
       throw new Error('video element unavailable');
     }
 
-    const peerConnection = new RTCPeerConnection();
-    rtcPeerConnection.value = peerConnection;
+    const protocol = normalizeProtocol(liveRecord.value.videoProtocol);
+    const playUrl = normalizePlayUrl(protocol, liveRecord.value.playUrl);
 
-    const mediaStream = new MediaStream();
-    liveVideoRef.value.srcObject = mediaStream;
-
-    peerConnection.ontrack = (event) => {
-      const [stream] = event.streams;
-      if (stream) {
-        liveVideoRef.value.srcObject = stream;
-        return;
-      }
-
-      mediaStream.addTrack(event.track);
-      liveVideoRef.value.srcObject = mediaStream;
-    };
-
-    peerConnection.onconnectionstatechange = () => {
-      if (['failed', 'disconnected', 'closed'].includes(peerConnection.connectionState)) {
-        liveError.value = 'WebRTC 连接已断开，请稍后重试。';
-      }
-    };
-
-    peerConnection.addTransceiver('audio', { direction: 'recvonly' });
-    peerConnection.addTransceiver('video', { direction: 'recvonly' });
-
-    const offer = await peerConnection.createOffer({
-      offerToReceiveAudio: true,
-      offerToReceiveVideo: true,
-    });
-
-    await peerConnection.setLocalDescription(offer);
-
-    const response = await fetch(resolveWebRtcEndpoint(DEFAULT_WEBRTC_STREAM_URL), {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/sdp',
-      },
-      body: offer.sdp,
-      mode: 'cors',
-    });
-
-    const rawResponseText = await response.text();
-    const responsePayload = parseWebRtcResponse(rawResponseText);
-    const answerSdp = extractAnswerSdp(responsePayload, rawResponseText);
-
-    await peerConnection.setRemoteDescription(
-      new RTCSessionDescription({
-        type: responsePayload?.type || 'answer',
-        sdp: answerSdp,
-      }),
-    );
-
-    const playTask = liveVideoRef.value.play?.();
-    if (playTask?.catch) {
-      await playTask.catch(() => undefined);
+    if (protocol === 'hls') {
+      await startHlsStream(playUrl);
+    } else {
+      await startWebRtcStream(playUrl);
     }
   } catch (error) {
-    liveError.value = error?.message || 'WebRTC 视频流连接失败，请稍后重试。';
+    liveError.value = error?.message || '视频流连接失败，请稍后重试。';
     stopLiveStream();
   } finally {
     isStartingLive.value = false;
   }
 };
 
+const startHlsStream = async (url) => {
+  if (!url) {
+    throw new Error('HLS 播放链接不能为空');
+  }
+
+  const video = liveVideoRef.value;
+
+  if (Hls.isSupported()) {
+    const hls = new Hls();
+    hlsPlayer.value = hls;
+    hls.loadSource(url);
+    hls.attachMedia(video);
+    hls.on(Hls.Events.ERROR, (_, data) => {
+      if (data?.fatal) {
+        liveError.value = 'HLS 视频流播放失败，请检查播放链接。';
+        stopLiveStream();
+      }
+    });
+  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = url;
+  } else {
+    throw new Error('当前浏览器不支持 HLS 播放');
+  }
+
+  const playTask = video.play?.();
+  if (playTask?.catch) {
+    await playTask.catch(() => undefined);
+  }
+};
+
+const startWebRtcStream = async (url) => {
+  if (!url) {
+    throw new Error('WebRTC 播放链接不能为空');
+  }
+
+  const peerConnection = new RTCPeerConnection();
+  rtcPeerConnection.value = peerConnection;
+
+  const mediaStream = new MediaStream();
+  liveVideoRef.value.srcObject = mediaStream;
+
+  peerConnection.ontrack = (event) => {
+    const [stream] = event.streams;
+    if (stream) {
+      liveVideoRef.value.srcObject = stream;
+      return;
+    }
+
+    mediaStream.addTrack(event.track);
+    liveVideoRef.value.srcObject = mediaStream;
+  };
+
+  peerConnection.onconnectionstatechange = () => {
+    if (['failed', 'disconnected', 'closed'].includes(peerConnection.connectionState)) {
+      liveError.value = 'WebRTC 连接已断开，请稍后重试。';
+    }
+  };
+
+  peerConnection.addTransceiver('audio', { direction: 'recvonly' });
+  peerConnection.addTransceiver('video', { direction: 'recvonly' });
+
+  const offer = await peerConnection.createOffer({
+    offerToReceiveAudio: true,
+    offerToReceiveVideo: true,
+  });
+
+  await peerConnection.setLocalDescription(offer);
+
+  const response = await fetch(resolveWebRtcEndpoint(url), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/sdp',
+    },
+    body: offer.sdp,
+    mode: 'cors',
+  });
+
+  const rawResponseText = await response.text();
+  const responsePayload = parseWebRtcResponse(rawResponseText);
+  const answerSdp = extractAnswerSdp(responsePayload, rawResponseText);
+
+  await peerConnection.setRemoteDescription(
+    new RTCSessionDescription({
+      type: responsePayload?.type || 'answer',
+      sdp: answerSdp,
+    }),
+  );
+
+  const playTask = liveVideoRef.value.play?.();
+  if (playTask?.catch) {
+    await playTask.catch(() => undefined);
+  }
+};
+
 const stopLiveStream = () => {
+  if (hlsPlayer.value) {
+    hlsPlayer.value.destroy();
+    hlsPlayer.value = null;
+  }
+
   if (rtcPeerConnection.value) {
     rtcPeerConnection.value.ontrack = null;
     rtcPeerConnection.value.onconnectionstatechange = null;
@@ -797,6 +918,7 @@ watch(
     filters.cameraPoint,
     filters.channelCode,
     filters.nationalStandardCode,
+    filters.videoProtocol,
     filters.status,
   ],
   () => {
@@ -814,12 +936,16 @@ watch(
   { immediate: true },
 );
 
+watch(liveDialogVisible, (visible) => {
+  if (!visible) {
+    stopLiveStream();
+  }
+});
+
 watch(
-  liveDialogVisible,
-  (visible) => {
-    if (!visible) {
-      stopLiveStream();
-    }
+  () => formModel.videoProtocol,
+  (protocol) => {
+    formModel.playUrl = normalizePlayUrl(protocol, formModel.playUrl);
   },
 );
 
@@ -839,6 +965,20 @@ function formatCurrentDateTime() {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
 
+function normalizeProtocol(value) {
+  return String(value || 'webrtc').toLowerCase() === 'hls' ? 'hls' : 'webrtc';
+}
+
+function normalizePlayUrl(protocol, value) {
+  const trimmed = String(value || '').trim();
+
+  if (trimmed) {
+    return trimmed;
+  }
+
+  return normalizeProtocol(protocol) === 'hls' ? DEFAULT_HLS_STREAM_URL : DEFAULT_WEBRTC_STREAM_URL;
+}
+
 function normalizeProjectLocation(value) {
   if (!value) {
     return '';
@@ -873,6 +1013,10 @@ function syncProjectLocation(projectName) {
   formModel.projectLocation = matchedProject?.location || '';
 }
 
+function formatProtocol(value) {
+  return normalizeProtocol(value) === 'hls' ? 'HLS' : 'WebRTC';
+}
+
 function resolveWebRtcEndpoint(url) {
   if (!url) {
     return '';
@@ -1041,6 +1185,21 @@ function extractAnswerSdp(payload, rawText) {
   background: linear-gradient(135deg, rgba(226, 239, 255, 0.92), rgba(242, 248, 255, 0.98));
 }
 
+.protocol-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 64px;
+  padding: 5px 10px;
+  color: #1557b0;
+  font-size: 12px;
+  background: rgba(21, 87, 176, 0.1);
+}
+
+.link-text {
+  color: #385372;
+}
+
 .status-badge {
   display: inline-flex;
   align-items: center;
@@ -1103,6 +1262,10 @@ function extractAnswerSdp(payload, rawText) {
   gap: 4px 18px;
 }
 
+.form-grid__span-2 {
+  grid-column: 1 / -1;
+}
+
 .live-panel {
   display: flex;
   flex-direction: column;
@@ -1183,6 +1346,7 @@ function extractAnswerSdp(payload, rawText) {
   color: #182b44;
   font-size: 14px;
   line-height: 1.5;
+  word-break: break-all;
 }
 
 .live-screen {
@@ -1274,6 +1438,10 @@ function extractAnswerSdp(payload, rawText) {
     grid-template-columns: 1fr;
   }
 
+  .form-grid__span-2 {
+    grid-column: auto;
+  }
+
   .live-screen,
   .live-screen__video {
     min-height: 280px;
diff --git a/src/views/tendering/award/index.vue b/src/views/tendering/award/index.vue
index e316790..7a25824 100644
--- a/src/views/tendering/award/index.vue
+++ b/src/views/tendering/award/index.vue
@@ -3,6 +3,9 @@
     title="中标项目管理"
     storage-key="admin-pc:award-projects"
     date-range-prop="awardDate"
+    amount-range-prop="awardAmount"
+    amount-range-unit="万元"
+    :amount-scale="10000"
     :columns="columns"
     :form-fields="formFields"
     :initial-records="initialRecords"
@@ -19,7 +22,7 @@ const columns = [
   { prop: 'sectionName', label: '标段名称', minWidth: 220 },
   { prop: 'constructionCompany', label: '建设单位名称', minWidth: 220 },
   { prop: 'awardCompany', label: '中标人名称', minWidth: 220 },
-  { prop: 'awardAmount', label: '中标价', minWidth: 160, type: 'currency' },
+  { prop: 'awardAmount', label: '中标金额', minWidth: 160, type: 'wanAmount' },
   { prop: 'awardDate', label: '中标时间', minWidth: 140 },
   { prop: 'detailLink', label: '详情链接', minWidth: 96, width: 96, type: 'link' },
 ];
@@ -31,7 +34,7 @@ const formFields = [
   { prop: 'sectionName', label: '标段名称', type: 'text' },
   { prop: 'constructionCompany', label: '建设单位名称', type: 'text' },
   { prop: 'awardCompany', label: '中标人名称', type: 'text' },
-  { prop: 'awardAmount', label: '中标价', type: 'amount' },
+  { prop: 'awardAmount', label: '中标金额', type: 'amount' },
   { prop: 'awardDate', label: '中标时间', type: 'date' },
   { prop: 'detailLink', label: '详情链接', type: 'url' },
 ];
@@ -48,7 +51,7 @@ const initialRecords = [
     awardAmount: 17980000,
     awardDate: '2026-04-22',
     detailLink: 'https://example.com/award/1',
-    provinceCity: '江苏省南京市',
+    provinceCity: '江苏省/南京市',
     sectorType: '基础设施',
     projectType: '工程类',
   },
@@ -63,7 +66,7 @@ const initialRecords = [
     awardAmount: 8860000,
     awardDate: '2026-04-20',
     detailLink: 'https://example.com/award/2',
-    provinceCity: '江苏省苏州市',
+    provinceCity: '江苏省/苏州市',
     sectorType: '智慧园区',
     projectType: '服务类',
   },
@@ -78,7 +81,7 @@ const initialRecords = [
     awardAmount: 13250000,
     awardDate: '2026-04-19',
     detailLink: 'https://example.com/award/3',
-    provinceCity: '江苏省徐州市',
+    provinceCity: '江苏省/徐州市',
     sectorType: '能源环保',
     projectType: '采购类',
   },
@@ -93,7 +96,7 @@ const initialRecords = [
     awardAmount: 5980000,
     awardDate: '2026-04-17',
     detailLink: 'https://example.com/award/4',
-    provinceCity: '江苏省常州市',
+    provinceCity: '江苏省/常州市',
     sectorType: '智慧园区',
     projectType: '采购类',
   },
@@ -108,7 +111,7 @@ const initialRecords = [
     awardAmount: 11360000,
     awardDate: '2026-04-16',
     detailLink: 'https://example.com/award/5',
-    provinceCity: '江苏省南通市',
+    provinceCity: '江苏省/南通市',
     sectorType: '公共服务',
     projectType: '服务类',
   },
@@ -123,7 +126,7 @@ const initialRecords = [
     awardAmount: 14750000,
     awardDate: '2026-04-14',
     detailLink: 'https://example.com/award/6',
-    provinceCity: '江苏省扬州市',
+    provinceCity: '江苏省/扬州市',
     sectorType: '智能制造',
     projectType: '采购类',
   },
@@ -138,7 +141,7 @@ const initialRecords = [
     awardAmount: 26880000,
     awardDate: '2026-04-12',
     detailLink: 'https://example.com/award/7',
-    provinceCity: '江苏省镇江市',
+    provinceCity: '江苏省/镇江市',
     sectorType: '基础设施',
     projectType: '工程类',
   },
@@ -153,7 +156,7 @@ const initialRecords = [
     awardAmount: 3620000,
     awardDate: '2026-04-10',
     detailLink: 'https://example.com/award/8',
-    provinceCity: '江苏省盐城市',
+    provinceCity: '江苏省/盐城市',
     sectorType: '能源环保',
     projectType: '服务类',
   },
@@ -168,7 +171,7 @@ const initialRecords = [
     awardAmount: 8450000,
     awardDate: '2026-04-08',
     detailLink: 'https://example.com/award/9',
-    provinceCity: '江苏省连云港市',
+    provinceCity: '江苏省/连云港市',
     sectorType: '物流仓储',
     projectType: '其他',
   },
@@ -183,7 +186,7 @@ const initialRecords = [
     awardAmount: 21400000,
     awardDate: '2026-04-06',
     detailLink: 'https://example.com/award/10',
-    provinceCity: '江苏省宿迁市',
+    provinceCity: '江苏省/宿迁市',
     sectorType: '文旅配套',
     projectType: '工程类',
   },
diff --git a/src/views/tendering/task/index.vue b/src/views/tendering/task/index.vue
new file mode 100644
index 0000000..f6fa460
--- /dev/null
+++ b/src/views/tendering/task/index.vue
@@ -0,0 +1,1281 @@
+<template>
+  <section class="task-page">
+    <div class="task-layout">
+      <div class="task-layout__main">
+        <div class="panel-card panel-card--search">
+          <div class="filter-bar">
+            <el-select
+              v-model="filters.provinceCity"
+              clearable
+              filterable
+              class="filter-field filter-field--wide"
+              placeholder="所属省市"
+            >
+              <el-option
+                v-for="option in provinceCityOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+            <el-select
+              v-model="filters.sectorType"
+              clearable
+              class="filter-field"
+              placeholder="板块类型"
+            >
+              <el-option
+                v-for="option in sectorTypeOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+            <el-button @click="resetFilters">重置</el-button>
+          </div>
+        </div>
+
+        <div class="panel-card">
+          <div class="table-toolbar">
+            <div class="table-toolbar__group">
+              <el-button type="primary" @click="openCreateDialog">新增任务</el-button>
+            </div>
+            <div class="table-toolbar__summary">
+              <span>共 {{ filteredRecords.length }} 条任务</span>
+              <span v-if="selectedRecord">当前配置：{{ selectedRecord.sectorType }}</span>
+            </div>
+          </div>
+
+          <el-table
+            :data="paginatedRecords"
+            row-key="id"
+            class="task-table"
+            highlight-current-row
+            @current-change="handleCurrentChange"
+            @row-click="handleRowClick"
+          >
+            <el-table-column label="所属省市" prop="provinceCity" min-width="150" show-overflow-tooltip />
+            <el-table-column label="板块类型" prop="sectorType" min-width="120" show-overflow-tooltip />
+            <el-table-column label="提示词" prop="prompt" min-width="240" show-overflow-tooltip>
+              <template #default="{ row }">
+                <div class="prompt-cell">
+                  <span class="prompt-cell__text">{{ row.prompt }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="调用模型" prop="model" min-width="130" />
+            <el-table-column label="状态" prop="status" min-width="96">
+              <template #default="{ row }">
+                <span
+                  class="status-badge"
+                  :class="row.status === '启用' ? 'status-badge--online' : 'status-badge--offline'"
+                >
+                  {{ row.status }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="206">
+              <template #default="{ row }">
+                <div class="row-actions">
+                  <button type="button" class="row-action" @click.stop="openEditDialog(row)">编辑</button>
+                  <button type="button" class="row-action row-action--run" @click.stop="runTask(row)">
+                    运行
+                  </button>
+                  <button type="button" class="row-action" @click.stop="toggleStatus(row)">
+                    {{ row.status === '启用' ? '禁用' : '启用' }}
+                  </button>
+                  <button
+                    type="button"
+                    class="row-action row-action--danger"
+                    @click.stop="deleteRecord(row)"
+                  >
+                    删除
+                  </button>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div class="pagination-bar">
+            <div class="pagination-bar__summary">
+              <span>第 {{ currentPage }} / {{ totalPages }} 页</span>
+              <span>每页 {{ pageSize }} 条</span>
+            </div>
+
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              background
+              layout="prev, pager, next, sizes"
+              :page-sizes="[5, 10, 20, 50]"
+              :total="filteredRecords.length"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="task-layout__side">
+        <div class="config-card config-card--hero">
+          <div class="config-card__eyebrow">TASK CONFIG</div>
+          <template v-if="selectedRecord">
+            <div class="config-hero">
+              <div>
+                <h2 class="config-hero__title">{{ selectedRecord.sectorType }}</h2>
+                <p class="config-hero__meta">{{ selectedRecord.provinceCity }} / {{ selectedRecord.model }}</p>
+              </div>
+              <span
+                class="status-badge"
+                :class="selectedRecord.status === '启用' ? 'status-badge--online' : 'status-badge--offline'"
+              >
+                {{ selectedRecord.status }}
+              </span>
+            </div>
+            <p class="config-hero__prompt">{{ selectedRecord.prompt }}</p>
+          </template>
+          <el-empty v-else description="请选择左侧任务后再配置" />
+        </div>
+
+        <template v-if="selectedRecord">
+          <div class="config-card">
+            <div class="config-card__header">
+              <div>
+                <h3 class="config-card__title">Agent 配置</h3>
+                <p class="config-card__desc">控制任务调用的服务地址与轮询行为。</p>
+              </div>
+            </div>
+
+            <el-form label-width="118px" class="config-form">
+              <el-form-item label="服务地址">
+                <el-input v-model="configForm.baseUrl" placeholder="请输入服务地址" />
+              </el-form-item>
+              <el-form-item label="轮询间隔 (毫秒)">
+                <el-input-number
+                  v-model="configForm.pollingInterval"
+                  :min="500"
+                  :step="500"
+                  :controls="false"
+                  class="number-field"
+                />
+              </el-form-item>
+              <el-form-item label="超时时间 (毫秒)">
+                <el-input-number
+                  v-model="configForm.timeout"
+                  :min="1000"
+                  :step="1000"
+                  :controls="false"
+                  class="number-field"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="config-card">
+            <div class="config-card__header">
+              <div>
+                <h3 class="config-card__title">定时任务配置</h3>
+                <p class="config-card__desc">设置调度策略，并可立即执行当前任务。</p>
+              </div>
+              <el-button type="primary" plain @click="runScheduledTaskNow">
+                立即执行定时任务
+              </el-button>
+            </div>
+
+            <el-form label-width="118px" class="config-form">
+              <el-form-item label="启用状态">
+                <el-radio-group v-model="configForm.scheduleEnabled">
+                  <el-radio-button label="启用" />
+                  <el-radio-button label="禁用" />
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="执行方式">
+                <el-select v-model="configForm.executeMode" class="select-field" placeholder="请选择执行方式">
+                  <el-option label="每天" value="每天" />
+                  <el-option label="每周" value="每周" />
+                  <el-option label="每月" value="每月" />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="configForm.executeMode === '每周'" label="执行日期">
+                <el-select v-model="configForm.weekDay" class="select-field" placeholder="请选择星期">
+                  <el-option
+                    v-for="option in weekDayOptions"
+                    :key="option"
+                    :label="option"
+                    :value="option"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item v-if="configForm.executeMode === '每月'" label="执行日期">
+                <el-select v-model="configForm.monthDay" class="select-field" placeholder="请选择日期">
+                  <el-option
+                    v-for="option in monthDayOptions"
+                    :key="option"
+                    :label="`${option} 日`"
+                    :value="option"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="执行时间">
+                <el-time-picker
+                  v-model="configForm.executeTime"
+                  value-format="HH:mm:ss"
+                  format="HH:mm:ss"
+                  class="select-field"
+                  placeholder="请选择执行时间"
+                />
+              </el-form-item>
+            </el-form>
+
+            <div class="schedule-summary">
+              <div class="schedule-summary__item">
+                <span class="schedule-summary__label">最近运行</span>
+                <strong class="schedule-summary__value">{{ selectedRecord.lastRunAt || '暂无' }}</strong>
+              </div>
+              <div class="schedule-summary__item">
+                <span class="schedule-summary__label">调度摘要</span>
+                <strong class="schedule-summary__value">{{ scheduleSummary }}</strong>
+              </div>
+            </div>
+
+            <div class="config-actions">
+              <el-button @click="resetConfigForm">重置配置</el-button>
+              <el-button type="primary" @click="saveConfig">保存配置</el-button>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="`${editingRecordId ? '编辑' : '新增'}任务配置`"
+      width="720px"
+      destroy-on-close
+    >
+      <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="102px">
+        <div class="form-grid">
+          <el-form-item label="所属省市" prop="provinceCity">
+            <el-select v-model="formModel.provinceCity" filterable class="select-field" placeholder="请选择所属省市">
+              <el-option
+                v-for="option in provinceCityOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="板块类型" prop="sectorType">
+            <el-select v-model="formModel.sectorType" class="select-field" placeholder="请选择板块类型">
+              <el-option
+                v-for="option in sectorTypeOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="调用模型" prop="model">
+            <el-select v-model="formModel.model" class="select-field" placeholder="请选择调用模型">
+              <el-option
+                v-for="option in modelOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="formModel.status" class="select-field" placeholder="请选择状态">
+              <el-option label="启用" value="启用" />
+              <el-option label="禁用" value="禁用" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="提示词" prop="prompt" class="form-grid__span-2">
+            <el-input
+              v-model="formModel.prompt"
+              type="textarea"
+              :rows="5"
+              maxlength="500"
+              show-word-limit
+              placeholder="请输入任务提示词"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </section>
+</template>
+
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import storage from '@/utils/storage';
+
+const STORAGE_KEY = 'admin-pc:tendering-task-configs';
+
+const provinceCityOptions = [
+  '江苏省/南京市',
+  '江苏省/无锡市',
+  '江苏省/徐州市',
+  '江苏省/常州市',
+  '江苏省/苏州市',
+  '江苏省/南通市',
+  '江苏省/连云港市',
+  '江苏省/淮安市',
+  '江苏省/盐城市',
+  '江苏省/扬州市',
+  '江苏省/镇江市',
+  '江苏省/泰州市',
+  '江苏省/宿迁市',
+];
+
+const sectorTypeOptions = ['基础设施', '智慧园区', '能源环保', '公共服务', '智能制造', '物流仓储'];
+const modelOptions = ['GPT-4.1', 'GPT-4.1-mini', 'o4-mini', 'DeepSeek-R1', 'Claude 3.7 Sonnet'];
+const weekDayOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+const monthDayOptions = Array.from({ length: 31 }, (_, index) => index + 1);
+
+const defaultAgentConfig = {
+  baseUrl: 'https://api.example.com/v1',
+  pollingInterval: 3000,
+  timeout: 15000,
+};
+
+const defaultScheduleConfig = {
+  scheduleEnabled: '启用',
+  executeMode: '每天',
+  executeTime: '09:00:00',
+  weekDay: '周一',
+  monthDay: 1,
+};
+
+const initialRecords = [
+  {
+    id: 'task_1',
+    provinceCity: '江苏省/南京市',
+    sectorType: '基础设施',
+    prompt: '抓取南京市基础设施类招标公告，提炼项目名称、预算金额、发布时间和详情链接。',
+    model: 'GPT-4.1',
+    status: '启用',
+    ...defaultAgentConfig,
+    ...defaultScheduleConfig,
+    lastRunAt: '2026-04-27 09:30:00',
+  },
+  {
+    id: 'task_2',
+    provinceCity: '江苏省/苏州市',
+    sectorType: '智慧园区',
+    prompt: '监控苏州市智慧园区板块的最新招标信息，过滤掉历史重复项目并保留原文链接。',
+    model: 'o4-mini',
+    status: '启用',
+    baseUrl: 'https://agent.example.com/api',
+    pollingInterval: 5000,
+    timeout: 20000,
+    scheduleEnabled: '启用',
+    executeMode: '每周',
+    executeTime: '10:30:00',
+    weekDay: '周三',
+    monthDay: 1,
+    lastRunAt: '2026-04-27 08:45:00',
+  },
+  {
+    id: 'task_3',
+    provinceCity: '江苏省/无锡市',
+    sectorType: '能源环保',
+    prompt: '采集无锡市能源环保类招投标信息，并自动补充建设单位名称和板块标签。',
+    model: 'DeepSeek-R1',
+    status: '禁用',
+    baseUrl: 'https://crawler.example.com/agent',
+    pollingInterval: 4000,
+    timeout: 18000,
+    scheduleEnabled: '禁用',
+    executeMode: '每天',
+    executeTime: '07:30:00',
+    weekDay: '周一',
+    monthDay: 1,
+    lastRunAt: '2026-04-25 14:20:00',
+  },
+  {
+    id: 'task_4',
+    provinceCity: '江苏省/南通市',
+    sectorType: '公共服务',
+    prompt: '聚合南通市公共服务类项目公告，抽取项目编号、招标单位、中标时间等关键字段。',
+    model: 'Claude 3.7 Sonnet',
+    status: '启用',
+    baseUrl: 'https://agent.example.com/public',
+    pollingInterval: 6000,
+    timeout: 22000,
+    scheduleEnabled: '启用',
+    executeMode: '每月',
+    executeTime: '11:00:00',
+    weekDay: '周一',
+    monthDay: 8,
+    lastRunAt: '2026-04-26 11:05:00',
+  },
+  {
+    id: 'task_5',
+    provinceCity: '江苏省/常州市',
+    sectorType: '智能制造',
+    prompt: '扫描常州智能制造板块招标动态，按发布时间倒序输出并附带数据可信度说明。',
+    model: 'GPT-4.1-mini',
+    status: '启用',
+    baseUrl: 'https://modelhub.example.com/agent',
+    pollingInterval: 2500,
+    timeout: 12000,
+    scheduleEnabled: '启用',
+    executeMode: '每天',
+    executeTime: '08:15:00',
+    weekDay: '周一',
+    monthDay: 1,
+    lastRunAt: '2026-04-27 08:15:10',
+  },
+  {
+    id: 'task_6',
+    provinceCity: '江苏省/连云港市',
+    sectorType: '物流仓储',
+    prompt: '抓取物流仓储相关招投标数据，并对港区自动化、仓储改造等关键词打高优先级标签。',
+    model: 'o4-mini',
+    status: '禁用',
+    baseUrl: 'https://ops.example.com/collect',
+    pollingInterval: 4500,
+    timeout: 16000,
+    scheduleEnabled: '禁用',
+    executeMode: '每周',
+    executeTime: '16:40:00',
+    weekDay: '周五',
+    monthDay: 1,
+    lastRunAt: '',
+  },
+  {
+    id: 'task_7',
+    provinceCity: '江苏省/徐州市',
+    sectorType: '基础设施',
+    prompt: '跟踪徐州市道路、桥梁、市政配套类招投标公告，提取项目编号、预算金额、招标人和发布时间。',
+    model: 'GPT-4.1',
+    status: '启用',
+    baseUrl: 'https://infra.example.com/agent',
+    pollingInterval: 3500,
+    timeout: 18000,
+    scheduleEnabled: '启用',
+    executeMode: '每天',
+    executeTime: '09:20:00',
+    weekDay: '周一',
+    monthDay: 1,
+    lastRunAt: '2026-04-27 09:20:18',
+  },
+  {
+    id: 'task_8',
+    provinceCity: '江苏省/盐城市',
+    sectorType: '能源环保',
+    prompt: '监控盐城市零碳园区、储能、环保治理相关招投标信息，并输出推荐关注等级。',
+    model: 'Claude 3.7 Sonnet',
+    status: '启用',
+    baseUrl: 'https://green.example.com/v1',
+    pollingInterval: 4200,
+    timeout: 21000,
+    scheduleEnabled: '启用',
+    executeMode: '每周',
+    executeTime: '13:30:00',
+    weekDay: '周四',
+    monthDay: 1,
+    lastRunAt: '2026-04-26 13:30:07',
+  },
+  {
+    id: 'task_9',
+    provinceCity: '江苏省/扬州市',
+    sectorType: '智能制造',
+    prompt: '聚合扬州市智能制造、产线升级、设备采购相关公告，自动识别是否属于重点客户项目。',
+    model: 'DeepSeek-R1',
+    status: '禁用',
+    baseUrl: 'https://smart.example.com/worker',
+    pollingInterval: 2800,
+    timeout: 14000,
+    scheduleEnabled: '禁用',
+    executeMode: '每天',
+    executeTime: '07:50:00',
+    weekDay: '周一',
+    monthDay: 1,
+    lastRunAt: '2026-04-24 07:50:03',
+  },
+  {
+    id: 'task_10',
+    provinceCity: '江苏省/镇江市',
+    sectorType: '公共服务',
+    prompt: '采集镇江市公共服务、文旅配套、城市更新相关招投标数据，保留原文摘要和详情链接。',
+    model: 'GPT-4.1-mini',
+    status: '启用',
+    baseUrl: 'https://public.example.com/task',
+    pollingInterval: 3200,
+    timeout: 15000,
+    scheduleEnabled: '启用',
+    executeMode: '每月',
+    executeTime: '10:10:00',
+    weekDay: '周一',
+    monthDay: 15,
+    lastRunAt: '2026-04-15 10:10:12',
+  },
+  {
+    id: 'task_11',
+    provinceCity: '江苏省/泰州市',
+    sectorType: '智慧园区',
+    prompt: '抓取泰州市智慧园区、智慧安防、数字化运维类项目信息，自动清洗重复记录。',
+    model: 'o4-mini',
+    status: '启用',
+    baseUrl: 'https://digital.example.com/api',
+    pollingInterval: 4600,
+    timeout: 19000,
+    scheduleEnabled: '启用',
+    executeMode: '每周',
+    executeTime: '15:00:00',
+    weekDay: '周二',
+    monthDay: 1,
+    lastRunAt: '2026-04-22 15:00:05',
+  },
+  {
+    id: 'task_12',
+    provinceCity: '江苏省/宿迁市',
+    sectorType: '物流仓储',
+    prompt: '跟踪宿迁仓储建设、冷链物流、自动化分拣相关招投标信息，输出适配业务的标签分类。',
+    model: 'GPT-4.1',
+    status: '禁用',
+    baseUrl: 'https://logistics.example.com/agent',
+    pollingInterval: 3900,
+    timeout: 17000,
+    scheduleEnabled: '禁用',
+    executeMode: '每月',
+    executeTime: '18:20:00',
+    weekDay: '周一',
+    monthDay: 20,
+    lastRunAt: '',
+  },
+  {
+    id: 'task_13',
+    provinceCity: '江苏省/淮安市',
+    sectorType: '基础设施',
+    prompt: '采集淮安市基础设施和市政施工类公告，提炼标段编号、项目金额、投标截止时间等字段。',
+    model: 'Claude 3.7 Sonnet',
+    status: '启用',
+    baseUrl: 'https://crawler.example.com/infra',
+    pollingInterval: 3300,
+    timeout: 16000,
+    scheduleEnabled: '启用',
+    executeMode: '每天',
+    executeTime: '08:40:00',
+    weekDay: '周一',
+    monthDay: 1,
+    lastRunAt: '2026-04-27 08:40:09',
+  },
+  {
+    id: 'task_14',
+    provinceCity: '江苏省/无锡市',
+    sectorType: '公共服务',
+    prompt: '扫描无锡市医院、学校、文体中心等公共服务类项目，输出中标候选人和公告原链接。',
+    model: 'GPT-4.1-mini',
+    status: '启用',
+    baseUrl: 'https://service.example.com/collector',
+    pollingInterval: 3000,
+    timeout: 15000,
+    scheduleEnabled: '启用',
+    executeMode: '每周',
+    executeTime: '14:15:00',
+    weekDay: '周五',
+    monthDay: 1,
+    lastRunAt: '2026-04-25 14:15:21',
+  },
+  {
+    id: 'task_15',
+    provinceCity: '江苏省/苏州市',
+    sectorType: '智能制造',
+    prompt: '面向苏州智能制造板块抓取设备改造、机器人产线和工厂升级类项目，并追加商机优先级评估。',
+    model: 'DeepSeek-R1',
+    status: '启用',
+    baseUrl: 'https://opportunity.example.com/agent',
+    pollingInterval: 2700,
+    timeout: 13000,
+    scheduleEnabled: '启用',
+    executeMode: '每天',
+    executeTime: '07:10:00',
+    weekDay: '周一',
+    monthDay: 1,
+    lastRunAt: '2026-04-27 07:10:14',
+  },
+];
+
+const formRef = ref();
+const dialogVisible = ref(false);
+const editingRecordId = ref('');
+const currentPage = ref(1);
+const pageSize = ref(5);
+const selectedRecordId = ref('');
+
+const filters = reactive({
+  provinceCity: '',
+  sectorType: '',
+});
+
+const createEmptyForm = () => ({
+  provinceCity: '',
+  sectorType: '',
+  prompt: '',
+  model: modelOptions[0],
+  status: '启用',
+});
+
+const normalizeRecord = (record) => ({
+  ...defaultAgentConfig,
+  ...defaultScheduleConfig,
+  ...record,
+  status: record?.status === '禁用' ? '禁用' : '启用',
+  scheduleEnabled: record?.scheduleEnabled === '禁用' ? '禁用' : '启用',
+  baseUrl: String(record?.baseUrl || defaultAgentConfig.baseUrl),
+  pollingInterval: Number(record?.pollingInterval || defaultAgentConfig.pollingInterval),
+  timeout: Number(record?.timeout || defaultAgentConfig.timeout),
+  executeMode: record?.executeMode || defaultScheduleConfig.executeMode,
+  executeTime: record?.executeTime || defaultScheduleConfig.executeTime,
+  weekDay: record?.weekDay || defaultScheduleConfig.weekDay,
+  monthDay: Number(record?.monthDay || defaultScheduleConfig.monthDay),
+  lastRunAt: record?.lastRunAt || '',
+});
+
+const storedRecords = storage.getLocalStorage(STORAGE_KEY);
+const records = ref(
+  (Array.isArray(storedRecords) && storedRecords.length ? storedRecords : initialRecords).map(normalizeRecord),
+);
+
+const formModel = reactive(createEmptyForm());
+const configForm = reactive({
+  baseUrl: '',
+  pollingInterval: 3000,
+  timeout: 15000,
+  scheduleEnabled: '启用',
+  executeMode: '每天',
+  executeTime: '09:00:00',
+  weekDay: '周一',
+  monthDay: 1,
+});
+
+const formRules = {
+  provinceCity: [{ required: true, message: '请选择所属省市', trigger: 'change' }],
+  sectorType: [{ required: true, message: '请选择板块类型', trigger: 'change' }],
+  prompt: [{ required: true, message: '请输入提示词', trigger: 'blur' }],
+  model: [{ required: true, message: '请选择调用模型', trigger: 'change' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+};
+
+const filteredRecords = computed(() =>
+  records.value.filter((record) => {
+    const matchesProvinceCity = filters.provinceCity ? record.provinceCity === filters.provinceCity : true;
+    const matchesSectorType = filters.sectorType ? record.sectorType === filters.sectorType : true;
+    return matchesProvinceCity && matchesSectorType;
+  }),
+);
+
+const totalPages = computed(() => Math.max(1, Math.ceil(filteredRecords.value.length / pageSize.value)));
+
+const paginatedRecords = computed(() => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  return filteredRecords.value.slice(startIndex, startIndex + pageSize.value);
+});
+
+const selectedRecord = computed(
+  () => records.value.find((item) => item.id === selectedRecordId.value) || null,
+);
+
+const scheduleSummary = computed(() => {
+  if (!selectedRecord.value) {
+    return '-';
+  }
+
+  const mode = configForm.executeMode;
+  if (configForm.scheduleEnabled === '禁用') {
+    return '当前调度已禁用';
+  }
+
+  if (mode === '每周') {
+    return `${configForm.weekDay} ${configForm.executeTime}`;
+  }
+
+  if (mode === '每月') {
+    return `每月 ${configForm.monthDay} 日 ${configForm.executeTime}`;
+  }
+
+  return `每天 ${configForm.executeTime}`;
+});
+
+const persistRecords = () => {
+  storage.setLocalStorage(STORAGE_KEY, records.value);
+};
+
+const resetFilters = () => {
+  filters.provinceCity = '';
+  filters.sectorType = '';
+  currentPage.value = 1;
+};
+
+const resetForm = () => {
+  Object.assign(formModel, createEmptyForm());
+  formRef.value?.clearValidate();
+};
+
+const resetConfigForm = () => {
+  if (!selectedRecord.value) {
+    return;
+  }
+
+  Object.assign(configForm, pickConfigFields(selectedRecord.value));
+};
+
+const openCreateDialog = () => {
+  editingRecordId.value = '';
+  resetForm();
+  dialogVisible.value = true;
+};
+
+const openEditDialog = (record) => {
+  editingRecordId.value = record.id;
+  Object.assign(formModel, createEmptyForm(), record);
+  dialogVisible.value = true;
+};
+
+const submitForm = async () => {
+  const valid = formRef.value ? await formRef.value.validate().catch(() => false) : false;
+  if (!valid) {
+    return;
+  }
+
+  const existingRecord = editingRecordId.value
+    ? records.value.find((item) => item.id === editingRecordId.value) || null
+    : null;
+
+  const payload = normalizeRecord({
+    ...(existingRecord || {}),
+    ...formModel,
+    id: editingRecordId.value || `task_${Date.now()}`,
+  });
+
+  if (editingRecordId.value) {
+    records.value = records.value.map((item) => (item.id === editingRecordId.value ? payload : item));
+    ElMessage.success('任务已更新');
+  } else {
+    records.value = [payload, ...records.value];
+    selectedRecordId.value = payload.id;
+    ElMessage.success('任务已新增');
+  }
+
+  if (selectedRecordId.value === payload.id || !selectedRecordId.value) {
+    selectedRecordId.value = payload.id;
+    resetConfigForm();
+  }
+
+  persistRecords();
+  dialogVisible.value = false;
+  currentPage.value = 1;
+  resetForm();
+};
+
+const saveConfig = () => {
+  if (!selectedRecord.value) {
+    return;
+  }
+
+  const payload = normalizeRecord({
+    ...selectedRecord.value,
+    ...pickConfigFields(configForm),
+  });
+
+  records.value = records.value.map((item) => (item.id === selectedRecord.value.id ? payload : item));
+  persistRecords();
+  ElMessage.success('配置已保存');
+};
+
+const handleCurrentChange = (record) => {
+  if (!record) {
+    return;
+  }
+
+  selectedRecordId.value = record.id;
+};
+
+const handleRowClick = (row) => {
+  selectedRecordId.value = row.id;
+};
+
+const toggleStatus = (record) => {
+  const nextStatus = record.status === '启用' ? '禁用' : '启用';
+  records.value = records.value.map((item) =>
+    item.id === record.id ? { ...item, status: nextStatus } : item,
+  );
+  persistRecords();
+
+  if (selectedRecordId.value === record.id) {
+    selectedRecordId.value = record.id;
+  }
+
+  ElMessage.success(`任务已${nextStatus === '启用' ? '启用' : '禁用'}`);
+};
+
+const runTask = (record) => {
+  if (record.status !== '启用') {
+    ElMessage.warning('任务已禁用，无法运行');
+    return;
+  }
+
+  const runTime = formatCurrentDateTime();
+  records.value = records.value.map((item) =>
+    item.id === record.id ? { ...item, lastRunAt: runTime } : item,
+  );
+  persistRecords();
+
+  if (selectedRecordId.value === record.id) {
+    selectedRecordId.value = record.id;
+  }
+
+  ElMessage.success(`任务已运行：${record.sectorType}`);
+};
+
+const runScheduledTaskNow = () => {
+  if (!selectedRecord.value) {
+    return;
+  }
+
+  if (selectedRecord.value.status !== '启用') {
+    ElMessage.warning('当前任务已禁用，无法立即执行');
+    return;
+  }
+
+  saveConfig();
+  runTask(selectedRecord.value);
+};
+
+const deleteRecord = async (record) => {
+  try {
+    await ElMessageBox.confirm(`确认删除“${record.provinceCity} / ${record.sectorType}”吗？`, '删除确认', {
+      type: 'warning',
+    });
+  } catch {
+    return;
+  }
+
+  records.value = records.value.filter((item) => item.id !== record.id);
+
+  if (selectedRecordId.value === record.id) {
+    selectedRecordId.value = records.value[0]?.id || '';
+  }
+
+  persistRecords();
+  ElMessage.success('任务已删除');
+};
+
+watch(
+  () => [filters.provinceCity, filters.sectorType],
+  () => {
+    currentPage.value = 1;
+  },
+);
+
+watch(
+  [filteredRecords, pageSize],
+  () => {
+    if (currentPage.value > totalPages.value) {
+      currentPage.value = totalPages.value;
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  selectedRecord,
+  (record) => {
+    if (!record) {
+      Object.assign(configForm, {
+        ...defaultAgentConfig,
+        ...defaultScheduleConfig,
+      });
+      return;
+    }
+
+    Object.assign(configForm, pickConfigFields(record));
+  },
+  { immediate: true },
+);
+
+if (!selectedRecordId.value && records.value.length) {
+  selectedRecordId.value = records.value[0].id;
+}
+
+function pickConfigFields(source) {
+  return {
+    baseUrl: source.baseUrl,
+    pollingInterval: Number(source.pollingInterval || defaultAgentConfig.pollingInterval),
+    timeout: Number(source.timeout || defaultAgentConfig.timeout),
+    scheduleEnabled: source.scheduleEnabled === '禁用' ? '禁用' : '启用',
+    executeMode: source.executeMode || defaultScheduleConfig.executeMode,
+    executeTime: source.executeTime || defaultScheduleConfig.executeTime,
+    weekDay: source.weekDay || defaultScheduleConfig.weekDay,
+    monthDay: Number(source.monthDay || defaultScheduleConfig.monthDay),
+  };
+}
+
+function formatCurrentDateTime() {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+</script>
+
+<style scoped>
+.task-page {
+  display: flex;
+  flex-direction: column;
+}
+
+.task-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.task-layout__main,
+.task-layout__side {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.panel-card,
+.config-card {
+  padding: 20px;
+  border: 1px solid rgba(112, 144, 196, 0.12);
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.92),
+    0 18px 36px rgba(26, 54, 93, 0.06);
+}
+
+.panel-card--search {
+  position: sticky;
+  top: calc(var(--shell-header-offset, 74px) + 12px);
+  z-index: 6;
+  background:
+    radial-gradient(circle at top right, rgba(35, 195, 172, 0.14), transparent 24%),
+    radial-gradient(circle at left center, rgba(90, 129, 255, 0.16), transparent 28%),
+    rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(14px);
+}
+
+.config-card {
+  position: sticky;
+  top: calc(var(--shell-header-offset, 74px) + 12px);
+}
+
+.config-card + .config-card {
+  position: static;
+}
+
+.config-card--hero {
+  background:
+    radial-gradient(circle at top right, rgba(17, 193, 168, 0.14), transparent 32%),
+    linear-gradient(145deg, rgba(250, 252, 255, 0.98), rgba(240, 246, 255, 0.94));
+}
+
+.config-card__eyebrow {
+  display: inline-flex;
+  padding: 4px 10px;
+  border-radius: 999px;
+  color: #0e846d;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  background: rgba(14, 132, 109, 0.1);
+}
+
+.config-hero {
+  margin-top: 18px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.config-hero__title {
+  color: #142949;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.config-hero__meta {
+  margin-top: 8px;
+  color: #5f738f;
+  font-size: 13px;
+}
+
+.config-hero__prompt {
+  margin-top: 16px;
+  color: #223755;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.config-card__header {
+  margin-bottom: 18px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.config-card__title {
+  color: #142949;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.config-card__desc {
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.config-form {
+  padding: 16px;
+  border: 1px solid #e7edf5;
+  border-radius: 2px;
+  background: rgba(248, 251, 255, 0.78);
+}
+
+.schedule-summary {
+  margin-top: 18px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.schedule-summary__item {
+  padding: 14px;
+  border: 1px solid #e6edf5;
+  background: #ffffff;
+}
+
+.schedule-summary__label {
+  display: block;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.schedule-summary__value {
+  margin-top: 8px;
+  display: block;
+  color: #142949;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.config-actions {
+  margin-top: 18px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.filter-field {
+  width: 180px;
+}
+
+.filter-field--wide {
+  width: 240px;
+}
+
+.table-toolbar {
+  margin: 18px 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.table-toolbar__group,
+.table-toolbar__summary {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.table-toolbar__summary {
+  color: #5f738f;
+  font-size: 13px;
+}
+
+.task-table {
+  width: 100%;
+}
+
+:deep(.task-table .el-table__inner-wrapper),
+:deep(.task-table .el-table__cell),
+:deep(.task-table::before) {
+  border-radius: 0;
+}
+
+:deep(.task-table .el-table__inner-wrapper) {
+  border: 1px solid #e4eaf3;
+  border-radius: 2px;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+:deep(.task-table th.el-table__cell) {
+  background: #f6f9fc;
+  color: #24364d;
+  font-weight: 700;
+}
+
+:deep(.task-table td.el-table__cell) {
+  color: #1f2f46;
+}
+
+:deep(.task-table .current-row > td.el-table__cell) {
+  background: rgba(37, 99, 235, 0.06);
+}
+
+.prompt-cell__text {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #223755;
+  line-height: 1.6;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 58px;
+  padding: 5px 10px;
+  font-size: 12px;
+}
+
+.status-badge--online {
+  color: #0b8e73;
+  background: rgba(20, 195, 154, 0.12);
+}
+
+.status-badge--offline {
+  color: #c62828;
+  background: rgba(229, 57, 53, 0.14);
+}
+
+.row-actions {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.row-action {
+  color: #1d4ed8;
+  font-size: 13px;
+}
+
+.row-action--run {
+  color: #0f9f7f;
+}
+
+.row-action--danger {
+  color: #da4f60;
+}
+
+.pagination-bar {
+  margin-top: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.pagination-bar__summary {
+  color: #5f738f;
+  font-size: 13px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px 18px;
+}
+
+.form-grid__span-2 {
+  grid-column: 1 / -1;
+}
+
+.select-field,
+.number-field {
+  width: 100%;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+@media (max-width: 1280px) {
+  .task-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .config-card,
+  .config-card + .config-card {
+    position: static;
+  }
+}
+
+@media (max-width: 768px) {
+  .panel-card,
+  .config-card {
+    padding: 16px;
+  }
+
+  .filter-field,
+  .filter-field--wide,
+  .select-field {
+    width: 100%;
+  }
+
+  .table-toolbar,
+  .pagination-bar,
+  .config-card__header,
+  .config-hero {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .form-grid,
+  .schedule-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .form-grid__span-2 {
+    grid-column: auto;
+  }
+}
+</style>