yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 21:14:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add ToolTip to the news & home page components.

Browse source
This commit is contained in:
yuanhau 2025-05-27 15:30:16 +08:00
parent db0c0a3c25
commit 417630bcd8
9 changed files with 133 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

59
components/app/windows/news.vue
View file

@ -1,5 +1,11 @@
<script setup lang="ts">
import { ScanEyeIcon } from "lucide-vue-next";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import CheckKidUnfriendlyContent from "~/components/checks/checkKidUnfriendlyContent";
const emit = defineEmits(["close", "min", "restore"]);
const staticid = computed(() => props.staticid);
@ -41,10 +47,6 @@ const isPrimary = (url: string, defaultAction: boolean) => {
return false;
};
const openNews = (url: string) => {
console.log(url);
};
onMounted(async () => {
tabs.value = await pullTabsData();
primary.value =
@ -94,6 +96,12 @@ const tf = (text: string) => {
return tfVector;
};
const openNews = (url: string) => {
console.log(url);
};
const openPublisher = (text: string) => {};
</script>
<template>
<div class="justify-center align-center text-center">
@ -105,7 +113,9 @@ const tf = (text: string) => {
<button
v-for="item in tabs"
@click="updateContent(item.url, true)"
:class="isPrimary(item.url, true) ? 'text-sky-600 text-bold' : 'text-black'"
:class="
isPrimary(item.url, true) ? 'text-sky-600 text-bold' : 'text-black'
"
class=""
:disabled="isPrimary(item.url, true)"
>
@ -139,7 +149,19 @@ const tf = (text: string) => {
{{ item.title }}
</h1>
<p class="m-0 text-gray-600">
<button >{{ item.publisher }}</button> --
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<button @click="openPublisher(item.publisher)">
{{ item.publisher }}
</button>
</TooltipTrigger>
<TooltipContent class="rounded">
會打開關於媒體的視窗
</TooltipContent>
</Tooltip>
</TooltipProvider>
--
{{
new Date(item.publishTimeUnix).toLocaleString("zh-TW", {
year: "numeric",
@ -151,13 +173,24 @@ const tf = (text: string) => {
})
}}
</p>
<div class="justify-center align-center text-center flex flex-row p-1">
<button
@click="openNews(item.url.hash)"
class="flex flex-row p-1 bg-sky-300/50 hover:bg-sky-400/50 shadow-lg backdrop-blur-sm rounded transition-all duration-200"
>
<ScanEyeIcon class="w-6 h-6 p-1" /><span>觀看文章</span>
</button>
<div
class="justify-center align-center text-center flex flex-row p-1"
>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<button
@click="openNews(item.url.hash)"
class="flex flex-row p-1 bg-sky-300/50 hover:bg-sky-400/50 shadow-lg backdrop-blur-sm rounded transition-all duration-200"
>
<ScanEyeIcon class="w-6 h-6 p-1" /><span>觀看文章</span>
</button>
</TooltipTrigger>
<TooltipContent class="rounded">
會打開新的視窗
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div>
<h3 class="text-lg">類似文章</h3>

13
components/ui/tooltip/Tooltip.vue
View file

@ -1,10 +1,15 @@
<script setup lang="ts">
import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
import {
TooltipRoot,
type TooltipRootEmits,
type TooltipRootProps,
useForwardPropsEmits,
} from "reka-ui";
const props = defineProps<TooltipRootProps>()
const emits = defineEmits<TooltipRootEmits>()
const props = defineProps<TooltipRootProps>();
const emits = defineEmits<TooltipRootEmits>();
const forwarded = useForwardPropsEmits(props, emits)
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>

41
components/ui/tooltip/TooltipContent.vue
View file

@ -1,27 +1,44 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import type { HTMLAttributes } from "vue";
import { reactiveOmit } from "@vueuse/core";
import {
TooltipContent,
type TooltipContentEmits,
type TooltipContentProps,
TooltipPortal,
useForwardPropsEmits,
} from "reka-ui";
import { cn } from "@/lib/utils";
defineOptions({
inheritAttrs: false,
})
});
const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
sideOffset: 4,
})
const props = withDefaults(
defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
{
sideOffset: 4,
},
);
const emits = defineEmits<TooltipContentEmits>()
const emits = defineEmits<TooltipContentEmits>();
const delegatedProps = reactiveOmit(props, 'class')
const delegatedProps = reactiveOmit(props, "class");
const forwarded = useForwardPropsEmits(delegatedProps, emits)
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<TooltipPortal>
<TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
<TooltipContent
v-bind="{ ...forwarded, ...$attrs }"
:class="
cn(
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class,
)
"
>
<slot />
</TooltipContent>
</TooltipPortal>

4
components/ui/tooltip/TooltipProvider.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
import { TooltipProvider, type TooltipProviderProps } from "reka-ui";
const props = defineProps<TooltipProviderProps>()
const props = defineProps<TooltipProviderProps>();
</script>
<template>

4
components/ui/tooltip/TooltipTrigger.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
import { TooltipTrigger, type TooltipTriggerProps } from "reka-ui";
const props = defineProps<TooltipTriggerProps>()
const props = defineProps<TooltipTriggerProps>();
</script>
<template>

8
components/ui/tooltip/index.ts
View file

@ -1,4 +1,4 @@
export { default as Tooltip } from './Tooltip.vue'
export { default as TooltipContent } from './TooltipContent.vue'
export { default as TooltipProvider } from './TooltipProvider.vue'
export { default as TooltipTrigger } from './TooltipTrigger.vue'
export { default as Tooltip } from "./Tooltip.vue";
export { default as TooltipContent } from "./TooltipContent.vue";
export { default as TooltipProvider } from "./TooltipProvider.vue";
export { default as TooltipTrigger } from "./TooltipTrigger.vue";

2
i18n/locales/en.json
View file

@ -17,9 +17,11 @@
"newsComparePlatform": "news comparison platform"
},
"startusing": "Let's Start!",
"openapp": "This will open the desktop application in your browser.",
"learnmore": "Learn more",
"documentation": "Documentation",
"tools": "Tools",
"opentools": "This will open simple tools",
"qanda": {
"titles": {
"whydes": "Why make this platform?",

1
i18n/locales/zh-tw.json
View file

@ -17,6 +17,7 @@
"newsComparePlatform": "新聞觀點比對平台"
},
"startusing": "開始使用!",
"openapp": "會打開在瀏覽器的桌面程式",
"learnmore": "了解更多",
"documentation": "如何使用",
"tools": "工具",

52
pages/home.vue
View file

@ -5,6 +5,12 @@ import {
AccordionItem,
AccordionTrigger,
} from "~/components/ui/accordion";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import {
ComputerDesktopIcon,
CircleStackIcon,
@ -123,20 +129,38 @@ useSeoMeta({
></span
></span>
<div class="flex flex-row justify-center align-center gap-0s">
<NuxtLink :to="localePath('/desktop')">
<button
class="m-4 mr-1 ml-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gradient-to-l from-sky-500 to-purple-600 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
>
<span>{{ t("home.startusing") }}</span>
</button>
</NuxtLink>
<NuxtLink :to="localePath('/tools/')">
<button
class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
>
<span>{{ t("home.tools") }}</span>
</button>
</NuxtLink>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<NuxtLink :to="localePath('/desktop')">
<button
class="m-4 mr-1 ml-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gradient-to-l from-sky-500 to-purple-600 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
>
<span>{{ t("home.startusing") }}</span>
</button>
</NuxtLink>
</TooltipTrigger>
<TooltipContent class="rounded">
{{ t("home.openapp") }}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<NuxtLink :to="localePath('/tools/')">
<button
class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
>
<span>{{ t("home.tools") }}</span>
</button>
</NuxtLink>
</TooltipTrigger>
<TooltipContent class="rounded">
{{ t("home.opentools") }}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<NuxtLink to="#learnmore">
<button
class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"