feat(desktop): 收口桌面工作台视觉与活动反馈

frontend/src/views/documents/DocumentList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page ctms-page-shell page--flush">
+  <div class="page ctms-page-shell page--flush" :class="{ 'document-page--desktop': isDesktop }" @click="closeDocumentContextMenu">
     <div class="main-content-flat unified-shell">
       <div class="filter-container unified-action-bar bar--flush">
         <el-form :inline="true" :model="filters" class="filter-form">
@@ -29,72 +29,148 @@
         </el-form>
       </div>
       <section class="unified-section document-table-section section--flush-x section--flush-top section--flush-bottom">
-        <el-table
-          :data="sortedItems"
-          v-loading="loading"
-          @row-click="handleRowClick"
-          :row-class-name="documentRowClass"
-          class="ctms-table"
-          table-layout="fixed"
-        >
-          <el-table-column prop="title" :label="TEXT.modules.fileVersionManagement.columns.title" show-overflow-tooltip>
-            <template #default="{ row }">
-              <span class="font-semibold">{{ row.title }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.scope">
-            <template #default="{ row }">
-              <el-tag
-                effect="plain"
-                :type="row.scope_type === 'SITE' ? 'warning' : 'success'"
-              >
-                {{ displayEnum(TEXT.enums.scopeType, row.scope_type) }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.site" show-overflow-tooltip>
-            <template #default="{ row }">
-              <span>{{ displaySite(row.site_id) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.docType">
-            <template #default="{ row }">
-              <el-tag effect="plain" type="info">{{ displayText(row.doc_type, TEXT.enums.documentType) }}</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.currentVersion">
-            <template #default="{ row }">
-              <span v-if="row.current_effective_version">{{ row.current_effective_version.version_no }}</span>
-              <span v-else class="text-secondary">-</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="updated_at" :label="TEXT.modules.fileVersionManagement.columns.updatedAt" show-overflow-tooltip>
-            <template #default="{ row }">
-              <span class="text-secondary datetime-stack">
-                <span>{{ splitDateTime(row.updated_at).date }}</span>
-                <span class="datetime-stack__time">{{ splitDateTime(row.updated_at).time }}</span>
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column v-if="canUpdate || canDelete" :label="TEXT.modules.fileVersionManagement.columns.actions" width="130" fixed="right">
-            <template #default="{ row }">
-              <div class="cell-actions">
-                <el-button v-if="canUpdate" link type="primary" size="small" :disabled="isInactiveSite(row.site_id)" @click.stop="openEdit(row)">
+        <div class="document-workbench" :class="{ 'is-desktop': isDesktop }">
+          <div class="document-table-pane" :tabindex="isDesktop ? 0 : undefined" @keydown.enter.prevent="openSelectedDocument">
+            <el-table
+              :data="sortedItems"
+              v-loading="loading"
+              @row-click="handleDocumentRowClick"
+              @row-dblclick="openDocumentDetail"
+              @row-contextmenu="openDocumentContextMenu"
+              :row-class-name="documentRowClass"
+              class="ctms-table"
+              highlight-current-row
+              table-layout="fixed"
+            >
+              <el-table-column prop="title" :label="TEXT.modules.fileVersionManagement.columns.title" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span class="font-semibold">{{ row.title }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="TEXT.modules.fileVersionManagement.columns.scope">
+                <template #default="{ row }">
+                  <el-tag
+                    effect="plain"
+                    :type="row.scope_type === 'SITE' ? 'warning' : 'success'"
+                  >
+                    {{ displayEnum(TEXT.enums.scopeType, row.scope_type) }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column :label="TEXT.modules.fileVersionManagement.columns.site" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span>{{ displaySite(row.site_id) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="TEXT.modules.fileVersionManagement.columns.docType">
+                <template #default="{ row }">
+                  <el-tag effect="plain" type="info">{{ displayText(row.doc_type, TEXT.enums.documentType) }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column :label="TEXT.modules.fileVersionManagement.columns.currentVersion">
+                <template #default="{ row }">
+                  <span v-if="row.current_effective_version">{{ row.current_effective_version.version_no }}</span>
+                  <span v-else class="text-secondary">-</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="updated_at" :label="TEXT.modules.fileVersionManagement.columns.updatedAt" show-overflow-tooltip>
+                <template #default="{ row }">
+                  <span class="text-secondary datetime-stack">
+                    <span>{{ splitDateTime(row.updated_at).date }}</span>
+                    <span class="datetime-stack__time">{{ splitDateTime(row.updated_at).time }}</span>
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column v-if="!isDesktop && (canUpdate || canDelete)" :label="TEXT.modules.fileVersionManagement.columns.actions" width="130" fixed="right">
+                <template #default="{ row }">
+                  <div class="cell-actions">
+                    <el-button v-if="canUpdate" link type="primary" size="small" :disabled="isInactiveSite(row.site_id)" @click.stop="openEdit(row)">
+                      {{ TEXT.common.actions.edit }}
+                    </el-button>
+                    <el-button v-if="canDelete" link type="danger" size="small" :disabled="isInactiveSite(row.site_id)" @click.stop="confirmDelete(row)">
+                       {{ TEXT.common.actions.delete }}
+                    </el-button>
+                  </div>
+                </template>
+              </el-table-column>
+              <template #empty>
+                <el-empty :description="TEXT.modules.fileVersionManagement.emptyDescription" />
+              </template>
+            </el-table>
+          </div>
+
+          <aside v-if="isDesktop" class="document-preview-pane">
+            <template v-if="selectedDocument">
+              <div class="preview-head">
+                <div>
+                  <div class="preview-kicker">当前文档</div>
+                  <div class="preview-title">{{ selectedDocument.title || TEXT.common.fallback }}</div>
+                </div>
+                <el-button size="small" type="primary" @click="openSelectedDocument">打开详情</el-button>
+              </div>
+              <dl class="preview-list">
+                <dt>{{ TEXT.modules.fileVersionManagement.columns.scope }}</dt>
+                <dd>{{ displayEnum(TEXT.enums.scopeType, selectedDocument.scope_type) }}</dd>
+                <dt>{{ TEXT.modules.fileVersionManagement.columns.site }}</dt>
+                <dd>{{ displaySite(selectedDocument.site_id) }}</dd>
+                <dt>{{ TEXT.modules.fileVersionManagement.columns.docType }}</dt>
+                <dd>{{ displayText(selectedDocument.doc_type, TEXT.enums.documentType) }}</dd>
+                <dt>{{ TEXT.modules.fileVersionManagement.columns.currentVersion }}</dt>
+                <dd>{{ selectedDocument.current_effective_version?.version_no || TEXT.common.fallback }}</dd>
+                <dt>{{ TEXT.modules.fileVersionManagement.columns.updatedAt }}</dt>
+                <dd>{{ displayDateTime(selectedDocument.updated_at) }}</dd>
+              </dl>
+              <div class="preview-actions">
+                <el-button size="small" @click="openSelectedDocument">打开详情</el-button>
+                <el-button v-if="canUpdate" size="small" :disabled="isInactiveSite(selectedDocument.site_id)" @click="openSelectedDocumentEditor">
                   {{ TEXT.common.actions.edit }}
                 </el-button>
-                <el-button v-if="canDelete" link type="danger" size="small" :disabled="isInactiveSite(row.site_id)" @click.stop="confirmDelete(row)">
-                   {{ TEXT.common.actions.delete }}
+                <el-button
+                  v-if="canDelete"
+                  size="small"
+                  type="danger"
+                  plain
+                  :disabled="isInactiveSite(selectedDocument.site_id)"
+                  @click="deleteSelectedDocument"
+                >
+                  {{ TEXT.common.actions.delete }}
                 </el-button>
               </div>
             </template>
-          </el-table-column>
-          <template #empty>
-            <el-empty :description="TEXT.modules.fileVersionManagement.emptyDescription" />
-          </template>
-        </el-table>
+            <div v-else class="preview-empty">
+              <span>选择一行查看文档摘要</span>
+            </div>
+          </aside>
+        </div>
       </section>
     </div>
 
+    <div
+      v-if="isDesktop && documentContextMenu.visible && selectedDocument"
+      class="document-context-menu"
+      :style="{ left: `${documentContextMenu.x}px`, top: `${documentContextMenu.y}px` }"
+      @click.stop
+    >
+      <button type="button" @click="openSelectedDocument">打开详情</button>
+      <button
+        v-if="canUpdate"
+        type="button"
+        :disabled="isInactiveSite(selectedDocument.site_id)"
+        @click="openSelectedDocumentEditor"
+      >
+        {{ TEXT.common.actions.edit }}
+      </button>
+      <button
+        v-if="canDelete"
+        type="button"
+        class="danger"
+        :disabled="isInactiveSite(selectedDocument.site_id)"
+        @click="deleteSelectedDocument"
+      >
+        {{ TEXT.common.actions.delete }}
+      </button>
+    </div>
+
     <el-drawer
       v-if="editorVisible"
       v-model="editorVisible"
@@ -179,6 +255,7 @@ import type { Site } from "../../types/api";
 import { displayDateTime, displayEnum, displayText } from "../../utils/display";
 import { TEXT } from "../../locales";
 import { onDesktopRefreshCurrentView } from "../../composables/useDesktopRefresh";
+import { isTauriRuntime } from "../../runtime";
 
 const route = useRoute();
 const router = useRouter();
@@ -192,6 +269,9 @@ const editorVisible = ref(false);
 const saving = ref(false);
 const editingDocumentId = ref("");
 const editorFormRef = ref<FormInstance>();
+const isDesktop = isTauriRuntime();
+const selectedDocumentId = ref("");
+const documentContextMenu = ref({ visible: false, x: 0, y: 0 });
 let desktopRefreshCleanup: (() => void) | undefined;
 
 const trialId = computed(() => (route.params.trialId as string) || "");
@@ -228,7 +308,13 @@ const canUpdate = computed(() => can("documents.update"));
 const canDelete = computed(() => can("documents.delete"));
 const isInactiveSite = (siteId?: string | null) => !!siteId && siteActiveMap.value[siteId] === false;
 const documentRowClass = ({ row }: { row: DocumentSummary }) =>
-  `${row?.id ? "clickable-row" : ""}${isInactiveSite(row?.site_id) ? " row-inactive" : ""}`.trim();
+  [
+    row?.id ? "clickable-row" : "",
+    isInactiveSite(row?.site_id) ? "row-inactive" : "",
+    isDesktop && row?.id === selectedDocumentId.value ? "row-selected" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
 const filteredItems = computed(() =>
   items.value.filter((item) => {
     if (filters.scope_type && item?.scope_type !== filters.scope_type) return false;
@@ -240,6 +326,9 @@ const filteredItems = computed(() =>
 const sortedItems = computed(() =>
   [...filteredItems.value].sort((a, b) => Number(isInactiveSite(a?.site_id)) - Number(isInactiveSite(b?.site_id)))
 );
+const selectedDocument = computed(() =>
+  sortedItems.value.find((item) => item.id === selectedDocumentId.value) || null
+);
 
 const editorForm = reactive({
   doc_no: "",
@@ -402,11 +491,60 @@ const submitEditor = async () => {
 
 const goDetail = (id: string) => router.push(`/documents/${id}`);
 
-const handleRowClick = (row: DocumentSummary) => {
+const selectDocument = (row: DocumentSummary) => {
   if (!row?.id) return;
+  selectedDocumentId.value = row.id;
+};
+
+const handleDocumentRowClick = (row: DocumentSummary) => {
+  if (!row?.id) return;
+  if (isDesktop) {
+    selectDocument(row);
+    return;
+  }
   goDetail(row.id);
 };
 
+const openDocumentDetail = (row?: DocumentSummary | null) => {
+  const target = row?.id ? row : selectedDocument.value;
+  if (target?.id) goDetail(target.id);
+};
+
+const openSelectedDocument = () => {
+  closeDocumentContextMenu();
+  openDocumentDetail(selectedDocument.value);
+};
+
+const openSelectedDocumentEditor = () => {
+  const target = selectedDocument.value;
+  closeDocumentContextMenu();
+  if (target) openEdit(target);
+};
+
+const deleteSelectedDocument = () => {
+  const target = selectedDocument.value;
+  closeDocumentContextMenu();
+  if (target) {
+    void confirmDelete(target);
+  }
+};
+
+const closeDocumentContextMenu = () => {
+  if (!documentContextMenu.value.visible) return;
+  documentContextMenu.value = { visible: false, x: 0, y: 0 };
+};
+
+const openDocumentContextMenu = (row: DocumentSummary, _column: unknown, event: MouseEvent) => {
+  if (!isDesktop || !row?.id) return;
+  event.preventDefault();
+  selectDocument(row);
+  documentContextMenu.value = {
+    visible: true,
+    x: Math.min(event.clientX, window.innerWidth - 184),
+    y: Math.min(event.clientY, window.innerHeight - 132),
+  };
+};
+
 const confirmDelete = async (row: DocumentSummary) => {
   if (!canDelete.value) {
     ElMessage.warning("权限不足");
@@ -457,6 +595,22 @@ watch(
     }
   }
 );
+
+watch(
+  () => sortedItems.value.map((item) => item.id).join("|"),
+  () => {
+    if (!isDesktop) return;
+    const rows = sortedItems.value;
+    if (!rows.length) {
+      selectedDocumentId.value = "";
+      return;
+    }
+    if (!rows.some((item) => item.id === selectedDocumentId.value)) {
+      selectedDocumentId.value = rows[0].id;
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <style scoped>
@@ -551,6 +705,147 @@ watch(
     0 2px 8px rgba(0, 0, 0, 0.02);
 }
 
+.document-workbench {
+  min-width: 0;
+  min-height: 0;
+}
+
+.document-workbench.is-desktop {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 304px;
+  min-height: min(570px, calc(100vh - 178px));
+}
+
+.document-table-pane {
+  min-width: 0;
+  outline: none;
+}
+
+.document-workbench.is-desktop .document-table-pane {
+  border-right: 1px solid #e3e9f1;
+}
+
+.document-preview-pane {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background: #f8fafc;
+}
+
+.preview-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.preview-kicker {
+  margin-bottom: 5px;
+  color: #6b7e95;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.preview-title {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #142033;
+  font-size: 17px;
+  font-weight: 800;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.preview-list {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 10px 12px;
+  margin: 0;
+}
+
+.preview-list dt {
+  color: #7b8da3;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.preview-list dd {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: #223349;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.preview-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: auto;
+}
+
+.preview-empty {
+  display: flex;
+  min-height: 180px;
+  align-items: center;
+  justify-content: center;
+  color: #7b8da3;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.document-context-menu {
+  position: fixed;
+  z-index: 2300;
+  display: flex;
+  width: 172px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid #cbd7e5;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.16);
+}
+
+.document-context-menu button {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 30px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #223349;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: left;
+}
+
+.document-context-menu button:hover:not(:disabled) {
+  background: #eef4fb;
+  color: #183756;
+}
+
+.document-context-menu button.danger {
+  color: #b42318;
+}
+
+.document-context-menu button:disabled {
+  cursor: not-allowed;
+  color: #9aaabd;
+}
+
 .ctms-table {
   --el-table-border-color: transparent;
   --el-table-row-hover-bg-color: #f8f9fb;
@@ -583,6 +878,10 @@ watch(
   transition: background 0.1s ease;
 }
 
+.ctms-table :deep(.el-table__body tr.row-selected > td) {
+  background: #eaf1f8 !important;
+}
+
 .ctms-table :deep(.font-semibold) {
   font-weight: 600;
   color: #0a0a0a;
@@ -628,6 +927,44 @@ watch(
 .ctms-table :deep(.cell-actions .el-button + .el-button) {
   margin-left: 0;
 }
+
+:global([data-ctms-theme="dark"] .document-page--desktop .document-table-section) {
+  background: #172033;
+}
+
+:global([data-ctms-theme="dark"] .document-page--desktop .document-preview-pane) {
+  border-color: #26364a;
+  background: #111827;
+}
+
+:global([data-ctms-theme="dark"] .document-page--desktop .preview-title),
+:global([data-ctms-theme="dark"] .document-page--desktop .preview-list dd) {
+  color: #f8fafc;
+}
+
+:global([data-ctms-theme="dark"] .document-page--desktop .preview-kicker),
+:global([data-ctms-theme="dark"] .document-page--desktop .preview-list dt),
+:global([data-ctms-theme="dark"] .document-page--desktop .preview-empty) {
+  color: #94a3b8;
+}
+
+:global([data-ctms-theme="dark"] .document-page--desktop .document-context-menu) {
+  border-color: #334155;
+  background: #172033;
+}
+
+:global([data-ctms-theme="dark"] .document-page--desktop .document-context-menu button) {
+  color: #dbe5f1;
+}
+
+:global([data-ctms-theme="dark"] .document-page--desktop .document-context-menu button:hover:not(:disabled)) {
+  background: #243247;
+  color: #bfdbfe;
+}
+
+:global([data-ctms-theme="dark"] .document-page--desktop .ctms-table .el-table__body tr.row-selected > td) {
+  background: #243247 !important;
+}
 </style>
 
 <style>