更新展示页

lerna.json

@@ -1,10 +1,12 @@
 {
   "packages": [
-    "packages/code",
-    "packages/v4_page"
+    "packages/qjkankan-components",
+    "packages/qjkankan-editor",
+    "packages/qjkankan-kankan-view",
+    "packages/qjkankan-view"
   ],
   "useWorkspaces": true,
   "npmClient": "yarn",
   "useNx": false,
-  "version": "0.0.0"
+  "version": "1.2.0"
 }

package.json

@@ -5,19 +5,35 @@
     "packages/*"
   ],
   "devDependencies": {
-    "lerna": "^5.1.6"
+    "lerna": "^5.1.6",
+    "lint-staged": "^10.5.4"
   },
   "scripts": {
     "main:serve": "yarn workspace qjkankan run serve",
     "main:serve-testprod": "yarn workspace qjkankan run serve-testprod",
     "main:build": "yarn workspace qjkankan run build",
     "main:build-testprod": "yarn workspace qjkankan run build-testprod",
-    "v4_page:build": "yarn workspace v4_page run build",
-    "v4_page:serve": "yarn workspace v4_page run serve",
+    "kankan-view:run": "yarn workspace @qjkankan/kankan-view run serve",
+    "kankan-view:dev": "yarn workspace @qjkankan/kankan-view run serve",
+    "kankan-view:build": "yarn workspace @qjkankan/kankan-view run build",
+    "view:run": "yarn workspace @qjkankan/view run serve",
+    "view:dev": "yarn workspace @qjkankan/view run serve",
+    "view:build": "yarn workspace @qjkankan/view run build",
     "build": "npm-run-all -s main:build v4_page:build",
     "build-testprod": "npm-run-all -s main:build-testprod v4_page:build"
   },
   "dependencies": {
     "npm-run-all": "^4.1.5"
-  }
+  },
+  "lint-staged": {
+    "*.js": [
+        "prettier --write"
+    ],
+    "*.ts": [
+        "prettier --write"
+    ],
+    "*.vue": [
+        "prettier --write"
+    ]
+}
 }

packages/code/package.json

@@ -1,44 +0,0 @@
-{
-  "name": "qjkankan",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "serve-prod": "vue-cli-service serve --mode prod",
-    "serve-local": "vue-cli-service serve --mode bendi",
-    "build": "vue-cli-service build",
-    "build-prod": "vue-cli-service build --mode prod",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^0.5.4",
-    "core-js": "^3.8.2",
-    "element-ui": "^2.15.1",
-    "html2canvas": "^1.4.1",
-    "photoswipe": "^4.1.3",
-    "swiper": "^5.3.8",
-    "v-viewer": "^1.5.1",
-    "video.js": "^7.11.8",
-    "vue": "^2.6.12",
-    "vue-awesome-swiper": "^4.1.1",
-    "vue-cropperjs": "^4.2.0",
-    "vue-i18n": "^8.22.3",
-    "vue-photo-preview": "^1.1.3",
-    "vue-router": "^3.4.9",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.9",
-    "@vue/cli-plugin-eslint": "^4.5.9",
-    "@vue/cli-plugin-router": "^4.5.9",
-    "@vue/cli-service": "^4.5.9",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-component": "^1.1.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "less": "^3.13.1",
-    "less-loader": "^5.0.0",
-    "vue-template-compiler": "^2.6.12"
-  }
-}

packages/code/src/api/index.js

