jc/YuShiSheJiShi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jc:2ef126e4455e77c725c9206c57e04cbd84581b07
Branches Tags
jc:main
..
compare: jc:4382feedb34367a8f67ece245a73c6e8493e3dbb
Branches Tags
jc:main

2 Commits
2ef126e445 ... 4382feedb3

Author SHA1 Message Date
川
4382feedb3 style(frontend): 优化前端样式和界面细节 
- 统一并丰富主题色变量，新增多级浅色和圆角、阴影变量
- 调整应用头部布局及风格，增加logo子标题和用户头像显示
- 细化分类导航样式，添加品类图标和渐变背景
- 优化颜色选择器的交互动效和样式细节
- 美化设计预览组件，提升边框圆角和阴影效果
- 调整子类型面板布局、尺寸及交互动画效果
- 修正全局样式中字体和滚动条的表现，增强用户体验
- 统一按钮、标签等控件的圆角和颜色渐变样式
- 增强Element Plus UI组件的主题覆盖和交互状态样式
 2026-03-29 15:55:27 +08:00
川
5f3cda2a63 chore(server): 记录服务器启动与热重载日志 
- 详细记录服务启动及关闭过程中的日志信息
- 添加文件变动检测后的自动重启警告和操作日志
- 记录上传目录准备状态日志
- 追踪接口请求响应日志，包括视频和设计资源访问
- 添加应用关闭和重启通知日志
 2026-03-28 19:51:52 +08:00
16 changed files with 809 additions and 509 deletions
Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
backend/uploads/designs/26.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 53 KiB

190
backend/uvicorn.log
View File

@@ -80,3 +80,193 @@ INFO: Waiting for application startup.
INFO: Application startup complete. INFO: Application startup complete.
✅ 上传目录已准备: uploads ✅ 上传目录已准备: uploads
INFO: 127.0.0.1:64149 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified INFO: 127.0.0.1:64149 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
WARNING: StatReload detected changes in 'app/services/design_service.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [65045]
👋 应用已关闭
INFO: Started server process [69988]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/design_service.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [69988]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [69995]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/design_service.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [69995]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [70000]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/ai_3d_generator.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [70000]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [71187]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/ai_video_generator_kling.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [71187]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [71203]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/ai_3d_generator.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [71203]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [71899]
INFO: Waiting for application startup.
INFO: Application startup complete.
✅ 上传目录已准备: uploads
INFO: 127.0.0.1:52861 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:52869 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:52871 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:52874 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
INFO: 127.0.0.1:52943 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:52951 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:52953 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:53198 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:53206 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:53208 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:53211 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
INFO: 127.0.0.1:53280 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:53288 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:53290 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:53426 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:53434 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:53436 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:53602 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:53611 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:53613 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:53616 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
INFO: 127.0.0.1:55190 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:55199 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:55201 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:55204 - "GET /uploads/videos/6ed3f33421a44876b303c7671c1597d5.mp4 HTTP/1.1" 304 Not Modified
INFO: 127.0.0.1:55234 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:55241 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:55243 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:56832 - "GET /uploads/models/506909359d6c45fe9e43108ee7765a9a.glb HTTP/1.1" 304 Not Modified
INFO: 127.0.0.1:56840 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:56846 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:56849 - "GET /api/designs/27 HTTP/1.1" 200 OK
INFO: 127.0.0.1:56856 - "GET /api/designs?page=1&page_size=20 HTTP/1.1" 200 OK
INFO: 127.0.0.1:56859 - "GET /uploads/designs/26.png HTTP/1.1" 304 Not Modified
INFO: 127.0.0.1:56865 - "DELETE /api/designs/26 HTTP/1.1" 200 OK
INFO: 127.0.0.1:56868 - "GET /api/designs?page=1&page_size=20 HTTP/1.1" 200 OK
INFO: 127.0.0.1:56902 - "GET /api/designs/24 HTTP/1.1" 200 OK
INFO: 127.0.0.1:56925 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:56927 - "GET /api/designs?page=1&page_size=20 HTTP/1.1" 200 OK
WARNING: StatReload detected changes in 'app/services/design_service.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [71899]
👋 应用已关闭
INFO: Started server process [75417]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/prompt_builder.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [75417]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [76192]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/design_service.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [76192]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [76199]
INFO: Waiting for application startup.
INFO: Application startup complete.
✅ 上传目录已准备: uploads
INFO: 127.0.0.1:63820 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:63827 - "GET /api/designs?page=1&page_size=20 HTTP/1.1" 200 OK
WARNING: StatReload detected changes in 'app/services/prompt_builder.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [76199]
👋 应用已关闭
INFO: Started server process [83069]
INFO: Waiting for application startup.
INFO: Application startup complete.
WARNING: StatReload detected changes in 'app/services/prompt_builder.py'. Reloading...
INFO: Shutting down
INFO: Waiting for application shutdown.
INFO: Application shutdown complete.
INFO: Finished server process [83069]
✅ 上传目录已准备: uploads
👋 应用已关闭
INFO: Started server process [903]
INFO: Waiting for application startup.
INFO: Application startup complete.
✅ 上传目录已准备: uploads
INFO: 127.0.0.1:53852 - "POST /api/auth/login HTTP/1.1" 200 OK
INFO: 127.0.0.1:53856 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:53862 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:53865 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:53866 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:53870 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:53872 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:53877 - "GET /api/categories/3/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:53878 - "GET /api/categories/3/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:53883 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:53885 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:53890 - "GET /api/categories HTTP/1.1" 200 OK
INFO: 127.0.0.1:54023 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54021 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54029 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54027 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54050 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54048 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54076 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54075 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54092 - "GET /api/categories/6/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54091 - "GET /api/categories/6/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54098 - "GET /api/categories/7/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54096 - "GET /api/categories/7/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54104 - "GET /api/categories/8/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54102 - "GET /api/categories/8/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54110 - "GET /api/categories/9/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54109 - "GET /api/categories/9/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54117 - "GET /api/categories/10/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54115 - "GET /api/categories/10/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54123 - "GET /api/categories/11/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54121 - "GET /api/categories/11/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54131 - "GET /api/categories/12/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54129 - "GET /api/categories/12/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54134 - "GET /api/categories/13/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54140 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
INFO: 127.0.0.1:54139 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
INFO: 127.0.0.1:54330 - "GET /api/auth/me HTTP/1.1" 200 OK
INFO: 127.0.0.1:54332 - "GET /api/categories HTTP/1.1" 200 OK

89
frontend/src/assets/styles/theme.scss
View File

