fix: 更新导入文件弹窗样式，修复交互细节问题

Author: hsingyin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.318",
+  "version": "2.14.319",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/assets/icons/file.svg

@@ -134,14 +134,18 @@
         </nut-button>
       </div>
       <div class="sub-item-swipe-btn-wrapper">
-        <a
+        <!-- <a
           :href="`${host}/api/wholeFile/${encodeURIComponent(name)}?raw=1`"
           target="_blank"
+        > -->
+        <nut-button
+          shape="square"
+          type="success"
+          class="sub-item-swipe-btn"
+          @click="onClickExportFile(name)"
         >
-          <nut-button shape="square" type="success" class="sub-item-swipe-btn">
-            <font-awesome-icon icon="fa-solid fa-file-export" />
-          </nut-button>
-        </a>
+          <font-awesome-icon icon="fa-solid fa-file-export" />
+        </nut-button>
       </div>
       <!-- preview -->
       <!-- <div class="sub-item-swipe-btn-wrapper">
@@ -174,14 +178,14 @@
         </nut-button>
       </div>
       <div class="sub-item-swipe-btn-wrapper">
-        <a
-          :href="`${host}/api/wholeFile/${encodeURIComponent(name)}?raw=1`"
-          target="_blank"
+        <nut-button
+          shape="square"
+          type="success"
+          class="sub-item-swipe-btn"
+          @click="onClickExportFile(name)"
         >
-          <nut-button shape="square" type="success" class="sub-item-swipe-btn">
-            <font-awesome-icon icon="fa-solid fa-file-export" />
-          </nut-button>
-        </a>
+          <font-awesome-icon icon="fa-solid fa-file-export" />
+        </nut-button>
       </div>
       <!-- <div class="sub-item-swipe-btn-wrapper">
         <nut-button shape="square" type="success" class="sub-item-swipe-btn" @click="onClickPreview">
@@ -422,6 +426,14 @@
   const shareBtnVisible = computed(() => {
     return env.value?.feature?.share;
   });
+
+  const onClickExportFile = (name) => {
+    swipeClose();
+    const url = `${host.value}/api/wholeFile/${encodeURIComponent(name)}?raw=1`;
+    console.log('url', url);
+    window.open(url, '_blank');  // 在新窗口中打开链接
+  };
+
   const onClickShareLink = async () => {
     console.log('props', props)
     const type = props.type;

src/components/FileListItem.vue

@@ -72,6 +72,9 @@ export default {
       "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: {
+    addFileTitle: "Add File",
+    importFileTitle: "Import Sub-Store file data",
+    importFileTips: "On the File Management page, click the Export icon button in the More items section of a file.",
     deleteFile: {
       succeedNotify: "Successfully deleted!",
     },

src/locales/en.ts

@@ -99,6 +99,9 @@ export default {
     backendDesc: '如果你看到这个 可能是因为浏览器前端路由拦截的问题 可以强制刷新查看或直接使用该链接 不影响此链接的使用',
   },
   filePage: {
+    addFileTitle: '创建文件',
+    importFileTitle: '导入 Sub-Store 文件数据',
+    importFileTips: '文件管理页面, 在某个文件左滑/右滑的更多项中, 点击导出图标按钮',
     deleteFile: {
       succeedNotify: '删除文件成功',
     },

src/locales/zh.ts

@@ -5,7 +5,7 @@
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
   >
-      <!-- 添加订阅弹窗 -->
+    <!-- 添加订阅弹窗 -->
     <!-- lock-scroll -->
     <div>
       <nut-popup
@@ -22,8 +22,7 @@
         round
       >
         <div class="title-btn">
-          <!-- <p class="add-sub-panel-title">{{ $t(`subPage.addSubTitle`) }}</p> -->
-          <p class="add-sub-panel-title">创建文件</p>
+          <p class="add-sub-panel-title">{{ $t(`filePage.addFileTitle`) }}</p>
           <p class="add-sub-panel-title or">{{ $t(`specificWord.or`) }}</p>
           <input type="file" ref="fileInput" accept="application/json,text/json,.json" @change="fileChange" style="display: none">
           <nut-button
@@ -46,9 +45,8 @@
         <ul class="add-sub-panel-list">
           <li>
             <router-link to="/edit/files/UNTITLED" class="router-link">
-              <svg-icon name="singleSubs" />
-              <!-- <span>{{ $t(`specificWord.singleSub`) }}</span> -->
-              <span>文件</span>
+              <svg-icon name="file" />
+              <span>{{ $t(`specificWord.file`) }}</span>
             </router-link>
           </li>
           <!-- <li>
@@ -394,8 +392,8 @@ const fileChange = async (event) => {
 const importTips = () => {
   addSubBtnIsVisible.value = false
   Dialog({
-      title: '导入 Sub-Store 文件数据',
-      content: '文件管理页面, 在某个文件左滑/右滑的更多项中, 点击导出图标按钮',
+      title: t(`filePage.importFileTitle`),
+      content: t(`filePage.importFileTips`),
       popClass: 'auto-dialog',
       okText: 'OK',
       noCancelBtn: true,
@@ -486,7 +484,7 @@ const importTips = () => {
     color: var(--second-text-color);
 
     > li {
-      width: 50%;
+      flex: 1;
       display: flex;
       justify-content: center;