🎉

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+dist
+*.local
+.vite-inspect
+.remote-assets
+components.d.ts
+.idea

.npmrc

@@ -0,0 +1,3 @@
+# for pnpm
+shamefully-hoist=true
+auto-install-peers=true

README.md

@@ -0,0 +1,11 @@
+# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
+
+To start the slide show:
+
+- `pnpm install`
+- `pnpm dev`
+- visit <http://localhost:3030>
+
+Edit the [slides.md](./slides.md) to see the changes.
+
+Learn more about Slidev at the [documentation](https://sli.dev/).

components/Counter.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  count: {
+    default: 0,
+  },
+})
+
+const counter = ref(props.count)
+</script>
+
+<template>
+  <div flex="~" w="min" border="~ main rounded-md">
+    <button
+      border="r main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter -= 1"
+    >
+      -
+    </button>
+    <span m="auto" p="2">{{ counter }}</span>
+    <button
+      border="l main"
+      p="2"
+      font="mono"
+      outline="!none"
+      hover:bg="gray-400 opacity-20"
+      @click="counter += 1"
+    >
+      +
+    </button>
+  </div>
+</template>

netlify.toml

@@ -0,0 +1,16 @@
+[build]
+publish = "dist"
+command = "npm run build"
+
+[build.environment]
+NODE_VERSION = "20"
+
+[[redirects]]
+from = "/.well-known/*"
+to = "/.well-known/:splat"
+status = 200
+
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "structure-and-design",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "slidev --open",
+    "export": "slidev export"
+  },
+  "dependencies": {
+    "@slidev/cli": "^52.1.0",
+    "@slidev/theme-default": "latest",
+    "@slidev/theme-seriph": "latest",
+    "vue": "^3.5.18"
+  }
+}

slides.md

@@ -0,0 +1,331 @@
+---
+# 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>
+
+---
+
+# 谢谢!!!

vercel.json

@@ -0,0 +1,7 @@
+{
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ],
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist"
+}