@ditari/bsui 1.0.0 → 1.0.2

package/dist/esm/style.css

@@ -1,274 +1 @@
-.dfb-list-layout {
-  padding: 20px;
-  height: 100%;
-}
-.dfb-list-layout .wrapper {
-  display: flex;
-  flex-direction: column;
-}
-.dfb-list-layout .dfb-list-table {
-  flex: 1;
-}
-.dfb-list-layout .dfb-list-table .ant-card-body {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.dfb-list-layout .dfb-list-form .ant-card-body {
-  padding-bottom: 0;
-}
-.dfb-list-layout .wrapper,
-.dfb-layout {
-  height: 100%;
-}
-.dfb-layout .dfb-layout-sider {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-}
-.dfb-layout .dfb-top-layout {
-  position: fixed;
-  left: 200px;
-  right: 0;
-  z-index: 210;
-}
-.dfb-layout .dfb-layout-content {
-  margin-left: 200px;
-  margin-top: 84px;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.1s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-.main-enter-active {
-  transition: 0.2s;
-}
-.main-leave-active {
-  transition: 0.15s;
-}
-.main-enter-from {
-  opacity: 0;
-  margin-left: -20px;
-}
-.main-leave-to {
-  opacity: 0;
-  margin-left: 20px;
-}
-.dfb-layout-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 15px;
-  height: 42px;
-  border-bottom: 1px solid #f0f2f5;
-  background-color: #fff;
-}
-.dfb-layout-header .dfb-layout-header-left {
-  display: flex;
-  justify-content: center;
-}
-.dfb-layout-header .dfb-layout-header-left .dfb-side-collapsed {
-  margin-right: 20px;
-  cursor: pointer;
-  width: 42px;
-  line-height: 30px;
-  text-align: center;
-  transition-duration: 0.2s;
-}
-.dfb-layout-header .dfb-layout-header-left .dfb-side-collapsed:hover {
-  background-color: #f0f2f5;
-  border-radius: 4px;
-}
-.dfb-layout-header .dfb-layout-header-left .dfb-side-collapsed .icon {
-  transition-duration: 0.2s;
-}
-.dfb-user-menu {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-.dfb-user-menu .dfb-operation-items {
-  margin-left: 10px;
-  height: 100%;
-}
-.dfb-user-menu .dfb-operation-items .ant-dropdown-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-.collapsed-animation {
-  transform: rotate(-180deg);
-}
-.xi-pagination {
-  margin-top: 24px;
-  text-align: center;
-}
-.dfb-nav {
-  background: #f0f2f5;
-}
-.dfb-nav .ant-tabs-nav {
-  margin: 0;
-}
-.dfb-nav .ant-tabs-content-holder {
-  display: none;
-}
-.dfb-nav .ant-tabs-tab {
-  position: relative;
-  margin-left: 0 !important;
-  border: 0 !important;
-  transition: none !important;
-  border-radius: 10px 10px 0 0 !important;
-}
-.dfb-nav .ant-tabs-tab:not(.ant-tabs-tab-active) {
-  background: transparent;
-}
-.dfb-nav .ant-tabs-tab:hover:not(.ant-tabs-tab-active) {
-  background: #e9e9e9;
-}
-.dfb-nav .ant-tabs-tab .ant-tabs-tab-btn {
-  display: flex;
-  align-items: center;
-}
-.dfb-nav .ant-tabs-tab .anticon {
-  margin-right: 0;
-  margin-left: 20px;
-}
-.dfb-nav .ant-tabs-tab .anticon:hover {
-  font-weight: 700;
-}
-.dfb-nav .ant-tabs-nav-wrap {
-  padding: 4px 8px 0;
-}
-.dfb-nav .ant-tabs-tab:before,
-.dfb-nav .ant-tabs-tab:after {
-  position: absolute;
-  bottom: 0;
-  content: "";
-  width: 20px;
-  height: 20px;
-  border-radius: 100%;
-  box-shadow: 0 0 0 40px transparent;
-}
-.dfb-nav .ant-tabs-tab:before {
-  left: -20px;
-  clip-path: inset(50% -10px 0 50%);
-}
-.dfb-nav .ant-tabs-tab:after {
-  right: -20px;
-  clip-path: inset(50% 50% 0 -10px);
-}
-.dfb-nav .ant-tabs-tab:hover:before,
-.dfb-nav .ant-tabs-tab:hover:after {
-  box-shadow: 0 0 0 30px #e9e9e9;
-}
-.dfb-nav .ant-tabs-tab.ant-tabs-tab-active:before,
-.dfb-nav .ant-tabs-tab.ant-tabs-tab-active:after {
-  z-index: 10;
-  box-shadow: 0 0 0 30px #fff;
-}
-.dfb-nav .tab-item-dividers {
-  position: absolute;
-  z-index: 0;
-  height: 14px;
-  top: 50%;
-  left: 0;
-  right: 0;
-  margin-top: -7px;
-}
-.dfb-nav .tab-item-dividers:before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 1px;
-  bottom: 0;
-  width: 1px;
-  opacity: 1;
-  background-color: red;
-  transition: opacity 0.2s ease, background-color 0.3s;
-  z-index: 2;
-}
-.dfb-show-layout .dfb-page-header {
-  position: sticky;
-  top: 84px;
-  padding: 4px 24px;
-}
-.xi-show-layout {
-  display: flex;
-  flex-direction: column;
-}
-.xi-show-layout .xi-page-header {
-  background: #fff;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding: 0 0 0 10px;
-}
-.xi-show-layout .xi-page-header .ant-page-header-heading-title {
-  font-size: 16px;
-}
-.xi-show-layout .xi-show-content {
-  flex: 1;
-  position: relative;
-  padding: 20px;
-  overflow-y: scroll;
-  -ms-overflow-style: none;
-}
-.xi-show-layout .xi-show-content::-webkit-scrollbar {
-  width: 0 !important;
-  display: none;
-}
-.xi-show-layout .footer {
-  padding: 20px;
-}
-.dfb-breadcrumb .ant-breadcrumb-separator {
-  display: none;
-}
-.dfb-breadcrumb .breadcrumb {
-  display: flex;
-}
-.dfb-breadcrumb .breadcrumb .breadcrumb-item:first-child .breadcrumb-link {
-  border-radius: 6px 0 0 6px;
-  clip-path: polygon(
-    0 0,
-    calc(100% - 8px) 0,
-    100% 50%,
-    calc(100% - 8px) 100%,
-    0 100%
-  );
-}
-.dfb-breadcrumb
-  .breadcrumb
-  .breadcrumb-item:last-child:not(:last-child)
-  .breadcrumb-link {
-  border-radius: 0 6px 6px 0;
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
-}
-.dfb-breadcrumb .breadcrumb-link {
-  display: block;
-  padding: 4px 12px;
-  background: #f0f2f5;
-  clip-path: polygon(
-    0 0,
-    calc(100% - 8px) 0,
-    100% 50%,
-    calc(100% - 8px) 100%,
-    0 100%,
-    8px 50%
-  );
-}
-.breadcrumb-enter-active {
-  transition: all 0.25s;
-}
-.breadcrumb-enter-from,
-.breadcrumb-leave-active {
-  opacity: 0;
-  transform: translate(30px) skew(-50deg);
-}
+.ditari-ant-back-top{right:4px;bottom:120px}.ditari-layout{height:100%}.ditari-layout .ditari-layout-sider{position:fixed;left:0;top:0;bottom:0;z-index:1}.ditari-layout .ditari-top-layout{position:fixed;left:200px;right:0;z-index:210}.ditari-layout .ditari-layout-content{margin-left:200px;margin-top:84px}.fade-enter-active,.fade-leave-active{transition:opacity .1s ease}.fade-enter-from,.fade-leave-to{opacity:0}.main-enter-active{transition:.2s}.main-leave-active{transition:.15s}.main-enter-from{opacity:0;margin-left:-20px}.main-leave-to{opacity:0;margin-left:20px}.ditari-layout-header{display:flex;justify-content:space-between;align-items:center;padding:0 15px;height:42px;border-bottom:1px solid #f0f2f5;background-color:#fff}.ditari-layout-header .ditari-layout-header-left{display:flex;justify-content:center}.ditari-layout-header .ditari-layout-header-left .ditari-side-collapsed{margin-right:20px;cursor:pointer;width:42px;line-height:30px;text-align:center;transition-duration:.2s}.ditari-layout-header .ditari-layout-header-left .ditari-side-collapsed:hover{background-color:#f0f2f5;border-radius:4px}.ditari-layout-header .ditari-layout-header-left .ditari-side-collapsed .icon{transition-duration:.2s}.ditari-user-menu{display:flex;align-items:center;height:100%}.ditari-user-menu .ditari-operation-items{margin-left:10px;height:100%}.ditari-user-menu .ditari-operation-items .ant-dropdown-link{display:flex;align-items:center;justify-content:center;height:100%}.collapsed-animation{transform:rotate(-180deg)}.ditari-list-layout{padding:20px;height:100%}.ditari-list-layout .wrapper{display:flex;flex-direction:column}.ditari-list-layout .ditari-list-table{flex:1}.ditari-list-layout .ditari-list-table .ant-card-body{display:flex;flex-direction:column;height:100%}.ditari-list-layout .ditari-list-form .ant-card-body{padding-bottom:0}.ditari-list-layout .wrapper{height:100%}.ditari-show-layout{position:relative}.ditari-show-layout .ant-card{margin-bottom:10px}.ditari-show-layout .ant-card .ant-card-head{padding:10px 24px}.ditari-show-layout .ant-card .ant-card-head .ant-card-head-title{padding:0}.ditari-show-layout .ant-card:last-child{margin-bottom:0}.ditari-show-layout .ditari-page-header{position:sticky;top:84px;z-index:1;padding:4px 24px;transition:all .3s}.ditari-show-layout .ditari-page-header.active{box-shadow:1px 5px 20px 2px #e0e0e0}.ditari-show-layout .ditari-show-footer{position:fixed;right:0;bottom:0;left:200px;padding:10px;background:#fff;box-shadow:0 0 5px 3px #e0e0e0}.ditari-nav{background:#f0f2f5}.ditari-nav .ant-tabs-nav{margin:0}.ditari-nav .ant-tabs-content-holder{display:none}.ditari-nav .ant-tabs-tab{position:relative;margin-left:0!important;border:0!important;transition:none!important;border-radius:10px 10px 0 0!important}.ditari-nav .ant-tabs-tab:not(.ant-tabs-tab-active){background:transparent}.ditari-nav .ant-tabs-tab:hover:not(.ant-tabs-tab-active){background:#e9e9e9}.ditari-nav .ant-tabs-tab .ant-tabs-tab-btn{display:flex;align-items:center}.ditari-nav .ant-tabs-tab .anticon{margin-right:0;margin-left:20px}.ditari-nav .ant-tabs-tab .anticon:hover{font-weight:700}.ditari-nav .ant-tabs-nav-wrap{padding:4px 8px 0}.ditari-nav .ant-tabs-tab:before,.ditari-nav .ant-tabs-tab:after{position:absolute;bottom:0;content:"";width:20px;height:20px;border-radius:100%;box-shadow:0 0 0 40px transparent}.ditari-nav .ant-tabs-tab:before{left:-20px;clip-path:inset(50% -10px 0 50%)}.ditari-nav .ant-tabs-tab:after{right:-20px;clip-path:inset(50% 50% 0 -10px)}.ditari-nav .ant-tabs-tab:hover:before,.ditari-nav .ant-tabs-tab:hover:after{box-shadow:0 0 0 30px #e9e9e9}.ditari-nav .ant-tabs-tab.ant-tabs-tab-active:before,.ditari-nav .ant-tabs-tab.ant-tabs-tab-active:after{z-index:10;box-shadow:0 0 0 30px #fff}.ditari-nav .tab-item-dividers{position:absolute;z-index:0;height:14px;top:50%;left:0;right:0;margin-top:-7px}.ditari-nav .tab-item-dividers:before{content:"";display:block;position:absolute;top:0;left:1px;bottom:0;width:1px;opacity:1;background-color:red;transition:opacity .2s ease,background-color .3s;z-index:2}.xi-pagination{margin-top:24px;text-align:center}.ditari-breadcrumb .ant-breadcrumb-separator{display:none}.ditari-breadcrumb .breadcrumb{display:flex}.ditari-breadcrumb .breadcrumb .breadcrumb-item:first-child .breadcrumb-link{border-radius:6px 0 0 6px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%)}.ditari-breadcrumb .breadcrumb .breadcrumb-item:last-child:not(:last-child) .breadcrumb-link{border-radius:0 6px 6px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8px 50%)}.ditari-breadcrumb .breadcrumb-link{display:block;padding:4px 12px;background:#f0f2f5;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}.breadcrumb-enter-active{transition:all .25s}.breadcrumb-enter-from,.breadcrumb-leave-active{opacity:0;transform:translate(30px) skew(-50deg)}

package/dist/esm/utils/get.esm.js

@@ -0,0 +1,11 @@
+const n = (e, o, r = void 0) => {
+  const s = o.replace(/\[(\d+)\]/g, ".$1").split(".");
+  let t = e;
+  for (const c of s)
+    if (t = Object(t)[c], t === void 0)
+      return r;
+  return t;
+};
+export {
+  n as get
+};

package/dist/style/grid/style/index.scss

@@ -0,0 +1,61 @@
+@import "../../theme/variable.scss";
+
+.#{$prefix-name}-grid {
+  position: relative;
+  display: grid;
+
+  .#{$prefix-name}-grid--item {
+    border: $gird-border-width solid $grid-border-color;
+    margin-left: -$gird-border-width;
+    margin-top: -$gird-border-width;
+  }
+}
+
+// 网格表单样式
+.#{$prefix-name}-grid-form {
+  .ant-form-item {
+    margin-bottom: 0;
+    height: 100%;
+    .ant-form-item-label {
+      border-right: $gird-border-width solid $grid-border-color;
+    }
+    .ant-input,
+    .ant-select-selector {
+      border: 0;
+      border-radius: 0;
+
+      &:focus {
+        box-shadow: 0 0 0 $grid-input-border-width
+          $grid-input-focus-border-color;
+      }
+    }
+    .ant-input[disabled] {
+      color: #525252;
+    }
+  }
+  .ant-form-item-has-error {
+    .ant-input {
+      &::placeholder {
+        //color: red;
+      }
+    }
+    .ant-form-item-explain {
+      display: none;
+    }
+  }
+  .ant-select-focused:not(.ant-select-disabled).ant-select:not(
+      .ant-select-customize-input
+    )
+    .ant-select-selector {
+    box-shadow: 0 0 0 $grid-input-border-width $grid-input-focus-border-color;
+  }
+  .ant-form-item-has-error
+    :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus {
+    box-shadow: 0 0 0px $grid-input-border-width red;
+    border-radius: 0;
+  }
+  .ant-form-item-has-error
+    :not(.ant-input-disabled):not(.ant-input-borderless).ant-input {
+    box-shadow: 0 0 0px $grid-input-border-width $grid-input-error-border-color;
+  }
+}

