@pubinfo/core 2.0.12 → 2.0.13

package/src/features/components/PartyLogin/Modal.vue

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import type { HTTPMethod, HTTPParamsValue, ParamItem, PartyLoginConfig, PartyLoginParamItem } from './type';
+import StepOne from './steps/One.vue';
+import StepTwo from './steps/Two.vue';
+import { usePartyRequest } from './usePartyRequest';
+
+defineOptions({
+  name: 'ThirdPartyLogin',
+});
+
+const props = defineProps<{
+  modelValue?: PartyLoginConfig
+  targetUrl?: string
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: PartyLoginConfig]
+}>();
+
+const open = defineModel<boolean>('open', {
+  default: false,
+});
+
+// Step management
+const currentStep = ref<number>(0);
+
+// Step 1 data (preserved when switching)
+const httpURL = ref<string>('');
+const httpMethod = ref<HTTPMethod>('GET');
+const httpParams = ref<HTTPParamsValue>('query');
+
+// Keep items per panel; preserve when switching panels
+const panelItems = reactive<Record<HTTPParamsValue, ParamItem[]>>({
+  query: [],
+  body: [],
+  header: [],
+  cookie: [],
+});
+
+// Step 2 data
+const oauthParams = ref<ParamItem[]>([]);
+
+// 计算第三方登录的目标URL (iframe或link地址)
+const partyLoginTargetUrl = computed(() => {
+  return props.targetUrl || '';
+});
+
+function handleOpenModal(value: boolean = true) {
+  open.value = value;
+  // Reset all data when closing
+  if (!value) {
+    resetAllData();
+  }
+  else {
+    // Load existing data when opening
+    loadExistingData();
+  }
+}
+
+// Helper functions to create default items
+let uid = 0;
+function createEmptyItem(): ParamItem {
+  return {
+    id: ++uid,
+    checked: true,
+    keyName: '',
+    type: 'string',
+    value: '',
+  };
+}
+
+function createHeaderDefaultItem(): ParamItem {
+  return {
+    id: ++uid,
+    checked: true,
+    keyName: 'Content-Type',
+    type: 'string',
+    value: 'application/json;',
+  };
+}
+
+// Initialize default data
+function initializeDefaultData() {
+  const items: HTTPParamsValue[] = ['query', 'body', 'header', 'cookie'];
+  items.forEach((k) => {
+    if (panelItems[k].length === 0) {
+      if (k === 'header') {
+        panelItems[k].push(createHeaderDefaultItem());
+      }
+      else {
+        panelItems[k].push(createEmptyItem());
+      }
+    }
+  });
+
+  // Initialize Step 2 oauth params with one empty item
+  if (oauthParams.value.length === 0) {
+    oauthParams.value.push(createEmptyItem());
+  }
+}
+
+// Initialize on mount
+onMounted(() => {
+  initializeDefaultData();
+});
+
+// Load existing configuration data
+function loadExistingData() {
+  if (!props.modelValue || props.modelValue.length === 0) {
+    return;
+  }
+
+  // Helper to convert PartyLoginParamItem back to ParamItem
+  const convertToParamItem = (item: PartyLoginParamItem): ParamItem => {
+    const paramItem: ParamItem = {
+      id: ++uid,
+      checked: true,
+      keyName: item.key,
+      type: item.type,
+      value: (item.value ?? '') as ParamItem['value'],
+    };
+
+    if (item.type === 'system' && item.field) {
+      paramItem.systemKey = item.field;
+    }
+    else if (item.type === 'request' && item.field) {
+      paramItem.requestKey = item.field;
+    }
+
+    return paramItem;
+  };
+
+  props.modelValue.forEach((stepConfig) => {
+    if (stepConfig.step === 1 && stepConfig.request) {
+      // Load step 1 data
+      httpURL.value = stepConfig.request.url;
+      httpMethod.value = stepConfig.request.method;
+
+      // Load params for each panel
+      const paramKeys: HTTPParamsValue[] = ['query', 'body', 'header', 'cookie'];
+      paramKeys.forEach((key) => {
+        const items = stepConfig.request!.params[key];
+        if (items && items.length > 0) {
+          panelItems[key] = items.map(convertToParamItem);
+        }
+      });
+    }
+    else if (stepConfig.step === 2 && stepConfig.oauth) {
+      // Load step 2 data - params only, no URL
+      if (stepConfig.oauth.params && stepConfig.oauth.params.length > 0) {
+        oauthParams.value = stepConfig.oauth.params.map(convertToParamItem);
+      }
+    }
+  });
+}
+
+// Reset all data to initial state
+function resetAllData() {
+  // Reset step
+  currentStep.value = 0;
+
+  // Reset form data
+  httpURL.value = '';
+  httpMethod.value = 'GET';
+  httpParams.value = 'query';
+
+  // Clear all panel items
+  panelItems.query = [];
+  panelItems.body = [];
+  panelItems.header = [];
+  panelItems.cookie = [];
+
+  // Reset step 2 data
+  oauthParams.value = [];
+
+  // Re-initialize default data
+  initializeDefaultData();
+}
+
+// use hook for sending request and result states
+const requestParams = computed(() => {
+  const params: Record<string, any> = {
+    query: {},
+    body: {},
+    header: {},
+    cookie: {},
+  };
+
+  // Convert panelItems to simple objects
+  Object.keys(panelItems).forEach((key) => {
+    const items = panelItems[key as HTTPParamsValue];
+    items.filter(i => i.checked && i.keyName.trim().length).forEach((item) => {
+      const keyName = item.keyName.trim();
+      let value: any = item.value;
+      if (item.type === 'number') {
+        const n = Number(value);
+        value = Number.isFinite(n) ? n : value;
+      }
+      else if (item.type === 'boolean') {
+        value = item.value === 'true';
+      }
+      params[key][keyName] = value;
+    });
+  });
+
+  return params;
+});
+
+const { send, isFinished, isFetching, statusCode, data, elapsedTime } = usePartyRequest({
+  url: httpURL,
+  method: httpMethod,
+  params: requestParams,
+});
+
+// Handle send request (stay in step 1)
+async function handleSend() {
+  await send();
+}
+
+// Step navigation
+function handlePrevStep() {
+  if (currentStep.value > 0) {
+    currentStep.value--;
+  }
+}
+
+function handleNextStep() {
+  // Allow navigation to next step anytime (request is optional)
+  if (currentStep.value < 1) {
+    currentStep.value++;
+  }
+}
+
+// Generate final JSON data
+function generateFinalJSON() {
+  // Helper to format param items - preserve field names for system/request types
+  const formatParamItem = (item: ParamItem) => {
+    const base = {
+      key: item.keyName,
+      type: item.type,
+    };
+
+    // For system/request types, store the field key (variable) instead of value
+    if (item.type === 'system' && item.systemKey) {
+      return { ...base, field: item.systemKey };
+    }
+    if (item.type === 'request' && item.requestKey) {
+      return { ...base, field: item.requestKey };
+    }
+
+    // For other types (string/number/boolean), store the actual value
+    return { ...base, value: item.value };
+  };
+
+  // Format step 1 params - convert panelItems to array format
+  const step1Params: Record<HTTPParamsValue, any[]> = {
+    query: [],
+    body: [],
+    header: [],
+    cookie: [],
+  };
+
+  Object.keys(panelItems).forEach((key) => {
+    const items = panelItems[key as HTTPParamsValue];
+    step1Params[key as HTTPParamsValue] = items
+      .filter(i => i.checked && i.keyName.trim().length > 0)
+      .map(formatParamItem);
+  });
+
+  const finalData = [
+    {
+      step: 1,
+      request: {
+        url: httpURL.value,
+        method: httpMethod.value,
+        params: step1Params,
+      },
+    },
+    {
+      step: 2,
+      oauth: {
+        params: oauthParams.value
+          .filter(item => item.checked && item.keyName.trim().length > 0)
+          .map(formatParamItem),
+      },
+    },
+  ];
+
+  return finalData;
+}
+
+// Handle complete button
+function handleComplete() {
+  const finalJSON = generateFinalJSON();
+  // Emit the data to parent component
+  emit('update:modelValue', finalJSON);
+  handleOpenModal(false);
+}
+</script>
+
+<template>
+  <div>
+    <div @click="handleOpenModal(true)">
+      <slot name="trigger" />
+    </div>
+    <a-modal
+      v-model:open="open"
+      title="第三方登录"
+      :centered="true"
+      :mask-closable="false"
+      :width="1020"
+      @cancel="handleOpenModal(false)"
+    >
+      <div class="of-y-auto! h-500px relative">
+        <!-- Step 1: Configure Request & View Response -->
+        <StepOne
+          v-if="currentStep === 0"
+          v-model:url="httpURL"
+          v-model:method="httpMethod"
+          v-model:params="httpParams"
+          v-model:panel-items="panelItems"
+          :is-fetching="isFetching"
+          :is-finished="isFinished"
+          :status-code="statusCode"
+          :elapsed-time="elapsedTime"
+          :data="data"
+          @send="handleSend"
+        />
+
+        <!-- Step 2: Empty Blank Page -->
+        <StepTwo
+          v-if="currentStep === 1"
+          v-model:oauth-params="oauthParams"
+          :url="partyLoginTargetUrl"
+          :request-data="data"
+        />
+      </div>
+
+      <!-- Custom Footer -->
+      <template #footer>
+        <div class="flex justify-between items-center">
+          <div>
+            <a-button v-if="currentStep > 0" @click="handlePrevStep">
+              上一步
+            </a-button>
+          </div>
+          <div class="flex gap-2">
+            <a-button @click="handleOpenModal(false)">
+              取消
+            </a-button>
+            <a-button
+              v-if="currentStep === 0"
+              type="primary"
+              @click="handleNextStep"
+            >
+              下一步
+            </a-button>
+            <a-button
+              v-if="currentStep === 1"
+              type="primary"
+              @click="handleComplete"
+            >
+              完成
+            </a-button>
+          </div>
+        </div>
+      </template>
+    </a-modal>
+  </div>
+</template>

