feat: 完成查看色谱柱的功能

.gitignore

@@ -0,0 +1,18 @@
+# node_modules
+/server/node_modules
+/webui/node_modules
+
+# Editor configuration
+/webui/.vscode/*
+/server/.vscode/*
+/.vscode/*
+
+# HTTP client files
+/http
+*.http
+
+# Environment file
+.env
+
+# Vite build output
+/webui/dist

server/example.env

@@ -0,0 +1,19 @@
+# 将文件更名为 .env 即可
+
+
+# 程序运行的端口号
+PORT=3000
+
+# MongoDB 数据库连接字符串
+MONGODB_URI=mongodb://localhost:27017/qctool_plus
+
+# 用于加密数据的秘钥
+SECRET_KEY=YOUR_SECRET_KEY
+
+# Web 管理界面的用户名和密码
+WEB_ADMIN_USERNAME=admin
+WEB_ADMIN_PASSWORD=admin
+
+# NODE 运行环境(production生产/development开发)
+NODE_ENV=production
+# NODE_ENV=development

server/package.json

@@ -11,6 +11,14 @@
   "type": "module",
   "main": "index.js",
   "scripts": {
-    "test": "nodemon ./src/index.js"
+    "dev": "nodemon ./src/index.js"
+  },
+  "dependencies": {
+    "bcrypt": "^6.0.0",
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.1",
+    "express": "^5.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "mongoose": "^8.17.0"
   }
 }

server/src/column.js

@@ -0,0 +1,81 @@
+import mongoose from "mongoose"
+import express from 'express'
+import { Laboratory } from "./laboratory.js"
+
+const Column = mongoose.model('Column', new mongoose.Schema({
+    num: { type: Number },              // 色谱柱编号   235
+    type: { type: String },             // 色谱柱类型   LC 或 GC
+    name: { type: String },             // 色谱柱全名   LC235
+    model: { type: String },            // 色谱柱型号   Zorbax Eclipse Plus C18
+    madeby: { type: String },           // 生产厂家     Agilent
+    length: { type: String },           // 色谱柱长度   250mm
+    innerDiameter: { type: String },    // 色谱柱内径   4.6mm
+    particleSize: { type: String },     // 色谱柱粒径   5um
+    reverse: { type: Boolean },         // 是否反接色谱柱
+
+    status: { type: mongoose.SchemaTypes.ObjectId, ref: 'ColumnStatus' }, // 色谱柱状态
+    laboratory: { type: mongoose.SchemaTypes.ObjectId, ref: 'Laboratory' },      // 所属实验室
+    group: { type: mongoose.SchemaTypes.ObjectId, ref: 'Group' }, // 所属分组
+    borrow: { type: mongoose.SchemaTypes.ObjectId, ref: 'ColumnBorrowRecord' }, // 色谱柱借用记录
+
+    description: { type: String }, // 备注
+}))
+
+const ColumnStatus = mongoose.model('ColumnStatus', new mongoose.Schema({
+    name: { type: String },  // 色谱柱全名   LC235 或 GC065
+    // 色谱柱状态   purchased、activated、inuse、effpoor、discarded
+    status: { type: String },
+    // 状态描述   新购入、已活化（老化）、使用中、柱效差、已报废
+    description: { type: String },
+    // 最后状态日期   2025.07.30
+    date: { type: String },
+    purchased_date: { type: String },   // 新购入日期
+    activated_date: { type: String },   // 已活化（老化）日期
+    inuse_date: { type: String },       // 开始使用日期
+    effpoor_date: { type: String },     // 柱效变差日期
+    discarded_date: { type: String },   // 报废日期
+}))
+
+const router = express.Router()
+
+// 获取所有色谱柱
+// TODO maybe need paging
+router.get('/', async (req, res) => {
+    const columns = await Column.find().populate(['status', 'laboratory', 'borrow', 'group'])
+    res.json(columns)
+})
+
+// 新增色谱柱
+router.post('/', async (req, res) => {
+    const data = req.body
+    const date = formatDate(new Date())
+    // 创建色谱柱状态
+    data.status = await ColumnStatus.create({
+        name: req.body.name,
+        status: 'purchased',
+        description: '新购入',
+        date: date,
+        purchased_date: date
+    })
+    // 确定色谱柱所属实验室
+    data.laboratory = await Laboratory.findOne({ name: data.laboratory.name })
+        || await Laboratory.findOne({ name: '未知' })
+    const column = await Column.create(data)
+    res.json(column)
+})
+
+// TODO CRUD
+
+/**
+ * 格式化日期
+ * @param {Date} date 日期对象
+ * @returns 格式化后的日期字符串，比如'2025.03.09'
+ */
+function formatDate(date) {
+    const year = date.getFullYear()
+    const month = date.getMonth() < 9 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
+    const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
+    return `${year}.${month}.${day}`
+}
+
+export { router as columnRouter, Column, ColumnStatus }

