---
# You can also start simply with 'default'
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://cover.sli.dev
# some information about your slides (markdown enabled)
title: Welcome to Slidev
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

  Learn more at [Sli.dev](https://sli.dev)
# apply unocss classes to the current slide
class: text-center
# https://sli.dev/features/drawing
drawings:
  persist: false
# slide transition: https://sli.dev/guide/animations.html#slide-transitions
transition: slide-left
# enable MDC Syntax: https://sli.dev/features/mdc
mdc: true
# open graph
seoMeta:
  # By default, Slidev will use ./og-image.png if it exists,
  # or generate one from the first slide if not found.
  ogImage: auto
  # ogImage: https://cover.sli.dev
---

## Hybirdscope V3 数据结构和后端设计

<div @click="$slidev.nav.next" class="mt-12 py-1" hover:bg="white op-10">Start<carbon:arrow-right />
</div>

---
transition: slide-left
---

## 斗胆抛砖引玉

<br>
<v-click>
各位都是各个方面的大神, 我也是斗胆在这里给大家讲一下后续后端重构的设计思路和数据结构设计思路
<br>
后续在数据对接上大家更加方便, 效率也更高!
<br>
如果有不太对的地方也希望大家帮我指证出来, 改进和共同进步!!!
</v-click>


<v-click>
<h4 style="margin-top: 1rem">📝 数据结构需要结合业务来设计 </h4>
</v-click>

<v-click>
<h4>🎨 那么我们的主要业务是啥呢? 安全域!!!</h4> 
</v-click>

<v-click>
<h4>🧑‍💻 既然有了安全域, 安全域为谁服务呢? 用户!!!</h4> 
</v-click>

<v-click>
<h4>🤹 安全域为用户服务什么呢? 资源(配置)!!!</h4> 
</v-click>

<v-click>
<h4>🎥 其实到这里就已经显而易见了, 我们的数据模型就 3 点</h4>
</v-click>

<v-click>
<h4>📤 资源(配置) <-> 安全域 <-> 用户</h4> 
</v-click>


<style>
h1 {
  background-color: #2B90B6;
  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
</style>
---
transition: slide-left
level: 2
---

# 它们之间的关系

<div style="display: flex;justify-content: center;align-items: center; height: 100%;margin-top: -4rem; flex-direction: column;">

```mermaid {theme: 'neutral', scale: 1}
flowchart LR
资源配置 <--> 安全域 <-->  用户
```
<br>
<v-click>
真要这么简单, 我也不用专门让大家来一起过一下这个事情
</v-click>

<br>
<v-click>
我们先来看看安全域和用户之间的关系
</v-click>

</div>

---
transition: slide-left
level: 2
---
<style>
div {
display: flex;
justify-content: center;align-items: center;
flex-direction: column;
}
h1 {
background-color: #2B90B6;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
img {
 height: 70%;
}
h3 {
color: #2B90B6;
}
</style>

# 安全域 <-> 用户

<div>
<img height="500" src="./static/01.png">

<v-click>

### 这里其实很清晰, 用户关联安全域, 但是不是关联 x用户, y部门到安全域A
### 而是关联 用户x, 部门y 到安全域A 的用户组 a

</v-click>
</div>

---
transition: slide-left
level: 2
---
<style>
div {
display: flex;
justify-content: center;align-items: center;
flex-direction: column;
}
h1 {
background-color: #2B90B6;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
img {
 height: 80%;
}
h3 {
color: #2B90B6;
}
</style>

<br>


# 资源/配置 <-> 安全域

<div v-click>

<img height="500" src="./static/02.png">

</div>

---
transition: slide-left
level: 2
---
<style>
h1 {
background-color: #2B90B6;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.img03 {
  height: 80%;
}
.img03 img {
width: auto;
}
</style>

<br>


# 资源/配置 <-> 安全域 <-> 用户

<div v-click class="img03">

<img src="./static/03.png">

</div>

---
transition: slide-left
level: 2
---
<style>
h1 {
background-color: #2B90B6;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.img04 {
  height: 100%;
  width: 100%;
  scale: 1.5;
}
</style>


# 资源/配置 <-> 安全域 <-> 用户

<div v-click class="img04">

<img src="./static/04.png">

</div>

---
transition: slide-left
level: 2
---
<style>
h1 {
background-color: #2B90B6;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.img05 {
  height: 100%;
  width: 100%;
  scale: 1.3;
display: flex;
flex-direction: row;
}

.img06 {
height: 100%;
}
</style>


# 关联表设计

<div class="img05">

<img src="./static/05.png">
<div v-click class="img06">
<img src="./static/06.png">
</div>

</div>

---
transition: slide-left
level: 2
---
<style>
div {
display: flex;
justify-content: center;align-items: center;
flex-direction: column;
}
h1 {
background-color: #2B90B6;
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
</style>

# 资源表

<div>
<img height="500" src="./static/07.png">

<div v-click>

```json
{
  "config-xx": 1753627188924,
  "config-yy": 1753627188924,
  "resource-a1": 1753627188924,
  "resource-b1": 1753627188924,
  "resource-c1": 1753627188924,
  "resource-d1": 1753627188924
}
```

</div>
</div>

---

# 谢谢!!!