@opendesign-plus/components 0.0.1-rc.21 → 0.0.1-rc.23

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -165,8 +165,8 @@ const computedList = computed<any[]>(() => {
             <div class="meet-title" :title="item.topic || item.name">
               <OIcon
                 :style="{
-              backgroundColor: `${getConfig(item.type, 'color')}`
-            }"
+                  backgroundColor: `${getConfig(item.type, 'color')}`
+                }"
               >
                 <component :is="getConfig(item.type, 'icon')" />
               </OIcon>
@@ -251,13 +251,13 @@ const computedList = computed<any[]>(() => {
   .o-collapse {
     --icon-size2: 24px;
     --icon-right: 12px;
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       --icon-size2: 20px;
     }
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       --icon-right: 8px;
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       --icon-right: 4px;
     }
 
@@ -285,7 +285,7 @@ const computedList = computed<any[]>(() => {
           color: var(--o-color-primary1);
         }
       }
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         &::after {
           width: calc(100% - 2 * 16px);
         }
@@ -320,7 +320,7 @@ const computedList = computed<any[]>(() => {
       padding: var(--o-gap-4) var(--o-gap-5);
       position: relative;
 
-      @include respond-to('>pad_v') {
+      @include respond('>pad_v') {
         &:hover {
           .o-collapse-item-title {
             .copy-icon {
@@ -330,7 +330,7 @@ const computedList = computed<any[]>(() => {
           }
         }
       }
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         padding: 12px 16px;
       }
 
@@ -389,14 +389,14 @@ const computedList = computed<any[]>(() => {
         flex-direction: column;
         background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
         padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5) - 12px);
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-card-radius);
         @include tip1;
 
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px - 12px);
 
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           padding: 12px 16px;
         }
 
@@ -446,7 +446,7 @@ const computedList = computed<any[]>(() => {
       color: var(--o-color-info2);
       @include text2;
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         @include h3;
       }
 

package/src/components/meeting/components/OMeetingCalendarSelector.vue

@@ -173,7 +173,7 @@ const removeTag = (val: number) => {
       justify-content: center;
       background-color: var(--o-color-fill2);
       color: var(--o-color-info1);
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--meeting-cell-radius);
 
       &:hover,
       &.is-checked {

package/src/components/meeting/components/OMeetingDetail.vue

@@ -156,7 +156,7 @@ defineExpose({ copyInfo });
     font-size: 14px;
     gap: var(--o-gap-5);
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       font-size: 12px;
       gap: var(--o-gap-2);
     }
@@ -233,7 +233,7 @@ defineExpose({ copyInfo });
     justify-content: flex-end;
     gap: var(--o-gap-2);
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       border-top: 1px solid var(--o-color-control4);
       padding-top: var(--o-gap-2);
       position: static;

package/src/components/meeting/components/OMeetingPlaybackSubtitles.vue

@@ -363,7 +363,7 @@ watch(
   height: 100%;
   min-height: calc(var(--layout-content-min-height) - 104px);
   background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
+  border-radius: var(--meeting-card-radius);
 
   .search-captions {
     display: flex;
@@ -371,8 +371,8 @@ watch(
     gap: var(--o-gap-4);
 
     .input-captions {
-      --input-radius: var(--o-radius-xs);
-      --_box-radius: var(--o-radius-xs);
+      --input-radius: var(--meeting-input-radius);
+      --_box-radius: var(--meeting-input-radius);
       flex-grow: 1;
 
       .o-icon {
@@ -443,6 +443,7 @@ watch(
   .o-tab {
     margin-top: var(--o-gap-5);
     height: calc(100% - 64px);
+    --tab-nav-justify: flex-start;
 
     .o-tab-navs {
       justify-content: flex-start;
@@ -456,7 +457,7 @@ watch(
       height: calc(100% - var(--o-line_height-text2) - var(--o-gap-4));
       .o-tab-pane {
         height: 100%;
-        padding-top: var(--o-gap-4);
+        padding-top: var(--o-gap-5);
 
         .o-scroller {
           height: 100%;
@@ -475,7 +476,7 @@ watch(
 
   .captions-tab {
     .captions-scroller {
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         max-height: 600px;
       }
     }
@@ -483,7 +484,7 @@ watch(
     .captions-item {
       padding: 4px 8px;
       cursor: pointer;
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--meeting-cell-radius);
       @include hover {
         background-color: rgba(var(--o-blue-6), 0.1);
       }
@@ -500,7 +501,7 @@ watch(
           width: 18px;
           height: 18px;
           border-radius: 50%;
-          background-color: var(--o-color-primary2);
+          background-color: var(--o-color-primary1);
           color: var(--o-color-info1-inverse);
           display: flex;
           justify-content: center;
@@ -509,13 +510,13 @@ watch(
         }
 
         .speaker {
-          color: var(--o-color-info4);
+          color: var(--o-color-info3);
           margin-left: 4px;
           @include tip2;
         }
 
         .start-time {
-          color: var(--o-color-info4);
+          color: var(--o-color-info3);
           margin-left: 16px;
           @include tip2;
         }
@@ -534,7 +535,7 @@ watch(
       .text {
         color: var(--o-color-info2);
         margin-top: 8px;
-        @include tip1;
+        @include text1;
 
         .light-keyword {
           background-color: rgba(var(--o-blue-6), 0.2);

package/src/components/meeting/components/OMeetingPlaybackVideo.vue

@@ -264,7 +264,7 @@ defineExpose({
   min-height: calc(var(--layout-content-min-height) - 104px);
   background-color: var(--o-color-fill2);
   position: relative;
-  border-radius: var(--o-radius-xs);
+  border-radius: var(--meeting-card-radius);
   overflow: hidden;
 
   .video-placeholder {
@@ -443,7 +443,7 @@ defineExpose({
           width: calc(100% + 5em);
           max-height: 22em;
           padding: 8px 16px;
-          border-radius: var(--o-radius-xs);
+          border-radius: var(--meeting-cell-radius);
           margin-left: -2.5em;
           background-color: var(--o-color-info2);
           box-shadow: 0 3px 9px 0 rgba(var(--o-kleinblue-10), 0.08);
@@ -509,7 +509,7 @@ defineExpose({
         input {
           order: 1;
           margin-right: 12px;
-          border-radius: 4px;
+          border-radius: var(--meeting-input-radius);
           cursor: inherit;
           position: relative;
           top: -1px;
@@ -598,7 +598,7 @@ defineExpose({
     }
 
     .vjs-volume-control {
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--meeting-cell-radius);
       background-color: var(--o-color-info2);
       box-shadow: 0 3px 9px 0 rgba(var(--o-kleinblue-10), 0.08);
       backdrop-filter: blur(13.59);
@@ -647,17 +647,17 @@ defineExpose({
       left: 0;
 
       div {
-        border-radius: 4px;
+        border-radius: var(--meeting-cell-radius);
       }
 
       .vjs-progress-holder {
         margin: 0;
-        background: rgba(var(--o-mixedgray-1), 0.3);
+        background: rgba(var(--o-grey-1), 0.3);
       }
 
       .vjs-load-progress {
         div {
-          background: rgba(var(--o-mixedgray-1), 0.5);
+          background: rgba(var(--o-grey-1), 0.5);
         }
       }
 
@@ -692,7 +692,7 @@ defineExpose({
         width: fit-content !important;
         color: var(--o-color-info1-inverse) !important;
         background-color: rgba(0, 0, 0, 0.4) !important;
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-cell-radius);
         display: block !important;
         padding: var(--o-gap-1) var(--o-gap-4);
         @include tip1;
@@ -724,7 +724,7 @@ defineExpose({
     background-repeat: no-repeat;
     background-size: cover;
     border: 0.5px solid rgba(var(--o-white), 0.6);
-    background-color: rgba(var(--o-mixedgray-1), 0.2);
+    background-color: rgba(var(--o-grey-1), 0.2);
 
     .vjs-icon-placeholder::before {
       content: none;
@@ -733,8 +733,8 @@ defineExpose({
 
   @include hover {
     .vjs-big-play-button {
-      border: 0.5px solid rgba(var(--o-mixedgray-1), 0.6);
-      background-color: rgba(var(--o-mixedgray-1), 0.2);
+      border: 0.5px solid rgba(var(--o-grey-1), 0.6);
+      background-color: rgba(var(--o-grey-1), 0.2);
     }
   }
 }

package/src/components/meeting/components/{OSigMeetingAside.vue → OMeetingSigAside.vue}

@@ -84,17 +84,17 @@ const changeMonth = (step: number) => {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--o-color-control4);
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     padding: var(--o-gap-4);
     border-right: none;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px;
     .title {
       margin-bottom: var(--o-gap-2);
     }
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     width: 100%;
   }
 
@@ -112,13 +112,13 @@ const changeMonth = (step: number) => {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: flex;
       }
 
       .day-item {
         height: 64px;
-        border-radius: 4px;
+        border-radius: var(--meeting-cell-radius);
         background-color: var(--o-color-control2-light);
         padding: 8px 12px;
         cursor: pointer;
@@ -185,11 +185,11 @@ const changeMonth = (step: number) => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     .day-item {
     }
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     .day-item {
       width: min(128px, calc((100% - var(--o-gap-2)) / 2));
     }

package/src/components/meeting/config.ts

@@ -7,7 +7,7 @@ import IconSummit from '~icons/meeting/icon-summit.svg';
 export const TYPE_COLOR_MAP = {
   summit: 'rgba(var(--o-orange-6))',
   events: 'rgba(var(--o-cyan-6))',
-  meeting: 'rgba(var(--o-deep-blue-6))',
+  meeting: 'rgba(var(--o-deepblue-6))',
 };
 
 export const INTERVAL_DAY = 0;

package/src/components/meeting/index.ts

@@ -2,8 +2,8 @@ import type { App } from 'vue';
 import _OMeetingCalendar from './OMeetingCalendar.vue';
 import _OMeetingForm from './OMeetingForm.vue';
 import _OMeetingPlayback from './OMeetingPlayback.vue';
-import _OSigMeetingCalendar from './OSigMeetingCalendar.vue';
-import _OMyMeetingCalendar from './OMyMeetingCalendar.vue';
+import _OMeetingSigCalendar from './OMeetingSigCalendar.vue';
+import _OMeetingMyCalendar from './OMeetingMyCalendar.vue';
 
 const OMeetingCalendar = Object.assign(_OMeetingCalendar, {
   install(app: App) {
@@ -22,15 +22,15 @@ const OMeetingPlayback = Object.assign(_OMeetingPlayback, {
   },
 });
 
-const OSigMeetingCalendar = Object.assign(_OSigMeetingCalendar, {
+const OSigMeetingCalendar = Object.assign(_OMeetingSigCalendar, {
   install(app: App) {
-    app.component('OSigMeetingCalendar', _OSigMeetingCalendar);
+    app.component('OSigMeetingCalendar', _OMeetingMyCalendar);
   },
 });
 
-const OMyMeetingCalendar = Object.assign(_OMyMeetingCalendar, {
+const OMyMeetingCalendar = Object.assign(_OMeetingSigCalendar, {
   install(app: App) {
-    app.component('OMyMeetingCalendar', _OMyMeetingCalendar);
+    app.component('OMyMeetingCalendar', _OMeetingMyCalendar);
   },
 });
 

package/src/draft/Banner.vue

@@ -128,7 +128,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     height: 180px;
 
     .banner-title {
@@ -141,7 +141,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: none;
   }
 }
@@ -176,7 +176,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     height: 220px;
 
     .banner-title {
@@ -189,7 +189,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     height: 120px;
 
     .banner-title {
@@ -234,7 +234,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     height: 320px;
 
     .banner-title {
@@ -247,7 +247,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     height: 184px;
 
     .banner-title {

package/src/draft/ButtonCards.vue

@@ -96,7 +96,7 @@ const getAction = (action: OperationAction) => {
     margin-left: var(--grid-column-gutter);
   }
 
-  @include respond-to("phone") {
+  @include respond("phone") {
     --card-header-text-size: 16px;
     --card-header-text-height: 24px;
     --card-content-text-size: 14px;

package/src/draft/Feature.vue

@@ -37,7 +37,7 @@ const props = defineProps<{
     row-gap: var(--o3-gap-7);
     border-radius: var(--o3-radius-l);
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         gap: 0;
         display: flex;
         white-space: nowrap;
@@ -62,7 +62,7 @@ const props = defineProps<{
         background-color: rgba(0, 0, 0, 0.1);
         width: 1px;
 
-        @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
             top: 16px;
             height: 36px;
         }
@@ -79,13 +79,13 @@ const props = defineProps<{
         .feature-content {
             max-width: 288px;
 
-            @include respond-to('<=laptop') {
+          @include respond('<=laptop') {
                 max-width: 252px;
             }
         }
     }
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         &::after {
             display: none;
         }
@@ -98,7 +98,7 @@ const props = defineProps<{
     display: inline-block;
     max-width: 320px;
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         flex: 0 0 auto;
         width: 25vw;
         padding: 0 24px;
@@ -117,7 +117,7 @@ const props = defineProps<{
     margin-bottom: var(--o3-gap-2);
     color: var(--o-color-info1);
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         white-space: pre-wrap;
 
         @include tip2;

package/src/draft/Footer.vue

@@ -176,7 +176,7 @@ $color: #fff;
     .atom-logo {
       height: 32px;
       margin-top: 12px;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin-top: 16px;
         height: 30px;
       }
@@ -186,7 +186,7 @@ $color: #fff;
   .footer-content {
     @include tip1;
     background: url('@/assets/category/footer/footer-bg.png') no-repeat bottom center;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       background: url('@/assets/category/footer/footer-bg-mo.png') no-repeat bottom center;
     }
     .quick-nav {
@@ -194,7 +194,7 @@ $color: #fff;
       display: flex;
       justify-content: space-between;
       max-width: 1140px;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: none;
       }
       .category {
@@ -229,7 +229,7 @@ $color: #fff;
       @include tip2;
       //TODO: 颜色变量
       border-bottom: 1px solid rgba(229, 229, 229, 0.12);
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         flex-direction: column;
         padding-bottom: 16px;
         .friendship-link-box {
@@ -239,7 +239,7 @@ $color: #fff;
       .friendship-link-title {
         color: var(--o-color-white);
         margin-right: 38px;
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           margin-right: 24px;
           min-width: 48px;
         }
@@ -248,7 +248,7 @@ $color: #fff;
         white-space: nowrap;
         &:not(:last-of-type) {
           margin-right: 24px;
-          @include respond-to('<=pad') {
+          @include respond('<=pad') {
             margin-right: 12px;
           }
         }
@@ -264,7 +264,7 @@ $color: #fff;
       justify-content: space-between;
       padding: 8px 0 32px;
       position: relative;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin: 0 auto;
         padding: 12px 0 24px;
         flex-direction: column;
@@ -284,7 +284,8 @@ $color: #fff;
     .show-mo {
       display: none;
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       text-align: center;
       margin: 16px 0;
       .show-pc {
@@ -306,11 +307,11 @@ $color: #fff;
     display: flex;
     gap: var(--o-gap-2);
 
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       flex-direction: column;
       gap: 6px;
     }
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       margin-top: 4px;
       gap: 4px;
     }
@@ -338,7 +339,8 @@ $color: #fff;
     span {
       color: rgba(255, 255, 255, 0.6);
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       margin-top: 4px;
     }
   }
@@ -353,7 +355,8 @@ $color: #fff;
     .footer-option-item {
       align-items: center;
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       order: -1;
     }
   }
@@ -400,7 +403,8 @@ $color: #fff;
             transform: translateX(-50%);
             display: block;
           }
-          @include respond-to('<=pad_v') {
+
+          @include respond('<=pad_v') {
             display: block;
             position: initial;
             background: none;
@@ -419,17 +423,18 @@ $color: #fff;
             display: block;
           }
         }
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           height: 18px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           height: auto;
           > img {
             display: none;
           }
         }
       }
-      @include respond-to('<=pad_v') {
+
+      @include respond('<=pad_v') {
         justify-content: space-between;
       }
     }
@@ -446,11 +451,11 @@ $color: #fff;
         padding: 0 14px;
         background-color: #2b2b2f;
         border-radius: var(--o-radius-xs);
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           height: 26px;
           padding: 0 8px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           height: 26px;
           padding: 0 8px;
         }
@@ -458,10 +463,11 @@ $color: #fff;
           object-fit: cover;
         }
       }
-      @include respond-to('pad_h') {
+
+      @include respond('pad_h') {
         margin-left: 32px;
       }
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         justify-content: center;
         display: flex;
         text-align: center;
@@ -474,7 +480,8 @@ $color: #fff;
           padding: 0 9px;
           height: 20px;
         }
-        @include respond-to('<=pad') {
+
+        @include respond('<=pad') {
           display: flex;
           flex-wrap: wrap;
           text-align: center;
@@ -497,7 +504,7 @@ $color: #fff;
   .footer {
     .footer-content {
       .inner {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           margin: 0 auto;
           max-width: fit-content;
           padding: 14px 0 24px;