feat(admin): 订单管理重构、设置管理增强、短信签名模板管理及通知渠道优化

- 订单列表重构为卡片式布局并新增筛选功能

- 设置管理支持struct/struct_list类型配置

- 新增短信签名和模板独立管理页面

- 通知渠道新增短信渠道配置

- 产品参数管理优化

Co-authored-by: Cursor <cursoragent@cursor.com>

src/api/admin/noticeChannel.js

@@ -39,3 +39,10 @@ export const updateNoticeTemplate = (data) => {
 export const deleteNoticeTemplate = (params) => {
   return http2.delete('/api/v1/admin/notice_message/template/delete', { params })
 }
+
+/** 使用默认参数预览渲染模板 */
+export const previewNoticeTemplate = (data) => {
+  return http2.post('/api/v1/admin/notice_message/template/default_msg', data, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}

src/api/admin/smsService.js

@@ -1,5 +1,7 @@
 import { http2 } from '@/utils/request.js'
 
+const formHeaders = { headers: { 'Content-Type': 'multipart/form-data' } }
+
 // ========== 短信主控服务 ==========
 
 export const getSmsServiceList = (params) => {
@@ -25,6 +27,12 @@ export const deleteSmsService = (data) => {
   })
 }
 
+export const setDefaultSmsService = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/set_default', data, {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}
+
 // ========== 短信额度商品 ==========
 
 export const getSmsGoodsList = (params) => {
@@ -49,3 +57,89 @@ export const deleteSmsGoods = (data) => {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
   })
 }
+
+// ========== 短信签名管理 ==========
+
+export const getSmsSignatureList = (params) => {
+  return http2.get('/api/v1/admin/server/sms_service/signature/list', { params })
+}
+
+export const getSmsSignatureDetail = (params) => {
+  return http2.get('/api/v1/admin/server/sms_service/signature/detail', { params })
+}
+
+export const createSmsSignature = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/signature/create', data, formHeaders)
+}
+
+export const updateSmsSignature = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/signature/update', data, formHeaders)
+}
+
+export const deleteSmsSignature = (data) => {
+  return http2.delete('/api/v1/admin/server/sms_service/signature/delete', { data, ...formHeaders })
+}
+
+export const submitSmsSignature = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/signature/submit', data, formHeaders)
+}
+
+export const approveSmsSignature = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/signature/approve', data, formHeaders)
+}
+
+export const rejectSmsSignature = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/signature/reject', data, formHeaders)
+}
+
+// ========== 短信模板管理 ==========
+
+export const getSmsTemplateList = (params) => {
+  return http2.get('/api/v1/admin/server/sms_service/template/list', { params })
+}
+
+export const getSmsTemplateDetail = (params) => {
+  return http2.get('/api/v1/admin/server/sms_service/template/detail', { params })
+}
+
+export const createSmsTemplate = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/template/create', data, formHeaders)
+}
+
+export const updateSmsTemplate = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/template/update', data, formHeaders)
+}
+
+export const deleteSmsTemplate = (data) => {
+  return http2.delete('/api/v1/admin/server/sms_service/template/delete', { data, ...formHeaders })
+}
+
+export const submitSmsTemplate = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/template/submit', data, formHeaders)
+}
+
+export const approveSmsTemplate = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/template/approve', data, formHeaders)
+}
+
+export const rejectSmsTemplate = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/template/reject', data, formHeaders)
+}
+
+// ========== 推荐模板管理 ==========
+
+export const getSmsRecommendedTemplateList = (params) => {
+  return http2.get('/api/v1/admin/server/sms_service/template/recommended/list', { params })
+}
+
+export const createSmsRecommendedTemplate = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/template/recommended/create', data, formHeaders)
+}
+
+export const updateSmsRecommendedTemplate = (data) => {
+  return http2.post('/api/v1/admin/server/sms_service/template/recommended/update', data, formHeaders)
+}
+
+export const deleteSmsRecommendedTemplate = (data) => {
+  return http2.delete('/api/v1/admin/server/sms_service/template/recommended/delete', { data, ...formHeaders })
+}

src/config/menus.js

@@ -161,6 +161,14 @@ export const menus = [
       {
         path: '/sms/goods',
         title: '额度商品管理'
+      },
+      {
+        path: '/sms/signature',
+        title: '签名管理'
+      },
+      {
+        path: '/sms/template',
+        title: '模板管理'
       }
     ]
   },

src/router/index.js

@@ -630,6 +630,18 @@ const routes = [
             name: 'SmsGoods',
             component: () => import('../views/sms/SmsGoods.vue'),
             meta: { title: '额度商品管理' }
+          },
+          {
+            path: 'signature',
+            name: 'SmsSignature',
+            component: () => import('../views/sms/SmsSignature.vue'),
+            meta: { title: '签名管理' }
+          },
+          {
+            path: 'template',
+            name: 'SmsTemplateMgr',
+            component: () => import('../views/sms/SmsTemplate.vue'),
+            meta: { title: '模板管理' }
           }
         ]
       },

src/views/marketing/UserVoucher.vue

