openxiangda 1.0.39 → 1.0.40

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/glass-home-dashboard/styles.css

@@ -0,0 +1,196 @@
+.bp-glass-state-panel {
+  min-height: 420px;
+}
+
+.bp-glass-hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.85fr);
+  gap: 18px;
+}
+
+.bp-glass-hero {
+  position: relative;
+  min-height: 212px;
+  overflow: hidden;
+  background:
+    linear-gradient(110deg, rgba(255, 255, 255, 0.92) 0%, rgba(235, 246, 255, 0.68) 54%, rgba(219, 234, 254, 0.84) 100%),
+    radial-gradient(circle at 78% 16%, rgba(96, 165, 250, 0.28), transparent 36%);
+}
+
+.bp-glass-hero__copy {
+  position: relative;
+  z-index: 1;
+  width: min(520px, 100%);
+  padding: 8px;
+}
+
+.bp-glass-hero h1 {
+  margin: 0 0 12px;
+  color: #0f172a;
+  font-size: 27px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.bp-glass-hero p {
+  margin: 0;
+  color: #475569;
+  font-size: 14px;
+}
+
+.bp-glass-hero__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 34px;
+}
+
+.bp-glass-hero__visual {
+  position: absolute;
+  inset: 20px 18px 0 auto;
+  width: 300px;
+}
+
+.bp-glass-hero__visual .card {
+  position: absolute;
+  display: block;
+  border: 1px solid rgba(147, 197, 253, 0.75);
+  border-radius: 18px;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(56, 189, 248, 0.22));
+  box-shadow: 0 24px 48px rgba(59, 130, 246, 0.22);
+  transform: skewY(9deg);
+}
+
+.bp-glass-hero__visual .card-a {
+  right: 24px;
+  top: 0;
+  width: 130px;
+  height: 150px;
+  background: linear-gradient(145deg, rgba(125, 211, 252, 0.76), rgba(37, 99, 235, 0.32));
+}
+
+.bp-glass-hero__visual .card-b {
+  right: 104px;
+  top: 58px;
+  width: 118px;
+  height: 128px;
+}
+
+.bp-glass-hero__visual .card-c {
+  right: 184px;
+  top: 108px;
+  width: 94px;
+  height: 98px;
+}
+
+.bp-glass-hero__visual .wave {
+  position: absolute;
+  right: 44px;
+  top: 120px;
+  width: 180px;
+  height: 46px;
+  border: solid rgba(255, 255, 255, 0.82);
+  border-width: 0 0 4px;
+  border-radius: 50%;
+  transform: rotate(-8deg);
+}
+
+.bp-glass-metrics {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.bp-glass-main-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(320px, 0.9fr);
+  gap: 18px;
+}
+
+.bp-glass-chart-panel {
+  min-height: 344px;
+}
+
+.bp-glass-chart-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
+  gap: 16px;
+}
+
+.bp-glass-side-stack {
+  display: grid;
+  gap: 18px;
+}
+
+.bp-glass-bottom-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(320px, 0.9fr);
+  gap: 18px;
+}
+
+.bp-glass-targets {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.bp-glass-targets > div {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.74);
+}
+
+.bp-glass-targets span {
+  overflow: hidden;
+  color: #334155;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bp-glass-targets strong {
+  color: #0f172a;
+  font-size: 16px;
+}
+
+.bp-glass-targets div div {
+  height: 7px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e2e8f0;
+}
+
+.bp-glass-targets i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+}
+
+@media (max-width: 1280px) {
+  .bp-glass-hero-grid,
+  .bp-glass-main-grid,
+  .bp-glass-bottom-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .bp-glass-metrics {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 920px) {
+  .bp-glass-metrics,
+  .bp-glass-chart-split,
+  .bp-glass-targets {
+    grid-template-columns: 1fr;
+  }
+
+  .bp-glass-hero__visual {
+    display: none;
+  }
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mint-analytics-dashboard/App.tsx

@@ -0,0 +1,8 @@
+import "@/shared/components/admin-ui-templates/styles.css";
+import "./styles.css";
+
+import { MintAnalyticsDashboard } from "./MintAnalyticsDashboard";
+
+export default function App() {
+  return <MintAnalyticsDashboard />;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mint-analytics-dashboard/MintAnalyticsDashboard.tsx

@@ -0,0 +1,279 @@
+import { App as AntdApp, Button, DatePicker, Select, Space, Tag } from "antd";
+import { useMemo, useState } from "react";
+
+import { QueryState } from "@/shared/components/QueryState";
+import {
+  AdminShell,
+  AdminTopbar,
+  DashboardChart,
+  HealthScore,
+  MetricCard,
+  NoticeList,
+  Panel,
+  QuickActionGrid,
+  TemplateActionDrawer,
+  TodoList,
+} from "@/shared/components/admin-ui-templates/DashboardPrimitives";
+import {
+  createBarCompareOption,
+  createDonutOption,
+  createLineAreaOption,
+} from "@/shared/components/admin-ui-templates/chartOptions";
+import {
+  mintMetrics,
+  notices,
+  quickActions,
+  standardNavItems,
+  todos,
+} from "@/shared/components/admin-ui-templates/sampleData";
+import type {
+  DrawerMode,
+  QuickAction,
+} from "@/shared/components/admin-ui-templates/types";
+
+type ViewState = "ready" | "loading" | "empty" | "error";
+type CompareMode = "day" | "week" | "month";
+
+const labels = ["03-04", "03-05", "03-06", "03-07", "03-08", "03-09", "03-10"];
+
+export function MintAnalyticsDashboard() {
+  const { message } = AntdApp.useApp();
+  const [activeNav, setActiveNav] = useState("home");
+  const [compareMode, setCompareMode] = useState<CompareMode>("day");
+  const [viewState, setViewState] = useState<ViewState>("ready");
+  const [drawerAction, setDrawerAction] = useState<QuickAction | null>(null);
+  const [drawerMode, setDrawerMode] = useState<DrawerMode>("create");
+
+  const revenueOption = useMemo(
+    () =>
+      createLineAreaOption({
+        colors: ["#10b981", "#3b82f6"],
+        labels,
+        primaryName: "营业收入",
+        secondaryName: "订单金额",
+        primary: [520, 570, 760, 840, 1082, 650, 1160],
+        secondary: [380, 430, 520, 580, 710, 480, 690],
+      }),
+    [],
+  );
+
+  const compareOption = useMemo(
+    () =>
+      createBarCompareOption({
+        labels,
+        series: [
+          {
+            name: compareMode === "day" ? "营业收入" : "本期收入",
+            data: [1120, 1210, 980, 1130, 1280, 900, 1100],
+            color: "#3b82f6",
+          },
+          {
+            name: "订单金额",
+            data: [940, 810, 730, 820, 1080, 620, 760],
+            color: "#10b981",
+          },
+          {
+            name: "支付金额",
+            data: [650, 590, 510, 610, 760, 430, 540],
+            color: "#f59e0b",
+          },
+        ],
+      }),
+    [compareMode],
+  );
+
+  const channelOption = useMemo(
+    () =>
+      createDonutOption({
+        centerLabel: "总订单数",
+        centerValue: "12,568",
+        data: [
+          { name: "线上商城 38.6%", value: 38.6, color: "#10b981" },
+          { name: "移动端 APP 28.7%", value: 28.7, color: "#3b82f6" },
+          { name: "小程序 17.3%", value: 17.3, color: "#f59e0b" },
+          { name: "第三方平台 10.5%", value: 10.5, color: "#fbbf24" },
+          { name: "线下门店 4.9%", value: 4.9, color: "#cbd5e1" },
+        ],
+      }),
+    [],
+  );
+
+  function refresh() {
+    setViewState("loading");
+    window.setTimeout(() => {
+      setViewState("ready");
+      message.success("分析数据已更新");
+    }, 500);
+  }
+
+  function openActionDrawer(action: QuickAction, mode: DrawerMode = "create") {
+    setDrawerAction(action);
+    setDrawerMode(mode);
+  }
+
+  return (
+    <AdminShell
+      variant="mint"
+      activeKey={activeNav}
+      navItems={standardNavItems}
+      brandTitle="未来数智运营平台"
+      brandSubtitle="企业级数据决策中台"
+      topbar={
+        <AdminTopbar
+          title="首页总览"
+          subtitle="全面掌握业务动态，数据驱动智能决策"
+          searchPlaceholder="搜索菜单、功能、报表"
+          userName="管理员"
+          extra={
+            <Space size={8}>
+              <Tag className="bp-mint-time">数据更新时间：2026-03-10 23:40:00</Tag>
+              <Button onClick={refresh}>刷新</Button>
+              <Select<ViewState>
+                size="small"
+                value={viewState}
+                onChange={setViewState}
+                options={[
+                  { value: "ready", label: "正常" },
+                  { value: "loading", label: "加载" },
+                  { value: "empty", label: "空态" },
+                  { value: "error", label: "错误" },
+                ]}
+              />
+            </Space>
+          }
+        />
+      }
+      sidebarFooter={
+        <>
+          <div className="bp-mint-shortcuts">
+            <strong>快捷入口</strong>
+            <span>数据报表</span>
+            <span>自定义看板</span>
+            <span>数据导出</span>
+            <span>帮助中心</span>
+          </div>
+        </>
+      }
+      onNavChange={setActiveNav}
+    >
+      {viewState !== "ready" ? (
+        <Panel className="bp-mint-state-panel">
+          <QueryState
+            loading={viewState === "loading"}
+            empty={viewState === "empty"}
+            error={viewState === "error" ? "模拟分析接口异常，请点击重试恢复。" : null}
+            onRetry={() => setViewState("ready")}
+          />
+        </Panel>
+      ) : (
+        <>
+          <section className="bp-mint-intro">
+            <div>
+              <h1>
+                晚上好，超级管理员 <Tag color="green">管理员</Tag>
+              </h1>
+              <p>本周核心指标 03.04 - 03.10</p>
+            </div>
+            <DatePicker />
+          </section>
+
+          <section className="bp-mint-metrics">
+            {mintMetrics.map((metric) => (
+              <MetricCard key={metric.id} metric={metric} />
+            ))}
+          </section>
+
+          <section className="bp-mint-grid">
+            <Panel title="营业收入趋势" className="bp-mint-large-panel">
+              <DashboardChart option={revenueOption} height={260} />
+            </Panel>
+            <Panel
+              title="业务对比分析"
+              className="bp-mint-large-panel"
+              extra={
+                <Space size={4}>
+                  {(["day", "week", "month"] as CompareMode[]).map((mode) => (
+                    <Button
+                      key={mode}
+                      size="small"
+                      type={compareMode === mode ? "primary" : "text"}
+                      onClick={() => setCompareMode(mode)}
+                    >
+                      {mode === "day" ? "按日" : mode === "week" ? "按周" : "按月"}
+                    </Button>
+                  ))}
+                </Space>
+              }
+            >
+              <DashboardChart option={compareOption} height={260} />
+            </Panel>
+            <Panel title="平台通知">
+              <NoticeList items={notices} />
+            </Panel>
+            <Panel title="用户增长趋势" className="bp-mint-large-panel">
+              <DashboardChart
+                height={245}
+                option={createLineAreaOption({
+                  colors: ["#10b981", "#3b82f6"],
+                  labels,
+                  primaryName: "新增用户",
+                  secondaryName: "活跃用户",
+                  primary: [580, 820, 860, 1050, 980, 960, 1500],
+                  secondary: [900, 1320, 1350, 2140, 1780, 1700, 2400],
+                })}
+              />
+            </Panel>
+            <Panel title="渠道资源分布">
+              <DashboardChart option={channelOption} height={245} />
+            </Panel>
+            <Panel title="待办事项">
+              <TodoList items={todos} />
+            </Panel>
+          </section>
+
+          <section className="bp-mint-bottom">
+            <Panel title="快捷操作">
+              <QuickActionGrid
+                actions={quickActions.slice(0, 5)}
+                compact
+                onAction={(action) => openActionDrawer(action)}
+              />
+            </Panel>
+            <Panel title="业务概览">
+              <div className="bp-mint-business-summary">
+                {[
+                  ["商品总数", "2,350", "5.2%"],
+                  ["库存预警", "32", "11.1%"],
+                  ["在售商品", "1,986", "3.8%"],
+                  ["库存周转率", "4.62", "6.3%"],
+                ].map(([label, value, delta], index) => (
+                  <div key={label}>
+                    <span>{label}</span>
+                    <strong>{value}</strong>
+                    <small className={index === 1 ? "is-down" : ""}>
+                      较上周 {index === 1 ? "↓" : "↑"} {delta}
+                    </small>
+                  </div>
+                ))}
+              </div>
+            </Panel>
+            <Panel title="系统健康度">
+              <HealthScore value={98} tone="mint" />
+            </Panel>
+          </section>
+        </>
+      )}
+
+      <TemplateActionDrawer
+        open={Boolean(drawerAction)}
+        title={drawerAction ? `${drawerAction.label}` : "新建事项"}
+        mode={drawerMode}
+        onClose={() => setDrawerAction(null)}
+        onSubmit={() => {
+          setDrawerAction(null);
+          message.success("表单已保存");
+        }}
+      />
+    </AdminShell>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mint-analytics-dashboard/index.tsx

@@ -0,0 +1,10 @@
+import { createReactPage } from "openxiangda/runtime";
+
+import App from "./App";
+
+const page = createReactPage(App);
+
+export const mount = page.mount;
+export const update = page.update;
+export const unmount = page.unmount;
+export default page;

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mint-analytics-dashboard/page.config.ts

@@ -0,0 +1,14 @@
+import { definePageConfig } from "@/types/app-workspace.types";
+
+export default definePageConfig({
+  code: "mint_analytics_dashboard",
+  name: "薄荷数据分析首页",
+  description: "后台管理薄荷绿色数据分析首页模板",
+  route: { pathKey: "mint_analytics_dashboard" },
+  entry: {
+    mode: "app-shell",
+    hidePlatformNav: true,
+    defaultRoute: "home",
+  },
+  menu: { name: "薄荷数据分析首页" },
+});

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/mint-analytics-dashboard/styles.css

@@ -0,0 +1,163 @@
+.bp-mint-time {
+  max-width: 260px;
+  overflow: hidden;
+  border: 1px solid rgba(16, 185, 129, 0.15);
+  border-radius: 999px;
+  color: #475569;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bp-mint-state-panel {
+  min-height: 440px;
+}
+
+.bp-mint-shortcuts {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 16px;
+  padding: 16px;
+  border: 1px solid rgba(16, 185, 129, 0.16);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.bp-mint-shortcuts strong {
+  color: #0f172a;
+  font-size: 13px;
+}
+
+.bp-mint-shortcuts span {
+  color: #475569;
+  font-size: 13px;
+}
+
+.bp-mint-intro {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 8px;
+}
+
+.bp-mint-intro h1 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin: 0 0 6px;
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.bp-mint-intro p {
+  margin: 0;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.bp-mint-metrics {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.bp-mint-metrics .bp-admin-metric {
+  min-height: 132px;
+  border-radius: 12px;
+}
+
+.bp-mint-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(300px, 0.8fr);
+  gap: 16px;
+}
+
+.bp-mint-large-panel {
+  min-height: 324px;
+}
+
+.bp-mint-bottom {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(300px, 0.85fr);
+  gap: 16px;
+}
+
+.bp-mint-business-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 6px 0;
+}
+
+.bp-mint-business-summary div {
+  min-width: 0;
+  padding: 8px 12px;
+  border-right: 1px solid #e5eaf2;
+}
+
+.bp-mint-business-summary div:last-child {
+  border-right: 0;
+}
+
+.bp-mint-business-summary span,
+.bp-mint-business-summary small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bp-mint-business-summary span {
+  color: #64748b;
+  font-size: 13px;
+}
+
+.bp-mint-business-summary strong {
+  display: block;
+  margin: 9px 0;
+  color: #0f172a;
+  font-size: 22px;
+  line-height: 1;
+}
+
+.bp-mint-business-summary small {
+  color: #10b981;
+  font-size: 12px;
+}
+
+.bp-mint-business-summary .is-down {
+  color: #ef4444;
+}
+
+@media (max-width: 1380px) {
+  .bp-mint-metrics {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .bp-mint-grid,
+  .bp-mint-bottom {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 920px) {
+  .bp-mint-intro {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .bp-mint-metrics,
+  .bp-mint-grid,
+  .bp-mint-bottom,
+  .bp-mint-business-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .bp-mint-business-summary div {
+    border-right: 0;
+    border-bottom: 1px solid #e5eaf2;
+  }
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/ops-monitor-dashboard/App.tsx

@@ -0,0 +1,8 @@
+import "@/shared/components/admin-ui-templates/styles.css";
+import "./styles.css";
+
+import { OpsMonitorDashboard } from "./OpsMonitorDashboard";
+
+export default function App() {
+  return <OpsMonitorDashboard />;
+}