From e88fa55f782fb3e8aa8fd002b6daa42ab6830e65 Mon Sep 17 00:00:00 2001
From: LingandRX <rsgltzyd@hotmail.com>
Date: Tue, 3 Jun 2025 20:59:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20-=20=E6=B7=BB=E5=8A=A0MarkDown?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=20-=20=E6=B7=BB=E5=8A=A0Modal=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  4 +-
 src/components/CustomMarkDown.vue | 52 +++++++++++++++++++++
 src/components/CustomModal.vue    | 76 +++++++++++++++++++++++++++++++
 src/views/TestView.vue            | 26 ++++++++++-
 4 files changed, 156 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CustomMarkDown.vue
 create mode 100644 src/components/CustomModal.vue

diff --git a/package.json b/package.json
index 5082259..aeed64b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
     "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^4.2.5",
     "js-cookie": "^3.0.5",
+    "lodash-es": "^4.17.21",
+    "marked": "^15.0.12",
     "pinia": "^2.1.7",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
@@ -26,7 +28,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "prettier": "^3.2.5",
-    "vite": "5.4.6",
+    "vite": "6.3.4",
     "vite-plugin-vue-devtools": "^7.3.1"
   }
 }
diff --git a/src/components/CustomMarkDown.vue b/src/components/CustomMarkDown.vue
new file mode 100644
index 0000000..861b1e3
--- /dev/null
+++ b/src/components/CustomMarkDown.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { marked } from 'marked'
+import { debounce } from 'lodash-es'
+import { ref, computed } from 'vue'
+
+const input = ref('# hello')
+
+const output = computed(() => marked(input.value))
+
+const update = debounce((e) => {
+  input.value = e.target.value
+}, 100)
+
+</script>
+
+<template>
+  <div class="editor">
+    <textarea class="input" :value="input" @input="update"></textarea>
+    <div class="output" v-html="output"></div>
+  </div>
+</template>
+
+<style scoped>
+.editor  {
+  height: 100vh;
+  display: flex;
+  border: 1px solid #ccc;
+}
+.input,
+.output {
+  overflow: auto;
+  width: 50%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+}
+
+.input {
+  border: none;
+  border-right: 1px solid #ccc;
+  resize: none;
+  outline: none;
+  background-color: #f6f6f6;
+  font-size: 14px;
+  font-family: 'Monaco', courier, monospace;
+  padding: 20px;
+}
+
+code {
+  color: #f66;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/CustomModal.vue b/src/components/CustomModal.vue
new file mode 100644
index 0000000..306abbb
--- /dev/null
+++ b/src/components/CustomModal.vue
@@ -0,0 +1,76 @@
+<script setup>
+defineProps({
+  show: Boolean
+})
+</script>
+
+<template>
+  <Transition name="modal">
+    <div v-if="show" class="modal-mask">
+      <div class="modal-container">
+        <div class="modal-header">
+          <slot name="header">default</slot>
+        </div>
+
+        <div class="modal-body">
+          <slot name="body">default</slot>
+        </div>
+
+        <div class="modal-footer">
+          <slot name="footer">
+            default
+            <button class="modal-default-button" @click="$emit('close')">click</button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  transition: opacity 0.3s ease;
+}
+
+.modal-container {
+  width: 300px;
+  margin: auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.modal-body {
+  margin-top: 0;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-default-button {
+  float: right;
+}
+
+.modal-enter-from {
+  opacity: 0;
+}
+
+.modal-leave-to {
+  opacity: 1;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 7f4e867..57d02da 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -5,6 +5,8 @@ import BlogPost from '@/components/BlogPost.vue'
 import AlertBox from '@/components/AlertBox.vue'
 import HomeView from './HomeView.vue'
 import GameView from './GameView.vue'
+import CustomMarkDown from '@/components/CustomMarkDown.vue'
+import CustomModal from '@/components/CustomModal.vue'
 
 const posts = ref([
   { id: 1, title: 'test01' },
@@ -21,6 +23,8 @@ const tabs = {
   GameView
 }
 
+const showModal = ref(false)
+
 </script>
 
 <template>
@@ -52,6 +56,26 @@ const tabs = {
       <component :is="tabs[currentTab]" />
     </KeepAlive>
   </div>
+
+  <div class="editor">
+    <CustomMarkDown />
+  </div>
+
+  <button id="show-modal" @click="showModal = true">
+    Show Modal
+  </button>
+
+  <Teleport to="body">
+    <CustomModal :show="showModal" @close="showModal = false">
+      <template #header>
+        <h3 style="color: #42b983">Custom Header</h3>
+      </template>
+    </CustomModal>
+  </Teleport>
 </template>
 
-<style scoped></style>
+<style scoped>
+.editor {
+  width: 100%;
+}
+</style>

From 61b878c20faafa43d9fa3851122e88cee7aea046 Mon Sep 17 00:00:00 2001
From: yulinling <2712495353@qq.com>
Date: Sun, 8 Jun 2025 21:05:22 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(components):=20=E6=96=B0=E5=A2=9E=20Cu?=
 =?UTF-8?q?stomTreeItem=20=E7=BB=84=E4=BB=B6=E5=B9=B6=E5=9C=A8=20TestView?=
 =?UTF-8?q?=20=E4=B8=AD=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 src/components 目录下创建了 CustomTreeItem.vue 文件
- 在 TestView.vue 中引入并使用了 CustomTreeItem 组件
- 调整了 TestView.vue 中的模态框和树形结构的显示逻辑
---
 package.json                      |  4 +--
 src/components/CustomTreeItem.vue | 46 +++++++++++++++++++++++++++++++
 src/views/TestView.vue            | 25 +++++++++--------
 3 files changed, 62 insertions(+), 13 deletions(-)
 create mode 100644 src/components/CustomTreeItem.vue

diff --git a/package.json b/package.json
index aeed64b..f85180a 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,7 @@
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^4.2.5",
-    "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
-    "marked": "^15.0.12",
     "pinia": "^2.1.7",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
@@ -27,6 +25,8 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
+    "js-cookie": "^3.0.5",
+    "marked": "^15.0.12",
     "prettier": "^3.2.5",
     "vite": "6.3.4",
     "vite-plugin-vue-devtools": "^7.3.1"
diff --git a/src/components/CustomTreeItem.vue b/src/components/CustomTreeItem.vue
new file mode 100644
index 0000000..beb83d3
--- /dev/null
+++ b/src/components/CustomTreeItem.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  module: Object
+})
+
+const isFolder = computed(() => {
+  return props.module.children && props.module.children.length > 0
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function changeType() {
+  if (!isFolder.value) {
+    isOpen.value = true
+  }
+}
+
+const emit = defineEmits(['add-child'])
+
+function addChild() {
+  emit('add-child', props.module)
+}
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <li>
+    <div class="tree-item" @click="toggle" @dblclick="changeType">
+      {{ module.name }}<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
+      <CustomTreeItem
+        v-for="child in module.children"
+        :key="child.id"
+        :module="child"
+        @add-child="$emit('add-child', $event)"
+      ></CustomTreeItem>
+      <li class="add" @click="addChild">+</li>
+    </div>
+  </li>
+</template>
+
+<style scoped></style>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 57d02da..9ef872c 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -7,6 +7,7 @@ import HomeView from './HomeView.vue'
 import GameView from './GameView.vue'
 import CustomMarkDown from '@/components/CustomMarkDown.vue'
 import CustomModal from '@/components/CustomModal.vue'
+import CustomTreeItem from '@/components/CustomTreeItem.vue'
 
 const posts = ref([
   { id: 1, title: 'test01' },
@@ -25,6 +26,13 @@ const tabs = {
 
 const showModal = ref(false)
 
+const modle = ref({
+  name: 'Root',
+  children: [
+    { name: 'Child 1', children: [] },
+    { name: 'Child 2', children: [{ name: 'Grandchild 1', children: [] }] }
+  ]
+})
 </script>
 
 <template>
@@ -41,16 +49,11 @@ const showModal = ref(false)
     ></BlogPost>
   </div>
 
-  <AlertBox>
-    test
-  </AlertBox>
+  <AlertBox> test </AlertBox>
 
   <div class="demo">
-    <button
-    v-for="(_, tab) in tabs"
-    :key="tab"
-    @click="currentTab = tab">
-      {{ tab }} 
+    <button v-for="(_, tab) in tabs" :key="tab" @click="currentTab = tab">
+      {{ tab }}
     </button>
     <KeepAlive>
       <component :is="tabs[currentTab]" />
@@ -61,9 +64,7 @@ const showModal = ref(false)
     <CustomMarkDown />
   </div>
 
-  <button id="show-modal" @click="showModal = true">
-    Show Modal
-  </button>
+  <button id="show-modal" @click="showModal = true">Show Modal</button>
 
   <Teleport to="body">
     <CustomModal :show="showModal" @close="showModal = false">
@@ -72,6 +73,8 @@ const showModal = ref(false)
       </template>
     </CustomModal>
   </Teleport>
+
+  <CustomTreeItem :module="modle" />
 </template>
 
 <style scoped>