feat: 新增订阅页面列表项菜单收纳功能

sub-store-org · Nov 18, 2024 · 53854f7 · 53854f7
1 parent e9191fc
commit 53854f7
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.297",
+  "version": "2.14.298",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/components/SubListItem.vue b/src/components/SubListItem.vue
@@ -57,9 +57,9 @@
         <div class="sub-item-title-wrapper">
           <h3 v-if="!appearanceSetting.isSimpleMode" class="sub-item-title">
             {{ displayName || name }}
-            <span v-if="appOpenBtnVisible" class="app-url" @click.stop="openAppUrl" :title="typeof flow === 'object' ? flow.appUrl : ''">
+            <!-- <span v-if="appOpenBtnVisible" class="app-url" @click.stop="openAppUrl" :title="typeof flow === 'object' ? flow.appUrl : ''">
               <font-awesome-icon icon="fa-solid fa-square-arrow-up-right" />
-            </span>
+            </span> -->
             <span v-for="i in tag" :key="i" class="tag">
               <nut-tag>{{ i }}</nut-tag>
             </span>
@@ -70,38 +70,64 @@
             style="color: var(--primary-text-color); font-size: 16px"
           >
             {{ displayName || name }}
-            <span v-if="appOpenBtnVisible" class="app-url" @click="openAppUrl" :title="typeof flow === 'object' ? flow.appUrl : ''">
+            <!-- <span v-if="appOpenBtnVisible" class="app-url" @click.stop="openAppUrl" :title="typeof flow === 'object' ? flow.appUrl : ''">
               <font-awesome-icon icon="fa-solid fa-square-arrow-up-right" />
-            </span>
+            </span> -->
             <span v-for="i in tag" :key="i" class="tag">
               <nut-tag>{{ i }}</nut-tag>
             </span>
           </h3>
 
           <!-- onClickCopyLink 拷贝 -->
           <div
-            style="position: relative"
-            :style="{ top: appearanceSetting.isSimpleMode ? '8px' : '0' }"
+            class="sub-item-menu"
+            :class="{ 'simple-mode': appearanceSetting.isSimpleMode }"
           >
-            <!-- 预览 -->
+            <!-- 更多 -->
             <button
-              v-if="!appearanceSetting.isShowIcon"
+              v-if="appearanceSetting.isSubItemMenuFold"
               class="compare-sub-link"
-              @click.stop="compareSub"
+              @click.stop="switchItemMenuVisible"
             >
-              <font-awesome-icon icon="fa-solid fa-eye" />
+              <font-awesome-icon
+                :icon="
+                  itemMenuVisible
+                    ? 'fa-solid fa-angle-right'
+                    : 'fa-solid fa-ellipsis'
+                "
+              />
             </button>
-            <!-- 分享 -->
-            <button
-              v-if="shareBtnVisible"
-              class="share-sub-link"
-              @click.stop="onClickShareLink"
+            <template
+              v-if="itemMenuVisible || !appearanceSetting.isSubItemMenuFold"
             >
-              <font-awesome-icon icon="fa-solid fa-share-nodes" />
-            </button>
-            <button class="copy-sub-link" @click.stop="onClickCopyLink">
-              <font-awesome-icon icon="fa-solid fa-clone" />
-            </button>
+              <!-- 官网 -->
+              <button
+                v-if="appOpenBtnVisible"
+                class="compare-sub-link"
+                @click.stop="openAppUrl"
+              >
+                <font-awesome-icon icon="fa-solid fa-square-arrow-up-right" />
+              </button>
+              <!-- 预览 -->
+              <button
+                v-if="!appearanceSetting.isShowIcon"
+                class="compare-sub-link"
+                @click.stop="compareSub"
+              >
+                <font-awesome-icon icon="fa-solid fa-eye" />
+              </button>
+              <!-- 分享 -->
+              <button
+                v-if="shareBtnVisible"
+                class="share-sub-link"
+                @click.stop="onClickShareLink"
+              >
+                <font-awesome-icon icon="fa-solid fa-share-nodes" />
+              </button>
+              <button class="copy-sub-link" @click.stop="onClickCopyLink">
+                <font-awesome-icon icon="fa-solid fa-clone" />
+              </button>
+            </template>
             <!-- 刷新 -->
             <button
               v-if="
@@ -125,7 +151,7 @@
             <button v-else class="refresh-sub-flow" @click.stop="onClickEdit">
               <font-awesome-icon icon="fa-solid fa-pen-nib" />
             </button>
-
+            <!-- 打开侧边栏 -->
             <button
               v-if="!isMobile()"
               ref="moreAction"
