165-template-148
/
blank
forked from d8dfun/blank


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Shadcn 管理后台</title>
  <!-- 引入 Tailwind CSS（Shadcn 依赖） -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入 Font Awesome（图标支持） -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入 Juris 框架 -->
  <script src="https://unpkg.com/juris"></script>

  <!-- Tailwind 配置（匹配 Shadcn 主题） -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6', // Shadcn 蓝色主色
            secondary: '#1e293b', // 侧边栏深色
            neutral: '#f1f5f9', // 主内容区背景
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 自定义工具类（匹配 Shadcn 组件样式） -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto { content-visibility: auto; }
      .sidebar-item-active { 
        background-color: rgb(59 130 246 / 0.1);
        color: rgb(59 130 246);
        border-left-width: 4px;
        border-left-color: rgb(59 130 246);
      }
      .card-shadow { 
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }
      .card-shadow:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral min-h-screen">
  <div id="app" class="flex h-screen overflow-hidden"></div>

  <script>
    // 1. 模拟后台数据
    const mockData = {
      stats: { user: 1280, order: 3650, revenue: 156800, product: 240 },
      tableData: [
        { id: 1, name: "张三", role: "管理员", status: "正常", date: "2024-01-15" },
        { id: 2, name: "李四", role: "编辑", status: "正常", date: "2024-02-20" },
        { id: 3, name: "王五", role: "访客", status: "禁用", date: "2024-03-10" },
        { id: 4, name: "赵六", role: "编辑", status: "正常", date: "2024-04-05" }
      ],
      activeMenu: "dashboard"
    };

    // 2. 状态标签组件（Shadcn 风格）
    function StatusBadge(status) {
      const base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium";
      if (status === "正常") return `${base} bg-green-100 text-green-800`;
      if (status === "禁用") return `${base} bg-red-100 text-red-800`;
      return `${base} bg-gray-100 text-gray-800`;
    }

    // 3. 表格渲染函数（Shadcn 表格样式）
    function renderTable(app) {
      const data = app.getState("tableData");
      
      // 创建表行（使用数组格式避免Juris框架的属性名问题）
      const tableRows = data.map((item, index) => ({
        tr: {
          class: "border-b hover:bg-gray-50 transition-colors",
          children: [
            { td: { class: "px-6 py-4 font-medium text-gray-900", text: item.id.toString() } },
            { td: { class: "px-6 py-4", text: item.name } },
            { td: { class: "px-6 py-4", text: item.role } },
            { td: { class: "px-6 py-4", children: [
              { span: { class: StatusBadge(item.status), text: item.status } }
            ] } },
            { td: { class: "px-6 py-4", text: item.date } },
            { td: { class: "px-6 py-4 text-right", children: [
              // 编辑按钮（Shadcn 主色）
              {
                tag: "button",
                class: "mr-2 inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors",
                text: "编辑",
                onclick: () => alert(`编辑用户：${item.name}`),
                children: [
                  { tag: "i", class: "mr-1 fa fa-pencil" }
                ]
              },
              // 删除按钮（Shadcn 危险色）
              {
                tag: "button",
                class: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600 transition-colors",
                text: "删除",
                onclick: () => {
                  if (confirm(`确定删除用户 ${item.name} 吗？`)) {
                    const newData = data.filter(row => row.id !== item.id);
                    app.setState("tableData", newData);
                  }
                },
                children: [
                  { tag: "i", class: "mr-1 fa fa-trash" }
                ]
              }
            ] } }
          ]
        }
      }));
      
      return {
        tag: "div",
        class: "overflow-hidden rounded-lg border bg-white shadow",
        children: [
          {
            tag: "table",
            class: "w-full text-sm text-left text-gray-500",
            children: [
              // 表头（Shadcn 风格）
              {
                tag: "thead",
                class: "bg-gray-50 text-xs uppercase text-gray-700",
                children: [
                  {
                    tag: "tr",
                    children: [
                      { tag: "th", class: "px-6 py-3", text: "ID" },
                      { tag: "th", class: "px-6 py-3", text: "用户名" },
                      { tag: "th", class: "px-6 py-3", text: "角色" },
                      { tag: "th", class: "px-6 py-3", text: "状态" },
                      { tag: "th", class: "px-6 py-3", text: "创建时间" },
                      { tag: "th", class: "px-6 py-3 text-right", text: "操作" }
                    ]
                  }
                ]
              },
              // 表体
              {
                tag: "tbody",
                children: tableRows
              }
            ]
          }
        ]
      };
    }

    // 4. 初始化 Juris 应用
    const app = new Juris({
      states: {
        stats: mockData.stats,
        tableData: mockData.tableData,
        activeMenu: mockData.activeMenu
      },
      layout: {
        tag: "div",
        class: "flex h-screen overflow-hidden",
        children: [
          // 侧边栏（Shadcn 深色风格）
          {
            tag: "div",
            class: "w-64 bg-secondary text-white flex-shrink-0",
            children: [
              // 侧边栏标题
              { 
                tag: "div",
                class: "p-4 border-b border-gray-700",
                children: [
                  { 
                    tag: "h1",
                    class: "text-xl font-bold",
                    children: [
                      { tag: "i", class: "mr-2 fa fa-cogs" },
                      "管理后台"
                    ]
                  }
                ]
              },
              // 侧边栏菜单
              {
                tag: "nav",
                class: "p-4 space-y-1",
                children: [
                  // 数据概览
                  { 
                    tag: "div",
                    class: () => app.getState("activeMenu") === "dashboard" ? "sidebar-item-active px-3 py-2 rounded-md cursor-pointer" : "px-3 py-2 text-gray-300 rounded-md hover:bg-gray-700 cursor-pointer transition-colors",
                    onclick: () => app.setState("activeMenu", "dashboard"),
                    children: [
                      { tag: "i", class: "mr-2 fa fa-dashboard" },
                      "数据概览"
                    ]
                  },
                  // 用户管理
                  { 
                    tag: "div",
                    class: () => app.getState("activeMenu") === "user" ? "sidebar-item-active px-3 py-2 rounded-md cursor-pointer" : "px-3 py-2 text-gray-300 rounded-md hover:bg-gray-700 cursor-pointer transition-colors",
                    onclick: () => app.setState("activeMenu", "user"),
                    children: [
                      { tag: "i", class: "mr-2 fa fa-users" },
                      "用户管理"
                    ]
                  },
                  // 订单管理
                  { 
                    tag: "div",
                    class: () => app.getState("activeMenu") === "order" ? "sidebar-item-active px-3 py-2 rounded-md cursor-pointer" : "px-3 py-2 text-gray-300 rounded-md hover:bg-gray-700 cursor-pointer transition-colors",
                    onclick: () => app.setState("activeMenu", "order"),
                    children: [
                      { tag: "i", class: "mr-2 fa fa-shopping-cart" },
                      "订单管理"
                    ]
                  },
                  // 商品管理
                  { 
                    tag: "div",
                    class: () => app.getState("activeMenu") === "product" ? "sidebar-item-active px-3 py-2 rounded-md cursor-pointer" : "px-3 py-2 text-gray-300 rounded-md hover:bg-gray-700 cursor-pointer transition-colors",
                    onclick: () => app.setState("activeMenu", "product"),
                    children: [
                      { tag: "i", class: "mr-2 fa fa-cube" },
                      "商品管理"
                    ]
                  }
                ]
              }
            ]
          },

          // 主内容区（Shadcn 浅色风格）
          {
            tag: "div",
            class: "flex-1 overflow-y-auto bg-neutral p-6",
            children: [
              () => {
                const active = app.getState("activeMenu");
                // 数据概览页面
                if (active === "dashboard") {
                  return {
                    tag: "div",
                    children: [
                      // 页面标题
                      { 
                        tag: "div",
                        class: "mb-6",
                        children: [
                          { tag: "h2", class: "text-2xl font-bold text-gray-800", text: "数据概览" },
                          { tag: "p", class: "text-gray-500", text: "查看系统关键指标与最新数据" }
                        ]
                      },
                      
                      // 数据卡片组（Shadcn 卡片风格）
                      {
                        tag: "div",
                        class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8",
                        children: [
                          // 用户数卡片
                          {
                            tag: "div",
                            class: "card-shadow bg-white rounded-lg p-6",
                            children: [
                              {
                                tag: "div",
                                class: "flex items-center text-gray-500 mb-2",
                                children: [
                                  { tag: "i", class: "fa fa-users mr-2 text-primary" },
                                  { tag: "span", text: "总用户数" }
                                ]
                              },
                              { tag: "div", class: "text-3xl font-bold text-gray-900", text: app.getState("stats").user.toString() },
                              {
                                tag: "div",
                                class: "mt-2 text-green-500 text-sm",
                                children: [
                                  { tag: "i", class: "fa fa-arrow-up mr-1" },
                                  { tag: "span", text: "12% 较上月" }
                                ]
                              }
                            ]
                          },
                          
                          // 订单数卡片
                          {
                            tag: "div",
                            class: "card-shadow bg-white rounded-lg p-6",
                            children: [
                              {
                                tag: "div",
                                class: "flex items-center text-gray-500 mb-2",
                                children: [
                                  { tag: "i", class: "fa fa-shopping-cart mr-2 text-primary" },
                                  { tag: "span", text: "总订单数" }
                                ]
                              },
                              { tag: "div", class: "text-3xl font-bold text-gray-900", text: app.getState("stats").order.toString() },
                              {
                                tag: "div",
                                class: "mt-2 text-green-500 text-sm",
                                children: [
                                  { tag: "i", class: "fa fa-arrow-up mr-1" },
                                  { tag: "span", text: "8% 较上月" }
                                ]
                              }
                            ]
                          },
                          
                          // 营收卡片
                          {
                            tag: "div",
                            class: "card-shadow bg-white rounded-lg p-6",
                            children: [
                              {
                                tag: "div",
                                class: "flex items-center text-gray-500 mb-2",
                                children: [
                                  { tag: "i", class: "fa fa-rmb mr-2 text-primary" },
                                  { tag: "span", text: "总营收(元)" }
                                ]
                              },
                              { tag: "div", class: "text-3xl font-bold text-gray-900", text: app.getState("stats").revenue.toString() },
                              {
                                tag: "div",
                                class: "mt-2 text-green-500 text-sm",
                                children: [
                                  { tag: "i", class: "fa fa-arrow-up mr-1" },
                                  { tag: "span", text: "23% 较上月" }
                                ]
                              }
                            ]
                          },
                          
                          // 商品数卡片
                          {
                            tag: "div",
                            class: "card-shadow bg-white rounded-lg p-6",
                            children: [
                              {
                                tag: "div",
                                class: "flex items-center text-gray-500 mb-2",
                                children: [
                                  { tag: "i", class: "fa fa-cube mr-2 text-primary" },
                                  { tag: "span", text: "商品总数" }
                                ]
                              },
                              { tag: "div", class: "text-3xl font-bold text-gray-900", text: app.getState("stats").product.toString() },
                              {
                                tag: "div",
                                class: "mt-2 text-red-500 text-sm",
                                children: [
                                  { tag: "i", class: "fa fa-arrow-down mr-1" },
                                  { tag: "span", text: "3% 较上月" }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      
                      // 最近用户表格（暂时注释掉以测试渲染问题）
                      {
                        tag: "div",
                        children: [
                          { tag: "h3", class: "mb-4 text-xl font-semibold text-gray-800", text: "最近用户" },
                          { tag: "p", class: "text-gray-500", text: "表格功能暂时禁用" }
                          // renderTable(app)
                        ]
                      }
                    ]
                  };
                }
                
                // 用户管理页面
                else if (active === "user") {
                  return {
                    tag: "div",
                    children: [
                      {
                        tag: "div",
                        class: "mb-6",
                        children: [
                          { tag: "h2", class: "text-2xl font-bold text-gray-800", text: "用户管理" },
                          { tag: "p", class: "text-gray-500", text: "管理系统所有用户账号" }
                        ]
                      },
                      // renderTable(app)
                      { tag: "p", class: "text-gray-500", text: "用户表格功能暂时禁用" }
                    ]
                  };
                }
                
                // 其他页面（默认显示数据概览）
                else {
                  return {
                    tag: "div",
                    children: [
                      {
                        tag: "div",
                        class: "mb-6",
                        children: [
                          { 
                            tag: "h2", 
                            class: "text-2xl font-bold text-gray-800", 
                            text: `${active === "order" ? "订单" : "商品"}管理` 
                          },
                          { 
                            tag: "p", 
                            class: "text-gray-500", 
                            text: `管理系统所有${active === "order" ? "订单" : "商品"}数据` 
                          }
                        ]
                      },
                      {
                        tag: "div",
                        class: "bg-white p-8 rounded-lg shadow text-center text-gray-500",
                        children: [
                          { tag: "i", class: "fa fa-file-text-o text-4xl mb-4" },
                          { tag: "h3", class: "text-xl font-semibold mb-2", text: "功能开发中" },
                          { tag: "p", text: "该模块功能正在开发，敬请期待～" }
                        ]
                      }
                    ]
                  };
                }
              }
            ]
          }
        ]
      }
    });

    // 5. 渲染应用
    app.render('#app');
  </script>
</body>
</html>