chore: update ui

2025-02-10 16:55:49 +08:00 · 2024-12-05 19:28:26 +08:00 · 2024-12-05 19:28:26 +08:00 · d4677eb33f
commit d4677eb33f
parent fd24cb67a2
7 changed files with 220 additions and 108 deletions
--- a/src/components/CodemirrorEditor/CssEditor.vue
+++ b/src/components/CodemirrorEditor/CssEditor.vue
@ -1,69 +1,114 @@
 <script setup lang="ts">
-import { useDisplayStore, useStore } from '@/stores'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'

-import { ElMessage, ElMessageBox } from 'element-plus'
+import { useDisplayStore, useStore } from '@/stores'
+import { ref } from 'vue'
+import { toast } from 'vue-sonner'

 const store = useStore()
 const displayStore = useDisplayStore()

-function editTabName() {
-  ElMessageBox.prompt(`请输入新的方案名称`, `编辑方案名称`, {
-    confirmButtonText: `确认`,
-    cancelButtonText: `取消`,
-    inputValue: store.cssContentConfig.active,
-    inputErrorMessage: `不能与现有方案重名`,
-    inputValidator: store.validatorTabName,
-  })
-    .then(({ value }) => {
-      if (!(`${value}`).trim()) {
-        ElMessage.error(`修改失败，方案名不可为空`)
-        return
-      }
-      store.renameTab(value)
-      ElMessage.success(`修改成功~`)
-    })
+const isOpenEditDialog = ref(false)
+const editInputVal = ref(``)
+
+function rename(name: string) {
+  editInputVal.value = name
+  isOpenEditDialog.value = true
 }

+function editTabName() {
+  if (!(editInputVal.value).trim()) {
+    toast.error(`新建失败，方案名不可为空`)
+    return
+  }
+
+  if (!store.validatorTabName(editInputVal.value)) {
+    toast.error(`不能与现有方案重名`)
+    return
+  }
+  store.renameTab(editInputVal.value)
+  isOpenEditDialog.value = false
+  toast.success(`修改成功~`)
+}
+
+const isOpenAddDialog = ref(false)
+
+const addInputVal = ref(``)
+
+function addTab() {
+  if (!(addInputVal.value).trim()) {
+    toast.error(`新建失败，方案名不可为空`)
+    return
+  }
+
+  if (!store.validatorTabName(addInputVal.value)) {
+    toast.error(`不能与现有方案重名`)
+    return
+  }
+  store.addCssContentTab(addInputVal.value)
+  isOpenAddDialog.value = false
+  toast.success(`新建成功~`)
+}
+
+const isOpenDelTabConfirmDialog = ref(false)
+const delTargetName = ref(``)
+
 function handleTabsEdit(targetName: string, action: string) {
  if (action === `add`) {
-    ElMessageBox.prompt(`请输入方案名称`, `新建自定义 CSS`, {
-      confirmButtonText: `确认`,
-      cancelButtonText: `取消`,
-      inputValue: `方案${store.cssContentConfig.tabs.length + 1}`,
-      inputErrorMessage: `不能与现有方案重名`,
-      inputValidator: store.validatorTabName,
-    })
-      .then(({ value }) => {
-        if (!(`${value}`).trim()) {
-          ElMessage.error(`新建失败，方案名不可为空`)
-          return
-        }
-        store.addCssContentTab(value)
-        ElMessage.success(`新建成功~`)
-      })
+    addInputVal.value = `方案${store.cssContentConfig.tabs.length + 1}`
+    isOpenAddDialog.value = true
+    return
  }
-  else if (action === `remove`) {
-    const tabs = store.cssContentConfig.tabs
-    if (tabs.length === 1) {
-      ElMessage.warning(`至少保留一个方案`)
-      return
-    }
-    let activeName = store.cssContentConfig.active
-    if (activeName === targetName) {
-      tabs.forEach((tab, index) => {
-        if (tab.name === targetName) {
-          const nextTab = tabs[index + 1] || tabs[index - 1]
-          if (nextTab) {
-            activeName = nextTab.name
-          }
-        }
-      })
-    }

-    store.tabChanged(activeName)
-    store.cssContentConfig.tabs = tabs.filter(tab => tab.name !== targetName)
+  if (action === `remove`) {
+    delTargetName.value = targetName
+    isOpenDelTabConfirmDialog.value = true
  }
 }
+
+function delTab() {
+  const tabs = store.cssContentConfig.tabs
+  if (tabs.length === 1) {
+    toast.warning(`至少保留一个方案`)
+    return
+  }
+
+  let activeName = store.cssContentConfig.active
+  if (activeName === delTargetName.value) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === delTargetName.value) {
+        const nextTab = tabs[index + 1] || tabs[index - 1]
+        if (nextTab) {
+          activeName = nextTab.name
+        }
+      }
+    })
+  }
+
+  store.tabChanged(activeName)
+  store.cssContentConfig.tabs = tabs.filter(tab => tab.name !== delTargetName.value)
+
+  toast.success(`删除成功~`)
+}
 </script>

 <template>
