fix: pages action & i18n

Author: 2512132839

.github/workflows/deploy-frontend-cloudflare.yml

@@ -144,7 +144,17 @@ jobs:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
         run: |
-          npx wrangler pages deploy ./dist --project-name=cloudpaste-frontend --branch production --commit-message="Deploy from GitHub Actions" 2>&1 | sed -E 's/https:\/\/[a-zA-Z0-9.-]*\.(workers|pages)\.dev/https:\/\/[REDACTED].\1.dev/g'
+          COMMIT_MSG=$(cat << 'EOF'
+          ${{ github.event.head_commit.message }}
+          EOF
+          )
+          # 清理非UTF-8字符并限制长度
+          CLEAN_MSG=$(echo "$COMMIT_MSG" | iconv -f utf-8 -t utf-8 -c | head -c 200)
+          # 如果消息为空或无效，使用默认消息
+          if [ -z "$CLEAN_MSG" ]; then
+            CLEAN_MSG="Deploy from GitHub Actions"
+          fi
+          npx wrangler pages deploy ./dist --project-name=cloudpaste-frontend --branch production --commit-message="$CLEAN_MSG" 2>&1 | sed -E 's/https:\/\/[a-zA-Z0-9.-]*\.(workers|pages)\.dev/https:\/\/[REDACTED].\1.dev/g'
 
       - name: Display Success Information
         if: steps.check-deploy-button.outputs.is_deploy_button == 'true' && success()

frontend/src/i18n/locales/en-US/admin/settings.js

