改进 首页和菜单

src/layouts/Header.vue

@@ -61,7 +61,7 @@
               <img
                 :src="leaflowpng"
                 class="w-8 cursor-pointer block select-none"
-                @click="backToHome"
+                @click="toggleHomeChat"
               />
             </div>
 
@@ -85,7 +85,7 @@
               <template #trigger>
                 <n-icon
                   class="text-2xl mr-4 cursor-pointer"
-                  @click="backToHome"
+                  @click="newChat"
                 >
                   <AddOutline />
                 </n-icon>
@@ -108,12 +108,54 @@
               <AssistantMenu />
             </n-popover>
 
+            <!-- 社区 -->
+            <n-popover
+              :placement="userPlacement"
+              class="w-full"
+              trigger="click"
+              style="padding: 0"
+              v-if="!isMobile"
+            >
+              <template #trigger>
+                <n-icon class="text-2xl mr-4 cursor-pointer">
+                  <PeopleCircleOutline />
+                </n-icon>
+              </template>
+              <n-list hoverable clickabl class="select-none cursor-pointer">
+                <template #header>
+                  <div>
+                    <span class="text-xl">社区</span>
+                  </div>
+                </template>
+                <n-list-item>
+                  <n-a target="_blank" :href="config.forum_url">社区主页</n-a>
+                </n-list-item>
+                <n-list-item>
+                  <n-a target="_blank" :href="config.forum_url + '/t/assistant'"
+                    >助理预设</n-a
+                  >
+                </n-list-item>
+
+                <n-list-item>
+                  <n-a target="_blank" :href="config.forum_url + '/t/tools'"
+                    >工具分享</n-a
+                  >
+                </n-list-item>
+                <n-list-item>
+                  <n-a target="_blank" :href="config.forum_url + '/t/prompts'"
+                    >助理提示词</n-a
+                  >
+                </n-list-item>
+              </n-list>
+            </n-popover>
+
             <!-- Bug 反馈 -->
             <n-popover
               :placement="userPlacement"
               class="w-full"
               trigger="click"
               style="padding: 0"
+              v-if="!isMobile"
             >
               <template #trigger>
                 <n-icon class="text-2xl mr-4 cursor-pointer">
@@ -163,6 +205,7 @@ import {
   PersonOutline,
   AddOutline,
   BugOutline,
+  PeopleCircleOutline,
   // TrashOutline,
 } from "@vicons/ionicons5";
 import router from "@/router";
@@ -171,7 +214,7 @@ import router from "@/router";
 import leaflowpng from "@/assets/images/leaflow.png";
 import { useChatStore } from "@/stores/chat";
 import groupPng from "@/assets/images/group.png";
-
+import config from "@/config/config";
 
 const userStore = useUserStore();
 const chatStore = useChatStore();
@@ -194,7 +237,15 @@ if (isMobile.value) {
 //   await getApi().ChatMessage.apiV1ChatsIdClearPost(chatStore.currentChatId);
 // };
 
-const backToHome = () => {
+const toggleHomeChat = () => {
+  if (router.currentRoute.value.name == "/home/") {
+    router.push("/");
+  } else {
+    router.push("/home");
+  }
+};
+
+const newChat = () => {
   router.push("/");
 };
 

src/pages/Guest.vue

@@ -37,6 +37,15 @@
             </n-statistic>
           </div>
         </n-gi>
+        <n-gi class="mt-3 from-cyan-500 to-blue-500 rounded-lg p-4">
+          <h3 class="text-2xl">👋 一起加入</h3>
+          <p class="mt-3">
+            我们提供了 WP Amber，此 WordPress 插件可以将 Amber
+            放到你的博客中，让您的访客通过助理来总结并解释文章等。
+          </p>
+          <n-image :src="grouppng" width="150" height="300" />
+        </n-gi>
+
         <n-gi class="mt-3 from-cyan-500 to-blue-500 rounded-lg p-4">
           <h3 class="text-2xl">💬 对话优化引擎</h3>
 
@@ -126,15 +135,6 @@
             不会长期保存您的文档的源文件，我们不建议您上传具有机密性的文档。
           </p>
         </n-gi>
-
-        <n-gi class="mt-3 from-cyan-500 to-blue-500 rounded-lg p-4">
-          <h3 class="text-2xl">👋 一起加入</h3>
-          <p class="mt-3">
-            我们提供了 WP Amber，此 WordPress 插件可以将 Amber
-            放到你的博客中，让您的访客通过助理来总结并解释文章等。
-          </p>
-          <n-image :src="grouppng" width="150" height="300" />
-        </n-gi>
       </n-grid>
     </div>
   </div>

src/pages/home/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <Guest />
+</template>
+
+<script setup lang="ts">
+import Guest from "../Guest.vue";
+</script>

src/plugins/menus/user.ts

@@ -1,7 +1,8 @@
 import type { MenuOption } from "naive-ui";
 import { RouterLink } from "vue-router";
 import { NIcon } from "naive-ui";
-import { LogOutOutline } from "@vicons/ionicons5";
+import { ChatbubbleOutline, HammerOutline, HomeOutline, LogOutOutline, PeopleCircleOutline, PersonOutline } from "@vicons/ionicons5";
+import config from "@/config/config";
 
 const menuOptions: Ref<MenuOption[]> = ref([]);
 
@@ -10,6 +11,25 @@ function renderIcon(icon: Component) {
 }
 
 const addMenuItem = (to: string, label: string, icon: any) => {
+  // 如果 to 是 http 或 https 开头
+  if (/^(http|https):\/\//.test(to)) {
+    menuOptions.value.push({
+      label: () =>
+        h(
+          "a",
+          {
+            href: to,
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+          { default: () => label }
+        ),
+      key: to,
+      icon: renderIcon(icon),
+    });
+    return;
+  }
+
   menuOptions.value.push({
     label: () =>
       h(
@@ -26,6 +46,11 @@ const addMenuItem = (to: string, label: string, icon: any) => {
   });
 };
 
+addMenuItem("/home/", "Amber 首页", HomeOutline);
+addMenuItem(config.forum_url, "社区主页", PeopleCircleOutline);
+addMenuItem(config.forum_url + "/t/assistant", "助理预设", PersonOutline);
+addMenuItem(config.forum_url + "/t/tools", "工具分享", HammerOutline);
+addMenuItem(config.forum_url + "/t/prompts", "助理提示词", ChatbubbleOutline);
 addMenuItem("/auth/logout", "退出登录", LogOutOutline);
 
 export { addMenuItem as addUserMenu, menuOptions as userMenuOptions };

src/typed-router.d.ts

@@ -30,5 +30,6 @@ declare module 'vue-router/auto-routes' {
     '/errors/500': RouteRecordInfo<'/errors/500', '/errors/500', Record<never, never>, Record<never, never>>,
     '/errors/Base': RouteRecordInfo<'/errors/Base', '/errors/Base', Record<never, never>, Record<never, never>>,
     '/Guest': RouteRecordInfo<'/Guest', '/Guest', Record<never, never>, Record<never, never>>,
+    '/home/': RouteRecordInfo<'/home/', '/home', Record<never, never>, Record<never, never>>,
   }
 }