diff --git a/package.json b/package.json
index 89c72d9..2ccdc04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "front-next",
- "version": "0.5.0",
+ "version": "0.5.1",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit --skipLibCheck && vite build",
@@ -11,7 +11,7 @@
"dependencies": {
"array.prototype.flat": "^1.2.4",
"axios": "^0.21.1",
- "cl-admin-crud-vue3": "^0.2.1",
+ "cl-admin-crud-vue3": "^0.3.0",
"clipboard": "^2.0.8",
"clone-deep": "^4.0.1",
"codemirror": "^5.60.0",
diff --git a/src/cool/modules/base/components/codemirror/index.vue b/src/cool/modules/base/components/codemirror/index.vue
index f18371f..0af6b98 100644
--- a/src/cool/modules/base/components/codemirror/index.vue
+++ b/src/cool/modules/base/components/codemirror/index.vue
@@ -1,6 +1,10 @@
@@ -8,12 +12,12 @@
import { defineComponent, nextTick, onMounted, ref, watch } from "vue";
import CodeMirror from "codemirror";
import beautifyJs from "js-beautify";
-
-import "codemirror/theme/cobalt.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
+import "codemirror/theme/hopscotch.css";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/mode/javascript/javascript";
+import { deepMerge } from "/@/core/utils";
export default defineComponent({
name: "cl-codemirror",
@@ -34,13 +38,24 @@ export default defineComponent({
// 获取内容
function getValue() {
- return editor ? editor.getValue() : "";
+ if (editor) {
+ return editor.getValue();
+ } else {
+ return "";
+ }
}
// 设置内容
function setValue(val?: string) {
if (editor) {
- editor.setValue(beautifyJs(val || getValue()));
+ editor.setValue(val || "");
+ }
+ }
+
+ // 格式化
+ function formatCode() {
+ if (editor) {
+ editor.setValue(beautifyJs(getValue()));
}
}
@@ -48,10 +63,8 @@ export default defineComponent({
watch(
() => props.modelValue,
(val: string) => {
- if (editor) {
- if (val != getValue().replace(/\s/g, "")) {
- setValue(val);
- }
+ if (editor && val != getValue()) {
+ setValue(val);
}
}
);
@@ -59,45 +72,54 @@ export default defineComponent({
onMounted(function () {
nextTick(() => {
// 实例化
- editor = CodeMirror.fromTextArea(editorRef.value.querySelector("#editor"), {
- mode: "javascript",
- theme: "ambiance",
- styleActiveLine: true,
- lineNumbers: true,
- lineWrapping: true,
- indentUnit: 4,
- ...props.options
- });
+ editor = CodeMirror.fromTextArea(
+ editorRef.value.querySelector("#editor"),
+ deepMerge(
+ {
+ mode: "javascript",
+ theme: "hopscotch",
+ styleActiveLine: true,
+ lineNumbers: true,
+ lineWrapping: true,
+ indentWithTabs: true,
+ indentUnit: 4,
+ extraKeys: { Ctrl: "autocomplete" },
+ foldGutter: true,
+ autofocus: true,
+ matchBrackets: true,
+ autoCloseBrackets: true,
+ gutters: [
+ "CodeMirror-linenumbers",
+ "CodeMirror-foldgutter",
+ "CodeMirror-lint-markers"
+ ]
+ },
+ props.options
+ )
+ );
// 输入监听
editor.on("change", (e: any) => {
- emit("update:modelValue", e.getValue().replace(/\s/g, ""));
+ emit("update:modelValue", e.getValue());
});
// 设置内容
setValue(props.modelValue);
+ // 格式化
+ formatCode();
+
// 加载回调
emit("load", editor);
// 设置编辑框大小
editor.setSize(props.width || "auto", props.height || "auto");
-
- // shift + alt + f 格式化
- editor.display.wrapper.onkeydown = (e: any) => {
- const keyCode = e.keyCode || e.which || e.charCode;
- const altKey = e.altKey || e.metaKey;
- const shiftKey = e.shiftKey || e.metaKey;
-
- if (altKey && shiftKey && keyCode == 70) {
- setValue();
- }
- };
});
});
return {
- editorRef
+ editorRef,
+ formatCode
};
}
});
@@ -109,169 +131,12 @@ export default defineComponent({
border: 1px solid #dcdfe6;
box-sizing: border-box;
border-radius: 3px;
-}
+ line-height: 150%;
-.cm-s-ambiance * {
- font-family: "Consolas";
- font-size: 13px;
-}
-
-.cm-s-ambiance .cm-header {
- color: blue;
-}
-
-.cm-s-ambiance .cm-quote {
- color: #24c2c7;
-}
-
-.cm-s-ambiance .cm-keyword {
- color: #a626a4;
-}
-
-.cm-s-ambiance .cm-atom {
- color: #986801;
-}
-
-.cm-s-ambiance .cm-number {
- color: #986801;
-}
-
-.cm-s-ambiance .cm-def {
- color: #383a42;
-}
-
-.cm-s-ambiance .cm-variable {
- color: #4078f2;
-}
-
-.cm-s-ambiance .cm-variable-2 {
- color: #eed1b3;
-}
-
-.cm-s-ambiance .cm-variable-3,
-.cm-s-ambiance .cm-type {
- color: #faded3;
-}
-
-.cm-s-ambiance .cm-property {
- color: #333333;
-}
-
-.cm-s-ambiance .cm-operator {
- color: #0184bc;
-}
-
-.cm-s-ambiance .cm-comment {
- color: #555;
- font-style: italic;
-}
-
-.cm-s-ambiance .cm-string {
- color: #50a14f;
-}
-
-.cm-s-ambiance .cm-string-2 {
- color: #9d937c;
-}
-
-.cm-s-ambiance .cm-meta {
- color: #d2a8a1;
-}
-
-.cm-s-ambiance .cm-qualifier {
- color: yellow;
-}
-
-.cm-s-ambiance .cm-builtin {
- color: #9999cc;
-}
-
-.cm-s-ambiance .cm-bracket {
- color: #24c2c7;
-}
-
-.cm-s-ambiance .cm-tag {
- color: #fee4ff;
-}
-
-.cm-s-ambiance .cm-attribute {
- color: #9b859d;
-}
-
-.cm-s-ambiance .cm-hr {
- color: pink;
-}
-
-.cm-s-ambiance .cm-link {
- color: #f4c20b;
-}
-
-.cm-s-ambiance .cm-special {
- color: #ff9d00;
-}
-
-.cm-s-ambiance .cm-error {
- color: #af2018;
-}
-
-.cm-s-ambiance .CodeMirror-matchingbracket {
- color: #0f0;
-}
-
-.cm-s-ambiance .CodeMirror-nonmatchingbracket {
- color: #f22;
-}
-
-.cm-s-ambiance div.CodeMirror-selected {
- background: rgba(0, 0, 0, 0.15);
-}
-
-.cm-s-ambiance.CodeMirror-focused div.CodeMirror-selected {
- background: rgba(0, 0, 0, 0.1);
-}
-
-.cm-s-ambiance .CodeMirror-line::selection,
-.cm-s-ambiance .CodeMirror-line > span::selection,
-.cm-s-ambiance .CodeMirror-line > span > span::selection {
- background: rgba(0, 0, 0, 0.1);
-}
-
-.cm-s-ambiance .CodeMirror-line::-moz-selection,
-.cm-s-ambiance .CodeMirror-line > span::-moz-selection,
-.cm-s-ambiance .CodeMirror-line > span > span::-moz-selection {
- background: rgba(0, 0, 0, 0.1);
-}
-
-/* Editor styling */
-.cm-s-ambiance.CodeMirror {
- line-height: 1.4em;
- color: #383a42;
- background-color: #f7f7f7;
-}
-
-.cm-s-ambiance .CodeMirror-gutters {
- background: #f7f7f7;
-}
-
-.cm-s-ambiance .CodeMirror-linenumber {
- color: #666;
- padding: 0 5px;
-}
-
-.cm-s-ambiance .CodeMirror-guttermarker {
- color: #aaa;
-}
-
-.cm-s-ambiance .CodeMirror-guttermarker-subtle {
- color: #666;
-}
-
-.cm-s-ambiance .CodeMirror-cursor {
- border-left: 1px solid #999;
- margin-left: 2px;
-}
-
-.cm-s-ambiance .CodeMirror-activeline-background {
- background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.031);
+ &__tools {
+ background-color: #322931;
+ padding: 10px;
+ border-top: 1px solid #444;
+ }
}
diff --git a/src/cool/modules/base/components/image/index.vue b/src/cool/modules/base/components/image/index.vue
new file mode 100644
index 0000000..3e82e9f
--- /dev/null
+++ b/src/cool/modules/base/components/image/index.vue
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
diff --git a/src/views/home/components/sales-rank.vue b/src/views/home/components/sales-rank.vue
index 72ee962..a3914c8 100644
--- a/src/views/home/components/sales-rank.vue
+++ b/src/views/home/components/sales-rank.vue
@@ -123,14 +123,18 @@ export default defineComponent({
ul {
display: flex;
+ align-items: center;
justify-content: space-between;
width: 200px;
+ margin-right: 20px;
li {
list-style: none;
font-size: 14px;
cursor: pointer;
color: #d8d8d8;
+ white-space: nowrap;
+ margin-right: 10px;
&.active {
color: #000;
diff --git a/yarn.lock b/yarn.lock
index f7ab9c4..39c6eb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -930,10 +930,10 @@ change-case@^4.1.2:
optionalDependencies:
fsevents "~2.3.1"
-cl-admin-crud-vue3@^0.2.1:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/cl-admin-crud-vue3/-/cl-admin-crud-vue3-0.2.1.tgz#5d9e37efb4caf8d084ae759d6b097bc54b708999"
- integrity sha512-UPEEMCiPo5xFcLYDBqrKwR/jk7QK9MN7uOz3HAbrxl728L3g4T/Ogh01kfSrbASXv3YwZ+PkqcixAvtnh7WAPA==
+cl-admin-crud-vue3@^0.3.0:
+ version "0.3.0"
+ resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.3.0.tgz?cache=0&sync_timestamp=1624438098113&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcl-admin-crud-vue3%2Fdownload%2Fcl-admin-crud-vue3-0.3.0.tgz#393c314bb7c20f84f2d4d460fe62b3c538f3e1b3"
+ integrity sha1-OTwxS7fCD4Ty1NRg/mKzxTjz4bM=
dependencies:
array.prototype.flat "^1.2.4"
core-js "^3.6.5"