列表和表格模式切换

lingtropy-client/docs/package-lock.json

@@ -12,7 +12,8 @@
         "vitepress": "^1.5.0",
         "vitepress-i18n": "^1.3.1",
         "vitepress-sidebar": "^1.30.2",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vutron-docs": "file:"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2777,6 +2778,10 @@
         }
       }
     },
+    "node_modules/vutron-docs": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

lingtropy-client/docs/package.json

@@ -16,6 +16,7 @@
     "vitepress": "^1.5.0",
     "vitepress-i18n": "^1.3.1",
     "vitepress-sidebar": "^1.30.2",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vutron-docs": "file:"
   }
 }

lingtropy-client/src/renderer/components/InputSection.vue

@@ -0,0 +1,342 @@
+<template>
+    <div class="input-section">
+      <div class="header-section">
+        <div class="logo-container">
+          <div class="logo-icon">AI</div>
+        </div>
+        <div class="header-content">
+          <h1 class="title">文案生成工具</h1>
+          <p class="subtitle">智能改写，提升文案质量</p>
+        </div>
+        <button @click="$emit('toggle-settings')" class="settings-button">
+          <span class="settings-icon">⚙️</span>
+        </button>
+      </div>
+      
+      <ModelSelector 
+        :selectedModel="selectedModel"
+        :availableModels="availableModels"
+        @update:selectedModel="$emit('update:selectedModel', $event)"
+      />
+      
+      <RewriteMode 
+        :mode="mode"
+        :generationCount="generationCount"
+        @update:mode="$emit('update:mode', $event)"
+        @update:generationCount="$emit('update:generationCount', $event)"
+      />
+      
+      <div class="original-text-section">
+        <h2 class="section-title">
+          <span class="section-icon">📝</span>
+          原始文案
+          <span v-if="originalText" class="char-count">{{ originalText.length }} 字</span>
+        </h2>
+        <textarea 
+          :value="originalText"
+          @input="$emit('update:originalText', $event.target.value)"
+          class="text-input"
+          placeholder="请在此输入需要改写的文本..."
+        ></textarea>
+      </div>
+      
+      <button 
+        :disabled="isGenerating"
+        @click="$emit('rewrite')"
+        class="rewrite-button"
+      >
+        <span v-if="isGenerating" class="loading-spinner"></span>
+        <span v-else>{{ mode === 'single' ? '生成改写' : '批量生成' }}</span>
+      </button>
+    </div>
+  </template>
+  
+  <script setup>
+  import ModelSelector from './ModelSelector.vue'
+  import RewriteMode from './RewriteMode.vue'
+  
+  defineProps({
+    mode: String,
+    originalText: String,
+    generationCount: Number,
+    selectedModel: String,
+    availableModels: Array,
+    isGenerating: Boolean
+  })
+  
+  defineEmits([
+    'update:mode',
+    'update:originalText',
+    'update:generationCount',
+    'update:selectedModel',
+    'rewrite',
+    'toggle-settings'
+  ])
+  </script>
+  
+  <style scoped>
+  .input-section {
+    flex: 0 0 40%;
+    max-width: 600px;
+    min-width: 320px;
+    background-color: white;
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    padding: 28px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.9);
+  }
+  
+  :deep(.dark-mode) .input-section {
+    background-color: rgba(30, 30, 46, 0.9);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  }
+  
+  /* Logo 样式 */
+  .header-section {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 28px;
+    position: relative;
+  }
+  
+  .header-content {
+    flex: 1;
+  }
+  
+  .logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .logo-icon {
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, #2ecc71, #27ae60);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    font-size: 20px;
+    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+  }
+  
+  /* 设置按钮 */
+  .settings-button {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background-color: #f5f5f5;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+  
+  .settings-button:hover {
+    background-color: #e0e0e0;
+    transform: rotate(30deg);
+  }
+  
+  .settings-icon {
+    font-size: 20px;
+  }
+  
+  :deep(.dark-mode) .settings-button {
+    background-color: #2d2d3a;
+    color: #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .settings-button:hover {
+    background-color: #3d3d4a;
+  }
+  
+  /* 标题样式 */
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 0 0 4px 0;
+    background: linear-gradient(90deg, #2ecc71, #27ae60);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+  }
+  
+  .subtitle {
+    color: #666;
+    margin: 0;
+    font-size: 14px;
+  }
+  
+  :deep(.dark-mode) .subtitle {
+    color: #aaa;
+  }
+  
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 16px 0;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  :deep(.dark-mode) .section-title {
+    color: #f0f0f0;
+  }
+  
+  .section-icon {
+    font-size: 20px;
+  }
+  
+  /* 字数统计 */
+  .char-count {
+    font-size: 14px;
+    color: #666;
+    font-weight: normal;
+    margin-left: auto;
+    background-color: #f0f0f0;
+    padding: 2px 8px;
+    border-radius: 12px;
+  }
+  
+  :deep(.dark-mode) .char-count {
+    background-color: #2d2d3a;
+    color: #aaa;
+  }
+  
+  /* 输入区域样式 */
+  .original-text-section {
+    margin-bottom: 24px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .text-input {
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    font-family: inherit;
+    font-size: 16px;
+    padding: 16px;
+    resize: none;
+    width: 100%;
+    flex-grow: 1;
+    min-height: 150px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    background-color: #f9f9f9;
+  }
+  
+  .text-input:focus {
+    outline: none;
+    border-color: #2ecc71;
+    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
+    background-color: white;
+  }
+  
+  :deep(.dark-mode) .text-input {
+    background-color: #2d2d3a;
+    border-color: #3d3d4a;
+    color: #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .text-input:focus {
+    border-color: #2ecc71;
+    background-color: #252533;
+  }
+  
+  /* 按钮样式 */
+  .rewrite-button {
+    background: linear-gradient(135deg, #2ecc71, #27ae60);
+    border: none;
+    border-radius: 10px;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 16px;
+    padding: 16px;
+    transition: all 0.3s ease;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
+  }
+  
+  .rewrite-button:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
+  }
+  
+  .rewrite-button:active:not(:disabled) {
+    transform: translateY(1px);
+    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
+  }
+  
+  .rewrite-button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+  
+  /* 加载动画 */
+  .loading-spinner {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s ease-in-out infinite;
+  }
+  
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  
+  @media (max-width: 1200px) {
+    .input-section {
+      flex: none;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .input-section {
+      padding: 20px;
+      border-radius: 12px;
+    }
+    
+    .header-section {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    .settings-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .input-section {
+      padding: 16px;
+    }
+  }
+  </style>

lingtropy-client/src/renderer/components/ResultSection.vue

@@ -0,0 +1,309 @@
+<template>
+    <div class="result-section">
+      <div class="result-header-bar">
+        <h2 class="section-title">
+          <span class="section-icon">✨</span>
+          改写结果
+        </h2>
+        <div class="result-actions">
+          <div class="display-mode-toggle">
+            <button 
+              :class="{ active: displayMode === 'list' }"
+              @click="$emit('change-display-mode', 'list')"
+              class="display-mode-button"
+              title="列表视图"
+            >
+              <span class="mode-icon">📃</span>
+            </button>
+            <button 
+              :class="{ active: displayMode === 'grid' }"
+              @click="$emit('change-display-mode', 'grid')"
+              class="display-mode-button"
+              title="网格视图"
+            >
+              <span class="mode-icon">📊</span>
+            </button>
+          </div>
+          <div class="result-stats">
+            <span class="model-badge">{{ selectedModel }}</span>
+            <span class="count-badge">{{ rewrittenText.length }} 个结果</span>
+          </div>
+        </div>
+      </div>
+      
+      <div v-if="isGenerating && rewrittenText.length === 0" class="generating-placeholder">
+        <div class="generating-animation">
+          <div class="dot"></div>
+          <div class="dot"></div>
+          <div class="dot"></div>
+        </div>
+        <p>正在使用 {{ selectedModel }} 生成改写结果...</p>
+      </div>
+      
+      <div v-else class="results-container">
+        <div :class="['results-wrapper', `display-${displayMode}`]">
+          <ResultItem 
+            v-for="(text, index) in rewrittenText"
+            :key="index"
+            :text="text"
+            :index="index"
+            :isExpanded="expandedResults[index]"
+            :isCopied="copiedIndex === index"
+            @toggle-expand="$emit('toggle-expand', index)"
+            @copy-text="$emit('copy-text', text, index)"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import ResultItem from './ResultItem.vue'
+  
+  defineProps({
+    rewrittenText: Array,
+    selectedModel: String,
+    isGenerating: Boolean,
+    expandedResults: Object,
+    copiedIndex: Number,
+    displayMode: String
+  })
+  
+  defineEmits(['toggle-expand', 'copy-text', 'change-display-mode'])
+  </script>
+  
+  <style scoped>
+  .result-section {
+    flex: 1;
+    background-color: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    padding: 28px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+  
+  :deep(.dark-mode) .result-section {
+    background-color: rgba(30, 30, 46, 0.9);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  }
+  
+  .result-header-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .result-header-bar {
+    border-bottom-color: #3d3d4a;
+  }
+  
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  :deep(.dark-mode) .section-title {
+    color: #f0f0f0;
+  }
+  
+  .section-icon {
+    font-size: 20px;
+  }
+  
+  .result-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  
+  .display-mode-toggle {
+    display: flex;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    padding: 2px;
+  }
+  
+  :deep(.dark-mode) .display-mode-toggle {
+    background-color: #2d2d3a;
+  }
+  
+  .display-mode-button {
+    background: none;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .display-mode-button.active {
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  :deep(.dark-mode) .display-mode-button.active {
+    background-color: #3d3d4a;
+  }
+  
+  .mode-icon {
+    font-size: 16px;
+  }
+  
+  .result-stats {
+    display: flex;
+    gap: 12px;
+  }
+  
+  .model-badge, .count-badge {
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  
+  .model-badge {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+  }
+  
+  :deep(.dark-mode) .model-badge {
+    background-color: #2e7d32;
+    color: #e8f5e9;
+  }
+  
+  .count-badge {
+    background-color: #e3f2fd;
+    color: #1565c0;
+  }
+  
+  :deep(.dark-mode) .count-badge {
+    background-color: #1565c0;
+    color: #e3f2fd;
+  }
+  
+  /* 结果区域样式 */
+  .results-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px;
+  }
+  
+  .results-wrapper {
+    padding: 4px;
+  }
+  
+  .display-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .display-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+  
+  /* 生成中占位符 */
+  .generating-placeholder {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+    color: #666;
+  }
+  
+  :deep(.dark-mode) .generating-placeholder {
+    color: #aaa;
+  }
+  
+  .generating-placeholder p {
+    margin-top: 20px;
+    font-size: 16px;
+  }
+  
+  .generating-animation {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+  
+  .dot {
+    width: 12px;
+    height: 12px;
+    background-color: #2ecc71;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+  }
+  
+  .dot:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+  
+  .dot:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+  
+  @keyframes bounce {
+    0%, 80%, 100% { 
+      transform: scale(0);
+    } 
+    40% { 
+      transform: scale(1.0);
+    }
+  }
+  
+  @media (max-width: 1200px) {
+    .result-section {
+      width: 100%;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .result-section {
+      padding: 20px;
+      border-radius: 12px;
+    }
+    
+    .result-header-bar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 12px;
+    }
+    
+    .result-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
+    
+    .display-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .result-section {
+      padding: 16px;
+    }
+    
+    .result-stats {
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
+  </style>

lingtropy-client/src/renderer/components/SettingsModal.vue

@@ -0,0 +1,339 @@
+<template>
+    <div @click="$emit('close')" class="modal-overlay">
+      <div @click.stop class="settings-modal">
+        <div class="modal-header">
+          <h2>设置</h2>
+          <button @click="$emit('close')" class="close-button">×</button>
+        </div>
+        <div class="modal-content">
+          <div class="settings-section">
+            <h3>界面设置</h3>
+            <div class="setting-item">
+              <label class="setting-label">
+                <input v-model="localSettings.darkMode" type="checkbox">
+                深色模式
+              </label>
+            </div>
+            <div class="setting-item">
+              <label class="setting-label">
+                <input v-model="localSettings.compactMode" type="checkbox">
+                紧凑视图
+              </label>
+            </div>
+          </div>
+          
+          <div class="settings-section">
+            <h3>生成设置</h3>
+            <div class="setting-item">
+              <label class="setting-label">温度值</label>
+              <div class="slider-container">
+                <input 
+                  v-model="localSettings.temperature"
+                  min="0"
+                  max="100"
+                  type="range"
+                  class="slider"
+                >
+                <span class="slider-value">{{ localSettings.temperature / 100 }}</span>
+              </div>
+            </div>
+            <div class="setting-item">
+              <label class="setting-label">最大长度</label>
+              <select v-model="localSettings.maxLength" class="select-input">
+                <option value="500">500 字</option>
+                <option value="1000">1000 字</option>
+                <option value="2000">2000 字</option>
+                <option value="3000">3000 字</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button @click="$emit('close')" class="cancel-button">取消</button>
+          <button @click="saveSettings" class="save-button">保存设置</button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { reactive, onMounted } from 'vue'
+  
+  const props = defineProps({
+    settings: Object
+  })
+  
+  const emit = defineEmits(['close', 'save'])
+  
+  const localSettings = reactive({
+    darkMode: false,
+    compactMode: false,
+    temperature: 70,
+    maxLength: '2000'
+  })
+  
+  onMounted(() => {
+    // 复制设置到本地状态
+    Object.assign(localSettings, props.settings)
+  })
+  
+  const saveSettings = () => {
+    emit('save', localSettings)
+  }
+  </script>
+  
+<style scoped>
+  /* 设置弹窗 */
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+    backdrop-filter: blur(5px);
+  }
+  
+  .settings-modal {
+    background-color: white;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    animation: slideUp 0.3s ease;
+  }
+  
+  :deep(.dark-mode) .settings-modal {
+    background-color: #2d2d3a;
+    color: #f0f0f0;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  }
+  
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .modal-header {
+    border-bottom-color: #3d3d4a;
+  }
+  
+  .modal-header h2 {
+    margin: 0;
+    font-size: 20px;
+    color: #333;
+  }
+  
+  :deep(.dark-mode) .modal-header h2 {
+    color: #f0f0f0;
+  }
+  
+  .close-button {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #666;
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+  
+  .close-button:hover {
+    color: #333;
+  }
+  
+  :deep(.dark-mode) .close-button {
+    color: #aaa;
+  }
+  
+  :deep(.dark-mode) .close-button:hover {
+    color: #f0f0f0;
+  }
+  
+  .modal-content {
+    padding: 20px;
+  }
+  
+  .settings-section {
+    margin-bottom: 24px;
+  }
+  
+  .settings-section h3 {
+    font-size: 18px;
+    margin: 0 0 16px 0;
+    color: #333;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .settings-section h3 {
+    color: #f0f0f0;
+    border-bottom-color: #3d3d4a;
+  }
+  
+  .setting-item {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .setting-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    color: #333;
+  }
+  
+  :deep(.dark-mode) .setting-label {
+    color: #f0f0f0;
+  }
+  
+  .slider-container {
+    display: flex;
+    align-  .setting-label {
+    color: #f0f0f0;
+        }
+    }
+  
+  .slider-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+    max-width: 200px;
+  }
+  
+  .slider {
+    flex: 1;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #e0e0e0;
+    border-radius: 3px;
+    outline: none;
+  }
+  
+  :deep(.dark-mode) .slider {
+    background: #3d3d4a;
+  }
+  
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #2ecc71;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+  }
+  
+  .slider-value {
+    min-width: 40px;
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  :deep(.dark-mode) .slider-value {
+    color: #aaa;
+  }
+  
+  .select-input {
+    padding: 8px 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 14px;
+    background-color: white;
+    min-width: 120px;
+  }
+  
+  :deep(.dark-mode) .select-input {
+    background-color: #252533;
+    border-color: #3d3d4a;
+    color: #f0f0f0;
+  }
+  
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 20px;
+    border-top: 1px solid #f0f0f0;
+  }
+  
+  :deep(.dark-mode) .modal-footer {
+    border-top-color: #3d3d4a;
+  }
+  
+  .cancel-button, .save-button {
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  
+  .cancel-button {
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    color: #666;
+  }
+  
+  :deep(.dark-mode) .cancel-button {
+    background-color: #3d3d4a;
+    border-color: #4d4d5a;
+    color: #f0f0f0;
+  }
+  
+  .cancel-button:hover {
+    background-color: #e0e0e0;
+  }
+  
+  :deep(.dark-mode) .cancel-button:hover {
+    background-color: #4d4d5a;
+  }
+  
+  .save-button {
+    background-color: #2ecc71;
+    border: none;
+    color: white;
+  }
+  
+  .save-button:hover {
+    background-color: #27ae60;
+  }
+  
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+
+  </style>