feat: Added activation guide

Author: Peek-A-Booo

CHANGE_LOG.md

@@ -12,6 +12,7 @@
 
 - Added Premium feature to support author's future development
 - Added support for Token recharge to unlock more session quotas
+- Added activation guide
 
 ## v0.6.2
 

CHANGE_LOG.zh_CN.md

@@ -12,6 +12,7 @@
 
 - 新增 Premium 功能，支持作者后续研发
 - 新增支持 Token 充值，解锁更多会话额度
+- 新增激活许可证引导
 
 ## v0.6.2
 

src/components/navbar/index.tsx

@@ -2,10 +2,17 @@
 
 import * as React from "react";
 import { useTranslations } from "next-intl";
-import { AiOutlineMenuUnfold, AiOutlineEdit } from "react-icons/ai";
+import { AiOutlineMenuUnfold, AiOutlineEdit, AiFillGift } from "react-icons/ai";
 import { cn } from "@/lib";
-import { useChannel, useOpenAI, useMobileMenu, useLLM } from "@/hooks";
+import {
+  useChannel,
+  useOpenAI,
+  useMobileMenu,
+  useLLM,
+  usePremium,
+} from "@/hooks";
 import Avatar from "@/components/site/avatar";
+import { Button } from "@/components/ui";
 import ConversationSetting from "./conversationSetting";
 import Token from "./token";
 
@@ -16,6 +23,7 @@ export default function Navbar() {
   const tSetting = useTranslations("setting");
   const [channel] = useChannel();
   const { openai, azure } = useLLM();
+  const [, setPremiumOpen] = usePremium();
   const [openAI] = useOpenAI();
 
   const [, setMobileMenuVisible] = useMobileMenu();
@@ -36,6 +44,8 @@ export default function Navbar() {
 
   const onCheckToken = () => tokenRef.current?.init();
 
+  const onOpenPremium = () => setPremiumOpen(true);
+
   const activeChannel = channel.list.find(
     (item) => item.channel_id === channel.activeId
   );
@@ -125,6 +135,12 @@ export default function Navbar() {
           )}
         </div>
 
+        <div className="absolute right-14 hidden md:block">
+          <Button type="outline" onClick={onOpenPremium}>
+            <AiFillGift size={20} className="text-orange-400" />
+          </Button>
+        </div>
+
         <Avatar />
       </div>
       <ConversationSetting ref={conversationSettingRef} />

src/components/premium/index.tsx

@@ -265,7 +265,8 @@ const Premium: React.FC = () => {
         onLogin={onLogin}
         onPay={onPay}
       />
-      <div className="mt-2">
+      <div className="my-2 text-orange-400 text-sm">{t("bought-success")}</div>
+      <div>
         <Link
           className="text-sm"
           target="_blank"

src/locales/en.json

@@ -89,6 +89,7 @@
   "premium": {
     "activate": "Activate",
     "activate-license": "Activate License",
+    "bought-success": "Activate the License Key in the settings at the lower left corner of the system after purchase.",
     "buy": "Buy",
     "buy-for-you": "Buy it for you",
     "coming-soon": "Coming soon",

src/locales/zh-CN.json

@@ -89,6 +89,7 @@
   "premium": {
     "activate": "点击激活",
     "activate-license": "激活许可证",
+    "bought-success": "成功购买 许可证 之后前往系统左下角设置按钮处即可进行激活",
     "buy": "购买",
     "buy-for-you": "点击购买",
     "coming-soon": "即将推出",