first commit

app.ux

@@ -0,0 +1,9 @@
+<script>
+/**
+ * 应用级别的配置，供所有页面公用
+ */
+
+export default {
+  onCreate() {}
+}
+</script>

assets/styles/mixins.scss

@@ -0,0 +1,5 @@
+@mixin flex-box-mixins($direction: row, $justify: center, $align-items: center) {
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align-items;
+}

assets/styles/style.scss

@@ -0,0 +1,2 @@
+@import './variables.scss';
+@import './mixins.scss';

assets/styles/variables.scss

@@ -0,0 +1,9 @@
+$brand: #09ba07;
+
+$white: #ffffff;
+$black: #000000;
+$grey: #9393aa;
+$red: #fa0101;
+$green: #ffff00;
+
+$size-factor: 5px;

manifest.json

@@ -0,0 +1,41 @@
+{
+  "package": "top.chorblack.mynotes",
+  "name": "mynotes",
+  "versionName": "1.0.0",
+  "versionCode": 1,
+  "appCategory": [
+    "other"
+  ],
+  "icon": "/common/logo.png",
+  "features": [
+    {
+      "name": "blueos.app.appmanager.router"
+    },
+    { "name": "blueos.storage.storage" },
+    { "name": "blueos.window.prompt" }
+  ],
+  "deviceTypeList": [
+    "watch",
+    "watch-square"
+  ],
+  "config": {
+    "designWidth": 466
+  },
+  "router": {
+    "entry": "pages/index",
+    "pages": {
+      "pages/index": {
+        "component": "index"
+      },
+      "pages/edit-note": {
+        "component": "index"
+      },
+      "pages/keyboard": {
+        "component": "index"
+      }
+    }
+  },
+  "display": {
+    "backgroundColor": "#ffffff"
+  }
+}

pages/edit-note/index.ux

