docs(readme): 编写项目README文档，描述功能与架构

- 完整撰写玉宗珠宝设计大师项目README，介绍项目概况及核心功能
- 说明用户认证系统实现及优势，包含JWT鉴权和密码加密细节
- 详细描述品类管理系统，支持多流程类型和多种玉石品类
- 说明设计图生成方案及技术，包含Pillow生成示例及字体支持
- 介绍设计管理功能，支持分页浏览、预览、下载和删除设计
- 个人信息管理模块说明，涵盖昵称、手机号、密码的安全修改
- 绘制业务流程图和关键数据流图，清晰展现系统架构与数据流
- 提供详细API调用链路及参数说明，涵盖用户、品类、设计接口
- 列明技术栈及版本，包含前后端框架、ORM、认证、加密等工具
- 展示目录结构，标明后端与前端项目布局
- 规划本地开发环境与启动步骤，包括数据库初始化及运行命令
- 说明服务器部署流程和Nginx配置方案
- 详细数据库表结构说明及环境变量配置指导
- 汇总常用开发及测试命令，方便开发调试与部署管理

frontend/src/components/AppHeader.vue

@@ -0,0 +1,147 @@
+<template>
+  <header class="app-header">
+    <div class="header-left">
+      <router-link to="/" class="logo">
+        <span class="logo-text">玉宗</span>
+      </router-link>
+    </div>
+    <nav class="header-nav">
+      <router-link to="/" class="nav-link">设计</router-link>
+      <router-link to="/generate" class="nav-link">生成</router-link>
+    </nav>
+    <div class="header-right">
+      <template v-if="isLoggedIn">
+        <el-dropdown trigger="click" @command="handleCommand">
+          <span class="user-dropdown">
+            <span class="user-nickname">{{ userNickname }}</span>
+            <el-icon><ArrowDown /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="user">个人中心</el-dropdown-item>
+              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </template>
+      <template v-else>
+        <router-link to="/login" class="auth-link">登录</router-link>
+        <router-link to="/register" class="auth-link auth-register">注册</router-link>
+      </template>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ArrowDown } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/user'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+const isLoggedIn = computed(() => !!userStore.token)
+const userNickname = computed(() => userStore.userInfo?.nickname || '用户')
+
+const handleCommand = (command: string) => {
+  if (command === 'user') {
+    router.push('/user')
+  } else if (command === 'logout') {
+    userStore.logout()
+    router.push('/login')
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  padding: 0 32px;
+  background-color: #fff;
+  border-bottom: 1px solid #E8E4DF;
+}
+
+.header-left {
+  .logo {
+    text-decoration: none;
+  }
+  .logo-text {
+    font-size: 24px;
+    font-weight: 600;
+    color: #5B7E6B;
+    letter-spacing: 4px;
+  }
+}
+
+.header-nav {
+  display: flex;
+  gap: 32px;
+
+  .nav-link {
+    color: #6B6B6B;
+    text-decoration: none;
+    font-size: 15px;
+    padding: 8px 0;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s;
+
+    &:hover,
+    &.router-link-active {
+      color: #5B7E6B;
+      border-bottom-color: #5B7E6B;
+    }
+  }
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  .auth-link {
+    color: #6B6B6B;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 6px 16px;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #5B7E6B;
+    }
+
+    &.auth-register {
+      background-color: #5B7E6B;
+      color: #fff;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: #3D5A4A;
+      }
+    }
+  }
+
+  .user-dropdown {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    color: #2C2C2C;
+    font-size: 14px;
+
+    &:hover {
+      color: #5B7E6B;
+    }
+  }
+
+  .user-nickname {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>