日期选择器

frontent/ops_vue_js/package-lock.json

@@ -12,6 +12,7 @@
         "@tabler/icons-vue": "^3.35.0",
         "axios": "^1.13.2",
         "bootstrap": "^5.3.8",
+        "litepicker": "^2.0.12",
         "pinia": "^3.0.4",
         "vue": "^3.5.22",
         "vue-i18n": "^11.1.12",
@@ -2349,6 +2350,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/litepicker": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.12.tgz",
+      "integrity": "sha512-1N0sZJca/eALvS1hbJsVqKXwJAmp0BsJn73kZKWGGLjZkvjKr7HXGPV+/shu60aEY/JXoOg2XUmo7hbdIOsFpQ==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",

frontent/ops_vue_js/package.json

@@ -16,6 +16,7 @@
     "@tabler/icons-vue": "^3.35.0",
     "axios": "^1.13.2",
     "bootstrap": "^5.3.8",
+    "litepicker": "^2.0.12",
     "pinia": "^3.0.4",
     "vue": "^3.5.22",
     "vue-i18n": "^11.1.12",

frontent/ops_vue_js/src/components/HeardMain.vue

@@ -213,7 +213,7 @@ onMounted(() => {
               <router-link to="" class="dropdown-item">{{
                 t("message.user_home")
               }}</router-link>
-              <router-link to="" class="dropdown-item">{{
+              <router-link to="/settings/account" class="dropdown-item">{{
                 t("message.user_settings")
               }}</router-link>
               <router-link to="" class="dropdown-item">{{

frontent/ops_vue_js/src/components/datePicker.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import Litepicker from "litepicker";
+
+const datepicker_inline = ref(null);
+
+onMounted(() => {
+  // @formatter:off
+
+  new Litepicker({
+    element: datepicker_inline.value,
+    lang: 'zh-cn',
+    firstDay: 0,
+    buttonText: {
+      previousMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
+      nextMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
+    },
+    inlineMode: true,
+  });
+
+  // @formatter:on
+});
+</script>
+
+<template>
+  <div class="input-icon">
+    <span class="input-icon-addon"
+      ><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path
+          d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"
+        />
+        <path d="M16 3v4" />
+        <path d="M8 3v4" />
+        <path d="M4 11h16" />
+        <path d="M11 15h1" />
+        <path d="M12 15v3" />
+      </svg>
+    </span>
+    <input
+      class="form-control"
+      placeholder="Select a date"
+      id="datepicker-icon-prepend"
+      value="2020-06-20"
+    />
+  </div>
+
+  <div class="mb-3">
+    <label class="form-label">Inline datepicker</label>
+    <div class="datepicker-inline" ref="datepicker_inline"></div>
+  </div>
+</template>

frontent/ops_vue_js/src/components/settingNavigation.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { RouterLink } from "vue-router";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+</script>
+
+<template>
+  <div class="col-12 col-md-3 border-end">
+    <div class="card-body">
+      <div class="list-group list-group-transparent">
+        <router-link
+          to="/settings/account"
+          class="list-group-item list-group-item-action d-flex align-items-center active"
+        >
+          {{t('settings.account_settings')}}</router-link
+        >
+      
+        
+      </div>
+      <h4 class="subheader mt-4">{{t('settings.admin')}}</h4>
+      <div class="list-group list-group-transparent">
+        <router-link
+          to="/settings/account"
+          class="list-group-item list-group-item-action d-flex align-items-center active"
+        >
+          {{t('settings.website_settings')}}</router-link
+        >
+      </div>
+    </div>
+  </div>
+</template>

frontent/ops_vue_js/src/i18n/en.json

@@ -47,6 +47,29 @@
     "preferences": "Preferences",
     "administrator": "Administrator"
   },
+  "settings": {
+    "account_settings": "Account Settings",
+    "my_account": "My Account",
+    "profile_information": "Profile Information",
+    "change_avatar": "Change Avatar",
+    "change_email": "Change Email",
+    "name": "Name",
+    "remark": "Remark",
+    "email": "Email",
+    "gender": "Gender",
+    "male": "Male",
+    "female": "Female",
+    "birthday": "Birthday",
+    "admin": "Admin",
+    "website_settings": "Website Settings",
+    "site_name": "Site Name",
+    "logo_settings": "Logo Settings",
+    "site_description": "Site Description",
+    "site_keywords": "Site Keywords",
+    "save_changes": "Save Changes",
+    "password": "Password",
+    "set_new_password": "Set New Password"
+  },
   "button": {
     "submit": "Submit",
     "cancel": "Cancel",

frontent/ops_vue_js/src/i18n/zh-CN.json

@@ -47,6 +47,29 @@
     "preferences": "偏好设置",
     "administrator": "管理员"
   },
+  "settings": {
+    "account_settings": "个人设置",
+    "my_account": "我的账户",
+    "profile_information": "个人信息",
+    "change_avatar": "更改头像",
+    "change_email": "更改邮箱",
+    "name": "姓名",
+    "remark": "备注",
+    "email": "邮箱",
+    "gender": "性别",
+    "male": "男",
+    "female": "女",
+    "birthday": "生日",
+    "admin": "管理员",
+    "website_settings":"网站设置",
+    "site_name": "网站名称",
+    "logo_settings": "Logo设置",
+    "site_description": "网站描述",
+    "site_keywords": "网站关键词",
+    "save_changes": "保存更改",
+    "password": "密码",
+    "set_new_password": "设置新密码"
+  },
   "button": {
     "submit": "提交",
     "cancel": "取消",

frontent/ops_vue_js/src/router/index.js

@@ -45,6 +45,11 @@ const router = createRouter({
       path: "/admin",
       name: "admin",
       component: () => import("../views/adminView.vue"),
+    },
+        {
+      path: "/settings/account",
+      name: "settings account",
+      component: () => import("../views/settings/account.vue"),
     },
   ],
 });

frontent/ops_vue_js/src/views/settings/account.vue

@@ -0,0 +1,88 @@
+<script setup>
+import settingNavigation from "@/components/settingNavigation.vue";
+import { useI18n } from "vue-i18n";
+import datePicker from "@/components/datePicker.vue";
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="page-wrapper">
+    <div class="page-header d-print-none">
+      <div class="container-xl">
+        <h2 class="page-title">{{ t("settings.account_settings") }}</h2>
+      </div>
+    </div>
+
+    <div class="page-body">
+      <div class="container-xl">
+        <div class="card">
+          <div class="row g-0">
+            <settingNavigation />
+            <div class="col-12 col-md-9 d-flex flex-column">
+              <div class="card-body">
+                <h2 class="mb-4">{{ t("settings.my_account") }}</h2>
+                <h3 class="card-title">
+                  {{ t("settings.profile_information") }}
+                </h3>
+                <div class="row align-items-center">
+                  <div class="col-auto">
+                    <span
+                      class="avatar avatar-xl"
+                      style="background-image: url(./static/avatars/000m.jpg)"
+                    ></span>
+                  </div>
+                  <div class="col-auto">
+                    <button class="btn">
+                      {{ t("settings.change_avatar") }}
+                    </button>
+                  </div>
+                </div>
+                <h3 class="card-title mt-4">-</h3>
+                <div class="row g-3">
+                  <div class="col-md">
+                    <div class="form-label">{{ t("settings.name") }}</div>
+                    <input type="text" class="form-control" />
+                  </div>
+                  <div class="col-md">
+                    <div class="form-label">{{ t("settings.remark") }}</div>
+                    <input type="text" class="form-control" />
+                  </div>
+                  <div class="col-md">
+                    <div class="form-label">{{ t("settings.birthday") }}</div>
+                    <input type="text" class="form-control" />
+                    <datePicker />
+                    
+                  </div>
+                  <div>
+                    <button class="btn">{{ t("settings.save_changes") }}</button>
+                  </div>
+                </div>
+                <h3 class="card-title mt-4">{{ t("settings.email") }}</h3>
+                <div>
+                  <div class="row g-2">
+                    <div class="col-auto">
+                      <input type="text" class="form-control w-auto" />
+                    </div>
+                    <div class="col-auto">
+                      <button class="btn">
+                        {{ t("settings.change_email") }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <h3 class="card-title mt-4">{{ t("settings.password") }}</h3>
+                <input type="password" class="form-control w-auto mb-1" />
+                <input type="password" class="form-control w-auto mb-1" />
+                <input type="password" class="form-control w-auto mb-1" />
+
+                <div>
+                  <button class="btn">{{ t("settings.set_new_password") }}</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>