-
-
-
+
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/web/src/assets/styles/animations.scss b/web/src/assets/styles/animations.scss
deleted file mode 100644
index 1a8bb82..0000000
--- a/web/src/assets/styles/animations.scss
+++ /dev/null
@@ -1,256 +0,0 @@
-// 动画效果样式文件
-
-/* 淡入向上动画 */
-.animate-fade-in-up {
- animation: fade-in-up 0.8s ease-out forwards;
- opacity: 0;
-}
-
-.delay-100 { animation-delay: 0.1s; }
-.delay-200 { animation-delay: 0.2s; }
-.delay-300 { animation-delay: 0.3s; }
-.delay-400 { animation-delay: 0.4s; }
-.delay-500 { animation-delay: 0.5s; }
-.delay-600 { animation-delay: 0.6s; }
-.delay-700 { animation-delay: 0.7s; }
-.delay-800 { animation-delay: 0.8s; }
-.delay-900 { animation-delay: 0.9s; }
-.delay-1000 { animation-delay: 1s; }
-
-@keyframes fade-in-up {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* 滚动触发动画 */
-.scroll-target {
- opacity: 0;
- transform: translateY(30px);
- transition: opacity 0.6s ease-out, transform 0.6s ease-out;
-
- &.visible {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* 波浪动画 */
-.wave {
- background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTQ0MCAxNDciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPmdyb3VwPC90aXRsZT48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBpZD0iQ29tcG9uZW50LS0tV2F2ZS1Cb3R0b20iIGZpbGw9IiM0QTkwRTIiPjxwYXRoIGQ9Ik0wLDc0LjgzMjk0MTIgQzM2MCw3NC44MzI5NDEyIDM2MCwxNDcgNzIwLDE0NyBDMTA4MCwxNDcgMTA4MCw3NC44MzI5NDEyIDE0NDAsNzQuODMyOTQxMiBMMTQ0MCwxNDcgTDAsMTQ3IEwwLDc0LjgzMjk0MTIgWiIgaWQ9IldhdmUiIG9wYWNpdHk9IjAuMSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+");
- position: absolute;
- bottom: 0;
- left: 0;
- width: 200%;
- height: 147px;
- animation: wave 15s linear infinite;
-
- &:nth-child(2) {
- animation-direction: reverse;
- animation-duration: 20s;
- opacity: 0.8;
- }
-
- &:nth-child(3) {
- animation-duration: 25s;
- opacity: 0.5;
- }
-}
-
-@keyframes wave {
- 0% { transform: translateX(0); }
- 50% { transform: translateX(-50%); }
- 100% { transform: translateX(0); }
-}
-
-/* 悬停效果 */
-.hover-lift {
- transition: transform 0.3s ease, box-shadow 0.3s ease;
-
- &:hover {
- transform: translateY(-4px);
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
- }
-}
-
-.hover-scale {
- transition: transform 0.3s ease;
-
- &:hover {
- transform: scale(1.05);
- }
-}
-
-/* 按钮动画 */
-.btn-bounce {
- transition: all 0.3s ease;
-
- &:hover {
- transform: translateY(-2px) scale(1.05);
- }
-
- &:active {
- transform: translateY(0) scale(0.98);
- }
-}
-
-/* 加载动画 */
-.loading-pulse {
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse {
- 0%, 100% {
- opacity: 1;
- }
- 50% {
- opacity: 0.5;
- }
-}
-
-/* 旋转动画 */
-.loading-spin {
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-/* 滑入动画 */
-.slide-in-left {
- animation: slide-in-left 0.5s ease-out;
-}
-
-.slide-in-right {
- animation: slide-in-right 0.5s ease-out;
-}
-
-.slide-in-down {
- animation: slide-in-down 0.3s ease-out;
-}
-
-@keyframes slide-in-left {
- from {
- opacity: 0;
- transform: translateX(-30px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
-}
-
-@keyframes slide-in-right {
- from {
- opacity: 0;
- transform: translateX(30px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
-}
-
-@keyframes slide-in-down {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* 弹性动画 */
-.bounce-in {
- animation: bounce-in 0.6s ease-out;
-}
-
-@keyframes bounce-in {
- 0% {
- opacity: 0;
- transform: scale(0.3);
- }
- 50% {
- opacity: 1;
- transform: scale(1.05);
- }
- 70% {
- transform: scale(0.9);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
-}
-
-/* 渐变背景动画 */
-.gradient-animation {
- background: linear-gradient(-45deg, #4A90E2, #F5A623, #4A90E2, #F5A623);
- background-size: 400% 400%;
- animation: gradient-shift 15s ease infinite;
-}
-
-@keyframes gradient-shift {
- 0% {
- background-position: 0% 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0% 50%;
- }
-}
-
-/* 打字机效果 */
-.typewriter {
- overflow: hidden;
- border-right: 0.15em solid #4A90E2;
- white-space: nowrap;
- margin: 0 auto;
- letter-spacing: 0.15em;
- animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
-}
-
-@keyframes typing {
- from {
- width: 0;
- }
- to {
- width: 100%;
- }
-}
-
-@keyframes blink-caret {
- from, to {
- border-color: transparent;
- }
- 50% {
- border-color: #4A90E2;
- }
-}
-
-/* 响应式动画控制 */
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
-}
diff --git a/web/src/assets/styles/global.scss b/web/src/assets/styles/global.scss
deleted file mode 100644
index 4cfc801..0000000
--- a/web/src/assets/styles/global.scss
+++ /dev/null
@@ -1,153 +0,0 @@
-@use "@/assets/styles/variables.scss" as *;
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
-
-/* 全局重置 */
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-html {
- scroll-behavior: smooth;
-}
-
-body {
- font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
- font-size: 14px;
- line-height: 1.6;
- color: #333333;
- background-color: #f5f5f5;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-/* 滚动条样式 */
-::-webkit-scrollbar {
- width: 6px;
- height: 6px;
-}
-
-::-webkit-scrollbar-track {
- background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
- background: rgba(0, 0, 0, 0.2);
- border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: rgba(0, 0, 0, 0.3);
-}
-
-/* 工具类 */
-.text-tech-blue {
- color: #4a90e2 !important;
-}
-
-.text-warm-orange {
- color: #ff7849 !important;
-}
-
-.bg-tech-blue {
- background-color: #4a90e2 !important;
-}
-
-.bg-warm-orange {
- background-color: #ff7849 !important;
-}
-
-.bg-light-gray {
- background-color: #f5f5f5 !important;
-}
-
-/* 动画类 */
-.fade-in-up {
- animation: fadeInUp 0.8s ease-out forwards;
- opacity: 0;
-}
-
-@keyframes fadeInUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.scroll-target {
- opacity: 0;
- transform: translateY(30px);
- transition: opacity 0.6s ease-out, transform 0.6s ease-out;
-}
-
-.scroll-target.visible {
- opacity: 1;
- transform: translateY(0);
-}
-
-/* 响应式工具类 */
-.container {
- width: 100%;
- margin: 0 auto;
- padding: 0 16px;
-}
-
-@media (min-width: 640px) {
- .container {
- max-width: 640px;
- }
-}
-
-@media (min-width: 768px) {
- .container {
- max-width: 768px;
- }
-}
-
-@media (min-width: 1024px) {
- .container {
- max-width: 1024px;
- }
-}
-
-@media (min-width: 1280px) {
- .container {
- max-width: 1280px;
- }
-}
-
-@media (min-width: 1536px) {
- .container {
- max-width: 1536px;
- }
-}
-
-/* Ant Design 主题覆盖 */
-.ant-btn-primary {
- background-color: #4a90e2;
- border-color: #4a90e2;
-}
-
-.ant-btn-primary:hover,
-.ant-btn-primary:focus {
- background-color: #5ba0f2;
- border-color: #5ba0f2;
-}
-
-.ant-btn-orange {
- background-color: #ff7849;
- border-color: #ff7849;
- color: white;
-}
-
-.ant-btn-orange:hover,
-.ant-btn-orange:focus {
- background-color: #ff8859;
- border-color: #ff8859;
- color: white;
-}
diff --git a/web/src/assets/styles/globalThis.scss b/web/src/assets/styles/globalThis.scss
deleted file mode 100644
index baef2a6..0000000
--- a/web/src/assets/styles/globalThis.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use "@/assets/styles/variables.scss" as *;
\ No newline at end of file
diff --git a/web/src/assets/styles/index.css b/web/src/assets/styles/index.css
new file mode 100644
index 0000000..9585a84
--- /dev/null
+++ b/web/src/assets/styles/index.css
@@ -0,0 +1,215 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 原始CSS变量 */
+:root {
+ --tech-blue: #4A90E2;
+ --warm-orange: #F5A623;
+ --white: #FFFFFF;
+ --light-gray: #F7F8FA;
+ --text-dark: #333333;
+ --text-medium: #888888;
+}
+
+/* 全局样式 */
+@layer base {
+ html {
+ font-family: 'Noto Sans SC', system-ui, sans-serif;
+ }
+
+ body {
+ @apply text-gray-900 bg-gray-50;
+ font-family: 'Noto Sans SC', sans-serif;
+ }
+}
+
+@layer components {
+ /* 自定义组件样式 */
+ .btn-primary {
+ @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+ }
+
+ .btn-secondary {
+ @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+ }
+
+ .card {
+ @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
+ }
+
+ .input-field {
+ @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+ }
+
+ /* 原始样式类 */
+ .bg-tech-blue { background-color: var(--tech-blue); }
+ .bg-warm-orange { background-color: var(--warm-orange); }
+ .bg-light-gray { background-color: var(--light-gray); }
+ .text-tech-blue { color: var(--tech-blue); }
+ .text-text-dark { color: var(--text-dark); }
+ .text-text-medium { color: var(--text-medium); }
+ .border-tech-blue { border-color: var(--tech-blue); }
+
+ /* Header滚动样式 */
+ #main-header.scrolled {
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+ border-bottom-color: #e5e7eb;
+ }
+
+ /* 功能卡片样式 */
+ .feature-card-bg {
+ background-color: var(--white);
+ border: 1px solid #e5e7eb;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .feature-card-bg:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ }
+
+ .feature-card-image-container {
+ background-color: #eef5fe;
+ background-image: url('data:image/svg+xml;utf8,
');
+ background-size: 50px;
+ background-repeat: repeat;
+ }
+
+ /* 动画样式 */
+ .animate-fade-in-up {
+ animation: fade-in-up 0.8s ease-out forwards;
+ opacity: 0;
+ }
+
+ .scroll-target {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+ }
+
+ .scroll-target.visible {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ /* 波浪动画 */
+ .wave {
+ background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTQ0MCAxNDciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPmdyb3VwPC90aXRsZT48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBpZD0iQ29tcG9uZW50LS0tV2F2ZS1Cb3R0b20iIGZpbGw9IiM0QTkwRTIiPjxwYXRoIGQ9Ik0wLDc0LjgzMjk0MTIgQzM2MCw3NC44MzI5NDEyIDM2MCwxNDcgNzIwLDE0NyBDMTA4MCwxNDcgMTA4MCw3NC44MzI5NDEyIDE0NDAsNzQuODMyOTQxMiBMMTQ0MCwxNDcgTDAsMTQ3IEwwLDc0LjgzMjk0MTIgWiIgaWQ9IldhdmUiIG9wYWNpdHk9IjAuMSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 200%;
+ height: 147px;
+ animation: wave 15s linear infinite;
+ }
+
+ .wave:nth-of-type(2) {
+ animation-direction: reverse;
+ animation-duration: 20s;
+ opacity: 0.8;
+ }
+
+ .wave:nth-of-type(3) {
+ animation-duration: 25s;
+ opacity: 0.5;
+ }
+
+ /* 聊天消息样式 */
+ #chat-messages {
+ scrollbar-width: thin;
+ scrollbar-color: var(--tech-blue) var(--light-gray);
+ }
+
+ #chat-messages::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ #chat-messages::-webkit-scrollbar-track {
+ background: var(--light-gray);
+ }
+
+ #chat-messages::-webkit-scrollbar-thumb {
+ background-color: var(--tech-blue);
+ border-radius: 10px;
+ border: 2px solid transparent;
+ background-clip: content-box;
+ }
+
+ .message-animate {
+ animation: message-fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+ opacity: 0;
+ transform: translateY(10px);
+ }
+
+ /* 模态框样式 */
+ #login-modal:not(.hidden) {
+ animation: modal-fade-in 0.2s ease-out forwards;
+ }
+
+ #login-modal:not(.hidden) > div {
+ animation: modal-scale-up 0.2s ease-out forwards;
+ }
+
+ #topic-detail-modal.hidden {
+ display: none;
+ }
+}
+
+@layer utilities {
+ /* 自定义工具类 */
+ .text-gradient {
+ @apply bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent;
+ }
+
+ .shadow-soft {
+ box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
+ }
+}
+
+/* 关键帧动画 */
+@keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes wave {
+ 0% { transform: translateX(0); }
+ 50% { transform: translateX(-50%); }
+ 100% { transform: translateX(0); }
+}
+
+@keyframes message-fade-in {
+ from {
+ opacity: 0;
+ transform: translateY(10px) scale(0.98);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+@keyframes modal-fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes modal-scale-up {
+ from {
+ transform: scale(0.95);
+ }
+ to {
+ transform: scale(1);
+ }
+}
\ No newline at end of file
diff --git a/web/src/assets/styles/variables.scss b/web/src/assets/styles/variables.scss
deleted file mode 100644
index 2bc6228..0000000
--- a/web/src/assets/styles/variables.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-// 主题色彩
-$tech-blue: #4A90E2;
-$warm-orange: #F5A623;
-$white: #FFFFFF;
-$light-gray: #F7F8FA;
-$text-dark: #333333;
-$text-medium: #888888;
-$border-color: #e8e8e8;
-
-// 间距
-$spacing-xs: 4px;
-$spacing-sm: 8px;
-$spacing-md: 16px;
-$spacing-lg: 24px;
-$spacing-xl: 32px;
-$spacing-xxl: 48px;
-
-// 圆角
-$border-radius-sm: 4px;
-$border-radius-md: 8px;
-$border-radius-lg: 12px;
-$border-radius-xl: 16px;
-$border-radius-full: 9999px;
-
-// 阴影
-$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-
-// 断点
-$breakpoint-sm: 640px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
-$breakpoint-xxl: 1536px;
-
-// 字体大小
-$font-size-xs: 12px;
-$font-size-sm: 14px;
-$font-size-md: 16px; // 添加缺失的 md 尺寸
-$font-size-base: 16px;
-$font-size-lg: 18px;
-$font-size-xl: 20px;
-$font-size-2xl: 24px;
-$font-size-3xl: 30px;
-$font-size-4xl: 36px;
-
-// 字体权重
-$font-weight-normal: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-
-// 过渡动画
-$transition-fast: 0.15s ease-in-out;
-$transition-normal: 0.3s ease-in-out;
-$transition-slow: 0.5s ease-in-out;
diff --git a/web/src/components/ChatHistoryModal.vue b/web/src/components/ChatHistoryModal.vue
new file mode 100644
index 0000000..2c365c7
--- /dev/null
+++ b/web/src/components/ChatHistoryModal.vue
@@ -0,0 +1,302 @@
+
+
+
+
+
+
+
聊天历史记录
+
查看和搜索您的所有对话记录
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 共找到 {{ totalCount }} 条记录
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.sender === 'user' ? '我' : '开开' }}
+
+
+ {{ formatDateTime(message.createTime) }}
+
+
+
{{ message.content }}
+
+
{{ message.aiReply }}
+
+
+
+
+
+
+
+
+
+
+
+ 第 {{ currentPage }} 页，共 {{ totalPages }} 页
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/UserAvatar.vue b/web/src/components/UserAvatar.vue
new file mode 100644
index 0000000..353b72b
--- /dev/null
+++ b/web/src/components/UserAvatar.vue
@@ -0,0 +1,94 @@
+
+
+
![]()
+
+ {{ avatarText }}
+
+
+
+
+
+
diff --git a/web/src/components/UserDropdown.vue b/web/src/components/UserDropdown.vue
new file mode 100644
index 0000000..5aad8ed
--- /dev/null
+++ b/web/src/components/UserDropdown.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
{{ userInfo?.nickname || '用户' }}
+
{{ userInfo?.memberLevel || 'Lv.1' }}
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/layout/AppFooter.vue b/web/src/components/layout/AppFooter.vue
deleted file mode 100644
index 083e1fc..0000000
--- a/web/src/components/layout/AppFooter.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
-
diff --git a/web/src/components/layout/AppHeader.vue b/web/src/components/layout/AppHeader.vue
deleted file mode 100644
index 4785930..0000000
--- a/web/src/components/layout/AppHeader.vue
+++ /dev/null
@@ -1,321 +0,0 @@
-
-
-
-
-
-
-
diff --git a/web/src/components/layout/BottomNavigation.vue b/web/src/components/layout/BottomNavigation.vue
new file mode 100644
index 0000000..1054305
--- /dev/null
+++ b/web/src/components/layout/BottomNavigation.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
diff --git a/web/src/composables/useAuth.ts b/web/src/composables/useAuth.ts
new file mode 100644
index 0000000..2cd9755
--- /dev/null
+++ b/web/src/composables/useAuth.ts
@@ -0,0 +1,261 @@
+/**
+ * 认证相关组合式函数
+ */
+
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { useAuthStore } from '@/stores/auth'
+import AuthService from '@/services/auth'
+import type { LoginRequest, RegisterRequest, CaptchaResponse } from '@/types/auth'
+
+/**
+ * 使用认证功能
+ */
+export const useAuth = () => {
+ const router = useRouter()
+ const authStore = useAuthStore()
+
+ // 加载状态
+ const loading = ref(false)
+
+ // 验证码相关
+ const captchaData = ref
(null)
+ const captchaImage = computed(() =>
+ captchaData.value ? `data:image/png;base64,${captchaData.value.captchaImage}` : ''
+ )
+
+ /**
+ * 获取验证码
+ */
+ const getCaptcha = async () => {
+ try {
+ const response = await AuthService.getCaptcha()
+ captchaData.value = response
+ return response
+ } catch (error) {
+ console.error('获取验证码失败:', error)
+ ElMessage.error('获取验证码失败')
+ throw error
+ }
+ }
+
+ /**
+ * 刷新验证码
+ */
+ const refreshCaptcha = async () => {
+ return getCaptcha()
+ }
+
+ /**
+ * 登录
+ */
+ const login = async (loginData: LoginRequest) => {
+ try {
+ loading.value = true
+ const success = await authStore.login(loginData)
+
+ if (success) {
+ ElMessage.success('登录成功')
+ return true
+ }
+ return false
+ } catch (error: any) {
+ console.error('登录失败:', error)
+ ElMessage.error(error.message || '登录失败')
+ return false
+ } finally {
+ loading.value = false
+ }
+ }
+
+ /**
+ * 注册
+ */
+ const register = async (registerData: RegisterRequest) => {
+ try {
+ loading.value = true
+ const success = await authStore.register(registerData)
+
+ if (success) {
+ ElMessage.success('注册成功')
+ return true
+ }
+ return false
+ } catch (error: any) {
+ console.error('注册失败:', error)
+ ElMessage.error(error.message || '注册失败')
+ return false
+ } finally {
+ loading.value = false
+ }
+ }
+
+ /**
+ * 登出
+ */
+ const logout = async () => {
+ try {
+ await authStore.logout()
+ router.push('/login')
+ } catch (error) {
+ console.error('登出失败:', error)
+ }
+ }
+
+ /**
+ * 检查账号是否存在
+ */
+ const checkAccountExists = async (account: string) => {
+ if (!account || !/^[a-zA-Z0-9_]{4,20}$/.test(account)) {
+ return false
+ }
+
+ try {
+ return await AuthService.checkAccountExists(account)
+ } catch (error) {
+ console.error('检查账号失败:', error)
+ return false
+ }
+ }
+
+ /**
+ * 检查邮箱是否存在
+ */
+ const checkEmailExists = async (email: string) => {
+ if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+ return false
+ }
+
+ try {
+ return await AuthService.checkEmailExists(email)
+ } catch (error) {
+ console.error('检查邮箱失败:', error)
+ return false
+ }
+ }
+
+ /**
+ * 检查手机号是否存在
+ */
+ const checkPhoneExists = async (phone: string) => {
+ if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
+ return false
+ }
+
+ try {
+ return await AuthService.checkPhoneExists(phone)
+ } catch (error) {
+ console.error('检查手机号失败:', error)
+ return false
+ }
+ }
+
+ return {
+ // 状态
+ loading,
+ captchaData,
+ captchaImage,
+
+ // 计算属性
+ isLoggedIn: authStore.isLoggedIn,
+ userInfo: authStore.userInfo,
+
+ // 方法
+ getCaptcha,
+ refreshCaptcha,
+ login,
+ register,
+ logout,
+ checkAccountExists,
+ checkEmailExists,
+ checkPhoneExists
+ }
+}
+
+/**
+ * 使用表单验证
+ */
+export const useFormValidation = () => {
+ /**
+ * 账号验证规则
+ */
+ const validateAccount = (rule: any, value: string, callback: any) => {
+ if (!value) {
+ callback(new Error('请输入账号'))
+ return
+ }
+ if (!/^[a-zA-Z0-9_]{4,20}$/.test(value)) {
+ callback(new Error('账号只能包含字母、数字和下划线，长度4-20位'))
+ return
+ }
+ callback()
+ }
+
+ /**
+ * 密码验证规则
+ */
+ const validatePassword = (rule: any, value: string, callback: any) => {
+ if (!value) {
+ callback(new Error('请输入密码'))
+ return
+ }
+ if (value.length < 6 || value.length > 20) {
+ callback(new Error('密码长度必须在6-20位之间'))
+ return
+ }
+ callback()
+ }
+
+ /**
+ * 确认密码验证规则
+ */
+ const validateConfirmPassword = (password: string) => {
+ return (rule: any, value: string, callback: any) => {
+ if (!value) {
+ callback(new Error('请再次输入密码'))
+ return
+ }
+ if (value !== password) {
+ callback(new Error('两次输入的密码不一致'))
+ return
+ }
+ callback()
+ }
+ }
+
+ /**
+ * 邮箱验证规则
+ */
+ const validateEmail = (rule: any, value: string, callback: any) => {
+ if (!value) {
+ callback(new Error('请输入邮箱地址'))
+ return
+ }
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ if (!emailRegex.test(value)) {
+ callback(new Error('请输入正确的邮箱格式'))
+ return
+ }
+ callback()
+ }
+
+ /**
+ * 手机号验证规则
+ */
+ const validatePhone = (rule: any, value: string, callback: any) => {
+ if (value && !/^1[3-9]\d{9}$/.test(value)) {
+ callback(new Error('请输入正确的手机号格式'))
+ return
+ }
+ callback()
+ }
+
+ return {
+ validateAccount,
+ validatePassword,
+ validateConfirmPassword,
+ validateEmail,
+ validatePhone
+ }
+}
diff --git a/web/src/composables/useFormValidation.ts b/web/src/composables/useFormValidation.ts
new file mode 100644
index 0000000..04f6c4b
--- /dev/null
+++ b/web/src/composables/useFormValidation.ts
@@ -0,0 +1,311 @@
+/**
+ * 表单验证组合式函数
+ */
+
+import { ref, reactive, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+
+/**
+ * 使用表单验证
+ */
+export const useFormValidation = >(
+ initialData: T,
+ rules: FormRules
+) => {
+ const formRef = ref()
+ const formData = reactive({ ...initialData })
+ const errors = ref>({})
+ const isValidating = ref(false)
+
+ /**
+ * 验证整个表单
+ */
+ const validateForm = async (): Promise => {
+ if (!formRef.value) return false
+
+ try {
+ isValidating.value = true
+ await formRef.value.validate()
+ errors.value = {}
+ return true
+ } catch (error) {
+ console.error('表单验证失败:', error)
+ return false
+ } finally {
+ isValidating.value = false
+ }
+ }
+
+ /**
+ * 验证指定字段
+ */
+ const validateField = async (field: keyof T): Promise => {
+ if (!formRef.value) return false
+
+ try {
+ await formRef.value.validateField(field as string)
+ delete errors.value[field as string]
+ return true
+ } catch (error) {
+ errors.value[field as string] = error as string
+ return false
+ }
+ }
+
+ /**
+ * 清除验证结果
+ */
+ const clearValidation = (fields?: (keyof T)[]) => {
+ if (!formRef.value) return
+
+ if (fields) {
+ formRef.value.clearValidate(fields as string[])
+ fields.forEach(field => {
+ delete errors.value[field as string]
+ })
+ } else {
+ formRef.value.clearValidate()
+ errors.value = {}
+ }
+ }
+
+ /**
+ * 重置表单
+ */
+ const resetForm = () => {
+ if (!formRef.value) return
+
+ formRef.value.resetFields()
+ Object.assign(formData, initialData)
+ errors.value = {}
+ }
+
+ /**
+ * 设置字段错误
+ */
+ const setFieldError = (field: keyof T, message: string) => {
+ errors.value[field as string] = message
+ }
+
+ /**
+ * 清除字段错误
+ */
+ const clearFieldError = (field: keyof T) => {
+ delete errors.value[field as string]
+ }
+
+ /**
+ * 获取字段错误
+ */
+ const getFieldError = (field: keyof T) => {
+ return errors.value[field as string]
+ }
+
+ /**
+ * 检查表单是否有错误
+ */
+ const hasErrors = computed(() => {
+ return Object.keys(errors.value).length > 0
+ })
+
+ /**
+ * 检查表单是否有效
+ */
+ const isValid = computed(() => {
+ return !hasErrors.value && !isValidating.value
+ })
+
+ return {
+ formRef,
+ formData,
+ errors: computed(() => errors.value),
+ isValidating: computed(() => isValidating.value),
+ hasErrors,
+ isValid,
+ validateForm,
+ validateField,
+ clearValidation,
+ resetForm,
+ setFieldError,
+ clearFieldError,
+ getFieldError
+ }
+}
+
+/**
+ * 常用验证规则
+ */
+export const validationRules = {
+ /**
+ * 必填验证
+ */
+ required: (message = '此字段为必填项') => ({
+ required: true,
+ message,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 邮箱验证
+ */
+ email: (message = '请输入正确的邮箱格式') => ({
+ type: 'email' as const,
+ message,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 手机号验证
+ */
+ phone: (message = '请输入正确的手机号格式') => ({
+ pattern: /^1[3-9]\d{9}$/,
+ message,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 长度验证
+ */
+ length: (min: number, max: number, message?: string) => ({
+ min,
+ max,
+ message: message || `长度必须在${min}-${max}位之间`,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 最小长度验证
+ */
+ minLength: (min: number, message?: string) => ({
+ min,
+ message: message || `长度不能少于${min}位`,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 最大长度验证
+ */
+ maxLength: (max: number, message?: string) => ({
+ max,
+ message: message || `长度不能超过${max}位`,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 正则验证
+ */
+ pattern: (pattern: RegExp, message: string) => ({
+ pattern,
+ message,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 自定义验证
+ */
+ custom: (validator: (rule: any, value: any, callback: any) => void) => ({
+ validator,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 账号验证（字母数字下划线）
+ */
+ account: (message = '账号只能包含字母、数字和下划线，长度4-20位') => ({
+ pattern: /^[a-zA-Z0-9_]{4,20}$/,
+ message,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 密码验证
+ */
+ password: (min = 6, max = 20, message?: string) => ({
+ min,
+ max,
+ message: message || `密码长度必须在${min}-${max}位之间`,
+ trigger: 'blur'
+ }),
+
+ /**
+ * 确认密码验证
+ */
+ confirmPassword: (passwordField: string, message = '两次输入的密码不一致') => ({
+ validator: (rule: any, value: any, callback: any) => {
+ if (!value) {
+ callback(new Error('请再次输入密码'))
+ return
+ }
+ // 这里需要访问表单数据，在实际使用时需要传入表单数据
+ callback()
+ },
+ trigger: 'blur'
+ })
+}
+
+/**
+ * 使用实时验证
+ */
+export const useRealtimeValidation = >(
+ formData: T,
+ rules: FormRules
+) => {
+ const errors = ref>({})
+ const validFields = ref>(new Set())
+
+ /**
+ * 验证单个字段
+ */
+ const validateField = async (field: keyof T, value: any) => {
+ const fieldRules = rules[field as string]
+ if (!fieldRules) return true
+
+ try {
+ // 这里简化处理，实际应该使用async-validator
+ const ruleArray = Array.isArray(fieldRules) ? fieldRules : [fieldRules]
+
+ for (const rule of ruleArray) {
+ if (rule.required && (!value || value === '')) {
+ throw new Error(rule.message || '此字段为必填项')
+ }
+
+ if (rule.min && value && value.length < rule.min) {
+ throw new Error(rule.message || `长度不能少于${rule.min}位`)
+ }
+
+ if (rule.max && value && value.length > rule.max) {
+ throw new Error(rule.message || `长度不能超过${rule.max}位`)
+ }
+
+ if (rule.pattern && value && !rule.pattern.test(value)) {
+ throw new Error(rule.message || '格式不正确')
+ }
+ }
+
+ delete errors.value[field as string]
+ validFields.value.add(field as string)
+ return true
+ } catch (error: any) {
+ errors.value[field as string] = error.message
+ validFields.value.delete(field as string)
+ return false
+ }
+ }
+
+ /**
+ * 检查所有字段是否有效
+ */
+ const isAllValid = computed(() => {
+ const requiredFields = Object.keys(rules)
+ return requiredFields.every(field => validFields.value.has(field)) &&
+ Object.keys(errors.value).length === 0
+ })
+
+ return {
+ errors: computed(() => errors.value),
+ validFields: computed(() => validFields.value),
+ isAllValid,
+ validateField
+ }
+}
diff --git a/web/src/composables/useLoading.ts b/web/src/composables/useLoading.ts
new file mode 100644
index 0000000..168420a
--- /dev/null
+++ b/web/src/composables/useLoading.ts
@@ -0,0 +1,269 @@
+/**
+ * 加载状态管理组合式函数
+ */
+
+import { ref, computed } from 'vue'
+import { ElLoading } from 'element-plus'
+import type { LoadingInstance } from 'element-plus/es/components/loading/src/loading'
+
+// 全局加载状态
+const globalLoading = ref(false)
+const loadingCount = ref(0)
+
+/**
+ * 使用加载状态
+ */
+export const useLoading = (initialState = false) => {
+ const loading = ref(initialState)
+
+ /**
+ * 设置加载状态
+ */
+ const setLoading = (state: boolean) => {
+ loading.value = state
+ }
+
+ /**
+ * 开始加载
+ */
+ const startLoading = () => {
+ loading.value = true
+ }
+
+ /**
+ * 结束加载
+ */
+ const stopLoading = () => {
+ loading.value = false
+ }
+
+ /**
+ * 异步操作包装器
+ */
+ const withLoading = async (fn: () => Promise): Promise => {
+ try {
+ startLoading()
+ return await fn()
+ } finally {
+ stopLoading()
+ }
+ }
+
+ return {
+ loading: computed(() => loading.value),
+ setLoading,
+ startLoading,
+ stopLoading,
+ withLoading
+ }
+}
+
+/**
+ * 使用全局加载状态
+ */
+export const useGlobalLoading = () => {
+ /**
+ * 增加加载计数
+ */
+ const addLoading = () => {
+ loadingCount.value++
+ globalLoading.value = true
+ }
+
+ /**
+ * 减少加载计数
+ */
+ const removeLoading = () => {
+ loadingCount.value = Math.max(0, loadingCount.value - 1)
+ if (loadingCount.value === 0) {
+ globalLoading.value = false
+ }
+ }
+
+ /**
+ * 重置加载状态
+ */
+ const resetLoading = () => {
+ loadingCount.value = 0
+ globalLoading.value = false
+ }
+
+ /**
+ * 全局异步操作包装器
+ */
+ const withGlobalLoading = async (fn: () => Promise): Promise => {
+ try {
+ addLoading()
+ return await fn()
+ } finally {
+ removeLoading()
+ }
+ }
+
+ return {
+ globalLoading: computed(() => globalLoading.value),
+ loadingCount: computed(() => loadingCount.value),
+ addLoading,
+ removeLoading,
+ resetLoading,
+ withGlobalLoading
+ }
+}
+
+/**
+ * 使用页面加载遮罩
+ */
+export const usePageLoading = () => {
+ let loadingInstance: LoadingInstance | null = null
+
+ /**
+ * 显示页面加载遮罩
+ */
+ const showPageLoading = (options?: {
+ text?: string
+ background?: string
+ target?: string | HTMLElement
+ }) => {
+ const {
+ text = '加载中...',
+ background = 'rgba(0, 0, 0, 0.7)',
+ target = 'body'
+ } = options || {}
+
+ loadingInstance = ElLoading.service({
+ lock: true,
+ text,
+ background,
+ target
+ })
+ }
+
+ /**
+ * 隐藏页面加载遮罩
+ */
+ const hidePageLoading = () => {
+ if (loadingInstance) {
+ loadingInstance.close()
+ loadingInstance = null
+ }
+ }
+
+ /**
+ * 页面异步操作包装器
+ */
+ const withPageLoading = async (
+ fn: () => Promise,
+ options?: {
+ text?: string
+ background?: string
+ target?: string | HTMLElement
+ }
+ ): Promise => {
+ try {
+ showPageLoading(options)
+ return await fn()
+ } finally {
+ hidePageLoading()
+ }
+ }
+
+ return {
+ showPageLoading,
+ hidePageLoading,
+ withPageLoading
+ }
+}
+
+/**
+ * 使用按钮加载状态
+ */
+export const useButtonLoading = () => {
+ const buttonLoadings = ref>({})
+
+ /**
+ * 设置按钮加载状态
+ */
+ const setButtonLoading = (key: string, loading: boolean) => {
+ buttonLoadings.value[key] = loading
+ }
+
+ /**
+ * 获取按钮加载状态
+ */
+ const getButtonLoading = (key: string) => {
+ return computed(() => buttonLoadings.value[key] || false)
+ }
+
+ /**
+ * 按钮异步操作包装器
+ */
+ const withButtonLoading = async