优化桌面端界面布局

2026-07-07 11:11:43 +08:00
parent 4aa1eb00b6
commit 7d88d6053a
30 changed files with 3158 additions and 659 deletions
@@ -1,18 +1,20 @@
 <template>
-  <div class="faq-list-card">
+  <div class="faq-list-card" :class="{ 'faq-list-card--desktop': isDesktop }">
    <el-table
      :data="items"
      v-loading="loading"
      style="width: 100%"
      class="faq-table"
+      :class="{ 'faq-table--with-actions': canDelete, 'faq-table--without-actions': !canDelete }"
      :row-class-name="rowClassName"
+      :height="isDesktop ? '100%' : undefined"
      @row-click="onRowClick"
      table-layout="fixed"
    >
    <el-table-column prop="question" :label="TEXT.common.fields.question" show-overflow-tooltip>
      <template #default="scope">
        <div class="question-cell">
-          <span class="question-icon">{{ questionInitial(scope.row.question) }}</span>
+          <span class="question-icon"><el-icon><QuestionFilled /></el-icon></span>
          <el-link type="primary" :underline="false" class="question-link">
            {{ scope.row.question }}
          </el-link>
@@ -52,12 +54,14 @@

 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from "element-plus";
+import { QuestionFilled } from "@element-plus/icons-vue";
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { deleteFaqItem } from "../api/faqs";
 import type { FaqItem, FaqCategory } from "../api/faqs";
 import { displayDateTime, displayEnum } from "../utils/display";
 import { TEXT } from "../locales";
