v0.9.7

frontend/src/pages/Preview/FileSharePage.jsx

@@ -120,16 +120,19 @@ function FileSharePage() {
   return (
     <div className="preview-page file-share-page">
       <div className="file-share-shell">
-        <div className="file-share-header">
-          <div className="file-share-meta">
-            <h1>{shareInfo?.name || '文件分享'}</h1>
-            {shareInfo?.project_name && <p>{shareInfo.project_name}</p>}
-          </div>
-          <Button type="text" icon={<CloseOutlined />} onClick={handleClose} className="preview-close-btn" />
-        </div>
-
         <Layout className="file-share-content-layout">
           <Content className="file-share-content" ref={contentRef}>
+            <div className="preview-content-header file-share-content-header">
+              <button
+                type="button"
+                className="project-back-button"
+                onClick={handleClose}
+                aria-label="关闭文档分享"
+              >
+                <CloseOutlined />
+              </button>
+              <h3>{contentInfo?.filename || shareInfo?.name || '文件分享'}</h3>
+            </div>
             {loading ? (
               <div className="preview-loading">
                 <Spin size="large">

frontend/src/pages/Preview/PreviewPage.css

@@ -16,31 +16,10 @@
   background: var(--bg-color);
 }
 
-.file-share-header {
+.file-share-content-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 14px;
-  gap: 16px;
-  padding: 18px 24px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--header-bg);
-}
-
-.file-share-meta {
-  min-width: 0;
-}
-
-.file-share-meta h1 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-color);
-}
-
-.file-share-meta p {
-  margin: 4px 0 0;
-  font-size: 13px;
-  color: var(--text-color-secondary);
 }
 
 .file-share-content {
@@ -62,12 +41,38 @@
   flex: none;
 }
 
+.project-back-button {
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: #707480;
+  font-size: 16px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.project-back-button:hover {
+  background: rgba(17, 24, 39, 0.06);
+  color: #2f3440;
+  transform: translateX(-1px);
+}
+
+.project-back-button:focus-visible {
+  outline: 2px solid rgba(22, 119, 255, 0.35);
+  outline-offset: 2px;
+}
+
 .preview-sider-title-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
-  margin-bottom: 8px;
+  min-width: 0;
 }
 
 .preview-layout {
@@ -85,22 +90,24 @@
 }
 
 .preview-sider-header {
-  padding: 16px;
+  min-height: 57px;
+  padding: 14px 24px;
   border-bottom: 1px solid var(--border-color);
+  background: var(--header-bg);
+  display: flex;
+  align-items: center;
 }
 
 .preview-sider-header h2 {
-  margin: 0 0 8px 0;
+  margin: 0;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--text-color);
-}
+  flex: 1;
-
+  min-width: 0;
-.preview-project-desc {
+  overflow: hidden;
-  margin: 0;
+  text-overflow: ellipsis;
-  font-size: 13px;
+  white-space: nowrap;
-  color: var(--text-color-secondary);
-  line-height: 1.5;
 }
 
 .preview-search {
@@ -228,6 +235,29 @@
   background: var(--bg-color);
 }
 
+.preview-content-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  min-height: 57px;
+  padding: 14px 24px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--header-bg);
+  display: flex;
+  align-items: center;
+}
+
+.preview-content-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
 .preview-content-wrapper {
   max-width: 900px;
   margin: 0 auto;

frontend/src/pages/Preview/ProjectSharePage.jsx

@@ -381,9 +381,6 @@ function ProjectSharePage() {
               open={mobileDrawerVisible}
               width="80%"
             >
-              <div className="preview-sider-header" style={{ padding: '0 0 16px' }}>
-                {projectInfo?.description && <p className="preview-project-desc">{projectInfo.description}</p>}
-              </div>
               <div className="preview-search">
                 <Input.Search
                   placeholder="搜索文档内容..."
@@ -414,10 +411,16 @@ function ProjectSharePage() {
           <Sider width={280} className="preview-sider" theme="light" collapsed={siderCollapsed} collapsedWidth={0}>
             <div className="preview-sider-header">
               <div className="preview-sider-title-row">
-                <h2 style={{ margin: 0 }}>{projectInfo?.name || '项目分享'}</h2>
+                <button
-                <Button type="text" icon={<CloseOutlined />} onClick={handleClose} className="preview-close-btn" />
+                  type="button"
+                  className="project-back-button"
+                  onClick={handleClose}
+                  aria-label="关闭项目分享"
+                >
+                  <CloseOutlined />
+                </button>
+                <h2>{projectInfo?.name || '项目分享'}</h2>
               </div>
-              {projectInfo?.description && <p className="preview-project-desc">{projectInfo.description}</p>}
             </div>
             <div className="preview-search">
               <Input.Search
@@ -450,6 +453,9 @@ function ProjectSharePage() {
 
         <Layout className="preview-content-layout">
           <Content className="preview-content" ref={contentRef}>
+            <div className="preview-content-header">
+              <h3>{selectedFile || 'README.md'}</h3>
+            </div>
             <div className={`preview-content-wrapper ${viewMode === 'pdf' ? 'pdf-mode' : ''}`}>
               {loading ? (
                 <div className="preview-loading">