Home Explore Help
Register Sign In
siweilian
/
web
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

基本工程

mrh 2 years ago
parent
203c821006
commit
b35292018b
8 changed files with 88 additions and 64 deletions
Unified View Show Diff Stats
  1. 10 0
      README.md
  2. 47 0
      dev-document.md
  3. 9 8
      index.html
  4. 4 1
      package.json
  5. 5 1
      src/App.vue
  6. 9 3
      src/main.js
  7. 4 3
      src/views/Home.vue
  8. 0 48
      src/views/SearchBar.vue

+ 10 - 0
README.md
View File 

@@ -1,6 +1,16 @@
 
 # 介绍
 
 # 介绍
 
 ```shell
 
 ```shell
 
+cnpm install --save-dev
 
+
 
+```
 
+
 
+# 开发
 
+```shell
 
 npm init vite
 
 npm init vite
 
+# 安装 element
 
+cnpm install element-plus --save
 
+cnpm install --save-dev electron
 
+
 
 # project name：随意填  readit
 
 # project name：随意填  readit
 
 npm install 
 npm install 
 # 启动前端项目
 
 # 启动前端项目

+ 47 - 0
dev-document.md
View File 

@@ -0,0 +1,47 @@
 
+
 
+## 立项
 
+假设你是一名专业的产品经理，基于vue3和element-pluse创建一个内网穿透的项目，以下是项目的大体思路：
 
+- 左侧导航栏，包含组件路由：用户, 列表, 应用, 设置, 关于
 
+  - 用户页面包含头像、退出登录、账户余额等信息
 
+  - 列表包含内网穿透的隧道列表信息，http、SRV、SSH、TCP 等列表对应的域名绑定，添加隧道、启动隧道等信息
 
+  - 应用包含内网穿透所支持的应用插件、推荐
 
+  - 设置是关于软件设置
 
+  - 关于页面包含软件信息，使用帮助，建议反馈
 
+在页面主体区域对应每一个导航栏的页面。
 
+根据这些思路完善、补充，写一个产品文档。
 
+
 
+# 产品文档
 
+
 
+## 项目概述
 
+该项目是一个基于Vue3和Element Plus的内网穿透管理系统。它旨在提供一个简单易用的界面，使用户能够轻松管理其内网穿透隧道，并通过左侧导航栏快速访问各个功能模块。本文档将详细介绍项目的各项功能和设计。
 
+
 
+## 功能模块
 
+
 
+### 左侧导航栏
 
+左侧导航栏是系统的核心导航功能。它包含以下组件路由：
 
+
 
+1. **用户页面**：用于显示用户个人信息，包括头像、退出登录功能以及账户余额等信息。
 
+2. **列表页面**：提供内网穿透隧道的列表信息。支持HTTP、SRV、SSH、TCP等类型隧道的管理，包括域名绑定、隧道添加和启动功能。
 
+3. **应用页面**：展示内网穿透所支持的应用插件及推荐。用户可以在此页面方便地探索各种应用插件。
 
+4. **设置页面**：用于管理软件的相关设置，提供个性化设置选项，以及其他必要的系统配置选项。
 
+5. **关于页面**：包含软件的相关信息、使用帮助以及建议反馈功能。用户可以在这里找到对软件的详细介绍和使用说明。
 
+
 
+### 页面主体区域
 
+页面主体区域对应每一个导航栏的页面，并展示相应页面的详细信息和功能。具体细节如下：
 
+
 
+1. **用户页面**：展示用户的个人信息，并提供退出登录和账户余额查看等功能。
 
+2. **列表页面**：展示内网穿透的隧道列表信息，包括不同类型隧道的详细信息和管理功能。
 
+3. **应用页面**：展示内网穿透所支持的应用插件及推荐，让用户能够快速了解和选择适合自己需求的插件。
 
+4. **设置页面**：提供软件的相关设置功能，包括个性化设置选项和系统配置选项等。
 
+5. **关于页面**：展示软件的详细信息，使用帮助和建议反馈功能，让用户能够了解软件的背景和使用方法，并提供反馈渠道。
 
+
 
+## 技术实现
 
+本项目基于Vue3框架和Element Plus组件库开发，使用内网穿透技术实现网络访问隧道。我们将充分利用Vue3的响应式特性和Element Plus的丰富组件，提供用户友好的交互界面和丰富的功能实现。同时，我们将注重系统的稳定性和安全性，确保用户信息和数据的安全可靠。
 
+
 
+## 未来规划
 
+在未来的版本中，我们将进一步完善用户体验，提升系统性能和安全性。同时，我们也将不断增加新的功能模块和应用插件，丰富系统的功能和应用场景，以满足不同用户的需求。
 
+
 
+以上是对项目的初步规划和设计，我们将不断优化和完善系统，为用户提供更好的服务和体验。如有任何疑问或建议，欢迎随时联系我们的团队。感谢您对我们项目的支持和关注！
 
+
 
+
 
+将以上文档总结成5个句话，让公司所有人知道要做什么、应该怎么做

+ 9 - 8
index.html
View File 

@@ -1,16 +1,17 @@
 
-<!doctype html>
 
-<html lang="en">
 
+<html>
 
   <head>
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self' " /> -->
 
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
 
-    <title>Vite + Vue</title>
 
-    <link rel="stylesheet" type="text/css" href="src/assets/common.css">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
+    <script src="https://unpkg.com/vue@next"></script>
 