@@ -0,0 +1,416 @@
+<template>
+  <div class="demo-page" >
+    <div class="header" onclick="gotokeyboard(0)">
+      <div>
+        <text class="title" if="{{isreadonly}}">{{ title }}</text>
+        <input
+          else
+          type="text"
+          class="title"
+          style="color: black"
+          value="{{ title }}"
+          readonly="{{isreadonly?'isreadonly':''}}"
+          placeholder="请输入标题"
+          onchange="titleChange"
+          
+        />
+       
+      </div>
+      <text if="title" class="subtitle"
+        >{{ edit_date }} {{ edit_time }} | {{ words_number }}字</text
+      >
+      <text else class="subtitle"
+        >{{ date }} {{ time }} | {{ words_number }}字</text
+      >
+    </div>
+    <div>
+      <scroll class="content-scroll" onclick="gotokeyboard(1)">
+        <text class="content" if="{{isreadonly}}">{{ text }}</text>
+        <input
+          else
+          type="text"
+          readonly="{{isreadonly?'isreadonly':''}}"
+          class="content"
+          value="{{ text }}"
+          placeholder="点击开始书写"
+          onchange="textChange"
+        />
+      </scroll>
+    </div>
+    <div class="footer"></div>
+    <text
+      if="text"
+      type="text"
+      style="font-size: 40px;text-align:center;"
+      onclick="changemode"
+      >{{ isreadonly ? '只读模式' : '编辑模式' }}</text
+    >
+    <image
+      src="/common/close.png"
+      class="close-button"
+      @click="backIndex"
+    />
+    <image
+      src="/common/delete-button.png"
+      class="delete-button"
+      @click="deleteNote"
+    />
+    <image
+      src="/common/save-button.png"
+      class="save-button"
+      @click="routeSave"
+    />
+  </div>
+</template>
+
+<script>
+import router from '@blueos.app.appmanager.router'
+import storage from '@blueos.storage.storage'
+import prompt from '@blueos.window.prompt'
+export default {
+  data: {
+    title: '',
+    text: '',
+    date: '',
+    time: '',
+    edit_date: '',
+    edit_time: '',
+    words_number: 0,
+    add_note: false,
+    count_choose: 0,
+    notes: [],
+    isreadonly:true,
+  },
+  onInit() {
+    this.add_note = this.add_note == "true" ? true : false;
+    this.isreadonly = this.newnote == "true" ? false : true;
+    this.words_number = this.text.length;
+  },
+  titleChange({ value }) {
+    this.title = value;
+    this.words_number = this.title.length;
+  },
+  backIndex() {
+    router.replace({
+      uri: '/pages/index',
+    });
+  },
+  changemode(){
+    this.isreadonly = !this.isreadonly;
+  },
+  textChange({ value }) {
+    this.text = value;
+  },
+  gotokeyboard(key) {
+    if (key == 0) {
+      router.replace({
+        uri: '/pages/keyboard',
+        params: {
+          inputWords: this.title || ' ', // 添加空值保护
+          type: "title",
+          text: this.text || ' ',
+        },
+      });
+    }else{
+      router.replace({
+        uri: '/pages/keyboard',
+        params: {
+          inputWords: this.text || ' ', // 添加空值保护
+          type: "text",
+          title: this.title || ' ',
+        },
+      });
+    }
+  },
+  onReady() {
+    // 清除缓存
+    router.clear();
+    // 时间
+    const date = new Date();
+    const month = (date.getMonth() + 1).toString();
+    const day = date.getDate().toString();
+    const hourNumber = date.getHours(); // 先获取数字型小时 
+    const minute = date.getMinutes().toString().padStart(2, "0");
+
+    // 判断时段并转换为12小时制 
+    const period = hourNumber >= 12 ? '下午' : '上午';
+    const hour12 = (hourNumber % 12 || 12).toString(); // 处理0点转为12的特殊情况 
+
+    this.date = month + "月" + day + "日";
+    this.time = period + hour12 + ":" + minute;
+    this.count_choose = 0;
+
+
+    
+  },
+  async routeSave() {
+    this.count_choose = 0;
+    if (this.title == "") {
+      this.showToast("标题不能为空");
+      return;
+    }
+    
+    const data = storage.getSync({ key: 'notes' });
+    if (typeof data != 'string') {
+      console.error('存储数据格式错误，期望字符串，实际得到:', typeof data)
+      return []
+    }
+    let notes = data ? JSON.parse(data) : [];
+    const _note = {
+      title: this.title,
+      text: this.text,
+      date: this.date,
+      time: this.time,
+      words_number: this.words_number
+    };
+    if (this.add_note === true) {
+      notes.push(_note);
+    } else {
+      notes[Number(this.id)] = _note;
+    }
+    console.log(this.add_note,notes)
+    await storage.set({
+      key: 'notes',
+      value: JSON.stringify(notes),
+    })
+    this.showToast("笔记保存成功！");
+    router.replace({
+      uri: '/pages/index',
+    });
+  },
+  deleteNote() {
+    this.count_choose += 1;
+    if (this.count_choose === 1) {
+      this.showToast("再次点击以确认删除笔记");
+    } else if (this.count_choose === 2) {
+      storage.get({
+        key: 'notes',
+        default: '0',
+        success: (data) => {
+          let notes = data != '0' ? JSON.parse(data) : [];
+          if (notes.length > 0) {
+            notes.splice(Number(this.id), 1);
+            storage.set({
+              key: 'notes',
+              value: JSON.stringify(notes),
+              success: () => {
+                this.replacePage('/pages/index');
+                this.showToast("笔记删除成功！");
+              },
+              fail: (_, code) => {
+                this.showToast("笔记删除失败，错误码: " + code);
+              },
+            })
+          } else {
+            this.showToast("笔记为空！");
+          }
+          router.replace({
+            uri: '/pages/index',
+          });
+        },
+      })
+    }
+  },
+  showToast(msg) {
+    prompt.showToast({ message: msg });
+  },
+  replacePage(uri) {
+    router.replace({
+      uri: uri
+    })
+  },
+};
+</script>
+
+<style lang="scss">
+@import './../../assets/styles/style.scss';
+.demo-page {
+  height: 514px;
+  width: 466px;
+  background-color: #f7f7f7;
+  display: flex;
+  border-radius: 50px;
+  flex-direction: column;
+}
+
+.header {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 50px 50px 0 0;
+}
+
+.title {
+  display: flex;
+  width: 70%;
+  margin-top: 50px;
+  margin-left: 40px;
+  font-weight: bold;
+}
+.content-scroll {
+  margin-top: 10px;
+  left: 40px;
+  margin-right: 40px;
+  display: flex;
+  width: 390px;
+  height: 270px;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.subtitle {
+  margin-top: 10px;
+  left: 40px;
+  color: #999999;
+  font-size: 30px;
+}
+
+.content {
+  font-size: 40px;
+}
+
+.input-area {
+  background-color: gray;
+  margin-top: 15px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  margin-left: 15px;
+  width: 90%;
+  height: 80px;
+  justify-self: center;
+  border-radius: 15px;
+}
+
+.input-text {
+  width: inherit;
+  height: inherit;
+  background-color: white;
+  color: black;
+  font-size: 50px;
+  text-overflow: ellipsis;
+}
+
+.candidate-area {
+  width: 100%;
+  height: 60px;
+  background-color: white;
+}
+
+.input-cache-area {
+  border-radius: 10px 10px 0 0;
+  margin-left: 7px;
+  width: auto;
+  display: flex;
+  justify-content: flex-start;
+  background-color: white;
+}
+
+.input-cache-text {
+  font-size: 25px;
+  color: black;
+}
+
+.candidate-words {
+  font-size: 30px;
+  width: 60px;
+  height: 60px;
+  margin-left: 10px;
+}
+
+.keyboard {
+  display: flex;
+}
+
+.open-keyborad {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 0;
+}
+
+#keyboard-root {
+  background-color: #e8eaf7;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.symbol-line {
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+}
+
+.number-line {
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+}
+
+#input-bar-scroll {
+  width: 88%;
+  height: 60px;
+  white-space: nowrap;
+}
+
+.close-keyboard {
+  width: 50px;
+  height: 40px;
+}
+
+.key {
+  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
+  background-color: white;
+  width: 40px;
+  height: 60px;
+  margin-top: 3px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+  margin-left: 3px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+}
+
+.key text {
+  font-size: 30px;
+  color: black;
+}
+
+.footer {
+  display: flex;
+  height: 10px;
+  background-color: #e8eaf8;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.save-button {
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  position: absolute;
+  right: 40px;
+  top: 470px;
+}
+
+.delete-button {
+  height: 50px;
+  width: 50px;
+  position: absolute;
+  right: 40px;
+  top: 50px;
+}
+
+.close-button {
+  height: 48px;
+  width: 48px;
+  position: absolute;
+  left: 40px;
+  top: 470px;
+}
+</style>
+

