chore: init web project

web/src/less/common/date-picker.less

@@ -0,0 +1,65 @@
+@import "../mixin.less";
+
+.date-picker-wrapper {
+  @apply flex flex-col justify-start items-start p-4;
+
+  > .date-picker-header {
+    @apply flex flex-row justify-center items-center w-full mb-2;
+
+    > .btn-text {
+      @apply w-6 h-6 rounded cursor-pointer select-none flex flex-col justify-center items-center opacity-40 hover:bg-gray-200;
+    }
+
+    > .normal-text {
+      @apply mx-1 leading-6 font-mono;
+    }
+  }
+
+  > .date-picker-day-container {
+    .flex(row, flex-start, flex-start);
+    width: 280px;
+    flex-wrap: wrap;
+
+    > .date-picker-day-header {
+      .flex(row, space-around, center);
+      width: 100%;
+
+      > .day-item {
+        .flex(column, center, center);
+        width: 36px;
+        height: 36px;
+        user-select: none;
+        color: gray;
+        font-size: 13px;
+        margin: 2px 0;
+      }
+    }
+
+    > .day-item {
+      .flex(column, center, center);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      font-size: 14px;
+      user-select: none;
+      cursor: pointer;
+      margin: 2px;
+
+      &:hover {
+        background-color: @bg-whitegray;
+      }
+
+      &.current {
+        background-color: @bg-light-blue;
+        font-size: 16px;
+        color: @text-blue;
+        font-weight: bold;
+      }
+
+      &.null {
+        background-color: unset;
+        cursor: unset;
+      }
+    }
+  }
+}

web/src/less/common/dropdown.less

@@ -0,0 +1,21 @@
+@import "../mixin.less";
+
+.dropdown-wrapper {
+  @apply relative flex flex-col justify-start items-start select-none;
+
+  > .trigger-button {
+    @apply flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 cursor-pointer hover:opacity-80;
+
+    > .icon-img {
+      @apply w-4 h-auto;
+    }
+  }
+
+  > .action-buttons-container {
+    @apply w-28 mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white z-1 border p-1 rounded shadow;
+
+    > button {
+      @apply w-full text-left px-2 text-sm leading-7 rounded hover:bg-gray-100;
+    }
+  }
+}

web/src/less/common/selector.less

@@ -0,0 +1,47 @@
+@import "../mixin.less";
+
+.selector-wrapper {
+  @apply flex flex-col justify-start items-start relative h-8;
+
+  > .current-value-container {
+    @apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
+
+    &:hover,
+    &.active {
+      @apply bg-gray-100;
+    }
+
+    > .value-text {
+      @apply text-sm mr-0 truncate;
+      width: calc(100% - 20px);
+    }
+
+    > .arrow-text {
+      @apply flex flex-row justify-center items-center w-4 shrink-0;
+
+      > .icon-img {
+        @apply w-4 h-auto opacity-40;
+      }
+    }
+  }
+
+  > .items-wrapper {
+    @apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1;
+    min-width: calc(100% + 16px);
+    max-height: 256px;
+    box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
+    .hide-scroll-bar();
+
+    > .item-container {
+      @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
+
+      &.selected {
+        color: @text-green;
+      }
+    }
+
+    > .tip-text {
+      @apply px-3 py-1 text-sm text-gray-600;
+    }
+  }
+}