From 8b1611669038034b571afac4ce74019c7628dc9d Mon Sep 17 00:00:00 2001
From: ygx <ygx>
Date: Sat, 28 Mar 2026 14:24:23 +0800
Subject: [PATCH] feat

---
 src/api/ops/alertTemplate.ts                  | 206 ++++
 src/router/local-menu-flat.ts                 |  17 +
 src/router/local-menu-items.ts                |  18 +
 .../alert/template/components/RuleEditor.vue  | 325 +++++++
 .../components/TemplateDetailDialog.vue       | 169 ++++
 .../components/TemplateFormDialog.vue         | 493 ++++++++++
 .../ops/pages/alert/template/edit/index.vue   | 708 ++++++++++++++
 src/views/ops/pages/alert/template/index.vue  | 893 ++++--------------
 8 files changed, 2108 insertions(+), 721 deletions(-)
 create mode 100644 src/api/ops/alertTemplate.ts
 create mode 100644 src/views/ops/pages/alert/template/components/RuleEditor.vue
 create mode 100644 src/views/ops/pages/alert/template/components/TemplateDetailDialog.vue
 create mode 100644 src/views/ops/pages/alert/template/components/TemplateFormDialog.vue
 create mode 100644 src/views/ops/pages/alert/template/edit/index.vue

diff --git a/src/api/ops/alertTemplate.ts b/src/api/ops/alertTemplate.ts
new file mode 100644
index 0000000..026b7b8
--- /dev/null
+++ b/src/api/ops/alertTemplate.ts
@@ -0,0 +1,206 @@
+import { request } from '@/api/request'
+
+// 告警模板类型定义
+export interface AlertTemplate {
+  id?: number
+  name: string
+  category: string
+  description?: string
+  enabled?: boolean
+  tags?: string
+  rules: AlertRule[]
+  channels: ChannelRef[]
+  suppression_rule_ids?: number[]
+  created_at?: string
+  updated_at?: string
+}
+
+// 告警规则
+export interface AlertRule {
+  name: string
+  data_source: string
+  metric_name: string
+  rule_type: 'static' | 'dynamic' | 'promql'
+  compare_op: '>' | '>=' | '<' | '<=' | '==' | '!='
+  threshold: string | number
+  duration: number
+  eval_interval: number
+  severity_code: string
+  labels?: Record<string, string>
+  annotations?: Record<string, string>
+}
+
+// 通知渠道引用
+export interface ChannelRef {
+  channel_id: number
+}
+
+// 通知渠道
+export interface NotificationChannel {
+  id: number
+  name: string
+  type: string
+  config?: Record<string, any>
+  enabled?: boolean
+  created_at?: string
+  updated_at?: string
+}
+
+// 抑制规则
+export interface SuppressionRule {
+  id: number
+  name: string
+  description?: string
+  enabled?: boolean
+  matchers?: Record<string, any>
+  created_at?: string
+  updated_at?: string
+}
+
+// 告警级别
+export interface AlertSeverity {
+  id: number
+  code: string
+  name: string
+  color?: string
+  level?: number
+}
+
+// 指标元数据
+export interface MetricMeta {
+  metric_name: string
+  metric_unit: string
+  type: string
+  last_timestamp: string
+}
+
+// 指标聚合响应
+export interface MetricsAggregateResponse {
+  data_source: string
+  server_identity: string
+  count: number
+  metrics: MetricMeta[]
+}
+
+// 模板分类选项
+export const TEMPLATE_CATEGORIES = [
+  { value: 'os', label: '操作系统监控模板' },
+  { value: 'server_hardware', label: '服务器硬件监控模板' },
+  { value: 'network_device', label: '网络设备监控模板' },
+  { value: 'security_device', label: '安全设备监控模板' },
+  { value: 'storage', label: '存储设备监控模板' },
+  { value: 'database', label: '数据库监控模板' },
+  { value: 'middleware', label: '中间件监控模板' },
+  { value: 'virtualization', label: '虚拟化监控模板' },
+  { value: 'power_env', label: '电力/UPS/空调/温湿度模板' },
+  { value: 'safety_env', label: '消防/门禁/漏水/有害气体模板' },
+]
+
+// 数据源选项
+export const DATA_SOURCES = [
+  { value: 'dc-host', label: '主机/操作系统指标' },
+  { value: 'dc-hardware', label: '服务器硬件指标' },
+  { value: 'dc-network', label: '网络设备指标' },
+  { value: 'dc-database', label: '数据库指标' },
+  { value: 'dc-middleware', label: '中间件指标' },
+  { value: 'dc-virtualization', label: '虚拟化指标' },
+  { value: 'dc-env', label: '动力/环境/安防指标' },
+]
+
+// 比较运算符选项
+export const COMPARE_OPERATORS = [
+  { value: '>', label: '大于' },
+  { value: '>=', label: '大于等于' },
+  { value: '<', label: '小于' },
+  { value: '<=', label: '小于等于' },
+  { value: '==', label: '等于' },
+  { value: '!=', label: '不等于' },
+]
+
+// 规则类型选项
+export const RULE_TYPES = [
+  { value: 'static', label: '静态阈值' },
+  { value: 'dynamic', label: '动态阈值' },
+  { value: 'promql', label: 'PromQL 表达式' },
+]
+
+// ==================== 告警模板接口 ====================
+
+/** 获取告警模板列表 */
+export const fetchTemplateList = (params?: {
+  page?: number
+  page_size?: number
+  name?: string
+  category?: string
+  enabled?: boolean
+}) => {
+  return request.get('/Alert/v1/template/list', { params })
+}
+
+/** 获取告警模板详情 */
+export const fetchTemplateDetail = (id: number) => {
+  return request.get(`/Alert/v1/template/get/${id}`)
+}
+
+/** 创建告警模板 */
+export const createTemplate = (data: AlertTemplate) => {
+  return request.post('/Alert/v1/template/create', data)
+}
+
+/** 更新告警模板 */
+export const updateTemplate = (data: AlertTemplate) => {
+  return request.post('/Alert/v1/template/update', data)
+}
+
+/** 删除告警模板 */
+export const deleteTemplate = (id: number) => {
+  return request.delete(`/Alert/v1/template/delete/${id}`)
+}
+
+// ==================== 通知渠道接口 ====================
+
+/** 获取通知渠道列表 */
+export const fetchChannelList = (params?: { enabled?: boolean; keyword?: string }) => {
+  return request.get('/Alert/v1/channel/list', { params })
+}
+
+/** 获取通知渠道详情 */
+export const fetchChannelDetail = (id: number) => {
+  return request.get(`/Alert/v1/channel/get/${id}`)
+}
+
+// ==================== 抑制规则接口 ====================
+
+/** 获取抑制规则列表 */
+export const fetchSuppressionList = (params?: { enabled?: boolean; keyword?: string }) => {
+  return request.get('/Alert/v1/suppression/list', { params })
+}
+
+/** 获取抑制规则详情 */
+export const fetchSuppressionDetail = (id: number) => {
+  return request.get(`/Alert/v1/suppression/get/${id}`)
+}
+
+// ==================== 告警级别接口 ====================
+
+/** 获取告警级别列表 */
+export const fetchSeverityList = () => {
+  return request.get('/Alert/v1/severity/list')
+}
+
+/** 按 code 获取告警级别 */
+export const fetchSeverityByCode = (code: string) => {
+  return request.get(`/Alert/v1/severity/get-by-code/${code}`)
+}
+
+// ==================== 指标元数据接口 ====================
+
+/** 获取指标元数据 */
+export const fetchMetricsMeta = (params: {
+  data_source: string
+  server_identity?: string
+  keyword?: string
+  limit?: number
+}) => {
+  return request.get('/DC-Control/v1/services/metrics/meta', { params })
+}
\ No newline at end of file
diff --git a/src/router/local-menu-flat.ts b/src/router/local-menu-flat.ts
index a1928d8..7229a87 100644
--- a/src/router/local-menu-flat.ts
+++ b/src/router/local-menu-flat.ts
@@ -446,6 +446,23 @@ export const localMenuFlatItems: MenuItem[] = [
     sort_key: 30,
     created_at: '2025-12-26T13:23:52.047548+08:00',
   },
