vue-element-ui-x 0.1.0

package/src/components/Prompts/index.js

@@ -0,0 +1,8 @@
+import ElXPrompts from './src/main.vue';
+
+/* istanbul ignore next */
+ElXPrompts.install = function (Vue) {
+  Vue.component(ElXPrompts.name, ElXPrompts);
+};
+
+export default ElXPrompts;

package/src/components/Prompts/src/main.vue

@@ -0,0 +1,248 @@
+<template>
+  <div
+    :class="['el-x-prompts', { 'el-x-prompts-rtl': direction === 'rtl' }, rootClassName]"
+    :style="customStyle"
+  >
+    <!-- 标题 -->
+    <h5
+      v-if="title"
+      class="el-x-prompts-title"
+      :class="[classNames.title]"
+      :style="titleStyle"
+    >
+      {{ title }}
+    </h5>
+
+    <!-- 提示列表 -->
+    <div
+      :class="[
+        'el-x-prompts-list',
+        {
+          'el-x-prompts-list-wrap': wrap,
+          'el-x-prompts-list-vertical': vertical,
+        },
+        classNames.list,
+      ]"
+      :style="listStyle"
+    >
+      <div
+        v-for="(info, index) in items"
+        :key="info.key || `key_${index}`"
+        :class="[
+          'el-x-prompts-item',
+          {
+            'el-x-prompts-item-disabled': info.disabled,
+            'el-x-prompts-item-has-nest': hasChildren(info),
+          },
+          classNames.item,
+        ]"
+        :style="itemStyle"
+        @click="handleItemClick(info)"
+      >
+        <!-- 图标 -->
+        <div
+          v-if="info.icon"
+          class="el-x-prompts-icon"
+        >
+          <slot
+            name="icon"
+            :item="info"
+          >
+            <i :class="info.icon"></i>
+          </slot>
+        </div>
+
+        <!-- 内容 -->
+        <div
+          :class="['el-x-prompts-content', classNames.itemContent]"
+          :style="itemContentStyle"
+        >
+          <!-- 标签 -->
+          <h6
+            v-if="info.label"
+            class="el-x-prompts-label"
+          >
+            <slot
+              name="label"
+              :item="info"
+              >{{ info.label }}</slot
+            >
+          </h6>
+
+          <!-- 描述 -->
+          <p
+            v-if="info.description"
+            class="el-x-prompts-desc"
+          >
+            <slot
+              name="description"
+              :item="info"
+              >{{ info.description }}</slot
+            >
+          </p>
+
+          <!-- 子项 -->
+          <component
+            :is="$options.name"
+            v-if="hasChildren(info)"
+            class="el-x-prompts-nested"
+            :items="info.children"
+            :vertical="true"
+            @on-item-click="$emit('on-item-click', $event)"
+            :class-names="{
+              list: classNames.subList,
+              item: classNames.subItem,
+            }"
+            :styles="{
+              list: styles.subList,
+              item: styles.subItem,
+            }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ElXPrompts',
+
+    props: {
+      /**
+       * 包含多个提示项的列表
+       */
+      items: {
+        type: Array,
+        default: () => [],
+      },
+
+      /**
+       * 显示在提示列表顶部的标题
+       */
+      title: {
+        type: String,
+        default: '',
+      },
+
+      /**
+       * Item 提示项被点击时的回调函数
+       */
+      onItemClick: {
+        type: Function,
+        default: null,
+      },
+
+      /**
+       * 提示列表是否垂直排列
+       */
+      vertical: {
+        type: Boolean,
+        default: false,
+      },
+
+      /**
+       * 提示列表是否换行
+       */
+      wrap: {
+        type: Boolean,
+        default: false,
+      },
+
+      /**
+       * 自定义样式，用于各个提示项的不同部分
+       */
+      styles: {
+        type: Object,
+        default: () => ({}),
+      },
+
+      /**
+       * 自定义样式类名，用于各个提示项的不同部分
+       */
+      classNames: {
+        type: Object,
+        default: () => ({}),
+      },
+
+      /**
+       * 根节点的样式类名
+       */
+      rootClassName: {
+        type: String,
+        default: '',
+      },
+
+      /**
+       * 自定义样式
+       */
+      customStyle: {
+        type: Object,
+        default: () => ({}),
+      },
+
+      /**
+       * 方向
+       */
+      direction: {
+        type: String,
+        default: 'ltr',
+      },
+    },
+
+    computed: {
+      titleStyle() {
+        return {
+          ...this.styles.title,
+        };
+      },
+
+      listStyle() {
+        return {
+          ...this.styles.list,
+        };
+      },
+
+      itemStyle() {
+        return {
+          ...this.styles.item,
+        };
+      },
+
+      itemContentStyle() {
+        return {
+          ...this.styles.itemContent,
+        };
+      },
+    },
+
+    methods: {
+      hasChildren(item) {
+        return item.children && item.children.length > 0;
+      },
+
+      handleItemClick(info) {
+        if (info.disabled) {
+          return;
+        }
+        // 如果有子项，不触发点击事件
+        if (this.hasChildren(info)) {
+          return;
+        }
+        this.$emit('on-item-click', {
+          data: info,
+        });
+        // 向后兼容性
+        if (this.onItemClick) {
+          this.onItemClick({
+            data: info,
+          });
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import '../../../styles/Prompts.scss';
+</style>

package/src/components/Sender/index.js

@@ -0,0 +1,8 @@
+import ElXSender from './src/main.vue';
+
+/* istanbul ignore next */
+ElXSender.install = function (Vue) {
+  Vue.component(ElXSender.name, ElXSender);
+};
+
+export default ElXSender;

package/src/components/Sender/src/components/ClearButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      @click="$emit('clear')"
+      size="small"
+    >
+      <i class="el-icon-brush"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ClearButton',
+  };
+</script>
+
+<style scoped lang="scss">
+  .el-x-send-button {
+    .el-button {
+      .el-icon-brush {
+        // 旋转180
+        transform: rotate(180deg);
+      }
+    }
+  }
+</style>

package/src/components/Sender/src/components/Loading.vue

@@ -0,0 +1,53 @@
+<template>
+  <svg
+    viewBox="0 0 1000 1000"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Loading</title>
+    <rect
+      fill="currentColor"
+      height="250"
+      rx="24"
+      ry="24"
+      width="250"
+      x="375"
+      y="375"
+    />
+    <circle
+      cx="500"
+      cy="500"
+      fill="none"
+      r="450"
+      stroke="currentColor"
+      stroke-width="100"
+      opacity="0.45"
+    />
+    <circle
+      cx="500"
+      cy="500"
+      fill="none"
+      r="450"
+      stroke="currentColor"
+      stroke-width="100"
+      stroke-dasharray="600 9999999"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="1s"
+        from="0 500 500"
+        repeatCount="indefinite"
+        to="360 500 500"
+        type="rotate"
+      />
+    </circle>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'Loading',
+  };
+</script>
+
+<style scoped></style>

package/src/components/Sender/src/components/LoadingButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      @click="$emit('cancel')"
+      size="small"
+    >
+      <loading class="loading-svg" />
+    </el-button>
+  </div>
+</template>
+
+<script>
+  import Loading from './Loading.vue';
+
+  export default {
+    name: 'LoadingButton',
+    components: {
+      Loading,
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~element-ui/packages/theme-chalk/src/common/var';
+
+  .el-x-send-button {
+    height: 32px;
+    .el-button {
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+    .loading-svg {
+      color: $--color-primary;
+      width: 100%;
+    }
+  }
+</style>

package/src/components/Sender/src/components/SendButton.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      :disabled="disabled"
+      @click="$emit('submit')"
+      size="small"
+    >
+      <i class="el-icon-top"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SendButton',
+    props: {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Sender/src/components/SpeechButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      size="small"
+      @click="onClick"
+    >
+      <i class="el-icon-microphone"></i>
+    </el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'SpeechButton',
+    methods: {
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Sender/src/components/SpeechLoading.vue

@@ -0,0 +1,87 @@
+<template>
+  <svg
+    :class="className"
+    color="currentColor"
+    :viewBox="`0 0 ${SIZE} ${SIZE}`"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>Speech Recording</title>
+
+    <rect
+      v-for="(item, index) in rects"
+      :key="index"
+      fill="currentColor"
+      :rx="RECT_RADIUS"
+      :ry="RECT_RADIUS"
+      :height="RECT_HEIGHT_MIN"
+      :width="RECT_WIDTH"
+      :x="item.x"
+      :y="item.yMin"
+    >
+      <animate
+        attributeName="height"
+        :values="`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`"
+        keyTimes="0; 0.5; 1"
+        :dur="`${DURATION}s`"
+        :begin="`${(DURATION / COUNT) * index}s`"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        :values="`${item.yMin}; ${item.yMax}; ${item.yMin}`"
+        keyTimes="0; 0.5; 1"
+        :dur="`${DURATION}s`"
+        :begin="`${(DURATION / COUNT) * index}s`"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'SpeechLoading',
+
+    props: {
+      className: {
+        type: String,
+        default: '',
+      },
+    },
+
+    data() {
+      return {
+        // 定义常量
+        SIZE: 1000,
+        COUNT: 4,
+        RECT_WIDTH: 140,
+        RECT_RADIUS: 70, // RECT_WIDTH / 2
+        RECT_HEIGHT_MIN: 250,
+        RECT_HEIGHT_MAX: 500,
+        DURATION: 0.8,
+      };
+    },
+
+    computed: {
+      // 计算矩形的位置和高度范围
+      rects() {
+        const dest = (this.SIZE - this.RECT_WIDTH * this.COUNT) / (this.COUNT - 1);
+        return Array.from({
+          length: this.COUNT,
+        }).map((_, index) => {
+          const x = index * (dest + this.RECT_WIDTH);
+          const yMin = this.SIZE / 2 - this.RECT_HEIGHT_MIN / 2;
+          const yMax = this.SIZE / 2 - this.RECT_HEIGHT_MAX / 2;
+          return {
+            x,
+            yMin,
+            yMax,
+          };
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/Sender/src/components/SpeechLoadingButton.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="el-x-send-button">
+    <el-button
+      circle
+      size="small"
+      @click="onClick"
+    >
+      <speech-loading class="loading-svg" />
+    </el-button>
+  </div>
+</template>
+
+<script>
+  import SpeechLoading from './SpeechLoading.vue';
+
+  export default {
+    name: 'SpeechLoadingButton',
+    components: {
+      SpeechLoading,
+    },
+    methods: {
+      onClick() {
+        this.$emit('click');
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~element-ui/packages/theme-chalk/src/common/var';
+
+  .el-x-send-button {
+    .el-button {
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+    .loading-svg {
+      color: $--color-primary;
+      width: 16px;
+    }
+  }
+</style>