style(web): update app styles and AppShellRouteView

- app.css: update app-level styles - AppShellRouteView.vue: update app shell route view
2026-05-14 03:00:56 +00:00
parent b9cb6d9253
commit 00b72c3d43
2 changed files with 303 additions and 106 deletions
--- a/web/src/assets/styles/app.css
+++ b/web/src/assets/styles/app.css
@@ -18,7 +18,7 @@
  height: var(--desktop-stage-height, 100dvh);
  min-height: var(--desktop-stage-height, 100dvh);
  display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
+  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--bg);
 }

@@ -85,17 +85,10 @@

 .main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
 .main.overview-main {
-  height: var(--desktop-stage-height, 100dvh);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
 }
 .main.workbench-main {
-  height: var(--desktop-stage-height, 100dvh);
-  grid-template-rows: auto minmax(0, 1fr);
-  overflow: hidden;
-}
-.main.chat-main {
-  height: var(--desktop-stage-height, 100dvh);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
 }
@@ -105,7 +98,6 @@
 .main.audit-main,
 .main.employees-main,
 .main.settings-main {
-  height: var(--desktop-stage-height, 100dvh);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
 }
@@ -116,10 +108,6 @@
  grid-template-rows: minmax(0, 1fr);
 }
 .workarea { min-height: 0; overflow: auto; padding: 24px; }
-.workarea.chat-workarea {
-  min-height: 0;
-  overflow: hidden;
-}
 .workarea.requests-workarea,
 .workarea.approval-workarea,
 .workarea.policies-workarea,
@@ -135,10 +123,10 @@
  background: #fff;
 }

-@media (max-width: 1180px) {
-  .app { grid-template-columns: 220px minmax(0, 1fr); }
-}
@media (max-width: 760px) {
-  .app { display: block; }
+  .app {
+    height: auto;
+    min-height: 100dvh;
+  }
  .workarea { padding: 18px 16px 28px; }
 }
--- a/web/src/views/AppShellRouteView.vue
+++ b/web/src/views/AppShellRouteView.vue
@@ -1,22 +1,57 @@
-<template>
-  <div class="app">
-    <SidebarRail
-      :nav-items="filteredNavItems"
-      :active-view="activeView"
-      :company-name="companyProfile.name"
-      :current-user="currentUser"
-      @navigate="handleNavigate"
-      @open-chat="handleOpenChat"
-      @logout="handleLogout"
-    />
-
-    <main
-      class="main"
-      :class="{
-        'chat-main': activeView === 'chat',
-        'overview-main': activeView === 'overview',
-        'workbench-main': activeView === 'workbench',
-        'requests-main': activeView === 'requests',
+<template>
+  <div class="app">
+    <header class="shell-header">
+      <div class="shell-brand">
+        <span class="shell-brand-mark" aria-hidden="true">
+          <svg viewBox="0 0 36 36">
+            <path d="M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z" />
+            <path d="M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z" />
+          </svg>
+        </span>
+        <div class="shell-brand-copy">
+          <strong>{{ companyProfile.name || 'X-Financial' }}</strong>
+          <span>费用与报销运营平台</span>
+        </div>
+      </div>
+
+      <div class="shell-user-actions">
+        <div class="shell-user" aria-label="当前登录用户">
+          <span class="shell-user-avatar">{{ currentUser.avatar || '用' }}</span>
+          <span class="shell-user-copy">
+            <strong>{{ currentUser.name || '当前用户' }}</strong>
+            <span>{{ currentUser.role || '系统角色' }}</span>
+          </span>
+        </div>
+
+        <button class="shell-logout" type="button" @click="handleLogout">
+          <i class="mdi mdi-logout-variant"></i>
+          <span>退出登录</span>
+        </button>
+      </div>
+    </header>
+
+    <nav class="shell-nav" aria-label="主导航">
+      <div class="shell-nav-scroll">
+        <button
+          v-for="item in filteredNavItems"
+          :key="item.id"
+          class="shell-nav-btn"
+          :class="{ active: activeView === item.id }"
+          type="button"
+          @click="handleNavigate(item.id)"
+        >
+          <span class="shell-nav-icon" v-html="item.icon"></span>
+          <span>{{ item.label }}</span>
+        </button>
+      </div>
+    </nav>
+
+    <main
+      class="main"
+      :class="{
+        'overview-main': activeView === 'overview',
+        'workbench-main': activeView === 'workbench',
+        'requests-main': activeView === 'requests',
        'approval-main': activeView === 'approval',
        'policies-main': activeView === 'policies',
        'audit-main': activeView === 'audit',
