修复配置值文本过长溢出问题

HalcyonAlcedo · Jun 27, 2024 · ddfc6f1 · ddfc6f1
1 parent c929c79
commit ddfc6f1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/views/config/KarinConfigPage.vue b/src/views/config/KarinConfigPage.vue
@@ -127,6 +127,9 @@ getConfigs()
           ></v-pagination>
         </div>
       </template>
+      <template v-slot:item.value="{ item }">
+        <p class="auto-wrap-text">{{ item.value }}</p>
+      </template>
       <template v-slot:item.actions="{ item }">
         <v-icon size="small" @click="deleteItem(item)">
           mdi-delete
@@ -160,3 +163,11 @@ getConfigs()
     </v-list>
   </v-dialog>
 </template>
+
+<style scoped>
+.auto-wrap-text {
+  max-width: 60vw;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+</style>
diff --git a/src/views/config/PluginConfigPage.vue b/src/views/config/PluginConfigPage.vue
@@ -193,9 +193,9 @@ onMounted(() => {
 
 <template>
   <BaseBreadcrumb :title="route.params.plugin" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
-  <v-banner v-if="changeConfig.length > 0" elevation="2" sticky style="z-index: 100;">
+  <v-banner v-if="changeConfig.length > 0" elevation="2" sticky style="z-index: 100">
     <v-data-table v-model="setConfig" v-model:page="page" :headers="headers" :items="changeConfig" items-per-page="5"
-      show-select return-object>
+    show-select return-object>
       <template v-slot:top>
         <v-toolbar flat>
           <v-toolbar-title>确认修改项</v-toolbar-title>
@@ -214,6 +214,9 @@ onMounted(() => {
           <v-pagination v-model="page" :length="pageCount"></v-pagination>
         </div>
       </template>
+      <template v-slot:item.value="{ item }">
+        <p class="auto-wrap-text">{{ item.value }}</p>
+      </template>
       <template v-slot:item.actions="{ item }">
         <v-icon size="small" @click="deleteItem(item)">
           mdi-delete
@@ -254,3 +257,11 @@ onMounted(() => {
     </v-list>
   </v-dialog>
 </template>
+
+<style scoped>
+.auto-wrap-text {
+  max-width: 60vw;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+</style>