+    <!-- import CSS -->
 
+    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
 
+    <!-- import JavaScript -->
 
+    <script src="https://unpkg.com/element-plus"></script>
 
+    <title>Element Plus demo</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>
 
     <script type="module" src="/src/main.js"></script>
 
     <script type="module" src="/src/main.js"></script>
 
+    </script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 4 - 1
package.json
View File 

@@ -3,7 +3,6 @@
 
   "private": true,
 
   "private": true,
 
   "version": "0.0.0",
 
   "version": "0.0.0",
 
   "main": "main.js",
 
   "main": "main.js",
 
-
 
   "scripts": {
 
   "scripts": {
 
     "dev": "vite",
 
     "dev": "vite",
 
     "build": "vite build",
 
     "build": "vite build",
 
@@ -13,11 +12,15 @@
 
   "dependencies": {
 
   "dependencies": {
 
     "electron": "^26.2.1",
 
     "electron": "^26.2.1",
 
     "electron-win-state": "^1.1.22",
 
     "electron-win-state": "^1.1.22",
 
+    "element-plus": "^2.4.1",
 
     "nodemon": "^3.0.1",
 
     "nodemon": "^3.0.1",
 
     "vue": "^3.3.4"
 
     "vue": "^3.3.4"
 
   },
 
   },
 
   "devDependencies": {
 
   "devDependencies": {
 
     "@vitejs/plugin-vue": "^4.2.3",
 
     "@vitejs/plugin-vue": "^4.2.3",
 
+    "electron": "^27.0.3",
 
+    "unplugin-auto-import": "^0.16.7",
 
+    "unplugin-vue-components": "^0.25.2",
 
     "vite": "^4.4.5"
 
     "vite": "^4.4.5"
 
   }
 
   }
 
 }
 
 }

+ 5 - 1
src/App.vue
View File 

@@ -1,10 +1,14 @@
 
 <script setup>
 
 <script setup>
 
     import { ref } from 'vue'
 
     import { ref } from 'vue'
 
-    import Home from './views/Home.vue';
 
+    import Home from './views/Home.vue'
 
+
 
+    const count = ref(0)
 
+    
 </script>
 
 </script>
 
 
 
 <template>
 
 <template>
 
   <Home></Home>
 
   <Home></Home>
 
+  <p>count: {{ count }}</p>
 
 </template>
 
 </template>
 
 
 
 <style lang="css">
 
 <style lang="css">

+ 9 - 3
src/main.js
View File 

@@ -1,6 +1,12 @@
 
-import { createApp } from 'vue'
 
+import ElementPlus from 'element-plus'
 
+import 'element-plus/dist/index.css'
 
+import '@/assets/common.css'
 
 import App from './App.vue'
 
 import App from './App.vue'
 
+import { createApp } from 'vue'
 
 
 
-import '@/assets/common.css'
 
 
 
-createApp(App).mount('#app')
 
+const app = createApp(App)
 
+
 
+app.use(ElementPlus)
 
+app.mount('#app')
 
+

+ 4 - 3
src/views/Home.vue
View File 

@@ -1,17 +1,18 @@
 
 <script setup>
 
 <script setup>
 
     import { ref } from 'vue'
 
     import { ref } from 'vue'
 
-    import Searchbar from './SearchBar.vue'
 
+    import ElementPlus from 'element-plus'
 
+    import 'element-plus/dist/index.css'
 
 </script>
 
 </script>
 
 
 
 <template>
 
 <template>
 
-    <!-- main 一个标签，你可以当成div -->
 
     <main>
 
     <main>
 
-        <Searchbar></Searchbar>
 
+        <el-button>Element button</el-button>
 
     </main>
 
     </main>
 
 </template>
 
 </template>
 
 
 
 <style lang="css">
 
 <style lang="css">
 
     main{
 
     main{
 
+        color: brown;
 
         border-color: brown;
 
         border-color: brown;
 
         background-color: bisque;
 
         background-color: bisque;
 
     }
 
     }

+ 0 - 48
src/views/SearchBar.vue
View File 

@@ -1,48 +0,0 @@
 
-<script setup>
 
-    import { ref } from 'vue'
 
-    
-</script>
 
-
 
-<template>
 
-    <div class="search-container">
 
-        <div class="button">+</div>
 
-        <div class="input">
 
-            <input type="text" placeholder="请输入关键字...">
 
-        </div>
 
-    </div>
 
-</template>
 
-
 
-<style lang="css">
 
-div.search-container{
 
-    height: 60px;
 
-    background-color: #d3d3d3;
 
-    display: flex;
 
-    align-items: center;
 
-    justify-content: center;
 
-}
 
-.button{
 
-    width: 40px;
 
-    height: 40px;
 
-    background-color: #1e90ff;
 
-    padding-left: 0;
 
-    border-radius: 5px;
 
-    font-size: 30px;
 
-    font-weight: bold;
 
-    color: #fff;
 
-    text-align: center;
 
-    cursor: default;
 
-}
 
-.input{
 
-    flex: 1;
 
-    height: 36px;
 
-    border: solid 1px #ccc;
 
-    border-radius: 5px;
 
-}
 
-.input input{
 
-    height: 100%;
 
-    width: 100%;
 
-    border: solid 1px #ccc;
 
-    border-radius: 5px;
 
-    padding: 0 10px;
 
-}
 
-</style>