Merge branch 'feat/post' into dev

package.json

@@ -23,6 +23,7 @@
     "@tiptap/extension-heading": "^2.10.3",
     "@tiptap/extension-highlight": "^2.10.3",
     "@tiptap/extension-horizontal-rule": "^2.10.3",
+    "@tiptap/extension-image": "^2.10.3",
     "@tiptap/extension-paragraph": "^2.10.3",
     "@tiptap/extension-text": "^2.10.3",
     "@tiptap/vue-3": "^2.10.3",
@@ -71,7 +72,7 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.11"
+    "vite": "^6.0.1"
   },
   "lint-staged": {
     "*.(ts|vue)": [

src/composables/useRequest.ts

@@ -5,54 +5,54 @@ import apiClient from "@/api/axios";
 type HttpMethod = "get" | "post" | "put" | "delete";
 
 interface RequestOptions {
-    url: string;
-    method?: HttpMethod;
-    requestData?: Record<string, unknown> | FormData;
-    headers?: Record<string, string>; // 新增 headers 参数
+  url: string;
+  method?: HttpMethod;
+  requestData?: Record<string, unknown> | FormData;
+  headers?: Record<string, string>; // 新增 headers 参数
 }
 
 // 定义 useRequest 返回的类型
 interface UseRequestResult<T> {
-    data: Ref<T | null>;
-    error: Ref<Error | null>;
-    loading: Ref<boolean>;
-    executeRequest: (options: RequestOptions) => Promise<void>;
+  data: Ref<T | null>;
+  error: Ref<Error | null>;
+  loading: Ref<boolean>;
+  executeRequest: (options: RequestOptions) => Promise<void>;
 }
 
 export function useRequest<T = unknown>(): UseRequestResult<T> {
-    const data = shallowRef<T | null>(null);
-    const error = shallowRef<Error | null>(null);
-    const loading = shallowRef<boolean>(false);
-
-    const executeRequest = async ({
+  const data = shallowRef<T | null>(null);
+  const error = shallowRef<Error | null>(null);
+  const loading = shallowRef<boolean>(false);
+
+  const executeRequest = async ({
+    url,
+    method = "get",
+    requestData,
+    headers, // 接收 headers 参数
+  }: RequestOptions): Promise<void> => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const response = await apiClient.request<T>({
         url,
-        method = "get",
-        requestData,
-        headers, // 接收 headers 参数
-    }: RequestOptions): Promise<void> => {
-        loading.value = true;
-        error.value = null;
-
-        try {
-            const response = await apiClient.request<T>({
-                url,
-                method,
-                headers, // 添加 headers 到请求配置
-                ...(method !== "get" ? { data: requestData } : {}),
-            });
-
-            data.value = response;
-        } catch (err) {
-            error.value = err instanceof Error ? err : new Error(String(err));
-        } finally {
-            loading.value = false;
-        }
-    };
-
-    return {
-        data,
-        error,
-        loading,
-        executeRequest,
-    };
+        method,
+        headers, // 添加 headers 到请求配置
+        ...(method !== "get" ? { data: requestData } : {}),
+      });
+
+      data.value = response;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    data,
+    error,
+    loading,
+    executeRequest,
+  };
 }

src/features/post/components/AppEditor.vue

@@ -6,106 +6,101 @@ import Text from "@tiptap/extension-text";
 import Paragraph from "@tiptap/extension-paragraph";
 import CodeBlock from "@tiptap/extension-code-block";
 import Heading from "@tiptap/extension-heading";
-import { onBeforeUnmount } from "vue";
+import { onBeforeUnmount, onMounted } from "vue";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Bold from "@tiptap/extension-bold";
 import AppTableExtension from "../extensions/app-table";
 import EditorMenuBar from "@post/components/editor-menu-bar/index.vue";
+import Image from "@tiptap/extension-image";
+
+const jsonData = {
+  type: "doc",
+  content: [
+    {
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "哈哈哈",
+        },
+      ],
+    },
+    {
+      type: "appTable",
+      attrs: {
+        tableData: [
+          [null, null, null, null, null],
+          [null, null, null, "32", "32"],
+          [null, null, "", null, "32"],
+          [null, null, "32", "32", "32"],
+          [null, null, null, "32", "32"],
+        ],
+      },
+    },
+  ],
+};
 
 const editor = useEditor({
-  content: `
-      测试
-      `,
+  content: jsonData,
   extensions: [
     Document,
     Paragraph,
     Text,
     Blockquote,
     CodeBlock,
     Heading.configure({
-      levels: [1, 2, 3],
+      levels: [1, 2, 3, 4, 5],
     }),
     HorizontalRule,
     Bold,
+    Image.configure({
+      allowBase64: true,
+    }),
     AppTableExtension,
   ],
 });
 
