新增前端vue

2025-11-26 13:55:01 +08:00
parent ae391f1b94
commit ffd5a6ad66
781 changed files with 83348 additions and 0 deletions
--- a/web-vue/packages/test/views/demo/markdown.vue
+++ b/web-vue/packages/test/views/demo/markdown.vue
@@ -0,0 +1,118 @@
+<template>
+  <PageWrapper title="Markdown 组件实例" :contentFullHeight="false">
+    <CollapseContainer title="Markdown 演示" :expand="true">
+      <Markdown :bizKey="'123456'" :bizType="'testData'" v-model:value="valueRef" @change="handleChange" />
+      <a-button @click="clearValue" class="mt-2 mr-2" type="default"> 清空内容 </a-button>
+      <a href="https://ld246.com/article/1583308420519" target="_blank">语法速查手册</a>、
+      <a href="https://ld246.com/article/1583129520165" target="_blank">基础语法</a>、
+      <a href="https://ld246.com/article/1583305480675" target="_blank">扩展语法</a>、
+      <a href="https://ld246.com/article/1582778815353" target="_blank">键盘快捷键</a>
+    </CollapseContainer>
+    <CollapseContainer title="Markdown 预览" :expand="false">
+      <MarkdownViewer :value="valueRef" />
+    </CollapseContainer>
+    <CollapseContainer title="Markdown 表单" :expand="false">
+      <BasicForm
+        :labelWidth="100"
+        :schemas="schemas"
+        :actionColOptions="{ span: 24, style: 'text-align: center' }"
+        :baseColProps="{ span: 24 }"
+        :showActionButtonGroup="true"
+        @submit="handleSubmit"
+      />
+    </CollapseContainer>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, h } from 'vue';
+  import { Markdown, MarkdownViewer } from '@jeesite/core/components/Markdown';
+  import { PageWrapper } from '@jeesite/core/components/Page';
+
+  import { BasicForm, FormSchema } from '@jeesite/core/components/Form';
+  import { CollapseContainer } from '@jeesite/core/components/Container';
+  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+
+  const valueRef = ref(`
+# 标题h1
+
+##### 标题h5
+
+**加粗**
+*斜体*
+~~删除线~~
+[链接](https://jeesite.com)
+↓分割线↓
+
+---
+
+
+* 无序列表1
+  * 无序列表1.1
+
+1. 有序列表1
+2. 有序列表2
+
+* [ ] 任务列表1
+* [x] 任务列表2
+
+> 引用示例
+
+\`\`\`js
+// 代码块:
+(() => {
+  var htmlRoot = document.getElementById('htmlRoot');
+  var theme = window.localStorage.getItem('__APP__DARK__MODE__');
+  if (htmlRoot && theme) {
+    htmlRoot.setAttribute('data-theme', theme);
+    theme = htmlRoot = null;
+  }
+})();
+\`\`\`
+
+| 表格 | 示例 | 🎉️ |
+| --- | --- | --- |
+| 1 | 2 | 3 |
+| 4 | 5 | 6 |
+`);
+
+  function handleChange(v: string) {
+    valueRef.value = v;
+  }
+
+  function clearValue() {
+    valueRef.value = '';
+  }
+
+  // 在表单中展示
+  const schemas: FormSchema[] = [
+    {
+      field: 'title',
+      component: 'Input',
+      label: '标题',
+      defaultValue: '标题',
+      rules: [{ required: true }],
+    },
+    {
+      field: 'markdown',
+      component: 'Input',
+      label: '内容',
+      defaultValue: '内容',
+      rules: [{ required: true, trigger: 'blur' }],
+      render: ({ model, field }) => {
+        return h(Markdown, {
+          bizKey: '123456',
+          bizType: 'testData',
+          value: model[field],
+          onChange: (value: string) => {
+            model[field] = value;
+          },
+        });
+      },
+    },
+  ];
+  const { createMessage } = useMessage();
+
+  function handleSubmit(values: any) {
+    createMessage.success('values:' + JSON.stringify(values));
+  }
+</script>