chore: 文件目录更改

apps/web-antd/src/components/dict/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '#/utils';
+
+import dictTag from './src/index.vue';
+
+export const DictTag = withInstall(dictTag);

apps/web-antd/src/components/dict/src/data.tsx

@@ -0,0 +1,44 @@
+import { type VNode } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+interface TagType {
+  [key: string]: { color: string; label: string };
+}
+
+export const tagTypes: TagType = {
+  cyan: { color: 'cyan', label: 'cyan' },
+  danger: { color: 'error', label: '危险(danger)' },
+  /** 由于和elementUI不同 用于替换颜色 */
+  default: { color: 'default', label: '默认(default)' },
+  green: { color: 'green', label: 'green' },
+  info: { color: 'default', label: '信息(info)' },
+  orange: { color: 'orange', label: 'orange' },
+  /** 自定义预设 color可以为16进制颜色 */
+  pink: { color: 'pink', label: 'pink' },
+  primary: { color: 'processing', label: '主要(primary)' },
+  purple: { color: 'purple', label: 'purple' },
+  red: { color: 'red', label: 'red' },
+  success: { color: 'success', label: '成功(success)' },
+  warning: { color: 'warning', label: '警告(warning)' },
+};
+
+// 字典选择使用 { label: string; value: string }[]
+interface Options {
+  label: string | VNode;
+  value: string;
+}
+
+export function tagSelectOptions() {
+  const selectArray: Options[] = [];
+  Object.keys(tagTypes).forEach((key) => {
+    if (!tagTypes[key]) return;
+    const label = tagTypes[key].label;
+    const color = tagTypes[key].color;
+    selectArray.push({
+      label: <Tag color={color}>{label}</Tag>,
+      value: key,
+    });
+  });
+  return selectArray;
+}

apps/web-antd/src/components/dict/src/index.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DictData } from '#/api/system/dict/dict-data-model';
+
+import { computed, watch } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { tagTypes } from './data';
+
+const props = withDefaults(
+  defineProps<{
+    dicts: DictData[]; // dict数组
+    value: number | string; // value
+  }>(),
+  {
+    dicts: undefined,
+  },
+);
+
+watch(
+  () => props.dicts,
+  (value) => {
+    console.log('dicts change', value);
+  },
+);
+
+const color = computed<string>(() => {
+  // eslint-disable-next-line eqeqeq
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  const listClass = current?.listClass ?? '';
+  // 是否为默认的颜色
+  const isDefault = Reflect.has(tagTypes, listClass);
+  // 判断是默认还是自定义颜色
+  if (isDefault) {
+    // 这里做了antd - element-plus的兼容
+    return tagTypes[listClass]!.color;
+  }
+  return listClass;
+});
+
+const cssClass = computed<string>(() => {
+  // eslint-disable-next-line eqeqeq
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.cssClass ?? '';
+});
+
+const label = computed<number | string>(() => {
+  // eslint-disable-next-line eqeqeq
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.dictLabel ?? 'unknown';
+});
+</script>
+
+<template>
+  <div>
+    <Tag v-if="color" :class="cssClass" :color="color">{{ label }}</Tag>
+    <div v-if="!color" :class="cssClass">{{ label }}</div>
+  </div>
+</template>

apps/web-antd/src/components/tinymce/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '#/utils';
+
+import tinymce from './src/editor.vue';
+
+export const Tinymce = withInstall(tinymce);

apps/web-antd/src/components/tinymce/src/helper.ts

@@ -0,0 +1,85 @@
+const validEvents = new Set([
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBeforePaste',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResizeStart',
+  'onObjectResized',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid',
+]);
+
+const isValidKey = (key: string) => validEvents.has(key);
+
+export const bindHandlers = (
+  initEvent: Event,
+  listeners: any,
+  editor: any,
+): void => {
+  Object.keys(listeners)
+    .filter((element) => isValidKey(element))
+    .forEach((key: string) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.slice(2), (e: any) => handler(e, editor));
+        }
+      }
+    });
+};

apps/web-antd/src/components/tinymce/src/img-upload.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAppConfig } from '@vben/hooks';
+import { useAccessStore } from '@vben/stores';
+
+import { message, Upload } from 'ant-design-vue';
+
+defineOptions({ name: 'TinymceImageUpload' });
+
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  fullscreen: {
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['uploading', 'done', 'error']);
+
+let uploading = false;
+
+const { apiURL, clientId } = useAppConfig(
+  import.meta.env,
+  import.meta.env.PROD,
+);
+const accessStore = useAccessStore();
+const uploadUrl = `${apiURL}/resource/oss/upload`;
+// 使用upload组件只能这样上传
+const headers = {
+  Authorization: `Bearer ${accessStore.accessToken}`,
+  clientId,
+};
+
+const getButtonProps = computed(() => {
+  const { disabled } = props;
+  return {
+    disabled,
+  };
+});
+
+function handleChange(info: Record<string, any>) {
+  const file = info.file;
+  const status = file?.status;
+  // const url = file?.response?.data.url;
+  const name = file?.name;
+
+  switch (status) {
+    case 'uploading': {
+      if (!uploading) {
+        emit('uploading', name);
+        uploading = true;
+      }
+
+      break;
+    }
+    case 'done': {
+      // http 200会走到这里  需要再次判断
+      const { response } = file;
+      const { code, data, msg = '服务器错误' } = response;
+      if (code === 200) {
+        const { url } = data;
+        emit('done', name, url);
+      } else {
+        message.error(msg);
+      }
+      // emit('done', name, url);
+      uploading = false;
+
+      break;
+    }
+    case 'error': {
+      emit('error');
+      uploading = false;
+
+      break;
+    }
+    // No default
+  }
+}
+</script>
+<template>
+  <div :class="[{ fullscreen }]" class="tinymce-image-upload">
+    <Upload
+      :action="uploadUrl"
+      :headers="headers"
+      :show-upload-list="false"
+      accept=".jpg,.jpeg,.gif,.png,.webp"
+      multiple
+      name="file"
+      @change="handleChange"
+    >
+      <!-- 这里要改成i18n -->
+      <a-button type="primary" v-bind="{ ...getButtonProps }">
+        图片上传
+      </a-button>
+    </Upload>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tinymce-image-upload {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  z-index: 20;
+
+  &.fullscreen {
+    position: fixed;
+    z-index: 10000;
+  }
+}
+</style>

apps/web-antd/src/components/tinymce/src/tinymce.ts

@@ -0,0 +1,11 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+// quickbars 快捷栏
+export const plugins =
+  'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion';
+
+export const toolbar =
+  'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl';