feat(market): confirm remove config when uninstall plugin

koishijs · Dec 25, 2023 · 3975544 · 3975544
1 parent e27cb0a
commit 3975544
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/plugins/market/client/components/confirm.vue b/plugins/market/client/components/confirm.vue
@@ -17,24 +17,32 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(value, key) in config.override" :key="key">
-          <td>{{ key }}</td>
-          <td>{{ store.dependencies?.[key]?.resolved || '未安装' }}</td>
+        <tr v-for="(version, name) in config.override" :key="name">
+          <td>{{ name }}</td>
+          <td>{{ store.dependencies?.[name]?.resolved || '未安装' }}</td>
           <td class="arrow"><span><k-icon name="arrow-right"></k-icon></span></td>
-          <td>{{ value || '移除依赖' }}</td>
+          <td>{{ version || '移除依赖' }}</td>
         </tr>
       </tbody>
     </table>
     <template #footer>
-      <el-button @click="showConfirm = false">取消</el-button>
-      <el-button type="danger" @click="clear">丢弃</el-button>
-      <el-button type="primary" @click="confirm">确定</el-button>
+      <div class="left">
+        <el-checkbox :disabled="!hasRemove" v-model="config.removeConfig">
+          为新卸载的依赖删除配置
+        </el-checkbox>
+      </div>
+      <div class="right">
+        <el-button @click="showConfirm = false">取消</el-button>
+        <el-button type="danger" @click="clear">丢弃</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </div>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
 
+import { computed } from 'vue'
 import { store, useContext } from '@koishijs/client'
 import { showConfirm, install } from './utils'
 import { config } from '../utils'
@@ -46,26 +54,38 @@ function clear() {
   config.value.override = {}
 }
 
+const hasRemove = computed(() => {
+  return Object.values(config.value.override).some(version => !version)
+})
+
 function confirm() {
   showConfirm.value = false
   return install(config.value.override, async () => {
     for (const [name, value] of Object.entries(config.value.override)) {
-      if (!value) continue
+      if (!value || store.dependencies?.[name]?.resolved) continue
       ctx.configWriter?.ensure(name, true)
     }
   })
 }
 
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+
+.confirm-panel {
+  td.arrow {
+    padding: 0;
 
-td.arrow {
-  padding: 0;
+    span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
 
-  span {
+  .el-dialog__footer {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
   }
 }

diff --git a/plugins/market/client/components/install.vue b/plugins/market/client/components/install.vue
@@ -63,18 +63,26 @@
         <el-button @click="active = ''">取消</el-button>
         <el-button v-if="local" type="primary" @click="configure()">配置</el-button>
         <template v-if="workspace">
-          <el-button v-if="current || config.bulk && config.override[active]" @click="installDep('')">移除</el-button>
+          <el-button v-if="current || config.bulk && config.override[active]" @click="installDep('', true)">移除</el-button>
           <el-button v-else @click="installDep(version)" :disabled="unchanged">添加</el-button>
         </template>
         <template v-else-if="data">
-          <el-button v-if="current || store.dependencies[active] || config.bulk && config.override[active]" @click="installDep('')" type="danger">移除</el-button>
+          <el-button v-if="current || store.dependencies[active] || config.bulk && config.override[active]" @click="installDep('', true)" type="danger">卸载</el-button>
           <el-button :type="result" @click="installDep(version)" :disabled="unchanged">
             {{ current ? '更新' : store.dependencies?.[active] ? '修复' : '安装' }}
           </el-button>
         </template>
       </div>
     </template>
   </el-dialog>
+  <el-dialog v-model="confirmRemoveConfig" destroy-on-close>
+    检测到你正在卸载一个已配置的插件，是否同时删除其配置？
+    <template #footer>
+      <el-button @click="confirmRemoveConfig = false">取消</el-button>
+      <el-button type="danger" @click="installDep('', false, true)">删除</el-button>
+      <el-button type="primary" @click="installDep('', false, false)">保留</el-button>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -86,18 +94,26 @@ import { active, config } from '../utils'
 import { parse } from 'semver'
 
 const ctx = useContext()
+const confirmRemoveConfig = ref(false)
 
-function installDep(version: string) {
+function installDep(version: string, checkConfig = false, removeConfig = false) {
   const target = active.value
   if (!target) return
   if (config.value.bulk) {
     config.value.override[target] = version
     active.value = ''
     return
   }
+  if (checkConfig && ctx.configWriter?.get(target)?.length) {
+    confirmRemoveConfig.value = true
+    return
+  }
   install({ [target]: version }, async () => {
-    if (!version) return
-    ctx.configWriter?.ensure(target)
+    if (version) {
+      ctx.configWriter?.ensure(target)
+    } else if (removeConfig) {
+      ctx.configWriter?.remove(target)
+    }
   })
 }
 

diff --git a/plugins/market/client/utils.ts b/plugins/market/client/utils.ts
@@ -5,13 +5,15 @@ import { gt } from 'semver'
 interface ManagerConfig {
   prefix: string
   bulk?: boolean
+  removeConfig?: boolean
   override: Dict<string>
   hideWorkspace?: boolean
 }
 
 export const config: Ref<ManagerConfig> = useStorage<ManagerConfig>('manager', 2, () => ({
   prefix: '^',
   bulk: false,
+  removeConfig: false,
   override: {},
   hideWorkspace: true,
 }))