feat: custom background image with frosted glass effect by Copilot · Pull Request #51 · Moonrend/Classworks

Copilot · 2026-04-11T13:45:11Z

Users requested the ability to set a custom background image on the main view, with frosted glass (blur + dark overlay) controls.

Settings (`src/utils/settings.js`)

Added 5 new keys under background.*: enabled, url, imageData (base64), blur (0–50 px), opacity (0–80%)
Introduced SETTINGS_CHANGED_EVENT (classworks:settings:changed) — a custom DOM event dispatched from setSetting/resetSetting so watchSettings callbacks fire within the same tab, not just cross-tab via storage
watchSettings callback now receives the event as a second argument for key-based filtering

New component: `BackgroundSettingsCard.vue`

Enable/disable toggle via existing SettingItem
Image source: URL input (with Bing wallpaper / Unsplash presets) or local file upload (drag-and-drop; hard-capped at MAX_IMAGE_SIZE_MB = 2)
Blur and dark-overlay sliders with live preview
Reset restores all defaults and force-remounts SettingItem to keep the toggle in sync

App-level background rendering (`src/App.vue`)

Two position: fixed; z-index: -1 divs injected at the root when the background is enabled:

<div class="app-background-image" :style="bgImageStyle" />  <!-- blur filter + scale(1.05) to hide edge artifacts -->
<div class="app-background-overlay" :style="bgOverlayStyle" /> <!-- rgba dark overlay -->

v-app background is set to transparent when active. The watchSettings callback only reloads state when a background.* or theme.mode key changes.

Settings page (`src/pages/settings.vue`)

Added "背景" tab (mdi-image) wired to BackgroundSettingsCard.

vercel · 2026-04-11T13:45:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
classworks	Ready	Preview, Comment	Apr 11, 2026 1:59pm
homeworkpage-frontend	Error		Apr 11, 2026 1:59pm

- Add background settings (enabled, url, imageData, blur, opacity) to settings.js - Add watchSettings same-tab reactivity via custom DOM event dispatch - Create BackgroundSettingsCard.vue with URL input, file upload, sliders, preview - Apply background layer in App.vue with blur filter and dark overlay - Add background settings tab to settings.vue navigation Agent-Logs-Url: https://github.com/ZeroCatDev/Classworks/sessions/6dfae4c0-df49-4612-88b8-9e31287538b0 Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com>

cloudflare-workers-and-pages · 2026-04-11T13:53:36Z

Deploying classworks with Cloudflare Pages

Latest commit:	`1f33d6d`
Status:	✅ Deploy successful!
Preview URL:	https://d820541a.classworks.pages.dev
Branch Preview URL:	https://copilot-add-custom-backgroun.classworks.pages.dev

View logs

- Use SETTINGS_CHANGED_EVENT constant to prevent typos - Enforce 2MB image size limit (block upload instead of warn) - Fix resetAll to force re-render SettingItem for enabled toggle - Optimize watchSettings callback to only reload on relevant key changes Agent-Logs-Url: https://github.com/ZeroCatDev/Classworks/sessions/6dfae4c0-df49-4612-88b8-9e31287538b0 Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com>

…r messages Agent-Logs-Url: https://github.com/ZeroCatDev/Classworks/sessions/6dfae4c0-df49-4612-88b8-9e31287538b0 Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com>

Copilot

Pull request overview

Adds a configurable custom background image feature to the app, wired through the existing settings system and surfaced in the Settings UI.

Changes:

Added background-related settings definitions and extended watchSettings to also react to same-tab setting changes via a custom DOM event.
Introduced BackgroundSettingsCard.vue for configuring background source (URL/upload), blur, opacity, and preview.
Updated App.vue and settings.vue to render/apply the background layer and expose a new “背景” settings tab.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
src/utils/settings.js	Adds background settings keys; adds same-tab settings change notifications and updates `watchSettings` listeners.
src/pages/settings.vue	Adds a new “背景” tab and registers `BackgroundSettingsCard`.
src/components/settings/cards/BackgroundSettingsCard.vue	New UI card for background configuration, upload handling, and preview.
src/App.vue	Renders/apply background image + overlay and reacts to settings changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

