diff --git a/packages/docs/plugins/injectDemoAndApi.ts b/packages/docs/plugins/injectDemoAndApi.ts
index 54ffd40eb65ed5200795a93ff4b96142940ed3dc..c5e2b1bae33df565c14bc14e0fcd80e2df12c242 100644
--- a/packages/docs/plugins/injectDemoAndApi.ts
+++ b/packages/docs/plugins/injectDemoAndApi.ts
@@ -48,7 +48,7 @@ export function injectDemoAndApi(): Plugin {
               path: demoFile,
               all: 'autoInjectUsage'
             });
-            return `<DemoUsage :docs="autoInjectUsage.docs" :template="autoInjectUsage.template" :schema="autoInjectUsage.schema" :ctx="autoInjectUsage.ctx" />`;
+            return `<DemoUsage :docs="autoInjectUsage.docs" :template="autoInjectUsage.template" :schema="autoInjectUsage.schema" :style="autoInjectUsage.style" :ctx="autoInjectUsage.ctx" />`;
           }
         }
         return match;
diff --git a/packages/docs/scripts/generateApi.ts b/packages/docs/scripts/generateApi.ts
index f2e00ab1cf15d3c20bce4318ab75a9e3f6c36928..8759d400c06268d651bad772f46248dac7e8402b 100644
--- a/packages/docs/scripts/generateApi.ts
+++ b/packages/docs/scripts/generateApi.ts
@@ -147,27 +147,26 @@ glob('*/O*.vue', { cwd: srcDir, posix: true }).then((files) => {
       const apiMdPath = join(fullPath, `../__docs__/${pathMath[1]}-api.${lang}.md`);
       let mdContent = `### ${pathMath[1]}`;
       // props
-      if (meta.props.length) {
+      const selfProps = meta.props.filter((prop) => !prop.global);
+      if (selfProps.length) {
         const tableHeader = {
           'zh-CN': ['属性名', '类型', '默认值', '必填', '说明', '其它'],
           'en-US': ['Prop Name', 'Type', 'Default', 'Required', 'Description', 'Other'],
         };
         const excludeTag = ['default', 'zh-CN', 'en-US'];
-        let propsData = meta.props
-          .filter((prop) => !prop.global)
-          .map((prop) => {
-            return [
-              prop.name,
-              prop.type,
-              prop.default || prop.tags.find((tag) => tag.name === 'default')?.text || '',
-              prop.required ? '🗸' : '',
-              prop.tags.find((tag) => tag.name === lang)?.text || prop.description || '',
-              prop.tags
-                .filter((tag) => !excludeTag.includes(tag.name))
-                .map((tag) => `^[${tag.name}]${tag.text ? `\`${tag.text}\`` : ''}`)
-                .join(' '),
-            ];
-          });
+        let propsData = selfProps.map((prop) => {
+          return [
+            prop.name,
+            prop.type,
+            prop.default || prop.tags.find((tag) => tag.name === 'default')?.text || '',
+            prop.required ? '🗸' : '',
+            prop.tags.find((tag) => tag.name === lang)?.text || prop.description || '',
+            prop.tags
+              .filter((tag) => !excludeTag.includes(tag.name))
+              .map((tag) => `^[${tag.name}]${tag.text ? `\`${tag.text}\`` : ''}`)
+              .join(' '),
+          ];
+        });
         propsData.unshift(tableHeader[lang]);
         propsData = cleanTableData(propsData);
         mdContent = `${mdContent}\n\n#### props\n\n${markdownTable(propsData)}`;
diff --git a/packages/docs/src/assets/style/markdown.scss b/packages/docs/src/assets/style/markdown.scss
index e74021a64db047dcf5854ea7aa057c83182ec58a..58a1309ace12169f3e3e45aa40f71e5f774d7242 100644
--- a/packages/docs/src/assets/style/markdown.scss
+++ b/packages/docs/src/assets/style/markdown.scss
@@ -5,11 +5,11 @@
   background-color: var(--o-color-control1-light);
 }
 
-[data-o-theme$='light'] span {
+[data-o-theme$='light'] pre span {
   color: var(--shiki-light);
 }
 
-[data-o-theme$='dark'] span {
+[data-o-theme$='dark'] pre span {
   color: var(--shiki-dark);
 }
 p + .code-container {
diff --git a/packages/docs/src/components/DemoUsage.vue b/packages/docs/src/components/DemoUsage.vue
index 947c64ada7ed101a6b631100d8553cba6840f394..ae94c22a3ca94c51b2cb6b41c913feeb59de4d5e 100644
--- a/packages/docs/src/components/DemoUsage.vue
+++ b/packages/docs/src/components/DemoUsage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, h, Fragment, ref, watchEffect, shallowRef, type VNode, type Component, shallowReactive } from 'vue';
+import { h, Fragment, reactive, ref, watchEffect, watch, shallowRef, type VNode, type Component, shallowReactive, onBeforeMount, onBeforeUnmount } from 'vue';
 import { OSelect, OOption, OInput, OInputNumber, OCheckbox, OCheckboxGroup, OTextarea, ORadio, ORadioGroup } from '@opensig/opendesign';
 import * as prettier from 'prettier';
 import htmlPlugin from 'prettier/plugins/html';
@@ -11,6 +11,7 @@ import { highlight, md } from '../../plugins/markdown/common';
 import { LINENUMBER_TAG_ATTR, LINENUMBER_CSS_ATTR } from '../../plugins/markdown/lineNumber';
 import CodeContainer from './CodeContainer.vue';
 import { compileComponent } from '@/utils/compileComponent';
+import { compileString } from 'sass';
 export type SchemeT =
   | {
       type: 'boolean';
@@ -54,6 +55,8 @@ const props = defineProps<{
   schema: Record<string, SchemeT>;
   /** vue 模板 */
   template: string | ((_props: Record<string, any>) => string);
+  /** 样式表字符串 */
+  style?: string | ((_props: Record<string, any>) => string);
   /** 传给 template 的上下文，在模板中使用 */
   ctx?: any;
 }>();
@@ -62,36 +65,46 @@ const props = defineProps<{
  * @param schema 表单控件配置数据
  */
 function getInitialValues(schema: Record<string, SchemeT>) {
-  const checkboxGroupDefaultValue: string[] = [];
-  const state: Record<string, any> = {};
+  const _checkboxGroupValue: (string | number)[] = [];
+  const _state: Record<string, any> = {};
   Object.entries(schema).forEach(([key, value]) => {
     switch (value.type) {
       case 'boolean':
-        state[key] = Boolean(value.default);
-        if (state[key]) {
-          checkboxGroupDefaultValue.push(key);
+        _state[key] = Boolean(value.default);
+        if (_state[key]) {
+          _checkboxGroupValue.push(key);
         }
         break;
       case 'radio':
       case 'list':
-        state[key] = value.default ?? value.list[0];
+        _state[key] = value.default ?? value.list[0];
         break;
       case 'textarea':
       case 'string':
-        state[key] = value.default ?? '';
+        _state[key] = value.default ?? '';
         break;
       case 'number':
-        state[key] = value.default ?? 0;
+        _state[key] = value.default ?? 0;
         break;
     }
   });
   return {
-    state,
-    checkboxGroupDefaultValue,
+    state: _state,
+    checkboxGroupValue: _checkboxGroupValue,
   };
 }
 const initialValues = getInitialValues(props.schema);
 const state = reactive(initialValues.state);
+const checkboxGroupValue = ref(initialValues.checkboxGroupValue);
+watch(state, (newVal) => {
+  const newCheckboxGroupValue: Array<string | number> = [];
+  Object.entries(newVal).forEach(([key, value]) => {
+    if (props.schema[key].type === 'boolean' && value === true) {
+      newCheckboxGroupValue.push(key);
+    }
+  });
+  checkboxGroupValue.value = newCheckboxGroupValue;
+});
 
 /**
  * OperatorView 函数式组件，用来渲染表单控件
@@ -151,10 +164,10 @@ function OperatorView({ schema }: { schema: Record<string, SchemeT> }) {
             h('span', { class: 'props-playground-selector-name' }, value.label || key),
             h(OInputNumber, {
               modelValue: state[key],
-              'onUpdate:modelValue': (val) => (state[key] = val),
               min: value.min,
               max: value.max,
               step: value.step,
+              'onUpdate:modelValue': (val) => (state[key] = val),
             }),
           ]),
         );
@@ -179,7 +192,7 @@ function OperatorView({ schema }: { schema: Record<string, SchemeT> }) {
         OCheckboxGroup,
         {
           class: 'checkbox-group',
-          defaultValue: initialValues.checkboxGroupDefaultValue,
+          modelValue: checkboxGroupValue.value,
           onChange: (val) => {
             Object.entries(schema).forEach(([key, value]) => {
               if (value.type === 'boolean') {
@@ -211,11 +224,14 @@ const showcaseComponent = shallowRef<Component>(() => {});
  * 动态编译的组件保存在 showcaseComponent 中，格式化的源码保存在 sourceCode 中，高亮的源码保存在 highlightedCode 中
  * @param demoProps 演示组件的属性
  */
-function createShowcaseComponent(demoProps: Record<string, any>) {
+function createShowcaseComponent(demoProps: Record<string, any>, style: string | ((demoProps: Record<string, any>) => string) = '') {
   const template = typeof props.template === 'function' ? props.template(demoProps) : props.template;
-  const wrapTemplateTag = template.trimStart().startsWith('<template>') ? template : `<template>${template}</template>`;
+  let sfcCode = template.trimStart().startsWith('<template>') ? template : `<template>${template}</template>`;
+  if (style) {
+    sfcCode = `${sfcCode}\n<style lang="scss">${typeof style === 'string' ? style : style(demoProps)}</style>`;
+  }
   prettier
-    .format(wrapTemplateTag, {
+    .format(sfcCode, {
       parser: 'vue',
       plugins: [htmlPlugin, esTreePlugin, babelPlugin, postPlugin, tsPlugin],
       singleQuote: true,
@@ -252,7 +268,7 @@ Demo.DemoSource = () => {
 };
 const docs = shallowReactive<Record<string, string>>({});
 watchEffect(() => {
-  showcaseComponent.value = createShowcaseComponent(state);
+  showcaseComponent.value = createShowcaseComponent(state, props.style);
   if (props.docs) {
     Object.keys(props.docs).forEach((key) => {
       docs[key] = md.render(props.docs![key]);
@@ -265,6 +281,18 @@ watchEffect(() => {
 });
 
 Demo.__docs = docs;
+// 设置样式表
+let styleDom: HTMLStyleElement | null = null;
+onBeforeMount(() => {
+  styleDom = document.createElement('style');
+  watchEffect(() => {
+    styleDom!.innerHTML = compileString(typeof props.style === 'function' ? props.style(state) : props.style || '').css;
+  });
+  document.head.appendChild(styleDom!);
+});
+onBeforeUnmount(() => {
+  styleDom?.remove();
+});
 </script>
 <template>
   <DemoContainer :demo="Demo" class="props-playground" />
@@ -295,7 +323,8 @@ Demo.__docs = docs;
     border-left: none;
   }
 }
-:deep(.checkbox-group), :deep(.radio-group) {
+:deep(.checkbox-group),
+:deep(.radio-group) {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--o3-gap-3);
diff --git a/packages/docs/src/main.ts b/packages/docs/src/main.ts
index 1be80bd97398e75914ac59384f42789696704cfb..d2a82c5608857f23702d4719711994ff46c15e3a 100644
--- a/packages/docs/src/main.ts
+++ b/packages/docs/src/main.ts
@@ -35,4 +35,7 @@ Object.entries(Opendesign).forEach(([name, value]) => {
     app.component(name, value as any);
   }
 });
+// 某些组件有问题，需要手动注册
+app.component('OCarouselItem', Opendesign.OCarouselItem);
+app.component('OToggle', Opendesign.OToggle);
 app.mount('#app');
diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
index eeab8be2e9c63374ca994c15990982dd8ed2de18..888ba4740534cc941494a94661381ba83ec5eda6 100644
--- a/packages/docs/vite.config.ts
+++ b/packages/docs/vite.config.ts
@@ -11,7 +11,6 @@ import generateComponentRouter from './plugins/generateComponentRouter';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: './',
   build: {
     target: ['chrome74'],
     outDir: './dist',
diff --git a/packages/opendesign/src/_demo/types.ts b/packages/opendesign/src/_demo/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..065ab65308bfb63bf7542b0c233293f8cad30e20
--- /dev/null
+++ b/packages/opendesign/src/_demo/types.ts
@@ -0,0 +1,67 @@
+export type DocDemoSchema =
+  | {
+      type: 'boolean';
+      default?: boolean;
+      label?: string;
+    }
+  | {
+      type: 'list';
+      list: Array<string | number>;
+      default?: string | number;
+      label?: string;
+    }
+  | {
+      type: 'string';
+      default?: string;
+      label?: string;
+    }
+  | {
+      type: 'textarea';
+      default?: string;
+      label?: string;
+      row?: number;
+    }
+  | {
+      type: 'number';
+      step?: number;
+      min?: number;
+      max?: number;
+      default?: number;
+      label?: string;
+    }
+  | {
+      type: 'radio';
+      default?: string | number;
+      list: Array<string | number>;
+    };
+
+export type DocDemoState<T> = T extends Record<string, any>
+  ? {
+      [key in keyof T]: T[key] extends {
+        type: 'list';
+        list: Array<infer U>;
+      }
+        ? U
+        : T[key] extends {
+            type: 'radio';
+            list: Array<infer U>;
+          }
+        ? U
+        : T[key] extends {
+            type: 'boolean';
+          }
+        ? boolean
+        : T[key] extends {
+            type: 'number';
+          }
+        ? number
+        : T[key] extends {
+            type: 'string';
+          }
+        ? string
+        : never;
+    }
+  : T;
+
+export type DocDemoTemplate<T> = ((props: DocDemoState<T>) => string) | string;
+export type DocDemoStyle<T> = ((props: DocDemoState<T>) => string) | string;