+  {
+    id: 4001,
+    identity: '019b591d-026f-785d-b473-ac804133e252',
+    title: '告警模版编辑',
+    title_en: 'Alert Template Edit',
+    code: 'ops:告警管理:告警模版编辑',
+    description: '告警管理 - 告警模版编辑',
+    app_id: 2,
+    parent_id: 39,
+    menu_path: '/alert/template/edit',
+    component: 'ops/pages/alert/template/edit/index',
+    menu_icon: 'appstore',
+    type: 1,
+    sort_key: 31,
+    hide_menu: true,
+    created_at: '2025-12-26T13:23:52.047548+08:00',
+  },
   {
     id: 41,
     identity: '019b591d-027d-7eae-b9b9-23fd1b7ece75',
diff --git a/src/router/local-menu-items.ts b/src/router/local-menu-items.ts
index ada5899..7f58e82 100644
--- a/src/router/local-menu-items.ts
+++ b/src/router/local-menu-items.ts
@@ -479,6 +479,24 @@ export const localMenuItems: MenuItem[] = [
         created_at: '2025-12-26T13:23:52.047548+08:00',
         children: [],
       },
+      {
+        id: 4001,
+        identity: '019b591d-026f-785d-b473-ac804133e252',
+        title: '告警模版编辑',
+        title_en: 'Alert Template Edit',
+        code: 'ops:告警管理:告警模版编辑',
+        description: '告警管理 - 告警模版编辑',
+        app_id: 2,
+        parent_id: 39,
+        menu_path: '/alert/template/edit',
+        component: 'ops/pages/alert/template/edit/index',
+        menu_icon: 'appstore',
+        type: 1,
+        sort_key: 7,
+        hide_menu: true,
+        created_at: '2025-12-26T13:23:52.047548+08:00',
+        children: [],
+      },
       {
         id: 41,
         identity: '019b591d-027d-7eae-b9b9-23fd1b7ece75',
diff --git a/src/views/ops/pages/alert/template/components/RuleEditor.vue b/src/views/ops/pages/alert/template/components/RuleEditor.vue
new file mode 100644
index 0000000..3b96073
--- /dev/null
+++ b/src/views/ops/pages/alert/template/components/RuleEditor.vue
@@ -0,0 +1,325 @@
+<template>
+  <div class="rule-editor">
+    <a-form ref="ruleFormRef" :model="{ rules: localRules }" layout="vertical">
+      <div v-if="localRules.length === 0" class="empty-rules">
+        <a-empty description="暂无规则，请点击上方按钮添加" />
+      </div>
+
+      <div v-else class="rules-container">
+        <a-card
+          v-for="(rule, index) in localRules"
+          :key="index"
+          class="rule-card"
+          :title="`规则 ${index + 1}: ${rule.name || '未命名'}`"
+        >
+          <template #extra>
+            <a-button type="text" size="small" status="danger" @click="handleRemoveRule(index)">
+              <template #icon><icon-delete /></template>
+              删除
+            </a-button>
+          </template>
+
+          <!-- 第一行：基本信息 -->
+          <div class="rule-section">
+            <div class="section-title">基本信息</div>
+            <a-row :gutter="16">
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="规则名称" :field="`rules[${index}].name`" :rules="getRuleFieldRules('name')">
+                  <a-input v-model="rule.name" placeholder="请输入规则名称" @change="syncUpdate(index)" />
+                </a-form-item>
+              </a-col>
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="数据源" :field="`rules[${index}].data_source`" :rules="getRuleFieldRules('data_source')">
+                  <a-select v-model="rule.data_source" placeholder="请选择" @change="handleRuleDataSourceChange(index)">
+                    <a-option v-for="item in DATA_SOURCES" :key="item.value" :value="item.value">
+                      {{ item.label }}
+                    </a-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="指标名称" :field="`rules[${index}].metric_name`" :rules="getRuleFieldRules('metric_name')">
+                  <a-select
+                    v-model="rule.metric_name"
+                    placeholder="请选择指标"
+                    allow-search
+                    :loading="rule._metricsLoading"
+                    @dropdown-visible-change="handleMetricsDropdownChange($event, index)"
+                    @change="syncUpdate(index)"
+                  >
+                    <a-option v-for="metric in rule._metrics" :key="metric.metric_name" :value="metric.metric_name">
+                      {{ metric.metric_name }} ({{ metric.metric_unit || '无单位' }})
+                    </a-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="告警级别" :field="`rules[${index}].severity_code`" :rules="getRuleFieldRules('severity_code')">
+                  <a-select v-model="rule.severity_code" placeholder="请选择" @change="syncUpdate(index)">
+                    <a-option v-for="item in severityOptions" :key="item.code" :value="item.code">
+                      {{ item.name }}
+                    </a-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </div>
+
+          <!-- 第二行：条件配置 -->
+          <div class="rule-section">
+            <div class="section-title">触发条件</div>
+            <a-row :gutter="16">
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="规则类型" :field="`rules[${index}].rule_type`" :rules="getRuleFieldRules('rule_type')">
+                  <a-select v-model="rule.rule_type" placeholder="请选择" @change="syncUpdate(index)">
+                    <a-option v-for="item in RULE_TYPES" :key="item.value" :value="item.value">
+                      {{ item.label }}
+                    </a-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="比较运算符" :field="`rules[${index}].compare_op`" :rules="getRuleFieldRules('compare_op')">
+                  <a-select v-model="rule.compare_op" placeholder="请选择" @change="syncUpdate(index)">
+                    <a-option v-for="item in COMPARE_OPERATORS" :key="item.value" :value="item.value">
+                      {{ item.label }}
+                    </a-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="阈值" :field="`rules[${index}].threshold`" :rules="getRuleFieldRules('threshold')">
+                  <a-input-number v-model="rule.threshold" placeholder="请输入阈值" style="width: 100%" @change="syncUpdate(index)" />
+                </a-form-item>
+              </a-col>
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="持续时间" :field="`rules[${index}].duration`" :rules="getRuleFieldRules('duration')">
+                  <a-input-number v-model="rule.duration" placeholder="请输入" :min="0" style="width: 100%" @change="syncUpdate(index)">
+                    <template #suffix>秒</template>
+                  </a-input-number>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </div>
+
+          <!-- 第三行：评估配置 -->
+          <div class="rule-section">
+            <div class="section-title">评估配置</div>
+            <a-row :gutter="16">
+              <a-col :xs="24" :sm="12" :md="6">
+                <a-form-item label="评估间隔" :field="`rules[${index}].eval_interval`" :rules="getRuleFieldRules('eval_interval')">
+                  <a-input-number v-model="rule.eval_interval" placeholder="请输入" :min="0" style="width: 100%" @change="syncUpdate(index)">
+                    <template #suffix>秒</template>
+                  </a-input-number>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </div>
+        </a-card>
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import type { FormInstance } from '@arco-design/web-vue'
+import {
+  fetchMetricsMeta,
+  DATA_SOURCES,
+  COMPARE_OPERATORS,
+  RULE_TYPES,
+  type AlertRule,
+  type AlertSeverity,
+  type MetricMeta,
+} from '@/api/ops/alertTemplate'
+
+interface RuleItem extends AlertRule {
+  _metrics?: MetricMeta[]
+  _metricsLoading?: boolean
+}
+
+const props = defineProps<{
+  rules: RuleItem[]
+  severityOptions: AlertSeverity[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:rules', value: RuleItem[]): void
+  (e: 'remove', index: number): void
+}>()
+
+// 表单引用
+const ruleFormRef = ref<FormInstance | null>(null)
+
+// 本地规则数据（深拷贝）
+const localRules = ref<RuleItem[]>([])
+
+// 监听 props 变化，深拷贝到本地
+watch(
+  () => props.rules,
+  (val) => {
+    localRules.value = JSON.parse(JSON.stringify(val))
+  },
+  { immediate: true, deep: true }
+)
+
+// 动态生成验证规则
+const getRuleFieldRules = (field: string) => {
+  const messages: Record<string, string> = {
+    name: '请输入规则名称',
+    data_source: '请选择数据源',
+    metric_name: '请选择指标名称',
+    rule_type: '请选择规则类型',
+    compare_op: '请选择比较运算符',
+    threshold: '请输入阈值',
+    duration: '请输入持续时间',
+    eval_interval: '请输入评估间隔',
+    severity_code: '请选择告警级别',
+  }
+  return [{ required: true, message: messages[field] || '该字段为必填项' }]
+}
+
+// 暴露验证方法给父组件
+const validate = async () => {
+  return ruleFormRef.value?.validate()
+}
+
+defineExpose({
+  validate,
+})
+
+// 同步更新到父组件
+const syncUpdate = (index: number) => {
+  const newRules = [...props.rules]
+  const { _metrics, _metricsLoading, ...rest } = localRules.value[index]
+  newRules[index] = { ...rest, _metrics, _metricsLoading } as RuleItem
+  emit('update:rules', newRules)
+}
+
+// 移除规则
+const handleRemoveRule = (index: number) => {
+  emit('remove', index)
+}
+
+// 规则数据源变化
+const handleRuleDataSourceChange = (index: number) => {
+  localRules.value[index].metric_name = ''
+  localRules.value[index]._metrics = []
+  syncUpdate(index)
+  // 数据源变化后自动加载指标
+  handleLoadMetrics(index)
+}
+
+// 下拉框展开时加载指标（备用触发）
+const handleMetricsDropdownChange = (visible: boolean, index: number) => {
+  if (visible) {
+    handleLoadMetrics(index)
+  }
+}
+
+// 加载指标
+const handleLoadMetrics = async (index: number) => {
+  // 每次都重新获取引用，避免引用失效
+  if (!localRules.value[index]?.data_source) {
+    return
+  }
+  if (localRules.value[index]._metrics && localRules.value[index]._metrics!.length > 0) {
+    return
+  }
+
+  localRules.value[index]._metricsLoading = true
+  
+  try {
+    const res: any = await fetchMetricsMeta({
+      data_source: localRules.value[index].data_source,
+      limit: 500,
+    })
+
+    if (res.code === 0) {
+      localRules.value[index]._metrics = res.details?.metrics || []
+      // 同步更新到父组件
+      syncUpdate(index)
+    }
+  } catch (error) {
+    console.error('加载指标失败:', error)
+  } finally {
+    localRules.value[index]._metricsLoading = false
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'RuleEditor',
+}
+</script>
+
+<style scoped lang="less">
+.rule-editor {
+  height: 100%;
+}
+
+.empty-rules {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.rules-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.rule-card {
+  :deep(.arco-card-header) {
+    border-bottom: 1px solid var(--color-border);
+    background-color: var(--color-fill-1);
+  }
+  
+  :deep(.arco-card-body) {
+    padding: 16px;
+  }
+}
+
+.rule-section {
+  margin-bottom: 16px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  .section-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-2);
+    margin-bottom: 12px;
+    padding-left: 8px;
+    border-left: 3px solid rgb(var(--primary-6));
+  }
+}
+
+// 表单项样式
+:deep(.arco-form-item) {
+  margin-bottom: 0;
+}
+
+// 响应式布局
+@media (max-width: 768px) {
+  .rule-card {
+    :deep(.arco-card-body) {
+      padding: 12px;
+    }
+  }
+  
+  .rule-section {
+    .section-title {
+      margin-bottom: 8px;
+    }
+  }
+  
+  :deep(.arco-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/alert/template/components/TemplateDetailDialog.vue b/src/views/ops/pages/alert/template/components/TemplateDetailDialog.vue
new file mode 100644
index 0000000..6c183ab
--- /dev/null
+++ b/src/views/ops/pages/alert/template/components/TemplateDetailDialog.vue
@@ -0,0 +1,169 @@
+<template>
+  <a-modal
+    v-model:visible="modalVisible"
+    :title="title"
+    :width="900"
+    :footer="false"
+    @cancel="handleClose"
+  >
+    <div v-if="loading" class="loading-container">
+      <a-spin />
+    </div>
+    <div v-else-if="detail">
+      <a-descriptions :column="2" bordered>
+        <a-descriptions-item label="模板 ID">
+          {{ detail.id }}
+        </a-descriptions-item>
+        <a-descriptions-item label="模板名称">
+          {{ detail.name }}
+        </a-descriptions-item>
+        <a-descriptions-item label="模板分类">
+          {{ getCategoryLabel(detail.category) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="启用状态">
+          <a-tag :color="detail.enabled ? 'green' : 'red'">
+            {{ detail.enabled ? '已启用' : '已禁用' }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="标签" :span="2">
+          <a-tag v-for="tag in (detail.tags || '').split(',').filter(Boolean)" :key="tag">
+            {{ tag }}
+          </a-tag>
+          <span v-if="!detail.tags">暂无标签</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="描述" :span="2">
+          {{ detail.description || '暂无描述' }}
+        </a-descriptions-item>
+      </a-descriptions>
+
+      <!-- 规则列表 -->
+      <a-divider orientation="left">规则列表</a-divider>
+      <a-table
+        v-if="detail.rules && detail.rules.length > 0"
+        :data="detail.rules"
+        :columns="ruleColumns"
+        :pagination="false"
+        stripe
+      />
+      <a-empty v-else description="暂无规则" />
+
+      <!-- 通知渠道 -->
+      <a-divider orientation="left">通知渠道</a-divider>
+      <div v-if="detail.channels && detail.channels.length > 0">
+        <a-tag v-for="channel in detail.channels" :key="channel.channel_id" color="arcoblue">
+          {{ getChannelName(channel.channel_id) }}
+        </a-tag>
+      </div>
+      <a-empty v-else description="暂无通知渠道" />
+
+      <!-- 抑制规则 -->
+      <a-divider orientation="left">抑制规则</a-divider>
+      <div v-if="detail.suppression_rule_ids && detail.suppression_rule_ids.length > 0">
+        <a-tag v-for="id in detail.suppression_rule_ids" :key="id" color="orangered">
+          {{ getSuppressionName(id) }}
+        </a-tag>
+      </div>
+      <a-empty v-else description="暂无抑制规则" />
+    </div>
+    <a-empty v-else description="暂无数据" />
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { fetchTemplateDetail, TEMPLATE_CATEGORIES, type AlertTemplate } from '@/api/ops/alertTemplate'
+import type { NotificationChannel, SuppressionRule } from '@/api/ops/alertTemplate'
+
+const props = defineProps<{
+  visible: boolean
+  title: string
+  templateId?: number | null
+  channelOptions: NotificationChannel[]
+  suppressionOptions: SuppressionRule[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+
+// 计算属性处理 v-model
+const modalVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+})
+
+// 状态
+const loading = ref(false)
+const detail = ref<AlertTemplate | null>(null)
+
+// 规则表格列
+const ruleColumns = [
+  { title: '规则名称', dataIndex: 'name', width: 150 },
+  { title: '数据源', dataIndex: 'data_source', width: 100 },
+  { title: '指标', dataIndex: 'metric_name', width: 150 },
+  { title: '运算符', dataIndex: 'compare_op', width: 80 },
+  { title: '阈值', dataIndex: 'threshold', width: 80 },
+  { title: '持续时间', dataIndex: 'duration', width: 80 },
+  { title: '告警级别', dataIndex: 'severity_code', width: 100 },
+]
+
+// 监听visible变化，加载详情
+watch(
+  () => props.visible,
+  async (val) => {
+    if (val && props.templateId) {
+      loading.value = true
+      try {
+        const res: any = await fetchTemplateDetail(props.templateId)
+        if (res.code === 0) {
+          detail.value = res.details
+        }
+      } catch (error) {
+        console.error('获取模板详情失败:', error)
+      } finally {
+        loading.value = false
+      }
+    } else {
+      detail.value = null
+    }
+  }
+)
+
+// 获取分类标签
+const getCategoryLabel = (value: string) => {
+  const item = TEMPLATE_CATEGORIES.find(c => c.value === value)
+  return item?.label || value
+}
+
+// 获取渠道名称
+const getChannelName = (id: number) => {
+  const item = props.channelOptions.find(c => c.id === id)
+  return item?.name || String(id)
+}
+
+// 获取抑制规则名称
+const getSuppressionName = (id: number) => {
+  const item = props.suppressionOptions.find(s => s.id === id)
+  return item?.name || String(id)
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('update:visible', false)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'TemplateDetailDialog',
+}
+</script>
+
+<style scoped lang="less">
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/alert/template/components/TemplateFormDialog.vue b/src/views/ops/pages/alert/template/components/TemplateFormDialog.vue
new file mode 100644
index 0000000..7794391
--- /dev/null
+++ b/src/views/ops/pages/alert/template/components/TemplateFormDialog.vue
@@ -0,0 +1,493 @@
+<template>
+  <a-modal
+    v-model:visible="modalVisible"
+    :title="title"
+    :width="1000"
+    :ok-loading="submitting"
+    @before-ok="handleSubmit"
+    @cancel="handleClose"
+  >
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      layout="vertical"
+    >
+      <!-- 基础信息区 -->
+      <a-divider orientation="left">基础信息</a-divider>
+      <a-row :gutter="16">
+        <a-col :span="8">
+          <a-form-item label="模板名称" field="name" required>
+            <a-input
+              v-model="formData.name"
+              placeholder="请输入模板名称"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="模板分类" field="category" required>
+            <a-select v-model="formData.category" placeholder="请选择分类" @change="handleCategoryChange">
+              <a-option v-for="item in TEMPLATE_CATEGORIES" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="是否启用" field="enabled">
+            <a-switch v-model="formData.enabled" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :span="24">
+          <a-form-item label="标签" field="tagsList" required>
+            <a-input-tag
+              v-model="formData.tagsList"
+              placeholder="输入后按回车添加"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :span="24">
+          <a-form-item label="描述" field="description">
+            <a-textarea
+              v-model="formData.description"
+              placeholder="请输入模板描述"
+              :max-length="500"
+              :auto-size="{ minRows: 2, maxRows: 4 }"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <!-- 规则配置区 -->
+      <a-divider orientation="left">
+        规则配置
+        <a-button type="text" size="small" @click="handleAddRule">
+          <template #icon><icon-plus /></template>
+          添加规则
+        </a-button>
+      </a-divider>
+
+      <RuleEditor
+        v-model:rules="formData.rules"
+        :severity-options="severityOptions"
+        @remove="handleRemoveRule"
+      />
+
+      <!-- 通知渠道区 -->
+      <a-divider orientation="left">通知渠道</a-divider>
+      <a-form-item label="选择通知渠道" field="selectedChannelIds" required>
+        <a-select
+          v-model="formData.selectedChannelIds"
+          placeholder="请选择通知渠道（可搜索）"
+          multiple
+          allow-search
+          :filter-option="false"
+          @search="handleChannelSearch"
+          @dropdown-visible-change="handleChannelDropdownChange"
+        >
+          <a-option v-for="item in channelOptions" :key="item.id" :value="item.id">
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+
+      <!-- 抑制规则区 -->
+      <a-divider orientation="left">抑制规则</a-divider>
+      <a-form-item label="选择抑制规则" field="suppression_rule_ids" required>
+        <a-select
+          v-model="formData.suppression_rule_ids"
+          placeholder="请选择抑制规则（可搜索）"
+          multiple
+          allow-search
+          :filter-option="false"
+          @search="handleSuppressionSearch"
+          @dropdown-visible-change="handleSuppressionDropdownChange"
+        >
+          <a-option v-for="item in suppressionOptions" :key="item.id" :value="item.id">
+            {{ item.name }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { FormInstance } from '@arco-design/web-vue/es/form'
+import RuleEditor from './RuleEditor.vue'
+import {
+  createTemplate,
+  updateTemplate,
+  fetchChannelList,
+  fetchSuppressionList,
+  fetchMetricsMeta,
+  TEMPLATE_CATEGORIES,
+  type AlertTemplate,
+  type AlertRule,
+  type NotificationChannel,
+  type SuppressionRule,
+  type AlertSeverity,
+  type MetricMeta,
+} from '@/api/ops/alertTemplate'
+
+interface RuleItem extends AlertRule {
+  _metrics?: MetricMeta[]
+  _metricsLoading?: boolean
+}
+
+interface FormData {
+  name: string
+  category: string
+  description: string
+  enabled: boolean
+  tagsList: string[]
+  rules: RuleItem[]
+  selectedChannelIds: number[]
+  suppression_rule_ids: number[]
+}
+
+const props = defineProps<{
+  visible: boolean
+  title: string
+  isEdit: boolean
+  editData?: AlertTemplate | null
+  severityOptions: AlertSeverity[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}>()
+
+// 计算属性处理 v-model
+const modalVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val),
+})
+
+// 状态
+const submitting = ref(false)
+const formRef = ref<FormInstance>()
+
+// 下拉选项
+const channelOptions = ref<NotificationChannel[]>([])
+const suppressionOptions = ref<SuppressionRule[]>([])
+
+// 表单数据
+const formData = ref<FormData>({
+  name: '',
+  category: '',
+  description: '',
+  enabled: true,
+  tagsList: [],
+  rules: [],
+  selectedChannelIds: [],
+  suppression_rule_ids: [],
+})
+
+// 表单验证规则
+const formRules = {
+  name: [
+    { required: true, message: '请输入模板名称' },
+    { minLength: 2, message: '模板名称至少2个字符' },
+    { maxLength: 100, message: '模板名称最多100个字符' },
+  ],
+  category: [{ required: true, message: '请选择模板分类' }],
+  tagsList: [{ required: true, message: '请添加标签' }],
+  selectedChannelIds: [{ required: true, message: '请选择通知渠道' }],
+  suppression_rule_ids: [{ required: true, message: '请选择抑制规则' }],
+}
+
+// 监听visible变化，初始化表单
+watch(
+  () => props.visible,
+  async (val) => {
+    if (val) {
+      loadChannelOptions()
+      loadSuppressionOptions()
+
+      if (props.isEdit && props.editData) {
+        // 编辑模式
+        const tagsList = (props.editData.tags || '').split(',').filter(Boolean)
+        const selectedChannelIds = (props.editData.channels || []).map(c => c.channel_id)
+
+        // 初始化规则数据
+        const rules = (props.editData.rules || []).map(r => ({
+          ...r,
+          _metrics: [],
+          _metricsLoading: false,
+        }))
+
+        formData.value = {
+          name: props.editData.name,
+          category: props.editData.category,
+          description: props.editData.description || '',
+          enabled: props.editData.enabled ?? true,
+          tagsList,
+          rules,
+          selectedChannelIds,
+          suppression_rule_ids: props.editData.suppression_rule_ids || [],
+        }
+
+        // 为已有规则加载指标数据
+        for (let i = 0; i < rules.length; i++) {
+          if (rules[i].data_source) {
+            await loadMetricsForRule(i)
+          }
+        }
+      } else {
+        // 新建模式
+        formData.value = {
+          name: '',
+          category: '',
+          description: '',
+          enabled: true,
+          tagsList: [],
+          rules: [],
+          selectedChannelIds: [],
+          suppression_rule_ids: [],
+        }
+      }
+    }
+  }
+)
+
+// 为规则加载指标数据
+const loadMetricsForRule = async (index: number) => {
+  const rule = formData.value.rules[index]
+  if (!rule.data_source || rule._metrics?.length) return
+
+  rule._metricsLoading = true
+  try {
+    const res: any = await fetchMetricsMeta({
+      data_source: rule.data_source,
+      limit: 500,
+    })
+    if (res.code === 0) {
+      rule._metrics = res.details?.metrics || []
+    }
+  } catch (error) {
+    console.error('加载指标失败:', error)
+  } finally {
+    rule._metricsLoading = false
+  }
+}
+
+// 加载通知渠道
+const loadChannelOptions = async () => {
+  try {
+    const res: any = await fetchChannelList({ enabled: true })
+    if (res.code === 0) {
+      channelOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('加载通知渠道失败:', error)
+  }
+}
+
+// 加载抑制规则
+const loadSuppressionOptions = async () => {
+  try {
+    const res: any = await fetchSuppressionList({ enabled: true })
+    if (res.code === 0) {
+      suppressionOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('加载抑制规则失败:', error)
+  }
+}
+
+// 通知渠道搜索
+const handleChannelSearch = async (keyword: string) => {
+  try {
+    const res: any = await fetchChannelList({ enabled: true, keyword })
+    if (res.code === 0) {
+      channelOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('搜索通知渠道失败:', error)
+  }
+}
+
+const handleChannelDropdownChange = (visible: boolean) => {
+  if (visible && channelOptions.value.length === 0) {
+    loadChannelOptions()
+  }
+}
+
+// 抑制规则搜索
+const handleSuppressionSearch = async (keyword: string) => {
+  try {
+    const res: any = await fetchSuppressionList({ enabled: true, keyword })
+    if (res.code === 0) {
+      suppressionOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('搜索抑制规则失败:', error)
+  }
+}
+
+const handleSuppressionDropdownChange = (visible: boolean) => {
+  if (visible && suppressionOptions.value.length === 0) {
+    loadSuppressionOptions()
+  }
+}
+
+// 分类变化时加载默认规则
+const handleCategoryChange = (category: string) => {
+  if (!props.isEdit && formData.value.rules.length === 0) {
+    const defaultRules = getDefaultRules(category)
+    formData.value.rules = defaultRules.map(r => ({
+      ...r,
+      _enabled: true,
+      _metrics: [],
+      _metricsLoading: false,
+    }))
+  }
+}
+
+// 获取默认规则
+const getDefaultRules = (category: string): AlertRule[] => {
+  const defaultRulesMap: Record<string, AlertRule[]> = {
+    'os': [
+      { name: 'CPU使用率过高', data_source: 'dc-host', metric_name: 'cpu_usage', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '内存使用率过高', data_source: 'dc-host', metric_name: 'memory_usage', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '磁盘使用率过高', data_source: 'dc-host', metric_name: 'disk_usage', rule_type: 'static', compare_op: '>=', threshold: 85, duration: 600, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'server_hardware': [
+      { name: 'CPU温度过高', data_source: 'dc-hardware', metric_name: 'server_temperature_cpu', rule_type: 'static', compare_op: '>=', threshold: 75, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '风扇转速异常', data_source: 'dc-hardware', metric_name: 'fan_speed', rule_type: 'static', compare_op: '<=', threshold: 800, duration: 300, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'network_device': [
+      { name: '接口Down告警', data_source: 'dc-network', metric_name: 'interface_status', rule_type: 'static', compare_op: '==', threshold: 'down', duration: 60, eval_interval: 30, severity_code: 'critical' },
+      { name: '端口带宽利用率过高', data_source: 'dc-network', metric_name: 'interface_usage_percent', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'database': [
+      { name: '数据库连接数使用率过高', data_source: 'dc-database', metric_name: 'db_conn_usage_percent', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '慢查询次数过多', data_source: 'dc-database', metric_name: 'slow_query_count', rule_type: 'static', compare_op: '>=', threshold: 50, duration: 300, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'middleware': [
+      { name: '请求错误率过高', data_source: 'dc-middleware', metric_name: 'error_rate', rule_type: 'static', compare_op: '>=', threshold: 1, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '队列消息堆积', data_source: 'dc-middleware', metric_name: 'queue_depth', rule_type: 'static', compare_op: '>=', threshold: 10000, duration: 600, eval_interval: 60, severity_code: 'critical' },
+    ],
+  }
+
+  return defaultRulesMap[category] || []
+}
+
+// 添加规则
+const handleAddRule = () => {
+  formData.value.rules.push({
+    name: '',
+    data_source: formData.value.category ? getDefaultDataSource(formData.value.category) : 'dc-host',
+    metric_name: '',
+    rule_type: 'static',
+    compare_op: '>=',
+    threshold: 0,
+    duration: 300,
+    eval_interval: 60,
+    severity_code: 'warning',
+    _metrics: [],
+    _metricsLoading: false,
+  })
+}
+
+// 获取默认数据源
+const getDefaultDataSource = (category: string): string => {
+  const map: Record<string, string> = {
+    'os': 'dc-host',
+    'server_hardware': 'dc-hardware',
+    'network_device': 'dc-network',
+    'database': 'dc-database',
+    'middleware': 'dc-middleware',
+    'virtualization': 'dc-virtualization',
+    'power_env': 'dc-env',
+    'safety_env': 'dc-env',
+  }
+  return map[category] || 'dc-host'
+}
+
+// 移除规则
+const handleRemoveRule = (index: number) => {
+  formData.value.rules.splice(index, 1)
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  const valid = await formRef.value?.validate()
+  if (valid) {
+    return false // 校验失败，阻止弹窗关闭
+  }
+
+  submitting.value = true
+  try {
+    // 提取规则数据
+    const submitRules = formData.value.rules.map(r => {
+      const { _metrics, _metricsLoading, ...rest } = r as any
+      return rest
+    })
+
+    const submitData: AlertTemplate = {
+      name: formData.value.name,
+      category: formData.value.category,
+      description: formData.value.description,
+      enabled: formData.value.enabled,
+      tags: formData.value.tagsList.join(','),
+      rules: submitRules,
+      channels: formData.value.selectedChannelIds.map(id => ({ channel_id: id })),
+      suppression_rule_ids: formData.value.suppression_rule_ids,
+    }
+
+    if (props.isEdit && props.editData?.id) {
+      submitData.id = props.editData.id
+      const res: any = await updateTemplate(submitData)
+      if (res.code === 0) {
+        Message.success('模板更新成功')
+        emit('success')
+        return true // 成功，允许关闭弹窗
+      } else {
+        Message.error(res.msg || '更新失败')
+        return false
+      }
+    } else {
+      const res: any = await createTemplate(submitData)
+      if (res.code === 0) {
+        Message.success('模板创建成功')
+        emit('success')
+        return true // 成功，允许关闭弹窗
+      } else {
+        Message.error(res.msg || '创建失败')
+        return false
+      }
+    }
+  } catch (error: any) {
+    console.error('提交失败:', error)
+    Message.error(error.message || '操作失败')
+    return false
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 关闭弹窗
+const handleClose = () => {
+  emit('update:visible', false)
+  formRef.value?.resetFields()
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'TemplateFormDialog',
+}
+</script>
\ No newline at end of file
diff --git a/src/views/ops/pages/alert/template/edit/index.vue b/src/views/ops/pages/alert/template/edit/index.vue
new file mode 100644
index 0000000..18d3ef8
--- /dev/null
+++ b/src/views/ops/pages/alert/template/edit/index.vue
@@ -0,0 +1,708 @@
+<template>
+  <div class="template-edit-page">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <a-button type="text" @click="handleBack">
+          <template #icon><icon-left /></template>
+          返回列表
+        </a-button>
+        <a-divider direction="vertical" />
+        <h2 class="page-title">{{ pageTitle }}</h2>
+      </div>
+      <div class="header-right">
+        <a-space>
+          <a-button @click="handleBack">取消</a-button>
+          <a-button type="primary" :loading="submitting" @click="handleSubmit">
+            {{ isEdit ? '保存' : '创建' }}
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+
+    <!-- 表单内容 -->
+    <div class="page-content">
+      <a-spin :loading="loading" style="width: 100%">
+        <a-row :gutter="20">
+          <!-- 左侧：基础信息 -->
+          <a-col :xs="24" :sm="24" :md="10" :lg="8">
+            <a-card class="info-card" title="基础信息">
+              <a-form
+                ref="formRef"
+                :model="formData"
+                :rules="formRules"
+                layout="vertical"
+              >
+                <a-form-item label="模板名称" field="name" required>
+                  <a-input
+                    v-model="formData.name"
+                    placeholder="请输入模板名称"
+                    allow-clear
+                  />
+                </a-form-item>
+
+                <a-form-item label="模板分类" field="category" required>
+                  <a-select v-model="formData.category" placeholder="请选择分类" @change="handleCategoryChange">
+                    <a-option v-for="item in TEMPLATE_CATEGORIES" :key="item.value" :value="item.value">
+                      {{ item.label }}
+                    </a-option>
+                  </a-select>
+                </a-form-item>
+
+                <a-form-item label="是否启用" field="enabled">
+                  <a-switch v-model="formData.enabled" />
+                </a-form-item>
+
+                <a-form-item label="标签" field="tagsList" required>
+                  <a-input-tag
+                    v-model="formData.tagsList"
+                    placeholder="输入后按回车添加"
+                    allow-clear
+                  />
+                </a-form-item>
+
+                <a-form-item label="描述" field="description">
+                  <a-textarea
+                    v-model="formData.description"
+                    placeholder="请输入模板描述"
+                    :max-length="500"
+                    :auto-size="{ minRows: 3, maxRows: 5 }"
+                    show-word-limit
+                  />
+                </a-form-item>
+              </a-form>
+            </a-card>
+
+            <!-- 通知渠道 -->
+            <a-card class="info-card" title="通知渠道">
+              <a-form-item label="选择通知渠道" field="selectedChannelIds" required :rules="[{ required: true, message: '请选择通知渠道' }]">
+                <a-select
+                  v-model="formData.selectedChannelIds"
+                  placeholder="请选择通知渠道"
+                  multiple
+                  allow-search
+                  :filter-option="false"
+                  @search="handleChannelSearch"
+                  @dropdown-visible-change="handleChannelDropdownChange"
+                >
+                  <a-option v-for="item in channelOptions" :key="item.id" :value="item.id">
+                    {{ item.name }}
+                  </a-option>
+                </a-select>
+              </a-form-item>
+            </a-card>
+
+            <!-- 抑制规则 -->
+            <a-card class="info-card" title="抑制规则">
+              <a-form-item label="选择抑制规则" field="suppression_rule_ids" required :rules="[{ required: true, message: '请选择抑制规则' }]">
+                <a-select
+                  v-model="formData.suppression_rule_ids"
+                  placeholder="请选择抑制规则"
+                  multiple
+                  allow-search
+                  :filter-option="false"
+                  @search="handleSuppressionSearch"
+                  @dropdown-visible-change="handleSuppressionDropdownChange"
+                >
+                  <a-option v-for="item in suppressionOptions" :key="item.id" :value="item.id">
+                    {{ item.name }}
+                  </a-option>
+                </a-select>
+              </a-form-item>
+            </a-card>
+          </a-col>
+
+          <!-- 右侧：规则配置 -->
+          <a-col :xs="24" :sm="24" :md="14" :lg="16">
+            <a-card class="rules-card">
+              <template #title>
+                <div class="rules-card-title">
+                  <span>规则配置</span>
+                  <a-badge :count="formData.rules.length" :dot-style="{ backgroundColor: '#165dff' }" />
+                </div>
+              </template>
+              <template #extra>
+                <a-button type="primary" size="small" @click="handleAddRule">
+                  <template #icon><icon-plus /></template>
+                  添加规则
+                </a-button>
+              </template>
+
+              <div class="rules-content">
+                <a-empty v-if="formData.rules.length === 0" description="暂无规则，请添加">
+                  <a-button type="primary" @click="handleAddRule">
+                    <template #icon><icon-plus /></template>
+                    添加第一条规则
+                  </a-button>
+                </a-empty>
+                <RuleEditor
+                  v-else
+                  ref="ruleEditorRef"
+                  v-model:rules="formData.rules"
+                  :severity-options="severityOptions"
+                  @remove="handleRemoveRule"
+                />
+              </div>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Message } from '@arco-design/web-vue'
+import type { FormInstance } from '@arco-design/web-vue/es/form'
+import RuleEditor from '../components/RuleEditor.vue'
+import {
+  createTemplate,
+  updateTemplate,
+  fetchTemplateDetail,
+  fetchChannelList,
+  fetchSuppressionList,
+  fetchSeverityList,
+  fetchMetricsMeta,
+  TEMPLATE_CATEGORIES,
+  type AlertTemplate,
+  type AlertRule,
+  type NotificationChannel,
+  type SuppressionRule,
+  type AlertSeverity,
+  type MetricMeta,
+} from '@/api/ops/alertTemplate'
+
+interface RuleItem extends AlertRule {
+  _metrics?: MetricMeta[]
+  _metricsLoading?: boolean
+}
+
+interface FormData {
+  name: string
+  category: string
+  description: string
+  enabled: boolean
+  tagsList: string[]
+  rules: RuleItem[]
+  selectedChannelIds: number[]
+  suppression_rule_ids: number[]
+}
+
+const route = useRoute()
+const router = useRouter()
+
+// 页面状态
+const isEdit = ref(false)
+const templateId = ref<number | null>(null)
+const pageTitle = ref('新建告警模板')
+const loading = ref(false)
+const submitting = ref(false)
+const formRef = ref<FormInstance>()
+const ruleEditorRef = ref<{ validate: () => Promise<any> } | null>(null)
+
+// 下拉选项
+const channelOptions = ref<NotificationChannel[]>([])
+const suppressionOptions = ref<SuppressionRule[]>([])
+const severityOptions = ref<AlertSeverity[]>([])
+
+// 表单数据
+const formData = ref<FormData>({
+  name: '',
+  category: '',
+  description: '',
+  enabled: true,
+  tagsList: [],
+  rules: [],
+  selectedChannelIds: [],
+  suppression_rule_ids: [],
+})
+
+// 表单验证规则
+const formRules = {
+  name: [
+    { required: true, message: '请输入模板名称' },
+    { minLength: 2, message: '模板名称至少2个字符' },
+    { maxLength: 100, message: '模板名称最多100个字符' },
+  ],
+  category: [{ required: true, message: '请选择模板分类' }],
+  tagsList: [{ required: true, message: '请添加标签' }],
+  selectedChannelIds: [{ required: true, message: '请选择通知渠道' }],
+  suppression_rule_ids: [{ required: true, message: '请选择抑制规则' }],
+}
+
+// 初始化页面
+const initPage = async () => {
+  // 加载下拉选项
+  await loadSeverityOptions()
+  loadChannelOptions()
+  loadSuppressionOptions()
+
+  // 判断是否为编辑模式
+  const id = route.query.id
+  if (id) {
+    isEdit.value = true
+    templateId.value = Number(id)
+    pageTitle.value = '编辑告警模板'
+    await loadTemplateDetail()
+  }
+}
+
+// 加载模板详情
+const loadTemplateDetail = async () => {
+  if (!templateId.value) return
+
+  loading.value = true
+  try {
+    const res: any = await fetchTemplateDetail(templateId.value)
+    if (res.code === 0) {
+      const details = res.details
+      
+      // 解析 JSON 字符串字段
+      const rules = typeof details.rules === 'string' ? JSON.parse(details.rules) : (details.rules || [])
+      const channels = typeof details.channels === 'string' ? JSON.parse(details.channels) : (details.channels || [])
+      const suppressionIds = typeof details.suppression_rule_ids === 'string' 
+        ? JSON.parse(details.suppression_rule_ids) 
+        : (details.suppression_rule_ids || [])
+      
+      const tagsList = (details.tags || '').split(',').filter(Boolean)
+      const selectedChannelIds = (channels || []).map((c: any) => c.channel_id)
+
+      // 初始化规则数据
+      const rulesWithMetrics = rules.map((r: any) => ({
+        ...r,
+        _metrics: [],
+        _metricsLoading: false,
+      }))
+
+      formData.value = {
+        name: details.name,
+        category: details.category,
+        description: details.description || '',
+        enabled: details.enabled ?? true,
+        tagsList,
+        rules: rulesWithMetrics,
+        selectedChannelIds,
+        suppression_rule_ids: suppressionIds,
+      }
+
+      // 为已有规则加载指标数据
+      for (let i = 0; i < rulesWithMetrics.length; i++) {
+        if (rulesWithMetrics[i].data_source) {
+          await loadMetricsForRule(i)
+        }
+      }
+    } else {
+      Message.error(res.msg || '获取模板详情失败')
+      router.push('/alert/template')
+    }
+  } catch (error: any) {
+    console.error('获取模板详情失败:', error)
+    Message.error(error.message || '获取模板详情失败')
+    router.push('/alert/template')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 为规则加载指标数据
+const loadMetricsForRule = async (index: number) => {
+  const rule = formData.value.rules[index]
+  if (!rule.data_source || rule._metrics?.length) return
+
+  rule._metricsLoading = true
+  try {
+    const res: any = await fetchMetricsMeta({
+      data_source: rule.data_source,
+      limit: 500,
+    })
+    if (res.code === 0) {
+      rule._metrics = res.details?.metrics || []
+    }
+  } catch (error) {
+    console.error('加载指标失败:', error)
+  } finally {
+    rule._metricsLoading = false
+  }
+}
+
+// 加载告警级别
+const loadSeverityOptions = async () => {
+  try {
+    const res: any = await fetchSeverityList()
+    if (res.code === 0) {
+      severityOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('加载告警级别失败:', error)
+  }
+}
+
+// 加载通知渠道
+const loadChannelOptions = async () => {
+  try {
+    const res: any = await fetchChannelList({ enabled: true })
+    if (res.code === 0) {
+      channelOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('加载通知渠道失败:', error)
+  }
+}
+
+// 加载抑制规则
+const loadSuppressionOptions = async () => {
+  try {
+    const res: any = await fetchSuppressionList({ enabled: true })
+    if (res.code === 0) {
+      suppressionOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('加载抑制规则失败:', error)
+  }
+}
+
+// 通知渠道搜索
+const handleChannelSearch = async (keyword: string) => {
+  try {
+    const res: any = await fetchChannelList({ enabled: true, keyword })
+    if (res.code === 0) {
+      channelOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('搜索通知渠道失败:', error)
+  }
+}
+
+const handleChannelDropdownChange = (visible: boolean) => {
+  if (visible && channelOptions.value.length === 0) {
+    loadChannelOptions()
+  }
+}
+
+// 抑制规则搜索
+const handleSuppressionSearch = async (keyword: string) => {
+  try {
+    const res: any = await fetchSuppressionList({ enabled: true, keyword })
+    if (res.code === 0) {
+      suppressionOptions.value = res.details?.data || res.details?.list || []
+    }
+  } catch (error) {
+    console.error('搜索抑制规则失败:', error)
+  }
+}
+
+const handleSuppressionDropdownChange = (visible: boolean) => {
+  if (visible && suppressionOptions.value.length === 0) {
+    loadSuppressionOptions()
+  }
+}
+
+// 分类变化时加载默认规则
+const handleCategoryChange = (category: string) => {
+  if (!isEdit.value && formData.value.rules.length === 0) {
+    const defaultRules = getDefaultRules(category)
+    formData.value.rules = defaultRules.map(r => ({
+      ...r,
+      _enabled: true,
+      _metrics: [],
+      _metricsLoading: false,
+    }))
+  }
+}
+
+// 获取默认规则
+const getDefaultRules = (category: string): AlertRule[] => {
+  const defaultRulesMap: Record<string, AlertRule[]> = {
+    'os': [
+      { name: 'CPU使用率过高', data_source: 'dc-host', metric_name: 'cpu_usage', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '内存使用率过高', data_source: 'dc-host', metric_name: 'memory_usage', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '磁盘使用率过高', data_source: 'dc-host', metric_name: 'disk_usage', rule_type: 'static', compare_op: '>=', threshold: 85, duration: 600, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'server_hardware': [
+      { name: 'CPU温度过高', data_source: 'dc-hardware', metric_name: 'server_temperature_cpu', rule_type: 'static', compare_op: '>=', threshold: 75, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '风扇转速异常', data_source: 'dc-hardware', metric_name: 'fan_speed', rule_type: 'static', compare_op: '<=', threshold: 800, duration: 300, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'network_device': [
+      { name: '接口Down告警', data_source: 'dc-network', metric_name: 'interface_status', rule_type: 'static', compare_op: '==', threshold: 'down', duration: 60, eval_interval: 30, severity_code: 'critical' },
+      { name: '端口带宽利用率过高', data_source: 'dc-network', metric_name: 'interface_usage_percent', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'database': [
+      { name: '数据库连接数使用率过高', data_source: 'dc-database', metric_name: 'db_conn_usage_percent', rule_type: 'static', compare_op: '>=', threshold: 80, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '慢查询次数过多', data_source: 'dc-database', metric_name: 'slow_query_count', rule_type: 'static', compare_op: '>=', threshold: 50, duration: 300, eval_interval: 60, severity_code: 'warning' },
+    ],
+    'middleware': [
+      { name: '请求错误率过高', data_source: 'dc-middleware', metric_name: 'error_rate', rule_type: 'static', compare_op: '>=', threshold: 1, duration: 300, eval_interval: 60, severity_code: 'warning' },
+      { name: '队列消息堆积', data_source: 'dc-middleware', metric_name: 'queue_depth', rule_type: 'static', compare_op: '>=', threshold: 10000, duration: 600, eval_interval: 60, severity_code: 'critical' },
+    ],
+  }
+
+  return defaultRulesMap[category] || []
+}
+
+// 添加规则
+const handleAddRule = () => {
+  formData.value.rules.push({
+    name: '',
+    data_source: formData.value.category ? getDefaultDataSource(formData.value.category) : 'dc-host',
+    metric_name: '',
+    rule_type: 'static',
+    compare_op: '>=',
+    threshold: 0,
+    duration: 300,
+    eval_interval: 60,
+    severity_code: 'warning',
+    _metrics: [],
+    _metricsLoading: false,
+  })
+}
+
+// 获取默认数据源
+const getDefaultDataSource = (category: string): string => {
+  const map: Record<string, string> = {
+    'os': 'dc-host',
+    'server_hardware': 'dc-hardware',
+    'network_device': 'dc-network',
+    'database': 'dc-database',
+    'middleware': 'dc-middleware',
+    'virtualization': 'dc-virtualization',
+    'power_env': 'dc-env',
+    'safety_env': 'dc-env',
+  }
+  return map[category] || 'dc-host'
+}
+
+// 移除规则
+const handleRemoveRule = (index: number) => {
+  formData.value.rules.splice(index, 1)
+}
+
+// 校验规则字段
+const validateRules = (): { valid: boolean; message: string } => {
+  if (formData.value.rules.length === 0) {
+    return { valid: false, message: '请至少添加一条规则' }
+  }
+
+  for (let i = 0; i < formData.value.rules.length; i++) {
+    const rule = formData.value.rules[i]
+    const ruleNum = i + 1
+
+    if (!rule.name || rule.name.trim() === '') {
+      return { valid: false, message: `规则${ruleNum}: 请输入规则名称` }
+    }
+    if (!rule.data_source) {
+      return { valid: false, message: `规则${ruleNum}: 请选择数据源` }
+    }
+    if (!rule.metric_name) {
+      return { valid: false, message: `规则${ruleNum}: 请选择指标名称` }
+    }
+    if (!rule.rule_type) {
+      return { valid: false, message: `规则${ruleNum}: 请选择规则类型` }
+    }
+    if (!rule.compare_op) {
+      return { valid: false, message: `规则${ruleNum}: 请选择比较运算符` }
+    }
+    if (rule.threshold === undefined || rule.threshold === null || rule.threshold === '') {
+      return { valid: false, message: `规则${ruleNum}: 请输入阈值` }
+    }
+    if (rule.duration === undefined || rule.duration === null) {
+      return { valid: false, message: `规则${ruleNum}: 请输入持续时间` }
+    }
+    if (rule.eval_interval === undefined || rule.eval_interval === null) {
+      return { valid: false, message: `规则${ruleNum}: 请输入评估间隔` }
+    }
+    if (!rule.severity_code) {
+      return { valid: false, message: `规则${ruleNum}: 请选择告警级别` }
+    }
+  }
+
+  return { valid: true, message: '' }
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    // 校验基础表单
+    const valid = await formRef.value?.validate()
+    if (valid) {
+      Message.warning('请检查表单填写是否正确')
+      return
+    }
+
+    // 校验规则字段（使用 RuleEditor 的 validate 方法）
+    if (formData.value.rules.length === 0) {
+      Message.warning('请至少添加一条规则')
+      return
+    }
+
+    try {
+      await ruleEditorRef.value?.validate()
+    } catch (ruleErrors) {
+      Message.warning('请检查规则配置是否完整')
+      return
+    }
+
+    submitting.value = true
+
+    // 提取规则数据
+    const submitRules = formData.value.rules.map(r => {
+      const { _metrics, _metricsLoading, ...rest } = r as any
+      return rest
+    })
+
+    const submitData: AlertTemplate = {
+      name: formData.value.name,
+      category: formData.value.category,
+      description: formData.value.description,
+      enabled: formData.value.enabled,
+      tags: formData.value.tagsList.join(','),
+      rules: submitRules,
+      channels: formData.value.selectedChannelIds.map(id => ({ channel_id: id })),
+      suppression_rule_ids: formData.value.suppression_rule_ids,
+    }
+
+    if (isEdit.value && templateId.value) {
+      submitData.id = templateId.value
+      const res: any = await updateTemplate(submitData)
+      if (res.code === 0) {
+        Message.success('模板更新成功')
+        router.push('/alert/template')
+      } else {
+        Message.error(res.msg || '更新失败')
+      }
+    } else {
+      const res: any = await createTemplate(submitData)
+      if (res.code === 0) {
+        Message.success('模板创建成功')
+        router.push('/alert/template')
+      } else {
+        Message.error(res.msg || '创建失败')
+      }
+    }
+  } catch (error: any) {
+    console.error('提交失败:', error)
+    Message.error(error.message || '操作失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+// 返回列表
+const handleBack = () => {
+  router.push('/alert/template')
+}
+
+// 初始化
+onMounted(() => {
+  initPage()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AlertTemplateEditPage',
+}
+</script>
+
+<style scoped lang="less">
+.template-edit-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-fill-2);
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background-color: var(--color-bg-2);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+  
+  .header-left {
+    display: flex;
+    align-items: center;
+    
+    .page-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+}
+
+.page-content {
+  flex: 1;
+  padding: 20px;
+  overflow: auto;
+}
+
+.info-card {
+  margin-bottom: 16px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.rules-card {
+  height: 100%;
+  min-height: 500px;
+  display: flex;
+  flex-direction: column;
+  
+  :deep(.arco-card-body) {
+    flex: 1;
+    overflow: auto;
+  }
+  
+  .rules-card-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .rules-content {
+    height: 100%;
+  }
+}
+
+// 表单项样式优化
+:deep(.arco-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.arco-card) {
+  .arco-card-header {
+    border-bottom: 1px solid var(--color-border);
+  }
+}
+
+// 响应式布局
+@media (max-width: 992px) {
+  .rules-card {
+    min-height: 400px;
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+    
+    .header-right {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+  
+  .rules-card {
+    min-height: 300px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ops/pages/alert/template/index.vue b/src/views/ops/pages/alert/template/index.vue
index 64af90d..150f782 100644
--- a/src/views/ops/pages/alert/template/index.vue
+++ b/src/views/ops/pages/alert/template/index.vue
@@ -17,69 +17,27 @@
     >
       <!-- 工具栏左侧：新建按钮 -->
       <template #toolbar-left>
-        <a-space>
-          <a-button type="primary" @click="handleOpenCreateModal">
-            <template #icon><icon-plus /></template>
-            新建模板
-          </a-button>
-          <a-button
-            v-if="selectedRowKeys.length > 0"
-            type="outline"
-            status="danger"
-            @click="handleBatchDelete"
-          >
-            <template #icon><icon-delete /></template>
-            批量删除
-          </a-button>
-        </a-space>
-      </template>
-
-      <!-- 工具栏右侧 -->
-      <template #toolbar-right>
-        <a-space>
-          <a-button
-            v-if="selectedRecord"
-            type="outline"
-            @click="handleViewDetail(selectedRecord)"
-          >
-            <template #icon><icon-eye /></template>
-            查看详情
-          </a-button>
-          <a-button
-            v-if="selectedRecord"
-            type="outline"
-            @click="handleEdit(selectedRecord)"
-          >
-            <template #icon><icon-edit /></template>
-            编辑
-          </a-button>
-        </a-space>
+        <a-button type="primary" @click="handleCreate">
+          <template #icon><icon-plus /></template>
+          新建模板
+        </a-button>
       </template>
 
       <!-- 状态列 -->
-      <template #status="{ record }">
-        <a-tag :color="record.state === 1 ? 'green' : 'orange'">
-          {{ record.state === 1 ? '已发布' : '未发布' }}
+      <template #enabled="{ record }">
+        <a-tag :color="record.enabled ? 'green' : 'red'">
+          {{ record.enabled ? '已启用' : '已禁用' }}
         </a-tag>
       </template>
 
-      <!-- 封面列：背景图 + 封面图叠加，点击可放大 -->
-      <template #indexImage="{ record }">
-        <div
-          v-if="record.indexImage || record.backgroundImage"
-          class="cover-preview"
-          :style="record.backgroundImage ? { backgroundImage: `url(${record.backgroundImage})` } : {}"
-          @click="handleOpenCoverPreview(record)"
-        >
-          <img
-            v-if="record.indexImage"
-            :src="record.indexImage"
-            class="cover-image"
-          />
-        </div>
-        <div v-else class="cover-preview">
-          <span class="text-gray">暂无封面</span>
-        </div>
+      <!-- 分类列 -->
+      <template #category="{ record }">
+        {{ getCategoryLabel(record.category) }}
+      </template>
+
+      <!-- 规则数量列 -->
+      <template #rulesCount="{ record }">
+        <a-badge :count="getRulesCount(record.rules)" :dot-style="{ backgroundColor: '#165dff' }" />
       </template>
 
       <!-- 操作列 -->
@@ -94,10 +52,10 @@
           <a-button
             type="text"
             size="small"
-            :status="record.state === 1 ? 'warning' : 'success'"
-            @click="handleTogglePublish(record)"
+            :status="record.enabled ? 'warning' : 'success'"
+            @click="handleToggleEnabled(record)"
           >
-            {{ record.state === 1 ? '取消发布' : '发布' }}
+            {{ record.enabled ? '禁用' : '启用' }}
           </a-button>
           <a-popconfirm
             content="确定要删除此模板吗？"
@@ -112,261 +70,86 @@
       </template>
     </search-table>
 
-    <!-- 新建/编辑弹窗 -->
-    <a-modal
-      v-model:visible="formModalVisible"
-      :title="formModalTitle"
-      :width="700"
-      :ok-loading="submitting"
-      @ok="handleSubmit"
-      @cancel="handleCloseFormModal"
-    >
-      <a-form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        layout="vertical"
-      >
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="模板名称" field="projectName">
-              <a-input
-                v-model="formData.projectName"
-                placeholder="请输入模板名称"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="发布状态" field="state">
-              <a-select v-model="formData.state" placeholder="请选择">
-                <a-option :value="-1">未发布</a-option>
-                <a-option :value="1">已发布</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="封面图片" field="indexImage">
-              <a-upload
-                :file-list="indexImageFileList"
-                :auto-upload="false"
-                :show-file-list="false"
-                accept="image/*"
-                @change="handleIndexImageChange"
-              >
-                <template #upload-button>
-                  <div
-                    v-if="formData.indexImage"
-                    class="preview-container"
-                    :style="{ backgroundImage: `url(${formData.indexImage})` }"
-                  >
-                    <icon-plus class="upload-icon" />
-                  </div>
-                  <div v-else class="upload-container">
-                    <icon-plus class="upload-icon" />
-                    <div class="upload-text">上传封面</div>
-                  </div>
-                </template>
-              </a-upload>
-              <a-button
-                v-if="formData.indexImage"
-                type="text"
-                size="small"
-                status="danger"
-                @click="formData.indexImage = ''"
-              >
-                清除
-              </a-button>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="背景图片" field="backgroundImage">
-              <a-upload
-                :file-list="backgroundImageFileList"
-                :auto-upload="false"
-                :show-file-list="false"
-                accept="image/*"
-                @change="handleBackgroundImageChange"
-              >
-                <template #upload-button>
-                  <div
-                    v-if="formData.backgroundImage"
-                    class="preview-container"
-                    :style="{ backgroundImage: `url(${formData.backgroundImage})` }"
-                  >
-                    <icon-plus class="upload-icon" />
-                  </div>
-                  <div v-else class="upload-container">
-                    <icon-plus class="upload-icon" />
-                    <div class="upload-text">上传背景</div>
-                  </div>
-                </template>
-              </a-upload>
-              <a-button
-                v-if="formData.backgroundImage"
-                type="text"
-                size="small"
-                status="danger"
-                @click="formData.backgroundImage = ''"
-              >
-                清除
-              </a-button>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item label="备注" field="remarks">
-          <a-textarea
-            v-model="formData.remarks"
-            placeholder="请输入备注信息"
-            :max-length="500"
-            show-word-limit
-            :auto-size="{ minRows: 3, maxRows: 6 }"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
     <!-- 详情弹窗 -->
-    <a-modal
+    <TemplateDetailDialog
       v-model:visible="detailModalVisible"
       :title="detailModalTitle"
-      :width="900"
-      :footer="false"
-    >
-      <div v-if="detailLoading" class="loading-container">
-        <a-spin />
-      </div>
-      <div v-else-if="currentDetail">
-        <a-descriptions :column="2" bordered>
-          <a-descriptions-item label="模板 ID">
-            {{ currentDetail.id }}
-          </a-descriptions-item>
-          <a-descriptions-item label="模板名称">
-            {{ currentDetail.projectName }}
-          </a-descriptions-item>
-          <a-descriptions-item label="发布状态">
-            <a-tag :color="currentDetail.state === 1 ? 'green' : 'orange'">
-              {{ currentDetail.state === 1 ? '已发布' : '未发布' }}
-            </a-tag>
-          </a-descriptions-item>
-          <a-descriptions-item label="创建时间">
-            {{ currentDetail.createTime }}
-          </a-descriptions-item>
-          <a-descriptions-item label="更新时间">
-            {{ currentDetail.updateTime || '-' }}
-          </a-descriptions-item>
-          <a-descriptions-item label="创建用户">
-            {{ currentDetail.createUserId }}
-          </a-descriptions-item>
-          <a-descriptions-item label="封面预览" :span="2">
-            <div
-              v-if="currentDetail.indexImage || currentDetail.backgroundImage"
-              class="detail-cover-preview"
-              :style="currentDetail.backgroundImage ? { backgroundImage: `url(${currentDetail.backgroundImage})` } : {}"
-              @click="handleOpenCoverPreview(currentDetail)"
-            >
-              <img
-                v-if="currentDetail.indexImage"
-                :src="currentDetail.indexImage"
-                class="detail-cover-image"
-              />
-            </div>
-            <div v-else class="detail-cover-preview">
-              <span>暂无封面</span>
-            </div>
-          </a-descriptions-item>
-          <a-descriptions-item label="备注" :span="2">
-            {{ currentDetail.remarks || '暂无备注' }}
-          </a-descriptions-item>
-        </a-descriptions>
-
-        <!-- 项目数据内容 -->
-        <a-divider orientation="left">项目数据</a-divider>
-        <div v-if="projectData" class="project-data-container">
-          <a-card :bordered="false">
-            <pre class="json-content">{{ formatJson(projectData.content) }}</pre>
-          </a-card>
-        </div>
-        <a-empty v-else description="暂无项目数据" />
-      </div>
-      <a-empty v-else description="暂无数据" />
-    </a-modal>
-
-    <!-- 封面预览弹窗 -->
-    <a-modal
-      v-model:visible="coverPreviewVisible"
-      title="封面预览"
-      :width="800"
-      :footer="false"
-    >
-      <div
-        class="cover-preview-large"
-        :style="coverPreviewData.backgroundImage ? { backgroundImage: `url(${coverPreviewData.backgroundImage})` } : {}"
-      >
-        <img
-          v-if="coverPreviewData.indexImage"
-          :src="coverPreviewData.indexImage"
-          class="cover-image-large"
-        />
-      </div>
-    </a-modal>
+      :template-id="detailTemplateId"
+      :channel-options="channelOptions"
+      :suppression-options="suppressionOptions"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { Message } from '@arco-design/web-vue'
-import type { FormInstance } from '@arco-design/web-vue/es/form'
+import dayjs from 'dayjs'
 import SearchTable from '@/components/search-table/index.vue'
 import type { FormItem } from '@/components/search-form/types'
+import TemplateDetailDialog from './components/TemplateDetailDialog.vue'
 import {
-  fetchProjectList,
-  createProject,
-  updateProject,
-  deleteProject,
-  publishProject,
-  fetchProjectData,
-  uploadFile,
-  type GoViewProject,
-  type GoViewProjectData,
-} from '@/api/ops/goview'
+  fetchTemplateList,
+  updateTemplate,
+  deleteTemplate,
+  fetchChannelList,
+  fetchSuppressionList,
+  TEMPLATE_CATEGORIES,
+  type AlertTemplate,
+  type NotificationChannel,
+  type SuppressionRule,
+} from '@/api/ops/alertTemplate'
+
+const router = useRouter()
 
 // 页面标题
 const pageTitle = '告警模板管理'
 
 // 搜索表单模型
 const formModel = ref({
-  state: '',
-  keyword: '',
+  name: '',
+  category: '',
+  enabled: '',
 })
 
 // 表单项配置
 const formItems = computed<FormItem[]>(() => [
   {
-    field: 'state',
+    field: 'name',
+    label: '模板名称',
+    type: 'input',
+    span: 8,
+    placeholder: '请输入模板名称',
+  },
+  {
+    field: 'category',
+    label: '分类',
+    type: 'select',
+    span: 8,
+    placeholder: '请选择',
+    options: [
+      { value: '', label: '全部' },
+      ...TEMPLATE_CATEGORIES,
+    ],
+  },
+  {
+    field: 'enabled',
     label: '状态',
     type: 'select',
     span: 8,
     placeholder: '请选择',
     options: [
       { value: '', label: '全部' },
-      { value: '-1', label: '未发布' },
-      { value: '1', label: '已发布' },
+      { value: 'true', label: '已启用' },
+      { value: 'false', label: '已禁用' },
     ],
   },
 ])
 
 // 状态
 const loading = ref(false)
-const submitting = ref(false)
-const detailLoading = ref(false)
-const tableData = ref<GoViewProject[]>([])
-const selectedRecord = ref<GoViewProject | null>(null)
-const selectedRowKeys = ref<string[]>([])
+const tableData = ref<AlertTemplate[]>([])
 
 // 分页配置
 const pagination = reactive({
@@ -383,45 +166,40 @@ const tableColumns = computed(() => [
   {
     title: 'ID',
     dataIndex: 'id',
-    width: 100,
-    ellipsis: true,
-    tooltip: true,
+    width: 80,
   },
   {
     title: '模板名称',
-    dataIndex: 'projectName',
+    dataIndex: 'name',
     width: 200,
     ellipsis: true,
     tooltip: true,
   },
+  {
+    title: '分类',
+    dataIndex: 'category',
+    width: 180,
+    slotName: 'category',
+  },
+  {
+    title: '规则数量',
+    dataIndex: 'rules',
+    width: 100,
+    slotName: 'rulesCount',
+  },
   {
     title: '状态',
-    dataIndex: 'state',
+    dataIndex: 'enabled',
     width: 100,
-    slotName: 'status',
-  },
-  {
-    title: '封面',
-    dataIndex: 'indexImage',
-    width: 100,
-    slotName: 'indexImage',
+    slotName: 'enabled',
   },
   {
     title: '创建时间',
-    dataIndex: 'createTime',
+    dataIndex: 'created_at',
     width: 180,
-  },
-  {
-    title: '更新时间',
-    dataIndex: 'updateTime',
-    width: 180,
-  },
-  {
-    title: '备注',
-    dataIndex: 'remarks',
-    width: 200,
-    ellipsis: true,
-    tooltip: true,
+    render: ({ record }: any) => {
+      return record.created_at ? dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') : '-'
+    },
   },
   {
     title: '操作',
@@ -432,83 +210,59 @@ const tableColumns = computed(() => [
   },
 ])
 
-// 表单弹窗
-const formModalVisible = ref(false)
-const formModalTitle = ref('新建模板')
-const formRef = ref<FormInstance>()
-const isEdit = ref(false)
-const editIdentity = ref('')
-
-// 图片上传
-const indexImageFileList = ref<any[]>([])
-const backgroundImageFileList = ref<any[]>([])
-
-// 表单数据
-const formData = ref({
-  projectName: '',
-  state: -1 as -1 | 1,
-  indexImage: '',
-  backgroundImage: '',
-  remarks: '',
-})
-
-// 表单验证规则
-const formRules = {
-  projectName: [
-    { required: true, message: '请输入模板名称' },
-    { minLength: 2, message: '模板名称至少2个字符' },
-    { maxLength: 100, message: '模板名称最多100个字符' },
-  ],
-  state: [{ required: true, message: '请选择发布状态' }],
-}
-
 // 详情弹窗
 const detailModalVisible = ref(false)
 const detailModalTitle = ref('模板详情')
-const currentDetail = ref<GoViewProject | null>(null)
-const projectData = ref<GoViewProjectData | null>(null)
+const detailTemplateId = ref<number | null>(null)
 
-// 封面预览弹窗
-const coverPreviewVisible = ref(false)
-const coverPreviewData = ref<{
-  indexImage: string
-  backgroundImage: string
-}>({
-  indexImage: '',
-  backgroundImage: '',
-})
+// 下拉选项
+const channelOptions = ref<NotificationChannel[]>([])
+const suppressionOptions = ref<SuppressionRule[]>([])
 
-// 打开封面预览弹窗
-const handleOpenCoverPreview = (record: GoViewProject) => {
-  coverPreviewData.value = {
-    indexImage: record.indexImage || '',
-    backgroundImage: record.backgroundImage || '',
-  }
-  coverPreviewVisible.value = true
+// 获取分类标签
+const getCategoryLabel = (value: string) => {
+  const item = TEMPLATE_CATEGORIES.find(c => c.value === value)
+  return item?.label || value
 }
+
+// 获取规则数量（解析 JSON 字符串）
+const getRulesCount = (rules: any) => {
+  if (!rules) return 0
+  if (typeof rules === 'string') {
+    try {
+      const parsed = JSON.parse(rules)
+      return Array.isArray(parsed) ? parsed.length : 0
+    } catch {
+      return 0
+    }
+  }
+  return Array.isArray(rules) ? rules.length : 0
+}
+
 // 获取列表数据
 const fetchList = async () => {
   loading.value = true
   try {
     const params: any = {
       page: pagination.current,
-      size: pagination.pageSize,
+      page_size: pagination.pageSize,
     }
 
-    if (formModel.value.state) {
-      params.state = Number(formModel.value.state)
+    if (formModel.value.name) {
+      params.name = formModel.value.name
+    }
+    if (formModel.value.category) {
+      params.category = formModel.value.category
+    }
+    if (formModel.value.enabled) {
+      params.enabled = formModel.value.enabled === 'true'
     }
 
-    // 如果有关键字搜索，可以添加 keyword 参数（API 文档未明确支持，这里预留）
-    // if (formModel.value.keyword) {
-    //   params.keyword = formModel.value.keyword
-    // }
-
-    const res: any = await fetchProjectList(params)
+    const res: any = await fetchTemplateList(params)
 
     if (res.code === 0) {
-      tableData.value = res.details.list || []
-      pagination.total = res.details.total || 0
+      tableData.value = res.details?.data || res.details?.list || []
+      pagination.total = res.details?.total || 0
     } else {
       Message.error(res.msg || '获取模板列表失败')
     }
@@ -520,6 +274,25 @@ const fetchList = async () => {
   }
 }
 
+// 加载下拉选项
+const loadOptions = async () => {
+  try {
+    // 加载通知渠道
+    const channelRes: any = await fetchChannelList({ enabled: true })
+    if (channelRes.code === 0) {
+      channelOptions.value = channelRes.details?.data || channelRes.details?.list || []
+    }
+
+    // 加载抑制规则
+    const suppressionRes: any = await fetchSuppressionList({ enabled: true })
+    if (suppressionRes.code === 0) {
+      suppressionOptions.value = suppressionRes.details?.data || suppressionRes.details?.list || []
+    }
+  } catch (error) {
+    console.error('加载选项失败:', error)
+  }
+}
+
 // 处理表单模型更新
 const handleFormModelUpdate = (value: any) => {
   formModel.value = value
@@ -534,8 +307,9 @@ const handleSearch = () => {
 // 重置
 const handleReset = () => {
   formModel.value = {
-    state: '',
-    keyword: '',
+    name: '',
+    category: '',
+    enabled: '',
   }
   pagination.current = 1
   fetchList()
@@ -558,186 +332,51 @@ const handlePageSizeChange = (pageSize: number) => {
   fetchList()
 }
 
-// 打开新建弹窗
-const handleOpenCreateModal = () => {
-  isEdit.value = false
-  formModalTitle.value = '新建模板'
-  formData.value = {
-    projectName: '',
-    state: -1,
-    indexImage: '',
-    backgroundImage: '',
-    remarks: '',
-  }
-  indexImageFileList.value = []
-  backgroundImageFileList.value = []
-  formModalVisible.value = true
+// 新建模板
+const handleCreate = () => {
+  router.push('/alert/template/edit')
 }
 
-// 打开编辑弹窗
-const handleEdit = (record: GoViewProject) => {
-  isEdit.value = true
-  editIdentity.value = record.id
-  formModalTitle.value = '编辑模板'
-  formData.value = {
-    projectName: record.projectName,
-    state: record.state,
-    indexImage: record.indexImage || '',
-    backgroundImage: record.backgroundImage || '',
-    remarks: record.remarks || '',
-  }
-  indexImageFileList.value = []
-  backgroundImageFileList.value = []
-  formModalVisible.value = true
-}
-
-// 处理封面图片上传
-const handleIndexImageChange = async (fileList: any[]) => {
-  if (fileList.length === 0) return
-  const file = fileList[0].file
-  try {
-    const res = await uploadFile(file)
-    if (res.code === 200 && res.data) {
-      formData.value.indexImage = res.data.relativePath
-      Message.success('封面图片上传成功')
-    } else {
-      Message.error(res.msg || '上传失败')
-    }
-  } catch (error: any) {
-    console.error('上传封面图片失败:', error)
-    Message.error(error.message || '上传失败')
-  }
-}
-
-// 处理背景图片上传
-const handleBackgroundImageChange = async (fileList: any[]) => {
-  if (fileList.length === 0) return
-  const file = fileList[0].file
-  try {
-    const res = await uploadFile(file)
-    if (res.code === 200 && res.data) {
-      formData.value.backgroundImage = res.data.relativePath
-      Message.success('背景图片上传成功')
-    } else {
-      Message.error(res.msg || '上传失败')
-    }
-  } catch (error: any) {
-    console.error('上传背景图片失败:', error)
-    Message.error(error.message || '上传失败')
-  }
-}
-
-// 提交表单
-const handleSubmit = async () => {
-  const valid = await formRef.value?.validate()
-  if (valid) {
-    return
-  }
-
-  submitting.value = true
-  try {
-    if (isEdit.value) {
-      // 编辑
-      const res = await updateProject({
-        identity: editIdentity.value,
-        projectName: formData.value.projectName,
-        indexImage: formData.value.indexImage,
-        backgroundImage: formData.value.backgroundImage,
-        remarks: formData.value.remarks,
-      })
-
-      if (res.code === 200) {
-        Message.success('模板更新成功')
-        formModalVisible.value = false
-        fetchList()
-      } else {
-        Message.error(res.msg || '更新失败')
-      }
-    } else {
-      // 新建
-      const res = await createProject({
-        projectName: formData.value.projectName,
-        state: formData.value.state,
-        indexImage: formData.value.indexImage,
-        backgroundImage: formData.value.backgroundImage,
-        remarks: formData.value.remarks,
-      })
-
-      if (res.code === 200) {
-        Message.success('模板创建成功')
-        formModalVisible.value = false
-        fetchList()
-      } else {
-        Message.error(res.msg || '创建失败')
-      }
-    }
-  } catch (error: any) {
-    console.error('提交失败:', error)
-    Message.error(error.message || '操作失败')
-  } finally {
-    submitting.value = false
-  }
-}
-
-// 关闭表单弹窗
-const handleCloseFormModal = () => {
-  formModalVisible.value = false
-  formRef.value?.resetFields()
+// 编辑模板
+const handleEdit = (record: AlertTemplate) => {
+  router.push({
+    path: '/alert/template/edit',
+    query: { id: record.id },
+  })
 }
 
 // 查看详情
-const handleViewDetail = async (record: GoViewProject) => {
-  currentDetail.value = record
-  detailModalTitle.value = `模板详情 - ${record.projectName}`
+const handleViewDetail = (record: AlertTemplate) => {
+  detailModalTitle.value = `模板详情 - ${record.name}`
+  detailTemplateId.value = record.id || null
   detailModalVisible.value = true
-  detailLoading.value = true
-  projectData.value = null
-
-  try {
-    const res = await fetchProjectData(record.id)
-    if (res.code === 200) {
-      projectData.value = res.data
-    } else if (res.msg === 'project not found') {
-      projectData.value = null
-    } else {
-      Message.error(res.msg || '获取项目数据失败')
-    }
-  } catch (error: any) {
-    console.error('获取项目数据失败:', error)
-    Message.error(error.message || '获取项目数据失败')
-  } finally {
-    detailLoading.value = false
-  }
 }
 
-// 切换发布状态
-const handleTogglePublish = async (record: GoViewProject) => {
-  const newState = record.state === 1 ? -1 : 1
-  const actionText = newState === 1 ? '发布' : '取消发布'
-
+// 切换启用状态
+const handleToggleEnabled = async (record: AlertTemplate) => {
   try {
-    const res = await publishProject({
-      identity: record.id,
-      state: newState,
-    })
+    const res: any = await updateTemplate({
+      id: record.id,
+      enabled: !record.enabled,
+    } as AlertTemplate)
 
-    if (res.code === 200) {
-      Message.success(`${actionText}成功`)
+    if (res.code === 0) {
+      Message.success(record.enabled ? '禁用成功' : '启用成功')
       fetchList()
     } else {
-      Message.error(res.msg || `${actionText}失败`)
+      Message.error(res.msg || '操作失败')
     }
   } catch (error: any) {
-    console.error(`${actionText}失败:`, error)
-    Message.error(error.message || `${actionText}失败`)
+    console.error('操作失败:', error)
+    Message.error(error.message || '操作失败')
   }
 }
 
 // 删除模板
-const handleDelete = async (record: GoViewProject) => {
+const handleDelete = async (record: AlertTemplate) => {
   try {
-    const res = await deleteProject(record.id)
-    if (res.code === 200) {
+    const res: any = await deleteTemplate(record.id!)
+    if (res.code === 0) {
       Message.success('删除成功')
       fetchList()
     } else {
@@ -749,41 +388,11 @@ const handleDelete = async (record: GoViewProject) => {
   }
 }
 
-// 批量删除
-const handleBatchDelete = async () => {
-  if (selectedRowKeys.value.length === 0) {
-    Message.warning('请选择要删除的模板')
-    return
-  }
-
-  try {
-    const res = await deleteProject(selectedRowKeys.value.join(','))
-    if (res.code === 200) {
-      Message.success('批量删除成功')
-      selectedRowKeys.value = []
-      fetchList()
-    } else {
-      Message.error(res.msg || '批量删除失败')
-    }
-  } catch (error: any) {
-    console.error('批量删除失败:', error)
-    Message.error(error.message || '批量删除失败')
-  }
-}
-
-// 格式化 JSON
-const formatJson = (content: string) => {
-  if (!content) return ''
-  try {
-    const parsed = JSON.parse(content)
-    return JSON.stringify(parsed, null, 2)
-  } catch {
-    return content
-  }
-}
-
-// 初始化加载
-fetchList()
+// 初始化
+onMounted(() => {
+  loadOptions()
+  fetchList()
+})
 </script>
 
 <script lang="ts">
@@ -796,162 +405,4 @@ export default {
 .container {
   padding-top: 20px;
 }
-
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-}
-
-.text-gray {
-  color: var(--color-text-3);
-}
-
-.upload-container {
-  width: 100px;
-  height: 80px;
-  border: 1px dashed var(--color-border);
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: border-color 0.2s;
-
-  &:hover {
-    border-color: rgb(var(--primary-6));
-  }
-
-  .upload-icon {
-    font-size: 20px;
-    color: var(--color-text-3);
-  }
-
-  .upload-text {
-    font-size: 12px;
-    color: var(--color-text-3);
-    margin-top: 4px;
-  }
-}
-
-.preview-container {
-  width: 100px;
-  height: 80px;
-  border-radius: 4px;
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-
-  .upload-icon {
-    font-size: 20px;
-    color: rgba(255, 255, 255, 0.8);
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  &:hover .upload-icon {
-    opacity: 1;
-  }
-}
-
-.project-data-container {
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.json-content {
-  background: var(--color-fill-2);
-  padding: 16px;
-  border-radius: 4px;
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-// 封面预览：背景图 + 封面图叠加（封面图宽高100%）
-.cover-preview {
-  width: 80px;
-  height: 50px;
-  border-radius: 4px;
-  background-color: var(--color-fill-2);
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-
-  .cover-image {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-}
-
-// 详情弹窗封面预览：背景图 + 封面图叠加（封面图宽高100%）
-.detail-cover-preview {
-  width: 240px;
-  height: 150px;
-  border-radius: 8px;
-  background-color: var(--color-fill-2);
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  cursor: pointer;
-
-  .detail-cover-image {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-}
-
-// 封面预览弹窗：背景图 + 封面图叠加（放大展示）
-.cover-preview-large {
-  width: 100%;
-  height: 450px;
-  border-radius: 8px;
-  background-color: var(--color-fill-2);
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-
-  .cover-image-large {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-}
 </style>
\ No newline at end of file