Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front
This commit is contained in:
李志鹏
@@ -107,13 +107,42 @@ body,
|
||||
--mosaic-bg-size: 1rem;
|
||||
--mosaic-bg-color1: #efefef;
|
||||
--mosaic-bg-color2: #fff;
|
||||
background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
|
||||
background-image: repeating-conic-gradient(
|
||||
var(--mosaic-bg-color1) 0% 25%,
|
||||
var(--mosaic-bg-color2) 0% 50%
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.flex-center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
button[custom],
|
||||
button[custom="white"] {
|
||||
button[custom='white'] {
|
||||
min-width: 19.4rem;
|
||||
height: 5rem;
|
||||
padding: 0 1rem;
|
||||
@@ -126,11 +155,11 @@ button[custom="white"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
button[custom]:active,
|
||||
button[custom="white"]:active {
|
||||
button[custom='white']:active {
|
||||
background: var(--button-click-bgcolor, #e4e4e4);
|
||||
color: var(--button-click-color, #232323);
|
||||
}
|
||||
button[custom="black"] {
|
||||
button[custom='black'] {
|
||||
--button-bgcolor: #232323;
|
||||
--button-color: #fff;
|
||||
--button-click-bgcolor: #333;
|
||||
|
||||
5
src/assets/icons/ThumbEdit.svg
Normal file
5
src/assets/icons/ThumbEdit.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="15" cy="15" r="14.5" fill="#232323" stroke="white"/>
|
||||
<path d="M8.18359 19.5693V22.3285H11.8137C12.056 22.3285 12.2879 22.2298 12.4559 22.055L22.7247 11.3755C23.061 11.0257 23.0556 10.4711 22.7125 10.128L20.4083 7.82384C20.0557 7.47124 19.4824 7.47665 19.1365 7.83584L8.43278 18.9513C8.27291 19.1173 8.18359 19.3388 8.18359 19.5693Z" stroke="white" stroke-width="0.89098" stroke-linecap="round"/>
|
||||
<path d="M17.9883 8.96387L21.5522 12.5278" stroke="white" stroke-width="0.89098" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 641 B |
BIN
src/assets/images/edit.png
Normal file
BIN
src/assets/images/edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 928 B |
@@ -7,37 +7,41 @@ import { createRouter, createWebHistory } from 'vue-router'
|
||||
* 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
|
||||
*/
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/'),
|
||||
// history: createWebHistory(import.meta.env.VITE_APP_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/home/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/collectionStory',
|
||||
name: 'collectionStory',
|
||||
component: () => import('../views/collectionStory/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/brand',
|
||||
name: 'brand',
|
||||
component: () => import('../views/brand/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)',
|
||||
name: '404',
|
||||
component: () => import('../views/404.vue'),
|
||||
},
|
||||
]
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/home/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/collectionStory',
|
||||
name: 'collectionStory',
|
||||
component: () => import('../views/collectionStory/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/brand',
|
||||
name: 'brand',
|
||||
component: () => import('../views/brand/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
component: () => import('@/views/setting/index.vue'),
|
||||
meta: { cache: true }
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)',
|
||||
name: '404',
|
||||
component: () => import('../views/404.vue')
|
||||
}
|
||||
],
|
||||
history: createWebHistory('/')
|
||||
})
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
next()
|
||||
next()
|
||||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
})
|
||||
router.afterEach(() => {})
|
||||
|
||||
export default router
|
||||
|
||||
99
src/views/setting/components/Radio.vue
Normal file
99
src/views/setting/components/Radio.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="radio-button-group">
|
||||
<button
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
type="button"
|
||||
:class="[
|
||||
'radio-button',
|
||||
{
|
||||
'is-active': multiple ? selectedValues.includes(item.value) : modelValue === item.value
|
||||
}
|
||||
]"
|
||||
@click="selectOption(item.value)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Option {
|
||||
name: string | number
|
||||
value: string | number | boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string | number | boolean | Array<string | number | boolean> | null
|
||||
options: Option[] // 按钮选项数组
|
||||
multiple?: boolean // 是否支持多选，默认为 false
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: any): void
|
||||
}>()
|
||||
|
||||
const multiple = props.multiple === true
|
||||
|
||||
const selectedValues = computed(() => {
|
||||
if (!multiple) {
|
||||
return typeof props.modelValue === 'undefined' || props.modelValue === null
|
||||
? []
|
||||
: [props.modelValue]
|
||||
}
|
||||
|
||||
return Array.isArray(props.modelValue) ? props.modelValue : []
|
||||
})
|
||||
|
||||
const selectOption = (value: any) => {
|
||||
if (multiple) {
|
||||
const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
|
||||
const index = current.indexOf(value)
|
||||
if (index >= 0) {
|
||||
current.splice(index, 1)
|
||||
} else {
|
||||
current.push(value)
|
||||
}
|
||||
emit('update:modelValue', current)
|
||||
return
|
||||
}
|
||||
|
||||
if (props.modelValue !== value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.radio-button-group {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
border: 1px solid #979797;
|
||||
height: 4rem;
|
||||
min-width: 8rem;
|
||||
padding: 0 2rem;
|
||||
color: #979797;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: #fff;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.radio-button:hover {
|
||||
border-color: #000;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.radio-button.is-active {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
border-color: #000;
|
||||
}
|
||||
</style>
|
||||
970
src/views/setting/index.vue
Normal file
970
src/views/setting/index.vue
Normal file
@@ -0,0 +1,970 @@
|
||||
<template>
|
||||
<div class="setting-wrapper mini-scrollbar">
|
||||
<div class="banner flex flex-center flex-col">
|
||||
<div class="title">Settings</div>
|
||||
<div class="slogan">Manage your account settings and preferences</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-content">
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Profile</div>
|
||||
<div class="label-desc">
|
||||
Update your display name, avatar, social links and account security.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container">
|
||||
<div class="profile-header flex align-center">
|
||||
<div class="avatar relative">
|
||||
<SvgIcon name="user_0" size="46" class="avatar-icon" />
|
||||
<button v-if="isEditing" type="button" class="avatar-edit-btn">
|
||||
<SvgIcon name="ThumbEdit" size="18" class="avatar-edit-icon" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="profile-summary flex flex-col">
|
||||
<div class="profile-name">{{ fullName }}</div>
|
||||
<div class="profile-email">{{ displayData.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="isEditing">
|
||||
<div class="form-container flex flex-col">
|
||||
<div class="flex col-gap-2">
|
||||
<div class="form-item">
|
||||
<div class="form-item-label">FIRST NAME</div>
|
||||
<div class="form-item-value name">
|
||||
<el-input v-model="draftData.firstName" placeholder="First Name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item-label">LAST NAME</div>
|
||||
<div class="form-item-value name">
|
||||
<el-input v-model="draftData.lastName" placeholder="Last Name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-item-label">USERNAME</div>
|
||||
<div class="form-item-value">
|
||||
<el-input v-model="draftData.username" placeholder="Username" />
|
||||
</div>
|
||||
<div class="form-tip">Your public username on Stylish Parade.</div>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<div class="form-item-label">ROLE</div>
|
||||
<div class="form-item-value noborder radio">
|
||||
<Radio multiple v-model="roleModel" :options="roleList" />
|
||||
</div>
|
||||
<div class="form-tip">Select up to 2 labels that suit you.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-links">
|
||||
<div class="title">SOCIAL LINKS</div>
|
||||
<div class="links-list flex flex-col">
|
||||
<div
|
||||
class="links-item flex align-center"
|
||||
v-for="(item, index) in draftData.links"
|
||||
:key="`edit-${index}`"
|
||||
>
|
||||
<div class="link-index">Link {{ index + 1 }}</div>
|
||||
<div class="link-href flex-1">
|
||||
<el-input v-model="draftData.links[index]" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="add-link-btn" @click="handleAddLink">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="read-section">
|
||||
<div class="read-row two-column">
|
||||
<div class="read-item">
|
||||
<div class="read-label">FIRST NAME</div>
|
||||
<div class="read-box">{{ displayData.firstName }}</div>
|
||||
</div>
|
||||
<div class="read-item">
|
||||
<div class="read-label">LAST NAME</div>
|
||||
<div class="read-box">{{ displayData.lastName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="read-row">
|
||||
<div class="read-label">USERNAME</div>
|
||||
<div class="read-box">{{ displayData.username }}</div>
|
||||
</div>
|
||||
<div class="read-tip">Your public username on Stylish Parade.</div>
|
||||
|
||||
<div class="read-row role-row">
|
||||
<div class="read-label">ROLE</div>
|
||||
<div class="role-tags">
|
||||
<div
|
||||
v-for="item in displayData.role"
|
||||
:key="item"
|
||||
class="role-tag is-active"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div
|
||||
v-for="item in inactiveRoleList"
|
||||
:key="`inactive-${item}`"
|
||||
class="role-tag"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="read-tip">Select up to 2 labels that suit you.</div>
|
||||
|
||||
<div class="social-links read-social-links">
|
||||
<div class="title">SOCIAL LINKS</div>
|
||||
<div class="links-list flex flex-col">
|
||||
<div
|
||||
class="links-item flex align-center"
|
||||
v-for="(item, index) in displayData.links"
|
||||
:key="`view-${index}`"
|
||||
>
|
||||
<div class="link-index">Link {{ index + 1 }}</div>
|
||||
<div class="link-href flex-1 readonly">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gap" />
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Security</div>
|
||||
<div class="label-desc">Manage your login email and password.</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container security-container">
|
||||
<div class="security-row">
|
||||
<div class="security-label">EMAIL</div>
|
||||
<template v-if="isEditing">
|
||||
<div class="inline-header flex align-center">
|
||||
<div class="security-static flex-1">{{ displayData.email }}</div>
|
||||
<button type="button" class="small-btn" @click="resetSecurityEmail">
|
||||
CANCEL
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="security-static">{{ displayData.email }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditing" class="security-row">
|
||||
<div class="security-label">NEW EMAIL ADDRESS</div>
|
||||
<div class="outlined-field verify-field">
|
||||
<el-input v-model="securityDraft.newEmail" placeholder="Enter new email" />
|
||||
<button type="button" class="verify-btn">Verify</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-divider" v-if="isEditing" />
|
||||
|
||||
<div class="security-row">
|
||||
<div class="security-label">PASSWORD</div>
|
||||
<template v-if="isEditing">
|
||||
<div class="inline-header flex align-center">
|
||||
<div class="security-static password-mask flex-1">.........</div>
|
||||
<button type="button" class="small-btn" @click="resetSecurityPassword">
|
||||
CANCEL
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="security-static password-mask">.........</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="isEditing">
|
||||
<div class="security-row">
|
||||
<div class="security-label">NEW PASSWORD</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
</div>
|
||||
<div class="security-tip">You must satisfy ALL password conditions to register.</div>
|
||||
</div>
|
||||
|
||||
<div class="security-row">
|
||||
<div class="security-label">CURRENT PASSWORD</div>
|
||||
<div class="outlined-field">
|
||||
<el-input
|
||||
v-model="securityDraft.currentPassword"
|
||||
type="password"
|
||||
show-password
|
||||
placeholder="Confirm with your password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gap" />
|
||||
|
||||
<div class="setting-item flex">
|
||||
<div class="label-container">
|
||||
<div class="label">Language & Region</div>
|
||||
<div class="label-desc">Set your preferred language, region and currency display.</div>
|
||||
</div>
|
||||
|
||||
<div class="context-container region-container">
|
||||
<div class="region-row">
|
||||
<div class="security-label">DISPLAY LANGUAGE</div>
|
||||
<template v-if="isEditing">
|
||||
<div class="outlined-field select-field">
|
||||
<el-select v-model="draftData.language" placeholder="Select language">
|
||||
<el-option
|
||||
v-for="item in languageList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="security-static field-box">{{ displayData.language }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="region-row">
|
||||
<div class="security-label">REGION</div>
|
||||
<template v-if="isEditing">
|
||||
<div class="outlined-field select-field">
|
||||
<el-select v-model="draftData.region" placeholder="Select region">
|
||||
<el-option
|
||||
v-for="item in regionList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="security-static field-box">{{ displayData.region }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gap bottom-gap" />
|
||||
|
||||
<div class="action-container flex">
|
||||
<template v-if="isEditing">
|
||||
<button type="button" class="primary-btn" :disabled="saving" @click="handleSave">
|
||||
{{ saving ? 'SAVING...' : 'SAVE CHANGE' }}
|
||||
</button>
|
||||
<button type="button" class="secondary-btn" :disabled="saving" @click="handleDiscard">
|
||||
DISCARD
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button type="button" class="primary-btn edit-btn" @click="handleEdit">EDIT</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { updateUserInfo } from '@/api/login'
|
||||
import { useUserInfoStore } from '@/stores'
|
||||
import Radio from './components/Radio.vue'
|
||||
|
||||
interface SettingsData {
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
username: string
|
||||
role: string[]
|
||||
links: string[]
|
||||
language: string
|
||||
region: string
|
||||
}
|
||||
|
||||
interface SecurityDraft {
|
||||
newEmail: string
|
||||
newPassword: string
|
||||
currentPassword: string
|
||||
}
|
||||
|
||||
const userInfoStore = useUserInfoStore()
|
||||
|
||||
const roleList = [
|
||||
'Fashion Enthusiast',
|
||||
'Content Creator',
|
||||
'Student',
|
||||
'Retail / Buyer',
|
||||
'Fashion Designer',
|
||||
'Brand / Business',
|
||||
'PR & Communications',
|
||||
'Stylist',
|
||||
'Graphic Designer',
|
||||
'3D Artist',
|
||||
'Other'
|
||||
].map((item) => ({ name: item, value: item }))
|
||||
|
||||
const languageList = ['English', 'Chinese', 'Japanese']
|
||||
const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']
|
||||
|
||||
const createFallbackData = (): SettingsData => ({
|
||||
firstName: 'Alexandra',
|
||||
lastName: 'Chen',
|
||||
email: 'alex.chen@gmail.com',
|
||||
username: '@alexandra_chen',
|
||||
role: ['Student', 'Graphic Designer'],
|
||||
links: ['https://instagram.com/username', 'https://...'],
|
||||
language: 'English',
|
||||
region: 'Hong Kong SAR'
|
||||
})
|
||||
|
||||
const normalizeArray = (value: unknown, fallback: string[] = []) => {
|
||||
if (!Array.isArray(value)) return fallback
|
||||
return value.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
|
||||
}
|
||||
|
||||
const createSettingsFromUserInfo = (userInfo: any): SettingsData => {
|
||||
const fallback = createFallbackData()
|
||||
const firstName = userInfo?.firstName || userInfo?.first_name || fallback.firstName
|
||||
const lastName = userInfo?.lastName || userInfo?.last_name || fallback.lastName
|
||||
return {
|
||||
firstName,
|
||||
lastName,
|
||||
email: userInfo?.email || fallback.email,
|
||||
username: userInfo?.username || fallback.username,
|
||||
role: normalizeArray(userInfo?.role || userInfo?.roles, fallback.role).slice(0, 2),
|
||||
links: normalizeArray(userInfo?.links || userInfo?.socialLinks, fallback.links),
|
||||
language: userInfo?.language || fallback.language,
|
||||
region: userInfo?.region || fallback.region
|
||||
}
|
||||
}
|
||||
|
||||
const cloneSettingsData = (data: SettingsData): SettingsData => ({
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
email: data.email,
|
||||
username: data.username,
|
||||
role: [...data.role],
|
||||
links: [...data.links],
|
||||
language: data.language,
|
||||
region: data.region
|
||||
})
|
||||
|
||||
const createEmptySecurityDraft = (): SecurityDraft => ({
|
||||
newEmail: '',
|
||||
newPassword: '',
|
||||
currentPassword: ''
|
||||
})
|
||||
|
||||
const sourceData = ref<SettingsData>(createSettingsFromUserInfo(userInfoStore.getUserInfo))
|
||||
const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
|
||||
const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
|
||||
const isEditing = ref(false)
|
||||
const saving = ref(false)
|
||||
|
||||
watch(
|
||||
() => userInfoStore.getUserInfo,
|
||||
(value) => {
|
||||
const next = createSettingsFromUserInfo(value)
|
||||
sourceData.value = next
|
||||
if (!isEditing.value) {
|
||||
draftData.value = cloneSettingsData(next)
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
const displayData = computed(() => (isEditing.value ? draftData.value : sourceData.value))
|
||||
|
||||
const fullName = computed(() => {
|
||||
const data = displayData.value
|
||||
return `${data.firstName} ${data.lastName}`.trim()
|
||||
})
|
||||
|
||||
const inactiveRoleList = computed(() => {
|
||||
const selected = new Set(sourceData.value.role)
|
||||
return roleList
|
||||
.map((item) => String(item.value))
|
||||
.filter((item) => !selected.has(item))
|
||||
})
|
||||
|
||||
const roleModel = computed({
|
||||
get: () => draftData.value.role,
|
||||
set: (value: string[]) => {
|
||||
draftData.value.role = value.slice(0, 2)
|
||||
}
|
||||
})
|
||||
|
||||
const resetDraftState = () => {
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = true
|
||||
}
|
||||
|
||||
const handleAddLink = () => {
|
||||
draftData.value.links.push('')
|
||||
}
|
||||
|
||||
const resetSecurityEmail = () => {
|
||||
securityDraft.value.newEmail = ''
|
||||
}
|
||||
|
||||
const resetSecurityPassword = () => {
|
||||
securityDraft.value.newPassword = ''
|
||||
securityDraft.value.currentPassword = ''
|
||||
}
|
||||
|
||||
const handleDiscard = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
const buildUpdatePayload = () => {
|
||||
const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
|
||||
return {
|
||||
firstName: draftData.value.firstName.trim(),
|
||||
lastName: draftData.value.lastName.trim(),
|
||||
username: draftData.value.username.trim(),
|
||||
email: nextEmail,
|
||||
password: securityDraft.value.newPassword.trim() || undefined,
|
||||
currentPassword: securityDraft.value.currentPassword.trim() || undefined,
|
||||
role: draftData.value.role,
|
||||
links: draftData.value.links.map((item) => item.trim()).filter(Boolean),
|
||||
language: draftData.value.language,
|
||||
region: draftData.value.region
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
const payload = buildUpdatePayload()
|
||||
saving.value = true
|
||||
try {
|
||||
await updateUserInfo(payload)
|
||||
const nextData = cloneSettingsData({
|
||||
...draftData.value,
|
||||
email: payload.email,
|
||||
links: payload.links.length ? payload.links : ['']
|
||||
})
|
||||
sourceData.value = nextData
|
||||
draftData.value = cloneSettingsData(nextData)
|
||||
userInfoStore.setUserInfo({
|
||||
...userInfoStore.getUserInfo,
|
||||
...payload
|
||||
})
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
isEditing.value = false
|
||||
ElMessage.success('Settings updated')
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting-wrapper {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #ffffff;
|
||||
|
||||
.banner {
|
||||
height: 14.8rem;
|
||||
row-gap: 1.2rem;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
|
||||
linear-gradient(90deg, #f2eee8 0%, #fbfaf8 40%, #f1ede7 100%);
|
||||
|
||||
.title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-content {
|
||||
padding: 4rem 18rem 7rem;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
column-gap: 21.4rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
width: 27.6rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 2.8rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.label-desc {
|
||||
width: 24rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.context-container {
|
||||
width: 58rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
column-gap: 2.6rem;
|
||||
margin-bottom: 3.6rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 50%;
|
||||
border: 0.1rem solid #d8d0c7;
|
||||
background: #faf7f3;
|
||||
}
|
||||
|
||||
.avatar-icon {
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.avatar-edit-btn {
|
||||
position: absolute;
|
||||
right: -0.2rem;
|
||||
bottom: -0.2rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 0.2rem solid #ffffff;
|
||||
border-radius: 50%;
|
||||
background: #232323;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-edit-icon {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.profile-summary {
|
||||
row-gap: 0.6rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 2.4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.profile-email {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.4rem;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
row-gap: 3rem;
|
||||
}
|
||||
|
||||
.col-gap-2 {
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.form-item-label,
|
||||
.read-label,
|
||||
.security-label {
|
||||
margin-bottom: 0.8rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.form-tip,
|
||||
.read-tip,
|
||||
.security-tip {
|
||||
margin-top: 0.8rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.6rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
.form-item-value {
|
||||
border: 0.1rem solid #979797;
|
||||
|
||||
&.noborder {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.name {
|
||||
width: 28.4rem;
|
||||
}
|
||||
|
||||
&.radio {
|
||||
width: 58rem;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
color: #232323;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.read-section {
|
||||
width: 58rem;
|
||||
}
|
||||
|
||||
.read-row + .read-row,
|
||||
.security-row + .security-row,
|
||||
.region-row + .region-row {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.read-row.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 28.4rem 28.4rem;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.read-box,
|
||||
.field-box {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
border: 0.1rem solid #979797;
|
||||
padding: 0.8rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.role-row {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.role-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.role-tag {
|
||||
min-width: 8rem;
|
||||
height: 4rem;
|
||||
padding: 0 1.2rem;
|
||||
border: 0.1rem solid #979797;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
color: #979797;
|
||||
|
||||
&.is-active {
|
||||
background: #232323;
|
||||
border-color: #232323;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin-top: 5.8rem;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
}
|
||||
|
||||
.social-links .title {
|
||||
font-size: 1.4rem;
|
||||
color: #585858;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
row-gap: 0.8rem;
|
||||
}
|
||||
|
||||
.links-item {
|
||||
column-gap: 3.4rem;
|
||||
}
|
||||
|
||||
.link-index {
|
||||
width: 4rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
color: #979797;
|
||||
}
|
||||
|
||||
.link-href {
|
||||
min-height: 4rem;
|
||||
border: 0.1rem solid #979797;
|
||||
color: #979797;
|
||||
|
||||
&.readonly {
|
||||
padding: 0.8rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
color: #9f9f9f;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
color: #9f9f9f;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.add-link-btn {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border: 0.1rem solid #f0ebe5;
|
||||
background: #f6f6f6;
|
||||
color: #b4aea6;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.security-static {
|
||||
min-height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.password-mask {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
letter-spacing: 0.08rem;
|
||||
}
|
||||
|
||||
.inline-header {
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.outlined-field {
|
||||
width: 58rem;
|
||||
border: 0.1rem solid #979797;
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-select__wrapper) {
|
||||
min-height: 4rem;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner),
|
||||
:deep(.el-select__selected-item),
|
||||
:deep(.el-select__placeholder) {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner::placeholder) {
|
||||
color: #9f9f9f;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-field {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
:deep(.el-input) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 7.6rem;
|
||||
border: none;
|
||||
border-left: 0.1rem solid #979797;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
font-size: 1.4rem;
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.small-btn,
|
||||
.secondary-btn,
|
||||
.primary-btn {
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #f6f6f6;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.small-btn {
|
||||
width: 10rem;
|
||||
height: 3.2rem;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2.6rem;
|
||||
}
|
||||
|
||||
.inner-divider {
|
||||
height: 0.05rem;
|
||||
margin: 2.8rem 0 3rem;
|
||||
background-color: #c4c4c4;
|
||||
}
|
||||
|
||||
.gap {
|
||||
height: 0.05rem;
|
||||
margin-top: 6rem;
|
||||
background-color: #c4c4c4;
|
||||
}
|
||||
|
||||
.bottom-gap {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
justify-content: center;
|
||||
column-gap: 1.2rem;
|
||||
margin-top: 2.8rem;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
height: 4.4rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.6rem;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
min-width: 23.6rem;
|
||||
border-color: #232323;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
padding: 0 2.4rem;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
width: 12rem;
|
||||
background: #ffffff;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.read-social-links {
|
||||
margin-top: 4.8rem;
|
||||
}
|
||||
|
||||
.security-container,
|
||||
.region-container {
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
|
||||
.role-tag,
|
||||
:deep(.radio-button) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.radio-button-group) {
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
:deep(.radio-button) {
|
||||
border: 0.1rem solid #979797;
|
||||
height: 4rem;
|
||||
min-width: 8rem;
|
||||
padding: 0 1.2rem;
|
||||
color: #979797;
|
||||
background-color: #fff;
|
||||
font-size: 1.4rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
}
|
||||
|
||||
:deep(.radio-button.is-active),
|
||||
:deep(.radio-button:hover) {
|
||||
border-color: #232323;
|
||||
color: #fff;
|
||||
background-color: #232323;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user