From f41f066abc4836301d137a9296a5be8e412810e6 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Mon, 1 Sep 2025 01:06:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(Scripts):=20=E6=B7=BB=E5=8A=A0=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=E8=84=9A=E6=9C=AC=E5=88=9B=E5=BB=BA=E6=96=B9=E5=BC=8F?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=92=8C=E6=A8=A1=E6=9D=BF=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/composables/useTemplateApi.ts |   91 ++
 frontend/src/views/Scripts.vue             | 1017 ++++++++++++++++++--
 2 files changed, 1049 insertions(+), 59 deletions(-)
 create mode 100644 frontend/src/composables/useTemplateApi.ts

diff --git a/frontend/src/composables/useTemplateApi.ts b/frontend/src/composables/useTemplateApi.ts
new file mode 100644
index 0000000..6d0db89
--- /dev/null
+++ b/frontend/src/composables/useTemplateApi.ts
@@ -0,0 +1,91 @@
+import { ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { Service } from '@/api'
+
+export interface WebConfigTemplate {
+  configName: string
+  description: string
+  author: string
+  createTime: string
+  downloadUrl: string
+}
+
+export interface WebConfigResponse {
+  code: number
+  status: string
+  message: string
+  data: {
+    WebConfig: WebConfigTemplate[]
+  }
+}
+
+export function useTemplateApi() {
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  // 获取Web配置模板列表
+  const getWebConfigTemplates = async (): Promise<WebConfigTemplate[]> => {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await Service.getWebConfigApiInfoWebconfigPost()
+
+      if (response.code !== 200) {
+        const errorMsg = response.message || '获取模板列表失败'
+        message.error(errorMsg)
+        throw new Error(errorMsg)
+      }
+
+      // 直接返回API响应中的WebConfig数组
+      return (response.data as any).WebConfig || []
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : '获取模板列表失败'
+      error.value = errorMsg
+      if (!err.message?.includes('HTTP error')) {
+        message.error(errorMsg)
+      }
+      return []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 从Web导入脚本配置
+  const importScriptFromWeb = async (scriptId: string, url: string): Promise<boolean> => {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await Service.importScriptFromWebApiScriptsImportWebPost({
+        scriptId,
+        url
+      })
+
+      if (response.code !== 200) {
+        const errorMsg = response.message || '导入配置失败'
+        message.error(errorMsg)
+        throw new Error(errorMsg)
+      }
+
+      message.success(response.message || '导入配置成功')
+      return true
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : '导入配置失败'
+      error.value = errorMsg
+      if (!err.message?.includes('HTTP error')) {
+        message.error(errorMsg)
+      }
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    loading,
+    error,
+    getWebConfigTemplates,
+    importScriptFromWeb
+  }
+}
diff --git a/frontend/src/views/Scripts.vue b/frontend/src/views/Scripts.vue
index 53f5a02..7346909 100644
--- a/frontend/src/views/Scripts.vue
+++ b/frontend/src/views/Scripts.vue
@@ -1,24 +1,23 @@
 <template>
-
-    <div class="scripts-header">
-      <div class="header-title">
-        <h1>脚本管理</h1>
-      </div>
-      <a-space size="middle">
-        <a-button type="primary" size="large" @click="handleAddScript" class="link">
-          <template #icon>
-            <PlusOutlined />
-          </template>
-          新建脚本
-        </a-button>
-        <a-button size="large" @click="handleRefresh" class="default">
-          <template #icon>
-            <ReloadOutlined />
-          </template>
-          刷新
-        </a-button>
-      </a-space>
+  <div class="scripts-header">
+    <div class="header-title">
+      <h1>脚本管理</h1>
     </div>
+    <a-space size="middle">
+      <a-button type="primary" size="large" @click="handleAddScript" class="link">
+        <template #icon>
+          <PlusOutlined />
+        </template>
+        新建脚本
+      </a-button>
+      <a-button size="large" @click="handleRefresh" class="default">
+        <template #icon>
+          <ReloadOutlined />
+        </template>
+        刷新
+      </a-button>
+    </a-space>
+  </div>
   <!-- 如果没有脚本，显示占位符 -->
   <div v-if="scripts.length === 0" class="placeholder-container">
     <div class="placeholder-content">
@@ -33,19 +32,18 @@
     </div>
   </div>
 
-    <ScriptTable
-      :scripts="scripts"
-      :active-connections="activeConnections"
-      @edit="handleEditScript"
-      @delete="handleDeleteScript"
-      @add-user="handleAddUser"
-      @edit-user="handleEditUser"
-      @delete-user="handleDeleteUser"
-      @maa-config="handleMAAConfig"
-      @disconnect-maa="handleDisconnectMAA"
-      @toggle-user-status="handleToggleUserStatus"
-    />
-
+  <ScriptTable
+    :scripts="scripts"
+    :active-connections="activeConnections"
+    @edit="handleEditScript"
+    @delete="handleDeleteScript"
+    @add-user="handleAddUser"
+    @edit-user="handleEditUser"
+    @delete-user="handleDeleteUser"
+    @maa-config="handleMAAConfig"
+    @disconnect-maa="handleDisconnectMAA"
+    @toggle-user-status="handleToggleUserStatus"
+  />
 
   <!-- 脚本类型选择弹窗 -->
   <a-modal
@@ -86,32 +84,207 @@
       </a-radio-group>
     </div>
   </a-modal>
+
+  <!-- 通用脚本创建方式选择弹窗 -->
+  <a-modal
+    v-model:open="generalModeSelectVisible"
+    title="选择创建方式"
+    :confirm-loading="addLoading"
+    @ok="handleConfirmGeneralMode"
+    @cancel="generalModeSelectVisible = false"
+    class="general-mode-modal"
+    width="600px"
+    ok-text="确定"
+    cancel-text="返回"
+  >
+    <div class="mode-selection">
+      <a-radio-group v-model:value="selectedGeneralMode" class="mode-radio-group">
+        <a-radio-button value="template" class="mode-option">
+          <div class="mode-content">
+            <div class="mode-icon">
+              <FileTextOutlined />
+            </div>
+            <div class="mode-info">
+              <div class="mode-title">从模板创建</div>
+              <div class="mode-description">选择现有的配置模板快速创建脚本</div>
+            </div>
+          </div>
+        </a-radio-button>
+        <a-radio-button value="custom" class="mode-option">
+          <div class="mode-content">
+            <div class="mode-icon">
+              <SettingOutlined />
+            </div>
+            <div class="mode-info">
+              <div class="mode-title">自定义配置</div>
+              <div class="mode-description">从空白配置开始，完全自定义脚本设置</div>
+            </div>
+          </div>
+        </a-radio-button>
+      </a-radio-group>
+    </div>
+  </a-modal>
+
+  <!-- 模板选择弹窗 -->
+  <a-modal
+    v-model:open="templateSelectVisible"
+    title="选择配置模板"
+    :confirm-loading="templateLoading"
+    @ok="handleConfirmTemplate"
+    @cancel="handleCancelTemplate"
+    class="template-select-modal"
+    width="1000px"
+    ok-text="使用此模板"
+    cancel-text="返回"
+    :ok-button-props="{ disabled: !selectedTemplate }"
+  >
+    <div class="template-selection">
+      <a-spin :spinning="templateLoading">
+        <div v-if="templates.length === 0 && !templateLoading" class="no-templates">
+          <div class="no-templates-content">
+            <FileSearchOutlined class="no-templates-icon" />
+            <h3>暂无可用模板</h3>
+            <p>当前没有找到任何配置模板，请稍后再试或联系管理员</p>
+          </div>
+        </div>
+        <div v-else class="templates-container">
+          <div class="templates-header">
+            <div class="templates-count">
+              <span class="count-badge">{{ filteredTemplates.length }}</span>
+              <span class="count-text">个可用模板</span>
+            </div>
+            <div class="search-container">
+              <a-input
+                v-model:value="searchKeyword"
+                placeholder="搜索模板名称、作者或描述..."
+                allow-clear
+                class="template-search"
+              >
+                <template #prefix>
+                  <FileSearchOutlined />
+                </template>
+              </a-input>
+            </div>
+          </div>
+          <div class="templates-list">
+            <div v-if="filteredTemplates.length === 0" class="no-search-results">
+              <FileSearchOutlined class="no-results-icon" />
+              <p>未找到匹配的模板</p>
+              <p class="no-results-tip">请尝试其他关键词</p>
+            </div>
+            <div
+              v-for="template in filteredTemplates"
+              :key="template.configName"
+              :class="[
+                'template-item',
+                { selected: selectedTemplate?.configName === template.configName },
+              ]"
+              @click="selectedTemplate = template"
+            >
+              <div class="template-content">
+                <div class="template-header">
+                  <div class="template-info">
+                    <h3 class="template-name">{{ template.configName }}</h3>
+                    <div class="template-meta">
+                      <span class="template-author">
+                        <UserOutlined />
+                        {{ template.author || '未知作者' }}
+                      </span>
+                      <span class="template-time">
+                        <ClockCircleOutlined />
+                        {{ template.createTime || '未知时间' }}
+                      </span>
+                    </div>
+                  </div>
+                  <!--                  <div class="template-selector">-->
+                  <!--                    <a-radio :checked="selectedTemplate?.configName === template.configName" />-->
+                  <!--                  </div>-->
+                </div>
+
+                <div
+                  class="template-description"
+                  v-html="parseMarkdown(template.description)"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-spin>
+    </div>
+  </a-modal>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted } from 'vue'
+import { onMounted, ref, onUnmounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
-import { PlusOutlined, ReloadOutlined } from '@ant-design/icons-vue'
+import {
+  PlusOutlined,
+  ReloadOutlined,
+  FileTextOutlined,
+  SettingOutlined,
+  ClockCircleOutlined,
+  FileSearchOutlined,
+  UserOutlined,
+  CheckCircleFilled,
+} from '@ant-design/icons-vue'
 import ScriptTable from '@/components/ScriptTable.vue'
 import type { Script, ScriptType, User } from '@/types/script'
 import { useScriptApi } from '@/composables/useScriptApi'
 import { useUserApi } from '@/composables/useUserApi'
 import { useWebSocket } from '@/composables/useWebSocket'
+import { useTemplateApi, type WebConfigTemplate } from '@/composables/useTemplateApi'
+import MarkdownIt from 'markdown-it'
 
 const router = useRouter()
 const { addScript, deleteScript, getScriptsWithUsers, loading } = useScriptApi()
 const { addUser, updateUser, deleteUser, loading: userLoading } = useUserApi()
 const { connect, disconnect, disconnectAll } = useWebSocket()
+const { getWebConfigTemplates, importScriptFromWeb, loading: templateApiLoading } = useTemplateApi()
+
+// 初始化markdown解析器
+const md = new MarkdownIt({
+  html: false,
+  linkify: true,
+  typographer: true,
+})
 
 const scripts = ref<Script[]>([])
 const typeSelectVisible = ref(false)
+const generalModeSelectVisible = ref(false)
+const templateSelectVisible = ref(false)
 const selectedType = ref<ScriptType>('MAA')
+const selectedGeneralMode = ref('template')
+const selectedTemplate = ref<WebConfigTemplate | null>(null)
+const templates = ref<WebConfigTemplate[]>([])
 const addLoading = ref(false)
+const templateLoading = ref(false)
+const searchKeyword = ref('')
 
 // WebSocket连接管理
 const activeConnections = ref<Map<string, string>>(new Map()) // scriptId -> websocketId
 
+// 解析模板描述的markdown
+const parseMarkdown = (text: string) => {
+  if (!text) return '暂无描述信息'
+  return md.render(text)
+}
+
+// 过滤模板
+const filteredTemplates = computed(() => {
+  if (!searchKeyword.value.trim()) {
+    return templates.value
+  }
+
+  const keyword = searchKeyword.value.toLowerCase()
+  return templates.value.filter(
+    template =>
+      template.configName.toLowerCase().includes(keyword) ||
+      (template.author && template.author.toLowerCase().includes(keyword)) ||
+      (template.description && template.description.toLowerCase().includes(keyword))
+  )
+})
+
 onMounted(() => {
   loadScripts()
 })
@@ -146,6 +319,14 @@ const handleAddScript = () => {
 }
 
 const handleConfirmAddScript = async () => {
+  if (selectedType.value === 'General') {
+    // 如果选择通用脚本，进入创建方式选择
+    typeSelectVisible.value = false
+    generalModeSelectVisible.value = true
+    return
+  }
+
+  // MAA脚本直接创建
   addLoading.value = true
   try {
     const result = await addScript(selectedType.value)
@@ -171,6 +352,105 @@ const handleConfirmAddScript = async () => {
   }
 }
 
+const handleConfirmGeneralMode = async () => {
+  if (selectedGeneralMode.value === 'template') {
+    // 加载模板列表并打开模板选择弹窗
+    await loadTemplates()
+    generalModeSelectVisible.value = false
+    templateSelectVisible.value = true
+  } else {
+    // 自定义配置 - 直接创建通用脚本
+    generalModeSelectVisible.value = false
+    addLoading.value = true
+    try {
+      const result = await addScript('General')
+      if (result) {
+        message.success(result.message)
+        router.push({
+          path: `/scripts/${result.scriptId}/edit`,
+          state: {
+            scriptData: {
+              id: result.scriptId,
+              type: 'General',
+              config: result.data,
+            },
+          },
+        })
+      }
+    } catch (error) {
+      console.error('添加脚本失败:', error)
+    } finally {
+      addLoading.value = false
+    }
+  }
+}
+
+const loadTemplates = async () => {
+  templateLoading.value = true
+  try {
+    templates.value = await getWebConfigTemplates()
+    selectedTemplate.value = null
+  } catch (error) {
+    console.error('加载模板列表失败:', error)
+  } finally {
+    templateLoading.value = false
+  }
+}
+
+const handleConfirmTemplate = async () => {
+  if (!selectedTemplate.value) {
+    message.warning('请先选择一个模板')
+    return
+  }
+
+  templateLoading.value = true
+  try {
+    // 1. 先创建通用脚本
+    const createResult = await addScript('General')
+    if (!createResult) {
+      return
+    }
+
+    // 2. 使用模板URL导入配置
+    const importResult = await importScriptFromWeb(
+      createResult.scriptId,
+      selectedTemplate.value.downloadUrl
+    )
+
+    if (importResult) {
+      message.success(`已根据模板 "${selectedTemplate.value.configName}" 创建脚本`)
+      templateSelectVisible.value = false
+      selectedTemplate.value = null
+
+      // 刷新脚本列表
+      await loadScripts()
+
+      // 跳转到编辑页面
+      router.push({
+        path: `/scripts/${createResult.scriptId}/edit`,
+        state: {
+          scriptData: {
+            id: createResult.scriptId,
+            type: 'General',
+            config: createResult.data,
+          },
+        },
+      })
+    }
+  } catch (error) {
+    console.error('使用模板创建脚本失败:', error)
+  } finally {
+    templateLoading.value = false
+  }
+}
+
+const handleCancelTemplate = () => {
+  templateSelectVisible.value = false
+  selectedTemplate.value = null
+  // 返回到创建方式选择
+  generalModeSelectVisible.value = true
+}
+
 const handleEditScript = (script: Script) => {
   // 跳转到独立的编辑页面
   router.push(`/scripts/${script.id}/edit`)
@@ -199,7 +479,6 @@ const handleEditUser = (user: User) => {
     message.error('找不到对应的脚本')
   }
 }
-
 const handleDeleteUser = async (user: User) => {
   // 从用户数据中找到对应的脚本
   const script = scripts.value.find(s => s.users.some(u => u.id === user.id))
@@ -238,19 +517,19 @@ const handleMAAConfig = async (script: Script) => {
       taskId: script.id,
       mode: '设置脚本',
       showNotifications: true,
-      onStatusChange: (status) => {
+      onStatusChange: status => {
         console.log(`脚本 ${script.name} 连接状态: ${status}`)
       },
-      onMessage: (data) => {
+      onMessage: data => {
         console.log(`脚本 ${script.name} 收到消息:`, data)
         // 这里可以根据需要处理特定的消息
       },
-      onError: (error) => {
+      onError: error => {
         console.error(`脚本 ${script.name} 连接错误:`, error)
         message.error(`MAA配置连接失败: ${error}`)
         // 清理连接记录
         activeConnections.value.delete(script.id)
-      }
+      },
     })
 
     if (websocketId) {
@@ -259,13 +538,16 @@ const handleMAAConfig = async (script: Script) => {
       message.success(`已开始配置 ${script.name}`)
 
       // 可选：设置自动断开连接的定时器（比如30分钟后）
-      setTimeout(() => {
-        if (activeConnections.value.has(script.id)) {
-          disconnect(websocketId)
-          activeConnections.value.delete(script.id)
-          message.info(`${script.name} 配置会话已超时断开`)
-        }
-      }, 30 * 60 * 1000) // 30分钟
+      setTimeout(
+        () => {
+          if (activeConnections.value.has(script.id)) {
+            disconnect(websocketId)
+            activeConnections.value.delete(script.id)
+            message.info(`${script.name} 配置会话已超时断开`)
+          }
+        },
+        30 * 60 * 1000
+      ) // 30分钟
     }
   } catch (error) {
     console.error('MAA配置失败:', error)
@@ -310,7 +592,6 @@ const handleToggleUserStatus = async (user: User) => {
     message.error('切换用户状态失败')
   }
 }
-
 </script>
 
 <style scoped>
@@ -458,6 +739,249 @@ const handleToggleUserStatus = async (user: User) => {
   line-height: 1.5;
 }
 
+/* 通用脚本创建方式选择弹窗样式 */
+.general-mode-select-modal :deep(.ant-modal-content) {
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--ant-color-bg-container);
+}
+
+.general-mode-select-modal :deep(.ant-modal-header) {
+  background: var(--ant-color-bg-container);
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+  padding: 24px 32px 20px;
+}
+
+.general-mode-select-modal :deep(.ant-modal-title) {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+}
+
+.general-mode-select-modal :deep(.ant-modal-body) {
+  padding: 32px;
+}
+
+.mode-selection {
+  margin: 16px 0;
+}
+
+.mode-radio-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mode-radio-group :deep(.ant-radio-button-wrapper) {
+  height: auto;
+  padding: 0;
+  border: 2px solid var(--ant-color-border);
+  border-radius: 12px;
+  background: var(--ant-color-bg-container);
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.mode-radio-group :deep(.ant-radio-button-wrapper:hover) {
+  border-color: var(--ant-color-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
+}
+
+.mode-radio-group :deep(.ant-radio-button-wrapper-checked) {
+  border-color: var(--ant-color-primary);
+  background: var(--ant-color-primary-bg);
+  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
+}
+
+.mode-radio-group :deep(.ant-radio-button-wrapper::before) {
+  display: none;
+}
+
+.mode-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-radius: 12px;
+  background: var(--ant-color-bg-elevated);
+  border: 1px solid var(--ant-color-border-secondary);
+  transition: all 0.3s ease;
+}
+
+.mode-content:hover {
+  border-color: var(--ant-color-primary);
+  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
+}
+
+/* 模板选择弹窗样式 */
+.template-select-modal :deep(.ant-modal-content) {
+  border-radius: 20px;
+  overflow: hidden;
+  background: var(--ant-color-bg-container);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
+}
+
+.template-select-modal :deep(.ant-modal-header) {
+  background: linear-gradient(135deg, var(--ant-color-bg-container), var(--ant-color-primary-bg));
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+  padding: 28px 36px 24px;
+}
+
+.template-select-modal :deep(.ant-modal-title) {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--ant-color-text);
+  background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.template-select-modal :deep(.ant-modal-body) {
+  padding: 0 36px 36px;
+  background: var(--ant-color-bg-layout);
+}
+
+.template-selection {
+  margin: 0;
+}
+
+.template-list {
+  width: 100%;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.template-item {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  border: 2px solid var(--ant-color-border);
+  background: var(--ant-color-bg-container);
+}
+
+.template-item:hover {
+  border-color: var(--ant-color-primary);
+  background: var(--ant-color-primary-bg);
+  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
+}
+
+.template-item.selected {
+  border-color: var(--ant-color-primary);
+  background: var(--ant-color-primary-bg);
+  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
+}
+
+.template-item-content {
+  padding: 16px 20px;
+}
+
+.template-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.template-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+}
+
+.template-author {
+  font-size: 14px;
+  color: var(--ant-color-text-secondary);
+}
+
+.template-description {
+  font-size: 14px;
+  color: var(--ant-color-text-secondary);
+  margin: 8px 0;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.template-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.template-time {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.no-templates {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  background: var(--ant-color-bg-container);
+  border-radius: 16px;
+  margin-top: 20px;
+}
+
+.no-templates-content {
+  text-align: center;
+  padding: 40px;
+  max-width: 400px;
+}
+
+.no-templates-icon {
+  font-size: 64px;
+  color: var(--ant-color-text-tertiary);
+  margin-bottom: 24px;
+  opacity: 0.6;
+}
+
+.no-templates-content h3 {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin: 0 0 12px;
+}
+
+.no-templates-content p {
+  font-size: 14px;
+  color: var(--ant-color-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.mode-icon {
+  font-size: 20px;
+  color: var(--ant-color-primary);
+}
+
+.mode-info {
+  flex: 1;
+}
+
+.mode-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin-bottom: 4px;
+}
+
+.mode-description {
+  font-size: 14px;
+  color: var(--ant-color-text-secondary);
+  line-height: 1.4;
+}
+
 /* 深色模式适配 */
 @media (prefers-color-scheme: dark) {
   .scripts-content {
@@ -516,30 +1040,405 @@ const handleToggleUserStatus = async (user: User) => {
   .type-title {
     font-size: 16px;
   }
+
+  /* 模板选择弹窗响应式 */
+  .template-select-modal {
+    width: 95vw !important;
+    max-width: 600px;
+  }
+
+  .template-select-modal :deep(.ant-modal-body) {
+    padding: 0 20px 20px;
+  }
+
+  .templates-container {
+    padding: 16px;
+  }
+
+  .templates-list {
+    max-height: 350px;
+  }
+
+  .templates-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .search-container {
+    max-width: none;
+    margin-left: 0;
+  }
+
+  .templates-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  .template-card-header {
+    padding: 20px;
+  }
+
+  .template-card-body {
+    padding: 20px;
+    min-height: 120px;
+  }
+
+  .template-card-footer {
+    padding: 16px 20px;
+  }
+
+  .template-title {
+    font-size: 16px;
+  }
 }
-.placeholder-container {
+
+/* 模板容器样式 */
+.templates-container {
+  background: var(--ant-color-bg-container);
+  border-radius: 12px;
+  padding: 20px;
+  margin-top: 16px;
+}
+
+.templates-header {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  height: 400px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
-.placeholder-content {
-  text-align: center;
-  max-width: 500px;
+.templates-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.placeholder-content h2 {
-  font-size: 24px;
+.count-badge {
+  background: var(--ant-color-primary);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
   font-weight: 600;
+  min-width: 20px;
+  text-align: center;
+}
+
+.count-text {
+  font-size: 14px;
+  font-weight: 500;
   color: var(--ant-color-text);
+}
+
+.search-container {
+  flex: 1;
+  max-width: 300px;
+  margin-left: 16px;
+}
+
+.template-search {
+  width: 100%;
+}
+
+/* 模板列表布局 */
+.templates-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 450px;
+  overflow-y: auto;
+  /* 隐藏滚动条 */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+}
+
+.templates-list::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari and Opera */
+}
+
+.template-item {
+  background: var(--ant-color-bg-elevated);
+  border: 1px solid var(--ant-color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.template-item:hover {
+  border-color: var(--ant-color-primary);
+  background: var(--ant-color-bg-container);
+}
+
+.template-item.selected {
+  border-color: var(--ant-color-primary);
+  background: var(--ant-color-primary-bg);
+  box-shadow: 0 0 0 1px var(--ant-color-primary-border);
+}
+
+.template-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.05), rgba(24, 144, 255, 0.02));
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+  position: relative;
+}
+
+.template-icon-wrapper {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover));
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.template-icon-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
+  border-radius: 16px;
+}
+
+.template-icon {
+  font-size: 20px;
+  color: white;
+  z-index: 1;
+}
+
+.template-badge {
+  background: var(--ant-color-success);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.badge-text {
+  font-size: 12px;
+}
+
+.template-card-body {
+  padding: 24px;
+  min-height: 140px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.template-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
   margin-bottom: 16px;
 }
 
-.placeholder-content p {
-  font-size: 16px;
+.template-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ant-color-text);
+  margin: 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  flex: 1;
+  margin-right: 12px;
+}
+
+.selected-indicator {
+  flex-shrink: 0;
+}
+
+.selected-icon {
+  font-size: 20px;
+  color: var(--ant-color-success);
+  animation: checkmark 0.3s ease-in-out;
+}
+
+@keyframes checkmark {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.template-description {
+  font-size: 14px;
   color: var(--ant-color-text-secondary);
-  margin-bottom: 24px;
-  line-height: 1.5;
+  line-height: 1.6;
+  margin: 0;
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.template-card-footer {
+  padding: 20px 24px;
+  background: rgba(0, 0, 0, 0.02);
+  border-top: 1px solid var(--ant-color-border-secondary);
+  margin-top: auto;
+}
+
+.template-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
+}
+
+.meta-icon {
+  font-size: 14px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.meta-text {
+  font-weight: 500;
+}
+
+/* 新的模板项样式 */
+.template-content {
+  padding: 12px 16px;
+}
+
+.template-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+}
+
+.template-info {
+  flex: 1;
+}
+
+.template-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin: 0 0 6px 0;
+  line-height: 1.3;
+}
+
+.template-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 11px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.template-author,
+.template-time {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.template-selector {
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.template-description {
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
+  line-height: 1.4;
+  margin-top: 4px;
+}
+
+.template-description :deep(p) {
+  margin: 0 0 6px 0;
+}
+
+.template-description :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.template-description :deep(code) {
+  background: var(--ant-color-bg-layout);
+  padding: 1px 3px;
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.template-description :deep(strong) {
+  font-weight: 600;
+  color: var(--ant-color-text);
+}
+
+.template-description :deep(em) {
+  font-style: italic;
+}
+
+.template-description :deep(ul),
+.template-description :deep(ol) {
+  margin: 6px 0;
+  padding-left: 16px;
+}
+
+.template-description :deep(li) {
+  margin: 2px 0;
+}
+
+/* 搜索无结果样式 */
+.no-search-results {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--ant-color-text-secondary);
+}
+
+.no-results-icon {
+  font-size: 48px;
+  color: var(--ant-color-text-tertiary);
+  margin-bottom: 16px;
+  opacity: 0.6;
+}
+
+.no-search-results p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+}
+
+.no-results-tip {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
 }
 </style>