rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add initial styling and layout for portal views

Browse Source 
- Created a global CSS file for consistent styling across the application.
- Implemented the Explore, Home, Topics, and various user views with responsive design.
- Added a Login view with OTP functionality and a Checkout view for order processing.
- Developed a NotFound view for handling 404 errors.
- Established a configuration file for Vite with Tailwind CSS integration.
This commit is contained in:
Rogee
2025-12-26 09:18:41 +08:00
parent a4262b4a52
commit bcbd3327ea
40 changed files with 3795 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/portal/src/components/AppFooter.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<footer class="bg-slate-900 text-slate-400 mt-auto">
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Brand -->
<div class="col-span-1">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center text-white font-bold text-xl">Q</div>
<span class="text-xl font-bold text-white">Quyun</span>
</div>
<p class="text-sm leading-relaxed mb-6">专业的租户管理与内容交付平台，连接创作者与用户，探索内容的无限可能。</p>
<div class="flex gap-4">
<a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-twitter"></i></a>
<a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-github"></i></a>
<a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-discord"></i></a>
</div>
</div>
<!-- Links -->
<div>
<h3 class="text-white font-bold mb-4">关于我们</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors">平台介绍</a></li>
<li><a href="#" class="hover:text-white transition-colors">加入我们</a></li>
<li><a href="#" class="hover:text-white transition-colors">联系方式</a></li>
<li><a href="#" class="hover:text-white transition-colors">合作伙伴</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">帮助中心</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors">用户指南</a></li>
<li><a href="#" class="hover:text-white transition-colors">创作者手册</a></li>
<li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
<li><a href="#" class="hover:text-white transition-colors">反馈建议</a></li>
</ul>
</div>
<div>
<h3 class="text-white font-bold mb-4">法律条款</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors">用户协议</a></li>
<li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
<li><a href="#" class="hover:text-white transition-colors">知识产权</a></li>
<li><a href="#" class="hover:text-white transition-colors">社区规范</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center text-xs">
<p>© 2025 Quyun Platform. All rights reserved.</p>
<p class="mt-2 md:mt-0">ICP 备 88888888 号-1 | 公安网备 11010102000000 号</p>
</div>
</div>
</footer>
</template>

43
frontend/portal/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

88
frontend/portal/src/components/TopNavbar.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<nav class="fixed top-0 w-full z-50 bg-white border-b border-slate-200 h-16">
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
<!-- Left: Logo -->
<router-link to="/" class="flex items-center gap-2">
<div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold text-xl">Q</div>
<span class="text-xl font-bold text-slate-900 hidden sm:block">Quyun</span>
</router-link>
<!-- Center-Left: Nav Links (Desktop) -->
<div class="hidden md:flex items-center space-x-8">
<router-link to="/" class="text-slate-600 font-medium hover:text-primary-600" active-class="text-primary-600">首页</router-link>
<router-link to="/explore" class="text-slate-600 font-medium hover:text-primary-600" active-class="text-primary-600">发现</router-link>
<router-link to="/topics" class="text-slate-600 font-medium hover:text-primary-600" active-class="text-primary-600">专题</router-link>
</div>
<!-- Center-Right: Global Search -->
<div class="hidden sm:flex flex-1 max-w-md mx-8">
<div class="relative w-full">
<i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input
type="text"
placeholder="搜索感兴趣的内容..."
class="w-full h-10 pl-10 pr-4 rounded-full bg-slate-100 border-none focus:bg-white focus:ring-2 focus:ring-primary-100 text-sm transition-all"
>
</div>
</div>
<!-- Right: User Actions -->
<div class="flex items-center gap-4">
<template v-if="isLoggedIn">
<!-- Notification -->
<router-link to="/me/notifications" class="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-50 text-slate-600">
<i class="pi pi-bell text-xl"></i>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
</router-link>
<!-- Creator Entry -->
<router-link to="/creator/apply" class="hidden sm:flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg border border-slate-200">
<i class="pi pi-pencil"></i>
<span>创作</span>
</router-link>
<!-- Avatar Dropdown -->
<div class="relative group">
<button class="w-9 h-9 rounded-full overflow-hidden border border-slate-200 focus:ring-2 ring-primary-100">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User" class="w-full h-full object-cover">
</button>
<!-- Dropdown Menu (Mock) -->
<div class="absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-100 py-1 hidden group-hover:block">
<div class="px-4 py-3 border-b border-slate-50">
<p class="text-sm font-bold text-slate-900">Felix Demo</p>
<p class="text-xs text-slate-500 truncate">felix@example.com</p>
</div>
<router-link to="/me" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">个人中心</router-link>
<router-link to="/creator" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">创作者中心</router-link>
<div class="border-t border-slate-50 mt-1"></div>
<button @click="logout" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">退出登录</button>
</div>
</div>
</template>
<template v-else>
<router-link to="/auth/login" class="text-slate-600 font-medium hover:text-primary-600 px-3 py-2">登录</router-link>
<router-link to="/auth/login" class="bg-primary-600 text-white px-5 py-2 rounded-full font-medium hover:bg-primary-700 transition-colors">注册</router-link>
</template>
<!-- Mobile Menu Button -->
<button class="md:hidden w-10 h-10 flex items-center justify-center text-slate-600">
<i class="pi pi-bars text-xl"></i>
</button>
</div>
</div>
</nav>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const isLoggedIn = ref(true); // Mock login state
const router = useRouter();
const logout = () => {
isLoggedIn.value = false;
router.push('/');
};
</script>