feat: add agent-first minitool studio MVP

2026-09-17 21:54:33 +08:00
commit 74a8f7cdf3
51 changed files with 3855 additions and 0 deletions
@@ -0,0 +1,9 @@
+{
+  "name": "rednote-minitool",
+  "private": true,
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  }
+}
@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { createRoot } from "react-dom/client";
+
+const cards = [
+  { icon: "☀", title: "去看一场日落", detail: "找一个视野开阔的地方，留半小时给天空。" },
+  { icon: "✎", title: "写下三个小确幸", detail: "记录今天让你嘴角上扬的三个瞬间。" },
+  { icon: "♧", title: "散步到一条新街", detail: "不设目的地，走进一条以前没有去过的小路。" },
+];
+
+function App() {
+  const [card, setCard] = useState(cards[0]);
+  const draw = () => setCard(cards[(cards.indexOf(card) + 1) % cards.length]);
+  return <main className="page">
+    <header><span>WEEKEND NOTE</span><b>VOL. 01</b></header>
+    <section className="intro"><small>A LITTLE PLAN FOR TODAY</small><h1>今天，给自己<br /><em>一点小期待。</em></h1></section>
+    <article><div className="icon">{card.icon}</div><p>YOUR WEEKEND NOTE</p><h2>{card.title}</h2><div className="rule" /><span>{card.detail}</span></article>
+    <button onClick={draw}>换一张灵感 <b>↗</b></button>
+    <footer>慢一点，也很好。</footer>
+  </main>;
+}
+
+createRoot(document.getElementById("root")).render(<App />);
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <title>我的小工具</title>
+  <link rel="stylesheet" href="./assets/style.css">
+</head>
+<body>
+  <div id="root"></div>
+  <script src="./assets/main.js"></script>
+</body>
+</html>
@@ -0,0 +1,21 @@
+* { box-sizing: border-box; }
+html, body, #root { min-height: 100%; }
+body { margin: 0; background: #f4f1e8; color: #294136; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
+button { font: inherit; -webkit-appearance: none; appearance: none; }
+button:focus { outline: 2px solid #b7653f; outline-offset: 3px; }
+.page { width: 100%; min-height: 100vh; padding: 28px 24px 20px; padding-top: calc(28px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); padding-bottom: calc(20px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
+header { display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: 2px; }
+.intro { padding: 54px 0 30px; }
+.intro small { color: #7f897e; font-size: 8px; letter-spacing: 2px; }
+h1 { margin: 13px 0 0; font-size: 35px; line-height: 1.42; font-weight: 650; }
+h1 em { color: #b7653f; font-style: normal; }
+article { min-height: 310px; padding: 30px 27px; background: #fffdf5; border: 1px solid #e4dcc8; border-radius: 16px; box-shadow: 0 14px 34px rgba(54, 64, 51, .07); }
+.icon { color: #b7653f; font-size: 52px; }
+article p { color: #979886; font-size: 8px; letter-spacing: 1.7px; margin-top: 30px; }
+article h2 { margin: 13px 0 20px; font-size: 23px; }
+.rule { width: 32px; height: 2px; margin-bottom: 20px; background: #b7653f; }
+article span { color: #707a70; font-size: 13px; line-height: 1.8; }
+.page > button { width: 100%; margin-top: 18px; padding: 17px 20px; border: 0; border-radius: 10px; background: #345644; color: #fffdf5; text-align: left; }
+.page > button b { float: right; }
+.page > button:active { opacity: .78; }
+footer { padding: 25px 0 5px; color: #92978f; text-align: center; font-size: 10px; }