vue2-client 1.22.19 → 1.22.21

package/src/components/MarkdownEditor/demo.vue

@@ -1,300 +1,300 @@
-<template>
-  <div class="article-edit">
-    <a-card>
-      <template #title>
-        <div class="card-header">
-          <span>📝 {{ isEdit ? '编辑文章' : '新建文章' }}</span>
-          <span class="article-id" v-if="isEdit">ID: {{ articleId }}</span>
-        </div>
-      </template>
-
-      <!-- 文章信息 -->
-      <a-form layout="vertical">
-        <a-form-item label="标题">
-          <a-input
-            v-model="form.title"
-            placeholder="请输入文章标题"
-            size="large"
-          />
-        </a-form-item>
-
-        <a-form-item label="分类">
-          <a-select
-            v-model="form.category"
-            placeholder="请选择分类"
-            style="width: 200px"
-          >
-            <a-select-option value="tech">技术</a-select-option>
-            <a-select-option value="life">生活</a-select-option>
-            <a-select-option value="travel">旅行</a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-form>
-
-      <!-- Markdown 编辑器 -->
-      <div class="editor-container">
-        <MarkdownEditor
-          ref="editor"
-          v-model="form.content"
-          :serviceName="serviceName"
-          :imgPrefix="imgPrefix"
-          :height="editorHeight"
-          @upload-success="handleUploadSuccess"
-          @change="handleContentChange"
-        />
-      </div>
-
-      <!-- 底部操作栏 -->
-      <div class="action-bar">
-        <a-space>
-          <a-button @click="handlePreview">预览</a-button>
-          <a-button type="primary" @click="handleSubmit" :loading="submitting">
-            {{ isEdit ? '更新' : '发布' }}
-          </a-button>
-        </a-space>
-        <span class="info-text">
-          共 {{ form.content.length }} 字符
-        </span>
-      </div>
-    </a-card>
-
-    <!-- ===== 预览弹窗（固定高度滚动） ===== -->
-    <a-modal
-      v-model="previewVisible"
-      title="文章预览"
-      width="800px"
-      :footer="null"
-      :bodyStyle="{ padding: '0', height: '600px' }"
-    >
-      <div class="preview-container">
-        <div class="preview-content" v-html="previewHtml"></div>
-      </div>
-    </a-modal>
-  </div>
-</template>
-
-<script>
-import MarkdownEditor from '@/components/MarkdownEditor'
-
-export default {
-  name: 'ArticleEdit',
-  components: { MarkdownEditor },
-
-  data() {
-    return {
-      articleId: this.$route.params.id || null,
-      isEdit: !!this.$route.params.id,
-      submitting: false,
-      previewVisible: false,
-      previewHtml: '',
-
-      // 编辑器高度
-      editorHeight: '600px',
-
-      // 上传配置
-      serviceName: 'af-revenue',
-      imgPrefix: process.env.VUE_APP_IMG_PREFIX || '',
-
-      form: {
-        title: '',
-        category: 'tech',
-        content: '# 开始写作\n\n在这里编写你的文章内容...'
-      }
-    }
-  },
-
-  mounted() {
-    if (this.isEdit) {
-      this.loadArticle()
-    }
-  },
-
-  methods: {
-    async loadArticle() {
-      try {
-        const { data } = await this.$axios.get(`/api/article/${this.articleId}`)
-        this.form = data
-      } catch (error) {
-        console.error('加载文章失败:', error)
-        this.$message.error('加载文章失败')
-      }
-    },
-
-    handleUploadSuccess({ pos, file, relativePath, response }) {
-      console.log('图片上传成功:', {
-        pos,
-        fileName: file.name,
-        relativePath,
-        response
-      })
-    },
-
-    handleContentChange({ value, render }) {
-      this.form.content = value
-      this.previewHtml = render
-    },
-
-    handlePreview() {
-      this.previewHtml = this.$refs.editor.getHtml()
-      this.previewVisible = true
-    },
-
-    async handleSubmit() {
-      if (!this.form.title.trim()) {
-        this.$message.warning('请输入文章标题')
-        return
-      }
-
-      if (!this.form.content.trim()) {
-        this.$message.warning('请输入文章内容')
-        return
-      }
-
-      this.submitting = true
-      try {
-        const api = this.isEdit
-          ? `/api/article/${this.articleId}`
-          : '/api/article'
-        const method = this.isEdit ? 'put' : 'post'
-
-        await this.$axios[method](api, this.form)
-        this.$message.success(this.isEdit ? '更新成功' : '发布成功')
-
-        setTimeout(() => {
-          this.$router.push('/articles')
-        }, 1000)
-
-      } catch (error) {
-        console.error('提交失败:', error)
-        this.$message.error('提交失败，请重试')
-      } finally {
-        this.submitting = false
-      }
-    },
-
-    goBack() {
-      this.$router.go(-1)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.article-edit {
-  padding: 24px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.article-id {
-  color: #999;
-  font-size: 14px;
-}
-
-.editor-container {
-  height: 600px;
-  margin: 16px 0;
-}
-
-.action-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-  margin-top: 16px;
-}
-
-.info-text {
-  color: #999;
-  font-size: 14px;
-}
-
-/* ===== 预览容器 - 固定高度滚动 ===== */
-.preview-container {
-  height: 600px;
-  overflow: hidden;
-  position: relative;
-}
-
-.preview-content {
-  height: 100%;
-  padding: 20px 24px;
-  overflow-y: auto;
-  word-wrap: break-word;
-}
-
-/* 预览内容样式 */
-.preview-content img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 12px 0;
-}
-
-.preview-content h1 {
-  font-size: 28px;
-  margin: 24px 0 16px;
-}
-
-.preview-content h2 {
-  font-size: 22px;
-  margin: 20px 0 12px;
-}
-
-.preview-content pre {
-  background: #f6f8fa;
-  padding: 16px;
-  border-radius: 8px;
-  overflow-x: auto;
-}
-
-.preview-content code {
-  background: #f6f8fa;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Courier New', monospace;
-}
-
-.preview-content table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 12px 0;
-}
-
-.preview-content th,
-.preview-content td {
-  border: 1px solid #e8e8e8;
-  padding: 8px 12px;
-}
-
-.preview-content th {
-  background: #f5f7fa;
-}
-
-/* 滚动条样式 */
-.preview-content::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.preview-content::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.preview-content::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.preview-content::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-</style>
+<template>
+  <div class="article-edit">
+    <a-card>
+      <template #title>
+        <div class="card-header">
+          <span>📝 {{ isEdit ? '编辑文章' : '新建文章' }}</span>
+          <span class="article-id" v-if="isEdit">ID: {{ articleId }}</span>
+        </div>
+      </template>
+
+      <!-- 文章信息 -->
+      <a-form layout="vertical">
+        <a-form-item label="标题">
+          <a-input
+            v-model="form.title"
+            placeholder="请输入文章标题"
+            size="large"
+          />
+        </a-form-item>
+
+        <a-form-item label="分类">
+          <a-select
+            v-model="form.category"
+            placeholder="请选择分类"
+            style="width: 200px"
+          >
+            <a-select-option value="tech">技术</a-select-option>
+            <a-select-option value="life">生活</a-select-option>
+            <a-select-option value="travel">旅行</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+
+      <!-- Markdown 编辑器 -->
+      <div class="editor-container">
+        <MarkdownEditor
+          ref="editor"
+          v-model="form.content"
+          :serviceName="serviceName"
+          :imgPrefix="imgPrefix"
+          :height="editorHeight"
+          @upload-success="handleUploadSuccess"
+          @change="handleContentChange"
+        />
+      </div>
+
+      <!-- 底部操作栏 -->
+      <div class="action-bar">
+        <a-space>
+          <a-button @click="handlePreview">预览</a-button>
+          <a-button type="primary" @click="handleSubmit" :loading="submitting">
+            {{ isEdit ? '更新' : '发布' }}
+          </a-button>
+        </a-space>
+        <span class="info-text">
+          共 {{ form.content.length }} 字符
+        </span>
+      </div>
+    </a-card>
+
+    <!-- ===== 预览弹窗（固定高度滚动） ===== -->
+    <a-modal
+      v-model="previewVisible"
+      title="文章预览"
+      width="800px"
+      :footer="null"
+      :bodyStyle="{ padding: '0', height: '600px' }"
+    >
+      <div class="preview-container">
+        <div class="preview-content" v-html="previewHtml"></div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import MarkdownEditor from '@vue2-client/components/MarkdownEditor'
+
+export default {
+  name: 'ArticleEdit',
+  components: { MarkdownEditor },
+
+  data() {
+    return {
+      articleId: this.$route.params.id || null,
+      isEdit: !!this.$route.params.id,
+      submitting: false,
+      previewVisible: false,
+      previewHtml: '',
+
+      // 编辑器高度
+      editorHeight: '600px',
+
+      // 上传配置
+      serviceName: 'af-revenue',
+      imgPrefix: process.env.VUE_APP_IMG_PREFIX || '',
+
+      form: {
+        title: '',
+        category: 'tech',
+        content: '# 开始写作\n\n在这里编写你的文章内容...'
+      }
+    }
+  },
+
+  mounted() {
+    if (this.isEdit) {
+      this.loadArticle()
+    }
+  },
+
+  methods: {
+    async loadArticle() {
+      try {
+        const { data } = await this.$axios.get(`/api/article/${this.articleId}`)
+        this.form = data
+      } catch (error) {
+        console.error('加载文章失败:', error)
+        this.$message.error('加载文章失败')
+      }
+    },
+
+    handleUploadSuccess({ pos, file, relativePath, response }) {
+      console.log('图片上传成功:', {
+        pos,
+        fileName: file.name,
+        relativePath,
+        response
+      })
+    },
+
+    handleContentChange({ value, render }) {
+      this.form.content = value
+      this.previewHtml = render
+    },
+
+    handlePreview() {
+      this.previewHtml = this.$refs.editor.getHtml()
+      this.previewVisible = true
+    },
+
+    async handleSubmit() {
+      if (!this.form.title.trim()) {
+        this.$message.warning('请输入文章标题')
+        return
+      }
+
+      if (!this.form.content.trim()) {
+        this.$message.warning('请输入文章内容')
+        return
+      }
+
+      this.submitting = true
+      try {
+        const api = this.isEdit
+          ? `/api/article/${this.articleId}`
+          : '/api/article'
+        const method = this.isEdit ? 'put' : 'post'
+
+        await this.$axios[method](api, this.form)
+        this.$message.success(this.isEdit ? '更新成功' : '发布成功')
+
+        setTimeout(() => {
+          this.$router.push('/articles')
+        }, 1000)
+
+      } catch (error) {
+        console.error('提交失败:', error)
+        this.$message.error('提交失败，请重试')
+      } finally {
+        this.submitting = false
+      }
+    },
+
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.article-edit {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.article-id {
+  color: #999;
+  font-size: 14px;
+}
+
+.editor-container {
+  height: 600px;
+  margin: 16px 0;
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+  margin-top: 16px;
+}
+
+.info-text {
+  color: #999;
+  font-size: 14px;
+}
+
+/* ===== 预览容器 - 固定高度滚动 ===== */
+.preview-container {
+  height: 600px;
+  overflow: hidden;
+  position: relative;
+}
+
+.preview-content {
+  height: 100%;
+  padding: 20px 24px;
+  overflow-y: auto;
+  word-wrap: break-word;
+}
+
+/* 预览内容样式 */
+.preview-content img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 12px 0;
+}
+
+.preview-content h1 {
+  font-size: 28px;
+  margin: 24px 0 16px;
+}
+
+.preview-content h2 {
+  font-size: 22px;
+  margin: 20px 0 12px;
+}
+
+.preview-content pre {
+  background: #f6f8fa;
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+.preview-content code {
+  background: #f6f8fa;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+}
+
+.preview-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+}
+
+.preview-content th,
+.preview-content td {
+  border: 1px solid #e8e8e8;
+  padding: 8px 12px;
+}
+
+.preview-content th {
+  background: #f5f7fa;
+}
+
+/* 滚动条样式 */
+.preview-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.preview-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.preview-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.preview-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>