zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 完善注释

Browse Source
This commit is contained in:
Ironsp
2026-10-01 17:24:57 +08:00
parent 2b59f68fd7
commit 9f4a5c7cda
183 changed files with 485 additions and 3615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/profile/cpns/AboutPanel.vue
View File

@@ -82,7 +82,6 @@ const advantages = [
</template>
<style lang="less" scoped>
// 设计 19（关于我们）：区块标题 14 设计px w700、正文 13 设计px 灰、平铺无卡片底
.about-panel {
.flex(column, flex-start);
gap: @spacing-lg;
@@ -96,7 +95,7 @@ const advantages = [
}
&__title {
font-size: 11px; // 设计 14 → 11
font-size: 11px;
font-weight: 700;
color: @heading-color;
}
@@ -107,7 +106,6 @@ const advantages = [
line-height: 1.9;
}
// 设计 19：优势项为「标题 + 描述」同排平铺，标题亦为灰色加粗
&__advantages {
display: grid;
grid-template-columns: 1fr;

1
src/views/profile/cpns/AddressDialog.vue
View File

@@ -123,7 +123,6 @@ function onSave(): void {
</template>
<style lang="less" scoped>
// 与个人中心其它弹窗同规格（设计 22~27）：白卡 700px、蓝条标题、白底描边输入、等宽双按钮
.address-dialog {
position: fixed;
inset: 0;

8
src/views/profile/cpns/BindContactDialog.vue
View File

@@ -149,8 +149,6 @@ function onSubmit(): void {
</template>
<style lang="less" scoped>
// 设计 23~27（绑定/换绑/身份验证弹窗）：与修改密码弹窗同规格 —— 白卡 700px、蓝条标题、
// 白底描边输入、底部等宽双按钮；设计稿无蒙层压暗，遮罩透明。
.bind-dialog {
position: fixed;
inset: 0;
@@ -160,7 +158,7 @@ function onSubmit(): void {
overflow-y: auto;
&__panel {
width: 700px; // 设计 900 × 0.77
width: 700px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 48px);
overflow-y: auto;
@@ -173,7 +171,6 @@ function onSubmit(): void {
.scrollbar();
}
// 设计 22~26：蓝条 + 标题 15 设计px w700 深灰
&__title {
position: relative;
padding-left: 12px;
@@ -194,7 +191,6 @@ function onSubmit(): void {
}
}
// 设计 23：身份验证标题为纯蓝字 14 设计px（无蓝条）
&__title:has(+ .bind-dialog__desc) {
padding-left: 0;
font-size: 11px;
@@ -205,7 +201,6 @@ function onSubmit(): void {
}
}
// 设计 23：说明为纯灰字（非底色块）
&__desc {
padding: 0;
background: transparent;
@@ -265,7 +260,6 @@ function onSubmit(): void {
}
}
// 设计 24/25/26：底部等宽双按钮，次级 #EEF0F3、主色 #024FFF
&__footer {
.flex(row, flex-start);
gap: @spacing-sm;

9
src/views/profile/cpns/ChangePasswordDialog.vue
View File

@@ -4,7 +4,6 @@ import { ElMessage } from 'element-plus'
import { AppButton, PasswordStrength, SmsCodeInput } from '@/components'
interface Props {
/** 绑定手机号（脱敏展示） */
phone: string
}
@@ -120,8 +119,6 @@ function onSubmit(): void {
</template>
<style lang="less" scoped>
// 设计 22（修改密码弹窗）：白卡 900×~540 设计px、蓝条标题、白底描边输入 40 设计px、
// 整行蓝色主按钮；设计稿无蒙层压暗（页面原样可见），故遮罩透明。
.change-pwd-dialog {
position: fixed;
inset: 0;
@@ -131,7 +128,7 @@ function onSubmit(): void {
overflow-y: auto;
&__panel {
width: 700px; // 设计 900 × 0.77
width: 700px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 48px);
overflow-y: auto;
@@ -144,7 +141,6 @@ function onSubmit(): void {
.scrollbar();
}
// 设计 22：蓝条（#024FFF 4×20 设计px）+ 标题 15 设计px w700
&__title {
position: relative;
padding-left: 12px;
@@ -171,14 +167,12 @@ function onSubmit(): void {
width: 100%;
}
// 设计 22：标签 13 设计px w500 深灰
&__label {
font-size: 11px;
font-weight: 500;
color: @heading-color;
}
// 设计 22：白底、#DDE1E7 描边、40 设计px ≈ 32px 高、13 设计px 字
&__input {
width: 100%;
height: 32px;
@@ -223,7 +217,6 @@ function onSubmit(): void {
}
}
// 设计 24：底部两枚等宽整行按钮 —— 次级 #EEF0F3 灰底、主色 #024FFF
&__footer {
.flex(row, flex-start);
gap: @spacing-sm;

8
src/views/profile/cpns/FeedbackForm.vue
View File

@@ -5,7 +5,6 @@ import type { FileInfo } from '@/types/api'
import type { Feedback } from '@/types/business/profile'
interface Props {
/** 递增时清空表单（父级提交成功/重置信号） */
resetSignal?: number
}
@@ -87,7 +86,6 @@ function onReset(): void {
<span class="feedback-form__counter text-secondary">{{ form.description.length }}/500</span>
</div>
<p class="feedback-form__tip">
提交后我们的专业顾问将在一个工作日内与您联系，为您提供一对一服务
</p>
@@ -114,8 +112,6 @@ function onReset(): void {
</template>
<style lang="less" scoped>
// 设计 18（意见反馈表单）：表单直接铺在白面板上（无内嵌卡）、标签 13 设计px w500、
// 白底 #DDE1E7 描边输入、计数灰字、附件区白底描边
.feedback-form {
.flex(column, flex-start);
gap: @spacing-base;
@@ -163,7 +159,7 @@ function onReset(): void {
}
&__input {
height: 32px; // 设计 40 × 0.77
height: 32px;
}
&__textarea {
@@ -172,7 +168,6 @@ function onReset(): void {
resize: vertical;
}
// 设计 18：字数统计 11 设计px 灰字
&__counter {
align-self: flex-end;
color: @text-color-disabled;
@@ -193,7 +188,6 @@ function onReset(): void {
gap: @spacing-sm;
}
// 附件区：设计 18 白底 + #DDE1E7 描边
:deep(.upload-area) {
min-height: 56px;
border: 1px solid @profile-input-border;

4
src/views/profile/cpns/HelpFaq.vue
View File

@@ -42,8 +42,6 @@ defineProps<Props>()
</template>
<style lang="less" scoped>
// 设计 16（帮助中心 FAQ）：分类标题居中 14 设计px w700、Q 加粗深灰、A 13 设计px 灰，
// 无卡片底色/描边，平铺在面板上
.help-faq {
.flex(column, flex-start);
gap: @spacing-base;
@@ -56,7 +54,7 @@ defineProps<Props>()
.flex(row, center, center);
justify-content: center;
padding: 0;
font-size: 11px; // 设计 14 → 11
font-size: 11px;
font-weight: 700;
color: @heading-color;
cursor: pointer;

10
src/views/profile/cpns/HotlinePanel.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
// 热线展示（静态 mock，接入站点配置后由 store 提供）
const HOTLINE = '000-000-0000'
const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
</script>
@@ -22,8 +21,6 @@ const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
</template>
<style lang="less" scoped>
// 设计 14（专属客服热线）：面板内整行浅蓝卡（#D6E4FB）、蓝色圆形图标、
// 标题 19 设计px w700、号码 24 设计px 蓝色 w700、时间 12 设计px 灰
.hotline-panel {
.flex(row, flex-start);
padding: 0;
@@ -46,7 +43,6 @@ const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
align-items: center;
}
// 设计 14 实取：#024FFF 蓝色圆底（直径约 64 设计px）
&__icon {
.flex(row, center);
grid-area: icon;
@@ -63,14 +59,14 @@ const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
&__title {
grid-area: title;
align-self: end;
font-size: 15px; // 设计 19 → 15
font-size: 15px;
font-weight: 700;
color: @heading-color;
}
&__number {
grid-area: number;
font-size: 18px; // 设计 24 → 18
font-size: 18px;
font-weight: 700;
color: @primary-strong;
line-height: 1.3;
@@ -80,7 +76,7 @@ const WORK_TIME = '工作日 8:00-12:00 14:00-18:00'
grid-area: time;
align-self: start;
color: @text-color-secondary;
font-size: 11px; // 设计 12 → 11
font-size: 11px;
}
}
</style>

8
src/views/profile/cpns/ProfileSider.vue
View File

@@ -4,7 +4,6 @@ interface MenuItem {
label: string
}
// 设计稿（个人中心）菜单项 y268/304/340/376/412/448/484/520，行距 36，文字 x179（卡内缩进 24）
const menus: MenuItem[] = [
{ to: '/profile/security', label: '账号安全' },
{ to: '/profile/address', label: '地址管理' },
@@ -31,7 +30,6 @@ const menus: MenuItem[] = [
</template>
<style lang="less" scoped>
// 设计稿：菜单为独立白卡（245 宽），选中项浅蓝底 @profile-nav-active-bg 圆角 6
.profile-sider {
.flex(column, flex-start);
gap: 0;
@@ -41,11 +39,11 @@ const menus: MenuItem[] = [
&__item {
.flex(row, flex-start, center);
height: 36px; // 设计行距 36
padding: 0 24px; // 卡 x155 → 文字 x179
height: 36px;
padding: 0 24px;
border-radius: @profile-radius;
color: @text-color;
font-size: @font-size-base; // 设计 12/400
font-size: @font-size-base;
font-weight: 400;
transition: all 0.2s;

6
src/views/profile/cpns/ProfileUserCard.vue
View File

@@ -48,8 +48,6 @@ function save(): void {
</template>
<style lang="less" scoped>
// 设计稿（个人中心）：头像 46 圆形居中，名称 18/600，手机 14/400；
// 整块 245×110 紫渐变卡，内容垂直居中
.profile-user-card {
.flex(column, center, center);
height: 110px;
@@ -77,7 +75,7 @@ function save(): void {
border: 1px solid transparent;
border-radius: @profile-radius;
background: transparent;
font-size: @font-size-lg; // 设计 18/600
font-size: @font-size-lg;
font-weight: 600;
color: @white;
text-align: center;
@@ -102,7 +100,7 @@ function save(): void {
&__phone {
margin-top: 6px;
font-size: @font-size-sm; // 设计 14/400
font-size: @font-size-sm;
color: @white;
text-align: center;
}

7
src/views/profile/cpns/QualificationCard.vue
View File

@@ -59,7 +59,6 @@ const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'dang
</template>
<style lang="less" scoped>
// 设计 17（资质列表行）：白卡灰描边、字段标签灰/值深 w600、状态为纯文字、白底描边操作按钮
.qual-card {
.flex(column, flex-start);
gap: @spacing-sm;
@@ -74,7 +73,7 @@ const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'dang
}
&__name {
font-size: 11px; // 设计 13 → 11
font-size: 11px;
font-weight: 600;
color: @heading-color;
.multi-ellipsis(2);
@@ -107,7 +106,6 @@ const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'dang
width: 100%;
}
// 设计 17：操作按钮 = 白底灰描边、12 设计px w500 灰字
&__btn {
height: 24px;
padding: 0 10px;
@@ -135,11 +133,10 @@ const STATUS_VARIANTS: Record<QualificationStatus, 'success' | 'warning' | 'dang
}
}
// 设计 17：状态为纯文字（已认证/审核中深灰、未通过红），无底色胶囊
.qual-card .status-tag {
padding: 0;
background: transparent;
font-size: 12px; // 设计 15 → 12
font-size: 12px;
font-weight: 700;
&--success {

2
src/views/profile/cpns/QualificationDialog.vue
View File

@@ -59,7 +59,6 @@ function onUpload(file: File): void {
}
function onPreview(file: FileInfo): void {
// 同源预览：资质附件多为本地未上传文件（无 ossId），弹窗会提示无法在线预览
ossStore.openPreview(file)
}
@@ -184,7 +183,6 @@ function onSave(): void {
</template>
<style lang="less" scoped>
// 与个人中心其它弹窗同规格（设计 22~27）：白卡 700px、蓝条标题、白底描边输入、等宽双按钮
.qual-dialog {
position: fixed;
inset: 0;

16
src/views/profile/cpns/SecurityPanel.vue
View File

@@ -21,7 +21,6 @@ const hasEmail = computed(() => Boolean(props.profile?.email))
<template>
<div class="security-panel">
<!-- 设计稿：三行白卡 1672×86，行距 16，左缩进 24 -->
<section
class="security-panel__row"
@click="emit('changePassword')"
@@ -73,7 +72,6 @@ const hasEmail = computed(() => Boolean(props.profile?.email))
<span class="security-panel__arrow" aria-hidden="true">›</span>
</section>
<!-- 设计稿：注销账号 1672×48，灰字，浅灰描边 -->
<button
type="button"
class="security-panel__delete"
@@ -85,10 +83,6 @@ const hasEmail = computed(() => Boolean(props.profile?.email))
</template>
<style lang="less" scoped>
// 设计稿（个人中心）：
// 行卡 1672×86 bg #FFFFFF bd #F0F1F3/1，行距 16；标题 14/600 #1F2937 @x428
// 副文 11/400 #9CA3AF；右端状态 11/500（已设置 #16A34A / 未绑定 #6B7280）+ 箭头 ›
// 注销按钮 1672×48 bd #E5E7EB/1，文字 15/500 #9CA3AF
.security-panel {
.flex(column, flex-start, stretch);
gap: @spacing-base;
@@ -114,14 +108,14 @@ const hasEmail = computed(() => Boolean(props.profile?.email))
}
&__title {
font-size: @font-size-base; // 设计 14/600
font-size: @font-size-base;
font-weight: 600;
color: @profile-ink;
}
&__sub {
margin-top: 6px;
font-size: @font-size-sm; // 设计 11/400
font-size: @font-size-sm;
color: @finance-axis-text; // #9CA3AF
}
@@ -129,10 +123,10 @@ const hasEmail = computed(() => Boolean(props.profile?.email))
margin-left: auto;
font-size: @font-size-sm;
font-weight: 500;
color: @finance-muted-text; // 未绑定 #6B7280
color: @finance-muted-text;
&--ok {
color: @success-color; // 已设置 / 已绑定 #16A34A
color: @success-color;
}
}
@@ -150,7 +144,7 @@ const hasEmail = computed(() => Boolean(props.profile?.email))
border-radius: @radius-base;
background: @white;
color: @finance-axis-text;
font-size: @font-size-base; // 设计 15/500
font-size: @font-size-base;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;