diff --git a/.github/workflows/publish-ghcr.yml b/.github/workflows/publish-ghcr.yml new file mode 100644 index 0000000..1cc6ae3 --- /dev/null +++ b/.github/workflows/publish-ghcr.yml @@ -0,0 +1,56 @@ +name: Publish Docker image (GHCR) + +on: + push: + branches: [main] + tags: + - 'v*' + workflow_dispatch: + +permissions: + contents: read + packages: write + +jobs: + build-and-push: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Set up QEMU + uses: docker/setup-qemu-action@v3 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: Log in to GHCR + uses: docker/login-action@v3 + with: + registry: ghcr.io + username: ${{ github.actor }} + password: ${{ secrets.GITHUB_TOKEN }} + + - name: Docker metadata + id: meta + uses: docker/metadata-action@v5 + with: + images: | + ghcr.io/${{ github.repository_owner }}/whattoeat + tags: | + type=ref,event=tag + type=sha + type=raw,value=latest,enable={{is_default_branch}} + + - name: Build and push + uses: docker/build-push-action@v6 + with: + context: . + file: ./Dockerfile + push: true + platforms: linux/amd64,linux/arm64 + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + cache-from: type=gha + cache-to: type=gha,mode=max diff --git a/Dockerfile b/Dockerfile index 8d32591..aa182a9 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,7 @@ FROM node:20-alpine AS build-stage WORKDIR /app + RUN corepack enable COPY .npmrc package.json pnpm-lock.yaml pnpm-workspace.yaml ./ @@ -15,6 +16,12 @@ FROM node:20-alpine AS production-stage WORKDIR /app +ENV NODE_ENV=production +ENV NITRO_HOST=0.0.0.0 +ENV NITRO_PORT=3000 + +LABEL org.opencontainers.image.source="https://github.com/ryanuo/whatToEat" + COPY --from=build-stage /app/.output ./.output EXPOSE 3000 diff --git a/README.md b/README.md index 7d05c01..d41e0d7 100644 --- a/README.md +++ b/README.md @@ -56,9 +56,31 @@ pnpm preview [![Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ryanuo/whatToEat) [![Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/ryanuo/whatToEat) +### Docker 部署 + +默认使用公开菜单（与原项目一致）：`https://eat.ryanuo.cc/recipes.json`。 + +```bash +docker compose up -d --build +``` + +### Docker 部署（服务器不构建：从 GHCR 拉镜像运行） + +仓库提交到 GitHub 后，会通过 GitHub Actions 自动构建并发布镜像到 GHCR。 + +在服务器上部署（无需构建）： + +```bash +docker pull ghcr.io/ryanuo/whattoeat:latest + +docker run -d --name whattoeat \ + -p 3000:3000 \ + ghcr.io/ryanuo/whattoeat:latest +``` + ## 数据来源 -菜谱数据来源于远程 JSON 接口，通过 `server/api/recipes.ts` 进行获取和处理。 +菜谱数据来源于远程 JSON 接口，通过 `server/routes/api/recipes.ts` 进行获取和处理。 ## 参考 diff --git a/app/components/Eat.vue b/app/components/Eat.vue index 2c8a04a..7f1a34d 100644 --- a/app/components/Eat.vue +++ b/app/components/Eat.vue @@ -6,7 +6,17 @@ import { emojiMap } from '~/constants' const isPlaying = ref(false) const currentFood = ref() const shakeTitle = ref(false) -const { data } = await useFetch('/api/recipes') +const { data, error, pending, refresh } = await useFetch('/api/recipes', { + retry: 3, + retryDelay: 1000, + timeout: 10000, +}) + +// 检查数据是否成功加载 +const isDataReady = computed(() => { + return !pending.value && !error.value && data.value && data.value.recipes && data.value.recipes.length > 0 +}) + const categories = computed(() => (data.value?.categories || []) as string[]) const selectedCategories = useStorage('selected-categories', [...categories.value]) const isAllSelected = computed(() => selectedCategories.value.length === categories.value.length) @@ -22,36 +32,20 @@ const stopWatchCategories = watch(categories, (newVal) => { } }) -// 颜色配置数组 -const colorClasses = [ - { bg: 'bg-blue-100', text: 'text-blue-800', border: 'border-blue-400', active: 'bg-blue-400', activeText: 'text-white', activeBorder: 'border-blue-500' }, - { bg: 'bg-red-100', text: 'text-red-800', border: 'border-red-400', active: 'bg-red-400', activeText: 'text-white', activeBorder: 'border-red-500' }, - { bg: 'bg-green-100', text: 'text-green-800', border: 'border-green-400', active: 'bg-green-400', activeText: 'text-white', activeBorder: 'border-green-500' }, - { bg: 'bg-yellow-100', text: 'text-yellow-800', border: 'border-yellow-300', active: 'bg-yellow-400', activeText: 'text-white', activeBorder: 'border-yellow-500' }, - { bg: 'bg-indigo-100', text: 'text-indigo-800', border: 'border-indigo-400', active: 'bg-indigo-400', activeText: 'text-white', activeBorder: 'border-indigo-500' }, - { bg: 'bg-purple-100', text: 'text-purple-800', border: 'border-purple-400', active: 'bg-purple-400', activeText: 'text-white', activeBorder: 'border-purple-500' }, - { bg: 'bg-pink-100', text: 'text-pink-800', border: 'border-pink-400', active: 'bg-pink-400', activeText: 'text-white', activeBorder: 'border-pink-500' }, - { bg: 'bg-gray-100', text: 'text-gray-800', border: 'border-gray-500', active: 'bg-gray-500', activeText: 'text-white', activeBorder: 'border-gray-600' }, - { bg: 'bg-orange-100', text: 'text-orange-800', border: 'border-orange-400', active: 'bg-orange-400', activeText: 'text-white', activeBorder: 'border-orange-500' }, -] - // 获取标签的emoji function getEmoji(tag: string) { return emojiMap[tag] || '' } - -// const randomIndex = computed(() => { -// return Math.floor(Math.random() * colorClasses.length) -// }) - // 获取标签的颜色类 function getTagColorClasses(index: number, isActive: boolean) { - // const colorConfig - // = index === -1 - // ? colorClasses[colorClasses.length - 2]! - // : colorClasses[randomIndex.value]! - const colorConfig = colorClasses[colorClasses.length - 2]! - + const colorConfig = { + bg: 'bg-[#FEFCFA]', + text: 'text-[#B9B5B0]', + border: 'border-[#E8E4E2]', + active: 'bg-[#DFDCDA]', + activeText: 'text-[#41465E]', + activeBorder: 'border-[#E8E4E2]', + } const { bg, text, border, active, activeText, activeBorder } = colorConfig return isActive @@ -74,6 +68,12 @@ function startRandom() { if (!import.meta.client) return + // 确保数据已加载 + if (!data.value?.recipes || data.value.recipes.length === 0) { + console.warn('菜单数据未加载，无法开始随机') + return + } + currentFood.value = undefined shakeTitle.value = true @@ -161,30 +161,64 @@ onUnmounted(() => {