优化多个组件中的按钮样式

src/components/dialog/PluginMarketSettingDialog.vue

@@ -2,6 +2,7 @@
 import api from '@/api'
 import { useToast } from 'vue-toast-notification'
 import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
 
 // 国际化
 const { t } = useI18n()
@@ -9,6 +10,16 @@ const $toast = useToast()
 
 // 插件仓库设置字符串
 const repoString = ref('')
+// 用于显示的仓库地址数组
+const repoArray = ref<string[]>([])
+
+// 计算属性：在数组和换行符分隔的字符串之间转换
+const displayRepos = computed({
+  get: () => repoArray.value.join('\n'),
+  set: (value: string) => {
+    repoArray.value = value.split('\n').filter((repo: string) => repo.trim() !== '')
+  },
+})
 
 // 定义事件
 const emit = defineEmits(['save', 'close'])
@@ -17,7 +28,10 @@ const emit = defineEmits(['save', 'close'])
 async function queryMarketRepoSetting() {
   try {
     const result: { [key: string]: any } = await api.get('system/setting/PLUGIN_MARKET')
-    if (result && result.data && result.data.value) repoString.value = result.data.value
+    if (result && result.data && result.data.value) {
+      repoString.value = result.data.value
+      repoArray.value = result.data.value.split(',').filter((repo: string) => repo.trim() !== '')
+    }
   } catch (error) {
     console.log(error)
   }
@@ -26,8 +40,9 @@ async function queryMarketRepoSetting() {
 // 保存设置
 async function saveHandle() {
   try {
-    // 用户名密码
-    const result: { [key: string]: any } = await api.post('system/setting/PLUGIN_MARKET', repoString.value)
+    // 将数组转换为逗号分隔的字符串
+    const repoStringToSave = repoArray.value.join(',')
+    const result: { [key: string]: any } = await api.post('system/setting/PLUGIN_MARKET', repoStringToSave)
 
     if (result.success) {
       $toast.success(t('dialog.pluginMarketSetting.saveSuccess'))
@@ -53,9 +68,11 @@ onMounted(() => {
         </VCardTitle>
         <VDialogCloseBtn @click="emit('close')" />
       </VCardItem>
+      <VDivider />
+
       <VCardText class="pt-2">
         <VTextarea
-          v-model="repoString"
+          v-model="displayRepos"
           :placeholder="t('dialog.pluginMarketSetting.repoPlaceholder')"
           :hint="t('dialog.pluginMarketSetting.repoHint')"
           persistent-hint
@@ -63,7 +80,7 @@ onMounted(() => {
       </VCardText>
       <VCardActions>
         <VSpacer />
-        <VBtn variant="elevated" @click="saveHandle" prepend-icon="mdi-content-save-check" class="px-5 me-3">
+        <VBtn @click="saveHandle" prepend-icon="mdi-content-save-check" class="px-5 me-3">
           {{ t('dialog.pluginMarketSetting.save') }}
         </VBtn>
       </VCardActions>