@pubinfo-nightly/core 2025.11.14

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

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+interface TreeNode {
+  title: string
+  value: string
+  key: string
+  selectable?: boolean
+  disabled?: boolean
+  children?: TreeNode[]
+}
+
+defineOptions({
+  name: 'RequestFieldSelector',
+});
+
+const props = defineProps<{
+  requestData?: any
+}>();
+
+const value = defineModel<string | number | 'true' | 'false'>('value', {
+  default: '',
+});
+
+const requestKey = defineModel<string | undefined>('requestKey', {
+  default: undefined,
+});
+
+function isPrimitive(val: unknown): val is string | number | boolean | null | undefined {
+  const t = typeof val;
+  return val == null || t === 'string' || t === 'number' || t === 'boolean';
+}
+
+function normalizeParamValue(val: unknown): string | number | 'true' | 'false' {
+  if (typeof val === 'boolean') {
+    return val ? 'true' : 'false';
+  }
+  if (typeof val === 'number') {
+    return val;
+  }
+  if (val == null) {
+    return '';
+  }
+  return String(val);
+}
+
+function stringifyPreview(val: unknown): string {
+  if (typeof val === 'boolean') {
+    return val ? 'true' : 'false';
+  }
+  if (typeof val === 'number') {
+    return String(val);
+  }
+  if (val == null) {
+    return '';
+  }
+  if (typeof val === 'string') {
+    return val;
+  }
+  try {
+    return JSON.stringify(val);
+  }
+  catch {
+    return String(val);
+  }
+}
+
+function buildChildren(obj: any, path: string[] = []): TreeNode[] {
+  const nodes: TreeNode[] = [];
+  Object.keys(obj ?? {}).forEach((k) => {
+    const v = obj[k];
+    const nextPath = [...path, k];
+    const key = nextPath.join('.');
+
+    // 处理数组类型：每个元素作为独立节点，但标题显示元素值而不是索引
+    if (Array.isArray(v)) {
+      const children: TreeNode[] = [];
+      v.forEach((item, index) => {
+        const itemKey = `${key}.${index}`;
+        if (isPrimitive(item)) {
+          // 对于原始类型的数组元素，标题显示实际值
+          children.push({ title: String(item), value: itemKey, key: itemKey });
+        }
+        else {
+          // 对于对象类型的数组元素，标题显示索引，然后递归处理
+          const itemChildren = buildChildren(item, [...nextPath, String(index)]);
+          children.push({ title: `[${index}]`, value: itemKey, key: itemKey, selectable: false, children: itemChildren });
+        }
+      });
+      nodes.push({ title: k, value: key, key, selectable: false, children });
+    }
+    else if (v && typeof v === 'object' && !isPrimitive(v)) {
+      const children = buildChildren(v, nextPath);
+      nodes.push({ title: k, value: key, key, selectable: false, children });
+    }
+    else {
+      // 只显示字段名，不显示值
+      nodes.push({ title: k, value: key, key });
+    }
+  });
+  return nodes;
+}
+
+const treeData = computed<TreeNode[]>(() => {
+  if (!props.requestData) {
+    return [];
+  }
+  return buildChildren(props.requestData);
+});
+
+function resolveValueByKey(key: string): unknown {
+  if (!props.requestData) {
+    return undefined;
+  }
+  let cur: any = props.requestData;
+  for (const seg of key.split('.')) {
+    if (!seg) {
+      continue;
+    }
+    cur = cur?.[seg];
+  }
+  return cur;
+}
+
+const requestSelect = ref<{ value: string, label: string } | undefined>();
+
+function updateParamFromRequestKey(key: string) {
+  const raw = resolveValueByKey(key);
+  const normalized = normalizeParamValue(raw);
+  value.value = normalized;
+  requestKey.value = key;
+  // 在选择器中显示实际数据值
+  requestSelect.value = { value: key, label: stringifyPreview(raw) };
+}
+
+function initRequestSelection() {
+  // 不自动选择,让用户手动选择
+  requestSelect.value = undefined;
+  value.value = '';
+  requestKey.value = undefined;
+}
+
+// Restore selection when component mounts if requestKey exists
+onMounted(() => {
+  if (requestKey.value && props.requestData) {
+    const raw = resolveValueByKey(requestKey.value);
+    requestSelect.value = { value: requestKey.value, label: stringifyPreview(raw) };
+  }
+  // 如果没有请求数据但有 requestKey,确保 value 有值用于显示
+  else if (requestKey.value && !props.requestData) {
+    // requestKey 本身就是字段路径,直接显示即可
+    if (!value.value) {
+      value.value = requestKey.value;
+    }
+  }
+});
+
+function handleRequestChange(v: any) {
+  if (v && v.value) {
+    updateParamFromRequestKey(v.value);
+  }
+  else {
+    requestSelect.value = undefined;
+    value.value = '';
+    requestKey.value = undefined;
+  }
+}
+
+// 如果有请求数据，实时跟随数据的变化更新值
+watchEffect(() => {
+  if (requestSelect.value?.value && props.requestData) {
+    const raw = resolveValueByKey(requestSelect.value.value);
+    value.value = normalizeParamValue(raw);
+    requestSelect.value = { value: requestSelect.value.value, label: stringifyPreview(raw) };
+  }
+});
+
+// 暴露初始化方法给父组件
+defineExpose({
+  initRequestSelection,
+});
+</script>
+
+<template>
+  <div>
+    <!-- 如果有请求数据，显示树形选择器 -->
+    <a-tree-select
+      v-if="requestData"
+      v-model:value="requestSelect"
+      label-in-value
+      :tree-data="treeData"
+      placeholder="Value"
+      allow-clear
+      show-search
+      class="w-full!"
+      @change="handleRequestChange"
+    />
+    <!-- 如果没有请求数据，显示普通输入框 -->
+    <!-- 当回显时(有 requestKey)，显示当前值；否则让用户手动输入 -->
+    <a-input
+      v-else
+      v-model:value="value"
+      :placeholder="requestKey ? '从请求结果获取的值' : 'Value'"
+      class="w-full"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { getActivePinia } from 'pinia';
+
+interface TreeNode {
+  title: string
+  value: string
+  key: string
+  selectable?: boolean
+  disabled?: boolean
+  children?: TreeNode[]
+}
+
+defineOptions({
+  name: 'SystemFieldSelector',
+});
+
+const value = defineModel<string | number | 'true' | 'false'>('value', {
+  default: '',
+});
+
+const systemKey = defineModel<string | undefined>('systemKey', {
+  default: undefined,
+});
+
+function isPrimitive(val: unknown): val is string | number | boolean | null | undefined {
+  const t = typeof val;
+  return val == null || t === 'string' || t === 'number' || t === 'boolean';
+}
+
+function normalizeParamValue(val: unknown): string | number | 'true' | 'false' {
+  if (typeof val === 'boolean') {
+    return val ? 'true' : 'false';
+  }
+  if (typeof val === 'number') {
+    return val;
+  }
+  if (val == null) {
+    return '';
+  }
+  return String(val);
+}
+
+function stringifyPreview(val: unknown): string {
+  if (typeof val === 'boolean') {
+    return val ? 'true' : 'false';
+  }
+  if (typeof val === 'number') {
+    return String(val);
+  }
+  if (val == null) {
+    return '';
+  }
+  if (typeof val === 'string') {
+    return val;
+  }
+  try {
+    return JSON.stringify(val);
+  }
+  catch {
+    return String(val);
+  }
+}
+
+function buildChildren(storeId: string, obj: any, path: string[] = []): TreeNode[] {
+  const nodes: TreeNode[] = [];
+  Object.keys(obj ?? {}).forEach((k) => {
+    const v = obj[k];
+    const nextPath = [...path, k];
+    const key = `${storeId}:${nextPath.join('.')}`;
+
+    // 处理数组类型：每个元素作为独立节点，但标题显示元素值而不是索引
+    if (Array.isArray(v)) {
+      const children: TreeNode[] = [];
+      v.forEach((item, index) => {
+        const itemKey = `${key}.${index}`;
+        if (isPrimitive(item)) {
+          // 对于原始类型的数组元素，标题显示实际值
+          children.push({ title: String(item), value: itemKey, key: itemKey });
+        }
+        else {
+          // 对于对象类型的数组元素，标题显示索引，然后递归处理
+          const itemChildren = buildChildren(storeId, item, [...nextPath, k, String(index)]);
+          children.push({ title: `[${index}]`, value: itemKey, key: itemKey, selectable: false, children: itemChildren });
+        }
+      });
+      nodes.push({ title: k, value: key, key, selectable: false, children });
+    }
+    else if (v && typeof v === 'object' && !isPrimitive(v)) {
+      const children = buildChildren(storeId, v, nextPath);
+      nodes.push({ title: k, value: key, key, selectable: false, children });
+    }
+    else {
+      // 只显示字段名，不显示值
+      nodes.push({ title: k, value: key, key });
+    }
+  });
+  return nodes;
+}
+
+const treeData = computed<TreeNode[]>(() => {
+  const pinia: any = getActivePinia?.();
+  if (!pinia || !pinia._s) {
+    return [];
+  }
+  const items: TreeNode[] = [];
+  (pinia._s as Map<string, any>).forEach((store, id) => {
+    // 只显示 user store 的数据
+    if (id === 'user') {
+      const children = buildChildren(id, store.$state);
+      items.push({ title: id, value: id, key: id, selectable: false, children });
+    }
+  });
+  return items;
+});
+
+function resolveValueByKey(key: string): unknown {
+  const [storeId, ...rest] = key.split(':');
+  const path = rest.join(':');
+  const pinia: any = getActivePinia?.();
+  const store = pinia?._s?.get(storeId);
+  if (!store) {
+    return undefined;
+  }
+  let cur: any = store.$state;
+  if (!path) {
+    return cur;
+  }
+  for (const seg of path.split('.')) {
+    if (!seg) {
+      continue;
+    }
+    cur = cur?.[seg];
+  }
+  return cur;
+}
+
+function findFirstLeaf(nodes: TreeNode[]): TreeNode | undefined {
+  for (const n of nodes) {
+    if (!n.children || n.children.length === 0) {
+      return n;
+    }
+    const child = findFirstLeaf(n.children);
+    if (child) {
+      return child;
+    }
+  }
+  return undefined;
+}
+
+const systemSelect = ref<{ value: string, label: string } | undefined>();
+
+function updateParamFromSystemKey(key: string) {
+  const raw = resolveValueByKey(key);
+  const normalized = normalizeParamValue(raw);
+  value.value = normalized;
+  systemKey.value = key;
+  // 在选择器中显示实际数据值
+  systemSelect.value = { value: key, label: stringifyPreview(raw) };
+}
+
+function initSystemSelection() {
+  // 不自动选择,让用户手动选择
+  systemSelect.value = undefined;
+  value.value = '';
+  systemKey.value = undefined;
+}
+
+// Restore selection when component mounts if systemKey exists
+onMounted(() => {
+  if (systemKey.value) {
+    const raw = resolveValueByKey(systemKey.value);
+    systemSelect.value = { value: systemKey.value, label: stringifyPreview(raw) };
+  }
+});
+
+function handleSystemChange(v: any) {
+  if (v && v.value) {
+    updateParamFromSystemKey(v.value);
+  }
+  else {
+    systemSelect.value = undefined;
+    value.value = '';
+    systemKey.value = undefined;
+  }
+}
+
+watchEffect(() => {
+  if (systemSelect.value?.value) {
+    // 跟随 pinia 状态的变化，实时刷新 paramValue 和选择器显示的值
+    const raw = resolveValueByKey(systemSelect.value.value);
+    value.value = normalizeParamValue(raw);
+    systemSelect.value = { value: systemSelect.value.value, label: stringifyPreview(raw) };
+  }
+});
+
+// 暴露初始化方法给父组件
+defineExpose({
+  initSystemSelection,
+});
+</script>
+
+<template>
+  <a-tree-select
+    v-model:value="systemSelect"
+    label-in-value
+    :tree-data="treeData"
+    placeholder="Value"
+    allow-clear
+    show-search
+    class="w-full!"
+    @change="handleSystemChange"
+  />
+</template>

