add history

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.17
+    image: tradus-web:1.18
     container_name: tradus-web
     ports:
       - '6000:80'

src/views/AStockAnalysisView.vue

@@ -2,6 +2,11 @@
 import { ref, nextTick } from 'vue'
 import { useUserStore } from '../stores/user'
 
+interface HistoryItem {
+  code: string
+  timestamp: number
+}
+
 const userStore = useUserStore()
 const stockCode = ref('')
 const isAnalyzing = ref(false)
@@ -11,6 +16,10 @@ const currentThought = ref('')
 const showInitialView = ref(true)
 const copySuccess = ref(false)
 
+const HISTORY_KEY = 'astock_search_history'
+const MAX_HISTORY = 5
+const searchHistory = ref<HistoryItem[]>([])
+
 // 根据环境选择API基础URL
 const apiBaseUrl =
   import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'
@@ -22,6 +31,47 @@ const scrollToBottom = async () => {
   }
 }
 
+// 加载搜索历史
+const loadSearchHistory = () => {
+  const history = localStorage.getItem(HISTORY_KEY)
+  if (history) {
+    searchHistory.value = JSON.parse(history)
+  }
+}
+
+// 添加搜索历史
+const addToHistory = (code: string) => {
+  const newItem = {
+    code: code.toUpperCase(),
+    timestamp: Date.now(),
+  }
+  const history = searchHistory.value.filter((item) => item.code !== newItem.code)
+  history.unshift(newItem)
+  searchHistory.value = history.slice(0, MAX_HISTORY)
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value))
+}
+
+// 从历史中选择
+const selectFromHistory = (item: HistoryItem) => {
+  stockCode.value = item.code
+  handleAnalysis()
+}
+
+// 删除历史记录
+const removeFromHistory = (item: HistoryItem) => {
+  searchHistory.value = searchHistory.value.filter((h) => h.code !== item.code)
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value))
+}
+
+// 清空历史记录
+const clearHistory = () => {
+  searchHistory.value = []
+  localStorage.removeItem(HISTORY_KEY)
+}
+
+// 初始化时加载历史记录
+loadSearchHistory()
+
 const handleAnalysis = async () => {
   if (!stockCode.value || isAnalyzing.value) return
 
@@ -32,6 +82,9 @@ const handleAnalysis = async () => {
     return
   }
 
+  // 添加到搜索历史
+  addToHistory(code)
+
   showInitialView.value = false
   isAnalyzing.value = true
   analysisContent.value = ''
@@ -214,6 +267,37 @@ const copyAnalysis = async () => {
             </div>
           </div>
         </div>
+
+        <!-- 搜索历史 -->
+        <div class="search-history-section">
+          <div v-if="searchHistory.length > 0 && !isAnalyzing" class="search-history-container">
+            <div class="history-header">
+              <span class="history-title">搜索历史</span>
+              <button class="clear-history" @click="clearHistory">清空</button>
+            </div>
+            <div class="history-list">
+              <div v-for="item in searchHistory" :key="item.code" class="history-item">
+                <button class="history-code" @click="selectFromHistory(item)">
+                  <span class="code">{{ item.code }}</span>
+                </button>
+                <button class="remove-history" @click.stop="removeFromHistory(item)">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="remove-icon"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- 分析视图 -->
@@ -278,6 +362,7 @@ const copyAnalysis = async () => {
 </template>
 
 <style scoped>
+/* 基础样式 */
 .stock-analysis-view {
   min-height: 100vh;
   height: 100vh;
@@ -327,6 +412,7 @@ const copyAnalysis = async () => {
   transition: all 0.5s ease;
 }
 
+/* 搜索区域样式 */
 .search-section {
   width: 100%;
   max-width: 600px;
@@ -419,263 +505,117 @@ const copyAnalysis = async () => {
   cursor: not-allowed;
 }
 
-.analysis-status {
+/* 搜索历史样式 */
-  display: flex;
+.search-history-section {
-  flex-direction: row;
+  width: 100%;
-  align-items: center;
+  max-width: 600px;
-  justify-content: center;
+  margin: 0 auto;
-  padding: 1rem;
+  padding: 0 1.5rem;
-  text-align: center;
+}
-  gap: 1rem;
+
+.search-history-container {
   margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-bg-secondary);
 }
 
-.progress-dots {
+.history-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
+  margin-bottom: 0.75rem;
-  gap: 6px;
 }
 
-.progress-dots span {
+.history-title {
-  width: 8px;
-  height: 8px;
-  background-color: var(--color-accent);
-  border-radius: 50%;
-  opacity: 0.3;
-  animation: pulse-dot 1s infinite;
-}
-
-.progress-dots span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.progress-dots span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-.status-text {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.status-label {
-  font-weight: 500;
-  color: var(--color-accent);
-  font-size: 0.85rem;
-}
-
-.thought-text {
   font-size: 0.9rem;
   color: var(--color-text-secondary);
 }
 
-.analysis-container {
+.clear-history {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  border-radius: var(--border-radius);
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.analysis-container.fade-in {
-  background-color: var(--color-bg-secondary);
-}
-
-.analysis-content {
-  color: var(--color-text-primary);
-  line-height: 1.6;
-  font-size: 0.95rem;
-  white-space: pre-wrap;
-  padding: 1.5rem 2rem;
-  overflow-y: auto;
-}
-
-.analysis-content::-webkit-scrollbar {
-  display: none;
-}
-
-:deep(.error-message) {
-  margin: 1rem 0;
-  padding: 0.75rem 1rem;
-  background-color: rgba(255, 0, 0, 0.05);
-  border: 1px solid rgba(255, 0, 0, 0.1);
-  border-radius: var(--border-radius);
-  color: #ff4444;
-  font-size: 0.95rem;
-}
-
-@keyframes pulse-dot {
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 0.3;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 1;
-  }
-}
-
-.fade-in {
-  animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (max-width: 768px) {
-  .initial-content {
-    margin-bottom: 12vh;
-    gap: 1.5rem;
-  }
-
-  .title {
-    font-size: 1.75rem;
-  }
-
-  .search-container {
-    padding: 1rem;
-  }
-
-  .search-input {
-    font-size: 0.9rem;
-  }
-
-  .analysis-content {
-    padding: 1.25rem 1.5rem;
-    font-size: 0.9rem;
-  }
-
-  .analysis-view {
-    padding: 0.5rem;
-    margin-top: 4.5rem;
-  }
-
-  .analysis-header {
-    padding: 0.75rem;
-    flex-direction: column;
-    gap: 0.75rem;
-    align-items: flex-start;
-  }
-
-  .action-buttons {
-    width: 100%;
-    flex-direction: row;
-    gap: 0.75rem;
-  }
-
-  .action-button {
-    flex: 1;
-    justify-content: center;
-    padding: 0.6rem;
-    font-size: 0.85rem;
-  }
-
-  .analysis-container {
-    margin-top: 1rem;
-  }
-
-  .analysis-content {
-    padding: 1.25rem 1.5rem;
-    font-size: 0.9rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .initial-content {
-    margin-bottom: 10vh;
-    gap: 1rem;
-  }
-
-  .title {
-    font-size: 1.5rem;
-  }
-
-  .description {
-    font-size: 0.85rem;
-  }
-
-  .search-input {
-    font-size: 0.85rem;
-  }
-
-  .analyze-button {
-    font-size: 0.85rem;
-    padding: 0.6rem;
-  }
-
-  .analysis-content {
-    padding: 1rem;
-    font-size: 0.85rem;
-    line-height: 1.5;
-  }
-
-  .target-info .label {
   font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease;
 }
 
-  .target-info .value {
+.clear-history:hover {
-    font-size: 0.85rem;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-hover);
 }
 
-  .stock-analysis-view {
+.history-list {
-    padding: 0.5rem;
+  display: flex;
-  }
+  flex-wrap: wrap;
-
-  .analysis-view {
-    padding: 0.5rem;
-    height: calc(100% - 1rem);
-  }
-
-  .analysis-header {
-    padding: 0.75rem;
-  }
-
-  .analysis-container {
-    margin-top: 1rem;
-  }
-
-  .analysis-content {
-    padding: 1rem;
-    font-size: 0.85rem;
-    line-height: 1.5;
-  }
-
-  .analysis-status {
-    margin-top: 0.5rem;
-    padding: 0.75rem;
-  }
-
-  .action-buttons {
   gap: 0.5rem;
 }
 
-  .action-button {
+.history-item {
-    padding: 0.5rem;
+  display: flex;
-    font-size: 0.8rem;
+  align-items: center;
-  }
+  gap: 0.25rem;
 }
 
+.history-code {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  background-color: var(--color-bg-hover);
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.history-code:hover {
+  background-color: var(--color-bg-active);
+}
+
+.history-code .code {
+  font-size: 0.9rem;
+  color: var(--color-text-primary);
+}
+
+.remove-history {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.remove-history:hover {
+  background-color: var(--color-bg-active);
+}
+
+.remove-history .remove-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.remove-history:hover .remove-icon {
+  color: var(--color-text-primary);
+}
+
+/* 分析视图样式 */
 .analysis-view {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100vh - 2rem);
   padding: 0.5rem;
   animation: fadeIn 0.3s ease-out;
-  min-height: 0;
 }
 
 .analysis-header {
@@ -685,6 +625,7 @@ const copyAnalysis = async () => {
   padding: 1rem;
   background-color: var(--color-bg-secondary);
   border-radius: var(--border-radius);
+  flex-shrink: 0;
 }
 
 .target-info {
@@ -749,6 +690,249 @@ const copyAnalysis = async () => {
   height: 16px;
 }
 
+/* 分析状态样式 */
+.analysis-status {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  text-align: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.progress-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.progress-dots span {
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-accent);
+  border-radius: 50%;
+  opacity: 0.3;
+  animation: pulse-dot 1s infinite;
+}
+
+.progress-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.progress-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.status-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status-label {
+  font-weight: 500;
+  color: var(--color-accent);
+  font-size: 0.85rem;
+}
+
+/* 分析内容样式 */
+.analysis-container {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  border-radius: var(--border-radius);
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.analysis-container.fade-in {
+  background-color: var(--color-bg-secondary);
+}
+
+.analysis-content {
+  font-size: 1rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--color-text-primary);
+}
+
+:deep(.error-message) {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  background-color: rgba(255, 0, 0, 0.05);
+  border: 1px solid rgba(255, 0, 0, 0.1);
+  border-radius: var(--border-radius);
+  color: #ff4444;
+  font-size: 0.95rem;
+}
+
+/* 动画 */
+@keyframes pulse-dot {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 响应式样式 */
+@media (max-width: 768px) {
+  .initial-content {
+    margin-bottom: 12vh;
+    gap: 1.5rem;
+  }
+
+  .title {
+    font-size: 1.75rem;
+  }
+
+  .search-container {
+    padding: 1rem;
+  }
+
+  .search-input {
+    font-size: 0.9rem;
+  }
+
+  .analysis-content {
+    padding: 1.25rem 1.5rem;
+    font-size: 0.95rem;
+  }
+
+  .analysis-view {
+    padding: 0.5rem;
+    margin-top: 4.5rem;
+  }
+
+  .analysis-header {
+    padding: 0.75rem;
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: flex-start;
+  }
+
+  .action-buttons {
+    width: 100%;
+    flex-direction: row;
+    gap: 0.75rem;
+  }
+
+  .action-button {
+    flex: 1;
+    justify-content: center;
+    padding: 0.6rem;
+    font-size: 0.85rem;
+  }
+
+  .search-history-section {
+    padding: 0 1rem;
+  }
+
+  .search-history-container {
+    padding: 1rem;
+  }
+
+  .history-code {
+    padding: 0.25rem 0.6rem;
+    font-size: 0.85rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .initial-content {
+    margin-bottom: 10vh;
+    gap: 1rem;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .description {
+    font-size: 0.85rem;
+  }
+
+  .search-input {
+    font-size: 0.85rem;
+  }
+
+  .analyze-button {
+    font-size: 0.85rem;
+    padding: 0.6rem;
+  }
+
+  .analysis-content {
+    padding: 1rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+
+  .target-info .label {
+    font-size: 0.8rem;
+  }
+
+  .target-info .value {
+    font-size: 0.85rem;
+  }
+
+  .action-buttons {
+    gap: 0.5rem;
+  }
+
+  .action-button {
+    padding: 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .search-history-section {
+    padding: 0 0.75rem;
+  }
+
+  .history-title {
+    font-size: 0.85rem;
+  }
+
+  .clear-history {
+    font-size: 0.8rem;
+  }
+
+  .history-code {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/* 滚动条样式 */
 :deep(*::-webkit-scrollbar) {
   width: 6px;
   height: 6px;

src/views/CryptoAnalysisView.vue

@@ -7,6 +7,12 @@ interface AnalysisRequest {
   timeframe?: string
 }
 
+interface HistoryItem {
+  code: string
+  timeframe: string
+  timestamp: number
+}
+
 const userStore = useUserStore()
 const cryptoCode = ref('')
 const isAnalyzing = ref(false)
@@ -46,6 +52,9 @@ const handleKeydown = (event: KeyboardEvent) => {
 const handleAnalysis = async () => {
   if (!cryptoCode.value.trim() || isAnalyzing.value) return
 
+  // 添加到搜索历史
+  addToHistory(cryptoCode.value.trim(), selectedTimeframe.value)
+
   showInitialView.value = false
   isAnalyzing.value = true
   analysisContent.value = ''
@@ -176,6 +185,57 @@ const copyAnalysis = async () => {
     console.error('复制失败')
   }
 }
+
+const HISTORY_KEY = 'crypto_search_history'
+const MAX_HISTORY = 5
+const searchHistory = ref<HistoryItem[]>([])
+
+// 加载搜索历史
+const loadSearchHistory = () => {
+  const history = localStorage.getItem(HISTORY_KEY)
+  if (history) {
+    searchHistory.value = JSON.parse(history)
+  }
+}
+
+// 添加搜索历史
+const addToHistory = (code: string, timeframe: string) => {
+  const newItem = {
+    code: code.toUpperCase(),
+    timeframe,
+    timestamp: Date.now(),
+  }
+  const history = searchHistory.value.filter(
+    (item) => !(item.code === newItem.code && item.timeframe === newItem.timeframe),
+  )
+  history.unshift(newItem)
+  searchHistory.value = history.slice(0, MAX_HISTORY)
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value))
+}
+
+// 从历史中选择
+const selectFromHistory = (item: HistoryItem) => {
+  cryptoCode.value = item.code
+  selectedTimeframe.value = item.timeframe
+  handleAnalysis()
+}
+
+// 删除历史记录
+const removeFromHistory = (item: HistoryItem) => {
+  searchHistory.value = searchHistory.value.filter(
+    (h) => !(h.code === item.code && h.timeframe === item.timeframe),
+  )
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value))
+}
+
+// 清空历史记录
+const clearHistory = () => {
+  searchHistory.value = []
+  localStorage.removeItem(HISTORY_KEY)
+}
+
+// 初始化时加载历史记录
+loadSearchHistory()
 </script>
 
 <template>
@@ -243,6 +303,44 @@ const copyAnalysis = async () => {
             </div>
           </div>
         </div>
+
+        <!-- 搜索历史 -->
+        <div class="search-history-section">
+          <div v-if="searchHistory.length > 0 && !isAnalyzing" class="search-history-container">
+            <div class="history-header">
+              <span class="history-title">搜索历史</span>
+              <button class="clear-history" @click="clearHistory">清空</button>
+            </div>
+            <div class="history-list">
+              <div
+                v-for="item in searchHistory"
+                :key="`${item.code}-${item.timeframe}`"
+                class="history-item"
+              >
+                <button class="history-code" @click="selectFromHistory(item)">
+                  <span class="code">{{ item.code }}</span>
+                  <span class="timeframe">{{
+                    timeframes.find((t) => t.value === item.timeframe)?.label
+                  }}</span>
+                </button>
+                <button class="remove-history" @click.stop="removeFromHistory(item)">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="remove-icon"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- 分析视图 -->
@@ -367,6 +465,7 @@ const copyAnalysis = async () => {
   width: 100%;
   max-width: 600px;
   transition: all 0.5s ease;
+  padding: 0 1.5rem;
 }
 
 .main-section {
@@ -660,12 +759,11 @@ const copyAnalysis = async () => {
 }
 
 .analysis-content {
-  color: var(--color-text-primary);
+  font-size: 1rem;
   line-height: 1.6;
-  font-size: 0.9rem;
   white-space: pre-wrap;
-  padding: 1.5rem 2rem;
+  word-break: break-word;
-  overflow-y: auto;
+  color: var(--color-text-primary);
 }
 
 .analysis-content :deep(h1),
@@ -811,7 +909,7 @@ const copyAnalysis = async () => {
 
   .analysis-content {
     padding: 1.25rem 1.5rem;
-    font-size: 0.85rem;
+    font-size: 0.95rem;
   }
 
   .initial-content {
@@ -838,6 +936,32 @@ const copyAnalysis = async () => {
   .analyze-button {
     font-size: 0.85rem;
   }
+
+  .search-container {
+    padding: 1rem;
+  }
+
+  .search-section {
+    padding: 0 1rem;
+  }
+
+  .search-history-container {
+    padding: 1rem;
+  }
+
+  .search-history-section {
+    padding: 0 1rem;
+  }
+
+  .history-code {
+    padding: 0.25rem 0.6rem;
+    font-size: 0.85rem;
+  }
+
+  .history-code .timeframe {
+    font-size: 0.8rem;
+    padding: 0.1rem 0.3rem;
+  }
 }
 
 @media (max-width: 480px) {
@@ -871,7 +995,7 @@ const copyAnalysis = async () => {
 
   .analysis-content {
     padding: 1rem;
-    font-size: 0.8rem;
+    font-size: 0.9rem;
     line-height: 1.5;
   }
 
@@ -910,6 +1034,45 @@ const copyAnalysis = async () => {
     padding: 0.5rem;
     font-size: 0.8rem;
   }
+
+  .search-container {
+    padding: 0.75rem;
+  }
+
+  .search-section {
+    padding: 0 0.75rem;
+  }
+
+  .search-history-container {
+    padding: 1rem;
+  }
+
+  .search-history-section {
+    padding: 0 0.75rem;
+  }
+
+  .history-title {
+    font-size: 0.85rem;
+  }
+
+  .clear-history {
+    font-size: 0.8rem;
+  }
+
+  .history-code {
+    padding: 0.2rem 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .history-code .timeframe {
+    font-size: 0.75rem;
+    padding: 0.1rem 0.25rem;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
 }
 
 .search-container.is-analyzing {
@@ -1290,4 +1453,122 @@ const copyAnalysis = async () => {
 :deep(*::-webkit-scrollbar-thumb:hover) {
   background-color: rgba(125, 125, 125, 0.3);
 }
+
+.search-history-section {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  /* margin-top: 0.5rem; */
+}
+
+.search-history-container {
+  width: 100%;
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.history-title {
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+
+.clear-history {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  transition: all 0.2s ease;
+}
+
+.clear-history:hover {
+  color: var(--color-accent);
+}
+
+.history-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.history-code {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.9rem;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.history-code:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-accent);
+  opacity: 0.9;
+}
+
+.history-code .code {
+  font-weight: 500;
+  color: var(--color-accent);
+}
+
+.history-code .timeframe {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  padding: 0.1rem 0.4rem;
+  background-color: rgba(var(--color-accent-rgb), 0.05);
+  border-radius: var(--border-radius);
+}
+
+.remove-history {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  opacity: 0.6;
+  transition: all 0.2s ease;
+}
+
+.remove-history:hover {
+  opacity: 1;
+  color: var(--color-accent);
+}
+
+.remove-icon {
+  width: 14px;
+  height: 14px;
+}
+
+@media (max-width: 768px) {
+  .search-history-section {
+    padding: 0 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .search-history-section {
+    padding: 0 0.75rem;
+  }
+}
 </style>