1

package.json

@@ -26,6 +26,7 @@
     "alova": "^3.2.0",
     "body-scroll-lock": "^4.0.0-beta.0",
     "pinia": "^2.1.7",
+    "sortablejs-vue3": "^1.2.11",
     "vue": "^3.4.23",
     "vue-router": "^4.3.2"
   },

src/views/message/index.vue

@@ -25,7 +25,9 @@
           @click="handleMessageClick(ms)"
         >
           <n-flex justify="space-between">
-            {{ ms.content.content }}
+            <div class="truncate inline-block" style="width: 260px">
+              {{ ms && ms.content.content }}
+            </div>
 
             <n-dropdown
               trigger="hover"

src/views/textToaudio/sttModel.vue

@@ -94,7 +94,7 @@ const showModal = ref(false)
 const message = useMessage()
 const formId = ref()
 const loading = ref(false)
-const form = ref<{ file: File | null; name: string }>({
+const form = reactive<{ file: File | null; name: string }>({
   file: null,
   name: ''
 })
@@ -143,7 +143,7 @@ const handleSave = async () => {
         await saveTOSTT(data)
         loading.value = true
 
-        message.success('新增成功！')
+        message.success(formId.value?'修改成功！':'新增成功！')
         emits('submit')
       } else {
         message.error('请上传语音文件')

src/views/textToaudio/ttsModel.vue

@@ -198,7 +198,7 @@ const handleSave = async () => {
     if (!errors) {
       console.log(data)
       await saveTOTTS(data)
-      message.success('新增成功！')
+      message.success(formId.value?'修改成功！':'新增成功！')
       emits('submit')
     }
   })

src/views/topicNavigation/index.vue

@@ -26,7 +26,7 @@
           :show-divider="false"
           v-if="!isPanoEditing"
         >
-          <n-list-item v-for="(nav, index) in dataList" :key="index" style="">
+          <n-list-item v-for="(element, index) in dataList" style="">
             <n-flex justify="space-between" align="center" :size="0">
               <n-flex align="center">
                 <n-icon size="20">
@@ -36,7 +36,7 @@
                   <n-flex style="flex: 1" align="center">
                     <n-input-group>
                       <n-input
-                        v-model:value="nav.title"
+                        v-model:value="element.title"
                         maxlength="15"
                         style="max-width: 130px"
                       />
@@ -47,8 +47,8 @@
                     </n-input-group>
                   </n-flex>
                 </template>
-                <div v-else @click="handleItem(index)">
-                  {{ nav.title === '新增路线' ? nav.title + index : nav.title }}
+                <div v-else @click="handleItem(index)" class="truncate inline-block" style="width: 145px">
+                  {{ element.title === '新增路线' ? element.title + index : element.title }}
                 </div>
               </n-flex>
 
@@ -71,6 +71,7 @@
               </n-dropdown>
             </n-flex>
           </n-list-item>
+        
         </n-list>
 
         <template v-else>
@@ -88,12 +89,20 @@
                   style="--n-color-modal: none; width: 100%"
                   :show-divider="false"
                 >
+                <Sortable
+                  :list="dataList[currentPanoEditing].panos"
+                  itemKey="id"
+                  options="options"
+                  @end="logEvent"
+                >
+                <template #item="{ element, index }">
+                  <!-- v-for="(pano, index) in dataList[currentPanoEditing].panos" -->
                   <n-list-item
-                    v-for="(pano, index) in dataList[currentPanoEditing].panos"
+                    
                     :key="index"
                   >
                     <n-flex justify="space-between">
-                      {{ pano.index }}
+                      {{ element.index }}
                       <n-icon
                         :size="20"
                         @click="handlePanoDel(index)"
@@ -103,6 +112,8 @@
                       </n-icon>
                     </n-flex>
                   </n-list-item>
+                  </template>
+                </Sortable>
                 </n-list>
               </template>
               <n-flex v-else justify="center" style="width: 100%">
@@ -127,6 +138,7 @@
 import { computed, ref, watch, watchEffect } from 'vue'
 import { sdk, clearScreen, sdk_mounted } from '@/sdk'
 import { onMounted, onUnmounted } from 'vue'
+import { Sortable } from 'sortablejs-vue3'
 import {
   // NRadio,
   // NPopover,
@@ -141,6 +153,7 @@ import { WalkSharp, TrashOutline, EllipsisHorizontal } from '@vicons/ionicons5'
 import { useMainStore } from '@/store'
 
 const panos = ref([])
+const newDataList = ref<object[]>([])
 const main = useMainStore()
 const currentEditing = ref(NaN)
 const currentPanoEditing = ref()
@@ -152,7 +165,13 @@ const dataList = ref<
     panos: any[]
   }[]
 >([])
-
+const logEvent = (evt) => {
+  const changeData = newDataList.value.splice(evt.oldIndex || 0, 1)
+  newDataList.value.splice(evt.newIndex || 0, 0, changeData[0])
+  const origin = dataList.value[currentPanoEditing.value]
+  origin.panos = newDataList.value
+  console.log('end', evt, newDataList.value)
+}
 const handleAdd = () => {
   dataList.value.push({
     title: '新增路线',
@@ -266,6 +285,8 @@ watch(
       if (origin && panos.value.length > 0) {
         origin.panos = panos.value
       }
+      console.log('panos', origin.panos)
+      newDataList.value = JSON.parse(JSON.stringify(origin.panos))
     }
   },
   {

yarn.lock

@@ -2685,6 +2685,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
 
+"@vue/compiler-core@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-core/-/compiler-core-3.5.13.tgz#b0ae6c4347f60c03e849a05d34e5bf747c9bda05"
+  integrity sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.13"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-core@3.5.8":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-core/-/compiler-core-3.5.8.tgz#03ee4a2fa022c9bc3e59f789a1e14593b1e95b10"
@@ -2704,6 +2715,14 @@
     "@vue/compiler-core" "3.5.12"
     "@vue/shared" "3.5.12"
 
+"@vue/compiler-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz#bb1b8758dbc542b3658dda973b98a1c9311a8a58"
+  integrity sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==
+  dependencies:
+    "@vue/compiler-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+
 "@vue/compiler-dom@3.5.8", "@vue/compiler-dom@^3.4.0", "@vue/compiler-dom@^3.4.23":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz#03e4a6bef00a1979613a1db2ab39e9b2dced3373"
@@ -2712,6 +2731,21 @@
     "@vue/compiler-core" "3.5.8"
     "@vue/shared" "3.5.8"
 
+"@vue/compiler-sfc@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz#461f8bd343b5c06fac4189c4fef8af32dea82b46"
+  integrity sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/compiler-core" "3.5.13"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.11"
+    postcss "^8.4.48"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-sfc@3.5.8", "@vue/compiler-sfc@^3.4.23":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-sfc/-/compiler-sfc-3.5.8.tgz#b2091ec01c63ab02a1cd6783224322f245c6a308"
@@ -2750,6 +2784,14 @@
     "@vue/compiler-dom" "3.5.12"
     "@vue/shared" "3.5.12"
 
+"@vue/compiler-ssr@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz#e771adcca6d3d000f91a4277c972a996d07f43ba"
+  integrity sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==
+  dependencies:
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/shared" "3.5.13"
+
 "@vue/compiler-ssr@3.5.8":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/compiler-ssr/-/compiler-ssr-3.5.8.tgz#fbad34f8bbed15aa6e7b9d78324d93af93403145"
@@ -2785,6 +2827,13 @@
     muggle-string "^0.4.1"
     path-browserify "^1.0.1"
 
+"@vue/reactivity@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/reactivity/-/reactivity-3.5.13.tgz#b41ff2bb865e093899a22219f5b25f97b6fe155f"
+  integrity sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==
+  dependencies:
+    "@vue/shared" "3.5.13"
+
 "@vue/reactivity@3.5.8":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/reactivity/-/reactivity-3.5.8.tgz#23e1bceceb9b94b136fa91f11b308e3f712dea6d"
@@ -2792,6 +2841,14 @@
   dependencies:
     "@vue/shared" "3.5.8"
 
+"@vue/runtime-core@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/runtime-core/-/runtime-core-3.5.13.tgz#1fafa4bf0b97af0ebdd9dbfe98cd630da363a455"
+  integrity sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==
+  dependencies:
+    "@vue/reactivity" "3.5.13"
+    "@vue/shared" "3.5.13"
+
 "@vue/runtime-core@3.5.8":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/runtime-core/-/runtime-core-3.5.8.tgz#235251fa40dae61db7becacf6bda5bc6561cbbc5"
@@ -2800,6 +2857,16 @@
     "@vue/reactivity" "3.5.8"
     "@vue/shared" "3.5.8"
 
+"@vue/runtime-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz#610fc795de9246300e8ae8865930d534e1246215"
+  integrity sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==
+  dependencies:
+    "@vue/reactivity" "3.5.13"
+    "@vue/runtime-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+    csstype "^3.1.3"
+
 "@vue/runtime-dom@3.5.8":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/runtime-dom/-/runtime-dom-3.5.8.tgz#9d3a4f4a9a9a0002b085a5e18a2ca16c009cb3ad"
@@ -2810,6 +2877,14 @@
     "@vue/shared" "3.5.8"
     csstype "^3.1.3"
 
+"@vue/server-renderer@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/server-renderer/-/server-renderer-3.5.13.tgz#429ead62ee51de789646c22efe908e489aad46f7"
+  integrity sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
+
 "@vue/server-renderer@3.5.8", "@vue/server-renderer@^3.4.33":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/server-renderer/-/server-renderer-3.5.8.tgz#d6c292409e880db4151223c27fa0d1cd879cc239"
@@ -2823,6 +2898,11 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.5.12.tgz#f9e45b7f63f2c3f40d84237b1194b7f67de192e3"
   integrity sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==
 
+"@vue/shared@3.5.13":
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.5.13.tgz#87b309a6379c22b926e696893237826f64339b6f"
+  integrity sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==
+
 "@vue/shared@3.5.8", "@vue/shared@^3.4.0":
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/@vue/shared/-/shared-3.5.8.tgz#6ef14933872dcc4f7b79fee3aaecf648ff807fed"
@@ -7058,6 +7138,11 @@ picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
   resolved "https://mirrors.cloud.tencent.com/npm/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
   integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
 
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://mirrors.cloud.tencent.com/npm/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -7194,6 +7279,15 @@ postcss@^8.4.23, postcss@^8.4.38, postcss@^8.4.41, postcss@^8.4.43, postcss@^8.4
     picocolors "^1.1.0"
     source-map-js "^1.2.1"
 
+postcss@^8.4.48:
+  version "8.4.49"
+  resolved "https://mirrors.cloud.tencent.com/npm/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://mirrors.cloud.tencent.com/npm/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -7797,6 +7891,19 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+sortablejs-vue3@^1.2.11:
+  version "1.2.11"
+  resolved "https://mirrors.cloud.tencent.com/npm/sortablejs-vue3/-/sortablejs-vue3-1.2.11.tgz#c04f767253a03862a5445d310b335d9fdab71261"
+  integrity sha512-oKOA6N7yu2ktmqYXPHlPTQWbe9G4v16mn5ewogb+Ybc9Bk1Y+MIURrpbgedEv7f9TS5Bptvh81HGjazh5FEyJw==
+  dependencies:
+    sortablejs "^1.15.0"
+    vue "^3.3.7"
+
+sortablejs@^1.15.0:
+  version "1.15.6"
+  resolved "https://mirrors.cloud.tencent.com/npm/sortablejs/-/sortablejs-1.15.6.tgz#ff93699493f5b8ab8d828f933227b4988df1d393"
+  integrity sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://mirrors.cloud.tencent.com/npm/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
@@ -8751,6 +8858,17 @@ vue-tsc@^2.0.26:
     "@vue/language-core" "2.1.6"
     semver "^7.5.4"
 
+vue@^3.3.7:
+  version "3.5.13"
+  resolved "https://mirrors.cloud.tencent.com/npm/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"
+  integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==
+  dependencies:
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-sfc" "3.5.13"
+    "@vue/runtime-dom" "3.5.13"
+    "@vue/server-renderer" "3.5.13"
+    "@vue/shared" "3.5.13"
+
 vue@^3.4.23:
   version "3.5.8"
   resolved "https://mirrors.cloud.tencent.com/npm/vue/-/vue-3.5.8.tgz#7d2fa98ea85228dcb90f897ef5df74df1d5825a1"