@ -87,7 +132,7 @@ function handleTabsEdit(targetName: string, action: string) {
            <el-icon
              v-if="store.cssContentConfig.active === item.name"
              class="ml-1"
-              @click="editTabName()"
+              @click="rename(item.name)"
            >
              <ElIconEditPen />
            </el-icon>
@ -99,6 +144,65 @@ function handleTabsEdit(targetName: string, action: string) {
        type="textarea"
        placeholder="Your custom css here."
      />
+
+      <!-- 新增弹窗 -->
+      <Dialog v-model:open="isOpenAddDialog">
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>新建自定义 CSS</DialogTitle>
+            <DialogDescription>
+              请输入方案名称
+            </DialogDescription>
+          </DialogHeader>
+          <Input v-model="addInputVal" />
+          <DialogFooter>
+            <Button variant="outline" @click="isOpenAddDialog = false">
+              取消
+            </Button>
+            <Button @click="addTab()">
+              保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <!-- 重命名弹窗 -->
+      <Dialog v-model:open="isOpenEditDialog">
+        <DialogContent class="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>编辑方案名称</DialogTitle>
+            <DialogDescription>
+              请输入新的方案名称
+            </DialogDescription>
+          </DialogHeader>
+          <Input v-model="editInputVal" />
+          <DialogFooter>
+            <Button variant="outline" @click="isOpenEditDialog = false">
+              取消
+            </Button>
+            <Button @click="editTabName">
+              保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog v-model:open="isOpenDelTabConfirmDialog">
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>提示</AlertDialogTitle>
+            <AlertDialogDescription>
+              此操作将删除该自定义方案，是否继续？
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction @click="delTab">
+              确认
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
    </el-col>
  </transition>
 </template>
--- a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
@ -12,7 +12,6 @@ import {
  legendOptions,
  themeOptions,
 } from '@/config'
-
 import { useDisplayStore, useStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@ -1,15 +1,4 @@
 <script setup lang="ts">
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import {
  Menubar,
@ -495,30 +484,9 @@ function customStyle() {
          </div>
          <div class="space-y-2">
            <h2>样式配置</h2>
-            <div>
-              <AlertDialog>
-                <AlertDialogTrigger as-child>
-<!--                  <Button variant="outline">-->
-                  <Button>
-                    重置
-                  </Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>提示</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      此操作将丢失本地自定义样式，是否继续？
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>取消</AlertDialogCancel>
-                    <AlertDialogAction @click="store.resetStyleConfirm()">
-                      确认
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            </div>
+            <Button @click="store.resetStyleConfirm">
+              重置
+            </Button>
          </div>
        </div>
      </PopoverContent>
--- a/src/components/ui/input/Input.vue
+++ b/src/components/ui/input/Input.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
--- a/src/components/ui/input/index.ts
+++ b/src/components/ui/input/index.ts
@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@ -265,6 +265,8 @@ export const useStore = defineStore(`store`, () => {

    updateCss()
    editorRefresh()
+
+    toast.success(`样式重置成功~`)
  }

  // 为函数添加刷新编辑器的功能
@ -370,25 +372,11 @@ export const useStore = defineStore(`store`, () => {
    body.removeChild(input)
  }

+  const isOpenConfirmDialog = ref(false)
+
  // 重置样式
  const resetStyleConfirm = () => {
-    // ElMessageBox.confirm(
-    //   `此操作将丢失本地自定义样式，是否继续？`,
-    //   `提示`,
-    //   {
-    //     confirmButtonText: `确定`,
-    //     cancelButtonText: `取消`,
-    //     type: `warning`,
-    //     center: true,
-    //   },
-    // )
-    //   .then(() => {
-        resetStyle()
-        toast.success(`样式重置成功~`)
-      // })
-      // .catch(() => {
-      //   (editor.value!).focus()
-      // })
+    isOpenConfirmDialog.value = true
  }

  return {
@ -430,7 +418,9 @@ export const useStore = defineStore(`store`, () => {

    importMarkdownContent,

+    isOpenConfirmDialog,
    resetStyleConfirm,
+    resetStyle,
    editorContent,

    cssContentConfig,
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@ -5,6 +5,16 @@ import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
 import UploadImgDialog from '@/components/CodemirrorEditor/UploadImgDialog.vue'
 import RunLoading from '@/components/RunLoading.vue'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import {
  ContextMenu,
  ContextMenuContent,
@ -13,7 +23,6 @@ import {
  ContextMenuShortcut,
  ContextMenuTrigger,
 } from '@/components/ui/context-menu'
-
 import { altKey, altSign, ctrlKey, shiftKey, shiftSign } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
 import {
@ -128,7 +137,7 @@ function beforeUpload(file: File) {
  // validate image
  const checkResult = checkImage(file)
  if (!checkResult.ok) {
-    toast.error(checkResult.msg)
+    toast.error(checkResult.msg!)
    return false
  }

@ -461,6 +470,23 @@ onMounted(() => {
    <InsertFormDialog />

    <RunLoading />
+
+    <AlertDialog v-model:open="store.isOpenConfirmDialog">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>提示</AlertDialogTitle>
+          <AlertDialogDescription>
+            此操作将丢失本地自定义样式，是否继续？
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction @click="store.resetStyle()">
+            确认
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
  </div>
 </template>
				`@ -0,0 +1 @@`
				`export { default as Input } from './Input.vue'`