package/src/features/components/PartyLogin/ParamsItem.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
+import type { ItemType } from './type';
+import RequestFieldSelector from './RequestFieldSelector.vue';
+import SystemFieldSelector from './SystemFieldSelector.vue';
+
+defineOptions({
+  name: 'ParamsItem',
+});
+
+const props = withDefaults(defineProps<{
+  mode?: Mode
+  requestData?: any
+}>(), {
+  mode: 'http',
+});
+
+const emit = defineEmits<{
+  (e: 'remove'): void
+}>();
+
+type Mode = 'http' | 'oauth';
+
+const checked = defineModel<boolean>('checked', {
+  default: true,
+});
+
+// Controlled models from parent
+const keyName = defineModel<string>('keyName', {
+  default: '',
+});
+const itemType = defineModel<ItemType>('type', {
+  default: 'string',
+});
+const paramValue = defineModel<string | number | 'true' | 'false'>('value', {
+  default: '',
+});
+const systemKey = defineModel<string | undefined>('systemKey', {
+  default: undefined,
+});
+const requestKey = defineModel<string | undefined>('requestKey', {
+  default: undefined,
+});
+
+const typeOptions = ref<{
+  label: string
+  value: ItemType
+  type: Mode[]
+  tooltip?: string
+}[]>([
+  {
+    label: 'String',
+    value: 'string',
+    type: ['http', 'oauth'],
+    tooltip: '请求参数设置为字符串类型',
+  },
+  {
+    label: 'Number',
+    value: 'number',
+    type: ['http', 'oauth'],
+    tooltip: '请求参数设置为数字类型',
+  },
+  {
+    label: 'Boolean',
+    value: 'boolean',
+    type: ['http', 'oauth'],
+    tooltip: '请求参数设置为布尔类型',
+  },
+  {
+    label: 'System',
+    value: 'system',
+    type: ['http', 'oauth'],
+    tooltip: '请求参数设置为系统中的字段，这些字段是在 pinia 中的',
+  },
+  {
+    label: 'Request',
+    value: 'request',
+    type: ['oauth'],
+    tooltip: '请求参数设置为上一步的请求结果中的字段',
+  },
+]);
+
+const systemSelectorRef = ref<InstanceType<typeof SystemFieldSelector>>();
+const requestSelectorRef = ref<InstanceType<typeof RequestFieldSelector>>();
+
+function handleChangeType(value: SelectValue, _option: DefaultOptionType) {
+  // Only reset value if type actually changes
+  const previousType = itemType.value;
+
+  switch (value) {
+    case 'string':
+      itemType.value = 'string';
+      if (previousType !== 'string') {
+        paramValue.value = '';
+      }
+      break;
+    case 'number':
+      itemType.value = 'number';
+      if (previousType !== 'number') {
+        paramValue.value = 0;
+      }
+      break;
+    case 'boolean':
+      itemType.value = 'boolean';
+      if (previousType !== 'boolean') {
+        paramValue.value = 'true';
+      }
+      break;
+    case 'system':
+      itemType.value = 'system';
+      if (previousType !== 'system') {
+        nextTick(() => {
+          systemSelectorRef.value?.initSystemSelection();
+          paramValue.value = '';
+        });
+      }
+      break;
+    case 'request':
+      itemType.value = 'request';
+      if (previousType !== 'request') {
+        nextTick(() => {
+          requestSelectorRef.value?.initRequestSelection();
+          paramValue.value = '';
+        });
+      }
+      break;
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-2 items-center">
+    <!-- enable -->
+    <a-checkbox v-model:checked="checked" class="flex-shrink-0" />
+    <!-- key -->
+    <a-input v-model:value="keyName" placeholder="Key" class="w-92 flex-shrink-0" />
+    <!-- value -->
+    <div class="w-92 flex-shrink-0">
+      <template v-if="itemType === 'string'">
+        <a-input v-model:value="paramValue" placeholder="Value" class="w-full" />
+      </template>
+      <template v-else-if="itemType === 'number'">
+        <a-input-number v-model:value="paramValue" placeholder="Value" class="w-full!" />
+      </template>
+      <template v-else-if="itemType === 'boolean'">
+        <a-select v-model:value="paramValue" placeholder="Value" class="w-full!">
+          <a-select-option value="true">
+            true
+          </a-select-option>
+          <a-select-option value="false">
+            false
+          </a-select-option>
+        </a-select>
+      </template>
+      <template v-else-if="itemType === 'system'">
+        <SystemFieldSelector
+          ref="systemSelectorRef"
+          v-model:value="paramValue"
+          v-model:system-key="systemKey"
+          class="w-full!"
+        />
+      </template>
+      <template v-else-if="itemType === 'request'">
+        <RequestFieldSelector
+          ref="requestSelectorRef"
+          v-model:value="paramValue"
+          v-model:request-key="requestKey"
+          :request-data="requestData"
+          class="w-full!"
+        />
+      </template>
+    </div>
+    <!-- type select  -->
+    <a-select
+      v-model:value="itemType"
+      class="w-24 flex-shrink-0"
+      @select="handleChangeType"
+    >
+      <template v-for="option in typeOptions">
+        <a-select-option v-if="option.type.includes(props.mode)" :key="option.value" :value="option.value">
+          <a-tooltip v-if="option.tooltip" :title="option.tooltip">
+            {{ option.label }}
+          </a-tooltip>
+          <template v-else>
+            ?
+            {{ option.label }}
+          </template>
+        </a-select-option>
+      </template>
+    </a-select>
+    <!-- remove -->
+    <a-button class="flex-shrink-0" @click="emit('remove')">
+      <DeleteOutlined />
+    </a-button>
+  </div>
+</template>

package/src/features/components/PartyLogin/ParamsPanel.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { HTTPMethod, HTTPParamsLabel, HTTPParamsValue } from './type';
+import PubinfoIcon from '../PubinfoIcon/index.vue';
+
+defineOptions({
+  name: 'HTTPParamsPanel',
+});
+
+const props = defineProps<{
+  method: HTTPMethod
+}>();
+
+const value = defineModel<HTTPParamsValue>('modelValue', {
+  default: 'query',
+});
+
+const paramsList = ref<{
+  icon: string
+  label: HTTPParamsLabel
+  value: HTTPParamsValue
+  status: HTTPMethod[]
+}[]>([
+  {
+    icon: 'i-ph:question',
+    label: 'Query',
+    value: 'query',
+    status: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
+  },
+  {
+    icon: 'i-ph:file-text',
+    label: 'Body',
+    value: 'body',
+    status: ['POST', 'PUT', 'DELETE', 'PATCH'],
+  },
+  {
+    icon: 'i-ph:file-html',
+    label: 'Header',
+    value: 'header',
+    status: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
+  },
+  {
+    icon: 'i-ph:cookie',
+    label: 'Cookie',
+    value: 'cookie',
+    status: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'],
+  },
+]);
+</script>
+
+<template>
+  <a-radio-group v-model:value="value" button-style="solid">
+    <template v-for="param in paramsList">
+      <a-radio-button v-if="param.status.includes(props.method)" :key="param.value" :value="param.value">
+        <div class="flex items-center justify-center gap-1">
+          <PubinfoIcon :name="param.icon" />
+          {{ param.label }}
+        </div>
+      </a-radio-button>
+    </template>
+  </a-radio-group>
+</template>