From 271131a5e1c89fefa3fd1b3c7b88dedb421ea2a8 Mon Sep 17 00:00:00 2001 From: veypi Date: Mon, 2 Feb 2026 13:20:44 +0800 Subject: [PATCH] update ui --- TODO.md | 33 ++ agents.md | 2 +- ui/c/app/create.html | 258 ++++-------- ui/c/app/menu.html | 10 - ui/c/table.html | 173 ++++---- ui/env.js | 3 +- ui/ico.html | 97 ++--- ui/layout/app.html | 82 ++-- ui/layout/default.html | 79 ++-- ui/page/404.html | 248 +++--------- ui/page/app.html | 554 +++++++++----------------- ui/page/app/auth.html | 110 ++++-- ui/page/app/index.html | 103 +++-- ui/page/app/settings.html | 104 +++++ ui/page/app/user.html | 187 +++++---- ui/page/dsr1.html | 423 +++++++------------- ui/page/index.html | 92 ++++- ui/page/latest.html | 255 ++++++------ ui/page/login.html | 812 ++++++++++++++++---------------------- ui/page/profile.html | 364 ++++++----------- ui/page/settings.html | 261 +++++++++++- ui/page/stats.html | 645 +++++++----------------------- ui/page/test.html | 140 ++----- ui/root.html | 3 +- ui/token.js | 10 +- ui/vselect.html | 39 +- 26 files changed, 2159 insertions(+), 2928 deletions(-) create mode 100644 TODO.md delete mode 100644 ui/c/app/menu.html diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..0bf10ef --- /dev/null +++ b/TODO.md @@ -0,0 +1,33 @@ +# UI Refactoring TODO List +任务描述：阅读agents.md指令, 我重构了common.css，现在两个任务：一个是查阅vyes-ui的文档，尽量使用vyes-ui组件去重构界面，减少代码量； 一个是修改所有界面及组件的样式，使用全局变量，颜色可以直接使用也可以用color-mix去混色增加颜色层次感和丰富度。 将界面修改任务写到TODO.md里，更改完一个界面就标记这个页面完成 + +## Pages +- [x] /ui/page/index.html +- [x] /ui/page/login.html +- [x] /ui/page/profile.html +- [x] /ui/page/stats.html +- [x] /ui/page/app.html +- [x] /ui/page/settings.html +- [x] /ui/page/latest.html +- [x] /ui/page/dsr1.html +- [x] /ui/page/test.html +- [x] /ui/page/404.html + +## App Pages +- [x] /ui/page/app/index.html +- [x] /ui/page/app/auth.html +- [x] /ui/page/app/user.html +- [x] /ui/page/app/settings.html + +## Layouts +- [x] /ui/layout/default.html +- [x] /ui/layout/public.html +- [x] /ui/layout/app.html + +## Components +- [x] /ui/c/app/create.html +- [x] /ui/c/app/menu.html (Deleted) +- [x] /ui/c/table.html +- [x] /ui/vselect.html +- [x] /ui/ico.html +- [x] /ui/root.html diff --git a/agents.md b/agents.md index 4f6f794..72376e7 100644 --- a/agents.md +++ b/agents.md @@ -7,7 +7,7 @@ - 界面采用vyes.js 框架，该框架可以将一个html文件自动加载为一个组件 - 开始写界面前请阅读全局样式文件 /ui/assets/common.css 保证所有界面的样式一致 - 组件内部避免重复的样式定义 如body内无需重复定义字体 -- 本项目使用vyes-ui 组件库，该组件库可以通过 curl -sS http://localhost:4002/v/README.md 查看文档 其组件代码都已经映射到了/v/目录下 +- 本项目使用vyes-ui 组件库，该组件库可以通过 curl -sS http://localhost:4000/v/README.md 查看文档 其组件代码都已经映射到了/v/目录下 - 前端路由文件 /ui/routes.js 该文件定义了所有的路由规则 diff --git a/ui/c/app/create.html b/ui/c/app/create.html index 8f5187b..0b4aeef 100644 --- a/ui/c/app/create.html +++ b/ui/c/app/create.html @@ -1,198 +1,86 @@ - - - - 创建新应用 - - + + + + 创建新应用 - + -

创建新应用

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -

{{ errorMessage }}

