style: update dialog (#402)

doocs · Sep 15, 2024 · d3a7d08 · d3a7d08
1 parent 442beb8
commit d3a7d08
Show file tree

Hide file tree

Showing 43 changed files with 1,524 additions and 861 deletions.
diff --git a/src/assets/index.css b/src/assets/index.css
@@ -5,66 +5,63 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 0 0% 3.9%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 0 0% 3.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
 
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 222.2 84% 4.9%;
+    --destructive-foreground: 0 0% 98%;
 
+    --border:0 0% 89.8%;
+    --input:0 0% 89.8%;
+    --ring:0 0% 3.9%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --background:0 0% 3.9%;
+    --foreground:0 0% 98%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --card:0 0% 3.9%;
+    --card-foreground:0 0% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --popover:0 0% 3.9%;
+    --popover-foreground:0 0% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+    --primary:0 0% 98%;
+    --primary-foreground:0 0% 9%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary:0 0% 14.9%;
+    --secondary-foreground:0 0% 98%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --muted:0 0% 14.9%;
+    --muted-foreground:0 0% 63.9%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent:0 0% 14.9%;
+    --accent-foreground:0 0% 98%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive:0 62.8% 30.6%;
+    --destructive-foreground:0 0% 98%;
 
-    --ring: 212.7 26.8% 83.9%;
+    --border:0 0% 14.9%;
+    --input:0 0% 14.9%;
+    --ring:0 0% 83.1%;
   }
 }
 

