yingzios-platform-frontend-devtools 1.0.1

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './base-path';
+export * from './components/StandaloneAppLayout';
+export * from './components/DevUserMenu';
+export * from './manifest-loader';

package/dist/manifest-loader.d.ts

@@ -0,0 +1,50 @@
+import type { FrontendAppManifest, FrontendAppSectionDefinition, FrontendNavIconKey } from 'yz-frontend-core';
+/**
+ * 加载 app-manifest.json 文件
+ * @param url manifest 文件路径，默认 'app-manifest.json'（相对路径，受 <base> 标签影响）
+ */
+export declare function loadAppManifest(url?: string): Promise<FrontendAppManifest>;
+/**
+ * 从 manifest 的 menus 构建 sections（用于导航菜单）
+ *
+ * 自动推导规则：
+ * - path: 默认 `${routeBase}/${key}`（useRelativePaths=true 时为 `/${key}`）
+ * - matchPaths: 默认 `[path]`
+ * - group: 仅在 manifest 中显式声明时保留；未声明由导航层使用 displayName 作为默认组
+ * - order: 默认按数组顺序
+ *
+ * @param manifest 应用 manifest
+ * @param useRelativePaths 是否使用相对路径（Standalone 模式下建议为 true）
+ */
+export declare function buildSectionsFromManifest(manifest: FrontendAppManifest, useRelativePaths?: boolean): FrontendAppSectionDefinition[];
+export interface StandaloneMenuItem {
+    key: string;
+    label: string;
+    path: string;
+    iconKey?: FrontendNavIconKey;
+    matchPaths: string[];
+    end?: boolean;
+    order: number;
+}
+export interface StandaloneMenuGroup {
+    groupLabel: string;
+    items: StandaloneMenuItem[];
+}
+export interface BuildMenuGroupsOptions {
+    /**
+     * 是否使用相对路径（Standalone 本地开发模式下建议为 true）
+     * - true: 菜单路径为 `/${key}`，如 `/profile`
+     * - false: 菜单路径为 `${routeBase}/${key}`，如 `/apps/personal/profile`
+     * @default true
+     */
+    useRelativePaths?: boolean;
+}
+/**
+ * 从 manifest 直接构建菜单组。
+ * 按 group 分组；未声明 group 的菜单统一归入 manifest.displayName 默认组。
+ *
+ * @param manifest 应用 manifest
+ * @param options 构建选项
+ */
+export declare function buildMenuGroupsFromManifest(manifest: FrontendAppManifest, options?: BuildMenuGroupsOptions): StandaloneMenuGroup[];
+//# sourceMappingURL=manifest-loader.d.ts.map

package/dist/manifest-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manifest-loader.d.ts","sourceRoot":"","sources":["../src/manifest-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAE1B;;;GAGG;AACH,wBAAsB,eAAe,CAAC,GAAG,SAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAQ7F;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,mBAAmB,EAC7B,gBAAgB,UAAQ,GACvB,4BAA4B,EAAE,CAuBhC;AAED,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B;AAOD,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,GAAE,sBAA2B,GACnC,mBAAmB,EAAE,CA6CvB"}

package/dist/manifest-loader.js

