plain-design 1.0.0-beta.24 → 1.0.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.24",
+  "version": "1.0.0-beta.25",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/PageThemeUtils/index.tsx

@@ -24,26 +24,62 @@ export const PageThemeUtils = (() => {
 
   const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
     const config: DeepPartial<iApplicationConfiguration> = {};
-    if (!config.theme) {
-      config.theme = {};
+    if (!config.theme) {config.theme = {};}
+    if (!config.theme.base) {config.theme.base = {};}
+    if (!config.theme.vars) {config.theme.vars = {};}
+
+    let { dark, primaryKey, size, shape, inputMode, zoom } = state;
+
+    config.theme.dark = !!dark;
+
+    if (!!primaryKey) {
+      if (dark && primaryKey === 'dark') {
+        primaryKey = 'white';
+      } else if (!dark && primaryKey === 'light') {
+        primaryKey = 'dark';
+      }
     }
-    if (!config.theme.base) {
-      config.theme.base = {};
+
+    config.theme.base.primary = !primaryKey ? undefined : ThemePrimaryColors[primaryKey]?.primary;
+
+    if (primaryKey === 'dark') {
+      Object.assign(config.theme.vars!, {
+        'primary-light-1': '#f2f3f5',
+        'primary-1': '#f2f3f5',
+        'primary-light-2': '#e1e2e7',
+        'primary-2': '#e1e2e7',
+        'primary-light-3': '#c9cdd4',
+        'primary-3': '#c9cdd4',
+        'primary-light-4': '#a9aeb8',
+        'primary-4': '#a9aeb8',
+        'primary-light-5': '#86909c',
+        'primary-5': '#86909c',
+        'primary-light-6': '#0c0e10',
+        'primary-6': '#0b0b0b',
+        'primary-light-7': '#464f5e',
+        'primary-7': '#464f5e',
+        'primary-light-8': '#272e3b',
+        'primary-8': '#272e3b',
+        'primary-light-9': '#1d2129',
+        'primary-9': '#111318',
+        'primary-light-10': '#0c0e10',
+        'primary-10': '#0b0b0b',
+      });
     }
-    config.theme.dark = !!state.dark;
-    config.theme.base.primary = !state.primaryKey ? undefined : ThemePrimaryColors[state.primaryKey]?.primary;
+
+
     if (!config.default) {
       config.default = {};
     }
-    if (!!state.size) {
-      config.default.size = state.size;
+    if (!!size) {
+      config.default.size = size;
     }
-    if (!!state.shape) {
-      config.default.shape = state.shape;
+    if (!!shape) {
+      config.default.shape = shape;
       if (!config.theme.vars) {
         config.theme.vars = {};
       }
-      if (state.shape === 'square') {
+      if (shape === 'square') {
         Object.assign(config.theme.vars, {
           'box-size-mini-border-radius': '2px',
           'box-size-small-border-radius': '2px',
@@ -51,7 +87,7 @@ export const PageThemeUtils = (() => {
           'box-size-large-border-radius': '4px',
         });
       }
-      if (state.shape === 'none') {
+      if (shape === 'none') {
         Object.assign(config.theme.vars, {
           'box-size-mini-border-radius': '0',
           'box-size-small-border-radius': '0',
@@ -60,8 +96,8 @@ export const PageThemeUtils = (() => {
         });
       }
     }
-    if (!!state.inputMode) {
-      config.default.inputMode = state.inputMode;
+    if (!!inputMode) {
+      config.default.inputMode = inputMode;
     }
     return config;
   });
@@ -122,6 +158,8 @@ export const ThemePrimaryColors: Record<string, { label: string, primary: string
   geek: { label: '极客蓝', primary: '#2f54eb', },
   purple: { label: '酱紫', primary: '#722ed1', },
   magenta: { label: '洋红', primary: '#eb2f96', },
+  light: { label: '极昼', primary: '#9fa4af', },
+  dark: { label: '黑夜', primary: '#000000', },
 };
 
 export default PageThemeUtils;

package/src/packages/components/Table/table/table.scss

@@ -100,6 +100,7 @@
     &.plt-cell-link {
       color: plv(primary-6);
       cursor: pointer;
+      text-decoration: underline;
 
       &:hover {
         text-decoration: underline;

package/src/packages/components/ThemeEditor/index.tsx

@@ -53,6 +53,13 @@ export const ThemeEditor = designComponent({
       onDarkChange: () => {
         const val = !state.dark ? false : state.dark === 'dark';
         PageThemeUtils.toggle(val);
+        if (val && state.primaryKey === 'dark') {
+          state.primaryKey = 'light';
+          handler.onPrimaryChange();
+        } else if (!val && state.primaryKey === 'light') {
+          state.primaryKey = 'dark';
+          handler.onPrimaryChange();
+        }
       },
       onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
       onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
@@ -68,9 +75,12 @@ export const ThemeEditor = designComponent({
       })
     );
 
+    const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
+
     return () => (
       <div className={classes.value} style={styles.value} ref={onRef.el}>
         <div className="theme-editor-inner" onClick={handler.handleClickInner}>
+          <div className="theme-editor-inner-cover"/>
           <Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
         </div>
         {state.isExpand && (
@@ -91,8 +101,10 @@ export const ThemeEditor = designComponent({
                 <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" 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>
+                      <div className={getComponentCls('theme-editor-block-item')}>
+                        {!!value!.primary && <span style={{ ...publicBlockStyles, background: value!.primary }}/>}
+                        <span>{value!.label}</span>
+                      </div>
                     </SelectOption>
                   ))}
                 </Select>

package/src/packages/components/ThemeEditor/theme-editor.scss

@@ -35,6 +35,12 @@
     justify-content: center;
     font-size: 24px;
     transition: all ease 300ms;
+
+    .theme-editor-inner-cover {
+      position: absolute;
+      inset: 0;
+      user-select: none;
+    }
   }
 
   &.is-expand {
@@ -92,3 +98,8 @@
     }
   }
 }
+
+@include comp(theme-editor-block-item){
+  display: flex;
+  align-items: center;
+}