chore: update ui

src/components/CodemirrorEditor/CssEditor.vue

@@ -1,57 +1,101 @@
 <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()
 
+const isOpenEditDialog = ref(false)
+const editInputVal = ref(``)
+
+function rename(name: string) {
+  editInputVal.value = name
+  isOpenEditDialog.value = true
+}
+
 function editTabName() {
-  ElMessageBox.prompt(`请输入新的方案名称`, `编辑方案名称`, {
+  if (!(editInputVal.value).trim()) {
-    confirmButtonText: `确认`,
+    toast.error(`新建失败，方案名不可为空`)
-    cancelButtonText: `取消`,
-    inputValue: store.cssContentConfig.active,
-    inputErrorMessage: `不能与现有方案重名`,
-    inputValidator: store.validatorTabName,
-  })
-    .then(({ value }) => {
-      if (!(`${value}`).trim()) {
-        ElMessage.error(`修改失败，方案名不可为空`)
     return
   }
-      store.renameTab(value)
+
-      ElMessage.success(`修改成功~`)
+  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`, {
+    addInputVal.value = `方案${store.cssContentConfig.tabs.length + 1}`
-      confirmButtonText: `确认`,
+    isOpenAddDialog.value = true
-      cancelButtonText: `取消`,
-      inputValue: `方案${store.cssContentConfig.tabs.length + 1}`,
-      inputErrorMessage: `不能与现有方案重名`,
-      inputValidator: store.validatorTabName,
-    })
-      .then(({ value }) => {
-        if (!(`${value}`).trim()) {
-          ElMessage.error(`新建失败，方案名不可为空`)
     return
   }
-        store.addCssContentTab(value)
+
-        ElMessage.success(`新建成功~`)
+  if (action === `remove`) {
-      })
+    delTargetName.value = targetName
+    isOpenDelTabConfirmDialog.value = true
   }
-  else if (action === `remove`) {
+}
+
+function delTab() {
   const tabs = store.cssContentConfig.tabs
   if (tabs.length === 1) {
-      ElMessage.warning(`至少保留一个方案`)
+    toast.warning(`至少保留一个方案`)
     return
   }
+
   let activeName = store.cssContentConfig.active
-    if (activeName === targetName) {
+  if (activeName === delTargetName.value) {
     tabs.forEach((tab, index) => {
-        if (tab.name === targetName) {
+      if (tab.name === delTargetName.value) {
         const nextTab = tabs[index + 1] || tabs[index - 1]
         if (nextTab) {
           activeName = nextTab.name
@@ -61,8 +105,9 @@ function handleTabsEdit(targetName: string, action: string) {
   }
 
   store.tabChanged(activeName)
-    store.cssContentConfig.tabs = tabs.filter(tab => tab.name !== targetName)
+  store.cssContentConfig.tabs = tabs.filter(tab => tab.name !== delTargetName.value)
-  }
+
+  toast.success(`删除成功~`)
 }
 </script>
 
@@ -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>

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'

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>
+            <Button @click="store.resetStyleConfirm">
-              <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>
           </div>
         </div>
       </PopoverContent>

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>

src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

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(
+    isOpenConfirmDialog.value = true
-    //   `此操作将丢失本地自定义样式，是否继续？`,
-    //   `提示`,
-    //   {
-    //     confirmButtonText: `确定`,
-    //     cancelButtonText: `取消`,
-    //     type: `warning`,
-    //     center: true,
-    //   },
-    // )
-    //   .then(() => {
-        resetStyle()
-        toast.success(`样式重置成功~`)
-      // })
-      // .catch(() => {
-      //   (editor.value!).focus()
-      // })
   }
 
   return {
@@ -430,7 +418,9 @@ export const useStore = defineStore(`store`, () => {
 
     importMarkdownContent,
 
+    isOpenConfirmDialog,
     resetStyleConfirm,
+    resetStyle,
     editorContent,
 
     cssContentConfig,

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>