**变更内容**: - 移除 index.html 中的 CDN 链接 (https://cdn.tailwindcss.com) - 本地安装 Tailwind CSS、PostCSS 和 Autoprefixer - 创建 tailwind.config.js 配置文件 - 创建 postcss.config.js 配置文件 - 创建 src/styles/tailwind.css 入口文件 - 在 main.js 中导入 Tailwind CSS **优势**: - ✅ 完全离线运行,不依赖外部网络资源 - ✅ 更快的加载速度(无需从 CDN 下载) - ✅ 更稳定的构建过程 - ✅ 可自定义 Tailwind 配置 **依赖变化**: - 新增 devDependencies: tailwindcss, postcss, autoprefixer Co-Authored-By: Claude <noreply@anthropic.com>
35 lines
1.6 KiB
HTML
35 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI 写作工坊 - 结构化生成工具</title>
|
|
|
|
<!-- 设计系统样式 -->
|
|
<link rel="stylesheet" href="/src/styles/design-tokens.css">
|
|
<link rel="stylesheet" href="/src/styles/components.css">
|
|
<link rel="stylesheet" href="/src/styles/utilities.css">
|
|
|
|
<style>
|
|
/* 自定义滚动条样式,适配深色主题 */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #1e293b; }
|
|
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #64748b; }
|
|
|
|
/* Markdown 内容样式覆盖 */
|
|
.prose h1, .prose h2, .prose h3 { color: #e2e8f0; margin-top: 1.5em; margin-bottom: 0.8em; }
|
|
.prose p { margin-bottom: 1.2em; line-height: 1.75; color: #cbd5e1; }
|
|
.prose ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1.2em; color: #cbd5e1; }
|
|
.prose strong { color: #60a5fa; font-weight: 600; }
|
|
.prose blockquote { border-left-color: #3b82f6; background: #1e293b; padding: 0.5rem 1rem; font-style: italic; }
|
|
.prose code { background: #334155; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; color: #f8fafc; }
|
|
|
|
[v-cloak] { display: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-900 text-slate-200 h-screen overflow-hidden font-sans">
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html> |