@@ -359,7 +359,7 @@ const editForm = reactive({
 
 const editRules = {
   discount_id: [
-    { required: true, message: '请输入代金券ID', trigger: 'blur' }
+    { required: false, message: '请输入代金券ID', trigger: 'blur' }
   ],
   use_times: [
     { required: true, message: '请输入已使用次数', trigger: 'blur' }

src/views/product/ProductList.vue

@@ -488,11 +488,11 @@
             <div class="tk-section-title">数值范围配置</div>
             <el-form-item label="范围类型" prop="range_type">
               <el-select v-model="paramValueForm.range_type" placeholder="请选择范围类型" style="width: 100%">
-                <el-option label="小于 (before)" value="before" />
+                <el-option label="小于等于 (before)" value="before" />
-                <el-option label="大于 (after)" value="after" />
+                <el-option label="大于等于 (after)" value="after" />
                 <el-option label="等于 (equal)" value="equal" />
               </el-select>
-              <div class="form-tip">before: 数值 &lt; phase 时匹配 | after: 数值 &gt; phase 时匹配</div>
+              <div class="form-tip">before: 数值 ≤ phase 时匹配 | after: 数值 ≥ phase 时匹配</div>
             </el-form-item>
             <el-form-item label="阈值" prop="attr_range">
               <el-input-number v-model="paramValueForm.attr_range" :min="0" placeholder="范围阈值" style="width: 100%" />
@@ -1532,7 +1532,7 @@ const getArgTypeTag = (type) => {
 
 // 范围类型显示
 const getRangeTypeText = (type) => {
-  const typeMap = { 'after': '大于 ＞', 'before': '小于 ＜', 'equal': '等于 ＝' }
+  const typeMap = { 'after': '大于等于 ≥', 'before': '小于等于 ≤', 'equal': '等于 ＝' }
   return typeMap[type] || type || '-'
 }
 
@@ -1960,9 +1960,9 @@ const findMatchingNumberAttr = (spec, numValue) => {
     const phase = attr.phase || 0
     const rangeType = attr.rangeType || 'before'
     
-    if (rangeType === 'before' && numValue < phase) {
+    if (rangeType === 'before' && numValue <= phase) {
       return attr
-    } else if (rangeType === 'after' && numValue > phase) {
+    } else if (rangeType === 'after' && numValue >= phase) {
       return attr
     } else if (rangeType === 'equal' && numValue === phase) {
       return attr

src/views/product/components/ProductParameterManager.vue

@@ -275,13 +275,13 @@
         <el-form-item v-if="currentParam?.type === 'number'" label="数值范围" prop="attr_range">
           <div class="range-config-row">
             <el-select v-model="paramValueForm.range_type" class="range-type-select">
-              <el-option label="＜" value="before">
+              <el-option label="≤" value="before">
-                <span class="range-opt-symbol">＜</span>
+                <span class="range-opt-symbol">≤</span>
-                <span class="range-opt-desc">小于</span>
+                <span class="range-opt-desc">小于等于</span>
               </el-option>
-              <el-option label="＞" value="after">
+              <el-option label="≥" value="after">
-                <span class="range-opt-symbol">＞</span>
+                <span class="range-opt-symbol">≥</span>
-                <span class="range-opt-desc">大于</span>
+                <span class="range-opt-desc">大于等于</span>
               </el-option>
               <el-option label="＝" value="equal">
                 <span class="range-opt-symbol">＝</span>
@@ -635,7 +635,7 @@ const getArgTypeTag = (type) => {
   return tagMap[type] || 'info'
 }
 const getRangeTypeText = (type) => {
-  const typeMap = { 'after': '＞', 'before': '＜', 'equal': '＝' }
+  const typeMap = { 'after': '≥', 'before': '≤', 'equal': '＝' }
   return typeMap[type] || type || '-'
 }
 

src/views/product/components/ProductPlanManager.vue

@@ -548,8 +548,8 @@ const findMatchingNumberAttr = (spec, numValue) => {
   for (const attr of sortedAttrs) {
     const phase = attr.phase || 0
     const rangeType = attr.rangeType || 'before'
-    if (rangeType === 'before' && numValue < phase) return attr
+    if (rangeType === 'before' && numValue <= phase) return attr
-    else if (rangeType === 'after' && numValue > phase) return attr
+    else if (rangeType === 'after' && numValue >= phase) return attr
     else if (rangeType === 'equal' && numValue === phase) return attr
   }
   return sortedAttrs[sortedAttrs.length - 1]

src/views/sms/SmsService.vue

@@ -46,6 +46,7 @@
               <path d="M8 21h8M12 17v4"/>
             </svg>
             <span class="name-text">{{ row.name }}</span>
+            <el-tag v-if="row.default" type="success" size="small" effect="dark" style="margin-left: 6px">默认</el-tag>
           </div>
         </template>
       </el-table-column>
@@ -73,13 +74,15 @@
       <el-table-column prop="CreatedAt" label="创建时间" width="170" align="center">
         <template #default="{ row }">{{ formatTime(row.CreatedAt) }}</template>
       </el-table-column>
-      <el-table-column label="操作" width="200" align="center" fixed="right">
+      <el-table-column label="操作" width="320" align="center" fixed="right">
         <template #default="{ row }">
+          <el-button link type="success" size="small" @click="openConsole(row)">控制台</el-button>
+          <el-button v-if="!row.default" link type="warning" size="small" @click="handleSetDefault(row)">设为默认</el-button>
           <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
           <el-button link type="primary" size="small" @click="goToGoods(row)">额度商品</el-button>
-          <el-popconfirm title="确认删除该服务？" @confirm="handleDelete(row)">
+          <el-popconfirm :title="row.default ? '该服务为默认服务，删除前请先设置其他服务为默认' : '确认删除该服务？'" :disabled="row.default" @confirm="handleDelete(row)">
             <template #reference>
-              <el-button link type="danger" size="small">删除</el-button>
+              <el-button link type="danger" size="small" :disabled="row.default">删除</el-button>
             </template>
           </el-popconfirm>
         </template>
@@ -137,7 +140,8 @@ import {
   getSmsServiceList,
   createSmsService,
   updateSmsService,
-  deleteSmsService
+  deleteSmsService,
+  setDefaultSmsService
 } from '@/api/admin/smsService.js'
 
 const router = useRouter()
@@ -270,6 +274,28 @@ const handleDelete = async (row) => {
   }
 }
 
+const handleSetDefault = async (row) => {
+  try {
+    const params = new URLSearchParams()
+    params.append('id', row.id)
+    const res = await setDefaultSmsService(params)
+    if (res.data.code === 200) {
+      ElMessage.success(`已将「${row.name}」设为默认短信服务`)
+      fetchList()
+    } else {
+      ElMessage.error(res.data.message || '设置失败')
+    }
+  } catch (e) {
+    ElMessage.error('设置默认服务失败')
+  }
+}
+
+const openConsole = (row) => {
+  const base = (row.host || '').replace(/\/+$/, '')
+  if (!base) return ElMessage.warning('该服务未配置地址')
+  window.open(`${base}/login?serverToken=${encodeURIComponent(row.serviceToken || '')}`, '_blank')
+}
+
 const goToGoods = (row) => {
   router.push({ path: '/sms/goods', query: { service_id: row.id, service_name: row.name } })
 }

src/views/sms/SmsSignature.vue

@@ -0,0 +1,549 @@
+<template>
+  <div class="sms-signature-page">
+    <div class="page-header">
+      <div class="header-info">
+        <div class="header-icon">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#67c23a" stroke-width="1.8">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+            <path d="M9 15l2 2 4-4"/>
+          </svg>
+        </div>
+        <div>
+          <h2 class="header-title">短信签名管理</h2>
+          <p class="header-desc">管理用户提交的短信签名，审核通过后方可使用</p>
+        </div>
+      </div>
+      <div class="header-actions">
+        <el-button type="primary" @click="handleAdd">
+          <el-icon><Plus /></el-icon> 新增签名
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 筛选栏 -->
+    <div class="filter-bar">
+      <el-select v-model="queryParams.service_id" placeholder="选择主控服务" style="width: 200px" @change="handleSearch">
+        <el-option v-for="s in serviceOptions" :key="s.id" :label="s.name" :value="s.id" />
+      </el-select>
+      <el-select v-model="queryParams.status" placeholder="全部状态" clearable style="width: 140px" @change="handleSearch">
+        <el-option label="草稿" :value="0" />
+        <el-option label="审核中" :value="1" />
+        <el-option label="已通过" :value="2" />
+        <el-option label="已驳回" :value="3" />
+      </el-select>
+      <el-input
+        v-if="filterUserInfo"
+        :model-value="`${filterUserInfo.user_name} (ID: ${queryParams.user_id})`"
+        readonly
+        style="width: 200px"
+      >
+        <template #suffix>
+          <el-icon class="clear-icon" @click="clearFilterUser"><Close /></el-icon>
+        </template>
+        <template #prefix><el-icon><User /></el-icon></template>
+      </el-input>
+      <el-input v-else placeholder="筛选用户" readonly style="width: 140px" @click="filterUserSelectorVisible = true">
+        <template #prefix><el-icon><User /></el-icon></template>
+      </el-input>
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </div>
+
+    <!-- 卡片列表 -->
+    <div v-loading="loading" class="signature-cards">
+      <div v-if="!tableData.length && !loading" class="empty-state">
+        <el-empty description="暂无签名数据" :image-size="80" />
+      </div>
+      <div v-for="item in tableData" :key="item.ID" class="sig-card" :class="`status-${item.status}`">
+        <div class="sig-card-header">
+          <div class="sig-card-title">
+            <span class="sig-title-text">{{ item.title }}</span>
+            <el-tag :type="statusTagType(item.status)" size="small" effect="dark">{{ statusText(item.status) }}</el-tag>
+          </div>
+          <span class="sig-card-id">#{{ item.ID }}</span>
+        </div>
+
+        <div class="sig-card-body">
+          <div class="sig-card-info">
+            <div class="sig-info-row">
+              <span class="sig-label">申请人</span>
+              <span class="sig-value">{{ item.applicant_name || '-' }}</span>
+            </div>
+            <div class="sig-info-row">
+              <span class="sig-label">用户</span>
+              <el-link type="primary" :underline="false" @click="$router.push({ path: '/user/detail', query: { user_id: item.user_id } })">ID: {{ item.user_id }}</el-link>
+            </div>
+            <div class="sig-info-row">
+              <span class="sig-label">公司</span>
+              <span class="sig-value">{{ item.applicant_company || '-' }}</span>
+            </div>
+            <div class="sig-info-row">
+              <span class="sig-label">身份证</span>
+              <span class="sig-value sig-id-card">{{ item.applicant_id_card || '-' }}</span>
+            </div>
+            <div class="sig-info-row">
+              <span class="sig-label">创建时间</span>
+              <span class="sig-value">{{ formatDate(item.CreatedAt) }}</span>
+            </div>
+            <div v-if="item.reject_reason" class="sig-info-row reject-row">
+              <span class="sig-label">驳回原因</span>
+              <span class="sig-value reject-text">{{ item.reject_reason }}</span>
+            </div>
+          </div>
+          <div class="sig-card-license">
+            <el-image
+              v-if="item.license_url"
+              :src="item.license_url"
+              :preview-src-list="[item.license_url]"
+              fit="cover"
+              class="license-img"
+              preview-teleported
+            />
+            <div v-else class="license-placeholder">
+              <el-icon :size="24"><Picture /></el-icon>
+              <span>无资质证明</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="sig-card-footer">
+          <el-button type="primary" size="small" @click="handleEdit(item)">编辑</el-button>
+          <el-button v-if="item.status === 0" type="warning" size="small" @click="handleSubmit(item)">提交审核</el-button>
+          <el-button v-if="item.status === 1" type="success" size="small" @click="handleApprove(item)">通过</el-button>
+          <el-button v-if="item.status === 1" type="danger" size="small" plain @click="handleReject(item)">驳回</el-button>
+          <el-button type="danger" size="small" plain @click="handleDelete(item)">删除</el-button>
+        </div>
+      </div>
+    </div>
+
+    <el-pagination
+      v-model:current-page="queryParams.page"
+      v-model:page-size="queryParams.count"
+      :page-sizes="[10, 20, 50]"
+      layout="total, sizes, prev, pager, next"
+      :total="total"
+      @size-change="fetchList"
+      @current-change="fetchList"
+      background
+      class="pagination"
+    />
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增签名' : '编辑签名'" width="560px" append-to-body destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="110px">
+        <el-form-item label="主控服务" prop="service_id">
+          <el-select v-model="form.service_id" placeholder="选择服务" style="width: 100%" :disabled="dialogType === 'edit'">
+            <el-option v-for="s in serviceOptions" :key="s.id" :label="s.name" :value="s.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用户" prop="user_id">
+          <el-input
+            v-if="selectedUserInfo"
+            :model-value="`${selectedUserInfo.user_name} (ID: ${form.user_id})`"
+            readonly
+          >
+            <template #suffix>
+              <el-icon v-if="dialogType === 'add'" class="clear-icon" @click="clearUser"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="userSelectorVisible = true" :disabled="dialogType === 'edit'"><el-icon><User /></el-icon></el-button>
+            </template>
+          </el-input>
+          <el-input v-else placeholder="请选择用户" readonly @click="openUserSelector">
+            <template #append>
+              <el-button @click="openUserSelector" :disabled="dialogType === 'edit'"><el-icon><User /></el-icon></el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="签名标题" prop="title">
+          <el-input v-model="form.title" placeholder="如：某某公司" maxlength="30" show-word-limit />
+        </el-form-item>
+        <el-form-item label="申请人姓名">
+          <el-input v-model="form.applicant_name" placeholder="申请人真实姓名" />
+        </el-form-item>
+        <el-form-item label="身份证号">
+          <el-input v-model="form.applicant_id_card" placeholder="申请人身份证号" />
+        </el-form-item>
+        <el-form-item label="公司名称">
+          <el-input v-model="form.applicant_company" placeholder="申请人公司（可选）" />
+        </el-form-item>
+        <el-form-item label="营业执照URL">
+          <el-input v-model="form.license_url" placeholder="营业执照图片地址（可选）" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="handleFormSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 驳回原因对话框 -->
+    <el-dialog v-model="rejectDialogVisible" title="驳回签名" width="420px" append-to-body>
+      <el-form label-width="80px">
+        <el-form-item label="驳回原因">
+          <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="请输入驳回原因" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="rejectDialogVisible = false">取消</el-button>
+        <el-button type="danger" :loading="submitting" @click="confirmReject">确认驳回</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 表单用户选择器 -->
+    <UserListSelector
+      v-model="userSelectorVisible"
+      :current-user-id="form.user_id"
+      @confirm="handleUserSelect"
+    />
+    <!-- 筛选用户选择器 -->
+    <UserListSelector
+      v-model="filterUserSelectorVisible"
+      :current-user-id="queryParams.user_id ? Number(queryParams.user_id) : undefined"
+      @confirm="handleFilterUserSelect"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, User, Close, Picture } from '@element-plus/icons-vue'
+import { formatDate } from '@/utils/tool'
+import {
+  getSmsServiceList,
+  getSmsSignatureList, createSmsSignature, updateSmsSignature, deleteSmsSignature,
+  submitSmsSignature, approveSmsSignature, rejectSmsSignature
+} from '@/api/admin/smsService'
+import UserListSelector from '@/components/admin/UserListSelector.vue'
+
+const loading = ref(false)
+const submitting = ref(false)
+const tableData = ref([])
+const total = ref(0)
+const serviceOptions = ref([])
+
+const queryParams = reactive({ service_id: null, page: 1, count: 10, user_id: '', status: null })
+
+const dialogVisible = ref(false)
+const dialogType = ref('add')
+const formRef = ref(null)
+const form = reactive({ service_id: null, user_id: null, title: '', applicant_name: '', applicant_id_card: '', applicant_company: '', license_url: '' })
+const formRules = {
+  service_id: [{ required: true, message: '请选择服务', trigger: 'change' }],
+  user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
+  title: [{ required: true, message: '请输入签名标题', trigger: 'blur' }]
+}
+
+const rejectDialogVisible = ref(false)
+const rejectReason = ref('')
+const currentRow = ref(null)
+
+const userSelectorVisible = ref(false)
+const selectedUserInfo = ref(null)
+const filterUserSelectorVisible = ref(false)
+const filterUserInfo = ref(null)
+
+const statusText = (s) => ({ 0: '草稿', 1: '审核中', 2: '已通过', 3: '已驳回' }[s] || '未知')
+const statusTagType = (s) => ({ 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }[s] || 'info')
+
+const loadServices = async () => {
+  try {
+    const res = await getSmsServiceList({ page: 1, count: 199 })
+    const body = res.data
+    if (body.code === 200) {
+      const list = body.data?.data || body.data || []
+      serviceOptions.value = Array.isArray(list) ? list : []
+      if (serviceOptions.value.length && !queryParams.service_id) {
+        queryParams.service_id = serviceOptions.value[0].id
+      }
+    }
+  } catch (e) { console.error(e) }
+}
+
+const fetchList = async () => {
+  if (!queryParams.service_id) return
+  loading.value = true
+  try {
+    const params = { service_id: queryParams.service_id, page: queryParams.page, count: queryParams.count }
+    if (queryParams.user_id) params.user_id = Number(queryParams.user_id)
+    if (queryParams.status !== null && queryParams.status !== '') params.status = queryParams.status
+    const res = await getSmsSignatureList(params)
+    if (res.data.code === 200) {
+      const d = res.data.data
+      tableData.value = d?.data || d || []
+      total.value = d?.all_count || 0
+    }
+  } catch (e) { ElMessage.error('获取签名列表失败') }
+  finally { loading.value = false }
+}
+
+const handleFilterUserSelect = (user) => {
+  queryParams.user_id = String(user.user_id)
+  filterUserInfo.value = user
+  handleSearch()
+}
+const clearFilterUser = () => {
+  queryParams.user_id = ''
+  filterUserInfo.value = null
+  handleSearch()
+}
+
+const handleSearch = () => { queryParams.page = 1; fetchList() }
+const handleReset = () => { queryParams.user_id = ''; queryParams.status = null; filterUserInfo.value = null; queryParams.page = 1; fetchList() }
+
+const openUserSelector = () => {
+  if (dialogType.value === 'edit') return
+  userSelectorVisible.value = true
+}
+
+const handleUserSelect = (user) => {
+  form.user_id = user.user_id
+  selectedUserInfo.value = user
+}
+
+const clearUser = () => {
+  form.user_id = null
+  selectedUserInfo.value = null
+}
+
+const handleAdd = () => {
+  dialogType.value = 'add'
+  selectedUserInfo.value = null
+  Object.assign(form, { service_id: queryParams.service_id, user_id: null, title: '', applicant_name: '', applicant_id_card: '', applicant_company: '', license_url: '' })
+  dialogVisible.value = true
+}
+
+const handleEdit = (row) => {
+  dialogType.value = 'edit'
+  selectedUserInfo.value = { user_id: row.user_id, user_name: `用户${row.user_id}` }
+  Object.assign(form, {
+    service_id: queryParams.service_id,
+    signature_id: row.ID,
+    user_id: row.user_id,
+    title: row.title,
+    applicant_name: row.applicant_name || '',
+    applicant_id_card: row.applicant_id_card || '',
+    applicant_company: row.applicant_company || '',
+    license_url: row.license_url || ''
+  })
+  dialogVisible.value = true
+}
+
+const handleFormSubmit = () => {
+  formRef.value?.validate(async (valid) => {
+    if (!valid) return
+    submitting.value = true
+    try {
+      const data = { ...form }
+      let res
+      if (dialogType.value === 'add') {
+        res = await createSmsSignature(data)
+      } else {
+        res = await updateSmsSignature(data)
+      }
+      if (res.data.code === 200) {
+        ElMessage.success(dialogType.value === 'add' ? '创建成功' : '修改成功')
+        dialogVisible.value = false
+        fetchList()
+      } else { ElMessage.error(res.data.message || '操作失败') }
+    } catch (e) { ElMessage.error('操作失败') }
+    finally { submitting.value = false }
+  })
+}
+
+const handleSubmit = (row) => {
+  ElMessageBox.confirm(`确认提交签名「${row.title}」进行审核？`, '提交审核', { type: 'info' }).then(async () => {
+    try {
+      const res = await submitSmsSignature({ service_id: queryParams.service_id, signature_id: row.ID })
+      if (res.data.code === 200) { ElMessage.success('已提交审核'); fetchList() }
+      else { ElMessage.error(res.data.message || '提交失败') }
+    } catch { ElMessage.error('提交失败') }
+  }).catch(() => {})
+}
+
+const handleApprove = (row) => {
+  ElMessageBox.confirm(`确认通过签名「${row.title}」？`, '审核通过', { type: 'success' }).then(async () => {
+    try {
+      const res = await approveSmsSignature({ service_id: queryParams.service_id, signature_id: row.ID })
+      if (res.data.code === 200) { ElMessage.success('已通过'); fetchList() }
+      else { ElMessage.error(res.data.message || '操作失败') }
+    } catch { ElMessage.error('操作失败') }
+  }).catch(() => {})
+}
+
+const handleReject = (row) => {
+  currentRow.value = row
+  rejectReason.value = ''
+  rejectDialogVisible.value = true
+}
+
+const confirmReject = async () => {
+  if (!rejectReason.value.trim()) { ElMessage.warning('请输入驳回原因'); return }
+  submitting.value = true
+  try {
+    const res = await rejectSmsSignature({ service_id: queryParams.service_id, signature_id: currentRow.value.ID, reject_reason: rejectReason.value })
+    if (res.data.code === 200) { ElMessage.success('已驳回'); rejectDialogVisible.value = false; fetchList() }
+    else { ElMessage.error(res.data.message || '驳回失败') }
+  } catch { ElMessage.error('驳回失败') }
+  finally { submitting.value = false }
+}
+
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除签名「${row.title}」？`, '删除', { type: 'warning' }).then(async () => {
+    try {
+      const res = await deleteSmsSignature({ service_id: queryParams.service_id, signature_id: row.ID })
+      if (res.data.code === 200) { ElMessage.success('删除成功'); fetchList() }
+      else { ElMessage.error(res.data.message || '删除失败') }
+    } catch { ElMessage.error('删除失败') }
+  }).catch(() => {})
+}
+
+onMounted(async () => {
+  await loadServices()
+  fetchList()
+})
+</script>
+
+<style scoped>
+.sms-signature-page { padding: 20px; }
+.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+.header-info { display: flex; align-items: center; gap: 14px; }
+.header-icon { width: 48px; height: 48px; border-radius: 12px; background: #f0f9eb; display: flex; align-items: center; justify-content: center; }
+.header-title { margin: 0; font-size: 20px; color: #303133; }
+.header-desc { margin: 4px 0 0; font-size: 13px; color: #909399; }
+.header-actions { display: flex; gap: 10px; }
+.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
+.pagination { margin-top: 16px; justify-content: flex-end; }
+.clear-icon { cursor: pointer; color: #909399; transition: color 0.2s; }
+.clear-icon:hover { color: #f56c6c; }
+
+/* 卡片列表 */
+.signature-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+  gap: 16px;
+  min-height: 200px;
+}
+
+.empty-state {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+.sig-card {
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 10px;
+  padding: 18px;
+  transition: all 0.25s;
+  display: flex;
+  flex-direction: column;
+}
+.sig-card:hover {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  border-color: #d9d9d9;
+  transform: translateY(-2px);
+}
+.sig-card.status-1 { border-left: 3px solid #e6a23c; }
+.sig-card.status-2 { border-left: 3px solid #67c23a; }
+.sig-card.status-3 { border-left: 3px solid #f56c6c; }
+
+.sig-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+.sig-card-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.sig-title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+.sig-card-id {
+  font-size: 12px;
+  color: #c0c4cc;
+}
+
+.sig-card-body {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+  margin-bottom: 14px;
+}
+.sig-card-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.sig-info-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+.sig-label {
+  color: #909399;
+  min-width: 56px;
+  flex-shrink: 0;
+}
+.sig-value {
+  color: #303133;
+  word-break: break-all;
+}
+.sig-id-card {
+  font-family: monospace;
+  font-size: 12px;
+  color: #606266;
+}
+.reject-row .sig-value {
+  color: #f56c6c;
+}
+.reject-text { color: #f56c6c; }
+
+.sig-card-license {
+  flex-shrink: 0;
+  width: 90px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.license-img {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  cursor: pointer;
+}
+.license-placeholder {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  background: #f5f7fa;
+  border: 1px dashed #dcdfe6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: #c0c4cc;
+  font-size: 11px;
+}
+
+.sig-card-footer {
+  display: flex;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f2f5;
+  flex-wrap: wrap;
+}
+</style>

src/views/sms/SmsTemplate.vue

@@ -0,0 +1,632 @@
+<template>
+  <div class="sms-template-page">
+    <div class="page-header">
+      <div class="header-info">
+        <div class="header-icon">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#409eff" stroke-width="1.8">
+            <path d="M4 4h16v16H4z" rx="2"/>
+            <path d="M8 8h8M8 12h6M8 16h4" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div>
+          <h2 class="header-title">短信模板管理</h2>
+          <p class="header-desc">管理用户短信模板的审核、推荐模板的维护</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 服务选择 -->
+    <div class="filter-bar">
+      <el-select v-model="serviceId" placeholder="选择主控服务" style="width: 200px" @change="onServiceChange">
+        <el-option v-for="s in serviceOptions" :key="s.id" :label="s.name" :value="s.id" />
+      </el-select>
+    </div>
+
+    <!-- 主内容 Tabs -->
+    <el-tabs v-model="activeTab" type="border-card">
+      <!-- 用户模板 -->
+      <el-tab-pane label="用户模板" name="user">
+        <div class="tab-toolbar">
+          <div class="tab-filters">
+            <el-select v-model="tplQuery.status" placeholder="全部状态" clearable style="width: 130px" @change="fetchTemplates">
+              <el-option label="草稿" :value="0" />
+              <el-option label="审核中" :value="1" />
+              <el-option label="已通过" :value="2" />
+              <el-option label="已驳回" :value="3" />
+            </el-select>
+            <el-input
+              v-if="tplFilterUserInfo"
+              :model-value="`${tplFilterUserInfo.user_name} (ID: ${tplQuery.user_id})`"
+              readonly
+              style="width: 200px"
+            >
+              <template #suffix>
+                <el-icon class="clear-icon" @click="clearTplFilterUser"><Close /></el-icon>
+              </template>
+              <template #prefix><el-icon><User /></el-icon></template>
+            </el-input>
+            <el-input v-else placeholder="筛选用户" readonly style="width: 140px" @click="tplFilterUserSelectorVisible = true">
+              <template #prefix><el-icon><User /></el-icon></template>
+            </el-input>
+            <el-button type="primary" @click="fetchTemplates">搜索</el-button>
+          </div>
+          <el-button type="primary" @click="handleAddTemplate">
+            <el-icon><Plus /></el-icon> 新增模板
+          </el-button>
+        </div>
+
+        <el-table :data="tplList" v-loading="tplLoading" stripe border style="width: 100%">
+          <el-table-column prop="ID" label="ID" width="70" align="center" />
+          <el-table-column label="用户ID" width="90">
+            <template #default="{ row }">
+              <el-link type="primary" :underline="false" @click="$router.push({ path: '/user/detail', query: { user_id: row.user_id } })">{{ row.user_id }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="模板名称" min-width="140" />
+          <el-table-column label="内容" min-width="200">
+            <template #default="{ row }">
+              <el-tooltip :content="row.content" placement="top" :show-after="300">
+                <span class="content-cell">{{ row.content }}</span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column label="参数" width="150">
+            <template #default="{ row }">
+              <template v-if="row.params && row.params.length">
+                <el-tag v-for="p in row.params" :key="p.key" size="small" style="margin: 2px">{{ p.key }}</el-tag>
+              </template>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <el-tag :type="statusTagType(row.status)" size="small">{{ statusText(row.status) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="驳回原因" min-width="130">
+            <template #default="{ row }">
+              <span v-if="row.reject_reason" class="reject-text">{{ row.reject_reason }}</span>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="280" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleEditTemplate(row)">编辑</el-button>
+              <el-button v-if="row.status === 0" type="warning" link @click="handleSubmitTpl(row)">提交审核</el-button>
+              <el-button v-if="row.status === 1" type="success" link @click="handleApproveTpl(row)">通过</el-button>
+              <el-button v-if="row.status === 1" type="danger" link @click="handleRejectTpl(row)">驳回</el-button>
+              <el-button type="danger" link @click="handleDeleteTpl(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          v-model:current-page="tplQuery.page"
+          v-model:page-size="tplQuery.count"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next"
+          :total="tplTotal"
+          @size-change="fetchTemplates"
+          @current-change="fetchTemplates"
+          background
+          class="pagination"
+        />
+      </el-tab-pane>
+
+      <!-- 推荐模板 -->
+      <el-tab-pane label="推荐模板" name="recommended">
+        <div class="tab-toolbar">
+          <div></div>
+          <el-button type="primary" @click="handleAddRecommended">
+            <el-icon><Plus /></el-icon> 新增推荐模板
+          </el-button>
+        </div>
+
+        <el-table :data="recList" v-loading="recLoading" stripe border style="width: 100%">
+          <el-table-column prop="id" label="ID" width="70" align="center" />
+          <el-table-column prop="name" label="名称" min-width="140" />
+          <el-table-column label="分类" width="120">
+            <template #default="{ row }">
+              <el-tag v-if="row.category" size="small">{{ row.category }}</el-tag>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="内容" min-width="220">
+            <template #default="{ row }">
+              <el-tooltip :content="row.content" placement="top" :show-after="300">
+                <span class="content-cell">{{ row.content }}</span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column label="参数" width="150">
+            <template #default="{ row }">
+              <template v-if="row.params && row.params.length">
+                <el-tag v-for="p in row.params" :key="p.key" size="small" style="margin: 2px">{{ p.key }}</el-tag>
+              </template>
+              <span v-else class="text-muted">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link @click="handleEditRecommended(row)">编辑</el-button>
+              <el-button type="danger" link @click="handleDeleteRecommended(row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          v-model:current-page="recQuery.page"
+          v-model:page-size="recQuery.count"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next"
+          :total="recTotal"
+          @size-change="fetchRecommended"
+          @current-change="fetchRecommended"
+          background
+          class="pagination"
+        />
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 用户模板表单对话框 -->
+    <el-dialog v-model="tplDialogVisible" :title="tplDialogType === 'add' ? '新增模板' : '编辑模板'" width="640px" append-to-body destroy-on-close>
+      <el-form ref="tplFormRef" :model="tplForm" :rules="tplFormRules" label-width="100px">
+        <el-form-item label="用户" prop="user_id">
+          <el-input
+            v-if="tplSelectedUser"
+            :model-value="`${tplSelectedUser.user_name} (ID: ${tplForm.user_id})`"
+            readonly
+          >
+            <template #suffix>
+              <el-icon v-if="tplDialogType === 'add'" class="clear-icon" @click="clearTplUser"><Close /></el-icon>
+            </template>
+            <template #append>
+              <el-button @click="tplUserSelectorVisible = true" :disabled="tplDialogType === 'edit'"><el-icon><User /></el-icon></el-button>
+            </template>
+          </el-input>
+          <el-input v-else placeholder="请选择用户" readonly @click="openTplUserSelector">
+            <template #append>
+              <el-button @click="openTplUserSelector" :disabled="tplDialogType === 'edit'"><el-icon><User /></el-icon></el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="tplForm.name" placeholder="请输入模板名称" maxlength="50" show-word-limit />
+        </el-form-item>
+        <el-form-item label="推荐模板">
+          <el-select v-model="tplForm.recommended_id" placeholder="选择推荐模板（可选）" clearable style="width: 100%" @change="onRecommendedSelect">
+            <el-option v-for="r in recOptionsCache" :key="r.id" :label="r.name" :value="r.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模板参数">
+          <div class="params-editor">
+            <div v-for="(p, idx) in tplForm.paramsList" :key="idx" class="param-row">
+              <el-input v-model="p.key" placeholder="参数名" style="width: 100px" />
+              <el-select v-model="p.type" placeholder="类型" style="width: 100px">
+                <el-option label="字符串" value="string" />
+                <el-option label="数字" value="number" />
+                <el-option label="时间" value="date" />
+              </el-select>
+              <el-input-number v-model="p.max_len" :min="1" :max="999" placeholder="长度" style="width: 100px" />
+              <el-button type="danger" link @click="tplForm.paramsList.splice(idx, 1)"><el-icon><Delete /></el-icon></el-button>
+            </div>
+            <el-button type="primary" link @click="tplForm.paramsList.push({ key: '', type: 'string', max_len: 20 })">
+              <el-icon><Plus /></el-icon> 添加参数
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="模板内容" prop="content">
+          <el-input v-model="tplForm.content" type="textarea" :rows="4" placeholder="如：您的验证码为{code}，有效期{time}分钟。" />
+          <div v-if="tplForm.paramsList.length" class="insert-btns">
+            <span class="insert-label">插入参数：</span>
+            <el-button v-for="p in tplForm.paramsList.filter(x => x.key)" :key="p.key" size="small" @click="insertParam(p.key)">{{ '{' + p.key + '}' }}</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="tplDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submitTplForm">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 推荐模板表单对话框 -->
+    <el-dialog v-model="recDialogVisible" :title="recDialogType === 'add' ? '新增推荐模板' : '编辑推荐模板'" width="600px" append-to-body destroy-on-close>
+      <el-form ref="recFormRef" :model="recForm" :rules="recFormRules" label-width="100px">
+        <el-form-item label="模板名称" prop="name">
+          <el-input v-model="recForm.name" placeholder="请输入名称" maxlength="50" show-word-limit />
+        </el-form-item>
+        <el-form-item label="分类">
+          <el-input v-model="recForm.category" placeholder="如：验证码、通知、营销" />
+        </el-form-item>
+        <el-form-item label="模板参数">
+          <div class="params-editor">
+            <div v-for="(p, idx) in recForm.paramsList" :key="idx" class="param-row">
+              <el-input v-model="p.key" placeholder="参数名" style="width: 100px" />
+              <el-select v-model="p.type" placeholder="类型" style="width: 100px">
+                <el-option label="字符串" value="string" />
+                <el-option label="数字" value="number" />
+                <el-option label="时间" value="date" />
+              </el-select>
+              <el-input-number v-model="p.max_len" :min="1" :max="999" placeholder="长度" style="width: 100px" />
+              <el-button type="danger" link @click="recForm.paramsList.splice(idx, 1)"><el-icon><Delete /></el-icon></el-button>
+            </div>
+            <el-button type="primary" link @click="recForm.paramsList.push({ key: '', type: 'string', max_len: 20 })">
+              <el-icon><Plus /></el-icon> 添加参数
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="模板内容" prop="content">
+          <el-input v-model="recForm.content" type="textarea" :rows="4" placeholder="模板内容，参数使用 {key} 格式" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="recDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submitRecForm">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 驳回对话框 -->
+    <el-dialog v-model="rejectDialogVisible" title="驳回模板" width="420px" append-to-body>
+      <el-form label-width="80px">
+        <el-form-item label="驳回原因">
+          <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="请输入驳回原因" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="rejectDialogVisible = false">取消</el-button>
+        <el-button type="danger" :loading="submitting" @click="confirmRejectTpl">确认驳回</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 表单用户选择器 -->
+    <UserListSelector
+      v-model="tplUserSelectorVisible"
+      :current-user-id="tplForm.user_id"
+      @confirm="handleTplUserSelect"
+    />
+    <!-- 筛选用户选择器 -->
+    <UserListSelector
+      v-model="tplFilterUserSelectorVisible"
+      :current-user-id="tplQuery.user_id ? Number(tplQuery.user_id) : undefined"
+      @confirm="handleTplFilterUserSelect"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus, Delete, User, Close } from '@element-plus/icons-vue'
+import { formatDate } from '@/utils/tool'
+import UserListSelector from '@/components/admin/UserListSelector.vue'
+import {
+  getSmsServiceList,
+  getSmsTemplateList, createSmsTemplate, updateSmsTemplate, deleteSmsTemplate,
+  submitSmsTemplate, approveSmsTemplate, rejectSmsTemplate,
+  getSmsRecommendedTemplateList, createSmsRecommendedTemplate, updateSmsRecommendedTemplate, deleteSmsRecommendedTemplate
+} from '@/api/admin/smsService'
+
+const serviceOptions = ref([])
+const serviceId = ref(null)
+const activeTab = ref('user')
+const submitting = ref(false)
+
+const statusText = (s) => ({ 0: '草稿', 1: '审核中', 2: '已通过', 3: '已驳回' }[s] || '未知')
+const statusTagType = (s) => ({ 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }[s] || 'info')
+
+// ========== 服务选择 ==========
+const loadServices = async () => {
+  try {
+    const res = await getSmsServiceList({ page: 1, count: 199 })
+    if (res.data.code === 200) {
+      const list = res.data.data?.data || res.data.data || []
+      serviceOptions.value = Array.isArray(list) ? list : []
+      if (serviceOptions.value.length && !serviceId.value) {
+        serviceId.value = serviceOptions.value[0].id
+      }
+    }
+  } catch (e) { console.error(e) }
+}
+
+const onServiceChange = () => {
+  fetchTemplates()
+  fetchRecommended()
+}
+
+// ========== 用户模板 ==========
+const tplLoading = ref(false)
+const tplList = ref([])
+const tplTotal = ref(0)
+const tplQuery = reactive({ page: 1, count: 10, user_id: '', status: null })
+const tplFilterUserSelectorVisible = ref(false)
+const tplFilterUserInfo = ref(null)
+
+const handleTplFilterUserSelect = (user) => {
+  tplQuery.user_id = String(user.user_id)
+  tplFilterUserInfo.value = user
+  fetchTemplates()
+}
+const clearTplFilterUser = () => {
+  tplQuery.user_id = ''
+  tplFilterUserInfo.value = null
+  fetchTemplates()
+}
+
+const fetchTemplates = async () => {
+  if (!serviceId.value) return
+  tplLoading.value = true
+  try {
+    const params = { service_id: serviceId.value, page: tplQuery.page, count: tplQuery.count }
+    if (tplQuery.user_id) params.user_id = Number(tplQuery.user_id)
+    if (tplQuery.status !== null && tplQuery.status !== '') params.status = tplQuery.status
+    const res = await getSmsTemplateList(params)
+    if (res.data.code === 200) {
+      const d = res.data.data
+      tplList.value = d?.data || d || []
+      tplTotal.value = d?.all_count || 0
+    }
+  } catch { ElMessage.error('获取模板列表失败') }
+  finally { tplLoading.value = false }
+}
+
+// 模板表单
+const tplDialogVisible = ref(false)
+const tplDialogType = ref('add')
+const tplFormRef = ref(null)
+const tplForm = reactive({ user_id: null, name: '', content: '', paramsList: [], recommended_id: null, template_id: null })
+const tplUserSelectorVisible = ref(false)
+const tplSelectedUser = ref(null)
+
+const openTplUserSelector = () => {
+  if (tplDialogType.value === 'edit') return
+  tplUserSelectorVisible.value = true
+}
+const handleTplUserSelect = (user) => {
+  tplForm.user_id = user.user_id
+  tplSelectedUser.value = user
+}
+const clearTplUser = () => {
+  tplForm.user_id = null
+  tplSelectedUser.value = null
+}
+const tplFormRules = {
+  user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入模板内容', trigger: 'blur' }]
+}
+const recOptionsCache = ref([])
+
+const handleAddTemplate = () => {
+  tplDialogType.value = 'add'
+  tplSelectedUser.value = null
+  Object.assign(tplForm, { user_id: null, name: '', content: '', paramsList: [], recommended_id: null, template_id: null })
+  loadRecOptionsCache()
+  tplDialogVisible.value = true
+}
+
+const handleEditTemplate = (row) => {
+  tplDialogType.value = 'edit'
+  tplSelectedUser.value = { user_id: row.user_id, user_name: `用户${row.user_id}` }
+  const params = Array.isArray(row.params) ? row.params.map(p => ({ ...p })) : []
+  Object.assign(tplForm, { user_id: row.user_id, name: row.name, content: row.content, paramsList: params, recommended_id: row.recommended_id || null, template_id: row.ID })
+  loadRecOptionsCache()
+  tplDialogVisible.value = true
+}
+
+const loadRecOptionsCache = async () => {
+  if (!serviceId.value) return
+  try {
+    const res = await getSmsRecommendedTemplateList({ service_id: serviceId.value, page: 1, count: 100 })
+    if (res.data.code === 200) {
+      recOptionsCache.value = res.data.data?.data || res.data.data || []
+    }
+  } catch {}
+}
+
+const onRecommendedSelect = (id) => {
+  if (!id) return
+  const rec = recOptionsCache.value.find(r => r.id === id)
+  if (rec) {
+    tplForm.content = rec.content
+    tplForm.paramsList = Array.isArray(rec.params) ? rec.params.map(p => ({ ...p })) : []
+  }
+}
+
+const insertParam = (key) => {
+  tplForm.content += `{${key}}`
+}
+
+const submitTplForm = () => {
+  tplFormRef.value?.validate(async (valid) => {
+    if (!valid) return
+    submitting.value = true
+    try {
+      const paramsJson = tplForm.paramsList.filter(p => p.key).length > 0
+        ? JSON.stringify(tplForm.paramsList.filter(p => p.key))
+        : ''
+      const data = {
+        service_id: serviceId.value,
+        user_id: tplForm.user_id,
+        name: tplForm.name,
+        content: tplForm.content
+      }
+      if (paramsJson) data.params = paramsJson
+      if (tplForm.recommended_id) data.recommended_id = tplForm.recommended_id
+
+      let res
+      if (tplDialogType.value === 'add') {
+        res = await createSmsTemplate(data)
+      } else {
+        data.template_id = tplForm.template_id
+        res = await updateSmsTemplate(data)
+      }
+      if (res.data.code === 200) { ElMessage.success('操作成功'); tplDialogVisible.value = false; fetchTemplates() }
+      else { ElMessage.error(res.data.message || '操作失败') }
+    } catch { ElMessage.error('操作失败') }
+    finally { submitting.value = false }
+  })
+}
+
+const handleSubmitTpl = (row) => {
+  ElMessageBox.confirm(`提交模板「${row.name}」审核？`, '提交审核', { type: 'info' }).then(async () => {
+    try {
+      const res = await submitSmsTemplate({ service_id: serviceId.value, template_id: row.ID })
+      if (res.data.code === 200) { ElMessage.success('已提交'); fetchTemplates() }
+      else { ElMessage.error(res.data.message || '操作失败') }
+    } catch { ElMessage.error('操作失败') }
+  }).catch(() => {})
+}
+
+const handleApproveTpl = (row) => {
+  ElMessageBox.confirm(`通过模板「${row.name}」？`, '审核通过', { type: 'success' }).then(async () => {
+    try {
+      const res = await approveSmsTemplate({ service_id: serviceId.value, template_id: row.ID })
+      if (res.data.code === 200) { ElMessage.success('已通过'); fetchTemplates() }
+      else { ElMessage.error(res.data.message || '操作失败') }
+    } catch { ElMessage.error('操作失败') }
+  }).catch(() => {})
+}
+
+const rejectDialogVisible = ref(false)
+const rejectReason = ref('')
+const currentRejectRow = ref(null)
+
+const handleRejectTpl = (row) => {
+  currentRejectRow.value = row
+  rejectReason.value = ''
+  rejectDialogVisible.value = true
+}
+
+const confirmRejectTpl = async () => {
+  if (!rejectReason.value.trim()) { ElMessage.warning('请输入驳回原因'); return }
+  submitting.value = true
+  try {
+    const res = await rejectSmsTemplate({ service_id: serviceId.value, template_id: currentRejectRow.value.ID, reject_reason: rejectReason.value })
+    if (res.data.code === 200) { ElMessage.success('已驳回'); rejectDialogVisible.value = false; fetchTemplates() }
+    else { ElMessage.error(res.data.message || '操作失败') }
+  } catch { ElMessage.error('操作失败') }
+  finally { submitting.value = false }
+}
+
+const handleDeleteTpl = (row) => {
+  ElMessageBox.confirm(`确认删除模板「${row.name}」？`, '删除', { type: 'warning' }).then(async () => {
+    try {
+      const res = await deleteSmsTemplate({ service_id: serviceId.value, template_id: row.ID })
+      if (res.data.code === 200) { ElMessage.success('删除成功'); fetchTemplates() }
+      else { ElMessage.error(res.data.message || '删除失败') }
+    } catch { ElMessage.error('删除失败') }
+  }).catch(() => {})
+}
+
+// ========== 推荐模板 ==========
+const recLoading = ref(false)
+const recList = ref([])
+const recTotal = ref(0)
+const recQuery = reactive({ page: 1, count: 10 })
+
+const fetchRecommended = async () => {
+  if (!serviceId.value) return
+  recLoading.value = true
+  try {
+    const res = await getSmsRecommendedTemplateList({ service_id: serviceId.value, page: recQuery.page, count: recQuery.count })
+    if (res.data.code === 200) {
+      const d = res.data.data
+      recList.value = d?.data || d || []
+      recTotal.value = d?.all_count || 0
+    }
+  } catch { ElMessage.error('获取推荐模板失败') }
+  finally { recLoading.value = false }
+}
+
+const recDialogVisible = ref(false)
+const recDialogType = ref('add')
+const recFormRef = ref(null)
+const recForm = reactive({ name: '', content: '', paramsList: [], category: '', template_id: null })
+const recFormRules = {
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
+}
+
+const handleAddRecommended = () => {
+  recDialogType.value = 'add'
+  Object.assign(recForm, { name: '', content: '', paramsList: [], category: '', template_id: null })
+  recDialogVisible.value = true
+}
+
+const handleEditRecommended = (row) => {
+  recDialogType.value = 'edit'
+  const params = Array.isArray(row.params) ? row.params.map(p => ({ ...p })) : []
+  Object.assign(recForm, { name: row.name, content: row.content, paramsList: params, category: row.category || '', template_id: row.id })
+  recDialogVisible.value = true
+}
+
+const submitRecForm = () => {
+  recFormRef.value?.validate(async (valid) => {
+    if (!valid) return
+    submitting.value = true
+    try {
+      const paramsJson = recForm.paramsList.filter(p => p.key).length > 0
+        ? JSON.stringify(recForm.paramsList.filter(p => p.key))
+        : ''
+      const data = {
+        service_id: serviceId.value,
+        name: recForm.name,
+        content: recForm.content
+      }
+      if (paramsJson) data.params = paramsJson
+      if (recForm.category) data.category = recForm.category
+
+      let res
+      if (recDialogType.value === 'add') {
+        res = await createSmsRecommendedTemplate(data)
+      } else {
+        data.template_id = recForm.template_id
+        res = await updateSmsRecommendedTemplate(data)
+      }
+      if (res.data.code === 200) { ElMessage.success('操作成功'); recDialogVisible.value = false; fetchRecommended() }
+      else { ElMessage.error(res.data.message || '操作失败') }
+    } catch { ElMessage.error('操作失败') }
+    finally { submitting.value = false }
+  })
+}
+
+const handleDeleteRecommended = (row) => {
+  ElMessageBox.confirm(`确认删除推荐模板「${row.name}」？`, '删除', { type: 'warning' }).then(async () => {
+    try {
+      const res = await deleteSmsRecommendedTemplate({ service_id: serviceId.value, template_id: row.id })
+      if (res.data.code === 200) { ElMessage.success('删除成功'); fetchRecommended() }
+      else { ElMessage.error(res.data.message || '删除失败') }
+    } catch { ElMessage.error('删除失败') }
+  }).catch(() => {})
+}
+
+// ========== 初始化 ==========
+onMounted(async () => {
+  await loadServices()
+  fetchTemplates()
+  fetchRecommended()
+})
+</script>
+
+<style scoped>
+.sms-template-page { padding: 20px; }
+.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+.header-info { display: flex; align-items: center; gap: 14px; }
+.header-icon { width: 48px; height: 48px; border-radius: 12px; background: #ecf5ff; display: flex; align-items: center; justify-content: center; }
+.header-title { margin: 0; font-size: 20px; color: #303133; }
+.header-desc { margin: 4px 0 0; font-size: 13px; color: #909399; }
+.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
+.tab-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.tab-filters { display: flex; gap: 10px; align-items: center; }
+.pagination { margin-top: 16px; justify-content: flex-end; }
+.content-cell { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 13px; cursor: pointer; }
+.reject-text { color: #f56c6c; font-size: 12px; }
+.text-muted { color: #c0c4cc; }
+
+.params-editor { width: 100%; }
+.param-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
+.insert-btns { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.insert-label { font-size: 12px; color: #909399; }
+.clear-icon { cursor: pointer; color: #909399; transition: color 0.2s; }
+.clear-icon:hover { color: #f56c6c; }
+</style>

src/views/system/NoticeChannel.vue

@@ -193,43 +193,75 @@
     </el-tabs>
 
     <!-- ==================== 模板编辑弹窗 ==================== -->
-    <el-dialog v-model="tplDialogVisible" :title="tplForm.id ? '编辑模板' : '新增模板'" width="640px" append-to-body destroy-on-close>
+    <el-dialog v-model="tplDialogVisible" :title="tplForm.id ? '编辑模板' : '新增模板'" width="1060px" append-to-body destroy-on-close @opened="onTplDialogOpened">
-      <el-form :model="tplForm" :rules="tplRules" ref="tplFormRef" label-width="90px" label-position="right">
+      <div class="tpl-dialog-body">
-        <el-form-item label="模板名称" prop="name">
+        <!-- 左侧：表单 -->
-          <el-input v-model="tplForm.name" placeholder="例：用户注册通知" maxlength="100" show-word-limit />
+        <div class="tpl-dialog-left">
-        </el-form-item>
+          <el-form :model="tplForm" :rules="tplRules" ref="tplFormRef" label-width="90px" label-position="right">
-        <el-form-item label="模板标识" prop="tag">
+            <el-form-item label="模板名称" prop="name">
-          <el-input v-model="tplForm.tag" placeholder="例：user_register_notify" maxlength="100" :disabled="!!tplForm.id" />
+              <el-input v-model="tplForm.name" placeholder="例：用户注册通知" maxlength="100" show-word-limit />
-        </el-form-item>
+            </el-form-item>
-        <el-form-item label="模板类型" prop="type">
+            <el-form-item label="模板标识" prop="tag">
-          <el-radio-group v-model="tplForm.type">
+              <el-input v-model="tplForm.tag" placeholder="例：user_register_notify" maxlength="100" :disabled="!!tplForm.id" />
-            <el-radio value="email">
+            </el-form-item>
-              <span class="radio-with-icon">
+            <el-form-item label="模板类型" prop="type">
-                <svg viewBox="0 0 24 24" width="14" height="14"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#e6a23c"/></svg>
+              <el-radio-group v-model="tplForm.type">
-                邮件
+                <el-radio value="email">
-              </span>
+                  <span class="radio-with-icon">
-            </el-radio>
+                    <svg viewBox="0 0 24 24" width="14" height="14"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#e6a23c"/></svg>
-            <el-radio value="phone">
+                    邮件
-              <span class="radio-with-icon">
+                  </span>
-                <svg viewBox="0 0 24 24" width="14" height="14"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z" fill="#67c23a"/></svg>
+                </el-radio>
-                短信
+                <el-radio value="phone">
-              </span>
+                  <span class="radio-with-icon">
-            </el-radio>
+                    <svg viewBox="0 0 24 24" width="14" height="14"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z" fill="#67c23a"/></svg>
-          </el-radio-group>
+                    短信
-        </el-form-item>
+                  </span>
-        <el-form-item label="可用参数" v-if="tplFormArgs.length > 0">
+                </el-radio>
-          <div class="args-btn-group">
+              </el-radio-group>
-            <el-button v-for="arg in tplFormArgs" :key="arg" size="small" @click="insertArg(arg)" class="arg-insert-btn">
+            </el-form-item>
-              <svg viewBox="0 0 24 24" width="12" height="12" style="margin-right:3px"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/></svg>
+            <el-form-item label="可用参数" v-if="tplFormArgs.length > 0">
-              {{ arg }}
+              <div class="args-btn-group">
+                <el-button v-for="arg in tplFormArgs" :key="arg" size="small" @click="insertArg(arg)" class="arg-insert-btn">
+                  <svg viewBox="0 0 24 24" width="12" height="12" style="margin-right:3px"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/></svg>
+                  {{ arg }}
+                </el-button>
+              </div>
+              <div class="form-hint">点击参数按钮可将其插入到模板内容光标处</div>
+            </el-form-item>
+            <el-form-item label="模板内容" prop="content">
+              <el-input ref="contentInputRef" v-model="tplForm.content" type="textarea" :rows="8" placeholder="模板内容，点击上方参数按钮插入变量" />
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 右侧：渲染预览 -->
+        <div class="tpl-dialog-right">
+          <div class="preview-header">
+            <span class="preview-title">
+              <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="currentColor"/></svg>
+              渲染预览
+            </span>
+            <el-button size="small" link type="primary" @click="fetchPreview" :loading="previewLoading">
+              <el-icon><Refresh /></el-icon> 刷新
             </el-button>
           </div>
-          <div class="form-hint">点击参数按钮可将其插入到模板内容光标处</div>
+
-        </el-form-item>
+          <div class="preview-body" v-loading="previewLoading">
-        <el-form-item label="模板内容" prop="content">
+            <template v-if="previewData.rendered">
-          <el-input ref="contentInputRef" v-model="tplForm.content" type="textarea" :rows="6" placeholder="模板内容，点击上方参数按钮插入变量" />
+              <div class="preview-rendered" :class="{ 'html-mode': tplForm.type === 'email' }" v-html="previewRenderedHtml"></div>
-        </el-form-item>
+            </template>
-      </el-form>
+            <div v-else-if="previewError" class="preview-empty">
+              <el-icon :size="32" color="#f56c6c"><WarningFilled /></el-icon>
+              <p>{{ previewError }}</p>
+            </div>
+            <div v-else class="preview-empty">
+              <el-icon :size="32" color="#c0c4cc"><View /></el-icon>
+              <p>填写模板标识和类型后自动加载预览</p>
+            </div>
+          </div>
+        </div>
+      </div>
       <template #footer>
         <el-button @click="tplDialogVisible = false">取消</el-button>
         <el-button type="primary" :loading="tplSubmitting" @click="handleSubmitTpl">确定</el-button>
@@ -239,12 +271,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Refresh, View, WarningFilled } from '@element-plus/icons-vue'
 import {
   getNoticeChannelList, updateNoticeChannel,
-  getNoticeTemplateList, addNoticeTemplate, updateNoticeTemplate, deleteNoticeTemplate
+  getNoticeTemplateList, addNoticeTemplate, updateNoticeTemplate, deleteNoticeTemplate,
+  previewNoticeTemplate
 } from '@/api/admin/noticeChannel'
 
 // ==================== 渠道配置 ====================
@@ -410,6 +443,70 @@ const handleDeleteTpl = async (row) => {
   } catch {}
 }
 
+// ==================== 渲染预览 ====================
+const previewLoading = ref(false)
+const previewError = ref('')
+const previewData = ref({ rendered: '', default_args: null })
+
+const previewRenderedHtml = computed(() => {
+  const text = previewData.value.rendered || ''
+  if (tplForm.value.type === 'email') return text
+  return text.replace(/\n/g, '<br>')
+})
+
+let previewTimer = null
+const debouncedFetchPreview = () => {
+  clearTimeout(previewTimer)
+  previewTimer = setTimeout(() => fetchPreview(), 600)
+}
+
+const fetchPreview = async () => {
+  const tag = tplForm.value.tag?.trim()
+  const type = tplForm.value.type
+  const content = tplForm.value.content?.trim()
+
+  if (!content && (!tag || !type)) {
+    previewData.value = { rendered: '', default_args: null }
+    previewError.value = ''
+    return
+  }
+
+  previewLoading.value = true
+  previewError.value = ''
+  try {
+    const params = {}
+    if (content) {
+      params.content = content
+    } else {
+      params.tag = tag
+      params.type = type
+    }
+    const res = await previewNoticeTemplate(params)
+    const body = res?.data
+    if (body?.code === 200 && body.data) {
+      previewData.value = body.data
+    } else {
+      previewData.value = { rendered: '', default_args: null }
+      previewError.value = body?.message || '渲染失败'
+    }
+  } catch {
+    previewData.value = { rendered: '', default_args: null }
+    previewError.value = '请求失败'
+  } finally {
+    previewLoading.value = false
+  }
+}
+
+const onTplDialogOpened = () => {
+  if (tplForm.value.tag && tplForm.value.type) {
+    fetchPreview()
+  }
+}
+
+watch(() => tplForm.value.tag, debouncedFetchPreview)
+watch(() => tplForm.value.type, debouncedFetchPreview)
+watch(() => tplForm.value.content, debouncedFetchPreview)
+
 // ==================== 工具函数 ====================
 const formatTime = (t) => {
   if (!t) return '-'
@@ -495,6 +592,129 @@ onMounted(() => {
 .form-hint { margin-top: 6px; font-size: 12px; color: #a8abb2; line-height: 1.4; }
 .form-hint code { background: #f5f7fa; padding: 1px 5px; border-radius: 3px; font-size: 11px; color: #606266; }
 
-/* ===== 弹窗 ===== */
+/* ===== 弹窗双栏布局 ===== */
 .radio-with-icon { display: inline-flex; align-items: center; gap: 4px; }
+
+.tpl-dialog-body {
+  display: flex;
+  gap: 20px;
+  min-height: 380px;
+}
+
+.tpl-dialog-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.tpl-dialog-right {
+  width: 380px;
+  flex-shrink: 0;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fafbfc;
+}
+
+.preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: #f5f7fa;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+.preview-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.preview-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px;
+}
+
+.preview-rendered {
+  font-size: 13px;
+  line-height: 1.7;
+  color: #303133;
+  word-break: break-all;
+  white-space: pre-wrap;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  padding: 12px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.preview-rendered.html-mode {
+  white-space: normal;
+  transform: scale(0.75);
+  transform-origin: top left;
+  width: 133.33%;
+  max-height: 426px;
+}
+
+.preview-args {
+  margin-top: 14px;
+}
+
+.preview-args-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #606266;
+  margin-bottom: 8px;
+}
+
+.preview-args-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.preview-arg-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.preview-arg-key {
+  background: #ecf5ff;
+  color: #409eff;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-family: 'Consolas','Monaco',monospace;
+  flex-shrink: 0;
+}
+
+.preview-arg-val {
+  color: #606266;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  color: #909399;
+}
+
+.preview-empty p {
+  margin: 10px 0 0;
+  font-size: 13px;
+}
 </style>