vue-element-ui-x 0.1.5 → 0.1.7-beta

package/src/styles/Sender.scss

@@ -1,199 +1,199 @@
-@import '../theme/var.scss';
-
-// 设置全局CSS变量默认值
-:root {
-  --el-x-sender-trigger-popover-width: fit-content;
-  --el-x-sender-trigger-popover-left: 0px;
-}
-
-$--el-x-sender-box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
-  0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
-$--el-x-sender-input-font-size: 14px;
-$--el-x-sender-header-animation-duration: 300ms;
-$--el-x-border-width: $--border-width-base;
-$--el-x-padding-xs: 8px;
-$--el-x-padding-sm: 12px;
-$--el-x-padding: 16px;
-$--el-x-transition-duration: 0.3s;
-$--el-x-color-primary: $--color-primary;
-$--el-x-color-white: $--color-white;
-$--el-x-box-shadow: $--box-shadow-base;
-$--el-x-border-color: $--border-color-base;
-$--el-x-text-color-primary: $--color-text-primary;
-$--el-x-font-line-height-primary: $--font-line-height-primary;
-$--el-x-fill-color: $--background-color-base;
-
-.el-x-sender {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  position: relative;
-  box-sizing: border-box;
-  box-shadow: $--el-x-sender-box-shadow-tertiary;
-  transition: background $--el-x-transition-duration;
-  border-radius: calc(#{$--border-radius-base} * 2);
-  border-color: $--el-x-border-color;
-  border-width: 0;
-  border-style: solid;
-  transition: width $--el-x-sender-header-animation-duration;
-
-  &:after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    transition: border-color $--el-x-transition-duration;
-    border-radius: inherit;
-    border-style: inherit;
-    border-color: inherit;
-    border-width: $--el-x-border-width;
-  }
-
-  &:focus-within {
-    box-shadow: $--el-x-box-shadow;
-    border-color: $--el-x-color-primary;
-
-    &::after {
-      border-width: 2px;
-    }
-  }
-
-  .el-x-sender-header-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: $--el-x-padding-xs;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  // 展开收起动画
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: height $--el-x-sender-header-animation-duration,
-      opacity $--el-x-sender-header-animation-duration,
-      border $--el-x-sender-header-animation-duration;
-    overflow: hidden;
-  }
-
-  // .slide-enter-from,
-  // .slide-leave-to {
-  //   height: 0;
-  //   opacity: 0;
-  // }
-
-  .slide-enter,
-  .slide-leave-to {
-    height: 0;
-    opacity: 0;
-  }
-
-  .el-x-sender-header {
-    border-bottom-width: $--el-x-border-width;
-    border-bottom-style: solid;
-    border-bottom-color: $--el-x-border-color;
-  }
-
-  .el-x-sender-content {
-    display: flex;
-    gap: $--el-x-padding-xs;
-    width: 100%;
-    padding-block: $--el-x-padding-sm;
-    padding-inline-start: $--el-x-padding;
-    padding-inline-end: $--el-x-padding-sm;
-    box-sizing: border-box;
-    align-items: flex-end;
-
-    // 前缀
-    .el-x-sender-prefix {
-      flex: none;
-    }
-
-    // 输入框
-    .el-x-sender-input {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      align-self: center;
-
-      ::v-deep .el-textarea__inner {
-        padding: 0;
-        margin: 0;
-        color: $--el-x-text-color-primary;
-        font-size: $--el-x-sender-input-font-size;
-        line-height: $--el-x-font-line-height-primary;
-        list-style: none;
-        position: relative;
-        display: inline-block;
-        box-sizing: border-box;
-        width: 100%;
-        min-width: 0;
-        max-width: 100%;
-        height: auto;
-        min-height: auto !important;
-        border-radius: 0;
-        border: none;
-        flex: auto;
-        align-self: center;
-        vertical-align: bottom;
-        resize: none;
-        background-color: transparent;
-        transition: all $--el-x-transition-duration, height 0s;
-        box-shadow: none !important;
-      }
-    }
-
-    // 操作列表
-    .el-x-sender-action-list-presets {
-      display: flex;
-      gap: $--el-x-padding-xs;
-      flex-direction: row-reverse;
-    }
-  }
-
-  // 变体样式 --variant
-  .content-variant-updown {
-    display: flex;
-    flex-direction: column;
-    align-items: initial;
-
-    .el-x-sender-updown-wrap {
-      display: flex;
-      justify-content: space-between;
-      gap: 8px;
-
-      // 前缀
-      .el-x-sender-prefix {
-        flex: initial;
-      }
-
-      .el-x-sender-action-list {
-        margin-left: auto;
-      }
-    }
-  }
-
-  // 底部容器
-  .el-x-sender-footer {
-    border-top-width: $--el-x-border-width;
-    border-top-style: solid;
-    border-top-color: $--el-x-border-color;
-  }
-}
-
-.el-x-sender-disabled {
-  background-color: $--el-x-fill-color;
-  pointer-events: none;
-}
-
-.el-x-sender-trigger-popover {
-  // 设置默认值
-  width: fit-content !important;
-  margin-left: 0px !important;
-  max-width: calc(100% - 54px) !important;
-
-  // 应用自定义变量（如果存在）
-  width: var(--el-x-sender-trigger-popover-width) !important;
-  margin-left: var(--el-x-sender-trigger-popover-left) !important;
-}
+@import '../theme/var.scss';
+
+// 设置全局CSS变量默认值
+:root {
+  --el-x-sender-trigger-popover-width: fit-content;
+  --el-x-sender-trigger-popover-left: 0px;
+}
+
+$--el-x-sender-box-shadow-tertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+  0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
+$--el-x-sender-input-font-size: 14px;
+$--el-x-sender-header-animation-duration: 300ms;
+$--el-x-border-width: $--border-width-base;
+$--el-x-padding-xs: 8px;
+$--el-x-padding-sm: 12px;
+$--el-x-padding: 16px;
+$--el-x-transition-duration: 0.3s;
+$--el-x-color-primary: $--color-primary;
+$--el-x-color-white: $--color-white;
+$--el-x-box-shadow: $--box-shadow-base;
+$--el-x-border-color: $--border-color-base;
+$--el-x-text-color-primary: $--color-text-primary;
+$--el-x-font-line-height-primary: $--font-line-height-primary;
+$--el-x-fill-color: $--background-color-base;
+
+.el-x-sender {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+  box-sizing: border-box;
+  box-shadow: $--el-x-sender-box-shadow-tertiary;
+  transition: background $--el-x-transition-duration;
+  border-radius: calc(#{$--border-radius-base} * 2);
+  border-color: $--el-x-border-color;
+  border-width: 0;
+  border-style: solid;
+  transition: width $--el-x-sender-header-animation-duration;
+
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    transition: border-color $--el-x-transition-duration;
+    border-radius: inherit;
+    border-style: inherit;
+    border-color: inherit;
+    border-width: $--el-x-border-width;
+  }
+
+  &:focus-within {
+    box-shadow: $--el-x-box-shadow;
+    border-color: $--el-x-color-primary;
+
+    &::after {
+      border-width: 2px;
+    }
+  }
+
+  .el-x-sender-header-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: $--el-x-padding-xs;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  // 展开收起动画
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: height $--el-x-sender-header-animation-duration,
+      opacity $--el-x-sender-header-animation-duration,
+      border $--el-x-sender-header-animation-duration;
+    overflow: hidden;
+  }
+
+  // .slide-enter-from,
+  // .slide-leave-to {
+  //   height: 0;
+  //   opacity: 0;
+  // }
+
+  .slide-enter,
+  .slide-leave-to {
+    height: 0;
+    opacity: 0;
+  }
+
+  .el-x-sender-header {
+    border-bottom-width: $--el-x-border-width;
+    border-bottom-style: solid;
+    border-bottom-color: $--el-x-border-color;
+  }
+
+  .el-x-sender-content {
+    display: flex;
+    gap: $--el-x-padding-xs;
+    width: 100%;
+    padding-block: $--el-x-padding-sm;
+    padding-inline-start: $--el-x-padding;
+    padding-inline-end: $--el-x-padding-sm;
+    box-sizing: border-box;
+    align-items: flex-end;
+
+    // 前缀
+    .el-x-sender-prefix {
+      flex: none;
+    }
+
+    // 输入框
+    .el-x-sender-input {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      align-self: center;
+
+      ::v-deep .el-textarea__inner {
+        padding: 0;
+        margin: 0;
+        color: $--el-x-text-color-primary;
+        font-size: $--el-x-sender-input-font-size;
+        line-height: $--el-x-font-line-height-primary;
+        list-style: none;
+        position: relative;
+        display: inline-block;
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+        height: auto;
+        min-height: auto !important;
+        border-radius: 0;
+        border: none;
+        flex: auto;
+        align-self: center;
+        vertical-align: bottom;
+        resize: none;
+        background-color: transparent;
+        transition: all $--el-x-transition-duration, height 0s;
+        box-shadow: none !important;
+      }
+    }
+
+    // 操作列表
+    .el-x-sender-action-list-presets {
+      display: flex;
+      gap: $--el-x-padding-xs;
+      flex-direction: row-reverse;
+    }
+  }
+
+  // 变体样式 --variant
+  .content-variant-updown {
+    display: flex;
+    flex-direction: column;
+    align-items: initial;
+
+    .el-x-sender-updown-wrap {
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+
+      // 前缀
+      .el-x-sender-prefix {
+        flex: initial;
+      }
+
+      .el-x-sender-action-list {
+        margin-left: auto;
+      }
+    }
+  }
+
+  // 底部容器
+  .el-x-sender-footer {
+    border-top-width: $--el-x-border-width;
+    border-top-style: solid;
+    border-top-color: $--el-x-border-color;
+  }
+}
+
+.el-x-sender-disabled {
+  background-color: $--el-x-fill-color;
+  pointer-events: none;
+}
+
+.el-x-sender-trigger-popover {
+  // 设置默认值
+  width: fit-content !important;
+  margin-left: 0px !important;
+  max-width: calc(100% - 54px) !important;
+
+  // 应用自定义变量（如果存在）
+  width: var(--el-x-sender-trigger-popover-width) !important;
+  margin-left: var(--el-x-sender-trigger-popover-left) !important;
+}

