✨ Add self-updating service
This commit is contained in:
@@ -8,7 +8,7 @@ import {
|
||||
ViewUpdate,
|
||||
} from '@codemirror/view';
|
||||
import { Extension, Range } from '@codemirror/state';
|
||||
|
||||
import * as runtime from "@wailsio/runtime"
|
||||
const pathStr = `<svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor"><path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z"></path><path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z"></path></svg>`;
|
||||
const defaultRegexp = /\b((?:https?|ftp):\/\/[^\s/$.?#].[^\s]*)\b/gi;
|
||||
|
||||
@@ -201,7 +201,8 @@ export const hyperLinkClickHandler = EditorView.domEventHandlers({
|
||||
if (target.classList.contains('cm-hyper-link-text')) {
|
||||
const url = target.getAttribute('data-url');
|
||||
if (url) {
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
// window.open(url, '_blank', 'noopener,noreferrer');
|
||||
runtime.Browser.OpenURL(url).then()
|
||||
event.preventDefault();
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {computed, onMounted} from 'vue';
|
||||
import {computed, onMounted, ref} 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';
|
||||
import { Remarkable } from 'remarkable';
|
||||
|
||||
const {t} = useI18n();
|
||||
const configStore = useConfigStore();
|
||||
const updateStore = useUpdateStore();
|
||||
|
||||
// 初始化Remarkable实例并配置
|
||||
const md = new Remarkable({
|
||||
html: true, // 允许HTML
|
||||
xhtmlOut: false, // 不使用'/'闭合单标签
|
||||
breaks: true, // 将'\n'转换为<br>
|
||||
typographer: true // 启用排版增强
|
||||
});
|
||||
|
||||
// 计算属性
|
||||
const autoCheckUpdates = computed({
|
||||
get: () => configStore.config.updates.autoUpdate,
|
||||
@@ -19,30 +28,30 @@ const autoCheckUpdates = computed({
|
||||
}
|
||||
});
|
||||
|
||||
// 格式化发布说明
|
||||
const formatReleaseNotes = (notes: string) => {
|
||||
if (!notes) return [];
|
||||
|
||||
// 简单的Markdown列表解析
|
||||
return notes
|
||||
.split('\n')
|
||||
.filter(line => line.trim().startsWith('-') || line.trim().startsWith('*'))
|
||||
.map(line => line.replace(/^[\s\-\*]+/, '').trim())
|
||||
.filter(line => line.length > 0);
|
||||
// 使用Remarkable解析Markdown
|
||||
const parseMarkdown = (markdown: string) => {
|
||||
if (!markdown) return '';
|
||||
return md.render(markdown);
|
||||
};
|
||||
|
||||
// 处理查看更新
|
||||
const viewUpdate = () => {
|
||||
updateStore.openReleaseURL();
|
||||
};
|
||||
|
||||
// 获取错误信息的国际化文本
|
||||
const getErrorMessage = (error: string) => {
|
||||
if (error.includes('Network') || error.includes('network')) {
|
||||
return t('settings.networkError');
|
||||
// 处理更新按钮点击
|
||||
const handleUpdateButtonClick = async () => {
|
||||
if (updateStore.updateSuccess) {
|
||||
// 如果更新成功，点击按钮重启应用
|
||||
await updateStore.restartApplication();
|
||||
} else if (updateStore.hasUpdate) {
|
||||
// 如果有更新，点击按钮应用更新
|
||||
await updateStore.applyUpdate();
|
||||
} else {
|
||||
// 否则检查更新
|
||||
await updateStore.checkForUpdates();
|
||||
}
|
||||
return error;
|
||||
};
|
||||
|
||||
// 当前版本号
|
||||
const currentVersion = computed(() => {
|
||||
return updateStore.updateResult?.currentVersion || configStore.config.updates.version;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -60,15 +69,26 @@ const getErrorMessage = (error: string) => {
|
||||
<!-- 手动检查更新 -->
|
||||
<SettingSection :title="t('settings.manualCheck')">
|
||||
<SettingItem
|
||||
:title="`${t('settings.currentVersion')}: ${updateStore.updateResult?.currentVer || configStore.config.updates.version}`"
|
||||
:title="`${t('settings.currentVersion')}: ${currentVersion}`"
|
||||
>
|
||||
<button
|
||||
class="check-button"
|
||||
@click="updateStore.checkForUpdates"
|
||||
:disabled="updateStore.isChecking"
|
||||
:class="{
|
||||
'update-available-button': updateStore.hasUpdate && !updateStore.updateSuccess,
|
||||
'update-success-button': updateStore.updateSuccess
|
||||
}"
|
||||
@click="handleUpdateButtonClick"
|
||||
:disabled="updateStore.isChecking || updateStore.isUpdating"
|
||||
>
|
||||
<span v-if="updateStore.isChecking" class="loading-spinner"></span>
|
||||
{{ updateStore.isChecking ? t('settings.checking') : t('settings.checkForUpdates') }}
|
||||
<span v-if="updateStore.isChecking || updateStore.isUpdating" class="loading-spinner"></span>
|
||||
{{ updateStore.isChecking
|
||||
? t('settings.checking')
|
||||
: (updateStore.isUpdating
|
||||
? t('settings.updating')
|
||||
: (updateStore.updateSuccess
|
||||
? t('settings.restartNow')
|
||||
: (updateStore.hasUpdate ? t('settings.updateNow') : t('settings.checkForUpdates'))))
|
||||
}}
|
||||
</button>
|
||||
</SettingItem>
|
||||
|
||||
@@ -78,42 +98,40 @@ const getErrorMessage = (error: string) => {
|
||||
<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 class="result-message">{{ updateStore.errorMessage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更新成功 -->
|
||||
<div v-else-if="updateStore.updateSuccess" class="result-item update-success">
|
||||
<div class="result-text">
|
||||
<span class="result-icon">✅</span>
|
||||
<span class="result-message">
|
||||
{{ t('settings.updateSuccessRestartRequired') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 有新版本 -->
|
||||
<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 class="result-text">
|
||||
<span class="result-icon">🎉</span>
|
||||
<span class="result-message">
|
||||
{{ t('settings.newVersionAvailable') }}: {{ updateStore.updateResult?.latestVersion }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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 class="markdown-content" v-html="parseMarkdown(updateStore.updateResult.releaseNotes)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已是最新版本 -->
|
||||
<div v-else-if="updateStore.updateResult && !updateStore.hasUpdate && !updateStore.errorMessage"
|
||||
class="result-item success-result">
|
||||
class="result-item latest-version">
|
||||
<div class="result-text">
|
||||
<span class="result-icon">✅</span>
|
||||
<span class="result-icon">✓</span>
|
||||
<span class="result-message">{{ t('settings.upToDate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,6 +143,7 @@ const getErrorMessage = (error: string) => {
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
max-width: 800px;
|
||||
width: 100%; // 确保在小屏幕上也能占满可用空间
|
||||
}
|
||||
|
||||
.check-button {
|
||||
@@ -139,6 +158,8 @@ const getErrorMessage = (error: string) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 120px;
|
||||
justify-content: center;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--settings-hover);
|
||||
@@ -164,6 +185,28 @@ const getErrorMessage = (error: string) => {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
&.update-available-button {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #1976d2;
|
||||
border-color: #1976d2;
|
||||
}
|
||||
}
|
||||
|
||||
&.update-success-button {
|
||||
background-color: #4caf50;
|
||||
border-color: #4caf50;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #43a047;
|
||||
border-color: #43a047;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
@@ -172,122 +215,157 @@ const getErrorMessage = (error: string) => {
|
||||
}
|
||||
|
||||
.check-results {
|
||||
padding: 0 16px;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
|
||||
// 为错误消息添加特殊样式
|
||||
.error-result {
|
||||
padding: 12px;
|
||||
background-color: rgba(255, 82, 82, 0.05);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid var(--error-text, #ff5252);
|
||||
margin-bottom: 8px;
|
||||
|
||||
.result-message {
|
||||
color: var(--error-text, #ff5252);
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
padding-right: 8px; // 添加右侧内边距，防止文本贴近容器边缘
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 12px 0;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.result-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
line-height: 1.5; // 增加行高，提高可读性
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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: 11px;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--settings-hover);
|
||||
border-color: var(--settings-border);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.release-notes {
|
||||
margin-top: 8px;
|
||||
padding-left: 24px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--settings-border, rgba(0,0,0,0.1));
|
||||
|
||||
.notes-title {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
color: var(--settings-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.notes-list {
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
|
||||
li {
|
||||
font-size: 12px;
|
||||
color: var(--settings-text-secondary);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 3px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notes-text {
|
||||
.markdown-content {
|
||||
font-size: 12px;
|
||||
color: var(--settings-text-secondary);
|
||||
color: var(--settings-text);
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
|
||||
/* Markdown内容样式 */
|
||||
:deep(p) {
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
:deep(ul), :deep(ol) {
|
||||
margin: 6px 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
:deep(li) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
:deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
|
||||
margin: 10px 0 6px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-result {
|
||||
.result-message {
|
||||
color: #f44336;
|
||||
}
|
||||
background-color: rgba(244, 67, 54, 0.03);
|
||||
|
||||
.result-icon {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
color: var(--error-text, #ff5252);
|
||||
}
|
||||
}
|
||||
|
||||
.update-result {
|
||||
background-color: rgba(33, 150, 243, 0.03);
|
||||
|
||||
.result-icon {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
color: #2196f3;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.update-success {
|
||||
background-color: rgba(76, 175, 80, 0.03);
|
||||
|
||||
.result-icon {
|
||||
color: #2196f3;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
color: var(--settings-text);
|
||||
}
|
||||
}
|
||||
|
||||
.success-result {
|
||||
.result-message {
|
||||
color: #4caf50;
|
||||
}
|
||||
.latest-version {
|
||||
background-color: transparent;
|
||||
border-left: 3px solid #9e9e9e;
|
||||
padding-left: 10px;
|
||||
|
||||
.result-icon {
|
||||
color: #4caf50;
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
color: var(--settings-text-secondary, #757575);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式布局调整
|
||||
@media (max-width: 600px) {
|
||||
.result-item {
|
||||
padding: 10px;
|
||||
|
||||
.result-text {
|
||||
font-size: 12px; // 小屏幕上稍微减小字体
|
||||
}
|
||||
}
|
||||
|
||||
.check-button {
|
||||
min-width: 100px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user