优化UI排版。

desktop-client/web/src/App.jsx

@@ -13,15 +13,17 @@ import "./styles/index.less";
 import { ToastContainer } from "react-toastify";
 
 import TopHeader from "./components/Header";
+import Footer from "./components/Footer";
 import HistoryPage from "./pages/History";
 import MainPage from "./pages/Download";
 import ConfigCenter from "./pages/ConfigCenter";
 import { useEffect, useState } from "react";
 import { fetchAppVersion } from "./utils/const";
+import { version as fallbackVersion } from "../package.json";
 
 function App() {
   const [selectedTab, setSelectedTab] = useState("download");
-  const [appVersion, setAppVersion] = useState("");
+  const [appVersion, setAppVersion] = useState(fallbackVersion);
 
   useEffect(() => {
     fetchAppVersion().then((version) => setAppVersion(version));
@@ -45,7 +47,7 @@ function App() {
             <Route path="/config" element={<ConfigCenter />} />
           </Routes> */}
       </div>
-      <div className="app-footer">当前版本号：v{appVersion}</div>
+      <Footer appVersion={appVersion} />
       <ToastContainer style={{ top: "55px" }} />
       {/* </Router> */}
     </div>

desktop-client/web/src/components/Footer/index.jsx

@@ -0,0 +1,44 @@
+import electronService from "@/services/electronService";
+import { PROJECT_LINKS } from "@/utils/const";
+
+import "./index.less";
+
+function FooterLink({ href, children }) {
+  const handleClick = (event) => {
+    event.preventDefault();
+    electronService.openExternalUrl(href);
+  };
+
+  return (
+    <a
+      className="app-footer-link"
+      href={href}
+      title={href}
+      onClick={handleClick}
+    >
+      {children}
+    </a>
+  );
+}
+
+function Footer({ appVersion }) {
+  return (
+    <footer className="app-footer">
+      <div className="app-footer-inner">
+        <FooterLink href={PROJECT_LINKS.discussions}>论坛求助</FooterLink>
+        <span className="app-footer-sep">|</span>
+        <FooterLink href={PROJECT_LINKS.docs}>使用手册</FooterLink>
+        <span className="app-footer-sep">|</span>
+        <FooterLink href={PROJECT_LINKS.github}>GitHub</FooterLink>
+        <span className="app-footer-sep">|</span>
+        <FooterLink href={PROJECT_LINKS.gitee}>Gitee</FooterLink>
+        <span className="app-footer-sep">|</span>
+        <span className="app-footer-version">
+          当前版本：{appVersion ? `v${appVersion}` : "v-"}
+        </span>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

desktop-client/web/src/components/Footer/index.less

@@ -0,0 +1,44 @@
+.app-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  padding: 10px 16px;
+  background: #f5f7fa;
+  border-top: 1px solid #e8edf3;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #8a939e;
+}
+
+.app-footer-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.app-footer-link {
+  color: var(--secondary-color);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.app-footer-link:hover {
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+
+.app-footer-sep {
+  margin: 0 10px;
+  color: #c5ccd4;
+}
+
+.app-footer-version {
+  color: #9aa3ad;
+  white-space: nowrap;
+}

desktop-client/web/src/styles/index.less

@@ -29,7 +29,7 @@ body {
 }
 
 .main-content {
-  padding: 80px 0 40px;
+  padding: 80px 0 52px;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -146,16 +146,6 @@ input:checked + .slider:before {
   transform: translateX(24px);
 }
 
-.app-footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  padding-bottom: 16px;
-  font-size: 12px;
-  color: #999;
-}
-
 /* 按钮样式 */
 .btn {
   padding: 14px 28px;

desktop-client/web/src/utils/const.tsx

@@ -6,6 +6,13 @@ export const THEME_COLOR = "#5c89ff"; // --primary-l
 
 export const G_EmptyStr = "-";
 
+export const PROJECT_LINKS = {
+  discussions: "https://github.com/Hommy-master/capcut-mate/discussions",
+  docs: "https://docs.jcaigc.cn",
+  github: "https://github.com/Hommy-master/capcut-mate",
+  gitee: "https://gitee.com/taohongmin-gitee/capcut-mate",
+};
+
 export const fetchAppVersion = async () => {
     let appVersion = version;
   try {