-
-
diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index 6fb94bf..dc80cee 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -10,32 +10,32 @@
--wechat-green-hover: #06ad56;
--wechat-green-light: #e6f7f0;
--wechat-green-dark: #059341;
-
+
/* 主色调 */
--primary-color: #07c160;
--primary-hover: #06ad56;
--secondary-color: #4c9e5f;
-
+
/* 危险色 */
--danger-color: #fa5151;
--danger-hover: #e94848;
-
+
/* 警告色 */
--warning-color: #ffc300;
--warning-hover: #e6ad00;
-
+
/* 背景色 */
--bg-primary: #f7f8fa;
--bg-secondary: #ffffff;
--bg-gray: #ededed;
--bg-dark: #191919;
-
+
/* 文字颜色 */
--text-primary: #191919;
--text-secondary: #576b95;
--text-light: #888888;
--text-white: #ffffff;
-
+
/* 边框颜色 */
--border-color: #e7e7e7;
--border-light: #f4f4f4;
@@ -80,6 +80,56 @@
/* 统一的消息圆角工具类 */
.msg-radius { border-radius: var(--message-radius); }
.msg-bubble { @apply leading-normal break-words text-pretty; border-radius: var(--message-radius); }
+
+ /* 隐私模式（通用）：默认模糊，悬停显示 */
+ .privacy-blur {
+ filter: blur(9px);
+ transition: filter 0.2s ease;
+ }
+
+ .privacy-blur:hover {
+ filter: none;
+ }
+
+ /* Wrapped 隐私模式：仅模糊“用户名文本”，头像不模糊（避免把头像也 blur 掉） */
+ .wrapped-privacy .wrapped-privacy-name {
+ filter: blur(9px);
+ transition: filter 0.2s ease;
+ }
+
+ .wrapped-privacy .wrapped-privacy-name:hover {
+ filter: none;
+ }
+
+ /* Wrapped 隐私模式：模糊“消息内容文本”（仅在被标记为 message 的节点上生效） */
+ .wrapped-privacy .wrapped-privacy-message {
+ filter: blur(9px);
+ transition: filter 0.2s ease;
+ }
+
+ .wrapped-privacy .wrapped-privacy-message:hover {
+ filter: none;
+ }
+
+ /* Wrapped 隐私模式：模糊“词云关键词” */
+ .wrapped-privacy .wrapped-privacy-keyword {
+ filter: blur(9px);
+ transition: filter 0.2s ease;
+ }
+
+ .wrapped-privacy .wrapped-privacy-keyword:hover {
+ filter: none;
+ }
+
+ /* Wrapped 隐私模式：模糊头像（含 fallback 字符） */
+ .wrapped-privacy .wrapped-privacy-avatar {
+ filter: blur(9px);
+ transition: filter 0.2s ease;
+ }
+
+ .wrapped-privacy .wrapped-privacy-avatar:hover {
+ filter: none;
+ }
/* 按钮样式 */
.btn {
@apply px-6 py-3 rounded-full font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 transform active:scale-95;
@@ -110,6 +160,48 @@
@apply hover:transform hover:scale-[1.02] transition-all duration-300;
}
+ /* Wrapped (年度总结) 背景纹理 */
+ .wrapped-noise {
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj4KICA8ZmlsdGVyIGlkPSJuIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjgiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjQ1Ii8+Cjwvc3ZnPg==");
+ background-repeat: repeat;
+ background-size: 320px 320px;
+ mix-blend-mode: multiply;
+ }
+
+ /* Wrapped 增强噪点纹理（动态抖动） */
+ .wrapped-noise-enhanced {
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KICA8ZmlsdGVyIGlkPSJuIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjkiIG51bU9jdGF2ZXM9IjUiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+");
+ background-repeat: repeat;
+ background-size: 200px 200px;
+ mix-blend-mode: multiply;
+ animation: noise-jitter 0.5s steps(3) infinite;
+ }
+
+ /* Wrapped typography */
+ .wrapped-title {
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ }
+
+ .wrapped-title-en {
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ }
+
+ .wrapped-body {
+ line-height: 1.8;
+ }
+
+ .wrapped-label {
+ font-weight: 600;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ }
+
+ .wrapped-number {
+ font-variant-numeric: tabular-nums;
+ }
+
/* 输入框样式 */
.input {
@apply w-full px-4 py-3 bg-[#f7f8fa] border border-transparent rounded-xl focus:outline-none focus:ring-2 focus:ring-[#07c160] focus:bg-white focus:border-[#07c160] transition-all duration-200;
@@ -557,35 +649,39 @@
}
.header-btn {
- @apply flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-white border border-gray-200 text-gray-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+ @apply flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-md bg-white border border-gray-200 text-gray-700 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed shadow-sm;
}
.header-btn:hover:not(:disabled) {
- @apply bg-gray-50 border-gray-300;
+ @apply bg-gray-50 border-gray-300 shadow;
}
.header-btn:active:not(:disabled) {
- @apply bg-gray-100;
+ @apply bg-gray-100 scale-95;
+ }
+
+ .header-btn svg {
+ @apply w-3.5 h-3.5;
}
.header-btn-icon {
- @apply w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-600 transition-all duration-200;
+ @apply w-8 h-8 flex items-center justify-center rounded-lg bg-transparent border border-transparent text-gray-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
}
.header-btn-icon:hover {
- @apply bg-gray-50 border-gray-300 text-gray-800;
+ @apply bg-transparent border-transparent text-gray-800;
}
.header-btn-icon-active {
- @apply bg-[#03C160]/10 border-[#03C160] text-[#03C160];
+ @apply bg-transparent border-transparent text-[#03C160];
}
.header-btn-icon-active:hover {
- @apply bg-[#03C160]/15;
+ @apply bg-transparent;
}
.message-filter-select {
- @apply text-xs px-2 py-1.5 rounded-lg bg-white border border-gray-200 text-gray-700 focus:outline-none focus:ring-2 focus:ring-[#03C160]/20 focus:border-[#03C160] transition-all disabled:opacity-50 disabled:cursor-not-allowed;
+ @apply text-xs px-2 py-1.5 rounded-lg bg-transparent border-0 text-gray-700 focus:outline-none focus:ring-0 transition-all disabled:opacity-50 disabled:cursor-not-allowed;
}
/* 搜索侧边栏样式 */
@@ -609,6 +705,128 @@
@apply px-3 py-3 border-b border-gray-100;
}
+ /* 时间侧边栏（按日期定位） */
+ .time-sidebar {
+ @apply w-[420px] h-full flex flex-col bg-white border-l border-gray-200 flex-shrink-0;
+ }
+
+ .time-sidebar-header {
+ @apply flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50;
+ }
+
+ .time-sidebar-title {
+ @apply flex items-center gap-2 text-sm font-medium text-gray-800;
+ }
+
+ .time-sidebar-close {
+ @apply p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-md transition-colors;
+ }
+
+ .time-sidebar-body {
+ @apply flex-1 overflow-y-auto min-h-0;
+ }
+
+ .time-sidebar-status {
+ @apply px-4 py-2 text-xs text-gray-600 border-b border-gray-100;
+ }
+
+ .time-sidebar-status-error {
+ @apply text-red-600;
+ }
+
+ .calendar-header {
+ @apply flex items-center justify-between px-4 py-3;
+ }
+
+ .calendar-nav-btn {
+ @apply p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .calendar-month-label {
+ @apply text-sm font-medium text-gray-800;
+ }
+
+ .calendar-month-label-selects {
+ @apply flex items-center gap-2;
+ }
+
+ .calendar-ym-select {
+ @apply text-xs px-2 py-1 rounded-md border border-gray-200 bg-white text-gray-800 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#03C160]/20 disabled:opacity-60 disabled:cursor-not-allowed;
+ }
+
+ .calendar-weekdays {
+ @apply grid grid-cols-7 gap-1 px-4 pt-1;
+ }
+
+ .calendar-weekday {
+ @apply text-[11px] text-gray-400 text-center py-1;
+ }
+
+ .calendar-grid {
+ @apply grid grid-cols-7 gap-1 px-4 pb-4;
+ }
+
+ .calendar-day {
+ @apply h-9 rounded-md flex items-center justify-center text-xs font-medium transition-colors border border-gray-200 bg-white disabled:cursor-not-allowed;
+ }
+
+ .calendar-day-outside {
+ @apply bg-transparent border-transparent;
+ }
+
+ .calendar-day-empty {
+ @apply bg-gray-100 text-gray-400 border-gray-100;
+ }
+
+ .calendar-day-selected {
+ /* Keep background as-is (heatmap), but emphasize with a ring/outline. */
+ box-shadow: 0 0 0 2px rgba(3, 193, 96, 0.85);
+ border-color: rgba(3, 193, 96, 0.95) !important;
+ }
+
+ .calendar-day-l1 {
+ background: rgba(3, 193, 96, 0.12);
+ border-color: rgba(3, 193, 96, 0.18);
+ color: #065f46;
+ }
+
+ .calendar-day-l2 {
+ background: rgba(3, 193, 96, 0.24);
+ border-color: rgba(3, 193, 96, 0.28);
+ color: #065f46;
+ }
+
+ .calendar-day-l3 {
+ background: rgba(3, 193, 96, 0.38);
+ border-color: rgba(3, 193, 96, 0.40);
+ color: #064e3b;
+ }
+
+ .calendar-day-l4 {
+ background: rgba(3, 193, 96, 0.55);
+ border-color: rgba(3, 193, 96, 0.55);
+ color: #053d2e;
+ }
+
+ .calendar-day-l1:hover,
+ .calendar-day-l2:hover,
+ .calendar-day-l3:hover,
+ .calendar-day-l4:hover {
+ filter: brightness(0.98);
+ }
+
+ .calendar-day-number {
+ @apply select-none;
+ }
+
+ .time-sidebar-actions {
+ @apply px-4 pb-4;
+ }
+
+ .time-sidebar-action-btn {
+ @apply w-full text-xs px-3 py-2 rounded-md bg-[#03C160] text-white hover:bg-[#02a650] transition-colors disabled:opacity-60 disabled:cursor-not-allowed;
+ }
+
/* 整合搜索框样式 */
.search-input-combined {
@apply flex items-center bg-white border-2 border-gray-200 rounded-lg overflow-hidden transition-all duration-200;
@@ -924,3 +1142,36 @@
opacity: 1;
}
}
+
+/* Wrapped 动画关键帧 */
+
+@keyframes noise-jitter {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 33% {
+ transform: translate(-1px, 1px);
+ }
+ 66% {
+ transform: translate(1px, -1px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
+
+/* Wrapped 入场动画 */
+@keyframes wrapped-fade-in {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.wrapped-animate-in {
+ animation: wrapped-fade-in 0.6s ease-out forwards;
+}
diff --git a/frontend/assets/images/wechat/mini-program.svg b/frontend/assets/images/wechat/mini-program.svg
new file mode 100644
index 0000000..e24435f
--- /dev/null
+++ b/frontend/assets/images/wechat/mini-program.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/assets/images/wechat/wechat-trans-icon2.png b/frontend/assets/images/wechat/wechat-trans-icon2.png
index b9f72da..6d500a2 100644
Binary files a/frontend/assets/images/wechat/wechat-trans-icon2.png and b/frontend/assets/images/wechat/wechat-trans-icon2.png differ
diff --git a/frontend/components/ApiStatus.vue b/frontend/components/ApiStatus.vue
index d866a1e..5b68826 100644
--- a/frontend/components/ApiStatus.vue
+++ b/frontend/components/ApiStatus.vue
@@ -8,7 +8,7 @@
API连接问题
{{ appStore.apiMessage || '无法连接到后端服务' }}
-
请确保后端服务正在运行 (端口: 8000)
+
请确保后端服务正在运行
+ 
- 
+ 
- 
+ 
+