<template>
  <!-- 左侧面板组件，用于配置绘图形状和样式 -->
  <int-sidebar
    v-if="visible"
    collapse
    :is-collapsed="collapse"
    width="260px"
    @collapse="collapse=$event"
  >
    <!-- 默认展开状态的内容 -->
    <template v-slot:default>
      <!-- 可折叠面板组 -->
      <int-expansion-panels :opened-panels="openedPanels">
        <!-- 形状选择面板 -->
        <int-expansion-panel
          title="Shapes"
        >
          <v-row no-gutters>
            <v-col
              v-for="(icon, shape) in shapes"
              :key="icon"
              cols="3"
            >
              <!-- 形状选择按钮 -->
              <v-btn
                ref="shapeButtons"
                icon
                class="mx-2"
                :title="shape"
                :class="{'outlined': activeShape === shape}"
                @click="setShape(shape)"
              >
                <v-icon>{{ icon }}</v-icon>
              </v-btn>
            </v-col>
          </v-row>
        </int-expansion-panel>
        <!-- 填充样式面板，只有当fillStyle存在时显示 -->
        <int-expansion-panel
          v-if="fillStyle != null"
          title="Fill Style"
        >
          <!-- 颜色输入组件，用于设置填充颜色和模式 -->
          <ColorInput
            ref="fillInput"
            name="Fill"
            :color="fillStyle.color"
            :pattern="fillStyle.pattern"
            :pattern-list="FILL_PATTERNS"
            @changed="updateFill"
            @eyedropper-changed="updateEyeDropper"
          />
        </int-expansion-panel>
        <!-- 线条样式面板，只有当lineStyle存在时显示 -->
        <int-expansion-panel
          v-if="lineStyle != null"
          title="Line Style"
        >
          <!-- 颜色输入组件，用于设置线条颜色和模式 -->
          <ColorInput
            ref="lineInput"
            name="Line"
            :color="lineStyle.color"
            :pattern="lineStyle.pattern"
            :pattern-list="LINE_PATTERNS"
            @changed="updateLine"
            @eyedropper-changed="updateEyeDropper"
          />
          <!-- 线条宽度滑块控件 -->
          <int-slider
            max="12"
            min="1"
            label="Width"
            :value="lineStyle.width"
            @input="updateLineStyleWidth"
          >
            <template v-slot:append>
              {{ lineStyle.width }}
            </template>
          </int-slider>
        </int-expansion-panel>
        <!-- 文本样式面板，只有当textStyle存在时显示 -->
        <int-expansion-panel
          v-if="textStyle != null"
          title="Text Style"
        >
          <!-- 颜色输入组件，用于设置文本颜色和字体 -->
          <ColorInput
            ref="textInput"
            name="Text"
            :color="textStyle.color"
            :pattern="textStyle.font"
            :pattern-list="TEXT_PATTERNS"
            @changed="updateText"
            @eyedropper-changed="updateEyeDropper"
          />
          <!-- 文本大小控制 -->
          <v-row>
            <v-col class="px-3 pb-0">
              <v-slider
                :value="textStyle.size"
                title="Text Size"
                class="align-center"
                max="60"
                min="8"
                hide-details
                @input="updateTextSize"
              >
                <template v-slot:append>
                  <!-- 文本大小输入框 -->
                  <v-text-field
                    title="Text Size"
                    :value="textStyle.size"
                    class="mt-0 pt-0 paint-text-item"
                    hide-details
                    single-line
                    min="5"
                    type="number"
                    style="width: 40px"
                    @input="updateTextSize"
                  />
                </template>
              </v-slider>
            </v-col>
          </v-row>
          <!-- 文本对齐和样式按钮组 -->
          <v-row
            class="px-1"
            no-gutters
            justify="space-between"
            style="width: 100%"
          >
            <v-btn-toggle
              multiple
              tile
              :value="textStyle.icons"
              :dark="dark"
              @change="updateTextIcons"
            >
              <!-- 左对齐按钮 -->
              <v-btn
                style="min-width: 20%; max-width: 20%"
                title="Left Align"
                value="left"
                height="35"
                @click="textStyle.align = 'left'"
              >
                <v-icon>mdi-format-align-left</v-icon>
              </v-btn>
              <!-- 居中对齐按钮 -->
              <v-btn
                style="min-width: 20%; max-width: 20%"
                title="Center Align"
                value="center"
                height="35"
                @click="textStyle.align = 'center'"
              >
                <v-icon>mdi-format-align-center</v-icon>
              </v-btn>
              <!-- 右对齐按钮 -->
              <v-btn
                style="min-width: 20%; max-width: 20%"
                title="Right Align"
                value="right"
                height="35"
                @click="textStyle.align = 'right'"
              >
                <v-icon>mdi-format-align-right</v-icon>
              </v-btn>
              <!-- 粗体按钮 -->
              <v-btn
                style="min-width: 20%; max-width: 20%"
                title="Bold"
                value="bold"
                height="35"
                @click="textStyle.bold = !textStyle.bold"
              >
                <v-icon>mdi-format-bold</v-icon>
              </v-btn>
              <!-- 斜体按钮 -->
              <v-btn
                style="min-width: 20%; max-width: 20%"
                title="Italic"
                value="italic"
                height="35"
                @click="textStyle.italic = !textStyle.italic"
              >
                <v-icon>mdi-format-italic</v-icon>
              </v-btn>
            </v-btn-toggle>
          </v-row>
        </int-expansion-panel>
        <!-- 属性面板，只有当相关属性存在时显示 -->
        <int-expansion-panel
          v-if="props != null && (name || radius != null || sizemode != null || arrow)"
          title="Properties"
        >
          <!-- 名称属性输入框 -->
          <v-row
            v-if="name != null"
            class="px-1"
            no-gutters
          >
            <v-text-field
              v-model="name"
              label="Name"
              required
              @input="setProperties({'name': name}); $emit('update')"
            />
          </v-row>
          <!-- 边框圆角半径输入框 -->
          <v-row
            v-if="radius != null"
            class="px-1"
            no-gutters
          >
            <v-text-field
              v-model="radius"
              label="Border Radius"
              required
              min="0"
              type="number"
              @input="setProperties({'radius': +radius}); $emit('shape-updated')"
            />
          </v-row>
          <!-- 固定字体大小选项 -->
          <v-row
            v-if="sizemode != null"
            class="px-1"
            no-gutters
          >
            <v-checkbox
              v-model="sizemode"
              class="mt-0"
              label="Fixed font"
              required
              dense
              hide-details
              @change="updateSizeMode"
            />
          </v-row>
          <!-- 箭头宽度输入框 -->
          <v-row
            v-if="arrow != null"
            class="px-1"
            no-gutters
          >
            <v-text-field
              v-model="arrow.width"
              label="Arrow Width"
              min="0"
              type="number"
              required
              @input="setProperties({'symbolend': arrow}); $emit('shape-updated')"
            />
          </v-row>
          <!-- 箭头高度输入框 -->
          <v-row
            v-if="arrow != null"
            class="px-1"
            no-gutters
          >
            <v-text-field
              v-model="arrow.height"
              label="Arrow Height"
              min="0"
              type="number"
              required
              @input="setProperties({'symbolend': arrow}); $emit('shape-updated')"
            />
          </v-row>
        </int-expansion-panel>
      </int-expansion-panels>
    </template>
    <!-- TODO rewrite with dialogs, see RB -->
    <!-- 折叠状态下的内容 -->
    <template v-slot:collapsed>
      <!-- 折叠状态下的迷你按钮们 -->
      <int-sidebar-mini-button
        title="Shapes"
        @input="collapse = false;"
      />
      <int-sidebar-mini-button
        v-if="fillStyle != null"
        title="Fill Style"
        @input="collapse = false;"
      />
      <int-sidebar-mini-button
        v-if="lineStyle != null"
        title="Line Style"
        @input="collapse = false;"
      />
      <int-sidebar-mini-button
        v-if="textStyle != null"
        title="Text Style"
        @input="collapse = false;"
      />
      <int-sidebar-mini-button
        v-if="props != null && (name || radius != null || sizemode != null || arrow)"
        title="Properties"
        @input="collapse = false;"
      />
    </template>
  </int-sidebar>