@@ -1,25 +1,67 @@
// 玉宗品牌色 - 中式雅致风格 // 玉宗品牌色 - 中式雅致风格
$primary-color: #5B7E6B; // 青玉色 - 主色调 $primary-color: #5B7E6B; // 青玉色 - 主色调
$primary-light: #8BAF9C; // 浅青 $primary-light: #8BAF9C; // 浅青
$primary-lighter: #D4E5DB; // 极浅青
$primary-dark: #3D5A4A; // 深青 $primary-dark: #3D5A4A; // 深青
$secondary-color: #C4A86C; // 金缕色 - 辅助色 $secondary-color: #C4A86C; // 金缕色 - 辅助色
$secondary-light: #E0D1A8; // 浅金
$bg-color: #FAF8F5; // 暖白底色 $bg-color: #FAF8F5; // 暖白底色
$bg-dark: #F0EDE8; // 深一级底色 $bg-dark: #F0EDE8; // 深一级底色
$bg-card: #FFFFFF; // 卡片底色
$text-primary: #2C2C2C; // 主文字 $text-primary: #2C2C2C; // 主文字
$text-secondary: #6B6B6B; // 次要文字 $text-secondary: #6B6B6B; // 次要文字
$text-light: #999999; // 辅助文字 $text-light: #999999; // 辅助文字
$text-placeholder: #BFBFBF; // 占位文字
$border-color: #E8E4DF; // 边框色 $border-color: #E8E4DF; // 边框色
$border-light: #F0EDE8; // 浅边框
$ink-color: #1A1A2E; // 墨色 $ink-color: #1A1A2E; // 墨色
// 圆角
$radius-sm: 8px;
$radius: 12px;
$radius-lg: 16px;
$radius-xl: 20px;
$radius-pill: 999px;
// 阴影
$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
$shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
// Element Plus 主题覆盖 // Element Plus 主题覆盖
:root { :root {
// 颜色
--el-color-primary: #{$primary-color}; --el-color-primary: #{$primary-color};
--el-color-primary-light-3: #{$primary-light}; --el-color-primary-light-3: #{$primary-light};
--el-color-primary-light-5: #a8c7b5;
--el-color-primary-light-7: #{$primary-lighter};
--el-color-primary-light-8: #dfeee5;
--el-color-primary-light-9: #eaf4ee;
--el-color-primary-dark-2: #{$primary-dark}; --el-color-primary-dark-2: #{$primary-dark};
--el-bg-color: #{$bg-color}; --el-bg-color: #{$bg-color};
--el-bg-color-overlay: #{$bg-card};
--el-border-color: #{$border-color}; --el-border-color: #{$border-color};
--el-border-color-light: #{$border-light};
--el-text-color-primary: #{$text-primary}; --el-text-color-primary: #{$text-primary};
--el-text-color-regular: #{$text-secondary}; --el-text-color-regular: #{$text-secondary};
--el-text-color-secondary: #{$text-light};
--el-text-color-placeholder: #{$text-placeholder};
--el-fill-color-light: #{$bg-color};
--el-fill-color-lighter: #{$bg-color};
// 圆角
--el-border-radius-base: #{$radius-sm};
--el-border-radius-small: 6px;
--el-border-radius-round: #{$radius-pill};
// 字体
--el-font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
--el-font-size-base: 14px;
// 阴影
--el-box-shadow: #{$shadow};
--el-box-shadow-light: #{$shadow-sm};
--el-box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.03);
} }
// 全局基础样式 // 全局基础样式
@@ -30,7 +72,7 @@ $ink-color: #1A1A2E; // 墨色
} }
body { body {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
background-color: $bg-color; background-color: $bg-color;
color: $text-primary; color: $text-primary;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -39,6 +81,10 @@ body {
// 滚动条美化 // 滚动条美化
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: $border-color; background: $border-color;
@@ -47,3 +93,44 @@ body {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: $text-light; background: $text-light;
} }
// Element Plus 组件全局样式增强
.el-button--primary {
background-color: $primary-color !important;
border-color: $primary-color !important;
border-radius: $radius-sm !important;
&:hover, &:focus {
background-color: $primary-dark !important;
border-color: $primary-dark !important;
}
}
.el-input__wrapper {
border-radius: $radius-sm !important;
transition: all 0.25s ease !important;
}
.el-textarea__inner {
border-radius: $radius !important;
}
.el-card {
border-radius: $radius !important;
border: 1px solid $border-light !important;
box-shadow: $shadow-sm !important;
}
.el-dialog {
border-radius: $radius-lg !important;
}
.el-message-box {
border-radius: $radius !important;
}
.el-dropdown-menu {
border-radius: $radius-sm !important;
border: 1px solid $border-light !important;
box-shadow: $shadow !important;
}

112
frontend/src/components/AppHeader.vue
View File

@@ -2,7 +2,8 @@
<header class="app-header"> <header class="app-header">
<div class="header-left"> <div class="header-left">
<router-link to="/" class="logo"> <router-link to="/" class="logo">
<span class="logo-text">玉宗</span> <span class="logo-text">玉 宗</span>
<span class="logo-sub">YUZONG JEWELRY</span>
</router-link> </router-link>
</div> </div>
<nav class="header-nav"> <nav class="header-nav">
@@ -14,6 +15,7 @@
<template v-if="isLoggedIn"> <template v-if="isLoggedIn">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="user-dropdown"> <span class="user-dropdown">
<span class="user-avatar">{{ avatarChar }}</span>
<span class="user-nickname">{{ userNickname }}</span> <span class="user-nickname">{{ userNickname }}</span>
<el-icon><ArrowDown /></el-icon> <el-icon><ArrowDown /></el-icon>
</span> </span>
@@ -45,6 +47,7 @@ const userStore = useUserStore()
const isLoggedIn = computed(() => !!userStore.token) const isLoggedIn = computed(() => !!userStore.token)
const userNickname = computed(() => userStore.userInfo?.nickname || '用户') const userNickname = computed(() => userStore.userInfo?.nickname || '用户')
const isAdmin = computed(() => !!userStore.userInfo?.is_admin) const isAdmin = computed(() => !!userStore.userInfo?.is_admin)
const avatarChar = computed(() => (userStore.userInfo?.nickname || '用')[0])
const handleCommand = (command: string) => { const handleCommand = (command: string) => {
if (command === 'user') { if (command === 'user') {
@@ -57,49 +60,82 @@ const handleCommand = (command: string) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B;
$primary-dark: #3D5A4A;
$text-secondary: #6B6B6B;
$text-primary: #2C2C2C;
$border-color: #E8E4DF;
$bg-color: #FAF8F5;
.app-header { .app-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 60px; height: 64px;
padding: 0 32px; padding: 0 32px;
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #E8E4DF; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
position: sticky;
top: 0;
z-index: 100;
} }
.header-left { .header-left {
.logo { .logo {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none; text-decoration: none;
gap: 2px;
} }
.logo-text { .logo-text {
font-size: 24px; font-size: 22px;
font-weight: 600; font-weight: 700;
color: #5B7E6B; color: $primary-color;
letter-spacing: 4px; letter-spacing: 6px;
line-height: 1.2;
}
.logo-sub {
font-size: 9px;
color: $text-secondary;
letter-spacing: 2.5px;
font-weight: 400;
opacity: 0.7;
} }
} }
.header-nav { .header-nav {
display: flex; display: flex;
gap: 32px; gap: 8px;
.nav-link { .nav-link {
color: #6B6B6B; color: $text-secondary;
text-decoration: none; text-decoration: none;
font-size: 15px; font-size: 14px;
padding: 8px 0; padding: 8px 20px;
border-bottom: 2px solid transparent; border-radius: 20px;
transition: all 0.3s; transition: all 0.25s ease;
font-weight: 500;
&:hover {
color: $primary-color;
background: rgba($primary-color, 0.06);
}
&:hover,
&.router-link-active { &.router-link-active {
color: #5B7E6B; color: #fff;
border-bottom-color: #5B7E6B; background: $primary-color;
} }
&.admin-link { &.admin-link {
color: #E6A23C; color: #E6A23C;
&:hover, &.router-link-active { color: #E6A23C; border-bottom-color: #E6A23C; } &:hover {
background: rgba(#E6A23C, 0.08);
}
&.router-link-active {
color: #fff;
background: #E6A23C;
}
} }
} }
} }
@@ -107,26 +143,27 @@ const handleCommand = (command: string) => {
.header-right { .header-right {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 12px;
.auth-link { .auth-link {
color: #6B6B6B; color: $text-secondary;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
padding: 6px 16px; padding: 8px 20px;
transition: color 0.3s; border-radius: 20px;
transition: all 0.25s ease;
&:hover { &:hover {
color: #5B7E6B; color: $primary-color;
background: rgba($primary-color, 0.06);
} }
&.auth-register { &.auth-register {
background-color: #5B7E6B; background-color: $primary-color;
color: #fff; color: #fff;
border-radius: 4px;
&:hover { &:hover {
background-color: #3D5A4A; background-color: $primary-dark;
} }
} }
} }
@@ -134,18 +171,35 @@ const handleCommand = (command: string) => {
.user-dropdown { .user-dropdown {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 8px;
cursor: pointer; cursor: pointer;
color: #2C2C2C; color: $text-primary;
font-size: 14px; font-size: 14px;
padding: 6px 12px;
border-radius: 20px;
transition: all 0.25s ease;
&:hover { &:hover {
color: #5B7E6B; background: rgba($primary-color, 0.06);
color: $primary-color;
} }
} }
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, $primary-color, $primary-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
}
.user-nickname { .user-nickname {
max-width: 120px; max-width: 100px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

94
frontend/src/components/CategoryNav.vue
View File

@@ -1,7 +1,8 @@
<template> <template>
<nav class="category-nav"> <nav class="category-nav">
<div class="nav-header"> <div class="nav-brand">
<h3>玉石品类</h3> <h3 class="brand-title">玉 宗</h3>
<span class="brand-sub">YUZONG JEWELRY</span>
</div> </div>
<ul class="category-list"> <ul class="category-list">
<li <li
@@ -11,6 +12,7 @@
:class="{ active: currentCategory?.id === category.id }" :class="{ active: currentCategory?.id === category.id }"
@click="handleSelect(category)" @click="handleSelect(category)"
> >
<span class="category-icon">{{ getCategoryIcon(category.name) }}</span>
<span class="category-name">{{ category.name }}</span> <span class="category-name">{{ category.name }}</span>
</li> </li>
</ul> </ul>
@@ -30,52 +32,93 @@ const currentCategory = computed(() => categoryStore.currentCategory)
const handleSelect = (category: Category) => { const handleSelect = (category: Category) => {
categoryStore.selectCategory(category) categoryStore.selectCategory(category)
} }
// 品类图标映射
const getCategoryIcon = (name: string): string => {
const iconMap: Record<string, string> = {
'牌子': '🏷️',
'珠子': '🔵',
'手把件': '🤲',
'雕刻件': '💎',
'摆件': '🏺',
'手镯': '⭕',
'耳钉': '⭐',
'耳饰': '🌙',
'手链': '🔗',
'项链': '📿',
'戒指': '💍',
'表带': '⌚',
'随形': '🗿',
'吊坠': '🔻',
'珠串': '📿',
}
for (const [key, icon] of Object.entries(iconMap)) {
if (name.includes(key)) return icon
}
return '💠'
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B; $primary-color: #5B7E6B;
$primary-light: #8BAF9C; $primary-light: #8BAF9C;
$primary-lighter: #D4E5DB;
$bg-color: #FAF8F5; $bg-color: #FAF8F5;
$border-color: #E8E4DF; $border-color: #E8E4DF;
$text-primary: #2C2C2C; $text-primary: #2C2C2C;
$text-secondary: #6B6B6B; $text-secondary: #6B6B6B;
$text-light: #999999;
.category-nav { .category-nav {
width: 200px; width: 220px;
min-width: 200px; min-width: 220px;
height: 100%; height: 100%;
background-color: #fff; background: linear-gradient(180deg, #f7f9f7 0%, #f0f4f1 100%);
border-right: 1px solid $border-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: 1px solid rgba($border-color, 0.5);
} }
.nav-header { .nav-brand {
padding: 20px 16px; padding: 24px 20px 20px;
border-bottom: 1px solid $border-color; text-align: center;
border-bottom: 1px solid rgba($border-color, 0.4);
h3 { .brand-title {
font-size: 16px; font-size: 26px;
font-weight: 500; font-weight: 700;
color: $text-primary; color: $primary-color;
margin: 0; letter-spacing: 8px;
margin: 0 0 4px 0;
}
.brand-sub {
font-size: 10px;
color: $text-light;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 400;
} }
} }
.category-list { .category-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 12px 12px;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
} }
.category-item { .category-item {
padding: 14px 20px; display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer; cursor: pointer;
border-radius: 12px;
transition: all 0.25s ease; transition: all 0.25s ease;
border-bottom: 1px solid $border-color;
&:hover { &:hover {
background-color: rgba($primary-color, 0.06); background-color: rgba($primary-color, 0.06);
@@ -83,18 +126,29 @@ $text-secondary: #6B6B6B;
&.active { &.active {
background-color: $primary-color; background-color: $primary-color;
.category-icon {
filter: brightness(1.2);
}
.category-name { .category-name {
color: #fff; color: #fff;
font-weight: 500; font-weight: 600;
} }
} }
} }
.category-icon {
font-size: 16px;
width: 24px;
text-align: center;
flex-shrink: 0;
}
.category-name { .category-name {
font-size: 14px; font-size: 14px;
color: $text-secondary; color: $text-secondary;
letter-spacing: 1px; letter-spacing: 1px;
transition: color 0.25s ease; transition: all 0.25s ease;
} }
</style> </style>

21
frontend/src/components/ColorPicker.vue
View File

@@ -44,12 +44,12 @@ $text-primary: #2C2C2C;
$text-secondary: #6B6B6B; $text-secondary: #6B6B6B;
.color-picker { .color-picker {
margin-top: 24px; margin-top: 28px;
} }
.picker-title { .picker-title {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0 0 16px 0; margin: 0 0 16px 0;
letter-spacing: 1px; letter-spacing: 1px;
@@ -66,21 +66,26 @@ $text-secondary: #6B6B6B;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
padding: 8px; padding: 10px;
border-radius: 8px; border-radius: 12px;
transition: all 0.25s ease; transition: all 0.25s ease;
&:hover { &:hover {
background-color: rgba($primary-color, 0.06); background-color: rgba($primary-color, 0.06);
.color-swatch {
transform: scale(1.08);
}
} }
&.active { &.active {
background-color: rgba($primary-color, 0.08);
.color-swatch { .color-swatch {
box-shadow: 0 0 0 3px $secondary-color; transform: scale(1.1);
box-shadow: 0 0 0 3px $secondary-color, 0 4px 12px rgba(0, 0, 0, 0.12);
} }
.color-name { .color-name {
color: $primary-color; color: $primary-color;
font-weight: 500; font-weight: 600;
} }
} }
} }
@@ -89,9 +94,9 @@ $text-secondary: #6B6B6B;
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
border: 2px solid $border-color; border: 2px solid rgba($border-color, 0.6);
transition: all 0.25s ease; transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.3);
} }
.color-name { .color-name {

92
frontend/src/components/DesignPreview.vue
View File

@@ -606,10 +606,13 @@ const goToUserCenter = () => {
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B; $primary-color: #5B7E6B;
$primary-light: #8BAF9C; $primary-light: #8BAF9C;
$primary-lighter: #D4E5DB;
$primary-dark: #3D5A4A;
$secondary-color: #C4A86C; $secondary-color: #C4A86C;
$bg-color: #FAF8F5; $bg-color: #FAF8F5;
$bg-dark: #F0EDE8; $bg-dark: #F0EDE8;
$border-color: #E8E4DF; $border-color: #E8E4DF;
$border-light: #F0EDE8;
$text-primary: #2C2C2C; $text-primary: #2C2C2C;
$text-secondary: #6B6B6B; $text-secondary: #6B6B6B;
$text-light: #999999; $text-light: #999999;
@@ -625,8 +628,8 @@ $text-light: #999999;
gap: 8px; gap: 8px;
padding: 4px; padding: 4px;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 14px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
} }
.view-tab { .view-tab {
@@ -634,7 +637,7 @@ $text-light: #999999;
padding: 10px 16px; padding: 10px 16px;
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 8px; border-radius: 10px;
font-size: 14px; font-size: 14px;
color: $text-secondary; color: $text-secondary;
cursor: pointer; cursor: pointer;
@@ -658,9 +661,10 @@ $text-light: #999999;
position: absolute; position: absolute;
top: 16px; top: 16px;
left: 16px; left: 16px;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.45);
padding: 4px 12px; padding: 4px 14px;
border-radius: 12px; border-radius: 20px;
backdrop-filter: blur(4px);
} }
.indicator-text { .indicator-text {
@@ -671,9 +675,9 @@ $text-light: #999999;
.preview-container { .preview-container {
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 16px;
padding: 24px; padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
overflow: hidden; overflow: hidden;
} }
@@ -690,8 +694,8 @@ $text-light: #999999;
.design-image { .design-image {
max-width: 100%; max-width: 100%;
max-height: 450px; max-height: 450px;
border-radius: 8px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
cursor: zoom-in; cursor: zoom-in;
:deep(img) { :deep(img) {
@@ -711,7 +715,7 @@ $text-light: #999999;
width: 300px; width: 300px;
height: 300px; height: 300px;
background: $bg-color; background: $bg-color;
border-radius: 8px; border-radius: 12px;
color: $text-light; color: $text-light;
.el-icon { .el-icon {
@@ -737,8 +741,9 @@ $text-light: #999999;
gap: 8px; gap: 8px;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(4px);
} }
.zoom-btn { .zoom-btn {
@@ -749,7 +754,7 @@ $text-light: #999999;
height: 32px; height: 32px;
background: transparent; background: transparent;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 6px; border-radius: 8px;
cursor: pointer; cursor: pointer;
color: $text-secondary; color: $text-secondary;
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -775,18 +780,18 @@ $text-light: #999999;
.design-info { .design-info {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 16px;
padding: 20px 24px; padding: 20px 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
} }
.info-title { .info-title {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0 0 16px 0; margin: 0 0 16px 0;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-light;
letter-spacing: 1px; letter-spacing: 1px;
} }
@@ -824,7 +829,7 @@ $text-light: #999999;
.action-buttons { .action-buttons {
display: flex; display: flex;
gap: 16px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -834,8 +839,9 @@ $text-light: #999999;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 14px 28px; padding: 14px 28px;
border-radius: 8px; border-radius: 12px;
font-size: 15px; font-size: 14px;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.25s ease; transition: all 0.25s ease;
text-decoration: none; text-decoration: none;
@@ -847,14 +853,13 @@ $text-light: #999999;
} }
.download-btn { .download-btn {
background: $primary-color; background: linear-gradient(135deg, $primary-color, $primary-dark);
color: #fff; color: #fff;
border: none; border: none;
&:hover { &:hover {
background: #4a6a5a;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba($primary-color, 0.3); box-shadow: 0 6px 20px rgba($primary-color, 0.3);
} }
} }
@@ -870,14 +875,13 @@ $text-light: #999999;
} }
.model3d-btn { .model3d-btn {
background: #8E44AD; background: linear-gradient(135deg, $primary-light, $primary-color);
color: #fff; color: #fff;
border: none; border: none;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: #7D3C98;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(#8E44AD, 0.3); box-shadow: 0 6px 20px rgba($primary-color, 0.25);
} }
&:disabled { &:disabled {
@@ -888,18 +892,18 @@ $text-light: #999999;
.model3d-section { .model3d-section {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 16px;
padding: 20px 24px; padding: 20px 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
} }
.section-title { .section-title {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0 0 16px 0; margin: 0 0 16px 0;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-light;
letter-spacing: 1px; letter-spacing: 1px;
} }
@@ -925,19 +929,19 @@ $text-light: #999999;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 6px 14px; padding: 8px 16px;
font-size: 12px; font-size: 13px;
color: #666; color: $text-secondary;
background: #f5f5f5; background: $bg-color;
border: 1px solid #e0e0e0; border: 1px solid $border-color;
border-radius: 6px; border-radius: 20px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.25s ease;
&:hover { &:hover {
color: $primary-color; color: $primary-color;
border-color: $primary-color; border-color: $primary-color;
background: rgba($primary-color, 0.05); background: rgba($primary-color, 0.04);
} }
&:disabled { &:disabled {
@@ -949,7 +953,7 @@ $text-light: #999999;
} }
.model-viewer-wrapper { .model-viewer-wrapper {
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
background: $bg-color; background: $bg-color;
} }
@@ -957,13 +961,13 @@ $text-light: #999999;
// 视频区域样式 // 视频区域样式
.video-section { .video-section {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 16px;
padding: 20px 24px; padding: 20px 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
} }
.video-wrapper { .video-wrapper {
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
background: #000; background: #000;
} }
@@ -983,7 +987,7 @@ $text-light: #999999;
} }
.video-btn { .video-btn {
background: linear-gradient(135deg, #e040fb 0%, #7c4dff 100%) !important; background: linear-gradient(135deg, $secondary-color, #a89058) !important;
color: #fff !important; color: #fff !important;
border: none !important; border: none !important;

56
frontend/src/components/SubTypePanel.vue
View File

@@ -203,16 +203,19 @@ const goToGenerate = () => {
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B; $primary-color: #5B7E6B;
$primary-light: #8BAF9C; $primary-light: #8BAF9C;
$primary-lighter: #D4E5DB;
$primary-dark: #3D5A4A;
$secondary-color: #C4A86C; $secondary-color: #C4A86C;
$bg-color: #FAF8F5; $bg-color: #FAF8F5;
$border-color: #E8E4DF; $border-color: #E8E4DF;
$border-light: #F0EDE8;
$text-primary: #2C2C2C; $text-primary: #2C2C2C;
$text-secondary: #6B6B6B; $text-secondary: #6B6B6B;
$text-light: #999999; $text-light: #999999;
.subtype-panel { .subtype-panel {
flex: 1; flex: 1;
padding: 32px 40px; padding: 36px 44px;
overflow-y: auto; overflow-y: auto;
background-color: $bg-color; background-color: $bg-color;
} }
@@ -227,8 +230,9 @@ $text-light: #999999;
} }
.empty-icon { .empty-icon {
color: $border-color; color: $primary-light;
margin-bottom: 24px; margin-bottom: 24px;
opacity: 0.6;
} }
.empty-text { .empty-text {
@@ -263,8 +267,8 @@ $text-light: #999999;
} }
.panel-title { .panel-title {
font-size: 20px; font-size: 22px;
font-weight: 500; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0 0 8px 0; margin: 0 0 8px 0;
letter-spacing: 2px; letter-spacing: 2px;
@@ -273,19 +277,19 @@ $text-light: #999999;
.panel-desc { .panel-desc {
font-size: 14px; font-size: 14px;
color: $text-secondary; color: $text-secondary;
margin: 0 0 24px 0; margin: 0 0 28px 0;
} }
// 牌型卡片网格 // 牌型卡片网格
.card-grid { .card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px; gap: 20px;
} }
.subtype-card { .subtype-card {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 12px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -293,13 +297,13 @@ $text-light: #999999;
border: 2px solid transparent; border: 2px solid transparent;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
} }
&.active { &.active {
border-color: $primary-color; border-color: $primary-color;
box-shadow: 0 4px 16px rgba($primary-color, 0.2); box-shadow: 0 4px 16px rgba($primary-color, 0.15);
} }
} }
@@ -318,8 +322,8 @@ $text-light: #999999;
} }
.card-placeholder { .card-placeholder {
width: 60px; width: 56px;
height: 60px; height: 56px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, $primary-light, $primary-color); background: linear-gradient(135deg, $primary-light, $primary-color);
display: flex; display: flex;
@@ -327,7 +331,7 @@ $text-light: #999999;
justify-content: center; justify-content: center;
span { span {
font-size: 24px; font-size: 22px;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@@ -336,12 +340,13 @@ $text-light: #999999;
.card-info { .card-info {
padding: 12px; padding: 12px;
text-align: center; text-align: center;
border-top: 1px solid $border-color; border-top: 1px solid $border-light;
} }
.card-name { .card-name {
font-size: 14px; font-size: 14px;
color: $text-primary; color: $text-primary;
font-weight: 500;
} }
// 尺寸标签网格 // 尺寸标签网格
@@ -352,10 +357,10 @@ $text-light: #999999;
} }
.size-tag { .size-tag {
padding: 10px 20px; padding: 10px 22px;
background: #fff; background: #fff;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 6px; border-radius: 20px;
font-size: 14px; font-size: 14px;
color: $text-secondary; color: $text-secondary;
cursor: pointer; cursor: pointer;
@@ -364,6 +369,7 @@ $text-light: #999999;
&:hover { &:hover {
border-color: $primary-light; border-color: $primary-light;
color: $primary-color; color: $primary-color;
background: rgba($primary-color, 0.04);
} }
&.active { &.active {
@@ -378,11 +384,12 @@ $text-light: #999999;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 40px; padding: 48px 40px;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 16px;
text-align: center; text-align: center;
margin-bottom: 24px; margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
} }
.intro-icon { .intro-icon {
@@ -400,23 +407,24 @@ $text-light: #999999;
.action-bar { .action-bar {
margin-top: 32px; margin-top: 32px;
padding-top: 24px; padding-top: 24px;
border-top: 1px solid $border-color; border-top: 1px solid $border-light;
} }
.btn-primary { .btn-primary {
padding: 12px 32px; padding: 14px 36px;
background-color: $primary-color; background: linear-gradient(135deg, $primary-color, $primary-dark);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 6px; border-radius: 12px;
font-size: 15px; font-size: 15px;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.25s ease; transition: all 0.25s ease;
letter-spacing: 2px; letter-spacing: 2px;
&:hover { &:hover {
background-color: #4a6a5a; transform: translateY(-2px);
transform: translateY(-1px); box-shadow: 0 6px 20px rgba($primary-color, 0.3);
} }
&:active { &:active {

344
frontend/src/style.css
View File

@@ -1,296 +1,108 @@
/* ========================================
玉宗珠宝设计系统 - 全局基础样式
======================================== */
:root { :root {
--text: #6b6375; /* 品牌色系 */
--text-h: #08060d; --yz-primary: #5B7E6B;
--bg: #fff; --yz-primary-light: #8BAF9C;
--border: #e5e4e7; --yz-primary-lighter: #D4E5DB;
--code-bg: #f4f3ec; --yz-primary-dark: #3D5A4A;
--accent: #aa3bff; --yz-secondary: #C4A86C;
--accent-bg: rgba(170, 59, 255, 0.1); --yz-secondary-light: #E0D1A8;
--accent-border: rgba(170, 59, 255, 0.5);
--social-bg: rgba(244, 243, 236, 0.5);
--shadow:
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
--sans: system-ui, 'Segoe UI', Roboto, sans-serif; /* 背景色 */
--heading: system-ui, 'Segoe UI', Roboto, sans-serif; --yz-bg: #FAF8F5;
--mono: ui-monospace, Consolas, monospace; --yz-bg-dark: #F0EDE8;
--yz-bg-card: #FFFFFF;
font: 18px/145% var(--sans); /* 文字色 */
letter-spacing: 0.18px; --yz-text: #2C2C2C;
color-scheme: light dark; --yz-text-secondary: #6B6B6B;
color: var(--text); --yz-text-light: #999999;
background: var(--bg); --yz-text-placeholder: #BFBFBF;
/* 边框 & 分割线 */
--yz-border: #E8E4DF;
--yz-border-light: #F0EDE8;
--yz-divider: #F0EDE8;
/* 阴影 */
--yz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--yz-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
--yz-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
/* 圆角 */
--yz-radius-sm: 8px;
--yz-radius: 12px;
--yz-radius-lg: 16px;
--yz-radius-xl: 20px;
--yz-radius-pill: 999px;
/* 字体 */
--yz-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
/* 过渡 */
--yz-transition: all 0.25s ease;
--yz-transition-fast: all 0.15s ease;
font-family: var(--yz-font);
font-size: 14px;
line-height: 1.6;
color: var(--yz-text);
background: var(--yz-bg);
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@media (max-width: 1024px) {
font-size: 16px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--text: #9ca3af;
--text-h: #f3f4f6;
--bg: #16171d;
--border: #2e303a;
--code-bg: #1f2028;
--accent: #c084fc;
--accent-bg: rgba(192, 132, 252, 0.15);
--accent-border: rgba(192, 132, 252, 0.5);
--social-bg: rgba(47, 48, 58, 0.5);
--shadow:
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
}
#social .button-icon {
filter: invert(1) brightness(2);
}
} }
body { body {
margin: 0; margin: 0;
min-height: 100vh;
} }
h1, h1, h2, h3, h4, h5, h6 {
h2 { font-family: var(--yz-font);
font-family: var(--heading); color: var(--yz-text);
font-weight: 500; font-weight: 600;
color: var(--text-h);
}
h1 {
font-size: 56px;
letter-spacing: -1.68px;
margin: 32px 0;
@media (max-width: 1024px) {
font-size: 36px;
margin: 20px 0;
}
}
h2 {
font-size: 24px;
line-height: 118%;
letter-spacing: -0.24px;
margin: 0 0 8px;
@media (max-width: 1024px) {
font-size: 20px;
}
}
p {
margin: 0; margin: 0;
} }
code, h1 { font-size: 28px; letter-spacing: 2px; }
.counter { h2 { font-size: 22px; letter-spacing: 1.5px; }
font-family: var(--mono); h3 { font-size: 18px; letter-spacing: 1px; }
display: inline-flex; h4 { font-size: 16px; letter-spacing: 0.5px; }
border-radius: 4px;
color: var(--text-h); p { margin: 0; }
a {
color: var(--yz-primary);
text-decoration: none;
transition: var(--yz-transition-fast);
} }
a:hover {
code { color: var(--yz-primary-dark);
font-size: 15px;
line-height: 135%;
padding: 4px 8px;
background: var(--code-bg);
}
.counter {
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
color: var(--accent);
background: var(--accent-bg);
border: 2px solid transparent;
transition: border-color 0.3s;
margin-bottom: 24px;
&:hover {
border-color: var(--accent-border);
}
&:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
}
.hero {
position: relative;
.base,
.framework,
.vite {
inset-inline: 0;
margin: 0 auto;
}
.base {
width: 170px;
position: relative;
z-index: 0;
}
.framework,
.vite {
position: absolute;
}
.framework {
z-index: 1;
top: 34px;
height: 28px;
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
scale(1.4);
}
.vite {
z-index: 0;
top: 107px;
height: 26px;
width: auto;
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
scale(0.8);
}
} }
#app { #app {
width: 1126px; width: 100%;
max-width: 100%; max-width: 100%;
margin: 0 auto; min-height: 100vh;
text-align: center;
border-inline: 1px solid var(--border);
min-height: 100svh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
} }
#center { /* 全局选中态 */
display: flex; ::selection {
flex-direction: column; background: var(--yz-primary-lighter);
gap: 25px; color: var(--yz-text);
place-content: center;
place-items: center;
flex-grow: 1;
@media (max-width: 1024px) {
padding: 32px 20px 24px;
gap: 18px;
}
} }
#next-steps { /* 响应式基础 */
display: flex; @media (max-width: 768px) {
border-top: 1px solid var(--border); :root {
text-align: left; font-size: 13px;
& > div {
flex: 1 1 0;
padding: 32px;
@media (max-width: 1024px) {
padding: 24px 20px;
}
}
.icon {
margin-bottom: 16px;
width: 22px;
height: 22px;
}
@media (max-width: 1024px) {
flex-direction: column;
text-align: center;
}
}
#docs {
border-right: 1px solid var(--border);
@media (max-width: 1024px) {
border-right: none;
border-bottom: 1px solid var(--border);
}
}
#next-steps ul {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
margin: 32px 0 0;
.logo {
height: 18px;
}
a {
color: var(--text-h);
font-size: 16px;
border-radius: 6px;
background: var(--social-bg);
display: flex;
padding: 6px 12px;
align-items: center;
gap: 8px;
text-decoration: none;
transition: box-shadow 0.3s;
&:hover {
box-shadow: var(--shadow);
}
.button-icon {
height: 18px;
width: 18px;
}
}
@media (max-width: 1024px) {
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
li {
flex: 1 1 calc(50% - 8px);
}
a {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
}
}
#spacer {
height: 88px;
border-top: 1px solid var(--border);
@media (max-width: 1024px) {
height: 48px;
}
}
.ticks {
position: relative;
width: 100%;
&::before,
&::after {
content: '';
position: absolute;
top: -4.5px;
border: 5px solid transparent;
}
&::before {
left: 0;
border-left-color: var(--border);
}
&::after {
right: 0;
border-right-color: var(--border);
} }
} }

2
frontend/src/views/DesignPage.vue
View File

@@ -22,7 +22,7 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.design-page { .design-page {
display: flex; display: flex;
height: calc(100vh - 60px); height: calc(100vh - 64px);
background-color: #FAF8F5; background-color: #FAF8F5;
} }
</style> </style>

79
frontend/src/views/GeneratePage.vue
View File

@@ -476,17 +476,19 @@ onUnmounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B; $primary-color: #5B7E6B;
$primary-light: #8BAF9C; $primary-light: #8BAF9C;
$primary-lighter: #D4E5DB;
$primary-dark: #3D5A4A; $primary-dark: #3D5A4A;
$secondary-color: #C4A86C; $secondary-color: #C4A86C;
$bg-color: #FAF8F5; $bg-color: #FAF8F5;
$bg-dark: #F0EDE8; $bg-dark: #F0EDE8;
$border-color: #E8E4DF; $border-color: #E8E4DF;
$border-light: #F0EDE8;
$text-primary: #2C2C2C; $text-primary: #2C2C2C;
$text-secondary: #6B6B6B; $text-secondary: #6B6B6B;
$text-light: #999999; $text-light: #999999;
.generate-page { .generate-page {
min-height: calc(100vh - 60px); min-height: calc(100vh - 64px);
background-color: $bg-color; background-color: $bg-color;
padding-bottom: 60px; padding-bottom: 60px;
} }
@@ -496,27 +498,28 @@ $text-light: #999999;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24px; gap: 24px;
padding: 20px 40px; padding: 16px 40px;
background: #fff; background: #fff;
border-bottom: 1px solid $border-color; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
} }
.back-btn { .back-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 8px 16px; padding: 8px 18px;
background: transparent; background: transparent;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 6px; border-radius: 20px;
color: $text-secondary; color: $text-secondary;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.25s ease;
&:hover { &:hover {
border-color: $primary-color; border-color: $primary-color;
color: $primary-color; color: $primary-color;
background: rgba($primary-color, 0.04);
} }
} }
@@ -591,7 +594,7 @@ $text-light: #999999;
.section-title { .section-title {
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0 0 8px 0; margin: 0 0 8px 0;
letter-spacing: 2px; letter-spacing: 2px;
@@ -610,14 +613,15 @@ $text-light: #999999;
// 参数面板 // 参数面板
.params-panel { .params-panel {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 16px;
padding: 24px 28px; padding: 28px 32px;
margin-bottom: 28px; margin-bottom: 28px;
border: 1px solid $border-color; border: 1px solid $border-light;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
} }
.param-group { .param-group {
margin-bottom: 18px; margin-bottom: 20px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -627,9 +631,9 @@ $text-light: #999999;
.param-label { .param-label {
display: block; display: block;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 600;
color: $text-secondary; color: $text-secondary;
margin-bottom: 8px; margin-bottom: 10px;
letter-spacing: 1px; letter-spacing: 1px;
.param-hint { .param-hint {
@@ -648,19 +652,20 @@ $text-light: #999999;
.tag-item { .tag-item {
display: inline-block; display: inline-block;
padding: 6px 14px; padding: 7px 16px;
background: $bg-color; background: $bg-color;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 16px; border-radius: 20px;
font-size: 13px; font-size: 13px;
color: $text-secondary; color: $text-secondary;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.25s ease;
user-select: none; user-select: none;
&:hover { &:hover {
border-color: $primary-light; border-color: $primary-light;
color: $primary-color; color: $primary-color;
background: rgba($primary-color, 0.04);
} }
&.active { &.active {
@@ -674,7 +679,7 @@ $text-light: #999999;
width: 130px; width: 130px;
:deep(.el-input__inner) { :deep(.el-input__inner) {
border-radius: 16px; border-radius: 20px;
font-size: 13px; font-size: 13px;
} }
} }
@@ -685,7 +690,7 @@ $text-light: #999999;
.prompt-title { .prompt-title {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0; margin: 0;
letter-spacing: 1px; letter-spacing: 1px;
@@ -695,9 +700,9 @@ $text-light: #999999;
:deep(.el-textarea__inner) { :deep(.el-textarea__inner) {
background: #fff; background: #fff;
border: 2px solid $border-color; border: 2px solid $border-color;
border-radius: 12px; border-radius: 14px;
padding: 20px; padding: 20px;
font-size: 16px; font-size: 15px;
line-height: 1.8; line-height: 1.8;
color: $text-primary; color: $text-primary;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -708,7 +713,7 @@ $text-light: #999999;
&:focus { &:focus {
border-color: $primary-color; border-color: $primary-color;
box-shadow: 0 0 0 4px rgba($primary-color, 0.1); box-shadow: 0 0 0 4px rgba($primary-color, 0.08);
} }
} }
@@ -728,16 +733,16 @@ $text-light: #999999;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 16px 48px; padding: 16px 52px;
background: linear-gradient(135deg, $primary-color, $primary-dark); background: linear-gradient(135deg, $primary-color, $primary-dark);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 12px; border-radius: 14px;
font-size: 17px; font-size: 17px;
font-weight: 500; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
letter-spacing: 2px; letter-spacing: 3px;
.el-icon { .el-icon {
font-size: 20px; font-size: 20px;
@@ -745,7 +750,7 @@ $text-light: #999999;
&:hover:not(:disabled) { &:hover:not(:disabled) {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba($primary-color, 0.4); box-shadow: 0 8px 28px rgba($primary-color, 0.35);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
@@ -764,16 +769,18 @@ $text-light: #999999;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 14px 32px; padding: 14px 32px;
background: $primary-color; background: linear-gradient(135deg, $primary-color, $primary-dark);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: 12px;
font-size: 15px; font-size: 15px;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.25s ease; transition: all 0.25s ease;
&:hover { &:hover {
background: $primary-dark; transform: translateY(-2px);
box-shadow: 0 6px 20px rgba($primary-color, 0.3);
} }
} }
@@ -783,7 +790,7 @@ $text-light: #999999;
justify-content: center; justify-content: center;
margin-top: 32px; margin-top: 32px;
padding-top: 24px; padding-top: 24px;
border-top: 1px solid $border-color; border-top: 1px solid $border-light;
} }
.btn-regenerate { .btn-regenerate {
@@ -794,7 +801,7 @@ $text-light: #999999;
background: #fff; background: #fff;
color: $text-secondary; color: $text-secondary;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 8px; border-radius: 20px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -802,6 +809,7 @@ $text-light: #999999;
&:hover { &:hover {
border-color: $primary-color; border-color: $primary-color;
color: $primary-color; color: $primary-color;
background: rgba($primary-color, 0.04);
} }
} }
@@ -812,7 +820,7 @@ $text-light: #999999;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(255, 255, 255, 0.95); background: rgba(250, 248, 245, 0.96);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -833,8 +841,8 @@ $text-light: #999999;
} }
.ink-drop { .ink-drop {
width: 16px; width: 14px;
height: 16px; height: 14px;
background: $primary-color; background: $primary-color;
border-radius: 50%; border-radius: 50%;
animation: ink-spread 1.4s ease-in-out infinite; animation: ink-spread 1.4s ease-in-out infinite;
@@ -864,6 +872,7 @@ $text-light: #999999;
color: $text-primary; color: $text-primary;
letter-spacing: 2px; letter-spacing: 2px;
margin: 0; margin: 0;
font-weight: 500;
} }
.loading-hint { .loading-hint {
@@ -875,7 +884,7 @@ $text-light: #999999;
// 响应式 // 响应式
@media (max-width: 768px) { @media (max-width: 768px) {
.page-header { .page-header {
padding: 16px 20px; padding: 12px 20px;
gap: 16px; gap: 16px;
} }

86
frontend/src/views/Login.vue
View File

@@ -3,7 +3,8 @@
<div class="login-card"> <div class="login-card">
<!-- 品牌区域 --> <!-- 品牌区域 -->
<div class="brand-section"> <div class="brand-section">
<h1 class="brand-name">玉宗</h1> <h1 class="brand-name">玉 宗</h1>
<p class="brand-en">YUZONG JEWELRY</p>
<p class="brand-subtitle">珠宝设计大师</p> <p class="brand-subtitle">珠宝设计大师</p>
</div> </div>
@@ -105,22 +106,41 @@ const handleLogin = async () => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B;
$primary-dark: #3D5A4A;
$primary-lighter: #D4E5DB;
.login-page { .login-page {
min-height: calc(100vh - 108px); min-height: calc(100vh - 64px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #FAF8F5; background: linear-gradient(160deg, #FAF8F5 0%, #f0f4f1 40%, #e8efe9 100%);
padding: 24px; padding: 24px;
position: relative;
&::before {
content: '';
position: absolute;
top: 10%;
right: 10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba($primary-color, 0.05) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
} }
.login-card { .login-card {
width: 100%; width: 100%;
max-width: 400px; max-width: 420px;
padding: 48px 40px; padding: 48px 44px;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 20px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 1;
} }
.brand-section { .brand-section {
@@ -129,10 +149,18 @@ const handleLogin = async () => {
.brand-name { .brand-name {
font-size: 36px; font-size: 36px;
font-weight: 600; font-weight: 700;
color: #5B7E6B; color: $primary-color;
letter-spacing: 8px; letter-spacing: 10px;
margin: 0 0 8px 0; margin: 0 0 4px 0;
}
.brand-en {
font-size: 10px;
color: #999;
letter-spacing: 3px;
margin: 0 0 12px 0;
opacity: 0.7;
} }
.brand-subtitle { .brand-subtitle {
@@ -145,12 +173,18 @@ const handleLogin = async () => {
.login-form { .login-form {
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
border-radius: 8px; border-radius: 10px;
padding: 4px 12px; padding: 6px 14px;
box-shadow: 0 0 0 1px #E8E4DF inset !important;
transition: all 0.25s ease;
&:hover, &.is-focus {
box-shadow: 0 0 0 1px $primary-color inset !important;
}
} }
:deep(.el-input__prefix) { :deep(.el-input__prefix) {
color: #999; color: #bbb;
} }
:deep(.el-form-item) { :deep(.el-form-item) {
@@ -160,24 +194,24 @@ const handleLogin = async () => {
.login-button { .login-button {
width: 100%; width: 100%;
height: 48px; height: 50px;
border-radius: 8px; border-radius: 12px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 600;
background-color: #5B7E6B; background: linear-gradient(135deg, $primary-color, $primary-dark);
border-color: #5B7E6B; border-color: $primary-color;
letter-spacing: 2px; letter-spacing: 3px;
&:hover, &:hover,
&:focus { &:focus {
background-color: #3D5A4A; background: linear-gradient(135deg, $primary-dark, #2d4638);
border-color: #3D5A4A; border-color: $primary-dark;
} }
} }
.footer-links { .footer-links {
text-align: center; text-align: center;
margin-top: 24px; margin-top: 28px;
font-size: 14px; font-size: 14px;
.text { .text {
@@ -185,13 +219,13 @@ const handleLogin = async () => {
} }
.link { .link {
color: #5B7E6B; color: $primary-color;
text-decoration: none; text-decoration: none;
margin-left: 4px; margin-left: 4px;
font-weight: 500; font-weight: 600;
&:hover { &:hover {
color: #3D5A4A; color: $primary-dark;
text-decoration: underline; text-decoration: underline;
} }
} }

89
frontend/src/views/Register.vue
View File

@@ -3,7 +3,8 @@
<div class="register-card"> <div class="register-card">
<!-- 品牌区域 --> <!-- 品牌区域 -->
<div class="brand-section"> <div class="brand-section">
<h1 class="brand-name">玉宗</h1> <h1 class="brand-name">玉 宗</h1>
<p class="brand-en">YUZONG JEWELRY</p>
<p class="brand-subtitle">创建您的账户</p> <p class="brand-subtitle">创建您的账户</p>
</div> </div>
@@ -144,34 +145,60 @@ const handleRegister = async () => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B;
$primary-dark: #3D5A4A;
.register-page { .register-page {
min-height: calc(100vh - 108px); min-height: calc(100vh - 64px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #FAF8F5; background: linear-gradient(160deg, #FAF8F5 0%, #f0f4f1 40%, #e8efe9 100%);
padding: 24px; padding: 24px;
position: relative;
&::before {
content: '';
position: absolute;
bottom: 15%;
left: 8%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba($primary-color, 0.04) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
} }
.register-card { .register-card {
width: 100%; width: 100%;
max-width: 400px; max-width: 420px;
padding: 48px 40px; padding: 48px 44px;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 20px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 1;
} }
.brand-section { .brand-section {
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 36px;
.brand-name { .brand-name {
font-size: 36px; font-size: 36px;
font-weight: 600; font-weight: 700;
color: #5B7E6B; color: $primary-color;
letter-spacing: 8px; letter-spacing: 10px;
margin: 0 0 8px 0; margin: 0 0 4px 0;
}
.brand-en {
font-size: 10px;
color: #999;
letter-spacing: 3px;
margin: 0 0 12px 0;
opacity: 0.7;
} }
.brand-subtitle { .brand-subtitle {
@@ -184,39 +211,45 @@ const handleRegister = async () => {
.register-form { .register-form {
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
border-radius: 8px; border-radius: 10px;
padding: 4px 12px; padding: 6px 14px;
box-shadow: 0 0 0 1px #E8E4DF inset !important;
transition: all 0.25s ease;
&:hover, &.is-focus {
box-shadow: 0 0 0 1px $primary-color inset !important;
}
} }
:deep(.el-input__prefix) { :deep(.el-input__prefix) {
color: #999; color: #bbb;
} }
:deep(.el-form-item) { :deep(.el-form-item) {
margin-bottom: 24px; margin-bottom: 22px;
} }
} }
.register-button { .register-button {
width: 100%; width: 100%;
height: 48px; height: 50px;
border-radius: 8px; border-radius: 12px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 600;
background-color: #5B7E6B; background: linear-gradient(135deg, $primary-color, $primary-dark);
border-color: #5B7E6B; border-color: $primary-color;
letter-spacing: 2px; letter-spacing: 3px;
&:hover, &:hover,
&:focus { &:focus {
background-color: #3D5A4A; background: linear-gradient(135deg, $primary-dark, #2d4638);
border-color: #3D5A4A; border-color: $primary-dark;
} }
} }
.footer-links { .footer-links {
text-align: center; text-align: center;
margin-top: 24px; margin-top: 28px;
font-size: 14px; font-size: 14px;
.text { .text {
@@ -224,13 +257,13 @@ const handleRegister = async () => {
} }
.link { .link {
color: #5B7E6B; color: $primary-color;
text-decoration: none; text-decoration: none;
margin-left: 4px; margin-left: 4px;
font-weight: 500; font-weight: 600;
&:hover { &:hover {
color: #3D5A4A; color: $primary-dark;
text-decoration: underline; text-decoration: underline;
} }
} }

64
frontend/src/views/UserCenter.vue
View File

@@ -396,14 +396,16 @@ const handleChangePassword = async () => {
<style scoped lang="scss"> <style scoped lang="scss">
$primary-color: #5B7E6B; $primary-color: #5B7E6B;
$primary-dark: #3D5A4A; $primary-dark: #3D5A4A;
$primary-lighter: #D4E5DB;
$bg-color: #FAF8F5; $bg-color: #FAF8F5;
$border-color: #E8E4DF; $border-color: #E8E4DF;
$border-light: #F0EDE8;
$text-primary: #2C2C2C; $text-primary: #2C2C2C;
$text-secondary: #6B6B6B; $text-secondary: #6B6B6B;
$text-light: #999999; $text-light: #999999;
.user-center { .user-center {
min-height: calc(100vh - 108px); min-height: calc(100vh - 64px);
background-color: $bg-color; background-color: $bg-color;
padding: 32px 24px; padding: 32px 24px;
} }
@@ -414,8 +416,8 @@ $text-light: #999999;
} }
.page-title { .page-title {
font-size: 28px; font-size: 26px;
font-weight: 600; font-weight: 700;
color: $text-primary; color: $text-primary;
margin: 0 0 24px 0; margin: 0 0 24px 0;
letter-spacing: 2px; letter-spacing: 2px;
@@ -423,22 +425,22 @@ $text-light: #999999;
.user-tabs { .user-tabs {
background: #fff; background: #fff;
border-radius: 12px; border-radius: 16px;
padding: 24px; padding: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
:deep(.el-tabs__nav-wrap::after) { :deep(.el-tabs__nav-wrap::after) {
height: 1px; height: 1px;
background-color: $border-color; background-color: $border-light;
} }
:deep(.el-tabs__item) { :deep(.el-tabs__item) {
font-size: 16px; font-size: 15px;
color: $text-secondary; color: $text-secondary;
&.is-active { &.is-active {
color: $primary-color; color: $primary-color;
font-weight: 500; font-weight: 600;
} }
&:hover { &:hover {
@@ -448,6 +450,7 @@ $text-light: #999999;
:deep(.el-tabs__active-bar) { :deep(.el-tabs__active-bar) {
background-color: $primary-color; background-color: $primary-color;
border-radius: 2px;
} }
} }
@@ -489,19 +492,20 @@ $text-light: #999999;
} }
.empty-text { .empty-text {
font-size: 16px; font-size: 15px;
color: $text-secondary; color: $text-secondary;
margin: 0 0 24px 0; margin: 0 0 24px 0;
} }
.create-btn { .create-btn {
background-color: $primary-color; background: linear-gradient(135deg, $primary-color, $primary-dark);
border-color: $primary-color; border-color: $primary-color;
padding: 12px 32px; padding: 12px 32px;
font-size: 15px; font-size: 15px;
border-radius: 12px;
&:hover { &:hover {
background-color: $primary-dark; background: linear-gradient(135deg, $primary-dark, #2d4638);
border-color: $primary-dark; border-color: $primary-dark;
} }
} }
@@ -517,24 +521,24 @@ $text-light: #999999;
.design-card { .design-card {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 14px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s; transition: all 0.25s ease;
border: 1px solid $border-color; border: 1px solid $border-light;
&:hover { &:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
} }
} }
.card-image { .card-image {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 75%; // 4:3 aspect ratio padding-top: 75%;
background-color: #f5f5f5; background-color: $bg-color;
overflow: hidden; overflow: hidden;
img { img {
@@ -544,6 +548,11 @@ $text-light: #999999;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.3s ease;
}
.design-card:hover & img {
transform: scale(1.03);
} }
.no-image { .no-image {
@@ -557,7 +566,7 @@ $text-light: #999999;
justify-content: center; justify-content: center;
color: $text-light; color: $text-light;
font-size: 14px; font-size: 14px;
background-color: #f9f9f9; background-color: $bg-color;
} }
} }
@@ -569,7 +578,7 @@ $text-light: #999999;
font-size: 12px; font-size: 12px;
color: $primary-color; color: $primary-color;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500; font-weight: 600;
} }
.card-prompt { .card-prompt {
@@ -623,7 +632,7 @@ $text-light: #999999;
:deep(.el-pager li.is-active) { :deep(.el-pager li.is-active) {
color: $primary-color; color: $primary-color;
font-weight: 500; font-weight: 600;
} }
} }
@@ -635,14 +644,14 @@ $text-light: #999999;
} }
.password-section { .password-section {
border-top: 1px solid $border-color; border-top: 1px solid $border-light;
margin-top: 24px; margin-top: 24px;
padding-top: 32px; padding-top: 32px;
} }
.section-title { .section-title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 600;
color: $text-primary; color: $text-primary;
margin: 0 0 24px 0; margin: 0 0 24px 0;
} }
@@ -654,19 +663,20 @@ $text-light: #999999;
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
border-radius: 6px; border-radius: 10px;
} }
:deep(.el-input.is-disabled .el-input__wrapper) { :deep(.el-input.is-disabled .el-input__wrapper) {
background-color: #f9f9f9; background-color: $bg-color;
} }
:deep(.el-button--primary) { :deep(.el-button--primary) {
background-color: $primary-color; background: linear-gradient(135deg, $primary-color, $primary-dark);
border-color: $primary-color; border-color: $primary-color;
border-radius: 10px;
&:hover { &:hover {
background-color: $primary-dark; background: linear-gradient(135deg, $primary-dark, #2d4638);
border-color: $primary-dark; border-color: $primary-dark;
} }
} }

BIN
init_data.sql.zip
View File

Binary file not shown.