Merge remote-tracking branch 'yudao-ui-admin-vue3/dev' into dev

# Conflicts:
#	package.json

Author: ChronosFork

.image/common/ai-feature.png

@@ -191,26 +191,24 @@ ps：核心功能已经实现，正在对接微信小程序中...
 
 ### 商城系统
 
+演示地址：<https://doc.iocoder.cn/mall-preview/>
+
 ![功能图](/.image/common/mall-feature.png)
 
 ![功能图](/.image/common/mall-preview.png)
 
-_前端基于 crmeb uniapp 经过授权重构，优化代码实现，接入芋道快速开发平台_
-
-演示地址：<https://doc.iocoder.cn/mall-preview/>
-
 ### ERP 系统
 
-![功能图](/.image/common/erp-feature.png)
-
 演示地址：<https://doc.iocoder.cn/erp-preview/>
 
-### CRM 系统
+![功能图](/.image/common/erp-feature.png)
 
-![功能图](/.image/common/crm-feature.png)
+### CRM 系统
 
 演示地址：<https://doc.iocoder.cn/crm-preview/>
 
+![功能图](/.image/common/crm-feature.png)
+
 ## 🐷 演示图
 
 ### 系统功能

.image/common/ai-preview.gif

@@ -56,6 +56,10 @@ export const ImageApi = {
   getImagePageMy: async (params: PageParam) => {
     return await request.get({ url: `/ai/image/my-page`, params })
   },
+  // 获取公开的绘图记录
+  getImagePagePublic: async (params) => {
+    return await request.get({ url: `/ai/image/public-page`, params })
+  },
   // 获取【我的】绘图记录
   getImageMy: async (id: number) => {
     return await request.get({ url: `/ai/image/get-my?id=${id}` })

README.md

@@ -17,7 +17,7 @@ export interface WriteVO {
   platform?: string // 平台
   model?: string // 模型
   generatedContent?: string // 生成的内容
-  errorMessage: string // 错误信息
+  errorMessage?: string // 错误信息
   createTime?: Date // 创建时间
 }
 

src/api/ai/image/index.ts

@@ -0,0 +1,10 @@
+import request from '@/config/axios'
+
+/**
+ * 获得商品浏览记录分页
+ *
+ * @param params 请求参数
+ */
+export const getBrowseHistoryPage = (params: any) => {
+  return request.get({ url: '/product/browse-history/page', params })
+}

src/api/ai/write/index.ts

@@ -1,10 +1,11 @@
 <template>
-  <div ref="contentRef" class="markdown-view" v-html="contentHtml"></div>
+<!--  <div ref="contentRef" class="markdown-view" v-html="contentHtml"></div>-->
+  <div ref="contentRef" class="markdown-view" v-html="renderedMarkdown"></div>
 </template>
 
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-import { marked } from 'marked'
+import {useClipboard} from '@vueuse/core'
+import MarkdownIt from 'markdown-it'
 import 'highlight.js/styles/vs2015.min.css'
 import hljs from 'highlight.js'
 
@@ -19,45 +20,26 @@ const props = defineProps({
 const message = useMessage() // 消息弹窗
 const { copy } = useClipboard() // 初始化 copy 到粘贴板
 const contentRef = ref()
-const contentHtml = ref<any>() // 渲染的html内容
 const { content } = toRefs(props) // 将 props 变为引用类型
 
-// 代码高亮：https://highlightjs.org/
-// 转换 markdown：marked
-
-/** marked 渲染器 */
-const renderer = {
-  code(code, language, c) {
-    let highlightHtml
-    try {
-      highlightHtml = hljs.highlight(code, { language: language, ignoreIllegals: true }).value
-    } catch (e) {
-      // skip
+const md = new MarkdownIt({
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
+        return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(lang, str, true).value}</code></pre>`
+      } catch (__) {}
     }
-    const copyHtml = `<div id="copy" data-copy='${code}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
-    return `<pre style="position: relative;">${copyHtml}<code class="hljs">${highlightHtml}</code></pre>`
+    return ``
   }
-}
-
-// 配置 marked
-marked.use({
-  renderer: renderer
-})
+});
 
-/** 监听 content 变化 */
-watch(content, async (newValue, oldValue) => {
-  await renderMarkdown(newValue)
-})
-
-/** 渲染 markdown */
-const renderMarkdown = async (content: string) => {
-  contentHtml.value = await marked(content)
-}
+const renderedMarkdown = computed(() => {
+  return md.render(props.content);
+});
 
 /** 初始化 **/
 onMounted(async () => {
-  // 解析转换 markdown
-  await renderMarkdown(props.content as string)
   // 添加 copy 监听
   contentRef.value.addEventListener('click', (e: any) => {
     if (e.target.id === 'copy') {

src/api/mall/product/history.ts

@@ -0,0 +1,85 @@
+<template>
+  <div class="square-container">
+    <el-input
+      v-model="searchText"
+      style="width: 100%; margin-bottom: 20px"
+      size="large"
+      placeholder="请输入要搜索的内容"
+      :suffix-icon="Search"
+      @keyup.enter="handleSearch"
+    />
+    <div class="gallery">
+      <div v-for="item in publicList" :key="item.id" class="gallery-item">
+        <img :src="item.picUrl" class="img" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ImageApi, ImageVO } from '@/api/ai/image'
+import { Search } from '@element-plus/icons-vue'
+
+/** 属性 */
+// TODO @fan：queryParams 里面搞分页哈。
+const pageNo = ref<number>(1)
+const pageSize = ref<number>(20)
+const publicList = ref<ImageVO[]>([])
+const searchText = ref<string>('')
+
+/** 获取数据 */
+const getListData = async () => {
+  const res = await ImageApi.getImagePagePublic({
+    pageNo: pageNo.value,
+    pageSize: pageSize.value,
+    prompt: searchText.value
+  })
+  publicList.value = res.list as ImageVO[]
+}
+
+/** 搜索 */
+const handleSearch = async () => {
+  await getListData()
+}
+
+onMounted(async () => {
+  await getListData()
+})
+</script>
+<style scoped lang="scss">
+.square-container {
+  background-color: #fff;
+  padding: 20px;
+
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    //max-width: 1000px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .gallery-item {
+    position: relative;
+    overflow: hidden;
+    background: #f0f0f0;
+    cursor: pointer;
+    transition: transform 0.3s;
+  }
+
+  .gallery-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.3s;
+  }
+
+  .gallery-item:hover img {
+    transform: scale(1.1);
+  }
+
+  .gallery-item:hover {
+    transform: scale(1.05);
+  }
+}
+</style>

src/assets/audio/response.mp3

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-1/1">
+<div class="flex h-full items-stretch">
     <!-- 模式 -->
     <Mode class="flex-none" @generate-music="generateMusic"/>
     <!-- 音频列表 -->
@@ -13,8 +13,13 @@ import List from './list/index.vue'
 
 defineOptions({ name: 'Index' })
 
-const listRef = ref<{generateMusic: (...args) => void} | null>(null)
+const listRef = ref<Nullable<{generateMusic: (...args) => void}>>(null)
 
+/*
+ *@Description: 拿到左侧配置信息调用右侧音乐生成的方法
+ *@MethodAuthor: xiaohong
+ *@Date: 2024-07-19 11:13:38
+*/
 function generateMusic (args: {formData: Recordable}) {
  unref(listRef)?.generateMusic(args.formData)
 }

src/components/MarkdownView/index.vue

@@ -1,9 +1,70 @@
 <template>
-  <div class="h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">播放器</div>
+  <div class="flex items-center justify-between px-2 h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">
+    <!-- 歌曲信息 -->
+    <div class="flex gap-[10px]">
+      <el-image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="w-[45px]"/>
+      <div>
+        <div>{{currentSong.name}}</div>
+        <div class="text-[12px] text-gray-400">{{currentSong.singer}}</div>
+      </div>
+    </div>
+      
+    <!-- 音频controls -->
+    <div class="flex gap-[12px] items-center">
+      <Icon icon="majesticons:back-circle" :size="20" class="text-gray-300 cursor-pointer"/>
+      <Icon :icon="audioProps.paused ? 'mdi:arrow-right-drop-circle' : 'solar:pause-circle-bold'" :size="30" class=" cursor-pointer" @click="toggleStatus('paused')"/>
+      <Icon icon="majesticons:next-circle" :size="20" class="text-gray-300 cursor-pointer"/>
+      <div class="flex gap-[16px] items-center">
+        <span>{{audioProps.currentTime}}</span>
+        <el-slider v-model="audioProps.duration" color="#409eff" class="w-[160px!important] "/>
+        <span>{{ audioProps.duration }}</span>
+      </div>
+      <!-- 音频 -->
+      <audio v-bind="audioProps" ref="audioRef" controls v-show="!audioProps" @timeupdate="audioTimeUpdate">
+        <source :src="audioUrl"/>
+      </audio>
+    </div>
+
+    <!-- 音量控制器 -->
+    <div class="flex gap-[16px] items-center">
+      <Icon :icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'" :size="20" class="cursor-pointer" @click="toggleStatus('muted')"/>
+      <el-slider v-model="audioProps.volume" color="#409eff" class="w-[160px!important] "/>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { formatPast } from '@/utils/formatTime'
+import audioUrl from '@/assets/audio/response.mp3'
 
 defineOptions({ name: 'Index' })
 
+const currentSong = inject('currentSong', {})
+
+const audioRef = ref<Nullable<HTMLElement>>(null)
+  // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
+const audioProps = reactive({
+  autoplay: true,
+  paused: false,
+  currentTime: '00:00',
+  duration: '00:00',
+  muted:  false,
+  volume: 50,
+})
+
+function toggleStatus (type: string) {
+  audioProps[type] = !audioProps[type]
+  if (type === 'paused' && audioRef.value) {
+    if (audioProps[type]) {
+      audioRef.value.pause()
+    } else {
+      audioRef.value.play()
+    }
+  }
+}
+
+// 更新播放位置
+function audioTimeUpdate (args) {
+  audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss')
+}
 </script>