init

app/src/theme/antd/card.less

@@ -0,0 +1,11 @@
+.ant-card {
+  &-head,
+  &-body {
+    @apply px-4;
+  }
+  &-head {
+    &-title {
+      @apply py-4;
+    }
+  }
+}

app/src/theme/antd/description.less

@@ -0,0 +1,7 @@
+.ant-descriptions {
+  &-item {
+    &-label {
+      @apply text-subtext;
+    }
+  }
+}

app/src/theme/antd/index.less

@@ -0,0 +1,3 @@
+@import './table.less';
+@import './card.less';
+@import './description.less';

app/src/theme/antd/table.less

@@ -0,0 +1,6 @@
+.ant-table {
+  .ant-table-thead > tr > th {
+  }
+  .ant-table-title {
+  }
+}

app/src/theme/index.less

@@ -0,0 +1,7 @@
+@import './style/index.less';
+@import './antd/index.less';
+@root-entry-name: variable;
+
+*::backdrop {
+  @apply bg-layout;
+}

app/src/theme/index.ts

@@ -0,0 +1,109 @@
+import { useThemeStore } from 'stepin/es/theme-provider';
+import { useSettingStore } from '@/store';
+
+import GreenImg from '@/assets/theme/green.png';
+import VscodeImg from '@/assets/theme/vscode.png';
+import PinkImg from '@/assets/theme/pink.png';
+import SideDarkImg from '@/assets/theme/side-dark.png';
+import HeaderDarkImg from '@/assets/theme/header-dark.png';
+import PurpleImg from '@/assets/theme/purple.png';
+import ChinaRedImg from '@/assets/theme/china-red.png';
+import OrangeImg from '@/assets/theme/orange.png';
+import IdeaImg from '@/assets/theme/idea.png';
+import LightImg from '@/assets/theme/light.png';
+
+export function configTheme(key: string) {
+  const { setBgSeriesColors } = useThemeStore();
+  const { setNavigation, setTheme } = useSettingStore();
+  switch (key) {
+    case 'night':
+      setBgSeriesColors({ 'bg-base': '#1D1D1F' });
+      break;
+    case 'header-dark':
+      setNavigation('head');
+      break;
+    default:
+      setNavigation('side');
+  }
+  if (key.indexOf('header') !== -1) {
+    setNavigation('head');
+    setTheme(key.split('-')[1])
+  }
+}
+
+export const themeList: Theme.ThemeConfig[] = [
+  {
+    title: '亮色模式',
+    key: 'light',
+    imgUrl: LightImg,
+    config: { color: { middle: { 'bg-base': '#fff' } } },
+  },
+  {
+    title: '侧边暗色菜单',
+    key: 'side-dark',
+    imgUrl: SideDarkImg,
+    config: { color: { middle: { 'bg-base': '#fff', 'bg-side': '#001129' } }, size: { 'width-side': '220px' } },
+  },
+  {
+    title: '顶部暗色菜单',
+    key: 'header-dark',
+    imgUrl: HeaderDarkImg,
+    config: { color: { middle: { 'bg-base': '#fff', 'bg-header': '#001129' } } },
+  },
+  {
+    title: 'VSCode风',
+    key: 'vscode',
+    imgUrl: VscodeImg,
+    config: {
+      color: { middle: { 'bg-base': '#23272E' } },
+    },
+  },
+  {
+    title: 'IDEA风',
+    key: 'idea',
+    imgUrl: IdeaImg,
+    config: {
+      color: { middle: { 'bg-base': '#2B2B2B' } },
+    },
+  },
+  {
+    title: '墨绿风',
+    key: 'green',
+    imgUrl: GreenImg,
+    config: {
+      color: { middle: { 'bg-base': '#013a54' } },
+    },
+  },
+  {
+    title: '芭比粉',
+    key: 'pink',
+    imgUrl: PinkImg,
+    config: {
+      color: { middle: { 'bg-base': '#B6266D' } },
+    },
+  },
+  {
+    title: '暗夜紫',
+    key: 'purple',
+    imgUrl: PurpleImg,
+    config: {
+      color: { middle: { 'bg-base': '#361F68' } },
+    },
+  },
+  {
+    title: '中国红',
+    key: 'china',
+    imgUrl: ChinaRedImg,
+    config: {
+      color: { middle: { 'bg-base': 'rgb(230, 0, 0)' } },
+    },
+  },
+  {
+    title: '活力橙',
+    key: 'orange',
+    imgUrl: OrangeImg,
+    config: {
+      color: { middle: { 'bg-base': '#B1740D' } },
+    },
+  },
+];

app/src/theme/style/component.less

@@ -0,0 +1,5 @@
+@layer components {
+  .card {
+    @apply bg-container rounded-lg p-lg inline-block;
+  }
+}

app/src/theme/style/index.less

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import './layout.less';
+@import './component.less';
+@import './nprogress.less';
+
+.row {
+  &.gap-4 {
+    .col-1\/2 {
+      width: calc(50% - theme('padding.4'));
+    }
+  }
+}

app/src/theme/style/layout.less

@@ -0,0 +1,32 @@
+#stepin-app {
+  .stepin-view {
+    .stepin-layout-content .stepin-view-main {
+      // transition: all 0.25s ease-in;
+      // .stepin-tabs-view-content {
+      //   @apply pr-0 mr-0;
+      // }
+      // .stepin-tabs-view-content-main {
+      //   transition: all 0.25s ease-in;
+      // }
+    }
+    &.unbounded {
+      // .stepin-tabs-view .ant-tabs-top .ant-tabs-nav {
+      //   @apply bg-container px-xs;
+      //   .ant-tabs-tab {
+      //     @apply rounded-md;
+      //     outline: 1px solid theme('colors.gray.400');
+      //     outline-offset: -1px;
+      //     &-active {
+      //       outline: 1px solid theme('colors.primary.500');
+      //     }
+      //   }
+
+      // }
+      .stepin-layout-content .stepin-view-main {
+        .stepin-tabs-view-content-main {
+          @apply bg-transparent p-0;
+        }
+      }
+    }
+  }
+}

app/src/theme/style/nprogress.less

@@ -0,0 +1,3 @@
+#nprogress .bar {
+  @apply bg-primary-500;
+}