diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 09f53d01beb93ef47f86aee7fb9b4aefcee7de4b..67d374731d2773226bf6e853e43a59e88825c7ee 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
@@ -18,6 +18,7 @@
   "scripts": {
     "gen:token": "opensig-scripts gen:token --config ./src/tokens/token.config.ts",
     "gen:icon": "opensig-scripts gen:icon --config ./src/icons/icon.config.ts",
+    "clean:svg": "opensig-scripts clean:svg --config ./src/icons/cleansvg.config.ts",
     "build:component": "opensig-scripts build:component",
     "build:style": "opensig-scripts build:style",
     "build": "pnpm gen:icon && pnpm build:component && pnpm build:style"
diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/components/_shared/dom.ts
index 8563d9f0c79eda4de788e9924fe931b30ea17cf8..ead36de1bc3bacdec791eb6a6664699122eb8731 100644
--- a/packages/opendesign/src/components/_shared/dom.ts
+++ b/packages/opendesign/src/components/_shared/dom.ts
@@ -3,8 +3,8 @@ import { isArray } from './is';
 export type DirectionT = 'left' | 'right' | 'top' | 'bottom';
 
 export function isElement(el: any) {
-  return (typeof HTMLElement === 'object')
-    ? (el instanceof HTMLElement)
+  return typeof HTMLElement === 'object'
+    ? el instanceof HTMLElement
     : !!(el && typeof el === 'object' && (el.nodeType === 1 || el.nodeType === 9) && typeof el.nodeName === 'string');
 }
 
@@ -27,7 +27,7 @@ export function getScroll(el: HTMLElement | Window = window) {
   if (!el) {
     return {
       scrollLeft: 0,
-      scrollTop: 0
+      scrollTop: 0,
     };
   }
   const isroot = isDocumentElement(el);
@@ -63,7 +63,7 @@ export function getRelativeBounding(e: DOMRect, c: DOMRect) {
     offsetBottom: e.bottom - c.top,
   };
 }
-export type RelativeRect = ReturnType<typeof getRelativeBounding>
+export type RelativeRect = ReturnType<typeof getRelativeBounding>;
 
 export function getElementSize(el: HTMLElement | Window) {
   return {
@@ -84,13 +84,18 @@ export function getElementBorder(el: HTMLElement, dir?: DirectionT | DirectionT[
     d = isArray(dir) ? dir : ['left', 'right', 'bottom', 'top'];
   }
   const rlt: {
-    left?: number,
-    right?: number,
-    top?: number,
-    bottom?: number,
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
   } = {};
-  d.forEach(k => {
+  d.forEach((k) => {
     rlt[k] = parseFloat(style.getPropertyValue(`border-${k}-width`));
   });
   return rlt;
 }
+
+export function getCssVariable(key: string, el?: HTMLElement) {
+  const ele = el ? el : document.documentElement;
+  return ele.style.getPropertyValue(key);
+}
diff --git a/packages/opendesign/src/components/cascader/OCascader.vue b/packages/opendesign/src/components/cascader/OCascader.vue
index 40977a66d71b91ac2ad9be533fd25419afa6b4d2..314de65906b12aa000f9432956d4dc96684b7398 100644
--- a/packages/opendesign/src/components/cascader/OCascader.vue
+++ b/packages/opendesign/src/components/cascader/OCascader.vue
@@ -7,15 +7,16 @@ import { OSelect } from '../select';
 import { cascaderProps } from './types';
 import type { CascaderValueT, CascaderNodePathT } from './types';
 import CascaderTree from './cascader';
+import type { ColumnInfoT } from './cascader';
 import { isArray, isUndefined } from '../_shared/is';
 
-interface ColumnInfoT {
-  value: string | number;
-  label?: string;
-  depth: number;
-  isLeaf: boolean;
-  isActive: boolean;
-}
+// interface ColumnInfoT {
+//   value: string | number;
+//   label?: string;
+//   depth: number;
+//   isLeaf: boolean;
+//   isActive: boolean;
+// }
 
 const props = defineProps(cascaderProps);
 
diff --git a/packages/opendesign/src/components/cascader/cascader.ts b/packages/opendesign/src/components/cascader/cascader.ts
index ae9a58c7934551ab3545f96ac068ea1d6b6bcaad..1d318e3250223cfb05bec9028bff839c40d9ac08 100644
--- a/packages/opendesign/src/components/cascader/cascader.ts
+++ b/packages/opendesign/src/components/cascader/cascader.ts
@@ -11,7 +11,7 @@ interface CascaderNodeT {
   isLeaf: boolean;
 }
 
-interface ColumnInfoT {
+export interface ColumnInfoT {
   value: string | number;
   label?: string;
   depth: number;
diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
index 3a127b6a843793f4eec672fbd81af3c2fe277d42..baeededf26c45b6da5a69b18f8a6da3a97d4a547 100644
--- a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
+++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
@@ -5,10 +5,10 @@ const img = 'https://www.hiascend.com/p/resource/202303/0a66367d573f4369a6d16090
 <template>
   <h4>基本</h4>
   <section>
-    <OFigure class="img" :src="img" />
-    <OFigure class="img" :src="img" :ratio="16 / 9" fit="contain" />
-    <OFigure class="img" src="123" :ratio="16 / 9" fit="cover" />
-    <OFigure class="img" :src="img" :ratio="16 / 9" fit="cover" background />
+    <OFigure class="img" :src="img" colorfull />
+    <OFigure class="img" :src="img" :ratio="16 / 9" fit="contain" colorfull />
+    <OFigure class="img" src="123" :ratio="16 / 9" fit="cover" colorfull />
+    <OFigure class="img" :src="img" :ratio="16 / 9" fit="cover" background colorfull />
     <OFigure class="img" hoverable :src="img" />
     <OFigure class="img" href="https://hiascend.com" target="__blank" :src="img" />
   </section>
@@ -21,5 +21,6 @@ const img = 'https://www.hiascend.com/p/resource/202303/0a66367d573f4369a6d16090
 }
 .img {
   width: 25%;
+  border: 1px solid #ddd;
 }
 </style>
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index 956933f29b8b8291126952cba1bc8c0491a3ac7f..5a11e4e8914db3e4d9be590e9821a9a03576c36b 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -1,8 +1,7 @@
 @use './var.scss';
 
 .o-figure {
-  display: inline-block;
-  vertical-align: top;
+  display: inline-flex;
   overflow: hidden;
   transition: background-color var(--o-duration-m2);
   &.is-loading {
diff --git a/packages/opendesign/src/components/grid/OCol.vue b/packages/opendesign/src/components/grid/OCol.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3b781a7973b4dc50b5d585376d7cdb337f1031a
--- /dev/null
+++ b/packages/opendesign/src/components/grid/OCol.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { colProps } from './types';
+import { computed, StyleValue } from 'vue';
+
+const props = defineProps(colProps);
+interface Vars {
+  '--col-flex'?: string;
+  '--col-grow'?: string | number;
+  '--col-shrink'?: string | number;
+  '--col-align'?: string;
+  '--col-basis'?: string;
+  '--col-basis-xs'?: string;
+  '--col-basis-s'?: string;
+  '--col-basis-m'?: string;
+  '--col-basis-l'?: string;
+  '--col-basis-xl'?: string;
+  '--col-basis-xxl'?: string;
+}
+const style = computed(() => {
+  const s: Vars = {};
+  if (props.flex) {
+    s['--col-flex'] = props.flex;
+  }
+  if (props.width) {
+    s['--col-basis'] = props.width;
+  }
+
+  if (props.grow) {
+    s['--col-grow'] = props.grow;
+  }
+  if (props.shrink) {
+    s['--col-shrink'] = props.shrink;
+  }
+  if (props.align) {
+    s['--col-align'] = props.align;
+  }
+
+  if (props.xs) {
+    s['--col-basis-xs'] = props.xs.width;
+  }
+  if (props.s) {
+    s['--col-basis-s'] = props.s.width;
+  }
+  if (props.m) {
+    s['--col-basis-m'] = props.m.width;
+  }
+  if (props.l) {
+    s['--col-basis-l'] = props.l.width;
+  }
+  if (props.xl) {
+    s['--col-basis-xl'] = props.xl.width;
+  }
+  if (props.xxl) {
+    s['--col-basis-xxl'] = props.xxl.width;
+  }
+  return s as StyleValue;
+});
+</script>
+<template>
+  <div
+    class="o-col"
+    :style="style"
+    :class="{
+      'o-col-xs': !!props.xs,
+      'o-col-s': !!props.s,
+      'o-col-m': !!props.m,
+      'o-col-l': !!props.l,
+      'o-col-xl': !!props.xl,
+      'o-col-xxl': !!props.xxl,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/grid/ORow.vue b/packages/opendesign/src/components/grid/ORow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e53bb5b0cd3ddefc97f9d59eac747892f58aacd
--- /dev/null
+++ b/packages/opendesign/src/components/grid/ORow.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { rowProps } from './types';
+import { computed, StyleValue } from 'vue';
+
+const props = defineProps(rowProps);
+
+interface Vars {
+  '--row-justify'?: string;
+  '--row-wrap'?: string;
+  '--row-direction'?: string;
+  '--row-align'?: string;
+  '--row-gap-x'?: string;
+  '--col-gap-x'?: string;
+  '--row-gap-y'?: string;
+  '--col-gap-y'?: string;
+}
+const style = computed(() => {
+  const s: Vars = {};
+  if (props.justify) {
+    s['--row-justify'] = props.justify;
+  }
+  if (props.direction) {
+    s['--row-direction'] = props.direction;
+  }
+  if (props.wrap) {
+    s['--row-wrap'] = props.wrap;
+  }
+  if (props.align) {
+    s['--row-align'] = props.align;
+  }
+  if (props.gapX) {
+    s['--col-gap-x'] = `calc(${props.gapX} / 2)`;
+    s['--row-gap-x'] = `calc(-1 * ${props.gapX} / 2)`;
+  }
+  if (props.gapY) {
+    s['--col-gap-y'] = props.gapY;
+    s['--row-gap-y'] = `calc(-1 * ${props.gapY})`;
+  }
+  console.log(s);
+
+  return s as StyleValue;
+});
+</script>
+<template>
+  <div class="o-row" :style="style">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/grid/__demo__/GridBasic.vue b/packages/opendesign/src/components/grid/__demo__/GridBasic.vue
new file mode 100644
index 0000000000000000000000000000000000000000..110c0a0fb579db54762561b935c57648796c6f16
--- /dev/null
+++ b/packages/opendesign/src/components/grid/__demo__/GridBasic.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ORow, OCol } from '../index';
+</script>
+<template>
+  <h4>Basic 1</h4>
+  <div class="block">
+    <ORow justify="space-between">
+      <OCol class="colored"><div class="box">box</div></OCol>
+      <OCol width="50%" :shrink="0" class="colored"><div class="box">box</div></OCol>
+      <OCol class="colored"><div class="box">box</div></OCol>
+    </ORow>
+    <br />
+    <ORow justify="space-between" gap-x="16px">
+      <OCol width="25%" class="colored">
+        <div class="box">box</div>
+      </OCol>
+      <OCol width="50%" :shrink="0" class="colored">
+        <div class="box">box</div>
+      </OCol>
+      <OCol width="25%" class="colored">
+        <div class="box">box</div>
+      </OCol>
+    </ORow>
+
+    <br />
+    <ORow gap-x="16px" gap-y="16px" wrap="wrap">
+      <OCol
+        v-for="item in 10"
+        :key="item"
+        width="100%"
+        :l="{ width: '20%' }"
+        :m="{ width: '25%' }"
+        :s="{ width: '33.333333%' }"
+        :xs="{ width: '50%' }"
+        class="colored"
+      >
+        <div class="box">{{ item }}</div>
+      </OCol>
+    </ORow>
+  </div>
+</template>
+<style lang="scss">
+.colored {
+  &:nth-child(4n) {
+    .box {
+      background-color: rgba(29, 29, 170, 0.469);
+    }
+  }
+  &:nth-child(4n + 1) {
+    .box {
+      background-color: rgba(38, 140, 144, 0.581);
+    }
+  }
+  &:nth-child(4n + 2) {
+    .box {
+      background-color: rgba(81, 190, 56, 0.581);
+    }
+  }
+  &:nth-child(4n + 3) {
+    .box {
+      background-color: rgba(188, 56, 190, 0.581);
+    }
+  }
+}
+.box {
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 48px;
+}
+</style>
diff --git a/packages/opendesign/src/components/grid/__demo__/IndexGrid.vue b/packages/opendesign/src/components/grid/__demo__/IndexGrid.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4280c9a7de056d99199b55b9547e58da39d556be
--- /dev/null
+++ b/packages/opendesign/src/components/grid/__demo__/IndexGrid.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import '../style';
+
+import GridBasic from './GridBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <GridBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/grid/index.ts b/packages/opendesign/src/components/grid/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..88ecc8a4bcf0a1ba1ce661b1b77c3e650eb29a2b
--- /dev/null
+++ b/packages/opendesign/src/components/grid/index.ts
@@ -0,0 +1,13 @@
+import _ORow from './ORow.vue';
+import OCol from './OCol.vue';
+import type { App } from 'vue';
+
+const ORow = Object.assign(_ORow, {
+  OCol,
+  install(app: App) {
+    app.component(_ORow.name, _ORow);
+  },
+});
+
+export { ORow, OCol };
+export * from './types';
diff --git a/packages/opendesign/src/components/grid/style/index.scss b/packages/opendesign/src/components/grid/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..75691655b51c5b0856342f8dd2f1b26b8b7baf42
--- /dev/null
+++ b/packages/opendesign/src/components/grid/style/index.scss
@@ -0,0 +1,69 @@
+@use './var.scss';
+
+$media-xs: 576px;
+$media-s: 721px;
+$media-m: 1201px;
+$media-l: 1441px;
+$media-xl: 1681px;
+$media-xxl: 1920px;
+
+.o-row {
+  display: flex;
+  justify-content: var(--row-justify);
+  align-items: var(--row-align);
+  flex-wrap: var(--row-wrap);
+  flex-direction: var(--row-direction);
+  margin-left: var(--row-gap-x);
+  margin-right: var(--row-gap-x);
+  margin-bottom: var(--row-gap-y);
+}
+.o-row-inline {
+  display: inline-flex;
+}
+
+.o-col {
+  flex: var(--col-flex);
+  flex-grow: var(--col-grow);
+  flex-shrink: var(--col-shrink);
+  flex-basis: var(--col-basis);
+  align-self: var(--col-align);
+  padding-left: var(--col-gap-x);
+  padding-right: var(--col-gap-x);
+  margin-bottom: var(--col-gap-y);
+}
+
+@media (min-width: $media-xs) {
+  .o-col-xs {
+    flex-basis: var(--col-basis-xs);
+  }
+}
+
+@media (min-width: $media-s) {
+  .o-col-s {
+    flex-basis: var(--col-basis-s);
+  }
+}
+
+@media (min-width: $media-m) {
+  .o-col-m {
+    flex-basis: var(--col-basis-m);
+  }
+}
+
+@media (min-width: $media-l) {
+  .o-col-l {
+    flex-basis: var(--col-basis-l);
+  }
+}
+
+@media (min-width: $media-xl) {
+  .o-col-xl {
+    flex-basis: var(--col-basis-xl);
+  }
+}
+
+@media (min-width: $media-xxl) {
+  .o-col-xxl {
+    flex-basis: var(--col-basis-xxl);
+  }
+}
diff --git a/packages/opendesign/src/components/grid/style/index.ts b/packages/opendesign/src/components/grid/style/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..591b2fbd72dcd5e987362d645b561bd2fac42716
--- /dev/null
+++ b/packages/opendesign/src/components/grid/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/grid/style/var.scss b/packages/opendesign/src/components/grid/style/var.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b137891791fe96927ad78e64b0aad7bded08bdc
--- /dev/null
+++ b/packages/opendesign/src/components/grid/style/var.scss
@@ -0,0 +1 @@
+
diff --git a/packages/opendesign/src/components/grid/types.ts b/packages/opendesign/src/components/grid/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a4c2a2fcf2e124554a3bded29a084bb31acbcda
--- /dev/null
+++ b/packages/opendesign/src/components/grid/types.ts
@@ -0,0 +1,118 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const rowProps = {
+  /**
+   * 是否为inline-flex
+   */
+  inline: {
+    type: Boolean,
+  },
+  /**
+   * 同 align-items
+   */
+  align: {
+    type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'inherit' | 'initial'>,
+  },
+  /**
+   * 同 justify-content
+   */
+  justify: {
+    type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'inherit' | 'initial'>,
+  },
+  /**
+   * flex-wrap
+   */
+  wrap: {
+    type: String as PropType<'nowrap' | 'wrap' | 'wrap-reverse' | 'initial' | 'inherit'>,
+  },
+  /**
+   * flex-direction
+   */
+  direction: {
+    type: String as PropType<'row' | 'row-reverse' | 'column' | 'column-reverse'>,
+  },
+  /**
+   * gapX
+   */
+  gapX: {
+    type: String,
+  },
+  /**
+   * gapY
+   */
+  gapY: {
+    type: String,
+  },
+};
+
+export const colProps = {
+  /**
+   * flex-grow
+   */
+  grow: {
+    type: [Number, String],
+  },
+  /**
+   * flex-shrink
+   */
+  shrink: {
+    type: [Number, String],
+  },
+  /**
+   * flex-basic
+   */
+  width: {
+    type: String,
+  },
+  /**
+   * flex
+   */
+  flex: {
+    type: String,
+  },
+  /**
+   * 同 align-self
+   */
+  align: {
+    type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'inherit' | 'initial'>,
+  },
+  /**
+   * @media (min-width: 576px)
+   */
+  xs: {
+    type: Object,
+  },
+  /**
+   * @media (min-width: 721px)
+   */
+  s: {
+    type: Object,
+  },
+  /**
+   * @media (min-width: 1201px)
+   */
+  m: {
+    type: Object,
+  },
+  /**
+   * @media (min-width: 1441px)
+   */
+  l: {
+    type: Object,
+  },
+  /**
+   * @media (min-width: 1681px)
+   */
+  xl: {
+    type: Object,
+  },
+  /**
+   * @media (min-width: 1920px)
+   */
+  xxl: {
+    type: Object,
+  },
+};
+
+export type RowPropsT = ExtractPropTypes<typeof rowProps>;
+export type ColPropsT = ExtractPropTypes<typeof colProps>;
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index fc648f4a735063c4d2fde7f97fd1ea408b247839..a9c77e309aefe541ac20a6583d38661aa193f217 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -32,4 +32,4 @@
 @use './slides/style/index.scss' as *;
 @use './message/style/index.scss' as *;
 @use './cascader/style/index.scss' as *;
-
+@use './grid/style/index.scss' as *;
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index 3e1819f7011977cda58cc5b6febe0eeacda17cdc..c1e067ebf72e810d59588601ab21fdf4c35572b9 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -35,6 +35,7 @@ export * from './card';
 export * from './message';
 export * from './slides';
 export * from './cascader';
+export * from './grid';
 
 // export * from './scrollbar';
 export * from './intersection-observer';
diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue
index 0d403b7ea0b93be9d36d32644e3bc964b8c0558d..20038e9ddf58840554884e80393234b959bec9e6 100644
--- a/packages/opendesign/src/components/slides/OSlides.vue
+++ b/packages/opendesign/src/components/slides/OSlides.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
 import { IconChevronLeft, IconChevronRight } from '../icons';
+// import { getCssVariable } from '../_shared/dom';
 
 import { slidesProps } from './types';
 
@@ -15,18 +16,24 @@ watch(
     activeIndex.value = v ?? 0;
   }
 );
-
-enum ClassNames {
-  ACTIVE = 'o-slide-item-active',
-  ANIMATING = 'o-slide-item-animating',
-  ACTIVE_IN = 'o-slide-item-in',
-  ACTIVE_IN_REVERSE = 'o-slide-item-in-reverse',
-  ACTIVE_OUT = 'o-slide-item-out',
-  ACTIVE_OUT_REVERSE = 'o-slide-item-out-reverse',
-}
+// enum CSS_VAR {
+//   GAP_X = '--slide-gap-x',
+// }
+const ClassNames = {
+  PREVIOUS: 'o-slide-item-last',
+  NEXT: 'o-slide-item-next',
+  ACTIVE: 'o-slide-item-active',
+  ANIMATING: 'o-slide-item-animating',
+  ACTIVE_IN: 'o-slide-item-in',
+  ACTIVE_IN_REVERSE: 'o-slide-item-in-reverse',
+  ACTIVE_OUT: 'o-slide-item-out',
+  ACTIVE_OUT_REVERSE: 'o-slide-item-out-reverse',
+};
 const initialized = ref(false);
 
 const slideWrapRef = ref<HTMLElement | null>(null);
+const slidesRef = ref<HTMLElement | null>(null);
+
 const slideElList = computed(() => {
   const c = slideWrapRef.value?.children;
   return c ? Array.from(c).map((el) => el as HTMLElement) : null;
@@ -45,6 +52,8 @@ const fixIndex = (idx: number) => {
   const i = idx % total.value;
   return i >= 0 ? i : i + total.value;
 };
+
+// Switch
 /**
  * @param index 激活的slide索引
  * @param animate 切换是否执行过度动画
@@ -55,7 +64,7 @@ const activeSwitchSlideByIndex = (index: number, animate = true, reverse = false
   }
   let lastActiveIndex = activeIndex.value;
 
-  activeIndex.value = fixIndex(index);
+  activeIndex.value = index;
 
   let lastActiveEl = activeEl;
   activeEl = slideElList.value[activeIndex.value];
@@ -106,18 +115,29 @@ const ininSwitchSlides = () => {
     });
   });
 };
-
+// Carousel
 const activeCarouselSlideByIndex = (index: number) => {
   if (!slideElList.value || !total.value) {
     return;
   }
+  // let last = activeIndex.value;
+  // let next = fixIndex(index + 1);
+  // const lastEl = slideElList.value[last];
+  // const nextEl = slideElList.value[next];
+  const nowEl = slideElList.value[index];
+
   activeIndex.value = index;
 
-  const d = slideElList.value[index].offsetLeft;
+  // lastEl.classList.add(ClassNames.PREVIOUS);
+  // nowEl.classList.add(ClassNames.ACTIVE);
+  // nextEl.classList.add(ClassNames.NEXT);
+
+  const d = nowEl.offsetLeft;
   if (slideWrapRef.value) {
     slideWrapRef.value.style.transform = `translate3d(-${d}px, 0, 0)`;
   }
 };
+
 const ininCarouselSlides = () => {
   if (!slideElList.value) {
     return;
@@ -160,20 +180,43 @@ const activeSlideByIndex = (index: number, animate = true, reverse = false) => {
     }
   }
 };
-const changeActiveSlide = (add: number) => {
+
+let timer: number | null = null;
+const stopPlay = () => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+const startPlay = () => {
+  stopPlay();
+  timer = window.setInterval(() => {
+    activeSlideByIndex(activeIndex.value + 1);
+  }, props.interval);
+};
+
+const changeActiveSlide = (index: number, animate = true, reverse = false) => {
   if (isAnimating.value) {
     return;
   }
-  activeSlideByIndex(activeIndex.value + add, true, add < 0);
+  // 停止自动播放
+  stopPlay();
+
+  activeSlideByIndex(index, animate, reverse);
+  // 恢复自动播放
+  if (props.autoPlay) {
+    startPlay();
+  }
 };
 
-let timer: number | null = null;
 onMounted(() => {
+  // if (slidesRef.value) {
+  //   console.log(getCssVariable('--gap-x', slidesRef.value));
+  // }
+
   initSlides();
   if (props.autoPlay) {
-    timer = window.setInterval(() => {
-      activeSlideByIndex(activeIndex.value + 1);
-    }, props.interval);
+    startPlay();
   }
 });
 onUnmounted(() => {
@@ -185,16 +228,19 @@ onUnmounted(() => {
 </script>
 <template>
   <div
+    ref="slidesRef"
     class="o-slides"
     :class="{
       'o-slides-visible': initialized,
     }"
   >
-    <div ref="slideWrapRef" class="o-slides-wrap" :class="[`o-slides-type-${props.type}`]">
-      <slot></slot>
+    <div class="o-slides-wrap">
+      <div ref="slideWrapRef" class="o-slide-container" :class="[`o-slides-type-${props.type}`]">
+        <slot></slot>
+      </div>
     </div>
-    <div class="o-slides-indicator-wrap">
-      <div v-for="(item, idx) in total" :key="item" class="o-slides-indicator-item" @click="activeSlideByIndex(idx)">
+    <div v-if="props.indicator" class="o-slides-indicator-wrap" :class="props.indicatorWrapClass">
+      <div v-for="(item, idx) in total" :key="item" class="o-slides-indicator-item" @click="changeActiveSlide(idx)">
         <slot name="indicator" :active="item - 1 === activeIndex">
           <div
             class="o-slides-indicator-dot"
@@ -205,22 +251,26 @@ onUnmounted(() => {
         </slot>
       </div>
     </div>
-    <div class="o-slides-arrow-wrap">
-      <div class="o-slides-arrow-prev" @click="changeActiveSlide(-1)">
+    <div v-if="props.arrow" class="o-slides-arrow-wrap" :class="props.arrowWrapClass">
+      <div @click="changeActiveSlide(activeIndex - 1, true, true)">
         <slot name="arrow-prev">
-          <div class="o-slides-arrow-icon">
-            <slot name="arrow-prev-icon">
-              <IconChevronLeft />
-            </slot>
+          <div class="o-slides-arrow-prev">
+            <div class="o-slides-arrow-icon">
+              <slot name="arrow-prev-icon">
+                <IconChevronLeft />
+              </slot>
+            </div>
           </div>
         </slot>
       </div>
-      <div class="o-slides-arrow-next" @click="changeActiveSlide(1)">
+      <div @click="changeActiveSlide(activeIndex + 1, true, false)">
         <slot name="arrow-next">
-          <div class="o-slides-arrow-icon">
-            <slot name="arrow-next-icon">
-              <IconChevronRight />
-            </slot>
+          <div class="o-slides-arrow-next">
+            <div class="o-slides-arrow-icon">
+              <slot name="arrow-next-icon">
+                <IconChevronRight />
+              </slot>
+            </div>
           </div>
         </slot>
       </div>
diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
index c8a28dd67f17f63684c2081af286873ca70eaa1e..f089c0d28306019dc3da3160553024944b69745a 100644
--- a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
+++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue
@@ -21,8 +21,8 @@ const onChange = (now: number, last: number) => {
       </OSlideItem>
     </OSlides>
   </section>
-  <section>
-    <OSlides class="slides2" type="carousel" auto-play @change="onChange">
+  <section style="overflow: hidden">
+    <OSlides class="slides2" type="carousel" :auto-play="false" style="--slide-gap-x: 16px" @change="onChange">
       <OSlideItem v-for="s in slides" :key="s" class="slide-item2">
         <OFigure class="img" :src="s" />
       </OSlideItem>
@@ -38,14 +38,12 @@ const onChange = (now: number, last: number) => {
   width: 50%;
   margin: auto;
   height: 200px;
-  background-color: red;
-}
-.slide-item2 {
-  width: 100%;
-  padding: 0 8px;
+  overflow: visible;
+  // background-color: red;
 }
 .img {
+  border-radius: 16px;
+  height: 100%;
   width: 100%;
-  height: 300px;
 }
 </style>
diff --git a/packages/opendesign/src/components/slides/style/index.scss b/packages/opendesign/src/components/slides/style/index.scss
index 2a48014a97b259e1c17244b867f4a10607ab6750..04ddbb072729a1c7b6c8b54030e2817c9a710653 100644
--- a/packages/opendesign/src/components/slides/style/index.scss
+++ b/packages/opendesign/src/components/slides/style/index.scss
@@ -3,6 +3,7 @@
 .o-slides {
   position: relative;
   visibility: hidden;
+  overflow: hidden;
 }
 .o-slides-visible {
   visibility: visible;
@@ -37,13 +38,15 @@
   transform: translate3d(0, -50%, 0);
 }
 .o-slides-arrow-icon {
-  font-size: 48px;
-  color: var(--o-color-control-light);
-  background-color: rgba(var(--o-gray-1), 0.3);
+  font-size: var(--slides-arrow-size);
+  color: var(--slides-arrow-color);
+  background-color: var(--slides-arrow-bg-color);
   border-radius: 50%;
-  opacity: 0.6;
+  opacity: var(--slides-arrow-opacity);
   &:hover {
-    opacity: 1;
+    opacity: var(--slides-arrow-opacity-hover);
+    color: var(--slides-arrow-color-hover);
+    background-color: var(--slides-arrow-bg-color-hover);
   }
 }
 // indicator
@@ -60,7 +63,7 @@
 .o-slides-indicator-dot {
   width: 48px;
   height: 3px;
-  background-color: var(--o-color-control-light);
+  background-color: var(--slides-indicator-bg-color);
   margin: 4px;
   border-radius: 3px;
   opacity: 0.3;
@@ -68,6 +71,7 @@
 }
 .o-slides-indicator-dot-active {
   opacity: 1;
+  background-color: var(--slides-indicator-bg-color-active);
 }
 
 // slide
@@ -144,14 +148,17 @@
 }
 
 .o-slides-type-carousel {
-  --slide-gap: 16px;
   transition: transform var(--o-duration-l) var(--o-easing-emphasized);
+  display: flex;
+  width: 100%;
+  height: 100%;
   .o-slide-item {
-    position: absolute;
-    left: 0;
-    right: 0;
+    flex-shrink: 0;
+    flex-grow: 0;
+    width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 1;
+    margin-right: var(--slide-gap-x);
   }
 }
diff --git a/packages/opendesign/src/components/slides/style/var.scss b/packages/opendesign/src/components/slides/style/var.scss
index 1f49819f9362fab25a272c17eeea43b39e3aea57..7fd24baba73ee6bf5865bdf068963c9d6db70e1b 100644
--- a/packages/opendesign/src/components/slides/style/var.scss
+++ b/packages/opendesign/src/components/slides/style/var.scss
@@ -1,5 +1,17 @@
-.o-figure {
-  --figure-padding-top: 50%;
-  --figure-fit: 'cover';
-  --figure-position: 'center';
+.o-slides {
+  --slide-gap-x: 8px;
+
+  // arrow
+  --slides-arrow-size: var(--o-icon_size-l);
+  --slides-arrow-opacity: 0.6;
+  --slides-arrow-opacity-hover: 1;
+  --slides-arrow-color: var(--o-color-control-light);
+  --slides-arrow-color-hover: var(--o-color-control-light);
+  --slides-arrow-bg-color: rgba(var(--o-gray-1), 0.3);
+  --slides-arrow-bg-color-hover: rgba(var(--o-gray-1), 0.3);
+  // indicator
+  --slides-indicator-opacity: 0.3;
+  --slides-indicator-opacity-active: 1;
+  --slides-indicator-bg-color: var(--o-color-control-light);
+  --slides-indicator-bg-color-active: var(--o-color-control-light);
 }
diff --git a/packages/opendesign/src/components/slides/types.ts b/packages/opendesign/src/components/slides/types.ts
index 1481c9e43e7717d77250785fc1d93318e865d558..9b3a169107f709e7bc14f92cc4890b8f1d54f81c 100644
--- a/packages/opendesign/src/components/slides/types.ts
+++ b/packages/opendesign/src/components/slides/types.ts
@@ -27,6 +27,32 @@ export const slidesProps = {
     type: Number,
     default: 5000
   },
+  /**
+   * 是否显示切换箭头
+   */
+  arrow: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 设置切换箭头容器类
+   */
+  arrowWrapClass: {
+    type: String
+  },
+  /**
+   * 是否显示指示器
+   */
+  indicator: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 设置指示器容器类
+   */
+  indicatorWrapClass: {
+    type: String
+  }
 };
 
 export type SlidesPropsT = ExtractPropTypes<typeof slidesProps>;
diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss
index 7ce0f95be0bc19888c46205106258da70eeb6768..466b66418f6058ccd1637f28ddcc85e084b45934 100644
--- a/packages/opendesign/src/components/tabs/style/index.scss
+++ b/packages/opendesign/src/components/tabs/style/index.scss
@@ -39,11 +39,12 @@
   background-color: var(--tabs-nav-bg-color);
   position: relative;
   z-index: 1;
-
-  &:hover {
-    color: var(--tabs-nav-color-hover);
-    border-color: var(--tabs-nav-bd-color-hover);
-    background-color: var(--tabs-nav-bg-color-hover);
+  &:not(.o-tab-nav-disabled) {
+    &:hover {
+      color: var(--tabs-nav-color-hover);
+      border-color: var(--tabs-nav-bd-color-hover);
+      background-color: var(--tabs-nav-bg-color-hover);
+    }
   }
 }
 .o-tab-nav-active {
diff --git a/packages/opendesign/src/icons/cleansvg.config.ts b/packages/opendesign/src/icons/cleansvg.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7641c0717d4a8e48c9b083d6a2fc6ebb719cb0ff
--- /dev/null
+++ b/packages/opendesign/src/icons/cleansvg.config.ts
@@ -0,0 +1,4 @@
+module.exports = {
+  input: './svgs',
+  output: './_svgs',
+};
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 3974fa0d56e5911344150bf97029c1db6dad21cd..5c01f700fd2f9dd85d0d613fe144714ef86fc9c0 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -182,6 +182,12 @@ export const routes = [
     label: '幻灯片 Slides',
     component: () => import('@components/slides/__demo__/IndexSlides.vue'),
   },
+  {
+    path: '/grid',
+    name: 'Grid',
+    label: '栅格 Grid',
+    component: () => import('@components/grid/__demo__/IndexGrid.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index a6b027fcfda465444f5d5e5f5483d8576f71db5a..39de3914ba36eaf514b22a26e9e62c55ad99f551 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opensig-scripts",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "opendesign component Scripts",
   "main": "dist/index.js",
   "bin": "dist/index.js",
diff --git a/packages/scripts/src/clean-svg/config.ts b/packages/scripts/src/clean-svg/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cbc6279d23efa0c3b00f0d09802ab1a3b0f090f3
--- /dev/null
+++ b/packages/scripts/src/clean-svg/config.ts
@@ -0,0 +1,35 @@
+import type { Config, PluginConfig } from 'svgo';
+
+export interface IconsConfig {
+  svgo: Config;
+  input: string;
+  output: string;
+}
+export const basePlugins: PluginConfig[] = [
+  {
+    name: 'preset-default',
+    params: {
+      overrides: {
+        // 不移除view-box属性
+        removeViewBox: false,
+      },
+    },
+  },
+  'removeStyleElement',
+  'removeScriptElement',
+  'removeDimensions',
+  'sortAttrs',
+  'removeUselessStrokeAndFill',
+  {
+    name: 'removeAttrs',
+    params: {
+      attrs: ['class'],
+    },
+  },
+];
+
+export const defaultConfig: IconsConfig = {
+  svgo: { plugins: basePlugins },
+  input: './src/icons/svgs',
+  output: './src/icons/output/',
+};
diff --git a/packages/scripts/src/clean-svg/index.ts b/packages/scripts/src/clean-svg/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e5c1a64f1e0962714eb353e1e99237fbe671d6c
--- /dev/null
+++ b/packages/scripts/src/clean-svg/index.ts
@@ -0,0 +1,91 @@
+import path from 'path';
+import { defaultConfig, IconsConfig } from './config';
+import glob from 'glob';
+import { optimize } from 'svgo';
+import fs from 'fs-extra';
+
+/**
+ * 读取配置文件
+ */
+async function readConfig(cfg: string) {
+  const base = process.cwd();
+  const configFile = path.resolve(base, cfg || './clear-svg.config.ts');
+  const cfgDir = path.dirname(configFile);
+
+  const configData: IconsConfig = await require(configFile);
+
+  const config = Object.assign(defaultConfig, configData);
+
+  config.input = path.resolve(cfgDir, config.input);
+  config.output = path.resolve(cfgDir, config.output);
+
+  return {
+    file: configFile,
+    data: config,
+  };
+}
+
+interface IconItem {
+  name: string;
+  path: string;
+}
+
+/**
+ * 读取svg图标文件列表
+ */
+function readSvgData(cfg: IconsConfig) {
+  const svgs: Array<IconItem> = [];
+  const files = glob.sync('./**/*.svg', {
+    cwd: cfg.input,
+    absolute: true,
+  });
+
+  files.forEach((file) => {
+    const name = path.basename(file.replace(/\s/g, ''));
+    svgs.push({
+      name: name,
+      path: file,
+    });
+  });
+  return svgs;
+}
+
+/**
+ * 创建图标组件
+ * @param icons 图标列表
+ */
+function generateSvgs(icons: Array<IconItem>, cfg: IconsConfig) {
+  console.log('generating icon components...');
+  // 清空构建目录
+  fs.emptyDirSync(cfg.output);
+
+  // 遍历生成图标组件
+  icons.forEach((item) => {
+    const file = fs.readFileSync(item.path, 'utf-8');
+    const svgoCfg = cfg.svgo;
+
+    const rlt = optimize(file, {
+      path: item.path,
+      ...svgoCfg,
+    });
+
+    fs.outputFile(path.resolve(cfg.output, item.name), rlt.data, (err) => {
+      if (err) {
+        console.log(`build [${item.name}] failed: ${err}`);
+      } else {
+        console.log(`build [${item.name}] success`);
+      }
+    });
+  });
+}
+export default async function main(options: { config: string }) {
+  const { data } = await readConfig(options.config);
+
+  console.log('search svg...');
+  const svgs = readSvgData(data);
+  console.log(`find ${svgs.length} svg files...`);
+
+  if (svgs.length > 0) {
+    generateSvgs(svgs, data);
+  }
+}
diff --git a/packages/scripts/src/gen-icons/config.ts b/packages/scripts/src/gen-icon/config.ts
similarity index 100%
rename from packages/scripts/src/gen-icons/config.ts
rename to packages/scripts/src/gen-icon/config.ts
diff --git a/packages/scripts/src/gen-icons/index.ts b/packages/scripts/src/gen-icon/index.ts
similarity index 85%
rename from packages/scripts/src/gen-icons/index.ts
rename to packages/scripts/src/gen-icon/index.ts
index 90e8caabe515e8bab0d0729ee0188d71423f8275..22c01cf883dd5bff3ee31d212f664ef2c440393f 100644
--- a/packages/scripts/src/gen-icons/index.ts
+++ b/packages/scripts/src/gen-icon/index.ts
@@ -4,16 +4,6 @@ import glob from 'glob';
 import { toPascalCase } from '../utils';
 import { optimize } from 'svgo';
 import fs from 'fs-extra';
-export interface TokenConfigT {
-  output: string,
-  prefix: string,
-  themes: string[],
-  defaultTheme: string,
-  tokenFile: string[],
-  codeSnippetsFile: string
-}
-
-// TODO： 支持指定配置文件
 
 /**
  * 读取配置文件
@@ -32,7 +22,7 @@ async function readConfig(cfg: string) {
 
   return {
     file: configFile,
-    data: config
+    data: config,
   };
 }
 
@@ -43,25 +33,24 @@ enum SvgType {
 }
 
 interface IconItem {
-  type: SvgType,
-  name: string,
-  componentName: string,
-  path: string
+  type: SvgType;
+  name: string;
+  componentName: string;
+  path: string;
 }
 
 /**
  * 读取svg图标文件列表
  */
 function readSvgData(cfg: IconsConfig) {
-
   const svgs: Array<IconItem> = [];
-  [SvgType.FILL, SvgType.STROKE, SvgType.COLOR].forEach(key => {
+  [SvgType.FILL, SvgType.STROKE, SvgType.COLOR].forEach((key) => {
     const files = glob.sync(`${key}/**/*.svg`, {
       cwd: cfg.input,
       absolute: true,
     });
 
-    files.forEach(file => {
+    files.forEach((file) => {
       const name = `icon-${path.basename(file.replace(/\s/g, ''), '.svg')}`;
       svgs.push({
         type: key,
@@ -70,7 +59,6 @@ function readSvgData(cfg: IconsConfig) {
         path: file,
       });
     });
-
   });
   return svgs;
 }
@@ -85,7 +73,7 @@ function generateIconComponents(icons: Array<IconItem>, cfg: IconsConfig) {
   fs.emptyDirSync(cfg.output);
 
   // 遍历生成图标组件
-  icons.forEach(item => {
+  icons.forEach((item) => {
     const file = fs.readFileSync(item.path, 'utf-8');
     const svgoCfg = cfg.svgo[item.type];
 
@@ -98,10 +86,10 @@ function generateIconComponents(icons: Array<IconItem>, cfg: IconsConfig) {
       name: item.name,
       componentName: item.componentName,
       svg: rlt.data,
-      type: item.type
+      type: item.type,
     });
 
-    fs.outputFile(path.resolve(cfg.output, `${item.componentName}/${item.componentName}.vue`), content, err => {
+    fs.outputFile(path.resolve(cfg.output, `${item.componentName}/${item.componentName}.vue`), content, (err) => {
       if (err) {
         console.log(`build [${item.componentName}] failed: ${err}`);
       } else {
@@ -110,7 +98,7 @@ function generateIconComponents(icons: Array<IconItem>, cfg: IconsConfig) {
     });
 
     const idxContent = `export { default as ${item.componentName} } from './${item.componentName}.vue';`;
-    fs.outputFile(path.resolve(cfg.output, `${item.componentName}/index.ts`), idxContent, err => {
+    fs.outputFile(path.resolve(cfg.output, `${item.componentName}/index.ts`), idxContent, (err) => {
       if (err) {
         console.log(`build index [${item.componentName}] failed: ${err}`);
       } else {
@@ -118,7 +106,6 @@ function generateIconComponents(icons: Array<IconItem>, cfg: IconsConfig) {
       }
     });
   });
-
 }
 /**
  * 创建入口文件
@@ -127,7 +114,7 @@ function generateIconComponents(icons: Array<IconItem>, cfg: IconsConfig) {
 function generateExportIndex(icons: Array<IconItem>, output: string) {
   console.log('generating index.ts...');
 
-  const content = icons.map(item => {
+  const content = icons.map((item) => {
     return `export { ${item.componentName} } from './${item.componentName}';`;
   });
 
@@ -147,4 +134,4 @@ export default async function main(options: { config: string }) {
     generateIconComponents(svgs, data);
     generateExportIndex(svgs, data.output);
   }
-}
\ No newline at end of file
+}
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-token/index.ts
similarity index 100%
rename from packages/scripts/src/gen-tokens/index.ts
rename to packages/scripts/src/gen-token/index.ts
diff --git a/packages/scripts/src/index.ts b/packages/scripts/src/index.ts
index fa477d302a446250a1b3bb91d4082c1c9584b7de..19438ce03cac7c13674acc83ebbc0419bf7de07a 100644
--- a/packages/scripts/src/index.ts
+++ b/packages/scripts/src/index.ts
@@ -2,44 +2,54 @@ import path from 'path';
 import fs from 'fs-extra';
 import { Command } from 'commander';
 
-import buildIcons from './gen-icons';
+import buildIcons from './gen-icon';
+import cleanSvgs from './clean-svg';
 import buildComponents from './build-components';
 import buildStyle from './build-style';
-import genTokens from './gen-tokens';
+import genTokens from './gen-token';
 
 const program = new Command();
 
 const packageStr = fs.readFileSync(path.resolve(__dirname, '../package.json'), 'utf-8');
 const packageJson = JSON.parse(packageStr);
 
-program.name('opensig-scripts')
-  .version(packageJson.version)
-  .usage('command [options] ');
+program.name('opensig-scripts').version(packageJson.version).usage('command [options] ');
 
-program.command('gen:icon')
+program
+  .command('gen:icon')
   .description('generate opendesign icon components')
   .option('-c, --config <configFile>', 'config file')
   .action((options) => {
     buildIcons(options);
   });
+program
+  .command('clean:svg')
+  .description('generate opendesign icon components')
+  .option('-c, --config <configFile>', 'config file')
+  .action((options) => {
+    cleanSvgs(options);
+  });
 
-program.command('build:component')
+program
+  .command('build:component')
   .description('build opendesign components')
   .action(() => {
     buildComponents();
   });
 
-program.command('build:style')
+program
+  .command('build:style')
   .description('build opendesign style')
   .action(() => {
     buildStyle();
   });
 
-program.command('gen:token')
+program
+  .command('gen:token')
   .description('generate opendesign tokens')
   .option('-c, --config <configFile>', 'config file')
   .action((options) => {
     genTokens(options);
   });
 
-program.parse(process.argv);
\ No newline at end of file
+program.parse(process.argv);