@@ -0,0 +1,90 @@
+/**
+ * 加载 app-manifest.json 文件
+ * @param url manifest 文件路径，默认 'app-manifest.json'（相对路径，受 <base> 标签影响）
+ */
+export async function loadAppManifest(url = 'app-manifest.json') {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to load manifest: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+}
+/**
+ * 从 manifest 的 menus 构建 sections（用于导航菜单）
+ *
+ * 自动推导规则：
+ * - path: 默认 `${routeBase}/${key}`（useRelativePaths=true 时为 `/${key}`）
+ * - matchPaths: 默认 `[path]`
+ * - group: 仅在 manifest 中显式声明时保留；未声明由导航层使用 displayName 作为默认组
+ * - order: 默认按数组顺序
+ *
+ * @param manifest 应用 manifest
+ * @param useRelativePaths 是否使用相对路径（Standalone 模式下建议为 true）
+ */
+export function buildSectionsFromManifest(manifest, useRelativePaths = false) {
+    const { routeBase, menus } = manifest;
+    if (!menus || menus.length === 0) {
+        return [];
+    }
+    return menus.map((menu, index) => {
+        // useRelativePaths 为 true 时，使用相对路径 /${key}，否则用完整路径 ${routeBase}/${key}
+        const path = menu.path ?? (useRelativePaths ? `/${menu.key}` : `${routeBase}/${menu.key}`);
+        return {
+            key: menu.key,
+            label: menu.label,
+            path,
+            group: menu.group,
+            iconKey: menu.iconKey,
+            description: menu.description,
+            order: menu.order ?? index,
+            end: menu.end,
+            matchPaths: menu.matchPaths ?? [path],
+        };
+    });
+}
+/**
+ * 从 manifest 直接构建菜单组。
+ * 按 group 分组；未声明 group 的菜单统一归入 manifest.displayName 默认组。
+ *
+ * @param manifest 应用 manifest
+ * @param options 构建选项
+ */
+export function buildMenuGroupsFromManifest(manifest, options = {}) {
+    const { useRelativePaths = true } = options;
+    const sections = buildSectionsFromManifest(manifest, useRelativePaths);
+    if (sections.length === 0) {
+        return [];
+    }
+    const defaultGroupName = manifest.displayName;
+    const groupedItems = new Map();
+    sections.forEach((section, index) => {
+        const groupName = section.group || defaultGroupName;
+        const existing = groupedItems.get(groupName) || {
+            items: [],
+            firstIndex: index,
+        };
+        existing.items.push({
+            key: section.key,
+            label: section.label,
+            path: section.path,
+            iconKey: section.iconKey,
+            matchPaths: section.matchPaths ?? [section.path],
+            end: section.end,
+            order: section.order ?? 0,
+        });
+        groupedItems.set(groupName, existing);
+    });
+    return Array.from(groupedItems.entries())
+        .map(([groupLabel, { items, firstIndex }]) => ({
+        firstIndex,
+        groupLabel,
+        items: items.sort((a, b) => {
+            if (a.order !== b.order) {
+                return a.order - b.order;
+            }
+            return a.label.localeCompare(b.label, 'zh-CN');
+        }),
+    }))
+        .sort((a, b) => a.firstIndex - b.firstIndex)
+        .map(({ groupLabel, items }) => ({ groupLabel, items }));
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "yingzios-platform-frontend-devtools",
+  "version": "1.0.1",
+  "description": "YingziOS 前端开发工具库 - 提供微应用本地独立运行所需的组件和工具",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/yingzios-platform-portal.git",
+    "directory": "libs/frontend-devtools"
+  },
+  "keywords": [
+    "react",
+    "micro-frontend",
+    "devtools",
+    "development",
+    "manifest-loader"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "yingzios-platform-frontend-core": "1.0.1"
+  },
+  "peerDependencies": {
+    "antd": "^5.0.0 || ^6.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "antd": "^6.3.5"
+  }
+}

package/src/base-path.ts

@@ -0,0 +1,2 @@
+// 重导出自 frontend-core，保持向后兼容
+export { getBasePath, getApiBasePath, hasSubPath } from 'yz-frontend-core';

