Skip to content

[WIP] Redesign object form and page layout designer#74

Closed
Copilot wants to merge 2 commits intomainfrom
copilot/redesign-object-form-designer
Closed

[WIP] Redesign object form and page layout designer#74
Copilot wants to merge 2 commits intomainfrom
copilot/redesign-object-form-designer

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jan 15, 2026

Specialized Designer Implementation Plan

Goal

Redesign the designer system to include specialized, purpose-built designers for different use cases, improving usability and user experience.

Changes to Implement

  • 1. Create Base Designer Infrastructure

    • Extract common designer logic into shared utilities/hooks
    • Create a base designer context that can be extended
    • Refactor existing Designer to use the new base infrastructure
  • 2. Implement FormDesigner (专用对象表单设计器)

    • Create FormDesigner component with form-specific toolbar
    • Add form-specific component palette (input fields, validation, labels)
    • Add form preview with validation testing
    • Add form submission configuration panel
    • Create specialized property panel for form fields
    • Add form-specific templates (contact form, registration form, etc.)
  • 3. Implement PageLayoutDesigner (页面布局设计器)

    • Create PageLayoutDesigner component with layout-focused toolbar
    • Add layout-specific component palette (sections, headers, footers, grids)
    • Add responsive layout preview (desktop/tablet/mobile)
    • Create layout property panel with spacing/alignment controls
    • Add page templates (landing page, dashboard, etc.)
  • 4. Update Package Structure

    • Export new designers from @object-ui/designer package
    • Update package README with usage examples
    • Add TypeScript type definitions
  • 5. Update Playground/Studio Integration

    • Add designer type selection (General/Form/Layout)
    • Update Studio to use specialized designers based on selection
    • Add examples for each designer type
  • 6. Documentation

    • Add FormDesigner documentation
    • Add PageLayoutDesigner documentation
    • Update migration guide for existing users
  • 7. Testing & Validation

    • Test FormDesigner functionality
    • Test PageLayoutDesigner functionality
    • Verify backward compatibility
    • Run build and linting
Original prompt

目前的设计器不好用,重新思考哪些东西可以设计,比如我需要专用的对象表单设计器,页面布局设计器


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@hotlong
Copy link
Copy Markdown
Collaborator

hotlong commented Jan 15, 2026

@copilot 从main更新最新代码,apps/playground已删除

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
@github-actions
Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

Package Size Gzipped
components (index.js) 1719.04KB 345.21KB
core (index.js) 0.27KB 0.14KB
data-objectql (ObjectQLDataSource.js) 11.43KB 2.76KB
data-objectql (hooks.js) 5.43KB 1.32KB
data-objectql (index.js) 0.42KB 0.26KB
designer (index.js) 1.32KB 0.40KB
plugin-charts (AdvancedChartImpl-CGlEUqvZ.js) 47.44KB 11.16KB
plugin-charts (BarChart-C9og8_1e.js) 525.61KB 132.50KB
plugin-charts (ChartImpl-BO5n60y7.js) 4.87KB 1.95KB
plugin-charts (index-DR7MvR2L.js) 23.55KB 6.93KB
plugin-charts (index.js) 0.21KB 0.16KB
plugin-editor (MonacoImpl-DCiwKyYW.js) 18.97KB 5.77KB
plugin-editor (index-CpP31686.js) 21.90KB 6.66KB
plugin-editor (index.js) 0.19KB 0.15KB
plugin-kanban (KanbanImpl-CI3LQYrL.js) 76.88KB 20.43KB
plugin-kanban (index-DNMbL6y1.js) 23.20KB 6.83KB
plugin-kanban (index.js) 0.18KB 0.15KB
plugin-markdown (MarkdownImpl-DcFjhoD-.js) 256.34KB 64.33KB
plugin-markdown (index-D4WUb7Qy.js) 21.42KB 6.50KB
plugin-markdown (index.js) 0.19KB 0.15KB
react (SchemaRenderer.js) 1.00KB 0.51KB
react (index.js) 0.13KB 0.11KB
react (index.test.js) 0.14KB 0.14KB
types (api.js) 0.24KB 0.19KB
types (base.js) 0.24KB 0.19KB
types (complex.js) 0.17KB 0.16KB
types (crud.js) 0.24KB 0.20KB
types (data-display.js) 0.19KB 0.17KB
types (data.js) 0.23KB 0.18KB
types (disclosure.js) 0.18KB 0.17KB
types (feedback.js) 0.18KB 0.16KB
types (form.js) 0.17KB 0.16KB
types (index.js) 1.46KB 0.74KB
types (layout.js) 0.23KB 0.18KB
types (navigation.js) 0.17KB 0.16KB
types (overlay.js) 0.18KB 0.16KB

Size Limits

  • ✅ Core packages should be < 50KB gzipped
  • ✅ Component packages should be < 100KB gzipped
  • ⚠️ Plugin packages should be < 150KB gzipped

@@ -0,0 +1,258 @@
import React, { useState } from 'react';
import { ComponentRegistry } from '@object-ui/core';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import ComponentRegistry.
Comment on lines +3 to +16
import {
Undo,
Redo,
Download,
Upload,
Play,
Save,
FileJson,
Copy,
Check,
Eye,
EyeOff,
Settings
} from 'lucide-react';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused imports Save, Settings.
@@ -0,0 +1,259 @@
import React, { useState } from 'react';
import { ComponentRegistry } from '@object-ui/core';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import ComponentRegistry.
Comment on lines +3 to +17
import {
Undo,
Redo,
Download,
Upload,
Monitor,
Tablet,
Smartphone,
Save,
Layout,
Copy,
Check,
Ruler,
Palette
} from 'lucide-react';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused imports Palette, Save.
@github-actions
Copy link
Copy Markdown
Contributor

✅ All checks passed!

  • ✅ Type check passed
  • ✅ Tests passed
  • ✅ Lint check completed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

designer documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants