[feat] Add Storybook configuration and settings panel stories

.storybook/preview.ts

@@ -12,6 +12,9 @@ import Tooltip from 'primevue/tooltip'
 import '@/assets/css/style.css'
 import { i18n } from '@/i18n'
 import '@/lib/litegraph/public/css/litegraph.css'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWidgetStore } from '@/stores/widgetStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -28,6 +31,122 @@ setup((app) => {
   const pinia = createPinia()
 
   app.use(pinia)
+
+  // Initialize stores
+  useColorPaletteStore(pinia)
+  useWidgetStore(pinia)
+
+  // Initialize setting store and mock settings for Storybook
+  const settingStore = useSettingStore(pinia)
+
+  // Initialize setting values manually for Storybook (since loadSettingValues might fail)
+  settingStore.$patch({
+    settingValues: {} // Start with empty settings values
+  })
+
+  // Mock common setting definitions for Storybook
+  const mockSettings = [
+    { id: 'Comfy.Locale', name: 'Language', type: 'combo', defaultValue: 'en' },
+    {
+      id: 'Comfy.AutoSave',
+      name: 'Auto Save',
+      type: 'boolean',
+      defaultValue: true
+    },
+    {
+      id: 'Comfy.AutoSaveInterval',
+      name: 'Auto Save Interval',
+      type: 'number',
+      defaultValue: 30
+    },
+    {
+      id: 'Comfy.ColorPalette',
+      name: 'Color Palette',
+      type: 'combo',
+      defaultValue: 'dark'
+    },
+    {
+      id: 'Comfy.AccentColor',
+      name: 'Accent Color',
+      type: 'color',
+      defaultValue: '#007bff'
+    },
+    {
+      id: 'Comfy.NodeOpacity',
+      name: 'Node Opacity',
+      type: 'slider',
+      defaultValue: 80
+    },
+    {
+      id: 'Comfy.MaxConcurrentTasks',
+      name: 'Max Concurrent Tasks',
+      type: 'number',
+      defaultValue: 4
+    },
+    {
+      id: 'Comfy.EnableGPUAcceleration',
+      name: 'GPU Acceleration',
+      type: 'boolean',
+      defaultValue: true
+    },
+    {
+      id: 'Comfy.CacheSize',
+      name: 'Cache Size',
+      type: 'slider',
+      defaultValue: 512
+    },
+    // Mock settings used in stories
+    {
+      id: 'test.setting',
+      name: 'Test Setting',
+      type: 'boolean',
+      defaultValue: false
+    },
+    {
+      id: 'mixed.boolean',
+      name: 'Boolean Setting',
+      type: 'boolean',
+      defaultValue: true
+    },
+    {
+      id: 'mixed.text',
+      name: 'Text Setting',
+      type: 'text',
+      defaultValue: 'Default text'
+    },
+    {
+      id: 'mixed.number',
+      name: 'Number Setting',
+      type: 'number',
+      defaultValue: 42
+    },
+    {
+      id: 'mixed.slider',
+      name: 'Slider Setting',
+      type: 'slider',
+      defaultValue: 75
+    },
+    {
+      id: 'mixed.combo',
+      name: 'Combo Setting',
+      type: 'combo',
+      defaultValue: 'option2'
+    },
+    {
+      id: 'mixed.color',
+      name: 'Color Setting',
+      type: 'color',
+      defaultValue: '#ff6b35'
+    }
+  ]
+
+  // Register mock settings
+  try {
+    mockSettings.forEach((setting) => settingStore.addSetting(setting as any))
+  } catch (error) {
+    console.warn('Failed to add settings, they might already exist:', error)
+  }
+
   app.use(i18n)
   app.use(PrimeVue, {
     theme: {

src/components/dialog/content/setting/AboutPanel.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import AboutPanel from './AboutPanel.vue'
+
+const meta: Meta<typeof AboutPanel> = {
+  title: 'Components/Setting/AboutPanel',
+  component: AboutPanel,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The About panel displays project information, badges, and system statistics.'
+      }
+    }
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="max-width: 600px; min-height: 400px; padding: 16px;"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The default About panel showing project badges and system information.'
+      }
+    }
+  }
+}
+
+export const WithSystemStats: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'About panel with system statistics visible.'
+      }
+    }
+  }
+}
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1'
+    },
+    docs: {
+      description: {
+        story: 'About panel optimized for mobile devices.'
+      }
+    }
+  }
+}

src/components/dialog/content/setting/PanelTemplate.stories.ts

@@ -0,0 +1,197 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import PanelTemplate from './PanelTemplate.vue'
+
+const meta: Meta<typeof PanelTemplate> = {
+  title: 'Components/Setting/PanelTemplate',
+  component: PanelTemplate,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A template component for settings panels that provides consistent layout with header, content, and footer slots.'
+      }
+    }
+  },
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The value identifier for the tab panel'
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes to apply'
+    }
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="width: 600px; height: 400px; border: 1px solid #ddd;"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    value: 'example-panel'
+  },
+  render: (args) => ({
+    components: { PanelTemplate },
+    setup() {
+      return { args }
+    },
+    template: `
+      <PanelTemplate v-bind="args">
+        <div class="p-4">
+          <h3 class="text-lg font-semibold mb-4">Panel Content</h3>
+          <p class="mb-4">This is the main content area of the panel.</p>
+          <div class="space-y-2">
+            <div class="p-2 bg-gray-100 rounded">Setting Item 1</div>
+            <div class="p-2 bg-gray-100 rounded">Setting Item 2</div>
+            <div class="p-2 bg-gray-100 rounded">Setting Item 3</div>
+          </div>
+        </div>
+      </PanelTemplate>
+    `
+  })
+}
+
+export const WithHeader: Story = {
+  args: {
+    value: 'header-panel'
+  },
+  render: (args) => ({
+    components: { PanelTemplate },
+    setup() {
+      return { args }
+    },
+    template: `
+      <PanelTemplate v-bind="args">
+        <template #header>
+          <div class="p-3 bg-blue-50 border border-blue-200 rounded mb-4">
+            <h4 class="text-blue-800 font-medium">Panel Header</h4>
+            <p class="text-blue-600 text-sm">This is a header message for the panel.</p>
+          </div>
+        </template>
+        <div class="p-4">
+          <h3 class="text-lg font-semibold mb-4">Panel Content</h3>
+          <p>Content with a header message above.</p>
+        </div>
+      </PanelTemplate>
+    `
+  })
+}
+
+export const WithFooter: Story = {
+  args: {
+    value: 'footer-panel'
+  },
+  render: (args) => ({
+    components: { PanelTemplate },
+    setup() {
+      return { args }
+    },
+    template: `
+      <PanelTemplate v-bind="args">
+        <div class="p-4">
+          <h3 class="text-lg font-semibold mb-4">Panel Content</h3>
+          <p>Content with a footer below.</p>
+        </div>
+        <template #footer>
+          <div class="p-3 bg-gray-50 border-t">
+            <div class="flex justify-end space-x-2">
+              <button class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
+                Cancel
+              </button>
+              <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+                Save
+              </button>
+            </div>
+          </div>
+        </template>
+      </PanelTemplate>
+    `
+  })
+}
+
+export const WithHeaderAndFooter: Story = {
+  args: {
+    value: 'full-panel'
+  },
+  render: (args) => ({
+    components: { PanelTemplate },
+    setup() {
+      return { args }
+    },
+    template: `
+      <PanelTemplate v-bind="args">
+        <template #header>
+          <div class="p-3 bg-green-50 border border-green-200 rounded mb-4">
+            <h4 class="text-green-800 font-medium">Important Notice</h4>
+            <p class="text-green-600 text-sm">Please review all settings before saving.</p>
+          </div>
+        </template>
+        <div class="p-4">
+          <h3 class="text-lg font-semibold mb-4">Settings Content</h3>
+          <div class="space-y-4">
+            <div>
+              <label class="block text-sm font-medium mb-1">Setting 1</label>
+              <input type="text" class="w-full p-2 border rounded" value="Default value" />
+            </div>
+            <div>
+              <label class="block text-sm font-medium mb-1">Setting 2</label>
+              <select class="w-full p-2 border rounded">
+                <option>Option 1</option>
+                <option>Option 2</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <template #footer>
+          <div class="p-3 bg-gray-50 border-t">
+            <div class="flex justify-between items-center">
+              <span class="text-sm text-gray-600">Changes will be saved automatically</span>
+              <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+                Apply Changes
+              </button>
+            </div>
+          </div>
+        </template>
+      </PanelTemplate>
+    `
+  })
+}
+
+export const LongContent: Story = {
+  args: {
+    value: 'long-panel'
+  },
+  render: (args) => ({
+    components: { PanelTemplate },
+    setup() {
+      return { args }
+    },
+    template: `
+      <PanelTemplate v-bind="args">
+        <div class="p-4">
+          <h3 class="text-lg font-semibold mb-4">Scrollable Content</h3>
+          <div class="space-y-4">
+            ${Array.from(
+              { length: 20 },
+              (_, i) => `
+              <div class="p-3 bg-gray-100 rounded">
+                <h4 class="font-medium">Setting Group ${i + 1}</h4>
+                <p class="text-sm text-gray-600">This is setting group ${i + 1} with some description text.</p>
+              </div>
+            `
+            ).join('')}
+          </div>
+        </div>
+      </PanelTemplate>
+    `
+  })
+}