Coder Social home page Coder Social logo

kongying-tavern / map_register_v3 Goto Github PK

View Code? Open in Web Editor NEW
27.0 27.0 9.0 11.16 MB

空荧后厨(空荧酒馆原神互动地图及数据综合管理应用)

HTML 0.11% JavaScript 1.14% Vue 53.64% SCSS 0.73% TypeScript 44.20% GLSL 0.18%
deck-gl dexie-js typescipt vue3

map_register_v3's People

Contributors

766aya avatar altermoe avatar boxsnake avatar c03311 avatar dependabot[bot] avatar fenriliuguang avatar jiazengp avatar mikezhuang2022 avatar momentderek avatar zsxb2468 avatar ztao-z avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

map_register_v3's Issues

快捷键功能

  • 快捷键
    • 新增
    • 刷新
    • 删除
    • 移动点位
    • 选择器上一步
    • 选择器下一步
    • 选择器收起/展开
    • 点位描述展开

打点页基础功能重构

重构开发

  • 地图
    • 配置获取方法
    • 地图界面布局
    • 地图刷新底图
    • 地图点位加载
    • 插件
      • 海岛地图切换插件
  • 地区选择器
    • 地区选择器布局
    • 地区数据刷新
  • 类别选择器
    • 类别选择器布局
    • 类别数据刷新
  • 物品选择器
    • 物品选择器布局
    • 物品数据刷新
  • 选择器布局功能
    • 上一步
    • 下一步
    • 展开/折叠
  • 点位列表
    • 点位列表数据加载显示
    • 点位列表描述展开、折叠功能
    • 点位列表过滤
  • 点位功能
    • 点位新增、编辑功能
      • 常规字段编辑
      • 图片上传
      • 类别关联
      • 插件
        • 海岛附加数据设置字段插件
        • 稻妻附加数据设置字段插件
    • 点位列表刷新功能

根据csv批量生成账号

在创建用户区域,增加一个按钮用于上传文件,文件上传后,展示读取到的csv内容,然后直接将内容传至批量创建的接口,创建完后展示创建结果,提供单条点击复制的功能和全部复制的功能

须弥地下

  • 在须弥地区,右下角出现地下模式
  • 开启地下模式时,只显示地下点位。不开启时,只显示地上点位
  • 点位编辑表单有须弥extra编辑组件

打点审核

打点员

  • 暂存点位,待审核点位
    • 表格页面
    • 突出显示(可设置)

管理员

  • 审核模式切换
  • 审核弹窗
    • UI实现
    • API提交
  • 隐藏已审核点位(可设置)
  • 管理中心放一个表格显示未审核点位,可根据传送,通过物品item, 地区area, 提交者ID筛选

根据qq号快速创建账号和一般注册

在用户管理界面的顶部加一个区域用于快速创建账号,首先是根据qq号快速创建单一账号,创建完后以弹窗形式展示创建好的账户信息,包括密码,提供一键复制的功能
至于完整的用户注册功能则是用一个按钮来弹出浮窗来注册(输入用户密码和其他信息的那种)

路线功能

功能描述

添加一条路线,显示百分比(已完成点位/总点位数量, 前端计算),配上领跑视频。分为公共和个人路线。

存储方式(暂定)

  • 公共: 业务接口
  • 个人: 云同步

API路径

参考点位API

地址 说明
/line/single 添加路线 PUT
/line/single 修改路线 POST
/line/{lineId} 删除路线 DELETE
/line/get/list_byinfo 根据各种条件筛选查询路线信息
/line/get/list_byid 通过ID列表查询路线信息
/line/get/id 根据各种条件筛选查询路线ID
/line/get/page 分页查询所有路线信息

数据结构

英文名 类型 中文名 说明
id integer 路线ID
markerList array 点位数组 路线按照数组内顺序
content string 内容
lineCreatorId integer 路线创建者ID
viedoPath string 领跑视频地址 建议设置校验,基本格式"https://www.bilibili.com/video/BV1JP411E7fV?t=58.2&p=5"
hiddenFlag integer 显隐方法
lineTitle string 路线标题

物品管理器

物品管理器,大体上逻辑参照群内的物品管理器

将物品列表变成竖向列表,列表项依次显示图标、名称、点位数量、编辑操作、显示同名物品、删除操作。

列表上方为筛选地区(多地区时列表多一列地区),筛选物品类型,搜索物品,新增物品,批量复制,批量删除

物品新增参照物品管理器,不清楚的在群里问a8

用户的可视化增删改查

我的想法是用户管理用一个列表来展示,
列表上方是一个筛选功能,提供创建日期的筛选,qq号筛选,用户名筛选,昵称筛选,其中文本类的筛选用一个选择器加一个输入框来实现切换分类筛选
列表本身点击即可编辑,编辑后当前行右侧出现保存按钮,不弄实时保存,每行右侧常驻“重置密码”,“删除用户”,列表字段除了用户字段外,还需要加上角色(选择器形式),用户ID不可编辑,用户密码无法获取,其他都可以编辑

整体页面框架的建立

按照之前讨论的,打点页右下角加一个按钮式的东西,管理员点击跳转数据管理,用户管理界面,其他用户点击进入帮助界面

[BUG]点位地下模式加载异常

错误页面的链接

localhost:9000

重现步骤

  • 登录v3地图打点页
  • 打开auto next
  • 选取蒙德地区
  • 选取特产类别
  • 选取任意物品

期望结果

地图显示相关点位信息

实际结果

地图显示相关点位信息,但是极短时间后消失,表现为闪现。
查看控制台发现报错信息。
Uncaught TypeError: Cannot read properties of null (reading 'el')
at NewClass._updatePath (genshinMarker.ts:164:38)
at NewClass._update (CircleMarker.js:86:9)
at NewClass._updatePaths (Canvas.js:95:10)
at NewClass.fire (Events.js:195:9)
at NewClass._update (Canvas.js:126:8)
at GenshinMap.fire (Events.js:195:9)
at GenshinMap._moveEnd (Map.js:1254:15)
at GenshinMap._onZoomTransitionEnd (Map.js:1735:8)

浏览器版本

Microsoft Edge

系统版本

Windows 10

环境信息

No response

补充说明

经初步排查,在非须弥、稻妻、雪山地区会出现该bug

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.