feat: init commit

liujuntao123 · Nov 12, 2024 · f549f4c · f549f4c
commit f549f4c
Show file tree

Hide file tree

Showing 38 changed files with 4,556 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/Clip_2024-11-12_09-28-22.png b/Clip_2024-11-12_09-28-22.png
diff --git a/Clip_2024-11-12_09-32-43.png b/Clip_2024-11-12_09-32-43.png
diff --git a/Clip_2024-11-12_09-33-05.png b/Clip_2024-11-12_09-33-05.png
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>中国历史卡片浏览器</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html> 
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "chinese-history-viewer",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.358.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swiper": "^11.1.14"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.6",
+    "vite-plugin-svgr": "^4.3.0"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 
diff --git a/prompt/dynasty-card-generator.txt b/prompt/dynasty-card-generator.txt
@@ -0,0 +1,150 @@
+我输入朝代信息后，你根据下面的模板生成新的svg给我。我会给你标记“生成点”。
+生成点说明：
+【朝代名称】：朝代名词
+【起止年份】：不要带“公元”两个字
+【中心图案】：注重细节，注重完整性。尺寸：(110x100),x轴位置：75，y轴位置：110
+【文字说明】：中心图案的文字说明，不多于10个字。text-anchor="middle"；font-family="STKaiti, KaiTi"；font-size="12"
+【开国皇帝】：开国皇帝
+【末代皇帝】：末代皇帝
+【朝代持续时间】：朝代持续时间
+【一句诗总结朝代】：一句诗总结朝代
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 400">
+  <!-- 背景 -->
+  <rect width="260" height="400" fill="#f4e4bc"/>
+
+  <!-- 装饰边框 -->
+  <!-- 主边框 -->
+  <rect x="12" y="12" width="236" height="376"
+        fill="none" stroke="#8b4513" stroke-width="2"/>
+
+  <!-- 内层装饰边框 -->
+  <rect x="18" y="18" width="224" height="364"
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+
+  <!-- 四角云纹装饰 -->
+  <!-- 左上角 -->
+  <path d="M18 18 Q25 25 18 32 Q25 39 18 46 M25 18 Q32 25 25 32 Q32 39 25 46"
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+  <!-- 右上角 -->
+  <path d="M242 18 Q235 25 242 32 Q235 39 242 46 M235 18 Q228 25 235 32 Q228 39 235 46"
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+  <!-- 左下角 -->
+  <path d="M18 382 Q25 375 18 368 Q25 361 18 354 M25 382 Q32 375 25 368 Q32 361 25 354"
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+  <!-- 右下角 -->
+  <path d="M242 382 Q235 375 242 368 Q235 361 242 354 M235 382 Q228 375 235 368 Q228 361 235 354"
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+
+  <!-- 回字纹装饰 - 中点装饰 -->
+  <!-- 左边中点 -->
+  <path d="M12 194 H25 V207 H12" 
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+  <!-- 右边中点 -->
+  <path d="M248 194 H235 V207 H248" 
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+  <!-- 上边中点 -->
+  <path d="M124 12 V25 H137 V12" 
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+  <!-- 下边中点 -->
+  <path d="M124 388 V375 H137 V388" 
+        fill="none" stroke="#8b4513" stroke-width="1"/>
+
+  <!-- 标题 -->
+  <text x="135" y="65"
+        text-anchor="middle"
+        font-family="STXingkai, STLiti, LiSu, 华文行楷, 隶书"
+        font-size="38"
+        font-weight="bold"
+        fill="#8b4513"
+        style="letter-spacing: 6px;">【生成点：朝代名称】</text>
+
+  <!-- 年号 -->
+  <text x="130" y="100"
+        text-anchor="middle"
+        font-family="STKaiti, KaiTi"
+        font-size="18"
+        fill="#8b4513">【生成点：起止年份，不要带“公元”两个字】</text>
+
+ 【生成点：中心图案】
+ 【生成点：文字说明】
+
+  <!-- 开国皇帝 -->
+  <g transform="translate(40, 230) scale(0.65)">
+    <g transform="translate(35, 15)">
+      <!-- 冕冠 -->
+      <path d="M10 0 H40 L45 10 H5 Z" fill="#8b4513"/>
+      <path d="M15 5 H35" stroke="#f4e4bc" stroke-width="2"/>
+
+      <!-- 脸部和身体 -->
+      <circle cx="25" cy="20" r="10" fill="#8b4513"/>
+      <path d="M15 35 L35 35 L40 60 L10 60 Z" fill="#8b4513"/>
+
+      <!-- 装饰纹样：原始图腾纹样 -->
+      <path d="M20 35 L30 35 M22 45 L28 45"
+            stroke="#f4e4bc" stroke-width="2"/>
+    </g>
+
+    <text x="60" y="110"
+          text-anchor="middle"
+          font-family="STKaiti, KaiTi"
+          font-size="16"
+          fill="#8b4513">【生成点：开国皇帝】</text>
+  </g>
+
+  <!-- 末代皇帝 -->
+  <g transform="translate(155, 230) scale(0.65)">
+    <g transform="translate(35, 15) rotate(15)">
+      <!-- 歪斜的冕冠 -->
+      <path d="M10 0 H40 L45 10 H5 Z"
+            fill="#8b4513" style="opacity: 0.7"/>
+
+      <!-- 脸部和身体 -->
+      <circle cx="25" cy="20" r="10" fill="#8b4513" style="opacity: 0.7"/>
+      <path d="M15 35 L35 35 L38 60 L12 60 Z"
+            fill="#8b4513" style="opacity: 0.7"/>
+
+      <!-- 破损效果 -->
+      <path d="M8 5 L12 5 M38 8 L42 8 M15 40 L20 40"
+            stroke="#f4e4bc" stroke-width="1"/>
+    </g>
+
+    <text x="60" y="110"
+          text-anchor="middle"
+          font-family="STKaiti, KaiTi"
+          font-size="16"
+          fill="#8b4513">【生成点：末代皇帝】</text>
+  </g>
+
+  <!-- 时间变迁线 -->
+  <g transform="translate(115, 300)">
+    <path d="M0 0 L40 0"
+          stroke="#8b4513"
+          stroke-width="2"
+          stroke-dasharray="5 3"
+          fill="none"/>
+    <path d="M40 0 L33 -4 L33 4 Z"
+          fill="#8b4513"/>
+    <text x="20" y="-8"
+          text-anchor="middle"
+          font-family="STKaiti, KaiTi"
+          font-size="11"
+          fill="#8b4513">【生成点：朝代持续时间】</text>
+  </g>
+
+  <!-- 朝代特点 -->
+  <text x="140" y="340"
+        text-anchor="middle"
+        font-family="STXinwei, STKaiti, 华文新魏, 华文楷体"
+        font-size="15"
+        fill="#8b4513"
+        style="letter-spacing: 1px;
+               text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.3);">【生成点：一句诗总结朝代】</text>
+  <text x="140" y="360"
+        text-anchor="middle"
+        font-family="STXinwei, STKaiti, 华文新魏, 华文楷体"
+        font-size="15"
+        fill="#8b4513"
+        style="letter-spacing: 1px;
+               text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.3);">【生成点：一句诗总结朝代】</text>
+
+</svg>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,18 @@
+# 历史卡片
+
+*感受中国古代历史之美*
+
+本项目使用AI绘制了中国历朝代的卡片，适用于移动端查看。
+
+
+## 项目截图
+
+![alt text](Clip_2024-11-12_09-32-43.png)
+
+![alt text](Clip_2024-11-12_09-33-05.png)
+
+![alt text](Clip_2024-11-12_09-28-22.png)
+
+- prompt可以参考prompt/dynasty-card-generator.txt
+
+如果觉得不错，请给个star，谢谢！
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import HistoryCardViewer from './components/HistoryCardViewer'
+
+function App() {
+  return (
+    <div className="app">
+      <HistoryCardViewer />
+    </div>
+  )
+}
+
+export default App