pages/index/index.ux

@@ -0,0 +1,163 @@
+<template>
+  <div class="demo-page">
+    <div class="header">
+      <img src="/common/title.png" class="title" />
+    </div>
+    <list class="list" if="!no_note">
+      <list-item
+        type="noteItem"
+        class="item"
+        for="{{notes}}"
+        @click="checkNote($idx)"
+      >
+        <text class="item-title">{{ $item.title }}</text>
+        <text class="item-text">{{ $item.text }}</text>
+        <text class="date">{{ $item.date }}</text>
+      </list-item>
+    </list>
+
+    <input type="button" class="add-button" @click="routeAdd" value="+" />
+    <div if="no_note" class="tip">
+      <text>————————</text>
+      <text>我本应劫惹神愤</text>
+      <text>孤绝一生流离人</text>
+      <text>如有因果尽加吾身</text>
+    </div>
+  </div>
+</template>
+<script>
+import router from '@blueos.app.appmanager.router'
+import storage from '@blueos.storage.storage'
+import prompt from '@blueos.window.prompt'
+export default {
+  data: {
+    count: 0,
+    no_note: true,
+    notes: []
+  },
+  routeAdd() {
+    router.push({
+      uri: '/pages/edit-note',
+      params: {
+        add_note: "true",
+        newnote: "true"
+      }
+    });
+  },
+  onInit() {
+    storage.get({
+      key: 'notes',
+      default: '0',
+      success: data => {
+        if (data == '0') {
+          this.no_note = true;
+          prompt.showToast({ message: "欢迎使用笔记" });
+        } else {
+          this.notes = JSON.parse(data);
+          this.no_note = false;
+        }
+      },
+      fail: (_, code) => console.log('读取失败，错误码', code)
+    });
+
+  },
+  checkNote(note_id) {
+    const note = this.notes[note_id];
+    router.push({
+      uri: '/pages/edit-note',
+      params: {
+        add_note: "flase",
+        id: note_id,
+        title: note.title,
+        text: note.text,
+        edit_date: note.date,
+        edit_time: note.time
+      }
+    });
+  },
+  onRefresh() {
+    router.clear();
+  }
+};
+
+</script>
+
+<style lang="scss">
+@import './../../assets/styles/style.scss';
+
+.demo-page {
+  height: 100%;
+  width: 100%;
+  background-color: #f7f7f7;
+  display: flex;
+  flex-direction: column;
+  border-radius: 50px;
+}
+.header {
+  width: 100%;
+  height: 25%;
+  display: flex;
+  border-radius: 50px 50px 0 0;
+}
+
+.title {
+  display: flex;
+  font-size: 100px;
+  margin-top: 30px;
+  margin-left: 40px;
+}
+
+.list {
+  height: 75%;
+  display: flex;
+  flex-wrap: wrap-reverse;
+}
+.item {
+  margin-left: 15px;
+  margin-bottom: 15px;
+  border-radius: 30px;
+  padding: 15px;
+  width: 430px;
+  height: auto;
+  background-color: white;
+  color: black;
+  display: flex;
+  flex-direction: column;
+}
+.item-title {
+  font-size: 35px;
+  height: 50px;
+}
+.item-text {
+  font-size: 25px;
+  color: #6d7878;
+  max-height: 110px;
+}
+.date {
+  width: 100%;
+  background-color: #ffffff;
+  color: #999999;
+  font-size: 20px;
+  bottom: 15px;
+}
+.tip {
+  position: absolute;
+  width: 80%;
+  bottom: 190px;
+  margin-left: 100px;
+  color: #999999;
+  display: flex;
+  flex-direction: column;
+}
+.add-button {
+  height: 100px;
+  width: 100px;
+  font-size: 100px;
+  color: white;
+  position: absolute;
+  background-color: #ffb21e;
+  right: 50px;
+  bottom: 50px;
+  border-radius: 50px;
+}
+</style>