st-comp 0.0.277 → 0.0.279

package/packages/CustomFunction/components/ManageDialog.vue

@@ -1,706 +0,0 @@
-<script setup>
-import { ref, h, inject, watch, reactive, nextTick, computed } from "vue";
-import { Close, DocumentCopy, Delete, Document } from "@element-plus/icons-vue";
-import { debounce } from "st-func";
-
-const { request } = inject("stConfig"); // 组件库全局配置
-const stMonacoEditorRef = ref(null);
-const stVarSelectDialogRef = ref(null);
-
-const emit = defineEmits(["refreshData"]);
-const props = defineProps({
-  data: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const visible = ref(false);
-const loading = reactive({
-  save: false,
-  test: false,
-});
-
-// 函数相关参数
-const funcKeyWord = ref(null);
-const funcList = computed(() => {
-  if (funcKeyWord.value) {
-    return props.data.filter((item) => item.funcName.includes(funcKeyWord.value));
-  } else {
-    return props.data;
-  }
-});
-const ruleForm = reactive({
-  id: null,
-  funcName: "",
-  funcExpression: "",
-});
-
-// 测试日志相关参数
-const testResult = reactive({
-  result: null,
-  detail: "",
-  code: "",
-});
-const testLogVisible = ref(false);
-
-// 函数: 新建
-const handleAdd = () => {
-  Object.assign(ruleForm, {
-    id: null,
-    funcName: "",
-    funcExpression: "",
-  });
-  stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
-};
-// 函数: 编辑
-const handleEdit = (item) => {
-  Object.assign(ruleForm, {
-    id: item.id,
-    funcName: item.funcName,
-    funcExpression: item.funcExpression,
-  });
-  stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
-};
-// 函数: 复制
-const handleCopy = (item) => {
-  Object.assign(ruleForm, {
-    id: null,
-    funcName: `${item.funcName}-复制`,
-    funcExpression: item.funcExpression,
-  });
-  stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
-};
-
-// 函数: 删除
-const handleDelete = async (item) => {
-  // 如果删除的是当前正在操作的自定义函数, 则需要清空表单
-  if (item.id === ruleForm.id) {
-    Object.assign(ruleForm, {
-      id: null,
-      funcName: "",
-      funcExpression: "",
-    });
-    stMonacoEditorRef.value?.setValue(ruleForm.funcExpression);
-  }
-  await request.post("/common/qt/deleteSearchFunctionById", { id: item.id });
-  emit("refreshData");
-};
-// 函数: 保存
-const handleSave = debounce(async () => {
-  try {
-    loading.save = true;
-    ruleForm.funcExpression = stMonacoEditorRef.value.getValue();
-    // 校验
-    if (!ruleForm.funcName) return ElMessage.error("函数名称不可为空");
-    if (!ruleForm.funcExpression) return ElMessage.error("函数内容不可为空");
-    // 调用接口
-    await request.post("/common/qt/saveOrUpdateSearchFunction", ruleForm);
-    ElMessage.success("操作成功");
-    emit("refreshData");
-    // 如果是复制, 或者新建则清空当前表单
-    if (!ruleForm.id) handleAdd();
-  } finally {
-    loading.save = false;
-  }
-});
-
-// 测试: 生成变量key和value的输入框
-const showVariableInputDialog = (variables) => {
-  return new Promise((resolve) => {
-    const formData = ref(
-      variables.reduce((obj, variable) => {
-        obj[variable] = "";
-        return obj;
-      }, {}),
-    );
-    const errors = ref({});
-
-    // 验证函数
-    const validateForm = () => {
-      let isValid = true;
-      const newErrors = {};
-
-      variables.forEach((variable) => {
-        if (!formData.value[variable]?.trim()) {
-          newErrors[variable] = `请输入${variable}的值`;
-          isValid = false;
-        }
-      });
-
-      errors.value = newErrors;
-      return isValid;
-    };
-    // h语法表单组件
-    const FormComponent = {
-      setup() {
-        return () =>
-          h("div", [
-            h(
-              ElForm,
-              {
-                model: formData.value,
-              },
-              () =>
-                variables.map((variable) =>
-                  h(
-                    ElFormItem,
-                    {
-                      label: `${variable}: `,
-                      prop: variable,
-                      error: errors.value[variable],
-                      "label-width": "90px",
-                    },
-                    () =>
-                      h(ElInput, {
-                        modelValue: formData.value[variable],
-                        "onUpdate:modelValue": (val) => {
-                          formData.value[variable] = val;
-                          // 清除错误状态
-                          if (errors.value[variable]) delete errors.value[variable];
-                        },
-                        placeholder: `请输入 ${variable} 的值`,
-                        status: errors.value[variable] ? "error" : "",
-                      }),
-                  ),
-                ),
-            ),
-          ]);
-      },
-    };
-    ElMessageBox({
-      title: "填写变量值用于接口测试",
-      message: h(FormComponent),
-      showCancelButton: true,
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      customClass: "variable-input-dialog",
-      beforeClose: async (action, instance, done) => {
-        if (action !== "confirm") {
-          resolve(false);
-          done();
-        }
-        await nextTick();
-        if (validateForm()) {
-          resolve({ ...formData.value });
-          done();
-        }
-      },
-    }).catch(() => resolve(false));
-  });
-};
-const extractVariables = (expression) => {
-  const regex = /\$\{([^}]*)\}/g;
-  const matches = [];
-  let match;
-
-  while ((match = regex.exec(expression)) !== null) {
-    matches.push(match[1]);
-  }
-
-  return [...new Set(matches)];
-};
-const replaceVariables = (expression, variableValues) => {
-  return expression.replace(/\$\{([^}]*)\}/g, (match, variableName) => {
-    return variableValues[variableName] !== undefined ? variableValues[variableName] : match;
-  });
-};
-// 测试: 提交/日志
-const handleTest = async (action) => {
-  switch (action) {
-    case "submit": {
-      let testContent = stMonacoEditorRef.value.getValue();
-      if (!testContent) return ElMessage.error("函数内容不可为空");
-      // 检测函数中是否使用的变量语法, 如果包含, 需要用户二次输入对应的值, 将其替换后进行测试
-      if (/\$\{[^}]*\}/.test(testContent)) {
-        const variables = extractVariables(testContent);
-        const variableValues = await showVariableInputDialog(variables);
-        if (!variableValues) return;
-        testContent = replaceVariables(testContent, variableValues);
-      }
-      try {
-        loading.test = true;
-        const { body } = await request.post("/common/qt/testFactorSelect", { factorSelectExpr: testContent });
-        const { result, detail } = body;
-        Object.assign(testResult, { result, detail, code: testContent });
-        if (result === 1) {
-          ElMessage.success("测试通过");
-        } else {
-          ElMessage.error("测试未能通过");
-          testLogVisible.value = true;
-        }
-      } finally {
-        loading.test = false;
-      }
-      break;
-    }
-    case "log": {
-      if (testResult.result === null) {
-        return ElMessage.warning("请先进行测试, 等待测试完成后可查看日志");
-      }
-      testLogVisible.value = true;
-      break;
-    }
-  }
-};
-
-// 变量选择器
-const handleOpenVarSelectDialog = () => {
-  stVarSelectDialogRef.value.open(stMonacoEditorRef.value);
-};
-// 监视: 窗口开关
-watch(
-  () => visible.value,
-  (newValue) => {
-    if (!newValue) {
-      // 确保内嵌窗口全部关闭
-      stVarSelectDialogRef.value.close();
-      testLogVisible.value = false;
-    }
-  },
-);
-defineExpose({
-  open: (params) => {
-    visible.value = true;
-    // 进行一些窗口内初始化操作
-    nextTick(() => {
-      stMonacoEditorRef.value?.resize();
-      // 重置函数关键字
-      funcKeyWord.value = null;
-      // 重置测试结果
-      Object.assign(testResult, {
-        result: null,
-        detail: "",
-        code: "",
-      });
-      // 根据入参判断, 去赋值表单默认值
-      if (params) {
-        const item = {
-          id: params.id,
-          funcName: params.funcName,
-          funcExpression: params.funcExpression,
-        };
-        handleEdit(item);
-      } else {
-        funcList.value.length ? handleEdit(funcList.value[0]) : handleAdd();
-      }
-    });
-  },
-});
-</script>
-
-<template>
-  <el-dialog
-    modal-class="manage-dialog"
-    v-model="visible"
-    width="1600"
-    align-center
-    append-to-body
-    overflow
-    :modal="false"
-    :modal-penetrable="true"
-    :show-close="false"
-  >
-    <template #header="{ titleId, titleClass }">
-      <div class="custom-header">
-        <div class="left">
-          <span
-            :id="titleId"
-            :class="titleClass"
-          >
-            自定义函数管理面板
-          </span>
-        </div>
-        <div class="right">
-          <el-icon @click="visible = false"><Close /></el-icon>
-        </div>
-      </div>
-    </template>
-    <div class="manage-dialog-body">
-      <!-- 函数列表 -->
-      <div class="func-list">
-        <div class="search">
-          <span>输入函数关键字</span>
-          <el-input
-            v-model="funcKeyWord"
-            clearable
-          />
-          <el-button
-            type="primary"
-            @click="handleAdd"
-            >新建</el-button
-          >
-        </div>
-        <el-scrollbar class="list">
-          <template v-if="funcList.length">
-            <div
-              v-for="item in funcList"
-              :key="item.id"
-              :class="{ 'active-list-item': ruleForm.id === item.id }"
-              class="list-item"
-            >
-              <span
-                class="func-name"
-                @click="handleEdit(item)"
-                >{{ item.funcName }}</span
-              >
-              <div class="icon-box">
-                <el-icon>
-                  <DocumentCopy @click="handleCopy(item)" />
-                </el-icon>
-                <el-popconfirm
-                  :title="`确认是否删除?`"
-                  confirm-button-text="确认"
-                  cancel-button-text="取消"
-                  @confirm="handleDelete(item)"
-                >
-                  <template #reference>
-                    <el-icon @click.stop="() => {}"> <Delete /> </el-icon>
-                  </template>
-                </el-popconfirm>
-              </div>
-            </div>
-          </template>
-          <el-empty
-            v-else
-            description="暂无数据"
-          />
-        </el-scrollbar>
-      </div>
-      <!-- 函数表单 -->
-      <div class="rule-form">
-        <div class="header">
-          <span>函数名称:</span>
-          <el-input v-model="ruleForm.funcName" />
-          <div class="right">
-            <el-button
-              type="primary"
-              @click="handleSave"
-              :loading="loading.save"
-            >
-              保存
-            </el-button>
-            <el-button
-              :loading="loading.test"
-              @click="handleTest('submit')"
-            >
-              测试
-            </el-button>
-            <el-button
-              :icon="Document"
-              @click="handleTest('log')"
-            >
-              日志明细
-            </el-button>
-            <el-button
-              type="primary"
-              @click="handleOpenVarSelectDialog"
-            >
-              变量选择器
-            </el-button>
-          </div>
-        </div>
-        <!-- 注意事项 -->
-        <div class="tip-box">说明: 公式里可以使用变量, 变量名命名格式: ${变量名}, 后续可在应用函数时填写具体值, 系统会自动换算</div>
-        <!-- 内容 -->
-        <st-monacoEditor
-          ref="stMonacoEditorRef"
-          :language="'lua'"
-          style="width: 100%; height: calc(80vh - 75px)"
-        />
-      </div>
-    </div>
-
-    <!-- 变量选择器 -->
-    <st-varSelectDialog ref="stVarSelectDialogRef" />
-
-    <!-- 窗口: 日志明细 -->
-    <el-dialog
-      modal-class="log-dialog"
-      v-model="testLogVisible"
-      width="830"
-      align-center
-      append-to-body
-      draggable
-      overflow
-      :modal="false"
-      :modal-penetrable="true"
-      :show-close="false"
-    >
-      <template #header="{ titleId, titleClass }">
-        <div class="custom-header">
-          <div class="left">
-            <span
-              :id="titleId"
-              :class="titleClass"
-            >
-              日志明细
-            </span>
-          </div>
-          <!-- 关闭 -->
-          <div class="right">
-            <el-icon @click="testLogVisible = false"><Close /></el-icon>
-          </div>
-        </div>
-      </template>
-      <div class="content">
-        <!-- 代码 -->
-        <el-scrollbar
-          class="code"
-          height="600px"
-        >
-          <pre>{{ testResult.code }}</pre>
-        </el-scrollbar>
-        <!-- 分割线 -->
-        <el-divider direction="vertical" />
-        <!-- 日志 -->
-        <el-scrollbar height="600px">
-          <pre :class="testResult.result === 1 ? 'success-log' : 'error-log'">{{ testResult.result === 1 ? `✅️ 测试通过\n${testResult.detail}` : testResult.detail }}</pre>
-        </el-scrollbar>
-      </div>
-      <!-- 底部 -->
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="testLogVisible = false"> 关闭 </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.manage-dialog {
-  .custom-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .left,
-    .right {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .el-icon {
-      cursor: pointer;
-    }
-  }
-  .manage-dialog-body {
-    height: 80vh;
-    display: flex;
-    align-items: center;
-    .func-list {
-      height: 100%;
-      width: 400px;
-      display: flex;
-      flex-direction: column;
-      box-sizing: border-box;
-      padding-right: 10px;
-      border-right: var(--el-border);
-      .search {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 10px;
-        .el-input {
-          flex: 1;
-          margin: 0 10px;
-        }
-      }
-      .list {
-        width: 100%;
-        height: 100%;
-        .list-item {
-          font-size: 16px;
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          position: relative;
-          border-radius: 4px;
-          &:hover {
-            background-color: #d9e7ff;
-          }
-          &::before {
-            content: "";
-            position: absolute;
-            left: -30px;
-            top: calc(50% - 2px);
-            width: 30px;
-            height: 16px;
-            background: var(--el-color-primary);
-            clip-path: polygon(
-              0% 0%,
-              // 左上角
-              50% 0%,
-              // 右上角缺点
-              100% 100%,
-              // 缺点终点
-              100% 100%,
-              // 右下角
-              0% 100% // 左下角
-            );
-            transform: translateY(-50%);
-            transition: all 0.25s ease;
-          }
-          .func-name {
-            line-height: 32px;
-            flex: 1;
-            box-sizing: border-box;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            transition: all 0.25s ease;
-            cursor: pointer;
-            &:hover {
-              color: var(--el-color-primary);
-            }
-          }
-          .icon-box {
-            font-size: 18px;
-            height: 20px;
-            padding-right: 10px;
-            .el-icon {
-              margin-left: 6px;
-              cursor: pointer;
-              &:hover {
-                color: var(--el-color-primary);
-              }
-            }
-            .delete {
-              &:hover {
-                color: var(--el-color-danger);
-              }
-            }
-          }
-        }
-        .active-list-item {
-          &::before {
-            left: 0;
-          }
-          &::after {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: var(--el-color-primary);
-            transform: scaleX(0);
-            transform-origin: left center;
-            animation: borderGrow 0.25s ease forwards;
-          }
-          .func-name {
-            color: var(--el-color-primary);
-            font-weight: bold;
-            padding-left: 34px;
-          }
-        }
-        @keyframes borderGrow {
-          from {
-            transform: scaleX(0);
-          }
-          to {
-            transform: scaleX(1);
-          }
-        }
-      }
-    }
-    .rule-form {
-      flex: 1;
-      height: 100%;
-      box-sizing: border-box;
-      padding-left: 10px;
-      .header {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-bottom: 10px;
-        .el-input {
-          flex: 1;
-        }
-      }
-      .tip-box {
-        box-sizing: border-box;
-        padding: 4px 0 4px 8px;
-        margin-bottom: 4px;
-        border-left: 6px solid var(--el-color-info);
-        background-color: var(--el-color-info-light-8);
-      }
-      .el-empty {
-        height: 100%;
-      }
-    }
-  }
-}
-.test-variety-dialog {
-  .custom-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .left,
-    .right {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .el-icon {
-      cursor: pointer;
-    }
-  }
-  .full-height-textarea {
-    width: 100%;
-    height: 200px;
-    margin-top: 10px;
-    :deep(.el-textarea__inner) {
-      box-sizing: border-box;
-      height: 100%;
-    }
-  }
-}
-.log-dialog {
-  .custom-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .left,
-    .right {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .el-icon {
-      cursor: pointer;
-    }
-  }
-  .content {
-    display: flex;
-    background-color: var(--el-color-black);
-    .el-scrollbar {
-      flex: 1;
-      box-sizing: border-box;
-      padding: 8px;
-    }
-    .el-divider {
-      margin: 0;
-      height: 616px;
-    }
-    .code {
-      color: var(--el-color-info);
-    }
-    .success-log {
-      color: var(--el-color-success);
-    }
-    .error-log {
-      color: var(--el-color-danger);
-    }
-    pre {
-      margin: 0;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      word-break: break-all;
-      word-wrap: break-word;
-    }
-  }
-}
-</style>

package/packages/CustomFunction/index.ts

@@ -1,8 +0,0 @@
-import { App } from "vue";
-import StCustomFunction from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-customFunction", StCustomFunction);
-  },
-}