package/dist/style/index.scss

@@ -0,0 +1,15 @@
+@import "./theme/variable";
+@import "./grid/style";
+@import "./menu/style";
+
+html,
+body,
+#app {
+  height: 100vh;
+  background: $bg-color;
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    display: none;
+  }
+}
+

package/dist/style/menu/style/index.scss

@@ -0,0 +1,18 @@
+@import "../../theme/variable.scss";
+
+.ditari-menu {
+  // 菜单高度 $logo-height 为logo的高度
+  height: calc(100vh - $logo-height);
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    display: none;
+  }
+}
+
+.ditari-layout {
+  background-color: red;
+  .ditari-layout-sider {
+    background-color: red;
+  }
+}

package/dist/style/theme/theme.scss

@@ -0,0 +1 @@
+@import "./variable";

package/dist/style/theme/variable.scss

@@ -0,0 +1,21 @@
+// class 前缀
+$prefix-name: ditari-bsui;
+// 页面背景颜色
+$bg-color: #f0f2f5;
+//左侧logo高度
+$logo-height: 240px !default;
+/******======网格变量======******/
+//网格边框颜色
+$grid-border-color: #4e4e4e;
+// 网格里面输入框获取焦点时的边框颜色
+$grid-input-focus-border-color: #1890ff;
+//输入框校验不通过时候的颜色
+$grid-input-error-border-color: #ff4d4f;
+// 网格输入框边框宽度
+$grid-input-border-width: 2px;
+// 网格边框宽度
+$gird-border-width: 1px;
+
+// 左侧菜单
+$top-header-height: 84px;
+$logo-height: 40px !default;

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src/**"
   ],
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "exports": {
-    "./ui": {
+    ".": {
       "require": "./dist/cjs/components/index.cjs.js",
       "import": "./dist/esm/components/index.esm.js",
       "types": "./dist/esm/components/index.d.ts"
@@ -20,9 +21,11 @@
       "types": "./dist/esm/store/index.d.ts"
     },
     "./hooks": {
-      "require": "./dist/cjs/store/index.cjs.js",
-      "import": "./dist/esm/store/index.esm.js",
-      "types": "./dist/esm/store/index.d.ts"
-    }
+      "require": "./dist/cjs/hooks/index.cjs.js",
+      "import": "./dist/esm/hooks/index.esm.js",
+      "types": "./dist/esm/hooks/index.d.ts"
+    },
+    "./css/*": "./dist/css/*",
+    "./theme/*": "./dist/style/*"
   }
 }

package/src/components/components.ts

@@ -0,0 +1,4 @@
+export { default as DForm } from "./form";
+export * from "./layout";
+export { default as DTable } from "./table";
+export { DGrid, DGridItem } from "./grid";

package/src/components/config/Config.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+<script lang="ts">
+export default {
+  name: "Config"
+};
+</script>
+<template></template>
+<style scoped></style>

package/src/components/form/Form.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+<script lang="ts">
+export default {
+  name: "DForm"
+};
+</script>
+<template>
+  <div>form</div>
+  <a-button>ok</a-button>
+</template>

package/src/components/form/grid-form/GridForm.jsx

@@ -0,0 +1,10 @@
+import { defineComponent } from "vue";
+/**
+ * 网格表单
+ * @author 余春林
+ */
+export default defineComponent({
+  setup() {
+    return () => <>我是网格表单</>;
+  }
+});

