archive/qiu-mo-jetbrains-help
1
0
Fork 0
mirror of https://gitee.com/guoyifanA/qiu-mo-jetbrains-help.git synced 2026-09-26 00:21:54 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
957a342624709f1cbd76674c69d44fd1fc1e22f5
qiu-mo-jetbrains-help/src/main/resources/static/index.html
T
M0914 957a342624 前端控制台报警修复
2025-09-12 16:38:25 +08:00

529 lines
29 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QiuMo JetBrains Help - JetBrains激活助手</title>
<link rel='shortcut icon' href='/images/favicon.png'>
<link rel='icon' href='/images/favicon.png'>
<link rel='apple-touch-icon-precomposed' href='/images/favicon.png'>
<meta name='msapplication-TileImage' content='/images/favicon.png'>
<!-- 核心技术栈 -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- Vue.js 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 自定义样式 -->
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/sponsor.css" />
</head>
<body class="bg-gray-50">
<div id="app">
<!-- 配置模态框 -->
<transition name="modal">
<div v-if="showConfigModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
<div class="bg-white rounded-2xl p-8 w-full max-w-md shadow-2xl">
<div class="text-center mb-6">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-cog text-white text-2xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-2">初始配置</h2>
<p class="text-gray-600">请配置您的许可证信息</p>
</div>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">许可证名称</label>
<input
v-model="config.licenseName"
type="text"
placeholder="请输入许可证名称"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">被许可人</label>
<input
v-model="config.assigneeName"
type="text"
placeholder="请输入被许可人姓名"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" />
</div>
<button
@click="saveConfig"
:disabled="!config.licenseName || !config.assigneeName"
class="w-full btn-primary text-white py-3 px-6 rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed">
保存配置
</button>
</div>
</div>
</div>
</transition>
<!-- 主导航 -->
<nav class="glass sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
<i class="fas fa-rocket text-white text-lg"></i>
</div>
<h1 class="text-xl font-bold gradient-text">QiuMo JetBrains Help</h1>
</div>
<div class="flex items-center space-x-6">
<nav class="hidden md:flex space-x-8">
<a
v-for="item in navItems"
:key="item.id"
@click="navigateTo(item.id)"
:class="['cursor-pointer transition-colors font-medium', currentPage === item.id ? 'text-purple-600' : 'text-gray-600 hover:text-purple-600']">
<i :class="item.icon + ' mr-2'"></i>{{ item.name }}
</a>
</nav>
<button @click="showConfigModal = true" class="p-2 text-gray-600 hover:text-purple-600 transition-colors" title="配置">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- 移动端导航 -->
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40">
<div class="flex">
<button
v-for="item in navItems"
:key="item.id"
@click="navigateTo(item.id)"
:class="['flex-1 py-3 px-2 text-center transition-colors', currentPage === item.id ? 'text-purple-600 bg-purple-50' : 'text-gray-600']">
<i :class="item.icon + ' block text-lg mb-1'"></i>
<span class="text-xs">{{ item.name }}</span>
</button>
</div>
</div>
<!-- 页面内容 -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-24 md:pb-8">
<transition name="fade" mode="out-in">
<div :key="currentPage">
<!-- 首页 -->
<div v-if="currentPage === 'home'">
<div class="text-center mb-8 md:mb-12">
<h2 class="home-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">欢迎使用 <span class="gradient-text">JetBrains 激活助手</span></h2>
<p class="home-subtitle text-base md:text-lg text-gray-600 max-w-2xl mx-auto px-4">为您提供便捷的 JetBrains 产品激活解决方案，支持激活码和许可证服务器两种激活方式</p>
</div>
<!-- 当前配置信息 -->
<div class="home-section bg-white rounded-2xl p-4 md:p-6 shadow-lg mb-6 md:mb-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-900">当前配置</h3>
<button @click="showConfigModal = true" class="text-sm text-purple-600 hover:text-purple-700 font-medium"><i class="fas fa-edit mr-1"></i>修改配置</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
<i class="fas fa-certificate text-purple-600"></i>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-gray-500">许可证名称</p>
<p class="font-medium text-gray-900 truncate">{{ config.licenseName || '未设置' }}</p>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
<i class="fas fa-user text-blue-600"></i>
</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-gray-500">被许可人</p>
<p class="font-medium text-gray-900 truncate">{{ config.assigneeName || '未设置' }}</p>
</div>
</div>
</div>
</div>
<!-- 代理工具下载说明 -->
<div class="home-section bg-white rounded-2xl p-4 md:p-8 shadow-lg mb-6 md:mb-8">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-gradient-to-r from-indigo-400 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-download text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">必备代理工具</h3>
<p class="text-gray-600 text-sm md:text-base px-2">激活前必须先下载并配置 ja-netfilter 代理工具</p>
</div>
<div class="config-section">
<h4 class="font-semibold text-gray-900 mb-3">配置步骤：</h4>
<div class="space-y-4 text-sm text-gray-700">
<div class="flex flex-col sm:flex-row sm:items-start space-y-2 sm:space-y-0 sm:space-x-3 config-step">
<span class="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">1</span>
<div class="config-step-content">
<p>下载并解压 ja-netfilter 工具包</p>
</div>
</div>
<div class="flex flex-col sm:flex-row sm:items-start space-y-2 sm:space-y-0 sm:space-x-3 config-step">
<span class="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">2</span>
<div class="config-step-content">
<p class="mb-2">在 IDE 的 VM options 中添加以下配置：</p>
<div class="config-code">
-javaagent:插件解压路径\ja-netfilter\ja-netfilter.jar<br />--add-opens=java.base/jdk.internal.org.objectweb.asm=ALL-UNNAMED<br />
--add-opens=java.base/jdk.internal.org.objectweb.asm.tree=ALL-UNNAMED
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row sm:items-start space-y-2 sm:space-y-0 sm:space-x-3 config-step">
<span class="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">3</span>
<div class="config-step-content">
<p>重启 IDE 后即可使用激活功能</p>
</div>
</div>
</div>
</div>
<button @click="downloadAgent" class="w-full btn-primary text-white py-3 px-6 rounded-lg font-medium mt-6"><i class="fas fa-download mr-2"></i>下载 ja-netfilter 工具</button>
</div>
<!-- 激活方式 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-8 mb-8 md:mb-12">
<!-- 激活码激活 -->
<div class="home-section bg-white rounded-2xl p-6 md:p-8 shadow-lg card-hover">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-key text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">激活码激活</h3>
<p class="text-gray-600 text-sm md:text-base">生成产品激活码直接激活</p>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span class="text-green-600 text-sm font-bold">1</span>
</div>
<p class="text-gray-700 text-sm md:text-base">选择需要激活的产品或插件</p>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span class="text-green-600 text-sm font-bold">2</span>
</div>
<p class="text-gray-700 text-sm md:text-base">设置许可证到期时间</p>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span class="text-green-600 text-sm font-bold">3</span>
</div>
<p class="text-gray-700 text-sm md:text-base">生成激活码并在软件中输入</p>
</div>
</div>
<div class="mt-6 space-y-3">
<button @click="navigateTo('products')" class="w-full btn-primary text-white py-3 px-6 rounded-lg font-medium"><i class="fas fa-cube mr-2"></i>激活产品</button>
<button @click="navigateTo('plugins')" class="w-full bg-gray-100 text-gray-700 py-3 px-6 rounded-lg font-medium hover:bg-gray-200 transition-colors">
<i class="fas fa-puzzle-piece mr-2"></i>激活插件
</button>
</div>
</div>
<!-- 服务器激活 -->
<div class="home-section bg-white rounded-2xl p-6 md:p-8 shadow-lg card-hover">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-server text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">服务器激活</h3>
<p class="text-gray-600 text-sm md:text-base">配置许可证服务器统一激活</p>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span class="text-purple-600 text-sm font-bold">1</span>
</div>
<p class="text-gray-700 text-sm md:text-base">下载并配置 ja-netfilter 代理</p>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span class="text-purple-600 text-sm font-bold">2</span>
</div>
<p class="text-gray-700 text-sm md:text-base">在软件中配置许可证服务器地址</p>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
<span class="text-purple-600 text-sm font-bold">3</span>
</div>
<p class="text-gray-700 text-sm md:text-base">启动软件自动获取许可证</p>
</div>
</div>
<div class="mt-6">
<div class="bg-gray-50 rounded-lg p-4 mb-4">
<p class="text-sm text-gray-600 mb-2">许可证服务器地址：</p>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<input :value="serverUrl" readonly class="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm min-w-0" />
<button @click="copyToClipboard(serverUrl)" class="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors whitespace-nowrap" title="复制">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- JRebel 特殊说明 -->
<div class="home-section bg-gradient-to-r from-orange-400 to-red-500 rounded-2xl p-6 md:p-8 text-white">
<div class="flex flex-col sm:flex-row sm:items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
<div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center flex-shrink-0">
<i class="fas fa-fire text-2xl"></i>
</div>
<div class="text-center sm:text-left">
<h3 class="text-xl font-bold">JRebel 专属激活</h3>
<p class="opacity-90 text-sm md:text-base">JRebel 仅支持服务器激活模式</p>
</div>
</div>
<button @click="navigateTo('jrebel')" class="w-full bg-white text-orange-600 py-3 px-6 rounded-lg font-medium hover:bg-gray-50 transition-colors">
<i class="fas fa-arrow-right mr-2"></i>前往 JRebel 激活
</button>
</div>
</div>
<!-- 产品页面 -->
<div v-else-if="currentPage === 'products'">
<div class="mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4">JetBrains 产品</h2>
<p class="text-gray-600 mb-6">选择需要激活的 JetBrains 产品</p>
<!-- 搜索框 -->
<div class="search-container max-w-md">
<i class="fas fa-search search-icon"></i>
<input
v-model="searchQuery"
type="text"
placeholder="搜索产品..."
class="search-input w-full px-8 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" />
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="product in filteredProducts" :key="product.productCode" class="bg-white rounded-2xl p-6 shadow-lg card-hover cursor-pointer" @click="selectProduct(product)">
<div class="text-center">
<div class="w-16 h-16 mx-auto mb-4 rounded-2xl overflow-hidden">
<img :src="getProductIcon(product)" :alt="product.name" class="w-full h-full object-contain" @error="$event.target.src='/images/plugin.svg'" />
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">{{ product.name }}</h3>
<p class="text-gray-600 text-sm mb-4">{{ product.description || '专业的开发工具' }}</p>
<button class="w-full btn-primary text-white py-2 px-4 rounded-lg font-medium">生成激活码</button>
</div>
</div>
</div>
<div v-if="filteredProducts.length === 0" class="text-center py-12">
<i class="fas fa-search text-gray-400 text-4xl mb-4"></i>
<p class="text-gray-500">没有找到匹配的产品</p>
</div>
</div>
<!-- 插件页面 -->
<div v-else-if="currentPage === 'plugins'">
<div class="mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4">JetBrains 插件</h2>
<p class="text-gray-600 mb-6">选择需要激活的 JetBrains 付费插件</p>
<!-- 搜索框 -->
<div class="search-container max-w-md">
<i class="fas fa-search search-icon"></i>
<input
v-model="searchQuery"
type="text"
placeholder="搜索插件..."
class="search-input w-full px-8 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" />
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="plugin in filteredPlugins" :key="plugin.id" class="bg-white rounded-2xl p-6 shadow-lg card-hover cursor-pointer" @click="selectPlugin(plugin)">
<div class="text-center">
<div class="w-16 h-16 mx-auto mb-4 rounded-2xl overflow-hidden">
<img :src="getPluginIcon(plugin)" :alt="plugin.name" class="w-full h-full object-contain" @error="$event.target.src='/images/plugin.svg'" />
</div>
<h3 class="text-lg font-bold text-gray-900 mb-2">{{ plugin.name }}</h3>
<p class="text-gray-600 text-sm mb-4">{{ plugin.description || '功能强大的插件' }}</p>
<button class="w-full btn-primary text-white py-2 px-4 rounded-lg font-medium">生成激活码</button>
</div>
</div>
</div>
<div v-if="filteredPlugins.length === 0" class="text-center py-12">
<i class="fas fa-search text-gray-400 text-4xl mb-4"></i>
<p class="text-gray-500">没有找到匹配的插件</p>
</div>
</div>
<!-- JRebel页面 -->
<div v-else-if="currentPage === 'jrebel'" class="jrebel-container">
<div class="mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4"><i class="fas fa-fire text-orange-500 mr-3"></i>JRebel 激活</h2>
<p class="text-gray-600">JRebel 仅支持服务器激活模式</p>
</div>
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-lg">
<div class="text-center mb-8">
<div class="w-20 h-20 bg-gradient-to-r from-orange-400 to-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-fire text-white text-3xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-2">JRebel 服务器激活</h3>
<p class="text-gray-600">请按照以下步骤配置 JRebel 服务器激活</p>
</div>
<div class="space-y-6 mb-8">
<div class="flex flex-col sm:flex-row sm:items-start space-y-3 sm:space-y-0 sm:space-x-4">
<div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-orange-600 font-bold">1</span>
</div>
<div class="flex-1 jrebel-step">
<h4 class="font-semibold text-gray-900 mb-2">复制服务器地址</h4>
<div class="bg-gray-50 rounded-lg p-4">
<p class="text-sm text-gray-600 mb-2">JRebel 服务器地址：</p>
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
<input :value="jrebelServerUrl" readonly class="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm min-w-0" />
<button @click="copyToClipboard(jrebelServerUrl)" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors whitespace-nowrap">
<i class="fas fa-copy mr-2"></i>复制
</button>
</div>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row sm:items-start space-y-3 sm:space-y-0 sm:space-x-4">
<div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-orange-600 font-bold">2</span>
</div>
<div class="flex-1 jrebel-step">
<h4 class="font-semibold text-gray-900 mb-2">打开 JRebel 激活界面</h4>
<p class="text-gray-700">在 IDE 中找到 JRebel 插件，选择"Connect to License Server"</p>
</div>
</div>
<div class="flex flex-col sm:flex-row sm:items-start space-y-3 sm:space-y-0 sm:space-x-4">
<div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-orange-600 font-bold">3</span>
</div>
<div class="flex-1 jrebel-step">
<h4 class="font-semibold text-gray-900 mb-2">输入服务器地址</h4>
<p class="text-gray-700">将上述服务器地址粘贴到 JRebel 的服务器地址输入框中</p>
</div>
</div>
<div class="flex flex-col sm:flex-row sm:items-start space-y-3 sm:space-y-0 sm:space-x-4">
<div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-orange-600 font-bold">4</span>
</div>
<div class="flex-1 jrebel-step">
<h4 class="font-semibold text-gray-900 mb-2">完成激活</h4>
<p class="text-gray-700">点击"Activate"按钮完成激活，享受 JRebel 热部署功能</p>
</div>
</div>
</div>
<div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
<div class="flex items-start space-x-3">
<i class="fas fa-info-circle text-orange-600 mt-0.5 flex-shrink-0"></i>
<div>
<h4 class="font-semibold text-orange-800 mb-1">注意事项</h4>
<ul class="text-orange-700 text-sm space-y-1">
<li>• 确保您的网络可以访问本服务器地址</li>
<li>• JRebel 激活后请保持服务器运行状态</li>
<li>• 如有问题，请检查防火墙和网络设置</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 赞助页面 -->
<div v-if="currentPage === 'sponsor'">
<sponsor-component></sponsor-component>
</div>
</div>
</transition>
</main>
<!-- 到期时间配置模态框 -->
<transition name="modal">
<div v-if="showLicenseModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
<div class="bg-white rounded-2xl p-8 w-full max-w-md shadow-2xl">
<div class="text-center mb-6">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4">
<img
v-if="selectedItem"
:src="selectedItem.hasOwnProperty('id') ? getPluginIcon(selectedItem) : getProductIcon(selectedItem)"
:alt="selectedItem?.name"
class="w-8 h-8 object-contain"
@error="$event.target.style.display='none'" />
<i v-if="!selectedItem" class="fas fa-certificate text-white text-2xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-2">生成激活码</h2>
<p class="text-gray-600">{{ selectedItem?.name }}</p>
</div>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">到期时间</label>
<input
v-model="licenseConfig.expiryDate"
type="date"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all" />
</div>
<div class="flex space-x-3">
<button @click="showLicenseModal = false" class="flex-1 bg-gray-100 text-gray-700 py-3 px-6 rounded-lg font-medium hover:bg-gray-200 transition-colors">取消</button>
<button @click="generateLicense" :disabled="isGenerating" class="flex-1 btn-primary text-white py-3 px-6 rounded-lg font-medium disabled:opacity-50">
<i v-if="isGenerating" class="fas fa-spinner loading mr-2"></i>
{{ isGenerating ? '生成中...' : '生成激活码' }}
</button>
</div>
</div>
</div>
</div>
</transition>
<!-- 激活码结果模态框 -->
<transition name="modal">
<div v-if="showResultModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
<div class="bg-white rounded-2xl p-6 md:p-8 w-full max-w-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-check text-green-600 text-2xl"></i>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-2">激活码生成成功</h2>
<p class="text-gray-600">请复制以下激活码到软件中使用</p>
</div>
<div class="mb-6">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-medium text-gray-700">激活码：</span>
<button @click="copyToClipboard(generatedLicense)" class="text-sm text-purple-600 hover:text-purple-700 font-medium"><i class="fas fa-copy mr-1"></i>复制</button>
</div>
<div class="license-code-display">{{ generatedLicense }}</div>
</div>
<button @click="showResultModal = false" class="w-full btn-primary text-white py-3 px-6 rounded-lg font-medium">完成</button>
</div>
</div>
</transition>
<!-- 返回顶部按钮 -->
<div @click="scrollToTop" class="back-to-top" :class="showBackToTop ? 'show' : ''">
<i class="fas fa-arrow-up"></i>
</div>
</div>
<!-- 引入工具函数和应用逻辑 -->
<script src="/js/utils.js"></script>
<script src="/js/sponsor.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink