fix: 新增发布页面处理

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -15,14 +15,17 @@ export enum ProjectInfoEnum {
   // 描述
   REMARKS = 'remarks',
   // 缩略图
-  THUMBNAIL= 'thumbnail'
+  THUMBNAIL= 'thumbnail',
+  // 是否公开发布
+  RELEASE = 'release'
 }
 
 // 项目数据
 export type ProjectInfoType = {
-  projectName: string,
-  remarks: string,
-  thumbnail: string
+  [ProjectInfoEnum.PROJECT_NAME]: string,
+  [ProjectInfoEnum.REMARKS]: string,
+  [ProjectInfoEnum.THUMBNAIL]: string,
+  [ProjectInfoEnum.RELEASE]: boolean
 }
 
 // 编辑画布属性

src/store/modules/chartEditStore/chartEditStore.ts

@@ -38,7 +38,8 @@ export const useChartEditStore = defineStore({
     projectInfo: {
       projectName: '',
       remarks: '',
-      thumbnail: ''
+      thumbnail: '',
+      release: false
     },
     // 画布属性
     editCanvas: {

src/styles/common/animation.scss

@@ -1,5 +1,5 @@
 // 闪烁
-.animation-twinkle {
+.go-animation-twinkle {
   animation: twinkle 2s ease;
   animation-iteration-count: infinite;
   opacity: 1;

src/views/chart/ContentHeader/headerRightBtn/index.vue

@@ -1,29 +1,100 @@
 <template>
-  <n-space class="go-mt-0">
-    <n-button v-for="item in btnList" :key="item.title" ghost @click="item.event">
+  <n-space>
+    <n-button
+      v-for="item in btnList"
+      :key="item.key"
+      :type="item.type()"
+      ghost
+      @click="item.event"
+    >
       <template #icon>
         <component :is="item.icon"></component>
       </template>
-      <span>{{ item.title }}</span>
+      <span>{{ item.title() }}</span>
     </n-button>
   </n-space>
+
+  <!-- 发布管理弹窗 -->
+  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+    <n-list bordered class="go-system-setting">
+      <template #header>
+        <n-space justify="space-between">
+          <n-h3 class="go-mb-0">发布管理</n-h3>
+          <n-icon size="20" class="go-cursor-pointer" @click="closeHandle">
+            <close-icon></close-icon>
+          </n-icon>
+        </n-space>
+      </template>
+
+      <n-list-item>
+        <n-space :size="10">
+          <n-alert :show-icon="false" title="预览地址：" type="success">
+            {{ previewPath() }}
+          </n-alert>
+          <n-button tertiary type="primary" @click="copyPath()">
+            复制地址
+          </n-button>
+        </n-space>
+      </n-list-item>
+
+      <n-list-item>
+        <n-space :size="10">
+          <n-button @click="modelShowHandle">取消</n-button>
+          <n-button type="primary" @click="sendHandle">
+            {{ release ? '取消发布' : '发布' }}
+          </n-button>
+        </n-space>
+      </n-list-item>
+    </n-list>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
-import { shallowReactive } from 'vue'
-import { renderIcon, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
+import { ref, shallowReactive, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
-import { useRoute } from 'vue-router'
+import { ResultEnum } from '@/enums/httpEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { updateProjectApi } from '@/api/path'
+import {
+  goDialog,
+  renderIcon,
+  fetchPathByName,
+  routerTurnByPath,
+  setSessionStorage,
+  getLocalStorage,
+  httpErrorHandle,
+  fetchRouteParamsLocation,
+} from '@/utils'
 import { icon } from '@/plugins'
 
-const { BrowsersOutlineIcon, SendIcon } = icon.ionicons5
+const { BrowsersOutlineIcon, SendIcon, CloseIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
 
 const routerParamsInfo = useRoute()
 
+const modelShow = ref<boolean>(false)
+const release = ref<boolean>(false)
+
+watchEffect(() => {
+  release.value = chartEditStore.getProjectInfo.release || false
+})
+
+// 关闭弹窗
+const closeHandle = () => {
+  modelShow.value = false
+}
+
+// 预览地址
+const previewPath = () => {
+  const { origin, pathname } = document.location
+  const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
+  const previewPath = `${origin}${pathname}${path}/${fetchRouteParamsLocation()}`
+  return previewPath
+}
+
 // 预览
 const previewHandle = () => {
   const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
@@ -32,50 +103,102 @@ const previewHandle = () => {
   // id 标识
   const previewId = typeof id === 'string' ? id : id[0]
   const storageInfo = chartEditStore.getStorageInfo
-  const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
+  const sessionStorageInfo =
+    getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {
-    const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
+    const repeateIndex = sessionStorageInfo.findIndex(
+      (e: { id: string }) => e.id === previewId
+    )
     // 重复替换
     if (repeateIndex !== -1) {
-      sessionStorageInfo.splice(repeateIndex, 1, { id: previewId, ...storageInfo })
+      sessionStorageInfo.splice(repeateIndex, 1, {
+        id: previewId,
+        ...storageInfo,
+      })
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     } else {
       sessionStorageInfo.push({
-        id: previewId, ...storageInfo
+        id: previewId,
+        ...storageInfo,
       })
       setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
     }
   } else {
-    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
+    setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [
+      { id: previewId, ...storageInfo },
+    ])
   }
   // 跳转
   routerTurnByPath(path, [previewId], undefined, true)
 }
 
+// 模态弹窗
+const modelShowHandle = () => {
+  modelShow.value = !modelShow.value
+}
+
+// 复制预览地址
+const copyPath = (successText?: string, failure?: string) => {
+  navigator.clipboard
+    .writeText(previewPath())
+    .then(() => {
+      window['$message'].success(successText || '复制成功！')
+    })
+    .catch(() => {
+      window['$message'].success(failure || '复制失败！')
+    })
+}
+
 // 发布
-const sendHandle = () => {
-  window['$message'].warning('该功能暂未实现（因为压根没有后台）')
+const sendHandle = async () => {
+  const res = (await updateProjectApi({
+    id: fetchRouteParamsLocation(),
+    // 反过来
+    state: release.value ? -1 : 1,
+  })) as unknown as MyResponseType
+
+  if (res.code === ResultEnum.SUCCESS) {
+    modelShowHandle()
+    if (!release.value) {
+      copyPath('发布成功！已复制地址到剪贴板~')
+    } else {
+      window['$message'].success(`已取消发布`)
+    }
+    chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, !release.value)
+  } else {
+    httpErrorHandle()
+  }
 }
 
 const btnList = shallowReactive([
   {
-    select: true,
-    title: '预览',
+    key: 'preview',
+    title: () => '预览',
+    type: () => 'default',
     icon: renderIcon(BrowsersOutlineIcon),
-    event: previewHandle
+    event: previewHandle,
   },
   {
-    select: true,
-    title: '发布',
+    key: 'release',
+    title: () => (release.value ? '已发布' : '发布'),
     icon: renderIcon(SendIcon),
-    event: sendHandle
-  }
+    type: () => (release.value ? 'primary' : 'default'),
+    event: modelShowHandle,
+  },
 ])
-
 </script>
+
 <style lang="scss" scoped>
-.align-center {
-  margin-top: -4px;
+@include go('system-setting') {
+  @extend .go-background-filter;
+  min-width: 100px;
+  max-width: 60vw;
+  padding-bottom: 20px;
+  @include deep() {
+    .n-list-item:not(:last-child) {
+      border-bottom: 0;
+    }
+  }
 }
 </style>

src/views/chart/hooks/useSync.hook.ts

@@ -81,14 +81,17 @@ export const useSync = () => {
     projectName: string,
     indexImage: string,
     remarks: string,
+    state: number
   }) => {
-    const { projectName, remarks, indexImage } = projectData
+    const { projectName, remarks, indexImage, state } = projectData
     // 名称
     chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, projectName)
     // 描述
     chartEditStore.setProjectInfo(ProjectInfoEnum.REMARKS, remarks)
     // 缩略图
     chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage)
+    // 发布
+    chartEditStore.setProjectInfo(ProjectInfoEnum.RELEASE, state === 1)
   }
 
   // * 数据获取

src/views/project/items/components/ProjectItemsCard/index.vue

@@ -33,7 +33,7 @@
             <n-space>
               <n-text>
                 <n-badge
-                  class="animation-twinkle"
+                  class="go-animation-twinkle"
                   dot
                   :color="cardData.release ? '#34c749' : '#fcbc40'"
               ></n-badge>

src/views/project/items/components/ProjectItemsModalCard/index.vue

@@ -41,7 +41,7 @@
           <n-space>
             <n-text>
               <n-badge
-                class="animation-twinkle"
+                class="go-animation-twinkle"
                 dot
                 :color="cardData?.release ? '#34c749' : '#fcbc40'"
              ></n-badge>