package/src/components/form/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from "../../utils/index";
+import Form from "./Form.vue";
+import GridForm from "./grid-form/GridForm";
+
+export const DForm = withInstall(Form);
+export const DGridForm = withInstall(GridForm);
+
+export default { DForm, DGridForm };

package/src/components/grid/Grid.tsx

@@ -0,0 +1,73 @@
+import { ref, defineComponent } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useSettingsStore } from "../../store";
+import { storeToRefs } from "pinia";
+import { prefixName } from "../theme";
+import GridItem from "./GridItem";
+
+//class名称
+const baseClassName = `${prefixName}-grid`;
+
+export default defineComponent({
+  name: "DGrid",
+  props: {
+    // css class
+    className: {
+      type: String,
+      default: ""
+    },
+    // 是否补全空白单元格
+    fill: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, { slots }: any) {
+    if (!slots.default) {
+      return () => <>ok</>;
+    }
+    // 从store获取网格配置信息
+    const store = useSettingsStore();
+    // 转换成响应式对象 不使用storeToRefs的对象被解构后失去”响应式“
+    const { gridValue } = storeToRefs(store);
+
+    // 获取单元格个数
+    const length =
+      slots?.default()[0]?.children.length || slots?.default().length;
+
+    // 要填充空白的网格数
+    const fillGridItems = ref<number[]>([]);
+
+    // 网格列
+    const baseStyle = ref<any>({
+      "grid-template-columns": gridValue.value?.value ?? ""
+    });
+
+    //监听屏幕尺寸变化，一般只有人工拉大屏幕尺寸才会触发（默认执行一次）
+    useResizeObserver(document.body, () => {
+      //TODO 检测浏览器是否被缩放
+      //
+      store.gridMatching();
+      baseStyle.value["grid-template-columns"] = gridValue.value?.value ?? "";
+      // 获取当前设备匹配到显示的列数配置
+      const colCount = gridValue.value?.col;
+      // 根据总单元格和显示的列数 计算出总行数
+      const rowCount = Math.ceil(length / colCount);
+      // 总行数乘以显示的列数减去传入的子标签个数 等于要填充的空白单元格数
+      const number = props.fill ? rowCount * colCount - length : 0;
+      // 生成一个要填充空白单元格的数组 用于循环空白的单元格
+      fillGridItems.value = Array.from({ length: number }, (_, i) => i + 1);
+    });
+
+    return () => (
+      <>
+        <div class={[baseClassName, props.className]} style={baseStyle.value}>
+          {slots.default && slots.default(fillGridItems.value)}
+          {fillGridItems.value.map((number) => (
+            <GridItem key={number}></GridItem>
+          ))}
+        </div>
+      </>
+    );
+  }
+});