@@ -1,586 +0,0 @@
-import { http,getToken } from '../utils/request'
-import config from '../config'
-
-
-const number = function() {
-    return config.projectNum
-}
-
-const scene = function() {
-    return config.sceneNum
-}
-
-const HDNumber = function() {
-    return config.hengdaNum
-}
-
-const CLIENT_CODE =  config.client_code
-const URL_FILL =  config.urlFill
-
-
-let ossUrl = config.CDN
-
-// https://ossxiaoan.4dage.com/720yun_fd_manage
-
-/**
- * 获取用户账号信息
- */
-export function getUserInfo(ok, no) {
-  return http.postJson(`/api/user/getUserInfo`, {}, ok, no)
-}
-
-/**
- * 获取全景作品基本信息
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getPanoInfo(data, ok, no) {
-    return http.get(`${ossUrl}/720yun_fd_manage/${data||number()}/someData.json?_=${Math.random()}`, {}, ok, no)
-    
-}
-
-
-/**
- * 获取四维看看场景信息
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getSceneInfomation(data, ok, no) {
-    return http.get(`/api/scene/getInfo?num=${data.id}&_=${Math.random()}`, {}, ok, no)
-}
-
-/**
- * 获取场景分组列表
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getTabList(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/catalog/getCatalog/${number()}`, data, ok, no)
-}
-
-
-
-/**
- * 根据分组ID获取场景
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getTabSceneList(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/catalog/getScene/${data.catalogId}`, {}, ok, no)
-}
-
-/**
- * 修改场景分组名称
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function editTabName(data, ok, no) {
-    data.workId = number()
-    return http.postJson(`${URL_FILL}/manage/catalog/save`, data, ok, no)
-}
-
-
-/**
- * 新增/保存全景
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function savePanoToWorks(data, ok, no) {
-    data.workId = number()
-    return http.postJson(`${URL_FILL}/manage/scene/saves`, data, ok, no)
-}
-
-
-/**
- * 删除标签
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function delTab(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/catalog/remove/${data}`, {}, ok, no)
-}
-
-/**
- * 删除场景
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function delPano(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/scene/remove/${data}`, {}, ok, no)
-}
-
-
-/**
- * 获取四维看看场景列表
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getSceneList(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/work/select/4dkk/${number()}`, data, ok, no)
-}
-
-
-/**
- * 获取初始场景
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getIndex(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/scene/getIndex/${number()}`, data, ok, no)
-}
-
-
-/**
- * 保存初始场景
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function saveIndexInfo(data, ok, no) {
-    return http.post(`${URL_FILL}/manage/scene/setIndex/${data.id}/${number()}`, '', ok, no)
-}
-
-
-
-/**
- * 上传封面
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function uploadCover(data, ok, no) {
-    return http.uploadBlobFile(`${URL_FILL}/manage/work/upload`, data, ok, no)
-}
-
-
-
-/**
- * 保存全景图初始视角
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function savePosition(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/scene/editXml`, data, ok, no)
-}
-
-
-/**
- * 重命名全景图
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function editPanoName(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/scene/edit`, data, ok, no)
-}
-
-
-/**
- * 重命名分组名称
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function editCatalogName(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/catalog/edit`, data, ok, no)
-}
-
-
-
-
-/**
- * 保存初始画面
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function saveInitScreen(data, ok, no) {
-    return http.post(`${URL_FILL}/manage/scene/saveIndex`, data, ok, no)
-}
-
-/**
- * 保存全景图配置信息
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function saveSomeData(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/scene/editSomeData`, data, ok, no)
-}
-
-
-/**
- * 保存使用的热点
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function saveUseHots(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/scene/save/useHots`, data, ok, no)
-}
-
-
-
-/**
- * 保存初始场景
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function deleteIndexInfo(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/scene/removeIndex/${number()}`, data, ok, no)
-}
-
-
-
-
-/**
- * 获取场景基本信息
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getSceneInfo(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/scene/detail/${scene()}`, {}, ok, no)
-}
-
-
-/**
- * 获取场景分组列表(展示端)
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getWebTabList(data, ok, no) {
-    return http.get(`${URL_FILL}/web/common/getCatalog/${number()}`, data, ok, no)
-}
-
-/**
- * 检查作品是否可用
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function checkWork(data, ok, no) {
-     let visit = ''
-    if (window.location.pathname.indexOf('showMobile.html')>-1 || window.location.pathname.indexOf('show.html')>-1) {
-        visit = 1111
-    }
-
-    return http.get(`${URL_FILL}/web/common/checkWork/${number()}${visit?('?visit='+visit):''}`, data, ok, no)
-}
-
-
-/**
- * 根据分组ID获取场景(展示端)
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getWebTabSceneList(data, ok, no) {
-    return http.get(`${URL_FILL}/web/common/getScene/${data.catalogId}`, {}, ok, no)
-}
-
-
-
-/**
- * 检测登陆状态
- */
-export function checkLogin() {
-    if (window.location.pathname.indexOf('material.html')>-1) {
-        return http.get(`${URL_FILL}/web/common/checkToken/?_=${Math.random()}`)
-    }else{
-        return http.get(`${URL_FILL}/manage/work/checkToken/${number()}`)
-    }
-}
-
-
-
-
-
-/**
- * 检测素材状态
- */
- export function checkMStatus(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/fodder/checkStatus/${data.ids.join(',')}`, {islongpolling:data.islongpolling}, ok, no)
-}
-
-
-
-
-/**
- * 获取作品基本信息（展示端）
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getWebWorksInfo(data, ok, no) {
-    return http.get(`${URL_FILL}/web/common/detail/${number()}`, {}, ok, no)
-}
-
-
-
-/**
- * 校验密码（展示端）
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function checkPassword(data, ok, no) {
-    data.workId = number()
-    return http.postJson(`${URL_FILL}/web/common/checkPwd`, data, ok, no)
-}
-
-
-
-/**
- * 获取初始场景（展示端）
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getWebIndex(data, ok, no) {
-    return http.get(`${URL_FILL}/web/common/getIndex/${number()}`, {}, ok, no)
-}
-
-
-
-/**
- * 查询该作品是否存在场景
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getAllVrList(data, ok, no) {
-    return http.get(`${URL_FILL}/manage/scene/findByWork/${number()}`, data, ok, no)
-}
-
-
-
-
-
-/**
- * 保存全景图基本信息
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function savePanoInfo(data, ok, no) {
-    data.houseId = number()
-    return http.postJson('/fcb/pano/scene/house/edit', data, ok, no)
-}
-
-
-
-
-/**
- * 获取房车宝签名
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function getAuthCode(data, ok, no) {
-    return http.postJson(`/fcb/project/api/query/authCode`, data, ok, no)
-}
-
-/**
- * 获取户型名称列表
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function getHouseNameList(data, ok, no) {
-    data.prodId = HDNumber()
-    getAuthCode(data,(res)=>{
-        let tmp = {
-            ...data,
-            authcode:res.data.authcode,
-            req_time:res.data.timeStamp,
-            client_code:CLIENT_CODE
-        }
-        return http.postJson(`/vr/prodvr/prod/v1/details/queryHouseNamesByProdId`, tmp, ok, no)
-    })
-}
-
-/**
- * 获取户型列表
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function getHouseList(data, ok, no) {
-    data.token = getToken()
-    data.houseId = number()
-    return http.postJson(`/fcb/pano/scene/findVrModel`, data, ok, no)
-}
-
-
-
-/**
- * 保存户型
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function saveHouse(data, ok, no) {
-    data.houseId = number()
-    data.hengdaId = HDNumber()
-    return http.postJson(`/fcb/pano/scene/saveVrModel`, data, ok, no)
-}
-
-
-
-
-/**
- * 获取全景图列表
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function getPanoList(data, ok, no) {
-    data.houseId = number()
-    return http.postJson('/fcb/pano/scene/list', data, ok, no)
-}
-
-/**
- * 获取全景图列表（搜索）
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function getSearchPanoList(data, ok, no) {
-    data.houseId = number()
-    return http.postJson('/fcb/pano/scene/searchUnion', data, ok, no)
-}
-
-
-
-
-/**
- * 获取楼盘详情
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function getHouseDetail(data, ok, no) {
-    data.houseId = number()
-    return http.postJson(`/fcb/pano/scene/findRoom/${data.houseId}`, {}, ok, no)
-}
-
-
-/**
- * 调整顺序
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
-export function setListSort(data, ok, no) {
-    return http.postJson(`/fcb/pano/scene/setSort`, data, ok, no)
-}
-
-
-
-
-
-// 素材库
-
-/**
- * 获取素材列表
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getMaterialList(data, ok, no) {
-    let url = `${URL_FILL}/manage/fodder/list`
-    // if (data.urlSelect) {
-    //     url = `${URL_FILL}/manage/fodder/select/${data.type}/${number()}`
-    // }
-    return http.postJson(url, data, ok, no)
-}
-
-/**
- * 上传素材
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function uploadMaterial(data, subdata, ok, no, onProgress) {
-    return http.uploadFile(`${URL_FILL}/manage/fodder/upload/${subdata.type}/${subdata.uid}`, data, ok, no, onProgress)
-}
-
-/**
- * 删除素材
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function delMaterial(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/fodder/remove/${data}`, {}, ok, no)
-}
-
-/**
- * 修改素材
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function editMaterial(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/fodder/update`, data, ok, no)
-}
-
-
-/**
- * 添加我的作品
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function addWorks(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/work/add`, data, ok, no)
-}
-
-/**
- * 获取我的作品列表
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function getWorksList(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/work/list`, data, ok, no)
-}
-
-/**
- * 保存我的作品
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function saveWorks(data, ok, no) {
-    data.id = number()
-
-    return http.postJson(`${URL_FILL}/manage/work/edit`, data, ok, no)
-}
-
-
-/**
- * 删除我的作品
- * @param {*} data 
- * @param {*} ok 
- * @param {*} no 
- */
- export function delWorks(data, ok, no) {
-    return http.postJson(`${URL_FILL}/manage/work/remove/${data}`, {}, ok, no)
-}
-
-

