frontend
This commit is contained in:
Sakurasan
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-base-100 text-base-content">
|
||||
<div class="navbar fixed w-full top-0 z-50 backdrop-blur-sm bg-base-100/50">
|
||||
<div class="container mx-auto flex justify-between items-center p-1 rounded-box">
|
||||
<div class="flex items-center h-12 w-12 rounded-full text-l">
|
||||
<img src="../assets/logo.svg" alt="Logo" class="select-none">
|
||||
<span class="hidden sm:flex text-xl font-bold">
|
||||
<a href="/" class="text-base-content hover:no-underline">OpenTeam</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<a href="https://github.com/mirrors2/opencatd-open" target="_blank" rel="noopener noreferrer"
|
||||
class="btn btn-md h-10 min-h-10 px-3 md:flex bg-black text-white items-center justify-center whitespace-nowrap rounded-xl text-sm font-extralight ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-black/90 flex gap-2">
|
||||
<Icon icon="simple-icons:github" class="size-5" />
|
||||
<span>Star on GitHub</span>
|
||||
<Icon icon="mingcute:star-fill" class="size-5 text-yellow-500 mb-0.5" />
|
||||
<div class="font-extralight">{{ star }}</div>
|
||||
</a>
|
||||
<a class="hidden btn btn-outline font-extralight btn-md h-10 min-h-10 hover:bg-black px-1 ml-2"
|
||||
@click="$router.push('/dashboard')">Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="flex-grow flex flex-col justify-center items-center pt-16">
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center my-4 outline-none select-none">
|
||||
<img src="../assets/openteam.png" alt="Project Logo" class="h-40">
|
||||
</div>
|
||||
<h1 class="text-4xl font-bold mb-4">
|
||||
<a class="text-gray-600" href="https://github.com/mirrors2/opencatd-open">OpenTeam</a>
|
||||
</h1>
|
||||
<p class="text-lg max-w-2xl mx-auto mb-8">
|
||||
OpenTeam is an open-source, team-shared service. that is compatible with OpenAI API and can
|
||||
be safely shared with others for API usage.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 md:tooltip md:tooltip-left md:tooltip-open" data-tip="指向 OpenTeam 的 base_url">
|
||||
<div class="join">
|
||||
<input type="text" class="input input-bordered join-item grow focus:outline-none rounded-l-full"
|
||||
v-model="url" />
|
||||
<button class="hover:bg-black hover:text-white btn join-item rounded-r-full" @click="copyUrl">复制</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-4xl mx-auto px-4 text-center">
|
||||
<p class="text-sm mb-4">
|
||||
👉Api-Keys: <a href="https://platform.openai.com/account/api-keys"
|
||||
class="link">https://platform.openai.com/account/api-keys</a>
|
||||
</p>
|
||||
|
||||
<div class="card mb-8">
|
||||
<div class="card-body px-1 flex flex-col items-center">
|
||||
<h2 class="card-title text-xl font-extralight justify-center flex mb-4 p-2 rounded-lg border-2 border-dotted hover:cursor-alias"
|
||||
@click="$router.push('/dashboard')">开始使用</h2>
|
||||
|
||||
<p class="mb-0">使用OpenTeam 管理你的LLM API,仅需一个地址即可接入不同的大模型</p>
|
||||
<LineSegmentFlow />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card backdrop-blur-sm shadow-xl mb-8">
|
||||
<div class="card-body">
|
||||
<p class="mb-2">欢迎加入我们的Telegram频道，获取最新动态和帮助</p>
|
||||
<div class="flex justify-center mb-4">
|
||||
<a href="https://t.me/OpenTeamLLM" target="_blank" class="tooltip tooltip-bottom backdrop-blur-0" data-tip="Telegram Channel">
|
||||
<img src="../assets/openteam_channel.jpg" alt="Telegram Group QR Code"
|
||||
class="w-40 fill-current backdrop-blur-0 select-none">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer footer-center text-base-content rounded p-10">
|
||||
<nav>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a href="https://github.com/mirrors2/opencatd-open" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<aside>
|
||||
<p>Copyright © {{ currentYear }} - All right reserved by <a href="https://github.com/mirrors2" target="_blank"
|
||||
class="text-gray-600 hover:text-gray-800 transition duration-300">Mirrors2.</a> </p>
|
||||
</aside>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject } from 'vue';
|
||||
import LineSegmentFlow from '@/components/LineSegmentFlow.vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
const currentYear = ref('');
|
||||
const url = ref('');
|
||||
const { setToast } = inject('toast');
|
||||
|
||||
const copyUrl = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(url.value);
|
||||
setToast('复制成功！', 'info');
|
||||
} catch (err) {
|
||||
setToast('复制失败，请手动复制。', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const star = ref(0);
|
||||
const getGithubStars = async () => {
|
||||
const res = await fetch('https://ungh.cc/repos/mirrors2/opencatd-open', { next: { revalidate: 3600 } });
|
||||
const data = await res.json();
|
||||
return data.repo.stars;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
url.value = window.location.origin;
|
||||
currentYear.value = new Date().getFullYear().toString();
|
||||
|
||||
getGithubStars().then((stars) => {
|
||||
star.value = stars;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toast {
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
/* 调整这个值以匹配你的 header 高度 */
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.toast.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 1em;
|
||||
border-left: 0.25em solid #838989aa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user