diff --git a/src/assets/less/app.less b/src/assets/less/app.less
@@ -71,7 +71,6 @@ section {
   justify-content: center;
   padding: 0;
   overflow-y: scroll;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .hint {
@@ -87,8 +86,6 @@ section {
   font-size: 14px;
   box-sizing: border-box;
   outline: none;
-  color: var(--el-text-color-regular);
-  box-shadow: var(--el-box-shadow);
 }
 
 .preview table {

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
@@ -1,35 +1,13 @@
-@nightBgColor: #333333;
-@nightPreviewColor: #1e1e1e;
-@nightHeaderColor: #3c3c3c;
-@nightCodeMirrorColor: #1e1e1e;
+@nightPreviewColor: #191919;
+@nightCodeMirrorColor: #191919;
 @nightActiveCodeMirrorColor: gray;
 @nightFontColor: gray;
 @nightLinkColor: #8e9eb9;
 @nightLinkTextColor: #84868b;
-@nightWhiteColor: #f0f0f0;
-@nightButtonBg: #1e1e1e;
-@nightButtonHoverColor: #84868b;
 @nightLineColor: #84868b;
 
 .dark {
   .container {
-    background-color: @nightBgColor;
-
-    .CodeMirror {
-      caret-color: @nightFontColor;
-      color: @nightFontColor;
-      background-color: @nightCodeMirrorColor;
-      box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
-
-      .CodeMirror-cursor {
-        border-left: 1px solid @nightLineColor;
-      }
-
-      .CodeMirror-activeline-background {
-        background-color: #3e3e3e!important;
-      }
-    }
-
     .output_night {
       .preview {
         background-color: @nightPreviewColor;
@@ -46,20 +24,6 @@
       }
     }
 
-    .cm-s-xq-light span.cm-variable-2,
-
-    .cm-s-xq-light .CodeMirror-activeline-background {
-      background-color: transparent;
-    }
-
-    .cm-s-xq-light span.cm-string {
-      color: @nightLinkColor;
-    }
-
-    .cm-s-xq-light span.cm-link {
-      color: @nightLinkTextColor;
-    }
-
     ::-webkit-scrollbar {
       background-color: @nightCodeMirrorColor;
     }
@@ -69,7 +33,6 @@
 .CodeMirror {
   padding-bottom: 0;
   height: 100% !important;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   font-size: 14px;
   font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue',
     sans-serif !important;

diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
@@ -67,7 +67,7 @@ function handleTabsEdit(targetName, action) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col">
+    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
       <el-tabs
         v-model="store.cssContentConfig.active"
         type="border-card"

diff --git a/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue b/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
@@ -1,4 +1,12 @@
 <script setup>
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
 const props = defineProps({
   visible: {
     type: Boolean,
@@ -8,6 +16,12 @@ const props = defineProps({
 
 const emit = defineEmits([`close`])
 
+function onUpdate(val) {
+  if (!val) {
+    emit(`close`)
+  }
+}
+
 const links = [
   { label: `GitHub 仓库`, url: `https://github.com/doocs/md` },
   { label: `Gitee 仓库`, url: `https://gitee.com/doocs/md` },
@@ -20,34 +34,30 @@ function onRedirect(url) {
 </script>
 
 <template>
-  <el-dialog
-    title="关于"
-    class="about__dialog"
-    :model-value="props.visible"
-    width="520"
-    center
-    @close="emit('close')"
-  >
-    <div class="text-center">
-      <h3>一款高度简洁的微信 Markdown 编辑器</h3>
-      <p>扫码关注公众号 Doocs，原创技术文章第一时间推送！</p>
-      <img
-        class="mx-auto my-5"
-        src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png"
-        alt="Doocs Markdown 编辑器"
-        style="width: 40%"
-      >
-    </div>
-    <template #footer>
-      <el-button
-        v-for="link in links"
-        :key="link.url"
-        type="primary"
-        plain
-        @click="onRedirect(link.url)"
-      >
-        {{ link.label }}
-      </el-button>
-    </template>
-  </el-dialog>
+  <Dialog :open="props.visible" @update:open="onUpdate">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>关于</DialogTitle>
+      </DialogHeader>
+      <div class="text-center">
+        <h3>一款高度简洁的微信 Markdown 编辑器</h3>
+        <p>扫码关注公众号 Doocs，原创技术文章第一时间推送！</p>
+        <img
+          class="mx-auto my-5"
+          src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png"
+          alt="Doocs Markdown 编辑器"
+          style="width: 40%"
+        >
+      </div>
+      <DialogFooter class="sm:justify-evenly">
+        <Button
+          v-for="link in links"
+          :key="link.url"
+          @click="onRedirect(link.url)"
+        >
+          {{ link.label }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
 </template>
diff --git a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
@@ -1,49 +1,27 @@
 <script setup>
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-
 import { useStore } from '@/stores'
 
-const props = defineProps([`isOpen`, `clickTrigger`, `openDropdown`, `updateOpen`])
-
 const store = useStore()
 
-const {
-  toggleShowInsertFormDialog,
-  toggleShowUploadImgDialog,
-} = store
+const { toggleShowInsertFormDialog, toggleShowUploadImgDialog } = store
 </script>
 
 <template>
-  <DropdownMenu :open="props.isOpen" @update:open="props.updateOpen">
-    <DropdownMenuTrigger
-      class="flex items-center p-2 px-4 hover:bg-gray-2 dark:hover:bg-stone-9"
-      :class="{
-        'bg-gray-2': props.isOpen,
-        'dark:bg-stone-9': props.isOpen,
-      }"
-      @click="props.clickTrigger()"
-      @mouseenter="props.openDropdown()"
-    >
-      编辑
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="start">
-      <DropdownMenuItem @click="toggleShowUploadImgDialog()">
+  <MenubarMenu>
+    <MenubarTrigger> 编辑 </MenubarTrigger>
+    <MenubarContent align="start">
+      <MenubarItem @click="toggleShowUploadImgDialog()">
         <el-icon class="mr-2 h-4 w-4">
           <ElIconUpload />
         </el-icon>
         上传图片
-      </DropdownMenuItem>
-      <DropdownMenuItem @click="toggleShowInsertFormDialog()">
+      </MenubarItem>
+      <MenubarItem @click="toggleShowInsertFormDialog()">
         <el-icon class="mr-2 h-4 w-4">
           <ElIconGrid />
         </el-icon>
         插入表格
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
+      </MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
 </template>