diff --git a/widget/looker/.gitignore b/widget/looker/.gitignore
new file mode 100644
index 0000000..129d522
--- /dev/null
+++ b/widget/looker/.gitignore
@@ -0,0 +1,3 @@
+build/bin
+node_modules
+frontend/dist
diff --git a/widget/looker/app.go b/widget/looker/app.go
index 5efbe7e..ba11b44 100644
--- a/widget/looker/app.go
+++ b/widget/looker/app.go
@@ -35,6 +35,14 @@ type BidItem struct {
 	UpdatedAt   string `json:"updatedAt"`
 }
 
+// AiRecommendation AI推荐结构体
+type AiRecommendation struct {
+	ID         string `json:"id"`
+	Title      string `json:"title"`
+	Confidence int    `json:"confidence"`
+	CreatedAt  string `json:"createdAt"`
+}
+
 // App struct
 type App struct {
 	ctx            context.Context
@@ -212,3 +220,59 @@ func (a *App) GetPinnedBidItems() ([]BidItem, error) {
 
 	return items, nil
 }
+
+// GetAiRecommendations 获取 AI 推荐数据
+func (a *App) GetAiRecommendations() ([]AiRecommendation, error) {
+	dsn := a.GetDatabaseDSN()
+	if dsn == "" {
+		return nil, fmt.Errorf("数据库配置未加载")
+	}
+
+	db, err := sql.Open("mysql", dsn)
+	if err != nil {
+		return nil, fmt.Errorf("连接数据库失败: %v", err)
+	}
+	defer db.Close()
+
+	// 测试连接
+	if err := db.Ping(); err != nil {
+		return nil, fmt.Errorf("数据库连接测试失败: %v", err)
+	}
+
+	// 查询 ai_recommendations 表
+	query := `SELECT id, title, confidence, createdAt
+	          FROM ai_recommendations
+	          ORDER BY createdAt DESC`
+
+	rows, err := db.Query(query)
+	if err != nil {
+		return nil, fmt.Errorf("查询失败: %v", err)
+	}
+	defer rows.Close()
+
+	var items []AiRecommendation
+	for rows.Next() {
+		var item AiRecommendation
+		var createdAt time.Time
+
+		err := rows.Scan(
+			&item.ID,
+			&item.Title,
+			&item.Confidence,
+			&createdAt,
+		)
+		if err != nil {
+			return nil, fmt.Errorf("扫描行失败: %v", err)
+		}
+
+		item.CreatedAt = createdAt.Format("2006-01-02 15:04:05")
+
+		items = append(items, item)
+	}
+
+	if err := rows.Err(); err != nil {
+		return nil, fmt.Errorf("遍历行失败: %v", err)
+	}
+
+	return items, nil
+}
diff --git a/widget/looker/frontend/src/App.vue b/widget/looker/frontend/src/App.vue
index 0e82db4..4a9184f 100644
--- a/widget/looker/frontend/src/App.vue
+++ b/widget/looker/frontend/src/App.vue
@@ -1,13 +1,47 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import PinnedBids from './components/PinnedBids.vue'
+import AiRecommendations from './components/AiRecommendations.vue'
 
 const activeTab = ref('pinned')
+const pinnedBidsRef = ref<InstanceType<typeof PinnedBids>>()
+const aiRecommendationsRef = ref<InstanceType<typeof AiRecommendations>>()
+let refreshTimer: number | null = null
 
 const tabs = [
   { id: 'pinned', label: '置顶项目' },
-  { id: 'other', label: '其他' }
+  { id: 'ai', label: 'AI 推荐' }
 ]
+
+const handleRefresh = () => {
+  if (activeTab.value === 'pinned' && pinnedBidsRef.value) {
+    pinnedBidsRef.value.loadPinnedBids()
+  } else if (activeTab.value === 'ai' && aiRecommendationsRef.value) {
+    aiRecommendationsRef.value.loadRecommendations()
+  }
+}
+
+const startAutoRefresh = () => {
+  // 每5分钟（300000毫秒）自动刷新
+  refreshTimer = window.setInterval(() => {
+    handleRefresh()
+  }, 300000)
+}
+
+const stopAutoRefresh = () => {
+  if (refreshTimer !== null) {
+    clearInterval(refreshTimer)
+    refreshTimer = null
+  }
+}
+
+onMounted(() => {
+  startAutoRefresh()
+})
+
+onUnmounted(() => {
+  stopAutoRefresh()
+})
 </script>
 
 <template>
@@ -21,13 +55,14 @@ const tabs = [
       >
         {{ tab.label }}
       </button>
+      <button class="refresh-button" @click="handleRefresh">
+        🔄 刷新
+      </button>
     </div>
 
     <div class="tab-content">
-      <PinnedBids v-if="activeTab === 'pinned'"/>
-      <div v-else class="placeholder">
-        <p>暂无内容</p>
-      </div>
+      <PinnedBids v-if="activeTab === 'pinned'" ref="pinnedBidsRef"/>
+      <AiRecommendations v-else-if="activeTab === 'ai'" ref="aiRecommendationsRef"/>
     </div>
   </div>
 </template>
@@ -82,6 +117,26 @@ body {
   padding: 20px;
 }
 
+.refresh-button {
+  margin-left: auto;
+  padding: 8px 16px;
+  background: #3498db;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.refresh-button:hover {
+  background: #2980b9;
+}
+
+.refresh-button:active {
+  transform: scale(0.98);
+}
+
 .placeholder {
   display: flex;
   align-items: center;
diff --git a/widget/looker/frontend/src/components/AiRecommendations.vue b/widget/looker/frontend/src/components/AiRecommendations.vue
new file mode 100644
index 0000000..4a1176c
--- /dev/null
+++ b/widget/looker/frontend/src/components/AiRecommendations.vue
@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { GetAiRecommendations } from '../../wailsjs/go/main/App'
+
+interface AiRecommendation {
+  id: string
+  title: string
+  confidence: number
+  createdAt: string
+}
+
+const recommendations = ref<AiRecommendation[]>([])
+const loading = ref(true)
+const error = ref('')
+
+const loadRecommendations = async () => {
+  try {
+    loading.value = true
+    error.value = ''
+    const items = await GetAiRecommendations()
+    recommendations.value = items
+  } catch (err) {
+    error.value = `加载失败: ${err}`
+    console.error('加载 AI 推荐失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+const getConfidenceColor = (confidence: number) => {
+  if (confidence >= 80) return '#27ae60'
+  if (confidence >= 60) return '#f39c12'
+  return '#e74c3c'
+}
+
+const getConfidenceLabel = (confidence: number) => {
+  if (confidence >= 80) return '高'
+  if (confidence >= 60) return '中'
+  return '低'
+}
+
+onMounted(() => {
+  loadRecommendations()
+})
+
+defineExpose({
+  loadRecommendations
+})
+</script>
+
+<template>
+  <div class="ai-recommendations-container">
+    <h2 class="title">AI 推荐项目</h2>
+
+    <div v-if="loading" class="loading">
+      加载中...
+    </div>
+
+    <div v-else-if="error" class="error">
+      {{ error }}
+    </div>
+
+    <div v-else-if="recommendations.length === 0" class="empty">
+      暂无推荐项目
+    </div>
+
+    <div v-else class="recommendation-list">
+      <div
+        v-for="item in recommendations"
+        :key="item.id"
+        class="recommendation-item"
+      >
+        <div class="recommendation-header">
+          <span
+            class="confidence-badge"
+            :style="{ backgroundColor: getConfidenceColor(item.confidence) }"
+          >
+            {{ getConfidenceLabel(item.confidence) }} ({{ item.confidence }}%)
+          </span>
+          <span class="date">{{ item.createdAt }}</span>
+        </div>
+        <h3 class="recommendation-title">{{ item.title }}</h3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ai-recommendations-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.loading,
+.error,
+.empty {
+  text-align: center;
+  padding: 40px;
+  color: #666;
+  font-size: 16px;
+}
+
+.error {
+  color: #e74c3c;
+}
+
+.recommendation-list {
+  display: grid;
+  gap: 16px;
+}
+
+.recommendation-item {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s ease;
+}
+
+.recommendation-item:hover {
+  border-color: #3498db;
+  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
+  transform: translateY(-2px);
+}
+
+.recommendation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.confidence-badge {
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.date {
+  font-size: 12px;
+  color: #999;
+}
+
+.recommendation-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin: 0;
+  line-height: 1.5;
+}
+</style>
diff --git a/widget/looker/frontend/src/components/PinnedBids.vue b/widget/looker/frontend/src/components/PinnedBids.vue
index b67c803..5191d0b 100644
--- a/widget/looker/frontend/src/components/PinnedBids.vue
+++ b/widget/looker/frontend/src/components/PinnedBids.vue
@@ -38,6 +38,10 @@ const openUrl = (url: string) => {
 onMounted(() => {
   loadPinnedBids()
 })
+
+defineExpose({
+  loadPinnedBids
+})
 </script>
 
 <template>
diff --git a/widget/looker/frontend/wailsjs/go/main/App.d.ts b/widget/looker/frontend/wailsjs/go/main/App.d.ts
index f4c2710..162cb3d 100644
--- a/widget/looker/frontend/wailsjs/go/main/App.d.ts
+++ b/widget/looker/frontend/wailsjs/go/main/App.d.ts
@@ -2,6 +2,8 @@
 // This file is automatically generated. DO NOT EDIT
 import {main} from '../models';
 
+export function GetAiRecommendations():Promise<Array<main.AiRecommendation>>;
+
 export function GetDatabaseConfig():Promise<main.DatabaseConfig>;
 
 export function GetDatabaseDSN():Promise<string>;
diff --git a/widget/looker/frontend/wailsjs/go/main/App.js b/widget/looker/frontend/wailsjs/go/main/App.js
index 68ecd8f..a027583 100644
--- a/widget/looker/frontend/wailsjs/go/main/App.js
+++ b/widget/looker/frontend/wailsjs/go/main/App.js
@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function GetAiRecommendations() {
+  return window['go']['main']['App']['GetAiRecommendations']();
+}
+
 export function GetDatabaseConfig() {
   return window['go']['main']['App']['GetDatabaseConfig']();
 }
diff --git a/widget/looker/frontend/wailsjs/go/models.ts b/widget/looker/frontend/wailsjs/go/models.ts
index c3bc641..6d86208 100644
--- a/widget/looker/frontend/wailsjs/go/models.ts
+++ b/widget/looker/frontend/wailsjs/go/models.ts
@@ -1,5 +1,23 @@
 export namespace main {
 	
+	export class AiRecommendation {
+	    id: string;
+	    title: string;
+	    confidence: number;
+	    createdAt: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new AiRecommendation(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.id = source["id"];
+	        this.title = source["title"];
+	        this.confidence = source["confidence"];
+	        this.createdAt = source["createdAt"];
+	    }
+	}
 	export class BidItem {
 	    id: string;
 	    title: string;