init

2024-12-09 17:29:54 +08:00
parent 4b017fd936
commit 00630209f1
17 changed files with 729 additions and 259 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,21 +1,137 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
+ 
+@layer base {
  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+ 
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+ 
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+ 
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+ 
+    --radius: 0.5rem;
+ 
+    --chart-1: 12 76% 61%;
+ 
+    --chart-2: 173 58% 39%;
+ 
+    --chart-3: 197 37% 24%;
+ 
+    --chart-4: 43 74% 66%;
+ 
+    --chart-5: 27 87% 67%;
+  }
+ 
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+ 
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+ 
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
  }
 }

-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+.bg-grid-small-white {
+  background-size: 40px 40px;
+  background-image: 
+    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
 }
+
+@keyframes waterDrop {
+  0% {
+    transform: translateY(-50%) scale(1);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(0) scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(50%) scale(1);
+    opacity: 0;
+  }
+}
+
+.water-drop::before,
+.water-drop::after {
+  content: '';
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
+  border-radius: 50%;
+  animation: waterDrop 8s infinite;
+}
+
+.water-drop::before {
+  left: 20%;
+  top: 30%;
+  animation-delay: 0s;
+}
+
+.water-drop::after {
+  right: 20%;
+  bottom: 30%;
+  animation-delay: 4s;
+}
+
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,35 +1,32 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from "next"
+import { Inter } from 'next/font/google'
+import "./globals.css"
+import { cn } from "@/lib/utils"

-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
+const inter = Inter({ subsets: ["latin"] })

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: "KMS 激活指南",
+  description: "Windows KMS 激活步骤指南",
+}

 export default function RootLayout({
  children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="zh" className="dark">
+      <body className={cn(inter.className, "min-h-screen bg-background antialiased")}>
+        <div className="relative flex min-h-screen flex-col">
+          <div className="absolute inset-0 bg-grid-small-white/[0.2] bg-[size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
+          <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,transparent_70%,#000_100%)]" />
+          <div className="relative flex-1 flex-col">
+            {children}
+          </div>
+        </div>
      </body>
    </html>
-  );
+  )
 }
+
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,101 +1,143 @@
-import Image from "next/image";
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { Check, Copy } from 'lucide-react'
+
+export default function KMSActivationGuide() {
+  const [copiedStates, setCopiedStates] = useState({
+    quickAction1: false,
+    quickAction2: false,
+    setKMS: false,
+    activate: false,
+    replaceKey: false,
+  })
+
+  const copyToClipboard = (text: string, key: keyof typeof copiedStates) => {
+    navigator.clipboard.writeText(text)
+    setCopiedStates(prev => ({ ...prev, [key]: true }))
+    setTimeout(() => setCopiedStates(prev => ({ ...prev, [key]: false })), 2000)
+  }

-export default function Home() {
  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+    <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4">
+      <div className="max-w-2xl w-full space-y-8">
+        <h1 className="text-4xl font-bold text-center mb-8">KMS 激活指南</h1>
+        
+        <Card className="bg-card">
+          <CardHeader>
+            <CardTitle>快速操作</CardTitle>
+            <CardDescription>复制并在 PowerShell (管理员) 中运行以下命令</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <code className="bg-muted p-2 rounded flex-grow">slmgr /skms kms.flinty.moe</code>
+              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /skms kms.flinty.moe', 'quickAction1')}>
+                {copiedStates.quickAction1 ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+            <div className="flex items-center space-x-2">
+              <code className="bg-muted p-2 rounded flex-grow">slmgr /ato</code>
+              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /ato', 'quickAction2')}>
+                {copiedStates.quickAction2 ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>

-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+        <Card className="bg-card">
+          <CardHeader>
+            <CardTitle>步骤 1: 打开 PowerShell</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>右键点击开始菜单，选择 &quot;PowerShell (管理员)&quot; 或 &quot;终端管理员&quot;</p>
+            <div className="mt-4">
+              <Image
+                src="/images/open-powershell.png"
+                alt="打开 PowerShell"
+                width={500}
+                height={300}
+                className="rounded-lg"
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card">
+          <CardHeader>
+            <CardTitle>步骤 2: 设置 KMS 地址</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p>在 PowerShell 中执行以下命令：</p>
+            <div className="flex items-center space-x-2">
+              <code className="bg-muted p-2 rounded flex-grow">slmgr /skms kms.flinty.moe</code>
+              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /skms kms.flinty.moe', 'setKMS')}>
+                {copiedStates.setKMS ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+            <div className="mt-4">
+              <Image
+                src="/images/set-kms-address.png"
+                alt="设置 KMS 地址"
+                width={500}
+                height={300}
+                className="rounded-lg"
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card">
+          <CardHeader>
+            <CardTitle>步骤 3: 激活 Windows</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p>执行以下命令激活 Windows：</p>
+            <div className="flex items-center space-x-2">
+              <code className="bg-muted p-2 rounded flex-grow">slmgr /ato</code>
+              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /ato', 'activate')}>
+                {copiedStates.activate ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p>如果预置了 VL key，Windows 应该正常激活。</p>
+            <div className="mt-4">
+              <Image
+                src="/images/activate-windows.png"
+                alt="激活 Windows"
+                width={500}
+                height={300}
+                className="rounded-lg"
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-card">
+          <CardHeader>
+            <CardTitle>故障排除</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p>如果激活失败，请在<a href="https://learn.microsoft.com/zh-cn/windows-server/get-started/kms-client-activation-keys" className="text-blue-500 hover:underline">这里</a>找到适合您系统的 GVLK，然后使用以下命令替换当前的 key：</p>
+            <div className="flex items-center space-x-2">
+              <code className="bg-muted p-2 rounded flex-grow">slmgr /ipk &lt;product key&gt;</code>
+              <Button variant="outline" size="icon" onClick={() => copyToClipboard('slmgr /ipk <product key>', 'replaceKey')}>
+                {copiedStates.replaceKey ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p>替换 key 后，重新执行步骤 2 和步骤 3。</p>
+          </CardContent>
+        </Card>
+
+        <Separator />
+
+        <footer className="text-center text-sm text-muted-foreground">
+          <p>本指南仅供教育目的使用。请确保您有合法的 Windows 许可证。</p>
+        </footer>
+      </div>
    </div>
-  );
+  )
 }
+