xto-fronted 0.4.88 → 0.4.90

package/dist/index-58aI1w0v.js

@@ -0,0 +1,515 @@
+import { defineComponent as R, ref as f, reactive as z, computed as j, onMounted as K, openBlock as h, createElementBlock as y, createElementVNode as e, createVNode as a, unref as l, withCtx as o, withKeys as G, createTextVNode as m, toDisplayString as u, Fragment as A, renderList as N, createBlock as J, normalizeClass as Q } from "vue";
+import { Form as S, FormItem as c, Input as x, Select as W, Switch as U } from "@xto/form";
+import { Tag as X, Pagination as Y } from "@xto/data";
+import { Popconfirm as Z, Modal as ee, Message as C } from "@xto/feedback";
+import { Space as D, Button as g } from "@xto/base";
+import { S as d, a as te, _ as le } from "./index-A_B_Ap_A.js";
+const se = { class: "user-page" }, ae = { class: "search-section" }, oe = { class: "table-section" }, ne = { class: "table-toolbar" }, ie = { class: "toolbar-left" }, de = { class: "toolbar-right" }, re = { class: "table-count" }, ue = { class: "table-wrapper" }, me = { class: "data-table" }, ce = { key: 0 }, pe = { key: 1 }, ve = { class: "col-id" }, fe = { class: "id-badge" }, he = { class: "col-user" }, ge = { class: "user-info" }, ke = { class: "user-avatar" }, _e = { class: "user-detail" }, ye = { class: "user-nickname" }, xe = { class: "user-username" }, Ve = { class: "col-contact" }, be = { class: "contact-info" }, Ee = { class: "contact-email" }, Be = { class: "contact-phone" }, Ce = { class: "col-roles" }, De = { class: "role-tags" }, Le = { class: "col-status" }, we = { class: "status-switch" }, ze = { class: "col-time" }, Ae = { class: "time-text" }, Ne = { class: "col-actions" }, Se = { class: "pagination-wrapper" }, Ue = { class: "status-field" }, Me = { class: "status-label" }, Te = /* @__PURE__ */ R({
+  __name: "index",
+  setup(Ie) {
+    const M = [
+      { id: 1, username: "admin", nickname: "管理员", email: "admin@example.com", phone: "13800138001", status: d.ENABLED, roles: ["admin"], createTime: "2024-01-01 10:00:00" },
+      { id: 2, username: "zhangsan", nickname: "张三", email: "zhangsan@example.com", phone: "13800138002", status: d.ENABLED, roles: ["editor"], createTime: "2024-01-02 10:00:00" },
+      { id: 3, username: "lisi", nickname: "李四", email: "lisi@example.com", phone: "13800138003", status: d.DISABLED, roles: ["viewer"], createTime: "2024-01-03 10:00:00" },
+      { id: 4, username: "wangwu", nickname: "王五", email: "wangwu@example.com", phone: "13800138004", status: d.ENABLED, roles: ["editor"], createTime: "2024-01-04 10:00:00" },
+      { id: 5, username: "zhaoliu", nickname: "赵六", email: "zhaoliu@example.com", phone: "13800138005", status: d.ENABLED, roles: ["viewer"], createTime: "2024-01-05 10:00:00" }
+    ], b = f(!1), E = f([]), B = f(0), k = f(1), V = f(10), r = z({
+      keyword: "",
+      status: void 0
+    }), _ = f(!1), T = j(() => n.id ? "编辑用户" : "新增用户"), n = z({
+      id: 0,
+      username: "",
+      nickname: "",
+      email: "",
+      phone: "",
+      status: d.ENABLED,
+      roles: []
+    }), I = {
+      username: [
+        { required: !0, message: "请输入用户名", trigger: "blur" }
+      ],
+      nickname: [
+        { required: !0, message: "请输入昵称", trigger: "blur" }
+      ],
+      email: [
+        { required: !0, message: "请输入邮箱", trigger: "blur" },
+        { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" }
+      ]
+    }, L = f(), p = () => {
+      b.value = !0, setTimeout(() => {
+        let i = [...M];
+        r.keyword && (i = i.filter(
+          (t) => t.username.includes(r.keyword) || t.nickname.includes(r.keyword)
+        )), r.status !== void 0 && (i = i.filter((t) => t.status === r.status)), B.value = i.length, E.value = i.slice((k.value - 1) * V.value, k.value * V.value), b.value = !1;
+      }, 300);
+    }, w = () => {
+      k.value = 1, p();
+    }, H = () => {
+      r.keyword = "", r.status = void 0, k.value = 1, p();
+    }, $ = () => {
+      Object.assign(n, {
+        id: 0,
+        username: "",
+        nickname: "",
+        email: "",
+        phone: "",
+        status: d.ENABLED,
+        roles: []
+      }), _.value = !0;
+    }, F = (i) => {
+      Object.assign(n, i), _.value = !0;
+    }, P = (i) => {
+      C.success("删除成功"), p();
+    }, q = async () => {
+      var i;
+      try {
+        await ((i = L.value) == null ? void 0 : i.validate()), C.success(n.id ? "编辑成功" : "新增成功"), _.value = !1, p();
+      } catch (t) {
+        console.error(t);
+      }
+    }, O = (i) => {
+      C.success(`已${i.status === d.ENABLED ? "启用" : "禁用"}用户 ${i.username}`);
+    };
+    return K(() => {
+      p();
+    }), (i, t) => (h(), y("div", se, [
+      e("div", ae, [
+        a(l(S), {
+          model: r,
+          inline: "",
+          class: "search-form"
+        }, {
+          default: o(() => [
+            a(l(c), { label: "关键词" }, {
+              default: o(() => [
+                a(l(x), {
+                  modelValue: r.keyword,
+                  "onUpdate:modelValue": t[0] || (t[0] = (s) => r.keyword = s),
+                  placeholder: "用户名/昵称",
+                  clearable: "",
+                  onKeyup: G(w, ["enter"])
+                }, null, 8, ["modelValue"])
+              ]),
+              _: 1
+            }),
+            a(l(c), { label: "状态" }, {
+              default: o(() => [
+                a(l(W), {
+                  modelValue: r.status,
+                  "onUpdate:modelValue": t[1] || (t[1] = (s) => r.status = s),
+                  options: l(te),
+                  placeholder: "请选择",
+                  clearable: ""
+                }, null, 8, ["modelValue", "options"])
+              ]),
+              _: 1
+            }),
+            a(l(c), null, {
+              default: o(() => [
+                a(l(D), null, {
+                  default: o(() => [
+                    a(l(g), {
+                      type: "primary",
+                      onClick: w
+                    }, {
+                      icon: o(() => [...t[11] || (t[11] = [
+                        e("svg", {
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          "stroke-width": "2"
+                        }, [
+                          e("circle", {
+                            cx: "11",
+                            cy: "11",
+                            r: "8"
+                          }),
+                          e("path", { d: "M21 21l-4.35-4.35" })
+                        ], -1)
+                      ])]),
+                      default: o(() => [
+                        t[12] || (t[12] = m(" 搜索 ", -1))
+                      ]),
+                      _: 1
+                    }),
+                    a(l(g), { onClick: H }, {
+                      icon: o(() => [...t[13] || (t[13] = [
+                        e("svg", {
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          "stroke-width": "2"
+                        }, [
+                          e("path", { d: "M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8" }),
+                          e("path", { d: "M3 3v5h5" })
+                        ], -1)
+                      ])]),
+                      default: o(() => [
+                        t[14] || (t[14] = m(" 重置 ", -1))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model"])
+      ]),
+      e("div", oe, [
+        e("div", ne, [
+          e("div", ie, [
+            a(l(g), {
+              type: "primary",
+              onClick: $
+            }, {
+              icon: o(() => [...t[15] || (t[15] = [
+                e("svg", {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2"
+                }, [
+                  e("line", {
+                    x1: "12",
+                    y1: "5",
+                    x2: "12",
+                    y2: "19"
+                  }),
+                  e("line", {
+                    x1: "5",
+                    y1: "12",
+                    x2: "19",
+                    y2: "12"
+                  })
+                ], -1)
+              ])]),
+              default: o(() => [
+                t[16] || (t[16] = m(" 新增用户 ", -1))
+              ]),
+              _: 1
+            })
+          ]),
+          e("div", de, [
+            e("span", re, "共 " + u(B.value) + " 条数据", 1)
+          ])
+        ]),
+        e("div", ue, [
+          e("table", me, [
+            t[23] || (t[23] = e("thead", null, [
+              e("tr", null, [
+                e("th", { class: "col-id" }, "ID"),
+                e("th", { class: "col-user" }, "用户信息"),
+                e("th", { class: "col-contact" }, "联系方式"),
+                e("th", { class: "col-roles" }, "角色"),
+                e("th", { class: "col-status" }, "状态"),
+                e("th", { class: "col-time" }, "创建时间"),
+                e("th", { class: "col-actions" }, "操作")
+              ])
+            ], -1)),
+            e("tbody", null, [
+              b.value ? (h(), y("tr", ce, [...t[17] || (t[17] = [
+                e("td", {
+                  colspan: "7",
+                  class: "loading-cell"
+                }, [
+                  e("div", { class: "loading-content" }, [
+                    e("div", { class: "loading-spinner" }),
+                    e("span", null, "加载中...")
+                  ])
+                ], -1)
+              ])])) : E.value.length === 0 ? (h(), y("tr", pe, [...t[18] || (t[18] = [
+                e("td", {
+                  colspan: "7",
+                  class: "empty-cell"
+                }, [
+                  e("div", { class: "empty-content" }, [
+                    e("svg", {
+                      viewBox: "0 0 64 41",
+                      fill: "none"
+                    }, [
+                      e("g", { transform: "translate(0 1)" }, [
+                        e("ellipse", {
+                          fill: "#f5f5f5",
+                          cx: "32",
+                          cy: "33",
+                          rx: "32",
+                          ry: "7"
+                        }),
+                        e("g", {
+                          stroke: "var(--color-text-placeholder)",
+                          "stroke-width": "2"
+                        }, [
+                          e("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }),
+                          e("path", {
+                            d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35H11.95C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z",
+                            fill: "var(--color-fill)"
+                          })
+                        ])
+                      ])
+                    ]),
+                    e("span", null, "暂无数据")
+                  ])
+                ], -1)
+              ])])) : (h(!0), y(A, { key: 2 }, N(E.value, (s) => (h(), y("tr", {
+                key: s.id,
+                class: "data-row"
+              }, [
+                e("td", ve, [
+                  e("span", fe, u(s.id), 1)
+                ]),
+                e("td", he, [
+                  e("div", ge, [
+                    e("div", ke, u(s.nickname.charAt(0)), 1),
+                    e("div", _e, [
+                      e("span", ye, u(s.nickname), 1),
+                      e("span", xe, "@" + u(s.username), 1)
+                    ])
+                  ])
+                ]),
+                e("td", Ve, [
+                  e("div", be, [
+                    e("span", Ee, u(s.email), 1),
+                    e("span", Be, u(s.phone), 1)
+                  ])
+                ]),
+                e("td", Ce, [
+                  e("div", De, [
+                    (h(!0), y(A, null, N(s.roles, (v) => (h(), J(l(X), {
+                      key: v,
+                      size: "small",
+                      type: v === "admin" ? "primary" : "info"
+                    }, {
+                      default: o(() => [
+                        m(u(v), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["type"]))), 128))
+                  ])
+                ]),
+                e("td", Le, [
+                  e("div", we, [
+                    a(l(U), {
+                      "model-value": s.status === l(d).ENABLED,
+                      "onUpdate:modelValue": (v) => {
+                        s.status = v ? l(d).ENABLED : l(d).DISABLED, O(s);
+                      }
+                    }, null, 8, ["model-value", "onUpdate:modelValue"]),
+                    e("span", {
+                      class: Q(["status-text", { enabled: s.status === l(d).ENABLED }])
+                    }, u(s.status === l(d).ENABLED ? "已启用" : "已禁用"), 3)
+                  ])
+                ]),
+                e("td", ze, [
+                  e("span", Ae, u(s.createTime), 1)
+                ]),
+                e("td", Ne, [
+                  a(l(D), { class: "action-buttons" }, {
+                    default: o(() => [
+                      a(l(g), {
+                        type: "primary",
+                        link: "",
+                        size: "small",
+                        onClick: (v) => F(s)
+                      }, {
+                        icon: o(() => [...t[19] || (t[19] = [
+                          e("svg", {
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            "stroke-width": "2"
+                          }, [
+                            e("path", { d: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" }),
+                            e("path", { d: "M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" })
+                          ], -1)
+                        ])]),
+                        default: o(() => [
+                          t[20] || (t[20] = m(" 编辑 ", -1))
+                        ]),
+                        _: 1
+                      }, 8, ["onClick"]),
+                      a(l(Z), {
+                        title: "确定删除该用户吗？",
+                        onConfirm: (v) => P(s.id)
+                      }, {
+                        default: o(() => [
+                          a(l(g), {
+                            type: "danger",
+                            link: "",
+                            size: "small"
+                          }, {
+                            icon: o(() => [...t[21] || (t[21] = [
+                              e("svg", {
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                stroke: "currentColor",
+                                "stroke-width": "2"
+                              }, [
+                                e("polyline", { points: "3,6 5,6 21,6" }),
+                                e("path", { d: "M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" }),
+                                e("line", {
+                                  x1: "10",
+                                  y1: "11",
+                                  x2: "10",
+                                  y2: "17"
+                                }),
+                                e("line", {
+                                  x1: "14",
+                                  y1: "11",
+                                  x2: "14",
+                                  y2: "17"
+                                })
+                              ], -1)
+                            ])]),
+                            default: o(() => [
+                              t[22] || (t[22] = m(" 删除 ", -1))
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }, 8, ["onConfirm"])
+                    ]),
+                    _: 2
+                  }, 1024)
+                ])
+              ]))), 128))
+            ])
+          ])
+        ]),
+        e("div", Se, [
+          a(l(Y), {
+            "current-page": k.value,
+            "onUpdate:currentPage": t[2] || (t[2] = (s) => k.value = s),
+            "page-size": V.value,
+            "onUpdate:pageSize": t[3] || (t[3] = (s) => V.value = s),
+            total: B.value,
+            "page-sizes": [10, 20, 50, 100],
+            layout: "total, sizes, prev, pager, next",
+            onCurrentChange: p,
+            onSizeChange: p
+          }, null, 8, ["current-page", "page-size", "total"])
+        ])
+      ]),
+      a(l(ee), {
+        modelValue: _.value,
+        "onUpdate:modelValue": t[10] || (t[10] = (s) => _.value = s),
+        title: T.value,
+        width: "520px",
+        class: "user-modal"
+      }, {
+        footer: o(() => [
+          a(l(D), null, {
+            default: o(() => [
+              a(l(g), {
+                onClick: t[9] || (t[9] = (s) => _.value = !1)
+              }, {
+                default: o(() => [...t[24] || (t[24] = [
+                  m("取消", -1)
+                ])]),
+                _: 1
+              }),
+              a(l(g), {
+                type: "primary",
+                onClick: q
+              }, {
+                default: o(() => [...t[25] || (t[25] = [
+                  m("确定", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        default: o(() => [
+          a(l(S), {
+            ref_key: "formRef",
+            ref: L,
+            model: n,
+            rules: I,
+            "label-width": "80px",
+            class: "user-form"
+          }, {
+            default: o(() => [
+              a(l(c), {
+                label: "用户名",
+                prop: "username"
+              }, {
+                default: o(() => [
+                  a(l(x), {
+                    modelValue: n.username,
+                    "onUpdate:modelValue": t[4] || (t[4] = (s) => n.username = s),
+                    placeholder: "请输入用户名"
+                  }, null, 8, ["modelValue"])
+                ]),
+                _: 1
+              }),
+              a(l(c), {
+                label: "昵称",
+                prop: "nickname"
+              }, {
+                default: o(() => [
+                  a(l(x), {
+                    modelValue: n.nickname,
+                    "onUpdate:modelValue": t[5] || (t[5] = (s) => n.nickname = s),
+                    placeholder: "请输入昵称"
+                  }, null, 8, ["modelValue"])
+                ]),
+                _: 1
+              }),
+              a(l(c), {
+                label: "邮箱",
+                prop: "email"
+              }, {
+                default: o(() => [
+                  a(l(x), {
+                    modelValue: n.email,
+                    "onUpdate:modelValue": t[6] || (t[6] = (s) => n.email = s),
+                    placeholder: "请输入邮箱"
+                  }, null, 8, ["modelValue"])
+                ]),
+                _: 1
+              }),
+              a(l(c), {
+                label: "手机号",
+                prop: "phone"
+              }, {
+                default: o(() => [
+                  a(l(x), {
+                    modelValue: n.phone,
+                    "onUpdate:modelValue": t[7] || (t[7] = (s) => n.phone = s),
+                    placeholder: "请输入手机号"
+                  }, null, 8, ["modelValue"])
+                ]),
+                _: 1
+              }),
+              a(l(c), { label: "状态" }, {
+                default: o(() => [
+                  e("div", Ue, [
+                    a(l(U), {
+                      modelValue: n.status,
+                      "onUpdate:modelValue": t[8] || (t[8] = (s) => n.status = s),
+                      "active-value": l(d).ENABLED,
+                      "inactive-value": l(d).DISABLED
+                    }, null, 8, ["modelValue", "active-value", "inactive-value"]),
+                    e("span", Me, u(n.status === l(d).ENABLED ? "启用" : "禁用"), 1)
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["model"])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "title"])
+    ]));
+  }
+}), Re = /* @__PURE__ */ le(Te, [["__scopeId", "data-v-da50b35c"]]);
+export {
+  Re as default
+};