-
-
+ + + + + + +
+ 提交 +
+ - - diff --git a/ui/c/app/menu.html b/ui/c/app/menu.html deleted file mode 100644 index cb354b9..0000000 --- a/ui/c/app/menu.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - diff --git a/ui/c/table.html b/ui/c/table.html index 04a2e94..c8f7b50 100644 --- a/ui/c/table.html +++ b/ui/c/table.html @@ -1,14 +1,18 @@ + + + + + @@ -95,9 +99,9 @@
{{key.label||key.name}}
-
+
+
{{ (key.field?key.field(row):row[key.name]) || ' '}} @@ -107,34 +111,31 @@
-
-
-
-
创建
-
高级检索
-
智能导入
-
-
+ +
+ +
+
-
-
-
-
+ + + +
-
+
{{listOpts.page}}
-
+
总计{{total}}条数据
-
-
+ +
@@ -143,10 +144,10 @@
-
智能识别
+ 智能识别
-
+ - - diff --git a/ui/env.js b/ui/env.js index c07c3de..2c38562 100644 --- a/ui/env.js +++ b/ui/env.js @@ -2,7 +2,6 @@ import routes from './routes.js' import token from './token.js' export default ($env) => { - token.setBaseUrl($env.root) token.wrapAxios($env.$axios) $env.$G.token = token let user = token.body() @@ -17,6 +16,7 @@ export default ($env) => { } if (token.isExpired()) { token.logout(to.fullPath) + return false } if (!token.check('app', '', 2)) { next('/') @@ -33,5 +33,6 @@ export default ($env) => { }); $env.$axios.get('/api/cfg').then(res => { $env.$G.cfg = res + console.log(res) }) } diff --git a/ui/ico.html b/ui/ico.html index 5c4712a..1dce40f 100644 --- a/ui/ico.html +++ b/ui/ico.html @@ -6,82 +6,63 @@ -
- 用户头像 - {{ $G.user.name }} - +
+ +
+ 用户头像 + {{ $G.user.name }} +
+
-
- + diff --git a/ui/layout/app.html b/ui/layout/app.html index d5daa2b..1c80342 100644 --- a/ui/layout/app.html +++ b/ui/layout/app.html @@ -9,22 +9,29 @@ flex-direction: column; height: 100vh; width: 100%; + background-color: var(--bg-color); + color: var(--text-color); } .header { user-select: none; height: 60px; - background: #409EFF; - color: white; + background: var(--color-primary); + color: var(--color-primary-text); display: flex; align-items: center; - padding: 0 20px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 0 var(--spacing-lg); + box-shadow: var(--shadow-sm); } .header-title { - font-size: 18px; - font-weight: bold; + font-size: var(--font-size-lg); + font-weight: var(--font-weight-bold); + } + + .header-title a { + color: inherit; + text-decoration: none; } .main-container { @@ -34,27 +41,8 @@ } .menu { - width: 200px; - border-right: 1px solid #ddd; - padding: 20px 0; - } - - .menu a { - padding: 10px 20px; - cursor: pointer; - transition: background 0.3s; - display: block; - color: inherit; - text-decoration: none; - } - - .menu a:hover { - background: #e0e0e0; - } - - - .menu a[active] { - background: #c3e1ff; + border-right: 1px solid var(--border-color); + background-color: var(--bg-color-secondary); } .content { @@ -62,17 +50,30 @@ overflow-y: auto; width: 100%; height: 100%; + padding: var(--spacing-md); } .footer { height: 40px; - background: #f5f5f5; - border-top: 1px solid #ddd; + background: var(--bg-color-secondary); + border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; - font-size: 12px; - color: #666; + font-size: var(--font-size-xs); + color: var(--text-color-secondary); + } + + .nav-link { + color: var(--color-primary-text); + text-decoration: none; + margin-left: var(--spacing-md); + font-size: var(--font-size-md); + opacity: 0.9; + transition: opacity var(--transition-base); + } + .nav-link:hover { + opacity: 1; } @@ -83,18 +84,13 @@
首页
- 应用权限管理 - -
- + 应用权限管理 +
- 应用简介 - 用户管理 - 权限管理 - 应用设置 + @@ -102,12 +98,18 @@
- Copyright © 2025 veypi. All Rights Reserved.. + Copyright © 2025 veypi. All Rights Reserved.
diff --git a/ui/page/404.html b/ui/page/404.html index aae1441..fca7828 100644 --- a/ui/page/404.html +++ b/ui/page/404.html @@ -1,237 +1,113 @@ - - 404 Galaxy Lost + + + + 404 - Galaxy Lost - -
-

404

-

Warp Drive Malfunction!

- - -
-
-
- - -
- -
+ +
+
+
+
+ +
+

404

+
Oops! You seem to be lost in space.
+ Go Home +
- - - - - + \ No newline at end of file diff --git a/ui/page/app.html b/ui/page/app.html index 68c2473..cb8761e 100644 --- a/ui/page/app.html +++ b/ui/page/app.html @@ -1,393 +1,191 @@ - - - - 应用 - - + + + + 应用列表 + + +
+

应用中心

+
+ +
+
- - -
-

权限应用管理

-
- - 🔍 -
-
- -
-
- - - - -
- + + {{ filter.label }} +
-
- -

加载中...

-
-
- 没有找到任何应用 -
-
-
-
- -
-
-

{{ app.name }}{{app.cid}}

- - {{ app.status }} - -
-
-
-

{{ app.des || '暂无描述信息' }}

-
- 类型: {{ app.typ || 'N/A' }} - 用户数量: {{ app.user_count }} -
-
-
-
- 打开应用 - - - -
+
+
+ icon +
+
{{ app.name }}
+ + {{ getStatusLabel(app.status) }} + +
+
+
+ {{ app.des || '暂无描述' }} +
+
+ 访问 + 管理 +
-
-
- + - diff --git a/ui/page/app/auth.html b/ui/page/app/auth.html index 3c11c90..5401ba7 100644 --- a/ui/page/app/auth.html +++ b/ui/page/app/auth.html @@ -3,68 +3,122 @@ 权限管理 + + + -
应用权限管理
-
资源表
+
+ 应用权限管理 +
+ +
资源管理
-
角色表
+ +
角色管理
- 权限表 + + 权限表 + 设为初始角色 + variant="warning"> + 设为初始角色 + + + 初始角色 + +
-
{{selected_role.name}}角色权限表
- +
+ {{selected_role.name}} 权限配置 +
+
+ +
+
+ 关闭 +
- + \ No newline at end of file diff --git a/ui/page/app/index.html b/ui/page/app/index.html index 50739f4..dbe98d8 100644 --- a/ui/page/app/index.html +++ b/ui/page/app/index.html @@ -4,25 +4,29 @@ + 项目主页 @@ -222,11 +249,11 @@
创建于
- +
{{formatDate(app.created_at) || 'N/A'}}
最后更新
- +
{{formatDate(app.updated_at) || 'N/A'}}
@@ -249,12 +276,7 @@ init_role: null, init_url: '' } - id = $router.params.id - if (!id) { - $router.push('/app') - return - } - + // 格式化日期函数 formatDate = (isoString) => { if (!isoString) return null; @@ -273,6 +295,15 @@ // 同步应用数据 sync = () => { + // 从路由参数获取ID，或者使用默认值/模拟值 + const id = $router.params.id || $G.app?.id + + if (!id) { + // 如果没有ID，可能是直接访问，展示示例数据或跳转 + // $router.push('/app') + return + } + $axios.get(`/api/app/${id}`) .then((data) => { Object.assign(app, data) @@ -280,11 +311,13 @@ }) .catch((e) => { console.log(e) - $router.push('/app') + // 错误处理，保留在当前页或跳转 + // $router.push('/app') }) } + + // 页面加载时执行 sync() - - + \ No newline at end of file diff --git a/ui/page/app/settings.html b/ui/page/app/settings.html index e69de29..26d963c 100644 --- a/ui/page/app/settings.html +++ b/ui/page/app/settings.html @@ -0,0 +1,104 @@ + + + + + + + 应用设置 + + + +
+
+ 基本设置 +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ 保存更改 +
+
+ + + + \ No newline at end of file diff --git a/ui/page/app/user.html b/ui/page/app/user.html index 50827dd..bebbdad 100644 --- a/ui/page/app/user.html +++ b/ui/page/app/user.html @@ -1,100 +1,137 @@ - - 用户管理 + 用户管理 + + + + background-color: var(--bg-color); + box-shadow: var(--shadow-lg); + padding: var(--spacing-xl); + border-radius: var(--radius-lg); + border: 1px solid var(--border-color); + color: var(--text-color); + display: flex; + flex-direction: column; +} +.dialog-title { + font-size: 1.5rem; + margin-bottom: var(--spacing-lg); + font-weight: 600; + flex-shrink: 0; +} + +/* Responsive dialog */ +@media (max-width: 768px) { + .dialog { + width: 90vw; + height: 80vh; + } +} + -
应用用户管理
- - 权限表 - - -
-
{{selected.username}} 角色表
- +
+ 应用用户管理
- + + + 权限表 + + + + +
+
+ {{selected.username}} 角色分配 +
+
+ + +
+
+ 关闭 +
+
+ - - + \ No newline at end of file diff --git a/ui/page/dsr1.html b/ui/page/dsr1.html index 7093703..f569610 100644 --- a/ui/page/dsr1.html +++ b/ui/page/dsr1.html @@ -1,304 +1,169 @@ - - - - VyesJS - 现代Web组件框架 - + + + + VyesJS - 现代Web组件框架 + - - - - - - -
- -
-
-

- 下一代Web组件框架 -

-

- 用熟悉的HTML语法，构建现代Web应用 -

-
- +
-
-
- - -
-
-
-
{{ feature.emoji }}
-

{{ feature.title }}

-

{{ feature.desc }}

-
-
-
- - -
-
-
- 

-            {{codeExample}}
-
-
-
-

简洁直观的语法

-

使用您熟悉的HTML语法，通过少量增强指令实现现代Web应用开发

-
-
- $ npm install vyesjs -
+ + +
+
+

+ 下一代Web组件框架 +

+

+ 用熟悉的HTML语法，构建现代Web应用。无需构建工具，开箱即用。 +

+
+ + +
-
-
-
- - -
-
-

实时体验

-
- -
实时预览：{{ demoText }}
-
-
-
+ - - - - - + \ No newline at end of file diff --git a/ui/page/index.html b/ui/page/index.html index 5ac2f5b..ae6bd40 100644 --- a/ui/page/index.html +++ b/ui/page/index.html @@ -1,9 +1,95 @@ - + + + OneAuth + + + + + - hello +

OneAuth

+

Secure, Simple, Scalable Authentication Service for your applications.

+ +
+
+
+
Secure
+
+
+
+
Fast
+
+
+
+
Developer Friendly
+
+
+ + Get Started - + + + \ No newline at end of file diff --git a/ui/page/latest.html b/ui/page/latest.html index 8b7241b..b065f0f 100644 --- a/ui/page/latest.html +++ b/ui/page/latest.html @@ -1,158 +1,133 @@ - + + Vyes.js - 现代前端框架 - - - +} +.fade-in { + animation: fadeIn 1s ease-out; +} + +
-

Vyes.js

-

现代化、轻量级的前端框架

+

Vyes.js

+

现代化、轻量级的前端框架

+ 立即开始
-
- -
-

为什么选择 Vyes.js？

-
-

简单易用

-

遵循 HTML5 规范，快速上手，轻松构建复杂的前端应用。

-
-
-

响应式数据

-

自动追踪数据变化，实时更新视图，无需手动操作 DOM。

-
-
-

组件化开发

-

支持组件复用和插槽机制，提升开发效率。

-
+
+

{{ feature.title }}

+

{{ feature.desc }}

+
-
- - -
-

快速开始

- 
-<!doctype html>
-<html>
-  <head></head>
-  <style></style>
-  <body>
-    <div>{{ message }}</div>
-    <button @click="changeMessage">点击我</button>
-  </body>
-  <script setup>
-    message = "Hello, Vyes.js!";
-    changeMessage = () => {
-      message = "你点击了按钮！";
-    };
-  </script>
-</html>
-
- 了解更多 -
-
-

© 2023 Vyes.js. All rights reserved.

+

© 2024 Vyes.js Team. All rights reserved.

- - - + + + \ No newline at end of file diff --git a/ui/page/login.html b/ui/page/login.html index 3a1b1c5..4d9845b 100644 --- a/ui/page/login.html +++ b/ui/page/login.html @@ -4,203 +4,238 @@ + 登录与注册 -
-
+ +
+
+
+