@@ -166,7 +192,11 @@
               </span>
             </template>
             <template v-else-if="typeof flow === 'object'">
-              <span v-if="flow.secondLine" style="font-weight: normal" :title="flow.planName">
+              <span
+                v-if="flow.secondLine"
+                style="font-weight: normal"
+                :title="flow.planName"
+              >
                 {{ `${flow.firstLine} | ${flow.secondLine}` }}
               </span>
               <span v-else style="font-weight: normal" :title="flow.planName">
@@ -529,12 +559,20 @@ const closeCompare = () => {
 };
 
 const appOpenBtnVisible = computed(() => {
-  return props.type === 'sub' && typeof flow.value === 'object' && flow.value?.appUrl;
+  return (
+    props.type === "sub" && typeof flow.value === "object" && flow.value?.appUrl
+  );
 });
 
+const itemMenuVisible = ref(false);
+
+const switchItemMenuVisible = () => {
+  itemMenuVisible.value = !itemMenuVisible.value;
+};
+
 const openAppUrl = () => {
-  console.log('flow', flow.value);
-  if (typeof flow.value === 'object' && flow.value?.appUrl) {
+  console.log("flow", flow.value);
+  if (typeof flow.value === "object" && flow.value?.appUrl) {
     window.open(flow.value.appUrl);
   }
 };
@@ -733,12 +771,12 @@ const onClickRefresh = async () => {
   try {
     await subsApi.downloadOne(name, { noCache: true });
   } catch (e) {
-    console.error(e)
+    console.error(e);
   }
   try {
     await subsStore.fetchFlows(ref([props.sub]).value);
   } catch (e) {
-    console.error(e)
+    console.error(e);
   }
   Toast.hide("refresh");
   showNotify({ title: t("globalNotify.refresh.succeed") });
@@ -806,6 +844,17 @@ const onClickRefresh = async () => {
       .tag {
         margin: 0 2px;
       }
+      .sub-item-menu {
+        position: relative;
+        top: 0;
+        // background: var(--card-color);
+        padding: 4px 0;
+        border-radius: var(--item-card-radios);
+        &.simple-mode {
+          position: relative;
+          top: 8px;
+        }
+      }
       .compare-sub-link,
       .share-sub-link,
       .copy-sub-link,
@@ -817,7 +866,6 @@ const onClickRefresh = async () => {
         display: inline-flex;
         justify-content: center;
         align-items: center;
-
         svg {
           width: 16px;
           height: 16px;
@@ -876,7 +924,7 @@ const onClickRefresh = async () => {
       word-break: break-all;
       overflow: hidden;
       font-size: 12px;
-      // margin-top: 3.5px;
+      margin-top: 2px;
       max-width: 80%;
       color: var(--comment-text-color);
       span {

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -864,6 +864,7 @@ export default {
     isIC: "Use original color for custom icons",
     isDefaultIcon: "Restore default icon",
     isShowIcon: 'Show icon',
+    isSubItemMenuFold: "Fold sub item menu",
     isEditorCommon: "Show editor common settings",
     isSimpleReicon: "Show items refresh button",
     isSimpleShowRemarks: "Simple Mode Show items remarks",

diff --git a/src/locales/zh.ts b/src/locales/zh.ts
@@ -853,6 +853,7 @@ export default {
     isIC: '自定义图标使用原始颜色',
     isDefaultIcon: '恢复默认图标',
     isShowIcon: '展示图标',
+    isSubItemMenuFold: '收纳订阅页菜单功能',
     isEditorCommon: '展示编辑页常用配置',
     isSimpleReicon: '简洁模式展示刷新按钮',
     isSimpleShowRemarks: '简洁模式列表展示备注',

diff --git a/src/plugin/awesomeIcon.ts b/src/plugin/awesomeIcon.ts
@@ -2,6 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 
 import {
   faAnglesRight,
+  faAngleRight,
   faArrowRotateRight,
   faArrowUpRightFromSquare,
   faBan,
@@ -14,6 +15,7 @@ import {
   faCloudArrowUp,
   faCode,
   faEye,
+  faEllipsis,
   faFloppyDisk,
   faGrip,
   faLanguage,
@@ -32,7 +34,7 @@ import {
   faFileExport,
   faShareNodes,
   faLink,
-  faSquareArrowUpRight,
+  faSquareArrowUpRight
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faFileImport);
@@ -56,6 +58,7 @@ library.add(faLocationArrow);
 library.add(faCode);
 library.add(faArrowRotateRight);
 library.add(faAnglesRight);
+library.add(faAngleRight);
 library.add(faCloudArrowDown);
 library.add(faCloudArrowUp);
 library.add(faBan);
@@ -67,3 +70,4 @@ library.add(faICursor);
 library.add(faShareNodes);
 library.add(faLink);
 library.add(faSquareArrowUpRight);
+library.add(faEllipsis);
diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -36,6 +36,7 @@ export const useSettingsStore = defineStore("settingsStore", {
         isSimpleShowRemark: false,
         isEditorCommon: true,
         isSimpleReicon: false,
+        isSubItemMenuFold: true,
         showFloatingRefreshButton: false,
         showFloatingAddButton: false,
         istabBar: false,
@@ -79,6 +80,7 @@ export const useSettingsStore = defineStore("settingsStore", {
         this.appearanceSetting.isSimpleShowRemark = res.data.data.appearanceSetting?.isSimpleShowRemark ?? "";
         this.appearanceSetting.isEditorCommon = res.data.data.appearanceSetting?.isEditorCommon ?? true;
         this.appearanceSetting.isSimpleReicon = res.data.data.appearanceSetting?.isSimpleReicon ?? "";
+        this.appearanceSetting.isSubItemMenuFold = res.data.data.appearanceSetting?.isSubItemMenuFold ?? true;
         this.appearanceSetting.showFloatingRefreshButton = res.data.data.appearanceSetting?.showFloatingRefreshButton ?? "";
         this.appearanceSetting.showFloatingAddButton = res.data.data.appearanceSetting?.showFloatingAddButton ?? false;
         this.appearanceSetting.istabBar = res.data.data.appearanceSetting?.istabBar ?? "";

diff --git a/src/types/store/settings.d.ts b/src/types/store/settings.d.ts
@@ -31,6 +31,7 @@ interface SettingsPostData {
     isEditorCommon?: boolean; // 展示编辑页常用配置
     isSimpleReicon?: boolean; // 展示订阅刷新按钮
     isSimpleShowRemark?: boolean; // 展示简洁模式下的备注
+    isSubItemMenuFold?: boolean; // 订阅项菜单折叠
     showFloatingRefreshButton?: boolean; // 显示悬浮刷新按钮
     showFloatingAddButton?: boolean; // 显示悬浮添加按钮
     istabBar?: boolean; // 隐藏 "Gist 同步" 页

diff --git a/src/views/settings/moreSetting.vue b/src/views/settings/moreSetting.vue
@@ -79,7 +79,19 @@
           />
         </template>
       </nut-cell>
-
+      <nut-cell
+        :title="$t(`moreSettingPage.isSubItemMenuFold`)"
+        class="cell-item"
+      >
+        <template v-slot:link>
+          <nut-switch
+            class="my-switch"
+            v-model="awIsSubItemMenuFold"
+            size="mini"
+            @change="setIsSubItemMenuFold"
+          />
+        </template>
+      </nut-cell>
       <nut-cell :title="$t(`moreSettingPage.isEditorCommon`)" class="cell-item">
         <template v-slot:link>
           <nut-switch
@@ -264,6 +276,7 @@
   const awIconColor = ref(false);
   const awIsDefaultIcon = ref(false);
   const awIsShowIcon = ref(true);
+  const awIsSubItemMenuFold = ref(true);
   const awEditorCommon = ref(false);
   const awSimpleReicon = ref(true);
   const awSimpleShowRemark = ref(false);
@@ -336,6 +349,15 @@
     changeAppearanceSetting({ appearanceSetting: data });
   };
 
+  const setIsSubItemMenuFold = (isSubItemMenuFold: boolean) => {
+    // globalStore.setIsDefaultIcon(isDefaultIcon);
+    const data = {
+      ...appearanceSetting.value,
+      isSubItemMenuFold: isSubItemMenuFold
+    }
+    changeAppearanceSetting({ appearanceSetting: data });
+  };
+
   const setEditorCommon = (isEditorCommon: boolean) => {
     // globalStore.setEditorCommon(isEditorCommon);
     const data = {
@@ -576,6 +598,7 @@
     awIconColor.value = appearanceSetting.value.isIconColor;
     awIsDefaultIcon.value = appearanceSetting.value.isDefaultIcon;
     awIsShowIcon.value = appearanceSetting.value.isShowIcon;
+    awIsSubItemMenuFold.value = appearanceSetting.value.isSubItemMenuFold;
     awEditorCommon.value = appearanceSetting.value.isEditorCommon;
     awSimpleReicon.value = appearanceSetting.value.isSimpleReicon;
     awSimpleShowRemark.value = appearanceSetting.value.isSimpleShowRemark;