From c69ec7a79ddae1e85fa67da037dd1094e2891732 Mon Sep 17 00:00:00 2001
From: "anthropic-code-agent[bot]" <242468646+Claude@users.noreply.github.com>
Date: Mon, 27 Apr 2026 12:57:51 +0000
Subject: [PATCH 1/3] Convert UI components CSS to SCSS

Agent-Logs-Url: https://github.com/hackycy/easyink/sessions/d376e8ab-348b-4aba-8cfb-c788e8c7ec32

Co-authored-by: hackycy <26972260+hackycy@users.noreply.github.com>
---
 packages/ui/src/components/EiBorderToggle.vue |  76 +--
 packages/ui/src/components/EiButton.vue       |  68 +--
 packages/ui/src/components/EiCheckbox.vue     |  16 +-
 packages/ui/src/components/EiColorPicker.vue  | 468 +++++++++---------
 packages/ui/src/components/EiFontPicker.vue   | 218 ++++----
 packages/ui/src/components/EiInput.vue        |  26 +-
 packages/ui/src/components/EiNumberInput.vue  |  26 +-
 packages/ui/src/components/EiPanel.vue        | 108 ++--
 packages/ui/src/components/EiSelect.vue       |  26 +-
 packages/ui/src/components/EiSwitch.vue       |  78 +--
 packages/ui/src/components/EiTextarea.vue     |  26 +-
 packages/ui/src/components/EiTree.vue         | 147 +++---
 12 files changed, 641 insertions(+), 642 deletions(-)

