@lmy54321/design-system 1.1.3 → 1.2.0

package/template/src/pages/DeployPage.tsx

@@ -0,0 +1,290 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Btn, IconFont, cn } from "@lmy54321/design-system";
+import { motion, AnimatePresence } from "motion/react";
+
+type DeployStatus = "idle" | "building" | "uploading" | "done" | "error";
+
+const STEPS = [
+  { key: "building", label: "打包项目", icon: "system-components" },
+  { key: "uploading", label: "上传资源", icon: "cloud-upload" },
+  { key: "done", label: "部署完成", icon: "check-circle" },
+];
+
+export function DeployPage() {
+  const navigate = useNavigate();
+  const [status, setStatus] = useState<DeployStatus>("idle");
+  const [progress, setProgress] = useState(0);
+
+  const handleDeploy = async () => {
+    setStatus("building");
+    setProgress(0);
+
+    // 模拟打包
+    for (let i = 0; i <= 40; i += 5) {
+      await new Promise((r) => setTimeout(r, 200));
+      setProgress(i);
+    }
+
+    // 模拟上传
+    setStatus("uploading");
+    for (let i = 40; i <= 90; i += 5) {
+      await new Promise((r) => setTimeout(r, 150));
+      setProgress(i);
+    }
+
+    // 完成
+    setProgress(100);
+    setStatus("done");
+  };
+
+  const isDeploying = status === "building" || status === "uploading";
+
+  return (
+    <div className="min-h-[100dvh] bg-background">
+      {/* Header */}
+      <div className="border-b border-border bg-card px-[32px] py-[24px]">
+        <div className="max-w-[800px] mx-auto">
+          <div className="flex items-center gap-[12px] mb-[8px]">
+            <button
+              onClick={() => navigate("/dev")}
+              className="size-[36px] rounded-full bg-black/[0.04] flex items-center justify-center active:bg-black/[0.08]"
+            >
+              <IconFont name="chevron-left" size="20px" />
+            </button>
+            <h1 className="text-[24px] font-bold text-foreground">部署预览</h1>
+          </div>
+          <p className="text-[14px] text-muted-foreground ml-[48px]">
+            一键打包并部署 Demo，生成手机可扫描的预览链接
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-[800px] mx-auto p-[32px]">
+        {/* 部署说明 */}
+        <div className="bg-black/[0.02] rounded-[20px] p-[24px] mb-[32px]">
+          <h3 className="text-[15px] font-medium text-foreground mb-[12px]">
+            部署说明
+          </h3>
+          <ul className="space-y-[8px]">
+            <li className="flex items-start gap-[8px] text-[13px] text-muted-foreground">
+              <IconFont
+                name="check-circle"
+                size="16px"
+                className="text-[#22C55E] shrink-0 mt-[1px]"
+              />
+              只会部署 Demo 演示页面（<code className="px-[4px] py-[1px] bg-black/[0.04] rounded text-[12px]">/</code> 路径），开发工具页不会出现
+            </li>
+            <li className="flex items-start gap-[8px] text-[13px] text-muted-foreground">
+              <IconFont
+                name="check-circle"
+                size="16px"
+                className="text-[#22C55E] shrink-0 mt-[1px]"
+              />
+              部署后会生成一个链接和二维码，手机扫码即可预览
+            </li>
+            <li className="flex items-start gap-[8px] text-[13px] text-muted-foreground">
+              <IconFont
+                name="check-circle"
+                size="16px"
+                className="text-[#22C55E] shrink-0 mt-[1px]"
+              />
+              每次部署会覆盖上一次的内容，链接保持不变
+            </li>
+          </ul>
+        </div>
+
+        {/* 部署进度 */}
+        <AnimatePresence mode="wait">
+          {status === "idle" && (
+            <motion.div
+              key="idle"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="text-center py-[48px]"
+            >
+              <div className="size-[80px] rounded-[24px] bg-primary/10 flex items-center justify-center mx-auto mb-[20px]">
+                <IconFont
+                  name="cloud-upload"
+                  size="40px"
+                  className="text-primary"
+                />
+              </div>
+              <h3 className="text-[18px] font-medium text-foreground mb-[8px]">
+                准备就绪
+              </h3>
+              <p className="text-[14px] text-muted-foreground mb-[32px]">
+                点击下方按钮开始部署
+              </p>
+              <Btn
+                variant="primary"
+                size="large"
+                label="开始部署"
+                icon={<IconFont name="cloud-upload" size="18px" />}
+                onClick={handleDeploy}
+              />
+            </motion.div>
+          )}
+
+          {isDeploying && (
+            <motion.div
+              key="deploying"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="py-[32px]"
+            >
+              {/* 步骤指示器 */}
+              <div className="flex items-center justify-center gap-[24px] mb-[40px]">
+                {STEPS.map((step, idx) => {
+                  const isActive =
+                    (step.key === "building" && status === "building") ||
+                    (step.key === "uploading" && status === "uploading") ||
+                    step.key === "done";
+                  const isDone =
+                    (step.key === "building" &&
+                      (status === "uploading" || status === "done")) ||
+                    (step.key === "uploading" && status === "done");
+                  return (
+                    <div
+                      key={step.key}
+                      className="flex items-center gap-[8px]"
+                    >
+                      {idx > 0 && (
+                        <div
+                          className={cn(
+                            "w-[32px] h-[2px] rounded-full",
+                            isDone ? "bg-primary" : "bg-border"
+                          )}
+                        />
+                      )}
+                      <div
+                        className={cn(
+                          "size-[36px] rounded-full flex items-center justify-center transition-colors",
+                          isDone
+                            ? "bg-primary"
+                            : isActive && status === step.key
+                            ? "bg-primary/20"
+                            : "bg-black/[0.04]"
+                        )}
+                      >
+                        <IconFont
+                          name={step.icon}
+                          size="18px"
+                          className={cn(
+                            isDone
+                              ? "text-white"
+                              : isActive && status === step.key
+                              ? "text-primary"
+                              : "text-muted-foreground"
+                          )}
+                        />
+                      </div>
+                      <span
+                        className={cn(
+                          "text-[13px]",
+                          isDone || (isActive && status === step.key)
+                            ? "text-foreground font-medium"
+                            : "text-muted-foreground"
+                        )}
+                      >
+                        {step.label}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* 进度条 */}
+              <div className="max-w-[400px] mx-auto">
+                <div className="h-[6px] bg-black/[0.06] rounded-full overflow-hidden">
+                  <motion.div
+                    className="h-full bg-primary rounded-full"
+                    initial={{ width: 0 }}
+                    animate={{ width: `${progress}%` }}
+                    transition={{ ease: "easeOut" }}
+                  />
+                </div>
+                <p className="text-center text-[13px] text-muted-foreground mt-[12px]">
+                  {status === "building" ? "正在打包..." : "正在上传..."}
+                  {progress}%
+                </p>
+              </div>
+            </motion.div>
+          )}
+
+          {status === "done" && (
+            <motion.div
+              key="done"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="text-center py-[32px]"
+            >
+              <div className="size-[64px] rounded-full bg-[#22C55E]/10 flex items-center justify-center mx-auto mb-[16px]">
+                <IconFont
+                  name="check"
+                  size="32px"
+                  className="text-[#22C55E]"
+                />
+              </div>
+              <h3 className="text-[20px] font-semibold text-foreground mb-[8px]">
+                部署成功
+              </h3>
+              <p className="text-[14px] text-muted-foreground mb-[24px]">
+                手机扫描下方二维码即可预览
+              </p>
+
+              {/* 二维码区域（占位） */}
+              <div className="inline-block bg-white p-[16px] rounded-[20px] shadow-lg mb-[24px]">
+                <div className="size-[180px] bg-black/[0.04] rounded-[12px] flex items-center justify-center">
+                  <div className="text-center">
+                    <IconFont
+                      name="qrcode"
+                      size="48px"
+                      className="text-muted-foreground mb-[8px]"
+                    />
+                    <p className="text-[11px] text-muted-foreground">
+                      二维码预览
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* 链接 */}
+              <div className="bg-black/[0.02] rounded-[12px] p-[12px] max-w-[400px] mx-auto mb-[24px]">
+                <p className="text-[12px] text-muted-foreground mb-[4px]">
+                  预览链接
+                </p>
+                <p className="text-[13px] text-accent font-mono break-all">
+                  https://your-project.cloudstudio.app
+                </p>
+              </div>
+
+              <div className="flex items-center justify-center gap-[12px]">
+                <Btn
+                  variant="ghost"
+                  size="middle"
+                  label="返回入口"
+                  icon={null}
+                  onClick={() => navigate("/dev")}
+                />
+                <Btn
+                  variant="primary"
+                  size="middle"
+                  label="重新部署"
+                  icon={<IconFont name="refresh" size="16px" />}
+                  onClick={() => {
+                    setStatus("idle");
+                    setProgress(0);
+                  }}
+                />
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

package/template/src/pages/DevPortal.tsx

@@ -0,0 +1,161 @@
+import { useNavigate } from "react-router-dom";
+import { Btn, IconFont, cn } from "@lmy54321/design-system";
+import { motion } from "motion/react";
+
+interface PortalCard {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  route: string;
+  colorClass: string;
+  badge?: string;
+}
+
+const PORTAL_CARDS: PortalCard[] = [
+  {
+    id: "demo",
+    title: "Demo 演示",
+    description: "查看当前项目的业务 Demo，这也是手机预览看到的内容",
+    icon: "mobile",
+    route: "/",
+    colorClass: "bg-[#22C55E]",
+  },
+  {
+    id: "components",
+    title: "组件库",
+    description: "浏览所有可用组件的效果和配置项，开发时随时查阅",
+    icon: "component",
+    route: "/components",
+    colorClass: "bg-[#367BF6]",
+  },
+  {
+    id: "sync",
+    title: "规范同步",
+    description: "检查设计规范是否有更新，可视化对比后选择性合并",
+    icon: "refresh",
+    route: "/sync",
+    colorClass: "bg-[#FFB800]",
+    badge: "有更新",
+  },
+  {
+    id: "deploy",
+    title: "部署预览",
+    description: "一键打包并部署到手机端，扫码即可预览效果",
+    icon: "cloud-upload",
+    route: "/deploy",
+    colorClass: "bg-[#FF293B]",
+  },
+];
+
+export function DevPortal() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="min-h-[100dvh] bg-background px-[32px] py-[48px]">
+      {/* Header */}
+      <div className="max-w-[800px] mx-auto mb-[48px]">
+        <motion.h1
+          initial={{ opacity: 0, y: -12 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-[32px] font-bold text-foreground mb-[8px]"
+        >
+          开发者入口
+        </motion.h1>
+        <motion.p
+          initial={{ opacity: 0, y: -8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="text-[16px] text-muted-foreground"
+        >
+          选择你要进行的操作，所有功能都可以通过点击完成
+        </motion.p>
+      </div>
+
+      {/* Cards Grid */}
+      <div className="max-w-[800px] mx-auto grid grid-cols-2 gap-[20px]">
+        {PORTAL_CARDS.map((card, idx) => (
+          <motion.button
+            key={card.id}
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.15 + idx * 0.08 }}
+            whileHover={{ y: -4 }}
+            whileTap={{ scale: 0.98 }}
+            onClick={() => navigate(card.route)}
+            className="group relative bg-card rounded-[24px] p-[24px] text-left border border-border hover:border-primary/30 hover:shadow-lg transition-shadow"
+          >
+            {/* Badge */}
+            {card.badge && (
+              <span className="absolute top-[16px] right-[16px] px-[8px] py-[3px] rounded-full bg-destructive text-white text-[11px] font-medium">
+                {card.badge}
+              </span>
+            )}
+
+            {/* Icon */}
+            <div
+              className={cn(
+                "size-[48px] rounded-[16px] flex items-center justify-center mb-[16px]",
+                card.colorClass
+              )}
+            >
+              <IconFont name={card.icon} size="24px" className="text-white" />
+            </div>
+
+            {/* Content */}
+            <h3 className="text-[18px] font-semibold text-foreground mb-[8px] group-hover:text-primary transition-colors">
+              {card.title}
+            </h3>
+            <p className="text-[14px] text-muted-foreground leading-relaxed">
+              {card.description}
+            </p>
+
+            {/* Arrow */}
+            <div className="absolute bottom-[24px] right-[24px] size-[32px] rounded-full bg-black/[0.04] flex items-center justify-center group-hover:bg-primary/10 transition-colors">
+              <IconFont
+                name="chevron-right"
+                size="16px"
+                className="text-muted-foreground group-hover:text-primary transition-colors"
+              />
+            </div>
+          </motion.button>
+        ))}
+      </div>
+
+      {/* Quick Links */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.6 }}
+        className="max-w-[800px] mx-auto mt-[48px] p-[24px] bg-black/[0.02] rounded-[16px]"
+      >
+        <h3 className="text-[14px] font-medium text-foreground mb-[12px]">
+          快速链接
+        </h3>
+        <div className="flex gap-[16px] flex-wrap items-center">
+          <a
+            href="https://gist.github.com/lmy910510/a630f17c0141e076f7f669d1f663bae6"
+            target="_blank"
+            rel="noreferrer"
+            className="text-[13px] text-accent hover:underline flex items-center gap-[4px]"
+          >
+            <IconFont name="file" size="14px" />
+            规范文档
+          </a>
+          <a
+            href="https://www.npmjs.com/package/@lmy54321/design-system"
+            target="_blank"
+            rel="noreferrer"
+            className="text-[13px] text-accent hover:underline flex items-center gap-[4px]"
+          >
+            <IconFont name="system-components" size="14px" />
+            npm 包
+          </a>
+          <span className="text-[13px] text-muted-foreground">
+            当前版本: v1.2.0
+          </span>
+        </div>
+      </motion.div>
+    </div>
+  );
+}