</template>

<script>
// 导入颜色输入组件
import ColorInput from './ColorInput.vue';
// 导入可折叠面板组组件
import IntExpansionPanels from '../components/IntExpansionPanels.vue';
// 导入可折叠面板组件
import IntExpansionPanel from '../components/IntExpansionPanel.vue';
// 导入迷你侧边栏按钮组件
import IntSidebarMiniButton from '../components/IntSidebarMiniButton.vue';
// 导入滑块组件
import IntSlider from '../components/IntSlider.vue';
// 导入侧边栏组件
import IntSidebar from '../components/IntSidebar.vue';
// 导入线条样式类
import {LineStyle} from '@int/geotoolkit/attributes/LineStyle';
// 导入填充样式类
import {FillStyle} from '@int/geotoolkit/attributes/FillStyle';
// 导入文本样式类
import {TextStyle} from '@int/geotoolkit/attributes/TextStyle';
// 导入RGBA颜色类
import {RgbaColor} from '@int/geotoolkit/util/RgbaColor';
// 导入文本大小模式枚举
import {SizeMode} from '@int/geotoolkit/scene/shapes/Text';
// 导入样式模式常量和图案
import {LINE_PATTERNS, FILL_PATTERNS, TEXT_PATTERNS, LINESTYLE_PATTERNS, IMAGE_PATTERNS, LS_KEYS, FS_KEYS} from '@/api/Patterns';
// 导入编辑事件枚举
import {EditEvents} from '@int/geotoolkit/controls/tools/EditEvents';

