From 5f4858e991012ebd8cff4e32bad98b7c1966f3c4 Mon Sep 17 00:00:00 2001
From: Kubbo <390378816@qq.com>
Date: Sun, 12 Oct 2025 01:49:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=88=9D=E5=A7=8B=E5=8C=96Web?=
=?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=B9=B6=E9=87=8D=E6=9E=84=E7=99=BB=E5=BD=95?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 将模块名从 web-link 更改为 web
- 新增全局样式文件 index.scss 和 layout.scss，包含颜色、间距、布局等工具类
-重构登录页面，使用 Vue 组件语法替换原有 PHP 模板语法- 移除奶昔登录选项，保留 Linux.Do 登录方式- 更新静态资源路径，统一添加前导斜杠以确保正确加载
- 在 main.js 中调整应用挂载顺序，并增加配置信息打印
- 引入 axios 依赖用于后续 HTTP 请求处理- 修改 favicon 图标引用路径为 /favicon.ico- 调整背景图和表单元素样式，优化视觉效果与用户体验
---
index.html | 6 +-
module/{web-link => web}/package.json | 2 +-
package.json | 1 +
favicon.ico => public/favicon.ico | Bin
src/assets/css/index.scss | 108 ++++++++++++++++++
src/assets/css/layout.scss | 155 ++++++++++++++++++++++++++
src/main.js | 4 +-
src/views/login.vue | 32 +++---
8 files changed, 286 insertions(+), 22 deletions(-)
rename module/{web-link => web}/package.json (83%)
rename favicon.ico => public/favicon.ico (100%)
create mode 100644 src/assets/css/index.scss
create mode 100644 src/assets/css/layout.scss
diff --git a/index.html b/index.html
index 84a92ab..f5e45f1 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
-
+
-
-
+
+
神临苍月
diff --git a/module/web-link/package.json b/module/web/package.json
similarity index 83%
rename from module/web-link/package.json
rename to module/web/package.json
index b1d3aee..914e50a 100644
--- a/module/web-link/package.json
+++ b/module/web/package.json
@@ -1,5 +1,5 @@
{
- "name": "web-link",
+ "name": "web",
"private": true,
"scripts": {
"dev": "cd ../.. && pnpm dev",
diff --git a/package.json b/package.json
index 2d9e97a..952ca0b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"turbo": "turbo run dev"
},
"dependencies": {
+ "axios": "^1.12.2",
"vue": "^3.5.21",
"vue-router": "^4.5.1"
},
diff --git a/favicon.ico b/public/favicon.ico
similarity index 100%
rename from favicon.ico
rename to public/favicon.ico
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
new file mode 100644
index 0000000..f6219d2
--- /dev/null
+++ b/src/assets/css/index.scss
@@ -0,0 +1,108 @@
+@use "layout";
+
+// 1. 变量（可改）
+$colors: (
+ "slate": #64748b,
+ "sky": #0ea5e9,
+ "emerald":#10b981,
+ "rose": #f43f5e
+);
+$border-color: #DCDFE6;
+//$spacer: 0.25rem; // 1 单位 = 4px
+$spacer: 1px; // 1 单位 = 1px
+
+// 2. 工具函数
+@function size($n) { @return $n * $spacer; }
+
+// 3. 生成 margin / padding
+@each $k, $v in $colors {
+ .bg-#{$k} { background-color: $v; }
+ .text-#{$k}{ color: $v; }
+}
+
+@for $i from 0 through 40 {
+ .m-#{$i} { margin: size($i); }
+ .mt-#{$i} { margin-top: size($i); }
+ .mr-#{$i} { margin-right: size($i); }
+ .mb-#{$i} { margin-bottom: size($i); }
+ .ml-#{$i} { margin-left: size($i); }
+ .mx-#{$i} { margin-left: size($i); margin-right: size($i); }
+ .my-#{$i} { margin-top: size($i); margin-bottom: size($i); }
+ .p-#{$i} { padding: size($i); }
+ .pt-#{$i} { padding-top: size($i); }
+ .pr-#{$i} { padding-right: size($i); }
+ .pb-#{$i} { padding-bottom: size($i); }
+ .pl-#{$i} { padding-left: size($i); }
+ .px-#{$i} { padding-left: size($i); padding-right: size($i); }
+ .py-#{$i} { padding-top: size($i); padding-bottom: size($i); }
+ .font-#{$i} { font-size: size($i); }
+ .round-#{$i} { border-radius: size($i); overflow: hidden}
+ .lh-#{$i} { line-height: size($i)!important; }
+}
+
+.rounded { border-radius: 0.25rem; }
+.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+.shadow-l { box-shadow: -1px 0 3px rgba(0,0,0,0.2); }
+.shadow-r { box-shadow: 1px 0 3px rgba(0,0,0,0.2); }
+.shadow-b { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
+.shadow-t { box-shadow: 0 -1px 3px rgba(0,0,0,0.2); }
+
+.border { border: 1px solid #{$border-color}; }
+$directions: (
+ "t": top,
+ "r": right,
+ "b": bottom,
+ "l": left
+);
+
+@each $d, $v in $directions {
+ .border-#{$d} { border-#{$v}: 1px solid #{$border-color}; }
+}
+
+@each $v in (60,80,100,120,140,160,180,200,220,240,260,280,300,320,340,360,380) {
+ .w-#{$v}{width: size($v)!important;}
+ .h-#{$v}{height: size($v)!important;}
+}
+
+.w100{width: 100%!important;}
+.h100{height: 100%!important;}
+.w50{width: 50%!important;}
+.h50{height: 50%!important;}
+.w100v{width: 100vw!important;}
+.h100v{height: 100vh!important;}
+.w50v{width: 50vw!important;}
+.h50v{height: 50vh!important;}
+
+.no-devices{
+ background-image: url("../assets/no-devices.png");
+ background-repeat: no-repeat;
+ background-position: 50% 38.2%; /* 纵轴38.2% */
+ background-size: auto 40%;
+ text-align: center;
+ color: #888;
+ display: flex;
+ justify-content: center; /* 水平居中 */
+ padding-top: calc( 45% + 16px);
+}
+
+/* Chrome, Edge, Safari, Opera */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+ -moz-appearance: textfield;
+}
+
+.el-form-item__label,.el-descriptions-item__label{
+ word-break: break-word;
+}
+
+.el-table__header-wrapper{
+ .cell{
+ word-break: break-word;
+ }
+}
diff --git a/src/assets/css/layout.scss b/src/assets/css/layout.scss
new file mode 100644
index 0000000..7b1bf49
--- /dev/null
+++ b/src/assets/css/layout.scss
@@ -0,0 +1,155 @@
+.grid {
+ display: grid;
+ $cols: 2, 3, 4;
+ @each $size in $cols {
+ &.col-#{$size} {
+ grid-template-columns: repeat(#{$size}, 1fr);
+ }
+ }
+}
+
+.flex {
+ display: flex;
+ align-items: center;
+
+ &.center {
+ justify-content: center;
+ }
+
+ &.between {
+ justify-content: space-between;
+ }
+
+ &.around {
+ justify-content: space-around;
+ }
+
+ &.column {
+ flex-direction: column;
+
+ .fill {
+ .el-scrollbar__wrap {
+ overflow-x: hidden;
+ }
+ }
+ }
+
+ &.wrap {
+ flex-wrap: wrap;
+ }
+
+ &.baseline {
+ align-items: baseline;
+ }
+
+ &.start {
+ align-items: start;
+ }
+
+ .fill {
+ flex: 1;
+ min-width: 0;
+ min-height: 0;
+ }
+
+ $gaps: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40;
+ @each $size in $gaps {
+ &.gap-#{$size} {
+ gap: #{$size}px;
+ }
+ }
+
+ &.el-form {
+ flex-wrap: wrap;
+ $cols: 2, 3, 4;
+ @each $size in $cols {
+ &.col-#{$size} {
+ .el-form-item {
+ width: calc(100% / #{$size});
+ }
+ }
+ }
+
+ .el-form-item {
+ &.row {
+ width: 100%;
+ }
+
+ .el-date-editor, .el-select,.el-input-number {
+ width: 100% !important;
+ }
+ }
+ }
+}
+
+.shrink {
+ flex-shrink: 0;
+}
+
+.cameraGrid {
+ &.one {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .video {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ &.four {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .video {
+ width: 49%;
+ height: 49%;
+ }
+ }
+
+ &.nine {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .video {
+ width: calc(100% / 3);
+ height: calc(100% / 3);
+ padding: 10px;
+ text-align: center;
+ }
+ }
+
+ &.thirteen {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(4, calc(95% / 4));
+ grid-gap: 0.67708vw;
+ place-content: space-around;
+
+ .main {
+ grid-column-start: 2;
+ grid-column-end: 4;
+ grid-row-start: 2;
+ grid-row-end: 4;
+ position: relative;
+ }
+ }
+
+ &.eight {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(4, calc(95% / 4));
+ grid-gap: 0.67708vw;
+ place-content: space-around;
+
+ .main {
+ grid-column-start: 1;
+ grid-column-end: 4;
+ grid-row-start: 1;
+ grid-row-end: 4;
+ }
+ }
+}
diff --git a/src/main.js b/src/main.js
index 3fa5d22..8d3b1b6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,7 +13,9 @@ document.onkeydown = document.onkeyup = document.onkeypress = function (e) {
const app = createApp(App)
fetch("/api/config", {method: "GET"}).then(res => res.json()).then(res => {
+ console.log(res)
app.config.globalProperties.$gameName = res.data.gameName || "神临苍月";
app.config.globalProperties.$_CONFIG = res.data;
- app.use(router).mount('#app')
+ app.use(router)
+ app.mount('#app')
})
diff --git a/src/views/login.vue b/src/views/login.vue
index 59b871b..fa5148f 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -4,51 +4,49 @@ import {defineOptions} from "vue";
defineOptions({name: 'Login'});
const servers = ref([])
+const account = ref('')
+const password = ref('')
+
+function handleLogin() {
+
+}
+
+ 