feat(settings): 我的壁纸 pane(mywallpaper,主题分组,所有人可见)——能力复制自 Header 设置壁纸模态框(模态框保留不动):系统/校区/我的上传三组网格点选即保存(checkWallpaper)、当前值回显 store 用户设置、上传走 /api/wallpaperUpload、个人壁纸可删;零新接口(任务A)
This commit is contained in:
+133
-1
@@ -203,6 +203,75 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的壁纸(所有人;2026-10-02 任务A:能力复制自 Header「设置壁纸」模态框——点选即保存+上传,
|
||||
模态框保留不动;管理员另有「外观→壁纸设置」管理 pane(上传入库/删除/应用),两者共用同一组接口) -->
|
||||
<div v-else-if="curPane === 'mywallpaper'" class="pane">
|
||||
<div class="pane-head">
|
||||
<h3>我的壁纸</h3>
|
||||
<p>选择桌面背景壁纸:系统与校区壁纸直接选用,也可上传个人壁纸;点击缩略图即保存生效。</p>
|
||||
</div>
|
||||
<div class="sec-card">
|
||||
<h4>系统壁纸 <span class="tag">平台内置</span></h4>
|
||||
<div class="wall-grid">
|
||||
<div v-if="myWallGroups.sys.length === 0" class="logo-empty">暂无壁纸</div>
|
||||
<div
|
||||
v-for="w in myWallGroups.sys"
|
||||
:key="w.id"
|
||||
:class="['wall-item', { sel: myWallSelected === w.url }]"
|
||||
:style="{ background: 'center / cover no-repeat url(' + w.url + ')' }"
|
||||
@click="onPickMyWallpaper(w)"
|
||||
>
|
||||
<i class="tick">✓</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sec-card">
|
||||
<h4>校区壁纸 <span class="tag">本校上传</span></h4>
|
||||
<div class="wall-grid">
|
||||
<div v-if="myWallGroups.sch.length === 0" class="logo-empty">暂无壁纸</div>
|
||||
<div
|
||||
v-for="w in myWallGroups.sch"
|
||||
:key="w.id"
|
||||
:class="['wall-item', { sel: myWallSelected === w.url }]"
|
||||
:style="{ background: 'center / cover no-repeat url(' + w.url + ')' }"
|
||||
@click="onPickMyWallpaper(w)"
|
||||
>
|
||||
<i class="tick">✓</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 个人上传壁纸(type=2):普通用户上传即入此组,可选用可删除;无个人壁纸时整卡不占位 -->
|
||||
<div v-if="myWallGroups.mine.length > 0" class="sec-card">
|
||||
<h4>我的上传 <span class="tag">仅自己可见</span></h4>
|
||||
<div class="wall-grid">
|
||||
<div
|
||||
v-for="w in myWallGroups.mine"
|
||||
:key="w.id"
|
||||
:class="['wall-item', { sel: myWallSelected === w.url }]"
|
||||
:style="{ background: 'center / cover no-repeat url(' + w.url + ')' }"
|
||||
@click="onPickMyWallpaper(w)"
|
||||
>
|
||||
<i v-if="w.isEdit" class="del" title="删除" @click.stop="onDeleteMyWallpaper(w)">×</i>
|
||||
<i class="tick">✓</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sec-card">
|
||||
<h4>上传壁纸</h4>
|
||||
<div class="form-row form-row--last form-row--top">
|
||||
<span class="lb">选择图片</span>
|
||||
<div class="ctl">
|
||||
<Upload :on-success="onMyWallpaperUploaded" :show-upload-list="false"
|
||||
:action="$conf.serviceHost + '/api/wallpaperUpload'"
|
||||
accept="image/jpeg, image/jpg, image/png" :with-credentials="true" :headers="uploadHeaders">
|
||||
<button class="btn ghost sm">选择文件</button>
|
||||
</Upload>
|
||||
<span class="hint">建议 1920×1080 以上,≤ 5MB;上传后进入「我的上传」可选</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本校默认(仅管理员;主题设置 2026-09-30) -->
|
||||
<div v-else-if="curPane === 'schooltheme'" class="pane">
|
||||
<div class="pane-head">
|
||||
@@ -480,7 +549,7 @@ const isAdmin = computed(() => !!store.getIsAdmin);
|
||||
|
||||
/** 普通用户不可用的管理 pane(导航隐藏;URL 直达渲染 noperm 黄条,不白屏不报错) */
|
||||
const ADMIN_PANES = ["logo", "wallpaper", "sidebar", "sys", "statset", "backend", "schooltheme"];
|
||||
const ALL_PANES = ["profile", "password", "avatar", "mytheme", "schooltheme", "logo", "wallpaper", "sidebar", "sys", "statset", "backend", "noperm"];
|
||||
const ALL_PANES = ["profile", "password", "avatar", "mytheme", "mywallpaper", "schooltheme", "logo", "wallpaper", "sidebar", "sys", "statset", "backend", "noperm"];
|
||||
|
||||
const curPane = ref<string>("profile");
|
||||
|
||||
@@ -522,6 +591,8 @@ const NAV_ACCOUNT: NavItem[] = [
|
||||
];
|
||||
const NAV_THEME: NavItem[] = [
|
||||
{ key: "mytheme", name: "我的主题", icon: svgWrap('<circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18c1.5 0 2-1 2-2s-1-1.5-1-2.5 1-2 2.5-2H19a2 2 0 0 0 2-2 9 9 0 0 0-9-9z"/><circle cx="7.5" cy="11" r="1"/><circle cx="12" cy="7.5" r="1"/><circle cx="16.5" cy="11" r="1"/>') },
|
||||
// 我的壁纸(2026-10-02 任务A):普通用户壁纸自选 pane,能力复制自 Header 设置壁纸模态框(模态框保留不动)
|
||||
{ key: "mywallpaper", name: "我的壁纸", icon: svgWrap('<path d="M5 3.5A9 9 0 1 0 20.5 12H5z"/><path d="M5 3.5V12h15.5"/>') },
|
||||
{ key: "schooltheme", name: "本校默认", icon: svgWrap('<path d="M4 21V8l8-5 8 5v13"/><path d="M4 21h16"/><path d="M12 11v4"/><circle cx="12" cy="9" r="2"/>'), adminOnly: true },
|
||||
];
|
||||
const NAV_APPEARANCE: NavItem[] = [
|
||||
@@ -744,6 +815,67 @@ async function onApplyWallpaper() {
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== mywallpaper:个人壁纸 pane(2026-10-02 任务A)=====
|
||||
* 能力复制自 Header「设置壁纸」模态框(模态框保留不动):列表 getUserWallpaperList(type 0=系统/1=校区/2=个人)、
|
||||
* 点选即保存 checkWallpaper(与模态框 onClickWallpaper 同语义)、上传走 /api/wallpaperUpload(普通用户落 type=2 个人壁纸)、
|
||||
* 自己上传的可删(deleteWallById,isEdit 标记与模态框一致);选中态回显 store 用户设置 wallpaperUrl。 */
|
||||
const myWallpaperList = ref<any[]>([]);
|
||||
const myWallGroups = computed(() => {
|
||||
const list = myWallpaperList.value || [];
|
||||
return {
|
||||
sys: list.filter(x => x.type === 0),
|
||||
sch: list.filter(x => x.type === 1),
|
||||
mine: list.filter(x => x.type === 2),
|
||||
};
|
||||
});
|
||||
/** 当前生效壁纸(回显选中态,Header 模态框 getIsWallpaper 同源) */
|
||||
const myWallSelected = computed(() => store.getCurWallPaperUrl || "");
|
||||
|
||||
async function loadMyWallpaperList() {
|
||||
try {
|
||||
const list = (await UserSettingApi.getUserWallpaperList(store.getCurSchId)) || [];
|
||||
// 与 Header 模态框同序:type 升序(系统→校区→个人),同 type 按 id 升序
|
||||
list.sort((a: any, b: any) => (a.type === b.type ? a.id - b.id : a.type - b.type));
|
||||
myWallpaperList.value = list;
|
||||
} catch (e) {
|
||||
myWallpaperList.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
/** 点选即保存(无保存按钮,与 Header 模态框行为一致);成功后同步 store 即时生效 */
|
||||
async function onPickMyWallpaper(w: any) {
|
||||
if (myWallSelected.value === w.url) return;
|
||||
await UserSettingApi.checkWallpaper(store.getCurSchId, w.url);
|
||||
const userSetting = store.curUserSettingInfo;
|
||||
if (!!userSetting) {
|
||||
userSetting.wallpaperUrl = w.url;
|
||||
store.setCurUserSettingsInfo(userSetting);
|
||||
}
|
||||
Message.success("壁纸已应用");
|
||||
}
|
||||
|
||||
async function onDeleteMyWallpaper(w: any) {
|
||||
await MyConfirm({
|
||||
title: "删除",
|
||||
msg: "确定删除该壁纸吗?",
|
||||
info: "删除后无法恢复!",
|
||||
async onOk() {
|
||||
await UserSettingApi.deleteWallById(w.id);
|
||||
await loadMyWallpaperList();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function onMyWallpaperUploaded() {
|
||||
Message.success("上传成功");
|
||||
loadMyWallpaperList();
|
||||
}
|
||||
|
||||
// 打开我的壁纸 pane 时拉一次可选列表(所有人)
|
||||
watch(curPane, pane => {
|
||||
if (pane === "mywallpaper") loadMyWallpaperList();
|
||||
});
|
||||
|
||||
// 首次切到 logo / wallpaper pane 时懒加载管理列表
|
||||
watch(curPane, pane => {
|
||||
if ((pane === "logo" || pane === "wallpaper") && isAdmin.value && logoManageList.value.length === 0 && wallpaperManageList.value.length === 0) {
|
||||
|
||||
Reference in New Issue
Block a user