Initial commit
This commit is contained in:
tianyaxiang
parent
296ca32039
commit
a9828c93d0
60
.gitignore
vendored
Normal file
60
.gitignore
vendored
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env*.local
|
||||||
|
.env
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
|
||||||
|
# OS generated files
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
ehthumbs.db
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*.log
|
||||||
|
*.tmp
|
||||||
|
*.temp
|
||||||
|
|
||||||
|
# Cache directories
|
||||||
|
.cache/
|
||||||
|
.npm/
|
||||||
|
.pnpm-store/
|
||||||
51
package.json
Normal file
51
package.json
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"name": "neurapress",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@bytemd/plugin-gfm": "^1.21.0",
|
||||||
|
"@bytemd/plugin-highlight": "^1.21.0",
|
||||||
|
"@bytemd/react": "^1.21.0",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.5",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.5",
|
||||||
|
"@radix-ui/react-label": "^2.1.1",
|
||||||
|
"@radix-ui/react-select": "^2.1.5",
|
||||||
|
"@radix-ui/react-separator": "^1.0.3",
|
||||||
|
"@radix-ui/react-slot": "^1.1.1",
|
||||||
|
"@radix-ui/react-tabs": "^1.1.2",
|
||||||
|
"@radix-ui/react-toggle": "^1.0.3",
|
||||||
|
"@tiptap/extension-image": "^2.2.4",
|
||||||
|
"@tiptap/extension-link": "^2.2.4",
|
||||||
|
"@tiptap/pm": "^2.2.4",
|
||||||
|
"@tiptap/react": "^2.2.4",
|
||||||
|
"@tiptap/starter-kit": "^2.2.4",
|
||||||
|
"@types/marked": "^6.0.0",
|
||||||
|
"bytemd": "^1.21.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^0.474.0",
|
||||||
|
"marked": "^15.0.6",
|
||||||
|
"next": "14.1.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"tailwind-merge": "^2.6.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@shadcn/ui": "^0.0.4",
|
||||||
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
|
"@types/node": "^20.17.16",
|
||||||
|
"@types/react": "^18.2.57",
|
||||||
|
"@types/react-dom": "^18.2.19",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.5.1",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
4174
pnpm-lock.yaml
Normal file
4174
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
203
src/app/globals.css
Normal file
203
src/app/globals.css
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--primary: 222.2 47.4% 11.2%;
|
||||||
|
--primary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--secondary: 210 40% 96.1%;
|
||||||
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
|
||||||
|
--muted: 210 40% 96.1%;
|
||||||
|
--muted-foreground: 215.4 16.3% 46.9%;
|
||||||
|
|
||||||
|
--accent: 210 40% 96.1%;
|
||||||
|
--accent-foreground: 222.2 47.4% 11.2%;
|
||||||
|
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--border: 214.3 31.8% 91.4%;
|
||||||
|
--input: 214.3 31.8% 91.4%;
|
||||||
|
--ring: 222.2 84% 4.9%;
|
||||||
|
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 222.2 84% 4.9%;
|
||||||
|
--foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--card: 222.2 84% 4.9%;
|
||||||
|
--card-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--popover: 222.2 84% 4.9%;
|
||||||
|
--popover-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--primary: 210 40% 98%;
|
||||||
|
--primary-foreground: 222.2 47.4% 11.2%;
|
||||||
|
|
||||||
|
--secondary: 217.2 32.6% 17.5%;
|
||||||
|
--secondary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--muted: 217.2 32.6% 17.5%;
|
||||||
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
|
||||||
|
--accent: 217.2 32.6% 17.5%;
|
||||||
|
--accent-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
--border: 217.2 32.6% 17.5%;
|
||||||
|
--input: 217.2 32.6% 17.5%;
|
||||||
|
--ring: 212.7 26.8% 83.9%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模板样式 */
|
||||||
|
.prose-elegant {
|
||||||
|
--tw-prose-body: #2c3e50;
|
||||||
|
--tw-prose-headings: #16a34a;
|
||||||
|
--tw-prose-links: #3b82f6;
|
||||||
|
--tw-prose-code: #475569;
|
||||||
|
--tw-prose-quotes: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-modern {
|
||||||
|
--tw-prose-body: #374151;
|
||||||
|
--tw-prose-headings: #111827;
|
||||||
|
--tw-prose-links: #2563eb;
|
||||||
|
--tw-prose-code: #374151;
|
||||||
|
--tw-prose-quotes: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-creative {
|
||||||
|
--tw-prose-body: #4a5568;
|
||||||
|
--tw-prose-headings: #2d3748;
|
||||||
|
--tw-prose-links: #4299e1;
|
||||||
|
--tw-prose-code: #4a5568;
|
||||||
|
--tw-prose-quotes: #718096;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-minimal {
|
||||||
|
--tw-prose-body: #1a1a1a;
|
||||||
|
--tw-prose-headings: #000000;
|
||||||
|
--tw-prose-links: #0066cc;
|
||||||
|
--tw-prose-code: #1a1a1a;
|
||||||
|
--tw-prose-quotes: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 预览内容样式 */
|
||||||
|
.preview-content {
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 1em auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-content pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 优化预览区域滚动效果 */
|
||||||
|
.preview-container {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-container::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-container::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-container::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模板预览卡片样式 */
|
||||||
|
.template-preview-card {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-preview-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-preview-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(to right, var(--primary), var(--primary-foreground));
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.template-preview-card:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ByteMD 编辑器样式 */
|
||||||
|
.bytemd-preview {
|
||||||
|
@apply prose max-w-none p-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-modern .bytemd-preview {
|
||||||
|
--tw-prose-body: #374151;
|
||||||
|
--tw-prose-headings: #111827;
|
||||||
|
--tw-prose-links: #2563eb;
|
||||||
|
--tw-prose-code: #374151;
|
||||||
|
--tw-prose-quotes: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-elegant .bytemd-preview {
|
||||||
|
--tw-prose-body: #4a5568;
|
||||||
|
--tw-prose-headings: #2d3748;
|
||||||
|
--tw-prose-links: #4299e1;
|
||||||
|
--tw-prose-code: #4a5568;
|
||||||
|
--tw-prose-quotes: #718096;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose-minimal .bytemd-preview {
|
||||||
|
--tw-prose-body: #1a1a1a;
|
||||||
|
--tw-prose-headings: #000000;
|
||||||
|
--tw-prose-links: #0066cc;
|
||||||
|
--tw-prose-code: #1a1a1a;
|
||||||
|
--tw-prose-quotes: #666666;
|
||||||
|
}
|
||||||
28
src/app/layout.tsx
Normal file
28
src/app/layout.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "NeuraPress - 专业的内容转换工具",
|
||||||
|
description: "将 Markdown 转换为微信公众号和小红书样式的专业工具",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="zh-CN" className="h-full">
|
||||||
|
<body className={cn(
|
||||||
|
inter.className,
|
||||||
|
"h-full bg-gray-50 antialiased"
|
||||||
|
)}>
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
54
src/app/page.tsx
Normal file
54
src/app/page.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { MainNav } from '@/components/nav/MainNav'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-full">
|
||||||
|
<MainNav />
|
||||||
|
<main className="py-10">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="mx-auto max-w-5xl">
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight text-gray-900">
|
||||||
|
内容转换工具
|
||||||
|
</h1>
|
||||||
|
<p className="mt-2 text-sm text-gray-600">
|
||||||
|
选择需要使用的功能
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 md:grid-cols-2">
|
||||||
|
<Link
|
||||||
|
href="/wechat"
|
||||||
|
className="group relative rounded-lg border border-gray-200 bg-white p-6 hover:shadow-md transition-all"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
微信公众号
|
||||||
|
<span className="absolute inset-0"></span>
|
||||||
|
</h3>
|
||||||
|
<p className="mt-2 text-sm text-gray-600">
|
||||||
|
将内容转换为微信公众号格式，支持多种样式模板
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/xiaohongshu"
|
||||||
|
className="group relative rounded-lg border border-gray-200 bg-white p-6 hover:shadow-md transition-all"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
小红书
|
||||||
|
<span className="absolute inset-0"></span>
|
||||||
|
</h3>
|
||||||
|
<p className="mt-2 text-sm text-gray-600">
|
||||||
|
将内容转换为小红书笔记格式，轻松发布内容
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
26
src/app/wechat/page.tsx
Normal file
26
src/app/wechat/page.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { MainNav } from '@/components/nav/MainNav'
|
||||||
|
import WechatEditor from '@/components/editor/WechatEditor'
|
||||||
|
|
||||||
|
export default function WechatPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-full">
|
||||||
|
<MainNav />
|
||||||
|
<main className="py-6">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h1 className="text-2xl font-bold tracking-tight text-gray-900">
|
||||||
|
微信公众号编辑器
|
||||||
|
</h1>
|
||||||
|
<p className="mt-1 text-sm text-gray-600">
|
||||||
|
编辑内容，预览效果，一键复制
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border">
|
||||||
|
<WechatEditor />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
28
src/app/xiaohongshu/page.tsx
Normal file
28
src/app/xiaohongshu/page.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { MainNav } from '@/components/nav/MainNav'
|
||||||
|
import XiaohongshuEditor from '@/components/editor/XiaohongshuEditor'
|
||||||
|
|
||||||
|
export default function XiaohongshuPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-full">
|
||||||
|
<MainNav />
|
||||||
|
<main className="py-10">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="mx-auto max-w-5xl">
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight text-gray-900">
|
||||||
|
小红书笔记编辑器
|
||||||
|
</h1>
|
||||||
|
<p className="mt-2 text-sm text-gray-600">
|
||||||
|
编辑内容，预览效果，一键复制
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-xl shadow-sm border p-6">
|
||||||
|
<XiaohongshuEditor />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
63
src/components/editor/Editor.tsx
Normal file
63
src/components/editor/Editor.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEditor, EditorContent } from '@tiptap/react'
|
||||||
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { TemplateSelector } from '../template/TemplateSelector'
|
||||||
|
import { templates } from '@/config/templates'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const Editor = () => {
|
||||||
|
const [selectedTemplate, setSelectedTemplate] = useState<string>('')
|
||||||
|
const [preview, setPreview] = useState(false)
|
||||||
|
|
||||||
|
const editor = useEditor({
|
||||||
|
extensions: [StarterKit],
|
||||||
|
content: '<p>开始编辑...</p>',
|
||||||
|
editorProps: {
|
||||||
|
attributes: {
|
||||||
|
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[500px]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleTemplateSelect = (templateId: string) => {
|
||||||
|
setSelectedTemplate(templateId)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPreviewContent = () => {
|
||||||
|
if (!editor || !selectedTemplate) return ''
|
||||||
|
const template = templates.find(t => t.id === selectedTemplate)
|
||||||
|
if (!template) return editor.getHTML()
|
||||||
|
return template.transform(editor.getHTML())
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<TemplateSelector onSelect={handleTemplateSelect} />
|
||||||
|
<button
|
||||||
|
onClick={() => setPreview(!preview)}
|
||||||
|
className="px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90"
|
||||||
|
>
|
||||||
|
{preview ? '编辑' : '预览'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border rounded-lg p-4">
|
||||||
|
{preview ? (
|
||||||
|
<div className={cn(
|
||||||
|
"prose max-w-none",
|
||||||
|
selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles
|
||||||
|
)}>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: getPreviewContent() }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<EditorContent editor={editor} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Editor
|
||||||
132
src/components/editor/EditorToolbar.tsx
Normal file
132
src/components/editor/EditorToolbar.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Editor } from '@tiptap/react'
|
||||||
|
import {
|
||||||
|
Bold,
|
||||||
|
Italic,
|
||||||
|
List,
|
||||||
|
ListOrdered,
|
||||||
|
Quote,
|
||||||
|
Heading1,
|
||||||
|
Heading2,
|
||||||
|
Heading3,
|
||||||
|
Minus,
|
||||||
|
Link,
|
||||||
|
Image,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { Toggle } from '@/components/ui/toggle'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
interface EditorToolbarProps {
|
||||||
|
editor: Editor | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EditorToolbar({ editor }: EditorToolbarProps) {
|
||||||
|
if (!editor) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-b">
|
||||||
|
<div className="flex flex-wrap gap-1 p-1">
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('heading', { level: 1 })}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||||
|
>
|
||||||
|
<Heading1 className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('heading', { level: 2 })}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||||
|
>
|
||||||
|
<Heading2 className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('heading', { level: 3 })}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||||
|
>
|
||||||
|
<Heading3 className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
|
||||||
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
||||||
|
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('bold')}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleBold().run()}
|
||||||
|
>
|
||||||
|
<Bold className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('italic')}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleItalic().run()}
|
||||||
|
>
|
||||||
|
<Italic className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
|
||||||
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
||||||
|
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('bulletList')}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
|
||||||
|
>
|
||||||
|
<List className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('orderedList')}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
|
||||||
|
>
|
||||||
|
<ListOrdered className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
|
||||||
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
||||||
|
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('blockquote')}
|
||||||
|
onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
|
||||||
|
>
|
||||||
|
<Quote className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('horizontalRule')}
|
||||||
|
onPressedChange={() => editor.chain().focus().setHorizontalRule().run()}
|
||||||
|
>
|
||||||
|
<Minus className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
|
||||||
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
||||||
|
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
pressed={editor.isActive('link')}
|
||||||
|
onPressedChange={() => {
|
||||||
|
const url = window.prompt('URL')
|
||||||
|
if (url) {
|
||||||
|
editor.chain().focus().setLink({ href: url }).run()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
<Toggle
|
||||||
|
size="sm"
|
||||||
|
onPressedChange={() => {
|
||||||
|
const url = window.prompt('Image URL')
|
||||||
|
if (url) {
|
||||||
|
editor.chain().focus().setImage({ src: url }).run()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image className="h-4 w-4" />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
190
src/components/editor/StyleConfigDialog.tsx
Normal file
190
src/components/editor/StyleConfigDialog.tsx
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Settings } from 'lucide-react'
|
||||||
|
import { type RendererOptions } from '@/lib/markdown'
|
||||||
|
|
||||||
|
const stylePresets = {
|
||||||
|
default: {
|
||||||
|
name: '默认样式',
|
||||||
|
options: {
|
||||||
|
fontSize: {
|
||||||
|
h1: '24px',
|
||||||
|
h2: '20px',
|
||||||
|
h3: '18px',
|
||||||
|
paragraph: '15px',
|
||||||
|
code: '14px'
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
text: '#333333',
|
||||||
|
heading: '#1a1a1a',
|
||||||
|
link: '#576b95',
|
||||||
|
code: '#333333',
|
||||||
|
quote: '#666666'
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
paragraph: '20px',
|
||||||
|
heading: '30px',
|
||||||
|
list: '20px',
|
||||||
|
quote: '20px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modern: {
|
||||||
|
name: '现代简约',
|
||||||
|
options: {
|
||||||
|
fontSize: {
|
||||||
|
h1: '28px',
|
||||||
|
h2: '24px',
|
||||||
|
h3: '20px',
|
||||||
|
paragraph: '16px',
|
||||||
|
code: '15px'
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
text: '#2d3748',
|
||||||
|
heading: '#1a202c',
|
||||||
|
link: '#4299e1',
|
||||||
|
code: '#2d3748',
|
||||||
|
quote: '#718096'
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
paragraph: '24px',
|
||||||
|
heading: '36px',
|
||||||
|
list: '24px',
|
||||||
|
quote: '24px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StyleConfigDialogProps {
|
||||||
|
value: RendererOptions
|
||||||
|
onChange: (options: RendererOptions) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StyleConfigDialog({ value, onChange }: StyleConfigDialogProps) {
|
||||||
|
const [currentOptions, setCurrentOptions] = useState<RendererOptions>(value)
|
||||||
|
|
||||||
|
const handlePresetChange = (preset: keyof typeof stylePresets) => {
|
||||||
|
const newOptions = stylePresets[preset].options
|
||||||
|
setCurrentOptions(newOptions)
|
||||||
|
onChange(newOptions)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOptionChange = (
|
||||||
|
category: keyof RendererOptions,
|
||||||
|
subcategory: string,
|
||||||
|
value: string
|
||||||
|
) => {
|
||||||
|
const newOptions = {
|
||||||
|
...currentOptions,
|
||||||
|
[category]: {
|
||||||
|
...currentOptions[category],
|
||||||
|
[subcategory]: value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setCurrentOptions(newOptions)
|
||||||
|
onChange(newOptions)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<Settings className="h-4 w-4 mr-2" />
|
||||||
|
样式设置
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>样式配置</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<Tabs defaultValue="presets" className="w-full">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="presets">预设样式</TabsTrigger>
|
||||||
|
<TabsTrigger value="font">字体</TabsTrigger>
|
||||||
|
<TabsTrigger value="colors">颜色</TabsTrigger>
|
||||||
|
<TabsTrigger value="spacing">间距</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="presets" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{Object.entries(stylePresets).map(([key, preset]) => (
|
||||||
|
<div
|
||||||
|
key={key}
|
||||||
|
className="p-4 border rounded-lg cursor-pointer hover:border-primary"
|
||||||
|
onClick={() => handlePresetChange(key as keyof typeof stylePresets)}
|
||||||
|
>
|
||||||
|
<h3 className="font-medium mb-2">{preset.name}</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p style={{ fontSize: preset.options.fontSize.paragraph, color: preset.options.colors.text }}>
|
||||||
|
正文示例
|
||||||
|
</p>
|
||||||
|
<h2 style={{ fontSize: preset.options.fontSize.h2, color: preset.options.colors.heading }}>
|
||||||
|
标题示例
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="font" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{Object.entries(currentOptions.fontSize || {}).map(([key, value]) => (
|
||||||
|
<div key={key} className="space-y-2">
|
||||||
|
<Label>{key}</Label>
|
||||||
|
<Input
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => handleOptionChange('fontSize', key, e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="colors" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{Object.entries(currentOptions.colors || {}).map(([key, value]) => (
|
||||||
|
<div key={key} className="space-y-2">
|
||||||
|
<Label>{key}</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => handleOptionChange('colors', key, e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="color"
|
||||||
|
value={value}
|
||||||
|
className="w-12"
|
||||||
|
onChange={(e) => handleOptionChange('colors', key, e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="spacing" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{Object.entries(currentOptions.spacing || {}).map(([key, value]) => (
|
||||||
|
<div key={key} className="space-y-2">
|
||||||
|
<Label>{key}</Label>
|
||||||
|
<Input
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => handleOptionChange('spacing', key, e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
217
src/components/editor/WechatEditor.tsx
Normal file
217
src/components/editor/WechatEditor.tsx
Normal file
@ -0,0 +1,217 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Editor } from '@bytemd/react'
|
||||||
|
import gfm from '@bytemd/plugin-gfm'
|
||||||
|
import highlight from '@bytemd/plugin-highlight'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { templates } from '@/config/wechat-templates'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Copy, Smartphone } from 'lucide-react'
|
||||||
|
import { WechatStylePicker } from '../template/WechatStylePicker'
|
||||||
|
import { StyleConfigDialog } from './StyleConfigDialog'
|
||||||
|
import { convertToWechat } from '@/lib/markdown'
|
||||||
|
import { type RendererOptions } from '@/lib/markdown'
|
||||||
|
import { TemplateManager } from '../template/TemplateManager'
|
||||||
|
import 'bytemd/dist/index.css'
|
||||||
|
|
||||||
|
const plugins = [
|
||||||
|
gfm(),
|
||||||
|
highlight(),
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function WechatEditor() {
|
||||||
|
const [value, setValue] = useState('')
|
||||||
|
const [selectedTemplate, setSelectedTemplate] = useState<string>('')
|
||||||
|
const [showPreview, setShowPreview] = useState(true)
|
||||||
|
const [styleOptions, setStyleOptions] = useState<RendererOptions>({})
|
||||||
|
|
||||||
|
const handleEditorChange = (v: any) => {
|
||||||
|
|
||||||
|
if (typeof v === 'string') {
|
||||||
|
setValue(v)
|
||||||
|
} else if (v?.value && typeof v.value === 'string') {
|
||||||
|
setValue(v.value)
|
||||||
|
} else {
|
||||||
|
console.warn('Unexpected editor value:', v)
|
||||||
|
setValue('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPreviewContent = () => {
|
||||||
|
if (!value) return ''
|
||||||
|
|
||||||
|
const template = templates.find(t => t.id === selectedTemplate)
|
||||||
|
const mergedOptions = {
|
||||||
|
...styleOptions,
|
||||||
|
...(template?.options || {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const html = convertToWechat(value, mergedOptions)
|
||||||
|
if (!template?.transform) return html
|
||||||
|
|
||||||
|
try {
|
||||||
|
const transformed = template.transform(html)
|
||||||
|
if (transformed && typeof transformed === 'object') {
|
||||||
|
const result = transformed as { html?: string; content?: string }
|
||||||
|
if (result.html) return result.html
|
||||||
|
if (result.content) return result.content
|
||||||
|
return JSON.stringify(transformed)
|
||||||
|
}
|
||||||
|
return transformed || html
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Template transformation error:', error)
|
||||||
|
return html
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyContent = () => {
|
||||||
|
const content = getPreviewContent()
|
||||||
|
navigator.clipboard.writeText(content)
|
||||||
|
.then(() => alert('内容已复制到剪贴板'))
|
||||||
|
.catch(err => console.error('复制失败:', err))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTemplateChange = () => {
|
||||||
|
setValue(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCopy = () => {
|
||||||
|
const previewContent = document.querySelector('.preview-content')
|
||||||
|
if (!previewContent) return
|
||||||
|
|
||||||
|
// 创建一个临时容器来保持样式
|
||||||
|
const tempDiv = document.createElement('div')
|
||||||
|
tempDiv.innerHTML = previewContent.innerHTML
|
||||||
|
|
||||||
|
// 复制计算后的样式
|
||||||
|
const styles = window.getComputedStyle(previewContent)
|
||||||
|
const importantStyles = {
|
||||||
|
'font-family': styles.fontFamily,
|
||||||
|
'font-size': styles.fontSize,
|
||||||
|
'color': styles.color,
|
||||||
|
'line-height': styles.lineHeight,
|
||||||
|
'text-align': styles.textAlign,
|
||||||
|
'white-space': styles.whiteSpace,
|
||||||
|
'margin': styles.margin,
|
||||||
|
'padding': styles.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
// 应用样式到临时容器
|
||||||
|
Object.assign(tempDiv.style, importantStyles)
|
||||||
|
|
||||||
|
// 将临时容器添加到文档中（隐藏）
|
||||||
|
tempDiv.style.position = 'fixed'
|
||||||
|
tempDiv.style.left = '-9999px'
|
||||||
|
document.body.appendChild(tempDiv)
|
||||||
|
|
||||||
|
// 创建选区并复制
|
||||||
|
const range = document.createRange()
|
||||||
|
range.selectNode(tempDiv)
|
||||||
|
const selection = window.getSelection()
|
||||||
|
if (selection) {
|
||||||
|
selection.removeAllRanges()
|
||||||
|
selection.addRange(range)
|
||||||
|
|
||||||
|
try {
|
||||||
|
document.execCommand('copy')
|
||||||
|
alert('预览内容（带格式）已复制到剪贴板')
|
||||||
|
} catch (err) {
|
||||||
|
console.error('复制失败:', err)
|
||||||
|
}
|
||||||
|
|
||||||
|
selection.removeAllRanges()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理临时元素
|
||||||
|
document.body.removeChild(tempDiv)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="border-b p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<WechatStylePicker
|
||||||
|
value={selectedTemplate}
|
||||||
|
onSelect={setSelectedTemplate}
|
||||||
|
/>
|
||||||
|
<TemplateManager onTemplateChange={handleTemplateChange} />
|
||||||
|
<StyleConfigDialog
|
||||||
|
value={styleOptions}
|
||||||
|
onChange={setStyleOptions}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowPreview(!showPreview)}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-1.5 px-3 py-2 rounded-md text-sm",
|
||||||
|
showPreview
|
||||||
|
? "bg-primary text-primary-foreground hover:bg-primary/90"
|
||||||
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Smartphone className="h-4 w-4" />
|
||||||
|
预览
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={copyContent}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 text-sm"
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
复制源码
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCopy}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 text-sm"
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
复制预览
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex">
|
||||||
|
<div className={cn(
|
||||||
|
"border-r bg-white transition-all duration-200",
|
||||||
|
showPreview ? "w-1/2" : "w-full",
|
||||||
|
selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles
|
||||||
|
)}>
|
||||||
|
<div className="h-[calc(100vh-140px)] overflow-auto">
|
||||||
|
<Editor
|
||||||
|
value={value}
|
||||||
|
plugins={plugins}
|
||||||
|
onChange={handleEditorChange}
|
||||||
|
editorConfig={{
|
||||||
|
mode: 'split'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showPreview && (
|
||||||
|
<div className="w-1/2 bg-gray-50">
|
||||||
|
<div className="sticky top-0 border-b bg-white p-3 z-10">
|
||||||
|
<div className="mx-auto w-8 h-1 bg-gray-200 rounded-full" />
|
||||||
|
</div>
|
||||||
|
<div className="p-6 preview-container" style={{ height: 'calc(100vh - 140px)', overflowY: 'auto' }}>
|
||||||
|
<div className="max-w-[375px] mx-auto bg-white shadow-sm rounded-lg">
|
||||||
|
<div className={cn(
|
||||||
|
"prose max-w-none p-4",
|
||||||
|
selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles
|
||||||
|
)}>
|
||||||
|
<div
|
||||||
|
dangerouslySetInnerHTML={{ __html: getPreviewContent() }}
|
||||||
|
className="preview-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
83
src/components/editor/XiaohongshuEditor.tsx
Normal file
83
src/components/editor/XiaohongshuEditor.tsx
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEditor, EditorContent } from '@tiptap/react'
|
||||||
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Copy, Eye, Pencil } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function XiaohongshuEditor() {
|
||||||
|
const [preview, setPreview] = useState(false)
|
||||||
|
|
||||||
|
const editor = useEditor({
|
||||||
|
extensions: [StarterKit],
|
||||||
|
content: '<p>开始编辑小红书笔记...</p>',
|
||||||
|
editorProps: {
|
||||||
|
attributes: {
|
||||||
|
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[500px] max-w-none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const getPreviewContent = () => {
|
||||||
|
if (!editor) return ''
|
||||||
|
return editor.getHTML()
|
||||||
|
.replace(/<h1>/g, '<h1 style="font-size: 20px; font-weight: bold; margin-bottom: 0.5em;">')
|
||||||
|
.replace(/<p>/g, '<p style="margin-bottom: 0.8em; color: #222; line-height: 1.6;">')
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyContent = () => {
|
||||||
|
const content = getPreviewContent()
|
||||||
|
navigator.clipboard.writeText(content)
|
||||||
|
.then(() => alert('内容已复制到剪贴板'))
|
||||||
|
.catch(err => console.error('复制失败:', err))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<button
|
||||||
|
onClick={() => setPreview(!preview)}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-md bg-gray-100 text-gray-700 text-sm hover:bg-gray-200"
|
||||||
|
>
|
||||||
|
{preview ? (
|
||||||
|
<>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
编辑
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
预览
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{preview && (
|
||||||
|
<button
|
||||||
|
onClick={copyContent}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 text-sm"
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
复制内容
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={cn(
|
||||||
|
"border rounded-lg",
|
||||||
|
preview ? "bg-gray-50" : "bg-white"
|
||||||
|
)}>
|
||||||
|
{preview ? (
|
||||||
|
<div className="prose max-w-none xiaohongshu-template p-6">
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: getPreviewContent() }} />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="p-6">
|
||||||
|
<EditorContent editor={editor} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
53
src/components/nav/MainNav.tsx
Normal file
53
src/components/nav/MainNav.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { usePathname } from 'next/navigation'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
{ name: '微信公众号', href: '/wechat' },
|
||||||
|
{ name: '小红书', href: '/xiaohongshu' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export function MainNav() {
|
||||||
|
const pathname = usePathname()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="border-b border-gray-200 bg-white">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="flex h-16 items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<Link href="/" className="text-xl font-bold text-primary">
|
||||||
|
NeuraPress
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<div className="ml-10 flex items-baseline space-x-4">
|
||||||
|
{navigation.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
className={cn(
|
||||||
|
"px-3 py-2 text-sm font-medium rounded-md",
|
||||||
|
pathname === item.href
|
||||||
|
? "bg-primary text-primary-foreground"
|
||||||
|
: "text-gray-700 hover:text-gray-900 hover:bg-gray-100"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
专业的内容转换工具
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
339
src/components/template/TemplateManager.tsx
Normal file
339
src/components/template/TemplateManager.tsx
Normal file
@ -0,0 +1,339 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Settings2, Download, Upload, Star, Plus } from 'lucide-react'
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
import { templates as defaultTemplates, type Template } from '@/config/wechat-templates'
|
||||||
|
import { useLocalStorage } from '@/hooks/use-local-storage'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
interface TemplateManagerProps {
|
||||||
|
onTemplateChange: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface StyleConfig {
|
||||||
|
base: {
|
||||||
|
'--md-primary-color': string
|
||||||
|
'text-align': string
|
||||||
|
'line-height': string
|
||||||
|
}
|
||||||
|
block: {
|
||||||
|
container?: React.CSSProperties
|
||||||
|
h1?: React.CSSProperties
|
||||||
|
h2?: React.CSSProperties
|
||||||
|
h3?: React.CSSProperties
|
||||||
|
h4?: React.CSSProperties
|
||||||
|
h5?: React.CSSProperties
|
||||||
|
h6?: React.CSSProperties
|
||||||
|
p?: React.CSSProperties
|
||||||
|
blockquote?: React.CSSProperties
|
||||||
|
blockquote_p?: React.CSSProperties
|
||||||
|
code_pre?: React.CSSProperties
|
||||||
|
code?: React.CSSProperties
|
||||||
|
image?: React.CSSProperties
|
||||||
|
ol?: React.CSSProperties
|
||||||
|
ul?: React.CSSProperties
|
||||||
|
footnotes?: React.CSSProperties
|
||||||
|
figure?: React.CSSProperties
|
||||||
|
hr?: React.CSSProperties
|
||||||
|
}
|
||||||
|
inline: {
|
||||||
|
listitem?: React.CSSProperties
|
||||||
|
codespan?: React.CSSProperties
|
||||||
|
em?: React.CSSProperties
|
||||||
|
link?: React.CSSProperties
|
||||||
|
wx_link?: React.CSSProperties
|
||||||
|
strong?: React.CSSProperties
|
||||||
|
table?: React.CSSProperties
|
||||||
|
thead?: React.CSSProperties
|
||||||
|
td?: React.CSSProperties
|
||||||
|
footnote?: React.CSSProperties
|
||||||
|
figcaption?: React.CSSProperties
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TemplateManager({ onTemplateChange }: TemplateManagerProps) {
|
||||||
|
const [customTemplates, setCustomTemplates] = useLocalStorage<Template[]>('custom-templates', [])
|
||||||
|
const [favoriteIds, setFavoriteIds] = useLocalStorage<string[]>('favorite-templates', [])
|
||||||
|
const [newTemplate, setNewTemplate] = useState<Partial<Template>>({})
|
||||||
|
|
||||||
|
const allTemplates = [...defaultTemplates, ...customTemplates]
|
||||||
|
|
||||||
|
const handleAddTemplate = () => {
|
||||||
|
if (!newTemplate.id || !newTemplate.name) return
|
||||||
|
|
||||||
|
const template: Template = {
|
||||||
|
id: newTemplate.id,
|
||||||
|
name: newTemplate.name,
|
||||||
|
description: newTemplate.description || '',
|
||||||
|
styles: newTemplate.styles || '',
|
||||||
|
options: {
|
||||||
|
fontSize: {},
|
||||||
|
colors: {},
|
||||||
|
spacing: {}
|
||||||
|
},
|
||||||
|
transform: (html) => html
|
||||||
|
}
|
||||||
|
|
||||||
|
setCustomTemplates([...customTemplates, template])
|
||||||
|
setNewTemplate({})
|
||||||
|
onTemplateChange()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportTemplates = () => {
|
||||||
|
const exportData = customTemplates.map(template => ({
|
||||||
|
id: template.id,
|
||||||
|
name: template.name,
|
||||||
|
description: template.description,
|
||||||
|
styles: template.styles,
|
||||||
|
styleConfig: {
|
||||||
|
base: {
|
||||||
|
'--md-primary-color': template.options.base?.primaryColor || '#000000',
|
||||||
|
'text-align': template.options.base?.textAlign || 'left',
|
||||||
|
'line-height': template.options.base?.lineHeight || '1.75'
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
h1: template.options.block?.h1,
|
||||||
|
h2: template.options.block?.h2,
|
||||||
|
h3: template.options.block?.h3,
|
||||||
|
// ... 其他块级元素
|
||||||
|
},
|
||||||
|
inline: {
|
||||||
|
strong: template.options.inline?.strong,
|
||||||
|
em: template.options.inline?.em,
|
||||||
|
codespan: template.options.inline?.codespan,
|
||||||
|
// ... 其他内联元素
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
const data = JSON.stringify(exportData, null, 2)
|
||||||
|
const blob = new Blob([data], { type: 'application/json' })
|
||||||
|
const url = URL.createObjectURL(blob)
|
||||||
|
const a = document.createElement('a')
|
||||||
|
a.href = url
|
||||||
|
a.download = 'wechat-templates.json'
|
||||||
|
a.click()
|
||||||
|
URL.revokeObjectURL(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleImportTemplates = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = event.target.files?.[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (e) => {
|
||||||
|
try {
|
||||||
|
const importData = JSON.parse(e.target?.result as string)
|
||||||
|
const templates = importData.map((data: any) => ({
|
||||||
|
id: data.id,
|
||||||
|
name: data.name,
|
||||||
|
description: data.description,
|
||||||
|
styles: data.styles,
|
||||||
|
options: {
|
||||||
|
base: {
|
||||||
|
primaryColor: data.styleConfig.base['--md-primary-color'],
|
||||||
|
textAlign: data.styleConfig.base['text-align'],
|
||||||
|
lineHeight: data.styleConfig.base['line-height']
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
h1: data.styleConfig.block.h1,
|
||||||
|
h2: data.styleConfig.block.h2,
|
||||||
|
h3: data.styleConfig.block.h3,
|
||||||
|
// ... 其他块级元素
|
||||||
|
},
|
||||||
|
inline: {
|
||||||
|
strong: data.styleConfig.inline.strong,
|
||||||
|
em: data.styleConfig.inline.em,
|
||||||
|
codespan: data.styleConfig.inline.codespan,
|
||||||
|
// ... 其他内联元素
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transform: (html: string) => {
|
||||||
|
return `
|
||||||
|
<section>
|
||||||
|
<style>
|
||||||
|
:root { --md-primary-color: ${data.styleConfig.base['--md-primary-color']}; }
|
||||||
|
</style>
|
||||||
|
${html}
|
||||||
|
</section>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
||||||
|
setCustomTemplates(prev => [...prev, ...templates])
|
||||||
|
onTemplateChange()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('导入失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reader.readAsText(file)
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleFavorite = (templateId: string) => {
|
||||||
|
setFavoriteIds(prev =>
|
||||||
|
prev.includes(templateId)
|
||||||
|
? prev.filter(id => id !== templateId)
|
||||||
|
: [...prev, templateId]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<Settings2 className="h-4 w-4 mr-2" />
|
||||||
|
模板管理
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-4xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>模板管理</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<Tabs defaultValue="all">
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="all">所有模板</TabsTrigger>
|
||||||
|
<TabsTrigger value="favorites">收藏模板</TabsTrigger>
|
||||||
|
<TabsTrigger value="custom">自定义模板</TabsTrigger>
|
||||||
|
<TabsTrigger value="add">添加模板</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="all" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{allTemplates.map((template) => (
|
||||||
|
<div key={template.id} className="relative border rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<h3 className="font-medium">{template.name}</h3>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => toggleFavorite(template.id)}
|
||||||
|
>
|
||||||
|
<Star
|
||||||
|
className={cn(
|
||||||
|
"h-4 w-4",
|
||||||
|
favoriteIds.includes(template.id)
|
||||||
|
? "fill-yellow-400 text-yellow-400"
|
||||||
|
: "text-gray-400"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">{template.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="favorites" className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{allTemplates
|
||||||
|
.filter(template => favoriteIds.includes(template.id))
|
||||||
|
.map((template) => (
|
||||||
|
<div key={template.id} className="relative border rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<h3 className="font-medium">{template.name}</h3>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => toggleFavorite(template.id)}
|
||||||
|
>
|
||||||
|
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">{template.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="custom" className="space-y-4">
|
||||||
|
<div className="flex justify-between mb-4">
|
||||||
|
<div className="space-x-2">
|
||||||
|
<Button onClick={handleExportTemplates}>
|
||||||
|
<Download className="h-4 w-4 mr-2" />
|
||||||
|
导出模板
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" onClick={() => document.getElementById('import-file')?.click()}>
|
||||||
|
<Upload className="h-4 w-4 mr-2" />
|
||||||
|
导入模板
|
||||||
|
</Button>
|
||||||
|
<input
|
||||||
|
id="import-file"
|
||||||
|
type="file"
|
||||||
|
accept=".json"
|
||||||
|
className="hidden"
|
||||||
|
onChange={handleImportTemplates}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||||
|
{customTemplates.map((template) => (
|
||||||
|
<div key={template.id} className="relative border rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<h3 className="font-medium">{template.name}</h3>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setCustomTemplates(prev => prev.filter(t => t.id !== template.id))
|
||||||
|
onTemplateChange()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">{template.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="add" className="space-y-4">
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>模板ID</Label>
|
||||||
|
<Input
|
||||||
|
value={newTemplate.id || ''}
|
||||||
|
onChange={(e) => setNewTemplate({ ...newTemplate, id: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>模板名称</Label>
|
||||||
|
<Input
|
||||||
|
value={newTemplate.name || ''}
|
||||||
|
onChange={(e) => setNewTemplate({ ...newTemplate, name: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>描述</Label>
|
||||||
|
<Textarea
|
||||||
|
value={newTemplate.description || ''}
|
||||||
|
onChange={(e) => setNewTemplate({ ...newTemplate, description: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>样式类名</Label>
|
||||||
|
<Input
|
||||||
|
value={newTemplate.styles || ''}
|
||||||
|
onChange={(e) => setNewTemplate({ ...newTemplate, styles: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleAddTemplate}>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
添加模板
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
86
src/components/template/TemplateSelector.tsx
Normal file
86
src/components/template/TemplateSelector.tsx
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Check, ChevronDown } from "lucide-react"
|
||||||
|
import * as SelectPrimitive from '@radix-ui/react-select'
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { templates } from '@/config/templates'
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
export function TemplateSelector({
|
||||||
|
onSelect
|
||||||
|
}: {
|
||||||
|
onSelect: (template: string, subTemplate?: string) => void
|
||||||
|
}) {
|
||||||
|
const [selectedTemplate, setSelectedTemplate] = useState<string>('')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<SelectPrimitive.Root
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedTemplate(value)
|
||||||
|
onSelect(value)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectPrimitive.Trigger className="inline-flex items-center justify-between rounded-md px-3 py-2 text-sm font-medium border border-input hover:bg-accent hover:text-accent-foreground min-w-[120px]">
|
||||||
|
<SelectPrimitive.Value placeholder="选择模板..." />
|
||||||
|
<SelectPrimitive.Icon>
|
||||||
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content className="overflow-hidden bg-popover rounded-md border shadow-md">
|
||||||
|
<SelectPrimitive.Viewport className="p-1">
|
||||||
|
{templates.map((template) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
key={template.id}
|
||||||
|
value={template.id}
|
||||||
|
className={cn(
|
||||||
|
"relative flex items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground cursor-pointer"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SelectPrimitive.ItemText>{template.name}</SelectPrimitive.ItemText>
|
||||||
|
<SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center">
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
))}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
</SelectPrimitive.Root>
|
||||||
|
|
||||||
|
{selectedTemplate && templates.find(t => t.id === selectedTemplate)?.subTemplates && (
|
||||||
|
<SelectPrimitive.Root onValueChange={(value) => onSelect(selectedTemplate, value)}>
|
||||||
|
<SelectPrimitive.Trigger className="inline-flex items-center justify-between rounded-md px-3 py-2 text-sm font-medium border border-input hover:bg-accent hover:text-accent-foreground min-w-[120px]">
|
||||||
|
<SelectPrimitive.Value placeholder="选择样式..." />
|
||||||
|
<SelectPrimitive.Icon>
|
||||||
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content className="overflow-hidden bg-popover rounded-md border shadow-md">
|
||||||
|
<SelectPrimitive.Viewport className="p-1">
|
||||||
|
{templates
|
||||||
|
.find(t => t.id === selectedTemplate)
|
||||||
|
?.subTemplates?.map((subTemplate) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
key={subTemplate.id}
|
||||||
|
value={subTemplate.id}
|
||||||
|
className={cn(
|
||||||
|
"relative flex items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground cursor-pointer"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SelectPrimitive.ItemText>{subTemplate.name}</SelectPrimitive.ItemText>
|
||||||
|
<SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center">
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
))}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
</SelectPrimitive.Root>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
85
src/components/template/WechatStylePicker.tsx
Normal file
85
src/components/template/WechatStylePicker.tsx
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import { Check } from 'lucide-react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog"
|
||||||
|
import { templates } from '@/config/wechat-templates'
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
|
||||||
|
interface WechatStylePickerProps {
|
||||||
|
value?: string
|
||||||
|
onSelect: (value: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WechatStylePicker({ value, onSelect }: WechatStylePickerProps) {
|
||||||
|
const [open, setOpen] = React.useState(false)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
{value ? templates.find(t => t.id === value)?.name : '选择样式...'}
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-4xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>选择样式模板</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
|
||||||
|
{templates.map((template) => (
|
||||||
|
<div
|
||||||
|
key={template.id}
|
||||||
|
className={cn(
|
||||||
|
"template-preview-card relative flex flex-col gap-4 rounded-lg border bg-card p-4 cursor-pointer",
|
||||||
|
value === template.id && "border-primary"
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
onSelect(template.id)
|
||||||
|
setOpen(false)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="aspect-[4/3] overflow-hidden rounded-md border bg-white">
|
||||||
|
<div className={cn(
|
||||||
|
"p-4 transform scale-[0.6] origin-top-left",
|
||||||
|
template.styles
|
||||||
|
)}>
|
||||||
|
<h1 style={{
|
||||||
|
...template.styleConfig?.block?.h1,
|
||||||
|
fontSize: template.styleConfig?.block?.h1?.fontSize || '1.2em'
|
||||||
|
}}>
|
||||||
|
标题示例
|
||||||
|
</h1>
|
||||||
|
<p style={{
|
||||||
|
...template.styleConfig?.block?.p,
|
||||||
|
fontSize: template.styleConfig?.block?.p?.fontSize || '1em'
|
||||||
|
}}>
|
||||||
|
这是一段示例文本，展示不同样式模板的效果。
|
||||||
|
</p>
|
||||||
|
<blockquote style={template.styleConfig?.block?.blockquote}>
|
||||||
|
引用文本示例
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<h3 className="font-medium">{template.name}</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">{template.description}</p>
|
||||||
|
</div>
|
||||||
|
{value === template.id && (
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<Check className="h-4 w-4 text-primary" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
43
src/components/template/WechatTemplateSelector.tsx
Normal file
43
src/components/template/WechatTemplateSelector.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Check, ChevronDown } from "lucide-react"
|
||||||
|
import * as SelectPrimitive from '@radix-ui/react-select'
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { templates } from '@/config/wechat-templates'
|
||||||
|
|
||||||
|
export function WechatTemplateSelector({
|
||||||
|
onSelect
|
||||||
|
}: {
|
||||||
|
onSelect: (template: string) => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<SelectPrimitive.Root onValueChange={onSelect}>
|
||||||
|
<SelectPrimitive.Trigger className="inline-flex items-center justify-between rounded-md px-3 py-2 text-sm font-medium border border-input hover:bg-accent hover:text-accent-foreground min-w-[120px]">
|
||||||
|
<SelectPrimitive.Value placeholder="选择样式..." />
|
||||||
|
<SelectPrimitive.Icon>
|
||||||
|
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content className="overflow-hidden bg-popover rounded-md border shadow-md">
|
||||||
|
<SelectPrimitive.Viewport className="p-1">
|
||||||
|
{templates.map((template) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
key={template.id}
|
||||||
|
value={template.id}
|
||||||
|
className={cn(
|
||||||
|
"relative flex items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground cursor-pointer"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<SelectPrimitive.ItemText>{template.name}</SelectPrimitive.ItemText>
|
||||||
|
<SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center">
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
))}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
</SelectPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
9
src/components/templates/WechatTemplate.tsx
Normal file
9
src/components/templates/WechatTemplate.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { TemplateProps } from '@/types/template'
|
||||||
|
|
||||||
|
export function WechatTemplate({ content, className }: TemplateProps) {
|
||||||
|
return (
|
||||||
|
<div className={`wechat-template ${className || ''}`}>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: content }} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
9
src/components/templates/XiaohongshuTemplate.tsx
Normal file
9
src/components/templates/XiaohongshuTemplate.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { TemplateProps } from '@/types/template'
|
||||||
|
|
||||||
|
export function XiaohongshuTemplate({ content, className }: TemplateProps) {
|
||||||
|
return (
|
||||||
|
<div className={`xiaohongshu-template ${className || ''}`}>
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: content }} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
58
src/components/ui/button.tsx
Normal file
58
src/components/ui/button.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-10 px-4 py-2",
|
||||||
|
sm: "h-9 rounded-md px-3",
|
||||||
|
lg: "h-11 rounded-md px-8",
|
||||||
|
icon: "h-10 w-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Button.displayName = "Button"
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
122
src/components/ui/dialog.tsx
Normal file
122
src/components/ui/dialog.tsx
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { X } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root
|
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger
|
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal
|
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span className="sr-only">关闭</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
))
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const DialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogHeader.displayName = "DialogHeader"
|
||||||
|
|
||||||
|
const DialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogFooter.displayName = "DialogFooter"
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-semibold leading-none tracking-tight",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogPortal,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogClose,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogFooter,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
}
|
||||||
200
src/components/ui/dropdown-menu.tsx
Normal file
200
src/components/ui/dropdown-menu.tsx
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||||
|
|
||||||
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||||
|
|
||||||
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||||
|
|
||||||
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||||
|
|
||||||
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||||
|
|
||||||
|
const DropdownMenuSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
))
|
||||||
|
DropdownMenuSubTrigger.displayName =
|
||||||
|
DropdownMenuPrimitive.SubTrigger.displayName
|
||||||
|
|
||||||
|
const DropdownMenuSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuSubContent.displayName =
|
||||||
|
DropdownMenuPrimitive.SubContent.displayName
|
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
))
|
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||||
|
|
||||||
|
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
))
|
||||||
|
DropdownMenuCheckboxItem.displayName =
|
||||||
|
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||||
|
|
||||||
|
const DropdownMenuRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-2 w-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
))
|
||||||
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||||
|
|
||||||
|
const DropdownMenuLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-semibold",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||||
|
|
||||||
|
const DropdownMenuSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||||
|
|
||||||
|
const DropdownMenuShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
}
|
||||||
25
src/components/ui/input.tsx
Normal file
25
src/components/ui/input.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Input.displayName = "Input"
|
||||||
|
|
||||||
|
export { Input }
|
||||||
26
src/components/ui/label.tsx
Normal file
26
src/components/ui/label.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const labelVariants = cva(
|
||||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
)
|
||||||
|
|
||||||
|
const Label = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||||
|
VariantProps<typeof labelVariants>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(labelVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Label }
|
||||||
31
src/components/ui/separator.tsx
Normal file
31
src/components/ui/separator.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Separator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||||
|
ref
|
||||||
|
) => (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 bg-border",
|
||||||
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Separator }
|
||||||
54
src/components/ui/tabs.tsx
Normal file
54
src/components/ui/tabs.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Tabs = TabsPrimitive.Root
|
||||||
|
|
||||||
|
const TabsList = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TabsPrimitive.List>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<TabsPrimitive.List
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TabsList.displayName = TabsPrimitive.List.displayName
|
||||||
|
|
||||||
|
const TabsTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<TabsPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||||
|
|
||||||
|
const TabsContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<TabsPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||||
|
|
||||||
|
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||||
24
src/components/ui/textarea.tsx
Normal file
24
src/components/ui/textarea.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
export interface TextareaProps
|
||||||
|
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||||
|
|
||||||
|
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||||
|
({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
className={cn(
|
||||||
|
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Textarea.displayName = "Textarea"
|
||||||
|
|
||||||
|
export { Textarea }
|
||||||
45
src/components/ui/toggle.tsx
Normal file
45
src/components/ui/toggle.tsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as TogglePrimitive from "@radix-ui/react-toggle"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const toggleVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-transparent",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-10 px-3",
|
||||||
|
sm: "h-8 px-2",
|
||||||
|
lg: "h-11 px-5",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const Toggle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TogglePrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
|
||||||
|
VariantProps<typeof toggleVariants>
|
||||||
|
>(({ className, variant, size, ...props }, ref) => (
|
||||||
|
<TogglePrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(toggleVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
|
||||||
|
Toggle.displayName = TogglePrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Toggle, toggleVariants }
|
||||||
63
src/config/templates.ts
Normal file
63
src/config/templates.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { Template } from '@/types/template'
|
||||||
|
|
||||||
|
export const templates: Template[] = [
|
||||||
|
{
|
||||||
|
id: 'wechat',
|
||||||
|
name: '微信公众号',
|
||||||
|
styles: 'wechat-template',
|
||||||
|
subTemplates: [
|
||||||
|
{
|
||||||
|
id: 'default',
|
||||||
|
name: '默认样式',
|
||||||
|
styles: 'wechat-default',
|
||||||
|
transform: (content: string) => {
|
||||||
|
return content
|
||||||
|
.replace(/<h1>/g, '<h1 style="font-size: 24px; font-weight: bold; margin-bottom: 1em;">')
|
||||||
|
.replace(/<p>/g, '<p style="margin-bottom: 1em; color: #333; line-height: 1.75;">')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'elegant',
|
||||||
|
name: '优雅简约',
|
||||||
|
styles: 'wechat-elegant',
|
||||||
|
transform: (content: string) => {
|
||||||
|
return content
|
||||||
|
.replace(/<h1>/g, '<h1 style="font-size: 26px; font-weight: 600; margin-bottom: 1.2em; color: #2c3e50;">')
|
||||||
|
.replace(/<p>/g, '<p style="margin-bottom: 1.2em; color: #34495e; line-height: 1.8; letter-spacing: 0.05em;">')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'modern',
|
||||||
|
name: '现代商务',
|
||||||
|
styles: 'wechat-modern',
|
||||||
|
transform: (content: string) => {
|
||||||
|
return content
|
||||||
|
.replace(/<h1>/g, '<h1 style="font-size: 28px; font-weight: bold; margin-bottom: 1em; color: #1a202c; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5em;">')
|
||||||
|
.replace(/<p>/g, '<p style="margin-bottom: 1.1em; color: #4a5568; line-height: 1.85; font-size: 16px;">')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'creative',
|
||||||
|
name: '创意活力',
|
||||||
|
styles: 'wechat-creative',
|
||||||
|
transform: (content: string) => {
|
||||||
|
return content
|
||||||
|
.replace(/<h1>/g, '<h1 style="font-size: 24px; font-weight: bold; margin-bottom: 1em; color: #2d3748; background: linear-gradient(to right, #4299e1, #667eea); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">')
|
||||||
|
.replace(/<p>/g, '<p style="margin-bottom: 1em; color: #4a5568; line-height: 1.75; border-left: 3px solid #4299e1; padding-left: 1em;">')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
transform: (content: string) => content // 默认转换
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'xiaohongshu',
|
||||||
|
name: '小红书',
|
||||||
|
styles: 'xiaohongshu-template',
|
||||||
|
transform: (content: string) => {
|
||||||
|
// 小红书特定的转换逻辑
|
||||||
|
return content
|
||||||
|
.replace(/<h1>/g, '<h1 style="font-size: 20px; font-weight: bold; margin-bottom: 0.5em;">')
|
||||||
|
.replace(/<p>/g, '<p style="margin-bottom: 0.8em; color: #222; line-height: 1.6;">')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
389
src/config/wechat-templates.ts
Normal file
389
src/config/wechat-templates.ts
Normal file
@ -0,0 +1,389 @@
|
|||||||
|
import type { RendererOptions } from '@/lib/types'
|
||||||
|
|
||||||
|
export interface Template {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
styles: string
|
||||||
|
options: RendererOptions
|
||||||
|
transform: (html: string) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const templates: Template[] = [
|
||||||
|
{
|
||||||
|
id: 'default',
|
||||||
|
name: '默认样式',
|
||||||
|
description: '清晰简约的默认样式',
|
||||||
|
styles: '',
|
||||||
|
options: {
|
||||||
|
base: {
|
||||||
|
primaryColor: '#000000',
|
||||||
|
textAlign: 'left',
|
||||||
|
lineHeight: '1.75'
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
h1: {
|
||||||
|
display: 'table',
|
||||||
|
padding: '0 1em',
|
||||||
|
borderBottom: '2px solid var(--md-primary-color)',
|
||||||
|
margin: '2em auto 1em',
|
||||||
|
color: 'hsl(var(--foreground))',
|
||||||
|
fontSize: '1.2em',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'center'
|
||||||
|
},
|
||||||
|
h2: {
|
||||||
|
display: 'table',
|
||||||
|
padding: '0 0.2em',
|
||||||
|
margin: '4em auto 2em',
|
||||||
|
color: '#fff',
|
||||||
|
background: 'var(--md-primary-color)',
|
||||||
|
fontSize: '1.2em',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'center'
|
||||||
|
},
|
||||||
|
h3: {
|
||||||
|
paddingLeft: '8px',
|
||||||
|
borderLeft: '3px solid var(--md-primary-color)',
|
||||||
|
margin: '2em 8px 0.75em 0',
|
||||||
|
color: 'hsl(var(--foreground))',
|
||||||
|
fontSize: '1.1em',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
lineHeight: 1.2
|
||||||
|
},
|
||||||
|
p: {
|
||||||
|
margin: '1.5em 8px',
|
||||||
|
letterSpacing: '0.1em',
|
||||||
|
color: 'hsl(var(--foreground))',
|
||||||
|
textAlign: 'justify'
|
||||||
|
},
|
||||||
|
blockquote: {
|
||||||
|
fontStyle: 'normal',
|
||||||
|
padding: '1em',
|
||||||
|
borderLeft: '4px solid var(--md-primary-color)',
|
||||||
|
borderRadius: '6px',
|
||||||
|
color: 'rgba(0,0,0,0.5)',
|
||||||
|
background: 'var(--blockquote-background)',
|
||||||
|
marginBottom: '1em'
|
||||||
|
},
|
||||||
|
code_pre: {
|
||||||
|
fontSize: '14px',
|
||||||
|
overflowX: 'auto',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '1em',
|
||||||
|
lineHeight: 1.5,
|
||||||
|
margin: '10px 8px'
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
display: 'block',
|
||||||
|
width: '100%',
|
||||||
|
margin: '0.1em auto 0.5em',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inline: {
|
||||||
|
strong: {
|
||||||
|
color: 'var(--md-primary-color)',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
em: {
|
||||||
|
fontStyle: 'italic'
|
||||||
|
},
|
||||||
|
codespan: {
|
||||||
|
fontSize: '90%',
|
||||||
|
color: '#d14',
|
||||||
|
background: 'rgba(27,31,35,.05)',
|
||||||
|
padding: '3px 5px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
color: '#576b95'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transform: (html) => html
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'elegant',
|
||||||
|
name: '优雅风格',
|
||||||
|
description: '适合文学、艺术类文章',
|
||||||
|
styles: 'prose-elegant',
|
||||||
|
options: {
|
||||||
|
base: {
|
||||||
|
primaryColor: '#16a34a',
|
||||||
|
textAlign: 'justify',
|
||||||
|
lineHeight: '1.8'
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
h1: {
|
||||||
|
display: 'table',
|
||||||
|
padding: '0 1.2em',
|
||||||
|
borderBottom: '2px solid #16a34a',
|
||||||
|
margin: '2.5em auto 1.2em',
|
||||||
|
fontSize: '1.4em',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'center'
|
||||||
|
},
|
||||||
|
h2: {
|
||||||
|
display: 'table',
|
||||||
|
padding: '0.2em 1em',
|
||||||
|
margin: '4em auto 2em',
|
||||||
|
color: '#fff',
|
||||||
|
background: '#16a34a',
|
||||||
|
fontSize: '1.2em',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
textAlign: 'center',
|
||||||
|
borderRadius: '4px'
|
||||||
|
},
|
||||||
|
p: {
|
||||||
|
margin: '1.8em 8px',
|
||||||
|
letterSpacing: '0.12em',
|
||||||
|
color: '#2c3e50',
|
||||||
|
textAlign: 'justify',
|
||||||
|
lineHeight: 1.8
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inline: {
|
||||||
|
strong: {
|
||||||
|
color: '#16a34a',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
em: {
|
||||||
|
fontStyle: 'italic',
|
||||||
|
color: '#666'
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
color: '#3b82f6',
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transform: (html) => `
|
||||||
|
<section style="font-family: 'Georgia', serif;">
|
||||||
|
<style>
|
||||||
|
:root { --md-primary-color: #16a34a; }
|
||||||
|
</style>
|
||||||
|
${html}
|
||||||
|
</section>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'modern',
|
||||||
|
name: '现代商务',
|
||||||
|
description: '适合商业、科技类文章',
|
||||||
|
styles: 'prose-modern',
|
||||||
|
options: {
|
||||||
|
base: {
|
||||||
|
primaryColor: '#111827',
|
||||||
|
textAlign: 'left',
|
||||||
|
lineHeight: '1.75'
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
h1: {
|
||||||
|
fontSize: '26px',
|
||||||
|
color: '#111827',
|
||||||
|
margin: '32px 0 16px',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
h2: {
|
||||||
|
fontSize: '22px',
|
||||||
|
color: '#111827',
|
||||||
|
margin: '24px 0 12px',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
h3: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#111827',
|
||||||
|
margin: '20px 0 10px',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
p: {
|
||||||
|
fontSize: '15px',
|
||||||
|
color: '#374151',
|
||||||
|
margin: '20px 0',
|
||||||
|
lineHeight: 1.6
|
||||||
|
},
|
||||||
|
blockquote: {
|
||||||
|
fontSize: '15px',
|
||||||
|
color: '#4b5563',
|
||||||
|
borderLeft: '4px solid #e5e7eb',
|
||||||
|
paddingLeft: '1em',
|
||||||
|
margin: '24px 0'
|
||||||
|
},
|
||||||
|
code_pre: {
|
||||||
|
fontSize: '14px',
|
||||||
|
background: '#f9fafb',
|
||||||
|
padding: '1em',
|
||||||
|
borderRadius: '6px',
|
||||||
|
margin: '20px 0'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inline: {
|
||||||
|
strong: {
|
||||||
|
color: '#111827',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
em: {
|
||||||
|
color: '#374151',
|
||||||
|
fontStyle: 'italic'
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
color: '#2563eb',
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transform: (html) => `
|
||||||
|
<section style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
|
||||||
|
<div style="max-width: 100%; margin: 0 auto; color: #374151;">
|
||||||
|
${html}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'creative',
|
||||||
|
name: '创意活力',
|
||||||
|
description: '适合营销、活动类文章',
|
||||||
|
styles: 'prose-creative',
|
||||||
|
options: {
|
||||||
|
base: {
|
||||||
|
primaryColor: '#4299e1',
|
||||||
|
textAlign: 'left',
|
||||||
|
lineHeight: '1.8'
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
h1: {
|
||||||
|
fontSize: '26px',
|
||||||
|
background: 'linear-gradient(45deg, #4299e1, #667eea)',
|
||||||
|
WebkitBackgroundClip: 'text',
|
||||||
|
WebkitTextFillColor: 'transparent',
|
||||||
|
margin: '32px 0 16px',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
h2: {
|
||||||
|
fontSize: '22px',
|
||||||
|
background: 'linear-gradient(45deg, #4299e1, #667eea)',
|
||||||
|
WebkitBackgroundClip: 'text',
|
||||||
|
WebkitTextFillColor: 'transparent',
|
||||||
|
margin: '24px 0 12px',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
h3: {
|
||||||
|
fontSize: '18px',
|
||||||
|
background: 'linear-gradient(45deg, #4299e1, #667eea)',
|
||||||
|
WebkitBackgroundClip: 'text',
|
||||||
|
WebkitTextFillColor: 'transparent',
|
||||||
|
margin: '20px 0 10px',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
p: {
|
||||||
|
fontSize: '15px',
|
||||||
|
color: '#4a5568',
|
||||||
|
margin: '20px 0',
|
||||||
|
lineHeight: 1.6,
|
||||||
|
borderLeft: '3px solid #4299e1',
|
||||||
|
paddingLeft: '1em'
|
||||||
|
},
|
||||||
|
blockquote: {
|
||||||
|
fontSize: '15px',
|
||||||
|
color: '#718096',
|
||||||
|
borderLeft: '4px solid #4299e1',
|
||||||
|
paddingLeft: '1em',
|
||||||
|
margin: '24px 0',
|
||||||
|
background: 'rgba(66, 153, 225, 0.1)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inline: {
|
||||||
|
strong: {
|
||||||
|
color: '#4299e1',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
em: {
|
||||||
|
color: '#4a5568',
|
||||||
|
fontStyle: 'italic'
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
color: '#4299e1',
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transform: (html) => `
|
||||||
|
<section style="font-family: system-ui, sans-serif;">
|
||||||
|
${html}
|
||||||
|
</section>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'minimal',
|
||||||
|
name: '极简风格',
|
||||||
|
description: '简约清新的设计风格',
|
||||||
|
styles: 'prose-minimal',
|
||||||
|
options: {
|
||||||
|
base: {
|
||||||
|
primaryColor: '#000000',
|
||||||
|
textAlign: 'left',
|
||||||
|
lineHeight: '1.8'
|
||||||
|
},
|
||||||
|
block: {
|
||||||
|
h1: {
|
||||||
|
fontSize: '24px',
|
||||||
|
color: '#000000',
|
||||||
|
margin: '36px 0 18px',
|
||||||
|
fontWeight: '500'
|
||||||
|
},
|
||||||
|
h2: {
|
||||||
|
fontSize: '20px',
|
||||||
|
color: '#000000',
|
||||||
|
margin: '28px 0 14px',
|
||||||
|
fontWeight: '500'
|
||||||
|
},
|
||||||
|
h3: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#000000',
|
||||||
|
margin: '24px 0 12px',
|
||||||
|
fontWeight: '500'
|
||||||
|
},
|
||||||
|
p: {
|
||||||
|
fontSize: '15px',
|
||||||
|
color: '#1a1a1a',
|
||||||
|
margin: '24px 0',
|
||||||
|
lineHeight: 1.8
|
||||||
|
},
|
||||||
|
blockquote: {
|
||||||
|
borderLeft: '2px solid #000',
|
||||||
|
margin: '24px 0',
|
||||||
|
paddingLeft: '1.5em',
|
||||||
|
color: '#666666'
|
||||||
|
},
|
||||||
|
code_pre: {
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#1a1a1a',
|
||||||
|
background: '#f5f5f5',
|
||||||
|
padding: '1em',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inline: {
|
||||||
|
strong: {
|
||||||
|
color: '#000000',
|
||||||
|
fontWeight: '600'
|
||||||
|
},
|
||||||
|
em: {
|
||||||
|
color: '#666666',
|
||||||
|
fontStyle: 'italic'
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
color: '#0066cc',
|
||||||
|
textDecoration: 'underline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transform: (html) => `
|
||||||
|
<section style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
|
||||||
|
${html}
|
||||||
|
</section>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
]
|
||||||
51
src/hooks/use-local-storage.ts
Normal file
51
src/hooks/use-local-storage.ts
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
export function useLocalStorage<T>(key: string, initialValue: T) {
|
||||||
|
// 获取初始值
|
||||||
|
const [storedValue, setStoredValue] = useState<T>(() => {
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return initialValue
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const item = window.localStorage.getItem(key)
|
||||||
|
return item ? JSON.parse(item) : initialValue
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
return initialValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听其他标签页的更改
|
||||||
|
useEffect(() => {
|
||||||
|
function handleStorageChange(e: StorageEvent) {
|
||||||
|
if (e.key === key) {
|
||||||
|
try {
|
||||||
|
const item = e.newValue
|
||||||
|
setStoredValue(item ? JSON.parse(item) : initialValue)
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('storage', handleStorageChange)
|
||||||
|
return () => window.removeEventListener('storage', handleStorageChange)
|
||||||
|
}, [key, initialValue])
|
||||||
|
|
||||||
|
// 更新存储的值
|
||||||
|
const setValue = (value: T | ((val: T) => T)) => {
|
||||||
|
try {
|
||||||
|
const valueToStore = value instanceof Function ? value(storedValue) : value
|
||||||
|
setStoredValue(valueToStore)
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window.localStorage.setItem(key, JSON.stringify(valueToStore))
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return [storedValue, setValue] as const
|
||||||
|
}
|
||||||
202
src/lib/markdown.ts
Normal file
202
src/lib/markdown.ts
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
import { marked, type Tokens } from 'marked'
|
||||||
|
import type { CSSProperties } from 'react'
|
||||||
|
|
||||||
|
// 配置 marked 选项
|
||||||
|
marked.setOptions({
|
||||||
|
gfm: true,
|
||||||
|
breaks: true,
|
||||||
|
headerIds: false,
|
||||||
|
mangle: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 将 React CSSProperties 转换为 CSS 字符串
|
||||||
|
function cssPropertiesToString(style: React.CSSProperties = {}): string {
|
||||||
|
return Object.entries(style)
|
||||||
|
.map(([key, value]) => {
|
||||||
|
// 转换驼峰命名为连字符命名
|
||||||
|
const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||||
|
// 处理对象类型的值
|
||||||
|
if (value && typeof value === 'object') {
|
||||||
|
if ('toString' in value) {
|
||||||
|
return `${cssKey}: ${value.toString()}`
|
||||||
|
}
|
||||||
|
return `${cssKey}: ${JSON.stringify(value)}`
|
||||||
|
}
|
||||||
|
return `${cssKey}: ${value}`
|
||||||
|
})
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(';')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将基础样式选项转换为 CSS 字符串
|
||||||
|
function baseStylesToString(base: RendererOptions['base'] = {}): string {
|
||||||
|
const styles: string[] = []
|
||||||
|
|
||||||
|
if (base.primaryColor) {
|
||||||
|
styles.push(`--md-primary-color: ${base.primaryColor}`)
|
||||||
|
}
|
||||||
|
if (base.textAlign) {
|
||||||
|
styles.push(`text-align: ${base.textAlign}`)
|
||||||
|
}
|
||||||
|
if (base.lineHeight) {
|
||||||
|
styles.push(`line-height: ${base.lineHeight}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
return styles.join(';')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function convertToWechat(markdown: string, options: RendererOptions = {}): string {
|
||||||
|
const renderer = new marked.Renderer()
|
||||||
|
// 标题渲染
|
||||||
|
renderer.heading = ({ tokens, depth }: { tokens: Tokens.Generic[]; depth: number }) => {
|
||||||
|
const style = options.block?.[`h${depth}` as keyof RendererOptions['block']]
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
const content = tokens.map(token => token.text).join('')
|
||||||
|
return `<h${depth}${styleStr ? ` style="${styleStr}"` : ''}>${content}</h${depth}>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 段落渲染
|
||||||
|
renderer.paragraph = (text) => {
|
||||||
|
const style = options.block?.p
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
const content = typeof text === 'object' ? (text.text || text.toString()) : text
|
||||||
|
|
||||||
|
return `<p${styleStr ? ` style="${styleStr}"` : ''}>${content}</p>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 引用渲染
|
||||||
|
renderer.blockquote = (quote) => {
|
||||||
|
const style = options.block?.blockquote
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
const content = typeof quote === 'object' ? (quote.text || quote.toString()) : quote
|
||||||
|
|
||||||
|
return `<blockquote${styleStr ? ` style="${styleStr}"` : ''}>${content}</blockquote>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 代码块渲染
|
||||||
|
renderer.code = ({ text, lang = '' }: { text: string; lang?: string }) => {
|
||||||
|
const style = options.block?.code_pre
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<pre${styleStr ? ` style="${styleStr}"` : ''}><code class="language-${lang}">${text}</code></pre>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 行内代码渲染
|
||||||
|
renderer.codespan = (code) => {
|
||||||
|
const style = options.inline?.codespan
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<code${styleStr ? ` style="${styleStr}"` : ''}>${code}</code>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 强调（斜体）渲染
|
||||||
|
renderer.em = (text) => {
|
||||||
|
const style = options.inline?.em
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<em${styleStr ? ` style="${styleStr}"` : ''}>${text}</em>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加粗渲染
|
||||||
|
renderer.strong = (text) => {
|
||||||
|
const style = options.inline?.strong
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<strong${styleStr ? ` style="${styleStr}"` : ''}>${text}</strong>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 链接渲染
|
||||||
|
renderer.link = (href, title, text) => {
|
||||||
|
const style = options.inline?.link
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<a href="${href}"${title ? ` title="${title}"` : ''}${styleStr ? ` style="${styleStr}"` : ''}>${text}</a>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片渲染
|
||||||
|
renderer.image = (href, title, text) => {
|
||||||
|
const style = options.block?.image
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<img src="${href}" alt="${text}"${title ? ` title="${title}"` : ''}${styleStr ? ` style="${styleStr}"` : ''} />`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 列表渲染
|
||||||
|
renderer.list = (token: Tokens.List) => {
|
||||||
|
const tag = token.ordered ? 'ol' : 'ul'
|
||||||
|
const style = options.block?.[token.ordered ? 'ol' : 'ul']
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<${tag}${styleStr ? ` style="${styleStr}"` : ''}>${token.items.map(item => item.text).join('')}</${tag}>`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 列表项渲染
|
||||||
|
renderer.listitem = (text) => {
|
||||||
|
const style = options.inline?.listitem
|
||||||
|
const styleStr = cssPropertiesToString(style)
|
||||||
|
return `<li${styleStr ? ` style="${styleStr}"` : ''}>${text}</li>`
|
||||||
|
}
|
||||||
|
|
||||||
|
marked.use({ renderer })
|
||||||
|
|
||||||
|
// 转换 Markdown 为 HTML
|
||||||
|
const html = marked.parse(markdown, { async: false }) as string
|
||||||
|
|
||||||
|
// 应用基础样式
|
||||||
|
const baseStyles = baseStylesToString(options.base)
|
||||||
|
return baseStyles ? `<div style="${baseStyles}">${html}</div>` : html
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换为小红书格式
|
||||||
|
export function convertToXiaohongshu(markdown: string): string {
|
||||||
|
// 配置小红书特定的样式
|
||||||
|
const xiaohongshuRenderer = new marked.Renderer()
|
||||||
|
|
||||||
|
xiaohongshuRenderer.heading = (text, level) => {
|
||||||
|
const fontSize = {
|
||||||
|
1: '20px',
|
||||||
|
2: '18px',
|
||||||
|
3: '16px',
|
||||||
|
4: '15px',
|
||||||
|
5: '14px',
|
||||||
|
6: '14px'
|
||||||
|
}[level]
|
||||||
|
|
||||||
|
return `<h${level} style="margin-top: 25px; margin-bottom: 12px; font-weight: bold; font-size: ${fontSize}; color: #222;">${text}</h${level}>`
|
||||||
|
}
|
||||||
|
|
||||||
|
xiaohongshuRenderer.paragraph = (text) => {
|
||||||
|
return `<p style="margin-bottom: 16px; line-height: 1.6; font-size: 15px; color: #222;">${text}</p>`
|
||||||
|
}
|
||||||
|
|
||||||
|
marked.setOptions({ renderer: xiaohongshuRenderer })
|
||||||
|
|
||||||
|
let html = marked(markdown)
|
||||||
|
html = `<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; color: #222; line-height: 1.6;">${html}</div>`
|
||||||
|
|
||||||
|
return html
|
||||||
|
}
|
||||||
|
|
||||||
|
type RendererOptions = {
|
||||||
|
base?: {
|
||||||
|
primaryColor?: string
|
||||||
|
textAlign?: string
|
||||||
|
lineHeight?: string | number
|
||||||
|
}
|
||||||
|
block?: {
|
||||||
|
h1?: CSSProperties
|
||||||
|
h2?: CSSProperties
|
||||||
|
h3?: CSSProperties
|
||||||
|
h4?: CSSProperties
|
||||||
|
h5?: CSSProperties
|
||||||
|
h6?: CSSProperties
|
||||||
|
p?: CSSProperties
|
||||||
|
blockquote?: CSSProperties
|
||||||
|
code_pre?: CSSProperties
|
||||||
|
image?: CSSProperties
|
||||||
|
ul?: CSSProperties
|
||||||
|
ol?: CSSProperties
|
||||||
|
}
|
||||||
|
inline?: {
|
||||||
|
strong?: CSSProperties
|
||||||
|
em?: CSSProperties
|
||||||
|
codespan?: CSSProperties
|
||||||
|
link?: CSSProperties
|
||||||
|
listitem?: CSSProperties
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { RendererOptions }
|
||||||
31
src/lib/types.ts
Normal file
31
src/lib/types.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import type { CSSProperties } from 'react'
|
||||||
|
|
||||||
|
export interface RendererOptions {
|
||||||
|
base?: {
|
||||||
|
primaryColor?: string
|
||||||
|
textAlign?: string
|
||||||
|
lineHeight?: string
|
||||||
|
}
|
||||||
|
block?: {
|
||||||
|
h1?: CSSProperties
|
||||||
|
h2?: CSSProperties
|
||||||
|
h3?: CSSProperties
|
||||||
|
h4?: CSSProperties
|
||||||
|
h5?: CSSProperties
|
||||||
|
h6?: CSSProperties
|
||||||
|
p?: CSSProperties
|
||||||
|
blockquote?: CSSProperties
|
||||||
|
code_pre?: CSSProperties
|
||||||
|
code?: CSSProperties
|
||||||
|
image?: CSSProperties
|
||||||
|
ol?: CSSProperties
|
||||||
|
ul?: CSSProperties
|
||||||
|
}
|
||||||
|
inline?: {
|
||||||
|
strong?: CSSProperties
|
||||||
|
em?: CSSProperties
|
||||||
|
codespan?: CSSProperties
|
||||||
|
link?: CSSProperties
|
||||||
|
listitem?: CSSProperties
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/lib/utils.ts
Normal file
11
src/lib/utils.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { type ClassValue, clsx } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function markdownToHtml(markdown: string, template: string) {
|
||||||
|
// 这里添加 markdown 转换逻辑
|
||||||
|
return markdown
|
||||||
|
}
|
||||||
16
src/styles/templates/wechat.css
Normal file
16
src/styles/templates/wechat.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.wechat-template {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell;
|
||||||
|
line-height: 1.75;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat-template h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wechat-template p {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
15
src/styles/templates/xiaohongshu.css
Normal file
15
src/styles/templates/xiaohongshu.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.xiaohongshu-template {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xiaohongshu-template h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xiaohongshu-template p {
|
||||||
|
margin-bottom: 0.8em;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
20
src/types/template.ts
Normal file
20
src/types/template.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
export interface SubTemplate {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
styles: string
|
||||||
|
transform: (content: string) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Template {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
styles: string
|
||||||
|
subTemplates?: SubTemplate[]
|
||||||
|
transform: (content: string) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TemplateProps {
|
||||||
|
content: string
|
||||||
|
className?: string
|
||||||
|
subTemplateId?: string
|
||||||
|
}
|
||||||
84
tailwind.config.ts
Normal file
84
tailwind.config.ts
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import { fontFamily } from "tailwindcss/defaultTheme"
|
||||||
|
import type { Config } from "tailwindcss"
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
darkMode: ["class"],
|
||||||
|
content: [
|
||||||
|
'./pages/**/*.{ts,tsx}',
|
||||||
|
'./components/**/*.{ts,tsx}',
|
||||||
|
'./app/**/*.{ts,tsx}',
|
||||||
|
'./src/**/*.{ts,tsx}',
|
||||||
|
],
|
||||||
|
prefix: "",
|
||||||
|
theme: {
|
||||||
|
container: {
|
||||||
|
center: true,
|
||||||
|
padding: "2rem",
|
||||||
|
screens: {
|
||||||
|
"2xl": "1400px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
border: "hsl(var(--border))",
|
||||||
|
input: "hsl(var(--input))",
|
||||||
|
ring: "hsl(var(--ring))",
|
||||||
|
background: "hsl(var(--background))",
|
||||||
|
foreground: "hsl(var(--foreground))",
|
||||||
|
primary: {
|
||||||
|
DEFAULT: "hsl(var(--primary))",
|
||||||
|
foreground: "hsl(var(--primary-foreground))",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: "hsl(var(--secondary))",
|
||||||
|
foreground: "hsl(var(--secondary-foreground))",
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: "hsl(var(--destructive))",
|
||||||
|
foreground: "hsl(var(--destructive-foreground))",
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: "hsl(var(--muted))",
|
||||||
|
foreground: "hsl(var(--muted-foreground))",
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: "hsl(var(--accent))",
|
||||||
|
foreground: "hsl(var(--accent-foreground))",
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: "hsl(var(--popover))",
|
||||||
|
foreground: "hsl(var(--popover-foreground))",
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: "hsl(var(--card))",
|
||||||
|
foreground: "hsl(var(--card-foreground))",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: "var(--radius)",
|
||||||
|
md: "calc(var(--radius) - 2px)",
|
||||||
|
sm: "calc(var(--radius) - 4px)",
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["var(--font-sans)", ...fontFamily.sans],
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
"accordion-down": {
|
||||||
|
from: { height: "0" },
|
||||||
|
to: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
},
|
||||||
|
"accordion-up": {
|
||||||
|
from: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
to: { height: "0" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
"accordion-down": "accordion-down 0.2s ease-out",
|
||||||
|
"accordion-up": "accordion-up 0.2s ease-out",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
|
||||||
|
} satisfies Config
|
||||||
|
|
||||||
|
export default config
|
||||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user