@melt-js/comps-bag-shop 0.0.0-stage → 2026.11.7

package/README.md

@@ -1,3 +1,85 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @melt-js/comps-bag-shop
+
+`@melt-js/comps-bag-shop` 是官方提供的商城示例插件。它更像一份“业务插件长什么样”的参考答案：路由怎么拆，菜单怎么配，多语言怎么放，详情页和缓存策略又该怎么处理。
+
+它不是一个可以直接拿去卖货的商城成品，更适合拿来看结构、看写法、看边界。
+
+## 安装
+
+```bash
+pnpm add @melt-js/libs-bag-entry @melt-js/comps-bag-shop
+```
+
+宿主项目还需要自行提供 `vue`、`vue-router`、`vue-i18n` 和 `naive-ui`。如果你已经使用 `@melt-js/libs-bag-entry`，这部分依赖通常已经具备。
+
+## 里面带了什么
+
+- 商品管理：商品列表、发布商品、编辑商品
+- 订单管理：订单列表、发货、售后、退换货详情
+- 用户管理：用户列表、资料、订单
+- 营销中心：活动列表与创建活动
+- 客服消息：客服工作台示例
+- 财务结算：日结、月结、提现页
+- 店铺设置：基础信息、交易、物流、客服配置
+
+## 怎么接进去
+
+```ts
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
+import { createRouter, createWebHistory } from 'vue-router'
+import { bootstrapPlugins } from '@melt-js/libs-bag-entry'
+import shopPlugin from '@melt-js/comps-bag-shop'
+
+const app = createApp(App)
+const pinia = createPinia()
+const router = createRouter({
+  history: createWebHistory(),
+  routes: []
+})
+const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  messages: {}
+})
+
+app.use(pinia)
+app.use(router)
+app.use(i18n)
+
+await bootstrapPlugins({
+  app,
+  router,
+  i18n,
+  plugins: [shopPlugin]
+})
+```
+
+## 这个插件主要在演示什么
+
+- 路由和菜单怎么由同一个插件一起吐出来
+- 隐藏详情页怎么靠 `activeMenu` 维持左侧菜单高亮
+- 编辑页、详情页怎么通过 `noCache` 避免被标签页缓存
+- 多个财务页怎么通过同一个 `cacheKey` 复用缓存视图
+- 同一个插件怎么同时带 `zh-CN` 和 `en` 两套文案
+
+## 当前这份示例的特点
+
+- 插件 ID: `plugin-shop`
+- 默认排序: `10`
+- 菜单域: 商品、订单、用户、营销、客服、财务、店铺设置
+- 多语言: 内置中文和英文文案
+- 路由策略: 同时使用了 `hidden`、`activeMenu`、`noCache`、`cacheKey`
+
+## 边界
+
+- 这是官方业务示例插件，不属于宿主框架基础层。
+- 它主要回答的是“插件该怎么写”，不是“商城系统的最终抽象应该长什么样”。
+- 如果你要做自己的业务模块，建议把它当参考模板看，不要整包原样搬过去。
+- 布局、权限指令、标签页机制这些宿主能力，还是应该放在 `@melt-js/libs-bag-host`。
+
+## 一般会搭什么
+
+- `@melt-js/libs-bag-entry`：提供插件协议、路由 meta 协议以及后台 UI 公共能力
+- `@melt-js/libs-bag-host`：宿主层，负责真正把这个插件挂进去

package/dist/CustomerService-lJt3W1m7.js