packages/code/src/framework/show/index.vue

@@ -1,487 +0,0 @@
-<template>
-  <div class="panocon">
-    <template v-if="showInfo">
-      <iframe allowfullscreen="true" v-if="activeItem.type=='4dkk'" 
-      :src="`/spc.html?m=${activeItem.sceneCode}&lang=zh`" frameborder="0"></iframe>
-      <div v-show="activeItem.type!='4dkk'" id="pano"></div>
-
-      <div class="pano-logo" v-if="showInfo.isLogo&&activeItem.type!='4dkk'">
-        <img :src="showInfo.logo||require('@/assets/images/default/img_logoshow@2x.png')" alt="" />
-      </div>
-
-
-      <div
-        class="oper-tips"
-        :class="{ hidetips: !showTips }"
-        v-if="localRemind"
-      >
-        <img
-          :src="
-            showInfo.pcIcon ||
-            require('@/assets/images/default/show/img_tipspc_default.png')
-          "
-          alt=""
-        />
-      </div>
-
-      <list v-if="canLoad" @select="handleSelect" :select="activeItem"></list>
-      <password
-        :bg="showInfo.icon"
-        :show="showPassword"
-        @submit="handlePassword"
-        @close="showPassword = false"
-      />
-      <popup :title="'简介'" :show="showIntro" @close="showIntro = false">
-        <div slot="content" class="introcon">
-          {{ showInfo.description || "暂无简介" }}
-        </div>
-      </popup>
-
-      <preview
-        :item="currentHotspot"
-        :show="showPreview"
-        @close="showPreview = false"
-      />
-
-      <ul class="aside" v-if="activeItem.type!='4dkk'">
-        <li v-for="(item, i) in aside" :key="i">
-          <span @click="handleItem(item)">
-            <i class="iconfont" :class="item.icon"></i>
-          </span>
-        </li>
-      </ul>
-    </template>
-    <template v-else>
-      <div class="hasDel" v-if="loadFinish">
-      <div>
-        <img :src="$noresult" alt="">
-        <p>作品已被删除</p>
-      </div>
-    </div>
-
-    </template>
-  </div>
-</template>
-
-<script>
-import * as krfn from "@/core/index.js";
-import { getPanoInfo, checkPassword,checkWork } from "@/api";
-import password from "./popup/password";
-import preview from "./popup/preview";
-import { $smallWaiting } from '@/components/shared/loading'
-
-
-import popup from "./popup/";
-import { mapGetters } from "vuex";
-
-import list from "./list";
-
-let __krfn = krfn.default;
-
-export default {
-  components: {
-    list,
-    password,
-    popup,
-    preview,
-  },
-  computed: {
-    ...mapGetters({
-      showInfo: "showInfo",
-    }),
-  },
-  data() {
-    return {
-      showPreview: false,
-      isFullscreen:false,
-      showTips: false,
-      canLoad: false,
-      loadFinish:false,
-      showPassword: false,
-      showIntro: false,
-      localRemind: false,
-      password: "",
-      activeItem: "",
-      someData: "",
-      currentHotspot: "",
-      list: [],
-      aside: [
-        {
-          id: "about",
-          icon: "icontool_about",
-        },
-        {
-          id: "vr",
-          icon: "icontool_vr",
-        },
-        {
-          id: "full",
-          icon: "icontool_full",
-        },
-      ],
-    };
-  },
-  methods: {
-    onFullScreen() {
-        let element = document.documentElement;
-        if (this.isFullscreen) {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.webkitCancelFullScreen) {
-                document.webkitCancelFullScreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            }
-        } else {
-            if (element.requestFullscreen) {
-                element.requestFullscreen();
-            } else if (element.webkitRequestFullScreen) {
-                element.webkitRequestFullScreen();
-            } else if (element.mozRequestFullScreen) {
-                element.mozRequestFullScreen();
-            } else if (element.msRequestFullscreen) {
-                element.msRequestFullscreen();
-            }
-        }
-          // 改变当前全屏状态
-        this.isFullscreen = !this.isFullscreen;
-      },
-    handleItem(data) {
-      if (data.id == "about") {
-        this.showIntro = true;
-      }
-      if (data.id == "full") {
-        this.onFullScreen()
-      }
-      if (data.id == "vr") {
-        var krpano = document.getElementById("krpanoSWFObject");
-        var webvr = krpano.get("webvr");
-        webvr.entervr();
-        // window.webvr.enterVR()
-      }
-    },
-    handlePassword(data) {
-      checkPassword(
-        {
-          password: data,
-        },
-        (res) => {
-          if (res.code == 0) {
-            this.showPassword = false;
-            this.canLoad = true;
-          } 
-        }
-      );
-    },
-    startLoad() {
-      this.canLoad = true;
-    },
-    handleSelect(data) {
-      this.activeItem = data;
-    },
-
-    fixData() {
-      let tmp = [];
-      this.showInfo.scenes.forEach((item) => {
-        this.showInfo.catalogs.forEach((sub) => {
-          if (item.category == sub.id) {
-            if (tmp.indexOf(sub) < 0) {
-              tmp.push(sub);
-            }
-          }
-        });
-      });
-      tmp = this.$unique(tmp)
-
-      this.showInfo.catalogs = tmp;
-      let rootmp = [];
-      tmp.forEach((item) => {
-        this.showInfo.catalogRoot.forEach((sub) => {
-
-          sub.children = this.$unique(sub.children)
-
-          if (sub.children.indexOf(item.id) > -1) {
-            rootmp.push(sub);
-          }
-        });
-      });
-
-
-      rootmp = this.$unique(rootmp)
-
-      let sortArr = this.showInfo.catalogRoot.map(item=>item.name)
-      rootmp.sort((a,b)=>{
-        return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
-      })
-
-
-      this.showInfo.catalogRoot = rootmp.map((item) => {
-        let temp = [];
-        item.children = this.$unique(item.children)
-        item.children.forEach((sub) => {
-          tmp.forEach((jj) => {
-            if (jj.id == sub) {
-              temp.push(sub);
-            }
-          });
-        });
-        return {
-          ...item,
-          children: temp,
-        };
-      });
-
-      this.showInfo.catalogs = tmp
-
-      let cid = 'c_'+this.$randomWord(true,8,8)
-
-      if (this.showInfo.catalogRoot.length <= 0) {
-        this.showInfo.catalogRoot.push({
-          id: 'r_'+this.$randomWord(true,8,8),
-          name: "全部场景",
-          children:[cid]
-        });
-      }
-
-      if (this.showInfo.catalogs.length <= 0) {
-        this.showInfo.catalogs.push({
-          id: cid,
-          name: "默认二级分组",
-        });
-      }
-
-      if (this.showInfo.firstScene) {
-        this.showInfo.firstScene = this.showInfo.scenes.find(item=>item.sceneCode==this.showInfo.firstScene.sceneCode)
-      }
-
-      this.$store.commit("SetShowInfo", this.showInfo);
-    },
-
-    getSceneInfo() {
-      checkWork("",data=>{
-        if (data.data) {
-          getPanoInfo(
-            "",
-            (res) => {
-              this.$store.commit("SetShowInfo", res);
-              this.fixData()
-              this.loadFinish = true
-            }
-          );
-        } else{
-          this.loadFinish = true
-        }
-      })
-    }
-  },
-  watch: {
-    currentHotspot: {
-      deep: true,
-      handler: function (newVal) {
-        if (newVal) {
-          if (newVal.hotspotType == "link") {
-            window.open(newVal.hyperlink, "_blank");
-            return;
-          }
-          if (newVal.hotspotType == "scene") {
-            this.activeItem = newVal.secne;
-            return;
-          }
-          this.showPreview = true;
-        }
-      },
-    },
-    canLoad(newVal) {
-      if (newVal) {
-        setTimeout(() => {
-          this.showTips = this.localRemind
-          setTimeout(() => {
-            this.showTips = false;
-          }, this.showInfo.remindTime * 1000);
-        }, 2000);
-      }
-    },
-    showInfo: {
-      deep: true,
-      immediate: true,
-      handler: function (newVal) {
-        if (newVal) {
-          document.title = newVal.name || '无标题'
-          let locoR = "localRemind"+newVal.id
-          if (!newVal.description) {
-            this.aside.shift()
-          }
-          if (newVal.isRemind==1) {
-            this.localRemind = localStorage.getItem(locoR) == 1 ? false : true
-            localStorage.setItem(locoR, 1);
-          }
-          else{
-            this.localRemind = true;
-            localStorage.setItem(locoR, 0);
-          }
-          if (this.showInfo.firstScene) {
-            if (this.showInfo.firstScene.type == '4dkk') {
-              this.localRemind = false;
-            }
-          }
-          newVal.password ? (this.showPassword = true) : this.startLoad();
-        }
-      },
-    },
-    activeItem: {
-      handler(newVal) {
-        this.currentHotspot = ''
-        $("#pano").empty();
-        window.vrInitFn = () => {
-          $smallWaiting.hide()
-          var krpano = document.getElementById("krpanoSWFObject");
-          __krfn.utils.initHotspot(krpano, newVal && newVal.someData, false);
-        };
-        window.vrViewFn = () => {
-          try {
-            let tmp = newVal.initVisual||{};
-            var krpano = document.getElementById("krpanoSWFObject");
-            krpano.set("view.vlookat", tmp.vlookat||0);
-            krpano.set("view.hlookat", tmp.hlookat||0);
-            krpano.set("autorotate.enabled", Boolean(this.showInfo.isAuto));
-          } catch (error) {
-            error;
-          }
-        };
-        var settings = {
-          "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
-          "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
-        };
-        if (newVal) {
-          if (newVal.type=='4dkk') {
-              removepano("#pano");
-              $("#pano").empty();
-              return
-          }
-          removepano("#pano");
-          $smallWaiting.show()
-
-          embedpano({
-            // xml: "%HTMLPATH%/static/template/tour.xml",
-            xml: `${this.$cdn}/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
-            swf: "%HTMLPATH%/static/template/tour.swf",
-            target: "pano",
-            html5: "auto",
-            mobilescale: 1,
-            vars: settings,
-            passQueryParameters: true,
-          });
-        }
-      },
-    },
-  },
-  mounted() {
-    window.__krfn = __krfn;
-
-    this.$bus.on("clickHotspot", (data) => {
-      let someData = this.activeItem.someData
-      if (typeof someData == 'string') {
-        someData = JSON.parse(this.activeItem.someData);
-      }
-      let idx = someData.hotspots.findIndex((item) => item.name == data);
-
-      this.currentHotspot = someData.hotspots[idx];
-    });
-    this.getSceneInfo();
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.panocon {
-  width: 100%;
-  height: 100%;
-  .hasDel{
-    background: #fff;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    >div{
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
-      color: #909090;
-      text-align: center;
-      font-size: 18px;
-      >p{
-        margin-top: 20px;
-      }
-    }
-  }
-  #pano {
-    width: 100%;
-    height: 100%;
-  }
-  >iframe{
-    width: 100%;
-    height: 100%;
-  }
-
-  .pano-logo {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    > img {
-      max-width: 120px;
-      max-height: 100px;
-      pointer-events: none;
-    }
-  }
-
-  .oper-tips {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transition: display 0.3s ease;
-    > img {
-      max-width: 300px;
-    }
-  }
-
-  .hidetips {
-    display: none;
-  }
-
-  .aside {
-    position: fixed;
-    z-index: 999;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    > li {
-      margin: 5px 0;
-      > span {
-        width: 36px;
-        height: 36px;
-        display: inline-block;
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        opacity: 1;
-        border-radius: 18px;
-        position: relative;
-        cursor: pointer;
-        > i {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
-      }
-    }
-  }
-  .introcon {
-    line-height: 20px;
-    word-break: break-all;
-    text-align: justify;
-  }
-}
-</style>

packages/qjkankan-components/.env

@@ -0,0 +1 @@
+VUE_APP_STATIC_DIR=static

packages/qjkankan-components/README.md

@@ -0,0 +1,19 @@
+# kankan-components
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

packages/qjkankan-components/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@vue/cli-plugin-babel/preset']
+}

packages/qjkankan-components/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@qjkankan/components",
+  "version": "1.2.0",
+  "private": true,
+  "main": "dist/components.common.js",
+  "module": "src/index.js",
+  "scripts": {
+    "start": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --target lib --name components src/index.js"
+  },
+  "dependencies": {
+    "c-scrollbar": "^0.1.6",
+    "vue-cropper": "^1.0.2",
+    "vue3-smooth-scrollbar": "^1.0.2"
+  }
+}

packages/qjkankan-components/public/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/lib/quill/quill.snow.css" />
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <script src="<%= VUE_APP_STATIC_DIR %>/lib/quill/quill.min.js"></script>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

packages/qjkankan-components/src/__test__/editor/App.vue

@@ -0,0 +1,8 @@
+<template>
+    <Layout />
+</template>
+
+<script setup>
+import Layout from '@/components/editor/Layout'
+</script>
+

packages/qjkankan-components/src/__test__/editor/main.js

@@ -0,0 +1,6 @@
+import '@/assets/theme.editor.scss'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+
+createApp(App).mount('#app')

packages/qjkankan-components/src/assets/scss/_base-vars.scss

@@ -0,0 +1,79 @@
+
+:root {
+  --colors-primary-fill: 255, 255, 255;
+  --colors-primary-base-fill: 0, 118, 246;
+  --colors-primary-base: rgb(var(--colors-primary-base-fill));
+  --colors-primary-hover: #0076f6;
+
+
+  --colors-cancel-base-fill: 49, 49, 49;
+  --colors-cancel-base: rgb(var(--colors-cancel-base-fill));
+  --colors-cancel-hover: rgb(60,60,60);
+
+
+  // --colors-primary-hover: #008B7A;
+  --colors-primary-active: #1682f8;
+  --colors-primary-click: #1682f8;
+  --colors-warn: #1682f8;
+  --colors-color: #999;
+  --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
+  --colors-content-color: rgb(--colors-primary-fill);
+  
+  
+  --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
+  --colors-normal-base: rgba(var(--colors-primary-fill), 0.4);
+  --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
+  --colors-normal-click: var(--colors-primary-click);
+
+  --colors-normal-fill-back: var(--colors-normal-back);
+  --colors-normal-fill-base: var(--colors-normal-base);
+  --colors-normal-fill-hover: var(--colors-normal-hover);
+  --colors-normal-fill-click: var(--colors-primary-click);
+
+  --colors-error-fill: 250, 63, 72;
+  
+  --small-size: 12px;
+  --medium-size: 14px;
+  --big-size: 16px;
+
+
+  // 正常(取消)
+  --color-cancel-normal: var(--colors-cancel-base);
+  // 悬停
+  --color-cancel-hover: var(--colors-cancel-hover);
+  // 点击
+  --color-cancel-focus: var(--colors-cancel-click);
+
+
+
+  // 正常
+  --color-main-normal: var(--colors-primary-base);
+  // 悬停
+  --color-main-hover: var(--colors-primary-hover);
+  // 点击
+  --color-main-focus: var(--colors-primary-click);
+
+
+  --editor-head-filter: blur(0px);
+  --editor-head-height: 50px;
+  
+  --editor-head-back: rgba(20, 20, 20, 0.86);
+
+  --editor-menu-filter: var(--editor-head-filter);
+  --editor-menu-width: 80px;
+  --editor-menu-left: 0px;
+  --editor-menu-right: 0px;
+  --editer-menu-fill: 27, 27, 28;
+  --editor-menu-back: rgba(var(--editer-menu-fill), 0.8);
+  --editor-menu-active-back: rgba(var(--colors-primary-fill), 0.06);
+  --editor-menu-color: #999;
+  --editor-menu-active: rgba(255,255,255,0.06);;
+
+
+  --editor-toolbox-top: var(--editor-head-height);
+  --editor-toolbox-left: calc(var(--editor-menu-left) + var(--editor-menu-width));
+  --editor-toolbox-width: 340px;
+  --editor-toolbox-back: var(--editor-menu-back);
+  --editor-toolbox-padding: 20px;
+  --editor-toolbar-height: 60px;
+}

packages/qjkankan-components/src/assets/scss/components/_button.scss

@@ -0,0 +1,82 @@
+@use "sass:map";
+
+.ui-button {
+  width: 100%;
+  height: 36px;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  font-size: 14px;
+  background: none !important;
+
+  transition: all 0.3s ease;
+
+  .ui-button-icon {
+    margin-right: 0.6em;
+  }
+}
+
+.ui-button.customize {
+  background: none;
+  color: rgba(var(--color), 0.8);
+  border: 1px solid rgba(var(--color), 0.6);
+}
+
+.ui-button.normal {
+  color: var(--colors-color);
+  border: 1px solid var(--colors-normal-base);
+  &:hover {
+    color: var(--colors-normal-hover);
+    border: 1px solid var(--colors-normal-hover);
+  }
+  &:active {
+    color: var(--colors-normal-click);
+    border: 1px solid var(--colors-normal-click);
+  }
+}
+
+.ui-button.submit {
+  color: var(--color-main-hover);
+  border: 1px solid var(--color-main-normal);
+  background-color: var(--color-main-normal);
+  &:hover {
+    border-color: var(--color-main-hover);
+    background-color: var(--color-main-hover);
+  }
+  &:active {
+    border-color: var(--color-main-focus);
+    background-color: var(--color-main-focus);
+  }
+}
+
+.ui-button.cancel {
+  color: var(--colors-content-color);
+  border: none;
+  background-color: var(--colors-cancel-base) !important;
+  &:hover {
+    border: none;
+  }
+  &:active {
+    border: none;
+  }
+}
+
+.ui-button.primary {
+  background-color: var(--colors-primary-base) !important;
+  color: var(--colors-normal-fill-hover);
+  border: none;
+  opacity: 1;
+
+  // &:active,
+  &:hover {
+    // opacity: 0.8;
+    background: var(--colors-primary-hover) !important;
+    border: none;
+    // background: #4DD8C7 !important;
+  }
+  &:active {
+    background-color: var(--colors-primary-active) !important;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+  }
+}

packages/qjkankan-components/src/assets/scss/components/_dialog.scss

@@ -0,0 +1,88 @@
+.ui-dialog {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: #fff;
+    backdrop-filter: blur(1px);
+}
+.ui-dialog__box {
+    position: relative;
+    display: inline-block;
+    min-width: 400px;
+    min-height: 100px;
+    background-color: rgba($color: #1a1a1a, $alpha: 0.8);
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+    border-radius: 4px;
+    border: 1px solid #000000;
+    // backdrop-filter: blur(400px);
+    backdrop-filter: blur(4px);
+    &::after {
+        content: '';
+        position: absolute;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        top: 1px;
+        border: 1px solid rgba($color: #fff, $alpha: 0.1);
+        border-radius: 4px;
+        z-index: 0;
+        pointer-events: none;
+    }
+    header {
+        color: #fff;
+        padding: 0 26px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: bold;
+        i {
+            cursor: pointer;
+            color: #969799;
+        }
+    }
+    section {
+        padding: 40px 26px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .message {
+            text-align: center;
+            line-height: 1.7;
+        }
+    }
+    footer {
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        button {
+            width: 105px;
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+}
+[is-mobile]{
+  .ui-dialog__box{
+    // width: 8.9333rem;
+    // min-width: 5.3333rem;
+    // min-height: 1.3333rem;
+    // section{
+    //   padding: 1.0667rem .5333rem .8rem;
+    // }
+    // footer{
+    //   padding:  0 0 .8rem;
+    //   border-top: none;
+    // }
+    // header{
+    //   display: none;
+    // }
+  } 
+} 

packages/qjkankan-components/src/assets/scss/components/_input.scss

@@ -0,0 +1,656 @@
+.ui-input {
+    display: inline-flex;
+    align-items: center;
+    --base-border-color: rgba(255, 255, 255, 0.4);
+    --colors-normal-back: rgba(26,27,29,0.8);
+    --colors-content-color: #fff;
+    height: 100%;
+    &.error {
+        position: relative;
+        --colors-primary-base: #fa3f48;
+        --base-border-color: #fa3f48;
+        .error-msg {
+            top: 100%;
+            position: absolute;
+            color: var(--colors-primary-base);
+            margin-top: 5px;
+        }
+    }
+
+    &.require {
+        position: relative;
+
+        &::before {
+            content: '*';
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 100%;
+            margin-right: 4px;
+            color: #fa3f48;
+            line-height: 1.5em;
+        }
+    }
+
+    .input {
+        position: relative;
+        align-items: center;
+        display: inline-flex;
+
+        .input-div,
+        textarea,
+        input {
+            width: 100%;
+            height: 100%;
+            outline: none;
+            border: none;
+            font-size: 14px;
+            color: var(--colors-content-color);
+            padding-left: 4px;
+            resize: none;
+
+            & + .replace {
+                position: absolute;
+                z-index: 1;
+            }
+
+            &.replace-input {
+                opacity: 0;
+                cursor: pointer;
+            }
+        }
+
+        .pre-icon {
+            position: absolute;
+            z-index: 1;
+        }
+    }
+
+    .label {
+        cursor: pointer;
+        margin-left: 7px;
+    }
+
+    .radio,
+    .checkbox {
+        width: 16px;
+        height: 16px;
+
+        input {
+            & + .replace {
+                color: var(--colors-color);
+                border: 1px solid currentColor;
+                background-color: var(--colors-normal-back);
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                pointer-events: none;
+                transition: all 0.1s linear;
+            }
+
+            &:focus + .replace {
+                border-color: var(--colors-primary-base);
+            }
+
+            &:checked + .replace {
+                color: var(--colors-primary-base);
+            }
+        }
+    }
+
+    .checkbox input {
+        & + .replace {
+            border-radius: 4px;
+            .icon {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%) scale(0);
+                transition: all 0.1s linear;
+            }
+        }
+
+        &:checked + .replace {
+            .icon {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+    }
+
+    .radio input {
+        & + .replace {
+            border-radius: 50%;
+            &::after {
+                content: '';
+                border-radius: 50%;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%) scale(0);
+                transition: all 0.1s linear;
+                width: 60%;
+                height: 60%;
+                background-color: currentColor;
+            }
+        }
+
+        &:checked + .replace::after {
+            transform: translate(-50%, -50%) scale(1);
+        }
+    }
+
+    .text {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+
+        input {
+            background: var(--colors-normal-back);
+            height: 100%;
+            padding: 8px 10px;
+            border-radius: 4px;
+            border: 1px solid var(--base-border-color);
+            transition: border 0.3s ease;
+
+            &:focus {
+                border-color: var(--colors-primary-base);
+            }
+            &.warn {
+                border-color: var(--colors-warn);
+                &:focus {
+                    border-color: var(--colors-warn);
+                }
+            }
+
+            &::placeholder {
+                color: var(--colors-color);
+            }
+        }
+
+        &.pre-suffix {
+            input {
+                padding-left: 30px;
+            }
+            .pre-icon {
+                left: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        &.right input {
+            text-align: right;
+        }
+
+        &.suffix {
+            input {
+                padding-right: 60px;
+            }
+            .retouch {
+                position: absolute;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 10;
+                cursor: pointer;
+            }
+
+            .len {
+                font-size: var(--small-size);
+                color: rgba(var(--colors-primary-fill), 1);
+
+                span {
+                    color: var(--colors-primary-base);
+                }
+            }
+        }
+
+        &.ready {
+            .retouch,
+            input {
+                transition: all 0.1s linear;
+            }
+        }
+    }
+
+    .textarea {
+        width: 100%;
+        height: 100%;
+        min-height: 50px;
+
+        > .replace {
+            border-radius: 4px;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            background: var(--colors-normal-back);
+            border: 1px solid var(--base-border-color);
+            transition: border 0.3s ease;
+        }
+
+        .input-div {
+            overflow-y: auto;
+
+            a {
+                color: var(--color-main-normal);
+            }
+        }
+        .input-div,
+        textarea {
+            height: 100%;
+            width: 100%;
+            padding: 10px;
+
+            &:focus + .replace {
+                border-color: var(--colors-primary-base);
+            }
+
+            &::placeholder {
+                color: var(--colors-color);
+            }
+        }
+
+        &.right .input-div,
+        &.right textarea {
+            text-align: right;
+        }
+
+        &.suffix {
+            --bar-height: 30px;
+
+            .input-div,
+            textarea {
+                margin-bottom: var(--bar-height);
+                height: calc(100% - var(--bar-height));
+            }
+
+            > .retouch {
+                position: absolute;
+                right: 0;
+                left: 0;
+                bottom: 0;
+                background-color: rgba(var(--colors-primary-fill), 0.1);
+                height: var(--bar-height);
+                display: flex;
+                padding: 0 10px;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .len {
+                justify-self: end;
+                font-size: var(--small-size);
+                color: rgba(var(--colors-primary-fill), 1);
+
+                span {
+                    color: var(--colors-primary-base);
+                }
+            }
+        }
+    }
+
+    .number {
+        input {
+            -moz-appearance: textfield;
+        }
+        input::-webkit-inner-spin-button,
+        input::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        .ctrls {
+            position: absolute;
+            inset: 2px 0;
+            width: 8px;
+            .icon {
+                position: absolute;
+                right: 0;
+
+                &.up {
+                    bottom: 0;
+                }
+                &.down {
+                    top: 0;
+                }
+            }
+        }
+
+        &.ctrl.suffix input {
+            padding-right: 20px;
+            z-index: 1;
+        }
+    }
+
+    .select {
+        input {
+            cursor: pointer;
+            &.ui-text {
+                padding-right: 0;
+            }
+            &.icon {
+                padding-right: 30px;
+            }
+        }
+
+        &.focus {
+            input {
+                border-color: var(--colors-primary-base);
+            }
+            .retouch {
+                transform: translateY(-50%) rotateZ(180deg);
+            }
+        }
+    }
+
+    .range {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        --height: 6px;
+        --slideSize: calc(var(--height) + 8px);
+
+        .range-content {
+            flex: 1;
+            background-color: var(--colors-normal-back);
+            position: relative;
+            cursor: pointer;
+        }
+
+        .range-content::before,
+        .range-content {
+            height: var(--height);
+            border-radius: calc(var(--height) / 2);
+        }
+
+        .range-content::before,
+        .range-content .range-slide {
+            content: '';
+            position: absolute;
+        }
+
+        .range-content::before {
+            pointer-events: none;
+            left: 0;
+            top: 0;
+            width: var(--percentage);
+            background-color: var(--colors-primary-base);
+        }
+
+        .range-locus {
+            width: calc(100% - var(--slideSize));
+            height: var(--height);
+            position: relative;
+
+            .range-slide {
+                cursor: pointer;
+                height: var(--slideSize);
+                width: var(--slideSize);
+                top: 50%;
+                left: var(--percentage);
+                transform: translateY(-50%);
+                background-color: var(--colors-content-color);
+                border-radius: 50%;
+            }
+        }
+
+        .range-text {
+            margin-left: 10px;
+            width: 65px;
+        }
+
+        .animation {
+            &.range-content::before,
+            .range-slide {
+                transition: all 0.1s linear;
+            }
+        }
+    }
+
+    .switch {
+        --height: 24px;
+        width: 50px;
+        height: var(--height);
+
+        .replace {
+            background-color: rgba(255, 255, 255, 0.3);
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: calc(var(--height) / 2);
+            pointer-events: none;
+            position: relative;
+            transition: background-color 0.3s ease;
+
+            &::after {
+                content: '';
+                --padding: 3px;
+                --size: calc(var(--height) - var(--padding) * 2);
+                position: absolute;
+                width: var(--size);
+                height: var(--size);
+                top: var(--padding);
+                background: var(--colors-content-color);
+                border-radius: 50%;
+                left: var(--padding);
+                transition: left 0.3s ease;
+            }
+        }
+
+        input:checked + .replace {
+            background-color: var(--colors-primary-base);
+
+            &::after {
+                left: calc(100% - var(--size) - var(--padding));
+            }
+        }
+    }
+
+    .file {
+        width: 100%;
+        height: 100%;
+
+        input {
+            cursor: pointer;
+            opacity: 0;
+        }
+        .use-replace {
+            position: absolute;
+        }
+        .use-replace,
+        .replace {
+            left: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+        }
+
+        &:not(.valuable) {
+            .replace {
+                top: 0;
+                bottom: 0;
+                background: rgba(var(--colors-primary-fill), 0.1);
+                border-radius: 4px;
+                border: 1px solid rgba(var(--colors-primary-fill), 0.2);
+                // position: relative;
+
+                .placeholder {
+                    text-align: center;
+                    max-width: 80%;
+
+                    p:not(:last-child) {
+                        margin-bottom: 10px;
+                    }
+
+                    .bottom {
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.3);
+                        width: 90%;
+                        position: absolute;
+                        bottom: 10px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        text-align: left;
+                    }
+                }
+            }
+
+            input {
+                width: 100%;
+                height: 100%;
+
+                &:focus + .replace {
+                    border-color: var(--colors-primary-base);
+                }
+            }
+        }
+        &.valuable {
+            background: rgba(var(--colors-primary-fill), 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(var(--colors-primary-fill), 0.2);
+
+            input,
+            .replace {
+                position: absolute;
+                bottom: 0;
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%);
+                height: 32px;
+                line-height: 32px;
+
+                .tj {
+                    position: absolute;
+                    right: 10px;
+                    top: 0;
+                    bottom: 0;
+                    display: flex;
+                    align-items: center;
+                    font-size: 10px;
+
+                    > span {
+                        color: var(--colors-primary-base);
+                        margin-right: 4px;
+                    }
+                }
+            }
+
+            .icons {
+                position: absolute;
+                right: 10px;
+                top: 0;
+
+                span {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    background: rgba(0, 0, 0, 0.3);
+                    font-size: 12px;
+                    color: rgba(255, 255, 255, 0.6);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+
+    .search {
+        .retouch {
+            transform: translateY(-50%) !important;
+
+            .clear {
+                // background-color: rgba(255,255,255,.3);
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: rgba(255, 255, 255, 0.6);
+                border-radius: 50%;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .color {
+        &.default {
+            input {
+                opacity: 1;
+                border: inherit;
+                outline: inherit;
+            }
+        }
+        .replace {
+            pointer-events: none;
+        }
+    }
+}
+
+.select-float {
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: center top;
+
+    &:not(.show) {
+        transform: scale(1, 0);
+        opacity: 0;
+        pointer-events: none;
+    }
+    &.show {
+        transform: scale(1, 1);
+        opacity: 1;
+    }
+}
+
+.select-replace {
+    --colors-content-color: #fff;
+
+    list-style: none;
+    max-height: 288px;
+    background: rgba(26, 26, 26, 0.8);
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3), inset 0 0 1px rgb(255 255 255 / 90%);
+    backdrop-filter: blur(4px);
+    border-radius: 4px;
+    overflow-y: auto;
+    color: var(--colors-content-color);
+
+    li {
+        padding: 10px 10px;
+        font-size: 14px;
+
+        &.un-data {
+            padding: 20px;
+            color: rgba(255, 255, 255, 0.3);
+            pointer-events: none;
+        }
+        &.active {
+            background: var(--colors-normal-back);
+            color: var(--colors-primary-base);
+        }
+
+        &:not(.active):hover {
+            cursor: pointer;
+            background-color: var(--colors-primary-base);
+        }
+    }
+}
+
+.is-hidden {
+    position: absolute;
+    left: -10000px;
+    top: -10000px;
+}
+.no-vip {
+    .file {
+        input {
+            pointer-events: none;
+        }
+        label {
+            pointer-events: none;
+        }
+    }
+}

packages/qjkankan-components/src/components/dialog/Window.vue

@@ -0,0 +1,63 @@
+<template>
+    <ui-dialog>
+        <template v-slot:header>
+            <span style="font-size: 16px">{{ title }}</span>
+            <i class="iconfont icon-bs_close" @click="onNo" v-if="showCloseIcon"></i>
+        </template>
+        <template v-if="$slots.content">
+            <slot name="content" />
+        </template>
+        <template v-else>
+            {{ content }}
+        </template>
+        <template v-slot:footer>
+            <ui-button type="cancel" @click="onNo" v-if="showCancelButton">{{ noText }}</ui-button>
+            <ui-button :class="{ disabled: !canSubmit }" type="submit primary" @click="onOk">{{ okText }}</ui-button>
+        </template>
+    </ui-dialog>
+</template>
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+    name: 'ui-window',
+    props: {
+        title: {
+            type: String,
+            default: '提示'
+        },
+        okText: {
+            type: String,
+            default: '确定'
+        },
+        noText: {
+            type: String,
+            default: '取消'
+        },
+        showCloseIcon: {
+            type: Boolean,
+            default: true
+        },
+        showCancelButton: {
+            type: Boolean,
+            default: true
+        },
+        canSubmit: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: ['ok', 'no'],
+    setup: function(props, ctx) {
+        const onNo = () => {
+            ctx.emit('no')
+        }
+        const onOk = () => {
+            ctx.emit('ok')
+        }
+        return {
+            onNo,
+            onOk
+        }
+    }
+})
+</script>

packages/qjkankan-components/src/components/dialog/index.js

@@ -0,0 +1,93 @@
+import Dialog from './Dialog'
+import Window from './Window'
+import Toast from './Toast'
+import Alert from './Alert'
+import Confirm from './Confirm'
+import DialogContent from './Dialog-content'
+import { mount } from '../../utils/componentHelper'
+
+Dialog.use = function use(app) {
+    Dialog.toast = function (options) {
+        if (typeof options == 'string') {
+            options = {
+                content: options,
+            }
+        }
+
+        const { destroy, vNode, el } = mount(Toast, {
+            app,
+            props: {
+                ...options,
+                destroy: () => destroy()
+            },
+        })
+
+        if (!Dialog.toast._destroys) {
+            Dialog.toast._destroys = []
+        }
+        Dialog.toast._destroys.push(destroy)
+
+        return {
+            hide: function () {
+                let destroy = null
+                while ((destroy = Dialog.toast._destroys.shift()) && destroy) {
+                    destroy()
+                }
+            }.bind(this),
+        }
+    }
+    Dialog.toast.hide = function () {
+        if (Dialog.toast._destroys && Dialog.toast._destroys.length) {
+            let destroy = Dialog.toast._destroys.pop()
+            destroy && destroy()
+        }
+    }
+    Dialog.alert = function (options) {
+        if (typeof options == 'string') {
+            options = {
+                content: options,
+            }
+        }
+
+        const { destroy } = mount(Alert, {
+            app,
+            props: { ...options, destroy: () => destroy() },
+        })
+
+        this.alert.hide = function () {
+            destroy()
+        }
+
+        return this.alert
+    }
+
+    Dialog.confirm = function (options) {
+        if (typeof options == 'string') {
+            options = {
+                content: options,
+            }
+        }
+
+        let promise
+        if (!options.func) {
+            promise = new Promise(resolve => {
+                options.func = result => resolve(result === 'ok')
+            })
+        }
+
+        const { destroy } = mount(Confirm, {
+            app,
+            props: { ...options, destroy: () => destroy() },
+        })
+
+        this.confirm.hide = function () {
+            destroy()
+        }
+
+        return promise || this.confirm
+    }
+}
+
+export { Window, Toast, Alert, Confirm, DialogContent }
+
+export default Dialog