feat(user): complete growth level chain

This commit is contained in:
2026-07-30 09:38:45 +08:00
parent b2e6045117
commit 20c19dfe31
39 changed files with 739 additions and 633 deletions
+22 -11
View File
@@ -33,9 +33,6 @@
<n-form-item v-if="form.user_level_s" label="公开页显示等级">
<n-switch v-model:value="form.user_level_public_display" />
</n-form-item>
<n-form-item v-if="form.user_level_s" label="等级前缀">
<n-input v-model:value="form.user_level_prefix" maxlength="12" style="width: 180px;" />
</n-form-item>
<n-form-item v-if="form.user_level_s" label="最高等级">
<n-input-number v-model:value="form.user_level_max" :min="3" :max="30" style="width: 180px;" @update:value="onMaxChange" />
</n-form-item>
@@ -101,7 +98,6 @@ const saving = ref(false)
const form = reactive({
user_level_s: true,
user_level_public_display: true,
user_level_prefix: 'Lv.',
user_level_max: 10,
user_level_opt: defaultLevelOpt(10),
user_integral_opt: defaultIntegralOpt(),
@@ -116,7 +112,7 @@ const levelRows = computed(() => {
for (let i = 1; i <= max; i++) {
rows.push({
level: i,
name: form.user_level_opt['name_' + i] ?? form.user_level_prefix + i,
name: form.user_level_opt['name_' + i] ?? 'LV' + i,
upgrade: Number(form.user_level_opt['upgrade_integral_' + i] ?? 0),
})
}
@@ -137,6 +133,19 @@ const levelColumns = [
},
}),
},
{
title: '等级图标 URL',
key: 'icon',
render: (row) =>
h(NInput, {
value: form.user_level_opt['icon_img_' + row.level] ?? '',
size: 'small',
placeholder: row.level <= 10 ? '留空使用主题内置图标' : '请输入图片 URL',
onUpdateValue: (v) => {
form.user_level_opt['icon_img_' + row.level] = v
},
}),
},
{
title: '升级所需累计经验',
key: 'upgrade',
@@ -173,7 +182,10 @@ function onMaxChange(val) {
next['upgrade_integral_' + i] = filled['upgrade_integral_' + i]
}
if (next['name_' + i] === undefined) {
next['name_' + i] = form.user_level_prefix + i
next['name_' + i] = 'LV' + i
}
if (next['icon_img_' + i] === undefined) {
next['icon_img_' + i] = ''
}
}
// drop extras
@@ -214,6 +226,9 @@ function normalizeLevelOpt(raw, max) {
if (raw['name_' + i] !== undefined) {
base['name_' + i] = String(raw['name_' + i] || '')
}
if (raw['icon_img_' + i] !== undefined) {
base['icon_img_' + i] = String(raw['icon_img_' + i] || '')
}
}
return base
}
@@ -223,10 +238,9 @@ async function load() {
try {
const schemaRes = await api.getSchemaPage('users', 'level')
const d = extractData(schemaRes)
const enabled = d.user_level_s !== undefined ? !!d.user_level_s : !!d.user_level_enabled
const enabled = d.user_level_s !== false
form.user_level_s = enabled
form.user_level_public_display = d.user_level_public_display !== false
form.user_level_prefix = d.user_level_prefix || 'Lv.'
form.user_level_max = Math.max(3, Math.min(30, Number(d.user_level_max || 10)))
form.user_level_notify = d.user_level_notify !== false
form.user_level_opt = normalizeLevelOpt(d.user_level_opt, form.user_level_max)
@@ -244,12 +258,9 @@ async function handleSave() {
const max = Math.max(3, Math.min(30, Number(form.user_level_max) || 10))
const payload = {
user_level_s: !!form.user_level_s,
user_level_enabled: !!form.user_level_s,
user_level_public_display: !!form.user_level_public_display,
user_level_prefix: form.user_level_prefix || 'Lv.',
user_level_max: max,
user_level_notify: !!form.user_level_notify,
user_level_source: 'integral',
user_level_opt: normalizeLevelOpt(form.user_level_opt, max),
user_integral_opt: normalizeIntegral(form.user_integral_opt),
}
@@ -4,7 +4,7 @@ export const featuresSchema = {
icon: 'fas fa-user-cog',
description: '配置用户中心和个人主页的功能模块。',
defaults: {
user_center_tabs: 'profile,posts,comments,favorites,vip,credits,auth',
user_center_tabs: 'profile,level,posts,comments,favorites,vip,credits,auth',
user_cover_upload: true,
user_social_links: true,
user_desc_std: '这家伙很懒…',
@@ -24,7 +24,7 @@ export const featuresSchema = {
title: '用户中心',
icon: 'fas fa-user-shield',
fields: [
{ key: 'user_center_tabs', label: '用户中心 Tab', type: 'input', default: 'profile,posts,comments,favorites,vip,credits,auth', help: '逗号分隔。auth=官方认证;vip、订单和认证会按功能开关自动注入' },
{ key: 'user_center_tabs', label: '用户中心 Tab', type: 'input', default: 'profile,level,posts,comments,favorites,vip,credits,auth', help: '逗号分隔。level=我的等级;auth=官方认证;等级、VIP、订单和认证会按功能开关自动注入' },
{ key: 'user_cover_upload', label: '封面上传', type: 'switch', default: true },
{ key: 'user_social_links', label: '社交链接', type: 'switch', default: true },
{ key: 'user_desc_std', label: '默认签名', type: 'input', default: '这家伙很懒…', help: '用户未设置个人简介时显示的默认文案' },
@@ -24,9 +24,9 @@ export const INTEGRAL_CATALOG = [
export function defaultLevelOpt(max = 10) {
const opt = {}
for (let i = 1; i <= max; i++) {
// Rough Zibll-like curve: LV1=0, then grows
opt['upgrade_integral_' + i] = i === 1 ? 0 : Math.round(20 * Math.pow(i - 1, 1.6))
opt['name_' + i] = 'Lv.' + i
opt['upgrade_integral_' + i] = i === 1 ? 0 : (i - 1) * 500 * i
opt['name_' + i] = 'LV' + i
opt['icon_img_' + i] = ''
}
return opt
}
@@ -47,7 +47,6 @@ export const levelSchema = {
defaults: {
user_level_s: true,
user_level_public_display: true,
user_level_prefix: 'Lv.',
user_level_max: 10,
user_level_opt: defaultLevelOpt(10),
user_integral_opt: defaultIntegralOpt(),
@@ -60,7 +59,6 @@ export const levelSchema = {
fields: [
{ key: 'user_level_s', label: '启用用户等级', type: 'switch', default: true },
{ key: 'user_level_public_display', label: '公开页显示等级', type: 'switch', default: true, dependsOn: { key: 'user_level_s', value: true } },
{ key: 'user_level_prefix', label: '等级前缀', type: 'input', default: 'Lv.', dependsOn: { key: 'user_level_s', value: true } },
{ key: 'user_level_max', label: '最高等级', type: 'number', default: 10, min: 3, max: 30, dependsOn: { key: 'user_level_s', value: true } },
{ key: 'user_level_notify', label: '升级通知', type: 'switch', default: true, dependsOn: { key: 'user_level_s', value: true } },
],
@@ -69,14 +67,14 @@ export const levelSchema = {
key: 'level_opt',
title: '等级升级阈值',
fields: [
{ key: 'user_level_opt', label: '升级经验配置', type: 'json', default: defaultLevelOpt(10), help: 'upgrade_integral_N 为升到 N 级所需累计经验' },
{ key: 'user_level_opt', label: '升级经验配置', type: 'json', sanitizeType: 'array', default: defaultLevelOpt(10), help: 'upgrade_integral_N 为升到 N 级所需累计经验' },
],
},
{
key: 'integral',
title: '经验值得分',
fields: [
{ key: 'user_integral_opt', label: '经验值获取', type: 'json', default: defaultIntegralOpt(), help: 'day_max + 各行为得分;对应功能未开则将分值设 0' },
{ key: 'user_integral_opt', label: '经验值获取', type: 'json', sanitizeType: 'array', default: defaultIntegralOpt(), help: 'day_max + 各行为得分;对应功能未开则将分值设 0' },
],
},
],
+8
View File
@@ -535,6 +535,14 @@
color: #fff;
}
.aksrt-user-level-icon {
display: inline-block;
width: auto;
height: 1.15em;
max-width: 6em;
object-fit: contain;
vertical-align: -.18em;
}
/* 用户中心 layout 间距;双栏 / sticky 见 user-center/shell.css(body.aksrt-user-center)。 */
.aksrt-profile__layout {
+1
View File
@@ -1,4 +1,5 @@
@import url("user-center/shell.css");
@import url("user-center/credits.css");
@import url("user-center/level.css");
@import url("user-center/settings.css");
@import url("user-center/responsive.css");
-32
View File
@@ -1031,38 +1031,6 @@ body.uc-modal-open {
.uc-badges-empty { padding: 16px 0; text-align: center; }
/* Level / integral card */
.uc-level-card {
margin: 16px 0;
padding: 16px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(240,68,148,.12), rgba(99,102,241,.10));
position: relative;
overflow: hidden;
}
.uc-level-card__badge { margin-top: 12px; }
.uc-level-card .progress,
.integral-progress.progress {
height: 8px;
border-radius: 999px;
background: rgba(127,127,127,.18);
overflow: hidden;
}
.uc-level-card .progress-bar {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #f04494, #6366f1);
}
.uc-level-growth__row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid rgba(127,127,127,.12);
font-size: 12px;
}
.uc-level-growth__row.is-done { opacity: .7; }
.uc-level-growth__row.is-next { font-weight: 700; color: var(--focus-color, #f04494); }
.uc-points-tasks__row.is-done { opacity: .72; }
.uc-points-tasks__progress-bar {
height: 6px;
+91
View File
@@ -0,0 +1,91 @@
/* User level — dedicated center panel */
.aksrt-user-level-icon {
display: inline-block;
width: auto;
height: 1.35em;
max-width: 6em;
object-fit: contain;
vertical-align: -.2em;
}
.aksrt-user-level-icon--admin { height: 22px; }
.uc-level-page { display: grid; gap: 16px; }
.uc-level-page .zib-widget {
margin: 0;
padding: 18px;
border: 1px solid var(--color-line-soft, rgba(0,0,0,.06));
border-radius: var(--main-radius, 10px);
background: var(--main-bg-color, var(--surface-1, #fff));
box-shadow: 0 0 10px var(--main-shadow, rgba(116,116,116,.08));
}
.uc-level-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.10)) !important;
}
.uc-level-hero::after {
content: '';
position: absolute;
width: 220px;
height: 220px;
right: -80px;
top: -100px;
border-radius: 50%;
background: rgba(255,255,255,.2);
pointer-events: none;
}
.uc-level-hero__identity { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.uc-level-hero__identity p { margin: 0 0 3px; color: var(--muted-2-color, #8b9198); font-size: 12px; }
.uc-level-hero__identity h2 { margin: 0; font-size: 22px; }
.uc-level-hero__icon {
display: grid;
place-items: center;
width: 62px;
height: 62px;
border-radius: 16px;
background: rgba(255,255,255,.62);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.uc-level-hero__icon .aksrt-user-level-icon { max-width: 48px; height: 42px; }
.uc-level-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 20px 0 16px; position: relative; z-index: 1; }
.uc-level-hero__stats > div { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.46); }
.uc-level-hero__stats strong, .uc-level-hero__stats span { display: block; }
.uc-level-hero__stats strong { font-size: 18px; }
.uc-level-hero__stats span { margin-top: 3px; font-size: 11px; color: var(--muted-2-color, #747b83); }
.uc-level-hero__progress { position: relative; z-index: 1; }
.uc-level-hero__progress-meta { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.uc-level-progress { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(127,127,127,.18); }
.uc-level-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #ec4899); }
.uc-level-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.uc-level-section__head h3 { margin: 0; font-size: 16px; }
.uc-level-section__head span { color: var(--muted-2-color, #8b9198); font-size: 11px; }
.uc-level-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.uc-level-road__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px; border: 1px solid var(--color-line-soft, rgba(0,0,0,.06)); border-radius: 10px; opacity: .58; text-align: center; }
.uc-level-road__item.is-done { opacity: .78; }
.uc-level-road__item.is-current { opacity: 1; border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.12); }
.uc-level-road__item.is-current::after { content: '当前'; position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 999px; background: #8b5cf6; color: #fff; font-size: 9px; }
.uc-level-road__icon { display: grid; place-items: center; height: 40px; }
.uc-level-road__icon img { max-width: 52px; max-height: 38px; object-fit: contain; }
.uc-level-road__icon span { font-weight: 800; color: #7c3aed; }
.uc-level-road__item strong { font-size: 12px; }
.uc-level-road__item small { color: var(--muted-2-color, #8b9198); font-size: 10px; }
.uc-level-history-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(240px,.65fr); gap: 16px; }
.uc-level-ledger, .uc-level-dates { display: grid; }
.uc-level-ledger__row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,.05)); }
.uc-level-ledger__row:last-child, .uc-level-dates > div:last-child { border-bottom: 0; }
.uc-level-ledger__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(124,58,237,.10); color: #7c3aed; }
.uc-level-ledger__row strong, .uc-level-ledger__row time { display: block; }
.uc-level-ledger__row strong { font-size: 13px; }
.uc-level-ledger__row time { margin-top: 2px; color: var(--muted-2-color, #8b9198); font-size: 10px; }
.uc-level-ledger__row b { color: #16a34a; font-size: 13px; }
.uc-level-dates > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,.05)); font-size: 12px; }
.uc-level-dates span { color: #16a34a; font-weight: 700; }
.uc-level-empty { margin: 0; padding: 24px 0; color: var(--muted-2-color, #8b9198); text-align: center; }
@media (max-width: 767px) {
.uc-level-hero__stats { grid-template-columns: 1fr; }
.uc-level-history-grid { grid-template-columns: 1fr; }
.uc-level-road { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB