dnhyxc-ui-vue 1.0.0

package/packages/components/monaco/src/index.scss

@@ -0,0 +1,235 @@
+.n-monaco {
+  position: relative;
+  height: 100%;
+  border-radius: 5px;
+  box-sizing: border-box;
+  box-shadow: 0 0 5px 0 #ccc;
+  // box-shadow: 0 0 5px 0 var(--card-shadow);
+  overflow: hidden;
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    background-color: #fff;
+    border-bottom: 1px solid #ccc;
+    // border-bottom: 1px solid var(--chat-border-color);
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    .create-action {
+      height: 40px;
+      line-height: 40px;
+      // .ellipsisMore(1);
+    }
+
+    .prev-action {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .menu-list {
+      display: flex;
+      align-items: center;
+    }
+
+    .left {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-right: 10px;
+      // .ellipsis;
+
+      .code-action {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 1px;
+      }
+
+      .action {
+        display: inline-block;
+        color: skyblue;
+        // color: var(--el-color-primary);
+        font-size: 14px;
+        height: 20px;
+        line-height: 20px;
+        cursor: pointer;
+        margin-right: 14px;
+        text-shadow: #ccc;
+        // text-shadow: var(--text-shadow);
+        outline: none;
+
+        &:hover {
+          color: skyblue;
+          // color: var(--el-color-primary-light-3);
+          outline: none;
+        }
+
+        .diff {
+          margin-left: 14px;
+        }
+      }
+
+      .un-save {
+        font-size: 12px;
+        color: orange;
+        // color: @font-danger;
+
+        &:hover {
+          color: orange;
+          // color: @font-danger;
+        }
+
+        cursor: default;
+      }
+
+      .save-draft {
+        position: relative;
+
+        &::before {
+          position: absolute;
+          right: -6px;
+          top: -2px;
+          content: '';
+          width: 8px;
+          height: 8px;
+          background: orange;
+          // background: @font-danger;
+          border-radius: 8px;
+          // opacity: v-bind(showDot);
+        }
+
+        .is-loading {
+          position: absolute;
+          top: -5px;
+          right: -9px;
+
+          .loading-icon {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .run-code {
+        margin-right: 14px;
+      }
+
+      .clear-code {
+        margin-left: 0;
+        margin-right: 14px;
+      }
+
+      .icon-yuyan {
+        font-size: 16px;
+      }
+
+      .icon-sketchpad-theme {
+        font-size: 15px;
+      }
+
+      .icon-tishi {
+        font-size: 16px;
+        margin-top: -2px;
+      }
+
+      .icon-bianjiqi {
+        font-size: 17px;
+      }
+
+      .clear {
+        font-size: 14px;
+        color: orange;
+        // color: @font-danger;
+        margin-right: 14px;
+        padding: 0;
+        margin-top: -2px;
+        height: 20px;
+        line-height: 20px;
+        text-shadow: #ccc;
+        // text-shadow: var(--text-shadow);
+      }
+    }
+
+    .right {
+      display: flex;
+      justify-content: flex-end;
+      min-width: 132px;
+      font-size: 14px;
+      color: #ccc;
+      // color: @font-4;
+
+      .language-text {
+        height: 40px;
+        line-height: 38px;
+        // .ellipsisMore(1);
+      }
+
+      .result-text {
+        margin-right: 2px;
+      }
+    }
+  }
+
+  .monaco-editor-wrap {
+    // height: calc(100% - 40px);
+    height: 500px;
+    // padding: 10px 3px 0;
+    padding: 1px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    background-color: #fff;
+    // background-color: #fff;
+    box-sizing: border-box;
+
+    :deep {
+      .monaco-editor,
+      .overflow-guard {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+    }
+  }
+
+  // .dark-toolbar,
+  // .dark-monaco-editor-wrap {
+  //   // background-color: v-bind(background);
+  // }
+
+  .model-content {
+    height: 72vh;
+
+    .shortcuts {
+      display: flex;
+      justify-content: center;
+      padding: 10px 0;
+      color: red;
+      // color: var(--font-1);
+
+      .key-name {
+        margin-right: 20px;
+        font-weight: 700;
+      }
+
+      .key-desc {
+        color: red;
+        // color: var(--font-3);
+      }
+    }
+  }
+}
+
+// :deep {
+//   .dropdown-text {
+//     color: var(--font-1);
+
+//     &:hover {
+//       color: var(--theme-blue);
+//       background-color: var(--pre-bg-color);
+//     }
+//   }
+// }

package/packages/components/monaco/src/monaco.ts

@@ -0,0 +1,46 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+import type Monaco from './monaco.vue';
+export const monacoProps = {
+  editType: Boolean,
+  editorBgColor: String,
+  onChangeEditor: Function as PropType<(value?: string) => void>,
+  onPublish: Function as PropType<(value?: string) => void>,
+  onClear: Function as PropType<() => void>,
+  onShowDraft: Function as PropType<() => void>,
+  toPreview: Function as PropType<(id: string) => void>,
+  saveLoading: Boolean,
+  onSaveDraft: Function as PropType<(editor: monaco.editor.IStandaloneCodeEditor) => void>,
+  // onSaveDraft?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
+  isCodeEdit: Boolean,
+  readonly: Boolean,
+  code: String, // 传入的code内容
+  theme: String,
+  getLanguage: Function as PropType<(language: string) => void>,
+  getCodeContent: Function as PropType<(code: string) => void>,
+  getMonacoEditor: Function as PropType<
+    (
+      editor: monaco.editor.IStandaloneCodeEditor,
+      onChangeLanguage: (language: string) => void,
+      setTheme: (theme: string) => void
+    ) => void
+  >,
+  onEnter: Function as PropType<(code: string) => void>,
+  saveText: String,
+  language: String,
+  languages: Array as PropType<string[]>,
+  showDot: Number,
+  prevContent: String,
+  shortcutKeys: Array as PropType<{ name: string; desc: string }[]>,
+  shortcutPos: Number
+} as const;
+
+export type MonacoProps = ExtractPropTypes<typeof monacoProps>;
+
+export type MonacoInstance = InstanceType<typeof Monaco> & unknown;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    NMonaco: typeof Monaco;
+  }
+}