diff --git a/WALLPAPERS.md b/WALLPAPERS.md
new file mode 100644
index 00000000..4eb3cb5f
--- /dev/null
+++ b/WALLPAPERS.md
@@ -0,0 +1,23 @@
+# Static site wallpapers
+
+## Shop integration draft
+
+Own profile now links to `/shop`, containing Products and My backpack. All three wallpapers cost 1,000 community coins each. The displayed balance comes from the existing `userInfo.Gold` browser cache and is explicitly labeled as cached, with unknown values shown as a dash. No wallet mutation, purchase request or ownership record is created. Purchasing is disabled; backpack availability is unknown until a service exists. Local preview is development-only, excluded from ownership, and production wallpaper selection fails closed pending an ownership service. Chinese and English shop strings are provided; other locales currently use English shop copy.
+
+Required backend integration: authenticate the community account, obtain authorized community-wallet debit capability, atomically debit 1,000 coins and grant permanent ownership, prevent duplicate purchases with idempotency and unique ownership constraints, return authoritative balance/inventory, and persist equipment. An independent service alone cannot debit the community wallet without its authorized integration.
+
+Local prototype on an independent branch. Open `/#/wallpapers`, or Settings > Site wallpaper. Three built-in CSS gradient/pattern backgrounds are bundled with the application. No uploads, remote image URLs, animation, payments or grants are supported.
+
+The shared header also provides a wallpaper selector for comparing backgrounds directly on normal community pages. For live public content on this machine, the network-enabled development server is at `http://127.0.0.1:5177/#/`. Public home and discussion feeds were visually checked with real API data; authenticated notifications and friends still require user login. Automated home/discussion navigation uses fixture responses for repeatability.
+
+The selected allowlisted ID is stored in this browser under the typed `siteWallpaper` preference. It persists across routes and reloads and synchronizes across same-origin tabs. Storage errors keep the previous selection. Unknown IDs fall back to the default background. This is a browser appearance preference shared by accounts using that browser, with no server or account ownership claims.
+
+The application shell paints one fixed non-interactive background. Settings, editor outer backgrounds, the shared header and footer use a transparent override only when a wallpaper is selected. The login card explicitly uses the reactive wallpaper so it also works when mounted outside the app shell. Inputs, content cards, experiment covers and editor content retain readable surfaces. Restoring default removes the overrides and returns the login card to its default background.
+
+## Test locally
+
+Start `npm run dev -- --host 127.0.0.1 --port 5176 --strictPort` and open `http://127.0.0.1:5176/#/wallpapers`.
+
+Run `npx playwright test --config scripts/tests/wallpapers.local.config.ts --workers=2`. The suite checks persistence, settings navigation, reset, tab synchronization, unknown IDs, keyboard selection and storage errors in Chromium and narrow-screen WebKit. These tests do not establish authenticated page coverage or real-device acceptance.
+
+Before release: review authenticated content-heavy pages and editor layouts, check real mobile devices, and decide whether wallpaper selection should become an account setting. Account-owned/paid wallpapers require a server inventory and ownership checks before integration.
diff --git a/scripts/tests/wallpapers.local.config.ts b/scripts/tests/wallpapers.local.config.ts
new file mode 100644
index 00000000..2f7b2ae6
--- /dev/null
+++ b/scripts/tests/wallpapers.local.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from '@playwright/test'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+export default defineConfig({
+  testDir: '.',
+  testMatch: 'wallpapers.spec.ts',
+  outputDir: join(tmpdir(), 'plweb-wallpaper-tests'),
+  use: { baseURL: 'http://127.0.0.1:5176' },
+  projects: [
+    { name: 'chromium', use: { browserName: 'chromium' } },
+    { name: 'webkit-mobile', use: { browserName: 'webkit', viewport: { width: 390, height: 844 } } },
+  ],
+})
diff --git a/scripts/tests/wallpapers.spec.ts b/scripts/tests/wallpapers.spec.ts
new file mode 100644
index 00000000..3cda2958
--- /dev/null
+++ b/scripts/tests/wallpapers.spec.ts
@@ -0,0 +1,140 @@
+import { test, expect } from '@playwright/test'
+
+test('商城展示缓存金币，关闭购买且试用不会扣款发货', async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem('userInfo', JSON.stringify({ value: { ID: '66d100000000000000000001', Gold: 2500, Nickname: '商城测试' } }))
+  })
+  const purchaseRequests: string[] = []
+  page.on('request', request => { if (request.method() === 'POST') purchaseRequests.push(request.url()) })
+  await page.goto('/#/shop')
+  await expect(page.locator('.shop__account')).toContainText('2,500')
+  await expect(page.locator('.shop__price')).toHaveCount(3)
+  for (const button of await page.locator('.shop__product button:disabled').all()) await expect(button).toBeDisabled()
+  await expect(page.locator('.shop__product button:disabled')).toHaveCount(3)
+  await page.locator('.shop__preview').first().click()
+  await expect(page.locator('.wallpaper-shell')).toHaveClass(/has-wallpaper/)
+  await page.locator('.shop__tabs button').nth(1).click()
+  await expect(page.locator('.shop__bag')).toBeVisible()
+  await page.locator('.shop__bag button').click()
+  await expect(page.locator('.wallpaper-shell')).not.toHaveClass(/has-wallpaper/)
+  expect(await page.evaluate(() => JSON.parse(localStorage.getItem('userInfo')!).value.Gold)).toBe(2500)
+  expect(purchaseRequests).toEqual([])
+})
+
+test('正常首页和黑洞卡片中直接切换壁纸', async ({ page }) => {
+  const blocks = [
+    {
+      Header: '壁纸回归测试作品',
+      TargetLink: '{}',
+      Summaries: [
+        {
+          ID: '66d100000000000000000001',
+          Subject: '正常作品卡片',
+          Image: -1,
+          Category: 'Experiment',
+          Tags: [],
+          User: { Nickname: '测试作者' },
+        },
+      ],
+    },
+  ]
+  await page.route('**/api/Users/Authenticate', (route) =>
+    route.fulfill({ json: { Status: 200, Data: { Library: { Blocks: blocks } } } }),
+  )
+  await page.route('**/api/Contents/GetLibrary', (route) =>
+    route.fulfill({ json: { Status: 200, Data: { Blocks: blocks } } }),
+  )
+  await page.goto('/#/')
+  await page.locator('.cookie-notice button').click()
+  await expect(page.locator('#home .card')).toBeVisible()
+  await page.locator('.wallpaper-picker select').selectOption('tide')
+  await expect(page.locator('.wallpaper-shell')).toHaveClass(/has-wallpaper/)
+  await expect(page.locator('.header-container')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(page.locator('footer')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await page.locator('#home .user').click()
+  await expect(page.locator('.login-surface')).toBeVisible()
+  await expect(page.locator('.login-surface')).not.toHaveCSS('background-image', 'none')
+  await page.locator('.login-surface input').first().fill('wallpaper-visual-check')
+  await expect(page.locator('.login-surface input').first()).toHaveValue('wallpaper-visual-check')
+  await page.locator('.container').filter({ has: page.locator('.login-surface') }).click({ position: { x: 5, y: 5 } })
+  await expect(page.locator('.login-surface')).toHaveCount(0)
+  await expect(page.locator('#home .block > .outer')).toHaveCSS(
+    'background-color',
+    'rgb(255, 255, 255)',
+  )
+  await page.locator('footer a[href="#/b"]').click()
+  await expect(page.locator('#blackhole .card')).toBeVisible()
+  await expect(page.locator('.wallpaper-picker select')).toHaveValue('tide')
+  await page.locator('.wallpaper-picker select').selectOption('grid')
+  await page.locator('footer a[href="#/"]').click()
+  await expect(page.locator('.wallpaper-picker select')).toHaveValue('grid')
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
+  await page.locator('.wallpaper-picker select').selectOption('')
+  await expect(page.locator('.wallpaper-shell')).not.toHaveClass(/has-wallpaper/)
+  await expect(page.locator('.header-container')).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await expect(page.locator('footer')).toHaveCSS('background-color', 'rgb(255, 255, 255)')
+  await page.locator('#home .user').click()
+  await expect(page.locator('.login-surface')).toHaveCSS('background-image', 'none')
+})
+
+test('壁纸可切换、刷新保留、跨页面生效并恢复默认', async ({ page }) => {
+  await page.goto('/#/wallpapers')
+  await expect(page.locator('input[type=file]')).toHaveCount(0)
+  await page.locator('[data-wallpaper=tide]').click()
+  await expect(page.locator('.wallpaper-shell')).toHaveClass(/has-wallpaper/)
+  await page.reload()
+  await expect(page.locator('[data-wallpaper=tide]')).toHaveAttribute('aria-pressed', 'true')
+  await page.locator('.wallpapers__intro a').click()
+  await expect(page.locator('.settings-wrapper')).toBeVisible()
+  await expect(page.locator('.settings-wrapper')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(page.locator('.wallpaper-shell')).toHaveClass(/has-wallpaper/)
+  await page.locator('a[href="#/wallpapers"]').click()
+  await page.locator('[data-wallpaper=dawn]').click()
+  await page.locator('[data-wallpaper=grid]').click()
+  await expect(page.locator('[data-wallpaper=grid]')).toHaveAttribute('aria-pressed', 'true')
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
+  await page.locator('.wallpapers__card').first().click()
+  await expect(page.locator('.wallpaper-shell')).not.toHaveClass(/has-wallpaper/)
+  await page.reload()
+  await expect(page.locator('.wallpapers__card').first()).toHaveAttribute('aria-pressed', 'true')
+})
+
+test('同浏览器标签页同步应用和恢复默认', async ({ page, context }) => {
+  await page.goto('/#/wallpapers')
+  const other = await context.newPage()
+  await other.goto('/#/wallpapers')
+  await page.locator('[data-wallpaper=grid]').click()
+  await expect(other.locator('[data-wallpaper=grid]')).toHaveAttribute('aria-pressed', 'true')
+  await other.locator('.wallpapers__card').first().click()
+  await expect(page.locator('.wallpaper-shell')).not.toHaveClass(/has-wallpaper/)
+  await other.close()
+})
+
+test('未知壁纸安全回退且支持键盘选择', async ({ page }) => {
+  await page.addInitScript(() =>
+    localStorage.setItem(
+      'siteWallpaper',
+      JSON.stringify({ value: 'https://invalid.test/upload.jpg' }),
+    ),
+  )
+  await page.goto('/#/wallpapers')
+  await expect(page.locator('.wallpapers__card').first()).toHaveAttribute('aria-pressed', 'true')
+  await page.locator('[data-wallpaper=dawn]').focus()
+  await page.keyboard.press('Enter')
+  await expect(page.locator('[data-wallpaper=dawn]')).toHaveAttribute('aria-pressed', 'true')
+})
+
+test('存储失败时保留原选择并显示提示', async ({ page }) => {
+  await page.addInitScript(() => {
+    const original = Storage.prototype.setItem
+    Storage.prototype.setItem = function (key, value) {
+      if (key === 'siteWallpaper') throw new DOMException('Storage full', 'QuotaExceededError')
+      original.call(this, key, value)
+    }
+  })
+  await page.goto('/#/wallpapers')
+  await page.locator('[data-wallpaper=tide]').click()
+  await expect(page.locator('.wallpapers__status')).not.toBeEmpty()
+  await expect(page.locator('.wallpapers__card').first()).toHaveAttribute('aria-pressed', 'true')
+  await expect(page.locator('.wallpaper-shell')).not.toHaveClass(/has-wallpaper/)
+})
diff --git a/src/App.vue b/src/App.vue
index 663b54a1..024a0b2a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,11 @@
 <template>
-  <div id="app" @click="handleClick">
+  <div
+    id="app"
+    class="wallpaper-shell"
+    :class="{ 'has-wallpaper': wallpaper }"
+    :style="{ '--wallpaper-image': wallpaper?.background }"
+    @click="handleClick"
+  >
     <CookieNotice />
     <router-view v-slot="{ Component }">
       <!-- keep alive源自于vue-router的缓存 -->
@@ -15,6 +21,8 @@
 <script setup lang="ts">
 import showUserCard from '@popup/userProfileDialog.ts'
 import CookieNotice from './components/utils/CookieNotice.vue'
+import { wallpaper, useWallpaperSync } from './services/wallpapers'
+useWallpaperSync()
 function handleClick(event: MouseEvent) {
   const target = event.target as HTMLElement
   if (target.classList.contains('RUser')) {
@@ -24,6 +32,18 @@ function handleClick(event: MouseEvent) {
 </script>
 
 <style>
+.wallpaper-shell.has-wallpaper {
+  isolation: isolate;
+  --page-background: transparent;
+}
+.wallpaper-shell.has-wallpaper::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image: var(--wallpaper-image);
+}
 html,
 body {
   height: 100dvh !important;
diff --git a/src/components/popup/loginModel.vue b/src/components/popup/loginModel.vue
index 6cfc0e22..d2779fbd 100644
--- a/src/components/popup/loginModel.vue
+++ b/src/components/popup/loginModel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container" @click="close">
     <div class="card" @click.stop>
-      <n-card>
+      <n-card class="login-surface" :style="{ backgroundImage: wallpaper?.background }">
         <n-tabs
           class="card-tabs"
           default-value="signin"
@@ -93,6 +93,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { wallpaper } from '../../services/wallpapers'
 import { login } from '@api/getData.ts'
 import sm from '@storage/index'
 import { getPath } from '@services/utils'
diff --git a/src/components/utils/Footer.vue b/src/components/utils/Footer.vue
index 92b82ece..99ebbbe6 100644
--- a/src/components/utils/Footer.vue
+++ b/src/components/utils/Footer.vue
@@ -108,7 +108,7 @@ footer {
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: white;
+  background-color: var(--page-background, white);
   border-top: 1px solid #e5e7eb;
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
   z-index: 50;
diff --git a/src/components/utils/Header.vue b/src/components/utils/Header.vue
index c877fa46..48996757 100644
--- a/src/components/utils/Header.vue
+++ b/src/components/utils/Header.vue
@@ -3,6 +3,7 @@
     <slot></slot>
     <!-- @see https://icomoon.io/app/ -->
     <div class="buttons">
+      <WallpaperPicker />
       <div class="logout" @click="logout">
         <svg width="25" height="25" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <path
@@ -33,6 +34,7 @@
 <script setup lang="ts">
 import router from '../../router/index'
 import { ref } from 'vue'
+import WallpaperPicker from './WallpaperPicker.vue'
 let isFullScreen = ref(false)
 
 function toggleFullScreen() {
@@ -69,7 +71,7 @@ function logout() {
   top: 0;
   padding: 0 0 0 20px;
   font-size: small;
-  background-color: white;
+  background-color: var(--page-background, white);
   width: 100%;
   z-index: 100;
   display: flex;
diff --git a/src/components/utils/WallpaperPicker.vue b/src/components/utils/WallpaperPicker.vue
new file mode 100644
index 00000000..95db1f64
--- /dev/null
+++ b/src/components/utils/WallpaperPicker.vue
@@ -0,0 +1,61 @@
+<template>
+  <div v-if="demo" class="wallpaper-picker">
+    <select :value="wallpaperId ?? ''" :aria-label="t('wallpapers.title')" @change="change">
+      <option value="">{{ t('wallpapers.default') }}</option>
+      <option v-for="item in WALLPAPERS" :key="item.id" :value="item.id">
+        {{ t(`wallpapers.${item.id}`) }}
+      </option>
+    </select>
+    <span v-if="failed" role="alert">{{ t('wallpapers.error') }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { WALLPAPERS, wallpaperId, setWallpaper, type WallpaperId } from '../../services/wallpapers'
+
+const { t } = useI18n()
+const demo = import.meta.env.DEV
+const failed = ref(false)
+function change(event: Event) {
+  const select = event.target as HTMLSelectElement
+  try {
+    setWallpaper((select.value || null) as WallpaperId | null)
+    failed.value = false
+  } catch {
+    select.value = wallpaperId.value ?? ''
+    failed.value = true
+  }
+}
+</script>
+
+<style scoped>
+.wallpaper-picker {
+  position: relative;
+}
+select {
+  max-width: clamp(5rem, 16vw, 10rem);
+  min-height: 2rem;
+  border: 1px solid #d7e3eb;
+  border-radius: 4px;
+  background: white;
+  color: #006b9e;
+  font: inherit;
+}
+select:focus-visible {
+  outline: 2px solid #0185c5;
+  outline-offset: 2px;
+}
+[role='alert'] {
+  position: absolute;
+  z-index: 200;
+  top: 100%;
+  right: 0;
+  width: 15rem;
+  padding: 0.75rem;
+  background: white;
+  color: #a21919;
+  box-shadow: 0 2px 8px #0002;
+}
+</style>
diff --git a/src/i18n/de.ts b/src/i18n/de.ts
index 46e75eb0..073e5460 100644
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@@ -1,4 +1,6 @@
 export default {
+  shop: {"title":"Shop","balance":"Community coin balance","coins":"coins","cached":"Cached on this device; final charges require server verification.","login":"Sign in to read the cached community balance.","profile":"Profile","unavailable":"Purchase service unavailable. Charging, delivery and inventory lookup are disabled.","goods":"Products","bag":"My backpack","purchaseClosed":"Purchases unavailable","preview":"Local preview","bagUnavailable":"Inventory service is unavailable. Owned wallpapers cannot be confirmed. Previews are excluded.","previewNotice":"Development preview only: local appearance, no charge and no ownership grant.","endPreview":"End preview"},
+  wallpapers: {"title":"Website-Hintergrund","description":"Integrierte statische Hintergründe für die gesamte Website. Nur in diesem Browser gespeichert; keine Uploads.","settings":"Zurück zu Einstellungen","default":"Standardhintergrund","selected":"Ausgewählt","apply":"Überall anwenden","tide":"Gezeiten · Meeresblau","dawn":"Morgenrot · Pfirsichflieder","grid":"Notizbuch · Minzgrün","preview":"Lesevorschau","readability":"Der Hintergrund liegt hinter der Seite. Inhaltskarten behalten ihren klaren Hintergrund. Die Auswahl bleibt beim Seitenwechsel erhalten und lässt sich jederzeit zurücksetzen.","saved":"In diesem Browser gespeichert","error":"Speichern fehlgeschlagen. Bitte die Speicherberechtigungen des Browsers prüfen."},
   login: {
     emailOrPhone: 'E-Mail / Telefon',
     password: 'Passwort 6~20 Zeichen',
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index 1288436d..df121082 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -1,4 +1,6 @@
 export default {
+  shop: {"title":"Shop","balance":"Community coin balance","coins":"coins","cached":"Cached on this device; final charges require server verification.","login":"Sign in to read the cached community balance.","profile":"Profile","unavailable":"Purchase service unavailable. Charging, delivery and inventory lookup are disabled.","goods":"Products","bag":"My backpack","purchaseClosed":"Purchases unavailable","preview":"Local preview","bagUnavailable":"Inventory service is unavailable. Owned wallpapers cannot be confirmed. Previews are excluded.","previewNotice":"Development preview only: local appearance, no charge and no ownership grant.","endPreview":"End preview"},
+  wallpapers: {"title":"Site wallpaper","description":"Built-in static wallpapers for the whole community. Saved in this browser only; no uploads.","settings":"Back to settings","default":"Default background","selected":"Selected","apply":"Apply site-wide","tide":"Tide · Sea blue","dawn":"Dawn · Peach lilac","grid":"Notebook · Mint","preview":"Reading preview","readability":"Wallpaper sits behind the page while content cards retain clear backgrounds. Your selection persists across pages and can be reset anytime.","saved":"Saved in this browser","error":"Could not save. Check browser storage permissions."},
   login: {
     emailOrPhone: 'Email / Phone',
     password: 'Password 6~20 chars',
diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
index e70aa80f..5564ff07 100644
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -1,4 +1,6 @@
 export default {
+  shop: {"title":"Shop","balance":"Community coin balance","coins":"coins","cached":"Cached on this device; final charges require server verification.","login":"Sign in to read the cached community balance.","profile":"Profile","unavailable":"Purchase service unavailable. Charging, delivery and inventory lookup are disabled.","goods":"Products","bag":"My backpack","purchaseClosed":"Purchases unavailable","preview":"Local preview","bagUnavailable":"Inventory service is unavailable. Owned wallpapers cannot be confirmed. Previews are excluded.","previewNotice":"Development preview only: local appearance, no charge and no ownership grant.","endPreview":"End preview"},
+  wallpapers: {"title":"Fond du site","description":"Des fonds statiques intégrés pour tout le site. Enregistrés dans ce navigateur uniquement, sans importation.","settings":"Retour aux paramètres","default":"Fond par défaut","selected":"Sélectionné","apply":"Appliquer partout","tide":"Marée · Bleu marin","dawn":"Aube · Pêche lilas","grid":"Carnet · Menthe","preview":"Aperçu de lecture","readability":"Le fond reste derrière la page et les cartes conservent un fond lisible. Le choix est conservé entre les pages et peut être réinitialisé à tout moment.","saved":"Enregistré dans ce navigateur","error":"Échec de l’enregistrement. Vérifiez les autorisations de stockage du navigateur."},
   login: {
     emailOrPhone: 'E-mail / Téléphone',
     password: 'Mot de passe 6~20 caractères',
diff --git a/src/i18n/ja.ts b/src/i18n/ja.ts
index fe5f3f11..28a5dc6d 100644
--- a/src/i18n/ja.ts
+++ b/src/i18n/ja.ts
@@ -1,4 +1,6 @@
 export default {
+  shop: {"title":"Shop","balance":"Community coin balance","coins":"coins","cached":"Cached on this device; final charges require server verification.","login":"Sign in to read the cached community balance.","profile":"Profile","unavailable":"Purchase service unavailable. Charging, delivery and inventory lookup are disabled.","goods":"Products","bag":"My backpack","purchaseClosed":"Purchases unavailable","preview":"Local preview","bagUnavailable":"Inventory service is unavailable. Owned wallpapers cannot be confirmed. Previews are excluded.","previewNotice":"Development preview only: local appearance, no charge and no ownership grant.","endPreview":"End preview"},
+  wallpapers: {"title":"サイト全体の壁紙","description":"内蔵の静止壁紙をサイト全体に適用します。このブラウザーにのみ保存され、アップロードはできません。","settings":"設定に戻る","default":"標準の背景","selected":"使用中","apply":"サイト全体に適用","tide":"潮汐 · シーブルー","dawn":"夜明け · ピーチライラック","grid":"ノート · ミント","preview":"読みやすさのプレビュー","readability":"壁紙はページの背面に表示され、コンテンツカードの背景は読みやすく保たれます。ページを切り替えても設定は維持され、いつでも元に戻せます。","saved":"このブラウザーに保存しました","error":"保存できませんでした。ブラウザーのストレージ権限を確認してください。"},
   login: {
     emailOrPhone: 'メール / 電話',
     password: 'パスワード 6~20 文字',
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
index a6a8a9d6..6db6ec18 100644
--- a/src/i18n/zh.ts
+++ b/src/i18n/zh.ts
@@ -1,4 +1,6 @@
 export default {
+  shop: {"title":"商城","balance":"主站金币余额","coins":"金币","cached":"本机缓存余额，仅供参考；最终扣款以服务端为准。","login":"请先登录，登录后可读取本机缓存的主站余额。","profile":"个人页面","unavailable":"购买服务暂未开放：当前无法扣款、发货或读取已购商品。","goods":"商品","bag":"我的背包","purchaseClosed":"购买暂未开放","preview":"本地试用","bagUnavailable":"背包服务尚未接入，暂时无法确认你拥有的壁纸。本地试用不会计入背包。","previewNotice":"开发预览：全站试用效果，仅保存在本机，不扣金币、不代表已购买。","endPreview":"结束试用"},
+  wallpapers: {"title":"全站壁纸","description":"内置静态壁纸，给整个社区换一种心情。仅保存在当前浏览器，无需上传。","settings":"返回设置","default":"默认背景","selected":"正在使用","apply":"应用到全站","tide":"潮汐 · 海盐蓝","dawn":"晨曦 · 杏桃紫","grid":"手稿 · 薄荷绿","preview":"阅读效果预览","readability":"壁纸铺在页面底层，内容卡片保持清晰底色。切换页面后依然生效，也可以随时恢复默认。","saved":"已保存到当前浏览器","error":"保存失败，请检查浏览器是否允许本地存储"},
   login: {
     emailOrPhone: '邮箱 / 手机',
     password: '密码 6~20 位',
diff --git a/src/router/index.ts b/src/router/index.ts
index 6800f9c3..907c5c75 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,13 @@ import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-rou
 import Home from '../views/Home.vue'
 
 const routes: RouteRecordRaw[] = [
+  { path: '/shop', name: 'shop', component: () => import('../views/Shop.vue'), meta: { keepAlive: false } },
+  {
+    path: '/wallpapers',
+    name: 'wallpapers',
+    component: () => import('../views/Wallpapers.vue'),
+    meta: { keepAlive: false },
+  },
   {
     path: '/',
     name: 'Home',
diff --git a/src/services/storage/index.ts b/src/services/storage/index.ts
index df5109bb..49ca3370 100644
--- a/src/services/storage/index.ts
+++ b/src/services/storage/index.ts
@@ -2,6 +2,7 @@
 // If you don't need to raise a notification when storage.status!=success, try `sm.getObj("key").value?.a?.b?.c`
 
 import type { AppLanguage } from '@i18n/index'
+import type { WallpaperId } from '../wallpapers'
 import type { ContentTag, UserInfo } from '../../pl-serve-type-main/type/main'
 
 export type StorageStatus = 'success' | 'expired' | 'empty'
@@ -34,6 +35,7 @@ export interface RequestHistoryPayload {
 export type AvatarCache = Record<string, [avatarId: number, updatedAt: number]>
 
 export interface StorageSchema {
+  siteWallpaper: WallpaperId
   userInfo: UserInfo
   tagConfig: ContentTag[]
   userConfig: UserConfig
diff --git a/src/services/wallpapers.ts b/src/services/wallpapers.ts
new file mode 100644
index 00000000..c536258e
--- /dev/null
+++ b/src/services/wallpapers.ts
@@ -0,0 +1,52 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import storage from './storage'
+
+export const WALLPAPERS = [
+  {
+    id: 'tide',
+    background:
+      'radial-gradient(ellipse at 10% 15%, #a8dce8 0%, transparent 55%), radial-gradient(ellipse at 90% 85%, #b6c5ef 0%, transparent 60%), linear-gradient(130deg, #eff9fc, #e5edf8)',
+  },
+  {
+    id: 'dawn',
+    background:
+      'radial-gradient(ellipse at 85% 10%, #efd0b7 0%, transparent 50%), radial-gradient(ellipse at 10% 90%, #dbcae9 0%, transparent 60%), linear-gradient(145deg, #fff5e9, #f3eafa)',
+  },
+  {
+    id: 'grid',
+    background:
+      'repeating-linear-gradient(0deg, transparent 0 39px, #638a9c12 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, #638a9c12 39px 40px), radial-gradient(ellipse at top right, #cce6dd, #f2f7ed)',
+  },
+] as const
+export type WallpaperId = (typeof WALLPAPERS)[number]['id']
+
+function readWallpaper(): WallpaperId | null {
+  if (!import.meta.env.DEV) return null
+  const value = storage.getObj('siteWallpaper').value
+  return WALLPAPERS.find((item) => item.id === value)?.id ?? null
+}
+
+export const wallpaperId = ref<WallpaperId | null>(readWallpaper())
+export const wallpaper = computed(() => WALLPAPERS.find((item) => item.id === wallpaperId.value))
+
+export function setWallpaper(id: WallpaperId | null) {
+  if (id !== null && !import.meta.env.DEV) throw new Error('Wallpaper ownership service unavailable')
+  if (id !== null && !WALLPAPERS.some((item) => item.id === id))
+    throw new Error('Unknown wallpaper')
+  if (id === null) storage.remove('siteWallpaper')
+  else storage.setObj('siteWallpaper', id)
+  wallpaperId.value = id
+}
+
+export function useWallpaperSync() {
+  function sync(event: StorageEvent) {
+    if (
+      event.storageArea === localStorage &&
+      (event.key === 'siteWallpaper' || event.key === null)
+    ) {
+      wallpaperId.value = readWallpaper()
+    }
+  }
+  onMounted(() => window.addEventListener('storage', sync))
+  onUnmounted(() => window.removeEventListener('storage', sync))
+}
diff --git a/src/views/Editor.vue b/src/views/Editor.vue
index 9285c07b..7185169b 100644
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@@ -623,7 +623,7 @@ setupTabObserver(expSentinelRef, expListRef, 'Experiment')
 <style scoped>
 .md-editor-page {
   min-height: 100dvh;
-  background: #f4f7fb;
+  background: var(--page-background, #f4f7fb);
   color: #1f2937;
 }
 
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 9fe9e1a3..3ea97b81 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -43,6 +43,7 @@
           </button>
         </div>
         <div class="userInfo">
+          <router-link v-if="isOwnProfile" class="shop-entry" to="/shop">{{ t('shop.title') }} →</router-link>
           <!-- User name row with settings button (portrait only) -->
           <div class="user-name-row">
             <div
@@ -383,6 +384,7 @@ function copyUser() {
 </script>
 
 <style scoped>
+.shop-entry { display: inline-block; padding: 0.6rem 1rem; margin-bottom: 0.75rem; background: white; color: #006b9e; border-radius: 6px; text-decoration: none; }
 .userInfo {
   text-align: left;
   z-index: 10;
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 08c4c500..f98622a8 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -12,6 +12,7 @@
       </div>
 
       <div class="settings-content">
+        <router-link class="setting-item" to="/wallpapers">{{ $t('wallpapers.title') }} →</router-link>
         <div v-for="section in settingsConfig" :key="section.title" class="settings-section">
           <h2 class="section-title">{{ $t(`settings.${section.title}`) }}</h2>
           <div class="section-items">
@@ -174,7 +175,7 @@ onActivated(() => {
   height: 100dvh;
   box-sizing: border-box;
   overflow-y: auto;
-  background-color: #f5f5f5;
+  background-color: var(--page-background, #f5f5f5);
   padding: 20px 0;
   touch-action: pan-y;
   -webkit-overflow-scrolling: touch;
diff --git a/src/views/Shop.vue b/src/views/Shop.vue
new file mode 100644
index 00000000..64c2d3cf
--- /dev/null
+++ b/src/views/Shop.vue
@@ -0,0 +1,166 @@
+<template>
+  <Header
+    ><h1>{{ t('shop.title') }}</h1></Header
+  >
+  <main class="shop">
+    <section class="shop__account">
+      <div>
+        <strong>{{ t('shop.balance') }}</strong>
+        <p>{{ balance === null ? '—' : balance.toLocaleString() }} {{ t('shop.coins') }}</p>
+        <small>{{ t(account ? 'shop.cached' : 'shop.login') }}</small>
+      </div>
+      <router-link v-if="account" :to="`/u/${account.ID}`">{{ t('shop.profile') }} →</router-link>
+    </section>
+    <p class="shop__notice" role="status">{{ t('shop.unavailable') }}</p>
+    <nav class="shop__tabs" :aria-label="t('shop.title')">
+      <button :aria-pressed="tab === 'goods'" @click="tab = 'goods'">{{ t('shop.goods') }}</button>
+      <button :aria-pressed="tab === 'bag'" @click="tab = 'bag'">{{ t('shop.bag') }}</button>
+    </nav>
+    <div v-if="tab === 'goods'" class="shop__grid">
+      <article v-for="item in WALLPAPERS" :key="item.id" class="shop__product">
+        <div
+          class="shop__image"
+          :style="{ backgroundImage: item.background }"
+          aria-hidden="true"
+        ></div>
+        <h2>{{ t(`wallpapers.${item.id}`) }}</h2>
+        <p class="shop__price">1,000 {{ t('shop.coins') }}</p>
+        <button disabled>{{ t('shop.purchaseClosed') }}</button>
+        <button v-if="demo" class="shop__preview" @click="preview(item.id)">
+          {{ t('shop.preview') }}
+        </button>
+      </article>
+    </div>
+    <section v-else class="shop__bag">
+      <h2>{{ t('shop.bag') }}</h2>
+      <p>{{ t('shop.bagUnavailable') }}</p>
+      <button @click="reset">{{ t('wallpapers.default') }}</button>
+    </section>
+    <p role="status">{{ feedback }}</p>
+    <p v-if="demo" class="shop__notice">
+      {{ t('shop.previewNotice') }} <button @click="reset">{{ t('shop.endPreview') }}</button>
+    </p>
+  </main>
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Header from '../components/utils/Header.vue'
+import Footer from '../components/utils/Footer.vue'
+import storage from '../services/storage'
+import { WALLPAPERS, setWallpaper, type WallpaperId } from '../services/wallpapers'
+
+const { t } = useI18n()
+const account = storage.getObj('userInfo').value
+const balance = computed(() =>
+  account && Number.isFinite(account.Gold) && account.Gold >= 0 ? account.Gold : null,
+)
+const demo = import.meta.env.DEV
+const tab = ref<'goods' | 'bag'>('goods')
+const feedback = ref('')
+function preview(id: WallpaperId | null) {
+  try {
+    setWallpaper(id)
+    feedback.value = t(id ? 'shop.previewNotice' : 'wallpapers.saved')
+  } catch {
+    feedback.value = t('wallpapers.error')
+  }
+}
+function reset() {
+  preview(null)
+}
+</script>
+
+<style scoped>
+h1 {
+  font-size: 1.2rem;
+  margin: 0;
+}
+.shop {
+  box-sizing: border-box;
+  height: calc(100dvh - 100px);
+  overflow-y: auto;
+  padding: clamp(1rem, 3vw, 2rem);
+  color: #24394b;
+}
+.shop > * {
+  max-width: 60rem;
+  margin: 0 auto 1.25rem;
+}
+.shop__account {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem;
+  background: white;
+  border-radius: 8px;
+}
+.shop__account p {
+  font-size: 1.4rem;
+  margin: 0.5rem 0;
+}
+small,
+.shop__notice {
+  color: #4c5969;
+  line-height: 1.6;
+}
+.shop__tabs {
+  display: flex;
+  gap: 1rem;
+}
+button {
+  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid #0185c5;
+  border-radius: 4px;
+  color: #006b9e;
+  background: white;
+  cursor: pointer;
+  font: inherit;
+}
+button[aria-pressed='true'] {
+  background: #0185c5;
+  color: white;
+}
+button:disabled {
+  color: #68727b;
+  border-color: #d1d8de;
+  background: #f1f4f6;
+  cursor: not-allowed;
+}
+button:focus-visible {
+  outline: 3px solid #0185c5;
+  outline-offset: 2px;
+}
+.shop__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+  gap: 1rem;
+}
+.shop__product,
+.shop__bag {
+  background: white;
+  padding: 1rem;
+  border-radius: 8px;
+}
+.shop__image {
+  aspect-ratio: 16/10;
+  border-radius: 5px;
+}
+h2 {
+  font-size: 1.1rem;
+}
+.shop__price {
+  color: #886016;
+  font-weight: 600;
+}
+.shop__preview {
+  margin: 0.5rem 0 0 0.5rem;
+}
+a {
+  color: #006b9e;
+}
+</style>
diff --git a/src/views/Wallpapers.vue b/src/views/Wallpapers.vue
new file mode 100644
index 00000000..d8cccdfb
--- /dev/null
+++ b/src/views/Wallpapers.vue
@@ -0,0 +1,160 @@
+<template>
+  <Header
+    ><h1>{{ t('wallpapers.title') }}</h1></Header
+  >
+  <main class="wallpapers">
+    <section class="wallpapers__intro">
+      <p>{{ t('wallpapers.description') }}</p>
+      <router-link to="/s">{{ t('wallpapers.settings') }} →</router-link>
+    </section>
+    <div class="wallpapers__grid">
+      <button class="wallpapers__card" :aria-pressed="wallpaperId === null" @click="select(null)">
+        <span class="wallpapers__swatch wallpapers__default" aria-hidden="true"></span>
+        <span>{{ t('wallpapers.default') }}</span>
+        <small>{{ t(wallpaperId === null ? 'wallpapers.selected' : 'wallpapers.apply') }}</small>
+      </button>
+      <button
+        v-for="item in WALLPAPERS"
+        :key="item.id"
+        class="wallpapers__card"
+        :data-wallpaper="item.id"
+        :aria-pressed="wallpaperId === item.id"
+        @click="select(item.id)"
+      >
+        <span
+          class="wallpapers__swatch"
+          :style="{ backgroundImage: item.background }"
+          aria-hidden="true"
+        ></span>
+        <span>{{ t(`wallpapers.${item.id}`) }}</span>
+        <small>{{ t(wallpaperId === item.id ? 'wallpapers.selected' : 'wallpapers.apply') }}</small>
+      </button>
+    </div>
+    <p class="wallpapers__status" role="status">{{ feedback }}</p>
+    <section class="wallpapers__sample">
+      <h2>{{ t('wallpapers.preview') }}</h2>
+      <p>{{ t('wallpapers.readability') }}</p>
+      <nav>
+        <router-link to="/">{{ t('footer.home') }}</router-link>
+        <router-link to="/b">{{ t('footer.blackHole') }}</router-link>
+        <router-link to="/n">{{ t('footer.notifications') }}</router-link>
+      </nav>
+    </section>
+  </main>
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Header from '../components/utils/Header.vue'
+import Footer from '../components/utils/Footer.vue'
+import { WALLPAPERS, wallpaperId, setWallpaper, type WallpaperId } from '../services/wallpapers'
+
+const { t } = useI18n()
+const feedback = ref('')
+function select(id: WallpaperId | null) {
+  try {
+    setWallpaper(id)
+    feedback.value = t('wallpapers.saved')
+  } catch {
+    feedback.value = t('wallpapers.error')
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+.wallpapers {
+  height: calc(100dvh - 100px);
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: clamp(1rem, 4vw, 3rem);
+  color: #24394b;
+}
+.wallpapers__intro,
+.wallpapers__grid,
+.wallpapers__sample,
+.wallpapers__status {
+  max-width: 64rem;
+  margin: 0 auto 1.5rem;
+}
+.wallpapers__intro p {
+  font-size: 1.1rem;
+  line-height: 1.7;
+}
+.wallpapers__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: 1rem;
+}
+.wallpapers__card {
+  padding: 0.6rem;
+  border: 2px solid transparent;
+  border-radius: 0.75rem;
+  background: #fff;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  box-shadow: 0 2px 12px #1c436512;
+  font: inherit;
+}
+.wallpapers__card[aria-pressed='true'] {
+  border-color: #0185c5;
+}
+.wallpapers__card:focus-visible {
+  outline: 3px solid #0185c5;
+  outline-offset: 3px;
+}
+.wallpapers__swatch {
+  display: block;
+  aspect-ratio: 4 / 3;
+  border-radius: 0.4rem;
+  margin-bottom: 0.9rem;
+}
+.wallpapers__default {
+  background: #f5f5f5;
+}
+.wallpapers__card > span:last-of-type {
+  display: block;
+  font-weight: 600;
+}
+small {
+  display: block;
+  margin-top: 0.5rem;
+  color: #526675;
+}
+.wallpapers__sample {
+  padding: 1.5rem;
+  background: #fffffff0;
+  border-radius: 0.75rem;
+  line-height: 1.7;
+}
+.wallpapers__sample h2 {
+  font-size: 1.1rem;
+  margin-top: 0;
+}
+.wallpapers__sample nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+a {
+  color: #006b9e;
+}
+.wallpapers__status {
+  min-height: 1.5em;
+}
+@media (max-width: 480px) {
+  .wallpapers__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+  }
+  .wallpapers__intro p {
+    font-size: 1rem;
+  }
+}
+</style>