fix loss style for async load

package.json

@@ -9,6 +9,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@marsio/vue-split-pane": "^1.0.0",
 		"less": "^4.3.0",
 		"pinia": "^2.1.7",
 		"tdesign-vue-next": "^1.14.2",
@@ -33,8 +34,8 @@
 		"eslint-plugin-prettier": "^5.2.3",
 		"eslint-plugin-promise": "^7.2.1",
 		"eslint-plugin-vue": "^9.32.0",
-		"prettier": "^3.5.2",
 		"less": "^4.3.0",
+		"prettier": "^3.5.2",
 		"typescript": "^5.8.3",
 		"unplugin-auto-import": "^19.3.0",
 		"unplugin-vue-components": "^28.7.0",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@marsio/vue-split-pane':
+        specifier: ^1.0.0
+        version: 1.0.0(typescript@5.8.3)
       less:
         specifier: ^4.3.0
         version: 4.3.0
@@ -667,6 +670,36 @@ packages:
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@emotion/babel-plugin@11.13.5':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
+  '@emotion/css@11.13.5':
+    resolution: {integrity: sha512-wQdD0Xhkn3Qy2VNcIzbLP9MR8TafI0MJb7BEAXKp+w4+XqErksWR4OXomuDzPsN4InLdGhVe6EYcn2ZIUCpB8w==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
+  '@emotion/utils@1.4.2':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@esbuild/aix-ppc64@0.25.5':
     resolution: {integrity: sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==}
     engines: {node: '>=18'}
@@ -878,6 +911,12 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
+  '@marsio/vue-draggable@1.0.9':
+    resolution: {integrity: sha512-gjj4cgFd9uQUdTMU3mbNKarASb4UAPH4D9DL4WicsjLtCjAXbthpls0GtfMLuPlfmFAhBjhQAzKMhpGDIEa9VA==}
+
+  '@marsio/vue-split-pane@1.0.0':
+    resolution: {integrity: sha512-7XEaVDjVhnoYSVcbgPvONT/U3F6n/oKbcNaj0i+lE2EfP2P38kIKyhHbSgbSGx+8i/DAP5vQtcjLIcleWb4N+A==}
+
   '@microsoft/api-extractor-model@7.30.6':
     resolution: {integrity: sha512-znmFn69wf/AIrwHya3fxX6uB5etSIn6vg4Q4RB/tb5VDDs1rqREc+AvMC/p19MUN13CZ7+V/8pkYPTj7q8tftg==}
 
@@ -1699,6 +1738,10 @@ packages:
   babel-plugin-dynamic-import-node@2.3.3:
     resolution: {integrity: sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==}
 
+  babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
   babel-plugin-polyfill-corejs2@0.4.12:
     resolution: {integrity: sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==}
     peerDependencies:
@@ -1880,6 +1923,10 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -2111,6 +2158,9 @@ packages:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
 
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -2154,6 +2204,9 @@ packages:
     peerDependencies:
       postcss: ^8.0.9
 
+  css-in-js-utils@3.1.0:
+    resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
+
   css-loader@6.11.0:
     resolution: {integrity: sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==}
     engines: {node: '>= 12.13.0'}
@@ -2632,6 +2685,9 @@ packages:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
     engines: {node: '>=8'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -2867,6 +2923,9 @@ packages:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
+  hyphenate-style-name@1.1.0:
+    resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -2919,6 +2978,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  inline-style-prefixer@7.0.1:
+    resolution: {integrity: sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==}
+
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -4105,6 +4167,10 @@ packages:
   source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
 
+  source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -4201,6 +4267,9 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
+  stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -5535,6 +5604,60 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@emotion/babel-plugin@11.13.5':
+    dependencies:
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/runtime': 7.26.9
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/cache@11.14.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/css@11.13.5':
+    dependencies:
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/memoize@0.9.0': {}
+
+  '@emotion/serialize@1.3.3':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.1.3
+
+  '@emotion/sheet@1.4.0': {}
+
+  '@emotion/unitless@0.10.0': {}
+
+  '@emotion/utils@1.4.2': {}
+
+  '@emotion/weak-memoize@0.4.0': {}
+
   '@esbuild/aix-ppc64@0.25.5':
     optional: true
 
@@ -5675,6 +5798,25 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
+  '@marsio/vue-draggable@1.0.9(typescript@5.8.3)':
+    dependencies:
+      clsx: 1.2.1
+      lodash: 4.17.21
+      vue: 3.5.17(typescript@5.8.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@marsio/vue-split-pane@1.0.0(typescript@5.8.3)':
+    dependencies:
+      '@emotion/css': 11.13.5
+      '@marsio/vue-draggable': 1.0.9(typescript@5.8.3)
+      inline-style-prefixer: 7.0.1
+      lodash: 4.17.21
+      vue: 3.5.17(typescript@5.8.3)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@microsoft/api-extractor-model@7.30.6(@types/node@22.15.33)':
     dependencies:
       '@microsoft/tsdoc': 0.15.1
@@ -6821,6 +6963,12 @@ snapshots:
     dependencies:
       object.assign: 4.1.7
 
+  babel-plugin-macros@3.1.0:
+    dependencies:
+      '@babel/runtime': 7.26.9
+      cosmiconfig: 7.1.0
+      resolve: 1.22.10
+
   babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.9):
     dependencies:
       '@babel/compat-data': 7.26.8
@@ -7054,6 +7202,8 @@ snapshots:
 
   clone@1.0.4: {}
 
+  clsx@1.2.1: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -7116,6 +7266,8 @@ snapshots:
 
   content-type@1.0.5: {}
 
+  convert-source-map@1.9.0: {}
+
   convert-source-map@2.0.0: {}
 
   cookie-signature@1.0.6: {}
@@ -7168,6 +7320,10 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
+  css-in-js-utils@3.1.0:
+    dependencies:
+      hyphenate-style-name: 1.1.0
+
   css-loader@6.11.0(webpack@5.98.0):
     dependencies:
       icss-utils: 5.1.0(postcss@8.5.6)
@@ -7719,6 +7875,8 @@ snapshots:
       make-dir: 3.1.0
       pkg-dir: 4.2.0
 
+  find-root@1.1.0: {}
+
   find-up@4.1.0:
     dependencies:
       locate-path: 5.0.0
@@ -7956,6 +8114,8 @@ snapshots:
 
   human-signals@2.1.0: {}
 
+  hyphenate-style-name@1.1.0: {}
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -7996,6 +8156,10 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  inline-style-prefixer@7.0.1:
+    dependencies:
+      css-in-js-utils: 3.1.0
+
   ipaddr.js@1.9.1: {}
 
   ipaddr.js@2.2.0: {}
@@ -9163,6 +9327,8 @@ snapshots:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
+  source-map@0.5.7: {}
+
   source-map@0.6.1: {}
 
   sourcemap-codec@1.4.8: {}
@@ -9261,6 +9427,8 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 6.1.2
 
+  stylis@4.2.0: {}
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0

src/Root.vue

@@ -1,6 +1,6 @@
 <template>
 	<b-e-flower-fall class="background" />
-	<root-layout v-if="ready" class="diselect" icp="粤ICP备2025368555号-1" domain="imyeyu.com" author="夜雨">
+	<root-layout v-if="ready" class="root-layout diselect" icp="粤ICP备2025368555号-1" domain="imyeyu.com" author="夜雨">
 		<router-view />
 	</root-layout>
 	<popup />
@@ -10,16 +10,39 @@
 <script lang="ts" setup>
 import { BEFlowerFall, Popup } from "timi-web";
 import { RootLayout, UserProfilePopup } from "timi-tdesign-pc";
+import { SettingMapper } from "../../timi-web";
+
+const route = useRoute();
 
 const ready = ref(false);
-
 onMounted(async () => {
+	await SettingMapper.loadSetting({
+		key: "GIT_ABOUT_ARTICLE"
+	});
 	ready.value = true;
 });
+
+// ---------- 文件详情页更宽的布局 ----------
+const inFileDetail = ref(false);
+const largeWidth = computed(() => inFileDetail.value ? "1600px" : "1200px");
+const width = computed(() => inFileDetail.value ? "1200px" : "900px");
+watch(route, () => inFileDetail.value = route.name === "FileDetail");
 </script>
 
 <style lang="less">
 .background {
 	background: url("@/assets/img/main.png") fixed right bottom;
 }
+
+@media screen and (max-width: 2560px) {
+	.root-layout {
+		width: v-bind(largeWidth) !important;
+	}
+}
+
+@media screen and (max-width: 1920px) {
+	.root-layout {
+		width: v-bind(width) !important;
+	}
+}
 </style>

src/api/RepositoryAPI.ts

@@ -21,14 +21,26 @@ async function listFile(name: string, branch: string, path: string): Promise<Fil
 	return axios.get(`${BASE_URI}/${name}:${branch}/file/list${path}`);
 }
 
-async function fileRaw(name: string, branch: string, path: string): Promise<ArrayBuffer> {
+function fileRawURL(name: string, branch: string, path: string): string {
+	return `${API_HOST}${BASE_URI}/${name}:${branch}/file/raw${path}`;
+}
+
+async function fileRawByURL(rawURL: string): Promise<ArrayBuffer> {
 	return axios({
-		url: `${BASE_URI}/${name}:${branch}/file/raw${path}`,
+		url: rawURL,
 		method: "GET",
 		responseType: "arraybuffer"
 	});
 }
 
+async function fileRaw(name: string, branch: string, path: string): Promise<ArrayBuffer> {
+	return fileRawByURL(fileRawURL(name, branch, path));
+}
+
+async function fileMimeType(name: string, branch: string, path: string): Promise<string> {
+	return axios.get(`${BASE_URI}/${name}:${branch}/file/mime${path}`);
+}
+
 function downloadArchive(name: string, branch: string) {
 	window.open(`${API_HOST}${BASE_URI}/${name}:${branch}/archive`);
 }
@@ -43,6 +55,9 @@ export default {
 	pagePush,
 	listFile,
 	fileRaw,
+	fileRawURL,
+	fileRawByURL,
+	fileMimeType,
 	downloadArchive,
 	pageLog
 };

src/components/FileViewer.vue

@@ -0,0 +1,363 @@
+<template>
+	<div class="file-viewer diselect">
+		<t-tabs
+			class="tabs"
+			theme="card"
+			v-model="filePath"
+			:onRemove="onTabRemove"
+		>
+			<t-tab-panel
+				v-for="file in files"
+				:key="file.path"
+				:value="file.path"
+				:label="file.name"
+				:removable="file.removable"
+				@click="file.isPreview = false"
+			>
+				<template #label>
+					<span
+						class="black"
+						:class="{ 'light-gray': file.isPreview }"
+						v-text="file.name"
+						@click="file.isPreview = false"
+					></span>
+				</template>
+			</t-tab-panel>
+		</t-tabs>
+		<div v-if="file" :class="`viewer ${clazz}`" @click="file.isPreview = false">
+			<loading class="loading" :showOn="isLoading" />
+			<div
+				v-if="file.viewerType === FileViewerType.NOT_SUPPORT"
+				class="not-support"
+			>
+				<p class="tips">此文件不支持预览</p>
+				<t-button
+					v-if="file.rawFile.size < IOSize.MB"
+					@click="previewAsText"
+				>尝试以文本文件解析预览</t-button>
+			</div>
+			<markdown-view
+				v-if="file.viewerType === FileViewerType.MARKDOWN || file.viewerType === FileViewerType.CODE"
+				class="content selectable"
+				:show-code-border="false"
+				max-height="auto"
+				:content="file.data"
+			/>
+			<div
+				v-if="file.viewerType === FileViewerType.TEXT"
+				class="container selectable"
+			>
+				<div class="value" v-text="file.data"></div>
+			</div>
+			<div v-if="mediaComponent && file.rawURL" class="container">
+				<component
+					:is="mediaComponent"
+					class="value"
+					:src="file.rawURL"
+					:controls="true"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { IOSize, Loading, MarkdownView, Prismjs, PrismjsViewer, Toolkit } from "timi-web";
+import { File, FileType, FileViewerType, OpenFile } from "@/types/Repository.ts";
+import RepositoryAPI from "@/api/RepositoryAPI.ts";
+
+defineOptions({
+	name: "FileViewer"
+});
+
+const props = withDefaults(defineProps<{
+	repoName: string;
+	branch: string;
+}>(), {
+});
+const { repoName, branch } = toRefs(props);
+
+const isLoading = ref<boolean>(false);
+const files = ref<OpenFile[]>([]);
+const file = ref<OpenFile>();
+const filePath = ref<string>();
+watch(file, file => filePath.value = file?.path);
+
+const clazz = computed(() => {
+	if (file.value && file.value.viewerType) {
+		return Toolkit.className(file.value.viewerType.toString().toLowerCase());
+	}
+	return "";
+});
+
+// ---------- 切换分支 ----------
+
+watch(branch, () => {
+	files.value = [];
+	file.value = undefined;
+});
+
+// ---------- 打开文件 ----------
+
+function openFile(treeFile: File) {
+	if (treeFile.type === FileType.FILE) {
+		// 已打开该文件
+		let opened = files.value.find(item => item.path === treeFile.path);
+		const isReadme = treeFile.path === "README.md";
+		if (!opened) {
+			opened = {
+				path: treeFile.path,
+				name: treeFile.name,
+				rawURL: RepositoryAPI.fileRawURL(repoName.value, branch.value, `/${treeFile.path}`),
+				rawFile: treeFile,
+				isPreview: !isReadme,
+				removable: !isReadme
+			} as OpenFile;
+			// 如果存在已打开预览，则替换该预览项
+			const previewIndex = files.value.findIndex(item => item.isPreview);
+			if (previewIndex === -1) {
+				files.value.push(opened);
+			} else {
+				files.value.splice(previewIndex, 1, opened);
+			}
+		}
+		opened.activatedAt = new Date().getTime();
+		file.value = opened;
+	}
+}
+
+defineExpose({
+	openFile
+});
+
+// ---------- 切换文件 ----------
+
+// 从 tab 切换文件
+watch(filePath, value => {
+	if (filePath.value) {
+		const targetFile = files.value.find(item => item.path === value);
+		if (targetFile) {
+			targetFile.activatedAt = new Date().getTime();
+			file.value = targetFile;
+			return;
+		}
+	}
+	file.value = undefined;
+});
+
+watch(file, async () => {
+	if (file.value) {
+		if (!file.value.mimeType) {
+			isLoading.value = true;
+			// 获取 Mime-Type
+			file.value.mimeType = await RepositoryAPI.fileMimeType(repoName.value, branch.value, `/${file.value.path}`);
+		}
+		file.value.prismjsType = file.value.prismjsType ?? Prismjs.typeFromFileName(file.value.name);
+		if (file.value.prismjsType) {
+			if (!file.value.raw) {
+				isLoading.value = true;
+				file.value.raw = await RepositoryAPI.fileRawByURL(file.value.rawURL);
+			}
+			// 解码为文本
+			const properties = Prismjs.getFileProperties(file.value.prismjsType);
+			if (properties) {
+				if (!file.value.data) {
+					isLoading.value = true;
+					const data = new TextDecoder("utf-8").decode(file.value.raw);
+					if (properties.viewer === PrismjsViewer.CODE) {
+						file.value.data = Toolkit.format("```${type}\n${data}\n```", {
+							type: properties.prismjs,
+							data
+						});
+					} else {
+						file.value.data = data;
+					}
+				}
+				if (properties.viewer === PrismjsViewer.MARKDOWN) {
+					file.value.viewerType = FileViewerType.MARKDOWN;
+				} else if (properties.viewer === PrismjsViewer.CODE) {
+					file.value.viewerType = FileViewerType.CODE;
+				} else {
+					file.value.viewerType = FileViewerType.TEXT;
+				}
+			}
+		} else {
+			if (!file.value.viewerType) {
+				if (file.value.mimeType) {
+					switch (true) {
+						case file.value.mimeType.startsWith("image/"):
+							file.value.viewerType = FileViewerType.IMAGE;
+							break;
+						case file.value.mimeType.startsWith("audio/"):
+							file.value.viewerType = FileViewerType.AUDIO;
+							break;
+						case file.value.mimeType.startsWith("video/"):
+							file.value.viewerType = FileViewerType.VIDEO;
+							break;
+						case file.value.mimeType.startsWith("text/"):
+							file.value.viewerType = FileViewerType.TEXT;
+							if (!file.value.data) {
+								if (!file.value.raw) {
+									isLoading.value = true;
+									file.value.raw = await RepositoryAPI.fileRawByURL(file.value.rawURL);
+								}
+								file.value.data = new TextDecoder("utf-8").decode(file.value.raw);
+							}
+							break;
+						default:
+							file.value.viewerType = FileViewerType.NOT_SUPPORT;
+					}
+				} else {
+					file.value.viewerType = FileViewerType.NOT_SUPPORT;
+				}
+			}
+		}
+		isLoading.value = false;
+	}
+});
+
+// ---------- 关闭文件 ----------
+
+const onTabRemove = (options: { index: number }) => {
+	files.value.splice(options.index, 1);
+	if (0 < files.value.length) {
+		file.value = files.value[files.value.length - 1];
+	} else {
+		file.value = undefined;
+	}
+};
+
+// ---------- 尝试以文本文件解码预览 ----------
+
+async function previewAsText() {
+	if (file.value) {
+		// 解码为文本
+		if (!file.value.data) {
+			if (!file.value.raw) {
+				file.value.raw = await RepositoryAPI.fileRawByURL(file.value.rawURL);
+			}
+			file.value.data = new TextDecoder("utf-8").decode(file.value.raw);
+		}
+		file.value.viewerType = FileViewerType.TEXT;
+	}
+}
+
+// ---------- 媒体文件 ----------
+
+const mediaComponent = computed(() => {
+	if (file.value) {
+		switch (file.value.viewerType) {
+			case FileViewerType.IMAGE:
+				return "img";
+			case FileViewerType.VIDEO:
+				return FileViewerType.VIDEO.toString().toLowerCase();
+			case FileViewerType.AUDIO:
+				return FileViewerType.AUDIO.toString().toLowerCase();
+		}
+	}
+	return undefined;
+});
+</script>
+
+<style scoped lang="less">
+.file-viewer {
+	height: 100%;
+
+	.tabs {
+		top: calc(96px + 30px);
+		position: sticky;
+		z-index: 9;
+		border-top: var(--tui-border);
+		border-bottom: var(--tui-border);
+	}
+
+	.viewer {
+		height: calc(100% - 33px);
+
+		&.text {
+
+			.container {
+				width: calc(100% - 8px);
+				min-height: calc(100% - 4px);
+				padding: 2px 4px;
+				overflow: auto;
+
+				.value {
+					font-size: 14px;
+					white-space: pre;
+				}
+			}
+		}
+
+		&.code {
+
+			:deep(.tui-markdown-view) {
+				height: 100%;
+				position: relative;
+
+				&::before {
+					content: "";
+					top: 0;
+					left: 0;
+					width: 3em;
+					height: 100%;
+					position: absolute;
+					background: rgba(242, 242, 242, .9);
+					border-right: 1px solid #999;
+				}
+
+				pre[class^="language-"] {
+					height: 100%;
+				}
+			}
+
+			:deep(pre[class*="language-"]) {
+				margin: 0;
+				border: none;
+			}
+		}
+
+		&.markdown {
+			height: 100%;
+			padding: .5rem 1rem;
+		}
+
+		&.image,
+		&.audio,
+		&.video {
+
+			.container {
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				audio {
+					width: 40rem;
+					margin: 0 2rem;
+				}
+
+				video {
+					width: 100%;
+					height: 100%;
+					max-height: 60vh;
+					object-fit: contain;
+					background: #000;
+				}
+
+				.value {
+					max-width: 100%;
+				}
+			}
+		}
+
+		.loading {
+			margin-top: 2rem;
+		}
+
+		.not-support {
+			text-align: center;
+		}
+	}
+}
+</style>

src/components/PushLogTimeline.vue

@@ -26,8 +26,8 @@
 						<span class="selectable" v-text="action.refName"></span>
 					</div>
 					<template v-if="action.commitList">
-						<h4 v-if="showRepo || showBranch">提交记录：</h4>
 						<div class="commits">
+							<h4 v-if="showRepo || showBranch" class="title">提交记录：</h4>
 							<div
 								class="commit"
 								v-for="(commit, commitIndex) in action.commitList"
@@ -103,9 +103,17 @@ const { items } = toRefs(props);
 
 		.commits {
 
+			.title {
+				margin: .5rem 0;
+			}
+
 			.commit {
 				display: flex;
 
+				&:first-child {
+					margin-top: .5rem;
+				}
+
 				&:nth-last-child(n + 2) {
 					margin-bottom: .5rem;
 				}

src/layout/IndexLayout.vue

@@ -21,6 +21,7 @@
 				</template>
 				<t-menu-item to="/" :value="Menu.LIST">仓库列表</t-menu-item>
 				<t-menu-item to="/log" :value="Menu.LOG">最近推送</t-menu-item>
+				<t-menu-item to="/about" :value="Menu.ABOUT">关于</t-menu-item>
 				<template #operations>
 					<login-menu />
 				</template>
@@ -44,14 +45,16 @@ onMounted(async () => owner.value = await UserAPI.view(1));
 
 enum Menu {
 	LIST = "LIST",
-	LOG = "LOG"
+	LOG = "LOG",
+	ABOUT = "ABOUT"
 }
 
 const regexMenu: {
 	[key: string]: Menu
 } = {
 	"RepositoryList": Menu.LIST,
-	"RepositoryLog": Menu.LOG
+	"RepositoryLog": Menu.LOG,
+	"About": Menu.ABOUT
 };
 
 const route = useRoute();
@@ -76,7 +79,7 @@ onMounted(() => syncMenuRouter(route.name as string));
 
 	.header {
 		top: 0;
-		z-index: 1;
+		z-index: 3;
 		position: sticky;
 		background: rgba(231, 234, 239, .8);
 		border-bottom: var(--tui-border);

src/layout/RepositoryLayout.vue

@@ -1,14 +1,12 @@
 <template>
 	<div class="repository-layout" v-if="repositoryStore.value">
-		<t-layout class="header">
+		<div class="header">
-			<t-content>
+			<section class="top">
-				<t-space class="title" align="center">
+				<t-space class="left" align="center">
-					<h3 class="title" v-text="repositoryStore.value.name"></h3>
+					<h4 class="title" v-text="repositoryStore.value.name"></h4>
-					<p class="light-gray" v-text="repositoryStore.value.description"></p>
+					<p class="description light-gray" v-text="repositoryStore.value.description"></p>
 				</t-space>
-			</t-content>
+				<t-space class="right" align="center">
-			<t-aside class="aside" width="auto">
-				<t-space align="center">
 					<t-button class="repository-list" theme="default" variant="text" @click="backRepositoryList">
 						<template #icon>
 							<icon class="icon" name="LIST" />
@@ -17,8 +15,7 @@
 					</t-button>
 					<login-menu />
 				</t-space>
-			</t-aside>
+			</section>
-		</t-layout>
 			<t-head-menu class="menu" v-model="menuValue">
 				<t-menu-item
 					:to="`/${repositoryStore.value.name}/${repositoryStore.value.defaultBranch}`"
@@ -51,6 +48,7 @@
 					版本发布
 				</t-menu-item>
 			</t-head-menu>
+		</div>
 		<div class="content">
 			<router-view v-slot="{ Component }">
 				<keep-alive>
@@ -119,11 +117,12 @@ onMounted(async () => repositoryStore.value = await RepositoryAPI.view(route.par
 
 <style lang="less" scoped>
 .repository-layout {
+	display: flex;
 	border-bottom: var(--tui-border);
+	flex-direction: column;
 
 	.header {
 		top: 0;
-		height: 50px;
 		z-index: 3;
 		position: sticky;
 		background: rgba(231, 234, 239, .8);
@@ -131,36 +130,49 @@ onMounted(async () => repositoryStore.value = await RepositoryAPI.view(route.par
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
 
+		.top {
+			display: flex;
+			padding: .5rem 1rem;
+			border-bottom: var(--tui-border);
+			justify-content: space-between;
+
+			.left {
+
 				.title {
+					margin: 0;
 					padding-left: .5rem;
 				}
 
-		.aside {
+				.description {
-			display: flex;
+					margin: 0;
-			align-items: center;
+					font-size: 13px;
-			padding-right: 1rem;
-
-			.repository-list {
-
-				.icon {
-					margin-right: .5rem;
-				}
 				}
 			}
 		}
 
 		.menu {
-		top: 50px;
-		z-index: 3;
-		position: sticky;
-		background: rgba(255, 255, 255, .8);
-		border-bottom: var(--tui-border);
-		backdrop-filter: blur(10px);
-		-webkit-backdrop-filter: blur(10px);
 
 			:deep(.t-menu) {
 				margin: 0;
 			}
 		}
 	}
+
+	.content {
+		flex: 1;
+		display: flex;
+		min-height: 520px;
+		flex-direction: column;
+
+		> * {
+			flex: 1;
+		}
+	}
+}
+@media screen and (max-width: 1200px) {
+	.repository-layout {
+		// - 底部
+		min-height: calc(100% - 110px);
+	}
+}
 </style>

src/router/index.ts

@@ -1,8 +1,7 @@
-import IndexLayout from "@/layout/IndexLayout.vue";
-import RepositoryList from "@/views/index/RepositoryList.vue";
-import RepositoryLog from "@/views/index/RepositoryLog.vue";
 import { createRouter, createWebHistory } from "vue-router";
 import repository from "./repository";
+import IndexLayout from "@/layout/IndexLayout.vue";
+import RepositoryList from "@/views/index/RepositoryList.vue";
 
 export default createRouter({
 	history: createWebHistory("/"),
@@ -21,7 +20,12 @@ export default createRouter({
 				{
 					path: "/log",
 					name: "RepositoryLog",
-					component: RepositoryLog
+					component:  () => import("@/views/index/RepositoryLog.vue")
+				},
+				{
+					path: "/about",
+					name: "About",
+					component:  () => import("@/views/index/About.vue")
 				}
 			]
 		},

src/router/repository.ts

@@ -1,13 +1,4 @@
 import RepositoryLayout from "@/layout/RepositoryLayout.vue";
-import CommitLog from "@/views/repository/CommitLog.vue";
-import FileDetail from "@/views/repository/FileDetail.vue";
-import IssueDetail from "@/views/repository/IssueDetail.vue";
-import IssueEdit from "@/views/repository/IssueEdit.vue";
-import IssueList from "@/views/repository/IssueList.vue";
-import MergeDetail from "@/views/repository/MergeDetail.vue";
-import MergeEdit from "@/views/repository/MergeEdit.vue";
-import MergeList from "@/views/repository/MergeList.vue";
-import ReleaseList from "@/views/repository/ReleaseList.vue";
 
 export default {
 	path: "/:repository",
@@ -17,7 +8,7 @@ export default {
 		{
 			path: ":branch",
 			name: "FileDetail",
-			component: FileDetail,
+			component:  () => import("@/views/repository/FileDetail.vue"),
 			meta: {
 				keepAlive: true
 			}
@@ -25,47 +16,42 @@ export default {
 		{
 			path: "commits",
 			name: "CommitLog",
-			component: CommitLog
+			component:  () => import("@/views/repository/CommitLog.vue")
 		},
 		{
 			path: "issues",
 			name: "IssueList",
-			component: IssueList
+			component:  () => import("@/views/repository/IssueList.vue")
-		},
-		{
-			path: "issues",
-			name: "IssueList",
-			component: IssueList
 		},
 		{
 			path: "issues/edit/:id?",
 			name: "IssueEdit",
-			component: IssueEdit
+			component:  () => import("@/views/repository/IssueEdit.vue")
 		},
 		{
 			path: "issues/:id",
 			name: "IssueDetail",
-			component: IssueDetail
+			component:  () => import("@/views/repository/IssueDetail.vue")
 		},
 		{
 			path: "merges",
 			name: "MergeList",
-			component: MergeList
+			component:  () => import("@/views/repository/MergeList.vue")
 		},
 		{
 			path: "merges/edit/:id?",
 			name: "MergeEdit",
-			component: MergeEdit
+			component:  () => import("@/views/repository/MergeEdit.vue")
 		},
 		{
 			path: "merges/:id",
 			name: "MergeDetail",
-			component: MergeDetail
+			component:  () => import("@/views/repository/MergeDetail.vue")
 		},
 		{
 			path: "releases",
 			name: "ReleaseList",
-			component: ReleaseList
+			component:  () => import("@/views/repository/ReleaseList.vue")
 		}
 	]
 };

src/types/Repository.ts

@@ -1,4 +1,4 @@
-import { Model, Page, UserView } from "timi-web";
+import { Model, Page, PrismjsType, UserView } from "timi-web";
 
 export type Repository = {
 	id: number;
@@ -60,4 +60,32 @@ export type File = {
 	lastCommitterDate: number;
 
 	children: boolean;
+	isLoading: boolean;
+}
+
+export enum FileViewerType {
+
+	NOT_SUPPORT = "NOT_SUPPORT",
+	AUDIO = "AUDIO",
+	VIDEO = "VIDEO",
+	IMAGE = "IMAGE",
+	TEXT = "TEXT",
+	CODE = "CODE",
+	MARKDOWN = "MARKDOWN",
+}
+
+export type OpenFile = {
+
+	path: string;
+	name: string;
+	raw?: ArrayBuffer;
+	rawURL: string;
+	rawFile: File;
+	data?: string;
+	removable: boolean;
+	isPreview: boolean;
+	activatedAt?: number;
+	mimeType?: string;
+	viewerType?: FileViewerType;
+	prismjsType?: PrismjsType;
 }

src/views/index/About.vue

@@ -0,0 +1,33 @@
+<template>
+	<article v-if="article" class="about">
+		<markdown-view class="content" :content="article.data" />
+		<comment
+			v-if="SettingMapper.is(SettingKey.ENABLE_COMMENT) && article.showComment"
+			:bizType="CommentBizType.ARTICLE"
+			:bizId="article.id!"
+			:titleStickyOffset="80"
+			:canComment="article.canComment"
+		/>
+	</article>
+</template>
+
+<script lang="ts" setup>
+import { ArticleAPI, ArticleView, CommentBizType, MarkdownView, SettingKey, SettingMapper } from "timi-web";
+import { Comment } from "timi-tdesign-pc";
+
+const article = ref<ArticleView<any>>();
+
+onMounted(async () => {
+	article.value = await ArticleAPI.view(SettingMapper.getValue("GIT_ABOUT_ARTICLE") as unknown as number);
+});
+</script>
+
+<style lang="less" scoped>
+.about {
+
+	.content {
+		width: calc(100% - 4rem);
+		padding: 1rem 2rem;
+	}
+}
+</style>

src/views/index/RepositoryList.vue

@@ -1,41 +1,37 @@
 <template>
 	<div class="repository-list">
+		<loading :showOn="isLoading" margin="1rem" />
 		<t-list class="items" v-if="page" :split="true">
 			<t-list-item class="item" v-for="item in pageResult.list" :key="item.id">
-				<t-layout>
-					<t-aside class="icon" width="auto">
 				<icon name="DUPLICATE" :scale="2" />
-					</t-aside>
+				<div class="content">
-					<t-content class="content">
+					<div class="header">
-						<t-layout>
+						<h3 class="name">
-							<t-header class="header" height="auto">
-								<div class="name">
 							<router-link class="link black" :to="`/${item.name}/${item.defaultBranch}`">
 								{{ item.name }}
 							</router-link>
-								</div>
+						</h3>
 						<div class="time light-gray"
 							 v-text="`最近推送 ${Time.toPassedDate(item.updatedAt)}`"
 							 v-popup="Time.toDateTime(item.updatedAt)"
 						></div>
-							</t-header>
+					</div>
-							<t-content>
+					<div class="description gray" v-text="item.description"></div>
-								<span class="gray" v-text="item.description"></span>
+				</div>
-							</t-content>
-						</t-layout>
-					</t-content>
-				</t-layout>
 			</t-list-item>
 		</t-list>
 		<footer class="footer">
 			<t-pagination
-				class="pagination"
+				class="pages"
+				v-if="pageResult"
 				:total="pageResult.total"
 				:pageSize="16"
 				:showPageSize="false"
+				:current="currentPage"
+				:onCurrentChange="onPageChangeEvent"
 			>
 				<template #totalContent>
-					<div class="total" v-text="`共 ${pageResult.total} 个项目`"></div>
+					<div style="flex: 1" v-text="`共 ${pageResult.total} 篇文章`"></div>
 				</template>
 			</t-pagination>
 		</footer>
@@ -44,22 +40,62 @@
 <script lang="ts" setup>
 import RepositoryAPI from "@/api/RepositoryAPI";
 import { Repository } from "@/types/Repository";
-import { Icon, Page, PageResult, Time } from "timi-web";
+import { Icon, Loading, Page, PageResult, Time, Toolkit } from "timi-web";
 
-const page = ref<Page>({
+const router = useRouter();
+const route = useRoute();
+
+const isLoading = ref(false);
+const currentPage = computed(() => page.index + 1);
+const page = reactive<Page>({
 	index: 0,
-	size: 12
+	size: 16
 });
 const pageResult = reactive<PageResult<Repository>>({
 	total: 0,
 	list: []
 });
-
+// 获取列表
-onMounted(async () => {
+const fetchList = Toolkit.debounce(async () => {
-	const result = await RepositoryAPI.page(page.value);
+	isLoading.value = true;
+	const result = await RepositoryAPI.page(page);
 	pageResult.total = result.total;
 	pageResult.list = result.list;
+	isLoading.value = false;
 });
+
+// 监听路由分页
+watch(
+	() => route.query.p,
+	async (newP) => {
+		const pNum = Number(newP);
+		if (Number.isInteger(pNum) && 0 <= pNum) {
+			page.index = pNum;
+			await fetchList();
+		} else {
+			// 参数无效时重置为第一页
+			await router.push({
+				path: route.path,
+				query: {
+					...route.query,
+					p: 0
+				}
+			});
+		}
+	},
+	{ immediate: true }
+);
+
+function onPageChangeEvent(current: number) {
+	const newIndex = current - 1;
+	router.push({
+		path: route.path,
+		query: {
+			...route.query,
+			p: newIndex
+		}
+	});
+}
 </script>
 
 <style lang="less" scoped>
@@ -71,25 +107,22 @@ onMounted(async () => {
 		min-height: 520px;
 
 		.item {
-
+			display: flex;
-			.icon {
+			padding: 16px;
-				padding: .5rem;
-			}
 
 			.content {
-				padding-left: .5rem;
+				flex: 1;
+				display: flex;
+				margin-left: 16px;
+				flex-direction: column;
 
 				.header {
 					display: flex;
+					justify-content: space-between;
 
 					.name {
-						flex: 1;
+						margin: 0;
-						display: block;
-
-						.link {
 						font-size: 16px;
-							font-weight: bold;
-						}
 					}
 				}
 			}

src/views/index/RepositoryLog.vue

@@ -3,7 +3,7 @@
 		<push-log-timeline :items="list" />
 		<div class="bottom">
 			<loading :showOn="isLoading" />
-			<empty-tips :showOn="isFinished && !isLoading"/>
+			<empty-tips v-if="isFinished && !isLoading" />
 			<t-button v-show="!isFinished && !isLoading" @click="doFetchEvent">加载更多</t-button>
 		</div>
 	</div>
@@ -38,7 +38,12 @@ onMounted(doFetchEvent);
 </script>
 <style lang="less" scoped>
 .repository-log {
-	width: 100%;
+	width: calc(100% - 4rem);
 	padding: 1rem 2rem;
+
+	.bottom {
+		display: flex;
+		justify-content: center;
+	}
 }
 </style>

src/views/repository/CommitLog.vue

@@ -1,8 +1,6 @@
 <template>
 	<div v-if="repositoryStore.value" class="commit-log">
-		<t-layout>
+		<div class="header">
-			<t-header class="header">
-				<div>
 			<t-select class="branch" v-model="branch" label="分支：" placeholder="全部" clearable>
 				<t-option
 					v-for="item in repositoryStore.value.branchList"
@@ -12,19 +10,18 @@
 				/>
 			</t-select>
 		</div>
-			</t-header>
+		<div class="content">
-			<t-content class="content">
+			<loading :showOn="isLoading" margin="0 0 1rem 0" />
 			<push-log-timeline :items="commits" :show-repo="false" :show-branch="!branch" />
 			<div class="more">
 				<empty-tips :showOn="isFinished" />
-					<t-button v-if="!isFinished" @click="doFetchEvent">加载更多</t-button>
+				<t-button v-if="!isLoading && !isFinished" @click="doFetchEvent">加载更多</t-button>
+			</div>
 		</div>
-			</t-content>
-		</t-layout>
 	</div>
 </template>
 <script lang="ts" setup>
-import { EmptyTips, Page } from "timi-web";
+import { EmptyTips, Loading, Page } from "timi-web";
 import RepositoryAPI from "@/api/RepositoryAPI";
 import { useRepositoryStore } from "@/store/repository.ts";
 import { ActionLogView } from "@/types/Common.ts";
@@ -32,33 +29,32 @@ import PushLogTimeline from "@/components/PushLogTimeline.vue";
 
 const repositoryStore = useRepositoryStore();
 
-const branch = ref();
-
 const page = ref<Page>({
 	index: 0,
 	size: 12
 });
+
+const branch = ref();
 const commits = reactive<ActionLogView[]>([]);
+const isLoading = ref(false);
 const isFinished = ref(false);
 
 const doFetchEvent = async () => {
-	if (repositoryStore.value) {
+	isLoading.value = true;
-		const result = await RepositoryAPI.pagePush(repositoryStore.value.name, branch.value ?? "all", page.value);
+	const result = await RepositoryAPI.pagePush(repositoryStore.value!.name, branch.value ?? "all", page.value);
 	const list = result.list;
 	commits.push(...list);
 	page.value.index++;
 	if (result.list.length < page.value.size) {
 		isFinished.value = true;
 	}
-	}
+	isLoading.value = false;
 };
 watch(branch, () => {
-	if (repositoryStore.value) {
 	page.value.index = 0;
 	commits.length = 0;
 	isFinished.value = false;
 	doFetchEvent();
-	}
 });
 onMounted(doFetchEvent);
 </script>
@@ -66,7 +62,8 @@ onMounted(doFetchEvent);
 .commit-log {
 
 	.header {
-		top: calc(50px + 49px);
+		top: 96px;
+		height: 50px;
 		padding: 0 20px;
 		display: flex;
 		z-index: 3;
@@ -76,10 +73,15 @@ onMounted(doFetchEvent);
 		border-bottom: var(--tui-border);
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
+
+		.branch {
+			width: 12rem;
+		}
 	}
 
 	.content {
 		padding: 1rem 2rem 1rem 1rem;
+		min-height: 520px;
 
 		.more {
 			display: flex;

src/views/repository/FileDetail.vue

@@ -1,6 +1,10 @@
 <template>
-	<div class="file-detail" v-if="repositoryStore.value && repositoryStore.value.branchList">
+	<split-pane
-		<div class="left">
+		class="file-detail"
+		v-if="repositoryStore.value && repositoryStore.value.branchList"
+		split="vertical"
+	>
+		<pane class="left" initialSize="25%" minSize="10%">
 			<t-select class="branch" v-model="branch" label="分支：" :borderless="true">
 				<t-option
 					v-for="item in repositoryStore.value.branchList"
@@ -10,12 +14,14 @@
 				></t-option>
 			</t-select>
 			<div class="tree-container">
+				<loading :showOn="treeLoading" margin="1rem" />
 				<t-tree
 					ref="tree"
 					class="tree"
 					:data="treeItems"
 					:keys="treeMap"
 					:line="true"
+					:label="treeLabel"
 					:activable="true"
 					:transition="false"
 					:active-multiple="false"
@@ -23,6 +29,7 @@
 					:expand-parent="true"
 					value-mode="all"
 					expand-all
+					:empty="() => ''"
 					:load="treeLoad"
 					:onActive="onTreeActivated"
 				>
@@ -30,11 +37,14 @@
 						<icon name="FILE" fill="GRAY" v-if="node.data.type === FileType.FILE" />
 						<icon name="FOLDER" v-if="node.data.type === FileType.DIRECTORY" />
 					</template>
+					<template #operations="{ node }">
+						<loading v-if="node.data.isLoading" :size="14" :tips="false" margin="0 .5rem 0 0" />
+					</template>
 				</t-tree>
 			</div>
-		</div>
+		</pane>
-		<div class="right">
+		<pane class="right" minSize="50%">
-			<div class="header">
+			<div class="header bg-white">
 				<div class="clone-label">克隆地址</div>
 				<t-select class="clone-type" v-model="cloneType" borderless>
 					<t-option
@@ -54,60 +64,24 @@
 				<t-button theme="success" @click="doCopyCloneAddr">复制</t-button>
 				<t-button @click="RepositoryAPI.downloadArchive(repositoryStore.value.name, branch)">下载源码</t-button>
 			</div>
-			<t-tabs
+			<file-viewer
-				class="tabs"
+				v-if="branch"
-				theme="card"
+				ref="fileViewerRef"
-				v-model="tabActivated"
+				:repo-name="repositoryStore.value!.name"
-				:onRemove="onTabRemove"
+				:branch="branch"
-			>
-				<t-tab-panel
-					v-for="file in tabFiles"
-					:key="file.path"
-					:value="file.path"
-					:label="file.name"
-					:removable="file.removable"
-					@click="onClickOpenFile(file)"
-				>
-					<template #label>
-						<span
-							v-text="file.name"
-							@click="onClickOpenFile(file)"
-						></span>
-					</template>
-				</t-tab-panel>
-			</t-tabs>
-			<div v-if="tabActivatedFileViewer"
-				 :class="`viewer ${viewerClass}`"
-				 @click="onClickViewer"
-			>
-				<markdown-view
-					v-if="tabActivatedFile && tabActivatedFileViewer !== PrismjsViewer.TEXT"
-					class="content selectable"
-					:show-code-border="false"
-					max-height="auto"
-					:content="tabActivatedFile.data"
-					@click="onClickViewer"
 			/>
-				<textarea
+		</pane>
-					v-if="tabActivatedFile && tabActivatedFileViewer === PrismjsViewer.TEXT"
+	</split-pane>
-					class="content selectable"
-					:value="tabActivatedFile.data"
-					readonly
-				></textarea>
-			</div>
-			<div v-else class="viewer not-support">
-				<div class="content">不支持预览</div>
-			</div>
-		</div>
-	</div>
 </template>
 <script lang="ts" setup>
-import { Icon, MarkdownView, Prismjs, PrismjsType, PrismjsViewer, Toolkit } from "timi-web";
+import { Icon, Loading } from "timi-web";
 import type { TreeInstanceFunctions, TreeProps } from "tdesign-vue-next";
 import RepositoryAPI from "@/api/RepositoryAPI";
 import { File, FileType } from "@/types/Repository";
 import { useRepositoryStore } from "@/store/repository.ts";
 import useClipboard from "vue-clipboard3";
+import SplitPane, { Pane } from "@marsio/vue-split-pane";
+import FileViewer from "@/components/FileViewer.vue";
 
 const router = useRouter();
 const { toClipboard } = useClipboard();
@@ -115,6 +89,14 @@ const repositoryStore = useRepositoryStore();
 
 // ---------- 分支 ----------
 const branch = ref();
+
+watch(branch, async () => {
+	if (!branch.value) {
+		return;
+	}
+	await router.replace(`/${repositoryStore.value!.name}/${branch.value}`);
+});
+
 onMounted(async () => {
 	if (repositoryStore.value && repositoryStore.value.defaultBranch) {
 		branch.value = repositoryStore.value.defaultBranch;
@@ -123,6 +105,7 @@ onMounted(async () => {
 
 // ---------- 文件树 ----------
 const tree = ref<TreeInstanceFunctions>();
+const treeLoading = ref(false);
 const treeItems = ref<File[]>([]);
 const treeMap = {
 	value: "path",
@@ -133,34 +116,46 @@ watch(branch, async () => {
 	if (!repositoryStore.value || !branch.value) {
 		return;
 	}
+	treeLoading.value = true;
 	treeItems.value = await RepositoryAPI.listFile(repositoryStore.value!.name, branch.value, "/");
-	treeItems.value.forEach((item) => item.children = item.type === FileType.DIRECTORY);
+	treeItems.value.forEach((item) => {
+		item.isLoading = false;
+		item.children = item.type === FileType.DIRECTORY;
+	});
 	await nextTick();
+	treeLoading.value = false;
 	// 文件树
 	if (tree.value) {
 		const items = treeItems.value;
 		for (const item of items) {
 			if (item.path === "README.md") {
-				await doOpenFile(tree.value.getItem(item.path).data as File);
+				doOpenFile(tree.value.getItem(item.path).data as File);
 				break;
 			}
 		}
 	}
 });
-
+const treeLabel: TreeProps["label"] = (_h, node) => node.data.name;
-const treeLoad: TreeProps["load"] = node => {
+const treeLoad: TreeProps["load"] = async (node) => {
-	return new Promise((resolve) => {
-		Toolkit.async(async () => {
 	const file = node.data;
+	file.isLoading = true;
 	const result = await RepositoryAPI.listFile(
 		repositoryStore.value!.name,
 		branch.value,
 		`/${file.path}`
 	);
-			result.forEach((item) => item.children = item.type === FileType.DIRECTORY);
+	if (result.length === 1 && result[0].type === FileType.DIRECTORY) {
-			resolve(result);
+		const deep = result[0];
-		});
+		file.name = `${file.name}/${deep.name}`;
+		file.path = `${file.path}/${deep.name}`;
+		return await treeLoad!(node);
+	}
+	result.forEach((item) => {
+		item.isLoading = false;
+		item.children = item.type === FileType.DIRECTORY;
 	});
+	file.isLoading = false;
+	return result;
 };
 
 // ---------- 克隆地址 ----------
@@ -185,134 +180,37 @@ async function doCopyCloneAddr() {
 
 // ---------- 打开文件 ----------
 
-type OpenFile = {
+const fileViewerRef = ref<InstanceType<typeof FileViewer>>();
-	path: string;
+function doOpenFile(file: File)  {
-	name: string;
+	fileViewerRef.value!.openFile(file);
-	data?: string;
-	removable: boolean;
-	isPreview: boolean;
-	activatedAt?: number;
-	prismjsType?: PrismjsType;
 }
-
-const tabFiles = ref<OpenFile[]>([]);
-const tabActivated = ref();
-const tabActivatedFile = ref<OpenFile>();
-const tabActivatedFileViewer = ref<PrismjsViewer>();
-
-const viewerClass = computed(() => {
-	if (tabActivatedFileViewer.value) {
-		return Toolkit.className(tabActivatedFileViewer.value.toString().toLowerCase());
-	}
-	return "";
-});
-watch(branch, async () => {
-	if (!branch.value) {
-		return;
-	}
-	await router.replace(`/${repositoryStore.value!.name}/${branch.value}`);
-	tabFiles.value = [];
-	tabActivated.value = null;
-});
-watch(tabActivated, value => {
-	if (tabActivated.value) {
-		const targetFile = tabFiles.value.find(item => item.path === value);
-		if (targetFile) {
-			targetFile.activatedAt = new Date().getTime();
-			tabActivatedFile.value = targetFile;
-			return;
-		}
-	}
-	tabActivatedFile.value = undefined;
-});
-watch(tabActivatedFile, () => {
-	if (tabActivatedFile.value && tabActivatedFile.value.prismjsType) {
-		const properties = Prismjs.getFileProperties(tabActivatedFile.value.prismjsType);
-		if (properties) {
-			tabActivatedFileViewer.value = properties.viewer;
-			return;
-		}
-	}
-	tabActivatedFileViewer.value = undefined;
-});
-const doOpenFile = async (file: File) => {
-	if (file.type === FileType.FILE) {
-		let opened = tabFiles.value.find(item => item.path === file.path);
-		const previewIndex = tabFiles.value.findIndex(item => item.isPreview);
-		const isReadme = file.path === "README.md";
-		if (!opened) {
-			opened = {
-				path: file.path,
-				name: file.name,
-				isPreview: !isReadme,
-				removable: !isReadme,
-				prismjsType: PrismjsType.PlainText
-			};
-			if (previewIndex === -1) {
-				tabFiles.value.push(opened);
-			} else {
-				// 如果存在已打开预览，则替换该预览项
-				tabFiles.value.splice(previewIndex, 1, opened);
-			}
-			const raw = await RepositoryAPI.fileRaw(repositoryStore.value!.name, branch.value, `/${opened.path}`);
-			const decoder = new TextDecoder("utf-8");
-			opened.prismjsType = Prismjs.typeFromFileName(opened.name);
-			if (opened.prismjsType) {
-				const properties = Prismjs.getFileProperties(opened.prismjsType);
-				if (properties && properties.viewer === PrismjsViewer.CODE) {
-					opened.data = "```" + properties.prismjs + "\n" + decoder.decode(raw) + "\n```";
-				} else {
-					opened.data = decoder.decode(raw);
-				}
-			} else {
-				opened.data = "该文件暂不支持预览";
-			}
-		}
-		opened.activatedAt = new Date().getTime();
-		tabActivated.value = file.path;
-		tabActivatedFile.value = opened;
-	}
-};
-
-// TODO 明确类型会构建失败
 const onTreeActivated = (_value: any, context: { node: any }) => {
 	doOpenFile(context.node.data);
 };
-
-const onTabRemove = (options: { index: number }) => {
-	tabFiles.value.splice(options.index, 1);
-	if (0 < tabFiles.value.length) {
-		tabActivated.value = tabFiles.value[tabFiles.value.length - 1].path;
-	} else {
-		tabActivated.value = null;
-	}
-};
-
-const onClickOpenFile = (openFile: OpenFile) => {
-	openFile.isPreview = false;
-};
-
-const onClickViewer = async () => {
-	const activated = tabFiles.value.find(item => item.path === tabActivated.value);
-	if (activated) {
-		activated.isPreview = false;
-	}
-};
 </script>
 
 <style lang="less" scoped>
 .file-detail {
-	// 100% 可视高度 - 上下外边距 - 边框 - 顶部 - 菜单 - 底部
-	height: calc(100vh - 128px * 2 - 2px - 50px - 50px - 94px);
 	display: flex;
+	overflow: unset;
+	min-height: 520px;
+
+	:deep(.vue-splitpane-resizer) {
+		opacity: 1;
+		background: var(--tui-light-gray) padding-box;
+	}
 
 	.left {
-		width: 16rem;
+		width: 100%;
-		z-index: 4;
+		height: 100% !important;
 		display: flex;
+		position: relative;
 		flex-direction: column;
 
 		.branch {
+			top: 96px;
+			z-index: 1;
+			position: sticky;
 			border-bottom: var(--tui-border);
 
 			:deep(.t-select-input--borderless) {
@@ -336,8 +234,8 @@ const onClickViewer = async () => {
 		}
 
 		.tree-container {
-			height: 100%;
+			top: calc(50px + 49px + 30px);
-			overflow: auto;
+			position: sticky;
 
 			.tree {
 
@@ -360,11 +258,11 @@ const onClickViewer = async () => {
 	.right {
 		width: calc(100% - 16rem);
 		display: flex;
-		border-left: var(--tui-border);
+		max-height: 100% !important;
 		flex-direction: column;
 
 		.header {
-			top: calc(50px + 49px);
+			top: 96px;
 			z-index: 4;
 			display: flex;
 			position: sticky;
@@ -395,68 +293,6 @@ const onClickViewer = async () => {
 				}
 			}
 		}
-
-		.tabs {
-			border-top: var(--tui-border);
-
-			:deep(.t-tabs__nav-container.t-tabs__nav--card::after) {
-				background: var(--tui-light-gray);
-			}
-		}
-
-		.viewer {
-			height: 100%;
-			overflow: auto;
-
-			&.text {
-
-				.content {
-					width: calc(100% - 8px);
-					height: calc(100% - 4px);
-					border: none;
-					padding: 2px 4px;
-					font-size: 14px;
-					word-wrap: normal;
-				}
-			}
-
-			&.code {
-
-				:deep(.tui-markdown-view) {
-					height: 100%;
-					position: relative;
-
-					&::before {
-						content: "";
-						top: 0;
-						left: 0;
-						width: 3em;
-						height: 100%;
-						position: absolute;
-						background: rgba(242, 242, 242, .9);
-						border-right: 1px solid #999;
-					}
-
-					pre[class^="language-"] {
-						height: 100%;
-					}
-				}
-			}
-
-			&.markdown {
-				height: 100%;
-				padding: .5rem 1rem;
-			}
-
-			&.not-support {
-				text-align: center;
-			}
-
-			:deep(pre[class*="language-"]) {
-				margin: 0;
-				border: none;
-			}
-		}
 	}
 }
 

src/views/repository/IssueList.vue

@@ -1,14 +1,12 @@
 <template>
-	<t-layout class="issue-list" v-if="repositoryStore.value">
+	<div class="issue-list" v-if="repositoryStore.value">
-		<t-header class="header">
+		<header class="header">
-			<t-row justify="space-between">
+			<div class="search">
-				<t-col flex="auto">
 				<t-input-adornment prepend="搜索">
 					<t-input v-model="page.keyword" placeholder="请输入关键字" />
 				</t-input-adornment>
-				</t-col>
+			</div>
-				<t-col class="right">
+			<t-space class="filter">
-					<t-space>
 				<t-select v-model="page.type" label="类型" placeholder="全部" autoWidth clearable>
 					<t-option v-for="(value, key) in Type" :key="key" :value="key" :label="value" />
 				</t-select>
@@ -19,14 +17,11 @@
 					<t-button theme="success">新建反馈</t-button>
 				</router-link>
 			</t-space>
-				</t-col>
+		</header>
-			</t-row>
+		<t-list class="issues" :split="true">
-		</t-header>
+			<loading :showOn="isLoading" margin="1rem 0" />
-		<t-content class="list">
+			<empty-tips v-if="!isLoading && pageResult?.total === 0" />
-			<t-list v-if="pageResult" :split="true">
+			<t-list-item class="issue" v-for="item in pageResult?.list" :key="item.id">
-				<t-list-item class="action" v-for="item in pageResult.list" :key="item.id">
-					<t-layout>
-						<t-aside width="auto">
 				<t-space class="tags" :size="4">
 					<div
 						v-if="item.type"
@@ -41,8 +36,7 @@
 						v-text="(<any>Status)[item.status]"
 					></div>
 				</t-space>
-						</t-aside>
+				<div class="content">
-						<t-content class="content">
 					<router-link :to="`/${repositoryStore.value.name}/issues/${item.id}`">
 						<t-link theme="default" size="large" hover="color" :content="item.title" />
 					</router-link>
@@ -50,26 +44,22 @@
 						<span v-if="item.closedAt" v-text="`关闭于 ${Time.toPassedDateTime(item.closedAt)}`"></span>
 						<span v-else v-text="`创建于 ${Time.toPassedDateTime(item.createdAt)}`"></span>
 					</p>
-						</t-content>
+				</div>
-					</t-layout>
 			</t-list-item>
 		</t-list>
-			<empty-tips :showOn="pageResult?.total === 0" />
+		<footer v-if="pageResult" class="footer">
-		</t-content>
-		<t-footer class="footer" height="auto">
 			<t-pagination
-				v-if="pageResult"
 				:total="pageResult.total"
 				:pageSize="16"
 				:showPageSize="false"
 				:onCurrentChange="(current: number) => page.index = current - 1"
 			/>
-		</t-footer>
+		</footer>
-	</t-layout>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { EmptyTips, PageResult, Time, Toolkit } from "timi-web";
+import { EmptyTips, Loading, PageResult, Time, Toolkit } from "timi-web";
 import IssueAPI from "@/api/IssueAPI";
 import { Issue, Page, Status, Type } from "@/types/Issue";
 import { useRepositoryStore } from "@/store/repository.ts";
@@ -96,10 +86,13 @@ const page = reactive<Page>({
 	index: 0,
 	size: 12
 });
+const isLoading = ref(false);
 const pageResult = ref<PageResult<Issue>>();
-
+const fetchList = Toolkit.debounce(async () => {
-const fetchList = Toolkit.debounce(async () => pageResult.value = await IssueAPI.page(page));
+	isLoading.value = true;
-
+	pageResult.value = await IssueAPI.page(page);
+	isLoading.value = false;
+});
 watch(page, fetchList);
 onMounted(async () => {
 	if (repositoryStore.value) {
@@ -111,12 +104,15 @@ onMounted(async () => {
 
 <style lang="less" scoped>
 .issue-list {
-	min-height: 480px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 
 	.header {
-		top: calc(50px + 49px);
+		top: 96px;
-		z-index: 3;
+		height: 50px;
 		padding: 0 20px;
+		z-index: 3;
 		display: flex;
 		position: sticky;
 		background: rgba(231, 234, 239, .8);
@@ -125,22 +121,26 @@ onMounted(async () => {
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
 
-		.t-row {
+		.search {
-			width: 100%;
+			flex: 1;
-		}
-
-		.right {
-			margin-left: 1rem;
 		}
 
 		.filter {
-			padding: 0 1rem;
+			margin-left: 1rem;
 		}
 	}
 
-	.list {
+	.issues {
+		flex: 1;
+
+		.issue {
+
+			:deep(.t-list-item-main) {
+				align-items: start;
+			}
 
 			.tags {
+				height: 100%;
 				display: flex;
 				padding-top: 1px;
 
@@ -154,6 +154,7 @@ onMounted(async () => {
 			}
 
 			.content {
+				flex: 1;
 				padding-left: .5rem;
 
 				.title {
@@ -165,6 +166,7 @@ onMounted(async () => {
 				}
 			}
 		}
+	}
 
 	.footer {
 		padding: 8px 16px;
@@ -176,10 +178,4 @@ onMounted(async () => {
 		-webkit-backdrop-filter: blur(10px);
 	}
 }
-
-@media screen and (max-width: 992px) {
-	.issue-list {
-		min-height: calc(100vh - 100px);
-	}
-}
 </style>

src/views/repository/MergeList.vue

@@ -1,44 +1,27 @@
 <template>
-	<t-layout v-if="repositoryStore.value" class="merge-list">
+	<div v-if="repositoryStore.value" class="merge-list">
-		<t-header class="header">
+		<header class="header">
-			<t-row justify="space-between">
+			<div class="search">
-				<t-col flex="auto">
 				<t-input-adornment prepend="搜索">
 					<t-input v-model="page.keyword" placeholder="请输入关键字" />
 				</t-input-adornment>
-				</t-col>
+			</div>
-				<t-col class="right">
+			<t-space class="filter">
-					<t-space>
+				<t-select v-model="page.type" label="类型" placeholder="全部" autoWidth clearable>
-						<t-select
-							v-model="page.type"
-							label="类型"
-							placeholder="全部"
-							autoWidth
-							clearable
-						>
 					<t-option v-for="(value, key) in Type" :key="key" :value="key" :label="value" />
 				</t-select>
-						<t-select
+				<t-select v-model="page.status" label="状态" placeholder="全部" autoWidth clearable>
-							v-model="page.status"
-							label="状态"
-							placeholder="全部"
-							autoWidth
-							clearable
-						>
 					<t-option v-for="(value, key) in Status" :key="key" :value="key" :label="value" />
 				</t-select>
 				<router-link :to="`/${repositoryStore.value.name}/merges/edit`">
 					<t-button theme="success">申请合并</t-button>
 				</router-link>
 			</t-space>
-				</t-col>
+		</header>
-			</t-row>
+		<t-list class="merges" v-if="pageResult" :split="true">
-		</t-header>
+			<loading :showOn="isLoading" margin="1rem 0" />
-		<t-content class="list">
+			<empty-tips v-if="!isLoading && pageResult?.total === 0" />
-			<t-list v-if="pageResult" :split="true">
+			<t-list-item class="merge" v-for="item in pageResult.list" :key="item.id">
-				<t-list-item class="action" v-for="item in pageResult.list" :key="item.id">
-					<t-layout>
-						<t-aside width="auto">
 				<t-space class="tags" :size="4">
 					<div
 						v-if="item.type"
@@ -53,38 +36,30 @@
 						v-text="(<any>Status)[item.status]"
 					></div>
 				</t-space>
-						</t-aside>
+				<div class="content">
-						<t-content class="content">
 					<router-link :to="`/${repositoryStore.value.name}/merges/${item.id}`">
 						<t-link theme="default" size="large" hover="color" :content="item.title" />
 					</router-link>
 					<p class="time gray">
-								<span
+						<span v-if="item.rejectedAt" v-text="`拒绝于 ${Time.toPassedDateTime(item.rejectedAt)}`"></span>
-									v-if="item.rejectedAt"
-									v-text="`拒绝于 ${Time.toPassedDateTime(item.rejectedAt)}`"
-								></span>
 						<span v-else v-text="`申请于 ${Time.toPassedDateTime(item.createdAt)}`"></span>
 					</p>
-						</t-content>
+				</div>
-					</t-layout>
 			</t-list-item>
 		</t-list>
-			<empty-tips :showOn="pageResult?.total === 0" />
+		<footer v-if="pageResult" class="footer">
-		</t-content>
-		<t-footer class="footer" height="auto">
 			<t-pagination
-				v-if="pageResult"
 				:total="pageResult.total"
 				:pageSize="16"
 				:showPageSize="false"
 				:onCurrentChange="(current: number) => page.index = current - 1"
 			/>
-		</t-footer>
+		</footer>
-	</t-layout>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { EmptyTips, PageResult, Time, Toolkit } from "timi-web";
+import { EmptyTips, Loading, PageResult, Time, Toolkit } from "timi-web";
 import MergeAPI from "@/api/MergeAPI";
 import { Merge, Page, Status, Type } from "@/types/Merge";
 import { useRepositoryStore } from "@/store/repository.ts";
@@ -105,11 +80,13 @@ const colorStatus = {
 };
 
 const repositoryStore = useRepositoryStore();
+
 const page = reactive<Page>({
 	repositoryId: undefined,
 	index: 0,
 	size: 12
 });
+const isLoading = ref(false);
 const pageResult = ref<PageResult<Merge>>();
 const fetchList = Toolkit.debounce(async () => pageResult.value = await MergeAPI.page(page));
 
@@ -124,11 +101,13 @@ onMounted(async () => {
 
 <style lang="less" scoped>
 .merge-list {
-	min-height: 480px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 
 	.header {
-		top: calc(50px + 49px);
+		top: 96px;
-		z-index: 3;
+		height: 50px;
 		padding: 0 20px;
 		display: flex;
 		position: sticky;
@@ -138,22 +117,26 @@ onMounted(async () => {
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
 
-		.t-row {
+		.search {
-			width: 100%;
+			flex: 1;
-		}
-
-		.right {
-			margin-left: 1rem;
 		}
 
 		.filter {
-			padding: 0 1rem;
+			margin-left: 1rem;
 		}
 	}
 
-	.list {
+	.merges {
+		flex: 1;
+
+		.merge {
+
+			:deep(.t-list-item-main) {
+				align-items: start;
+			}
 
 			.tags {
+				height: 100%;
 				display: flex;
 				padding-top: 1px;
 
@@ -167,6 +150,7 @@ onMounted(async () => {
 			}
 
 			.content {
+				flex: 1;
 				padding-left: .5rem;
 
 				.title {
@@ -178,6 +162,7 @@ onMounted(async () => {
 				}
 			}
 		}
+	}
 
 	.footer {
 		padding: 8px 16px;
@@ -185,15 +170,8 @@ onMounted(async () => {
 		position: sticky;
 		background: rgba(255, 255, 255, .8);
 		border-top: var(--tui-border);
-		border-top: var(--tui-border);
 		backdrop-filter: blur(10px);
 		-webkit-backdrop-filter: blur(10px);
 	}
 }
-
-@media screen and (max-width: 992px) {
-	.merge-list {
-		min-height: calc(100vh - 100px);
-	}
-}
 </style>

src/views/repository/ReleaseList.vue

@@ -37,14 +37,15 @@
 					</div>
 				</div>
 			</t-timeline-item>
+			<loading :showOn="isLoading" />
+			<empty-tips v-if="!isLoading && Toolkit.isEmpty(pageResult?.list)" />
 		</t-timeline>
-		<empty-tips :showOn="Toolkit.isEmpty(pageResult?.list)" />
 	</div>
 </template>
 <script lang="ts" setup>
 import ReleaseAPI from "@/api/ReleaseAPI";
 import { Page, Release } from "@/types/Release";
-import { CommonAPI, EmptyTips, Icon, IOSize, MarkdownView, PageResult, Time, Toolkit } from "timi-web";
+import { CommonAPI, EmptyTips, Icon, IOSize, Loading, MarkdownView, PageResult, Time, Toolkit } from "timi-web";
 import { useRepositoryStore } from "@/store/repository.ts";
 
 const repositoryStore = useRepositoryStore();
@@ -54,13 +55,14 @@ const page = reactive<Page>({
 	index: 0,
 	size: 12
 });
+const isLoading = ref(false);
 const pageResult = ref<PageResult<Release>>();
 
 onMounted(async () => {
-	if (repositoryStore.value) {
+	isLoading.value = true;
-		page.repositoryId = repositoryStore.value.id;
+	page.repositoryId = repositoryStore.value!.id;
 	pageResult.value = await ReleaseAPI.page(page);
-	}
+	isLoading.value = false;
 });
 </script>
 <style lang="less" scoped>
@@ -121,10 +123,4 @@ onMounted(async () => {
 		}
 	}
 }
-
-@media screen and (max-width: 992px) {
-	.release-list {
-		min-height: calc(100vh - 98px);
-	}
-}
 </style>