-    const handler = (event) => {
+    const storageHandler = (event) => {
      if (event.key === SETTINGS_STORAGE_KEY) {
        this.settingsCache = JSON.parse(event.newValue);


-  <v-app>
+  <v-app :style="vAppStyle">
+    <!-- 自定义背景层 -->
+    <template v-if="bgEnabled">


+  unwatchSettings = watchSettings((_, event) => {
+    // If event detail is available (same-tab change), only reload on background keys
+    const changedKey = event?.detail?.key;
+    if (!changedKey || changedKey.startsWith("background.") || changedKey === "theme.mode") {
+      loadBgSettings();
+      theme.global.name.value = getSetting("theme.mode");
+    }


+
+    async saveAll() {
+      this.saving = true;
+      try {
+        // Determine which image source to persist
+        if (this.imageSource === 'upload') {
+          setSetting('background.imageData', this.localImageData || '');
+          setSetting('background.url', '');
+        } else {
+          setSetting('background.url', this.localUrl || '');
+          setSetting('background.imageData', '');


+    processFile(file) {
+      this.uploadWarning = '';
+
+      if (!file.type.startsWith('image/')) {
+        this.uploadWarning = '请选择图片文件';


+
+      const sizeMB = file.size / 1024 / 1024;
+      if (sizeMB > MAX_IMAGE_SIZE_MB) {
+        this.uploadWarning = `图片大小为 ${sizeMB.toFixed(1)}MB，超过 ${MAX_IMAGE_SIZE_MB}MB 限制，请压缩后重试`;
+        return;


+          :class="{ 'upload-hover': isDragging }"
+          @dragover.prevent="isDragging = true"
+          @dragleave="isDragging = false"
+          @drop.prevent="handleDrop"
+          @click="triggerFileInput"


Initial plan

f842429

Copilot AI self-assigned this Apr 11, 2026

Copilot AI linked an issue Apr 11, 2026 that may be closed by this pull request

【功能】添加自定义背景图 #46

Closed

vercel Bot deployed to Preview – classworks April 11, 2026 13:45 View deployment

vercel Bot had a problem deploying to Preview – homeworkpage-frontend April 11, 2026 13:45 Failure

vercel Bot deployed to Preview April 11, 2026 13:54 View deployment

vercel Bot deployed to Preview April 11, 2026 13:57 View deployment

fix: use MAX_IMAGE_SIZE_MB constant consistently in template and erro…

1f33d6d

…r messages Agent-Logs-Url: https://github.com/ZeroCatDev/Classworks/sessions/6dfae4c0-df49-4612-88b8-9e31287538b0 Co-authored-by: Sunwuyuan <88357633+Sunwuyuan@users.noreply.github.com>

vercel Bot deployed to Preview April 11, 2026 13:59 View deployment

Copilot AI changed the title ~~[WIP] Add custom background image feature~~ feat: custom background image with frosted glass effect Apr 11, 2026

Copilot AI requested a review from Sunwuyuan April 11, 2026 13:59

Sunwuyuan merged commit dd68ef7 into main Apr 11, 2026
5 checks passed

Copilot AI reviewed Apr 11, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: custom background image with frosted glass effect#51

feat: custom background image with frosted glass effect#51
Sunwuyuan merged 4 commits into
mainfrom
copilot/add-custom-background-image

Copilot AI commented Apr 11, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Apr 11, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 11, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Settings (src/utils/settings.js)

New component: BackgroundSettingsCard.vue

App-level background rendering (src/App.vue)

Settings page (src/pages/settings.vue)

Uh oh!

vercel Bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying classworks with Cloudflare Pages

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Apr 11, 2026 •

edited

Loading

Settings (`src/utils/settings.js`)

New component: `BackgroundSettingsCard.vue`

App-level background rendering (`src/App.vue`)

Settings page (`src/pages/settings.vue`)

vercel Bot commented Apr 11, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Apr 11, 2026 •

edited

Loading