@@ -40,64 +75,42 @@
        @update:active-range="activeRange = $event"
        @update:custom-range="customRange = $event"
        @batch-approve="toast('已批量通过 23 条审批任务。')"
-        @open-chat="handleOpenChat"
        @new-application="openTravelCreate"
      />
-
-      <FilterBar
-        v-if="activeView !== 'chat' && activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies' && activeView !== 'audit' && activeView !== 'employees' && activeView !== 'settings'"
-        :compact="activeView === 'overview'"
-        :filters="filters"
-        :ranges="ranges"
+
+      <FilterBar
+        v-if="activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies' && activeView !== 'audit' && activeView !== 'employees' && activeView !== 'settings'"
+        :compact="activeView === 'overview'"
+        :filters="filters"
+        :ranges="ranges"
        :active-range="activeRange"
        @update:active-range="activeRange = $event"
      />

-      <section
-        class="workarea"
-        :class="{
-          'chat-workarea': activeView === 'chat',
-          'requests-workarea': activeView === 'requests',
-          'approval-workarea': activeView === 'approval',
-          'policies-workarea': activeView === 'policies',
+      <section
+        class="workarea"
+        :class="{
+          'requests-workarea': activeView === 'requests',
+          'approval-workarea': activeView === 'approval',
+          'policies-workarea': activeView === 'policies',
          'audit-workarea': activeView === 'audit',
          'employees-workarea': activeView === 'employees',
          'settings-workarea': activeView === 'settings'
        }"
      >
-        <OverviewView
-          v-if="activeView === 'overview'"
-          :filtered-requests="filteredRequests"
-          @ask="handleOpenChat"
-          @approve="handleApprove"
-          @reject="handleReject"
-        />
+        <OverviewView
+          v-if="activeView === 'overview'"
+          :filtered-requests="filteredRequests"
+          @approve="handleApprove"
+          @reject="handleReject"
+        />

        <PersonalWorkbenchView
          v-else-if="activeView === 'workbench'"
          :assistant-modal-open="smartEntryOpen"
          @open-assistant="openSmartEntry"
        />
-
-        <ChatView
-          v-else-if="activeView === 'chat'"
-          :documents="filteredDocuments"
-          :doc-search="docSearch"
-          :messages="messages"
-          :uploaded-files="uploadedFiles"
-          :active-case="activeCase"
-          :quick-prompts="travelPrompts"
-          :draft="draft"
-          :sending="sending"
-          :message-list="messageList"
-          @send="sendMessage"
-          @upload="handleUpload"
-          @draft="draft = $event"
-          @select-case="handleOpenChat"
-          @approve-case="toast(`${activeCase?.id || '当前单据'} 已标记为通过。`)"
-          @reject-case="toast(`${activeCase?.id || '当前单据'} 已标记为驳回。`)"
-        />
-
+
        <TravelRequestDetailView
          v-else-if="activeView === 'requests' && detailMode && selectedRequest"
          :request="selectedRequest"
@@ -142,18 +155,16 @@
  </div>
 </template>

-<script setup>
-import { computed, ref } from 'vue'
-
-import SidebarRail from '../components/layout/SidebarRail.vue'
-import TopBar from '../components/layout/TopBar.vue'
-import FilterBar from '../components/layout/FilterBar.vue'
-import OverviewView from './OverviewView.vue'
-import PersonalWorkbenchView from './PersonalWorkbenchView.vue'
-import ChatView from './ChatView.vue'
-import TravelReimbursementCreateView from './TravelReimbursementCreateView.vue'
-import TravelRequestDetailView from './TravelRequestDetailView.vue'
-import RequestsView from './RequestsView.vue'
+<script setup>
+import { computed, ref } from 'vue'
+
+import TopBar from '../components/layout/TopBar.vue'
+import FilterBar from '../components/layout/FilterBar.vue'
+import OverviewView from './OverviewView.vue'
+import PersonalWorkbenchView from './PersonalWorkbenchView.vue'
+import TravelReimbursementCreateView from './TravelReimbursementCreateView.vue'
+import TravelRequestDetailView from './TravelRequestDetailView.vue'
+import RequestsView from './RequestsView.vue'
 import ApprovalCenterView from './ApprovalCenterView.vue'
 import PoliciesView from './PoliciesView.vue'
 import AuditView from './AuditView.vue'