diff --git a/packages/ui/src/components/EiBorderToggle.vue b/packages/ui/src/components/EiBorderToggle.vue
index 54920527..7c453b92 100644
--- a/packages/ui/src/components/EiBorderToggle.vue
+++ b/packages/ui/src/components/EiBorderToggle.vue
@@ -86,7 +86,7 @@ function toggle(side: typeof SIDES[number]) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-border-toggle {
   display: flex;
   align-items: center;
@@ -94,49 +94,49 @@ function toggle(side: typeof SIDES[number]) {
   width: 100%;
   font-size: 12px;
   color: var(--ei-text-secondary, #666);
-}
 
-.ei-border-toggle--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 
-.ei-border-toggle__label {
-  user-select: none;
-  flex-shrink: 0;
-}
+  &__label {
+    user-select: none;
+    flex-shrink: 0;
+  }
 
-.ei-border-toggle__sides {
-  display: flex;
-  gap: 2px;
-}
+  &__sides {
+    display: flex;
+    gap: 2px;
+  }
 
-.ei-border-toggle__btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 3px;
-  background: var(--ei-input-bg, #fff);
-  color: var(--ei-border-color, #d0d0d0);
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.15s, border-color 0.15s;
-}
+  &__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 3px;
+    background: var(--ei-input-bg, #fff);
+    color: var(--ei-border-color, #d0d0d0);
+    cursor: pointer;
+    padding: 0;
+    transition: color 0.15s, border-color 0.15s;
 
-.ei-border-toggle__btn:hover {
-  border-color: var(--ei-primary, #1890ff);
-}
+    &:hover {
+      border-color: var(--ei-primary, #1890ff);
+    }
 
-.ei-border-toggle__btn--active {
-  color: var(--ei-primary, #1890ff);
-  border-color: var(--ei-primary, #1890ff);
-  background: color-mix(in srgb, var(--ei-primary, #1890ff) 8%, transparent);
-}
+    &--active {
+      color: var(--ei-primary, #1890ff);
+      border-color: var(--ei-primary, #1890ff);
+      background: color-mix(in srgb, var(--ei-primary, #1890ff) 8%, transparent);
+    }
 
-.ei-border-toggle__btn:disabled {
-  cursor: not-allowed;
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiButton.vue b/packages/ui/src/components/EiButton.vue
index 3a151916..b299600a 100644
--- a/packages/ui/src/components/EiButton.vue
+++ b/packages/ui/src/components/EiButton.vue
@@ -24,7 +24,7 @@ defineEmits<{
   </button>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-button {
   display: inline-flex;
   align-items: center;
@@ -38,46 +38,46 @@ defineEmits<{
   font-size: 14px;
   line-height: 1;
   transition: background 0.15s, border-color 0.15s;
-}
 
-.ei-button:hover:not(:disabled) {
-  border-color: var(--ei-primary, #1890ff);
-  color: var(--ei-primary, #1890ff);
-}
+  &:hover:not(:disabled) {
+    border-color: var(--ei-primary, #1890ff);
+    color: var(--ei-primary, #1890ff);
+  }
 
-.ei-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.ei-button--primary {
-  background: var(--ei-primary, #1890ff);
-  border-color: var(--ei-primary, #1890ff);
-  color: #fff;
-}
+  &--primary {
+    background: var(--ei-primary, #1890ff);
+    border-color: var(--ei-primary, #1890ff);
+    color: #fff;
 
-.ei-button--primary:hover:not(:disabled) {
-  background: var(--ei-primary-hover, #40a9ff);
-  border-color: var(--ei-primary-hover, #40a9ff);
-  color: #fff;
-}
+    &:hover:not(:disabled) {
+      background: var(--ei-primary-hover, #40a9ff);
+      border-color: var(--ei-primary-hover, #40a9ff);
+      color: #fff;
+    }
+  }
 
-.ei-button--ghost {
-  border-color: transparent;
-  background: transparent;
-}
+  &--ghost {
+    border-color: transparent;
+    background: transparent;
+  }
 
-.ei-button--sm {
-  padding: 2px 8px;
-  font-size: 12px;
-}
+  &--sm {
+    padding: 2px 8px;
+    font-size: 12px;
+  }
 
-.ei-button--md {
-  padding: 4px 12px;
-}
+  &--md {
+    padding: 4px 12px;
+  }
 
-.ei-button--lg {
-  padding: 8px 16px;
-  font-size: 16px;
+  &--lg {
+    padding: 8px 16px;
+    font-size: 16px;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiCheckbox.vue b/packages/ui/src/components/EiCheckbox.vue
index 7a74276f..0a5ab5ce 100644
--- a/packages/ui/src/components/EiCheckbox.vue
+++ b/packages/ui/src/components/EiCheckbox.vue
@@ -29,7 +29,7 @@ function onChange(event: Event) {
   </label>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-checkbox {
   display: inline-flex;
   align-items: center;
@@ -37,14 +37,14 @@ function onChange(event: Event) {
   cursor: pointer;
   font-size: 13px;
   color: var(--ei-text, #333);
-}
 
-.ei-checkbox--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.ei-checkbox__label {
-  user-select: none;
+  &__label {
+    user-select: none;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiColorPicker.vue b/packages/ui/src/components/EiColorPicker.vue
index 84dc108d..084b41f9 100644
--- a/packages/ui/src/components/EiColorPicker.vue
+++ b/packages/ui/src/components/EiColorPicker.vue
@@ -559,275 +559,269 @@ watch(() => props.modelValue, () => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-color-picker-wrapper {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
-.ei-color-picker__label {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-}
-
 .ei-color-picker {
   position: relative;
-}
-
-.ei-color-picker__trigger {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-
-.ei-color-picker__swatch {
-  display: block;
-  width: 28px;
-  height: 28px;
-  border-radius: 4px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  background:
-    linear-gradient(var(--swatch-color), var(--swatch-color)),
-    conic-gradient(#eee 25%, #fff 25% 50%, #eee 50% 75%, #fff 75%) 0 0 / 8px 8px;
-  flex-shrink: 0;
-}
 
-.ei-color-picker__swatch--empty {
-  background: #fff;
-  position: relative;
-  overflow: hidden;
-}
-
-.ei-color-picker__swatch--empty::before {
-  content: '';
-  position: absolute;
-  inset: -2px;
-  background: linear-gradient(
-    to bottom right,
-    transparent calc(50% - 1px),
-    #e53935 calc(50% - 1px),
-    #e53935 calc(50% + 1px),
-    transparent calc(50% + 1px)
-  );
-}
-
-.ei-color-picker__value {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-  font-family: monospace;
-}
+  &__label {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+  }
 
-.ei-color-picker__popover {
-  position: fixed;
-  z-index: 1000;
-  padding: 12px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 6px;
-  background: var(--ei-panel-bg, #fff);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
-  width: 244px;
-  box-sizing: border-box;
-}
+  &__trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
 
-/* Saturation panel */
-.ei-color-picker__sat-panel {
-  position: relative;
-  width: 220px;
-  height: 150px;
-  border-radius: 4px;
-  overflow: hidden;
-  cursor: crosshair;
-}
+  &__swatch {
+    display: block;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    background:
+      linear-gradient(var(--swatch-color), var(--swatch-color)),
+      conic-gradient(#eee 25%, #fff 25% 50%, #eee 50% 75%, #fff 75%) 0 0 / 8px 8px;
+    flex-shrink: 0;
+
+    &--empty {
+      background: #fff;
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -2px;
+        background: linear-gradient(
+          to bottom right,
+          transparent calc(50% - 1px),
+          #e53935 calc(50% - 1px),
+          #e53935 calc(50% + 1px),
+          transparent calc(50% + 1px)
+        );
+      }
+    }
+  }
 
-.ei-color-picker__sat-canvas {
-  display: block;
-  width: 220px;
-  height: 150px;
-}
+  &__value {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+    font-family: monospace;
+  }
 
-.ei-color-picker__sat-cursor {
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-  pointer-events: none;
-  transform: translate(-50%, -50%);
-}
+  &__popover {
+    position: fixed;
+    z-index: 1000;
+    padding: 12px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 6px;
+    background: var(--ei-panel-bg, #fff);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    width: 244px;
+    box-sizing: border-box;
+  }
 
-/* Bar shared */
-.ei-color-picker__bar-wrap {
-  position: relative;
-  width: 220px;
-  height: 12px;
-  margin-top: 10px;
-  border-radius: 6px;
-  overflow: hidden;
-  cursor: pointer;
-}
+  &__sat-panel {
+    position: relative;
+    width: 220px;
+    height: 150px;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: crosshair;
+  }
 
-.ei-color-picker__bar-canvas {
-  display: block;
-  width: 220px;
-  height: 12px;
-}
+  &__sat-canvas {
+    display: block;
+    width: 220px;
+    height: 150px;
+  }
 
-.ei-color-picker__bar-handle {
-  position: absolute;
-  top: 50%;
-  width: 14px;
-  height: 14px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
-  pointer-events: none;
-  transform: translate(-50%, -50%);
-  background: transparent;
-}
+  &__sat-cursor {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+  }
 
-/* Alpha row */
-.ei-color-picker__alpha-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
+  &__bar-wrap {
+    position: relative;
+    width: 220px;
+    height: 12px;
+    margin-top: 10px;
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+  }
 
-.ei-color-picker__alpha-bar {
-  flex: 1;
-}
+  &__bar-canvas {
+    display: block;
+    width: 220px;
+    height: 12px;
+  }
 
-.ei-color-picker__preview {
-  display: block;
-  width: 20px;
-  height: 20px;
-  border-radius: 3px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  margin-top: 10px;
-  flex-shrink: 0;
-  background:
-    linear-gradient(var(--preview-color), var(--preview-color)),
-    conic-gradient(#eee 25%, #fff 25% 50%, #eee 50% 75%, #fff 75%) 0 0 / 6px 6px;
-}
+  &__bar-handle {
+    position: absolute;
+    top: 50%;
+    width: 14px;
+    height: 14px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    background: transparent;
+  }
 
-/* Inputs */
-.ei-color-picker__inputs {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 10px;
-}
+  &__alpha-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
 
-.ei-color-picker__hex-wrap {
-  position: relative;
-  flex: 1;
-}
+  &__alpha-bar {
+    flex: 1;
+  }
 
-.ei-color-picker__hex-input {
-  width: 100%;
-  padding: 3px 22px 3px 6px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: monospace;
-  color: var(--ei-text, #333);
-  background: var(--ei-input-bg, #fff);
-  outline: none;
-  box-sizing: border-box;
-}
+  &__preview {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    margin-top: 10px;
+    flex-shrink: 0;
+    background:
+      linear-gradient(var(--preview-color), var(--preview-color)),
+      conic-gradient(#eee 25%, #fff 25% 50%, #eee 50% 75%, #fff 75%) 0 0 / 6px 6px;
+  }
 
-.ei-color-picker__hex-input:focus {
-  border-color: var(--ei-primary, #1890ff);
-}
+  &__inputs {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 10px;
+  }
 
-.ei-color-picker__alpha-input-wrap {
-  display: flex;
-  align-items: center;
-  width: 56px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 4px;
-  background: var(--ei-input-bg, #fff);
-  overflow: hidden;
-}
+  &__hex-wrap {
+    position: relative;
+    flex: 1;
+  }
 
-.ei-color-picker__alpha-input {
-  width: 36px;
-  padding: 3px 2px 3px 6px;
-  border: none;
-  font-size: 12px;
-  font-family: monospace;
-  color: var(--ei-text, #333);
-  background: transparent;
-  outline: none;
-  appearance: textfield;
-  -moz-appearance: textfield;
-  box-sizing: border-box;
-}
+  &__hex-input {
+    width: 100%;
+    padding: 3px 22px 3px 6px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: monospace;
+    color: var(--ei-text, #333);
+    background: var(--ei-input-bg, #fff);
+    outline: none;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: var(--ei-primary, #1890ff);
+    }
+  }
 
-.ei-color-picker__alpha-input::-webkit-inner-spin-button,
-.ei-color-picker__alpha-input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
+  &__alpha-input-wrap {
+    display: flex;
+    align-items: center;
+    width: 56px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 4px;
+    background: var(--ei-input-bg, #fff);
+    overflow: hidden;
+  }
 
-.ei-color-picker__alpha-unit {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #999);
-  padding-right: 4px;
-}
+  &__alpha-input {
+    width: 36px;
+    padding: 3px 2px 3px 6px;
+    border: none;
+    font-size: 12px;
+    font-family: monospace;
+    color: var(--ei-text, #333);
+    background: transparent;
+    outline: none;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    box-sizing: border-box;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
 
-/* Clear button */
-.ei-color-picker__clear-btn {
-  position: absolute;
-  right: 4px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  border: none;
-  border-radius: 3px;
-  background: none;
-  cursor: pointer;
-  color: var(--ei-text-secondary, #bbb);
-  transition: color 0.15s;
-}
+  &__alpha-unit {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #999);
+    padding-right: 4px;
+  }
 
-.ei-color-picker__clear-btn:hover {
-  color: #ef3330;
-}
+  &__clear-btn {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    padding: 0;
+    border: none;
+    border-radius: 3px;
+    background: none;
+    cursor: pointer;
+    color: var(--ei-text-secondary, #bbb);
+    transition: color 0.15s;
+
+    &:hover {
+      color: #ef3330;
+    }
+  }
 
-/* Presets */
-.ei-color-picker__presets {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 4px;
-  margin-top: 10px;
-}
+  &__presets {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 4px;
+    margin-top: 10px;
+  }
 
-.ei-color-picker__preset {
-  width: 100%;
-  aspect-ratio: 1;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 3px;
-  padding: 0;
-  cursor: pointer;
-}
+  &__preset {
+    width: 100%;
+    aspect-ratio: 1;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 3px;
+    padding: 0;
+    cursor: pointer;
 
-.ei-color-picker__preset:hover {
-  transform: scale(1.15);
-}
+    &:hover {
+      transform: scale(1.15);
+    }
 
-.ei-color-picker__preset--active {
-  border-color: var(--ei-primary, #1890ff);
-  box-shadow: 0 0 0 1px var(--ei-primary, #1890ff);
+    &--active {
+      border-color: var(--ei-primary, #1890ff);
+      box-shadow: 0 0 0 1px var(--ei-primary, #1890ff);
+    }
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiFontPicker.vue b/packages/ui/src/components/EiFontPicker.vue
index af98d35e..8a531ea3 100644
--- a/packages/ui/src/components/EiFontPicker.vue
+++ b/packages/ui/src/components/EiFontPicker.vue
@@ -101,123 +101,123 @@ watch(isOpen, (open) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-font-picker-wrapper {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
-.ei-font-picker__label {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-}
-
 .ei-font-picker {
   position: relative;
-}
-
-.ei-font-picker__trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 4px 8px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 4px;
-  font-size: 13px;
-  background: var(--ei-input-bg, #fff);
-  color: var(--ei-text, #333);
-  cursor: pointer;
-  text-align: left;
-}
-
-.ei-font-picker__trigger:hover {
-  border-color: var(--ei-primary, #1890ff);
-}
-
-.ei-font-picker__trigger:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ei-font-picker__arrow {
-  font-size: 10px;
-  color: var(--ei-text-secondary, #999);
-}
-
-.ei-font-picker__dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  margin-top: 2px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 4px;
-  background: var(--ei-panel-bg, #fff);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-}
-
-.ei-font-picker__search {
-  width: 100%;
-  padding: 6px 8px;
-  border: none;
-  border-bottom: 1px solid var(--ei-border-color, #eee);
-  font-size: 12px;
-  outline: none;
-  box-sizing: border-box;
-  background: transparent;
-}
-
-.ei-font-picker__list {
-  list-style: none;
-  margin: 0;
-  padding: 4px 0;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.ei-font-picker__item {
-  padding: 4px 8px;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.ei-font-picker__item:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
-
-.ei-font-picker__item--active {
-  color: var(--ei-primary, #1890ff);
-  font-weight: 500;
-}
-
-.ei-font-picker__empty {
-  padding: 8px;
-  font-size: 12px;
-  color: var(--ei-text-secondary, #999);
-  text-align: center;
-}
-
-.ei-font-picker__fallback {
-  width: 100%;
-  padding: 4px 8px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 4px;
-  font-size: 13px;
-  outline: none;
-  background: var(--ei-input-bg, #fff);
-  color: var(--ei-text, #333);
-  box-sizing: border-box;
-}
-
-.ei-font-picker__fallback:focus {
-  border-color: var(--ei-primary, #1890ff);
-}
 
-.ei-font-picker__fallback:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  &__label {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+  }
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 4px 8px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 4px;
+    font-size: 13px;
+    background: var(--ei-input-bg, #fff);
+    color: var(--ei-text, #333);
+    cursor: pointer;
+    text-align: left;
+
+    &:hover {
+      border-color: var(--ei-primary, #1890ff);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &__arrow {
+    font-size: 10px;
+    color: var(--ei-text-secondary, #999);
+  }
+
+  &__dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    margin-top: 2px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 4px;
+    background: var(--ei-panel-bg, #fff);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  }
+
+  &__search {
+    width: 100%;
+    padding: 6px 8px;
+    border: none;
+    border-bottom: 1px solid var(--ei-border-color, #eee);
+    font-size: 12px;
+    outline: none;
+    box-sizing: border-box;
+    background: transparent;
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 4px 0;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  &__item {
+    padding: 4px 8px;
+    font-size: 13px;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--ei-hover-bg, #f0f0f0);
+    }
+
+    &--active {
+      color: var(--ei-primary, #1890ff);
+      font-weight: 500;
+    }
+  }
+
+  &__empty {
+    padding: 8px;
+    font-size: 12px;
+    color: var(--ei-text-secondary, #999);
+    text-align: center;
+  }
+
+  &__fallback {
+    width: 100%;
+    padding: 4px 8px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 4px;
+    font-size: 13px;
+    outline: none;
+    background: var(--ei-input-bg, #fff);
+    color: var(--ei-text, #333);
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: var(--ei-primary, #1890ff);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiInput.vue b/packages/ui/src/components/EiInput.vue
index b0e81a0d..1e215e6d 100644
--- a/packages/ui/src/components/EiInput.vue
+++ b/packages/ui/src/components/EiInput.vue
@@ -50,7 +50,7 @@ function onCommit(event: Event) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-input-wrapper {
   display: flex;
   flex-direction: column;
@@ -58,11 +58,6 @@ function onCommit(event: Event) {
   min-width: 0;
 }
 
-.ei-input__label {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-}
-
 .ei-input {
   padding: 4px 8px;
   border: 1px solid var(--ei-border-color, #d0d0d0);
@@ -74,14 +69,19 @@ function onCommit(event: Event) {
   min-width: 0;
   width: 100%;
   box-sizing: border-box;
-}
 
-.ei-input:focus {
-  border-color: var(--ei-primary, #1890ff);
-}
+  &__label {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+  }
+
+  &:focus {
+    border-color: var(--ei-primary, #1890ff);
+  }
 
-.ei-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiNumberInput.vue b/packages/ui/src/components/EiNumberInput.vue
index 3870ba85..dfa00467 100644
--- a/packages/ui/src/components/EiNumberInput.vue
+++ b/packages/ui/src/components/EiNumberInput.vue
@@ -156,7 +156,7 @@ function onBlur() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-number-input-wrapper {
   display: flex;
   flex-direction: column;
@@ -164,11 +164,6 @@ function onBlur() {
   min-width: 0;
 }
 
-.ei-number-input__label {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-}
-
 .ei-number-input {
   padding: 4px 8px;
   border: 1px solid var(--ei-border-color, #d0d0d0);
@@ -180,14 +175,19 @@ function onBlur() {
   min-width: 0;
   width: 100%;
   box-sizing: border-box;
-}
 
-.ei-number-input:focus {
-  border-color: var(--ei-primary, #1890ff);
-}
+  &__label {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+  }
+
+  &:focus {
+    border-color: var(--ei-primary, #1890ff);
+  }
 
-.ei-number-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiPanel.vue b/packages/ui/src/components/EiPanel.vue
index 8a22a123..c509131e 100644
--- a/packages/ui/src/components/EiPanel.vue
+++ b/packages/ui/src/components/EiPanel.vue
@@ -44,7 +44,7 @@ const collapsed = ref(false)
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-panel {
   display: flex;
   flex-direction: column;
@@ -52,68 +52,68 @@ const collapsed = ref(false)
   border-radius: 4px;
   background: var(--ei-panel-bg, #fff);
   overflow: hidden;
-}
 
-.ei-panel__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 10px;
-  background: var(--ei-panel-header-bg, #fafafa);
-  user-select: none;
-}
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 10px;
+    background: var(--ei-panel-header-bg, #fafafa);
+    user-select: none;
+  }
 
-.ei-panel__title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--ei-text, #666);
-}
+  &__title {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--ei-text, #666);
+  }
 
-.ei-panel__actions {
-  display: flex;
-  gap: 4px;
-}
+  &__actions {
+    display: flex;
+    gap: 4px;
+  }
 
-.ei-panel__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--ei-text-secondary, #999);
-  line-height: 1;
-  border-radius: 2px;
-}
+  &__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--ei-text-secondary, #999);
+    line-height: 1;
+    border-radius: 2px;
 
-.ei-panel__action:hover {
-  background: var(--ei-hover-bg, #e8e8e8);
-  color: var(--ei-text, #333);
-}
+    &:hover {
+      background: var(--ei-hover-bg, #e8e8e8);
+      color: var(--ei-text, #333);
+    }
+  }
 
-.ei-panel__body {
-  padding: 8px;
-  overflow: auto;
-}
+  &__body {
+    padding: 8px;
+    overflow: auto;
+  }
 
-.ei-panel--collapsed .ei-panel__header {
-  border-bottom: none;
-}
+  &--collapsed &__header {
+    border-bottom: none;
+  }
 
-.ei-panel--flat {
-  border: none;
-  border-radius: 0;
-}
+  &--flat {
+    border: none;
+    border-radius: 0;
 
-.ei-panel--flat .ei-panel__header {
-  padding: 6px 0;
-  background: transparent;
-  border-bottom-color: var(--ei-border-color, #d0d0d0);
-}
+    .ei-panel__header {
+      padding: 6px 0;
+      background: transparent;
+      border-bottom-color: var(--ei-border-color, #d0d0d0);
+    }
 
-.ei-panel--flat .ei-panel__body {
-  padding: 8px 0;
+    .ei-panel__body {
+      padding: 8px 0;
+    }
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiSelect.vue b/packages/ui/src/components/EiSelect.vue
index 23e81a0c..c3a5e545 100644
--- a/packages/ui/src/components/EiSelect.vue
+++ b/packages/ui/src/components/EiSelect.vue
@@ -42,7 +42,7 @@ function onChange(event: Event) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-select-wrapper {
   display: flex;
   flex-direction: column;
@@ -50,11 +50,6 @@ function onChange(event: Event) {
   min-width: 0;
 }
 
-.ei-select__label {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-}
-
 .ei-select {
   padding: 4px 4px;
   border: 1px solid var(--ei-border-color, #d0d0d0);
@@ -66,14 +61,19 @@ function onChange(event: Event) {
   min-width: 0;
   width: 100%;
   box-sizing: border-box;
-}
 
-.ei-select:focus {
-  border-color: var(--ei-primary, #1890ff);
-}
+  &__label {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+  }
+
+  &:focus {
+    border-color: var(--ei-primary, #1890ff);
+  }
 
-.ei-select:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiSwitch.vue b/packages/ui/src/components/EiSwitch.vue
index 67c477b9..176fe2ba 100644
--- a/packages/ui/src/components/EiSwitch.vue
+++ b/packages/ui/src/components/EiSwitch.vue
@@ -34,7 +34,7 @@ function onClick() {
   </label>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-switch {
   display: flex;
   align-items: center;
@@ -43,50 +43,50 @@ function onClick() {
   cursor: pointer;
   font-size: 12px;
   color: var(--ei-text-secondary, #666);
-}
 
-.ei-switch--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.ei-switch__track {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  border-radius: 9px;
-  border: none;
-  padding: 0;
-  background: var(--ei-border-color, #d0d0d0);
-  cursor: inherit;
-  transition: background-color 0.2s;
-  flex-shrink: 0;
-}
+  &__track {
+    position: relative;
+    width: 32px;
+    height: 18px;
+    border-radius: 9px;
+    border: none;
+    padding: 0;
+    background: var(--ei-border-color, #d0d0d0);
+    cursor: inherit;
+    transition: background-color 0.2s;
+    flex-shrink: 0;
 
-.ei-switch__track--on {
-  background: var(--ei-primary, #1890ff);
-}
+    &--on {
+      background: var(--ei-primary, #1890ff);
 
-.ei-switch__track:disabled {
-  cursor: not-allowed;
-}
+      .ei-switch__thumb {
+        transform: translateX(14px);
+      }
+    }
 
-.ei-switch__thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #fff;
-  transition: transform 0.2s;
-}
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
 
-.ei-switch__track--on .ei-switch__thumb {
-  transform: translateX(14px);
-}
+  &__thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.2s;
+  }
 
-.ei-switch__label {
-  user-select: none;
+  &__label {
+    user-select: none;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiTextarea.vue b/packages/ui/src/components/EiTextarea.vue
index 1d330202..4517dc2a 100644
--- a/packages/ui/src/components/EiTextarea.vue
+++ b/packages/ui/src/components/EiTextarea.vue
@@ -49,7 +49,7 @@ function onCommit(event: Event) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-textarea-wrapper {
   display: flex;
   flex-direction: column;
@@ -57,11 +57,6 @@ function onCommit(event: Event) {
   min-width: 0;
 }
 
-.ei-textarea__label {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-}
-
 .ei-textarea {
   padding: 4px 8px;
   border: 1px solid var(--ei-border-color, #d0d0d0);
@@ -76,14 +71,19 @@ function onCommit(event: Event) {
   box-sizing: border-box;
   resize: vertical;
   line-height: 1.4;
-}
 
-.ei-textarea:focus {
-  border-color: var(--ei-primary, #1890ff);
-}
+  &__label {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+  }
+
+  &:focus {
+    border-color: var(--ei-primary, #1890ff);
+  }
 
-.ei-textarea:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }
 </style>
diff --git a/packages/ui/src/components/EiTree.vue b/packages/ui/src/components/EiTree.vue
index 0f71987c..85f1ab36 100644
--- a/packages/ui/src/components/EiTree.vue
+++ b/packages/ui/src/components/EiTree.vue
@@ -128,87 +128,92 @@ function isExpanded(id: string): boolean {
   </div>
 </template>
 
-<style scoped>
-.ei-tree--root {
-  font-size: 13px;
-}
-
-.ei-tree__node {
-  display: flex;
-  align-items: center;
-  padding: 4px 6px;
-  cursor: pointer;
-  border-radius: 4px;
-  user-select: none;
-  transition: background-color 0.15s;
-}
-
-.ei-tree__node:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
+<style scoped lang="scss">
+.ei-tree {
+  &--root {
+    font-size: 13px;
+  }
 
-.ei-tree__node--selected {
-  background: var(--ei-selected-bg, #e6f7ff);
-  color: var(--ei-primary, #1890ff);
-}
+  &__node {
+    display: flex;
+    align-items: center;
+    padding: 4px 6px;
+    cursor: pointer;
+    border-radius: 4px;
+    user-select: none;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background: var(--ei-hover-bg, #f0f0f0);
+
+      .ei-tree__suffix {
+        opacity: 1;
+      }
+    }
 
-.ei-tree__toggle {
-  width: 14px;
-  height: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--ei-text-secondary, #999);
-  border-radius: 3px;
-}
+    &--selected {
+      background: var(--ei-selected-bg, #e6f7ff);
+      color: var(--ei-primary, #1890ff);
 
-.ei-tree__toggle:hover {
-  background: var(--ei-hover-bg, #e8e8e8);
-}
+      .ei-tree__icon {
+        color: var(--ei-primary, #1890ff);
+      }
 
-.ei-tree__chevron {
-  width: 10px;
-  height: 10px;
-  transition: transform 0.15s ease;
-}
+      .ei-tree__suffix {
+        opacity: 1;
+      }
+    }
+  }
 
-.ei-tree__chevron--expanded {
-  transform: rotate(90deg);
-}
+  &__toggle {
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--ei-text-secondary, #999);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--ei-hover-bg, #e8e8e8);
+    }
+  }
 
-.ei-tree__icon {
-  flex-shrink: 0;
-  margin-right: 4px;
-  color: var(--ei-text-secondary, #999);
-}
+  &__chevron {
+    width: 10px;
+    height: 10px;
+    transition: transform 0.15s ease;
 
-.ei-tree__node--selected .ei-tree__icon {
-  color: var(--ei-primary, #1890ff);
-}
+    &--expanded {
+      transform: rotate(90deg);
+    }
+  }
 
-.ei-tree__label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  &__icon {
+    flex-shrink: 0;
+    margin-right: 4px;
+    color: var(--ei-text-secondary, #999);
+  }
 
-.ei-tree__suffix {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
+  &__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.ei-tree__node:hover .ei-tree__suffix,
-.ei-tree__node--selected .ei-tree__suffix {
-  opacity: 1;
-}
+  &__suffix {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
 
-.ei-tree__children {
-  padding-left: 12px;
+  &__children {
+    padding-left: 12px;
+  }
 }
 </style>

From 128c6eea54f10fcef44d2859f5bbe3d6bf8445a5 Mon Sep 17 00:00:00 2001
From: "anthropic-code-agent[bot]" <242468646+Claude@users.noreply.github.com>
Date: Mon, 27 Apr 2026 13:00:51 +0000
Subject: [PATCH 2/3] Convert AI components CSS to SCSS

Agent-Logs-Url: https://github.com/hackycy/easyink/sessions/d376e8ab-348b-4aba-8cfb-c788e8c7ec32

Co-authored-by: hackycy <26972260+hackycy@users.noreply.github.com>
---
 packages/ai/src/components/AIPanel.vue        | 210 +++++-----
 packages/ai/src/components/ChatInput.vue      | 126 +++---
 packages/ai/src/components/MessageBubble.vue  | 225 ++++++-----
 .../ai/src/components/SchemaJsonModal.vue     | 101 ++---
 .../ai/src/components/ServerManagerModal.vue  | 377 ++++++++++--------
 5 files changed, 544 insertions(+), 495 deletions(-)

diff --git a/packages/ai/src/components/AIPanel.vue b/packages/ai/src/components/AIPanel.vue
index 353ab599..63293652 100644
--- a/packages/ai/src/components/AIPanel.vue
+++ b/packages/ai/src/components/AIPanel.vue
@@ -558,7 +558,7 @@ watch(() => props.open, (open) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ai-panel {
   position: fixed;
   top: 0;
@@ -571,121 +571,121 @@ watch(() => props.open, (open) => {
   flex-direction: column;
   z-index: 1000;
   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
-}
-
-.ai-panel__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--ei-border, #e5e7eb);
-  flex-shrink: 0;
-}
 
-.ai-panel__title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ei-text, #111827);
-}
-
-.ai-panel__head-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.ai-panel__server-select {
-  font-size: 12px;
-  padding: 4px 8px;
-  border: 1px solid var(--ei-border, #d1d5db);
-  border-radius: 6px;
-  background: var(--ei-bg, #fff);
-  color: var(--ei-text, #111827);
-  max-width: 160px;
-}
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--ei-border, #e5e7eb);
+    flex-shrink: 0;
+  }
 
-.ai-panel__server-select:focus {
-  outline: none;
-  border-color: var(--ei-primary, #4f46e5);
-}
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--ei-text, #111827);
+  }
 
-.ai-panel__icon-btn {
-  background: none;
-  border: none;
-  padding: 6px;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--ei-text-secondary, #6b7280);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  &__head-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
 
-.ai-panel__icon-btn:hover {
-  background: var(--ei-bg-hover, #f3f4f6);
-  color: var(--ei-primary, #4f46e5);
-}
+  &__server-select {
+    font-size: 12px;
+    padding: 4px 8px;
+    border: 1px solid var(--ei-border, #d1d5db);
+    border-radius: 6px;
+    background: var(--ei-bg, #fff);
+    color: var(--ei-text, #111827);
+    max-width: 160px;
+
+    &:focus {
+      outline: none;
+      border-color: var(--ei-primary, #4f46e5);
+    }
+  }
 
-.ai-panel__scroller {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
+  &__icon-btn {
+    background: none;
+    border: none;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--ei-text-secondary, #6b7280);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background: var(--ei-bg-hover, #f3f4f6);
+      color: var(--ei-primary, #4f46e5);
+    }
+  }
 
-.ai-panel__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 100%;
-  color: var(--ei-text-secondary, #6b7280);
-  text-align: center;
-  padding: 0 24px;
-}
+  &__scroller {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
 
-.ai-panel__empty p {
-  margin: 0;
-  font-size: 13px;
-}
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 100%;
+    color: var(--ei-text-secondary, #6b7280);
+    text-align: center;
+    padding: 0 24px;
+
+    p {
+      margin: 0;
+      font-size: 13px;
+    }
 
-.ai-panel__empty-hint {
-  font-size: 12px !important;
-  color: var(--ei-text-quaternary, #9ca3af);
-}
+    &-hint {
+      font-size: 12px !important;
+      color: var(--ei-text-quaternary, #9ca3af);
+    }
+  }
 
-.ai-panel__footer {
-  padding: 10px 12px 12px;
-  border-top: 1px solid var(--ei-border, #e5e7eb);
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
+  &__footer {
+    padding: 10px 12px 12px;
+    border-top: 1px solid var(--ei-border, #e5e7eb);
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
 
-.ai-panel__hint {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #6b7280);
-}
+  &__hint {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #6b7280);
 
-.ai-panel__hint--warn {
-  color: #b45309;
-}
+    &--warn {
+      color: #b45309;
+    }
 
-.ai-panel__hint-link {
-  background: none;
-  border: none;
-  padding: 0 4px;
-  color: var(--ei-primary, #4f46e5);
-  cursor: pointer;
-  font: inherit;
-  text-decoration: underline;
+    &-link {
+      background: none;
+      border: none;
+      padding: 0 4px;
+      color: var(--ei-primary, #4f46e5);
+      cursor: pointer;
+      font: inherit;
+      text-decoration: underline;
+    }
+  }
 }
 </style>
diff --git a/packages/ai/src/components/ChatInput.vue b/packages/ai/src/components/ChatInput.vue
index 41a6dee9..ec935736 100644
--- a/packages/ai/src/components/ChatInput.vue
+++ b/packages/ai/src/components/ChatInput.vue
@@ -82,7 +82,7 @@ defineExpose({ focus: () => textareaRef.value?.focus() })
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ai-input {
   display: flex;
   align-items: center;
@@ -92,70 +92,70 @@ defineExpose({ focus: () => textareaRef.value?.focus() })
   border-radius: 12px;
   background: var(--ei-bg, #fff);
   transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.ai-input:focus-within {
-  border-color: var(--ei-primary, #4f46e5);
-  box-shadow: 0 0 0 3px var(--ei-primary-light, rgba(79, 70, 229, 0.1));
-}
-
-.ai-input__textarea {
-  flex: 1;
-  border: none;
-  outline: none;
-  resize: none;
-  font-size: 13px;
-  font-family: inherit;
-  line-height: 1.5;
-  background: transparent;
-  color: var(--ei-text, #111827);
-  max-height: 136px;
-  min-height: 20px;
-  padding: 0;
-}
-
-.ai-input__textarea::placeholder {
-  color: var(--ei-text-quaternary, #9ca3af);
-}
-
-.ai-input__textarea:disabled {
-  cursor: not-allowed;
-  color: var(--ei-text-secondary, #6b7280);
-}
-
-.ai-input__btn {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #fff;
-  transition: background 0.15s;
-}
-
-.ai-input__btn--send {
-  background: var(--ei-primary, #4f46e5);
-}
-
-.ai-input__btn--send:hover:not(:disabled) {
-  background: var(--ei-primary-hover, #4338ca);
-}
 
-.ai-input__btn--send:disabled {
-  background: var(--ei-bg-tertiary, #e5e7eb);
-  color: var(--ei-text-quaternary, #9ca3af);
-  cursor: not-allowed;
-}
+  &:focus-within {
+    border-color: var(--ei-primary, #4f46e5);
+    box-shadow: 0 0 0 3px var(--ei-primary-light, rgba(79, 70, 229, 0.1));
+  }
 
-.ai-input__btn--cancel {
-  background: var(--ei-danger, #dc2626);
-}
+  &__textarea {
+    flex: 1;
+    border: none;
+    outline: none;
+    resize: none;
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.5;
+    background: transparent;
+    color: var(--ei-text, #111827);
+    max-height: 136px;
+    min-height: 20px;
+    padding: 0;
+
+    &::placeholder {
+      color: var(--ei-text-quaternary, #9ca3af);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: var(--ei-text-secondary, #6b7280);
+    }
+  }
 
-.ai-input__btn--cancel:hover {
-  background: #b91c1c;
+  &__btn {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #fff;
+    transition: background 0.15s;
+
+    &--send {
+      background: var(--ei-primary, #4f46e5);
+
+      &:hover:not(:disabled) {
+        background: var(--ei-primary-hover, #4338ca);
+      }
+
+      &:disabled {
+        background: var(--ei-bg-tertiary, #e5e7eb);
+        color: var(--ei-text-quaternary, #9ca3af);
+        cursor: not-allowed;
+      }
+    }
+
+    &--cancel {
+      background: var(--ei-danger, #dc2626);
+
+      &:hover {
+        background: #b91c1c;
+      }
+    }
+  }
 }
 </style>
diff --git a/packages/ai/src/components/MessageBubble.vue b/packages/ai/src/components/MessageBubble.vue
index 838c3415..da37f598 100644
--- a/packages/ai/src/components/MessageBubble.vue
+++ b/packages/ai/src/components/MessageBubble.vue
@@ -130,143 +130,148 @@ function handleCopy() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ai-msg {
   display: flex;
   flex-direction: column;
   gap: 4px;
   max-width: 100%;
-}
 
-.ai-msg--user {
-  align-items: flex-end;
-}
+  &--user {
+    align-items: flex-end;
 
-.ai-msg--assistant {
-  align-items: flex-start;
-}
+    .ai-msg__bubble {
+      background: var(--ei-primary, #4f46e5);
+      color: #fff;
+      border-bottom-right-radius: 2px;
+    }
 
-.ai-msg__bubble {
-  padding: 10px 12px;
-  border-radius: 10px;
-  font-size: 13px;
-  line-height: 1.55;
-  max-width: 92%;
-  word-break: break-word;
-}
+    .ai-msg__tool {
+      background: rgba(255, 255, 255, 0.2);
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
 
-.ai-msg--user .ai-msg__bubble {
-  background: var(--ei-primary, #4f46e5);
-  color: #fff;
-  border-bottom-right-radius: 2px;
-}
+  &--assistant {
+    align-items: flex-start;
 
-.ai-msg--assistant .ai-msg__bubble {
-  background: var(--ei-bg-secondary, #f3f4f6);
-  color: var(--ei-text, #111827);
-  border-bottom-left-radius: 2px;
-}
+    .ai-msg__bubble {
+      background: var(--ei-bg-secondary, #f3f4f6);
+      color: var(--ei-text, #111827);
+      border-bottom-left-radius: 2px;
+    }
+  }
 
-.ai-msg--error .ai-msg__bubble {
-  background: #fef2f2;
-  color: #991b1b;
-}
+  &--error .ai-msg__bubble {
+    background: #fef2f2;
+    color: #991b1b;
+  }
 
-.ai-msg__content {
-  white-space: pre-wrap;
-}
+  &:hover &__actions {
+    opacity: 1;
+  }
 
-.ai-msg__caret {
-  display: inline-block;
-  width: 6px;
-  height: 14px;
-  margin-left: 2px;
-  background: currentColor;
-  vertical-align: text-bottom;
-  animation: ai-caret 1s steps(2) infinite;
-}
+  &__bubble {
+    padding: 10px 12px;
+    border-radius: 10px;
+    font-size: 13px;
+    line-height: 1.55;
+    max-width: 92%;
+    word-break: break-word;
+  }
 
-@keyframes ai-caret {
-  50% { opacity: 0; }
-}
+  &__content {
+    white-space: pre-wrap;
+  }
 
-.ai-msg__thinking {
-  display: inline-flex;
-  gap: 4px;
-  padding: 2px 0;
-}
+  &__caret {
+    display: inline-block;
+    width: 6px;
+    height: 14px;
+    margin-left: 2px;
+    background: currentColor;
+    vertical-align: text-bottom;
+    animation: ai-caret 1s steps(2) infinite;
+  }
 
-.ai-msg__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--ei-text-secondary, #6b7280);
-  opacity: 0.4;
-  animation: ai-dot 1.2s ease-in-out infinite;
-}
+  &__thinking {
+    display: inline-flex;
+    gap: 4px;
+    padding: 2px 0;
+  }
 
-.ai-msg__dot:nth-child(2) { animation-delay: 0.15s; }
-.ai-msg__dot:nth-child(3) { animation-delay: 0.3s; }
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--ei-text-secondary, #6b7280);
+    opacity: 0.4;
+    animation: ai-dot 1.2s ease-in-out infinite;
 
-@keyframes ai-dot {
-  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
-  40% { opacity: 1; transform: scale(1); }
-}
+    &:nth-child(2) {
+      animation-delay: 0.15s;
+    }
 
-.ai-msg__error {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 4px;
-  color: #dc2626;
-  font-size: 12px;
-}
+    &:nth-child(3) {
+      animation-delay: 0.3s;
+    }
+  }
 
-.ai-msg__tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-top: 8px;
-}
+  &__error {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 4px;
+    color: #dc2626;
+    font-size: 12px;
+  }
 
-.ai-msg__tool {
-  font-size: 10px;
-  padding: 2px 6px;
-  background: rgba(0, 0, 0, 0.06);
-  border-radius: 4px;
-  color: var(--ei-text-secondary, #6b7280);
-}
+  &__tools {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 8px;
+  }
 
-.ai-msg--user .ai-msg__tool {
-  background: rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 0.9);
-}
+  &__tool {
+    font-size: 10px;
+    padding: 2px 6px;
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 4px;
+    color: var(--ei-text-secondary, #6b7280);
+  }
 
-.ai-msg__actions {
-  display: flex;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
+  &__actions {
+    display: flex;
+    gap: 2px;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  &__action {
+    background: none;
+    border: none;
+    padding: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--ei-text-secondary, #6b7280);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-.ai-msg:hover .ai-msg__actions {
-  opacity: 1;
+    &:hover {
+      background: var(--ei-bg-hover, #f3f4f6);
+      color: var(--ei-primary, #4f46e5);
+    }
+  }
 }
 
-.ai-msg__action {
-  background: none;
-  border: none;
-  padding: 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--ei-text-secondary, #6b7280);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+@keyframes ai-caret {
+  50% { opacity: 0; }
 }
 
-.ai-msg__action:hover {
-  background: var(--ei-bg-hover, #f3f4f6);
-  color: var(--ei-primary, #4f46e5);
+@keyframes ai-dot {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
 }
 </style>
diff --git a/packages/ai/src/components/SchemaJsonModal.vue b/packages/ai/src/components/SchemaJsonModal.vue
index 0e034d72..c6aff45d 100644
--- a/packages/ai/src/components/SchemaJsonModal.vue
+++ b/packages/ai/src/components/SchemaJsonModal.vue
@@ -53,7 +53,7 @@ function copy() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ai-json {
   position: fixed;
   inset: 0;
@@ -62,60 +62,63 @@ function copy() {
   align-items: center;
   justify-content: center;
   z-index: 1100;
-}
 
-.ai-json__panel {
-  width: 720px;
-  max-width: 92vw;
-  height: 80vh;
-  background: var(--ei-bg, #fff);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
+  &__panel {
+    width: 720px;
+    max-width: 92vw;
+    height: 80vh;
+    background: var(--ei-bg, #fff);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 
-.ai-json__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--ei-border, #e5e7eb);
-}
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--ei-border, #e5e7eb);
 
-.ai-json__header h4 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ei-text, #111827);
-}
+    h4 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--ei-text, #111827);
+    }
+  }
 
-.ai-json__actions { display: flex; gap: 4px; }
+  &__actions {
+    display: flex;
+    gap: 4px;
+  }
 
-.ai-json__btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 4px;
-  color: var(--ei-text-secondary, #6b7280);
-  display: flex;
-}
+  &__btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 4px;
+    color: var(--ei-text-secondary, #6b7280);
+    display: flex;
 
-.ai-json__btn:hover {
-  background: var(--ei-bg-hover, #f3f4f6);
-  color: var(--ei-primary, #4f46e5);
-}
+    &:hover {
+      background: var(--ei-bg-hover, #f3f4f6);
+      color: var(--ei-primary, #4f46e5);
+    }
+  }
 
-.ai-json__pre {
-  flex: 1;
-  overflow: auto;
-  margin: 0;
-  padding: 16px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--ei-text, #111827);
-  background: var(--ei-bg-secondary, #f9fafb);
+  &__pre {
+    flex: 1;
+    overflow: auto;
+    margin: 0;
+    padding: 16px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--ei-text, #111827);
+    background: var(--ei-bg-secondary, #f9fafb);
+  }
 }
 </style>
diff --git a/packages/ai/src/components/ServerManagerModal.vue b/packages/ai/src/components/ServerManagerModal.vue
index 03118d93..dd835834 100644
--- a/packages/ai/src/components/ServerManagerModal.vue
+++ b/packages/ai/src/components/ServerManagerModal.vue
@@ -263,7 +263,7 @@ function normalizeServerConfig(config: Partial<MCPServerConfig>): Partial<MCPSer
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ai-modal {
   position: fixed;
   inset: 0;
@@ -272,61 +272,87 @@ function normalizeServerConfig(config: Partial<MCPServerConfig>): Partial<MCPSer
   align-items: center;
   justify-content: center;
   z-index: 1100;
-}
 
-.ai-modal__panel {
-  width: 460px;
-  max-width: 90vw;
-  max-height: 90vh;
-  background: var(--ei-bg, #fff);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
+  &__panel {
+    width: 460px;
+    max-width: 90vw;
+    max-height: 90vh;
+    background: var(--ei-bg, #fff);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 
-.ai-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--ei-border, #e5e7eb);
-}
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: 1px solid var(--ei-border, #e5e7eb);
+
+    h4 {
+      margin: 0;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--ei-text, #111827);
+    }
+  }
 
-.ai-modal__header h4 {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--ei-text, #111827);
-}
+  &__close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    color: var(--ei-text-secondary, #6b7280);
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--ei-bg-hover, #f3f4f6);
+    }
+  }
 
-.ai-modal__close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  color: var(--ei-text-secondary, #6b7280);
-  border-radius: 4px;
-}
+  &__body {
+    padding: 16px 18px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
 
-.ai-modal__close:hover {
-  background: var(--ei-bg-hover, #f3f4f6);
-}
+  &__empty {
+    text-align: center;
+    color: var(--ei-text-quaternary, #9ca3af);
+    font-size: 13px;
+    padding: 20px 0;
+  }
 
-.ai-modal__body {
-  padding: 16px 18px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+  &__add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px 12px;
+    background: none;
+    border: 1px dashed var(--ei-border, #d1d5db);
+    border-radius: 8px;
+    font-size: 13px;
+    color: var(--ei-text-secondary, #6b7280);
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--ei-primary, #4f46e5);
+      color: var(--ei-primary, #4f46e5);
+    }
+  }
 
-.ai-modal__empty {
-  text-align: center;
-  color: var(--ei-text-quaternary, #9ca3af);
-  font-size: 13px;
-  padding: 20px 0;
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 16px;
+  }
 }
 
 .ai-srv {
@@ -336,126 +362,141 @@ function normalizeServerConfig(config: Partial<MCPServerConfig>): Partial<MCPSer
   padding: 10px 12px;
   background: var(--ei-bg-secondary, #f9fafb);
   border-radius: 8px;
-}
 
-.ai-srv__main {
-  flex: 1;
-  min-width: 0;
-}
-
-.ai-srv__name {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--ei-text, #111827);
-}
-
-.ai-srv__meta {
-  font-size: 11px;
-  color: var(--ei-text-secondary, #6b7280);
-  margin-top: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ai-srv__badge {
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: var(--ei-bg-tertiary, #e5e7eb);
-  color: var(--ei-text-secondary, #6b7280);
-  font-weight: normal;
-}
+  &__main {
+    flex: 1;
+    min-width: 0;
+  }
 
-.ai-srv__badge--ok { background: #dcfce7; color: #166534; }
-.ai-srv__badge--err { background: #fee2e2; color: #991b1b; }
-.ai-srv__badge--warn { background: #fef3c7; color: #92400e; }
+  &__name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ei-text, #111827);
+  }
 
-.ai-srv__action {
-  background: none;
-  border: none;
-  padding: 6px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--ei-text-secondary, #6b7280);
-  display: flex;
-}
+  &__meta {
+    font-size: 11px;
+    color: var(--ei-text-secondary, #6b7280);
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.ai-srv__action:hover {
-  background: var(--ei-bg-hover, #f3f4f6);
-  color: var(--ei-primary, #4f46e5);
-}
+  &__badge {
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 4px;
+    background: var(--ei-bg-tertiary, #e5e7eb);
+    color: var(--ei-text-secondary, #6b7280);
+    font-weight: normal;
+
+    &--ok {
+      background: #dcfce7;
+      color: #166534;
+    }
+
+    &--err {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    &--warn {
+      background: #fef3c7;
+      color: #92400e;
+    }
+  }
 
-.ai-srv__action--danger:hover {
-  color: #dc2626;
+  &__action {
+    background: none;
+    border: none;
+    padding: 6px;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--ei-text-secondary, #6b7280);
+    display: flex;
+
+    &:hover {
+      background: var(--ei-bg-hover, #f3f4f6);
+      color: var(--ei-primary, #4f46e5);
+    }
+
+    &--danger:hover {
+      color: #dc2626;
+    }
+  }
 }
 
-.ai-modal__add {
+.ai-form {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: none;
-  border: 1px dashed var(--ei-border, #d1d5db);
-  border-radius: 8px;
-  font-size: 13px;
-  color: var(--ei-text-secondary, #6b7280);
-  cursor: pointer;
-}
-
-.ai-modal__add:hover {
-  border-color: var(--ei-primary, #4f46e5);
-  color: var(--ei-primary, #4f46e5);
-}
-
-.ai-form { display: flex; flex-direction: column; gap: 12px; }
-.ai-form__group { display: flex; flex-direction: column; gap: 4px; }
-.ai-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-.ai-form__group label { font-size: 12px; font-weight: 500; color: var(--ei-text, #111827); }
-.ai-form__check { flex-direction: row; align-items: center; gap: 6px; display: flex; }
+  flex-direction: column;
+  gap: 12px;
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--ei-text, #111827);
+    }
+
+    input,
+    select {
+      padding: 8px 10px;
+      border: 1px solid var(--ei-border, #d1d5db);
+      border-radius: 6px;
+      font-size: 13px;
+      background: var(--ei-bg, #fff);
+      color: var(--ei-text, #111827);
+
+      &:focus {
+        outline: none;
+        border-color: var(--ei-primary, #4f46e5);
+        box-shadow: 0 0 0 3px var(--ei-primary-light, rgba(79, 70, 229, 0.1));
+      }
 
-.ai-form__group input,
-.ai-form__group select {
-  padding: 8px 10px;
-  border: 1px solid var(--ei-border, #d1d5db);
-  border-radius: 6px;
-  font-size: 13px;
-  background: var(--ei-bg, #fff);
-  color: var(--ei-text, #111827);
-}
+      &:disabled {
+        background: var(--ei-bg-secondary, #f9fafb);
+        color: var(--ei-text-quaternary, #9ca3af);
+        cursor: not-allowed;
+      }
+    }
+  }
 
-.ai-form__group input:focus,
-.ai-form__group select:focus {
-  outline: none;
-  border-color: var(--ei-primary, #4f46e5);
-  box-shadow: 0 0 0 3px var(--ei-primary-light, rgba(79, 70, 229, 0.1));
-}
+  &__row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
 
-.ai-form__group input:disabled,
-.ai-form__group select:disabled {
-  background: var(--ei-bg-secondary, #f9fafb);
-  color: var(--ei-text-quaternary, #9ca3af);
-  cursor: not-allowed;
-}
+  &__check {
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    display: flex;
+  }
 
-.ai-form__errors {
-  background: #fef2f2;
-  border-radius: 6px;
-  padding: 10px 12px;
-}
+  &__errors {
+    background: #fef2f2;
+    border-radius: 6px;
+    padding: 10px 12px;
 
-.ai-form__errors p { margin: 0; color: #dc2626; font-size: 12px; }
-.ai-form__errors p + p { margin-top: 4px; }
+    p {
+      margin: 0;
+      color: #dc2626;
+      font-size: 12px;
 
-.ai-modal__actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 16px;
+      & + p {
+        margin-top: 4px;
+      }
+    }
+  }
 }
 
 .ai-btn {
@@ -465,21 +506,21 @@ function normalizeServerConfig(config: Partial<MCPServerConfig>): Partial<MCPSer
   font-weight: 500;
   cursor: pointer;
   border: 1px solid transparent;
-}
 
-.ai-btn--secondary {
-  background: var(--ei-bg-secondary, #f9fafb);
-  border-color: var(--ei-border, #d1d5db);
-  color: var(--ei-text, #111827);
-}
+  &--secondary {
+    background: var(--ei-bg-secondary, #f9fafb);
+    border-color: var(--ei-border, #d1d5db);
+    color: var(--ei-text, #111827);
+  }
 
-.ai-btn--primary {
-  background: var(--ei-primary, #4f46e5);
-  color: #fff;
-  border-color: var(--ei-primary, #4f46e5);
-}
+  &--primary {
+    background: var(--ei-primary, #4f46e5);
+    color: #fff;
+    border-color: var(--ei-primary, #4f46e5);
 
-.ai-btn--primary:hover {
-  background: var(--ei-primary-hover, #4338ca);
+    &:hover {
+      background: var(--ei-primary-hover, #4338ca);
+    }
+  }
 }
 </style>

From 83a2deb770f5f0badaac614215556631cb4a462d Mon Sep 17 00:00:00 2001
From: "anthropic-code-agent[bot]" <242468646+Claude@users.noreply.github.com>
Date: Mon, 27 Apr 2026 13:03:47 +0000
Subject: [PATCH 3/3] Convert Designer and Playground components CSS to SCSS

Agent-Logs-Url: https://github.com/hackycy/easyink/sessions/d376e8ab-348b-4aba-8cfb-c788e8c7ec32

Co-authored-by: hackycy <26972260+hackycy@users.noreply.github.com>
---
 .../src/components/BindingSection.vue         |  82 +++---
 .../src/components/CanvasContextMenu.vue      | 102 +++----
 .../designer/src/components/CanvasRuler.vue   |  30 +-
 .../src/components/CanvasWorkspace.vue        | 276 +++++++++---------
 .../src/components/DataSourcePanel.vue        | 114 ++++----
 .../designer/src/components/DebugPanel.vue    |  54 ++--
 .../src/components/DeepEditDragHandle.vue     |   8 +-
 .../src/components/EasyInkDesigner.vue        |  20 +-
 .../src/components/EphemeralPanelHost.vue     |   2 +-
 .../designer/src/components/GridOverlay.vue   |   2 +-
 .../designer/src/components/GuideOverlay.vue  |  66 ++---
 .../designer/src/components/HistoryPanel.vue  |  62 ++--
 .../designer/src/components/MaterialPanel.vue | 160 +++++-----
 .../designer/src/components/MinimapPanel.vue  |  26 +-
 .../src/components/PagePropertyEditor.vue     |   2 +-
 .../src/components/PropSchemaEditor.vue       |   2 +-
 .../src/components/PropertiesPanel.vue        |  30 +-
 .../src/components/SnapLineOverlay.vue        |  36 +--
 .../designer/src/components/StatusBar.vue     |  44 +--
 .../designer/src/components/StructureTree.vue |   2 +-
 .../src/components/ToolbarManager.vue         | 200 ++++++-------
 packages/designer/src/components/TopBarB.vue  | 194 ++++++------
 .../src/components/WorkspaceWindow.vue        | 202 ++++++-------
 .../datasource/DataFieldTreeNode.vue          | 136 ++++-----
 playground/src/PreviewOverlay.vue             |  18 +-
 25 files changed, 931 insertions(+), 939 deletions(-)

diff --git a/packages/designer/src/components/BindingSection.vue b/packages/designer/src/components/BindingSection.vue
index 8b81067a..ae2733e8 100644
--- a/packages/designer/src/components/BindingSection.vue
+++ b/packages/designer/src/components/BindingSection.vue
@@ -75,56 +75,56 @@ function handleClear() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-binding-section {
   width: 100%;
-}
 
-.ei-binding-section__header {
-  margin-bottom: 6px;
-}
+  &__header {
+    margin-bottom: 6px;
+  }
 
-.ei-binding-section__title {
-  font-weight: 500;
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
+  &__title {
+    font-weight: 500;
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
 
-.ei-binding-section__item {
-  padding: 6px;
-  background: var(--ei-panel-header-bg, #fafafa);
-  border: 1px solid var(--ei-border-color, #eee);
-  border-radius: 4px;
-  margin-bottom: 4px;
-}
+  &__item {
+    padding: 6px;
+    background: var(--ei-panel-header-bg, #fafafa);
+    border: 1px solid var(--ei-border-color, #eee);
+    border-radius: 4px;
+    margin-bottom: 4px;
+  }
 
-.ei-binding-section__row {
-  display: flex;
-  gap: 8px;
-  font-size: 12px;
-  line-height: 1.6;
-}
+  &__row {
+    display: flex;
+    gap: 8px;
+    font-size: 12px;
+    line-height: 1.6;
+  }
 
-.ei-binding-section__label {
-  color: var(--ei-text-secondary, #999);
-  flex-shrink: 0;
-  min-width: 32px;
-}
+  &__label {
+    color: var(--ei-text-secondary, #999);
+    flex-shrink: 0;
+    min-width: 32px;
+  }
 
-.ei-binding-section__value {
-  color: var(--ei-text, #333);
-  word-break: break-all;
-}
+  &__value {
+    color: var(--ei-text, #333);
+    word-break: break-all;
+  }
 
-.ei-binding-section__actions {
-  margin-top: 4px;
-}
+  &__actions {
+    margin-top: 4px;
+  }
 
-.ei-binding-section__empty {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #999);
-  padding: 4px 0;
+  &__empty {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #999);
+    padding: 4px 0;
+  }
 }
 </style>
diff --git a/packages/designer/src/components/CanvasContextMenu.vue b/packages/designer/src/components/CanvasContextMenu.vue
index 1ab8090f..02314c78 100644
--- a/packages/designer/src/components/CanvasContextMenu.vue
+++ b/packages/designer/src/components/CanvasContextMenu.vue
@@ -333,7 +333,7 @@ defineExpose({ onContextMenu })
   </Teleport>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-context-menu {
   position: fixed;
   z-index: 10000;
@@ -344,61 +344,61 @@ defineExpose({ onContextMenu })
   padding: 4px 0;
   min-width: 180px;
   font-size: 12px;
-}
-
-.ei-context-menu__divider {
-  height: 1px;
-  margin: 4px 8px;
-  background: var(--ei-border-color, #e8e8e8);
-}
 
-.ei-context-menu__item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  cursor: pointer;
-  color: var(--ei-text, #333);
-  white-space: nowrap;
-  border-radius: 4px;
-  margin: 0 4px;
-  transition: background 0.15s;
-}
-
-.ei-context-menu__item:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
-
-.ei-context-menu__item--destructive {
-  color: var(--ei-danger, #ff4d4f);
-}
-
-.ei-context-menu__item--disabled {
-  color: var(--ei-text-secondary, #999);
-  cursor: not-allowed;
-}
+  &__divider {
+    height: 1px;
+    margin: 4px 8px;
+    background: var(--ei-border-color, #e8e8e8);
+  }
 
-.ei-context-menu__item--disabled:hover {
-  background: none;
-}
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    cursor: pointer;
+    color: var(--ei-text, #333);
+    white-space: nowrap;
+    border-radius: 4px;
+    margin: 0 4px;
+    transition: background 0.15s;
+
+    &:hover {
+      background: var(--ei-hover-bg, #f0f0f0);
+    }
+
+    &--destructive {
+      color: var(--ei-danger, #ff4d4f);
+    }
+
+    &--disabled {
+      color: var(--ei-text-secondary, #999);
+      cursor: not-allowed;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
 
-.ei-context-menu__icon {
-  flex-shrink: 0;
-}
+  &__icon {
+    flex-shrink: 0;
+  }
 
-.ei-context-menu__label {
-  flex: 1;
-}
+  &__label {
+    flex: 1;
+  }
 
-.ei-context-menu__shortcut {
-  color: var(--ei-text-secondary, #999);
-  font-size: 11px;
-  margin-left: 16px;
-}
+  &__shortcut {
+    color: var(--ei-text-secondary, #999);
+    font-size: 11px;
+    margin-left: 16px;
+  }
 
-.ei-context-menu__empty {
-  padding: 8px 16px;
-  color: var(--ei-text-secondary, #999);
-  text-align: center;
+  &__empty {
+    padding: 8px 16px;
+    color: var(--ei-text-secondary, #999);
+    text-align: center;
+  }
 }
 </style>
diff --git a/packages/designer/src/components/CanvasRuler.vue b/packages/designer/src/components/CanvasRuler.vue
index b8382b63..4f2729ae 100644
--- a/packages/designer/src/components/CanvasRuler.vue
+++ b/packages/designer/src/components/CanvasRuler.vue
@@ -323,7 +323,7 @@ function handleRulerLeave() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-canvas-rulers {
   pointer-events: none;
   position: absolute;
@@ -349,21 +349,21 @@ function handleRulerLeave() {
   pointer-events: auto;
   position: absolute;
   display: block;
-}
 
-.ei-ruler--horizontal {
-  top: 0;
-  left: 20px;
-  right: 0;
-  height: 20px;
-  width: calc(100% - 20px);
-}
+  &--horizontal {
+    top: 0;
+    left: 20px;
+    right: 0;
+    height: 20px;
+    width: calc(100% - 20px);
+  }
 
-.ei-ruler--vertical {
-  top: 20px;
-  left: 0;
-  bottom: 0;
-  width: 20px;
-  height: calc(100% - 20px);
+  &--vertical {
+    top: 20px;
+    left: 0;
+    bottom: 0;
+    width: 20px;
+    height: calc(100% - 20px);
+  }
 }
 </style>
diff --git a/packages/designer/src/components/CanvasWorkspace.vue b/packages/designer/src/components/CanvasWorkspace.vue
index 4fa934e4..37a037f0 100644
--- a/packages/designer/src/components/CanvasWorkspace.vue
+++ b/packages/designer/src/components/CanvasWorkspace.vue
@@ -528,12 +528,19 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-canvas-workspace {
   flex: 1;
   overflow: hidden;
   background: var(--ei-canvas-bg, #e8e8e8);
   position: relative;
+
+  &__placeholder {
+    color: var(--ei-text-secondary, #999);
+    text-align: center;
+    padding: 20px;
+    font-size: 12px;
+  }
 }
 
 .ei-canvas-scroll {
@@ -558,160 +565,152 @@ onUnmounted(() => {
   position: absolute;
   cursor: move;
   box-sizing: border-box;
-}
-
-.ei-canvas-element--locked {
-  cursor: default;
-}
-
-.ei-canvas-element--hidden {
-  opacity: 0.3;
-}
-
-.ei-canvas-element--deep-editing {
-  z-index: 5 !important;
-  cursor: default;
-}
 
-.ei-canvas-element__content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  color: var(--ei-text-secondary, #999);
-  box-sizing: border-box;
-  overflow: visible;
-  position: relative;
-}
-
-.ei-canvas-element__content:not(:has(.ei-canvas-element__render)) {
-  border: 1px dashed var(--ei-border-color, #d0d0d0);
-}
+  &--locked {
+    cursor: default;
+  }
 
-.ei-canvas-element--selected .ei-canvas-element__content:not(:has(.ei-canvas-element__render)) {
-  border-color: var(--ei-primary, #1890ff);
-}
+  &--hidden {
+    opacity: 0.3;
+  }
 
-.ei-canvas-element__render {
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
+  &--deep-editing {
+    z-index: 5 !important;
+    cursor: default;
+  }
 
-.ei-canvas-element__type-label {
-  user-select: none;
-  pointer-events: none;
-}
+  &--selected &__content:not(:has(&__render)) {
+    border-color: var(--ei-primary, #1890ff);
+  }
 
-.ei-canvas-element__bind-badge {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--ei-success, #52c41a);
-}
+  &__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    color: var(--ei-text-secondary, #999);
+    box-sizing: border-box;
+    overflow: visible;
+    position: relative;
+
+    &:not(:has(.ei-canvas-element__render)) {
+      border: 1px dashed var(--ei-border-color, #d0d0d0);
+    }
+  }
 
-.ei-canvas-element__selection-border {
-  position: absolute;
-  inset: -1px;
-  border: 2px solid var(--ei-primary, #1890ff);
-  pointer-events: none;
-}
+  &__render {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
 
-/* ─── Resize Handles ──────────────────────────────────────────── */
+  &__type-label {
+    user-select: none;
+    pointer-events: none;
+  }
 
-.ei-canvas-element__handle {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: #fff;
-  border: 1.5px solid var(--ei-primary, #1890ff);
-  border-radius: 1px;
-  box-sizing: border-box;
-  z-index: 1;
-}
+  &__bind-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--ei-success, #52c41a);
+  }
 
-/* Corner handles */
-.ei-canvas-element__handle--nw {
-  top: -4px;
-  left: -4px;
-}
+  &__selection-border {
+    position: absolute;
+    inset: -1px;
+    border: 2px solid var(--ei-primary, #1890ff);
+    pointer-events: none;
+  }
 
-.ei-canvas-element__handle--ne {
-  top: -4px;
-  right: -4px;
-}
+  &__handle {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #fff;
+    border: 1.5px solid var(--ei-primary, #1890ff);
+    border-radius: 1px;
+    box-sizing: border-box;
+    z-index: 1;
+
+    &--nw {
+      top: -4px;
+      left: -4px;
+    }
 
-.ei-canvas-element__handle--sw {
-  bottom: -4px;
-  left: -4px;
-}
+    &--ne {
+      top: -4px;
+      right: -4px;
+    }
 
-.ei-canvas-element__handle--se {
-  bottom: -4px;
-  right: -4px;
-}
+    &--sw {
+      bottom: -4px;
+      left: -4px;
+    }
 
-/* Edge handles */
-.ei-canvas-element__handle--n {
-  top: -4px;
-  left: 50%;
-  transform: translateX(-50%);
-}
+    &--se {
+      bottom: -4px;
+      right: -4px;
+    }
 
-.ei-canvas-element__handle--s {
-  bottom: -4px;
-  left: 50%;
-  transform: translateX(-50%);
-}
+    &--n {
+      top: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
 
-.ei-canvas-element__handle--w {
-  top: 50%;
-  left: -4px;
-  transform: translateY(-50%);
-}
+    &--s {
+      bottom: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
 
-.ei-canvas-element__handle--e {
-  top: 50%;
-  right: -4px;
-  transform: translateY(-50%);
-}
+    &--w {
+      top: 50%;
+      left: -4px;
+      transform: translateY(-50%);
+    }
 
-/* ─── Rotation Handle ────────────────────────────────────────── */
+    &--e {
+      top: 50%;
+      right: -4px;
+      transform: translateY(-50%);
+    }
+  }
 
-.ei-canvas-element__rotate-handle {
-  position: absolute;
-  top: -30px;
-  left: 50%;
-  transform: translateX(-50%);
-  cursor: crosshair;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+  &__rotate-handle {
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    cursor: crosshair;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-.ei-canvas-element__rotate-line {
-  width: 1px;
-  height: 20px;
-  background: var(--ei-primary, #1890ff);
-}
+  &__rotate-line {
+    width: 1px;
+    height: 20px;
+    background: var(--ei-primary, #1890ff);
+  }
 
-.ei-canvas-element__rotate-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #fff;
-  border: 1.5px solid var(--ei-primary, #1890ff);
-  box-sizing: border-box;
+  &__rotate-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #fff;
+    border: 1.5px solid var(--ei-primary, #1890ff);
+    box-sizing: border-box;
+  }
 }
 
-/* ─── Marquee Selection ───────────────────────────────────────── */
-
 .ei-canvas-marquee {
   position: absolute;
   border: 1px solid var(--ei-primary, #1890ff);
@@ -720,21 +719,10 @@ onUnmounted(() => {
   z-index: 9999;
 }
 
-/* ─── Floating Windows ────────────────────────────────────────── */
-
 .ei-canvas-windows {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
 }
-
-.ei-canvas-workspace__placeholder {
-  color: var(--ei-text-secondary, #999);
-  text-align: center;
-  padding: 20px;
-  font-size: 12px;
-}
-
-/* ─── Floating Windows ────────────────────────────────────────── */
 </style>
diff --git a/packages/designer/src/components/DataSourcePanel.vue b/packages/designer/src/components/DataSourcePanel.vue
index d9bc0d5b..93090ec0 100644
--- a/packages/designer/src/components/DataSourcePanel.vue
+++ b/packages/designer/src/components/DataSourcePanel.vue
@@ -97,69 +97,69 @@ function childKey(source: DataSourceDescriptor, child: DataFieldNode): string {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-datasource-panel {
   font-size: 12px;
-}
-
-.ei-datasource-panel__source {
-  margin-bottom: 4px;
-}
-
-.ei-datasource-panel__source-header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px 4px 4px;
-  font-weight: 500;
-  cursor: pointer;
-  border-radius: 3px;
-  user-select: none;
-  color: var(--ei-text, #333);
-}
 
-.ei-datasource-panel__source-header:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
-
-.ei-datasource-panel__chevron {
-  flex-shrink: 0;
-  color: var(--ei-text-secondary, #999);
-  transition: transform 0.15s ease;
-}
-
-.ei-datasource-panel__chevron--expanded {
-  transform: rotate(90deg);
-}
+  &__source {
+    margin-bottom: 4px;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px 4px 4px;
+      font-weight: 500;
+      cursor: pointer;
+      border-radius: 3px;
+      user-select: none;
+      color: var(--ei-text, #333);
+
+      &:hover {
+        background: var(--ei-hover-bg, #f0f0f0);
+      }
+    }
+
+    &-icon {
+      flex-shrink: 0;
+      color: var(--ei-text-secondary, #999);
+    }
+
+    &-name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-body {
+      padding-left: 16px;
+    }
+  }
 
-.ei-datasource-panel__source-icon {
-  flex-shrink: 0;
-  color: var(--ei-text-secondary, #999);
-}
+  &__chevron {
+    flex-shrink: 0;
+    color: var(--ei-text-secondary, #999);
+    transition: transform 0.15s ease;
 
-.ei-datasource-panel__source-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ei-datasource-panel__source-body {
-  padding-left: 16px;
-}
+    &--expanded {
+      transform: rotate(90deg);
+    }
+  }
 
-.ei-datasource-panel__empty {
-  color: var(--ei-text-secondary, #999);
-  text-align: center;
-  padding: 20px;
-}
+  &__empty {
+    color: var(--ei-text-secondary, #999);
+    text-align: center;
+    padding: 20px;
+  }
 
-.ei-datasource-panel__hint {
-  color: var(--ei-text-secondary, #999);
-  font-size: 11px;
-  text-align: center;
-  padding: 8px;
-  border-top: 1px solid var(--ei-border-color, #eee);
-  margin-top: 4px;
+  &__hint {
+    color: var(--ei-text-secondary, #999);
+    font-size: 11px;
+    text-align: center;
+    padding: 8px;
+    border-top: 1px solid var(--ei-border-color, #eee);
+    margin-top: 4px;
+  }
 }
 </style>
diff --git a/packages/designer/src/components/DebugPanel.vue b/packages/designer/src/components/DebugPanel.vue
index 79d06994..32790448 100644
--- a/packages/designer/src/components/DebugPanel.vue
+++ b/packages/designer/src/components/DebugPanel.vue
@@ -28,36 +28,36 @@ const selectedCount = computed(() => store.selection.count)
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-debug-panel {
   font-size: 11px;
   padding: 8px;
-}
-
-.ei-debug-panel__stats {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 8px;
-  color: var(--ei-text-secondary, #666);
-}
 
-.ei-debug-panel__schema summary {
-  cursor: pointer;
-  color: var(--ei-text, #333);
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.ei-debug-panel__code {
-  max-height: 300px;
-  overflow: auto;
-  background: var(--ei-canvas-bg, #f5f5f5);
-  padding: 8px;
-  border-radius: 3px;
-  font-family: monospace;
-  font-size: 10px;
-  white-space: pre-wrap;
-  word-break: break-all;
+  &__stats {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-bottom: 8px;
+    color: var(--ei-text-secondary, #666);
+  }
+
+  &__schema summary {
+    cursor: pointer;
+    color: var(--ei-text, #333);
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  &__code {
+    max-height: 300px;
+    overflow: auto;
+    background: var(--ei-canvas-bg, #f5f5f5);
+    padding: 8px;
+    border-radius: 3px;
+    font-family: monospace;
+    font-size: 10px;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
 }
 </style>
diff --git a/packages/designer/src/components/DeepEditDragHandle.vue b/packages/designer/src/components/DeepEditDragHandle.vue
index 47030644..ff4ffcb4 100644
--- a/packages/designer/src/components/DeepEditDragHandle.vue
+++ b/packages/designer/src/components/DeepEditDragHandle.vue
@@ -52,7 +52,7 @@ function handlePointerDown(e: PointerEvent) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-deep-edit-drag-handle {
   position: absolute;
   transform: translate(-16px, -16px);
@@ -63,9 +63,9 @@ function handlePointerDown(e: PointerEvent) {
   display: flex;
   align-items: center;
   justify-content: center;
-}
 
-.ei-deep-edit-drag-handle:hover {
-  filter: brightness(0.9);
+  &:hover {
+    filter: brightness(0.9);
+  }
 }
 </style>
diff --git a/packages/designer/src/components/EasyInkDesigner.vue b/packages/designer/src/components/EasyInkDesigner.vue
index 2c141978..eb999073 100644
--- a/packages/designer/src/components/EasyInkDesigner.vue
+++ b/packages/designer/src/components/EasyInkDesigner.vue
@@ -117,7 +117,7 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-designer {
   display: flex;
   flex-direction: column;
@@ -128,16 +128,16 @@ onBeforeUnmount(() => {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow: hidden;
   position: relative;
-}
 
-.ei-designer__overlay-root {
-  position: fixed;
-  inset: 0;
-  z-index: 999;
-  pointer-events: none;
-}
+  &__overlay-root {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    pointer-events: none;
 
-.ei-designer__overlay-root > * {
-  pointer-events: auto;
+    > * {
+      pointer-events: auto;
+    }
+  }
 }
 </style>
diff --git a/packages/designer/src/components/EphemeralPanelHost.vue b/packages/designer/src/components/EphemeralPanelHost.vue
index c0e7211c..ebabb37a 100644
--- a/packages/designer/src/components/EphemeralPanelHost.vue
+++ b/packages/designer/src/components/EphemeralPanelHost.vue
@@ -64,7 +64,7 @@ function handleClose() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-ephemeral-panel {
   position: absolute;
   z-index: 15;
diff --git a/packages/designer/src/components/GridOverlay.vue b/packages/designer/src/components/GridOverlay.vue
index 585a987e..310f2a4e 100644
--- a/packages/designer/src/components/GridOverlay.vue
+++ b/packages/designer/src/components/GridOverlay.vue
@@ -30,7 +30,7 @@ const gridStyle = computed(() => {
   />
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-grid-overlay {
   position: absolute;
   inset: 0;
diff --git a/packages/designer/src/components/GuideOverlay.vue b/packages/designer/src/components/GuideOverlay.vue
index 22ad4e22..dcb8b899 100644
--- a/packages/designer/src/components/GuideOverlay.vue
+++ b/packages/designer/src/components/GuideOverlay.vue
@@ -163,7 +163,7 @@ defineExpose({ onGuideDragStart, createGuideAt })
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-guide-overlay {
   position: absolute;
   inset: 0;
@@ -174,40 +174,40 @@ defineExpose({ onGuideDragStart, createGuideAt })
 .ei-guide {
   position: absolute;
   pointer-events: auto;
-}
-
-.ei-guide--vertical {
-  top: 0;
-  bottom: 0;
-  width: 0;
-  border-left: 1px dashed var(--ei-guide-color, #f50);
-  cursor: ew-resize;
-}
-
-.ei-guide--vertical::before {
-  content: '';
-  position: absolute;
-  inset: 0 -3px;
-}
 
-.ei-guide--horizontal {
-  left: 0;
-  right: 0;
-  height: 0;
-  border-top: 1px dashed var(--ei-guide-color, #f50);
-  cursor: ns-resize;
-}
+  &--vertical {
+    top: 0;
+    bottom: 0;
+    width: 0;
+    border-left: 1px dashed var(--ei-guide-color, #f50);
+    cursor: ew-resize;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0 -3px;
+    }
+  }
 
-.ei-guide--horizontal::before {
-  content: '';
-  position: absolute;
-  inset: -3px 0;
-}
+  &--horizontal {
+    left: 0;
+    right: 0;
+    height: 0;
+    border-top: 1px dashed var(--ei-guide-color, #f50);
+    cursor: ns-resize;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -3px 0;
+    }
+  }
 
-.ei-guide--preview {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: default;
-  border-color: var(--ei-primary, #1890ff);
+  &--preview {
+    pointer-events: none;
+    opacity: 0.5;
+    cursor: default;
+    border-color: var(--ei-primary, #1890ff);
+  }
 }
 </style>
diff --git a/packages/designer/src/components/HistoryPanel.vue b/packages/designer/src/components/HistoryPanel.vue
index 9854a775..9250ce08 100644
--- a/packages/designer/src/components/HistoryPanel.vue
+++ b/packages/designer/src/components/HistoryPanel.vue
@@ -88,39 +88,39 @@ watchEffect((onCleanup) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-history-panel {
   font-size: 12px;
-}
-
-.ei-history-panel__list {
-  display: flex;
-  flex-direction: column;
-}
-
-.ei-history-panel__item {
-  padding: 4px 8px;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ei-history-panel__item:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
-
-.ei-history-panel__item--active {
-  background: var(--ei-selected-bg, #e6f7ff);
-  color: var(--ei-primary, #1890ff);
-}
-
-.ei-history-panel__item--active:hover {
-  background: var(--ei-selected-bg, #e6f7ff);
-}
 
-.ei-history-panel__item--undone {
-  opacity: 0.4;
+  &__list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__item {
+    padding: 4px 8px;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background: var(--ei-hover-bg, #f0f0f0);
+    }
+
+    &--active {
+      background: var(--ei-selected-bg, #e6f7ff);
+      color: var(--ei-primary, #1890ff);
+
+      &:hover {
+        background: var(--ei-selected-bg, #e6f7ff);
+      }
+    }
+
+    &--undone {
+      opacity: 0.4;
+    }
+  }
 }
 </style>
diff --git a/packages/designer/src/components/MaterialPanel.vue b/packages/designer/src/components/MaterialPanel.vue
index 10695bcd..2dd28401 100644
--- a/packages/designer/src/components/MaterialPanel.vue
+++ b/packages/designer/src/components/MaterialPanel.vue
@@ -134,88 +134,88 @@ function handleDragStart(e: DragEvent, entry: MaterialCatalogEntry) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-material-panel {
   overflow-y: auto;
-}
-
-.ei-material-panel__empty {
-  margin-bottom: 12px;
-  padding: 12px;
-  border: 1px solid var(--ei-border-color, #e0e0e0);
-  border-radius: 6px;
-  background: var(--ei-hover-bg, #f7f7f7);
-}
-
-.ei-material-panel__empty-title {
-  margin-bottom: 4px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--ei-text, #333);
-}
-
-.ei-material-panel__empty-text {
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--ei-text-secondary, #666);
-}
-
-.ei-material-panel__section {
-  margin-bottom: 12px;
-}
-
-.ei-material-panel__section-title {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--ei-text-secondary, #999);
-  margin-bottom: 6px;
-  padding: 0 4px;
-}
-
-.ei-material-panel__grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 4px;
-}
-
-.ei-material-panel__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 4px;
-  border: 1px solid var(--ei-border-color, #e0e0e0);
-  border-radius: 4px;
-  background: var(--ei-bg, #fff);
-  cursor: grab;
-  color: var(--ei-text, #333);
-}
-
-.ei-material-panel__item:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-  border-color: var(--ei-primary, #1890ff);
-  color: var(--ei-primary, #1890ff);
-}
-
-.ei-material-panel__item:active {
-  cursor: grabbing;
-}
-
-.ei-material-panel__icon {
-  flex-shrink: 0;
-  color: var(--ei-text-secondary, #666);
-}
-
-.ei-material-panel__item:hover .ei-material-panel__icon {
-  color: var(--ei-primary, #1890ff);
-}
 
-.ei-material-panel__label {
-  font-size: 10px;
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
+  &__empty {
+    margin-bottom: 12px;
+    padding: 12px;
+    border: 1px solid var(--ei-border-color, #e0e0e0);
+    border-radius: 6px;
+    background: var(--ei-hover-bg, #f7f7f7);
+
+    &-title {
+      margin-bottom: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--ei-text, #333);
+    }
+
+    &-text {
+      font-size: 11px;
+      line-height: 1.5;
+      color: var(--ei-text-secondary, #666);
+    }
+  }
+
+  &__section {
+    margin-bottom: 12px;
+
+    &-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--ei-text-secondary, #999);
+      margin-bottom: 6px;
+      padding: 0 4px;
+    }
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 4px;
+    border: 1px solid var(--ei-border-color, #e0e0e0);
+    border-radius: 4px;
+    background: var(--ei-bg, #fff);
+    cursor: grab;
+    color: var(--ei-text, #333);
+
+    &:hover {
+      background: var(--ei-hover-bg, #f0f0f0);
+      border-color: var(--ei-primary, #1890ff);
+      color: var(--ei-primary, #1890ff);
+
+      .ei-material-panel__icon {
+        color: var(--ei-primary, #1890ff);
+      }
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    color: var(--ei-text-secondary, #666);
+  }
+
+  &__label {
+    font-size: 10px;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
 }
 </style>
diff --git a/packages/designer/src/components/MinimapPanel.vue b/packages/designer/src/components/MinimapPanel.vue
index fc2fff80..6e5d2173 100644
--- a/packages/designer/src/components/MinimapPanel.vue
+++ b/packages/designer/src/components/MinimapPanel.vue
@@ -34,24 +34,24 @@ const minimapHeight = computed(() => minimapWidth / pageRatio.value)
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-minimap-panel {
   padding: 8px;
   display: flex;
   justify-content: center;
-}
 
-.ei-minimap-panel__canvas {
-  background: #fff;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  position: relative;
-  overflow: hidden;
-}
+  &__canvas {
+    background: #fff;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    position: relative;
+    overflow: hidden;
+  }
 
-.ei-minimap-panel__element {
-  position: absolute;
-  background: var(--ei-primary, #1890ff);
-  opacity: 0.3;
-  border-radius: 1px;
+  &__element {
+    position: absolute;
+    background: var(--ei-primary, #1890ff);
+    opacity: 0.3;
+    border-radius: 1px;
+  }
 }
 </style>
diff --git a/packages/designer/src/components/PagePropertyEditor.vue b/packages/designer/src/components/PagePropertyEditor.vue
index 5d26bde4..0e7bd944 100644
--- a/packages/designer/src/components/PagePropertyEditor.vue
+++ b/packages/designer/src/components/PagePropertyEditor.vue
@@ -104,7 +104,7 @@ function onCommit(val: unknown) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-page-prop-editor {
   width: 100%;
 }
diff --git a/packages/designer/src/components/PropSchemaEditor.vue b/packages/designer/src/components/PropSchemaEditor.vue
index 4a8990ab..c3d9e6dd 100644
--- a/packages/designer/src/components/PropSchemaEditor.vue
+++ b/packages/designer/src/components/PropSchemaEditor.vue
@@ -203,7 +203,7 @@ function onCommit(val: unknown) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-prop-editor {
   width: 100%;
 }
diff --git a/packages/designer/src/components/PropertiesPanel.vue b/packages/designer/src/components/PropertiesPanel.vue
index a37271ae..f55f923a 100644
--- a/packages/designer/src/components/PropertiesPanel.vue
+++ b/packages/designer/src/components/PropertiesPanel.vue
@@ -593,7 +593,7 @@ function readPropValue(schema: PropSchema): unknown {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-properties-panel {
   width: 100%;
   font-size: 13px;
@@ -601,22 +601,22 @@ function readPropValue(schema: PropSchema): unknown {
   flex-direction: column;
   padding: 0 4px;
   gap: 4px;
-}
 
-.ei-properties-panel__grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px;
-}
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
+  }
 
-.ei-properties-panel__fields {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
 
-.ei-properties-panel__cell-label {
-  font-size: 12px;
-  color: var(--ei-text-secondary, #666);
+  &__cell-label {
+    font-size: 12px;
+    color: var(--ei-text-secondary, #666);
+  }
 }
 </style>
diff --git a/packages/designer/src/components/SnapLineOverlay.vue b/packages/designer/src/components/SnapLineOverlay.vue
index 0b586df0..4ce4a5be 100644
--- a/packages/designer/src/components/SnapLineOverlay.vue
+++ b/packages/designer/src/components/SnapLineOverlay.vue
@@ -32,29 +32,29 @@ const yLines = computed(() =>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-snap-overlay {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: visible;
-}
-
-.ei-snap-overlay__line {
-  position: absolute;
-}
-
-.ei-snap-overlay__line--vertical {
-  top: 0;
-  bottom: 0;
-  width: 0;
-  border-left: 1px dashed var(--ei-snap-line-color, #ff4081);
-}
 
-.ei-snap-overlay__line--horizontal {
-  left: 0;
-  right: 0;
-  height: 0;
-  border-top: 1px dashed var(--ei-snap-line-color, #ff4081);
+  &__line {
+    position: absolute;
+
+    &--vertical {
+      top: 0;
+      bottom: 0;
+      width: 0;
+      border-left: 1px dashed var(--ei-snap-line-color, #ff4081);
+    }
+
+    &--horizontal {
+      left: 0;
+      right: 0;
+      height: 0;
+      border-top: 1px dashed var(--ei-snap-line-color, #ff4081);
+    }
+  }
 }
 </style>
diff --git a/packages/designer/src/components/StatusBar.vue b/packages/designer/src/components/StatusBar.vue
index ac76915b..09876952 100644
--- a/packages/designer/src/components/StatusBar.vue
+++ b/packages/designer/src/components/StatusBar.vue
@@ -105,7 +105,7 @@ function statusTitle(prefix: string, value: string): string {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-status-bar {
   display: flex;
   align-items: center;
@@ -117,28 +117,32 @@ function statusTitle(prefix: string, value: string): string {
   color: var(--ei-text-secondary, #999);
   gap: 12px;
   flex-shrink: 0;
-}
 
-.ei-status-bar__spacer {
-  flex: 1;
-}
+  &__spacer {
+    flex: 1;
+  }
 
-.ei-status-bar__item {
-  display: flex;
-  align-items: center;
-  user-select: none;
-}
+  &__item {
+    display: flex;
+    align-items: center;
+    user-select: none;
 
-.ei-status-bar__item--error {
-  color: var(--ei-error, #ff4d4f);
-}
+    &--error {
+      color: var(--ei-error, #ff4d4f);
+    }
 
-.ei-status-bar__item--warning {
-  color: var(--ei-warning, #faad14);
-}
+    &--warning {
+      color: var(--ei-warning, #faad14);
+    }
+
+    &--success {
+      color: var(--ei-success, #52c41a);
+    }
+  }
 
-.ei-status-bar__item--success {
-  color: var(--ei-success, #52c41a);
+  &__spin {
+    animation: ei-spin 1s linear infinite;
+  }
 }
 
 @keyframes ei-spin {
@@ -149,8 +153,4 @@ function statusTitle(prefix: string, value: string): string {
     transform: rotate(360deg);
   }
 }
-
-.ei-status-bar__spin {
-  animation: ei-spin 1s linear infinite;
-}
 </style>
diff --git a/packages/designer/src/components/StructureTree.vue b/packages/designer/src/components/StructureTree.vue
index 09bca143..39096fc6 100644
--- a/packages/designer/src/components/StructureTree.vue
+++ b/packages/designer/src/components/StructureTree.vue
@@ -101,7 +101,7 @@ function handleSelect(node: TreeNode) {
   </EiTree>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .structure-tree__status {
   color: var(--ei-text-secondary, #999);
 }
diff --git a/packages/designer/src/components/ToolbarManager.vue b/packages/designer/src/components/ToolbarManager.vue
index 5a5e548f..7dedfaf9 100644
--- a/packages/designer/src/components/ToolbarManager.vue
+++ b/packages/designer/src/components/ToolbarManager.vue
@@ -134,119 +134,119 @@ function groupLabelKey(id: string): string {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-toolbar-manager {
   font-size: 12px;
-}
-
-.ei-toolbar-manager__section {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 0;
-  margin: 0 10px;
-  border-bottom: 1px solid var(--ei-border-color, #eee);
-}
-
-.ei-toolbar-manager__label {
-  color: var(--ei-text-secondary, #666);
-}
-
-.ei-toolbar-manager__align-group {
-  display: flex;
-  gap: 2px;
-}
-
-.ei-toolbar-manager__align-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--ei-text, #333);
-}
 
-.ei-toolbar-manager__align--active {
-  background: var(--ei-primary, #1890ff) !important;
-  color: #fff;
-  border-color: var(--ei-primary, #1890ff) !important;
-}
+  &__section {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 0;
+    margin: 0 10px;
+    border-bottom: 1px solid var(--ei-border-color, #eee);
+  }
 
-.ei-toolbar-manager__list {
-  padding: 4px 0;
-}
+  &__label {
+    color: var(--ei-text-secondary, #666);
+  }
 
-.ei-toolbar-manager__item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 10px;
-}
+  &__align-group {
+    display: flex;
+    gap: 2px;
+  }
 
-.ei-toolbar-manager__icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--ei-text, #333);
-}
+  &__align-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 24px;
+    padding: 0;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 3px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--ei-text, #333);
+  }
 
-.ei-toolbar-manager__icon-btn:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
+  &__align--active {
+    background: var(--ei-primary, #1890ff) !important;
+    color: #fff;
+    border-color: var(--ei-primary, #1890ff) !important;
+  }
 
-.ei-toolbar-manager__icon-btn.is-inactive {
-  opacity: 0.3;
-}
+  &__list {
+    padding: 4px 0;
+  }
 
-.ei-toolbar-manager__icon-btn:disabled {
-  opacity: 0.15;
-  pointer-events: none;
-}
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 10px;
+  }
 
-.ei-toolbar-manager__group-label {
-  flex: 1;
-  min-width: 0;
-}
+  &__icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 3px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--ei-text, #333);
+
+    &:hover {
+      background: var(--ei-hover-bg, #f0f0f0);
+    }
+
+    &.is-inactive {
+      opacity: 0.3;
+    }
+
+    &:disabled {
+      opacity: 0.15;
+      pointer-events: none;
+    }
+  }
 
-.ei-toolbar-manager__group-label.is-hidden {
-  opacity: 0.4;
-  text-decoration: line-through;
-}
+  &__group-label {
+    flex: 1;
+    min-width: 0;
 
-.ei-toolbar-manager__footer {
-  padding: 6px 0;
-  margin: 0 10px;
-  border-top: 1px solid var(--ei-border-color, #eee);
-}
+    &.is-hidden {
+      opacity: 0.4;
+      text-decoration: line-through;
+    }
+  }
 
-.ei-toolbar-manager__restore {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  width: 100%;
-  padding: 4px;
-  border: 1px solid var(--ei-border-color, #d0d0d0);
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--ei-text, #333);
-}
+  &__footer {
+    padding: 6px 0;
+    margin: 0 10px;
+    border-top: 1px solid var(--ei-border-color, #eee);
+  }
 
-.ei-toolbar-manager__restore:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
+  &__restore {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
+    padding: 4px;
+    border: 1px solid var(--ei-border-color, #d0d0d0);
+    border-radius: 3px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--ei-text, #333);
+
+    &:hover {
+      background: var(--ei-hover-bg, #f0f0f0);
+    }
+  }
 }
 </style>
diff --git a/packages/designer/src/components/TopBarB.vue b/packages/designer/src/components/TopBarB.vue
index 8b44c98d..b4abd6c7 100644
--- a/packages/designer/src/components/TopBarB.vue
+++ b/packages/designer/src/components/TopBarB.vue
@@ -810,7 +810,7 @@ function handleSnap() {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-topbar-b {
   display: flex;
   align-items: center;
@@ -819,116 +819,116 @@ function handleSnap() {
   border-bottom: 1px solid var(--ei-border-color, #e0e0e0);
   background: var(--ei-topbar-bg, #fafafa);
   gap: 4px;
-}
-
-.ei-topbar-b__groups {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  overflow-x: hidden;
-  flex: 1;
-  min-width: 0;
-  scroll-behavior: smooth;
-}
 
-.ei-topbar-b--align-center .ei-topbar-b__groups {
-  justify-content: center;
-}
-
-.ei-topbar-b--align-end .ei-topbar-b__groups {
-  justify-content: flex-end;
-}
+  &--align-center &__groups {
+    justify-content: center;
+  }
 
-.ei-topbar-b__group {
-  display: flex;
-  gap: 1px;
-  flex-shrink: 0;
-}
+  &--align-end &__groups {
+    justify-content: flex-end;
+  }
 
-.ei-topbar-b__window-toggles {
-  overflow: hidden;
-  flex-shrink: 1;
-  min-width: 0;
-}
+  &__groups {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    overflow-x: hidden;
+    flex: 1;
+    min-width: 0;
+    scroll-behavior: smooth;
+  }
 
-.ei-topbar-b__btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--ei-text, #333);
-}
+  &__group {
+    display: flex;
+    gap: 1px;
+    flex-shrink: 0;
+  }
 
-.ei-topbar-b__btn:hover:not(:disabled) {
-  background: var(--ei-hover-bg, #e8e8e8);
-}
+  &__window-toggles {
+    overflow: hidden;
+    flex-shrink: 1;
+    min-width: 0;
+  }
 
-.ei-topbar-b__btn:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
+  &__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--ei-text, #333);
+
+    &:hover:not(:disabled) {
+      background: var(--ei-hover-bg, #e8e8e8);
+    }
 
-.ei-topbar-b__btn--active {
-  background: var(--ei-active-bg, #d0d0d0);
-  border-color: var(--ei-border-color, #e0e0e0);
-}
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
 
-.ei-topbar-b__btn--contribution {
-  color: var(--ei-primary, #4f46e5);
-}
+    &--active {
+      background: var(--ei-active-bg, #d0d0d0);
+      border-color: var(--ei-border-color, #e0e0e0);
+    }
 
-.ei-topbar-b__btn--contribution:hover {
-  background: var(--ei-primary-light, rgba(79, 70, 229, 0.1));
-}
+    &--contribution {
+      color: var(--ei-primary, #4f46e5);
 
-.ei-topbar-b__scroll-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--ei-text-secondary, #999);
-  flex-shrink: 0;
-}
+      &:hover {
+        background: var(--ei-primary-light, rgba(79, 70, 229, 0.1));
+      }
+    }
+  }
 
-.ei-topbar-b__scroll-btn:hover {
-  background: var(--ei-hover-bg, #e8e8e8);
-  color: var(--ei-text, #333);
-}
+  &__scroll-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 3px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--ei-text-secondary, #999);
+    flex-shrink: 0;
+
+    &:hover {
+      background: var(--ei-hover-bg, #e8e8e8);
+      color: var(--ei-text, #333);
+    }
+  }
 
-.ei-topbar-b__divider {
-  width: 1px;
-  height: 20px;
-  background: var(--ei-border-color, #e0e0e0);
-  flex-shrink: 0;
-}
+  &__divider {
+    width: 1px;
+    height: 20px;
+    background: var(--ei-border-color, #e0e0e0);
+    flex-shrink: 0;
+  }
 
-.ei-topbar-b__spacer {
-  flex: 1;
-}
+  &__spacer {
+    flex: 1;
+  }
 
-.ei-topbar-b__zoom {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-}
+  &__zoom {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+  }
 
-.ei-topbar-b__zoom-label {
-  font-size: 12px;
-  min-width: 40px;
-  text-align: center;
-  user-select: none;
+  &__zoom-label {
+    font-size: 12px;
+    min-width: 40px;
+    text-align: center;
+    user-select: none;
+  }
 }
 </style>
diff --git a/packages/designer/src/components/WorkspaceWindow.vue b/packages/designer/src/components/WorkspaceWindow.vue
index a5eb44ec..a8a7aadf 100644
--- a/packages/designer/src/components/WorkspaceWindow.vue
+++ b/packages/designer/src/components/WorkspaceWindow.vue
@@ -112,7 +112,7 @@ function onResizeStart(e: PointerEvent) {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .ei-workspace-window {
   position: absolute;
   background: var(--ei-panel-bg, #fff);
@@ -123,111 +123,111 @@ function onResizeStart(e: PointerEvent) {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-}
-
-.ei-workspace-window__titlebar {
-  display: flex;
-  align-items: center;
-  height: 26px;
-  padding: 0 8px;
-  background: var(--ei-panel-header-bg, #fafafa);
-  border-bottom: 1px solid var(--ei-border-color, #e0e0e0);
-  cursor: grab;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.ei-workspace-window__titlebar:active {
-  cursor: grabbing;
-}
-
-.ei-workspace-window__title {
-  flex: 1;
-  font-size: 12px;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ei-workspace-window__actions {
-  display: flex;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-.ei-workspace-window__action {
-  width: 18px;
-  height: 18px;
-  border: none;
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 11px;
-  color: var(--ei-text-secondary, #999);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-.ei-workspace-window__action:hover {
-  background: var(--ei-hover-bg, #e8e8e8);
-  color: var(--ei-text, #333);
-}
-
-.ei-workspace-window__body {
-  overflow: auto;
-  padding: 8px;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  transition: scrollbar-color 0.2s;
-}
-
-.ei-workspace-window__body:hover {
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-.ei-workspace-window__body::-webkit-scrollbar {
-  width: 2px;
-  height: 2px;
-}
 
-.ei-workspace-window__body::-webkit-scrollbar-track {
-  background: transparent;
-}
+  &__titlebar {
+    display: flex;
+    align-items: center;
+    height: 26px;
+    padding: 0 8px;
+    background: var(--ei-panel-header-bg, #fafafa);
+    border-bottom: 1px solid var(--ei-border-color, #e0e0e0);
+    cursor: grab;
+    user-select: none;
+    flex-shrink: 0;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
 
-.ei-workspace-window__body::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 2px;
-  transition: background 0.2s;
-}
+  &__title {
+    flex: 1;
+    font-size: 12px;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.ei-workspace-window__body:hover::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-}
+  &__actions {
+    display: flex;
+    gap: 2px;
+    flex-shrink: 0;
+  }
 
-.ei-workspace-window__body:hover::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.35);
-}
+  &__action {
+    width: 18px;
+    height: 18px;
+    border: none;
+    border-radius: 3px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 11px;
+    color: var(--ei-text-secondary, #999);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    &:hover {
+      background: var(--ei-hover-bg, #e8e8e8);
+      color: var(--ei-text, #333);
+    }
+  }
 
-.ei-workspace-window__resize-handle {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 12px;
-  height: 12px;
-  cursor: nwse-resize;
-}
+  &__body {
+    overflow: auto;
+    padding: 8px;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.2s;
+
+    &:hover {
+      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.35);
+        }
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 2px;
+      height: 2px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: transparent;
+      border-radius: 2px;
+      transition: background 0.2s;
+    }
+  }
 
-.ei-workspace-window__resize-handle::before {
-  content: '';
-  position: absolute;
-  right: 2px;
-  bottom: 2px;
-  width: 6px;
-  height: 6px;
-  border-right: 2px solid var(--ei-border-color, #ccc);
-  border-bottom: 2px solid var(--ei-border-color, #ccc);
+  &__resize-handle {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 12px;
+    height: 12px;
+    cursor: nwse-resize;
+
+    &::before {
+      content: '';
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      width: 6px;
+      height: 6px;
+      border-right: 2px solid var(--ei-border-color, #ccc);
+      border-bottom: 2px solid var(--ei-border-color, #ccc);
+    }
+  }
 }
 </style>
diff --git a/packages/designer/src/components/datasource/DataFieldTreeNode.vue b/packages/designer/src/components/datasource/DataFieldTreeNode.vue
index 9b07c8c1..7cde5267 100644
--- a/packages/designer/src/components/datasource/DataFieldTreeNode.vue
+++ b/packages/designer/src/components/datasource/DataFieldTreeNode.vue
@@ -107,79 +107,81 @@ function onDragStart(e: DragEvent) {
   </div>
 </template>
 
-<style scoped>
-.ei-field-node__row {
-  display: flex;
-  align-items: center;
-  padding: 3px 8px 3px 4px;
-  border-radius: 3px;
-  user-select: none;
-  gap: 4px;
-  min-height: 26px;
-}
-
-.ei-field-node__row--group {
-  cursor: pointer;
-}
-
-.ei-field-node__row--group:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
-
-.ei-field-node__row--leaf {
-  cursor: grab;
-}
-
-.ei-field-node__row--leaf:active {
-  cursor: grabbing;
-}
-
-.ei-field-node__row--leaf:hover {
-  background: var(--ei-hover-bg, #f0f0f0);
-}
-
-.ei-field-node__row--leaf:hover .ei-field-node__path {
-  opacity: 1;
-}
+<style scoped lang="scss">
+.ei-field-node {
+  &__row {
+    display: flex;
+    align-items: center;
+    padding: 3px 8px 3px 4px;
+    border-radius: 3px;
+    user-select: none;
+    gap: 4px;
+    min-height: 26px;
+
+    &--group {
+      cursor: pointer;
+
+      &:hover {
+        background: var(--ei-hover-bg, #f0f0f0);
+      }
+    }
+
+    &--leaf {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+
+      &:hover {
+        background: var(--ei-hover-bg, #f0f0f0);
+
+        .ei-field-node__path {
+          opacity: 1;
+        }
+      }
+    }
+  }
 
-.ei-field-node__chevron {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  color: var(--ei-text-secondary, #999);
-  transition: transform 0.15s ease;
-}
+  &__chevron {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--ei-text-secondary, #999);
+    transition: transform 0.15s ease;
 
-.ei-field-node__chevron--expanded {
-  transform: rotate(90deg);
-}
+    &--expanded {
+      transform: rotate(90deg);
+    }
+  }
 
-.ei-field-node__chevron-spacer {
-  flex-shrink: 0;
-  width: 14px;
-}
+  &__chevron-spacer {
+    flex-shrink: 0;
+    width: 14px;
+  }
 
-.ei-field-node__icon {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-}
+  &__icon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
 
-.ei-field-node__icon--folder {
-  color: var(--ei-text-secondary, #999);
-}
+    &--folder {
+      color: var(--ei-text-secondary, #999);
+    }
+  }
 
-.ei-field-node__grip {
-  flex-shrink: 0;
-  color: var(--ei-text-secondary, #999);
-}
+  &__grip {
+    flex-shrink: 0;
+    color: var(--ei-text-secondary, #999);
+  }
 
-.ei-field-node__label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--ei-text, #333);
-  font-size: 12px;
+  &__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--ei-text, #333);
+    font-size: 12px;
+  }
 }
 </style>
diff --git a/playground/src/PreviewOverlay.vue b/playground/src/PreviewOverlay.vue
index 1dc8c3cc..79347a2a 100644
--- a/playground/src/PreviewOverlay.vue
+++ b/playground/src/PreviewOverlay.vue
@@ -221,14 +221,16 @@ async function handleExport() {
   </div>
 </template>
 
-<style scoped>
-.preview-fade-enter-active,
-.preview-fade-leave-active {
-  transition: opacity 0.2s ease;
-}
+<style scoped lang="scss">
+.preview-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 0.2s ease;
+  }
 
-.preview-fade-enter-from,
-.preview-fade-leave-to {
-  opacity: 0;
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
 }
 </style>