package/src/styles/Think.scss

@@ -1,134 +1,134 @@
-@import '../theme/var.scss';
-
-.el-x-think {
-  font-family: system-ui, sans-serif;
-  margin: 0 auto;
-
-  .trigger {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: var(--el-x-think-button-width);
-    gap: 8px;
-    padding: $--el-x-padding-sm $--el-x-padding-sm + 4px;
-    border: $--el-x-border-width solid $--el-x-border-color;
-    border-radius: $--el-x-border-radius-md;
-    background: $--color-white;
-    cursor: pointer;
-    margin-bottom: $--el-x-spacing-sm;
-
-    /* 居中 */
-    .el-icon-center {
-      height: 100%;
-      display: flex;
-      align-items: center;
-    }
-
-    /* 开始颜色 */
-    .start-color {
-      color: $--color-warning;
-    }
-
-    /* 完成颜色 */
-    .end-color {
-      color: $--color-success;
-    }
-
-    /* 思考中颜色 */
-    .is-loading {
-      color: $--color-primary;
-    }
-
-    /* 思考失败颜色 */
-    .error-color {
-      color: $--color-danger;
-    }
-
-    &:hover {
-      background: #f8f8f8;
-    }
-
-    &.disabled {
-      cursor: pointer;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.7;
-    }
-  }
-
-  .status-icon {
-    font-size: 1.2em;
-  }
-
-  .arrow {
-    margin-left: auto;
-    transition: transform var(--el-x-think-animation-duration);
-
-    &.expanded {
-      transform: rotate(180deg);
-    }
-  }
-
-  /* 滑动动画 */
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: height var(--el-x-think-animation-duration) ease-in-out,
-      opacity var(--el-x-think-animation-duration) ease-in-out;
-    overflow: hidden;
-  }
-
-  .slide-enter,
-  .slide-leave-to {
-    height: 0 !important;
-    opacity: 0;
-  }
-
-  /* 内容区域样式 */
-  .content-wrapper {
-    box-sizing: border-box;
-    min-width: 0;
-
-    &.error-state {
-      border-color: #ffd0d0;
-      background: #fff0f0;
-    }
-  }
-
-  .content {
-    pre {
-      border: $--el-x-border-width solid $--el-x-border-color;
-      background: var(--el-x-think-content-wrapper-background-color);
-      padding: $--el-x-padding-sm $--el-x-padding-sm + 4px;
-      border-radius: $--el-x-border-radius-md;
-      max-width: var(--el-x-think-content-wrapper-width);
-      font-size: $--el-x-font-size-base;
-      color: var(--el-x-think-content-wrapper-color);
-      white-space: pre-wrap;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
-        sans-serif;
-      margin: 0;
-      line-height: $--el-x-font-line-height-primary;
-    }
-  }
-
-  .error-message {
-    color: $--color-danger;
-    height: fit-content;
-    padding: $--el-x-spacing-sm;
-    background: #ffeef0;
-    border-radius: $--el-x-border-radius-base;
-  }
-
-  /* 旋转动画 */
-  .rotate-enter-active,
-  .rotate-leave-active {
-    transition: transform var(--el-x-think-animation-duration);
-  }
-
-  .rotate-enter,
-  .rotate-leave-to {
-    transform: rotate(0deg);
-  }
-}
+@import '../theme/var.scss';
+
+.el-x-think {
+  font-family: system-ui, sans-serif;
+  margin: 0 auto;
+
+  .trigger {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: var(--el-x-think-button-width);
+    gap: 8px;
+    padding: $--el-x-padding-sm $--el-x-padding-sm + 4px;
+    border: $--el-x-border-width solid $--el-x-border-color;
+    border-radius: $--el-x-border-radius-md;
+    background: $--color-white;
+    cursor: pointer;
+    margin-bottom: $--el-x-spacing-sm;
+
+    /* 居中 */
+    .el-icon-center {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    /* 开始颜色 */
+    .start-color {
+      color: $--color-warning;
+    }
+
+    /* 完成颜色 */
+    .end-color {
+      color: $--color-success;
+    }
+
+    /* 思考中颜色 */
+    .is-loading {
+      color: $--color-primary;
+    }
+
+    /* 思考失败颜色 */
+    .error-color {
+      color: $--color-danger;
+    }
+
+    &:hover {
+      background: #f8f8f8;
+    }
+
+    &.disabled {
+      cursor: pointer;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+  }
+
+  .status-icon {
+    font-size: 1.2em;
+  }
+
+  .arrow {
+    margin-left: auto;
+    transition: transform var(--el-x-think-animation-duration);
+
+    &.expanded {
+      transform: rotate(180deg);
+    }
+  }
+
+  /* 滑动动画 */
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: height var(--el-x-think-animation-duration) ease-in-out,
+      opacity var(--el-x-think-animation-duration) ease-in-out;
+    overflow: hidden;
+  }
+
+  .slide-enter,
+  .slide-leave-to {
+    height: 0 !important;
+    opacity: 0;
+  }
+
+  /* 内容区域样式 */
+  .content-wrapper {
+    box-sizing: border-box;
+    min-width: 0;
+
+    &.error-state {
+      border-color: #ffd0d0;
+      background: #fff0f0;
+    }
+  }
+
+  .content {
+    pre {
+      border: $--el-x-border-width solid $--el-x-border-color;
+      background: var(--el-x-think-content-wrapper-background-color);
+      padding: $--el-x-padding-sm $--el-x-padding-sm + 4px;
+      border-radius: $--el-x-border-radius-md;
+      max-width: var(--el-x-think-content-wrapper-width);
+      font-size: $--el-x-font-size-base;
+      color: var(--el-x-think-content-wrapper-color);
+      white-space: pre-wrap;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
+        sans-serif;
+      margin: 0;
+      line-height: $--el-x-font-line-height-primary;
+    }
+  }
+
+  .error-message {
+    color: $--color-danger;
+    height: fit-content;
+    padding: $--el-x-spacing-sm;
+    background: #ffeef0;
+    border-radius: $--el-x-border-radius-base;
+  }
+
+  /* 旋转动画 */
+  .rotate-enter-active,
+  .rotate-leave-active {
+    transition: transform var(--el-x-think-animation-duration);
+  }
+
+  .rotate-enter,
+  .rotate-leave-to {
+    transform: rotate(0deg);
+  }
+}