package/src/features/components/PartyLogin/steps/One.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import type { HTTPMethod, HTTPParamsValue, ParamItem } from '../type';
+import { DeleteOutlined, PlusOutlined, SendOutlined } from '@ant-design/icons-vue';
+import { codeToHtml } from 'shiki';
+import MethodSelect from '../MethodSelect.vue';
+import HttpParamsItem from '../ParamsItem.vue';
+import HttpParamsPanel from '../ParamsPanel.vue';
+
+defineOptions({
+  name: 'PartyLoginStepOne',
+});
+
+const props = defineProps<{
+  isFetching: boolean
+  isFinished: boolean
+  statusCode: number | null | undefined
+  elapsedTime: number | null | undefined
+  data: any
+}>();
+
+const emit = defineEmits<{
+  send: []
+}>();
+
+const httpURL = defineModel<string>('url', {
+  default: '',
+});
+
+const httpMethod = defineModel<HTTPMethod>('method', {
+  default: 'GET',
+});
+
+const httpParams = defineModel<HTTPParamsValue>('params', {
+  default: 'query',
+});
+
+const panelItems = defineModel<Record<HTTPParamsValue, ParamItem[]>>('panelItems', {
+  required: true,
+});
+
+const currentItems = computed(() => panelItems.value[httpParams.value]);
+
+function handleAddItem() {
+  const uid = Date.now(); // Use timestamp for unique ID
+  panelItems.value[httpParams.value].push({
+    id: uid,
+    checked: true,
+    keyName: '',
+    type: 'string',
+    value: '',
+  });
+}
+
+function handleClearAll() {
+  panelItems.value[httpParams.value] = [];
+}
+
+function handleRemoveItem(id: number) {
+  const list = panelItems.value[httpParams.value];
+  const idx = list.findIndex(i => i.id === id);
+  if (idx >= 0) {
+    list.splice(idx, 1);
+  }
+}
+
+function handleSend() {
+  emit('send');
+}
+
+// Response display computed properties
+const statusColor = computed(() => {
+  const code = props.statusCode || 0;
+  if (code >= 200 && code < 300) {
+    return 'success';
+  }
+  if (code >= 300 && code < 400) {
+    return 'processing';
+  }
+  if (code >= 400 && code < 500) {
+    return 'warning';
+  }
+  if (code >= 500) {
+    return 'error';
+  }
+  return 'default';
+});
+
+const elapsedTimeColor = computed(() => {
+  const time = props.elapsedTime || 0;
+  if (time < 80) {
+    return 'success';
+  }
+  if (time < 200) {
+    return 'processing';
+  }
+  if (time < 500) {
+    return 'warning';
+  }
+  return 'error';
+});
+
+const formattedHtml = ref<string>('');
+
+// Watch data changes and update formatted HTML
+watch(() => props.data, async (newData) => {
+  if (newData != null) {
+    try {
+      // Convert data to formatted JSON string
+      const jsonString = typeof newData === 'string'
+        ? newData
+        : JSON.stringify(newData, null, 2);
+
+      formattedHtml.value = await codeToHtml(jsonString, {
+        lang: 'json',
+        themes: {
+          light: 'vitesse-light',
+          dark: 'vitesse-dark',
+        },
+      });
+    }
+    catch (error) {
+      console.error('Failed to format data:', error);
+      // Fallback to plain text display
+      formattedHtml.value = `<pre>${String(newData)}</pre>`;
+    }
+  }
+  else {
+    formattedHtml.value = '';
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <div class="size-full flex flex-col">
+    <!-- toolbar -->
+    <div class="flex flex-col gap-2 flex-none top-0 z-10! p-4">
+      <div class="flex gap-2 items-center">
+        <MethodSelect v-model="httpMethod" />
+        <a-input v-model:value="httpURL" placeholder="请输入调用的第三方的 http/https 请求地址" />
+        <a-button type="primary" :loading="isFetching" :disabled="!httpURL" @click="handleSend">
+          <SendOutlined />
+        </a-button>
+      </div>
+    </div>
+    <!-- params -->
+    <div class="flex flex-wrap justify-between gap-2 items-center w-full text-sm text-center border-b-solid border-b border-b-[var(--g-border-color)] px-4 pb-2">
+      <HttpParamsPanel v-model="httpParams" :method="httpMethod" />
+    </div>
+    <div class="relative border-b-solid border-b border-b-[var(--g-border-color)]">
+      <div class="p-4 flex flex-col gap-4 max-h-xs of-y-auto">
+        <!-- items -->
+        <template v-if="currentItems.length">
+          <div class="flex flex-col gap-2">
+            <HttpParamsItem
+              v-for="item in currentItems"
+              :key="item.id"
+              v-model:checked="item.checked"
+              v-model:key-name="item.keyName"
+              v-model:type="item.type"
+              v-model:value="item.value"
+              v-model:system-key="item.systemKey"
+              @remove="handleRemoveItem(item.id)"
+            />
+          </div>
+        </template>
+        <!-- item action -->
+        <div class="flex gap-4">
+          <a-button @click="handleAddItem">
+            <template #icon>
+              <PlusOutlined />
+            </template>
+            添加
+          </a-button>
+          <div class="flex-auto" />
+          <a-button v-if="currentItems.length" danger @click="handleClearAll">
+            <template #icon>
+              <DeleteOutlined />
+            </template>
+            删除全部
+          </a-button>
+        </div>
+      </div>
+    </div>
+    <!-- content -->
+    <template v-if="isFinished">
+      <div class="border-b-solid border-b border-b-[var(--g-border-color)] flex gap-2 px-4 py-2 items-center">
+        <div>Response</div>
+        <a-tag :bordered="false" :color="statusColor">
+          {{ statusCode }}
+        </a-tag>
+        <div class="flex-auto" />
+        <div class="op-50">
+          Request finished in
+        </div>
+        <a-tag :bordered="false" :color="elapsedTimeColor">
+          {{ `${elapsedTime} ms` }}
+        </a-tag>
+      </div>
+      <pre class="w-full mt-2 rounded text-sm whitespace-pre-wrap break-all of-auto! flex-1 px-4" v-html="formattedHtml" />
+    </template>
+    <template v-else>
+      <div class="h-full border-b-solid border-b border-b-[var(--g-border-color)] flex gap-2 px-4 py-2 items-center justify-center">
+        <a-button :loading="isFetching" :disabled="!httpURL" @click="handleSend">
+          <template #icon>
+            <SendOutlined />
+          </template>
+          发送请求
+        </a-button>
+      </div>
+    </template>
+  </div>
+</template>

package/src/features/components/PartyLogin/steps/Two.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ParamItem } from '../type';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import HttpParamsItem from '../ParamsItem.vue';
+
+defineOptions({
+  name: 'PartyLoginStepTwo',
+});
+
+const props = defineProps<{
+  url?: string
+  requestData?: any
+}>();
+
+const oauthParams = defineModel<ParamItem[]>('oauthParams', {
+  default: () => [],
+});
+
+function handleAddItem() {
+  const uid = Date.now(); // Use timestamp for unique ID
+  oauthParams.value.push({
+    id: uid,
+    checked: true,
+    keyName: '',
+    type: 'string',
+    value: '',
+  });
+}
+
+function handleClearAll() {
+  oauthParams.value = [];
+}
+
+function handleRemoveItem(id: number) {
+  const idx = oauthParams.value.findIndex(i => i.id === id);
+  if (idx >= 0) {
+    oauthParams.value.splice(idx, 1);
+  }
+}
+</script>
+
+<template>
+  <div class="size-full flex flex-col">
+    <div class="flex flex-col gap-2 flex-none top-0 z-10! p-4 border-b-solid border-b border-b-[var(--g-border-color)]">
+      <a-input :value="props.url" placeholder="跳转链接由外部配置提供" readonly />
+    </div>
+    <div class="relative border-b-solid border-b border-b-[var(--g-border-color)]">
+      <div class="p-4 flex flex-col gap-4 h-full of-y-auto">
+        <!-- items -->
+        <template v-if="oauthParams.length">
+          <div class="flex flex-col gap-2">
+            <HttpParamsItem
+              v-for="item in oauthParams"
+              :key="item.id"
+              v-model:checked="item.checked"
+              v-model:key-name="item.keyName"
+              v-model:type="item.type"
+              v-model:value="item.value"
+              v-model:system-key="item.systemKey"
+              v-model:request-key="item.requestKey"
+              mode="oauth"
+              :request-data="props.requestData"
+              @remove="handleRemoveItem(item.id)"
+            />
+          </div>
+        </template>
+        <!-- item action -->
+        <div class="flex gap-4">
+          <a-button @click="handleAddItem">
+            <template #icon>
+              <PlusOutlined />
+            </template>
+            添加
+          </a-button>
+          <div class="flex-auto" />
+          <a-button v-if="oauthParams.length" danger @click="handleClearAll">
+            <template #icon>
+              <DeleteOutlined />
+            </template>
+            删除全部
+          </a-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>