package/src/components/grid/GridItem.tsx

@@ -0,0 +1,15 @@
+import { defineComponent } from "vue";
+import { prefixName } from "../theme";
+
+//class名称
+const className = `${prefixName}-grid--item`;
+export default defineComponent({
+  name: "DGridItem",
+  setup(props, { slots }) {
+    return () => (
+      <>
+        <div class={className}>{slots.default && slots.default()}</div>
+      </>
+    );
+  }
+});

package/src/components/grid/index.md

@@ -0,0 +1,4 @@
+# Gird
+
+
+# GridItem

package/src/components/grid/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "../../utils/index";
+import Grid from "./Grid";
+import GridItem from "./GridItem";
+
+export const DGrid = withInstall(Grid);
+export const DGridItem = withInstall(GridItem);
+

package/src/components/grid/style/index.scss

@@ -0,0 +1,61 @@
+@import "../../theme/variable.scss";
+
+.#{$prefix-name}-grid {
+  position: relative;
+  display: grid;
+
+  .#{$prefix-name}-grid--item {
+    border: $gird-border-width solid $grid-border-color;
+    margin-left: -$gird-border-width;
+    margin-top: -$gird-border-width;
+  }
+}
+
+// 网格表单样式
+.#{$prefix-name}-grid-form {
+  .ant-form-item {
+    margin-bottom: 0;
+    height: 100%;
+    .ant-form-item-label {
+      border-right: $gird-border-width solid $grid-border-color;
+    }
+    .ant-input,
+    .ant-select-selector {
+      border: 0;
+      border-radius: 0;
+
+      &:focus {
+        box-shadow: 0 0 0 $grid-input-border-width
+          $grid-input-focus-border-color;
+      }
+    }
+    .ant-input[disabled] {
+      color: #525252;
+    }
+  }
+  .ant-form-item-has-error {
+    .ant-input {
+      &::placeholder {
+        //color: red;
+      }
+    }
+    .ant-form-item-explain {
+      display: none;
+    }
+  }
+  .ant-select-focused:not(.ant-select-disabled).ant-select:not(
+      .ant-select-customize-input
+    )
+    .ant-select-selector {
+    box-shadow: 0 0 0 $grid-input-border-width $grid-input-focus-border-color;
+  }
+  .ant-form-item-has-error
+    :not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus {
+    box-shadow: 0 0 0px $grid-input-border-width red;
+    border-radius: 0;
+  }
+  .ant-form-item-has-error
+    :not(.ant-input-disabled):not(.ant-input-borderless).ant-input {
+    box-shadow: 0 0 0px $grid-input-border-width $grid-input-error-border-color;
+  }
+}

package/src/components/index.scss

@@ -0,0 +1,15 @@
+@import "./theme/variable";
+@import "./grid/style";
+@import "./menu/style";
+
+html,
+body,
+#app {
+  height: 100vh;
+  background: $bg-color;
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    display: none;
+  }
+}
+