+const handleClick = () => {
+  console.log("tiptap 数据:", editor?.value?.getJSON());
+};
+
+onMounted(() => {});
+
 onBeforeUnmount(() => {
   editor.value?.destroy();
 });
 </script>
 
 <template>
-  <div v-if="editor" class="container">
+  <div v-if="editor" class="app-editor">
     <EditorMenuBar :editor="editor"></EditorMenuBar>
-    <div class="control-group">
-      <div class="button-group">
-        <button
-          :class="{ 'is-active': editor.isActive('codeBlock') }"
-          @click="
-            editor
-              .chain()
-              .focus()
-              .insertContent('<app-table></app-table>')
-              .run()
-          "
-        >
-          Toggle code block
-        </button>
-        <button :disabled="editor.isActive('codeBlock')">Set code block</button>
-      </div>
-    </div>
-    <editor-content :editor="editor" />
+    <editor-content :editor="editor" class="app-editor__content" />
+    <button class="test" @click="handleClick">查看json</button>
   </div>
 </template>
 
 <style lang="scss">
-blockquote {
-  border-left: 3px solid red;
-  margin: 1.5rem 0;
-  padding-left: 1rem;
-}
+@use "../styles/markdown.scss";
 
-code {
-  background: none;
-  color: inherit;
-  font-size: 0.8rem;
-  padding: 0;
-}
+.app-editor {
+  height: 100vh;
+  background-color: #eee;
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.1;
-  margin-top: 2.5rem;
-  text-wrap: pretty;
-}
-
-h1,
-h2 {
-  margin-top: 3.5rem;
-  margin-bottom: 1.5rem;
-}
+  &__content {
+    width: 80%;
+    margin: 0 auto;
 
-h1 {
-  font-size: 1.4rem;
-}
-
-h2 {
-  font-size: 1.2rem;
-}
+    box-sizing: border-box;
+    border: 1px solid #999;
+    border-radius: var(--border);
 
-h3 {
-  font-size: 1.1rem;
+    p {
+      height: 100%;
+    }
+  }
 }
 
-h4,
-h5,
-h6 {
-  font-size: 1rem;
+.test {
+  position: absolute;
 }
 </style>

src/features/post/components/editor-extension-views/AppTable.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import HotTable from "@handsontable/vue3";
+import { HotTable } from "@handsontable/vue3";
 import { NodeViewWrapper, type NodeViewProps } from "@tiptap/vue-3";
 import { onBeforeUnmount, onMounted, ref } from "vue";
-import type Handsontable from "handsontable";
 import "handsontable/dist/handsontable.full.css";
 import { HyperFormula } from "hyperformula";
 import { registerAllModules } from "handsontable/registry";
+import type Handsontable from "handsontable";
 
-defineProps<NodeViewProps>();
+const props = defineProps<NodeViewProps>();
 registerAllModules();
 
-const tableRef = ref<Handsontable | null>(null);
-const data = null;
+const tableRef = ref<unknown | null>(null);
+
 const hotSettings = {
   startRows: 5,
   startCols: 5,
@@ -27,8 +27,14 @@ const hotSettings = {
   licenseKey: "non-commercial-and-evaluation",
 };
 
+console.log(hotSettings);
+
 onMounted(() => {
-  if (!tableRef.value) return;
+  let tableInstance = tableRef.value?.hotInstance as Handsontable.Core;
+
+  tableInstance.addHook("afterChange", () => {
+    console.log(tableInstance.getSourceData());
+  });
 });
 
 onBeforeUnmount(() => {
@@ -41,7 +47,11 @@ onBeforeUnmount(() => {
 
 <template>
   <NodeViewWrapper class="app-table">
-    <HotTable ref="tableRef" :data="data" :settings="hotSettings"></HotTable>
+    <HotTable
+      ref="tableRef"
+      :data="props.node.attrs.tableData"
+      :settings="hotSettings"
+    ></HotTable>
   </NodeViewWrapper>
 </template>