Improve sharing user experience

Author: tri5m

.github/workflows/release.yml

@@ -157,7 +157,7 @@ jobs:
             "$updater_asset" \
             "$updater_asset.sig" \
             "release-assets/${{ matrix.latest_name }}" \
-            "解决下载速度问题"
+            "提升用户体验"
 
       - name: Prepare Windows updater metadata
         if: runner.os == 'Windows'
@@ -172,7 +172,7 @@ jobs:
             "$updater_asset" \
             "$updater_asset.sig" \
             "release-assets/${{ matrix.latest_name }}" \
-            "解决下载速度问题"
+            "提升用户体验"
 
       - name: Upload workflow artifact
         uses: actions/upload-artifact@v4
@@ -187,5 +187,5 @@ jobs:
         with:
           files: ${{ matrix.release_artifact_path || matrix.artifact_path }}
           body: |
-            解决下载速度问题
+            提升用户体验
           prerelease: ${{ contains(github.ref_name, 'rc') }}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fileshare",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "type": "module",
   "scripts": {

package.json

@@ -2,8 +2,10 @@
   const state = {
     role: 'client',
     items: [],
+    downloadStats: {},
     apiBase: '',
     events: null,
+    downloadEvents: null,
     isTauri: false,
     serverRunning: false,
     shareInfo: null,
@@ -24,6 +26,11 @@
     return `${(size / 1024 / 1024).toFixed(1)} MB`;
   }
 
+  function formatSpeed(size) {
+    if (!Number.isFinite(size) || size <= 0) return '0 B/s';
+    return `${formatSize(size)}/s`;
+  }
+
   function formatTime(value) {
     return new Date(value).toLocaleString('zh-CN', { hour12: false });
   }
@@ -64,24 +71,33 @@
 
     root.innerHTML = state.items.map((item) => {
       const isText = item.kind === 'text';
+      const isMissing = item.kind !== 'text' && item.exists === false;
       const badge = isText ? '文本' : '文件';
       const title = isText
         ? escapeHtml(previewText(item.content || item.title, 40))
         : escapeHtml(item.title);
       const titleAction = isText
         ? ''
         : `<button class="inline-icon-button" data-action="copy-link" data-id="${item.id}" aria-label="复制文件链接" title="复制文件链接">🔗</button>`;
+      const downloadStat = state.role === 'admin' && !isText ? state.downloadStats[item.id] : null;
+      const downloadStatus = downloadStat
+        ? `<span class="download-status">⬇ ${formatSpeed(downloadStat.speedBps)}</span>`
+        : '';
       const description = isText
         ? `<div class="meta">${formatTextLength(item.content || item.title)} · ${formatTime(item.createdAt)}</div>`
-        : `<div class="meta">${formatSize(item.size)} · ${formatTime(item.createdAt)}</div>`;
+        : `<div class="meta">${formatSize(item.size)} · ${formatTime(item.createdAt)}${downloadStatus}</div>`;
       const primaryAction = isText
         ? `<button class="secondary" data-action="copy" data-id="${item.id}">复制</button>`
-        : `<button class="secondary" data-action="download" data-id="${item.id}">下载</button>`;
+        : (isMissing
+          ? `<button class="secondary" disabled type="button">已失效</button>`
+          : (state.role === 'admin'
+            ? `<button class="secondary" data-action="reveal" data-id="${item.id}">查看</button>`
+            : `<button class="secondary" data-action="download" data-id="${item.id}">下载</button>`));
       const actions = state.role === 'admin'
-        ? `${primaryAction}<button class="danger" data-action="delete" data-id="${item.id}">删除</button>`
+        ? `${primaryAction}<button class="secondary remove-action" data-action="delete" data-id="${item.id}">移除</button>`
         : primaryAction;
       return `
-        <article class="item">
+        <article class="item${isMissing ? ' item-missing' : ''}">
           <div class="item-main">
             <div class="item-title">
               <span class="badge">${badge}</span>
@@ -189,10 +205,15 @@
     state.serverRunning = false;
     state.apiBase = '';
     state.items = [];
+    state.downloadStats = {};
     if (state.events) {
       state.events.close();
       state.events = null;
     }
+    if (state.downloadEvents) {
+      state.downloadEvents.close();
+      state.downloadEvents = null;
+    }
     const root = $('items');
     if (root) root.innerHTML = '';
     document.body.classList.add('server-stopped');
@@ -311,6 +332,28 @@
       state.items = JSON.parse(event.data);
       render();
     };
+    if (state.role === 'admin') {
+      connectDownloadEvents();
+    }
+  }
+
+  function connectDownloadEvents() {
+    if (state.downloadEvents) state.downloadEvents.close();
+    const events = new EventSource(`${state.apiBase}/api/download-events`);
+    state.downloadEvents = events;
+    events.onerror = () => {
+      state.downloadStats = {};
+      render();
+    };
+    events.onmessage = (event) => {
+      const stats = JSON.parse(event.data);
+      state.downloadStats = Object.fromEntries(
+        stats
+          .filter((item) => item.activeCount > 0)
+          .map((item) => [item.itemId, item])
+      );
+      render();
+    };
   }
 
   async function addAdminLocalFiles(paths) {
@@ -420,6 +463,20 @@
     }, 1600);
   }
 
+  function showStatusMessage(message) {
+    const status = $('status');
+    if (status) {
+      status.textContent = message;
+      status.classList.add('status-error');
+      window.setTimeout(() => {
+        status.classList.remove('status-error');
+        if (state.serverRunning) {
+          status.textContent = '实时同步';
+        }
+      }, 1800);
+    }
+  }
+
   async function bindAdminFileDrop() {
     if (state.role !== 'admin' || state.adminDragDropBound) return;
 
@@ -664,10 +721,28 @@
     $('items').addEventListener('click', async (event) => {
       const button = event.target.closest('button[data-action]');
       if (!button) return;
+      if (button.disabled) return;
       const { action, id } = button.dataset;
+      if (action === 'reveal' && state.role === 'admin') {
+        const item = state.items.find((entry) => entry.id === id);
+        if (!item) return;
+        if (state.isTauri) {
+          try {
+            await window.__TAURI__.core.invoke('reveal_admin_file', { id });
+          } catch (error) {
+            const message = error?.message || String(error) || '无法打开文件位置';
+            showStatusMessage(`打开失败：${message}`);
+            window.alert(`打开失败：${message}`);
+          }
+          return;
+        }
+        window.open(getDownloadUrl(item), '_blank');
+      }
       if (action === 'download') {
-        if (state.role === 'admin' && state.isTauri) {
-          await window.__TAURI__.core.invoke('download_admin_file', { id });
+        const item = state.items.find((entry) => entry.id === id);
+        if (!item) return;
+        if (item.exists === false) {
+          alert('源文件已不存在');
           return;
         }
         window.location.href = `${state.apiBase}/api/items/${id}/download`;

public/app.js

@@ -704,6 +704,11 @@ button.danger:hover {
   font-size: 14px;
 }
 
+#status.status-error {
+  color: var(--danger);
+  font-weight: 600;
+}
+
 .items {
   display: grid;
   gap: 8px;
@@ -726,6 +731,15 @@ button.danger:hover {
   box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 12%, transparent);
 }
 
+.item-missing {
+  opacity: 0.62;
+}
+
+.item-missing .item-title strong,
+.item-missing .meta {
+  text-decoration: line-through;
+}
+
 .item-title {
   display: flex;
   align-items: center;
@@ -785,6 +799,36 @@ button.danger:hover {
   line-height: 1.25;
 }
 
+.download-status {
+  display: inline;
+  align-items: center;
+  margin-left: 8px;
+  padding: 1px 5px;
+  border: 1px solid color-mix(in srgb, var(--success-soft-border) 70%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface-success) 72%, transparent);
+  color: var(--success);
+  font-size: 10px;
+  line-height: 1;
+}
+
+button.secondary:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+}
+
+button.remove-action {
+  border-color: var(--line);
+  background: var(--surface-soft);
+  color: color-mix(in srgb, var(--text-soft) 70%, transparent);
+}
+
+button.remove-action:hover {
+  border-color: var(--line);
+  background: var(--surface-soft);
+  color: var(--text-soft);
+}
+
 pre {
   max-height: 140px;
   overflow: auto;

public/styles.css

@@ -1,6 +1,6 @@
 [package]
 name = "fileshare"
-version = "1.0.4"
+version = "1.0.5"
 description = "LAN file sharing desktop app"
 authors = ["FileShare"]
 edition = "2021"

src-tauri/Cargo.lock

@@ -75,6 +75,50 @@ async fn download_admin_file(id: String) -> Result<(), String> {
     server::copy_item_to_path(&id, &target_path).await
 }
 
+#[tauri::command]
+async fn reveal_admin_file(id: String) -> Result<(), String> {
+    let path = server::item_file_path(&id).await?;
+    reveal_file(&path)
+}
+
+fn reveal_file(path: &PathBuf) -> Result<(), String> {
+    if !path.exists() {
+        return Err("源文件已不存在".to_string());
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        std::process::Command::new("open")
+            .arg("-R")
+            .arg(path)
+            .status()
+            .map_err(|error| error.to_string())?;
+        return Ok(());
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+        std::process::Command::new("explorer")
+            .arg(format!("/select,{}", path.display()))
+            .status()
+            .map_err(|error| error.to_string())?;
+        return Ok(());
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+        let directory = path.parent().unwrap_or(path.as_path());
+        std::process::Command::new("xdg-open")
+            .arg(directory)
+            .status()
+            .map_err(|error| error.to_string())?;
+        return Ok(());
+    }
+
+    #[allow(unreachable_code)]
+    Err("当前系统不支持打开文件位置".to_string())
+}
+
 #[tauri::command]
 async fn start_server(
     port: u16,
@@ -132,6 +176,7 @@ fn main() {
         .invoke_handler(tauri::generate_handler![
             pick_admin_files,
             download_admin_file,
+            reveal_admin_file,
             start_server,
             stop_server,
             server_status,