chore: init web project

web/src/less/auth.less

@@ -0,0 +1,103 @@
+.page-wrapper.auth {
+  @apply flex flex-row justify-center items-center w-full h-screen bg-white;
+
+  > .page-container {
+    @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;
+
+    > .auth-form-wrapper {
+      @apply w-full py-4 grow flex flex-col justify-center items-center;
+
+      > .page-header-container {
+        @apply flex flex-col justify-start items-start w-full mb-4;
+
+        > .title-container {
+          @apply w-full flex flex-row justify-between items-center;
+
+          > .logo-img {
+            @apply h-20 w-auto;
+          }
+        }
+
+        > .slogan-text {
+          @apply text-sm text-gray-700;
+        }
+      }
+
+      > .page-content-container {
+        @apply flex flex-col justify-start items-start w-full;
+
+        > .form-item-container {
+          @apply flex flex-col justify-start items-start relative w-full text-base mt-2;
+
+          > .normal-text {
+            @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
+
+            &.not-null {
+              @apply text-sm top-0 z-10 leading-4 bg-white rounded;
+            }
+          }
+
+          &.input-form-container {
+            @apply py-2;
+
+            > input {
+              @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80;
+            }
+          }
+        }
+
+        &.requesting {
+          @apply opacity-80;
+        }
+      }
+
+      > .action-btns-container {
+        @apply flex flex-row justify-end items-center w-full mt-2;
+
+        > .btn {
+          @apply flex flex-row justify-center items-center px-1 py-2 text-sm rounded hover:opacity-80;
+
+          &.signin-btn {
+            @apply bg-green-600 text-white px-3 shadow;
+          }
+
+          &.requesting {
+            @apply cursor-wait opacity-80;
+          }
+
+          > .img-icon {
+            @apply w-4 h-auto mr-1 animate-spin;
+          }
+        }
+      }
+
+      > .tip-text {
+        @apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;
+
+        &.host-tip {
+          @apply text-blue-600;
+        }
+      }
+    }
+
+    > .footer-container {
+      @apply w-full flex flex-col justify-start items-center;
+
+      > .language-container {
+        @apply mt-2 w-full flex flex-row justify-center items-center text-sm text-gray-400;
+
+        > .locale-item {
+          @apply px-2 cursor-pointer;
+
+          &.active {
+            @apply text-blue-600 font-bold;
+          }
+        }
+
+        > .split-line {
+          @apply font-mono text-gray-400;
+        }
+      }
+    }
+  }
+}

web/src/less/base-dialog.less

@@ -0,0 +1,37 @@
+.dialog-wrapper {
+  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
+
+  &.showup {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  &.showoff {
+    display: none;
+  }
+
+  > .dialog-container {
+    @apply flex flex-col justify-start items-start bg-white p-4 rounded-lg;
+
+    > .dialog-header-container {
+      @apply flex flex-row justify-between items-center w-full mb-4;
+
+      > .title-text {
+        > .icon-text {
+          @apply mr-2 text-base;
+        }
+      }
+
+      .btn {
+        @apply flex flex-col justify-center items-center w-6 h-6 rounded hover:bg-gray-100 hover:shadow;
+      }
+    }
+
+    > .dialog-content-container {
+      @apply flex flex-col justify-start items-start w-full;
+    }
+
+    > .dialog-footer-container {
+      @apply flex flex-row justify-end items-center w-full mt-4;
+    }
+  }
+}

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;
+    }
+  }
+}

web/src/less/header.module.less

@@ -0,0 +1,3 @@
+.header {
+  @apply w-full bg-amber-50;
+}

web/src/less/toast.less

@@ -0,0 +1,25 @@
+.toast-list-container {
+  @apply flex flex-col justify-start items-end fixed top-2 right-4 z-1000 max-h-full;
+
+  > .toast-wrapper {
+    @apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow-lg rounded bg-white mt-6 py-2 px-4;
+    min-width: 6em;
+    left: calc(100% + 32px);
+    transition: all 0.4s ease;
+
+    &.showup {
+      @apply left-0 visible;
+    }
+
+    &.destory {
+      @apply invisible;
+      left: calc(100% + 32px);
+    }
+
+    > .toast-container {
+      > .content-text {
+        @apply text-sm whitespace-pre-wrap break-words leading-6 max-w-xs;
+      }
+    }
+  }
+}