+import { isTauriRuntime } from "../runtime";

 const props = defineProps<{
  items: FaqItem[];
@@ -69,6 +73,7 @@ const props = defineProps<{
 const emit = defineEmits(["refresh"]);

 const router = useRouter();
+const isDesktop = isTauriRuntime();

 const categoryMap = computed(() =>
  props.categories.reduce<Record<string, string>>((acc, cur) => {
@@ -81,10 +86,6 @@ const categoryLabel = (categoryId: string) => {
  return categoryMap.value[categoryId] || categoryId || "--";
 };

-const questionInitial = (question?: string) => {
-  return String(question || "?").trim().slice(0, 1) || "?";
-};
-
 const splitDateTime = (value?: string | number | Date | null) => {
  const displayValue = displayDateTime(value);
  const [date, time] = displayValue.split(" ");
@@ -145,9 +146,10 @@ const remove = async (row: FaqItem) => {
 }

 .faq-table :deep(.el-table__header-wrapper th.el-table__cell) {
-  border-bottom: 0;
-  background: transparent;
-  color: #8a98aa;
+  height: 46px;
+  border-bottom: 1px solid #dce8f7;
+  background: linear-gradient(180deg, #f7fbff 0%, #eef5fc 100%);
+  color: #5d7088;
  font-size: 14px;
  font-weight: 800;
 }
@@ -166,21 +168,23 @@ const remove = async (row: FaqItem) => {
 }

 .faq-table :deep(.faq-row td.el-table__cell) {
-  padding: 12px 0;
+  padding: 14px 0;
  border-bottom: 1px solid #e8eef6;
  background: #ffffff;
  transition: background 0.18s ease;
 }

 .faq-table :deep(.faq-row:hover td.el-table__cell) {
-  background: #f8f9fb;
+  background: #f7fbff;
 }

-.faq-table :deep(col:nth-child(1)) { width: 43%; }
-.faq-table :deep(col:nth-child(2)) { width: 14%; }
-.faq-table :deep(col:nth-child(3)) { width: 14%; }
-.faq-table :deep(col:nth-child(4)) { width: 14%; }
-.faq-table :deep(col:nth-child(5)) { width: 15%; }
+.faq-table--with-actions :deep(col) {
+  width: 20%;
+}
+
+.faq-table--without-actions :deep(col) {
+  width: 25%;
+}



@@ -205,10 +209,19 @@ const remove = async (row: FaqItem) => {
  width: 34px;
  height: 34px;
  border-radius: 10px;
-  background: #f3f7fb;
-  color: #5e6f7b;
-  font-size: 15px;
+  background:
+    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.42) 0%, transparent 28%),
+    linear-gradient(135deg, #2f7be8 0%, #23b7d9 100%);
+  color: #ffffff;
+  font-size: 17px;
  font-weight: 800;
+  box-shadow:
+    0 10px 20px rgba(47, 123, 232, 0.2),
+    0 1px 0 rgba(255, 255, 255, 0.45) inset;
+}
+
+.question-icon :deep(.el-icon) {
+  font-size: 1em;
 }

 .question-link {
@@ -257,4 +270,128 @@ const remove = async (row: FaqItem) => {
 .question-link {
  cursor: pointer;
 }
+
+.faq-list-card--desktop {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+  background: #ffffff;
+}
+
+.faq-list-card--desktop .faq-table {
+  height: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-table__inner-wrapper) {
+  height: 100%;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-table__header-wrapper th.el-table__cell) {
+  height: 42px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgba(121, 152, 188, 0.28) !important;
+  background: linear-gradient(180deg, #f4f9ff 0%, #eaf3fc 100%) !important;
+  color: #49647f;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-table__body) {
+  border-collapse: separate;
+  border-spacing: 0 6px;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-table__body-wrapper) {
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+  scrollbar-width: none;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-table__body-wrapper::-webkit-scrollbar),
+.faq-list-card--desktop .faq-table :deep(.el-scrollbar__wrap::-webkit-scrollbar) {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-scrollbar__wrap) {
+  scrollbar-width: none;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-scrollbar__bar.is-vertical) {
+  display: none !important;
+}
+
+.faq-list-card--desktop .faq-table :deep(.el-table__empty-block) {
+  min-height: 100%;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+}
+
+.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell) {
+  padding: 10px 14px;
+  border-top: 1px solid rgba(226, 235, 246, 0.92);
+  border-bottom: 1px solid rgba(226, 235, 246, 0.92);
+  background: #ffffff;
+  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell:first-child) {
+  border-left: 1px solid rgba(226, 235, 246, 0.92);
+  border-radius: 9px 0 0 9px;
+}
+
+.faq-list-card--desktop .faq-table :deep(.faq-row td.el-table__cell:last-child) {
+  border-right: 1px solid rgba(226, 235, 246, 0.92);
+  border-radius: 0 9px 9px 0;
+}
+
+.faq-list-card--desktop .faq-table :deep(.faq-row:hover td.el-table__cell) {
+  border-color: rgba(111, 159, 220, 0.34);
+  background: #f5faff;
+  box-shadow: 0 8px 18px rgba(45, 86, 143, 0.06);
+}
+
+.faq-list-card--desktop .question-cell {
+  gap: 10px;
+}
+
+.faq-list-card--desktop .question-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  font-size: 14px;
+  box-shadow:
+    0 8px 16px rgba(47, 123, 232, 0.18),
+    0 1px 0 rgba(255, 255, 255, 0.45) inset;
+}
+
+.faq-list-card--desktop .question-link {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.faq-list-card--desktop .category-pill {
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 7px;
+  background: linear-gradient(135deg, #e7f3ff 0%, #eefaff 100%);
+  font-size: 12px;
+}
+
+.faq-list-card--desktop .time-text {
+  gap: 0;
+  font-size: 11px;
+}
+
+:global([data-ctms-theme="dark"] .faq-list-card--desktop .faq-table .faq-row td.el-table__cell) {
+  border-color: #26364a;
+  background: #172033;
+}
+
+:global([data-ctms-theme="dark"] .faq-list-card--desktop .faq-table .faq-row:hover td.el-table__cell) {
+  background: #1d2b42;
+}
 </style>