plain-design 1.0.0-beta.3 → 1.0.0-beta.30

package/src/pages/index/home/AppHead.tsx

@@ -1,104 +1,17 @@
-import {designPage, reactive} from "plain-design-composition";
+import {designPage} from "plain-design-composition";
 import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
-import {Select, SelectOption} from "../../../packages";
-import {PageThemeUtils, ThemePrimaryColors} from "../PageThemeUtils";
-import ClientZoom from "../../../packages/components/ClientZoom";
+import logoImage from './plain-design.png';
+import {ThemeEditor} from "../../../packages/components/ThemeEditor";
 
 export const AppHead = designPage(() => {
-
-  const state = reactive({
-    size: PageThemeUtils.state.size || 'normal',
-    dark: PageThemeUtils.state.dark ? 'dark' : 'light',
-    shape: PageThemeUtils.state.shape || 'square',
-    zoom: PageThemeUtils.state.zoom || null,
-    primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
-    inputMode: PageThemeUtils.state.inputMode || 'flat',
-  });
-
-  const onSizeChange = () => {
-    PageThemeUtils.size(state.size);
-  };
-
-  const onShapeChange = () => {
-    PageThemeUtils.shape(state.shape);
-  };
-
-  const onZoomChange = () => {
-    PageThemeUtils.zoom(state.zoom);
-    ClientZoom.set(state.zoom);
-  };
-
-  const onDarkChange = () => {
-    const val = !state.dark ? false : state.dark === 'dark';
-    PageThemeUtils.toggle(val);
-  };
-
-  const onPrimaryChange = () => {
-    PageThemeUtils.primary(state.primaryKey);
-  };
-
-  const onInputModeChange = () => {
-    PageThemeUtils.inputMode(state.inputMode);
-  };
-
-  const publicPopperAttrs = { trigger: 'hover' };
-
   return () => (
     <div className="app-head">
       <div className="app-head-logo">
-        <PlainLogo style={{ fontSize: '1.8em', marginRight: '0.4em' }}/>
-        <span>Plain Design</span>
+        <PlainLogo style={{ fontSize: '28px', marginRight: '0.4em' }}/>
+        <img src={logoImage}/>
       </div>
       <div className="app-head-operation">
-        <Select v-model={state.inputMode} onChange={onInputModeChange} size="mini" width="100" placeholder="输入框" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="输入框:填充" val="flat"/>
-          <SelectOption label="输入框:描边" val="stroke"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.primaryKey} onChange={onPrimaryChange} size="mini" width="90" placeholder="主题色" popperAttrs={publicPopperAttrs}>
-          {Object.entries(ThemePrimaryColors).map(([key, value]) => (
-            <SelectOption label={value!.label} val={key} key={key}>
-              {!!value!.primary && <span style={{ height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', background: value!.primary }}/>}
-              <span>{value!.label}</span>
-            </SelectOption>
-          ))}
-        </Select>
-        &nbsp;
-        <Select v-model={state.size} onChange={onSizeChange} size="mini" width="90" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="大尺寸" val="large"/>
-          <SelectOption label="中等尺寸" val="normal"/>
-          <SelectOption label="小尺寸" val="small"/>
-          <SelectOption label="极小尺寸" val="mini"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.dark} onChange={onDarkChange} size="mini" width="90" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="黑色主题" val="dark"/>
-          <SelectOption label="白色主题" val="light"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.shape} onChange={onShapeChange} size="mini" width="90" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="圆角" val="round"/>
-          <SelectOption label="小圆角" val="square"/>
-          <SelectOption label="无圆角" val="none"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.zoom} onChange={onZoomChange} size="mini" width="90" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="0.6" val={0.6}/>
-          <SelectOption label="0.7" val={0.7}/>
-          <SelectOption label="0.8" val={0.8}/>
-          <SelectOption label="0.9" val={0.9}/>
-          <SelectOption label="1.0" val={null}/>
-          <SelectOption label="1.1" val={1.1}/>
-          <SelectOption label="1.2" val={1.2}/>
-          <SelectOption label="1.3" val={1.3}/>
-          <SelectOption label="1.4" val={1.4}/>
-          <SelectOption label="1.5" val={1.5}/>
-          <SelectOption label="1.6" val={1.6}/>
-          <SelectOption label="1.7" val={1.7}/>
-          <SelectOption label="1.8" val={1.8}/>
-          <SelectOption label="1.9" val={1.9}/>
-          <SelectOption label="2.0" val={2.0}/>
-        </Select>
+        <ThemeEditor/>
       </div>
     </div>
   );

package/src/pages/index/home/menus.tsx

@@ -117,6 +117,7 @@ export const MenuGroups: MenuGroup[] = [
       { name: 'Card', title: '卡片', page: '/normal/DemoCard', complete: true },
       { name: 'Carousel', title: '轮播', page: '/normal/DemoCarousel', complete: true },
       { name: 'Collapse', title: '折叠面板', page: '/normal/DemoCollapse', complete: true },
+      { name: 'Layout', title: '布局', page: '/normal/DemoLayout', complete: true },
       { name: 'Alert', title: '提示信息', page: '/normal/DemoAlert', complete: true },
       { name: 'KeepAlive', title: '保活', page: '/normal/DemoKeepAlive', complete: true },
       // {name: 'Triangle', title: '三角形元素', page: '/normal/triangle', complete: false},

package/src/pages/index/main.tsx

@@ -6,8 +6,6 @@ import {installAllIcon} from "../../packages/utils/installAllIcons";
 import {designPage, provide, setComponentPrefix} from "plain-design-composition";
 import {App} from "./App";
 import '../module';
-import {ClientZoom} from "../../packages";
-import {PageThemeUtils} from "./PageThemeUtils";
 
 setComponentPrefix(globalComponentPrefix);
 
@@ -17,8 +15,6 @@ installIconfontSymbol();
 installAllIcon();
 // installAllLazyIcons();
 
-PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
-
 const Main = designPage(() => {
   provide('customAppMessage', '全局上下文名称');
   return () => <App/>;