// 定义工具变量，用于在组件实例间共享
let _tool = null;
export default {
    // 组件名称
    name: 'LeftPaintPanel',
    // 注册使用的子组件
    components: {
        ColorInput,
        IntSidebarMiniButton,
        IntExpansionPanel,
        IntExpansionPanels,
        IntSidebar,
        IntSlider
    },
    // 定义v-model所使用的属性
    model: {
        prop: 'visible'
    },
    // 组件接收的属性定义
    props: {
        // 控制面板是否可见
        visible: {
            type: Boolean,
            default: true
        },
        // 控制面板是否可切换
        toggleable: {
            type: Boolean,
            default: true
        },
        // 控制是否使用暗色主题
        dark: {
            type: Boolean,
            default: false
        },
        // 画布ID
        canvasId: {
            type: String,
            default: 'plot'
        },
        // 可用的形状及其图标
        shapes: {
            type: Object,
            default: function () {
                return {};
            }
        }
    },
    // 组件的响应式数据
    data () {
        return {
            // 迷你变体状态
            miniVariant: true,
            // 当前活动的形状
            activeShape: null,
            // 当前形状的属性
            props: null,
            // 填充样式对象
            fillStyle: null,
            // 线条样式对象
            lineStyle: null,
            // 文本样式对象
            textStyle: null,
            // 圆角半径
            radius: null,
            // 箭头样式对象
            arrow: null,
            // 名称
            name: null,
            // 大小模式
            sizemode: null,
            // 线条模式常量
            LINE_PATTERNS,
            // 填充模式常量
            FILL_PATTERNS,
            // 文本模式常量
            TEXT_PATTERNS,
            // 面板折叠状态
            collapse: false,
            // 初始打开的面板索引数组（不要移除，Vue如果提供常量给expansion panels会工作不正确）
            openedPanels: [0, 1, 2, 3, 4]
        };
    },
    // 组件挂载时的钩子函数
    mounted: function () {
        // 根据窗口宽度和可切换选项决定是否使用迷你模式
        this.miniVariant = this.toggleable && window.innerWidth < 1200;
        // 获取画布元素
        this.canvas = document.getElementById(this.canvasId);
        // 创建用于吸管工具的像素显示框
        this.px = document.createElement('div');
        // eslint-disable-next-line
        this.px.style.cssText = 'position: absolute; margin: 2px 0 0 -12px; left: 0; top: 0; width: 10px; height: 10px; border: 1px solid black; z-index: 2000; pointer-events: none; background-color: blue;';
        // 定义事件监听器集合
        this.listeners = {
            // 鼠标移动事件处理
            move: (event) => {
                // 如果没有激活的输入框，则不处理
                if (this.getActiveInput() == null) return;
                // 获取画布上当前位置的像素颜色
                const ctx = this.canvas.getContext('2d');
                const data = ctx.getImageData(event.offsetX, event.offsetY, 1, 1).data;
                // 移动吸管工具的显示框
                this.px.style.transform = 'translate(' + event.x + 'px, ' + event.y + 'px)';
                // 更新显示框颜色为当前像素颜色
                this.px.style.backgroundColor = data[3] === 0 ? 'white' : 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')';
            },
            // 鼠标按下事件处理
            down: (event) => {
                // 如果没有激活的输入框，则不处理
                if (this.getActiveInput() == null) return;
                // 创建颜色对象
                const color = new RgbaColor(this.px.style.backgroundColor);
                // 获取当前激活的输入框
                const input = this.getActiveInput();
                if (input != null) {
                    // 更新颜色值
                    input.updateColor(color.toHex());
                    // 禁用吸管工具
                    input.setEyeDropperEnabled(false);
                }
                // 阻止事件冒泡
                event.stopImmediatePropagation();
            },
            // 鼠标进入画布事件处理
            enter: (event) => {
                // 如果没有激活的输入框，则不处理
                if (this.getActiveInput() == null) return;
                // 添加吸管工具显示框到页面
                document.body.appendChild(this.px);
            },
            // 鼠标离开画布事件处理
            leave: (event) => {
                // 如果没有激活的输入框，则不处理
                if (this.getActiveInput() == null) return;
                // 从页面移除吸管工具显示框
                document.body.removeChild(this.px);
            }
        };
        // 添加画布事件监听器
        this.canvas.addEventListener('pointermove', this.listeners.move);
        this.canvas.addEventListener('pointerdown', this.listeners.down);
        this.canvas.addEventListener('pointerenter', this.listeners.enter);
        this.canvas.addEventListener('pointerleave', this.listeners.leave);
        // 触发初始化事件
        this.$emit('init');
    },
    // 组件销毁时的钩子函数
    destroyed: function () {
        // 移除画布事件监听器
        this.canvas.removeEventListener('pointermove', this.listeners.move);
        this.canvas.removeEventListener('pointerdown', this.listeners.down);
        this.canvas.removeEventListener('pointerenter', this.listeners.enter);
        this.canvas.removeEventListener('pointerleave', this.listeners.leave);
    },
    methods: {
        // 初始化绘图工具
        init (tool) {
            // 保存工具引用
            _tool = tool;
            // 添加编辑器变更事件监听器
            _tool.addListener(EditEvents.EditorChanged, (tool, editor) => {
                // 如果没有选择形状或是多个形状，清除属性
                if (tool.getShape() == null || Array.isArray(tool.getShape())) {
                    this.props = null;
                    this.activeShape = null;
                } else {
                    // 获取当前形状的属性
                    this.props = tool.getShape().getProperties();
                }
                // 更新各种样式属性
                this.fillStyle = this.getFillStyle();
                this.lineStyle = this.getLineStyle();
                this.textStyle = this.getTextStyle();
                this.name = this.props && this.props['name'] || null;
                this.radius = (this.fillStyle || this.lineStyle) && this.props['radius'] != null ? this.props['radius'] : null;
                this.arrow = this.getArrowSize();
                this.sizemode = this.getSizeMode();
            });
        },
        // 获取填充样式数据
        getFillStyle () {
            // 从属性中获取填充样式
            const style = this.props && this.props['fillstyle'];
            if (!style) return null;
            // 获取样式模式源和颜色
            const source = style.getPattern() ? style.getPattern().getProperties()['src'] : null;
            const color = new RgbaColor(style.getColor());
            // 返回填充样式对象
            return {
                color: color.toHex(true).toUpperCase(),
                pattern: source ? FS_KEYS.filter((key) => FILL_PATTERNS[key] === source)[0] : FS_KEYS[0]
            };
        },
        // 获取线条样式数据
        getLineStyle () {
            // 从属性中获取线条样式
            const style = this.props && this.props['linestyle'];
            if (!style) return null;
            // 获取颜色
            const color = new RgbaColor(style.getColor());
            // 返回线条样式对象
            return {
                color: color.toHex(true).toUpperCase(),
                width: style.getWidth(),
                pattern: LS_KEYS.filter((key) => LINESTYLE_PATTERNS[key].toString() === style.getPattern().toString())[0]
            };
        },
        // 获取文本样式数据
        getTextStyle () {
            // 从属性中获取文本样式
            const style = this.props && this.props['textstyle'];
            if (!style) return null;
            // 获取字体和颜色
            const font = style.getProcessedFont();
            const color = new RgbaColor(style.getColor());
            // 返回文本样式对象
            return {
                size: parseInt(font['fontsize']),
                font: font['fontfamily'],
                color: color.toHex(true).toUpperCase(),
                icons: [style.getAlignment(), font['fontweight'], font['fontstyle']],
                align: style.getAlignment(),
                bold: font['fontweight'] === 'bold',
                italic: font['fontstyle'] === 'italic'
            };
        },
        // 获取大小模式
        getSizeMode () {
            // 从属性中获取大小模式
            const mode = this.props && this.props['sizemode'];
            if (mode == null) return null;
            // 判断是否是自动换行模式
            return mode === SizeMode.WrappedWidth;
        },
        // 获取箭头大小
        getArrowSize () {
            // 从属性中获取箭头样式
            const arrow = this.props && this.props['symbolend'];
            if (!arrow) return null;
            // 返回箭头尺寸对象
            return {
                width: arrow.getWidth(),
                height: arrow.getHeight()
            };
        },
        // 设置当前选中的形状
      setShape(shape) {
        console.log("点击的形状", shape);
            // 如果点击当前已选中的形状，则取消选择
            if (this.activeShape === shape) {
                if (this.activeShape === null) return;
                shape = null;
            }
            // 更新活动形状
            this.activeShape = shape;
            // 触发形状变更事件
            this.$emit('shape-changed', shape);
        },
        // 设置活动形状（供外部调用）
        setActiveShape (shape) {
            this.activeShape = shape;
        },
        // 更新文本样式
        updateText (color, font) {
            if (_tool == null) return;
            // 更新文本样式数据
            this.textStyle.color = color;
            this.textStyle.font = font;
            // 设置新的文本样式属性
            this.setProperties({
                'textstyle': new TextStyle(color, 'middle', this.textStyle.align,
                    this.textStyle.icons[2] + ' ' + this.textStyle.icons[1] + ' ' + this.textStyle.size + 'px ' + font)
            });
            // 触发形状更新事件
            this.$emit('shape-updated');
        },
        // 更新文本图标状态（粗体、斜体等）
        updateTextIcons () {
            // 更新文本样式图标数组
            this.textStyle.icons = [this.textStyle.align, this.textStyle.bold ? 'bold' : '', this.textStyle.italic ? 'italic' : ''];
            // 设置新的文本样式属性
            this.setProperties({
                'textstyle': new TextStyle(this.textStyle.color, 'middle', this.textStyle.align,
                    this.textStyle.icons[2] + ' ' + this.textStyle.icons[1] + ' ' + this.textStyle.size + 'px ' + this.textStyle.font)
            });
        },
        // 更新文本大小
        updateTextSize (value) {
            if (_tool == null) return;
            // 更新文本大小
            this.textStyle.size = +value;
            // 设置新的文本样式属性
            this.setProperties({
                'textstyle': new TextStyle(this.textStyle.color, 'middle', this.textStyle.align,
                    this.textStyle.icons[2] + ' ' + this.textStyle.icons[1] + ' ' + this.textStyle.size + 'px ' + this.textStyle.font)
            });
        },
        // 更新填充样式
        updateFill (color, pattern) {
            if (_tool == null) return;
            // 更新填充样式数据
            this.fillStyle.color = color;
            this.fillStyle.pattern = pattern;
            // 设置新的填充样式属性
            this.setProperties({
                'fillstyle': new FillStyle(color, IMAGE_PATTERNS[pattern])
            });
        },
        // 更新线条样式
        updateLine (color, pattern) {
            if (_tool == null) return;
            // 更新线条样式数据
            this.lineStyle.color = color;
            this.lineStyle.pattern = pattern;
            // 设置新的线条样式属性
            this.setProperties({
                'linestyle': new LineStyle(this.lineStyle.color, this.lineStyle.width, LINESTYLE_PATTERNS[pattern])
            });
        },
        // 更新线条宽度
        updateLineStyleWidth (value) {
            if (_tool == null) return;
            // 更新线条宽度
            this.lineStyle.width = +value;
            // 设置新的线条样式属性
            this.setProperties({
                'linestyle': new LineStyle(this.lineStyle.color, this.lineStyle.width, LINESTYLE_PATTERNS[this.lineStyle.pattern])
            });
        },
        // 更新大小模式
        updateSizeMode (value) {
            if (_tool == null) return;
            // 设置新的大小模式属性
            this.setProperties({
                'sizemode': value ? SizeMode.WrappedWidth : SizeMode.FixedWidth | SizeMode.FixedHeight
            });
            // 触发形状更新事件
            this.$emit('shape-updated');
        },
        // 更新吸管工具状态
        updateEyeDropper (component, enabled) {
            if (enabled) {
                // 确保只有一个吸管工具激活
                this.getInputs().forEach((input) => input.setEyeDropperEnabled(component === input));
                // 添加吸管光标类
                this.canvas.classList.add('eyedropper-cursor');
            } else {
                // 移除吸管光标类
                this.canvas.classList.remove('eyedropper-cursor');
                // 移除吸管显示框
                if (this.px.parentNode) this.px.parentNode.removeChild(this.px);
            }
            // 触发吸管状态变更事件
            this.$emit('eyedropper-changed', enabled);
        },
        // 获取所有颜色输入组件
        getInputs () {
            return [this.$refs.fillInput, this.$refs.lineInput, this.$refs.textInput].filter((input) => input != null);
        },
        // 获取当前激活的颜色输入组件
        getActiveInput () {
            return this.getInputs().filter((input) => input.isActive())[0] || null;
        },
        // 切换面板展开/折叠状态
        toggle () {
            if (!this.toggleable) return;
            this.miniVariant = !this.miniVariant;
        },
        // 设置形状属性
        setProperties (props) {
            // 设置工具节点属性
            _tool.setProperties({'node': props});
            // 如果有当前形状，直接设置属性并触发重绘
            if (this.props != null) {
                _tool.getShape().setProperties(props).invalidate();
            }
        }
    }
};
</script>
<style lang="css">
/* 定义吸管工具光标样式 */
.eyedropper-cursor {
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAe\
    QAAAHkBOLWIEgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJfSURBVDiNjdFdSJNhFAfw/969U6ZOzS+0nGLaRVcWhgbeDAIvM\
    g2bTglXWbCrCEsjZDeBRFBiUBTWhWAXCnVVFAwpQm1OU0IdVpCZygw/lpt7e/c+2/txupBCydkOPHfn9+c85+iICPFWlbWxUtO06zodf1wSf/VqOrlLF\
    2/ASautnjemDmTsN/PgOATWV7GyMHeLjwefOtPUkGBK78/KL+RVjaBqGhKMydAbEi/uGVDb1NzKcfqbBpMpObugiFc1ApEGRVYgM4ZohLm5WLiu+UJVU\
    mp6d17x4TRN03gWDoOIoCgKGBPhX/EpiqrcjRnAoupiWAhpESYh21yE9eVFiEIITArD71tSIoJgnRp++2HXgGqbLTcnM/1Vp/OG3qRXEWEScgoO4ufyE\
    vy+BVkKBusnhgZfAsA/V7C1tOSmJJlGnO3XSgrN+RDFMJydt7HOVKiKiuX5LwHP4OuMP/07JrDa7XkpyWnvne1tJYXm/K0GTgdrbTVW5r8qG6s/SJHlj\
    u2G344z9mWNdFxtLS4wH9jaA2Pwzn5C96PHnxWgRgoGDk28G3TtGJmI4HA4khxX2ua+fV8gWZZJlmUSBIHcY+NU02iftVhqsogIuz0QERrOXbo8POr5i\
    0VRJLdnjE432b3lJ+oyY2Ei2vqC0Wg8W1ZaCgCIRqOYmp7BnQc93rXAmmX8jWsj1qkBgLe1OI5UlB2tMBh4BDc3MeL24Omz59ObUsgy6nIF98IAwCcm6\
    Hsry49xXfcfqh+nvUNCSOzz++YGJicn5f9hAOAlKTp+r+eJjrHo+Rf9fTPxoO31G8TrUH9rumszAAAAAElFTkSuQmCC') 0 16, auto !important;
}
</style>
<!-- 引入面板样式 -->
<style src="../assets/styles/panels.css" scoped />
<style lang="css" scoped>
  /* 修复linter错误：使用正确的选择器语法 */
  :deep(.int-slider) {
    margin-top: 10px;
  }
</style>
