package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@tauri-apps/cli": "^2",
     "@vitejs/plugin-vue": "^5.2.1",
+    "kysely": "^0.27.6",
     "sass-embedded": "^1.85.0",
     "typescript": "^5.7.3",
     "unplugin-element-plus": "^0.9.1",

pnpm-lock.yaml

@@ -48,6 +48,9 @@ importers:
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
         version: 5.2.1(vite@6.1.1(jiti@2.4.2)(lightningcss@1.29.1)(sass-embedded@1.85.0))(vue@3.5.13(typescript@5.7.3))
+      kysely:
+        specifier: ^0.27.6
+        version: 0.27.6
       sass-embedded:
         specifier: ^1.85.0
         version: 1.85.0
@@ -688,6 +691,10 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
+  kysely@0.27.6:
+    resolution: {integrity: sha512-FIyV/64EkKhJmjgC0g2hygpBv5RNWVPyNCqSAD7eTCv6eFWNIi4PN1UvdSJGicN/o35bnevgis4Y0UDC0qi8jQ==}
+    engines: {node: '>=14.0.0'}
+
   lightningcss-darwin-arm64@1.29.1:
     resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
     engines: {node: '>= 12.0.0'}
@@ -1576,6 +1583,8 @@ snapshots:
 
   jiti@2.4.2: {}
 
+  kysely@0.27.6: {}
+
   lightningcss-darwin-arm64@1.29.1:
     optional: true
 

src-tauri/capabilities/default.json

@@ -2,12 +2,6 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": [
-    "main"
-  ],
-  "permissions": [
-    "core:default",
-    "opener:default",
-    "sql:default"
-  ]
-}
+  "windows": ["main"],
+  "permissions": ["core:default", "opener:default", "sql:default", "sql:allow-execute"]
+}

src-tauri/tauri.conf.json

@@ -21,6 +21,11 @@
       "csp": null
     }
   },
