jwai/amber-ui-re
1
0
Fork 0
forked from Leaf/amber-ui
Code Pull Requests Activity

改进 首页和菜单

Browse Source
This commit is contained in:
Twilight 2024-09-26 17:24:16 +08:00
parent 29dd5655bb
commit a0ce8f69e6
5 changed files with 99 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/layouts/Header.vue
View File

@ -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,15 +108,57 @@
<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">
<n-icon class="text-2xl mr-4 cursor-pointer">
<BugOutline />
</n-icon>
</template>
@ -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("/");
};

18
src/pages/Guest.vue
View File

@ -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>

7
src/pages/home/index.vue Normal file
View File

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

27
src/plugins/menus/user.ts
View File

@ -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 };

1
src/typed-router.d.ts vendored
View File

@ -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>>,
}
}