完善编辑功能

src/components/SettingsModal.vue

@@ -41,6 +41,7 @@ interface SyncResult {
     deletedRemote: number;
     skipped: number;
   };
+  files: SyncFileDetail[];
 }
 
 interface SyncConnectionTestResult {
@@ -48,6 +49,27 @@ interface SyncConnectionTestResult {
   details: string[];
 }
 
+interface SyncConfigSaveResult {
+  configPath: string;
+}
+
+type SyncFileAction = "upload" | "download" | "deleteLocal" | "deleteRemote" | "skip";
+
+interface SyncFileDetail {
+  path: string;
+  action: SyncFileAction;
+  size: number;
+}
+
+interface SyncFeedback {
+  kind: "progress" | "save" | "test" | "sync" | "error";
+  title: string;
+  summary: string;
+  details?: string[];
+  configPath?: string;
+  result?: SyncResult;
+}
+
 const props = withDefaults(
   defineProps<{
     show: boolean;
@@ -55,12 +77,14 @@ const props = withDefaults(
     workspacePath?: string;
     defaultDocumentMode?: DocumentMode;
     appTheme?: AppTheme;
+    renderSingleLineBreaks?: boolean;
   }>(),
   {
     initialPage: "about",
     workspacePath: "",
     defaultDocumentMode: "edit",
     appTheme: "warm",
+    renderSingleLineBreaks: false,
   },
 );
 
@@ -68,6 +92,7 @@ const emit = defineEmits<{
   "update:show": [value: boolean];
   updateDefaultDocumentMode: [mode: DocumentMode];
   updateAppTheme: [theme: AppTheme];
+  updateRenderSingleLineBreaks: [value: boolean];
   prepareWorkspaceSync: [done: (saved: boolean) => void];
   workspaceSynced: [];
 }>();
@@ -83,8 +108,7 @@ const autoUpdate = ref(loadBooleanPref(AUTO_UPDATE_KEY, true));
 const language = ref(loadStringPref(LANGUAGE_KEY, "zh-Hans"));
 const updateStatus = ref("");
 const syncConfig = ref<SyncConfig>(createDefaultSyncConfig());
-const syncStatus = ref("");
-const syncError = ref("");
+const syncFeedback = ref<SyncFeedback | null>(null);
 const syncSaving = ref(false);
 const syncTesting = ref(false);
 const syncRunning = ref(false);
@@ -98,6 +122,32 @@ const pageTitle = computed(() => {
 });
 
 const isSyncBusy = computed(() => syncSaving.value || syncTesting.value || syncRunning.value);
+const syncProviderLabel = computed(() => {
+  if (syncConfig.value.provider === "webdav") return "WebDAV";
+  if (syncConfig.value.provider === "s3") return "S3 兼容";
+  return "关闭同步";
+});
+const syncTargetDescription = computed(() => {
+  if (syncConfig.value.provider === "webdav") {
+    const endpoint = syncConfig.value.webdav.endpoint.trim() || "未填写服务器地址";
+    const remoteDir = syncConfig.value.webdav.remoteDir.trim() || "/";
+    return `远端目标：${endpoint} · ${remoteDir}`;
+  }
+  if (syncConfig.value.provider === "s3") {
+    const bucket = syncConfig.value.s3.bucket.trim() || "未填写 Bucket";
+    const prefix = syncConfig.value.s3.remotePrefix.trim() || "/";
+    return `远端目标：Bucket ${bucket} · ${prefix}`;
+  }
+  return "同步已关闭";
+});
+const syncFileDetails = computed(() => {
+  const files = syncFeedback.value?.result?.files || [];
+  return [...files].sort((left, right) => {
+    if (left.action === "skip" && right.action !== "skip") return 1;
+    if (left.action !== "skip" && right.action === "skip") return -1;
+    return left.path.localeCompare(right.path);
+  });
+});
 
 const menuItems: Array<{
   id: SettingsPage;
@@ -270,33 +320,62 @@ function onDefaultDocumentModeChange(event: Event) {
   emit("updateDefaultDocumentMode", mode);
 }
 
-function setSyncStatus(message: string, isError = false) {
-  if (isError) {
-    syncError.value = message;
-    syncStatus.value = "";
-  } else {
-    syncStatus.value = message;
-    syncError.value = "";
+function setSyncError(message: string, title = "操作失败") {
+  syncFeedback.value = {
+    kind: "error",
+    title,
+    summary: message,
+  };
+}
+
+function syncActionLabel(action: SyncFileAction) {
+  if (action === "upload") return "上传";
+  if (action === "download") return "下载";
+  if (action === "deleteLocal") return "删除本地";
+  if (action === "deleteRemote") return "删除远端";
+  return "未变更";
+}
+
+function formatFileSize(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0)} KB`;
+  if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(bytes < 10 * 1024 * 1024 ? 1 : 0)} MB`;
   }
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
 
 async function loadSyncConfig() {
   try {
     const config = await invoke<SyncConfig>("load_sync_config");
     syncConfig.value = mergeSyncConfig(config);
-    syncError.value = "";
   } catch (error) {
-    setSyncStatus(`读取同步配置失败: ${error}`, true);
+    setSyncError(`读取同步配置失败: ${error}`, "无法读取同步配置");
   }
 }
 
 async function saveSyncConfig() {
   syncSaving.value = true;
+  syncFeedback.value = {
+    kind: "progress",
+    title: "正在保存配置",
+    summary: `正在保存 ${syncProviderLabel.value} 配置。`,
+  };
   try {
-    await invoke("save_sync_config", { config: syncConfig.value });
-    setSyncStatus("同步配置已保存");
+    const result = await invoke<SyncConfigSaveResult>("save_sync_config", { config: syncConfig.value });
+    syncFeedback.value = {
+      kind: "save",
+      title: "同步配置已保存",
+      summary: `已保存 ${syncProviderLabel.value} 配置。`,
+      configPath: result.configPath,
+      details: [
+        syncTargetDescription.value,
+        `启动时自动同步：${syncConfig.value.autoSyncOnStartup ? "开启" : "关闭"}`,
+        `保存后自动同步：${syncConfig.value.autoSyncAfterSave ? "开启" : "关闭"}`,
+      ],
+    };
   } catch (error) {
-    setSyncStatus(`保存失败: ${error}`, true);
+    setSyncError(String(error), "保存同步配置失败");
   } finally {
     syncSaving.value = false;
   }
@@ -304,36 +383,45 @@ async function saveSyncConfig() {
 
 async function testSyncConnection() {
   syncTesting.value = true;
+  syncFeedback.value = {
+    kind: "progress",
+    title: "正在测试连接",
+    summary: `正在检查 ${syncProviderLabel.value} 服务的读取、写入和删除权限。`,
+  };
   try {
     const result = await invoke<SyncConnectionTestResult>("test_sync_connection", { config: syncConfig.value });
-    setSyncStatus([result.message, ...result.details.map((item) => `- ${item}`)].join("\n"));
+    syncFeedback.value = {
+      kind: "test",
+      title: "连接测试通过",
+      summary: result.message,
+      details: result.details,
+    };
   } catch (error) {
-    setSyncStatus(String(error), true);
+    setSyncError(String(error), "连接测试失败");
   } finally {
     syncTesting.value = false;
   }
 }
 
-function formatSyncResult(result: SyncResult) {
-  const { stats } = result;
-  return `同步完成：上传 ${stats.uploaded}，下载 ${stats.downloaded}，删除本地 ${stats.deletedLocal}，删除远端 ${stats.deletedRemote}，跳过 ${stats.skipped}`;
-}
-
 async function runSyncNow() {
   if (!props.workspacePath) {
-    setSyncStatus("请先打开一个工作目录", true);
+    setSyncError("请先打开一个工作目录", "无法开始同步");
     return;
   }
 
   syncRunning.value = true;
   try {
-    setSyncStatus("正在同步：扫描本地和远端文件，远端列表请求最长等待 120 秒。");
+    syncFeedback.value = {
+      kind: "progress",
+      title: "正在同步",
+      summary: "正在扫描本地和远端文件，远端列表请求最长等待 120 秒。",
+    };
     await invoke("save_sync_config", { config: syncConfig.value });
     const prepared = await new Promise<boolean>((resolve) => {
       emit("prepareWorkspaceSync", resolve);
     });
     if (!prepared) {
-      setSyncStatus("同步已取消，当前文档尚未保存", true);
+      setSyncError("当前文档尚未保存，同步已取消。", "同步未开始");
       return;
     }
 
@@ -342,10 +430,16 @@ async function runSyncNow() {
       config: syncConfig.value,
     });
     syncConfig.value.lastSyncAt = result.lastSyncAt;
-    setSyncStatus(formatSyncResult(result));
+    const changedCount = result.stats.uploaded + result.stats.downloaded + result.stats.deletedLocal + result.stats.deletedRemote;
+    syncFeedback.value = {
+      kind: "sync",
+      title: "同步完成",
+      summary: changedCount > 0 ? `本次同步处理了 ${changedCount} 个变更文件。` : "本地与远端内容已一致，没有文件需要变更。",
+      result,
+    };
     emit("workspaceSynced");
   } catch (error) {
-    setSyncStatus(`同步失败: ${error}`, true);
+    setSyncError(String(error), "同步失败");
   } finally {
     syncRunning.value = false;
   }
@@ -357,6 +451,7 @@ watch(
     if (!show) return;
     activePage.value = props.initialPage;
     updateStatus.value = "";
+    syncFeedback.value = null;
     void loadAppVersion();
     void loadSyncConfig();
   },
@@ -497,6 +592,20 @@ onBeforeUnmount(() => {
                   </option>
                 </select>
               </div>
+              <div class="settings-row">
+                <div class="settings-copy">
+                  <h3>单换行显示为换行</h3>
+                  <p>开启后，预览和混合模式会保留普通回车产生的换行，不修改 Markdown 原文。</p>
+                </div>
+                <label class="settings-switch" title="单换行显示为换行">
+                  <input
+                    :checked="renderSingleLineBreaks"
+                    type="checkbox"
+                    @change="emit('updateRenderSingleLineBreaks', ($event.target as HTMLInputElement).checked)"
+                  />
+                  <span></span>
+                </label>
+              </div>
             </section>
           </div>
 
@@ -669,41 +778,119 @@ onBeforeUnmount(() => {
                   <p>
                     {{ syncConfig.lastSyncAt ? `上次同步：${syncConfig.lastSyncAt}` : '尚未同步' }}
                   </p>
-                  <div
-                    v-if="syncStatus || syncError"
-                    class="settings-sync-log"
-                    :class="{ 'settings-sync-log-error': Boolean(syncError) }"
-                    role="status"
-                  >
-                    {{ syncError || syncStatus }}
-                  </div>
                 </div>
                 <div class="settings-action-stack">
+                  <div class="settings-config-actions" aria-label="同步配置操作">
+                    <button
+                      class="settings-secondary-btn"
+                      type="button"
+                      :disabled="isSyncBusy"
+                      @click="saveSyncConfig"
+                    >
+                      <i :class="syncSaving ? 'ri-loader-4-line settings-spin' : 'ri-save-3-line'"></i>
+                      {{ syncSaving ? '保存中' : '保存配置' }}
+                    </button>
+                    <button
+                      class="settings-secondary-btn"
+                      type="button"
+                      :disabled="isSyncBusy || syncConfig.provider === 'none'"
+                      @click="testSyncConnection"
+                    >
+                      <i :class="syncTesting ? 'ri-loader-4-line settings-spin' : 'ri-pulse-line'"></i>
+                      {{ syncTesting ? '测试中' : '测试连接' }}
+                    </button>
+                  </div>
                   <button
-                    class="settings-secondary-btn"
-                    type="button"
-                    :disabled="isSyncBusy"
-                    @click="saveSyncConfig"
-                  >
-                    {{ syncSaving ? '保存中' : '保存配置' }}
-                  </button>
-                  <button
-                    class="settings-secondary-btn"
-                    type="button"
-                    :disabled="isSyncBusy || syncConfig.provider === 'none'"
-                    @click="testSyncConnection"
-                  >
-                    {{ syncTesting ? '测试中' : '测试连接' }}
-                  </button>
-                  <button
-                    class="settings-primary-btn"
+                    class="settings-primary-btn settings-sync-now-btn"
                     type="button"
                     :disabled="isSyncBusy || syncConfig.provider === 'none' || !workspacePath"
                     @click="runSyncNow"
                   >
+                    <i :class="syncRunning ? 'ri-loader-4-line settings-spin' : 'ri-loop-left-line'"></i>
                     {{ syncRunning ? '同步中' : '立即同步' }}
                   </button>
                 </div>
+
+                <section
+                  v-if="syncFeedback"
+                  class="settings-sync-feedback"
+                  :class="{
+                    'settings-sync-feedback-error': syncFeedback.kind === 'error',
+                    'settings-sync-feedback-progress': syncFeedback.kind === 'progress',
+                  }"
+                  role="status"
+                  aria-live="polite"
+                >
+                  <div class="settings-sync-feedback-header">
+                    <i
+                      :class="
+                        syncFeedback.kind === 'error'
+                          ? 'ri-error-warning-line'
+                          : syncFeedback.kind === 'progress'
+                            ? 'ri-loader-4-line settings-spin'
+                            : 'ri-checkbox-circle-line'
+                      "
+                    ></i>
+                    <div>
+                      <strong>{{ syncFeedback.title }}</strong>
+                      <p>{{ syncFeedback.summary }}</p>
+                    </div>
+                  </div>
+
+                  <div v-if="syncFeedback.configPath" class="settings-config-path">
+                    <span>配置保存位置</span>
+                    <code :title="syncFeedback.configPath">{{ syncFeedback.configPath }}</code>
+                  </div>
+
+                  <ul v-if="syncFeedback.details?.length" class="settings-feedback-details">
+                    <li v-for="detail in syncFeedback.details" :key="detail">
+                      <i class="ri-check-line"></i>
+                      <span>{{ detail }}</span>
+                    </li>
+                  </ul>
+
+                  <template v-if="syncFeedback.result">
+                    <dl class="settings-sync-stats" aria-label="同步数量汇总">
+                      <div>
+                        <dt>上传</dt>
+                        <dd>{{ syncFeedback.result.stats.uploaded }}</dd>
+                      </div>
+                      <div>
+                        <dt>下载</dt>
+                        <dd>{{ syncFeedback.result.stats.downloaded }}</dd>
+                      </div>
+                      <div>
+                        <dt>删除本地</dt>
+                        <dd>{{ syncFeedback.result.stats.deletedLocal }}</dd>
+                      </div>
+                      <div>
+                        <dt>删除远端</dt>
+                        <dd>{{ syncFeedback.result.stats.deletedRemote }}</dd>
+                      </div>
+                      <div>
+                        <dt>未变更</dt>
+                        <dd>{{ syncFeedback.result.stats.skipped }}</dd>
+                      </div>
+                    </dl>
+
+                    <div class="settings-sync-file-section">
+                      <div class="settings-sync-file-heading">
+                        <strong>文件明细</strong>
+                        <span>{{ syncFileDetails.length }} 个文件</span>
+                      </div>
+                      <div v-if="syncFileDetails.length" class="settings-sync-file-list">
+                        <div v-for="file in syncFileDetails" :key="`${file.action}:${file.path}`" class="settings-sync-file">
+                          <span class="settings-sync-file-action" :data-action="file.action">
+                            {{ syncActionLabel(file.action) }}
+                          </span>
+                          <code :title="file.path">{{ file.path }}</code>
+                          <span class="settings-sync-file-size">{{ formatFileSize(file.size) }}</span>
+                        </div>
+                      </div>
+                      <p v-else class="settings-sync-file-empty">工作目录与远端都没有文件。</p>
+                    </div>
+                  </template>
+                </section>
               </div>
             </section>
           </div>
@@ -948,9 +1135,16 @@ onBeforeUnmount(() => {
 
 .settings-action-stack {
   display: flex;
-  align-items: flex-end;
+  width: 244px;
+  align-items: stretch;
   flex-direction: column;
-  gap: 7px;
+  gap: 8px;
+}
+
+.settings-config-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 
 .settings-primary-btn,
@@ -963,6 +1157,7 @@ onBeforeUnmount(() => {
   font-size: 13px;
   font-weight: 600;
   line-height: 1;
+  gap: 6px;
   cursor: pointer;
   transition:
     background-color 0.15s ease,
@@ -983,7 +1178,7 @@ onBeforeUnmount(() => {
 }
 
 .settings-secondary-btn {
-  min-width: 50px;
+  min-width: 0;
   border: 1px solid var(--app-border-strong);
   background: var(--app-surface);
   color: var(--app-text);
@@ -1149,28 +1344,224 @@ onBeforeUnmount(() => {
   align-items: flex-start;
 }
 
-.settings-sync-log {
-  width: min(100%, 420px);
-  max-height: 138px;
-  margin-top: 10px;
-  overflow: auto;
+.settings-sync-now-btn {
+  width: 100%;
+}
+
+.settings-sync-feedback {
+  display: flex;
+  min-width: 0;
+  grid-column: 1 / -1;
+  flex-direction: column;
+  gap: 12px;
   border: 1px solid color-mix(in srgb, var(--app-accent) 26%, var(--app-border));
   border-radius: 6px;
   background: color-mix(in srgb, var(--app-accent) 7%, var(--app-surface));
+  padding: 12px;
+}
+
+.settings-sync-feedback-error {
+  border-color: color-mix(in srgb, #dc2626 32%, var(--app-border));
+  background: color-mix(in srgb, #dc2626 7%, var(--app-surface));
+}
+
+.settings-sync-feedback-progress {
+  border-color: var(--app-border-strong);
+  background: var(--app-surface-muted);
+}
+
+.settings-sync-feedback-header {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.settings-sync-feedback-header > i {
+  margin-top: 1px;
   color: var(--app-accent);
+  font-size: 16px;
+}
+
+.settings-sync-feedback-error .settings-sync-feedback-header > i,
+.settings-sync-feedback-error .settings-sync-feedback-header strong {
+  color: #dc2626;
+}
+
+.settings-sync-feedback-header strong,
+.settings-sync-file-heading strong {
+  display: block;
+  color: var(--app-text-strong);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.settings-sync-feedback-header p,
+.settings-sync-file-empty {
+  margin: 3px 0 0;
+  color: var(--app-text-soft);
   font-size: 12px;
   line-height: 1.5;
-  padding: 9px 10px;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 
-.settings-sync-log-error {
-  border-color: color-mix(in srgb, #dc2626 32%, var(--app-border));
-  background: color-mix(in srgb, #dc2626 7%, var(--app-surface));
+.settings-config-path {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  border-top: 1px solid var(--app-border-strong);
+  padding-top: 10px;
+}
+
+.settings-config-path span,
+.settings-sync-file-heading span,
+.settings-sync-file-size {
+  color: var(--app-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.settings-config-path code {
+  min-width: 0;
+  color: var(--app-text);
+  font-family: var(--app-font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.settings-feedback-details {
+  display: flex;
+  margin: 0;
+  flex-direction: column;
+  gap: 6px;
+  padding: 0;
+  list-style: none;
+}
+
+.settings-feedback-details li {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 5px;
+  color: var(--app-text-soft);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.settings-feedback-details i {
+  color: var(--app-accent);
+}
+
+.settings-sync-stats {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin: 0;
+  border-top: 1px solid var(--app-border-strong);
+  border-bottom: 1px solid var(--app-border-strong);
+  padding: 9px 0;
+}
+
+.settings-sync-stats > div {
+  min-width: 0;
+  padding: 0 9px;
+  border-left: 1px solid var(--app-border-strong);
+}
+
+.settings-sync-stats > div:first-child {
+  border-left: none;
+  padding-left: 0;
+}
+
+.settings-sync-stats dt {
+  color: var(--app-muted);
+  font-size: 10px;
+  line-height: 1.3;
+}
+
+.settings-sync-stats dd {
+  margin: 3px 0 0;
+  color: var(--app-text-strong);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.settings-sync-file-section {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-sync-file-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.settings-sync-file-list {
+  display: flex;
+  max-height: 220px;
+  overflow: auto;
+  flex-direction: column;
+  border: 1px solid var(--app-border-strong);
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--app-surface) 78%, transparent);
+}
+
+.settings-sync-file {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) auto;
+  gap: 9px;
+  align-items: center;
+  min-height: 32px;
+  padding: 6px 9px;
+  border-top: 1px solid var(--app-border);
+}
+
+.settings-sync-file:first-child {
+  border-top: none;
+}
+
+.settings-sync-file-action {
+  color: var(--app-accent);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.settings-sync-file-action[data-action="deleteLocal"],
+.settings-sync-file-action[data-action="deleteRemote"] {
   color: #dc2626;
 }
 
+.settings-sync-file-action[data-action="skip"] {
+  color: var(--app-muted);
+}
+
+.settings-sync-file code {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--app-text);
+  font-family: var(--app-font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
+  font-size: 11px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-spin {
+  animation: settings-spin 0.85s linear infinite;
+}
+
+@keyframes settings-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .theme-option-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1289,11 +1680,45 @@ onBeforeUnmount(() => {
   }
 
   .settings-action-stack {
+    width: 100%;
     align-items: flex-start;
   }
 
+  .settings-config-actions,
+  .settings-sync-now-btn {
+    width: 100%;
+  }
+
+  .settings-config-path {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .settings-sync-stats {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    row-gap: 10px;
+  }
+
+  .settings-sync-stats > div:nth-child(4) {
+    border-left: none;
+  }
+
+  .settings-sync-file {
+    grid-template-columns: 58px minmax(0, 1fr);
+  }
+
+  .settings-sync-file-size {
+    display: none;
+  }
+
   .settings-switch-group {
     min-width: 0;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .settings-spin {
+    animation-duration: 1.8s;
+  }
+}
 </style>