server/src/column_borrow_record.js

@@ -0,0 +1,25 @@
+import mongoose from "mongoose"
+import express from 'express'
+
+const ColumnBorrowRecord = mongoose.model('ColumnBorrowRecord', new mongoose.Schema({
+    name: { type: String},              // 色谱柱编号
+    borrower: { type: mongoose.SchemaTypes.ObjectId, ref: 'User' },         // 借用人
+    borrowTo: { type: mongoose.SchemaTypes.ObjectId, ref: 'Laboratory' }, // 借用到实验室
+    borrowDate: { type: String },       // 借用日期   2025.07.30
+
+    returnStatus: { type: Boolean, },   // 是否已归还
+    returner: { type: mongoose.SchemaTypes.ObjectId, ref: 'User' },         // 归还人
+    returnDate: { type: String },       // 归还日期   2025.08.30
+    description: { type: String },      // 备注
+}))
+
+
+const router = express.Router()
+
+// TODO CURD
+router.get('/:columnName', async (req, res) => {
+    const record = await ColumnBorrowRecord.find({ name: req.params.columnName }).populate(['User', 'Laboratory'])
+    res.json(record)
+})
+
+export { router as columnBorrowRecordRouter, ColumnBorrowRecord }

server/src/group.js

@@ -0,0 +1,45 @@
+import mongoose from "mongoose"
+import express from 'express'
+
+const Group = mongoose.model('Group', new mongoose.Schema({
+    name: { type: String },             // 分组名称
+    description: { type: String },      // 分组描述
+    laboratory: { type: mongoose.SchemaTypes.ObjectId, ref: 'Laboratory' }, // 所属实验室
+}))
+
+const router = express.Router()
+
+// 获取所有分组
+router.get('/', async (req, res) => {
+    const groups = await Group.find().populate('Laboratory')
+    res.json(groups)
+})
+
+// 获取指定分组
+router.get('/:id', async (req, res) => {
+    const group = await Group.findById(req.params.id).populate('Laboratory')
+    if (!group) {
+        return res.status(404).json({ message: `Can not found the group ${req.params.id}` })
+    }
+    res.json(group)
+})
+
+// 创建分组
+router.post('/', async (req, res) => {
+    const group = await Group.create(req.body)
+    res.json(group)
+})
+
+// 更新分组
+router.patch('/:id', async (req, res) => {
+    const group = await Group.findByIdAndUpdate(req.params.id, req.body, { new: true })
+    res.json(group)
+})
+
+// 删除分组
+router.delete('/:id', async (req, res) => {
+    const group = await Group.findByIdAndDelete(req.params.id)
+    res.json(group)
+})
+
+export { router as groupRouter, Group }

server/src/index.js

