Zkit工具站

2025-12-03 23:25:57 +08:00
commit 105bedc0ec
67 changed files with 17487 additions and 0 deletions
--- a/Zkit-C/src/views/PdfView.vue
+++ b/Zkit-C/src/views/PdfView.vue
@@ -0,0 +1,131 @@
+<script setup>
+import { useUserStore } from '@/stores/user'
+
+const userStore = useUserStore()
+
+const handleUpgrade = () => {
+  if(confirm('确认支付 9.9元 开通 VIP？')) {
+    userStore.upgradeVip()
+    alert('支付成功！')
+  }
+}
+</script>
+
+<template>
+  <div class="container layout-grid">
+    <main>
+      <div class="ad-banner">VIP 页顶部广告</div>
+      
+      <div class="tool-content tool-locked">
+        <!-- 真实内容 (根据权限决定是否模糊) -->
+        <div :class="{ 'content-blur': !userStore.isLoggedIn || !userStore.isVip }">
+          <h1>PDF 转 Word</h1>
+          <div class="upload-area">
+            <i class="fa-solid fa-cloud-upload-alt upload-icon"></i>
+            <p>点击上传 PDF 文件</p>
+          </div>
+          <button class="btn-full">开始转换</button>
+        </div>
+
+        <!-- 遮罩层 -->
+        <div v-if="!userStore.isLoggedIn" class="modal-overlay lock-overlay">
+          <div class="lock-content">
+            <i class="fa-solid fa-lock lock-icon"></i>
+            <h3>请登录后使用</h3>
+            <button class="btn-login" @click="userStore.openModal()">立即登录</button>
+          </div>
+        </div>
+
+        <div v-else-if="!userStore.isVip" class="modal-overlay lock-overlay">
+          <div class="lock-content">
+            <i class="fa-solid fa-crown vip-icon"></i>
+            <h3>会员专享功能</h3>
+            <button class="btn-full btn-upgrade" @click="handleUpgrade">升级 VIP (¥9.9)</button>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <aside>
+       <div class="vip-promo">
+          <h3>升级 VIP</h3>
+          <p>解锁所有高级功能，去除广告。</p>
+       </div>
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.tool-locked {
+  position: relative;
+  overflow: hidden;
+}
+
+.content-blur {
+  filter: blur(5px);
+  pointer-events: none;
+}
+
+.upload-area {
+  border: 2px dashed var(--border-color);
+  padding: 50px;
+  text-align: center;
+  margin-top: 30px;
+  border-radius: 12px;
+  background: var(--bg-body);
+}
+
+.upload-icon {
+  font-size: 3rem;
+  color: var(--text-placeholder);
+}
+
+.lock-overlay {
+  position: absolute;
+}
+
+.lock-content {
+  text-align: center;
+}
+
+.lock-icon {
+  font-size: 3rem;
+  color: var(--text-sub);
+}
+
+.vip-icon {
+  font-size: 3rem;
+  color: #f59e0b;
+}
+
+.btn-upgrade {
+  background: #f59e0b;
+}
+
+.vip-promo {
+  background: #fff7ed;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid #fed7aa;
+}
+
+.vip-promo h3 {
+  color: #d97706;
+}
+
+.vip-promo p {
+  font-size: 0.9rem;
+  color: #d97706;
+  margin-top: 10px;
+}
+
+html.dark .vip-promo {
+  background: rgba(217, 119, 6, 0.1);
+  border-color: rgba(217, 119, 6, 0.3);
+}
+
+html.dark .vip-promo h3,
+html.dark .vip-promo p {
+  color: #fbbf24;
+}
+</style>