head

src/services/theme.ts

@@ -1,25 +1,47 @@
 export const themes: any = {
   dark: {
-    "--color-primary": "#4583ff",
-    "--color-primary-hover": "#1677ff",
-    "--color-primary-disabled": "#bae7ff",
-    "--color-background": "#1e2430",
-    "--color-background-active": "#161f2c",
-    "--color-background-hover": "#181f29",
-    "--color-background-input": "#303746",
-    "--color-background-editor": "#0f151f",
-    "--color-background-popup": "#303746",
+    '--color': '#bdc7db',
+    '--color-title': '#e3e8f4',
+    '--color-desc': '#617b91',
+    '--color-gray': '#4f5b75',
+    '--color-background': '#1e2430',
+    '--color-background-active': '#161f2c',
+    '--color-background-hover': '#181f29',
+    '--color-background-input': '#303746',
+    '--color-background-popup': '#303746',
+    '--color-background-popup-hover': '#454f64',
+    '--color-border': '#000000',
+    '--color-border-input': '#535f79',
+    '--color-border-input-hover': '#454f64',
+    '--color-scrollbar': '#dad7d7',
+    '--color-scrollbar-hover': '#e5e5e5',
+    '--td-component-border': '#42516c',
+    '--color-background-editor': '#181b24',
+    '--color-border-editor': '#1e2430',
+    '--color-border-popup': 'transparent',
+    '--shadow-popup': 'none',
   },
   light: {
-    "--color-primary": "#1890ff",
-    "--color-primary-hover": "#1791ff",
-    "--color-primary-disabled": "#bae7ff",
-    "--color-background": "#fff",
-    "--color-background-active": "#161f2c",
-    "--color-background-hover": "#181f29",
-    "--color-background-input": "#303746",
-    "--color-background-editor": "#0f151f",
-    "--color-background-popup": "#303746",
+    '--color': '#595959',
+    '--color-title': '#262626',
+    '--color-desc': '#8c8c8c',
+    '--color-gray': '#bfbfbf',
+    '--color-background': '#ffffff',
+    '--color-background-active': '#f7f8f9',
+    '--color-background-hover': '#181f29',
+    '--color-background-input': '#303746',
+    '--color-background-popup': '#ffffff',
+    '--color-background-popup-hover': '#454f64',
+    '--color-border': '#000000',
+    '--color-border-input': '#535f79',
+    '--color-border-input-hover': '#454f64',
+    '--color-scrollbar': '#dad7d7',
+    '--color-scrollbar-hover': '#e5e5e5',
+    '--td-component-border': '#42516c',
+    '--color-background-editor': '#181b24',
+    '--color-border-editor': '#1e2430',
+    '--color-border-popup': '#dddddd',
+    '--shadow-popup': '0 5px 8px 0px rgb(0 0 0 / 10%)',
   },
 };
 

src/styles/tdesign.css

@@ -91,7 +91,7 @@
 }
 
 .t-dropdown {
-  border-color: transparent;
+  border-color: var(--color-border-popup);
 }
 
 .t-dropdown__menu-column {
@@ -169,7 +169,7 @@
   padding: 0 !important;
   margin-top: 0 !important;
   border-radius: var(--border-radius);
-  box-shadow: none;
+  box-shadow: var(--shadow-popup);
   background-color: var(--color-background-popup);
 
   .t-color-picker__format {

src/styles/var.css

@@ -29,7 +29,6 @@
   --color-background-active: #161f2c;
   --color-background-hover: #181f29;
   --color-background-input: #303746;
-  --color-background-editor: #0f151f;
   --color-background-popup: #303746;
   --color-background-popup-hover: #454f64;
 
@@ -37,6 +36,7 @@
   --color-sub-border: var(--color-background-input);
   --color-border-input: #535f79;
   --color-border-input-hover: #454f64;
+  --color-border-popup: transparent;
 
   --color-scrollbar: #dad7d7;
   --color-scrollbar-hover: #e5e5e5;
@@ -46,6 +46,7 @@
   --shadow: 0px 2px 6px 0px rgba(0, 10, 38, 0.1);
   --shadow-hover: 0px 4px 8px 0px rgba(0, 10, 38, 0.3);
   --shadow-panel: 0px 2px 6px 0px rgb(0 10 38 / 4%);
+  --shadow-popup: none;
 
   --td-bg-color-component-hover: var(--color-border-input-hover);
   --td-bg-color-component-active: var(--color-background-input);

src/views/components/Header.vue

@@ -114,13 +114,25 @@
             </div>
           </a>
         </t-dropdown-item>
-        <t-dropdown-item>
+        <t-dropdown-item divider="true">
           <a @click="onPaste">
             <div class="flex">
               粘贴 <span class="flex-grow"></span> Ctrl + V
             </div>
           </a>
         </t-dropdown-item>
+        <t-dropdown-item>
+          <a @click="onAll">
+            <div class="flex">
+              全选 <span class="flex-grow"></span> Ctrl + A
+            </div>
+          </a>
+        </t-dropdown-item>
+        <t-dropdown-item>
+          <a @click="onDelete">
+            <div class="flex">删除 <span class="flex-grow"></span> DELETE</div>
+          </a>
+        </t-dropdown-item>
       </t-dropdown-menu>
     </t-dropdown>
     <t-dropdown
@@ -939,6 +951,14 @@ const onPaste = () => {
   meta2d.paste();
 };
 
+const onAll = () => {
+  // todo
+};
+
+const onDelete = () => {
+  meta2d.delete();
+};
+
 const onToggleAnchor = () => {
   //取消连线状态
   // meta2d.store.options.disableAnchor = false;

src/views/components/View.vue

@@ -205,34 +205,22 @@
       </t-tooltip>
 
       <div class="flex-grow"></div>
-      <t-tooltip
-        :content="isLock === 2 ? '锁定' : isLock === 1 ? '预览' : '编辑'"
-        placement="bottom"
-      >
+      <t-tooltip :content="isLock ? '浏览模式' : '编辑模式'" placement="bottom">
         <a>
-          <!-- <t-icon name="caret-right" /> -->
           <svg
-            v-if="isLock === 1"
+            v-if="isLock"
             class="l-icon"
             aria-hidden="true"
-            @click="onLock"
+            @click="onLock(0)"
           >
             <use xlink:href="#l-lock"></use>
           </svg>
-          <svg
-            v-else-if="isLock === 2"
-            class="l-icon"
-            aria-hidden="true"
-            @click="onLock"
-          >
-            <use xlink:href="#l-wufayidong"></use>
-          </svg>
-          <svg v-else class="l-icon" aria-hidden="true" @click="onLock">
+          <svg v-else class="l-icon" aria-hidden="true" @click="onLock(1)">
             <use xlink:href="#l-unlock"></use>
           </svg>
         </a>
       </t-tooltip>
-      <t-tooltip content="运行（在新页面全屏查看）" placement="bottom">
+      <t-tooltip content="运行（查看）" placement="bottom">
         <a @click="preview"><t-icon name="caret-right" /></a>
       </t-tooltip>
 
@@ -830,14 +818,9 @@ const onAddShape = (event: DragEvent | MouseEvent, name: string) => {
 };
 
 const isLock = ref(0);
-function onLock() {
-  !isLock.value && (isLock.value = 0);
-  if (isLock.value === LockState.DisableMove) {
-    isLock.value = LockState.None;
-  } else {
-    isLock.value++;
-  }
-  meta2d.lock(isLock.value);
+function onLock(lock: number) {
+  isLock.value = lock;
+  meta2d.lock(lock);
   meta2d.hideInput();
 }