@hzab/flowlong-designer 0.0.1

package/src/components/Selector/index.tsx

@@ -0,0 +1,240 @@
+import { useRef, useState, useContext, useEffect } from "react";
+import { Modal, Input, Button, Tree, Checkbox, Pagination, Avatar } from "antd";
+import { RightOutlined, DeleteOutlined } from "@ant-design/icons";
+
+import { SelectContext } from "./SelectContext";
+
+import "./index.less";
+
+/** 弹窗标题枚举 */
+const titleMap = ["人员选择", "角色选择"];
+
+export const Selector = (props) => {
+  const selectorCtx = useContext(SelectContext);
+  const { open, type, value, onSave, treeModel, listModel, roleListModel } = selectorCtx.selectHandler;
+  const [groupOptions, setGroupOptions] = useState([
+    {
+      title: "Group-111",
+      key: "g-111",
+    },
+    {
+      title: "Group-222",
+      key: "g-222",
+    },
+    {
+      title: "Group-333",
+      key: "g-333",
+    },
+  ]);
+  const [options, setOptions] = useState([
+
+  ]);
+
+  const [roleOptions, setRoleOptions] = useState([
+    {
+      title: "Role-111",
+      key: "r-111",
+    },
+    {
+      title: "Role-222",
+      key: "r-222",
+    },
+    {
+      title: "Role-333",
+      key: "r-333",
+    },
+  ]);
+  const [selected, setSelected] = useState(Array.isArray(value) ? value?.map((it) => it.id || it.key) : []);
+  const selectedRef = useRef(
+    Array.isArray(value)
+      ? value?.map((it) => ({
+        ...it,
+        title: it.name,
+        key: it.id,
+      }))
+      : [],
+  );
+
+
+  const handleGetTree =  () => {
+    treeModel?.get()
+    .then((res) => {
+      setGroupOptions(res);
+    })
+    };
+
+  const handleGetList =  (data?: any) => {
+    (type == 2 ? roleListModel :listModel)?.get(data || {})
+    .then((res) => {
+      setOptions(roleOptions);
+    })
+    };
+
+  useEffect(() => {
+    if (type == 2) {
+      handleGetList();
+    } else if (type == 1) {
+      handleGetTree();
+    }
+  }, [type]);
+
+  useEffect(() => {
+
+    setSelected(Array.isArray(value) ? value?.map((it) => it.id || it.key) : []);
+    selectedRef.current = Array.isArray(value)
+      ? value?.map((it) => ({
+        ...it,
+        title: it.name,
+        key: it.id,
+      }))
+      : [];
+  }, [value]);
+
+  const pageRef = useRef(1);
+  const keywordRef = useRef("");
+  const keyIdRef = useRef(undefined);
+  const groupTreeRef = useRef();
+
+  function onModalSave() {
+    onSave && onSave(selectedRef.current || []);
+    onModalClose();
+  }
+
+  function onModalClose() {
+    setSelected([]);
+    selectedRef.current = [];
+    selectorCtx.onClose();
+  }
+
+  function onSearch(value, event) {
+    // keywordRef.current = value;
+    handleGetList({orgId:keyIdRef.current, name:value});
+
+  }
+
+  function groupClick(value, node) {
+    handleGetList({orgId:value});
+    keyIdRef.current = value;
+
+    // keywordRef.current = "";
+    // pageRef.current = 1;
+    // getUserOptions(value);
+  }
+
+  function getUserOptions(id) {
+    // TODO: 请求并设置用户列表
+    setTimeout(() => {
+      const list = [];
+      for (let i = 0; i < 10; i++) {
+        list.push({
+          title: "User-" + id + "-" + list.length,
+          key: "u-" + id + "-" + list.length,
+        });
+      }
+      console.log(list);
+
+      // pageRef.current
+      setOptions(list);
+    }, 100);
+  }
+
+  function onUserCheck(key) {
+
+    const is = selected.includes(key);
+    if (!is) {
+      setSelected([...selected, key])
+      const item = options.find((it) => it.key === key);
+      selectedRef.current = [...selectedRef.current, {
+        ...item,
+        id: item.key,
+        name: item.title,
+      }]
+    } else {
+      setSelected(selected.filter((it) => it !== key));
+      selectedRef.current = selectedRef.current.filter((it) => it.key !== key);
+    }
+  }
+
+  function deleteSelected(key) {
+    setSelected(selected.filter((it) => it !== key));
+    selectedRef.current = selectedRef.current.filter((it) => it.key !== key);
+  }
+
+
+  return (
+    <div className="selector">
+      <Modal
+        wrapClassName="selector-modal"
+        open={open}
+        title={titleMap[type - 1]}
+        width={type == 1 ? 680 : 560}
+        destroyOnClose
+        getContainer="body"
+        onCancel={onModalClose}
+        footer={
+          <div className="selector-modal-footer">
+            <Button type="primary" onClick={onModalSave}>
+              保存
+            </Button>
+            <Button onClick={onModalClose}>取消</Button>
+          </div>
+        }
+      >
+        <div className="sc-user-select">
+          <div className="sc-user-select__left">
+            <div className="sc-user-select__search">
+              <Input.Search onSearch={onSearch} enterButton placeholder="搜索成员" />
+            </div>
+            <div className="sc-user-select__select">
+              {type == 1 ? <div className="sc-user-select__tree" v-loading="showGrouploading">
+                <Tree className="menu" ref={groupTreeRef} treeData={groupOptions} onSelect={groupClick} />
+              </div> : null}
+              <div className="sc-user-select__user" v-loading="showUserloading">
+                <div className="sc-user-select__user__list">
+                  {options?.map((item) => {
+                    return (
+                      <div className="sc-user-select__user__item" key={item.key}>
+                        <Checkbox
+                          checked={selected.includes(item.key)}
+                          onChange={(e) => onUserCheck(item.key)}
+                        >
+                          {item.title}
+                        </Checkbox>
+                      </div>
+                    )
+                  })}
+                </div>
+                <footer>
+                  <Pagination simple size="small" total={50} showSizeChanger showQuickJumper></Pagination>
+                </footer>
+              </div>
+            </div>
+          </div>
+          <div className="sc-user-select__toicon">
+            <RightOutlined />
+          </div>
+          <div className="sc-user-select__selected">
+            <header>已选 ({selected?.length ?? 0})</header>
+            <ul className="sc-user-select__selected-list">
+              {selectedRef.current?.map((item, idx) => {
+                return (
+                  <li key={item.id ?? item.key}>
+                    <span className="name">
+                      <Avatar size="small">{item.title?.substring(0, 1)}</Avatar>
+                      <label>{item.title}</label>
+                    </span>
+                    <span className="delete">
+                      <DeleteOutlined onClick={() => deleteSelected(item.id ?? item.key)}></DeleteOutlined>
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default Selector;

package/src/index.less

@@ -0,0 +1,466 @@
+.flowlong-designer {
+  --el-bg-color: #ffffff; /* 默认白色背景 */
+  width: 100%;
+  .designer-affix {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 9;
+    padding: 12px;
+    border: 1px solid #999;
+
+    .action-btn + .action-btn {
+      margin-left: 12px;
+    }
+  }
+
+  .json-viewer {
+    overflow: auto;
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+}
+.flowlong-designer .box-scale {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-width: min-content;
+}
+
+.flowlong-designer {
+  .node-wrap {
+    display: inline-flex;
+    width: 100%;
+    flex-flow: column wrap;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0px 0px;
+    position: relative;
+    z-index: 1;
+  }
+  .node-wrap-box {
+    display: inline-flex;
+    flex-direction: column;
+    position: relative;
+    width: 220px;
+    min-height: 72px;
+    flex-shrink: 0;
+    background: rgb(255, 255, 255);
+    border-radius: 4px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  }
+  .node-wrap-box::before {
+    content: "";
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0px;
+    border-style: solid;
+    border-width: 8px 6px 4px;
+    border-color: rgb(202, 202, 202) transparent transparent;
+  }
+  .node-wrap-box.start-node:before {
+    content: none;
+  }
+  .node-wrap-box .title {
+    height: 24px;
+    line-height: 24px;
+    color: #fff;
+    padding-left: 16px;
+    padding-right: 30px;
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .node-wrap-box .title .icon {
+    margin-right: 5px;
+  }
+  .node-wrap-box .title .close {
+    font-size: 15px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 10px;
+    display: none;
+  }
+  .node-wrap-box .content {
+    position: relative;
+    padding: 15px;
+  }
+  .node-wrap-box .content .placeholder {
+    color: #999;
+  }
+  .node-wrap-box:hover .close {
+    display: block;
+  }
+  .add-node-btn-box {
+    width: 240px;
+    display: inline-flex;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+  }
+  .add-node-btn-box:before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: -1;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: rgb(202, 202, 202);
+  }
+  .add-node-btn {
+    user-select: none;
+    // width: 240px;
+    // padding: 20px 0px 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    // flex-grow: 1;
+  }
+  .add-node-btn span {
+  }
+  .add-branch {
+    justify-content: center;
+    padding: 0px 10px;
+    position: absolute;
+    top: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+    transform-origin: center center;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+  }
+  // branch-start
+  .branch-wrap {
+    display: inline-flex;
+    width: 100%;
+  }
+  .branch-box-wrap {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    min-height: 270px;
+    width: 100%;
+    flex-shrink: 0;
+  }
+  .col-box {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+  }
+  .branch-box {
+    display: flex;
+    overflow: visible;
+    min-height: 180px;
+    height: auto;
+    border-bottom: 2px solid #ccc;
+    border-top: 2px solid #ccc;
+    position: relative;
+    margin-top: 15px;
+  }
+  .branch-box .col-box::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 0;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: rgb(202, 202, 202);
+  }
+  .condition-node {
+    display: inline-flex;
+    flex-direction: column;
+    min-height: 220px;
+  }
+  .condition-node-box {
+    padding-top: 30px;
+    padding-right: 50px;
+    padding-left: 50px;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+  }
+  .condition-node-box::before {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    margin: auto;
+    width: 2px;
+    height: 100%;
+    background-color: rgb(202, 202, 202);
+  }
+  .auto-judge {
+    position: relative;
+    width: 220px;
+    min-height: 72px;
+    background: rgb(255, 255, 255);
+    border-radius: 4px;
+    padding: 15px 15px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  }
+  .auto-judge::before {
+    content: "";
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0px;
+    border-style: solid;
+    border-width: 8px 6px 4px;
+    border-color: rgb(202, 202, 202) transparent transparent;
+    // background: rgb(239, 239, 239);
+    background: #fff;
+  }
+  .auto-judge .title {
+    line-height: 16px;
+  }
+  .auto-judge .title .node-title {
+    color: #15bc83;
+  }
+  .auto-judge .title .close {
+    font-size: 15px;
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: #999;
+    display: none;
+  }
+  .auto-judge .title .priority-title {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: #999;
+  }
+  .auto-judge .content {
+    position: relative;
+    padding-top: 15px;
+  }
+  .auto-judge .content .placeholder {
+    color: #999;
+  }
+  .auto-judge:hover {
+    .close {
+      display: block;
+    }
+    .priority-title {
+      display: none;
+    }
+  }
+  .top-left-cover-line,
+  .top-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #fff;
+    top: -2px;
+  }
+  .bottom-left-cover-line,
+  .bottom-right-cover-line {
+    position: absolute;
+    height: 3px;
+    width: 50%;
+    background-color: #fff;
+    bottom: -2px;
+  }
+  .top-left-cover-line {
+    left: -1px;
+  }
+  .top-right-cover-line {
+    right: -1px;
+  }
+  .bottom-left-cover-line {
+    left: -1px;
+  }
+  .bottom-right-cover-line {
+    right: -1px;
+  }
+  .auto-judge:hover {
+    .sort-left {
+      display: flex;
+    }
+    .sort-right {
+      display: flex;
+    }
+  }
+  .auto-judge .sort-left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    left: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .auto-judge .sort-right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    right: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  .auto-judge .sort-left:hover,
+  .auto-judge .sort-right:hover {
+    background: #eee;
+  }
+  .auto-judge:after {
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    border-radius: 4px;
+    transition: all 0.1s;
+  }
+  .auto-judge:hover:after {
+    border: 1px solid #3296fa;
+    box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+  }
+  // branch-end
+  .end-node {
+    border-radius: 50%;
+    font-size: 14px;
+    color: rgba(25, 31, 37, 0.4);
+    text-align: left;
+  }
+  .end-node-circle {
+    width: 10px;
+    height: 10px;
+    margin: auto;
+    border-radius: 50%;
+    background: #ccc;
+  }
+  .end-node-text {
+    margin-top: 5px;
+    text-align: center;
+  }
+  .node-wrap-box:after {
+    pointer-events: none;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2;
+    border-radius: 4px;
+    transition: all 0.1s;
+  }
+  .node-wrap-box:hover:after {
+    border: 1px solid #3296fa;
+    box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+  }
+}
+
+.tags-list {
+  margin-top: 15px;
+  width: 100%;
+}
+.add-node-popover-body li {
+  display: inline-block;
+  width: 80px;
+  text-align: center;
+  padding: 10px 0;
+}
+.add-node-popover-body li i {
+  border: 1px solid var(--el-border-color-light);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 38px;
+  font-size: 18px;
+  cursor: pointer;
+}
+.add-node-popover-body li i:hover {
+  border: 1px solid #3296fa;
+  background: #3296fa;
+  color: #fff !important;
+}
+.add-node-popover-body li p {
+  font-size: 12px;
+  margin-top: 5px;
+}
+.node-wrap-drawer__title {
+  padding-right: 40px;
+}
+.node-wrap-drawer__title label {
+  cursor: pointer;
+}
+.node-wrap-drawer__title label:hover {
+  border-bottom: 1px dashed #409eff;
+}
+.node-wrap-drawer__title .node-wrap-drawer__title-edit {
+  color: #409eff;
+  margin-left: 10px;
+  vertical-align: middle;
+}
+
+.dark .flowlong-designer {
+  .node-wrap-box,
+  .auto-judge {
+    background: #2b2b2b;
+  }
+  .col-box {
+    background: var(--el-bg-color);
+  }
+  .top-left-cover-line,
+  .top-right-cover-line,
+  .bottom-left-cover-line,
+  .bottom-right-cover-line {
+    background-color: var(--el-bg-color);
+  }
+  .node-wrap-box::before,
+  .auto-judge::before {
+    background-color: var(--el-bg-color);
+  }
+  .branch-box .add-branch {
+    background: var(--el-bg-color);
+  }
+  .end-node .end-node-text {
+    color: #ccc;
+  }
+  .auto-judge .sort-left:hover,
+  .auto-judge .sort-right:hover {
+    background: var(--el-bg-color);
+  }
+}
+
+.ant-drawer-footer {
+  .ant-btn + .ant-btn {
+    margin-left: 12px;
+  }
+}