feat: 促销系统完善、发票页重构、前端中文化、订单表迁移及多项优化

前端： - 发票页完整重构：智能按钮状态、防重复开票、空态引导、订单多选 - 全局中文化：Ant Design Vue locale配置、清除残留英文UI文本 - 新增关于我们、联系我们页面 - 首页活动专区、搜索页、Skill详情等多处优化后端： - 订单模块：新增original_amount/promotion_deduct_amount字段及DB迁移 - 促销系统：完善促销规则、过期任务、批量查询等 - 新增RateLimit注解及拦截器、CORS过滤器、Health检查接口 - Logback日志配置、points枚举修复等
2026-03-23 16:38:13 +08:00
parent 942465b758
commit e7d9f47c61
107 changed files with 2964 additions and 309 deletions
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,2 +1,2 @@
-# 开发环境 API 基础地址
-VITE_API_BASE_URL=http://localhost:8080/api/v1
+# 开发环境 API 基础地址（使用相对路径，由 Vite proxy 转发到后端）
+VITE_API_BASE_URL=/api/v1
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,8 +1,11 @@
 <template>
-  <router-view />
+  <a-config-provider :locale="zhCN">
+    <router-view />
+  </a-config-provider>
 </template>

 <script setup>
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
 </script>

 <style>
--- a/frontend/src/components/SkillCard.vue
+++ b/frontend/src/components/SkillCard.vue
@@ -19,7 +19,7 @@
        <div class="meta-left">
          <span class="rating">
            <StarFilled />
-            {{ skill.rating }}
+            {{ skill.rating ? Number(skill.rating).toFixed(1) : '-' }}
          </span>
          <span class="downloads">{{ formatNumber(skill.downloadCount) }} 次下载</span>
        </div>
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -115,13 +115,13 @@
    <footer class="main-footer">
      <div class="footer-content">
        <a-space :size="[24, 16]" wrap class="footer-links">
-          <a href="javascript:;">关于我们</a>
-          <a href="javascript:;">帮助中心</a>
-          <a href="javascript:;">用户协议</a>
-          <a href="javascript:;">隐私政策</a>
-          <a href="javascript:;">联系我们</a>
+          <router-link to="/about">关于我们</router-link>
+          <router-link to="/help">帮助中心</router-link>
+          <router-link to="/terms">用户协议</router-link>
+          <router-link to="/privacy">隐私政策</router-link>
+          <router-link to="/contact">联系我们</router-link>
        </a-space>
-        <p class="footer-copyright">© 2024 OpenClaw Skills. All rights reserved.</p>
+        <p class="footer-copyright">© 2024 OpenClaw Skills 版权所有</p>
      </div>
    </footer>

--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -78,6 +78,18 @@ const routes = [
        component: () => import('@/views/legal/privacy.vue'),
        meta: { title: '隐私政策' }
      },
