✨ Add update service

frontend/bindings/voidraft/internal/models/models.ts

@@ -1001,11 +1001,6 @@ export class UpdatesConfig {
      */
     "autoUpdate": boolean;
 
-    /**
-     * 是否启用测试版
-     */
-    "betaChannel": boolean;
-
     /** Creates a new UpdatesConfig instance. */
     constructor($$source: Partial<UpdatesConfig> = {}) {
         if (!("version" in $$source)) {
@@ -1014,9 +1009,6 @@ export class UpdatesConfig {
         if (!("autoUpdate" in $$source)) {
             this["autoUpdate"] = false;
         }
-        if (!("betaChannel" in $$source)) {
-            this["betaChannel"] = false;
-        }
 
         Object.assign(this, $$source);
     }

frontend/bindings/voidraft/internal/services/index.ts

@@ -10,6 +10,7 @@ import * as MigrationService from "./migrationservice.js";
 import * as StartupService from "./startupservice.js";
 import * as SystemService from "./systemservice.js";
 import * as TrayService from "./trayservice.js";
+import * as UpdateService from "./updateservice.js";
 export {
     ConfigService,
     DialogService,
@@ -19,7 +20,8 @@ export {
     MigrationService,
     StartupService,
     SystemService,
-    TrayService
+    TrayService,
+    UpdateService
 };
 
 export * from "./models.js";

frontend/bindings/voidraft/internal/services/models.ts

@@ -114,3 +114,70 @@ export enum MigrationStatus {
     MigrationStatusCompleted = "completed",
     MigrationStatusFailed = "failed",
 };
+
+/**
+ * UpdateCheckResult 更新检查结果
+ */
+export class UpdateCheckResult {
+    /**
+     * 是否有更新
+     */
+    "hasUpdate": boolean;
+
+    /**
+     * 当前版本
+     */
+    "currentVer": string;
+
+    /**
+     * 最新版本
+     */
+    "latestVer": string;
+
+    /**
+     * 发布说明
+     */
+    "releaseNotes": string;
+
+    /**
+     * 发布页面URL
+     */
+    "releaseURL": string;
+
+    /**
+     * 错误信息
+     */
+    "error": string;
+
+    /** Creates a new UpdateCheckResult instance. */
+    constructor($$source: Partial<UpdateCheckResult> = {}) {
+        if (!("hasUpdate" in $$source)) {
+            this["hasUpdate"] = false;
+        }
+        if (!("currentVer" in $$source)) {
+            this["currentVer"] = "";
+        }
+        if (!("latestVer" in $$source)) {
+            this["latestVer"] = "";
+        }
+        if (!("releaseNotes" in $$source)) {
+            this["releaseNotes"] = "";
+        }
+        if (!("releaseURL" in $$source)) {
+            this["releaseURL"] = "";
+        }
+        if (!("error" in $$source)) {
+            this["error"] = "";
+        }
+
+        Object.assign(this, $$source);
+    }
+
+    /**
+     * Creates a new UpdateCheckResult instance from a string or object.
+     */
+    static createFrom($$source: any = {}): UpdateCheckResult {
+        let $$parsedSource = typeof $$source === 'string' ? JSON.parse($$source) : $$source;
+        return new UpdateCheckResult($$parsedSource as Partial<UpdateCheckResult>);
+    }
+}

frontend/bindings/voidraft/internal/services/updateservice.ts

@@ -0,0 +1,30 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+/**
+ * UpdateService 更新服务
+ * @module
+ */
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import {Call as $Call, Create as $Create} from "@wailsio/runtime";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: Unused imports
+import * as $models from "./models.js";
+
+/**
+ * CheckForUpdates 检查更新
+ */
+export function CheckForUpdates(): Promise<$models.UpdateCheckResult> & { cancel(): void } {
+    let $resultPromise = $Call.ByID(3024322786) as any;
+    let $typingPromise = $resultPromise.then(($result: any) => {
+        return $$createType0($result);
+    }) as any;
+    $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
+    return $typingPromise;
+}
+
+// Private type creation functions
+const $$createType0 = $models.UpdateCheckResult.createFrom;

frontend/src/App.vue

@@ -4,12 +4,14 @@ import { useConfigStore } from '@/stores/configStore';
 import { useSystemStore } from '@/stores/systemStore';
 import { useKeybindingStore } from '@/stores/keybindingStore';
 import { useThemeStore } from '@/stores/themeStore';
+import { useUpdateStore } from '@/stores/updateStore';
 import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
 
 const configStore = useConfigStore();
 const systemStore = useSystemStore();
 const keybindingStore = useKeybindingStore();
 const themeStore = useThemeStore();
+const updateStore = useUpdateStore();
 
 // 应用启动时加载配置和初始化系统信息
 onMounted(async () => {
@@ -23,6 +25,9 @@ onMounted(async () => {
   // 初始化语言和主题
   await configStore.initializeLanguage();
   themeStore.initializeTheme();
+  
+  // 启动时检查更新
+  await updateStore.checkOnStartup();
 });
 </script>
 

frontend/src/components/toolbar/Toolbar.vue

@@ -3,6 +3,7 @@ import {useI18n} from 'vue-i18n';
 import {onMounted, onUnmounted, ref, watch} from 'vue';
 import {useConfigStore} from '@/stores/configStore';
 import {useEditorStore} from '@/stores/editorStore';
+import {useUpdateStore} from '@/stores/updateStore';
 import * as runtime from '@wailsio/runtime';
 import {useRouter} from 'vue-router';
 import BlockLanguageSelector from './BlockLanguageSelector.vue';
@@ -11,6 +12,7 @@ import {getLanguage} from '@/views/editor/extensions/codeblock/lang-parser/langu
 
 const editorStore = useEditorStore();
 const configStore = useConfigStore();
+const updateStore = useUpdateStore();
 const {t} = useI18n();
 const router = useRouter();
 
@@ -176,6 +178,21 @@ watch(isLoaded, async (newLoaded) => {
         </svg>
       </div>
 
+      <!-- 更新提示图标 -->
+      <div
+          v-if="updateStore.hasUpdate"
+          class="update-button"
+          :title="`发现新版本 ${updateStore.updateResult?.latestVer || ''}`"
+          @click="updateStore.openReleaseURL"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+          <polyline points="7.5,10.5 12,15 16.5,10.5"/>
+          <polyline points="12,15 12,3"/>
+        </svg>
+      </div>
+
       <!-- 窗口置顶图标按钮 -->
       <div
           class="pin-button"
@@ -241,6 +258,39 @@ watch(isLoaded, async (newLoaded) => {
     }
 
 
+    /* 更新提示按钮样式 */
+    .update-button {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 2px;
+      border-radius: 3px;
+      background-color: rgba(76, 175, 80, 0.1);
+      transition: all 0.2s ease;
+      animation: pulse 2s infinite;
+
+      &:hover {
+        background-color: rgba(76, 175, 80, 0.2);
+        transform: scale(1.05);
+      }
+
+      svg {
+        stroke: #4caf50;
+      }
+
+      @keyframes pulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+    }
+
     /* 窗口置顶图标按钮样式 */
     .pin-button {
       cursor: pointer;

frontend/src/i18n/locales/en-US.ts

@@ -135,6 +135,19 @@ export default {
     language: 'Interface Language',
     systemTheme: 'System Theme',
     saveOptions: 'Save Options',
-    autoSaveDelay: 'Auto Save Delay (ms)'
+    autoSaveDelay: 'Auto Save Delay (ms)',
+    updateSettings: 'Update Settings',
+    autoCheckUpdates: 'Auto Check Updates',
+    autoCheckUpdatesDescription: 'Automatically check for updates on startup',
+    manualCheck: 'Manual Check',
+    currentVersion: 'Current Version',
+    checkForUpdates: 'Check for Updates',
+    checking: 'Checking...',
+    checkFailed: 'Check Failed',
+    newVersionAvailable: 'New Version Available',
+    upToDate: 'You are using the latest version',
+    viewUpdate: 'View Update',
+    releaseNotes: 'Release Notes',
+    networkError: 'Network connection error, please check your network settings'
   }
 }; 

frontend/src/i18n/locales/zh-CN.ts

@@ -135,6 +135,19 @@ export default {
     language: '界面语言',
     systemTheme: '系统主题',
     saveOptions: '保存选项',
-    autoSaveDelay: '自动保存延迟(毫秒)'
+    autoSaveDelay: '自动保存延迟(毫秒)',
+    updateSettings: '更新设置',
+    autoCheckUpdates: '自动检查更新',
+    autoCheckUpdatesDescription: '启动应用时自动检查更新',
+    manualCheck: '手动检查',
+    currentVersion: '当前版本',
+    checkForUpdates: '检查更新',
+    checking: '检查中...',
+    checkFailed: '检查失败',
+    newVersionAvailable: '发现新版本',
+    upToDate: '您正在使用最新版本',
+    viewUpdate: '查看更新',
+    releaseNotes: '更新内容',
+    networkError: '网络连接错误，请检查网络设置'
   }
 }; 

frontend/src/stores/configStore.ts

@@ -9,6 +9,7 @@ import {
     LanguageType,
     SystemThemeType,
     TabType,
+    UpdatesConfig,
 } from '@/../bindings/voidraft/internal/models/models';
 import {useI18n} from 'vue-i18n';
 import {ConfigUtils} from '@/utils/configUtils';
@@ -42,6 +43,10 @@ type AppearanceConfigKeyMap = {
     readonly [K in keyof AppearanceConfig]: string;
 };
 
+type UpdatesConfigKeyMap = {
+    readonly [K in keyof UpdatesConfig]: string;
+};
+
 type NumberConfigKey = 'fontSize' | 'tabSize' | 'lineHeight';
 
 // 配置键映射
@@ -70,6 +75,11 @@ const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
     systemTheme: 'appearance.systemTheme'
 } as const;
 
+const UPDATES_CONFIG_KEY_MAP: UpdatesConfigKeyMap = {
+    version: 'updates.version',
+    autoUpdate: 'updates.autoUpdate'
+} as const;
+
 // 配置限制
 const CONFIG_LIMITS = {
     fontSize: {min: 12, max: 28, default: 13},
@@ -145,7 +155,6 @@ const DEFAULT_CONFIG: AppConfig = {
     updates: {
         version: "1.0.0",
         autoUpdate: true,
-        betaChannel: false
     },
     metadata: {
         version: '1.0.0',
@@ -216,6 +225,21 @@ export const useConfigStore = defineStore('config', () => {
         state.config.appearance[key] = value;
     };
 
+    const updateUpdatesConfig = async <K extends keyof UpdatesConfig>(key: K, value: UpdatesConfig[K]): Promise<void> => {
+        // 确保配置已加载
+        if (!state.configLoaded && !state.isLoading) {
+            await initConfig();
+        }
+
+        const backendKey = UPDATES_CONFIG_KEY_MAP[key];
+        if (!backendKey) {
+            throw new Error(`No backend key mapping found for updates.${key.toString()}`);
+        }
+
+        await ConfigService.Set(backendKey, value);
+        state.config.updates[key] = value;
+    };
+
     // 加载配置
     const initConfig = async (): Promise<void> => {
         if (state.isLoading) return;
@@ -411,6 +435,9 @@ export const useConfigStore = defineStore('config', () => {
             await updateGeneralConfig('startAtLogin', value);
             // 再调用系统设置API
             await StartupService.SetEnabled(value);
-        }
+        },
+
+        // 更新配置相关方法
+        setAutoUpdate: async (value: boolean) => await updateUpdatesConfig('autoUpdate', value)
     };
 });

frontend/src/stores/updateStore.ts

@@ -0,0 +1,81 @@
+import {defineStore} from 'pinia'
+import {computed, ref} from 'vue'
+import {CheckForUpdates} from '@/../bindings/voidraft/internal/services/updateservice'
+import {UpdateCheckResult} from '@/../bindings/voidraft/internal/services/models'
+import {useConfigStore} from './configStore'
+
+export const useUpdateStore = defineStore('update', () => {
+    // 状态
+    const isChecking = ref(false)
+    const updateResult = ref<UpdateCheckResult | null>(null)
+    const hasCheckedOnStartup = ref(false)
+
+    // 计算属性
+    const hasUpdate = computed(() => updateResult.value?.hasUpdate || false)
+    const errorMessage = computed(() => updateResult.value?.error || '')
+
+    // 检查更新
+    const checkForUpdates = async (): Promise<boolean> => {
+        if (isChecking.value) return false
+
+        isChecking.value = true
+        try {
+            const result = await CheckForUpdates()
+            updateResult.value = result
+            return !result.error
+        } catch (error) {
+            updateResult.value = new UpdateCheckResult({
+                hasUpdate: false,
+                currentVer: '1.0.0',
+                latestVer: '',
+                releaseNotes: '',
+                releaseURL: '',
+                error: 'Network error'
+            })
+            return false
+        } finally {
+            isChecking.value = false
+        }
+    }
+
+    // 启动时检查更新
+    const checkOnStartup = async () => {
+        if (hasCheckedOnStartup.value) return
+        const configStore = useConfigStore()
+
+        if (configStore.config.updates.autoUpdate) {
+            await checkForUpdates()
+        }
+        hasCheckedOnStartup.value = true
+    }
+
+    // 打开发布页面
+    const openReleaseURL = () => {
+        if (updateResult.value?.releaseURL) {
+            window.open(updateResult.value.releaseURL, '_blank')
+        }
+    }
+
+    // 重置状态
+    const reset = () => {
+        updateResult.value = null
+        isChecking.value = false
+    }
+
+    return {
+        // 状态
+        isChecking,
+        updateResult,
+        hasCheckedOnStartup,
+
+        // 计算属性
+        hasUpdate,
+        errorMessage,
+
+        // 方法
+        checkForUpdates,
+        checkOnStartup,
+        openReleaseURL,
+        reset
+    }
+}) 

frontend/src/views/settings/pages/KeyBindingsPage.vue

@@ -186,11 +186,6 @@ const parseKeyBinding = (keyStr: string, command?: string): string[] => {
     return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
   }).filter(part => part.length > 0);
 };
-
-// 组件挂载时加载快捷键数据
-onMounted(async () => {
-  await keybindingStore.loadKeyBindings();
-});
 </script>
 
 <template>

frontend/src/views/settings/pages/UpdatesPage.vue

@@ -1,87 +1,123 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import {useI18n} from 'vue-i18n';
+import {computed, onMounted} from 'vue';
+import {useConfigStore} from '@/stores/configStore';
+import {useUpdateStore} from '@/stores/updateStore';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
 import ToggleSwitch from '../components/ToggleSwitch.vue';
 
-const { t } = useI18n();
+const {t} = useI18n();
+const configStore = useConfigStore();
+const updateStore = useUpdateStore();
 
-// 模拟版本数据
-const currentVersion = ref('1.0.0');
-const isCheckingForUpdates = ref(false);
-const updateAvailable = ref(false);
-const latestVersion = ref('1.1.0');
-const updateNotes = ref([
-  '优化编辑器性能',
-  '新增自动保存功能',
-  '修复多个界面显示问题',
-  '添加更多编辑器主题'
-]);
+// 计算属性
+const autoCheckUpdates = computed({
+  get: () => configStore.config.updates.autoUpdate,
+  set: async (value: boolean) => {
+    await configStore.setAutoUpdate(value);
+  }
+});
 
-// 自动检查更新选项
-const autoCheckUpdates = ref(true);
+// 格式化发布说明
+const formatReleaseNotes = (notes: string) => {
+  if (!notes) return [];
 
-// 模拟检查更新
-const checkForUpdates = () => {
-  isCheckingForUpdates.value = true;
-  
-  // 模拟网络请求延迟
-  setTimeout(() => {
-    isCheckingForUpdates.value = false;
-    updateAvailable.value = true;
-  }, 1500);
+  // 简单的Markdown列表解析
+  return notes
+      .split('\n')
+      .filter(line => line.trim().startsWith('-') || line.trim().startsWith('*'))
+      .map(line => line.replace(/^[\s\-\*]+/, '').trim())
+      .filter(line => line.length > 0);
 };
 
-// 模拟下载更新
-const downloadUpdate = () => {
-  // 在实际应用中这里会调用后端API下载更新
-  alert('开始下载更新...');
+// 处理查看更新
+const viewUpdate = () => {
+  updateStore.openReleaseURL();
+};
+
+// 获取错误信息的国际化文本
+const getErrorMessage = (error: string) => {
+  if (error.includes('Network') || error.includes('network')) {
+    return t('settings.networkError');
+  }
+  return error;
 };
 </script>
 
 <template>
   <div class="settings-page">
-    <SettingSection :title="t('settings.updates')">
-      <div class="update-info">
-        <div class="version-info">
-          <div class="current-version">
-            <span class="label">当前版本:</span>
-            <span class="version">{{ currentVersion }}</span>
+    <!-- 自动更新设置 -->
+    <SettingSection :title="t('settings.updateSettings')">
+      <SettingItem 
+        :title="t('settings.autoCheckUpdates')" 
+        :description="t('settings.autoCheckUpdatesDescription')"
+      >
+        <ToggleSwitch v-model="autoCheckUpdates"/>
+      </SettingItem>
+    </SettingSection>
+
+    <!-- 手动检查更新 -->
+    <SettingSection :title="t('settings.manualCheck')">
+      <SettingItem 
+        :title="`${t('settings.currentVersion')}: ${updateStore.updateResult?.currentVer || configStore.config.updates.version}`"
+      >
+        <button
+            class="check-button"
+            @click="updateStore.checkForUpdates"
+            :disabled="updateStore.isChecking"
+        >
+          <span v-if="updateStore.isChecking" class="loading-spinner"></span>
+          {{ updateStore.isChecking ? t('settings.checking') : t('settings.checkForUpdates') }}
+        </button>
+      </SettingItem>
+
+      <!-- 检查结果 -->
+      <div class="check-results" v-if="updateStore.updateResult || updateStore.errorMessage">
+        <!-- 错误信息 -->
+        <div v-if="updateStore.errorMessage" class="result-item error-result">
+          <div class="result-text">
+            <span class="result-icon">⚠️</span>
+            <span class="result-message">{{ getErrorMessage(updateStore.errorMessage) }}</span>
           </div>
-          
-          <button 
-            class="check-button" 
-            @click="checkForUpdates"
-            :disabled="isCheckingForUpdates"
-          >
-            <span v-if="isCheckingForUpdates" class="loading-spinner"></span>
-            {{ isCheckingForUpdates ? '检查中...' : '检查更新' }}
-          </button>
         </div>
-        
-        <div v-if="updateAvailable" class="update-available">
-          <div class="update-header">
-            <div class="update-title">发现新版本: {{ latestVersion }}</div>
-            <button class="download-button" @click="downloadUpdate">
-              下载更新
+
+        <!-- 有新版本 -->
+        <div v-else-if="updateStore.hasUpdate" class="result-item update-result">
+          <div class="result-header">
+            <div class="result-text">
+              <span class="result-icon">🎉</span>
+              <span class="result-message">
+                {{ t('settings.newVersionAvailable') }}: {{ updateStore.updateResult?.latestVer }}
+              </span>
+            </div>
+            <button class="view-button" @click="viewUpdate">
+              {{ t('settings.viewUpdate') }}
             </button>
           </div>
           
-          <div class="update-notes">
-            <div class="notes-title">更新内容:</div>
-            <ul class="notes-list">
-              <li v-for="(note, index) in updateNotes" :key="index">
+          <div v-if="updateStore.updateResult?.releaseNotes" class="release-notes">
+            <div class="notes-title">{{ t('settings.releaseNotes') }}:</div>
+            <ul class="notes-list" v-if="formatReleaseNotes(updateStore.updateResult.releaseNotes).length > 0">
+              <li v-for="(note, index) in formatReleaseNotes(updateStore.updateResult.releaseNotes)" :key="index">
                 {{ note }}
               </li>
             </ul>
+            <div v-else class="notes-text">
+              {{ updateStore.updateResult.releaseNotes }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 已是最新版本 -->
+        <div v-else-if="updateStore.updateResult && !updateStore.hasUpdate && !updateStore.errorMessage" 
+             class="result-item success-result">
+          <div class="result-text">
+            <span class="result-icon">✅</span>
+            <span class="result-message">{{ t('settings.upToDate') }}</span>
           </div>
         </div>
       </div>
-      
-      <SettingItem title="自动检查更新" description="启动应用时自动检查更新">
-        <ToggleSwitch v-model="autoCheckUpdates" />
-      </SettingItem>
     </SettingSection>
   </div>
 </template>
@@ -91,133 +127,167 @@ const downloadUpdate = () => {
   max-width: 800px;
 }
 
-.update-info {
-  padding: 15px 16px;
-  margin-bottom: 20px;
+.check-button {
+  padding: 8px 16px;
+  background-color: var(--settings-input-bg);
+  border: 1px solid var(--settings-input-border);
+  border-radius: 4px;
+  color: var(--settings-text);
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &:hover:not(:disabled) {
+    background-color: var(--settings-hover);
+    border-color: var(--settings-border);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .loading-spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: var(--settings-text);
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+.check-results {
+  padding: 0 16px;
+  margin-top: 16px;
+}
+
+.result-item {
+  padding: 12px 0;
   
-  .version-info {
+  .result-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  .result-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+  }
+
+  .result-message {
+    flex: 1;
+  }
+
+  .result-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 20px;
-    
-    .current-version {
-      font-size: 13px;
-      
-      .label {
-        color: var(--text-muted);
-        margin-right: 5px;
-      }
-      
-      .version {
-        color: var(--settings-text);
-        font-weight: 500;
-      }
-    }
-    
-    .check-button {
-      padding: 8px 16px;
+    margin-bottom: 8px;
+
+    .view-button {
+      padding: 4px 12px;
       background-color: var(--settings-input-bg);
       border: 1px solid var(--settings-input-border);
       border-radius: 4px;
       color: var(--settings-text);
       cursor: pointer;
-      font-size: 12px;
+      font-size: 11px;
       transition: all 0.2s ease;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      
-      &:hover:not(:disabled) {
+      flex-shrink: 0;
+
+      &:hover {
         background-color: var(--settings-hover);
         border-color: var(--settings-border);
       }
-      
-      &:active:not(:disabled) {
+
+      &:active {
         transform: translateY(1px);
       }
-      
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-      
-      .loading-spinner {
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        border-radius: 50%;
-        border-top-color: var(--settings-text);
-        animation: spin 1s linear infinite;
-      }
-      
-      @keyframes spin {
-        to { transform: rotate(360deg); }
-      }
     }
   }
-  
-  .update-available {
-    background-color: var(--settings-card-bg);
-    border: 1px solid var(--settings-border);
-    border-radius: 6px;
-    padding: 16px;
-    
-    .update-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
+
+  .release-notes {
+    margin-top: 8px;
+    padding-left: 24px;
+
+    .notes-title {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-bottom: 6px;
+    }
+
+    .notes-list {
+      margin: 0;
+      padding-left: 16px;
       
-      .update-title {
-        font-size: 13px;
-        font-weight: 500;
-        color: #4a9eff;
-      }
-      
-      .download-button {
-        padding: 8px 16px;
-        background-color: #2c5a9e;
-        border: none;
-        border-radius: 4px;
-        color: #ffffff;
-        cursor: pointer;
+      li {
         font-size: 12px;
-        transition: all 0.2s ease;
-        
-        &:hover {
-          background-color: #3867a9;
-        }
-        
-        &:active {
-          transform: translateY(1px);
+        color: var(--settings-text-secondary);
+        line-height: 1.4;
+        margin-bottom: 3px;
+
+        &:last-child {
+          margin-bottom: 0;
         }
       }
     }
-    
-    .update-notes {
-      .notes-title {
-        font-size: 12px;
-        color: var(--settings-text-secondary);
-        margin-bottom: 8px;
-      }
-      
-      .notes-list {
-        margin: 0;
-        padding-left: 20px;
-        
-        li {
-          font-size: 12px;
-          color: var(--settings-text-secondary);
-          margin-bottom: 6px;
-          
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
+
+    .notes-text {
+      font-size: 12px;
+      color: var(--settings-text-secondary);
+      line-height: 1.4;
+      white-space: pre-wrap;
+      word-wrap: break-word;
     }
   }
 }
+
+.error-result {
+  .result-message {
+    color: #f44336;
+  }
+  
+  .result-icon {
+    color: #f44336;
+  }
+}
+
+.update-result {
+  .result-message {
+    color: #2196f3;
+    font-weight: 500;
+  }
+  
+  .result-icon {
+    color: #2196f3;
+  }
+}
+
+.success-result {
+  .result-message {
+    color: #4caf50;
+  }
+  
+  .result-icon {
+    color: #4caf50;
+  }
+}
 </style>