@@ -157,7 +157,7 @@ export default {
 
     documentAppsLabel: "Document/Office preview templates",
     documentAppsPlaceholder:
-      'Example: {"doc,docx,xls,xlsx,ppt,pptx,rtf": {"microsoft": {"urlTemplate": "https://view.officeapps.live.com/op/view.aspx?src=$e_url"}}}',
+      "For example: Configure urlTemplate for services like Microsoft/Google for doc,docx,xls,xlsx,ppt,pptx,rtf files, see the example below for details",
     documentAppsHelp:
       "Configure DocumentApp templates for document/Office files, keys are extension lists or patterns, values are URL templates for each preview service.",
 

frontend/src/i18n/locales/zh-CN/admin/settings.js

@@ -153,8 +153,7 @@ export default {
     documentTypesHelp: "用逗号分隔的文档文件扩展名，这些文件可以直接在浏览器中预览",
 
     documentAppsLabel: "文档/Office 预览模板",
-    documentAppsPlaceholder:
-      "例如：{\"doc,docx,xls,xlsx,ppt,pptx,rtf\": {\"microsoft\": {\"urlTemplate\": \"https://view.officeapps.live.com/op/view.aspx?src=$e_url\"}}}",
+    documentAppsPlaceholder: "例如：为 doc,docx,xls,xlsx,ppt,pptx,rtf 配置 microsoft/Google 等服务的 urlTemplate，详见下方示例",
     documentAppsHelp: "为文档/Office 文件配置 DocumentApp 模板，键为扩展名列表或正则，值为各个预览服务的 URL 模板。",
 
     resetDefaults: "重置为默认",

frontend/src/modules/admin/views/AccountManagementView.vue

@@ -3,25 +3,19 @@ import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAuthStore } from "@/stores/authStore";
 import { useAdminAccountService } from "@/modules/admin/services/accountService.js";
+import { useThemeMode } from "@/composables/core/useThemeMode.js";
 
 // 使用i18n和认证Store
 const { t } = useI18n();
 const authStore = useAuthStore();
 const { changePassword } = useAdminAccountService();
+const { isDarkMode: darkMode } = useThemeMode();
 
 // 检测用户类型
 const isAdmin = computed(() => authStore.isAdmin);
 const isApiKeyUser = computed(() => authStore.authType === "apikey");
 const isGuest = computed(() => authStore.isGuest);
 
-// 定义props，接收父组件传递的darkMode
-const props = defineProps({
-  darkMode: {
-    type: Boolean,
-    required: true,
-  },
-});
-
 // 定义事件，用于通知父组件需要退出登录
 const emit = defineEmits(["logout"]);
 

frontend/src/modules/admin/views/AdminLayout.vue

@@ -22,7 +22,7 @@
         <div class="rounded-lg flex-1 flex flex-col" :class="darkMode ? 'bg-gray-800' : 'bg-white border border-gray-200'">
           <!-- 页面内容 -->
           <div class="p-2 md:p-4 flex-1 flex flex-col">
-            <router-view :dark-mode="darkMode" :permissions="userPermissions" @logout="handleLogout" />
+            <router-view :permissions="userPermissions" @logout="handleLogout" />
           </div>
         </div>
       </div>
@@ -36,15 +36,10 @@ import { useRouter } from "vue-router";
 import AdminSidebar from "@/modules/admin/components/AdminSidebar.vue";
 import AdminHeader from "@/modules/admin/components/AdminHeader.vue";
 import { useAuthStore } from "@/stores/authStore.js";
+import { useThemeMode } from "@/composables/core/useThemeMode.js";
 
-const props = defineProps({
-  darkMode: {
-    type: Boolean,
-    required: true,
-  },
-});
 
-// 使用认证Store和路由
+const { isDarkMode: darkMode } = useThemeMode();
 const authStore = useAuthStore();
 const router = useRouter();
 

frontend/src/modules/admin/views/BackupView.vue

@@ -159,19 +159,15 @@ import { useI18n } from "vue-i18n";
 import { formatLocalDateTimeWithSeconds, formatNowForFilename } from "@/utils/timeUtils.js";
 import { useAdminBase } from "@/composables/admin-management/useAdminBase.js";
 import { useAdminBackupService } from "@/modules/admin/services/backupService.js";
+import { useThemeMode } from "@/composables/core/useThemeMode.js";
 
 export default {
   name: "BackupView",
-  props: {
-    darkMode: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  setup(props) {
+  setup() {
     const { t } = useI18n();
     const { showSuccess, showError } = useAdminBase();
     const { getModules, createBackup: createBackupRequest, restoreBackup: restoreBackupRequest } = useAdminBackupService();
+    const { isDarkMode: darkMode } = useThemeMode();
 
     // 统一的通知方法
     const showNotification = (message, type) => {
@@ -499,6 +495,9 @@ export default {
     });
 
     return {
+      // 主题
+      darkMode,
+
       // 响应式数据
       backupType,
       selectedModules,

frontend/src/modules/admin/views/DashboardView.vue

@@ -6,22 +6,21 @@ import { Bar, Line } from "vue-chartjs";
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend } from "chart.js";
 import { useAdminSystemService } from "@/modules/admin/services/systemService.js";
 import { useDashboardService } from "@/modules/admin/services/dashboardService.js";
+import { useThemeMode } from "@/composables/core/useThemeMode.js";
 
 // 注册Chart.js组件
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend);
 
 // 定义props
 const props = defineProps({
-  darkMode: {
-    type: Boolean,
-    required: true,
-  },
   permissions: {
     type: Object,
     required: true,
   },
 });
 
+
+const { isDarkMode: darkMode } = useThemeMode();
 const { t } = useI18n();
 const { getCacheStats, getVersionInfo, clearCache } = useAdminSystemService();
 const { getDashboardStats } = useDashboardService();

frontend/src/modules/admin/views/FsMetaManagementView.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useFsMetaManagement } from "@/modules/admin/composables/useFsMetaManagement.js";
+import { useThemeMode } from "@/composables/core/useThemeMode.js";
 
 // 导入子组件
 import FsMetaTable from "@/modules/admin/components/FsMetaTable.vue";
@@ -10,19 +11,10 @@ import CommonPagination from "@/components/common/CommonPagination.vue";
 import GlobalSearchBox from "@/components/common/GlobalSearchBox.vue";
 
 /**
- * 组件接收的属性定义
- * darkMode: 主题模式
+ * 使用主题模式 composable
  */
-const props = defineProps({
-  darkMode: {
-    type: Boolean,
-    required: true,
-  },
-});
-
+const { isDarkMode: darkMode } = useThemeMode();
 const { t } = useI18n();
-
-// 使用元信息管理 composable
 const {
   metaList,
   loading,
@@ -32,7 +24,6 @@ const {
   updateMeta,
   deleteMeta,
 } = useFsMetaManagement();
-
 // 本地状态
 const showForm = ref(false);
 const currentMeta = ref(null);

frontend/src/modules/admin/views/KeyManagementView.vue

@@ -6,6 +6,7 @@ import { copyToClipboard } from "@/utils/clipboard";
 import { useAdminApiKeyService } from "@/modules/admin/services/apiKeyService.js";
 import { useAdminMountService } from "@/modules/admin/services/mountService.js";
 import { useGlobalMessage } from "@/composables/core/useGlobalMessage.js";
+import { useThemeMode } from "@/composables/core/useThemeMode.js";
 
 // 导入子组件
 import KeyForm from "@/modules/admin/components/KeyForm.vue";
@@ -16,14 +17,7 @@ const { t } = useI18n();
 const { getAllApiKeys, deleteApiKey } = useAdminApiKeyService();
 const { getMountsList } = useAdminMountService();
 const { showSuccess, showError } = useGlobalMessage();
-
-// Props定义
-const props = defineProps({
-  darkMode: {
-    type: Boolean,
-    required: true,
-  },
-});
+const { isDarkMode: darkMode } = useThemeMode();
 
 // 状态管理
 const apiKeys = ref([]);

frontend/src/modules/admin/views/MountManagementView.vue

@@ -3,25 +3,23 @@ import { onMounted } from "vue";
 import MountForm from "@/modules/admin/components/MountForm.vue";
 import CommonPagination from "@/components/common/CommonPagination.vue";
 import { useMountManagement } from "@/modules/admin/storage/useMountManagement.js";
+import { useThemeMode } from "@/composables/core/useThemeMode.js";
 
 /**
  * 挂载管理视图
  */
 
 // 组件接收的属性定义
 const props = defineProps({
-  darkMode: {
-    type: Boolean,
-    required: true,
-  },
   userType: {
     type: String,
     default: "admin",
     validator: (value) => ["admin", "apikey"].includes(value),
   },
 });
 
-// 使用挂载管理 composable
+
+const { isDarkMode: darkMode } = useThemeMode();
 const {
   // 状态
   loading,