package/src/components/DevUserMenu/JwtGeneratorModal.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import { Form, Input, message } from 'antd';
+import { modalStyles } from './styles';
+import { signJwtHS256, getDefaultJwtPayload } from './jwt-utils';
+
+interface JwtGeneratorModalProps {
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+interface FormValues {
+  payloadText: string;
+  secret: string;
+  expiresIn: number;
+}
+
+const STORAGE_KEY = 'devtools:jwtFormData';
+
+function getInitialValues(): FormValues {
+  if (typeof window === 'undefined') {
+    return {
+      payloadText: JSON.stringify(getDefaultJwtPayload(), null, 2),
+      secret: 'this-is-a-secret-key-for-jwt',
+      expiresIn: 86400,
+    };
+  }
+
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      const parsed = JSON.parse(saved) as FormValues;
+      // 验证 payload 是否为有效 JSON
+      JSON.parse(parsed.payloadText);
+      return parsed;
+    }
+  } catch {
+    // 解析失败，使用默认值
+  }
+
+  return {
+    payloadText: JSON.stringify(getDefaultJwtPayload(), null, 2),
+    secret: 'this-is-a-secret-key-for-jwt',
+    expiresIn: 86400,
+  };
+}
+
+/**
+ * JWT 生成器对话框
+ * 
+ * 用于本地开发时手动签发 JWT Token，无需依赖 portal 网关。
+ */
+export function JwtGeneratorModal({ onClose, onSuccess }: JwtGeneratorModalProps) {
+  const [form] = Form.useForm<FormValues>();
+  const [loading, setLoading] = useState(false);
+
+  const handleGenerate = async (values: FormValues) => {
+    const { payloadText, secret, expiresIn } = values;
+
+    setLoading(true);
+
+    try {
+      // 1. 解析 payload
+      const payload = JSON.parse(payloadText);
+
+      // 2. 生成 JWT
+      const token = await signJwtHS256(payload, secret, expiresIn);
+
+      // 3. 保存到 localStorage
+      localStorage.setItem('accessToken', token);
+
+      // 4. 保存用户信息到 localStorage（用于 DevUserMenu 显示）
+      const userInfo = {
+        userId: payload.sub || payload.id,
+        nickname: payload.nickname,
+        avatar: payload.avatar || '',
+        phone: payload.phone,
+      };
+      localStorage.setItem('devtools:userInfo', JSON.stringify(userInfo));
+
+      // 5. 保存表单数据到 localStorage
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(values));
+
+      // 6. 显示成功提示并通知父组件
+      message.success('JWT Token 生成成功！2 秒后自动刷新页面...');
+      onSuccess();
+
+      // 7. 2 秒后自动刷新页面
+      setTimeout(() => {
+        window.location.reload();
+      }, 2000);
+    } catch (err) {
+      console.error('[JwtGeneratorModal] 生成 JWT 失败:', err);
+      message.error(err instanceof Error ? err.message : '生成 JWT 失败，请检查输入');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={modalStyles.overlay as React.CSSProperties} onClick={onClose}>
+      <div
+        style={{ ...modalStyles.modal, width: '750px', maxWidth: '90vw' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={modalStyles.header}>
+          <h3 style={modalStyles.title}>本地签发 JWT Token</h3>
+          <button style={modalStyles.closeButton} onClick={onClose}>
+            ×
+          </button>
+        </div>
+
+        <Form
+          form={form}
+          layout="vertical"
+          initialValues={getInitialValues()}
+          onFinish={handleGenerate}
+          style={modalStyles.form}
+        >
+          {/* Payload 输入框 */}
+          <Form.Item
+            label={
+              <span>
+                Payload <span style={{ color: '#ff4d4f' }}>*</span>
+              </span>
+            }
+            name="payloadText"
+            rules={[
+              { required: true, message: '请输入 Payload' },
+              {
+                validator: async (_, value) => {
+                  if (!value) return;
+                  try {
+                    const payload = JSON.parse(value);
+                    
+                    // 验证必填字段
+                    if (!payload.id && !payload.sub) {
+                      throw new Error('缺少必填字段: id 或 sub（用户ID）');
+                    }
+                    
+                    const requiredFields = ['aud', 'nickname', 'phone'];
+                    for (const field of requiredFields) {
+                      if (!payload[field]) {
+                        throw new Error(`缺少必填字段: ${field}`);
+                      }
+                    }
+                  } catch (err) {
+                    if (err instanceof SyntaxError) {
+                      throw new Error('Payload 格式错误，请输入有效的 JSON');
+                    }
+                    throw err;
+                  }
+                },
+              },
+            ]}
+            extra="JSON 格式，必填字段：id/sub（用户ID）、aud（受众）、nickname（昵称）、phone（手机号）、orgId（组织ID，可选）"
+          >
+            <Input.TextArea
+              rows={8}
+              placeholder='{"id": "1000000001", "sub": "1000000001", "aud": "internal", ...}'
+              style={{
+                fontFamily: 'monospace',
+                fontSize: '13px',
+              }}
+            />
+          </Form.Item>
+
+          {/* JWT 密钥输入框 */}
+          <Form.Item
+            label={
+              <span>
+                JWT 密钥（Secret）<span style={{ color: '#ff4d4f' }}>*</span>
+              </span>
+            }
+            name="secret"
+            rules={[
+              { required: true, message: '请输入 JWT 密钥' },
+              { whitespace: true, message: 'JWT 密钥不能为空' },
+            ]}
+            extra="签名算法：HS256（HMAC SHA256）"
+          >
+            <Input placeholder="your-secret-key" />
+          </Form.Item>
+
+          {/* 有效期输入框 */}
+          <Form.Item
+            label={
+              <span>
+                有效期（秒）<span style={{ color: '#ff4d4f' }}>*</span>
+              </span>
+            }
+            name="expiresIn"
+            rules={[
+              { required: true, message: '请输入有效期' },
+              { type: 'number', min: 1, message: '有效期必须是正整数' },
+            ]}
+            extra="默认 86400 秒（1 天）"
+          >
+            <Input type="number" placeholder="86400" min={1} />
+          </Form.Item>
+
+          <div style={modalStyles.tip}>
+            💡 生成的 Token 将保存到 <code style={modalStyles.tipCode}>localStorage.accessToken</code>
+          </div>
+
+          <button
+            type="submit"
+            style={{
+              ...modalStyles.submitButton,
+              ...(loading ? modalStyles.submitButtonDisabled : {}),
+            }}
+            disabled={loading}
+          >
+            {loading ? '生成中...' : '生成并保存 Token'}
+          </button>
+        </Form>
+      </div>
+    </div>
+  );
+}