+      {
+        path: 'about',
+        name: 'About',
+        component: () => import('@/views/legal/about.vue'),
+        meta: { title: '关于我们' }
+      },
+      {
+        path: 'contact',
+        name: 'Contact',
+        component: () => import('@/views/legal/contact.vue'),
+        meta: { title: '联系我们' }
+      },
      {
        path: 'user',
        name: 'UserCenter',
--- a/frontend/src/service/apiService.js
+++ b/frontend/src/service/apiService.js
@@ -231,6 +231,7 @@ export const adminApi = {
  auditSkill: (skillId, action, rejectReason) => api.post(`/admin/skills/${skillId}/audit`, null, { params: { action, rejectReason } }),
  offlineSkill: (skillId) => api.post(`/admin/skills/${skillId}/offline`),
  createSkill: (data) => api.post('/admin/skills/create', data),
+  updateSkill: (skillId, data) => api.put(`/admin/skills/${skillId}`, data),
  getOrders: (params) => api.get('/admin/orders', { params }),
  getOrderDetail: (orderId) => api.get(`/admin/orders/${orderId}`),
  getRefunds: (params) => api.get('/admin/refunds', { params }),
--- a/frontend/src/stores/admin.js
+++ b/frontend/src/stores/admin.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { adminApi } from '@/service/apiService'
-import { getErrorMessage } from '@/service/dataAdapter'
+import { getErrorMessage, normalizeOrder } from '@/service/dataAdapter'

 const ADMIN_TOKEN_KEY = 'admin_token'
 const ADMIN_USER_KEY = 'admin_user'
@@ -91,8 +91,9 @@ export const useAdminStore = defineStore('admin', {
    async loadOrders(params = {}) {
      try {
        const result = await adminApi.getOrders(params)
-        this.orders = result.data?.records || []
-        return result.data
+        const raw = result.data?.records || []
+        this.orders = raw.map(normalizeOrder)
+        return { ...result.data, records: this.orders }
      } catch {
        this.orders = []
        return { records: [], total: 0 }
@@ -147,6 +148,15 @@ export const useAdminStore = defineStore('admin', {
      }
    },

+    async updateSkill(skillId, data) {
+      try {
+        const result = await adminApi.updateSkill(skillId, data)
+        return { success: true, data: result.data, message: 'Skill更新成功' }
+      } catch (error) {
+        return { success: false, message: getErrorMessage(error, 'Skill更新失败') }
+      }
+    },
+
    async approveSkill(skillId) {
      try {
        await adminApi.auditSkill(skillId, 'approve')
--- a/frontend/src/stores/skill.js
+++ b/frontend/src/stores/skill.js
@@ -151,7 +151,8 @@ export const useSkillStore = defineStore('skill', {
      const query = mapFiltersToQuery(this.filters)
      const result = await skillApi.list(query)
      this.searchResults = normalizePageRecords(result.data, normalizeSkill)
-      return this.searchResults
+      const total = result.data?.total ?? result.data?.totalCount ?? this.searchResults.length
+      return { records: this.searchResults, total }
    },

    setFilters(filters) {
--- a/frontend/src/views/admin/comments.vue
+++ b/frontend/src/views/admin/comments.vue
@@ -55,15 +55,7 @@
          >
            删除
          </a-button>
-          <a-tooltip v-else title="恢复功能暂未开放">
-            <a-button
-              type="link"
-              size="small"
-              disabled
-            >
-              恢复
-            </a-button>
-          </a-tooltip>
+          <span v-else class="text-muted">-</span>
        </template>
      </a-table-column>
    </a-table>
--- a/frontend/src/views/admin/community.vue
+++ b/frontend/src/views/admin/community.vue
@@ -117,7 +117,7 @@ const loadTemplates = async () => {
  templatesLoading.value = true
  try {
    const res = await adminApi.getCouponTemplates({ pageNum: 1, pageSize: 100 })
-    templates.value = (res.data?.records || []).filter(t => t.status === 'active')
+    templates.value = (res.data?.records || []).filter(t => t.status === 'active' || t.status === 'draft')
  } catch { /* ignore */ } finally {
    templatesLoading.value = false
  }
--- a/frontend/src/views/admin/promotions.vue
+++ b/frontend/src/views/admin/promotions.vue
@@ -154,7 +154,7 @@
        <div v-for="(skill, index) in form.skills" :key="index" class="skill-row">
          <a-row :gutter="12" align="middle">
            <a-col :span="6">
-              <a-input-number v-model:value="skill.skillId" placeholder="Skill ID" style="width: 100%" :min="1" />
+              <a-input-number v-model:value="skill.skillId" placeholder="Skill编号" style="width: 100%" :min="1" />
            </a-col>
            <a-col :span="6">
              <a-input-number v-model:value="skill.promotionPrice" placeholder="促销价(元)" style="width: 100%" :min="0" :precision="2" />
--- a/frontend/src/views/admin/skills.vue
+++ b/frontend/src/views/admin/skills.vue
@@ -47,9 +47,10 @@
        </template>
      </a-table-column>
      <a-table-column title="创建时间" data-index="createdAt" :width="180" />
-      <a-table-column title="操作" fixed="right" :width="250">
+      <a-table-column title="操作" fixed="right" :width="280">
        <template #default="{ record }">
          <a-button type="link" size="small" @click="viewSkill(record)">查看</a-button>
+          <a-button type="link" size="small" @click="openEditDialog(record)">编辑</a-button>
          <template v-if="record.status === 'pending'">
            <a-button type="link" size="small" style="color: #52c41a" @click="approveSkill(record)">通过</a-button>
            <a-button type="link" danger size="small" @click="rejectSkill(record)">拒绝</a-button>
@@ -124,6 +125,72 @@
      </template>
    </a-modal>

+    <!-- 编辑Skill对话框 -->
+    <a-modal v-model:open="editDialogVisible" title="编辑Skill" :width="600">
+      <a-form :model="editForm" :rules="createRules" ref="editFormRef" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
+        <a-form-item label="Skill名称" name="name">
+          <a-input v-model:value="editForm.name" placeholder="请输入Skill名称" />
+        </a-form-item>
+        <a-form-item label="描述" name="description">
+          <a-textarea v-model:value="editForm.description" :rows="3" placeholder="请输入描述" />
+        </a-form-item>
+        <a-form-item label="分类" name="categoryId">
+          <a-select v-model:value="editForm.categoryId" placeholder="请选择分类" style="width: 100%">
+            <a-select-option v-for="cat in skillStore.categories" :key="cat.id" :value="cat.id">{{ cat.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="价格" name="price">
+          <a-input-number v-model:value="editForm.price" :min="0" :precision="2" :step="1" />
+          <a-checkbox v-model:checked="editForm.isFree" style="margin-left: 12px">免费</a-checkbox>
+        </a-form-item>
+        <a-form-item label="版本">
+          <a-input v-model:value="editForm.version" placeholder="如 1.0.0" />
+        </a-form-item>
+        <a-form-item label="封面图">
+          <a-upload
+            :before-upload="beforeCoverUpload"
+            :show-upload-list="false"
+            :custom-request="handleEditCoverUpload"
+            accept="image/*"
+          >
+            <div v-if="editForm.coverImageUrl" class="upload-preview">
+              <img :src="editForm.coverImageUrl" class="preview-img" />
+              <div class="preview-mask">点击更换</div>
+            </div>
+            <a-button v-else :loading="editCoverUploading">
+              <upload-outlined /> 上传封面图
+            </a-button>
+          </a-upload>
+          <a-input v-model:value="editForm.coverImageUrl" placeholder="或直接输入图片URL" style="margin-top: 8px" />
+        </a-form-item>
+        <a-form-item label="Skill文件">
+          <a-upload
+            :before-upload="beforeFileUpload"
+            :show-upload-list="false"
+            :custom-request="handleEditFileUpload"
+          >
+            <a-button :loading="editFileUploading">
+              <upload-outlined /> 上传文件
+            </a-button>
+          </a-upload>
+          <div v-if="editForm.fileUrl" style="margin-top: 4px; color: #52c41a; font-size: 12px">✅ 已有文件</div>
+          <a-input v-model:value="editForm.fileUrl" placeholder="或直接输入文件URL" style="margin-top: 8px" />
+        </a-form-item>
+        <a-form-item label="状态">
+          <a-select v-model:value="editForm.status" style="width: 120px">
+            <a-select-option value="approved">已上架</a-select-option>
+            <a-select-option value="pending">待审核</a-select-option>
+            <a-select-option value="offline">已下架</a-select-option>
+            <a-select-option value="rejected">已拒绝</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+      <template #footer>
+        <a-button @click="editDialogVisible = false">取消</a-button>
+        <a-button type="primary" :loading="editLoading" @click="submitEditSkill">保存</a-button>
+      </template>
+    </a-modal>
+
    <a-modal v-model:open="skillDialogVisible" title="Skill详情" :width="600" :footer="null">
      <template v-if="currentSkill">
        <a-descriptions :column="2" bordered>
@@ -262,6 +329,96 @@ const toggleFeatured = async (skill) => {
  }
 }

+// ==================== 编辑Skill ====================
+const editDialogVisible = ref(false)
+const editLoading = ref(false)
+const editFormRef = ref(null)
+const editCoverUploading = ref(false)
+const editFileUploading = ref(false)
+const editingSkillId = ref(null)
+const editForm = ref({
+  name: '',
+  description: '',
+  categoryId: null,
+  price: 0,
+  isFree: false,
+  version: '',
+  coverImageUrl: '',
+  fileUrl: '',
+  status: ''
+})
+
+const openEditDialog = (skill) => {
+  editingSkillId.value = skill.id
+  editForm.value = {
+    name: skill.name || '',
+    description: skill.description || '',
+    categoryId: skill.categoryId || null,
+    price: skill.price || 0,
+    isFree: skill.price === 0,
+    version: skill.version || '',
+    coverImageUrl: skill.coverImageUrl || '',
+    fileUrl: skill.fileUrl || '',
+    status: skill.status || 'pending'
+  }
+  editDialogVisible.value = true
+}
+
+const handleEditCoverUpload = async ({ file }) => {
+  editCoverUploading.value = true
+  try {
+    const res = await uploadApi.uploadFile('skill', file)
+    if (res.data?.url) {
+      editForm.value.coverImageUrl = res.data.url
+      message.success('封面图上传成功')
+    }
+  } catch {
+    message.error('上传失败')
+  } finally {
+    editCoverUploading.value = false
+  }
+}
+
+const handleEditFileUpload = async ({ file }) => {
+  editFileUploading.value = true
+  try {
+    const res = await uploadApi.uploadFile('skill', file)
+    if (res.data?.url) {
+      editForm.value.fileUrl = res.data.url
+      message.success('文件上传成功')
+    }
+  } catch {
+    message.error('上传失败')
+  } finally {
+    editFileUploading.value = false
+  }
+}
+
+const submitEditSkill = async () => {
+  if (!editFormRef.value) return
+  try {
+    await editFormRef.value.validate()
+  } catch {
+    return
+  }
+  editLoading.value = true
+  try {
+    const data = { ...editForm.value }
+    if (data.isFree) data.price = 0
+    delete data.isFree
+    const result = await adminStore.updateSkill(editingSkillId.value, data)
+    if (result.success) {
+      message.success('Skill更新成功')
+      editDialogVisible.value = false
+      await adminStore.loadSkills()
+    } else {
+      message.error(result.message)
+    }
+  } finally {
+    editLoading.value = false
+  }
+}
+
 // ==================== 上传Skill ====================
 const coverUploading = ref(false)
 const fileUploading = ref(false)
--- a/frontend/src/views/customize/index.vue
+++ b/frontend/src/views/customize/index.vue
@@ -191,8 +191,14 @@ const handleSubmit = async () => {

  submitting.value = true
  try {
-    await customizationApi.submitRequest(form)
+    await customizationApi.submitRequest({ ...form })
    message.success('提交成功')
+    form.name = ''
+    form.contact = ''
+    form.company = ''
+    form.industry = undefined
+    form.scenario = ''
+    form.budget = '待定'
    successDialogVisible.value = true
  } catch (error) {
    console.error('提交失败:', error)
--- a/frontend/src/views/help/article.vue
+++ b/frontend/src/views/help/article.vue
@@ -51,9 +51,18 @@ const article = ref(null)
 const loading = ref(false)
 const helpful = ref(false)

+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 const renderedContent = computed(() => {
  if (!article.value?.content) return ''
-  return article.value.content
+  return escapeHtml(article.value.content)
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -13,7 +13,7 @@
                <div class="banner-info">
                  <div class="hero-badge">
                    <span class="badge-dot"></span>
-                    <span>AI SKILL MARKETPLACE</span>
+                    <span>AI 数字员工市场</span>
                  </div>
                  <h1 class="banner-title">发现优质<span class="highlight">数字员工</span></h1>
                  <p class="banner-desc">{{ banner.title }}</p>
@@ -27,7 +27,7 @@
            <div class="banner-info">
              <div class="hero-badge">
                <span class="badge-dot"></span>
-                <span>AI SKILL MARKETPLACE</span>
+                <span>AI 数字员工市场</span>
              </div>
              <h1 class="banner-title">发现优质<span class="highlight">数字员工</span></h1>
              <p class="banner-desc">探索数千款 AI 技能工具，提升工作效率，释放创造力</p>
@@ -238,6 +238,24 @@
      </a-row>
    </section>

+    <section class="community-section page-container">
+      <div class="community-card">
+        <div class="community-card-bg"></div>
+        <div class="community-card-content">
+          <div class="community-icon-wrap">
+            <TeamOutlined :style="{ fontSize: '36px' }" />
+          </div>
+          <div class="community-text">
+            <h3>加入技术交流社群</h3>
+            <p>与同行交流经验、获取最新动态，审核通过后还可领取专属优惠券</p>
+          </div>
+          <a-button type="primary" size="large" class="neon-btn-primary community-btn" :disabled="joinStatus === 'pending'" @click="handleJoinGroup">
+            {{ joinStatus === 'pending' ? '审核中' : joinStatus === 'approved' ? '已通过' : '立即加入' }}
+          </a-button>
+        </div>
+      </div>
+    </section>
+
    <section v-if="!userStore.isLoggedIn" class="cta-section page-container">
      <div class="cta-card">
        <div class="cta-bg-effect"></div>
@@ -259,7 +277,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useSkillStore, useUserStore } from '@/stores'
-import { contentApi } from '@/service/apiService'
+import { contentApi, communityApi } from '@/service/apiService'
+import { message, Modal } from 'ant-design-vue'
 import SkillCard from '@/components/SkillCard.vue'
 import {
  SafetyCertificateOutlined,
@@ -269,6 +288,7 @@ import {
  TrophyOutlined,
  RightOutlined,
  NotificationOutlined,
+  TeamOutlined,
  LaptopOutlined,
  BarChartOutlined,
  EditOutlined,
@@ -281,6 +301,7 @@ const router = useRouter()
 const skillStore = useSkillStore()
 const userStore = useUserStore()

+const joinStatus = ref('none')
 const banners = ref([])
 const announcements = ref([])
 const activities = ref([])
@@ -369,8 +390,48 @@ onMounted(async () => {
    const actRes = await contentApi.getActiveActivities()
    activities.value = actRes.data || []
  } catch { /* ignore */ }
+  if (userStore.isLoggedIn) {
+    try {
+      const statusData = await userStore.getCommunityJoinStatus()
+      joinStatus.value = statusData.status || 'none'
+    } catch { /* ignore */ }
+  }
 })

+const handleJoinGroup = () => {
+  if (!userStore.isLoggedIn) {
+    message.warning('请先登录')
+    router.push('/login')
+    return
+  }
+  if (joinStatus.value === 'pending') {
+    message.info('您的申请正在审核中，请耐心等待')
+    return
+  }
+  if (joinStatus.value === 'approved') {
+    message.info('您已通过审核')
+    return
+  }
+  if (joinStatus.value === 'rejected') {
+    joinStatus.value = 'none'
+  }
+  Modal.confirm({
+    title: '加入社群',
+    content: '申请加入技术交流社群，管理员审核通过后将为您下发专属优惠券',
+    okText: '提交申请',
+    cancelText: '取消',
+    async onOk() {
+      try {
+        await communityApi.applyJoin()
+        message.success('申请已提交，请等待管理员审核')
+        joinStatus.value = 'pending'
+      } catch (error) {
+        message.error(error.response?.data?.message || '提交申请失败')
+      }
+    }
+  })
+}
+
 const getCategoryIcon = (iconName) => {
  const iconMap = {
    Document: FileTextOutlined,
@@ -992,6 +1053,70 @@ const goToCategory = (categoryId) => {
  }
 }

+.community-section {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.community-card {
+  border-radius: 24px;
+  border: 1px solid rgba(99, 102, 241, 0.15);
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
+  backdrop-filter: blur(8px);
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: rgba(99, 102, 241, 0.25);
+    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
+  }
+
+  .community-card-content {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 24px 32px;
+  }
+
+  .community-icon-wrap {
+    width: 64px;
+    height: 64px;
+    border-radius: 18px;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent-blue);
+    flex-shrink: 0;
+  }
+
+  .community-text {
+    flex: 1;
+
+    h3 {
+      font-family: var(--font-heading);
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 4px;
+    }
+
+    p {
+      color: var(--text-secondary);
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+
+  .community-btn {
+    flex-shrink: 0;
+  }
+}
+
 .ranking-entry-section {
  padding-top: 16px;
  padding-bottom: 16px;
--- a/frontend/src/views/join-us/index.vue
+++ b/frontend/src/views/join-us/index.vue
@@ -204,12 +204,34 @@
            <div class="form-tip">支持 MP4/MOV/AVI/WEBM 格式，最大 100MB；也可粘贴网盘链接</div>
            <a-progress v-if="videoUploading" :percent="videoProgress" size="small" style="margin-top: 4px" />
          </a-form-item>
-          <a-form-item label="作品链接" name="portfolioUrl">
-            <a-input v-model:value="form.portfolioUrl" placeholder="请输入个人作品集或GitHub链接（选填）">
-              <template #prefix>
-                <desktop-outlined />
-              </template>
-            </a-input>
+          <a-form-item label="作品集" name="portfolioUrl">
+            <div class="upload-area">
+              <a-upload
+                :file-list="portfolioFileList"
+                :before-upload="beforePortfolioUpload"
+                :custom-request="handlePortfolioUpload"
+                :max-count="5"
+                multiple
+                accept=".zip,.rar,.7z,.tar.gz,.pdf,.doc,.docx,.ppt,.pptx,.png,.jpg,.jpeg,.gif"
+                @remove="handlePortfolioRemove"
+              >
+                <a-button :loading="portfolioUploading">
+                  <template #icon><upload-outlined /></template>
+                  {{ portfolioUploading ? '上传中...' : '选择作品文件' }}
+                </a-button>
+              </a-upload>
+              <div class="upload-or">或</div>
+              <a-input
+                v-model:value="form.portfolioUrl"
+                placeholder="粘贴作品集链接（GitHub、网盘等）"
+                :disabled="!!portfolioFileList.length"
+                style="flex: 1"
+              >
+                <template #prefix><link-outlined /></template>
+              </a-input>
+            </div>
+            <div class="form-tip">支持 ZIP/RAR/PDF/图片等格式，单文件最大 50MB，最多 5 个；也可粘贴链接</div>
+            <a-progress v-if="portfolioUploading" :percent="portfolioProgress" size="small" style="margin-top: 4px" />
          </a-form-item>

          <a-form-item label="期望收益" name="expectedIncome">
@@ -325,12 +347,17 @@ import {
  ProjectOutlined,
  DollarCircleOutlined,
  CheckCircleFilled,
+  CheckCircleOutlined,
  TrophyOutlined,
  StarOutlined,
  UploadOutlined,
  VideoCameraOutlined,
  LinkOutlined,
-  DesktopOutlined
+  DesktopOutlined,
+  WalletOutlined,
+  RiseOutlined,
+  TeamOutlined,
+  RightOutlined
 } from '@ant-design/icons-vue'

 const formRef = ref(null)
@@ -347,6 +374,11 @@ const videoFileList = ref([])
 const videoUploading = ref(false)
 const videoProgress = ref(0)

+// 作品集上传状态
+const portfolioFileList = ref([])
+const portfolioUploading = ref(false)
+const portfolioProgress = ref(0)
+
 const form = reactive({
  realName: '',
  phone: '',
@@ -488,6 +520,50 @@ const handleVideoRemove = () => {
  videoProgress.value = 0
 }

+// 作品集上传前校验
+const beforePortfolioUpload = (file) => {
+  if (file.size > 50 * 1024 * 1024) {
+    message.error('单个文件大小不能超过 50MB')
+    return false
+  }
+  return true
+}
+
+// 作品集上传处理
+const handlePortfolioUpload = async ({ file, onSuccess, onError }) => {
+  portfolioUploading.value = true
+  portfolioProgress.value = 0
+  const progressTimer = setInterval(() => {
+    if (portfolioProgress.value < 90) portfolioProgress.value += 10
+  }, 200)
+  try {
+    const res = await uploadApi.uploadFile('portfolio', file)
+    clearInterval(progressTimer)
+    portfolioProgress.value = 100
+    const url = res.data?.url || res.data?.fileUrl
+    portfolioFileList.value = [...portfolioFileList.value, { uid: file.uid, name: file.name, status: 'done', url }]
+    // 将所有已上传文件URL用逗号拼接存入portfolioUrl
+    form.portfolioUrl = portfolioFileList.value.map(f => f.url).join(',')
+    onSuccess(res, file)
+    message.success('文件上传成功')
+  } catch (err) {
+    clearInterval(progressTimer)
+    onError(err)
+    message.error('文件上传失败：' + (err.response?.data?.message || err.message))
+  } finally {
+    portfolioUploading.value = false
+    portfolioProgress.value = 0
+  }
+}
+
+// 作品集文件删除
+const handlePortfolioRemove = (file) => {
+  portfolioFileList.value = portfolioFileList.value.filter(f => f.uid !== file.uid)
+  form.portfolioUrl = portfolioFileList.value.length
+    ? portfolioFileList.value.map(f => f.url).join(',')
+    : ''
+}
+
 const rules = {
  realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
  phone: [
@@ -544,6 +620,8 @@ const resetForm = () => {
  resumeProgress.value = 0
  videoFileList.value = []
  videoProgress.value = 0
+  portfolioFileList.value = []
+  portfolioProgress.value = 0
 }
 </script>

--- a/frontend/src/views/legal/about.vue
+++ b/frontend/src/views/legal/about.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="legal-page">
+    <div class="legal-container">
+      <a-card :bordered="false" class="legal-card">
+        <h1>关于我们</h1>
+        <p class="update-date">OpenClaw Skills · 数字员工交易平台</p>
+
+        <div class="about-hero">
+          <div class="hero-icon">
+            <rocket-outlined :style="{ fontSize: '48px', color: '#667eea' }" />
+          </div>
+          <p class="hero-text">让每个人都能拥有自己的数字员工</p>
+        </div>
+
+        <h2>平台简介</h2>
+        <p>OpenClaw Skills 是一个专注于数字员工（Skill）交易的创新平台。我们致力于连接优秀的 Skill 开发者与有需求的用户，打造一个高效、可信赖的数字技能交易生态。</p>
+        <p>在这里，开发者可以将自己的技术能力转化为可复用的 Skill 产品，获得持续收益；用户可以快速找到并获取满足需求的数字员工，提升工作效率。</p>
+
+        <h2>我们的愿景</h2>
+        <p>构建全球领先的数字员工交易平台，让技术创造更大的价值，让每个人都能享受数字化带来的便利。</p>
+
+        <h2>我们的使命</h2>
+        <div class="mission-grid">
+          <div class="mission-item">
+            <bulb-outlined :style="{ fontSize: '28px', color: '#e6a23c' }" />
+            <h4>技术创新</h4>
+            <p>持续推动数字员工技术的发展与应用</p>
+          </div>
+          <div class="mission-item">
+            <safety-outlined :style="{ fontSize: '28px', color: '#67c23a' }" />
+            <h4>品质保障</h4>
+            <p>严格审核每一个上架的 Skill 产品</p>
+          </div>
+          <div class="mission-item">
+            <team-outlined :style="{ fontSize: '28px', color: '#409eff' }" />
+            <h4>开发者赋能</h4>
+            <p>为开发者提供完善的工具与收益保障</p>
+          </div>
+          <div class="mission-item">
+            <heart-outlined :style="{ fontSize: '28px', color: '#f56c6c' }" />
+            <h4>用户至上</h4>
+            <p>以用户需求为核心驱动产品迭代</p>
+          </div>
+        </div>
+
+        <h2>核心优势</h2>
+        <p>1. <strong>丰富的 Skill 市场</strong>：涵盖办公自动化、数据处理、AI 应用等多个领域。</p>
+        <p>2. <strong>严格的品质审核</strong>：每个 Skill 上架前均经过技术审核与安全检测。</p>
+        <p>3. <strong>灵活的支付方式</strong>：支持积分兑换与微信支付，满足不同需求。</p>
+        <p>4. <strong>完善的开发者体系</strong>：提供开发者认证、收益分成、社区支持。</p>
+        <p>5. <strong>专业的客户服务</strong>：7×12 小时在线客服，及时解决用户问题。</p>
+
+        <h2>发展历程</h2>
+        <div class="timeline">
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <h4>2024 年 Q1</h4>
+              <p>平台立项，核心团队组建</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <h4>2024 年 Q3</h4>
+              <p>平台 MVP 版本上线，首批开发者入驻</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot"></div>
+            <div class="timeline-content">
+              <h4>2025 年 Q1</h4>
+              <p>平台正式版发布，Skill 数量突破 500+</p>
+            </div>
+          </div>
+          <div class="timeline-item">
+            <div class="timeline-dot active"></div>
+            <div class="timeline-content">
+              <h4>2026 年</h4>
+              <p>全面升级，引入社区、会员、优惠券等功能体系</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="back-link">
+          <a-button type="link" @click="$router.back()">返回上一页</a-button>
+        </div>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  RocketOutlined,
+  BulbOutlined,
+  SafetyOutlined,
+  TeamOutlined,
+  HeartOutlined
+} from '@ant-design/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.legal-page {
+  min-height: calc(100vh - 64px);
+  padding: 40px 20px;
+  background: #f5f7fa;
+}
+.legal-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+.legal-card {
+  border-radius: 16px;
+  :deep(.ant-card-body) { padding: 40px; }
+  h1 { font-size: 24px; margin-bottom: 8px; }
+  h2 { font-size: 18px; margin-top: 32px; margin-bottom: 12px; color: #303133; }
+  p { color: #606266; line-height: 1.8; margin-bottom: 8px; }
+  .update-date { color: #909399; font-size: 13px; margin-bottom: 24px; }
+  .back-link { text-align: center; margin-top: 32px; }
+}
+
+.about-hero {
+  text-align: center;
+  padding: 32px 0 16px;
+
+  .hero-icon {
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, #667eea20, #764ba220);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 16px;
+  }
+
+  .hero-text {
+    font-size: 18px;
+    color: #303133;
+    font-weight: 500;
+  }
+}
+
+.mission-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin: 16px 0;
+
+  .mission-item {
+    background: #f5f7fa;
+    border-radius: 12px;
+    padding: 20px;
+    text-align: center;
+
+    h4 {
+      font-size: 15px;
+      color: #303133;
+      margin: 10px 0 6px;
+    }
+
+    p {
+      font-size: 13px;
+      color: #909399;
+      margin: 0;
+    }
+  }
+}
+
+.timeline {
+  position: relative;
+  padding-left: 24px;
+  margin: 16px 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 7px;
+    top: 8px;
+    bottom: 8px;
+    width: 2px;
+    background: #e4e7ed;
+  }
+
+  .timeline-item {
+    position: relative;
+    padding-bottom: 20px;
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+
+    &:last-child { padding-bottom: 0; }
+
+    .timeline-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: #c0c4cc;
+      border: 2px solid #fff;
+      box-shadow: 0 0 0 2px #e4e7ed;
+      margin-left: -22px;
+      margin-top: 4px;
+      flex-shrink: 0;
+
+      &.active {
+        background: #667eea;
+        box-shadow: 0 0 0 2px #667eea40;
+      }
+    }
+
+    .timeline-content {
+      h4 {
+        font-size: 14px;
+        color: #303133;
+        margin-bottom: 4px;
+      }
+      p {
+        font-size: 13px;
+        color: #909399;
+        margin: 0;
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .mission-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/frontend/src/views/legal/contact.vue
+++ b/frontend/src/views/legal/contact.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="legal-page">
+    <div class="legal-container">
+      <a-card :bordered="false" class="legal-card">
+        <h1>联系我们</h1>
+        <p class="update-date">我们期待您的反馈与建议</p>
+
+        <div class="contact-hero">
+          <customer-service-outlined :style="{ fontSize: '48px', color: '#667eea' }" />
+        </div>
+
+        <div class="contact-grid">
+          <div class="contact-item">
+            <div class="contact-icon">
+              <mail-outlined :style="{ fontSize: '24px', color: '#409eff' }" />
+            </div>
+            <h3>商务合作</h3>
+            <p>business@openclaw.com</p>
+            <span>合作洽谈、品牌推广</span>
+          </div>
+
+          <div class="contact-item">
+            <div class="contact-icon">
+              <mail-outlined :style="{ fontSize: '24px', color: '#67c23a' }" />
+            </div>
+            <h3>技术支持</h3>
+            <p>support@openclaw.com</p>
+            <span>产品问题、技术咨询</span>
+          </div>
+
+          <div class="contact-item">
+            <div class="contact-icon">
+              <mail-outlined :style="{ fontSize: '24px', color: '#e6a23c' }" />
+            </div>
+            <h3>开发者入驻</h3>
+            <p>developer@openclaw.com</p>
+            <span>开发者申请、合作咨询</span>
+          </div>
+
+          <div class="contact-item">
+            <div class="contact-icon">
+              <mail-outlined :style="{ fontSize: '24px', color: '#f56c6c' }" />
+            </div>
+            <h3>投诉建议</h3>
+            <p>feedback@openclaw.com</p>
+            <span>意见反馈、投诉举报</span>
+          </div>
+        </div>
+
+        <h2>其他联系方式</h2>
+        <div class="info-list">
+          <div class="info-row">
+            <phone-outlined :style="{ fontSize: '16px', color: '#409eff' }" />
+            <span>客服电话：400-888-0000（工作日 9:00-21:00）</span>
+          </div>
+          <div class="info-row">
+            <wechat-outlined :style="{ fontSize: '16px', color: '#67c23a' }" />
+            <span>官方微信：OpenClawSkills</span>
+          </div>
+          <div class="info-row">
+            <environment-outlined :style="{ fontSize: '16px', color: '#e6a23c' }" />
+            <span>公司地址：杭州市余杭区文一西路</span>
+          </div>
+          <div class="info-row">
+            <clock-circle-outlined :style="{ fontSize: '16px', color: '#909399' }" />
+            <span>工作时间：周一至周五 9:00 - 18:00</span>
+          </div>
+        </div>
+
+        <h2>在线反馈</h2>
+        <p>您也可以通过平台内的 <router-link to="/user/feedback">意见反馈</router-link> 功能直接提交问题（需登录），我们将在 1-3 个工作日内回复。</p>
+
+        <div class="back-link">
+          <a-button type="link" @click="$router.back()">返回上一页</a-button>
+        </div>
+      </a-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  CustomerServiceOutlined,
+  MailOutlined,
+  PhoneOutlined,
+  WechatOutlined,
+  EnvironmentOutlined,
+  ClockCircleOutlined
+} from '@ant-design/icons-vue'
+</script>
+
+<style lang="scss" scoped>
+.legal-page {
+  min-height: calc(100vh - 64px);
+  padding: 40px 20px;
+  background: #f5f7fa;
+}
+.legal-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+.legal-card {
+  border-radius: 16px;
+  :deep(.ant-card-body) { padding: 40px; }
+  h1 { font-size: 24px; margin-bottom: 8px; }
+  h2 { font-size: 18px; margin-top: 32px; margin-bottom: 12px; color: #303133; }
+  p { color: #606266; line-height: 1.8; margin-bottom: 8px; }
+  .update-date { color: #909399; font-size: 13px; margin-bottom: 24px; }
+  .back-link { text-align: center; margin-top: 32px; }
+}
+
+.contact-hero {
+  text-align: center;
+  padding: 16px 0 24px;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin: 16px 0;
+
+  .contact-item {
+    background: #f5f7fa;
+    border-radius: 12px;
+    padding: 24px;
+    text-align: center;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .contact-icon {
+      width: 48px;
+      height: 48px;
+      background: #fff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 12px;
+    }
+
+    h3 {
+      font-size: 16px;
+      color: #303133;
+      margin-bottom: 8px;
+    }
+
+    p {
+      font-size: 14px;
+      color: #409eff;
+      margin-bottom: 4px;
+    }
+
+    span {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
+
+.info-list {
+  margin: 16px 0;
+
+  .info-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    &:last-child { border-bottom: none; }
+
+    span {
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/frontend/src/views/order/detail.vue
+++ b/frontend/src/views/order/detail.vue
@@ -13,7 +13,7 @@
          <div class="order-info">
            <div class="info-row">
              <span class="label">订单号</span>
-              <span class="value">{{ order.id }}</span>
+              <span class="value">{{ order.orderNo || order.id }}</span>
            </div>
            <div class="info-row">
              <span class="label">创建时间</span>
@@ -68,7 +68,7 @@
              <a-button type="primary" @click="goPay">去支付</a-button>
              <a-button @click="cancelOrder">取消订单</a-button>
            </template>
-            <template v-else-if="order.status === 'paid' || order.status === 'completed'">
+            <template v-else-if="(order.status === 'paid' || order.status === 'completed') && Number(order.totalAmount) > 0">
              <a-button danger :loading="refundSubmitting" :disabled="refundSubmitting" @click="openRefundModal">申请退款</a-button>
            </template>
            <a-button @click="$router.push('/user/orders')">返回订单列表</a-button>
@@ -110,8 +110,10 @@ const refundSubmitting = ref(false)
 const refundReason = ref('')

 onMounted(async () => {
+  loading.value = true
  const orderId = route.params.id
  order.value = await orderStore.getOrderById(orderId)
+  loading.value = false
 })

 const getStatusColor = (status) => {
--- a/frontend/src/views/skill/detail.vue
+++ b/frontend/src/views/skill/detail.vue
@@ -295,7 +295,7 @@
 </template>

 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useSkillStore, useUserStore, useOrderStore } from '@/stores'
 import { favoriteApi, couponApi } from '@/service/apiService'
@@ -358,6 +358,14 @@ onMounted(() => {
  loadSkill()
 })

+watch(() => route.params.id, (newId, oldId) => {
+  if (newId && newId !== oldId) {
+    activeTab.value = 'intro'
+    window.scrollTo(0, 0)
+    loadSkill()
+  }
+})
+
 const loadSkill = async () => {
  loading.value = true
  const skillId = parseInt(route.params.id)
@@ -530,6 +538,10 @@ const handleFavorite = async () => {
 }

 const submitComment = async () => {
+  if (!hasPurchased.value) {
+    message.warning('您尚未获取此Skill，无法评价')
+    return
+  }
  if (!commentForm.value.content.trim()) {
    message.warning('请输入评价内容')
    return
--- a/frontend/src/views/skill/list.vue
+++ b/frontend/src/views/skill/list.vue
@@ -150,6 +150,7 @@ onMounted(() => {

 watch(() => route.query, () => {
  initFromRoute()
+  fetchSkills()
 })

 watch([currentPage, pageSize], () => {
--- a/frontend/src/views/skill/search.vue
+++ b/frontend/src/views/skill/search.vue
@@ -24,7 +24,7 @@
          class="filter-select"
          placeholder="分类"
          :options="categoryOptions"
-          @change="doSearch"
+          @change="onFilterChange"
        />
        <a-select
          v-model:value="filters.priceType"
@@ -32,14 +32,14 @@
          class="filter-select"
          placeholder="价格"
          :options="priceOptions"
-          @change="doSearch"
+          @change="onFilterChange"
        />
        <a-select
          v-model:value="filters.sortBy"
          class="filter-select"
          placeholder="排序"
          :options="sortOptions"
-          @change="doSearch"
+          @change="onFilterChange"
        />
      </div>

@@ -53,7 +53,7 @@
            />
          </div>
        </template>
-        <template v-else>
+        <template v-else-if="!loading">
          <div class="empty-state">
            <a-empty description="没有找到相关Skill">
              <template #extra>
@@ -62,6 +62,14 @@
            </a-empty>
          </div>
        </template>
+        <div class="pagination-wrap" v-if="total > pageSize">
+          <a-pagination
+            v-model:current="pageNum"
+            :total="total"
+            :page-size="pageSize"
+            @change="onPageChange"
+          />
+        </div>
      </div>
    </div>
  </div>
@@ -81,6 +89,9 @@ const loading = ref(false)
 const keyword = ref('')
 const searchKeyword = ref('')
 const results = ref([])
+const pageNum = ref(1)
+const pageSize = ref(12)
+const total = ref(0)

 const filters = ref({
  categoryId: null,
@@ -134,13 +145,36 @@ const handleSearch = () => {

 const doSearch = async () => {
  loading.value = true
-  results.value = await skillStore.searchSkills(searchKeyword.value, filters.value).catch(() => [])
+  try {
+    const res = await skillStore.searchSkills(searchKeyword.value, {
+      ...filters.value,
+      pageNum: pageNum.value,
+      pageSize: pageSize.value
+    })
+    results.value = res.records || []
+    total.value = res.total || 0
+  } catch {
+    results.value = []
+    total.value = 0
+  }
  loading.value = false
 }

+const onFilterChange = () => {
+  pageNum.value = 1
+  doSearch()
+}
+
+const onPageChange = (page) => {
+  pageNum.value = page
+  doSearch()
+}
+
 const clearSearch = () => {
  searchKeyword.value = ''
  keyword.value = ''
+  pageNum.value = 1
+  total.value = 0
  filters.value = {
    categoryId: null,
    priceType: undefined,
@@ -196,6 +230,11 @@ const clearSearch = () => {
  .empty-state {
    padding: 60px 0;
  }
+
+  .pagination-wrap {
+    margin-top: 24px;
+    text-align: center;
+  }
 }

@media (max-width: 1200px) {
--- a/frontend/src/views/user/favorites.vue
+++ b/frontend/src/views/user/favorites.vue
@@ -76,18 +76,12 @@ const loadFavorites = async () => {
      favoriteSkills.value = []
      return
    }
-    const skills = []
-    for (const id of skillIds) {
-      try {
-        const detail = await skillApi.getDetail(id)
-        if (detail.data) {
-          skills.push(detail.data)
-        }
-      } catch {
-        /* skip deleted/offline skills */
-      }
-    }
-    favoriteSkills.value = skills
+    const results = await Promise.allSettled(
+      skillIds.map(id => skillApi.getDetail(id))
+    )
+    favoriteSkills.value = results
+      .filter(r => r.status === 'fulfilled' && r.value?.data)
+      .map(r => r.value.data)
  } catch {
    favoriteSkills.value = []
  } finally {
--- a/frontend/src/views/user/forgot-password.vue
+++ b/frontend/src/views/user/forgot-password.vue
@@ -103,6 +103,7 @@ const currentStep = ref(0)
 const loading = ref(false)
 const smsSending = ref(false)
 const smsCountdown = ref(0)
+const smsSent = ref(false)
 let smsTimer = null

 const form = reactive({
@@ -171,6 +172,7 @@ const handleSendSmsCode = async () => {

  if (result.success) {
    message.success(result.message || '验证码已发送')
+    smsSent.value = true
    startSmsCountdown()
  } else {
    message.error(result.message)
@@ -181,6 +183,14 @@ const verifyPhone = async () => {
  try {
    await step1Ref.value?.validate()
  } catch { return }
+  if (!smsSent.value) {
+    message.warning('请先发送验证码')
+    return
+  }
+  if (!form.smsCode || form.smsCode.length < 4) {
+    message.warning('请输入完整的验证码')
+    return
+  }
  currentStep.value = 1
 }

--- a/frontend/src/views/user/invite.vue
+++ b/frontend/src/views/user/invite.vue
@@ -132,14 +132,22 @@ onMounted(async () => {
  }
 })

-const copyInviteCode = () => {
-  navigator.clipboard.writeText(myInviteCode.value)
-  message.success('邀请码已复制')
+const copyInviteCode = async () => {
+  try {
+    await navigator.clipboard.writeText(myInviteCode.value)
+    message.success('邀请码已复制')
+  } catch {
+    message.warning('复制失败，请手动复制')
+  }
 }

-const copyInviteLink = () => {
-  navigator.clipboard.writeText(inviteLink.value)
-  message.success('邀请链接已复制')
+const copyInviteLink = async () => {
+  try {
+    await navigator.clipboard.writeText(inviteLink.value)
+    message.success('邀请链接已复制')
+  } catch {
+    message.warning('复制失败，请手动复制')
+  }
 }
 </script>

--- a/frontend/src/views/user/invoices.vue
+++ b/frontend/src/views/user/invoices.vue
@@ -2,10 +2,21 @@
  <div class="invoices-page">
    <div class="page-header">
      <h2 class="page-title">我的发票</h2>
-      <a-button type="primary" @click="showApplyModal = true">
-        <template #icon><plus-outlined /></template>
-        申请发票
-      </a-button>
+      <div class="header-actions">
+        <span v-if="invoicableAmount > 0" class="invoicable-hint">
+          可开票 ¥{{ invoicableAmount.toFixed(2) }}
+        </span>
+        <a-tooltip v-if="invoicableOrders.length === 0" title="暂无可开票订单，完成订单支付后即可申请">
+          <a-button type="primary" disabled>
+            <template #icon><plus-outlined /></template>
+            申请发票
+          </a-button>
+        </a-tooltip>
+        <a-button v-else type="primary" @click="openApplyModal">
+          <template #icon><plus-outlined /></template>
+          申请发票
+        </a-button>
+      </div>
    </div>

    <div class="filter-bar">
@@ -56,7 +67,23 @@
          </div>
        </div>
      </div>
-      <a-empty v-else description="暂无发票记录" />
+      <div v-else class="empty-state">
+        <a-empty description="">
+          <template #description>
+            <div class="empty-desc">
+              <p>暂无发票记录</p>
+              <p class="empty-hint" v-if="invoicableOrders.length === 0">完成订单支付后，可在此申请电子发票</p>
+              <p class="empty-hint" v-else>您有 {{ invoicableOrders.length }} 笔订单可申请发票</p>
+            </div>
+          </template>
+          <a-button v-if="invoicableOrders.length === 0" type="primary" @click="$router.push('/')">
+            去逛逛
+          </a-button>
+          <a-button v-else type="primary" @click="openApplyModal">
+            立即申请
+          </a-button>
+        </a-empty>
+      </div>
    </a-spin>

    <div class="pagination-wrap" v-if="total > pageSize">
@@ -76,9 +103,54 @@
      :confirm-loading="submitting"
      @ok="handleApply"
      @cancel="resetForm"
-      width="560px"
+      width="600px"
+      :ok-text="'提交申请'"
+      :ok-button-props="{ disabled: selectedOrderIds.length === 0 }"
    >
      <a-form :model="form" :rules="rules" ref="formRef" layout="vertical">
+        <!-- 关联订单（放在最前面，核心操作） -->
+        <a-form-item name="orderIds">
+          <template #label>
+            <div class="order-label">
+              <span>选择开票订单</span>
+              <a v-if="invoicableOrders.length > 1" class="select-all-link" @click="toggleSelectAll">
+                {{ isAllSelected ? '取消全选' : '全选' }}
+              </a>
+            </div>
+          </template>
+          <a-checkbox-group v-model:value="selectedOrderIds" style="width: 100%">
+            <div class="order-select-list">
+              <label
+                v-for="order in invoicableOrders"
+                :key="order.id"
+                class="order-select-item"
+                :class="{ selected: selectedOrderIds.includes(order.id) }"
+              >
+                <a-checkbox :value="order.id" />
+                <div class="order-info">
+                  <div class="order-main">
+                    <span class="order-name">{{ order.skillName }}</span>
+                    <span class="order-amount">¥{{ Number(order.totalAmount).toFixed(2) }}</span>
+                  </div>
+                  <div class="order-meta">
+                    <span>{{ order.orderNo }}</span>
+                    <span>{{ order.createdAt }}</span>
+                  </div>
+                </div>
+              </label>
+            </div>
+          </a-checkbox-group>
+        </a-form-item>
+
+        <!-- 开票金额汇总（只读） -->
+        <div class="amount-summary" v-if="selectedOrderIds.length > 0">
+          <span class="amount-label">开票金额</span>
+          <span class="amount-value">¥{{ selectedAmount.toFixed(2) }}</span>
+          <span class="amount-count">（{{ selectedOrderIds.length }} 笔订单）</span>
+        </div>
+
+        <a-divider />
+
        <a-form-item label="发票类型" name="type">
          <a-radio-group v-model:value="form.type">
            <a-radio value="personal">个人</a-radio>
@@ -108,28 +180,6 @@
          </a-form-item>
        </template>

-        <a-form-item label="开票金额" name="amount">
-          <a-input-number
-            v-model:value="form.amount"
-            :min="0.01"
-            :precision="2"
-            style="width: 100%"
-            placeholder="请输入开票金额"
-            prefix="¥"
-          />
-        </a-form-item>
-
-        <a-form-item label="关联订单" name="orderIds">
-          <a-checkbox-group v-model:value="selectedOrderIds" style="width: 100%">
-            <div v-if="paidOrders.length > 0" style="max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;">
-              <a-checkbox v-for="order in paidOrders" :key="order.id" :value="order.id">
-                {{ order.orderNo }} - {{ order.skillName }} (¥{{ order.totalAmount }})
-              </a-checkbox>
-            </div>
-            <a-empty v-else description="暂无可开票订单" :image="null" />
-          </a-checkbox-group>
-        </a-form-item>
-
        <a-form-item label="接收邮箱" name="email">
          <a-input v-model:value="form.email" placeholder="电子发票将发送至此邮箱" />
        </a-form-item>
@@ -179,8 +229,6 @@ const form = reactive({
 const rules = {
  type: [{ required: true, message: '请选择发票类型' }],
  titleName: [{ required: true, message: '请输入发票抬头' }],
-  amount: [{ required: true, message: '请输入开票金额' }],
-  orderIds: [{ required: true, message: '请选择关联订单' }],
  email: [
    { required: true, message: '请输入接收邮箱' },
    { type: 'email', message: '请输入有效邮箱地址' }
@@ -212,21 +260,61 @@ const fetchInvoices = async () => {
  }
 }

-const paidOrders = computed(() => {
-  return orderStore.orders.filter(o => (o.status === 'paid' || o.status === 'completed') && Number(o.totalAmount) > 0)
+const invoicedOrderIds = computed(() => {
+  const ids = new Set()
+  invoices.value
+    .filter(inv => inv.status === 'pending' || inv.status === 'approved')
+    .forEach(inv => {
+      if (inv.orderIds) {
+        String(inv.orderIds).split(',').forEach(id => ids.add(id.trim()))
+      }
+    })
+  return ids
 })

+const invoicableOrders = computed(() => {
+  return orderStore.orders.filter(o => {
+    const isPaid = o.status === 'paid' || o.status === 'completed'
+    const hasAmount = Number(o.totalAmount) > 0
+    const notInvoiced = !invoicedOrderIds.value.has(String(o.id))
+    return isPaid && hasAmount && notInvoiced
+  })
+})
+
+const invoicableAmount = computed(() => {
+  return invoicableOrders.value.reduce((sum, o) => sum + Number(o.totalAmount || 0), 0)
+})
+
+const selectedAmount = computed(() => {
+  return invoicableOrders.value
+    .filter(o => selectedOrderIds.value.includes(o.id))
+    .reduce((sum, o) => sum + Number(o.totalAmount || 0), 0)
+})
+
+const isAllSelected = computed(() => {
+  return invoicableOrders.value.length > 0 && selectedOrderIds.value.length === invoicableOrders.value.length
+})
+
+const toggleSelectAll = () => {
+  if (isAllSelected.value) {
+    selectedOrderIds.value = []
+  } else {
+    selectedOrderIds.value = invoicableOrders.value.map(o => o.id)
+  }
+}
+
 watch(selectedOrderIds, (ids) => {
  form.orderIds = ids.join(',')
-  const total = paidOrders.value
-    .filter(o => ids.includes(o.id))
-    .reduce((sum, o) => sum + Number(o.totalAmount || 0), 0)
-  form.amount = total > 0 ? Number(total.toFixed(2)) : null
+  form.amount = selectedAmount.value > 0 ? Number(selectedAmount.value.toFixed(2)) : null
 })

+const openApplyModal = () => {
+  showApplyModal.value = true
+}
+
 const handleApply = async () => {
  if (selectedOrderIds.value.length === 0) {
-    message.warning('请选择关联订单')
+    message.warning('请选择开票订单')
    return
  }
  try {
@@ -238,7 +326,7 @@ const handleApply = async () => {
  try {
    const res = await invoiceApi.apply({ ...form })
    if (res.code === 200) {
-      message.success('发票申请已提交')
+      message.success('发票申请已提交，请等待审核')
      showApplyModal.value = false
      resetForm()
      fetchInvoices()
@@ -246,7 +334,7 @@ const handleApply = async () => {
      message.error(res.message || '申请失败')
    }
  } catch (e) {
-    message.error('申请失败')
+    message.error('提交失败，请稍后重试')
  } finally {
    submitting.value = false
  }
@@ -270,7 +358,11 @@ const resetForm = () => {
 onMounted(async () => {
  fetchInvoices()
  if (userStore.user) {
-    await orderStore.loadUserOrders(userStore.user.id)
+    try {
+      await orderStore.loadUserOrders(userStore.user.id)
+    } catch (e) {
+      message.error('加载订单数据失败，请刷新页面重试')
+    }
  }
 })
 </script>
@@ -289,12 +381,42 @@ onMounted(async () => {
      color: #303133;
      margin: 0;
    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .invoicable-hint {
+        font-size: 13px;
+        color: #52c41a;
+        font-weight: 500;
+      }
+    }
  }

  .filter-bar {
    margin-bottom: 20px;
  }

+  .empty-state {
+    padding: 60px 0;
+    text-align: center;
+
+    .empty-desc {
+      p {
+        margin: 0;
+        color: #909399;
+        font-size: 14px;
+      }
+      .empty-hint {
+        font-size: 12px;
+        color: #c0c4cc;
+        margin-top: 4px;
+      }
+    }
+  }
+
  .invoice-list {
    display: flex;
    flex-direction: column;
@@ -374,4 +496,110 @@ onMounted(async () => {
    text-align: right;
  }
 }
+
+.order-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  .select-all-link {
+    font-size: 12px;
+    font-weight: 400;
+    color: #1890ff;
+    cursor: pointer;
+  }
+}
+
+.order-select-list {
+  max-height: 240px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.order-select-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #d9d9d9;
+    background: #fafafa;
+  }
+
+  &.selected {
+    border-color: #1890ff;
+    background: #e6f7ff;
+  }
+
+  .order-info {
+    flex: 1;
+    min-width: 0;
+
+    .order-main {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .order-name {
+        font-size: 14px;
+        color: #303133;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .order-amount {
+        font-size: 14px;
+        font-weight: 600;
+        color: #e6a23c;
+        flex-shrink: 0;
+        margin-left: 8px;
+      }
+    }
+
+    .order-meta {
+      display: flex;
+      gap: 12px;
+      margin-top: 4px;
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
+
+.amount-summary {
+  display: flex;
+  align-items: baseline;
+  padding: 12px 16px;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+  border-radius: 6px;
+  margin-bottom: 16px;
+
+  .amount-label {
+    font-size: 14px;
+    color: #606266;
+    margin-right: 8px;
+  }
+
+  .amount-value {
+    font-size: 22px;
+    font-weight: 700;
+    color: #52c41a;
+  }
+
+  .amount-count {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 8px;
+  }
+}
 </style>
--- a/frontend/src/views/user/notifications.vue
+++ b/frontend/src/views/user/notifications.vue
@@ -35,26 +35,34 @@
 </template>

 <script setup>
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useUserStore } from '@/stores'
+import {
+  BellOutlined,
+  FileTextOutlined,
+  DollarOutlined,
+  MessageOutlined
+} from '@ant-design/icons-vue'

 const userStore = useUserStore()

-const loading = false
+const loading = ref(false)
 const notifications = computed(() => userStore.notifications)

-onMounted(() => {
-  userStore.loadNotifications()
+onMounted(async () => {
+  loading.value = true
+  await userStore.loadNotifications()
+  loading.value = false
 })

 const getIcon = (type) => {
  const icons = {
-    system: 'Bell',
-    order: 'Document',
-    point: 'Coin',
-    interaction: 'ChatDotRound'
+    system: BellOutlined,
+    order: FileTextOutlined,
+    point: DollarOutlined,
+    interaction: MessageOutlined
  }
-  return icons[type] || 'Bell'
+  return icons[type] || BellOutlined
 }

 const handleClick = (notification) => {
--- a/frontend/src/views/user/skills.vue
+++ b/frontend/src/views/user/skills.vue
@@ -91,22 +91,24 @@ const loadFavorites = async () => {
    loading.value = true
    const res = await favoriteApi.getMyFavorites()
    const skillIds = res.data || []
-    const skills = []
-    for (const id of skillIds) {
-      try {
-        const detail = await skillApi.getDetail(id)
-        if (detail.data) {
-          const s = detail.data
-          skills.push({
-            id: s.id,
-            name: s.name || s.title,
-            cover: s.coverImage || s.cover,
-            description: s.description || s.subtitle || ''
-          })
-        }
-      } catch { /* skip deleted skills */ }
+    if (skillIds.length === 0) {
+      favoriteSkillList.value = []
+      return
    }
-    favoriteSkillList.value = skills
+    const results = await Promise.allSettled(
+      skillIds.map(id => skillApi.getDetail(id))
+    )
+    favoriteSkillList.value = results
+      .filter(r => r.status === 'fulfilled' && r.value?.data)
+      .map(r => {
+        const s = r.value.data
+        return {
+          id: s.id,
+          name: s.name || s.title,
+          cover: s.coverImage || s.cover,
+          description: s.description || s.subtitle || ''
+        }
+      })
  } catch {
    favoriteSkillList.value = []
  } finally {