fix:不重要的提交

package.json

@@ -21,6 +21,7 @@
     "core-js": "^3.6.5",
     "decimal.js": "^10.4.2",
     "echarts": "^5.4.1",
+    "hcy-tool-test": "^1.0.4",
     "konva": "^8.4.3",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",

src/common/utils/get-type.ts

-export const getType = function (value: any): string {
+type Types =
+  | 'Number'
+  | 'String'
+  | 'Boolean'
+  | 'Null'
+  | 'Undefined'
+  | 'Array'
+  | 'Object';
+
+export const getType = function (value: any): Types {
   const typeofs = Object.prototype.toString.call(value);
 
   switch (typeofs) {
@@ -24,6 +33,6 @@ export const getType = function (value: any): string {
       return 'Object';
 
     default:
-      return typeofs;
+      return typeofs as any;
   }
 };

src/components/index.ts

@@ -17,6 +17,7 @@ import AgGridLoadingOverlayComponent from './ag-grid/LoadingOverlayComponent.vue
 import AgGridDateComponent from './ag-grid/DateComponent.vue';
 import DialogTip from './dialog-tip/DialogTip.vue';
 import DialogLayout from './dialog-layout/DialogLayout.vue';
+import JsonView from './json-view/JsonView.vue';
 
 export {
   DateTimePick as ComDateTimePick,
@@ -37,6 +38,7 @@ export {
   DialogTip as ComDialogTip,
   DialogLayout as ComDialogLayout,
   Btn as MyBtn,
+  JsonView as ComJsonView,
 };
 
 export default {
@@ -58,4 +60,5 @@ export default {
   DialogTip,
   DialogLayout,
   Btn,
+  JsonView,
 };

src/components/json-view/JsonView.vue

+<!--
+ * @FileDescription: JSON 预览组件
+ * @Date: 2023-05-29
+ * @LastEditTime: 2023-05-29
+-->
+<script setup lang="ts">
+import ObjView from './element/ObjView.vue';
+import ArrView from './element/ArrView.vue';
+import HtmlView from './element/HtmlView.vue';
+
+interface IDetailProps {
+  data: any;
+  mainColor?: string;
+  objSideColor?: string;
+  arrSideColor?: string;
+  stringColor?: string;
+  numberColor?: string;
+  booleanColor?: string;
+  nullColor?: string;
+  otherColor?: string;
+}
+const props = withDefaults(defineProps<IDetailProps>(), {
+  data: () => {
+    return {};
+  },
+  mainColor: '#587498',
+  objSideColor: '#3C7DC4', // 大括号颜色
+  arrSideColor: '#a64942', // 中括号颜色
+  stringColor: '#5A8F29',
+  numberColor: '#b38766',
+  booleanColor: '#FF8F00',
+  nullColor: '#a2a9af',
+  otherColor: '#2B2B2B',
+});
+
+function isObject(data: any) {
+  const typeofs = Object.prototype.toString.call(data);
+  if (typeofs === '[object Object]') {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function isArray(data: any) {
+  const typeofs = Object.prototype.toString.call(data);
+  if (typeofs === '[object Array]') {
+    return true;
+  } else {
+    return false;
+  }
+}
+</script>
+<template>
+  <template v-if="isObject(props.data)">
+    <obj-view v-bind="props" />
+  </template>
+  <template v-else-if="isArray(props.data)">
+    <arr-view v-bind="props" />
+  </template>
+  <template v-else>
+    <html-view v-bind="props" />
+  </template>
+</template>
+
+<style lang="scss" scoped></style>

src/components/json-view/element/ArrView.vue

+<!--
+ * @FileDescription: JSON 数组 预览组件
+ * @Date: 2023-05-29
+ * @LastEditTime: 2023-05-29
+-->
+<script setup lang="ts">
+import { ref } from 'vue';
+import ObjView from './ObjView.vue';
+import HtmlView from './HtmlView.vue';
+import { isObject, isArray, isLastArr } from '../utils';
+
+interface IDetailProps {
+  data: any;
+  isLast?: boolean;
+  mainColor?: string;
+  objSideColor?: string;
+  arrSideColor?: string;
+  stringColor?: string;
+  numberColor?: string;
+  booleanColor?: string;
+  nullColor?: string;
+  otherColor?: string;
+}
+const props = withDefaults(defineProps<IDetailProps>(), {
+  data: () => {
+    return {};
+  },
+  isLast: true,
+});
+
+const show = ref(true);
+
+function clickStart() {
+  show.value = !show.value;
+}
+</script>
+<template>
+  <div style="font-family: 'Gill Sans', sans-serif; position: relative">
+    <div :style="{ color: arrSideColor }" class="obj-side-start">
+      <q-icon
+        :name="show ? 'bi-dash-square' : 'bi-plus-square'"
+        @click="clickStart"
+        class="icon-action"
+      />
+      &nbsp;[
+    </div>
+
+    <div style="padding-left: 16px" v-show="show">
+      <template v-for="(m, n) in props.data" :key="n">
+        <div v-if="isObject(m) && Object.keys(m).length > 0">
+          <obj-view
+            v-bind="props"
+            :data="m"
+            :is-last="isLastArr(n, props.data)"
+          />
+        </div>
+        <div v-else-if="isArray(m) && m.length > 0">
+          <arr-view
+            v-bind="props"
+            :data="m"
+            :is-last="isLastArr(n, props.data)"
+          />
+        </div>
+        <div v-else>
+          <html-view
+            v-bind="props"
+            :data="m"
+            :is-last="isLastArr(n, props.data)"
+          />
+        </div>
+      </template>
+    </div>
+    <div v-show="!show" class="hide-text" :style="{ color: arrSideColor }">
+      ...
+    </div>
+
+    <div class="obj-side-end" v-show="show">
+      <span :style="{ color: arrSideColor }">]</span>
+      <span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.obj-side-start {
+  // padding: 0 8px;
+  .icon-action {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+.obj-side-end {
+  // padding: 0 8px;
+}
+.hide-text {
+  position: absolute;
+  top: 0;
+  left: 46px;
+  &::after {
+    position: absolute;
+    content: ']';
+    right: -8px;
+  }
+}
+</style>

src/components/json-view/element/HtmlView.vue

+<!--
+ * @FileDescription: JSON 文本 预览组件
+ * @Date: 2023-05-29
+ * @LastEditTime: 2023-05-29
+-->
+<script setup lang="ts">
+interface IDetailProps {
+  data: any;
+  isLast?: boolean;
+  mainColor?: string;
+  objSideColor?: string;
+  arrSideColor?: string;
+  stringColor?: string;
+  numberColor?: string;
+  booleanColor?: string;
+  nullColor?: string;
+  otherColor?: string;
+}
+const props = withDefaults(defineProps<IDetailProps>(), {
+  data: () => {
+    return {};
+  },
+  isLast: true,
+});
+
+function htmlTranslate(value: any) {
+  const typeofs = Object.prototype.toString.call(value);
+  if (typeofs === '[object String]') {
+    return `"${value}"`;
+  } else if (typeofs === '[object Null]') {
+    return 'null';
+  } else {
+    return value;
+  }
+}
+function getColor(value: any) {
+  const typeofs = Object.prototype.toString.call(value);
+  switch (typeofs) {
+    case '[object Number]':
+      return props.numberColor; // NaN Infinity 也是Number类型
+
+    case '[object String]':
+      return props.stringColor;
+
+    case '[object Boolean]':
+      return props.booleanColor;
+
+    case '[object Null]':
+      return props.nullColor;
+
+    default:
+      return props.otherColor;
+  }
+}
+</script>
+<template>
+  <span style="font-family: 'Gill Sans', sans-serif">
+    <span :style="{ color: getColor(props.data) }">
+      {{ htmlTranslate(props.data) }}</span
+    >
+    <span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
+  </span>
+</template>
+
+<style lang="scss" scoped></style>

src/components/json-view/element/ObjView.vue

+<!--
+ * @FileDescription: JSON 对象 预览组件
+ * @Date: 2023-05-29
+ * @LastEditTime: 2023-05-29
+-->
+<script setup lang="ts">
+import { ref } from 'vue';
+import ArrView from './ArrView.vue';
+import HtmlView from './HtmlView.vue';
+import { isArray, isLastObj, isLastArr, isObject } from '../utils';
+
+interface IDetailProps {
+  data: any;
+  isLast?: boolean;
+  nest?: boolean;
+  mainColor?: string;
+  objSideColor?: string;
+  arrSideColor?: string;
+  stringColor?: string;
+  numberColor?: string;
+  booleanColor?: string;
+  nullColor?: string;
+  otherColor?: string;
+}
+const props = withDefaults(defineProps<IDetailProps>(), {
+  data: () => {
+    return {};
+  },
+  isLast: true,
+  nest: false,
+});
+
+const show = ref(true);
+
+function clickStart() {
+  show.value = !show.value;
+}
+</script>
+<template>
+  <div
+    style="font-family: 'Gill Sans', sans-serif; position: relative"
+    :style="{ paddingLeft: props.nest ? '16px' : 0 }"
+  >
+    <div :style="{ color: objSideColor }" class="obj-side-start">
+      <q-icon
+        :name="show ? 'bi-dash-square' : 'bi-plus-square'"
+        @click="clickStart"
+        class="icon-action"
+      />
+      &nbsp;{
+    </div>
+
+    <div class="json-fa" v-show="show">
+      <template v-for="(item, key1, index) in props.data" :key="key1">
+        <div v-if="isArray(item) && item.length > 0">
+          <div :style="{ color: mainColor }">"{{ key1 }}":</div>
+          <arr-view
+            v-bind="props"
+            :data="item"
+            :is-last="isLastArr(index, props.data)"
+            class="childrens"
+          />
+        </div>
+        <div v-else-if="isObject(item) && Object.keys(item).length > 0">
+          <div :style="{ color: mainColor }">"{{ key1 }}":</div>
+          <obj-view
+            v-bind="props"
+            :data="item"
+            :is-last="isLastObj(index, props.data)"
+            :nest="true"
+          />
+        </div>
+        <div v-else>
+          <span :style="{ color: mainColor }"> "{{ key1 }}"&nbsp;:&nbsp;</span>
+          <html-view
+            v-bind="props"
+            :data="item"
+            :is-last="isLastObj(index, props.data)"
+          />
+        </div>
+      </template>
+    </div>
+    <div
+      v-show="!show"
+      class="hide-text"
+      :style="{ color: objSideColor, left: props.nest ? '48px' : '32px' }"
+    >
+      ...
+    </div>
+
+    <div class="obj-side-end" v-show="show">
+      <span :style="{ color: objSideColor }">}</span>
+      <span v-if="!props.isLast" :style="{ color: mainColor }">&nbsp;,</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.json-fa {
+  padding-left: 16px;
+}
+.childrens {
+  padding-left: 16px;
+}
+.obj-side-start {
+  // padding: 0 8px;
+  .icon-action {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+.obj-side-end {
+  // padding: 0 8px;
+}
+.hide-text {
+  position: absolute;
+  top: 0;
+  &::after {
+    position: absolute;
+    content: '}';
+    right: -8px;
+  }
+}
+</style>

src/components/json-view/utils.ts

+export function isObject(data: any) {
+  const typeofs = Object.prototype.toString.call(data);
+  if (typeofs === '[object Object]') {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function isArray(data: any) {
+  const typeofs = Object.prototype.toString.call(data);
+  if (typeofs === '[object Array]') {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function isLastArr(index: any, data: any) {
+  const len = data.length;
+  if (index === len - 1) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function isLastObj(index: any, data: any) {
+  const len = Object.keys(data).length;
+  if (index === len - 1) {
+    return true;
+  } else {
+    return false;
+  }
+}

src/css/quasar.variables.scss

@@ -22,6 +22,7 @@ $padding-xl: ($space-base * 3);
 // $primary: #78c0a8;
 $primary: rgba(116, 194, 225, 1);
 $primary-bg-light: rgba(116, 194, 225, 0.125);
+$primary-focus-shadow: rgba(116, 194, 225, 0.35);
 
 $secondary: #26a69a;
 $accent: #9c27b0;

src/layouts/MainLayout.vue

@@ -7,14 +7,14 @@
             <img
               :src="
                 leftDrawerOpen
-                  ? require('./menuListIcons/toggle-left-drawer-show.svg')
-                  : require('./menuListIcons/toggle-left-drawer-hide.svg')
+                  ? require('./menuListIcons/kk-left-show.jpg')
+                  : require('./menuListIcons/kk-left-hide.jpg')
               "
             />
           </q-avatar>
         </q-btn>
 
-        <q-toolbar-title style="min-width: 140px"> Quasar App </q-toolbar-title>
+        <q-toolbar-title style="min-width: 140px"> 傲来小神仙 </q-toolbar-title>
         <q-tabs
           v-model="defaultRouter"
           inline-label

src/layouts/TopLeftText.vue

 <script setup lang="ts"></script>
 <template>
   <div class="top-left-box">
-    <span>人间草木</span>
+    <span>两眼空空</span>
   </div>
 </template>
 

src/layouts/config.ts

@@ -98,6 +98,34 @@ export const MenuList = [
         link: '/js-page6',
         active: false,
       },
+      {
+        title: 'JSON预览',
+        caption: '',
+        icon: require('./menuListIcons/amis.svg'),
+        link: '/json-view',
+        active: false,
+      },
+      {
+        title: '二叉树',
+        caption: '',
+        icon: require('./menuListIcons/amis.svg'),
+        link: '/binary-tree',
+        active: false,
+      },
+      {
+        title: 'MDN Range',
+        caption: '',
+        icon: require('./menuListIcons/amis.svg'),
+        link: '/MDN-Range',
+        active: false,
+      },
+      {
+        title: '输入框',
+        caption: '评论输入框',
+        icon: require('./menuListIcons/amis.svg'),
+        link: '/review-input-box',
+        active: false,
+      },
     ],
   },
   {

src/modules/MDN-Range/MdnRange.vue

+<!--
+ * @FileDescription: MDN Range
+ * @Date: 2023-06-05
+ * @LastEditTime: 2023-06-06
+-->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const _inputRef = ref<any>(null);
+// const state = reactive({
+//   lastEditRange: null as any, // 定义最后光标对象
+// });
+
+onMounted(() => {
+  //
+});
+
+function rangeTest() {
+  let html;
+  const showRangeDiv = document.getElementById('showRange') as HTMLElement;
+  const selection = document.getSelection() as Selection;
+
+  if (selection.type === 'Range' && selection.rangeCount > 0) {
+    html = '你选取了' + selection.rangeCount + '段内容<br/>';
+    for (let i = 0; i < selection.rangeCount; i++) {
+      let range = selection.getRangeAt(i);
+      html += '第' + (i + 1) + '段内容为：' + range + '<br/>';
+    }
+    showRangeDiv.innerHTML = html;
+  } else {
+    showRangeDiv.innerHTML = '你没有选择内容';
+  }
+}
+
+function rangeSet() {
+  const oP1 = document.getElementById('p1') as HTMLElement;
+  const oB1 = document.getElementById('b1') as HTMLElement;
+  const oRange = document.createRange();
+
+  oRange.setStart(oB1.firstChild as ChildNode, 2); // 设置range的“起点”
+  oRange.setEnd(oP1.lastChild as ChildNode, 3); // 设置range的“结束点”
+
+  // Range.startContainer 只读；
+  // 返回包含 Range 开始的节点。【返回的是一个文本节点】
+  console.log(oRange.startContainer); // 元素oB1.firstChild，文本节点
+  // Range.startOffset 只读；
+  // 返回一个数字，表示 Range 在 startContainer 中的起始位置。
+  console.log(oRange.startOffset); // 2，可看到“起点”在<b id="b1">Hello</b>应是第三个字符。
+}
+
+// function getCursor() {
+//   // 编辑框设置焦点
+//   const inputDom = _inputRef.value;
+//   inputDom.focus();
+
+//   const selection = document.getSelection() as Selection;
+//   const rangeCount = selection.rangeCount;
+//   if (rangeCount > 0) {
+//     // 设置最后光标对象
+//     state.lastEditRange = selection.getRangeAt(0);
+//     state.lastEditRange.deleteContents(); // 从 Document 中移除 Range 内容
+//     console.log('最后光标对象', state.lastEditRange);
+
+//     // 创建标签
+//     const el = document.createElement('span');
+//     el.innerHTML = '这是我创建的内容';
+
+//     // 在 Range 开头插入一个节点
+//     state.lastEditRange.insertNode(el);
+//   }
+// }
+
+// 插入话题
+function insertTopic() {
+  insertHtmlAtCaret('#');
+  insertHtmlAtCaret('插入话题');
+  insertHtmlAtCaret('#');
+  const range = (window.getSelection() as Selection).getRangeAt(0);
+  range.selectNodeContents(
+    range.startContainer.childNodes[range.startOffset - 2]
+  );
+}
+
+// 插入标签
+function insertEmoji() {
+  // 编辑框设置焦点
+  const inputDom = _inputRef.value;
+  inputDom.focus();
+
+  const selection = document.getSelection() as Selection;
+  const rangeCount = selection.rangeCount;
+  if (rangeCount > 0) {
+    // 设置最后光标对象
+    let range = selection.getRangeAt(0);
+    range.deleteContents(); // 从 Document 中移除 Range 内容
+
+    // 创建标签
+    const img = document.createElement('img');
+    img.setAttribute('class', 'img');
+    img.src = require('./imgs/angel.png');
+    img.style.height = '24px';
+    img.style.width = '24px';
+    // img.alt = item.label;
+
+    // 在 Range 开头插入一个节点
+    range.insertNode(img);
+    range = range.cloneRange();
+    range.setStartAfter(img);
+
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+}
+
+function insertHtmlAtCaret(html: any) {
+  // 编辑框设置焦点
+  const inputDom = _inputRef.value;
+  inputDom.focus();
+
+  const selection = document.getSelection() as Selection;
+  const rangeCount = selection.rangeCount;
+  if (rangeCount > 0) {
+    // 设置最后光标对象
+    let range = selection.getRangeAt(0);
+    range.deleteContents(); // 从 Document 中移除 Range 内容
+
+    // 创建标签
+    const el = document.createElement('span');
+    el.innerHTML = html;
+
+    const frag = document.createDocumentFragment();
+    let node;
+    let lastNode;
+    while ((node = el.firstChild)) {
+      lastNode = frag.appendChild(node);
+    }
+    range.insertNode(frag);
+
+    if (lastNode) {
+      range = range.cloneRange();
+      range.setStartAfter(lastNode);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+}
+
+function getVal() {
+  const re = getDomValue(_inputRef.value);
+  console.log(re);
+}
+// 获取纯文本内容
+function getDomValue(elem: any) {
+  let res = '';
+  Array.from(elem.childNodes).forEach((child: any) => {
+    if (child.nodeName === '#text') {
+      res += child.nodeValue;
+    } else if (child.nodeName === 'BR') {
+      res += '\n';
+    } else if (child.nodeName === 'BUTTON') {
+      res += getDomValue(child);
+    } else if (child.nodeName === 'IMG') {
+      res += child.alt;
+    } else if (child.nodeName === 'DIV') {
+      res += '\n' + getDomValue(child);
+    }
+  });
+  return res;
+}
+</script>
+<template>
+  <div class="q-pa-md">
+    <div class="reference q-pa-md q-mb-md rounded-borders">
+      <p>参考链接：</p>
+      <a
+        href="https://developer.mozilla.org/zh-CN/docs/Web/API/Range"
+        target="_blank"
+        rel="noopener noreferrer"
+        >MDN Range</a
+      >
+      <br />
+      <a
+        href="http://www.jianshu.com/p/ad2f818cc3b0"
+        target="_blank"
+        rel="noopener noreferrer"
+        >html5之Range对象详解</a
+      >
+      <br />
+      <a
+        href="https://segmentfault.com/a/1190000005869372"
+        target="_blank"
+        rel="noopener noreferrer"
+        >html元素contenteditable属性如何定位光标和设置光标</a
+      >
+      <br />
+      <a
+        href="https://juejin.cn/post/6844903793864212494"
+        target="_blank"
+        rel="noopener noreferrer"
+        >div+contenteditable 实现富文本发布框的小结</a
+      >
+    </div>
+    <input type="button" value="点击我" @click="rangeTest" />
+    <div id="showRange"></div>
+
+    <br />
+    <button @click="rangeSet">点我查看节点</button>
+    <p id="p1"><span>span</span><b id="b1">Hello</b> World</p>
+
+    <br />
+    <button @click="insertTopic">点我插入话题</button>
+    <img
+      src="./imgs/angel.png"
+      alt=""
+      style="width: 25px; height: 25px"
+      @click="insertEmoji"
+    />
+    <button @click="getVal">点我获取纯文本内容</button>
+    <div class="_input" contenteditable="true" ref="_inputRef">输入文字</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.reference {
+  border: 1px solid $border-color;
+  background: $primary-bg-light;
+}
+
+._input {
+  min-width: 200px;
+  min-height: 60px;
+  font-size: 14px;
+  padding: 5px 8px;
+  border: 1px solid #ddd;
+}
+</style>

src/modules/MDN-Range/route.ts

+export default [
+  {
+    path: 'MDN-Range',
+    name: 'MDN_RANGE',
+    component: () => import('./MdnRange.vue'),
+    meta: {
+      title: 'MDN Range',
+      permission: ['*'],
+      keepalive: true,
+    },
+  },
+];

src/modules/binary-tree/BinaryTree.vue

+<!--
+ * @FileDescription: 用JS做二叉树遍历算法
+ * https://juejin.cn/post/7028073289943613471
+ * @Date: 2023-05-29
+ * @LastEditTime: 2023-05-29
+-->
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import Com from 'src/components';
+
+const state = reactive({
+  data: {} as any,
+});
+
+onMounted(() => {
+  getData();
+});
+
+/**
+ * 我们用js的对象来表示二叉树
+ * 对象拥有三个属性，left、value、right,分别是左子树，值和右子树
+ * 上面 a+b*(c-d)-e/f 的例子我们用js可以这样表示
+ */
+function getData() {
+  state.data = {
+    value: '-',
+    left: {
+      value: '+',
+      left: {
+        value: 'a',
+      },
+      right: {
+        value: '*',
+        left: {
+          value: 'b',
+        },
+        right: {
+          value: '-',
+          left: {
+            value: 'c',
+          },
+          right: {
+            value: 'd',
+          },
+        },
+      },
+    },
+    right: {
+      value: '/',
+      left: {
+        value: 'e',
+      },
+      right: {
+        value: 'f',
+      },
+    },
+  };
+}
+</script>
+<template>
+  <div>
+    <div class="row q-gutter-md">
+      <div class="img-box">
+        <img src="./imgs/binary-tree.jpg" />
+      </div>
+      <div class="q-gutter-md">
+        <table>
+          <thead>
+            <tr>
+              <th colspan="3">深度遍历</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>前序</th>
+              <td>先访问根，然后访问左子树，最后访问右子树，DLR</td>
+              <td>-+a*b-cd/ef</td>
+            </tr>
+            <tr>
+              <th>中序</th>
+              <td>先访问左子树，然后访问根，最后访问右子树，LDR</td>
+              <td>a+b*c-d-e/f</td>
+            </tr>
+            <tr>
+              <th>后序</th>
+              <td>先后访问左子树，然后访问右子树，最后访问根，LRD</td>
+              <td>abcd-*+ef/-</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table>
+          <thead>
+            <tr>
+              <th colspan="3">广度遍历</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>广度</th>
+              <td>按层的顺序一层一层遍历</td>
+              <td>-+/a*efb-cd</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="q-gutter-md">
+        <p>用js表示二叉树</p>
+        <Com.JsonView :data="state.data" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.img-box {
+  width: 350px;
+  > img {
+    width: 100%;
+  }
+}
+table {
+  border-collapse: collapse;
+  border: 1px solid #0d3f67;
+  color: #0d3f67;
+  th {
+    padding: 6px 4px;
+    font-size: 16px;
+    min-width: 120px;
+    border: 1px solid #0d3f67;
+  }
+  td {
+    padding: 6px 16px;
+    font-size: 16px;
+    border: 1px solid #0d3f67;
+  }
+}
+</style>

src/modules/binary-tree/route.ts

+export default [
+  {
+    path: 'binary-tree',
+    name: 'BINARY_TREE',
+    component: () => import('./BinaryTree.vue'),
+    meta: {
+      title: '二叉树',
+      permission: ['*'],
+      keepalive: true,
+    },
+  },
+];

src/modules/json-view/IndexPage.vue

+<!--
+ * @FileDescription: JSON 预览
+ * @Date: 2023-05-16
+ * @LastEditTime: 2023-05-16
+-->
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import { ComJsonView } from 'src/components';
+
+const state = reactive({
+  data: {
+    name: '张三',
+    age: 28,
+    isShow: true,
+    money: null,
+    www: undefined,
+    children: [
+      { name: '孩子1', age: 3 },
+      { name: '孩子2', age: 1 },
+      '这是一句字符串',
+      100,
+      ['1F', '2F', { name: '李四' }],
+      '珠穆朗玛峰',
+    ],
+    sex: '男',
+    data: [
+      { name: '张三', age: 18 },
+      { name: '李四', age: 28 },
+    ],
+  } as any,
+});
+
+onMounted(() => {
+  console.log('数据', state.data);
+});
+</script>
+<template>
+  <div>{{ JSON.stringify(state.data) }}</div>
+  <br />
+  <div class="box">
+    <ComJsonView :data="state.data" />
+  </div>
+  <br />
+</template>
+
+<style lang="scss" scoped>
+.box {
+  width: 500px;
+  padding: $padding-md;
+  margin-left: 40px;
+  border: 1px solid rgba(0, 0, 0, 0.562);
+}
+</style>

src/modules/json-view/route.ts

+export default [
+  {
+    path: 'json-view',
+    name: 'JSON_VIEW',
+    component: () => import('./IndexPage.vue'),
+    meta: {
+      title: 'JSON预览',
+      permission: ['*'],
+      keepalive: true,
+    },
+  },
+];

src/modules/review-input-box/route.ts

+export default [
+  {
+    path: 'review-input-box',
+    name: 'REVIEW_INPUT_BOX',
+    component: () => import('./ReviewInputBox.vue'),
+    meta: {
+      title: '输入框',
+      permission: ['*'],
+      keepalive: true,
+    },
+  },
+];

src/modules/vue-study/IndexPage.vue

@@ -9,6 +9,7 @@ export default {
 <script setup lang="ts">
 import { reactive, onMounted, watch, ref, nextTick, markRaw } from 'vue';
 import * as echarts from 'echarts';
+import { getType, isEmpty } from 'hcy-tool-test';
 // import { useMessage } from 'src/common/hooks';
 import PROVICE from './provice';
 import { ChartOption, Series_A, Series_B, Series_D } from './config';
@@ -16,7 +17,6 @@ import DateDetail from './element/DateDetail.vue';
 import ImageScale from './element/ImageScale.vue';
 import CropperImg from './element/CropperImg.vue';
 import InsertCoin from './element/InsertCoin.vue';
-
 // const { info } = useMessage();
 
 const citySelectRef = ref<any>(null);
@@ -70,6 +70,14 @@ watch(
 );
 
 onMounted(() => {
+  // const mytool = require('hcy-tool-test');
+  // const mytool = require('./test-utils/index');
+
+  const type = getType(123);
+  console.log(type);
+  const isE = isEmpty(0);
+  console.log(isE);
+
   handleData();
   setChart();
 });

src/modules/vue-study/element/InsertCoin.vue

@@ -7,6 +7,9 @@ import { ref } from 'vue';
 defineExpose({
   openModel,
 });
+const emit = defineEmits<{
+  (e: 'onOk', value: any): void;
+}>();
 
 const show = ref(false);
 const amount = ref(1);
@@ -18,6 +21,9 @@ function openModel() {
 function onClose() {
   show.value = false;
 }
+function onOk() {
+  emit('onOk', amount);
+}
 </script>
 <template>
   <q-dialog v-model="show" persistent>
@@ -33,12 +39,39 @@ function onClose() {
 
       <q-card-section style="padding-bottom: 8px">
         <div class="content" style="width: 100%">
-          <div class="img-content" style="height: 300px; width: 100%">1</div>
+          <div class="img-content" style="height: 300px; width: 100%">
+            <div class="img-cont-box">
+              <div
+                class="img-main-box img-main-box-left"
+                :class="[
+                  amount === 1
+                    ? 'img-main-box-active'
+                    : 'img-main-box-unactive',
+                ]"
+                @click="amount = 1"
+              >
+                <div class="background-left"></div>
+              </div>
+            </div>
+            <div class="img-cont-box">
+              <div
+                class="img-main-box img-main-box-right"
+                :class="[
+                  amount === 2
+                    ? 'img-main-box-active'
+                    : 'img-main-box-unactive',
+                ]"
+                @click="amount = 2"
+              >
+                <div class="background-right"></div>
+              </div>
+            </div>
+          </div>
           <div>
             <q-checkbox v-model="giveLike" label="同时点赞内容" />
           </div>
           <div class="row justify-center">
-            <q-btn unelevated color="primary" label="确定" />
+            <q-btn unelevated color="primary" label="确定" @click="onOk" />
           </div>
           <div class="experience-box row justify-center">
             经验值+10（今日20/50）
@@ -63,7 +96,66 @@ function onClose() {
   transform: translateY(-18px);
 }
 .img-content {
-  //   background-color: bisque;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.img-cont-box {
+  padding: 16px;
+}
+.img-main-box {
+  border-radius: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  > div {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+  &::before {
+    position: absolute;
+    top: 12px;
+    left: 15px;
+    font-size: 14px;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+}
+.img-main-box-active {
+  border: 2px solid $primary;
+  color: $primary;
+}
+.img-main-box-unactive {
+  border: 2px dashed rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.2);
+  > div {
+    filter: grayscale(1);
+  }
+  &:hover {
+    border: 2px dashed $primary;
+    color: $primary;
+  }
+}
+.img-main-box-left {
+  &::before {
+    content: '1硬币';
+  }
+}
+.background-left {
+  background: url('../icons/one.svg');
+}
+.img-main-box-right {
+  &::before {
+    content: '2硬币';
+  }
+}
+.background-right {
+  background: url('../icons/two.svg');
 }
 .experience-box {
   font-size: 12px;

src/router/routes.ts

@@ -7,6 +7,10 @@ import VUE_STUDY from '../modules/vue-study/route';
 import VUE_KONVA from '../modules/vue-konva/route';
 import VECTOR from '../modules/vector/route';
 import VUE_KONVA_LINE from '../modules/vue-konva-line/route';
+import JSON_VIEW from '../modules/json-view/route';
+import BINARY_TREE from '../modules/binary-tree/route';
+import MDN_RANGE from '../modules/MDN-Range/route';
+import REVIEW_INPUT_BOX from '../modules/review-input-box/route';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -18,7 +22,7 @@ const routes: RouteRecordRaw[] = [
         path: '',
         name: 'LaoutIndexPage',
         component: () => import('pages/IndexPage.vue'),
-        redirect: '/vue-study',
+        redirect: '/review-input-box',
         children: [
           {
             path: 'home',
@@ -137,6 +141,10 @@ const routes: RouteRecordRaw[] = [
           ...VUE_KONVA,
           ...VECTOR,
           ...VUE_KONVA_LINE,
+          ...JSON_VIEW,
+          ...BINARY_TREE,
+          ...MDN_RANGE,
+          ...REVIEW_INPUT_BOX,
         ],
       },
     ],

yarn.lock

@@ -3618,6 +3618,11 @@ hash-sum@^1.0.2:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
   integrity sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==
 
+hcy-tool-test@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hcy-tool-test/-/hcy-tool-test-1.0.4.tgz#e97211b0ab9ec230a3888387990e095d35c1c0fc"
+  integrity sha512-2w+mSrtDoDkNkQo+Cy/wtNhKdS8pJNECHroi1W9OqDZ4fc+yiPcIfhe0HJ5BCsv744dVyndelL6hDMgaJ5fe4A==
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"