diff --git a/package.json b/package.json
index 595983853..e2b3c28dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.33",
+  "version": "2.14.34",
   "private": true,
   "scripts": {
     "dev": "vite --host",
diff --git a/src/api/artifacts/index.ts b/src/api/artifacts/index.ts
index fdecbe038..f1cf624f4 100644
--- a/src/api/artifacts/index.ts
+++ b/src/api/artifacts/index.ts
@@ -11,13 +11,13 @@ export function useArtifactsApi() {
     },
     getOneArtifact: (name: string): AxiosPromise<MyAxiosRes> => {
       return request({
-        url: `/api/artifact/${name}`,
+        url: `/api/artifact/${encodeURIComponent(name)}`,
         method: 'get',
       });
     },
     syncOneArtifact: (name: string): AxiosPromise<MyAxiosRes> => {
       return request({
-        url: `/api/sync/artifact/${name}`,
+        url: `/api/sync/artifact/${encodeURIComponent(name)}`,
         method: 'get',
       });
     },
@@ -30,14 +30,14 @@ export function useArtifactsApi() {
     },
     editArtifact: (name: string, data: Artifact): AxiosPromise<MyAxiosRes> => {
       return request({
-        url: `/api/artifact/${name}`,
+        url: `/api/artifact/${encodeURIComponent(name)}`,
         method: 'patch',
         data,
       });
     },
     deleteArtifact: (name: string): AxiosPromise<MyAxiosRes> => {
       return request({
-        url: `/api/artifact/${name}`,
+        url: `/api/artifact/${encodeURIComponent(name)}`,
         method: 'delete',
       });
     },
diff --git a/src/api/files/index.ts b/src/api/files/index.ts
new file mode 100644
index 000000000..24208b50d
--- /dev/null
+++ b/src/api/files/index.ts
@@ -0,0 +1,51 @@
+import request from '@/api';
+import { AxiosPromise } from 'axios';
+
+export function useFilesApi() {
+  return {
+    getFiles: (): AxiosPromise<MyAxiosRes> => {
+      return request({
+        url: '/api/files',
+        method: 'get',
+      });
+    },
+    getWholeFiles: (): AxiosPromise<MyAxiosRes> => {
+      return request({
+        url: '/api/wholeFiles',
+        method: 'get',
+      });
+    },
+    getOneFile: (name: string): AxiosPromise<MyAxiosRes> => {
+      return request({
+        url: `/api/file/${encodeURIComponent(name)}`,
+        method: 'get',
+      });
+    },
+    getWholeFile: (name: string): AxiosPromise<MyAxiosRes> => {
+      return request({
+        url: `/api/wholeFile/${encodeURIComponent(name)}`,
+        method: 'get',
+      });
+    },
+    createFile: (data: any): AxiosPromise<MyAxiosRes> => {
+      return request({
+        url: '/api/files',
+        method: 'post',
+        data,
+      });
+    },
+    editFile: (name: string, data: any): AxiosPromise<MyAxiosRes> => {
+      return request({
+        url: `/api/file/${encodeURIComponent(name)}`,
+        method: 'patch',
+        data,
+      });
+    },
+    deleteFile: (name: string): AxiosPromise<MyAxiosRes> => {
+      return request({
+        url: `/api/file/${encodeURIComponent(name)}`,
+        method: 'delete',
+      });
+    },
+  };
+}
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index b62bc1758..2e70c3a67 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -75,6 +75,18 @@ img {
   font-weight: bold;
   line-height: 2;
 }
+// .nut-icon-order:before {
+//   content: "\e697";
+// }
+// .nut-icon-edit:before {
+//   content: "\e667";
+// }
+// .nut-icon-find:before {
+//   content: "\e661";
+// }
+.nut-icon-category:before {
+  content: "\e662";
+}
 .nut-icon-issue:before {
   content: '\e6b1';
 }
diff --git a/src/components/FileListItem.vue b/src/components/FileListItem.vue
new file mode 100644
index 000000000..2e1ad6279
--- /dev/null
+++ b/src/components/FileListItem.vue
@@ -0,0 +1,548 @@
+<template>
+  <!-- 滚动内容 -->
+  <nut-swipe class="sub-item-swipe" ref="swipe" :disabled="props.disabled">
+    <div
+      class="sub-item-wrapper"
+      :style="{ padding: isSimpleMode ? '9px' : '16px' }"
+    >
+      <div
+        class="sub-img-wrappers"
+        :style="{ 'margin-top': isSimpleMode ? '5px' : '0' }"
+      >
+        <div v-if="isIconColor">
+          <nut-avatar
+            v-if="props[props.type].icon"
+            :size="isSimpleMode ? '36' : '48'"
+            :url="props[props.type].icon"
+            bg-color=""
+          />
+          <nut-avatar
+            v-else
+            class="sub-item-customer-icon"
+            :size="isSimpleMode ? '36' : '48'"
+            :url="icon"
+            bg-color=""
+          />
+        </div>
+        <div v-else>
+          <nut-avatar
+            class="sub-item-customer-icon"
+            :size="isSimpleMode ? '36' : '48'"
+            :url="props[props.type].icon || icon"
+            bg-color=""
+          />
+        </div>
+      </div>
+      <div class="sub-item-content">
+        <div class="sub-item-title-wrapper">
+
+          <h3 style="color: var(--primary-text-color); font-size: 16px; position: relative; top: 8px;">
+            {{ displayName || name }}
+          </h3>
+
+          <!-- onClickCopyLink 拷贝 -->
+          <div
+            style="position: relative"
+            :style="{ top: isSimpleMode ? '8px' : '0' }"
+          >
+            <button class="copy-sub-link" @click.stop="onClickCopyLink">
+              <font-awesome-icon icon="fa-solid fa-clone" />
+            </button>
+  
+
+            <!-- 编辑 -->
+            <button
+              v-if="!isSimpleMode"
+              class="copy-sub-link"
+              @click.stop="onClickEdit"
+            >
+              <font-awesome-icon icon="fa-solid fa-pen-nib" />
+            </button>
+            <button class="refresh-sub-flow" @click.stop="onClickEdit" v-else>
+              <font-awesome-icon icon="fa-solid fa-pen-nib" />
+            </button>
+
+            <button
+              class="copy-sub-link"
+              @click.stop="swipeController"
+              v-if="!isMobile()"
+              ref="moreAction"
+            >
+              <font-awesome-icon icon="fa-solid fa-angles-right" />
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <!-- 加入判断 开启拖动不显示 -->
+    <template v-if="isLeftRight" #left>
+      <!-- Copy -->
+      <div class="sub-item-swipe-btn-wrapper">
+        <nut-button
+          shape="square"
+          type="primary"
+          class="sub-item-swipe-btn"
+          @click="onClickCopyConfig"
+        >
+          <font-awesome-icon icon="fa-solid fa-paste" />
+        </nut-button>
+      </div>
+      <!-- preview -->
+      <!-- <div class="sub-item-swipe-btn-wrapper">
+        <nut-button shape="square" type="success" class="sub-item-swipe-btn" @click="onClickPreview">
+          <font-awesome-icon icon="fa-solid fa-eye" />
+        </nut-button>
+      </div> -->
+      <!-- del -->
+      <div class="sub-item-swipe-btn-wrapper">
+        <nut-button
+          shape="square"
+          type="danger"
+          class="sub-item-swipe-btn"
+          @click="onClickDelete"
+        >
+          <font-awesome-icon icon="fa-solid fa-trash-can" />
+        </nut-button>
+      </div>
+    </template>
+
+    <template v-else #right>
+      <div class="sub-item-swipe-btn-wrapper">
+        <nut-button
+          shape="square"
+          type="primary"
+          class="sub-item-swipe-btn"
+          @click="onClickCopyConfig"
+        >
+          <font-awesome-icon icon="fa-solid fa-paste" />
+        </nut-button>
+      </div>
+      <!-- <div class="sub-item-swipe-btn-wrapper">
+        <nut-button shape="square" type="success" class="sub-item-swipe-btn" @click="onClickPreview">
+          <font-awesome-icon icon="fa-solid fa-eye" />
+        </nut-button>
+      </div> -->
+      <div class="sub-item-swipe-btn-wrapper">
+        <nut-button
+          shape="square"
+          type="danger"
+          class="sub-item-swipe-btn"
+          @click="onClickDelete"
+        >
+          <font-awesome-icon icon="fa-solid fa-trash-can" />
+        </nut-button>
+      </div>
+    </template>
+  </nut-swipe>
+
+  <CompareTable
+    v-if="compareTableIsVisible"
+    :name="name"
+    :compareData="compareData"
+    @closeCompare="closeCompare"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { useSubsApi } from '@/api/subs';
+  import { useFilesApi } from '@/api/files';
+  import icon from '@/assets/icons/logo.svg';
+  import PreviewPanel from '@/components/PreviewPanel.vue';
+  import { usePopupRoute } from '@/hooks/usePopupRoute';
+  import { useAppNotifyStore } from '@/store/appNotify';
+  import { useGlobalStore } from '@/store/global';
+  import { useSubsStore } from '@/store/subs';
+  import { getString } from '@/utils/flowTransfer';
+  import { isMobile } from '@/utils/isMobile';
+  import CompareTable from '@/views/CompareTable.vue';
+  import { Dialog, Toast } from '@nutui/nutui';
+  import { useClipboard } from '@vueuse/core';
+  import dayjs from 'dayjs';
+  import { storeToRefs } from 'pinia';
+  import { computed, createVNode, ref, toRaw } from 'vue';
+  import useV3Clipboard from 'vue-clipboard3';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import { useHostAPI } from '@/hooks/useHostAPI';
+
+  const { copy, isSupported } = useClipboard();
+  const { toClipboard: copyFallback } = useV3Clipboard();
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    type: 'sub' | 'collection' | 'file';
+    file?: any;
+    sub?: Sub;
+    collection?: Collection;
+    disabled?: boolean;
+  }>();
+  // console.log('props.disabled')
+  // console.log(props.disabled)
+  const compareTableIsVisible = ref(false);
+  usePopupRoute(compareTableIsVisible);
+
+  const moreAction = ref();
+  const swipe = ref();
+  const swipeIsOpen = ref(false);
+  const compareData = ref();
+  const router = useRouter();
+  const globalStore = useGlobalStore();
+  const subsStore = useSubsStore();
+  const subsApi = useSubsApi();
+  const filesApi = useFilesApi();
+  const {
+    isFlowFetching,
+    isSimpleMode,
+    isLeftRight,
+    isIconColor,
+    isSimpleReicon,
+  } = storeToRefs(globalStore);
+
+  const displayName =
+    props[props.type].displayName || props[props.type]['display-name'];
+
+  const name = props[props.type].name;
+  const { flows } = storeToRefs(subsStore);
+  const collectionDetail = computed(() => {
+    const nameList = props?.collection.subscriptions || [];
+    if (nameList.length === 0) {
+      return t('subPage.collectionItem.noSub');
+    } else {
+      const displayNameList = nameList.map(name => {
+        const sub = subsStore.getOneSub(name);
+        return sub?.displayName || sub?.['display-name'] || sub.name;
+      });
+      return `${t('subPage.collectionItem.contain')}：${displayNameList.join(
+        '、'
+      )}`;
+    }
+  });
+
+  const flow = computed(() => {
+    if (props.type === 'sub') {
+      const urlList = Object.keys(flows.value);
+      if (props.sub.source === 'local') return t('subPage.subItem.local');
+      if (isFlowFetching.value && !urlList.includes(props.sub.url))
+        return t('subPage.subItem.loading');
+
+      const target = toRaw(flows.value[props.sub.url]);
+      if (!target) {
+        return {
+          firstLine: t('subPage.subItem.noRecord'),
+          secondLine: ``,
+        };
+      }
+
+      if (target.status === 'success') {
+        const {
+          expires,
+          total,
+          usage: { upload, download },
+        } = target.data;
+
+        let secondLine: string;
+        if (isSimpleMode.value) {
+          secondLine = !expires
+            ? ''
+            : `${dayjs.unix(expires).format('YYYY-MM-DD')}`;
+          return {
+            firstLine: `${getString(upload + download, total, 'B')}`,
+            secondLine,
+          };
+        } else {
+          secondLine = !expires
+            ? t('subPage.subItem.noExpiresInfo')
+            : `${t('subPage.subItem.expires')}：${dayjs
+                .unix(expires)
+                .format('YYYY-MM-DD')}`;
+          return {
+            firstLine: `${t('subPage.subItem.flow')}：${getString(
+              upload + download,
+              total,
+              'B'
+            )}`,
+            secondLine,
+          };
+        }
+      } else if (target?.status === 'failed') {
+        if (target.error.code === 'NO_FLOW_INFO') {
+          return {
+            firstLine: t('subPage.subItem.noFlowInfo'),
+            secondLine: ``,
+          };
+        } else {
+          return {
+            firstLine: `${target.error?.type}`,
+            secondLine: `${target.error?.message}`,
+          };
+        }
+      }
+    }
+  });
+
+  const closeCompare = () => {
+    compareTableIsVisible.value = false;
+    router.back();
+  };
+
+  const compareSub = async () => {
+    Toast.loading('生成节点对比中...', { id: 'compare', cover: true, duration: 1500 });
+    const res = await useSubsApi().compareSub(
+      props.type,
+      props.sub ?? props.collection
+    );
+    if (res?.data?.status === 'success') {
+      compareData.value = res.data.data;
+      compareTableIsVisible.value = true;
+      Toast.hide('compare');
+    }
+  };
+  const swipeClose = () => {
+    swipe.value.close();
+  };
+  const swipeController = () => {
+    if (swipeIsOpen.value) {
+      swipe.value.close();
+      swipeIsOpen.value = false;
+      moreAction.value.style.transform = 'rotate(0deg)';
+    } else {
+      if (isLeftRight.value) {
+        swipe.value.open('right');
+      } else {
+        swipe.value.open('left');
+        swipeIsOpen.value = true;
+        moreAction.value.style.transform = 'rotate(180deg)';
+      }
+    }
+  };
+
+  const onDeleteConfirm = async () => {
+    await subsStore.deleteFile(name);
+    // Notify.danger(t('subPage.deleteSub.succeedNotify'), { duration: 1500 });
+  };
+
+
+  const onClickCopyConfig = async () => {
+    const data = JSON.parse(JSON.stringify(toRaw(props.file)));
+    data.name += `-copy${~~(Math.random() * 10000)}`;
+
+    Toast.loading(t('subPage.copyConfigNotify.loading'), { id: 'copyConfig' });
+    await filesApi.createFile(data);
+    await subsStore.fetchSubsData();
+    Toast.hide('copyConfig');
+    showNotify({ title: t('subPage.copyConfigNotify.succeed') });
+    swipe.value.close();
+  };
+
+  const onClickEdit = () => {
+    router.push(`/edit/${props.type}s/${encodeURIComponent(name)}`);
+  };
+
+  const onClickDelete = () => {
+    Dialog({
+      title: t('subPage.deleteSub.title'),
+      content: createVNode(
+        'span',
+        {},
+        t('subPage.deleteSub.desc', { displayName })
+      ),
+      onCancel: () => {},
+      onOk: onDeleteConfirm,
+      onOpened: () => swipe.value.close(),
+      popClass: 'auto-dialog',
+      cancelText: t('subPage.deleteSub.btn.cancel'),
+      okText: t('subPage.deleteSub.btn.confirm'),
+      closeOnPopstate: true,
+      lockScroll: true,
+    });
+  };
+
+  const { showNotify } = useAppNotifyStore();
+  const { currentUrl: host } = useHostAPI();
+
+  const onClickCopyLink = async () => {
+    const url = `${host.value}/api/file/${encodeURIComponent(name)}`;
+
+    if (isSupported) {
+      await copy(url);
+    } else {
+      await copyFallback(url);
+    }
+    showNotify({ title: t('filePage.copyNotify.succeed') });
+  };
+
+
+</script>
+
+<style lang="scss" scoped>
+  .sub-item-customer-icon {
+    :deep(img) {
+      & {
+        opacity: 0.8;
+        filter: brightness(var(--img-brightness));
+      }
+    }
+  }
+
+  .sub-item-wrapper {
+    line-height: 1.4;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: var(--item-card-radios);
+    display: flex;
+    background: var(--card-color);
+
+    :deep(.nut-avatar) {
+      flex-shrink: 0;
+      width: 56px;
+      height: 56px;
+      margin-right: 20px;
+      border-radius: 12px;
+
+      img {
+        object-fit: contain;
+        border-radius: 10px;
+      }
+    }
+
+    > .sub-item-content {
+      flex: 1;
+      line-height: 1.6;
+
+      .sub-item-title-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .sub-item-title {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          word-wrap: break-word;
+          word-break: break-all;
+          overflow: hidden;
+          font-size: 16px;
+          color: var(--primary-text-color);
+        }
+
+        .copy-sub-link,
+        .refresh-sub-flow {
+          background-color: transparent;
+          border: none;
+          padding: 0 8px;
+          cursor: pointer;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+
+          svg {
+            width: 16px;
+            height: 16px;
+            color: var(--lowest-text-color);
+          }
+        }
+
+        button {
+          white-space: nowrap;
+        }
+
+        div {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .sub-item-detail {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        word-wrap: break-word;
+        word-break: break-all;
+        overflow: hidden;
+        margin-top: 4px;
+        font-size: 12px;
+        color: var(--comment-text-color);
+
+        span {
+          display: block;
+          line-height: 1.8;
+        }
+      }
+
+      .sub-item-detail-isSimple {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        word-wrap: break-word;
+        word-break: break-all;
+        overflow: hidden;
+        font-size: 12px;
+        // margin-top: 3.5px;
+        max-width: 80%;
+        color: var(--comment-text-color);
+      }
+    }
+  }
+
+  .sub-item-swipe {
+    :deep(.nut-swipe__left) {
+      .sub-item-swipe-btn-wrapper {
+        padding-left: 24px;
+      }
+    }
+
+    :deep(.nut-swipe__right),
+    :deep(.nut-swipe__left) {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .sub-item-swipe-btn-wrapper {
+        padding-left: 14px;
+
+        &:last-child {
+          padding-right: 14px;
+        }
+
+        .sub-item-swipe-btn {
+          border-radius: 50%;
+          height: 46px;
+          width: 44px;
+        }
+      }
+    }
+  }
+
+  .desc-about {
+    display: block;
+    padding: 100px 30px 350px;
+    color: var(--comment-text-color);
+    font-size: 12px;
+    line-height: 20px;
+    margin-top: 8px;
+    margin-bottom: 20px;
+    text-align: left;
+  }
+
+  .desc-about span {
+    display: inline-block;
+    padding: 6px 0 0 0;
+  }
+
+  .desc-title a,
+  .desc-about a {
+    color: var(--primary-color);
+  }
+
+  .subs-list-wrapper {
+    margin-bottom: 36px;
+    position: relative;
+  }
+
+  .sub-img-wrappers {
+    display: flex;
+    align-items: center;
+  }
+</style>
diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index d8642dc0d..ccf9a1add 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -8,6 +8,7 @@
       size="22px"
     >
       <nut-tabbar-item class="tabbar-item" to="/subs" icon="link" />
+      <nut-tabbar-item class="tabbar-item" to="/files" icon="category" />
 
       <nut-tabbar-item
         v-show="!istabBar"
@@ -28,7 +29,7 @@
   import { onBeforeRouteUpdate, useRoute } from 'vue-router';
 
   const route = useRoute();
-  const routeList = ['/subs', '/sync', '/my'];
+  const routeList = ['/subs', '/files', '/sync', '/my'];
   const activeTab = ref(routeList.indexOf(route.path));
 
   onBeforeRouteUpdate((to, from, next) => {
diff --git a/src/locales/en.ts b/src/locales/en.ts
index a4a97adc8..7184ad0e4 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -21,9 +21,11 @@ export default {
     },
     pagesTitle: {
       sub: 'Management',
+      file: 'File',
       sync: 'Sync Subscription',
       my: 'My Profile',
       subEditor: 'Subscription Editor',
+      fileEditor: 'File Editor',
       themeSetting: 'Theme Setting',
       moreSetting: 'More Setting',
       apiSetting: 'Backend Setting',
@@ -58,6 +60,14 @@ export default {
     desc: 'Back to Home Page',
     backendDesc: 'If you are seeing this, it is probably due to a routing interception issue on the front end of your browser. You can force a refresh to see it or use the link directly without affecting the use of this link.',
   },
+  filePage: {
+    deleteFile: {
+      succeedNotify: 'Successfully deleted!',
+    },
+    content: {
+      placeholder: 'The content of the file'
+    }
+  },
   // subscription management page
   subPage: {
     addSubTitle: 'Which type you want to create?',
@@ -91,8 +101,8 @@ export default {
       noExpiresInfo: 'No expires info',
     },
     deleteSub: {
-      title: 'Delete Subscription',
-      desc: 'Are you sure to delete subscription {displayName}? \nDeleted cannot be restored!',
+      title: 'Delete',
+      desc: 'Are you sure to delete {displayName}? \nDeleted cannot be restored!',
       succeedNotify: 'Successfully deleted!',
       btn: {
         confirm: 'Delete',
@@ -160,7 +170,7 @@ export default {
         },
         displayName: {
           label: 'Display Name',
-          placeholder: 'The display name for the subscription',
+          placeholder: 'The display name',
         },
         source: {
           label: 'Source',
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index 074536297..f41715bb0 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -21,9 +21,11 @@ export default {
     },
     pagesTitle: {
       sub: '订阅管理',
+      file: '文件管理',
       sync: '同步订阅',
       my: '我的',
       subEditor: '订阅编辑',
+      fileEditor: '文件编辑',
       themeSetting: '主题设置',
       moreSetting: '更多设置',
       apiSetting: '后端设置',
@@ -58,6 +60,18 @@ export default {
     desc: '回首页',
     backendDesc: '如果你看到这个 可能是因为浏览器前端路由拦截的问题 可以强制刷新查看或直接使用该链接 不影响此链接的使用',
   },
+  filePage: {
+    deleteFile: {
+      succeedNotify: '删除文件成功',
+    },
+    content: {
+      placeholder: '填入文件内容'
+    },
+    copyNotify: {
+      succeed: '复制文件链接成功',
+      failed: '复制文件链接失败\n{e}',
+    }
+  },
   // 订阅管理页
   subPage: {
     addSubTitle: '选择要创建的订阅类型',
@@ -90,9 +104,9 @@ export default {
       noExpiresInfo: '无有效期信息',
     },
     deleteSub: {
-      title: '删除订阅',
-      desc: '是否确认删除订阅 {displayName}？删除后不可恢复！',
-      succeedNotify: '删除订阅成功！',
+      title: '删除',
+      desc: '是否确认删除 {displayName}？删除后不可恢复！',
+      succeedNotify: '删除成功！',
       btn: {
         confirm: '确认删除',
         cancel: '取消',
@@ -155,12 +169,12 @@ export default {
         name: {
           label: '名称',
           placeholder: '唯一的标识名称(请勿包含 / )',
-          isEmpty: '订阅名称不能为空',
-          isInvalid: '订阅名称已存在或不合法'
+          isEmpty: '名称不能为空',
+          isInvalid: '名称已存在或不合法'
         },
         displayName: {
           label: '显示名称',
-          placeholder: '输入展示的订阅名称',
+          placeholder: '输入展示的名称',
         },
         source: {
           label: '来源',
diff --git a/src/router/index.ts b/src/router/index.ts
index 045728204..a6ab4547e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,9 @@ import { initStores } from '@/utils/initApp';
 import My from '@/views/My.vue';
 import NotFound from '@/views/NotFound.vue';
 
+import File from '@/views/File.vue';
+import FileEditor from '@/views/FileEditor.vue';
+
 import Sub from '@/views/Sub.vue';
 import SubEditor from '@/views/SubEditor.vue';
 
@@ -68,6 +71,24 @@ const router = createRouter({
             needNavBack: false,
           },
         },
+        {
+          path: '/files',
+          component: File,
+          meta: {
+            title: 'file',
+            needTabBar: true,
+            needNavBack: false,
+          },
+        },
+        {
+          path: '/edit/:editType(files)/:id',
+          component: FileEditor,
+          meta: {
+            title: 'fileEditor',
+            needTabBar: false,
+            needNavBack: true,
+          },
+        },
         {
           path: '/edit/:editType(subs|collections)/:id',
           component: SubEditor,
diff --git a/src/store/subs.ts b/src/store/subs.ts
index b668f05f9..575f46fee 100644
--- a/src/store/subs.ts
+++ b/src/store/subs.ts
@@ -1,4 +1,5 @@
 import { useSubsApi } from '@/api/subs';
+import { useFilesApi } from '@/api/files';
 import i18n from '@/locales';
 import { useAppNotifyStore } from '@/store/appNotify';
 import { getFlowsUrlList } from '@/utils/getFlowsUrlList';
@@ -6,6 +7,7 @@ import { defineStore } from 'pinia';
 
 const { t } = i18n.global;
 const subsApi = useSubsApi();
+const filesApi = useFilesApi();
 
 export const useSubsStore = defineStore('subsStore', {
   state: (): SubsStoreState => {
@@ -13,6 +15,7 @@ export const useSubsStore = defineStore('subsStore', {
       subs: [],
       collections: [],
       flows: {},
+      files: [],
     };
   },
   getters: {
@@ -26,16 +29,24 @@ export const useSubsStore = defineStore('subsStore', {
       ({ collections }): GetOne<Collection> =>
       (name: string): Collection =>
         collections.find(collection => collection.name === name),
+    hasFiles: ({ files }): boolean => files.length > 0,
+    getOneFile:
+      ({ files }): GetOne<any> =>
+      (name: string) =>
+        files.find(file => file.name === name),
   },
   actions: {
     async fetchSubsData() {
-      Promise.all([subsApi.getSubs(), subsApi.getCollections()]).then(res => {
+      Promise.all([subsApi.getSubs(), subsApi.getCollections(), filesApi.getWholeFiles()]).then(res => {
         if ('data' in res[0].data) {
           this.subs = res[0].data.data;
         }
         if ('data' in res[1].data) {
           this.collections = res[1].data.data;
         }
+        if ('data' in res[2].data) {
+          this.files = res[2].data.data;
+        }
       });
     },
     async updateOneData(type: string, name: string) {
@@ -44,6 +55,8 @@ export const useSubsStore = defineStore('subsStore', {
         res = await subsApi.getOne('sub', name);
       } else if (type === 'collections') {
         res = await subsApi.getOne('collection', name);
+      } else if (type === 'files') {
+        res = await filesApi.getWholeFile(name);
       }
       if (res?.data?.status === 'success') {
         const index = this[type].findIndex(item => item.name === name);
@@ -84,5 +97,25 @@ export const useSubsStore = defineStore('subsStore', {
         });
       }
     },
+    async fetchFiles() {
+      Promise.all([filesApi.getWholeFiles()]).then(res => {
+        if ('data' in res[0].data) {
+          this.files = res[0].data.data;
+        }
+      });
+    },
+
+    async deleteFile(name: string) {
+      const { showNotify } = useAppNotifyStore();
+
+      const { data } = await filesApi.deleteFile(name);
+      if (data.status === 'success') {
+        await this.fetchFiles();
+        showNotify({
+          type: 'danger',
+          title: t('filePage.deleteFile.succeedNotify'),
+        });
+      }
+    },
   },
 });
diff --git a/src/types/store/subsStore.d.ts b/src/types/store/subsStore.d.ts
index 9244e7b0d..d42ca0512 100644
--- a/src/types/store/subsStore.d.ts
+++ b/src/types/store/subsStore.d.ts
@@ -2,6 +2,7 @@ interface SubsStoreState {
   subs: Sub[];
   collections: Collection[];
   flows: FlowsDict;
+  files: any[];
 }
 
 interface FlowsDict {
diff --git a/src/views/File.vue b/src/views/File.vue
new file mode 100644
index 000000000..863b49b43
--- /dev/null
+++ b/src/views/File.vue
@@ -0,0 +1,374 @@
+<template>
+  <div
+    style="overflow: hidden"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+
+    <!-- 浮动按钮 -->
+    <Teleport to="body">
+      <div v-if="hasFiles" class="drag-btn-wrapper">
+        <nut-drag
+          :attract="true"
+          :boundary="{
+            top: 56 + 8,
+            left: 16,
+            bottom: bottomSafeArea + 48 + 12 + 8,
+            right: 16,
+          }"
+          :style="{ right: '16px', bottom: `${bottomSafeArea + 48 + 36}px` }"
+        >
+          <!-- 刷新 -->
+          <div v-if="showFloatingRefreshButton" class="drag-btn refresh" @click="refresh">
+            <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
+          </div>
+
+          <!-- 加号 -->
+          <router-link to="/edit/files/UNTITLED" class="router-link">
+            <div class="drag-btn">
+              <font-awesome-icon icon="fa-solid fa-plus" />
+            </div>
+          </router-link>
+        </nut-drag>
+      </div>
+    </Teleport>
+
+    <!-- 页面内容 -->
+    <!-- 有数据 -->
+    <div class="subs-list-wrapper">
+      <div v-if="hasFiles">
+        <draggable
+          v-model="files"
+          item-key="name"
+          :scroll-sensitivity="200"
+          :force-fallback="true"
+          :scroll-speed="8"
+          :scroll="true"
+          v-bind="{
+            animation: 200,
+            disabled: false,
+            delay: 200,
+            chosenClass: 'chosensub',
+            handle: 'div',
+          }"
+          @change="changeSort('files', files)"
+          @start="handleDragStart(files)"
+          @end="handleDragEnd(files)"
+        >
+          <template #item="{ element }">
+            <div :key="element.name" class="draggable-item">
+              <FileListItem
+                :file="element"
+                type="file"
+                :disabled="swipeDisabled"
+              />
+            </div>
+          </template>
+        </draggable>
+      </div>
+    </div>
+    <!-- 没有数据 -->
+    <div
+      v-if="!isLoading && fetchResult && !hasFiles"
+      class="no-data-wrapper"
+    >
+      <nut-empty image="empty">
+        <template #description>
+          <h3>{{ $t(`subPage.emptySub.title`) }}</h3>
+          <p>{{ $t(`subPage.emptySub.desc`) }}</p>
+        </template>
+      </nut-empty>
+      <router-link to="/edit/files/UNTITLED" class="router-link">
+        <nut-button type="primary">
+          {{ $t(`subPage.emptySub.btn`) }}
+        </nut-button>
+      </router-link>
+    </div>
+
+    <!-- 数据加载失败 -->
+    <div v-if="!isLoading && !fetchResult" class="no-data-wrapper">
+      <nut-empty image="error" style="padding: 32px 30px">
+        <template #description>
+          <h3>{{ $t(`subPage.loadFailed.title`) }}</h3>
+          <p>{{ $t(`subPage.loadFailed.desc`) }}</p>
+          <p>{{ $t(`subPage.loadFailed.followOfficialChannel`) }}</p>
+          <p>
+            {{ $t(`subPage.loadFailed.officialChannel`) }}
+            <a
+              href="https://t.me/cool_scripts"
+              style="color: var(--primary-color)"
+            >
+              Cool Scripts
+            </a>
+          </p>
+        </template>
+      </nut-empty>
+      <nut-button icon="refresh" type="primary" @click="refresh">
+        {{ $t(`subPage.loadFailed.btn`) }}
+      </nut-button>
+      <a
+        href="https://www.notion.so/Sub-Store-6259586994d34c11a4ced5c406264b46"
+        target="_blank"
+      >
+        <span>{{ $t(`subPage.loadFailed.doc`) }}</span>
+        <font-awesome-icon icon="fa-solid fa-arrow-up-right-from-square" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { ref, toRaw } from "vue";
+import draggable from "vuedraggable";
+
+import { useAppNotifyStore } from "@/store/appNotify";
+// import { Dialog, Toast } from '@nutui/nutui';
+
+import { useSubsApi } from "@/api/subs";
+import FileListItem from "@/components/FileListItem.vue";
+import { useGlobalStore } from "@/store/global";
+import { useSubsStore } from "@/store/subs";
+import { initStores } from "@/utils/initApp";
+import { useI18n } from "vue-i18n";
+import { useBackend } from "@/hooks/useBackend";
+
+const { env } = useBackend();
+const { showNotify } = useAppNotifyStore();
+const subApi = useSubsApi();
+const { t } = useI18n();
+const subsStore = useSubsStore();
+const globalStore = useGlobalStore();
+const { hasFiles, files } = storeToRefs(subsStore);
+const { isLoading, fetchResult, bottomSafeArea, showFloatingRefreshButton } = storeToRefs(globalStore);
+const swipeDisabled = ref(false);
+const touchStartY = ref(null);
+const touchStartX = ref(null);
+const sortFailed = ref(false);
+const onTouchStart = (event: TouchEvent) => {
+  touchStartY.value = Math.abs(event.touches[0].clientY);
+  touchStartX.value = Math.abs(event.touches[0].clientX);
+};
+
+const onTouchMove = (event: TouchEvent) => {
+  const deltaY = Math.abs(event.changedTouches[0].clientY - touchStartY.value);
+  const deltaX = Math.abs(event.changedTouches[0].clientX - touchStartX.value);
+
+  const isScrollingUp = deltaX > 2;
+  const isScrollingUps = deltaY < 10;
+
+  if (isScrollingUp && isScrollingUps) {
+    event.preventDefault();
+  }
+};
+
+const onTouchEnd = () => {
+  touchStartY.value = null;
+  touchStartX.value = null;
+};
+
+const refresh = () => {
+  initStores(true, true, true);
+};
+
+let dragData = null;
+const changeSort = async (
+  subColl: "files",
+  dataValue: any[]
+) => {
+  try {
+    let sortDataRes: any;
+  
+    const nameSortArray = dataValue.map((k: { name: string }) => k.name);
+    // console.log(nameSortArray);
+    sortDataRes = await subApi.newSortSub(
+      subColl,
+      JSON.parse(JSON.stringify(toRaw(nameSortArray)))
+    );
+    // console.log(JSON.stringify(sortDataRes))
+    if (sortDataRes?.data?.status !== "success") {
+      sortFailed.value = true;
+      showNotify({
+        title: t("notify.sortsub.failed"),
+        type: "danger",
+        content: JSON.stringify(sortDataRes),
+      });
+    }
+  } catch (error) {
+    sortFailed.value = true;
+  }
+};
+
+const handleDragStart = (dataValue: any) => {
+  swipeDisabled.value = true;
+  dragData = dataValue.value;
+};
+
+const handleDragEnd = (dataValue: any) => {
+  if (sortFailed.value) {
+    dataValue.value = dragData;
+  } else {
+    dragData = null;
+  }
+  swipeDisabled.value = false;
+};
+</script>
+
+<style lang="scss">
+.drag-btn-wrapper {
+  position: relative;
+  z-index: 999;
+
+  .drag-btn {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-image: linear-gradient(
+      to bottom right,
+      var(--primary-color),
+      var(--primary-color-end)
+    );
+    box-shadow: 0 4px 8px #0003;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.refresh {
+      background: var(--second-color);
+      margin-bottom: 12px;
+    }
+
+    > svg {
+      width: 20px;
+      height: 20px;
+      color: #fffb;
+    }
+  }
+}
+
+.add-sub-popup {
+  background-color: var(--popup-color);
+  // position: relative;
+
+  .add-sub-panel-title {
+    width: 100%;
+    text-align: center;
+    font-size: 16px;
+    color: var(--comment-text-color);
+  }
+
+  .add-sub-panel-list {
+    padding: 16px 0;
+    font-size: 16px;
+    font-weight: bold;
+    display: flex;
+    width: 100%;
+    color: var(--second-text-color);
+
+    > li {
+      width: 50%;
+      display: flex;
+      justify-content: center;
+
+      .router-link {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+
+        > svg {
+          width: 44px;
+          height: 44px;
+          color: var(--primary-color);
+          margin-bottom: 12px;
+        }
+      }
+    }
+  }
+}
+
+.no-data-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  h3 {
+    font-size: 18px;
+    margin-bottom: 12px;
+    color: var(--primary-text-color);
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--comment-text-color);
+  }
+
+  a {
+    font-size: 14px;
+    margin-top: 24px;
+    color: var(--comment-text-color);
+
+    span {
+      margin-right: 4px;
+    }
+  }
+}
+
+.list-title {
+  padding-left: 8px;
+  font-weight: bold;
+  //padding-left: var(--safe-area-side);
+}
+
+.sticky-title-wrappers {
+  margin-top: var(--safe-area-side);
+  // backdrop-filter: blur(var(--sticky-title-blur));
+  // -webkit-backdrop-filter: blur(var(--sticky-title-blur));
+  color: var(--comment-text-color);
+  // background-color: var(--nav-bar-color);
+}
+
+.desc-about {
+  display: block;
+  padding: 100px 30px 50px;
+  color: var(--comment-text-color);
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 8px;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.desc-about span {
+  display: inline-block;
+  padding: 6px 0 0 0;
+}
+
+.desc-title a,
+.desc-about a {
+  color: var(--primary-color);
+}
+
+.draggable-item {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  // overflow: hidden;
+}
+
+.chosensub {
+  box-shadow: 0 0 10px var(--primary-color);
+  border-radius: var(--item-card-radios);
+  overflow: hidden;
+}
+
+.subs-list-wrapper {
+  width: calc(100% - 1.5rem);
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>
diff --git a/src/views/FileEditor.vue b/src/views/FileEditor.vue
new file mode 100644
index 000000000..9f5b27c5e
--- /dev/null
+++ b/src/views/FileEditor.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="page-wrapper">
+    <!-- 基础表单 -->
+    <div class="form-block-wrapper">
+      <nut-form class="form" :model-value="form" ref="ruleForm">
+        <!-- name -->
+        <nut-form-item
+          required
+          :label="$t(`editorPage.subConfig.basic.name.label`)"
+          prop="name"
+          :rules="[
+            {
+              required: true,
+              message: $t(`editorPage.subConfig.basic.name.isEmpty`),
+            },
+            {
+              validator: nameValidator,
+              message: $t(`editorPage.subConfig.basic.name.isInvalid`),
+            },
+          ]"
+        >
+          <input
+            class="nut-input-text"
+            @blur="customerBlurValidate('name')"
+            v-model.trim="form.name"
+            :placeholder="$t(`editorPage.subConfig.basic.name.placeholder`)"
+            type="text"
+          />
+        </nut-form-item>
+        <!-- displayName -->
+        <nut-form-item
+          :label="$t(`editorPage.subConfig.basic.displayName.label`)"
+          prop="displayName"
+        >
+          <input
+            class="nut-input-text"
+            v-model.trim="form.displayName"
+            :placeholder="
+              $t(`editorPage.subConfig.basic.displayName.placeholder`)
+            "
+            type="text"
+          />
+        </nut-form-item>
+        <!-- icon -->
+        <nut-form-item
+          :label="$t(`editorPage.subConfig.basic.icon.label`)"
+          prop="icon"
+        >
+          <input
+            class="nut-input-text"
+            v-model.trim="form.icon"
+            :placeholder="$t(`editorPage.subConfig.basic.icon.placeholder`)"
+            type="text"
+          />
+        </nut-form-item>
+          <nut-form-item
+            :label="undefined"
+            prop="content"
+          >
+            <nut-textarea
+              class="textarea-wrapper"
+              v-model="form.content"
+              text-align="left"
+              :autosize="{ maxHeight: 410, minHeight: 50 }"
+              :placeholder="
+                $t(`filePage.content.placeholder`)
+              "
+              type="text"
+            />
+          </nut-form-item>
+
+
+    
+
+      
+      </nut-form>
+    </div>
+
+  </div>
+
+  <div class="bottom-btn-wrapper">
+
+    <nut-button
+      @click="submit"
+      class="submit-btn btn"
+      type="primary"
+      shape="square"
+    >
+      <font-awesome-icon icon="fa-solid fa-floppy-disk" />
+      {{ $t('editorPage.subConfig.btn.save') }}
+    </nut-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useSubsApi } from '@/api/subs';
+  import { useFilesApi } from '@/api/files';
+  import { useAppNotifyStore } from '@/store/appNotify';
+  import { useGlobalStore } from '@/store/global';
+  import { useSubsStore } from '@/store/subs';
+
+  import { initStores } from '@/utils/initApp';
+  import { Dialog, Toast } from '@nutui/nutui';
+  import { storeToRefs } from 'pinia';
+  import {
+    computed,
+    provide,
+    reactive,
+    ref,
+    shallowRef,
+    toRaw,
+    watchEffect,
+  } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute, useRouter } from 'vue-router';
+
+  const { t } = useI18n();
+  const route = useRoute();
+  const router = useRouter();
+  const subsApi = useSubsApi();
+  const filesApi = useFilesApi();
+  const editType = route.params.editType as string;
+  const configName = route.params.id as string;
+  const subsStore = useSubsStore();
+  const { showNotify } = useAppNotifyStore();
+
+  const globalStore = useGlobalStore();
+  const { bottomSafeArea } = storeToRefs(globalStore);
+  const padding = bottomSafeArea.value + 'px';
+
+  const file = computed(() => subsStore.getOneFile(configName));
+
+  const isInit = ref(false);
+  const ruleForm = ref<any>(null);
+  const isget = ref(false);
+  const form = reactive<any>({
+    name: '',
+    displayName: '',
+    icon: '',
+  });
+  provide('form', form);
+
+
+  watchEffect(() => {
+    if (isInit.value) return;
+    if (configName === 'UNTITLED') {
+      // 标记 加载完成
+      isInit.value = true;
+      return;
+    }
+
+    const sourceData: any = toRaw(file.value);
+    if (sourceData) {
+      form.name = sourceData.name;
+      form.displayName = sourceData.displayName || sourceData['display-name'];
+      form.icon = sourceData.icon;
+
+      form.content = sourceData.content;
+      // 标记 加载完成
+      isInit.value = true;
+      return;
+    }
+  
+  });
+
+
+  const submit = () => {
+    if (isget.value){
+    showNotify({
+        type: 'success',
+        title: '请勿重复点击...',
+      });
+    return;
+    }
+    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
+      isget.value=true;
+      // 如果验证失败
+      if (!valid) {
+        isget.value=false;
+        Dialog({
+          title: t(`editorPage.subConfig.pop.errorTitle`),
+          content: errors[0].message,
+          popClass: 'auto-dialog',
+          noCancelBtn: true,
+          okText: t(`editorPage.subConfig.pop.errorBtn`),
+          // @ts-ignore
+          closeOnClickOverlay: true,
+        });
+        return;
+      }
+      Toast.loading('...', { id: 'submits', cover: true, duration: 1500 });
+      // 如果验证成功，开始保存/修改
+      const data: any = JSON.parse(JSON.stringify(toRaw(form)));
+      data['display-name'] = data.displayName;
+      
+
+      let res = null;
+
+      if (configName === 'UNTITLED') {
+        res = await filesApi.createFile(data);
+        await subsStore.fetchSubsData();
+        if (data.source === 'remote') await initStores(false, true, false);
+      } else {
+        res = await filesApi.editFile(configName, data);
+    
+        if (configName === data.name) {
+          // @ts-ignore
+          await subsStore.updateOneData(editType, configName);
+        } else {
+          await subsStore.fetchSubsData();
+        }
+      }
+
+      if (res?.data?.status === 'success') {
+        router.replace('/files').then(() => {
+          if (res)
+            showNotify({
+              type: 'success',
+              title: t(`editorPage.subConfig.pop.succeedMsg`),
+            });
+
+        });
+  
+      }
+      isget.value=false;
+      Toast.hide('submits');
+    });
+  };
+
+  // 名称验证器
+  const nameValidator = (val: string): Promise<boolean> => {
+    return new Promise(resolve => {
+      if (val === 'UNTITLED') resolve(false);
+      if (/\//.test(val)) {
+        resolve(false)
+      }
+      const nameList = subsStore.files.map(item => item.name);
+      nameList.includes(val) && configName !== val
+        ? resolve(false)
+        : resolve(true);
+    });
+  };
+
+  // 失去焦点触发验证
+  const customerBlurValidate = (prop: string) => {
+    ruleForm.value.validate(prop);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page-wrapper {
+    padding: 0 var(--safe-area-side) calc(v-bind('padding') + 63px)
+      var(--safe-area-side);
+
+    :deep(.nut-cell-group__warp) {
+      border-radius: var(--item-card-radios);
+    }
+  }
+
+  .radio-wrapper {
+    display: flex;
+    justify-content: end;
+
+    :deep(.nut-radio__button.false) {
+      background: var(--divider-color);
+      border-color: transparent;
+      color: var(--second-text-color);
+    }
+  }
+
+  .form-block-wrapper {
+    position: relative;
+  }
+
+  .bottom-btn-wrapper {
+    position: fixed;
+    display: flex;
+    justify-content: space-between;
+    bottom: 0;
+    width: 100%;
+    padding: 8px var(--safe-area-side) calc(v-bind('padding') + 8px)
+      var(--safe-area-side);
+    z-index: 20;
+    background: var(--background-color);
+    border-top: 1px solid var(--divider-color);
+
+    .btn {
+      border-radius: 8px;
+      padding: 4px 12px;
+      font-size: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      svg {
+        margin-right: 4px;
+      }
+    }
+
+    // .compare-btn {
+    //   background: transparent;
+    //   width: 36%;
+    // }
+
+    .submit-btn {
+      width: 100%;
+    }
+  }
+
+  .ignore-failed-wrapper {
+    flex-direction: row;
+    justify-content: space-between;
+    :deep(.nut-form-item__label) {
+      width: auto;
+    }
+    .swtich-wrapper {
+      display: flex;
+      justify-content: end;
+    }
+  }
+
+  .include-subs-wrapper {
+    flex-direction: column;
+
+    :deep(.nut-form-item__label) {
+      width: 100%;
+      margin-bottom: 12px;
+    }
+
+    .subs-checkbox-wrapper {
+      flex-direction: row-reverse;
+
+      .subs-checkbox {
+        justify-content: space-between;
+        margin-left: 16px;
+        padding: 16px 0 0 0;
+
+        &:not(:last-child) {
+          padding: 16px 0 16px 0;
+          border-bottom: 1px solid;
+          border-color: var(--divider-color);
+        }
+
+        .sub-img-wrapper {
+          max-width: 100%;
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          color: var(--second-text-color);
+
+          span {
+            max-width: 56vw;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            word-wrap: break-word;
+            word-break: break-all;
+            overflow: hidden;
+          }
+
+          .sub-item-customer-icon {
+            margin-right: 12px;
+
+            :deep(img) {
+              object-fit: contain;
+
+              &:not(.nut-icon__img) {
+                filter: brightness(var(--img-brightness));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/Sub.vue b/src/views/Sub.vue
index e30cd85bc..9133c3592 100644
--- a/src/views/Sub.vue
+++ b/src/views/Sub.vue
@@ -250,7 +250,7 @@ const changeSort = async (
     if (env.value.version > "2.14.48") {
       console.log(`new sort > v2.14.48`);
       const nameSortArray = dataValue.map((k: { name: string }) => k.name);
-      console.log(nameSortArray);
+      // console.log(nameSortArray);
       sortDataRes = await subsApi.newSortSub(
         subColl,
         JSON.parse(JSON.stringify(toRaw(nameSortArray)))
diff --git a/src/views/Sync.vue b/src/views/Sync.vue
index c43e076af..0e302bd13 100644
--- a/src/views/Sync.vue
+++ b/src/views/Sync.vue
@@ -240,12 +240,12 @@ const changeArtifacts = async () => {
     if (env.value.version > "2.14.48") {
       console.log("new sort > v2.14.48");
       const nameSortArray = artifacts.value.map((k) => k.name);
-      console.log(nameSortArray);
+      // console.log(nameSortArray);
       sortArtifacts = await subsApi.newSortSub(
         "artifacts",
         JSON.parse(JSON.stringify(toRaw(nameSortArray)))
       );
-      console.log(JSON.stringify(sortArtifacts));
+      // console.log(JSON.stringify(sortArtifacts));
     } else {
       console.log("old sort < v2.14.48");
       sortArtifacts = await subsApi.sortSub(