+  "plugins": {
+    "sql": {
+      "preload": ["sqlite:store.db"]
+    }
+  },
   "bundle": {
     "active": true,
     "targets": "all",

src/assets/img/desk/Order1.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 1.25H8.5V4.25H15.5V1.25Z" stroke="#EA7C69" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.525 4.25H19C19.5523 4.25 20 4.69771 20 5.25V21.75C20 22.3023 19.5523 22.75 19 22.75H5C4.44771 22.75 4 22.3023 4 21.75V5.25C4 4.69771 4.44771 4.25 5 4.25H8H8.5V5.75H15.5V4.25H16.525Z" stroke="#EA7C69" stroke-width="2" stroke-linejoin="round"/>
+<path d="M13.4998 9.5L9.5 13.5006H14.502L10.5001 17.5009" stroke="#EA7C69" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/desk/order2.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 2H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 22H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 22C6.83335 15.3306 9 11.9972 12 12C15 12.0028 17.1667 15.3361 18.5 22H5.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+<path d="M18.5 2C17.1667 8.66945 15 12.0028 12 12C9 11.9972 6.83335 8.6639 5.5 2H18.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+</svg>

src/assets/img/desk/order3.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9C13.933 9 15.5 7.433 15.5 5.5C15.5 3.567 13.933 2 12 2C10.067 2 8.5 3.567 8.5 5.5C8.5 7.433 10.067 9 12 9Z" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 20.5C2 16.0817 6.02945 12.5 11 12.5" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 21L20.5 16L18.5 14L13.5 19V21H15.5Z" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/desk/order4.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 3H4.5C3.67158 3 3 3.67158 3 4.5V19.5C3 20.3285 3.67158 21 4.5 21H19.5C20.3285 21 21 20.3285 21 19.5V4.5C21 3.67158 20.3285 3 19.5 3Z" stroke="#48E482" stroke-width="2"/>
+<path d="M8 7.5V16.5" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 8.5V16.5" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 16.5C12.75 16.5 12 15.7 12 14.5C12 13.3 12.75 12.5 14 12.5C15.25 12.5 16 12.5 16 12.5V16.5H14Z" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/desk/order6.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 2H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 22H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 22C6.83335 15.3306 9 11.9972 12 12C15 12.0028 17.1667 15.3361 18.5 22H5.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+<path d="M18.5 2C17.1667 8.66945 15 12.0028 12 12C9 11.9972 6.83335 8.6639 5.5 2H18.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+<path d="M10.5 7.5H13.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 19H14.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/desk/order7.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 3C5 2.44771 5.4477 2 6 2H18C18.5523 2 19 2.44771 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 11H15" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 15H15" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 7H15" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/desk/座位.svg

@@ -0,0 +1,9 @@
+<svg width="240" height="204" viewBox="0 0 240 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M96.3636 20C98.3719 20 100.033 18.3588 99.6703 16.3836C99.4165 15.0029 99.0174 13.6495 98.4776 12.3463C97.4725 9.91982 95.9993 7.71503 94.1421 5.85786C92.285 4.00069 90.0802 2.5275 87.6537 1.52241C85.2272 0.517315 82.6264 -1.14805e-07 80 0C77.3736 1.14805e-07 74.7728 0.517315 72.3463 1.52241C69.9198 2.5275 67.715 4.00069 65.8579 5.85786C64.0007 7.71504 62.5275 9.91982 61.5224 12.3463C60.9826 13.6495 60.5835 15.0029 60.3297 16.3836C59.9665 18.3588 61.6281 20 63.6364 20L96.3636 20Z" fill="#E6E6E6"/>
+<path d="M176.364 20C178.372 20 180.033 18.3588 179.67 16.3836C179.416 15.0029 179.017 13.6495 178.478 12.3463C177.472 9.91982 175.999 7.71503 174.142 5.85786C172.285 4.00069 170.08 2.5275 167.654 1.52241C165.227 0.517315 162.626 -1.14805e-07 160 0C157.374 1.14805e-07 154.773 0.517315 152.346 1.52241C149.92 2.5275 147.715 4.00069 145.858 5.85786C144.001 7.71504 142.528 9.91982 141.522 12.3463C140.983 13.6495 140.584 15.0029 140.33 16.3836C139.967 18.3588 141.628 20 143.636 20L176.364 20Z" fill="#E6E6E6"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" fill="white"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" stroke="#E6E6E6" stroke-width="0.8"/>
+<rect width="9.6" height="140" transform="translate(0 32)" fill="#E6E6E6"/>
+<path d="M143.636 184C141.628 184 139.967 185.641 140.33 187.616C140.584 188.997 140.983 190.35 141.522 191.654C142.528 194.08 144.001 196.285 145.858 198.142C147.715 199.999 149.92 201.472 152.346 202.478C154.773 203.483 157.374 204 160 204C162.626 204 165.227 203.483 167.654 202.478C170.08 201.472 172.285 199.999 174.142 198.142C175.999 196.285 177.472 194.08 178.478 191.654C179.017 190.35 179.416 188.997 179.67 187.616C180.033 185.641 178.372 184 176.364 184L143.636 184Z" fill="#E6E6E6"/>
+<path d="M63.6364 184C61.6281 184 59.9665 185.641 60.3297 187.616C60.5835 188.997 60.9826 190.35 61.5224 191.654C62.5275 194.08 64.0007 196.285 65.8579 198.142C67.715 199.999 69.9198 201.472 72.3463 202.478C74.7728 203.483 77.3736 204 80 204C82.6264 204 85.2272 203.483 87.6537 202.478C90.0802 201.472 92.285 199.999 94.1421 198.142C95.9993 196.285 97.4725 194.08 98.4776 191.654C99.0174 190.35 99.4165 188.997 99.6703 187.616C100.033 185.641 98.3719 184 96.3636 184L63.6364 184Z" fill="#E6E6E6"/>
+</svg>

src/assets/img/desk/座位_active.svg

@@ -0,0 +1,9 @@
+<svg width="240" height="204" viewBox="0 0 240 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M96.3636 20C98.3719 20 100.033 18.3588 99.6703 16.3836C99.4165 15.0029 99.0174 13.6495 98.4776 12.3463C97.4725 9.91982 95.9993 7.71503 94.1421 5.85786C92.285 4.00069 90.0802 2.5275 87.6537 1.52241C85.2272 0.517315 82.6264 -1.14805e-07 80 0C77.3736 1.14805e-07 74.7728 0.517315 72.3463 1.52241C69.9198 2.5275 67.715 4.00069 65.8579 5.85786C64.0007 7.71504 62.5275 9.91982 61.5224 12.3463C60.9826 13.6495 60.5835 15.0029 60.3297 16.3836C59.9665 18.3588 61.6281 20 63.6364 20L96.3636 20Z" fill="#F67F20"/>
+<path d="M176.364 20C178.372 20 180.033 18.3588 179.67 16.3836C179.416 15.0029 179.017 13.6495 178.478 12.3463C177.472 9.91982 175.999 7.71503 174.142 5.85786C172.285 4.00069 170.08 2.5275 167.654 1.52241C165.227 0.517315 162.626 -1.14805e-07 160 0C157.374 1.14805e-07 154.773 0.517315 152.346 1.52241C149.92 2.5275 147.715 4.00069 145.858 5.85786C144.001 7.71504 142.528 9.91982 141.522 12.3463C140.983 13.6495 140.584 15.0029 140.33 16.3836C139.967 18.3588 141.628 20 143.636 20L176.364 20Z" fill="#F67F20"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" fill="white"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" stroke="#E6E6E6" stroke-width="0.8"/>
+<rect width="9.6" height="140" transform="translate(0 32)" fill="#F67F20"/>
+<path d="M143.636 184C141.628 184 139.967 185.641 140.33 187.616C140.584 188.997 140.983 190.35 141.522 191.654C142.528 194.08 144.001 196.285 145.858 198.142C147.715 199.999 149.92 201.472 152.346 202.478C154.773 203.483 157.374 204 160 204C162.626 204 165.227 203.483 167.654 202.478C170.08 201.472 172.285 199.999 174.142 198.142C175.999 196.285 177.472 194.08 178.478 191.654C179.017 190.35 179.416 188.997 179.67 187.616C180.033 185.641 178.372 184 176.364 184L143.636 184Z" fill="#F67F20"/>
+<path d="M63.6364 184C61.6281 184 59.9665 185.641 60.3297 187.616C60.5835 188.997 60.9826 190.35 61.5224 191.654C62.5275 194.08 64.0007 196.285 65.8579 198.142C67.715 199.999 69.9198 201.472 72.3463 202.478C74.7728 203.483 77.3736 204 80 204C82.6264 204 85.2272 203.483 87.6537 202.478C90.0802 201.472 92.285 199.999 94.1421 198.142C95.9993 196.285 97.4725 194.08 98.4776 191.654C99.0174 190.35 99.4165 188.997 99.6703 187.616C100.033 185.641 98.3719 184 96.3636 184L63.6364 184Z" fill="#F67F20"/>
+</svg>

src/assets/img/menu/add.svg

@@ -2,4 +2,4 @@
 <rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" fill="#F67F20"/>
 <rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" stroke="#E6E6E6" stroke-width="0.666667"/>
 <path d="M20.0003 12.2917V20M20.0003 27.7084V20M20.0003 20H27.7087M20.0003 20H12.292" stroke="white" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+</svg>

src/assets/img/menu/delete.svg

@@ -1,4 +1,4 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="0.699148" y="0.699148" width="38.6017" height="38.6017" rx="9.73563" stroke="#E03B1F" stroke-width="1.3983"/>
 <path d="M29.969 15.7202L30.1132 15.722C30.6481 15.7618 31.0581 16.1615 31.0865 16.6427L31.0727 16.911L30.6169 21.9343L30.1388 26.8366C30.0376 27.8152 29.9471 28.6407 29.8689 29.2904C29.5973 31.5549 27.964 32.9552 25.5019 32.9967C21.6653 33.0605 17.9775 33.0598 14.3962 32.9901C12.0053 32.9449 10.3961 31.5295 10.1293 29.2996L9.94489 27.6567L9.62263 24.4701L9.29252 20.9732L8.91507 16.7755C8.86815 16.237 9.30317 15.7653 9.8867 15.722C10.4216 15.6823 10.8956 16.0163 11.007 16.4871L11.0504 16.8718L11.4048 20.807L11.7918 24.886C11.9654 26.6517 12.116 28.0807 12.2364 29.0845C12.3885 30.3552 13.132 31.0092 14.4403 31.0339C17.9935 31.1031 21.6538 31.1038 25.4634 31.0404C26.8513 31.0171 27.6066 30.3695 27.7619 29.0748L27.9455 27.4408C27.9992 26.9372 28.0567 26.3813 28.1174 25.7774L28.5048 21.7658L28.9714 16.6185C29.0146 16.1248 29.4477 15.7464 29.969 15.7202ZM8.01604 13.4642C7.43063 13.4642 6.95605 13.0262 6.95605 12.4859C6.95605 11.9906 7.35483 11.5813 7.87221 11.5165L8.01604 11.5076H12.6339C13.1827 11.5076 13.6631 11.1817 13.8349 10.7121L13.877 10.5671L14.2358 8.92001C14.5519 7.82911 15.5781 7.0524 16.7807 6.9648L17.0081 6.95654H22.9907C24.2132 6.95654 25.2928 7.66908 25.7084 8.77009L25.7784 8.981L26.1217 10.5668C26.2295 11.0636 26.6699 11.4346 27.2025 11.498L27.3649 11.5076H31.983C32.5684 11.5076 33.043 11.9456 33.043 12.4859C33.043 12.9811 32.6442 13.3905 32.1269 13.4552L31.983 13.4642H8.01604ZM22.9907 8.91314H17.0081C16.7107 8.91314 16.4463 9.07379 16.3365 9.27571L16.2993 9.36442L15.9558 10.951C15.9137 11.1446 15.8528 11.3311 15.7751 11.5089L24.2239 11.5091C24.1753 11.3982 24.1334 11.2839 24.0984 11.1666L24.0429 10.9506L23.7149 9.42541C23.6383 9.16078 23.4015 8.96704 23.1158 8.92274L22.9907 8.91314Z" fill="#E03B1F"/>
-</svg>
+</svg>

src/assets/img/menu/reduce.svg

@@ -2,4 +2,4 @@
 <rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" fill="#F67F20"/>
 <rect x="0.333333" y="0.333333" width="39.3333" height="39.3333" rx="7.66667" stroke="#E6E6E6" stroke-width="0.666667"/>
 <path d="M27.7087 20H20.0003H12.292" stroke="white" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+</svg>

src/components/noProduct.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="w-full h-[80%] flex flex-col items-center justify-center">
-        <img class="w-[45%]" src="/imgs/noFoods.svg" alt="" />
-        <div class="text-[15px] font-semibold">{{ t('menu.noProducts') }}</div>
-    </div>
+  <div class="w-full h-[80%] flex flex-col items-center justify-center">
+    <img class="w-[45%]" src="/imgs/noFoods.svg" alt="" />
+    <div class="text-[15px] font-semibold">{{ t('menu.noProducts') }}</div>
+  </div>
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
-</script>
+</script>

src/config/db.ts

@@ -1,6 +1,10 @@
-import Database from '@tauri-apps/plugin-sql'
+import TauriDatabase from '@tauri-apps/plugin-sql'
+import { Kysely } from 'kysely'
+import { TauriDialect } from './kysely'
+import { Database } from '@/model'
 
-export async function initDB() {
-  const db = await Database.load('sqlite:store.db')
-  console.log('db: ', db)
-}
+export const DB = new Kysely<Database>({
+  dialect: new TauriDialect({
+    database: await TauriDatabase.load('sqlite:store.db'),
+  }),
+})

src/config/kysely.ts

@@ -0,0 +1,126 @@
+import {
+  CompiledQuery,
+  DatabaseConnection,
+  DatabaseIntrospector,
+  Dialect,
+  Driver,
+  Kysely,
+  SqliteAdapter,
+  SqliteIntrospector,
+  SqliteQueryCompiler,
+  QueryCompiler,
+  QueryResult,
+} from 'kysely'
+import Database from '@tauri-apps/plugin-sql'
+
+export interface TauriDialectConfig {
+  database: Database
+}
+
+export class TauriDialect implements Dialect {
+  #config: TauriDialectConfig
+
+  constructor(config: TauriDialectConfig) {
+    this.#config = config
+  }
+
+  createAdapter() {
+    return new SqliteAdapter()
+  }
+
+  createDriver(): Driver {
+    return new D1Driver(this.#config)
+  }
+
+  createQueryCompiler(): QueryCompiler {
+    return new SqliteQueryCompiler()
+  }
+
+  createIntrospector(db: Kysely<any>): DatabaseIntrospector {
+    return new SqliteIntrospector(db)
+  }
+}
+
+class D1Driver implements Driver {
+  #config: TauriDialectConfig
+
+  constructor(config: TauriDialectConfig) {
+    this.#config = config
+  }
+
+  async init(): Promise<void> {}
+
+  async acquireConnection(): Promise<DatabaseConnection> {
+    return new TauriConnection(this.#config)
+  }
+
+  async beginTransaction(conn: TauriConnection): Promise<void> {
+    return await conn.beginTransaction()
+  }
+
+  async commitTransaction(conn: TauriConnection): Promise<void> {
+    return await conn.commitTransaction()
+  }
+
+  async rollbackTransaction(conn: TauriConnection): Promise<void> {
+    return await conn.rollbackTransaction()
+  }
+
+  async releaseConnection(_conn: TauriConnection): Promise<void> {}
+
+  async destroy(): Promise<void> {}
+}
+
+class TauriConnection implements DatabaseConnection {
+  #config: TauriDialectConfig
+  //   #transactionClient?: D1Connection
+
+  constructor(config: TauriDialectConfig) {
+    this.#config = config
+  }
+
+  async executeQuery<O>(compiledQuery: CompiledQuery): Promise<QueryResult<O>> {
+    if (compiledQuery.sql.startsWith('select')) {
+      const results = await this.#config.database.select<O[]>(compiledQuery.sql, [
+        ...compiledQuery.parameters,
+      ])
+      return {
+        rows: results,
+      }
+    }
+    const results = await this.#config.database.execute(compiledQuery.sql, [
+      ...compiledQuery.parameters,
+    ])
+
+    const numAffectedRows = results.rowsAffected > 0 ? BigInt(results.rowsAffected) : undefined
+
+    return {
+      insertId:
+        results.lastInsertId === undefined || results.lastInsertId === null
+          ? undefined
+          : BigInt(results.lastInsertId),
+      rows: [],
+      numAffectedRows,
+      numUpdatedOrDeletedRows: numAffectedRows,
+    }
+  }
+
+  async beginTransaction() {
+    throw new Error('Transactions are not supported yet.')
+  }
+
+  async commitTransaction() {
+    throw new Error('Transactions are not supported yet.')
+  }
+
+  async rollbackTransaction() {
+    throw new Error('Transactions are not supported yet.')
+  }
+
+  async *streamQuery<O>(
+    _compiledQuery: CompiledQuery,
+    _chunkSize: number,
+  ): AsyncIterableIterator<QueryResult<O>> {
+    throw new Error('D1 Driver does not support streaming')
+  }
+}

