feat: add supports for clicking the visibility icon in the post list to modify visibility (#3581)

#### What type of PR is this?

/kind improvement
/area console

#### What this PR does / why we need it:

通过点击“眼睛”图标，可以比较方便地修改文章或者页面的可视性。
<img width="1150" alt="image" src="https://user-images.githubusercontent.com/114651359/227491296-5f96e605-1137-4f6f-b506-d33b329045fc.png">

#### Which issue(s) this PR fixes:

Ref #3501 

#### Special notes for your reviewer:

1.修改了两个页面，路径为：
（1）console/src/modules/contents/pages/SinglePageList.vue
（2）console/src/modules/contents/posts/PostList.vue
2.原本“眼睛”图标是没有设置点击事件的，现在添加了点击改变选中文章或页面可视性的功能。

#### Does this PR introduce a user-facing change?

```release-note
action required  当用户点击“眼睛”图标时，会提示用户“可视化修改成功”
```

console/src/locales/en.yaml

@@ -1093,6 +1093,7 @@ core:
       upgrade_success: Upgraded successfully
       download_success: Downloaded successfully
       copy_success: Copied successfully
+      operation_failed: Failed to operate
       download_failed: Failed to download
       save_failed_and_retry: "Failed to save, please retry"
       publish_failed_and_retry: "Failed to publish, please retry"

console/src/locales/zh-CN.yaml

@@ -1093,6 +1093,7 @@ core:
       upgrade_success: 升级成功
       download_success: 下载成功
       copy_success: 复制成功
+      operation_failed: 操作失败
       download_failed: 下载失败
       save_failed_and_retry: 保存失败，请重试
       publish_failed_and_retry: 发布失败，请重试

console/src/modules/contents/pages/SinglePageList.vue

@@ -38,7 +38,7 @@ import { singlePageLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
 import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
-import { useQuery } from "@tanstack/vue-query";
+import { useMutation, useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 
 const { currentUserHasPermission } = usePermission();
@@ -406,6 +406,33 @@ const isPublishing = (singlePage: SinglePage) => {
 watch(selectedPageNames, (newValue) => {
   checkedAll.value = newValue.length === singlePages.value?.length;
 });
+
+const { mutate: changeVisibleMutation } = useMutation({
+  mutationFn: async (singlePage: SinglePage) => {
+    const { data } =
+      await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
+        name: singlePage.metadata.name,
+      });
+    data.spec.visible = data.spec.visible === "PRIVATE" ? "PUBLIC" : "PRIVATE";
+    await apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
+      {
+        name: singlePage.metadata.name,
+        singlePage: data,
+      },
+      {
+        mute: true,
+      }
+    );
+    await refetch();
+  },
+  retry: 3,
+  onSuccess: () => {
+    Toast.success(t("core.common.toast.operation_success"));
+  },
+  onError: () => {
+    Toast.error(t("core.common.toast.operation_failed"));
+  },
+});
 </script>
 
 <template>
@@ -789,11 +816,13 @@ watch(selectedPageNames, (newValue) => {
                       v-if="singlePage.page.spec.visible === 'PUBLIC'"
                       v-tooltip="$t('core.page.filters.visible.items.public')"
                       class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                      @click="changeVisibleMutation(singlePage.page)"
                     />
                     <IconEyeOff
                       v-if="singlePage.page.spec.visible === 'PRIVATE'"
                       v-tooltip="$t('core.page.filters.visible.items.private')"
                       class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                      @click="changeVisibleMutation(singlePage.page)"
                     />
                   </template>
                 </VEntityField>

console/src/modules/contents/posts/PostList.vue

@@ -45,7 +45,7 @@ import FilterTag from "@/components/filter/FilterTag.vue";
 import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import TagDropdownSelector from "@/components/dropdown-selector/TagDropdownSelector.vue";
-import { useQuery } from "@tanstack/vue-query";
+import { useMutation, useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 
 const { currentUserHasPermission } = usePermission();
@@ -419,6 +419,33 @@ const handleDeleteInBatch = async () => {
 watch(selectedPostNames, (newValue) => {
   checkedAll.value = newValue.length === posts.value?.length;
 });
+
+const { mutate: changeVisibleMutation } = useMutation({
+  mutationFn: async (post: Post) => {
+    const { data } =
+      await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
+        name: post.metadata.name,
+      });
+    data.spec.visible = data.spec.visible === "PRIVATE" ? "PUBLIC" : "PRIVATE";
+    await apiClient.extension.post.updatecontentHaloRunV1alpha1Post(
+      {
+        name: post.metadata.name,
+        post: data,
+      },
+      {
+        mute: true,
+      }
+    );
+    await refetch();
+  },
+  retry: 3,
+  onSuccess: () => {
+    Toast.success(t("core.common.toast.operation_success"));
+  },
+  onError: () => {
+    Toast.error(t("core.common.toast.operation_failed"));
+  },
+});
 </script>
 <template>
   <PostSettingModal
@@ -884,11 +911,13 @@ watch(selectedPostNames, (newValue) => {
                       v-if="post.post.spec.visible === 'PUBLIC'"
                       v-tooltip="$t('core.post.filters.visible.items.public')"
                       class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                      @click="changeVisibleMutation(post.post)"
                     />
                     <IconEyeOff
                       v-if="post.post.spec.visible === 'PRIVATE'"
                       v-tooltip="$t('core.post.filters.visible.items.private')"
                       class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                      @click="changeVisibleMutation(post.post)"
                     />
                   </template>
                 </VEntityField>