feat 搭建架构骨架

2026-09-24 09:09:47 +08:00
parent dd9f6b77a4
commit 7a2efa3fea
180 changed files with 18967 additions and 9 deletions
--- a/src/views/profile/cpns/ProfileUserCard.vue
+++ b/src/views/profile/cpns/ProfileUserCard.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { Profile } from '@/types/business/profile'
+
+interface Props {
+  profile: Profile | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{ saveNickname: [name: string] }>()
+
+const draft = ref('')
+
+watch(
+  () => props.profile?.nickname,
+  (name) => {
+    draft.value = name ?? ''
+  },
+  { immediate: true },
+)
+
+function save(): void {
+  const name = draft.value.trim()
+  if (!name || name === props.profile?.nickname) return
+  emit('saveNickname', name)
+}
+</script>
+
+<template>
+  <div class="profile-user-card">
+    <div class="profile-user-card__avatar" aria-hidden="true">
+      王
+    </div>
+    <div class="profile-user-card__info">
+      <input
+        v-model="draft"
+        class="profile-user-card__name"
+        type="text"
+        placeholder="请输入名称"
+        maxlength="20"
+        @keyup.enter="save"
+        @blur="save"
+      >
+      <p class="profile-user-card__phone text-secondary">
+        {{ profile?.phone ?? '' }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.profile-user-card {
+  .flex(row, flex-start);
+  gap: @spacing-base;
+  padding: @spacing-lg @spacing-xl;
+  border-radius: @radius-lg;
+  background: @white;
+  box-shadow: @shadow-base;
+
+  &__avatar {
+    .flex(row, center);
+    flex-shrink: 0;
+    width: 64px;
+    height: 64px;
+    border-radius: @radius-round;
+    background: linear-gradient(135deg, @primary-color, @primary-hover);
+    color: @white;
+    font-size: @font-size-xxl;
+    font-weight: 600;
+  }
+
+  &__info {
+    .flex(column, flex-start);
+    gap: @spacing-xs;
+    min-width: 0;
+  }
+
+  &__name {
+    width: 240px;
+    height: 34px;
+    padding: 0 @spacing-sm;
+    border: 1px solid transparent;
+    border-radius: @radius-base;
+    background: transparent;
+    font-size: @font-size-xl;
+    font-weight: 600;
+    color: @heading-color;
+    outline: none;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: @border-color;
+    }
+
+    &:focus {
+      border-color: @primary-color;
+      background: @bg-color-light;
+    }
+
+    &::placeholder {
+      font-size: @font-size-lg;
+      font-weight: 400;
+      color: @text-color-disabled;
+    }
+  }
+
+  &__phone {
+    font-size: @font-size-base;
+  }
+}
+</style>