src/main.ts

@@ -7,10 +7,8 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createPinia } from 'pinia'
 import i18n from './i18n'
 import './styles.css'
-import { initDB } from './config/db'
 import './element.scss'
 
-initDB()
 const pinia = createPinia()
 const app = createApp(App).use(pinia).use(ElementPlus).use(i18n).use(router).mount('#app')
 // for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/model/index.ts

@@ -0,0 +1,5 @@
+import { TodosTable } from './todo'
+
+export interface Database {
+  todos: TodosTable
+}

src/model/todo.ts

@@ -0,0 +1,11 @@
+import { Generated, Insertable, Selectable, Updateable } from 'kysely'
+
+export interface TodosTable {
+  id: Generated<number>
+  title: string
+  desc: string
+}
+
+export type Todo = Selectable<TodosTable>
+export type NewTodo = Insertable<TodosTable>
+export type TodoUpdate = Updateable<TodosTable>

src/router/index.js

@@ -1,28 +0,0 @@
-import { createWebHashHistory, createRouter } from 'vue-router'
-
-import LayoutView from '../views/layout/index.vue'
-import LoginView from '../views/login/index.vue'
-import MenuView from '../views/menu/index.vue'
-import OrderView from '../views/order/index.vue'
-import ExitView from '../views/exit/index.vue'
-
-const routes = [
-    { path: '/login', component: LoginView },
-    {
-        path: '/',
-        component: LayoutView,
-        redirect: '/menu',
-        children: [
-            { path: '/menu', component: MenuView },
-            { path: '/order', component: OrderView },
-            { path: '/exit', component: ExitView },
-        ]
-    },
-    
-]
-
-const router = createRouter({
-    history: createWebHashHistory(),
-    routes,
-})
-export default router

src/router/index.ts

