徐宝林 / AIGEO · 提交

转到一个项目

作者 202304001
提交 70fb4baf8a90136d050970eac97f9cd48fed2394 0 个父辈

initial commit

内嵌 并排对比
正在显示 23 个修改的文件 包含 2106 行增加 和 0 行删除
  1 +* text=auto eol=lf
  1 +# Logs
  2 +logs
  3 +*.log
  4 +npm-debug.log*
  5 +yarn-debug.log*
  6 +yarn-error.log*
  7 +pnpm-debug.log*
  8 +lerna-debug.log*
  9 +
  10 +node_modules
  11 +.DS_Store
  12 +dist
  13 +dist-ssr
  14 +coverage
  15 +*.local
  16 +
  17 +/cypress/videos/
  18 +/cypress/screenshots/
  19 +
  20 +# Editor directories and files
  21 +.vscode/*
  22 +!.vscode/extensions.json
  23 +.idea
  24 +*.suo
  25 +*.ntvs*
  26 +*.njsproj
  27 +*.sln
  28 +*.sw?
  29 +
  30 +*.tsbuildinfo
  1 +{
  2 + "$schema": "https://json.schemastore.org/prettierrc",
  3 + "semi": false,
  4 + "singleQuote": true,
  5 + "printWidth": 100,
  6 + "plugins": ["prettier-plugin-tailwindcss"]
  7 +}
  1 +{
  2 + "recommendations": [
  3 + "Vue.volar",
  4 + "esbenp.prettier-vscode"
  5 + ]
  6 +}
  1 +# aigeo
  2 +
  3 +This template should help get you started developing with Vue 3 in Vite.
  4 +
  5 +## Recommended IDE Setup
  6 +
  7 +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
  8 +
  9 +## Customize configuration
  10 +
  11 +See [Vite Configuration Reference](https://vite.dev/config/).
  12 +
  13 +## Project Setup
  14 +
  15 +```sh
  16 +npm install
  17 +```
  18 +
  19 +### Compile and Hot-Reload for Development
  20 +
  21 +```sh
  22 +npm run dev
  23 +```
  24 +
  25 +### Compile and Minify for Production
  26 +
  27 +```sh
  28 +npm run build
  29 +```
  1 +<!DOCTYPE html>
  2 +<html lang="">
  3 + <head>
  4 + <meta charset="UTF-8">
  5 + <link rel="icon" href="/favicon.ico">
  6 + <script src="https://cdn.tailwindcss.com"></script>
  7 + <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  8 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 + <title>Vite App</title>
  10 + </head>
  11 + <body>
  12 + <div id="app"></div>
  13 + <script type="module" src="/src/main.js"></script>
  14 + </body>
  15 +</html>
  1 +{
  2 + "compilerOptions": {
  3 + "paths": {
  4 + "@/*": ["./src/*"]
  5 + }
  6 + },
  7 + "exclude": ["node_modules", "dist"]
  8 +}
此 diff 太大无法显示。
  1 +{
  2 + "name": "aigeo",
  3 + "version": "0.0.0",
  4 + "private": true,
  5 + "type": "module",
  6 + "engines": {
  7 + "node": "^20.19.0 || >=22.12.0"
  8 + },
  9 + "scripts": {
  10 + "dev": "vite",
  11 + "build": "vite build",
  12 + "preview": "vite preview",
  13 + "format": "prettier --write src/"
  14 + },
  15 + "dependencies": {
  16 + "chart.js": "^4.5.0",
  17 + "pinia": "^3.0.3",
  18 + "sass": "^1.90.0",
  19 + "tailwindcss": "^3.4.17",
  20 + "vue": "^3.5.18",
  21 + "vue-router": "^4.5.1"
  22 + },
  23 + "devDependencies": {
  24 + "@vitejs/plugin-vue": "^6.0.1",
  25 + "autoprefixer": "^10.4.21",
  26 + "postcss": "^8.5.6",
  27 + "postcss-import": "^16.1.1",
  28 + "prettier": "3.6.2",
  29 + "prettier-plugin-tailwindcss": "^0.6.14",
  30 + "vite": "^7.0.6",
  31 + "vite-plugin-vue-devtools": "^8.0.0"
  32 + }
  33 +}
  1 +export default {
  2 + plugins: {
  3 + 'postcss-import': {},
  4 + tailwindcss: {},
  5 + autoprefixer: {},
  6 + },
  7 +}
不能预览此文件类型
  1 +<script setup>
  2 +import { RouterView } from 'vue-router'
  3 +</script>
  4 +
  5 +<template>
  6 + <RouterView />
  7 +</template>
  8 +
  9 +<style scoped></style>
  1 +color palette from <https://github.com/vuejs/theme>
  2 +:root {
  3 + --vt-c-white: #ffffff;
  4 + --vt-c-white-soft: #f8f8f8;
  5 + --vt-c-white-mute: #f2f2f2;
  6 +
  7 + --vt-c-black: #181818;
  8 + --vt-c-black-soft: #222222;
  9 + --vt-c-black-mute: #282828;
  10 +
  11 + --vt-c-indigo: #2c3e50;
  12 +
  13 + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  14 + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  15 + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  16 + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
  17 +
  18 + --vt-c-text-light-1: var(--vt-c-indigo);
  19 + --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  20 + --vt-c-text-dark-1: var(--vt-c-white);
  21 + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
  22 +}
  23 +
  24 +/* semantic color variables for this project */
  25 +:root {
  26 + --color-background: var(--vt-c-white);
  27 + --color-background-soft: var(--vt-c-white-soft);
  28 + --color-background-mute: var(--vt-c-white-mute);
  29 +
  30 + --color-border: var(--vt-c-divider-light-2);
  31 + --color-border-hover: var(--vt-c-divider-light-1);
  32 +
  33 + --color-heading: var(--vt-c-text-light-1);
  34 + --color-text: var(--vt-c-text-light-1);
  35 +
  36 + --section-gap: 160px;
  37 +}
  38 +
  39 +@media (prefers-color-scheme: dark) {
  40 + :root {
  41 + --color-background: var(--vt-c-black);
  42 + --color-background-soft: var(--vt-c-black-soft);
  43 + --color-background-mute: var(--vt-c-black-mute);
  44 +
  45 + --color-border: var(--vt-c-divider-dark-2);
  46 + --color-border-hover: var(--vt-c-divider-dark-1);
  47 +
  48 + --color-heading: var(--vt-c-text-dark-1);
  49 + --color-text: var(--vt-c-text-dark-2);
  50 + }
  51 +}
  52 +
  1 +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
  1 +@import './base.css';
  2 +@import 'tailwindcss/base';
  3 +@import 'tailwindcss/components';
  4 +@import 'tailwindcss/utilities';
  1 +<template>
  2 + <aside class="w-64 bg-white shadow-md z-10 hidden md:block transition-all duration-300 ease-in-out">
  3 + <div class="p-5 border-b">
  4 + <div class="flex items-center space-x-3">
  5 + <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
  6 + <i class="fa fa-pencil text-white text-xl"></i>
  7 + </div>
  8 + <h1 class="text-xl font-bold text-dark">智撰</h1>
  9 + </div>
  10 + <p class="text-gray-500 text-sm mt-1">AI软文自动生成与发布平台</p>
  11 + </div>
  12 +
  13 + <nav class="p-4">
  14 + <p class="text-xs uppercase text-gray-500 font-semibold mb-2 px-3">主功能</p>
  15 + <ul class="space-y-1">
  16 + <li>
  17 + <a href="dashboard.html"
  18 + class="flex items-center space-x-3 px-3 py-3 rounded-lg sidebar-item-active">
  19 + <i class="fa fa-dashboard w-5 text-center"></i>
  20 + <span>控制台</span>
  21 + </a>
  22 + </li>
  23 + <li>
  24 + <a href="knowledge-base.html"
  25 + class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
  26 + <i class="fa fa-book w-5 text-center"></i>
  27 + <span>知识库管理</span>
  28 + </a>
  29 + </li>
  30 + <li>
  31 + <a href="article-generation.html"
  32 + class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
  33 + <i class="fa fa-file-text w-5 text-center"></i>
  34 + <span>软文生成</span>
  35 + </a>
  36 + </li>
  37 + <li>
  38 + <a href="publishing-schedule.html"
  39 + class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
  40 + <i class="fa fa-calendar w-5 text-center"></i>
  41 + <span>发布计划</span>
  42 + </a>
  43 + </li>
  44 + <li>
  45 + <a href="analytics.html"
  46 + class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
  47 + <i class="fa fa-bar-chart w-5 text-center"></i>
  48 + <span>数据分析</span>
  49 + </a>
  50 + </li>
  51 + </ul>
  52 +
  53 + <p class="text-xs uppercase text-gray-500 font-semibold mb-2 px-3 mt-6">系统</p>
  54 + <ul class="space-y-1">
  55 + <li>
  56 + <a href="settings.html"
  57 + class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
  58 + <i class="fa fa-cog w-5 text-center"></i>
  59 + <span>设置</span>
  60 + </a>
  61 + </li>
  62 + <li>
  63 + <a href="help-center.html"
  64 + class="flex items-center space-x-3 px-3 py-3 rounded-lg hover:bg-gray-100 transition-colors">
  65 + <i class="fa fa-question-circle w-5 text-center"></i>
  66 + <span>帮助中心</span>
  67 + </a>
  68 + </li>
  69 + </ul>
  70 + </nav>
  71 +
  72 + <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
  73 + <div class="flex items-center space-x-3">
  74 + <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
  75 + <div>
  76 + <p class="font-medium text-sm">张经理</p>
  77 + <p class="text-gray-500 text-xs">高级会员</p>
  78 + </div>
  79 + <button class="ml-auto text-gray-500 hover:text-dark" title="退出登录">
  80 + <i class="fa fa-sign-out"></i>
  81 + </button>
  82 + </div>
  83 + </div>
  84 + </aside>
  85 +</template>
  86 +<script setup>
  87 +
  88 +</script>
  89 +<style scoped></style>
  1 +import './assets/main.css'
  2 +
  3 +import { createApp } from 'vue'
  4 +import { createPinia } from 'pinia'
  5 +
  6 +import App from './App.vue'
  7 +import router from './router'
  8 +
  9 +const app = createApp(App)
  10 +
  11 +app.use(createPinia())
  12 +app.use(router)
  13 +
  14 +app.mount('#app')
  1 +import { createRouter, createWebHistory } from 'vue-router'
  2 +
  3 +const router = createRouter({
  4 + history: createWebHistory(import.meta.env.BASE_URL),
  5 + routes: [
  6 + {
  7 + path: '/',
  8 + name: 'home',
  9 + component: () => import('../views/layout/index.vue'),
  10 + },
  11 + {
  12 + path: '/test',
  13 + name: 'about',
  14 + component: () => import('../views/test.vue'),
  15 + },
  16 + ],
  17 +})
  18 +
  19 +export default router
  1 +import { ref, computed } from 'vue'
  2 +import { defineStore } from 'pinia'
  3 +
  4 +export const useCounterStore = defineStore('counter', () => {
  5 + const count = ref(0)
  6 + const doubleCount = computed(() => count.value * 2)
  7 + function increment() {
  8 + count.value++
  9 + }
  10 +
  11 + return { count, doubleCount, increment }
  12 +})
  1 +<template>
  2 + <div class="flex h-screen overflow-hidden">
  3 + <!-- 侧边栏 -->
  4 + <siderbar />
  5 +
  6 + <!-- 主内容区 -->
  7 + <div class="flex-1 flex flex-col overflow-hidden">
  8 + <!-- 顶部导航 -->
  9 + <header class="bg-white shadow-sm z-10">
  10 + <div class="flex items-center justify-between p-4">
  11 + <div class="flex items-center">
  12 + <button class="md:hidden mr-4 text-gray-500 hover:text-dark" id="mobile-menu-button"
  13 + @click="toggleMobileMenu">
  14 + <i class="fa fa-bars text-xl"></i>
  15 + </button>
  16 + <div class="relative">
  17 + <input type="text" placeholder="搜索..."
  18 + 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">
  19 + <i
  20 + class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
  21 + </div>
  22 + </div>
  23 +
  24 + <div class="flex items-center space-x-4">
  25 + <button class="relative text-gray-500 hover:text-dark transition-colors" title="通知">
  26 + <i class="fa fa-bell text-xl"></i>
  27 + <span
  28 + 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>
  29 + </button>
  30 + <button class="relative text-gray-500 hover:text-dark transition-colors" title="消息">
  31 + <i class="fa fa-envelope text-xl"></i>
  32 + <span
  33 + 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>
  34 + </button>
  35 + <div class="hidden md:block h-6 w-px bg-gray-200"></div>
  36 +
  37 + <!-- 个人信息下拉菜单 -->
  38 + <div class="relative" id="user-menu-container">
  39 + <button class="flex items-center space-x-2 focus:outline-none" id="user-menu-button"
  40 + @click="toggleUserDropdown">
  41 + <img src="https://picsum.photos/id/1005/200/200" alt="用户头像"
  42 + class="w-8 h-8 rounded-full object-cover md:hidden">
  43 + <span class="hidden md:inline text-sm font-medium">张经理</span>
  44 + <i class="fa fa-angle-down text-gray-500"></i>
  45 + </button>
  46 +
  47 + <!-- 下拉菜单内容 -->
  48 + <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-50 transition-all duration-200"
  49 + id="user-dropdown"
  50 + :class="userDropdownOpen ? 'opacity-100 visible translate-y-0' : 'opacity-0 invisible -translate-y-2'">
  51 + <a href="profile.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
  52 + <i class="fa fa-user mr-2"></i>个人资料
  53 + </a>
  54 + <a href="account-settings.html"
  55 + class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
  56 + <i class="fa fa-cog mr-2"></i>账户设置
  57 + </a>
  58 + <a href="subscription.html"
  59 + class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
  60 + <i class="fa fa-subscription mr-2"></i>会员订阅
  61 + </a>
  62 + <div class="border-t border-gray-100 my-1"></div>
  63 + <a href="login.html" class="block px-4 py-2 text-sm text-danger hover:bg-gray-100">
  64 + <i class="fa fa-sign-out mr-2"></i>退出登录
  65 + </a>
  66 + </div>
  67 + </div>
  68 + </div>
  69 + </div>
  70 + </header>
  71 +
  72 + <!-- 页面内容 -->
  73 + <main class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-hide bg-gray-50">
  74 + <div class="mb-6">
  75 + <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">控制台</h2>
  76 + <p class="text-gray-500 mt-1">欢迎回来，今天是 <span class="font-medium" id="current-date">{{ currentDate
  77 + }}</span>
  78 + </p>
  79 + </div>
  80 +
  81 + <!-- 数据概览卡片 -->
  82 + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
  83 + <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
  84 + <div class="flex items-start justify-between">
  85 + <div>
  86 + <p class="text-gray-500 text-sm">已生成软文</p>
  87 + <h3 class="text-2xl font-bold mt-1">248</h3>
  88 + <p class="text-success text-sm mt-2 flex items-center">
  89 + <i class="fa fa-arrow-up mr-1"></i> 12.5% <span
  90 + class="text-gray-500 ml-1">较上月</span>
  91 + </p>
  92 + </div>
  93 + <div
  94 + class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
  95 + <i class="fa fa-file-text-o text-xl"></i>
  96 + </div>
  97 + </div>
  98 + </div>
  99 +
  100 + <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
  101 + <div class="flex items-start justify-between">
  102 + <div>
  103 + <p class="text-gray-500 text-sm">已发布</p>
  104 + <h3 class="text-2xl font-bold mt-1">196</h3>
  105 + <p class="text-success text-sm mt-2 flex items-center">
  106 + <i class="fa fa-arrow-up mr-1"></i> 8.3% <span class="text-gray-500 ml-1">较上月</span>
  107 + </p>
  108 + </div>
  109 + <div
  110 + class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
  111 + <i class="fa fa-check-circle-o text-xl"></i>
  112 + </div>
  113 + </div>
  114 + </div>
  115 +
  116 + <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
  117 + <div class="flex items-start justify-between">
  118 + <div>
  119 + <p class="text-gray-500 text-sm">知识库文档</p>
  120 + <h3 class="text-2xl font-bold mt-1">156</h3>
  121 + <p class="text-success text-sm mt-2 flex items-center">
  122 + <i class="fa fa-arrow-up mr-1"></i> 15.2% <span
  123 + class="text-gray-500 ml-1">较上月</span>
  124 + </p>
  125 + </div>
  126 + <div
  127 + class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
  128 + <i class="fa fa-book text-xl"></i>
  129 + </div>
  130 + </div>
  131 + </div>
  132 +
  133 + <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
  134 + <div class="flex items-start justify-between">
  135 + <div>
  136 + <p class="text-gray-500 text-sm">平均阅读量</p>
  137 + <h3 class="text-2xl font-bold mt-1">2.4k</h3>
  138 + <p class="text-danger text-sm mt-2 flex items-center">
  139 + <i class="fa fa-arrow-down mr-1"></i> 3.1% <span
  140 + class="text-gray-500 ml-1">较上月</span>
  141 + </p>
  142 + </div>
  143 + <div
  144 + class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
  145 + <i class="fa fa-eye text-xl"></i>
  146 + </div>
  147 + </div>
  148 + </div>
  149 + </div>
  150 +
  151 + <!-- 图表和最近活动 -->
  152 + <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
  153 + <!-- 内容趋势图表 -->
  154 + <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2 card-hover">
  155 + <div class="flex items-center justify-between mb-6">
  156 + <h3 class="font-bold text-lg">内容趋势</h3>
  157 + <div class="flex space-x-2">
  158 + <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-lg">周</button>
  159 + <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">月</button>
  160 + <button class="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg">年</button>
  161 + </div>
  162 + </div>
  163 + <div class="h-64">
  164 + <canvas id="contentTrendChart"></canvas>
  165 + </div>
  166 + </div>
  167 +
  168 + <!-- 最近活动 -->
  169 + <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
  170 + <div class="flex items-center justify-between mb-6">
  171 + <h3 class="font-bold text-lg">最近活动</h3>
  172 + <a href="activity-log.html" class="text-primary text-sm hover:underline">查看全部</a>
  173 + </div>
  174 + <div class="space-y-4 max-h-64 overflow-y-auto scrollbar-hide">
  175 + <div class="flex items-start space-x-3" v-for="activity in recentActivities"
  176 + :key="activity.id">
  177 + <div class="w-8 h-8 rounded-full" :class="activity.bgClass">
  178 + <i class="fa" :class="activity.iconClass"></i>
  179 + </div>
  180 + <div>
  181 + <p class="text-sm">{{ activity.description }}</p>
  182 + <p class="text-gray-500 text-xs mt-1">{{ activity.time }}</p>
  183 + </div>
  184 + </div>
  185 + </div>
  186 + </div>
  187 + </div>
  188 +
  189 + <!-- 核心功能区 -->
  190 + <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
  191 + <!-- 软文生成 -->
  192 + <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
  193 + <div class="h-32 bg-gradient-to-r from-primary to-primary/70 relative">
  194 + <div class="absolute right-0 top-0 opacity-10">
  195 + <i class="fa fa-file-text text-[150px] text-white"></i>
  196 + </div>
  197 + <div class="p-5 relative z-10">
  198 + <h3 class="text-white font-bold text-xl">软文生成</h3>
  199 + <p class="text-white/80 text-sm mt-1">基于AI和知识库，快速生成高质量软文</p>
  200 + </div>
  201 + </div>
  202 + <div class="p-5">
  203 + <div class="mb-4">
  204 + <label class="block text-sm font-medium text-gray-700 mb-1">生成主题</label>
  205 + <input type="text" placeholder="输入您想要生成的软文主题..."
  206 + 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"
  207 + v-model="articleGeneration.topic">
  208 + </div>
  209 + <div class="grid grid-cols-2 gap-3 mb-4">
  210 + <div>
  211 + <label class="block text-sm font-medium text-gray-700 mb-1">文章风格</label>
  212 + <select
  213 + 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"
  214 + v-model="articleGeneration.style">
  215 + <option>专业严谨</option>
  216 + <option>轻松活泼</option>
  217 + <option>幽默风趣</option>
  218 + <option>简洁明了</option>
  219 + </select>
  220 + </div>
  221 + <div>
  222 + <label class="block text-sm font-medium text-gray-700 mb-1">参考知识库</label>
  223 + <select
  224 + 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"
  225 + v-model="articleGeneration.knowledgeBase">
  226 + <option>全部文档</option>
  227 + <option>产品手册</option>
  228 + <option>行业报告</option>
  229 + <option>营销素材</option>
  230 + </select>
  231 + </div>
  232 + </div>
  233 + <button class="w-full btn-primary flex items-center justify-center"
  234 + id="generate-article-button" @click="generateArticle">
  235 + <i class="fa fa-magic mr-2"></i> 立即生成
  236 + </button>
  237 + </div>
  238 + </div>
  239 +
  240 + <!-- 发布计划 -->
  241 + <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover">
  242 + <div class="h-32 bg-gradient-to-r from-secondary to-secondary/70 relative">
  243 + <div class="absolute right-0 top-0 opacity-10">
  244 + <i class="fa fa-calendar-check-o text-[150px] text-white"></i>
  245 + </div>
  246 + <div class="p-5 relative z-10">
  247 + <h3 class="text-white font-bold text-xl">发布计划</h3>
  248 + <p class="text-white/80 text-sm mt-1">设置全年发布计划，自动定时发布</p>
  249 + </div>
  250 + </div>
  251 + <div class="p-5">
  252 + <div class="mb-4">
  253 + <label class="block text-sm font-medium text-gray-700 mb-1">发布平台</label>
  254 + <div class="flex flex-wrap gap-2">
  255 + <label
  256 + class="inline-flex items-center px-3 py-1 border border-gray-200 rounded-full text-sm cursor-pointer hover:bg-gray-50"
  257 + v-for="platform in publishPlatforms" :key="platform.id">
  258 + <input type="checkbox" class="form-checkbox text-primary h-4 w-4 mr-2"
  259 + v-model="platform.checked">
  260 + <span>{{ platform.name }}</span>
  261 + </label>
  262 + </div>
  263 + </div>
  264 + <div class="mb-4">
  265 + <label class="block text-sm font-medium text-gray-700 mb-1">发布频率</label>
  266 + <div class="flex items-center">
  267 + <input type="number" v-model="publishFrequency.count" min="1" max="10"
  268 + 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">
  269 + <span class="mx-2 text-gray-500">篇/天</span>
  270 + <select
  271 + 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"
  272 + v-model="publishFrequency.period">
  273 + <option>工作日发布</option>
  274 + <option>每日发布</option>
  275 + <option>自定义日期</option>
  276 + </select>
  277 + </div>
  278 + </div>
  279 + <button class="w-full btn-primary flex items-center justify-center"
  280 + id="setup-schedule-button" @click="setupSchedule">
  281 + <i class="fa fa-calendar-plus-o mr-2"></i> 设置计划
  282 + </button>
  283 + </div>
  284 + </div>
  285 + </div>
  286 +
  287 + <!-- 知识库和待发布 -->
  288 + <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  289 + <!-- 知识库管理 -->
  290 + <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
  291 + <div class="flex items-center justify-between mb-4">
  292 + <h3 class="font-bold text-lg">知识库管理</h3>
  293 + <button class="btn-secondary text-sm py-1" id="add-knowledge-button"
  294 + @click="openModal('add-knowledge-modal')">
  295 + <i class="fa fa-plus mr-1"></i> 新增
  296 + </button>
  297 + </div>
  298 + <div class="space-y-3 max-h-72 overflow-y-auto scrollbar-hide">
  299 + <div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:bg-gray-50"
  300 + v-for="doc in knowledgeDocs" :key="doc.id">
  301 + <div class="flex items-center space-x-3">
  302 + <div class="w-10 h-10 rounded" :class="doc.iconBgClass">
  303 + <i class="fa" :class="doc.iconClass"></i>
  304 + </div>
  305 + <div>
  306 + <p class="text-sm font-medium">{{ doc.name }}</p>
  307 + <p class="text-gray-500 text-xs">{{ doc.size }} · {{ doc.date }}</p>
  308 + </div>
  309 + </div>
  310 + <div class="flex space-x-1">
  311 + <button class="text-gray-400 hover:text-primary p-1" title="编辑"
  312 + @click="editKnowledgeDoc(doc.id)">
  313 + <i class="fa fa-pencil"></i>
  314 + </button>
  315 + <button class="text-gray-400 hover:text-danger p-1" title="删除"
  316 + @click="deleteKnowledgeDoc(doc.id)">
  317 + <i class="fa fa-trash"></i>
  318 + </button>
  319 + </div>
  320 + </div>
  321 + </div>
  322 + <div class="mt-4 text-center">
  323 + <a href="knowledge-base.html" class="text-primary text-sm hover:underline">查看所有文档</a>
  324 + </div>
  325 + </div>
  326 +
  327 + <!-- 待发布文章 -->
  328 + <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2 card-hover">
  329 + <div class="flex items-center justify-between mb-4">
  330 + <h3 class="font-bold text-lg">待发布文章</h3>
  331 + <div class="flex space-x-2">
  332 + <button class="btn-secondary text-sm py-1">
  333 + <i class="fa fa-calendar mr-1"></i> 查看计划
  334 + </button>
  335 + <button class="btn-primary text-sm py-1" id="add-article-button"
  336 + @click="openModal('add-article-modal')">
  337 + <i class="fa fa-plus mr-1"></i> 新增文章
  338 + </button>
  339 + </div>
  340 + </div>
  341 + <div class="overflow-x-auto">
  342 + <table class="min-w-full">
  343 + <thead>
  344 + <tr class="text-left text-gray-500 text-sm border-b">
  345 + <th class="pb-3 font-medium">标题</th>
  346 + <th class="pb-3 font-medium">发布平台</th>
  347 + <th class="pb-3 font-medium">发布时间</th>
  348 + <th class="pb-3 font-medium">状态</th>
  349 + <th class="pb-3 font-medium text-right">操作</th>
  350 + </tr>
  351 + </thead>
  352 + <tbody>
  353 + <tr class="border-b border-gray-100 hover:bg-gray-50"
  354 + v-for="article in pendingArticles" :key="article.id">
  355 + <td class="py-3 text-sm">
  356 + <p class="font-medium">{{ article.title }}</p>
  357 + </td>
  358 + <td class="py-3 text-sm">
  359 + <span v-for="platform in article.platforms" :key="platform.id"
  360 + :class="platform.badgeClass"
  361 + class="inline-flex items-center px-2 py-1 rounded-full text-xs mr-1">
  362 + {{ platform.name }}
  363 + </span>
  364 + </td>
  365 + <td class="py-3 text-sm text-gray-500">{{ article.publishTime }}</td>
  366 + <td class="py-3 text-sm">
  367 + <span
  368 + class="inline-flex items-center px-2 py-1 bg-green-50 text-green-600 rounded-full text-xs">
  369 + <i class="fa fa-clock-o mr-1"></i> 已排期
  370 + </span>
  371 + </td>
  372 + <td class="py-3 text-sm text-right">
  373 + <div class="flex justify-end space-x-2">
  374 + <button class="text-primary hover:text-primary/80" title="编辑"
  375 + @click="editArticle(article.id)">
  376 + <i class="fa fa-pencil"></i>
  377 + </button>
  378 + <button class="text-warning hover:text-warning/80" title="调整时间"
  379 + @click="adjustArticleTime(article.id)">
  380 + <i class="fa fa-calendar"></i>
  381 + </button>
  382 + <button class="text-danger hover:text-danger/80" title="取消发布"
  383 + @click="cancelArticle(article.id)">
  384 + <i class="fa fa-trash"></i>
  385 + </button>
  386 + </div>
  387 + </td>
  388 + </tr>
  389 + </tbody>
  390 + </table>
  391 + </div>
  392 + <div class="mt-4 text-center">
  393 + <a href="pending-articles.html" class="text-primary text-sm hover:underline">查看所有待发布文章</a>
  394 + </div>
  395 + </div>
  396 + </div>
  397 + </main>
  398 + </div>
  399 + </div>
  400 +
  401 + <!-- 新增文章弹窗 -->
  402 + <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center transition-all duration-300"
  403 + id="add-article-modal"
  404 + :class="activeModal === 'add-article-modal' ? 'opacity-100 visible' : 'opacity-0 invisible'">
  405 + <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform transition-all duration-300"
  406 + id="add-article-modal-content"
  407 + :class="activeModal === 'add-article-modal' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
  408 + <div class="p-6 border-b">
  409 + <div class="flex items-center justify-between">
  410 + <h3 class="text-xl font-bold">新增文章</h3>
  411 + <button class="text-gray-500 hover:text-gray-700" @click="closeModal">
  412 + <i class="fa fa-times text-xl"></i>
  413 + </button>
  414 + </div>
  415 + </div>
  416 + <div class="p-6">
  417 + <div class="mb-4">
  418 + <label class="block text-sm font-medium text-gray-700 mb-1">文章标题</label>
  419 + <input type="text" placeholder="输入文章标题..."
  420 + 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"
  421 + v-model="newArticle.title">
  422 + </div>
  423 + <div class="mb-4">
  424 + <label class="block text-sm font-medium text-gray-700 mb-1">文章内容</label>
  425 + <textarea rows="8" placeholder="输入文章内容..."
  426 + 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"
  427 + v-model="newArticle.content"></textarea>
  428 + </div>
  429 + <div class="mb-4">
  430 + <label class="block text-sm font-medium text-gray-700 mb-1">文章分类</label>
  431 + <select
  432 + 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"
  433 + v-model="newArticle.category">
  434 + <option>产品介绍</option>
  435 + <option>行业资讯</option>
  436 + <option>技术分享</option>
  437 + <option>客户案例</option>
  438 + <option>活动推广</option>
  439 + </select>
  440 + </div>
  441 + <div class="mb-4">
  442 + <label class="block text-sm font-medium text-gray-700 mb-1">发布平台</label>
  443 + <div class="flex flex-wrap gap-2">
  444 + <label
  445 + class="inline-flex items-center px-3 py-1 border border-gray-200 rounded-full text-sm cursor-pointer hover:bg-gray-50"
  446 + v-for="platform in newArticlePlatforms" :key="platform.id">
  447 + <input type="checkbox" class="form-checkbox text-primary h-4 w-4 mr-2"
  448 + v-model="platform.checked">
  449 + <span>{{ platform.name }}</span>
  450 + </label>
  451 + </div>
  452 + </div>
  453 + <div class="mb-4">
  454 + <label class="block text-sm font-medium text-gray-700 mb-1">发布时间</label>
  455 + <input type="datetime-local"
  456 + 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"
  457 + v-model="newArticle.publishTime">
  458 + </div>
  459 + <div class="mb-4">
  460 + <label class="block text-sm font-medium text-gray-700 mb-1">SEO设置</label>
  461 + <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  462 + <div>
  463 + <label class="block text-xs text-gray-500 mb-1">关键词</label>
  464 + <input type="text" placeholder="输入关键词，用逗号分隔"
  465 + 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"
  466 + v-model="newArticle.seo.keywords">
  467 + </div>
  468 + <div>
  469 + <label class="block text-xs text-gray-500 mb-1">描述</label>
  470 + <input type="text" placeholder="输入描述信息"
  471 + 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"
  472 + v-model="newArticle.seo.description">
  473 + </div>
  474 + </div>
  475 + </div>
  476 + </div>
  477 + <div class="p-6 border-t flex justify-end space-x-3">
  478 + <button class="btn-secondary" @click="closeModal">取消</button>
  479 + <button class="btn-primary" @click="saveNewArticle">保存并发布</button>
  480 + </div>
  481 + </div>
  482 + </div>
  483 +
  484 + <!-- 新增知识库文档弹窗 -->
  485 + <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center transition-all duration-300"
  486 + id="add-knowledge-modal" v-show="showKnowledgeModal"
  487 + :class="activeModal === 'add-knowledge-modal' ? 'opacity-100 visible' : 'opacity-0 invisible'">
  488 + <div class="bg-white rounded-xl shadow-xl w-full max-w-md max-h-[90vh] overflow-y-auto transform transition-all duration-300"
  489 + id="add-knowledge-modal-content"
  490 + :class="activeModal === 'add-knowledge-modal' ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'">
  491 + <div class="p-6 border-b">
  492 + <div class="flex items-center justify-between">
  493 + <h3 class="text-xl font-bold">新增知识库文档</h3>
  494 + <button class="text-gray-500 hover:text-gray-700" @click="closeModal">
  495 + <i class="fa fa-times text-xl"></i>
  496 + </button>
  497 + </div>
  498 + </div>
  499 + <div class="p-6">
  500 + <div class="mb-4">
  501 + <label class="block text-sm font-medium text-gray-700 mb-1">文档标题</label>
  502 + <input type="text" placeholder="输入文档标题..."
  503 + 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"
  504 + v-model="newKnowledgeDoc.title">
  505 + </div>
  506 + <div class="mb-4">
  507 + <label class="block text-sm font-medium text-gray-700 mb-1">文档分类</label>
  508 + <select
  509 + 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"
  510 + v-model="newKnowledgeDoc.category">
  511 + <option>产品手册</option>
  512 + <option>行业报告</option>
  513 + <option>客户案例</option>
  514 + <option>营销素材</option>
  515 + <option>其他文档</option>
  516 + </select>
  517 + </div>
  518 + <div class="mb-4">
  519 + <label class="block text-sm font-medium text-gray-700 mb-1">上传文档</label>
  520 + <div
  521 + class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center hover:bg-gray-50 cursor-pointer">
  522 + <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
  523 + <p class="text-sm text-gray-500">点击或拖拽文件至此处上传</p>
  524 + <p class="text-xs text-gray-400 mt-1">支持 PDF, Word, Excel, PPT 格式</p>
  525 + <input type="file" class="hidden" id="file-upload" @change="handleFileUpload">
  526 + </div>
  527 + <p class="text-xs text-gray-500 mt-2" v-if="newKnowledgeDoc.fileName">{{ newKnowledgeDoc.fileName }}
  528 + </p>
  529 + </div>
  530 + </div>
  531 + <div class="p-6 border-t flex justify-end space-x-3">
  532 + <button class="btn-secondary" @click="closeModal">取消</button>
  533 + <button class="btn-primary" @click="saveNewKnowledgeDoc"
  534 + :disabled="!newKnowledgeDoc.fileName">上传文档</button>
  535 + </div>
  536 + </div>
  537 + </div>
  538 +</template>
  539 +
  540 +<script setup>
  541 +import siderbar from '@/components/siderbar.vue';
  542 +import { ref, onMounted } from 'vue';
  543 +import { Chart, registerables } from 'chart.js';
  544 +Chart.register(...registerables);
  545 +
  546 +// 状态管理
  547 +const userDropdownOpen = ref(false);
  548 +const mobileMenuOpen = ref(false);
  549 +const activeModal = ref('');
  550 +const currentDate = ref('');
  551 +const showKnowledgeModal = ref(false);
  552 +// 文章生成表单数据
  553 +const articleGeneration = ref({
  554 + topic: '',
  555 + style: '专业严谨',
  556 + knowledgeBase: '全部文档'
  557 +});
  558 +
  559 +// 发布平台数据
  560 +const publishPlatforms = ref([
  561 + { id: 1, name: '官网博客', checked: true },
  562 + { id: 2, name: '微信公众号', checked: true },
  563 + { id: 3, name: '今日头条', checked: false }
  564 +]);
  565 +
  566 +// 发布频率数据
  567 +const publishFrequency = ref({
  568 + count: 2,
  569 + period: '工作日发布'
  570 +});
  571 +
  572 +// 最近活动数据
  573 +const recentActivities = ref([
  574 + {
  575 + id: 1,
  576 + description: '生成了2篇关于"夏季促销"的软文',
  577 + time: '今天 09:45',
  578 + bgClass: 'bg-primary/10 flex items-center justify-center text-primary flex-shrink-0',
  579 + iconClass: 'fa-file-text-o'
  580 + },
  581 + {
  582 + id: 2,
  583 + description: '成功发布3篇文章到官网博客',
  584 + time: '昨天 15:30',
  585 + bgClass: 'bg-success/10 flex items-center justify-center text-success flex-shrink-0',
  586 + iconClass: 'fa-check-circle-o'
  587 + },
  588 + {
  589 + id: 3,
  590 + description: '上传了5份产品手册到知识库',
  591 + time: '昨天 10:15',
  592 + bgClass: 'bg-secondary/10 flex items-center justify-center text-secondary flex-shrink-0',
  593 + iconClass: 'fa-upload'
  594 + },
  595 + {
  596 + id: 4,
  597 + description: '设置了未来7天的发布计划',
  598 + time: '2023-06-12 16:40',
  599 + bgClass: 'bg-warning/10 flex items-center justify-center text-warning flex-shrink-0',
  600 + iconClass: 'fa-calendar'
  601 + },
  602 + {
  603 + id: 5,
  604 + description: '2篇文章发布失败，请检查',
  605 + time: '2023-06-11 08:25',
  606 + bgClass: 'bg-danger/10 flex items-center justify-center text-danger flex-shrink-0',
  607 + iconClass: 'fa-exclamation-circle'
  608 + }
  609 +]);
  610 +
  611 +// 知识库文档数据
  612 +const knowledgeDocs = ref([
  613 + {
  614 + id: 1,
  615 + name: '2023产品手册.pdf',
  616 + size: '2.4MB',
  617 + date: '2023-05-18',
  618 + iconBgClass: 'bg-primary/10 flex items-center justify-center text-primary',
  619 + iconClass: 'fa-file-pdf-o'
  620 + },
  621 + {
  622 + id: 2,
  623 + name: '行业分析报告.docx',
  624 + size: '1.8MB',
  625 + date: '2023-06-02',
  626 + iconBgClass: 'bg-secondary/10 flex items-center justify-center text-secondary',
  627 + iconClass: 'fa-file-word-o'
  628 + },
  629 + {
  630 + id: 3,
  631 + name: '客户案例数据.xlsx',
  632 + size: '3.2MB',
  633 + date: '2023-06-05',
  634 + iconBgClass: 'bg-warning/10 flex items-center justify-center text-warning',
  635 + iconClass: 'fa-file-excel-o'
  636 + },
  637 + {
  638 + id: 4,
  639 + name: '产品介绍.pptx',
  640 + size: '5.7MB',
  641 + date: '2023-06-10',
  642 + iconBgClass: 'bg-success/10 flex items-center justify-center text-success',
  643 + iconClass: 'fa-file-powerpoint-o'
  644 + }
  645 +]);
  646 +
  647 +// 待发布文章数据
  648 +const pendingArticles = ref([
  649 + {
  650 + id: 1,
  651 + title: '2023夏季新品发布会亮点回顾',
  652 + platforms: [
  653 + { id: 1, name: '官网博客', badgeClass: 'bg-blue-50 text-blue-600' }
  654 + ],
  655 + publishTime: '2023-06-15 10:00'
  656 + },
  657 + {
  658 + id: 2,
  659 + title: '如何选择适合您的产品解决方案',
  660 + platforms: [
  661 + { id: 2, name: '微信公众号', badgeClass: 'bg-green-50 text-green-600' }
  662 + ],
  663 + publishTime: '2023-06-15 15:30'
  664 + },
  665 + {
  666 + id: 3,
  667 + title: '行业趋势分析：未来五年发展预测',
  668 + platforms: [
  669 + { id: 1, name: '官网博客', badgeClass: 'bg-blue-50 text-blue-600' },
  670 + { id: 3, name: '今日头条', badgeClass: 'bg-orange-50 text-orange-600' }
  671 + ],
  672 + publishTime: '2023-06-16 09:30'
  673 + }
  674 +]);
  675 +
  676 +// 新文章表单数据
  677 +const newArticle = ref({
  678 + title: '',
  679 + content: '',
  680 + category: '产品介绍',
  681 + publishTime: '',
  682 + seo: {
  683 + keywords: '',
  684 + description: ''
  685 + }
  686 +});
  687 +
  688 +// 新文章发布平台
  689 +const newArticlePlatforms = ref([
  690 + { id: 1, name: '官网博客', checked: true },
  691 + { id: 2, name: '微信公众号', checked: true },
  692 + { id: 3, name: '今日头条', checked: false },
  693 + { id: 4, name: '微博', checked: false }
  694 +]);
  695 +
  696 +// 新知识库文档数据
  697 +const newKnowledgeDoc = ref({
  698 + title: '',
  699 + category: '产品手册',
  700 + fileName: ''
  701 +});
  702 +
  703 +// 方法
  704 +const toggleUserDropdown = () => {
  705 + userDropdownOpen.value = !userDropdownOpen.value;
  706 +};
  707 +
  708 +const toggleMobileMenu = () => {
  709 + mobileMenuOpen.value = !mobileMenuOpen.value;
  710 +};
  711 +
  712 +const openModal = (modalId) => {
  713 + activeModal.value = modalId;
  714 + // 设置默认发布时间为当前时间加1小时
  715 + if (modalId === 'add-article-modal') {
  716 + const now = new Date();
  717 + now.setHours(now.getHours() + 1);
  718 + newArticle.value.publishTime = now.toISOString().slice(0, 16);
  719 + }
  720 +};
  721 +
  722 +const closeModal = () => {
  723 + activeModal.value = '';
  724 +};
  725 +
  726 +const generateArticle = () => {
  727 + // 生成文章逻辑
  728 + alert(`正在生成关于"${articleGeneration.value.topic}"的${articleGeneration.value.style}风格文章...`);
  729 +};
  730 +
  731 +const setupSchedule = () => {
  732 + // 设置发布计划逻辑
  733 + // const platforms = publishPlatforms.value
  734 + // .filter(p => p.checked)
  735 + // .map(p => p.name)
  736 + // .join(', ');
  737 + // alert(`已设置发布计划：每天${publishFrequency.value.count}篇，发布到${platforms}，${publishFrequency.value.period}`);
  738 + showKnowledgeModal.value = true
  739 +};
  740 +
  741 +const editKnowledgeDoc = (id) => {
  742 + // 编辑知识库文档逻辑
  743 + const doc = knowledgeDocs.value.find(d => d.id === id);
  744 + alert(`编辑文档：${doc.name}`);
  745 +};
  746 +
  747 +const deleteKnowledgeDoc = (id) => {
  748 + // 删除知识库文档逻辑
  749 + const doc = knowledgeDocs.value.find(d => d.id === id);
  750 + if (confirm(`确定要删除文档"${doc.name}"吗？`)) {
  751 + knowledgeDocs.value = knowledgeDocs.value.filter(d => d.id !== id);
  752 + }
  753 +};
  754 +
  755 +const editArticle = (id) => {
  756 + // 编辑文章逻辑
  757 + const article = pendingArticles.value.find(a => a.id === id);
  758 + alert(`编辑文章：${article.title}`);
  759 +};
  760 +
  761 +const adjustArticleTime = (id) => {
  762 + // 调整文章发布时间逻辑
  763 + const article = pendingArticles.value.find(a => a.id === id);
  764 + alert(`调整文章"${article.title}"的发布时间，当前时间：${article.publishTime}`);
  765 +};
  766 +
  767 +const cancelArticle = (id) => {
  768 + // 取消发布文章逻辑
  769 + const article = pendingArticles.value.find(a => a.id === id);
  770 + if (confirm(`确定要取消发布文章"${article.title}"吗？`)) {
  771 + pendingArticles.value = pendingArticles.value.filter(a => a.id !== id);
  772 + }
  773 +};
  774 +
  775 +const saveNewArticle = () => {
  776 + // 保存新文章逻辑
  777 + if (!newArticle.value.title) {
  778 + alert('请输入文章标题');
  779 + return;
  780 + }
  781 +
  782 + if (!newArticle.value.content) {
  783 + alert('请输入文章内容');
  784 + return;
  785 + }
  786 +
  787 + const selectedPlatforms = newArticlePlatforms.value
  788 + .filter(p => p.checked)
  789 + .map(p => ({
  790 + id: p.id,
  791 + name: p.name,
  792 + badgeClass: p.id === 1 ? 'bg-blue-50 text-blue-600' :
  793 + p.id === 2 ? 'bg-green-50 text-green-600' :
  794 + p.id === 3 ? 'bg-orange-50 text-orange-600' :
  795 + 'bg-purple-50 text-purple-600'
  796 + }));
  797 +
  798 + if (selectedPlatforms.length === 0) {
  799 + alert('请至少选择一个发布平台');
  800 + return;
  801 + }
  802 +
  803 + pendingArticles.value.push({
  804 + id: pendingArticles.value.length + 1,
  805 + title: newArticle.value.title,
  806 + platforms: selectedPlatforms,
  807 + publishTime: newArticle.value.publishTime
  808 + });
  809 +
  810 + // 重置表单并关闭弹窗
  811 + newArticle.value = {
  812 + title: '',
  813 + content: '',
  814 + category: '产品介绍',
  815 + publishTime: '',
  816 + seo: {
  817 + keywords: '',
  818 + description: ''
  819 + }
  820 + };
  821 +
  822 + newArticlePlatforms.value.forEach(p => p.checked = false);
  823 + closeModal();
  824 + alert('文章已保存并加入发布计划');
  825 +};
  826 +
  827 +const handleFileUpload = (e) => {
  828 + // 处理文件上传逻辑
  829 + if (e.target.files && e.target.files[0]) {
  830 + newKnowledgeDoc.value.fileName = e.target.files[0].name;
  831 + }
  832 +};
  833 +
  834 +const saveNewKnowledgeDoc = () => {
  835 + // 保存新知识库文档逻辑
  836 + if (!newKnowledgeDoc.value.title) {
  837 + alert('请输入文档标题');
  838 + return;
  839 + }
  840 +
  841 + if (!newKnowledgeDoc.value.fileName) {
  842 + alert('请上传文档');
  843 + return;
  844 + }
  845 +
  846 + // 确定图标样式
  847 + let iconBgClass, iconClass;
  848 + if (newKnowledgeDoc.value.fileName.endsWith('.pdf')) {
  849 + iconBgClass = 'bg-primary/10 flex items-center justify-center text-primary';
  850 + iconClass = 'fa-file-pdf-o';
  851 + } else if (newKnowledgeDoc.value.fileName.endsWith('.docx') || newKnowledgeDoc.value.fileName.endsWith('.doc')) {
  852 + iconBgClass = 'bg-secondary/10 flex items-center justify-center text-secondary';
  853 + iconClass = 'fa-file-word-o';
  854 + } else if (newKnowledgeDoc.value.fileName.endsWith('.xlsx') || newKnowledgeDoc.value.fileName.endsWith('.xls')) {
  855 + iconBgClass = 'bg-warning/10 flex items-center justify-center text-warning';
  856 + iconClass = 'fa-file-excel-o';
  857 + } else if (newKnowledgeDoc.value.fileName.endsWith('.pptx') || newKnowledgeDoc.value.fileName.endsWith('.ppt')) {
  858 + iconBgClass = 'bg-success/10 flex items-center justify-center text-success';
  859 + iconClass = 'fa-file-powerpoint-o';
  860 + } else {
  861 + iconBgClass = 'bg-gray-100 flex items-center justify-center text-gray-500';
  862 + iconClass = 'fa-file-o';
  863 + }
  864 +
  865 + // 添加到知识库
  866 + knowledgeDocs.value.push({
  867 + id: knowledgeDocs.value.length + 1,
  868 + name: newKnowledgeDoc.value.fileName,
  869 + size: '2.1MB', // 示例大小
  870 + date: new Date().toISOString().split('T')[0],
  871 + iconBgClass,
  872 + iconClass
  873 + });
  874 +
  875 + // 重置表单并关闭弹窗
  876 + newKnowledgeDoc.value = {
  877 + title: '',
  878 + category: '产品手册',
  879 + fileName: ''
  880 + };
  881 +
  882 + document.getElementById('file-upload').value = '';
  883 + closeModal();
  884 + alert('文档已上传到知识库');
  885 +};
  886 +
  887 +// 初始化日期显示
  888 +const formatDate = (date) => {
  889 + const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
  890 + return date.toLocaleDateString('zh-CN', options);
  891 +};
  892 +
  893 +// 初始化图表
  894 +const initChart = () => {
  895 + const ctx = document.getElementById('contentTrendChart').getContext('2d');
  896 +
  897 + // 生成过去7天的日期标签
  898 + const labels = [];
  899 + const today = new Date();
  900 + for (let i = 6; i >= 0; i--) {
  901 + const date = new Date(today);
  902 + date.setDate(today.getDate() - i);
  903 + labels.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
  904 + }
  905 +
  906 + new Chart(ctx, {
  907 + type: 'line',
  908 + data: {
  909 + labels: labels,
  910 + datasets: [
  911 + {
  912 + label: '生成文章',
  913 + data: [12, 19, 15, 20, 18, 25, 22],
  914 + borderColor: '#165DFF',
  915 + backgroundColor: 'rgba(22, 93, 255, 0.1)',
  916 + tension: 0.4,
  917 + fill: true
  918 + },
  919 + {
  920 + label: '发布文章',
  921 + data: [8, 15, 10, 18, 14, 20, 16],
  922 + borderColor: '#36CFC9',
  923 + backgroundColor: 'rgba(54, 207, 201, 0.1)',
  924 + tension: 0.4,
  925 + fill: true
  926 + }
  927 + ]
  928 + },
  929 + options: {
  930 + responsive: true,
  931 + maintainAspectRatio: false,
  932 + plugins: {
  933 + legend: {
  934 + position: 'top',
  935 + }
  936 + },
  937 + scales: {
  938 + y: {
  939 + beginAtZero: true,
  940 + grid: {
  941 + drawBorder: false
  942 + }
  943 + },
  944 + x: {
  945 + grid: {
  946 + display: false
  947 + }
  948 + }
  949 + }
  950 + }
  951 + });
  952 +};
  953 +
  954 +// 挂载时初始化
  955 +onMounted(() => {
  956 + currentDate.value = formatDate(new Date());
  957 + initChart();
  958 +
  959 + // 点击外部关闭下拉菜单
  960 + document.addEventListener('click', (e) => {
  961 + const userMenu = document.getElementById('user-menu-container');
  962 + if (!userMenu.contains(e.target)) {
  963 + userDropdownOpen.value = false;
  964 + }
  965 + });
  966 +});
  967 +
  968 +tailwind.config = {
  969 + theme: {
  970 + extend: {
  971 + colors: {
  972 + primary: '#165DFF',
  973 + secondary: '#36CFC9',
  974 + success: '#52C41A',
  975 + warning: '#FAAD14',
  976 + danger: '#FF4D4F',
  977 + dark: '#1D2129',
  978 + 'gray-light': '#F2F3F5',
  979 + 'gray-medium': '#C9CDD4'
  980 + },
  981 + fontFamily: {
  982 + inter: ['Inter', 'system-ui', 'sans-serif'],
  983 + },
  984 + },
  985 + }
  986 +}
  987 +</script>
  988 +
  989 +<style scoped>
  990 +@import 'tailwindcss/base';
  991 +@import 'tailwindcss/components';
  992 +@import 'tailwindcss/utilities';
  993 +
  994 +@layer utilities {
  995 + .content-auto {
  996 + content-visibility: auto;
  997 + }
  998 +
  999 + .sidebar-item-active {
  1000 + @apply bg-primary/10 text-primary border-l-4 border-primary;
  1001 + }
  1002 +
  1003 + .card-hover {
  1004 + @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  1005 + }
  1006 +
  1007 + .btn-primary {
  1008 + @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg;
  1009 + }
  1010 +
  1011 + .btn-secondary {
  1012 + @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all duration-200;
  1013 + }
  1014 +
  1015 + .scrollbar-hide {
  1016 + scrollbar-width: none;
  1017 + -ms-overflow-style: none;
  1018 + }
  1019 +
  1020 + .scrollbar-hide::-webkit-scrollbar {
  1021 + display: none;
  1022 + }
  1023 +
  1024 + .dropdown-active {
  1025 + @apply opacity-100 visible translate-y-0;
  1026 + }
  1027 +
  1028 + .modal-active {
  1029 + @apply opacity-100 visible;
  1030 + }
  1031 +
  1032 + .modal-content-active {
  1033 + @apply opacity-100 translate-y-0;
  1034 + }
  1035 +}
  1036 +
  1037 +.btn-primary {
  1038 + background-color: rgb(0, 119, 255);
  1039 +}
  1040 +</style>
  1 +<template>
  2 + <div class="bg-light text-dark font-sans min-h-screen">
  3 + <!-- 顶部导航栏 -->
  4 + <header class="bg-white border-b border-neutral-200 sticky top-0 z-50 transition-all duration-300 shadow-sm">
  5 + <div class="container mx-auto px-4 h-16 flex items-center justify-between">
  6 + <div class="flex items-center space-x-2">
  7 + <div
  8 + class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center shadow-md shadow-primary/20">
  9 + <i class="fa fa-robot text-white text-xl"></i>
  10 + </div>
  11 + <h1 class="text-xl font-bold text-dark">AI工贸内容自动化平台</h1>
  12 + </div>
  13 +
  14 + <!-- 主导航 -->
  15 + <nav class="hidden md:flex items-center space-x-8">
  16 + <a href="#" class="text-primary font-medium flex items-center relative group">
  17 + <i class="fa fa-file-text-o mr-1.5"></i> 内容创作
  18 + <span
  19 + class="absolute -bottom-6 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
  20 + </a>
  21 + <a href="#"
  22 + class="text-neutral-500 hover:text-primary transition-custom flex items-center relative group">
  23 + <i class="fa fa-calendar-check-o mr-1.5"></i> 自动化任务
  24 + <span
  25 + class="absolute -bottom-6 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
  26 + </a>
  27 + <a href="#"
  28 + class="text-neutral-500 hover:text-primary transition-custom flex items-center relative group">
  29 + <i class="fa fa-bar-chart mr-1.5"></i> 数据分析
  30 + <span
  31 + class="absolute -bottom-6 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
  32 + </a>
  33 + <a href="#"
  34 + class="text-neutral-500 hover:text-primary transition-custom flex items-center relative group">
  35 + <i class="fa fa-cog mr-1.5"></i> 设置
  36 + <span
  37 + class="absolute -bottom-6 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
  38 + </a>
  39 + </nav>
  40 +
  41 + <!-- 用户区域 -->
  42 + <div class="flex items-center space-x-4">
  43 + <button
  44 + class="text-neutral-500 hover:text-primary transition-custom relative p-2 rounded-full hover:bg-neutral-100">
  45 + <i class="fa fa-bell-o text-xl"></i>
  46 + <span
  47 + class="absolute -top-1 -right-1 w-4 h-4 bg-secondary rounded-full text-white text-xs flex items-center justify-center animate-pulse">3</span>
  48 + </button>
  49 + <div class="flex items-center space-x-2 group relative">
  50 + <div
  51 + class="w-8 h-8 rounded-full bg-neutral-200 overflow-hidden border-2 border-transparent group-hover:border-primary transition-custom">
  52 + <img src="https://picsum.photos/200/200" alt="用户头像" class="w-full h-full object-cover">
  53 + </div>
  54 + <span class="hidden md:inline text-sm font-medium">张经理</span>
  55 + <i
  56 + class="fa fa-angle-down text-xs text-neutral-400 group-hover:text-primary transition-custom"></i>
  57 +
  58 + <!-- 用户下拉菜单 -->
  59 + <div
  60 + class="absolute right-0 top-full mt-2 w-48 bg-white rounded-lg shadow-elevated border border-neutral-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 z-50">
  61 + <div class="p-3 border-b border-neutral-100">
  62 + <p class="font-medium text-sm">张经理</p>
  63 + <p class="text-xs text-neutral-500">zhang@example.com</p>
  64 + </div>
  65 + <div class="py-1">
  66 + <a href="#"
  67 + class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 hover:text-primary transition-custom">
  68 + <i class="fa fa-user-o mr-2"></i>个人资料
  69 + </a>
  70 + <a href="#"
  71 + class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 hover:text-primary transition-custom">
  72 + <i class="fa fa-cog mr-2"></i>账户设置
  73 + </a>
  74 + <a href="#"
  75 + class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 hover:text-primary transition-custom">
  76 + <i class="fa fa-question-circle-o mr-2"></i>帮助中心
  77 + </a>
  78 + <a href="#"
  79 + class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-custom">
  80 + <i class="fa fa-sign-out mr-2"></i>退出登录
  81 + </a>
  82 + </div>
  83 + </div>
  84 + </div>
  85 + </div>
  86 + </div>
  87 + </header>
  88 +
  89 + <main class="container mx-auto px-4 py-6 max-w-7xl">
  90 + <!-- 页面标题与状态 -->
  91 + <div class="mb-8">
  92 + <div class="flex flex-col md:flex-row md:items-center md:justify-between">
  93 + <div>
  94 + <h2
  95 + class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-1 bg-clip-text text-transparent bg-gradient-to-r from-dark to-neutral-500">
  96 + 智能文章创作中心</h2>
  97 + <p class="text-neutral-500">高效生成符合Google标准的工贸企业专业内容</p>
  98 + </div>
  99 + <div class="mt-4 md:mt-0 flex items-center space-x-3">
  100 + <div
  101 + class="flex items-center text-sm text-neutral-500 bg-white px-3 py-1.5 rounded-full border border-neutral-200">
  102 + <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
  103 + 系统正常运行中
  104 + </div>
  105 + <button
  106 + class="text-primary hover:text-primary/80 text-sm font-medium flex items-center bg-primary/5 px-3 py-1.5 rounded-full transition-custom hover:bg-primary/10">
  107 + <i class="fa fa-question-circle mr-1"></i> 帮助
  108 + </button>
  109 + </div>
  110 + </div>
  111 + </div>
  112 +
  113 + <!-- 主内容区 -->
  114 + <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  115 + <!-- 左侧功能区 -->
  116 + <div class="lg:col-span-1 space-y-6">
  117 + <!-- 内容创作卡片 -->
  118 + <div
  119 + class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-5 border border-neutral-200 card-gradient">
  120 + <h3 class="text-lg font-semibold mb-4 flex items-center">
  121 + <i class="fa fa-pencil-square-o text-primary mr-2"></i>内容创作设置
  122 + </h3>
  123 +
  124 + <!-- 关键词输入 -->
  125 + <div class="mb-5">
  126 + <label class="block text-sm font-medium text-neutral-500 mb-1.5">核心关键词</label>
  127 + <div class="relative">
  128 + <input type="text" placeholder="输入产品名、行业术语等"
  129 + class="w-full px-3.5 py-2.5 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom"
  130 + v-model="form.keywords">
  131 + <button
  132 + class="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-primary transition-custom">
  133 + <i class="fa fa-times-circle"></i>
  134 + </button>
  135 + </div>
  136 + </div>
  137 +
  138 + <!-- 模型选择 -->
  139 + <div class="mb-5">
  140 + <label class="block text-sm font-medium text-neutral-500 mb-1.5">AI模型选择</label>
  141 + <select
  142 + class="w-full px-3.5 py-2.5 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom appearance-none bg-white"
  143 + v-model="form.model">
  144 + <option v-for="model in models" :key="model" :value="model">{{ model }}</option>
  145 + </select>
  146 + </div>
  147 +
  148 + <!-- 文章类型选择 -->
  149 + <div class="mb-5">
  150 + <label class="block text-sm font-medium text-neutral-500 mb-1.5">文章类型</label>
  151 + <select
  152 + class="w-full px-3.5 py-2.5 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom appearance-none bg-white"
  153 + v-model="form.articleType">
  154 + <option v-for="type in articleTypes" :key="type" :value="type">{{ type }}</option>
  155 + </select>
  156 + </div>
  157 +
  158 + <!-- 话题参考来源 -->
  159 + <div class="mb-5">
  160 + <label class="block text-sm font-medium text-neutral-500 mb-1.5">话题参考来源</label>
  161 + <div class="flex flex-wrap gap-2">
  162 + <label v-for="source in sources" :key="source.name"
  163 + class="inline-flex flex items-center px-3 py-1.5 border border-neutral-300 rounded-lg cursor cursor-pointer hover:border-primary transition-custom bg-white transition-custom">
  164 + <input type="checkbox" class="mr-2 accent-primary" v-model="source.checked">
  165 + <span class="text-sm">{{ source.name }}</span>
  166 + </label>
  167 + </div>
  168 + </div>
  169 +
  170 + <!-- 语言选择 -->
  171 + <div class="mb-5">
  172 + <label class="block text-sm font-medium text-neutral-500 mb-1.5">目标语言</label>
  173 + <select
  174 + class="w-full px-3.5 py-2.5 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-custom appearance-none bg-white"
  175 + v-model="form.language">
  176 + <option v-for="lang in languages" :key="lang" :value="lang">{{ lang }}</option>
  177 + </select>
  178 + </div>
  179 +
  180 + <!-- 文章应用平台 -->
  181 + <div class="mb-5">
  182 + <label class="block text-sm font-medium text-neutral-500 mb-1.5">文章应用平台</label>
  183 + <div class="grid grid-cols-2 gap-2">
  184 + <label v-for="platform in platforms" :key="platform"
  185 + class="inline-flex items-center px-3 py-2 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom bg-white">
  186 + <input type="radio" name="platform" class="mr-2 accent-primary" :value="platform"
  187 + v-model="form.selectedPlatform">
  188 + <span class="text-sm">{{ platform }}</span>
  189 + </label>
  190 + </div>
  191 + </div>
  192 +
  193 + <!-- 文章长度 -->
  194 + <div class="mb-5">
  195 + <div class="flex justify-between items-center mb-1.5">
  196 + <label class="block text-sm font-medium text-neutral-500">文章长度</label>
  197 + <span class="text-xs font-medium text-primary">{{ form.articleLength }}字</span>
  198 + </div>
  199 + <input type="range" min="300" max="2000" step="100"
  200 + class="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer accent-primary"
  201 + v-model.number="form.articleLength">
  202 + <div class="flex justify-between mt-1">
  203 + <span class="text-xs text-neutral-500">短</span>
  204 + <span class="text-xs text-neutral-500">中</span>
  205 + <span class="text-xs text-neutral-500">长</span>
  206 + </div>
  207 + </div>
  208 +
  209 + <!-- 生成按钮 -->
  210 + <button
  211 + class="w-full bg-primary hover:bg-primary/90 text-white py-2.5 px-4 rounded-lg font-medium transition-custom flex items-center justify-center shadow-md shadow-primary/20 hover:shadow-lg hover:shadow-primary/30 transform hover:-translate-y-0.5 active:translate-y-0"
  212 + @click="generateArticle" :disabled="isGenerating">
  213 + <i :class="isGenerating ? 'fa fa-circle-o-notch fa-spin mr-2' : 'fa fa-magic mr-2'"></i>
  214 + {{ isGenerating ? '生成中...' : '生成文章' }}
  215 + </button>
  216 + </div>
  217 +
  218 + <!-- 自动化任务卡片 -->
  219 + <div
  220 + class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-5 border border-neutral-200">
  221 + <div class="flex justify-between items-center mb-4">
  222 + <h3 class="text-lg font-semibold flex items-center">
  223 + <i class="fa fa-calendar-plus-o text-secondary mr-2"></i>自动化任务
  224 + </h3>
  225 + <button
  226 + class="text-xs bg-secondary/10 hover:bg-secondary/20 text-secondary px-2.5 py-1 rounded transition-custom transform hover:-translate-y-0.5 active:translate-y-0"
  227 + @click="addNewTask">
  228 + <i class="fa fa-plus mr-1"></i> 新建任务
  229 + </button>
  230 + </div>
  231 +
  232 + <!-- 任务列表 -->
  233 + <div
  234 + class="space-y-3 max-h-64 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-neutral-300 scrollbar-track-transparent">
  235 + <div v-for="task in tasks" :key="task.id"
  236 + class="border border-neutral-200 rounded-lg p-3 hover:border-primary/50 transition-custom hover-lift bg-white">
  237 + <div class="flex justify-between items-start">
  238 + <div>
  239 + <h4 class="font-medium text-sm">{{ task.name }}</h4>
  240 + <p class="text-xs text-neutral-500 mt-0.5">{{ task.schedule }}</p>
  241 + </div>
  242 + <span
  243 + :class="task.status === '运行中' ? 'px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded-full' : 'px-2 py-0.5 text-xs bg-neutral-100 text-neutral-600 rounded-full'">
  244 + {{ task.status }}
  245 + </span>
  246 + </div>
  247 + <div class="flex justify-between items-center mt-2">
  248 + <span class="text-xs text-neutral-500">类型: {{ task.type }}</span>
  249 + <div class="flex space-x-1">
  250 + <button
  251 + class="text-neutral-400 hover:text-primary p-1.5 rounded-full hover:bg-primary/5 transition-custom">
  252 + <i class="fa fa-pencil text-xs"></i>
  253 + </button>
  254 + <button
  255 + class="text-neutral-400 hover:text-red-500 p-1.5 rounded-full hover:bg-red-50 transition-custom">
  256 + <i class="fa fa-trash-o text-xs"></i>
  257 + </button>
  258 + </div>
  259 + </div>
  260 + </div>
  261 + </div>
  262 + </div>
  263 + </div>
  264 +
  265 + <!-- 右侧预览与编辑区 -->
  266 + <div class="lg:col-span-2 space-y-6">
  267 + <!-- 文章预览卡片 -->
  268 + <div
  269 + class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-5 border border-neutral-200">
  270 + <div class="flex flex-wrap justify-between items-center mb-5 gap-3">
  271 + <h3 class="text-lg font-semibold flex items-center">
  272 + <i class="fa fa-eye text-primary mr-2"></i>文章预览
  273 + </h3>
  274 + <div class="flex space-x-2">
  275 + <button
  276 + class="text-neutral-500 hover:text-primary p-2 rounded-full hover:bg-neutral-100 transition-custom transform hover:-translate-y-0.5 active:translate-y-0">
  277 + <i class="fa fa-expand"></i>
  278 + </button>
  279 + <button
  280 + class="text-neutral-500 hover:text-primary p-2 rounded-full hover:bg-neutral-100 transition-custom transform hover:-translate-y-0.5 active:translate-y-0">
  281 + <i class="fa fa-refresh"></i>
  282 + </button>
  283 + <button
  284 + class="text-neutral-500 hover:text-primary p-2 rounded-full hover:bg-neutral-100 transition-custom transform hover:-translate-y-0.5 active:translate-y-0">
  285 + <i class="fa fa-cog"></i>
  286 + </button>
  287 + </div>
  288 + </div>
  289 +
  290 + <!-- 文章内容预览 -->
  291 + <div class="border border-neutral-200 rounded-lg bg-neutral-100/50 p-6 h-96 overflow-y-auto scrollbar-thin scrollbar-thumb-neutral-300 scrollbar-track-transparent"
  292 + :class="{ 'ring-2 ring-primary/30': showPreviewHighlight }">
  293 + <div class="flex flex-wrap gap-2 mb-4">
  294 + <span class="px-2.5 py-0.5 text-xs bg-primary/10 text-primary rounded-full">行业分析</span>
  295 + <span
  296 + class="px-2.5 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">SEO优化</span>
  297 + <span class="px-2.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">英语</span>
  298 + </div>
  299 +
  300 + <h1 class="text-2xl font-bold mb-5">不锈钢厨具跨境出口市场分析</h1>
  301 +
  302 + <p class="mb-4 text-neutral-700 leading-relaxed">
  303 + 随着全球经济的复苏，不锈钢厨具的跨境出口市场呈现出稳步增长的趋势。消费者对于高品质、耐用性强的厨房用品需求持续上升，特别是在欧美市场。
  304 + </p>
  305 +
  306 + <p class="mb-6 text-neutral-700 leading-relaxed">
  307 + 根据最新的行业报告，北美和欧洲仍然是不锈钢厨具的主要消费市场，尤其是美国、德国和法国等发达国家。这些地区的消费者更注重产品质量和环保性能，愿意为高品质产品支付溢价。
  308 + </p>
  309 +
  310 + <div
  311 + class="bg-primary/5 border-l-4 border-primary p-4 rounded-r-lg mb-6 transform hover:translate-x-1 transition-transform">
  312 + <p class="text-sm text-primary/80 italic">
  313 + 跨境电商平台的数据显示，具有环保特性和多功能设计的不锈钢厨具更受消费者青睐，这类产品的复购率比普通产品高出25%，客户评价也普遍高出0.5-1个星级。
  314 + </p>
  315 + </div>
  316 +
  317 + <h2 class="text-xl font-semibold mb-3 mt-6">2023年市场趋势分析</h2>
  318 +
  319 + <ul class="space-y-3 mb-6 pl-1">
  320 + <li class="flex items-start group">
  321 + <span
  322 + class="w-5 h-5 rounded-full bg-primary text-white text-xs flex items-center justify-center mt-0.5 mr-2 flex-shrink-0 group-hover:scale-110 transition-transform"></span>
  323 + <p class="text-neutral-700 leading-relaxed">
  324 + 可持续发展理念推动环保型不锈钢厨具需求增长，可回收材料制成的产品销量同比增长18%，尤其在欧洲市场表现突出。</p>
  325 + </li>
  326 + <li class="flex items-start group">
  327 + <span
  328 + class="w-5 h-5 rounded-full bg-primary text-white text-xs flex items-center justify-center mt-0.5 mr-2 flex-shrink-0 group-hover:scale-110 transition-transform"></span>
  329 + <p class="text-neutral-700 leading-relaxed">
  330 + 智能化成为新的产品发展方向，智能不锈钢厨具的出口量同比增长30%，特别是带有温度控制和自动清洁功能的产品在北美市场供不应求。</p>
  331 + </li>
  332 + <li class="flex items-start group">
  333 + <span
  334 + class="w-5 h-5 rounded-full bg-primary text-white text-xs flex items-center justify-center mt-0.5 mr-2 flex-shrink-0 group-hover:scale-110 transition-transform"></span>
  335 + <p class="text-neutral-700 leading-relaxed">
  336 + 定制化需求上升，针对不同地区饮食习惯设计的专用厨具更受欢迎，例如亚洲市场偏好的小型炊具和欧洲市场偏好的大型烤箱用具。</p>
  337 + </li>
  338 + </ul>
  339 +
  340 + <!-- 新增内容 - 市场数据图表 -->
  341 + <div class="mt-8 bg-white p-4 rounded-lg border border-neutral-200 shadow-sm">
  342 + <h3 class="text-base font-medium mb-3">主要出口市场占比</h3>
  343 + <div class="h-48">
  344 + <!-- 这里是图表占位 -->
  345 + <div class="w-full h-full flex items-end justify-around gap-2">
  346 + <div class="flex flex-col items-center w-1/5">
  347 + <div class="bg-primary rounded-t-lg w-full" style="height: 85%"></div>
  348 + <span class="text-xs mt-1">北美 35%</span>
  349 + </div>
  350 + <div class="flex flex-col items-center w-1/5">
  351 + <div class="bg-secondary rounded-t-lg w-full" style="height: 70%"></div>
  352 + <span class="text-xs mt-1">欧洲 30%</span>
  353 + </div>
  354 + <div class="flex flex-col items-center w-1/5">
  355 + <div class="bg-green-500 rounded-t-lg w-full" style="height: 45%"></div>
  356 + <span class="text-xs mt-1">东南亚 18%</span>
  357 + </div>
  358 + <div class="flex flex-col items-center w-1/5">
  359 + <div class="bg-purple-500 rounded-t-lg w-full" style="height: 30%"></div>
  360 + <span class="text-xs mt-1">中东 12%</span>
  361 + </div>
  362 + <div class="flex flex-col items-center w-1/5">
  363 + <div class="bg-yellow-500 rounded-t-lg w-full" style="height: 20%"></div>
  364 + <span class="text-xs mt-1">其他 5%</span>
  365 + </div>
  366 + </div>
  367 + </div>
  368 + </div>
  369 + </div>
  370 + </div>
  371 +
  372 + <!-- 编辑与发布工具栏 -->
  373 + <div
  374 + class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-5 border border-neutral-200">
  375 + <h3 class="text-lg font-semibold mb-4">内容操作</h3>
  376 +
  377 + <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
  378 + <button
  379 + class="border border-neutral-200 rounded-lg p-3 text-center hover:border-primary hover:bg-primary/5 transition-custom transform hover:-translate-y-0.5 active:translate-y-0">
  380 + <i class="fa fa-paragraph text-primary block mb-1.5"></i>
  381 + <span class="text-sm">段落调整</span>
  382 + </button>
  383 + <button
  384 + class="border border-neutral-200 rounded-lg p-3 text-center hover:border-primary hover:bg-primary/5 transition-custom transform hover:-translate-y-0.5 active:translate-y-0">
  385 + <i class="fa fa-key text-primary block mb-1.5"></i>
  386 + <span class="text-sm">关键词优化</span>
  387 + </button>
  388 + <button
  389 + class="border border-neutral-200 rounded-lg p-3 text-center hover:border-primary hover:bg-primary/5 transition-custom transform hover:-translate-y-0.5 active:translate-y-0">
  390 + <i class="fa fa-language text-primary block mb-1.5"></i>
  391 + <span class="text-sm">多语言翻译</span>
  392 + </button>
  393 + <button
  394 + class="border border-neutral-200 rounded-lg p-3 text-center hover:border-primary hover:bg-primary/5 transition-custom transform hover:-translate-y-0.5 active:translate-y-0">
  395 + <i class="fa fa-file-pdf-o text-primary block mb-1.5"></i>
  396 + <span class="text-sm">导出文档</span>
  397 + </button>
  398 + </div>
  399 +
  400 + <div class="flex flex-col sm:flex-row gap-3">
  401 + <button
  402 + class="flex-1 bg-white border border-secondary text-secondary hover:bg-secondary/5 font-medium py-2.5 px-4 rounded-lg transition-custom flex items-center justify-center transform hover:-translate-y-0.5 active:translate-y-0">
  403 + <i class="fa fa-calendar mr-2"></i> 添加到自动化任务
  404 + </button>
  405 + <button
  406 + class="flex-1 bg-secondary hover:bg-secondary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-custom flex items-center justify-center shadow-md shadow-secondary/20 hover:shadow-lg hover:shadow-secondary/30 transform hover:-translate-y-0.5 active:translate-y-0">
  407 + <i class="fa fa-paper-plane mr-2"></i> 发布到平台
  408 + </button>
  409 + </div>
  410 + </div>
  411 +
  412 + <!-- 内容质量分析 -->
  413 + <div
  414 + class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-5 border border-neutral-200">
  415 + <h3 class="text-lg font-semibold mb-4">内容质量分析</h3>
  416 +
  417 + <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  418 + <!-- 原创度 -->
  419 + <div
  420 + class="border border-neutral-200 rounded-lg p-4 hover:border-green-500/50 transition-custom group">
  421 + <div class="flex justify-between items-start mb-2">
  422 + <h4 class="text-sm font-medium">原创度评分</h4>
  423 + <span
  424 + class="text-lg font-bold text-green-600 group-hover:scale-110 transition-transform">96%</span>
  425 + </div>
  426 + <div class="w-full bg-neutral-200 rounded-full h-2 overflow-hidden">
  427 + <div class="bg-green-600 h-2 rounded-full"
  428 + :style="{ width: '96%', transition: 'width 1s ease-out' }"></div>
  429 + </div>
  430 + <p class="text-xs text-neutral-500 mt-2">符合Google原创性标准</p>
  431 + </div>
  432 +
  433 + <!-- SEO评分 -->
  434 + <div
  435 + class="border border-neutral-200 rounded-lg p-4 hover:border-primary/50 transition-custom group">
  436 + <div class="flex justify-between items-start mb-2">
  437 + <h4 class="text-sm font-medium">SEO优化评分</h4>
  438 + <span
  439 + class="text-lg font-bold text-primary group-hover:scale-110 transition-transform">92/100</span>
  440 + </div>
  441 + <div class="w-full bg-neutral-200 rounded-full h-2 overflow-hidden">
  442 + <div class="bg-primary h-2 rounded-full"
  443 + :style="{ width: '92%', transition: 'width 1s ease-out' }"></div>
  444 + </div>
  445 + <p class="text-xs text-neutral-500 mt-2">关键词密度: 2.3% (最佳范围)</p>
  446 + </div>
  447 +
  448 + <!-- 可读性 -->
  449 + <div
  450 + class="border border-neutral-200 rounded-lg p-4 hover:border-secondary/50 transition-custom group">
  451 + <div class="flex justify-between items-start mb-2">
  452 + <h4 class="text-sm font-medium">可读性评分</h4>
  453 + <span
  454 + class="text-lg font-bold text-secondary group-hover:scale-110 transition-transform">87/100</span>
  455 + </div>
  456 + <div class="w-full bg-neutral-200 rounded-full h-2 overflow-hidden">
  457 + <div class="bg-secondary h-2 rounded-full"
  458 + :style="{ width: '87%', transition: 'width 1s ease-out' }"></div>
  459 + </div>
  460 + <p class="text-xs text-neutral-500 mt-2">适合目标市场阅读水平</p>
  461 + </div>
  462 + </div>
  463 +
  464 + <!-- 新增：详细分析按钮 -->
  465 + <div class="mt-4 text-center">
  466 + <button
  467 + class="text-primary hover:text-primary/80 text-sm font-medium flex items-center mx-auto transition-custom">
  468 + <i class="fa fa-bar-chart mr-1.5"></i> 查看详细分析报告
  469 + <i class="fa fa-angle-right ml-1 text-xs"></i>
  470 + </button>
  471 + </div>
  472 + </div>
  473 + </div>
  474 + </div>
  475 + </main>
  476 +
  477 + <!-- 页脚 -->
  478 + <footer class="bg-white border-t border-neutral-200 mt-10 py-6">
  479 + <div class="container mx-auto px-4 max-w-7xl">
  480 + <div class="flex flex-col md:flex-row justify-between items-center">
  481 + <div class="flex items-center mb-4 md:mb-0">
  482 + <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center mr-2">
  483 + <i class="fa fa-robot text-white text-sm"></i>
  484 + </div>
  485 + <span class="text-sm text-neutral-500">© 2023 AI工贸内容自动化平台</span>
  486 + </div>
  487 + <div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
  488 + <a href="#" class="text-sm text-neutral-500 hover:text-primary transition-custom">使用条款</a>
  489 + <a href="#" class="text-sm text-neutral-500 hover:text-primary transition-custom">隐私政策</a>
  490 + <a href="#" class="text-sm text-neutral-500 hover:text-primary transition-custom">联系支持</a>
  491 + <a href="#" class="text-sm text-neutral-500 hover:text-primary transition-custom">API文档</a>
  492 + </div>
  493 + </div>
  494 + </div>
  495 + </footer>
  496 + </div>
  497 +</template>
  498 +
  499 +<script>
  500 +import { ref, onMounted, nextTick } from 'vue'
  501 +
  502 +export default {
  503 + name: 'ContentAutomationPlatform',
  504 + setup() {
  505 + // 表单数据
  506 + const form = ref({
  507 + keywords: '不锈钢厨具 跨境出口',
  508 + model: 'GPT-4',
  509 + articleType: '行业趋势分析',
  510 + language: '英语',
  511 + selectedPlatform: '官网',
  512 + articleLength: 800
  513 + })
  514 +
  515 + // 下拉选项数据
  516 + const models = ref(['GPT-4', 'GPT-3.5 Turbo', 'Claude 2', '文心一言', '通义千问'])
  517 + const articleTypes = ref(['产品介绍', '行业趋势分析', '跨境电商Listing', '售后指南'])
  518 + const languages = ref(['英语', '中文', '西班牙语', '法语'])
  519 + const platforms = ref(['官网', '微信公众号', 'LinkedIn', '小红书'])
  520 +
  521 + const sources = ref([
  522 + { name: 'Google', checked: true },
  523 + { name: '百度', checked: true },
  524 + { name: '新闻', checked: false },
  525 + { name: '行业报告', checked: false }
  526 + ])
  527 +
  528 + // 任务数据
  529 + const tasks = ref([
  530 + {
  531 + id: 1,
  532 + name: '每周行业分析',
  533 + schedule: '每周一 9:00 生成',
  534 + status: '运行中',
  535 + type: '行业趋势分析'
  536 + },
  537 + {
  538 + id: 2,
  539 + name: '产品介绍更新',
  540 + schedule: '每月1日 10:00 生成',
  541 + status: '运行中',
  542 + type: '产品介绍'
  543 + },
  544 + {
  545 + id: 3,
  546 + name: '亚马逊Listing优化',
  547 + schedule: '每两周周五 14:00',
  548 + status: '已暂停',
  549 + type: '跨境电商Listing'
  550 + }
  551 + ])
  552 +
  553 + // 状态管理
  554 + const isGenerating = ref(false)
  555 + const showPreviewHighlight = ref(false)
  556 +
  557 + // 方法
  558 + const generateArticle = () => {
  559 + isGenerating.value = true
  560 +
  561 + // 模拟生成过程
  562 + setTimeout(() => {
  563 + isGenerating.value = false
  564 +
  565 + // 生成完成后，给文章预览区域添加高亮动画
  566 + showPreviewHighlight.value = true
  567 + setTimeout(() => {
  568 + showPreviewHighlight.value = false
  569 + }, 2000)
  570 + }, 2000)
  571 + }
  572 +
  573 + const addNewTask = () => {
  574 + alert('新建自动化任务面板将在这里打开')
  575 + }
  576 +
  577 + // 页面滚动效果
  578 + const handleScroll = () => {
  579 + const header = document.querySelector('header')
  580 + if (window.scrollY > 10) {
  581 + header.classList.add('shadow-md')
  582 + header.classList.remove('shadow-sm')
  583 + } else {
  584 + header.classList.remove('shadow-md')
  585 + header.classList.add('shadow-sm')
  586 + }
  587 + }
  588 +
  589 + // 按钮点击效果
  590 + const handleButtonClick = (event) => {
  591 + const button = event.target.closest('button')
  592 + if (button) {
  593 + button.classList.add('scale-98')
  594 + setTimeout(() => {
  595 + button.classList.remove('scale-98')
  596 + }, 150)
  597 + }
  598 + }
  599 +
  600 + onMounted(() => {
  601 + window.addEventListener('scroll', handleScroll)
  602 + document.addEventListener('click', handleButtonClick)
  603 +
  604 + // 为评分条添加动画效果
  605 + setTimeout(() => {
  606 + const progressBars = document.querySelectorAll('.rounded-full.h-2:not(.bg-neutral-200)')
  607 + progressBars.forEach(bar => {
  608 + const width = bar.style.width
  609 + bar.style.width = '0%'
  610 + setTimeout(() => {
  611 + bar.style.width = width
  612 + }, 300)
  613 + })
  614 + }, 500)
  615 + })
  616 +
  617 + return {
  618 + form,
  619 + models,
  620 + articleTypes,
  621 + languages,
  622 + platforms,
  623 + sources,
  624 + tasks,
  625 + isGenerating,
  626 + showPreviewHighlight,
  627 + generateArticle,
  628 + addNewTask
  629 + }
  630 + }
  631 +}
  632 +</script>
  633 +
  634 +<style>
  635 +@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');
  636 +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  637 +
  638 +:root {
  639 + --primary: #165DFF;
  640 + --secondary: #FF7D00;
  641 + --dark: #1D2939;
  642 + --light: #F9FAFB;
  643 + --neutral-100: #F3F4F6;
  644 + --neutral-200: #E5E7EB;
  645 + --neutral-300: #D1D5DB;
  646 + --neutral-400: #9CA3AF;
  647 + --neutral-500: #6B7280;
  648 + --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  649 + --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  650 + --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  651 +}
  652 +
  653 +body {
  654 + font-family: 'Inter', 'system-ui', 'sans-serif';
  655 +}
  656 +
  657 +.content-auto {
  658 + content-visibility: auto;
  659 +}
  660 +
  661 +.text-balance {
  662 + text-wrap: balance;
  663 +}
  664 +
  665 +.transition-custom {
  666 + transition: all 0.25s ease;
  667 +}
  668 +
  669 +.hover-lift:hover {
  670 + transform: translateY(-0.25rem);
  671 + transition: all 0.3s ease;
  672 +}
  673 +
  674 +.card-gradient {
  675 + background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(22, 93, 255, 0.03) 100%);
  676 +}
  677 +
  678 +/* 滚动条样式 */
  679 +.scrollbar-thin::-webkit-scrollbar {
  680 + width: 6px;
  681 +}
  682 +
  683 +.scrollbar-thin::-webkit-scrollbar-track {
  684 + background: transparent;
  685 +}
  686 +
  687 +.scrollbar-thin::-webkit-scrollbar-thumb {
  688 + background: var(--neutral-300);
  689 + border-radius: 3px;
  690 +}
  691 +
  692 +.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  693 + background: var(--neutral-400);
  694 +}
  695 +</style>
  1 +/** @type {import('tailwindcss').Config} */
  2 +export default {
  3 + mode: 'jit',
  4 + content: [
  5 + "./index.html",
  6 + "./src/**/*.{vue,js,ts,jsx,tsx}",
  7 + ],
  8 + theme: {
  9 + extend: {
  10 + colors: {
  11 + primary: '#3B82F6', // Example blue color
  12 + }
  13 + }
  14 + },
  15 + plugins: [],
  16 +}
  17 +
  1 +import { fileURLToPath, URL } from 'node:url'
  2 +
  3 +import { defineConfig } from 'vite'
  4 +import vue from '@vitejs/plugin-vue'
  5 +import vueDevTools from 'vite-plugin-vue-devtools'
  6 +
  7 +// https://vite.dev/config/
  8 +export default defineConfig({
  9 + plugins: [
  10 + vue(),
  11 + vueDevTools(),
  12 + ],
  13 + resolve: {
  14 + alias: {
  15 + '@': fileURLToPath(new URL('./src', import.meta.url))
  16 + },
  17 + },
  18 +})