Add Security Checklist

jason5ng32 · Dec 24, 2024 · b34a0e7 · b34a0e7
1 parent 051e476
commit b34a0e7
Show file tree

Hide file tree

Showing 6 changed files with 556 additions and 280 deletions.
diff --git a/frontend/components/advanced-tools/SecurityChecklist.vue b/frontend/components/advanced-tools/SecurityChecklist.vue
@@ -7,7 +7,7 @@
         </div>
 
         <!-- 数据面板 -->
-        <div class="row">
+        <div v-if="fullList" class="row">
             <div class="col-12 mb-3">
                 <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
                     <div class="card-body">
@@ -80,8 +80,22 @@
                 </div>
             </div>
         </div>
+        <div v-else class="row">
+            <div class="col-12 mb-3">
+                <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
+                    <div class="card-body">
+                        <div class="jn-placeholder ">
+                            <span>
+                                <span class="spinner-grow spinner-grow-sm text-success" aria-hidden="true"></span>
+                                <span class="text-success">&nbsp;{{ t('securitychecklist.Loading') }}</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- 检查清单区域 -->
-        <div class="row">
+        <div v-if="fullList" class="row">
             <!-- 检查清单分类列表 -->
             <div class="col-lg-4 col-md-4 col-12 mb-3 jn-height">
                 <div class="card jn-card mb-2" :class="{ 
@@ -271,7 +285,7 @@ import VueMarkdown from 'vue-markdown-render'
 
 const { t, tm } = useI18n();
 
-const securityChecklist = reactive(tm('securitychecklistdata'));
+const securityChecklist = ref(tm('securitychecklistdata'));
 
 const store = useMainStore();
 const isDarkMode = computed(() => store.isDarkMode);
@@ -314,14 +328,14 @@ const initSecurityList = (securityChecklist) => {
     // 首先加载本地 slugs
     loadLocalSlugs();
 
-    const transformedObject = ref({});
+    const transformedObject = {};
     // 遍历并重组对象
     securityChecklist.forEach(item => {
         if (!categories.value.includes(item.slug)) {
             categories.value.push(item.slug);
         }
 
-        transformedObject.value[item.slug] = {
+        transformedObject[item.slug] = {
             title: item.title,
             description: item.description,
             icon: item.icon,
@@ -346,13 +360,10 @@ const initSecurityList = (securityChecklist) => {
 
     // 更新本地存储
     setLocalSlugs();
-
     return transformedObject;
 };
 
-// 初始化
-const fullList = reactive(initSecurityList(securityChecklist));
-
+const fullList = ref(null);
 
 // 重置
 const resetAllslugs = () => {
@@ -362,7 +373,7 @@ const resetAllslugs = () => {
     }
 
     setLocalSlugs();
-    fullList.value = initSecurityList(securityChecklist);
+    fullList.value = initSecurityList(securityChecklist.value); // 4. 使用 securityChecklist.value
     listToShow.value = fullList.value[currentList.value];
     filterList.value = listToShow.value.checklist;
     filterTag.value = 'all';
@@ -472,14 +483,18 @@ const checkedItems = computed(() => countItems({ action: 'checked', category: 'a
 const ignoredItems = computed(() => countItems({ action: 'ignored', category: 'all' }));
 const uncheckedItems = computed(() => totalItems.value - checkedItems.value - ignoredItems.value);
 
+// 便利调用百分比
 const getProgressStyle = (category) => {
     return (action) => {
         return `width: ${countItems({ action, category }) / countItems({ action: 'total', category }) * 100}%`;
     };
 };
 
 onMounted(() => {
-    changeList('authentication', false);
+    fullList.value = initSecurityList(securityChecklist.value);
+    setTimeout(() => {
+        changeList('authentication', false);
+    }, 300);
 });
 
 </script>

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -61,7 +61,8 @@
     "ShowAll":"Show All",
     "ShowUnchecked":"Show Unchecked",
     "ShowIgnored":"Show Ignored",
-    "ShowChecked":"Show Checked"
+    "ShowChecked":"Show Checked",
+    "Loading":"Loading..."
   },
   "shell": {
     "Title": "Command Line API",

diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
@@ -61,7 +61,8 @@
         "ShowAll": "Afficher tout",
         "ShowUnchecked": "Afficher les éléments non cochés",
         "ShowIgnored": "Afficher les éléments ignorés",
-        "ShowChecked": "Afficher les éléments cochés"
+        "ShowChecked": "Afficher les éléments cochés",
+        "Loading": "Chargement..."
     },
     "shell": {
         "Title": "API de ligne de commande",