@@ -0,0 +1,45 @@
+import express from 'express'
+import mongoose from 'mongoose'
+import cors from 'cors'
+import dotenv from "dotenv"
+dotenv.config({ path: '.env', quiet: true })
+
+// import routers
+import { uacRouter } from './uac.js'
+import { columnRouter } from './column.js'
+import { columnBorrowRecordRouter } from './column_borrow_record.js'
+import { laboratoryRouter } from './laboratory.js'
+import { groupRouter } from './group.js'
+
+const log = (...args) => {
+    console.log(`[${new Date().toISOString()}] Main`, ...args)
+}
+
+mongoose.connect(process.env.MONGODB_URI).then(() => {
+    log('连接 MongoDB 数据库成功')
+}).catch(err => {
+    log('连接 MongoDB 数据库失败', err)
+})
+
+const app = express()
+app.use(cors())
+app.use(express.json())
+app.use(express.urlencoded({ extended: true }))
+
+app.use('/api/uac', uacRouter)
+app.use('/api/columns', columnRouter)
+app.use('/api/column_borrow_records', columnBorrowRecordRouter)
+app.use('/api/laboratories', laboratoryRouter)
+app.use('/api/groups', groupRouter)
+
+uacRouter.initialize()
+laboratoryRouter.initialize()
+
+app.get('/', async (req, res) => {
+    res.send('success')
+})
+
+const port = process.env.PORT || 3000
+app.listen(port, () => {
+    log('系统已启动, 服务地址', `http://localhost:${port}`)
+})

server/src/laboratory.js

@@ -0,0 +1,56 @@
+import mongoose from "mongoose"
+import express from 'express'
+
+const Laboratory = mongoose.model('Laboratory', new mongoose.Schema({
+    name: { type: String },             // 实验室名称
+    description: { type: String },      // 实验室描述
+}))
+
+async function initialize() {
+    await Laboratory.insertMany([
+        { name: "一楼", description: "质量部一楼东面" },
+        { name: "三楼", description: "质量部一楼东面液相室二" },
+        { name: "七楼", description: "宿舍北七楼" },
+        { name: "研发分析", description: "质量部三楼西面" },
+        { name: "API 实验室", description: "质量部三四楼东面" },
+        { name: "未知", description: "未知" },
+    ])
+}
+
+const router = express.Router()
+router.initialize = initialize
+
+// 获取所有的实验室
+router.get('/', async (req, res) => {
+    const lab = await Laboratory.find()
+    res.json(lab)
+})
+
+// 获取指定实验室
+router.get('/:id', async (req, res) => {
+    const lab = await Laboratory.findById(req.params.id)
+    if (!lab) {
+        return res.status(404).json({ message: `Can not found the laboratory ${req.params.id}` })
+    }
+    res.json(lab)
+})
+
+// 创建实验室
+router.post('/', async (req, res) => {
+    const lab = await Laboratory.create(req.body)
+    res.json(lab)
+})
+
+// 更新实验室
+router.patch('/:id', async (req, res) => {
+    const lab = await Laboratory.findByIdAndUpdate(req.params.id, req.body, { new: true })
+    res.json(lab)
+})
+
+// 删除实验室
+router.delete('/:id', async (req, res) => {
+    const lab = await Laboratory.findByIdAndDelete(req.params.id)
+    res.json(lab)
+})
+
+export { router as laboratoryRouter, Laboratory }

server/src/uac.js

@@ -0,0 +1,279 @@
+import mongoose from "mongoose"
+import express from "express"
+import bcrypt from "bcrypt"
+import jwt from "jsonwebtoken"
+
+const log = (...args) => {
+    console.log(`[${new Date().toISOString()}] UAC`, ...args)
+}
+
+// 权限模型
+const Permission = mongoose.model('Permission', new mongoose.Schema({
+    name: { type: String, required: true, unique: true },       // 权限名称
+    description: { type: String }                               // 权限描述
+}))
+
+// 角色模型
+const Role = mongoose.model('Role', new mongoose.Schema({
+    name: { type: String, required: true, unique: true },       // 角色
+    permissions: [{ type: mongoose.SchemaTypes.ObjectId, ref: 'Permission' }], // 角色权限
+    description: { type: String }                               // 角色描述
+}))
+
+// 用户模型
+const User = mongoose.model('User', new mongoose.Schema({
+    username: { type: String, required: true, unique: true },   // 用户名（用于登录）
+    truename: { type: String },                                 // 用户名（用于显示）
+    password: {
+        type: String,
+        required: true,
+        set(val) {
+            return bcrypt.hashSync(val, 10)
+        }
+    },                                                          // 密码（加密存储）
+    role: [{ type: mongoose.SchemaTypes.ObjectId, ref: 'Role' }], // 角色
+}))
+
+// 初始化模型数据库
+async function initialize() {
+    log('初始化权限模型...')
+    await Permission.deleteMany({})
+    await Permission.insertMany([
+        // 用户相关权限
+        { name: 'access_user_get', description: '查看用户信息' },
+        { name: 'access_user_post', description: '新增用户信息' },
+        { name: 'access_user_patch', description: '修改用户信息' },
+        { name: 'access_user_delete', description: '删除用户信息' },
+        // 角色相关权限
+        { name: 'access_role_get', description: '查看角色信息' },
+        { name: 'access_role_post', description: '新增角色信息' },
+        { name: 'access_role_patch', description: '修改角色信息' },
+        { name: 'access_role_delete', description: '删除角色信息' },
+        // 色谱柱相关权限
+        { name: 'access_columns_get', description: '查看色谱柱信息' },
+        { name: 'access_columns_post', description: '新增色谱柱信息' },
+        { name: 'access_columns_patch', description: '修改色谱柱信息' },
+        { name: 'access_columns_delete', description: '删除色谱柱信息' },
+    ])
+    log('初始化角色模型...')
+    await Role.deleteMany({})
+    const p = await Permission.find({})
+    await Role.insertMany([
+        { name: 'admin', description: '系统管理员', permissions: p },
+    ])
+    // 创建一个默认的管理员用户, 并为其分配系统管理员权限
+    log('创建系统管理员账户...')
+    let username = process.env.WEB_ADMIN_USERNAME || 'admin'
+    let password = process.env.WEB_ADMIN_PASSWORD || 'admin'
+    await User.deleteOne({ username})
+    const admin = await User.create({
+        username, password,
+        truename: '系统管理员',
+        role: [await Role.findOne({ name: 'admin' })]
+    })
+
+    log(`初始化完成，系统管理员账号：${username}，密码：${password}`)
+    if (process.env.NODE_ENV !== 'production') {
+        log(`请在生产环境中修改管理员账号和密码，以确保系统安全。`)
+    }
+}
+
+const router = express.Router()
+router.initialize = initialize
+
+/**
+ * 使用 jwt 验证用户是否登录
+ * @param {*} req request 请求
+ * @param {*} res response 响应
+ * @param {*} next 下一个中间件
+ * @returns 
+ */
+function auth(req, res, next) {
+    const authorization = req.headers['authorization']
+
+    if (!authorization) {
+        return res.status(401).json({ error: 'unauth, please login' })
+    }
+    const token = authorization.split(' ')[1] // Bearer <token>
+
+    if (!token) {
+        return res.status(401).json({ error: 'unauth, please login' })
+    }
+
+    jwt.verify(token, 'your_jwt_secret', (err, decoded) => {
+        if (err) {
+            return res.status(403).json({ error: 'invalid or expired token, please login again' })
+        }
+        req.userId = decoded.userId
+        next()
+    })
+}
+
+function access(req, res, next) {
+    const userId = req.userId
+    User.findById(userId).populate({
+        path: "role",
+        populate: { path: "permissions" }
+    }).then(user => {
+        if (!user) {
+            return res.status(403).json({ error: 'user not found' })
+        }
+
+        // 该用户拥有的权限
+        const permissions = []
+        user.role.forEach((role) => {
+            role.permissions.map(p => permissions.push(p.name))
+        })
+
+        const requestRouter = req.route.path.split('/')[1]
+        const requestMethod = req.method.toLowerCase()
+        const require = `access_${requestRouter}_${requestMethod}`
+
+        if (permissions.includes(require)) {
+            next()
+        } else {
+            return res.status(403).json({
+                error: 'permission denied',
+                require,
+                userHas: permissions
+            })
+        }
+    }
+    )
+}
+
+// 获取用户列表
+router.get('/user', auth, access, async (req, res) => {
+    log('GET /user 获取用户列表')
+    const users = await User.find({}, { password: 0 }).populate({
+        path: 'role',
+        populate: { path: 'permissions' }
+    })
+    res.json(users)
+})
+
+// 创建用户
+router.post('/user', auth, access, async (req, res) => {
+    log('POST /user 创建用户')
+    let data = req.body
+    console.log(data.role)
+    try {
+        data.role = await Role.find({ name: { $in: data.role } })
+        const user = await User.create(data)
+        res.status(201).json(user)
+    } catch (err) {
+        res.status(500).json({ error: '创建用户失败', details: err.message })
+    }
+})
+
+// 更新用户信息
+router.patch('/user/:id', auth, access, async (req, res) => {
+    log(`PATCH /user/${req.params.id} 更新用户信息`)
+    const userId = req.params.id
+    const data = req.body
+    try {
+        data.role = await Role.find({ name: { $in: data.role } })
+        const user = await User.findByIdAndUpdate(userId, data, { new: true }).populate('role')
+        if (!user) {
+            return res.status(404).json({ error: '用户未找到' })
+        }
+        res.json(user)
+    } catch (err) {
+        res.status(500).json({ error: '更新用户失败', details: err.message })
+    }
+})
+
+// 删除用户
+router.delete('/user/:id', auth, access, async (req, res) => {
+    log(`DELETE /user/${req.params.id} 删除用户`)
+    const userId = req.params.id
+    try {
+        const user = await User.findByIdAndDelete(userId)
+        if (!user) {
+            return res.status(404).json({ error: '用户未找到' })
+        }
+        res.json({ message: '用户已删除', user })
+    } catch (err) {
+        res.status(500).json({ error: '删除用户失败', details: err.message })
+    }
+})
+
+// 获取角色列表
+router.get('/role', auth, access, async (req, res) => {
+    log('GET /role 获取角色列表')
+    const roles = await Role.find({}).populate('permissions')
+    res.json(roles)
+})
+
+// 创建角色
+router.post('/role', auth, access, async (req, res) => {
+    log('POST /role 创建角色')
+    const data = req.body
+    try {
+        data.permissions = await Permission.find({ name: { $in: data.permissions } })
+        const role = await Role.create(data)
+        res.status(201).json(role)
+    } catch (err) {
+        res.status(500).json({ error: '创建角色失败', details: err.message })
+    }
+})
+
+// 删除角色
+router.delete('/role/:id', auth, access, async (req, res) => {
+    log(`DELETE /role/${req.params.id} 删除角色`)
+    const roleId = req.params.id
+    try {
+        const role = await Role.findByIdAndDelete(roleId)
+        if (!role) {
+            return res.status(404).json({ error: '角色未找到' })
+        }
+        res.json({ message: '角色已删除', role })
+    } catch (err) {
+        res.status(500).json({ error: '删除角色失败', details: err.message })
+    }
+})
+
+// 更新角色信息
+router.patch('/role/:id', auth, access, async (req, res) => {
+    log(`PATCH /role/${req.params.id} 更新角色信息`)
+    const roleId = req.params.id
+    const data = req.body
+    try {
+        data.permissions = await Permission.find({ name: { $in: data.permissions } })
+        const role = await Role.findByIdAndUpdate(roleId, data, { new: true })
+        if (!role) {
+            return res.status(404).json({ error: '角色未找到' })
+        }
+        res.json(role.populate('permissions'))
+    } catch (err) {
+        res.status(500).json({ error: '更新角色失败', details: err.message })
+    }
+})
+
+// 用户登录
+router.post('/sign', async (req, res) => {
+    const { username, password } = req.body
+    log('POST /sign 用户登录 ', username)
+    if (!username || !password) {
+        return res.status(400).json({ error: '用户名和密码不能为空' })
+    }
+    try {
+        // 查询用户
+        const user = await User.findOne({ username })
+        if (!user) {
+            return res.status(401).json({ error: '用户名或密码错误' })
+        }
+        // 验证密码
+        const isMatch = bcrypt.compareSync(password, user.password)
+        if (!isMatch) {
+            return res.status(401).json({ error: '用户名或密码错误' })
+        }
+
+        const token = jwt.sign({ userId: user._id }, 'your_jwt_secret', { expiresIn: '30d' })
+        res.json({ token })
+    } catch (err) {
+        return res.status(500).json({ error: '查询用户失败', details: err.message })
+    }
+})
+
+export { router as uacRouter, User, Role, Permission, auth, access }

webui/.gitignore

@@ -1,30 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-*.tsbuildinfo

webui/index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>qctool plus</title>
   </head>
-  <body>
+  <body ontouchstart="">
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>

webui/package-lock.json

@@ -8,6 +8,8 @@
       "name": "webui",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.11.0",
+        "vant": "^4.9.21",
         "vue": "^3.5.18"
       },
       "devDependencies": {
@@ -1289,6 +1291,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==",
+      "license": "MIT"
+    },
+    "node_modules/@vant/use": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.6.0.tgz",
+      "integrity": "sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -1532,6 +1549,23 @@
         "node": ">=14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/birpc": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
@@ -1591,6 +1625,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001731",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001731.tgz",
@@ -1612,6 +1659,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1717,6 +1776,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.192",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.192.tgz",
@@ -1746,6 +1828,51 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.8",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz",
@@ -1862,6 +1989,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1877,6 +2040,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -1887,6 +2059,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
@@ -1904,6 +2113,57 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -2090,6 +2350,36 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
@@ -2295,6 +2585,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -2549,6 +2845,20 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/vant": {
+      "version": "4.9.21",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-4.9.21.tgz",
+      "integrity": "sha512-hXUoZMrLLjykimFRLDlGNd+K2iYSRh9YwLMKnsVdVZ+9inUKxpqnjhOqlZwocbnYkvJlS+febf9u9aJpDol4Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.6.0",
+        "@vue/shared": "^3.5.17"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.6.tgz",

