feat(user): complete growth level chain
@@ -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' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -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,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");
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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)); }
|
||||
}
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |