Hooke / mlaj-reading-club

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
26ce3880 1 parent 903b4acd

feat: 初始化项目结构并添加核心功能 

- 初始化项目结构，包括Vue 3、Pinia、Vue Router、TailwindCSS等依赖
- 添加首页、活动详情页、创建活动页等核心页面
- 实现活动分类、搜索、报名等基本功能
- 添加公共组件如按钮、输入框、模态框等
- 配置Vite、TailwindCSS、PostCSS等构建工具
Expand all
Inline Side-by-side
Showing 53 changed files with 1767 additions and 0 deletions
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.history
node_modules
.vscode
mlaj-read
# React + Vite Template
A modern React template for web applications and games, featuring React 18, Vite, TailwindCSS, and Material UI.
## Project Structure
```
├── src/
│ ├── App.jsx # Main application component
│ ├── main.jsx # Application entry point
│ └── index.css # Global styles (Tailwind)
├── public/ # Static assets
├── index.html # HTML template
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind configuration
├── postcss.config.js # PostCSS configuration
└── eslint.config.js # ESLint configuration
```
## Development Guidelines
- Modify `index.html` and `src/App.jsx` as needed
- Create new folders or files in `src/` directory as needed
- Style components using TailwindCSS utility classes
- Avoid modifying `src/main.jsx` and `src/index.css`
- Only modify `vite.config.js` if absolutely necessary
## Available Scripts
- `pnpm install` - Install dependencies
- `pnpm run dev` - Start development server
- `pnpm run lint` - Lint source files
## Tech Stack
- React
- Vite
- TailwindCSS
- ESLint
- Javascript
......
<!--
* @Date: 2025-04-17 08:14:25
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 13:26:33
* @FilePath: /reading-club-app/index.html
* @Description: 文件描述
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>读书会 - 连接爱读书的人</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
{
"name": "vue-reading-club",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint ./src --quiet",
"preview": "vite preview"
},
"dependencies": {
"@vitejs/plugin-vue-jsx": "4.1.2",
"pinia": "^2.1.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"@vue/compiler-sfc": "^3.4.21",
"autoprefixer": "^10.4.20",
"eslint": "^9.9.0",
"eslint-plugin-vue": "^9.24.0",
"postcss": "^8.4.45",
"tailwindcss": "^3.4.10",
"vite": "^5.4.1"
}
}
This diff is collapsed. Click to expand it.
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
This file is too large to display.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
{
"data": [
{
"title": "Travel Blog",
"description": "Here is json data for travel blog"
}
]
}
\ No newline at end of file
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
<!--
* @Date: 2025-04-17 08:14:12
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 13:15:27
* @FilePath: /reading-club-app/src/App.vue
* @Description: 文件描述
-->
/*
* @Date: 2025-04-17 08:14:12
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 13:15:05
* @FilePath: /reading-club-app/src/App.jsx
* @Description: 文件描述
*/
<template>
<div class="flex flex-col min-h-screen">
<Header />
<main class="flex-grow">
<router-view></router-view>
</main>
<Footer />
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import Header from './components/layout/Header.vue'
import Footer from './components/layout/Footer.vue'
// 更新文档标题
onMounted(() => {
document.title = '读书会 - 连接爱读书的人'
})
</script>
<!--
* @Date: 2025-04-17 13:22:07
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 13:22:09
* @FilePath: /reading-club-app/src/components/layout/Footer.vue
* @Description: 文件描述
-->
<template>
<footer class="mt-8 py-6 bg-gradient-to-r from-green-50 to-blue-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-bold bg-gradient-to-r from-green-500 to-blue-400 bg-clip-text text-transparent">读书会</h3>
<p class="text-gray-600 mt-2">连接爱读书的人，共享知识的力量</p>
</div>
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8">
<div>
<h4 class="font-semibold text-gray-800 mb-3">关于我们</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-green-500">平台介绍</a></li>
<li><a href="#" class="text-gray-600 hover:text-green-500">使用指南</a></li>
<li><a href="#" class="text-gray-600 hover:text-green-500">联系我们</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-gray-800 mb-3">热门分类</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:text-green-500">文学小说</a></li>
<li><a href="#" class="text-gray-600 hover:text-green-500">社科人文</a></li>
<li><a href="#" class="text-gray-600 hover:text-green-500">商业财经</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold text-gray-800 mb-3">关注我们</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 hover:text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8l-8 8m0-8l8 8" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-200 mt-8 pt-6 text-center">
<p class="text-gray-500 text-sm">© 2024 读书会平台 All Rights Reserved</p>
</div>
</div>
</footer>
</template>
<script setup>
// Footer组件不需要任何响应式数据或方法
</script>
<template>
<header class="sticky top-0 z-50">
<!-- Frosted glass effect background -->
<div class="backdrop-blur-xl bg-white/70 shadow-sm">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<!-- Logo and Title -->
<div class="flex items-center">
<router-link to="/" class="flex items-center">
<span class="text-2xl font-bold bg-gradient-to-r from-green-500 to-blue-400 bg-clip-text text-transparent">
读书会
</span>
</router-link>
</div>
<!-- Navigation - Desktop -->
<nav class="hidden md:flex items-center space-x-6">
<router-link to="/" class="text-gray-600 hover:text-green-500 font-medium">
首页
</router-link>
<router-link to="/activities" class="text-gray-600 hover:text-green-500 font-medium">
全部活动
</router-link>
<router-link to="/create-activity" class="text-gray-600 hover:text-green-500 font-medium">
创建活动
</router-link>
</nav>
<!-- User Profile and Actions -->
<div class="flex items-center">
<!-- Messages Icon -->
<router-link to="/messages" class="relative p-2 mr-4 text-gray-600 hover:text-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
<span class="absolute top-1 right-1 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full">
2
</span>
</router-link>
<!-- User Profile -->
<div class="relative">
<button @click="toggleProfileDropdown" class="flex items-center space-x-2">
<div class="h-8 w-8 rounded-full overflow-hidden border-2 border-green-500">
<img :src="currentUser?.avatar || '/assets/images/avatars/default_avatar.png'" alt="User Avatar" class="h-full w-full object-cover" />
</div>
<span class="hidden lg:block text-sm font-medium text-gray-700">{{ currentUser?.name || 'User' }}</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- Profile Dropdown -->
<div v-if="isProfileDropdownOpen" class="absolute right-0 mt-2 w-48 py-2 bg-white rounded-md shadow-lg backdrop-blur-xl bg-white/90 z-20">
<router-link to="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
个人资料
</router-link>
<router-link to="/my-activities" class="block px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
我的活动
</router-link>
<router-link to="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
设置
</router-link>
<button class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-green-50 hover:text-green-500">
退出登录
</button>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="ml-4 md:hidden">
<button @click="toggleMenu" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-green-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500">
<span class="sr-only">Open main menu</span>
<svg :class="{ 'hidden': isMenuOpen, 'block': !isMenuOpen }" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg :class="{ 'block': isMenuOpen, 'hidden': !isMenuOpen }" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div :class="{ 'block': isMenuOpen, 'hidden': !isMenuOpen }" class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<router-link to="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
首页
</router-link>
<router-link to="/activities" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
全部活动
</router-link>
<router-link to="/create-activity" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
创建活动
</router-link>
<router-link to="/profile" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
个人资料
</router-link>
<router-link to="/messages" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-green-50">
消息通知
</router-link>
</div>
</div>
</div>
</div>
</header>
</template>
<script setup>
import { ref } from 'vue'
import { useAppStore } from '../../stores/app'
const appStore = useAppStore()
const currentUser = appStore.currentUser
const isMenuOpen = ref(false)
const isProfileDropdownOpen = ref(false)
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value
}
const toggleProfileDropdown = () => {
isProfileDropdownOpen.value = !isProfileDropdownOpen.value
}
</script>
<!--
* @Date: 2025-04-17 13:16:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 13:16:22
* @FilePath: /reading-club-app/src/components/shared/ActivityCard.vue
* @Description: 文件描述
-->
<template>
<router-link
:to="`/activity/${activity.id}`"
class="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-200"
>
<div class="relative pb-48 overflow-hidden">
<img
:src="activity.cover_image"
:alt="activity.title"
class="absolute inset-0 h-full w-full object-cover"
/>
<div
v-if="activity.tags && activity.tags.length"
class="absolute top-0 left-0 p-4 flex flex-wrap gap-2"
>
<span
v-for="tag in activity.tags"
:key="tag"
class="px-3 py-1 text-sm bg-green-500 text-white rounded-full"
>
{{ tag }}
</span>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">{{ activity.title }}</h3>
<p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ activity.description }}</p>
<div class="flex items-center text-sm text-gray-500 mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span>{{ formatDateTime(activity.start_time) }}</span>
</div>
<div class="flex items-center text-sm text-gray-500 mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>{{ activity.location }}</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img
:src="activity.organizer_avatar"
:alt="activity.organizer_name"
class="w-8 h-8 rounded-full mr-2"
/>
<span class="text-sm text-gray-600">{{ activity.organizer_name }}</span>
</div>
<span class="text-sm font-medium text-green-500">
{{ activity.participant_count }}人参与
</span>
</div>
</div>
</router-link>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
activity: {
type: Object,
required: true
}
})
// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
const date = new Date(dateTimeStr.replace(' ', 'T'))
return new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
}).format(date)
}
</script>
<template>
<button
:type="type"
:class="[baseClasses, variantClass, sizeClass, roundedClass, block ? buttonBlock : '', className]"
:disabled="disabled"
@click="$emit('click', $event)"
>
<span v-if="leftIcon" class="mr-2">
<slot name="leftIcon">
{{ leftIcon }}
</slot>
</span>
<slot></slot>
<span v-if="rightIcon" class="ml-2">
<slot name="rightIcon">
{{ rightIcon }}
</slot>
</span>
</button>
</template>
<script setup>
import { computed } from 'vue'
const buttonVariants = {
primary: 'bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white border-transparent',
secondary: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300',
success: 'bg-green-600 hover:bg-green-700 text-white border-transparent',
danger: 'bg-red-600 hover:bg-red-700 text-white border-transparent',
warning: 'bg-yellow-500 hover:bg-yellow-600 text-white border-transparent',
info: 'bg-blue-500 hover:bg-blue-600 text-white border-transparent',
ghost: 'bg-transparent hover:bg-gray-100 text-gray-700 hover:text-gray-900 border-transparent'
}
const buttonSizes = {
xs: 'px-2 py-1 text-xs',
sm: 'px-2 py-1 text-sm',
md: 'px-4 py-2',
lg: 'px-6 py-3 text-lg',
xl: 'px-8 py-4 text-xl'
}
const buttonRounded = {
none: 'rounded-none',
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
full: 'rounded-full'
}
const buttonBlock = 'w-full flex justify-center'
const props = defineProps({
variant: {
type: String,
default: 'primary',
validator: (value) => Object.keys(buttonVariants).includes(value)
},
size: {
type: String,
default: 'md',
validator: (value) => Object.keys(buttonSizes).includes(value)
},
rounded: {
type: String,
default: 'md',
validator: (value) => Object.keys(buttonRounded).includes(value)
},
block: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
className: {
type: String,
default: ''
},
leftIcon: {
type: [String, Object],
default: null
},
rightIcon: {
type: [String, Object],
default: null
},
type: {
type: String,
default: 'button'
}
})
defineEmits(['click'])
const baseClasses = 'flex items-center justify-center font-medium border shadow-sm transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed'
const variantClass = computed(() => buttonVariants[props.variant] || buttonVariants.primary)
const sizeClass = computed(() => buttonSizes[props.size] || buttonSizes.md)
const roundedClass = computed(() => buttonRounded[props.rounded] || buttonRounded.md)
</script>
<template>
<div :class="['w-full', className]">
<label v-if="label" :for="inputId" class="block text-sm font-medium text-gray-700 mb-1">
{{ label }}
<span v-if="required" class="text-red-500 ml-1">*</span>
</label>
<div class="relative rounded-md shadow-sm">
<div v-if="leftIcon" class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">
<slot name="leftIcon">
{{ leftIcon }}
</slot>
</span>
</div>
<input
:id="inputId"
:type="type"
:name="name"
:placeholder="placeholder"
:value="modelValue"
:required="required"
:disabled="disabled"
@input="$emit('update:modelValue', $event.target.value)"
@blur="$emit('blur', $event)"
:class="[
'block w-full border-gray-300 rounded-md shadow-sm',
'focus:ring-green-500 focus:border-green-500 sm:text-sm',
'disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed',
sizeClass,
error ? 'border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500' : '',
leftIcon ? 'pl-10' : '',
rightIcon ? 'pr-10' : ''
]"
v-bind="$attrs"
/>
<div v-if="rightIcon" class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">
<slot name="rightIcon">
{{ rightIcon }}
</slot>
</span>
</div>
</div>
<p v-if="error || helperText" :class="['mt-1 text-sm', error ? 'text-red-600' : 'text-gray-500']">
{{ error || helperText }}
</p>
</div>
</template>
<script setup>
import { computed } from 'vue'
const inputSizes = {
sm: 'px-2 py-1 text-sm',
md: 'px-3 py-2',
lg: 'px-4 py-3 text-lg'
}
const props = defineProps({
modelValue: {
type: [String, Number],
default: ''
},
label: {
type: String,
default: ''
},
name: {
type: String,
required: true
},
type: {
type: String,
default: 'text'
},
placeholder: {
type: String,
default: ''
},
error: {
type: String,
default: ''
},
size: {
type: String,
default: 'md',
validator: (value) => Object.keys(inputSizes).includes(value)
},
required: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
className: {
type: String,
default: ''
},
helperText: {
type: String,
default: ''
},
leftIcon: {
type: [String, Object],
default: null
},
rightIcon: {
type: [String, Object],
default: null
}
})
defineEmits(['update:modelValue', 'blur'])
const inputId = computed(() => `input-${props.name}`)
const sizeClass = computed(() => inputSizes[props.size] || inputSizes.md)
</script>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
isOpen: {
type: Boolean,
required: true
},
title: {
type: String,
required: true
},
size: {
type: String,
default: 'md'
},
closeOnClickOutside: {
type: Boolean,
default: true
},
showCloseButton: {
type: Boolean,
default: true
},
contentClassName: {
type: String,
default: ''
}
});
const emit = defineEmits(['close']);
const modalRef = ref(null);
const isMounted = ref(false);
// Set sizes based on the size prop
const sizeClasses = {
sm: 'max-w-md',
md: 'max-w-lg',
lg: 'max-w-2xl',
xl: 'max-w-4xl',
full: 'max-w-full mx-4'
};
const modalSize = computed(() => sizeClasses[props.size] || sizeClasses.md);
// Handle ESC key press
const handleKeyDown = (event) => {
if (event.key === 'Escape' && props.isOpen) {
emit('close');
}
};
// Handle click outside
const handleClickOutside = (event) => {
if (modalRef.value && !modalRef.value.contains(event.target) && props.closeOnClickOutside) {
emit('close');
}
};
// Handle mounting/unmounting and event listeners
onMounted(() => {
isMounted.value = true;
document.addEventListener('keydown', handleKeyDown);
});
onUnmounted(() => {
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('mousedown', handleClickOutside);
document.body.style.overflow = 'auto';
});
// Watch isOpen changes
watch(() => props.isOpen, (newValue) => {
if (newValue) {
document.body.style.overflow = 'hidden';
document.addEventListener('mousedown', handleClickOutside);
} else {
document.body.style.overflow = 'auto';
document.removeEventListener('mousedown', handleClickOutside);
}
});
</script>
<template>
<Teleport to="body">
<div v-if="isOpen && isMounted" class="fixed inset-0 z-50 overflow-y-auto">
<!-- Backdrop with semi-transparent background -->
<div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm transition-opacity"></div>
<!-- Modal container -->
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center">
<div
:class="['relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full', modalSize]"
ref="modalRef"
>
<!-- Modal header -->
<div class="bg-white px-4 py-4 border-b border-gray-200 sm:px-6">
<div class="flex items-center justify-between">
<h3 class="text-lg leading-6 font-medium text-gray-900">
{{ title }}
</h3>
<button
v-if="showCloseButton"
type="button"
class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none"
@click="emit('close')"
>
<span class="sr-only">关闭</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Modal content -->
<div :class="['bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4', contentClassName]">
<slot></slot>
</div>
<!-- Modal footer -->
<div v-if="$slots.footer" class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
</Teleport>
</template>
<template>
<div :class="className">
<!-- Tab headers -->
<div :class="getContainerClasses()">
<button
v-for="(tab, index) in tabs"
:key="index"
:class="getTabHeaderClasses(index)"
@click="handleTabChange(index)"
role="tab"
:aria-selected="currentTab === index"
>
{{ tab.label }}
</button>
</div>
<!-- Tab content -->
<div class="pt-4">
<component :is="tabs[currentTab]?.content" />
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
tabs: {
type: Array,
required: true
},
activeTab: {
type: Number,
default: 0
},
className: {
type: String,
default: ''
},
variant: {
type: String,
default: 'underline', // 'underline', 'pills', 'bordered'
validator: (value) => ['underline', 'pills', 'bordered'].includes(value)
},
size: {
type: String,
default: 'md', // 'sm', 'md', 'lg'
validator: (value) => ['sm', 'md', 'lg'].includes(value)
}
});
const emit = defineEmits(['change']);
const currentTab = ref(props.activeTab);
const handleTabChange = (index) => {
currentTab.value = index;
emit('change', index);
};
const getSizeClasses = () => {
switch (props.size) {
case 'sm': return 'text-sm py-1 px-2';
case 'lg': return 'text-lg py-3 px-5';
case 'md':
default: return 'text-base py-2 px-4';
}
};
const getTabHeaderClasses = (index) => {
const isActive = index === currentTab.value;
const sizeClasses = getSizeClasses();
const baseClasses = 'font-medium transition-all duration-200 focus:outline-none';
switch (props.variant) {
case 'pills':
return `${baseClasses} ${sizeClasses} rounded-md ${
isActive
? 'bg-green-500 text-white'
: 'text-gray-700 hover:text-green-500 hover:bg-green-50'
}`;
case 'bordered':
return `${baseClasses} ${sizeClasses} border-b-2 ${
isActive
? 'border-green-500 text-green-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`;
case 'underline':
default:
return `${baseClasses} ${sizeClasses} border-b-2 ${
isActive
? 'border-green-500 text-green-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`;
}
};
const getContainerClasses = () => {
switch (props.variant) {
case 'pills':
return 'flex p-1 space-x-1 bg-gray-100 rounded-lg';
case 'bordered':
return 'flex border-b border-gray-200';
case 'underline':
default:
return 'flex border-b border-gray-200';
}
};
</script>
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
const AppContext = createContext();
export const AppProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const [activities, setActivities] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [registrations, setRegistrations] = useState([]);
const [userMessages, setUserMessages] = useState([]);
// Initialize app data
useEffect(() => {
const fetchInitialData = async () => {
try {
setLoading(true);
// Fetch users data - In a real app, this would be a real API call
const usersResponse = await fetch('/data/users.json');
const usersData = await usersResponse.json();
// For demo purposes, set the first user as current user
setCurrentUser(usersData[0]);
// Fetch activities
const activitiesResponse = await fetch('/data/activities.json');
const activitiesData = await activitiesResponse.json();
setActivities(activitiesData);
// Fetch registrations
const registrationsResponse = await fetch('/data/registrations.json');
const registrationsData = await registrationsResponse.json();
setRegistrations(registrationsData);
// Fetch messages
const messagesResponse = await fetch('/data/messages.json');
const messagesData = await messagesResponse.json();
setUserMessages(messagesData);
setLoading(false);
} catch (err) {
console.error('Failed to fetch initial data:', err);
setError('Failed to load application data. Please try again later.');
setLoading(false);
}
};
fetchInitialData();
}, []);
// Get activity by ID
const getActivityById = useCallback((activityId) => {
return activities.find(activity => activity.id === activityId) || null;
}, [activities]);
// Get user's registrations
const getUserRegistrations = useCallback(() => {
if (!currentUser) return [];
return registrations.filter(reg => reg.user_id === currentUser.id);
}, [currentUser, registrations]);
// Register for an activity
const registerForActivity = useCallback((activityId, formData) => {
if (!currentUser) return { success: false, error: 'User not logged in' };
// In a real app, this would make an API call
const newRegistration = {
id: `R${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
activity_id: activityId,
user_id: currentUser.id,
registration_time: new Date().toISOString().replace('T', ' ').substring(0, 19),
status: 'pending',
custom_fields: formData.fields,
custom_answers: formData.answers
};
setRegistrations(prev => [...prev, newRegistration]);
return { success: true, registrationId: newRegistration.id };
}, [currentUser]);
// Create a new activity
const createActivity = useCallback((activityData) => {
if (!currentUser) return { success: false, error: 'User not logged in' };
// In a real app, this would make an API call
const newActivity = {
id: `A${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
organizer_id: currentUser.id,
organizer_name: currentUser.name,
...activityData,
participant_count: 0,
is_published: activityData.is_published || true,
is_public: activityData.is_public || true,
};
setActivities(prev => [...prev, newActivity]);
return { success: true, activityId: newActivity.id };
}, [currentUser]);
// Check in for an activity
const checkInForActivity = useCallback((activityId, registrationId, method = 'manual') => {
if (!currentUser) return { success: false, error: 'User not logged in' };
// In a real app, this would make an API call
const checkinData = {
id: `C${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
activity_id: activityId,
user_id: currentUser.id,
registration_id: registrationId,
checkin_time: new Date().toISOString().replace('T', ' ').substring(0, 19),
checkin_type: method,
status: 'successful',
is_late: false
};
// In a real app, we would update the backend
return { success: true, checkin: checkinData };
}, [currentUser]);
// Get user messages
const getUserMessages = useCallback(() => {
if (!currentUser) return [];
return userMessages.filter(msg => msg.recipient_id === currentUser.id);
}, [currentUser, userMessages]);
// Toggle read status of a message
const toggleMessageReadStatus = useCallback((messageId) => {
setUserMessages(prev =>
prev.map(msg =>
msg.id === messageId
? { ...msg, read_status: !msg.read_status }
: msg
)
);
}, []);
const contextValue = {
currentUser,
activities,
loading,
error,
registrations,
userMessages,
getActivityById,
getUserRegistrations,
registerForActivity,
createActivity,
checkInForActivity,
getUserMessages,
toggleMessageReadStatus
};
return (
<AppContext.Provider value={contextValue}>
{children}
</AppContext.Provider>
);
};
export const useApp = () => {
const context = useContext(AppContext);
if (!context) {
throw new Error('useApp must be used within an AppProvider');
}
return context;
};
export default AppContext;
\ No newline at end of file
import { useState, useEffect } from 'react';
import { fetchUsers } from '../utils/api';
// A custom hook to manage authentication state
const useAuth = () => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// In a real app, this would check if the user is logged in via JWT, cookies, etc.
// For this demo, we'll just load the first user from the mock data
const checkAuth = async () => {
try {
const users = await fetchUsers();
// For demo purposes, use the first user as the logged-in user
if (users && users.length > 0) {
// Check if there's a stored user ID in local storage (for persistence)
const storedUserId = localStorage.getItem('currentUserId');
if (storedUserId) {
const storedUser = users.find(u => u.id === storedUserId);
if (storedUser) {
setUser(storedUser);
} else {
setUser(users[0]); // Fallback to first user
}
} else {
setUser(users[0]);
}
}
setLoading(false);
} catch (err) {
console.error('Authentication error:', err);
setError('Failed to authenticate. Please try again.');
setLoading(false);
}
};
checkAuth();
}, []);
// Login function - in a real app, this would validate credentials
const login = async (userId) => {
try {
setLoading(true);
const users = await fetchUsers();
const foundUser = users.find(u => u.id === userId);
if (foundUser) {
setUser(foundUser);
localStorage.setItem('currentUserId', userId);
setLoading(false);
return { success: true };
} else {
setError('User not found');
setLoading(false);
return { success: false, error: 'User not found' };
}
} catch (err) {
console.error('Login error:', err);
setError('Failed to log in. Please try again.');
setLoading(false);
return { success: false, error: err.message };
}
};
// Logout function
const logout = () => {
setUser(null);
localStorage.removeItem('currentUserId');
};
// Switch user (for demo purposes)
const switchUser = async (userId) => {
return await login(userId);
};
return {
user,
loading,
error,
login,
logout,
switchUser,
isAuthenticated: !!user
};
};
export default useAuth;
\ No newline at end of file
@tailwind base;
@tailwind components;
@tailwind utilities;
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 25px;
transition: all 0.3s;
background-color: rgba(106, 115, 125, 0.2);
&:hover {
background-color: rgba(106, 115, 125, 0.27);
}
}
::-webkit-scrollbar-corner {
display: none;
}
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import './index.css'
// 创建Vue应用实例
const app = createApp(App)
// 创建Pinia状态管理实例
const pinia = createPinia()
app.use(pinia)
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: () => import('./pages/HomePage.vue') },
{ path: '/activity/:activityId', component: () => import('./pages/ActivityDetail.vue') },
{ path: '/create-activity', component: () => import('./pages/CreateActivity.vue') },
{ path: '/profile', component: () => import('./pages/UserProfile.vue') },
{ path: '/registration/:activityId', component: () => import('./pages/Registration.vue') },
{ path: '/check-in/:activityId', component: () => import('./pages/CheckIn.vue') },
{ path: '/messages/:activityId', component: () => import('./pages/Messages.vue') },
{ path: '/:pathMatch(.*)*', redirect: '/' }
]
})
app.use(router)
// 挂载应用
app.mount('#root')
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<template>
<div class="min-h-screen">
<!-- 加载状态 -->
<div v-if="loading" class="min-h-screen flex justify-center items-center">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-500"></div>
</div>
<template v-else>
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-green-50 to-blue-50 py-16">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">
连接爱读书的人，<span
class="bg-gradient-to-r from-green-500 to-blue-400 bg-clip-text text-transparent">共享知识的力量</span>
</h1>
<p class="text-xl text-gray-600 mb-8">
发现丰富的读书活动，结识志同道合的朋友，让阅读成为一种享受
</p>
<!-- 搜索表单 -->
<form @submit.prevent="handleSearch" class="relative max-w-xl mx-auto mb-8">
<div class="flex rounded-full overflow-hidden shadow-lg">
<input type="text" v-model="searchTerm" class="flex-grow px-6 py-4 focus:outline-none"
placeholder="搜索读书会活动、主题或城市..." />
<button type="submit"
class="px-8 py-4 bg-green-500 text-white font-semibold hover:bg-green-600 transition duration-200">
搜索
</button>
</div>
</form>
</div>
</div>
</section>
<!-- 搜索结果 -->
<section v-if="isSearching" class="container mx-auto px-4 py-12">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">搜索结果</h2>
<button @click="clearSearch" class="text-gray-600 hover:text-gray-800 transition duration-200">
清除搜索
</button>
</div>
<div v-if="searchResults.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<ActivityCard v-for="activity in searchResults" :key="activity.id" :activity="activity" />
</div>
<div v-else class="text-center py-12 text-gray-600">
未找到相关活动
</div>
</section>
<!-- 活动列表 -->
<template v-else>
<!-- 进行中的活动 -->
<section v-if="ongoingActivities.length > 0" class="container mx-auto px-4 py-12">
<h2 class="text-2xl font-bold text-gray-800 mb-8">正在进行的活动</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<ActivityCard v-for="activity in ongoingActivities" :key="activity.id" :activity="activity" />
</div>
</section>
<!-- 即将开始的活动 -->
<section class="container mx-auto px-4 py-12">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold text-gray-800">即将开始的活动</h2>
<router-link to="/create-activity"
class="px-6 py-2 bg-green-500 text-white rounded-full font-semibold hover:bg-green-600 transition duration-200">
创建活动
</router-link>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<ActivityCard v-for="activity in upcomingActivities" :key="activity.id" :activity="activity" />
</div>
</section>
<!-- 往期活动 -->
<section class="container mx-auto px-4 py-12">
<h2 class="text-2xl font-bold text-gray-800 mb-8">往期活动</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<ActivityCard v-for="activity in pastActivities" :key="activity.id" :activity="activity" />
</div>
</section>
</template>
</template>
</div>
</template>
<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useAppStore } from '../stores/app'
import ActivityCard from '../components/shared/ActivityCard.vue'
const store = useAppStore()
const { activities, loading } = store
const upcomingActivities = ref([])
const ongoingActivities = ref([])
const pastActivities = ref([])
const searchTerm = ref('')
const searchResults = ref([])
const isSearching = ref(false)
// 监听活动数据变化并分类
watchEffect(() => {
if (activities.value.length > 0) {
const now = new Date()
// 筛选即将开始的活动
upcomingActivities.value = activities.value
.filter(activity => {
const startTime = new Date(activity.start_time.replace(' ', 'T'))
return startTime > now
})
.sort((a, b) => {
return new Date(a.start_time.replace(' ', 'T')) - new Date(b.start_time.replace(' ', 'T'))
})
.slice(0, 6)
// 筛选进行中的活动
ongoingActivities.value = activities.value
.filter(activity => {
const startTime = new Date(activity.start_time.replace(' ', 'T'))
const endTime = new Date(activity.end_time.replace(' ', 'T'))
return startTime <= now && endTime >= now
})
// 筛选往期活动
pastActivities.value = activities.value
.filter(activity => {
const endTime = new Date(activity.end_time.replace(' ', 'T'))
return endTime < now
})
.sort((a, b) => {
return new Date(b.end_time.replace(' ', 'T')) - new Date(a.end_time.replace(' ', 'T'))
})
.slice(0, 6)
}
})
// 搜索处理
const handleSearch = () => {
if (!searchTerm.value.trim()) return
isSearching.value = true
searchResults.value = activities.value.filter(activity =>
activity.title.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
activity.description.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
(activity.tags && activity.tags.some(tag => tag.toLowerCase().includes(searchTerm.value.toLowerCase())))
)
}
// 清除搜索
const clearSearch = () => {
searchTerm.value = ''
isSearching.value = false
}
</script>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<!--
* @Date: 2025-04-17 13:41:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 13:41:18
* @FilePath: /reading-club-app/src/providers/AppProvider.vue
* @Description: 文件描述
-->
<template>
<slot></slot>
</template>
<script setup>
import { onMounted } from 'vue'
import { useAppStore } from '../stores/app'
const store = useAppStore()
onMounted(() => {
store.fetchInitialData()
})
</script>
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useAppStore = defineStore('app', () => {
const currentUser = ref(null)
const activities = ref([])
const loading = ref(true)
const error = ref(null)
const registrations = ref([])
const userMessages = ref([])
// 初始化应用数据
async function fetchInitialData() {
try {
loading.value = true
// 获取用户数据
const usersResponse = await fetch('/data/users.json')
const usersData = await usersResponse.json()
currentUser.value = usersData[0]
// 获取活动数据
const activitiesResponse = await fetch('/data/activities.json')
const activitiesData = await activitiesResponse.json()
activities.value = activitiesData
// 获取报名数据
const registrationsResponse = await fetch('/data/registrations.json')
const registrationsData = await registrationsResponse.json()
registrations.value = registrationsData
// 获取消息数据
const messagesResponse = await fetch('/data/messages.json')
const messagesData = await messagesResponse.json()
userMessages.value = messagesData
loading.value = false
} catch (err) {
console.error('Failed to fetch initial data:', err)
error.value = '加载应用数据失败，请稍后重试。'
loading.value = false
}
}
// 根据ID获取活动
const getActivityById = computed(() => {
return (activityId) => activities.value.find(activity => activity.id === activityId) || null
})
// 获取用户的报名记录
const getUserRegistrations = computed(() => {
return () => currentUser.value ? registrations.value.filter(reg => reg.user_id === currentUser.value.id) : []
})
// 报名活动
function registerForActivity(activityId, formData) {
if (!currentUser.value) return { success: false, error: '用户未登录' }
const newRegistration = {
id: `R${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
activity_id: activityId,
user_id: currentUser.value.id,
registration_time: new Date().toISOString().replace('T', ' ').substring(0, 19),
status: 'pending',
custom_fields: formData.fields,
custom_answers: formData.answers
}
registrations.value.push(newRegistration)
return { success: true, registrationId: newRegistration.id }
}
// 创建新活动
function createActivity(activityData) {
if (!currentUser.value) return { success: false, error: '用户未登录' }
const newActivity = {
id: `A${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
organizer_id: currentUser.value.id,
organizer_name: currentUser.value.name,
...activityData,
participant_count: 0,
is_published: activityData.is_published || true,
is_public: activityData.is_public || true,
}
activities.value.push(newActivity)
return { success: true, activityId: newActivity.id }
}
// 活动签到
function checkInForActivity(activityId, registrationId, method = 'manual') {
if (!currentUser.value) return { success: false, error: '用户未登录' }
const checkinData = {
id: `C${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
activity_id: activityId,
user_id: currentUser.value.id,
registration_id: registrationId,
checkin_time: new Date().toISOString().replace('T', ' ').substring(0, 19),
checkin_type: method,
status: 'successful',
is_late: false
}
return { success: true, checkin: checkinData }
}
// 获取用户消息
const getUserMessages = computed(() => {
return () => currentUser.value ? userMessages.value.filter(msg => msg.recipient_id === currentUser.value.id) : []
})
// 切换消息已读状态
function toggleMessageReadStatus(messageId) {
userMessages.value = userMessages.value.map(msg =>
msg.id === messageId
? { ...msg, read_status: !msg.read_status }
: msg
)
}
return {
currentUser,
activities,
loading,
error,
registrations,
userMessages,
fetchInitialData,
getActivityById,
getUserRegistrations,
registerForActivity,
createActivity,
checkInForActivity,
getUserMessages,
toggleMessageReadStatus
}
})
// Mock API functions to fetch data from JSON files
// Fetch activities from mock data
export const fetchActivities = async () => {
try {
const response = await fetch('/data/activities.json');
if (!response.ok) throw new Error('Failed to fetch activities');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching activities:', error);
throw error;
}
};
// Fetch a single activity by ID
export const fetchActivityById = async (activityId) => {
try {
const response = await fetch('/data/activities.json');
if (!response.ok) throw new Error('Failed to fetch activity');
const activities = await response.json();
const activity = activities.find(act => act.id === activityId);
if (!activity) throw new Error('Activity not found');
return activity;
} catch (error) {
console.error(`Error fetching activity ${activityId}:`, error);
throw error;
}
};
// Fetch users data
export const fetchUsers = async () => {
try {
const response = await fetch('/data/users.json');
if (!response.ok) throw new Error('Failed to fetch users');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching users:', error);
throw error;
}
};
// Fetch a single user by ID
export const fetchUserById = async (userId) => {
try {
const response = await fetch('/data/users.json');
if (!response.ok) throw new Error('Failed to fetch user');
const users = await response.json();
const user = users.find(u => u.id === userId);
if (!user) throw new Error('User not found');
return user;
} catch (error) {
console.error(`Error fetching user ${userId}:`, error);
throw error;
}
};
// Fetch registrations data
export const fetchRegistrations = async (activityId = null, userId = null) => {
try {
const response = await fetch('/data/registrations.json');
if (!response.ok) throw new Error('Failed to fetch registrations');
let registrations = await response.json();
// Filter by activity ID if provided
if (activityId) {
registrations = registrations.filter(reg => reg.activity_id === activityId);
}
// Filter by user ID if provided
if (userId) {
registrations = registrations.filter(reg => reg.user_id === userId);
}
return registrations;
} catch (error) {
console.error('Error fetching registrations:', error);
throw error;
}
};
// Fetch check-in data
export const fetchCheckins = async (activityId = null, userId = null) => {
try {
const response = await fetch('/data/checkins.json');
if (!response.ok) throw new Error('Failed to fetch check-ins');
let checkins = await response.json();
// Filter by activity ID if provided
if (activityId) {
checkins = checkins.filter(check => check.activity_id === activityId);
}
// Filter by user ID if provided
if (userId) {
checkins = checkins.filter(check => check.user_id === userId);
}
return checkins;
} catch (error) {
console.error('Error fetching check-ins:', error);
throw error;
}
};
// Fetch messages data
export const fetchMessages = async (recipientId = null) => {
try {
const response = await fetch('/data/messages.json');
if (!response.ok) throw new Error('Failed to fetch messages');
let messages = await response.json();
// Filter by recipient ID if provided
if (recipientId) {
messages = messages.filter(msg => msg.recipient_id === recipientId);
}
return messages;
} catch (error) {
console.error('Error fetching messages:', error);
throw error;
}
};
// Mock function for creating an activity (would be an API POST in a real app)
export const createActivity = async (activityData) => {
// In a real app, this would send a POST request
console.log('Creating activity with data:', activityData);
return {
success: true,
id: `A${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
...activityData
};
};
// Mock function for registering to an activity
export const registerForActivity = async (activityId, userData) => {
// In a real app, this would send a POST request
console.log(`Registering for activity ${activityId} with data:`, userData);
return {
success: true,
id: `R${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
activity_id: activityId,
...userData
};
};
// Mock function for checking in to an activity
export const checkInForActivity = async (registrationId, checkinData) => {
// In a real app, this would send a POST request
console.log(`Checking in for registration ${registrationId} with data:`, checkinData);
return {
success: true,
id: `C${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`,
registration_id: registrationId,
...checkinData
};
};
\ No newline at end of file
/*
* @Date: 2025-04-16 22:22:18
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 14:09:27
* @FilePath: /reading-club-app/tailwind.config.js
* @Description: 文件描述
*/
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#4caf50',
secondary: '#2196f3',
'background-start': '#f0f9ef',
'background-end': '#e6f4ff',
'text-base': '#333333',
'text-light': '#6e6e6e'
}
},
},
plugins: [],
};
{
"description": " - This is a template for general web app, game, common application,client,tool,component development. It is based on React framework with Tailwind CSS. The template includes the basic structure of a React project, including an index.html file and a src directory with an App.jsx file.\n - Modify index.html to change web title, create new jsx files under src if needed, and rewrite src/App.jsx to meet the user's requirements. You should NOT modify src/main.jsx and src/index.css. Modify vite.config.js only if extra config is absolutely necessary.\n - Style your elements with Tailwind CSS classes directly in the jsx files.\n - If the user's requirements do not specify a technology stack, development language, development tools, components, etc., this template will be used by default. For example, developing an XXX application, XXX client, etc. all use this template.",
"required_fields": [],
"required_files": [
"index.html",
"src/main.jsx",
"src/App.jsx",
"src/index.css",
"vite.config.js"
],
"lang": "JavaScript",
"framework": "React",
"style": "react_template",
"scene": "default_web_project"
}
/*
* @Date: 2025-04-16 22:22:18
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-17 14:11:13
* @FilePath: /reading-club-app/vite.config.js
* @Description: 文件描述
*/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
})