webui/package.json

@@ -7,11 +7,13 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.11.0",
+    "vant": "^4.9.21",
     "vue": "^3.5.18"
   },
   "devDependencies": {

webui/src/App.vue

@@ -1,47 +1,86 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import ColumnItem from './components/ColumnItem.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import axios from 'axios'
+import { reactive, ref } from 'vue'
+import { showDialog } from 'vant'
+const data = reactive([])
+const filtered = reactive([])
+const search = ref('')
+const active = ref(0)
+
+axios({
+  method: 'get',
+  url: `http://${location.hostname}:3000/api/columns`
+}).then(res => {
+  data.value = res.data
+  data.value.forEach(item => { item.size = size(item) })
+  onSearch()
+}).catch(err => {
+  showDialog({
+    title: '获取数据失败',
+    message: err.message,
+    confirmButtonText: '确定',
+  })
+})
+
+function onSearch() {
+  if (search.value.trim() === '') {
+    filtered.value = data.value
+    return
+  }
+  filtered.value = data.value.filter(item => {
+    return item.model.includes(search.value)
+      || item.name.includes(search.value)
+      || item.size.includes(search.value)
+  })
+  if (filtered.value.length === 0) {
+    showDialog({
+      title: '提示',
+      message: '没有找到相关数据',
+      confirmButtonText: '确定',
+    })
+  }
+}
+
+
+/**
+ * 解析色谱柱对象,返回 "柱长 * 内径 * 粒径" 字符串
+ * @param item 色谱柱对象
+ */
+function size(item) {
+  let size = []
+  if (item.length != null && item.length !== '') {
+    size.push(item.length)
+  }
+  if (item.innerDiameter != null && item.innerDiameter !== '') {
+    size.push(item.innerDiameter)
+  }
+  if (item.particleSize != null && item.particleSize !== '') {
+    size.push(item.particleSize)
+  }
+  return size.join(' * ')
+}
+
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
   <main>
-    <TheWelcome />
+    <van-sticky>
+      <van-search v-model="search" placeholder="请输入搜索内容" @search="onSearch" />
+    </van-sticky>
+    <ColumnItem :data="filtered.value" />
+    <van-back-top class="backtop" right="5vw" bottom="15vh">返回顶部</van-back-top>
+    <van-tabbar v-model="active" active-color="primary">
+      <van-tabbar-item icon="records-o">色谱柱</van-tabbar-item>
+      <!-- <van-tabbar-item icon="wap-home-o">用户</van-tabbar-item> -->
+    </van-tabbar>
   </main>
 </template>
 
-<style scoped>
+<style>
-header {
+.backtop {
-  line-height: 1.5;
+  width: 80px;
-}
+  font-size: 14px;
-
+  text-align: center;
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
 }
 </style>

webui/src/assets/base.css

@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

webui/src/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

webui/src/assets/main.css

@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

webui/src/components/ColumnDetail.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+    columnId: {
+        type: String
+    },
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+
+</script>
+
+<template>
+    <van-popup v-model:show="show" position="bottom" :style="{ height: '50%'}">
+        columnId: {{ columnId }}
+    </van-popup>
+</template>

webui/src/components/ColumnItem.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { ref, reactive, toRaw, computed } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [{ model: 'NoData', name: '', size: '' }]
+  }
+})
+
+const showDetail = ref(false) // 是否显示色谱柱详情
+const editReceiveDate = ref(false) // 是否编辑接收日期
+const editEnableDate = ref(false) // 是否编辑启用日期
+const columnId = ref('')      // 当前选中的色谱柱编号
+let columnData = reactive({}) // 当前选中的色谱柱数据
+const editMode = ref(false)   // 是否编辑模式
+
+
+let currentReceiveDate = ref([]) // 当前接收日期
+let currentEnableDate = ref([]) // 当前启用日期
+const currentColumnLength = ref(0) // 当前色谱柱长度
+const currentColumnInnerDiameter = ref(0) // 当前色谱柱内径
+const currentColumnParticleSize = ref(0) // 当前色谱柱粒径
+
+function showSelectedColumn(index) {
+  columnData = props.data.find(item => item.name === index)
+  columnData.reverse = columnData.reverse ? '是' : '否'
+  currentReceiveDate.value = columnData.接收日期.split('.')
+  currentEnableDate.value = columnData.启用日期.split('.')
+  currentColumnLength.value = unSize(columnData.length || '')
+  currentColumnInnerDiameter.value = unSize(columnData.innerDiameter || '')
+  currentColumnParticleSize.value = unSize(columnData.particleSize || '')
+  showDetail.value = true
+  columnId.value = index
+  console.log('showing', toRaw(columnData))
+}
+
+function unSize(size) {
+  return size.replace(/um|mm|cm|m/g, '').trim()
+}
+
+function submit() {
+  columnData.length = currentColumnLength.value + 'mm'
+  columnData.innerDiameter = currentColumnInnerDiameter.value + 'mm'
+  columnData.particleSize = currentColumnParticleSize.value + 'um'
+  columnData.接收日期 = currentReceiveDate.value.join('.')
+  columnData.启用日期 = currentEnableDate.value.join('.')
+  columnData.reverse = columnData.reverse === '是'
+
+  console.log('提交数据', toRaw(columnData))
+}
+
+</script>
+
+<template>
+  <van-list>
+    <van-cell v-for="item in data" :title="item.model" :label="item.size" @click="showSelectedColumn(item.name)">
+      <template #title>
+        <van-tag plain type="primary">{{ item.name }}</van-tag>
+        <span style="margin-left: 10px;">{{ item.model }}</span>
+      </template>
+    </van-cell>
+  </van-list>
+
+  <van-popup v-model:show="showDetail" position="bottom" :style="{ height: editMode ? '75%' : '60%' }"
+    @close="editMode = false">
+    <van-nav-bar title="色谱柱详情" left-text="" @click-left="editMode = !editMode" right-text="返回"
+      @click-right="showDetail = false" />
+    <van-notice-bar v-if="editMode" text="您正在编辑模式，请小心操作！"></van-notice-bar>
+    <van-form :readonly="!editMode" :style="{ width: '100%' }">
+      <van-cell-group>
+        <van-field v-model="columnData.name" label="编号" readonly />
+        <van-field v-model="columnData.model" label="型号" />
+        <van-field v-if="!editMode" v-model="columnData.size" label="规格" />
+
+        <van-field v-if="editMode" v-model="currentColumnLength" label="柱长(mm)" :readonly="!editMode" />
+        <van-field v-if="editMode" v-model="currentColumnInnerDiameter" label="内径(mm)" :readonly="!editMode" />
+        <van-field v-if="editMode" v-model="currentColumnParticleSize" label="粒径(um)" :readonly="!editMode" />
+
+        <van-field v-model="columnData.接收日期" label="接收日期" readonly :is-link="editMode"
+          @click="editReceiveDate = editMode" />
+        <van-popup v-model:show="editReceiveDate" position="bottom" close-on-popstate>
+          <van-date-picker v-model="currentReceiveDate" :min-date="new Date(2000, 0, 1)" :max-date="new Date()"
+            @confirm="editReceiveDate = false" @cancel="editReceiveDate = false" />
+        </van-popup>
+        <!-- columnData.接收日期 = currentReceiveDate.join('.');  -->
+        <van-field v-model="columnData.启用日期" label="启用日期" readonly :is-link="editMode"
+          @click="editEnableDate = editMode" />
+        <van-popup v-model:show="editEnableDate" position="bottom" close-on-popstate>
+          <van-date-picker v-model="currentEnableDate" :min-date="new Date(2000, 0, 1)" :max-date="new Date()"
+            @confirm="editEnableDate = false" @cancel="editEnableDate = false" />
+        </van-popup>
+        <!-- columnData.启用日期 = currentEnableDate.join('.');  -->
+        <van-field v-model="columnData.启用人" label="启用人" />
+        <van-field v-model="columnData.使用组" label="使用组" />
+
+        <!-- <van-field v-model="columnData.reverse" label="反接" /> -->
+        <van-field v-model="columnData.反接" label="反接">
+          <template #input>
+            <van-radio-group v-model="columnData.reverse" :direction="'horizontal'" :disabled="!editMode">
+              <van-radio name="是">是</van-radio>
+              <van-radio name="否">否</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+        <van-field v-model="columnData.状态" label="状态" />
+        <van-field v-model="columnData.description" label="备注" />
+      </van-cell-group>
+      <div style="margin: 16px;" v-if="editMode">
+        <van-button block type="primary" @click="submit()"> 保存 </van-button>
+      </div>
+    </van-form>
+  </van-popup>
+
+</template>
+
+<style scoped></style>

webui/src/components/HelloWorld.vue

@@ -1,44 +0,0 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true,
-  },
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

webui/src/components/TheWelcome.vue

@@ -1,94 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-
-const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
-    +
-    <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
-    and
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
-    /
-    <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
-
-    <br />
-
-    More instructions are available in
-    <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
-    >.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
-    (our official Discord server), or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also follow the official
-    <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
-    Bluesky account or the
-    <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    X account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>

webui/src/components/WelcomeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

webui/src/components/icons/IconCommunity.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>

webui/src/components/icons/IconDocumentation.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>

webui/src/components/icons/IconEcosystem.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>

webui/src/components/icons/IconSupport.vue

@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>

webui/src/components/icons/IconTooling.vue

@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>

webui/src/main.js

@@ -1,6 +1,8 @@
-import './assets/main.css'
+import 'vant/lib/index.css';
-
 import { createApp } from 'vue'
 import App from './App.vue'
+import Vant from 'vant'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(Vant)
+app.mount('#app')

webui/vite.config.js

@@ -8,11 +8,11 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 export default defineConfig({
   plugins: [
     vue(),
-    vueDevTools(),
+    // vueDevTools(),
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
-  },
+  }
 })