|
|
|
<template>
|
|
|
|
<div class="flex h-screen overflow-hidden">
|
|
|
|
<!-- 侧边栏 -->
|
|
|
|
<siderbar />
|
|
|
|
|
|
|
|
<!-- 主内容区 -->
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
|
|
<!-- 顶部导航 -->
|
|
|
|
<header class="bg-white shadow-sm z-10">
|
|
|
|
<div class="flex items-center justify-between p-4">
|
|
|
|
<div class="flex items-center">
|
|
|
|
<button class="md:hidden mr-4 text-gray-500 hover:text-dark" id="mobile-menu-button"
|
|
|
|
@click="toggleMobileMenu">
|
|
|
|
<i class="fa fa-bars text-xl"></i>
|
|
|
|
</button>
|
|
|
|
<div class="relative">
|
|
|
|
<input type="text" placeholder="搜索..."
|
|
|
|
class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
|
|
|
|
<i
|
|
|
|
class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex items-center space-x-4">
|
|
|
|
<button class="relative text-gray-500 hover:text-dark transition-colors" title="通知">
|
|
|
|
<i class="fa fa-bell text-xl"></i>
|
|
|
|
<span
|
|
|
|
class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
|
|
|
|
</button>
|
|
|
|
<button class="relative text-gray-500 hover:text-dark transition-colors" title="消息">
|
|
|
|
<i class="fa fa-envelope text-xl"></i>
|
|
|
|
<span
|
|
|
|
class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">5</span>
|
|
|
|
</button>
|
|
|
|
<div class="hidden md:block h-6 w-px bg-gray-200"></div>
|
|
|
|
|
|
|
|
<!-- 个人信息下拉菜单 -->
|
|
|
|
<div class="relative" id="user-menu-container">
|
|
|
|
<button class="flex items-center space-x-2 focus:outline-none" id="user-menu-button"
|
|
|
|
@click="toggleUserDropdown">
|
|
|
|
<img src="https://picsum.photos/id/1005/200/200" alt="用户头像"
|
|
|
|
class="w-8 h-8 rounded-full object-cover md:hidden">
|
|
|
|
<span class="hidden md:inline text-sm font-medium">张经理</span>
|
|
|
|
<i class="fa fa-angle-down text-gray-500"></i>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<!-- 下拉菜单内容 -->
|
|
|
|
<div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-50 transition-all duration-200"
|
|
|
|
id="user-dropdown"
|
|
|
|
:class="userDropdownOpen ? 'opacity-100 visible translate-y-0' : 'opacity-0 invisible -translate-y-2'">
|
|
|
|
<a href="profile.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
|
|
<i class="fa fa-user mr-2"></i>个人资料
|
|
|
|
</a>
|
|
|
|
<a href="account-settings.html"
|
|
|
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
|
|
<i class="fa fa-cog mr-2"></i>账户设置
|
|
|
|
</a>
|
|
|
|
<a href="subscription.html"
|
|
|
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
|
|
|
<i class="fa fa-subscription mr-2"></i>会员订阅
|
|
|
|
</a>
|
|
|
|
<div class="border-t border-gray-100 my-1"></div>
|
|
|
|
<a href="login.html" class="block px-4 py-2 text-sm text-danger hover:bg-gray-100">
|
|
|
|
<i class="fa fa-sign-out mr-2"></i>退出登录
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
|
|
<!-- 页面内容 -->
|
|
|
|
<main class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-hide bg-gray-50">
|
|
|
|
<div class="mb-6">
|
|
|
|
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">控制台</h2>
|
|
|
|
<p class="text-gray-500 mt-1">欢迎回来，今天是 <span class="font-medium" id="current-date">{{ currentDate
|
|
|
|
}}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 数据概览卡片 -->
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 card-hover">
|
|
|
|
<div class="flex items-start justify-between">
|
|
|
|
<div>
|
|
|
|
<p class="text-gray-500 text-sm">已生成软文</p>
|
|
|
|
<h3 class="text-2xl font-bold mt-1">248</h3>
|
|
|
|
<p class="text-success text-sm mt-2 flex items-center">
|
|
|
|
<i class="fa fa-arrow-up mr-1"></i> 12.5% <span
|
|
|
|
class="text-gray-500 ml-1">较上月</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
|
|
|
|
<i class="fa fa-file-text-o text-xl"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 card-hover">
|
|
|
|
<div class="flex items-start justify-between">
|
|
|
|
<div>
|
|
|
|
<p class="text-gray-500 text-sm">已发布</p>
|
|
|
|
<h3 class="text-2xl font-bold mt-1">196</h3>
|
|
|
|
<p class="text-success text-sm mt-2 flex items-center">
|
|
|
|
<i class="fa fa-arrow-up mr-1"></i> 8.3% <span class="text-gray-500 ml-1">较上月</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
|
|
|
|
<i class="fa fa-check-circle-o text-xl"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 card-hover">
|
|
|
|
<div class="flex items-start justify-between">
|
|
|
|
<div>
|
|
|
|
<p class="text-gray-500 text-sm">知识库文档</p>
|
|
|
|
<h3 class="text-2xl font-bold mt-1">156</h3>
|
|
|
|
<p class="text-success text-sm mt-2 flex items-center">
|
|
|
|
<i class="fa fa-arrow-up mr-1"></i> 15.2% <span
|
|
|
|
class="text-gray-500 ml-1">较上月</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
|
|
|
|
<i class="fa fa-book text-xl"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 card-hover">
|
|
|
|
<div class="flex items-start justify-between">
|
|
|
|
<div>
|
|
|
|
<p class="text-gray-500 text-sm">平均阅读量</p>
|
|
|
|
<h3 class="text-2xl font-bold mt-1">2.4k</h3>
|
|
|
|
<p class="text-danger text-sm mt-2 flex items-center">
|
|
|
|
<i class="fa fa-arrow-down mr-1"></i> 3.1% <span
|
|
|
|
class="text-gray-500 ml-1">较上月</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
|
|
|
|
<i class="fa fa-eye text-xl"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 图表和最近活动 -->
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
|
|
<!-- 内容趋势图表 -->
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2 card-hover">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
|
|
<h3 class="font-bold text-lg">内容趋势</h3>
|
|
|
|
<div class="flex space-x-2">
|
|
|
|
<button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-lg">周</button>
|
|
|
|
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">月</button>
|
|
|
|
<button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">年</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="h-64">
|
|
|
|
<canvas id="contentTrendChart"></canvas>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 最近活动 -->
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 card-hover">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
|
|
<h3 class="font-bold text-lg">最近活动</h3>
|
|
|
|
<a href="activity-log.html" class="text-primary text-sm hover:underline">查看全部</a>
|
|
|
|
</div>
|
|
|
|
<div class="space-y-4 max-h-64 overflow-y-auto scrollbar-hide">
|
|
|
|
<div class="flex items-start space-x-3" v-for="activity in recentActivities"
|
|
|
|
:key="activity.id">
|
|
|
|
<div class="w-8 h-8 rounded-full" :class="activity.bgClass">
|
|
|
|
<i class="fa" :class="activity.iconClass"></i>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<p class="text-sm">{{ activity.description }}</p>
|
|
|
|
<p class="text-gray-500 text-xs mt-1">{{ activity.time }}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 核心功能区 -->
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
|
|
<!-- 软文生成 -->
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
|
|
|
|
<div class="h-32 bg-gradient-to-r from-primary to-primary/70 relative">
|
|
|
|
<div class="absolute right-0 top-0 opacity-10">
|
|
|
|
<i class="fa fa-file-text text-[150px] text-white"></i>
|
|
|
|
</div>
|
|
|
|
<div class="p-5 relative z-10">
|
|
|
|
<h3 class="text-white font-bold text-xl">软文生成</h3>
|
|
|
|
<p class="text-white/80 text-sm mt-1">基于AI和知识库，快速生成高质量软文</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-5">
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">生成主题</label>
|
|
|
|
<input type="text" placeholder="输入您想要生成的软文主题..."
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="articleGeneration.topic">
|
|
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3 mb-4">
|
|
|
|
<div>
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">文章风格</label>
|
|
|
|
<select
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="articleGeneration.style">
|
|
|
|
<option>专业严谨</option>
|
|
|
|
<option>轻松活泼</option>
|
|
|
|
<option>幽默风趣</option>
|
|
|
|
<option>简洁明了</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">参考知识库</label>
|
|
|
|
<select
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="articleGeneration.knowledgeBase">
|
|
|
|
<option>全部文档</option>
|
|
|
|
<option>产品手册</option>
|
|
|
|
<option>行业报告</option>
|
|
|
|
<option>营销素材</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button class="w-full btn-primary flex items-center justify-center"
|
|
|
|
id="generate-article-button" @click="generateArticle">
|
|
|
|
<i class="fa fa-magic mr-2"></i> 立即生成
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 发布计划 -->
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
|
|
|
|
<div class="h-32 bg-gradient-to-r from-secondary to-secondary/70 relative">
|
|
|
|
<div class="absolute right-0 top-0 opacity-10">
|
|
|
|
<i class="fa fa-calendar-check-o text-[150px] text-white"></i>
|
|
|
|
</div>
|
|
|
|
<div class="p-5 relative z-10">
|
|
|
|
<h3 class="text-white font-bold text-xl">发布计划</h3>
|
|
|
|
<p class="text-white/80 text-sm mt-1">设置全年发布计划，自动定时发布</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-5">
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">发布平台</label>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
<label
|
|
|
|
class="inline-flex items-center px-3 py-1 border border-gray-200 rounded-full text-sm cursor-pointer hover:bg-gray-50"
|
|
|
|
v-for="platform in publishPlatforms" :key="platform.id">
|
|
|
|
<input type="checkbox" class="form-checkbox text-primary h-4 w-4 mr-2"
|
|
|
|
v-model="platform.checked">
|
|
|
|
<span>{{ platform.name }}</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">发布频率</label>
|
|
|
|
<div class="flex items-center">
|
|
|
|
<input type="number" v-model="publishFrequency.count" min="1" max="10"
|
|
|
|
class="w-16 px-3 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
|
|
|
|
<span class="mx-2 text-gray-500">篇/天</span>
|
|
|
|
<select
|
|
|
|
class="flex-1 ml-2 px-3 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="publishFrequency.period">
|
|
|
|
<option>工作日发布</option>
|
|
|
|
<option>每日发布</option>
|
|
|
|
<option>自定义日期</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button class="w-full btn-primary flex items-center justify-center"
|
|
|
|
id="setup-schedule-button" @click="setupSchedule">
|
|
|
|
<i class="fa fa-calendar-plus-o mr-2"></i> 设置计划
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 知识库和待发布 -->
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- 知识库管理 -->
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 card-hover">
|
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
|
<h3 class="font-bold text-lg">知识库管理</h3>
|
|
|
|
<button class="btn-secondary text-sm py-1" id="add-knowledge-button"
|
|
|
|
@click="openModal('add-knowledge-modal')">
|
|
|
|
<i class="fa fa-plus mr-1"></i> 新增
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="space-y-3 max-h-72 overflow-y-auto scrollbar-hide">
|
|
|
|
<div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:bg-gray-50"
|
|
|
|
v-for="doc in knowledgeDocs" :key="doc.id">
|
|
|
|
<div class="flex items-center space-x-3">
|
|
|
|
<div class="w-10 h-10 rounded" :class="doc.iconBgClass">
|
|
|
|
<i class="fa" :class="doc.iconClass"></i>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<p class="text-sm font-medium">{{ doc.name }}</p>
|
|
|
|
<p class="text-gray-500 text-xs">{{ doc.size }} · {{ doc.date }}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex space-x-1">
|
|
|
|
<button class="text-gray-400 hover:text-primary p-1" title="编辑"
|
|
|
|
@click="editKnowledgeDoc(doc.id)">
|
|
|
|
<i class="fa fa-pencil"></i>
|
|
|
|
</button>
|
|
|
|
<button class="text-gray-400 hover:text-danger p-1" title="删除"
|
|
|
|
@click="deleteKnowledgeDoc(doc.id)">
|
|
|
|
<i class="fa fa-trash"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
|
|
<a href="knowledge-base.html" class="text-primary text-sm hover:underline">查看所有文档</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 待发布文章 -->
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2 card-hover">
|
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
|
|
<h3 class="font-bold text-lg">待发布文章</h3>
|
|
|
|
<div class="flex space-x-2">
|
|
|
|
<button class="btn-secondary text-sm py-1">
|
|
|
|
<i class="fa fa-calendar mr-1"></i> 查看计划
|
|
|
|
</button>
|
|
|
|
<button class="btn-primary text-sm py-1" id="add-article-button"
|
|
|
|
@click="openModal('add-article-modal')">
|
|
|
|
<i class="fa fa-plus mr-1"></i> 新增文章
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
|
|
<table class="min-w-full">
|
|
|
|
<thead>
|
|
|
|
<tr class="text-left text-gray-500 text-sm border-b">
|
|
|
|
<th class="pb-3 font-medium">标题</th>
|
|
|
|
<th class="pb-3 font-medium">发布平台</th>
|
|
|
|
<th class="pb-3 font-medium">发布时间</th>
|
|
|
|
<th class="pb-3 font-medium">状态</th>
|
|
|
|
<th class="pb-3 font-medium text-right">操作</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50"
|
|
|
|
v-for="article in pendingArticles" :key="article.id">
|
|
|
|
<td class="py-3 text-sm">
|
|
|
|
<p class="font-medium">{{ article.title }}</p>
|
|
|
|
</td>
|
|
|
|
<td class="py-3 text-sm">
|
|
|
|
<span v-for="platform in article.platforms" :key="platform.id"
|
|
|
|
:class="platform.badgeClass"
|
|
|
|
class="inline-flex items-center px-2 py-1 rounded-full text-xs mr-1">
|
|
|
|
{{ platform.name }}
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td class="py-3 text-sm text-gray-500">{{ article.publishTime }}</td>
|
|
|
|
<td class="py-3 text-sm">
|
|
|
|
<span
|
|
|
|
class="inline-flex items-center px-2 py-1 bg-green-50 text-green-600 rounded-full text-xs">
|
|
|
|
<i class="fa fa-clock-o mr-1"></i> 已排期
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<td class="py-3 text-sm text-right">
|
|
|
|
<div class="flex justify-end space-x-2">
|
|
|
|
<button class="text-primary hover:text-primary/80" title="编辑"
|
|
|
|
@click="editArticle(article.id)">
|
|
|
|
<i class="fa fa-pencil"></i>
|
|
|
|
</button>
|
|
|
|
<button class="text-warning hover:text-warning/80" title="调整时间"
|
|
|
|
@click="adjustArticleTime(article.id)">
|
|
|
|
<i class="fa fa-calendar"></i>
|
|
|
|
</button>
|
|
|
|
<button class="text-danger hover:text-danger/80" title="取消发布"
|
|
|
|
@click="cancelArticle(article.id)">
|
|
|
|
<i class="fa fa-trash"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
|
|
<a href="pending-articles.html" class="text-primary text-sm hover:underline">查看所有待发布文章</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 新增文章弹窗 -->
|
|
|
|
<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center transition-all duration-300"
|
|
|
|
id="add-article-modal"
|
|
|
|
:class="activeModal === 'add-article-modal' ? 'opacity-100 visible' : 'opacity-0 invisible'">
|
|
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform transition-all duration-300"
|
|
|
|
id="add-article-modal-content"
|
|
|
|
:class="activeModal === 'add-article-modal' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
|
|
|
|
<div class="p-6 border-b">
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
<h3 class="text-xl font-bold">新增文章</h3>
|
|
|
|
<button class="text-gray-500 hover:text-gray-700" @click="closeModal">
|
|
|
|
<i class="fa fa-times text-xl"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">文章标题</label>
|
|
|
|
<input type="text" placeholder="输入文章标题..."
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newArticle.title">
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">文章内容</label>
|
|
|
|
<textarea rows="8" placeholder="输入文章内容..."
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newArticle.content"></textarea>
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">文章分类</label>
|
|
|
|
<select
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newArticle.category">
|
|
|
|
<option>产品介绍</option>
|
|
|
|
<option>行业资讯</option>
|
|
|
|
<option>技术分享</option>
|
|
|
|
<option>客户案例</option>
|
|
|
|
<option>活动推广</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">发布平台</label>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
|
|
<label
|
|
|
|
class="inline-flex items-center px-3 py-1 border border-gray-200 rounded-full text-sm cursor-pointer hover:bg-gray-50"
|
|
|
|
v-for="platform in newArticlePlatforms" :key="platform.id">
|
|
|
|
<input type="checkbox" class="form-checkbox text-primary h-4 w-4 mr-2"
|
|
|
|
v-model="platform.checked">
|
|
|
|
<span>{{ platform.name }}</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">发布时间</label>
|
|
|
|
<input type="datetime-local"
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newArticle.publishTime">
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">SEO设置</label>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
|
|
<div>
|
|
|
|
<label class="block text-xs text-gray-500 mb-1">关键词</label>
|
|
|
|
<input type="text" placeholder="输入关键词，用逗号分隔"
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newArticle.seo.keywords">
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<label class="block text-xs text-gray-500 mb-1">描述</label>
|
|
|
|
<input type="text" placeholder="输入描述信息"
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newArticle.seo.description">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-6 border-t flex justify-end space-x-3">
|
|
|
|
<button class="btn-secondary" @click="closeModal">取消</button>
|
|
|
|
<button class="btn-primary" @click="saveNewArticle">保存并发布</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 新增知识库文档弹窗 -->
|
|
|
|
<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center transition-all duration-300"
|
|
|
|
id="add-knowledge-modal" v-show="showKnowledgeModal"
|
|
|
|
:class="activeModal === 'add-knowledge-modal' ? 'opacity-100 visible' : 'opacity-0 invisible'">
|
|
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto transform transition-all duration-300"
|
|
|
|
id="add-knowledge-modal-content"
|
|
|
|
:class="activeModal === 'add-knowledge-modal' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
|
|
|
|
<div class="p-6 border-b">
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
<h3 class="text-xl font-bold">新增知识库文档</h3>
|
|
|
|
<button class="text-gray-500 hover:text-gray-700" @click="closeModal">
|
|
|
|
<i class="fa fa-times text-xl"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">文档标题</label>
|
|
|
|
<input type="text" placeholder="输入文档标题..."
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newKnowledgeDoc.title">
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">文档分类</label>
|
|
|
|
<select
|
|
|
|
class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
|
|
|
|
v-model="newKnowledgeDoc.category">
|
|
|
|
<option>产品手册</option>
|
|
|
|
<option>行业报告</option>
|
|
|
|
<option>客户案例</option>
|
|
|
|
<option>营销素材</option>
|
|
|
|
<option>其他文档</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">上传文档</label>
|
|
|
|
<div
|
|
|
|
class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center hover:bg-gray-50 cursor-pointer">
|
|
|
|
<i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
|
|
|
|
<p class="text-sm text-gray-500">点击或拖拽文件至此处上传</p>
|
|
|
|
<p class="text-xs text-gray-400 mt-1">支持 PDF, Word, Excel, PPT 格式</p>
|
|
|
|
<input type="file" class="hidden" id="file-upload" @change="handleFileUpload">
|
|
|
|
</div>
|
|
|
|
<p class="text-xs text-gray-500 mt-2" v-if="newKnowledgeDoc.fileName">{{ newKnowledgeDoc.fileName }}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="p-6 border-t flex justify-end space-x-3">
|
|
|
|
<button class="btn-secondary" @click="closeModal">取消</button>
|
|
|
|
<button class="btn-primary" @click="saveNewKnowledgeDoc"
|
|
|
|
:disabled="!newKnowledgeDoc.fileName">上传文档</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import siderbar from '@/components/siderbar.vue';
|
|
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
import { Chart, registerables } from 'chart.js';
|
|
|
|
Chart.register(...registerables);
|
|
|
|
|
|
|
|
// 状态管理
|
|
|
|
const userDropdownOpen = ref(false);
|
|
|
|
const mobileMenuOpen = ref(false);
|
|
|
|
const activeModal = ref('');
|
|
|
|
const currentDate = ref('');
|
|
|
|
const showKnowledgeModal = ref(false);
|
|
|
|
// 文章生成表单数据
|
|
|
|
const articleGeneration = ref({
|
|
|
|
topic: '',
|
|
|
|
style: '专业严谨',
|
|
|
|
knowledgeBase: '全部文档'
|
|
|
|
});
|
|
|
|
|
|
|
|
// 发布平台数据
|
|
|
|
const publishPlatforms = ref([
|
|
|
|
{ id: 1, name: '官网博客', checked: true },
|
|
|
|
{ id: 2, name: '微信公众号', checked: true },
|
|
|
|
{ id: 3, name: '今日头条', checked: false }
|
|
|
|
]);
|
|
|
|
|
|
|
|
// 发布频率数据
|
|
|
|
const publishFrequency = ref({
|
|
|
|
count: 2,
|
|
|
|
period: '工作日发布'
|
|
|
|
});
|
|
|
|
|
|
|
|
// 最近活动数据
|
|
|
|
const recentActivities = ref([
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
description: '生成了2篇关于"夏季促销"的软文',
|
|
|
|
time: '今天 09:45',
|
|
|
|
bgClass: 'bg-primary/10 flex items-center justify-center text-primary flex-shrink-0',
|
|
|
|
iconClass: 'fa-file-text-o'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
description: '成功发布3篇文章到官网博客',
|
|
|
|
time: '昨天 15:30',
|
|
|
|
bgClass: 'bg-success/10 flex items-center justify-center text-success flex-shrink-0',
|
|
|
|
iconClass: 'fa-check-circle-o'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
description: '上传了5份产品手册到知识库',
|
|
|
|
time: '昨天 10:15',
|
|
|
|
bgClass: 'bg-secondary/10 flex items-center justify-center text-secondary flex-shrink-0',
|
|
|
|
iconClass: 'fa-upload'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 4,
|
|
|
|
description: '设置了未来7天的发布计划',
|
|
|
|
time: '2023-06-12 16:40',
|
|
|
|
bgClass: 'bg-warning/10 flex items-center justify-center text-warning flex-shrink-0',
|
|
|
|
iconClass: 'fa-calendar'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 5,
|
|
|
|
description: '2篇文章发布失败，请检查',
|
|
|
|
time: '2023-06-11 08:25',
|
|
|
|
bgClass: 'bg-danger/10 flex items-center justify-center text-danger flex-shrink-0',
|
|
|
|
iconClass: 'fa-exclamation-circle'
|
|
|
|
}
|
|
|
|
]);
|
|
|
|
|
|
|
|
// 知识库文档数据
|
|
|
|
const knowledgeDocs = ref([
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
name: '2023产品手册.pdf',
|
|
|
|
size: '2.4MB',
|
|
|
|
date: '2023-05-18',
|
|
|
|
iconBgClass: 'bg-primary/10 flex items-center justify-center text-primary',
|
|
|
|
iconClass: 'fa-file-pdf-o'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
name: '行业分析报告.docx',
|
|
|
|
size: '1.8MB',
|
|
|
|
date: '2023-06-02',
|
|
|
|
iconBgClass: 'bg-secondary/10 flex items-center justify-center text-secondary',
|
|
|
|
iconClass: 'fa-file-word-o'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
name: '客户案例数据.xlsx',
|
|
|
|
size: '3.2MB',
|
|
|
|
date: '2023-06-05',
|
|
|
|
iconBgClass: 'bg-warning/10 flex items-center justify-center text-warning',
|
|
|
|
iconClass: 'fa-file-excel-o'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 4,
|
|
|
|
name: '产品介绍.pptx',
|
|
|
|
size: '5.7MB',
|
|
|
|
date: '2023-06-10',
|
|
|
|
iconBgClass: 'bg-success/10 flex items-center justify-center text-success',
|
|
|
|
iconClass: 'fa-file-powerpoint-o'
|
|
|
|
}
|
|
|
|
]);
|
|
|
|
|
|
|
|
// 待发布文章数据
|
|
|
|
const pendingArticles = ref([
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
title: '2023夏季新品发布会亮点回顾',
|
|
|
|
platforms: [
|
|
|
|
{ id: 1, name: '官网博客', badgeClass: 'bg-blue-50 text-blue-600' }
|
|
|
|
],
|
|
|
|
publishTime: '2023-06-15 10:00'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
title: '如何选择适合您的产品解决方案',
|
|
|
|
platforms: [
|
|
|
|
{ id: 2, name: '微信公众号', badgeClass: 'bg-green-50 text-green-600' }
|
|
|
|
],
|
|
|
|
publishTime: '2023-06-15 15:30'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
title: '行业趋势分析：未来五年发展预测',
|
|
|
|
platforms: [
|
|
|
|
{ id: 1, name: '官网博客', badgeClass: 'bg-blue-50 text-blue-600' },
|
|
|
|
{ id: 3, name: '今日头条', badgeClass: 'bg-orange-50 text-orange-600' }
|
|
|
|
],
|
|
|
|
publishTime: '2023-06-16 09:30'
|
|
|
|
}
|
|
|
|
]);
|
|
|
|
|
|
|
|
// 新文章表单数据
|
|
|
|
const newArticle = ref({
|
|
|
|
title: '',
|
|
|
|
content: '',
|
|
|
|
category: '产品介绍',
|
|
|
|
publishTime: '',
|
|
|
|
seo: {
|
|
|
|
keywords: '',
|
|
|
|
description: ''
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 新文章发布平台
|
|
|
|
const newArticlePlatforms = ref([
|
|
|
|
{ id: 1, name: '官网博客', checked: true },
|
|
|
|
{ id: 2, name: '微信公众号', checked: true },
|
|
|
|
{ id: 3, name: '今日头条', checked: false },
|
|
|
|
{ id: 4, name: '微博', checked: false }
|
|
|
|
]);
|
|
|
|
|
|
|
|
// 新知识库文档数据
|
|
|
|
const newKnowledgeDoc = ref({
|
|
|
|
title: '',
|
|
|
|
category: '产品手册',
|
|
|
|
fileName: ''
|
|
|
|
});
|
|
|
|
|
|
|
|
// 方法
|
|
|
|
const toggleUserDropdown = () => {
|
|
|
|
userDropdownOpen.value = !userDropdownOpen.value;
|
|
|
|
};
|
|
|
|
|
|
|
|
const toggleMobileMenu = () => {
|
|
|
|
mobileMenuOpen.value = !mobileMenuOpen.value;
|
|
|
|
};
|
|
|
|
|
|
|
|
const openModal = (modalId) => {
|
|
|
|
activeModal.value = modalId;
|
|
|
|
// 设置默认发布时间为当前时间加1小时
|
|
|
|
if (modalId === 'add-article-modal') {
|
|
|
|
const now = new Date();
|
|
|
|
now.setHours(now.getHours() + 1);
|
|
|
|
newArticle.value.publishTime = now.toISOString().slice(0, 16);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const closeModal = () => {
|
|
|
|
activeModal.value = '';
|
|
|
|
};
|
|
|
|
|
|
|
|
const generateArticle = () => {
|
|
|
|
// 生成文章逻辑
|
|
|
|
alert(`正在生成关于"${articleGeneration.value.topic}"的${articleGeneration.value.style}风格文章...`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const setupSchedule = () => {
|
|
|
|
// 设置发布计划逻辑
|
|
|
|
// const platforms = publishPlatforms.value
|
|
|
|
// .filter(p => p.checked)
|
|
|
|
// .map(p => p.name)
|
|
|
|
// .join(', ');
|
|
|
|
// alert(`已设置发布计划：每天${publishFrequency.value.count}篇，发布到${platforms}，${publishFrequency.value.period}`);
|
|
|
|
showKnowledgeModal.value = true
|
|
|
|
};
|
|
|
|
|
|
|
|
const editKnowledgeDoc = (id) => {
|
|
|
|
// 编辑知识库文档逻辑
|
|
|
|
const doc = knowledgeDocs.value.find(d => d.id === id);
|
|
|
|
alert(`编辑文档：${doc.name}`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const deleteKnowledgeDoc = (id) => {
|
|
|
|
// 删除知识库文档逻辑
|
|
|
|
const doc = knowledgeDocs.value.find(d => d.id === id);
|
|
|
|
if (confirm(`确定要删除文档"${doc.name}"吗？`)) {
|
|
|
|
knowledgeDocs.value = knowledgeDocs.value.filter(d => d.id !== id);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const editArticle = (id) => {
|
|
|
|
// 编辑文章逻辑
|
|
|
|
const article = pendingArticles.value.find(a => a.id === id);
|
|
|
|
alert(`编辑文章：${article.title}`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const adjustArticleTime = (id) => {
|
|
|
|
// 调整文章发布时间逻辑
|
|
|
|
const article = pendingArticles.value.find(a => a.id === id);
|
|
|
|
alert(`调整文章"${article.title}"的发布时间，当前时间：${article.publishTime}`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const cancelArticle = (id) => {
|
|
|
|
// 取消发布文章逻辑
|
|
|
|
const article = pendingArticles.value.find(a => a.id === id);
|
|
|
|
if (confirm(`确定要取消发布文章"${article.title}"吗？`)) {
|
|
|
|
pendingArticles.value = pendingArticles.value.filter(a => a.id !== id);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const saveNewArticle = () => {
|
|
|
|
// 保存新文章逻辑
|
|
|
|
if (!newArticle.value.title) {
|
|
|
|
alert('请输入文章标题');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!newArticle.value.content) {
|
|
|
|
alert('请输入文章内容');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const selectedPlatforms = newArticlePlatforms.value
|
|
|
|
.filter(p => p.checked)
|
|
|
|
.map(p => ({
|
|
|
|
id: p.id,
|
|
|
|
name: p.name,
|
|
|
|
badgeClass: p.id === 1 ? 'bg-blue-50 text-blue-600' :
|
|
|
|
p.id === 2 ? 'bg-green-50 text-green-600' :
|
|
|
|
p.id === 3 ? 'bg-orange-50 text-orange-600' :
|
|
|
|
'bg-purple-50 text-purple-600'
|
|
|
|
}));
|
|
|
|
|
|
|
|
if (selectedPlatforms.length === 0) {
|
|
|
|
alert('请至少选择一个发布平台');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
pendingArticles.value.push({
|
|
|
|
id: pendingArticles.value.length + 1,
|
|
|
|
title: newArticle.value.title,
|
|
|
|
platforms: selectedPlatforms,
|
|
|
|
publishTime: newArticle.value.publishTime
|
|
|
|
});
|
|
|
|
|
|
|
|
// 重置表单并关闭弹窗
|
|
|
|
newArticle.value = {
|
|
|
|
title: '',
|
|
|
|
content: '',
|
|
|
|
category: '产品介绍',
|
|
|
|
publishTime: '',
|
|
|
|
seo: {
|
|
|
|
keywords: '',
|
|
|
|
description: ''
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
newArticlePlatforms.value.forEach(p => p.checked = false);
|
|
|
|
closeModal();
|
|
|
|
alert('文章已保存并加入发布计划');
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleFileUpload = (e) => {
|
|
|
|
// 处理文件上传逻辑
|
|
|
|
if (e.target.files && e.target.files[0]) {
|
|
|
|
newKnowledgeDoc.value.fileName = e.target.files[0].name;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const saveNewKnowledgeDoc = () => {
|
|
|
|
// 保存新知识库文档逻辑
|
|
|
|
if (!newKnowledgeDoc.value.title) {
|
|
|
|
alert('请输入文档标题');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!newKnowledgeDoc.value.fileName) {
|
|
|
|
alert('请上传文档');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 确定图标样式
|
|
|
|
let iconBgClass, iconClass;
|
|
|
|
if (newKnowledgeDoc.value.fileName.endsWith('.pdf')) {
|
|
|
|
iconBgClass = 'bg-primary/10 flex items-center justify-center text-primary';
|
|
|
|
iconClass = 'fa-file-pdf-o';
|
|
|
|
} else if (newKnowledgeDoc.value.fileName.endsWith('.docx') || newKnowledgeDoc.value.fileName.endsWith('.doc')) {
|
|
|
|
iconBgClass = 'bg-secondary/10 flex items-center justify-center text-secondary';
|
|
|
|
iconClass = 'fa-file-word-o';
|
|
|
|
} else if (newKnowledgeDoc.value.fileName.endsWith('.xlsx') || newKnowledgeDoc.value.fileName.endsWith('.xls')) {
|
|
|
|
iconBgClass = 'bg-warning/10 flex items-center justify-center text-warning';
|
|
|
|
iconClass = 'fa-file-excel-o';
|
|
|
|
} else if (newKnowledgeDoc.value.fileName.endsWith('.pptx') || newKnowledgeDoc.value.fileName.endsWith('.ppt')) {
|
|
|
|
iconBgClass = 'bg-success/10 flex items-center justify-center text-success';
|
|
|
|
iconClass = 'fa-file-powerpoint-o';
|
|
|
|
} else {
|
|
|
|
iconBgClass = 'bg-gray-100 flex items-center justify-center text-gray-500';
|
|
|
|
iconClass = 'fa-file-o';
|
|
|
|
}
|
|
|
|
|
|
|
|
// 添加到知识库
|
|
|
|
knowledgeDocs.value.push({
|
|
|
|
id: knowledgeDocs.value.length + 1,
|
|
|
|
name: newKnowledgeDoc.value.fileName,
|
|
|
|
size: '2.1MB', // 示例大小
|
|
|
|
date: new Date().toISOString().split('T')[0],
|
|
|
|
iconBgClass,
|
|
|
|
iconClass
|
|
|
|
});
|
|
|
|
|
|
|
|
// 重置表单并关闭弹窗
|
|
|
|
newKnowledgeDoc.value = {
|
|
|
|
title: '',
|
|
|
|
category: '产品手册',
|
|
|
|
fileName: ''
|
|
|
|
};
|
|
|
|
|
|
|
|
document.getElementById('file-upload').value = '';
|
|
|
|
closeModal();
|
|
|
|
alert('文档已上传到知识库');
|
|
|
|
};
|
|
|
|
|
|
|
|
// 初始化日期显示
|
|
|
|
const formatDate = (date) => {
|
|
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
|
|
|
|
return date.toLocaleDateString('zh-CN', options);
|
|
|
|
};
|
|
|
|
|
|
|
|
// 初始化图表
|
|
|
|
const initChart = () => {
|
|
|
|
const ctx = document.getElementById('contentTrendChart').getContext('2d');
|
|
|
|
|
|
|
|
// 生成过去7天的日期标签
|
|
|
|
const labels = [];
|
|
|
|
const today = new Date();
|
|
|
|
for (let i = 6; i >= 0; i--) {
|
|
|
|
const date = new Date(today);
|
|
|
|
date.setDate(today.getDate() - i);
|
|
|
|
labels.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
|
|
|
|
}
|
|
|
|
|
|
|
|
new Chart(ctx, {
|
|
|
|
type: 'line',
|
|
|
|
data: {
|
|
|
|
labels: labels,
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
label: '生成文章',
|
|
|
|
data: [12, 19, 15, 20, 18, 25, 22],
|
|
|
|
borderColor: '#165DFF',
|
|
|
|
backgroundColor: 'rgba(22, 93, 255, 0.1)',
|
|
|
|
tension: 0.4,
|
|
|
|
fill: true
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: '发布文章',
|
|
|
|
data: [8, 15, 10, 18, 14, 20, 16],
|
|
|
|
borderColor: '#36CFC9',
|
|
|
|
backgroundColor: 'rgba(54, 207, 201, 0.1)',
|
|
|
|
tension: 0.4,
|
|
|
|
fill: true
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
options: {
|
|
|
|
responsive: true,
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
plugins: {
|
|
|
|
legend: {
|
|
|
|
position: 'top',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
scales: {
|
|
|
|
y: {
|
|
|
|
beginAtZero: true,
|
|
|
|
grid: {
|
|
|
|
drawBorder: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
x: {
|
|
|
|
grid: {
|
|
|
|
display: false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
// 挂载时初始化
|
|
|
|
onMounted(() => {
|
|
|
|
currentDate.value = formatDate(new Date());
|
|
|
|
initChart();
|
|
|
|
|
|
|
|
// 点击外部关闭下拉菜单
|
|
|
|
document.addEventListener('click', (e) => {
|
|
|
|
const userMenu = document.getElementById('user-menu-container');
|
|
|
|
if (!userMenu.contains(e.target)) {
|
|
|
|
userDropdownOpen.value = false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
tailwind.config = {
|
|
|
|
theme: {
|
|
|
|
extend: {
|
|
|
|
colors: {
|
|
|
|
primary: '#165DFF',
|
|
|
|
secondary: '#36CFC9',
|
|
|
|
success: '#52C41A',
|
|
|
|
warning: '#FAAD14',
|
|
|
|
danger: '#FF4D4F',
|
|
|
|
dark: '#1D2129',
|
|
|
|
'gray-light': '#F2F3F5',
|
|
|
|
'gray-medium': '#C9CDD4'
|
|
|
|
},
|
|
|
|
fontFamily: {
|
|
|
|
inter: ['Inter', 'system-ui', 'sans-serif'],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
@import 'tailwindcss/base';
|
|
|
|
@import 'tailwindcss/components';
|
|
|
|
@import 'tailwindcss/utilities';
|
|
|
|
|
|
|
|
@layer utilities {
|
|
|
|
.content-auto {
|
|
|
|
content-visibility: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sidebar-item-active {
|
|
|
|
@apply bg-primary/10 text-primary border-l-4 border-primary;
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-hover {
|
|
|
|
@apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn-primary {
|
|
|
|
@apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg;
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn-secondary {
|
|
|
|
@apply bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all duration-200;
|
|
|
|
}
|
|
|
|
|
|
|
|
.scrollbar-hide {
|
|
|
|
scrollbar-width: none;
|
|
|
|
-ms-overflow-style: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dropdown-active {
|
|
|
|
@apply opacity-100 visible translate-y-0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal-active {
|
|
|
|
@apply opacity-100 visible;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal-content-active {
|
|
|
|
@apply opacity-100 translate-y-0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn-primary {
|
|
|
|
background-color: rgb(0, 119, 255);
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
