写字组件

src/api/app.js

@@ -15,7 +15,7 @@ export function GetLogo(data) {
  * TODO: 这个接口需要移动到 eep 服务中
  */
 export function GetFileURLMap(data) {
-  return http.post(`${process.env.VUE_APP_FileServer}?MethodName=file_store_manager-GetFileURLMap`, data);
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=file_store_manager-GetFileURLMap`, data);
 }
 
 /**
@@ -23,7 +23,7 @@ export function GetFileURLMap(data) {
  * TODO: 这个接口需要移动到 eep 服务中
  */
 export function GetFileStoreInfo(data) {
-  return http.post(`${process.env.VUE_APP_FileServer}?MethodName=file_store_manager-GetFileStoreInfo`, data);
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=file_store_manager-GetFileStoreInfo`, data);
 }
 
 /**

src/icons/svg/camera.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747728787555"
+  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4246"
+  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <path
+    d="M269.44 256l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333z m23.605333 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v426.666667a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V373.333333a53.333333 53.333333 0 0 0-53.333334-53.333333h-90.378666a32 32 0 0 1-30.570667-22.549333l-30.272-97.930667a10.666667 10.666667 0 0 0-10.186667-7.52H364.074667a10.666667 10.666667 0 0 0-10.186667 7.52l-30.272 97.92A32 32 0 0 1 293.045333 320zM512 725.333333c-88.362667 0-160-71.637333-160-160 0-88.362667 71.637333-160 160-160 88.362667 0 160 71.637333 160 160 0 88.362667-71.637333 160-160 160z m0-64a96 96 0 1 0 0-192 96 96 0 0 0 0 192z"
+    fill="currentColor" p-id="4247"></path>
+</svg>

src/icons/svg/write_base.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747712026273" class="icon" viewBox="0 0 1147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2531" xmlns:xlink="http://www.w3.org/1999/xlink" width="224.0234375" height="200"><path d="M62 902.996h1007.998v56.124h-1007.998v-56.124zM62 864.245l264.137-74.992-188.667-187.513-75.47 262.505zM767.475 350.607l-188.67-187.516-415.077 412.522 188.667 187.497 415.080-412.504zM855.163 193.093l-117.923-117.189c-19.537-19.42-52.267-18.363-73.108 2.342l-56.61 56.243 188.67 187.515 56.606-56.26c20.841-20.707 21.899-53.227 2.364-72.651z" p-id="2532"></path></svg>

src/views/book/courseware/create/components/base/write_base/WriteBase.vue

@@ -0,0 +1,38 @@
+<template>
+  <ModuleBase :type="data.type">
+    <template #content>
+      <!-- eslint-disable max-len -->
+      <div class="write-base-wrapper">
+        <span>占位</span>
+      </div>
+    </template>
+  </ModuleBase>
+</template>
+
+<script>
+import ModuleMixin from '../../common/ModuleMixin';
+
+import { getWriteBaseData } from '@/views/book/courseware/data/writeBase';
+
+export default {
+  name: 'WriteBasePage',
+  components: {},
+  mixins: [ModuleMixin],
+  data() {
+    return {
+      data: getWriteBaseData(),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.write-base-wrapper {
+  min-height: 100px;
+  line-height: 100px;
+  color: #aaa;
+  text-align: center;
+  background: #f7f8fa;
+}
+</style>

src/views/book/courseware/create/components/base/write_base/WriteBaseSetting.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-form :model="property" label-width="72px" label-position="left">
+      <SerailNumber :property="property" />
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SettingMixin from '@/views/book/courseware/create/components/common/SettingMixin';
+
+import { getWriteBaseProperty } from '@/views/book/courseware/data/writeBase';
+
+export default {
+  name: 'WriteBaseSetting',
+  mixins: [SettingMixin],
+  data() {
+    return {
+      property: getWriteBaseProperty(),
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.el-form {
+  @include setting-base;
+}
+</style>

src/views/book/courseware/data/bookType.js

@@ -53,6 +53,8 @@ import Input from '../create/components/question/input/Input.vue';
 import InputSetting from '../create/components/question/input/InputSetting.vue';
 import Judge from '../create/components/question/judge/Judge.vue';
 import JudgeSetting from '../create/components/question/judge/JudgeSetting.vue';
+import WriteBase from '../create/components/base/write_base/WriteBase.vue';
+import WriteBaseSetting from '../create/components/base/write_base/WriteBaseSetting.vue';
 
 // 预览组件页面列表
 import AudioPreview from '@/views/book/courseware/preview/components/audio/AudioPreview.vue';
@@ -83,6 +85,7 @@ import MathPreview from '../preview/components/math/MathPreview.vue';
 import InputPreview from '../preview/components/input/InputPreview.vue';
 
 import JudgePreview from '../preview/components/judge/JudgePreview.vue';
+import WriteBasePreview from '../preview/components/write_base/WriteBasePreview.vue';
 
 export const bookTypeOption = [
   {
@@ -178,13 +181,21 @@ export const bookTypeOption = [
         set: PinyinBaseSetting,
         preview: PinyinBasePreview,
       },
+      // {
+      //   value: 'character_base',
+      //   label: '汉字',
+      //   icon: 'chineseCharacter',
+      //   component: CharacterBase,
+      //   set: CharacterBaseSetting,
+      //   preview: CharacterBasePreview,
+      // },
       {
-        value: 'character_base',
-        label: '汉字',
-        icon: 'chineseCharacter',
-        component: CharacterBase,
-        set: CharacterBaseSetting,
-        preview: CharacterBasePreview,
+        value: 'write_base',
+        label: '写字',
+        icon: 'write_base',
+        component: WriteBase,
+        set: WriteBaseSetting,
+        preview: WriteBasePreview,
       },
     ],
   },

src/views/book/courseware/data/writeBase.js

@@ -0,0 +1,95 @@
+import {
+  displayList,
+  serialNumberTypeList,
+  serialNumberPositionList,
+  arrangeTypeList,
+  switchOption,
+  isEnable,
+} from '@/views/book/courseware/data/common';
+import { getRandomNumber } from '@/utils';
+
+export { arrangeTypeList, switchOption, isEnable };
+
+// 音频位置
+export const audioPositionList = [
+  { value: 'front', label: '拼音前' },
+  { value: 'back', label: '拼音后' },
+];
+
+// 读音生成方式
+export const audioGenerationMethodList = [
+  {
+    value: 'upload',
+    label: '上传',
+  },
+  {
+    value: 'auto',
+    label: '自动生成',
+  },
+  {
+    value: 'record',
+    label: '录音',
+  },
+];
+
+// 功能
+export const funList = [
+  {
+    value: 'show',
+    label: '汉字展示',
+  },
+  {
+    value: 'write',
+    label: '汉字书写',
+  },
+];
+
+// 显示
+export const showList = [
+  {
+    value: 'true',
+    label: '显示',
+  },
+  {
+    value: 'false',
+    label: '不显示',
+  },
+];
+
+// 汉字框
+export const frameList = [
+  {
+    value: 'tian',
+    label: '田字格',
+  },
+  {
+    value: 'fang',
+    label: '方框',
+  },
+  {
+    value: 'none',
+    label: '无',
+  },
+];
+
+export function getWriteBaseProperty() {
+  return {
+    serial_number: 1,
+    sn_type: serialNumberTypeList[0].value,
+    sn_position: serialNumberPositionList[0].value,
+    sn_display_mode: displayList[0].value,
+  };
+}
+
+export function getWriteBaseData() {
+  return {
+    type: 'write_base',
+    title: '写字',
+    property: getWriteBaseProperty(),
+    mark: getRandomNumber(),
+    write_base64:[''],
+    answer: {
+      answer_list: [],
+    },
+  };
+}

src/views/book/courseware/preview/components/write_base/WriteBasePreview.vue

@@ -0,0 +1,96 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="write-base-preview" :style="getAreaStyle()">
+    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
+
+    <div class="main" v-if="width">
+      <h2>书写区</h2>
+      <div class="esign-box">
+        <vue-esign
+          class="esign-canvas"
+          ref="esign"
+          :width="width"
+          :height="150"
+          :isCrop="isCrop"
+          :lineWidth="lineWidth"
+          :lineColor="lineColor"
+          :bgColor.sync="bgColor"
+        />
+        <div class="btn-box">
+          <SvgIcon icon-class="clear" size="12" @click="handleReset" title="清除" />
+          <SvgIcon icon-class="camera" size="12" @click="handleGenerate" title="保存" />
+        </div>
+      </div>
+      <h2>展示区</h2>
+      <img :src="data.write_base64[0]" v-if="data.write_base64[0]" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getWriteBaseData } from '@/views/book/courseware/data/writeBase';
+
+import PreviewMixin from '../common/PreviewMixin';
+import vueEsign from 'vue-esign';
+
+export default {
+  name: 'WriteBasePreview',
+  components: { vueEsign },
+  mixins: [PreviewMixin],
+  data() {
+    return {
+      data: getWriteBaseData(),
+      lineWidth: 2,
+      lineColor: '#000000',
+      bgColor: '#f7f8fa',
+      isCrop: false,
+      width: 0,
+    };
+  },
+  computed: {},
+  watch: {},
+  mounted() {
+    this.width = document.getElementsByClassName('write-base-preview')[0].clientWidth - 16;
+  },
+  methods: {
+    handleReset() {
+      this.$refs.esign.$el.style.backgroundColor = '#f7f8fa';
+      this.$refs.esign.reset();
+      this.$refs.esign.$el.style.backgroundColor = '#f7f8fa';
+    },
+    handleGenerate() {
+      this.$refs.esign
+        .generate({ format: 'png', quality: 0.8 })
+        .then((res) => {
+          this.data.write_base64[0] = res;
+          this.$forceUpdate();
+        })
+        .catch((err) => {
+          console.error(err);
+          alert('生成图片失败：' + err.message);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/mixin.scss' as *;
+
+.write-base-preview {
+  @include preview-base;
+
+  display: block;
+
+  .main {
+    h2 {
+      margin: 0;
+      font-size: 14px;
+    }
+
+    .esign-canvas {
+      background-color: '#f7f8fa' !important;
+    }
+  }
+}
+</style>