AOSC-Dev · MingcongBai · Oct 11, 2025 · Oct 4, 2025 · Oct 9, 2025 · Oct 9, 2025
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,17 @@
+.git
+.github
+.idea
+.vscode
+node_modules
+.nuxt
+.output
+dist
+.data
+*.log
+.env
+Dockerfile
+.dockerignore
+README.md
+README.zh-cn.md
+developUtils
+scripts
diff --git a/.gitmodules b/.gitmodules
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,23 @@
+# syntax=docker.io/docker/dockerfile:1
+
+FROM node:lts AS builder
+
+WORKDIR /app
+
+# 结合 deploy/nginx-example.conf 配置测试用
+ENV PASTE_API=/api/paste
+
+COPY package.json package-lock.json ./
+RUN npm install
+
+COPY --exclude=deploy . .
+RUN npm run generate
+
+FROM nginx:1.24.0
+
+COPY --from=builder /app/.output/public /usr/share/nginx/html
+COPY deploy/nginx-example.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 3000
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/README.md b/README.md
@@ -55,6 +55,12 @@ If you need to test the paste page, please set `PASTE_API=http://localhost:2334`
 in your environmental variables or the `.env` file. For the deployment of
 paste-server-rs, please refer to [website-utils](https://github.com/AOSC-Dev/website-utils).
 
+If you need to test nginx related configuration or test the complete preview in
+an independent environment, please use:
+```
+docker compose up --build
+```
+
 Submitting news
 ---
 

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -40,7 +40,12 @@ npm run generate
 npm run preview
 ```
 
-如果您需要测试剪贴板页面，请创建并修改 `.env` 文件或直接设置环境变量 `PASTE_API=http://localhost:2334`。对于 paste-server-rs 的部署请参考 [website-utils](https://github.com/AOSC-Dev/website-utils)
+如果您需要测试剪贴板页面，请创建并修改 `.env` 文件或直接设置环境变量 `PASTE_API=http://localhost:2334`。对于 paste-server-rs 的部署请参考 [website-utils](https://github.com/AOSC-Dev/website-utils)。
+
+如果您需要测试 nginx 相关配置或在独立环境测试完整预览，请使用：
+```
+docker compose up --build
+```
 
 提交新闻
 ---

diff --git a/app.vue b/app.vue
@@ -1,51 +1,9 @@
 <script setup lang="js">
-const highBrightnessControllerStore = useHighBrightnessControllerStore();
-const router = useRouter();
-const { t } = useI18n();
-
-useHead({
-  title: t('seo.heading.siteTitle'),
-  titleTemplate: (title) => `${title} | ${t('seo.site.siteName')}`,
-  link: [{ rel: 'icon', type: 'image/svg+xml', href: '/aosc.svg' }],
-  script: [
-    {
-      // This script will execute before the browser renders the <body>,
-      // ensuring the correct season class is set from the very beginning.
-      textContent:
-        'document.documentElement.classList.add(["spring","summer","autumn","winter"][(new Date().getMonth()+10)%12/3|0])',
-      type: 'text/javascript',
-      tagPosition: 'head'
-    }
-  ]
-});
-
-useSeoMeta({
-  description: t('seo.seo.siteDescription'),
-  ogImage: '/aosc.svg',
-  ogSiteName: t('seo.site.siteName')
-});
-
-router.afterEach((to, _from) => {
-  highBrightnessControllerStore.obj[to.path] =
-    !highBrightnessControllerStore.obj[to.path];
-});
-
-const { $mitt } = useNuxtApp();
-const mainRef = useTemplateRef('mainBody');
-const heightRef = useTemplateRef('dMainBody');
-onMounted(() => {
-  new ResizeObserver(() => {
-    $mitt.emit('mainDomChange', mainRef.value.clientHeight);
-  }).observe(heightRef.value);
-});
+useDefaultHead();
 </script>
 
 <template>
   <NuxtLayout>
-    <div ref="mainBody" class="flex-1">
-      <div ref="dMainBody">
-        <NuxtPage />
-      </div>
-    </div>
+    <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/components/CommonContent.vue b/components/CommonContent.vue
@@ -40,7 +40,8 @@ const { data: page, error } = await useAsyncData(
 
     if (!content)
       throw createError({
-        statusMessage: 'Query content failed',
+        statusCode: 404,
+        statusMessage: 'Page not found',
         data: {
           query: { locale: locale.value, path: contentPath.value },
           fallback: fallback
@@ -69,13 +70,7 @@ const { data: page, error } = await useAsyncData(
 );
 useHead({ title: page.value?.title });
 
-if (error.value || !page.value) {
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Page Not Found',
-    fatal: true
-  });
-}
+if (error.value) throw error.value;
 
 watch(contentRef, () => {
   if (route.hash) scrollStore.scrollAndClear();

diff --git a/composables/useDefaultHead.ts b/composables/useDefaultHead.ts
@@ -0,0 +1,25 @@
+export default () => {
+  const { t } = useI18n();
+
+  useHead({
+    title: t('seo.heading.siteTitle'),
+    titleTemplate: (title) => `${title} | ${t('seo.site.siteName')}`,
+    link: [{ rel: 'icon', type: 'image/svg+xml', href: '/aosc.svg' }],
+    script: [
+      {
+        // This script will execute before the browser renders the <body>,
+        // ensuring the correct season class is set from the very beginning.
+        textContent:
+          'document.documentElement.classList.add(["spring","summer","autumn","winter"][(new Date().getMonth()+10)%12/3|0])',
+        type: 'text/javascript',
+        tagPosition: 'head'
+      }
+    ]
+  });
+
+  useSeoMeta({
+    description: t('seo.seo.siteDescription'),
+    ogImage: '/aosc.svg',
+    ogSiteName: t('seo.site.siteName')
+  });
+};
diff --git a/compose.yml b/compose.yml
@@ -0,0 +1,7 @@
+services:
+  website:
+    build:
+      context: .
+    ports:
+      - "3000:3000"
+
diff --git a/deploy/nginx-example.conf b/deploy/nginx-example.conf
@@ -0,0 +1,25 @@
+server {
+    listen       3000;
+    root /usr/share/nginx/html;
+
+    rewrite ^/(.*)/$ /$1 permanent;
+    rewrite ^/(.*)\.html$ /$1 permanent;
+    rewrite ^/news/detail/(.*)\.zh-cn\.md$ /news/$1 permanent;
+
+    # https://nginx.org/en/docs/http/ngx_http_core_module.html#try_files
+    try_files $uri $uri/index.html $uri.html =404;
+
+    error_page 404 /404;
+
+    location /galleryFile {
+      proxy_pass https://aosc.io;
+    }
+    location /assets/news {
+      proxy_pass https://aosc.io;
+    }
+
+    # /api/paste 只在测试时使用，主要为了方便反代
+    location /api/paste {
+      proxy_pass https://paste.aosc.io/;
+    }
+}
diff --git a/error.vue b/error.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app';
+
+const { error } = defineProps({
+  error: { type: Object as () => NuxtError, required: true }
+});
+
+useDefaultHead();
+useHead({ title: error?.statusCode });
+
+// npm run dev 时 error.data 即使构造时是对象也会变成 string
+const errorData = computed(() =>
+  typeof error?.data === 'string' ? JSON.parse(error.data) : error.data
+);
+</script>
+
+<template>
+  <NuxtLayout>
+    <div class="flex-1">
+      <CategorySecond :title="$t('error.errorPage')" />
+      <div v-if="error?.statusCode === 404" class="heti">
+        <h1>{{ $t('error.cannotFindPage.title') }}</h1>
+        <p v-if="error?.data">
+          {{
+            $t('error.cannotFindPage.content.text1', {
+              url: errorData.query.path
+            })
+          }}
+        </p>
+        <p>
+          <span>{{ $t('error.cannotFindPage.content.text2') }}</span>
+          <LinkStandard
+            :link="useTIndex($tm('allUniversalLink.local.contact'), 4)" />
+          <span>{{ $t('allUniversalLink.periodPoint') }}</span>
+        </p>
+      </div>
+      <div v-else class="heti">
+        <h1>
+          {{ $t('error.unexpectedError', { statusCode: error?.statusCode }) }}
+        </h1>
+        <p>{{ error?.message ?? error?.statusMessage }}</p>
+        <code>{{ error?.data }}</code>
+      </div>
+    </div>
+  </NuxtLayout>
+</template>
diff --git a/i18n/locales/zh-cn/allUniversalLink.json b/i18n/locales/zh-cn/allUniversalLink.json
@@ -103,7 +103,7 @@
       "url": "/about"
     },
     "contact": {
-      "title": ["各聊天群组", "联系方式", "社区聊天群组", "报告系统使用问题"],
+      "title": ["各聊天群组", "联系方式", "社区聊天群组", "报告系统使用问题", "与我们联系"],
       "url": "/contact",
       "hash": ["#main"]
     },

diff --git a/i18n/locales/zh-cn/error.json b/i18n/locales/zh-cn/error.json
@@ -0,0 +1,11 @@
+{
+  "cannotFindPage": {
+    "title": "找不到页面 (404)",
+    "content": {
+      "text1": "您想要访问的页面：{url} 在站点上不存在。请检查您输入的网页地址 (URL) 是否正确。",
+      "text2": "如果该页面链接是其他网页中所引用的，请"
+    }
+  },
+  "errorPage": "错误页",
+  "unexpectedError": "发生意外错误：{statusCode}"
+}
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+const { $mitt } = useNuxtApp();
+const mainRef = useTemplateRef('mainBody');
+const heightRef = useTemplateRef('dMainBody');
+
+let observer: ResizeObserver | null = null;
+onMounted(() => {
+  observer = new ResizeObserver(() => {
+    $mitt.emit('mainDomChange', mainRef.value?.clientHeight);
+  });
+  if (heightRef.value) observer.observe(heightRef.value);
+});
+onBeforeUnmount(() => observer?.disconnect());
+</script>
+
 <template>
   <div>
     <div
@@ -8,7 +23,11 @@
           class="sticky top-0 w-[15%] min-w-[12rem] bg-leftbar-bg *:text-nowrap">
           <BarLeft class="sticky top-0 min-w-[100%] *:text-nowrap" />
         </div>
-        <slot />
+        <div ref="mainBody" class="flex-1">
+          <div ref="dMainBody">
+            <slot />
+          </div>
+        </div>
       </div>
     </div>
     <BarFooter class="fixed bottom-0 h-[2rem] min-w-[960px]" />

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -90,11 +90,11 @@ export default defineNuxtConfig({
     },
     server: {
       proxy: {
-        // For test only
-        '/pasteApi': {
+        // Set `PASTE_API` to `/api/paste` to use this
+        '/api/paste': {
           target: 'https://paste.aosc.io',
           changeOrigin: true,
-          rewrite:  (path) => path.replace(/^\/pasteApi/, '')
+          rewrite:  (path) => path.replace(/^\/api\/paste/, '')
         },
         '/galleryFile': {
           target: 'https://aosc.io',

diff --git a/pages/paste/index.vue b/pages/paste/index.vue
@@ -59,7 +59,7 @@ const submit = async () => {
     formdata.append('file', toRaw(file.raw), file.name);
   });
   formdata.append('expiration', Date.parse(pasteFormData.value.expDate) / 1000);
-  const { data, error } = await useFetch(config.public.pasteApi + '/', {
+  const { data, error } = await useFetch(config.public.pasteApi, {
     method: 'post',
     timeout: 36000 + Math.ceil((formdataSize + toailFileSize) / 1048576) * 6000,
     body: formdata