@@ -0,0 +1,41 @@
+import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router'
+
+import LayoutView from '../views/layout/index.vue'
+import LoginView from '../views/login/index.vue'
+import MenuView from '../views/menu/index.vue'
+import OrderView from '../views/order/index.vue'
+import orderDetail from '../views/order/orderDetail.vue'
+import ExitView from '../views/exit/index.vue'
+import { path } from '@tauri-apps/api'
+
+const routes: RouteRecordRaw[] = [
+  { path: '/login', component: LoginView },
+  {
+    path: '/',
+    component: LayoutView,
+    redirect: '/menu',
+    children: [
+      { path: '/menu', component: MenuView },
+      { 
+        path: '/order', 
+        children: [
+          {
+            path:'orderList',
+            component: OrderView,
+          },
+          {
+            path:'orderDetail',
+            component: orderDetail,
+          }
+        ]
+      },
+      { path: '/exit', component: ExitView },
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+export default router

src/views/layout/components/Header.vue

@@ -1,48 +1,64 @@
 <template>
-    <header class="flex h-[60px] items-center px-[48px] border-b-[1px] border-b-[#e6e6e6] justify-between ">
-            <div class="flex items-center">
-                <img class="w-[100px] mr-[10px]" src="/imgs/logo.svg" alt="">
-                <el-input v-model="keword" :input-style="{ boxShadow: 'none' }" style="width: 240px"
-                    placeholder="Please input" :prefix-icon="Search" />
-            </div>
-            <div class="flex items-center coursor-pointer">
-                <el-dropdown placement="bottom-start" trigger="click" size="large">
-
-                    <div class="flex items-center h-[42px] border rounded-[8px] border-[#e6e6e6] px-[10px]">
-                        <img class="w-[24px] h-[24px] mr-[5px]" src="/imgs/earth.svg" alt="" />
-                          {{ curLang }} 
-                    </div>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item v-for="(item,index) in langs" :key="index">
-                                <span @click="locale=item">{{ item }}</span>
-                            </el-dropdown-item>
-                           
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
-                <div class="flex items-center ml-[10px]">
-                    <div class="w-[42px] h-[42px] overflow-hidden rounded-full">
-                        <img class="w-full h-full" src="/imgs/avater.svg" alt="">
-                    </div>
-                    <div class="ml-[5px] flex flex-col justify-around h-[42px]">
-                        <div class="text-[#333] text-[14px] font-bold">周星星</div>
-                        <div class="text-[#999] text-[10px]">出纳员</div>
-                    </div>
-                </div>
-            </div>
-        </header>
+  <header
+    class="flex h-[100px] items-center px-[48px] border-b-[1px] border-b-[#e6e6e6] justify-between"
+  >
+    <div @click="execSQLTest" class="flex items-center">
+      <img class="w-[156px] mr-[10px]" src="/imgs/logo.svg" alt="" />
+      <el-input
+        v-model="keword"
+        :input-style="{ boxShadow: 'none' }"
+        style="width: 240px"
+        placeholder="Please input"
+        :prefix-icon="Search"
+      />
+    </div>
+    <div class="flex items-center coursor-pointer">
+      <el-dropdown placement="bottom-start" trigger="click" size="large">
+        <div class="flex items-center h-[42px] border rounded-[8px] border-[#e6e6e6] px-[10px]">
+          <img class="w-[24px] h-[24px] mr-[5px]" src="/imgs/earth.svg" alt="" />
+          {{ curLang }}
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, index) in langs" :key="index">
+              <span @click="locale = item">{{ item }}</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <div class="flex items-center ml-[10px]">
+        <div class="w-[42px] h-[42px] overflow-hidden rounded-full">
+          <img class="w-full h-full" src="/imgs/avater.svg" alt="" />
+        </div>
+        <div class="ml-[5px] flex flex-col justify-around h-[42px]">
+          <div class="text-[#333] text-[14px] font-bold">周星星</div>
+          <div class="text-[#999] text-[10px]">出纳员</div>
+        </div>
+      </div>
+    </div>
+  </header>
 </template>
-<script setup>
-import { computed,ref } from 'vue';
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { Search } from '@element-plus/icons-vue'
-import {messages} from '../../../i18n/index'
+import { messages } from '../../../i18n/index'
+import { DB } from '@/config/db'
 import { useI18n } from 'vue-i18n'
 const { t, locale } = useI18n()
-const langs = computed(()=>Object.keys(messages))
-const curLang= computed(()=>locale.value)
+const langs = computed(() => Object.keys(messages))
+const curLang = computed(() => locale.value)
 const keword = ref('')
-function changeLanguage(lang){
-    locale.value = lang
+function changeLanguage(lang) {
+  locale.value = lang
+}
+
+async function execSQLTest() {
+  DB.insertInto('todos')
+    .values({
+      title: '标题1',
+    })
+    .executeTakeFirst()
+  const result = await DB.selectFrom('todos').selectAll().where('id', '=', 1).execute()
+  console.log('resulr: ', result)
 }
-</script>
+</script>

src/views/layout/components/Menu.vue

@@ -1,12 +1,18 @@
 <template>
-    <div class="flex flex-col items-center">
-        <div class="rounded-[20px] flex items-center justify-center  w-[45px] h-[45px]" :class="[props.info.slected?'active':'']">
-            <img :src="props.info?.img" class="w-full h-full" />
-        </div>
-        <div class=" text-center text-[12px] w-[75px]" :class="[props.info.slected?'font-semibold':'']">
-            {{ t(props.info.name) }}
-        </div>
+  <div class="flex flex-col items-center">
+    <div
+      class="rounded-[20px] flex items-center justify-center w-[45px] h-[45px]"
+      :class="[props.info.slected ? 'active' : '']"
+    >
+      <img :src="props.info?.img" class="w-full h-full" />
     </div>
+    <div
+      class="text-center text-[12px] w-[75px]"
+      :class="[props.info.slected ? 'font-semibold' : '']"
+    >
+      {{ t(props.info.name) }}
+    </div>
+  </div>
 </template>
 <script setup>
 import { watch } from 'vue'
@@ -30,10 +36,9 @@ const changeLanguage = (lang) => {
 }
 </script>
 <style scoped>
-    .active{
-        border-radius: 19.296px;
-        background: #F67F20;
-        box-shadow: 0px 12.864px 38.593px 0px rgba(234, 124, 105, 0.32);
-    }
-
-</style>
+.active {
+  border-radius: 19.296px;
+  background: #f67f20;
+  box-shadow: 0px 12.864px 38.593px 0px rgba(234, 124, 105, 0.32);
+}
+</style>

src/views/layout/index.vue

@@ -36,7 +36,7 @@ const menus = ref([
     name: $t('sidebar.order'),
     img: menuCooker2,
     key: 2,
-    path: '/order',
+    path: '/order/orderList',
   },
   {
     name: $t('sidebar.exit'),

src/views/menu/components/desk-drawer.vue

@@ -0,0 +1,216 @@
+<template>
+    <div class="desk-drawer">
+        <el-drawer v-model="show" :show-close="false" direction="rtl" size="80%">
+            <template #header style="margin-bottom: 0;">
+                <div class="mb-0">
+                    <div class="flex items-center justify-between">
+                        <h1 class="text-2xl font-semibold text-gray-900">List of Pending Orders</h1>
+                        <button @click="show = false"
+                            class="!rounded-button bg-orange-500 px-6 py-2 text-white hover:bg-orange-600 whitespace-nowrap">
+                            <i class="fas fa-arrow-left mr-2"></i>Back Home
+                        </button>
+                    </div>
+                    <!-- <el-divider /> -->
+                </div>
+            </template>
+            <div class="h-full bg-gray-50">
+                <div class="mx-auto w-full px-4">
+                    <!-- Header -->
+                    <!-- Tip Message -->
+                    <div class="mb-6 rounded-lg bg-orange-50 p-4 text-orange-700">
+                        <p>Tip: Please select a blank space to place an order and click on the table where the order has
+                            already
+                            been placed to proceed with checkout</p>
+                    </div>
+
+                    <!-- Table Filter -->
+                    <div class="mb-8 space-x-4">
+                        <button class="!rounded-button whitespace-nowrap bg-orange-500 px-6 py-2 text-white">All
+                            Tables</button>
+                        <button
+                            class="!rounded-button whitespace-nowrap bg-gray-100 px-6 py-2 text-gray-600 hover:bg-gray-200">A
+                            Tables</button>
+                        <button
+                            class="!rounded-button whitespace-nowrap bg-gray-100 px-6 py-2 text-gray-600 hover:bg-gray-200">B
+                            Tables</button>
+                    </div>
+
+                    <!-- Table Grid -->
+                    <div class="grid grid-cols-5 gap-6 pb-8">
+                        <template v-for="table in tables" :key="table.id">
+                            <div class="relative cursor-pointer" 
+                            @click="selectTable(table)"
+                            >
+                                <img class="w-full h-full"
+                                    :src="table.isActive ? '/src/assets/img/desk/座位_active.svg' : '/src/assets/img/desk/座位.svg'"
+                                    alt="">
+                                <div class="absolute top-0 py-2 left-5 flex flex-col justify-around h-full">
+                                    <div class=" text-sm font-medium"
+                                        :class="table.isActive ? 'text-orange-500' : 'text-gray-400'">
+                                        {{ table.name }}
+                                    </div>
+                                    <div :class="table.isActive ? 'text-gray-900' : 'text-gray-400'">
+                                        {{ table.status }}
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- <div :class="[
+                                'relative rounded-lg border p-4 transition-all duration-200',
+                                table.isActive ? 'border-orange-500 bg-white shadow-lg' : 'border-gray-200 bg-gray-50'
+                            ]" @click="selectTable(table)">
+                                <div class="mb-2 text-lg font-medium"
+                                    :class="table.isActive ? 'text-orange-500' : 'text-gray-400'">
+                                    {{ table.name }}
+                                </div>
+                                <div :class="table.isActive ? 'text-gray-900' : 'text-gray-400'">
+                                    {{ table.status }}
+                                </div>
+                                <div v-if="table.isActive" class="mt-2 text-sm text-gray-500">
+                                    {{ table.orderInfo }}
+                                    <div class="mt-1">{{ table.date }}</div>
+                                </div>
+
+                                <div class="absolute -bottom-2 left-1/2 flex -translate-x-1/2 space-x-1">
+                                    <div v-for="i in 2" :key="i" :class="[
+                                        'h-2 w-2 rounded-full',
+                                        table.isActive ? 'bg-orange-500' : 'bg-gray-300'
+                                    ]"></div>
+                                </div>
+                            </div> -->
+                        </template>
+                    </div>
+                </div>
+            </div>
+            <!-- <template #footer>
+      <div style="flex: auto">
+        <el-button type="primary" @click="" plain>close window</el-button>
+        <el-button type="primary" @click="">Join the checkout counter</el-button>
+      </div>
+    </template> -->
+        </el-drawer>
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Table {
+    id: number;
+    name: string;
+    status: string;
+    isActive: boolean;
+    orderInfo?: string;
+    date?: string;
+}
+const show = defineModel('show')
+const showInput = defineModel('showInput')
+const tables = ref<Table[]>([
+    {
+        id: 1,
+        name: 'A1',
+        status: 'Registration',
+        isActive: true,
+        orderInfo: 'QTY:10',
+        date: 'February 26, 2018'
+    },
+    {
+        id: 2,
+        name: 'A2',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 3,
+        name: 'A3',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 4,
+        name: 'A4',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 5,
+        name: 'A5',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 6,
+        name: 'B1',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 7,
+        name: 'B2',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 8,
+        name: 'B3',
+        status: 'Registration',
+        isActive: true,
+        orderInfo: 'QTY:8',
+        date: 'February 26, 2018'
+    },
+    {
+        id: 9,
+        name: 'B4',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 10,
+        name: 'B5',
+        status: 'Free',
+        isActive: false
+    }
+]);
+
+const selectTable = (table: Table) => {
+    table.isActive = !table.isActive;
+    console.log(table.isActive,'table.isActive')
+    if (table.isActive) {
+        table.status = 'Registration';
+        table.orderInfo = 'QTY:10';
+        table.date = 'February 26, 2018';
+    } else {
+        table.status = 'Free';
+        table.orderInfo = undefined;
+        table.date = undefined;
+    }
+};
+console.log(show)
+console.log(show)
+
+</script>
+
+<style scoped lang="scss">
+.grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+/* :global(.el-drawer__header) {
+    margin:0;
+    } */
+// .desk-drawer .el-drawer__header {
+//     margin: 0;
+// }
+
+.desk-drawer {
+    :deep(.el-drawer__header) {
+        margin: 0;
+    }
+}
+
+/* 
+:deep(.el-drawer__header) {
+    margin: 0;
+}
+ */
+</style>

src/views/menu/components/rightOrder/components/order.vue

@@ -1,122 +1,127 @@
 <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
 
 <template>
-    <div class="h-full bg-gray-50">
-      <div class="w-full mx-auto ">
-        <div class="bg-white rounded-lg  p-3">
-          <div class="flex items-center justify-between mb-3">
-            <h1 class="text-sm font-medium">Orders #45892</h1>
-          </div>
-  
-          <div class="space-y-4 mb-6 overflow-auto h-[200px]">
-            <div v-for="(item, index) in orderItems" :key="index" 
-              class="flex items-center justify-between p-4 bg-white border border-gray-100 rounded-lg">
-              <div class="flex items-center space-x-4">
-                <div class="w-16 h-16 rounded-full overflow-hidden">
-                  <img :src="item.image" :alt="item.name" class="w-full h-full object-cover"/>
-                </div>
-                <div>
-                  <h3 class="font-sm">{{ item.name }}</h3>
-                  <p class="text-xxs text-gray-500">Size: Large, Middle, Small</p>
-                  <p class="text-orange-500 font-medium mt-1">${{ item.price.toFixed(2) }}</p>
-                </div>
-              </div>
-              <div class="flex items-center space-x-4">
-                <button class="w-4 h-4 flex items-center justify-center bg-orange-100 text-orange-500 rounded-lg !rounded-button whitespace-nowrap"
-                  @click="decreaseQuantity(index)">
-                  <img src="@/assets/img/menu/reduce.svg" alt="">
-                  
-                </button>
-                <span class="w-4 text-center">{{ item.quantity }}</span>
-                <button class="w-4 h-4 flex items-center justify-center bg-orange-500 text-white rounded-lg !rounded-button whitespace-nowrap"
-                  @click="increaseQuantity(index)">
-                  <img src="@/assets/img/menu/add.svg" alt="">
+  <div class="h-full bg-gray-50">
+    <div class="w-full mx-auto">
+      <div class="bg-white rounded-lg p-3">
+        <div class="flex items-center justify-between mb-3">
+          <h1 class="text-sm font-medium">Orders #45892</h1>
+        </div>
 
-                </button>
-                <button class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-red-500 !rounded-button whitespace-nowrap"
-                  @click="removeItem(index)">
-                  <img src="@/assets/img/menu/delete.svg" alt="">
-                </button>
+        <div class="space-y-4 mb-6 overflow-auto h-[200px]">
+          <div
+            v-for="(item, index) in orderItems"
+            :key="index"
+            class="flex items-center justify-between p-4 bg-white border border-gray-100 rounded-lg"
+          >
+            <div class="flex items-center space-x-4">
+              <div class="w-16 h-16 rounded-full overflow-hidden">
+                <img :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
+              </div>
+              <div>
+                <h3 class="font-sm">{{ item.name }}</h3>
+                <p class="text-xxs text-gray-500">Size: Large, Middle, Small</p>
+                <p class="text-orange-500 font-medium mt-1">${{ item.price.toFixed(2) }}</p>
               </div>
             </div>
-          </div>
-  
-          <div class="border-t border-gray-100 pt-4">
-            <div class="mb-4">
-              <h3 class="font-medium mb-2">Order Notes</h3>
-              <p class="text-gray-600 text-sm">No Chili, No Cilantro</p>
-            </div>
-            
-            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
-              <span class="font-medium">Total</span>
-              <span class="text-sm font-medium">${{ total.toFixed(2) }}</span>
+            <div class="flex items-center space-x-4">
+              <button
+                class="w-4 h-4 flex items-center justify-center bg-orange-100 text-orange-500 rounded-lg !rounded-button whitespace-nowrap"
+                @click="decreaseQuantity(index)"
+              >
+                <img src="@/assets/img/menu/reduce.svg" alt="" />
+              </button>
+              <span class="w-4 text-center">{{ item.quantity }}</span>
+              <button
+                class="w-4 h-4 flex items-center justify-center bg-orange-500 text-white rounded-lg !rounded-button whitespace-nowrap"
+                @click="increaseQuantity(index)"
+              >
+                <img src="@/assets/img/menu/add.svg" alt="" />
+              </button>
+              <button
+                class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-red-500 !rounded-button whitespace-nowrap"
+                @click="removeItem(index)"
+              >
+                <img src="@/assets/img/menu/delete.svg" alt="" />
+              </button>
             </div>
           </div>
         </div>
+
+        <div class="border-t border-gray-100 pt-4">
+          <div class="mb-4">
+            <h3 class="font-medium mb-2">Order Notes</h3>
+            <p class="text-gray-600 text-sm">No Chili, No Cilantro</p>
+          </div>
+
+          <div class="flex items-center justify-between pt-4 border-t border-gray-100">
+            <span class="font-medium">Total</span>
+            <span class="text-sm font-medium">${{ total.toFixed(2) }}</span>
+          </div>
+        </div>
       </div>
     </div>
-  </template>
-  
-  <script lang="ts" setup>
-  import { ref, computed } from 'vue';
-  
-  interface OrderItem {
-    name: string;
-    price: number;
-    quantity: number;
-    image: string;
-  }
-  
-  const orderItems = ref<OrderItem[]>([
-    {
-      name: 'Spicy Seasoned Seafood',
-      price: 4.85,
-      quantity: 2,
-      image: 'https://ai-public.mastergo.com/ai/img_res/1c3d3c5704265a819a659a8d3589bc21.jpg'
-    },
-    {
-      name: 'Premium Grade Mackerel (Cleaned)',
-      price: 4.65,
-      quantity: 2,
-      image: 'https://ai-public.mastergo.com/ai/img_res/6d4be10ce5e234dcec1509d199a41a99.jpg'
-    },
-    {
-      name: 'Grilled Sea Bass',
-      price: 4.85,
-      quantity: 2,
-      image: 'https://ai-public.mastergo.com/ai/img_res/a20aaccbc775fd5729c8b8c6dac46563.jpg'
-    }
-  ]);
-  
-  const total = computed(() => {
-    return orderItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
-  });
-  
-  const increaseQuantity = (index: number) => {
-    orderItems.value[index].quantity += 1;
-  };
-  
-  const decreaseQuantity = (index: number) => {
-    if (orderItems.value[index].quantity > 1) {
-      orderItems.value[index].quantity -= 1;
-    }
-  };
-  
-  const removeItem = (index: number) => {
-    orderItems.value.splice(index, 1);
-  };
-  </script>
-  
-  <style scoped>
-  .order-item {
-    transition: all 0.3s ease;
-  }
-  
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+
+interface OrderItem {
+  name: string
+  price: number
+  quantity: number
+  image: string
+}
+
+const orderItems = ref<OrderItem[]>([
+  {
+    name: 'Spicy Seasoned Seafood',
+    price: 4.85,
+    quantity: 2,
+    image: 'https://ai-public.mastergo.com/ai/img_res/1c3d3c5704265a819a659a8d3589bc21.jpg',
+  },
+  {
+    name: 'Premium Grade Mackerel (Cleaned)',
+    price: 4.65,
+    quantity: 2,
+    image: 'https://ai-public.mastergo.com/ai/img_res/6d4be10ce5e234dcec1509d199a41a99.jpg',
+  },
+  {
+    name: 'Grilled Sea Bass',
+    price: 4.85,
+    quantity: 2,
+    image: 'https://ai-public.mastergo.com/ai/img_res/a20aaccbc775fd5729c8b8c6dac46563.jpg',
+  },
+])
+
+const total = computed(() => {
+  return orderItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+})
+
+const increaseQuantity = (index: number) => {
+  orderItems.value[index].quantity += 1
+}
+
+const decreaseQuantity = (index: number) => {
+  if (orderItems.value[index].quantity > 1) {
+    orderItems.value[index].quantity -= 1
   }
-  </style>
-  
-  
+}
+
+const removeItem = (index: number) => {
+  orderItems.value.splice(index, 1)
+}
+</script>
+
+<style scoped>
+.order-item {
+  transition: all 0.3s ease;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>

src/views/menu/components/rightOrder/rightOrder.vue

@@ -1,36 +1,42 @@
 <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
 
 <template>
-    <div class=" h-full bg-white flex flex-col items-center justify-between ">
-      <!-- Empty state section -->
-      <div class="h-[80%]">
-        <noProduct v-if="false"></noProduct>
-        <order v-else></order>
-      </div>
-      <!-- Action buttons section -->
-      <div class="w-full max-w-md px-1  h-[20%] bg-white">
-        <div class="grid grid-cols-2 gap-4 mb-1">
-          <button class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors">
-            Registration
-          </button>
-          <button class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors">
-            Kitchen Receipt
-          </button>
-        </div>
-        <button class="rounded text-sm w-full py-3 px-6 mb-1 text-white bg-[#999]  !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors">
-          Choose A Table For Payment
+  <div class="h-full bg-white flex flex-col items-center justify-between">
+    <!-- Empty state section -->
+    <div class="h-[80%]">
+      <noProduct v-if="false"></noProduct>
+      <order v-else></order>
+    </div>
+    <!-- Action buttons section -->
+    <div class="w-full max-w-md px-1 h-[20%] bg-white">
+      <div class="grid grid-cols-2 gap-4 mb-1">
+        <button
+          class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors"
+        >
+          Registration
+        </button>
+        <button
+          class="rounded text-sm py-3 px-6 bg-white border border-gray-200 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 transition-colors"
+        >
+          Kitchen Receipt
         </button>
       </div>
+      <button
+        @click="emits('showDeskDrawer')"
+        class="rounded text-sm w-full py-3 px-6 mb-1 text-white bg-[#999] !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors"
+      >
+        Choose A Table For Payment
+      </button>
     </div>
-  </template>
-  
-  <script lang="ts" setup>
-  import noProduct from '@/components/noProduct.vue';
-  import order from './components/order.vue';
-  </script>
-  
-  <style scoped>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import noProduct from '@/components/noProduct.vue'
+import order from './components/order.vue'
+import { emit } from '@tauri-apps/api/event';
+const emits= defineEmits(['showDeskDrawer'])
+
+</script>
 
-  </style>
-  
-  
+<style scoped></style>

src/views/menu/components/test.vue

@@ -1,110 +0,0 @@
-<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
-
-<template>
-    <div class="min-h-screen bg-gray-50">
-      <div class="container mx-auto px-4 py-8">
-        <header class="mb-8">
-          <h1 class="text-3xl font-bold text-gray-900">Fresh Food Menu</h1>
-          <div class="flex items-center mt-4">
-            <div class="relative flex-1 max-w-lg">
-              <input
-                type="text"
-                placeholder="Search for dishes..."
-                class="w-full pl-10 pr-4 py-2 text-sm text-gray-700 bg-white rounded-lg border-none shadow-sm"
-              />
-              <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
-            </div>
-          </div>
-        </header>
-  
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-          <div v-for="product in products" :key="product.id" class="bg-white rounded-xl shadow-sm p-4 transition-transform hover:scale-105">
-            <div class="relative aspect-square mb-4 rounded-full overflow-hidden">
-              <img :src="product.image" :alt="product.name" class="w-full h-full object-cover" />
-            </div>
-            <div class="text-center">
-              <h3 class="text-gray-800 font-medium text-sm mb-2">{{ product.name }}</h3>
-              <p class="text-orange-500 font-semibold">${{ product.price.toFixed(2) }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </template>
-  
-  <script lang="ts" setup>
-  import { ref } from 'vue';
-  
-  interface Product {
-    id: number;
-    name: string;
-    price: number;
-    image: string;
-  }
-  
-  const products = ref<Product[]>([
-    {
-      id: 1,
-      name: 'Spicy Seasoned Seafood Noodles',
-      price: 2.29,
-      image: 'https://ai-public.mastergo.com/ai/img_res/e53b11a05b7778db2bc50338e47047c4.jpg'
-    },
-    {
-      id: 2,
-      name: 'Grilled Salmon Bowl',
-      price: 3.49,
-      image: 'https://ai-public.mastergo.com/ai/img_res/07e4619fc2f26fe9f6a0afaebc47dceb.jpg'
-    },
-    {
-      id: 3,
-      name: 'Teriyaki Chicken Rice',
-      price: 2.99,
-      image: 'https://ai-public.mastergo.com/ai/img_res/1709d2e0e3495f8089da24be4ad2d26a.jpg'
-    },
-    {
-      id: 4,
-      name: 'Vegetable Stir Fry Noodles',
-      price: 2.49,
-      image: 'https://ai-public.mastergo.com/ai/img_res/043e50f136a6ec7f5f37eb448cf298c7.jpg'
-    },
-    {
-      id: 5,
-      name: 'Spicy Tuna Poke Bowl',
-      price: 3.99,
-      image: 'https://ai-public.mastergo.com/ai/img_res/7f8ad399ad651c8de6896bc611be1936.jpg'
-    },
-    {
-      id: 6,
-      name: 'Beef Bulgogi Bowl',
-      price: 3.79,
-      image: 'https://ai-public.mastergo.com/ai/img_res/49b0d0fbf6654dcef422a7e3334c8b6a.jpg'
-    },
-    {
-      id: 7,
-      name: 'Shrimp Pad Thai',
-      price: 3.29,
-      image: 'https://ai-public.mastergo.com/ai/img_res/ca1fef96dffcfa401768314721606c8f.jpg'
-    },
-    {
-      id: 8,
-      name: 'Miso Ramen Bowl',
-      price: 2.89,
-      image: 'https://ai-public.mastergo.com/ai/img_res/210debe79bb22fec1944cab575f2759f.jpg'
-    }
-  ]);
-  </script>
-  
-  <style scoped>
-  .container {
-    max-width: 1440px;
-    min-height: 1024px;
-  }
-  
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  </style>
-  
-  

src/views/menu/index.vue

@@ -70,9 +70,10 @@
       </div>
     </div>
     <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
-      <rightOrder></rightOrder>
+      <rightOrder @showDeskDrawer="catgroyClick"></rightOrder>
     </div>
     <OrderDrawer v-model:show="show" />
+    <deskDrawer v-model:show="deskShow" />
   </div>
 </template>
 <script setup>
@@ -83,14 +84,14 @@ import { useI18n } from 'vue-i18n'
 import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
 import rightOrder from './components/rightOrder/rightOrder.vue'
 import OrderDrawer from './components/order-drawer.vue'
-
+import deskDrawer from './components/desk-drawer.vue'
 const { t } = useI18n()
 const store = useStore()
 const { count } = storeToRefs(store)
-// 响应式数据
-const currentIndex = ref(0)
-const itemWidth = ref(0)
 const scrollRef = ref(null)
+// function handleRightClick() {
+//  scrollRef.value.scrollLeft += 100
+// }
 
 // 计算元素宽度
 const calculateItemWidth = () => {
@@ -187,6 +188,12 @@ const scrollToPosition = () => {
     behavior: 'smooth',
   })
 }
+
+// 挂单桌子
+const deskShow = ref(false)
+const catgroyClick = () => {
+  deskShow.value = true
+}
 </script>
 <style scoped>
 ::-webkit-scrollbar-thumb {

src/views/order/index.vue

@@ -1,9 +1,164 @@
+<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
+
 <template>
-    <div>
-        <swiper-container>
-  <swiper-slide>Slide 1</swiper-slide>
-  <swiper-slide>Slide 2</swiper-slide>
-  <swiper-slide>Slide 3</swiper-slide>
-</swiper-container>
+  <div class=" bg-gray-50 p-8 bg-white">
+    <div class="mx-auto w-full">
+      <!-- Search Area -->
+      <div class="mb-6 flex items-center gap-4">
+        <el-input v-model="searchKeyword" placeholder="Enter Keywords To Search" class="!rounded-button">
+          <template #append>
+            <el-icon>
+              <Search />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-select v-model="classification" placeholder="Product classification filtering" class="w-3 !rounded-button">
+          <el-option v-for="item in classifications" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <div class="flex items-center gap-2">
+          <span class="whitespace-nowrap text-gray-600">Trading Hours:</span>
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="—"
+            start-placeholder="Please enter the time" end-placeholder="Please enter the time"
+            class="w-[400px] !rounded-button" />
+        </div>
+
+        <el-button type="primary" class="!rounded-button" @click="handleReset">
+          Reset
+        </el-button>
+      </div>
+
+      <!-- Table -->
+      <!-- 内容居中 -->
+      <el-table :data="tableData" class="w-full" :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ textAlign: 'center' }">
+        <el-table-column prop="orderNumber" label="Order Number" width="120" />
+        <el-table-column prop="employeeId" label="Employee ID" width="120" />
+        <el-table-column prop="classification" label="Classification" />
+        <el-table-column prop="cashierName" label="Cashier's Name" width="150" />
+        <el-table-column prop="amountReceivable" label="Amount Receivable">
+          <template #default="{ row }">
+            ${{ row.amountReceivable }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="tradingHours" label="Trading Hours" width="150" />
+        <el-table-column prop="orderUpload" label="Order Upload" />
+        <el-table-column label="Operation" width="100">
+          <template #default="{ row }">
+            <el-button type="primary" link class="!rounded-button text-orange-500" @click="handleDetails(row)">
+              Details
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+
     </div>
-</template>
+    <!-- Pagination -->
+    <div class="fixed bottom-5 right-5 flex items-center justify-between">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50]"
+        :total="total" layout="prev, pager, next, sizes" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+const searchKeyword = ref('');
+const classification = ref('');
+const dateRange = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(600);
+console.log('total', total);
+const classifications = [
+  { value: 'seasonal', label: 'Seasonal Hot Dishes' },
+  { value: 'regular', label: 'Regular Menu' },
+  { value: 'drinks', label: 'Beverages' },
+  { value: 'desserts', label: 'Desserts' },
+];
+
+const tableData = [
+  {
+    orderNumber: '00001',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Emma Thompson',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00002',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Michael Chen',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00003',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Sarah Wilson',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00004',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'David Miller',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00005',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Rachel Anderson',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00006',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'James Parker',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+];
+
+const handleReset = () => {
+  searchKeyword.value = '';
+  classification.value = '';
+  dateRange.value = [];
+};
+const handleDetails = (row) => {
+  console.log('row', row);
+  router.push({ path: '/order/orderDetail', query: { id: row.orderNumber } });
+};
+</script>
+
+<style scoped>
+.el-input__wrapper {
+  background-color: white !important;
+}
+
+.el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
+</style>

src/views/order/orderDetail.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="bg-white rounded-lg  p-8">
+    <!-- Header -->
+    <div class="flex justify-between items-center mb-8">
+      <div>
+        <h1 class="text-2xl font-medium">Order Details</h1>
+        <p class="text-gray-500 mt-1">Order #{{ orderNumber }}</p>
+      </div>
+      <button
+        class="!rounded-button bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 flex items-center whitespace-nowrap"
+        @click="$router.push('/order/orderList')">
+        <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order12.png" alt="">
+        Back Home
+      </button>
+    </div>
+    <el-divider />
+    <!-- Order Information Grid -->
+    <div class="grid grid-cols-3 gap-8 mb-8 text-sm">
+      <div class="space-y-6">
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/Order1.svg" alt="">Order Number
+          </div>
+          <div>{{ orderNumber }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order2.svg" alt="">Order Transaction Time
+          </div>
+          <div>{{ orderTime }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order3.svg" alt="">Trader's Name
+          </div>
+          <div>{{ traderName }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order4.svg" alt="">Employee ID
+          </div>
+          <div>{{ employeeId }}</div>
+        </div>
+      </div>
+
+      <div class="space-y-6">
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order5.png" alt="">Amount Receivable
+          </div>
+          <div>$ {{ amount }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order6.svg" alt="">Order Upload Time
+          </div>
+          <div>{{ uploadTime }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order7.svg" alt="">Order Status
+          </div>
+          <div>
+            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">
+              {{ orderStatus }}
+            </span>
+          </div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order8.png" alt="">Payment Method
+          </div>
+          <div>{{ paymentMethod }}</div>
+        </div>
+      </div>
+
+      <div>
+        <!-- Additional Information -->
+        <div class="mb-4">
+          <div class="flex items-center">
+            <div class="w-48 text-gray-500">
+              <img class="h-5 w-5  mr-2 inline" src="@/assets/img/desk/order11.png" alt="">Commodity Classification
+            </div>
+            <div>
+              <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">
+                {{ commodityType }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex flex-col space-y-2">
+          <button
+            class="!rounded-button flex-1 border border-orange-500 text-orange-500 hover:bg-orange-50 px-4 py-3 flex items-center justify-center whitespace-nowrap"
+            @click="handleRefund">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order9.png" alt="">
+            Refund
+          </button>
+          <button
+            class="!rounded-button flex-1 bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 flex items-center justify-center whitespace-nowrap"
+            @click="handlePrint">
+            <img class="h-5 w-5  mr-2 bg-white rounded-full" src="@/assets/img/desk/order10.png" alt="">
+            Print
+          </button>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+
+  <div class="bg-white p-6 pt-0 mb-10">
+    <!-- Transaction Details -->
+    <el-table :data="transactionDetails" class="mb-8">
+      <el-table-column prop="serialNumber" label="Transaction Serial Number" align="left" />
+      <el-table-column prop="balance" label="Balance" align="left" />
+      <el-table-column prop="wallet" label="Wallet" align="left" />
+    </el-table>
+
+    <!-- Order Details -->
+    <el-table :data="orderDetails">
+      <el-table-column prop="number" label="Number" align="left" />
+      <el-table-column prop="item" label="Item" align="left" />
+      <el-table-column prop="unit" label="Unit" align="left" />
+      <el-table-column prop="quantity" label="Quantity" align="left" />
+      <el-table-column prop="specifications" label="Specifications" align="left" />
+      <el-table-column prop="unitPrice" label="Unit Price" align="right" />
+      <el-table-column prop="transactionAmount" label="Transaction Amount" align="right" />
+    </el-table>
+
+  </div>
+  <el-dialog class="top-1/4" v-model="showRefundDialog" :show-close="false" width="400">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header">
+        <h4 :id="titleId" :class="titleClass" class="text-center">Reason for refund</h4>
+      </div>
+    </template>
+    <el-input v-model="refundText" placeholder="Please enter the reason for refund"></el-input>
+    <el-button class="w-full mt-3" type="primary" @click="closeFundDialog">Confirm refund</el-button> 
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+
+const orderNumber = ref('123456788987654');
+const orderTime = ref('2023-09-09 24:00:00');
+const traderName = ref('12357633');
+const employeeId = ref('4567645');
+const amount = ref('76.0');
+const uploadTime = ref('2024-2-7 15:09:00');
+const orderStatus = ref('Completed');
+const paymentMethod = ref('Offline payment');
+const commodityType = ref('Hot Dishes');
+const showRefundDialog = ref(false);
+const refundText = ref('');
+const closeFundDialog = ()=>{
+  console.log('Refund');
+  showRefundDialog.value = false;
+}
+const handleBackHome = () => {
+  console.log('Navigate back home');
+};
+
+const handleRefund = () => {
+  console.log('Process refund');
+  showRefundDialog.value = true;
+};
+
+const handlePrint = () => {
+  console.log('Print order details');
+};
+
+const transactionDetails = ref([
+  {
+    serialNumber: '12345',
+    balance: 1000,
+    wallet: 'Wallet A'
+  },
+  {
+    serialNumber: '67890',
+    balance: 2000,
+    wallet: 'Wallet B'
+  }
+]);
+
+const orderDetails = ref([
+  {
+    number: '001',
+    item: 'Product A',
+    unit: 'Piece',
+    quantity: 5,
+    specifications: 'Standard',
+    unitPrice: 10.5,
+    transactionAmount: 52.5
+  },
+  {
+    number: '002',
+    item: 'Product B',
+    unit: 'Box',
+    quantity: 3,
+    specifications: 'Large',
+    unitPrice: 20.0,
+    transactionAmount: 60.0
+  }
+]);
+
+const totalAmount = ref(orderDetails.value.reduce((sum, order) => sum + order.transactionAmount, 0));
+
+const formatPrice = (row, column, cellValue) => {
+  return `$${cellValue.toFixed(2)}`;
+};
+</script>
+
+<style scoped>
+.order-details {
+  font-family: 'Inter', sans-serif;
+}
+
+.el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
+</style>

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",