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

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

frontend/src/components/CategoryNav.vue

@@ -0,0 +1,100 @@
+<template>
+  <nav class="category-nav">
+    <div class="nav-header">
+      <h3>玉石品类</h3>
+    </div>
+    <ul class="category-list">
+      <li
+        v-for="category in categories"
+        :key="category.id"
+        class="category-item"
+        :class="{ active: currentCategory?.id === category.id }"
+        @click="handleSelect(category)"
+      >
+        <span class="category-name">{{ category.name }}</span>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useCategoryStore } from '@/stores/category'
+import type { Category } from '@/stores/category'
+
+const categoryStore = useCategoryStore()
+
+const categories = computed(() => categoryStore.categories)
+const currentCategory = computed(() => categoryStore.currentCategory)
+
+const handleSelect = (category: Category) => {
+  categoryStore.selectCategory(category)
+}
+</script>
+
+<style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-light: #8BAF9C;
+$bg-color: #FAF8F5;
+$border-color: #E8E4DF;
+$text-primary: #2C2C2C;
+$text-secondary: #6B6B6B;
+
+.category-nav {
+  width: 200px;
+  min-width: 200px;
+  height: 100%;
+  background-color: #fff;
+  border-right: 1px solid $border-color;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-header {
+  padding: 20px 16px;
+  border-bottom: 1px solid $border-color;
+
+  h3 {
+    font-size: 16px;
+    font-weight: 500;
+    color: $text-primary;
+    margin: 0;
+    letter-spacing: 2px;
+  }
+}
+
+.category-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.category-item {
+  padding: 14px 20px;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  border-bottom: 1px solid $border-color;
+
+  &:hover {
+    background-color: rgba($primary-color, 0.06);
+  }
+
+  &.active {
+    background-color: $primary-color;
+    
+    .category-name {
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+}
+
+.category-name {
+  font-size: 14px;
+  color: $text-secondary;
+  letter-spacing: 1px;
+  transition: color 0.25s ease;
+}
+</style>