@@ -0,0 +1,188 @@
+import { defineComponent as y, ref as u, computed as w, openBlock as l, createElementBlock as d, createElementVNode as e, createTextVNode as i, createStaticVNode as v, Fragment as _, renderList as M, normalizeClass as C, toDisplayString as s, createCommentVNode as p, createVNode as m, unref as b, withCtx as h } from "vue";
+import { useRouter as j } from "vue-router";
+import { NDrawer as V, NDrawerContent as z } from "naive-ui";
+const A = { class: "p-6 bg-white dark:bg-[#0A1120] rounded-2xl shadow-sm min-h-[calc(100vh-120px)] border border-gray-100 dark:border-gray-800 flex flex-col" }, B = { class: "flex-1 flex border border-gray-100 dark:border-gray-800 rounded-xl overflow-hidden bg-slate-50 dark:bg-gray-800/30" }, S = { class: "w-80 border-r border-gray-100 dark:border-gray-800 bg-white dark:bg-[#0A1120] flex flex-col" }, N = { class: "flex-1 overflow-y-auto custom-scrollbar" }, $ = ["onClick"], D = { class: "relative" }, L = ["src"], F = {
+  key: 0,
+  class: "absolute -top-1 -right-1 w-4 h-4 bg-rose-500 rounded-full border-2 border-white dark:border-[#0A1120] text-[8px] font-bold text-white flex items-center justify-center"
+}, I = { class: "flex-1 min-w-0" }, P = { class: "flex justify-between items-baseline mb-1" }, E = { class: "font-bold text-slate-800 dark:text-slate-200 text-sm truncate" }, H = { class: "text-xs text-slate-400 shrink-0" }, G = { class: "text-xs text-slate-500 dark:text-slate-400 truncate" }, R = { class: "flex-1 flex flex-col bg-slate-50 dark:bg-gray-800/30" }, T = { class: "h-16 px-6 bg-white dark:bg-[#0A1120] border-b border-gray-100 dark:border-gray-800 flex items-center justify-between shrink-0" }, U = { class: "flex items-center gap-3" }, q = { class: "font-bold text-slate-800 dark:text-slate-200" }, J = { class: "px-2 py-0.5 text-[10px] font-bold rounded bg-amber-50 text-amber-500 border border-amber-100" }, K = { class: "flex-1 p-6 overflow-y-auto space-y-6 custom-scrollbar" }, O = { class: "text-center" }, Q = { class: "text-xs text-slate-400 bg-slate-100 dark:bg-gray-800 px-2 py-1 rounded" }, W = { class: "flex gap-3" }, X = ["src"], Y = { class: "bg-white dark:bg-[#0A1120] p-3 rounded-2xl rounded-tl-none shadow-sm border border-gray-100 dark:border-gray-800 text-sm text-slate-700 dark:text-slate-300" }, Z = {
+  key: 0,
+  class: "flex gap-3 flex-row-reverse"
+}, ee = { class: "bg-gradient-to-br from-orange-500 to-rose-500 p-3 rounded-2xl rounded-tr-none shadow-sm text-sm text-white" }, te = { class: "space-y-6" }, re = { class: "flex items-center gap-4 pb-6 border-b border-gray-100 dark:border-gray-800" }, ae = ["src"], se = { class: "text-lg font-bold text-slate-800 dark:text-slate-200 mb-1" }, oe = { class: "pt-4 flex gap-3" }, ge = /* @__PURE__ */ y({
+  __name: "CustomerService",
+  setup(le) {
+    const g = j(), n = u([
+      { id: 1, name: "张先生", lastMsg: "好的，那如果大小不合适支持退换吗？", time: "10:26", unread: 2, active: !0, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Bob" },
+      { id: 2, name: "李小姐", lastMsg: "麻烦帮我催一下发货", time: "09:15", unread: 1, active: !1, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alice" },
+      { id: 3, name: "陈同学", lastMsg: "[图片]", time: "昨天", unread: 0, active: !1, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Charlie" },
+      { id: 4, name: "王阿姨", lastMsg: "已经收到货了，非常满意！", time: "昨天", unread: 0, active: !1, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Grace" },
+      { id: 5, name: "刘老板", lastMsg: "批量采购有优惠吗？", time: "星期一", unread: 0, active: !1, avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Frank" }
+    ]), x = u(1), a = w(() => n.value.find((o) => o.id === x.value) || n.value[0]), f = (o) => {
+      x.value = o;
+      const t = n.value.find((r) => r.id === o);
+      t && (t.unread = 0);
+    }, c = u(!1), k = () => {
+      g.push("/store/settings/service");
+    };
+    return (o, t) => (l(), d("div", A, [
+      e("div", { class: "flex justify-between items-center mb-6" }, [
+        t[5] || (t[5] = e("h2", { class: "text-2xl font-bold text-slate-800 dark:text-slate-200 flex items-center gap-2" }, [
+          i(" 客服消息 "),
+          e("span", { class: "px-2 py-0.5 rounded-full bg-rose-50 dark:bg-rose-500/10 text-rose-500 text-xs font-bold" }, "12 未读")
+        ], -1)),
+        e("div", { class: "flex items-center gap-4 text-sm font-medium" }, [
+          t[4] || (t[4] = e("span", { class: "flex items-center gap-1.5 text-slate-600 dark:text-slate-300" }, [
+            e("div", { class: "w-2 h-2 rounded-full bg-emerald-500" }),
+            i(" 在线接待中 ")
+          ], -1)),
+          e("button", {
+            onClick: k,
+            class: "px-3 py-1.5 bg-slate-50 dark:bg-gray-800/50 text-slate-600 dark:text-slate-300 rounded hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
+          }, "设置")
+        ])
+      ]),
+      e("div", B, [
+        e("div", S, [
+          t[6] || (t[6] = v('<div class="p-3 border-b border-gray-100 dark:border-gray-800"><div class="relative"><input type="text" placeholder="搜索联系人..." class="w-full pl-9 pr-4 py-2 rounded-lg bg-slate-50 dark:bg-gray-800/50 border border-transparent focus:border-orange-500 focus:bg-white dark:focus:bg-[#0A1120] outline-none text-sm transition-all dark:text-slate-200"><svg class="w-4 h-4 text-slate-400 absolute left-3 top-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div>', 1)),
+          e("div", N, [
+            (l(!0), d(_, null, M(n.value, (r) => (l(), d("div", {
+              key: r.id,
+              onClick: (de) => f(r.id),
+              class: C([x.value === r.id ? "bg-orange-50 dark:bg-orange-500/10 border-l-4 border-orange-500" : "hover:bg-slate-50 dark:hover:bg-gray-800/50 border-l-4 border-transparent", "p-4 border-b border-gray-50 dark:border-gray-800/50 cursor-pointer transition-colors flex gap-3"])
+            }, [
+              e("div", D, [
+                e("img", {
+                  src: r.avatar,
+                  class: "w-10 h-10 rounded-full border border-gray-100 dark:border-gray-700"
+                }, null, 8, L),
+                r.unread ? (l(), d("div", F, s(r.unread), 1)) : p("", !0)
+              ]),
+              e("div", I, [
+                e("div", P, [
+                  e("span", E, s(r.name), 1),
+                  e("span", H, s(r.time), 1)
+                ]),
+                e("p", G, s(r.lastMsg), 1)
+              ])
+            ], 10, $))), 128))
+          ])
+        ]),
+        e("div", R, [
+          e("div", T, [
+            e("div", U, [
+              e("h3", q, s(a.value.name), 1),
+              e("span", J, "VIP" + s(Math.floor(Math.random() * 4) + 1), 1)
+            ]),
+            e("button", {
+              onClick: t[0] || (t[0] = (r) => c.value = !0),
+              class: "text-sm text-slate-500 hover:text-orange-500 transition-colors flex items-center gap-1"
+            }, [...t[7] || (t[7] = [
+              e("svg", {
+                class: "w-4 h-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor"
+              }, [
+                e("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                })
+              ], -1),
+              i(" 查看客户资料 ", -1)
+            ])])
+          ]),
+          e("div", K, [
+            e("div", O, [
+              e("span", Q, "今天 " + s(a.value.time), 1)
+            ]),
+            e("div", W, [
+              e("img", {
+                src: a.value.avatar,
+                class: "w-8 h-8 rounded-full border border-gray-200"
+              }, null, 8, X),
+              e("div", null, [
+                e("div", Y, s(a.value.lastMsg), 1)
+              ])
+            ]),
+            a.value.id === 1 ? (l(), d("div", Z, [
+              t[8] || (t[8] = e("img", {
+                src: "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix",
+                class: "w-8 h-8 rounded-full border border-gray-200"
+              }, null, -1)),
+              e("div", null, [
+                e("div", ee, " 您好，" + s(a.value.name) + "！这款商品目前还有最后 2 件库存哦，您可以直接下单。 ", 1)
+              ])
+            ])) : p("", !0)
+          ]),
+          t[9] || (t[9] = v('<div class="bg-white dark:bg-[#0A1120] border-t border-gray-100 dark:border-gray-800 p-4 shrink-0"><div class="flex gap-2 mb-3"><button class="p-1.5 text-slate-400 hover:text-orange-500 rounded hover:bg-slate-50 transition-colors"><svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></button><button class="p-1.5 text-slate-400 hover:text-orange-500 rounded hover:bg-slate-50 transition-colors"><svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg></button><button class="p-1.5 text-slate-400 hover:text-orange-500 rounded hover:bg-slate-50 transition-colors"><svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg></button></div><div class="flex gap-4 items-end"><textarea rows="3" placeholder="输入消息回复用户..." class="flex-1 resize-none px-3 py-2 rounded-lg bg-slate-50 dark:bg-gray-800/50 border border-transparent focus:border-orange-500 focus:bg-white outline-none text-sm transition-all custom-scrollbar dark:text-slate-200"></textarea><button class="px-6 py-2.5 bg-gradient-to-r from-orange-500 to-rose-500 text-white rounded-lg font-bold hover:shadow-lg hover:shadow-orange-500/30 transition-all mb-1">发送</button></div></div>', 1))
+        ])
+      ]),
+      m(b(V), {
+        show: c.value,
+        "onUpdate:show": t[3] || (t[3] = (r) => c.value = r),
+        width: 360,
+        placement: "right"
+      }, {
+        default: h(() => [
+          m(b(z), {
+            title: "客户资料",
+            closable: ""
+          }, {
+            default: h(() => [
+              e("div", te, [
+                e("div", re, [
+                  e("img", {
+                    src: a.value.avatar,
+                    class: "w-16 h-16 rounded-full border border-gray-200 dark:border-gray-700"
+                  }, null, 8, ae),
+                  e("div", null, [
+                    e("div", se, s(a.value.name), 1),
+                    t[10] || (t[10] = e("div", { class: "text-sm text-slate-500 mb-2" }, "138****5678", -1)),
+                    t[11] || (t[11] = e("span", { class: "px-2 py-0.5 text-[10px] font-bold rounded bg-amber-50 text-amber-500 border border-amber-100" }, "VIP会员", -1))
+                  ])
+                ]),
+                t[12] || (t[12] = e("div", { class: "grid grid-cols-2 gap-4 pb-6 border-b border-gray-100 dark:border-gray-800" }, [
+                  e("div", { class: "bg-slate-50 dark:bg-gray-800/50 p-4 rounded-xl text-center" }, [
+                    e("div", { class: "text-xs text-slate-500 mb-1" }, "累计消费"),
+                    e("div", { class: "text-lg font-bold text-orange-500" }, "¥ 12,840.00")
+                  ]),
+                  e("div", { class: "bg-slate-50 dark:bg-gray-800/50 p-4 rounded-xl text-center" }, [
+                    e("div", { class: "text-xs text-slate-500 mb-1" }, "订单数"),
+                    e("div", { class: "text-lg font-bold text-slate-800 dark:text-slate-200" }, [
+                      i("45 "),
+                      e("span", { class: "text-xs font-normal text-slate-500" }, "笔")
+                    ])
+                  ])
+                ], -1)),
+                t[13] || (t[13] = e("div", null, [
+                  e("h4", { class: "text-sm font-bold text-slate-800 dark:text-slate-200 mb-3" }, "用户标签"),
+                  e("div", { class: "flex flex-wrap gap-2" }, [
+                    e("span", { class: "px-3 py-1.5 bg-rose-50 text-rose-500 dark:bg-rose-500/10 rounded text-xs" }, "高频复购"),
+                    e("span", { class: "px-3 py-1.5 bg-blue-50 text-blue-500 dark:bg-blue-500/10 rounded text-xs" }, "品质偏好"),
+                    e("span", { class: "px-3 py-1.5 bg-emerald-50 text-emerald-500 dark:bg-emerald-500/10 rounded text-xs" }, "极少退货")
+                  ])
+                ], -1)),
+                e("div", oe, [
+                  e("button", {
+                    onClick: t[1] || (t[1] = (r) => b(g).push(`/user/profile/${a.value.id}`)),
+                    class: "flex-1 py-2 bg-slate-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
+                  }, "完整画像"),
+                  e("button", {
+                    onClick: t[2] || (t[2] = (r) => b(g).push(`/user/orders/${a.value.id}`)),
+                    class: "flex-1 py-2 bg-slate-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
+                  }, "历史订单")
+                ])
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["show"])
+    ]));
+  }
+});
+export {
+  ge as default
+};

package/dist/Finance-CZkxKf_8.js

@@ -0,0 +1,144 @@
+import { defineComponent as u, ref as i, openBlock as b, createElementBlock as x, createElementVNode as t, unref as o, createVNode as r, Fragment as c, renderList as f, toDisplayString as a, normalizeClass as v } from "vue";
+import { useRouter as k } from "vue-router";
+import { NNumberAnimation as l, NSelect as y, NDatePicker as h } from "naive-ui";
+const w = { class: "p-6 bg-white dark:bg-[#0A1120] rounded-2xl shadow-sm min-h-[calc(100vh-120px)] border border-gray-100 dark:border-gray-800" }, _ = { class: "flex justify-between items-center mb-6" }, N = { class: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-8" }, z = { class: "border border-orange-100 dark:border-orange-500/20 rounded-xl p-6 bg-gradient-to-br from-orange-50 to-rose-50 dark:from-orange-500/10 dark:to-rose-500/10" }, F = { class: "text-3xl font-black text-slate-800 dark:text-slate-100 flex items-baseline" }, A = { class: "border border-gray-100 dark:border-gray-800 rounded-xl p-6 bg-white dark:bg-[#0A1120]" }, L = { class: "text-3xl font-black text-slate-700 dark:text-slate-200 flex items-baseline" }, D = { class: "border border-gray-100 dark:border-gray-800 rounded-xl p-6 bg-white dark:bg-[#0A1120]" }, R = { class: "text-3xl font-black text-slate-700 dark:text-slate-200 flex items-baseline" }, T = { class: "flex flex-wrap gap-4 mb-6 bg-slate-50 dark:bg-gray-800/50 p-4 rounded-xl border border-slate-100 dark:border-gray-800" }, W = { class: "w-40" }, C = { class: "w-48" }, E = { class: "overflow-x-auto rounded-xl border border-gray-100 dark:border-gray-800" }, O = { class: "w-full text-left border-collapse" }, B = { class: "divide-y divide-gray-100 dark:divide-gray-800" }, M = { class: "p-4 text-sm text-slate-500" }, S = { class: "p-4" }, U = { class: "font-medium text-slate-700 dark:text-slate-300 text-sm" }, V = { class: "text-xs text-slate-400 mt-1" }, j = { class: "p-4 text-sm font-medium text-slate-700 dark:text-slate-300" }, P = { class: "mr-1" }, X = { class: "p-4 text-right text-sm font-bold text-slate-600 dark:text-slate-400" }, J = /* @__PURE__ */ u({
+  __name: "Finance",
+  setup($) {
+    const p = k(), d = i(null), g = [
+      { label: "收入 (订单结算)", value: "income" },
+      { label: "支出 (退款/提现)", value: "expense" }
+    ], n = i(null), m = [
+      { id: 1, time: "2024-10-28 16:30:22", flowNo: "FLW202410280001", bizNo: "ORD2024102100889", type: "订单结算收入", amount: 458, balance: 128450 },
+      { id: 2, time: "2024-10-28 14:15:10", flowNo: "FLW202410280002", bizNo: "RET202410280001", type: "售后退款支出", amount: -159, balance: 127992 },
+      { id: 3, time: "2024-10-28 10:00:00", flowNo: "FLW202410280003", bizNo: "TX202410280001", type: "账户余额提现", amount: -5e4, balance: 128151 },
+      { id: 4, time: "2024-10-27 22:30:45", flowNo: "FLW202410270001", bizNo: "ORD2024102000456", type: "订单结算收入", amount: 899, balance: 178151 }
+    ];
+    return (q, e) => (b(), x("div", w, [
+      t("div", _, [
+        e[3] || (e[3] = t("h2", { class: "text-2xl font-bold text-slate-800 dark:text-slate-200" }, "财务结算", -1)),
+        t("button", {
+          onClick: e[0] || (e[0] = (s) => o(p).push("/finance/withdraw")),
+          class: "px-4 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-lg font-medium hover:shadow-lg hover:shadow-emerald-500/30 transition-all flex items-center gap-2"
+        }, " 申请提现 ")
+      ]),
+      t("div", N, [
+        t("div", z, [
+          e[5] || (e[5] = t("div", { class: "text-sm font-bold text-orange-600 dark:text-orange-400 mb-2" }, "账户可提现余额", -1)),
+          t("div", F, [
+            e[4] || (e[4] = t("span", { class: "mr-1" }, "¥", -1)),
+            r(o(l), {
+              from: 0,
+              to: 128450,
+              precision: 2,
+              "show-separator": ""
+            })
+          ])
+        ]),
+        t("div", A, [
+          e[7] || (e[7] = t("div", { class: "text-sm font-bold text-slate-500 mb-2" }, "待结算金额 (T+7)", -1)),
+          t("div", L, [
+            e[6] || (e[6] = t("span", { class: "mr-1" }, "¥", -1)),
+            r(o(l), {
+              from: 0,
+              to: 45200,
+              precision: 2,
+              "show-separator": ""
+            })
+          ])
+        ]),
+        t("div", D, [
+          e[9] || (e[9] = t("div", { class: "text-sm font-bold text-slate-500 mb-2" }, "累计已提现", -1)),
+          t("div", R, [
+            e[8] || (e[8] = t("span", { class: "mr-1" }, "¥", -1)),
+            r(o(l), {
+              from: 0,
+              to: 89e4,
+              precision: 2,
+              "show-separator": ""
+            })
+          ])
+        ])
+      ]),
+      t("div", T, [
+        e[10] || (e[10] = t("div", { class: "flex-1 min-w-[200px]" }, [
+          t("input", {
+            type: "text",
+            placeholder: "搜索流水号 / 订单号",
+            class: "w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#0A1120] focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all dark:text-slate-200"
+          })
+        ], -1)),
+        t("div", W, [
+          r(o(y), {
+            value: d.value,
+            "onUpdate:value": e[1] || (e[1] = (s) => d.value = s),
+            options: g,
+            placeholder: "全部类型"
+          }, null, 8, ["value"])
+        ]),
+        t("div", C, [
+          r(o(h), {
+            value: n.value,
+            "onUpdate:value": e[2] || (e[2] = (s) => n.value = s),
+            type: "month",
+            clearable: "",
+            placeholder: "选择月份"
+          }, null, 8, ["value"])
+        ]),
+        e[11] || (e[11] = t("button", { class: "px-6 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-slate-700 dark:text-slate-200 rounded-lg hover:bg-slate-50 dark:hover:bg-gray-700 transition-colors font-medium" }, "搜索", -1))
+      ]),
+      t("div", E, [
+        t("table", O, [
+          e[14] || (e[14] = t("thead", { class: "bg-slate-50 dark:bg-gray-800/50" }, [
+            t("tr", { class: "text-sm text-slate-500 dark:text-slate-400 font-semibold border-b border-gray-100 dark:border-gray-800" }, [
+              t("th", { class: "p-4" }, "创建时间"),
+              t("th", { class: "p-4" }, "流水号 / 业务单号"),
+              t("th", { class: "p-4" }, "业务类型"),
+              t("th", { class: "p-4 text-right" }, "收支金额"),
+              t("th", { class: "p-4 text-right" }, "账户余额"),
+              t("th", { class: "p-4 text-center" }, "状态")
+            ])
+          ], -1)),
+          t("tbody", B, [
+            (b(), x(c, null, f(m, (s) => t("tr", {
+              key: s.id,
+              class: "hover:bg-slate-50/50 dark:hover:bg-gray-800/30 transition-colors group"
+            }, [
+              t("td", M, a(s.time), 1),
+              t("td", S, [
+                t("div", U, a(s.flowNo), 1),
+                t("div", V, a(s.bizNo), 1)
+              ]),
+              t("td", j, a(s.type), 1),
+              t("td", {
+                class: v(["p-4 text-right font-bold text-lg", s.amount > 0 ? "text-emerald-500" : "text-slate-700 dark:text-slate-200"])
+              }, [
+                t("span", P, a(s.amount > 0 ? "+" : ""), 1),
+                r(o(l), {
+                  from: 0,
+                  to: Math.abs(s.amount),
+                  precision: 2,
+                  "show-separator": ""
+                }, null, 8, ["to"])
+              ], 2),
+              t("td", X, [
+                e[12] || (e[12] = t("span", { class: "mr-1" }, "¥", -1)),
+                r(o(l), {
+                  from: 0,
+                  to: s.balance,
+                  precision: 2,
+                  "show-separator": ""
+                }, null, 8, ["to"])
+              ]),
+              e[13] || (e[13] = t("td", { class: "p-4 text-center" }, [
+                t("span", { class: "bg-emerald-50 text-emerald-500 dark:bg-emerald-500/10 px-2.5 py-1 text-xs font-bold rounded-md" }, "已完成")
+              ], -1))
+            ])), 64))
+          ])
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  J as default
+};