@@ -184,16 +195,12 @@ const {
  handleApprove,
  handleDraftSaved,
  handleNavigate,
-  handleOpenChat,
  handleReject,
  handleRequestDeleted,
  handleRequestUpdated,
-  handleUpload,
-  messageList,
-  messages,
-  navItems,
-  openRequestDetail,
-  openSmartEntry,
+  navItems,
+  openRequestDetail,
+  openSmartEntry,
  openTravelCreate,
  ranges,
  requestSummary,
@@ -203,21 +210,223 @@ const {
  requests,
  search,
  selectedRequest,
-  sendMessage,
-  sending,
  smartEntryContext,
  smartEntryOpen,
  smartEntrySessionId,
  toast,
-  topBarView,
-  travelPrompts,
-  uploadedFiles
-} = useAppShell()
+  topBarView
+} = useAppShell()

 const { companyProfile, currentUser, logout } = useSystemState()
 const filteredNavItems = computed(() => filterNavItemsByAccess(navItems, currentUser.value))

-function handleLogout() {
-  logout('manual')
-}
-</script>
+function handleLogout() {
+  logout('manual')
+}
+</script>
+
+<style scoped>
+.shell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 18px 24px 14px;
+  border-bottom: 1px solid #e2e8f0;
+  background:
+    linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.98)),
+    #fff;
+}
+
+.shell-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.shell-brand-mark {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+  flex: 0 0 auto;
+}
+
+.shell-brand-mark svg {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}
+
+.shell-brand-copy {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.shell-brand-copy strong {
+  color: #0f172a;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 1.1;
+}
+
+.shell-brand-copy span {
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.shell-user-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.shell-user {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  padding: 0 14px;
+  border: 1px solid #dbe4ee;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.88);
+}
+
+.shell-user-avatar {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #0f9f78, #34d399);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.shell-user-copy {
+  display: grid;
+  gap: 1px;
+}
+
+.shell-user-copy strong {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.shell-user-copy span {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.shell-logout {
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px;
+  border: 1px solid #dbe4ee;
+  border-radius: 12px;
+  background: #fff;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 700;
+  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
+}
+
+.shell-logout:hover {
+  border-color: rgba(239, 68, 68, 0.2);
+  background: rgba(254, 242, 242, 0.9);
+  color: #dc2626;
+}
+
+.shell-nav {
+  padding: 12px 24px 0;
+  background: #fff;
+}
+
+.shell-nav-scroll {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 12px;
+  scrollbar-width: thin;
+}
+
+.shell-nav-btn {
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  border: 1px solid #dbe4ee;
+  border-radius: 999px;
+  background: #fff;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 700;
+  white-space: nowrap;
+  transition:
+    border-color 180ms ease,
+    background 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.shell-nav-btn:hover {
+  border-color: rgba(16, 185, 129, 0.25);
+  background: rgba(240, 253, 250, 0.96);
+  color: #059669;
+}
+
+.shell-nav-btn.active {
+  border-color: rgba(16, 185, 129, 0.2);
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.06));
+  color: #047857;
+  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.12);
+}
+
+.shell-nav-icon {
+  width: 18px;
+  height: 18px;
+  display: inline-grid;
+  place-items: center;
+  color: currentColor;
+}
+
+.shell-nav-btn :deep(svg) {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (max-width: 760px) {
+  .shell-header {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 16px 16px 12px;
+  }
+
+  .shell-user-actions {
+    justify-content: space-between;
+  }
+
+  .shell-nav {
+    padding: 10px 16px 0;
+  }
+}
+</style>