@10yun/cv-mobile-ui 0.5.44 → 0.5.45

package/uview-plus/components/u-color-picker/u-color-picker.vue

@@ -0,0 +1,702 @@
+<template>
+  <view class="up-color-picker">
+    <view clas="up-color-picker__trigger" @click="show = true" :style="{ backgroundColor: value }">
+      <slot></slot>
+    </view>
+    <up-popup :show="show" mode="bottom" round="10" @close="close" :closeOnClickOverlay="true">
+      <view class="up-color-picker__content">
+        <view class="up-color-picker__header">
+          <text class="up-color-picker__title">选择颜色</text>
+        </view>
+        <!-- 纯色/渐变色切换 -->
+        <view class="up-color-picker__switch">
+          <up-subsection
+            :list="[{ name: '纯色' }, { name: '渐变' }]"
+            :current="colorTypeIndex"
+            @change="changeColorType"
+            fontSize="14"
+          ></up-subsection>
+        </view>
+        <!-- 渐变色选择器 -->
+        <view v-if="colorTypeIndex == 1" class="up-color-picker__gradient">
+          <!-- 渐变色控制条 -->
+          <view class="up-color-picker__gradient-track" :style="{ background: gradientStyle }">
+            <view
+              class="up-color-picker__gradient-pointer"
+              v-for="(item, index) in gradientColors"
+              :key="index"
+              :style="{ left: getGradientPointerPosition(index) + 'px' }"
+              @click="openColorPickerForGradient(index)"
+              @touchstart="onPointerTouchStart($event, index)"
+              @touchmove.stop="onPointerTouchMove"
+              @touchend.stop="onPointerTouchEnd"
+            >
+              <view class="up-color-picker__gradient-pointer-inner" :style="{ backgroundColor: item.color }"></view>
+            </view>
+          </view>
+          <view class="up-color-picker__gradient-controls">
+            <up-button type="primary" size="mini" plain @click="addGradientColor" class="up-color-picker__add-btn">
+              添加颜色
+            </up-button>
+          </view>
+          <!-- 圆形方向选择器 -->
+          <view class="up-color-picker__gradient-direction">
+            <text>方向:</text>
+            <view
+              class="up-color-picker__gradient__direction-circle"
+              @touchstart="onDirectionTouchStart"
+              @touchmove="onDirectionTouchMove"
+              @touchend="onDirectionTouchEnd"
+            >
+              <view
+                class="up-color-picker__direction-pointer"
+                :style="{
+                  left: directionPointer.x + 'px',
+                  top: directionPointer.y + 'px'
+                }"
+              ></view>
+            </view>
+          </view>
+        </view>
+        <!-- 纯色选择器 -->
+        <view class="up-color-picker__solid">
+          <!-- 饱和度和明度选择区域 -->
+          <view
+            class="up-color-picker__saturation"
+            :style="{ backgroundColor: `hsl(${hue}, 100%, 50%)` }"
+            @touchstart="onSaturationTouchStart"
+            @touchmove="onSaturationTouchMove"
+            @touchend="onSaturationTouchEnd"
+          >
+            <view
+              class="up-color-picker__saturation-pointer"
+              :style="{
+                left: saturationPosition.x + 'px',
+                top: saturationPosition.y + 'px'
+              }"
+            ></view>
+          </view>
+          <!-- 色相选择 -->
+          <view class="up-color-picker__hue" @touchstart="onHueTouchStart" @touchmove="onHueTouchMove" @touchend="onHueTouchEnd">
+            <view class="up-color-picker__hue-pointer" :style="{ left: huePosition + 'px' }"></view>
+          </view>
+          <!-- 透明度选择 -->
+          <view
+            v-if="colorTypeIndex == 0"
+            class="up-color-picker__alpha"
+            @touchstart="onAlphaTouchStart"
+            @touchmove="onAlphaTouchMove"
+            @touchend="onAlphaTouchEnd"
+          >
+            <view class="up-color-picker__alpha-bg"></view>
+            <view class="up-color-picker__alpha-pointer" :style="{ left: alphaPosition + 'px' }"></view>
+          </view>
+        </view>
+        <!-- 常用颜色 -->
+        <view v-if="commonColors && commonColors.length" class="up-color-picker__common">
+          <text class="up-color-picker__common-title">常用颜色</text>
+          <view class="up-color-picker__common-list">
+            <view
+              v-for="(color, index) in commonColors"
+              :key="index"
+              class="up-color-picker__common-item"
+              :style="{ backgroundColor: color }"
+              @click="selectCommonColor(color)"
+            ></view>
+          </view>
+        </view>
+        <!-- 颜色预览和操作按钮 -->
+        <view class="up-color-picker__footer">
+          <view class="up-color-picker__preview">
+            <view class="up-color-picker__preview-color" :style="{ backgroundColor: displayColor }"></view>
+            <text class="up-color-picker__preview-text">{{ displayColor }}</text>
+          </view>
+          <view class="up-color-picker__actions">
+            <up-button type="primary" size="small" @click="confirm" class="up-color-picker__btn">确定</up-button>
+            <up-button type="info" size="small" @click="close" class="up-color-picker__btn">取消</up-button>
+          </view>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+<script>
+export default {
+  name: 'up-color-picker',
+  props: {
+    // 初始颜色值
+    modelValue: {
+      type: String,
+      default: '#ff0000'
+    },
+    // 常用颜色列表
+    commonColors: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      show: false,
+      // 颜色类型索引：0-纯色，1-渐变色
+      colorTypeIndex: 0,
+      // 纯色相关数据
+      hue: 0,
+      saturation: 100,
+      lightness: 50,
+      alpha: 1,
+      saturationPosition: { x: 150, y: 0 },
+      huePosition: 0,
+      alphaPosition: 0, // 将在initColor中设置为最右侧
+      // 渐变色相关数据
+      gradientColors: [
+        { color: '#ff0000', percent: 0 },
+        { color: '#0000ff', percent: 1 }
+      ],
+      gradientDirections: [
+        { label: '从左到右', value: 'to right' },
+        { label: '从上到下', value: 'to bottom' },
+        { label: '从左上到右下', value: 'to bottom right' },
+        { label: '从右上到左下', value: 'to bottom left' }
+      ],
+      currentDirection: { label: '从左到右', value: 'to right' },
+      showDirectionPicker: false,
+      // 当前选中颜色
+      currentColor: '#ff0000',
+      // 渐变色控制相关
+      draggingPointerIndex: -1,
+      directionPointer: { x: 20, y: 20 }, // 默认向右(在圆的右侧)
+      // 渐变节点颜色修改相关
+      editingGradientIndex: -1,
+      // 保存纯色和渐变色的各自状态
+      solidColorState: {
+        hue: 0,
+        saturation: 100,
+        lightness: 50,
+        alpha: 1,
+        saturationPosition: { x: 150, y: 0 },
+        huePosition: 0,
+        alphaPosition: 0, // 将在initColor中设置为最右侧
+        currentColor: '#ff0000'
+      },
+      gradientColorState: {
+        gradientColors: [
+          { color: '#ff0000', percent: 0 },
+          { color: '#0000ff', percent: 1 }
+        ],
+        currentDirection: { label: '从左到右', value: 'to right' },
+        directionPointer: { x: 100, y: 0 }
+      },
+      // 区分预览类型：solid-纯色预览，gradient-整体渐变预览，gradient-point-渐变点预览
+      previewType: 'solid'
+    };
+  },
+  computed: {
+    // 渐变色样式
+    gradientStyle() {
+      const colors = this.gradientColors.map((item) => `${item.color} ${Math.round(item.percent * 100)}%`).join(', ');
+      return `linear-gradient(${this.currentDirection.value}, ${colors})`;
+    },
+    // 显示的颜色预览值
+    displayColor() {
+      if (this.previewType === 'gradient-point' && this.editingGradientIndex >= 0) {
+        return this.gradientColors[this.editingGradientIndex].color;
+      }
+      console.log(this.editingGradientIndex);
+      return this.currentColor;
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.initColor();
+      }
+    },
+    colorTypeIndex(newVal) {
+      if (newVal == 0) {
+        this.editingGradientIndex = -1;
+      }
+    }
+  },
+  mounted() {
+    this.initColor();
+  },
+  emits: ['update:modelValue', 'confirm', 'close'],
+  methods: {
+    // 初始化颜色
+    initColor() {
+      if (this.modelValue) {
+        this.currentColor = this.modelValue;
+        if (this.modelValue.includes('linear-gradient')) {
+          // 解析渐变色
+          this.colorTypeIndex = 1;
+          this.parseGradientColor(this.modelValue);
+          this.previewType = 'gradient';
+        } else {
+          // 解析纯色
+          this.colorTypeIndex = 0;
+          this.parseSolidColor(this.modelValue);
+          this.previewType = 'solid';
+        }
+      }
+      // 初始化方向指针位置
+      this.initDirectionPointer();
+      // 初始化alphaPosition为最右侧
+      this.initAlphaPosition();
+    },
+    // 初始化alpha位置为最右侧
+    async initAlphaPosition() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__alpha').boundingClientRect();
+      await this.$nextTick();
+      query.exec((res) => {
+        const rect = res[0];
+        if (rect) {
+          this.alphaPosition = rect.width || 150; // 默认150像素
+        } else {
+          this.alphaPosition = 150; // 默认值
+        }
+        // 同步solidColorState中的alphaPosition
+        this.solidColorState.alphaPosition = this.alphaPosition;
+        this.updateSolidColor();
+      });
+    },
+    // 初始化方向指针位置
+    initDirectionPointer() {
+      const angle = this.getDirectionAngle(this.currentDirection.value);
+      this.setDirectionPointerByAngle(angle);
+    },
+    // 根据方向值获取角度
+    getDirectionAngle(direction) {
+      switch (direction) {
+        case 'to right':
+          return 0;
+        case 'to bottom':
+          return 90;
+        case 'to left':
+          return 180;
+        case 'to top':
+          return 270;
+        case 'to bottom right':
+          return 45;
+        case 'to bottom left':
+          return 135;
+        case 'to top left':
+          return 225;
+        case 'to top right':
+          return 315;
+        default:
+          return 0;
+      }
+    },
+    // 根据角度设置方向指针位置
+    setDirectionPointerByAngle(angle) {
+      const radian = (angle * Math.PI) / 180;
+      const radius = 20; // 圆半径
+      this.directionPointer = {
+        x: radius * Math.cos(radian) + 20, // 20是圆心位置
+        y: radius * Math.sin(radian) + 20
+      };
+    },
+    // 打开颜色选择器以修改渐变节点颜色
+    openColorPickerForGradient(index) {
+      this.editingGradientIndex = index;
+      // 设置当前颜色为选中节点的颜色
+      const color = this.gradientColors[index].color;
+      this.currentColor = color;
+      // 设置预览类型为渐变点预览
+      this.previewType = 'gradient-point';
+      // 解析颜色并设置选择器位置
+      if (!color.includes('linear-gradient')) {
+        this.colorTypeIndex = 0;
+        this.parseSolidColor(color);
+        // 保存当前渐变状态
+        this.gradientColorState = {
+          gradientColors: [...this.gradientColors],
+          currentDirection: { ...this.currentDirection },
+          directionPointer: { ...this.directionPointer }
+        };
+      }
+    },
+    // 解析纯色
+    parseSolidColor(color) {
+      // 简化处理，实际项目中可以使用更复杂的颜色解析
+      this.currentColor = color;
+      // 如果正在编辑渐变节点，则更新该节点颜色
+      if (this.editingGradientIndex >= 0) {
+        this.gradientColors[this.editingGradientIndex].color = color;
+        // 切换回渐变模式并恢复渐变状态
+        this.colorTypeIndex = 1;
+        Object.assign(this, this.solidColorState);
+        this.previewType = 'gradient-point';
+      } else {
+        this.previewType = 'solid';
+      }
+    },
+    // 解析渐变色
+    parseGradientColor(gradient) {
+      // 简化处理，实际项目中可以使用更复杂的渐变解析
+      this.currentColor = gradient;
+      // this.previewType = 'gradient';
+    },
+    // 切换颜色类型
+    changeColorType(index) {
+      // 保存当前状态
+      if (this.colorTypeIndex === 0) {
+        // 保存纯色状态
+        this.solidColorState = {
+          hue: this.hue,
+          saturation: this.saturation,
+          lightness: this.lightness,
+          alpha: this.alpha,
+          saturationPosition: { ...this.saturationPosition },
+          huePosition: this.huePosition,
+          alphaPosition: this.alphaPosition,
+          currentColor: this.currentColor
+        };
+      } else {
+        // 保存渐变状态
+        this.gradientColorState = {
+          gradientColors: [...this.gradientColors],
+          currentDirection: { ...this.currentDirection },
+          directionPointer: { ...this.directionPointer }
+        };
+      }
+      this.colorTypeIndex = index;
+      // 恢复目标状态
+      if (index === 0) {
+        Object.assign(this, this.solidColorState);
+        this.previewType = 'solid';
+      } else {
+        Object.assign(this, this.gradientColorState);
+        // 确保gradientColors是响应式的
+        this.gradientColors = [...this.gradientColorState.gradientColors];
+        this.previewType = 'gradient';
+      }
+    },
+    // 饱和度和明度触摸开始
+    onSaturationTouchStart(e) {
+      this.updateSaturationPosition(e);
+    },
+    // 饱和度和明度触摸移动
+    onSaturationTouchMove(e) {
+      this.updateSaturationPosition(e);
+    },
+    // 饱和度和明度触摸结束
+    onSaturationTouchEnd(e) {
+      this.updateSaturationPosition(e);
+    },
+    // 更新饱和度和明度位置
+    updateSaturationPosition(e) {
+      const touch = e.touches[0] || e.changedTouches[0];
+      const target = e.currentTarget;
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__saturation').boundingClientRect();
+      query.exec((res) => {
+        const rect = res[0];
+        if (rect) {
+          let x = touch.clientX - rect.left;
+          let y = touch.clientY - rect.top;
+          // 边界处理
+          x = Math.max(0, Math.min(x, rect.width));
+          y = Math.max(0, Math.min(y, rect.height));
+          this.saturationPosition = { x, y };
+          this.updateSolidColor();
+        }
+      });
+    },
+    // 色相触摸开始
+    onHueTouchStart(e) {
+      this.updateHuePosition(e);
+    },
+    // 色相触摸移动
+    onHueTouchMove(e) {
+      this.updateHuePosition(e);
+    },
+    // 色相触摸结束
+    onHueTouchEnd(e) {
+      this.updateHuePosition(e);
+    },
+    // 更新色相位置
+    updateHuePosition(e) {
+      const touch = e.touches[0] || e.changedTouches[0];
+      const target = e.currentTarget;
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__hue').boundingClientRect();
+      query.exec((res) => {
+        const rect = res[0];
+        if (rect) {
+          let x = touch.clientX - rect.left;
+          x = Math.max(0, Math.min(x, rect.width));
+          this.huePosition = x;
+          this.hue = Math.round((x / rect.width) * 360);
+          this.updateSolidColor();
+        }
+      });
+    },
+    // 透明度触摸开始
+    onAlphaTouchStart(e) {
+      this.updateAlphaPosition(e);
+    },
+    // 透明度触摸移动
+    onAlphaTouchMove(e) {
+      this.updateAlphaPosition(e);
+    },
+    // 透明度触摸结束
+    onAlphaTouchEnd(e) {
+      this.updateAlphaPosition(e);
+    },
+    // 更新透明度位置
+    updateAlphaPosition(e) {
+      const touch = e.touches[0] || e.changedTouches[0];
+      const target = e.currentTarget;
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__alpha').boundingClientRect();
+      query.exec((res) => {
+        const rect = res[0];
+        if (rect) {
+          let x = touch.clientX - rect.left;
+          x = Math.max(0, Math.min(x, rect.width));
+          this.alphaPosition = x;
+          this.alpha = x / rect.width;
+          this.updateSolidColor();
+        }
+      });
+    },
+    // 更新纯色
+    updateSolidColor() {
+      // 使用实际元素尺寸替代硬编码的150
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__saturation').boundingClientRect();
+      query.exec((res) => {
+        const rect = res[0];
+        const size = rect ? Math.min(rect.width, rect.height) : 150; // 默认150作为后备值
+        const s = (this.saturationPosition.x / size) * 100;
+        const l = 100 - (this.saturationPosition.y / size) * 100;
+        this.saturation = s;
+        this.lightness = l;
+        // 使用正确的HSL转RGB算法
+        if (this.colorTypeIndex == 0) {
+          this.currentColor = this.hslToRgb(this.hue, this.saturation, this.lightness, this.alpha);
+        } else if (this.colorTypeIndex == 1) {
+          this.gradientColors[this.editingGradientIndex].color = this.hslToRgb(
+            this.hue,
+            this.saturation,
+            this.lightness,
+            this.alpha
+          );
+        }
+      });
+    },
+    // 添加渐变色
+    addGradientColor() {
+      if (this.gradientColors.length < 5) {
+        this.gradientColors.push({
+          color: '#ffffff',
+          percent: 1
+        });
+      }
+    },
+    // 删除渐变色
+    removeGradientColor(index) {
+      if (this.gradientColors.length > 2) {
+        this.gradientColors.splice(index, 1);
+      }
+    },
+    // 获取渐变控制点位置
+    getGradientPointerPosition(index) {
+      const trackWidth = 280; // 需要与样式中的宽度一致
+      return this.gradientColors[index].percent * trackWidth;
+    },
+    // 更新渐变色
+    updateGradientColor(e) {
+      const touch = e.touches[0] || e.changedTouches[0];
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__gradient-track').boundingClientRect();
+      query.exec((res) => {
+        const rect = res[0];
+        if (rect) {
+          let x = touch.clientX - rect.left;
+          // 边界处理
+          x = Math.max(0, Math.min(x, rect.width));
+          const percent = x / rect.width;
+          // 如果正在拖动控制点，则更新该控制点位置
+          if (this.draggingPointerIndex >= 0) {
+            this.gradientColors[this.draggingPointerIndex].percent = percent;
+            // 保持控制点顺序
+            this.gradientColors.sort((a, b) => a.percent - b.percent);
+          } else {
+            // 否则添加新的控制点（此处可选功能）
+          }
+        }
+      });
+    },
+    // 控制点触摸开始
+    onPointerTouchStart(e, index) {
+      this.draggingPointerIndex = index;
+      // 点击控制点时更新预览颜色
+      this.currentColor = this.gradientColors[index].color;
+      this.previewType = 'gradient-point';
+      this.editingGradientIndex = index; // 添加这行以正确设置编辑索引
+      // 阻止事件冒泡
+      e.stopPropagation();
+    },
+    // 控制点触摸移动
+    onPointerTouchMove(e) {
+      if (this.draggingPointerIndex === -1) return;
+      const touch = e.touches[0] || e.changedTouches[0];
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__gradient-track').boundingClientRect();
+      query.exec((res) => {
+        const rect = res[0];
+        if (rect) {
+          let x = touch.clientX - rect.left;
+          // 边界处理
+          x = Math.max(0, Math.min(x, rect.width));
+          let percent = x / rect.width;
+          // 处理边界情况，确保能精确到达两端
+          if (x === 0) percent = 0;
+          if (x === rect.width) percent = 1;
+          // 更新控制点位置
+          this.gradientColors[this.draggingPointerIndex].percent = percent;
+          // 保持控制点顺序
+          this.gradientColors.sort((a, b) => a.percent - b.percent);
+          // 更新拖拽索引以匹配排序后的索引
+          this.draggingPointerIndex = this.gradientColors.findIndex((item, index) => {
+            // 使用更精确的比较方法，处理浮点数精度问题
+            return Math.abs(item.percent - percent) < 0.0001;
+          });
+        }
+      });
+    },
+    // 控制点触摸结束
+    onPointerTouchEnd() {
+      this.draggingPointerIndex = -1;
+    },
+    // 方向选择器触摸开始
+    onDirectionTouchStart(e) {
+      this.updateDirection(e);
+    },
+    // 方向选择器触摸移动
+    onDirectionTouchMove(e) {
+      this.updateDirection(e);
+    },
+    // 方向选择器触摸结束
+    onDirectionTouchEnd(e) {
+      this.updateDirection(e);
+    },
+    // 更新方向
+    updateDirection(e) {
+      const touch = e.touches[0] || e.changedTouches[0];
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.up-color-picker__gradient__direction-circle').boundingClientRect();
+      query.exec((res) => {
+        const rect = res[0];
+        if (rect) {
+          const centerX = rect.left + rect.width / 2;
+          const centerY = rect.top + rect.height / 2;
+          const x = touch.clientX - centerX;
+          const y = touch.clientY - centerY;
+          const distance = Math.sqrt(x * x + y * y);
+          const maxDistance = rect.width / 2;
+          // 限制在圆内
+          if (distance <= maxDistance) {
+            this.directionPointer = {
+              x: x + rect.width / 2,
+              y: y + rect.height / 2
+            };
+          } else {
+            // 限制在圆周上
+            const ratio = maxDistance / distance;
+            this.directionPointer = {
+              x: x * ratio + rect.width / 2,
+              y: y * ratio + rect.height / 2
+            };
+          }
+          // 计算角度并更新方向
+          const angle = (Math.atan2(y, x) * 180) / Math.PI;
+          console.log(angle);
+          this.updateGradientDirection(angle);
+        }
+      });
+    },
+    // 根据角度更新渐变方向
+    updateGradientDirection(angle) {
+      // 角度转换为标准方向
+      if (angle < 0) angle += 360;
+      if (angle >= 315 || angle < 45) {
+        this.currentDirection = { label: '从左到右', value: 'to right' };
+      } else if (angle >= 45 && angle < 135) {
+        this.currentDirection = { label: '从上到下', value: 'to bottom' };
+      } else if (angle >= 135 && angle < 225) {
+        this.currentDirection = { label: '从右到左', value: 'to left' };
+      } else {
+        this.currentDirection = { label: '从下到上', value: 'to top' };
+      }
+    },
+    // 确认方向选择
+    confirmDirection(e) {
+      this.currentDirection = this.gradientDirections[e.index];
+      this.showDirectionPicker = false;
+    },
+    // 选择常用颜色
+    selectCommonColor(color) {
+      this.currentColor = color;
+      if (this.colorTypeIndex === 0) {
+        this.parseSolidColor(color);
+      } else {
+        // 如果是渐变模式，将常用颜色作为渐变的一个节点
+        this.gradientColors[this.editingGradientIndex].color = color;
+      }
+    },
+    // 确认选择
+    confirm() {
+      let color = this.currentColor;
+      if (this.colorTypeIndex === 1) {
+        color = this.gradientStyle;
+      }
+      this.$emit('update:modelValue', color);
+      this.show = false;
+      this.$emit('confirm', color);
+      // 重置编辑状态
+      this.editingGradientIndex = -1;
+      this.previewType = this.colorTypeIndex === 0 ? 'solid' : 'gradient';
+      this.close();
+    },
+    // 关闭选择器
+    close() {
+      this.show = false;
+      this.$emit('close');
+    },
+    // HSL转RGB辅助函数
+    hslToRgb(h, s, l, a = 1) {
+      h = h / 360;
+      s = s / 100;
+      l = l / 100;
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = l; // achromatic
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1 / 6) return p + (q - p) * 6 * t;
+          if (t < 1 / 2) return q;
+          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+      }
+      const round = (value) => Math.round(value * 255);
+      return `rgba(${round(r)}, ${round(g)}, ${round(b)}, ${a.toFixed(2)})`;
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>