diff --git a/.cursor/rules/vue-rules.mdc b/.cursor/rules/vue-rules.mdc
new file mode 100644
index 0000000..2cc94fc
--- /dev/null
+++ b/.cursor/rules/vue-rules.mdc
@@ -0,0 +1,69 @@
+---
+description:
+globs:
+alwaysApply: true
+---
+ This is a game guide editor that imitates draw.io, which introduces some game-specific interactive components into traditional flowchart editing. For instance, Shikigami selection and Yuhun selection - in essence, these are pre-set images.
+
+ The project previously utilized a large amount of AI-generated code, making it difficult to maintain in its current state. I will now follow the official Logic-Flow core component examples to refactor the project, improving both my understanding and future development efficiency.
+
+ You are an expert in TypeScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, and Tailwind.
+
+ Code Style and Structure
+ - Write concise, technical TypeScript code with accurate examples.
+ - Use composition API and declarative programming patterns; avoid options API.
+ - Prefer iteration and modularization over code duplication.
+ - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
+ - Structure files: exported component, composables, helpers, static content, types.
+
+ Naming Conventions
+ - Use lowercase with dashes for directories (e.g., components/auth-wizard).
+ - Use PascalCase for component names (e.g., AuthWizard.vue).
+ - Use camelCase for composables (e.g., useAuthState.ts).
+
+ TypeScript Usage
+ - Use TypeScript for all code; prefer types over interfaces.
+ - Avoid enums; use const objects instead.
+ - Use Vue 3 with TypeScript, leveraging defineComponent and PropType.
+
+ Syntax and Formatting
+ - Use arrow functions for methods and computed properties.
+ - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
+ - Use template syntax for declarative rendering.
+
+ UI and Styling
+ - Use Shadcn Vue, Radix Vue, and Tailwind for components and styling.
+ - Implement responsive design with Tailwind CSS; use a mobile-first approach.
+
+ Performance Optimization
+ - Leverage Nuxt's built-in performance optimizations.
+ - Use Suspense for asynchronous components.
+ - Implement lazy loading for routes and components.
+ - Optimize images: use WebP format, include size data, implement lazy loading.
+
+ Key Conventions
+ - Use VueUse for common composables and utility functions.
+ - Use Pinia for state management.
+ - Optimize Web Vitals (LCP, CLS, FID).
+ - Utilize Nuxt's auto-imports feature for components and composables.
+
+ Nuxt-specific Guidelines
+ - Follow Nuxt 3 directory structure (e.g., pages/, components/, composables/).
+ - Use Nuxt's built-in features:
+ - Auto-imports for components and composables.
+ - File-based routing in the pages/ directory.
+ - Server routes in the server/ directory.
+ - Leverage Nuxt plugins for global functionality.
+ - Use useFetch and useAsyncData for data fetching.
+ - Implement SEO best practices using Nuxt's useHead and useSeoMeta.
+
+ Vue 3 and Composition API Best Practices
+ - Use
@@ -85,10 +79,7 @@ const activeFileGroups = computed(() => {
+
@@ -136,7 +128,7 @@ const activeFileGroups = computed(() => {
}
.sidebar {
- width: 20%; /* 侧边栏宽度 */
+ width: 230px; /* 侧边栏宽度 */
background-color: #f0f0f0; /* 背景色 */
flex-shrink: 0; /* 防止侧边栏被压缩 */
overflow-y: auto; /* 允许侧边栏内容滚动 */
@@ -153,8 +145,8 @@ const activeFileGroups = computed(() => {
height: 100%; /* 确保内容区域占满父容器 */
overflow-y: auto; /* 允许内容滚动 */
min-height: 100vh; /* 允许容器扩展 */
- //display: inline-block;
- max-width: 100%;
}
+
+
+
-
\ No newline at end of file
diff --git a/src/components/DialogManager.vue b/src/components/DialogManager.vue
new file mode 100644
index 0000000..848e898
--- /dev/null
+++ b/src/components/DialogManager.vue
@@ -0,0 +1,43 @@
+
+
+
+ {
+ dialogs.shikigami.callback?.(data);
+ closeDialog('shikigami');
+ }"
+ />
+ {
+ dialogs.yuhun.callback?.(data);
+ closeDialog('yuhun');
+ }"
+ />
+ {
+ dialogs.property.callback?.(data);
+ closeDialog('property');
+ }"
+ />
+
\ No newline at end of file
diff --git a/src/components/ProjectExplorer.vue b/src/components/ProjectExplorer.vue
index d23fade..91ec0c4 100644
--- a/src/components/ProjectExplorer.vue
+++ b/src/components/ProjectExplorer.vue
@@ -34,7 +34,7 @@
-
-
-
-
-
-
- Documentation
-
- Vue’s
- official documentation
- provides you with all information you need to get started.
-
-
-
-
-
-
- Tooling
-
- This project is served and bundled with
- Vite. The
- recommended IDE setup is
- VSCode +
- Volar. If
- you need to test your components and web pages, check out
- Cypress and
- Cypress Component Testing.
-
-
-
- More instructions are available in README.md.
-
-
-
-
-
-
- Ecosystem
-
- Get official tools and libraries for your project:
- Pinia,
- Vue Router,
- Vue Test Utils, and
- Vue Dev Tools. If
- you need more resources, we suggest paying
- Awesome Vue
- a visit.
-
-
-
-
-
-
- Community
-
- Got stuck? Ask your question on
- Vue Land, our official
- Discord server, or
- StackOverflow. You should also subscribe to
- our mailing list and follow
- the official
- @vuejs
- twitter account for latest news in the Vue world.
-
-
-
-
-
-
- Support Vue
-
- As an independent project, Vue relies on community backing for its sustainability. You can help
- us by
- becoming a sponsor.
-
-
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 6a633bf..7a4fc31 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -77,13 +77,14 @@
\ No newline at end of file
diff --git a/src/components/Yys.vue b/src/components/Yys.vue
index 40c07cd..1928d6a 100644
--- a/src/components/Yys.vue
+++ b/src/components/Yys.vue
@@ -113,8 +113,8 @@
+
+
+
+
组件库
+
+
+
{{ group.title }}
+
+
handleMouseDown(e, component)"
+ >
+
+
+
+
+
{{ component.name }}
+
{{ component.description }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/flow/FlowEditor.vue b/src/components/flow/FlowEditor.vue
new file mode 100644
index 0000000..d266eaa
--- /dev/null
+++ b/src/components/flow/FlowEditor.vue
@@ -0,0 +1,179 @@
+
+
+
+
+
+
+
+
+
移至最前
+
移至最后
+
上移一层
+
下移一层
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/flow/PropertyPanel.vue b/src/components/flow/PropertyPanel.vue
new file mode 100644
index 0000000..18e1451
--- /dev/null
+++ b/src/components/flow/PropertyPanel.vue
@@ -0,0 +1,243 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/ShikigamiProperty.vue b/src/components/flow/nodes/yys/ShikigamiProperty.vue
similarity index 98%
rename from src/components/ShikigamiProperty.vue
rename to src/components/flow/nodes/yys/ShikigamiProperty.vue
index 03a93f6..bd6283d 100644
--- a/src/components/ShikigamiProperty.vue
+++ b/src/components/flow/nodes/yys/ShikigamiProperty.vue
@@ -123,10 +123,10 @@
+
+
+
+
+
点击选择式神
+
{{ currentShikigami.name }}
+
+
+
+
\ No newline at end of file
diff --git a/src/components/flow/nodes/yys/YuhunSelect.vue b/src/components/flow/nodes/yys/YuhunSelect.vue
new file mode 100644
index 0000000..b750d6c
--- /dev/null
+++ b/src/components/flow/nodes/yys/YuhunSelect.vue
@@ -0,0 +1,120 @@
+
+
+ 当前选择御魂:{{ props.currentYuhun.name }}
+
+
+
+
+
+
+
+
+
+
+
+ {{i.name}}
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/flow/nodes/yys/YuhunSelectNode.vue b/src/components/flow/nodes/yys/YuhunSelectNode.vue
new file mode 100644
index 0000000..c07d488
--- /dev/null
+++ b/src/components/flow/nodes/yys/YuhunSelectNode.vue
@@ -0,0 +1,69 @@
+
+
+
+